feat: first commit

src/fragments/profile/basic/index.tsx

@@ -0,0 +1,113 @@
+import { BaseEventOrig, InputProps } from '@tarojs/components';
+
+import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
+
+import BlFormInput from '@/components/bl-form-input';
+import BlFormItem from '@/components/bl-form-item';
+import { BlFormRadio, BlFormRadioGroup } from '@/components/bl-form-radio';
+import { GenderType } from '@/constants/material';
+import { MaterialProfile } from '@/types/material';
+import { logWithPrefix, string2Number } from '@/utils/common';
+
+import './index.less';
+
+interface IProps {
+  profile: Partial<MaterialProfile>;
+}
+
+const PREFIX = 'fragment-profile-basic';
+const log = logWithPrefix(PREFIX);
+
+function ProfileBasicFragment(props: IProps, ref) {
+  const { profile } = props;
+  const [name, setName] = useState(profile.name || '');
+  const [gender, setGender] = useState<GenderType>(profile.gender || GenderType.WOMEN);
+  const [age, setAge] = useState(profile.age || '');
+  const [height, setHeight] = useState(profile.height || '');
+  const [weight, setWeight] = useState(profile.weight || '');
+  const [shoeSize, setShoeSize] = useState(profile.shoeSize || '');
+
+  const handleInputName = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    setName(value);
+  }, []);
+
+  const handleInputAge = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    if (Number.isNaN(Number(value))) {
+      return;
+    }
+    setAge(string2Number(value));
+  }, []);
+
+  const handleInputHeight = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    if (Number.isNaN(Number(value))) {
+      return;
+    }
+    setHeight(string2Number(value));
+  }, []);
+
+  const handleInputWeight = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    if (Number.isNaN(Number(value))) {
+      return;
+    }
+    setWeight(string2Number(value));
+  }, []);
+
+  const handleInputShoeSize = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    if (Number.isNaN(Number(value))) {
+      return;
+    }
+    setShoeSize(string2Number(value));
+  }, []);
+
+  const handleGenderChange = useCallback((value: GenderType) => {
+    log('handleGenderChange', value);
+    setGender(value);
+  }, []);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getData: () => ({ name, gender, age, height, weight, shoeSize }),
+    }),
+    [name, gender, age, height, weight, shoeSize]
+  );
+
+  return (
+    <div className={PREFIX}>
+      <BlFormItem title="称呼">
+        <BlFormInput value={name} onInput={handleInputName} />
+      </BlFormItem>
+      <BlFormItem title="性别">
+        <BlFormRadioGroup direction="horizontal" value={gender} onChange={handleGenderChange}>
+          <BlFormRadio name={GenderType.WOMEN} text="女" value={gender} />
+          <BlFormRadio name={GenderType.MEN} text="男" value={gender} />
+        </BlFormRadioGroup>
+      </BlFormItem>
+      <BlFormItem title="年龄">
+        <BlFormInput value={String(age)} type="number" maxlength={3} onInput={handleInputAge} rightText="岁" />
+      </BlFormItem>
+      <BlFormItem title="身高">
+        <BlFormInput value={String(height)} type="number" maxlength={3} onInput={handleInputHeight} rightText="CM" />
+      </BlFormItem>
+      <BlFormItem title="体重">
+        <BlFormInput value={String(weight)} type="number" maxlength={3} onInput={handleInputWeight} rightText="KG" />
+      </BlFormItem>
+      <BlFormItem title="鞋码" optional>
+        <BlFormInput
+          value={String(shoeSize)}
+          type="number"
+          maxlength={2}
+          onInput={handleInputShoeSize}
+          rightText="码"
+        />
+      </BlFormItem>
+    </div>
+  );
+}
+
+export default forwardRef(ProfileBasicFragment);