@bifrostui/react 1.0.5 → 1.1.5

package/dist/Picker/PickerPanel.js

@@ -0,0 +1,210 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("@bifrostui/utils");
+require("./PickerPanel.css");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const prefixCls = 'bui-picker-panel';
+const PickerPanel = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    options = [],
+    defaultValue,
+    onSelect,
+    columnIndex,
+    ...others
+  } = props;
+  const touch = (0, _utils.useTouch)();
+  let timer;
+  // 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `INERTIA_TIME` 且 move 距离大于 `INERTIA_DISTANCE` 时，触发惯性滑动
+  const INERTIA_TIME = 300;
+  const INERTIA_DISTANCE = 15;
+  const DEFAULT_DURATION = 200;
+  const LINE_SPACING = 36;
+  const ROTATION = 20;
+  const TOUCH_END = 'end';
+  const [startY, setStartY] = (0, _react.useState)(0);
+  const [currIndex, setCurrIndex] = (0, _react.useState)(1);
+  const [startTime, setStartTime] = (0, _react.useState)(0);
+  const [touchTime, setTouchTime] = (0, _react.useState)(0);
+  const [touchDeg, setTouchDeg] = (0, _react.useState)('0deg');
+  const [scrollDistance, setScrollDistance] = (0, _react.useState)(0);
+  const transformY = (0, _react.useRef)(0);
+  const isVerticalMoving = (0, _react.useRef)(false);
+  const PickerPanelRef = (0, _react.useRef)(null);
+  const pickerPanelRef = (0, _utils.useForkRef)(PickerPanelRef, ref);
+  (0, _utils.useTouchEmulator)(PickerPanelRef.current);
+  const updateSelect = () => {
+    let index = -1;
+    if (defaultValue) {
+      options.some((item, idx) => {
+        if (item.value === defaultValue) {
+          index = idx;
+          return true;
+        }
+        return false;
+      });
+    }
+    setCurrIndex(index === -1 ? 1 : index + 1);
+    const move = index === -1 ? 0 : index * LINE_SPACING;
+    setMove({
+      move: -move
+    });
+  };
+  (0, _react.useEffect)(() => {
+    setScrollDistance(0);
+    transformY.current = 0;
+    updateSelect();
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [options]);
+  const setTransform = (type, deg, time = DEFAULT_DURATION, translateY = 0) => {
+    let nTime = time;
+    if (type !== TOUCH_END) {
+      nTime = 0;
+    }
+    setTouchTime(nTime);
+    setTouchDeg(deg);
+    setScrollDistance(translateY);
+  };
+  const setMove = config => {
+    const {
+      move,
+      type,
+      time
+    } = config || {};
+    let updateMove = move + transformY.current;
+    if (type === TOUCH_END) {
+      // 限定滚动距离
+      if (updateMove > 0) {
+        updateMove = 0;
+      }
+      if (updateMove < -(options.length - 1) * LINE_SPACING) {
+        updateMove = -(options.length - 1) * LINE_SPACING;
+      }
+
+      // 设置滚动距离为LINE_SPACING的倍数值
+      const endMove = Math.round(updateMove / LINE_SPACING) * LINE_SPACING;
+      const deg = `${(Math.abs(Math.round(endMove / LINE_SPACING)) + 1) * ROTATION}deg`;
+      setTransform(type, deg, time, endMove);
+      setCurrIndex(Math.abs(Math.round(endMove / LINE_SPACING)) + 1);
+    } else {
+      let deg = 0;
+      const currentDeg = (-updateMove / LINE_SPACING + 1) * ROTATION;
+
+      // picker 滚动的最大角度
+      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`, undefined, updateMove);
+        setCurrIndex(Math.abs(Math.round(updateMove / LINE_SPACING)) + 1);
+      }
+    }
+  };
+
+  // 惯性滚动距离
+  const momentum = (distance, duration) => {
+    let nDistance = distance;
+    // 惯性滚动的速度
+    const speed = Math.abs(nDistance / duration);
+    // 惯性滚动的距离
+    nDistance = speed / 0.003 * (nDistance < 0 ? -1 : 1);
+    return nDistance;
+  };
+  const panelTouchStart = event => {
+    touch.start(event);
+    setStartY(touch.deltaY.current);
+    setStartTime(Date.now());
+    transformY.current = scrollDistance;
+  };
+  const panelTouchMove = event => {
+    touch.move(event);
+    if (touch.isVertical) {
+      isVerticalMoving.current = true;
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    const move = touch.deltaY.current - startY;
+    setMove({
+      move
+    });
+  };
+  const panelTouchEnd = () => {
+    if (!isVerticalMoving.current) return;
+    const move = touch.deltaY.current - startY;
+    const moveTime = Date.now() - startTime;
+    if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
+      // 惯性滚动
+      const distance = momentum(move, moveTime);
+      setMove({
+        move: distance,
+        type: TOUCH_END,
+        time: 1000
+      });
+    } else {
+      // 非惯性滚动
+      setMove({
+        move,
+        type: TOUCH_END
+      });
+    }
+    timer = setTimeout(() => {
+      touch.reset();
+    }, 0);
+  };
+  (0, _react.useEffect)(() => {
+    PickerPanelRef.current?.addEventListener('touchstart', panelTouchStart);
+    PickerPanelRef.current?.addEventListener('touchmove', panelTouchMove);
+    PickerPanelRef.current?.addEventListener('touchend', panelTouchEnd);
+    return () => {
+      PickerPanelRef.current?.removeEventListener('touchstart', panelTouchStart);
+      PickerPanelRef.current?.removeEventListener('touchmove', panelTouchMove);
+      PickerPanelRef.current?.removeEventListener('touchend', panelTouchEnd);
+    };
+  });
+  const onTransitionEnd = e => {
+    isVerticalMoving.current = false;
+    setTouchTime(0);
+    onSelect?.(e, {
+      columnOption: options?.[Math.round(-scrollDistance / LINE_SPACING)],
+      columnIndex
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: prefixCls,
+    ref: pickerPanelRef,
+    onTouchStart: panelTouchStart,
+    onTouchMove: panelTouchMove,
+    onTouchEnd: panelTouchEnd
+  }, others), /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-roller`,
+    style: {
+      transition: `transform ${touchTime}ms cubic-bezier(0.17, 0.89, 0.45, 1)`,
+      transform: `rotate3d(1, 0, 0, ${touchDeg})`
+    },
+    onTransitionEnd: onTransitionEnd
+  }, options.map((item, i) => /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(`${prefixCls}-option`, {
+      [`${prefixCls}-option-hidden`]: i + 1 <= currIndex - 8 || i + 1 >= currIndex + 8
+    }),
+    key: `${item?.value}-${i}`,
+    style: {
+      transform: `rotate3d(1, 0, 0, ${-ROTATION * (i + 1)}deg) translate3d(0px, 0px, 104px)`
+    }
+  }, item?.label))), /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-mask`
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-indicator`
+  }));
+});
+PickerPanel.displayName = 'BuiPickerPanel';
+var _default = exports.default = PickerPanel;

