@hzab/edit-table 0.1.3 → 0.1.5

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/CHANGELOG.md CHANGED
@@ -1,4 +1,12 @@
1
- # @hzab/edit-table@0.1.3
1
+ # @hzab/edit-table@0.1.5
2
+
3
+ chore: 本仓迁移版本首次发布(源码直出 `main: "src"` + 类型入口指向 `dist`)
4
+
5
+ - `getVal` 改由 `@hzab/utils` 提供,移除对 `@hzab/list-render` 的运行时依赖(打破两包循环依赖)
6
+ - 跨包依赖由 `peerDependencies` 调整为 `dependencies`(修正构建顺序)
7
+ - 组件运行时行为与 0.1.4 保持一致
8
+
9
+ # @hzab/edit-table@0.1.4
2
10
 
3
11
  fix: 编辑数据优化
4
12
  feat:高亮选中行
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 CaiYansong
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -0,0 +1,2 @@
1
+ import "./index.less";
2
+ export declare const ExpandListTemplate: (props: any) => import("react").JSX.Element;
@@ -0,0 +1 @@
1
+ export declare const GetBaseTemplate: (props: any) => import("react").JSX.Element;
@@ -0,0 +1,3 @@
1
+ import "./index.less";
2
+ declare const NumberCellTemplate: (props: any) => import("react").JSX.Element;
3
+ export default NumberCellTemplate;
@@ -0,0 +1,3 @@
1
+ import "./index.less";
2
+ declare const TextCellTemplate: (props: any) => import("react").JSX.Element;
3
+ export default TextCellTemplate;
@@ -0,0 +1,24 @@
1
+ import type { Cell, Compatible, Uncertain, UncertainCompatible } from "@silevis/reactgrid";
2
+ export type OptionType = {
3
+ label: string;
4
+ value: string | number;
5
+ isDisabled?: boolean;
6
+ };
7
+ export interface BaseCell extends Cell {
8
+ selectedValue?: string;
9
+ value: string | number;
10
+ values: OptionType[];
11
+ isDisabled?: boolean;
12
+ }
13
+ export declare const WidthWrapHoc: (WrapComponent: any, props?: {}) => {
14
+ getCompatibleCell(uncertainCell: Uncertain<BaseCell>): Compatible<BaseCell>;
15
+ update(cell: Compatible<BaseCell>, cellToMerge: UncertainCompatible<BaseCell>): Compatible<BaseCell>;
16
+ getClassName(cell: Compatible<BaseCell>, isInEditMode: boolean): string;
17
+ /** enableEditMode为true 时输入中文会报错 */
18
+ handleCompositionEnd(cell: Compatible<BaseCell>, eventData: any): {
19
+ cell: Compatible<BaseCell>;
20
+ enableEditMode: boolean;
21
+ };
22
+ /** render 不能抽出来组件,否则点击会失效 */
23
+ render(cell: any, isInEditMode: boolean, onCellChanged: (cell: any, commit: boolean) => void): React.ReactNode;
24
+ };
@@ -0,0 +1,2 @@
1
+ export declare const childAntdComponent: any;
2
+ export declare const isTriggerBlur: string[];
@@ -0,0 +1,5 @@
1
+ export declare const getNavigatorLanguage: () => string;
2
+ export declare function parseLocaleNumber(stringNumber: string, locale?: string): number;
3
+ export declare function isReactElement(value: any): boolean;
4
+ export declare function convertColumnsToRows(columns: any, headerRowHeight?: number): any;
5
+ export declare function flattenColumns(columns: any[]): any[];
package/dist/index.cjs ADDED
@@ -0,0 +1 @@
1
+ let e=require("react"),t=require("antd"),n=require("@silevis/reactgrid"),r=require("@hzab/form-render"),i=require("@ant-design/icons"),a=require("react/jsx-runtime"),o=require("react/compiler-runtime"),s=require("@hzab/utils/src/formily/field");require("@silevis/reactgrid/styles.css");var c={"DatePicker.MonthPicker":t.DatePicker.MonthPicker,"DatePicker.QuarterPicker":t.DatePicker.QuarterPicker,"DatePicker.RangePicker":t.DatePicker.RangePicker,"DatePicker.TimePicker":t.DatePicker.TimePicker,"DatePicker.WeekPicker":t.DatePicker.WeekPicker,"DatePicker.YearPicker":t.DatePicker.YearPicker,"Input.Password":t.Input.Password,"Input.Search":t.Input.Search,"Input.TextArea":t.Input.TextArea,"TimePicker.RangePicker":t.TimePicker.RangePicker},l=[`DatePicker`,`DatePicker.MonthPicker`,`DatePicker.QuarterPicker`,`DatePicker.RangePicker`,`DatePicker.TimePicker`,`DatePicker.WeekPicker`,`DatePicker.YearPicker`,`TimePicker.RangePicker`],u=(r,o={})=>{class s{getCompatibleCell(e){let t;try{t=(0,n.getCellProperty)(e,`values`,`object`)}catch{t=[]}let r=e.selectedValue?parseFloat(e.selectedValue):NaN,i=!0;try{i=(0,n.getCellProperty)(e,`isDisabled`,`boolean`)}catch{i=!1}let a=e.selectedValue,o=a||``;return{...e,selectedValue:a,text:o,value:r,values:t,isDisabled:i}}update(e,t){let n=e.values.some(e=>e.value==t.text)?t.text:t?.text||void 0;return this.getCompatibleCell({...e,selectedValue:n})}getClassName(e,t){return``}handleCompositionEnd(e,t){return{cell:{...e},enableEditMode:!1}}render(s,c,u){let[d,f]=(0,e.useState)(!1),[p,m]=(0,e.useState)(!1),h=s?.columnId+s?.rowId,[g,_]=(0,e.useState)(s?.text),[v,y]=(0,e.useState)(!1),b=(0,e.useRef)(s?.text),x=(0,e.useRef)();(0,e.useEffect)(()=>{_(s?.text),b.current=s?.text},[s?.text]),(0,e.useEffect)(()=>{function e(e){window.gridEditId!=h&&f(!1)}return document.addEventListener(`click`,e),()=>{document.removeEventListener(`click`,e)}},[]);let S=e=>{let t=!1,n=!1;for(let n of s?.validatorList||[]){n?.pattern?.test(e)&&(t=!0);break}n=!t&&Array.isArray(s?.validatorList)&&s?.validatorList?.length>0,y(n)};(0,e.useEffect)(()=>{if(!p)return;let e=setTimeout(()=>{let e=document.querySelector(`.ant-picker-dropdown`);if(!e)return;let t=e=>{e.stopPropagation()};return e.addEventListener(`pointerdown`,t,!0),()=>{e.removeEventListener(`pointerdown`,t,!0)}},0);return()=>clearTimeout(e)},[p]);let C=()=>{let e=b.current;u(this.getCompatibleCell({...s,text:e,selectedValue:e}),!0)},w=(0,e.useMemo)(()=>l?.includes(s?.type)?{open:p,onOpenChange:e=>{x.current&&clearTimeout(x.current),x.current=setTimeout(()=>{m(e)},80)}}:{},[s]);return(0,e.useEffect)(()=>{!d&&s.type==`Upload`&&window.uploadEdit&&window.uploadEdit==h&&(window.uploadEdit=null,C())},[d,g]),(0,a.jsxs)(`div`,{className:`base-hoc ${d?`base-hoc-edit`:``}`,onDoubleClick:e=>{s?.nonEditable||(s.type===`Upload`&&(window.uploadEdit=h),f(!0))},children:[(0,a.jsx)(r,{...o,onPointerDown:e=>e.stopPropagation(),componentProps:{style:{width:`100%`,display:`flex`,alignItems:`center`},value:g,options:s.values,onChange:e=>{let t=e?.target?.value??e;_(t),b.current=t,S(t)},onBlur:e=>{C(),l?.includes(s?.type)||f(!1)},onPointerDown:e=>{e.stopPropagation()},onKeyDown:e=>{((0,n.isAlphaNumericKey)(e.keyCode)||(0,n.isNavigationKey)(e.keyCode))&&e.stopPropagation()},...w,...s?.getField&&s?.getField()[`x-component-props`]||{}},pattern:d?``:`readPretty`,cell:s}),v&&(0,a.jsx)(t.Popover,{content:s?.validatorMessage??`该字段不合法`,children:(0,a.jsx)(i.InfoCircleOutlined,{className:`validator-icon`})})]})}}return new s},d=t=>{let{pattern:n,cell:r,componentProps:i,Com:o,cellRender:c}=t,l=(0,e.useMemo)(()=>{if(r?.getField)return(0,s.getVal)({...r?.getField&&r?.getField(),enum:r?.getField()?.enum||r?.values},{[r?.getField&&r?.getField().name]:r.text})},[r]);return c&&c(t)?(0,a.jsx)(c,{...t}):(0,a.jsx)(`div`,{className:`base-hoc`,children:n==`readPretty`?(0,a.jsx)(`div`,{children:l}):(0,a.jsx)(o,{className:`rg-input`,ref:e=>{e&&e.focus()},...i})})},f=e=>{let n=(0,o.c)(5),r=e?.componentProps,i;n[0]===r?i=n[1]:(i={...r,type:`number`},n[0]=r,n[1]=i);let s;return n[2]!==e||n[3]!==i?(s=(0,a.jsx)(d,{...e,componentProps:i,Com:t.Input}),n[2]=e,n[3]=i,n[4]=s):s=n[4],s},p=t=>{let n=(0,o.c)(21),{cell:r}=t,{setExpandKeys:s,expandKeys:c,rowKey:l,setNewDataSource:u,record:d}=r,[f,p]=(0,e.useState)(!1),m;n[0]!==d||n[1]!==l||n[2]!==u?(m=e=>{u(t=>{let n=[...t],r=d?.children?.map(e=>e?.[l]);if(e){let e=t?.findIndex(e=>e?.[l]==d?.[l]);return(t?.filter(e=>r?.includes(e?.[l]))||[])?.length==0&&n.splice(e+1,0,...d?.children||[]),[...n]}return t?.filter(e=>!r?.includes(e?.[l]))})},n[0]=d,n[1]=l,n[2]=u,n[3]=m):m=n[3];let h=m,g;n[4]!==c||n[5]!==h||n[6]!==d||n[7]!==l?(g=()=>{c?.includes(d?.[l])&&(p(!0),h(!0))},n[4]=c,n[5]=h,n[6]=d,n[7]=l,n[8]=g):g=n[8];let _=r?.record,v;n[9]===_?v=n[10]:(v=[_],n[9]=_,n[10]=v),(0,e.useEffect)(g,v);let y;n[11]!==f||n[12]!==h||n[13]!==d||n[14]!==l||n[15]!==s?(y=()=>{s(e=>e?.includes(d?.[l])?e?.filter(e=>e!=d?.[l]):[...e,d?.[l]]),p(!f),h(!f)},n[11]=f,n[12]=h,n[13]=d,n[14]=l,n[15]=s,n[16]=y):y=n[16];let b=y,x;return n[17]!==f||n[18]!==b||n[19]!==d?.children?(x=(0,a.jsx)(`div`,{className:`expandList-template`,children:d?.children?(0,a.jsx)(a.Fragment,{children:f?(0,a.jsx)(i.MinusCircleOutlined,{className:`expandList-template-icon`,onClick:b}):(0,a.jsx)(i.PlusCircleOutlined,{className:`expandList-template-icon`,onClick:b})}):(0,a.jsx)(`div`,{style:{width:14}})}),n[17]=f,n[18]=b,n[19]=d?.children,n[20]=x):x=n[20],x};function m(e){return typeof e==`object`&&!!e}var h=e=>typeof e?.title==`function`?m(e?.title())?e?.title()?.props.children:String(e?.title())||``:String(e?.title)||``;function g(e,t=40){let n=e=>e.reduce((e,t)=>t.children?.length?[...e,...n(t.children)]:[...e,t],[]),r=(e,t=1)=>e.reduce((e,n)=>n.children?.length?Math.max(e,r(n.children,t+1)):Math.max(e,t),t),i=n(e),a=r(e),o=i.length,s=(e,t=0)=>e.map(e=>{if(!(e.children?.length>0))return{...e,rowspan:a-t,colspan:1,_depth:t,_isLeaf:!0};let r=n(e.children).length;return{...e,rowspan:1,colspan:r,_depth:t,_isLeaf:!1,children:s(e.children,t+1)}}),c=s(e,0),l=Array.from({length:a},(e,n)=>({rowId:`header-${n}`,height:t,cells:[]})),u=e=>[`rowSelection`,`ExpandListTemplate`].includes(e?.type)?e?.type:m(typeof e?.title==`function`?e?.title():null)?`${e?.dataIndex}`:`header`,d=(e,t=0)=>{e.forEach(e=>{if(e._isLeaf){let n={...e,type:u(e),text:h(e),dataIndex:e.dataIndex,width:e.width,rowspan:e.rowspan,style:e?.style?e?.style:{background:`rgba(128, 128, 128, 0.1)`,display:`flex`,justifyContent:`center`}};e.sorter&&(n.sorter=e.sorter),e.key&&(n.key=e.key),l[t].cells.push(n)}else l[t].cells.push({...e,type:u(e),text:h(e),colspan:e.colspan,style:e?.style?e?.style:{background:`rgba(128, 128, 128, 0.1)`,display:`flex`,justifyContent:`center`}}),e.children&&d(e.children,t+1)})};d(c,0),l.forEach((e,t)=>{let n=[],r=0,s=0;for(;r<o;){let o=e.cells[s];if(!o){let e=i[r];n.push({...e,type:u(e),text:h(e),dataIndex:e.dataIndex,width:e.width,rowspan:t===a-1?1:void 0,style:e?.style?e?.style:{background:`rgba(128, 128, 128, 0.1)`,display:`flex`,justifyContent:`center`}}),r++,s++;continue}let c=o.colspan||1;if((o.rowspan||1)>1&&t>0){r+=c,s++;continue}n.push(o),r+=c,s++;for(let e=1;e<c;e++)n.push({type:`header`,text:``})}e.cells=n});let f=l[a-1],p=[];return i.forEach((e,t)=>{let n=f.cells.find(t=>t.dataIndex===e.dataIndex&&t.text===e.title);n?p.push(n):p.push({...e,type:u(e),text:h(e),dataIndex:e.dataIndex,width:e.width,rowspan:1,style:e?.style?e?.style:{background:`rgba(128, 128, 128, 0.1)`,display:`flex`,justifyContent:`center`}})}),f.cells=p,l.forEach(e=>{for(;e.cells.length<o;)e.cells.push({type:`header`,text:``})}),l}function _(e){let t=[];function n(e){e.forEach(e=>{if(e.children&&e.children.length>0)n(e.children);else{let{title:n,dataIndex:r,key:i,width:a,sorter:o,k:s,...c}=e;t.push({type:`Input`,dataIndex:r,title:n,...i&&{key:i},...a&&{width:a},...o&&{sorter:o},...s&&{k:s},...c})}})}return n(e),t}function v(i,o){let{columns:s,dataSource:l,formulaConfig:h,onChange:v,reactGridProps:y={},onEditSubmit:b,headerRowHeight:x=44,rowHeight:S=44,reactGridStyle:C,className:w,Slots:T,rowSelection:E,rowKey:D=`id`,query:O,loading:k,isExpand:A=!1,getList:j,onRow:M}=i,[N,P]=(0,e.useState)([]),[F,I]=(0,e.useState)([]),L=(0,e.useRef)([]),[R,z]=(0,e.useState)([]),[B,V]=(0,e.useState)([]),[H,U]=(0,e.useState)([]),[W,G]=(0,e.useState)([]),[K,ee]=(0,e.useState)([]),[te,q]=(0,e.useState)([]),J=(0,e.useRef)(),ne=(0,e.useRef)(),Y=(0,e.useRef)();(0,e.useImperativeHandle)(o,()=>({rows:F}));let X=(e,t=0)=>{e?.forEach(e=>{e.level=t+1,e?.children&&X(e?.children,e.level)})};(0,e.useEffect)(()=>{X(l),U(l)},[l]),(0,e.useEffect)(()=>{F.map(e=>e.rowId)?.includes(J.current)||q([])},[F]);let re=e=>{let t=e?.cells?.[0]?.record,n=[`_$actions`,`rowSelection`],r={id:e?.rowId};return e?.cells?.forEach(e=>{e?.columnId&&!n?.includes(e?.columnId)&&(r[e?.columnId]=e?.text||e?.value||e?.selectedValue||``,e?.type==`Number`&&(r[e?.columnId]=e?.value))}),{...t,...r}};(0,e.useEffect)(()=>{if(Array.isArray(s)&&s?.length>0){A&&s.unshift({type:`ExpandListTemplate`,width:14,key:`ExpandListTemplate`,nonEditable:!0,style:E?.style||{background:`rgba(128, 128, 128, 0.1)`}}),E&&s.unshift({type:`rowSelection`,nonEditable:!0,width:E?.width||30,key:`rowSelection`,style:E?.style||{background:`rgba(128, 128, 128, 0.1)`,display:`flex`,justifyContent:`center`}}),P(g(s,x));let e=_(s);z(e?.map((e,t)=>({...e,columnId:e?.dataIndex||e?.key||e?.name||``})))}},[s,E]);let Z={},Q=e=>{e?.forEach(e=>{if(m(typeof e?.title==`function`?e?.title():null)){let t=e?.title;Z[e?.dataIndex]=u(t)}e?.children&&Q(e?.children)})};(0,e.useEffect)(()=>{Q(s),ee(Z)},[s]),(0,e.useEffect)(()=>{let e=R?.map(e=>e?.columnId),t=H?.map((t,n)=>({rowId:t[D],height:S,cells:e?.map((e,r)=>{let i={},a=R[r],o=t[e],s=a?.type??`text`;if(h){for(let n in h)if(n==e){let e=h[n];i={text:e?.setCellData&&e?.setCellData(t),value:e?.setCellData&&e?.setCellData(t),style:e?.setCellStyle&&e?.setCellStyle(e?.setCellData&&e?.setCellData(t)||t)}}}return{...a,record:t,rowId:t[D]||a?.type,type:s,nonEditable:a?.nonEditable,text:String(o||``),value:o,selectedValue:o||``,style:a?.type==`rowSelection`?{display:`flex`,justifyContent:`center`}:{},...M&&M(t,n,r)||{},...a?.onCell&&a?.onCell(t,n,r)||{},...a?.cellProps||{},setNewDataSource:U,setExpandKeys:G,rowKey:D,expandKeys:W,Slots:T,...i}})})),n=[...N,...t];I(n)},[H,R,N]),(0,e.useEffect)(()=>{k&&((F?.find(e=>e?.rowId==Y.current?.rowId))?.cells?.find(e=>e?.columnId==Y.current?.columnId),{...Y.current},L.current=F)},[k,F]);let ie=async e=>{let t=[];if(!Array.isArray(e)||e.length===0)return;let n=!1;if(e?.length>1&&(n=!0),I(r=>(e.forEach(async e=>{let i=r.findIndex(t=>t.rowId==e.rowId),a=R.findIndex(t=>t.columnId==e.columnId);if(r[i].cells[a]={...e.newCell},Y.current={...e.newCell},t.push(re(r[i])),h)for(let e in h){let t=h[e],n=R.findIndex(t=>t.columnId==e),a={...r[i].cells[n],text:t?.setCellData&&t?.setCellData(r[i]),value:t?.setCellData&&t?.setCellData(r[i]),style:t?.setCellStyle&&t?.setCellStyle(t?.setCellData&&t?.setCellData(r[i])||r[i])};r[i].cells[n]=a}if(b&&!n)try{await b(t)}catch{j&&j()}v&&v(r[i])}),[...r])),n)try{b&&await b(t)}catch{j&&j()}},ae=(0,e.useMemo)(()=>{let e={...r.antdComponents||{},...r.customComponents||{},...c},t={};for(let n in e)t[n]=u(t=>(0,a.jsx)(d,{...t,...i,Com:e[n]}));return t},[r.antdComponents,r.customComponents]),oe=e=>{let t=F?.find(t=>t?.rowId==e?.cell?.rowId);return(0,a.jsxs)(`div`,{onPointerDown:e=>e.stopPropagation(),children:[T?.tableActionsSlot&&(0,a.jsx)(T.tableActionsSlot,{...e?.cell,rowData:t}),T?.actionPrefixSlot&&(0,a.jsx)(T.actionPrefixSlot,{...e?.cell,rowData:t}),T?.actionCenterSlot&&(0,a.jsx)(T.actionCenterSlot,{...e?.cell,rowData:t}),T?.actionSuffixSlot&&(0,a.jsx)(T.actionSuffixSlot,{...e?.cell,rowData:t})]})};function $(e){let t=[];function n(e){for(let r of e)t.push(r),r.children&&r.children.length&&n(r.children)}return n(e),t}let se=e=>{let{record:n,rowId:r}=e?.cell,i=$(l);return(0,a.jsx)(t.Checkbox,{...e?.componentProps,checked:E?.selectedRowKeys?.includes(n&&n[D]||``)||E?.selectedRowKeys?.length==i?.length&&i?.length>0,indeterminate:!r&&E?.selectedRowKeys?.length>0&&E?.selectedRowKeys?.length<i?.length,onChange:e=>{if(e.target.checked&&r){let e=[...E?.selectedRowKeys,n[D]],t=i?.filter(t=>e?.includes(t[D]));E?.onChange(e,t)}else if(!e.target.checked&&r){let e=E?.selectedRowKeys?.filter(e=>e!=n[D]),t=i?.filter(t=>e?.includes(t[D]));E?.onChange(E?.selectedRowKeys?.filter(e=>e!=n[D]),t)}else if(e.target.checked&&!r){let e=i?.map(e=>e[D]),t=i?.filter(t=>e?.includes(t[D]));E?.onChange(i?.map(e=>e[D]),t)}else!e.target.checked&&!r&&E?.onChange([],[])}})};(0,e.useEffect)(()=>{if(E){let e=$(l)?.filter(e=>B?.includes(e[D]));E?.onChange(B,e)}},[B,l]),(0,e.useEffect)(()=>{V([])},[O?.pageNum]);let ce=(0,e.useMemo)(()=>{let e={};for(let t in y?.customCellTemplates){let n=y?.customCellTemplates[t];e[t]=u(n)}return e},[y?.customCellTemplates]),le=(e,t)=>{let n=t?.find(t=>t?.rowId==e?.rowId)?.cells?.map(t=>({columnId:t?.columnId,rowId:e?.rowId,className:`custom-highlights-row`,borderColor:`transparent`}));J.current=e?.rowId,q(n)};return(0,a.jsx)(t.Spin,{spinning:k,children:(0,a.jsxs)(`div`,{className:`grid-container ${w}`,style:C,children:[(0,a.jsx)(n.ReactGrid,{ref:ne,rows:k?L.current:F,columns:R,onCellsChanged:ie,enableFillHandle:!0,enableRangeSelection:!0,horizontalStickyBreakpoint:120,...y,highlights:y?.highlights??te,onFocusLocationChanging:e=>{let t=e?.columnId+e?.rowId;return window.gridEditId=t,typeof e?.rowId==`string`&&e?.rowId?.indexOf(`header-`)>-1||(y?.isRowHighlights&&e?.columnId&&le(e,F),[`_$actions`,`rowSelection`,`ExpandListTemplate`].includes(e?.columnId))?!1:y?.onFocusLocationChanging?y?.onFocusLocationChanging(e,F):e},customCellTemplates:{ExpandListTemplate:u(p),...ae,...ce,...K,_$actions:u(oe),rowSelection:u(se),Number:u(f,i)}},l?.length==0?0:1),l?.length<=0&&(0,a.jsx)(`div`,{className:`grid-container-empty`,children:(0,a.jsx)(t.Empty,{image:t.Empty.PRESENTED_IMAGE_SIMPLE})})]})})}var y=(0,e.forwardRef)(v);module.exports=y;
package/dist/index.css ADDED
@@ -0,0 +1,2 @@
1
+ .number-cell-template .rg-input{border:none}.expandList-template{align-items:center;display:flex}.expandList-template .expandList-template-icon{cursor:pointer}.expandList-template .expandList-template-name{margin-left:8px}.expandList-template .expandList-template-indent{margin-left:32px}.grid-container{max-height:100vh;padding-bottom:16px;position:relative;overflow:auto}.grid-container .ant-input-affix-wrapper-focused,.grid-container .ant-input-affix-wrapper:focus{box-shadow:none}.grid-container .rg-input{border:none}.grid-container .ant-select{width:100%!important}.grid-container .rg-header-cell,.grid-container .rg-cell{z-index:2;justify-content:center;align-items:center;display:flex}.grid-container .rg-partial-area{z-index:3}.grid-container .rg-cell{padding:0!important}.grid-container .rg-cell-focus,.grid-container .rg-fill-handle{z-index:2}.base-hoc{z-index:1;justify-content:center;align-items:center;width:100%;height:100%;padding:4px;display:flex}.base-hoc-edit{background-color:#fff}.validator-icon{cursor:pointer;background:#fff;position:relative}.rg-rowSelection-cell label{justify-content:center}.grid-container-empty{justify-content:center;align-items:center;height:100%;display:flex}.rg-pane-left,.rg-pane-right{z-index:10!important}.custom-highlights-row{background:#e9f8ff}.rg-pane-top{z-index:9!important}.shadow-top-left-corner,.shadow-top-right-corner{z-index:11!important}
2
+ /*$vite$:1*/
@@ -0,0 +1,24 @@
1
+ import "./index.less";
2
+ import "@silevis/reactgrid/styles.css";
3
+ interface CellEditTableProps {
4
+ columns: any[];
5
+ dataSource: any[];
6
+ formulaConfig?: any;
7
+ onChange?: (v: any) => void;
8
+ reactGridProps?: any;
9
+ onEditSubmit?: (v: any) => void;
10
+ headerRowHeight?: number;
11
+ rowHeight?: number;
12
+ reactGridStyle?: any;
13
+ className?: string;
14
+ Slots?: any;
15
+ rowSelection?: any;
16
+ rowKey?: string;
17
+ query?: any;
18
+ loading?: boolean;
19
+ isExpand?: boolean;
20
+ getList?: () => void;
21
+ onRow?: (v: any, ri: number, ci: number) => void;
22
+ }
23
+ declare const _default: import("react").ForwardRefExoticComponent<CellEditTableProps & import("react").RefAttributes<unknown>>;
24
+ export default _default;
package/dist/index.js ADDED
@@ -0,0 +1,626 @@
1
+ import { forwardRef as e, useEffect as t, useImperativeHandle as n, useMemo as r, useRef as i, useState as a } from "react";
2
+ import { Checkbox as o, DatePicker as s, Empty as c, Input as l, Popover as u, Spin as d, TimePicker as f } from "antd";
3
+ import { ReactGrid as p, getCellProperty as m, isAlphaNumericKey as h, isNavigationKey as g } from "@silevis/reactgrid";
4
+ import { antdComponents as _, customComponents as v } from "@hzab/form-render";
5
+ import { InfoCircleOutlined as y, MinusCircleOutlined as b, PlusCircleOutlined as x } from "@ant-design/icons";
6
+ import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
7
+ import { c as T } from "react/compiler-runtime";
8
+ import { getVal as E } from "@hzab/utils/src/formily/field";
9
+ import "@silevis/reactgrid/styles.css";
10
+ //#region src/common/childAntdComponent.ts
11
+ var D = {
12
+ "DatePicker.MonthPicker": s.MonthPicker,
13
+ "DatePicker.QuarterPicker": s.QuarterPicker,
14
+ "DatePicker.RangePicker": s.RangePicker,
15
+ "DatePicker.TimePicker": s.TimePicker,
16
+ "DatePicker.WeekPicker": s.WeekPicker,
17
+ "DatePicker.YearPicker": s.YearPicker,
18
+ "Input.Password": l.Password,
19
+ "Input.Search": l.Search,
20
+ "Input.TextArea": l.TextArea,
21
+ "TimePicker.RangePicker": f.RangePicker
22
+ }, O = [
23
+ "DatePicker",
24
+ "DatePicker.MonthPicker",
25
+ "DatePicker.QuarterPicker",
26
+ "DatePicker.RangePicker",
27
+ "DatePicker.TimePicker",
28
+ "DatePicker.WeekPicker",
29
+ "DatePicker.YearPicker",
30
+ "TimePicker.RangePicker"
31
+ ], k = (e, n = {}) => {
32
+ class o {
33
+ getCompatibleCell(e) {
34
+ let t;
35
+ try {
36
+ t = m(e, "values", "object");
37
+ } catch {
38
+ t = [];
39
+ }
40
+ let n = e.selectedValue ? parseFloat(e.selectedValue) : NaN, r = !0;
41
+ try {
42
+ r = m(e, "isDisabled", "boolean");
43
+ } catch {
44
+ r = !1;
45
+ }
46
+ let i = e.selectedValue, a = i || "";
47
+ return {
48
+ ...e,
49
+ selectedValue: i,
50
+ text: a,
51
+ value: n,
52
+ values: t,
53
+ isDisabled: r
54
+ };
55
+ }
56
+ update(e, t) {
57
+ let n = e.values.some((e) => e.value == t.text) ? t.text : t?.text || void 0;
58
+ return this.getCompatibleCell({
59
+ ...e,
60
+ selectedValue: n
61
+ });
62
+ }
63
+ getClassName(e, t) {
64
+ return "";
65
+ }
66
+ handleCompositionEnd(e, t) {
67
+ return {
68
+ cell: { ...e },
69
+ enableEditMode: !1
70
+ };
71
+ }
72
+ render(o, s, c) {
73
+ let [l, d] = a(!1), [f, p] = a(!1), m = o?.columnId + o?.rowId, [_, v] = a(o?.text), [b, x] = a(!1), S = i(o?.text), T = i();
74
+ t(() => {
75
+ v(o?.text), S.current = o?.text;
76
+ }, [o?.text]), t(() => {
77
+ function e(e) {
78
+ window.gridEditId != m && d(!1);
79
+ }
80
+ return document.addEventListener("click", e), () => {
81
+ document.removeEventListener("click", e);
82
+ };
83
+ }, []);
84
+ let E = (e) => {
85
+ let t = !1, n = !1;
86
+ for (let n of o?.validatorList || []) {
87
+ n?.pattern?.test(e) && (t = !0);
88
+ break;
89
+ }
90
+ n = !t && Array.isArray(o?.validatorList) && o?.validatorList?.length > 0, x(n);
91
+ };
92
+ t(() => {
93
+ if (!f) return;
94
+ let e = setTimeout(() => {
95
+ let e = document.querySelector(".ant-picker-dropdown");
96
+ if (!e) return;
97
+ let t = (e) => {
98
+ e.stopPropagation();
99
+ };
100
+ return e.addEventListener("pointerdown", t, !0), () => {
101
+ e.removeEventListener("pointerdown", t, !0);
102
+ };
103
+ }, 0);
104
+ return () => clearTimeout(e);
105
+ }, [f]);
106
+ let D = () => {
107
+ let e = S.current;
108
+ c(this.getCompatibleCell({
109
+ ...o,
110
+ text: e,
111
+ selectedValue: e
112
+ }), !0);
113
+ }, k = r(() => O?.includes(o?.type) ? {
114
+ open: f,
115
+ onOpenChange: (e) => {
116
+ T.current && clearTimeout(T.current), T.current = setTimeout(() => {
117
+ p(e);
118
+ }, 80);
119
+ }
120
+ } : {}, [o]);
121
+ return t(() => {
122
+ !l && o.type == "Upload" && window.uploadEdit && window.uploadEdit == m && (window.uploadEdit = null, D());
123
+ }, [l, _]), /* @__PURE__ */ w("div", {
124
+ className: `base-hoc ${l ? "base-hoc-edit" : ""}`,
125
+ onDoubleClick: (e) => {
126
+ o?.nonEditable || (o.type === "Upload" && (window.uploadEdit = m), d(!0));
127
+ },
128
+ children: [/* @__PURE__ */ C(e, {
129
+ ...n,
130
+ onPointerDown: (e) => e.stopPropagation(),
131
+ componentProps: {
132
+ style: {
133
+ width: "100%",
134
+ display: "flex",
135
+ alignItems: "center"
136
+ },
137
+ value: _,
138
+ options: o.values,
139
+ onChange: (e) => {
140
+ let t = e?.target?.value ?? e;
141
+ v(t), S.current = t, E(t);
142
+ },
143
+ onBlur: (e) => {
144
+ D(), O?.includes(o?.type) || d(!1);
145
+ },
146
+ onPointerDown: (e) => {
147
+ e.stopPropagation();
148
+ },
149
+ onKeyDown: (e) => {
150
+ (h(e.keyCode) || g(e.keyCode)) && e.stopPropagation();
151
+ },
152
+ ...k,
153
+ ...o?.getField && o?.getField()["x-component-props"] || {}
154
+ },
155
+ pattern: l ? "" : "readPretty",
156
+ cell: o
157
+ }), b && /* @__PURE__ */ C(u, {
158
+ content: o?.validatorMessage ?? "该字段不合法",
159
+ children: /* @__PURE__ */ C(y, { className: "validator-icon" })
160
+ })]
161
+ });
162
+ }
163
+ }
164
+ return new o();
165
+ }, A = (e) => {
166
+ let { pattern: t, cell: n, componentProps: i, Com: a, cellRender: o } = e, s = r(() => {
167
+ if (n?.getField) return E({
168
+ ...n?.getField && n?.getField(),
169
+ enum: n?.getField()?.enum || n?.values
170
+ }, { [n?.getField && n?.getField().name]: n.text });
171
+ }, [n]);
172
+ return o && o(e) ? /* @__PURE__ */ C(o, { ...e }) : /* @__PURE__ */ C("div", {
173
+ className: "base-hoc",
174
+ children: t == "readPretty" ? /* @__PURE__ */ C("div", { children: s }) : /* @__PURE__ */ C(a, {
175
+ className: "rg-input",
176
+ ref: (e) => {
177
+ e && e.focus();
178
+ },
179
+ ...i
180
+ })
181
+ });
182
+ }, j = (e) => {
183
+ let t = T(5), n = e?.componentProps, r;
184
+ t[0] === n ? r = t[1] : (r = {
185
+ ...n,
186
+ type: "number"
187
+ }, t[0] = n, t[1] = r);
188
+ let i;
189
+ return t[2] !== e || t[3] !== r ? (i = /* @__PURE__ */ C(A, {
190
+ ...e,
191
+ componentProps: r,
192
+ Com: l
193
+ }), t[2] = e, t[3] = r, t[4] = i) : i = t[4], i;
194
+ }, ee = (e) => {
195
+ let n = T(21), { cell: r } = e, { setExpandKeys: i, expandKeys: o, rowKey: s, setNewDataSource: c, record: l } = r, [u, d] = a(!1), f;
196
+ n[0] !== l || n[1] !== s || n[2] !== c ? (f = (e) => {
197
+ c((t) => {
198
+ let n = [...t], r = l?.children?.map((e) => e?.[s]);
199
+ if (e) {
200
+ let e = t?.findIndex((e) => e?.[s] == l?.[s]);
201
+ return (t?.filter((e) => r?.includes(e?.[s])) || [])?.length == 0 && n.splice(e + 1, 0, ...l?.children || []), [...n];
202
+ }
203
+ return t?.filter((e) => !r?.includes(e?.[s]));
204
+ });
205
+ }, n[0] = l, n[1] = s, n[2] = c, n[3] = f) : f = n[3];
206
+ let p = f, m;
207
+ n[4] !== o || n[5] !== p || n[6] !== l || n[7] !== s ? (m = () => {
208
+ o?.includes(l?.[s]) && (d(!0), p(!0));
209
+ }, n[4] = o, n[5] = p, n[6] = l, n[7] = s, n[8] = m) : m = n[8];
210
+ let h = r?.record, g;
211
+ n[9] === h ? g = n[10] : (g = [h], n[9] = h, n[10] = g), t(m, g);
212
+ let _;
213
+ n[11] !== u || n[12] !== p || n[13] !== l || n[14] !== s || n[15] !== i ? (_ = () => {
214
+ i((e) => e?.includes(l?.[s]) ? e?.filter((e) => e != l?.[s]) : [...e, l?.[s]]), d(!u), p(!u);
215
+ }, n[11] = u, n[12] = p, n[13] = l, n[14] = s, n[15] = i, n[16] = _) : _ = n[16];
216
+ let v = _, y;
217
+ return n[17] !== u || n[18] !== v || n[19] !== l?.children ? (y = /* @__PURE__ */ C("div", {
218
+ className: "expandList-template",
219
+ children: l?.children ? /* @__PURE__ */ C(S, { children: C(u ? b : x, {
220
+ className: "expandList-template-icon",
221
+ onClick: v
222
+ }) }) : /* @__PURE__ */ C("div", { style: { width: 14 } })
223
+ }), n[17] = u, n[18] = v, n[19] = l?.children, n[20] = y) : y = n[20], y;
224
+ };
225
+ //#endregion
226
+ //#region src/common/utils.ts
227
+ function M(e) {
228
+ return typeof e == "object" && !!e;
229
+ }
230
+ var N = (e) => typeof e?.title == "function" ? M(e?.title()) ? e?.title()?.props.children : String(e?.title()) || "" : String(e?.title) || "";
231
+ function te(e, t = 40) {
232
+ let n = (e) => e.reduce((e, t) => t.children?.length ? [...e, ...n(t.children)] : [...e, t], []), r = (e, t = 1) => e.reduce((e, n) => n.children?.length ? Math.max(e, r(n.children, t + 1)) : Math.max(e, t), t), i = n(e), a = r(e), o = i.length, s = (e, t = 0) => e.map((e) => {
233
+ if (!(e.children?.length > 0)) return {
234
+ ...e,
235
+ rowspan: a - t,
236
+ colspan: 1,
237
+ _depth: t,
238
+ _isLeaf: !0
239
+ };
240
+ let r = n(e.children).length;
241
+ return {
242
+ ...e,
243
+ rowspan: 1,
244
+ colspan: r,
245
+ _depth: t,
246
+ _isLeaf: !1,
247
+ children: s(e.children, t + 1)
248
+ };
249
+ }), c = s(e, 0), l = Array.from({ length: a }, (e, n) => ({
250
+ rowId: `header-${n}`,
251
+ height: t,
252
+ cells: []
253
+ })), u = (e) => ["rowSelection", "ExpandListTemplate"].includes(e?.type) ? e?.type : M(typeof e?.title == "function" ? e?.title() : null) ? `${e?.dataIndex}` : "header", d = (e, t = 0) => {
254
+ e.forEach((e) => {
255
+ if (e._isLeaf) {
256
+ let n = {
257
+ ...e,
258
+ type: u(e),
259
+ text: N(e),
260
+ dataIndex: e.dataIndex,
261
+ width: e.width,
262
+ rowspan: e.rowspan,
263
+ style: e?.style ? e?.style : {
264
+ background: "rgba(128, 128, 128, 0.1)",
265
+ display: "flex",
266
+ justifyContent: "center"
267
+ }
268
+ };
269
+ e.sorter && (n.sorter = e.sorter), e.key && (n.key = e.key), l[t].cells.push(n);
270
+ } else l[t].cells.push({
271
+ ...e,
272
+ type: u(e),
273
+ text: N(e),
274
+ colspan: e.colspan,
275
+ style: e?.style ? e?.style : {
276
+ background: "rgba(128, 128, 128, 0.1)",
277
+ display: "flex",
278
+ justifyContent: "center"
279
+ }
280
+ }), e.children && d(e.children, t + 1);
281
+ });
282
+ };
283
+ d(c, 0), l.forEach((e, t) => {
284
+ let n = [], r = 0, s = 0;
285
+ for (; r < o;) {
286
+ let o = e.cells[s];
287
+ if (!o) {
288
+ let e = i[r];
289
+ n.push({
290
+ ...e,
291
+ type: u(e),
292
+ text: N(e),
293
+ dataIndex: e.dataIndex,
294
+ width: e.width,
295
+ rowspan: t === a - 1 ? 1 : void 0,
296
+ style: e?.style ? e?.style : {
297
+ background: "rgba(128, 128, 128, 0.1)",
298
+ display: "flex",
299
+ justifyContent: "center"
300
+ }
301
+ }), r++, s++;
302
+ continue;
303
+ }
304
+ let c = o.colspan || 1;
305
+ if ((o.rowspan || 1) > 1 && t > 0) {
306
+ r += c, s++;
307
+ continue;
308
+ }
309
+ n.push(o), r += c, s++;
310
+ for (let e = 1; e < c; e++) n.push({
311
+ type: "header",
312
+ text: ""
313
+ });
314
+ }
315
+ e.cells = n;
316
+ });
317
+ let f = l[a - 1], p = [];
318
+ return i.forEach((e, t) => {
319
+ let n = f.cells.find((t) => t.dataIndex === e.dataIndex && t.text === e.title);
320
+ n ? p.push(n) : p.push({
321
+ ...e,
322
+ type: u(e),
323
+ text: N(e),
324
+ dataIndex: e.dataIndex,
325
+ width: e.width,
326
+ rowspan: 1,
327
+ style: e?.style ? e?.style : {
328
+ background: "rgba(128, 128, 128, 0.1)",
329
+ display: "flex",
330
+ justifyContent: "center"
331
+ }
332
+ });
333
+ }), f.cells = p, l.forEach((e) => {
334
+ for (; e.cells.length < o;) e.cells.push({
335
+ type: "header",
336
+ text: ""
337
+ });
338
+ }), l;
339
+ }
340
+ function ne(e) {
341
+ let t = [];
342
+ function n(e) {
343
+ e.forEach((e) => {
344
+ if (e.children && e.children.length > 0) n(e.children);
345
+ else {
346
+ let { title: n, dataIndex: r, key: i, width: a, sorter: o, k: s, ...c } = e;
347
+ t.push({
348
+ type: "Input",
349
+ dataIndex: r,
350
+ title: n,
351
+ ...i && { key: i },
352
+ ...a && { width: a },
353
+ ...o && { sorter: o },
354
+ ...s && { k: s },
355
+ ...c
356
+ });
357
+ }
358
+ });
359
+ }
360
+ return n(e), t;
361
+ }
362
+ //#endregion
363
+ //#region src/index.tsx
364
+ function P(e, s) {
365
+ let { columns: l, dataSource: u, formulaConfig: f, onChange: m, reactGridProps: h = {}, onEditSubmit: g, headerRowHeight: y = 44, rowHeight: b = 44, reactGridStyle: x, className: S, Slots: T, rowSelection: E, rowKey: O = "id", query: N, loading: P, isExpand: F = !1, getList: I, onRow: L } = e, [R, re] = a([]), [z, B] = a([]), V = i([]), [H, ie] = a([]), [U, ae] = a([]), [W, G] = a([]), [oe, se] = a([]), [ce, le] = a([]), [ue, K] = a([]), q = i(), de = i(), J = i();
366
+ n(s, () => ({ rows: z }));
367
+ let Y = (e, t = 0) => {
368
+ e?.forEach((e) => {
369
+ e.level = t + 1, e?.children && Y(e?.children, e.level);
370
+ });
371
+ };
372
+ t(() => {
373
+ Y(u), G(u);
374
+ }, [u]), t(() => {
375
+ z.map((e) => e.rowId)?.includes(q.current) || K([]);
376
+ }, [z]);
377
+ let fe = (e) => {
378
+ let t = e?.cells?.[0]?.record, n = ["_$actions", "rowSelection"], r = { id: e?.rowId };
379
+ return e?.cells?.forEach((e) => {
380
+ e?.columnId && !n?.includes(e?.columnId) && (r[e?.columnId] = e?.text || e?.value || e?.selectedValue || "", e?.type == "Number" && (r[e?.columnId] = e?.value));
381
+ }), {
382
+ ...t,
383
+ ...r
384
+ };
385
+ };
386
+ t(() => {
387
+ if (Array.isArray(l) && l?.length > 0) {
388
+ F && l.unshift({
389
+ type: "ExpandListTemplate",
390
+ width: 14,
391
+ key: "ExpandListTemplate",
392
+ nonEditable: !0,
393
+ style: E?.style || { background: "rgba(128, 128, 128, 0.1)" }
394
+ }), E && l.unshift({
395
+ type: "rowSelection",
396
+ nonEditable: !0,
397
+ width: E?.width || 30,
398
+ key: "rowSelection",
399
+ style: E?.style || {
400
+ background: "rgba(128, 128, 128, 0.1)",
401
+ display: "flex",
402
+ justifyContent: "center"
403
+ }
404
+ }), re(te(l, y));
405
+ let e = ne(l);
406
+ ie(e?.map((e, t) => ({
407
+ ...e,
408
+ columnId: e?.dataIndex || e?.key || e?.name || ""
409
+ })));
410
+ }
411
+ }, [l, E]);
412
+ let X = {}, Z = (e) => {
413
+ e?.forEach((e) => {
414
+ if (M(typeof e?.title == "function" ? e?.title() : null)) {
415
+ let t = e?.title;
416
+ X[e?.dataIndex] = k(t);
417
+ }
418
+ e?.children && Z(e?.children);
419
+ });
420
+ };
421
+ t(() => {
422
+ Z(l), le(X);
423
+ }, [l]), t(() => {
424
+ let e = H?.map((e) => e?.columnId), t = W?.map((t, n) => ({
425
+ rowId: t[O],
426
+ height: b,
427
+ cells: e?.map((e, r) => {
428
+ let i = {}, a = H[r], o = t[e], s = a?.type ?? "text";
429
+ if (f) {
430
+ for (let n in f) if (n == e) {
431
+ let e = f[n];
432
+ i = {
433
+ text: e?.setCellData && e?.setCellData(t),
434
+ value: e?.setCellData && e?.setCellData(t),
435
+ style: e?.setCellStyle && e?.setCellStyle(e?.setCellData && e?.setCellData(t) || t)
436
+ };
437
+ }
438
+ }
439
+ return {
440
+ ...a,
441
+ record: t,
442
+ rowId: t[O] || a?.type,
443
+ type: s,
444
+ nonEditable: a?.nonEditable,
445
+ text: String(o || ""),
446
+ value: o,
447
+ selectedValue: o || "",
448
+ style: a?.type == "rowSelection" ? {
449
+ display: "flex",
450
+ justifyContent: "center"
451
+ } : {},
452
+ ...L && L(t, n, r) || {},
453
+ ...a?.onCell && a?.onCell(t, n, r) || {},
454
+ ...a?.cellProps || {},
455
+ setNewDataSource: G,
456
+ setExpandKeys: se,
457
+ rowKey: O,
458
+ expandKeys: oe,
459
+ Slots: T,
460
+ ...i
461
+ };
462
+ })
463
+ })), n = [...R, ...t];
464
+ B(n);
465
+ }, [
466
+ W,
467
+ H,
468
+ R
469
+ ]), t(() => {
470
+ P && ((z?.find((e) => e?.rowId == J.current?.rowId))?.cells?.find((e) => e?.columnId == J.current?.columnId), { ...J.current }, V.current = z);
471
+ }, [P, z]);
472
+ let pe = async (e) => {
473
+ let t = [];
474
+ if (!Array.isArray(e) || e.length === 0) return;
475
+ let n = !1;
476
+ if (e?.length > 1 && (n = !0), B((r) => (e.forEach(async (e) => {
477
+ let i = r.findIndex((t) => t.rowId == e.rowId), a = H.findIndex((t) => t.columnId == e.columnId);
478
+ if (r[i].cells[a] = { ...e.newCell }, J.current = { ...e.newCell }, t.push(fe(r[i])), f) for (let e in f) {
479
+ let t = f[e], n = H.findIndex((t) => t.columnId == e), a = {
480
+ ...r[i].cells[n],
481
+ text: t?.setCellData && t?.setCellData(r[i]),
482
+ value: t?.setCellData && t?.setCellData(r[i]),
483
+ style: t?.setCellStyle && t?.setCellStyle(t?.setCellData && t?.setCellData(r[i]) || r[i])
484
+ };
485
+ r[i].cells[n] = a;
486
+ }
487
+ if (g && !n) try {
488
+ await g(t);
489
+ } catch {
490
+ I && I();
491
+ }
492
+ m && m(r[i]);
493
+ }), [...r])), n) try {
494
+ g && await g(t);
495
+ } catch {
496
+ I && I();
497
+ }
498
+ }, me = r(() => {
499
+ let t = {
500
+ ..._ || {},
501
+ ...v || {},
502
+ ...D
503
+ }, n = {};
504
+ for (let r in t) n[r] = k((n) => /* @__PURE__ */ C(A, {
505
+ ...n,
506
+ ...e,
507
+ Com: t[r]
508
+ }));
509
+ return n;
510
+ }, [_, v]), Q = (e) => {
511
+ let t = z?.find((t) => t?.rowId == e?.cell?.rowId);
512
+ return /* @__PURE__ */ w("div", {
513
+ onPointerDown: (e) => e.stopPropagation(),
514
+ children: [
515
+ T?.tableActionsSlot && /* @__PURE__ */ C(T.tableActionsSlot, {
516
+ ...e?.cell,
517
+ rowData: t
518
+ }),
519
+ T?.actionPrefixSlot && /* @__PURE__ */ C(T.actionPrefixSlot, {
520
+ ...e?.cell,
521
+ rowData: t
522
+ }),
523
+ T?.actionCenterSlot && /* @__PURE__ */ C(T.actionCenterSlot, {
524
+ ...e?.cell,
525
+ rowData: t
526
+ }),
527
+ T?.actionSuffixSlot && /* @__PURE__ */ C(T.actionSuffixSlot, {
528
+ ...e?.cell,
529
+ rowData: t
530
+ })
531
+ ]
532
+ });
533
+ };
534
+ function $(e) {
535
+ let t = [];
536
+ function n(e) {
537
+ for (let r of e) t.push(r), r.children && r.children.length && n(r.children);
538
+ }
539
+ return n(e), t;
540
+ }
541
+ let he = (e) => {
542
+ let { record: t, rowId: n } = e?.cell, r = $(u);
543
+ return /* @__PURE__ */ C(o, {
544
+ ...e?.componentProps,
545
+ checked: E?.selectedRowKeys?.includes(t && t[O] || "") || E?.selectedRowKeys?.length == r?.length && r?.length > 0,
546
+ indeterminate: !n && E?.selectedRowKeys?.length > 0 && E?.selectedRowKeys?.length < r?.length,
547
+ onChange: (e) => {
548
+ if (e.target.checked && n) {
549
+ let e = [...E?.selectedRowKeys, t[O]], n = r?.filter((t) => e?.includes(t[O]));
550
+ E?.onChange(e, n);
551
+ } else if (!e.target.checked && n) {
552
+ let e = E?.selectedRowKeys?.filter((e) => e != t[O]), n = r?.filter((t) => e?.includes(t[O]));
553
+ E?.onChange(E?.selectedRowKeys?.filter((e) => e != t[O]), n);
554
+ } else if (e.target.checked && !n) {
555
+ let e = r?.map((e) => e[O]), t = r?.filter((t) => e?.includes(t[O]));
556
+ E?.onChange(r?.map((e) => e[O]), t);
557
+ } else !e.target.checked && !n && E?.onChange([], []);
558
+ }
559
+ });
560
+ };
561
+ t(() => {
562
+ if (E) {
563
+ let e = $(u)?.filter((e) => U?.includes(e[O]));
564
+ E?.onChange(U, e);
565
+ }
566
+ }, [U, u]), t(() => {
567
+ ae([]);
568
+ }, [N?.pageNum]);
569
+ let ge = r(() => {
570
+ let e = {};
571
+ for (let t in h?.customCellTemplates) {
572
+ let n = h?.customCellTemplates[t];
573
+ e[t] = k(n);
574
+ }
575
+ return e;
576
+ }, [h?.customCellTemplates]), _e = (e, t) => {
577
+ let n = t?.find((t) => t?.rowId == e?.rowId)?.cells?.map((t) => ({
578
+ columnId: t?.columnId,
579
+ rowId: e?.rowId,
580
+ className: "custom-highlights-row",
581
+ borderColor: "transparent"
582
+ }));
583
+ q.current = e?.rowId, K(n);
584
+ };
585
+ return /* @__PURE__ */ C(d, {
586
+ spinning: P,
587
+ children: /* @__PURE__ */ w("div", {
588
+ className: `grid-container ${S}`,
589
+ style: x,
590
+ children: [/* @__PURE__ */ C(p, {
591
+ ref: de,
592
+ rows: P ? V.current : z,
593
+ columns: H,
594
+ onCellsChanged: pe,
595
+ enableFillHandle: !0,
596
+ enableRangeSelection: !0,
597
+ horizontalStickyBreakpoint: 120,
598
+ ...h,
599
+ highlights: h?.highlights ?? ue,
600
+ onFocusLocationChanging: (e) => {
601
+ let t = e?.columnId + e?.rowId;
602
+ return window.gridEditId = t, typeof e?.rowId == "string" && e?.rowId?.indexOf("header-") > -1 || (h?.isRowHighlights && e?.columnId && _e(e, z), [
603
+ "_$actions",
604
+ "rowSelection",
605
+ "ExpandListTemplate"
606
+ ].includes(e?.columnId)) ? !1 : h?.onFocusLocationChanging ? h?.onFocusLocationChanging(e, z) : e;
607
+ },
608
+ customCellTemplates: {
609
+ ExpandListTemplate: k(ee),
610
+ ...me,
611
+ ...ge,
612
+ ...ce,
613
+ _$actions: k(Q),
614
+ rowSelection: k(he),
615
+ Number: k(j, e)
616
+ }
617
+ }, u?.length == 0 ? 0 : 1), u?.length <= 0 && /* @__PURE__ */ C("div", {
618
+ className: "grid-container-empty",
619
+ children: /* @__PURE__ */ C(c, { image: c.PRESENTED_IMAGE_SIMPLE })
620
+ })]
621
+ })
622
+ });
623
+ }
624
+ var F = e(P);
625
+ //#endregion
626
+ export { F as default };
package/package.json CHANGED
@@ -1,60 +1,60 @@
1
1
  {
2
2
  "name": "@hzab/edit-table",
3
- "version": "0.1.3",
4
- "description": "",
5
- "main": "src",
6
- "scripts": {
7
- "dev": "webpack serve -c ./config/webpack.config.js --env local",
8
- "build": "webpack -c ./config/webpack.config.js --env production",
9
- "version:alpha": "npm version prerelease --preid=alpha",
10
- "publish:alpha": "npm publish --tag alpha",
11
- "version:beta": "npm version prerelease --preid=beta",
12
- "publish:beta": "npm publish --tag beta",
13
- "version:patch": "npm version patch",
14
- "version:minior": "npm version minor",
15
- "version:major": "npm version major",
16
- "publish:stable": "npm publish --access public",
17
- "prepare": "husky install",
18
- "mac-chmod": "chmod +x .husky && chmod +x .husky/pre-commit",
19
- "docs": "typedoc"
3
+ "version": "0.1.5",
4
+ "private": false,
5
+ "src-direct": true,
6
+ "type": "module",
7
+ "description": "可编辑表格",
8
+ "license": "ISC",
9
+ "author": "CaiYansong",
10
+ "engines": {
11
+ "node": ">=24"
20
12
  },
13
+ "main": "src",
14
+ "types": "./dist/index.d.ts",
21
15
  "files": [
22
16
  "src",
17
+ "dist",
23
18
  "CHANGELOG.md"
24
19
  ],
25
- "keywords": [],
26
- "author": "CaiYansong",
27
- "license": "ISC",
28
- "devDependencies": {
29
- "@hzab/permissions": "1.0.0",
30
- "@hzab/webpack-config": "1.1.4",
31
- "@types/react": "17.0.62",
32
- "@types/react-dom": "17.0.20",
33
- "antd": "4.24.16",
34
- "axios": "1.13.6",
35
- "eslint": "8.30.0",
36
- "less": "4.1.3",
37
- "mobx": "6.7.0",
38
- "mobx-react": "7.6.0",
39
- "react": "17.0.2",
40
- "react-dom": "17.0.2",
41
- "react-router-dom": "6.14.1",
42
- "typedoc": "0.24.8",
43
- "typescript": "4.9.4",
44
- "webpack": "5.75.0"
45
- },
20
+ "sideEffects": [
21
+ "**/*.less"
22
+ ],
46
23
  "peerDependencies": {
24
+ "@ant-design/icons": ">=4.0.0",
47
25
  "@silevis/reactgrid": "^4.1.17",
48
- "@hzab/form-render": "^1.7.17",
49
- "@hzab/list-render": "^1.11.0"
26
+ "antd": ">=4.0.0",
27
+ "react": ">=16.8.0",
28
+ "react-dom": ">=16.8.0"
50
29
  },
51
- "directories": {
52
- "src": "src"
30
+ "dependencies": {
31
+ "@hzab/form-render": ">=1.7.17",
32
+ "@hzab/utils": ">=1.1.6"
53
33
  },
54
- "lint-staged": {
55
- "**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
56
- "prettier --write"
57
- ]
34
+ "devDependencies": {
35
+ "@ant-design/icons": "^4.8.0",
36
+ "@types/lodash": "^4.17.12",
37
+ "@types/react": "^17.0.62",
38
+ "@types/react-dom": "^17.0.20",
39
+ "@vitest/coverage-v8": "4.1.10",
40
+ "antd": "^4.24.16",
41
+ "dayjs": "^1.11.7",
42
+ "happy-dom": "^20.11.1",
43
+ "less": "^4.1.3",
44
+ "lodash": "^4.17.21",
45
+ "react": "^17.0.2",
46
+ "react-dom": "^17.0.2",
47
+ "typescript": "^5.9.3",
48
+ "vite": "^8.0.0",
49
+ "vitest": "^4.1.10",
50
+ "@hzab/vite-config": "^0.0.3-alpha.0",
51
+ "@hzab/eslint-config": "^0.0.0",
52
+ "@hzab/typescript-config": "^0.0.0"
58
53
  },
59
- "dependencies": {}
60
- }
54
+ "scripts": {
55
+ "build": "vite build && tsc -p tsconfig.build.json",
56
+ "typecheck": "tsc -p tsconfig.json",
57
+ "test": "vitest run --passWithNoTests",
58
+ "test:watch": "vitest"
59
+ }
60
+ }
@@ -1,5 +1,5 @@
1
1
  import { useMemo } from "react";
2
- import { getVal } from "@hzab/list-render/src/common/utils";
2
+ import { getVal } from "@hzab/utils/src/formily/field";
3
3
  export const GetBaseTemplate = (props) => {
4
4
  const { pattern, cell, componentProps, Com, cellRender } = props;
5
5
 
@@ -1,16 +1,17 @@
1
1
  import { useEffect, useMemo, useRef, useState } from "react";
2
2
 
3
- import {
3
+ import type {
4
4
  Cell,
5
5
  CellTemplate,
6
6
  Compatible,
7
+ Uncertain,
8
+ UncertainCompatible} from "@silevis/reactgrid";
9
+ import {
7
10
  getCellProperty,
8
11
  getCharFromKey,
9
12
  isAlphaNumericKey,
10
13
  isNavigationKey,
11
- keyCodes,
12
- Uncertain,
13
- UncertainCompatible,
14
+ keyCodes
14
15
  } from "@silevis/reactgrid";
15
16
  import { InfoCircleOutlined } from "@ant-design/icons";
16
17
  import { Popover } from "antd";
@@ -111,7 +112,7 @@ export const WidthWrapHoc = (WrapComponent: any, props = {}) => {
111
112
  const onValidator = (val) => {
112
113
  let flag = false;
113
114
  let isVerify = false;
114
- for (let it of cell?.validatorList || []) {
115
+ for (const it of cell?.validatorList || []) {
115
116
  if (it?.pattern?.test(val)) {
116
117
  flag = true;
117
118
  }
@@ -146,7 +147,7 @@ export const WidthWrapHoc = (WrapComponent: any, props = {}) => {
146
147
 
147
148
  /** 失焦提交 */
148
149
  const onBlurSubmit = () => {
149
- let targetValue = comValueInit.current;
150
+ const targetValue = comValueInit.current;
150
151
  onCellChanged(
151
152
  this.getCompatibleCell({
152
153
  ...cell,
@@ -203,7 +204,7 @@ export const WidthWrapHoc = (WrapComponent: any, props = {}) => {
203
204
  value: comValue,
204
205
  options: cell.values,
205
206
  onChange: (e) => {
206
- let targetValue = e?.target?.value ?? e;
207
+ const targetValue = e?.target?.value ?? e;
207
208
  setComValue(targetValue);
208
209
  comValueInit.current = targetValue;
209
210
  onValidator(targetValue);
@@ -1,6 +1,6 @@
1
1
  import { DatePicker, Input, TimePicker } from "antd";
2
2
 
3
- export const childAntdComponent = {
3
+ export const childAntdComponent: any = {
4
4
  "DatePicker.MonthPicker": DatePicker.MonthPicker,
5
5
  "DatePicker.QuarterPicker": DatePicker.QuarterPicker,
6
6
  "DatePicker.RangePicker": DatePicker.RangePicker,
@@ -213,7 +213,7 @@ export function convertColumnsToRows(columns, headerRowHeight = 40) {
213
213
  // 最后一行的特殊处理:确保所有叶子节点都有对应的cell
214
214
  const lastRow = rows[totalDepth - 1];
215
215
  const lastRowCells = [];
216
- let leafIndex = 0;
216
+ const leafIndex = 0;
217
217
 
218
218
  // 遍历所有叶子节点
219
219
  leafColumns.forEach((leaf, index) => {
package/src/index.tsx CHANGED
@@ -2,7 +2,7 @@ import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState }
2
2
  import { Checkbox, Empty, Spin } from "antd";
3
3
  import { ReactGrid } from "@silevis/reactgrid";
4
4
  import TextTemplate from "./Template/TextCellTemplate";
5
- import { antdComponents, customComponents } from "@hzab/form-render/src/index";
5
+ import { antdComponents, customComponents } from "@hzab/form-render";
6
6
  import { WidthWrapHoc } from "./common/WidthWrapHoc";
7
7
  import NumberTemplate from "./Template/NumberCellTemplate";
8
8
  import { ExpandListTemplate } from "./Template/ExpandListTemplate";
@@ -102,7 +102,7 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
102
102
  const handleArrayToObj = (item) => {
103
103
  const record = item?.cells?.[0]?.record;
104
104
  const fieldList = ["_$actions", "rowSelection"];
105
- let obj: any = {
105
+ const obj: any = {
106
106
  id: item?.rowId,
107
107
  };
108
108
  item?.cells?.forEach((el) => {
@@ -189,10 +189,10 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
189
189
  let newCell = {};
190
190
  const columnsItem = tableColumns[ind];
191
191
  const cellItem = item[el];
192
- let type: any = columnsItem?.type ?? "text";
192
+ const type: any = columnsItem?.type ?? "text";
193
193
  //设置单元格颜色及回显
194
194
  if (formulaConfig) {
195
- for (let key in formulaConfig) {
195
+ for (const key in formulaConfig) {
196
196
  if (key == el) {
197
197
  const it = formulaConfig[key];
198
198
  newCell = {
@@ -214,7 +214,7 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
214
214
  value: cellItem,
215
215
  selectedValue: cellItem || "",
216
216
  style: columnsItem?.type == "rowSelection" ? { display: "flex", justifyContent: "center" } : {},
217
- ...((onRow && onRow(item, index, ind)) || {}),
217
+ ...(((onRow && onRow(item, index, ind)) as any) || {}),
218
218
  ...((columnsItem?.onCell && columnsItem?.onCell(item, index, ind)) || {}),
219
219
  ...(columnsItem?.cellProps || {}),
220
220
  setNewDataSource,
@@ -256,7 +256,7 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
256
256
  currentCell.current = { ...change.newCell };
257
257
  batchQuery.push(handleArrayToObj(prevRows[changeRowIdx]));
258
258
  if (formulaConfig) {
259
- for (let key in formulaConfig) {
259
+ for (const key in formulaConfig) {
260
260
  const item = formulaConfig[key];
261
261
  const resultColumnIdx = tableColumns.findIndex((el) => el.columnId == key);
262
262
  const newCell = {
@@ -297,7 +297,7 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
297
297
  const baseTemplate = useMemo(() => {
298
298
  const mergeTemplate: any = { ...(antdComponents || {}), ...(customComponents || {}), ...childAntdComponent };
299
299
  const newMergeTemplate: any = {};
300
- for (let key in mergeTemplate) {
300
+ for (const key in mergeTemplate) {
301
301
  const NewCom = (newComProps) => {
302
302
  return <GetBaseTemplate {...newComProps} {...props} Com={mergeTemplate[key]} />;
303
303
  };
@@ -387,7 +387,7 @@ function CellEditTable(props: CellEditTableProps, ref: any) {
387
387
 
388
388
  const customCellTemplates = useMemo(() => {
389
389
  const templatesObj: any = {};
390
- for (let key in reactGridProps?.customCellTemplates) {
390
+ for (const key in reactGridProps?.customCellTemplates) {
391
391
  const item = reactGridProps?.customCellTemplates[key];
392
392
  templatesObj[key] = WidthWrapHoc(item);
393
393
  }
@@ -0,0 +1 @@
1
+ /// <reference types="vite/client" />
package/README.md DELETED
@@ -1,90 +0,0 @@
1
- # @hzab/edit-table
2
-
3
- 组件模板
4
-
5
- - node@16.16.0
6
-
7
- - 注意:首次克隆先执行 npm run prepare 命令
8
-
9
- # 组件
10
-
11
- ## 示例
12
-
13
- ```jsx
14
- import Demo from "@hzab/edit-table";
15
-
16
- <Demo />;
17
- ```
18
-
19
- ## API
20
-
21
- #### cellEditTableProps
22
-
23
- | 属性名称 | 属性类型 | 必须 | 默认值 | 描述 |
24
- | --------------- | -------- | ---- | ------ | ------------------ |
25
- | reactGridProps | Object | 否 | | reactGrid 相关参数 |
26
- | onChange | Function | 否 | | 单元格回调 |
27
- | formulaConfig | Object | 否 | | 运算相关配置 |
28
- | headerRowHeight | number | 否 | | 表头高度 |
29
- | rowHeight | number | 否 | | 数据行高度 |
30
-
31
- #### reactGridProps
32
-
33
- | 属性名称 | 属性类型 | 必须 | 默认值 | 描述 |
34
- | enableFillHandle | boolean | false | 开启后,选中单元格右下角会出现小方块,可拖拽快速复制 / 序列填充数据(类似 Excel 拖拽填充)|
35
- | enableRangeSelection | boolean | false | 开启框选单元格区域(批量选中、批量编辑 / 填充必备)|
36
- | onFocusLocationChanging | (location: CellLocation): boolean | 否 | 焦点 / 进入编辑态前回调,return false 阻止进入编辑)|
37
- | customCellTemplates | Function | 否 | 注册自定义单元格模板(按钮、下拉、日期等单元格)|
38
- | onSelectionChanged | Function | 否 | 选择区回调 |
39
-
40
- # 组件开发流程
41
-
42
- - 在 config/webpack.config.js 中按需修改 library 配置的文件名
43
- - 在 config/webpack.config.js 中按需修改 alias 配置的包名,便于本地调试
44
- - 在 tsconfig.json 中按需修改 paths 配置的包名,解决 ts 报错问题
45
- - npm run dev
46
-
47
- ## 文件目录
48
-
49
- - example 本地开发测试代码
50
- - src 组件源码
51
-
52
- ## 命令
53
-
54
- - Mac 执行该命令,设置 pre-commit 为可执行文件
55
-
56
- - npm run mac-chmod
57
- - chmod +x .husky && chmod +x .husky/pre-commit
58
-
59
- - 生成文档:npm run docs
60
- - 本地运行:npm run dev
61
-
62
- ## 发布
63
-
64
- - npm 源和云效源都需要发布
65
-
66
- - 命令:npm publish --access public
67
- - 发布目录:
68
- - src
69
-
70
- ### nrm
71
-
72
- - 安装
73
- npm install -g nrm
74
- - 增加源
75
- nrm add aliyun https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
76
- - 切换源
77
- nrm use aliyun
78
- nrm use npm
79
- - 登录(账号密码在 https://packages.aliyun.com/npm/npm-registry/guide 查看)
80
- npm login --registry=https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
81
-
82
- ## 配置
83
-
84
- ### 配置文件
85
-
86
- - 本地配置文件:config/config.js
87
-
88
- ### webpack 配置文件
89
-
90
- - config/webpack.config.js