@bifrostui/react 2.0.0-alpha.1 → 2.0.0-alpha.10

package/dist/Button/index.css

@@ -20,8 +20,8 @@ xhs-page {
   --bui-btn-small-padding: 0 11px;
   --bui-btn-padding: 0 14px;
   --bui-btn-large-padding: 0 14px;
+  --bui-btn-large-font-size: var(--bui-text-size-2);
   --bui-btn-full-font-size: var(--bui-title-size-4);
-  --bui-btn-full-font-family: var(--bui-font-family);
 }
 .bui-btn {
   outline: 0;
@@ -95,13 +95,12 @@ xhs-page {
   border-radius: var(--bui-btn-small-border-radius);
 }
 .bui-btn-large {
-  font-size: var(--bui-text-size-2);
+  font-size: var(--bui-btn-large-font-size);
   padding: var(--bui-btn-large-padding);
   height: var(--bui-btn-large-height);
   border-radius: var(--bui-btn-large-border-radius);
 }
 .bui-btn-full {
-  font-family: var(--bui-btn-full-font-family);
   font-size: var(--bui-btn-full-font-size);
   width: 100%;
   height: var(--bui-btn-full-height);

package/dist/Fade/Fade.miniapp.js

@@ -130,15 +130,18 @@ const Fade = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
   const transitions = (0, import_utils.createTransitions)();
   const animationName = inProp ? "bui-fade-in" : "bui-fade-out";
   const animationDurationAndDelay = getAnimationDurationAndDelay();
-  const animation = transitions.create(
-    animationName,
-    (0, import_utils.getTransitionProps)(
-      __spreadProps(__spreadValues({}, animationDurationAndDelay), {
-        style,
-        easing: easingProp
-      }),
-      { mode: inProp ? "enter" : "exit" }
-    )
+  const animation = (0, import_react.useMemo)(
+    () => transitions.create(
+      animationName,
+      (0, import_utils.getTransitionProps)(
+        __spreadProps(__spreadValues({}, animationDurationAndDelay), {
+          style,
+          easing: easingProp
+        }),
+        { mode: inProp ? "enter" : "exit" }
+      )
+    ),
+    [inProp, animationName, animationDurationAndDelay, easingProp, style]
   );
   (0, import_react.useEffect)(() => {
     if (inProp && !isMounted) {
@@ -159,7 +162,7 @@ const Fade = /* @__PURE__ */ import_react.default.forwardRef((props, ref) => {
     } else {
       onExit == null ? void 0 : onExit(elementRef.current);
     }
-  }, [inProp, isMounted, shouldExecuteAnimation, onEnter, onExit]);
+  }, [inProp, isMounted]);
   const handleAnimationStart = () => {
     if (!shouldExecuteAnimation)
       return;

package/dist/Portal/Portal.miniapp.js

@@ -54,14 +54,20 @@ var import_PortalCore = __toESM(require("./PortalCore"));
 const Portal = (0, import_react.forwardRef)((props, ref) => {
   const { disablePortal } = props;
   const [rootWrapperElement, setRootWrapperElement] = (0, import_react.useState)();
-  (0, import_react.useEffect)(() => {
+  const initialPageInfo = (0, import_react.useMemo)(() => {
+    const currentPages = import_taro.default.getCurrentPages() || [];
+    const currentPage = currentPages[currentPages.length - 1];
+    return {
+      path: currentPage == null ? void 0 : currentPage.$taroPath
+    };
+  }, []);
+  (0, import_react.useLayoutEffect)(() => {
     let root;
-    if (!disablePortal) {
-      const currentPages = import_taro.default.getCurrentPages() || [];
-      const currentPage = currentPages[currentPages.length - 1];
-      const pageElement = currentPage == null ? void 0 : currentPage.$taroPath;
-      const rootElement = document.getElementById(pageElement);
-      const portalId = (rootElement == null ? void 0 : rootElement.sid) ? `${rootElement == null ? void 0 : rootElement.sid}_portalId` : `${pageElement}_portalId`;
+    if (!disablePortal && initialPageInfo.path) {
+      const { path } = initialPageInfo;
+      const rootElement = document.getElementById(path);
+      const elementWithSid = rootElement;
+      const portalId = (elementWithSid == null ? void 0 : elementWithSid.sid) ? `${elementWithSid.sid}_portalId` : `${path}_portalId`;
       const portalWrapperElement = document.getElementById(portalId);
       if (!portalWrapperElement) {
         const view = document.createElement("view");
@@ -73,7 +79,7 @@ const Portal = (0, import_react.forwardRef)((props, ref) => {
       }
     }
     setRootWrapperElement(root);
-  }, []);
+  }, [disablePortal, initialPageInfo.path]);
   return /* @__PURE__ */ import_react.default.createElement(import_PortalCore.default, __spreadProps(__spreadValues({}, props), { ref, rootElement: rootWrapperElement }));
 });
 Portal.displayName = "BuiPortal";

package/dist/ScrollView/ScrollView.types.d.ts

@@ -0,0 +1,292 @@
+import React from 'react';
+import { OverrideProps } from '@bifrostui/types';
+/**
+ * 滚动事件详情
+ */
+export interface ScrollViewScrollEvent extends Event {
+    detail?: {
+        scrollLeft: number;
+        scrollTop: number;
+        scrollHeight: number;
+        scrollWidth: number;
+        deltaX?: number;
+        deltaY?: number;
+        isDrag?: boolean;
+    };
+}
+/**
+ * 拖拽事件详情
+ */
+export interface ScrollViewDragEvent extends Event {
+    detail?: {
+        /** 横向滚动条位置 */
+        scrollLeft?: number;
+        /** 竖向滚动条位置 */
+        scrollTop?: number;
+        /** 滚动速度 */
+        velocity?: number;
+    };
+}
+/**
+ * ScrollIntoView 对齐方式
+ */
+export type ScrollIntoViewAlignment = 'start' | 'center' | 'end' | 'nearest';
+/**
+ * ScrollView 组件属性
+ */
+export type ScrollViewProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 允许横向滚动
+         * @default false
+         */
+        scrollX?: boolean;
+        /**
+         * 允许纵向滚动
+         * @default false
+         */
+        scrollY?: boolean;
+        /**
+         * 设置竖向滚动条位置
+         */
+        scrollTop?: number;
+        /**
+         * 设置横向滚动条位置
+         */
+        scrollLeft?: number;
+        /**
+         * 滚动到指定元素（元素id，不能以数字开头）
+         */
+        scrollIntoView?: string;
+        /**
+         * 指定 scroll-into-view 目标节点在视口内的位置
+         * @default 'start'
+         */
+        scrollIntoViewAlignment?: ScrollIntoViewAlignment;
+        /**
+         * 在设置滚动条位置时使用动画过渡
+         * @default false
+         */
+        scrollWithAnimation?: boolean;
+        /**
+         * 当 scroll-with-animation设置为 true 时，可以设置 scroll-animation-duration 来控制动画的执行时间，单位 ms。
+         */
+        scrollAnimationDuration?: number;
+        /**
+         * 滚动条返回顶部，只支持竖向
+         * 仅小程序可用
+         * @default false
+         */
+        enableBackToTop?: boolean;
+        /**
+         * 启用 flexbox 布局。开启后，当前节点声明了 `display: flex` 就会成为 flex container，并作用于其孩子节点。
+         * 仅小程序可用
+         * @default false
+         */
+        enableFlex?: boolean;
+        /**
+         * 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS `overflow-anchor` 属性。
+         * 仅小程序可用
+         * @default false
+         */
+        scrollAnchoring?: boolean;
+        /**
+         * 启用 scroll-view 增强特性
+         * 仅小程序可用
+         * @default false
+         */
+        enhanced?: boolean;
+        /**
+         * iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         * @default true
+         */
+        bounces?: boolean;
+        /**
+         * 滚动条显隐控制 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         * @default true
+         */
+        showScrollbar?: boolean;
+        /**
+         * 分页滑动效果 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         * @default false
+         */
+        pagingEnabled?: boolean;
+        /**
+         * 滑动减速速率控制 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         * @default false
+         */
+        fastDeceleration?: boolean;
+        /**
+         * 纵向滚动时，当滚动到顶部或底部时，强制禁止触发页面滚动，仍然只触发 scroll-view 自身的滚动。
+         * 仅小程序可用
+         * @default false
+         */
+        trapScroll?: string;
+        /**
+         * 发生滚动前，对滚动方向进行判断，当方向是顶部/左边时，如果值为always将始终禁止滚动，如果值为out-of-bounds 且当前已经滚动到顶部/左边，禁止滚动。
+         * 仅小程序可用
+         */
+        disableLowerScroll?: string;
+        /**
+         * 发生滚动前，对滚动方向进行判断，当方向是底部/右边时，如果值为always将始终禁止滚动，如果值为out-of-bounds 且当前已经滚动到底部/右边，禁止滚动。
+         * 仅小程序可用
+         */
+        disableUpperScroll?: string;
+        /**
+         * 无障碍访问，（属性）元素的额外描述
+         * 仅小程序可用
+         */
+        ariaLabel?: string;
+        /**
+         * 开启 passive 特性，能优化一定的滚动性能
+         * 仅小程序可用
+         * @default false
+         */
+        enablePassive?: string;
+        /**
+         * 渲染模式
+         * list - 列表模式。只会渲染在屏节点，会根据直接子节点是否在屏来按需渲染，若只有一个直接子节点则性能会退化
+         * custom - 自定义模式。只会渲染在屏节点，子节点可以是 sticky-section list-view grid-view 等组件
+         * 仅小程序可用
+         * @default 'list'
+         */
+        type?: 'list' | 'custom';
+        /**
+         * 是否反向滚动。一般初始滚动位置是在顶部，反向滚动则是在底部。
+         * 仅小程序可用
+         * @default false
+         */
+        reverse?: boolean;
+        /**
+         * 指定视口外渲染区域的距离，默认情况下视口外节点不渲染。指定 cache-extent 可优化滚动体验和加载速度，但会提高内存占用且影响首屏速度，可按需启用。
+         * 仅小程序可用
+         */
+        cacheExtent?: number;
+        /**
+         * 只 scroll-into-view 到 cacheExtent 以内的目标节点，性能更佳
+         * 仅小程序可用
+         * @default false
+         */
+        scrollIntoViewWithinExtent?: boolean;
+        /**
+         * 开启自定义下拉刷新
+         * 仅小程序可用
+         * @default false
+         */
+        refresherEnabled?: boolean;
+        /**
+         * 设置自定义下拉刷新默认样式，支持设置 `black | white | none`， none 表示不使用默认样式
+         * 仅小程序可用
+         * @default 'black'
+         */
+        refresherDefaultStyle?: string;
+        /**
+         * 设置自定义下拉刷新区域背景颜色
+         * 仅小程序可用
+         * @default '#FFF'
+         */
+        refresherBackground?: string;
+        /**
+         * 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
+         * 仅小程序可用
+         * @default false
+         */
+        refresherTriggered?: boolean;
+        /**
+         * 距顶部/左边多远时（单位px），触发 onScrollToUpper 事件
+         * @default 50
+         */
+        upperThreshold?: number;
+        /**
+         * 距底部/右边多远时（单位px），触发 onScrollToLower 事件
+         * @default 50
+         */
+        lowerThreshold?: number;
+        /**
+         * 滚动到顶部/左边时触发
+         */
+        onScrollToUpper?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 滚动到底部/右边时触发
+         */
+        onScrollToLower?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 滚动时触发
+         */
+        onScroll?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewScrollEvent>) => void;
+        /**
+         * 触摸移动时触发
+         */
+        onTouchMove?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
+        /**
+         * 滚动开始事件
+         * 仅小程序可用
+         */
+        onScrollStart?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewScrollEvent>) => void;
+        /**
+         * 滚动结束事件
+         * 仅小程序可用
+         */
+        onScrollEnd?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewScrollEvent>) => void;
+        /**
+         * 自定义下拉刷新控件被下拉
+         * 仅小程序可用
+         */
+        onRefresherPulling?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 自定义下拉刷新被触发
+         * 仅小程序可用
+         */
+        onRefresherRefresh?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 自定义下拉刷新被复位
+         * 仅小程序可用
+         */
+        onRefresherRestore?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 自定义下拉刷新被中止
+         * 仅小程序可用
+         */
+        onRefresherAbort?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 自定义下拉刷新即将触发刷新（拖动超过 refresher-threshold 时）的事件
+         * 仅小程序可用
+         */
+        onRefresherWillRefresh?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 滑动开始事件 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         */
+        onDragStart?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewDragEvent>) => void;
+        /**
+         * 滑动事件 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         */
+        onDragging?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewDragEvent>) => void;
+        /**
+         * 滑动结束事件 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         */
+        onDragEnd?: (e: React.SyntheticEvent<HTMLDivElement, ScrollViewDragEvent>) => void;
+        /**
+         * 触摸动作开始。
+         * 仅小程序可用
+         */
+        onTouchStart?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
+        /**
+         * 触摸动作结束。
+         * 仅小程序可用
+         */
+        onTouchEnd?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
+        /**
+         * 触摸动作被打断，如来电提醒、弹窗。
+         * 仅小程序可用
+         */
+        onTouchCancel?: (e: React.SyntheticEvent<HTMLDivElement, TouchEvent>) => void;
+    };
+    defaultComponent: D;
+}, D>;

