acud/es/timeline/timeline.js

acg react 组件库

/**
 * @file timeline 时间线
 * @author jc
 */
import React, { useMemo } from 'react';
import cls from 'classnames';
import TimelineItem from './timelineItem';
import { ConfigContext } from '../config-provider';
var _layout = {
  vertical: ' is-vertical',
  horizontal: ' is-horizontal'
};
var _number = {
  vertical: ' number-vertical',
  horizontal: ' number-horizontal'
};
var Timeline = function Timeline(_ref) {
  var customizePrefixCls = _ref.prefixCls,
    _ref$mode = _ref.mode,
    mode = _ref$mode === void 0 ? 'vertical' : _ref$mode,
    _ref$reverse = _ref.reverse,
    reverse = _ref$reverse === void 0 ? false : _ref$reverse,
    _ref$isNumber = _ref.isNumber,
    isNumber = _ref$isNumber === void 0 ? false : _ref$isNumber,
    className = _ref.className,
    style = _ref.style,
    children = _ref.children;
  var _React$useContext = React.useContext(ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefixCls = getPrefixCls('timeline', customizePrefixCls);
  // 整体样式布局
  var layout = useMemo(function () {
    var layoutClass = _layout[mode] || ' is-vertical';
    var numberClass = '';
    if (isNumber) {
      numberClass = _number[mode] || ' number-vertical';
    }
    return cls(prefixCls, layoutClass, numberClass, className);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [mode, className, prefixCls]);
  // 列表
  var listContext = useMemo(function () {
    if (Array.isArray(children) && reverse) {
      return children.reverse();
    }
    return children;
  }, [children, reverse]);
  return /*#__PURE__*/React.createElement("div", {
    className: layout,
    style: style
  }, listContext);
};
Timeline.Item = TimelineItem;
export default Timeline;