optimise button component

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx

@@ -4,7 +4,7 @@ import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { IconControl } from "comps/controls/iconControl";
 import { CompNameContext, EditorContext, EditorState } from "comps/editorState";
 import { withDefault } from "comps/generators";
-import { UICompBuilder } from "comps/generators/uiCompBuilder";
+import { NewChildren, UICompBuilder } from "comps/generators/uiCompBuilder";
 import {
   disabledPropertyView,
   hiddenPropertyView,
@@ -24,9 +24,11 @@ import {
 } from "./buttonCompConstants";
 import { RefControl } from "comps/controls/refControl";
 
-import React, { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useCallback } from "react";
 import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
 import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
+import { RecordConstructorToComp } from "lowcoder-core";
+import { ToViewReturn } from "@lowcoder-ee/comps/generators/multi";
 
 const FormLabel = styled(CommonBlueLabel)`
   font-size: 13px;
@@ -120,83 +122,100 @@ function submitForm(editorState: EditorState, formName: string) {
   }
 }
 
-const ButtonTmpComp = (function () {
-  const childrenMap = {
-    text: withDefault(StringControl, trans("button.button")),
-    type: dropdownControl(typeOptions, ""),
-    onEvent: ButtonEventHandlerControl,
-    disabled: BoolCodeControl,
-    loading: BoolCodeControl,
-    form: SelectFormControl,
-    prefixIcon: IconControl,
-    suffixIcon: IconControl,
-    style: ButtonStyleControl,
-    animationStyle: styleControl(AnimationStyle, 'animationStyle'),
-    viewRef: RefControl<HTMLElement>,
-  };
-  return new UICompBuilder(childrenMap, (props) => {
-    return(
-      <ButtonCompWrapper $disabled={props.disabled}>
-        <EditorContext.Consumer>
-          {(editorState) => (
-            <Button100
-              ref={props.viewRef}
-              $buttonStyle={props.style}
-              loading={props.loading}
-              disabled={
-                props.disabled ||
-                (!isDefault(props.type) && getForm(editorState, props.form)?.disableSubmit())
-              }
-              onClick={() =>
-                isDefault(props.type) ? props.onEvent("click") : submitForm(editorState, props.form)
-              }
-            >
-              {props.prefixIcon && <IconWrapper>{props.prefixIcon}</IconWrapper>}
-              {
-                props.text || (props.prefixIcon || props.suffixIcon ? undefined : " ") // Avoid button disappearing
-              }
-              {props.suffixIcon && <IconWrapper>{props.suffixIcon}</IconWrapper>}
-            </Button100>
-          )}
-        </EditorContext.Consumer>
-      </ButtonCompWrapper>
-    );
-  })
-    .setPropertyViewFn((children) => (
-      <>
-        <Section name={sectionNames.basic}>
-          {children.text.propertyView({ label: trans("text") })}
-        </Section>
-
-        {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
-          <><Section name={sectionNames.interaction}>
-            {children.type.propertyView({ label: trans("prop.type"), radioButton: true })}
-            {isDefault(children.type.getView())
-              ? [
-                children.onEvent.getPropertyView(),
-                disabledPropertyView(children),
-                hiddenPropertyView(children),
-                loadingPropertyView(children),
-              ]
-              : children.form.getPropertyView()}
-            </Section>
-          </>
-        )}
+const childrenMap = {
+  text: withDefault(StringControl, trans("button.button")),
+  type: dropdownControl(typeOptions, ""),
+  onEvent: ButtonEventHandlerControl,
+  disabled: BoolCodeControl,
+  loading: BoolCodeControl,
+  form: SelectFormControl,
+  prefixIcon: IconControl,
+  suffixIcon: IconControl,
+  style: ButtonStyleControl,
+  animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+  viewRef: RefControl<HTMLElement>,
+};
 
-        {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-          <>
-            <Section name={sectionNames.layout}>
-              {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
-              {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
-            </Section>
-            <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
-          </>
+type ChildrenType = NewChildren<RecordConstructorToComp<typeof childrenMap>>;
+
+const ButtonPropertyView = React.memo((props: {
+  children: ChildrenType
+}) => {
+  const { editorModeStatus } = useContext(EditorContext);
+  return (
+    <>
+      <Section name={sectionNames.basic}>
+        {props.children.text.propertyView({ label: trans("text") })}
+      </Section>
+
+      {(editorModeStatus === "logic" || editorModeStatus === "both") && (
+        <><Section name={sectionNames.interaction}>
+          {props.children.type.propertyView({ label: trans("prop.type"), radioButton: true })}
+          {isDefault(props.children.type.getView())
+            ? [
+              props.children.onEvent.getPropertyView(),
+              disabledPropertyView(props.children),
+              hiddenPropertyView(props.children),
+              loadingPropertyView(props.children),
+            ]
+            : props.children.form.getPropertyView()}
+          </Section>
+        </>
+      )}
+
+      {(editorModeStatus === "layout" || editorModeStatus === "both") && (
+        <>
+          <Section name={sectionNames.layout}>
+            {props.children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
+            {props.children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
+          </Section>
+          <Section name={sectionNames.style}>{props.children.style.getPropertyView()}</Section>
+        </>
+      )}
+    </>
+  );
+});
+
+const ButtonView = React.memo((props: ToViewReturn<ChildrenType>) => {
+  const editorState = useContext(EditorContext);
+
+  const handleClick = useCallback(() => {
+    isDefault(props.type) ? props.onEvent("click") : submitForm(editorState, props.form);
+  }, [props.type, props.onEvent, props.form, editorState]);
+
+  return (
+    <ButtonCompWrapper $disabled={props.disabled}>
+      <EditorContext.Consumer>
+        {(editorState) => (
+          <Button100
+            ref={props.viewRef}
+            $buttonStyle={props.style}
+            loading={props.loading}
+            disabled={
+              props.disabled ||
+              (!isDefault(props.type) && getForm(editorState, props.form)?.disableSubmit())
+            }
+            onClick={handleClick}
+          >
+            {props.prefixIcon && <IconWrapper>{props.prefixIcon}</IconWrapper>}
+            {
+              props.text || (props.prefixIcon || props.suffixIcon ? undefined : " ") // Avoid button disappearing
+            }
+            {props.suffixIcon && <IconWrapper>{props.suffixIcon}</IconWrapper>}
+          </Button100>
         )}
-      </>
-    ))
-    .setExposeMethodConfigs(buttonRefMethods)
-    .build();
-})();
+      </EditorContext.Consumer>
+    </ButtonCompWrapper>
+  )
+});
+
+const buttonViewFn = (props: ToViewReturn<ChildrenType>) => <ButtonView {...props} />
+const buttonPropertyViewFn = (children: ChildrenType) => <ButtonPropertyView children={children} />
+
+const ButtonTmpComp = new UICompBuilder(childrenMap, buttonViewFn)
+  .setPropertyViewFn(buttonPropertyViewFn)
+  .setExposeMethodConfigs(buttonRefMethods)
+  .build();
 
 export const ButtonComp = withExposingConfigs(ButtonTmpComp, [
   new NameConfig("text", trans("button.textDesc")),