80 lines
2.8 KiB
TypeScript
80 lines
2.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 [workedSecCategoryStr, setWorkedSecCategoryStr] = useState(profile.workedSecCategoryStr || '');
|
|
|
|
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 handleGenderChange = useCallback((value: GenderType) => {
|
|
log('handleGenderChange', value);
|
|
setGender(value);
|
|
}, []);
|
|
const handleInputWorkedSecCategoryStr = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
|
|
const value = e.detail.value || '';
|
|
setWorkedSecCategoryStr(value);
|
|
}, []);
|
|
|
|
useImperativeHandle(
|
|
ref,
|
|
() => ({
|
|
getData: () => ({ name, gender, age, workedSecCategoryStr }),
|
|
}),
|
|
[name, gender, age, workedSecCategoryStr]
|
|
);
|
|
|
|
return (
|
|
<div className={PREFIX}>
|
|
<BlFormItem title="称呼">
|
|
<BlFormInput value={name} onInput={handleInputName} />
|
|
</BlFormItem>
|
|
<BlFormItem title="年龄">
|
|
<BlFormInput value={String(age)} type="number" maxlength={3} onInput={handleInputAge} rightText="岁" />
|
|
</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="直播过的品类" optional>
|
|
<BlFormInput value={workedSecCategoryStr} maxlength={140} onInput={handleInputWorkedSecCategoryStr} />
|
|
</BlFormItem>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default forwardRef(ProfileBasicFragment);
|