@bizhermit/react-sdk/elements/list/pageable-list-view.js

React SDK

"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,a){void 0===a&&(a=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,a,n)}:function(e,t,r,a){void 0===a&&(a=r),e[a]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.usePageableListView=void 0;const react_1=__importStar(require("react")),source_1=require("../../hooks/source"),css_var_1=__importStar(require("../../styles/css-var")),jsx_style_1=__importDefault(require("../../styles/jsx-style")),attributes_1=require("../../utils/attributes"),select_box_1=__importDefault(require("../inputs/select-box")),resizer_1=__importDefault(require("../resizer")),list_view_1=__importStar(require("./list-view")),cn="bh-plv",PageableListView=react_1.default.forwardRef(((e,t)=>{const[r,a]=(0,react_1.useState)([]),n=(0,react_1.useRef)(0),[s,c]=(0,react_1.useState)(n.current),l=(0,react_1.useRef)(e.$recordsPerPage??10),{source:u}=(0,source_1.useSource)(e.$items,{preventSourceMemo:!0,changeSource:t=>{const r=(null==e.$overridePageStatus?Math.ceil(t.length/l.current):e.$overridePageStatus.maxPage)-1;s>r&&c(r)}}),o=t=>{null==e.$overridePageStatus&&c(n.current=t),e.$changePage?.(t)},{prevPageNodes:i,nextPageNodes:_}=(0,react_1.useMemo)((()=>{const t=[],r=[],a=null==e.$overridePageStatus?Math.ceil(u.length/l.current):e.$overridePageStatus.maxPage;for(let e=0,r=Math.min(a,s);e<r;e++)t.push(react_1.default.createElement("div",{key:e,className:`${cn}-page_num bh-anchor`,onClick:()=>o(e)},e+1));for(let e=s+1;e<a;e<e++)r.push(react_1.default.createElement("div",{key:e,className:`${cn}-page_num bh-anchor`,onClick:()=>o(e)},e+1));return{prevPageNodes:t,nextPageNodes:r}}),[s,u,e.$overridePageStatus]),d=(0,react_1.useMemo)((()=>{const t=[],r=null==e.$overridePageStatus?Math.ceil(u.length/l.current):e.$overridePageStatus.maxPage;for(let e=0;e<r;e++)t.push({value:e,label:String(e+1)});return t}),[u.length,e.$overridePageStatus]),f=(0,react_1.useMemo)((()=>({page:s})),[s]);(0,react_1.useEffect)((()=>{const t=e.$items??[];if(null==e.$overridePageStatus){const e=l.current*s;a(t.slice(e,e+l.current))}else a(t)}),[u,s]),(0,react_1.useEffect)((()=>{null!=e.$overridePageStatus&&c(n.current=e.$overridePageStatus.pageIndex)}),[e.$overridePageStatus]),(0,react_1.useEffect)((()=>{e.$hook?._set({getPageIndex:()=>n.current,getPageNumber:()=>n.current+1})}),[e.$hook?._set]);const g=(0,react_1.useMemo)((()=>Math.max(2*(0,css_var_1.cssParamsSize)(),20*String(d.length).length+(0,css_var_1.cssParamsSize)())),[d.length]);return react_1.default.createElement("div",{...(0,attributes_1.attributesWithoutChildren)(e,cn,(0,attributes_1.ftoCn)(e.$fto)),ref:t},"bottom"===e.$pagePosition?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement("div",{className:`${cn}-ctrl`},react_1.default.createElement("div",{className:`${cn}-prev`},i),react_1.default.createElement(select_box_1.default,{style:{width:g},$name:"page",$bind:f,$defaultValue:0,$source:d,$preventSourceMemo:!0,$textAlign:"center",$changed:e=>{o(Number(e?.after??0))}}),react_1.default.createElement("div",{className:`${cn}-next`},_)),react_1.default.createElement(list_view_1.default,{$fto:"fy",$hook:e.$hook,$items:r,$columns:e.$columns,$preventColumnsMemo:e.$preventColumnsMemo,$options:{...e.$options,externalSort:!0,sorted:(t,r,n)=>{if(null==e.$overridePageStatus){const e=u.concat();if(""!==r)if("function"==typeof n.sort){const t=n.sort(r);e.sort(((e,r)=>t({data:e},{data:r})))}else if(!1!==n.sort){const a="asc"===r?1:-1;"number"===n.dataType?e.sort(((e,r)=>Number(e[t])>Number(r[t])?a:-a)):e.sort(((e,r)=>e[t]>r[t]?a:-a))}const c=l.current*s;a(e.slice(c,c+l.current))}e.$options?.sorted&&e.$options.sorted(t,r,n)}},$preventOptionsMemo:e.$preventOptionsMemo,$padding:e.$padding,$border:e.$border,$radius:e.$radius,$resize:!1}),"top"===e.$pagePosition?react_1.default.createElement(react_1.default.Fragment,null):react_1.default.createElement("div",{className:`${cn}-ctrl`},react_1.default.createElement("div",{className:`${cn}-prev`},i),react_1.default.createElement(select_box_1.default,{style:{width:g},$name:"page",$bind:f,$defaultValue:0,$source:d,$preventSourceMemo:!0,$textAlign:"center",$changed:e=>{o(Number(e?.after??0))}}),react_1.default.createElement("div",{className:`${cn}-next`},_)),e.$resize?react_1.default.createElement(resizer_1.default,{direction:"boolean"==typeof e.$resize?"xy":e.$resize}):react_1.default.createElement(react_1.default.Fragment,null),Style)})),usePageableListView=()=>{const e=(0,react_1.useRef)({}),t=(0,list_view_1.useListView)();return{...t,getPageIndex:(0,react_1.useCallback)((()=>e.current.getPageIndex?.()),[]),getPageNumber:(0,react_1.useCallback)((()=>e.current.getPageNumber?.()),[]),_set:(0,react_1.useCallback)((r=>{t._set(r),e.current=r}),[])}};exports.usePageableListView=usePageableListView;const Style=react_1.default.createElement(jsx_style_1.default,{id:cn},(()=>`\n.${cn} {\n  ${css_var_1.CssPV.flex}\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.${cn}-ctrl {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  flex: none;\n  padding: 0 ${css_var_1.default.pdx};\n}\n.${cn}-prev,\n.${cn}-next {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  align-items: center;\n  flex: 1;\n  overflow: hidden;\n}\n.${cn}-prev {\n  justify-content: flex-end;\n}\n.${cn}-next {\n  justify-content: flex-start;\n}\n.${cn}-page_num {\n  ${css_var_1.CssPV.flex}\n  flex-flow: row nowrap;\n  justify-content: center;\n  align-items: center;\n  flex: none;\n  min-width: 30px;\n  user-select: none;\n  padding: 2px 3px 0px 3px;\n  white-space: nowrap;\n}\n.${cn} > .${list_view_1.listViewCn}-wrap[data-padding="true"] {\n  padding-top: 0px;\n  padding-bottom: 0px;\n}\n`));exports.default=PageableListView;