@vendorflow/components 2.0.56 → 2.0.60
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/lib/components/material-ui/DataTable/DataTable.d.ts +2 -1
- package/lib/components/material-ui/DataTable/DataTable.js +2 -2
- package/lib/components/material-ui/ErrorBoundary/ErrorBoundary.d.ts +7 -0
- package/lib/components/material-ui/ErrorBoundary/ErrorBoundary.js +20 -0
- package/lib/components/material-ui/ErrorBoundary/index.d.ts +1 -0
- package/lib/components/material-ui/ErrorBoundary/index.js +8 -0
- package/lib/components/material-ui/InputDate/InputDate.d.ts +1 -1
- package/lib/components/material-ui/InputDate/InputDate.js +3 -1
- package/lib/components/material-ui/InputDateTime/InputDateTime.d.ts +1 -1
- package/lib/components/material-ui/InputDateTime/InputDateTime.js +3 -1
- package/lib/components/material-ui/InputGroup/InputGroup.d.ts +1 -1
- package/lib/components/material-ui/InputGroup/InputGroup.js +3 -1
- package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.d.ts +1 -1
- package/lib/components/material-ui/InputSearchDropdown/InputSearchDropdown.js +3 -1
- package/lib/components/material-ui/InputTime/InputTime.d.ts +1 -1
- package/lib/components/material-ui/InputTime/InputTime.js +3 -1
- package/package.json +1 -1
|
@@ -48,6 +48,7 @@ export interface TableFeatureOptions<D extends object> {
|
|
|
48
48
|
}
|
|
49
49
|
interface Props<D extends object> {
|
|
50
50
|
title?: string;
|
|
51
|
+
'data-testid'?: string;
|
|
51
52
|
labels?: {
|
|
52
53
|
noMatchLabel?: string;
|
|
53
54
|
noMatchColSpan?: number;
|
|
@@ -58,7 +59,7 @@ interface Props<D extends object> {
|
|
|
58
59
|
renderActions?: () => ReactNode;
|
|
59
60
|
renderRowSelectActions?: () => ReactNode;
|
|
60
61
|
}
|
|
61
|
-
export default function DataTable<D extends object>({ title, labels, columns, instance, options, renderActions, renderRowSelectActions, }: Props<D>): JSX.Element;
|
|
62
|
+
export default function DataTable<D extends object>({ title, labels, columns, instance, options, renderActions, renderRowSelectActions, ...restOfProps }: Props<D>): JSX.Element;
|
|
62
63
|
export declare function usePluginConfig<D extends object>(options: TableFeatureOptions<D>): PluginHook<D>[];
|
|
63
64
|
export interface UseDefaultTableInstanceProps<D extends object> {
|
|
64
65
|
columns: EnhancedColumn<D>[];
|
|
@@ -97,7 +97,7 @@ var EXPAND_BTN_WIDTH = 24;
|
|
|
97
97
|
var NO_MATCH_TEXT = 'Sorry, no matching records found';
|
|
98
98
|
function DataTable(_a) {
|
|
99
99
|
var _b;
|
|
100
|
-
var title = _a.title, labels = _a.labels, columns = _a.columns, instance = _a.instance, options = _a.options, renderActions = _a.renderActions, renderRowSelectActions = _a.renderRowSelectActions;
|
|
100
|
+
var title = _a.title, labels = _a.labels, columns = _a.columns, instance = _a.instance, options = _a.options, renderActions = _a.renderActions, renderRowSelectActions = _a.renderRowSelectActions, restOfProps = __rest(_a, ["title", "labels", "columns", "instance", "options", "renderActions", "renderRowSelectActions"]);
|
|
101
101
|
var _c = labels || { noMatchLabel: NO_MATCH_TEXT }, _d = _c.noMatchLabel, noMatchLabel = _d === void 0 ? NO_MATCH_TEXT : _d, noMatchColSpan = _c.noMatchColSpan;
|
|
102
102
|
var _e = options || {}, rowExpandingConfig = _e.rowExpanding, filtersConfig = _e.filters, globalSearchConfig = _e.globalSearch, columnHidingConfig = _e.columnHiding, paginationConfig = _e.pagination, rowSelectConfig = _e.rowSelect, sortingConfig = _e.sorting;
|
|
103
103
|
var ExpandedComponent = (rowExpandingConfig || {}).Component;
|
|
@@ -139,7 +139,7 @@ function DataTable(_a) {
|
|
|
139
139
|
var tableRows = (paginationConfig === null || paginationConfig === void 0 ? void 0 : paginationConfig.enabled) ? page : rows;
|
|
140
140
|
return ((0, react_1.jsx)(react_1.ClassNames, null, function (_a) {
|
|
141
141
|
var css = _a.css, cx = _a.cx;
|
|
142
|
-
return ((0, react_1.jsx)(material_1.Paper, { css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n position: relative;\n "], ["\n width: 100%;\n position: relative;\n "]))) },
|
|
142
|
+
return ((0, react_1.jsx)(material_1.Paper, __assign({ css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n position: relative;\n "], ["\n width: 100%;\n position: relative;\n "]))), className: "vendorflow-table" }, restOfProps),
|
|
143
143
|
(0, react_1.jsx)("div", null,
|
|
144
144
|
(0, react_1.jsx)(Toolbar_1.default, { title: title, allColumns: allColumns, columnNameById: columnNameById, globalFilter: globalFilter, enableFilters: filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled, enableGlobalSearch: globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.enabled, enableHideColumns: columnHidingConfig === null || columnHidingConfig === void 0 ? void 0 : columnHidingConfig.enabled, hasRowsSelected: hasRowsSelected, numRowsSelected: numRowsSelected, setAllFilters: setAllFilters, setGlobalFilter: (globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.setGlobalFilter) ? globalSearchConfig === null || globalSearchConfig === void 0 ? void 0 : globalSearchConfig.setGlobalFilter : setGlobalFilter, renderActions: renderActions, renderRowSelectActions: renderRowSelectActions }),
|
|
145
145
|
(filtersConfig === null || filtersConfig === void 0 ? void 0 : filtersConfig.enabled) && ((0, react_1.jsx)(AppliedFilters_1.default, { columnNameById: columnNameById, filters: filters, setFilter: setFilter }))),
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
/** @jsx jsx */
|
|
8
|
+
var react_1 = require("@emotion/react");
|
|
9
|
+
var material_1 = require("@mui/material");
|
|
10
|
+
var react_error_boundary_1 = require("react-error-boundary");
|
|
11
|
+
function ErrorFallback(_a) {
|
|
12
|
+
var resetErrorBoundary = _a.resetErrorBoundary;
|
|
13
|
+
return ((0, react_1.jsx)(material_1.Alert, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n "], ["\n width: 100%;\n "]))), severity: "error", action: (0, react_1.jsx)(material_1.Button, { color: "inherit", size: "small", onClick: resetErrorBoundary }, "Reload") }, "Something went wrong when trying to load this view's data. Please try to reload the data again."));
|
|
14
|
+
}
|
|
15
|
+
function ErrorBoundary(_a) {
|
|
16
|
+
var children = _a.children, onReset = _a.onReset;
|
|
17
|
+
return ((0, react_1.jsx)(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ErrorFallback, onReset: onReset }, children));
|
|
18
|
+
}
|
|
19
|
+
exports.default = ErrorBoundary;
|
|
20
|
+
var templateObject_1;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from './ErrorBoundary';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var ErrorBoundary_1 = require("./ErrorBoundary");
|
|
8
|
+
Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ErrorBoundary_1).default; } });
|
|
@@ -5,7 +5,7 @@ import { TextFieldProps } from '@mui/material';
|
|
|
5
5
|
declare type Props = {
|
|
6
6
|
name?: string;
|
|
7
7
|
onChange: SimpleEventHandler<string>;
|
|
8
|
-
InputProps?: TextFieldProps
|
|
8
|
+
InputProps?: Omit<TextFieldProps, 'id'>;
|
|
9
9
|
} & Omit<DatePickerProps, 'onChange' | 'renderInput' | 'date' | 'rawValue' | 'openPicker' | 'InputProps'> & React.RefAttributes<HTMLDivElement>;
|
|
10
10
|
export default function InputDate(props: Props): JSX.Element;
|
|
11
11
|
export {};
|
|
@@ -62,7 +62,9 @@ var date_fns_1 = require("date-fns");
|
|
|
62
62
|
var lab_1 = require("@mui/lab");
|
|
63
63
|
var material_1 = require("@mui/material");
|
|
64
64
|
var lodash_1 = require("lodash");
|
|
65
|
+
var nanoid_1 = require("nanoid");
|
|
65
66
|
function InputDate(props) {
|
|
67
|
+
var id = (0, react_1.useRef)((0, nanoid_1.nanoid)());
|
|
66
68
|
var _a = props.clearable, clearable = _a === void 0 ? true : _a, label = props.label, name = props.name, onChange = props.onChange, _b = props.inputFormat, inputFormat = _b === void 0 ? 'MM/dd/yyyy' : _b, _c = props.InputProps, InputProps = _c === void 0 ? {} : _c, restOfProps = __rest(props, ["clearable", "label", "name", "onChange", "inputFormat", "InputProps"]);
|
|
67
69
|
var _d = __read((0, react_1.useState)(null), 2), value = _d[0], setValue = _d[1];
|
|
68
70
|
(0, react_1.useEffect)(function () {
|
|
@@ -86,6 +88,6 @@ function InputDate(props) {
|
|
|
86
88
|
function convertToDateTime(date) {
|
|
87
89
|
return date ? (0, date_fns_1.parseISO)(date) : null;
|
|
88
90
|
}
|
|
89
|
-
return (react_1.default.createElement(lab_1.DatePicker, __assign({}, restOfProps, { clearable: clearable, inputFormat: inputFormat, renderInput: function (params) { return react_1.default.createElement(material_1.TextField, __assign({}, params, InputProps, { size: (InputProps === null || InputProps === void 0 ? void 0 : InputProps.size) || 'small' })); }, label: label, onChange: handleOnChange, value: value })));
|
|
91
|
+
return (react_1.default.createElement(lab_1.DatePicker, __assign({}, restOfProps, { clearable: clearable, inputFormat: inputFormat, renderInput: function (params) { return (react_1.default.createElement(material_1.TextField, __assign({}, params, InputProps, { id: id.current, size: (InputProps === null || InputProps === void 0 ? void 0 : InputProps.size) || 'small' }))); }, label: label, onChange: handleOnChange, value: value })));
|
|
90
92
|
}
|
|
91
93
|
exports.default = InputDate;
|
|
@@ -5,7 +5,7 @@ import { TextFieldProps } from '@mui/material';
|
|
|
5
5
|
declare type Props = {
|
|
6
6
|
name?: string;
|
|
7
7
|
onChange: SimpleEventHandler<string>;
|
|
8
|
-
InputProps?: TextFieldProps
|
|
8
|
+
InputProps?: Omit<TextFieldProps, 'id'>;
|
|
9
9
|
} & Omit<DateTimePickerProps, 'onChange' | 'renderInput' | 'date' | 'rawValue' | 'openPicker' | 'InputProps'> & React.RefAttributes<HTMLDivElement>;
|
|
10
10
|
export default function InputDateTime(props: Props): JSX.Element;
|
|
11
11
|
export {};
|
|
@@ -61,8 +61,10 @@ var react_1 = __importStar(require("react"));
|
|
|
61
61
|
var date_fns_1 = require("date-fns");
|
|
62
62
|
var lab_1 = require("@mui/lab");
|
|
63
63
|
var material_1 = require("@mui/material");
|
|
64
|
+
var nanoid_1 = require("nanoid");
|
|
64
65
|
function InputDateTime(props) {
|
|
65
66
|
var _a = props.clearable, clearable = _a === void 0 ? true : _a, _b = props.inputFormat, inputFormat = _b === void 0 ? 'MM/dd/yyyy HH:mm' : _b, _c = props.InputProps, InputProps = _c === void 0 ? {} : _c, label = props.label, name = props.name, onChange = props.onChange, restOfProps = __rest(props, ["clearable", "inputFormat", "InputProps", "label", "name", "onChange"]);
|
|
67
|
+
var id = (0, react_1.useRef)((0, nanoid_1.nanoid)());
|
|
66
68
|
var _d = __read((0, react_1.useState)(null), 2), value = _d[0], setValue = _d[1];
|
|
67
69
|
(0, react_1.useEffect)(function () {
|
|
68
70
|
if (props.value !== value) {
|
|
@@ -75,6 +77,6 @@ function InputDateTime(props) {
|
|
|
75
77
|
onChange({ target: { name: name, value: date ? (0, date_fns_1.formatISO)(date) : null } });
|
|
76
78
|
}
|
|
77
79
|
}
|
|
78
|
-
return (react_1.default.createElement(lab_1.DateTimePicker, __assign({}, restOfProps, { clearable: clearable, inputFormat: inputFormat, label: label, onChange: handleOnChange, renderInput: function (params) { return react_1.default.createElement(material_1.TextField, __assign({}, params, InputProps, { size: (InputProps === null || InputProps === void 0 ? void 0 : InputProps.size) || 'small' })); }, value: value })));
|
|
80
|
+
return (react_1.default.createElement(lab_1.DateTimePicker, __assign({}, restOfProps, { clearable: clearable, inputFormat: inputFormat, label: label, onChange: handleOnChange, renderInput: function (params) { return (react_1.default.createElement(material_1.TextField, __assign({}, params, InputProps, { id: id.current, size: (InputProps === null || InputProps === void 0 ? void 0 : InputProps.size) || 'small' }))); }, value: value })));
|
|
79
81
|
}
|
|
80
82
|
exports.default = InputDateTime;
|
|
@@ -48,8 +48,10 @@ var react_1 = require("@emotion/react");
|
|
|
48
48
|
var react_2 = require("react");
|
|
49
49
|
var lodash_1 = require("lodash");
|
|
50
50
|
var material_1 = require("@mui/material");
|
|
51
|
+
var nanoid_1 = require("nanoid");
|
|
51
52
|
function InputGroup(props) {
|
|
52
53
|
var changeValidator = props.changeValidator, charLimit = props.charLimit, className = props.className, hideCharCounter = props.hideCharCounter, _a = props.enableDebouncedOnChange, enableDebouncedOnChange = _a === void 0 ? true : _a, multiline = props.multiline, error = props.error, label = props.label, name = props.name, onChange = props.onChange, placeholder = props.placeholder, helperText = props.helperText, _b = props.variant, variant = _b === void 0 ? 'outlined' : _b, style = props.style, propsValue = props.value, _c = props.size, size = _c === void 0 ? 'small' : _c, restOfProps = __rest(props, ["changeValidator", "charLimit", "className", "hideCharCounter", "enableDebouncedOnChange", "multiline", "error", "label", "name", "onChange", "placeholder", "helperText", "variant", "style", "value", "size"]);
|
|
54
|
+
var id = (0, react_2.useRef)((0, nanoid_1.nanoid)());
|
|
53
55
|
var _d = __read((0, react_2.useState)(''), 2), value = _d[0], setValue = _d[1];
|
|
54
56
|
(0, react_2.useEffect)(function () {
|
|
55
57
|
if (propsValue !== value) {
|
|
@@ -77,7 +79,7 @@ function InputGroup(props) {
|
|
|
77
79
|
}
|
|
78
80
|
}
|
|
79
81
|
return ((0, react_1.jsx)("div", { className: className, style: style },
|
|
80
|
-
(0, react_1.jsx)(material_1.TextField, __assign({ error: error, label: label, name: name, onChange: handleOnChange, placeholder: placeholder, value: value, variant: variant, multiline: multiline, size: size }, restOfProps)),
|
|
82
|
+
(0, react_1.jsx)(material_1.TextField, __assign({ id: id.current, error: error, label: label, name: name, onChange: handleOnChange, placeholder: placeholder, value: value, variant: variant, multiline: multiline, size: size }, restOfProps)),
|
|
81
83
|
(0, react_1.jsx)("div", null,
|
|
82
84
|
helperText && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n float: left;\n margin-left: 14px;\n margin-top: 4px;\n color: ", ";\n width: calc(100% - 82px);\n "], ["\n float: left;\n margin-left: 14px;\n margin-top: 4px;\n color: ", ";\n width: calc(100% - 82px);\n "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "caption" }, helperText)),
|
|
83
85
|
charLimit !== undefined && !hideCharCounter && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-size: 0.75rem;\n text-align: right;\n float: right;\n margin-left: 14px;\n margin-right: 14px;\n margin-top: 4px;\n color: ", ";\n width: 40px;\n "], ["\n font-size: 0.75rem;\n text-align: right;\n float: right;\n margin-left: 14px;\n margin-right: 14px;\n margin-top: 4px;\n color: ", ";\n width: 40px;\n "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "subtitle1" },
|
|
@@ -15,6 +15,6 @@ declare type Props<T> = {
|
|
|
15
15
|
max?: number;
|
|
16
16
|
count?: number;
|
|
17
17
|
onChange: (event: ChangeEvent<any>, value: any, reason: AutocompleteChangeReason) => void;
|
|
18
|
-
} & Omit<AutocompleteProps<T, MaybeBoolean, MaybeBoolean, MaybeBoolean, any>, 'onChange' | 'renderInput'>;
|
|
18
|
+
} & Omit<AutocompleteProps<T, MaybeBoolean, MaybeBoolean, MaybeBoolean, any>, 'onChange' | 'renderInput' | 'id'>;
|
|
19
19
|
export default function InputSearchDropdown<T>(props: Props<T>): JSX.Element;
|
|
20
20
|
export {};
|
|
@@ -48,6 +48,7 @@ var react_1 = require("@emotion/react");
|
|
|
48
48
|
var react_2 = require("react");
|
|
49
49
|
var styles_1 = require("@mui/styles");
|
|
50
50
|
var material_1 = require("@mui/material");
|
|
51
|
+
var nanoid_1 = require("nanoid");
|
|
51
52
|
var useStyles = (0, styles_1.makeStyles)({
|
|
52
53
|
option: {
|
|
53
54
|
'&[data-focus="true"]': { backgroundColor: '#5789ff', color: 'white' },
|
|
@@ -55,6 +56,7 @@ var useStyles = (0, styles_1.makeStyles)({
|
|
|
55
56
|
});
|
|
56
57
|
function InputSearchDropdown(props) {
|
|
57
58
|
var _a = props.autoHighlight, autoHighlight = _a === void 0 ? true : _a, _b = props.clearOnEscape, clearOnEscape = _b === void 0 ? true : _b, count = props.count, disableFilter = props.disableFilter, error = props.error, errors = props.errors, filterOptions = props.filterOptions, _c = props.filterSelectedOptions, filterSelectedOptions = _c === void 0 ? true : _c, label = props.label, helperText = props.helperText, name = props.name, onChange = props.onChange, _d = props.openOnFocus, openOnFocus = _d === void 0 ? true : _d, _e = props.renderInput, renderInput = _e === void 0 ? null : _e, renderTags = props.renderTags, _f = props.selectOnFocus, selectOnFocus = _f === void 0 ? true : _f, _g = props.variant, variant = _g === void 0 ? 'outlined' : _g, multiple = props.multiple, max = props.max, _h = props.size, size = _h === void 0 ? 'small' : _h, restOfProps = __rest(props, ["autoHighlight", "clearOnEscape", "count", "disableFilter", "error", "errors", "filterOptions", "filterSelectedOptions", "label", "helperText", "name", "onChange", "openOnFocus", "renderInput", "renderTags", "selectOnFocus", "variant", "multiple", "max", "size"]);
|
|
59
|
+
var id = (0, react_2.useRef)((0, nanoid_1.nanoid)());
|
|
58
60
|
var _j = __read((0, react_2.useState)(null), 2), value = _j[0], setValue = _j[1];
|
|
59
61
|
var mainStyles = useStyles();
|
|
60
62
|
(0, react_2.useEffect)(function () {
|
|
@@ -121,7 +123,7 @@ function InputSearchDropdown(props) {
|
|
|
121
123
|
return ((_a = value) === null || _a === void 0 ? void 0 : _a.length) || 0;
|
|
122
124
|
}
|
|
123
125
|
return ((0, react_1.jsx)("div", null,
|
|
124
|
-
(0, react_1.jsx)(material_1.Autocomplete, __assign({ css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n // TODO: this is due to a bug in MaterialUI clear up when resolve -- should file a PR ticket\n &&& .MuiInputBase-root {\n padding-right: 39px;\n }\n "], ["\n // TODO: this is due to a bug in MaterialUI clear up when resolve -- should file a PR ticket\n &&& .MuiInputBase-root {\n padding-right: 39px;\n }\n "]))), autoHighlight: autoHighlight, clearOnEscape: clearOnEscape, filterOptions: !disableFilter ? filterOptions || handleOptionFilter() : function (options) { return options; }, filterSelectedOptions: filterSelectedOptions, onChange: handleOnChange, openOnFocus: openOnFocus, renderInput: renderInput || renderDefaultInput, renderTags: renderTags || renderDefaultTags, selectOnFocus: selectOnFocus, multiple: multiple, classes: mainStyles, size: size }, restOfProps, { value: getValue() })),
|
|
126
|
+
(0, react_1.jsx)(material_1.Autocomplete, __assign({ id: id.current, css: (0, react_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n // TODO: this is due to a bug in MaterialUI clear up when resolve -- should file a PR ticket\n &&& .MuiInputBase-root {\n padding-right: 39px;\n }\n "], ["\n // TODO: this is due to a bug in MaterialUI clear up when resolve -- should file a PR ticket\n &&& .MuiInputBase-root {\n padding-right: 39px;\n }\n "]))), autoHighlight: autoHighlight, clearOnEscape: clearOnEscape, filterOptions: !disableFilter ? filterOptions || handleOptionFilter() : function (options) { return options; }, filterSelectedOptions: filterSelectedOptions, onChange: handleOnChange, openOnFocus: openOnFocus, renderInput: renderInput || renderDefaultInput, renderTags: renderTags || renderDefaultTags, selectOnFocus: selectOnFocus, multiple: multiple, classes: mainStyles, size: size }, restOfProps, { value: getValue() })),
|
|
125
127
|
(0, react_1.jsx)("div", null,
|
|
126
128
|
helperText && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n float: left;\n margin-left: 14px;\n margin-top: 4px;\n color: ", ";\n width: calc(100% - 82px);\n "], ["\n float: left;\n margin-left: 14px;\n margin-top: 4px;\n color: ", ";\n width: calc(100% - 82px);\n "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "caption" }, helperText)),
|
|
127
129
|
multiple && max && ((0, react_1.jsx)(material_1.Typography, { css: (0, react_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 0.75rem;\n text-align: right;\n float: right;\n margin-left: 14px;\n margin-right: 14px;\n margin-top: 4px;\n color: ", ";\n width: 40px;\n "], ["\n font-size: 0.75rem;\n text-align: right;\n float: right;\n margin-left: 14px;\n margin-right: 14px;\n margin-top: 4px;\n color: ", ";\n width: 40px;\n "])), error ? 'red' : 'rgba(0, 0, 0, 0.54)'), variant: "subtitle1" },
|
|
@@ -4,7 +4,7 @@ import { TextFieldProps } from '@mui/material';
|
|
|
4
4
|
declare type Props = {
|
|
5
5
|
name?: string;
|
|
6
6
|
onChange: SimpleEventHandler<ParsableDate>;
|
|
7
|
-
InputProps?: TextFieldProps
|
|
7
|
+
InputProps?: Omit<TextFieldProps, 'id'>;
|
|
8
8
|
} & Omit<TimePickerProps, 'onChange' | 'renderInput' | 'openPicker' | 'rawValue' | 'InputProps'>;
|
|
9
9
|
export default function InputTime(props: Props): JSX.Element;
|
|
10
10
|
export {};
|
|
@@ -61,9 +61,11 @@ var react_1 = __importStar(require("react"));
|
|
|
61
61
|
var date_fns_1 = require("date-fns");
|
|
62
62
|
var lab_1 = require("@mui/lab");
|
|
63
63
|
var material_1 = require("@mui/material");
|
|
64
|
+
var nanoid_1 = require("nanoid");
|
|
64
65
|
function InputTime(props) {
|
|
65
66
|
var _a = props.clearable, clearable = _a === void 0 ? true : _a, _b = props.inputFormat, inputFormat = _b === void 0 ? 'HH:mm' : _b, _c = props.InputProps, InputProps = _c === void 0 ? {} : _c, label = props.label, name = props.name, onChange = props.onChange, restOfProps = __rest(props, ["clearable", "inputFormat", "InputProps", "label", "name", "onChange"]);
|
|
66
67
|
var _d = __read((0, react_1.useState)(null), 2), value = _d[0], setValue = _d[1];
|
|
68
|
+
var id = (0, react_1.useRef)((0, nanoid_1.nanoid)());
|
|
67
69
|
(0, react_1.useEffect)(function () {
|
|
68
70
|
if (props.value) {
|
|
69
71
|
setValue(props.value);
|
|
@@ -75,6 +77,6 @@ function InputTime(props) {
|
|
|
75
77
|
onChange({ target: { name: name, value: date ? (0, date_fns_1.formatISO)(date) : null } });
|
|
76
78
|
}
|
|
77
79
|
}
|
|
78
|
-
return (react_1.default.createElement(lab_1.TimePicker, __assign({}, restOfProps, { clearable: clearable, inputFormat: inputFormat, label: label, onChange: handleOnChange, renderInput: function (params) { return react_1.default.createElement(material_1.TextField, __assign({}, params, InputProps, { size: (InputProps === null || InputProps === void 0 ? void 0 : InputProps.size) || 'small' })); }, value: value })));
|
|
80
|
+
return (react_1.default.createElement(lab_1.TimePicker, __assign({}, restOfProps, { clearable: clearable, inputFormat: inputFormat, label: label, onChange: handleOnChange, renderInput: function (params) { return (react_1.default.createElement(material_1.TextField, __assign({}, params, InputProps, { id: id.current, size: (InputProps === null || InputProps === void 0 ? void 0 : InputProps.size) || 'small' }))); }, value: value })));
|
|
79
81
|
}
|
|
80
82
|
exports.default = InputTime;
|