Skip to content

Commit

Permalink
fix(form): CheckBox readonly mode support warp
Browse files Browse the repository at this point in the history 
close #6247
  • Loading branch information
@chenshuai2144
chenshuai2144 committed Jul 15, 2023
1 parent 2a0257e commit 646f4a7
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 107 deletions.
18 changes: 16 additions & 2 deletions packages/field/src/components/Checkbox/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useStyle } from '@ant-design/pro-utils';
import { Checkbox, ConfigProvider, Form, Space, Spin } from 'antd';
import { Checkbox, ConfigProvider, Form, Spin } from 'antd';
import type { CheckboxGroupProps } from 'antd/lib/checkbox';
import classNames from 'classnames';
import React, { useContext, useImperativeHandle, useRef } from 'react';
Expand All @@ -12,6 +12,7 @@ export type GroupProps = {
} & FieldSelectProps;

// 兼容代码-----------
import { useToken } from '@ant-design/pro-provider';
import 'antd/lib/checkbox/style';
//----------------------
/**
Expand Down Expand Up @@ -62,6 +63,8 @@ const FieldCheckbox: ProFieldFC<GroupProps> = (
},
};
});

const { token } = useToken?.();
const checkBoxRef = useRef();
useImperativeHandle(
ref,
Expand Down Expand Up @@ -93,7 +96,18 @@ const FieldCheckbox: ProFieldFC<GroupProps> = (
render(rest.text, { mode, ...rest.fieldProps }, <>{dom}</>) ?? null
);
}
return <Space>{dom}</Space>;
return (
<div
style={{
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
gap: token.marginSM,
}}
>
{dom}
</div>
);
}

if (mode === 'edit') {
Expand Down
106 changes: 49 additions & 57 deletions tests/field/__snapshots__/demo.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -735,55 +735,51 @@ exports[`field demos 📸 renders ./packages/field/src/demos/base.tsx correctly
class="ant-descriptions-item-content"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="display: flex; flex-wrap: wrap; align-items: center; gap: 12px;"
>
<div
class="ant-space-item"
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -2px;"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -2px;"
class="ant-space-item"
style="margin-right: 1px; padding-bottom: 2px;"
>
<div
class="ant-space-item"
style="margin-right: 1px; padding-bottom: 2px;"
<span
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
class="ant-badge-status-dot ant-badge-status-error"
/>
<span
class="ant-badge-status-text"
>
<span
class="ant-badge-status-dot ant-badge-status-error"
/>
<span
class="ant-badge-status-text"
>
未解决
</span>
未解决
</span>
</div>
<span
class="ant-space-item-split"
style="margin-right: 1px; padding-bottom: 2px;"
>
,
</span>
<div
class="ant-space-item"
style="padding-bottom: 2px;"
</div>
<span
class="ant-space-item-split"
style="margin-right: 1px; padding-bottom: 2px;"
>
,
</span>
<div
class="ant-space-item"
style="padding-bottom: 2px;"
>
<span
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
class="ant-badge-status-dot ant-badge-status-success"
/>
<span
class="ant-badge-status-text"
>
<span
class="ant-badge-status-dot ant-badge-status-success"
/>
<span
class="ant-badge-status-text"
>
已解决
</span>
已解决
</span>
</div>
</span>
</div>
</div>
</div>
Expand All @@ -806,33 +802,29 @@ exports[`field demos 📸 renders ./packages/field/src/demos/base.tsx correctly
class="ant-descriptions-item-content"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="display: flex; flex-wrap: wrap; align-items: center; gap: 12px;"
>
<div
class="ant-space-item"
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -2px;"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -2px;"
class="ant-space-item"
style="margin-right: 1px; padding-bottom: 2px;"
>
<div
class="ant-space-item"
style="margin-right: 1px; padding-bottom: 2px;"
>
打开
</div>
<span
class="ant-space-item-split"
style="margin-right: 1px; padding-bottom: 2px;"
>
,
</span>
<div
class="ant-space-item"
style="padding-bottom: 2px;"
>
关闭
</div>
打开
</div>
<span
class="ant-space-item-split"
style="margin-right: 1px; padding-bottom: 2px;"
>
,
</span>
<div
class="ant-space-item"
style="padding-bottom: 2px;"
>
关闭
</div>
</div>
</div>
Expand Down
40 changes: 18 additions & 22 deletions tests/form/__snapshots__/demo.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5056,33 +5056,29 @@ exports[`form demos 📸 renders ./packages/form/src/components/FieldSet/demos/c
class="ant-form-item-control-input-content"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="display: flex; flex-wrap: wrap; align-items: center; gap: 12px;"
>
<div
class="ant-space-item"
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -2px;"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -2px;"
class="ant-space-item"
style="margin-right: 1px; padding-bottom: 2px;"
>
<div
class="ant-space-item"
style="margin-right: 1px; padding-bottom: 2px;"
>
A
</div>
<span
class="ant-space-item-split"
style="margin-right: 1px; padding-bottom: 2px;"
>
,
</span>
<div
class="ant-space-item"
style="padding-bottom: 2px;"
>
B
</div>
A
</div>
<span
class="ant-space-item-split"
style="margin-right: 1px; padding-bottom: 2px;"
>
,
</span>
<div
class="ant-space-item"
style="padding-bottom: 2px;"
>
B
</div>
</div>
</div>
Expand Down
44 changes: 18 additions & 26 deletions tests/table/__snapshots__/demo.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47982,24 +47982,20 @@ exports[`table demos 📸 renders ./packages/table/src/demos/valueType_select.ts
class="ant-table-cell"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="display: flex; flex-wrap: wrap; align-items: center; gap: 12px;"
>
<div
class="ant-space-item"
<span
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
class="ant-badge-status-dot ant-badge-status-error"
/>
<span
class="ant-badge-status-text"
>
<span
class="ant-badge-status-dot ant-badge-status-error"
/>
<span
class="ant-badge-status-text"
>
异常
</span>
异常
</span>
</div>
</span>
</div>
</td>
<td
Expand Down Expand Up @@ -48124,24 +48120,20 @@ exports[`table demos 📸 renders ./packages/table/src/demos/valueType_select.ts
class="ant-table-cell"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="display: flex; flex-wrap: wrap; align-items: center; gap: 12px;"
>
<div
class="ant-space-item"
<span
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
class="ant-badge-status-dot ant-badge-status-error"
/>
<span
class="ant-badge-status-text"
>
<span
class="ant-badge-status-dot ant-badge-status-error"
/>
<span
class="ant-badge-status-text"
>
异常
</span>
异常
</span>
</div>
</span>
</div>
</td>
<td
Expand Down

0 comments on commit 646f4a7

Please sign in to comment.