mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 04:48:02 +08:00
832cffcdf9
* refactor: support type update * chore: update clear style * chore: bump color picker * chore: use slider * chore: bump color picker * chore: range slider * chore: layout * chore: useModeColor * chore: simplify * chore: bump color picker * refactor: event * chore: tmp lock check * chore: of it * chore: update ts def * chore: update ts def * chore: remove useless ts * chore: linear * chore: adjust style * chore: rm useless code * chore: fill color * chore: basic linear * chore: support toStr * chore: limit minCount * chore: use cache * chore: drag support: * chore: yes * chore: update demo * chore: useLayoutEffect instead * chore: fix click to add point * chore: add smmoth * chore: support of locale * chore: add locale * chore: fix lint * chore: adjust style * chore: fix lint * chore: fix style * test: fix test case * chore: fix popover * test: fix test case * chore: fix test * test: clean up * chore: fix lint * chore: fix lint * chore: fix lint * test: coverage * test: coverage * test: coverage * test: coverage * test: coverage * test: coverage * chore: fix docs * docs: update demo desc * chore: enhance hover range * fix: delete not working * chore: fix lint * test: coverage * test: coverage * chore: clean up * chore: adjust * chore: highlight * chore: adjust style * chore: fix lint * chore: update demo * chore: memo perf * refactor: up to down colors * test: update snapshot
104 lines
2.4 KiB
TypeScript
104 lines
2.4 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Button,
|
|
ColorPicker,
|
|
ConfigProvider,
|
|
Divider,
|
|
Form,
|
|
Input,
|
|
InputNumber,
|
|
Space,
|
|
Switch,
|
|
} from 'antd';
|
|
import type { ColorPickerProps, GetProp } from 'antd';
|
|
|
|
type Color = Extract<GetProp<ColorPickerProps, 'value'>, { cleared: any }>;
|
|
|
|
type ThemeData = {
|
|
borderRadius: number;
|
|
colorPrimary: string;
|
|
Button?: {
|
|
colorPrimary: string;
|
|
algorithm?: boolean;
|
|
};
|
|
};
|
|
|
|
const defaultData: ThemeData = {
|
|
borderRadius: 6,
|
|
colorPrimary: '#1677ff',
|
|
Button: {
|
|
colorPrimary: '#00B96B',
|
|
},
|
|
};
|
|
|
|
export default () => {
|
|
const [form] = Form.useForm();
|
|
|
|
const [data, setData] = React.useState<ThemeData>(defaultData);
|
|
|
|
return (
|
|
<div>
|
|
<ConfigProvider
|
|
theme={{
|
|
token: {
|
|
colorPrimary: data.colorPrimary,
|
|
borderRadius: data.borderRadius,
|
|
},
|
|
components: {
|
|
Button: {
|
|
colorPrimary: data.Button?.colorPrimary,
|
|
algorithm: data.Button?.algorithm,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<Space>
|
|
<Input />
|
|
<Button type="primary">Button</Button>
|
|
</Space>
|
|
</ConfigProvider>
|
|
<Divider />
|
|
<Form
|
|
form={form}
|
|
onValuesChange={(_, allValues) => {
|
|
setData({
|
|
...allValues,
|
|
});
|
|
}}
|
|
name="theme"
|
|
initialValues={defaultData}
|
|
labelCol={{ span: 4 }}
|
|
wrapperCol={{ span: 20 }}
|
|
>
|
|
<Form.Item
|
|
name="colorPrimary"
|
|
label="Primary Color"
|
|
trigger="onChangeComplete"
|
|
getValueFromEvent={(color: Color) => color.toHexString()}
|
|
>
|
|
<ColorPicker />
|
|
</Form.Item>
|
|
<Form.Item name="borderRadius" label="Border Radius">
|
|
<InputNumber />
|
|
</Form.Item>
|
|
<Form.Item label="Button">
|
|
<Form.Item name={['Button', 'algorithm']} valuePropName="checked" label="algorithm">
|
|
<Switch />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name={['Button', 'colorPrimary']}
|
|
label="Primary Color"
|
|
trigger="onChangeComplete"
|
|
getValueFromEvent={(color: Color) => color.toHexString()}
|
|
>
|
|
<ColorPicker />
|
|
</Form.Item>
|
|
</Form.Item>
|
|
<Form.Item name="submit" wrapperCol={{ offset: 4, span: 20 }}>
|
|
<Button type="primary">Submit</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>
|
|
);
|
|
};
|