@pdg/react-form 1.0.125 → 1.0.127

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 (3) hide show
  1. package/dist/index.esm.js +11 -37
  2. package/dist/index.js +11 -37
  3. package/package.json +2 -2
package/dist/index.esm.js CHANGED
@@ -2362,7 +2362,7 @@ FormCompanyNo.displayName = 'FormCompanyNo';var FormPersonalNo = React.forwardRe
2362
2362
  * ******************************************************************************************************************/
2363
2363
  return (React.createElement(FormText, __assign({ ref: ref, className: classNames(className, 'FormPersonalNo'), maxLength: 14, validPattern: validPattern, onValue: handleValue, onValidate: handleValidate }, props)));
2364
2364
  });
2365
- FormPersonalNo.displayName = 'FormPersonalNo';var css_248z$e = ".FormItemBase .FormItemBase-InputLabel {\n overflow: visible;\n padding-left: 5px;\n}\n.FormItemBase .FormItemBase-InputLabel.MuiInputLabel-sizeSmall {\n transform: translate(0, -1.5px) scale(0.7);\n}\n.FormItemBase .FormItemBase-Control-wrap {\n position: relative;\n}\n.FormItemBase .FormItemBase-Control {\n position: absolute;\n left: 0;\n top: 0;\n}\n.FormItemBase.variant-standard .FormItemBase-Control-wrap {\n margin-top: 16px;\n}";
2365
+ FormPersonalNo.displayName = 'FormPersonalNo';var css_248z$e = ".FormItemBase .FormItemBase-InputLabel {\n overflow: visible;\n padding-left: 5px;\n}\n.FormItemBase .FormItemBase-InputLabel.MuiInputLabel-sizeSmall {\n transform: translate(0, -1.5px) scale(0.7);\n}\n.FormItemBase.variant-standard .FormItemBase-Control-wrap {\n margin-top: 16px;\n}";
2366
2366
  styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2367
2367
  /********************************************************************************************************************
2368
2368
  * Ref
@@ -2373,7 +2373,6 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2373
2373
  //----------------------------------------------------------------------------------------------------------------
2374
2374
  className = _a.className, style = _a.style, sx = _a.sx;
2375
2375
  var inputRef = useRef(null);
2376
- var realControlContainerRef = useRef(null);
2377
2376
  /********************************************************************************************************************
2378
2377
  * FormState
2379
2378
  * ******************************************************************************************************************/
@@ -2398,37 +2397,9 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2398
2397
  setInputHeight(((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) || 0);
2399
2398
  },
2400
2399
  });
