@pdg/react-table 1.0.71 → 1.0.73

package/dist/InfoTable/InfoTable.style.d.ts

@@ -11,3 +11,4 @@ export declare const ValueClipboard: import("@emotion/styled").StyledComponent<i
 export declare const ClipboardIconButton: import("@emotion/styled").StyledComponent<import("@mui/material").IconButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, "style" | "className" | "tabIndex" | "color" | "children" | "sx" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "size"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const Line: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/InfoTable/InfoTable.types.d.ts

@@ -4,9 +4,10 @@ import { CommonSxProps } from '../@types';
 export interface InfoTableInfo {
     [key: string]: any;
 }
-export type InfoTableItemType = 'text' | 'number' | 'tel' | 'url' | 'email' | 'date' | 'datetime' | 'date-hour' | 'date-minute';
+export type InfoTableItemType = 'text' | 'number' | 'tel' | 'url' | 'email' | 'date' | 'datetime' | 'date-hour' | 'date-minute' | 'company_no' | 'personal_no' | 'divider';
 export interface InfoTableItem<T = InfoTableInfo> {
-    label: ReactNode;
+    icon?: string;
+    label?: ReactNode;
     name?: keyof T;
     type?: InfoTableItemType;
     ellipsis?: boolean;
@@ -15,6 +16,8 @@ export interface InfoTableItem<T = InfoTableInfo> {
     dateTwoLine?: boolean;
     numberPrefix?: string;
     numberSuffix?: string;
+    dividerColor?: TypographyProps['color'];
+    dividerLine?: boolean;
     style?: CommonSxProps['style'];
     sx?: BoxProps['sx'];
     labelClassName?: string;
@@ -56,6 +59,7 @@ export interface InfoTableProps<T = InfoTableInfo> {
     labelColor?: TypographyProps['color'];
     labelStyle?: CommonSxProps['style'];
     labelSx?: BoxProps['sx'];
+    dividerColor?: TypographyProps['color'];
     valueClassName?: string;
     valueStyle?: CommonSxProps['style'];
     valueSx?: CommonSxProps['sx'];
@@ -65,4 +69,4 @@ export interface InfoTableProps<T = InfoTableInfo> {
     items: InfoTableItems<T>;
     onCopyToClipboard?(item: InfoTableItem<T>, text: string): void;
 }
-export declare const InfoTableDefaultProps: Pick<InfoTableProps, 'spacing' | 'columnSpacing' | 'rowSpacing' | 'labelColor'>;
+export declare const InfoTableDefaultProps: Pick<InfoTableProps, 'spacing' | 'columnSpacing' | 'rowSpacing' | 'labelColor' | 'dividerColor'>;

package/dist/Table/Table.types.d.ts

@@ -8,7 +8,7 @@ export interface TableItem {
 }
 export interface TableColumn<T = TableItem> {
     id?: string;
-    type?: 'text' | 'number' | 'tel' | 'date' | 'datetime' | 'date-hour' | 'date-minute' | 'img' | 'button' | 'buttons' | 'check';
+    type?: 'text' | 'number' | 'tel' | 'date' | 'datetime' | 'date-hour' | 'date-minute' | 'company_no' | 'personal_no' | 'img' | 'button' | 'buttons' | 'check';
     label?: ReactNode;
     name?: keyof T;
     align?: TableCellProps['align'];

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import*as React from'react';import React__default,{useRef,useState,useCallback,useEffect,isValidElement,createRef,cloneElement,PureComponent,createContext,useContext,useMemo,useLayoutEffect,useId}from'react';import {styled,TableRow,lighten,TableCell,Box,Tooltip,Checkbox,Stack,Pagination,useTheme,TableHead,TableBody,Icon,TableFooter,Paper,Table as Table$1,Grid,Button,Popper,Grow,ClickAwayListener,IconButton}from'@mui/material';import {findDOMNode}from'react-dom';import {useSortable,sortableKeyboardCoordinates,arrayMove,SortableContext,verticalListSortingStrategy}from'@dnd-kit/sortable';import dayjs from'dayjs';import {useSensors,useSensor,MouseSensor,TouchSensor,KeyboardSensor,DndContext,closestCenter}from'@dnd-kit/core';import {Search,SearchGroup,FormHidden}from'@pdg/react-form';/******************************************************************************
+import*as React from'react';import React__default,{useRef,useState,useCallback,useEffect,isValidElement,createRef,cloneElement,PureComponent,createContext,useContext,useMemo,useLayoutEffect,useId}from'react';import {styled,TableRow,lighten,TableCell,Box,Tooltip,Checkbox,Stack,Pagination,useTheme,TableHead,TableBody,Icon,TableFooter,Paper,Table as Table$1,Grid,Button,Popper,Grow,ClickAwayListener,IconButton}from'@mui/material';import {findDOMNode}from'react-dom';import {useSortable,sortableKeyboardCoordinates,arrayMove,SortableContext,verticalListSortingStrategy}from'@dnd-kit/sortable';import dayjs from'dayjs';import {useSensors,useSensor,MouseSensor,TouchSensor,KeyboardSensor,DndContext,closestCenter}from'@dnd-kit/core';import {Search,SearchGroup,FormHidden,FormIcon}from'@pdg/react-form';/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -2787,6 +2787,30 @@ function typographyColorToSxColor(color) {
         }
     }
     return tmp;
+}/********************************************************************************************************************
+ * 사업자등록번호 하이픈 추가
+ * @param companyNo 사업자등록번호
+ * @returns 하이픈이 추가된 사업자등록번호
+ * ******************************************************************************************************************/
+function companyNoAutoDash(companyNo) {
+    var str = companyNo.replace(/[^0-9]/g, '');
+    var values = [str.slice(0, 3)];
+    if (str.length > 3)
+        values.push(str.slice(3, 5));
+    if (str.length > 5)
+        values.push(str.slice(5));
+    return values.join('-');
+}/********************************************************************************************************************
+ * 주민등록번호에 하이픈 추가하는 함수
+ * @param personalNo 주민등록번호
+ * @returns 하이픈 추가된 주민등록번호
+ * ******************************************************************************************************************/
+function personalNoAutoDash(personalNo) {
+    var str = personalNo.replace(/[^0-9]/g, '');
+    var values = [str.slice(0, 6)];
+    if (str.length > 6)
+        values.push(str.slice(6));
+    return values.join('-');
 }var TableContextDefaultValue = {
     menuOpen: false,
     openMenuId: undefined,
@@ -3037,6 +3061,16 @@ var TableBodyCell = function (_a) {
                     data = getTelAutoDash(data);
                 }
                 break;
+            case 'company_no':
+                if (typeof data === 'string') {
+                    data = companyNoAutoDash(data);
+                }
+                break;
+            case 'personal_no':
+                if (typeof data === 'string') {
+                    data = personalNoAutoDash(data);
+                }
+                break;
             case 'check':
                 data = (React__default.createElement(Box, { className: 'TableBoxyCell-check-box', onClick: menuOpen ? undefined : function (e) { return e.stopPropagation(); } },
                     React__default.createElement(Checkbox, { checked: checked, disabled: checkDisabled, onChange: function (e, newChecked) {
@@ -4573,13 +4607,15 @@ TableMenuButton.defaultProps = TableMenuButtonDefaultProps;var InfoTableDefaultP
     spacing: 2,
     rowSpacing: 3,
     labelColor: 'primary',
+    dividerColor: 'gray',
 };var Label = styled(Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 12px;\n  font-weight: bold;\n"], ["\n  font-size: 12px;\n  font-weight: bold;\n"])));
 var ValueWrap = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 3px;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n"], ["\n  margin-top: 3px;\n  position: relative;\n  display: flex;\n  flex-direction: row;\n"])));
 var Value = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
 var ValueEllipsis = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"], ["\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n"])));
 var ValueClipboard = styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
 var ClipboardIconButton = styled(IconButton)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-top: -10px;\n  margin-bottom: -10px;\n"], ["\n  margin-top: -10px;\n  margin-bottom: -10px;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;var Component = {};var toggleSelection = function () {
+var Line = styled('div')(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-top: 1px solid #efefef;\n  height: 1px;\n  flex: 1;\n"], ["\n  border-top: 1px solid #efefef;\n  height: 1px;\n  flex: 1;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;var Component = {};var toggleSelection = function () {
   var selection = document.getSelection();
   if (!selection.rangeCount) {
     return function () {};
@@ -4844,7 +4880,7 @@ _defineProperty(CopyToClipboard$1, "defaultProps", {
 
 CopyToClipboard.CopyToClipboard = CopyToClipboard;
 var lib = CopyToClipboard;var InfoTable = function (_a) {
-    var cols = _a.cols, spacing = _a.spacing, columnSpacing = _a.columnSpacing, rowSpacing = _a.rowSpacing, className = _a.className, style = _a.style, sx = _a.sx, labelClassName = _a.labelClassName, labelColor = _a.labelColor, labelStyle = _a.labelStyle, labelSx = _a.labelSx, valueClassName = _a.valueClassName, valueStyle = _a.valueStyle, valueSx = _a.valueSx, ellipsis = _a.ellipsis, valueUnderline = _a.valueUnderline, info = _a.info, items = _a.items, onCopyToClipboard = _a.onCopyToClipboard;
+    var cols = _a.cols, spacing = _a.spacing, columnSpacing = _a.columnSpacing, rowSpacing = _a.rowSpacing, className = _a.className, style = _a.style, sx = _a.sx, labelClassName = _a.labelClassName, labelColor = _a.labelColor, labelStyle = _a.labelStyle, labelSx = _a.labelSx, dividerColor = _a.dividerColor, valueClassName = _a.valueClassName, valueStyle = _a.valueStyle, valueSx = _a.valueSx, ellipsis = _a.ellipsis, valueUnderline = _a.valueUnderline, info = _a.info, items = _a.items, onCopyToClipboard = _a.onCopyToClipboard;
     var sizeProps = useMemo(function () {
         var value = {};
         if (typeof cols === 'number') {
@@ -4866,7 +4902,7 @@ var lib = CopyToClipboard;var InfoTable = function (_a) {
     }, [cols]);
     return (React__default.createElement(Grid, { container: true, spacing: spacing, columnSpacing: columnSpacing, rowSpacing: rowSpacing, className: classNames('InfoTable', className), style: style, sx: sx }, items.map(function (item, idx) {
         if (item) {
-            var finalLabelColor = typographyColorToSxColor(item.labelColor || labelColor);
+            var finalLabelColor = typographyColorToSxColor(item.type === 'divider' ? item.dividerColor || dividerColor : item.labelColor || labelColor);
             var finalLabelSx = combineSx(labelSx, item.labelSx, !!finalLabelColor && { color: finalLabelColor });
             var finalValueSx = combineSx(valueSx, item.valueSx);
             var valueUnderlineStyle = valueUnderline
@@ -4934,6 +4970,16 @@ var lib = CopyToClipboard;var InfoTable = function (_a) {
                                 React__default.createElement("a", { href: data, target: '_blank' }, data)));
                         }
                         break;
+                    case 'company_no':
+                        if (typeof data === 'string') {
+                            data = companyNoAutoDash(data);
+                        }
+                        break;
+                    case 'personal_no':
+                        if (typeof data === 'string') {
+                            data = personalNoAutoDash(data);
+                        }
+                        break;
                     case 'date':
                         if (typeof data === 'string' || typeof data === 'number') {
                             data = dayjs(data, item.dateFormat).format('YYYY-MM-DD');
@@ -4971,8 +5017,15 @@ var lib = CopyToClipboard;var InfoTable = function (_a) {
             if (empty(data))
                 data = item.onRenderEmpty ? item.onRenderEmpty(info) : React__default.createElement(React__default.Fragment, null, "\u00A0");
             var copyToClipboardText_1 = item.clipboardText || (typeof data === 'string' ? data : typeof data === 'number' ? data.toString() : '');
-            return (React__default.createElement(Grid, __assign$3({ key: idx, item: true }, finalSizeProps, { className: item.className, style: item.style, sx: item.sx }),
-                React__default.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign$3(__assign$3({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label),
+            return item.type === 'divider' ? (React__default.createElement(Grid, { key: idx, item: true, xs: 12 },
+                React__default.createElement(Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
+                    item.icon && (React__default.createElement(FormIcon, { sx: { color: item.dividerColor || dividerColor }, fontSize: 'small' }, item.icon)),
+                    item.label && (React__default.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign$3(__assign$3({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
+                    item.dividerLine && (React__default.createElement(React__default.Fragment, null, item.icon || item.label ? (React__default.createElement("div", { style: { flex: 1, paddingLeft: 5 } },
+                        React__default.createElement(Line, null))) : (React__default.createElement(Line, null))))))) : (React__default.createElement(Grid, __assign$3({ key: idx, item: true }, finalSizeProps, { className: item.className, style: item.style, sx: item.sx }),
+                React__default.createElement(Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
+                    item.icon && (React__default.createElement(FormIcon, { sx: { color: finalLabelColor }, fontSize: 'small' }, "CalendarMonth")),
+                    React__default.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign$3(__assign$3({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
                 React__default.createElement(ValueWrap, { className: classNames(valueClassName, item.valueClassName), style: __assign$3(__assign$3(__assign$3({}, valueStyle), item.valueStyle), valueUnderlineStyle), sx: finalValueSx },
                     item.ellipsis || ellipsis ? React__default.createElement(ValueEllipsis, null, data) : React__default.createElement(Value, null, data),
                     item.clipboard && notEmpty(copyToClipboardText_1) && (React__default.createElement(ValueClipboard, null,