@oceanbase/ui 1.0.0-alpha.2 → 1.0.0-alpha.20

package/lib/SideTip/index.js

@@ -1,53 +1,31 @@
-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/SideTip/index.tsx
-var SideTip_exports = {};
-__export(SideTip_exports, {
-  default: () => SideTip_default
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(SideTip_exports);
-var import_icons = require("@oceanbase/icons");
-var import_design = require("@oceanbase/design");
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
-var import_util = require("../_util");
-var import_Dragger = __toESM(require("./Dragger"));
-var import_IconLoading = __toESM(require("./IconLoading"));
-var import_zh_CN = __toESM(require("./locale/zh-CN"));
-var import_index = require("./index.less");
-var STORE_SIDETIP_HIDE = "ob-sidetip-hide";
-var getLocalStorageKey = (id) => {
-  return [`${STORE_SIDETIP_HIDE}`, id].join("-");
-};
-var SideTip = (props) => {
-  const buttonRef = (0, import_react.createRef)();
+exports.default = void 0;
+var _icons = require("@oceanbase/icons");
+var _design = require("@oceanbase/design");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _LocaleWrapper = _interopRequireDefault(require("../locale/LocaleWrapper"));
+var _style = _interopRequireDefault(require("./style"));
+var _Dragger = _interopRequireDefault(require("./Dragger"));
+var _IconLoading = _interopRequireDefault(require("./IconLoading"));
+var _zhCN = _interopRequireDefault(require("./locale/zh-CN"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const SideTip = props => {
+  const buttonRef = /*#__PURE__*/(0, _react.createRef)();
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_design.ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('sidetip');
+  const {
+    wrapSSR
+  } = (0, _style.default)(prefixCls);
   const {
     defaultHide,
     onClick,
@@ -72,113 +50,179 @@ var SideTip = (props) => {
     hideable = true,
     disabled = false,
     draggable = true,
-    getPopupContainer
+    getPopupContainer,
+    locale
   } = props;
-  const [hide, setHide] = (0, import_react.useState)(
-    hideable ? defaultHide === void 0 ? window.localStorage.getItem(getLocalStorageKey(id)) === "true" : !!defaultHide : false
-  );
-  const [hovered, setHovered] = (0, import_react.useState)(false);
-  (0, import_react.useEffect)(() => {
+  const getLocalStorageKey = (0, _react.useCallback)(localId => {
+    return [`${prefixCls}-hide`, localId].join('-');
+  }, [prefixCls]);
+
+  // Avoid SSR issue: same initial value on server and client, then sync from localStorage in useEffect
+  const [hide, setHide] = (0, _react.useState)(hideable ? !!defaultHide : false);
+  const [hovered, setHovered] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    if (typeof window === 'undefined' || !hideable) return;
+    if (defaultHide === undefined) {
+      setHide(window.localStorage.getItem(getLocalStorageKey(id)) === 'true');
+    }
+  }, [hideable, defaultHide, id, getLocalStorageKey]);
+  (0, _react.useEffect)(() => {
+    if (typeof window === 'undefined') return;
     if (hide) {
-      window.localStorage.setItem(getLocalStorageKey(id), "true");
+      window.localStorage.setItem(getLocalStorageKey(id), 'true');
     } else {
       window.localStorage.removeItem(getLocalStorageKey(id));
     }
-  }, [hide]);
+  }, [hide, id, getLocalStorageKey]);
   const hideSideTip = () => {
     setHide(true);
   };
-  const onButtonClick = (e) => {
+  const onButtonClick = e => {
     if (hide) {
+      // isHide
       setHide(false);
     } else {
-      if (disabled)
-        return;
+      if (disabled) return;
+      // not hide, show iframe
       if (onClick) {
         onClick(e);
       }
     }
   };
-  const handleMouseEnter = (e) => {
+  const handleMouseEnter = e => {
     setHovered(true);
     if (props.onMouseEnter) {
       props.onMouseEnter(e);
     }
   };
-  const handleMouseLeave = (e) => {
+  const handleMouseLeave = e => {
     setHovered(false);
     if (props.onMouseLeave) {
       props.onMouseLeave(e);
     }
   };
-  const getTypeCls = (typeCls2) => {
-    if (typeCls2 === "primary")
-      return "primary";
-    return "";
+  const getTypeCls = typeCls => {
+    if (typeCls === 'primary') return 'primary';
+    return '';
   };
-  const getSizeCls = (sizeCls2) => {
-    if (sizeCls2 === "small")
-      return "small";
-    return "";
+  const getSizeCls = sizeCls => {
+    if (sizeCls === 'small') return 'small';
+    return '';
   };
-  const prefix = (0, import_util.getPrefix)("sidetip");
   const typeCls = getTypeCls(type);
   const sizeCls = getSizeCls(size);
-  const buttonPrefix = `${prefix}-button`;
-  const iconClassName = (0, import_classnames.default)(
-    `${buttonPrefix}-icon`,
-    (open || visible) && `${buttonPrefix}-icon-open`,
-    disabled && `${buttonPrefix}-icon-disabled`,
-    typeCls && `${buttonPrefix}-icon-${typeCls}`,
-    sizeCls && `${buttonPrefix}-icon-${sizeCls}`
-  );
-  const iconDom = /* @__PURE__ */ import_react.default.createElement("span", { className: iconClassName }, import_react.default.isValidElement(icon) ? icon : /* @__PURE__ */ import_react.default.createElement("img", { src: icon, alt: "icon", width: "100%", height: "100%" }));
-  const closeClassName = (0, import_classnames.default)(`${buttonPrefix}-close`, {
+  const toggleAriaLabel = typeof tooltip?.title === 'string' && tooltip.title.trim() ? tooltip.title : locale?.toggleLabel;
+  const onInnerKeyDown = e => {
+    if (disabled) return;
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    e.preventDefault();
+    onButtonClick(e);
+  };
+  const buttonPrefix = `${prefixCls}-button`;
+
+  // icon
+  const iconClassName = (0, _classnames.default)(`${buttonPrefix}-icon`, (open || visible) && `${buttonPrefix}-icon-open`, disabled && `${buttonPrefix}-icon-disabled`, typeCls && `${buttonPrefix}-icon-${typeCls}`, sizeCls && `${buttonPrefix}-icon-${sizeCls}`);
+  // 接受三种形式的icon
+  const iconDom = icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    className: iconClassName,
+    children: /*#__PURE__*/_react.default.isValidElement(icon) ? icon : typeof icon === 'string' && icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      src: icon,
+      alt: "",
+      width: "100%",
+      height: "100%"
+    }) : null
+  }) : null;
+
+  // close 按钮
+  const closeClassName = (0, _classnames.default)(`${buttonPrefix}-close`, {
     [`${buttonPrefix}-close-show`]: open || visible,
     [`${buttonPrefix}-close-${typeCls}`]: typeCls,
     [`${buttonPrefix}-close-${sizeCls}`]: sizeCls
   });
-  const buttonClassName = (0, import_classnames.default)(buttonPrefix, customButtonClassName, {
+  const buttonClassName = (0, _classnames.default)(buttonPrefix, customButtonClassName, {
     [`${buttonPrefix}-disabled`]: disabled,
     [`${buttonPrefix}-${typeCls}`]: typeCls,
     [`${buttonPrefix}-${sizeCls}`]: sizeCls
   });
-  const loadingClassName = (0, import_classnames.default)(`${buttonPrefix}-loading`, {
+  const loadingClassName = (0, _classnames.default)(`${buttonPrefix}-loading`, {
     [`${buttonPrefix}-loading-${typeCls}`]: typeCls,
     [`${buttonPrefix}-loading-${sizeCls}`]: sizeCls
   });
-  const InnerButton = /* @__PURE__ */ import_react.default.createElement("div", { className: buttonClassName, ref: buttonRef, style: buttonStyle }, loading && /* @__PURE__ */ import_react.default.createElement(import_IconLoading.default, { className: loadingClassName }), /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, iconDom, /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, { className: closeClassName })));
-  const BadgeButton = badge ? /* @__PURE__ */ import_react.default.createElement(import_design.Badge, { offset: [-6, 6], ...badge }, InnerButton) : InnerButton;
-  const hideIconClassName = (0, import_classnames.default)(`${prefix}-hide`, {
-    [`${prefix}-hide-hovered`]: hovered
+
+  // 内部 Icon
+  const InnerButton = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: buttonClassName,
+    ref: buttonRef,
+    style: buttonStyle,
+    role: "button",
+    tabIndex: disabled ? -1 : 0,
+    "aria-disabled": disabled || undefined,
+    "aria-expanded": !!(open || visible),
+    "aria-haspopup": "dialog",
+    "aria-label": toggleAriaLabel,
+    onKeyDown: onInnerKeyDown,
+    children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconLoading.default, {
+      className: loadingClassName
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [iconDom, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        "aria-hidden": true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseOutlined, {
+          className: closeClassName
+        })
+      })]
+    })]
+  });
+
+  // 徽标
+  const BadgeButton = badge ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Badge, {
+    offset: [-6, 6],
+    ...badge,
+    children: InnerButton
+  }) : InnerButton;
+  const hideIconClassName = (0, _classnames.default)(`${prefixCls}-hide`, {
+    [`${prefixCls}-hide-hovered`]: hovered
+  });
+
+  // 隐藏按钮
+  const hideIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+    type: "button",
+    id: "ui-mini-hide",
+    onClick: hideSideTip,
+    className: hideIconClassName,
+    "aria-label": locale?.hideFloatingButton,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: `${prefixCls}-hide-icon`,
+      "aria-hidden": true
+    })
+  });
+  const containerClassName = (0, _classnames.default)(className, {
+    [`${prefixCls}-container-disabled`]: disabled
   });
