From c6a883d96584b56e89664479b237e0685e68e26f Mon Sep 17 00:00:00 2001
From: "vicky_primathon.in" <vicky.bansal@primathon.in>
Date: Tue, 19 May 2020 22:54:38 +0530
Subject: [PATCH] light and dark theme added in dropdown component

---
 .../components/editorComponents/Button.tsx    | 12 +++++-
 .../DynamicAutocompleteInput.tsx              | 28 +++++++-----
 .../editorComponents/LightningMenu/index.tsx  | 43 +++++++++++++++++--
 .../propertyControls/ChartDataControl.tsx     |  1 -
 .../propertyControls/CodeEditorControl.tsx    |  1 -
 .../propertyControls/InputTextControl.tsx     | 32 +++++++-------
 app/client/src/constants/Colors.tsx           |  2 +
 app/client/src/constants/DefaultTheme.tsx     | 16 ++++---
 .../CustomizedDropdown/StyledComponents.tsx   | 21 ++++++---
 .../pages/common/CustomizedDropdown/index.tsx | 11 +++--
 10 files changed, 117 insertions(+), 50 deletions(-)

diff --git a/app/client/src/components/editorComponents/Button.tsx b/app/client/src/components/editorComponents/Button.tsx
index 97f31ec9b5..d2ef37538a 100644
--- a/app/client/src/components/editorComponents/Button.tsx
+++ b/app/client/src/components/editorComponents/Button.tsx
@@ -21,6 +21,7 @@ const buttonStyles = css<{
   intent?: Intent;
   filled?: string;
   fluid?: boolean;
+  themeType?: string;
 }>`
   ${BlueprintButtonIntentsCSS}
   &&&& {
@@ -33,14 +34,18 @@ 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};
   }
-
   ${props => (props.outline ? outline : "")}
 `;
 const StyledButton = styled(BlueprintButton)<{
   outline?: string;
   intent?: Intent;
   filled?: string;
+  themeType?: string;
 }>`
   ${buttonStyles}
 `;
@@ -48,6 +53,7 @@ const StyledAnchorButton = styled(BlueprintAnchorButton)<{
   outline?: string;
   intent?: Intent;
   filled?: string;
+  themeType?: string;
 }>`
   ${buttonStyles}
 `;
