@pdg/react-form 1.0.103 → 1.0.105

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/README.md CHANGED
@@ -2,7 +2,22 @@
2
2
 
3
3
  React Form
4
4
 
5
+ ## Demo 사이트
6
+ https://parkdigy.github.io/react-form/
7
+
8
+
5
9
  ## 설치
6
10
  ```
7
11
  npm install -D @pdg/react-form @mui/material @mui/icons-material @emotion/react @emotion/styled @mui/x-date-pickers @pdg/react-component @pdg/react-dialog @pdg/react-hook @pdg/util @tinymce/tinymce-react classnames dayjs react-number-format react-resize-detector simplebar-react
8
12
  ```
13
+
14
+ ## simplebar-react 컴포넌트 사용을 위한 설정 (scss)
15
+ ```scss
16
+ @import 'simplebar-react/dist/simplebar.min.css';
17
+ .simplebar-track.simplebar-vertical {
18
+ width: 8px !important;
19
+ .simplebar-scrollbar.simplebar-visible:before {
20
+ opacity: 0.3 !important;
21
+ }
22
+ }
23
+ ```
package/dist/index.esm.js CHANGED
@@ -590,9 +590,9 @@ Form.defaultProps = FormDefaultProps;var FormButtonDefaultProps = {
590
590
  * ******************************************************************************************************************/
591
591
  return (React.createElement(Button, __assign({ ref: ref, className: classNames(className, 'FormButton'), type: type, variant: variant, size: size, color: color, fullWidth: fullWidth, onClick: onClick }, props),
592
592
  React.createElement(Box, { display: 'inline-flex', flexDirection: 'row', alignItems: 'center' },
593
- (icon || startIcon) && (React.createElement(PdgIcon, { className: 'FormButton-StartIcon', fontSize: size, color: 'inherit', sx: { mr: children ? 0.5 : undefined } }, icon || startIcon)),
593
+ (icon || startIcon) && (React.createElement(PdgIcon, { className: 'FormButton-StartIcon', size: size, color: 'inherit', sx: { mr: children ? 0.5 : undefined } }, icon || startIcon)),
594
594
  children,
595
- endIcon && (React.createElement(PdgIcon, { className: 'FormButton-EndIcon', fontSize: size, color: 'inherit', sx: { ml: children ? 0.5 : undefined } }, endIcon)))));
595
+ endIcon && (React.createElement(PdgIcon, { className: 'FormButton-EndIcon', size: size, color: 'inherit', sx: { ml: children ? 0.5 : undefined } }, endIcon)))));
596
596
  });
597
597
  FormButton.displayName = 'FormButton';
598
598
  FormButton.defaultProps = FormButtonDefaultProps;var FormLabelDefaultProps = {};var IconPdgIcon = styled(PdgIcon)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n vertical-align: middle;\n margin-right: 3px;\n margin-top: -4px;\n margin-bottom: -2px;\n"], ["\n vertical-align: middle;\n margin-right: 3px;\n margin-top: -4px;\n margin-bottom: -2px;\n"])));
@@ -700,7 +700,7 @@ var FormDivider = React.forwardRef(function (_a, ref) {
700
700
  padding: 0,
701
701
  cursor: collapse ? 'pointer' : undefined,
702
702
  }, onClick: handleClick },
703
- icon && (React.createElement(PdgIcon, { style: { opacity: 0.54, marginRight: 5 }, color: error ? 'error' : warning ? 'warning' : undefined, fontSize: size }, icon)),
703
+ icon && (React.createElement(PdgIcon, { style: { opacity: 0.54, marginRight: 5 }, color: error ? 'error' : warning ? 'warning' : undefined, size: size }, icon)),
704
704
  label && (React.createElement(Box, { sx: {
705
705
  paddingRight: '10px',
706
706
  color: error ? 'error.main' : warning ? 'warning.main' : 'text.secondary',
@@ -1185,7 +1185,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
1185
1185
  if (startAdornment || icon || muiInputProps.startAdornment) {
1186
1186
  muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
1187
1187
  icon && (React.createElement(InputAdornment, { position: 'start' },
1188
- React.createElement(PdgIcon, { fontSize: 'small' }, icon))),
1188
+ React.createElement(PdgIcon, { size: 'small' }, icon))),
1189
1189
  startAdornment && React.createElement(InputAdornment, { position: 'start' }, startAdornment),
1190
1190
  muiInputProps.startAdornment));
1191
1191
  }
@@ -1202,7 +1202,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
1202
1202
  });
1203
1203
  }
1204
1204
  } },
1205
- React.createElement(PdgIcon, { fontSize: 'inherit' }, "ClearRounded")))),
1205
+ React.createElement(PdgIcon, { size: 'inherit' }, "ClearRounded")))),
1206
1206
  muiInputProps.endAdornment,
1207
1207
  endAdornment && React.createElement(InputAdornment, { position: 'end' }, endAdornment)));
1208
1208
  }
@@ -1234,20 +1234,14 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
1234
1234
  getReset: function () { return getFinalValue(initValue); },
1235
1235
  reset: function () { return setValue(initValue); },
