@pdg/react-form 1.0.50 → 1.0.52

package/dist/Search/SearchMenuButton/SearchMenuButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SearchMenuButtonProps as Props } from './SearchMenuButton.types';
+declare const SearchMenuButton: React.FC<Props>;
+export default SearchMenuButton;

package/dist/Search/SearchMenuButton/SearchMenuButton.types.d.ts

@@ -0,0 +1,7 @@
+import { FormButtonProps } from '../../FormCommon';
+import { ReactNode } from 'react';
+export interface SearchMenuButtonProps extends Omit<FormButtonProps, 'fullWidth' | 'endIcon' | 'onClick'> {
+    menuList: ReactNode;
+    placement?: 'top' | 'top-left' | 'top-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom' | 'bottom' | 'bottom-left' | 'bottom-right';
+}
+export declare const SearchMenuButtonDefaultProps: {};

package/dist/Search/SearchMenuButton/index.d.ts

@@ -0,0 +1,4 @@
+import SearchMenuButton from './SearchMenuButton';
+export default SearchMenuButton;
+export { SearchMenuButton };
+export * from './SearchMenuButton.types';

package/dist/Search/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Search';
 export * from './SearchGroup';
 export * from './SearchButton';
+export * from './SearchMenuButton';
 export * from './SearchGroupRow';

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import*as React from'react';import React__default,{createContext,useContext,useMemo,useRef,useState,useCallback,useLayoutEffect,useEffect,cloneElement,isValidElement,createRef,PureComponent,useId}from'react';import {Box,Icon as Icon$1,Button,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,RadioGroup,Radio,ToggleButton,ToggleButtonGroup,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';/******************************************************************************
+import*as React from'react';import React__default,{createContext,useContext,useMemo,useRef,useState,useCallback,useLayoutEffect,useEffect,cloneElement,isValidElement,createRef,PureComponent,useId}from'react';import {Box,Icon as Icon$1,Button,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,RadioGroup,Radio,ToggleButton,ToggleButtonGroup,Rating,Skeleton,darken,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Paper,Menu}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
@@ -12101,20 +12101,15 @@ FormFile.defaultProps = FormFileDefaultProps;var FormImageFileDefaultProps = __a
 styleInject(css_248z);var FormImageFile = React__default.forwardRef(function (_a, ref) {
     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$3(_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({
+    var _c = useState({
         open: false,
-    }), alertDialogProps = _d[0], setAlertDialogProps = _d[1];
+    }), alertDialogProps = _c[0], setAlertDialogProps = _c[1];
     var urlKit = useState(function () {
         if (window.URL)
             return window.URL;
         else if (window.webkitURL)
             return window.webkitURL;
     })[0];
-    // Effect ----------------------------------------------------------------------------------------------------------
-    useEffect(function () {
-        setPreviewNode(preview && value ? (React__default.createElement("img", { className: 'preview-img', src: value, style: { maxHeight: previewMaxHeight || undefined }, alt: '' })) : undefined);
-    }, [value, preview, previewMaxHeight]);
     // Function --------------------------------------------------------------------------------------------------------
     var imageSizeCheck = useCallback(function (file) {
         if (imageSize && urlKit) {
@@ -12218,6 +12213,15 @@ styleInject(css_248z);var FormImageFile = React__default.forwardRef(function (_a
             });
         });
     }, [onLink, imageSizeCheck]);
+    // Memo --------------------------------------------------------------------------------------------------------------
+    var previewNode = useMemo(function () {
+        if (preview && value) {
+            return (React__default.createElement("a", { href: value, target: '_blank' },
+                React__default.createElement(Tooltip, { title: React__default.createElement("div", { style: { paddingTop: 3, paddingBottom: 3 } },
+                        React__default.createElement("img", { src: value, style: { maxWidth: '100%', verticalAlign: 'middle' } })) },
+                    React__default.createElement("img", { className: 'preview-img', src: value, style: { maxHeight: previewMaxHeight || undefined }, alt: '' }))));
+        }
+    }, [preview, previewMaxHeight, value]);
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(FormFile, __assign$6({ ref: ref, className: classNames$1(className, 'FormImageFile'), value: value, preview: previewNode, onChange: handleChange, onFile: handleFile, onLink: handleLink }, props)),
@@ -12378,6 +12382,87 @@ SearchGroup.defaultProps = SearchGroupDefaultProps;var SearchButtonDefaultProps
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default.createElement(FormButton, __assign$6({ className: classNames$1(className, 'SearchButton'), size: 'medium', sx: sx, fullWidth: false, startIcon: startIcon, endIcon: endIcon, icon: icon }, props), children));
 };
-SearchButton.defaultProps = SearchButtonDefaultProps;dayjs.extend(dayjsIsSameOrAfter);
+SearchButton.defaultProps = SearchButtonDefaultProps;var SearchMenuButtonDefaultProps = {};var SearchMenuButton = function (_a) {
+    // ID ----------------------------------------------------------------------------------------------------------------
+    var children = _a.children, className = _a.className, initSx = _a.sx, menuList = _a.menuList, startIcon = _a.startIcon, icon = _a.icon, placement = _a.placement, props = __rest$3(_a, ["children", "className", "sx", "menuList", "startIcon", "icon", "placement"]);
+    var buttonId = useId();
+    var menuId = useId();
+    // State -------------------------------------------------------------------------------------------------------------
+    var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var _c = useState('ArrowDropDown'), endIcon = _c[0], setEndIcon = _c[1];
+    // Event Handler -----------------------------------------------------------------------------------------------------
+    var handleClick = useCallback(function (e) {
+        setAnchorEl(e.currentTarget);
+        setEndIcon('ArrowDropUp');
+    }, []);
+    var handleClose = useCallback(function () {
+        setAnchorEl(null);
+        setEndIcon('ArrowDropDown');
+    }, []);
+    // Memo --------------------------------------------------------------------------------------------------------------
+    var open = useMemo(function () { return !!anchorEl; }, [anchorEl]);
+    var sx = useMemo(function () { return (__assign$6({ minWidth: 0, px: !startIcon && !endIcon && !icon ? 1.2 : 1.7 }, initSx)); }, [endIcon, icon, initSx, startIcon]);
+    var anchorOrigin = useMemo(function () {
+        switch (placement || 'bottom') {
+            case 'bottom':
+                return { vertical: 'bottom', horizontal: 'center' };
+            case 'bottom-left':
+                return { vertical: 'bottom', horizontal: 'left' };
+            case 'bottom-right':
+                return { vertical: 'bottom', horizontal: 'right' };
+            case 'top':
+                return { vertical: 'top', horizontal: 'center' };
+            case 'top-left':
+                return { vertical: 'top', horizontal: 'left' };
+            case 'top-right':
+                return { vertical: 'top', horizontal: 'right' };
+            case 'left':
+                return { vertical: 'center', horizontal: 'left' };
+            case 'left-top':
+                return { vertical: 'top', horizontal: 'left' };
+            case 'left-bottom':
+                return { vertical: 'bottom', horizontal: 'left' };
+            case 'right':
+                return { vertical: 'center', horizontal: 'right' };
+            case 'right-top':
+                return { vertical: 'top', horizontal: 'right' };
+            case 'right-bottom':
+                return { vertical: 'bottom', horizontal: 'right' };
+        }
+    }, [placement]);
+    var transformOrigin = useMemo(function () {
+        switch (placement || 'bottom') {
+            case 'bottom':
+                return { vertical: 'top', horizontal: 'center' };
+            case 'bottom-left':
+                return { vertical: 'top', horizontal: 'left' };
+            case 'bottom-right':
+                return { vertical: 'top', horizontal: 'right' };
+            case 'top':
+                return { vertical: 'bottom', horizontal: 'center' };
+            case 'top-left':
+                return { vertical: 'bottom', horizontal: 'left' };
+            case 'top-right':
+                return { vertical: 'bottom', horizontal: 'right' };
+            case 'left':
+                return { vertical: 'center', horizontal: 'right' };
+            case 'left-top':
+                return { vertical: 'top', horizontal: 'right' };
+            case 'left-bottom':
+                return { vertical: 'bottom', horizontal: 'right' };
+            case 'right':
+                return { vertical: 'center', horizontal: 'left' };
+            case 'right-top':
+                return { vertical: 'top', horizontal: 'left' };
+            case 'right-bottom':
+                return { vertical: 'bottom', horizontal: 'left' };
+        }
+    }, [placement]);
+    // Render ----------------------------------------------------------------------------------------------------------
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(FormButton, __assign$6({ className: classNames$1(className, 'SearchMenuButton'), size: 'medium', sx: sx, fullWidth: false, startIcon: startIcon, icon: icon }, props, { id: buttonId, "aria-controls": open ? menuId : undefined, "aria-haspopup": 'true', "aria-expanded": open ? 'true' : undefined, endIcon: endIcon, onClick: handleClick }), children),
+        React__default.createElement(Menu, { id: menuId, "aria-labelledby": buttonId, anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }, menuList)));
+};
+SearchMenuButton.defaultProps = SearchMenuButtonDefaultProps;dayjs.extend(dayjsIsSameOrAfter);
 dayjs.extend(dayjsIsSameOrBefore);