@@ -67,9 +73,11 @@ export type ButtonProps = {
   type?: "button" | "submit" | "reset";
   className?: string;
   fluid?: boolean;
+  themeType?: string;
 };
 
 export const Button = (props: ButtonProps) => {
+  console.log("theme", props.themeType);
   const icon: IconName | undefined =
     props.icon &&
     (props.iconAlignment === Directions.LEFT ||
@@ -94,7 +102,9 @@ export const Button = (props: ButtonProps) => {
     type: props.type,
     className: props.className,
     fluid: props.fluid ? props.fluid.toString() : undefined,
+    themeType: props.themeType ? props.themeType : undefined,
   };
+  // console.log("themeType", baseProps.themeType);
   if (props.href) {
     return (
       <StyledAnchorButton
diff --git a/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx b/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx
index a9ecd181b6..f5d7854a86 100644
--- a/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx
+++ b/app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx
@@ -264,13 +264,12 @@ export type DynamicAutocompleteInputProps = {
   link?: string;
   baseMode?: string | object;
   setMaxHeight?: boolean;
+  defaultValue?: string;
 };
 
 type Props = ReduxStateProps &
   DynamicAutocompleteInputProps & {
     input: Partial<WrappedFieldInputProps>;
-  } & {
-    forwardRef: React.RefObject<HTMLTextAreaElement>;
   };
 
 type State = {
@@ -288,11 +287,10 @@ class DynamicAutocompleteInput extends Component<Props, State> {
       isFocused: false,
       autoCompleteVisible: false,
     };
-    console.log("ref inside DynamicAutoComplete", props.forwardRef);
   }
 
   componentDidMount(): void {
-    if (this.props.forwardRef.current) {
+    if (this.textArea.current) {
       const options: EditorConfiguration = {};
       if (this.props.theme === "DARK") options.theme = "monokai";
       if (!this.props.input.onChange || this.props.disabled) {
@@ -304,7 +302,7 @@ class DynamicAutocompleteInput extends Component<Props, State> {
         "Ctrl-Space": "autocomplete",
       };
       if (!this.props.allowTabIndent) extraKeys["Tab"] = false;
-      this.editor = CodeMirror.fromTextArea(this.props.forwardRef.current, {
+      this.editor = CodeMirror.fromTextArea(this.textArea.current, {
         mode: this.props.mode || { name: "javascript", globalVars: true },
         viewportMargin: 10,
         tabSize: 2,
@@ -368,6 +366,19 @@ class DynamicAutocompleteInput extends Component<Props, State> {
         }
       }
     }
+    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 = () => {
@@ -485,7 +496,6 @@ class DynamicAutocompleteInput extends Component<Props, State> {
         hasError && this.state.isFocused && !this.state.autoCompleteVisible;
     }
     console.log(className);
-    console.log("textarea ref", this.props.forwardRef);
     return (
       <ErrorTooltip message={meta ? meta.error : ""} isOpen={showError}>
         <Wrapper
@@ -511,7 +521,7 @@ class DynamicAutocompleteInput extends Component<Props, State> {
           )}
 
           <textarea
-            ref={this.props.forwardRef}
+            ref={this.textArea}
             {..._.omit(this.props.input, ["onChange", "value"])}
             defaultValue={input.value}
             placeholder={this.props.placeholder}
@@ -544,6 +554,4 @@ const mapStateToProps = (state: AppState): ReduxStateProps => ({
   dynamicData: getDataTreeForAutocomplete(state),
 });
 
-export default connect(mapStateToProps, null, null, {
-  forwardRef: true,
-})(DynamicAutocompleteInput);
+export default connect(mapStateToProps)(DynamicAutocompleteInput);
diff --git a/app/client/src/components/editorComponents/LightningMenu/index.tsx b/app/client/src/components/editorComponents/LightningMenu/index.tsx
index 71de35ded6..391f499dc1 100644
--- a/app/client/src/components/editorComponents/LightningMenu/index.tsx
+++ b/app/client/src/components/editorComponents/LightningMenu/index.tsx
@@ -16,7 +16,12 @@ const getApiOptions = (apis: RestAction[]) => ({
       options: [
         {
           content: (
-            <Button text="Create new API" icon="plus" iconAlignment="left" />
+            <Button
+              text="Create new API"
+              icon="plus"
+              iconAlignment="left"
+              themeType="dark"
+            />
           ),
         },
       ],
@@ -33,6 +38,7 @@ const getApiOptions = (apis: RestAction[]) => ({
   },
   openDirection: Directions.RIGHT,
   openOnHover: false,
+  themeType: "dark",
 });
 
 const getQueryOptions = (queries: RestAction[]) => ({
@@ -42,7 +48,12 @@ const getQueryOptions = (queries: RestAction[]) => ({
       options: [
         {
           content: (
-            <Button text="Create new Query" icon="plus" iconAlignment="left" />
+            <Button
+              text="Create new Query"
+              icon="plus"
+              iconAlignment="left"
+              themeType="dark"
+            />
           ),
         },
       ],
@@ -59,6 +70,7 @@ const getQueryOptions = (queries: RestAction[]) => ({
   },
   openDirection: Directions.RIGHT,
   openOnHover: false,
+  themeType: "dark",
 });
 
 const lightningMenuOptions = (
@@ -70,11 +82,11 @@ const lightningMenuOptions = (
     {
       options: [
         {
-          content: "PlainText/HTML/JS",
+          content: "Plain Text",
           disabled: false,
           shouldCloseDropdown: true,
           onSelect: () => {
-            updatePropertyValue("test");
+            updatePropertyValue("Plain Text");
           },
         },
         {
@@ -87,6 +99,27 @@ const lightningMenuOptions = (
           disabled: false,
           shouldCloseDropdown: false,
         },
+        // {
+        //   content: <CustomizedDropdown {...getQueryOptions(queries)} />,
+        //   disabled: false,
+        //   shouldCloseDropdown: false,
+        // },
+        {
+          content: "JS",
+          disabled: false,
+          shouldCloseDropdown: true,
+          onSelect: () => {
+            updatePropertyValue("{{}}");
+          },
+        },
+        {
+          content: "HTML",
+          disabled: false,
+          shouldCloseDropdown: true,
+          onSelect: () => {
+            updatePropertyValue("<p></p>");
+          },
+        },
       ],
     },
   ],
@@ -95,6 +128,7 @@ const lightningMenuOptions = (
   trigger: {
     text: "",
   },
+  themeType: "dark",
 });
 
 type LightningMenuProps = {
@@ -109,6 +143,7 @@ export const LightningMenu = (props: LightningMenuProps) => {
       action => action.config.pageId === currentPageId,
     );
   });
+  // console.log("actions", actions);
   const apis = actions
     .filter(action => action.config.pluginType === "API")
     .map(action => action.config);
diff --git a/app/client/src/components/propertyControls/ChartDataControl.tsx b/app/client/src/components/propertyControls/ChartDataControl.tsx
index 2b382d6173..756bdbf64f 100644
--- a/app/client/src/components/propertyControls/ChartDataControl.tsx
+++ b/app/client/src/components/propertyControls/ChartDataControl.tsx
@@ -113,7 +113,6 @@ function DataControlComponent(props: RenderComponentProps) {
           theme={"DARK"}
           singleLine={false}
           placeholder=""
-          forwardRef={React.createRef<HTMLTextAreaElement>()}
         />
       </StyledDynamicInput>
     </StyledOptionControlWrapper>
diff --git a/app/client/src/components/propertyControls/CodeEditorControl.tsx b/app/client/src/components/propertyControls/CodeEditorControl.tsx
index 72122512d7..f7ee11926d 100644
--- a/app/client/src/components/propertyControls/CodeEditorControl.tsx
+++ b/app/client/src/components/propertyControls/CodeEditorControl.tsx
@@ -14,7 +14,6 @@ class CodeEditorControl extends BaseControl<ControlProps> {
           touched: true,
         }}
         singleLine={false}
-        forwardRef={React.createRef<HTMLTextAreaElement>()}
       />
     );
   }
diff --git a/app/client/src/components/propertyControls/InputTextControl.tsx b/app/client/src/components/propertyControls/InputTextControl.tsx
index cf8e9d103b..2b49914184 100644
--- a/app/client/src/components/propertyControls/InputTextControl.tsx
+++ b/app/client/src/components/propertyControls/InputTextControl.tsx
@@ -27,10 +27,16 @@ export function InputText(props: {
   isValid: boolean;
   validationMessage?: string;
   placeholder?: string;
-  innerRef?: React.Ref<HTMLTextAreaElement>;
+  defaultValue?: string;
 }) {
-  const { validationMessage, value, isValid, onChange, placeholder } = props;
-  console.log("ref inside InputText", props.innerRef);
+  const {
+    validationMessage,
+    value,
+    isValid,
+    onChange,
+    placeholder,
+    defaultValue,
+  } = props;
   return (
     <StyledDynamicInput>
       <DynamicAutocompleteInput
@@ -45,25 +51,18 @@ export function InputText(props: {
         theme={"DARK"}
         singleLine={false}
         placeholder={placeholder}
-        forwardRef={props.innerRef as React.RefObject<HTMLTextAreaElement>}
+        defaultValue={defaultValue}
       />
     </StyledDynamicInput>
   );
 }
 
 class InputTextControl extends BaseControl<InputControlProps> {
-  private inputElement: React.RefObject<HTMLTextAreaElement> = React.createRef<
-    HTMLTextAreaElement
-  >();
-
+  state = {
+    defaultValue: "",
+  };
   updatePropertyValue = (value: string) => {
-    console.log(this.inputElement);
-    if (this.inputElement.current) {
-      console.log(this.inputElement.current);
-      const editor = CodeMirror.fromTextArea(this.inputElement.current);
-      console.log("editor", editor);
-      editor.setValue("value");
-    }
+    this.setState({ defaultValue: value });
   };
 
   render() {
@@ -74,7 +73,6 @@ class InputTextControl extends BaseControl<InputControlProps> {
       label,
       placeholderText,
     } = this.props;
-    console.log("ref inside InputTextControl", this.inputElement);
     return (
       <InputControlWrapper>
         <Suspense fallback={<div />}>
@@ -87,7 +85,7 @@ class InputTextControl extends BaseControl<InputControlProps> {
           isValid={isValid}
           validationMessage={validationMessage}
           placeholder={placeholderText}
-          innerRef={this.inputElement}
+          defaultValue={this.state.defaultValue}
         />
       </InputControlWrapper>
     );
diff --git a/app/client/src/constants/Colors.tsx b/app/client/src/constants/Colors.tsx
index bfd32a2ceb..191e58aa06 100644
--- a/app/client/src/constants/Colors.tsx
+++ b/app/client/src/constants/Colors.tsx
@@ -43,6 +43,8 @@ export const Colors: Record<string, string> = {
   BLUE_CHARCOAL: "#23292E",
   TROUT: "#4C565E",
   JAFFA_DARK: "#EF7541",
+  SOLID_MERCURY: "#E5E5E5",
+  TROUT_DARK: "#535B62",
 };
 
 export type Color = typeof Colors[keyof typeof Colors];
diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx
index ab52c7b2de..fc2059313d 100644
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@@ -275,6 +275,7 @@ export type Theme = {
       hoverText: Color;
       inActiveBG: Color;
       inActiveText: Color;
+      border: Color;
     };
   };
   authCard: {
@@ -421,15 +422,16 @@ export const theme: Theme = {
   dropdown: {
     light: {
       hoverBG: Colors.GREEN,
-      hoverText: Colors.textOnDarkBG,
-      inActiveBG: Colors.GEYSER_LIGHT,
-      inActiveText: Colors.GEYSER_LIGHT,
+      hoverText: Colors.WHITE,
+      inActiveBG: Colors.WHITE,
+      inActiveText: Colors.BLACK_PEARL,
     },
     dark: {
-      hoverBG: Colors.GEYSER_LIGHT,
-      hoverText: Colors.GEYSER_LIGHT,
-      inActiveBG: Colors.GEYSER_LIGHT,
-      inActiveText: Colors.GEYSER_LIGHT,
+      hoverBG: Colors.TROUT_DARK,
+      hoverText: Colors.WHITE,
+      inActiveBG: Colors.BLUE_CHARCOAL,
+      inActiveText: Colors.WHITE,
+      border: Colors.TROUT_DARK,
     },
   },
   authCard: {
diff --git a/app/client/src/pages/common/CustomizedDropdown/StyledComponents.tsx b/app/client/src/pages/common/CustomizedDropdown/StyledComponents.tsx
index 57fbdac190..b0d8dd0aad 100644
--- a/app/client/src/pages/common/CustomizedDropdown/StyledComponents.tsx
+++ b/app/client/src/pages/common/CustomizedDropdown/StyledComponents.tsx
@@ -18,16 +18,23 @@ export const DropdownTrigger = styled.div`
     outline: 0;
     span {
       color: inherit;
+      font-weight: 400;
     }
     &:hover {
       background: inherit;
     }
   }
 `;
-export const DropdownContent = styled.div`
+export const DropdownContent = styled.div<{ themeType: string }>`
   &&& * {
     font-size: ${props => props.theme.fontSizes[3]}px;
   }
+  border: ${props => (props.themeType === "dark" ? "1px solid" : "")};
+  border-color: ${props =>
+    props.themeType === "dark"
+      ? props.theme.dropdown[props.themeType].border
+      : ""};
+  background: ${props => props.theme.dropdown[props.themeType].inActiveBG};
 `;
 
 export const DropdownContentSection = styled.div<{ stick: boolean }>`
@@ -56,13 +63,12 @@ export const DropdownContentSection = styled.div<{ stick: boolean }>`
   }
 `;
 
-export const highlightOption = css<{ intent?: Intent }>`
-  color: ${props => props.theme.colors.textOnDarkBG};
+export const highlightOption = css<{ intent?: Intent; themeType: string }>`
   text-decoration: none;
-  background: ${props =>
-    props.intent ? IntentColors[props.intent] : IntentColors.primary};
+  color: ${props => props.theme.dropdown[props.themeType].hoverText};
+  background: ${props => props.theme.dropdown[props.themeType].hoverBG};
   * {
-    color: ${props => props.theme.colors.textOnDarkBG};
+    color: ${props => props.theme.dropdown[props.themeType].hoverText};
   }
 `;
 
@@ -70,6 +76,7 @@ export const Option = styled.div<{
   intent?: Intent;
   active?: boolean;
   disabled?: boolean;
+  themeType: string;
 }>`
   padding: 8px 16px;
   min-width: 200px;
@@ -79,6 +86,8 @@ export const Option = styled.div<{
     margin: 0;
   }
   cursor: pointer;
+  background: ${props => props.theme.dropdown[props.themeType].inActiveBG};
+  color: ${props => props.theme.dropdown[props.themeType].inActiveText};
   &:hover {
     ${props => (!props.disabled ? highlightOption : ``)};
   }
diff --git a/app/client/src/pages/common/CustomizedDropdown/index.tsx b/app/client/src/pages/common/CustomizedDropdown/index.tsx
index f06db03137..14e482d9b9 100644
--- a/app/client/src/pages/common/CustomizedDropdown/index.tsx
+++ b/app/client/src/pages/common/CustomizedDropdown/index.tsx
@@ -45,6 +45,7 @@ export type CustomizedDropdownProps = {
   openDirection: Direction;
   openOnHover?: boolean;
   usePortal?: boolean;
+  themeType?: string;
 };
 
 const getIcon = (icon?: string, intent?: Intent) => {
@@ -71,7 +72,7 @@ const getIcon = (icon?: string, intent?: Intent) => {
 
 const getContentSection = (
   section: CustomizedDropdownOptionSection,
-  theme: Theme,
+  themeType: string,
 ) => {
   return (
     <React.Fragment>
@@ -87,6 +88,7 @@ const getContentSection = (
               onClick={option.onSelect}
               active={!!option.active}
               disabled={!!option.disabled}
+              themeType={themeType}
             >
               {option.content}
             </Option>
@@ -99,6 +101,7 @@ const getContentSection = (
 export const CustomizedDropdown = (
   props: CustomizedDropdownProps & { theme: Theme },
 ) => {
+  const themeType = props.themeType ? props.themeType : "light";
   const icon = getIcon(props.trigger.icon, props.trigger.intent);
   const trigger = (
     <React.Fragment>
@@ -112,13 +115,15 @@ export const CustomizedDropdown = (
           iconAlignment={Directions.RIGHT}
           text={props.trigger.text}
           intent={props.trigger.intent}
+          themeType={props.themeType}
         />
       )}
     </React.Fragment>
   );
+
   const content = props.sections.map((section, index) => (
     <DropdownContentSection key={index} stick={!!section.isSticky}>
-      {getContentSection(section, props.theme)}
+      {getContentSection(section, themeType)}
     </DropdownContentSection>
   ));
   return (
@@ -137,7 +142,7 @@ export const CustomizedDropdown = (
       enforceFocus={false}
     >
       <DropdownTrigger>{trigger}</DropdownTrigger>
-      <DropdownContent>{content}</DropdownContent>
+      <DropdownContent themeType={themeType}>{content}</DropdownContent>
     </Popover>
   );
 };