@bifrostui/react 0.0.5

package/dist/Radio/index.js

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

package/dist/Rating/Rating.css

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

package/dist/Rating/Rating.d.ts

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

package/dist/Rating/Rating.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _icons = require("@bifrostui/icons");
+var _utils = require("@bifrostui/utils");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+require("./Rating.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 classes = {
+  root: 'bui-rating',
+  item: 'bui-rating-item',
+  container: 'bui-rating-container'
+};
+const Rating = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    className,
+    size,
+    defaultValue,
+    allowHalf,
+    icon,
+    checkedIcon,
+    count,
+    readOnly,
+    disabled,
+    value,
+    onChange,
+    name,
+    disableClear,
+    ...others
+  } = props;
+  const [rateValue, triggerChange] = (0, _utils.useValue)({
+    value,
+    defaultValue,
+    onChange
+  });
+  const rateItemList = [...new Array(count)];
+
+  // 支付宝小程序的radio 无onChange、onClick事件，统一使用点击事件模拟
+  const handleChange = (e, v) => {
+    if (readOnly || disabled) return;
+    if (!disableClear && v === rateValue) {
+      triggerChange(e, null);
+    } else {
+      triggerChange(e, v);
+    }
+  };
+  const renderItem = (v, half) => {
+    const isActive = +rateValue >= v;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _clsx.default)(classes.item, {
+        [`${classes.item}-active`]: isActive,
+        [`${classes.item}-half`]: half,
+        [`${classes.item}-readonly`]: readOnly
+      }),
+      onClick: e => handleChange(e, v)
+    }, !readOnly && /*#__PURE__*/_react.default.createElement("input", {
+      name: name,
+      type: "radio",
+      checked: rateValue === v,
+      disabled: disabled,
+      value: v,
+      onChange: e => handleChange(e, v),
+      className: `${classes.item}-input`
+    }), isActive ? checkedIcon : icon);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: (0, _clsx.default)(classes.root, {
+      [`${classes.root}-disabled`]: disabled
+    }, className),
+    ref: ref
+  }, others), rateItemList.map((_, i) => /*#__PURE__*/_react.default.createElement("div", {
+    key: i,
+    className: (0, _clsx.default)(classes.container, {
+      [`${classes.container}-${size}`]: size
+    })
+  }, allowHalf && renderItem(i + 0.5, allowHalf), renderItem(i + 1))));
+});
+Rating.displayName = 'BuiRating';
+Rating.defaultProps = {
+  size: 'medium',
+  count: 5,
+  icon: /*#__PURE__*/_react.default.createElement(_icons.StarFilledIcon, {
+    htmlColor: "#ced1d6"
+  }),
+  checkedIcon: /*#__PURE__*/_react.default.createElement(_icons.StarFilledIcon, {
+    color: "warning"
+  }),
+  readOnly: false,
+  disabled: false,
+  allowHalf: false,
+  disableClear: false
+};
+var _default = exports.default = Rating;

package/dist/Rating/Rating.types.d.ts

@@ -0,0 +1,66 @@
+import { OverrideProps } from '@bifrostui/types';
+import React from 'react';
+export type RatingSize = 'xsmall' | 'small' | 'medium' | 'large';
+export type RatingProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /**
+         * 大小 'xsmall' | 'small' | 'medium' | 'large'
+         * @default 'medium'
+         */
+        size?: RatingSize;
+        /**
+         * 是否禁止点击后清空
+         * @default false
+         */
+        disableClear?: boolean;
+        /**
+         * 是否允许半选
+         * @default false
+         */
+        allowHalf?: boolean;
+        /**
+         * 是否允许禁用
+         * @default false
+         */
+        disabled?: boolean;
+        /**
+         * 未选中态图标
+         * @default <StarFilledIcon htmlColor="#ced1d6" />
+         */
+        icon?: React.ReactNode;
+        /**
+         * 选中态图标
+         * @default <StarFilledIcon color="warning" />
+         */
+        checkedIcon?: React.ReactNode;
+        /**
+         * 评分总数
+         * @default 5
+         */
+        count?: number;
+        /**
+         * 是否只读
+         * @default false
+         */
+        readOnly?: boolean;
+        /**
+         * 当前评分
+         */
+        value?: number;
+        /**
+         * 默认评分 非受控状态使用
+         */
+        defaultValue?: number;
+        /**
+         * input的name属性
+         */
+        name?: string;
+        /**
+         * 评分回调
+         */
+        onChange?: (ev?: React.SyntheticEvent, data?: {
+            value: number;
+        }) => void;
+    };
+    defaultComponent: D;
+}, D>;