1236
1236
  getValue: function () { return valueRef.current; },
1237
- setValue: function (value) { return setValue(value); },
1237
+ setValue: setValue,
1238
1238
  getData: function () { return dataRef.current; },
1239
- setData: function (data) {
1240
- setData(data);
1241
- },
1239
+ setData: setData,
1242
1240
  isExceptValue: function () { return !!exceptValue; },
1243
1241
  isDisabled: function () { return !!disabledRef.current; },
1244
- setDisabled: function (disabled) {
1245
- setDisabled(disabled);
1246
- },
1242
+ setDisabled: setDisabled,
1247
1243
  isHidden: function () { return !!hiddenRef.current; },
1248
- setHidden: function (hidden) {
1249
- setHidden(hidden);
1250
- },
1244
+ setHidden: setHidden,
1251
1245
  focus: focus,
1252
1246
  focusValidate: focus,
1253
1247
  validate: function () { return validate(valueRef.current); },
@@ -2637,21 +2631,21 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2637
2631
  getReset: function () { return !!initChecked; },
2638
2632
  reset: function () { return setChecked(initChecked); },
2639
2633
  getValue: function () { return valueRef.current; },
2640
- setValue: function (value) { return setValue(value); },
2634
+ setValue: setValue,
2641
2635
  getData: function () { return dataRef.current; },
2642
- setData: function (data) { return setData(data); },
2636
+ setData: setData,
2643
2637
  getUncheckedValue: function () { return uncheckedValueRef.current; },
2644
- setUncheckedValue: function (uncheckedValue) { return setUncheckedValue(uncheckedValue); },
2638
+ setUncheckedValue: setUncheckedValue,
2645
2639
  getChecked: function () { return checkedRef.current; },
2646
- setChecked: function (checked) { return setChecked(checked); },
2640
+ setChecked: setChecked,
2647
2641
  isExceptValue: function () { return !!exceptValue; },
2648
2642
  isDisabled: function () { return !!disabledRef.current; },
2649
- setDisabled: function (disabled) { return setDisabled(disabled); },
2643
+ setDisabled: setDisabled,
2650
2644
  isHidden: function () { return !!hiddenRef.current; },
2651
- setHidden: function (hidden) { return setHidden(hidden); },
2645
+ setHidden: setHidden,
2652
2646
  focus: focus,
2653
2647
  focusValidate: focus,
2654
- validate: function () { return validate(checked); },
2648
+ validate: function () { return validate(checkedRef.current); },
2655
2649
  setError: function (error, errorHelperText) {
2656
2650
  return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
2657
2651
  },
@@ -2677,7 +2671,6 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2677
2671
  }
2678
2672
  };
2679
2673
  }, [
2680
- checked,
2681
2674
  checkedRef,
2682
2675
  dataRef,
2683
2676
  disabledRef,
@@ -2911,14 +2904,14 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
2911
2904
  getReset: function () { return getFinalValue(initValue); },
2912
2905
  reset: function () { return setValue(initValue); },
2913
2906
  getValue: function () { return valueRef.current; },
2914
- setValue: function (value) { return setValue(value); },
2907
+ setValue: setValue,
2915
2908
  getData: function () { return dataRef.current; },
2916
- setData: function (data) { return setData(data); },
2909
+ setData: setData,
2917
2910
  isExceptValue: function () { return !!exceptValue; },
2918
2911
  isDisabled: function () { return !!disabledRef.current; },
2919
- setDisabled: function (disabled) { return setDisabled(disabled); },
2912
+ setDisabled: setDisabled,
2920
2913
  isHidden: function () { return !!hiddenRef.current; },
2921
- setHidden: function (hidden) { return setHidden(hidden); },
2914
+ setHidden: setHidden,
2922
2915
  focus: focus,
2923
2916
  focusValidate: focus,
2924
2917
  validate: function () { return validate(valueRef.current); },
@@ -2926,9 +2919,9 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
2926
2919
  return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
2927
2920
  },
2928
2921
  getItems: function () { return itemsRef.current; },
2929
- setItems: function (items) { return setItems(items); },
2922
+ setItems: setItems,
2930
2923
  getLoading: function () { return !!loadingRef.current; },
2931
- setLoading: function (loading) { return setLoading(loading); },
2924
+ setLoading: setLoading,
2932
2925
  };
2933
2926
  onAddValueItem(id, commands);
2934
2927
  if (ref) {
@@ -3285,7 +3278,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3285
3278
  }
3286
3279
  }
3287
3280
  if (setFirstItem) {
3288
- setValue(getFinalValue((multiple ? [items[0].value] : items[0].value)));
3281
+ setValue((multiple ? [items[0].value] : items[0].value));
3289
3282
  }
3290
3283
  }
3291
3284
  }
@@ -3609,14 +3602,14 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
3609
3602
  getReset: function () { return getFinalValue(initValue); },
3610
3603
  reset: function () { return setValue(initValue); },
3611
3604
  getValue: function () { return valueRef.current; },
