@thefreshop/tb 1.0.7 → 1.0.8

package/dist/cjs/index.d.ts

@@ -7,6 +7,7 @@ export { TbpProvider } from "./tbpage/provider/provider";
 export { ContentLayout } from "./tbpage/component/content_layout";
 export { Tbpage } from "./tbpage/component/tbpage";
 export { TbpageSm } from "./tbpage/component/tbpagesm";
+export { Tblist } from "./tbpage/component/tblist";
 export { TbpageMulti } from "./tbpage/component/tbpageMulti";
 export { default as AntBaseTable } from "./tbpage/component/modules/antBaseTable";
 export { default as AntBaseModalCreate } from "./tbpage/component/modules/antBaseModalCreate";

package/dist/cjs/index.js

@@ -23238,8 +23238,8 @@ const AntBaseModalCreate = ({ modalProps, formProps, props }) => {
                 React.createElement(antd.Button, { htmlType: "submit" }, props.buttonName ?? (isModify ? FORM_MODIFY : FORM_CREATE))))));
 };
 
-const { Title } = antd.Typography;
-const { confirm } = antd.Modal;
+const { Title: Title$1 } = antd.Typography;
+const { confirm: confirm$1 } = antd.Modal;
 const AntBaseTable = ({ bordered, className, rowKey, rowName, dataSource, initData, customColumn, customValue, columns, expandable, size, onDoubleClick, onClick, selectProps, addProps, modifyProps, deleteProps, removeProps, resetProps, customProps, topProps, bottomProps, upProps, downProps, pageProps, scroll, onRefresh, isCounter, autoRefreshTime, createModalWidth = 1000, onCreateClose, }, ref) => {
     const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
     const [selectedRow, setSelectedRow] = React.useState();
@@ -23368,7 +23368,7 @@ const AntBaseTable = ({ bordered, className, rowKey, rowName, dataSource, initDa
                             : typeof rowKey === "function"
                                 ? rowKey(selectedRow)
                                 : selectedRow[rowKey]);
-                        confirm({
+                        confirm$1({
                             title: "삭제 하시겠습니까?",
                             icon: React.createElement(icons.ExclamationCircleOutlined, null),
                             content: content,
@@ -23395,7 +23395,7 @@ const AntBaseTable = ({ bordered, className, rowKey, rowName, dataSource, initDa
                             : typeof rowKey === "function"
                                 ? rowKey(selectedRow)
                                 : selectedRow[rowKey]);
-                        confirm({
+                        confirm$1({
                             title: "복구 하시겠습니까?",
                             icon: React.createElement(icons.ExclamationCircleOutlined, null),
                             content: content,
@@ -23422,7 +23422,7 @@ const AntBaseTable = ({ bordered, className, rowKey, rowName, dataSource, initDa
                             : typeof rowKey === "function"
                                 ? rowKey(selectedRow)
                                 : selectedRow[rowKey]);
-                        confirm({
+                        confirm$1({
                             title: "완전 삭제 하시겠습니까?",
                             icon: React.createElement(icons.ExclamationCircleOutlined, null),
                             content: content,
@@ -23557,7 +23557,7 @@ const AntBaseTable = ({ bordered, className, rowKey, rowName, dataSource, initDa
         React.createElement(AntBaseModalCreate, { modalProps: {
                 width: createModalWidth,
                 title: (React.createElement("div", { style: { marginBottom: 20, marginTop: 10 } },
-                    React.createElement(Title, { level: 4, style: { margin: 0 } }, popupModify ? "정보 수정" : "신규 등록"))),
+                    React.createElement(Title$1, { level: 4, style: { margin: 0 } }, popupModify ? "정보 수정" : "신규 등록"))),
                 maskClosable: false,
                 open: popupCreate,
                 onCancel: () => {
@@ -23602,6 +23602,288 @@ const AntBaseTable = ({ bordered, className, rowKey, rowName, dataSource, initDa
 */
 var AntBaseTable$1 = React.forwardRef(AntBaseTable);
 
+const { Title } = antd.Typography;
+const { confirm } = antd.Modal;
+const AntBaseList = ({ tableProps, render, }, ref) => {
+    const { bordered, className, rowKey, rowName, dataSource, initData, customColumn, customValue, columns, expandable, size, onDoubleClick, onClick, selectProps, addProps, modifyProps, deleteProps, removeProps, resetProps, customProps, topProps, bottomProps, upProps, downProps, pageProps, scroll, onRefresh, isCounter, autoRefreshTime, createModalWidth = 1000, onCreateClose, } = tableProps;
+    const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
+    const [selectedRow, setSelectedRow] = React.useState();
+    const [popupCreate, setPopupCreate] = React.useState(false);
+    const [popupModify, setPopupModify] = React.useState(false);
+    React.useEffect(() => {
+        setSelectedRow(dataSource?.find((m) => {
+            if (m) {
+                let key = typeof rowKey === "function" ? rowKey(m) : m[rowKey];
+                return key === selectedRowKeys[0];
+            }
+            return false;
+        }));
+    }, [dataSource, rowKey, selectedRowKeys]);
+    //선택 리셋
+    const resetSelection = () => {
+        setSelectedRowKeys([]);
+        setSelectedRow(undefined);
+    };
+    //재 선택??
+    const reSelection = () => {
+        if (selectProps) {
+            if (selectedRowKeys.length !== 0 && dataSource?.length !== 0) {
+                setSelectedRow(dataSource?.find((m) => {
+                    if (m) {
+                        let key = typeof rowKey === "function" ? rowKey(m) : m[rowKey];
+                        return key === selectedRowKeys[0];
+                    }
+                    return false;
+                }));
+                if (selectProps.onUpdateData) {
+                    selectProps.onUpdateData(dataSource?.find((m) => {
+                        if (m) {
+                            let key = typeof rowKey === "function" ? rowKey(m) : m[rowKey];
+                            return key === selectedRowKeys[0];
+                        }
+                        return false;
+                    }));
+                }
+            }
+        }
+    };
+    //ref 함수
+    React.useImperativeHandle(ref, () => ({
+        resetSelection,
+        reSelection,
+        popupCreate,
+        popupModify,
+        selectedRow,
+    }), [selectedRow, popupCreate, popupModify]);
+    // 추가 팝업 on/off
+    const showCreatePopup = (show) => {
+        setPopupCreate(show);
+        setPopupModify(false);
+    };
+    // 추가/수정 완료
+    const onCreate = (value) => {
+        setPopupCreate(false);
+        setPopupModify(false);
+        if (popupModify && modifyProps) {
+            let key = typeof rowKey === "function" ? rowKey(selectedRow) : rowKey;
+            modifyProps.onFun({ [key.toString()]: key, ...value }, selectedRow);
+            // 키 값과 함꼐 전달
+        }
+        else if (addProps) {
+            addProps.onFun(value);
+        }
+        setSelectedRowKeys([]);
+        setSelectedRow(undefined);
+    };
+    // 수정 창 열기전 beforeModify 확인후 수정 작업
+    const showModify = () => {
+        if (modifyProps?.beforeCheck) {
+            modifyProps
+                .beforeCheck(selectedRow)
+                .then((newValue) => {
+                setSelectedRow(newValue);
+                setPopupCreate(true);
+                setPopupModify(true);
+            })
+                .catch();
+        }
+        else {
+            setPopupCreate(true);
+            setPopupModify(true);
+        }
+    };
+    //선택 유무
+    const isSelect = selectedRowKeys.length !== 0;
+    return (React.createElement("div", { className: className, style: {
+            display: "flex",
+            flexDirection: "column",
+            flex: 1,
+            gap: 10,
+            height: "100%",
+            padding: "20px",
+        } },
+        React.createElement(TableTopButtonGroup, { isSelect: isSelect, isCounter: isCounter, onRefresh: onRefresh, autoRefreshTime: autoRefreshTime, addProps: addProps && {
+                ...addProps,
+                onFun: () => {
+                    if (addProps.customModal) {
+                        addProps.onFun(selectedRow);
+                    }
+                    else {
+                        showCreatePopup(true);
+                    }
+                },
+            }, modifyProps: modifyProps && {
+                ...modifyProps,
+                onFun() {
+                    if (modifyProps.customModal) {
+                        modifyProps.onFun(selectedRow);
+                    }
+                    else {
+                        showModify();
+                    }
+                },
+            }, deleteProps: deleteProps && {
+                ...deleteProps,
+                onFun() {
+                    if (selectedRow) {
+                        let content = (rowName
+                            ? typeof rowName === "function"
+                                ? rowName(selectedRow)
+                                : selectedRow[rowName]
+                            : typeof rowKey === "function"
+                                ? rowKey(selectedRow)
+                                : selectedRow[rowKey]);
+                        confirm({
+                            title: "삭제 하시겠습니까?",
+                            icon: React.createElement(icons.ExclamationCircleOutlined, null),
+                            content: content,
+                            okText: "Yes",
+                            okType: "danger",
+                            cancelText: "No",
+                            onOk: () => {
+                                deleteProps.onFun(selectedRow);
+                            },
+                            onCancel() {
+                                console.log("Cancel");
+                            },
+                        });
+                    }
+                },
+            }, resetProps: resetProps && {
+                ...resetProps,
+                onFun() {
+                    if (selectedRow) {
+                        let content = (rowName
+                            ? typeof rowName === "function"
+                                ? rowName(selectedRow)
+                                : selectedRow[rowName]
+                            : typeof rowKey === "function"
+                                ? rowKey(selectedRow)
+                                : selectedRow[rowKey]);
+                        confirm({
+                            title: "복구 하시겠습니까?",
+                            icon: React.createElement(icons.ExclamationCircleOutlined, null),
+                            content: content,
+                            okText: "Yes",
+                            okType: "primary",
+                            cancelText: "No",
+                            onOk: () => {
+                                resetProps.onFun(selectedRow);
+                            },
+                            onCancel() {
+                                console.log("Cancel");
+                            },
+                        });
+                    }
+                },
+            }, removeProps: removeProps && {
+                ...removeProps,
+                onFun() {
+                    if (selectedRow) {
+                        let content = (rowName
+                            ? typeof rowName === "function"
+                                ? rowName(selectedRow)
+                                : selectedRow[rowName]
+                            : typeof rowKey === "function"
+                                ? rowKey(selectedRow)
+                                : selectedRow[rowKey]);
+                        confirm({
+                            title: "완전 삭제 하시겠습니까?",
+                            icon: React.createElement(icons.ExclamationCircleOutlined, null),
+                            content: content,
+                            okText: "Yes",
+                            okType: "danger",
+                            cancelText: "No",
+                            onOk: () => {
+                                removeProps.onFun(selectedRow);
+                            },
+                            onCancel() {
+                                console.log("Cancel");
+                            },
+                        });
+                    }
+                },
+            }, customProps: customProps && {
+                ...customProps,
+                render: () => {
+                    if (customProps.render)
+                        return customProps.render(isSelect, selectedRow);
+                    else
+                        return null;
+                },
+                leftRender: () => {
+                    if (customProps.leftRender)
+                        return customProps.leftRender(isSelect, selectedRow);
+                    else
+                        return null;
+                },
+                rightRender: () => {
+                    if (customProps.rightRender)
+                        return customProps.rightRender(isSelect, selectedRow);
+                    else
+                        return null;
+                },
+            } }),
+        React.createElement(antd.List, { dataSource: dataSource?.map((i) => i), grid: { gutter: 1, column: 1 }, renderItem: (item, index) => (React.createElement(antd.List.Item, null,
+                React.createElement(antd.Card, null, render ? render(item, index) : React.createElement("div", null, JSON.stringify(item))))) }),
+        React.createElement(TableBottomButtonGroup, { isSelect: isSelect, topProps: topProps && {
+                ...topProps,
+                onFun() {
+                    if (selectedRow)
+                        topProps.onFun(selectedRow);
+                },
+            }, bottomProps: bottomProps && {
+                ...bottomProps,
+                onFun() {
+                    if (selectedRow)
+                        bottomProps.onFun(selectedRow);
+                },
+            }, upProps: upProps && {
+                ...upProps,
+                onFun() {
+                    if (selectedRow)
+                        upProps.onFun(selectedRow);
+                },
+            }, downProps: downProps && {
+                ...downProps,
+                onFun() {
+                    if (selectedRow)
+                        downProps.onFun(selectedRow);
+                },
+            } }),
+        React.createElement(AntBaseModalCreate, { modalProps: {
+                width: createModalWidth,
+                title: (React.createElement("div", { style: { marginBottom: 20, marginTop: 10 } },
+                    React.createElement(Title, { level: 4, style: { margin: 0 } }, popupModify ? "정보 수정" : "신규 등록"))),
+                maskClosable: false,
+                open: popupCreate,
+                onCancel: () => {
+                    if (onCreateClose)
+                        onCreateClose();
+                    showCreatePopup(false);
+                },
+            }, formProps: {
+                initialValues: popupModify
+                    ? convert2FormData({
+                        data: selectedRow,
+                        columns: columns,
+                    })
+                    : initData
+                        ? convert2FormData({
+                            data: initData,
+                            columns: columns,
+                        })
+                        : {},
+                onFinish: onCreate,
+            }, props: {
+                customColumn,
+                customValue,
+                columns: popupModify ? (modifyProps?.columns ? modifyProps?.columns : columns) : addProps?.columns ? addProps?.columns : columns,
+                isModify: popupModify,
+            } })));
+};
+var AntBaseList$1 = React.forwardRef(AntBaseList);
+
 var css_248z$2 = ".searchbox-module_searchboxFrame__VAWWj{background:#f0f8ff;display:flex;flex-direction:row;padding-bottom:25px;padding-top:15px;width:100%}.searchbox-module_searchboxRow__wzY7N{display:flex;flex-direction:column;justify-content:center;line-height:32px;padding-left:20px;width:100%}.searchbox-module_searchboxBtn__d8Bc6{align-items:flex-end;justify-content:center;width:300px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaGJveC5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHdDQU1FLGtCQUFxQixDQUxyQixZQUFhLENBQ2Isa0JBQW1CLENBR25CLG1CQUFvQixDQURwQixnQkFBaUIsQ0FEakIsVUFJRixDQUVBLHNDQUNFLFlBQWEsQ0FDYixxQkFBc0IsQ0FHdEIsc0JBQXVCLENBRHZCLGdCQUFpQixDQUVqQixpQkFBa0IsQ0FIbEIsVUFLRixDQUNBLHNDQUVFLG9CQUFxQixDQUNyQixzQkFBdUIsQ0FGdkIsV0FHRiIsImZpbGUiOiJzZWFyY2hib3gubW9kdWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5zZWFyY2hib3hGcmFtZSB7XHJcbiAgZGlzcGxheTogZmxleDtcclxuICBmbGV4LWRpcmVjdGlvbjogcm93O1xyXG4gIHdpZHRoOiAxMDAlO1xyXG4gIHBhZGRpbmctdG9wOiAxNXB4O1xyXG4gIHBhZGRpbmctYm90dG9tOiAyNXB4O1xyXG4gIGJhY2tncm91bmQ6IGFsaWNlYmx1ZTtcclxufVxyXG5cclxuLnNlYXJjaGJveFJvdyB7XHJcbiAgZGlzcGxheTogZmxleDtcclxuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xyXG4gIHdpZHRoOiAxMDAlO1xyXG4gIGxpbmUtaGVpZ2h0OiAzMnB4O1xyXG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xyXG4gIHBhZGRpbmctbGVmdDogMjBweDtcclxuXHJcbn1cclxuLnNlYXJjaGJveEJ0biB7XHJcbiAgd2lkdGg6IDMwMHB4O1xyXG4gIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDtcclxuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcclxufVxyXG4iXX0= */";
 var styles$2 = {"searchboxFrame":"searchbox-module_searchboxFrame__VAWWj","searchboxRow":"searchbox-module_searchboxRow__wzY7N","searchboxBtn":"searchbox-module_searchboxBtn__d8Bc6"};
 styleInject(css_248z$2);
@@ -24019,7 +24301,7 @@ const LoadingLayout = ({ tip, isLoading, error, isError, style, children, classN
 const Tbpage = ({ tableProps, searchOption, searchDisabled = false, onSubmit, isLoading, title, decs, }) => {
     const { user } = useTbState();
     return (React.createElement("div", { className: styles$1.tableFrame },
-        title || decs ? React.createElement(TitleBox$1, { title: title, decs: decs }) : null,
+        title || decs ? React.createElement(TitleBox$2, { title: title, decs: decs }) : null,
         searchOption && (React.createElement(SearchBox, { searchOption: searchOption, onSubmit: onSubmit, searchDisabled: searchDisabled, onReset: () => {
                 if (onSubmit)
                     onSubmit(null, null, true);
@@ -24028,7 +24310,7 @@ const Tbpage = ({ tableProps, searchOption, searchDisabled = false, onSubmit, is
             React.createElement("div", { className: styles$1.multiFrame },
                 React.createElement(AntBaseTable$1, { ...tableProps })))));
 };
-const TitleBox$1 = ({ title, decs }) => {
+const TitleBox$2 = ({ title, decs }) => {
     return (React.createElement("div", { className: styles$1.titleBox },
         React.createElement("div", { className: styles$1.title }, title),
         React.createElement("div", { className: styles$1.decs }, decs)));
@@ -24046,6 +24328,24 @@ const TbpageSm = ({ tableProps, searchOption, onSubmit, isLoading, title, decs,
                 React.createElement(AntBaseTable$1, { ...tableProps })))));
 };
 
+const Tblist = ({ tableProps, searchOption, searchDisabled = false, onSubmit, isLoading, title, decs, render, }) => {
+    const { user } = useTbState();
+    return (React.createElement("div", { className: styles$1.tableFrame },
+        title || decs ? React.createElement(TitleBox$1, { title: title, decs: decs }) : null,
+        searchOption && (React.createElement(SearchBox, { searchOption: searchOption, onSubmit: onSubmit, searchDisabled: searchDisabled, onReset: () => {
+                if (onSubmit)
+                    onSubmit(null, null, true);
+            } })),
+        React.createElement(LoadingLayout, { isLoading: isLoading },
+            React.createElement("div", { className: styles$1.multiFrame },
+                React.createElement(AntBaseList$1, { tableProps: tableProps, render: render })))));
+};
+const TitleBox$1 = ({ title, decs }) => {
+    return (React.createElement("div", { className: styles$1.titleBox },
+        React.createElement("div", { className: styles$1.title }, title),
+        React.createElement("div", { className: styles$1.decs }, decs)));
+};
+
 const TbpageMulti = ({ arrtableProps, arrflex, searchOption, searchDisabled = false, onSubmit, isLoading, title, decs, direction, }) => {
     const { user } = useTbState();
     return (React.createElement("div", { className: styles$1.tableFrame, style: direction === "column" ? { flexDirection: "column" } : {} },
@@ -24082,6 +24382,7 @@ exports.AuthTable = AuthTable;
 exports.ContentLayout = ContentLayout;
 exports.TbFrame = TbFrame;
 exports.TbProvider = TbProvider;
+exports.Tblist = Tblist;
 exports.TbpProvider = TbpProvider;
 exports.Tbpage = Tbpage;
 exports.TbpageMulti = TbpageMulti;