Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support prefix prop #884

Merged
merged 1 commit into from
Oct 21, 2024
Merged

feat: support prefix prop #884

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/examples/customize.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ class Customize extends React.Component<{}, DateRangeState> {
// format="YYYY/MM/DD"
format={['YYYY-MM-DD', 'YYYY/MM/DD']}
allowClear
prefix="Foobar"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Picker 组件未正确实现 prefix 属性

在执行验证脚本后，未找到 prefix 属性在 Picker 组件中的实现。这意味着 prefix 属性可能尚未被正确添加或处理。

建议：

  • 检查 Picker 组件的实现文件，确保 prefix 属性已正确添加并处理。
  • 确认 PickerProps 接口中已包含 prefix 属性的声明。
🔗 Analysis chain

新增 prefix 属性的实现

新增的 prefix 属性为 Picker 组件增加了前缀功能，这可以提高组件的灵活性和可定制性。

建议：

  1. 确保 prefix 属性在 Picker 组件的类型定义中已正确声明。
  2. 在组件文档中添加关于 prefix 属性的使用说明和示例。
  3. 考虑添加一个测试用例，以验证 prefix 属性的正确渲染和功能。

请运行以下脚本来验证 prefix 属性的实现：

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 描述：验证 Picker 组件是否正确实现了 prefix 属性

# 测试：搜索 Picker 组件的实现，预期：找到 prefix 属性的处理逻辑
ast-grep --pattern $'const Picker = ($_) => {
  $$$
  prefix={$_}
  $$$
}'

# 测试：搜索 Picker 组件的类型定义，预期：找到 prefix 属性的类型声明
rg -A 5 'interface PickerProps'

Length of output: 603

clearIcon={<span>X</span>}
suffixIcon={<span>O</span>}
prevIcon={<span>&lt;</span>}
Expand Down
2 changes: 2 additions & 0 deletions src/PickerInput/Selector/RangeSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ function RangeSelector<DateType extends object = any>(
const {
id,

prefix,
clearIcon,
suffixIcon,
separator = '~',
Expand Down Expand Up @@ -238,6 +239,7 @@ function RangeSelector<DateType extends object = any>(
onMouseDown?.(e);
}}
>
{prefix && <div className={`${prefixCls}-prefix`}>{prefix}</div>}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

**缺少 `prefix` 属性的测试用例**

未发现针对 `prefix` 属性的测试用例。建议为此功能添加相应的测试，以确保其正确性并防止未来的回归。
🔗 Analysis chain

prefix 元素的渲染实现正确

prefix 元素的条件渲染实现正确，并且使用了 prefixCls 来保持类名的一致性，这很好。

建议为这个新功能添加测试用例，以确保其正确性和防止未来的回归。可以运行以下脚本来检查是否已经添加了相关测试：

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 描述：检查是否已添加 prefix 属性的测试用例

# 测试：在测试文件中搜索 prefix 相关的测试
rg -A 5 'test.*prefix' tests

Length of output: 255

<Input
ref={inputStartRef}
{...getInputProps(0)}
Expand Down
2 changes: 2 additions & 0 deletions src/PickerInput/Selector/SingleSelector/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ function SingleSelector<DateType extends object = any>(

open,

prefix,
clearIcon,
suffixIcon,
activeHelp,
Expand Down Expand Up @@ -224,6 +225,7 @@ function SingleSelector<DateType extends object = any>(
onMouseDown?.(e);
}}
>
{prefix && <div className={`${prefixCls}-prefix`}>{prefix}</div>}
{selectorNode}
</div>
);
Expand Down
3 changes: 3 additions & 0 deletions src/interface.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,6 +302,7 @@ export type SharedHTMLAttrs = Omit<
| 'max'
| 'onKeyDown'
| 'size'
| 'prefix'
>;

export type PickerFocusEventHandler = (e: React.FocusEvent<HTMLElement>, info: BaseInfo) => void;
Expand Down Expand Up @@ -354,6 +355,7 @@ export interface SharedPickerProps<DateType extends object = any>
};

// Icons
prefix?: React.ReactNode;
suffixIcon?: React.ReactNode;
allowClear?:
| boolean
Expand Down Expand Up @@ -468,6 +470,7 @@ export type OnOpenChange = (open: boolean, config?: OpenConfig) => void;
export interface SelectorProps<DateType = any> extends SharedHTMLAttrs {
picker: PickerMode;

prefix?: React.ReactNode;
clearIcon?: React.ReactNode;
suffixIcon?: React.ReactNode;
className?: string;
Expand Down
10 changes: 10 additions & 0 deletions tests/picker.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -582,6 +582,16 @@ describe('Picker.Basic', () => {
});
});

it('prefix', () => {
render(
<DayPicker
prefix={<span className="prefix" />}
allowClear
/>,
);
expect(document.querySelector('.prefix')).toBeInTheDocument();
});

it('icon', () => {
expect(errorSpy).not.toHaveBeenCalled();
render(
Expand Down
10 changes: 10 additions & 0 deletions tests/range.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -704,6 +704,16 @@ describe('Picker.Range', () => {
expect(isOpen()).toBeFalsy();
});

it('prefix', () => {
render(
<DayRangePicker
prefix={<span className="prefix" />}
allowClear
/>,
);
expect(document.querySelector('.prefix')).toBeInTheDocument();
});

it('icon', () => {
const { container } = render(
<DayRangePicker
Expand Down