@publishfx/publish-components 2.0.3

package/dist/CompareChange/index.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled_components from "styled-components";
+import { isNil } from "lodash";
+import { ReactComponent } from "../assets/icons/data_increase.js";
+import { ReactComponent as data_reduction_js_ReactComponent } from "../assets/icons/data_reduction.js";
+import { ReactComponent as data_no_change_js_ReactComponent } from "../assets/icons/data_no_change.js";
+const formatPercentage = (value, decimalPlaces = 2)=>{
+    const num = 'string' == typeof value ? parseFloat(value) : Number(value);
+    if (isNaN(num)) return '-';
+    const percentage = (100 * num).toFixed(decimalPlaces);
+    return `${percentage}%`;
+};
+const Container = styled_components.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 14px;
+`;
+const ValueSpan = styled_components.span`
+  font-weight: ${(props)=>props.fontWeight};
+  color: ${(props)=>props.isPositive ? '#05a76f' : props.isNegative ? '#d0324b' : '#86909c'};
+  font-size: ${(props)=>props.fontSize}px;
+`;
+const IconWrapper = styled_components.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 10px;
+  height: 10px;
+  color: ${(props)=>props.isPositive ? '#05a76f' : props.isNegative ? '#d0324b' : '#86909c'};
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+  }
+`;
+const CompareChange = ({ value, fontSize = 14, fontWeight = 600 })=>{
+    if (isNil(value) || '' === value || '-' === value) return /*#__PURE__*/ jsx("span", {
+        children: "-"
+    });
+    const numValue = Number(value);
+    if (isNaN(numValue)) return /*#__PURE__*/ jsx("span", {
+        children: "-"
+    });
+    const isPositive = numValue > 0;
+    const isNegative = numValue < 0;
+    const formattedValue = formatPercentage(Math.abs(numValue));
+    return /*#__PURE__*/ jsxs(Container, {
+        children: [
+            /*#__PURE__*/ jsx(IconWrapper, {
+                isPositive: isPositive,
+                isNegative: isNegative,
+                children: isNegative ? /*#__PURE__*/ jsx(data_reduction_js_ReactComponent, {}) : isPositive ? /*#__PURE__*/ jsx(ReactComponent, {}) : /*#__PURE__*/ jsx(data_no_change_js_ReactComponent, {})
+            }),
+            /*#__PURE__*/ jsx(ValueSpan, {
+                isPositive: isPositive,
+                isNegative: isNegative,
+                fontSize: fontSize,
+                fontWeight: fontWeight,
+                children: formattedValue
+            })
+        ]
+    });
+};
+const src_CompareChange = CompareChange;
+export { src_CompareChange as default, formatPercentage };

package/dist/CustomTransfer/BaseTransfer.d.ts

@@ -0,0 +1,35 @@
+import { FunctionComponent, ReactNode } from 'react';
+interface GroupOption {
+    value: string | number;
+    label: string;
+    options?: Array<{
+        id?: string | number;
+        value: string | number;
+        label: string;
+        disabled?: boolean;
+        options?: Array<{
+            id?: string | number;
+            value: string | number;
+            label: string;
+        }>;
+        [key: string]: any;
+    }>;
+    [key: string]: any;
+}
+interface BaseTransferProps {
+    selectedWidth?: number | string;
+    groupOptions?: GroupOption[];
+    selected?: (string | number)[];
+    setSelectedValue: (selected: (string | number)[]) => void;
+    setSelectedOptions: (selectedOptions: any[]) => void;
+    limit?: number;
+    selectedTitle?: string;
+    needSelectedNum?: boolean;
+    needActionBtn?: boolean;
+    leftContent?: Array<(props: any) => ReactNode>;
+    isNotDrag?: boolean;
+    needSelectedBacground?: boolean;
+    selectTreeNeedScroll?: boolean;
+}
+declare const BaseTransfer: FunctionComponent<BaseTransferProps>;
+export default BaseTransfer;

package/dist/CustomTransfer/BaseTransfer.js