2401
- /********************************************************************************************************************
2402
- * State - realControlHeight
2403
- * ******************************************************************************************************************/
2404
- var _d = useState(0), realControlHeight = _d[0], setRealControlHeight = _d[1];
2405
- useResizeDetector({
2406
- targetRef: realControlContainerRef,
2407
- handleWidth: false,
2408
- handleHeight: true,
2409
- onResize: function () {
2410
- var _a, _b;
2411
- setRealControlHeight(((_b = (_a = realControlContainerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) || 0);
2412
- },
2413
- });
2414
2400
  /********************************************************************************************************************
2415
2401
  * Memo
2416
2402
  * ******************************************************************************************************************/
2417
- var bottomMargin = useMemo(function () {
2418
- var realHeight = realControlHeight || 0;
2419
- var height = controlHeight || 0;
2420
- var checkInputHeight = variant === 'standard' ? inputHeight + 16 : inputHeight;
2421
- var bottomMargin = 0;
2422
- if (height > checkInputHeight) {
2423
- bottomMargin = height - checkInputHeight;
2424
- }
2425
- else {
2426
- if (realHeight > 0 && height > 0 && realHeight > height) {
2427
- bottomMargin = realHeight - height;
2428
- }
2429
- }
2430
- return bottomMargin;
2431
- }, [variant, realControlHeight, controlHeight, inputHeight]);
2432
2403
  var controlMarginTop = useMemo(function () {
2433
2404
  var topMargin = 0;
2434
2405
  if (inputHeight && controlHeight && controlVerticalCenter) {
@@ -2478,14 +2449,17 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2478
2449
  React.createElement(PdgIcon, { style: { verticalAlign: 'middle', marginRight: 3, marginTop: -4, marginBottom: -2 } }, labelIcon),
2479
2450
  React.createElement("span", { style: { verticalAlign: 'middle' } }, label))) : (label))),
2480
2451
  React.createElement("div", { className: 'FormItemBase-Control-wrap', style: { display: 'grid', marginTop: hideLabel ? 0 : undefined } }, autoSize ? (React.createElement(React.Fragment, null,
2481
- variant === 'standard' && (React.createElement(Input, { ref: inputRef, size: size, fullWidth: true, disabled: true, style: { visibility: 'hidden' } })),
2482
- variant === 'outlined' && (React.createElement(OutlinedInput, { ref: inputRef, size: size, fullWidth: true, disabled: true, style: { visibility: 'hidden' } })),
2483
- variant === 'filled' && (React.createElement(FilledInput, { ref: inputRef, size: size, fullWidth: true, disabled: true, style: { visibility: 'hidden' } })),
2484
- React.createElement("div", { style: { height: bottomMargin, visibility: 'hidden' } }),
2485
- React.createElement("div", { ref: realControlContainerRef, className: 'FormItemBase-Control', style: {
2452
+ variant === 'standard' && (React.createElement(Input, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2453
+ variant === 'outlined' && (React.createElement(OutlinedInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2454
+ variant === 'filled' && (React.createElement(FilledInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2455
+ React.createElement("div", { className: 'FormItemBase-Control', style: {
2486
2456
  width: fullWidth ? '100%' : 'auto',
2487
2457
  display: 'grid',
2488
- marginTop: controlMarginTop,
2458
+ marginTop: -inputHeight,
2459
+ height: inputHeight,
2460
+ alignItems: 'flex-start',
2461
+ paddingTop: controlMarginTop,
2462
+ position: 'relative',
2489
2463
  } }, control))) : (React.createElement("div", { style: {
2490
2464
  width: fullWidth ? '100%' : 'auto',
2491
2465
  display: 'grid',
@@ -10137,7 +10111,7 @@ FormYearRangePicker.displayName = 'FormYearRangePicker';var FormSwitch = React.f
10137
10111
  * Render
10138
10112
  * ******************************************************************************************************************/
10139
10113
  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]);
10140
- 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) }));
10114
+ 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' ? 24 : 38, controlVerticalCenter: true, control: switchLabel ? (React.createElement(FormControlLabel, { control: switchControl, label: switchLabel, disabled: disabled })) : (switchControl) }));
10141
10115
  });
10142
10116
  FormSwitch.displayName = 'FormSwitch';var Search = React.forwardRef(function (_a, ref) {
10143
10117
  /********************************************************************************************************************
package/dist/index.js CHANGED
@@ -2362,7 +2362,7 @@ FormCompanyNo.displayName = 'FormCompanyNo';var FormPersonalNo = React.forwardRe
2362
2362
  * ******************************************************************************************************************/
2363
2363
  return (React.createElement(FormText, __assign({ ref: ref, className: classNames(className, 'FormPersonalNo'), maxLength: 14, validPattern: validPattern, onValue: handleValue, onValidate: handleValidate }, props)));
2364
2364
  });
2365
- FormPersonalNo.displayName = 'FormPersonalNo';var css_248z$e = ".FormItemBase .FormItemBase-InputLabel {\n overflow: visible;\n padding-left: 5px;\n}\n.FormItemBase .FormItemBase-InputLabel.MuiInputLabel-sizeSmall {\n transform: translate(0, -1.5px) scale(0.7);\n}\n.FormItemBase .FormItemBase-Control-wrap {\n position: relative;\n}\n.FormItemBase .FormItemBase-Control {\n position: absolute;\n left: 0;\n top: 0;\n}\n.FormItemBase.variant-standard .FormItemBase-Control-wrap {\n margin-top: 16px;\n}";
2365
+ FormPersonalNo.displayName = 'FormPersonalNo';var css_248z$e = ".FormItemBase .FormItemBase-InputLabel {\n overflow: visible;\n padding-left: 5px;\n}\n.FormItemBase .FormItemBase-InputLabel.MuiInputLabel-sizeSmall {\n transform: translate(0, -1.5px) scale(0.7);\n}\n.FormItemBase.variant-standard .FormItemBase-Control-wrap {\n margin-top: 16px;\n}";
2366
2366
  styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2367
2367
  /********************************************************************************************************************
2368
2368
  * Ref
@@ -2373,7 +2373,6 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2373
2373
  //----------------------------------------------------------------------------------------------------------------
2374
2374
  className = _a.className, style = _a.style, sx = _a.sx;
2375
2375
  var inputRef = React.useRef(null);
2376
- var realControlContainerRef = React.useRef(null);
2377
2376
  /********************************************************************************************************************
2378
2377
  * FormState
2379
2378
  * ******************************************************************************************************************/
@@ -2398,37 +2397,9 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2398
2397
  setInputHeight(((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) || 0);
2399
2398
  },
2400
2399
  });
2401
- /********************************************************************************************************************
2402
- * State - realControlHeight
2403
- * ******************************************************************************************************************/
2404
- var _d = React.useState(0), realControlHeight = _d[0], setRealControlHeight = _d[1];
2405
- reactResizeDetector.useResizeDetector({
2406
- targetRef: realControlContainerRef,
2407
- handleWidth: false,
2408
- handleHeight: true,
2409
- onResize: function () {
2410
- var _a, _b;
2411
- setRealControlHeight(((_b = (_a = realControlContainerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height) || 0);
2412
- },
2413
- });
2414
2400
  /********************************************************************************************************************
2415
2401
  * Memo
2416
2402
  * ******************************************************************************************************************/
2417
- var bottomMargin = React.useMemo(function () {
2418
- var realHeight = realControlHeight || 0;
2419
- var height = controlHeight || 0;
2420
- var checkInputHeight = variant === 'standard' ? inputHeight + 16 : inputHeight;
2421
- var bottomMargin = 0;
2422
- if (height > checkInputHeight) {
2423
- bottomMargin = height - checkInputHeight;
2424
- }
2425
- else {
2426
- if (realHeight > 0 && height > 0 && realHeight > height) {
2427
- bottomMargin = realHeight - height;
2428
- }
2429
- }
2430
- return bottomMargin;
2431
- }, [variant, realControlHeight, controlHeight, inputHeight]);
2432
2403
  var controlMarginTop = React.useMemo(function () {
2433
2404
  var topMargin = 0;
2434
2405
  if (inputHeight && controlHeight && controlVerticalCenter) {
@@ -2478,14 +2449,17 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2478
2449
  React.createElement(reactComponent.PdgIcon, { style: { verticalAlign: 'middle', marginRight: 3, marginTop: -4, marginBottom: -2 } }, labelIcon),
2479
2450
  React.createElement("span", { style: { verticalAlign: 'middle' } }, label))) : (label))),
2480
2451
  React.createElement("div", { className: 'FormItemBase-Control-wrap', style: { display: 'grid', marginTop: hideLabel ? 0 : undefined } }, autoSize ? (React.createElement(React.Fragment, null,
2481
- variant === 'standard' && (React.createElement(material.Input, { ref: inputRef, size: size, fullWidth: true, disabled: true, style: { visibility: 'hidden' } })),
2482
- variant === 'outlined' && (React.createElement(material.OutlinedInput, { ref: inputRef, size: size, fullWidth: true, disabled: true, style: { visibility: 'hidden' } })),
2483
- variant === 'filled' && (React.createElement(material.FilledInput, { ref: inputRef, size: size, fullWidth: true, disabled: true, style: { visibility: 'hidden' } })),
2484
- React.createElement("div", { style: { height: bottomMargin, visibility: 'hidden' } }),
2485
- React.createElement("div", { ref: realControlContainerRef, className: 'FormItemBase-Control', style: {
2452
+ variant === 'standard' && (React.createElement(material.Input, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2453
+ variant === 'outlined' && (React.createElement(material.OutlinedInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2454
+ variant === 'filled' && (React.createElement(material.FilledInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2455
+ React.createElement("div", { className: 'FormItemBase-Control', style: {
2486
2456
  width: fullWidth ? '100%' : 'auto',
2487
2457
  display: 'grid',
2488
- marginTop: controlMarginTop,
2458
+ marginTop: -inputHeight,
2459
+ height: inputHeight,
2460
+ alignItems: 'flex-start',
2461
+ paddingTop: controlMarginTop,
2462
+ position: 'relative',
2489
2463
  } }, control))) : (React.createElement("div", { style: {
2490
2464
  width: fullWidth ? '100%' : 'auto',
2491
2465
  display: 'grid',
@@ -10137,7 +10111,7 @@ FormYearRangePicker.displayName = 'FormYearRangePicker';var FormSwitch = React.f
10137
10111
  * Render
10138
10112
  * ******************************************************************************************************************/
10139
10113
  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]);
10140
- 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) }));
10114
+ 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' ? 24 : 38, controlVerticalCenter: true, control: switchLabel ? (React.createElement(material.FormControlLabel, { control: switchControl, label: switchLabel, disabled: disabled })) : (switchControl) }));
10141
10115
  });
10142
10116
  FormSwitch.displayName = 'FormSwitch';var Search = React.forwardRef(function (_a, ref) {
10143
10117
  /********************************************************************************************************************
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.125",
4
+ "version": "1.0.127",
5
5
  "description": "React Form",
6
6
  "type": "module",
7
7
  "types": "dist/index.d.ts",
@@ -45,7 +45,7 @@
45
45
  "@mui/icons-material": "^5.15.17",
46
46
  "@mui/material": "^5.15.17",
47
47
  "@mui/x-date-pickers": "^6.19.9",
48
- "@pdg/react-component": "^1.0.24",
48
+ "@pdg/react-component": "^1.0.25",
49
49
  "@pdg/react-hook": "^1.0.21",
50
50
  "@pdg/util": "^1.0.22",
51
51
  "@tinymce/tinymce-react": "^4.3.2",