@bifrostui/react 1.5.3 → 2.0.0-alpha.1

package/es/Picker/PickerPanel.css

@@ -9,9 +9,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 +29,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 +46,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;

package/es/Picker/PickerPanel.js

@@ -26,38 +26,47 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import React, {
+  useEffect,
+  useState,
+  useRef,
+  useImperativeHandle,
+  useLayoutEffect
+} from "react";
 import clsx from "clsx";
-import React, { useEffect, useState, useRef, useImperativeHandle } from "react";
-import { useTouch, useForkRef, useTouchEmulator } from "@bifrostui/utils";
+import {
+  useTouch,
+  useForkRef,
+  useTouchEmulator,
+  getBoundingClientRect
+} from "@bifrostui/utils";
 import "./PickerPanel.css";
 const prefixCls = "bui-picker-panel";
+const INERTIA_TIME = 200;
+const INERTIA_DISTANCE = 15;
+const DEFAULT_DURATION = 200;
+const ROTATION = 20;
+const TOUCH_END = "end";
+const DEFAULT_LINE_SPACING = 36;
 const PickerPanel = /* @__PURE__ */ React.forwardRef(
   (props, ref) => {
-    var _b;
     const _a = props, {
       options = [],
       value,
       onSelect,
       columnIndex,
-      pickerStyle
+      open
     } = _a, others = __objRest(_a, [
       "options",
       "value",
       "onSelect",
       "columnIndex",
-      "pickerStyle"
+      "open"
     ]);
     const touch = useTouch();
-    let timer;
-    const INERTIA_TIME = 200;
-    const INERTIA_DISTANCE = 15;
-    const DEFAULT_DURATION = 200;
-    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 timerRef = useRef(null);
+    const lineSpacing = useRef(DEFAULT_LINE_SPACING);
+    const [indicatorOffset, setIndicatorOffset] = useState(108);
     const [startY, setStartY] = useState(0);
     const [currIndex, setCurrIndex] = useState(1);
     const [startTime, setStartTime] = useState(0);
@@ -66,33 +75,18 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
     const [scrollDistance, setScrollDistance] = useState(0);
     const transformY = useRef(0);
     const isVerticalMoving = useRef(false);
-    const rollerRef = useRef(null);
+    const fitstOptionRef = useRef(null);
     const PickerPanelRef = useRef(null);
     const pickerPanelRef = useForkRef(PickerPanelRef, ref);
     useTouchEmulator(PickerPanelRef.current);
-    const updateSelect = () => {
-      let index = -1;
-      if (value) {
-        options.some((item, idx) => {
-          if (item.value === value) {
-            index = idx;
-            return true;
-          }
-          return false;
-        });
-      }
-      setCurrIndex(index === -1 ? 1 : index + 1);
-      const move = index === -1 ? 0 : index * LINE_SPACING;
-      setMove({ move: -move });
-    };
-    useEffect(() => {
-      setScrollDistance(0);
-      transformY.current = 0;
-      updateSelect();
-      return () => {
-        clearTimeout(timer);
-      };
-    }, [options, value]);
+    useLayoutEffect(() => {
+      if (!open)
+        return;
+      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 setTransform = (type, deg, time = DEFAULT_DURATION, translateY = 0) => {
       let nTime = time;
       if (type !== TOUCH_END) {
@@ -109,25 +103,50 @@ const PickerPanel = /* @__PURE__ */ React.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
+          );
         }
       }
     };
+    const updateSelect = () => {
+      let index = -1;
+      if (value) {
+        options.some((item, idx) => {
+          if (item.value === value) {
+            index = idx;
+            return true;
+          }
+          return false;
+        });
+      }
+      setCurrIndex(index === -1 ? 1 : index + 1);
+      const move = index === -1 ? 0 : index * lineSpacing.current;
+      setMove({ move: -move });
+    };
+    useEffect(() => {
+      setScrollDistance(0);
+      transformY.current = 0;
+      updateSelect();
+      return () => {
+        clearTimeout(timerRef.current);
+      };
+    }, [options, value]);
     const momentum = (distance, duration) => {
       let nDistance = distance;
       const speed = Math.abs(nDistance / duration);
@@ -168,39 +187,42 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
           type: TOUCH_END
         });
       }
-      timer = setTimeout(() => {
+      timerRef.current = setTimeout(() => {
         touch.reset();
       }, 0);
     };
     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
         );
         (_c2 = PickerPanelRef.current) == null ? void 0 : _c2.removeEventListener("touchend", panelTouchEnd);
       };
-    });
+    }, [panelTouchStart, panelTouchMove, panelTouchEnd]);
     const onTransitionEnd = (e) => {
       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
       });
     };
