@pdg/react-form 1.0.5 → 1.0.7

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/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),
                                     ")"))),
@@ -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,
                                     "*",