From 69e2de1d38f104950b09e20de069a6504d3281f2 Mon Sep 17 00:00:00 2001 From: "vicky_primathon.in" Date: Wed, 20 May 2020 21:14:52 +0530 Subject: [PATCH] lightning menu moved to dynamic auto complete --- .../components/editorComponents/Button.tsx | 24 ++- .../DynamicAutocompleteInput.tsx | 147 ++++++++++-------- .../editorComponents/LightningMenu/index.tsx | 105 +++++++------ .../form/fields/KeyValueFieldArray.tsx | 1 + .../propertyControls/InputTextControl.tsx | 58 ++----- app/client/src/pages/Editor/EditorHeader.tsx | 1 + .../CustomizedDropdown/StyledComponents.tsx | 19 ++- .../pages/common/CustomizedDropdown/index.tsx | 2 +- 8 files changed, 190 insertions(+), 167 deletions(-) diff --git a/app/client/src/components/editorComponents/Button.tsx b/app/client/src/components/editorComponents/Button.tsx index ad19c7cd96..6bb2cf29a8 100644 --- a/app/client/src/components/editorComponents/Button.tsx +++ b/app/client/src/components/editorComponents/Button.tsx @@ -22,6 +22,7 @@ const buttonStyles = css<{ filled?: string; fluid?: boolean; themeType?: string; + iconAlignment?: Direction; }>` ${BlueprintButtonIntentsCSS} &&&& { @@ -34,18 +35,24 @@ const buttonStyles = css<{ props.filled || props.outline ? "inherit" : "transparent"}; width: ${props => (props.fluid ? "100%" : "auto")}; - color: ${props => - props.themeType === "dark" - ? props.theme.colors.textOnDarkBG - : props.theme.colors.textDefault}; } &&&&&& { &.bp3-button span { - font-weight: ${props => (props.themeType === "dark" ? 400 : 700)}; + font-weight: ${props => (props.themeType ? 400 : 700)}; } .bp3-icon svg { - width: ${props => (props.themeType === "dark" ? 14 : 16)}px; - height: ${props => (props.themeType === "dark" ? 14 : 16)}px; + width: ${props => (props.themeType ? 14 : 16)}px; + height: ${props => (props.themeType ? 14 : 16)}px; + } + &.bp3-button { + ${props => + props.themeType !== undefined + ? props.iconAlignment === "right" + ? "display: flex; justify-content: space-between;width: 100%;" + : props.iconAlignment === "left" + ? "display: flex; justify-content: flex-start;width: 100%;" + : "" + : ""}; } } ${props => (props.outline ? outline : "")} @@ -55,6 +62,7 @@ const StyledButton = styled(BlueprintButton)<{ intent?: Intent; filled?: string; themeType?: string; + iconAlignment?: Direction; }>` ${buttonStyles} `; @@ -63,6 +71,7 @@ const StyledAnchorButton = styled(BlueprintAnchorButton)<{ intent?: Intent; filled?: string; themeType?: string; + iconAlignment?: Direction; }>` ${buttonStyles} `; @@ -111,6 +120,7 @@ export const Button = (props: ButtonProps) => { className: props.className, fluid: props.fluid ? props.fluid.toString() : undefined, themeType: props.themeType ? props.themeType : undefined, + iconAlignment: props.iconAlignment ? props.iconAlignment : undefined, }; if (props.href) { return ( diff --git a/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx b/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx index f5d7854a86..92180ad8ee 100644 --- a/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx +++ b/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx @@ -1,4 +1,4 @@ -import React, { Component } from "react"; +import React, { Component, lazy, Suspense } from "react"; import { connect } from "react-redux"; import { AppState } from "reducers"; import styled, { createGlobalStyle } from "styled-components"; @@ -21,6 +21,9 @@ import { parseDynamicString } from "utils/DynamicBindingUtils"; import { DataTree } from "entities/DataTree/dataTreeFactory"; import { Theme } from "constants/DefaultTheme"; import AnalyticsUtil from "utils/AnalyticsUtil"; +const LightningMenu = lazy(() => + import("components/editorComponents/LightningMenu"), +); require("codemirror/mode/javascript/javascript"); require("codemirror/mode/sql/sql"); require("codemirror/addon/hint/sql-hint"); @@ -233,6 +236,18 @@ const IconContainer = styled.div` } `; +const DynamicAutocompleteInputWrapper = styled.div` + width: 100%; + position: relative; + & > span:first-of-type { + position: absolute; + right: 0; + top: 2px; + width: 14px; + z-index: 10; + } +`; + const THEMES = { LIGHT: "LIGHT", DARK: "DARK", @@ -264,7 +279,7 @@ export type DynamicAutocompleteInputProps = { link?: string; baseMode?: string | object; setMaxHeight?: boolean; - defaultValue?: string; + showLightningMenu?: boolean; }; type Props = ReduxStateProps & @@ -292,6 +307,7 @@ class DynamicAutocompleteInput extends Component { componentDidMount(): void { if (this.textArea.current) { const options: EditorConfiguration = {}; + //use this for lightning menu theme if (this.props.theme === "DARK") options.theme = "monokai"; if (!this.props.input.onChange || this.props.disabled) { options.readOnly = true; @@ -366,19 +382,6 @@ class DynamicAutocompleteInput extends Component { } } } - if (prevProps.defaultValue !== this.props.defaultValue) { - const cursorPosition = this.props.defaultValue - ? this.props.defaultValue.length + 1 - : 1; - this.editor.setValue( - this.props.defaultValue ? this.props.defaultValue : "", - ); - this.editor.focus(); - this.editor.setCursor({ - line: 1, - ch: cursorPosition, - }); - } } handleEditorFocus = () => { @@ -479,6 +482,15 @@ class DynamicAutocompleteInput extends Component { } }; + updatePropertyValue = (value: string, cursor: number) => { + this.editor.setValue(value); + this.editor.focus(); + this.editor.setCursor({ + line: 1, + ch: cursor, + }); + }; + render() { const { input, @@ -488,6 +500,7 @@ class DynamicAutocompleteInput extends Component { disabled, className, setMaxHeight, + showLightningMenu, } = this.props; const hasError = !!(meta && meta.error); let showError = false; @@ -495,57 +508,65 @@ class DynamicAutocompleteInput extends Component { showError = hasError && this.state.isFocused && !this.state.autoCompleteVisible; } - console.log(className); + const themeType = this.props.theme === "DARK" ? "dark" : "light"; return ( - - - - - {this.props.leftIcon && } - - - {this.props.leftImage && ( - img - )} - -