@mailstep/design-system 0.6.90-beta.11 → 0.6.90-beta.13
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/components/GridModals/index.js +1 -1
- package/ui/Blocks/CommonGrid/components/ManageColumnForm/ManageColumnForm.js +24 -2
- package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ActionRow.d.ts +2 -6
- package/ui/Blocks/CommonGrid/components/ManageColumnForm/components/ActionRow.js +6 -24
- package/ui/index.es.js +641 -637
- package/ui/index.umd.js +46 -46
package/package.json
CHANGED
|
@@ -24,5 +24,5 @@ export var GridModals = function (_a) {
|
|
|
24
24
|
gridName: gridName,
|
|
25
25
|
setGridPresets: setGridPresets
|
|
26
26
|
}), fileInputRef = _e.fileInputRef, handleImportPresets = _e.handleImportPresets, handleExportPresets = _e.handleExportPresets, handleImportButtonClick = _e.handleImportButtonClick;
|
|
27
|
-
return (_jsxs(_Fragment, { children: [
|
|
27
|
+
return (_jsxs(_Fragment, { children: [_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, isShown: manageColumnFormVisible, 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: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd }) }), _jsx(Modal, { isShown: isPresetsModalOpen, title: _jsx(Trans, { id: "dataGrid.presets.title", message: "Presets" }), onClose: onClosePresetsModal, width: "narrow", children: _jsx(PresetsModalBody, { onOpenCreatePresetModal: onOpenCreatePresetModal, gridPresets: gridPresets, handleSelectPreset: handleSelectPreset, handleOpenDeletePresetModal: handleOpenDeletePresetModal, selectedPresetName: selectedPresetName, handleExportPresets: handleExportPresets, handleImportPresets: handleImportPresets, handleImportButtonClick: handleImportButtonClick, fileInputRef: fileInputRef, filters: gridSelectors.filter }) }), _jsx(Modal, { isShown: isCreatePresetModalOpen, title: _jsx(Trans, { id: "dataGrid.createPreset.title", message: "Create preset" }), onCancel: handleCloseCreatePresetModal, onConfirm: handleCreatePreset, isConfirmDisabled: !presetName, width: "narrow", children: _jsx(Input, { type: "text", onChange: handleChangePresetName, value: presetName, label: _jsx(Trans, { id: "dataGrid.createPreset.title", message: "Preset name" }) }) }), _jsx(Modal, { isShown: isDeletePresetModalOpen, title: _jsx(Trans, { id: "dataGrid.deletePreset.title", message: "Delete preset" }), onCancel: onCloseDeletePresetModal, onConfirm: handleDeletePreset, isConfirmDisabled: !presetNameToDelete, width: "narrow", children: _jsxs(_Fragment, { children: [_jsx(Trans, { id: "dataGrid.deletePreset.confirm", message: "Are you sure you want to delete preset" }), " \"", presetNameToDelete, "\" ?"] }) })] }));
|
|
28
28
|
};
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
1
5
|
var __assign = (this && this.__assign) || function () {
|
|
2
6
|
__assign = Object.assign || function(t) {
|
|
3
7
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
@@ -11,11 +15,16 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
15
|
};
|
|
12
16
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
17
|
import { useCallback, useState } from 'react';
|
|
18
|
+
import { isObject } from 'lodash';
|
|
14
19
|
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
|
|
15
20
|
import { Input } from '../../../../Forms/Input/Input';
|
|
16
21
|
import { ActionRow } from './components/ActionRow';
|
|
17
22
|
import { i18n } from '@lingui/core';
|
|
18
|
-
import { x } from '@xstyled/styled-components';
|
|
23
|
+
import styled, { x, th } from '@xstyled/styled-components';
|
|
24
|
+
var RowLayout = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n justify-content: space-between;\n padding: 16px;\n height: 52px;\n background-color: white;\n border: 1px solid ", ";\n border-radius: 8px;\n margin-bottom: 15px;\n"], ["\n display: ", ";\n align-items: center;\n justify-content: space-between;\n padding: 16px;\n height: 52px;\n background-color: white;\n border: 1px solid ", ";\n border-radius: 8px;\n margin-bottom: 15px;\n"])), function (_a) {
|
|
25
|
+
var $isVisible = _a.$isVisible;
|
|
26
|
+
return ($isVisible ? 'flex' : 'none');
|
|
27
|
+
}, th.color('lightGray6'));
|
|
19
28
|
var ManageColumnForm = function (_a) {
|
|
20
29
|
var columns = _a.columns, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, handleDragEnd = _a.handleDragEnd;
|
|
21
30
|
var _b = useState(''), searchedValue = _b[0], setSearchedValue = _b[1];
|
|
@@ -26,7 +35,20 @@ var ManageColumnForm = function (_a) {
|
|
|
26
35
|
setSearchedValue('');
|
|
27
36
|
}, [setSearchedValue]);
|
|
28
37
|
return (_jsxs(x.div, { children: [_jsx(Input, { icon: "search", type: "text", value: searchedValue, placeholder: i18n._({ id: 'manageColumn.searchPlaceholder', message: 'Find column...' }), onChange: onChangeInputValue, onClear: clear, variant: "gray" }), _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "vertical", isCombineEnabled: false, ignoreContainerClipping: false, isDropDisabled: !!searchedValue, children: function (droppableProvided) { return (_jsx(x.div, __assign({ h: "400px", overflowY: "scroll", mt: "20px", ref: droppableProvided.innerRef }, droppableProvided.droppableProps, { children: columns === null || columns === void 0 ? void 0 : columns.map(function (column, index) {
|
|
29
|
-
|
|
38
|
+
var _a, _b, _c, _d;
|
|
39
|
+
var translatedValue = (isObject(column === null || column === void 0 ? void 0 : column.title) &&
|
|
40
|
+
'props' in column.title &&
|
|
41
|
+
((_a = column.title) === null || _a === void 0 ? void 0 : _a.props) &&
|
|
42
|
+
i18n._({ id: (_c = (_b = column.title) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.id, message: (_d = column.title) === null || _d === void 0 ? void 0 : _d.props.message })) ||
|
|
43
|
+
(column === null || column === void 0 ? void 0 : column.title);
|
|
44
|
+
var isVisible = translatedValue &&
|
|
45
|
+
translatedValue.toLocaleLowerCase().includes(searchedValue.toLocaleLowerCase()) &&
|
|
46
|
+
!column.alwaysOn;
|
|
47
|
+
return (_jsx(Draggable, { draggableId: column.name, index: index, isDragDisabled: !!searchedValue, children: function (_a) {
|
|
48
|
+
var innerRef = _a.innerRef, draggableProps = _a.draggableProps, dragHandleProps = _a.dragHandleProps;
|
|
49
|
+
return (_jsx(RowLayout, __assign({ "$isVisible": isVisible }, draggableProps, { ref: innerRef }, dragHandleProps, { children: _jsx(ActionRow, { column: column, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, translatedValue: translatedValue }, index) })));
|
|
50
|
+
} }, column.name));
|
|
30
51
|
}) }))); } }) })] }));
|
|
31
52
|
};
|
|
32
53
|
export default ManageColumnForm;
|
|
54
|
+
var templateObject_1;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { DraggableProps, DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
|
|
3
2
|
import { ColumnConfig, ColumnDefinition } from '../../../types';
|
|
4
3
|
type ActionRowProps = {
|
|
5
4
|
column: ColumnDefinition;
|
|
@@ -7,10 +6,7 @@ type ActionRowProps = {
|
|
|
7
6
|
setColumnsConfigOptions: (value: React.SetStateAction<{
|
|
8
7
|
[x: string]: ColumnConfig | {};
|
|
9
8
|
}>) => void;
|
|
10
|
-
|
|
11
|
-
innerRef?: Function;
|
|
12
|
-
draggableProps?: DraggableProps | any;
|
|
13
|
-
dragHandleProps?: DraggableProvidedDragHandleProps | null;
|
|
9
|
+
translatedValue: string;
|
|
14
10
|
};
|
|
15
|
-
export declare const ActionRow: ({ column, columnsConfigValues, setColumnsConfigOptions,
|
|
11
|
+
export declare const ActionRow: ({ column, columnsConfigValues, setColumnsConfigOptions, translatedValue }: ActionRowProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
12
|
export {};
|
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
-
return cooked;
|
|
4
|
-
};
|
|
5
1
|
var __assign = (this && this.__assign) || function () {
|
|
6
2
|
__assign = Object.assign || function(t) {
|
|
7
3
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
@@ -13,29 +9,16 @@ var __assign = (this && this.__assign) || function () {
|
|
|
13
9
|
};
|
|
14
10
|
return __assign.apply(this, arguments);
|
|
15
11
|
};
|
|
16
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
17
13
|
import { useCallback, useState } from 'react';
|
|
18
|
-
import { isObject } from 'lodash';
|
|
19
|
-
import styled from 'styled-components';
|
|
20
14
|
import { Group } from '../../../../../Elements/Icon/icons/Group';
|
|
21
15
|
import Toggle from '../../../../../Elements/Toggle/Toggle';
|
|
22
16
|
import { H6 } from '../../../../../Elements/Typography/Typography';
|
|
23
|
-
import {
|
|
24
|
-
import { x, th } from '@xstyled/styled-components';
|
|
25
|
-
var RowLayout = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: ", ";\n align-items: center;\n justify-content: space-between;\n padding: 16px;\n height: 52px;\n background-color: white;\n border: 1px solid ", ";\n border-radius: 8px;\n margin-bottom: 15px;\n"], ["\n display: ", ";\n align-items: center;\n justify-content: space-between;\n padding: 16px;\n height: 52px;\n background-color: white;\n border: 1px solid ", ";\n border-radius: 8px;\n margin-bottom: 15px;\n"])), function (_a) {
|
|
26
|
-
var $isVisible = _a.$isVisible;
|
|
27
|
-
return ($isVisible ? 'flex' : 'none');
|
|
28
|
-
}, th.color('lightGray6'));
|
|
17
|
+
import { x } from '@xstyled/styled-components';
|
|
29
18
|
export var ActionRow = function (_a) {
|
|
30
|
-
var _b
|
|
31
|
-
var column = _a.column, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions,
|
|
32
|
-
var
|
|
33
|
-
var translatedValue = (isObject(column === null || column === void 0 ? void 0 : column.title) &&
|
|
34
|
-
'props' in column.title &&
|
|
35
|
-
((_c = column.title) === null || _c === void 0 ? void 0 : _c.props) &&
|
|
36
|
-
i18n._({ id: (_e = (_d = column.title) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e.id, message: (_f = column.title) === null || _f === void 0 ? void 0 : _f.props.message })) ||
|
|
37
|
-
(column === null || column === void 0 ? void 0 : column.title);
|
|
38
|
-
var isVisible = translatedValue && translatedValue.toLocaleLowerCase().includes(searchedValue.toLocaleLowerCase()) && !column.alwaysOn;
|
|
19
|
+
var _b;
|
|
20
|
+
var column = _a.column, columnsConfigValues = _a.columnsConfigValues, setColumnsConfigOptions = _a.setColumnsConfigOptions, translatedValue = _a.translatedValue;
|
|
21
|
+
var _c = useState((_b = columnsConfigValues === null || columnsConfigValues === void 0 ? void 0 : columnsConfigValues.includes(column.name)) !== null && _b !== void 0 ? _b : false), isSelected = _c[0], setIsSelected = _c[1];
|
|
39
22
|
var handleToggleChange = useCallback(function () {
|
|
40
23
|
setColumnsConfigOptions(function (prevOptions) {
|
|
41
24
|
var _a;
|
|
@@ -43,6 +26,5 @@ export var ActionRow = function (_a) {
|
|
|
43
26
|
});
|
|
44
27
|
setIsSelected(!isSelected);
|
|
45
28
|
}, [setColumnsConfigOptions, isSelected, column.name]);
|
|
46
|
-
return (_jsxs(
|
|
29
|
+
return (_jsxs(_Fragment, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsx(x.div, { w: "28px", children: _jsx(Toggle, { name: "", variant: "grid", onChange: handleToggleChange, spaceAround: false, checked: isSelected }) }), _jsx(H6, { variant: "medium", ml: "8px", children: translatedValue })] }), _jsx(Group, {})] }));
|
|
47
30
|
};
|
|
48
|
-
var templateObject_1;
|