@decisiv/ui-components 2.0.1-alpha.186 → 2.0.1-alpha.187

package/lib/components/Wizard/index.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _breakpointObserver = require("@decisiv/breakpoint-observer");
+
+var _ArrowLeft = _interopRequireDefault(require("@decisiv/iconix/lib/components/ArrowLeft"));
+
+var _ArrowRight = _interopRequireDefault(require("@decisiv/iconix/lib/components/ArrowRight"));
+
+var _ = require("..");
+
+var _useTranslations = _interopRequireDefault(require("../../utils/useTranslations"));
+
+var _Manager = _interopRequireDefault(require("../Modal/Manager"));
+
+var _ResponsiveModalWrapper = _interopRequireDefault(require("../Modal/ResponsiveModalWrapper"));
+
+var _StepTracker = _interopRequireDefault(require("../StepTracker"));
+
+var _Typography = require("../Typography");
+
+var _styles = require("./styles");
+
+var _schema = _interopRequireDefault(require("./schema"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _extends() { _extends = Object.assign || 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); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+// Define Wizard component
+var Wizard = function Wizard(_ref) {
+  var _ref3;
+
+  var id = _ref.id,
+      wizardTitle = _ref.title,
+      currentStepNumber = _ref.activeStep,
+      submitButtonProps = _ref.submitButtonProps,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'normal' : _ref$size,
+      steps = _ref.steps,
+      onCancel = _ref.onCancel,
+      _ref$zIndex = _ref.zIndex,
+      zIndex = _ref$zIndex === void 0 ? 100 : _ref$zIndex;
+  var translate = (0, _useTranslations.default)();
+
+  var breakpoints = _defineProperty({}, _breakpointObserver.sizes.LG, 650);
+
+  var _useBreakpointObserve = (0, _breakpointObserver.useBreakpointObserver)(breakpoints),
+      _useBreakpointObserve2 = _slicedToArray(_useBreakpointObserve, 2),
+      observedElementRef = _useBreakpointObserve2[0],
+      breakpoint = _useBreakpointObserve2[1].breakpoint;
+
+  var currentStep = steps[currentStepNumber - 1];
+  var stepsTitles = steps.map(function (_ref2) {
+    var title = _ref2.title;
+    return title;
+  });
+  var title = currentStep.title,
+      content = currentStep.content,
+      nextButtonProps = currentStep.nextButtonProps,
+      previousButtonProps = currentStep.previousButtonProps;
+  var showPrevious = currentStepNumber > 1 && !!previousButtonProps;
+  var showSubmit = currentStepNumber === steps.length && !!submitButtonProps;
+  var showNext = currentStepNumber < steps.length && !showSubmit && !!nextButtonProps;
+  return _react.default.createElement(_ResponsiveModalWrapper.default, {
+    id: id,
+    size: size,
+    zIndex: zIndex,
+    breakpoint: breakpoint,
+    observedElementRef: observedElementRef
+  }, _react.default.createElement(_styles.WizardContainer, null, _react.default.createElement(_styles.ScrollYBox, {
+    size: breakpoint
+  }, _react.default.createElement(_styles.Header, {
+    size: breakpoint
+  }, _react.default.createElement(_.Flex, {
+    justifyContent: "center"
+  }, _react.default.createElement(_Typography.H2, null, wizardTitle)), _react.default.createElement(_StepTracker.default, {
+    steps: stepsTitles,
+    activeStep: currentStepNumber
+  })), _react.default.createElement(_styles.StepContainer, {
+    tabIndex: 0
+  }, _react.default.createElement(_.Flex, {
+    marginBottom: 2
+  }, _react.default.createElement(_Typography.H3, null, title)), content)), _react.default.createElement(_styles.Footer, {
+    size: breakpoint,
+    paddingX: (_ref3 = {}, _defineProperty(_ref3, _breakpointObserver.sizes.LG, 3), _defineProperty(_ref3, _breakpointObserver.sizes.XS, 2), _ref3),
+    paddingY: 1.5
+  }, _react.default.createElement(_styles.ActionButtonsContainer, {
+    size: breakpoint
+  }, showSubmit && _react.default.createElement(_.Button, _extends({
+    text: translate('Submit', 'wizard.actions.submit')
+  }, submitButtonProps)), showNext && _react.default.createElement(_.Button, _extends({
+    text: translate('Continue', 'wizard.actions.continue'),
+    icon: _ArrowRight.default,
+    iconPosition: "right"
+  }, nextButtonProps)), showPrevious && _react.default.createElement(_.Button, _extends({
+    text: translate('Back', 'wizard.actions.back'),
+    kind: "secondary",
+    icon: _ArrowLeft.default
+  }, previousButtonProps))), _react.default.createElement(_.Button, {
+    text: translate('Cancel', 'wizard.actions.cancel'),
+    kind: "secondary",
+    variant: "ghost",
+    onClick: onCancel
+  }))));
+};
+
+function WizardManger(props) {
+  var onCancel = props.onCancel,
+      visible = props.visible,
+      children = props.children;
+  return _react.default.createElement(_Manager.default, {
+    onClose: onCancel,
+    visible: visible
+  }, _react.default.createElement(Wizard, props, children));
+} // @ts-ignore
+
+
+WizardManger.propTypes = _objectSpread({}, _schema.default.propTypes);
+WizardManger.displayName = 'Wizard';
+var _default = WizardManger;
+exports.default = _default;