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

package/es/layout/components/SettingDrawer/index.js

@@ -0,0 +1,518 @@
+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/layout/components/SettingDrawer/index.tsx
+import {
+  CloseOutlined,
+  CopyOutlined,
+  NotificationOutlined,
+  SettingOutlined
+} from "@ant-design/icons";
+import { useUrlSearchParams } from "@umijs/use-params";
+import {
+  Alert,
+  Button,
+  Divider,
+  Drawer,
+  List,
+  Switch,
+  message
+} from "antd";
+import useMergedState from "rc-util/lib/hooks/useMergedState";
+import omit from "rc-util/lib/omit";
+import React, { useEffect, useRef, useState } from "react";
+import { isBrowser, merge } from "../../../utils";
+import { defaultSettings } from "../../defaultSettings";
+import { gLocaleObject, getLanguage } from "../../locales";
+import { genStringToTheme } from "../../utils/utils";
+import { BlockCheckbox } from "./BlockCheckbox";
+import { GroupIcon } from "./icon/group";
+import { SubIcon } from "./icon/sub";
+import { LayoutSetting, renderLayoutSettingItem } from "./LayoutChange";
+import { RegionalSetting } from "./RegionalChange";
+import { useStyle } from "./style/index";
+import { ThemeColor } from "./ThemeColor";
+var Body = ({ children, hashId, prefixCls, title }) => /* @__PURE__ */ React.createElement("div", { style: { marginBlockEnd: 12 } }, /* @__PURE__ */ React.createElement("h3", { className: `${prefixCls}-body-title ${hashId}`.trim() }, title), children);
+var getDifferentSetting = (state) => {
+  const stateObj = {};
+  Object.keys(state).forEach((key) => {
+    if (state[key] !== defaultSettings[key] && //@ts-ignore
+    key !== "collapse") {
+      stateObj[key] = state[key];
+    } else {
+      stateObj[key] = void 0;
+    }
+    if (key.includes("Render"))
+      stateObj[key] = state[key] === false ? false : void 0;
+  });
+  stateObj.menu = void 0;
+  return stateObj;
+};
+var getFormatMessage = () => {
+  const formatMessage = ({
+    id
+  }) => {
+    const locales = gLocaleObject();
+    return locales[id];
+  };
+  return formatMessage;
+};
+var initState = (urlParams, settings, onSettingChange) => {
+  if (!isBrowser())
+    return;
+  const replaceSetting = {};
+  Object.keys(urlParams).forEach((key) => {
+    if (defaultSettings[key] || defaultSettings[key] === void 0) {
+      if (key === "colorPrimary") {
+        replaceSetting[key] = genStringToTheme(urlParams[key]);
+        return;
+      }
+      replaceSetting[key] = urlParams[key];
+    }
+  });
+  const newSettings = merge(
+    {},
+    settings,
+    replaceSetting
+  );
+  delete newSettings.menu;
+  delete newSettings.title;
+  delete newSettings.iconfontUrl;
+  onSettingChange == null ? void 0 : onSettingChange(newSettings);
+};
+var getParamsFromUrl = (urlParams, settings) => {
+  if (!isBrowser())
+    return defaultSettings;
+  return __spreadValues(__spreadValues(__spreadValues({}, defaultSettings), settings || {}), urlParams);
+};
+var genCopySettingJson = (settingState) => JSON.stringify(
+  omit(
+    __spreadProps(__spreadValues({}, settingState), {
+      colorPrimary: settingState.colorPrimary
+    }),
+    ["colorWeak"]
+  ),
+  null,
+  2
+);
+var SettingDrawer = (props) => {
+  const {
+    defaultSettings: propsDefaultSettings = void 0,
+    settings: propsSettings = void 0,
+    hideHintAlert,
+    hideCopyButton,
+    colorList = [
+      { key: "techBlue", color: "#1677FF" },
+      { key: "daybreak", color: "#1890ff" },
+      { key: "dust", color: "#F5222D" },
+      { key: "volcano", color: "#FA541C" },
+      { key: "sunset", color: "#FAAD14" },
+      { key: "cyan", color: "#13C2C2" },
+      { key: "green", color: "#52C41A" },
+      { key: "geekblue", color: "#2F54EB" },
+      { key: "purple", color: "#722ED1" }
+    ],
+    getContainer,
+    onSettingChange,
+    enableDarkTheme,
+    prefixCls = "ant-pro",
+    pathname = isBrowser() ? window.location.pathname : "",
+    disableUrlParams = true,
+    themeOnly,
+    drawerProps
+  } = props;
+  const firstRender = useRef(true);
+  const [open, setOpen] = useMergedState(false, {
+    value: props.collapse,
+    onChange: props.onCollapseChange
+  });
+  const [language, setLanguage] = useState(getLanguage());
+  const [urlParams, setUrlParams] = useUrlSearchParams(
+    {},
+    {
+      disabled: disableUrlParams
+    }
+  );
+  const [settingState, setSettingState] = useMergedState(
+    () => getParamsFromUrl(urlParams, propsSettings || propsDefaultSettings),
+    {
+      value: propsSettings,
+      onChange: onSettingChange
+    }
+  );
+  const { navTheme, colorPrimary, siderMenuType, layout, colorWeak } = settingState || {};
+  useEffect(() => {
+    const onLanguageChange = () => {
+      if (language !== getLanguage()) {
+        setLanguage(getLanguage());
+      }
+    };
+    if (!isBrowser())
+      return () => null;
+    initState(
+      getParamsFromUrl(urlParams, propsSettings),
+      settingState,
+      setSettingState
+    );
+    window.document.addEventListener("languagechange", onLanguageChange, {
+      passive: true
+    });
+    return () => window.document.removeEventListener("languagechange", onLanguageChange);
+  }, []);
+  const changeSetting = (key, value) => {
+    const nextState = {};
+    nextState[key] = value;
+    if (key === "layout") {
+      nextState.contentWidth = value === "top" ? "Fixed" : "Fluid";
+    }
+    if (key === "layout" && value !== "mix") {
+      nextState.splitMenus = false;
+    }
+    if (key === "layout" && value === "mix") {
+      nextState.navTheme = "light";
+    }
+    if (key === "colorWeak" && value === true) {
+      const dom = document.querySelector("body");
+      if (dom) {
+        dom.dataset.prosettingdrawer = dom.style.filter;
+        dom.style.filter = "invert(80%)";
+      }
+    }
+    if (key === "colorWeak" && value === false) {
+      const dom = document.querySelector("body");
+      if (dom) {
+        dom.style.filter = dom.dataset.prosettingdrawer || "none";
+        delete dom.dataset.prosettingdrawer;
+      }
+    }
+    delete nextState.menu;
+    delete nextState.title;
+    delete nextState.iconfontUrl;
+    delete nextState.logo;
+    delete nextState.pwa;
+    setSettingState(__spreadValues(__spreadValues({}, settingState), nextState));
+  };
+  const formatMessage = getFormatMessage();
+  useEffect(() => {
+    if (!isBrowser())
+      return;
+    if (disableUrlParams)
+      return;
+    if (firstRender.current) {
+      firstRender.current = false;
+      return;
+    }
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const params = Object.fromEntries(urlSearchParams.entries());
+    const diffParams = getDifferentSetting(__spreadValues(__spreadValues({}, params), settingState));
+    delete diffParams.logo;
+    delete diffParams.menu;
+    delete diffParams.title;
+    delete diffParams.iconfontUrl;
+    delete diffParams.pwa;
+    setUrlParams(diffParams);
+  }, [setUrlParams, settingState, urlParams, pathname, disableUrlParams]);
+  const baseClassName = `${prefixCls}-setting-drawer`;
+  const { wrapSSR, hashId } = useStyle(baseClassName);
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `${baseClassName}-handle ${hashId}`.trim(),
+        onClick: () => setOpen(!open),
+        style: {
+          width: 48,
+          height: 48
+        }
+      },
+      open ? /* @__PURE__ */ React.createElement(
+        CloseOutlined,
+        {
+          style: {
+            color: "#fff",
+            fontSize: 20
+          }
+        }
+      ) : /* @__PURE__ */ React.createElement(
+        SettingOutlined,
+        {
+          style: {
+            color: "#fff",
+            fontSize: 20
+          }
+        }
+      )
+    ), /* @__PURE__ */ React.createElement(
+      Drawer,
+      __spreadValues({
+        open,
+        width: 300,
+        onClose: () => setOpen(false),
+        closable: false,
+        placement: "right",
+        getContainer,
+        style: {
+          zIndex: 999
+        }
+      }, drawerProps),
+      /* @__PURE__ */ React.createElement("div", { className: `${baseClassName}-drawer-content ${hashId}`.trim() }, /* @__PURE__ */ React.createElement(
+        Body,
+        {
+          title: formatMessage({
+            id: "app.setting.pagestyle",
+            defaultMessage: "Page style setting"
+          }),
+          hashId,
+          prefixCls: baseClassName
+        },
+        /* @__PURE__ */ React.createElement(
+          BlockCheckbox,
+          {
+            hashId,
+            prefixCls: baseClassName,
+            list: [
+              {
+                key: "light",
+                title: formatMessage({
+                  id: "app.setting.pagestyle.light",
+                  defaultMessage: "亮色菜单风格"
+                })
+              },
+              {
+                key: "realDark",
+                title: formatMessage({
+                  id: "app.setting.pagestyle.realdark",
+                  defaultMessage: "暗色菜单风格"
+                })
+              }
+            ].filter((item) => {
+              if (item.key === "dark" && settingState.layout === "mix")
+                return false;
+              if (item.key === "realDark" && !enableDarkTheme)
+                return false;
+              return true;
+            }),
+            value: navTheme,
+            configType: "theme",
+            key: "navTheme",
+            onChange: (value) => changeSetting("navTheme", value)
+          }
+        )
+      ), colorList !== false && /* @__PURE__ */ React.createElement(
+        Body,
+        {
+          hashId,
+          title: formatMessage({
+            id: "app.setting.themecolor",
+            defaultMessage: "Theme color"
+          }),
+          prefixCls: baseClassName
+        },
+        /* @__PURE__ */ React.createElement(
+          ThemeColor,
+          {
+            hashId,
+            prefixCls: baseClassName,
+            colorList,
+            value: genStringToTheme(colorPrimary),
+            formatMessage,
+            onChange: (color) => changeSetting("colorPrimary", color)
+          }
+        )
+      ), !themeOnly && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(
+        Body,
+        {
+          hashId,
+          prefixCls: baseClassName,
+          title: formatMessage({ id: "app.setting.navigationmode" })
+        },
+        /* @__PURE__ */ React.createElement(
+          BlockCheckbox,
+          {
+            prefixCls: baseClassName,
+            value: layout,
+            key: "layout",
+            hashId,
+            configType: "layout",
+            list: [
+              {
+                key: "side",
+                title: formatMessage({ id: "app.setting.sidemenu" })
+              },
+              {
+                key: "top",
+                title: formatMessage({ id: "app.setting.topmenu" })
+              },
+              {
+                key: "mix",
+                title: formatMessage({ id: "app.setting.mixmenu" })
+              }
+            ],
+            onChange: (value) => changeSetting("layout", value)
+          }
+        )
+      ), settingState.layout == "side" || settingState.layout == "mix" ? /* @__PURE__ */ React.createElement(
+        Body,
+        {
+          hashId,
+          prefixCls: baseClassName,
+          title: formatMessage({ id: "app.setting.sidermenutype" })
+        },
+        /* @__PURE__ */ React.createElement(
+          BlockCheckbox,
+          {
+            prefixCls: baseClassName,
+            value: siderMenuType,
+            key: "siderMenuType",
+            hashId,
+            configType: "siderMenuType",
+            list: [
+              {
+                key: "sub",
+                icon: /* @__PURE__ */ React.createElement(SubIcon, null),
+                title: formatMessage({
+                  id: "app.setting.sidermenutype-sub"
+                })
+              },
+              {
+                key: "group",
+                icon: /* @__PURE__ */ React.createElement(GroupIcon, null),
+                title: formatMessage({
+                  id: "app.setting.sidermenutype-group"
+                })
+              }
+            ],
+            onChange: (value) => changeSetting("siderMenuType", value)
+          }
+        )
+      ) : null, /* @__PURE__ */ React.createElement(
+        LayoutSetting,
+        {
+          prefixCls: baseClassName,
+          hashId,
+          settings: settingState,
+          changeSetting
+        }
+      ), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(
+        Body,
+        {
+          hashId,
+          prefixCls: baseClassName,
+          title: formatMessage({ id: "app.setting.regionalsettings" })
+        },
+        /* @__PURE__ */ React.createElement(
+          RegionalSetting,
+          {
+            hashId,
+            prefixCls: baseClassName,
+            settings: settingState,
+            changeSetting
+          }
+        )
+      ), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(
+        Body,
+        {
+          hashId,
+          prefixCls: baseClassName,
+          title: formatMessage({ id: "app.setting.othersettings" })
+        },
+        /* @__PURE__ */ React.createElement(
+          List,
+          {
+            className: `${baseClassName}-list ${hashId}`.trim(),
+            split: false,
+            size: "small",
+            renderItem: renderLayoutSettingItem,
+            dataSource: [
+              {
+                title: formatMessage({ id: "app.setting.weakmode" }),
+                action: /* @__PURE__ */ React.createElement(
+                  Switch,
+                  {
+                    size: "small",
+                    className: "color-weak",
+                    checked: !!colorWeak,
+                    onChange: (checked) => {
+                      changeSetting("colorWeak", checked);
+                    }
+                  }
+                )
+              }
+            ]
+          }
+        )
+      ), hideHintAlert && hideCopyButton ? null : /* @__PURE__ */ React.createElement(Divider, null), hideHintAlert ? null : /* @__PURE__ */ React.createElement(
+        Alert,
+        {
+          type: "warning",
+          message: formatMessage({
+            id: "app.setting.production.hint"
+          }),
+          icon: /* @__PURE__ */ React.createElement(NotificationOutlined, null),
+          showIcon: true,
+          style: { marginBlockEnd: 16 }
+        }
+      ), hideCopyButton ? null : /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          block: true,
+          icon: /* @__PURE__ */ React.createElement(CopyOutlined, null),
+          style: { marginBlockEnd: 24 },
+          onClick: () => __async(void 0, null, function* () {
+            try {
+              yield navigator.clipboard.writeText(
+                genCopySettingJson(settingState)
+              );
+              message.success(
+                formatMessage({ id: "app.setting.copyinfo" })
+              );
+            } catch (error) {
+            }
+          })
+        },
+        formatMessage({ id: "app.setting.copy" })
+      )))
+    ))
+  );
+};
+export {
+  SettingDrawer,
+  getFormatMessage
+};