3612
- setValue: function (value) { return setValue(value); },
3605
+ setValue: setValue,
3613
3606
  getData: function () { return dataRef.current; },
3614
- setData: function (data) { return setData(data); },
3607
+ setData: setData,
3615
3608
  isExceptValue: function () { return !!exceptValue; },
3616
3609
  isDisabled: function () { return !!disabledRef.current; },
3617
- setDisabled: function (disabled) { return setDisabled(disabled); },
3610
+ setDisabled: setDisabled,
3618
3611
  isHidden: function () { return !!hiddenRef.current; },
3619
- setHidden: function (hidden) { return setHidden(hidden); },
3612
+ setHidden: setHidden,
3620
3613
  focus: focus,
3621
3614
  focusValidate: focus,
3622
3615
  validate: function () { return validate(valueRef.current); },
@@ -3683,7 +3676,7 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
3683
3676
  /********************************************************************************************************************
3684
3677
  * Render
3685
3678
  * ******************************************************************************************************************/
3686
- return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React.createElement(Rating, { ref: ratingRef, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React.createElement(PdgIcon, { color: color, fontSize: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React.createElement(PdgIcon, { fontSize: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
3679
+ return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React.createElement(Rating, { ref: ratingRef, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React.createElement(PdgIcon, { color: color, size: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React.createElement(PdgIcon, { size: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
3687
3680
  });
3688
3681
  FormRating.displayName = 'FormRating';
3689
3682
  FormRating.defaultProps = FormRatingDefaultProps;var FormTextEditorDefaultProps = {
@@ -5271,7 +5264,7 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
5271
5264
  if (startAdornment || icon || muiInputProps.startAdornment) {
5272
5265
  muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
5273
5266
  icon && (React.createElement(InputAdornment, { position: 'start' },
5274
- React.createElement(PdgIcon, { fontSize: 'small' }, icon))),
5267
+ React.createElement(PdgIcon, { size: 'small' }, icon))),
5275
5268
  startAdornment && React.createElement(InputAdornment, { position: 'start' }, startAdornment),
5276
5269
  muiInputProps.startAdornment));
5277
5270
  }
@@ -6019,7 +6012,7 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
6019
6012
  if (startAdornment || icon || muiInputProps.startAdornment) {
6020
6013
  muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
6021
6014
  icon && (React.createElement(InputAdornment, { position: 'start' },
6022
- React.createElement(PdgIcon, { fontSize: 'small' }, icon))),
6015
+ React.createElement(PdgIcon, { size: 'small' }, icon))),
6023
6016
  startAdornment && React.createElement(InputAdornment, { position: 'start' }, startAdornment),
6024
6017
  muiInputProps.startAdornment));
6025
6018
  }
@@ -6139,7 +6132,7 @@ styleInject(css_248z$4);var PrivateInputDatePicker = React.forwardRef(function (
6139
6132
  if (startAdornment || icon || muiInputProps.startAdornment) {
6140
6133
  muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
6141
6134
  icon && (React.createElement(InputAdornment, { position: 'start' },
6142
- React.createElement(PdgIcon, { fontSize: 'small' }, icon))),
6135
+ React.createElement(PdgIcon, { size: 'small' }, icon))),
6143
6136
  startAdornment && React.createElement(InputAdornment, { position: 'start' }, startAdornment),
6144
6137
  muiInputProps.startAdornment));
6145
6138
  }
@@ -8133,18 +8126,18 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
8133
8126
  getReset: function () { return getFinalValue(initValue); },
8134
8127
  reset: function () { return setValue(initValue); },
8135
8128
  getValue: function () { return valueRef.current; },
8136
- setValue: function (value) { return setValue(value); },
8129
+ setValue: setValue,
8137
8130
  getData: function () { return dataRef.current; },
8138
- setData: function (data) { return setData(data); },
8131
+ setData: setData,
8139
8132
  getFromValue: function () { return valueRef.current[0]; },
8140
8133
  setFromValue: function (value) { return setValue([value, valueRef.current[1]]); },
8141
8134
  getToValue: function () { return valueRef.current[1]; },
8142
8135
  setToValue: function (value) { return setValue([valueRef.current[0], value]); },
8143
8136
  isExceptValue: function () { return !!exceptValue; },
8144
8137
  isDisabled: function () { return !!disabledRef.current; },
8145
- setDisabled: function (disabled) { return setDisabled(disabled); },
8138
+ setDisabled: setDisabled,
8146
8139
  isHidden: function () { return !!hiddenRef.current; },
8147
- setHidden: function (hidden) { return setHidden(hidden); },
8140
+ setHidden: setHidden,
8148
8141
  focus: focus,
8149
8142
  focusValidate: focusValidate,
8150
8143
  validate: function () { return validate(valueRef.current); },
@@ -8434,14 +8427,14 @@ var FormFile = React.forwardRef(function (_a, ref) {
8434
8427
  getReset: function () { return getFinalValue(initValue); },
8435
8428
  reset: function () { return setValue(initValue); },
8436
8429
  getValue: function () { return valueRef.current; },
8437
- setValue: function (value) { return setValue(value); },
8430
+ setValue: setValue,
8438
8431
  getData: function () { return dataRef.current; },
8439
- setData: function (data) { return setData(data); },
8432
+ setData: setData,
8440
8433
  isExceptValue: function () { return !!exceptValue; },
8441
8434
  isDisabled: function () { return !!disabledRef.current; },
8442
- setDisabled: function (disabled) { return setDisabled(disabled); },
8435
+ setDisabled: setDisabled,
8443
8436
  isHidden: function () { return !!hiddenRef.current; },
8444
- setHidden: function (hidden) { return setHidden(hidden); },
8437
+ setHidden: setHidden,
8445
8438
  focus: focus,
8446
8439
  focusValidate: focus,
8447
8440
  validate: function () { return validate(valueRef.current); },
@@ -8962,9 +8955,9 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
8962
8955
  getReset: function () { return getFinalValue(initValue); },
8963
8956
  reset: function () { return setValue(initValue); },
8964
8957
  getValue: function () { return valueRef.current; },
8965
- setValue: function (value) { return setValue(value); },
8958
+ setValue: setValue,
8966
8959
  getData: function () { return dataRef.current; },
8967
- setData: function (data) { return setData(data); },
8960
+ setData: setData,
8968
8961
  getYear: function () { return (valueRef.current ? valueRef.current.year : null); },
8969
8962
  setYear: function (year) {
8970
8963
  setValue(year === null
@@ -8983,9 +8976,9 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
8983
8976
  },
8984
8977
  isExceptValue: function () { return !!exceptValue; },
8985
8978
  isDisabled: function () { return !!disabledRef.current; },
8986
- setDisabled: function (disabled) { return setDisabled(disabled); },
8979
+ setDisabled: setDisabled,
8987
8980
  isHidden: function () { return !!hiddenRef.current; },
8988
- setHidden: function (hidden) { return setHidden(hidden); },
8981
+ setHidden: setHidden,
8989
8982
  focus: focus,
8990
8983
  focusValidate: focus,
8991
8984
  validate: function () { return validate(valueRef.current); },
@@ -9346,9 +9339,9 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
9346
9339
  getReset: function () { return getFinalValue(initValue); },
9347
9340
  reset: function () { return setValue(initValue); },
9348
9341
  getValue: function () { return valueRef.current; },
9349
- setValue: function (value) { return setValue(value); },
9342
+ setValue: setValue,
9350
9343
  getData: function () { return dataRef.current; },
9351
- setData: function (data) { return setData(data); },
9344
+ setData: setData,
9352
9345
  getFromValue: function () { return valueRef.current[0]; },
9353
9346
  setFromValue: function (value) { return setValue([value, valueRef.current[1]]); },
9354
9347
  getToValue: function () { return valueRef.current[1]; },
@@ -9399,9 +9392,9 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
9399
9392
  },
9400
9393
  isExceptValue: function () { return !!exceptValue; },
9401
9394
  isDisabled: function () { return !!disabledRef.current; },
9402
- setDisabled: function (disabled) { return setDisabled(disabled); },
9395
+ setDisabled: setDisabled,
9403
9396
  isHidden: function () { return !!hiddenRef.current; },
9404
- setHidden: function (hidden) { return setHidden(hidden); },
9397
+ setHidden: setHidden,
9405
9398
  focus: focus,
9406
9399
  focusValidate: focus,
9407
9400
  validate: function () { return validate(valueRef.current); },
@@ -10455,7 +10448,7 @@ FormYearRangePicker.defaultProps = FormYearRangePickerDefaultProps;var FormSwitc
10455
10448
  /********************************************************************************************************************
10456
10449
  * Render
10457
10450
  * ******************************************************************************************************************/
10458
- var switchControl = useMemo(function () { return (React.createElement(Switch, { size: size, name: name, checked: value, disabled: disabled, onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } })); }, [disabled, handleChange, initFocused, name, setFocused, size, value]);
10451
+ var switchControl = useMemo(function () { return (React.createElement(Switch, { size: size, name: name, checked: value, color: color, disabled: disabled, onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } })); }, [color, disabled, handleChange, initFocused, name, setFocused, size, value]);
10459
10452
  return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormSwitch'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: size === 'small' ? 21 : 26, controlVerticalCenter: true, control: switchLabel ? (React.createElement(FormControlLabel, { control: switchControl, label: switchLabel, disabled: disabled })) : (switchControl) }));
10460
10453
  });