@@ -0,0 +1,155 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Checkbox } from "@arco-design/web-react";
+import { DimensionContainer } from "./styled.js";
+import SelectedItemList from "./SelectedItemList.js";
+const useCheckbox = Checkbox.useCheckbox;
+const BaseTransfer = ({ selectedWidth, groupOptions, selected: outerSelected, setSelectedValue, setSelectedOptions, limit, selectedTitle, needSelectedNum, needActionBtn, leftContent, isNotDrag, needSelectedBacground, selectTreeNeedScroll })=>{
+    const [dataList, setDataList] = useState([]);
+    const [currentValue, setCurrentValue] = useState(0);
+    const { selected, setSelected, unSelectAll, setValueSelected } = useCheckbox([]);
+    useEffect(()=>{
+        if (groupOptions?.length) {
+            setDataList(groupOptions);
+            setCurrentValue(groupOptions[0]?.value);
+        }
+    }, [
+        groupOptions
+    ]);
+    const dataSelectedMap = useMemo(()=>{
+        const res = {};
+        dataList?.forEach((data)=>{
+            res[data.value] = data?.options?.filter((o)=>selected?.indexOf(o?.id || o?.value) >= 0 || o?.options?.some((c)=>selected?.indexOf(c?.id || c?.value) >= 0))?.length || 0;
+        });
+        return res;
+    }, [
+        dataList,
+        selected
+    ]);
+    const currentOptions = useMemo(()=>{
+        if (selectTreeNeedScroll) return dataList;
+        const selectedGroupOptions = dataList?.find((o)=>o.value === currentValue)?.options;
+        if (limit && selected?.length >= limit) return selectedGroupOptions?.map((option)=>({
+                ...option,
+                disabled: !selected?.includes(option.value)
+            }));
+        return selectedGroupOptions?.map((option)=>({
+                ...option,
+                disabled: false
+            }));
+    }, [
+        limit,
+        dataList,
+        selected,
+        currentValue,
+        selectTreeNeedScroll
+    ]);
+    const dataMap = useMemo(()=>{
+        let optionsNew = [];
+        dataList?.forEach((option)=>{
+            optionsNew = optionsNew?.concat(option?.options || []) || [];
+        });
+        const optionsAll = optionsNew;
+        return optionsAll?.reduce((prev, { id, label, value, options, ...props })=>{
+            prev[id || value] = {
+                id: id || value,
+                label,
+                value,
+                ...props
+            };
+            return prev;
+        }, {}) || {};
+    }, [
+        dataList
+    ]);
+    const selectedOptions = useMemo(()=>selected?.map((value)=>dataMap[value]).filter(Boolean) || [], [
+        selected,
+        dataMap
+    ]);
+    const handleSelectItemClick = (currentData)=>{
+        setCurrentValue(currentData?.value);
+    };
+    const deleteItem = (value)=>{
+        setValueSelected(value, false);
+    };
+    const reset = useCallback(()=>{
+        if (outerSelected && outerSelected?.length) setSelected(outerSelected);
+    }, [
+        outerSelected
+    ]);
+    useEffect(()=>{
+        reset();
+    }, [
+        reset
+    ]);
+    useEffect(()=>{
+        setSelectedValue(selected);
+        setSelectedOptions(selectedOptions);
+    }, [
+        selected,
+        selectedOptions,
+        setSelectedValue,
+        setSelectedOptions
+    ]);
+    const renderLeftContent = ()=>{
+        if (leftContent && leftContent.length >= 2) return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                leftContent[0]({
+                    dataList,
+                    currentValue,
+                    dataSelectedMap,
+                    handleSelectItemClick
+                }),
+                leftContent[1]({
+                    dataMap,
+                    dataList,
+                    setDataList,
+                    currentOptions,
+                    currentValue,
+                    selected,
+                    setSelected,
+                    setValueSelected
+                })
+            ]
+        });
+        return leftContent && leftContent.length > 0 && leftContent[0]({
+            dataMap,
+            dataList,
+            setDataList,
+            currentOptions,
+            currentValue,
+            selected,
+            setSelected,
+            setValueSelected
+        });
+    };
+    return /*#__PURE__*/ jsxs(DimensionContainer, {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                style: {
+                    display: 'flex',
+                    flex: 1,
+                    marginRight: '16px'
+                },
+                children: renderLeftContent()
+            }),
+            /*#__PURE__*/ jsx(SelectedItemList, {
+                selectedWidth: selectedWidth,
+                selectedTitle: selectedTitle,
+                limit: limit,
+                isNotDrag: isNotDrag,
+                needSelectedBacground: needSelectedBacground,
+                needSelectedNum: needSelectedNum,
+                needActionBtn: needActionBtn,
+                dataMap: dataMap,
+                selected: selected,
+                setSelected: setSelected,
+                deleteItem: deleteItem,
+                clear: unSelectAll,
+                reset: reset
+            })
+        ]
+    });
+};
+const CustomTransfer_BaseTransfer = BaseTransfer;
+export { CustomTransfer_BaseTransfer as default };

