panelRender.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.default = void 0;
  8. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  9. var _react = _interopRequireDefault(require("react"));
  10. var _CloseOutlined = _interopRequireDefault(require("@ant-design/icons/CloseOutlined"));
  11. var _classnames = _interopRequireDefault(require("classnames"));
  12. var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
  13. var _button = _interopRequireDefault(require("../button"));
  14. var _locale = require("../locale");
  15. var _en_US = _interopRequireDefault(require("../locale/en_US"));
  16. function isValidNode(node) {
  17. return node !== undefined && node !== null;
  18. }
  19. // Due to the independent design of Panel, it will be too coupled to put in rc-tour,
  20. // so a set of Panel logic is implemented separately in antd.
  21. const TourPanel = props => {
  22. var _a, _b;
  23. const {
  24. stepProps,
  25. current,
  26. type,
  27. indicatorsRender,
  28. actionsRender
  29. } = props;
  30. const {
  31. prefixCls,
  32. total = 1,
  33. title,
  34. onClose,
  35. onPrev,
  36. onNext,
  37. onFinish,
  38. cover,
  39. description,
  40. nextButtonProps,
  41. prevButtonProps,
  42. type: stepType,
  43. closable
  44. } = stepProps;
  45. const mergedType = stepType !== null && stepType !== void 0 ? stepType : type;
  46. const ariaProps = (0, _pickAttrs.default)(closable !== null && closable !== void 0 ? closable : {}, true);
  47. const [contextLocaleGlobal] = (0, _locale.useLocale)('global', _en_US.default.global);
  48. const [contextLocaleTour] = (0, _locale.useLocale)('Tour', _en_US.default.Tour);
  49. const mergedCloseIcon = /*#__PURE__*/_react.default.createElement("button", Object.assign({
  50. type: "button",
  51. onClick: onClose,
  52. className: `${prefixCls}-close`,
  53. "aria-label": contextLocaleGlobal === null || contextLocaleGlobal === void 0 ? void 0 : contextLocaleGlobal.close
  54. }, ariaProps), (closable === null || closable === void 0 ? void 0 : closable.closeIcon) || /*#__PURE__*/_react.default.createElement(_CloseOutlined.default, {
  55. className: `${prefixCls}-close-icon`
  56. }));
  57. const isLastStep = current === total - 1;
  58. const prevBtnClick = () => {
  59. var _a;
  60. onPrev === null || onPrev === void 0 ? void 0 : onPrev();
  61. (_a = prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(prevButtonProps);
  62. };
  63. const nextBtnClick = () => {
  64. var _a;
  65. if (isLastStep) {
  66. onFinish === null || onFinish === void 0 ? void 0 : onFinish();
  67. } else {
  68. onNext === null || onNext === void 0 ? void 0 : onNext();
  69. }
  70. (_a = nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(nextButtonProps);
  71. };
  72. const headerNode = isValidNode(title) ? (/*#__PURE__*/_react.default.createElement("div", {
  73. className: `${prefixCls}-header`
  74. }, /*#__PURE__*/_react.default.createElement("div", {
  75. className: `${prefixCls}-title`
  76. }, title))) : null;
  77. const descriptionNode = isValidNode(description) ? (/*#__PURE__*/_react.default.createElement("div", {
  78. className: `${prefixCls}-description`
  79. }, description)) : null;
  80. const coverNode = isValidNode(cover) ? /*#__PURE__*/_react.default.createElement("div", {
  81. className: `${prefixCls}-cover`
  82. }, cover) : null;
  83. let mergedIndicatorNode;
  84. if (indicatorsRender) {
  85. mergedIndicatorNode = indicatorsRender(current, total);
  86. } else {
  87. mergedIndicatorNode = (0, _toConsumableArray2.default)(Array.from({
  88. length: total
  89. }).keys()).map((stepItem, index) => (/*#__PURE__*/_react.default.createElement("span", {
  90. key: stepItem,
  91. className: (0, _classnames.default)(index === current && `${prefixCls}-indicator-active`, `${prefixCls}-indicator`)
  92. })));
  93. }
  94. const mainBtnType = mergedType === 'primary' ? 'default' : 'primary';
  95. const secondaryBtnProps = {
  96. type: 'default',
  97. ghost: mergedType === 'primary'
  98. };
  99. const defaultActionsNode = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, current !== 0 ? (/*#__PURE__*/_react.default.createElement(_button.default, Object.assign({
  100. size: "small"
  101. }, secondaryBtnProps, prevButtonProps, {
  102. onClick: prevBtnClick,
  103. className: (0, _classnames.default)(`${prefixCls}-prev-btn`, prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.className)
  104. }), (_a = prevButtonProps === null || prevButtonProps === void 0 ? void 0 : prevButtonProps.children) !== null && _a !== void 0 ? _a : contextLocaleTour === null || contextLocaleTour === void 0 ? void 0 : contextLocaleTour.Previous)) : null, /*#__PURE__*/_react.default.createElement(_button.default, Object.assign({
  105. size: "small",
  106. type: mainBtnType
  107. }, nextButtonProps, {
  108. onClick: nextBtnClick,
  109. className: (0, _classnames.default)(`${prefixCls}-next-btn`, nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.className)
  110. }), (_b = nextButtonProps === null || nextButtonProps === void 0 ? void 0 : nextButtonProps.children) !== null && _b !== void 0 ? _b : isLastStep ? contextLocaleTour === null || contextLocaleTour === void 0 ? void 0 : contextLocaleTour.Finish : contextLocaleTour === null || contextLocaleTour === void 0 ? void 0 : contextLocaleTour.Next));
  111. return /*#__PURE__*/_react.default.createElement("div", {
  112. className: `${prefixCls}-content`
  113. }, /*#__PURE__*/_react.default.createElement("div", {
  114. className: `${prefixCls}-inner`
  115. }, closable && mergedCloseIcon, coverNode, headerNode, descriptionNode, /*#__PURE__*/_react.default.createElement("div", {
  116. className: `${prefixCls}-footer`
  117. }, total > 1 && /*#__PURE__*/_react.default.createElement("div", {
  118. className: `${prefixCls}-indicators`
  119. }, mergedIndicatorNode), /*#__PURE__*/_react.default.createElement("div", {
  120. className: `${prefixCls}-buttons`
  121. }, actionsRender ? actionsRender(defaultActionsNode, {
  122. current,
  123. total
  124. }) : defaultActionsNode))));
  125. };
  126. var _default = exports.default = TourPanel;