Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,117 @@ Array [
]
`;

exports[`renders components/suggestion/demo/block.tsx extend context correctly 2`] = `
exports[`renders components/suggestion/demo/block.tsx extend context correctly 2`] = `[]`;

exports[`renders components/suggestion/demo/open.tsx extend context correctly 1`] = `
Array [
<div
class="ant-suggestion ant-suggestion-wrapper"
>
<div
class="ant-sender"
>
<div
class="ant-sender-content"
>
<textarea
class="ant-input ant-input-borderless ant-sender-input"
placeholder="输入 / 获取建议"
style="overflow-y: hidden; resize: none;"
/>
<div
class="ant-sender-actions-list"
>
<div
class="ant-sender-actions-list-presets ant-flex"
>
<button
class="ant-btn ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="arrow-up"
class="anticon anticon-arrow-up"
role="img"
>
<svg
aria-hidden="true"
data-icon="arrow-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"
/>
</svg>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>,
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-cascader-dropdown ant-suggestion ant-select-dropdown-placement-topLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box; min-width: auto;"
>
<div>
<div
class="ant-cascader-menus"
>
<ul
class="ant-cascader-menu"
role="menu"
>
<li
aria-checked="false"
class="ant-cascader-menu-item"
data-path-key="report"
role="menuitemcheckbox"
title="Write a report"
>
<div
class="ant-cascader-menu-item-content"
>
<div
class="ant-suggestion-item ant-flex"
>
Write a report
</div>
</div>
</li>
<li
aria-checked="false"
class="ant-cascader-menu-item"
data-path-key="draw"
role="menuitemcheckbox"
title="Draw a picture"
>
<div
class="ant-cascader-menu-item-content"
>
<div
class="ant-suggestion-item ant-flex"
>
Draw a picture
</div>
</div>
</li>
</ul>
</div>
</div>
</div>,
]
`;

exports[`renders components/suggestion/demo/open.tsx extend context correctly 2`] = `
[
"\`NaN\` is an invalid value for the \`%s\` css style property.",
]
Expand Down
55 changes: 55 additions & 0 deletions components/suggestion/__tests__/__snapshots__/demo.test.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,61 @@ exports[`renders components/suggestion/demo/block.tsx correctly 1`] = `
</div>
`;

exports[`renders components/suggestion/demo/open.tsx correctly 1`] = `
<div
class="ant-suggestion ant-suggestion-wrapper"
>
<div
class="ant-sender"
>
<div
class="ant-sender-content"
>
<textarea
class="ant-input ant-input-borderless ant-sender-input"
placeholder="输入 / 获取建议"
/>
<div
class="ant-sender-actions-list"
>
<div
class="ant-sender-actions-list-presets ant-flex"
>
<button
class="ant-btn ant-btn-circle ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-icon-only ant-sender-actions-btn ant-sender-actions-btn-disabled"
type="button"
>
<span
class="ant-btn-icon"
>
<span
aria-label="arrow-up"
class="anticon anticon-arrow-up"
role="img"
>
<svg
aria-hidden="true"
data-icon="arrow-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M868 545.5L536.1 163a31.96 31.96 0 00-48.3 0L156 545.5a7.97 7.97 0 006 13.2h81c4.6 0 9-2 12.1-5.5L474 300.9V864c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V300.9l218.9 252.3c3 3.5 7.4 5.5 12.1 5.5h81c6.8 0 10.5-8 6-13.2z"
/>
</svg>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
`;

exports[`renders components/suggestion/demo/trigger.tsx correctly 1`] = `
<div
class="ant-suggestion ant-suggestion-wrapper"
Expand Down
7 changes: 7 additions & 0 deletions components/suggestion/demo/open.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
## zh-CN

可以通过 `open` 获取面板是否为打开的状态(主要在非受控场景下使用)。比如你需要在面板打开时禁用Sender的回车提交能力。

## en-US

Can get the open state of the panel by `open` (mainly used in uncontrolled scenarios). For example, you need to disable the enter submit ability of the Sender when the panel is open.
45 changes: 45 additions & 0 deletions components/suggestion/demo/open.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { Sender, Suggestion } from '@ant-design/x';
import type { GetProp } from 'antd';
import React from 'react';