package/dist/CustomTransfer/SelectItemList.d.ts

@@ -0,0 +1,9 @@
+declare const SelectItemList: ({ selectWidth, selectTitle, dataList, currentValue, handleSelectItemClick, dataSelectedMap, }: {
+    selectWidth?: number | string;
+    selectTitle?: string;
+    dataList: any[];
+    currentValue: any;
+    handleSelectItemClick: (currentData: any) => void;
+    dataSelectedMap: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SelectItemList;

package/dist/CustomTransfer/SelectItemList.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ReactComponent } from "../assets/icons/selected.js";
+import styled_components from "styled-components";
+import { ClassifyItem, ColumnContent, StyledDivider, Title } from "./styled.js";
+const ScrollableContainer = styled_components.div`
+  flex: 1;
+  overflow: auto;
+  padding: 12px;
+`;
+const SelectItemList = ({ selectWidth = 180, selectTitle = '筛选条件分类', dataList, currentValue, handleSelectItemClick, dataSelectedMap })=>/*#__PURE__*/ jsxs(ColumnContent, {
+        style: {
+            width: selectWidth,
+            borderRight: 'none',
+            borderTopRightRadius: '0px',
+            borderBottomRightRadius: '0px'
+        },
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsxs(Title, {
+                        children: [
+                            /*#__PURE__*/ jsx(ReactComponent, {
+                                className: "selected-icon"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                children: selectTitle
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(StyledDivider, {})
+                ]
+            }),
+            /*#__PURE__*/ jsx(ScrollableContainer, {
+                children: dataList.map((data)=>/*#__PURE__*/ jsxs(ClassifyItem, {
+                        selected: currentValue === data.value,
+                        onClick: ()=>{
+                            handleSelectItemClick(data);
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "group-name",
+                                children: data.label
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "group-selected-num",
+                                children: dataSelectedMap[data.value]
+                            })
+                        ]
+                    }, data.value))
+            })
+        ]
+    });
+const CustomTransfer_SelectItemList = SelectItemList;
+export { CustomTransfer_SelectItemList as default };

package/dist/CustomTransfer/SelectTreeList.d.ts

@@ -0,0 +1,43 @@
+import { FunctionComponent } from 'react';
+interface Option {
+    id?: string | number;
+    value: string | number;
+    label: string;
+    options?: Option[];
+    description?: string;
+    tooltip?: string;
+    subPackageLimit?: boolean;
+    disabled?: boolean;
+}
+interface GroupOption {
+    value: string | number;
+    label: string;
+    options?: Option[];
+}
+interface DataItem {
+    id?: string | number;
+    value: string | number;
+    label: string;
+    [key: string]: any;
+}
+type SelectableListProps = {
+    dataList: GroupOption[];
+    setDataList: (dataList: GroupOption[]) => void;
+    selectTreeTitle?: string;
+    selectTreePlaceholder?: string;
+    needSearchInput?: boolean;
+    canSelectAll?: boolean;
+    disableCheckAll?: boolean;
+    currentValue?: string | number;
+    currentOptions: Option[];
+    selected: (string | number)[];
+    setSelected: (selected: (string | number)[]) => void;
+    setValueSelected: (value: string | number | (string | number)[], checked: boolean) => void;
+    dataMap?: Record<string | number, DataItem>;
+    selectTreeNeedScroll?: boolean;
+    maxLabelLength?: number;
+    leftContentCols?: number;
+    customSelectTreeComponent?: FunctionComponent<any>;
+};
+declare const _default: import("react").NamedExoticComponent<SelectableListProps>;
+export default _default;

package/dist/CustomTransfer/SelectTreeList.js

