formating removed-73

Author: MenamAfzal

client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx

@@ -1,70 +1,72 @@
-import {useState, useEffect} from 'react';
+import { useState, useEffect } from "react";
 import {
   NameConfig,
   NameConfigPlaceHolder,
   NameConfigRequired,
   withExposingConfigs,
-} from 'comps/generators/withExposing';
-import {Section, sectionNames} from 'lowcoder-design';
-import {BoolControl} from '../../controls/boolControl';
-import {AutoHeightControl} from '../../controls/autoHeightControl';
-import {UICompBuilder} from '../../generators';
-import {FormDataPropertyView} from '../formComp/formDataConstants';
+} from "comps/generators/withExposing";
+import { Section, sectionNames } from "lowcoder-design";
+import { BoolControl } from "../../controls/boolControl";
+import { AutoHeightControl } from "../../controls/autoHeightControl";
+import { UICompBuilder } from "../../generators";
+import { FormDataPropertyView } from "../formComp/formDataConstants";
 import {
   checkMentionListData,
   fixOldInputCompData,
   textInputChildren,
-} from './textInputConstants';
+} from "./textInputConstants";
 import {
   withMethodExposing,
   refMethods,
-} from '../../generators/withMethodExposing';
-import {styleControl} from 'comps/controls/styleControl';
-import styled from 'styled-components';
+} from "../../generators/withMethodExposing";
+import { styleControl } from "comps/controls/styleControl";
+import styled from "styled-components";
 import {
   AnimationStyle,
   InputLikeStyle,
   InputLikeStyleType,
-} from 'comps/controls/styleControlConstants';
+} from "comps/controls/styleControlConstants";
 import {
   disabledPropertyView,
   hiddenPropertyView,
   maxLengthPropertyView,
   minLengthPropertyView,
   readOnlyPropertyView,
   requiredPropertyView,
-} from 'comps/utils/propertyUtils';
-import {booleanExposingStateControl} from 'comps/controls/codeStateControl';
-import {trans} from 'i18n';
-import {RefControl} from 'comps/controls/refControl';
-import {TextAreaRef} from 'antd/es/input/TextArea';
-import {default as ConfigProvider} from 'antd/es/config-provider';
-import {default as Mentions, type MentionsOptionProps} from 'antd/es/mentions';
-import {blurMethod, focusWithOptions} from 'comps/utils/methodUtils';
-import {textInputValidate} from '../textInputComp/textInputConstants';
-import {jsonControl} from 'comps/controls/codeControl';
+} from "comps/utils/propertyUtils";
+import { booleanExposingStateControl } from "comps/controls/codeStateControl";
+import { trans } from "i18n";
+import { RefControl } from "comps/controls/refControl";
+import { TextAreaRef } from "antd/es/input/TextArea";
+import { default as ConfigProvider } from "antd/es/config-provider";
+import { default as Mentions, type MentionsOptionProps } from "antd/es/mentions";
+import { blurMethod, focusWithOptions } from "comps/utils/methodUtils";
+import {
+  textInputValidate,
+} from "../textInputComp/textInputConstants";
+import { jsonControl } from "comps/controls/codeControl";
 import {
   submitEvent,
   eventHandlerControl,
   mentionEvent,
   focusEvent,
   blurEvent,
-  changeEvent,
-} from 'comps/controls/eventHandlerControl';
+  changeEvent
+} from "comps/controls/eventHandlerControl";
 