-  const hideIcon = /* @__PURE__ */ import_react.default.createElement("div", { id: "ui-mini-hide", onClick: hideSideTip, className: hideIconClassName }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-hide-icon` }));
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_Dragger.default,
-    {
-      id,
-      open: open || visible,
-      hide,
-      onClick: onButtonClick,
-      onOverlap: hideSideTip,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      style,
-      position,
-      prefix,
-      onDragStart,
-      onDragEnd,
-      onDrag,
-      getPopupContainer,
-      className,
-      draggable
-    },
-    tooltip && tooltip.title ? /* @__PURE__ */ import_react.default.createElement(import_design.Tooltip, { ...tooltip, getPopupContainer: () => buttonRef.current }, BadgeButton) : BadgeButton,
-    hideable && hideIcon,
-    children
-  );
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Dragger.default, {
+    id: id,
+    open: open || visible,
+    hide: hide,
+    onClick: onButtonClick,
+    onOverlap: hideSideTip,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    style: style,
+    position: position,
+    prefix: prefixCls,
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd,
+    onDrag: onDrag,
+    getPopupContainer: getPopupContainer,
+    className: containerClassName,
+    draggable: draggable,
+    children: [tooltip && tooltip.title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Tooltip, {
+      ...tooltip,
+      getPopupContainer: () => buttonRef.current,
+      children: BadgeButton
+    }) : BadgeButton, hideable && hideIcon, children]
+  }));
 };
-var SideTip_default = (0, import_LocaleWrapper.default)({
-  componentName: "SideTip",
-  defaultLocale: import_zh_CN.default
-})(SideTip);
+var _default = exports.default = (0, _LocaleWrapper.default)({
+  componentName: 'SideTip',
+  defaultLocale: _zhCN.default
+})(SideTip);

package/lib/SideTip/locale/en-US.d.ts

@@ -1,2 +1,5 @@
-declare const _default: {};
+declare const _default: {
+    toggleLabel: string;
+    hideFloatingButton: string;
+};
 export default _default;

package/lib/SideTip/locale/en-US.js

@@ -1,25 +1,10 @@
-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);
+"use strict";
 
-// src/SideTip/locale/en-US.ts
-var en_US_exports = {};
-__export(en_US_exports, {
-  default: () => en_US_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(en_US_exports);
-var en_US_default = {};
+exports.default = void 0;
+var _default = exports.default = {
+  toggleLabel: 'Open side tip',
+  hideFloatingButton: 'Hide floating button'
+};

package/lib/SideTip/locale/ja-JP.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    toggleLabel: string;
+    hideFloatingButton: string;
+};
+export default _default;

package/lib/SideTip/locale/ja-JP.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  toggleLabel: 'サイドヒントを開く',
+  hideFloatingButton: 'フローティングボタンを非表示'
+};

package/lib/SideTip/locale/zh-CN.d.ts

@@ -1,2 +1,5 @@
-declare const _default: {};
+declare const _default: {
+    toggleLabel: string;
+    hideFloatingButton: string;
+};
 export default _default;

package/lib/SideTip/locale/zh-CN.js

@@ -1,25 +1,10 @@
-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);
+"use strict";
 
-// src/SideTip/locale/zh-CN.ts
-var zh_CN_exports = {};
-__export(zh_CN_exports, {
-  default: () => zh_CN_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(zh_CN_exports);
-var zh_CN_default = {};
+exports.default = void 0;
+var _default = exports.default = {
+  toggleLabel: '打开侧边提示',
+  hideFloatingButton: '隐藏悬浮按钮'
+};

package/lib/SideTip/locale/zh-TW.d.ts

@@ -1,2 +1,5 @@
-declare const _default: {};
+declare const _default: {
+    toggleLabel: string;
+    hideFloatingButton: string;
+};
 export default _default;

package/lib/SideTip/locale/zh-TW.js

@@ -1,25 +1,10 @@
-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);
+"use strict";
 
-// src/SideTip/locale/zh-TW.ts
-var zh_TW_exports = {};
-__export(zh_TW_exports, {
-  default: () => zh_TW_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(zh_TW_exports);
-var zh_TW_default = {};
+exports.default = void 0;
+var _default = exports.default = {
+  toggleLabel: '開啟側邊提示',
+  hideFloatingButton: '隱藏浮動按鈕'
+};

package/lib/SideTip/style/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { OBToken } from '../../_util/genComponentStyleHook';
+export type SideTipToken = OBToken;
+export declare const genSideTipStyle: GenerateStyle<SideTipToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};
+export default _default;