package/dist/Rating/Rating.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/Rating/index.d.ts

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

package/dist/Rating/index.js

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

package/dist/ScrollView/ScrollView.css

@@ -0,0 +1,19 @@
+.bui-scroll {
+  -webkit-overflow-scrolling: auto;
+  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/ScrollView/ScrollView.d.ts

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

package/dist/ScrollView/ScrollView.js

@@ -0,0 +1,204 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _utils = require("@bifrostui/utils");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+require("./ScrollView.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 easeOutScroll(from, to, callback) {
+  if (from === to || typeof from !== 'number') {
+    return;
+  }
+  const change = to - from;
+  const dur = 500;
+  const sTime = +new Date();
+  function linear(t, b, c, d) {
+    return c * t / d + b;
+  }
+  const isLarger = to >= from;
+  function step() {
+    const stepFrom = linear(+new Date() - sTime, from, change, dur);
+    if (isLarger && stepFrom >= to || !isLarger && to >= stepFrom) {
+      callback?.(to);
+      return;
+    }
+    callback?.(stepFrom);
+    requestAnimationFrame(step);
+  }
+  step();
+}
+const classes = {
+  root: 'bui-scroll'
+};
+const ScrollView = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    className,
+    style = {},
+    onScroll,
+    onScrollToUpper,
+    onScrollToLower,
+    scrollTop: scrollTopProp,
+    scrollLeft: scrollLeftProp,
+    scrollX,
+    scrollY,
+    scrollIntoView,
+    onTouchMove: propsOnTouchMove,
+    scrollIntoViewAlignment,
+    children
+  } = props;
+  const container = (0, _react.useRef)(null);
+  const handleRef = (0, _utils.useForkRef)(ref, container);
+  const onTouchMove = e => {
+    e.stopPropagation();
+  };
+  const scrollVertical = (0, _react.useCallback)((top, isAnimation) => {
+    if (top === undefined) return;
+    if (isAnimation) {
+      easeOutScroll(container.current.scrollTop, top, pos => {
+        if (container.current) container.current.scrollTop = pos;
+      });
+    } else if (container.current) container.current.scrollTop = top;
+  }, []);
+  const scrollHorizontal = (0, _react.useCallback)((left, isAnimation) => {
+    if (left === undefined) return;
+    if (isAnimation) {
+      easeOutScroll(container.current.scrollLeft, left, pos => {
+        if (container.current) container.current.scrollLeft = pos;
+      });
+    } else if (container.current) container.current.scrollLeft = left;
+  }, []);
+  const handleScroll = (0, _react.useCallback)((isInit = false) => {
+    const isAnimation = ('scrollWithAnimation' in props);
+    // scrollIntoView
+    if (scrollIntoView && typeof scrollIntoView === 'string' && container?.current?.querySelector?.(`#${scrollIntoView}`)) {
+      const doScrollIntoView = (id, alignment = 'start', _isAnimation = isAnimation) => {
+        const target = container.current.querySelector(`#${id}`);
+        if (scrollY) {
+          const start = target.offsetTop;
+          const end = target.offsetTop + target.offsetHeight - container.current.clientHeight;
+          let nearest;
+          if (container.current.scrollTop < end) nearest = end;else if (container.current.scrollTop > start) nearest = start;
+          const center = (start + end) / 2;
+          scrollVertical({
+            start,
+            end,
+            nearest,
+            center
+          }[alignment], _isAnimation);
+        }
+        if (scrollX) {
+          const start = target.offsetLeft;
+          const end = target.offsetLeft + target.offsetWidth - container.current.clientWidth;
+          let nearest;
+          if (container.current.scrollTop < end) nearest = end;else if (container.current.scrollTop > start) nearest = start;
+          const center = (start + end) / 2;
+          scrollHorizontal({
+            start,
+            end,
+            nearest,
+            center
+          }[alignment], _isAnimation);
+        }
+      };
+      if (isInit) {
+        setTimeout(() => doScrollIntoView(scrollIntoView, scrollIntoViewAlignment, isAnimation), 500);
+      } else {
+        doScrollIntoView(scrollIntoView, scrollIntoViewAlignment, isAnimation);
+      }
+    } else {
+      // Y 轴滚动
+      if (scrollY && typeof scrollTopProp === 'number' && scrollTopProp !== container.current.scrollTop) {
+        if (isInit) {
+          setTimeout(() => scrollVertical(scrollTopProp, isAnimation), 10);
+        } else {
+          scrollVertical(scrollTopProp, isAnimation);
+        }
+      }
+      // X 轴滚动
+      if (scrollX && typeof scrollLeftProp === 'number' && scrollLeftProp !== container.current.scrollLeft) {
+        if (isInit) {
+          setTimeout(() => scrollHorizontal(scrollLeftProp, isAnimation), 10);
+        } else {
+          scrollHorizontal(scrollLeftProp, isAnimation);
+        }
+      }
+    }
+  }, [scrollIntoView, scrollY, scrollTopProp, scrollX, scrollLeftProp]);
+  (0, _react.useEffect)(() => {
+    handleScroll(true);
+  }, []);
+  (0, _react.useEffect)(() => {
+    handleScroll();
+  }, [scrollIntoView, scrollY, scrollTopProp, scrollX, scrollLeftProp]);
+  let {
+    upperThreshold = 50,
+    lowerThreshold = 50
+  } = props;
+  const cls = (0, _clsx.default)(classes.root, {
+    [`${classes.root}-view-scroll-x`]: scrollX,
+    [`${classes.root}-view-scroll-y`]: scrollY
+  }, className);
+  upperThreshold = Number(upperThreshold);
+  lowerThreshold = Number(lowerThreshold);
+  const upperLowerStatus = (0, _react.useRef)(0);
+  const upperAndLower = e => {
+    if (!container.current) return;
+    const {
+      offsetWidth,
+      offsetHeight,
+      scrollLeft,
+      scrollTop,
+      scrollHeight,
+      scrollWidth
+    } = container.current;
+    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;
+    }
+  };
+  const onScrollHandler = e => {
+    const {
+      scrollLeft,
+      scrollTop,
+      scrollHeight,
+      scrollWidth
+    } = container.current;
+    // container.current.scrollLeft = scrollLeft;
+    // container.current.scrollTop = scrollTop;
+    Object.defineProperty(e, 'detail', {
+      enumerable: true,
+      writable: true,
+      value: {
+        scrollLeft,
+        scrollTop,
+        scrollHeight,
+        scrollWidth
+      }
+    });
+    upperAndLower(e);
+    onScroll?.(e);
+  };
+  const onTouchMoveHandler = e => {
+    (propsOnTouchMove || onTouchMove)?.(e);
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: handleRef,
+    style: style,
+    className: cls,
+    onScroll: onScrollHandler,
+    onTouchMove: onTouchMoveHandler
+  }, children);
+});
+ScrollView.displayName = 'BuiScrollView';
+var _default = exports.default = ScrollView;