package/dist/Picker/PickerPanel.less

@@ -0,0 +1,67 @@
+@import '~@bifrostui/styles/mixins/index.less';
+
+.bui-picker-panel {
+  flex: 1;
+  flex-shrink: 0;
+  position: relative;
+  font-family: var(--bui-font-family);
+
+  &-roller {
+    transform: rotate3d(1, 0, 0, 60deg);
+    transform-style: preserve-3d;
+    position: absolute;
+    top: var(--indicator-top);
+    width: 100%;
+    height: var(--option-height);
+  }
+
+  &-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(
+        180deg,
+        var(--bui-color-bg-view-opacity-9),
+        var(--bui-color-bg-view-opacity-4)
+      ),
+      linear-gradient(
+        0deg,
+        var(--bui-color-bg-view-opacity-9),
+        var(--bui-color-bg-view-opacity-4)
+      );
+    background-position: top, bottom;
+    background-size: 100% var(--indicator-top);
+    background-repeat: no-repeat;
+    transform: translateZ(0);
+  }
+
+  &-indicator {
+    position: absolute;
+    top: var(--indicator-top);
+    height: var(--indicator-height);
+    width: 100%;
+    border-top: 1px solid var(--indicator-border-color);
+    border-bottom: 1px solid var(--indicator-border-color);
+  }
+
+  &-option {
+    position: absolute;
+    top: 0;
+    left: 0;
+    text-align: center;
+    height: var(--option-height);
+    line-height: var(--option-height);
+    color: var(--option-color);
+    font-size: var(--option-font-size);
+    backface-visibility: hidden;
+    .ellipsis();
+    width: 100%;
+  }
+
+  &-option-hidden {
+    visibility: hidden;
+    opacity: 0;
+  }
+}