-dayjs.extend(dayjsIsBetween);export{Form,FormAutocomplete,FormAutocompleteDefaultProps,FormBlock,FormBlockDefaultProps,FormBody,FormBodyDefaultProps,FormButton,FormButtonDefaultProps,FormCheckbox,FormCheckboxDefaultProps,FormCol,FormColDefaultProps,FormContext,FormContextDefaultValue,FormContextProvider,FormDatePicker,FormDatePickerDefaultProps,FormDateRangePicker,FormDateRangePickerDefaultProps,FormDateTimePicker,FormDateTimePickerDefaultProps,FormDefaultProps,FormDivider,FormDividerDefaultProps,FormEmail,FormEmailDefaultProps,FormFile,FormFileDefaultProps,FormFooter,FormFooterDefaultProps,FormHidden,FormHiddenDefaultProps,FormIcon,FormIconDefaultProps,FormImageFile,FormImageFileDefaultProps,FormLabel,FormLabelDefaultProps,FormMobile,FormMobileDefaultProps,FormNumber,FormNumberDefaultProps,FormPassword,FormPasswordDefaultProps,FormRadioGroup,FormRadioGroupDefaultProps,FormRating,FormRatingDefaultProps,FormRow,FormRowDefaultProps,FormSearch,FormSearchDefaultProps,FormSelect,FormSelectDefaultProps,FormTag,FormTagDefaultProps,FormTel,FormTelDefaultProps,FormText,FormTextDefaultProps,FormTextEditor,FormTextEditorDefaultProps,FormTextField,FormTextFieldDefaultProps,FormTextarea,FormTextareaDefaultProps,FormTimePicker,FormTimePickerDefaultProps,FormToggleButtonGroup,FormToggleButtonGroupDefaultProps,FormUrl,FormUrlDefaultProps,Search,SearchButton,SearchButtonDefaultProps,SearchDefaultProps,SearchGroup,SearchGroupDefaultProps,SearchGroupRow,SearchGroupRowDefaultProps,useFormState};//# sourceMappingURL=index.esm.js.map
+dayjs.extend(dayjsIsBetween);export{Form,FormAutocomplete,FormAutocompleteDefaultProps,FormBlock,FormBlockDefaultProps,FormBody,FormBodyDefaultProps,FormButton,FormButtonDefaultProps,FormCheckbox,FormCheckboxDefaultProps,FormCol,FormColDefaultProps,FormContext,FormContextDefaultValue,FormContextProvider,FormDatePicker,FormDatePickerDefaultProps,FormDateRangePicker,FormDateRangePickerDefaultProps,FormDateTimePicker,FormDateTimePickerDefaultProps,FormDefaultProps,FormDivider,FormDividerDefaultProps,FormEmail,FormEmailDefaultProps,FormFile,FormFileDefaultProps,FormFooter,FormFooterDefaultProps,FormHidden,FormHiddenDefaultProps,FormIcon,FormIconDefaultProps,FormImageFile,FormImageFileDefaultProps,FormLabel,FormLabelDefaultProps,FormMobile,FormMobileDefaultProps,FormNumber,FormNumberDefaultProps,FormPassword,FormPasswordDefaultProps,FormRadioGroup,FormRadioGroupDefaultProps,FormRating,FormRatingDefaultProps,FormRow,FormRowDefaultProps,FormSearch,FormSearchDefaultProps,FormSelect,FormSelectDefaultProps,FormTag,FormTagDefaultProps,FormTel,FormTelDefaultProps,FormText,FormTextDefaultProps,FormTextEditor,FormTextEditorDefaultProps,FormTextField,FormTextFieldDefaultProps,FormTextarea,FormTextareaDefaultProps,FormTimePicker,FormTimePickerDefaultProps,FormToggleButtonGroup,FormToggleButtonGroupDefaultProps,FormUrl,FormUrlDefaultProps,Search,SearchButton,SearchButtonDefaultProps,SearchDefaultProps,SearchGroup,SearchGroupDefaultProps,SearchGroupRow,SearchGroupRowDefaultProps,SearchMenuButton,SearchMenuButtonDefaultProps,useFormState};//# sourceMappingURL=index.esm.js.map