@mailstep/design-system 0.5.0-beta.39 → 0.5.0-beta.40
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/package.json
CHANGED
|
@@ -43,6 +43,7 @@ var StyledCommonGrid = function (props) {
|
|
|
43
43
|
var _a = props.optimizeFilters, optimizeFilters = _a === void 0 ? false : _a, extraControlButtons = props.extraControlButtons, eshopSelect = props.eshopSelect, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "floatingButtonProps", "queryRowsParam", "customPaginationHandler"]);
|
|
44
44
|
var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
|
|
45
45
|
var _b = useGetGridHeight(), gridHeight = _b.gridHeight, gridRef = _b.gridRef, paginationRef = _b.paginationRef;
|
|
46
|
+
console.log(gridHeight, gridRef, paginationRef);
|
|
46
47
|
useEffect(function () {
|
|
47
48
|
var _a;
|
|
48
49
|
if (!queryRowsParam && gridHeight && gridHeight > 0) {
|
|
@@ -61,6 +62,6 @@ var StyledCommonGrid = function (props) {
|
|
|
61
62
|
gridSelectors: gridSelectors,
|
|
62
63
|
onClose: onClose,
|
|
63
64
|
}), columnsConfigValues = _d.columnsConfigValues, setColumnsConfigOptions = _d.setColumnsConfigOptions, onConfirmForm = _d.onConfirmForm, resetColumnConfig = _d.resetColumnConfig;
|
|
64
|
-
return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect })), _jsx(StyledColumnButton, { type: "button", appearance: "ghost", icon: _jsx(Rows, {}), onClick: openManageColumnForm, children: _jsx(H6, { children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef,
|
|
65
|
+
return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect })), _jsx(StyledColumnButton, { type: "button", appearance: "ghost", icon: _jsx(Rows, {}), onClick: openManageColumnForm, children: _jsx(H6, { children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isAbsolute: !!gridHeight, children: [processCheckedValues && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onClose, onCancel: onClose, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: columns, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions }) }))] }));
|
|
65
66
|
};
|
|
66
67
|
export default StyledCommonGrid;
|
|
@@ -6,7 +6,7 @@ import { filters } from '../utils/filters';
|
|
|
6
6
|
export default {
|
|
7
7
|
title: '@Blocks/CommonGrid',
|
|
8
8
|
};
|
|
9
|
-
export var ManyColumnsNormalLayoutANoControls = function () { return (_jsx(CommonGrid, { rowsData: createOversizedRandomData(5), filters: filters, columnsDefinitions: oversizedColumnDefinition, hideColumnConfig: true, gridSelectors: gridSelectors, gridActions: gridDummyActions
|
|
9
|
+
export var ManyColumnsNormalLayoutANoControls = function () { return (_jsx(CommonGrid, { rowsData: createOversizedRandomData(5), filters: filters, columnsDefinitions: oversizedColumnDefinition, hideColumnConfig: true, gridSelectors: gridSelectors, gridActions: gridDummyActions })); };
|
|
10
10
|
ManyColumnsNormalLayoutANoControls.story = {
|
|
11
11
|
name: 'many columns normal layout a no controls',
|
|
12
12
|
};
|
|
@@ -256,7 +256,6 @@ export type CommonGridProps<TData extends RowProps = RowProps> = {
|
|
|
256
256
|
columnLayout?: ColumnLayout;
|
|
257
257
|
confirmOnReset?: () => boolean;
|
|
258
258
|
hideColumnConfig?: boolean;
|
|
259
|
-
hideAllControls?: boolean;
|
|
260
259
|
className?: string;
|
|
261
260
|
gridRef?: React.MutableRefObject<HTMLElement>;
|
|
262
261
|
minColumnWidth?: number;
|
package/ui/index.es.js
CHANGED
|
@@ -51079,7 +51079,7 @@ const txe = Ti(lt.div)`
|
|
|
51079
51079
|
gridRef: x,
|
|
51080
51080
|
paginationRef: O
|
|
51081
51081
|
} = epe();
|
|
51082
|
-
Pt(() => {
|
|
51082
|
+
console.log(S, x, O), Pt(() => {
|
|
51083
51083
|
var F;
|
|
51084
51084
|
if (!f && S && S > 0) {
|
|
51085
51085
|
const te = Math.max(Math.floor(S / _4e - 2), N4e);
|
|
@@ -51107,7 +51107,7 @@ const txe = Ti(lt.div)`
|
|
|
51107
51107
|
!c && /* @__PURE__ */ y.jsx(CCe, { extraControlButtons: r, gridActions: v, gridSelectors: m, eshopSelect: n }),
|
|
51108
51108
|
/* @__PURE__ */ y.jsx(dCe, { type: "button", appearance: "ghost", icon: /* @__PURE__ */ y.jsx(iU, {}), onClick: _, children: /* @__PURE__ */ y.jsx(oA, { children: /* @__PURE__ */ y.jsx(Lr, { id: "manageColumn.title", message: "Manage column" }) }) })
|
|
51109
51109
|
] }) }),
|
|
51110
|
-
/* @__PURE__ */ y.jsx(fCe, { ...g, ...T, filters: k, gridRef: x,
|
|
51110
|
+
/* @__PURE__ */ y.jsx(fCe, { ...g, ...T, filters: k, gridRef: x, height: S, floatingButtonProps: u, hasColouredRows: !0 })
|
|
51111
51111
|
] }),
|
|
51112
51112
|
/* @__PURE__ */ y.jsx(uD, { children: /* @__PURE__ */ y.jsxs(sCe, { ref: O, isAbsolute: !!S, children: [
|
|
51113
51113
|
o && /* @__PURE__ */ y.jsx(JCe, { rowsData: w, onBatchAction: i, gridActions: v, gridSelectors: m, actionColumn: E, processCheckedValues: o, processCheckedValuesTitle: l }),
|
package/ui/index.umd.js
CHANGED
|
@@ -3779,7 +3779,7 @@ function print() { __p += __j.call(arguments, '') }
|
|
|
3779
3779
|
border: 1px solid ${$.color("lightGray6")};
|
|
3780
3780
|
border-radius: 8px;
|
|
3781
3781
|
margin-bottom: 15px;
|
|
3782
|
-
`,Qxe=({column:e,columnsConfigValues:t,setColumnsConfigOptions:r,searchedValue:n})=>{var f,h,g,v;const[i,o]=I.useState((t==null?void 0:t.includes(e.name))??!1),l=Xxe.isObject(e==null?void 0:e.title)&&"props"in e.title&&((f=e.title)==null?void 0:f.props)&&ht._({id:(g=(h=e.title)==null?void 0:h.props)==null?void 0:g.id,message:(v=e.title)==null?void 0:v.props.message}),u=l&&l.toLocaleLowerCase().includes(n.toLocaleLowerCase()),c=I.useCallback(()=>{r(m=>({...m,[e.name]:i?{isHidden:!0}:{}})),o(!i)},[r,i,e.name]);return y.jsxs(qxe,{$isVisible:u,children:[y.jsxs(it.div,{display:"flex",alignItems:"center",children:[y.jsx(it.div,{w:"28px",children:y.jsx(Uf,{name:"",variant:"grid",onChange:c,spaceAround:!1,checked:i})}),y.jsx(_p,{variant:"medium",ml:"8px",children:l})]}),y.jsx(rk,{})]})},Kxe=({columns:e,columnsConfigValues:t,setColumnsConfigOptions:r})=>{const[n,i]=I.useState(""),o=I.useCallback(u=>{i(u.target.value)},[i]),l=I.useCallback(()=>{i("")},[i]);return y.jsxs(it.div,{children:[y.jsx(nc,{icon:"search",type:"text",value:n,placeholder:ht._({id:"manageColumn.searchPlaceholder",message:"Find column..."}),onChange:o,onClear:l,variant:"gray"}),y.jsx(it.div,{h:"400px",overflowY:"scroll",mt:"20px",children:e==null?void 0:e.map((u,c)=>y.jsx(Qxe,{column:u,columnsConfigValues:t,setColumnsConfigOptions:r,searchedValue:n},c))})]})},$xe=e=>{const{optimizeFilters:t=!1,extraControlButtons:r,eshopSelect:n,onBatchAction:i,processCheckedValues:o,processCheckedValuesTitle:l,hideControlButtons:u,floatingButtonProps:c,queryRowsParam:f,customPaginationHandler:h,...g}=e,{gridActions:v,gridSelectors:m,rowsData:w,actionColumnDefinition:E}=g,{gridHeight:S,gridRef:x,paginationRef:k}=Zhe();I.useEffect(()=>{var V;if(!f&&S&&S>0){const re=Math.max(Math.floor(S/x5e-2),C5e);re&&((V=v.setRowsPerPage)==null||V.call(v,re))}},[S,v,f]);const P=n6e(g),T=I.useMemo(()=>E5e(t),[t]),D=P.columnsDefinitions,{onOpen:R,isOpen:F,onClose:j}=sb(),{columnsConfigValues:z,setColumnsConfigOptions:U,onConfirmForm:B,resetColumnConfig:W}=i6e({columns:D,gridActions:v,gridSelectors:m,onClose:j});return y.jsxs(nxe,{children:[y.jsxs(ixe,{children:[y.jsx(TW,{children:y.jsxs(axe,{className:"buttonsStrip",children:[!u&&y.jsx(mxe,{extraControlButtons:r,gridActions:v,gridSelectors:m,eshopSelect:n}),y.jsx(oxe,{type:"button",appearance:"ghost",icon:y.jsx(tk,{}),onClick:R,children:y.jsx(_p,{children:y.jsx(Pr,{id:"manageColumn.title",message:"Manage column"})})})]})}),y.jsx(sxe,{...g,...P,filters:T,gridRef:x,
|
|
3782
|
+
`,Qxe=({column:e,columnsConfigValues:t,setColumnsConfigOptions:r,searchedValue:n})=>{var f,h,g,v;const[i,o]=I.useState((t==null?void 0:t.includes(e.name))??!1),l=Xxe.isObject(e==null?void 0:e.title)&&"props"in e.title&&((f=e.title)==null?void 0:f.props)&&ht._({id:(g=(h=e.title)==null?void 0:h.props)==null?void 0:g.id,message:(v=e.title)==null?void 0:v.props.message}),u=l&&l.toLocaleLowerCase().includes(n.toLocaleLowerCase()),c=I.useCallback(()=>{r(m=>({...m,[e.name]:i?{isHidden:!0}:{}})),o(!i)},[r,i,e.name]);return y.jsxs(qxe,{$isVisible:u,children:[y.jsxs(it.div,{display:"flex",alignItems:"center",children:[y.jsx(it.div,{w:"28px",children:y.jsx(Uf,{name:"",variant:"grid",onChange:c,spaceAround:!1,checked:i})}),y.jsx(_p,{variant:"medium",ml:"8px",children:l})]}),y.jsx(rk,{})]})},Kxe=({columns:e,columnsConfigValues:t,setColumnsConfigOptions:r})=>{const[n,i]=I.useState(""),o=I.useCallback(u=>{i(u.target.value)},[i]),l=I.useCallback(()=>{i("")},[i]);return y.jsxs(it.div,{children:[y.jsx(nc,{icon:"search",type:"text",value:n,placeholder:ht._({id:"manageColumn.searchPlaceholder",message:"Find column..."}),onChange:o,onClear:l,variant:"gray"}),y.jsx(it.div,{h:"400px",overflowY:"scroll",mt:"20px",children:e==null?void 0:e.map((u,c)=>y.jsx(Qxe,{column:u,columnsConfigValues:t,setColumnsConfigOptions:r,searchedValue:n},c))})]})},$xe=e=>{const{optimizeFilters:t=!1,extraControlButtons:r,eshopSelect:n,onBatchAction:i,processCheckedValues:o,processCheckedValuesTitle:l,hideControlButtons:u,floatingButtonProps:c,queryRowsParam:f,customPaginationHandler:h,...g}=e,{gridActions:v,gridSelectors:m,rowsData:w,actionColumnDefinition:E}=g,{gridHeight:S,gridRef:x,paginationRef:k}=Zhe();console.log(S,x,k),I.useEffect(()=>{var V;if(!f&&S&&S>0){const re=Math.max(Math.floor(S/x5e-2),C5e);re&&((V=v.setRowsPerPage)==null||V.call(v,re))}},[S,v,f]);const P=n6e(g),T=I.useMemo(()=>E5e(t),[t]),D=P.columnsDefinitions,{onOpen:R,isOpen:F,onClose:j}=sb(),{columnsConfigValues:z,setColumnsConfigOptions:U,onConfirmForm:B,resetColumnConfig:W}=i6e({columns:D,gridActions:v,gridSelectors:m,onClose:j});return y.jsxs(nxe,{children:[y.jsxs(ixe,{children:[y.jsx(TW,{children:y.jsxs(axe,{className:"buttonsStrip",children:[!u&&y.jsx(mxe,{extraControlButtons:r,gridActions:v,gridSelectors:m,eshopSelect:n}),y.jsx(oxe,{type:"button",appearance:"ghost",icon:y.jsx(tk,{}),onClick:R,children:y.jsx(_p,{children:y.jsx(Pr,{id:"manageColumn.title",message:"Manage column"})})})]})}),y.jsx(sxe,{...g,...P,filters:T,gridRef:x,height:S,floatingButtonProps:c,hasColouredRows:!0})]}),y.jsx(TW,{children:y.jsxs(rxe,{ref:k,isAbsolute:!!S,children:[o&&y.jsx(Hxe,{rowsData:w,onBatchAction:i,gridActions:v,gridSelectors:m,actionColumn:E,processCheckedValues:o,processCheckedValuesTitle:l}),y.jsxs(it.div,{display:"flex",justifyContent:"center",alignItems:"center",className:"paginatorWrapper",w:"100%",h:window.innerWidth>1204?"60px":"32px",children:[y.jsx(tN,{page:m==null?void 0:m.page,itemCount:g==null?void 0:g.totalRowsCount,itemPerPage:(m==null?void 0:m.rowsPerPage)||10,onPageChange:v==null?void 0:v.setPage,customPaginationHandler:h}),y.jsx(Uxe,{gridActions:v,gridSelectors:m,customPaginationHandler:h})]})]})}),F&&y.jsx(ob,{title:y.jsx(Pr,{id:"manageColumn.title",message:"Manage columns"}),onClose:j,onCancel:j,onExtraAction:W,onConfirm:B,width:"auto",minWidth:"350px",hasFooter:!0,extraActionLabel:y.jsx(Pr,{id:"dataGrid.buttonClearConfig",message:"Reset config"}),cancelLabel:y.jsx(Pr,{id:"form.buttonCancel",message:"Cancel"}),confirmLabel:y.jsx(Pr,{id:"form.buttonConfirm",message:"Confirm"}),children:y.jsx(Kxe,{columns:D,columnsConfigValues:z,setColumnsConfigOptions:U})})]})};var A9={};/**
|
|
3783
3783
|
* @license React
|
|
3784
3784
|
* use-sync-external-store-with-selector.production.min.js
|
|
3785
3785
|
*
|