@mailstep/design-system 0.7.45-beta.0 → 0.7.45-beta.2
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 +1 -1
- package/ui/Blocks/CommonGrid/CommonGridContainer.d.ts +1 -1
- package/ui/Blocks/CommonGrid/CommonGridContainer.js +8 -8
- package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.js +2 -2
- package/ui/Blocks/CommonGrid/types.d.ts +1 -0
- package/ui/index.es.js +696 -695
- package/ui/index.umd.js +53 -53
package/package.json
CHANGED
|
@@ -33,15 +33,15 @@ import useEditReadAsColumn from './hooks/useEditReadAsColumn';
|
|
|
33
33
|
import { useGridAutoRowsPerPage } from './hooks/useGridAutoRowsPerPage';
|
|
34
34
|
import useManageColumn from './hooks/useManageColumn';
|
|
35
35
|
import { usePresetState } from './hooks/usePresetsState';
|
|
36
|
+
import { getRowsPerPage } from './utils/getRowsPerPage';
|
|
36
37
|
import { x } from '@xstyled/styled-components';
|
|
37
38
|
import { CommonGridWithStyles, BottomWrapper, CommonGridWrap, ContentContainer, StyledButtonStrip } from './styles';
|
|
38
39
|
import { getFilters } from './utils';
|
|
39
|
-
import { getRowsPerPage } from './utils/getRowsPerPage';
|
|
40
40
|
var CommonGridContainer = function (props) {
|
|
41
41
|
var _a;
|
|
42
|
-
var _b = props.optimizeFilters, optimizeFilters = _b === void 0 ? false : _b, extraControlButtons = props.extraControlButtons, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, _c = props.autoHeight, autoHeight = _c === void 0 ? true : _c, gridName = props.gridName, _d = props.withPresets, withPresets = _d === void 0 ? true : _d, _e = props.withManageColumnButton, withManageColumnButton = _e === void 0 ? true : _e, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "autoHeight", "gridName", "withPresets", "withManageColumnButton"]);
|
|
42
|
+
var _b = props.optimizeFilters, optimizeFilters = _b === void 0 ? false : _b, extraControlButtons = props.extraControlButtons, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, _c = props.autoHeight, autoHeight = _c === void 0 ? true : _c, gridName = props.gridName, _d = props.withPresets, withPresets = _d === void 0 ? true : _d, _e = props.withManageColumnButton, withManageColumnButton = _e === void 0 ? true : _e, _f = props.withPagination, withPagination = _f === void 0 ? true : _f, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler", "autoHeight", "gridName", "withPresets", "withManageColumnButton", "withPagination"]);
|
|
43
43
|
var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
|
|
44
|
-
var
|
|
44
|
+
var _g = useState(false), displayManageColumnButton = _g[0], setDisplayManageColumnButton = _g[1];
|
|
45
45
|
var gridRef = useRef(null);
|
|
46
46
|
var autoRowsPerPage = getRowsPerPage(gridRef);
|
|
47
47
|
useGridAutoRowsPerPage({
|
|
@@ -54,14 +54,14 @@ var CommonGridContainer = function (props) {
|
|
|
54
54
|
var modifiedPassDownProps = useEditReadAsColumn(passDownProps);
|
|
55
55
|
var filters = useMemo(function () { return getFilters(optimizeFilters); }, [optimizeFilters]);
|
|
56
56
|
var columns = modifiedPassDownProps.columnsDefinitions;
|
|
57
|
-
var
|
|
58
|
-
var
|
|
57
|
+
var _h = useModal(), openManageColumnForm = _h.onOpen, manageColumnFormVisible = _h.isOpen, onClose = _h.onClose;
|
|
58
|
+
var _j = useManageColumn({
|
|
59
59
|
columns: columns,
|
|
60
60
|
gridActions: gridActions,
|
|
61
61
|
gridSelectors: gridSelectors,
|
|
62
62
|
onClose: onClose
|
|
63
|
-
}), columnsConfigValues =
|
|
64
|
-
var
|
|
65
|
-
return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { ref: gridRef, children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm, onOpenPresetsModal: onOpenPresetsModal, selectedPresetName: selectedPresetName, withPresets: withPresets, gridName: gridName, withManageColumnButton: withManageColumnButton }) }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsxs(BottomWrapper, { children: [(processCheckedValues || !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) && (_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%", 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, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler, autoRowsPerPage: autoRowsPerPage })] })] })] }), _jsx(GridModals, { manageColumnFormVisible: manageColumnFormVisible, onCloseForm: onCloseForm, resetColumnConfig: resetColumnConfig, onConfirmForm: onConfirmForm, manageColumnsFormDefinitions: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true), gridName: gridName, gridActions: gridActions, gridSelectors: gridSelectors, onClosePresetsModal: onClosePresetsModal, isPresetsModalOpen: isPresetsModalOpen, selectedPresetName: selectedPresetName, setSelectedPresetName: setSelectedPresetName })] }));
|
|
63
|
+
}), columnsConfigValues = _j.columnsConfigValues, setColumnsConfigOptions = _j.setColumnsConfigOptions, onConfirmForm = _j.onConfirmForm, resetColumnConfig = _j.resetColumnConfig, handleDragEnd = _j.handleDragEnd, onCloseForm = _j.onCloseForm, displayColumnsDefinitions = _j.displayColumnsDefinitions, manageColumnsFormDefinitions = _j.manageColumnsFormDefinitions;
|
|
64
|
+
var _k = usePresetState(), isPresetsModalOpen = _k.isPresetsModalOpen, onClosePresetsModal = _k.onClosePresetsModal, onOpenPresetsModal = _k.onOpenPresetsModal, setSelectedPresetName = _k.setSelectedPresetName, selectedPresetName = _k.selectedPresetName;
|
|
65
|
+
return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { ref: gridRef, children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm, onOpenPresetsModal: onOpenPresetsModal, selectedPresetName: selectedPresetName, withPresets: withPresets, gridName: gridName, withManageColumnButton: withManageColumnButton }) }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsxs(BottomWrapper, { children: [(processCheckedValues || !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), withPagination && (_jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", 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, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler, autoRowsPerPage: autoRowsPerPage })] }))] })] }), _jsx(GridModals, { manageColumnFormVisible: manageColumnFormVisible, onCloseForm: onCloseForm, resetColumnConfig: resetColumnConfig, onConfirmForm: onConfirmForm, manageColumnsFormDefinitions: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true), gridName: gridName, gridActions: gridActions, gridSelectors: gridSelectors, onClosePresetsModal: onClosePresetsModal, isPresetsModalOpen: isPresetsModalOpen, selectedPresetName: selectedPresetName, setSelectedPresetName: setSelectedPresetName })] }));
|
|
66
66
|
};
|
|
67
67
|
export default CommonGridContainer;
|
|
@@ -34,8 +34,8 @@ var ControlButtons = function (_a) {
|
|
|
34
34
|
filters: filters
|
|
35
35
|
}), searchedValue = _c.searchedValue, translatedValue = _c.translatedValue, onChangeInputValue = _c.onChangeInputValue, onClear = _c.onClear, onResetFilters = _c.onResetFilters, onDisplayInput = _c.onDisplayInput, displayInput = _c.displayInput, isMobileInputView = _c.isMobileInputView, isMobile = _c.isMobile, filter = _c.filter;
|
|
36
36
|
useEffect(function () {
|
|
37
|
-
setDisplayManageColumnButton(!isMobileInputView);
|
|
38
|
-
}, [isMobileInputView, setDisplayManageColumnButton]);
|
|
37
|
+
setDisplayManageColumnButton(!isMobileInputView && !!withManageColumnButton);
|
|
38
|
+
}, [isMobileInputView, withManageColumnButton, setDisplayManageColumnButton]);
|
|
39
39
|
var filtersOn = !!filter && Object.values(filter).some(function (item) { var _a; return ((_a = item.value) === null || _a === void 0 ? void 0 : _a.value) !== '' && item.value !== ''; });
|
|
40
40
|
return (_jsxs(ControlButtonsContainer, { children: [_jsxs(Left, { children: [!hideControlButtons && (_jsxs(_Fragment, { children: [quickFilter && (_jsx(QuickFilter, { searchedValue: searchedValue, placeholderText: i18n._({
|
|
41
41
|
id: 'controlButtons.searchPlaceholder',
|