@mailstep/design-system 0.6.15 → 0.6.17
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 +7 -6
- package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.d.ts +3 -2
- package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.js +14 -48
- package/ui/Blocks/CommonGrid/components/QuickFilter/QuickFilter.d.ts +5 -1
- package/ui/Blocks/CommonGrid/components/QuickFilter/QuickFilter.js +19 -3
- package/ui/Blocks/CommonGrid/hooks/useQuickFilter.d.ts +27 -0
- package/ui/Blocks/CommonGrid/hooks/useQuickFilter.js +87 -0
- package/ui/Blocks/CommonGrid/styles.js +1 -1
- package/ui/Elements/ErrorMessage/ErrorMessage.js +4 -5
- package/ui/Elements/Label/Label.d.ts +1 -3
- package/ui/Elements/Label/Label.js +1 -4
- package/ui/Elements/Select/themes/selectStyles.js +1 -1
- package/ui/Forms/Input/Input.js +2 -2
- package/ui/Forms/Input/styles.d.ts +4 -0
- package/ui/Forms/Input/styles.js +18 -14
- package/ui/Forms/TextArea/TextArea.js +1 -1
- package/ui/index.es.js +5045 -4978
- package/ui/index.umd.js +311 -314
- package/ui/utils/CheckDeviceWidth/checkDeviceWidth.d.ts +3 -0
- package/ui/utils/CheckDeviceWidth/checkDeviceWidth.js +17 -0
package/package.json
CHANGED
|
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
};
|
|
23
23
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
24
|
import useGetGridHeight from './hooks/useGetGridHeight';
|
|
25
|
-
import { useEffect, useMemo } from 'react';
|
|
25
|
+
import { useEffect, useMemo, useState } from 'react';
|
|
26
26
|
import { getFilters, GRID_MIN_ROWS, rowHeight } from './utils';
|
|
27
27
|
import useEditReadAsColumn from './hooks/useEditReadAsColumn';
|
|
28
28
|
import { useModal } from '../Modal/hooks/useModal';
|
|
@@ -42,7 +42,8 @@ import { Settings2 } from '../../Elements/Icon/icons/Settings2';
|
|
|
42
42
|
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, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler"]);
|
|
44
44
|
var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
|
|
45
|
-
var _b =
|
|
45
|
+
var _b = useState(false), displayManageColumnButton = _b[0], setDisplayManageColumnButton = _b[1];
|
|
46
|
+
var _c = useGetGridHeight(), gridHeight = _c.gridHeight, gridRef = _c.gridRef, paginationRef = _c.paginationRef;
|
|
46
47
|
useEffect(function () {
|
|
47
48
|
var _a;
|
|
48
49
|
if (!queryRowsParam && gridHeight && gridHeight > 0) {
|
|
@@ -54,13 +55,13 @@ var StyledCommonGrid = function (props) {
|
|
|
54
55
|
var modifiedPassDownProps = useEditReadAsColumn(passDownProps);
|
|
55
56
|
var filters = useMemo(function () { return getFilters(optimizeFilters); }, [optimizeFilters]);
|
|
56
57
|
var columns = modifiedPassDownProps.columnsDefinitions;
|
|
57
|
-
var
|
|
58
|
-
var
|
|
58
|
+
var _d = useModal(), openManageColumnForm = _d.onOpen, manageColumnFormVisible = _d.isOpen, onClose = _d.onClose;
|
|
59
|
+
var _e = useManageColumn({
|
|
59
60
|
columns: columns,
|
|
60
61
|
gridActions: gridActions,
|
|
61
62
|
gridSelectors: gridSelectors,
|
|
62
63
|
onClose: onClose,
|
|
63
|
-
}), columnsConfigValues =
|
|
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, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters })), _jsx(StyledColumnButton, { type: "button", variant: "ghost", appearance: "primary", iconLeft: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!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, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, 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: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true) }) }))] }));
|
|
64
|
+
}), columnsConfigValues = _e.columnsConfigValues, setColumnsConfigOptions = _e.setColumnsConfigOptions, onConfirmForm = _e.onConfirmForm, resetColumnConfig = _e.resetColumnConfig, handleDragEnd = _e.handleDragEnd, onCloseForm = _e.onCloseForm, displayColumnsDefinitions = _e.displayColumnsDefinitions, manageColumnsFormDefinitions = _e.manageColumnsFormDefinitions;
|
|
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, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton })), displayManageColumnButton && (_jsx(StyledColumnButton, { type: "button", variant: "ghost", appearance: "primary", iconLeft: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) }))] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!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, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, 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: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true) }) }))] }));
|
|
65
66
|
};
|
|
66
67
|
export default StyledCommonGrid;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CommonGridProps, GridActionsType, GridSelectorsType, ColumnDefinition, FiltersConfig } from '../../types';
|
|
2
|
+
import { Dispatch } from 'react';
|
|
2
3
|
export declare const Row: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
3
4
|
type Props = {
|
|
4
|
-
columns?: CommonGridProps['columnsDefinitions'];
|
|
5
5
|
extraControlButtons: CommonGridProps['extraControlButtons'];
|
|
6
6
|
eshopSelect: CommonGridProps['extraControlButtons'];
|
|
7
7
|
gridActions: GridActionsType;
|
|
@@ -9,6 +9,7 @@ type Props = {
|
|
|
9
9
|
quickFilter?: CommonGridProps['quickFilter'];
|
|
10
10
|
displayColumnsDefinitions?: ColumnDefinition<string>[];
|
|
11
11
|
filters?: FiltersConfig;
|
|
12
|
+
setDisplayManageColumnButton: Dispatch<React.SetStateAction<boolean>>;
|
|
12
13
|
};
|
|
13
|
-
declare const ControlButtons: ({ extraControlButtons, eshopSelect, gridActions, gridSelectors, quickFilter, displayColumnsDefinitions, filters, }: Props) => JSX.Element;
|
|
14
|
+
declare const ControlButtons: ({ extraControlButtons, eshopSelect, gridActions, gridSelectors, quickFilter, displayColumnsDefinitions, filters, setDisplayManageColumnButton, }: Props) => JSX.Element;
|
|
14
15
|
export default ControlButtons;
|
|
@@ -3,68 +3,34 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
5
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
|
-
import { useCallback, useEffect, useState } from 'react';
|
|
7
6
|
import styled, { x } from '@xstyled/styled-components';
|
|
8
7
|
import { Trans } from '@lingui/react';
|
|
9
8
|
import ExtraControlButtons from '../ExtraControlButtons';
|
|
10
9
|
import { ExtraControlButtonPosition, } from '../../types';
|
|
11
10
|
import Button from '../../../../Elements/Button/Button';
|
|
12
11
|
import { i18n } from '@lingui/core';
|
|
13
|
-
import { useAddFilter } from '../../hooks/useAddFilter';
|
|
14
|
-
import { createFilterType } from '../../utils';
|
|
15
|
-
import { isObject } from 'lodash';
|
|
16
12
|
import QuickFilter from '../QuickFilter';
|
|
13
|
+
import useQuickFilter from '../../hooks/useQuickFilter';
|
|
14
|
+
import { useEffect } from 'react';
|
|
17
15
|
export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n position: sticky;\n left: 20px;\n"], ["\n display: flex;\n position: sticky;\n left: 20px;\n"])));
|
|
18
|
-
var defaultVoidFunction = function () {
|
|
19
|
-
var args = [];
|
|
20
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
|
21
|
-
args[_i] = arguments[_i];
|
|
22
|
-
}
|
|
23
|
-
return null;
|
|
24
|
-
};
|
|
25
16
|
var ControlButtons = function (_a) {
|
|
26
|
-
var
|
|
27
|
-
var
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
var filterType = createFilterType(searchedColumnsDefinitions || {});
|
|
35
|
-
var filtersDefaultComparator = ((_c = filters === null || filters === void 0 ? void 0 : filters[filterType].defaultExtraProps) === null || _c === void 0 ? void 0 : _c.defaultComparator) || 'eq';
|
|
36
|
-
var searchComparator = (quickFilterValues && quickFilterValues.comparator) || filtersDefaultComparator;
|
|
37
|
-
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 !== ''; });
|
|
17
|
+
var extraControlButtons = _a.extraControlButtons, eshopSelect = _a.eshopSelect, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, _b = _a.quickFilter, quickFilter = _b === void 0 ? '' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters, setDisplayManageColumnButton = _a.setDisplayManageColumnButton;
|
|
18
|
+
var _c = useQuickFilter({
|
|
19
|
+
gridActions: gridActions,
|
|
20
|
+
gridSelectors: gridSelectors,
|
|
21
|
+
quickFilter: quickFilter,
|
|
22
|
+
displayColumnsDefinitions: displayColumnsDefinitions,
|
|
23
|
+
filters: filters,
|
|
24
|
+
}), searchedValue = _c.searchedValue, translatedValue = _c.translatedValue, onChangeInputValue = _c.onChangeInputValue, onClear = _c.onClear, onResetFilters = _c.onResetFilters, onDisplayInput = _c.onDisplayInput, displayInput = _c.displayInput, isMobileInputView = _c.isMobileInputView, filter = _c.filter;
|
|
38
25
|
useEffect(function () {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
else {
|
|
43
|
-
setSearchedValue('');
|
|
44
|
-
}
|
|
45
|
-
}, [quickFilterValues, quickFilter]);
|
|
46
|
-
var onChangeInputValue = useCallback(function (e) {
|
|
47
|
-
setSearchedValue(e.target.value);
|
|
48
|
-
var value = {
|
|
49
|
-
comparator: searchComparator,
|
|
50
|
-
value: e.target.value,
|
|
51
|
-
};
|
|
52
|
-
searchedColumnsDefinitions && handleAddFilter(value, searchedColumnsDefinitions);
|
|
53
|
-
}, [setSearchedValue, searchComparator, handleAddFilter, searchedColumnsDefinitions]);
|
|
54
|
-
var onResetFilters = useCallback(function () {
|
|
55
|
-
resetFilters === null || resetFilters === void 0 ? void 0 : resetFilters();
|
|
56
|
-
setSearchedValue === null || setSearchedValue === void 0 ? void 0 : setSearchedValue('');
|
|
57
|
-
}, []);
|
|
58
|
-
var translatedValue = searchedColumnsDefinitions &&
|
|
59
|
-
isObject(searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title) &&
|
|
60
|
-
'props' in (searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title) &&
|
|
61
|
-
((_d = searchedColumnsDefinitions.title) === null || _d === void 0 ? void 0 : _d.props) &&
|
|
62
|
-
i18n._({ id: (_f = (_e = searchedColumnsDefinitions.title) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.id, message: (_g = searchedColumnsDefinitions.title) === null || _g === void 0 ? void 0 : _g.props.message });
|
|
26
|
+
setDisplayManageColumnButton(!isMobileInputView);
|
|
27
|
+
}, [isMobileInputView, setDisplayManageColumnButton]);
|
|
28
|
+
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 !== ''; });
|
|
63
29
|
return (_jsxs(Row, { children: [quickFilter && (_jsx(QuickFilter, { searchedValue: searchedValue, placeholderText: i18n._({
|
|
64
30
|
id: 'controlButtons.searchPlaceholder',
|
|
65
31
|
message: "Search ".concat(translatedValue, " ..."),
|
|
66
32
|
values: { translatedValue: translatedValue },
|
|
67
|
-
}), onChange: onChangeInputValue })), eshopSelect && (_jsx(x.div, { children: _jsx(ExtraControlButtons, { extraControlButtons: eshopSelect, targetPosition: ExtraControlButtonPosition.TopRight }) })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: onResetFilters, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] }));
|
|
33
|
+
}), onChange: onChangeInputValue, onClear: onClear, onClick: onDisplayInput, displayInput: displayInput, isMobileInputView: isMobileInputView })), eshopSelect && (_jsx(x.div, { children: _jsx(ExtraControlButtons, { extraControlButtons: eshopSelect, targetPosition: ExtraControlButtonPosition.TopRight }) })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: onResetFilters, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] }));
|
|
68
34
|
};
|
|
69
35
|
export default ControlButtons;
|
|
70
36
|
var templateObject_1;
|
|
@@ -3,6 +3,10 @@ type QuickFilterProps = {
|
|
|
3
3
|
searchedValue: string;
|
|
4
4
|
placeholderText?: string;
|
|
5
5
|
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
6
|
+
onClick: () => void;
|
|
7
|
+
displayInput: boolean;
|
|
8
|
+
onClear: () => void;
|
|
9
|
+
isMobileInputView?: boolean;
|
|
6
10
|
};
|
|
7
|
-
declare const QuickFilter: ({ searchedValue, placeholderText, onChange }: QuickFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
declare const QuickFilter: ({ searchedValue, placeholderText, onChange, onClick, displayInput, onClear, isMobileInputView, }: QuickFilterProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
12
|
export default QuickFilter;
|
|
@@ -1,8 +1,24 @@
|
|
|
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
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
6
|
import Input from '../../../../Forms/Input';
|
|
3
|
-
import { x } from '@xstyled/styled-components';
|
|
7
|
+
import styled, { x } from '@xstyled/styled-components';
|
|
8
|
+
import Button from '../../../../Elements/Button';
|
|
9
|
+
var StyledInput = styled(Input)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: ", ";\n z-index: ", ";\n width: ", ";\n"], ["\n position: ", ";\n z-index: ", ";\n width: ", ";\n"])), function (_a) {
|
|
10
|
+
var isMobileInputView = _a.isMobileInputView;
|
|
11
|
+
return (isMobileInputView ? 'absolute' : 'relative');
|
|
12
|
+
}, function (_a) {
|
|
13
|
+
var isMobileInputView = _a.isMobileInputView;
|
|
14
|
+
return (isMobileInputView ? '3' : '1');
|
|
15
|
+
}, function (_a) {
|
|
16
|
+
var isMobileInputView = _a.isMobileInputView;
|
|
17
|
+
return (isMobileInputView ? '90vw' : 'auto');
|
|
18
|
+
});
|
|
4
19
|
var QuickFilter = function (_a) {
|
|
5
|
-
var searchedValue = _a.searchedValue, placeholderText = _a.placeholderText, onChange = _a.onChange;
|
|
6
|
-
return (_jsx(x.div, { mr: "12px", children: _jsx(
|
|
20
|
+
var searchedValue = _a.searchedValue, placeholderText = _a.placeholderText, onChange = _a.onChange, onClick = _a.onClick, displayInput = _a.displayInput, onClear = _a.onClear, isMobileInputView = _a.isMobileInputView;
|
|
21
|
+
return (_jsx(x.div, { mr: "12px", children: displayInput ? (_jsx(StyledInput, { icon: "search", type: "text", value: searchedValue, placeholder: placeholderText, onChange: onChange, variant: "gray", onClear: onClear, isMobileInputView: isMobileInputView })) : (_jsx(Button, { variant: "icon", appearance: "secondary", icon: "search", onClick: onClick })) }));
|
|
7
22
|
};
|
|
8
23
|
export default QuickFilter;
|
|
24
|
+
var templateObject_1;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { ChangeEvent } from 'react';
|
|
2
|
+
import { ColumnDefinition, CommonGridProps, FiltersConfig, GridActionsType, GridSelectorsType } from '../types';
|
|
3
|
+
type Props = {
|
|
4
|
+
gridActions: GridActionsType;
|
|
5
|
+
gridSelectors: GridSelectorsType;
|
|
6
|
+
quickFilter?: CommonGridProps['quickFilter'];
|
|
7
|
+
filter?: CommonGridProps['gridSelectors']['filter'];
|
|
8
|
+
displayColumnsDefinitions?: ColumnDefinition<string>[];
|
|
9
|
+
filters?: FiltersConfig;
|
|
10
|
+
};
|
|
11
|
+
declare const useQuickFilter: ({ gridActions, gridSelectors, quickFilter, displayColumnsDefinitions, filters }: Props) => {
|
|
12
|
+
searchedValue: string;
|
|
13
|
+
translatedValue: any;
|
|
14
|
+
onChangeInputValue: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
15
|
+
onResetFilters: () => void;
|
|
16
|
+
onDisplayInput: () => void;
|
|
17
|
+
displayInput: boolean;
|
|
18
|
+
onClear: () => void;
|
|
19
|
+
isMobileInputView: boolean;
|
|
20
|
+
filter: {
|
|
21
|
+
[column: string]: {
|
|
22
|
+
value: any;
|
|
23
|
+
filterProps: import("../types").FilterProps;
|
|
24
|
+
};
|
|
25
|
+
} | undefined;
|
|
26
|
+
};
|
|
27
|
+
export default useQuickFilter;
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { useCallback, useEffect, useState } from 'react';
|
|
2
|
+
import { useCheckDeviceWidth } from '../../../utils/CheckDeviceWidth/checkDeviceWidth';
|
|
3
|
+
import { createFilterType } from '../utils';
|
|
4
|
+
import { useAddFilter } from './useAddFilter';
|
|
5
|
+
import { isObject } from 'lodash';
|
|
6
|
+
import { i18n } from '@lingui/core';
|
|
7
|
+
var defaultVoidFunction = function () {
|
|
8
|
+
var args = [];
|
|
9
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
10
|
+
args[_i] = arguments[_i];
|
|
11
|
+
}
|
|
12
|
+
return null;
|
|
13
|
+
};
|
|
14
|
+
var useQuickFilter = function (_a) {
|
|
15
|
+
var _b, _c, _d, _e, _f, _g;
|
|
16
|
+
var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, quickFilter = _a.quickFilter, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters;
|
|
17
|
+
var resetFilters = gridActions.resetFilters, _h = gridActions.addFilter, addFilter = _h === void 0 ? defaultVoidFunction : _h;
|
|
18
|
+
var filter = gridSelectors.filter;
|
|
19
|
+
var isMobile = useCheckDeviceWidth().isMobile;
|
|
20
|
+
var _j = useState(''), searchedValue = _j[0], setSearchedValue = _j[1];
|
|
21
|
+
var _k = useState(false), displayInput = _k[0], setDisplayInput = _k[1];
|
|
22
|
+
var handleAddFilter = useAddFilter(addFilter);
|
|
23
|
+
var quickFilterValues = quickFilter ? (_b = filter === null || filter === void 0 ? void 0 : filter[quickFilter]) === null || _b === void 0 ? void 0 : _b.value : undefined;
|
|
24
|
+
var searchedColumnsDefinitions = (displayColumnsDefinitions === null || displayColumnsDefinitions === void 0 ? void 0 : displayColumnsDefinitions.find(function (item) { return item.name === quickFilter; })) || null;
|
|
25
|
+
var filterType = createFilterType(searchedColumnsDefinitions || {});
|
|
26
|
+
var filtersDefaultComparator = ((_c = filters === null || filters === void 0 ? void 0 : filters[filterType].defaultExtraProps) === null || _c === void 0 ? void 0 : _c.defaultComparator) || 'eq';
|
|
27
|
+
var searchComparator = (quickFilterValues && quickFilterValues.comparator) || filtersDefaultComparator;
|
|
28
|
+
var isMobileInputView = isMobile && displayInput;
|
|
29
|
+
useEffect(function () {
|
|
30
|
+
if (quickFilterValues) {
|
|
31
|
+
setSearchedValue(quickFilterValues.value);
|
|
32
|
+
}
|
|
33
|
+
else {
|
|
34
|
+
setSearchedValue('');
|
|
35
|
+
}
|
|
36
|
+
}, [quickFilterValues, quickFilter, setSearchedValue]);
|
|
37
|
+
useEffect(function () {
|
|
38
|
+
if (isMobile) {
|
|
39
|
+
setDisplayInput(false);
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
setDisplayInput(true);
|
|
43
|
+
}
|
|
44
|
+
}, [isMobile]);
|
|
45
|
+
var onChangeInputValue = useCallback(function (e) {
|
|
46
|
+
setSearchedValue(e.target.value);
|
|
47
|
+
var value = {
|
|
48
|
+
comparator: searchComparator,
|
|
49
|
+
value: e.target.value,
|
|
50
|
+
};
|
|
51
|
+
searchedColumnsDefinitions && handleAddFilter(value, searchedColumnsDefinitions);
|
|
52
|
+
}, [setSearchedValue, searchComparator, handleAddFilter, searchedColumnsDefinitions]);
|
|
53
|
+
var onClear = useCallback(function () {
|
|
54
|
+
setSearchedValue('');
|
|
55
|
+
onChangeInputValue({ target: { value: '' } });
|
|
56
|
+
if (isMobile) {
|
|
57
|
+
setDisplayInput(false);
|
|
58
|
+
}
|
|
59
|
+
else {
|
|
60
|
+
setDisplayInput(true);
|
|
61
|
+
}
|
|
62
|
+
}, [setSearchedValue, isMobile, onChangeInputValue, setDisplayInput]);
|
|
63
|
+
var onDisplayInput = useCallback(function () {
|
|
64
|
+
setDisplayInput(true);
|
|
65
|
+
}, []);
|
|
66
|
+
var onResetFilters = useCallback(function () {
|
|
67
|
+
resetFilters === null || resetFilters === void 0 ? void 0 : resetFilters();
|
|
68
|
+
setSearchedValue === null || setSearchedValue === void 0 ? void 0 : setSearchedValue('');
|
|
69
|
+
}, [resetFilters, setSearchedValue]);
|
|
70
|
+
var translatedValue = searchedColumnsDefinitions &&
|
|
71
|
+
isObject(searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title) &&
|
|
72
|
+
'props' in (searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title) &&
|
|
73
|
+
((_d = searchedColumnsDefinitions.title) === null || _d === void 0 ? void 0 : _d.props) &&
|
|
74
|
+
i18n._({ id: (_f = (_e = searchedColumnsDefinitions.title) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.id, message: (_g = searchedColumnsDefinitions.title) === null || _g === void 0 ? void 0 : _g.props.message });
|
|
75
|
+
return {
|
|
76
|
+
searchedValue: searchedValue,
|
|
77
|
+
translatedValue: translatedValue,
|
|
78
|
+
onChangeInputValue: onChangeInputValue,
|
|
79
|
+
onResetFilters: onResetFilters,
|
|
80
|
+
onDisplayInput: onDisplayInput,
|
|
81
|
+
displayInput: displayInput,
|
|
82
|
+
onClear: onClear,
|
|
83
|
+
isMobileInputView: isMobileInputView,
|
|
84
|
+
filter: filter,
|
|
85
|
+
};
|
|
86
|
+
};
|
|
87
|
+
export default useQuickFilter;
|
|
@@ -15,7 +15,7 @@ export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 =
|
|
|
15
15
|
});
|
|
16
16
|
export var ContentContainer = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n"])));
|
|
17
17
|
export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-grow: 1;\n"], ["\n flex-grow: 1;\n"])));
|
|
18
|
-
export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n flex-wrap: wrap;\n z-index: 2;\n border-bottom: 0.5px solid ", ";\n"], ["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n flex-wrap: wrap;\n z-index: 2;\n border-bottom: 0.5px solid ", ";\n"])), th('colors.lightGray6'));
|
|
18
|
+
export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: 75px;\n flex-wrap: wrap;\n z-index: 2;\n border-bottom: 0.5px solid ", ";\n"], ["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: 75px;\n flex-wrap: wrap;\n z-index: 2;\n border-bottom: 0.5px solid ", ";\n"])), th('colors.lightGray6'));
|
|
19
19
|
export var StyledColumnButton = styled(Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n position: sticky;\n right: 20px;\n > span > svg {\n stroke: ", ";\n width: 18px;\n height: 18px;\n }\n > span > H6 {\n display: none;\n }\n @media (min-width: 1024px) {\n > span > H6 {\n display: flex;\n margin-left: 5px;\n }\n }\n"], ["\n position: sticky;\n right: 20px;\n > span > svg {\n stroke: ", ";\n width: 18px;\n height: 18px;\n }\n > span > H6 {\n display: none;\n }\n @media (min-width: 1024px) {\n > span > H6 {\n display: flex;\n margin-left: 5px;\n }\n }\n"])), th('colors.blue2'));
|
|
20
20
|
export var CommonGridWithStyles = styled(CommonGrid)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: 40px;\n }\n & .gridHead {\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 1;\n padding-left: 20px;\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n position: relative;\n }\n & .sticky {\n background-color: #fafbfc;\n }\n }\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n & .sticky {\n background-color: #fafbfc;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 20px;\n flex-grow: 1;\n }\n & .gridWrapper {\n background-color: ", ";\n width: ", ";\n padding-bottom: ", ";\n\n @media (min-width: 1024px) {\n height: ", ";\n width: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n & .sticky {\n background-color: #fff;\n :hover {\n background-color: #fdf4f3;\n }\n }\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n\n &.selected,\n &.selected > .sticky {\n background-color: #fdf4f3;\n }\n\n :hover {\n background-color: #fdf4f3;\n\n .sticky {\n background-color: #fdf4f3;\n }\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"], ["\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: 40px;\n }\n & .gridHead {\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 1;\n padding-left: 20px;\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n position: relative;\n }\n & .sticky {\n background-color: #fafbfc;\n }\n }\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n & .sticky {\n background-color: #fafbfc;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n & .body {\n margin: 0 1px 1px 1px; // matching margin with .gridHead\n padding-left: 20px;\n flex-grow: 1;\n }\n & .gridWrapper {\n background-color: ", ";\n width: ", ";\n padding-bottom: ", ";\n\n @media (min-width: 1024px) {\n height: ", ";\n width: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 2px;\n padding-right: 2px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n & .sticky {\n background-color: #fff;\n :hover {\n background-color: #fdf4f3;\n }\n }\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n\n &.selected,\n &.selected > .sticky {\n background-color: #fdf4f3;\n }\n\n :hover {\n background-color: #fdf4f3;\n\n .sticky {\n background-color: #fdf4f3;\n }\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n max-width: 88px;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"])), th('fonts.primary'), th('fonts.primary'), function (_a) {
|
|
21
21
|
var theme = _a.theme;
|
|
@@ -2,16 +2,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
2
2
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
|
-
import { jsx as _jsx
|
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
import styled, { css } from '@xstyled/styled-components';
|
|
7
7
|
import { th } from '@xstyled/styled-components';
|
|
8
|
-
import { Icon } from '../Icon';
|
|
9
8
|
var tooltip = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n span {\n display: none;\n position: absolute;\n width: 120px;\n background-color: red1;\n color: white;\n text-align: center;\n border-radius: md;\n padding: 1;\n z-index: 1;\n transition: opacity 0.3s;\n top: 0;\n margin-top: -4px;\n left: 100%;\n margin-left: 2;\n box-shadow: tooltipBoxShadow;\n\n :after {\n content: '';\n position: absolute;\n top: 3px;\n right: 100%;\n border: mediumThick;\n border-color: transparent ", " transparent transparent;\n }\n }\n\n :hover {\n cursor: pointer;\n span {\n display: block;\n }\n }\n"], ["\n span {\n display: none;\n position: absolute;\n width: 120px;\n background-color: red1;\n color: white;\n text-align: center;\n border-radius: md;\n padding: 1;\n z-index: 1;\n transition: opacity 0.3s;\n top: 0;\n margin-top: -4px;\n left: 100%;\n margin-left: 2;\n box-shadow: tooltipBoxShadow;\n\n :after {\n content: '';\n position: absolute;\n top: 3px;\n right: 100%;\n border: mediumThick;\n border-color: transparent ", " transparent transparent;\n }\n }\n\n :hover {\n cursor: pointer;\n span {\n display: block;\n }\n }\n"])), th.color('red1'));
|
|
10
|
-
var ErrorWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: red1;\n font-size: 1;\n display: flex;\n align-items: flex-start;\n
|
|
11
|
-
var StyledWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n .inline {\n margin-top: 1;\n
|
|
9
|
+
var ErrorWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: red1;\n font-size: 1;\n display: flex;\n align-items: flex-start;\n"], ["\n color: red1;\n font-size: 1;\n display: flex;\n align-items: flex-start;\n"])));
|
|
10
|
+
var StyledWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n .inline {\n margin-top: 1;\n }\n .tooltip {\n ", "\n }\n"], ["\n .inline {\n margin-top: 1;\n }\n .tooltip {\n ", "\n }\n"])), tooltip);
|
|
12
11
|
var ErrorMessage = function (_a) {
|
|
13
12
|
var children = _a.children, appearance = _a.appearance;
|
|
14
|
-
return (_jsx(StyledWrapper, { children:
|
|
13
|
+
return (_jsx(StyledWrapper, { children: _jsx(ErrorWrap, { className: appearance, children: _jsx("span", { children: children }) }) }));
|
|
15
14
|
};
|
|
16
15
|
export default ErrorMessage;
|
|
17
16
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
export declare const Label: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {
|
|
2
2
|
fontSize?: string | number | undefined;
|
|
3
3
|
}, never>;
|
|
4
|
-
export declare const FieldLabel: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {
|
|
5
|
-
$isInvalid?: boolean | undefined;
|
|
6
|
-
}, never>;
|
|
4
|
+
export declare const FieldLabel: import("styled-components").StyledComponent<"label", import("@xstyled/system").Theme, {}, never>;
|
|
@@ -4,10 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
};
|
|
5
5
|
import styled, { css } from '@xstyled/styled-components';
|
|
6
6
|
import { system, th } from '@xstyled/styled-components';
|
|
7
|
-
var style = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n font-weight: bold;\n display: block;\n margin-bottom: 6px;\n"], ["\n color: ", ";\n font-family: ", ";\n font-weight: bold;\n display: block;\n margin-bottom: 6px;\n"])),
|
|
8
|
-
var $isInvalid = _a.$isInvalid;
|
|
9
|
-
return ($isInvalid ? th.color('red1') : th.color('typoPrimary'));
|
|
10
|
-
}, th('fonts.primary'));
|
|
7
|
+
var style = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n font-family: ", ";\n font-weight: bold;\n display: block;\n margin-bottom: 6px;\n"], ["\n color: ", ";\n font-family: ", ";\n font-weight: bold;\n display: block;\n margin-bottom: 6px;\n"])), th.color('typoPrimary'), th('fonts.primary'));
|
|
11
8
|
export var Label = styled.label(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-left: 8px;\n ", ";\n ", "\n ", ";\n"], ["\n margin-left: 8px;\n ", ";\n ", "\n ", ";\n"])), style, function (_a) {
|
|
12
9
|
var fontSize = _a.fontSize;
|
|
13
10
|
return fontSize
|
|
@@ -16,7 +16,7 @@ export var CustomStyles = {
|
|
|
16
16
|
var _b;
|
|
17
17
|
var selectProps = _a.selectProps, theme = _a.theme, isFocused = _a.isFocused, isDisabled = _a.isDisabled;
|
|
18
18
|
var colors = theme.colors;
|
|
19
|
-
return __assign(__assign({}, styles), { borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor, backgroundColor: colors.whiteBackgroundColor, boxShadow: theme.focusBoxShadow, borderRadius: theme.borderRadius, '& input': {
|
|
19
|
+
return __assign(__assign({}, styles), { borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor, backgroundColor: isDisabled ? colors.menuHoverBackgroundColor : colors.whiteBackgroundColor, boxShadow: theme.focusBoxShadow, borderRadius: theme.borderRadius, '& input': {
|
|
20
20
|
fontWeight: theme.textWeightNormal,
|
|
21
21
|
fontFamily: theme.font,
|
|
22
22
|
}, '&:hover': __assign(__assign({}, ((_b = styles['&:hover']) !== null && _b !== void 0 ? _b : {})), { borderColor: colors.inputBorderHoverColor }), fontSize: '14px', minHeight: theme.height, minWidth: 'min-content', '.inputIcon': {
|
package/ui/Forms/Input/Input.js
CHANGED
|
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
22
22
|
};
|
|
23
23
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
24
|
import { useCallback, useEffect, useRef } from 'react';
|
|
25
|
-
import { IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip } from './styles';
|
|
25
|
+
import { ClearableInputIcon, IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip, } from './styles';
|
|
26
26
|
import { FieldLabel } from '../../Elements/Label';
|
|
27
27
|
import { SpaceAroundWrap } from '../../Elements/SpaceAround';
|
|
28
28
|
import { ErrorMessage } from '../../Elements/ErrorMessage';
|
|
@@ -60,5 +60,5 @@ export var Input = function (_a) {
|
|
|
60
60
|
onEnter === null || onEnter === void 0 ? void 0 : onEnter();
|
|
61
61
|
}
|
|
62
62
|
}, [onEnter]);
|
|
63
|
-
return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label &&
|
|
63
|
+
return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsxs(InputRow, { hasValue: !!value, "$isInvalid": $isInvalid, disabled: !!disabled, "$icon": icon, variant: variant, children: [_jsx(StyledInput, __assign({ autoFocus: autoFocus, className: "".concat(appearance, " ").concat(checkIconPlacement), type: type, name: name, "data-cy": "".concat(name, "Inp"), value: value, "$isInvalid": $isInvalid, "$isClearable": $isClearable, "$hasSuffix": $hasSuffix, disabled: disabled || isLoading, ref: ref, autoComplete: autoComplete, onKeyDown: handleKeyDown, big: big, onBlur: handleBlur, "$asTextArea": asTextArea, variant: variant }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', hasValue: !!value, "$isInvalid": $isInvalid, disabled: disabled, onClick: iconOnClick, children: _jsxs(Tooltip, { children: [_jsx(Icon, { icon: icon }), iconTooltip && _jsx("span", { children: iconTooltip })] }) })), showArrowsController && (_jsxs(IconsController, { children: [_jsx(IconWrapper, { onClick: onAddItem, children: _jsx(Icon, { icon: "goUp", fill: "gray1" }) }), _jsx(IconWrapper, { onClick: onRemoveItem, children: _jsx(Icon, { icon: "goDown", fill: "gray1" }) })] })), $isClearable && (_jsx(ClearableInputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: "deleteX", size: "16px", fill: "gray1" }) })), suffix && !isLoading && (_jsx(Suffix, { onClick: suffixOnClick, "$isPointer": !!suffixOnClick, "$isInvalid": $isInvalid, children: suffix })), isLoading && (_jsx(InputIcon, { right: true, children: _jsx(Spinner, { variant: "sm" }) }))] })] }), error && _jsx(ErrorMessage, { appearance: errorAppearance, children: error })] }));
|
|
64
64
|
};
|
|
@@ -13,8 +13,12 @@ type StyledInputProps = {
|
|
|
13
13
|
};
|
|
14
14
|
type InputIconProps = {
|
|
15
15
|
right?: boolean;
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
hasValue?: boolean;
|
|
18
|
+
$isInvalid?: boolean;
|
|
16
19
|
};
|
|
17
20
|
export declare const InputIcon: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, InputIconProps, never>;
|
|
21
|
+
export declare const ClearableInputIcon: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, InputIconProps, never>;
|
|
18
22
|
export declare const IconsController: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
19
23
|
export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
|
|
20
24
|
export declare const StyledInput: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {
|
package/ui/Forms/Input/styles.js
CHANGED
|
@@ -14,44 +14,48 @@ var resolvePaddingRight = function (props) {
|
|
|
14
14
|
padding += 2;
|
|
15
15
|
return String(padding);
|
|
16
16
|
};
|
|
17
|
-
export var InputIcon = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n\n // top: 52%; // TODO fix\n // transform: translateY(-50%); // TODO why does this do the overlap bug\n left: ", ";\n right: ", ";\n\n svg {\n stroke: lightGray3;\n cursor: pointer;\n }\n"], ["\n position: absolute;\n\n // top: 52%; // TODO fix\n // transform: translateY(-50%); // TODO why does this do the overlap bug\n left: ", ";\n right: ", ";\n\n svg {\n stroke: lightGray3;\n cursor: pointer;\n }\n"])), function (_a) {
|
|
17
|
+
export var InputIcon = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n\n // top: 52%; // TODO fix\n // transform: translateY(-50%); // TODO why does this do the overlap bug\n left: ", ";\n right: ", ";\n\n svg {\n stroke: lightGray3;\n cursor: pointer;\n color: ", ";\n }\n"], ["\n position: absolute;\n\n // top: 52%; // TODO fix\n // transform: translateY(-50%); // TODO why does this do the overlap bug\n left: ", ";\n right: ", ";\n\n svg {\n stroke: lightGray3;\n cursor: pointer;\n color: ", ";\n }\n"])), function (_a) {
|
|
18
18
|
var right = _a.right;
|
|
19
19
|
return (right ? 'auto' : '1em');
|
|
20
20
|
}, function (_a) {
|
|
21
21
|
var right = _a.right;
|
|
22
22
|
return (right ? '0.5em' : 'auto');
|
|
23
|
+
}, function (_a) {
|
|
24
|
+
var $isInvalid = _a.$isInvalid, hasValue = _a.hasValue, disabled = _a.disabled;
|
|
25
|
+
return $isInvalid ? th.color('red1') : disabled || !hasValue ? th.color('lightGray6') : th.color('blue2');
|
|
23
26
|
});
|
|
24
|
-
export var
|
|
25
|
-
export var
|
|
27
|
+
export var ClearableInputIcon = styled(InputIcon)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n svg {\n color: gray1;\n }\n"], ["\n svg {\n color: gray1;\n }\n"])));
|
|
28
|
+
export var IconsController = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: 0.2em;\n right: 0.5em;\n"], ["\n position: absolute;\n top: 0.2em;\n right: 0.5em;\n"])));
|
|
29
|
+
export var IconWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"], ["\n display: flex;\n svg {\n :hover {\n cursor: pointer;\n color: blue2;\n }\n }\n"])));
|
|
26
30
|
export var StyledInput = styled.input.attrs(function (props) { return ({
|
|
27
31
|
as: props.$asTextArea ? 'textarea' : 'input',
|
|
28
|
-
}); })(
|
|
32
|
+
}); })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: 100%;\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: lightGray6;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"], ["\n ", ";\n border: slim;\n border-color: ", ";\n box-sizing: border-box;\n background-clip: padding-box;\n padding-top: 0.5em;\n padding-bottom: 0.5em;\n padding-right: ", "em;\n display: block;\n width: 100%;\n font-family: ", ";\n font-size: 14px;\n font-weight: normal;\n transition: inputTransition;\n resize: none;\n overflow: hidden;\n\n ~ ", " {\n svg {\n stroke: lightGray3;\n }\n }\n\n ::placeholder {\n color: gray1;\n opacity: 1;\n }\n\n :focus {\n background-color: white;\n border-color: blue2;\n color: typoPrimary;\n outline: 0;\n\n ~ ", " {\n svg {\n stroke: blue2;\n color: blue2;\n }\n }\n }\n ", ";\n ", ";\n :disabled,\n :disabled:hover {\n background-color: bgLightGray1;\n border-color: lightGray6;\n color: lightGray6;\n }\n\n text-overflow: ellipsis;\n\n -moz-appearance: textfield;\n appearance: textfield;\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n"])), system, function (_a) {
|
|
29
33
|
var $isInvalid = _a.$isInvalid;
|
|
30
34
|
return ($isInvalid ? th.color('red1') : th.color('lightGray6'));
|
|
31
35
|
}, function (props) { return resolvePaddingRight(props); }, th('fonts.primary'), InputIcon, InputIcon, function (_a) {
|
|
32
36
|
var big = _a.big;
|
|
33
37
|
return big
|
|
34
|
-
? css(
|
|
38
|
+
? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n font-size: 30px;\n color: gray;\n font-weight: semiBold;\n padding: 0 0.5rem 0 1.25rem;\n "], ["\n font-size: 30px;\n color: gray;\n font-weight: semiBold;\n padding: 0 0.5rem 0 1.25rem;\n "]))) : '';
|
|
35
39
|
}, function (_a) {
|
|
36
40
|
var variant = _a.variant;
|
|
37
41
|
return variant === 'gray'
|
|
38
|
-
? css(
|
|
42
|
+
? css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-color: neutral20;\n :focus {\n background-color: neutral20;\n }\n "], ["\n background-color: neutral20;\n :focus {\n background-color: neutral20;\n }\n "]))) : '';
|
|
39
43
|
});
|
|
40
|
-
export var InputWrap = styled.div(
|
|
41
|
-
export var Suffix = styled.div(
|
|
44
|
+
export var InputWrap = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
45
|
+
export var Suffix = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n font-size: 14px;\n font-weight: 700;\n height: 100%;\n width: 40px;\n padding: 2;\n color: typoPrimary;\n font-family: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: slim;\n border-top-right-radius: lg;\n border-bottom-right-radius: lg;\n border-left: none;\n\n ", ";\n\n input:focus ~ &,\n textarea:focus ~ & {\n border-color: blue2;\n }\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n font-size: 14px;\n font-weight: 700;\n height: 100%;\n width: 40px;\n padding: 2;\n color: typoPrimary;\n font-family: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: slim;\n border-top-right-radius: lg;\n border-bottom-right-radius: lg;\n border-left: none;\n\n ", ";\n\n input:focus ~ &,\n textarea:focus ~ & {\n border-color: blue2;\n }\n"])), th('fonts.primary'), function (_a) {
|
|
42
46
|
var $isPointer = _a.$isPointer;
|
|
43
47
|
return $isPointer
|
|
44
|
-
? css(
|
|
48
|
+
? css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n cursor: pointer;\n "], ["\n cursor: pointer;\n "]))) : '';
|
|
45
49
|
});
|
|
46
|
-
export var InputRow = styled.div(
|
|
50
|
+
export var InputRow = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n position: relative;\n color: ", ";\n & > * {\n border-color: ", ";\n color: ", ";\n }\n :hover > * {\n border-color: ", ";\n }\n &:focus-within {\n color: typoPrimary;\n }\n .primary {\n line-height: 0;\n height: 38px;\n border-radius: lg;\n ~ ", " {\n top: 10px;\n }\n }\n .grid {\n line-height: 1.2px;\n border-radius: md;\n ~ ", " {\n top: 7px;\n }\n }\n .left {\n padding-left: ", ";\n }\n .right {\n padding-right: 1.4em;\n padding-left: 1em;\n }\n"], ["\n position: relative;\n color: ", ";\n & > * {\n border-color: ", ";\n color: ", ";\n }\n :hover > * {\n border-color: ", ";\n }\n &:focus-within {\n color: typoPrimary;\n }\n .primary {\n line-height: 0;\n height: 38px;\n border-radius: lg;\n ~ ", " {\n top: 10px;\n }\n }\n .grid {\n line-height: 1.2px;\n border-radius: md;\n ~ ", " {\n top: 7px;\n }\n }\n .left {\n padding-left: ", ";\n }\n .right {\n padding-right: 1.4em;\n padding-left: 1em;\n }\n"])), function (_a) {
|
|
47
51
|
var $isInvalid = _a.$isInvalid;
|
|
48
52
|
return ($isInvalid ? th.color('red1') : th.color('gray'));
|
|
49
53
|
}, function (_a) {
|
|
50
54
|
var $isInvalid = _a.$isInvalid, variant = _a.variant;
|
|
51
55
|
return $isInvalid ? th.color('red1') : variant === 'gray' ? th.color('neutral20') : th.color('lightGray6');
|
|
52
56
|
}, function (_a) {
|
|
53
|
-
var
|
|
54
|
-
return
|
|
57
|
+
var hasValue = _a.hasValue;
|
|
58
|
+
return (hasValue ? th.color('typoPrimary') : th.color('gray'));
|
|
55
59
|
}, function (_a) {
|
|
56
60
|
var disabled = _a.disabled;
|
|
57
61
|
return (disabled ? th.color('lightGray3') : th.color('gray5'));
|
|
@@ -59,5 +63,5 @@ export var InputRow = styled.div(templateObject_10 || (templateObject_10 = __mak
|
|
|
59
63
|
var $icon = _a.$icon;
|
|
60
64
|
return ($icon ? '3em' : '1em');
|
|
61
65
|
});
|
|
62
|
-
export var Tooltip = styled.div(
|
|
63
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
66
|
+
export var Tooltip = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n span {\n display: none;\n position: absolute;\n width: 120px;\n background-color: white;\n color: red1;\n border-color: red1;\n border: 1px solid;\n text-align: center;\n border-radius: lg;\n padding: 1 3;\n margin: 1;\n z-index: 1;\n transition: opacity 0.3s;\n top: 0;\n left: 100%;\n margin-left: 2;\n box-shadow: tooltipBoxShadow;\n\n :after {\n content: '';\n position: absolute;\n top: 0px;\n right: 100%;\n border: mediumThick;\n border-color: transparent ", " transparent transparent;\n }\n }\n\n :hover {\n cursor: pointer;\n span {\n display: block;\n }\n }\n"], ["\n span {\n display: none;\n position: absolute;\n width: 120px;\n background-color: white;\n color: red1;\n border-color: red1;\n border: 1px solid;\n text-align: center;\n border-radius: lg;\n padding: 1 3;\n margin: 1;\n z-index: 1;\n transition: opacity 0.3s;\n top: 0;\n left: 100%;\n margin-left: 2;\n box-shadow: tooltipBoxShadow;\n\n :after {\n content: '';\n position: absolute;\n top: 0px;\n right: 100%;\n border: mediumThick;\n border-color: transparent ", " transparent transparent;\n }\n }\n\n :hover {\n cursor: pointer;\n span {\n display: block;\n }\n }\n"])), th.color('red1'));
|
|
67
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|
|
@@ -29,6 +29,6 @@ import ErrorMessage from '../../Elements/ErrorMessage/ErrorMessage';
|
|
|
29
29
|
var TextArea = function (_a) {
|
|
30
30
|
var name = _a.name, label = _a.label, value = _a.value, disabled = _a.disabled, error = _a.error, _b = _a.spaceAround, spaceAround = _b === void 0 ? false : _b, _c = _a.isInvalid, isInvalid = _c === void 0 ? undefined : _c, className = _a.className, resize = _a.resize, icon = _a.icon, _d = _a.rows, rows = _d === void 0 ? 4 : _d, Footer = _a.Footer, rest = __rest(_a, ["name", "label", "value", "disabled", "error", "spaceAround", "isInvalid", "className", "resize", "icon", "rows", "Footer"]);
|
|
31
31
|
var $isInvalid = isInvalid !== undefined ? isInvalid : !!error;
|
|
32
|
-
return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, children: [_jsxs(TextAreaWrap, { children: [label &&
|
|
32
|
+
return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, children: [_jsxs(TextAreaWrap, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsxs(BorderWrap, { "$isInvalid": $isInvalid, disabled: disabled, children: [_jsxs(InnerWrap, { children: [icon && (_jsx(IconWrap, { children: _jsx(FaIcon, { icon: icon }) })), _jsx(StyledTextArea, __assign({ name: name, value: value, disabled: disabled, className: className, "$isInvalid": $isInvalid, "$resize": resize }, rest, { rows: rows }))] }), Footer] })] }), error && _jsx(ErrorMessage, { children: error })] }));
|
|
33
33
|
};
|
|
34
34
|
export default TextArea;
|