animation style separated in autocomplete

MenamAfzal · MenamAfzal · commit 4e98bf6333b3 · 2024-05-17T22:38:18.000+05:00
diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx
@@ -1,11 +1,11 @@
-import { trans } from "i18n/design";
-import React, { ReactNode, useContext } from "react";
-import styled from "styled-components";
-import { ReactComponent as Packup } from "icons/icon-Pack-up.svg";
-import { labelCss } from "./Label";
-import { controlItem, ControlNode } from "./control";
-
-const SectionItem = styled.div<{ $width?: number }>`
+import {trans} from 'i18n/design';
+import React, {ReactNode, useContext} from 'react';
+import styled from 'styled-components';
+import {ReactComponent as Packup} from 'icons/icon-Pack-up.svg';
+import {labelCss} from './Label';
+import {controlItem, ControlNode} from './control';
+
+const SectionItem = styled.div<{$width?: number}>`
   width: ${(props) => (props.$width ? props.$width : 312)}px;
   border-bottom: 1px solid #e1e3eb;
 
@@ -63,14 +63,14 @@ const SectionLabelDiv = styled.div`
   }
 `;
 
-const ShowChildren = styled.div<{ $show?: string; $noMargin?: boolean }>`
-  display: ${(props) => props.$show || "none"};
+const ShowChildren = styled.div<{$show?: string; $noMargin?: boolean}>`
+  display: ${(props) => props.$show || 'none'};
   flex-direction: column;
   gap: 8px;
   transition: all 3s;
   margin-left: ${(props) => (props.$noMargin ? 0 : 16)}px;
   padding-bottom: 16px;
