Skip to content

Commit

Permalink
feat(form): LightFilter support allowClear (ant-design#974)
Browse files Browse the repository at this point in the history 
* feat: support allowClear

* chore: update lightfilter demo test snapshot

* chore: add allowClear test case
  • Loading branch information
Yu committed Nov 14, 2020
1 parent 0487e2b commit 6ef984a
Show file tree
Hide file tree
Showing 16 changed files with 113 additions and 75 deletions.
2 changes: 2 additions & 0 deletions packages/field/src/components/DatePicker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ const FieldDatePicker: ProFieldFC<{
disabled,
value,
onChange,
allowClear,
placeholder = intl.getMessage('tableForm.selectPlaceholder', '请选择'),
} = fieldProps;
const momentValue = parseValueToMoment(value, format) as moment.Moment;
Expand Down Expand Up @@ -95,6 +96,7 @@ const FieldDatePicker: ProFieldFC<{
onChange(null);
}
}}
allowClear={allowClear}
bordered={bordered}
expanded={open}
/>
Expand Down
2 changes: 2 additions & 0 deletions packages/field/src/components/RangePicker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ const FieldRangePicker: ProFieldFC<{
const {
disabled,
onChange,
allowClear,
placeholder = intl.getMessage('tableForm.selectPlaceholder', '请选择'),
} = fieldProps;
let dom;
Expand Down Expand Up @@ -106,6 +107,7 @@ const FieldRangePicker: ProFieldFC<{
placeholder={placeholder}
size={size}
value={valueStr}
allowClear={allowClear}
onClear={() => {
onChange(null);
setActivePickerIndex(0);
Expand Down
3 changes: 3 additions & 0 deletions packages/field/src/components/Select/LightSelect/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const LightSelect: React.ForwardRefRenderFunction<any, SelectProps<any> & LightS
bordered,
options,
onSearch,
allowClear,
...restProps
} = props;
const { placeholder = label } = props;
Expand Down Expand Up @@ -68,6 +69,7 @@ const LightSelect: React.ForwardRefRenderFunction<any, SelectProps<any> & LightS
>
<Select
{...restProps}
allowClear={allowClear}
value={value}
mode={mode}
size={size}
Expand Down Expand Up @@ -132,6 +134,7 @@ const LightSelect: React.ForwardRefRenderFunction<any, SelectProps<any> & LightS
disabled={disabled}
expanded={open}
bordered={bordered}
allowClear={allowClear}
value={Array.isArray(value) ? value.map((v) => valueMap[v] || v) : valueMap[value] || value}
onClear={() => {
onChange?.(undefined, undefined as any);
Expand Down
3 changes: 2 additions & 1 deletion packages/field/src/components/TimePicker/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const FieldTimePicker: ProFieldFC<{
}
if (mode === 'edit' || mode === 'update') {
let dom;
const { disabled, onChange, placeholder } = fieldProps;
const { disabled, onChange, placeholder, allowClear } = fieldProps;

if (light) {
dom = (
Expand Down Expand Up @@ -62,6 +62,7 @@ const FieldTimePicker: ProFieldFC<{
placeholder={placeholder}
size={size}
value={valueStr}
allowClear={allowClear}
onClear={() => {
if (onChange) {
onChange(null);
Expand Down
1 change: 0 additions & 1 deletion packages/field/src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,6 @@ type BaseProFieldFC = {
* label
*/
label?: React.ReactNode;

/**
* 映射值的类型
*/
Expand Down
7 changes: 7 additions & 0 deletions packages/form/src/BaseForm/LightWrapper/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,11 @@ const LightWrapper: React.ForwardRefRenderFunction<any, LightWrapperProps> = (pr
return children as JSX.Element;
}

let allowClear;
if (children && React.isValidElement(children)) {
allowClear = children.props.fieldProps?.allowClear;
}

return (
<FilterDropdown
disabled={disabled}
Expand All @@ -93,6 +98,7 @@ const LightWrapper: React.ForwardRefRenderFunction<any, LightWrapperProps> = (pr
disabled={disabled}
expanded={open}
formatter={labelFormatter}
allowClear={allowClear}
/>
}
footer={{
Expand All @@ -115,6 +121,7 @@ const LightWrapper: React.ForwardRefRenderFunction<any, LightWrapperProps> = (pr
onChange: (e: any) => {
setTempValue(e?.target ? e.target.value : e);
},
allowClear,
...children.props.fieldProps,
},
})
Expand Down
4 changes: 4 additions & 0 deletions packages/form/src/BaseForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ const WIDTH_SIZE_ENUM = {
// 给控件扩展的通用的属性
export interface ExtendsProps {
secondary?: boolean;
allowClear?: boolean;
bordered?: boolean;
colSize?: number;
/**
Expand Down Expand Up @@ -126,6 +127,7 @@ export function createField<P extends ProFormItemProps = any>(
ignoreFormItem,
transform,
readonly,
allowClear,
...rest
} = props;
const {
Expand Down Expand Up @@ -186,6 +188,7 @@ export function createField<P extends ProFormItemProps = any>(
// 比如 ProFormSelect 的 request
{...(rest as P)}
fieldProps={{
allowClear,
...realFieldProps,
className: classnames(realFieldProps?.className, {
[`pro-field-${width}`]: width && WIDTH_SIZE_ENUM[width],
Expand Down Expand Up @@ -222,6 +225,7 @@ export function createField<P extends ProFormItemProps = any>(
>
<LightWrapper
{...realFieldProps}
allowClear={allowClear}
bordered={bordered}
size={size}
light={proFieldProps?.light}
Expand Down
3 changes: 2 additions & 1 deletion packages/form/src/demos/light-filter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export default () => {
name="sex"
label="性别"
showSearch
allowClear={false}
valueEnum={{
man: '男',
woman: '女',
Expand All @@ -63,7 +64,7 @@ export default () => {
<ProFormText name="name1" label="名称" />
<ProFormSwitch name="open" label="开关" secondary />
<ProFormText name="name2" label="地址" secondary />
<ProFormDatePicker name="name3" label="日期" />
<ProFormDatePicker name="name3" label="不能清空的日期" allowClear={false} />
<ProFormDateRangePicker name="date" label="日期范围" />
<ProFormDateTimePicker name="datetime" label="日期时间" />
<ProFormTimePicker name="time" label="时间" />
Expand Down
4 changes: 3 additions & 1 deletion packages/form/src/form.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,9 @@ ProForm 自带的 Filed ,与 valueType 基本上一一对应。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| width | Field 的长度，我们归纳了常用的 Field 长度以及适合的场景，支持了一些枚举 "xs" , "s" , "m" , "l" , "x" | `number \| "xs" \| "s" \| "m" \| "l" \| "x"` | - |
| tooltip | 会在 label 旁增加一个 icon，悬浮后展示配置的信息 | `string \| tooltipProps` |
| tooltip | 会在 label 旁增加一个 icon，悬浮后展示配置的信息 | `string \| tooltipProps` | - |
| secondary | 是否是次要控件，只针对 LightFilter 下有效 | `boolean` | `false` |
| allowClear | 支持清除，针对 LightFilter 下有效，主动设置情况下同时也会透传给 `fieldProps` | `boolean` | `true` |

### 宽度

Expand Down
1 change: 1 addition & 0 deletions packages/form/src/interface.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export interface ProFormItemProps<T = {}> extends FormItemProps {
fieldProps?: FieldProps & T;
placeholder?: string | string[];
secondary?: boolean;
allowClear?: boolean;
disabled?: boolean;
/**
* - auto 使用组件默认的宽度
Expand Down
2 changes: 1 addition & 1 deletion packages/utils/src/components/FieldLabel/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
&-active {
padding: 0 12px;
background-color: fade(@black, 4%);
&:hover:not(.@{pro-core-field-label}-disabled) {
&.@{pro-core-field-label}-allow-clear:hover:not(.@{pro-core-field-label}-disabled) {
.@{pro-core-field-label}-arrow {
display: none;
}
Expand Down
5 changes: 4 additions & 1 deletion packages/utils/src/components/FieldLabel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export interface FieldLabelProps {
formatter?: (value: any) => string;
style?: React.CSSProperties;
bordered?: boolean;
allowClear?: boolean;
}

const FieldLabel: React.FC<FieldLabelProps> = (props) => {
Expand All @@ -34,6 +35,7 @@ const FieldLabel: React.FC<FieldLabelProps> = (props) => {
style,
formatter,
bordered,
allowClear = true,
} = props;
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('pro-core-field-label');
Expand Down Expand Up @@ -99,13 +101,14 @@ const FieldLabel: React.FC<FieldLabelProps> = (props) => {
[`${prefixCls}-active`]: !!value,
[`${prefixCls}-disabled`]: disabled,
[`${prefixCls}-bordered`]: bordered,
[`${prefixCls}-allow-clear`]: allowClear,
},
className,
)}
style={style}
>
{getTextByValue(label, value)}
{value && (
{value && allowClear && (
<CloseOutlined
className={classNames(`${prefixCls}-icon`, `${prefixCls}-close`)}
onClick={(e) => {
Expand Down
71 changes: 13 additions & 58 deletions tests/form/__snapshots__/demo.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7471,7 +7471,7 @@ exports[`form demos renders ./packages/form/src/demos/light-filter.tsx correctly
class="ant-pro-field-select-light-select ant-pro-field-select-light-select-searchable"
>
<div
class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
class="ant-select ant-select-single ant-select-show-arrow ant-select-show-search"
text=""
>
<div
Expand Down Expand Up @@ -7621,7 +7621,7 @@ exports[`form demos renders ./packages/form/src/demos/light-filter.tsx correctly
</div>
</div>
<span
class="ant-pro-core-field-label ant-pro-core-field-label-middle"
class="ant-pro-core-field-label ant-pro-core-field-label-middle ant-pro-core-field-label-allow-clear"
>
地区
<span
Expand Down Expand Up @@ -7670,7 +7670,7 @@ exports[`form demos renders ./packages/form/src/demos/light-filter.tsx correctly
class="ant-dropdown-trigger ant-pro-core-field-dropdown-label"
>
<span
class="ant-pro-core-field-label ant-pro-core-field-label-middle"
class="ant-pro-core-field-label ant-pro-core-field-label-middle ant-pro-core-field-label-allow-clear"
>
数量
<span
Expand Down Expand Up @@ -7719,7 +7719,7 @@ exports[`form demos renders ./packages/form/src/demos/light-filter.tsx correctly
class="ant-dropdown-trigger ant-pro-core-field-dropdown-label"
>
<span
class="ant-pro-core-field-label ant-pro-core-field-label-middle ant-pro-core-field-label-active"
class="ant-pro-core-field-label ant-pro-core-field-label-middle ant-pro-core-field-label-active ant-pro-core-field-label-allow-clear"
>
<span
title="20~80"
Expand Down Expand Up @@ -7793,7 +7793,7 @@ exports[`form demos renders ./packages/form/src/demos/light-filter.tsx correctly
class="ant-dropdown-trigger ant-pro-core-field-dropdown-label"
>
<span
class="ant-pro-core-field-label ant-pro-core-field-label-middle ant-pro-core-field-label-active"
class="ant-pro-core-field-label ant-pro-core-field-label-middle ant-pro-core-field-label-active ant-pro-core-field-label-allow-clear"
>
<span
title="yutingzhao1991"
Expand Down Expand Up @@ -7875,7 +7875,7 @@ exports[`form demos renders ./packages/form/src/demos/light-filter.tsx correctly
<input
autocomplete="off"
id="name3"
placeholder="日期"
placeholder="不能清空的日期"
readonly=""
size="12"
title="2020-08-19"
Expand Down Expand Up @@ -7905,58 +7905,13 @@ exports[`form demos renders ./packages/form/src/demos/light-filter.tsx correctly
</svg>
</span>
</span>
<span
class="ant-picker-clear"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
</span>
</div>
</div>
<span
class="ant-pro-core-field-label ant-pro-core-field-label-middle ant-pro-core-field-label-active"
>
<span>
日期: 2020-08-19
</span>
<span
aria-label="close"
class="anticon anticon-close ant-pro-core-field-label-icon ant-pro-core-field-label-close"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
class=""
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
不能清空的日期: 2020-08-19
</span>
<span
aria-label="down"
Expand Down Expand Up @@ -8088,7 +8043,7 @@ exports[`form demos renders ./packages/form/src/demos/light-filter.tsx correctly
</span>
</div>
<span
class="ant-pro-core-field-label ant-pro-core-field-label-middle"
class="ant-pro-core-field-label ant-pro-core-field-label-middle ant-pro-core-field-label-allow-clear"
>
日期范围
<span
Expand Down Expand Up @@ -8178,7 +8133,7 @@ exports[`form demos renders ./packages/form/src/demos/light-filter.tsx correctly
</div>
</div>
<span
class="ant-pro-core-field-label ant-pro-core-field-label-middle"
class="ant-pro-core-field-label ant-pro-core-field-label-middle ant-pro-core-field-label-allow-clear"
>
日期时间
<span
Expand Down Expand Up @@ -8271,7 +8226,7 @@ exports[`form demos renders ./packages/form/src/demos/light-filter.tsx correctly
</div>
</div>
<span
class="ant-pro-core-field-label ant-pro-core-field-label-middle"
class="ant-pro-core-field-label ant-pro-core-field-label-middle ant-pro-core-field-label-allow-clear"
>
时间
<span
Expand Down Expand Up @@ -8308,7 +8263,7 @@ exports[`form demos renders ./packages/form/src/demos/light-filter.tsx correctly
class="ant-dropdown-trigger ant-pro-core-field-dropdown-label"
>
<span
class="ant-pro-core-field-label ant-pro-core-field-label-middle"
class="ant-pro-core-field-label ant-pro-core-field-label-middle ant-pro-core-field-label-allow-clear"
>
更多筛选
<span
Expand Down Expand Up @@ -8456,7 +8411,7 @@ exports[`form demos renders ./packages/form/src/demos/light-filter-bordered.tsx
</span>
</div>
<span
class="ant-pro-core-field-label ant-pro-core-field-label-middle ant-pro-core-field-label-active ant-pro-core-field-label-bordered"
class="ant-pro-core-field-label ant-pro-core-field-label-middle ant-pro-core-field-label-active ant-pro-core-field-label-bordered ant-pro-core-field-label-allow-clear"
>
<span
title="男"
Expand Down Expand Up @@ -8672,7 +8627,7 @@ exports[`form demos renders ./packages/form/src/demos/light-filter-bordered.tsx
</div>
</div>
<span
class="ant-pro-core-field-label ant-pro-core-field-label-middle ant-pro-core-field-label-bordered"
class="ant-pro-core-field-label ant-pro-core-field-label-middle ant-pro-core-field-label-bordered ant-pro-core-field-label-allow-clear"
>
日期
<span
Expand Down
Loading

0 comments on commit 6ef984a

Please sign in to comment.