@bifrostui/react 1.2.4 → 1.2.6-beta.0

package/dist/Modal/Modal.miniapp.d.ts

@@ -12,5 +12,5 @@ declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
     keepMounted?: boolean;
 } & import("@bifrostui/types").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: React.Ref<HTMLDivElement>;
-}, keyof import("@bifrostui/types").ICommonProps | "open" | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "open" | keyof import("@bifrostui/types").ICommonProps | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/dist/Picker/Picker.js

@@ -91,6 +91,7 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     "onClose"
   ]);
   const pickerType = (0, import_utils.pickerPanelType)(options);
+  const rollerRefs = (0, import_react.useRef)([]);
   const [columns, setColumns] = (0, import_react.useState)([]);
   const [internalValue, setInternalValue] = (0, import_react.useState)([]);
   (0, import_react.useEffect)(() => {
@@ -118,6 +119,9 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       value: internalValue,
       options: columns
     };
+    const isMoving = rollerRefs.current.some((roller) => roller == null ? void 0 : roller.isMoving);
+    if (isMoving)
+      return;
     onConfirm == null ? void 0 : onConfirm(e, payload);
     onClose == null ? void 0 : onClose(e, __spreadValues({
       from: "confirm"
@@ -182,6 +186,13 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       options: columns
     }, data));
   };
+  const setRefs = (0, import_react.useCallback)(
+    (index) => (e) => {
+      if (e)
+        rollerRefs.current[index] = e;
+    },
+    []
+  );
   return /* @__PURE__ */ import_react.default.createElement(
     import_Drawer.default,
     __spreadValues({
@@ -199,6 +210,7 @@ const Picker = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
       /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-container` }, columns.map((column, index) => /* @__PURE__ */ import_react.default.createElement(
         import_PickerPanel.default,
         {
+          ref: setRefs(index),
           key: index,
           options: column,
           columnIndex: index,

package/dist/Picker/PickerPanel.js

@@ -76,7 +76,7 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
     ]);
     const touch = (0, import_utils.useTouch)();
     let timer;
-    const INERTIA_TIME = 300;
+    const INERTIA_TIME = 200;
     const INERTIA_DISTANCE = 15;
     const DEFAULT_DURATION = 200;
     const LINE_SPACING = 36;
@@ -90,6 +90,7 @@ 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 PickerPanelRef = (0, import_react.useRef)(null);
     const pickerPanelRef = (0, import_utils.useForkRef)(PickerPanelRef, ref);
     (0, import_utils.useTouchEmulator)(PickerPanelRef.current);
@@ -221,6 +222,9 @@ const PickerPanel = /* @__PURE__ */ import_react.default.forwardRef(
         columnIndex
       });
     };
+    (0, import_react.useImperativeHandle)(ref, () => ({
+      isMoving: isVerticalMoving.current
+    }));
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
       __spreadValues({
@@ -234,6 +238,7 @@ 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})`

package/dist/Tabs/Tabs.css

@@ -4,6 +4,8 @@
   --color: var(--bui-color-fg-subtle);
   --active-color: var(--bui-color-fg-default);
   --line-color: var(--bui-color-primary);
+  --line-height: 3PX;
+  --line-width: 18px;
   position: relative;
   font-family: var(--bui-font-family);
 }
@@ -22,9 +24,9 @@
 }
 .bui-tabs-tabline {
   position: absolute;
-  width: 18px;
+  width: var(--line-width);
   bottom: 0;
-  height: 3PX;
+  height: var(--line-height);
   color: var(--bui-color-primary);
   background: var(--line-color);
   border-radius: var(--bui-shape-radius-label);

package/es/Picker/Picker.js

@@ -30,7 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import clsx from "clsx";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState, useCallback } from "react";
 import Drawer from "../Drawer";
 import PickerPanel from "./PickerPanel";
 import { formatOptions, pickerPanelType } from "./utils";
@@ -61,6 +61,7 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
     "onClose"
   ]);
   const pickerType = pickerPanelType(options);
