@pdg/react-form 1.0.4 → 1.0.6

package/README.md

@@ -4,5 +4,5 @@ React Form
 
 ## 설치
 ```
-npm install -D @pdg/react-form @mui/material @mui/icons-material @emotion/react @emotion/styled @mui/x-date-pickers dayjs
+npm install -D @pdg/react-form @pdg/react-dialog @mui/material @mui/icons-material @emotion/react @emotion/styled @mui/x-date-pickers dayjs
 ```

package/dist/@private/PrivateAlertDialog/PrivateAlertDialog.types.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 export interface PrivateAlertDialogProps {
+    color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
     title?: ReactNode;
     content?: ReactNode;
     open?: boolean;
     onClose?: () => void;
 }
-export declare const PrivateAlertDialogDefaultProps: {};
+export declare const PrivateAlertDialogDefaultProps: Pick<PrivateAlertDialogProps, 'color'>;

package/dist/FormItemCustom/FormImageFile/FormImageFile.types.d.ts

@@ -1,10 +1,10 @@
 import { FormFileCommands, FormFileProps } from '../FormFile';
-export interface FormImageFileMaxImageSize {
+export interface FormImageFileImageSize {
     width: number;
     height: number;
 }
 export interface FormImageFileProps extends Omit<FormFileProps, 'preview'> {
-    maxImageSize?: FormImageFileMaxImageSize | FormImageFileMaxImageSize[];
+    imageSize?: FormImageFileImageSize | FormImageFileImageSize[];
     preview?: boolean;
     previewMaxHeight?: number;
 }

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import*as React from'react';import React__default,{useRef,useEffect,useState,useCallback,useLayoutEffect,createContext,useContext,cloneElement,isValidElement,createRef,PureComponent,useId}from'react';import {Box,Grid,Icon as Icon$1,Button,InputLabel,styled,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,useTheme,RadioGroup,Radio,ToggleButtonGroup,ToggleButton,Rating,Skeleton,darken,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,DialogContentText,Paper}from'@mui/material';import dayjs from'dayjs';import {findDOMNode}from'react-dom';import {CheckBox,CheckBoxOutlineBlank,RadioButtonUnchecked,RadioButtonChecked}from'@mui/icons-material';import CircularProgress$1 from'@mui/material/CircularProgress';import {AdapterDayjs}from'@mui/x-date-pickers/AdapterDayjs';import {PickersDay,StaticDatePicker,LocalizationProvider,DesktopDatePicker}from'@mui/x-date-pickers';import dayjsLocale from'dayjs/locale/ko';import dayjsIsSameOrAfter from'dayjs/plugin/isSameOrAfter';import dayjsIsSameOrBefore from'dayjs/plugin/isSameOrBefore';import dayjsIsBetween from'dayjs/plugin/isBetween';/******************************************************************************
+import*as React from'react';import React__default,{useRef,useEffect,useState,useCallback,useLayoutEffect,createContext,useContext,cloneElement,isValidElement,createRef,PureComponent,useId}from'react';import {Box,Grid,Icon as Icon$1,Button,InputLabel,styled,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,useTheme,RadioGroup,Radio,ToggleButtonGroup,ToggleButton,Rating,Skeleton,darken,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Paper}from'@mui/material';import dayjs from'dayjs';import {findDOMNode}from'react-dom';import {CheckBox,CheckBoxOutlineBlank,RadioButtonUnchecked,RadioButtonChecked}from'@mui/icons-material';import CircularProgress$1 from'@mui/material/CircularProgress';import {AdapterDayjs}from'@mui/x-date-pickers/AdapterDayjs';import {PickersDay,StaticDatePicker,LocalizationProvider,DesktopDatePicker}from'@mui/x-date-pickers';import dayjsLocale from'dayjs/locale/ko';import dayjsIsSameOrAfter from'dayjs/plugin/isSameOrAfter';import dayjsIsSameOrBefore from'dayjs/plugin/isSameOrBefore';import dayjsIsBetween from'dayjs/plugin/isBetween';/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -14857,12 +14857,14 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default.forwardRef(functi
                 !formColWithHelperText && helperText && (React__default.createElement(FormHelperText, { error: error, style: { marginLeft: variant === 'standard' ? 0 : 14 } }, helperText))))));
 });
 PrivateDatePicker.displayName = 'PrivateDatePicker';
-PrivateDatePicker.defaultProps = PrivateDatePickerDefaultProps;var PrivateAlertDialogDefaultProps = {};var PrivateAlertDialog = function (_a) {
-    var open = _a.open, title = _a.title, content = _a.content, onClose = _a.onClose;
+PrivateDatePicker.defaultProps = PrivateDatePickerDefaultProps;var PrivateAlertDialogDefaultProps = {
+    color: 'primary',
+};var PrivateAlertDialog = function (_a) {
+    var color = _a.color, open = _a.open, title = _a.title, content = _a.content, onClose = _a.onClose;
     var handleClose = useCallback(function () {
         onClose && onClose();
     }, [onClose]);
-    return (React__default.createElement(Dialog, { open: !!open, onClose: handleClose, "aria-labelledby": 'alert-dialog-title' },
+    return (React__default.createElement(Dialog, { className: "color-".concat(color), open: !!open, onClose: handleClose, "aria-labelledby": 'alert-dialog-title' },
         title && React__default.createElement(DialogTitle, { id: 'alert-dialog-title' }, title),
         React__default.createElement(DialogContent, null, content),
         React__default.createElement(DialogActions, null,
@@ -15954,7 +15956,7 @@ FormDateRangePicker.defaultProps = FormDateRangePickerDefaultProps;var FormFileD
         onClose && onClose();
     }, [onCancel, onClose]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default.createElement(Dialog, { open: !!open, maxWidth: 'sm', fullWidth: true, onClose: function (e, reason) {
+    return (React__default.createElement(Dialog, { className: 'color-primary', open: !!open, maxWidth: 'sm', fullWidth: true, onClose: function (e, reason) {
             if (reason === 'backdropClick') {
                 if (empty$1(value)) {
                     onClose && onClose();
@@ -15963,13 +15965,14 @@ FormDateRangePicker.defaultProps = FormDateRangePickerDefaultProps;var FormFileD
         } },
         React__default.createElement(DialogTitle, null, "\uD30C\uC77C \uB9C1\uD06C"),
         React__default.createElement(DialogContent, null,
-            React__default.createElement(DialogContentText, null, "\uD30C\uC77C\uC758 \uB9C1\uD06C URL\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694."),
-            React__default.createElement(FormUrl, { ref: function (ref) {
-                    if (inputRef.current == null && ref !== null) {
-                        ref.focus();
-                    }
-                    inputRef.current = ref;
-                }, name: 'form-file-link-url', label: '\uB9C1\uD06C URL', value: value, required: true, style: { marginTop: 15 }, onChange: setValue })),
+            React__default.createElement(Box, null,
+                React__default.createElement("div", null, "\uD30C\uC77C\uC758 \uB9C1\uD06C URL\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694."),
+                React__default.createElement(FormUrl, { ref: function (ref) {
+                        if (inputRef.current == null && ref !== null) {
+                            ref.focus();
+                        }
+                        inputRef.current = ref;
+                    }, name: 'form-file-link-url', label: '\uB9C1\uD06C URL', value: value, required: true, style: { marginTop: 15 }, onChange: setValue }))),
         React__default.createElement(DialogActions, null,
             React__default.createElement(Button, { variant: 'text', onClick: handleCancel }, "\uCDE8\uC18C"),
             React__default.createElement(Button, { variant: 'text', onClick: handleSubmit }, "\uD655\uC778"))));
@@ -16013,9 +16016,7 @@ styleInject(css_248z$1);var FormFile = React__default.forwardRef(function (_a, r
     var _e = useAutoUpdateState$1(initHelperText), helperText = _e[0], setHelperText = _e[1];
     var _f = useAutoUpdateState$1(initDisabled), disabled = _f[0], setDisabled = _f[1];
     var _g = useState(false), isOpenLinkDialog = _g[0], setIsOpenLinkDialog = _g[1];
-    var _h = useState({
-        open: false,
-    }), alertDialogProps = _h[0], setAlertDialogProps = _h[1];
+    var _h = useState({ open: false }), alertDialogProps = _h[0], setAlertDialogProps = _h[1];
     var label = useAutoUpdateState$1(useCallback(function () {
         return labelIcon ? (React__default.createElement(React__default.Fragment, null,
             React__default.createElement(FormIcon, { style: { verticalAlign: 'middle', marginRight: 4 } }, labelIcon),
@@ -16130,13 +16131,14 @@ styleInject(css_248z$1);var FormFile = React__default.forwardRef(function (_a, r
                     if (file.size > maxFileSize) {
                         setAlertDialogProps({
                             open: true,
+                            color: 'error',
                             title: '파일 사이즈',
                             content: (React__default.createElement("div", null,
                                 React__default.createElement("div", null,
                                     React__default.createElement(Typography, { color: 'error' },
                                         getFileSizeText(maxFileSize),
                                         " \uC774\uD558\uC758 \uD30C\uC77C\uB9CC \uC0AC\uC6A9 \uAC00\uB2A5\uD569\uB2C8\uB2E4.")),
-                                React__default.createElement("div", null,
+                                React__default.createElement("div", { style: { opacity: 0.7 } },
                                     "(\uC120\uD0DD\uD55C \uD30C\uC77C \uC0AC\uC774\uC988 : ",
                                     getFileSizeText(file.size),
                                     ")"))),
@@ -16247,7 +16249,7 @@ styleInject(css_248z$1);var FormFile = React__default.forwardRef(function (_a, r
 FormFile.displayName = 'FormFile';
 FormFile.defaultProps = FormFileDefaultProps;var FormImageFileDefaultProps = __assign$4(__assign$4({}, FormFileDefaultProps), { accept: '.jpg,.jpeg,.png' });var css_248z = ".FormImageFile .preview-img {\n  max-width: 100%;\n}\n.FormImageFile:not(.hide-file-name):not(.variant-standard) .preview-img {\n  padding-right: 14px;\n}";
 styleInject(css_248z);var FormImageFile = React__default.forwardRef(function (_a, ref) {
-    var className = _a.className, maxImageSize = _a.maxImageSize, preview = _a.preview, previewMaxHeight = _a.previewMaxHeight, initValue = _a.value, onChange = _a.onChange, onFile = _a.onFile, onLink = _a.onLink, props = __rest$2(_a, ["className", "maxImageSize", "preview", "previewMaxHeight", "value", "onChange", "onFile", "onLink"]);
+    var className = _a.className, imageSize = _a.imageSize, preview = _a.preview, previewMaxHeight = _a.previewMaxHeight, initValue = _a.value, onChange = _a.onChange, onFile = _a.onFile, onLink = _a.onLink, props = __rest$2(_a, ["className", "imageSize", "preview", "previewMaxHeight", "value", "onChange", "onFile", "onLink"]);
     var _b = useAutoUpdateState$1(initValue), value = _b[0], setValue = _b[1];
     var _c = useState(), previewNode = _c[0], setPreviewNode = _c[1];
     var _d = useState({
@@ -16265,7 +16267,7 @@ styleInject(css_248z);var FormImageFile = React__default.forwardRef(function (_a
     }, [value, preview, previewMaxHeight]);
     // Function --------------------------------------------------------------------------------------------------------
     var imageSizeCheck = useCallback(function (file) {
-        if (maxImageSize && urlKit) {
+        if (imageSize && urlKit) {
             return new Promise(function (resolve, reject) {
                 var img = new Image();
                 img.onload = function () {
@@ -16274,8 +16276,8 @@ styleInject(css_248z);var FormImageFile = React__default.forwardRef(function (_a
                     urlKit.revokeObjectURL(img.src);
                     var sizeOk = false;
                     var sizeText = '';
-                    if (Array.isArray(maxImageSize)) {
-                        maxImageSize.forEach(function (a) {
+                    if (Array.isArray(imageSize)) {
+                        imageSize.forEach(function (a) {
                             if (width === a.width && height === a.height) {
                                 sizeOk = true;
                             }
@@ -16285,8 +16287,8 @@ styleInject(css_248z);var FormImageFile = React__default.forwardRef(function (_a
                         });
                     }
                     else {
-                        sizeOk = width === maxImageSize.width && height === maxImageSize.height;
-                        sizeText = "".concat(maxImageSize.width, "*").concat(maxImageSize.height);
+                        sizeOk = width === imageSize.width && height === imageSize.height;
+                        sizeText = "".concat(imageSize.width, "*").concat(imageSize.height);
                     }
                     if (sizeOk) {
                         resolve();
@@ -16294,13 +16296,14 @@ styleInject(css_248z);var FormImageFile = React__default.forwardRef(function (_a
                     else {
                         setAlertDialogProps({
                             open: true,
+                            color: 'error',
                             title: '이미지 사이즈',
                             content: (React__default.createElement(React__default.Fragment, null,
                                 React__default.createElement("div", null,
                                     React__default.createElement(Typography, { color: 'error' },
                                         sizeText,
                                         " \uC0AC\uC774\uC988\uC758 \uC774\uBBF8\uC9C0\uB9CC \uC0AC\uC6A9 \uAC00\uB2A5\uD569\uB2C8\uB2E4.")),
-                                React__default.createElement("div", null,
+                                React__default.createElement("div", { style: { opacity: 0.7 } },
                                     "(\uC120\uD0DD\uD55C \uC774\uBBF8\uC9C0 \uC0AC\uC774\uC988 : ",
                                     width,
                                     "*",
@@ -16321,7 +16324,7 @@ styleInject(css_248z);var FormImageFile = React__default.forwardRef(function (_a
             });
         }
         return Promise.resolve();
-    }, [urlKit, maxImageSize]);
+    }, [urlKit, imageSize]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleChange = useCallback(function (value) {
         setValue(value);