mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

fix: options missing id (#45287)

Browse Source
This commit is contained in:
二货爱吃白萝卜 2023-10-12 09:43:35 +08:00 committed by GitHub
parent 8024bbd346
commit 70ce748d57
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 82 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.dumi/pages/index/components/Theme/ColorPicker.tsx
View File

@ -35,6 +35,7 @@ const useStyle = createStyles(({ token, css }) => ({
}));
export interface ColorPickerProps {
id?: string;
children?: React.ReactNode;
value?: string | Color;
onChange?: (value?: Color | string) => void;
@ -66,7 +67,7 @@ const DebouncedColorPicker: React.FC<ColorPickerProps> = (props) => {
);
};
const ThemeColorPicker: React.FC<ColorPickerProps> = ({ value, onChange }) => {
const ThemeColorPicker: React.FC<ColorPickerProps> = ({ value, onChange, id }) => {
const { styles } = useStyle();
const matchColors = React.useMemo(() => {
@ -95,6 +96,7 @@ const ThemeColorPicker: React.FC<ColorPickerProps> = ({ value, onChange }) => {
value={typeof value === 'string' ? value : value?.toHexString()}
onChange={(event) => onChange?.(event.target.value)}
style={{ width: 120 }}
id={id}
/>
<Space size="middle">

6
.dumi/pages/index/components/Theme/RadiusPicker.tsx
View File

@ -1,12 +1,13 @@
import React from 'react';
import { InputNumber, Space, Slider } from 'antd';
import { InputNumber, Slider, Space } from 'antd';
export interface RadiusPickerProps {
id?: string;
value?: number;
onChange?: (value: number | null) => void;
}
export default function RadiusPicker({ value, onChange }: RadiusPickerProps) {
export default function RadiusPicker({ value, onChange, id }: RadiusPickerProps) {
return (
<Space size="large">
<InputNumber
@ -16,6 +17,7 @@ export default function RadiusPicker({ value, onChange }: RadiusPickerProps) {
min={0}
formatter={(val) => `${val}px`}
parser={(str) => (str ? parseFloat(str) : (str as any))}
id={id}
/>
<Slider

73
.dumi/pages/index/components/Theme/ThemePicker.tsx
View File

@ -1,7 +1,8 @@
import { createStyles, useTheme } from 'antd-style';
import * as React from 'react';
import classNames from 'classnames';
import { Space } from 'antd';
import { createStyles, useTheme } from 'antd-style';
import classNames from 'classnames';
import useLocale from '../../../../hooks/useLocale';
export const THEMES = {
@ -33,48 +34,54 @@ const locales = {
const useStyle = createStyles(({ token, css }) => ({
themeCard: css`
border-radius: ${token.borderRadius}px;
cursor: pointer;
transition: all ${token.motionDurationSlow};
overflow: hidden;
display: inline-block;
border-radius: ${token.borderRadius}px;
cursor: pointer;
transition: all ${token.motionDurationSlow};
overflow: hidden;
display: inline-block;
& > input[type="radio"] {
width: 0;
height: 0;
opacity: 0;
position: absolute;
}
& > input[type='radio'] {
width: 0;
height: 0;
opacity: 0;
position: absolute;
}
img {
vertical-align: top;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 9px 28px 8px rgba(0, 0, 0, 0.05);
}
img {
vertical-align: top;
box-shadow:
0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 9px 28px 8px rgba(0, 0, 0, 0.05);
}
&:focus-within,
&:hover {
transform: scale(1.04);
}
`,
&:focus-within,
&:hover {
transform: scale(1.04);
}
`,
themeCardActive: css`
box-shadow: 0 0 0 1px ${token.colorBgContainer},
0 0 0 ${token.controlOutlineWidth * 2 + 1}px ${token.colorPrimary};
box-shadow:
0 0 0 1px ${token.colorBgContainer},
0 0 0 ${token.controlOutlineWidth * 2 + 1}px ${token.colorPrimary};
&,
&:hover:not(:focus-within) {
transform: scale(1);
}
`,
&,
&:hover:not(:focus-within) {
transform: scale(1);
}
`,
}));
export interface ThemePickerProps {
id?: string;
value?: string;
onChange?: (value: string) => void;
}
export default function ThemePicker({ value, onChange }: ThemePickerProps) {
export default function ThemePicker(props: ThemePickerProps) {
const { value, onChange, id } = props;
const token = useTheme();
const { styles } = useStyle();
@ -82,7 +89,7 @@ export default function ThemePicker({ value, onChange }: ThemePickerProps) {
return (
<Space size={token.paddingLG}>
{Object.keys(THEMES).map((theme) => {
{Object.keys(THEMES).map((theme, index) => {
const url = THEMES[theme as THEME];
return (
@ -94,7 +101,7 @@ export default function ThemePicker({ value, onChange }: ThemePickerProps) {
onChange?.(theme);
}}
>
<input type="radio" name="theme" />
<input type="radio" name="theme" id={index === 0 ? id : null} />
<img src={url} alt={theme} />
</label>
<span>{locale[theme as keyof typeof locale]}</span>

19
.dumi/pages/index/components/Theme/index.tsx
View File

@ -534,11 +534,20 @@ export default function Theme() {
<Form.Item label={locale.titleBorderRadius} name="borderRadius">
<RadiusPicker />
</Form.Item>
<Form.Item label={locale.titleCompact} name="compact">
<Radio.Group>
<Radio value="default">{locale.default}</Radio>
<Radio value="compact">{locale.compact}</Radio>
</Radio.Group>
<Form.Item label={locale.titleCompact} name="compact" htmlFor="compact_default">
<Radio.Group
options={[
{
label: locale.default,
value: 'default',
id: 'compact_default',
},
{
label: locale.compact,
value: 'compact',
},
]}
/>
</Form.Item>
</Form>
</Card>

6
components/checkbox/Group.tsx
View File

@ -1,11 +1,11 @@
import * as React from 'react';
import classNames from 'classnames';
import omit from 'rc-util/lib/omit';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import type { CheckboxChangeEvent } from './Checkbox';
import Checkbox from './Checkbox';
import GroupContext from './GroupContext';
import useStyle from './style';
export type CheckboxValueType = string | number | boolean;
@ -16,6 +16,7 @@ export interface CheckboxOptionType {
style?: React.CSSProperties;
disabled?: boolean;
title?: string;
id?: string;
onChange?: (e: CheckboxChangeEvent) => void;
}
@ -124,6 +125,7 @@ const InternalGroup: React.ForwardRefRenderFunction<HTMLDivElement, CheckboxGrou
className={`${groupPrefixCls}-item`}
style={option.style}
title={option.title}
id={option.id}
>
{option.label}
</Checkbox>

8
components/checkbox/__tests__/group.test.tsx
View File

@ -1,4 +1,5 @@
import React, { useState } from 'react';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { fireEvent, render } from '../../../tests/utils';
@ -268,4 +269,11 @@ describe('CheckboxGroup', () => {
fireEvent.click(container.querySelector('.ant-checkbox-input')!);
expect(onChange).toHaveBeenCalledWith(['A']);
});
it('options support id', () => {
const { container } = render(
<Checkbox.Group options={[{ label: 'bamboo', id: 'bamboo', value: 'bamboo' }]} />,
);
expect(container.querySelector('#bamboo')).toBeTruthy();
});
});

8
components/radio/__tests__/group.test.tsx
View File

@ -1,5 +1,6 @@
import type { RefAttributes } from 'react';
import React from 'react';
import type { RadioGroupProps } from '..';
import Radio from '..';
import { fireEvent, render } from '../../../tests/utils';
@ -252,4 +253,11 @@ describe('Radio Group', () => {
fireEvent.blur(container.firstChild!);
expect(handleBlur).toHaveBeenCalledTimes(1);
});
it('options support id', () => {
const { container } = render(
<Radio.Group options={[{ label: 'bamboo', id: 'bamboo', value: 'bamboo' }]} />,
);
expect(container.querySelector('#bamboo')).toBeTruthy();
});
});

1
components/radio/group.tsx
View File

@ -79,6 +79,7 @@ const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((props, ref
checked={value === option.value}
title={option.title}
style={option.style}
id={option.id}
>
{option.label}
</Radio>