114 lines
3.8 KiB
TypeScript
114 lines
3.8 KiB
TypeScript
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);
|