@bifrostui/react 0.0.5

package/es/ScrollView/ScrollView.js

@@ -0,0 +1,204 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { useForkRef } from '@bifrostui/utils';
+import clsx from 'clsx';
+import React, { forwardRef, useCallback, useEffect, useRef } from 'react';
+import "./ScrollView.css";
+function easeOutScroll(from, to, callback) {
+  if (from === to || typeof from !== 'number') {
+    return;
+  }
+  var change = to - from;
+  var dur = 500;
+  var sTime = +new Date();
+  function linear(t, b, c, d) {
+    return c * t / d + b;
+  }
+  var isLarger = to >= from;
+  function step() {
+    var stepFrom = linear(+new Date() - sTime, from, change, dur);
+    if (isLarger && stepFrom >= to || !isLarger && to >= stepFrom) {
+      callback === null || callback === void 0 || callback(to);
+      return;
+    }
+    callback === null || callback === void 0 || callback(stepFrom);
+    requestAnimationFrame(step);
+  }
+  step();
+}
+var classes = {
+  root: 'bui-scroll'
+};
+var ScrollView = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    onScroll = props.onScroll,
+    onScrollToUpper = props.onScrollToUpper,
+    onScrollToLower = props.onScrollToLower,
+    scrollTopProp = props.scrollTop,
+    scrollLeftProp = props.scrollLeft,
+    scrollX = props.scrollX,
+    scrollY = props.scrollY,
+    scrollIntoView = props.scrollIntoView,
+    propsOnTouchMove = props.onTouchMove,
+    scrollIntoViewAlignment = props.scrollIntoViewAlignment,
+    children = props.children;
+  var container = useRef(null);
+  var handleRef = useForkRef(ref, container);
+  var onTouchMove = function onTouchMove(e) {
+    e.stopPropagation();
+  };
+  var scrollVertical = useCallback(function (top, isAnimation) {
+    if (top === undefined) return;
+    if (isAnimation) {
+      easeOutScroll(container.current.scrollTop, top, function (pos) {
+        if (container.current) container.current.scrollTop = pos;
+      });
+    } else if (container.current) container.current.scrollTop = top;
+  }, []);
+  var scrollHorizontal = useCallback(function (left, isAnimation) {
+    if (left === undefined) return;
+    if (isAnimation) {
+      easeOutScroll(container.current.scrollLeft, left, function (pos) {
+        if (container.current) container.current.scrollLeft = pos;
+      });
+    } else if (container.current) container.current.scrollLeft = left;
+  }, []);
+  var handleScroll = useCallback(function () {
+    var _container$current, _container$current$qu;
+    var isInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var isAnimation = ('scrollWithAnimation' in props);
+    // scrollIntoView
+    if (scrollIntoView && typeof scrollIntoView === 'string' && container !== null && container !== void 0 && (_container$current = container.current) !== null && _container$current !== void 0 && (_container$current$qu = _container$current.querySelector) !== null && _container$current$qu !== void 0 && _container$current$qu.call(_container$current, "#".concat(scrollIntoView))) {
+      var doScrollIntoView = function doScrollIntoView(id) {
+        var alignment = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'start';
+        var _isAnimation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : isAnimation;
+        var target = container.current.querySelector("#".concat(id));
+        if (scrollY) {
+          var start = target.offsetTop;
+          var end = target.offsetTop + target.offsetHeight - container.current.clientHeight;
+          var nearest;
+          if (container.current.scrollTop < end) nearest = end;else if (container.current.scrollTop > start) nearest = start;
+          var center = (start + end) / 2;
+          scrollVertical({
+            start: start,
+            end: end,
+            nearest: nearest,
+            center: center
+          }[alignment], _isAnimation);
+        }
+        if (scrollX) {
+          var _start = target.offsetLeft;
+          var _end = target.offsetLeft + target.offsetWidth - container.current.clientWidth;
+          var _nearest;
+          if (container.current.scrollTop < _end) _nearest = _end;else if (container.current.scrollTop > _start) _nearest = _start;
+          var _center = (_start + _end) / 2;
+          scrollHorizontal({
+            start: _start,
+            end: _end,
+            nearest: _nearest,
+            center: _center
+          }[alignment], _isAnimation);
+        }
+      };
+      if (isInit) {
+        setTimeout(function () {
+          return doScrollIntoView(scrollIntoView, scrollIntoViewAlignment, isAnimation);
+        }, 500);
+      } else {
+        doScrollIntoView(scrollIntoView, scrollIntoViewAlignment, isAnimation);
+      }
+    } else {
+      // Y 轴滚动
+      if (scrollY && typeof scrollTopProp === 'number' && scrollTopProp !== container.current.scrollTop) {
+        if (isInit) {
+          setTimeout(function () {
+            return scrollVertical(scrollTopProp, isAnimation);
+          }, 10);
+        } else {
+          scrollVertical(scrollTopProp, isAnimation);
+        }
+      }
+      // X 轴滚动
+      if (scrollX && typeof scrollLeftProp === 'number' && scrollLeftProp !== container.current.scrollLeft) {
+        if (isInit) {
+          setTimeout(function () {
+            return scrollHorizontal(scrollLeftProp, isAnimation);
+          }, 10);
+        } else {
+          scrollHorizontal(scrollLeftProp, isAnimation);
+        }
+      }
+    }
+  }, [scrollIntoView, scrollY, scrollTopProp, scrollX, scrollLeftProp]);
+  useEffect(function () {
+    handleScroll(true);
+  }, []);
+  useEffect(function () {
+    handleScroll();
+  }, [scrollIntoView, scrollY, scrollTopProp, scrollX, scrollLeftProp]);
+  var _props$upperThreshold = props.upperThreshold,
+    upperThreshold = _props$upperThreshold === void 0 ? 50 : _props$upperThreshold,
+    _props$lowerThreshold = props.lowerThreshold,
+    lowerThreshold = _props$lowerThreshold === void 0 ? 50 : _props$lowerThreshold;
+  var cls = clsx(classes.root, _defineProperty(_defineProperty({}, "".concat(classes.root, "-view-scroll-x"), scrollX), "".concat(classes.root, "-view-scroll-y"), scrollY), className);
+  upperThreshold = Number(upperThreshold);
+  lowerThreshold = Number(lowerThreshold);
+  var upperLowerStatus = useRef(0);
+  var upperAndLower = function upperAndLower(e) {
+    if (!container.current) return;
+    var _container$current2 = container.current,
+      offsetWidth = _container$current2.offsetWidth,
+      offsetHeight = _container$current2.offsetHeight,
+      scrollLeft = _container$current2.scrollLeft,
+      scrollTop = _container$current2.scrollTop,
+      scrollHeight = _container$current2.scrollHeight,
+      scrollWidth = _container$current2.scrollWidth;
+    if (onScrollToLower && (scrollY && offsetHeight + scrollTop + lowerThreshold >= scrollHeight || scrollX && offsetWidth + scrollLeft + lowerThreshold >= scrollWidth)) {
+      if (upperLowerStatus.current !== -1) onScrollToLower(e);
+      upperLowerStatus.current = -1;
+    } else if (onScrollToUpper && (scrollY && scrollTop <= upperThreshold || scrollX && scrollLeft <= upperThreshold)) {
+      if (upperLowerStatus.current !== 1) onScrollToUpper(e);
+      upperLowerStatus.current = 1;
+    } else {
+      upperLowerStatus.current = 0;
+    }
+  };
+  var onScrollHandler = function onScrollHandler(e) {
+    var _container$current3 = container.current,
+      scrollLeft = _container$current3.scrollLeft,
+      scrollTop = _container$current3.scrollTop,
+      scrollHeight = _container$current3.scrollHeight,
+      scrollWidth = _container$current3.scrollWidth;
+    // container.current.scrollLeft = scrollLeft;
+    // container.current.scrollTop = scrollTop;
+    Object.defineProperty(e, 'detail', {
+      enumerable: true,
+      writable: true,
+      value: {
+        scrollLeft: scrollLeft,
+        scrollTop: scrollTop,
+        scrollHeight: scrollHeight,
+        scrollWidth: scrollWidth
+      }
+    });
+    upperAndLower(e);
+    onScroll === null || onScroll === void 0 || onScroll(e);
+  };
+  var onTouchMoveHandler = function onTouchMoveHandler(e) {
+    var _ref;
+    (_ref = propsOnTouchMove || onTouchMove) === null || _ref === void 0 || _ref(e);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: handleRef,
+    style: style,
+    className: cls,
+    onScroll: onScrollHandler,
+    onTouchMove: onTouchMoveHandler
+  }, children);
+});
+ScrollView.displayName = 'BuiScrollView';
+export default ScrollView;

