@pdg/react-form 1.0.141 → 1.0.143
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.
|
@@ -4,6 +4,7 @@ import { PartialPick, CommonSxProps } from '../../@types';
|
|
|
4
4
|
import { FormContextValue } from '../../FormContext';
|
|
5
5
|
import { FormDividerProps } from '../FormDivider';
|
|
6
6
|
export interface FormRowProps extends CommonSxProps, PartialPick<FormContextValue, 'variant' | 'size' | 'color' | 'spacing' | 'focused' | 'labelShrink' | 'fullWidth'>, PartialPick<FormDividerProps, 'icon' | 'label' | 'line' | 'lineVerticalMargin' | 'hidden' | 'warning'>, PartialPick<FormHelperTextProps, 'error'> {
|
|
7
|
+
fullHeight?: boolean;
|
|
7
8
|
helperText?: ReactNode;
|
|
8
9
|
}
|
|
9
10
|
export interface FormColsInRowMap {
|
package/dist/index.esm.js
CHANGED
|
@@ -834,7 +834,7 @@ var templateObject_1$g;var FormRow = React.forwardRef(function (_a, ref) {
|
|
|
834
834
|
* ******************************************************************************************************************/
|
|
835
835
|
var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initSpacing = _a.spacing, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth,
|
|
836
836
|
//----------------------------------------------------------------------------------------------------------------
|
|
837
|
-
icon = _a.icon, label = _a.label, line = _a.line, lineVerticalMargin = _a.lineVerticalMargin,
|
|
837
|
+
icon = _a.icon, label = _a.label, line = _a.line, lineVerticalMargin = _a.lineVerticalMargin, fullHeight = _a.fullHeight,
|
|
838
838
|
//----------------------------------------------------------------------------------------------------------------
|
|
839
839
|
hidden = _a.hidden, error = _a.error, warning = _a.warning, helperText = _a.helperText,
|
|
840
840
|
//----------------------------------------------------------------------------------------------------------------
|
|
@@ -863,8 +863,11 @@ var templateObject_1$g;var FormRow = React.forwardRef(function (_a, ref) {
|
|
|
863
863
|
if (hidden) {
|
|
864
864
|
style.display = 'none';
|
|
865
865
|
}
|
|
866
|
+
if (fullHeight) {
|
|
867
|
+
style.height = '100%';
|
|
868
|
+
}
|
|
866
869
|
return style;
|
|
867
|
-
}, [hidden, initStyle]);
|
|
870
|
+
}, [fullHeight, hidden, initStyle]);
|
|
868
871
|
/********************************************************************************************************************
|
|
869
872
|
* Function - makeFormColXs
|
|
870
873
|
* ******************************************************************************************************************/
|
|
@@ -897,10 +900,10 @@ var templateObject_1$g;var FormRow = React.forwardRef(function (_a, ref) {
|
|
|
897
900
|
* ******************************************************************************************************************/
|
|
898
901
|
return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth, formColAutoXs: formColAutoXs, onAddFormCol: handleAddFormCol, onRemoveFormCol: handleRemoveFormCol }) },
|
|
899
902
|
React.createElement(Grid, { ref: ref, size: { xs: 12 }, className: classNames(className, 'FormRow'), style: style, sx: sx },
|
|
900
|
-
React.createElement(Grid, { container: true, spacing: spacing },
|
|
903
|
+
React.createElement(Grid, { container: true, spacing: spacing, style: fullHeight ? { height: '100%' } : undefined },
|
|
901
904
|
(icon || label || line) && (React.createElement(FormDivider, { className: classNames(className, 'FormRow-header'), size: size, icon: icon, color: color, label: label, line: line, error: error, warning: warning, lineVerticalMargin: lineVerticalMargin, hidden: hidden })),
|
|
902
|
-
React.createElement(StyledWrapGrid, { size: { xs: 12 }, className: 'FormRow-body' },
|
|
903
|
-
React.createElement(Grid, { className: 'FormRow-content', container: true, spacing: spacing, direction: 'row', style: { flexWrap: 'nowrap' } }, children),
|
|
905
|
+
React.createElement(StyledWrapGrid, { size: { xs: 12 }, className: 'FormRow-body', style: fullHeight ? { height: '100%' } : undefined },
|
|
906
|
+
React.createElement(Grid, { className: 'FormRow-content', container: true, spacing: spacing, direction: 'row', style: { flexWrap: 'nowrap', height: fullHeight ? '100%' : undefined } }, children),
|
|
904
907
|
helperText && (React.createElement(FormHelperText, { className: 'FormRow-helper-text', component: 'div', error: error }, helperText)))))));
|
|
905
908
|
});var StyledFormLabelContainerDiv = styled('div')(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n position: relative;\n height: 20px;\n"], ["\n position: relative;\n height: 20px;\n"])));
|
|
906
909
|
var StyledFormLabel = styled(FormLabel$1)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n position: absolute;\n left: 5px;\n top: 0;\n"], ["\n position: absolute;\n left: 5px;\n top: 0;\n"])));
|
|
@@ -909,7 +912,7 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
|
|
|
909
912
|
/********************************************************************************************************************
|
|
910
913
|
* ID
|
|
911
914
|
* ******************************************************************************************************************/
|
|
912
|
-
var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initSpacing = _a.spacing, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth,
|
|
915
|
+
var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initSpacing = _a.spacing, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, fullHeight = _a.fullHeight,
|
|
913
916
|
//----------------------------------------------------------------------------------------------------------------
|
|
914
917
|
initGap = _a.gap, icon = _a.icon, label = _a.label, hidden = _a.hidden, error = _a.error, warning = _a.warning, helperText = _a.helperText, helperTextShift = _a.helperTextShift,
|
|
915
918
|
//----------------------------------------------------------------------------------------------------------------
|
|
@@ -920,7 +923,7 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
|
|
|
920
923
|
* ******************************************************************************************************************/
|
|
921
924
|
var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formSpacing = _b.spacing, formFormColGap = _b.formColGap, formFocused = _b.focused, formLabelShrink = _b.labelShrink, formFullWidth = _b.fullWidth, formColAutoXs = _b.formColAutoXs, onAddFormCol = _b.onAddFormCol, onRemoveFormCol = _b.onRemoveFormCol, otherFormState = __rest(_b, ["variant", "size", "color", "spacing", "formColGap", "focused", "labelShrink", "fullWidth", "formColAutoXs", "onAddFormCol", "onRemoveFormCol"]);
|
|
922
925
|
/********************************************************************************************************************
|
|
923
|
-
*
|
|
926
|
+
* Variable - FormState
|
|
924
927
|
* ******************************************************************************************************************/
|
|
925
928
|
var variant = ifUndefined(initVariant, formVariant);
|
|
926
929
|
var size = ifUndefined(initSize, formSize);
|
|
@@ -930,6 +933,19 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
|
|
|
930
933
|
var labelShrink = ifUndefined(initLabelShrink, formLabelShrink);
|
|
931
934
|
var fullWidth = ifUndefined(initFullWidth, formFullWidth);
|
|
932
935
|
var formColGap = ifUndefined(initGap, formFormColGap);
|
|
936
|
+
/********************************************************************************************************************
|
|
937
|
+
* Memo
|
|
938
|
+
* ******************************************************************************************************************/
|
|
939
|
+
var style = useMemo(function () {
|
|
940
|
+
var newStyle = __assign({}, initStyle);
|
|
941
|
+
if (hidden) {
|
|
942
|
+
newStyle.display = 'none';
|
|
943
|
+
}
|
|
944
|
+
if (fullHeight) {
|
|
945
|
+
newStyle.height = '100%';
|
|
946
|
+
}
|
|
947
|
+
return newStyle;
|
|
948
|
+
}, [fullHeight, hidden, initStyle]);
|
|
933
949
|
/********************************************************************************************************************
|
|
934
950
|
* ResizeDetector
|
|
935
951
|
* ******************************************************************************************************************/
|
|
@@ -967,7 +983,7 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
|
|
|
967
983
|
return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth, formColGap: formColGap, formColXs: xs || formColAutoXs || 12, formColWidth: formColWidth, formColWithLabel: !!label, formColWithHelperText: !!helperText }) },
|
|
968
984
|
React.createElement(Grid, { ref: function (ref) {
|
|
969
985
|
gridRef.current = ref;
|
|
970
|
-
}, size: { xs: xs || formColAutoXs || 12 }, className: classNames(className, 'FormCol', !!label && 'with-label', !!helperText && 'with-helper-text'), style:
|
|
986
|
+
}, size: { xs: xs || formColAutoXs || 12 }, className: classNames(className, 'FormCol', !!label && 'with-label', !!helperText && 'with-helper-text'), style: style, sx: sx },
|
|
971
987
|
React.createElement("div", null,
|
|
972
988
|
label && (React.createElement("div", { className: 'FormCol-header' },
|
|
973
989
|
React.createElement(StyledFormLabelContainerDiv, null,
|
|
@@ -982,7 +998,7 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
|
|
|
982
998
|
/********************************************************************************************************************
|
|
983
999
|
* State
|
|
984
1000
|
* ******************************************************************************************************************/
|
|
985
|
-
var children = _a.children, hidden = _a.hidden;
|
|
1001
|
+
var children = _a.children, hidden = _a.hidden, initStyle = _a.style;
|
|
986
1002
|
var _b = useFormState(), spacing = _b.spacing, fullHeight = _b.fullHeight;
|
|
987
1003
|
/********************************************************************************************************************
|
|
988
1004
|
* ResizeDetector
|
|
@@ -992,7 +1008,13 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
|
|
|
992
1008
|
/********************************************************************************************************************
|
|
993
1009
|
* Style
|
|
994
1010
|
* ******************************************************************************************************************/
|
|
995
|
-
var style = useMemo(function () {
|
|
1011
|
+
var style = useMemo(function () {
|
|
1012
|
+
var newStyle = __assign({}, initStyle);
|
|
1013
|
+
if (hidden) {
|
|
1014
|
+
newStyle.display = 'none';
|
|
1015
|
+
}
|
|
1016
|
+
return newStyle;
|
|
1017
|
+
}, [hidden, initStyle]);
|
|
996
1018
|
var contentStyle = useMemo(function () {
|
|
997
1019
|
return fullHeight
|
|
998
1020
|
? {
|
|
@@ -1010,7 +1032,7 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
|
|
|
1010
1032
|
}
|
|
1011
1033
|
: undefined, className: 'FormBody', style: style },
|
|
1012
1034
|
React.createElement(StyledContentDiv, { style: contentStyle },
|
|
1013
|
-
React.createElement(Grid, { container: true, spacing: spacing, direction: 'column' }, children))));
|
|
1035
|
+
React.createElement(Grid, { container: true, spacing: spacing, direction: 'column', style: fullHeight ? { height: '100%' } : undefined }, children))));
|
|
1014
1036
|
};var FormFooter = function (_a) {
|
|
1015
1037
|
var children = _a.children, noLine = _a.noLine, hidden = _a.hidden;
|
|
1016
1038
|
var spacing = useFormState().spacing;
|
|
@@ -1412,7 +1434,7 @@ FormText.displayName = 'FormText';var FormTagText = React.forwardRef(function (_
|
|
|
1412
1434
|
/********************************************************************************************************************
|
|
1413
1435
|
* Render
|
|
1414
1436
|
* ******************************************************************************************************************/
|
|
1415
|
-
return (React.createElement(StyledFormText, __assign({ ref: ref }, props, { value: valueRef.current, onChange: handleChange, onKeyDown: handleKeyDown, onBlur: handleBlur })));
|
|
1437
|
+
return (React.createElement(StyledFormText, __assign({ ref: ref }, props, { clear: false, value: valueRef.current, onChange: handleChange, onKeyDown: handleKeyDown, onBlur: handleBlur })));
|
|
1416
1438
|
});
|
|
1417
1439
|
/********************************************************************************************************************
|
|
1418
1440
|
* Styled Components
|
|
@@ -1423,11 +1445,15 @@ var FormTag = React.forwardRef(function (_a, ref) {
|
|
|
1423
1445
|
/********************************************************************************************************************
|
|
1424
1446
|
* FormState
|
|
1425
1447
|
* ******************************************************************************************************************/
|
|
1426
|
-
var
|
|
1427
|
-
|
|
1448
|
+
var initVariant = _a.variant, initSize = _a.size,
|
|
1449
|
+
//----------------------------------------------------------------------------------------------------------------
|
|
1450
|
+
className = _a.className, name = _a.name, _b = _a.value, initValue = _b === void 0 ? _emptyValue : _b, exceptValue = _a.exceptValue, _c = _a.clear, clear = _c === void 0 ? true : _c, required = _a.required, readOnly = _a.readOnly, maxLength = _a.maxLength, initDisabled = _a.disabled, initFullWidth = _a.fullWidth, initError = _a.error, helperText = _a.helperText, _d = _a.formValueSeparator, formValueSeparator = _d === void 0 ? ',' : _d, formValueSort = _a.formValueSort, limitTags = _a.limitTags, getLimitTagsText = _a.getLimitTagsText, slotProps = _a.slotProps, onAppendTag = _a.onAppendTag, onRemoveTag = _a.onRemoveTag, onValidate = _a.onValidate, onChange = _a.onChange, onValue = _a.onValue, props = __rest(_a, ["variant", "size", "className", "name", "value", "exceptValue", "clear", "required", "readOnly", "maxLength", "disabled", "fullWidth", "error", "helperText", "formValueSeparator", "formValueSort", "limitTags", "getLimitTagsText", "slotProps", "onAppendTag", "onRemoveTag", "onValidate", "onChange", "onValue"]);
|
|
1451
|
+
var _e = useFormState(), formVariant = _e.variant, formSize = _e.size, formFullWidth = _e.fullWidth, formDisabled = _e.disabled, onAddValueItem = _e.onAddValueItem, onValueChange = _e.onValueChange, onValueChangeByUser = _e.onValueChangeByUser, onRequestSearchSubmit = _e.onRequestSearchSubmit, otherFormState = __rest(_e, ["variant", "size", "fullWidth", "disabled", "onAddValueItem", "onValueChange", "onValueChangeByUser", "onRequestSearchSubmit"]);
|
|
1428
1452
|
/********************************************************************************************************************
|
|
1429
1453
|
* FormState - Variables
|
|
1430
1454
|
* ******************************************************************************************************************/
|
|
1455
|
+
var variant = ifUndefined(initVariant, formVariant);
|
|
1456
|
+
var size = ifUndefined(initSize, formSize);
|
|
1431
1457
|
var fullWidth = ifUndefined(initFullWidth, formFullWidth);
|
|
1432
1458
|
/********************************************************************************************************************
|
|
1433
1459
|
* State
|
|
@@ -1554,16 +1580,19 @@ var FormTag = React.forwardRef(function (_a, ref) {
|
|
|
1554
1580
|
}
|
|
1555
1581
|
}, [ref, getCommands]);
|
|
1556
1582
|
var handleRenderValue = useCallback(function (tags) {
|
|
1557
|
-
return tags.map(function (tag) { return (React.createElement(Chip, { className: 'MuiAutocomplete-tag', key: tag, label: tag, size: 'small', disabled: readOnly || disabled, onDelete: readOnly || disabled ? undefined : function () { return removeTag(tag); } })); });
|
|
1558
|
-
}, [disabled, readOnly, removeTag]);
|
|
1583
|
+
return tags.map(function (tag) { return (React.createElement(Chip, { className: 'MuiAutocomplete-tag', key: tag, label: tag, size: 'small', style: variant === 'outlined' && size === 'small' ? { marginTop: 2, marginBottom: 0 } : undefined, disabled: readOnly || disabled, onDelete: readOnly || disabled ? undefined : function () { return removeTag(tag); } })); });
|
|
1584
|
+
}, [disabled, readOnly, removeTag, size, variant]);
|
|
1559
1585
|
/********************************************************************************************************************
|
|
1560
1586
|
* Render
|
|
1561
1587
|
* ******************************************************************************************************************/
|
|
1562
1588
|
var handleRenderInput = useCallback(function (params) {
|
|
1589
|
+
var _a, _b;
|
|
1563
1590
|
var htmlInputProps = __assign(__assign({}, params.inputProps), { className: classNames('FormTag-Input', readOnly && 'Mui-disabled'), readOnly: readOnly, tabIndex: readOnly ? -1 : undefined, maxLength: maxLength });
|
|
1564
1591
|
delete htmlInputProps.onChange;
|
|
1565
1592
|
delete htmlInputProps.value;
|
|
1566
|
-
var renderProps = __assign({ name: name, clear: clear, className: classNames(className, 'FormValueItem', 'FormTag'), error: error, disabled: disabled, fullWidth: fullWidth, required: required, exceptValue: exceptValue, slotProps: __assign(__assign({}, slotProps), { inputLabel: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputLabel), { htmlFor: params.InputLabelProps.htmlFor, id: params.InputLabelProps.id }), input: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input), {
|
|
1593
|
+
var renderProps = __assign({ name: name, clear: clear, className: classNames(className, 'FormValueItem', 'FormTag'), error: error, disabled: disabled, fullWidth: fullWidth, required: required, exceptValue: exceptValue, slotProps: __assign(__assign({}, slotProps), { inputLabel: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputLabel), { htmlFor: params.InputLabelProps.htmlFor, id: params.InputLabelProps.id }), input: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input), { style: __assign(__assign({}, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _a === void 0 ? void 0 : _a.style), (variant === 'outlined' && size === 'small'
|
|
1594
|
+
? { paddingTop: 7, paddingBottom: 6, marginTop: -2 }
|
|
1595
|
+
: undefined)), className: params.InputProps.className, ref: params.InputProps.ref, startAdornment: params.InputProps.startAdornment }), htmlInput: __assign(__assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.htmlInput), htmlInputProps), { style: __assign(__assign(__assign({}, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.htmlInput) === null || _b === void 0 ? void 0 : _b.style), htmlInputProps.style), (variant === 'outlined' && size === 'small' ? { marginTop: 4, paddingBottom: 2 } : undefined)) }) }), helperText: error ? errorHelperText : helperText, onAppendTag: appendTag }, props);
|
|
1567
1596
|
return React.createElement(FormTagText, __assign({ ref: handleRef }, renderProps));
|
|
1568
1597
|
}, [
|
|
1569
1598
|
appendTag,
|
|
@@ -1581,9 +1610,11 @@ var FormTag = React.forwardRef(function (_a, ref) {
|
|
|
1581
1610
|
props,
|
|
1582
1611
|
readOnly,
|
|
1583
1612
|
required,
|
|
1613
|
+
size,
|
|
1584
1614
|
slotProps,
|
|
1615
|
+
variant,
|
|
1585
1616
|
]);
|
|
1586
|
-
return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { fullWidth: formFullWidth, onAddValueItem: handleAddValueItem, onValueChange: function () { }, onValueChangeByUser: function () { }, onRequestSearchSubmit: function () { } }) },
|
|
1617
|
+
return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: formVariant, size: formSize, fullWidth: formFullWidth, onAddValueItem: handleAddValueItem, onValueChange: function () { }, onValueChangeByUser: function () { }, onRequestSearchSubmit: function () { } }) },
|
|
1587
1618
|
React.createElement(Autocomplete, { options: [], multiple: true, freeSolo: true, value: value, readOnly: readOnly, disableClearable: true, limitTags: limitTags, getLimitTagsText: getLimitTagsText, disabled: disabled, renderValue: handleRenderValue, style: { display: fullWidth ? 'block' : 'inline-block', width: fullWidth ? '100%' : undefined }, renderInput: handleRenderInput })));
|
|
1588
1619
|
});
|
|
1589
1620
|
FormTag.displayName = 'FormTag';var FormEmail = React.forwardRef(function (_a, ref) {
|
|
@@ -4483,25 +4514,6 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
|
|
|
4483
4514
|
/********************************************************************************************************************
|
|
4484
4515
|
* Render
|
|
4485
4516
|
* ******************************************************************************************************************/
|
|
4486
|
-
// const realComponentValue = useMemo(() => {
|
|
4487
|
-
// let newRealValue = componentValue;
|
|
4488
|
-
// if (items && value != null) {
|
|
4489
|
-
// if (Array.isArray(newRealValue)) {
|
|
4490
|
-
// const stringRealValues = newRealValue.map((v) => v.toString());
|
|
4491
|
-
// if (multiple) {
|
|
4492
|
-
// const foundItems = items.filter((v) => stringRealValues.includes(v.value.toString()));
|
|
4493
|
-
// newRealValue = foundItems.map((v) => v.value) as any;
|
|
4494
|
-
// }
|
|
4495
|
-
// } else if (newRealValue != null) {
|
|
4496
|
-
// const stringRealValue = newRealValue.toString();
|
|
4497
|
-
// const foundItem = items.find((v) => v.value.toString() === stringRealValue);
|
|
4498
|
-
// if (foundItem) {
|
|
4499
|
-
// newRealValue = foundItem.value as any;
|
|
4500
|
-
// }
|
|
4501
|
-
// }
|
|
4502
|
-
// }
|
|
4503
|
-
// return newRealValue;
|
|
4504
|
-
// }, [componentValue, items, multiple, value]);
|
|
4505
4517
|
return (React.createElement(Autocomplete, { options: items || [], className: classNames(className, 'FormValueItem', 'FormAutocomplete'), sx: sx, multiple: multiple, fullWidth: !width && fullWidth, openOnFocus: openOnFocus, disableClearable: disableClearable, disablePortal: disablePortal, noOptionsText: noOptionsText, value: componentValue, style: style, isOptionEqualToValue: function (option, value) { return option.value === value.value; }, getOptionDisabled: handleGetOptionDisabled, disabled: disabled, readOnly: readOnly, loading: loading || isOnGetItemLoading, loadingText: loadingText, limitTags: limitTags, getLimitTagsText: getLimitTagsText, onChange: function (e, value, reason, details) { return handleChange(value, reason, details); }, renderOption: function (props, option) { return (React.createElement("li", __assign({}, props, { key: "".concat(option.value) }), onRenderItem ? onRenderItem(option) : option.label)); }, onInputChange: function (event, newInputValue, reason) {
|
|
4506
4518
|
if (reason === 'input') {
|
|
4507
4519
|
setInputValue(newInputValue);
|
|
@@ -4511,17 +4523,22 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
|
|
|
4511
4523
|
}
|
|
4512
4524
|
}, renderValue: function (value, getItemProps) {
|
|
4513
4525
|
if (Array.isArray(value)) {
|
|
4514
|
-
return value.map(function (option, index) { return (React.createElement(Chip, __assign({ size: 'small', label: onRenderTag ? onRenderTag(option) : option.label }, getItemProps({ index: index })))); });
|
|
4526
|
+
return value.map(function (option, index) { return (React.createElement(Chip, __assign({ size: 'small', style: variant === 'outlined' && size === 'small' ? { marginTop: 2, marginBottom: 0 } : undefined, label: onRenderTag ? onRenderTag(option) : option.label }, getItemProps({ index: index })))); });
|
|
4515
4527
|
}
|
|
4516
4528
|
else {
|
|
4517
|
-
return (React.createElement(Chip, __assign({ size: 'small', label: onRenderTag ? onRenderTag(value) : value.label }, getItemProps({ index: 0 }))));
|
|
4529
|
+
return (React.createElement(Chip, __assign({ size: 'small', style: variant === 'outlined' && size === 'small' ? { marginTop: 2, marginBottom: 0 } : undefined, label: onRenderTag ? onRenderTag(value) : value.label }, getItemProps({ index: 0 }))));
|
|
4518
4530
|
}
|
|
4519
4531
|
}, renderInput: function (params) {
|
|
4532
|
+
var _a;
|
|
4520
4533
|
var slotProps = {
|
|
4521
|
-
input: __assign(__assign({}, params.InputProps), {
|
|
4534
|
+
input: __assign(__assign({}, params.InputProps), { style: {
|
|
4535
|
+
paddingTop: variant === 'outlined' && size === 'small' ? 7 : undefined,
|
|
4536
|
+
paddingBottom: variant === 'outlined' && size === 'small' ? 5 : undefined,
|
|
4537
|
+
marginTop: variant === 'outlined' && size === 'small' ? -1 : undefined,
|
|
4538
|
+
}, endAdornment: (React.createElement(React.Fragment, null,
|
|
4522
4539
|
loading || isOnGetItemLoading ? React.createElement(CircularProgress, { color: 'inherit', size: 20 }) : null,
|
|
4523
4540
|
params.InputProps.endAdornment)) }),
|
|
4524
|
-
htmlInput: __assign(__assign({}, params.inputProps), { tabIndex: readOnly || disabled ? -1 : undefined }),
|
|
4541
|
+
htmlInput: __assign(__assign({}, params.inputProps), { style: __assign(__assign({}, (_a = params.inputProps) === null || _a === void 0 ? void 0 : _a.style), (variant === 'outlined' && size === 'small' ? { marginTop: 1 } : undefined)), tabIndex: readOnly || disabled ? -1 : undefined }),
|
|
4525
4542
|
};
|
|
4526
4543
|
return (React.createElement(FormTextField, __assign({}, params, { ref: textFieldRef, name: name, variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, labelShrink: labelShrink, required: required, focused: focused, error: error, readOnly: readOnly, helperText: error ? errorHelperText : helperText, slotProps: slotProps, placeholder: placeholder, noFormValueItem: true })));
|
|
4527
4544
|
} }));
|
package/dist/index.js
CHANGED
|
@@ -834,7 +834,7 @@ var templateObject_1$g;var FormRow = React.forwardRef(function (_a, ref) {
|
|
|
834
834
|
* ******************************************************************************************************************/
|
|
835
835
|
var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initSpacing = _a.spacing, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth,
|
|
836
836
|
//----------------------------------------------------------------------------------------------------------------
|
|
837
|
-
icon = _a.icon, label = _a.label, line = _a.line, lineVerticalMargin = _a.lineVerticalMargin,
|
|
837
|
+
icon = _a.icon, label = _a.label, line = _a.line, lineVerticalMargin = _a.lineVerticalMargin, fullHeight = _a.fullHeight,
|
|
838
838
|
//----------------------------------------------------------------------------------------------------------------
|
|
839
839
|
hidden = _a.hidden, error = _a.error, warning = _a.warning, helperText = _a.helperText,
|
|
840
840
|
//----------------------------------------------------------------------------------------------------------------
|
|
@@ -863,8 +863,11 @@ var templateObject_1$g;var FormRow = React.forwardRef(function (_a, ref) {
|
|
|
863
863
|
if (hidden) {
|
|
864
864
|
style.display = 'none';
|
|
865
865
|
}
|
|
866
|
+
if (fullHeight) {
|
|
867
|
+
style.height = '100%';
|
|
868
|
+
}
|
|
866
869
|
return style;
|
|
867
|
-
}, [hidden, initStyle]);
|
|
870
|
+
}, [fullHeight, hidden, initStyle]);
|
|
868
871
|
/********************************************************************************************************************
|
|
869
872
|
* Function - makeFormColXs
|
|
870
873
|
* ******************************************************************************************************************/
|
|
@@ -897,10 +900,10 @@ var templateObject_1$g;var FormRow = React.forwardRef(function (_a, ref) {
|
|
|
897
900
|
* ******************************************************************************************************************/
|
|
898
901
|
return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth, formColAutoXs: formColAutoXs, onAddFormCol: handleAddFormCol, onRemoveFormCol: handleRemoveFormCol }) },
|
|
899
902
|
React.createElement(material.Grid, { ref: ref, size: { xs: 12 }, className: classNames(className, 'FormRow'), style: style, sx: sx },
|
|
900
|
-
React.createElement(material.Grid, { container: true, spacing: spacing },
|
|
903
|
+
React.createElement(material.Grid, { container: true, spacing: spacing, style: fullHeight ? { height: '100%' } : undefined },
|
|
901
904
|
(icon || label || line) && (React.createElement(FormDivider, { className: classNames(className, 'FormRow-header'), size: size, icon: icon, color: color, label: label, line: line, error: error, warning: warning, lineVerticalMargin: lineVerticalMargin, hidden: hidden })),
|
|
902
|
-
React.createElement(StyledWrapGrid, { size: { xs: 12 }, className: 'FormRow-body' },
|
|
903
|
-
React.createElement(material.Grid, { className: 'FormRow-content', container: true, spacing: spacing, direction: 'row', style: { flexWrap: 'nowrap' } }, children),
|
|
905
|
+
React.createElement(StyledWrapGrid, { size: { xs: 12 }, className: 'FormRow-body', style: fullHeight ? { height: '100%' } : undefined },
|
|
906
|
+
React.createElement(material.Grid, { className: 'FormRow-content', container: true, spacing: spacing, direction: 'row', style: { flexWrap: 'nowrap', height: fullHeight ? '100%' : undefined } }, children),
|
|
904
907
|
helperText && (React.createElement(material.FormHelperText, { className: 'FormRow-helper-text', component: 'div', error: error }, helperText)))))));
|
|
905
908
|
});var StyledFormLabelContainerDiv = material.styled('div')(templateObject_1$f || (templateObject_1$f = __makeTemplateObject(["\n position: relative;\n height: 20px;\n"], ["\n position: relative;\n height: 20px;\n"])));
|
|
906
909
|
var StyledFormLabel = material.styled(FormLabel$1)(templateObject_2$8 || (templateObject_2$8 = __makeTemplateObject(["\n position: absolute;\n left: 5px;\n top: 0;\n"], ["\n position: absolute;\n left: 5px;\n top: 0;\n"])));
|
|
@@ -909,7 +912,7 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
|
|
|
909
912
|
/********************************************************************************************************************
|
|
910
913
|
* ID
|
|
911
914
|
* ******************************************************************************************************************/
|
|
912
|
-
var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initSpacing = _a.spacing, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth,
|
|
915
|
+
var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initSpacing = _a.spacing, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, fullHeight = _a.fullHeight,
|
|
913
916
|
//----------------------------------------------------------------------------------------------------------------
|
|
914
917
|
initGap = _a.gap, icon = _a.icon, label = _a.label, hidden = _a.hidden, error = _a.error, warning = _a.warning, helperText = _a.helperText, helperTextShift = _a.helperTextShift,
|
|
915
918
|
//----------------------------------------------------------------------------------------------------------------
|
|
@@ -920,7 +923,7 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
|
|
|
920
923
|
* ******************************************************************************************************************/
|
|
921
924
|
var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formSpacing = _b.spacing, formFormColGap = _b.formColGap, formFocused = _b.focused, formLabelShrink = _b.labelShrink, formFullWidth = _b.fullWidth, formColAutoXs = _b.formColAutoXs, onAddFormCol = _b.onAddFormCol, onRemoveFormCol = _b.onRemoveFormCol, otherFormState = __rest(_b, ["variant", "size", "color", "spacing", "formColGap", "focused", "labelShrink", "fullWidth", "formColAutoXs", "onAddFormCol", "onRemoveFormCol"]);
|
|
922
925
|
/********************************************************************************************************************
|
|
923
|
-
*
|
|
926
|
+
* Variable - FormState
|
|
924
927
|
* ******************************************************************************************************************/
|
|
925
928
|
var variant = util.ifUndefined(initVariant, formVariant);
|
|
926
929
|
var size = util.ifUndefined(initSize, formSize);
|
|
@@ -930,6 +933,19 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
|
|
|
930
933
|
var labelShrink = util.ifUndefined(initLabelShrink, formLabelShrink);
|
|
931
934
|
var fullWidth = util.ifUndefined(initFullWidth, formFullWidth);
|
|
932
935
|
var formColGap = util.ifUndefined(initGap, formFormColGap);
|
|
936
|
+
/********************************************************************************************************************
|
|
937
|
+
* Memo
|
|
938
|
+
* ******************************************************************************************************************/
|
|
939
|
+
var style = React.useMemo(function () {
|
|
940
|
+
var newStyle = __assign({}, initStyle);
|
|
941
|
+
if (hidden) {
|
|
942
|
+
newStyle.display = 'none';
|
|
943
|
+
}
|
|
944
|
+
if (fullHeight) {
|
|
945
|
+
newStyle.height = '100%';
|
|
946
|
+
}
|
|
947
|
+
return newStyle;
|
|
948
|
+
}, [fullHeight, hidden, initStyle]);
|
|
933
949
|
/********************************************************************************************************************
|
|
934
950
|
* ResizeDetector
|
|
935
951
|
* ******************************************************************************************************************/
|
|
@@ -967,7 +983,7 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
|
|
|
967
983
|
return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth, formColGap: formColGap, formColXs: xs || formColAutoXs || 12, formColWidth: formColWidth, formColWithLabel: !!label, formColWithHelperText: !!helperText }) },
|
|
968
984
|
React.createElement(material.Grid, { ref: function (ref) {
|
|
969
985
|
gridRef.current = ref;
|
|
970
|
-
}, size: { xs: xs || formColAutoXs || 12 }, className: classNames(className, 'FormCol', !!label && 'with-label', !!helperText && 'with-helper-text'), style:
|
|
986
|
+
}, size: { xs: xs || formColAutoXs || 12 }, className: classNames(className, 'FormCol', !!label && 'with-label', !!helperText && 'with-helper-text'), style: style, sx: sx },
|
|
971
987
|
React.createElement("div", null,
|
|
972
988
|
label && (React.createElement("div", { className: 'FormCol-header' },
|
|
973
989
|
React.createElement(StyledFormLabelContainerDiv, null,
|
|
@@ -982,7 +998,7 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
|
|
|
982
998
|
/********************************************************************************************************************
|
|
983
999
|
* State
|
|
984
1000
|
* ******************************************************************************************************************/
|
|
985
|
-
var children = _a.children, hidden = _a.hidden;
|
|
1001
|
+
var children = _a.children, hidden = _a.hidden, initStyle = _a.style;
|
|
986
1002
|
var _b = useFormState(), spacing = _b.spacing, fullHeight = _b.fullHeight;
|
|
987
1003
|
/********************************************************************************************************************
|
|
988
1004
|
* ResizeDetector
|
|
@@ -992,7 +1008,13 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
|
|
|
992
1008
|
/********************************************************************************************************************
|
|
993
1009
|
* Style
|
|
994
1010
|
* ******************************************************************************************************************/
|
|
995
|
-
var style = React.useMemo(function () {
|
|
1011
|
+
var style = React.useMemo(function () {
|
|
1012
|
+
var newStyle = __assign({}, initStyle);
|
|
1013
|
+
if (hidden) {
|
|
1014
|
+
newStyle.display = 'none';
|
|
1015
|
+
}
|
|
1016
|
+
return newStyle;
|
|
1017
|
+
}, [hidden, initStyle]);
|
|
996
1018
|
var contentStyle = React.useMemo(function () {
|
|
997
1019
|
return fullHeight
|
|
998
1020
|
? {
|
|
@@ -1010,7 +1032,7 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
|
|
|
1010
1032
|
}
|
|
1011
1033
|
: undefined, className: 'FormBody', style: style },
|
|
1012
1034
|
React.createElement(StyledContentDiv, { style: contentStyle },
|
|
1013
|
-
React.createElement(material.Grid, { container: true, spacing: spacing, direction: 'column' }, children))));
|
|
1035
|
+
React.createElement(material.Grid, { container: true, spacing: spacing, direction: 'column', style: fullHeight ? { height: '100%' } : undefined }, children))));
|
|
1014
1036
|
};var FormFooter = function (_a) {
|
|
1015
1037
|
var children = _a.children, noLine = _a.noLine, hidden = _a.hidden;
|
|
1016
1038
|
var spacing = useFormState().spacing;
|
|
@@ -1412,7 +1434,7 @@ FormText.displayName = 'FormText';var FormTagText = React.forwardRef(function (_
|
|
|
1412
1434
|
/********************************************************************************************************************
|
|
1413
1435
|
* Render
|
|
1414
1436
|
* ******************************************************************************************************************/
|
|
1415
|
-
return (React.createElement(StyledFormText, __assign({ ref: ref }, props, { value: valueRef.current, onChange: handleChange, onKeyDown: handleKeyDown, onBlur: handleBlur })));
|
|
1437
|
+
return (React.createElement(StyledFormText, __assign({ ref: ref }, props, { clear: false, value: valueRef.current, onChange: handleChange, onKeyDown: handleKeyDown, onBlur: handleBlur })));
|
|
1416
1438
|
});
|
|
1417
1439
|
/********************************************************************************************************************
|
|
1418
1440
|
* Styled Components
|
|
@@ -1423,11 +1445,15 @@ var FormTag = React.forwardRef(function (_a, ref) {
|
|
|
1423
1445
|
/********************************************************************************************************************
|
|
1424
1446
|
* FormState
|
|
1425
1447
|
* ******************************************************************************************************************/
|
|
1426
|
-
var
|
|
1427
|
-
|
|
1448
|
+
var initVariant = _a.variant, initSize = _a.size,
|
|
1449
|
+
//----------------------------------------------------------------------------------------------------------------
|
|
1450
|
+
className = _a.className, name = _a.name, _b = _a.value, initValue = _b === void 0 ? _emptyValue : _b, exceptValue = _a.exceptValue, _c = _a.clear, clear = _c === void 0 ? true : _c, required = _a.required, readOnly = _a.readOnly, maxLength = _a.maxLength, initDisabled = _a.disabled, initFullWidth = _a.fullWidth, initError = _a.error, helperText = _a.helperText, _d = _a.formValueSeparator, formValueSeparator = _d === void 0 ? ',' : _d, formValueSort = _a.formValueSort, limitTags = _a.limitTags, getLimitTagsText = _a.getLimitTagsText, slotProps = _a.slotProps, onAppendTag = _a.onAppendTag, onRemoveTag = _a.onRemoveTag, onValidate = _a.onValidate, onChange = _a.onChange, onValue = _a.onValue, props = __rest(_a, ["variant", "size", "className", "name", "value", "exceptValue", "clear", "required", "readOnly", "maxLength", "disabled", "fullWidth", "error", "helperText", "formValueSeparator", "formValueSort", "limitTags", "getLimitTagsText", "slotProps", "onAppendTag", "onRemoveTag", "onValidate", "onChange", "onValue"]);
|
|
1451
|
+
var _e = useFormState(), formVariant = _e.variant, formSize = _e.size, formFullWidth = _e.fullWidth, formDisabled = _e.disabled, onAddValueItem = _e.onAddValueItem, onValueChange = _e.onValueChange, onValueChangeByUser = _e.onValueChangeByUser, onRequestSearchSubmit = _e.onRequestSearchSubmit, otherFormState = __rest(_e, ["variant", "size", "fullWidth", "disabled", "onAddValueItem", "onValueChange", "onValueChangeByUser", "onRequestSearchSubmit"]);
|
|
1428
1452
|
/********************************************************************************************************************
|
|
1429
1453
|
* FormState - Variables
|
|
1430
1454
|
* ******************************************************************************************************************/
|
|
1455
|
+
var variant = util.ifUndefined(initVariant, formVariant);
|
|
1456
|
+
var size = util.ifUndefined(initSize, formSize);
|
|
1431
1457
|
var fullWidth = util.ifUndefined(initFullWidth, formFullWidth);
|
|
1432
1458
|
/********************************************************************************************************************
|
|
1433
1459
|
* State
|
|
@@ -1554,16 +1580,19 @@ var FormTag = React.forwardRef(function (_a, ref) {
|
|
|
1554
1580
|
}
|
|
1555
1581
|
}, [ref, getCommands]);
|
|
1556
1582
|
var handleRenderValue = React.useCallback(function (tags) {
|
|
1557
|
-
return tags.map(function (tag) { return (React.createElement(material.Chip, { className: 'MuiAutocomplete-tag', key: tag, label: tag, size: 'small', disabled: readOnly || disabled, onDelete: readOnly || disabled ? undefined : function () { return removeTag(tag); } })); });
|
|
1558
|
-
}, [disabled, readOnly, removeTag]);
|
|
1583
|
+
return tags.map(function (tag) { return (React.createElement(material.Chip, { className: 'MuiAutocomplete-tag', key: tag, label: tag, size: 'small', style: variant === 'outlined' && size === 'small' ? { marginTop: 2, marginBottom: 0 } : undefined, disabled: readOnly || disabled, onDelete: readOnly || disabled ? undefined : function () { return removeTag(tag); } })); });
|
|
1584
|
+
}, [disabled, readOnly, removeTag, size, variant]);
|
|
1559
1585
|
/********************************************************************************************************************
|
|
1560
1586
|
* Render
|
|
1561
1587
|
* ******************************************************************************************************************/
|
|
1562
1588
|
var handleRenderInput = React.useCallback(function (params) {
|
|
1589
|
+
var _a, _b;
|
|
1563
1590
|
var htmlInputProps = __assign(__assign({}, params.inputProps), { className: classNames('FormTag-Input', readOnly && 'Mui-disabled'), readOnly: readOnly, tabIndex: readOnly ? -1 : undefined, maxLength: maxLength });
|
|
1564
1591
|
delete htmlInputProps.onChange;
|
|
1565
1592
|
delete htmlInputProps.value;
|
|
1566
|
-
var renderProps = __assign({ name: name, clear: clear, className: classNames(className, 'FormValueItem', 'FormTag'), error: error, disabled: disabled, fullWidth: fullWidth, required: required, exceptValue: exceptValue, slotProps: __assign(__assign({}, slotProps), { inputLabel: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputLabel), { htmlFor: params.InputLabelProps.htmlFor, id: params.InputLabelProps.id }), input: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input), {
|
|
1593
|
+
var renderProps = __assign({ name: name, clear: clear, className: classNames(className, 'FormValueItem', 'FormTag'), error: error, disabled: disabled, fullWidth: fullWidth, required: required, exceptValue: exceptValue, slotProps: __assign(__assign({}, slotProps), { inputLabel: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputLabel), { htmlFor: params.InputLabelProps.htmlFor, id: params.InputLabelProps.id }), input: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input), { style: __assign(__assign({}, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _a === void 0 ? void 0 : _a.style), (variant === 'outlined' && size === 'small'
|
|
1594
|
+
? { paddingTop: 7, paddingBottom: 6, marginTop: -2 }
|
|
1595
|
+
: undefined)), className: params.InputProps.className, ref: params.InputProps.ref, startAdornment: params.InputProps.startAdornment }), htmlInput: __assign(__assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.htmlInput), htmlInputProps), { style: __assign(__assign(__assign({}, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.htmlInput) === null || _b === void 0 ? void 0 : _b.style), htmlInputProps.style), (variant === 'outlined' && size === 'small' ? { marginTop: 4, paddingBottom: 2 } : undefined)) }) }), helperText: error ? errorHelperText : helperText, onAppendTag: appendTag }, props);
|
|
1567
1596
|
return React.createElement(FormTagText, __assign({ ref: handleRef }, renderProps));
|
|
1568
1597
|
}, [
|
|
1569
1598
|
appendTag,
|
|
@@ -1581,9 +1610,11 @@ var FormTag = React.forwardRef(function (_a, ref) {
|
|
|
1581
1610
|
props,
|
|
1582
1611
|
readOnly,
|
|
1583
1612
|
required,
|
|
1613
|
+
size,
|
|
1584
1614
|
slotProps,
|
|
1615
|
+
variant,
|
|
1585
1616
|
]);
|
|
1586
|
-
return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { fullWidth: formFullWidth, onAddValueItem: handleAddValueItem, onValueChange: function () { }, onValueChangeByUser: function () { }, onRequestSearchSubmit: function () { } }) },
|
|
1617
|
+
return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: formVariant, size: formSize, fullWidth: formFullWidth, onAddValueItem: handleAddValueItem, onValueChange: function () { }, onValueChangeByUser: function () { }, onRequestSearchSubmit: function () { } }) },
|
|
1587
1618
|
React.createElement(material.Autocomplete, { options: [], multiple: true, freeSolo: true, value: value, readOnly: readOnly, disableClearable: true, limitTags: limitTags, getLimitTagsText: getLimitTagsText, disabled: disabled, renderValue: handleRenderValue, style: { display: fullWidth ? 'block' : 'inline-block', width: fullWidth ? '100%' : undefined }, renderInput: handleRenderInput })));
|
|
1588
1619
|
});
|
|
1589
1620
|
FormTag.displayName = 'FormTag';var FormEmail = React.forwardRef(function (_a, ref) {
|
|
@@ -4483,25 +4514,6 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
|
|
|
4483
4514
|
/********************************************************************************************************************
|
|
4484
4515
|
* Render
|
|
4485
4516
|
* ******************************************************************************************************************/
|
|
4486
|
-
// const realComponentValue = useMemo(() => {
|
|
4487
|
-
// let newRealValue = componentValue;
|
|
4488
|
-
// if (items && value != null) {
|
|
4489
|
-
// if (Array.isArray(newRealValue)) {
|
|
4490
|
-
// const stringRealValues = newRealValue.map((v) => v.toString());
|
|
4491
|
-
// if (multiple) {
|
|
4492
|
-
// const foundItems = items.filter((v) => stringRealValues.includes(v.value.toString()));
|
|
4493
|
-
// newRealValue = foundItems.map((v) => v.value) as any;
|
|
4494
|
-
// }
|
|
4495
|
-
// } else if (newRealValue != null) {
|
|
4496
|
-
// const stringRealValue = newRealValue.toString();
|
|
4497
|
-
// const foundItem = items.find((v) => v.value.toString() === stringRealValue);
|
|
4498
|
-
// if (foundItem) {
|
|
4499
|
-
// newRealValue = foundItem.value as any;
|
|
4500
|
-
// }
|
|
4501
|
-
// }
|
|
4502
|
-
// }
|
|
4503
|
-
// return newRealValue;
|
|
4504
|
-
// }, [componentValue, items, multiple, value]);
|
|
4505
4517
|
return (React.createElement(material.Autocomplete, { options: items || [], className: classNames(className, 'FormValueItem', 'FormAutocomplete'), sx: sx, multiple: multiple, fullWidth: !width && fullWidth, openOnFocus: openOnFocus, disableClearable: disableClearable, disablePortal: disablePortal, noOptionsText: noOptionsText, value: componentValue, style: style, isOptionEqualToValue: function (option, value) { return option.value === value.value; }, getOptionDisabled: handleGetOptionDisabled, disabled: disabled, readOnly: readOnly, loading: loading || isOnGetItemLoading, loadingText: loadingText, limitTags: limitTags, getLimitTagsText: getLimitTagsText, onChange: function (e, value, reason, details) { return handleChange(value, reason, details); }, renderOption: function (props, option) { return (React.createElement("li", __assign({}, props, { key: "".concat(option.value) }), onRenderItem ? onRenderItem(option) : option.label)); }, onInputChange: function (event, newInputValue, reason) {
|
|
4506
4518
|
if (reason === 'input') {
|
|
4507
4519
|
setInputValue(newInputValue);
|
|
@@ -4511,17 +4523,22 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
|
|
|
4511
4523
|
}
|
|
4512
4524
|
}, renderValue: function (value, getItemProps) {
|
|
4513
4525
|
if (Array.isArray(value)) {
|
|
4514
|
-
return value.map(function (option, index) { return (React.createElement(material.Chip, __assign({ size: 'small', label: onRenderTag ? onRenderTag(option) : option.label }, getItemProps({ index: index })))); });
|
|
4526
|
+
return value.map(function (option, index) { return (React.createElement(material.Chip, __assign({ size: 'small', style: variant === 'outlined' && size === 'small' ? { marginTop: 2, marginBottom: 0 } : undefined, label: onRenderTag ? onRenderTag(option) : option.label }, getItemProps({ index: index })))); });
|
|
4515
4527
|
}
|
|
4516
4528
|
else {
|
|
4517
|
-
return (React.createElement(material.Chip, __assign({ size: 'small', label: onRenderTag ? onRenderTag(value) : value.label }, getItemProps({ index: 0 }))));
|
|
4529
|
+
return (React.createElement(material.Chip, __assign({ size: 'small', style: variant === 'outlined' && size === 'small' ? { marginTop: 2, marginBottom: 0 } : undefined, label: onRenderTag ? onRenderTag(value) : value.label }, getItemProps({ index: 0 }))));
|
|
4518
4530
|
}
|
|
4519
4531
|
}, renderInput: function (params) {
|
|
4532
|
+
var _a;
|
|
4520
4533
|
var slotProps = {
|
|
4521
|
-
input: __assign(__assign({}, params.InputProps), {
|
|
4534
|
+
input: __assign(__assign({}, params.InputProps), { style: {
|
|
4535
|
+
paddingTop: variant === 'outlined' && size === 'small' ? 7 : undefined,
|
|
4536
|
+
paddingBottom: variant === 'outlined' && size === 'small' ? 5 : undefined,
|
|
4537
|
+
marginTop: variant === 'outlined' && size === 'small' ? -1 : undefined,
|
|
4538
|
+
}, endAdornment: (React.createElement(React.Fragment, null,
|
|
4522
4539
|
loading || isOnGetItemLoading ? React.createElement(material.CircularProgress, { color: 'inherit', size: 20 }) : null,
|
|
4523
4540
|
params.InputProps.endAdornment)) }),
|
|
4524
|
-
htmlInput: __assign(__assign({}, params.inputProps), { tabIndex: readOnly || disabled ? -1 : undefined }),
|
|
4541
|
+
htmlInput: __assign(__assign({}, params.inputProps), { style: __assign(__assign({}, (_a = params.inputProps) === null || _a === void 0 ? void 0 : _a.style), (variant === 'outlined' && size === 'small' ? { marginTop: 1 } : undefined)), tabIndex: readOnly || disabled ? -1 : undefined }),
|
|
4525
4542
|
};
|
|
4526
4543
|
return (React.createElement(FormTextField, __assign({}, params, { ref: textFieldRef, name: name, variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, labelShrink: labelShrink, required: required, focused: focused, error: error, readOnly: readOnly, helperText: error ? errorHelperText : helperText, slotProps: slotProps, placeholder: placeholder, noFormValueItem: true })));
|
|
4527
4544
|
} }));
|