type SuggestionItems = Exclude<GetProp<typeof Suggestion, 'items'>, () => void>;

const suggestions: SuggestionItems = [
Comment on lines +1 to +7
Copy link
Contributor

Choose a reason for hiding this comment

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

medium

The way SuggestionItems is typed is a bit complex and can be simplified. The SuggestionItem type is exported and can be imported directly. This avoids using GetProp and Exclude, making the code clearer and more maintainable.

import { Sender, Suggestion } from '@ant-design/x';
import React from 'react';
import type { SuggestionItem } from '..';

const suggestions: SuggestionItem[] = [

{ label: 'Write a report', value: 'report' },
{ label: 'Draw a picture', value: 'draw' },
];

const Demo: React.FC = () => {
const [value, setValue] = React.useState('');

return (
<Suggestion
items={suggestions}
onSelect={(itemVal) => {
setValue(`[${itemVal}]:`);
}}
>
{({ onTrigger, onKeyDown, open }) => {
return (
<Sender
value={value}
onChange={(nextVal) => {
if (nextVal === '/') {
onTrigger();
} else if (!nextVal) {
onTrigger(false);
}
setValue(nextVal);
}}
// Sender will not submit when press enter if panel is open
submitType={open ? false : 'enter'}
onKeyDown={onKeyDown}
placeholder="输入 / 获取建议"
/>
);
}}
</Suggestion>
);
};

export default Demo;
3 changes: 2 additions & 1 deletion components/suggestion/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cahuSJ4VxvoAAA
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">Basic</code>
<code src="./demo/block.tsx">Block</code>
<code src="./demo/open.tsx">Get Open State</code>
<code src="./demo/trigger.tsx">Customize</code>

## API
Expand All @@ -29,7 +30,7 @@ Common props ref:[Common props](/docs/react/common-props)
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| block | Take up the full width | boolean | false | - |
| children | Custom input box | ({ onTrigger, onKeyDown }) => ReactElement | - | - |
| children | Custom input box | ({ onTrigger, onKeyDown, open }) => ReactElement | - | - |
| items | Suggestion list | SuggestionItem[] \| ((info: T) => SuggestionItem[]) | - | - |
| open | Controlled open panel | boolean | - | - |
| rootClassName | Root element class name | string | - | - |
Expand Down
3 changes: 2 additions & 1 deletion components/suggestion/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export type SuggestionItem = {
export interface RenderChildrenProps<T> {
onTrigger: (info?: T | false) => void;
onKeyDown: (e: React.KeyboardEvent) => void;
open: boolean;
}

export interface SuggestionProps<T = any> {
Expand Down Expand Up @@ -122,7 +123,7 @@ function Suggestion<T = any>(props: SuggestionProps<T>) {
const [activePath, onKeyDown] = useActive(itemList, mergedOpen, isRTL, onInternalChange, onClose);

// =========================== Children ===========================
const childNode = children?.({ onTrigger, onKeyDown });
const childNode = children?.({ onTrigger, onKeyDown, open: mergedOpen });

// ============================ Render ============================
const onInternalOpenChange = (nextOpen: boolean) => {
Expand Down
3 changes: 2 additions & 1 deletion components/suggestion/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cahuSJ4VxvoAAA
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">基本用法</code>
<code src="./demo/block.tsx">整行宽度</code>
<code src="./demo/open.tsx">获取打开状态</code>
<code src="./demo/trigger.tsx">自定义</code>

## API
Expand All @@ -30,7 +31,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*cahuSJ4VxvoAAA
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| block | 是否整行宽度 | boolean | false | - |
| children | 自定义输入框 | ({ onTrigger, onKeyDown }) => ReactElement | - | - |
| children | 自定义输入框 | ({ onTrigger, onKeyDown, open }) => ReactElement | - | - |
| items | 建议项列表 | SuggestionItem[] \| ((info: T) => SuggestionItem[]) | - | - |
| open | 受控打开面板 | boolean | - | - |
| rootClassName | 根元素样式类名 | string | - | - |
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ Array [
class="ant-form ant-form-vertical"
>
<div
class="ant-form-item"
class="ant-form-item ant-form-item-vertical"
>
<div
class="ant-row ant-form-item-row"
Expand Down
Loading