10461
10454
  FormSwitch.displayName = 'FormSwitch';
package/dist/index.js CHANGED
@@ -590,9 +590,9 @@ Form.defaultProps = FormDefaultProps;var FormButtonDefaultProps = {
590
590
  * ******************************************************************************************************************/
591
591
  return (React.createElement(material.Button, __assign({ ref: ref, className: classNames(className, 'FormButton'), type: type, variant: variant, size: size, color: color, fullWidth: fullWidth, onClick: onClick }, props),
592
592
  React.createElement(material.Box, { display: 'inline-flex', flexDirection: 'row', alignItems: 'center' },
593
- (icon || startIcon) && (React.createElement(reactComponent.PdgIcon, { className: 'FormButton-StartIcon', fontSize: size, color: 'inherit', sx: { mr: children ? 0.5 : undefined } }, icon || startIcon)),
593
+ (icon || startIcon) && (React.createElement(reactComponent.PdgIcon, { className: 'FormButton-StartIcon', size: size, color: 'inherit', sx: { mr: children ? 0.5 : undefined } }, icon || startIcon)),
594
594
  children,
595
- endIcon && (React.createElement(reactComponent.PdgIcon, { className: 'FormButton-EndIcon', fontSize: size, color: 'inherit', sx: { ml: children ? 0.5 : undefined } }, endIcon)))));
595
+ endIcon && (React.createElement(reactComponent.PdgIcon, { className: 'FormButton-EndIcon', size: size, color: 'inherit', sx: { ml: children ? 0.5 : undefined } }, endIcon)))));
596
596
  });