package/dist/Picker/index.d.ts

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

package/dist/Picker/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Picker: true
+};
+Object.defineProperty(exports, "Picker", {
+  enumerable: true,
+  get: function () {
+    return _Picker.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Picker.default;
+  }
+});
+var _Picker = _interopRequireDefault(require("./Picker"));
+var _Picker2 = require("./Picker.types");
+Object.keys(_Picker2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Picker2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Picker2[key];
+    }
+  });
+});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/Picker/utils.d.ts

@@ -0,0 +1,13 @@
+import { ICascadePickerOptionItem } from './Picker.types';
+/**
+ * 根据第一列数据判断选择器类型
+ */
+export declare const pickerPanelType: (options?: any[]) => "multiple" | "single" | "cascade";
+/**
+ * 格式化级联模式数据
+ */
+export declare const formatCascade: (columns: ICascadePickerOptionItem[], values?: (number | string)[]) => ICascadePickerOptionItem[][];
+/**
+ * 统一options数据格式
+ */
+export declare const formatOptions: (internalValue: any, options?: any[]) => any[];

package/dist/Picker/utils.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pickerPanelType = exports.formatOptions = exports.formatCascade = void 0;
+/**
+ * 根据第一列数据判断选择器类型
+ */
+const pickerPanelType = (options = []) => {
+  const firstColumn = options[0];
+
+  // 多列模式
+  if (Array.isArray(firstColumn)) {
+    return 'multiple';
+  }
+
+  // 级联模式
+  if (firstColumn?.children) {
+    return 'cascade';
+  }
+
+  // 单列模式
+  return 'single';
+};
+
+/**
+ * 格式化级联模式数据
+ */
+exports.pickerPanelType = pickerPanelType;
+const formatCascade = (columns, values) => {
+  const result = [];
+  let columnOptions = {
+    label: '',
+    value: '',
+    children: columns
+  };
+  let columnIndex = 0;
+  while (columnOptions?.children) {
+    const options = columnOptions.children;
+    const value = values?.[columnIndex];
+    let index = options.findIndex(item => item.value === value);
+    if (index === -1) index = 0;
+    columnOptions = columnOptions.children[index];
+    columnIndex += 1;
+    result.push(options);
+  }
+  return result;
+};
+
+/**
+ * 统一options数据格式
+ */
+exports.formatCascade = formatCascade;
+const formatOptions = (internalValue, options = []) => {
+  const panelType = pickerPanelType(options);
+  switch (panelType) {
+    case 'multiple':
+      return options;
+    case 'cascade':
+      return formatCascade(options, internalValue);
+    default:
+      return options;
+  }
+};
+exports.formatOptions = formatOptions;

package/dist/Progress/Progress.less

@@ -0,0 +1,24 @@
+.bui-progress {
+  --fill-color: var(--bui-color-primary);
+  --trail-color: rgba(156, 156, 165, 0.2);
+  --stroke-width: 8px;
+  width: 100%;
+  font-family: var(--bui-font-family);
+
+  &-inner {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    overflow: hidden;
+    vertical-align: middle;
+    background-color: var(--trail-color);
+    border-radius: 100px;
+  }
+
+  &-bg {
+    position: relative;
+    border-radius: 100px;
+    background-color: var(--fill-color);
+    height: var(--stroke-width);
+  }
+}

package/dist/Radio/Radio.less

