You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.4 KiB
52 lines
1.4 KiB
import { Button, ColorPicker, ConfigProvider, Form, InputNumber } from 'antd';
|
|
import type { Color } from 'antd/es/color-picker';
|
|
import React from 'react';
|
|
|
|
type ThemeData = {
|
|
borderRadius: number;
|
|
colorPrimary: string;
|
|
};
|
|
|
|
const defaultData: ThemeData = {
|
|
borderRadius: 6,
|
|
colorPrimary: '#1677ff',
|
|
};
|
|
|
|
export default () => {
|
|
const [form] = Form.useForm();
|
|
|
|
const [data, setData] = React.useState<ThemeData>(defaultData);
|
|
|
|
return (
|
|
<ConfigProvider
|
|
theme={{ token: { colorPrimary: data.colorPrimary, borderRadius: data.borderRadius } }}
|
|
>
|
|
<Form
|
|
form={form}
|
|
onValuesChange={(changedValues, allValues) => {
|
|
const colorObj = changedValues?.colorPrimary
|
|
? { colorPrimary: (allValues?.colorPrimary as Color)?.toHexString() }
|
|
: {};
|
|
setData({
|
|
...allValues,
|
|
...colorObj,
|
|
});
|
|
}}
|
|
name="theme"
|
|
initialValues={defaultData}
|
|
labelCol={{ span: 4 }}
|
|
wrapperCol={{ span: 20 }}
|
|
>
|
|
<Form.Item valuePropName="color" name="colorPrimary" label="Primary Color">
|
|
<ColorPicker />
|
|
</Form.Item>
|
|
<Form.Item name="borderRadius" label="Border Radius">
|
|
<InputNumber />
|
|
</Form.Item>
|
|
<Form.Item name="submit" wrapperCol={{ offset: 4, span: 20 }}>
|
|
<Button type="primary">Submit</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</ConfigProvider>
|
|
);
|
|
};
|
|
|