@kne-components/button-group 0.1.15 → 0.1.16
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/build/asset-manifest.json +14 -14
- package/build/index.html +1 -1
- package/build/remoteEntry.js +1 -1
- package/build/remoteEntry.js.map +1 -1
- package/build/static/js/{155.cac8e64f.chunk.js → 155.8e48d541.chunk.js} +2 -2
- package/build/static/js/155.8e48d541.chunk.js.map +1 -0
- package/build/static/js/{536.f08bf9e8.chunk.js → 536.a63735e7.chunk.js} +2 -2
- package/build/static/js/536.a63735e7.chunk.js.map +1 -0
- package/build/static/js/{72.effa9bb2.chunk.js → 72.dc6ad441.chunk.js} +2 -2
- package/build/static/js/{72.effa9bb2.chunk.js.map → 72.dc6ad441.chunk.js.map} +1 -1
- package/build/static/js/{784.d279deb5.chunk.js → 784.7c7ece2e.chunk.js} +2 -2
- package/build/static/js/{784.d279deb5.chunk.js.map → 784.7c7ece2e.chunk.js.map} +1 -1
- package/build/static/js/{872.ebd10a08.chunk.js → 872.a5b2dadf.chunk.js} +2 -2
- package/build/static/js/{872.ebd10a08.chunk.js.map → 872.a5b2dadf.chunk.js.map} +1 -1
- package/build/static/js/{main.40c0dbdc.js → main.3af1b77a.js} +2 -2
- package/build/static/js/{main.40c0dbdc.js.map → main.3af1b77a.js.map} +1 -1
- package/package.json +1 -1
- package/build/static/js/155.cac8e64f.chunk.js.map +0 -1
- package/build/static/js/536.f08bf9e8.chunk.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(self.webpackChunk_kne_components_button_group=self.webpackChunk_kne_components_button_group||[]).push([[155,536],{2899:(e,t,n)=>{var r=n(64579),o=n(2316),i=n(90931),a=/^[-+]0x[0-9a-f]+$/i,c=/^0b[01]+$/i,l=/^0o[0-7]+$/i,s=parseInt;e.exports=function(e){if("number"==typeof e)return e;if(i(e))return NaN;if(o(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=o(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=r(e);var n=c.test(e);return n||l.test(e)?s(e.slice(2),n?2:8):a.test(e)?NaN:+e}},64579:(e,t,n)=>{var r=n(78913),o=/^\s+/;e.exports=function(e){return e?e.slice(0,r(e)+1).replace(o,""):e}},76155:(e,t,n)=>{"use strict";n.r(t),n.d(t,{ButtonFooter:()=>Q,ConfirmButton:()=>D,ConfirmLink:()=>S,ConfirmText:()=>$,FetchButton:()=>V,LoadingButton:()=>T,default:()=>U,useLoading:()=>w,withConfirm:()=>A});var r=n(94922),o=n.n(r),i=n(28833);const a=function(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];const n=(0,r.useRef)(e);return t||(n.current=e),(0,r.useCallback)(function(){return n.current&&n.current(...arguments)},[])};var c=n(58612),l=n(86340),s=n(54159),u=n.n(s),m=n(20274),d=n(16052),f=n(98771),p=n.n(f),g=n(95600),h=n.n(g);const v=(e,t)=>{const n=(0,r.useRef)(null);n.current=Object.assign({},{time:500,isDebounce:!1},t);const o=(0,r.useRef)(null),i=a(e);return(0,r.useLayoutEffect)(()=>{const e=o.current,t=()=>window.requestAnimationFrame(()=>{e&&i(e)});t();const r=new ResizeObserver((n.current.isDebounce?h():p())(t,n.current.time));return e&&r.observe(e),()=>{r.disconnect()}},[i]),o};var C=n(26938),b=n.n(C),E=n(73075),k=n.n(E);function x(){return x=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},x.apply(null,arguments)}function y(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}const N=["onClick","children","loading"],w=e=>{const[t,n]=(0,r.useState)(!1),o=a(function(){return n(!0),Promise.resolve(e&&e(...arguments)).then(()=>{n(!1)}).catch(e=>{n(!1),console.error(e)})});return{isLoading:t,setIsLoading:n,callback:o}},T=e=>{let{onClick:t,children:n,loading:r}=e,a=y(e,N);const{isLoading:c,callback:l}=w(t);return o().createElement(i.Button,x({},a,{loading:r||c,onClick:l}),"function"===typeof n?n(r||c):n)};var _="_zIHFy",O="_R-IrF",P="_F1kMl",W="_Iee0d",L="_aGBVE",B="_0oW1K";const F={message:"\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f",confirm:"\u786e\u5b9a",delete:"\u5220\u9664",cancel:"\u53d6\u6d88",more:"\u66f4\u591a"},j=["title","message","isDelete","showCancel","cancelText","onCancel","isModal","okText","placement","children","onClick","getContainer","renderModal"],M=["children"],I=["children"],z=["children"],D=(0,m.createWithIntlProvider)("zh-CN",F,"button-group")(e=>{const{formatMessage:t}=(0,m.useIntl)(),n=Object.assign({},{isDelete:!0},e),{title:l,message:s,isDelete:d,showCancel:f,cancelText:p,onCancel:g,isModal:h,okText:v,placement:C,children:b,onClick:E,getContainer:k,renderModal:N}=n,T=y(n,j),[F,M]=(0,r.useState)(!1),{isLoading:I,callback:z}=w(E),D=a(()=>{M(!0)}),S=o().createElement(i.Flex,{className:P,vertical:!0,gap:8,onClick:e=>{e.stopPropagation()}},l&&o().createElement(i.Flex,{align:"flex-start",gap:8,className:W},d&&o().createElement(c.A,{className:"title-icon"}),l),o().createElement(i.Flex,{align:"flex-start",gap:8,className:u()(L,{[B]:l})},!l&&d?o().createElement(c.A,{className:"title-icon"}):null,s||t({id:"message"}))),$=()=>"function"===typeof b?b(x({},T,{onClick:D})):o().createElement(i.Button,x({},T,{loading:I,onClick:()=>{D()}}),b);if(h){const e={open:F,onCancel:()=>{M(!1),g&&g()},wrapClassName:O,okText:v||t(d?{id:"delete"}:{id:"confirm"}),cancelText:p||t({id:"cancel"}),onOk:e=>(M(!1),z(e)),closable:!1,okButtonProps:{danger:d},getContainer:k,children:S};return o().createElement(o().Fragment,null,"function"===typeof N?N(e):o().createElement(i.Modal,e),$())}return o().createElement(i.Popconfirm,{overlayClassName:u()(_),okButtonProps:{danger:d},title:S,open:F,getPopupContainer:k,onCancel:g,placement:C,showCancel:f,okText:v||t(d?{id:"delete"}:{id:"confirm"}),cancelText:p||t({id:"cancel"}),onOpenChange:M,onConfirm:e=>{z(e)}},$())}),S=e=>{let{children:t}=e,n=y(e,M);return o().createElement(D,n,e=>o().createElement(i.Typography.Link,e,t))},$=e=>{let{children:t}=e,n=y(e,I);return o().createElement(D,n,e=>o().createElement(i.Typography.Text,e,t))},A=e=>(console.warn("\u540e\u7eed\u7248\u672c\u53ef\u80fd\u5220\u9664\u8be5api\uff0c\u8bf7\u4e0d\u8981\u4f7f\u7528"),t=>{let{children:n}=t,r=y(t,z);return o().createElement(D,r,t=>o().createElement(e,t,n))}),R=["api","onClick"],V=e=>{let{api:t,onClick:n}=e,r=y(e,R);const i=(0,d.useFetch)(Object.assign({},t,{auto:!1})),{isLoading:a,refresh:c}=i;return o().createElement(T,x({},r,{loading:a,onClick:async()=>{const{output:e,errorStack:t}=await c({});Object.values(t).length>0||n&&n({data:e})}}))},q=k()(e=>{let{amountWidth:t,moreBtnWidth:n,buttonWidthList:r,spaceProps:o,compact:i}=e;const a=i?0:["small","middle","large"].indexOf(o.size)>-1?8*(["small","middle","large"].indexOf(o.size)+1):Number.isInteger(o.size)?o.size:8;let c=0,l=0;for(;t>=l+r[c]+c*a&&c<r.length;)l+=r[c],c+=1;for(;t<l+(c-1)*a+(c<r.length?n+a:0)&&c>0;)l-=r[c-1],c-=1;return c},e=>{let{amountWidth:t,moreBtnWidth:n,buttonWidthList:r,spaceProps:o,compact:i}=e;return`${t}${n}${r.join(",")}${Object.values(o).join(",")}${i&&i.toString()}`});var H={"width-container":"_V58ju","hidden-container":"_XN3o6","hidden-inner":"_-depB","menu-list":"_juFTd"};const G=["list","more","compact","showLength","getPopupContainer","trigger"],K=["className","confirm","buttonComponent","tooltipProps"],U=(0,m.createWithIntlProvider)("zh-CN",F,"button-group")(e=>{const{formatMessage:t}=(0,m.useIntl)(),n=Object.assign({},{more:o().createElement(i.Button,null,t({id:"more"}),o().createElement(l.A,null))}
|
|
2
|
-
//# sourceMappingURL=536.
|
|
1
|
+
(self.webpackChunk_kne_components_button_group=self.webpackChunk_kne_components_button_group||[]).push([[155,536],{2899:(e,t,n)=>{var r=n(64579),o=n(2316),i=n(90931),a=/^[-+]0x[0-9a-f]+$/i,c=/^0b[01]+$/i,l=/^0o[0-7]+$/i,s=parseInt;e.exports=function(e){if("number"==typeof e)return e;if(i(e))return NaN;if(o(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=o(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=r(e);var n=c.test(e);return n||l.test(e)?s(e.slice(2),n?2:8):a.test(e)?NaN:+e}},64579:(e,t,n)=>{var r=n(78913),o=/^\s+/;e.exports=function(e){return e?e.slice(0,r(e)+1).replace(o,""):e}},76155:(e,t,n)=>{"use strict";n.r(t),n.d(t,{ButtonFooter:()=>Q,ConfirmButton:()=>D,ConfirmLink:()=>S,ConfirmText:()=>$,FetchButton:()=>V,LoadingButton:()=>T,default:()=>U,useLoading:()=>w,withConfirm:()=>A});var r=n(94922),o=n.n(r),i=n(28833);const a=function(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];const n=(0,r.useRef)(e);return t||(n.current=e),(0,r.useCallback)(function(){return n.current&&n.current(...arguments)},[])};var c=n(58612),l=n(86340),s=n(54159),u=n.n(s),m=n(20274),d=n(16052),f=n(98771),p=n.n(f),g=n(95600),h=n.n(g);const v=(e,t)=>{const n=(0,r.useRef)(null);n.current=Object.assign({},{time:500,isDebounce:!1},t);const o=(0,r.useRef)(null),i=a(e);return(0,r.useLayoutEffect)(()=>{const e=o.current,t=()=>window.requestAnimationFrame(()=>{e&&i(e)});t();const r=new ResizeObserver((n.current.isDebounce?h():p())(t,n.current.time));return e&&r.observe(e),()=>{r.disconnect()}},[i]),o};var C=n(26938),b=n.n(C),E=n(73075),k=n.n(E);function x(){return x=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},x.apply(null,arguments)}function y(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;n[r]=e[r]}return n}const N=["onClick","children","loading"],w=e=>{const[t,n]=(0,r.useState)(!1),o=a(function(){return n(!0),Promise.resolve(e&&e(...arguments)).then(()=>{n(!1)}).catch(e=>{n(!1),console.error(e)})});return{isLoading:t,setIsLoading:n,callback:o}},T=e=>{let{onClick:t,children:n,loading:r}=e,a=y(e,N);const{isLoading:c,callback:l}=w(t);return o().createElement(i.Button,x({},a,{loading:r||c,onClick:l}),"function"===typeof n?n(r||c):n)};var _="_zIHFy",O="_R-IrF",P="_F1kMl",W="_Iee0d",L="_aGBVE",B="_0oW1K";const F={message:"\u786e\u5b9a\u8981\u5220\u9664\u5417\uff1f",confirm:"\u786e\u5b9a",delete:"\u5220\u9664",cancel:"\u53d6\u6d88",more:"\u66f4\u591a"},j=["title","message","isDelete","showCancel","cancelText","onCancel","isModal","okText","placement","children","onClick","getContainer","renderModal"],M=["children"],I=["children"],z=["children"],D=(0,m.createWithIntlProvider)("zh-CN",F,"button-group")(e=>{const{formatMessage:t}=(0,m.useIntl)(),n=Object.assign({},{isDelete:!0},e),{title:l,message:s,isDelete:d,showCancel:f,cancelText:p,onCancel:g,isModal:h,okText:v,placement:C,children:b,onClick:E,getContainer:k,renderModal:N}=n,T=y(n,j),[F,M]=(0,r.useState)(!1),{isLoading:I,callback:z}=w(E),D=a(()=>{M(!0)}),S=o().createElement(i.Flex,{className:P,vertical:!0,gap:8,onClick:e=>{e.stopPropagation()}},l&&o().createElement(i.Flex,{align:"flex-start",gap:8,className:W},d&&o().createElement(c.A,{className:"title-icon"}),l),o().createElement(i.Flex,{align:"flex-start",gap:8,className:u()(L,{[B]:l})},!l&&d?o().createElement(c.A,{className:"title-icon"}):null,s||t({id:"message"}))),$=()=>"function"===typeof b?b(x({},T,{onClick:D})):o().createElement(i.Button,x({},T,{loading:I,onClick:()=>{D()}}),b);if(h){const e={open:F,onCancel:()=>{M(!1),g&&g()},wrapClassName:O,okText:v||t(d?{id:"delete"}:{id:"confirm"}),cancelText:p||t({id:"cancel"}),onOk:e=>(M(!1),z(e)),closable:!1,okButtonProps:{danger:d},getContainer:k,children:S};return o().createElement(o().Fragment,null,"function"===typeof N?N(e):o().createElement(i.Modal,e),$())}return o().createElement(i.Popconfirm,{overlayClassName:u()(_),okButtonProps:{danger:d},title:S,open:F,getPopupContainer:k,onCancel:g,placement:C,showCancel:f,okText:v||t(d?{id:"delete"}:{id:"confirm"}),cancelText:p||t({id:"cancel"}),onOpenChange:M,onConfirm:e=>{z(e)}},$())}),S=e=>{let{children:t}=e,n=y(e,M);return o().createElement(D,n,e=>o().createElement(i.Typography.Link,e,t))},$=e=>{let{children:t}=e,n=y(e,I);return o().createElement(D,n,e=>o().createElement(i.Typography.Text,e,t))},A=e=>(console.warn("\u540e\u7eed\u7248\u672c\u53ef\u80fd\u5220\u9664\u8be5api\uff0c\u8bf7\u4e0d\u8981\u4f7f\u7528"),t=>{let{children:n}=t,r=y(t,z);return o().createElement(D,r,t=>o().createElement(e,t,n))}),R=["api","onClick"],V=e=>{let{api:t,onClick:n}=e,r=y(e,R);const i=(0,d.useFetch)(Object.assign({},t,{auto:!1})),{isLoading:a,refresh:c}=i;return o().createElement(T,x({},r,{loading:a,onClick:async()=>{const{output:e,errorStack:t}=await c({});Object.values(t).length>0||n&&n({data:e})}}))},q=k()(e=>{let{amountWidth:t,moreBtnWidth:n,buttonWidthList:r,spaceProps:o,compact:i}=e;const a=i?0:["small","middle","large"].indexOf(o.size)>-1?8*(["small","middle","large"].indexOf(o.size)+1):Number.isInteger(o.size)?o.size:8;let c=0,l=0;for(;t>=l+r[c]+c*a&&c<r.length;)l+=r[c],c+=1;for(;t<l+(c-1)*a+(c<r.length?n+a:0)&&c>0;)l-=r[c-1],c-=1;return c},e=>{let{amountWidth:t,moreBtnWidth:n,buttonWidthList:r,spaceProps:o,compact:i}=e;return`${t}${n}${r.join(",")}${Object.values(o).join(",")}${i&&i.toString()}`});var H={"width-container":"_V58ju","hidden-container":"_XN3o6","hidden-inner":"_-depB","menu-list":"_juFTd"};const G=["list","more","compact","showLength","getPopupContainer","trigger"],K=["className","confirm","buttonComponent","tooltipProps"],U=(0,m.createWithIntlProvider)("zh-CN",F,"button-group")(e=>{const{formatMessage:t}=(0,m.useIntl)(),n=Object.assign({},e,{more:(null==e?void 0:e.more)||o().createElement(i.Button,null,t({id:"more"}),o().createElement(l.A,null))}),{list:c,more:s,compact:d,showLength:f,getPopupContainer:p,trigger:g}=n,h=y(n,G),C=(0,r.useMemo)(()=>c.filter(e=>!(null!=e&&e.hidden)),[c]),E=b()(h,["size","split","align","style"]),[k,N]=(0,r.useState)(C.length&&1),w=Number.isInteger(f)?f:k,_=a(()=>{const e=P.current,t=W.current,n=O.current;if(!e)return;const o=e.querySelectorAll(".button-group-item");if(!o)return;if(0===o.length)return;const i=n.clientWidth,a=t.clientWidth,c=[].map.call(o,e=>e.offsetWidth),l=q({amountWidth:i,moreBtnWidth:a,buttonWidthList:c,spaceProps:E,compact:d});(0,r.startTransition)(()=>{N(l)})}),O=v(_),P=v(_),W=v(_),L=C.slice(w),B=(e,t,n)=>{if("function"===typeof e)return e({key:t,className:u()("button-group-item",H["btn-item"])},{isDropdown:n});const{className:r,confirm:a,buttonComponent:c,tooltipProps:l}=e,s=y(e,K),m=a||s.message,d=c||(m?D:T),f=o().createElement(d,x({danger:m&&!1!==s.isDelete},Object.assign({},s,m&&(s.isModal||n)?{isModal:!0}:{}),{key:t,className:u()("button-group-item",r)}));return l?o().createElement(i.Tooltip,l,f):f},F=d?i.Space.Compact:i.Space;return o().createElement(o().Fragment,null,o().createElement("div",{className:H["width-container"],ref:O}),o().createElement("div",{className:H["hidden-container"]},o().createElement("div",{className:H["hidden-inner"],ref:W},s),o().createElement("div",{className:H["hidden-inner"],ref:P},o().createElement(F,E,C.map(B)))),o().createElement(F,E,C.slice(0,w).map((e,t)=>B(e,t,!1)),L.length>0&&o().createElement(i.Dropdown,{getPopupContainer:p,trigger:g,rootClassName:H["menu-list"],menu:{items:L.map((e,t)=>({key:t,label:B(e,t,!0)}))}},s)))});var X="_8fdVC",J="_AFUod";const Q=e=>{let{children:t,className:n}=e;const[i,a]=(0,r.useState)(0),c=v(e=>{a(e.clientHeight)});return o().createElement("div",{className:u()(X,n),style:{"--footer-height":`${i}px`}},o().createElement("div",{ref:c,className:J},t))}},78913:e=>{var t=/\s/;e.exports=function(e){for(var n=e.length;n--&&t.test(e.charAt(n)););return n}},93375:(e,t,n)=>{var r=n(36382);e.exports=function(){return r.Date.now()}},95600:(e,t,n)=>{var r=n(2316),o=n(93375),i=n(2899),a=Math.max,c=Math.min;e.exports=function(e,t,n){var l,s,u,m,d,f,p=0,g=!1,h=!1,v=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function C(t){var n=l,r=s;return l=s=void 0,p=t,m=e.apply(r,n)}function b(e){var n=e-f;return void 0===f||n>=t||n<0||h&&e-p>=u}function E(){var e=o();if(b(e))return k(e);d=setTimeout(E,function(e){var n=t-(e-f);return h?c(n,u-(e-p)):n}(e))}function k(e){return d=void 0,v&&l?C(e):(l=s=void 0,m)}function x(){var e=o(),n=b(e);if(l=arguments,s=this,f=e,n){if(void 0===d)return function(e){return p=e,d=setTimeout(E,t),g?C(e):m}(f);if(h)return clearTimeout(d),d=setTimeout(E,t),C(f)}return void 0===d&&(d=setTimeout(E,t)),m}return t=i(t)||0,r(n)&&(g=!!n.leading,u=(h="maxWait"in n)?a(i(n.maxWait)||0,t):u,v="trailing"in n?!!n.trailing:v),x.cancel=function(){void 0!==d&&clearTimeout(d),p=0,l=f=s=d=void 0},x.flush=function(){return void 0===d?m:k(o())},x}},98771:(e,t,n)=>{var r=n(95600),o=n(2316);e.exports=function(e,t,n){var i=!0,a=!0;if("function"!=typeof e)throw new TypeError("Expected a function");return o(n)&&(i="leading"in n?!!n.leading:i,a="trailing"in n?!!n.trailing:a),r(e,t,{leading:i,maxWait:t,trailing:a})}}}]);
|
|
2
|
+
//# sourceMappingURL=536.a63735e7.chunk.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"static/js/536.a63735e7.chunk.js","mappings":"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","sources":["../../node_modules/lodash/toNumber.js","../../node_modules/lodash/_baseTrim.js","../../node_modules/@kne/use-ref-callback/src/index.js","../../node_modules/@kne/use-resize/src/index.js","../../src/LoadingButton/index.js","../../src/locale/zh-CN.js","../../src/ConfirmButton/index.js","../../src/FetchButton/index.js","../../src/ButtonGroup/areaWidthComputed.js","../../src/ButtonGroup/index.js","../../src/ButtonFooter/index.js","../../node_modules/lodash/_trimmedEndIndex.js","../../node_modules/lodash/now.js","../../node_modules/lodash/debounce.js","../../node_modules/lodash/throttle.js"],"sourcesContent":["var baseTrim = require('./_baseTrim'),\n isObject = require('./isObject'),\n isSymbol = require('./isSymbol');\n\n/** Used as references for various `Number` constants. */\nvar NAN = 0 / 0;\n\n/** Used to detect bad signed hexadecimal string values. */\nvar reIsBadHex = /^[-+]0x[0-9a-f]+$/i;\n\n/** Used to detect binary string values. */\nvar reIsBinary = /^0b[01]+$/i;\n\n/** Used to detect octal string values. */\nvar reIsOctal = /^0o[0-7]+$/i;\n\n/** Built-in method references without a dependency on `root`. */\nvar freeParseInt = parseInt;\n\n/**\n * Converts `value` to a number.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to process.\n * @returns {number} Returns the number.\n * @example\n *\n * _.toNumber(3.2);\n * // => 3.2\n *\n * _.toNumber(Number.MIN_VALUE);\n * // => 5e-324\n *\n * _.toNumber(Infinity);\n * // => Infinity\n *\n * _.toNumber('3.2');\n * // => 3.2\n */\nfunction toNumber(value) {\n if (typeof value == 'number') {\n return value;\n }\n if (isSymbol(value)) {\n return NAN;\n }\n if (isObject(value)) {\n var other = typeof value.valueOf == 'function' ? value.valueOf() : value;\n value = isObject(other) ? (other + '') : other;\n }\n if (typeof value != 'string') {\n return value === 0 ? value : +value;\n }\n value = baseTrim(value);\n var isBinary = reIsBinary.test(value);\n return (isBinary || reIsOctal.test(value))\n ? freeParseInt(value.slice(2), isBinary ? 2 : 8)\n : (reIsBadHex.test(value) ? NAN : +value);\n}\n\nmodule.exports = toNumber;\n","var trimmedEndIndex = require('./_trimmedEndIndex');\n\n/** Used to match leading whitespace. */\nvar reTrimStart = /^\\s+/;\n\n/**\n * The base implementation of `_.trim`.\n *\n * @private\n * @param {string} string The string to trim.\n * @returns {string} Returns the trimmed string.\n */\nfunction baseTrim(string) {\n return string\n ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')\n : string;\n}\n\nmodule.exports = baseTrim;\n","import { useRef, useCallback } from \"react\";\n\nconst useRefCallback = (callback, keepInit = false) => {\n const callbackRef = useRef(callback);\n if (!keepInit) {\n callbackRef.current = callback;\n }\n return useCallback((...args) => {\n return callbackRef.current && callbackRef.current(...args);\n }, []);\n};\n\nexport default useRefCallback;\n","import { useLayoutEffect, useRef } from \"react\";\nimport throttle from \"lodash/throttle\";\nimport debounce from \"lodash/debounce\";\nimport useRefCallback from \"@kne/use-ref-callback\";\n\nconst useResize = (callback, options) => {\n const optionsRef = useRef(null);\n optionsRef.current = Object.assign(\n {},\n { time: 500, isDebounce: false },\n options\n );\n const ref = useRef(null);\n const callbackHandler = useRefCallback(callback);\n useLayoutEffect(() => {\n const el = ref.current;\n const computed = () => {\n return window.requestAnimationFrame(() => {\n el && callbackHandler(el);\n });\n };\n computed();\n const resizeObserver = new ResizeObserver(\n (optionsRef.current.isDebounce ? debounce : throttle)(\n computed,\n optionsRef.current.time\n )\n );\n el && resizeObserver.observe(el);\n return () => {\n resizeObserver.disconnect();\n };\n }, [callbackHandler]);\n return ref;\n};\n\nexport default useResize;\n","import React, { useState } from 'react';\nimport { Button } from 'antd';\nimport useRefCallback from '@kne/use-ref-callback';\n\nexport const useLoading = callback => {\n const [isLoading, setIsLoading] = useState(false);\n\n const callbackHandler = useRefCallback((...args) => {\n setIsLoading(true);\n return Promise.resolve(callback && callback(...args))\n .then(() => {\n setIsLoading(false);\n })\n .catch(err => {\n setIsLoading(false);\n console.error(err);\n });\n });\n return {\n isLoading,\n setIsLoading,\n callback: callbackHandler\n };\n};\n\nconst LoadingButton = ({ onClick, children, loading, ...props }) => {\n const { isLoading, callback } = useLoading(onClick);\n return (\n <Button {...props} loading={loading || isLoading} onClick={callback}>\n {typeof children === 'function' ? children(loading || isLoading) : children}\n </Button>\n );\n};\n\nexport default LoadingButton;\n","const locale = {\n message: '确定要删除吗?',\n confirm: '确定',\n delete: '删除',\n cancel: '取消',\n more: '更多'\n};\n\nexport default locale;\n","import React, { useState, isValidElement } from 'react';\nimport { Popconfirm, Modal, Button, Flex, Typography } from 'antd';\nimport { InfoCircleFilled } from '@ant-design/icons';\nimport { useLoading } from '../LoadingButton';\nimport classnames from 'classnames';\nimport useRefCallback from '@kne/use-ref-callback';\nimport style from './style.module.scss';\nimport { createWithIntlProvider, useIntl } from '@kne/react-intl';\nimport zhCn from '../locale/zh-CN';\n\nconst ConfirmButton = createWithIntlProvider(\n 'zh-CN',\n zhCn,\n 'button-group'\n)(p => {\n const { formatMessage } = useIntl();\n const { title, message, isDelete, showCancel, cancelText, onCancel, isModal, okText, placement, children, onClick, getContainer, renderModal, ...props } = Object.assign({}, { isDelete: true }, p);\n\n const [open, setOpen] = useState(false);\n const { isLoading, callback } = useLoading(onClick);\n\n const handlerConfirm = useRefCallback(() => {\n setOpen(true);\n });\n\n const confirmContent = (\n <Flex\n className={style['confirm-content']}\n vertical\n gap={8}\n onClick={e => {\n e.stopPropagation();\n }}\n >\n {title && (\n <Flex align=\"flex-start\" gap={8} className={style['title']}>\n {isDelete && <InfoCircleFilled className=\"title-icon\" />}\n {title}\n </Flex>\n )}\n <Flex\n align=\"flex-start\"\n gap={8}\n className={classnames(style['content'], {\n [style['has-title']]: title\n })}\n >\n {!title && isDelete ? <InfoCircleFilled className=\"title-icon\" /> : null}\n {message || formatMessage({ id: 'message' })}\n </Flex>\n </Flex>\n );\n\n const renderChildren = () => {\n if (typeof children === 'function') {\n return children({\n ...props,\n onClick: handlerConfirm\n });\n }\n return (\n <Button\n {...props}\n loading={isLoading}\n onClick={() => {\n handlerConfirm();\n }}\n >\n {children}\n </Button>\n );\n };\n\n if (isModal) {\n const modalProps = {\n open,\n onCancel: () => {\n setOpen(false);\n onCancel && onCancel();\n },\n wrapClassName: style['modal'],\n okText: okText ? okText : isDelete ? formatMessage({ id: 'delete' }) : formatMessage({ id: 'confirm' }),\n cancelText: cancelText || formatMessage({ id: 'cancel' }),\n onOk: e => {\n setOpen(false);\n return callback(e);\n },\n closable: false,\n okButtonProps: {\n danger: isDelete\n },\n getContainer,\n children: confirmContent\n };\n return (\n <>\n {typeof renderModal === 'function' ? renderModal(modalProps) : <Modal {...modalProps} />}\n {renderChildren()}\n </>\n );\n }\n return (\n <Popconfirm\n overlayClassName={classnames(style['overlay'])}\n okButtonProps={{\n danger: isDelete\n }}\n title={confirmContent}\n open={open}\n getPopupContainer={getContainer}\n onCancel={onCancel}\n placement={placement}\n showCancel={showCancel}\n okText={okText ? okText : isDelete ? formatMessage({ id: 'delete' }) : formatMessage({ id: 'confirm' })}\n cancelText={cancelText || formatMessage({ id: 'cancel' })}\n onOpenChange={setOpen}\n onConfirm={e => {\n callback(e);\n }}\n >\n {renderChildren()}\n </Popconfirm>\n );\n});\n\nexport const ConfirmLink = ({ children, ...p }) => {\n return <ConfirmButton {...p}>{props => <Typography.Link {...props}>{children}</Typography.Link>}</ConfirmButton>;\n};\n\nexport const ConfirmText = ({ children, ...p }) => {\n return <ConfirmButton {...p}>{props => <Typography.Text {...props}>{children}</Typography.Text>}</ConfirmButton>;\n};\n\nexport const withConfirm = WrappedComponent => {\n console.warn('后续版本可能删除该api,请不要使用');\n return ({ children, ...p }) => {\n return <ConfirmButton {...p}>{props => <WrappedComponent {...props}>{children}</WrappedComponent>}</ConfirmButton>;\n };\n};\n\nexport default ConfirmButton;\n","import React from 'react';\nimport { useFetch } from '@kne/react-fetch';\nimport LoadingButton from '../LoadingButton';\n\nconst FetchButton = ({ api, onClick, ...props }) => {\n const fetchApi = useFetch(\n Object.assign({}, api, {\n auto: false\n })\n );\n const { isLoading, refresh } = fetchApi;\n return (\n <LoadingButton\n {...props}\n loading={isLoading}\n onClick={async () => {\n const { output: data, errorStack } = await refresh({});\n if (Object.values(errorStack).length > 0) {\n return;\n }\n onClick && onClick({ data });\n }}\n />\n );\n};\n\nexport default FetchButton;\n","import memoize from 'lodash/memoize';\n\nconst areaWidthComputed = memoize(\n ({ amountWidth, moreBtnWidth, buttonWidthList, spaceProps, compact }) => {\n const spaceWidth = (() => {\n if (compact) {\n return 0;\n }\n\n if (['small', 'middle', 'large'].indexOf(spaceProps.size) > -1) {\n return (['small', 'middle', 'large'].indexOf(spaceProps.size) + 1) * 8;\n }\n\n if (Number.isInteger(spaceProps.size)) {\n return spaceProps.size;\n }\n return 8;\n })();\n\n let targetLength = 0,\n targetWidth = 0;\n\n // 采取先加后减策略\n while (amountWidth >= targetWidth + buttonWidthList[targetLength] + targetLength * spaceWidth && targetLength < buttonWidthList.length) {\n targetWidth += buttonWidthList[targetLength];\n targetLength += 1;\n }\n\n while (amountWidth < targetWidth + (targetLength - 1) * spaceWidth + (targetLength < buttonWidthList.length ? moreBtnWidth + spaceWidth : 0) && targetLength > 0) {\n targetWidth -= buttonWidthList[targetLength - 1];\n targetLength -= 1;\n }\n\n return targetLength;\n },\n ({ amountWidth, moreBtnWidth, buttonWidthList, spaceProps, compact }) => {\n return `${amountWidth}${moreBtnWidth}${buttonWidthList.join(',')}${Object.values(spaceProps).join(',')}${compact && compact.toString()}`;\n }\n);\n\nexport default areaWidthComputed;\n","import React, { startTransition, useMemo, useState } from 'react';\nimport useResize from '@kne/use-resize';\nimport { Button, Dropdown, Space, Tooltip } from 'antd';\nimport { DownOutlined } from '@ant-design/icons';\nimport useRefCallback from '@kne/use-ref-callback';\nimport classnames from 'classnames';\nimport LoadingButton from '../LoadingButton';\nimport ConfirmButton from '../ConfirmButton';\nimport pick from 'lodash/pick';\nimport areaWidthComputed from './areaWidthComputed';\nimport style from './style.module.scss';\nimport { createWithIntlProvider, useIntl } from '@kne/react-intl';\nimport zhCn from '../locale/zh-CN';\n\nconst ButtonGroup = createWithIntlProvider(\n 'zh-CN',\n zhCn,\n 'button-group'\n)(p => {\n const { formatMessage } = useIntl();\n const {\n list: originalList,\n more,\n compact,\n showLength: showLengthProps,\n getPopupContainer,\n trigger,\n ...props\n } = Object.assign({}, p, {\n more: p?.more || (\n <Button>\n {formatMessage({ id: 'more' })}\n <DownOutlined />\n </Button>\n )\n });\n const list = useMemo(() => originalList.filter(item => !item?.hidden), [originalList]);\n const spaceProps = pick(props, ['size', 'split', 'align', 'style']);\n const [showLengthState, setShowLength] = useState(list.length && 1);\n const showLength = Number.isInteger(showLengthProps) ? showLengthProps : showLengthState;\n const computedLength = useRefCallback(() => {\n const el = targetRef.current,\n moreEl = moreRef.current,\n widthEl = ref.current;\n if (!el) {\n return;\n }\n\n const buttonEls = el.querySelectorAll('.button-group-item');\n if (!buttonEls) {\n return;\n }\n if (buttonEls.length === 0) {\n return;\n }\n\n const amountWidth = widthEl.clientWidth,\n moreBtnWidth = moreEl.clientWidth,\n buttonWidthList = [].map.call(buttonEls, el => el.offsetWidth);\n const targetLength = areaWidthComputed({\n amountWidth,\n moreBtnWidth,\n buttonWidthList,\n spaceProps,\n compact\n });\n startTransition(() => {\n setShowLength(targetLength);\n });\n });\n const ref = useResize(computedLength);\n const targetRef = useResize(computedLength);\n const moreRef = useResize(computedLength);\n const otherList = list.slice(showLength);\n\n const renderButton = (renderItem, index, isDropdown) => {\n if (typeof renderItem === 'function') {\n return renderItem(\n {\n key: index,\n className: classnames('button-group-item', style['btn-item'])\n },\n { isDropdown }\n );\n }\n const { className, confirm, buttonComponent, tooltipProps, ...props } = renderItem;\n const isConfirm = confirm || props.message;\n const CurrentButton = buttonComponent || (isConfirm ? ConfirmButton : LoadingButton);\n const currentButton = (\n <CurrentButton\n danger={isConfirm && props.isDelete !== false}\n {...Object.assign(\n {},\n props,\n isConfirm && (props.isModal || isDropdown)\n ? {\n isModal: true\n }\n : {}\n )}\n key={index}\n className={classnames('button-group-item', className)}\n />\n );\n return tooltipProps ? <Tooltip {...tooltipProps}>{currentButton}</Tooltip> : currentButton;\n };\n\n const SpaceComponent = compact ? Space.Compact : Space;\n\n return (\n <>\n <div className={style['width-container']} ref={ref} />\n <div className={style['hidden-container']}>\n <div className={style['hidden-inner']} ref={moreRef}>\n {more}\n </div>\n <div className={style['hidden-inner']} ref={targetRef}>\n <SpaceComponent {...spaceProps}>{list.map(renderButton)}</SpaceComponent>\n </div>\n </div>\n <SpaceComponent {...spaceProps}>\n {list.slice(0, showLength).map((item, index) => renderButton(item, index, false))}\n {otherList.length > 0 && (\n <Dropdown\n getPopupContainer={getPopupContainer}\n trigger={trigger}\n rootClassName={style['menu-list']}\n menu={{\n items: otherList.map((item, index) => {\n return {\n key: index,\n label: renderButton(item, index, true)\n };\n })\n }}\n >\n {more}\n </Dropdown>\n )}\n </SpaceComponent>\n </>\n );\n});\n\nexport default ButtonGroup;\n","import React, { useState } from 'react';\nimport classnames from 'classnames';\nimport useResize from '@kne/use-resize';\nimport style from './style.module.scss';\n\nconst ButtonFooter = ({ children, className }) => {\n const [height, setHeight] = useState(0);\n const ref = useResize(dom => {\n setHeight(dom.clientHeight);\n });\n return (\n <div\n className={classnames(style['button-footer'], className)}\n style={{\n '--footer-height': `${height}px`\n }}\n >\n <div ref={ref} className={style['inner']}>\n {children}\n </div>\n </div>\n );\n};\n\nexport default ButtonFooter;\n","/** Used to match a single whitespace character. */\nvar reWhitespace = /\\s/;\n\n/**\n * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace\n * character of `string`.\n *\n * @private\n * @param {string} string The string to inspect.\n * @returns {number} Returns the index of the last non-whitespace character.\n */\nfunction trimmedEndIndex(string) {\n var index = string.length;\n\n while (index-- && reWhitespace.test(string.charAt(index))) {}\n return index;\n}\n\nmodule.exports = trimmedEndIndex;\n","var root = require('./_root');\n\n/**\n * Gets the timestamp of the number of milliseconds that have elapsed since\n * the Unix epoch (1 January 1970 00:00:00 UTC).\n *\n * @static\n * @memberOf _\n * @since 2.4.0\n * @category Date\n * @returns {number} Returns the timestamp.\n * @example\n *\n * _.defer(function(stamp) {\n * console.log(_.now() - stamp);\n * }, _.now());\n * // => Logs the number of milliseconds it took for the deferred invocation.\n */\nvar now = function() {\n return root.Date.now();\n};\n\nmodule.exports = now;\n","var isObject = require('./isObject'),\n now = require('./now'),\n toNumber = require('./toNumber');\n\n/** Error message constants. */\nvar FUNC_ERROR_TEXT = 'Expected a function';\n\n/* Built-in method references for those with the same name as other `lodash` methods. */\nvar nativeMax = Math.max,\n nativeMin = Math.min;\n\n/**\n * Creates a debounced function that delays invoking `func` until after `wait`\n * milliseconds have elapsed since the last time the debounced function was\n * invoked. The debounced function comes with a `cancel` method to cancel\n * delayed `func` invocations and a `flush` method to immediately invoke them.\n * Provide `options` to indicate whether `func` should be invoked on the\n * leading and/or trailing edge of the `wait` timeout. The `func` is invoked\n * with the last arguments provided to the debounced function. Subsequent\n * calls to the debounced function return the result of the last `func`\n * invocation.\n *\n * **Note:** If `leading` and `trailing` options are `true`, `func` is\n * invoked on the trailing edge of the timeout only if the debounced function\n * is invoked more than once during the `wait` timeout.\n *\n * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n * until to the next tick, similar to `setTimeout` with a timeout of `0`.\n *\n * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)\n * for details over the differences between `_.debounce` and `_.throttle`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to debounce.\n * @param {number} [wait=0] The number of milliseconds to delay.\n * @param {Object} [options={}] The options object.\n * @param {boolean} [options.leading=false]\n * Specify invoking on the leading edge of the timeout.\n * @param {number} [options.maxWait]\n * The maximum time `func` is allowed to be delayed before it's invoked.\n * @param {boolean} [options.trailing=true]\n * Specify invoking on the trailing edge of the timeout.\n * @returns {Function} Returns the new debounced function.\n * @example\n *\n * // Avoid costly calculations while the window size is in flux.\n * jQuery(window).on('resize', _.debounce(calculateLayout, 150));\n *\n * // Invoke `sendMail` when clicked, debouncing subsequent calls.\n * jQuery(element).on('click', _.debounce(sendMail, 300, {\n * 'leading': true,\n * 'trailing': false\n * }));\n *\n * // Ensure `batchLog` is invoked once after 1 second of debounced calls.\n * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });\n * var source = new EventSource('/stream');\n * jQuery(source).on('message', debounced);\n *\n * // Cancel the trailing debounced invocation.\n * jQuery(window).on('popstate', debounced.cancel);\n */\nfunction debounce(func, wait, options) {\n var lastArgs,\n lastThis,\n maxWait,\n result,\n timerId,\n lastCallTime,\n lastInvokeTime = 0,\n leading = false,\n maxing = false,\n trailing = true;\n\n if (typeof func != 'function') {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n wait = toNumber(wait) || 0;\n if (isObject(options)) {\n leading = !!options.leading;\n maxing = 'maxWait' in options;\n maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;\n trailing = 'trailing' in options ? !!options.trailing : trailing;\n }\n\n function invokeFunc(time) {\n var args = lastArgs,\n thisArg = lastThis;\n\n lastArgs = lastThis = undefined;\n lastInvokeTime = time;\n result = func.apply(thisArg, args);\n return result;\n }\n\n function leadingEdge(time) {\n // Reset any `maxWait` timer.\n lastInvokeTime = time;\n // Start the timer for the trailing edge.\n timerId = setTimeout(timerExpired, wait);\n // Invoke the leading edge.\n return leading ? invokeFunc(time) : result;\n }\n\n function remainingWait(time) {\n var timeSinceLastCall = time - lastCallTime,\n timeSinceLastInvoke = time - lastInvokeTime,\n timeWaiting = wait - timeSinceLastCall;\n\n return maxing\n ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)\n : timeWaiting;\n }\n\n function shouldInvoke(time) {\n var timeSinceLastCall = time - lastCallTime,\n timeSinceLastInvoke = time - lastInvokeTime;\n\n // Either this is the first call, activity has stopped and we're at the\n // trailing edge, the system time has gone backwards and we're treating\n // it as the trailing edge, or we've hit the `maxWait` limit.\n return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||\n (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));\n }\n\n function timerExpired() {\n var time = now();\n if (shouldInvoke(time)) {\n return trailingEdge(time);\n }\n // Restart the timer.\n timerId = setTimeout(timerExpired, remainingWait(time));\n }\n\n function trailingEdge(time) {\n timerId = undefined;\n\n // Only invoke if we have `lastArgs` which means `func` has been\n // debounced at least once.\n if (trailing && lastArgs) {\n return invokeFunc(time);\n }\n lastArgs = lastThis = undefined;\n return result;\n }\n\n function cancel() {\n if (timerId !== undefined) {\n clearTimeout(timerId);\n }\n lastInvokeTime = 0;\n lastArgs = lastCallTime = lastThis = timerId = undefined;\n }\n\n function flush() {\n return timerId === undefined ? result : trailingEdge(now());\n }\n\n function debounced() {\n var time = now(),\n isInvoking = shouldInvoke(time);\n\n lastArgs = arguments;\n lastThis = this;\n lastCallTime = time;\n\n if (isInvoking) {\n if (timerId === undefined) {\n return leadingEdge(lastCallTime);\n }\n if (maxing) {\n // Handle invocations in a tight loop.\n clearTimeout(timerId);\n timerId = setTimeout(timerExpired, wait);\n return invokeFunc(lastCallTime);\n }\n }\n if (timerId === undefined) {\n timerId = setTimeout(timerExpired, wait);\n }\n return result;\n }\n debounced.cancel = cancel;\n debounced.flush = flush;\n return debounced;\n}\n\nmodule.exports = debounce;\n","var debounce = require('./debounce'),\n isObject = require('./isObject');\n\n/** Error message constants. */\nvar FUNC_ERROR_TEXT = 'Expected a function';\n\n/**\n * Creates a throttled function that only invokes `func` at most once per\n * every `wait` milliseconds. The throttled function comes with a `cancel`\n * method to cancel delayed `func` invocations and a `flush` method to\n * immediately invoke them. Provide `options` to indicate whether `func`\n * should be invoked on the leading and/or trailing edge of the `wait`\n * timeout. The `func` is invoked with the last arguments provided to the\n * throttled function. Subsequent calls to the throttled function return the\n * result of the last `func` invocation.\n *\n * **Note:** If `leading` and `trailing` options are `true`, `func` is\n * invoked on the trailing edge of the timeout only if the throttled function\n * is invoked more than once during the `wait` timeout.\n *\n * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n * until to the next tick, similar to `setTimeout` with a timeout of `0`.\n *\n * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)\n * for details over the differences between `_.throttle` and `_.debounce`.\n *\n * @static\n * @memberOf _\n * @since 0.1.0\n * @category Function\n * @param {Function} func The function to throttle.\n * @param {number} [wait=0] The number of milliseconds to throttle invocations to.\n * @param {Object} [options={}] The options object.\n * @param {boolean} [options.leading=true]\n * Specify invoking on the leading edge of the timeout.\n * @param {boolean} [options.trailing=true]\n * Specify invoking on the trailing edge of the timeout.\n * @returns {Function} Returns the new throttled function.\n * @example\n *\n * // Avoid excessively updating the position while scrolling.\n * jQuery(window).on('scroll', _.throttle(updatePosition, 100));\n *\n * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.\n * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });\n * jQuery(element).on('click', throttled);\n *\n * // Cancel the trailing throttled invocation.\n * jQuery(window).on('popstate', throttled.cancel);\n */\nfunction throttle(func, wait, options) {\n var leading = true,\n trailing = true;\n\n if (typeof func != 'function') {\n throw new TypeError(FUNC_ERROR_TEXT);\n }\n if (isObject(options)) {\n leading = 'leading' in options ? !!options.leading : leading;\n trailing = 'trailing' in options ? !!options.trailing : trailing;\n }\n return debounce(func, wait, {\n 'leading': leading,\n 'maxWait': wait,\n 'trailing': trailing\n });\n}\n\nmodule.exports = throttle;\n"],"names":["baseTrim","require","isObject","isSymbol","reIsBadHex","reIsBinary","reIsOctal","freeParseInt","parseInt","module","exports","value","other","valueOf","isBinary","test","slice","trimmedEndIndex","reTrimStart","string","replace","useRefCallback","callback","keepInit","arguments","length","undefined","callbackRef","useRef","current","useCallback","useResize","options","optionsRef","Object","assign","time","isDebounce","ref","callbackHandler","useLayoutEffect","el","computed","window","requestAnimationFrame","resizeObserver","ResizeObserver","debounce","throttle","observe","disconnect","useLoading","isLoading","setIsLoading","useState","Promise","resolve","then","catch","err","console","error","LoadingButton","_ref","onClick","children","loading","props","_objectWithoutPropertiesLoose","_excluded$3","React","Button","_extends","locale","message","confirm","delete","cancel","more","ConfirmButton","createWithIntlProvider","p","formatMessage","useIntl","_Object$assign","isDelete","title","showCancel","cancelText","onCancel","isModal","okText","placement","getContainer","renderModal","_excluded$2","open","setOpen","handlerConfirm","confirmContent","Flex","className","style$2","vertical","gap","e","stopPropagation","align","InfoCircleFilled","classnames","id","renderChildren","modalProps","wrapClassName","onOk","closable","okButtonProps","danger","Modal","Popconfirm","overlayClassName","getPopupContainer","onOpenChange","onConfirm","ConfirmLink","_excluded2$1","Typography","Link","ConfirmText","_ref2","_excluded3","Text","withConfirm","WrappedComponent","warn","_ref3","_excluded4","FetchButton","api","_excluded$1","fetchApi","useFetch","auto","refresh","async","output","data","errorStack","values","areaWidthComputed","memoize","_ref4","amountWidth","moreBtnWidth","buttonWidthList","spaceProps","compact","spaceWidth","indexOf","size","Number","isInteger","targetLength","targetWidth","_ref5","join","toString","ButtonGroup","DownOutlined","list","originalList","showLength","showLengthProps","trigger","_excluded","useMemo","filter","item","hidden","pick","showLengthState","setShowLength","computedLength","targetRef","moreEl","moreRef","widthEl","buttonEls","querySelectorAll","clientWidth","map","call","offsetWidth","startTransition","otherList","renderButton","renderItem","index","isDropdown","key","style$1","buttonComponent","tooltipProps","_excluded2","isConfirm","CurrentButton","currentButton","Tooltip","SpaceComponent","Space","Compact","Dropdown","rootClassName","menu","items","label","ButtonFooter","_ref6","height","setHeight","dom","clientHeight","style","reWhitespace","charAt","root","Date","now","toNumber","nativeMax","Math","max","nativeMin","min","func","wait","lastArgs","lastThis","maxWait","result","timerId","lastCallTime","lastInvokeTime","leading","maxing","trailing","TypeError","invokeFunc","args","thisArg","apply","shouldInvoke","timeSinceLastCall","timerExpired","trailingEdge","setTimeout","timeWaiting","remainingWait","debounced","isInvoking","this","leadingEdge","clearTimeout","flush"],"sourceRoot":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";(self.webpackChunk_kne_components_button_group=self.webpackChunk_kne_components_button_group||[]).push([[72],{11448:(e,t,o)=>{o(94922);var n=o(87558),r=o(55199),s=o(94312),a=o(13050),p=o(89261);window.PUBLIC_URL="/button-group";const u={url:"https://uc.fatalent.cn",tpl:"{{url}}/packages/@kne-components/{{remote}}/{{version}}/build"};var l=o(65457),c=o(94679),m=o(14152),d=o.n(m),i=(o(91296),o(46446));const g=d().ExampleRoutes,k=e=>{let{globalPreset:t,...o}=e;return(0,p.jsx)(c.HashRouter,{children:(0,p.jsx)(g,{...o,paths:[{key:"components",path:"/",title:"\u9996\u9875"}],preset:t,themeToken:t.themeToken,readme:i.default,pageProps:{menu:null}})})},f=l.createRoot(document.getElementById("root"));(async e=>{const t=await(async()=>{const e=(0,s.A)({errorHandler:e=>r.message.error(e)}),t={...u,remote:"components-core",defaultVersion:"0.4.3"};return(0,a.preset)({remotes:{default:t,"components-core":t,"components-iconfont":{...u,remote:"components-iconfont",defaultVersion:"0.2.1"},"button-group":{...u,remote:"button-group",defaultVersion:"0.1.
|
|
2
|
-
//# sourceMappingURL=72.
|
|
1
|
+
"use strict";(self.webpackChunk_kne_components_button_group=self.webpackChunk_kne_components_button_group||[]).push([[72],{11448:(e,t,o)=>{o(94922);var n=o(87558),r=o(55199),s=o(94312),a=o(13050),p=o(89261);window.PUBLIC_URL="/button-group";const u={url:"https://uc.fatalent.cn",tpl:"{{url}}/packages/@kne-components/{{remote}}/{{version}}/build"};var l=o(65457),c=o(94679),m=o(14152),d=o.n(m),i=(o(91296),o(46446));const g=d().ExampleRoutes,k=e=>{let{globalPreset:t,...o}=e;return(0,p.jsx)(c.HashRouter,{children:(0,p.jsx)(g,{...o,paths:[{key:"components",path:"/",title:"\u9996\u9875"}],preset:t,themeToken:t.themeToken,readme:i.default,pageProps:{menu:null}})})},f=l.createRoot(document.getElementById("root"));(async e=>{const t=await(async()=>{const e=(0,s.A)({errorHandler:e=>r.message.error(e)}),t={...u,remote:"components-core",defaultVersion:"0.4.3"};return(0,a.preset)({remotes:{default:t,"components-core":t,"components-iconfont":{...u,remote:"components-iconfont",defaultVersion:"0.2.1"},"button-group":{...u,remote:"button-group",defaultVersion:"0.1.16"}}}),(0,n.preset)({ajax:e,loading:(0,p.jsx)(r.Spin,{delay:500,style:{position:"absolute",left:"50%",padding:"10px",transform:"translateX(-50%)"}}),error:null,empty:(0,p.jsx)(r.Empty,{}),transformResponse:e=>{const{data:t}=e;return e.data={code:0===t.code?200:t.code,msg:t.msg,results:t.data},e}}),{ajax:e,enums:{},apis:{},themeToken:{colorPrimary:"#4183F0"}}})();f.render((0,p.jsx)(e,{themeToken:t.themeToken,globalPreset:t}))})(k)}}]);
|
|
2
|
+
//# sourceMappingURL=72.dc6ad441.chunk.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"static/js/72.
|
|
1
|
+
{"version":3,"file":"static/js/72.dc6ad441.chunk.js","mappings":"+MAMAA,OAAOC,WAAaC,gBAOpB,MAAMC,EAAW,CACfC,IAAK,yBAA0BC,IAAK,iE,oECTtC,MAAMC,EAAgBC,IAAAA,cAuBtB,EArBYC,IAAiC,IAAhC,aAAEC,KAAiBC,GAAOF,EACrC,OACIG,EAAAA,EAAAA,KAACC,EAAAA,WAAU,CAAAC,UACTF,EAAAA,EAAAA,KAACL,EAAa,IACNI,EACJI,MAAO,CACL,CACEC,IAAK,aACLC,KAAM,IACNC,MAAO,iBAGXC,OAAQT,EACRU,WAAYV,EAAaU,WACzBC,OAAQA,EAAAA,QACRC,UAAW,CAAEC,KAAM,WCjBzBC,EAAOC,EAAAA,WAAoBC,SAASC,eAAe,SAEtCC,WACjB,MAAMlB,OFSkBkB,WACxB,MAAMC,GAAOC,EAAAA,EAAAA,GAAW,CACtBC,aAAcC,GAASC,EAAAA,QAAQD,MAAMA,KAGjCE,EAAuB,IACxB9B,EAAU+B,OAAQ,kBAAmBC,eAAgB,SAgC1D,OA7BAC,EAAAA,EAAAA,QAAmB,CACjBC,QAAS,CACPC,QAASL,EAAsB,kBAAmBA,EAAsB,sBAAuB,IAC1F9B,EAAU+B,OAAQ,sBAAuBC,eAAgB,SAC3D,eAEC,IACChC,EAAU+B,OAAQ,eAAgBC,eAAgBjC,cAM3DqC,EAAAA,EAAAA,QAAY,CACVX,OAAMY,SAAS7B,EAAAA,EAAAA,KAAC8B,EAAAA,KAAI,CAACC,MAAO,IACPC,MAAO,CACLC,SAAU,WACVC,KAAM,MACNC,QAAS,OACTC,UAAW,sBACNhB,MAAO,KAAMiB,OAAOrC,EAAAA,EAAAA,KAACsC,EAAAA,MAAK,IAAKC,kBAAoBC,IAC7E,MAAM,KAAEC,GAASD,EAIjB,OAHAA,EAASC,KAAO,CACdC,KAAoB,IAAdD,EAAKC,KAAa,IAAMD,EAAKC,KAAMC,IAAKF,EAAKE,IAAKC,QAASH,EAAKA,MAEjED,KAIJ,CACLvB,OAAM4B,MAAO,CAAC,EAAGC,KAAM,CAAC,EAAGtC,WAAY,CACrCuC,aAAc,aEjDSC,GACpBpC,EAAKqC,QAAOjD,EAAAA,EAAAA,KAACkD,EAAG,CAAC1C,WAAYV,EAAaU,WAAYV,aAAcA,MAG7EqD,CAAWD,E","sources":["preset.js","App.js","bootstrap.js"],"sourcesContent":["import React from 'react';\nimport { preset as fetchPreset } from '@kne/react-fetch';\nimport { Spin, Empty, message } from 'antd';\nimport createAjax from '@kne/axios-fetch';\nimport { preset as remoteLoaderPreset } from '@kne/remote-loader';\n\nwindow.PUBLIC_URL = process.env.PUBLIC_URL;\n\n// url: 'https://registry.npmmirror.com',\n// tpl: '{{url}}/@kne-components%2f{{remote}}/{{version}}/files/build',\n\n// url: 'https://cdn.jsdelivr.net', tpl: '{{url}}/npm/@kne-components/{{remote}}@{{version}}/build'\n\nconst registry = {\n url: 'https://uc.fatalent.cn', tpl: '{{url}}/packages/@kne-components/{{remote}}/{{version}}/build'\n};\n\nexport const globalInit = async () => {\n const ajax = createAjax({\n errorHandler: error => message.error(error)\n });\n\n const componentsCoreRemote = {\n ...registry, remote: 'components-core', defaultVersion: '0.4.3'\n };\n\n remoteLoaderPreset({\n remotes: {\n default: componentsCoreRemote, 'components-core': componentsCoreRemote, 'components-iconfont': {\n ...registry, remote: 'components-iconfont', defaultVersion: '0.2.1'\n }, 'button-group': process.env.NODE_ENV === 'development' ? {\n remote: 'button-group', url: '/', tpl: '{{url}}'\n } : {\n ...registry, remote: 'button-group', defaultVersion: process.env.DEFAULT_VERSION\n }\n }\n });\n\n\n fetchPreset({\n ajax, loading: <Spin delay={500}\n style={{\n position: 'absolute',\n left: '50%',\n padding: '10px',\n transform: 'translateX(-50%)'\n }} />, error: null, empty: <Empty />, transformResponse: (response) => {\n const { data } = response;\n response.data = {\n code: data.code === 0 ? 200 : data.code, msg: data.msg, results: data.data\n };\n return response;\n }\n });\n\n return {\n ajax, enums: {}, apis: {}, themeToken: {\n colorPrimary: '#4183F0'\n }\n };\n};\n","import { HashRouter } from \"react-router-dom\";\nimport createEntry from \"@kne/modules-dev/dist/create-entry\";\nimport \"@kne/modules-dev/dist/create-entry.css\";\nimport readme from \"readme\";\n\nconst ExampleRoutes = createEntry.ExampleRoutes;\n\nconst App = ({ globalPreset, ...props }) => {\n return (\n <HashRouter>\n <ExampleRoutes\n {...props}\n paths={[\n {\n key: \"components\",\n path: \"/\",\n title: \"首页\",\n },\n ]}\n preset={globalPreset}\n themeToken={globalPreset.themeToken}\n readme={readme}\n pageProps={{ menu: null }}\n />\n </HashRouter>\n );\n};\n\nexport default App;\n","import { globalInit } from './preset';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\n\nconst renderRoot = async (App) => {\n const globalPreset = await globalInit();\n return root.render(<App themeToken={globalPreset.themeToken} globalPreset={globalPreset} />);\n};\n\nrenderRoot(App);\n"],"names":["window","PUBLIC_URL","process","registry","url","tpl","ExampleRoutes","createEntry","_ref","globalPreset","props","_jsx","HashRouter","children","paths","key","path","title","preset","themeToken","readme","pageProps","menu","root","ReactDOM","document","getElementById","async","ajax","createAjax","errorHandler","error","message","componentsCoreRemote","remote","defaultVersion","remoteLoaderPreset","remotes","default","fetchPreset","loading","Spin","delay","style","position","left","padding","transform","empty","Empty","transformResponse","response","data","code","msg","results","enums","apis","colorPrimary","globalInit","render","App","renderRoot"],"sourceRoot":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";(self.webpackChunk_kne_components_button_group=self.webpackChunk_kne_components_button_group||[]).push([[784],{8151:(o,n,u)=>{u.r(n),u.d(n,{default:()=>t,manifest:()=>e});const t={ButtonGroup:u(58872).A},e={name:"button-group",version:"0.1.
|
|
2
|
-
//# sourceMappingURL=784.
|
|
1
|
+
"use strict";(self.webpackChunk_kne_components_button_group=self.webpackChunk_kne_components_button_group||[]).push([[784],{8151:(o,n,u)=>{u.r(n),u.d(n,{default:()=>t,manifest:()=>e});const t={ButtonGroup:u(58872).A},e={name:"button-group",version:"0.1.16","open-version":!0,"public-url":"/button-group",modules:[{name:"button-group",baseDir:"/home/runner/work/button-group/button-group",description:"\u5b9e\u73b0\u4e86\u4e00\u4e2a\u6309\u94ae\u7ec4,loading\u6309\u94ae,\u786e\u8ba4\u6309\u94ae\u548c\u52a0\u8f7d\u6309\u94ae.",packageName:"@kne/button-group"}]}}}]);
|
|
2
|
+
//# sourceMappingURL=784.7c7ece2e.chunk.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"static/js/784.
|
|
1
|
+
{"version":3,"file":"static/js/784.7c7ece2e.chunk.js","mappings":"wLAA6D,SAAgBA,Y,SAAWA,GAC3EC,EAAW,CAAC,KAAO,eAAe,QAAU,SAAS,gBAAe,EAAK,aAAa,gBAAgB,QAAU,CAAC,CAAC,KAAO,eAAe,QAAU,8CAA8C,YAAc,+HAAgC,YAAc,sB","sources":["../node_modules/readme/modules.js"],"sourcesContent":["import ButtonGroup from '@components/button-group/README.md';export default {ButtonGroup};\nexport const manifest = {\"name\":\"button-group\",\"version\":\"0.1.16\",\"open-version\":true,\"public-url\":\"/button-group\",\"modules\":[{\"name\":\"button-group\",\"baseDir\":\"/home/runner/work/button-group/button-group\",\"description\":\"实现了一个按钮组,loading按钮,确认按钮和加载按钮.\",\"packageName\":\"@kne/button-group\"}]};"],"names":["ButtonGroup","manifest"],"sourceRoot":""}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";(self.webpackChunk_kne_components_button_group=self.webpackChunk_kne_components_button_group||[]).push([[872],{58872:(n,t,o)=>{o.d(t,{A:()=>r});var d=o(28711),e=o(28833);const r={name:"button-group",summary:"<p>@kne/button-group \u662f\u4e00\u4e2aReact\u6309\u94ae\u7ec4\u4ef6\u5e93\uff0c\u63d0\u4f9b\u4e86\u4e00\u7cfb\u5217\u529f\u80fd\u4e30\u5bcc\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u7528\u4e8e\u7b80\u5316\u5e38\u89c1\u7684\u6309\u94ae\u4ea4\u4e92\u573a\u666f\u3002\u8be5\u5e93\u4e13\u6ce8\u4e8e\u63d0\u4f9b\u81ea\u9002\u5e94\u5e03\u5c40\u3001\u52a0\u8f7d\u72b6\u6001\u7ba1\u7406\u3001\u786e\u8ba4\u64cd\u4f5c\u548c\u6570\u636e\u8bf7\u6c42\u7b49\u529f\u80fd\uff0c\u4f7f\u5f00\u53d1\u8005\u80fd\u591f\u5feb\u901f\u5b9e\u73b0\u5404\u79cd\u590d\u6742\u7684\u6309\u94ae\u4ea4\u4e92\u9700\u6c42\u3002</p>\n<h3>\u4e3b\u8981\u7ec4\u4ef6</h3>\n<h4>ButtonGroup</h4>\n<p>\u81ea\u9002\u5e94\u7684\u6309\u94ae\u7ec4\u7ec4\u4ef6\uff0c\u80fd\u591f\u6839\u636e\u5bb9\u5668\u5bbd\u5ea6\u81ea\u52a8\u8c03\u6574\u663e\u793a\u7684\u6309\u94ae\u6570\u91cf\u3002\u5f53\u5bb9\u5668\u5bbd\u5ea6\u4e0d\u8db3\u4ee5\u663e\u793a\u6240\u6709\u6309\u94ae\u65f6\uff0c\u4f1a\u81ea\u52a8\u5c06\u591a\u4f59\u7684\u6309\u94ae\u653e\u5165\u4e0b\u62c9\u83dc\u5355\u4e2d\uff0c\u786e\u4fdd\u754c\u9762\u5e03\u5c40\u7f8e\u89c2\u4e14\u529f\u80fd\u5b8c\u6574\u3002</p>\n<h4>LoadingButton</h4>\n<p>\u5c01\u88c5\u4e86\u52a0\u8f7d\u72b6\u6001\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u7b80\u5316\u4e86\u5f02\u6b65\u64cd\u4f5c\u7684\u5904\u7406\u3002\u901a\u8fc7\u5185\u7f6e\u7684\u72b6\u6001\u7ba1\u7406\uff0c\u5728\u5f02\u6b65\u64cd\u4f5c\u6267\u884c\u671f\u95f4\u81ea\u52a8\u663e\u793a\u52a0\u8f7d\u72b6\u6001\uff0c\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u3002\u540c\u65f6\u63d0\u4f9b\u4e86useLoading hook\uff0c\u65b9\u4fbf\u5728\u5176\u4ed6\u7ec4\u4ef6\u4e2d\u590d\u7528\u52a0\u8f7d\u72b6\u6001\u7ba1\u7406\u903b\u8f91\u3002</p>\n<h4>ConfirmButton</h4>\n<p>\u5e26\u6709\u786e\u8ba4\u529f\u80fd\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u652f\u6301\u5f39\u7a97\u786e\u8ba4\u548c\u6a21\u6001\u6846\u786e\u8ba4\u4e24\u79cd\u6a21\u5f0f\u3002\u9002\u7528\u4e8e\u9700\u8981\u7528\u6237\u4e8c\u6b21\u786e\u8ba4\u7684\u64cd\u4f5c\uff0c\u5982\u5220\u9664\u3001\u63d0\u4ea4\u7b49\u91cd\u8981\u64cd\u4f5c\u3002\u540c\u65f6\u63d0\u4f9b\u4e86ConfirmLink\u548cConfirmText\u53d8\u4f53\uff0c\u4ee5\u53cawithConfirm\u9ad8\u9636\u7ec4\u4ef6\uff0c\u6ee1\u8db3\u4e0d\u540c\u573a\u666f\u7684\u786e\u8ba4\u9700\u6c42\u3002</p>\n<h4>FetchButton</h4>\n<p>\u96c6\u6210\u4e86\u6570\u636e\u8bf7\u6c42\u529f\u80fd\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u57fa\u4e8e@kne/react-fetch\u5e93\u5b9e\u73b0\u3002\u53ef\u4ee5\u76f4\u63a5\u5904\u7406API\u8bf7\u6c42\uff0c\u5e76\u5728\u8bf7\u6c42\u8fc7\u7a0b\u4e2d\u81ea\u52a8\u7ba1\u7406\u52a0\u8f7d\u72b6\u6001\uff0c\u7b80\u5316\u4e86\u6570\u636e\u4ea4\u4e92\u7684\u5b9e\u73b0\u3002</p>\n<h4>ButtonFooter</h4>\n<p>\u9875\u9762\u5e95\u90e8\u6309\u94ae\u533a\u57df\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u81ea\u52a8\u8ba1\u7b97\u9ad8\u5ea6\u5e76\u8bbe\u7f6eCSS\u53d8\u91cf\uff0c\u65b9\u4fbf\u9875\u9762\u5e03\u5c40\u548c\u6837\u5f0f\u8c03\u6574\u3002</p>\n<h3>\u7279\u6027</h3>\n<ul>\n<li><strong>\u81ea\u9002\u5e94\u5e03\u5c40</strong>\uff1a\u6839\u636e\u5bb9\u5668\u5bbd\u5ea6\u81ea\u52a8\u8c03\u6574\u6309\u94ae\u663e\u793a\u65b9\u5f0f</li>\n<li><strong>\u52a0\u8f7d\u72b6\u6001\u7ba1\u7406</strong>\uff1a\u7b80\u5316\u5f02\u6b65\u64cd\u4f5c\u7684\u52a0\u8f7d\u72b6\u6001\u5904\u7406</li>\n<li><strong>\u64cd\u4f5c\u786e\u8ba4</strong>\uff1a\u63d0\u4f9b\u591a\u79cd\u786e\u8ba4\u6a21\u5f0f\uff0c\u589e\u5f3a\u7528\u6237\u64cd\u4f5c\u5b89\u5168\u6027</li>\n<li><strong>\u6570\u636e\u8bf7\u6c42\u96c6\u6210</strong>\uff1a\u7b80\u5316\u6309\u94ae\u4e0e\u540e\u7aefAPI\u7684\u4ea4\u4e92</li>\n<li><strong>\u56fd\u9645\u5316\u652f\u6301</strong>\uff1a\u5185\u7f6e\u4e2d\u82f1\u6587\u8bed\u8a00\u5305</li>\n<li><strong>\u9ad8\u5ea6\u53ef\u5b9a\u5236</strong>\uff1a\u7ec4\u4ef6\u63d0\u4f9b\u4e30\u5bcc\u7684\u914d\u7f6e\u9009\u9879</li>\n</ul>\n<h3>\u8bbe\u8ba1\u7406\u5ff5</h3>\n<p>\u8be5\u7ec4\u4ef6\u5e93\u7684\u8bbe\u8ba1\u7406\u5ff5\u662f\u901a\u8fc7\u5c01\u88c5\u5e38\u89c1\u7684\u6309\u94ae\u4ea4\u4e92\u6a21\u5f0f\uff0c\u63d0\u4f9b\u5f00\u7bb1\u5373\u7528\u7684\u89e3\u51b3\u65b9\u6848\uff0c\u540c\u65f6\u4fdd\u6301\u8db3\u591f\u7684\u7075\u6d3b\u6027\u548c\u53ef\u6269\u5c55\u6027\u3002\u4e3b\u8981\u4f53\u73b0\u5728\u4ee5\u4e0b\u51e0\u4e2a\u65b9\u9762\uff1a</p>\n<ol>\n<li>\n<p><strong>\u5173\u6ce8\u70b9\u5206\u79bb</strong>\uff1a\u6bcf\u4e2a\u7ec4\u4ef6\u4e13\u6ce8\u4e8e\u89e3\u51b3\u7279\u5b9a\u7684\u95ee\u9898\uff0c\u5982ButtonGroup\u4e13\u6ce8\u4e8e\u5e03\u5c40\uff0cLoadingButton\u4e13\u6ce8\u4e8e\u72b6\u6001\u7ba1\u7406\u3002</p>\n</li>\n<li>\n<p><strong>\u7ec4\u5408\u4f18\u4e8e\u7ee7\u627f</strong>\uff1a\u901a\u8fc7\u7ec4\u5408\u4e0d\u540c\u7684\u529f\u80fd\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u5b9e\u73b0\u590d\u6742\u7684\u4ea4\u4e92\u9700\u6c42\uff0c\u5982FetchButton\u5c31\u662fLoadingButton\u4e0e\u6570\u636e\u8bf7\u6c42\u529f\u80fd\u7684\u7ec4\u5408\u3002</p>\n</li>\n<li>\n<p><strong>\u58f0\u660e\u5f0fAPI</strong>\uff1a\u63d0\u4f9b\u7b80\u6d01\u660e\u4e86\u7684API\uff0c\u4f7f\u5f00\u53d1\u8005\u80fd\u591f\u4ee5\u58f0\u660e\u5f0f\u7684\u65b9\u5f0f\u63cf\u8ff0UI\u548c\u4ea4\u4e92\u884c\u4e3a\u3002</p>\n</li>\n<li>\n<p><strong>\u6e10\u8fdb\u5f0f\u589e\u5f3a</strong>\uff1a\u57fa\u7840\u7ec4\u4ef6\u53ef\u4ee5\u72ec\u7acb\u4f7f\u7528\uff0c\u4e5f\u53ef\u4ee5\u4e0e\u5176\u4ed6\u7ec4\u4ef6\u7ec4\u5408\u4f7f\u7528\uff0c\u5b9e\u73b0\u66f4\u590d\u6742\u7684\u529f\u80fd\u3002</p>\n</li>\n<li>\n<p><strong>\u7528\u6237\u4f53\u9a8c\u4f18\u5148</strong>\uff1a\u6ce8\u91cd\u7ec6\u8282\uff0c\u5982\u81ea\u9002\u5e94\u5e03\u5c40\u3001\u52a0\u8f7d\u72b6\u6001\u53cd\u9988\u7b49\uff0c\u63d0\u5347\u6700\u7ec8\u7528\u6237\u7684\u4f7f\u7528\u4f53\u9a8c\u3002</p>\n</li>\n</ol>",description:"\u5b9e\u73b0\u4e86\u4e00\u4e2a\u6309\u94ae\u7ec4,loading\u6309\u94ae,\u786e\u8ba4\u6309\u94ae\u548c\u52a0\u8f7d\u6309\u94ae.",packageName:"@kne/button-group",api:'<h3>ButtonGroup \u7ec4\u4ef6</h3>\n<p>ButtonGroup\u662f\u4e00\u4e2a\u81ea\u9002\u5e94\u7684\u6309\u94ae\u7ec4\u7ec4\u4ef6\uff0c\u80fd\u591f\u6839\u636e\u5bb9\u5668\u5bbd\u5ea6\u81ea\u52a8\u8c03\u6574\u663e\u793a\u7684\u6309\u94ae\u6570\u91cf\uff0c\u5e76\u5c06\u591a\u4f59\u7684\u6309\u94ae\u653e\u5165\u4e0b\u62c9\u83dc\u5355\u4e2d\u3002</p>\n<h4>\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u6309\u94ae\u7ec4\u7684\u5b50\u5143\u7d20\uff0c\u901a\u5e38\u662f\u4e00\u7cfb\u5217\u6309\u94ae</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n</tr>\n<tr>\n<td>style</td>\n<td>object</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f</td>\n</tr>\n<tr>\n<td>moreText</td>\n<td>string</td>\n<td>"\u66f4\u591a"</td>\n<td>\u66f4\u591a\u6309\u94ae\u7684\u6587\u672c</td>\n</tr>\n<tr>\n<td>buttonWidth</td>\n<td>number</td>\n<td>-</td>\n<td>\u6309\u94ae\u7684\u56fa\u5b9a\u5bbd\u5ea6\uff0c\u5982\u679c\u4e0d\u8bbe\u7f6e\u5219\u81ea\u52a8\u8ba1\u7b97</td>\n</tr>\n<tr>\n<td>buttonMargin</td>\n<td>number</td>\n<td>8</td>\n<td>\u6309\u94ae\u4e4b\u95f4\u7684\u95f4\u8ddd</td>\n</tr>\n<tr>\n<td>dropdownProps</td>\n<td>object</td>\n<td>-</td>\n<td>\u4f20\u9012\u7ed9Dropdown\u7ec4\u4ef6\u7684\u5c5e\u6027</td>\n</tr>\n<tr>\n<td>menuProps</td>\n<td>object</td>\n<td>-</td>\n<td>\u4f20\u9012\u7ed9Menu\u7ec4\u4ef6\u7684\u5c5e\u6027</td>\n</tr>\n<tr>\n<td>getPopupContainer</td>\n<td>function</td>\n<td>-</td>\n<td>\u83dc\u5355\u6e32\u67d3\u7236\u8282\u70b9\uff0c\u9ed8\u8ba4\u6e32\u67d3\u5230body\u4e0a</td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>function</td>\n<td>-</td>\n<td>\u83dc\u5355\u663e\u793a\u72b6\u6001\u6539\u53d8\u65f6\u7684\u56de\u8c03\u51fd\u6570</td>\n</tr>\n<tr>\n<td>onMoreClick</td>\n<td>function</td>\n<td>-</td>\n<td>\u70b9\u51fb\u66f4\u591a\u6309\u94ae\u65f6\u7684\u56de\u8c03\u51fd\u6570</td>\n</tr>\n<tr>\n<td>onMenuClick</td>\n<td>function</td>\n<td>-</td>\n<td>\u70b9\u51fb\u83dc\u5355\u9879\u65f6\u7684\u56de\u8c03\u51fd\u6570</td>\n</tr>\n<tr>\n<td>moreIcon</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u66f4\u591a\u6309\u94ae\u7684\u56fe\u6807</td>\n</tr>\n<tr>\n<td>moreButtonProps</td>\n<td>object</td>\n<td>-</td>\n<td>\u4f20\u9012\u7ed9\u66f4\u591a\u6309\u94ae\u7684\u5c5e\u6027</td>\n</tr>\n<tr>\n<td>forceRender</td>\n<td>boolean</td>\n<td>false</td>\n<td>\u662f\u5426\u5f3a\u5236\u6e32\u67d3\u6240\u6709\u6309\u94ae\uff0c\u4e0d\u8fdb\u884c\u81ea\u9002\u5e94\u5904\u7406</td>\n</tr>\n</tbody>\n</table>\n<h3>LoadingButton \u7ec4\u4ef6</h3>\n<p>LoadingButton\u662f\u4e00\u4e2a\u5c01\u88c5\u4e86\u52a0\u8f7d\u72b6\u6001\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u7b80\u5316\u4e86\u5f02\u6b65\u64cd\u4f5c\u7684\u5904\u7406\u3002</p>\n<h4>\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>onClick</td>\n<td>function</td>\n<td>-</td>\n<td>\u70b9\u51fb\u6309\u94ae\u65f6\u7684\u56de\u8c03\u51fd\u6570\uff0c\u53ef\u4ee5\u8fd4\u56dePromise</td>\n</tr>\n<tr>\n<td>loading</td>\n<td>boolean</td>\n<td>false</td>\n<td>\u662f\u5426\u663e\u793a\u52a0\u8f7d\u72b6\u6001</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>boolean</td>\n<td>false</td>\n<td>\u662f\u5426\u7981\u7528\u6309\u94ae</td>\n</tr>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u6309\u94ae\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>...rest</td>\n<td>-</td>\n<td>-</td>\n<td>\u5176\u4ed6\u4f20\u9012\u7ed9Button\u7ec4\u4ef6\u7684\u5c5e\u6027</td>\n</tr>\n</tbody>\n</table>\n<h3>useLoading Hook</h3>\n<p>useLoading\u662f\u4e00\u4e2a\u7528\u4e8e\u7ba1\u7406\u5f02\u6b65\u64cd\u4f5c\u52a0\u8f7d\u72b6\u6001\u7684Hook\u3002</p>\n<h4>\u53c2\u6570\u4e0e\u8fd4\u56de\u503c</h4>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>-</td>\n<td>-</td>\n<td>-</td>\n<td>\u4e0d\u63a5\u53d7\u53c2\u6570</td>\n</tr>\n</tbody>\n</table>\n<p><strong>\u8fd4\u56de\u503c</strong>\uff1a</p>\n<table>\n<thead>\n<tr>\n<th>\u540d\u79f0</th>\n<th>\u7c7b\u578b</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>loading</td>\n<td>boolean</td>\n<td>\u5f53\u524d\u52a0\u8f7d\u72b6\u6001</td>\n</tr>\n<tr>\n<td>withLoading</td>\n<td>function</td>\n<td>\u5305\u88c5\u5f02\u6b65\u51fd\u6570\uff0c\u81ea\u52a8\u7ba1\u7406\u52a0\u8f7d\u72b6\u6001</td>\n</tr>\n</tbody>\n</table>\n<h3>ConfirmButton \u7ec4\u4ef6</h3>\n<p>ConfirmButton\u662f\u4e00\u4e2a\u5e26\u6709\u786e\u8ba4\u529f\u80fd\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u652f\u6301\u5f39\u7a97\u786e\u8ba4\u548c\u6a21\u6001\u6846\u786e\u8ba4\u4e24\u79cd\u6a21\u5f0f\u3002</p>\n<h4>\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u6309\u94ae\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>function</td>\n<td>-</td>\n<td>\u786e\u8ba4\u540e\u7684\u56de\u8c03\u51fd\u6570</td>\n</tr>\n<tr>\n<td>title</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td>\u786e\u8ba4\u6846\u6807\u9898</td>\n</tr>\n<tr>\n<td>content</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td>\u786e\u8ba4\u6846\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>okText</td>\n<td>string</td>\n<td>"\u786e\u5b9a"</td>\n<td>\u786e\u8ba4\u6309\u94ae\u6587\u5b57</td>\n</tr>\n<tr>\n<td>cancelText</td>\n<td>string</td>\n<td>"\u53d6\u6d88"</td>\n<td>\u53d6\u6d88\u6309\u94ae\u6587\u5b57</td>\n</tr>\n<tr>\n<td>type</td>\n<td>"popconfirm" | "modal"</td>\n<td>"popconfirm"</td>\n<td>\u786e\u8ba4\u6846\u7c7b\u578b\uff0c\u652f\u6301\u6c14\u6ce1\u786e\u8ba4\u6846\u548c\u6a21\u6001\u6846</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>object</td>\n<td>-</td>\n<td>\u4f20\u9012\u7ed9Modal\u7ec4\u4ef6\u7684\u5c5e\u6027\uff08\u5f53type\u4e3a"modal"\u65f6\u6709\u6548\uff09</td>\n</tr>\n<tr>\n<td>popconfirmProps</td>\n<td>object</td>\n<td>-</td>\n<td>\u4f20\u9012\u7ed9Popconfirm\u7ec4\u4ef6\u7684\u5c5e\u6027\uff08\u5f53type\u4e3a"popconfirm"\u65f6\u6709\u6548\uff09</td>\n</tr>\n<tr>\n<td>...rest</td>\n<td>-</td>\n<td>-</td>\n<td>\u5176\u4ed6\u4f20\u9012\u7ed9Button\u7ec4\u4ef6\u7684\u5c5e\u6027</td>\n</tr>\n</tbody>\n</table>\n<h3>ConfirmLink \u7ec4\u4ef6</h3>\n<p>ConfirmLink\u662fConfirmButton\u7684\u53d8\u4f53\uff0c\u6e32\u67d3\u4e3a\u94fe\u63a5\u6837\u5f0f\u3002</p>\n<h4>\u5c5e\u6027</h4>\n<p>\u4e0eConfirmButton\u76f8\u540c\uff0c\u4f46\u9ed8\u8ba4\u6e32\u67d3\u4e3a\u94fe\u63a5\u6837\u5f0f\u3002</p>\n<h3>ConfirmText \u7ec4\u4ef6</h3>\n<p>ConfirmText\u662fConfirmButton\u7684\u53d8\u4f53\uff0c\u6e32\u67d3\u4e3a\u7eaf\u6587\u672c\u6837\u5f0f\u3002</p>\n<h4>\u5c5e\u6027</h4>\n<p>\u4e0eConfirmButton\u76f8\u540c\uff0c\u4f46\u9ed8\u8ba4\u6e32\u67d3\u4e3a\u7eaf\u6587\u672c\u6837\u5f0f\u3002</p>\n<h3>withConfirm \u9ad8\u9636\u7ec4\u4ef6</h3>\n<p>withConfirm\u662f\u4e00\u4e2a\u9ad8\u9636\u7ec4\u4ef6\uff0c\u7528\u4e8e\u4e3a\u4efb\u610f\u7ec4\u4ef6\u6dfb\u52a0\u786e\u8ba4\u529f\u80fd\u3002</p>\n<h4>\u53c2\u6570</h4>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>options</td>\n<td>object</td>\n<td>-</td>\n<td>\u786e\u8ba4\u6846\u914d\u7f6e\u9009\u9879</td>\n</tr>\n<tr>\n<td>options.title</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td>\u786e\u8ba4\u6846\u6807\u9898</td>\n</tr>\n<tr>\n<td>options.content</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td>\u786e\u8ba4\u6846\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>options.okText</td>\n<td>string</td>\n<td>"\u786e\u5b9a"</td>\n<td>\u786e\u8ba4\u6309\u94ae\u6587\u5b57</td>\n</tr>\n<tr>\n<td>options.cancelText</td>\n<td>string</td>\n<td>"\u53d6\u6d88"</td>\n<td>\u53d6\u6d88\u6309\u94ae\u6587\u5b57</td>\n</tr>\n<tr>\n<td>options.type</td>\n<td>"popconfirm" | "modal"</td>\n<td>"popconfirm"</td>\n<td>\u786e\u8ba4\u6846\u7c7b\u578b</td>\n</tr>\n<tr>\n<td>options.modalProps</td>\n<td>object</td>\n<td>-</td>\n<td>\u4f20\u9012\u7ed9Modal\u7ec4\u4ef6\u7684\u5c5e\u6027</td>\n</tr>\n<tr>\n<td>options.popconfirmProps</td>\n<td>object</td>\n<td>-</td>\n<td>\u4f20\u9012\u7ed9Popconfirm\u7ec4\u4ef6\u7684\u5c5e\u6027</td>\n</tr>\n</tbody>\n</table>\n<h3>FetchButton \u7ec4\u4ef6</h3>\n<p>FetchButton\u662f\u4e00\u4e2a\u96c6\u6210\u4e86\u6570\u636e\u8bf7\u6c42\u529f\u80fd\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u57fa\u4e8e@kne/react-fetch\u5e93\u5b9e\u73b0\u3002</p>\n<h4>\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u6309\u94ae\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>api</td>\n<td>string | object | function</td>\n<td>-</td>\n<td>\u8bf7\u6c42API\uff0c\u53ef\u4ee5\u662f\u5b57\u7b26\u4e32\u3001\u5bf9\u8c61\u6216\u51fd\u6570</td>\n</tr>\n<tr>\n<td>params</td>\n<td>object</td>\n<td>-</td>\n<td>\u8bf7\u6c42\u53c2\u6570</td>\n</tr>\n<tr>\n<td>onSuccess</td>\n<td>function</td>\n<td>-</td>\n<td>\u8bf7\u6c42\u6210\u529f\u56de\u8c03</td>\n</tr>\n<tr>\n<td>onError</td>\n<td>function</td>\n<td>-</td>\n<td>\u8bf7\u6c42\u5931\u8d25\u56de\u8c03</td>\n</tr>\n<tr>\n<td>beforeFetch</td>\n<td>function</td>\n<td>-</td>\n<td>\u8bf7\u6c42\u524d\u5904\u7406\u51fd\u6570\uff0c\u8fd4\u56defalse\u53ef\u963b\u6b62\u8bf7\u6c42</td>\n</tr>\n<tr>\n<td>afterFetch</td>\n<td>function</td>\n<td>-</td>\n<td>\u8bf7\u6c42\u540e\u5904\u7406\u51fd\u6570</td>\n</tr>\n<tr>\n<td>fetchOptions</td>\n<td>object</td>\n<td>-</td>\n<td>\u4f20\u9012\u7ed9fetch\u51fd\u6570\u7684\u9009\u9879</td>\n</tr>\n<tr>\n<td>...rest</td>\n<td>-</td>\n<td>-</td>\n<td>\u5176\u4ed6\u4f20\u9012\u7ed9LoadingButton\u7ec4\u4ef6\u7684\u5c5e\u6027</td>\n</tr>\n</tbody>\n</table>\n<h3>ButtonFooter \u7ec4\u4ef6</h3>\n<p>ButtonFooter\u662f\u4e00\u4e2a\u9875\u9762\u5e95\u90e8\u6309\u94ae\u533a\u57df\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u81ea\u52a8\u8ba1\u7b97\u9ad8\u5ea6\u5e76\u8bbe\u7f6eCSS\u53d8\u91cf\u3002</p>\n<h4>\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u6309\u94ae\u533a\u57df\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n</tr>\n</tbody>\n</table>',example:{isFull:!1,className:"button_group_e0271",style:".button_group_e0271 .ant-card {\n border-color: black;\n text-align: center;\n width: 200px;\n}",list:[{title:"ButtonGroup",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:"const { default: ButtonGroup, ConfirmButton } = _ButtonGroup;\nconst { Flex, Button } = antd;\nconst { useState, useEffect } = React;\n\nconst Example = () => {\n const [width, setWidth] = useState(200);\n return (<Flex gap={8}>\n <div style={{ width: `${width}px` }}>\n <ButtonGroup\n list={[{\n type: 'primary', children: '\u64cd\u4f5c1'\n }, {\n type: 'primary', children: '\u64cd\u4f5c1-1', hidden: true\n }, {\n children: '\u64cd\u4f5c2',\n tooltipProps: {\n title: '\u64cd\u4f5c2'\n }\n }, {\n children: '\u64cd\u4f5c3', disabled: true,\n tooltipProps: {\n title: '\u64cd\u4f5c3==='\n }\n }, {\n children: '\u64cd\u4f5c4', message: '\u786e\u5b9a\u8981\u6267\u884c\u64cd\u4f5c\u5417\uff1f', disabled: true\n }, {\n children: '\u64cd\u4f5c5', message: '\u786e\u5b9a\u8981\u6267\u884c\u64cd\u4f5c\u5417\uff1f'\n }]}\n />\n </div>\n <Flex gap={8}>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width + 20;\n });\n }}\n >\n \u589e\u52a0\u5bb9\u5668\u5bbd\u5ea6\n </Button>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width - 20;\n });\n }}\n >\n \u51cf\u5c11\u5bb9\u5668\u5bbd\u5ea6\n </Button>\n </Flex>\n </Flex>);\n};\n\nconst CompactExample = () => {\n const [width, setWidth] = useState(200);\n return (<Flex gap={8}>\n <div style={{ width: `${width}px` }}>\n <ButtonGroup\n compact\n list={[{\n type: 'primary', children: '\u64cd\u4f5c1'\n }, {\n children: '\u64cd\u4f5c2'\n }, {\n children: '\u64cd\u4f5c3', hidden: true\n }, {\n children: '\u64cd\u4f5c4', message: '\u786e\u5b9a\u8981\u6267\u884c\u64cd\u4f5c\u5417\uff1f'\n }]}\n />\n </div>\n <Flex gap={8}>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width + 20;\n });\n }}\n >\n \u589e\u52a0\u5bb9\u5668\u5bbd\u5ea6\n </Button>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width - 20;\n });\n }}\n >\n \u51cf\u5c11\u5bb9\u5668\u5bbd\u5ea6\n </Button>\n </Flex>\n </Flex>);\n};\n\nconst LoadChildren = ({ children }) => {\n const [loading, setLoading] = useState(true);\n useEffect(() => {\n setTimeout(() => {\n setLoading(false);\n }, 1000);\n }, []);\n if (loading) {\n return null;\n }\n return children({\n onClick: () => {\n console.log('\u52a0\u8f7d\u5b8c\u6210');\n }\n });\n};\nconst FunctionProps = () => {\n const [width, setWidth] = useState(200);\n return (<Flex gap={8}>\n <div style={{ width: `${width}px` }}>\n <ButtonGroup\n list={[(props) => {\n return (<Button {...props} type=\"primary\">\n \u64cd\u4f5c1\n </Button>);\n }, (props) => {\n return <Button {...props}>\u64cd\u4f5c2</Button>;\n }, (props) => {\n return <Button {...props}>\u64cd\u4f5c3</Button>;\n }, (props) => {\n return (<LoadChildren key={props.key}>\n {({ onClick }) => {\n return (<ConfirmButton\n {...props}\n isModal={props.isDropdown}\n message=\"\u786e\u5b9a\u8981\u6267\u884c\u64cd\u4f5c\u5417\uff1f\"\n onClick={onClick}\n >\n \u64cd\u4f5c4\n </ConfirmButton>);\n }}\n </LoadChildren>);\n }]}\n />\n </div>\n <Flex gap={8}>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width + 20;\n });\n }}\n >\n \u589e\u52a0\u5bb9\u5668\u5bbd\u5ea6\n </Button>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width - 20;\n });\n }}\n >\n \u51cf\u5c11\u5bb9\u5668\u5bbd\u5ea6\n </Button>\n </Flex>\n </Flex>);\n};\n\nconst BaseExample = () => {\n return <div>\n <Flex vertical gap={8}>\n <div>base:</div>\n <Example />\n <div>compact:</div>\n <CompactExample />\n <div>function props:</div>\n <FunctionProps />\n </Flex>\n </div>;\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ButtonGroup",packageName:"@kne/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:d},{name:"antd",packageName:"antd",component:e}]},{title:"LoadingButton",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:"const { LoadingButton } = _ButtonGroup;\nconst { Space, App } = antd;\nconst BaseExample = () => {\n const { message } = App.useApp();\n const clickHandler = () => {\n message.success('\u70b9\u51fb\u6309\u94ae1s\u540e\u5b8c\u6210\u52a0\u8f7d');\n return new Promise((resolve) => {\n setTimeout(() => {\n message.success('\u5b8c\u6210');\n resolve();\n }, 1000);\n });\n };\n return (<Space wrap>\n <LoadingButton onClick={clickHandler}>\u6309\u94ae</LoadingButton>\n <LoadingButton onClick={clickHandler}>\n {(isLoading) => (isLoading ? '\u6b63\u5728\u52a0\u8f7d\u4e2d...' : '\u5207\u6362\u52a0\u8f7d\u6587\u6848')}\n </LoadingButton>\n </Space>);\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ButtonGroup",packageName:"@kne/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:d},{name:"antd",packageName:"antd",component:e}]},{title:"ConfirmButton",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { ConfirmButton, ConfirmLink, ConfirmText } = _ButtonGroup;\nconst { Flex } = antd;\nconst BaseExample = () => {\n return <Flex gap={8} vertical>\n <Flex gap={8}>\n <ConfirmButton message="\u786e\u5b9a\u8981\u5220\u9664\u5417?" onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n resolve();\n }, 500);\n });\n }}>\u5220\u9664</ConfirmButton>\n\n <ConfirmButton disabled message="\u786e\u5b9a\u8981\u5220\u9664\u5417?" onClick={() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n }}>\u5220\u9664</ConfirmButton>\n\n <ConfirmButton title="\u786e\u5b9a\u8981\u5220\u9664\u5417?"\n message="\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664"\n onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n resolve();\n }, 500);\n });\n }}>\u5220\u9664</ConfirmButton>\n\n <ConfirmButton isDelete message="\u786e\u5b9a\u8981\u5220\u9664\u5417?" onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n resolve();\n }, 500);\n });\n }}>\u5220\u9664</ConfirmButton>\n\n <ConfirmButton isDelete title="\u786e\u5b9a\u8981\u5220\u9664\u5417?"\n message="\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664"\n onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n resolve();\n }, 500);\n });\n }}>\u5220\u9664</ConfirmButton>\n </Flex>\n <Flex gap={8}>\n <ConfirmButton isModal message="\u786e\u5b9a\u8981\u5220\u9664\u5417?" onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n resolve();\n }, 500);\n });\n }}>\u5220\u9664</ConfirmButton>\n\n <ConfirmButton isModal title="\u786e\u5b9a\u8981\u5220\u9664\u5417?"\n message="\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664"\n onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n resolve();\n }, 500);\n });\n }}>\u5220\u9664</ConfirmButton>\n\n <ConfirmButton isModal isDelete message="\u786e\u5b9a\u8981\u5220\u9664\u5417?" onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n resolve();\n }, 500);\n });\n }}>\u5220\u9664</ConfirmButton>\n\n <ConfirmButton isModal isDelete title="\u786e\u5b9a\u8981\u5220\u9664\u5417?"\n message="\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664"\n onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n resolve();\n }, 500);\n });\n }}>\u5220\u9664</ConfirmButton>\n </Flex>\n <Flex gap={8}>\n <ConfirmLink onClick={() => {\n console.log(\'\u5220\u9664\');\n }}>\u5220\u9664</ConfirmLink>\n <ConfirmText onClick={() => {\n console.log(\'\u5220\u9664\');\n }}>\u5220\u9664</ConfirmText>\n </Flex>\n </Flex>;\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_ButtonGroup",packageName:"@kne/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:d},{name:"antd",packageName:"antd",component:e}]},{title:"FetchButton",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:"const { FetchButton } = _ButtonGroup;\n\nconst BaseExample = () => {\n return <div>\n <FetchButton api={{\n loader: async () => {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve({ data: 'xxxxx' });\n }, 1000);\n });\n }\n }} onClick={(data) => {\n console.log(data);\n }}>\u70b9\u51fb\u52a0\u8f7d\u6570\u636e</FetchButton>\n </div>;\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ButtonGroup",packageName:"@kne/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:d},{name:"antd",packageName:"antd",component:e}]},{title:"ButtonFooter",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { ButtonFooter } = _ButtonGroup;\nconst { Flex, Button } = antd;\nconst BaseExample = () => {\n return (\n <ButtonFooter>\n <Flex justify="space-between" align="middle">\n <Button>\u6309\u94ae</Button>\n </Flex>\n </ButtonFooter>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_ButtonGroup",packageName:"@kne/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:d},{name:"antd",packageName:"antd",component:e}]}]}}}}]);
|
|
2
|
-
//# sourceMappingURL=872.
|
|
1
|
+
"use strict";(self.webpackChunk_kne_components_button_group=self.webpackChunk_kne_components_button_group||[]).push([[872],{58872:(n,t,o)=>{o.d(t,{A:()=>r});var d=o(28711),e=o(28833);const r={name:"button-group",summary:"<p>@kne/button-group \u662f\u4e00\u4e2aReact\u6309\u94ae\u7ec4\u4ef6\u5e93\uff0c\u63d0\u4f9b\u4e86\u4e00\u7cfb\u5217\u529f\u80fd\u4e30\u5bcc\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u7528\u4e8e\u7b80\u5316\u5e38\u89c1\u7684\u6309\u94ae\u4ea4\u4e92\u573a\u666f\u3002\u8be5\u5e93\u4e13\u6ce8\u4e8e\u63d0\u4f9b\u81ea\u9002\u5e94\u5e03\u5c40\u3001\u52a0\u8f7d\u72b6\u6001\u7ba1\u7406\u3001\u786e\u8ba4\u64cd\u4f5c\u548c\u6570\u636e\u8bf7\u6c42\u7b49\u529f\u80fd\uff0c\u4f7f\u5f00\u53d1\u8005\u80fd\u591f\u5feb\u901f\u5b9e\u73b0\u5404\u79cd\u590d\u6742\u7684\u6309\u94ae\u4ea4\u4e92\u9700\u6c42\u3002</p>\n<h3>\u4e3b\u8981\u7ec4\u4ef6</h3>\n<h4>ButtonGroup</h4>\n<p>\u81ea\u9002\u5e94\u7684\u6309\u94ae\u7ec4\u7ec4\u4ef6\uff0c\u80fd\u591f\u6839\u636e\u5bb9\u5668\u5bbd\u5ea6\u81ea\u52a8\u8c03\u6574\u663e\u793a\u7684\u6309\u94ae\u6570\u91cf\u3002\u5f53\u5bb9\u5668\u5bbd\u5ea6\u4e0d\u8db3\u4ee5\u663e\u793a\u6240\u6709\u6309\u94ae\u65f6\uff0c\u4f1a\u81ea\u52a8\u5c06\u591a\u4f59\u7684\u6309\u94ae\u653e\u5165\u4e0b\u62c9\u83dc\u5355\u4e2d\uff0c\u786e\u4fdd\u754c\u9762\u5e03\u5c40\u7f8e\u89c2\u4e14\u529f\u80fd\u5b8c\u6574\u3002</p>\n<h4>LoadingButton</h4>\n<p>\u5c01\u88c5\u4e86\u52a0\u8f7d\u72b6\u6001\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u7b80\u5316\u4e86\u5f02\u6b65\u64cd\u4f5c\u7684\u5904\u7406\u3002\u901a\u8fc7\u5185\u7f6e\u7684\u72b6\u6001\u7ba1\u7406\uff0c\u5728\u5f02\u6b65\u64cd\u4f5c\u6267\u884c\u671f\u95f4\u81ea\u52a8\u663e\u793a\u52a0\u8f7d\u72b6\u6001\uff0c\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u3002\u540c\u65f6\u63d0\u4f9b\u4e86useLoading hook\uff0c\u65b9\u4fbf\u5728\u5176\u4ed6\u7ec4\u4ef6\u4e2d\u590d\u7528\u52a0\u8f7d\u72b6\u6001\u7ba1\u7406\u903b\u8f91\u3002</p>\n<h4>ConfirmButton</h4>\n<p>\u5e26\u6709\u786e\u8ba4\u529f\u80fd\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u652f\u6301\u5f39\u7a97\u786e\u8ba4\u548c\u6a21\u6001\u6846\u786e\u8ba4\u4e24\u79cd\u6a21\u5f0f\u3002\u9002\u7528\u4e8e\u9700\u8981\u7528\u6237\u4e8c\u6b21\u786e\u8ba4\u7684\u64cd\u4f5c\uff0c\u5982\u5220\u9664\u3001\u63d0\u4ea4\u7b49\u91cd\u8981\u64cd\u4f5c\u3002\u540c\u65f6\u63d0\u4f9b\u4e86ConfirmLink\u548cConfirmText\u53d8\u4f53\uff0c\u4ee5\u53cawithConfirm\u9ad8\u9636\u7ec4\u4ef6\uff0c\u6ee1\u8db3\u4e0d\u540c\u573a\u666f\u7684\u786e\u8ba4\u9700\u6c42\u3002</p>\n<h4>FetchButton</h4>\n<p>\u96c6\u6210\u4e86\u6570\u636e\u8bf7\u6c42\u529f\u80fd\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u57fa\u4e8e@kne/react-fetch\u5e93\u5b9e\u73b0\u3002\u53ef\u4ee5\u76f4\u63a5\u5904\u7406API\u8bf7\u6c42\uff0c\u5e76\u5728\u8bf7\u6c42\u8fc7\u7a0b\u4e2d\u81ea\u52a8\u7ba1\u7406\u52a0\u8f7d\u72b6\u6001\uff0c\u7b80\u5316\u4e86\u6570\u636e\u4ea4\u4e92\u7684\u5b9e\u73b0\u3002</p>\n<h4>ButtonFooter</h4>\n<p>\u9875\u9762\u5e95\u90e8\u6309\u94ae\u533a\u57df\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u81ea\u52a8\u8ba1\u7b97\u9ad8\u5ea6\u5e76\u8bbe\u7f6eCSS\u53d8\u91cf\uff0c\u65b9\u4fbf\u9875\u9762\u5e03\u5c40\u548c\u6837\u5f0f\u8c03\u6574\u3002</p>\n<h3>\u7279\u6027</h3>\n<ul>\n<li><strong>\u81ea\u9002\u5e94\u5e03\u5c40</strong>\uff1a\u6839\u636e\u5bb9\u5668\u5bbd\u5ea6\u81ea\u52a8\u8c03\u6574\u6309\u94ae\u663e\u793a\u65b9\u5f0f</li>\n<li><strong>\u52a0\u8f7d\u72b6\u6001\u7ba1\u7406</strong>\uff1a\u7b80\u5316\u5f02\u6b65\u64cd\u4f5c\u7684\u52a0\u8f7d\u72b6\u6001\u5904\u7406</li>\n<li><strong>\u64cd\u4f5c\u786e\u8ba4</strong>\uff1a\u63d0\u4f9b\u591a\u79cd\u786e\u8ba4\u6a21\u5f0f\uff0c\u589e\u5f3a\u7528\u6237\u64cd\u4f5c\u5b89\u5168\u6027</li>\n<li><strong>\u6570\u636e\u8bf7\u6c42\u96c6\u6210</strong>\uff1a\u7b80\u5316\u6309\u94ae\u4e0e\u540e\u7aefAPI\u7684\u4ea4\u4e92</li>\n<li><strong>\u56fd\u9645\u5316\u652f\u6301</strong>\uff1a\u5185\u7f6e\u4e2d\u82f1\u6587\u8bed\u8a00\u5305</li>\n<li><strong>\u9ad8\u5ea6\u53ef\u5b9a\u5236</strong>\uff1a\u7ec4\u4ef6\u63d0\u4f9b\u4e30\u5bcc\u7684\u914d\u7f6e\u9009\u9879</li>\n</ul>\n<h3>\u8bbe\u8ba1\u7406\u5ff5</h3>\n<p>\u8be5\u7ec4\u4ef6\u5e93\u7684\u8bbe\u8ba1\u7406\u5ff5\u662f\u901a\u8fc7\u5c01\u88c5\u5e38\u89c1\u7684\u6309\u94ae\u4ea4\u4e92\u6a21\u5f0f\uff0c\u63d0\u4f9b\u5f00\u7bb1\u5373\u7528\u7684\u89e3\u51b3\u65b9\u6848\uff0c\u540c\u65f6\u4fdd\u6301\u8db3\u591f\u7684\u7075\u6d3b\u6027\u548c\u53ef\u6269\u5c55\u6027\u3002\u4e3b\u8981\u4f53\u73b0\u5728\u4ee5\u4e0b\u51e0\u4e2a\u65b9\u9762\uff1a</p>\n<ol>\n<li>\n<p><strong>\u5173\u6ce8\u70b9\u5206\u79bb</strong>\uff1a\u6bcf\u4e2a\u7ec4\u4ef6\u4e13\u6ce8\u4e8e\u89e3\u51b3\u7279\u5b9a\u7684\u95ee\u9898\uff0c\u5982ButtonGroup\u4e13\u6ce8\u4e8e\u5e03\u5c40\uff0cLoadingButton\u4e13\u6ce8\u4e8e\u72b6\u6001\u7ba1\u7406\u3002</p>\n</li>\n<li>\n<p><strong>\u7ec4\u5408\u4f18\u4e8e\u7ee7\u627f</strong>\uff1a\u901a\u8fc7\u7ec4\u5408\u4e0d\u540c\u7684\u529f\u80fd\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u5b9e\u73b0\u590d\u6742\u7684\u4ea4\u4e92\u9700\u6c42\uff0c\u5982FetchButton\u5c31\u662fLoadingButton\u4e0e\u6570\u636e\u8bf7\u6c42\u529f\u80fd\u7684\u7ec4\u5408\u3002</p>\n</li>\n<li>\n<p><strong>\u58f0\u660e\u5f0fAPI</strong>\uff1a\u63d0\u4f9b\u7b80\u6d01\u660e\u4e86\u7684API\uff0c\u4f7f\u5f00\u53d1\u8005\u80fd\u591f\u4ee5\u58f0\u660e\u5f0f\u7684\u65b9\u5f0f\u63cf\u8ff0UI\u548c\u4ea4\u4e92\u884c\u4e3a\u3002</p>\n</li>\n<li>\n<p><strong>\u6e10\u8fdb\u5f0f\u589e\u5f3a</strong>\uff1a\u57fa\u7840\u7ec4\u4ef6\u53ef\u4ee5\u72ec\u7acb\u4f7f\u7528\uff0c\u4e5f\u53ef\u4ee5\u4e0e\u5176\u4ed6\u7ec4\u4ef6\u7ec4\u5408\u4f7f\u7528\uff0c\u5b9e\u73b0\u66f4\u590d\u6742\u7684\u529f\u80fd\u3002</p>\n</li>\n<li>\n<p><strong>\u7528\u6237\u4f53\u9a8c\u4f18\u5148</strong>\uff1a\u6ce8\u91cd\u7ec6\u8282\uff0c\u5982\u81ea\u9002\u5e94\u5e03\u5c40\u3001\u52a0\u8f7d\u72b6\u6001\u53cd\u9988\u7b49\uff0c\u63d0\u5347\u6700\u7ec8\u7528\u6237\u7684\u4f7f\u7528\u4f53\u9a8c\u3002</p>\n</li>\n</ol>",description:"\u5b9e\u73b0\u4e86\u4e00\u4e2a\u6309\u94ae\u7ec4,loading\u6309\u94ae,\u786e\u8ba4\u6309\u94ae\u548c\u52a0\u8f7d\u6309\u94ae.",packageName:"@kne/button-group",api:'<h3>ButtonGroup \u7ec4\u4ef6</h3>\n<p>ButtonGroup\u662f\u4e00\u4e2a\u81ea\u9002\u5e94\u7684\u6309\u94ae\u7ec4\u7ec4\u4ef6\uff0c\u80fd\u591f\u6839\u636e\u5bb9\u5668\u5bbd\u5ea6\u81ea\u52a8\u8c03\u6574\u663e\u793a\u7684\u6309\u94ae\u6570\u91cf\uff0c\u5e76\u5c06\u591a\u4f59\u7684\u6309\u94ae\u653e\u5165\u4e0b\u62c9\u83dc\u5355\u4e2d\u3002</p>\n<h4>\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u6309\u94ae\u7ec4\u7684\u5b50\u5143\u7d20\uff0c\u901a\u5e38\u662f\u4e00\u7cfb\u5217\u6309\u94ae</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n</tr>\n<tr>\n<td>style</td>\n<td>object</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f</td>\n</tr>\n<tr>\n<td>moreText</td>\n<td>string</td>\n<td>"\u66f4\u591a"</td>\n<td>\u66f4\u591a\u6309\u94ae\u7684\u6587\u672c</td>\n</tr>\n<tr>\n<td>buttonWidth</td>\n<td>number</td>\n<td>-</td>\n<td>\u6309\u94ae\u7684\u56fa\u5b9a\u5bbd\u5ea6\uff0c\u5982\u679c\u4e0d\u8bbe\u7f6e\u5219\u81ea\u52a8\u8ba1\u7b97</td>\n</tr>\n<tr>\n<td>buttonMargin</td>\n<td>number</td>\n<td>8</td>\n<td>\u6309\u94ae\u4e4b\u95f4\u7684\u95f4\u8ddd</td>\n</tr>\n<tr>\n<td>dropdownProps</td>\n<td>object</td>\n<td>-</td>\n<td>\u4f20\u9012\u7ed9Dropdown\u7ec4\u4ef6\u7684\u5c5e\u6027</td>\n</tr>\n<tr>\n<td>menuProps</td>\n<td>object</td>\n<td>-</td>\n<td>\u4f20\u9012\u7ed9Menu\u7ec4\u4ef6\u7684\u5c5e\u6027</td>\n</tr>\n<tr>\n<td>getPopupContainer</td>\n<td>function</td>\n<td>-</td>\n<td>\u83dc\u5355\u6e32\u67d3\u7236\u8282\u70b9\uff0c\u9ed8\u8ba4\u6e32\u67d3\u5230body\u4e0a</td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>function</td>\n<td>-</td>\n<td>\u83dc\u5355\u663e\u793a\u72b6\u6001\u6539\u53d8\u65f6\u7684\u56de\u8c03\u51fd\u6570</td>\n</tr>\n<tr>\n<td>onMoreClick</td>\n<td>function</td>\n<td>-</td>\n<td>\u70b9\u51fb\u66f4\u591a\u6309\u94ae\u65f6\u7684\u56de\u8c03\u51fd\u6570</td>\n</tr>\n<tr>\n<td>onMenuClick</td>\n<td>function</td>\n<td>-</td>\n<td>\u70b9\u51fb\u83dc\u5355\u9879\u65f6\u7684\u56de\u8c03\u51fd\u6570</td>\n</tr>\n<tr>\n<td>moreIcon</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u66f4\u591a\u6309\u94ae\u7684\u56fe\u6807</td>\n</tr>\n<tr>\n<td>moreButtonProps</td>\n<td>object</td>\n<td>-</td>\n<td>\u4f20\u9012\u7ed9\u66f4\u591a\u6309\u94ae\u7684\u5c5e\u6027</td>\n</tr>\n<tr>\n<td>forceRender</td>\n<td>boolean</td>\n<td>false</td>\n<td>\u662f\u5426\u5f3a\u5236\u6e32\u67d3\u6240\u6709\u6309\u94ae\uff0c\u4e0d\u8fdb\u884c\u81ea\u9002\u5e94\u5904\u7406</td>\n</tr>\n</tbody>\n</table>\n<h3>LoadingButton \u7ec4\u4ef6</h3>\n<p>LoadingButton\u662f\u4e00\u4e2a\u5c01\u88c5\u4e86\u52a0\u8f7d\u72b6\u6001\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u7b80\u5316\u4e86\u5f02\u6b65\u64cd\u4f5c\u7684\u5904\u7406\u3002</p>\n<h4>\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>onClick</td>\n<td>function</td>\n<td>-</td>\n<td>\u70b9\u51fb\u6309\u94ae\u65f6\u7684\u56de\u8c03\u51fd\u6570\uff0c\u53ef\u4ee5\u8fd4\u56dePromise</td>\n</tr>\n<tr>\n<td>loading</td>\n<td>boolean</td>\n<td>false</td>\n<td>\u662f\u5426\u663e\u793a\u52a0\u8f7d\u72b6\u6001</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>boolean</td>\n<td>false</td>\n<td>\u662f\u5426\u7981\u7528\u6309\u94ae</td>\n</tr>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u6309\u94ae\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>...rest</td>\n<td>-</td>\n<td>-</td>\n<td>\u5176\u4ed6\u4f20\u9012\u7ed9Button\u7ec4\u4ef6\u7684\u5c5e\u6027</td>\n</tr>\n</tbody>\n</table>\n<h3>useLoading Hook</h3>\n<p>useLoading\u662f\u4e00\u4e2a\u7528\u4e8e\u7ba1\u7406\u5f02\u6b65\u64cd\u4f5c\u52a0\u8f7d\u72b6\u6001\u7684Hook\u3002</p>\n<h4>\u53c2\u6570\u4e0e\u8fd4\u56de\u503c</h4>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>-</td>\n<td>-</td>\n<td>-</td>\n<td>\u4e0d\u63a5\u53d7\u53c2\u6570</td>\n</tr>\n</tbody>\n</table>\n<p><strong>\u8fd4\u56de\u503c</strong>\uff1a</p>\n<table>\n<thead>\n<tr>\n<th>\u540d\u79f0</th>\n<th>\u7c7b\u578b</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>loading</td>\n<td>boolean</td>\n<td>\u5f53\u524d\u52a0\u8f7d\u72b6\u6001</td>\n</tr>\n<tr>\n<td>withLoading</td>\n<td>function</td>\n<td>\u5305\u88c5\u5f02\u6b65\u51fd\u6570\uff0c\u81ea\u52a8\u7ba1\u7406\u52a0\u8f7d\u72b6\u6001</td>\n</tr>\n</tbody>\n</table>\n<h3>ConfirmButton \u7ec4\u4ef6</h3>\n<p>ConfirmButton\u662f\u4e00\u4e2a\u5e26\u6709\u786e\u8ba4\u529f\u80fd\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u652f\u6301\u5f39\u7a97\u786e\u8ba4\u548c\u6a21\u6001\u6846\u786e\u8ba4\u4e24\u79cd\u6a21\u5f0f\u3002</p>\n<h4>\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u6309\u94ae\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>function</td>\n<td>-</td>\n<td>\u786e\u8ba4\u540e\u7684\u56de\u8c03\u51fd\u6570</td>\n</tr>\n<tr>\n<td>title</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td>\u786e\u8ba4\u6846\u6807\u9898</td>\n</tr>\n<tr>\n<td>content</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td>\u786e\u8ba4\u6846\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>okText</td>\n<td>string</td>\n<td>"\u786e\u5b9a"</td>\n<td>\u786e\u8ba4\u6309\u94ae\u6587\u5b57</td>\n</tr>\n<tr>\n<td>cancelText</td>\n<td>string</td>\n<td>"\u53d6\u6d88"</td>\n<td>\u53d6\u6d88\u6309\u94ae\u6587\u5b57</td>\n</tr>\n<tr>\n<td>type</td>\n<td>"popconfirm" | "modal"</td>\n<td>"popconfirm"</td>\n<td>\u786e\u8ba4\u6846\u7c7b\u578b\uff0c\u652f\u6301\u6c14\u6ce1\u786e\u8ba4\u6846\u548c\u6a21\u6001\u6846</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>object</td>\n<td>-</td>\n<td>\u4f20\u9012\u7ed9Modal\u7ec4\u4ef6\u7684\u5c5e\u6027\uff08\u5f53type\u4e3a"modal"\u65f6\u6709\u6548\uff09</td>\n</tr>\n<tr>\n<td>popconfirmProps</td>\n<td>object</td>\n<td>-</td>\n<td>\u4f20\u9012\u7ed9Popconfirm\u7ec4\u4ef6\u7684\u5c5e\u6027\uff08\u5f53type\u4e3a"popconfirm"\u65f6\u6709\u6548\uff09</td>\n</tr>\n<tr>\n<td>...rest</td>\n<td>-</td>\n<td>-</td>\n<td>\u5176\u4ed6\u4f20\u9012\u7ed9Button\u7ec4\u4ef6\u7684\u5c5e\u6027</td>\n</tr>\n</tbody>\n</table>\n<h3>ConfirmLink \u7ec4\u4ef6</h3>\n<p>ConfirmLink\u662fConfirmButton\u7684\u53d8\u4f53\uff0c\u6e32\u67d3\u4e3a\u94fe\u63a5\u6837\u5f0f\u3002</p>\n<h4>\u5c5e\u6027</h4>\n<p>\u4e0eConfirmButton\u76f8\u540c\uff0c\u4f46\u9ed8\u8ba4\u6e32\u67d3\u4e3a\u94fe\u63a5\u6837\u5f0f\u3002</p>\n<h3>ConfirmText \u7ec4\u4ef6</h3>\n<p>ConfirmText\u662fConfirmButton\u7684\u53d8\u4f53\uff0c\u6e32\u67d3\u4e3a\u7eaf\u6587\u672c\u6837\u5f0f\u3002</p>\n<h4>\u5c5e\u6027</h4>\n<p>\u4e0eConfirmButton\u76f8\u540c\uff0c\u4f46\u9ed8\u8ba4\u6e32\u67d3\u4e3a\u7eaf\u6587\u672c\u6837\u5f0f\u3002</p>\n<h3>withConfirm \u9ad8\u9636\u7ec4\u4ef6</h3>\n<p>withConfirm\u662f\u4e00\u4e2a\u9ad8\u9636\u7ec4\u4ef6\uff0c\u7528\u4e8e\u4e3a\u4efb\u610f\u7ec4\u4ef6\u6dfb\u52a0\u786e\u8ba4\u529f\u80fd\u3002</p>\n<h4>\u53c2\u6570</h4>\n<table>\n<thead>\n<tr>\n<th>\u53c2\u6570\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>options</td>\n<td>object</td>\n<td>-</td>\n<td>\u786e\u8ba4\u6846\u914d\u7f6e\u9009\u9879</td>\n</tr>\n<tr>\n<td>options.title</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td>\u786e\u8ba4\u6846\u6807\u9898</td>\n</tr>\n<tr>\n<td>options.content</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td>\u786e\u8ba4\u6846\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>options.okText</td>\n<td>string</td>\n<td>"\u786e\u5b9a"</td>\n<td>\u786e\u8ba4\u6309\u94ae\u6587\u5b57</td>\n</tr>\n<tr>\n<td>options.cancelText</td>\n<td>string</td>\n<td>"\u53d6\u6d88"</td>\n<td>\u53d6\u6d88\u6309\u94ae\u6587\u5b57</td>\n</tr>\n<tr>\n<td>options.type</td>\n<td>"popconfirm" | "modal"</td>\n<td>"popconfirm"</td>\n<td>\u786e\u8ba4\u6846\u7c7b\u578b</td>\n</tr>\n<tr>\n<td>options.modalProps</td>\n<td>object</td>\n<td>-</td>\n<td>\u4f20\u9012\u7ed9Modal\u7ec4\u4ef6\u7684\u5c5e\u6027</td>\n</tr>\n<tr>\n<td>options.popconfirmProps</td>\n<td>object</td>\n<td>-</td>\n<td>\u4f20\u9012\u7ed9Popconfirm\u7ec4\u4ef6\u7684\u5c5e\u6027</td>\n</tr>\n</tbody>\n</table>\n<h3>FetchButton \u7ec4\u4ef6</h3>\n<p>FetchButton\u662f\u4e00\u4e2a\u96c6\u6210\u4e86\u6570\u636e\u8bf7\u6c42\u529f\u80fd\u7684\u6309\u94ae\u7ec4\u4ef6\uff0c\u57fa\u4e8e@kne/react-fetch\u5e93\u5b9e\u73b0\u3002</p>\n<h4>\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u6309\u94ae\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>api</td>\n<td>string | object | function</td>\n<td>-</td>\n<td>\u8bf7\u6c42API\uff0c\u53ef\u4ee5\u662f\u5b57\u7b26\u4e32\u3001\u5bf9\u8c61\u6216\u51fd\u6570</td>\n</tr>\n<tr>\n<td>params</td>\n<td>object</td>\n<td>-</td>\n<td>\u8bf7\u6c42\u53c2\u6570</td>\n</tr>\n<tr>\n<td>onSuccess</td>\n<td>function</td>\n<td>-</td>\n<td>\u8bf7\u6c42\u6210\u529f\u56de\u8c03</td>\n</tr>\n<tr>\n<td>onError</td>\n<td>function</td>\n<td>-</td>\n<td>\u8bf7\u6c42\u5931\u8d25\u56de\u8c03</td>\n</tr>\n<tr>\n<td>beforeFetch</td>\n<td>function</td>\n<td>-</td>\n<td>\u8bf7\u6c42\u524d\u5904\u7406\u51fd\u6570\uff0c\u8fd4\u56defalse\u53ef\u963b\u6b62\u8bf7\u6c42</td>\n</tr>\n<tr>\n<td>afterFetch</td>\n<td>function</td>\n<td>-</td>\n<td>\u8bf7\u6c42\u540e\u5904\u7406\u51fd\u6570</td>\n</tr>\n<tr>\n<td>fetchOptions</td>\n<td>object</td>\n<td>-</td>\n<td>\u4f20\u9012\u7ed9fetch\u51fd\u6570\u7684\u9009\u9879</td>\n</tr>\n<tr>\n<td>...rest</td>\n<td>-</td>\n<td>-</td>\n<td>\u5176\u4ed6\u4f20\u9012\u7ed9LoadingButton\u7ec4\u4ef6\u7684\u5c5e\u6027</td>\n</tr>\n</tbody>\n</table>\n<h3>ButtonFooter \u7ec4\u4ef6</h3>\n<p>ButtonFooter\u662f\u4e00\u4e2a\u9875\u9762\u5e95\u90e8\u6309\u94ae\u533a\u57df\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u81ea\u52a8\u8ba1\u7b97\u9ad8\u5ea6\u5e76\u8bbe\u7f6eCSS\u53d8\u91cf\u3002</p>\n<h4>\u5c5e\u6027</h4>\n<table>\n<thead>\n<tr>\n<th>\u5c5e\u6027\u540d</th>\n<th>\u7c7b\u578b</th>\n<th>\u9ed8\u8ba4\u503c</th>\n<th>\u8bf4\u660e</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>\u6309\u94ae\u533a\u57df\u5185\u5bb9</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>-</td>\n<td>\u81ea\u5b9a\u4e49\u7c7b\u540d</td>\n</tr>\n</tbody>\n</table>',example:{isFull:!1,className:"button_group_e0271",style:".button_group_e0271 .ant-card {\n border-color: black;\n text-align: center;\n width: 200px;\n}",list:[{title:"ButtonGroup",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:"const { default: ButtonGroup, ConfirmButton } = _ButtonGroup;\nconst { Flex, Button } = antd;\nconst { useState, useEffect } = React;\n\nconst Example = () => {\n const [width, setWidth] = useState(200);\n return (<Flex gap={8}>\n <div style={{ width: `${width}px` }}>\n <ButtonGroup\n list={[{\n type: 'primary', children: '\u64cd\u4f5c1'\n }, {\n type: 'primary', children: '\u64cd\u4f5c1-1', hidden: true\n }, {\n children: '\u64cd\u4f5c2',\n tooltipProps: {\n title: '\u64cd\u4f5c2'\n }\n }, {\n children: '\u64cd\u4f5c3', disabled: true,\n tooltipProps: {\n title: '\u64cd\u4f5c3==='\n }\n }, {\n children: '\u64cd\u4f5c4', message: '\u786e\u5b9a\u8981\u6267\u884c\u64cd\u4f5c\u5417\uff1f', disabled: true\n }, {\n children: '\u64cd\u4f5c5', message: '\u786e\u5b9a\u8981\u6267\u884c\u64cd\u4f5c\u5417\uff1f'\n }]}\n more=\"...\"\n />\n </div>\n <Flex gap={8}>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width + 20;\n });\n }}\n >\n \u589e\u52a0\u5bb9\u5668\u5bbd\u5ea6\n </Button>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width - 20;\n });\n }}\n >\n \u51cf\u5c11\u5bb9\u5668\u5bbd\u5ea6\n </Button>\n </Flex>\n </Flex>);\n};\n\nconst CompactExample = () => {\n const [width, setWidth] = useState(200);\n return (<Flex gap={8}>\n <div style={{ width: `${width}px` }}>\n <ButtonGroup\n compact\n list={[{\n type: 'primary', children: '\u64cd\u4f5c1'\n }, {\n children: '\u64cd\u4f5c2'\n }, {\n children: '\u64cd\u4f5c3', hidden: true\n }, {\n children: '\u64cd\u4f5c4', message: '\u786e\u5b9a\u8981\u6267\u884c\u64cd\u4f5c\u5417\uff1f'\n }]}\n />\n </div>\n <Flex gap={8}>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width + 20;\n });\n }}\n >\n \u589e\u52a0\u5bb9\u5668\u5bbd\u5ea6\n </Button>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width - 20;\n });\n }}\n >\n \u51cf\u5c11\u5bb9\u5668\u5bbd\u5ea6\n </Button>\n </Flex>\n </Flex>);\n};\n\nconst LoadChildren = ({ children }) => {\n const [loading, setLoading] = useState(true);\n useEffect(() => {\n setTimeout(() => {\n setLoading(false);\n }, 1000);\n }, []);\n if (loading) {\n return null;\n }\n return children({\n onClick: () => {\n console.log('\u52a0\u8f7d\u5b8c\u6210');\n }\n });\n};\nconst FunctionProps = () => {\n const [width, setWidth] = useState(200);\n return (<Flex gap={8}>\n <div style={{ width: `${width}px` }}>\n <ButtonGroup\n list={[(props) => {\n return (<Button {...props} type=\"primary\">\n \u64cd\u4f5c1\n </Button>);\n }, (props) => {\n return <Button {...props}>\u64cd\u4f5c2</Button>;\n }, (props) => {\n return <Button {...props}>\u64cd\u4f5c3</Button>;\n }, (props) => {\n return (<LoadChildren key={props.key}>\n {({ onClick }) => {\n return (<ConfirmButton\n {...props}\n isModal={props.isDropdown}\n message=\"\u786e\u5b9a\u8981\u6267\u884c\u64cd\u4f5c\u5417\uff1f\"\n onClick={onClick}\n >\n \u64cd\u4f5c4\n </ConfirmButton>);\n }}\n </LoadChildren>);\n }]}\n />\n </div>\n <Flex gap={8}>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width + 20;\n });\n }}\n >\n \u589e\u52a0\u5bb9\u5668\u5bbd\u5ea6\n </Button>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width - 20;\n });\n }}\n >\n \u51cf\u5c11\u5bb9\u5668\u5bbd\u5ea6\n </Button>\n </Flex>\n </Flex>);\n};\n\nconst BaseExample = () => {\n return <div>\n <Flex vertical gap={8}>\n <div>base:</div>\n <Example />\n <div>compact:</div>\n <CompactExample />\n <div>function props:</div>\n <FunctionProps />\n </Flex>\n </div>;\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ButtonGroup",packageName:"@kne/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:d},{name:"antd",packageName:"antd",component:e}]},{title:"LoadingButton",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:"const { LoadingButton } = _ButtonGroup;\nconst { Space, App } = antd;\nconst BaseExample = () => {\n const { message } = App.useApp();\n const clickHandler = () => {\n message.success('\u70b9\u51fb\u6309\u94ae1s\u540e\u5b8c\u6210\u52a0\u8f7d');\n return new Promise((resolve) => {\n setTimeout(() => {\n message.success('\u5b8c\u6210');\n resolve();\n }, 1000);\n });\n };\n return (<Space wrap>\n <LoadingButton onClick={clickHandler}>\u6309\u94ae</LoadingButton>\n <LoadingButton onClick={clickHandler}>\n {(isLoading) => (isLoading ? '\u6b63\u5728\u52a0\u8f7d\u4e2d...' : '\u5207\u6362\u52a0\u8f7d\u6587\u6848')}\n </LoadingButton>\n </Space>);\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ButtonGroup",packageName:"@kne/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:d},{name:"antd",packageName:"antd",component:e}]},{title:"ConfirmButton",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { ConfirmButton, ConfirmLink, ConfirmText } = _ButtonGroup;\nconst { Flex } = antd;\nconst BaseExample = () => {\n return <Flex gap={8} vertical>\n <Flex gap={8}>\n <ConfirmButton message="\u786e\u5b9a\u8981\u5220\u9664\u5417?" onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n resolve();\n }, 500);\n });\n }}>\u5220\u9664</ConfirmButton>\n\n <ConfirmButton disabled message="\u786e\u5b9a\u8981\u5220\u9664\u5417?" onClick={() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n }}>\u5220\u9664</ConfirmButton>\n\n <ConfirmButton title="\u786e\u5b9a\u8981\u5220\u9664\u5417?"\n message="\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664"\n onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n resolve();\n }, 500);\n });\n }}>\u5220\u9664</ConfirmButton>\n\n <ConfirmButton isDelete message="\u786e\u5b9a\u8981\u5220\u9664\u5417?" onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n resolve();\n }, 500);\n });\n }}>\u5220\u9664</ConfirmButton>\n\n <ConfirmButton isDelete title="\u786e\u5b9a\u8981\u5220\u9664\u5417?"\n message="\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664"\n onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n resolve();\n }, 500);\n });\n }}>\u5220\u9664</ConfirmButton>\n </Flex>\n <Flex gap={8}>\n <ConfirmButton isModal message="\u786e\u5b9a\u8981\u5220\u9664\u5417?" onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n resolve();\n }, 500);\n });\n }}>\u5220\u9664</ConfirmButton>\n\n <ConfirmButton isModal title="\u786e\u5b9a\u8981\u5220\u9664\u5417?"\n message="\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664"\n onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n resolve();\n }, 500);\n });\n }}>\u5220\u9664</ConfirmButton>\n\n <ConfirmButton isModal isDelete message="\u786e\u5b9a\u8981\u5220\u9664\u5417?" onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n resolve();\n }, 500);\n });\n }}>\u5220\u9664</ConfirmButton>\n\n <ConfirmButton isModal isDelete title="\u786e\u5b9a\u8981\u5220\u9664\u5417?"\n message="\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664\u5220\u9664"\n onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log(\'\u786e\u5b9a\u5220\u9664\');\n resolve();\n }, 500);\n });\n }}>\u5220\u9664</ConfirmButton>\n </Flex>\n <Flex gap={8}>\n <ConfirmLink onClick={() => {\n console.log(\'\u5220\u9664\');\n }}>\u5220\u9664</ConfirmLink>\n <ConfirmText onClick={() => {\n console.log(\'\u5220\u9664\');\n }}>\u5220\u9664</ConfirmText>\n </Flex>\n </Flex>;\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_ButtonGroup",packageName:"@kne/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:d},{name:"antd",packageName:"antd",component:e}]},{title:"FetchButton",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:"const { FetchButton } = _ButtonGroup;\n\nconst BaseExample = () => {\n return <div>\n <FetchButton api={{\n loader: async () => {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve({ data: 'xxxxx' });\n }, 1000);\n });\n }\n }} onClick={(data) => {\n console.log(data);\n }}>\u70b9\u51fb\u52a0\u8f7d\u6570\u636e</FetchButton>\n </div>;\n};\n\nrender(<BaseExample />);\n\n",scope:[{name:"_ButtonGroup",packageName:"@kne/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:d},{name:"antd",packageName:"antd",component:e}]},{title:"ButtonFooter",description:"\u8fd9\u91cc\u586b\u5199\u793a\u4f8b\u8bf4\u660e",code:'const { ButtonFooter } = _ButtonGroup;\nconst { Flex, Button } = antd;\nconst BaseExample = () => {\n return (\n <ButtonFooter>\n <Flex justify="space-between" align="middle">\n <Button>\u6309\u94ae</Button>\n </Flex>\n </ButtonFooter>\n );\n};\n\nrender(<BaseExample />);\n\n',scope:[{name:"_ButtonGroup",packageName:"@kne/current-lib_button-group",importStatement:'import * as _ButtonGroup from "@kne/button-group"',component:d},{name:"antd",packageName:"antd",component:e}]}]}}}}]);
|
|
2
|
+
//# sourceMappingURL=872.a5b2dadf.chunk.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"static/js/872.ebd10a08.chunk.js","mappings":"uLAIA,MAg4BA,EAh4BqB,CACjBA,KAAM,eACNC,QAAS,y/KAwCTC,YAAa,+HACbC,YAAa,oBACbC,IAAK,07UAmbLC,QAAS,CACLC,QAAQ,EACRC,UAAW,qBACXC,MAAO,qGAKPC,KAAM,CAAC,CACXC,MAAO,cACPR,YAAa,mDACbS,KAAM,w6IAiLNC,MAAO,CAAC,CACRZ,KAAM,eACNG,YAAa,gCACbU,gBAAiB,oDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,gBACPR,YAAa,mDACbS,KAAM,kuBAwBNC,MAAO,CAAC,CACRZ,KAAM,eACNG,YAAa,gCACbU,gBAAiB,oDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,gBACPR,YAAa,mDACbS,KAAM,u/OAwGNC,MAAO,CAAC,CACRZ,KAAM,eACNG,YAAa,gCACbU,gBAAiB,oDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,cACPR,YAAa,mDACbS,KAAM,mdAqBNC,MAAO,CAAC,CACRZ,KAAM,eACNG,YAAa,gCACbU,gBAAiB,oDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,eACPR,YAAa,mDACbS,KAAM,gTAeNC,MAAO,CAAC,CACRZ,KAAM,eACNG,YAAa,gCACbU,gBAAiB,oDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,O","sources":["../../README.md"],"sourcesContent":["import * as component_1 from '@kne/current-lib_button-group';\nimport * as component_2 from 'antd';\nimport '@kne/current-lib_button-group/dist/index.css';\nimport '@kne/current-lib_button-group/dist/index.css';\nconst readmeConfig = {\n name: `button-group`,\n summary: `<p>@kne/button-group 是一个React按钮组件库,提供了一系列功能丰富的按钮组件,用于简化常见的按钮交互场景。该库专注于提供自适应布局、加载状态管理、确认操作和数据请求等功能,使开发者能够快速实现各种复杂的按钮交互需求。</p>\n<h3>主要组件</h3>\n<h4>ButtonGroup</h4>\n<p>自适应的按钮组组件,能够根据容器宽度自动调整显示的按钮数量。当容器宽度不足以显示所有按钮时,会自动将多余的按钮放入下拉菜单中,确保界面布局美观且功能完整。</p>\n<h4>LoadingButton</h4>\n<p>封装了加载状态的按钮组件,简化了异步操作的处理。通过内置的状态管理,在异步操作执行期间自动显示加载状态,提升用户体验。同时提供了useLoading hook,方便在其他组件中复用加载状态管理逻辑。</p>\n<h4>ConfirmButton</h4>\n<p>带有确认功能的按钮组件,支持弹窗确认和模态框确认两种模式。适用于需要用户二次确认的操作,如删除、提交等重要操作。同时提供了ConfirmLink和ConfirmText变体,以及withConfirm高阶组件,满足不同场景的确认需求。</p>\n<h4>FetchButton</h4>\n<p>集成了数据请求功能的按钮组件,基于@kne/react-fetch库实现。可以直接处理API请求,并在请求过程中自动管理加载状态,简化了数据交互的实现。</p>\n<h4>ButtonFooter</h4>\n<p>页面底部按钮区域组件,可以自动计算高度并设置CSS变量,方便页面布局和样式调整。</p>\n<h3>特性</h3>\n<ul>\n<li><strong>自适应布局</strong>:根据容器宽度自动调整按钮显示方式</li>\n<li><strong>加载状态管理</strong>:简化异步操作的加载状态处理</li>\n<li><strong>操作确认</strong>:提供多种确认模式,增强用户操作安全性</li>\n<li><strong>数据请求集成</strong>:简化按钮与后端API的交互</li>\n<li><strong>国际化支持</strong>:内置中英文语言包</li>\n<li><strong>高度可定制</strong>:组件提供丰富的配置选项</li>\n</ul>\n<h3>设计理念</h3>\n<p>该组件库的设计理念是通过封装常见的按钮交互模式,提供开箱即用的解决方案,同时保持足够的灵活性和可扩展性。主要体现在以下几个方面:</p>\n<ol>\n<li>\n<p><strong>关注点分离</strong>:每个组件专注于解决特定的问题,如ButtonGroup专注于布局,LoadingButton专注于状态管理。</p>\n</li>\n<li>\n<p><strong>组合优于继承</strong>:通过组合不同的功能组件,可以实现复杂的交互需求,如FetchButton就是LoadingButton与数据请求功能的组合。</p>\n</li>\n<li>\n<p><strong>声明式API</strong>:提供简洁明了的API,使开发者能够以声明式的方式描述UI和交互行为。</p>\n</li>\n<li>\n<p><strong>渐进式增强</strong>:基础组件可以独立使用,也可以与其他组件组合使用,实现更复杂的功能。</p>\n</li>\n<li>\n<p><strong>用户体验优先</strong>:注重细节,如自适应布局、加载状态反馈等,提升最终用户的使用体验。</p>\n</li>\n</ol>`,\n description: `实现了一个按钮组,loading按钮,确认按钮和加载按钮.`,\n packageName: `@kne/button-group`,\n api: `<h3>ButtonGroup 组件</h3>\n<p>ButtonGroup是一个自适应的按钮组组件,能够根据容器宽度自动调整显示的按钮数量,并将多余的按钮放入下拉菜单中。</p>\n<h4>属性</h4>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>按钮组的子元素,通常是一系列按钮</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>-</td>\n<td>自定义类名</td>\n</tr>\n<tr>\n<td>style</td>\n<td>object</td>\n<td>-</td>\n<td>自定义样式</td>\n</tr>\n<tr>\n<td>moreText</td>\n<td>string</td>\n<td>\"更多\"</td>\n<td>更多按钮的文本</td>\n</tr>\n<tr>\n<td>buttonWidth</td>\n<td>number</td>\n<td>-</td>\n<td>按钮的固定宽度,如果不设置则自动计算</td>\n</tr>\n<tr>\n<td>buttonMargin</td>\n<td>number</td>\n<td>8</td>\n<td>按钮之间的间距</td>\n</tr>\n<tr>\n<td>dropdownProps</td>\n<td>object</td>\n<td>-</td>\n<td>传递给Dropdown组件的属性</td>\n</tr>\n<tr>\n<td>menuProps</td>\n<td>object</td>\n<td>-</td>\n<td>传递给Menu组件的属性</td>\n</tr>\n<tr>\n<td>getPopupContainer</td>\n<td>function</td>\n<td>-</td>\n<td>菜单渲染父节点,默认渲染到body上</td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>function</td>\n<td>-</td>\n<td>菜单显示状态改变时的回调函数</td>\n</tr>\n<tr>\n<td>onMoreClick</td>\n<td>function</td>\n<td>-</td>\n<td>点击更多按钮时的回调函数</td>\n</tr>\n<tr>\n<td>onMenuClick</td>\n<td>function</td>\n<td>-</td>\n<td>点击菜单项时的回调函数</td>\n</tr>\n<tr>\n<td>moreIcon</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>自定义更多按钮的图标</td>\n</tr>\n<tr>\n<td>moreButtonProps</td>\n<td>object</td>\n<td>-</td>\n<td>传递给更多按钮的属性</td>\n</tr>\n<tr>\n<td>forceRender</td>\n<td>boolean</td>\n<td>false</td>\n<td>是否强制渲染所有按钮,不进行自适应处理</td>\n</tr>\n</tbody>\n</table>\n<h3>LoadingButton 组件</h3>\n<p>LoadingButton是一个封装了加载状态的按钮组件,简化了异步操作的处理。</p>\n<h4>属性</h4>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>onClick</td>\n<td>function</td>\n<td>-</td>\n<td>点击按钮时的回调函数,可以返回Promise</td>\n</tr>\n<tr>\n<td>loading</td>\n<td>boolean</td>\n<td>false</td>\n<td>是否显示加载状态</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>boolean</td>\n<td>false</td>\n<td>是否禁用按钮</td>\n</tr>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>按钮内容</td>\n</tr>\n<tr>\n<td>...rest</td>\n<td>-</td>\n<td>-</td>\n<td>其他传递给Button组件的属性</td>\n</tr>\n</tbody>\n</table>\n<h3>useLoading Hook</h3>\n<p>useLoading是一个用于管理异步操作加载状态的Hook。</p>\n<h4>参数与返回值</h4>\n<table>\n<thead>\n<tr>\n<th>参数</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>-</td>\n<td>-</td>\n<td>-</td>\n<td>不接受参数</td>\n</tr>\n</tbody>\n</table>\n<p><strong>返回值</strong>:</p>\n<table>\n<thead>\n<tr>\n<th>名称</th>\n<th>类型</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>loading</td>\n<td>boolean</td>\n<td>当前加载状态</td>\n</tr>\n<tr>\n<td>withLoading</td>\n<td>function</td>\n<td>包装异步函数,自动管理加载状态</td>\n</tr>\n</tbody>\n</table>\n<h3>ConfirmButton 组件</h3>\n<p>ConfirmButton是一个带有确认功能的按钮组件,支持弹窗确认和模态框确认两种模式。</p>\n<h4>属性</h4>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>按钮内容</td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>function</td>\n<td>-</td>\n<td>确认后的回调函数</td>\n</tr>\n<tr>\n<td>title</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td>确认框标题</td>\n</tr>\n<tr>\n<td>content</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td>确认框内容</td>\n</tr>\n<tr>\n<td>okText</td>\n<td>string</td>\n<td>\"确定\"</td>\n<td>确认按钮文字</td>\n</tr>\n<tr>\n<td>cancelText</td>\n<td>string</td>\n<td>\"取消\"</td>\n<td>取消按钮文字</td>\n</tr>\n<tr>\n<td>type</td>\n<td>\"popconfirm\" | \"modal\"</td>\n<td>\"popconfirm\"</td>\n<td>确认框类型,支持气泡确认框和模态框</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>object</td>\n<td>-</td>\n<td>传递给Modal组件的属性(当type为\"modal\"时有效)</td>\n</tr>\n<tr>\n<td>popconfirmProps</td>\n<td>object</td>\n<td>-</td>\n<td>传递给Popconfirm组件的属性(当type为\"popconfirm\"时有效)</td>\n</tr>\n<tr>\n<td>...rest</td>\n<td>-</td>\n<td>-</td>\n<td>其他传递给Button组件的属性</td>\n</tr>\n</tbody>\n</table>\n<h3>ConfirmLink 组件</h3>\n<p>ConfirmLink是ConfirmButton的变体,渲染为链接样式。</p>\n<h4>属性</h4>\n<p>与ConfirmButton相同,但默认渲染为链接样式。</p>\n<h3>ConfirmText 组件</h3>\n<p>ConfirmText是ConfirmButton的变体,渲染为纯文本样式。</p>\n<h4>属性</h4>\n<p>与ConfirmButton相同,但默认渲染为纯文本样式。</p>\n<h3>withConfirm 高阶组件</h3>\n<p>withConfirm是一个高阶组件,用于为任意组件添加确认功能。</p>\n<h4>参数</h4>\n<table>\n<thead>\n<tr>\n<th>参数名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>options</td>\n<td>object</td>\n<td>-</td>\n<td>确认框配置选项</td>\n</tr>\n<tr>\n<td>options.title</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td>确认框标题</td>\n</tr>\n<tr>\n<td>options.content</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td>确认框内容</td>\n</tr>\n<tr>\n<td>options.okText</td>\n<td>string</td>\n<td>\"确定\"</td>\n<td>确认按钮文字</td>\n</tr>\n<tr>\n<td>options.cancelText</td>\n<td>string</td>\n<td>\"取消\"</td>\n<td>取消按钮文字</td>\n</tr>\n<tr>\n<td>options.type</td>\n<td>\"popconfirm\" | \"modal\"</td>\n<td>\"popconfirm\"</td>\n<td>确认框类型</td>\n</tr>\n<tr>\n<td>options.modalProps</td>\n<td>object</td>\n<td>-</td>\n<td>传递给Modal组件的属性</td>\n</tr>\n<tr>\n<td>options.popconfirmProps</td>\n<td>object</td>\n<td>-</td>\n<td>传递给Popconfirm组件的属性</td>\n</tr>\n</tbody>\n</table>\n<h3>FetchButton 组件</h3>\n<p>FetchButton是一个集成了数据请求功能的按钮组件,基于@kne/react-fetch库实现。</p>\n<h4>属性</h4>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>按钮内容</td>\n</tr>\n<tr>\n<td>api</td>\n<td>string | object | function</td>\n<td>-</td>\n<td>请求API,可以是字符串、对象或函数</td>\n</tr>\n<tr>\n<td>params</td>\n<td>object</td>\n<td>-</td>\n<td>请求参数</td>\n</tr>\n<tr>\n<td>onSuccess</td>\n<td>function</td>\n<td>-</td>\n<td>请求成功回调</td>\n</tr>\n<tr>\n<td>onError</td>\n<td>function</td>\n<td>-</td>\n<td>请求失败回调</td>\n</tr>\n<tr>\n<td>beforeFetch</td>\n<td>function</td>\n<td>-</td>\n<td>请求前处理函数,返回false可阻止请求</td>\n</tr>\n<tr>\n<td>afterFetch</td>\n<td>function</td>\n<td>-</td>\n<td>请求后处理函数</td>\n</tr>\n<tr>\n<td>fetchOptions</td>\n<td>object</td>\n<td>-</td>\n<td>传递给fetch函数的选项</td>\n</tr>\n<tr>\n<td>...rest</td>\n<td>-</td>\n<td>-</td>\n<td>其他传递给LoadingButton组件的属性</td>\n</tr>\n</tbody>\n</table>\n<h3>ButtonFooter 组件</h3>\n<p>ButtonFooter是一个页面底部按钮区域组件,可以自动计算高度并设置CSS变量。</p>\n<h4>属性</h4>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>按钮区域内容</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>-</td>\n<td>自定义类名</td>\n</tr>\n</tbody>\n</table>`,\n example: {\n isFull: false,\n className: `button_group_e0271`,\n style: `.button_group_e0271 .ant-card {\n border-color: black;\n text-align: center;\n width: 200px;\n}`,\n list: [{\n title: `ButtonGroup`,\n description: `这里填写示例说明`,\n code: `const { default: ButtonGroup, ConfirmButton } = _ButtonGroup;\nconst { Flex, Button } = antd;\nconst { useState, useEffect } = React;\n\nconst Example = () => {\n const [width, setWidth] = useState(200);\n return (<Flex gap={8}>\n <div style={{ width: \\`\\${width}px\\` }}>\n <ButtonGroup\n list={[{\n type: 'primary', children: '操作1'\n }, {\n type: 'primary', children: '操作1-1', hidden: true\n }, {\n children: '操作2',\n tooltipProps: {\n title: '操作2'\n }\n }, {\n children: '操作3', disabled: true,\n tooltipProps: {\n title: '操作3==='\n }\n }, {\n children: '操作4', message: '确定要执行操作吗?', disabled: true\n }, {\n children: '操作5', message: '确定要执行操作吗?'\n }]}\n />\n </div>\n <Flex gap={8}>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width + 20;\n });\n }}\n >\n 增加容器宽度\n </Button>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width - 20;\n });\n }}\n >\n 减少容器宽度\n </Button>\n </Flex>\n </Flex>);\n};\n\nconst CompactExample = () => {\n const [width, setWidth] = useState(200);\n return (<Flex gap={8}>\n <div style={{ width: \\`\\${width}px\\` }}>\n <ButtonGroup\n compact\n list={[{\n type: 'primary', children: '操作1'\n }, {\n children: '操作2'\n }, {\n children: '操作3', hidden: true\n }, {\n children: '操作4', message: '确定要执行操作吗?'\n }]}\n />\n </div>\n <Flex gap={8}>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width + 20;\n });\n }}\n >\n 增加容器宽度\n </Button>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width - 20;\n });\n }}\n >\n 减少容器宽度\n </Button>\n </Flex>\n </Flex>);\n};\n\nconst LoadChildren = ({ children }) => {\n const [loading, setLoading] = useState(true);\n useEffect(() => {\n setTimeout(() => {\n setLoading(false);\n }, 1000);\n }, []);\n if (loading) {\n return null;\n }\n return children({\n onClick: () => {\n console.log('加载完成');\n }\n });\n};\nconst FunctionProps = () => {\n const [width, setWidth] = useState(200);\n return (<Flex gap={8}>\n <div style={{ width: \\`\\${width}px\\` }}>\n <ButtonGroup\n list={[(props) => {\n return (<Button {...props} type=\"primary\">\n 操作1\n </Button>);\n }, (props) => {\n return <Button {...props}>操作2</Button>;\n }, (props) => {\n return <Button {...props}>操作3</Button>;\n }, (props) => {\n return (<LoadChildren key={props.key}>\n {({ onClick }) => {\n return (<ConfirmButton\n {...props}\n isModal={props.isDropdown}\n message=\"确定要执行操作吗?\"\n onClick={onClick}\n >\n 操作4\n </ConfirmButton>);\n }}\n </LoadChildren>);\n }]}\n />\n </div>\n <Flex gap={8}>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width + 20;\n });\n }}\n >\n 增加容器宽度\n </Button>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width - 20;\n });\n }}\n >\n 减少容器宽度\n </Button>\n </Flex>\n </Flex>);\n};\n\nconst BaseExample = () => {\n return <div>\n <Flex vertical gap={8}>\n <div>base:</div>\n <Example />\n <div>compact:</div>\n <CompactExample />\n <div>function props:</div>\n <FunctionProps />\n </Flex>\n </div>;\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ButtonGroup\",\n packageName: \"@kne/current-lib_button-group\",\n importStatement: \"import * as _ButtonGroup from \\\"@kne/button-group\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n},{\n title: `LoadingButton`,\n description: `这里填写示例说明`,\n code: `const { LoadingButton } = _ButtonGroup;\nconst { Space, App } = antd;\nconst BaseExample = () => {\n const { message } = App.useApp();\n const clickHandler = () => {\n message.success('点击按钮1s后完成加载');\n return new Promise((resolve) => {\n setTimeout(() => {\n message.success('完成');\n resolve();\n }, 1000);\n });\n };\n return (<Space wrap>\n <LoadingButton onClick={clickHandler}>按钮</LoadingButton>\n <LoadingButton onClick={clickHandler}>\n {(isLoading) => (isLoading ? '正在加载中...' : '切换加载文案')}\n </LoadingButton>\n </Space>);\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ButtonGroup\",\n packageName: \"@kne/current-lib_button-group\",\n importStatement: \"import * as _ButtonGroup from \\\"@kne/button-group\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n},{\n title: `ConfirmButton`,\n description: `这里填写示例说明`,\n code: `const { ConfirmButton, ConfirmLink, ConfirmText } = _ButtonGroup;\nconst { Flex } = antd;\nconst BaseExample = () => {\n return <Flex gap={8} vertical>\n <Flex gap={8}>\n <ConfirmButton message=\"确定要删除吗?\" onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log('确定删除');\n resolve();\n }, 500);\n });\n }}>删除</ConfirmButton>\n\n <ConfirmButton disabled message=\"确定要删除吗?\" onClick={() => {\n console.log('确定删除');\n }}>删除</ConfirmButton>\n\n <ConfirmButton title=\"确定要删除吗?\"\n message=\"删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除\"\n onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log('确定删除');\n resolve();\n }, 500);\n });\n }}>删除</ConfirmButton>\n\n <ConfirmButton isDelete message=\"确定要删除吗?\" onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log('确定删除');\n resolve();\n }, 500);\n });\n }}>删除</ConfirmButton>\n\n <ConfirmButton isDelete title=\"确定要删除吗?\"\n message=\"删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除\"\n onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log('确定删除');\n resolve();\n }, 500);\n });\n }}>删除</ConfirmButton>\n </Flex>\n <Flex gap={8}>\n <ConfirmButton isModal message=\"确定要删除吗?\" onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log('确定删除');\n resolve();\n }, 500);\n });\n }}>删除</ConfirmButton>\n\n <ConfirmButton isModal title=\"确定要删除吗?\"\n message=\"删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除\"\n onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log('确定删除');\n resolve();\n }, 500);\n });\n }}>删除</ConfirmButton>\n\n <ConfirmButton isModal isDelete message=\"确定要删除吗?\" onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log('确定删除');\n resolve();\n }, 500);\n });\n }}>删除</ConfirmButton>\n\n <ConfirmButton isModal isDelete title=\"确定要删除吗?\"\n message=\"删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除\"\n onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log('确定删除');\n resolve();\n }, 500);\n });\n }}>删除</ConfirmButton>\n </Flex>\n <Flex gap={8}>\n <ConfirmLink onClick={() => {\n console.log('删除');\n }}>删除</ConfirmLink>\n <ConfirmText onClick={() => {\n console.log('删除');\n }}>删除</ConfirmText>\n </Flex>\n </Flex>;\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ButtonGroup\",\n packageName: \"@kne/current-lib_button-group\",\n importStatement: \"import * as _ButtonGroup from \\\"@kne/button-group\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n},{\n title: `FetchButton`,\n description: `这里填写示例说明`,\n code: `const { FetchButton } = _ButtonGroup;\n\nconst BaseExample = () => {\n return <div>\n <FetchButton api={{\n loader: async () => {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve({ data: 'xxxxx' });\n }, 1000);\n });\n }\n }} onClick={(data) => {\n console.log(data);\n }}>点击加载数据</FetchButton>\n </div>;\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ButtonGroup\",\n packageName: \"@kne/current-lib_button-group\",\n importStatement: \"import * as _ButtonGroup from \\\"@kne/button-group\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n},{\n title: `ButtonFooter`,\n description: `这里填写示例说明`,\n code: `const { ButtonFooter } = _ButtonGroup;\nconst { Flex, Button } = antd;\nconst BaseExample = () => {\n return (\n <ButtonFooter>\n <Flex justify=\"space-between\" align=\"middle\">\n <Button>按钮</Button>\n </Flex>\n </ButtonFooter>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ButtonGroup\",\n packageName: \"@kne/current-lib_button-group\",\n importStatement: \"import * as _ButtonGroup from \\\"@kne/button-group\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n}]\n }\n};\nexport default readmeConfig;\n"],"names":["name","summary","description","packageName","api","example","isFull","className","style","list","title","code","scope","importStatement","component"],"sourceRoot":""}
|
|
1
|
+
{"version":3,"file":"static/js/872.a5b2dadf.chunk.js","mappings":"uLAIA,MAi4BA,EAj4BqB,CACjBA,KAAM,eACNC,QAAS,y/KAwCTC,YAAa,+HACbC,YAAa,oBACbC,IAAK,07UAmbLC,QAAS,CACLC,QAAQ,EACRC,UAAW,qBACXC,MAAO,qGAKPC,KAAM,CAAC,CACXC,MAAO,cACPR,YAAa,mDACbS,KAAM,87IAkLNC,MAAO,CAAC,CACRZ,KAAM,eACNG,YAAa,gCACbU,gBAAiB,oDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,gBACPR,YAAa,mDACbS,KAAM,kuBAwBNC,MAAO,CAAC,CACRZ,KAAM,eACNG,YAAa,gCACbU,gBAAiB,oDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,gBACPR,YAAa,mDACbS,KAAM,u/OAwGNC,MAAO,CAAC,CACRZ,KAAM,eACNG,YAAa,gCACbU,gBAAiB,oDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,cACPR,YAAa,mDACbS,KAAM,mdAqBNC,MAAO,CAAC,CACRZ,KAAM,eACNG,YAAa,gCACbU,gBAAiB,oDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,KAEb,CACEJ,MAAO,eACPR,YAAa,mDACbS,KAAM,gTAeNC,MAAO,CAAC,CACRZ,KAAM,eACNG,YAAa,gCACbU,gBAAiB,oDACjBC,UAAW,GACb,CACEd,KAAM,OACNG,YAAa,OACbW,UAAW,O","sources":["../../README.md"],"sourcesContent":["import * as component_1 from '@kne/current-lib_button-group';\nimport * as component_2 from 'antd';\nimport '@kne/current-lib_button-group/dist/index.css';\nimport '@kne/current-lib_button-group/dist/index.css';\nconst readmeConfig = {\n name: `button-group`,\n summary: `<p>@kne/button-group 是一个React按钮组件库,提供了一系列功能丰富的按钮组件,用于简化常见的按钮交互场景。该库专注于提供自适应布局、加载状态管理、确认操作和数据请求等功能,使开发者能够快速实现各种复杂的按钮交互需求。</p>\n<h3>主要组件</h3>\n<h4>ButtonGroup</h4>\n<p>自适应的按钮组组件,能够根据容器宽度自动调整显示的按钮数量。当容器宽度不足以显示所有按钮时,会自动将多余的按钮放入下拉菜单中,确保界面布局美观且功能完整。</p>\n<h4>LoadingButton</h4>\n<p>封装了加载状态的按钮组件,简化了异步操作的处理。通过内置的状态管理,在异步操作执行期间自动显示加载状态,提升用户体验。同时提供了useLoading hook,方便在其他组件中复用加载状态管理逻辑。</p>\n<h4>ConfirmButton</h4>\n<p>带有确认功能的按钮组件,支持弹窗确认和模态框确认两种模式。适用于需要用户二次确认的操作,如删除、提交等重要操作。同时提供了ConfirmLink和ConfirmText变体,以及withConfirm高阶组件,满足不同场景的确认需求。</p>\n<h4>FetchButton</h4>\n<p>集成了数据请求功能的按钮组件,基于@kne/react-fetch库实现。可以直接处理API请求,并在请求过程中自动管理加载状态,简化了数据交互的实现。</p>\n<h4>ButtonFooter</h4>\n<p>页面底部按钮区域组件,可以自动计算高度并设置CSS变量,方便页面布局和样式调整。</p>\n<h3>特性</h3>\n<ul>\n<li><strong>自适应布局</strong>:根据容器宽度自动调整按钮显示方式</li>\n<li><strong>加载状态管理</strong>:简化异步操作的加载状态处理</li>\n<li><strong>操作确认</strong>:提供多种确认模式,增强用户操作安全性</li>\n<li><strong>数据请求集成</strong>:简化按钮与后端API的交互</li>\n<li><strong>国际化支持</strong>:内置中英文语言包</li>\n<li><strong>高度可定制</strong>:组件提供丰富的配置选项</li>\n</ul>\n<h3>设计理念</h3>\n<p>该组件库的设计理念是通过封装常见的按钮交互模式,提供开箱即用的解决方案,同时保持足够的灵活性和可扩展性。主要体现在以下几个方面:</p>\n<ol>\n<li>\n<p><strong>关注点分离</strong>:每个组件专注于解决特定的问题,如ButtonGroup专注于布局,LoadingButton专注于状态管理。</p>\n</li>\n<li>\n<p><strong>组合优于继承</strong>:通过组合不同的功能组件,可以实现复杂的交互需求,如FetchButton就是LoadingButton与数据请求功能的组合。</p>\n</li>\n<li>\n<p><strong>声明式API</strong>:提供简洁明了的API,使开发者能够以声明式的方式描述UI和交互行为。</p>\n</li>\n<li>\n<p><strong>渐进式增强</strong>:基础组件可以独立使用,也可以与其他组件组合使用,实现更复杂的功能。</p>\n</li>\n<li>\n<p><strong>用户体验优先</strong>:注重细节,如自适应布局、加载状态反馈等,提升最终用户的使用体验。</p>\n</li>\n</ol>`,\n description: `实现了一个按钮组,loading按钮,确认按钮和加载按钮.`,\n packageName: `@kne/button-group`,\n api: `<h3>ButtonGroup 组件</h3>\n<p>ButtonGroup是一个自适应的按钮组组件,能够根据容器宽度自动调整显示的按钮数量,并将多余的按钮放入下拉菜单中。</p>\n<h4>属性</h4>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>按钮组的子元素,通常是一系列按钮</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>-</td>\n<td>自定义类名</td>\n</tr>\n<tr>\n<td>style</td>\n<td>object</td>\n<td>-</td>\n<td>自定义样式</td>\n</tr>\n<tr>\n<td>moreText</td>\n<td>string</td>\n<td>\"更多\"</td>\n<td>更多按钮的文本</td>\n</tr>\n<tr>\n<td>buttonWidth</td>\n<td>number</td>\n<td>-</td>\n<td>按钮的固定宽度,如果不设置则自动计算</td>\n</tr>\n<tr>\n<td>buttonMargin</td>\n<td>number</td>\n<td>8</td>\n<td>按钮之间的间距</td>\n</tr>\n<tr>\n<td>dropdownProps</td>\n<td>object</td>\n<td>-</td>\n<td>传递给Dropdown组件的属性</td>\n</tr>\n<tr>\n<td>menuProps</td>\n<td>object</td>\n<td>-</td>\n<td>传递给Menu组件的属性</td>\n</tr>\n<tr>\n<td>getPopupContainer</td>\n<td>function</td>\n<td>-</td>\n<td>菜单渲染父节点,默认渲染到body上</td>\n</tr>\n<tr>\n<td>onVisibleChange</td>\n<td>function</td>\n<td>-</td>\n<td>菜单显示状态改变时的回调函数</td>\n</tr>\n<tr>\n<td>onMoreClick</td>\n<td>function</td>\n<td>-</td>\n<td>点击更多按钮时的回调函数</td>\n</tr>\n<tr>\n<td>onMenuClick</td>\n<td>function</td>\n<td>-</td>\n<td>点击菜单项时的回调函数</td>\n</tr>\n<tr>\n<td>moreIcon</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>自定义更多按钮的图标</td>\n</tr>\n<tr>\n<td>moreButtonProps</td>\n<td>object</td>\n<td>-</td>\n<td>传递给更多按钮的属性</td>\n</tr>\n<tr>\n<td>forceRender</td>\n<td>boolean</td>\n<td>false</td>\n<td>是否强制渲染所有按钮,不进行自适应处理</td>\n</tr>\n</tbody>\n</table>\n<h3>LoadingButton 组件</h3>\n<p>LoadingButton是一个封装了加载状态的按钮组件,简化了异步操作的处理。</p>\n<h4>属性</h4>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>onClick</td>\n<td>function</td>\n<td>-</td>\n<td>点击按钮时的回调函数,可以返回Promise</td>\n</tr>\n<tr>\n<td>loading</td>\n<td>boolean</td>\n<td>false</td>\n<td>是否显示加载状态</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>boolean</td>\n<td>false</td>\n<td>是否禁用按钮</td>\n</tr>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>按钮内容</td>\n</tr>\n<tr>\n<td>...rest</td>\n<td>-</td>\n<td>-</td>\n<td>其他传递给Button组件的属性</td>\n</tr>\n</tbody>\n</table>\n<h3>useLoading Hook</h3>\n<p>useLoading是一个用于管理异步操作加载状态的Hook。</p>\n<h4>参数与返回值</h4>\n<table>\n<thead>\n<tr>\n<th>参数</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>-</td>\n<td>-</td>\n<td>-</td>\n<td>不接受参数</td>\n</tr>\n</tbody>\n</table>\n<p><strong>返回值</strong>:</p>\n<table>\n<thead>\n<tr>\n<th>名称</th>\n<th>类型</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>loading</td>\n<td>boolean</td>\n<td>当前加载状态</td>\n</tr>\n<tr>\n<td>withLoading</td>\n<td>function</td>\n<td>包装异步函数,自动管理加载状态</td>\n</tr>\n</tbody>\n</table>\n<h3>ConfirmButton 组件</h3>\n<p>ConfirmButton是一个带有确认功能的按钮组件,支持弹窗确认和模态框确认两种模式。</p>\n<h4>属性</h4>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>按钮内容</td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>function</td>\n<td>-</td>\n<td>确认后的回调函数</td>\n</tr>\n<tr>\n<td>title</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td>确认框标题</td>\n</tr>\n<tr>\n<td>content</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td>确认框内容</td>\n</tr>\n<tr>\n<td>okText</td>\n<td>string</td>\n<td>\"确定\"</td>\n<td>确认按钮文字</td>\n</tr>\n<tr>\n<td>cancelText</td>\n<td>string</td>\n<td>\"取消\"</td>\n<td>取消按钮文字</td>\n</tr>\n<tr>\n<td>type</td>\n<td>\"popconfirm\" | \"modal\"</td>\n<td>\"popconfirm\"</td>\n<td>确认框类型,支持气泡确认框和模态框</td>\n</tr>\n<tr>\n<td>modalProps</td>\n<td>object</td>\n<td>-</td>\n<td>传递给Modal组件的属性(当type为\"modal\"时有效)</td>\n</tr>\n<tr>\n<td>popconfirmProps</td>\n<td>object</td>\n<td>-</td>\n<td>传递给Popconfirm组件的属性(当type为\"popconfirm\"时有效)</td>\n</tr>\n<tr>\n<td>...rest</td>\n<td>-</td>\n<td>-</td>\n<td>其他传递给Button组件的属性</td>\n</tr>\n</tbody>\n</table>\n<h3>ConfirmLink 组件</h3>\n<p>ConfirmLink是ConfirmButton的变体,渲染为链接样式。</p>\n<h4>属性</h4>\n<p>与ConfirmButton相同,但默认渲染为链接样式。</p>\n<h3>ConfirmText 组件</h3>\n<p>ConfirmText是ConfirmButton的变体,渲染为纯文本样式。</p>\n<h4>属性</h4>\n<p>与ConfirmButton相同,但默认渲染为纯文本样式。</p>\n<h3>withConfirm 高阶组件</h3>\n<p>withConfirm是一个高阶组件,用于为任意组件添加确认功能。</p>\n<h4>参数</h4>\n<table>\n<thead>\n<tr>\n<th>参数名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>options</td>\n<td>object</td>\n<td>-</td>\n<td>确认框配置选项</td>\n</tr>\n<tr>\n<td>options.title</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td>确认框标题</td>\n</tr>\n<tr>\n<td>options.content</td>\n<td>string | ReactNode</td>\n<td>-</td>\n<td>确认框内容</td>\n</tr>\n<tr>\n<td>options.okText</td>\n<td>string</td>\n<td>\"确定\"</td>\n<td>确认按钮文字</td>\n</tr>\n<tr>\n<td>options.cancelText</td>\n<td>string</td>\n<td>\"取消\"</td>\n<td>取消按钮文字</td>\n</tr>\n<tr>\n<td>options.type</td>\n<td>\"popconfirm\" | \"modal\"</td>\n<td>\"popconfirm\"</td>\n<td>确认框类型</td>\n</tr>\n<tr>\n<td>options.modalProps</td>\n<td>object</td>\n<td>-</td>\n<td>传递给Modal组件的属性</td>\n</tr>\n<tr>\n<td>options.popconfirmProps</td>\n<td>object</td>\n<td>-</td>\n<td>传递给Popconfirm组件的属性</td>\n</tr>\n</tbody>\n</table>\n<h3>FetchButton 组件</h3>\n<p>FetchButton是一个集成了数据请求功能的按钮组件,基于@kne/react-fetch库实现。</p>\n<h4>属性</h4>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>按钮内容</td>\n</tr>\n<tr>\n<td>api</td>\n<td>string | object | function</td>\n<td>-</td>\n<td>请求API,可以是字符串、对象或函数</td>\n</tr>\n<tr>\n<td>params</td>\n<td>object</td>\n<td>-</td>\n<td>请求参数</td>\n</tr>\n<tr>\n<td>onSuccess</td>\n<td>function</td>\n<td>-</td>\n<td>请求成功回调</td>\n</tr>\n<tr>\n<td>onError</td>\n<td>function</td>\n<td>-</td>\n<td>请求失败回调</td>\n</tr>\n<tr>\n<td>beforeFetch</td>\n<td>function</td>\n<td>-</td>\n<td>请求前处理函数,返回false可阻止请求</td>\n</tr>\n<tr>\n<td>afterFetch</td>\n<td>function</td>\n<td>-</td>\n<td>请求后处理函数</td>\n</tr>\n<tr>\n<td>fetchOptions</td>\n<td>object</td>\n<td>-</td>\n<td>传递给fetch函数的选项</td>\n</tr>\n<tr>\n<td>...rest</td>\n<td>-</td>\n<td>-</td>\n<td>其他传递给LoadingButton组件的属性</td>\n</tr>\n</tbody>\n</table>\n<h3>ButtonFooter 组件</h3>\n<p>ButtonFooter是一个页面底部按钮区域组件,可以自动计算高度并设置CSS变量。</p>\n<h4>属性</h4>\n<table>\n<thead>\n<tr>\n<th>属性名</th>\n<th>类型</th>\n<th>默认值</th>\n<th>说明</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>children</td>\n<td>ReactNode</td>\n<td>-</td>\n<td>按钮区域内容</td>\n</tr>\n<tr>\n<td>className</td>\n<td>string</td>\n<td>-</td>\n<td>自定义类名</td>\n</tr>\n</tbody>\n</table>`,\n example: {\n isFull: false,\n className: `button_group_e0271`,\n style: `.button_group_e0271 .ant-card {\n border-color: black;\n text-align: center;\n width: 200px;\n}`,\n list: [{\n title: `ButtonGroup`,\n description: `这里填写示例说明`,\n code: `const { default: ButtonGroup, ConfirmButton } = _ButtonGroup;\nconst { Flex, Button } = antd;\nconst { useState, useEffect } = React;\n\nconst Example = () => {\n const [width, setWidth] = useState(200);\n return (<Flex gap={8}>\n <div style={{ width: \\`\\${width}px\\` }}>\n <ButtonGroup\n list={[{\n type: 'primary', children: '操作1'\n }, {\n type: 'primary', children: '操作1-1', hidden: true\n }, {\n children: '操作2',\n tooltipProps: {\n title: '操作2'\n }\n }, {\n children: '操作3', disabled: true,\n tooltipProps: {\n title: '操作3==='\n }\n }, {\n children: '操作4', message: '确定要执行操作吗?', disabled: true\n }, {\n children: '操作5', message: '确定要执行操作吗?'\n }]}\n more=\"...\"\n />\n </div>\n <Flex gap={8}>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width + 20;\n });\n }}\n >\n 增加容器宽度\n </Button>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width - 20;\n });\n }}\n >\n 减少容器宽度\n </Button>\n </Flex>\n </Flex>);\n};\n\nconst CompactExample = () => {\n const [width, setWidth] = useState(200);\n return (<Flex gap={8}>\n <div style={{ width: \\`\\${width}px\\` }}>\n <ButtonGroup\n compact\n list={[{\n type: 'primary', children: '操作1'\n }, {\n children: '操作2'\n }, {\n children: '操作3', hidden: true\n }, {\n children: '操作4', message: '确定要执行操作吗?'\n }]}\n />\n </div>\n <Flex gap={8}>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width + 20;\n });\n }}\n >\n 增加容器宽度\n </Button>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width - 20;\n });\n }}\n >\n 减少容器宽度\n </Button>\n </Flex>\n </Flex>);\n};\n\nconst LoadChildren = ({ children }) => {\n const [loading, setLoading] = useState(true);\n useEffect(() => {\n setTimeout(() => {\n setLoading(false);\n }, 1000);\n }, []);\n if (loading) {\n return null;\n }\n return children({\n onClick: () => {\n console.log('加载完成');\n }\n });\n};\nconst FunctionProps = () => {\n const [width, setWidth] = useState(200);\n return (<Flex gap={8}>\n <div style={{ width: \\`\\${width}px\\` }}>\n <ButtonGroup\n list={[(props) => {\n return (<Button {...props} type=\"primary\">\n 操作1\n </Button>);\n }, (props) => {\n return <Button {...props}>操作2</Button>;\n }, (props) => {\n return <Button {...props}>操作3</Button>;\n }, (props) => {\n return (<LoadChildren key={props.key}>\n {({ onClick }) => {\n return (<ConfirmButton\n {...props}\n isModal={props.isDropdown}\n message=\"确定要执行操作吗?\"\n onClick={onClick}\n >\n 操作4\n </ConfirmButton>);\n }}\n </LoadChildren>);\n }]}\n />\n </div>\n <Flex gap={8}>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width + 20;\n });\n }}\n >\n 增加容器宽度\n </Button>\n <Button\n onClick={() => {\n setWidth((width) => {\n return width - 20;\n });\n }}\n >\n 减少容器宽度\n </Button>\n </Flex>\n </Flex>);\n};\n\nconst BaseExample = () => {\n return <div>\n <Flex vertical gap={8}>\n <div>base:</div>\n <Example />\n <div>compact:</div>\n <CompactExample />\n <div>function props:</div>\n <FunctionProps />\n </Flex>\n </div>;\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ButtonGroup\",\n packageName: \"@kne/current-lib_button-group\",\n importStatement: \"import * as _ButtonGroup from \\\"@kne/button-group\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n},{\n title: `LoadingButton`,\n description: `这里填写示例说明`,\n code: `const { LoadingButton } = _ButtonGroup;\nconst { Space, App } = antd;\nconst BaseExample = () => {\n const { message } = App.useApp();\n const clickHandler = () => {\n message.success('点击按钮1s后完成加载');\n return new Promise((resolve) => {\n setTimeout(() => {\n message.success('完成');\n resolve();\n }, 1000);\n });\n };\n return (<Space wrap>\n <LoadingButton onClick={clickHandler}>按钮</LoadingButton>\n <LoadingButton onClick={clickHandler}>\n {(isLoading) => (isLoading ? '正在加载中...' : '切换加载文案')}\n </LoadingButton>\n </Space>);\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ButtonGroup\",\n packageName: \"@kne/current-lib_button-group\",\n importStatement: \"import * as _ButtonGroup from \\\"@kne/button-group\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n},{\n title: `ConfirmButton`,\n description: `这里填写示例说明`,\n code: `const { ConfirmButton, ConfirmLink, ConfirmText } = _ButtonGroup;\nconst { Flex } = antd;\nconst BaseExample = () => {\n return <Flex gap={8} vertical>\n <Flex gap={8}>\n <ConfirmButton message=\"确定要删除吗?\" onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log('确定删除');\n resolve();\n }, 500);\n });\n }}>删除</ConfirmButton>\n\n <ConfirmButton disabled message=\"确定要删除吗?\" onClick={() => {\n console.log('确定删除');\n }}>删除</ConfirmButton>\n\n <ConfirmButton title=\"确定要删除吗?\"\n message=\"删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除\"\n onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log('确定删除');\n resolve();\n }, 500);\n });\n }}>删除</ConfirmButton>\n\n <ConfirmButton isDelete message=\"确定要删除吗?\" onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log('确定删除');\n resolve();\n }, 500);\n });\n }}>删除</ConfirmButton>\n\n <ConfirmButton isDelete title=\"确定要删除吗?\"\n message=\"删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除\"\n onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log('确定删除');\n resolve();\n }, 500);\n });\n }}>删除</ConfirmButton>\n </Flex>\n <Flex gap={8}>\n <ConfirmButton isModal message=\"确定要删除吗?\" onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log('确定删除');\n resolve();\n }, 500);\n });\n }}>删除</ConfirmButton>\n\n <ConfirmButton isModal title=\"确定要删除吗?\"\n message=\"删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除\"\n onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log('确定删除');\n resolve();\n }, 500);\n });\n }}>删除</ConfirmButton>\n\n <ConfirmButton isModal isDelete message=\"确定要删除吗?\" onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log('确定删除');\n resolve();\n }, 500);\n });\n }}>删除</ConfirmButton>\n\n <ConfirmButton isModal isDelete title=\"确定要删除吗?\"\n message=\"删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除删除\"\n onClick={() => {\n return new Promise((resolve) => {\n setTimeout(() => {\n console.log('确定删除');\n resolve();\n }, 500);\n });\n }}>删除</ConfirmButton>\n </Flex>\n <Flex gap={8}>\n <ConfirmLink onClick={() => {\n console.log('删除');\n }}>删除</ConfirmLink>\n <ConfirmText onClick={() => {\n console.log('删除');\n }}>删除</ConfirmText>\n </Flex>\n </Flex>;\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ButtonGroup\",\n packageName: \"@kne/current-lib_button-group\",\n importStatement: \"import * as _ButtonGroup from \\\"@kne/button-group\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n},{\n title: `FetchButton`,\n description: `这里填写示例说明`,\n code: `const { FetchButton } = _ButtonGroup;\n\nconst BaseExample = () => {\n return <div>\n <FetchButton api={{\n loader: async () => {\n return new Promise((resolve, reject) => {\n setTimeout(() => {\n resolve({ data: 'xxxxx' });\n }, 1000);\n });\n }\n }} onClick={(data) => {\n console.log(data);\n }}>点击加载数据</FetchButton>\n </div>;\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ButtonGroup\",\n packageName: \"@kne/current-lib_button-group\",\n importStatement: \"import * as _ButtonGroup from \\\"@kne/button-group\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n},{\n title: `ButtonFooter`,\n description: `这里填写示例说明`,\n code: `const { ButtonFooter } = _ButtonGroup;\nconst { Flex, Button } = antd;\nconst BaseExample = () => {\n return (\n <ButtonFooter>\n <Flex justify=\"space-between\" align=\"middle\">\n <Button>按钮</Button>\n </Flex>\n </ButtonFooter>\n );\n};\n\nrender(<BaseExample />);\n\n`,\n scope: [{\n name: \"_ButtonGroup\",\n packageName: \"@kne/current-lib_button-group\",\n importStatement: \"import * as _ButtonGroup from \\\"@kne/button-group\\\"\",\n component: component_1\n},{\n name: \"antd\",\n packageName: \"antd\",\n component: component_2\n}]\n}]\n }\n};\nexport default readmeConfig;\n"],"names":["name","summary","description","packageName","api","example","isFull","className","style","list","title","code","scope","importStatement","component"],"sourceRoot":""}
|