package/es/layout/components/SettingDrawer/style/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ProAliasToken } from '../../../../provider';
+export interface SettingDrawerToken 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/layout/components/SettingDrawer/style/index.js

@@ -0,0 +1,163 @@
+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/layout/components/SettingDrawer/style/index.ts
+import { useStyle as useAntdStyle } from "../../../../provider";
+var genSettingDrawerStyle = (token) => {
+  return {
+    [`${token.componentCls}-handle`]: {
+      position: "fixed",
+      insetBlockStart: "240px",
+      insetInlineEnd: "0px",
+      zIndex: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "48px",
+      height: "48px",
+      fontSize: "16px",
+      textAlign: "center",
+      backgroundColor: token.colorPrimary,
+      borderEndStartRadius: token.borderRadiusLG,
+      borderStartStartRadius: token.borderRadiusLG,
+      "-webkit-backdropilter": "saturate(180%) blur(20px)",
+      backdropFilter: "saturate(180%) blur(20px)",
+      cursor: "pointer",
+      pointerEvents: "auto"
+    },
+    [token.componentCls]: {
+      "&-content": {
+        position: "relative",
+        minHeight: "100%",
+        color: token.colorText
+      },
+      "&-body-title": {
+        marginBlock: token.marginXS,
+        fontSize: "14px",
+        lineHeight: "22px",
+        color: token.colorTextHeading
+      },
+      "&-block-checkbox": {
+        display: "flex",
+        minHeight: 42,
+        gap: token.marginSM,
+        "& &-item": {
+          position: "relative",
+          width: "44px",
+          height: "36px",
+          overflow: "hidden",
+          borderRadius: "4px",
+          boxShadow: token.boxShadow,
+          cursor: "pointer",
+          fontSize: 56,
+          lineHeight: "56px",
+          "&::before": {
+            position: "absolute",
+            insetBlockStart: 0,
+            insetInlineStart: 0,
+            width: "33%",
+            height: "100%",
+            content: "''"
+          },
+          "&::after": {
+            position: "absolute",
+            insetBlockStart: 0,
+            insetInlineStart: 0,
+            width: "100%",
+            height: "25%",
+            content: "''"
+          },
+          "&-realDark": {
+            backgroundColor: "rgba(0, 21, 41, 0.85)",
+            "&::before": { backgroundColor: "rgba(0, 0, 0, 0.65)" },
+            "&::after": { backgroundColor: "rgba(0, 0, 0, 0.85)" }
+          },
+          "&-light": {
+            backgroundColor: "#fff",
+            "&::before": { backgroundColor: "#fff" },
+            "&::after": { backgroundColor: "#fff" }
+          },
+          "&-dark,&-side": {
+            backgroundColor: token.colorBgElevated,
+            "&::before": { zIndex: "1", backgroundColor: "#001529" },
+            "&::after": { backgroundColor: token.colorBgContainer }
+          },
+          "&-top": {
+            backgroundColor: token.colorBgElevated,
+            "&::before": { backgroundColor: "transparent" },
+            "&::after": { backgroundColor: "#001529" }
+          },
+          "&-mix": {
+            backgroundColor: token.colorBgElevated,
+            "&::before": { backgroundColor: token.colorBgContainer },
+            "&::after": { backgroundColor: "#001529" }
+          }
+        },
+        "& &-selectIcon": {
+          position: "absolute",
+          insetInlineEnd: "6px",
+          bottom: "4px",
+          color: token.colorPrimary,
+          fontWeight: "bold",
+          fontSize: "14px",
+          pointerEvents: "none",
+          ".action": { color: token.colorPrimary }
+        },
+        "& &-icon": {
+          fontSize: 56,
+          lineHeight: "56px"
+        }
+      },
+      "&-theme-color": {
+        marginBlockStart: "16px",
+        overflow: "hidden",
+        "& &-block": {
+          float: "left",
+          width: "20px",
+          height: "20px",
+          marginBlockStart: 8,
+          marginInlineEnd: 8,
+          color: "#fff",
+          fontWeight: "bold",
+          textAlign: "center",
+          borderRadius: "2px",
+          cursor: "pointer"
+        }
+      },
+      "&-list": {
+        [`li${token.antCls}-list-item`]: {
+          paddingInline: 0,
+          paddingBlock: 8
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useAntdStyle("ProLayoutSettingDrawer", (token) => {
+    const settingDrawerToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genSettingDrawerStyle(settingDrawerToken)];
+  });
+}
+export {
+  useStyle
+};

package/es/layout/components/SiderMenu/Arrow.d.ts

@@ -0,0 +1,2 @@
+declare function ArrowSvgIcon(): import("react/jsx-runtime").JSX.Element;
+export { ArrowSvgIcon };