597
597
  FormButton.displayName = 'FormButton';
598
598
  FormButton.defaultProps = FormButtonDefaultProps;var FormLabelDefaultProps = {};var IconPdgIcon = material.styled(reactComponent.PdgIcon)(templateObject_1$g || (templateObject_1$g = __makeTemplateObject(["\n vertical-align: middle;\n margin-right: 3px;\n margin-top: -4px;\n margin-bottom: -2px;\n"], ["\n vertical-align: middle;\n margin-right: 3px;\n margin-top: -4px;\n margin-bottom: -2px;\n"])));
@@ -700,7 +700,7 @@ var FormDivider = React.forwardRef(function (_a, ref) {
700
700
  padding: 0,
701
701
  cursor: collapse ? 'pointer' : undefined,
702
702
  }, onClick: handleClick },
703
- icon && (React.createElement(reactComponent.PdgIcon, { style: { opacity: 0.54, marginRight: 5 }, color: error ? 'error' : warning ? 'warning' : undefined, fontSize: size }, icon)),
703
+ icon && (React.createElement(reactComponent.PdgIcon, { style: { opacity: 0.54, marginRight: 5 }, color: error ? 'error' : warning ? 'warning' : undefined, size: size }, icon)),
704
704
  label && (React.createElement(material.Box, { sx: {
705
705
  paddingRight: '10px',
706
706
  color: error ? 'error.main' : warning ? 'warning.main' : 'text.secondary',
@@ -1185,7 +1185,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
1185
1185
  if (startAdornment || icon || muiInputProps.startAdornment) {
1186
1186
  muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
1187
1187
  icon && (React.createElement(material.InputAdornment, { position: 'start' },
1188
- React.createElement(reactComponent.PdgIcon, { fontSize: 'small' }, icon))),
1188
+ React.createElement(reactComponent.PdgIcon, { size: 'small' }, icon))),
1189
1189
  startAdornment && React.createElement(material.InputAdornment, { position: 'start' }, startAdornment),
1190
1190
  muiInputProps.startAdornment));
1191
1191
  }
@@ -1202,7 +1202,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
1202
1202
  });
1203
1203
  }
1204
1204
  } },
1205
- React.createElement(reactComponent.PdgIcon, { fontSize: 'inherit' }, "ClearRounded")))),
1205
+ React.createElement(reactComponent.PdgIcon, { size: 'inherit' }, "ClearRounded")))),
1206
1206
  muiInputProps.endAdornment,
1207
1207
  endAdornment && React.createElement(material.InputAdornment, { position: 'end' }, endAdornment)));
1208
1208
  }
@@ -1234,20 +1234,14 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
1234
1234
  getReset: function () { return getFinalValue(initValue); },
1235
1235
  reset: function () { return setValue(initValue); },
1236
1236
  getValue: function () { return valueRef.current; },
1237
- setValue: function (value) { return setValue(value); },
1237
+ setValue: setValue,
1238
1238
  getData: function () { return dataRef.current; },
1239
- setData: function (data) {
1240
- setData(data);
1241
- },
1239
+ setData: setData,
1242
1240
  isExceptValue: function () { return !!exceptValue; },
1243
1241
  isDisabled: function () { return !!disabledRef.current; },
1244
- setDisabled: function (disabled) {
1245
- setDisabled(disabled);
1246
- },
1242
+ setDisabled: setDisabled,
1247
1243
  isHidden: function () { return !!hiddenRef.current; },
1248
- setHidden: function (hidden) {
1249
- setHidden(hidden);
1250
- },
1244
+ setHidden: setHidden,
1251
1245
  focus: focus,
1252
1246
  focusValidate: focus,
1253
1247
  validate: function () { return validate(valueRef.current); },
@@ -2637,21 +2631,21 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2637
2631
  getReset: function () { return !!initChecked; },
2638
2632
  reset: function () { return setChecked(initChecked); },
2639
2633
  getValue: function () { return valueRef.current; },
2640
- setValue: function (value) { return setValue(value); },
2634
+ setValue: setValue,
2641
2635
  getData: function () { return dataRef.current; },
