@pdg/react-table 1.0.80 → 1.0.82
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { BoxProps, GridProps, IconButtonProps, TypographyProps } from '@mui/material';
|
|
3
3
|
import { CommonSxProps } from '../@types';
|
|
4
|
+
import { PdgIconProps } from '@pdg/react-component';
|
|
4
5
|
export interface InfoTableInfo {
|
|
5
6
|
[key: string]: any;
|
|
6
7
|
}
|
|
7
8
|
export type InfoTableItemType = 'text' | 'number' | 'tel' | 'url' | 'email' | 'date' | 'datetime' | 'date-hour' | 'date-minute' | 'company_no' | 'personal_no' | 'divider';
|
|
8
9
|
export interface InfoTableItem<T = InfoTableInfo> {
|
|
9
|
-
icon?:
|
|
10
|
+
icon?: PdgIconProps['children'];
|
|
10
11
|
label?: ReactNode;
|
|
11
12
|
name?: keyof T;
|
|
12
13
|
type?: InfoTableItemType;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
2
2
|
import { TableCellProps, TooltipProps } from '@mui/material';
|
|
3
3
|
import { TablePaginationProps } from '../TablePagination/TablePagination.types';
|
|
4
4
|
import { CommonSxProps } from '../@types';
|
|
@@ -33,6 +33,7 @@ export interface TableColumn<T = TableItem> {
|
|
|
33
33
|
head?: {
|
|
34
34
|
className?: CommonSxProps['className'];
|
|
35
35
|
style?: CommonSxProps['style'];
|
|
36
|
+
backgroundColor?: CSSProperties['backgroundColor'];
|
|
36
37
|
sx?: CommonSxProps['sx'];
|
|
37
38
|
onGetClassName?(): CommonSxProps['className'];
|
|
38
39
|
onGetStyle?(): CommonSxProps['style'];
|
|
@@ -43,6 +44,7 @@ export interface TableColumn<T = TableItem> {
|
|
|
43
44
|
value?: ReactNode;
|
|
44
45
|
className?: CommonSxProps['className'];
|
|
45
46
|
style?: CommonSxProps['style'];
|
|
47
|
+
backgroundColor?: CSSProperties['backgroundColor'];
|
|
46
48
|
sx?: CommonSxProps['sx'];
|
|
47
49
|
onGetClassName?(): CommonSxProps['className'];
|
|
48
50
|
onGetStyle?(): CommonSxProps['style'];
|
|
@@ -51,6 +53,7 @@ export interface TableColumn<T = TableItem> {
|
|
|
51
53
|
};
|
|
52
54
|
className?: CommonSxProps['className'];
|
|
53
55
|
style?: CommonSxProps['style'];
|
|
56
|
+
backgroundColor?: CSSProperties['backgroundColor'];
|
|
54
57
|
sx?: CommonSxProps['sx'];
|
|
55
58
|
onGetClassName?(item: T, index: number): CommonSxProps['className'];
|
|
56
59
|
onGetStyle?(item: T, index: number): CommonSxProps['style'];
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { ButtonProps } from '@mui/material';
|
|
2
|
+
import { PdgIconProps } from '@pdg/react-component';
|
|
2
3
|
export interface TableButtonProps extends Omit<ButtonProps, 'size' | 'startIcon' | 'endIcon'> {
|
|
3
|
-
icon?:
|
|
4
|
-
startIcon?:
|
|
5
|
-
endIcon?:
|
|
4
|
+
icon?: PdgIconProps['children'];
|
|
5
|
+
startIcon?: PdgIconProps['children'];
|
|
6
|
+
endIcon?: PdgIconProps['children'];
|
|
6
7
|
}
|
|
7
8
|
export declare const TableButtonDefaultProps: Pick<TableButtonProps, 'variant' | 'color'>;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { ButtonProps } from '@mui/material';
|
|
2
2
|
import { ReactElement } from 'react';
|
|
3
3
|
import { PopperPlacementType } from '@mui/base/Popper/Popper.types';
|
|
4
|
+
import { PdgIconProps } from '@pdg/react-component';
|
|
4
5
|
export interface TableMenuButtonProps extends Omit<ButtonProps, 'size' | 'startIcon' | 'endIcon' | 'onClick'> {
|
|
5
|
-
icon?:
|
|
6
|
-
startIcon?:
|
|
7
|
-
endIcon?:
|
|
6
|
+
icon?: PdgIconProps['children'];
|
|
7
|
+
startIcon?: PdgIconProps['children'];
|
|
8
|
+
endIcon?: PdgIconProps['children'];
|
|
8
9
|
placement?: PopperPlacementType;
|
|
9
10
|
inModal?: boolean;
|
|
10
11
|
zIndex?: number;
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React,{createContext,useContext,useMemo,useCallback,useState,useEffect,useRef,useLayoutEffect,useId}from'react';import classNames from'classnames';import {styled,TableRow,lighten,TableCell,Box,Tooltip,Checkbox,Stack,Pagination,useTheme,TableHead,TableBody,Icon,TableFooter,Paper,Table as Table$1,Grid,
|
|
1
|
+
import React,{createContext,useContext,useMemo,useCallback,useState,useEffect,useRef,useLayoutEffect,useId}from'react';import classNames from'classnames';import {styled,TableRow,lighten,TableCell,Box,Tooltip,Checkbox,Stack,Pagination,useTheme,TableHead,TableBody,Icon,TableFooter,Paper,Table as Table$1,Grid,Popper,Grow,ClickAwayListener,IconButton}from'@mui/material';import SimpleBar from'simplebar-react';import {useResizeDetector}from'react-resize-detector';import {useSortable,sortableKeyboardCoordinates,arrayMove,SortableContext,verticalListSortingStrategy}from'@dnd-kit/sortable';import dayjs from'dayjs';import {personalNoAutoDash,companyNoAutoDash,telNoAutoDash,numberFormat,notEmpty,equal,empty}from'@pdg/util';import {useAutoUpdateLayoutState}from'@pdg/react-hook';import {useSensors,useSensor,MouseSensor,TouchSensor,KeyboardSensor,DndContext,closestCenter}from'@dnd-kit/core';import'simplebar-react/dist/simplebar.min.css';import {v4}from'uuid';import {Search,SearchGroup,FormHidden}from'@pdg/react-form';import {PdgButton,PdgIcon}from'@pdg/react-component';import {CopyToClipboard}from'react-copy-to-clipboard';/******************************************************************************
|
|
2
2
|
Copyright (c) Microsoft Corporation.
|
|
3
3
|
|
|
4
4
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
@@ -205,23 +205,25 @@ var TableCommonCell = function (_a) {
|
|
|
205
205
|
}
|
|
206
206
|
}, [column, index, initClassName, item, type]);
|
|
207
207
|
var style = useMemo(function () {
|
|
208
|
-
var _a, _b, _c, _d, _e, _f;
|
|
208
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
209
209
|
var style;
|
|
210
210
|
var getStyle;
|
|
211
211
|
switch (type) {
|
|
212
212
|
case 'head':
|
|
213
|
-
style = (_a = column.head) === null || _a === void 0 ? void 0 : _a.
|
|
214
|
-
|
|
213
|
+
style = ((_a = column.head) === null || _a === void 0 ? void 0 : _a.backgroundColor)
|
|
214
|
+
? __assign(__assign({}, (_b = column.head) === null || _b === void 0 ? void 0 : _b.style), { backgroundColor: column.head.backgroundColor }) : (_c = column.head) === null || _c === void 0 ? void 0 : _c.style;
|
|
215
|
+
getStyle = ((_d = column.head) === null || _d === void 0 ? void 0 : _d.onGetStyle) ? (_e = column.head) === null || _e === void 0 ? void 0 : _e.onGetStyle() : undefined;
|
|
215
216
|
break;
|
|
216
217
|
case 'body':
|
|
217
|
-
style = column.style;
|
|
218
|
+
style = column.backgroundColor ? __assign(__assign({}, column.style), { backgroundColor: column.backgroundColor }) : column.style;
|
|
218
219
|
if (item != null && index != null) {
|
|
219
220
|
getStyle = column.onGetStyle ? column.onGetStyle(item, index) : undefined;
|
|
220
221
|
}
|
|
221
222
|
break;
|
|
222
223
|
case 'footer':
|
|
223
|
-
style = (
|
|
224
|
-
|
|
224
|
+
style = ((_f = column.footer) === null || _f === void 0 ? void 0 : _f.backgroundColor)
|
|
225
|
+
? __assign(__assign({}, (_g = column.footer) === null || _g === void 0 ? void 0 : _g.style), { backgroundColor: column.footer.backgroundColor }) : (_h = column.footer) === null || _h === void 0 ? void 0 : _h.style;
|
|
226
|
+
getStyle = ((_j = column.footer) === null || _j === void 0 ? void 0 : _j.onGetStyle) ? (_k = column.footer) === null || _k === void 0 ? void 0 : _k.onGetStyle() : undefined;
|
|
225
227
|
break;
|
|
226
228
|
}
|
|
227
229
|
return __assign(__assign(__assign(__assign({}, initStyle), { width: column.width, minWidth: column.minWidth, cursor: type === 'body' && (column.onClick || onClick) ? 'pointer' : undefined, paddingLeft: column.paddingLeft, paddingRight: column.paddingRight }), style), getStyle);
|
|
@@ -392,7 +394,7 @@ var TableBodyCell = function (_a) {
|
|
|
392
394
|
break;
|
|
393
395
|
case 'tel':
|
|
394
396
|
if (typeof data === 'string') {
|
|
395
|
-
data =
|
|
397
|
+
data = telNoAutoDash(data);
|
|
396
398
|
}
|
|
397
399
|
break;
|
|
398
400
|
case 'company_no':
|
|
@@ -1647,37 +1649,50 @@ SearchTable.defaultProps = SearchTableDefaultProps;var TableButtonDefaultProps =
|
|
|
1647
1649
|
color: 'primary',
|
|
1648
1650
|
};var TableButton = React.forwardRef(function (_a, ref) {
|
|
1649
1651
|
var children = _a.children, className = _a.className, initSx = _a.sx, color = _a.color, icon = _a.icon, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, props = __rest(_a, ["children", "className", "sx", "color", "icon", "startIcon", "endIcon", "onClick"]);
|
|
1650
|
-
var sx = useMemo(function () { return (__assign({ minWidth: 0, px:
|
|
1652
|
+
var sx = useMemo(function () { return (__assign({ minWidth: 0, px: 0.7 }, initSx)); }, [initSx]);
|
|
1651
1653
|
// Render ----------------------------------------------------------------------------------------------------------
|
|
1652
|
-
return (React.createElement(
|
|
1653
|
-
icon && (React.createElement(PdgIcon, { fontSize: 'small', color: color }, icon)),
|
|
1654
|
-
children));
|
|
1654
|
+
return (React.createElement(PdgButton, __assign({ ref: ref, className: classNames(className, 'TableButton'), type: 'button', size: 'small', sx: sx, color: color, icon: icon, startIcon: startIcon, endIcon: endIcon, onClick: onClick }, props), children));
|
|
1655
1655
|
});
|
|
1656
1656
|
TableButton.displayName = 'TableButton';
|
|
1657
1657
|
TableButton.defaultProps = TableButtonDefaultProps;var TableMenuButtonDefaultProps = {
|
|
1658
|
-
variant: '
|
|
1658
|
+
variant: 'text',
|
|
1659
1659
|
color: 'primary',
|
|
1660
1660
|
placement: 'bottom',
|
|
1661
1661
|
};var TableMenuButton = React.forwardRef(function (_a, ref) {
|
|
1662
|
-
|
|
1663
|
-
|
|
1662
|
+
/********************************************************************************************************************
|
|
1663
|
+
* ID
|
|
1664
|
+
* ******************************************************************************************************************/
|
|
1665
|
+
var children = _a.children, className = _a.className, initSx = _a.sx, color = _a.color, variant = _a.variant, initIcon = _a.icon, startIcon = _a.startIcon, endIcon = _a.endIcon, placement = _a.placement, inModal = _a.inModal, zIndex = _a.zIndex, menuList = _a.menuList, props = __rest(_a, ["children", "className", "sx", "color", "variant", "icon", "startIcon", "endIcon", "placement", "inModal", "zIndex", "menuList"]);
|
|
1664
1666
|
var buttonId = useId();
|
|
1665
1667
|
var menuId = useId();
|
|
1666
|
-
|
|
1668
|
+
/********************************************************************************************************************
|
|
1669
|
+
* Use
|
|
1670
|
+
* ******************************************************************************************************************/
|
|
1667
1671
|
var _b = useTableState(), menuOpen = _b.menuOpen, openMenuId = _b.openMenuId, setMenuOpen = _b.setMenuOpen;
|
|
1668
|
-
|
|
1672
|
+
/********************************************************************************************************************
|
|
1673
|
+
* Ref
|
|
1674
|
+
* ******************************************************************************************************************/
|
|
1669
1675
|
var anchorRef = useRef();
|
|
1670
|
-
|
|
1676
|
+
/********************************************************************************************************************
|
|
1677
|
+
* State
|
|
1678
|
+
* ******************************************************************************************************************/
|
|
1671
1679
|
var _c = useState(false), open = _c[0], setOpen = _c[1];
|
|
1672
|
-
|
|
1680
|
+
/********************************************************************************************************************
|
|
1681
|
+
* Memo
|
|
1682
|
+
* ******************************************************************************************************************/
|
|
1683
|
+
var icon = useMemo(function () { return (!initIcon && !startIcon && !endIcon && !children ? 'MoreVert' : initIcon); }, [initIcon, startIcon, endIcon, children]);
|
|
1684
|
+
var sx = useMemo(function () { return (__assign({ minWidth: 0, pl: !children ? 0.7 : icon || startIcon ? 0.7 : variant === 'text' ? 1.2 : 0.7, pr: !children ? 0.7 : endIcon ? 0.7 : variant === 'text' ? 1.2 : 0.7 }, initSx)); }, [children, endIcon, icon, initSx, startIcon, variant]);
|
|
1685
|
+
/********************************************************************************************************************
|
|
1686
|
+
* Effect
|
|
1687
|
+
* ******************************************************************************************************************/
|
|
1673
1688
|
useEffect(function () {
|
|
1674
1689
|
if (open && menuOpen && openMenuId !== menuId) {
|
|
1675
1690
|
setOpen(false);
|
|
1676
1691
|
}
|
|
1677
1692
|
}, [menuId, menuOpen, open, openMenuId]);
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1693
|
+
/********************************************************************************************************************
|
|
1694
|
+
* Event Handler
|
|
1695
|
+
* ******************************************************************************************************************/
|
|
1681
1696
|
var handleClick = useCallback(function () {
|
|
1682
1697
|
setOpen(function (old) { return !old; });
|
|
1683
1698
|
if (!open) {
|
|
@@ -1708,7 +1723,9 @@ TableButton.defaultProps = TableButtonDefaultProps;var TableMenuButtonDefaultPro
|
|
|
1708
1723
|
}
|
|
1709
1724
|
}
|
|
1710
1725
|
}, [menuId, open, setMenuOpen]);
|
|
1711
|
-
|
|
1726
|
+
/********************************************************************************************************************
|
|
1727
|
+
* Memo
|
|
1728
|
+
* ******************************************************************************************************************/
|
|
1712
1729
|
var finalMenuList = useMemo(function () {
|
|
1713
1730
|
return React.cloneElement(menuList, {
|
|
1714
1731
|
autoFocusItem: open,
|
|
@@ -1718,9 +1735,11 @@ TableButton.defaultProps = TableButtonDefaultProps;var TableMenuButtonDefaultPro
|
|
|
1718
1735
|
onClick: handleClose,
|
|
1719
1736
|
});
|
|
1720
1737
|
}, [buttonId, handleClose, handleListKeyDown, menuId, menuList, open]);
|
|
1721
|
-
|
|
1738
|
+
/********************************************************************************************************************
|
|
1739
|
+
* Render
|
|
1740
|
+
* ******************************************************************************************************************/
|
|
1722
1741
|
return (React.createElement("span", null,
|
|
1723
|
-
React.createElement(
|
|
1742
|
+
React.createElement(PdgButton, __assign({ ref: function (r) {
|
|
1724
1743
|
if (ref) {
|
|
1725
1744
|
if (typeof ref === 'function') {
|
|
1726
1745
|
ref(r);
|
|
@@ -1730,9 +1749,7 @@ TableButton.defaultProps = TableButtonDefaultProps;var TableMenuButtonDefaultPro
|
|
|
1730
1749
|
}
|
|
1731
1750
|
}
|
|
1732
1751
|
anchorRef.current = r;
|
|
1733
|
-
}, id: buttonId, "aria-controls": open ? menuId : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": 'true', className: classNames(className, 'TableMenuButton'), type: 'button', size: 'small', sx: sx, color: color,
|
|
1734
|
-
icon && (React.createElement(PdgIcon, { fontSize: 'small', color: color }, icon)),
|
|
1735
|
-
children),
|
|
1752
|
+
}, id: buttonId, variant: variant, "aria-controls": open ? menuId : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": 'true', className: classNames(className, 'TableMenuButton'), type: 'button', size: 'small', sx: sx, color: color, icon: icon, startIcon: startIcon, endIcon: endIcon, onClick: handleClick }, props), children),
|
|
1736
1753
|
React.createElement(Popper, { className: 'TableMenuButton-Popper', open: open, anchorEl: anchorRef.current, role: undefined, placement: placement, transition: true, style: { zIndex: inModal ? (zIndex === undefined ? 1301 : zIndex) : zIndex } }, function (_a) {
|
|
1737
1754
|
var TransitionProps = _a.TransitionProps, placement = _a.placement;
|
|
1738
1755
|
var placements = placement.split('-');
|
|
@@ -1876,7 +1893,7 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
|
|
|
1876
1893
|
break;
|
|
1877
1894
|
case 'tel':
|
|
1878
1895
|
if (typeof data === 'string') {
|
|
1879
|
-
data =
|
|
1896
|
+
data = telNoAutoDash(data);
|
|
1880
1897
|
}
|
|
1881
1898
|
break;
|
|
1882
1899
|
case 'email':
|
|
@@ -1940,12 +1957,12 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
|
|
|
1940
1957
|
var copyToClipboardText_1 = item.clipboardText || (typeof data === 'string' ? data : typeof data === 'number' ? data.toString() : '');
|
|
1941
1958
|
return item.type === 'divider' ? (React.createElement(Grid, { key: idx, item: true, xs: 12 },
|
|
1942
1959
|
React.createElement(Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
|
|
1943
|
-
item.icon && (React.createElement(
|
|
1960
|
+
item.icon && (React.createElement(PdgIcon, { sx: { color: item.dividerColor || dividerColor }, fontSize: 'small' }, item.icon)),
|
|
1944
1961
|
item.label && (React.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign(__assign({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
|
|
1945
1962
|
item.dividerLine && (React.createElement(React.Fragment, null, item.icon || item.label ? (React.createElement("div", { style: { flex: 1, paddingLeft: 5 } },
|
|
1946
1963
|
React.createElement(Line, null))) : (React.createElement(Line, null))))))) : (React.createElement(Grid, __assign({ key: idx, item: true }, finalSizeProps, { className: item.className, style: item.style, sx: item.sx }),
|
|
1947
1964
|
React.createElement(Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
|
|
1948
|
-
item.icon && (React.createElement(
|
|
1965
|
+
item.icon && (React.createElement(PdgIcon, { sx: { color: finalLabelColor }, fontSize: 'small' }, "CalendarMonth")),
|
|
1949
1966
|
React.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign(__assign({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
|
|
1950
1967
|
React.createElement(ValueWrap, { className: classNames(valueClassName, item.valueClassName), style: __assign(__assign(__assign({}, valueStyle), item.valueStyle), valueUnderlineStyle), sx: finalValueSx },
|
|
1951
1968
|
item.ellipsis || ellipsis ? React.createElement(ValueEllipsis, null, data) : React.createElement(Value, null, data),
|
package/dist/index.js
CHANGED
|
@@ -205,23 +205,25 @@ var TableCommonCell = function (_a) {
|
|
|
205
205
|
}
|
|
206
206
|
}, [column, index, initClassName, item, type]);
|
|
207
207
|
var style = React.useMemo(function () {
|
|
208
|
-
var _a, _b, _c, _d, _e, _f;
|
|
208
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
209
209
|
var style;
|
|
210
210
|
var getStyle;
|
|
211
211
|
switch (type) {
|
|
212
212
|
case 'head':
|
|
213
|
-
style = (_a = column.head) === null || _a === void 0 ? void 0 : _a.
|
|
214
|
-
|
|
213
|
+
style = ((_a = column.head) === null || _a === void 0 ? void 0 : _a.backgroundColor)
|
|
214
|
+
? __assign(__assign({}, (_b = column.head) === null || _b === void 0 ? void 0 : _b.style), { backgroundColor: column.head.backgroundColor }) : (_c = column.head) === null || _c === void 0 ? void 0 : _c.style;
|
|
215
|
+
getStyle = ((_d = column.head) === null || _d === void 0 ? void 0 : _d.onGetStyle) ? (_e = column.head) === null || _e === void 0 ? void 0 : _e.onGetStyle() : undefined;
|
|
215
216
|
break;
|
|
216
217
|
case 'body':
|
|
217
|
-
style = column.style;
|
|
218
|
+
style = column.backgroundColor ? __assign(__assign({}, column.style), { backgroundColor: column.backgroundColor }) : column.style;
|
|
218
219
|
if (item != null && index != null) {
|
|
219
220
|
getStyle = column.onGetStyle ? column.onGetStyle(item, index) : undefined;
|
|
220
221
|
}
|
|
221
222
|
break;
|
|
222
223
|
case 'footer':
|
|
223
|
-
style = (
|
|
224
|
-
|
|
224
|
+
style = ((_f = column.footer) === null || _f === void 0 ? void 0 : _f.backgroundColor)
|
|
225
|
+
? __assign(__assign({}, (_g = column.footer) === null || _g === void 0 ? void 0 : _g.style), { backgroundColor: column.footer.backgroundColor }) : (_h = column.footer) === null || _h === void 0 ? void 0 : _h.style;
|
|
226
|
+
getStyle = ((_j = column.footer) === null || _j === void 0 ? void 0 : _j.onGetStyle) ? (_k = column.footer) === null || _k === void 0 ? void 0 : _k.onGetStyle() : undefined;
|
|
225
227
|
break;
|
|
226
228
|
}
|
|
227
229
|
return __assign(__assign(__assign(__assign({}, initStyle), { width: column.width, minWidth: column.minWidth, cursor: type === 'body' && (column.onClick || onClick) ? 'pointer' : undefined, paddingLeft: column.paddingLeft, paddingRight: column.paddingRight }), style), getStyle);
|
|
@@ -392,7 +394,7 @@ var TableBodyCell = function (_a) {
|
|
|
392
394
|
break;
|
|
393
395
|
case 'tel':
|
|
394
396
|
if (typeof data === 'string') {
|
|
395
|
-
data = util.
|
|
397
|
+
data = util.telNoAutoDash(data);
|
|
396
398
|
}
|
|
397
399
|
break;
|
|
398
400
|
case 'company_no':
|
|
@@ -1647,37 +1649,50 @@ SearchTable.defaultProps = SearchTableDefaultProps;var TableButtonDefaultProps =
|
|
|
1647
1649
|
color: 'primary',
|
|
1648
1650
|
};var TableButton = React.forwardRef(function (_a, ref) {
|
|
1649
1651
|
var children = _a.children, className = _a.className, initSx = _a.sx, color = _a.color, icon = _a.icon, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, props = __rest(_a, ["children", "className", "sx", "color", "icon", "startIcon", "endIcon", "onClick"]);
|
|
1650
|
-
var sx = React.useMemo(function () { return (__assign({ minWidth: 0, px:
|
|
1652
|
+
var sx = React.useMemo(function () { return (__assign({ minWidth: 0, px: 0.7 }, initSx)); }, [initSx]);
|
|
1651
1653
|
// Render ----------------------------------------------------------------------------------------------------------
|
|
1652
|
-
return (React.createElement(
|
|
1653
|
-
icon && (React.createElement(reactComponent.PdgIcon, { fontSize: 'small', color: color }, icon)),
|
|
1654
|
-
children));
|
|
1654
|
+
return (React.createElement(reactComponent.PdgButton, __assign({ ref: ref, className: classNames(className, 'TableButton'), type: 'button', size: 'small', sx: sx, color: color, icon: icon, startIcon: startIcon, endIcon: endIcon, onClick: onClick }, props), children));
|
|
1655
1655
|
});
|
|
1656
1656
|
TableButton.displayName = 'TableButton';
|
|
1657
1657
|
TableButton.defaultProps = TableButtonDefaultProps;var TableMenuButtonDefaultProps = {
|
|
1658
|
-
variant: '
|
|
1658
|
+
variant: 'text',
|
|
1659
1659
|
color: 'primary',
|
|
1660
1660
|
placement: 'bottom',
|
|
1661
1661
|
};var TableMenuButton = React.forwardRef(function (_a, ref) {
|
|
1662
|
-
|
|
1663
|
-
|
|
1662
|
+
/********************************************************************************************************************
|
|
1663
|
+
* ID
|
|
1664
|
+
* ******************************************************************************************************************/
|
|
1665
|
+
var children = _a.children, className = _a.className, initSx = _a.sx, color = _a.color, variant = _a.variant, initIcon = _a.icon, startIcon = _a.startIcon, endIcon = _a.endIcon, placement = _a.placement, inModal = _a.inModal, zIndex = _a.zIndex, menuList = _a.menuList, props = __rest(_a, ["children", "className", "sx", "color", "variant", "icon", "startIcon", "endIcon", "placement", "inModal", "zIndex", "menuList"]);
|
|
1664
1666
|
var buttonId = React.useId();
|
|
1665
1667
|
var menuId = React.useId();
|
|
1666
|
-
|
|
1668
|
+
/********************************************************************************************************************
|
|
1669
|
+
* Use
|
|
1670
|
+
* ******************************************************************************************************************/
|
|
1667
1671
|
var _b = useTableState(), menuOpen = _b.menuOpen, openMenuId = _b.openMenuId, setMenuOpen = _b.setMenuOpen;
|
|
1668
|
-
|
|
1672
|
+
/********************************************************************************************************************
|
|
1673
|
+
* Ref
|
|
1674
|
+
* ******************************************************************************************************************/
|
|
1669
1675
|
var anchorRef = React.useRef();
|
|
1670
|
-
|
|
1676
|
+
/********************************************************************************************************************
|
|
1677
|
+
* State
|
|
1678
|
+
* ******************************************************************************************************************/
|
|
1671
1679
|
var _c = React.useState(false), open = _c[0], setOpen = _c[1];
|
|
1672
|
-
|
|
1680
|
+
/********************************************************************************************************************
|
|
1681
|
+
* Memo
|
|
1682
|
+
* ******************************************************************************************************************/
|
|
1683
|
+
var icon = React.useMemo(function () { return (!initIcon && !startIcon && !endIcon && !children ? 'MoreVert' : initIcon); }, [initIcon, startIcon, endIcon, children]);
|
|
1684
|
+
var sx = React.useMemo(function () { return (__assign({ minWidth: 0, pl: !children ? 0.7 : icon || startIcon ? 0.7 : variant === 'text' ? 1.2 : 0.7, pr: !children ? 0.7 : endIcon ? 0.7 : variant === 'text' ? 1.2 : 0.7 }, initSx)); }, [children, endIcon, icon, initSx, startIcon, variant]);
|
|
1685
|
+
/********************************************************************************************************************
|
|
1686
|
+
* Effect
|
|
1687
|
+
* ******************************************************************************************************************/
|
|
1673
1688
|
React.useEffect(function () {
|
|
1674
1689
|
if (open && menuOpen && openMenuId !== menuId) {
|
|
1675
1690
|
setOpen(false);
|
|
1676
1691
|
}
|
|
1677
1692
|
}, [menuId, menuOpen, open, openMenuId]);
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1693
|
+
/********************************************************************************************************************
|
|
1694
|
+
* Event Handler
|
|
1695
|
+
* ******************************************************************************************************************/
|
|
1681
1696
|
var handleClick = React.useCallback(function () {
|
|
1682
1697
|
setOpen(function (old) { return !old; });
|
|
1683
1698
|
if (!open) {
|
|
@@ -1708,7 +1723,9 @@ TableButton.defaultProps = TableButtonDefaultProps;var TableMenuButtonDefaultPro
|
|
|
1708
1723
|
}
|
|
1709
1724
|
}
|
|
1710
1725
|
}, [menuId, open, setMenuOpen]);
|
|
1711
|
-
|
|
1726
|
+
/********************************************************************************************************************
|
|
1727
|
+
* Memo
|
|
1728
|
+
* ******************************************************************************************************************/
|
|
1712
1729
|
var finalMenuList = React.useMemo(function () {
|
|
1713
1730
|
return React.cloneElement(menuList, {
|
|
1714
1731
|
autoFocusItem: open,
|
|
@@ -1718,9 +1735,11 @@ TableButton.defaultProps = TableButtonDefaultProps;var TableMenuButtonDefaultPro
|
|
|
1718
1735
|
onClick: handleClose,
|
|
1719
1736
|
});
|
|
1720
1737
|
}, [buttonId, handleClose, handleListKeyDown, menuId, menuList, open]);
|
|
1721
|
-
|
|
1738
|
+
/********************************************************************************************************************
|
|
1739
|
+
* Render
|
|
1740
|
+
* ******************************************************************************************************************/
|
|
1722
1741
|
return (React.createElement("span", null,
|
|
1723
|
-
React.createElement(
|
|
1742
|
+
React.createElement(reactComponent.PdgButton, __assign({ ref: function (r) {
|
|
1724
1743
|
if (ref) {
|
|
1725
1744
|
if (typeof ref === 'function') {
|
|
1726
1745
|
ref(r);
|
|
@@ -1730,9 +1749,7 @@ TableButton.defaultProps = TableButtonDefaultProps;var TableMenuButtonDefaultPro
|
|
|
1730
1749
|
}
|
|
1731
1750
|
}
|
|
1732
1751
|
anchorRef.current = r;
|
|
1733
|
-
}, id: buttonId, "aria-controls": open ? menuId : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": 'true', className: classNames(className, 'TableMenuButton'), type: 'button', size: 'small', sx: sx, color: color,
|
|
1734
|
-
icon && (React.createElement(reactComponent.PdgIcon, { fontSize: 'small', color: color }, icon)),
|
|
1735
|
-
children),
|
|
1752
|
+
}, id: buttonId, variant: variant, "aria-controls": open ? menuId : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": 'true', className: classNames(className, 'TableMenuButton'), type: 'button', size: 'small', sx: sx, color: color, icon: icon, startIcon: startIcon, endIcon: endIcon, onClick: handleClick }, props), children),
|
|
1736
1753
|
React.createElement(material.Popper, { className: 'TableMenuButton-Popper', open: open, anchorEl: anchorRef.current, role: undefined, placement: placement, transition: true, style: { zIndex: inModal ? (zIndex === undefined ? 1301 : zIndex) : zIndex } }, function (_a) {
|
|
1737
1754
|
var TransitionProps = _a.TransitionProps, placement = _a.placement;
|
|
1738
1755
|
var placements = placement.split('-');
|
|
@@ -1876,7 +1893,7 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
|
|
|
1876
1893
|
break;
|
|
1877
1894
|
case 'tel':
|
|
1878
1895
|
if (typeof data === 'string') {
|
|
1879
|
-
data = util.
|
|
1896
|
+
data = util.telNoAutoDash(data);
|
|
1880
1897
|
}
|
|
1881
1898
|
break;
|
|
1882
1899
|
case 'email':
|
|
@@ -1940,12 +1957,12 @@ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, temp
|
|
|
1940
1957
|
var copyToClipboardText_1 = item.clipboardText || (typeof data === 'string' ? data : typeof data === 'number' ? data.toString() : '');
|
|
1941
1958
|
return item.type === 'divider' ? (React.createElement(material.Grid, { key: idx, item: true, xs: 12 },
|
|
1942
1959
|
React.createElement(material.Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
|
|
1943
|
-
item.icon && (React.createElement(
|
|
1960
|
+
item.icon && (React.createElement(reactComponent.PdgIcon, { sx: { color: item.dividerColor || dividerColor }, fontSize: 'small' }, item.icon)),
|
|
1944
1961
|
item.label && (React.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign(__assign({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
|
|
1945
1962
|
item.dividerLine && (React.createElement(React.Fragment, null, item.icon || item.label ? (React.createElement("div", { style: { flex: 1, paddingLeft: 5 } },
|
|
1946
1963
|
React.createElement(Line, null))) : (React.createElement(Line, null))))))) : (React.createElement(material.Grid, __assign({ key: idx, item: true }, finalSizeProps, { className: item.className, style: item.style, sx: item.sx }),
|
|
1947
1964
|
React.createElement(material.Stack, { direction: 'row', spacing: 0.5, alignItems: 'center' },
|
|
1948
|
-
item.icon && (React.createElement(
|
|
1965
|
+
item.icon && (React.createElement(reactComponent.PdgIcon, { sx: { color: finalLabelColor }, fontSize: 'small' }, "CalendarMonth")),
|
|
1949
1966
|
React.createElement(Label, { className: classNames(labelClassName, item.labelClassName), style: __assign(__assign({}, item.labelStyle), labelStyle), sx: finalLabelSx }, item.label)),
|
|
1950
1967
|
React.createElement(ValueWrap, { className: classNames(valueClassName, item.valueClassName), style: __assign(__assign(__assign({}, valueStyle), item.valueStyle), valueUnderlineStyle), sx: finalValueSx },
|
|
1951
1968
|
item.ellipsis || ellipsis ? React.createElement(ValueEllipsis, null, data) : React.createElement(Value, null, data),
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pdg/react-table",
|
|
3
3
|
"title": "React Table",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.82",
|
|
5
5
|
"description": "React Table",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"dev": "cd examples && npm run dev",
|
|
25
25
|
"dev-prd-lib": "cd examples && npm run dev-prd-lib",
|
|
26
26
|
"build": "rollup -c --bundleConfigAsCjs",
|
|
27
|
-
"
|
|
27
|
+
"pub": "npm publish --access=public",
|
|
28
28
|
"lint": "eslint './src/**/*.{ts,tsx}'",
|
|
29
29
|
"reinstall-module": "rm -rf node_modules && rm -f package-lock.json && npm i"
|
|
30
30
|
},
|
|
@@ -46,10 +46,10 @@
|
|
|
46
46
|
"@mui/icons-material": "^5.15.13",
|
|
47
47
|
"@mui/material": "^5.15.13",
|
|
48
48
|
"@mui/x-date-pickers": "^6.19.7",
|
|
49
|
-
"@pdg/react-component": "^1.0.
|
|
50
|
-
"@pdg/react-form": "^1.0.
|
|
51
|
-
"@pdg/react-hook": "^1.0.
|
|
52
|
-
"@pdg/util": "^1.0.
|
|
49
|
+
"@pdg/react-component": "^1.0.9",
|
|
50
|
+
"@pdg/react-form": "^1.0.93",
|
|
51
|
+
"@pdg/react-hook": "^1.0.8",
|
|
52
|
+
"@pdg/util": "^1.0.19",
|
|
53
53
|
"@tinymce/tinymce-react": "^4.3.2",
|
|
54
54
|
"@types/react": "^17.0.0 || ^18.0.0",
|
|
55
55
|
"@types/react-copy-to-clipboard": "^5.0.7",
|