-    useImperativeHandle(ref, () => ({
-      isMoving: isVerticalMoving.current
-    }));
+    useImperativeHandle(
+      ref,
+      () => ({
+        isMoving: isVerticalMoving.current
+      })
+    );
     return /* @__PURE__ */ React.createElement(
       "div",
       __spreadValues({
@@ -208,13 +230,16 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
         ref: pickerPanelRef,
         onTouchStart: panelTouchStart,
         onTouchMove: panelTouchMove,
-        onTouchEnd: panelTouchEnd
+        onTouchEnd: panelTouchEnd,
+        role: "listbox",
+        "aria-label": "options",
+        "aria-orientation": "vertical",
+        tabIndex: 0
       }, others),
       /* @__PURE__ */ React.createElement(
         "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})`
@@ -224,14 +249,21 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
         options.map((item, i) => /* @__PURE__ */ React.createElement(
           "div",
           {
+            ref: (el) => {
+              if (i === 0 && !fitstOptionRef.current)
+                fitstOptionRef.current = el;
+            },
             className: clsx(`${prefixCls}-option`, {
               [`${prefixCls}-option-hidden`]: i + 1 <= currIndex - 8 || i + 1 >= currIndex + 8,
               [`${prefixCls}-option-disabled`]: item == null ? void 0 : item.disabled
             }),
             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)`
+            },
+            role: "option",
+            "aria-selected": item.value === value,
+            "aria-disabled": !!(item == null ? void 0 : item.disabled)
           },
           item == null ? void 0 : item.label
         ))

package/es/Picker/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,46 @@
+import React from "react";
+import Picker from "../../Picker";
+const CalendarDemo = () => {
+  return /* @__PURE__ */ React.createElement(
+    Picker,
+    {
+      open: true,
+      value: [2],
+      options: [
+        [
+          {
+            value: 1,
+            label: "\u5468\u4E00"
+          },
+          {
+            value: 2,
+            label: "\u5468\u4E8C"
+          },
+          {
+            value: 3,
+            label: "\u5468\u4E09"
+          },
+          {
+            value: 4,
+            label: "\u5468\u56DB"
+          },
+          {
+            value: 5,
+            label: "\u5468\u4E94"
+          },
+          {
+            value: 6,
+            label: "\u5468\u516D"
+          },
+          {
+            value: 7,
+            label: "\u5468\u65E5"
+          }
+        ]
+      ]
+    }
+  );
+};
+export {
+  CalendarDemo
+};

package/es/Picker/index.css

@@ -0,0 +1,124 @@
+: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-confirm-disabled {
+  color: var(--bui-color-fg-default);
+  opacity: var(--bui-picker-confirm-disabled-opacity);
+}
+.bui-picker-container {
+  width: 100%;
+  height: var(--bui-picker-panel-height);
+  display: flex;
+  overflow: hidden;
+}
+.bui-picker-panel {
+  --bui-picker-option-disabled-opacity: 0.38;
+  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-disabled {
+  opacity: var(--bui-picker-option-disabled-opacity);
+}
+.bui-picker-panel-option-hidden {
+  visibility: hidden;
+  opacity: 0;
+}

package/es/Picker/utils.js

@@ -30,14 +30,11 @@ const formatCascade = (columns, values) => {
 };
 const formatOptions = (internalValue, options = []) => {
   const panelType = pickerPanelType(options);
-  switch (panelType) {
-    case "multiple":
-      return options;
-    case "cascade":
-      return formatCascade(options, internalValue);
-    default:
-      return options;
-  }
+  if (panelType === "multiple")
+    return options;
+  if (panelType === "cascade")
+    return formatCascade(options, internalValue);
+  return options;
 };
 const existSameLengthValue = (value, formatted) => {
   const result = formatted.every(
@@ -47,22 +44,22 @@ const existSameLengthValue = (value, formatted) => {
 };
 const safeData = ({ value, formatted, options }) => {
   let safeValue = [];
-  let safeFormatted = [];
+  let safeFormattedValue = [];
   const existValidChildren = existSameLengthValue(value, formatted);
   if (existValidChildren) {
     safeValue = value;
-    safeFormatted = formatted;
+    safeFormattedValue = formatted;
   } else {
     formatted.forEach((item, index) => {
       var _a, _b;
       const childIndex = item.findIndex((i) => i.value === value[index]);
       safeValue[index] = ((_a = item == null ? void 0 : item[childIndex]) == null ? void 0 : _a.value) || ((_b = item == null ? void 0 : item[0]) == null ? void 0 : _b.value);
     });
-    safeFormatted = formatOptions(safeValue, options);
+    safeFormattedValue = formatOptions(safeValue, options);
   }
   return {
     safeValue,
-    safeFormatted
+    safeFormattedValue
   };
 };
 export {