@alifd/meet-react/lib/step/item.js

Fusion Mobile React UI System Component

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _tslib = require("tslib");
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _meetReactComponentOne = require("@alifd/meet-react-component-one");
var _view = _interopRequireDefault(require("../view"));
var _icon = _interopRequireDefault(require("../icon"));
var _progress = _interopRequireDefault(require("../progress"));
var _utils = require("../utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 && 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 _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); }
var Item = function (props) {
  var _classNames, _classNames2, _classNames3, _classNames4, _classNames5;
  var _props$prefix = props.prefix,
    prefix = _props$prefix === void 0 ? 'mt-' : _props$prefix,
    order = props.order,
    shape = props.shape,
    _props$isFirst = props.isFirst,
    isFirst = _props$isFirst === void 0 ? false : _props$isFirst,
    _props$isLast = props.isLast,
    isLast = _props$isLast === void 0 ? false : _props$isLast,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled,
    _props$isPreDisabled = props.isPreDisabled,
    isPreDisabled = _props$isPreDisabled === void 0 ? false : _props$isPreDisabled,
    direction = props.direction,
    percent = props.percent,
    addon = props.addon,
    title = props.title,
    content = props.content,
    status = props.status,
    className = props.className,
    icon = props.icon,
    onClick = props.onClick,
    others = (0, _tslib.__rest)(props, ["prefix", "order", "shape", "isFirst", "isLast", "disabled", "isPreDisabled", "direction", "percent", "addon", "title", "content", "status", "className", "icon", "onClick"]);
  var clsPrefix = prefix + "step-item";
  var isArrow = shape === 'arrow';
  var isCircle = shape === 'circle';
  var clses = {
    item: (0, _classnames.default)(clsPrefix, className, clsPrefix + "--" + status, clsPrefix + "--" + shape, (_classNames = {}, _classNames[clsPrefix + "--last"] = isLast, _classNames[clsPrefix + "--first"] = isFirst, _classNames[clsPrefix + "--disabled"] = disabled, _classNames[clsPrefix + "--pre-disabled"] = isPreDisabled, _classNames)),
    dot: (0, _classnames.default)(clsPrefix + "-dot"),
    indicator: clsPrefix + "-indicator",
    hornLeft: (0, _classnames.default)(clsPrefix + "-horn", clsPrefix + "-horn--left", (_classNames2 = {}, _classNames2[clsPrefix + "-horn--hide"] = isFirst, _classNames2)),
    hornRight: (0, _classnames.default)(clsPrefix + "-horn", clsPrefix + "-horn--right", (_classNames3 = {}, _classNames3[clsPrefix + "-horn--hide"] = isLast, _classNames3)),
    node: (0, _classnames.default)(clsPrefix + "-node", (_classNames4 = {}, _classNames4[clsPrefix + "-node--percent"] = isCircle && (0, _utils.isNumber)(percent), _classNames4)),
    addon: (0, _classnames.default)(clsPrefix + "-addon", (_classNames5 = {}, _classNames5[clsPrefix + "-addon--first"] = isFirst, _classNames5))
  };
  return /*#__PURE__*/(0, _react.createElement)(_view.default, _extends({}, others, {
    className: clses.item,
    onClick: onClick
  }), addon && ['dot', 'circle'].indexOf(shape) > -1 && direction === 'ver' ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clses.addon
  }, addon) : null, /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clses.indicator
  }, !isArrow || !isFirst ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clses.hornLeft
  }) : null, isCircle && percent ? /*#__PURE__*/(0, _react.createElement)(_progress.default, {
    className: clses.node,
    percent: percent,
    shape: "circle"
  }) : /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clses.node
  }, " ", function renderCirleContent() {
    if (isCircle) {
      if ((0, _utils.isString)(icon) && icon !== '') {
        return /*#__PURE__*/(0, _react.createElement)(_icon.default, {
          name: icon,
          size: "xs"
        });
      } else if ((0, _react.isValidElement)(icon)) {
        return icon;
      } else if (status === 'finish') {
        return /*#__PURE__*/(0, _react.createElement)(_icon.default, {
          name: "select",
          size: "xs"
        });
      } else {
        return (order || 0) + 1;
      }
    } else if (shape === 'arrow') {
      return title;
    } else {
      return null;
    }
  }()), !isArrow || !isLast ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clses.hornRight
  }) : null), !isArrow ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clsPrefix + "-body"
  }, (0, _react.isValidElement)(title) ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clsPrefix + "-title"
  }, title) : /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
    className: clsPrefix + "-title"
  }, title || ' '), (0, _react.isValidElement)(content) ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clsPrefix + "-content"
  }, content) : /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
    className: clsPrefix + "-content"
  }, content || ' ')) : null);
};
Item.displayName = 'Step.Item';
var _default = exports.default = Item;