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

新设计规范下业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _ = require("..");
var _qtPublicHooks = require("qt-public-hooks");
var _classnames = _interopRequireDefault(require("classnames"));
require("./style");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 && {}.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; }
var HorizontalScroll = function HorizontalScroll(props) {
  var children = props.children,
    isFlex = props.isFlex,
    className = props.className,
    style = props.style;
  var _useResize = (0, _qtPublicHooks.useResize)(),
    size = _useResize.size,
    viewPortRef = _useResize.ref;
  var _useState = (0, _react.useState)({
      viewWidth: 0,
      limitOffset: 0
    }),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    scroller = _useState2[0],
    setScroller = _useState2[1];
  var _useState3 = (0, _react.useState)(0),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    scrollbar = _useState4[0],
    setScrollbar = _useState4[1];
  var contentRef = (0, _react.useRef)(null);
  (0, _react.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(-".concat(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(-".concat(validValue, "px)");
    }
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    ref: viewPortRef,
    className: (0, _classnames["default"])('umui-horizontal-scroll', className),
    style: style
  }, scrollbar > 0 && /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-scroll-arrow umui-scroll-arrow-prev",
    onClick: scrollLeft
  }, /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
    type: "umicon-arrow-prev"
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-scroll"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    ref: contentRef,
    className: (0, _classnames["default"])('umui-scroll-inner', {
      'umui-scroll-flex': isFlex
    })
  }, children)), scrollbar < scroller.limitOffset && /*#__PURE__*/_react["default"].createElement("div", {
    className: "umui-scroll-arrow umui-scroll-arrow-next",
    onClick: scrollRight
  }, /*#__PURE__*/_react["default"].createElement(_.IconSlim, {
    type: "umicon-arrow-next"
  })));
};
HorizontalScroll.displayName = 'HorizontalScroll';
var _default = exports["default"] = HorizontalScroll;