Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Widget Styles

Browse Source
This commit is contained in:
Abhinav Jha 2020-02-06 07:01:25 +00:00
parent e2ceaed1db
commit f787e18bb5
13 changed files with 3270 additions and 2435 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/src/api/Api.tsx
View File

@ -43,7 +43,9 @@ axiosInstance.interceptors.response.use(
},
function(error: any) {
if (error.code === "ECONNABORTED") {
console.log("CONNECTION TIMEOUT");
return Promise.reject({
message: "Please check your internet connection",
});
}
if (error.config.url.match(executeActionRegex)) {
return makeExecuteActionResponse(error.response);

2
app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx
View File

@ -2,6 +2,7 @@ import React from "react";
import styled from "styled-components";
import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
import { Checkbox, Classes } from "@blueprintjs/core";
import { BlueprintControlTransform } from "constants/DefaultTheme";
const CheckboxContainer = styled.div`
&& {
@ -14,6 +15,7 @@ const CheckboxContainer = styled.div`
margin: 0;
}
}
${BlueprintControlTransform}
`;
class CheckboxComponent extends React.Component<CheckboxComponentProps> {
render() {

227
app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
View File

@ -1,4 +1,4 @@
import * as React from "react";
import React, { ReactNode } from "react";
import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
import {
MenuItem,
@ -6,13 +6,26 @@ import {
ControlGroup,
Label,
Classes,
Checkbox,
Icon,
} from "@blueprintjs/core";
import { IconNames } from "@blueprintjs/icons";
import { SelectionType, DropdownOption } from "widgets/DropdownWidget";
import { Select, MultiSelect, IItemRendererProps } from "@blueprintjs/select";
import {
Select,
MultiSelect,
IItemRendererProps,
Classes as MultiSelectClasses,
} from "@blueprintjs/select";
import _ from "lodash";
import { WIDGET_PADDING } from "constants/WidgetConstants";
import "../../../../node_modules/@blueprintjs/select/lib/css/blueprint-select.css";
import styled, { labelStyle } from "constants/DefaultTheme";
import styled, {
labelStyle,
BlueprintCSSTransform,
BlueprintInputTransform,
} from "constants/DefaultTheme";
import { Colors } from "constants/Colors";
const SingleDropDown = Select.ofType<DropdownOption>();
const MultiDropDown = MultiSelect.ofType<DropdownOption>();
@ -23,46 +36,164 @@ const StyledSingleDropDown = styled(SingleDropDown)`
}
span {
width: 100%;
position: relative;
}
.bp3-button {
.${Classes.BUTTON} {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
${labelStyle}
}
.bp3-button-text {
.${Classes.BUTTON_TEXT} {
text-overflow: ellipsis;
text-align: center;
text-align: left;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.bp3-icon {
width: fit-content;
&& {
.${Classes.ICON} {
width: fit-content;
color: ${Colors.SLATE_GRAY};
}
}
`;
const StyledControlGroup = styled(ControlGroup)`
&&& {
const StyledControlGroup = styled(ControlGroup)<{ hasLabel: boolean }>`
&&& > {
label {
${labelStyle}
margin: 0 ${WIDGET_PADDING * 2}px 0 0;
align-self: center;
margin: 7px ${WIDGET_PADDING * 2}px 0 0;
align-self: flex-start;
flex: 0 1 30%;
max-width: calc(30% - ${WIDGET_PADDING}px);
text-align: right;
}
span {
max-width: ${props =>
props.hasLabel ? `calc(70% - ${WIDGET_PADDING}px)` : "100%"};
}
}
`;
const DropdownContainer = styled.div`
textalign: center;
${BlueprintCSSTransform}
&&&& .${Classes.MENU_ITEM} {
border-radius: ${props => props.theme.radii[1]}px;
&:hover{
background: ${Colors.POLAR};
}
&.${Classes.ACTIVE} {
background: ${Colors.POLAR};
color: ${props => props.theme.colors.textDefault};
position:relative;
&.single-select{
&:before{
left: 0;
top: -2px;
position: absolute;
content: "";
background: ${props => props.theme.colors.primary};
border-radius: 4px 0 0 4px;
width: 4px;
height:100%;
}
}
}
}
&& .${Classes.POPOVER} {
width: 100%;
border-radius: ${props => props.theme.radii[1]}px;
box-shadow: 0px 2px 4px rgba(67, 70, 74, 0.14);
padding: ${props => props.theme.spaces[3]}px;
background:white;
}
&& .${Classes.POPOVER_WRAPPER} {
position:relative;
.${Classes.OVERLAY} {
position: absolute;
.${Classes.TRANSITION_CONTAINER} {
width: 100%;
}
}
}
&& .${Classes.MENU} {
max-width: 100%;
max-height: auto;
}
width: 100%;
`;
const StyledMultiDropDown = styled(MultiDropDown)`
.bp3-multi-select {
div {
flex: 1 1 auto;
}
.${MultiSelectClasses.MULTISELECT} {
position: relative;
min-width: 0;
}
&& {
${BlueprintInputTransform}
.${Classes.TAG_INPUT} {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
text-overflow: ellipsis;
overflow: hidden;
.${Classes.TAG_INPUT_VALUES} {
margin-top: 0;
overflow: hidden;
padding: 2px 0;
}
.${Classes.TAG} {
background: none;
border: 1px solid #D0D7DD;
border-radius: 2px;
margin-bottom: 0;
max-width: 100px;
}
& > .${Classes.ICON} {
align-self: center;
margin-right: 10px;
color: ${Colors.SLATE_GRAY};
}
.${Classes.INPUT_GHOST} {
width: 0px;
flex: 0 0 auto;
}
}
}
&&&& {
.${Classes.CONTROL} .${Classes.CONTROL_INDICATOR} {
background: white;
box-shadow: none;
border-width: 2px;
border-style: solid;
border-color: ${Colors.GEYSER};
&::before {
width: auto;
height: 1em;
}
}
.${Classes.CONTROL} input:checked ~ .${Classes.CONTROL_INDICATOR} {
background: ${props => props.theme.colors.primary};
color: ${props => props.theme.colors.textOnDarkBG};
border-color: ${props => props.theme.colors.primary};
}
}
`;
const StyledCheckbox = styled(Checkbox)`
&&.${Classes.CHECKBOX}.${Classes.CONTROL} {
margin: 0;
}
`;
class DropDownComponent extends React.Component<DropDownComponentProps> {
render() {
const selectedItems = this.props.selectedIndexArr
@ -72,7 +203,7 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
: [];
return (
<DropdownContainer>
<StyledControlGroup fill>
<StyledControlGroup fill hasLabel={!!this.props.label}>
{this.props.label && (
<Label
className={
@ -86,15 +217,18 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
)}
{this.props.selectionType === "SINGLE_SELECT" ? (
<StyledSingleDropDown
className={this.props.isLoading ? "bp3-skeleton" : ""}
className={this.props.isLoading ? Classes.SKELETON : ""}
items={this.props.options}
filterable={false}
itemRenderer={this.renderItem}
itemRenderer={this.renderSingleSelectItem}
onItemSelect={this.onItemSelect}
popoverProps={{
minimal: true,
usePortal: false,
}}
>
<Button
intent={"primary"}
rightIcon="chevron-down"
rightIcon={IconNames.CHEVRON_DOWN}
text={
!_.isEmpty(this.props.options)
? this.props.options[this.props.selectedIndex].label
@ -104,15 +238,23 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
</StyledSingleDropDown>
) : (
<StyledMultiDropDown
className={this.props.isLoading ? "bp3-skeleton" : ""}
className={this.props.isLoading ? Classes.SKELETON : ""}
items={this.props.options}
fill={true}
placeholder={this.props.placeholder}
tagRenderer={this.renderTag}
itemRenderer={this.renderItem}
itemRenderer={this.renderMultiSelectItem}
selectedItems={selectedItems}
tagInputProps={{ onRemove: this.onItemRemoved }}
tagInputProps={{
onRemove: this.onItemRemoved,
tagProps: { minimal: true },
inputProps: { readOnly: true },
rightElement: <Icon icon={IconNames.CHEVRON_DOWN} />,
}}
onItemSelect={this.onItemSelect}
popoverProps={{
minimal: true,
usePortal: false,
}}
></StyledMultiDropDown>
)}
</StyledControlGroup>
@ -147,21 +289,52 @@ class DropDownComponent extends React.Component<DropDownComponentProps> {
}
};
renderItem = (option: DropdownOption, itemProps: IItemRendererProps) => {
renderSingleSelectItem = (
option: DropdownOption,
itemProps: IItemRendererProps,
) => {
if (!itemProps.modifiers.matchesPredicate) {
return null;
}
const isSelected: boolean = this.isOptionSelected(option);
return (
<MenuItem
icon={isSelected ? "tick" : "blank"}
active={itemProps.modifiers.active}
className="single-select"
active={isSelected}
key={option.value}
onClick={itemProps.handleClick}
text={option.label}
/>
);
};
renderMultiSelectItem = (
option: DropdownOption,
itemProps: IItemRendererProps,
) => {
if (!itemProps.modifiers.matchesPredicate) {
return null;
}
const isSelected: boolean = this.isOptionSelected(option);
const content: ReactNode = (
<React.Fragment>
<StyledCheckbox
checked={isSelected}
label={option.label}
alignIndicator="left"
onChange={(e: any) => itemProps.handleClick(e)}
/>
</React.Fragment>
);
return (
<MenuItem
className="multi-select"
active={isSelected}
key={option.value}
text={content}
/>
);
};
}
export interface DropDownComponentProps extends ComponentProps {

150
app/client/src/components/designSystems/blueprint/InputComponent.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
import { getBorderCSSShorthand, labelStyle } from "constants/DefaultTheme";
import { labelStyle } from "constants/DefaultTheme";
import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
import {
Intent,
@ -12,9 +12,11 @@ import {
Text,
Classes,
ControlGroup,
TextArea,
} from "@blueprintjs/core";
import { InputType } from "widgets/InputWidget";
import { WIDGET_PADDING } from "constants/WidgetConstants";
import { Colors } from "constants/Colors";
/**
* All design system component specific logic goes here.
* Ex. Blueprint has a sperarate numeric input and text input so switching between them goes here
@ -22,30 +24,35 @@ import { WIDGET_PADDING } from "constants/WidgetConstants";
* All generic logic like max characters for phone numbers should be 10, should go in the widget
*/
const InputComponentWrapper = styled(ControlGroup)`
const InputComponentWrapper = styled(ControlGroup)<{ isTextArea: boolean }>`
&&&& {
.bp3-input {
.${Classes.INPUT} {
box-shadow: none;
border: ${props => getBorderCSSShorthand(props.theme.borders[2])};
border-radius: 0;
border: 1px solid ${Colors.GEYSER_LIGHT};
border-radius: ${props => props.theme.radii[1]}px;
height: ${props => (props.isTextArea ? "100%" : "inherit")};
&:active {
border: 1px solid ${Colors.HIT_GRAY};
}
&:focus {
border: 3px solid ${Colors.MYSTIC};
}
}
.bp3-input:focus {
border: ${props => getBorderCSSShorthand(props.theme.borders[2])};
box-shadow: none;
}
div.bp3-input-group {
.${Classes.INPUT_GROUP} {
display: block;
margin: 0;
}
.bp3-control-group {
.${Classes.CONTROL_GROUP} {
justify-content: flex-start;
}
height: ${props => (props.isTextArea ? "100%" : "auto")};
align-items: center;
label {
${labelStyle}
flex: 0 1 30%;
margin: 0 ${WIDGET_PADDING * 2}px 0 0;
margin: 7px ${WIDGET_PADDING * 2}px 0 0;
text-align: right;
align-self: flex-start;
}
}
`;
@ -59,7 +66,11 @@ class InputComponent extends React.Component<
this.state = { showPassword: false };
}
onTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
onTextChange = (
event:
| React.ChangeEvent<HTMLInputElement>
| React.ChangeEvent<HTMLTextAreaElement>,
) => {
this.props.onValueChange(event.target.value);
};
@ -100,10 +111,74 @@ class InputComponent extends React.Component<
return "text";
}
}
private numericInputComponent = () => (
<NumericInput
placeholder={this.props.placeholder}
min={this.props.minNum}
max={this.props.maxNum}
maxLength={this.props.maxChars}
disabled={this.props.disabled}
intent={this.props.intent}
className={this.props.isLoading ? "bp3-skeleton" : Classes.FILL}
defaultValue={this.props.defaultValue}
onValueChange={this.onNumberChange}
leftIcon={
this.props.inputType === "PHONE_NUMBER" ? "phone" : this.props.leftIcon
}
type={this.props.inputType === "PHONE_NUMBER" ? "tel" : undefined}
allowNumericCharactersOnly
stepSize={this.props.stepSize}
/>
);
private textAreaInputComponent = (
<TextArea
placeholder={this.props.placeholder}
disabled={this.props.disabled}
maxLength={this.props.maxChars}
intent={this.props.intent}
onChange={this.onTextChange}
defaultValue={this.props.defaultValue}
className={this.props.isLoading ? "bp3-skeleton" : ""}
growVertically={false}
/>
);
private textInputComponent = (isTextArea: boolean) =>
isTextArea ? (
this.textAreaInputComponent
) : (
<InputGroup
placeholder={this.props.placeholder}
disabled={this.props.disabled}
maxLength={this.props.maxChars}
intent={this.props.intent}
onChange={this.onTextChange}
defaultValue={this.props.defaultValue}
className={this.props.isLoading ? "bp3-skeleton" : ""}
rightElement={
this.props.inputType === "PASSWORD" ? (
<Button
icon={"lock"}
onClick={() => {
this.setState({ showPassword: !this.state.showPassword });
}}
/>
) : (
undefined
)
}
type={this.getType(this.props.inputType)}
leftIcon={this.getIcon(this.props.inputType)}
/>
);
private renderInputComponent = (inputType: InputType, isTextArea: boolean) =>
this.isNumberInputType(inputType)
? this.numericInputComponent()
: this.textInputComponent(isTextArea);
render() {
return (
<InputComponentWrapper fill>
<InputComponentWrapper fill isTextArea={this.props.isTextArea}>
{this.props.label && (
<Label
className={
@ -116,51 +191,7 @@ class InputComponent extends React.Component<
</Label>
)}
{this.isNumberInputType(this.props.inputType) ? (
<NumericInput
placeholder={this.props.placeholder}
min={this.props.minNum}
max={this.props.maxNum}
maxLength={this.props.maxChars}
disabled={this.props.disabled}
intent={this.props.intent}
className={this.props.isLoading ? "bp3-skeleton" : Classes.FILL}
defaultValue={this.props.defaultValue}
onValueChange={this.onNumberChange}
leftIcon={
this.props.inputType === "PHONE_NUMBER"
? "phone"
: this.props.leftIcon
}
type={this.props.inputType === "PHONE_NUMBER" ? "tel" : undefined}
allowNumericCharactersOnly
stepSize={this.props.stepSize}
/>
) : (
<InputGroup
placeholder={this.props.placeholder}
disabled={this.props.disabled}
maxLength={this.props.maxChars}
intent={this.props.intent}
onChange={this.onTextChange}
defaultValue={this.props.defaultValue}
className={this.props.isLoading ? "bp3-skeleton" : ""}
rightElement={
this.props.inputType === "PASSWORD" ? (
<Button
icon={"lock"}
onClick={() => {
this.setState({ showPassword: !this.state.showPassword });
}}
/>
) : (
undefined
)
}
type={this.getType(this.props.inputType)}
leftIcon={this.getIcon(this.props.inputType)}
/>
)}
{this.renderInputComponent(this.props.inputType, this.props.isTextArea)}
{this.props.errorMessage && <Text>{this.props.errorMessage}</Text>}
</InputComponentWrapper>
);
@ -188,6 +219,7 @@ export interface InputComponentProps extends ComponentProps {
stepSize?: number;
placeholder?: string;
isLoading: boolean;
isTextArea: boolean;
}
export default InputComponent;

6
app/client/src/components/designSystems/blueprint/RadioGroupComponent.tsx
View File

@ -10,7 +10,7 @@ import {
Classes,
} from "@blueprintjs/core";
import { WIDGET_PADDING } from "constants/WidgetConstants";
import { labelStyle } from "constants/DefaultTheme";
import { BlueprintControlTransform, labelStyle } from "constants/DefaultTheme";
const StyledControlGroup = styled(ControlGroup)`
&&& {
@ -24,7 +24,9 @@ const StyledControlGroup = styled(ControlGroup)`
}
`;
const StyledRadioGroup = styled(RadioGroup)``;
const StyledRadioGroup = styled(RadioGroup)`
${BlueprintControlTransform};
`;
class RadioGroupComponent extends React.Component<RadioGroupComponentProps> {
render() {

111
app/client/src/constants/DefaultTheme.tsx
View File

@ -3,6 +3,7 @@ import { Colors, Color } from "./Colors";
import * as FontFamilies from "./Fonts";
import tinycolor from "tinycolor2";
import _ from "lodash";
import { Classes } from "@blueprintjs/core";
export type FontFamily = typeof FontFamilies[keyof typeof FontFamilies];
@ -25,6 +26,66 @@ export const IntentColors: Record<string, Color> = {
export type Intent = typeof IntentColors[keyof typeof IntentColors];
export const BlueprintControlTransform = css`
&& {
.${Classes.CONTROL} {
& input:checked ~ .${Classes.CONTROL_INDICATOR} {
background: ${props => props.theme.colors.primary};
box-shadow: none;
border: 2px solid ${props => props.theme.colors.primary};
}
& input:not(:disabled):active ~ .${Classes.CONTROL_INDICATOR} {
box-shadow: none;
background: none;
border: 2px solid ${Colors.SLATE_GRAY};
}
& input:not(:disabled):active:checked ~ .${Classes.CONTROL_INDICATOR} {
box-shadow: none;
background: none;
border: 2px solid ${Colors.SLATE_GRAY};
}
&:hover .${Classes.CONTROL_INDICATOR} {
box-shadow: none;
background: none;
border: 2px solid ${Colors.SLATE_GRAY};
}
}
.${Classes.CONTROL_INDICATOR} {
box-shadow: none;
background: none;
border: 2px solid ${Colors.SLATE_GRAY};
&::before {
position: absolute;
left: -2px;
top: -2px;
}
}
}
`;
export const BlueprintCSSTransform = css`
&&&& {
.${Classes.BUTTON} {
box-shadow: none;
border-radius: 4px;
background: none;
border: 1px solid ${Colors.GEYSER};
}
.${Classes.INTENT_PRIMARY} {
background: ${IntentColors.primary};
}
.${Classes.INTENT_SUCCESS} {
background: ${IntentColors.success};
}
.${Classes.INTENT_DANGER} {
background: ${IntentColors.danger};
}
.${Classes.INTENT_WARNING} {
background: ${IntentColors.warning};
}
}
`;
export const darken = (color: Color, intensity: number) => {
return new tinycolor(color).darken(intensity).toString();
};
@ -37,7 +98,7 @@ export const darkenActive = (color: Color) => {
return darken(color, 16);
};
const getHoverAndActiveStyles = (color: Color, filled = true) => {
const getButtonHoverAndActiveStyles = (color: Color, filled = true) => {
return css`
background: ${color};
border-color: ${filled ? color : "auto"};
@ -56,7 +117,7 @@ const getHoverAndActiveStyles = (color: Color, filled = true) => {
};
export const BlueprintButtonIntentsCSS = css`
&&.bp3-button {
&&.${Classes.BUTTON} {
box-shadow: none;
display: flex;
border-width: 1px;
@ -73,56 +134,70 @@ export const BlueprintButtonIntentsCSS = css`
}
background: ${Colors.WHITE};
}
&&&.bp3-button.bp3-intent-primary:not(.bp3-minimal) {
&&&.${Classes.BUTTON}.${Classes.INTENT_PRIMARY}:not(.${Classes.MINIMAL}) {
background: ${IntentColors.primary};
${getHoverAndActiveStyles(IntentColors.primary)}
${getButtonHoverAndActiveStyles(IntentColors.primary)}
}
&&&.bp3-button.bp3-intent-secondary:not(.bp3-minimal) {
&&&.${Classes.BUTTON}.bp3-intent-secondary:not(.${Classes.MINIMAL}) {
background: ${IntentColors.secondary};
${getHoverAndActiveStyles(IntentColors.secondary)}
${getButtonHoverAndActiveStyles(IntentColors.secondary)}
}
&&&.bp3-button.bp3-intent-danger:not(.bp3-minimal) {
&&&.${Classes.BUTTON}.${Classes.INTENT_DANGER}:not(.${Classes.MINIMAL}) {
background: ${IntentColors.danger};
${getHoverAndActiveStyles(IntentColors.danger)}
${getButtonHoverAndActiveStyles(IntentColors.danger)}
}
&&&.bp3-button.bp3-intent-success:not(.bp3-minimal) {
&&&.${Classes.BUTTON}.${Classes.INTENT_SUCCESS}:not(.${Classes.MINIMAL}) {
background: ${IntentColors.success};
${getHoverAndActiveStyles(IntentColors.success)}
${getButtonHoverAndActiveStyles(IntentColors.success)}
}
&&&.bp3-button.bp3-intent-warning:not(.bp3-minimal) {
&&&.${Classes.BUTTON}.${Classes.INTENT_WARNING}:not(.${Classes.MINIMAL}) {
background: ${IntentColors.warning};
${getHoverAndActiveStyles(IntentColors.warning)}
${getButtonHoverAndActiveStyles(IntentColors.warning)}
}
&&.bp3-minimal.bp3-button {
&&.${Classes.MINIMAL}.${Classes.BUTTON} {
border: none;
border-color: ${IntentColors.none};
& span.bp3-icon {
color: ${IntentColors.none};
}
}
&&&.bp3-minimal.bp3-intent-primary {
&&&.${Classes.MINIMAL}.${Classes.INTENT_PRIMARY} {
color: ${IntentColors.primary};
border-color: ${IntentColors.primary};
}
&&&.bp3-minimal.bp3-intent-secondary {
&&&.${Classes.MINIMAL}.bp3-intent-secondary {
color: ${IntentColors.secondary};
border-color: ${IntentColors.secondary};
}
&&&.bp3-minimal.bp3-intent-danger {
&&&.${Classes.MINIMAL}.${Classes.INTENT_DANGER} {
color: ${IntentColors.danger};
border-color: ${IntentColors.danger};
}
&&&.bp3-minimal.bp3-intent-warning {
&&&.${Classes.MINIMAL}.${Classes.INTENT_WARNING} {
color: ${IntentColors.warning};
border-color: ${IntentColors.warning};
}
&&&.bp3-minimal.bp3-intent-success {
&&&.${Classes.MINIMAL}.${Classes.INTENT_SUCCESS} {
color: ${IntentColors.success};
border-color: ${IntentColors.success};
}
`;
export const BlueprintInputTransform = css`
&& {
.${Classes.INPUT} {
border-radius: ${props => props.theme.radii[1]}px;
box-shadow: none;
border: ${props => getBorderCSSShorthand(props.theme.borders[2])};
&:focus {
border: ${props => getBorderCSSShorthand(props.theme.borders[2])};
box-shadow: none;
}
}
}
`;
export type ThemeBorder = {
thickness: number;
style: "dashed" | "solid";

4
app/client/src/index.css
View File

@ -52,13 +52,13 @@ div.bp3-popover-arrow {
cursor: default !important;
}
.bp3-intent-primary:not(.bp3-icon):not(:hover), input:checked ~ span.bp3-control-indicator {
/* .bp3-intent-primary:not(.bp3-icon):not(:hover), input:checked ~ span.bp3-control-indicator {
background: #29CCA3 !important;
box-shadow: none !important;
}
.bp3-intent-primary {
border-radius: 4px !important;
}
} */
.pace {
-webkit-pointer-events: none;

2
app/client/src/mockResponses/WidgetConfigResponse.tsx
View File

@ -114,6 +114,8 @@ const WidgetConfigResponse: WidgetConfigReducerState = {
{ id: "1", label: "Option 1", value: "1" },
{ id: "2", label: "Option 2", value: "2" },
{ id: "3", label: "Option 3", value: "3" },
{ id: "4", label: "Option 4", value: "4" },
{ id: "5", label: "Option 5", value: "5" },
],
widgetName: "Dropdown",
selectedIndex: 0,

4
app/client/src/pages/common/CustomizedDropdown/OrgDropdownData.tsx
View File

@ -6,7 +6,6 @@ import { getOnSelectAction, DropdownOnSelectActions } from "./dropdownHelpers";
import DropdownComponent, { CustomizedDropdownProps } from "./index";
import { Org } from "constants/orgConstants";
import { User } from "constants/userConstants";
import history from "utils/history";
import FormDialogComponent from "components/editorComponents/form/FormDialogComponent";
import CreateOrganizationForm from "pages/organization/CreateOrganizationForm";
@ -76,7 +75,6 @@ export const options = (
getOnSelectAction(DropdownOnSelectActions.REDIRECT, {
path: "/org/settings",
}),
active: history.location.pathname === "/org/settings",
},
{
content: "Applications",
@ -84,7 +82,6 @@ export const options = (
getOnSelectAction(DropdownOnSelectActions.REDIRECT, {
path: "/applications",
}),
active: history.location.pathname === "/applications",
},
{
content: "Members",
@ -92,7 +89,6 @@ export const options = (
getOnSelectAction(DropdownOnSelectActions.REDIRECT, {
path: "/users",
}),
active: history.location.pathname === "/users",
},
{
content: <DropdownComponent {...switchdropdown(orgs, currentOrg)} />,

4
app/client/src/sagas/ErrorSagas.tsx
View File

@ -48,7 +48,7 @@ export function getResponseErrorMessage(response: ApiResponse) {
: undefined;
}
type ErrorPayloadType = object | { message: string };
type ErrorPayloadType = { message?: string };
let ActionErrorDisplayMap: {
[key: string]: (error: ErrorPayloadType) => string;
} = {};
@ -79,7 +79,7 @@ export function* errorSaga(
type,
payload: { error, show = true },
} = errorAction;
const message = ActionErrorDisplayMap[type](error);
const message = error.message || ActionErrorDisplayMap[type](error);
if (show) AppToaster.show({ message, intent: Intent.DANGER });
yield put({
type: ReduxActionTypes.REPORT_ERROR,

3
app/client/src/sagas/userSagas.tsx
View File

@ -276,6 +276,9 @@ export function* fetchUserSaga(action: ReduxAction<FetchUserRequest>) {
console.log(error);
yield put({
type: ReduxActionErrorTypes.FETCH_USER_ERROR,
payload: {
error,
},
});
}
}

4
app/client/src/widgets/InputWidget.tsx
View File

@ -76,6 +76,10 @@ class InputWidget extends BaseWidget<InputWidgetProps, WidgetState> {
minNum={this.props.minNum}
placeholder={this.props.placeholderText}
isLoading={this.props.isLoading}
isTextArea={
this.props.bottomRow - this.props.topRow > 1 &&
this.props.inputType === "TEXT"
}
stepSize={1}
/>
);

5184
app/client/yarn.lock
View File

File diff suppressed because it is too large Load Diff