@thefreshop/tb 1.0.7 → 1.0.8

package/dist/cjs/tbpage/component/modules/antBaseTable/listview.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { AntBaseTableRefProps, antBasePropsType } from "../../../../types";
+declare module "react" {
+    function forwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+}
+declare const _default: <ItemType, KEY extends keyof ItemType>(props: {
+    tableProps: antBasePropsType<ItemType>;
+    render?: (item: ItemType[], index: number) => React.ReactNode | null;
+} & React.RefAttributes<AntBaseTableRefProps<ItemType>>) => React.ReactElement | null;
+export default _default;

package/dist/cjs/tbpage/component/modules/index.d.ts

@@ -1,2 +1,3 @@
-export { default as AntBaseTable } from './antBaseTable';
-export { SearchBox } from './searchbox';
+export { default as AntBaseTable } from "./antBaseTable";
+export { default as AntBaseList } from "./antBaseTable/listview";
+export { SearchBox } from "./searchbox";

package/dist/cjs/tbpage/component/tblist.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { antBasePropsType } from "../../types";
+export declare const Tblist: <ItemType, KEY extends keyof ItemType>({ tableProps, searchOption, searchDisabled, onSubmit, isLoading, title, decs, render, }: {
+    tableProps: antBasePropsType<ItemType>;
+    searchOption?: any;
+    searchDisabled?: boolean;
+    onSubmit?: (searchdata?: any, rowdata?: any, isReset?: boolean) => void;
+    isLoading?: boolean;
+    title?: string;
+    decs?: string;
+    render?: (item: ItemType[], index: number) => React.ReactNode | null;
+}) => React.JSX.Element;

package/dist/cjs/tbpage/index.d.ts

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

package/dist/esm/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/esm/index.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import React__default, { createContext, useState, useContext, useEffect, useCallback, useRef, forwardRef, useImperativeHandle, memo, useMemo } from 'react';
 import Editor from '@monaco-editor/react';
 import { DownOutlined, UpOutlined, DoubleRightOutlined, DoubleLeftOutlined, LoadingOutlined, ReloadOutlined, SearchOutlined, UploadOutlined, ExclamationCircleOutlined, RedoOutlined, TagOutlined } from '@ant-design/icons';
-import { Typography, Row, Col, Space, Button, Input, Tag, Image as Image$1, Tooltip, Upload, Form, Select, DatePicker, Switch, InputNumber, Flex, Modal, Table, Checkbox, Tree, ConfigProvider, Result, Spin } from 'antd';
+import { Typography, Row, Col, Space, Button, Input, Tag, Image as Image$1, Tooltip, Upload, Form, Select, DatePicker, Switch, InputNumber, Flex, Modal, Table, List, Card, Checkbox, Tree, ConfigProvider, Result, Spin } from 'antd';
 import moment$1 from 'moment-timezone';
 import require$$1 from 'react-dom';
 import dayjs from 'dayjs';
@@ -23218,8 +23218,8 @@ const AntBaseModalCreate = ({ modalProps, formProps, props }) => {
                 React__default.createElement(Button, { htmlType: "submit" }, props.buttonName ?? (isModify ? FORM_MODIFY : FORM_CREATE))))));
 };
 