-  padding-right: ${(props) => (props.$noMargin ? 0 : "16px")};
+  padding-right: ${(props) => (props.$noMargin ? 0 : '16px')};
 `;
 
 interface ISectionConfig<T> {
@@ -95,16 +95,22 @@ export interface PropertySectionContextType {
   state: PropertySectionState;
 }
 
-export const PropertySectionContext = React.createContext<PropertySectionContextType>({
-  toggle: () => {},
-  compName: "",
-  state: {},
-});
+export const PropertySectionContext =
+  React.createContext<PropertySectionContextType>({
+    toggle: () => {},
+    compName: '',
+    state: {},
+  });
 
 export const BaseSection = (props: ISectionConfig<ReactNode>) => {
-  const { name } = props;
-  const { compName, state, toggle } = useContext(PropertySectionContext);
-  const open = props.open !== undefined ? props.open : name ? state[compName]?.[name] !== false : true;
+  const {name} = props;
+  const {compName, state, toggle} = useContext(PropertySectionContext);
+  const open =
+    props.open !== undefined
+      ? props.open
+      : name
+        ? state[compName]?.[name] !== false
+        : true;
 
   // console.log("open", open, props.open);
 
@@ -118,43 +124,47 @@ export const BaseSection = (props: ISectionConfig<ReactNode>) => {
   return (
     <SectionItem $width={props.width} style={props.style}>
       {props.name && (
-        <SectionLabelDiv onClick={handleToggle} className={"section-header"}>
+        <SectionLabelDiv onClick={handleToggle} className={'section-header'}>
           <SectionLabel>{props.name}</SectionLabel>
-          <div style={{ display: "flex" }}>
+          <div style={{display: 'flex'}}>
             {open && props.additionalButton}
-            <PackupIcon deg={open ? "rotate(0deg)" : "rotate(180deg)"} />
+            <PackupIcon deg={open ? 'rotate(0deg)' : 'rotate(180deg)'} />
           </div>
         </SectionLabelDiv>
       )}
-      <ShowChildren $show={open ? "flex" : "none"} $noMargin={props.noMargin}>
+      <ShowChildren $show={open ? 'flex' : 'none'} $noMargin={props.noMargin}>
         {props.children}
       </ShowChildren>
     </SectionItem>
   );
 };
 
 export function Section(props: ISectionConfig<ControlNode>) {
-  return controlItem({ filterText: props.name, searchChild: true }, <BaseSection {...props} />);
+  return controlItem(
+    {filterText: props.name, searchChild: true},
+    <BaseSection {...props} />
+  );
 }
 
 // common section names
 export const sectionNames = {
-  basic: trans("prop.basic"),
-  interaction: trans("prop.interaction"),
-  advanced: trans("prop.advanced"),
-  validation: trans("prop.validation"),
-  layout: trans("prop.layout"),
-  style: trans("prop.style"),
-  labelStyle:trans("prop.labelStyle"),
-  data: trans("prop.data"),
-  meetings: trans("prop.meetings"), // added by Falk Wolsky
-  field: trans("prop.field"),
-  inputFieldStyle:trans("prop.inputFieldStyle"),
-  avatarStyle:trans("prop.avatarStyle"),
-  captionStyle:trans("prop.captionStyle"),
-  startButtonStyle:trans("prop.startButtonStyle"),
-  resetButtonStyle:trans("prop.resetButtonStyle"),
-  headerStyle:trans("prop.headerStyle"),
-  bodyStyle:trans("prop.bodyStyle"),
-  badgeStyle:trans("prop.badgeStyle"),
+  basic: trans('prop.basic'),
+  interaction: trans('prop.interaction'),
+  advanced: trans('prop.advanced'),
+  validation: trans('prop.validation'),
+  layout: trans('prop.layout'),
+  style: trans('prop.style'),
+  labelStyle: trans('prop.labelStyle'),
+  animationStyle: trans('prop.animationStyle'),
+  data: trans('prop.data'),
+  meetings: trans('prop.meetings'), // added by Falk Wolsky
+  field: trans('prop.field'),
+  inputFieldStyle: trans('prop.inputFieldStyle'),
+  avatarStyle: trans('prop.avatarStyle'),
+  captionStyle: trans('prop.captionStyle'),
+  startButtonStyle: trans('prop.startButtonStyle'),
+  resetButtonStyle: trans('prop.resetButtonStyle'),
+  headerStyle: trans('prop.headerStyle'),
+  bodyStyle: trans('prop.bodyStyle'),
+  badgeStyle: trans('prop.badgeStyle'),
 };
diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts
@@ -1,32 +1,33 @@
 export const en = {
-  addItem: "Add",
-  duplicate: "Duplicate",
-  rename: "Rename",
-  delete: "Delete",
-  edit: "Edit",
-  ok: "OK",
-  cancel: "Cancel",
-  previousStep: "Previous",
-  nextStep: "Next",
-  finish: "Finish",
+  addItem: 'Add',
+  duplicate: 'Duplicate',
+  rename: 'Rename',
+  delete: 'Delete',
+  edit: 'Edit',
+  ok: 'OK',
+  cancel: 'Cancel',
+  previousStep: 'Previous',
+  nextStep: 'Next',
+  finish: 'Finish',
   country: {
-    china: "China",
+    china: 'China',
   },
   notification: {
-    copySuccess: "Copy success",
-    copyFail: "Copy failed",
+    copySuccess: 'Copy success',
+    copyFail: 'Copy failed',
   },
   prop: {
-    basic: "Basic",
-    resources: "Resources",
-    interaction: "Interaction",
-    advanced: "Advanced",
-    validation: "Validation",
-    layout: "Layout",
-    labelStyle: "Label Style",
-    style: "Style",
-    meetings: "Meeting Settings",
-    data: "Data",
+    basic: 'Basic',
+    resources: 'Resources',
+    interaction: 'Interaction',
+    advanced: 'Advanced',
+    validation: 'Validation',
+    layout: 'Layout',
+    animationStyle: 'Animation Style',
+    labelStyle: 'Label Style',
+    style: 'Style',
+    meetings: 'Meeting Settings',
+    data: 'Data',
     field: 'Field',
     inputFieldStyle: 'Input Field Style',
     avatarStyle: 'Avatar Style',
@@ -38,39 +39,39 @@ export const en = {
     badgeStyle: 'Badge Style',
   },
   passwordInput: {
-    label: "Password:",
-    placeholder: "Please enter your password",
-    inconsistentPassword: "Two passwords are inconsistent",
-    confirmPasswordLabel: "Confirm password:",
-    confirmPasswordPlaceholder: "Please enter your password again",
+    label: 'Password:',
+    placeholder: 'Please enter your password',
+    inconsistentPassword: 'Two passwords are inconsistent',
+    confirmPasswordLabel: 'Confirm password:',
+    confirmPasswordPlaceholder: 'Please enter your password again',
   },
   verifyCodeInput: {
-    label: "Verification code:",
-    errorMsg: "Code should be {digitNum} digits",
-    placeholder: "Please enter {digitNum} digits code",
-    sendCode: "Send code",
+    label: 'Verification code:',
+    errorMsg: 'Code should be {digitNum} digits',
+    placeholder: 'Please enter {digitNum} digits code',
+    sendCode: 'Send code',
   },
   iconSelect: {
-    title: "Select icon",
-    searchPlaceholder: "Search icon",
+    title: 'Select icon',
+    searchPlaceholder: 'Search icon',
   },
   shapeSelect: {
-    title: "Select shape",
-    searchPlaceholder: "Search shape",
+    title: 'Select shape',
+    searchPlaceholder: 'Search shape',
   },
   eventHandler: {
-    advanced: "Advanced",
+    advanced: 'Advanced',
   },
   comp: {
-    selectedCompsTitle: "{selectCompNum} components are selected",
-    selectedCompsDetail: "Click component to view its properties",
-    batchDelete: "Batch delete",
+    selectedCompsTitle: '{selectCompNum} components are selected',
+    selectedCompsDetail: 'Click component to view its properties',
+    batchDelete: 'Batch delete',
   },
   optionsControl: {
     optionItemErrorMSg: `Found duplicate option value "{value}". Only the first item will be displayed. Please change to a unique value.`,
-    emptyList: "No options",
+    emptyList: 'No options',
   },
   container: {
-    hintPlaceHolder: "Drag components from the right panel",
+    hintPlaceHolder: 'Drag components from the right panel',
   },
 };
diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
@@ -3,6 +3,7 @@ import {Input, Section, sectionNames} from 'lowcoder-design';
 import {BoolControl} from 'comps/controls/boolControl';
 import {styleControl} from 'comps/controls/styleControl';
 import {
+  AnimationStyle,
   InputFieldStyle,
   InputLikeStyle,
   InputLikeStyleType,
@@ -87,6 +88,7 @@ const childrenMap = {
   componentSize: dropdownControl(componentSize, 'small'),
   valueInItems: booleanExposingStateControl('valueInItems'),
   inputFieldStyle: styleControl(InputLikeStyle),
+  animationStyle: styleControl(AnimationStyle),
 };
 
 const getValidate = (value: any): '' | 'warning' | 'error' | undefined => {
@@ -280,6 +282,7 @@ let AutoCompleteCompBase = (function () {
       style: props.style,
       labelStyle: props.labelStyle,
       inputFieldStyle: props.inputFieldStyle,
+      animationStyle: props.animationStyle,
       ...validateState,
     });
   })
@@ -344,6 +347,9 @@ let AutoCompleteCompBase = (function () {
           <Section name={sectionNames.inputFieldStyle}>
             {children.inputFieldStyle.getPropertyView()}
           </Section>
+          <Section name={sectionNames.animationStyle}>
+            {children.animationStyle.getPropertyView()}
+          </Section>
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx
@@ -6,10 +6,10 @@ import {NumberControl, StringControl} from 'comps/controls/codeControl';
 import {dropdownControl} from 'comps/controls/dropdownControl';
 import {withDefault} from 'comps/generators';
 import {MultiCompBuilder} from 'comps/generators/multi';
-import {labelCss, Section, Tooltip, UnderlineCss} from 'lowcoder-design';
+import {labelCss, Section, Tooltip} from 'lowcoder-design';
 import {ValueFromOption} from 'lowcoder-design';
 import {isEmpty} from 'lodash';
-import {Fragment, ReactNode} from 'react';
+import {ReactNode} from 'react';
 import styled, {css} from 'styled-components';
 import {AlignLeft} from 'lowcoder-design';
 import {AlignRight} from 'lowcoder-design';
@@ -31,6 +31,7 @@ type LabelViewProps = Pick<
   field?: Record<string, string>;
   inputFieldStyle?: Record<string, string>;
   childrenInputFieldStyle?: Record<string, string>;
+  animationStyle?: Record<string, string>;
 };
 
 const StyledStarIcon = styled(StarIcon)`
