qt-public-ui/es/HorizontalScroll/index.js

新设计规范下业务组件库

import React, { useState, useRef, useLayoutEffect } from 'react';
import { IconSlim as Icon } from '..';
import { useResize } from 'qt-public-hooks';
import classnames from 'classnames';
import './style';
var HorizontalScroll = function HorizontalScroll(props) {
  var children = props.children,
    isFlex = props.isFlex,
    className = props.className,
    style = props.style;
  var _useResize = useResize(),
    size = _useResize.size,
    viewPortRef = _useResize.ref;
  var _useState = useState({
      viewWidth: 0,
      limitOffset: 0
    }),
    scroller = _useState[0],
    setScroller = _useState[1];
  var _useState2 = useState(0),
    scrollbar = _useState2[0],
    setScrollbar = _useState2[1];
  var contentRef = useRef(null);
  useLayoutEffect(function () {
    if (contentRef.current) {
      setScroller({
        viewWidth: (size === null || size === void 0 ? void 0 : size.width) || 0,
        limitOffset: contentRef.current.clientWidth - ((size === null || size === void 0 ? void 0 : size.width) || 0) // 可视宽度 - 实际可滚动的宽度 = 实际可滚动的最大值
      });
    }
  }, [size]);

  // 每次滚动一个可视宽度的距离，如果超出了则设置为 实际可滚动的最大值
  var scrollLeft = function scrollLeft() {
    var _value = scrollbar - scroller.viewWidth;
    var validValue = _value > 0 ? _value : 0;
    setScrollbar(validValue);
    if (contentRef.current) {
      contentRef.current.style.transform = "translateX(-" + validValue + "px)";
    }
  };
  var scrollRight = function scrollRight() {
    var _value = scrollbar + scroller.viewWidth;
    var validValue = _value < scroller.limitOffset ? _value : scroller.limitOffset;
    setScrollbar(validValue);
    if (contentRef.current) {
      contentRef.current.style.transform = "translateX(-" + validValue + "px)";
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    ref: viewPortRef,
    className: classnames('umui-horizontal-scroll', className),
    style: style
  }, scrollbar > 0 && /*#__PURE__*/React.createElement("div", {
    className: "umui-scroll-arrow umui-scroll-arrow-prev",
    onClick: scrollLeft
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "umicon-arrow-prev"
  })), /*#__PURE__*/React.createElement("div", {
    className: "umui-scroll"
  }, /*#__PURE__*/React.createElement("div", {
    ref: contentRef,
    className: classnames('umui-scroll-inner', {
      'umui-scroll-flex': isFlex
    })
  }, children)), scrollbar < scroller.limitOffset && /*#__PURE__*/React.createElement("div", {
    className: "umui-scroll-arrow umui-scroll-arrow-next",
    onClick: scrollRight
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "umicon-arrow-next"
  })));
};
HorizontalScroll.displayName = 'HorizontalScroll';
export default HorizontalScroll;