Skip to content

Commit

Permalink
feat: popupconfirm components add trigger API
Browse files Browse the repository at this point in the history 
fix Tencent#2351
  • Loading branch information
@Ali-ovo
Ali-ovo committed Jul 13, 2023
1 parent e9a2047 commit ec820f6
Show file tree
Hide file tree
Showing 7 changed files with 156 additions and 68 deletions.
1 change: 0 additions & 1 deletion src/popconfirm/Popconfirm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ const Popconfirm = forwardRef((props: PopconfirmProps, ref: React.RefObject<Popu
ref={ref}
{...props}
visible={visible}
trigger="click"
onVisibleChange={(visible) => setVisible(visible)}
overlayClassName={classNames(`${classPrefix}-popconfirm`)}
content={
Expand Down
1 change: 1 addition & 0 deletions src/popconfirm/__tests__/popconfirm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ describe('Popconfirm 组件测试', () => {
const { getByText, queryByTestId, queryByText } = render(
<Popconfirm
placement="top"
trigger="click"
content={<div data-testid={testId}>{text}</div>}
onCancel={onCancelMock}
onConfirm={onConfirmMock}
Expand Down
25 changes: 24 additions & 1 deletion src/popconfirm/_usage/props.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,29 @@
}
]
},
{
"name": "trigger",
"type": "enum",
"defaultValue": "hover",
"options": [
{
"label": "hover",
"value": "hover"
},
{
"label": "click",
"value": "click"
},
{
"label": "focus",
"value": "focus"
},
{
"label": "context-menu",
"value": "context-menu"
}
]
},
{
"name": "showArrow",
"type": "Boolean",
Expand Down Expand Up @@ -91,4 +114,4 @@
"defaultValue": false,
"options": []
}
]
]
1 change: 1 addition & 0 deletions src/popconfirm/popconfirm.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ placement | String | top | options：top/left/right/bottom/top-left/top-right/bo
popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/popconfirm/type.ts) | N
showArrow | Boolean | true | \- | N
theme | String | default | options：default/warning/danger | N
trigger | String | hover | options：hover/click/focus/mousedown/context-menu | N
triggerElement | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
visible | Boolean | - | \- | N
defaultVisible | Boolean | - | uncontrolled property | N
Expand Down
1 change: 1 addition & 0 deletions src/popconfirm/popconfirm.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ placement | String | top | 浮层出现位置。可选项：top/left/right/botto
popupProps | Object | - | 透传 Popup 组件属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/popconfirm/type.ts) | N
showArrow | Boolean | true | 是否显示浮层箭头 | N
theme | String | default | 文字提示风格。可选项：default/warning/danger | N
trigger | String | hover | 触发浮层出现的方式。可选项：hover/click/focus/mousedown/context-menu | N
triggerElement | TNode | - | 触发元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
visible | Boolean | - | 是否显示气泡确认框 | N
defaultVisible | Boolean | - | 是否显示气泡确认框。非受控属性 | N
Expand Down
5 changes: 5 additions & 0 deletions src/popconfirm/type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,11 @@ export interface TdPopconfirmProps {
* @default default
*/
theme?: 'default' | 'warning' | 'danger';
/**
* 触发浮层出现的方式
* @default hover
*/
trigger?: 'hover' | 'click' | 'focus' | 'mousedown' | 'context-menu';
/**
* 触发元素
*/
Expand Down
190 changes: 124 additions & 66 deletions test/snap/__snapshots__/csr.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240662,7 +240662,7 @@ exports[`csr snapshot test > csr test src/table/_example/pagination-ajax.jsx 1`]
/>
<div>
<div
class="t-table t-table--loading"
class="t-table"
style="position: relative;"
>
<div
Expand Down Expand Up @@ -240761,7 +240761,21 @@ exports[`csr snapshot test > csr test src/table/_example/pagination-ajax.jsx 1`]
</thead>
<tbody
class="t-table__body"
/>
>
<tr
class="t-table__empty-row"
>
<td
colspan="5"
>
<div
class="t-table__empty"
>
Empty Data
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div
Expand All @@ -240777,7 +240791,7 @@ exports[`csr snapshot test > csr test src/table/_example/pagination-ajax.jsx 1`]
<div
class="t-pagination__total"
>
Total 0 items
Total 120 items
</div>
<div
class="t-pagination__select"
Expand Down Expand Up @@ -240859,9 +240873,51 @@ exports[`csr snapshot test > csr test src/table/_example/pagination-ajax.jsx 1`]
>
1
</li>
<li
class="t-pagination__number"
>
2
</li>
<li
class="t-pagination__number"
>
3
</li>
<li
class="t-pagination__number"
>
4
</li>
<li
class="t-pagination__number"
>
5
</li>
<li
class="t-pagination__number t-pagination__number--more"
>
<svg
class="t-icon t-icon-ellipsis"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</li>
<li
class="t-pagination__number"
>
24
</li>
</ul>
<div
class="t-pagination__btn t-pagination__btn-next t-is-disabled"
class="t-pagination__btn t-pagination__btn-next"
>
<svg
class="t-icon t-icon-chevron-right"
Expand Down Expand Up @@ -240910,7 +240966,7 @@ exports[`csr snapshot test > csr test src/table/_example/pagination-ajax.jsx 1`]
<span
class="t-input-adornment__text"
>
/ 1
/ 24
</span>
</span>
</div>
Expand All @@ -240924,40 +240980,13 @@ exports[`csr snapshot test > csr test src/table/_example/pagination-ajax.jsx 1`]
/>
<div
class="t-portal-wrapper"
>
<div
class="t-loading t-loading--center t-size-s t-loading--full t-loading__overlay"
>
<svg
class="t-loading__gradient t-icon-loading"
height="1em"
version="1.1"
viewBox="0 0 12 12"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<foreignobject
height="12"
width="12"
x="0"
y="0"
>
<div
class="t-loading__gradient-conic"
/>
</foreignobject>
</svg>
<div
class="t-loading__text"
/>
</div>
</div>
/>
</div>
</div>
</body>,
"container": <div>
<div
class="t-table t-table--loading"
class="t-table"
style="position: relative;"
>
<div
Expand Down Expand Up @@ -241056,7 +241085,21 @@ exports[`csr snapshot test > csr test src/table/_example/pagination-ajax.jsx 1`]
</thead>
<tbody
class="t-table__body"
/>
>
<tr
class="t-table__empty-row"
>
<td
colspan="5"
>
<div
class="t-table__empty"
>
Empty Data
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div
Expand All @@ -241072,7 +241115,7 @@ exports[`csr snapshot test > csr test src/table/_example/pagination-ajax.jsx 1`]
<div
class="t-pagination__total"
>
Total 0 items
Total 120 items
</div>
<div
class="t-pagination__select"
Expand Down Expand Up @@ -241154,9 +241197,51 @@ exports[`csr snapshot test > csr test src/table/_example/pagination-ajax.jsx 1`]
>
1
</li>
<li
class="t-pagination__number"
>
2
</li>
<li
class="t-pagination__number"
>
3
</li>
<li
class="t-pagination__number"
>
4
</li>
<li
class="t-pagination__number"
>
5
</li>
<li
class="t-pagination__number t-pagination__number--more"
>
<svg
class="t-icon t-icon-ellipsis"
fill="none"
height="1em"
viewBox="0 0 16 16"
width="1em"
>
<path
d="M3 9a1 1 0 110-2 1 1 0 010 2zM7 8a1 1 0 102 0 1 1 0 00-2 0zM12 8a1 1 0 102 0 1 1 0 00-2 0z"
fill="currentColor"
fill-opacity="0.9"
/>
</svg>
</li>
<li
class="t-pagination__number"
>
24
</li>
</ul>
<div
class="t-pagination__btn t-pagination__btn-next t-is-disabled"
class="t-pagination__btn t-pagination__btn-next"
>
<svg
class="t-icon t-icon-chevron-right"
Expand Down Expand Up @@ -241205,7 +241290,7 @@ exports[`csr snapshot test > csr test src/table/_example/pagination-ajax.jsx 1`]
<span
class="t-input-adornment__text"
>
/ 1
/ 24
</span>
</span>
</div>
Expand All @@ -241219,34 +241304,7 @@ exports[`csr snapshot test > csr test src/table/_example/pagination-ajax.jsx 1`]
/>
<div
class="t-portal-wrapper"
>
<div
class="t-loading t-loading--center t-size-s t-loading--full t-loading__overlay"
>
<svg
class="t-loading__gradient t-icon-loading"
height="1em"
version="1.1"
viewBox="0 0 12 12"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<foreignobject
height="12"
width="12"
x="0"
y="0"
>
<div
class="t-loading__gradient-conic"
/>
</foreignobject>
</svg>
<div
class="t-loading__text"
/>
</div>
</div>
/>
</div>
</div>,
"debug": [Function],
Expand Down

0 comments on commit ec820f6

Please sign in to comment.