@pdg/react-form 1.0.104 → 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.
Files changed (4) hide show
  1. package/README.md +15 -0
  2. package/dist/index.esm.js +10 -10
  3. package/dist/index.js +10 -10
  4. package/package.json +6 -5
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
  }
@@ -3676,7 +3676,7 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
3676
3676
  /********************************************************************************************************************
3677
3677
  * Render
3678
3678
  * ******************************************************************************************************************/
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, 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); } }) }));
3680
3680
  });
3681
3681
  FormRating.displayName = 'FormRating';
3682
3682
  FormRating.defaultProps = FormRatingDefaultProps;var FormTextEditorDefaultProps = {
@@ -5264,7 +5264,7 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
5264
5264
  if (startAdornment || icon || muiInputProps.startAdornment) {
5265
5265
  muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
5266
5266
  icon && (React.createElement(InputAdornment, { position: 'start' },
5267
- React.createElement(PdgIcon, { fontSize: 'small' }, icon))),
5267
+ React.createElement(PdgIcon, { size: 'small' }, icon))),
5268
5268
  startAdornment && React.createElement(InputAdornment, { position: 'start' }, startAdornment),
5269
5269
  muiInputProps.startAdornment));
5270
5270
  }
@@ -6012,7 +6012,7 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
6012
6012
  if (startAdornment || icon || muiInputProps.startAdornment) {
6013
6013
  muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
6014
6014
  icon && (React.createElement(InputAdornment, { position: 'start' },
6015
- React.createElement(PdgIcon, { fontSize: 'small' }, icon))),
6015
+ React.createElement(PdgIcon, { size: 'small' }, icon))),
6016
6016
  startAdornment && React.createElement(InputAdornment, { position: 'start' }, startAdornment),
6017
6017
  muiInputProps.startAdornment));
6018
6018
  }
@@ -6132,7 +6132,7 @@ styleInject(css_248z$4);var PrivateInputDatePicker = React.forwardRef(function (
6132
6132
  if (startAdornment || icon || muiInputProps.startAdornment) {
6133
6133
  muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
6134
6134
  icon && (React.createElement(InputAdornment, { position: 'start' },
6135
- React.createElement(PdgIcon, { fontSize: 'small' }, icon))),
6135
+ React.createElement(PdgIcon, { size: 'small' }, icon))),
6136
6136
  startAdornment && React.createElement(InputAdornment, { position: 'start' }, startAdornment),
6137
6137
  muiInputProps.startAdornment));
6138
6138
  }
@@ -10448,7 +10448,7 @@ FormYearRangePicker.defaultProps = FormYearRangePickerDefaultProps;var FormSwitc
10448
10448
  /********************************************************************************************************************
10449
10449
  * Render
10450
10450
  * ******************************************************************************************************************/
10451
- 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]);
10452
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) }));
10453
10453
  });
10454
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
  }
@@ -3676,7 +3676,7 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
3676
3676
  /********************************************************************************************************************
3677
3677
  * Render
3678
3678
  * ******************************************************************************************************************/
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, 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); } }) }));
3680
3680
  });
3681
3681
  FormRating.displayName = 'FormRating';
3682
3682
  FormRating.defaultProps = FormRatingDefaultProps;var FormTextEditorDefaultProps = {
@@ -5264,7 +5264,7 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
5264
5264
  if (startAdornment || icon || muiInputProps.startAdornment) {
5265
5265
  muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
5266
5266
  icon && (React.createElement(material.InputAdornment, { position: 'start' },
5267
- React.createElement(reactComponent.PdgIcon, { fontSize: 'small' }, icon))),
5267
+ React.createElement(reactComponent.PdgIcon, { size: 'small' }, icon))),
5268
5268
  startAdornment && React.createElement(material.InputAdornment, { position: 'start' }, startAdornment),
5269
5269
  muiInputProps.startAdornment));
5270
5270
  }
@@ -6012,7 +6012,7 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
6012
6012
  if (startAdornment || icon || muiInputProps.startAdornment) {
6013
6013
  muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
6014
6014
  icon && (React.createElement(material.InputAdornment, { position: 'start' },
6015
- React.createElement(reactComponent.PdgIcon, { fontSize: 'small' }, icon))),
6015
+ React.createElement(reactComponent.PdgIcon, { size: 'small' }, icon))),
6016
6016
  startAdornment && React.createElement(material.InputAdornment, { position: 'start' }, startAdornment),
6017
6017
  muiInputProps.startAdornment));
6018
6018
  }
@@ -6132,7 +6132,7 @@ styleInject(css_248z$4);var PrivateInputDatePicker = React.forwardRef(function (
6132
6132
  if (startAdornment || icon || muiInputProps.startAdornment) {
6133
6133
  muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
6134
6134
  icon && (React.createElement(material.InputAdornment, { position: 'start' },
6135
- React.createElement(reactComponent.PdgIcon, { fontSize: 'small' }, icon))),
6135
+ React.createElement(reactComponent.PdgIcon, { size: 'small' }, icon))),
6136
6136
  startAdornment && React.createElement(material.InputAdornment, { position: 'start' }, startAdornment),
6137
6137
  muiInputProps.startAdornment));
6138
6138
  }
@@ -10448,7 +10448,7 @@ FormYearRangePicker.defaultProps = FormYearRangePickerDefaultProps;var FormSwitc
10448
10448
  /********************************************************************************************************************
10449
10449
  * Render
10450
10450
  * ******************************************************************************************************************/
10451
- 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]);
10452
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) }));
10453
10453
  });
10454
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.104",
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.15",
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",