package/dist/Slide/Slide.miniapp.js

@@ -142,15 +142,18 @@ const Slide = /* @__PURE__ */ import_react.default.forwardRef(
     const transitions = (0, import_utils.createTransitions)();
     const animationName = getAnimationName(direction, inProp);
     const animationDurationAndDelay = getAnimationDurationAndDelay();
-    const animation = transitions.create(
-      animationName,
-      (0, import_utils.getTransitionProps)(
-        __spreadProps(__spreadValues({}, animationDurationAndDelay), {
-          style,
-          easing: easingProp
-        }),
-        { mode: inProp ? "enter" : "exit" }
-      )
+    const animation = (0, import_react.useMemo)(
+      () => transitions.create(
+        animationName,
+        (0, import_utils.getTransitionProps)(
+          __spreadProps(__spreadValues({}, animationDurationAndDelay), {
+            style,
+            easing: easingProp
+          }),
+          { mode: inProp ? "enter" : "exit" }
+        )
+      ),
+      [inProp]
     );
     (0, import_react.useEffect)(() => {
       if (inProp && !isMounted) {
@@ -171,7 +174,7 @@ const Slide = /* @__PURE__ */ import_react.default.forwardRef(
       } else {
         onExit == null ? void 0 : onExit(elementRef.current);
       }
-    }, [inProp, isMounted, shouldExecuteAnimation, onEnter, onExit]);
+    }, [inProp, isMounted]);
     const handleAnimationStart = () => {
       if (!shouldExecuteAnimation)
         return;

package/es/Button/index.css

@@ -20,8 +20,8 @@ xhs-page {
   --bui-btn-small-padding: 0 11px;
   --bui-btn-padding: 0 14px;
   --bui-btn-large-padding: 0 14px;
+  --bui-btn-large-font-size: var(--bui-text-size-2);
   --bui-btn-full-font-size: var(--bui-title-size-4);
-  --bui-btn-full-font-family: var(--bui-font-family);
 }
 .bui-btn {
   outline: 0;
@@ -95,13 +95,12 @@ xhs-page {
   border-radius: var(--bui-btn-small-border-radius);
 }
 .bui-btn-large {
-  font-size: var(--bui-text-size-2);
+  font-size: var(--bui-btn-large-font-size);
   padding: var(--bui-btn-large-padding);
   height: var(--bui-btn-large-height);
   border-radius: var(--bui-btn-large-border-radius);
 }
 .bui-btn-full {
-  font-family: var(--bui-btn-full-font-family);
   font-size: var(--bui-btn-full-font-size);
   width: 100%;
   height: var(--bui-btn-full-height);

package/es/Fade/Fade.miniapp.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useRef, useMemo } from "react";
 import {
   createTransitions,
   duration,
@@ -106,15 +106,18 @@ const Fade = /* @__PURE__ */ React.forwardRef((props, ref) => {
   const transitions = createTransitions();
   const animationName = inProp ? "bui-fade-in" : "bui-fade-out";
   const animationDurationAndDelay = getAnimationDurationAndDelay();
-  const animation = transitions.create(
-    animationName,
-    getTransitionProps(
-      __spreadProps(__spreadValues({}, animationDurationAndDelay), {
-        style,
-        easing: easingProp
-      }),
-      { mode: inProp ? "enter" : "exit" }
-    )
+  const animation = useMemo(
+    () => transitions.create(
+      animationName,
+      getTransitionProps(
+        __spreadProps(__spreadValues({}, animationDurationAndDelay), {
+          style,
+          easing: easingProp
+        }),
+        { mode: inProp ? "enter" : "exit" }
+      )
+    ),
+    [inProp, animationName, animationDurationAndDelay, easingProp, style]
   );
   useEffect(() => {
     if (inProp && !isMounted) {
@@ -135,7 +138,7 @@ const Fade = /* @__PURE__ */ React.forwardRef((props, ref) => {
     } else {
       onExit == null ? void 0 : onExit(elementRef.current);
     }
-  }, [inProp, isMounted, shouldExecuteAnimation, onEnter, onExit]);
+  }, [inProp, isMounted]);
   const handleAnimationStart = () => {
     if (!shouldExecuteAnimation)
       return;

package/es/{src/Modal → 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 | "container" | "open" | "onClose" | "disablePortal" | "BackdropProps" | "keepMounted" | "hideBackdrop" | "disableScrollLock">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, keyof import("@bifrostui/types").ICommonProps | "open" | "container" | "disablePortal" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Modal;

package/es/Portal/Portal.miniapp.js

@@ -18,19 +18,25 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import Taro from "@tarojs/taro";
-import React, { forwardRef, useEffect, useState } from "react";
+import React, { forwardRef, useLayoutEffect, useState, useMemo } from "react";
 import PortalCore from "./PortalCore";
 const Portal = forwardRef((props, ref) => {
   const { disablePortal } = props;
   const [rootWrapperElement, setRootWrapperElement] = useState();
-  useEffect(() => {
+  const initialPageInfo = useMemo(() => {
+    const currentPages = Taro.getCurrentPages() || [];
+    const currentPage = currentPages[currentPages.length - 1];
+    return {
+      path: currentPage == null ? void 0 : currentPage.$taroPath
+    };
+  }, []);
+  useLayoutEffect(() => {
     let root;
-    if (!disablePortal) {
-      const currentPages = Taro.getCurrentPages() || [];
-      const currentPage = currentPages[currentPages.length - 1];
-      const pageElement = currentPage == null ? void 0 : currentPage.$taroPath;
-      const rootElement = document.getElementById(pageElement);
-      const portalId = (rootElement == null ? void 0 : rootElement.sid) ? `${rootElement == null ? void 0 : rootElement.sid}_portalId` : `${pageElement}_portalId`;
+    if (!disablePortal && initialPageInfo.path) {
+      const { path } = initialPageInfo;
+      const rootElement = document.getElementById(path);
+      const elementWithSid = rootElement;
+      const portalId = (elementWithSid == null ? void 0 : elementWithSid.sid) ? `${elementWithSid.sid}_portalId` : `${path}_portalId`;
       const portalWrapperElement = document.getElementById(portalId);
       if (!portalWrapperElement) {
         const view = document.createElement("view");
@@ -42,7 +48,7 @@ const Portal = forwardRef((props, ref) => {
       }
     }
     setRootWrapperElement(root);
-  }, []);
+  }, [disablePortal, initialPageInfo.path]);
   return /* @__PURE__ */ React.createElement(PortalCore, __spreadProps(__spreadValues({}, props), { ref, rootElement: rootWrapperElement }));
 });
 Portal.displayName = "BuiPortal";