ant-design/components/config-provider/demo/theme.tsx
二货爱吃白萝卜 832cffcdf9
feat: ColorPicker support gradient color (#50050)
* 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
2024-07-29 16:38:50 +08:00

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>
);
};