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

Merge branch 'fix/codemirror-fixes' into 'release'

Browse Source 
Fixes for Dynamic Input styling

See merge request theappsmith/internal-tools-client!212
This commit is contained in:
Hetu Nandu 2020-01-02 13:36:35 +00:00
commit 53c039e206
18 changed files with 270 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/client/src/components/designSystems/appsmith/CreatableDropdown.tsx
View File

@ -14,9 +14,14 @@ type DropdownProps = {
meta: WrappedFieldMetaProps;
onCreateOption: (inputValue: string) => void;
formatCreateLabel?: (value: string) => React.ReactNode;
noOptionsMessage?: (obj: { inputValue: string }) => string;
};
const selectStyles = {
placeholder: (provided: any) => ({
...provided,
color: "#a3b3bf",
}),
singleValue: (provided: any) => ({
...provided,
backgroundColor: "rgba(104,113,239,0.1)",
@ -67,9 +72,11 @@ class CreatableDropdown extends React.Component<DropdownProps> {
onCreateOption,
input,
formatCreateLabel,
noOptionsMessage,
} = this.props;
const optionalProps: Partial<DropdownProps> = {};
if (formatCreateLabel) optionalProps.formatCreateLabel = formatCreateLabel;
if (noOptionsMessage) optionalProps.noOptionsMessage = noOptionsMessage;
return (
<Creatable
placeholder={placeholder}

4
app/client/src/components/designSystems/appsmith/Dropdown.tsx
View File

@ -14,6 +14,10 @@ type DropdownProps = {
};
const selectStyles = {
placeholder: (provided: any) => ({
...provided,
color: "#a3b3bf",
}),
control: (styles: any, state: any) => ({
...styles,
width: 100,

5
app/client/src/components/editorComponents/ApiResponseView.tsx
View File

@ -11,7 +11,7 @@ import { formatBytes } from "utils/helpers";
import { APIEditorRouteParams } from "constants/routes";
import { ApiPaneReduxState } from "reducers/uiReducers/apiPaneReducer";
import LoadingOverlayScreen from "components/editorComponents/LoadingOverlayScreen";
import DynamicAutocompleteInput from "components/editorComponents/DynamicAutocompleteInput";
import CodeEditor from "components/editorComponents/CodeEditor";
const ResponseWrapper = styled.div`
position: relative;
@ -138,12 +138,13 @@ const ApiResponseView = (props: Props) => {
key: "body",
title: "Response Body",
panelComponent: (
<DynamicAutocompleteInput
<CodeEditor
input={{
value: response.body
? JSON.stringify(response.body, null, 2)
: "",
}}
height={700}
/>
),
},

6
app/client/src/components/editorComponents/CodeEditor.tsx
View File

@ -21,19 +21,19 @@ interface Props {
class CodeEditor extends React.Component<Props> {
textArea = React.createRef<HTMLTextAreaElement>();
editor: any;
constructor(props: Props) {
super(props);
}
componentDidMount(): void {
if (this.textArea.current) {
const readOnly = !this.props.input.onChange;
this.editor = cm.fromTextArea(this.textArea.current, {
mode: { name: "javascript", json: true },
value: this.props.input.value,
readOnly,
lineNumbers: true,
tabSize: 2,
indentWithTabs: true,
lineWrapping: true,
});
this.editor.setSize(null, this.props.height);
}
}

214
app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx
View File

@ -1,43 +1,146 @@
import React, { Component } from "react";
import { connect } from "react-redux";
import { AppState } from "reducers";
import styled from "styled-components";
import CodeMirror, { EditorConfiguration } from "codemirror";
import styled, { createGlobalStyle } from "styled-components";
import CodeMirror, { EditorConfiguration, LineHandle } from "codemirror";
import "codemirror/lib/codemirror.css";
import "codemirror/theme/monokai.css";
import "codemirror/addon/hint/show-hint";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/javascript-hint";
import "codemirror/addon/display/placeholder";
import {
getNameBindingsWithData,
NameBindingsWithData,
} from "selectors/nameBindingsWithDataSelector";
import { AUTOCOMPLETE_MATCH_REGEX } from "constants/BindingsConstants";
import ErrorTooltip from "components/editorComponents/ErrorTooltip";
import { WrappedFieldInputProps, WrappedFieldMetaProps } from "redux-form";
import _ from "lodash";
import { parseDynamicString } from "utils/DynamicBindingUtils";
require("codemirror/mode/javascript/javascript");
const Wrapper = styled.div<{ height?: number; theme?: "LIGHT" | "DARK" }>`
border: ${props => props.theme !== "DARK" && "1px solid #d0d7dd"};
const HintStyles = createGlobalStyle`
.CodeMirror-hints {
position: absolute;
z-index: 10;
overflow: hidden;
list-style: none;
margin: 0;
padding: 5px;
font-size: 90%;
font-family: monospace;
max-height: 20em;
width: 200px;
overflow-y: auto;
background: #FFFFFF;
border: 1px solid #EBEFF2;
box-shadow: 0px 2px 4px rgba(67, 70, 74, 0.14);
border-radius: 4px;
}
.CodeMirror-hint {
height: 32px;
padding: 3px;
margin: 0;
white-space: pre;
color: #2E3D49;
cursor: pointer;
display: flex;
align-items: center;
font-size: 14px;
}
li.CodeMirror-hint-active {
background: #E9FAF3;
border-radius: 4px;
}
`;
const Wrapper = styled.div<{
borderStyle?: THEME;
hasError: boolean;
}>`
border: 1px solid;
border-color: ${props =>
props.hasError
? props.theme.colors.error
: props.borderStyle !== THEMES.DARK
? "#d0d7dd"
: "transparent"};
border-radius: 4px;
display: flex;
flex: 1;
flex-direction: column;
flex-direction: row;
position: relative;
text-transform: none;
min-height: 32px;
height: ${props => (props.height ? `${props.height}px` : "32px")};
overflow: hidden;
height: auto;
&& {
.binding-highlight {
color: ${props =>
props.borderStyle === THEMES.DARK ? "#f7c75b" : "#ffb100"};
font-weight: 700;
}
.CodeMirror {
flex: 1;
line-height: 21px;
z-index: 0;
border-radius: 4px;
height: auto;
}
.CodeMirror pre.CodeMirror-placeholder {
color: #a3b3bf;
}
}
`;
const IconContainer = styled.div`
.bp3-icon {
border-radius: 4px 0 0 4px;
margin: 0;
height: 32px;
width: 30px;
display: flex;
align-items: center;
justify-content: center;
background-color: #eef2f5;
svg {
height: 20px;
width: 20px;
path {
fill: #979797;
}
}
}
`;
const THEMES = {
LIGHT: "LIGHT",
DARK: "DARK",
};
type THEME = "LIGHT" | "DARK";
interface ReduxStateProps {
dynamicData: NameBindingsWithData;
}
type Props = ReduxStateProps & {
input: {
value: string;
onChange?: (value: string) => void;
};
theme?: "LIGHT" | "DARK";
export type DynamicAutocompleteInputProps = {
placeholder?: string;
leftIcon?: Function;
initialHeight: number;
theme?: THEME;
meta?: Partial<WrappedFieldMetaProps>;
showLineNumbers?: boolean;
allowTabIndent?: boolean;
};
type Props = ReduxStateProps &
DynamicAutocompleteInputProps & {
input: Partial<WrappedFieldInputProps>;
};
class DynamicAutocompleteInput extends Component<Props> {
textArea = React.createRef<HTMLTextAreaElement>();
editor: any;
@ -47,30 +150,40 @@ class DynamicAutocompleteInput extends Component<Props> {
const options: EditorConfiguration = {};
if (this.props.theme === "DARK") options.theme = "monokai";
if (!this.props.input.onChange) options.readOnly = true;
if (this.props.showLineNumbers) options.lineNumbers = true;
const extraKeys: Record<string, any> = {
"Ctrl-Space": "autocomplete",
};
if (!this.props.allowTabIndent) extraKeys["Tab"] = false;
this.editor = CodeMirror.fromTextArea(this.textArea.current, {
mode: { name: "javascript", globalVars: true },
viewportMargin: 10,
value: this.props.input.value,
tabSize: 2,
indentWithTabs: true,
lineWrapping: true,
extraKeys: { "Ctrl-Space": "autocomplete" },
showHint: true,
extraKeys,
...options,
});
this.editor.on("change", this.handleChange);
this.editor.on("keyup", this.handleAutocompleteVisibility);
this.editor.on("change", _.debounce(this.handleChange, 200));
this.editor.on("cursorActivity", this.handleAutocompleteVisibility);
this.editor.setOption("hintOptions", {
completeSingle: false,
globalScope: this.props.dynamicData,
});
this.editor.eachLine(this.highlightBindings);
}
}
componentDidUpdate(): void {
if (this.editor) {
const editorValue = this.editor.getValue();
const inputValue = this.props.input.value;
if (inputValue && inputValue !== editorValue) {
let inputValue = this.props.input.value;
if (typeof inputValue === "object") {
inputValue = JSON.stringify(inputValue, null, 2);
}
if (!!inputValue && inputValue !== editorValue) {
this.editor.setValue(inputValue);
}
}
@ -81,21 +194,72 @@ class DynamicAutocompleteInput extends Component<Props> {
if (this.props.input.onChange) {
this.props.input.onChange(value);
}
this.editor.eachLine(this.highlightBindings);
};
handleAutocompleteVisibility = (cm: any, event: any) => {
if (!cm.state.completionActive && event.keyCode !== 13) {
handleAutocompleteVisibility = (cm: any) => {
let cursorBetweenBinding = false;
const cursor = this.editor.getCursor();
const value = this.editor.getValue();
let cumulativeCharCount = 0;
parseDynamicString(value).forEach(segment => {
const start = cumulativeCharCount;
const dynamicStart = segment.indexOf("{{");
const dynamicDoesStart = dynamicStart > -1;
const dynamicEnd = segment.indexOf("}}");
const dynamicDoesEnd = dynamicEnd > -1;
const dynamicStartIndex = dynamicStart + start + 1;
const dynamicEndIndex = dynamicEnd + start + 1;
if (
dynamicDoesStart &&
cursor.ch > dynamicStartIndex &&
((dynamicDoesEnd && cursor.ch < dynamicEndIndex) ||
(!dynamicDoesEnd && cursor.ch > dynamicStartIndex))
) {
cursorBetweenBinding = true;
}
cumulativeCharCount = start + segment.length;
});
const shouldShow = cursorBetweenBinding && !cm.state.completionActive;
if (shouldShow) {
cm.showHint(cm);
}
};
highlightBindings = (line: LineHandle) => {
const lineNo = this.editor.getLineNumber(line);
let match;
while ((match = AUTOCOMPLETE_MATCH_REGEX.exec(line.text)) != null) {
const start = match.index;
const end = AUTOCOMPLETE_MATCH_REGEX.lastIndex;
this.editor.markText(
{ ch: start, line: lineNo },
{ ch: end, line: lineNo },
{
className: "binding-highlight",
},
);
}
};
render() {
const { input, theme } = this.props;
const height = this.editor ? this.editor.doc.height + 20 : null;
const { input, meta, theme } = this.props;
const hasError = !!(meta && meta.error);
return (
<Wrapper height={height} theme={theme}>
<textarea ref={this.textArea} defaultValue={input.value} />
</Wrapper>
<ErrorTooltip message={meta ? meta.error : ""} isOpen={hasError}>
<Wrapper borderStyle={theme} hasError={hasError}>
<HintStyles />
<IconContainer>
{this.props.leftIcon && <this.props.leftIcon />}
</IconContainer>
<textarea
ref={this.textArea}
{..._.omit(this.props.input, ["onChange", "value"])}
defaultValue={input.value}
placeholder={this.props.placeholder}
/>
</Wrapper>
</ErrorTooltip>
);
}
}

2
app/client/src/components/editorComponents/ErrorTooltip.tsx
View File

@ -3,8 +3,10 @@ import { Popover } from "@blueprintjs/core";
import styled from "styled-components";
const Wrapper = styled.div`
flex: 1;
.bp3-popover-target {
width: 100%;
height: 100%;
}
.bp3-popover {
.bp3-popover-arrow {

3
app/client/src/components/editorComponents/form/fields/DatasourcesField.tsx
View File

@ -37,11 +37,12 @@ const DatasourcesField = (
component={CreatableDropdown}
isLoading={props.datasources.loading}
options={options}
placeholder="Data Source"
placeholder="https://<base-url>.com"
onCreateOption={props.createDatasource}
format={(value: string) => _.find(options, { value })}
parse={(option: { value: string }) => (option ? option.value : null)}
formatCreateLabel={(value: string) => `Create data source "${value}"`}
noOptionsMessage={() => "No data sources created"}
/>
);
};

7
app/client/src/components/editorComponents/form/fields/DynamicTextField.tsx
View File

@ -1,10 +1,11 @@
import React from "react";
import { Field, BaseFieldProps } from "redux-form";
import { TextInputProps } from "components/designSystems/appsmith/TextInputComponent";
import DynamicAutocompleteInput from "components/editorComponents/DynamicAutocompleteInput";
import DynamicAutocompleteInput, {
DynamicAutocompleteInputProps,
} from "components/editorComponents/DynamicAutocompleteInput";
class DynamicTextField extends React.Component<
BaseFieldProps & TextInputProps
BaseFieldProps & DynamicAutocompleteInputProps
> {
render() {
return <Field component={DynamicAutocompleteInput} {...this.props} />;

8
app/client/src/components/editorComponents/form/fields/JSONEditorField.tsx
View File

@ -1,8 +1,12 @@
import React from "react";
import { Field } from "redux-form";
import DynamicAutocompleteInput from "components/editorComponents/DynamicAutocompleteInput";
import DynamicAutocompleteInput, {
DynamicAutocompleteInputProps,
} from "components/editorComponents/DynamicAutocompleteInput";
const JSONEditorField = (props: { name: string }) => {
type Props = { name: string } & DynamicAutocompleteInputProps;
const JSONEditorField = (props: Props) => {
return <Field name={props.name} component={DynamicAutocompleteInput} />;
};

12
app/client/src/components/editorComponents/form/fields/KeyValueFieldArray.tsx
View File

@ -32,8 +32,16 @@ const KeyValueRow = (props: Props & WrappedFieldArrayProps) => {
{props.fields.map((field: any, index: number) => (
<FormRowWithLabel key={index}>
{index === 0 && <FormLabel>{props.label}</FormLabel>}
<DynamicTextField name={`${field}.key`} placeholder="Key" />
<DynamicTextField name={`${field}.value`} placeholder="Value" />
<DynamicTextField
name={`${field}.key`}
placeholder="Key"
initialHeight={32}
/>
<DynamicTextField
name={`${field}.value`}
placeholder="Value"
initialHeight={32}
/>
{index === props.fields.length - 1 ? (
<Icon
icon="plus"

8
app/client/src/components/propertyControls/CodeEditorControl.tsx
View File

@ -1,8 +1,9 @@
import React from "react";
import React, { ChangeEvent } from "react";
import BaseControl, { ControlProps } from "./BaseControl";
import { ControlType } from "constants/PropertyControlConstants";
import { ControlWrapper } from "./StyledControls";
import DynamicAutocompleteInput from "components/editorComponents/DynamicAutocompleteInput";
import { EventOrValueHandler } from "redux-form";
class CodeEditorControl extends BaseControl<ControlProps> {
render() {
return (
@ -11,12 +12,15 @@ class CodeEditorControl extends BaseControl<ControlProps> {
<DynamicAutocompleteInput
theme={"DARK"}
input={{ value: this.props.propertyValue, onChange: this.onChange }}
initialHeight={32}
/>
</ControlWrapper>
);
}
onChange = (value: string) => {
onChange: EventOrValueHandler<ChangeEvent<any>> = (
value: string | ChangeEvent,
) => {
this.updateProperty(this.props.propertyName, value);
};

12
app/client/src/components/propertyControls/InputTextControl.tsx
View File

@ -8,12 +8,7 @@ import DynamicAutocompleteInput from "components/editorComponents/DynamicAutocom
class InputTextControl extends BaseControl<InputControlProps> {
render() {
const {
// validationMessage,
propertyValue,
// isValid,
label,
} = this.props;
const { validationMessage, propertyValue, isValid, label } = this.props;
return (
<ControlWrapper>
<label>{label}</label>
@ -23,7 +18,12 @@ class InputTextControl extends BaseControl<InputControlProps> {
value: propertyValue,
onChange: this.onTextChange,
}}
meta={{
error: isValid ? "" : validationMessage,
touched: true,
}}
theme={"DARK"}
initialHeight={32}
/>
</StyledDynamicInput>
</ControlWrapper>

3
app/client/src/constants/BindingsConstants.ts
View File

@ -2,6 +2,5 @@
// TODO (hetu): Remove useless escapes and re-enable the above lint rule
export type NamePathBindingMap = Record<string, string>;
export const DATA_BIND_REGEX = /(.*?){{(\s*(.*?)\s*)}}(.*?)/g;
export const DATA_PATH_REGEX = /[\w\.\[\]\d]+/;
export const DATA_BIND_AUTOCOMPLETE = /({{)(.*)(}{0,2}?)/;
export const AUTOCOMPLETE_MATCH_REGEX = /{{\s*.*?\s*}}/g;
/* eslint-enable no-useless-escape */

9
app/client/src/icons/FormIcons.tsx
View File

@ -25,4 +25,13 @@ export const FormIcons: {
<Icon icon={IconNames.PLUS} color={props.color} iconSize={props.height} />
</IconWrapper>
),
SLASH_ICON: (props: IconProps) => (
<IconWrapper {...props}>
<Icon
icon={IconNames.SLASH}
color={props.color}
iconSize={props.height}
/>
</IconWrapper>
),
};

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

@ -2,11 +2,11 @@
@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

10
app/client/src/mockResponses/PropertyPaneConfigResponse.tsx
View File

@ -101,7 +101,7 @@ const PropertyPaneConfigResponse = {
controlType: "INPUT_TEXT",
},
{
id: "4.1",
id: "4.2",
propertyName: "defaultImage",
label: "Default Image",
placeholderText: "Enter URL",
@ -412,18 +412,12 @@ const PropertyPaneConfigResponse = {
children: [
{
id: "12.1",
propertyName: "tableActions",
label: "Record action",
controlType: "RECORD_ACTION_SELECTOR",
},
{
id: "12.2",
propertyName: "onRowSelected",
label: "onRowSelected",
controlType: "ACTION_SELECTOR",
},
{
id: "12.3",
id: "12.2",
propertyName: "onPageChange",
label: "onPageChange",
controlType: "ACTION_SELECTOR",

17
app/client/src/pages/Editor/APIEditor/Form.tsx
View File

@ -11,10 +11,10 @@ import DynamicTextField from "components/editorComponents/form/fields/DynamicTex
import DropdownField from "components/editorComponents/form/fields/DropdownField";
import DatasourcesField from "components/editorComponents/form/fields/DatasourcesField";
import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValueFieldArray";
import JSONEditorField from "components/editorComponents/form/fields/JSONEditorField";
import ApiResponseView from "components/editorComponents/ApiResponseView";
import { API_EDITOR_FORM_NAME } from "constants/forms";
import LoadingOverlayScreen from "components/editorComponents/LoadingOverlayScreen";
import { FormIcons } from "icons/FormIcons";
const Form = styled.form`
display: flex;
@ -65,8 +65,6 @@ const ActionButton = styled(BaseButton)`
const JSONEditorFieldWrapper = styled.div`
margin: 5px;
border: 1px solid #d0d7dd;
border-radius: 4px;
`;
const DatasourceWrapper = styled.div`
@ -141,10 +139,10 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
<DatasourcesField name="datasource.id" pluginId={pluginId} />
</DatasourceWrapper>
<DynamicTextField
placeholder="API Path"
placeholder="v1/method"
name="actionConfiguration.path"
leftIcon="slash"
showError
leftIcon={FormIcons.SLASH_ICON}
initialHeight={32}
/>
</FormRow>
</MainConfiguration>
@ -162,7 +160,12 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
<React.Fragment>
<FormLabel>{"Post Body"}</FormLabel>
<JSONEditorFieldWrapper>
<JSONEditorField name="actionConfiguration.body" />
<DynamicTextField
name="actionConfiguration.body"
initialHeight={300}
showLineNumbers
allowTabIndent
/>
</JSONEditorFieldWrapper>
</React.Fragment>
)}

17
app/client/src/utils/DynamicBindingUtils.ts
View File

@ -1,25 +1,10 @@
import _ from "lodash";
import { WidgetProps } from "widgets/BaseWidget";
import {
DATA_BIND_AUTOCOMPLETE,
DATA_BIND_REGEX,
} from "constants/BindingsConstants";
import { DATA_BIND_REGEX } from "constants/BindingsConstants";
import ValidationFactory from "./ValidationFactory";
import JSExecutionManagerSingleton from "jsExecution/JSExecutionManagerSingleton";
import { NameBindingsWithData } from "selectors/nameBindingsWithDataSelector";
export const isDynamicAutocompleteMatch = (value: string): boolean =>
DATA_BIND_AUTOCOMPLETE.test(value);
export const getDynamicAutocompleteSearchTerm = (value: string): string => {
const bindings = value.match(DATA_BIND_AUTOCOMPLETE) || [];
if (bindings.length > 0) {
return bindings[2];
} else {
return "";
}
};
export const isDynamicValue = (value: string): boolean =>
DATA_BIND_REGEX.test(value);