@mailstep/design-system 0.8.10 → 0.8.11-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.js +1 -1
- package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.d.ts +1 -1
- package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.js +2 -2
- package/ui/Blocks/CommonGrid/hooks/useManageColumn.js +1 -1
- package/ui/Blocks/CommonGrid/hooks/useQuickFilter.d.ts +2 -2
- package/ui/Blocks/CommonGrid/hooks/useQuickFilter.js +2 -2
- package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js +1 -1
- package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js +6 -0
- package/ui/Blocks/CommonGrid/types.d.ts +1 -0
- package/ui/Blocks/CommonGrid/utils/index.js +2 -0
- package/ui/index.es.js +13040 -13671
- package/ui/index.umd.js +438 -438
package/package.json
CHANGED
|
@@ -74,6 +74,6 @@ var CommonGridContainer = function (props) {
|
|
|
74
74
|
allowSortingOnlyUnderTotalRows: allowSortingOnlyUnderTotalRows,
|
|
75
75
|
totalRowsCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount
|
|
76
76
|
}), isSortTerminatedAppeal = _l.isSortTerminatedAppeal, isSortTerminated = _l.isSortTerminated;
|
|
77
|
-
return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { ref: gridRef, children: [_jsxs(CommonGridWrap, { withPagination: withPagination, children: [withButtonStrip && (_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extendedExtraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter,
|
|
77
|
+
return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { ref: gridRef, children: [_jsxs(CommonGridWrap, { withPagination: withPagination, children: [withButtonStrip && (_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extendedExtraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, columns: columns, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm, onOpenPresetsModal: onOpenPresetsModal, selectedPresetName: selectedPresetName, withPresets: withPresets, gridName: gridName, withManageColumnButton: withManageColumnButton }) }) })), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { withButtonStrip: withButtonStrip, hasGroupsOrFilters: hasGroupsOrFilters, filters: filters, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasFilters: hasFilters, hasGroups: hasGroups, isSortTerminated: isSortTerminated, hasColouredRows: true }))] }), _jsxs(BottomWrapper, { withPagination: withPagination, 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, actionOptions: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [_jsx(GridInfo, { isSortTerminatedAppeal: isSortTerminatedAppeal, isSortTerminated: isSortTerminated }), withPagination && (_jsxs(x.div, { display: "flex", alignItems: "center", className: "paginatorWrapper", 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 })] }));
|
|
78
78
|
};
|
|
79
79
|
export default CommonGridContainer;
|
|
@@ -6,7 +6,7 @@ type Props = {
|
|
|
6
6
|
gridActions: GridActionsType;
|
|
7
7
|
gridSelectors: GridSelectorsType;
|
|
8
8
|
quickFilter?: CommonGridProps['quickFilter'];
|
|
9
|
-
|
|
9
|
+
columns?: Array<ColumnDefinition<string>>;
|
|
10
10
|
filters?: FiltersConfig;
|
|
11
11
|
hideControlButtons?: boolean;
|
|
12
12
|
displayManageColumnButton?: boolean;
|
|
@@ -25,12 +25,12 @@ import { Trans } from '@lingui/react';
|
|
|
25
25
|
import { x } from '@xstyled/styled-components';
|
|
26
26
|
import { ControlButtonsContainer, Left, Right, StyledColumnButton } from './styles';
|
|
27
27
|
var ControlButtons = function (_a) {
|
|
28
|
-
var extraControlButtons = _a.extraControlButtons, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, _b = _a.quickFilter, quickFilter = _b === void 0 ? '' : _b,
|
|
28
|
+
var extraControlButtons = _a.extraControlButtons, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, _b = _a.quickFilter, quickFilter = _b === void 0 ? '' : _b, columns = _a.columns, filters = _a.filters, hideControlButtons = _a.hideControlButtons, displayManageColumnButton = _a.displayManageColumnButton, openManageColumnForm = _a.openManageColumnForm, setDisplayManageColumnButton = _a.setDisplayManageColumnButton, onOpenPresetsModal = _a.onOpenPresetsModal, gridName = _a.gridName, selectedPresetName = _a.selectedPresetName, withPresets = _a.withPresets, withManageColumnButton = _a.withManageColumnButton;
|
|
29
29
|
var _c = useQuickFilter({
|
|
30
30
|
gridActions: gridActions,
|
|
31
31
|
gridSelectors: gridSelectors,
|
|
32
32
|
quickFilter: quickFilter,
|
|
33
|
-
|
|
33
|
+
columns: columns,
|
|
34
34
|
filters: filters
|
|
35
35
|
}), searchedValue = _c.searchedValue, translatedValue = _c.translatedValue, onChangeInputValue = _c.onChangeInputValue, onClear = _c.onClear, onClearSettings = _c.onClearSettings, onDisplayInput = _c.onDisplayInput, displayInput = _c.displayInput, isMobileInputView = _c.isMobileInputView, isMobile = _c.isMobile, filter = _c.filter;
|
|
36
36
|
useEffect(function () {
|
|
@@ -60,7 +60,7 @@ var useManageColumn = function (_a) {
|
|
|
60
60
|
setColumnsConfigOptions(columnConfig || {});
|
|
61
61
|
}, [columnsOrderValue, onClose]);
|
|
62
62
|
var getSortedColumns = useCallback(function (orderValues, isManageModal) {
|
|
63
|
-
var list =
|
|
63
|
+
var list = columns.filter(function (column) { return isManageModal ? !column.alwaysOff : isColumnOn(column, columnsConfigOptions); });
|
|
64
64
|
var sortFunction = function (col1, col2) {
|
|
65
65
|
var i = (orderValues || []).indexOf(col1.name);
|
|
66
66
|
var j = (orderValues || []).indexOf(col2.name);
|
|
@@ -6,10 +6,10 @@ type Props = {
|
|
|
6
6
|
gridSelectors: GridSelectorsType;
|
|
7
7
|
quickFilter?: CommonGridProps['quickFilter'];
|
|
8
8
|
filter?: CommonGridProps['gridSelectors']['filter'];
|
|
9
|
-
|
|
9
|
+
columns?: ColumnDefinition<string>[];
|
|
10
10
|
filters?: FiltersConfig;
|
|
11
11
|
};
|
|
12
|
-
declare const useQuickFilter: ({ gridActions, gridSelectors, quickFilter,
|
|
12
|
+
declare const useQuickFilter: ({ gridActions, gridSelectors, quickFilter, columns, filters }: Props) => {
|
|
13
13
|
searchedValue: string;
|
|
14
14
|
translatedValue: import('react').ReactNode;
|
|
15
15
|
onChangeInputValue: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
@@ -12,7 +12,7 @@ var defaultVoidFunction = function () {
|
|
|
12
12
|
};
|
|
13
13
|
var useQuickFilter = function (_a) {
|
|
14
14
|
var _b, _c;
|
|
15
|
-
var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, quickFilter = _a.quickFilter,
|
|
15
|
+
var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, quickFilter = _a.quickFilter, columns = _a.columns, filters = _a.filters;
|
|
16
16
|
var _d = gridActions.addFilter, addFilter = _d === void 0 ? defaultVoidFunction : _d, _e = gridActions.clearSettings, clearSettings = _e === void 0 ? defaultVoidFunction : _e;
|
|
17
17
|
var filter = gridSelectors.filter;
|
|
18
18
|
var isMobile = useCheckDeviceWidth().isMobile;
|
|
@@ -20,7 +20,7 @@ var useQuickFilter = function (_a) {
|
|
|
20
20
|
var _g = useState(false), displayInput = _g[0], setDisplayInput = _g[1];
|
|
21
21
|
var handleAddFilter = useAddFilter(addFilter);
|
|
22
22
|
var quickFilterValues = quickFilter ? (_b = filter === null || filter === void 0 ? void 0 : filter[quickFilter]) === null || _b === void 0 ? void 0 : _b.value : undefined;
|
|
23
|
-
var searchedColumnsDefinitions = (
|
|
23
|
+
var searchedColumnsDefinitions = (columns === null || columns === void 0 ? void 0 : columns.find(function (item) { return item.name === quickFilter; })) || null;
|
|
24
24
|
var filterType = createFilterType(searchedColumnsDefinitions || {});
|
|
25
25
|
var filtersDefaultComparator = ((_c = filters === null || filters === void 0 ? void 0 : filters[filterType].defaultExtraProps) === null || _c === void 0 ? void 0 : _c.defaultComparator) || 'eq';
|
|
26
26
|
var searchComparator = (quickFilterValues && quickFilterValues.comparator) || filtersDefaultComparator;
|
|
@@ -47,7 +47,7 @@ export default {
|
|
|
47
47
|
title: 'Blocks/CommonGrid',
|
|
48
48
|
decorators: [withRedux]
|
|
49
49
|
};
|
|
50
|
-
export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "
|
|
50
|
+
export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "alwaysOffColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
|
|
51
51
|
ComplexWithPaginationAndRedux.story = {
|
|
52
52
|
name: 'Complex, with pagination and redux'
|
|
53
53
|
};
|
|
@@ -26,6 +26,8 @@ export var isColumnOn = function (column, columnConfig) {
|
|
|
26
26
|
var _a;
|
|
27
27
|
if (column.alwaysOn)
|
|
28
28
|
return true;
|
|
29
|
+
if (column.alwaysOff)
|
|
30
|
+
return false;
|
|
29
31
|
var isHidden = (_a = columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig[column.name]) === null || _a === void 0 ? void 0 : _a.isHidden;
|
|
30
32
|
if (typeof isHidden === 'boolean')
|
|
31
33
|
return !isHidden; // isHidden is defined/stored => use user value
|