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

Set of react components.

import { Fragment } from 'react';
import Tour from 'reactour';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import { ButtonIcon, ButtonPrimary } from '@talend/design-system';
import I18N_DOMAIN_COMPONENTS from '../constants';
import theme from './GuidedTour.module.scss';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function getTooltipContent({
  header,
  body
}) {
  // eslint-disable-next-line react/display-name
  return reactourCallbacks => /*#__PURE__*/_jsxs(Fragment, {
    children: [header && /*#__PURE__*/_jsx("h2", {
      className: classNames(theme.header, 'tc-guided-tour__header'),
      children: header
    }), /*#__PURE__*/_jsx("div", {
      className: classNames(theme.body, 'tc-guided-tour__body'),
      children: typeof body === 'function' ? body(reactourCallbacks) : /*#__PURE__*/_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
  } = useTranslation(I18N_DOMAIN_COMPONENTS);
  if (!steps.length) {
    return null;
  }
  const dataFeature = action => tourId && `guidedtour.${tourId}.${action}`;
  return /*#__PURE__*/_jsx(Tour, {
    className: classNames(theme['tc-guided-tour'], 'tc-guided-tour', {
      [theme['no-interaction']]: !!disableAllInteractions
    }, {
      'tc-guided-tour--no-interaction': !!disableAllInteractions
    }, className),
    closeWithMask: false,
    disableDotsNavigation: true,
    disableInteraction: true,
    highlightedMaskClassName: "tc-guided-tour__highlighted-mask",
    lastStepNextButton: /*#__PURE__*/_jsx(ButtonPrimary, {
      "data-feature": lastStepNextButtonDataFeature !== null && lastStepNextButtonDataFeature !== void 0 ? lastStepNextButtonDataFeature : dataFeature('last'),
      children: t('GUIDEDTOUR_LAST_STEP', 'Let me try')
    }),
    nextButton: /*#__PURE__*/_jsx(ButtonIcon, {
      size: "S",
      onClick: () => {},
      icon: "arrow-right",
      "data-feature": dataFeature('next'),
      children: t('GUIDEDTOUR_NEXT_STEP', 'Next')
    }),
    prevButton: /*#__PURE__*/_jsx(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.oneOfType([PropTypes.object, PropTypes.string]),
  steps: PropTypes.arrayOf(PropTypes.shape({
    selector: PropTypes.string,
    content: PropTypes.shape({
      header: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
      body: PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.func]).isRequired
    }).isRequired,
    position: PropTypes.oneOf(['top', 'right', 'bottom', 'left', 'center']),
    action: PropTypes.func,
    style: PropTypes.object,
    stepInteraction: PropTypes.bool
  })).isRequired,
  isOpen: PropTypes.bool,
  onRequestClose: PropTypes.func,
  disableAllInteractions: PropTypes.bool,
  lastStepNextButtonDataFeature: PropTypes.string,
  tourId: PropTypes.string
};
export default GuidedTour;
//# sourceMappingURL=GuidedTour.component.js.map