Skip to content

Commit

Permalink
Merge pull request #949 from oceanbase/dengfuping-dev
Browse files Browse the repository at this point in the history 
improve(design): Set required to true for Form.Item with Switch to hide optional mark
  • Loading branch information
@dengfuping
dengfuping authored Jan 17, 2025
2 parents 4466cac + 92313da commit c1606ba
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 component 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();
});
});

0 comments on commit c1606ba

Please sign in to comment.