65 lines
2.5 KiB
JavaScript
65 lines
2.5 KiB
JavaScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import { Alert, Flex, Input, Tag, Form, Switch, theme } from 'antd';
|
|
import Styles from './web.pc.module.less';
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
const tagInputStyle = {
|
|
width: 64,
|
|
height: 22,
|
|
marginInlineEnd: 8,
|
|
verticalAlign: 'top',
|
|
};
|
|
export default function Offline(props) {
|
|
const { config, update, t } = props;
|
|
const { options = [], allowUser = false } = config;
|
|
const { token } = theme.useToken();
|
|
const tagPlusStyle = {
|
|
height: 22,
|
|
background: token.colorBgContainer,
|
|
borderStyle: 'dashed',
|
|
};
|
|
const [inputVisible, setInputVisible] = useState(false);
|
|
const [option, setOption] = useState('');
|
|
const inputRef = useRef(null);
|
|
useEffect(() => {
|
|
if (inputVisible) {
|
|
inputRef.current?.focus();
|
|
}
|
|
}, [inputVisible]);
|
|
const handleInputConfirm = () => {
|
|
if (option) {
|
|
options.push(option);
|
|
update({
|
|
options
|
|
});
|
|
}
|
|
setOption('');
|
|
setInputVisible(false);
|
|
};
|
|
return (<div className={Styles.container}>
|
|
<Alert type='info' message={t('tips')}/>
|
|
<Form labelCol={{ span: 6 }} wrapperCol={{ span: 12 }} layout="horizontal" style={{ minWidth: 600 }}>
|
|
<Form.Item label={t('options')}>
|
|
<Flex gap="4px 0" wrap="wrap" style={{ marginTop: 22 }}>
|
|
{options.map((option, idx) => <Tag bordered={false} closable key={idx} onClose={() => {
|
|
options.splice(idx, 1);
|
|
update({
|
|
options,
|
|
});
|
|
}}>
|
|
{option}
|
|
</Tag>)}
|
|
{inputVisible ? (<Input ref={inputRef} type="text" size="small" style={tagInputStyle} value={option} onChange={({ currentTarget }) => setOption(currentTarget.value)} onBlur={handleInputConfirm} onPressEnter={handleInputConfirm}/>) : (<Tag style={tagPlusStyle} icon={<PlusOutlined />} onClick={() => setInputVisible(true)}>
|
|
{t('newOption')}
|
|
</Tag>)}
|
|
</Flex>
|
|
</Form.Item>
|
|
<Form.Item label={t('allowUser')}>
|
|
<Switch value={allowUser} onChange={(v) => {
|
|
config.allowUser = v;
|
|
update(config);
|
|
}}/>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>);
|
|
}
|