mirror of https://gitee.com/answerdev/answer.git
Merge branch 'feat/ui-v0.4' into 'test'
Feat/ui v0.4 See merge request opensource/answer!266
This commit is contained in:
贾海涛(龙笛)
commit
ce5bf43948
|
|
@ -109,6 +109,17 @@ const SchemaForm: FC<IProps> = ({
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||||
|
const { name, value } = e.target;
|
||||||
|
const data = {
|
||||||
|
...formData,
|
||||||
|
[name]: { ...formData[name], value, isInvalid: false },
|
||||||
|
};
|
||||||
|
if (onChange instanceof Function) {
|
||||||
|
onChange(data);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const handleSwitchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
const handleSwitchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
const { name, checked } = e.target;
|
const { name, checked } = e.target;
|
||||||
const data = {
|
const data = {
|
||||||
|
|
@ -238,6 +249,9 @@ const SchemaForm: FC<IProps> = ({
|
||||||
<Form.Label>{title}</Form.Label>
|
<Form.Label>{title}</Form.Label>
|
||||||
<Form.Select
|
<Form.Select
|
||||||
aria-label={description}
|
aria-label={description}
|
||||||
|
name={key}
|
||||||
|
value={formData[key]?.value}
|
||||||
|
onChange={handleSelectChange}
|
||||||
isInvalid={formData[key].isInvalid}>
|
isInvalid={formData[key].isInvalid}>
|
||||||
{properties[key].enum?.map((item, index) => {
|
{properties[key].enum?.map((item, index) => {
|
||||||
return (
|
return (
|
||||||
|
|
@ -314,7 +328,8 @@ const SchemaForm: FC<IProps> = ({
|
||||||
<Form.Label>{title}</Form.Label>
|
<Form.Label>{title}</Form.Label>
|
||||||
<TimeZonePicker
|
<TimeZonePicker
|
||||||
value={formData[key]?.value}
|
value={formData[key]?.value}
|
||||||
onChange={handleInputChange}
|
name={key}
|
||||||
|
onChange={handleSelectChange}
|
||||||
/>
|
/>
|
||||||
<Form.Control
|
<Form.Control
|
||||||
name={key}
|
name={key}
|
||||||
|
|
|
||||||
|
|
@ -75,19 +75,6 @@ const Interface: FC = () => {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// const onChange = (fieldName, fieldValue) => {
|
|
||||||
// if (!formData[fieldName]) {
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// const fieldData: FormDataType = {
|
|
||||||
// [fieldName]: {
|
|
||||||
// value: fieldValue,
|
|
||||||
// isInvalid: false,
|
|
||||||
// errorMsg: '',
|
|
||||||
// },
|
|
||||||
// };
|
|
||||||
// setFormData({ ...formData, ...fieldData });
|
|
||||||
// };
|
|
||||||
const uiSchema: UISchema = {
|
const uiSchema: UISchema = {
|
||||||
theme: {
|
theme: {
|
||||||
'ui:widget': 'select',
|
'ui:widget': 'select',
|
||||||
|
|
@ -211,119 +198,6 @@ const Interface: FC = () => {
|
||||||
onSubmit={onSubmit}
|
onSubmit={onSubmit}
|
||||||
onChange={handleOnChange}
|
onChange={handleOnChange}
|
||||||
/>
|
/>
|
||||||
{/* <Form noValidate onSubmit={onSubmit}>
|
|
||||||
<Form.Group controlId="logo" className="mb-3">
|
|
||||||
<Form.Label>{t('logo.label')}</Form.Label>
|
|
||||||
<Stack gap={2}>
|
|
||||||
<div
|
|
||||||
className="bg-light overflow-hidden"
|
|
||||||
style={{ width: '288px', height: '96px' }}>
|
|
||||||
{formData.logo.value ? (
|
|
||||||
<Image
|
|
||||||
width="288"
|
|
||||||
height="96"
|
|
||||||
className="object-fit-contain"
|
|
||||||
src={formData.logo.value}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
<div className="d-inline-flex">
|
|
||||||
<UploadImg type="logo" upload={imgUpload} className="mb-2" />
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
<Form.Text as="div" className="text-muted">
|
|
||||||
<Trans i18nKey="admin.interface.logo.text">
|
|
||||||
You can upload your image or
|
|
||||||
<Button
|
|
||||||
variant="link"
|
|
||||||
size="sm"
|
|
||||||
className="p-0 mx-1"
|
|
||||||
onClick={(evt) => {
|
|
||||||
evt.preventDefault();
|
|
||||||
onChange('logo', '');
|
|
||||||
}}>
|
|
||||||
reset it
|
|
||||||
</Button>
|
|
||||||
to the site title text.
|
|
||||||
</Trans>
|
|
||||||
</Form.Text>
|
|
||||||
<Form.Control.Feedback type="invalid">
|
|
||||||
{formData.logo.errorMsg}
|
|
||||||
</Form.Control.Feedback>
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group controlId="theme" className="mb-3">
|
|
||||||
<Form.Label>{t('theme.label')}</Form.Label>
|
|
||||||
<Form.Select
|
|
||||||
value={formData.theme.value}
|
|
||||||
isInvalid={formData.theme.isInvalid}
|
|
||||||
onChange={(evt) => {
|
|
||||||
onChange('theme', evt.target.value);
|
|
||||||
}}>
|
|
||||||
{themes?.map((item) => {
|
|
||||||
return (
|
|
||||||
<option value={item.value} key={item.value}>
|
|
||||||
{item.label}
|
|
||||||
</option>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Form.Select>
|
|
||||||
<Form.Text as="div">{t('theme.text')}</Form.Text>
|
|
||||||
<Form.Control.Feedback type="invalid">
|
|
||||||
{formData.theme.errorMsg}
|
|
||||||
</Form.Control.Feedback>
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group controlId="language" className="mb-3">
|
|
||||||
<Form.Label>{t('language.label')}</Form.Label>
|
|
||||||
<Form.Select
|
|
||||||
value={formData.language.value}
|
|
||||||
isInvalid={formData.language.isInvalid}
|
|
||||||
onChange={(evt) => {
|
|
||||||
onChange('language', evt.target.value);
|
|
||||||
}}>
|
|
||||||
{langs?.map((item) => {
|
|
||||||
return (
|
|
||||||
<option value={item.value} key={item.value}>
|
|
||||||
{item.label}
|
|
||||||
</option>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Form.Select>
|
|
||||||
<Form.Text as="div">{t('language.text')}</Form.Text>
|
|
||||||
<Form.Control.Feedback type="invalid">
|
|
||||||
{formData.language.errorMsg}
|
|
||||||
</Form.Control.Feedback>
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group controlId="time-zone" className="mb-3">
|
|
||||||
<Form.Label>{t('time_zone.label')}</Form.Label>
|
|
||||||
<Form.Select
|
|
||||||
value={formData.time_zone.value}
|
|
||||||
isInvalid={formData.time_zone.isInvalid}
|
|
||||||
onChange={(evt) => {
|
|
||||||
onChange('time_zone', evt.target.value);
|
|
||||||
}}>
|
|
||||||
{TIMEZONES?.map((item) => {
|
|
||||||
return (
|
|
||||||
<optgroup label={item.label} key={item.label}>
|
|
||||||
{item.options.map((option) => {
|
|
||||||
return (
|
|
||||||
<option value={option.value} key={option.value}>
|
|
||||||
{option.label}
|
|
||||||
</option>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</optgroup>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</Form.Select>
|
|
||||||
<Form.Text as="div">{t('time_zone.text')}</Form.Text>
|
|
||||||
<Form.Control.Feedback type="invalid">
|
|
||||||
{formData.time_zone.errorMsg}
|
|
||||||
</Form.Control.Feedback>
|
|
||||||
</Form.Group>
|
|
||||||
<Button variant="primary" type="submit">
|
|
||||||
{t('save', { keyPrefix: 'btns' })}
|
|
||||||
</Button>
|
|
||||||
</Form> */}
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue