@qsxy/element-plus-react 1.0.0-next.1

package/dist/Table/typings.d.ts

@@ -0,0 +1,230 @@
+import { Placement } from '@popperjs/core';
+import React, { RefObject } from 'react';
+import { ScrollbarRef } from '../Scrollbar';
+import { BaseProps, NativeProps } from '../types/common';
+type CI<T> = {
+    column: TableColumnCtx<T>;
+    $index: number;
+};
+type Filters = {
+    text: string;
+    value: string;
+}[];
+type FilterMethods<T> = (value: any, row: T, column: TableColumnCtx<T>) => void;
+export type RenderCell<T> = {
+    $index: number;
+    row: T;
+    column?: TableColumnCtx<T>;
+};
+export type TableColumnProps<T> = {
+    type?: 'selection' | 'index' | 'expand' | 'drag';
+    index?: number | ((index: number, row?: T) => number);
+    label?: string | React.ReactElement;
+    className?: string;
+    labelClassName?: string;
+    name?: string;
+    prop?: string;
+    width?: number;
+    minWidth?: number;
+    renderHeader?: (data: CI<T>) => React.ReactElement;
+    sortable?: boolean | 'custom';
+    sortMethod?: (a: T, b: T) => number;
+    sortBy?: string | string[];
+    sortOrders?: ('ascending' | 'descending' | null)[];
+    resizable?: boolean;
+    columnKey?: string;
+    rawColumnKey?: string;
+    align?: 'left' | 'center' | 'right';
+    headerAlign?: 'left' | 'center' | 'right';
+    showOverflowTooltip?: boolean;
+    fixed?: boolean | 'left' | 'right';
+    formatter?: (row: T, column: TableColumnCtx<T>, cellValue: any, index: number) => React.ReactElement | string;
+    selectable?: (row: T, index: number) => boolean;
+    reserveSelection?: boolean;
+    filterMethod?: FilterMethods<T>;
+    filteredValue?: string[];
+    filters?: Filters;
+    filterPlacement?: Placement;
+    filterMultiple?: boolean;
+    children?: React.ReactElement<TableColumnProps<T>> | React.ReactElement<TableColumnProps<T>>[] | ((data: RenderCell<T>) => React.ReactElement | string | number);
+};
+export type TableColumnCtx<T> = Omit<TableColumnProps<T>, 'children'> & {
+    id?: string;
+    realWidth?: number;
+    offsetWidth?: number;
+    renderCell?: (data: RenderCell<T>) => React.ReactElement;
+    colSpan?: number;
+    rowSpan?: number;
+    children?: TableColumnCtx<T>[];
+    level?: number;
+    filterable?: boolean | FilterMethods<T> | Filters;
+    order?: string;
+    isColumnGroup?: boolean;
+    isSubColumn?: boolean;
+    columns?: TableColumnCtx<T>[];
+    getColumnIndex?: () => number;
+    no?: number;
+    filterOpened?: boolean;
+};
+export interface TreeNode {
+    id?: string;
+    parentId?: string;
+    expanded?: boolean;
+    loading?: boolean;
+    noLazyChildren?: boolean;
+    indent?: number;
+    level?: number;
+    display?: boolean;
+}
+export interface TableEvents<T> {
+    onSelect?: (selection: T[], row: T) => void;
+    onSelectAll?: (selection: T[]) => void;
+    onSelectionChange?: (selection: T[]) => void;
+    onCellMouseEnter?: (row: T, column: TableColumnCtx<T>, cell: HTMLTableCellElement, event: React.MouseEvent<Element>) => void;
+    onCellMouseLeave?: (row: T, column: TableColumnCtx<T>, cell: HTMLTableCellElement, event: React.MouseEvent<Element>) => void;
+    onCellClick?: (row: T, column: TableColumnCtx<T>, cell: HTMLTableCellElement, event: React.MouseEvent<Element>) => void;
+    onCellDblclick?: (row: T, column: TableColumnCtx<T>, cell: HTMLTableCellElement, event: React.MouseEvent<Element>) => void;
+    onCellContextmenu?: (row: T, column: TableColumnCtx<T>, cell: HTMLTableCellElement, event: React.MouseEvent<Element>) => void;
+    onRowClick?: (row: T, column: TableColumnCtx<T>, event: React.MouseEvent<Element>) => void;
+    onRowContextmenu?: (row: T, column: TableColumnCtx<T>, event: React.MouseEvent<Element>) => void;
+    onRowDblclick?: (row: T, column: TableColumnCtx<T>, event: React.MouseEvent<Element>) => void;
+    onHeaderClick?: (column: TableColumnCtx<T>, event: React.MouseEvent<Element>) => void;
+    onHeaderContextmenu?: (column: TableColumnCtx<T>, event: React.MouseEvent<Element>) => void;
+    onSortChange?: (data: {
+        column: TableColumnCtx<T>;
+        prop: string;
+        order: 'ascending' | 'descending';
+    }) => T[];
+    onFilterChange?: (filters: any) => void;
+    onCurrentChange?: (currentRow: T, oldCurrentRow: T) => void;
+    onHeaderDragend?: (newWidth: number, oldWidth: number, column: TableColumnCtx<T>, event: React.MouseEvent<Element>) => void;
+    onExpandChange?: (row: T, expandedRows: boolean | string[]) => void;
+    onDragChange?: (data: T[]) => void;
+}
+export interface TableProps<T> extends BaseProps, NativeProps<'--el-table-border-color' | '--el-table-border' | '--el-table-text-color' | '--el-table-header-text-color' | '--el-table-row-hover-bg-color' | '--el-table-row-strip-bg-color' | '--el-table-current-row-bg-color' | '--el-table-header-bg-color' | '--el-table-fixed-box-shadow' | '--el-table-bg-color' | '--el-table-tr-bg-color' | '--el-table-expanded-cell-bg-color' | '--el-table-fixed-left-column' | '--el-table-fixed-right-column' | '--el-table-min-height'>, TableEvents<T> {
+    data: T[];
+    height?: string | number;
+    maxHeight?: string | number;
+    rowHeight?: number;
+    stripe?: boolean;
+    border?: boolean;
+    size?: 'large' | 'default' | 'small';
+    fit?: boolean;
+    showHeader?: boolean;
+    highlightCurrentRow?: boolean;
+    currentRowKey?: string | number;
+    rowClassName?: ((data: {
+        row: T;
+        rowIndex: number;
+    }) => string) | string;
+    rowStyle?: ((data: {
+        row: T;
+        rowIndex: number;
+    }) => React.CSSProperties) | React.CSSProperties;
+    cellClassName?: ((data: {
+        row: T;
+        column: TableColumnCtx<T>;
+        rowIndex: number;
+        columnIndex: number;
+    }) => string) | string;
+    cellStyle?: ((data: {
+        row: T;
+        column: TableColumnCtx<T>;
+        rowIndex: number;
+        columnIndex: number;
+    }) => React.CSSProperties) | React.CSSProperties;
+    headerRowClassName?: ((data: {
+        row: T;
+        rowIndex: number;
+    }) => string) | string;
+    headerRowStyle?: ((data: {
+        row: T;
+        rowIndex: number;
+    }) => React.CSSProperties) | React.CSSProperties;
+    headerCellClassName?: ((data: {
+        row: T;
+        column: TableColumnCtx<T>;
+        rowIndex: number;
+        columnIndex: number;
+    }) => string) | string;
+    headerCellStyle?: ((data: {
+        row: T;
+        column: TableColumnCtx<T>;
+        rowIndex: number;
+        columnIndex: number;
+    }) => React.CSSProperties) | React.CSSProperties;
+    rowKey?: string | ((data: {
+        row: T;
+    }) => string);
+    emptyText?: string;
+    append?: React.ReactElement;
+    defaultExpandAll?: boolean;
+    expandRowKeys?: string[];
+    defaultSort?: TableSort;
+    tooltipEffect?: 'dark' | 'light';
+    showSummary?: boolean;
+    sumText?: string;
+    summaryMethod?: (data: {
+        columns: TableColumnCtx<T>[];
+        data: T[];
+    }) => string[];
+    spanMethod?: (data: {
+        row: T;
+        column: TableColumnCtx<T>;
+        rowIndex: number;
+        columnIndex: number;
+    }) => number[] | {
+        rowspan: number;
+        colspan: number;
+    } | undefined;
+    selectOnIndeterminate?: boolean;
+    indent?: number;
+    lazy?: boolean;
+    load?: (row: T, treeNode: TreeNode, resolve: (data: T[]) => void) => void;
+    treeProps?: {
+        hasChildren?: string;
+        children?: string;
+    };
+    tableLayout?: 'fixed' | 'auto';
+    scrollbarAlwaysOn?: boolean;
+    flexible?: boolean;
+    loading?: boolean;
+    expandable?: (row: T) => Promise<boolean>;
+    hideIconOnNotExpand?: boolean;
+    children: React.ReactElement<TableColumnProps<T>> | React.ReactElement<TableColumnProps<T>>[];
+}
+export interface TableSort {
+    prop?: string;
+    order: 'ascending' | 'descending';
+    init?: any;
+    silent?: any;
+}
+export interface TableRefs {
+    tableWrapper: RefObject<HTMLDivElement>;
+    innerWrpper: RefObject<HTMLDivElement>;
+    headerWrapper: RefObject<HTMLDivElement>;
+    footerWrapper: RefObject<HTMLDivElement>;
+    scrollBarRef: RefObject<ScrollbarRef>;
+    resizeHelper: RefObject<HTMLDivElement>;
+    tableHeader: RefObject<HTMLTableElement>;
+    tableBody: RefObject<HTMLTableElement>;
+    emptyBlock: RefObject<HTMLDivElement>;
+}
+export interface TableRef<T> {
+    refs: TableRefs;
+    clearSelection: () => void;
+    getSelectionRows: () => T[];
+    toggleRowSelection: (row: T, selected: boolean) => void;
+    toggleAllSelection: () => void;
+    toggleRowExpansion?: () => void;
+    setCurrentRow: (row?: T | null) => void;
+    clearSort?: () => void;
+    clearFilter?: () => void;
+    doLayout: () => void;
+    sort?: () => void;
+    scrollTo?: (options: ScrollToOptions | number, yCoord?: number) => void;
+    setScrollTop?: (value: number) => void;
+    setScrollLeft?: (value: number) => void;
+    setHeight: (height: string | number) => void;
+}
+export {};