package/es/ScrollView/ScrollView.types.d.ts

@@ -0,0 +1,258 @@
+import React from 'react';
+import { OverrideProps } from '@bifrostui/types';
+interface ScrollViewScrollEvent extends Event {
+    detail?: {
+        scrollLeft: number;
+        scrollTop: number;
+        scrollHeight: number;
+        scrollWidth: number;
+        deltaX?: number;
+        deltaY?: number;
+        isDrag?: boolean;
+    };
+}
+interface ScrollViewDragEvent extends Event {
+    detail?: {
+        /** 横向滚动条位置 */
+        scrollLeft?: number;
+        /** 竖向滚动条位置 */
+        scrollTop?: number;
+        /** 滚动速度 */
+        velocity?: number;
+    };
+}
+export type ScrollViewProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 允许横向滚动
+         * @default false
+         * @type {boolean}
+         */
+        scrollX?: boolean;
+        /**
+         * 允许纵向滚动
+         * @default false
+         * @type {boolean}
+         */
+        scrollY?: boolean;
+        /**
+         * 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
+         * @default 50
+         * @type {number}
+         */
+        upperThreshold?: number;
+        /**
+         * 距底部/右边多远时（单位px），触发 scrolltolower 事件
+         * @default 50
+         * @type {number}
+         */
+        lowerThreshold?: number;
+        /**
+         * 设置竖向滚动条位置
+         * @type {number}
+         */
+        scrollTop?: number;
+        /**
+         * 设置横向滚动条位置
+         * @type {number}
+         */
+        scrollLeft?: number;
+        /**
+         * 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
+         * @type {string}
+         */
+        scrollIntoView?: string;
+        /**
+         * 在设置滚动条位置时使用动画过渡
+         * @default false
+         * @type {boolean}
+         */
+        scrollWithAnimation?: boolean;
+        /** 指定 scroll-into-view 目标节点在视口内的位置。
+         * start - 目标节点显示在视口开始处
+         * center - 目标节点显示在视口中间
+         * end - 目标节点显示在视口结束处
+         * nearest - 目标节点在就近的视口边缘显示，若节点已在视口内则不触发滚动
+         * @default 'start'
+         */
+        scrollIntoViewAlignment?: ScrollLogicalPosition;
+        /**
+         * 滚动条返回顶部，只支持竖向
+         * @default false
+         * @type {boolean}
+         */
+        enableBackToTop?: boolean;
+        /** 启用 flexbox 布局。开启后，当前节点声明了 `display: flex` 就会成为 flex container，并作用于其孩子节点。
+         * 仅小程序可用
+         * @default false
+         */
+        enableFlex?: boolean;
+        /** 开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS `overflow-anchor` 属性。
+         * 仅小程序可用
+         * @default false
+         */
+        scrollAnchoring?: boolean;
+        /** 开启自定义下拉刷新
+         * 仅小程序可用
+         * @default false
+         */
+        refresherEnabled?: boolean;
+        /** 设置自定义下拉刷新默认样式，支持设置 `black | white | none`， none 表示不使用默认样式
+         * 仅小程序可用
+         * @default 'black'
+         */
+        refresherDefaultStyle?: string;
+        /** 设置自定义下拉刷新区域背景颜色
+         * 仅小程序可用
+         * @default '#FFF'
+         */
+        refresherBackground?: string;
+        /** 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
+         * 仅小程序可用
+         * @default false
+         */
+        refresherTriggered?: 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;
+        /** boolean	false	滑动减速速率控制 (同时开启 enhanced 属性后生效)
+         * 仅小程序可用
+         * @default false
+         */
+        fastDeceleration?: boolean;
+        /** 当 scroll-with-animation设置为 true 时，可以设置 scroll-animation-duration 来控制动画的执行时间，单位 ms。
+         * 仅小程序可用
+         */
+        scrollAnimationDuration?: number;
+        /** 纵向滚动时，当滚动到顶部或底部时，强制禁止触发页面滚动，仍然只触发 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;
+        /**
+         * 滚动到顶部/左边，会触发 scrolltoupper 事件
+         */
+        onScrollToUpper?: (e: React.SyntheticEvent<HTMLDivElement, Event>) => void;
+        /**
+         * 滚动到底部/右边，会触发 scrolltolower 事件
+         */
+        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>;
+export {};

