@ant-design/pro-components 2.8.9 → 3.0.0-beta.1

package/es/table/components/ListToolBar/index.js

@@ -0,0 +1,328 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/table/components/ListToolBar/index.tsx
+import { ConfigProvider, Input, Tabs, Tooltip } from "antd";
+import classNames from "classnames";
+import ResizeObserver from "rc-resize-observer";
+import React, { useContext, useMemo, useState } from "react";
+import { proTheme, useIntl } from "../../../provider";
+import { LabelIconTip } from "../../../utils";
+import HeaderMenu from "./HeaderMenu";
+import { useStyle } from "./style";
+function getSettingItem(setting) {
+  if (React.isValidElement(setting)) {
+    return setting;
+  }
+  if (setting) {
+    const settingConfig = setting;
+    const { icon, tooltip, onClick, key } = settingConfig;
+    if (icon && tooltip) {
+      return /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip }, /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          key,
+          onClick: () => {
+            if (onClick) {
+              onClick(key);
+            }
+          }
+        },
+        icon
+      ));
+    }
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        key,
+        onClick: () => {
+          if (onClick) {
+            onClick(key);
+          }
+        }
+      },
+      icon
+    );
+  }
+  return null;
+}
+var ListToolBarTabBar = ({ prefixCls, tabs, multipleLine, filtersNode }) => {
+  if (!multipleLine)
+    return null;
+  return /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-extra-line` }, (tabs == null ? void 0 : tabs.items) && (tabs == null ? void 0 : tabs.items.length) ? /* @__PURE__ */ React.createElement(
+    Tabs,
+    {
+      style: {
+        width: "100%"
+      },
+      defaultActiveKey: tabs.defaultActiveKey,
+      activeKey: tabs.activeKey,
+      items: tabs.items.map((item, index) => {
+        var _a;
+        return __spreadProps(__spreadValues({
+          label: item.tab
+        }, item), {
+          key: ((_a = item.key) == null ? void 0 : _a.toString()) || (index == null ? void 0 : index.toString())
+        });
+      }),
+      onChange: tabs.onChange,
+      tabBarExtraContent: filtersNode
+    }
+  ) : filtersNode);
+};
+var ListToolBar = ({
+  prefixCls: customizePrefixCls,
+  title,
+  subTitle,
+  tooltip,
+  className,
+  style,
+  search,
+  onSearch,
+  multipleLine = false,
+  filter,
+  actions = [],
+  settings = [],
+  tabs,
+  menu
+}) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const { token } = proTheme.useToken();
+  const prefixCls = getPrefixCls("pro-table-list-toolbar", customizePrefixCls);
+  const { wrapSSR, hashId } = useStyle(prefixCls);
+  const intl = useIntl();
+  const [isMobile, setIsMobile] = useState(false);
+  const placeholder = intl.getMessage("tableForm.inputPlaceholder", "请输入");
+  const searchNode = useMemo(() => {
+    if (!search) {
+      return null;
+    }
+    if (React.isValidElement(search)) {
+      return search;
+    }
+    return /* @__PURE__ */ React.createElement(
+      Input.Search,
+      __spreadProps(__spreadValues({
+        style: { width: 200 },
+        placeholder
+      }, search), {
+        onSearch: (...restParams) => __async(void 0, null, function* () {
+          var _a;
+          const success = yield (_a = search.onSearch) == null ? void 0 : _a.call(search, ...restParams);
+          if (success !== false) {
+            onSearch == null ? void 0 : onSearch(restParams == null ? void 0 : restParams[0]);
+          }
+        })
+      })
+    );
+  }, [placeholder, onSearch, search]);
+  const filtersNode = useMemo(() => {
+    if (filter)
+      return /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-filter ${hashId}`.trim() }, filter);
+    return null;
+  }, [filter, hashId, prefixCls]);
+  const hasTitle = useMemo(
+    () => menu || title || subTitle || tooltip,
+    [menu, subTitle, title, tooltip]
+  );
+  const actionDom = useMemo(() => {
+    if (!Array.isArray(actions)) {
+      return actions;
+    }
+    if (actions.length < 1) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: token.marginXS
+        }
+      },
+      actions.map((action, index) => {
+        if (!React.isValidElement(action)) {
+          return /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, action);
+        }
+        return React.cloneElement(action, __spreadValues({
+          // eslint-disable-next-line react/no-array-index-key
+          key: index
+        }, action == null ? void 0 : action.props));
+      })
+    );
+  }, [actions]);
+  const hasRight = useMemo(() => {
+    return !!(hasTitle && searchNode || !multipleLine && filtersNode || actionDom || (settings == null ? void 0 : settings.length));
+  }, [
+    actionDom,
+    filtersNode,
+    hasTitle,
+    multipleLine,
+    searchNode,
+    settings == null ? void 0 : settings.length
+  ]);
+  const hasLeft = useMemo(
+    () => tooltip || title || subTitle || menu || !hasTitle && searchNode,
+    [hasTitle, menu, searchNode, subTitle, title, tooltip]
+  );
+  const leftTitleDom = useMemo(() => {
+    if (!hasLeft && hasRight) {
+      return /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-left ${hashId}`.trim() });
+    }
+    if (!menu && (hasTitle || !searchNode)) {
+      return /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-left ${hashId}`.trim() }, /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-title ${hashId}`.trim() }, /* @__PURE__ */ React.createElement(LabelIconTip, { tooltip, label: title, subTitle })));
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classNames(`${prefixCls}-left`, hashId, {
+          [`${prefixCls}-left-has-tabs`]: (menu == null ? void 0 : menu.type) === "tab",
+          [`${prefixCls}-left-has-dropdown`]: (menu == null ? void 0 : menu.type) === "dropdown",
+          [`${prefixCls}-left-has-inline-menu`]: (menu == null ? void 0 : menu.type) === "inline"
+        })
+      },
+      hasTitle && !menu && /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-title ${hashId}`.trim() }, /* @__PURE__ */ React.createElement(LabelIconTip, { tooltip, label: title, subTitle })),
+      menu && // 这里面实现了 tabs 的逻辑
+      /* @__PURE__ */ React.createElement(HeaderMenu, __spreadProps(__spreadValues({}, menu), { prefixCls })),
+      !hasTitle && searchNode ? /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-search ${hashId}`.trim() }, searchNode) : null
+    );
+  }, [
+    hasLeft,
+    hasRight,
+    hasTitle,
+    hashId,
+    menu,
+    prefixCls,
+    searchNode,
+    subTitle,
+    title,
+    tooltip
+  ]);
+  const rightTitleDom = useMemo(() => {
+    if (!hasRight)
+      return null;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `${prefixCls}-right ${hashId}`.trim(),
+        style: isMobile ? {} : { alignItems: "center" }
+      },
+      !multipleLine ? filtersNode : null,
+      hasTitle && searchNode ? /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-search ${hashId}`.trim() }, searchNode) : null,
+      actionDom,
+      (settings == null ? void 0 : settings.length) ? /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-setting-items ${hashId}`.trim() }, settings.map((setting, index) => {
+        const settingItem = getSettingItem(setting);
+        return (
+          // eslint-disable-next-line react/no-array-index-key
+          /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              key: index,
+              className: `${prefixCls}-setting-item ${hashId}`.trim()
+            },
+            settingItem
+          )
+        );
+      })) : null
+    );
+  }, [
+    hasRight,
+    prefixCls,
+    hashId,
+    isMobile,
+    hasTitle,
+    searchNode,
+    multipleLine,
+    filtersNode,
+    actionDom,
+    settings
+  ]);
+  const titleNode = useMemo(() => {
+    if (!hasRight && !hasLeft)
+      return null;
+    const containerClassName = classNames(`${prefixCls}-container`, hashId, {
+      [`${prefixCls}-container-mobile`]: isMobile
+    });
+    return /* @__PURE__ */ React.createElement("div", { className: containerClassName }, leftTitleDom, rightTitleDom);
+  }, [
+    hasLeft,
+    hasRight,
+    hashId,
+    isMobile,
+    leftTitleDom,
+    prefixCls,
+    rightTitleDom
+  ]);
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      ResizeObserver,
+      {
+        onResize: (size) => {
+          if (size.width < 375 !== isMobile) {
+            setIsMobile(size.width < 375);
+          }
+        }
+      },
+      (ref) => /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ref,
+          style,
+          className: classNames(prefixCls, hashId, className)
+        },
+        titleNode,
+        /* @__PURE__ */ React.createElement(
+          ListToolBarTabBar,
+          {
+            filtersNode,
+            prefixCls,
+            tabs,
+            multipleLine
+          }
+        )
+      )
+    )
+  );
+};
+var ListToolBar_default = ListToolBar;
+export {
+  ListToolBar_default as default
+};

package/es/table/components/ListToolBar/style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '../../../provider';
+export interface ProListToken extends ProAliasToken {
+    componentCls: string;
+}
+export declare function useStyle(prefixCls: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

package/es/table/components/ListToolBar/style.js

@@ -0,0 +1,143 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/table/components/ListToolBar/style.ts
+import { useStyle as useAntdStyle } from "../../../provider";
+var genProListStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      lineHeight: "1",
+      "&-container": {
+        display: "flex",
+        justifyContent: "space-between",
+        paddingBlock: token.padding,
+        paddingInline: 0,
+        "&-mobile": { flexDirection: "column" }
+      },
+      "&-title": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        color: token.colorTextHeading,
+        fontWeight: "500",
+        fontSize: token.fontSizeLG
+      },
+      "&-search:not(:last-child)": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "flex-start"
+      },
+      "&-setting-item": {
+        marginBlock: 0,
+        marginInline: 4,
+        color: token.colorIconHover,
+        fontSize: token.fontSizeLG,
+        cursor: "pointer",
+        "> span": { display: "block", width: "100%", height: "100%" },
+        "&:hover": {
+          color: token.colorPrimary
+        }
+      },
+      "&-left": {
+        display: "flex",
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: token.marginXS,
+        justifyContent: "flex-start",
+        maxWidth: "calc(100% - 200px)",
+        [`${token.antCls}-tabs`]: {
+          width: "100%"
+        },
+        "&-has-tabs": {
+          overflow: "hidden"
+        }
+      },
+      "&-right": {
+        flex: 1,
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "flex-end",
+        gap: token.marginXS
+      },
+      "&-extra-line": { marginBlockEnd: token.margin },
+      "&-setting-items": {
+        display: "flex",
+        gap: token.marginXS,
+        lineHeight: "32px",
+        alignItems: "center"
+      },
+      "&-filter": {
+        "&:not(:last-child)": { marginInlineEnd: token.margin },
+        display: "flex",
+        alignItems: "center",
+        [`div$${token.antCls}-pro-table-search`]: {
+          marginBlock: 0,
+          marginInline: 0,
+          paddingBlock: 0,
+          paddingInline: 0
+        }
+      },
+      "&-inline-menu-item": {
+        display: "inline-block",
+        marginInlineEnd: token.marginLG,
+        cursor: "pointer",
+        opacity: "0.75",
+        "&-active": { fontWeight: "bold", opacity: "1" }
+      },
+      [`${token.antCls}-tabs-top > ${token.antCls}-tabs-nav`]: {
+        marginBlockEnd: 0,
+        "&::before": { borderBlockEnd: 0 },
+        [`${token.antCls}-tabs-nav-list`]: {
+          marginBlockStart: 0,
+          "${token.antCls}-tabs-tab": {
+            paddingBlockStart: 0
+          }
+        }
+      },
+      "&-dropdownmenu-label": {
+        fontWeight: "bold",
+        fontSize: token.fontSizeIcon,
+        textAlign: "center",
+        cursor: "pointer"
+      },
+      "@media (max-width: 768px)": {
+        [token.componentCls]: {
+          "&-container": {
+            display: "flex",
+            flexWrap: "wrap",
+            flexDirection: "column"
+          },
+          "&-left": { marginBlockEnd: "16px", maxWidth: "100%" }
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useAntdStyle("ProTableListToolBar", (token) => {
+    const proListToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genProListStyle(proListToken)];
+  });
+}
+export {
+  useStyle
+};

package/es/table/components/ToolBar/DensityIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type DensitySize = 'middle' | 'small' | 'large' | undefined;
+declare const _default: React.MemoExoticComponent<(props: {
+    icon?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/es/table/components/ToolBar/DensityIcon.js

@@ -0,0 +1,46 @@
+// src/table/components/ToolBar/DensityIcon.tsx
+import { ColumnHeightOutlined } from "@ant-design/icons";
+import { Dropdown, Tooltip } from "antd";
+import React, { useContext } from "react";
+import { useIntl } from "../../../provider";
+import { TableContext } from "../../Store/Provide";
+var DensityIcon = (props) => {
+  const { icon = /* @__PURE__ */ React.createElement(ColumnHeightOutlined, null) } = props;
+  const counter = useContext(TableContext);
+  const intl = useIntl();
+  return /* @__PURE__ */ React.createElement(
+    Dropdown,
+    {
+      menu: {
+        selectedKeys: [counter.tableSize],
+        onClick: ({ key }) => {
+          var _a;
+          (_a = counter.setTableSize) == null ? void 0 : _a.call(counter, key);
+        },
+        style: {
+          width: 80
+        },
+        items: [
+          {
+            key: "large",
+            label: intl.getMessage("tableToolBar.densityLarger", "宽松")
+          },
+          {
+            key: "middle",
+            label: intl.getMessage("tableToolBar.densityMiddle", "中等")
+          },
+          {
+            key: "small",
+            label: intl.getMessage("tableToolBar.densitySmall", "紧凑")
+          }
+        ]
+      },
+      trigger: ["click"]
+    },
+    /* @__PURE__ */ React.createElement(Tooltip, { title: intl.getMessage("tableToolBar.density", "表格密度") }, icon)
+  );
+};
+var DensityIcon_default = React.memo(DensityIcon);
+export {
+  DensityIcon_default as default
+};

package/es/table/components/ToolBar/FullscreenIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/es/table/components/ToolBar/FullscreenIcon.js

@@ -0,0 +1,23 @@
+// src/table/components/ToolBar/FullscreenIcon.tsx
+import { FullscreenExitOutlined, FullscreenOutlined } from "@ant-design/icons";
+import { Tooltip } from "antd";
+import React, { useEffect, useState } from "react";
+import { useIntl } from "../../../provider";
+import { isBrowser } from "../../../utils";
+var FullScreenIcon = () => {
+  const intl = useIntl();
+  const [fullscreen, setFullscreen] = useState(false);
+  useEffect(() => {
+    if (!isBrowser()) {
+      return;
+    }
+    document.onfullscreenchange = () => {
+      setFullscreen(!!document.fullscreenElement);
+    };
+  }, []);
+  return fullscreen ? /* @__PURE__ */ React.createElement(Tooltip, { title: intl.getMessage("tableToolBar.exitFullScreen", "全屏") }, /* @__PURE__ */ React.createElement(FullscreenExitOutlined, null)) : /* @__PURE__ */ React.createElement(Tooltip, { title: intl.getMessage("tableToolBar.fullScreen", "全屏") }, /* @__PURE__ */ React.createElement(FullscreenOutlined, null));
+};
+var FullscreenIcon_default = React.memo(FullScreenIcon);
+export {
+  FullscreenIcon_default as default
+};

package/es/table/components/ToolBar/index.d.ts

@@ -0,0 +1,68 @@
+import type { TableColumnType } from 'antd';
+import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
+import React from 'react';
+import type { ActionType, OptionSearchProps, ProTableProps } from '../../typing';
+import type { ListToolBarProps } from '../ListToolBar';
+export type SettingOptionType = {
+    draggable?: boolean;
+    checkable?: boolean;
+    showListItemOption?: boolean;
+    checkedReset?: boolean;
+    listsHeight?: number;
+    extra?: React.ReactNode;
+    children?: React.ReactNode;
+    settingIcon?: React.ReactNode;
+};
+export type OptionConfig = {
+    density?: boolean;
+    fullScreen?: OptionsType;
+    reload?: OptionsType;
+    setting?: boolean | SettingOptionType;
+    search?: (OptionSearchProps & {
+        name?: string;
+    }) | boolean;
+    reloadIcon?: React.ReactNode;
+    densityIcon?: React.ReactNode;
+};
+export type OptionsFunctionType = (e: React.MouseEvent<HTMLSpanElement>, action?: ActionType) => void;
+export type OptionsType = OptionsFunctionType | boolean;
+export type ToolBarProps<T = unknown> = {
+    headerTitle?: React.ReactNode;
+    tooltip?: string | LabelTooltipType;
+    toolbar?: ListToolBarProps;
+    toolBarRender?: (action: ActionType | undefined, rows: {
+        selectedRowKeys?: (string | number)[];
+        selectedRows?: T[];
+    }) => React.ReactNode[];
+    action: React.MutableRefObject<ActionType | undefined>;
+    options?: OptionConfig | false;
+    optionsRender?: ToolbarRenderProps<T>['optionsRender'];
+    selectedRowKeys?: (string | number)[];
+    selectedRows?: T[];
+    className?: string;
+    onSearch?: (keyWords: string) => void;
+    columns: TableColumnType<T>[];
+};
+export type ToolbarRenderProps<T> = {
+    hideToolbar: boolean;
+    onFormSearchSubmit: (params: any) => void;
+    searchNode: React.ReactNode;
+    tableColumn: any[];
+    tooltip?: string | LabelTooltipType;
+    selectedRows: T[];
+    selectedRowKeys: React.Key[] | (string | number)[];
+    headerTitle: React.ReactNode;
+    toolbar: ProTableProps<T, any, any>['toolbar'];
+    options: ProTableProps<T, any, any>['options'];
+    optionsRender?: (props: ToolBarProps<T>, defaultDom: React.ReactNode[]) => React.ReactNode[];
+    toolBarRender?: ToolBarProps<T>['toolBarRender'];
+    actionRef: React.MutableRefObject<ActionType | undefined>;
+};
+/** 这里负责与table交互，并且减少 render次数 */
+declare class ToolbarRender<T> extends React.Component<ToolbarRenderProps<T>> {
+    onSearch: (keyword: string) => void;
+    isEquals: (next: ToolbarRenderProps<T>) => boolean;
+    shouldComponentUpdate: (next: ToolbarRenderProps<T>) => boolean;
+    render: () => import("react/jsx-runtime").JSX.Element | null;
+}
+export default ToolbarRender;