Skip to content

Commit

Permalink
improve(design): Set required to true for Form.Item with Switch to hi…
Browse files Browse the repository at this point in the history 
…de optional mark
  • Loading branch information
@dengfuping
dengfuping committed Jan 17, 2025
1 parent 9c3461d commit 33e2bf4
Show file tree
Hide file tree
Showing 3 changed files with 371 additions and 1 deletion.
9 changes: 8 additions & 1 deletion packages/design/src/form/FormItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import type { ReactNode } from 'react';
import React from 'react';
import type { TooltipProps } from '../tooltip';
import { useTooltipTypeList } from '../tooltip/hooks/useTooltipTypeList';
import { isPlainObject } from 'lodash';

const AntFormItem = AntForm.Item;

Expand Down Expand Up @@ -34,7 +35,13 @@ const Item: React.FC<FormItemProps> = ({ children, tooltip, ...restProps }) => {
}

return (
<AntFormItem tooltip={tooltip} {...restProps}>
<AntFormItem
tooltip={tooltip}
// auto set required for Switch children to hide optional mark
// @ts-ignore
required={isPlainObject(children) && children.type?.__ANT_SWITCH ? true : undefined}
{...restProps}
>
{children}
</AntFormItem>
);
Expand Down
296 changes: 296 additions & 0 deletions packages/design/src/form/__tests__/__snapshots__/switch.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,296 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Form.Item with Switch > dynamic Switch 1`] = `
<form
class="ant-form ant-form-horizontal"
>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-label"
>
<label
class="ant-form-item-required ant-form-item-required-mark-optional"
for="switch"
title="Switch"
>
Switch
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<button
aria-checked="false"
aria-required="true"
class="ant-switch"
id="switch"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
>
<span
class="ant-switch-inner-checked"
/>
<span
class="ant-switch-inner-unchecked"
/>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
`;

exports[`Form.Item with Switch > nested Switch 1`] = `
<form
class="ant-form ant-form-horizontal"
>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-label"
>
<label
class="ant-form-item-required-mark-optional"
for="switch"
title="Switch"
>
Switch
<span
class="ant-form-item-optional"
title=""
>
(optional)
</span>
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<span
id="switch"
>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
>
<span
class="ant-switch-inner-checked"
/>
<span
class="ant-switch-inner-unchecked"
/>
</span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</form>
`;

exports[`Form.Item with Switch > normal Switch 1`] = `
<form
class="ant-form ant-form-horizontal"
>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-label"
>
<label
class="ant-form-item-required ant-form-item-required-mark-optional"
for="switch"
title="Switch"
>
Switch
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<button
aria-checked="false"
aria-required="true"
class="ant-switch"
id="switch"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
>
<span
class="ant-switch-inner-checked"
/>
<span
class="ant-switch-inner-unchecked"
/>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
`;

exports[`Form.Item with Switch > renderProps Switch 1`] = `
<form
class="ant-form ant-form-horizontal"
>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-label"
>
<label
class="ant-form-item-required-mark-optional"
for="switch"
title="Switch"
>
Switch
<span
class="ant-form-item-optional"
title=""
>
(optional)
</span>
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
/>
</div>
</div>
</div>
</div>
</form>
`;

exports[`Form.Item with Switch > sub Switch 1`] = `
<form
class="ant-form ant-form-horizontal"
>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-label"
>
<label
class="ant-form-item-required-mark-optional"
for="switch"
title="Switch"
>
Switch
<span
class="ant-form-item-optional"
title=""
>
(optional)
</span>
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<button
aria-checked="false"
class="ant-switch"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
>
<span
class="ant-switch-inner-checked"
/>
<span
class="ant-switch-inner-unchecked"
/>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</form>
`;
67 changes: 67 additions & 0 deletions packages/design/src/form/__tests__/switch.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import React from 'react';
import { render } from '@testing-library/react';
import { ConfigProvider, Form, Switch } from '@oceanbase/design';
import type { FormItemProps } from '@oceanbase/design';

const FormItemTest: React.FC<FormItemProps> = ({ children }) => (
<Form>
<Form.Item label="Switch" name="switch">
{children}
</Form.Item>
</Form>
);

describe('Form.Item with Switch', () => {
it('normal Switch', () => {
const { container, asFragment } = render(
<FormItemTest>
<Switch />
</FormItemTest>
);
expect(container.querySelector('.ant-form-item-optional')).toBeFalsy();
expect(asFragment().firstChild).toMatchSnapshot();
});

it('dynamic Switch', () => {
const { container, asFragment } = render(
<FormItemTest>{true ? <Switch /> : null}</FormItemTest>
);
expect(container.querySelector('.ant-form-item-optional')).toBeFalsy();
expect(asFragment().firstChild).toMatchSnapshot();
});

it('nested Switch', () => {
const { container, asFragment } = render(
<FormItemTest>
<span>
<Switch />
</span>
</FormItemTest>
);
expect(container.querySelector('.ant-form-item-optional')).toBeTruthy();
expect(asFragment().firstChild).toMatchSnapshot();
});

it('renderProps Switch', () => {
const { container, asFragment } = render(
<FormItemTest>
{() => {
return true ? <Switch /> : null;
}}
</FormItemTest>
);
expect(container.querySelector('.ant-form-item-optional')).toBeTruthy();
expect(asFragment().firstChild).toMatchSnapshot();
});

it('sub component Switch', () => {
const SwitchComponent = () => <Switch />;
const { container, asFragment } = render(
<FormItemTest>
<SwitchComponent />
</FormItemTest>
);
expect(container.querySelector('.ant-form-item-optional')).toBeTruthy();
expect(asFragment().firstChild).toMatchSnapshot();

Check failure on line 65 in packages/design/src/form/__tests__/switch.test.tsx

View workflow job for this annotation

GitHub Actions / test (16.x, ubuntu-latest)

src/form/__tests__/switch.test.tsx > Form.Item with Switch > sub component Switch 

Error: Snapshot `Form.Item with Switch > sub component Switch 1` mismatched
 ❯ src/form/__tests__/switch.test.tsx:65:37
});
});

0 comments on commit 33e2bf4

Please sign in to comment.