2642
- setData: function (data) { return setData(data); },
2636
+ setData: setData,
2643
2637
  getUncheckedValue: function () { return uncheckedValueRef.current; },
2644
- setUncheckedValue: function (uncheckedValue) { return setUncheckedValue(uncheckedValue); },
2638
+ setUncheckedValue: setUncheckedValue,
2645
2639
  getChecked: function () { return checkedRef.current; },
2646
- setChecked: function (checked) { return setChecked(checked); },
2640
+ setChecked: setChecked,
2647
2641
  isExceptValue: function () { return !!exceptValue; },
2648
2642
  isDisabled: function () { return !!disabledRef.current; },
2649
- setDisabled: function (disabled) { return setDisabled(disabled); },
2643
+ setDisabled: setDisabled,
2650
2644
  isHidden: function () { return !!hiddenRef.current; },
2651
- setHidden: function (hidden) { return setHidden(hidden); },
2645
+ setHidden: setHidden,
2652
2646
  focus: focus,
2653
2647
  focusValidate: focus,
2654
- validate: function () { return validate(checked); },
2648
+ validate: function () { return validate(checkedRef.current); },
2655
2649
  setError: function (error, errorHelperText) {
2656
2650
  return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
2657
2651
  },
@@ -2677,7 +2671,6 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2677
2671
  }
2678
2672
  };
2679
2673
  }, [
2680
- checked,
2681
2674
  checkedRef,
2682
2675
  dataRef,
2683
2676
  disabledRef,
@@ -2911,14 +2904,14 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
2911
2904
  getReset: function () { return getFinalValue(initValue); },
2912
2905
  reset: function () { return setValue(initValue); },
2913
2906
  getValue: function () { return valueRef.current; },
2914
- setValue: function (value) { return setValue(value); },
2907
+ setValue: setValue,
2915
2908
  getData: function () { return dataRef.current; },
2916
- setData: function (data) { return setData(data); },
2909
+ setData: setData,
2917
2910
  isExceptValue: function () { return !!exceptValue; },
2918
2911
  isDisabled: function () { return !!disabledRef.current; },
2919
- setDisabled: function (disabled) { return setDisabled(disabled); },
2912
+ setDisabled: setDisabled,
2920
2913
  isHidden: function () { return !!hiddenRef.current; },
2921
- setHidden: function (hidden) { return setHidden(hidden); },
2914
+ setHidden: setHidden,
2922
2915
  focus: focus,
2923
2916
  focusValidate: focus,
2924
2917
  validate: function () { return validate(valueRef.current); },
@@ -2926,9 +2919,9 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
2926
2919
  return setErrorErrorHelperText(error, error ? errorHelperText : undefined);
2927
2920
  },
2928
2921
  getItems: function () { return itemsRef.current; },
2929
- setItems: function (items) { return setItems(items); },
2922
+ setItems: setItems,
2930
2923
  getLoading: function () { return !!loadingRef.current; },
2931
- setLoading: function (loading) { return setLoading(loading); },
2924
+ setLoading: setLoading,
2932
2925
  };
2933
2926
  onAddValueItem(id, commands);
2934
2927
  if (ref) {
@@ -3285,7 +3278,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3285
3278
  }
3286
3279
  }
3287
3280
  if (setFirstItem) {
3288
- setValue(getFinalValue((multiple ? [items[0].value] : items[0].value)));
3281
+ setValue((multiple ? [items[0].value] : items[0].value));
3289
3282
  }
3290
3283
  }
3291
3284
  }
@@ -3609,14 +3602,14 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
3609
3602
  getReset: function () { return getFinalValue(initValue); },
3610
3603
  reset: function () { return setValue(initValue); },
3611
3604
  getValue: function () { return valueRef.current; },
3612
- setValue: function (value) { return setValue(value); },
3605
+ setValue: setValue,
3613
3606
  getData: function () { return dataRef.current; },
3614
- setData: function (data) { return setData(data); },
3607
+ setData: setData,
3615
3608
  isExceptValue: function () { return !!exceptValue; },
3616
3609
  isDisabled: function () { return !!disabledRef.current; },
3617
- setDisabled: function (disabled) { return setDisabled(disabled); },
3610
+ setDisabled: setDisabled,
3618
3611
  isHidden: function () { return !!hiddenRef.current; },
3619
- setHidden: function (hidden) { return setHidden(hidden); },
3612
+ setHidden: setHidden,
3620
3613
  focus: focus,
3621
3614
  focusValidate: focus,
3622
3615
  validate: function () { return validate(valueRef.current); },
@@ -3683,7 +3676,7 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
3683
3676
  /********************************************************************************************************************
3684
3677
  * Render
3685
3678
  * ******************************************************************************************************************/