+  const rollerRefs = useRef([]);
   const [columns, setColumns] = useState([]);
   const [internalValue, setInternalValue] = useState([]);
   useEffect(() => {
@@ -88,6 +89,9 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
       value: internalValue,
       options: columns
     };
+    const isMoving = rollerRefs.current.some((roller) => roller == null ? void 0 : roller.isMoving);
+    if (isMoving)
+      return;
     onConfirm == null ? void 0 : onConfirm(e, payload);
     onClose == null ? void 0 : onClose(e, __spreadValues({
       from: "confirm"
@@ -152,6 +156,13 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
       options: columns
     }, data));
   };
+  const setRefs = useCallback(
+    (index) => (e) => {
+      if (e)
+        rollerRefs.current[index] = e;
+    },
+    []
+  );
   return /* @__PURE__ */ React.createElement(
     Drawer,
     __spreadValues({
@@ -169,6 +180,7 @@ const Picker = /* @__PURE__ */ React.forwardRef((props, ref) => {
       /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-container` }, columns.map((column, index) => /* @__PURE__ */ React.createElement(
         PickerPanel,
         {
+          ref: setRefs(index),
           key: index,
           options: column,
           columnIndex: index,

package/es/Picker/PickerPanel.js

@@ -27,7 +27,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import clsx from "clsx";
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useRef, useImperativeHandle } from "react";
 import { useTouch, useForkRef, useTouchEmulator } from "@bifrostui/utils";
 import "./PickerPanel.css";
 const prefixCls = "bui-picker-panel";
@@ -46,7 +46,7 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
     ]);
     const touch = useTouch();
     let timer;
-    const INERTIA_TIME = 300;
+    const INERTIA_TIME = 200;
     const INERTIA_DISTANCE = 15;
     const DEFAULT_DURATION = 200;
     const LINE_SPACING = 36;
@@ -60,6 +60,7 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
     const [scrollDistance, setScrollDistance] = useState(0);
     const transformY = useRef(0);
     const isVerticalMoving = useRef(false);
+    const rollerRef = useRef(null);
     const PickerPanelRef = useRef(null);
     const pickerPanelRef = useForkRef(PickerPanelRef, ref);
     useTouchEmulator(PickerPanelRef.current);
@@ -191,6 +192,9 @@ const PickerPanel = /* @__PURE__ */ React.forwardRef(
         columnIndex
       });
     };
+    useImperativeHandle(ref, () => ({
+      isMoving: isVerticalMoving.current
+    }));
     return /* @__PURE__ */ React.createElement(
       "div",
       __spreadValues({
@@ -204,6 +208,7 @@ const PickerPanel = /* @__PURE__ */ React.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})`

package/es/Tabs/Tabs.css

@@ -4,6 +4,8 @@
   --color: var(--bui-color-fg-subtle);
   --active-color: var(--bui-color-fg-default);
   --line-color: var(--bui-color-primary);
+  --line-height: 3PX;
+  --line-width: 18px;
   position: relative;
   font-family: var(--bui-font-family);
 }
@@ -22,9 +24,9 @@
 }
 .bui-tabs-tabline {
   position: absolute;
-  width: 18px;
+  width: var(--line-width);
   bottom: 0;
-  height: 3PX;
+  height: var(--line-height);
   color: var(--bui-color-primary);
   background: var(--line-color);
   border-radius: var(--bui-shape-radius-label);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bifrostui/react",
-  "version": "1.2.4",
+  "version": "1.2.6-beta.0",
   "description": "React components for building mobile application",
   "homepage": "http://bui.taopiaopiao.com",
   "license": "MIT",
@@ -33,10 +33,10 @@
     "clsx": "^1.2.1",
     "dayjs": "^1.11.7",
     "swiper": "^8.1.5",
-    "@bifrostui/types": "1.2.4",
-    "@bifrostui/utils": "1.2.4",
-    "@bifrostui/styles": "1.2.4",
-    "@bifrostui/icons": "1.2.4"
+    "@bifrostui/icons": "1.2.6-beta.0",
+    "@bifrostui/styles": "1.2.6-beta.0",
+    "@bifrostui/types": "1.2.6-beta.0",
+    "@bifrostui/utils": "1.2.6-beta.0"
   },
   "peerDependencies": {
     "@tarojs/components": "^3.0.0",