@bifrostui/react 1.4.8-beta.0 → 2.0.0-alpha.0

package/dist/Picker/Picker.types.d.ts

@@ -10,10 +10,6 @@ export interface IPickerOptionItem {
      * 选项对应唯一的值
      */
     value: string | number;
-    /**
-     * 是否禁用
-     */
-    disabled?: boolean;
 }
 export type ICascadePickerChildOptionItem = IPickerOptionItem & {
     /**
@@ -38,14 +34,6 @@ export type PickerProps<D extends React.ElementType = 'div', P = DrawerProps> =
          * 标题
          */
         title?: string;
-        /**
-         * 确认文本内容
-         */
-        confirmText?: string;
-        /**
-         * 取消文本内容
-         */
-        cancelText?: string;
         /**
          * 列表数据
          * @default []
@@ -73,7 +61,6 @@ export type PickerProps<D extends React.ElementType = 'div', P = DrawerProps> =
             value: (string | number)[];
             options: ICascadePickerChildOptionItem[][];
             currentOption: ICascadePickerChildOptionItem;
-            columnIndex: number;
         }) => void;
         /**
          * 点击取消按钮时候回调
@@ -98,17 +85,17 @@ export type PickerPanelProps<D extends React.ElementType = 'div', P = {}> = Over
          */
         options?: ICascadePickerChildOptionItem[];
         /**
-         * 选中值
+         * 默认值
          */
-        value?: string | number;
+        defaultValue?: string | number;
         /**
          * 列索引
          */
         columnIndex?: number;
         /**
-         * Piker组件的样式，PickerPanel的主题定制与css变量传入的Tokens有关，需要透传计算
+         * 是否展示选择器
          */
-        pickerStyle?: React.CSSProperties;
+        open?: boolean;
         /**
          * 选择选项时的回调
          */

package/dist/Picker/PickerPanel.css

@@ -1,5 +1,4 @@
 .bui-picker-panel {
-  --bui-picker-option-disabled-opacity: 0.38;
   flex: 1;
   flex-shrink: 0;
   position: relative;
@@ -9,9 +8,9 @@
   transform: rotate3d(1, 0, 0, 60deg);
   transform-style: preserve-3d;
   position: absolute;
-  top: var(--indicator-top);
+  top: var(--bui-picker-indicator-top);
   width: 100%;
-  height: var(--option-height);
+  height: var(--bui-picker-option-height);
 }
 .bui-picker-panel-mask {
   position: absolute;
@@ -29,14 +28,14 @@
       var(--bui-color-bg-alpha-light-9),
       var(--bui-color-bg-alpha-light-3));
   background-position: top, bottom;
-  background-size: 100% var(--indicator-top);
+  background-size: 100% var(--bui-picker-indicator-top);
   background-repeat: no-repeat;
   transform: translateZ(0);
 }
 .bui-picker-panel-indicator {
   position: absolute;
-  top: var(--indicator-top);
-  height: var(--option-height);
+  top: var(--bui-picker-indicator-top);
+  height: var(--bui-picker-option-height);
   width: 100%;
   border-top: 1px solid var(--bui-color-border-default);
   border-bottom: 1px solid var(--bui-color-border-default);
@@ -46,10 +45,10 @@
   top: 0;
   left: 0;
   text-align: center;
-  height: var(--option-height);
-  line-height: var(--option-height);
+  height: var(--bui-picker-option-height);
+  line-height: var(--bui-picker-option-height);
   color: var(--bui-color-fg-default);
-  font-size: var(--option-font-size);
+  font-size: var(--bui-picker-option-font-size);
   backface-visibility: hidden;
   width: auto;
   overflow: hidden;
@@ -57,9 +56,6 @@
   white-space: nowrap;
   width: 100%;
 }