-const { Title } = Typography;
-const { confirm } = Modal;
+const { Title: Title$1 } = Typography;
+const { confirm: confirm$1 } = Modal;
 const AntBaseTable$1 = ({ 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] = useState([]);
     const [selectedRow, setSelectedRow] = useState();
@@ -23348,7 +23348,7 @@ const AntBaseTable$1 = ({ bordered, className, rowKey, rowName, dataSource, init
                             : typeof rowKey === "function"
                                 ? rowKey(selectedRow)
                                 : selectedRow[rowKey]);
-                        confirm({
+                        confirm$1({
                             title: "삭제 하시겠습니까?",
                             icon: React__default.createElement(ExclamationCircleOutlined, null),
                             content: content,
@@ -23375,7 +23375,7 @@ const AntBaseTable$1 = ({ bordered, className, rowKey, rowName, dataSource, init
                             : typeof rowKey === "function"
                                 ? rowKey(selectedRow)
                                 : selectedRow[rowKey]);
-                        confirm({
+                        confirm$1({
                             title: "복구 하시겠습니까?",
                             icon: React__default.createElement(ExclamationCircleOutlined, null),
                             content: content,
@@ -23402,7 +23402,7 @@ const AntBaseTable$1 = ({ bordered, className, rowKey, rowName, dataSource, init
                             : typeof rowKey === "function"
                                 ? rowKey(selectedRow)
                                 : selectedRow[rowKey]);
-                        confirm({
+                        confirm$1({
                             title: "완전 삭제 하시겠습니까?",
                             icon: React__default.createElement(ExclamationCircleOutlined, null),
                             content: content,
@@ -23537,7 +23537,7 @@ const AntBaseTable$1 = ({ bordered, className, rowKey, rowName, dataSource, init
         React__default.createElement(AntBaseModalCreate, { modalProps: {
                 width: createModalWidth,
                 title: (React__default.createElement("div", { style: { marginBottom: 20, marginTop: 10 } },
-                    React__default.createElement(Title, { level: 4, style: { margin: 0 } }, popupModify ? "정보 수정" : "신규 등록"))),
+                    React__default.createElement(Title$1, { level: 4, style: { margin: 0 } }, popupModify ? "정보 수정" : "신규 등록"))),
                 maskClosable: false,
                 open: popupCreate,
                 onCancel: () => {
@@ -23582,6 +23582,288 @@ const AntBaseTable$1 = ({ bordered, className, rowKey, rowName, dataSource, init
 */
 var AntBaseTable = forwardRef(AntBaseTable$1);
 
+const { Title } = Typography;
+const { confirm } = Modal;
+const AntBaseList$1 = ({ 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] = useState([]);
+    const [selectedRow, setSelectedRow] = useState();
+    const [popupCreate, setPopupCreate] = useState(false);
+    const [popupModify, setPopupModify] = useState(false);
+    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 함수
+    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__default.createElement("div", { className: className, style: {
+            display: "flex",
+            flexDirection: "column",
+            flex: 1,
+            gap: 10,
+            height: "100%",
+            padding: "20px",
+        } },
+        React__default.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__default.createElement(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__default.createElement(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__default.createElement(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__default.createElement(List, { dataSource: dataSource?.map((i) => i), grid: { gutter: 1, column: 1 }, renderItem: (item, index) => (React__default.createElement(List.Item, null,
+                React__default.createElement(Card, null, render ? render(item, index) : React__default.createElement("div", null, JSON.stringify(item))))) }),
+        React__default.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__default.createElement(AntBaseModalCreate, { modalProps: {
+                width: createModalWidth,
+                title: (React__default.createElement("div", { style: { marginBottom: 20, marginTop: 10 } },
+                    React__default.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 = forwardRef(AntBaseList$1);
+
 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);
@@ -23999,7 +24281,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__default.createElement("div", { className: styles$1.tableFrame },
-        title || decs ? React__default.createElement(TitleBox$1, { title: title, decs: decs }) : null,
+        title || decs ? React__default.createElement(TitleBox$2, { title: title, decs: decs }) : null,
         searchOption && (React__default.createElement(SearchBox, { searchOption: searchOption, onSubmit: onSubmit, searchDisabled: searchDisabled, onReset: () => {
                 if (onSubmit)
                     onSubmit(null, null, true);
@@ -24008,7 +24290,7 @@ const Tbpage = ({ tableProps, searchOption, searchDisabled = false, onSubmit, is
             React__default.createElement("div", { className: styles$1.multiFrame },
                 React__default.createElement(AntBaseTable, { ...tableProps })))));
 };
-const TitleBox$1 = ({ title, decs }) => {
+const TitleBox$2 = ({ title, decs }) => {
     return (React__default.createElement("div", { className: styles$1.titleBox },
         React__default.createElement("div", { className: styles$1.title }, title),
         React__default.createElement("div", { className: styles$1.decs }, decs)));
@@ -24026,6 +24308,24 @@ const TbpageSm = ({ tableProps, searchOption, onSubmit, isLoading, title, decs,
                 React__default.createElement(AntBaseTable, { ...tableProps })))));
 };
 
+const Tblist = ({ tableProps, searchOption, searchDisabled = false, onSubmit, isLoading, title, decs, render, }) => {
+    const { user } = useTbState();
+    return (React__default.createElement("div", { className: styles$1.tableFrame },
+        title || decs ? React__default.createElement(TitleBox$1, { title: title, decs: decs }) : null,
+        searchOption && (React__default.createElement(SearchBox, { searchOption: searchOption, onSubmit: onSubmit, searchDisabled: searchDisabled, onReset: () => {
+                if (onSubmit)
+                    onSubmit(null, null, true);
+            } })),
+        React__default.createElement(LoadingLayout, { isLoading: isLoading },
+            React__default.createElement("div", { className: styles$1.multiFrame },
+                React__default.createElement(AntBaseList, { tableProps: tableProps, render: render })))));
+};
+const TitleBox$1 = ({ title, decs }) => {
+    return (React__default.createElement("div", { className: styles$1.titleBox },
+        React__default.createElement("div", { className: styles$1.title }, title),
+        React__default.createElement("div", { className: styles$1.decs }, decs)));
+};
+
 const TbpageMulti = ({ arrtableProps, arrflex, searchOption, searchDisabled = false, onSubmit, isLoading, title, decs, direction, }) => {
     const { user } = useTbState();
     return (React__default.createElement("div", { className: styles$1.tableFrame, style: direction === "column" ? { flexDirection: "column" } : {} },
@@ -24056,5 +24356,5 @@ const TitleBox = ({ title, decs }) => {
         React__default.createElement("div", { className: styles$1.decs }, decs)));
 };
 
-export { AntBaseModalCreate, AntBaseTable, AuthTable, ContentLayout, TbFrame, TbProvider, TbpProvider, Tbpage, TbpageMulti, TbpageSm, tbContext, useTbState };
+export { AntBaseModalCreate, AntBaseTable, AuthTable, ContentLayout, TbFrame, TbProvider, Tblist, TbpProvider, Tbpage, TbpageMulti, TbpageSm, tbContext, useTbState };
 //# sourceMappingURL=index.js.map