@oceanbase/ui 1.0.0-alpha.1 → 1.0.0-alpha.11

package/lib/SideTip/style/index.js

@@ -0,0 +1,195 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.genSideTipStyle = exports.default = void 0;
+var _genComponentStyleHook = require("../../_util/genComponentStyleHook");
+const genSideTipStyle = token => {
+  const {
+    componentCls,
+    boxShadowSecondary,
+    colorTextQuaternary,
+    colorTextSecondary
+  } = token;
+  return {
+    [`${componentCls}-container`]: {
+      position: 'fixed',
+      zIndex: 0,
+      fontSize: 14,
+      cursor: 'pointer',
+      insetInlineEnd: 24,
+      insetBlockEnd: 24,
+      [`&.${componentCls}-container-dragged`]: {
+        cursor: 'grab'
+      },
+      [`&.${componentCls}-container-disabled`]: {
+        cursor: 'not-allowed'
+      },
+      [`&.${componentCls}-container-hide`]: {
+        transition: 'all 0.3s'
+      },
+      '@media screen and (max-width: 768px)': {
+        display: 'none'
+      },
+      [`&.${componentCls}-container-hide-not-dragged:hover`]: {
+        insetInlineEnd: '0 !important'
+      },
+      [`${componentCls}-hide`]: {
+        position: 'absolute',
+        zIndex: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 20,
+        height: 20,
+        background: 'rgba(0, 0, 0, 0.15)',
+        borderRadius: 20,
+        transform: 'scale(0)',
+        cursor: 'pointer',
+        opacity: 0,
+        transition: 'all 0.18s ease-out 0.18s',
+        insetBlockStart: 0,
+        insetInlineEnd: -22,
+        '&:hover': {
+          background: 'rgba(0, 0, 0, 0.35)'
+        },
+        [`${componentCls}-hide-icon`]: {
+          width: 6,
+          height: 2,
+          background: '#fff',
+          borderRadius: 4
+        },
+        [`&.${componentCls}-hide-hovered`]: {
+          transform: 'scale(1)',
+          opacity: 1
+        }
+      },
+      [`${componentCls}-button`]: {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: 56,
+        height: 56,
+        backgroundColor: '#fff',
+        borderRadius: '50%',
+        boxShadow: boxShadowSecondary,
+        cursor: 'pointer',
+        transition: 'background-color 0.2s ease 0.1s, opacity 0.2s ease 0s, transform 0.2s ease 0.1s',
+        userSelect: 'none',
+        [`&${componentCls}-button-primary`]: {
+          backgroundColor: `${token.colorPrimary} !important`
+        },
+        [`&${componentCls}-button-small`]: {
+          width: 40,
+          height: 40
+        },
+        [`&${componentCls}-button-disabled`]: {
+          backgroundColor: `${colorTextQuaternary} !important`,
+          cursor: 'not-allowed'
+        },
+        '&:hover': {
+          opacity: 1
+        },
+        [`${componentCls}-button-loading`]: {
+          position: 'absolute',
+          width: 56,
+          height: 56,
+          color: token.colorPrimary,
+          fontSize: 56,
+          insetBlockStart: 0,
+          insetInlineEnd: 0,
+          [`&${componentCls}-button-loading-primary`]: {
+            color: '#fff'
+          },
+          [`&${componentCls}-button-loading-small`]: {
+            width: 40,
+            height: 40,
+            fontSize: 40,
+            lineHeight: 40
+          }
+        },
+        [`${componentCls}-button-close`]: {
+          position: 'absolute',
+          width: 24,
+          height: 24,
+          color: colorTextSecondary,
+          fontSize: 24,
+          transform: 'translate(-50%, -50%) scale(0.4) rotate(-45deg)',
+          opacity: 0,
+          transition: 'all 0.3s linear',
+          userSelect: 'none',
+          insetBlockStart: '50%',
+          insetInlineStart: '50%',
+          [`&.${componentCls}-button-close-primary`]: {
+            color: '#fff'
+          },
+          [`&.${componentCls}-button-close-show`]: {
+            transform: 'translate(-50%, -50%)',
+            opacity: 1
+          },
+          [`&.${componentCls}-button-close-small`]: {
+            width: 16,
+            height: 16,
+            fontSize: 16,
+            lineHeight: 16
+          }
+        },
+        [`${componentCls}-button-icon`]: {
+          position: 'absolute',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: 24,
+          height: 24,
+          color: colorTextSecondary,
+          fontSize: 24,
+          lineHeight: 24,
+          transform: 'translate(-50%, -50%)',
+          opacity: 1,
+          transition: 'all 0.3s linear',
+          userSelect: 'none',
+          insetBlockStart: '50%',
+          insetInlineStart: '50%',
+          '> *': {
+            fontSize: 'inherit',
+            color: 'inherit'
+          },
+          img: {
+            width: '100%',
+            height: '100%',
+            objectFit: 'contain'
+          },
+          [`&.${componentCls}-button-icon-open`]: {
+            transform: 'translate(-50%, -50%) scale(0.4) rotate(45deg)',
+            opacity: 0
+          },
+          [`&.${componentCls}-button-icon-disabled`]: {
+            color: colorTextQuaternary
+          },
+          [`&${componentCls}-button-icon-primary`]: {
+            color: '#fff !important',
+            '> *': {
+              color: '#fff !important'
+            }
+          },
+          [`&${componentCls}-button-icon-small`]: {
+            width: 16,
+            height: 16,
+            fontSize: 16,
+            lineHeight: 16
+          }
+        }
+      }
+    }
+  };
+};
+exports.genSideTipStyle = genSideTipStyle;
+var _default = prefixCls => {
+  const useStyle = (0, _genComponentStyleHook.genComponentStyleHook)('SideTip', token => {
+    return [genSideTipStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+exports.default = _default;

package/lib/SideTip/utils.js

@@ -1,32 +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/utils.ts
-var utils_exports = {};
-__export(utils_exports, {
-  getClientHeight: () => getClientHeight,
-  getClientWidth: () => getClientWidth,
-  getScrollBarSize: () => getScrollBarSize,
-  getScrollOffsets: () => getScrollOffsets,
-  isFixedElem: () => isFixedElem
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(utils_exports);
-var getScrollOffsets = (dom) => {
+exports.isFixedElem = exports.getScrollOffsets = exports.getScrollBarSize = exports.getClientWidth = exports.getClientHeight = void 0;
+const getScrollOffsets = dom => {
   if (window.pageXOffset != null) {
     return {
       x: window.pageXOffset,
@@ -39,25 +17,31 @@ var getScrollOffsets = (dom) => {
       y: dom.scrollTop
     };
   }
-  const { document: document2 } = window;
-  if (document2.compatMode === "CSS1Compat") {
+
+  // For IE (or any browser) in Standards mode
+  const {
+    document
+  } = window;
+  if (document.compatMode === 'CSS1Compat') {
     return {
-      x: document2.documentElement.scrollLeft,
-      y: document2.documentElement.scrollTop
+      x: document.documentElement.scrollLeft,
+      y: document.documentElement.scrollTop
     };
   }
   return {
-    x: document2.body.scrollLeft,
-    y: document2.body.scrollTop
+    x: document.body.scrollLeft,
+    y: document.body.scrollTop
   };
 };
-var getClientHeight = (dom) => {
+exports.getScrollOffsets = getScrollOffsets;
+const getClientHeight = dom => {
   if (dom) {
     return dom.clientHeight;
   }
   return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
 };
-var getClientWidth = (dom) => {
+exports.getClientHeight = getClientHeight;
+const getClientWidth = dom => {
   if (dom) {
     return dom.clientWidth;
   }
@@ -66,27 +50,28 @@ var getClientWidth = (dom) => {
   }
   return document.body.clientWidth;
 };
-var cached;
-var getScrollBarSize = (fresh, dom = document.body) => {
+exports.getClientWidth = getClientWidth;
+let cached;
+const getScrollBarSize = (fresh, dom = document.body) => {
   if (window.innerWidth > dom.offsetWidth) {
-    if (fresh || cached === void 0) {
-      const inner = document.createElement("div");
-      inner.style.width = "100%";
-      inner.style.height = "200px";
-      const outer = document.createElement("div");
+    if (fresh || cached === undefined) {
+      const inner = document.createElement('div');
+      inner.style.width = '100%';
+      inner.style.height = '200px';
+      const outer = document.createElement('div');
       const outerStyle = outer.style;
-      outerStyle.position = "absolute";
-      outerStyle.top = "0";
-      outerStyle.left = "0";
-      outerStyle.pointerEvents = "none";
-      outerStyle.visibility = "hidden";
-      outerStyle.width = "200px";
-      outerStyle.height = "150px";
-      outerStyle.overflow = "hidden";
+      outerStyle.position = 'absolute';
+      outerStyle.top = '0';
+      outerStyle.left = '0';
+      outerStyle.pointerEvents = 'none';
+      outerStyle.visibility = 'hidden';
+      outerStyle.width = '200px';
+      outerStyle.height = '150px';
+      outerStyle.overflow = 'hidden';
       outer.appendChild(inner);
       dom.appendChild(outer);
       const widthContained = inner.offsetWidth;
-      outer.style.overflow = "scroll";
+      outer.style.overflow = 'scroll';
       let widthScroll = inner.offsetWidth;
       if (widthContained === widthScroll) {
         widthScroll = outer.clientWidth;
@@ -98,15 +83,9 @@ var getScrollBarSize = (fresh, dom = document.body) => {
   }
   return 0;
 };
-var isFixedElem = (element) => {
+exports.getScrollBarSize = getScrollBarSize;
+const isFixedElem = element => {
   const style = element && window.getComputedStyle(element);
-  return style && style.position === "fixed";
+  return style && style.position === 'fixed';
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  getClientHeight,
-  getClientWidth,
-  getScrollBarSize,
-  getScrollOffsets,
-  isFixedElem
-});
+exports.isFixedElem = isFixedElem;

package/lib/TagSelect/Group.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 export type TagSelectValueType = string | number | readonly string[];
 export interface TagSelectOptionType {
     label: React.ReactNode;
@@ -9,15 +9,15 @@ export interface TagSelectOptionType {
 }
 export interface TagSelectGroupProps {
     title?: string;
-    children?: ReactNode;
+    children?: React.ReactNode;
     disabled?: boolean;
     className?: string;
     multiple?: boolean;
-    defaultValue?: TagSelectValueType | Array<TagSelectValueType>;
-    value?: TagSelectValueType | Array<TagSelectValueType>;
+    defaultValue?: TagSelectValueType | TagSelectValueType[];
+    value?: TagSelectValueType | TagSelectValueType[];
     size?: string;
-    options?: Array<TagSelectOptionType | string | number>;
-    onChange?: (value: Array<TagSelectValueType> | TagSelectValueType) => void;
+    options?: (TagSelectOptionType | string | number)[];
+    onChange?: (value: TagSelectValueType[] | TagSelectValueType) => void;
 }
 declare const Group: React.FC<TagSelectGroupProps>;
 export default Group;

package/lib/TagSelect/Group.js

@@ -1,82 +1,62 @@
-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);
+"use strict";
 
-// src/TagSelect/Group.tsx
-var Group_exports = {};
-__export(Group_exports, {
-  default: () => Group_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(Group_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_util = require("../_util");
-var import_react = __toESM(require("react"));
-var import_TagSelectContext = __toESM(require("./TagSelectContext"));
-var import_Item = __toESM(require("./Item"));
-var import_style = __toESM(require("./style"));
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _design = require("@oceanbase/design");
+var _react = _interopRequireWildcard(require("react"));
+var _TagSelectContext = _interopRequireDefault(require("./TagSelectContext"));
+var _Item = _interopRequireDefault(require("./Item"));
+var _style = _interopRequireDefault(require("./style"));
+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 }; }
+"use client";
 function toArray(value) {
   let res = value;
-  if (value === void 0) {
+  if (value === undefined) {
     res = [];
   } else if (!Array.isArray(value)) {
     res = [value];
   }
   return res;
 }
-var Group = ({
+const Group = ({
   title,
   multiple,
   defaultValue,
-  size = "middle",
+  size = 'middle',
   options = [],
   children,
   className,
   ...restProps
 }) => {
-  const prefix = (0, import_util.getPrefix)("tag-select");
-  const { wrapSSR, hashId } = (0, import_style.default)(prefix);
-  const [value, setValue] = (0, import_react.useState)(
-    toArray(defaultValue || restProps.value)
-  );
-  const [registeredValues, setRegisteredValues] = import_react.default.useState([]);
-  const registerValue = (val) => {
-    setRegisteredValues((prev) => [...prev, val]);
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_design.ConfigProvider.ConfigContext);
+  const prefix = getPrefixCls('tag-select');
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.default)(prefix);
+  const [value, setValue] = (0, _react.useState)(toArray(defaultValue || restProps.value));
+  const [registeredValues, setRegisteredValues] = _react.default.useState([]);
+  const registerValue = val => {
+    setRegisteredValues(prev => [...prev, val]);
   };
-  (0, import_react.useEffect)(() => {
-    if ("value" in restProps) {
+  (0, _react.useEffect)(() => {
+    if ('value' in restProps) {
       setValue(toArray(restProps.value));
     }
   }, [restProps.value]);
-  const handleValueChange = (v) => {
-    var _a;
-    const registeredValue = value.filter((v1) => registeredValues.includes(v1));
+  const handleValueChange = v => {
+    const registeredValue = value.filter(v1 => registeredValues.includes(v1));
     const newValue = [...registeredValue];
     const index = newValue.indexOf(v);
-    const checkedValue = index === -1 ? v : void 0;
+    const checkedValue = index === -1 ? v : undefined;
     if (multiple) {
       if (index === -1) {
         newValue.push(v);
@@ -84,10 +64,10 @@ var Group = ({
         newValue.splice(index, 1);
       }
     }
-    if (!("value" in restProps)) {
+    if (!('value' in restProps)) {
       setValue(multiple ? newValue : [checkedValue]);
     }
-    (_a = restProps.onChange) == null ? void 0 : _a.call(restProps, multiple ? newValue : checkedValue);
+    restProps.onChange?.(multiple ? newValue : checkedValue);
   };
   const contextValue = {
     multiple,
@@ -98,29 +78,35 @@ var Group = ({
     registerValue,
     handleValueChange
   };
-  const memoOptions = (0, import_react.useMemo)(() => {
-    return options.map((option) => {
-      if (typeof option === "string" || typeof option === "number") {
-        return { label: option, value: option };
+  const memoOptions = (0, _react.useMemo)(() => {
+    return options.map(option => {
+      if (typeof option === 'string' || typeof option === 'number') {
+        return {
+          label: option,
+          value: option
+        };
       }
       return option;
     });
   }, [options]);
-  const childrenNode = options.length ? memoOptions.map((option) => /* @__PURE__ */ import_react.default.createElement(
-    import_Item.default,
-    {
-      key: option.value.toString(),
-      disabled: "disabled" in option ? option.disabled : restProps.disabled,
-      value: option.value,
-      onChange: option.onChange,
-      style: option.style,
-      checked: value == null ? void 0 : value.includes(option.value)
-    },
-    option.label
-  )) : children;
-  const groupCls = (0, import_classnames.default)(`${prefix}-container`, hashId, className);
-  return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(import_TagSelectContext.default.Provider, { value: contextValue }, /* @__PURE__ */ import_react.default.createElement("div", { className: groupCls }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-title` }, title), childrenNode))
-  );
+  const childrenNode = options.length ? memoOptions.map(option => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.default, {
+    disabled: 'disabled' in option ? option.disabled : restProps.disabled,
+    value: option.value,
+    onChange: option.onChange,
+    style: option.style,
+    checked: value?.includes(option.value),
+    children: option.label
+  }, option.value.toString())) : children;
+  const groupCls = (0, _classnames.default)(`${prefix}-container`, hashId, className);
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagSelectContext.default.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: groupCls,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${prefix}-title`,
+        children: title
+      }), childrenNode]
+    })
+  }));
 };
-var Group_default = Group;
+var _default = exports.default = Group;