3686
- return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React.createElement(material.Rating, { ref: ratingRef, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React.createElement(reactComponent.PdgIcon, { color: color, fontSize: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React.createElement(reactComponent.PdgIcon, { fontSize: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
3679
+ return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React.createElement(material.Rating, { ref: ratingRef, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React.createElement(reactComponent.PdgIcon, { color: color, size: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React.createElement(reactComponent.PdgIcon, { size: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
3687
3680
  });
3688
3681
  FormRating.displayName = 'FormRating';
3689
3682
  FormRating.defaultProps = FormRatingDefaultProps;var FormTextEditorDefaultProps = {
@@ -5271,7 +5264,7 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
5271
5264
  if (startAdornment || icon || muiInputProps.startAdornment) {
5272
5265
  muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
5273
5266
  icon && (React.createElement(material.InputAdornment, { position: 'start' },
5274
- React.createElement(reactComponent.PdgIcon, { fontSize: 'small' }, icon))),
5267
+ React.createElement(reactComponent.PdgIcon, { size: 'small' }, icon))),
5275
5268
  startAdornment && React.createElement(material.InputAdornment, { position: 'start' }, startAdornment),
5276
5269
  muiInputProps.startAdornment));
5277
5270
  }
@@ -6019,7 +6012,7 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
6019
6012
  if (startAdornment || icon || muiInputProps.startAdornment) {
6020
6013
  muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
6021
6014
  icon && (React.createElement(material.InputAdornment, { position: 'start' },
6022
- React.createElement(reactComponent.PdgIcon, { fontSize: 'small' }, icon))),
6015
+ React.createElement(reactComponent.PdgIcon, { size: 'small' }, icon))),
6023
6016
  startAdornment && React.createElement(material.InputAdornment, { position: 'start' }, startAdornment),
6024
6017
  muiInputProps.startAdornment));
6025
6018
  }
@@ -6139,7 +6132,7 @@ styleInject(css_248z$4);var PrivateInputDatePicker = React.forwardRef(function (
6139
6132
  if (startAdornment || icon || muiInputProps.startAdornment) {
6140
6133
  muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
6141
6134
  icon && (React.createElement(material.InputAdornment, { position: 'start' },
6142
- React.createElement(reactComponent.PdgIcon, { fontSize: 'small' }, icon))),
6135
+ React.createElement(reactComponent.PdgIcon, { size: 'small' }, icon))),
6143
6136
  startAdornment && React.createElement(material.InputAdornment, { position: 'start' }, startAdornment),
6144
6137
  muiInputProps.startAdornment));
6145
6138
  }
@@ -8133,18 +8126,18 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
8133
8126
  getReset: function () { return getFinalValue(initValue); },
8134
8127
  reset: function () { return setValue(initValue); },
8135
8128
  getValue: function () { return valueRef.current; },
8136
- setValue: function (value) { return setValue(value); },
8129
+ setValue: setValue,
8137
8130
  getData: function () { return dataRef.current; },
8138
- setData: function (data) { return setData(data); },
8131
+ setData: setData,
8139
8132
  getFromValue: function () { return valueRef.current[0]; },
8140
8133
  setFromValue: function (value) { return setValue([value, valueRef.current[1]]); },
8141
8134
  getToValue: function () { return valueRef.current[1]; },
8142
8135
  setToValue: function (value) { return setValue([valueRef.current[0], value]); },
8143
8136
  isExceptValue: function () { return !!exceptValue; },
8144
8137
  isDisabled: function () { return !!disabledRef.current; },
8145
- setDisabled: function (disabled) { return setDisabled(disabled); },
8138
+ setDisabled: setDisabled,
8146
8139
  isHidden: function () { return !!hiddenRef.current; },
8147
- setHidden: function (hidden) { return setHidden(hidden); },
8140
+ setHidden: setHidden,
8148
8141
  focus: focus,
8149
8142
  focusValidate: focusValidate,
8150
8143
  validate: function () { return validate(valueRef.current); },
@@ -8434,14 +8427,14 @@ var FormFile = React.forwardRef(function (_a, ref) {
8434
8427
  getReset: function () { return getFinalValue(initValue); },
8435
8428
  reset: function () { return setValue(initValue); },
8436
8429
  getValue: function () { return valueRef.current; },
8437
- setValue: function (value) { return setValue(value); },
8430
+ setValue: setValue,
8438
8431
  getData: function () { return dataRef.current; },
8439
- setData: function (data) { return setData(data); },
8432
+ setData: setData,
8440
8433
  isExceptValue: function () { return !!exceptValue; },
8441
8434
  isDisabled: function () { return !!disabledRef.current; },
8442
- setDisabled: function (disabled) { return setDisabled(disabled); },
8435
+ setDisabled: setDisabled,
8443
8436
  isHidden: function () { return !!hiddenRef.current; },
8444
- setHidden: function (hidden) { return setHidden(hidden); },
8437
+ setHidden: setHidden,
8445
8438
  focus: focus,
8446
8439
  focusValidate: focus,
8447
8440
  validate: function () { return validate(valueRef.current); },
@@ -8962,9 +8955,9 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
8962
8955
  getReset: function () { return getFinalValue(initValue); },
8963
8956
  reset: function () { return setValue(initValue); },
8964
8957
  getValue: function () { return valueRef.current; },
8965
- setValue: function (value) { return setValue(value); },
8958
+ setValue: setValue,
8966
8959
  getData: function () { return dataRef.current; },
8967
- setData: function (data) { return setData(data); },
8960
+ setData: setData,
8968
8961
  getYear: function () { return (valueRef.current ? valueRef.current.year : null); },
8969
8962
  setYear: function (year) {
8970
8963
  setValue(year === null
@@ -8983,9 +8976,9 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
8983
8976
  },
8984
8977
  isExceptValue: function () { return !!exceptValue; },
8985
8978
  isDisabled: function () { return !!disabledRef.current; },
8986
- setDisabled: function (disabled) { return setDisabled(disabled); },
8979
+ setDisabled: setDisabled,
8987
8980
  isHidden: function () { return !!hiddenRef.current; },
8988
- setHidden: function (hidden) { return setHidden(hidden); },
8981
+ setHidden: setHidden,
8989
8982
  focus: focus,
8990
8983
  focusValidate: focus,
8991
8984
  validate: function () { return validate(valueRef.current); },
@@ -9346,9 +9339,9 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
9346
9339
  getReset: function () { return getFinalValue(initValue); },
9347
9340
  reset: function () { return setValue(initValue); },
9348
9341
  getValue: function () { return valueRef.current; },
9349
- setValue: function (value) { return setValue(value); },
9342
+ setValue: setValue,
9350
9343
  getData: function () { return dataRef.current; },
9351
- setData: function (data) { return setData(data); },
9344
+ setData: setData,
9352
9345
  getFromValue: function () { return valueRef.current[0]; },
9353
9346
  setFromValue: function (value) { return setValue([value, valueRef.current[1]]); },
9354
9347
  getToValue: function () { return valueRef.current[1]; },
@@ -9399,9 +9392,9 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
9399
9392
  },
9400
9393
  isExceptValue: function () { return !!exceptValue; },
9401
9394
  isDisabled: function () { return !!disabledRef.current; },
9402
- setDisabled: function (disabled) { return setDisabled(disabled); },
9395
+ setDisabled: setDisabled,
9403
9396
  isHidden: function () { return !!hiddenRef.current; },
9404
- setHidden: function (hidden) { return setHidden(hidden); },
9397
+ setHidden: setHidden,
9405
9398
  focus: focus,
9406
9399
  focusValidate: focus,
9407
9400
  validate: function () { return validate(valueRef.current); },
@@ -10455,7 +10448,7 @@ FormYearRangePicker.defaultProps = FormYearRangePickerDefaultProps;var FormSwitc
10455
10448
  /********************************************************************************************************************
10456
10449
  * Render
10457
10450
  * ******************************************************************************************************************/
10458
- var switchControl = React.useMemo(function () { return (React.createElement(material.Switch, { size: size, name: name, checked: value, disabled: disabled, onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } })); }, [disabled, handleChange, initFocused, name, setFocused, size, value]);
10451
+ var switchControl = React.useMemo(function () { return (React.createElement(material.Switch, { size: size, name: name, checked: value, color: color, disabled: disabled, onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } })); }, [color, disabled, handleChange, initFocused, name, setFocused, size, value]);
10459
10452
  return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormSwitch'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: size === 'small' ? 21 : 26, controlVerticalCenter: true, control: switchLabel ? (React.createElement(material.FormControlLabel, { control: switchControl, label: switchLabel, disabled: disabled })) : (switchControl) }));
10460
10453
  });
