antd-hooks 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +64 -0
- package/dist/hooks/createPromiseHooks.d.ts +23 -0
- package/dist/hooks/useLeaveConfirmation.d.ts +17 -0
- package/dist/index.esm.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# 使用 npm
|
|
2
|
+
npm install antd-hooks
|
|
3
|
+
|
|
4
|
+
# 使用 yarn
|
|
5
|
+
yarn add antd-hooks
|
|
6
|
+
|
|
7
|
+
# 使用 pnpm
|
|
8
|
+
pnpm add antd-hooks
|
|
9
|
+
|
|
10
|
+
```
|
|
11
|
+
import React from 'react';
|
|
12
|
+
import { useTable, createHooks, useLeaveConfirmation } from 'antd-hooks';
|
|
13
|
+
import { Table, Button, Modal, Form, Input } from 'antd';
|
|
14
|
+
|
|
15
|
+
// 使用 useTable 管理表格状态
|
|
16
|
+
function UserTable() {
|
|
17
|
+
const { tableProps, refresh, loading } = useTable({
|
|
18
|
+
url: '/api/users',
|
|
19
|
+
columns: [
|
|
20
|
+
{ title: '姓名', dataIndex: 'name' },
|
|
21
|
+
{ title: '年龄', dataIndex: 'age' },
|
|
22
|
+
],
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
return <Table {...tableProps} />;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// 使用 createHooks 创建命令式弹窗
|
|
29
|
+
const UserModal = ({ close, user }) => {
|
|
30
|
+
const [form] = Form.useForm();
|
|
31
|
+
|
|
32
|
+
const handleSubmit = () => {
|
|
33
|
+
form.validateFields().then(values => {
|
|
34
|
+
console.log('表单数据:', values);
|
|
35
|
+
close();
|
|
36
|
+
});
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<Modal open title="用户信息" onOk={handleSubmit} onCancel={close}>
|
|
41
|
+
<Form form={form} initialValues={user}>
|
|
42
|
+
<Form.Item name="name" label="姓名">
|
|
43
|
+
<Input />
|
|
44
|
+
</Form.Item>
|
|
45
|
+
</Form>
|
|
46
|
+
</Modal>
|
|
47
|
+
);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
const showUserModal = createHooks(UserModal);
|
|
51
|
+
|
|
52
|
+
// 在组件中使用
|
|
53
|
+
function App() {
|
|
54
|
+
useLeaveConfirmation(true, '确定要离开吗？未保存的数据将会丢失。');
|
|
55
|
+
|
|
56
|
+
return (
|
|
57
|
+
<div>
|
|
58
|
+
<Button onClick={() => showUserModal({ user: { name: '示例用户' } })}>
|
|
59
|
+
编辑用户
|
|
60
|
+
</Button>
|
|
61
|
+
<UserTable />
|
|
62
|
+
</div>
|
|
63
|
+
);
|
|
64
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { ComponentType } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* @interface PromiseModalProps
|
|
4
|
+
* 注入到被封装组件（Modal, Drawer 等）的 Props。
|
|
5
|
+
* T: 组件传入的自定义 Props 类型。
|
|
6
|
+
* R: Promise resolve 时返回的数据类型。
|
|
7
|
+
*/
|
|
8
|
+
export interface PromiseModalProps<R = any> {
|
|
9
|
+
/** 外部控制模态框的打开状态 (始终为 true，除非手动 update) */
|
|
10
|
+
open?: boolean;
|
|
11
|
+
/** 当用户点击确定或完成操作时调用，传递结果 R，会触发 Promise resolve 并销毁组件 */
|
|
12
|
+
onResolve: (result: R) => void;
|
|
13
|
+
/** 当用户点击取消或关闭时调用，会触发 Promise reject 并销毁组件 */
|
|
14
|
+
onReject: (error?: Error) => void;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* 创建一个支持 Promise 的命令式 Hooks（例如 showModal, showDrawer）。
|
|
18
|
+
* @template T 传入被封装组件的自定义 Props 类型。
|
|
19
|
+
* @template R Promise resolve 时返回的结果类型。
|
|
20
|
+
* @param ModalComponent 要渲染的 React 组件 (例如 Antd Modal, Drawer 等)。
|
|
21
|
+
* @returns 一个返回 Promise 的 showModal 函数。
|
|
22
|
+
*/
|
|
23
|
+
export declare const createPromiseHooks: <T extends Record<string, any> = {}, R = any>(ModalComponent: ComponentType<T & PromiseModalProps<R>>) => (props?: T) => Promise<R>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 离开确认 Hook
|
|
3
|
+
* @param {Object} options 配置选项
|
|
4
|
+
* @param {boolean} options.enabled 是否启用离开确认
|
|
5
|
+
* @param {string} options.message 离开确认消息
|
|
6
|
+
* @param {Function} options.onConfirm 用户确认离开时的回调函数
|
|
7
|
+
* @param {Function} options.onCancel 用户取消离开时的回调函数（可选）
|
|
8
|
+
*/
|
|
9
|
+
export interface useLeaveConfirmationProps {
|
|
10
|
+
enabled?: boolean;
|
|
11
|
+
message: string;
|
|
12
|
+
onConfirm?: () => void;
|
|
13
|
+
onCancel?: () => void;
|
|
14
|
+
}
|
|
15
|
+
export declare const useLeaveConfirmation: (options: useLeaveConfirmationProps) => {
|
|
16
|
+
triggerLeaveConfirmation: (customMessage: string) => boolean;
|
|
17
|
+
};
|
package/dist/index.esm.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{createElement as e,useState as
|
|
1
|
+
import{createElement as e,useState as t,useCallback as n,useEffect as r,useMemo as o}from"react";import{createRoot as a}from"react-dom/client";var u=function(){return u=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},u.apply(this,arguments)};function i(e,t,n,r){return new(n||(n=Promise))(function(o,a){function u(e){try{c(r.next(e))}catch(e){a(e)}}function i(e){try{c(r.throw(e))}catch(e){a(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n(function(e){e(t)})).then(u,i)}c((r=r.apply(e,t||[])).next())})}function c(e,t){var n,r,o,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]},u=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return u.next=i(0),u.throw=i(1),u.return=i(2),"function"==typeof Symbol&&(u[Symbol.iterator]=function(){return this}),u;function i(i){return function(c){return function(i){if(n)throw new TypeError("Generator is already executing.");for(;u&&(u=0,i[0]&&(a=0)),a;)try{if(n=1,r&&(o=2&i[0]?r.return:i[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,i[1])).done)return o;switch(r=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return a.label++,{value:i[1],done:!1};case 5:a.label++,r=i[1],i=[0];continue;case 7:i=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==i[0]&&2!==i[0])){a=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){a.label=i[1];break}if(6===i[0]&&a.label<o[1]){a.label=o[1],o=i;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(i);break}o[2]&&a.ops.pop(),a.trys.pop();continue}i=t.call(e,a)}catch(e){i=[6,e],r=0}finally{n=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,c])}}}"function"==typeof SuppressedError&&SuppressedError;var l=function(t){return function(n){var r=document.createElement("div");document.body.appendChild(r);var o=u(u({},n),{open:!0}),i=a(r),c=function(){i.unmount(),r.parentNode&&r.parentNode.removeChild(r)},l=function(n){var r=e(t,u(u({},n),{close:c}));i.render(r)};return l(o),{destroy:c,update:function(e){o=u(u({},o),e),l(o)}}}},f=function(e,t){if(t)return t.split(".").reduce(function(e,t){return e&&e[t]},e)},s=function(e){var a=e.url,l=e.data,s=e.params,p=void 0===s?{}:s,d=e.columns,g=e.rowKey,h=void 0===g?"id":g,v=e.immediate,S=void 0===v||v,y=e.transformData,b=e.fieldMapping,z=void 0===b?{list:"list",total:"total",current:"current",pageSize:"pageSize"}:b,m=e.filter,w=e.pagination,C=void 0===w||w,x=e.request,T=t([]),j=T[0],O=T[1],P=t(!1),k=P[0],E=P[1],I=t(0),D=I[0],L=I[1],N=t({current:1,pageSize:10}),q=N[0],J=N[1],K=t(p),G=K[0],M=K[1],Q=t(""),V=Q[0],A=Q[1],B=t([]),F=B[0],H=B[1],R=t(null),U=R[0],W=R[1],X=!!l,Y=n(function(){return i(void 0,void 0,void 0,function(){var e,t,n,r,o,i,s,p;return c(this,function(c){switch(c.label){case 0:if(X)return O(l),L(l.length),[2];if(!a&&!x)return console.warn("useDataTable: 请提供 url 或 request 参数"),[2];E(!0),c.label=1;case 1:return c.trys.push([1,7,8,9]),e=u({current:q.current,pageSize:q.pageSize},G),t=void 0,x?[4,x(e)]:[3,3];case 2:return t=c.sent(),[3,6];case 3:return a?[4,fetch(a,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)})]:[3,6];case 4:return[4,c.sent().json()];case 5:t=c.sent(),c.label=6;case 6:return y?n=y(t):(r=f(t,z.list)||[],o=f(t,z.total)||0,i=f(t,z.current),s=f(t,z.pageSize),n={list:r,total:o,current:i,pageSize:s}),O(n.list||[]),L(n.total||0),n.current&&J(function(e){return u(u({},e),{current:n.current})}),n.pageSize&&J(function(e){return u(u({},e),{pageSize:n.pageSize})}),[3,9];case 7:return p=c.sent(),console.error("表格数据请求失败:",p),O([]),L(0),[3,9];case 8:return E(!1),[7];case 9:return[2]}})})},[a,l,X,q.current,q.pageSize,G,y,z.list,z.total,z.current,z.pageSize,x]);r(function(){if(V&&m){var e=j.filter(function(e){var t=f(e,m.dataIndex);return String(t||"").toLowerCase().includes(V.toLowerCase())});H(e)}else H(j)},[j,V,m]);var Z=n(function(e){A(e),U&&clearTimeout(U);var t=setTimeout(function(){X||J(function(e){return u(u({},e),{current:1})})},(null==m?void 0:m.debounce)||300);W(t)},[U,null==m?void 0:m.debounce,X]);r(function(){return function(){U&&clearTimeout(U)}},[U]),r(function(){S&&!X?Y():X&&(O(l),L(l.length))},[Y,S,X,l]);var $=n(function(){X?(O(l),L(l.length)):Y()},[Y,X,l]),_=n(function(e){M(function(t){return u(u({},t),e)}),X||J(function(e){return u(u({},e),{current:1})})},[X]),ee=n(function(){M(p),A(""),X||J({current:1,pageSize:10})},[p,X]),te=n(function(e,t){J(function(n){return{current:e,pageSize:t||n.pageSize}})},[]),ne=o(function(){return m?F:j},[m,F,j]),re=o(function(){if(!1===C||X)return ne;var e=(q.current-1)*q.pageSize,t=e+q.pageSize;return ne.slice(e,t)},[ne,q.current,q.pageSize,C,X]),oe=o(function(){return X?m?F.length:j.length:m?F.length:D},[X,m,F.length,j.length,D]),ae=o(function(){return{columns:d,dataSource:re,loading:k,rowKey:h,pagination:!1,scroll:{x:800}}},[d,re,k,h]),ue=o(function(){if(!1===C)return{};var e={current:q.current,pageSize:q.pageSize,total:oe,showSizeChanger:!0,showQuickJumper:!0,showTotal:function(e,t){return"第 ".concat(t[0],"-").concat(t[1]," 条，共 ").concat(e," 条")},onChange:te,onShowSizeChange:te};return"object"==typeof C?u(u({},e),C):e},[q.current,q.pageSize,oe,te,C]),ie=o(function(){return{value:V,onChange:function(e){return Z(e.target.value)},placeholder:(null==m?void 0:m.placeholder)||"搜索".concat(null==m?void 0:m.dataIndex),allowClear:!0,style:{width:250}}},[V,Z,m]);return{tableProps:ae,data:re,loading:k,total:oe,paginationProps:ue,current:q.current,pageSize:q.pageSize,filterProps:ie,filterValue:V,refresh:$,search:_,reset:ee,setData:O,setLoading:E}};export{l as createHooks,s as useDataTable};
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react"),t=require("react-dom/client"),n=function(){return n=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var
|
|
1
|
+
"use strict";var e=require("react"),t=require("react-dom/client"),n=function(){return n=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var u in t=arguments[n])Object.prototype.hasOwnProperty.call(t,u)&&(e[u]=t[u]);return e},n.apply(this,arguments)};function r(e,t,n,r){return new(n||(n=Promise))(function(u,a){function o(e){try{c(r.next(e))}catch(e){a(e)}}function i(e){try{c(r.throw(e))}catch(e){a(e)}}function c(e){var t;e.done?u(e.value):(t=e.value,t instanceof n?t:new n(function(e){e(t)})).then(o,i)}c((r=r.apply(e,t||[])).next())})}function u(e,t){var n,r,u,a={label:0,sent:function(){if(1&u[0])throw u[1];return u[1]},trys:[],ops:[]},o=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return o.next=i(0),o.throw=i(1),o.return=i(2),"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function i(i){return function(c){return function(i){if(n)throw new TypeError("Generator is already executing.");for(;o&&(o=0,i[0]&&(a=0)),a;)try{if(n=1,r&&(u=2&i[0]?r.return:i[0]?r.throw||((u=r.return)&&u.call(r),0):r.next)&&!(u=u.call(r,i[1])).done)return u;switch(r=0,u&&(i=[2&i[0],u.value]),i[0]){case 0:case 1:u=i;break;case 4:return a.label++,{value:i[1],done:!1};case 5:a.label++,r=i[1],i=[0];continue;case 7:i=a.ops.pop(),a.trys.pop();continue;default:if(!(u=a.trys,(u=u.length>0&&u[u.length-1])||6!==i[0]&&2!==i[0])){a=0;continue}if(3===i[0]&&(!u||i[1]>u[0]&&i[1]<u[3])){a.label=i[1];break}if(6===i[0]&&a.label<u[1]){a.label=u[1],u=i;break}if(u&&a.label<u[2]){a.label=u[2],a.ops.push(i);break}u[2]&&a.ops.pop(),a.trys.pop();continue}i=t.call(e,a)}catch(e){i=[6,e],r=0}finally{n=u=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,c])}}}"function"==typeof SuppressedError&&SuppressedError;var a=function(e,t){if(t)return t.split(".").reduce(function(e,t){return e&&e[t]},e)};exports.createHooks=function(r){return function(u){var a=document.createElement("div");document.body.appendChild(a);var o=n(n({},u),{open:!0}),i=t.createRoot(a),c=function(){i.unmount(),a.parentNode&&a.parentNode.removeChild(a)},l=function(t){var u=e.createElement(r,n(n({},t),{close:c}));i.render(u)};return l(o),{destroy:c,update:function(e){o=n(n({},o),e),l(o)}}}},exports.useDataTable=function(t){var o=t.url,i=t.data,c=t.params,l=void 0===c?{}:c,s=t.columns,f=t.rowKey,p=void 0===f?"id":f,d=t.immediate,g=void 0===d||d,h=t.transformData,S=t.fieldMapping,v=void 0===S?{list:"list",total:"total",current:"current",pageSize:"pageSize"}:S,b=t.filter,y=t.pagination,m=void 0===y||y,z=t.request,w=e.useState([]),C=w[0],k=w[1],x=e.useState(!1),T=x[0],E=x[1],j=e.useState(0),M=j[0],O=j[1],P=e.useState({current:1,pageSize:10}),q=P[0],D=P[1],I=e.useState(l),L=I[0],N=I[1],J=e.useState(""),K=J[0],G=J[1],H=e.useState([]),Q=H[0],R=H[1],V=e.useState(null),A=V[0],B=V[1],F=!!i,U=e.useCallback(function(){return r(void 0,void 0,void 0,function(){var e,t,r,c,l,s,f,p;return u(this,function(u){switch(u.label){case 0:if(F)return k(i),O(i.length),[2];if(!o&&!z)return console.warn("useDataTable: 请提供 url 或 request 参数"),[2];E(!0),u.label=1;case 1:return u.trys.push([1,7,8,9]),e=n({current:q.current,pageSize:q.pageSize},L),t=void 0,z?[4,z(e)]:[3,3];case 2:return t=u.sent(),[3,6];case 3:return o?[4,fetch(o,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(e)})]:[3,6];case 4:return[4,u.sent().json()];case 5:t=u.sent(),u.label=6;case 6:return h?r=h(t):(c=a(t,v.list)||[],l=a(t,v.total)||0,s=a(t,v.current),f=a(t,v.pageSize),r={list:c,total:l,current:s,pageSize:f}),k(r.list||[]),O(r.total||0),r.current&&D(function(e){return n(n({},e),{current:r.current})}),r.pageSize&&D(function(e){return n(n({},e),{pageSize:r.pageSize})}),[3,9];case 7:return p=u.sent(),console.error("表格数据请求失败:",p),k([]),O(0),[3,9];case 8:return E(!1),[7];case 9:return[2]}})})},[o,i,F,q.current,q.pageSize,L,h,v.list,v.total,v.current,v.pageSize,z]);e.useEffect(function(){if(K&&b){var e=C.filter(function(e){var t=a(e,b.dataIndex);return String(t||"").toLowerCase().includes(K.toLowerCase())});R(e)}else R(C)},[C,K,b]);var W=e.useCallback(function(e){G(e),A&&clearTimeout(A);var t=setTimeout(function(){F||D(function(e){return n(n({},e),{current:1})})},(null==b?void 0:b.debounce)||300);B(t)},[A,null==b?void 0:b.debounce,F]);e.useEffect(function(){return function(){A&&clearTimeout(A)}},[A]),e.useEffect(function(){g&&!F?U():F&&(k(i),O(i.length))},[U,g,F,i]);var X=e.useCallback(function(){F?(k(i),O(i.length)):U()},[U,F,i]),Y=e.useCallback(function(e){N(function(t){return n(n({},t),e)}),F||D(function(e){return n(n({},e),{current:1})})},[F]),Z=e.useCallback(function(){N(l),G(""),F||D({current:1,pageSize:10})},[l,F]),$=e.useCallback(function(e,t){D(function(n){return{current:e,pageSize:t||n.pageSize}})},[]),_=e.useMemo(function(){return b?Q:C},[b,Q,C]),ee=e.useMemo(function(){if(!1===m||F)return _;var e=(q.current-1)*q.pageSize,t=e+q.pageSize;return _.slice(e,t)},[_,q.current,q.pageSize,m,F]),te=e.useMemo(function(){return F?b?Q.length:C.length:b?Q.length:M},[F,b,Q.length,C.length,M]),ne=e.useMemo(function(){return{columns:s,dataSource:ee,loading:T,rowKey:p,pagination:!1,scroll:{x:800}}},[s,ee,T,p]),re=e.useMemo(function(){if(!1===m)return{};var e={current:q.current,pageSize:q.pageSize,total:te,showSizeChanger:!0,showQuickJumper:!0,showTotal:function(e,t){return"第 ".concat(t[0],"-").concat(t[1]," 条，共 ").concat(e," 条")},onChange:$,onShowSizeChange:$};return"object"==typeof m?n(n({},e),m):e},[q.current,q.pageSize,te,$,m]),ue=e.useMemo(function(){return{value:K,onChange:function(e){return W(e.target.value)},placeholder:(null==b?void 0:b.placeholder)||"搜索".concat(null==b?void 0:b.dataIndex),allowClear:!0,style:{width:250}}},[K,W,b]);return{tableProps:ne,data:ee,loading:T,total:te,paginationProps:re,current:q.current,pageSize:q.pageSize,filterProps:ue,filterValue:K,refresh:X,search:Y,reset:Z,setData:k,setLoading:E}};
|