Feat no hooks input (#1164)

* feat: Input去hook * feat: Input输入框微信适配 * feat: input 微信版本ref支持 * feat: input 微信版本ref支持 * feat: mixinValue方法入参调整 * feat: mixinValue方法入参调整 * feat: InputBlur下线hook * feat: InputBlur下线hook * feat: TextArea组件hook下线 * feat: TextArea适配微信ref * feat: TextArea适配微信 * feat: TextArea适配微信
ant-design · Apr 23, 2024 · 5fd9c37 · 5fd9c37
1 parent 874e522
commit 5fd9c37
Show file tree

Hide file tree

Showing 41 changed files with 563 additions and 847 deletions.
diff --git a/compiled/alipay/demo/pages/Input/index.axml b/compiled/alipay/demo/pages/Input/index.axml
@@ -35,6 +35,7 @@
 
 <container title="受控模式">
   <ant-input
+    controlled="{{ true }}"
     value="{{ value }}"
     placeholder="请输入内容"
     allowClear

diff --git a/compiled/alipay/src/Form/FormTextarea/props.ts b/compiled/alipay/src/Form/FormTextarea/props.ts
@@ -1,7 +1,7 @@
 import { FormItemFunctionalProps } from './../FormItem/props';
 import { FormItemProps } from '../FormItem/props';
 import {
-  TextareaFunctionalProps,
+  TextareaDefaultProps,
   TextareaProps,
 } from '../../Input/Textarea/props';
 
@@ -10,7 +10,7 @@ export interface FormTextareaProps
     FormItemProps {}
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { value, defaultValue, name, ...rest } = TextareaFunctionalProps;
+const { value, defaultValue, name, ...rest } = TextareaDefaultProps;
 export const FormTextareaDefaultProps: Partial<TextareaProps> = {
   ...FormItemFunctionalProps,
   ...rest,

diff --git a/compiled/alipay/src/GuideTour/index.ts b/compiled/alipay/src/GuideTour/index.ts
@@ -39,6 +39,7 @@ Component(
       triggerEventValues(this, 'change', [current]);
     },
   },
+  undefined,
   [
     mixinValue({
       valueKey: 'current',

diff --git a/compiled/alipay/src/Input/InputBlur/index.axml b/compiled/alipay/src/Input/InputBlur/index.axml
@@ -4,7 +4,7 @@
   class="{{ className }}"
   style="{{ style }}"
   disabled="{{ disabled }}"
-  value="{{ inputValue }}"
+  value="{{ state.value }}"
   type="{{ type }}"
   password="{{ password }}"
   placeholder="{{ placeholder }}"

diff --git a/compiled/alipay/src/Input/InputBlur/index.ts b/compiled/alipay/src/Input/InputBlur/index.ts
@@ -1,84 +1,53 @@
-import { useEffect, useEvent, useRef } from 'functional-mini/component';
-import { mountComponent } from '../../_util/component';
-import { useComponentEvent } from '../../_util/hooks/useComponentEvent';
-import { hasValue, useMergedState } from '../../_util/hooks/useMergedState';
-import { InputBlurProps } from './props';
+import { Component, triggerEvent } from '../../_util/simply';
+import { InputBlurDefaultProps } from './props';
+import mixinValue from '../../mixins/value';
 
-const InputBlur = (props: InputBlurProps) => {
-  const isControlled = hasValue(props.controlled)
-    ? !!props.controlled
-    : hasValue(props.value);
-
-  const [value, doUpdateValue] = useMergedState(props.defaultValue, {
-    // 因为受控模式下 value 也是会随着 props.value 变化的, 所以这里不需要判断是否受控
-    defaultValue: props.value,
-  });
-  function updateValue(value, updateWithoutFocusCheck?: boolean) {
-    if (!updateWithoutFocusCheck && focusRef.current) {
-      return;
-    }
-    doUpdateValue(value);
+Component(
+  InputBlurDefaultProps,
+  {
+    onChange(e) {
+      const value = e.detail.value;
+      if (this.isControlled()) {
+        this.update(value, {}, true);
+      }
+      triggerEvent(this, 'change', value, e);
+    },
+    onFocus(e) {
+      const value = e.detail.value;
+      this.focus = true;
+      triggerEvent(this, 'focus', value, e);
+    },
+    onBlur(e) {
+      const value = e.detail.value;
+      this.focus = false;
+      if (this.isControlled()) {
+        this.update(this.props.value);
+      }
+      triggerEvent(this, 'blur', value, e);
+    },
+    onConfirm(e) {
+      const value = e.detail.value;
+      triggerEvent(this, 'confirm', value, e);
+    },
+  },
+  undefined,
+  [
+    mixinValue({
+      scopeKey: 'state',
+      transformValue(value, extra, updateWithoutFocusCheck) {
+        if (!updateWithoutFocusCheck && this.focus) {
+          return {
+            needUpdate: false,
+          };
+        }
+        return {
+          needUpdate: true,
+          value,
+        };
+      },
+    }),
+  ],
+  {
+    focus: false,
   }
-
-  const focusRef = useRef(false);
-
-  useEffect(() => {
-    if (!focusRef.current) {
-      doUpdateValue(props.value);
-    }
-  }, [props, focusRef]);
-
-  const { triggerEvent } = useComponentEvent(props);
-  useEvent('onChange', (e) => {
-    const newValue = e.detail.value;
-    if (isControlled) {
-      updateValue(newValue, true);
-    }
-    triggerEvent('change', newValue, e);
-  });
-
-  useEvent('onFocus', (e) => {
-    const newValue = e.detail.value;
-    focusRef.current = true;
-    triggerEvent('focus', newValue, e);
-  });
-  useEvent('onBlur', (e) => {
-    const newValue = e.detail.value;
-    focusRef.current = false;
-    if (isControlled) {
-      updateValue(props.value);
-    }
-    triggerEvent('blur', newValue, e);
-  });
-  useEvent('onConfirm', (e) => {
-    const newValue = e.detail.value;
-    triggerEvent('confirm', newValue, e);
-  });
-  return {
-    inputValue: value,
-  };
-};
-
-mountComponent<InputBlurProps>(InputBlur, {
-  value: null,
-  defaultValue: null,
-  placeholder: null,
-  placeholderClassName: '',
-  placeholderStyle: '',
-  enableNative: null,
-  confirmType: null,
-  confirmHold: null,
-  alwaysSystem: null,
-  selectionStart: null,
-  selectionEnd: null,
-  cursor: null,
-  controlled: null,
-  inputClassName: null,
-  inputStyle: null,
-  focus: null,
-  password: null,
-  disabled: null,
-  name: null,
-  type: null,
-  randomNumber: null,
-});
+);
diff --git a/compiled/alipay/src/Input/InputBlur/props.ts b/compiled/alipay/src/Input/InputBlur/props.ts
@@ -49,4 +49,26 @@ export interface InputBlurProps extends IBaseProps {
   onConfirm?: (value: string, e: any) => void;
 }
 
-export const InputBlurDefaultProps: Partial<InputBlurProps> = {};
+export const InputBlurDefaultProps: Partial<InputBlurProps> = {
+  value: null,
+  defaultValue: null,
+  placeholder: null,
+  placeholderClassName: '',
+  placeholderStyle: '',
+  enableNative: null,
+  confirmType: null,
+  confirmHold: null,
+  alwaysSystem: null,
+  selectionStart: null,
+  selectionEnd: null,
+  cursor: null,
+  controlled: null,
+  inputClassName: null,
+  inputStyle: null,
+  focus: null,
+  password: null,
+  disabled: null,
+  name: null,
+  type: null,
+  randomNumber: null,
+};
diff --git a/compiled/alipay/src/Input/Textarea/index.ts b/compiled/alipay/src/Input/Textarea/index.ts
@@ -1,83 +1,44 @@
-import { useEvent, useState } from 'functional-mini/component';
-import { mountComponent } from '../../_util/component';
-import { useComponentEvent } from '../../_util/hooks/useComponentEvent';
-import useLayoutEffect from '../../_util/hooks/useLayoutEffect';
-import { hasValue, useMergedState } from '../../_util/hooks/useMergedState';
-import { triggerRefEvent } from '../../_util/hooks/useReportRef';
-import { TextareaFunctionalProps, TextareaProps } from './props';
-
-const Textarea = (props: TextareaProps) => {
-  const isControlled = hasValue(props.controlled)
-    ? !!props.controlled
-    : hasValue(props.value);
-
-  let option: any = {
-    value: props.value,
-  };
-  if (!isControlled && hasValue(props.value)) {
-    option = {
-      defaultValue: props.value,
-    };
-  }
-  const [value, updateValue] = useMergedState(props.defaultValue, option);
-  const [selfFocus, setSelfFocus] = useState(false);
-  const { triggerEvent } = useComponentEvent(props);
-  triggerRefEvent();
-  useLayoutEffect(
-    (mount) => {
-      if (!isControlled && !mount) {
-        updateValue(props.value);
+import { Component, triggerEvent } from '../../_util/simply';
+import { TextareaDefaultProps } from './props';
+import mixinValue from '../../mixins/value';
+
+Component(
+  TextareaDefaultProps,
+  {
+    onChange(e) {
+      const value = e.detail.value;
+      if (!this.isControlled()) {
+        this.update(value);
       }
+      triggerEvent(this, 'change', value, e);
     },
-    [props.value]
-  );
-
-  useEvent('onChange', (e) => {
-    const newValue = e.detail.value;
-    if (!isControlled) {
-      updateValue(newValue);
-    } else {
-    }
-    triggerEvent('change', newValue, e);
-  });
-
-  useEvent('onFocus', (e) => {
-    const newValue = e.detail.value;
-    setSelfFocus(true);
-    triggerEvent('focus', newValue, e);
-  });
-
-  useEvent('onBlur', (e) => {
-    const newValue = e.detail.value;
-    setSelfFocus(false);
-    triggerEvent('blur', newValue, e);
-  });
-
-  useEvent('onConfirm', (e) => {
-    const newValue = e.detail.value;
-    triggerEvent('confirm', newValue, e);
-  });
-  useEvent('onClear', (e) => {
-    if (!isControlled) {
-      updateValue('');
-    }
-    triggerEvent('change', '', e);
-  });
-
-  useEvent('update', (e) => {
-    if (isControlled) {
-      return;
-    }
-    updateValue(e);
-  });
-
-  return {
-    state: {
-      value,
-      controlled: isControlled,
+    onFocus(e) {
+      const value = e.detail.value;
+      this.setData({
+        selfFocus: true,
+      });
+      triggerEvent(this, 'focus', value, e);
     },
-    selfFocus,
-  };
-};
-
-mountComponent<TextareaProps>(Textarea, TextareaFunctionalProps);
+    onBlur(e) {
+      const value = e.detail.value;
+      this.setData({
+        selfFocus: false,
+      });
+      triggerEvent(this, 'blur', value, e);
+    },
+    onConfirm(e) {
+      const value = e.detail.value;
+      triggerEvent(this, 'confirm', value, e);
+    },
+    onClear(e) {
+      if (!this.isControlled()) {
+        this.update('');
+      }
+      triggerEvent(this, 'change', '', e);
+    },
+  },
+  {
+    selfFocus: false,
+  },
+  [mixinValue({ scopeKey: 'state' })],
+);
diff --git a/compiled/alipay/src/Input/Textarea/props.ts b/compiled/alipay/src/Input/Textarea/props.ts
@@ -35,11 +35,7 @@ export interface TextareaProps extends IBaseProps {
   onConfirm?: (value: string, e: any) => void;
 }
 
-export const TextareaDefaultProps: Partial<TextareaProps> = {
-  enableNative: false,
-};
-
-export const TextareaFunctionalProps: TextareaProps = {
+export const TextareaDefaultProps: TextareaProps = {
   value: null,
   defaultValue: null,
   placeholder: null,