-.bui-picker-panel-option-disabled {
-  opacity: var(--bui-picker-option-disabled-opacity);
-}
 .bui-picker-panel-option-hidden {
   visibility: hidden;
   opacity: 0;

package/dist/Picker/PickerPanel.js

@@ -63,19 +63,18 @@ var import_PickerPanel = require("./PickerPanel.css");
 const prefixCls = "bui-picker-panel";
 const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
   (props, ref) => {
-    var _b;
     const _a = props, {
       options = [],
-      value,
+      defaultValue,
       onSelect,
       columnIndex,
-      pickerStyle
+      open
     } = _a, others = __objRest(_a, [
       "options",
-      "value",
+      "defaultValue",
       "onSelect",
       "columnIndex",
-      "pickerStyle"
+      "open"
     ]);
     const touch = (0, import_utils.useTouch)();
     let timer;
@@ -85,9 +84,8 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
     const ROTATION = 20;
     const TOUCH_END = "end";
     const DEFAULT_LINE_SPACING = 36;
-    const LINE_SPACING_STR = (_b = ((pickerStyle == null ? void 0 : pickerStyle["--option-height"]) ? `${pickerStyle == null ? void 0 : pickerStyle["--option-height"]}` : `${DEFAULT_LINE_SPACING}`).match(/\d+/)) == null ? void 0 : _b[0];
-    const LINE_SPACING = parseInt(LINE_SPACING_STR, 10);
-    const INDICATOR_OFFSET = LINE_SPACING * 108 / DEFAULT_LINE_SPACING;
+    const lineSpacing = (0, import_react.useRef)(DEFAULT_LINE_SPACING);
+    const [indicatorOffset, setIndicatorOffset] = (0, import_react.useState)(108);
     const [startY, setStartY] = (0, import_react.useState)(0);
     const [currIndex, setCurrIndex] = (0, import_react.useState)(1);
     const [startTime, setStartTime] = (0, import_react.useState)(0);
@@ -96,15 +94,23 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
     const [scrollDistance, setScrollDistance] = (0, import_react.useState)(0);
     const transformY = (0, import_react.useRef)(0);
     const isVerticalMoving = (0, import_react.useRef)(false);
-    const rollerRef = (0, import_react.useRef)(null);
+    const fitstOptionRef = (0, import_react.useRef)(null);
     const PickerPanelRef = (0, import_react.useRef)(null);
     const pickerPanelRef = (0, import_utils.useForkRef)(PickerPanelRef, ref);
     (0, import_utils.useTouchEmulator)(PickerPanelRef.current);
+    (0, import_react.useLayoutEffect)(() => {
+      if (!open)
+        return;
+      (0, import_utils.getBoundingClientRect)(fitstOptionRef.current).then((rect) => {
+        lineSpacing.current = (rect == null ? void 0 : rect.height) || DEFAULT_LINE_SPACING;
+        setIndicatorOffset(lineSpacing.current * 108 / DEFAULT_LINE_SPACING);
+      });
+    }, [open]);
     const updateSelect = () => {
       let index = -1;
-      if (value) {
+      if (defaultValue) {
         options.some((item, idx) => {
-          if (item.value === value) {
+          if (item.value === defaultValue) {
             index = idx;
             return true;
           }
@@ -112,7 +118,7 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
         });
       }
       setCurrIndex(index === -1 ? 1 : index + 1);
-      const move = index === -1 ? 0 : index * LINE_SPACING;
+      const move = index === -1 ? 0 : index * lineSpacing.current;
       setMove({ move: -move });
     };
     (0, import_react.useEffect)(() => {
@@ -122,7 +128,7 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
       return () => {
         clearTimeout(timer);
       };
-    }, [options, value]);
+    }, [options]);
     const setTransform = (type, deg, time = DEFAULT_DURATION, translateY = 0) => {
       let nTime = time;
       if (type !== TOUCH_END) {
@@ -139,22 +145,24 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
         if (updateMove > 0) {
           updateMove = 0;
         }
-        if (updateMove < -(options.length - 1) * LINE_SPACING) {
-          updateMove = -(options.length - 1) * LINE_SPACING;
+        if (updateMove < -(options.length - 1) * lineSpacing.current) {
+          updateMove = -(options.length - 1) * lineSpacing.current;
         }
-        const endMove = Math.round(updateMove / LINE_SPACING) * LINE_SPACING;
-        const deg = `${(Math.abs(Math.round(endMove / LINE_SPACING)) + 1) * ROTATION}deg`;
+        const endMove = Math.round(updateMove / lineSpacing.current) * lineSpacing.current;
+        const deg = `${(Math.abs(Math.round(endMove / lineSpacing.current)) + 1) * ROTATION}deg`;
         setTransform(type, deg, time, endMove);
-        setCurrIndex(Math.abs(Math.round(endMove / LINE_SPACING)) + 1);
+        setCurrIndex(Math.abs(Math.round(endMove / lineSpacing.current)) + 1);
       } else {
         let deg = 0;
-        const currentDeg = (-updateMove / LINE_SPACING + 1) * ROTATION;
+        const currentDeg = (-updateMove / lineSpacing.current + 1) * ROTATION;
         const maxDeg = (options.length + 1) * ROTATION;
         const minDeg = 0;
         deg = Math.min(Math.max(currentDeg, minDeg), maxDeg);
         if (minDeg < deg && deg < maxDeg) {
           setTransform("", `${deg}deg`, void 0, updateMove);
-          setCurrIndex(Math.abs(Math.round(updateMove / LINE_SPACING)) + 1);
+          setCurrIndex(
+            Math.abs(Math.round(updateMove / lineSpacing.current)) + 1
+          );
         }
       }
     };
@@ -203,17 +211,17 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
       }, 0);
     };
     (0, import_react.useEffect)(() => {
-      var _a2, _b2, _c;
+      var _a2, _b, _c;
       (_a2 = PickerPanelRef.current) == null ? void 0 : _a2.addEventListener("touchstart", panelTouchStart);
-      (_b2 = PickerPanelRef.current) == null ? void 0 : _b2.addEventListener("touchmove", panelTouchMove);
+      (_b = PickerPanelRef.current) == null ? void 0 : _b.addEventListener("touchmove", panelTouchMove);
       (_c = PickerPanelRef.current) == null ? void 0 : _c.addEventListener("touchend", panelTouchEnd);
       return () => {
-        var _a3, _b3, _c2;
+        var _a3, _b2, _c2;
         (_a3 = PickerPanelRef.current) == null ? void 0 : _a3.removeEventListener(
           "touchstart",
           panelTouchStart
         );
-        (_b3 = PickerPanelRef.current) == null ? void 0 : _b3.removeEventListener(
+        (_b2 = PickerPanelRef.current) == null ? void 0 : _b2.removeEventListener(
           "touchmove",
           panelTouchMove
         );
@@ -224,7 +232,7 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
       isVerticalMoving.current = false;
       setTouchTime(0);
       onSelect == null ? void 0 : onSelect(e, {
-        columnOption: options == null ? void 0 : options[Math.round(-scrollDistance / LINE_SPACING)],
+        columnOption: options == null ? void 0 : options[Math.round(-scrollDistance / lineSpacing.current)],
         columnIndex
       });
     };
@@ -244,7 +252,6 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
         "div",
         {
           className: `${prefixCls}-roller`,
-          ref: rollerRef,
           style: {
             transition: `transform ${touchTime}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
             transform: `rotate3d(1, 0, 0, ${touchDeg})`
@@ -254,13 +261,16 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
         options.map((item, i) => /* @__PURE__ */ import_react.default.createElement(
           "div",
           {
+            ref: (el) => {
+              if (i === 0 && !fitstOptionRef.current)
+                fitstOptionRef.current = el;
+            },
             className: (0, import_clsx.default)(`${prefixCls}-option`, {
-              [`${prefixCls}-option-hidden`]: i + 1 <= currIndex - 8 || i + 1 >= currIndex + 8,
-              [`${prefixCls}-option-disabled`]: item == null ? void 0 : item.disabled
+              [`${prefixCls}-option-hidden`]: i + 1 <= currIndex - 8 || i + 1 >= currIndex + 8
             }),
             key: `${item == null ? void 0 : item.value}-${i}`,
             style: {
-              transform: `rotate3d(1, 0, 0, ${-ROTATION * (i + 1)}deg) translate3d(0px, 0px, ${INDICATOR_OFFSET}px)`
+              transform: `rotate3d(1, 0, 0, ${-ROTATION * (i + 1)}deg) translate3d(0px, 0px, ${indicatorOffset}px)`
             }
           },
           item == null ? void 0 : item.label

package/dist/Picker/index.css

@@ -0,0 +1,116 @@
+:root,
+page,
+xhs-page {
+  --bui-picker-header-height: 50px;
+  --bui-picker-header-padding: 0 var(--bui-spacing-lg);
+  --bui-picker-cancel-height: 100%;
+  --bui-picker-cancel-line-height: 50px;
+  --bui-picker-confirm-height: 100%;
+  --bui-picker-confirm-line-height: 50px;
+  --bui-picker-panel-height: 260px;
+  --bui-picker-indicator-top: 108px;
+  --bui-picker-option-height: 36px;
+  --bui-picker-option-font-size: var(--bui-title-size-4);
+}
+.bui-picker {
+  font-family: var(--bui-font-family);
+}
+.bui-picker .bui-drawer-content {
+  border-radius: var(--bui-shape-radius-drawer) var(--bui-shape-radius-drawer) 0 0;
+}
+.bui-picker-header {
+  height: var(--bui-picker-header-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--bui-picker-header-padding);
+}
+.bui-picker-cancel {
+  cursor: pointer;
+  height: var(--bui-picker-cancel-height);
+  font-size: var(--bui-title-size-4);
+  text-align: center;
+  line-height: var(--bui-picker-cancel-line-height);
+  color: var(--bui-color-fg-default);
+}
+.bui-picker-title {
+  font-size: var(--bui-title-size-3);
+  color: var(--bui-color-fg-default);
+  font-weight: var(--bui-font-weight-medium);
+}
+.bui-picker-confirm {
+  cursor: pointer;
+  height: var(--bui-picker-confirm-height);
+  font-size: var(--bui-title-size-4);
+  text-align: center;
+  line-height: var(--bui-picker-confirm-line-height);
+  color: var(--bui-color-primary);
+}
+.bui-picker-container {
+  width: 100%;
+  height: var(--bui-picker-panel-height);
+  display: flex;
+  overflow: hidden;
+}
+.bui-picker-panel {
+  flex: 1;
+  flex-shrink: 0;
+  position: relative;
+  font-family: var(--bui-font-family);
+}
+.bui-picker-panel-roller {
+  transform: rotate3d(1, 0, 0, 60deg);
+  transform-style: preserve-3d;
+  position: absolute;
+  top: var(--bui-picker-indicator-top);
+  width: 100%;
+  height: var(--bui-picker-option-height);
+}
+.bui-picker-panel-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image:
+    linear-gradient(
+      180deg,
+      var(--bui-color-bg-alpha-light-9),
+      var(--bui-color-bg-alpha-light-3)),
+    linear-gradient(
+      0deg,
+      var(--bui-color-bg-alpha-light-9),
+      var(--bui-color-bg-alpha-light-3));
+  background-position: top, bottom;
+  background-size: 100% var(--bui-picker-indicator-top);
+  background-repeat: no-repeat;
+  transform: translateZ(0);
+}
+.bui-picker-panel-indicator {
+  position: absolute;
+  top: var(--bui-picker-indicator-top);
+  height: var(--bui-picker-option-height);
+  width: 100%;
+  border-top: 1px solid var(--bui-color-border-default);
+  border-bottom: 1px solid var(--bui-color-border-default);
+}
+.bui-picker-panel-option {
+  position: absolute;
+  top: 0;
+  left: 0;
+  text-align: center;
+  height: var(--bui-picker-option-height);
+  line-height: var(--bui-picker-option-height);
+  color: var(--bui-color-fg-default);
+  font-size: var(--bui-picker-option-font-size);
+  backface-visibility: hidden;
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+.bui-picker-panel-option-hidden {
+  visibility: hidden;
+  opacity: 0;
+}

package/dist/Popover/Popover.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './Popover.less';
 import { PopoverProps } from './Popover.types';
+import './index.less';
 declare const Popover: React.ForwardRefExoticComponent<Omit<PopoverProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Popover;

package/dist/Popover/Popover.js

@@ -51,26 +51,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-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());
-  });
-};
 var Popover_exports = {};
 __export(Popover_exports, {
   default: () => Popover_default
@@ -80,7 +60,7 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
 var import_utils = require("@bifrostui/utils");
 var import_Portal = __toESM(require("../Portal"));
-var import_Popover = require("./Popover.css");
+var import_index = require("./index.css");
 const prefixCls = "bui-popover";
 const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const _a = props, {
@@ -93,9 +73,9 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     offsetSpacing = 0,
     placement = "top",
     trigger = "click",
+    onOpenChange,
     open,
-    hideArrow,
-    onOpenChange
+    hideArrow
   } = _a, others = __objRest(_a, [
     "className",
     "style",
@@ -106,9 +86,9 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     "offsetSpacing",
     "placement",
     "trigger",
+    "onOpenChange",
     "open",
-    "hideArrow",
-    "onOpenChange"
+    "hideArrow"
   ]);
   const controlByUser = typeof open !== "undefined";
   const { direction, location = "center" } = (0, import_utils.parsePlacement)(placement);
@@ -116,18 +96,11 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
   const [openStatus, setOpenStatus] = (0, import_react.useState)(defaultOpen);
   const [arrowDirection, setArrowDirection] = (0, import_react.useState)(direction);
   const [arrowLocation, setArrowLocation] = (0, import_react.useState)(location);
-  const [toolStyles, setToolStyles] = (0, import_react.useState)({});
-  const tipRef = (0, import_react.useRef)(null);
-  const nodeRef = (0, import_utils.useForkRef)(ref, tipRef);
-  const clearRef = (status) => {
-    if (status === false) {
-      tipRef.current = null;
-    }
-  };
+  const [tooltyles, setTooltyles] = (0, import_react.useState)({});
+  const ttId = (0, import_utils.useUniqueId)();
   const changeOpenStatus = (event, status) => {
     if (controlByUser)
       return;
-    clearRef(status);
     setOpenStatus(status);
     onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
   };
@@ -146,33 +119,23 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     if (!controlByUser)
       return;
     setOpenStatus(open);
-    clearRef(open);
   }, [open]);
-  (0, import_react.useEffect)(() => {
-    if (!openStatus) {
-      setToolStyles({
-        visibility: "hidden"
-      });
-    }
-  }, [openStatus]);
   const clickEventHandler = (event) => {
     if (trigger === "hover" || (trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover")
       return;
     hidePopover(event);
   };
-  const onRootElementMouted = (0, import_utils.throttle)(() => __async(void 0, null, function* () {
-    if (!tipRef.current)
-      return;
+  const onRootElementMouted = (0, import_utils.throttle)(() => {
     const {
       direction: newParsedDirection,
       location: newParsedLocation = "center"
     } = (0, import_utils.parsePlacement)(placement);
-    const result = yield (0, import_utils.getStylesAndLocation)({
+    const result = (0, import_utils.getStylesAndLocation)({
       childrenRef,
       arrowDirection: newParsedDirection,
       arrowLocation: newParsedLocation,
       offsetSpacing,
-      tipRef
+      selector: `[data-id="tt_${ttId}"]`
     });
     if (!result)
       return;
@@ -183,32 +146,26 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
     if (newArrowLocation !== arrowLocation) {
       setArrowLocation(newArrowLocation);
     }
-    setToolStyles(styles);
-  }), 100);
+    setTooltyles(styles);
+  }, 100);
+  const bindEvent = () => {
+    if (!controlByUser) {
+      document.addEventListener("click", clickEventHandler);
+    }
+    window.addEventListener("resize", onRootElementMouted);
+  };
+  const unbindEvent = () => {
+    if (!controlByUser) {
+      document.removeEventListener("click", clickEventHandler);
+    }
+    window.removeEventListener("resize", onRootElementMouted);
+  };
   (0, import_react.useEffect)(() => {
-    const bindEvent = () => {
-      if (!tipRef.current)
-        return;
-      if (!controlByUser) {
-        document.addEventListener("click", clickEventHandler);
-      }
-      if (!import_utils.isMini) {
-        window.addEventListener("resize", onRootElementMouted);
-      }
-    };
-    const unbindEvent = () => {
-      if (!controlByUser) {
-        document.removeEventListener("click", clickEventHandler);
-      }
-      if (!import_utils.isMini) {
-        window.removeEventListener("resize", onRootElementMouted);
-      }
-    };
     bindEvent();
     return () => {
       unbindEvent();
     };
-  }, [openStatus]);
+  }, []);
   if (!title && !content)
     return null;
   let triggerEventOption;
@@ -223,14 +180,14 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
   const childrenOptions = __spreadValues({
     ref: childrenRef
   }, triggerEventOption);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, open || openStatus ? /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { onRootElementMouted }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, open || openStatus ? /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { onRootElementMouted, ref }, /* @__PURE__ */ import_react.default.createElement(
     "div",
     __spreadValues({
       className: (0, import_clsx.default)(prefixCls, className, `popover-${arrowDirection}`, {
         "bui-popover-arrow-hide": hideArrow
       }),
-      style: __spreadValues(__spreadValues({}, style), toolStyles),
-      ref: nodeRef
+      "data-id": `tt_${ttId}`,
+      style: __spreadValues(__spreadValues({}, style), tooltyles)
     }, others),
     !hideArrow ? /* @__PURE__ */ import_react.default.createElement(
       "div",