@pdg/react-table 1.0.63 → 1.0.65

package/dist/@util/index.d.ts

@@ -4,3 +4,4 @@ export { ll, nextTick };
 export * from './compare';
 export * from './number';
 export * from './table';
+export * from './tel';

package/dist/@util/tel.d.ts

@@ -0,0 +1 @@
+export declare function getTelAutoDash(tel: string | null | undefined): string | null;

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

@@ -8,7 +8,7 @@ export interface TableItem {
 }
 export interface TableColumn<T = TableItem> {
     id: string;
-    type?: 'text' | 'number' | 'date' | 'datetime' | 'img' | 'button' | 'button-ellipsis' | 'buttons' | 'check';
+    type?: 'text' | 'number' | 'tel' | 'date' | 'datetime' | 'date-hour' | 'date-minute' | 'img' | 'button' | 'buttons' | 'check';
     label?: ReactNode;
     name?: string;
     align?: TableCellProps['align'];
@@ -16,6 +16,7 @@ export interface TableColumn<T = TableItem> {
     minWidth?: string | number;
     ellipsis?: boolean;
     dateFormat?: string;
+    dateTwoLine?: boolean;
     hideAllCheck?: boolean;
     tooltipProps?: Omit<TooltipProps, 'children' | 'title'>;
     display?: {

package/dist/index.esm.js

@@ -2721,6 +2721,72 @@ function typographyColorToSxColor(color) {
     else {
         return color;
     }
+}function getTelAutoDash(tel) {
+    if (tel == null)
+        return null;
+    var str = tel.replace(/[^0-9*]/g, '');
+    var isLastDash = tel.substr(tel.length - 1, 1) === '-';
+    if (str.substr(0, 1) !== '0' && !['15', '16', '18'].includes(str.substr(0, 2))) {
+        return tel;
+    }
+    var tmp = '';
+    var preLen;
+    switch (str.substr(0, 2)) {
+        case '02':
+            preLen = 2;
+            break;
+        case '15':
+        case '16':
+        case '18':
+            preLen = 4;
+            break;
+        default:
+            preLen = 3;
+    }
+    if (['15', '16', '18'].includes(str.substr(0, 2))) {
+        if (str.length <= preLen) {
+            tmp = str;
+        }
+        else if (str.length <= preLen + 4) {
+            tmp += str.substr(0, preLen);
+            tmp += '-';
+            tmp += str.substr(preLen);
+        }
+        else {
+            tmp = str;
+        }
+    }
+    else if (str.length <= preLen) {
+        tmp = str;
+    }
+    else if (str.length <= preLen + 3) {
+        tmp += str.substr(0, preLen);
+        tmp += '-';
+        tmp += str.substr(preLen);
+    }
+    else if (str.length <= preLen + 7) {
+        tmp += str.substr(0, preLen);
+        tmp += '-';
+        tmp += str.substr(preLen, 3);
+        tmp += '-';
+        tmp += str.substr(preLen + 3);
+    }
+    else if (str.length <= preLen + 8) {
+        tmp += str.substr(0, preLen);
+        tmp += '-';
+        tmp += str.substr(preLen, 4);
+        tmp += '-';
+        tmp += str.substr(preLen + 4);
+    }
+    else {
+        tmp = str;
+    }
+    if (isLastDash) {
+        if (str.length === preLen) {
+            tmp += '-';
+        }
+    }
+    return tmp;
 }var TableContextDefaultValue = {
     menuOpen: false,
     openMenuId: undefined,
@@ -2747,10 +2813,11 @@ var TableCommonCell = function (_a) {
     var align = useMemo(function () { return getTableColumnAlign(column, defaultAlign); }, [column, defaultAlign]);
     var ellipsis = useMemo(function () {
         return type !== 'head' &&
-            column.type !== 'img' &&
-            column.type !== 'button' &&
-            column.type !== 'buttons' &&
-            (column.ellipsis != null ? column.ellipsis : !!initDefaultEllipsis);
+            (column.ellipsis ||
+                (column.type !== 'img' &&
+                    column.type !== 'button' &&
+                    column.type !== 'buttons' &&
+                    (column.ellipsis == null ? !!initDefaultEllipsis : false)));
     }, [type, column, initDefaultEllipsis]);
     var className = useMemo(function () {
         var _a, _b, _c, _d, _e, _f;
@@ -2864,7 +2931,6 @@ var TableCommonCell = function (_a) {
         if (!menuOpen &&
             column.type !== 'check' &&
             column.type !== 'button' &&
-            column.type !== 'button-ellipsis' &&
             column.type !== 'buttons' &&
             column.type !== 'img') {
             e.stopPropagation();
@@ -2956,6 +3022,11 @@ var TableBodyCell = function (_a) {
                     data = numberWithThousandSeparator(data);
                 }
                 break;
+            case 'tel':
+                if (typeof data === 'string') {
+                    data = getTelAutoDash(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) {
@@ -2965,7 +3036,6 @@ var TableBodyCell = function (_a) {
                         } })));
                 break;
             case 'button':
-            case 'button-ellipsis':
                 data = (React__default.createElement(Box, { className: 'TableBoxyCell-button-box', onClick: menuOpen ? undefined : function (e) { return e.stopPropagation(); } }, data));
                 break;
             case 'buttons':
@@ -2992,7 +3062,29 @@ var TableBodyCell = function (_a) {
                 break;
             case 'datetime':
                 if (data) {
-                    data = dayjs(data, column.dateFormat).format('YYYY-MM-DD HH:mm:ss');
+                    var dt = dayjs(data, column.dateFormat);
+                    data = (React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement("span", null, dt.format('YYYY-MM-DD')),
+                        column.dateTwoLine ? React__default.createElement("br", null) : ' ',
+                        React__default.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH:mm:ss'))));
+                }
+                break;
+            case 'date-hour':
+                if (data) {
+                    var dt = dayjs(data, column.dateFormat);
+                    data = (React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement("span", null, dt.format('YYYY-MM-DD')),
+                        column.dateTwoLine ? React__default.createElement("br", null) : ' ',
+                        React__default.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시'))));
+                }
+                break;
+            case 'date-minute':
+                if (data) {
+                    var dt = dayjs(data, column.dateFormat);
+                    data = (React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement("span", null, dt.format('YYYY-MM-DD')),
+                        column.dateTwoLine ? React__default.createElement("br", null) : ' ',
+                        React__default.createElement("span", { style: { opacity: 0.5 } }, dt.format('HH시 MM분'))));
                 }
                 break;
         }