package/dist/Table/typings.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Table/typings.ts
+var typings_exports = {};
+module.exports = __toCommonJS(typings_exports);

package/dist/Table/util.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TooltipRef } from '../Tooltip/typings';
+import { TableColumnCtx, TableProps } from './typings';
+export declare const TableIdManager: {
+    tableId: number;
+    nextTableId: () => string;
+    columnId: number;
+    nextColumnId: (start?: number) => string;
+};
+export declare const getStyle: (element: HTMLElement, styleName: keyof React.CSSProperties) => string;
+export declare let removePopper: () => void | undefined;
+export declare function createTablePopper(parentNode: HTMLElement | undefined, trigger: HTMLElement, popperContent: string, tooltipRef: React.MutableRefObject<TooltipRef>): void;
+export declare const getRowIdentity: <T>(row: T, rowKey: string | ((data: {
+    row: T;
+}) => string)) => string;
+export declare const getRowIndex: <T>(index: number | ((index: number, row?: T) => number), rowIndex: number, row: T) => number;
+export declare function parseHeight(height: number | string): string | number;
+export declare const insertAfter: (newElement: HTMLElement, targetElement: HTMLElement) => void;

package/dist/Table/util.js

@@ -0,0 +1,177 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Table/util.ts
+var util_exports = {};
+__export(util_exports, {
+  TableIdManager: () => TableIdManager,
+  createTablePopper: () => createTablePopper,
+  getRowIdentity: () => getRowIdentity,
+  getRowIndex: () => getRowIndex,
+  getStyle: () => getStyle,
+  insertAfter: () => insertAfter,
+  parseHeight: () => parseHeight,
+  removePopper: () => removePopper
+});
+module.exports = __toCommonJS(util_exports);
+var import_react = require("react");
+var import_client = require("react-dom/client");
+var import_Tooltip = require("../Tooltip");
+var import_prefix = require("../hooks/prefix");
+var TableIdManager = {
+  tableId: 0,
+  columnId: 0,
+  nextTableId: () => `r-table_${++TableIdManager.tableId}`,
+  nextColumnId: (start) => `column_${start ? ++start : ++TableIdManager.columnId}`
+};
+var cacheStringFunction = (fn) => {
+  const cache = /* @__PURE__ */ Object.create(null);
+  return (str) => {
+    const hit = cache[str];
+    return hit || (cache[str] = fn(str));
+  };
+};
+var camelizeRE = /-(\w)/g;
+var camelize = cacheStringFunction((str) => {
+  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
+});
+var getStyle = (element, styleName) => {
+  var _a;
+  if (!element || !styleName) {
+    return "";
+  }
+  let key = camelize(styleName + "");
+  if (key === "float") {
+    key = "cssFloat";
+  }
+  try {
+    const style = element.style[key];
+    if (style) {
+      return style;
+    }
+    const computed = (_a = document.defaultView) == null ? void 0 : _a.getComputedStyle(element, "");
+    return computed ? computed[key] : "";
+  } catch {
+    return element.style[key];
+  }
+};
+var removePopper;
+function createTablePopper(parentNode, trigger, popperContent, tooltipRef) {
+  var _a;
+  const ns = import_prefix.globalKey || "r";
+  const scrollContainer = parentNode == null ? void 0 : parentNode.querySelector(`.${ns}-scrollbar__wrap`);
+  removePopper == null ? void 0 : removePopper();
+  const renderDom = document.createDocumentFragment();
+  const root = (0, import_client.createRoot)(renderDom);
+  removePopper = () => {
+    var _a2;
+    try {
+      (_a2 = tooltipRef.current) == null ? void 0 : _a2.hide();
+      scrollContainer == null ? void 0 : scrollContainer.removeEventListener("scroll", removePopper);
+      removePopper = void 0;
+    } catch {
+    }
+  };
+  if (!tooltipRef.current) {
+    const vm = (0, import_react.createElement)(import_Tooltip.Tooltip, {
+      enterable: true,
+      onMouseLeave: removePopper,
+      virtualTriggering: true,
+      virtualRef: {
+        getBoundingClientRect: () => trigger.getBoundingClientRect()
+      },
+      defaultVisible: true,
+      content: popperContent,
+      placement: "top",
+      // @ts-ignore
+      ref: tooltipRef,
+      hideAfter: 20
+    });
+    root.render(vm);
+  } else {
+    (_a = tooltipRef.current) == null ? void 0 : _a.onOpen();
+  }
+  trigger.addEventListener("mouseleave", () => {
+    var _a2;
+    (_a2 = tooltipRef.current) == null ? void 0 : _a2.hide();
+  });
+  scrollContainer == null ? void 0 : scrollContainer.addEventListener("scroll", removePopper);
+}
+var getRowIdentity = (row, rowKey) => {
+  if (!row) {
+    throw new Error("Row is required when get row identity");
+  }
+  if (typeof rowKey === "string") {
+    if (!rowKey.includes(".")) {
+      return `${row[rowKey]}`;
+    }
+    const key = rowKey.split(".");
+    let current = row;
+    for (const element of key) {
+      current = current[element];
+    }
+    return `${current}`;
+  } else if (typeof rowKey === "function") {
+    return rowKey.call(null, { row });
+  }
+  return "";
+};
+var getRowIndex = (index, rowIndex, row) => {
+  if (index) {
+    if (typeof index === "number") {
+      return index;
+    } else {
+      return index(rowIndex, row);
+    }
+  }
+  return rowIndex;
+};
+function parseHeight(height) {
+  if (typeof height === "number") {
+    return height;
+  }
+  if (typeof height === "string") {
+    if (/^\d+(?:px)?$/.test(height)) {
+      return Number.parseInt(height, 10);
+    } else {
+      return height;
+    }
+  }
+  return null;
+}
+var insertAfter = (newElement, targetElement) => {
+  const parentElement = targetElement.parentNode;
+  if (parentElement) {
+    if (parentElement.lastChild == targetElement) {
+      parentElement.appendChild(newElement);
+    } else {
+      parentElement.insertBefore(newElement, targetElement.nextSibling);
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TableIdManager,
+  createTablePopper,
+  getRowIdentity,
+  getRowIndex,
+  getStyle,
+  insertAfter,
+  parseHeight,
+  removePopper
+});

package/dist/Tabs/TabPane.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TabPaneProps } from './typings';
+declare const TabPane: React.ForwardRefExoticComponent<TabPaneProps & React.RefAttributes<HTMLDivElement>>;
+export default TabPane;