@@ -0,0 +1,248 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { Checkbox, Input, Tooltip } from "@arco-design/web-react";
+import { ReactComponent } from "../assets/icons/selected.js";
+import { AuthTip, ColumnContent, StyledDivider, StyledTree, Title } from "./styled.js";
+const hasAll = (origin, target)=>target.every((t)=>origin?.some((o)=>t === o));
+const isPartialSelected = (origin, target)=>!hasAll(origin, target) && target.some((t)=>origin?.some((o)=>t === o));
+const SelectTreeList = ({ dataList, setDataList, selectTreeTitle = '筛选条件', selectTreePlaceholder = '请搜索维度名称', needSearchInput = true, canSelectAll, disableCheckAll, currentOptions, currentValue, selected, setSelected, setValueSelected, selectTreeNeedScroll, maxLabelLength = 15, leftContentCols, customSelectTreeComponent: CustomSelectTreeComponent })=>{
+    const [inputValue, setInputValue] = useState('');
+    const groupsLast = useMemo(()=>currentOptions?.map((v)=>({
+                ...v,
+                disabled: selectTreeNeedScroll ? !v.options?.length : false
+            })) || [], [
+        currentOptions,
+        selectTreeNeedScroll
+    ]);
+    const contentStyle = useMemo(()=>{
+        if (2 === leftContentCols) return {
+            borderTopLeftRadius: '0px',
+            borderBottomLeftRadius: '0px'
+        };
+    }, [
+        leftContentCols
+    ]);
+    const [treeData, setTreeData] = useState([]);
+    useEffect(()=>{
+        if (!selectTreeNeedScroll) return;
+        setTimeout(()=>{
+            setInputValue('');
+        }, 10);
+        treeRef.current && treeRef.current.scrollIntoView(String(currentValue));
+        setTimeout(()=>{
+            treeRef.current && treeRef.current.scrollIntoView(String(currentValue));
+        }, 100);
+        const element = document.getElementById(String(currentValue));
+        if (element) element.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start',
+            inline: 'start'
+        });
+        setTimeout(()=>{
+            const element = document.getElementById(String(currentValue));
+            if (element) element.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+                inline: 'start'
+            });
+        }, 100);
+    }, [
+        currentValue,
+        selectTreeNeedScroll
+    ]);
+    const treeRef = useRef(null);
+    const groupData = useMemo(()=>{
+        if (selectTreeNeedScroll) {
+            const treeOptions = [];
+            treeData?.forEach((data)=>{
+                if (data?.options) treeOptions.push(...data.options);
+            });
+            return treeOptions?.map((option)=>option.value);
+        }
+        return treeData?.map((option)=>option.value) || [];
+    }, [
+        treeData,
+        selectTreeNeedScroll
+    ]);
+    function searchData(inputValue) {
+        const loop = (data)=>{
+            const result = [];
+            data.forEach((item)=>{
+                if (item.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1) result.push({
+                    ...item
+                });
+                else if (item.options) {
+                    const filterData = loop(item.options);
+                    if (filterData.length) result.push({
+                        ...item,
+                        options: filterData
+                    });
+                }
+            });
+            return result;
+        };
+        return loop(groupsLast);
+    }
+    useEffect(()=>{
+        if (inputValue) {
+            const result = searchData(inputValue);
+            setTreeData([
+                ...result
+            ]);
+        } else setTreeData(groupsLast);
+    }, [
+        inputValue,
+        groupsLast
+    ]);
+    const handleChange = (current)=>{
+        const value = current?.id;
+        const copyDataList = [
+            ...dataList
+        ];
+        const currentData = copyDataList.find((item)=>item.value === currentValue);
+        if (current && currentData && Array.isArray(currentData?.options)) {
+            if (selected?.includes(value)) {
+                const currentIndex = currentData.options.findIndex((item)=>item.id === value);
+                if (-1 !== currentIndex) currentData.options[currentIndex] = current;
+            } else {
+                currentData.options.push(current);
+                setValueSelected(value, true);
+            }
+            setDataList(copyDataList);
+        }
+    };
+    const handleDeleteItem = (value)=>{
+        setValueSelected(value, false);
+    };
+    return /*#__PURE__*/ jsxs(ColumnContent, {
+        style: {
+            flex: 1,
+            ...contentStyle
+        },
+        children: [
+            /*#__PURE__*/ jsxs(Title, {
+                children: [
+                    /*#__PURE__*/ jsx(ReactComponent, {
+                        className: "selected-icon"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        children: selectTreeTitle
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(StyledDivider, {
+                style: {
+                    marginBottom: '12px'
+                }
+            }),
+            'resultFilter' === currentValue && CustomSelectTreeComponent ? /*#__PURE__*/ jsx(CustomSelectTreeComponent, {
+                currentOptions: groupsLast,
+                handleChange: handleChange,
+                handleDeleteItem: handleDeleteItem
+            }) : /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    needSearchInput && /*#__PURE__*/ jsx(Input.Search, {
+                        style: {
+                            width: 'auto',
+                            padding: '0 16px 12px'
+                        },
+                        value: inputValue,
+                        onChange: setInputValue,
+                        placeholder: selectTreePlaceholder
+                    }),
+                    treeData?.length > 0 && canSelectAll && /*#__PURE__*/ jsx(Checkbox, {
+                        style: {
+                            margin: '0 0 6px 11px',
+                            fontWeight: 600
+                        },
+                        disabled: disableCheckAll,
+                        onChange: (checked)=>{
+                            setValueSelected(groupData, checked);
+                        },
+                        checked: hasAll(selected, groupData),
+                        indeterminate: isPartialSelected(selected, groupData),
+                        children: "全选"
+                    }),
+                    treeData?.length > 0 && /*#__PURE__*/ jsx(StyledTree, {
+                        ref: treeRef,
+                        checkable: true,
+                        treeData: treeData,
+                        autoExpandParent: true,
+                        virtualListProps: {
+                            height: '100%'
+                        },
+                        style: {
+                            height: '100%',
+                            flex: 1,
+                            overflow: 'auto'
+                        },
+                        multiple: true,
+                        blockNode: true,
+                        checkedKeys: selected,
+                        defaultCheckedKeys: selected,
+                        icons: {
+                            switcherIcon: null,
+                            dragIcon: null
+                        },
+                        fieldNames: {
+                            key: 'value',
+                            title: 'label',
+                            children: 'options'
+                        },
+                        onCheck: setSelected,
+                        actionOnClick: "check",
+                        checkedStrategy: "child",
+                        renderTitle: (items)=>{
+                            const { title, value, description, tooltip, subPackageLimit } = items;
+                            if (inputValue && title) {
+                                const index = title.toLowerCase().indexOf(inputValue.toLowerCase());
+                                if (-1 === index) return /*#__PURE__*/ jsx(Tooltip, {
+                                    content: description,
+                                    children: /*#__PURE__*/ jsx("span", {
+                                        children: title
+                                    }, value)
+                                });
+                                const formatTitle = title?.length > maxLabelLength ? title.substr(0, maxLabelLength) + '...' : title;
+                                const prefix = formatTitle.substr(0, index);
+                                const suffix = formatTitle.substr(index + inputValue.length);
+                                return /*#__PURE__*/ jsx(Tooltip, {
+                                    content: description || tooltip || title,
+                                    children: /*#__PURE__*/ jsxs("span", {
+                                        children: [
+                                            prefix,
+                                            /*#__PURE__*/ jsx("span", {
+                                                style: {
+                                                    color: '#6549f2',
+                                                    fontWeight: 400
+                                                },
+                                                children: formatTitle.substr(index, inputValue.length)
+                                            }),
+                                            suffix,
+                                            subPackageLimit && /*#__PURE__*/ jsx(AuthTip, {
+                                                children: "二级包名相关"
+                                            })
+                                        ]
+                                    }, value)
+                                });
+                            }
+                            return /*#__PURE__*/ jsx(Tooltip, {
+                                content: description || tooltip || title,
+                                children: /*#__PURE__*/ jsxs("span", {
+                                    id: value,
+                                    children: [
+                                        title?.length > maxLabelLength ? title.substr(0, maxLabelLength) + '...' : title,
+                                        subPackageLimit && /*#__PURE__*/ jsx(AuthTip, {
+                                            children: "二级包名相关"
+                                        })
+                                    ]
+                                }, value)
+                            });
+                        }
+                    }, "value")
+                ]
+            })
+        ]
+    });
+};
+const CustomTransfer_SelectTreeList = /*#__PURE__*/ memo(SelectTreeList);
+export { CustomTransfer_SelectTreeList as default };

package/dist/CustomTransfer/SelectedItemList.d.ts

@@ -0,0 +1,21 @@
+type DivAttributes = React.HTMLAttributes<HTMLDivElement>;
+export declare const SortableDivContainer: import("react").ComponentClass<DivAttributes & import("react-sortable-hoc").SortableContainerProps, any>;
+export declare const SortableDivItem: import("react").ComponentClass<DivAttributes & import("react-sortable-hoc").SortableElementProps, any>;
+export declare const DivDragHandle: import("react").ComponentClass<unknown, any>;
+declare const SelectedItemList: ({ selectedWidth, selectedTitle, limit, needActionBtn, reset, clear, deleteItem, dataMap, selected, setSelected, isNotDrag, needSelectedNum, needSelectedBacground, maxLabelLength, }: {
+    selectedWidth?: number | string;
+    selectedTitle?: string;
+    limit?: number;
+    needActionBtn?: boolean;
+    reset?: () => void;
+    clear?: () => void;
+    deleteItem?: (value: any) => void;
+    dataMap: Record<string, any>;
+    selected: any[];
+    setSelected: (selected: any) => void;
+    isNotDrag?: boolean;
+    needSelectedNum?: boolean;
+    needSelectedBacground?: boolean;
+    maxLabelLength?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SelectedItemList;