@talend/react-components/lib/GuidedTour/GuidedTour.component.js

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactour = _interopRequireDefault(require("reactour"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _reactI18next = require("react-i18next");
var _designSystem = require("@talend/design-system");
var _constants = _interopRequireDefault(require("../constants"));
var _GuidedTourModule = _interopRequireDefault(require("./GuidedTour.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function getTooltipContent({
  header,
  body
}) {
  // eslint-disable-next-line react/display-name
  return reactourCallbacks => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
    children: [header && /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
      className: (0, _classnames.default)(_GuidedTourModule.default.header, 'tc-guided-tour__header'),
      children: header
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _classnames.default)(_GuidedTourModule.default.body, 'tc-guided-tour__body'),
      children: typeof body === 'function' ? body(reactourCallbacks) : /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        children: body
      })
    })]
  });
}
function formatSteps(steps) {
  return steps.map(step => {
    const {
      header,
      body
    } = step.content;
    const formattedStep = {
      ...step
    };
    formattedStep.content = getTooltipContent({
      header,
      body
    });
    return formattedStep;
  });
}
function GuidedTour({
  className,
  disableAllInteractions,
  steps,
  lastStepNextButtonDataFeature,
  tourId,
  ...rest
}) {
  const {
    t
  } = (0, _reactI18next.useTranslation)(_constants.default);
  if (!steps.length) {
    return null;
  }
  const dataFeature = action => tourId && `guidedtour.${tourId}.${action}`;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactour.default, {
    className: (0, _classnames.default)(_GuidedTourModule.default['tc-guided-tour'], 'tc-guided-tour', {
      [_GuidedTourModule.default['no-interaction']]: !!disableAllInteractions
    }, {
      'tc-guided-tour--no-interaction': !!disableAllInteractions
    }, className),
    closeWithMask: false,
    disableDotsNavigation: true,
    disableInteraction: true,
    highlightedMaskClassName: "tc-guided-tour__highlighted-mask",
    lastStepNextButton: /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonPrimary, {
      "data-feature": lastStepNextButtonDataFeature !== null && lastStepNextButtonDataFeature !== void 0 ? lastStepNextButtonDataFeature : dataFeature('last'),
      children: t('GUIDEDTOUR_LAST_STEP', 'Let me try')
    }),
    nextButton: /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonIcon, {
      size: "S",
      onClick: () => {},
      icon: "arrow-right",
      "data-feature": dataFeature('next'),
      children: t('GUIDEDTOUR_NEXT_STEP', 'Next')
    }),
    prevButton: /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonIcon, {
      size: "S",
      onClick: () => {},
      icon: "arrow-left",
      "data-feature": dataFeature('prev'),
      children: t('GUIDEDTOUR_PREV_STEP', 'Previous')
    }),
    maskSpace: 10,
    rounded: 4,
    showNavigationNumber: false,
    showNumber: false,
    startAt: 0,
    steps: formatSteps(steps),
    ...rest
  });
}
GuidedTour.displayName = 'GuidedTour';
GuidedTour.defaultProps = {
  steps: []
};
GuidedTour.propTypes = {
  className: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
  steps: _propTypes.default.arrayOf(_propTypes.default.shape({
    selector: _propTypes.default.string,
    content: _propTypes.default.shape({
      header: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.element]),
      body: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.element, _propTypes.default.func]).isRequired
    }).isRequired,
    position: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left', 'center']),
    action: _propTypes.default.func,
    style: _propTypes.default.object,
    stepInteraction: _propTypes.default.bool
  })).isRequired,
  isOpen: _propTypes.default.bool,
  onRequestClose: _propTypes.default.func,
  disableAllInteractions: _propTypes.default.bool,
  lastStepNextButtonDataFeature: _propTypes.default.string,
  tourId: _propTypes.default.string
};
var _default = exports.default = GuidedTour;
//# sourceMappingURL=GuidedTour.component.js.map