@itera-web/react-ui-baselist 1.28.0

package/README.md

@@ -0,0 +1 @@
+### [使用文档](http://iterative.keyboardecho.com/)

package/es/BaseList.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+export interface IBaseListProps {
+    isEditTable?: boolean;
+    handleSaveCallBack?: (a: any) => void;
+    serviceFunc: (a: any, b: any) => void;
+    functionControlTableTitle?: string;
+    columns?: any[];
+    otherParams?: any;
+    optionButtonGroup?: any[];
+    searchParamList?: any[];
+    openRowSelection?: boolean;
+    rowSelectionType?: 'checkbox' | 'radio';
+    scrollX?: null | number;
+    scrollY?: number;
+    functionControlHide?: boolean;
+    topPagination?: boolean;
+    bottomPagination?: boolean;
+    isShowRowTitleName?: string;
+    noSearch?: boolean;
+    className?: any;
+    locales?: string;
+    onRowChangeCallback?: (a: any, b: any) => void;
+    border?: boolean;
+    listClassName?: string;
+}
+export interface IStateProps {
+    isHideFormItem?: boolean;
+    tableDensity?: 'compact' | 'normal' | 'loose';
+    loading?: boolean;
+    dataSource?: object[];
+    isShowRowTitleName?: string;
+    selectedRows?: any[];
+    selectedRowKeys?: any[];
+    Condition?: {};
+    openRowSelection?: boolean;
+    current?: number;
+    pageSize?: number;
+    total?: number;
+}
+export declare const BaseList: React.MemoExoticComponent<React.ForwardRefExoticComponent<IBaseListProps & React.RefAttributes<unknown>>>;

package/es/Components/Close.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export type IconProps = {
+    className?: string;
+};
+export declare const Close: React.FC<IconProps>;

package/es/Components/ListBody/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+export type AlignType = 'left' | 'center' | 'right';
+export type CustomColumnDef<TData, TValue = unknown> = ColumnDef<TData, TValue> & {
+    align?: AlignType;
+    size?: number;
+    sticky?: 'left' | 'right';
+    wrap?: boolean;
+};
+export interface DataTableProps<TData, TValue> {
+    columns: CustomColumnDef<TData, TValue>[];
+    data: TData[];
+    openRowSelection?: boolean;
+    selectedRowKeys?: string[];
+    onRowChange?: (selectedRowKeys: string[], selectedRows: TData[]) => void;
+    rowSelectionType?: 'checkbox' | 'radio';
+    density?: 'compact' | 'normal' | 'loose';
+    border?: boolean;
+}
+export declare const ListBody: React.MemoExoticComponent<React.ForwardRefExoticComponent<DataTableProps<unknown, unknown> & React.RefAttributes<any>>>;

package/es/index.d.ts

@@ -0,0 +1,2 @@
+export { BaseList, type IBaseListProps } from './BaseList';
+export { ListBody, type AlignType } from './Components/ListBody';

package/es/index.js