@@ -0,0 +1,81 @@
+.bui-radio {
+  --label-color: var(--bui-color-fg-default);
+  --label-font-size: var(--bui-text-size-1);
+  --icon-font-size: var(--bui-title-size-2);
+  @iconSize: 16px;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  font-family: var(--bui-font-family);
+
+  &-disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &-label-left {
+    flex-direction: row-reverse;
+  }
+
+  &-label-top {
+    flex-direction: column-reverse;
+  }
+
+  &-label-bottom {
+    flex-direction: column;
+  }
+
+  &-input {
+    opacity: 0;
+    // 解决onClick触发两次的问题 & 微信文案点击选中
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    cursor: pointer;
+    z-index: 1;
+  }
+
+  &-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    padding: 5px;
+    box-sizing: border-box;
+  }
+
+  &-label {
+    font-size: var(--label-font-size);
+    color: var(--label-color);
+  }
+
+  &-btn-icon {
+    position: relative;
+    display: flex;
+
+    .bui-svg-icon {
+      font-size: var(--icon-font-size);
+    }
+
+    &-outline {
+      transform: scale(1);
+      transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    }
+
+    &-contained {
+      position: absolute;
+      left: 0;
+      transform: scale(0);
+      transition: transform 150ms cubic-bezier(0.4, 0, 1, 1) 0ms;
+    }
+
+    &-checked {
+      .bui-radio-btn-icon-contained {
+        transform: scale(1);
+        transition: transform 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+      }
+    }
+  }
+}

package/dist/Rating/Rating.less

@@ -0,0 +1,64 @@
+.bui-rating {
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--bui-font-family);
+
+  &-disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &-container {
+    position: relative;
+    display: flex;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    &-xsmall {
+      font-size: var(--bui-text-size-5);
+    }
+
+    &-small {
+      font-size: var(--bui-text-size-1);
+      margin-right: 0.5px;
+    }
+
+    &-medium {
+      font-size: var(--bui-title-size-3);
+      margin-right: 1px;
+    }
+
+    &-large {
+      font-size: 22px;
+      margin-right: 2px;
+    }
+  }
+
+  &-item {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    cursor: pointer;
+    color: var(--bui-color-fg-disabled);
+
+    &-input {
+      display: none;
+    }
+
+    &-half {
+      position: absolute;
+      top: 0;
+      width: 50%;
+    }
+
+    &-readonly {
+      cursor: unset;
+    }
+
+    &-active {
+      color: var(--bui-color-warning);
+    }
+  }
+}

package/dist/ScrollView/{ScrollView.css → ScrollView.less}

@@ -3,16 +3,20 @@
   position: relative;
   font-family: var(--bui-font-family);
 }
+
 .bui-scroll::-webkit-scrollbar {
   display: none;
 }
+
 .bui-scroll-view {
   overflow: hidden;
 }
+
 .bui-scroll-view-scroll-x {
   overflow-x: scroll;
   overflow-y: hidden;
 }
+
 .bui-scroll-view-scroll-y {
   overflow-x: hidden;
   overflow-y: scroll;

package/dist/Select/Select.less

@@ -0,0 +1,105 @@
+@class-prefix-select: ~'bui-select';
+@transition-duration: 0.3s;
+
+.@{class-prefix-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);
+
+  &:active,
+  &-active {
+    box-shadow: 0 0 0 2px var(--bui-color-bg-default);
+  }
+
+  &-selector-container {
+    display: flex;
+    align-items: center;
+    padding: 0 14px;
+    height: 100%;
+  }
+
+  &-input {
+    width: 0;
+    height: 0;
+    border: 0;
+    opacity: 0;
+  }
+
+  &-placeholder {
+    color: var(--bui-color-fg-disabled);
+  }
+
+  &-selector {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex: 1;
+    height: 27px;
+    background-color: transparent;
+    outline: none;
+    border: 0;
+
+    &-icon {
+      font-size: var(--bui-title-size-3);
+    }
+  }
+
+  &-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;
+  }
+
+  &-option-main {
+    border-radius: 3px;
+    padding: 3px 0;
+    box-shadow: 0 0 0 2px var(--bui-color-bg-default);
+    overflow: hidden;
+  }
+
+  &-option {
+    display: flex;
+    align-items: center;
+    height: 27px;
+    padding: 0 14px;
+    border-radius: 5px;
+    margin: 0 3px;
+  }
+
+  &-option:hover {
+    background-color: var(---bui-select-options-active-bg, #fff2f0);
+    color: var(--bui-color-primary);
+  }
+
+  &-option-active {
+    font-weight: 500;
+    color: var(--bui-color-primary);
+    background-color: var(---bui-select-options-active-bg, #fff2f0);
+  }
+
+  &-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;
+}