@oceanbase/design 0.2.13 → 0.2.14

package/es/tabs/index.js

@@ -42,9 +42,8 @@ var Tabs = function Tabs(_ref) {
     getPrefixCls = _useContext.getPrefixCls;
   var prefixCls = getPrefixCls('tabs', customizePrefixCls);
   var _useStyle = useStyle(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var tabsCls = classNames(className, hashId);
+    wrapSSR = _useStyle.wrapSSR;
+  var tabsCls = classNames(className);
   var ref = useRef();
   var isHorizontal = !tabPosition || tabPosition === 'top' || tabPosition === 'bottom';
   var newItems = items === null || items === void 0 ? void 0 : items.map(function (item) {
@@ -81,7 +80,9 @@ var Tabs = function Tabs(_ref) {
     tabPosition: tabPosition,
     containerRef: ref
   });
-  return wrapSSR( /*#__PURE__*/React.createElement(AntTabs, _extends({
+  return wrapSSR( /*#__PURE__*/React.createElement(AntTabs
+  // @ts-ignore
+  , _extends({
     ref: ref,
     items: newItems,
     defaultActiveKey: defaultActiveKey,

package/es/tabs/style/index.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
 export type TabsToken = FullToken<'Tabs'>;
-export declare const genTagStyle: GenerateStyle<TabsToken>;
+export type CardToken = FullToken<'Card'>;
+export declare const genTagStyle: GenerateStyle<TabsToken | CardToken>;
 declare const _default: (prefixCls: string) => {
     wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;

package/es/theme/index.d.ts

@@ -50,54 +50,6 @@ declare const _default: {
         gold: string;
     };
     defaultConfig: {
-        defaultSeed: {
-            colorPrimary: string;
-            colorInfo: string;
-            colorSuccess: string;
-            colorWarning: string;
-            colorError: string;
-            borderRadius: number;
-            blue: string;
-            green: string;
-            yellow: string;
-            red: string;
-            colorTextBase: string;
-            colorBgBase: string;
-            colorLink: string;
-            fontFamily: string;
-            fontFamilyCode: string;
-            fontSize: number;
-            lineWidth: number;
-            lineType: string;
-            sizeUnit: number;
-            sizeStep: number;
-            sizePopupArrow: number;
-            controlHeight: number;
-            zIndexBase: number;
-            zIndexPopupBase: number;
-            opacityImage: number;
-            motionUnit: number;
-            motionBase: number;
-            motionEaseOutCirc: string;
-            motionEaseInOutCirc: string;
-            motionEaseInOut: string;
-            motionEaseOutBack: string;
-            motionEaseInBack: string;
-            motionEaseInQuint: string;
-            motionEaseOutQuint: string;
-            motionEaseOut: string;
-            wireframe: boolean;
-            motion: boolean;
-            purple: string;
-            cyan: string;
-            magenta: string;
-            pink: string;
-            orange: string;
-            volcano: string;
-            geekblue: string;
-            lime: string;
-            gold: string;
-        };
         token: import("antd/es/theme/internal").SeedToken;
         hashed: boolean;
     };

package/es/theme/index.js

@@ -20,11 +20,13 @@ var defaultSeed = _objectSpread(_objectSpread({}, theme.defaultSeed), {}, {
   yellow: '#ffac33',
   red: '#ff4b4b'
 });
+
+// should use reference assign instead of clone assign
+var defaultConfig = theme.defaultConfig;
+defaultConfig.token = defaultSeed;
 export default _objectSpread(_objectSpread({}, theme), {}, {
   defaultSeed: defaultSeed,
-  defaultConfig: _objectSpread(_objectSpread({}, theme.defaultConfig), {}, {
-    defaultSeed: defaultSeed
-  }),
+  defaultConfig: defaultConfig,
   components: {
     InputNumber: {
       handleVisible: true

package/es/theme/internal.d.ts

@@ -0,0 +1 @@
+export * from 'antd/es/theme/internal';

package/es/theme/internal.js

@@ -0,0 +1 @@
+export * from 'antd/es/theme/internal';

package/es/tooltip/MouseTooltip.js

@@ -94,7 +94,7 @@ var MouseTooltip = function MouseTooltip(_ref) {
     }, restOverlayInnerStyle)
   }, restProps), /*#__PURE__*/React.createElement("div", {
     ref: ref
-  }, title)));
+  }, typeof title === 'function' ? title() : title)));
 };
 if (process.env.NODE_ENV !== 'production') {
   MouseTooltip.displayName = 'MouseTooltip';

package/lib/_util/genComponentStyleHook.d.ts

@@ -2,8 +2,10 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { ComponentTokenMap } from 'antd/es/theme/interface';
 import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { GlobalToken } from 'antd/es/theme/interface';
+import type { OverrideTokenWithoutDerivative } from 'antd/es/theme/util/genComponentStyleHook';
 export type ComponentName = keyof ComponentTokenMap;
-export declare function genComponentStyleHook(componentName: ComponentName, styleFn: GenerateStyle<FullToken<ComponentName>>): (prefixCls: string) => {
+export declare function genComponentStyleHook(componentName: ComponentName, styleFn: GenerateStyle<FullToken<ComponentName>>, getDefaultToken?: OverrideTokenWithoutDerivative[ComponentName] | ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName])): (prefixCls: string) => {
     wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     hashId: string;
 };

package/lib/_util/genComponentStyleHook.js

@@ -23,11 +23,15 @@ __export(genComponentStyleHook_exports, {
 });
 module.exports = __toCommonJS(genComponentStyleHook_exports);
 var import_internal = require("antd/es/theme/internal");
-function genComponentStyleHook(componentName, styleFn) {
+function genComponentStyleHook(componentName, styleFn, getDefaultToken) {
   return (prefixCls) => {
-    const useStyle = (0, import_internal.genComponentStyleHook)(`OB-${componentName}`, (token) => {
-      return [styleFn(token)];
-    });
+    const useStyle = (0, import_internal.genComponentStyleHook)(
+      `OB-${componentName}`,
+      (token) => {
+        return [styleFn(token)];
+      },
+      getDefaultToken
+    );
     const [wrapSSR, hashId] = useStyle(prefixCls);
     return {
       wrapSSR,

package/lib/alert/index.js

@@ -48,14 +48,13 @@ var Alert = ({
 }) => {
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
   const prefixCls = getPrefixCls("alert", customizePrefixCls);
-  const { wrapSSR, hashId } = (0, import_style.default)(prefixCls);
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
   const alertCls = (0, import_classnames.default)(
     {
       [`${prefixCls}-ghost`]: ghost,
       [`${prefixCls}-colored`]: colored
     },
-    className,
-    hashId
+    className
   );
   return wrapSSR(/* @__PURE__ */ import_react.default.createElement(import_antd.Alert, { prefixCls: customizePrefixCls, className: alertCls, ...restProps }));
 };

package/lib/alert/style/index.js

@@ -75,9 +75,28 @@ var genAlertStyle = (token) => {
     colorWarning,
     colorWarningHover,
     colorError,
-    colorErrorHover
+    colorErrorHover,
+    colorIcon,
+    colorIconHover,
+    motionDurationMid
   } = token;
+  const height = token.fontSize * token.lineHeight;
   return {
+    [`${componentCls}`]: {
+      // vertical align to flex-start
+      alignItems: "flex-start",
+      [`${componentCls}-icon`]: {
+        height
+      },
+      [`${componentCls}-close-icon`]: {
+        height,
+        color: colorIcon,
+        transition: `color ${motionDurationMid}`,
+        "&:hover": {
+          color: colorIconHover
+        }
+      }
+    },
     [`${componentCls}${componentCls}-with-description`]: {
       paddingBlock: token.padding,
       [`${componentCls}-message`]: {

package/lib/button/index.d.ts

@@ -5,7 +5,7 @@ export type ButtonProps = AntButtonProps;
 declare const Button: {
     ({ prefixCls: customizePrefixCls, className, ...restProps }: ButtonProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     Group: React.FC<import("antd/es/button").ButtonGroupProps>;
-    __ANT_BUTTON: any;
+    __ANT_BUTTON: boolean;
     displayName: string;
 };
 export default Button;

package/lib/button/index.js

@@ -42,8 +42,8 @@ __reExport(button_exports, require("antd/es/button"), module.exports);
 var Button = ({ prefixCls: customizePrefixCls, className, ...restProps }) => {
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
   const prefixCls = getPrefixCls("btn", customizePrefixCls);
-  const { wrapSSR, hashId } = (0, import_style.default)(prefixCls);
-  const buttonCls = (0, import_classnames.default)(className, hashId);
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  const buttonCls = (0, import_classnames.default)(className);
   return wrapSSR(/* @__PURE__ */ import_react.default.createElement(import_antd.Button, { prefixCls: customizePrefixCls, className: buttonCls, ...restProps }));
 };
 Button.Group = import_antd.Button.Group;

package/lib/card/index.js

@@ -57,13 +57,12 @@ var Card = ({
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
   const prefixCls = getPrefixCls("card", customizePrefixCls);
   const tabsPrefixCls = getPrefixCls("tabs", customizePrefixCls);
-  const { wrapSSR, hashId } = (0, import_style.default)(prefixCls, tabsPrefixCls);
+  const { wrapSSR } = (0, import_style.default)(prefixCls, tabsPrefixCls);
   const cardCls = (0, import_classnames.default)(
     {
       [`${prefixCls}-no-divider`]: !divided
     },
-    className,
-    hashId
+    className
   );
   const ref = (0, import_react.useRef)();
   const newTabList = tabList == null ? void 0 : tabList.map((item) => {

package/lib/card/style/index.js

@@ -44,13 +44,11 @@ var genCardStyle = (token) => {
       }
     },
     [`${componentCls}${componentCls}-contain-tabs`]: {
-      [`${componentCls}-head`]: {
-        ...(0, import_style.genTagStyle)({
-          ...token,
-          componentCls: tabsComponentCls,
-          prefixCls: tabsPrefixCls
-        })
-      }
+      [`${componentCls}-head`]: (0, import_style.genTagStyle)({
+        ...token,
+        componentCls: tabsComponentCls,
+        prefixCls: tabsPrefixCls
+      })
     }
   };
 };

package/lib/config-provider/index.d.ts

@@ -1,21 +1,30 @@
 import React from 'react';
-import type { ConfigProviderProps as AntConfigProviderProps, ThemeConfig as AntThemeConfig } from 'antd/es/config-provider';
+import type { ConfigProviderProps as AntConfigProviderProps, ConfigConsumerProps as AntConfigConsumerProps, ThemeConfig as AntThemeConfig } from 'antd/es/config-provider';
+import type { ComponentStyleConfig } from 'antd/es/config-provider/context';
+import type { SpinIndicator } from 'antd/es/spin';
 import type { NavigateFunction } from './navigate';
 export * from './navigate';
 export * from 'antd/es/config-provider';
 export interface ThemeConfig extends AntThemeConfig {
     isDark?: boolean;
 }
+export type SpinConfig = ComponentStyleConfig & {
+    indicator?: SpinIndicator;
+};
+export interface ConfigConsumerProps extends AntConfigConsumerProps {
+    spin?: SpinConfig;
+}
 export interface ConfigProviderProps extends AntConfigProviderProps {
     theme?: ThemeConfig;
     navigate?: NavigateFunction;
+    spin?: SpinConfig;
 }
 export interface ExtendedConfigConsumerProps {
     navigate?: NavigateFunction;
 }
 declare const ConfigProvider: {
-    ({ children, theme, navigate, ...restProps }: ConfigProviderProps): React.JSX.Element;
-    ConfigContext: React.Context<import("antd/es/config-provider").ConfigConsumerProps>;
+    ({ children, theme, navigate, spin, ...restProps }: ConfigProviderProps): React.JSX.Element;
+    ConfigContext: React.Context<ConfigConsumerProps>;
     ExtendedConfigContext: React.Context<ExtendedConfigConsumerProps>;
     SizeContext: React.Context<import("antd/es/button").ButtonSize>;
     config: ({ prefixCls, iconPrefixCls, theme, }: Pick<AntConfigProviderProps, "prefixCls" | "iconPrefixCls"> & {

package/lib/config-provider/index.js

@@ -44,11 +44,12 @@ var ExtendedConfigContext = import_react.default.createContext({
   navigate: void 0
 });
 var { defaultSeed, components } = import_theme.default;
-var ConfigProvider = ({ children, theme, navigate, ...restProps }) => {
+var ConfigProvider = ({ children, theme, navigate, spin, ...restProps }) => {
   var _a;
   return /* @__PURE__ */ import_react.default.createElement(
     import_antd.ConfigProvider,
     {
+      spin,
       theme: {
         ...theme,
         // Only set seed token for dark theme

package/lib/descriptions/index.js

@@ -35,7 +35,6 @@ __export(descriptions_exports, {
 module.exports = __toCommonJS(descriptions_exports);
 var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
-var import_lodash = require("lodash");
 var import_toArray = __toESM(require("rc-util/lib/Children/toArray"));
 var import_react = __toESM(require("react"));
 var import_config_provider = __toESM(require("../config-provider"));
@@ -52,8 +51,8 @@ var Descriptions = ({
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
   const prefixCls = getPrefixCls("descriptions", customizePrefixCls);
   const typographyPrefixCls = getPrefixCls("typography", customizePrefixCls);
-  const { wrapSSR, hashId } = (0, import_style.default)(prefixCls, typographyPrefixCls);
-  const descriptionsCls = (0, import_classnames.default)(className, hashId);
+  const { wrapSSR } = (0, import_style.default)(prefixCls, typographyPrefixCls);
+  const descriptionsCls = (0, import_classnames.default)(className);
   const newChildren = bordered ? children : (0, import_toArray.default)(children).map((node) => {
     if (import_react.default.isValidElement(node)) {
       const { props } = node;
@@ -74,14 +73,14 @@ var Descriptions = ({
             import_antd.Typography.Text,
             {
               ...restContentProps,
-              ellipsis: (0, import_lodash.isObject)(ellipsis) ? {
+              ellipsis: typeof ellipsis === "object" ? {
                 ...ellipsis,
                 tooltip: (
                   // 如果目标元素已经被 Tooltip 包裹，则去掉默认的 Tooltip，避免有两个 Tooltip
                   (itemChildrenType == null ? void 0 : itemChildrenType.__ANT_TOOLTIP) ? void 0 : {
                     ...defaultEllipsis.tooltip,
                     // TooltipProps
-                    ...(0, import_lodash.isObject)(ellipsis.tooltip) && !(0, import_react.isValidElement)(ellipsis.tooltip) ? ellipsis.tooltip : {
+                    ...typeof ellipsis.tooltip === "object" && !(0, import_react.isValidElement)(ellipsis.tooltip) ? ellipsis.tooltip : {
                       title: ellipsis.tooltip
                     }
                   }

package/lib/index.d.ts

@@ -14,6 +14,7 @@ export { default as Tabs } from './tabs';
 export { default as theme } from './theme';
 export { default as Tooltip } from './tooltip';
 export { default as Breadcrumb } from './breadcrumb';
+export { default as Spin } from './spin';
 declare const useToken: () => {
     theme: import("@ant-design/cssinjs").Theme<import("antd/es/theme/interface/seeds").SeedToken, import("antd/es/theme/interface").MapToken>;
     token: import("antd").GlobalToken;

package/lib/index.js

@@ -38,6 +38,7 @@ __export(src_exports, {
   Descriptions: () => import_descriptions.default,
   Form: () => import_form.default,
   Modal: () => import_modal.default,
+  Spin: () => import_spin.default,
   Table: () => import_table.default,
   Tabs: () => import_tabs.default,
   Tooltip: () => import_tooltip.default,
@@ -66,6 +67,7 @@ var import_tabs = __toESM(require("./tabs"));
 var import_theme = __toESM(require("./theme"));
 var import_tooltip = __toESM(require("./tooltip"));
 var import_breadcrumb = __toESM(require("./breadcrumb"));
+var import_spin = __toESM(require("./spin"));
 var { useToken } = import_antd.theme;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -77,6 +79,7 @@ var { useToken } = import_antd.theme;
   Descriptions,
   Form,
   Modal,
+  Spin,
   Table,
   Tabs,
   Tooltip,

package/lib/lottie/index.d.ts

@@ -0,0 +1,16 @@
+import type { AnimationConfig, AnimationItem } from 'lottie-web';
+import React from 'react';
+export interface LottieProps extends Omit<AnimationConfig, 'container'> {
+    path?: string;
+    animationData?: any;
+    mode?: 'default' | 'icon';
+    loop?: boolean;
+    speed?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface LottieRef {
+    animation: AnimationItem;
+}
+declare const Lottie: React.ForwardRefExoticComponent<LottieProps & React.RefAttributes<LottieRef>>;
+export default Lottie;

package/lib/lottie/index.js

@@ -0,0 +1,79 @@
+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/lottie/index.tsx
+var lottie_exports = {};
+__export(lottie_exports, {
+  default: () => lottie_default
+});
+module.exports = __toCommonJS(lottie_exports);
+var import_lottie_web = __toESM(require("lottie-web"));
+var import_react = __toESM(require("react"));
+var import_ahooks = require("ahooks");
+var import_classnames = __toESM(require("classnames"));
+var Lottie = import_react.default.forwardRef(
+  ({ mode = "default", loop = true, speed = 1, className, style, ...restProps }, ref) => {
+    const [animation, setAnimation] = (0, import_react.useState)();
+    const containerRef = (0, import_react.useRef)();
+    (0, import_react.useEffect)(() => {
+      if (!animation) {
+        const newAnimation = import_lottie_web.default.loadAnimation({
+          container: containerRef.current,
+          renderer: "svg",
+          loop,
+          ...restProps
+        });
+        setAnimation(newAnimation);
+      }
+    }, []);
+    (0, import_ahooks.useUpdateEffect)(() => {
+      if (animation) {
+        animation.setLoop(loop);
+        animation.setSpeed(speed);
+      }
+    }, [loop, speed]);
+    (0, import_react.useImperativeHandle)(ref, () => ({
+      animation
+    }));
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        ref: containerRef,
+        className: (0, import_classnames.default)(className, {
+          // 图标展示模式，则追加 anticon 类名
+          ["anticon"]: mode === "icon"
+        }),
+        style: {
+          display: "inline-block",
+          ...style
+        }
+      }
+    );
+  }
+);
+var lottie_default = Lottie;

package/lib/modal/index.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 export * from 'antd/es/modal';
 export type ModalProps = AntModalProps;
 declare const Modal: {
-    ({ prefixCls: customizePrefixCls, className, rootClassName, ...restProps }: ModalProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    ({ prefixCls: customizePrefixCls, className, rootClassName, title, footer, ...restProps }: ModalProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
     info(props: any): {
         destroy: () => void;
         update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;

package/lib/modal/index.js

@@ -44,19 +44,23 @@ var Modal = ({
   prefixCls: customizePrefixCls,
   className,
   rootClassName,
+  title,
+  footer,
   ...restProps
 }) => {
   const { getPrefixCls } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
   const prefixCls = getPrefixCls("modal", customizePrefixCls);
-  const { wrapSSR, hashId } = (0, import_style.default)(prefixCls);
-  const modalCls = (0, import_classnames.default)(className, hashId);
+  const { wrapSSR } = (0, import_style.default)(prefixCls);
+  const modalCls = (0, import_classnames.default)(className);
   return wrapSSR(
     /* @__PURE__ */ import_react.default.createElement(
       import_antd.Modal,
       {
         prefixCls: customizePrefixCls,
         className: modalCls,
-        rootClassName: (0, import_classnames.default)(rootClassName, hashId),
+        rootClassName: (0, import_classnames.default)(rootClassName),
+        title,
+        footer,
         ...restProps
       }
     )

package/lib/modal/style/index.js

@@ -25,15 +25,40 @@ __export(style_exports, {
 module.exports = __toCommonJS(style_exports);
 var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
 var genModalStyle = (token) => {
-  const { componentCls, marginLG } = token;
+  const {
+    componentCls,
+    marginSM,
+    marginLG,
+    paddingMD,
+    borderRadius,
+    controlHeight,
+    fontSizeHeading5,
+    lineHeightHeading5
+  } = token;
+  const top = 100;
+  const bottom = 100;
+  const titleHeight = fontSizeHeading5 * lineHeightHeading5;
   return {
     [`${componentCls}:not(${componentCls}-confirm)`]: {
       [`${componentCls}-header`]: {
         marginBottom: marginLG
       },
+      [`${componentCls}-body`]: {
+        maxHeight: `calc(100vh - ${top + bottom}px - ${paddingMD * 2}px - ${marginLG * 2}px - ${titleHeight + controlHeight}px)`,
+        overflowY: "auto",
+        borderRadius
+      },
       [`${componentCls}-footer`]: {
         marginTop: marginLG
       }
+    },
+    [`${componentCls}-confirm`]: {
+      [`${componentCls}-body ${componentCls}-confirm-title +${componentCls}-confirm-content`]: {
+        marginBlockStart: marginSM
+      },
+      [`${componentCls}-confirm-btns`]: {
+        marginTop: marginLG
+      }
     }
   };
 };