-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | ||
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
<link rel="shortcut icon" href="https://gw.alipayobjects.com/zos/hitu-asset/c88e3678-6900-4289-8538-31367c2d30f2/hitu-1609235995955-image.png"> | ||
<link rel="stylesheet" href="/pro-components/umi.8faca2de.css"> | ||
<script src="/pro-components/preload_helper.6706e1cf.js"></script> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
<script src="/pro-components/umi.06a320f2.js"></script> | ||
</body> | ||
</html> |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
"use strict";(self.webpackChunk_louhaojie99_pro_components=self.webpackChunk_louhaojie99_pro_components||[]).push([[241],{21435:function(g,t,e){var f;e.r(t),e.d(t,{demos:function(){return R}});var p=e(90228),a=e.n(p),P=e(87999),C=e.n(P),l=e(75271),M=e(3966),A=e(57228),s=e(19187),T=e(49423),B=e(16458),R={"destructiblecontainer-demo-demos":{component:l.memo(l.lazy(function(){return e.e(920).then(e.bind(e,68714))})),asset:{type:"BLOCK",id:"destructiblecontainer-demo-demos",refAtomIds:["DestructibleContainer"],dependencies:{"index.tsx":{type:"FILE",value:e(11796).Z},antd:{type:"NPM",value:"5.22.7"},react:{type:"NPM",value:"18.3.1"},"./UserDetailsDrawer.tsx":{type:"FILE",value:e(97265).Z},"./UserDetailsModal.tsx":{type:"FILE",value:e(52456).Z},"@louhaojie99/pro-components":{type:"NPM",value:"0.0.3"}},entry:"index.tsx"},context:{"./UserDetailsDrawer.tsx":s,"./UserDetailsModal.tsx":T,antd:A,react:f||(f=e.t(l,2)),"C:/Users/HJ/Desktop/pro-components/src/DestructibleContainer/demos/UserDetailsDrawer.tsx":s,"C:/Users/HJ/Desktop/pro-components/src/DestructibleContainer/demos/UserDetailsModal.tsx":T,"@louhaojie99/pro-components":B},renderOpts:{compile:function(){var _=C()(a()().mark(function z(){var L,G=arguments;return a()().wrap(function(h){for(;;)switch(h.prev=h.next){case 0:return h.next=2,e.e(837).then(e.bind(e,57837));case 2:return h.abrupt("return",(L=h.sent).default.apply(L,G));case 3:case"end":return h.stop()}},z)}));function o(){return _.apply(this,arguments)}return o}()}}}},19187:function(g,t,e){e.r(t);var f=e(26068),p=e.n(f),a=e(16458),P=e(38706),C=e(75271),l=e(52676),M=function(s){return(0,C.useEffect)(function(){console.log("props: ",s)},[]),console.log("render: ",s),(0,l.jsxs)(P.Z,p()(p()({title:"\u7528\u6237\u8BE6\u60C5"},s),{},{children:[(0,l.jsx)("p",{children:"\u5C0F\u9177"}),(0,l.jsx)("p",{children:"\u5C0F\u6A31"}),(0,l.jsx)("p",{children:"\u5C0F\u7F8E"})]}))};t.default=(0,a.DestructibleContainer)(M)},49423:function(g,t,e){e.r(t);var f=e(26068),p=e.n(f),a=e(16458),P=e(96934),C=e(75271),l=e(52676),M=function(s){return(0,C.useEffect)(function(){console.log("props: ",s)},[]),console.log("render: ",s),(0,l.jsxs)(P.Z,p()(p()({title:"\u7528\u6237\u8BE6\u60C5"},s),{},{children:[(0,l.jsx)("p",{children:"\u5C0F\u9177"}),(0,l.jsx)("p",{children:"\u5C0F\u6A31"}),(0,l.jsx)("p",{children:"\u5C0F\u7F8E"})]}))};t.default=(0,a.DestructibleContainer)(M)},16458:function(g,t,e){e.r(t),e.d(t,{AsyncButton:function(){return G},DestructibleContainer:function(){return ae},EditableTable:function(){return Ae},IntlProvider:function(){return he},LanguageEnum:function(){return V},OverlaySpin:function(){return re},utils:function(){return f}});var f={};e.r(f),e.d(f,{parseJSON:function(){return xe}});var p=e(26068),a=e.n(p),P=e(90228),C=e.n(P),l=e(87999),M=e.n(l),A=e(48305),s=e.n(A),T=e(67825),B=e.n(T),R=e(27807),_=e(75271),o=e(52676),z=["onClick"],L=_.memo(function(i){var n=i.onClick,r=B()(i,z),u=(0,_.useState)(void 0),D=s()(u,2),c=D[0],m=D[1],O=function(){var v=M()(C()().mark(function E(U){return C()().wrap(function(d){for(;;)switch(d.prev=d.next){case 0:if(n){d.next=2;break}return d.abrupt("return");case 2:return d.prev=2,m(!0),d.next=6,n==null?void 0:n(U);case 6:return d.prev=6,m(!1),d.finish(6);case 9:case"end":return d.stop()}},E,null,[[2,,6,9]])}));return function(U){return v.apply(this,arguments)}}();return(0,o.jsx)(R.ZP,a()({loading:c,onClick:O},r))}),G=L,q=e(40023),h=["spinning","background","tip"],Q="overlay-spin",te=function(n){var r=n.spinning,u=n.background,D=u===void 0?"#fff":u,c=n.tip,m=B()(n,h);return r?(0,o.jsxs)("div",{className:"".concat(Q,"-container"),style:{"--background":D},children:[(0,o.jsx)(q.Z,a()({className:Q,spinning:r},m)),c&&(0,o.jsx)("div",{className:"".concat(Q,"-tip"),children:c})]}):null},re=te,oe=function(n){return function(r){var u=r.visible,D=r.open,c=r.afterVisibleChange,m=r.afterOpenChange,O=r.afterClose,v=u!=null?u:D,E=c!=null?c:m,U=(0,_.useState)(v),b=s()(U,2),d=b[0],F=b[1],Y=(0,_.useState)(v===!1),K=s()(Y,2),y=K[0],x=K[1],W=function(N){E==null||E(N),N||x(!0)},j=function(){O==null||O(),x(!0)};return(0,_.useEffect)(function(){v?(x(!1),setTimeout(function(){return F(v)},0)):F(v)},[v]),y?(0,o.jsx)(o.Fragment,{}):(0,o.jsx)(n,a()(a()({},r),{},{open:d,afterOpenChange:W,afterClose:j}))}},ae=oe,se=e(69417),le=e(35862),V=function(i){return i.ZH_CN="zh-CN",i.EN_US="en-US",i}({}),ie=e(82092),ee=e.n(ie),ue=e(66262),de=e(20973),ce=e(83144),me=e(78843),ve={welcome:"hello world"},fe=ve,pe={welcome:"\u4F60\u597D\u4E16\u754C"},De=pe,ne=function(n){var r=ee()(ee()({},V.ZH_CN,{message:De,antd:de.Z}),V.EN_US,{message:fe,antd:ue.Z});return r[n]},Ce=(0,ce.Sn)(),_e=function(){var n=arguments.length>0&&arguments[0]!==void 0?arguments[0]:V.ZH_CN;return(0,me.d)({locale:n,messages:ne(n).message},Ce)},Ee=_.memo(function(i){var n=i.locale,r=i.children,u=_e(n);return(0,o.jsx)(le.zt,{value:u,children:(0,o.jsx)(se.ZP,{locale:ne(n).antd,children:r})})}),he=Ee,ge=e(15558),Pe=e.n(ge),Me=e(29369),Oe=e(72149),Ue=e(72774),be=e(63801),X=e(42748),ye=e(77995),je=be.Z.Link,Ie=function(n){var r=n.className,u=n.style,D=n.bordered,c=D===void 0?!1:D,m=n.columns,O=n.formRef,v=n.options,E=v!=null?v:{},U=E.onlyPreview,b=U===void 0?!1:U,d=E.hideAdd,F=d===void 0?!1:d,Y=X.Z.useForm(),K=s()(Y,1),y=K[0],x=(0,Oe.Z)(n,{defaultValuePropName:"defaultValue",valuePropName:"value",trigger:"onChange"}),W=s()(x,2),j=W[0],k=W[1];(0,_.useEffect)(function(){y.setFieldsValue({items:j!=null?j:[]})},[j]),(0,_.useImperativeHandle)(O,function(){return y});var N=(0,Ue.Z)(function(Z){var I=Z.remove;return[].concat(Pe()(m!=null?m:[]),[{title:"\u64CD\u4F5C",dataIndex:"action",fixed:"right",render:function(J,w){return(0,o.jsx)(je,{disabled:!!b,onClick:function(){return I(w.key)},children:"\u5220\u9664"})}}])}),Se=function(I){k(I)};return(0,o.jsx)(X.Z,{className:r,form:y,style:a()({},u),autoComplete:"off",component:!1,disabled:!!b,initialValues:{items:j},onValuesChange:function(I,S){var J=S.items;Se(J)},children:(0,o.jsx)(X.Z.List,{name:"items",children:function(I,S){var J=S.add,w=S.remove;return(0,o.jsx)(ye.Z,a()(a()({rowKey:"key",bordered:c,dataSource:I.map(function(H){return a()(a()({},y.getFieldValue(["items",H.key])),{},{key:H.name})}),columns:N({remove:w})},!F&&{footer:function(){return(0,o.jsx)(R.ZP,{block:!0,icon:(0,o.jsx)(Me.Z,{}),type:"dashed",disabled:!!b,onClick:M()(C()().mark(function Te(){return C()().wrap(function($){for(;;)switch($.prev=$.next){case 0:return $.next=2,y.validateFields();case 2:J();case 3:case"end":return $.stop()}},Te)})),children:"\u6DFB\u52A0\u4E00\u884C"})}}),{},{pagination:!1,scroll:{x:"max-content"}}))}})})},Ae=Ie,xe=function(n){var r=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},u=function(m){return typeof m=="string"};try{if(!u(n))return r;var D=JSON.parse(n!=null?n:"");return D}catch(c){return console.error("Error parsing JSON:",c),r}}},16888:function(g,t,e){e.r(t),e.d(t,{texts:function(){return p}});var f=e(3966);const p=[{value:"\u53EF\u7C89\u788E\u7684\u5BB9\u5668\uFF08\u9AD8\u9636\u7EC4\u4EF6\uFF09",paraId:0,tocIndex:0},{value:"\u53EF\u4EE5\u63A7\u5236\u5305\u88F9\u7684\u7EC4\u4EF6\u7684 props \u4E2D\u7684 visible \u6216\u8005 open \u53D8\u4E3A false \u65F6\u76F4\u63A5\u9500\u6BC1\u6574\u4E2A\u7EC4\u4EF6\uFF0C\u800C\u4E0D\u4F1A\u4FDD\u7559\u4E0B\u4E00\u4E9B\u72B6\u6001\uFF0C",paraId:1,tocIndex:1},{value:"\u533A\u522B\u4E8E ",paraId:1,tocIndex:1},{value:"visible && <Container />",paraId:1,tocIndex:1},{value:" \u7684\u8FD9\u79CD\u5199\u6CD5\uFF0C\u901A\u8FC7\u8FD9\u4E2A\u9AD8\u9636\u7EC4\u4EF6\u5904\u7406\u540E\u53EF\u4EE5\u4FDD\u7559\u539F\u672C\u7684\u52A8\u753B\u6548\u679C\uFF0C\u800C\u5E76\u4E14\u76F4\u63A5\u4E0D\u6E32\u67D3\uFF0C",paraId:1,tocIndex:1},{value:"\u652F\u6301 ant \u7EC4\u4EF6\u4EE5\u53CA\u6240\u6709\u5B9E\u73B0\u4E86 visible \u4EE5\u53CA afterVisibleChange \u7684\u81EA\u5B9A\u4E49\u7EC4\u4EF6",paraId:1,tocIndex:1}]},97265:function(g,t){t.Z=`import { DestructibleContainer } from '@louhaojie99/pro-components'; | ||
import type { DrawerProps } from 'antd'; | ||
import { Drawer } from 'antd'; | ||
import React, { useEffect } from 'react'; | ||
const UserDetailsDrawer: React.FC<DrawerProps> = (props) => { | ||
useEffect(() => { | ||
console.log('props: ', props); | ||
}, []); | ||
console.log('render: ', props); | ||
return ( | ||
<Drawer title="\u7528\u6237\u8BE6\u60C5" {...props}> | ||
<p>\u5C0F\u9177</p> | ||
<p>\u5C0F\u6A31</p> | ||
<p>\u5C0F\u7F8E</p> | ||
</Drawer> | ||
); | ||
}; | ||
export default DestructibleContainer(UserDetailsDrawer); | ||
`},52456:function(g,t){t.Z=`import { DestructibleContainer } from '@louhaojie99/pro-components'; | ||
import type { ModalProps } from 'antd'; | ||
import { Modal } from 'antd'; | ||
import React, { useEffect } from 'react'; | ||
const UserDetailsModal: React.FC<ModalProps> = (props) => { | ||
useEffect(() => { | ||
console.log('props: ', props); | ||
}, []); | ||
console.log('render: ', props); | ||
return ( | ||
<Modal title="\u7528\u6237\u8BE6\u60C5" {...props}> | ||
<p>\u5C0F\u9177</p> | ||
<p>\u5C0F\u6A31</p> | ||
<p>\u5C0F\u7F8E</p> | ||
</Modal> | ||
); | ||
}; | ||
export default DestructibleContainer(UserDetailsModal); | ||
`},11796:function(g,t){t.Z=`import { Button, Space } from 'antd'; | ||
import React, { useState } from 'react'; | ||
import UserDetailsDrawer from './UserDetailsDrawer'; | ||
import UserDetailsModal from './UserDetailsModal'; | ||
const App: React.FC = () => { | ||
const [drawerVisible, setDrawerVisible] = useState(false); | ||
const [modalVisible, setModalVisible] = useState(false); | ||
return ( | ||
<Space> | ||
<Button | ||
type="primary" | ||
onClick={() => { | ||
setDrawerVisible(true); | ||
}} | ||
> | ||
\u6253\u5F00\u62BD\u5C49 | ||
</Button> | ||
<UserDetailsDrawer | ||
open={drawerVisible} | ||
onClose={() => setDrawerVisible(false)} | ||
/> | ||
<br /> | ||
<Button | ||
type="primary" | ||
onClick={() => { | ||
setModalVisible(true); | ||
}} | ||
> | ||
\u6253\u5F00\u5F39\u7A97 | ||
</Button> | ||
<UserDetailsModal | ||
open={modalVisible} | ||
onCancel={() => setModalVisible(false)} | ||
/> | ||
</Space> | ||
); | ||
}; | ||
export default App; | ||
`}}]); |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,118 @@ | ||
"use strict";(self.webpackChunk_louhaojie99_pro_components=self.webpackChunk_louhaojie99_pro_components||[]).push([[316],{32365:function(J,c,e){var g;e.r(c),e.d(c,{demos:function(){return $}});var T=e(90228),i=e.n(T),K=e(87999),I=e.n(K),D=e(75271),W=e(23010),H=e(16458),h=e(57228),$={"editabletable-demo-demos":{component:D.memo(D.lazy(function(){return e.e(794).then(e.bind(e,31765))})),asset:{type:"BLOCK",id:"editabletable-demo-demos",refAtomIds:["EditableTable"],dependencies:{"index.tsx":{type:"FILE",value:e(47838).Z},"@louhaojie99/pro-components":{type:"NPM",value:"0.0.3"},antd:{type:"NPM",value:"5.22.7"},react:{type:"NPM",value:"18.3.1"}},entry:"index.tsx"},context:{"@louhaojie99/pro-components":H,antd:h,react:g||(g=e.t(D,2))},renderOpts:{compile:function(){var A=I()(i()().mark(function v(){var t,z=arguments;return i()().wrap(function(p){for(;;)switch(p.prev=p.next){case 0:return p.next=2,e.e(837).then(e.bind(e,57837));case 2:return p.abrupt("return",(t=p.sent).default.apply(t,z));case 3:case"end":return p.stop()}},v)}));function x(){return A.apply(this,arguments)}return x}()}}}},16458:function(J,c,e){e.r(c),e.d(c,{AsyncButton:function(){return p},DestructibleContainer:function(){return le},EditableTable:function(){return xe},IntlProvider:function(){return be},LanguageEnum:function(){return N},OverlaySpin:function(){return te},utils:function(){return g}});var g={};e.r(g),e.d(g,{parseJSON:function(){return Ne}});var T=e(26068),i=e.n(T),K=e(90228),I=e.n(K),D=e(87999),W=e.n(D),H=e(48305),h=e.n(H),$=e(67825),A=e.n($),x=e(27807),v=e(75271),t=e(52676),z=["onClick"],w=v.memo(function(r){var n=r.onClick,a=A()(r,z),l=(0,v.useState)(void 0),m=h()(l,2),s=m[0],u=m[1],y=function(){var d=W()(I()().mark(function f(C){return I()().wrap(function(o){for(;;)switch(o.prev=o.next){case 0:if(n){o.next=2;break}return o.abrupt("return");case 2:return o.prev=2,u(!0),o.next=6,n==null?void 0:n(C);case 6:return o.prev=6,u(!1),o.finish(6);case 9:case"end":return o.stop()}},f,null,[[2,,6,9]])}));return function(C){return d.apply(this,arguments)}}();return(0,t.jsx)(x.ZP,i()({loading:s,onClick:y},a))}),p=w,ee=e(40023),ne=["spinning","background","tip"],G="overlay-spin",ae=function(n){var a=n.spinning,l=n.background,m=l===void 0?"#fff":l,s=n.tip,u=A()(n,ne);return a?(0,t.jsxs)("div",{className:"".concat(G,"-container"),style:{"--background":m},children:[(0,t.jsx)(ee.Z,i()({className:G,spinning:a},u)),s&&(0,t.jsx)("div",{className:"".concat(G,"-tip"),children:s})]}):null},te=ae,re=function(n){return function(a){var l=a.visible,m=a.open,s=a.afterVisibleChange,u=a.afterOpenChange,y=a.afterClose,d=l!=null?l:m,f=s!=null?s:u,C=(0,v.useState)(d),b=h()(C,2),o=b[0],R=b[1],X=(0,v.useState)(d===!1),U=h()(X,2),E=U[0],O=U[1],M=function(F){f==null||f(F),F||O(!0)},P=function(){y==null||y(),O(!0)};return(0,v.useEffect)(function(){d?(O(!1),setTimeout(function(){return R(d)},0)):R(d)},[d]),E?(0,t.jsx)(t.Fragment,{}):(0,t.jsx)(n,i()(i()({},a),{},{open:o,afterOpenChange:M,afterClose:P}))}},le=re,oe=e(69417),se=e(35862),N=function(r){return r.ZH_CN="zh-CN",r.EN_US="en-US",r}({}),ie=e(82092),_=e.n(ie),ue=e(66262),de=e(20973),me=e(83144),ce=e(78843),ve={welcome:"hello world"},fe=ve,pe={welcome:"\u4F60\u597D\u4E16\u754C"},ge=pe,q=function(n){var a=_()(_()({},N.ZH_CN,{message:ge,antd:de.Z}),N.EN_US,{message:fe,antd:ue.Z});return a[n]},he=(0,me.Sn)(),ye=function(){var n=arguments.length>0&&arguments[0]!==void 0?arguments[0]:N.ZH_CN;return(0,ce.d)({locale:n,messages:q(n).message},he)},Ce=v.memo(function(r){var n=r.locale,a=r.children,l=ye(n);return(0,t.jsx)(se.zt,{value:l,children:(0,t.jsx)(oe.ZP,{locale:q(n).antd,children:a})})}),be=Ce,Ee=e(15558),Pe=e.n(Ee),Ie=e(29369),Se=e(72149),Te=e(72774),De=e(63801),Q=e(42748),Oe=e(77995),je=De.Z.Link,Ae=function(n){var a=n.className,l=n.style,m=n.bordered,s=m===void 0?!1:m,u=n.columns,y=n.formRef,d=n.options,f=d!=null?d:{},C=f.onlyPreview,b=C===void 0?!1:C,o=f.hideAdd,R=o===void 0?!1:o,X=Q.Z.useForm(),U=h()(X,1),E=U[0],O=(0,Se.Z)(n,{defaultValuePropName:"defaultValue",valuePropName:"value",trigger:"onChange"}),M=h()(O,2),P=M[0],Y=M[1];(0,v.useEffect)(function(){E.setFieldsValue({items:P!=null?P:[]})},[P]),(0,v.useImperativeHandle)(y,function(){return E});var F=(0,Te.Z)(function(B){var S=B.remove;return[].concat(Pe()(u!=null?u:[]),[{title:"\u64CD\u4F5C",dataIndex:"action",fixed:"right",render:function(V,k){return(0,t.jsx)(je,{disabled:!!b,onClick:function(){return S(k.key)},children:"\u5220\u9664"})}}])}),Re=function(S){Y(S)};return(0,t.jsx)(Q.Z,{className:a,form:E,style:i()({},l),autoComplete:"off",component:!1,disabled:!!b,initialValues:{items:P},onValuesChange:function(S,j){var V=j.items;Re(V)},children:(0,t.jsx)(Q.Z.List,{name:"items",children:function(S,j){var V=j.add,k=j.remove;return(0,t.jsx)(Oe.Z,i()(i()({rowKey:"key",bordered:s,dataSource:S.map(function(Z){return i()(i()({},E.getFieldValue(["items",Z.key])),{},{key:Z.name})}),columns:F({remove:k})},!R&&{footer:function(){return(0,t.jsx)(x.ZP,{block:!0,icon:(0,t.jsx)(Ie.Z,{}),type:"dashed",disabled:!!b,onClick:W()(I()().mark(function Ue(){return I()().wrap(function(L){for(;;)switch(L.prev=L.next){case 0:return L.next=2,E.validateFields();case 2:V();case 3:case"end":return L.stop()}},Ue)})),children:"\u6DFB\u52A0\u4E00\u884C"})}}),{},{pagination:!1,scroll:{x:"max-content"}}))}})})},xe=Ae,Ne=function(n){var a=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},l=function(u){return typeof u=="string"};try{if(!l(n))return a;var m=JSON.parse(n!=null?n:"");return m}catch(s){return console.error("Error parsing JSON:",s),a}}},88654:function(J,c,e){e.r(c),e.d(c,{texts:function(){return T}});var g=e(23010);const T=[{value:"\u53EF\u7F16\u8F91\u8868\u683C",paraId:0,tocIndex:0},{value:"\u5F53\u60A8\u9700\u8981\u5728\u4E00\u4E2A\u7528\u6237\u754C\u9762\u4E2D\u5BF9\u8868\u683C\u6570\u636E\u8FDB\u884C\u5373\u65F6\u7F16\u8F91\u548C\u66F4\u65B0\u65F6\uFF0C\u53EF\u7F16\u8F91\u8868\u683C\uFF08EditableTable\uFF09\u662F\u4E00\u4E2A\u975E\u5E38\u5B9E\u7528\u7684\u7EC4\u4EF6\u3002",paraId:1,tocIndex:1}]},47838:function(J,c){c.Z=`import type { | ||
EditableTableProps, | ||
EditableTableRef, | ||
} from '@louhaojie99/pro-components'; | ||
import { EditableTable } from '@louhaojie99/pro-components'; | ||
import { Button, Divider, Form, Input, Select, Space, Typography } from 'antd'; | ||
import React, { useRef, useState } from 'react'; | ||
const { Title, Paragraph } = Typography; | ||
type UserInfo = { | ||
name: string; | ||
age: number; | ||
gender: 'male' | 'female'; | ||
}; | ||
const App: React.FC = () => { | ||
const formRef = useRef<EditableTableRef<UserInfo>>(null); | ||
const [dataSource, setDataSource] = useState<UserInfo[]>([ | ||
{ name: '\u5C0F\u9177', age: 20, gender: 'male' }, | ||
{ name: '\u5C0F\u6A31', age: 18, gender: 'female' }, | ||
]); | ||
const columns: EditableTableProps<UserInfo>['columns'] = [ | ||
{ | ||
title: '\u59D3\u540D', | ||
dataIndex: 'name', | ||
key: 'name', | ||
render: (_, record) => { | ||
return ( | ||
<Form.Item | ||
style={{ padding: 0, margin: 0 }} | ||
name={[record.key, 'name']} | ||
rules={[{ required: true, message: '\u8BF7\u8F93\u5165' }]} | ||
> | ||
<Input allowClear placeholder="\u8BF7\u8F93\u5165" /> | ||
</Form.Item> | ||
); | ||
}, | ||
}, | ||
{ | ||
title: '\u5E74\u9F84', | ||
dataIndex: 'age', | ||
key: 'age', | ||
render: (_, record) => { | ||
return ( | ||
<Form.Item | ||
style={{ padding: 0, margin: 0 }} | ||
name={[record.key, 'age']} | ||
rules={[{ required: true, message: '\u8BF7\u8F93\u5165' }]} | ||
> | ||
<Input allowClear placeholder="\u8BF7\u8F93\u5165" /> | ||
</Form.Item> | ||
); | ||
}, | ||
}, | ||
{ | ||
title: '\u6027\u522B', | ||
dataIndex: 'gender', | ||
key: 'gender', | ||
render: (_, record) => { | ||
return ( | ||
<Form.Item | ||
style={{ padding: 0, margin: 0 }} | ||
name={[record.key, 'gender']} | ||
rules={[{ required: true, message: '\u8BF7\u9009\u62E9' }]} | ||
> | ||
<Select | ||
allowClear | ||
options={[ | ||
{ label: '\u7537\u751F', value: 'male' }, | ||
{ label: '\u5973\u751F', value: 'female' }, | ||
]} | ||
placeholder="\u8BF7\u9009\u62E9" | ||
/> | ||
</Form.Item> | ||
); | ||
}, | ||
}, | ||
]; | ||
return ( | ||
<> | ||
<Space style={{ width: '100%' }} direction="vertical"> | ||
<Title level={5}>\u5B66\u751F\u5217\u8868</Title> | ||
<EditableTable<UserInfo> | ||
formRef={formRef} | ||
columns={columns} | ||
value={dataSource} | ||
onChange={setDataSource} | ||
/> | ||
</Space> | ||
<Title level={5}>\u6570\u636E\u9884\u89C8</Title> | ||
<Typography> | ||
<pre>{JSON.stringify(dataSource, null, 2)}</pre> | ||
</Typography> | ||
<Divider /> | ||
<Paragraph>\u5982\u679C\u60A8\u60F3\u8C03\u7528\u8868\u5355\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u53EF\u4EE5\u901A\u8FC7 ref \u6765\u5B9E\u73B0\uFF1A</Paragraph> | ||
<Button | ||
type="primary" | ||
onClick={async () => { | ||
await formRef.current?.validateFields(); | ||
console.log('\u63D0\u4EA4\u7684\u6570\u636E: ', dataSource); | ||
}} | ||
> | ||
\u8868\u5355\u9A8C\u8BC1 | ||
</Button> | ||
</> | ||
); | ||
}; | ||
export default App; | ||
`}}]); |
This file was deleted.
This file was deleted.