@schema-render/search-table-react/dist/esm/components/ColumnSettingContent/index.js

Conditional search table component.

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useMemoizedFn } from "@schema-render/core-react";
import { Button, Space } from "antd";
import { useMemo, useState } from "react";
import useRootContext from "../../hooks/useRootContext";
import Sortable from "../Sortable";
import { createColumns } from "./index.column";
import * as styles from "./index.style";
function createInitialDataSource(columns) {
    return columns.map((item)=>({
            id: String(item.dataIndex),
            name: item.title,
            hidden: item.hidden,
            width: item.width,
            fixed: item.fixed
        }));
}
const ColumnSettingContent = ({ defaultColumns, sortColumns, onOk })=>{
    const rootCtx = useRootContext();
    const [dataSource, setDataSource] = useState(()=>createInitialDataSource(sortColumns));
    const columns = useMemo(()=>createColumns({
            locale: rootCtx.locale
        }), [
        rootCtx.locale
    ]);
    // 配置数据变更事件
    const handleChange = useMemoizedFn((index, dataKey, newValue)=>{
        const newDataSource = [
            ...dataSource
        ];
        newDataSource[index][dataKey] = newValue;
        setDataSource(newDataSource);
    });
    // 排序事件
    const handleSortChange = useMemoizedFn((newDataSource)=>{
        setDataSource(newDataSource);
    });
    // 重置本次排序
    const handleResetCurrentSetting = useMemoizedFn(()=>{
        setDataSource(createInitialDataSource(sortColumns));
    });
    // 恢复默认排序
    const handleRestoreDefaultSetting = useMemoizedFn(()=>{
        setDataSource(createInitialDataSource(defaultColumns));
    });
    // 配置完成事件
    const handleOk = useMemoizedFn(()=>{
        const newSortColumns = [];
        dataSource.forEach(({ id, width, hidden })=>{
            const col = defaultColumns.find((item)=>String(item.dataIndex) === id);
            if (col) {
                newSortColumns.push({
                    ...col,
                    width,
                    hidden
                });
            }
        });
        onOk === null || onOk === void 0 ? void 0 : onOk(newSortColumns);
    });
    return /*#__PURE__*/ _jsxs(_Fragment, {
        children: [
            /*#__PURE__*/ _jsx("div", {
                className: styles.header,
                children: columns.map((col, i)=>/*#__PURE__*/ _jsx("div", {
                        className: styles.col,
                        style: {
                            width: col.width,
                            justifyContent: col.algin
                        },
                        children: col.title
                    }, i))
            }),
            /*#__PURE__*/ _jsx("div", {
                className: styles.list,
                children: /*#__PURE__*/ _jsx(Sortable, {
                    items: dataSource,
                    onChange: handleSortChange,
                    itemClassName: styles.rowWrapper,
                    overlayClassName: styles.rowWrapperOverlay,
                    renderItem: (item, rowIndex, sortCtx)=>{
                        return /*#__PURE__*/ _jsx("div", {
                            className: styles.row,
                            children: columns.map((col, colIndex)=>{
                                const val = item[col.dataIndex];
                                // 排序手柄
                                const listeners = col.dataIndex === 'sort' ? sortCtx === null || sortCtx === void 0 ? void 0 : sortCtx.listeners : {};
                                return /*#__PURE__*/ _jsx("div", {
                                    className: styles.col,
                                    style: {
                                        width: col.width,
                                        justifyContent: col.algin
                                    },
                                    ...listeners,
                                    children: col.render ? col.render(val, (newValue)=>handleChange(rowIndex, col.dataIndex, newValue)) : val
                                }, `${rowIndex}${colIndex}`);
                            })
                        }, rowIndex);
                    }
                })
            }),
            /*#__PURE__*/ _jsx("div", {
                className: styles.footer,
                children: /*#__PURE__*/ _jsxs(Space, {
                    children: [
                        /*#__PURE__*/ _jsx(Button, {
                            onClick: handleRestoreDefaultSetting,
                            children: rootCtx.locale.SearchTable.settingModalResetDefault
                        }),
                        /*#__PURE__*/ _jsx(Button, {
                            onClick: handleResetCurrentSetting,
                            children: rootCtx.locale.SearchTable.settingModalReset
                        }),
                        /*#__PURE__*/ _jsx(Button, {
                            type: "primary",
                            onClick: handleOk,
                            children: rootCtx.locale.SearchTable.settingModalOk
                        })
                    ]
                })
            })
        ]
    });
};
export default ColumnSettingContent;