10461
10454
  FormSwitch.displayName = 'FormSwitch';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pdg/react-form",
3
3
  "title": "React Form",
4
- "version": "1.0.103",
4
+ "version": "1.0.105",
5
5
  "description": "React Form",
6
6
  "type": "module",
7
7
  "types": "dist/index.d.ts",
@@ -24,7 +24,8 @@
24
24
  "dev": "cd examples && npm run dev",
25
25
  "dev-prd-lib": "cd examples && npm run dev-prd-lib",
26
26
  "build": "rollup -c --bundleConfigAsCjs",
27
- "pub": "npm i && npm run build && npm publish --access=public && rm ./.git/hooks/pre-commit",
27
+ "build:examples": "cd examples && npm run build",
28
+ "pub": "npm i && npm run build:examples && npm run build && npm publish --access=public && rm ./.git/hooks/pre-commit",
28
29
  "lint": "eslint './src/**/*.{ts,tsx}'",
29
30
  "reinstall-module": "rm -rf node_modules && rm -f package-lock.json && npm i"
30
31
  },
@@ -44,9 +45,9 @@
44
45
  "@mui/icons-material": "^5.15.13",
45
46
  "@mui/material": "^5.15.13",
46
47
  "@mui/x-date-pickers": "^6.19.7",
47
- "@pdg/react-component": "^1.0.11",
48
- "@pdg/react-hook": "^1.0.14",
49
- "@pdg/util": "^1.0.19",
48
+ "@pdg/react-component": "^1.0.12",
49
+ "@pdg/react-hook": "^1.0.16",
50
+ "@pdg/util": "^1.0.20",
50
51
  "@tinymce/tinymce-react": "^4.3.2",
51
52
  "@types/react": "^17.0.0 || ^18.0.0",
52
53
  "classnames": "^2.5.1",