@@ -51,7 +52,11 @@ function getStyle(style: any) {
   `;
 }
 
-const LabelViewWrapper = styled.div<{$style: any; inputFieldStyle: any}>`
+const LabelViewWrapper = styled.div<{
+  $style: any;
+  inputFieldStyle: any;
+  $animationStyle: any;
+}>`
   ${(props) => {
     return (
       props.$style && {
@@ -63,10 +68,19 @@ const LabelViewWrapper = styled.div<{$style: any; inputFieldStyle: any}>`
     );
   }}
   ${(props) => props.inputFieldStyle && getStyle(props.inputFieldStyle)}
+  ${(props) => props.$animationStyle && props.$animationStyle}
   display: flex;
   flex-direction: column;
   height: 100%;
-  border: ${(props)=>{return props.$style.borderWidth}} ${(props)=>{return props.$style.borderStyle}} ${(props)=>{return props.$style.border}} !important;
+  border: ${(props) => {
+      return props.$style.borderWidth;
+    }}
+    ${(props) => {
+      return props.$style.borderStyle;
+    }}
+    ${(props) => {
+      return props.$style.border;
+    }} !important;
 `;
 
 const MainWrapper = styled.div<{
@@ -199,6 +213,7 @@ export const LabelControl = (function () {
         <LabelViewWrapper
           $style={args.style}
           inputFieldStyle={args.inputFieldStyle}
+          $animationStyle={args.animationStyle}
         >
           <MainWrapper
             $position={props.position}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
