(Go: >> BACK << -|- >> HOME <<)
Skip to content

Commit

Permalink
fix: deprecated clearIcon prop (#43945)
Browse files Browse the repository at this point in the history 
* feat: clearIcon

* feat: clearIcon

* Update components/select/utils/iconUtil.tsx

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: kiner-tang(文辉) <1127031143@qq.com>

* feat: clearIcon

* chore: raise size-limit

---------

Signed-off-by: kiner-tang(文辉) <1127031143@qq.com>
Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: MadCcc <1075746765@qq.com>
  • Loading branch information
@kiner-tang @afc163 @MadCcc
3 people committed Aug 2, 2023
1 parent 5d3b455 commit 24697bb
Show file tree
Hide file tree
Showing 7 changed files with 54 additions and 8 deletions.
6 changes: 4 additions & 2 deletions components/cascader/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,6 +286,7 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
showSuffixIcon,
multiple,
prefixCls,
componentName: 'Cascader',
});

// ===================== Placement =====================
Expand All @@ -298,6 +299,8 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)

const mergedBuiltinPlacements = useBuiltinPlacements(builtinPlacements, popupOverflow);

const mergedAllowClear = allowClear === true ? { clearIcon } : allowClear;

// ==================== Render =====================
const renderNode = (
<RcCascader
Expand Down Expand Up @@ -325,12 +328,11 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
direction={mergedDirection}
placement={memoPlacement}
notFoundContent={mergedNotFoundContent}
allowClear={allowClear}
allowClear={mergedAllowClear}
showSearch={mergedShowSearch}
expandIcon={mergedExpandIcon}
suffixIcon={suffixIcon}
removeIcon={removeIcon}
clearIcon={clearIcon}
loadingIcon={loadingIcon}
checkable={checkable}
dropdownClassName={mergedDropdownClassName}
Expand Down
4 changes: 2 additions & 2 deletions components/date-picker/generatePicker/generateRangePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
popupClassName,
dropdownClassName,
status: customStatus,
clearIcon,
...restProps
} = props;

Expand Down Expand Up @@ -116,12 +117,10 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
placeholder={getRangePlaceholder(locale, picker, placeholder)}
suffixIcon={suffixNode}
clearIcon={<CloseCircleFilled />}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
allowClear
transitionName={`${rootPrefixCls}-slide-up`}
{...restProps}
{...additionalOverrideProps}
Expand All @@ -142,6 +141,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
components={Components}
direction={direction}
dropdownClassName={classNames(hashId, popupClassName || dropdownClassName)}
allowClear={{ clearIcon: clearIcon ?? <CloseCircleFilled /> }}
/>,
);
});
Expand Down
4 changes: 2 additions & 2 deletions components/date-picker/generatePicker/generateSinglePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
dropdownClassName,
disabled: customDisabled,
status: customStatus,
clearIcon,
...restProps
} = props;

Expand Down Expand Up @@ -139,12 +140,10 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
placeholder={getPlaceholder(locale, mergedPicker, placeholder)}
suffixIcon={suffixNode}
dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
clearIcon={<CloseCircleFilled />}
prevIcon={<span className={`${prefixCls}-prev-icon`} />}
nextIcon={<span className={`${prefixCls}-next-icon`} />}
superPrevIcon={<span className={`${prefixCls}-super-prev-icon`} />}
superNextIcon={<span className={`${prefixCls}-super-next-icon`} />}
allowClear
transitionName={`${rootPrefixCls}-slide-up`}
{...additionalProps}
{...restProps}
Expand Down Expand Up @@ -178,6 +177,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
rootClassName,
popupClassName || dropdownClassName,
)}
allowClear={{ clearIcon: clearIcon ?? <CloseCircleFilled /> }}
/>,
);
},
Expand Down
6 changes: 5 additions & 1 deletion components/select/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ const InternalSelect = <
popupMatchSelectWidth,
direction: propDirection,
style,
allowClear,
...props
}: SelectProps<ValueType, OptionType>,
ref: React.Ref<BaseSelectRef>,
Expand Down Expand Up @@ -170,8 +171,11 @@ const InternalSelect = <
showSuffixIcon,
prefixCls,
showArrow: props.showArrow,
componentName: 'Select',
});

const mergedAllowClear = allowClear === true ? { clearIcon } : allowClear;

const selectProps = omit(props as typeof props & { itemIcon: React.ReactNode }, [
'suffixIcon',
'itemIcon',
Expand Down Expand Up @@ -259,7 +263,7 @@ const InternalSelect = <
suffixIcon={suffixIcon}
menuItemSelectedIcon={itemIcon}
removeIcon={removeIcon}
clearIcon={clearIcon}
allowClear={mergedAllowClear}
notFoundContent={mergedNotFound}
className={mergedClassName}
getPopupContainer={getPopupContainer || getContextPopupContainer}
Expand Down
11 changes: 11 additions & 0 deletions components/select/utils/iconUtil.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
import SearchOutlined from '@ant-design/icons/SearchOutlined';
import type { ReactNode } from 'react';
import * as React from 'react';
import warning from '../../_util/warning';

type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);

Expand All @@ -21,6 +22,7 @@ export default function getIcons({
showSuffixIcon,
feedbackIcon,
showArrow,
componentName,
}: {
suffixIcon?: React.ReactNode;
clearIcon?: RenderNode;
Expand All @@ -33,7 +35,16 @@ export default function getIcons({
prefixCls: string;
showSuffixIcon?: boolean;
showArrow?: boolean;
componentName: string;
}) {
if (process.env.NODE_ENV !== 'production') {
warning(
!clearIcon,
componentName,
'`clearIcon` is deprecated, please use `allowClear={{ clearIcon: React.ReactNode }}` instead.',
);
}

// Clear Icon
const mergedClearIcon = clearIcon ?? <CloseCircleFilled />;

Expand Down
25 changes: 25 additions & 0 deletions components/time-picker/__tests__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,31 @@ exports[`TimePicker not render clean icon when allowClear is false 1`] = `
</svg>
</span>
</span>
<span
class="ant-picker-clear"
role="button"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
/>
</svg>
</span>
</span>
</div>
</div>
`;
Expand Down
6 changes: 5 additions & 1 deletion components/tree-select/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ const InternalTreeSelect = <
builtinPlacements,
dropdownMatchSelectWidth,
popupMatchSelectWidth,
allowClear,
...props
}: TreeSelectProps<ValueType, OptionType>,
ref: React.Ref<BaseSelectRef>,
Expand Down Expand Up @@ -188,8 +189,11 @@ const InternalTreeSelect = <
hasFeedback,
feedbackIcon,
prefixCls,
componentName: 'TreeSelect',
});

const mergedAllowClear = allowClear === true ? { clearIcon } : allowClear;

// ===================== Empty =====================
let mergedNotFound: React.ReactNode;
if (notFoundContent !== undefined) {
Expand Down Expand Up @@ -268,7 +272,7 @@ const InternalTreeSelect = <
multiple={isMultiple}
placement={memoizedPlacement}
removeIcon={removeIcon}
clearIcon={clearIcon}
allowClear={mergedAllowClear}
switcherIcon={renderSwitcherIcon}
showTreeIcon={treeIcon as any}
notFoundContent={mergedNotFound}
Expand Down

0 comments on commit 24697bb

Please sign in to comment.