59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import { Button } from '@tarojs/components';
|
||
|
||
import { Popup } from '@taroify/core';
|
||
import { useCallback, useEffect, useState } from 'react';
|
||
|
||
import SafeBottomPadding from '@/components/safe-bottom-padding';
|
||
import Select from '@/components/select';
|
||
import { MaterialStatus } from '@/constants/material';
|
||
import { MaterialProfile } from '@/types/material';
|
||
|
||
import './index.less';
|
||
|
||
interface IProps {
|
||
open: boolean;
|
||
value: MaterialStatus;
|
||
onSave: (newValue: MaterialProfile['isOpen']) => void;
|
||
onClose: () => void;
|
||
}
|
||
|
||
const PREFIX = 'material-manage-popup';
|
||
const OPTIONS = [
|
||
{ label: '开放', value: MaterialStatus.Open },
|
||
{ label: '关闭', value: MaterialStatus.Close },
|
||
];
|
||
|
||
function MaterialManagePopup(props: IProps) {
|
||
const { open, value = MaterialStatus.Open, onSave, onClose } = props;
|
||
const [currentValue, setCurrentValue] = useState<MaterialStatus>(value);
|
||
|
||
const handleSelect = useCallback((v: MaterialStatus) => setCurrentValue(v), []);
|
||
|
||
const handleSave = useCallback(() => {
|
||
onSave(currentValue === MaterialStatus.Open);
|
||
onClose();
|
||
}, [currentValue, onSave, onClose]);
|
||
|
||
useEffect(() => {
|
||
setCurrentValue(value);
|
||
}, [value]);
|
||
|
||
return (
|
||
<Popup className={`${PREFIX}__popup`} placement="bottom" open={open} onClose={onClose}>
|
||
<div className={PREFIX}>
|
||
<div className={`${PREFIX}__header`}>
|
||
<div className={`${PREFIX}__title`}>模卡开放状态</div>
|
||
<div className={`${PREFIX}__tips`}>开放模卡给企业查看后，可以获得更多求职机会</div>
|
||
</div>
|
||
<Select className={`${PREFIX}__select`} options={OPTIONS} value={currentValue} onSelect={handleSelect} />
|
||
<Button className={`${PREFIX}__btn`} onClick={handleSave}>
|
||
保存
|
||
</Button>
|
||
</div>
|
||
<SafeBottomPadding />
|
||
</Popup>
|
||
);
|
||
}
|
||
|
||
export default MaterialManagePopup;
|