-import React, {useContext} from 'react';
-import {EditorContext} from 'comps/editorState';
-import {migrateOldData} from 'comps/generators/simpleGenerators';
+import React, { useContext } from "react";
+import { EditorContext } from "comps/editorState";
+import { migrateOldData } from "comps/generators/simpleGenerators";
 
 const Wrapper = styled.div<{
   $style: InputLikeStyleType;
 }>`
-  box-sizing: border-box;
+  box-sizing:border-box;
   .rc-textarea {
-    background-color: ${(props) => props.$style.background};
-    padding: ${(props) => props.$style.padding};
-    text-transform: ${(props) => props.$style.textTransform};
-    text-decoration: ${(props) => props.$style.textDecoration};
+    background-color:${(props) => props.$style.background};
+    padding:${(props) => props.$style.padding};
+    text-transform:${(props)=>props.$style.textTransform};
+    text-decoration:${(props)=>props.$style.textDecoration};
     margin: 0px 3px 0px 3px !important;
   }
 
@@ -105,42 +107,42 @@ let MentionTmpComp = (function () {
   };
 
   return new UICompBuilder(childrenMap, (props) => {
-    const {mentionList} = props;
+    const { mentionList } = props;
     const [validateState, setvalidateState] = useState({});
     const [activationFlag, setActivationFlag] = useState(false);
-    const [prefix, setPrefix] = useState<PrefixType>('@');
-    type PrefixType = '@' | keyof typeof mentionList;
+    const [prefix, setPrefix] = useState<PrefixType>("@");
+    type PrefixType = "@" | keyof typeof mentionList;
 
     const onSearch = (_: string, newPrefix: PrefixType) => {
       setPrefix(newPrefix);
     };
     const onChange = (value: string) => {
       props.value.onChange(value);
-      props.onEvent('change');
+      props.onEvent("change");
     };
 
     const onPressEnter = (e: any) => {
       if (e.shiftKey) {
         e.preventDefault();
-        props.onEvent('submit');
+        props.onEvent("submit");
       }
     };
 
     const onSelect = (option: MentionsOptionProps) => {
-      props.onEvent('mention');
+      props.onEvent("mention");
     };
-    const getValidate = (value: any): '' | 'warning' | 'error' | undefined => {
+    const getValidate = (value: any): "" | "warning" | "error" | undefined => {
       if (
-        value.hasOwnProperty('validateStatus') &&
-        value['validateStatus'] === 'error'
+        value.hasOwnProperty("validateStatus") &&
+        value["validateStatus"] === "error"
       )
-        return 'error';
-      return '';
+        return "error";
+      return "";
     };
 
     const getTextInputValidate = () => {
       return {
-        value: {value: props.value.value},
+        value: { value: props.value.value },
         required: props.required,
         minLength: props?.minLength ?? 0,
         maxLength: props?.maxLength ?? 0,
@@ -154,7 +156,7 @@ let MentionTmpComp = (function () {
       if (activationFlag) {
         const temp = textInputValidate(getTextInputValidate());
         setvalidateState(temp);
-        props.invalid.onChange(temp.validateStatus !== '');
+        props.invalid.onChange(temp.validateStatus !== "");
       }
     }, [
       props.value.value,
@@ -184,9 +186,9 @@ let MentionTmpComp = (function () {
               prefix={Object.keys(mentionList)}
               onFocus={() => {
                 setActivationFlag(true);
-                props.onEvent('focus');
+                props.onEvent("focus");
               }}
-              onBlur={() => props.onEvent('blur')}
+              onBlur={() => props.onEvent("blur")}
               onPressEnter={onPressEnter}
               onSearch={onSearch}
               onChange={onChange}
@@ -202,15 +204,15 @@ let MentionTmpComp = (function () {
               }))}
               autoSize={props.autoHeight}
               style={{
-                height: '100%',
-                maxHeight: '100%',
-                resize: 'none',
+                height: "100%",
+                maxHeight: "100%",
+                resize: "none",
                 // padding: props.style.padding,
                 fontStyle: props.style.fontStyle,
                 fontFamily: props.style.fontFamily,
                 borderWidth: props.style.borderWidth,
                 fontWeight: props.style.textWeight,
-                fontSize: props.style.textSize,
+                fontSize: props.style.textSize
               }}
               readOnly={props.readOnly}
             />
@@ -225,58 +227,48 @@ let MentionTmpComp = (function () {
     .setPropertyViewFn((children) => (
       <>
         <Section name={sectionNames.basic}>
-          {children.value.propertyView({label: trans('prop.defaultValue')})}
+          {children.value.propertyView({ label: trans("prop.defaultValue") })}
           {children.placeholder.propertyView({
-            label: trans('prop.placeholder'),
+            label: trans("prop.placeholder"),
           })}
-          {['logic', 'both'].includes(
-            useContext(EditorContext).editorModeStatus
-          ) &&
+          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
             children.mentionList.propertyView({
-              label: trans('mention.mentionList'),
-            })}
+              label: trans("mention.mentionList"),
+            })
+          )}
         </Section>
         <FormDataPropertyView {...children} />
 
-        {['layout', 'both'].includes(
-          useContext(EditorContext).editorModeStatus
-        ) && children.label.getPropertyView()}
+        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          children.label.getPropertyView()
+        )}
 
-        {['logic', 'both'].includes(
-          useContext(EditorContext).editorModeStatus
-        ) && (
-          <>
-            <Section name={sectionNames.interaction}>
-              {children.onEvent.getPropertyView()}
-              {disabledPropertyView(children)}
-            </Section>
-            <Section name={sectionNames.layout}>
-              {hiddenPropertyView(children)}
-            </Section>
+        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <><Section name={sectionNames.interaction}>
+            {children.onEvent.getPropertyView()}
+            {disabledPropertyView(children)}
+          </Section>
+            <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
             <Section name={sectionNames.advanced}>
               {readOnlyPropertyView(children)}
-            </Section>
-            <Section name={sectionNames.validation}>
+            </Section><Section name={sectionNames.validation}>
               {requiredPropertyView(children)}
               {children.validationType.propertyView({
-                label: trans('prop.textType'),
+                label: trans("prop.textType"),
               })}
               {minLengthPropertyView(children)}
               {maxLengthPropertyView(children)}
               {children.customRule.propertyView({})}
-            </Section>
-          </>
+            </Section></>
         )}
 
-        {['layout', 'both'].includes(
-          useContext(EditorContext).editorModeStatus
-        ) && (
+        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
           <>
             <Section name={sectionNames.style}>
-              {children.style.getPropertyView()}
+            {children.style.getPropertyView()}
             </Section>
             <Section name={sectionNames.animationStyle}>
-              {children.animationStyle.getPropertyView()}
+            {children.animationStyle.getPropertyView()}
             </Section>
           </>
         )}
@@ -285,6 +277,7 @@ let MentionTmpComp = (function () {
     .build();
 })();
 
+
 MentionTmpComp = class extends MentionTmpComp {
   override autoHeight(): boolean {
     return this.children.autoHeight.getView();
@@ -299,10 +292,10 @@ const TextareaTmp2Comp = withMethodExposing(
 );
 
 export const MentionComp = withExposingConfigs(TextareaTmp2Comp, [
-  new NameConfig('value', trans('export.inputValueDesc')),
+  new NameConfig("value", trans("export.inputValueDesc")),
   NameConfigPlaceHolder,
   NameConfigRequired,
-  new NameConfig('invalid', trans('export.invalidDesc')),
-  new NameConfig('hidden', trans('export.hiddenDesc')),
-  new NameConfig('disabled', trans('export.disabledDesc')),
+  new NameConfig("invalid", trans("export.invalidDesc")),
+  new NameConfig("hidden", trans("export.hiddenDesc")),
+  new NameConfig("disabled", trans("export.disabledDesc")),
 ]);