linkmore-design/es/tour/panelRender.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import React from 'react';
import classNames from 'classnames';
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import LocaleReceiver from "../locale-provider/LocaleReceiver";
import Button from "../button";
import defaultLocale from "../locale/en_US";
var panelRender = function panelRender(props, current, type) {
  var prefixCls = props.prefixCls,
    _props$total = props.total,
    total = _props$total === void 0 ? 1 : _props$total,
    title = props.title,
    onClose = props.onClose,
    onPrev = props.onPrev,
    onNext = props.onNext,
    onFinish = props.onFinish,
    cover = props.cover,
    description = props.description,
    nextButtonProps = props.nextButtonProps,
    prevButtonProps = props.prevButtonProps,
    stepRender = props.stepRender,
    stepType = props.type,
    arrow = props.arrow,
    className = props.className;
  var mergedType = typeof stepType !== 'undefined' ? stepType : type;
  var isLastStep = current === total - 1;
  var prevBtnClick = function prevBtnClick() {
    onPrev === null || onPrev === void 0 ? void 0 : onPrev();
    if (typeof (prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.onClick) === 'function') {
      prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.onClick();
    }
  };
  var nextBtnClick = function nextBtnClick() {
    if (isLastStep) {
      onFinish === null || onFinish === void 0 ? void 0 : onFinish();
    } else {
      onNext === null || onNext === void 0 ? void 0 : onNext();
    }
    if (typeof (nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.onClick) === 'function') {
      nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.onClick();
    }
  };
  var headerNode;
  if (title) {
    headerNode = /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-header")
    }, /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-title")
    }, title));
  }
  var descriptionNode;
  if (description) {
    descriptionNode = /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-description")
    }, description);
  }
  var coverNode;
  if (cover) {
    coverNode = /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-cover")
    }, cover);
  }
  var mergedSlickNode = typeof stepRender === 'function' && stepRender(current, total) || _toConsumableArray(Array.from({
    length: total
  }).keys()).map(function (stepItem, index) {
    return /*#__PURE__*/React.createElement("span", {
      key: stepItem,
      className: classNames(index === current && "".concat(prefixCls, "-slider-active"), "".concat(prefixCls, "-slider"))
    });
  });
  var slickNode = total > 1 ? mergedSlickNode : null;
  var mainBtnType = mergedType === 'primary' ? 'default' : 'primary';
  var secondaryBtnProps = {
    type: 'default',
    ghost: mergedType === 'primary'
  };
  return /*#__PURE__*/React.createElement(LocaleReceiver, {
    componentName: "Tour",
    defaultLocale: defaultLocale.Tour
  }, function (contextLocale) {
    var _prevButtonProps$chil, _nextButtonProps$chil;
    return /*#__PURE__*/React.createElement("div", {
      className: classNames(mergedType === 'primary' ? "".concat(prefixCls, "-primary") : '', className, "".concat(prefixCls, "-content"))
    }, arrow && /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-arrow"),
      key: "arrow"
    }), /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-inner")
    }, /*#__PURE__*/React.createElement(CloseOutlined, {
      className: "".concat(prefixCls, "-close"),
      onClick: onClose
    }), coverNode, headerNode, descriptionNode, /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-footer")
    }, /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-sliders")
    }, slickNode), /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefixCls, "-buttons")
    }, current !== 0 ? /*#__PURE__*/React.createElement(Button, _extends({}, secondaryBtnProps, prevButtonProps, {
      onClick: prevBtnClick,
      size: "small",
      className: classNames("".concat(prefixCls, "-prev-btn"), prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.className)
    }), (_prevButtonProps$chil = prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.children) !== null && _prevButtonProps$chil !== void 0 ? _prevButtonProps$chil : contextLocale.Previous) : null, /*#__PURE__*/React.createElement(Button, _extends({
      type: mainBtnType
    }, nextButtonProps, {
      onClick: nextBtnClick,
      size: "small",
      className: classNames("".concat(prefixCls, "-next-btn"), nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.className)
    }), (_nextButtonProps$chil = nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.children) !== null && _nextButtonProps$chil !== void 0 ? _nextButtonProps$chil : isLastStep ? contextLocale.Finish : contextLocale.Next)))));
  });
};
export default panelRender;