@@ -0,0 +1 @@
+import*as e from"lodash";import*as t from"react";import*as o from"uuid";import*as n from"@itera-web/hooks-setstate";import*as r from"@itera-web/react-ui-conditionalrender";import*as l from"@itera-web/react-ui-functioncontrol";import*as a from"@itera-web/react-ui-pagination-push";import*as i from"@itera-web/react-ui-searchform";import*as d from"@itera-web/react-ui-spin";import*as c from"@itera-web/utils-cn";import*as u from"@itera-web/utils-locale-toggle";import*as s from"@itera-web/react-ui-checkbox";import*as f from"@itera-web/react-ui-empty";import*as m from"@itera-web/react-ui-radio";import*as g from"@itera-web/react-ui-table";import*as v from"@tanstack/react-table";var p={d:(e,t)=>{for(var o in t)p.o(t,o)&&!p.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},h={};p.d(h,{D:()=>G,Y:()=>D});const b=(e=>{var t={};return p.d(t,e),t})({default:()=>e.default});const w=(e=>{var t={};return p.d(t,e),t})({createElement:()=>t.createElement,default:()=>t.default,forwardRef:()=>t.forwardRef,memo:()=>t.memo,useCallback:()=>t.useCallback,useEffect:()=>t.useEffect,useImperativeHandle:()=>t.useImperativeHandle,useMemo:()=>t.useMemo,useRef:()=>t.useRef});const y=(e=>{var t={};return p.d(t,e),t})({v4:()=>o.v4});const R=(e=>{var t={};return p.d(t,e),t})({useSetState:()=>n.useSetState});const x=(e=>{var t={};return p.d(t,e),t})({ConditionalRender:()=>r.ConditionalRender});const C=(e=>{var t={};return p.d(t,e),t})({FunctionControl:()=>l.FunctionControl});const S=(e=>{var t={};return p.d(t,e),t})({Pagination:()=>a.Pagination});const E=(e=>{var t={};return p.d(t,e),t})({SearchForm:()=>i.SearchForm});const k=(e=>{var t={};return p.d(t,e),t})({Spin:()=>d.Spin});const T=(e=>{var t={};return p.d(t,e),t})({cn:()=>c.cn});const N=(e=>{var t={};return p.d(t,e),t})({Intl:()=>u.Intl});var M=function(e){var t=e.className;return w.createElement("svg",{className:t,fill:"none",height:"18",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",viewBox:"0 0 24 24",width:"18",xmlns:"http://www.w3.org/2000/svg"},w.createElement("line",{x1:"18",x2:"6",y1:"6",y2:"18"}),w.createElement("line",{x1:"6",x2:"18",y1:"6",y2:"18"}))};const z=(e=>{var t={};return p.d(t,e),t})({Checkbox:()=>s.Checkbox});const F=(e=>{var t={};return p.d(t,e),t})({Empty:()=>f.Empty});const H=(e=>{var t={};return p.d(t,e),t})({RadioGroup:()=>m.RadioGroup,RadioGroupItem:()=>m.RadioGroupItem});const I=(e=>{var t={};return p.d(t,e),t})({Table:()=>g.Table,TableBody:()=>g.TableBody,TableCell:()=>g.TableCell,TableHead:()=>g.TableHead,TableHeader:()=>g.TableHeader,TableRow:()=>g.TableRow});const _=(e=>{var t={};return p.d(t,e),t})({flexRender:()=>v.flexRender,getCoreRowModel:()=>v.getCoreRowModel,getFilteredRowModel:()=>v.getFilteredRowModel,getPaginationRowModel:()=>v.getPaginationRowModel,getSortedRowModel:()=>v.getSortedRowModel,useReactTable:()=>v.useReactTable});var B=function(e,t,o){if(o||2===arguments.length)for(var n,r=0,l=t.length;r<l;r++)!n&&r in t||(n||(n=Array.prototype.slice.call(t,0,r)),n[r]=t[r]);return e.concat(n||Array.prototype.slice.call(t))};function P(e,t){var o=e.columns,n=e.data,r=e.onRowChange,l=e.openRowSelection,a=e.selectedRowKeys,i=e.rowSelectionType,d=e.density,c=void 0===d?"normal":d,u=e.border,s=void 0!==u&&u,f=w.default.useState([]),m=f[0],g=f[1],v=w.default.useState([]),p=v[0],h=v[1],b=w.default.useState({}),y=b[0],R=b[1],C=(0,w.useCallback)(function(e){var t,o,n="text-left";return"center"===(null==e?void 0:e.align)&&(n="text-center"),"right"===(null==e?void 0:e.align)&&(n="text-right"),"left"===(null==e?void 0:e.sticky)&&(t="sticky left-0 z-[2] bg-section border-r border-border shadow-[2px_0_4px_-2px_rgba(0,0,0,0.1)]"),"right"===(null==e?void 0:e.sticky)&&(t="sticky right-0 z-[2] bg-section border-l border-border shadow-[-2px_0_4px_-2px_rgba(0,0,0,0.1)]"),(null==e?void 0:e.wrap)&&(o="break-all"),(0,T.cn)(n,t,o)},[]),S=(0,w.useMemo)(function(){switch(c){case"compact":return"text-sm [&_td]:py-1 [&_th]:py-1";case"loose":return"text-sm [&_td]:py-4 [&_th]:py-4";default:return"text-sm [&_td]:py-2 [&_th]:py-2"}},[c]),E=(0,_.useReactTable)({data:n,columns:B([l&&{id:"select",size:48,header:function(e){var t=e.table;if("radio"===i)return null;var o=t.getRowModel().rows.map(function(e){return e.id}),n=(null==a?void 0:a.length)===o.length,l=(null==a?void 0:a.length)>0&&!n;return w.default.createElement(z.Checkbox,{"aria-label":"Select all",checked:!!n||!!l&&"indeterminate",className:"ml-[6px]",onCheckedChange:function(e){var n=e?o:[];null==r||r(n,n.map(function(e){var o;return null===(o=t.getRowModel().rowsById[e])||void 0===o?void 0:o.original}).filter(Boolean))}})},cell:function(e){var t,o=e.row,n=null==a?void 0:a.includes(o.id);return"radio"===i?w.default.createElement(H.RadioGroup,{className:"ml-[6px]",onValueChange:function(e){var t=[e];null==r||r(t,t.map(function(e){var t;return null===(t=E.getRowModel().rowsById[e])||void 0===t?void 0:t.original}).filter(Boolean))},value:null!==(t=null==a?void 0:a[0])&&void 0!==t?t:""},w.default.createElement(H.RadioGroupItem,{"aria-label":"Select row",checked:n,value:o.id})):w.default.createElement(z.Checkbox,{"aria-label":"Select row",checked:n,className:"ml-[6px]",onCheckedChange:function(e){var t;t=e?B(B([],a||[],!0),[o.id],!1):(a||[]).filter(function(e){return e!==o.id}),null==r||r(t,t.map(function(e){var t;return null===(t=E.getRowModel().rowsById[e])||void 0===t?void 0:t.original}).filter(Boolean))}})},enableSorting:!1,enableHiding:!1,sticky:"left"}],o,!0).filter(Boolean),state:{sorting:m,columnFilters:p,columnVisibility:y},onSortingChange:g,onColumnFiltersChange:h,onColumnVisibilityChange:R,getCoreRowModel:(0,_.getCoreRowModel)(),getPaginationRowModel:(0,_.getPaginationRowModel)(),getSortedRowModel:(0,_.getSortedRowModel)(),getFilteredRowModel:(0,_.getFilteredRowModel)(),getRowId:function(e,t){var o,n;return null!==(n=null===(o=e.id)||void 0===o?void 0:o.toString())&&void 0!==n?n:t.toString()},manualPagination:!0,pageCount:-1});return(0,w.useImperativeHandle)(t,function(){return{table:E}}),w.default.createElement("div",{className:"w-full max-h-full overflow-y-auto text-font"},w.default.createElement(I.Table,{className:(0,T.cn)(S,s&&"border border-border [&_th]:border [&_td]:border [&_tr]:border-border")},w.default.createElement(I.TableHeader,{className:(0,T.cn)("bg-section z-20 sticky top-0")},E.getHeaderGroups().map(function(e){for(var t=[],o=[],n=0,r=0;r<e.headers.length;r++){"left"===(a=e.headers[r].column.columnDef).sticky?(t[r]=n,n+=a.size||0):t[r]=0}var l=0;for(r=e.headers.length-1;r>=0;r--){var a;"right"===(a=e.headers[r].column.columnDef).sticky?(o[r]=l,l+=a.size||0):o[r]=0}return w.default.createElement(I.TableRow,{key:e.id},e.headers.map(function(e,n){var r=e.column.columnDef;return w.default.createElement(I.TableHead,{className:(0,T.cn)("sticky top-0 bg-section",C(r)),key:e.id,style:{width:r.size,minWidth:r.size,left:"left"===r.sticky?"".concat(t[n],"px"):void 0,right:"right"===r.sticky?"".concat(o[n],"px"):void 0}},e.isPlaceholder?null:(0,_.flexRender)(r.header,e.getContext()))}))})),w.default.createElement(I.TableBody,null,w.default.createElement(x.ConditionalRender,{conditional:E.getRowModel().rows.length>0,noMatch:function(){return w.default.createElement(I.TableRow,null,w.default.createElement(I.TableCell,{className:"h-24 text-center",colSpan:o.length},w.default.createElement(F.Empty,null)))}},function(){return E.getRowModel().rows.map(function(e){for(var t=[],o=[],n=0,r=0;r<e.getVisibleCells().length;r++){"left"===(a=e.getVisibleCells()[r].column.columnDef).sticky?(t[r]=n,n+=a.size||0):t[r]=0}var l=0;for(r=e.getVisibleCells().length-1;r>=0;r--){var a;"right"===(a=e.getVisibleCells()[r].column.columnDef).sticky?(o[r]=l,l+=a.size||0):o[r]=0}return w.default.createElement(I.TableRow,{key:e.id},e.getVisibleCells().map(function(e,n){var r=e.column.columnDef;return w.default.createElement(I.TableCell,{className:C(r),key:e.id,style:{width:r.size,minWidth:r.size,left:"left"===r.sticky?"".concat(t[n],"px"):void 0,right:"right"===r.sticky?"".concat(o[n],"px"):void 0}},(0,_.flexRender)(r.cell,e.getContext()))}))})}))))}var D=(0,w.memo)((0,w.forwardRef)(P)),q=function(){return q=Object.assign||function(e){for(var t,o=1,n=arguments.length;o<n;o++)for(var r in t=arguments[o])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},q.apply(this,arguments)},V=function(e,t,o){if(o||2===arguments.length)for(var n,r=0,l=t.length;r<l;r++)!n&&r in t||(n||(n=Array.prototype.slice.call(t,0,r)),n[r]=t[r]);return e.concat(n||Array.prototype.slice.call(t))},j=function(e,t){var o=e.serviceFunc,n=void 0===o?function(e,t){}:o,r=e.functionControlTableTitle,l=void 0===r?"查询表格":r,a=e.columns,i=void 0===a?[]:a,d=e.optionButtonGroup,c=void 0===d?[]:d,u=e.searchParamList,s=void 0===u?[]:u,f=e.functionControlHide,m=void 0!==f&&f,g=e.topPagination,v=void 0!==g&&g,p=e.bottomPagination,h=void 0===p||p,z=e.isShowRowTitleName,F=void 0===z?"":z,H=e.noSearch,I=void 0!==H&&H,_=e.className,B=e.openRowSelection,P=void 0!==B&&B,j=e.rowSelectionType,G=void 0===j?"checkbox":j,K=e.locales,L=void 0===K?"zh_CN":K,O=e.onRowChangeCallback,A=void 0===O?function(){}:O,W=e.border,Y=void 0!==W&&W,J=e.listClassName,Q=void 0===J?"":J,U=(0,w.useRef)(),X=(0,w.useRef)(),Z=(0,R.useSetState)({isHideFormItem:!0,tableDensity:"normal",loading:!1,dataSource:[],selectedRows:[],selectedRowKeys:[],isShowRowTitleName:F,Condition:{},current:1,pageSize:10,total:1}),$=Z[0],ee=Z[1],te=Z[2];function oe(e){ee({tableDensity:e})}function ne(){ee({isHideFormItem:!$.isHideFormItem})}var re=function(e){var t,o,n=e||(null===(o=null===(t=null==U?void 0:U.current)||void 0===t?void 0:t.searchForm)||void 0===o?void 0:o.getValues());for(var r in n)void 0===n[r]&&delete n[r];ee({current:1,Condition:n},le)},le=function(e){void 0===e&&(e={}),ee({loading:!0});var t=e.current||$.current,o=e.pageSize||$.pageSize,r=e.Condition||$.Condition,l=q(q({},r),{page:t,limit:o});setTimeout(function(){return ee({loading:!1})},5e3),null==n||n(l,function(e){var t,o=e.dataSource,n=void 0===o?[]:o,r=e.total,a=void 0===r?0:r;ee({loading:!1});var i=null===(t=null==n?void 0:n.map)||void 0===t?void 0:t.call(n,function(e,t){return q(q({},e||{}),{rowKey:(null==e?void 0:e.id)||(0,y.v4)(),index:(l.page-1)*l.limit+(t+1)})});ee({dataSource:i,total:a})})},ae=function(){var e;return null===(e=U.current)||void 0===e?void 0:e.onReset()},ie=function(e,t){ee({current:e,pageSize:t},le)},de=function(e,t){return ee({current:e,pageSize:t},le)},ce=(0,w.useCallback)(function(e,t){var o,n,r=(null===(o=b.default.cloneDeep($.selectedRows||[]))||void 0===o?void 0:o.concat(t))||[],l=null===(n=e.map(function(e){return null==r?void 0:r.find(function(t){return String(t.id)==String(e)})}))||void 0===n?void 0:n.filter(Boolean);ee({selectedRowKeys:e,selectedRows:l}),A(e,l)},[$]),ue=(0,w.useCallback)(function(e){var t,o,n=null===(t=$.selectedRowKeys)||void 0===t?void 0:t.filter(function(t){return String(t)!==String(e)}),r=null===(o=$.selectedRows)||void 0===o?void 0:o.filter(function(t){return t.id!==e});ce(n,r)},[$]),se=function(e){var t,o=String(e).split(","),n=null===(t=$.selectedRows)||void 0===t?void 0:t.filter(function(e){return!o.includes(String(e.id))}),r=null==n?void 0:n.map(function(e){return String(e.id)});ee({selectedRowKeys:r,selectedRows:n})},fe=(0,w.useMemo)(function(){var e;return null===(e=b.default.cloneDeep(i))||void 0===e?void 0:e.map(function(e){return q(q({},e),{header:N.Intl.v(e.header)})})},[L,i]);return(0,w.useImperativeHandle)(t,function(){return{state:function(){return te()},onSearch:re,onChangeRowSelection:se,onRowChange:ce,setState:ee}},[$]),(0,w.useEffect)(function(){!I&&re()},[]),w.default.createElement(k.Spin,{size:"large",spinning:$.loading},w.default.createElement("div",{className:(0,T.cn)("relative flex flex-col h-full",_)},w.default.createElement(x.ConditionalRender,{conditional:(null==s?void 0:s.length)>0},function(){return w.default.createElement(E.SearchForm,{defaultValues:Object.assign.apply(Object,V([{}],s.map(function(e){var t,o;return(t={})[e.key]=null!==(o=e.defaultValue)&&void 0!==o?o:"",t}),!1)),loading:$.loading,locales:L,noSearch:!0,onSearch:function(){return re()},ref:U,searchParamList:s})}),w.default.createElement(x.ConditionalRender,{conditional:0!==$.total&&v},function(){return w.default.createElement("div",{className:"flex justify-end box-border w-full h-[60px] p-[10px_20px] rounded-b-lg bg-section"},w.default.createElement(S.Pagination,{current:$.current,onChange:ie,onShowSizeChange:de,pageSize:$.pageSize,total:$.total}))}),w.default.createElement(x.ConditionalRender,{conditional:!m},function(){return w.default.createElement("div",{className:"min-h-[45px] mt-5 overflow-hidden rounded-t-lg FunctionControl"},w.default.createElement(C.FunctionControl,{dataSource:$.dataSource,functionControlHide:m,functionControlTableTitle:l,isHideFormItem:$.isHideFormItem,isHideText:(null==s?void 0:s.length)>0,locales:L,onChangeIsHideFormItem:ne,onChangeListSize:oe,onResetForm:ae,onSearch:function(){return re()},optionButtonGroup:c,tableDensity:$.tableDensity}))}),w.default.createElement("div",{className:(0,T.cn)("flex flex-col grow box-border p-[15px] overflow-hidden bg-section ListBodyBox",Q)},w.default.createElement(x.ConditionalRender,{conditional:$.isShowRowTitleName},function(){var e;return w.default.createElement("div",{className:"flex flex-wrap gap-3 max-h-[100px] overflow-y-auto"},null===(e=$.selectedRows)||void 0===e?void 0:e.map(function(e,t){return w.default.createElement("div",{className:"flex gap-1 items-center mb-[5px] p-[2px_5px] h-auto rounded-[8px] text-white bg-primary",key:e.id||t},w.default.createElement("span",{className:"text-white"},e[$.isShowRowTitleName]),w.default.createElement("span",{className:"text-white cursor-pointer text-[16px]",onClick:function(){return ue(e.id)}},w.default.createElement(M,{className:"hover:text-red-400 transition-colors duration-200"})))}))}),w.default.createElement(D,{border:Y,columns:fe||[],data:$.dataSource,density:$.tableDensity,onRowChange:ce,openRowSelection:P,ref:X,rowSelectionType:G,selectedRowKeys:$.selectedRowKeys})),w.default.createElement(x.ConditionalRender,{conditional:0!==$.total&&h},function(){return w.default.createElement("div",{className:"flex justify-end box-border w-full h-[60px] p-[10px_20px] rounded-b-lg bg-section Pagination"},w.default.createElement(S.Pagination,{current:$.current,onChange:ie,onShowSizeChange:de,pageSize:$.pageSize,total:$.total}))})))},G=(0,w.memo)((0,w.forwardRef)(j)),K=h.D,L=h.Y;export{K as BaseList,L as ListBody};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@itera-web/react-ui-baselist",
+  "description": "查询表格",
+  "version": "1.28.0",
+  "main": "es/index.js",
+  "types": "es/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "itera-cli package",
+    "up": "npm publish"
+  },
+  "dependencies": {
+    "@itera-web/hooks-setstate": "^1.20.0",
+    "@itera-web/react-ui-checkbox": "^1.22.0",
+    "@itera-web/react-ui-conditionalrender": "^1.21.0",
+    "@itera-web/react-ui-empty": "^1.20.0",
+    "@itera-web/react-ui-functioncontrol": "^1.25.0",
+    "@itera-web/react-ui-pagination-push": "^1.26.0",
+    "@itera-web/react-ui-radio": "^1.21.0",
+    "@itera-web/react-ui-searchform": "^1.26.0",
+    "@itera-web/react-ui-spin": "^1.20.0",
+    "@itera-web/react-ui-table": "^1.20.0",
+    "@itera-web/utils-cn": "^1.20.0",
+    "@itera-web/utils-locale-toggle": "^1.20.0",
+    "@tanstack/react-table": "^8.21.3",
+    "lodash": "^4.17.21",
+    "uuid": "^9.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@itera-web/cli": "^1.1.45"
+  },
+  "gitHead": "03be639f55ed0f62801e6b0f109070a45fe5a661"
+}