package/es/ScrollView/ScrollView.types.js

@@ -0,0 +1 @@
+export {};

package/es/ScrollView/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './ScrollView';
+export { default as ScrollView } from './ScrollView';
+export * from './ScrollView.types';

package/es/ScrollView/index.js

@@ -0,0 +1,3 @@
+export { default } from "./ScrollView";
+export { default as ScrollView } from "./ScrollView";
+export * from "./ScrollView.types";

package/es/ScrollView/index.miniapp.d.ts

@@ -0,0 +1,3 @@
+import { ScrollView } from '@tarojs/components';
+export default ScrollView;
+export { ScrollView };

package/es/ScrollView/index.miniapp.js

@@ -0,0 +1,3 @@
+import { ScrollView } from '@tarojs/components';
+export default ScrollView;
+export { ScrollView };

package/es/Select/Select.css

@@ -0,0 +1,89 @@
+.bui-select {
+  position: relative;
+  cursor: pointer;
+  height: 27px;
+  min-width: 100px;
+  font-size: var(--bui-title-size-3);
+  border-radius: 5px;
+  background-color: var(--bui-color-bg-view);
+  font-family: var(--bui-font-family);
+}
+.bui-select:active,
+.bui-select-active {
+  box-shadow: 0 0 0 2px var(--bui-color-bg-default);
+}
+.bui-select-selector-container {
+  display: flex;
+  align-items: center;
+  padding: 0 14px;
+  height: 100%;
+}
+.bui-select-input {
+  width: 0;
+  height: 0;
+  border: 0;
+  opacity: 0;
+}
+.bui-select-placeholder {
+  color: var(--bui-color-fg-disabled);
+}
+.bui-select-selector {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1;
+  height: 27px;
+  background-color: transparent;
+  outline: none;
+  border: 0;
+}
+.bui-select-selector-icon {
+  font-size: var(--bui-title-size-3);
+}
+.bui-select-option-container {
+  position: absolute;
+  box-sizing: border-box;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  z-index: var(--bui-z-index-dropdown);
+  margin-top: 6px;
+  background-color: var(--bui-color-bg-view);
+  padding: 2px;
+  overflow: hidden;
+}
+.bui-select-option-main {
+  border-radius: 3px;
+  padding: 3px 0;
+  box-shadow: 0 0 0 2px var(--bui-color-bg-default);
+  overflow: hidden;
+}
+.bui-select-option {
+  display: flex;
+  align-items: center;
+  height: 27px;
+  padding: 0 14px;
+  border-radius: 5px;
+  margin: 0 3px;
+}
+.bui-select-option:hover {
+  background-color: var(---bui-select-options-active-bg, #fff2f0);
+  color: var(--bui-color-primary);
+}
+.bui-select-option-active {
+  font-weight: 500;
+  color: var(--bui-color-primary);
+  background-color: var(---bui-select-options-active-bg, #fff2f0);
+}
+.bui-select-option-hide {
+  opacity: 0;
+  transform: translateY(-5px);
+}
+.bui-select.bui-select-disabled,
+.bui-select-option-disabled {
+  pointer-events: none;
+  box-shadow: none;
+  background-color: var(--bui-color-bg-view);
+  color: var(--bui-color-fg-subtle);
+  border: none;
+}

package/es/Select/Select.d.ts

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