@publishfx/publish-components 2.0.3

package/dist/CustomTransfer/SelectedItemList.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "@arco-design/web-react";
+import { SortableContainer, SortableElement, SortableHandle } from "react-sortable-hoc";
+import { ReactComponent } from "../assets/icons/selected.js";
+import { ReactComponent as drag_sort_js_ReactComponent } from "../assets/icons/drag_sort.js";
+import { ReactComponent as close_js_ReactComponent } from "../assets/icons/close.js";
+import SimpleLink from "./SimpleLink.js";
+import { AuthTip, ColumnContent, StyledDivider, StyledItem, StyledLabel, Title } from "./styled.js";
+const SortableDivContainer = SortableContainer((props)=>/*#__PURE__*/ jsx("div", {
+        ...props
+    }));
+const SortableDivItem = SortableElement((props)=>/*#__PURE__*/ jsx(StyledItem, {
+        ...props
+    }));
+const DivDragHandle = SortableHandle((props)=>/*#__PURE__*/ jsx("span", {
+        ...props,
+        children: /*#__PURE__*/ jsx(drag_sort_js_ReactComponent, {
+            style: {
+                color: 'var(--color-text-3)',
+                fontSize: 16,
+                verticalAlign: -3
+            }
+        })
+    }));
+const SelectedItemList = ({ selectedWidth = 405, selectedTitle = '已选筛选条件', limit = 0, needActionBtn = true, reset = ()=>0, clear = ()=>0, deleteItem = (value)=>0, dataMap, selected, setSelected, isNotDrag = false, needSelectedNum = false, needSelectedBacground = false, maxLabelLength = 15 })=>/*#__PURE__*/ jsxs(ColumnContent, {
+        style: {
+            width: selectedWidth
+        },
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsxs(Title, {
+                        children: [
+                            /*#__PURE__*/ jsx(ReactComponent, {
+                                className: "selected-icon"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                children: selectedTitle
+                            }),
+                            needSelectedNum && /*#__PURE__*/ jsxs("span", {
+                                children: [
+                                    "(",
+                                    limit > 0 ? `${selected?.length}/${limit}` : selected?.length,
+                                    ")"
+                                ]
+                            }),
+                            needActionBtn && /*#__PURE__*/ jsxs("div", {
+                                style: {
+                                    float: 'right'
+                                },
+                                children: [
+                                    /*#__PURE__*/ jsx(SimpleLink, {
+                                        onClick: reset,
+                                        children: "重置"
+                                    }),
+                                    /*#__PURE__*/ jsx(SimpleLink, {
+                                        onClick: clear,
+                                        children: "清空"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(StyledDivider, {})
+                ]
+            }),
+            /*#__PURE__*/ jsx(SortableDivContainer, {
+                style: {
+                    flex: 1,
+                    overflow: 'auto',
+                    padding: 12
+                },
+                axis: "y",
+                useDragHandle: true,
+                onSortEnd: ({ oldIndex, newIndex })=>{
+                    if (oldIndex !== newIndex) {
+                        const tempSelected = [
+                            ...selected
+                        ];
+                        const [movedItem] = tempSelected.splice(oldIndex, 1);
+                        tempSelected.splice(newIndex, 0, movedItem);
+                        setSelected(tempSelected);
+                    }
+                },
+                helperClass: "dragging",
+                children: selected.map((item, index)=>{
+                    const { label, customLabel, description, tooltip, subPackageLimit, disabled, needDelete = true } = dataMap[item] || {};
+                    return /*#__PURE__*/ jsxs(SortableDivItem, {
+                        style: needSelectedBacground ? {
+                            ...selected?.length !== index + 1 ? {
+                                marginBottom: 8
+                            } : {},
+                            background: '#F4F5F7'
+                        } : {},
+                        index: index,
+                        disabled: disabled,
+                        collection: disabled ? 'fixed' : 'normal',
+                        children: [
+                            isNotDrag ? /*#__PURE__*/ jsx("span", {
+                                style: {
+                                    paddingRight: '12px'
+                                }
+                            }) : /*#__PURE__*/ jsx(DivDragHandle, {
+                                className: `drag-icon ${disabled ? 'disabled-drag-icon' : ''}`
+                            }),
+                            /*#__PURE__*/ jsx(Tooltip, {
+                                content: description || tooltip || label,
+                                children: customLabel ? /*#__PURE__*/ jsx(StyledLabel, {
+                                    children: customLabel
+                                }) : /*#__PURE__*/ jsxs("span", {
+                                    children: [
+                                        label?.length > maxLabelLength ? label.substr(0, maxLabelLength) + '...' : label,
+                                        subPackageLimit && /*#__PURE__*/ jsx(AuthTip, {
+                                            children: "二级包名相关"
+                                        })
+                                    ]
+                                })
+                            }),
+                            needDelete && /*#__PURE__*/ jsx(close_js_ReactComponent, {
+                                className: "close-icon arco-icon",
+                                onClick: ()=>{
+                                    deleteItem(item);
+                                }
+                            })
+                        ]
+                    }, item);
+                })
+            })
+        ]
+    });
+const CustomTransfer_SelectedItemList = SelectedItemList;
+export { DivDragHandle, SortableDivContainer, SortableDivItem, CustomTransfer_SelectedItemList as default };

package/dist/CustomTransfer/SimpleLink.d.ts

@@ -0,0 +1,4 @@
+import { FunctionComponent } from 'react';
+import { LinkProps } from '@arco-design/web-react';
+declare const SimpleLink: FunctionComponent<LinkProps>;
+export default SimpleLink;

package/dist/CustomTransfer/SimpleLink.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { Link } from "@arco-design/web-react";
+import styled_components from "styled-components";
+const SimpleLink = (props)=>/*#__PURE__*/ jsx(StyledSpan, {
+        children: /*#__PURE__*/ jsx(StyledLink, {
+            ...props
+        })
+    });
+const StyledLink = styled_components(Link)`
+  font-weight: normal;
+`;
+const StyledSpan = styled_components.span`
+  & + &::before {
+    margin: auto 4px auto 4px;
+    content: '|';
+    color: var(--primary-color);
+  }
+`;
+const CustomTransfer_SimpleLink = SimpleLink;
+export { CustomTransfer_SimpleLink as default };

package/dist/CustomTransfer/index.d.ts

@@ -0,0 +1,22 @@
+import { FunctionComponent } from 'react';
+interface CustomTransferProps {
+    groupOptions?: any[];
+    selected?: (string | number)[];
+    limit?: number;
+    selectTitle?: string;
+    selectTreeTitle?: string;
+    selectTreePlaceholder?: string;
+    selectedTitle?: string;
+    selectWidth?: number | string;
+    selectedWidth?: number | string;
+    leftContentCols?: number;
+    canSelectAll?: boolean;
+    isNotDrag?: boolean;
+    needSelectedNum?: boolean;
+    needActionBtn?: boolean;
+    needSelectedBacground?: boolean;
+    selectTreeNeedScroll?: boolean;
+    customSelectTreeComponent?: FunctionComponent<any>;
+}
+declare const _default: import("react").ForwardRefExoticComponent<CustomTransferProps & import("react").RefAttributes<any>>;
+export default _default;

package/dist/CustomTransfer/index.js

@@ -0,0 +1,92 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useMemo, useState } from "react";
+import BaseTransfer from "./BaseTransfer.js";
+import SelectItemList from "./SelectItemList.js";
+import SelectTreeList from "./SelectTreeList.js";
+const CustomTransfer = ({ groupOptions = [], selected = [], limit, selectTitle, selectTreeTitle, selectTreePlaceholder, selectedTitle, selectWidth, selectedWidth, leftContentCols = 2, canSelectAll = false, isNotDrag = false, needSelectedNum = false, needActionBtn = false, needSelectedBacground = false, selectTreeNeedScroll = false, customSelectTreeComponent }, ref)=>{
+    const [selectedValue, setSelectedValue] = useState([]);
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const leftContent = useMemo(()=>{
+        if (1 === leftContentCols) return [
+            ({ dataList, setDataList, currentOptions, currentValue, selected, setSelected, setValueSelected, dataMap })=>/*#__PURE__*/ jsx(SelectTreeList, {
+                    selectTreeTitle: selectTreeTitle,
+                    selectTreePlaceholder: selectTreePlaceholder,
+                    dataList: dataList,
+                    setDataList: setDataList,
+                    currentOptions: currentOptions,
+                    currentValue: currentValue,
+                    selected: selected,
+                    setSelected: setSelected,
+                    disableCheckAll: Boolean(limit && selected?.length >= limit),
+                    setValueSelected: setValueSelected,
+                    dataMap: dataMap,
+                    canSelectAll: canSelectAll,
+                    selectTreeNeedScroll: selectTreeNeedScroll,
+                    leftContentCols: leftContentCols,
+                    customSelectTreeComponent: customSelectTreeComponent
+                })
+        ];
+        return [
+            ({ dataList, currentValue, dataSelectedMap, handleSelectItemClick })=>/*#__PURE__*/ jsx(SelectItemList, {
+                    selectWidth: selectWidth,
+                    selectTitle: selectTitle,
+                    dataList: dataList,
+                    currentValue: currentValue,
+                    handleSelectItemClick: handleSelectItemClick,
+                    dataSelectedMap: dataSelectedMap
+                }),
+            ({ dataList, setDataList, currentOptions, currentValue, selected, setSelected, setValueSelected, dataMap })=>/*#__PURE__*/ jsx(SelectTreeList, {
+                    selectTreeTitle: selectTreeTitle,
+                    selectTreePlaceholder: selectTreePlaceholder,
+                    dataList: dataList,
+                    setDataList: setDataList,
+                    currentOptions: currentOptions,
+                    currentValue: currentValue,
+                    selected: selected,
+                    setSelected: setSelected,
+                    disableCheckAll: Boolean(limit && selected?.length >= limit),
+                    setValueSelected: setValueSelected,
+                    dataMap: dataMap,
+                    canSelectAll: canSelectAll,
+                    selectTreeNeedScroll: selectTreeNeedScroll,
+                    leftContentCols: leftContentCols,
+                    customSelectTreeComponent: customSelectTreeComponent
+                })
+        ];
+    }, [
+        leftContentCols,
+        selectTreeTitle,
+        selectTreePlaceholder,
+        limit,
+        canSelectAll,
+        selectTreeNeedScroll,
+        selectWidth,
+        selectTitle,
+        customSelectTreeComponent,
+        leftContentCols
+    ]);
+    useImperativeHandle(ref, ()=>({
+            selected: selectedValue,
+            selectedOptions
+        }), [
+        selectedValue,
+        selectedOptions
+    ]);
+    return /*#__PURE__*/ jsx(BaseTransfer, {
+        selectedWidth: selectedWidth,
+        groupOptions: groupOptions,
+        selected: selected,
+        setSelectedValue: setSelectedValue,
+        setSelectedOptions: setSelectedOptions,
+        limit: limit,
+        selectedTitle: selectedTitle,
+        leftContent: leftContent,
+        isNotDrag: isNotDrag,
+        needSelectedNum: needSelectedNum,
+        needActionBtn: needActionBtn,
+        needSelectedBacground: needSelectedBacground,
+        selectTreeNeedScroll: selectTreeNeedScroll
+    });
+};
+const src_CustomTransfer = /*#__PURE__*/ forwardRef(CustomTransfer);
+export { src_CustomTransfer as default };

package/dist/CustomTransfer/styled.d.ts

@@ -0,0 +1,27 @@
+import { Tree } from '@arco-design/web-react';
+export declare const DimensionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LeftColumn: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RightColumn: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RowContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledDivider: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@arco-design/web-react").DividerProps & import("react").RefAttributes<unknown>>, any, {}, never>;
+export declare const DimensionSelect: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@arco-design/web-react").SelectProps & import("react").RefAttributes<import("@arco-design/web-react/es/Select/interface").SelectHandle>> & {
+    Option: import("react").ForwardRefExoticComponent<import("@arco-design/web-react").SelectOptionProps & import("react").RefAttributes<unknown>> & {
+        __ARCO_SELECT_OPTION__?: boolean;
+    };
+    OptGroup: import("react").ForwardRefExoticComponent<import("@arco-design/web-react").SelectOptionGroupProps & import("react").RefAttributes<unknown>> & {
+        __ARCO_SELECT_OPTGROUP__?: boolean;
+    };
+}, any, {}, never>;
+export declare const ColumnContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCheckboxGroup: import("styled-components").StyledComponent<typeof import("@arco-design/web-react/es/Checkbox/group").default, any, {}, never>;
+export declare const SelectTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ClassifyList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FloatRightDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ClassifyItem: import("styled-components").StyledComponent<"div", any, {
+    selected?: boolean;
+}, never>;
+export declare const AuthTip: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledTree: import("styled-components").StyledComponent<typeof Tree, any, {}, never>;

package/dist/CustomTransfer/styled.js

@@ -0,0 +1,181 @@
+import styled_components from "styled-components";
+import { Checkbox, Divider, Select, Tree } from "@arco-design/web-react";
+const DimensionContainer = styled_components.div`
+  display: flex;
+  height: 100%;
+`;
+const LeftColumn = styled_components.div`
+  flex: 7;
+  display: flex;
+  flex-direction: column;
+  margin-right: 16px;
+  width: 0;
+`;
+const RightColumn = styled_components.div`
+  flex: 5;
+  display: flex;
+  flex-direction: column;
+  width: 0;
+`;
+const RowContainer = styled_components.div`
+  margin-bottom: 12px;
+`;
+const Title = styled_components.div`
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--color-text-1);
+  height: 22px;
+  line-height: 22px;
+  margin: 12px;
+
+  .selected-icon {
+    margin-right: 8px;
+    margin-bottom: -4px;
+  }
+`;
+const StyledDivider = styled_components(Divider)`
+  && {
+    margin: 0;
+  }
+`;
+const DimensionSelect = styled_components(Select)`
+  margin: 12px;
+  width: auto !important;
+
+  .arco-select-view {
+    flex-direction: row-reverse;
+
+    .arco-select-suffix {
+      margin-right: 0px;
+      .arco-select-arrow-icon {
+        margin-left: -4px;
+      }
+    }
+  }
+`;
+const ColumnContent = styled_components.div`
+  height: 100%;
+  background: #ffffff;
+  border: 1px solid var(--color-divider-2);
+  box-sizing: border-box;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+
+  .arco-checkbox-group {
+    display: block;
+    overflow: auto;
+    flex: 1;
+
+    .arco-checkbox {
+      margin: 0 10px;
+    }
+  }
+`;
+const { Group } = Checkbox;
+const StyledCheckboxGroup = styled_components(Group)`
+  height: 100%;
+  overflow: auto;
+`;
+const SelectTitle = styled_components.div`
+  line-height: 32px;
+
+  button {
+    float: right;
+  }
+`;
+const StyledLabel = styled_components.span`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: calc(100% - 40px);
+  display: inline-block;
+`;
+const StyledItem = styled_components.div`
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  height: 36px;
+  line-height: 36px;
+  position: relative;
+  font-size: 14px;
+  .valeur-icon {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    right: 34px;
+    top: 11px;
+    cursor: pointer;
+  }
+  .drag-icon {
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 12px;
+    margin-left: 8px;
+    cursor: move;
+    color: var(--color-text-3);
+
+    &.disabled-drag-icon {
+      cursor: not-allowed;
+    }
+  }
+  .close-icon {
+    position: absolute;
+    right: 12px;
+    top: 10px;
+    cursor: pointer;
+    color: var(--color-text-3);
+  }
+
+  &:hover,
+  &.dragging {
+    background: #f6f4fe;
+    border-radius: 6px;
+    z-index: 1002;
+  }
+`;
+const ClassifyList = styled_components.div`
+  padding: 12px;
+`;
+const FloatRightDiv = styled_components.div`
+  display: inline-block;
+  float: right;
+`;
+const ClassifyItem = styled_components.div`
+  margin-bottom: 8px;
+  cursor: pointer;
+  ${(props)=>props.selected && `
+    .group-name {
+      font-weight: 600;
+      color: var(--primary-color);
+    }
+  `}
+
+  .group-selected-num {
+    float: right;
+    width: 20px;
+    height: 20px;
+    color: var(--color-text-3);
+    text-align: center;
+    border-radius: 4px;
+    text-align: right;
+  }
+`;
+const AuthTip = styled_components.span`
+  background: #ffeedd;
+  color: #ff7d00;
+  padding: 4px;
+  font-size: 12px;
+  margin-left: 8px;
+`;
+const StyledTree = styled_components(Tree)`
+  .arco-tree-node-switcher {
+    margin-right: 2px;
+  }
+  
+  .arco-tree-node-selected .arco-tree-node-title,
+  .arco-tree-node-selected .arco-tree-node-title:hover {
+    color: #222222 !important;
+  }
+`;
+export { AuthTip, ClassifyItem, ClassifyList, ColumnContent, DimensionContainer, DimensionSelect, FloatRightDiv, LeftColumn, RightColumn, RowContainer, SelectTitle, StyledCheckboxGroup, StyledDivider, StyledItem, StyledLabel, StyledTree, Title };

package/dist/PerformanceTable/ResizableTitle.d.ts

@@ -0,0 +1,12 @@
+import { FunctionComponent } from 'react';
+import { ResizableProps } from 'react-resizable';
+export type ResizableTitleProps = {
+    disableResize?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    th?: any;
+    currentIndex: number;
+    setResizingIndex: (index?: number) => void;
+} & ResizableProps;
+declare const ResizableTitle: FunctionComponent<ResizableTitleProps>;
+export default ResizableTitle;

package/dist/PerformanceTable/ResizableTitle.js

@@ -0,0 +1,85 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Resizable } from "react-resizable";
+import styled_components from "styled-components";
+const ResizeHandle = styled_components.span`
+  position: absolute;
+  width: 2px;
+  height: 50%;
+  top: 25%;
+  bottom: 0;
+  right: -2px;
+  cursor: col-resize;
+  z-index: 1;
+  background-color: #e0e1e6;
+
+  &:hover {
+    border-right-color: var(--primary-color);
+  }
+`;
+const ResizableTitle = (props)=>{
+    const { onResize, width, minWidth = 100, maxWidth = 800, disableResize = false, currentIndex, setResizingIndex, th: ComponentTh = 'th', ...restProps } = props;
+    const [isResizing, setIsResizing] = useState(false);
+    if (disableResize) return /*#__PURE__*/ jsx(ComponentTh, {
+        index: currentIndex,
+        ...restProps
+    });
+    return /*#__PURE__*/ jsx(Resizable, {
+        width: width || 160,
+        height: 0,
+        axis: "x",
+        minConstraints: [
+            minWidth,
+            0
+        ],
+        maxConstraints: [
+            maxWidth,
+            0
+        ],
+        resizeHandles: [
+            'e'
+        ],
+        handle: ()=>/*#__PURE__*/ jsx(ResizeHandle, {
+                className: "resize-handle",
+                onClick: (e)=>{
+                    e.stopPropagation();
+                },
+                onMouseOver: ()=>{
+                    if (!isResizing) setResizingIndex(currentIndex + 1);
+                },
+                onMouseLeave: ()=>{
+                    if (!isResizing) setResizingIndex(void 0);
+                }
+            }),
+        onResize: onResize,
+        onResizeStart: ()=>{
+            setIsResizing(true);
+            setResizingIndex(currentIndex + 1);
+        },
+        onResizeStop: ()=>{
+            setIsResizing(false);
+            setResizingIndex(void 0);
+        },
+        draggableOpts: {
+            enableUserSelectHack: false
+        },
+        css: `
+        &&&&& {
+          position: sticky;
+        }
+        background-clip: padding-box;
+        // padding-right: 6px;
+        user-select: none;
+
+        .arco-table-cell-mouseenter {
+          background-color: transparent;
+        }
+      `,
+        children: /*#__PURE__*/ jsx(ComponentTh, {
+            index: currentIndex,
+            ...restProps
+        })
+    });
+};
+const PerformanceTable_ResizableTitle = ResizableTitle;
+export { PerformanceTable_ResizableTitle as default };

package/dist/PerformanceTable/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PerformanceTableProps, PerformanceTableRef } from './interface';
+declare const _default: React.ForwardRefExoticComponent<PerformanceTableProps<any> & React.RefAttributes<PerformanceTableRef>>;
+export default _default;