package/dist/Tabs/TabPane.js

@@ -0,0 +1,72 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Tabs/TabPane.tsx
+var TabPane_exports = {};
+__export(TabPane_exports, {
+  default: () => TabPane_default
+});
+module.exports = __toCommonJS(TabPane_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_hooks = require("../hooks");
+var import_TabsContext = require("./TabsContext");
+var TabPane = (0, import_react.forwardRef)((props, ref) => {
+  const { name, classPrefix = "tab-pane", lazy, onTabShow, onTabClose } = props;
+  const { b } = (0, import_hooks.useClassNames)(classPrefix);
+  const { activeName } = (0, import_react.useContext)(import_TabsContext.TabsContext);
+  const [hasLoad, setHasLoad] = (0, import_react.useState)(activeName === name);
+  const isActive = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (hasLoad === false) {
+      setHasLoad(activeName === name);
+    }
+  }, [activeName, hasLoad, name]);
+  (0, import_react.useEffect)(() => {
+    if (isActive.current === false && activeName === name) {
+      isActive.current = true;
+      onTabShow == null ? void 0 : onTabShow();
+    } else if (isActive.current === true && activeName !== name) {
+      isActive.current = false;
+      onTabClose == null ? void 0 : onTabClose();
+    }
+  }, [activeName, name, onTabClose, onTabShow]);
+  const main = (0, import_react.useMemo)(
+    () => /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b(), props.className), style: { display: activeName === name ? "" : "none", ...props.style }, ref }, props.children),
+    [activeName, b, name, props.children, props.className, props.style, ref]
+  );
+  if (lazy) {
+    if (hasLoad) {
+      return main;
+    }
+  } else {
+    return main;
+  }
+});
+TabPane.displayName = "TabPane";
+var TabPane_default = TabPane;

package/dist/Tabs/Tabs.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TabsProps } from './typings';
+declare const Tabs: FC<TabsProps>;
+export default Tabs;