@digigov/form 0.6.9 → 0.6.10

package/Questions/Questions.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Questions = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _QuestionsContext = require("@digigov/form/Questions/QuestionsContext");
+
+var _getNextStep = require("@digigov/form/Questions/getNextStep");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var isBrowser = typeof window !== 'undefined';
+/**
+ * The Question component accepts question data as props
+ * uses composable components to provide a wholesome UX
+ *
+ */
+
+var Questions = function Questions(_ref) {
+  var name = _ref.name,
+      steps = _ref.steps,
+      _ref$initialData = _ref.initialData,
+      initialData = _ref$initialData === void 0 ? {} : _ref$initialData,
+      onChange = _ref.onChange,
+      onSubmit = _ref.onSubmit,
+      onActiveStep = _ref.onActiveStep,
+      forceStepName = _ref.forceStepName,
+      _ref$localDraft = _ref.localDraft,
+      localDraft = _ref$localDraft === void 0 ? false : _ref$localDraft,
+      children = _ref.children;
+
+  var _useState = (0, _react.useState)({
+    name: ''
+  }),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      currentStep = _useState2[0],
+      setCurrentStep = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (!forceStepName) {
+      setCurrentStep(steps[0]);
+    }
+  }, [forceStepName, steps]);
+  (0, _react.useEffect)(function () {
+    if (forceStepName !== currentStep.name) {
+      var forceStep = steps.find(function (_ref2) {
+        var name = _ref2.name;
+        return name === forceStepName;
+      });
+      forceStep && setCurrentStep(forceStep);
+    }
+  }, [forceStepName]);
+  var localData = isBrowser && localDraft && window.localStorage.getItem("questions-".concat(name));
+
+  var _useState3 = (0, _react.useState)(localData && JSON.parse(localData) || initialData),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      data = _useState4[0],
+      setData = _useState4[1];
+
+  var submitStep = function submitStep(stepName, stepData) {
+    data[stepName] = stepData;
+
+    if (localDraft) {
+      isBrowser && window.localStorage.setItem("questions-".concat(name), JSON.stringify(data));
+    }
+
+    if (onChange) {
+      onChange && onChange(data);
+    }
+
+    setData(data);
+    var nextStep = (0, _getNextStep.getNextStep)(currentStep, steps, data);
+
+    if (nextStep) {
+      onActiveStep && onActiveStep(nextStep);
+      setCurrentStep(nextStep);
+    } else {
+      onSubmit(data);
+    }
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_QuestionsContext.QuestionsContext.Provider, {
+    value: {
+      steps: steps,
+      currentStep: currentStep,
+      submitStep: submitStep,
+      data: data,
+      onActiveStep: onActiveStep
+    }
+  }, children);
+};
+
+exports.Questions = Questions;

package/Questions/QuestionsContext.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QuestionsContext = void 0;
+
+var _react = require("react");
+
+var defaultStep = {
+  name: ''
+};
+var QuestionsContext = /*#__PURE__*/(0, _react.createContext)({
+  currentStep: defaultStep,
+  steps: [],
+  submitStep: function submitStep() {
+    return null;
+  }
+});
+exports.QuestionsContext = QuestionsContext;

package/Questions/Step/ReviewStep.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ReviewStep = void 0;
+exports["default"] = exports.ReviewStep = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -17,9 +17,11 @@ var _Title = _interopRequireDefault(require("@digigov/ui/typography/Title"));
 
 var _core = require("@digigov/ui/core");
 
-var _Questions = require("@digigov/form/Questions/");
+var _QuestionsContext = require("@digigov/form/Questions/QuestionsContext");
 
-var _Step = require("@digigov/form/Questions/Step");
+var _StepTitle = require("@digigov/form/Questions/Step/StepTitle");
+
+var _StepContext = require("@digigov/form/Questions/Step/StepContext");
 
 var _i18n = require("@digigov/ui/app/i18n");
 
@@ -31,11 +33,11 @@ var ReviewStep = function ReviewStep() {
   var _useTranslation = (0, _i18n.useTranslation)(),
       t = _useTranslation.t;
 
-  var _useContext = (0, _react.useContext)(_Step.StepContext),
+  var _useContext = (0, _react.useContext)(_StepContext.StepContext),
       submitStep = _useContext.submitStep,
       title = _useContext.title;
 
-  var _useContext2 = (0, _react.useContext)(_Questions.QuestionsContext),
+  var _useContext2 = (0, _react.useContext)(_QuestionsContext.QuestionsContext),
       data = _useContext2.data,
       steps = _useContext2.steps,
       onActiveStep = _useContext2.onActiveStep;
@@ -43,7 +45,7 @@ var ReviewStep = function ReviewStep() {
   var filledSteps = steps.filter(function (step) {
     return !!data[step.name];
   });
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Step.StepTitleBase, {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_StepTitle.StepTitleBase, {
     title: title || 'Review answers'
   }), filledSteps.map(function (step) {
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -72,4 +74,6 @@ var ReviewStep = function ReviewStep() {
   }, t('button.submit')));
 };
 
-exports.ReviewStep = ReviewStep;
+exports.ReviewStep = ReviewStep;
+var _default = ReviewStep;
+exports["default"] = _default;

package/Questions/Step/Step.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Step = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _QuestionsContext = require("@digigov/form/Questions/QuestionsContext");
+
+var _StepContext = require("@digigov/form/Questions/Step/StepContext");
+
+var _StepArrayReview = require("@digigov/form/Questions/Step/StepArrayReview");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * The Step component accepts Step data as props
+ * uses composable components to provide a wholesome UX
+ *
+ */
+var Step = function Step(props) {
+  // or return all Questions and currentStepName
+  // or return a specific Step object
+  var _useContext = (0, _react.useContext)(_QuestionsContext.QuestionsContext),
+      currentStep = _useContext.currentStep,
+      submitStep = _useContext.submitStep,
+      data = _useContext.data;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      stepData = _useState2[0],
+      setStepData = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      reviewActive = _useState4[0],
+      setReviewActive = _useState4[1];
+
+  var handleArraySubmit = function handleArraySubmit(_name, data) {
+    setStepData([].concat((0, _toConsumableArray2["default"])(stepData), [data]));
+    setReviewActive(true);
+  };
+
+  var handleArrayDeleteItem = function handleArrayDeleteItem(deleteIndex) {
+    var nextStepData = stepData.filter(function (_item, stepIndex) {
+      return stepIndex !== deleteIndex;
+    });
+    setStepData(nextStepData);
+
+    if (nextStepData.length === 0) {
+      setReviewActive(false);
+    }
+  };
+
+  var handleArrayReviewStep = function handleArrayReviewStep(data) {
+    if (data.addMore === 'yes') {
+      setReviewActive(false);
+    } else if (data.addMore === 'no') {
+      submitStep(currentStep.name, stepData);
+    }
+  };
+
+  if (!currentStep || props.name !== currentStep.name) return null; // then provide the currentStep object
+
+  return /*#__PURE__*/_react["default"].createElement(_StepContext.StepContext.Provider, {
+    value: (0, _extends2["default"])({}, currentStep, {
+      submitStep: currentStep.type === 'array' ? handleArraySubmit : submitStep,
+      initial: data[props.name]
+    })
+  }, reviewActive ? /*#__PURE__*/_react["default"].createElement(_StepArrayReview.StepArrayReview, {
+    array: stepData,
+    handleSubmit: handleArrayReviewStep,
+    handleDelete: handleArrayDeleteItem
+  }) : props.children);
+};
+
+exports.Step = Step;
+var _default = Step;
+exports["default"] = _default;

package/Questions/Step/StepArrayReview.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.StepArrayReview = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _QuestionsContext = require("@digigov/form/Questions/QuestionsContext");
+
+var _PageTitle = _interopRequireWildcard(require("@digigov/ui/app/PageTitle"));
+
+var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
+
+var _FormBuilder = require("@digigov/form/FormBuilder");
+
+var _Field = require("@digigov/form/Field");
+
+var _Fieldset = require("@digigov/form/Fieldset");
+
+var _Label = _interopRequireDefault(require("@digigov/form/inputs/Label"));
+
+var _SummaryList = require("@digigov/ui/core/SummaryList");
+
+var _i18n = require("@digigov/ui/app/i18n");
+
+var _getAddMoreFields = require("@digigov/form/Questions/Step/getAddMoreFields");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var StepArrayReview = function StepArrayReview(props) {
+  var _currentStep$review2, _currentStep$review3, _currentStep$review4;
+
+  var _useTranslation = (0, _i18n.useTranslation)(),
+      t = _useTranslation.t;
+
+  var _useContext = (0, _react.useContext)(_QuestionsContext.QuestionsContext),
+      currentStep = _useContext.currentStep;
+
+  var fields = (0, _getAddMoreFields.getAddMoreFields)(currentStep);
+  var primaryField = currentStep.fields.find(function (field) {
+    var _currentStep$review;
+
+    return field.key === ((_currentStep$review = currentStep.review) === null || _currentStep$review === void 0 ? void 0 : _currentStep$review.primaryFieldKey);
+  }) || {};
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_PageTitle["default"], null, /*#__PURE__*/_react["default"].createElement(_PageTitle.PageTitleHeading, null, ((_currentStep$review2 = currentStep.review) === null || _currentStep$review2 === void 0 ? void 0 : _currentStep$review2.title) && t((_currentStep$review3 = currentStep.review) === null || _currentStep$review3 === void 0 ? void 0 : _currentStep$review3.title))), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryList, null, props.array.map(function (item, idx) {
+    return /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, {
+      key: idx
+    }, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, t(primaryField.label.primary)), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, item[primaryField.key]), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, {
+      onClick: function onClick() {
+        return props.handleDelete(idx);
+      }
+    }, t('button.delete')));
+  })), /*#__PURE__*/_react["default"].createElement(_FormBuilder.FormBuilder, {
+    key: "addmore",
+    fields: fields,
+    onSubmit: props.handleSubmit
+  }, /*#__PURE__*/_react["default"].createElement(_Fieldset.Fieldset, null, /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+    label: (_currentStep$review4 = currentStep.review) === null || _currentStep$review4 === void 0 ? void 0 : _currentStep$review4.addMore.title
+  }), fields.map(function (field) {
+    return /*#__PURE__*/_react["default"].createElement(_Field.Field, {
+      key: field.key,
+      name: field.key
+    });
+  })), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    type: "submit"
+  }, t('button.submit'))));
+};
+
+exports.StepArrayReview = StepArrayReview;
+var _default = StepArrayReview;
+exports["default"] = _default;

package/Questions/Step/StepContext.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.StepContext = void 0;
+
+var _react = require("react");
+
+var StepContext = /*#__PURE__*/(0, _react.createContext)({
+  name: '',
+  fields: [],
+  initial: [],
+  errorLabels: [],
+  submitStep: '',
+  review: {
+    title: '',
+    primaryFieldKey: '',
+    addMore: {
+      title: {
+        primary: ''
+      },
+      answers: {
+        positive: {
+          primary: 'Yes'
+        },
+        negative: {
+          primary: 'No'
+        }
+      }
+    }
+  },
+  type: 'object'
+});
+exports.StepContext = StepContext;
+var _default = StepContext;
+exports["default"] = _default;

package/Questions/Step/StepDescription.js

@@ -15,7 +15,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Step = require("@digigov/form/Questions/Step");
+var _StepContext = require("@digigov/form/Questions/Step/StepContext");
 
 var _Paragraph = _interopRequireDefault(require("@digigov/ui/typography/Paragraph"));
 
@@ -41,7 +41,7 @@ var StepDescriptionBase = function StepDescriptionBase(_ref) {
 exports.StepDescriptionBase = StepDescriptionBase;
 
 var StepDescription = function StepDescription(props) {
-  var _useContext = (0, _react.useContext)(_Step.StepContext),
+  var _useContext = (0, _react.useContext)(_StepContext.StepContext),
       descriptionContext = _useContext.description;
 
   var description = props.description || descriptionContext;

package/Questions/Step/StepForm.js

@@ -13,9 +13,13 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Step = require("@digigov/form/Questions/Step");
+var _StepContext = require("@digigov/form/Questions/Step/StepContext");
 
-var _form = _interopRequireWildcard(require("@digigov/form"));
+var _FormBuilder = _interopRequireDefault(require("@digigov/form/FormBuilder"));
+
+var _Fieldset = _interopRequireDefault(require("@digigov/form/Fieldset"));
+
+var _Field = _interopRequireDefault(require("@digigov/form/Field"));
 
 var _Button = _interopRequireDefault(require("@digigov/ui/core/Button"));
 
@@ -40,14 +44,14 @@ var StepForm = function StepForm(_ref) {
   var _useTranslation = (0, _i18n.useTranslation)(),
       t = _useTranslation.t;
 
-  var _useContext = (0, _react.useContext)(_Step.StepContext),
+  var _useContext = (0, _react.useContext)(_StepContext.StepContext),
       name = _useContext.name,
       submitStep = _useContext.submitStep,
       rest = (0, _objectWithoutProperties2["default"])(_useContext, _excluded2);
 
   var fields = rest.fields.length ? rest.fields : props.fields;
   var initial = rest.initial ? rest.initial : props.initial;
-  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_FormBuilder["default"], {
     initial: initial,
     fields: fields,
     onSubmit: function onSubmit(data) {
@@ -55,8 +59,8 @@ var StepForm = function StepForm(_ref) {
     }
   }, children ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children, submitButton && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     type: "submit"
-  }, t('button.continue'))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_form.Fieldset, null, fields.map(function (field) {
-    return /*#__PURE__*/_react["default"].createElement(_form.Field, {
+  }, t('button.continue'))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Fieldset["default"], null, fields.map(function (field) {
+    return /*#__PURE__*/_react["default"].createElement(_Field["default"], {
       key: field.key,
       name: field.key
     });

package/Questions/Step/StepTitle.js

@@ -11,7 +11,7 @@ exports["default"] = exports.StepTitleHeading = exports.StepTitleBase = exports.
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Step = require("@digigov/form/Questions/Step");
+var _StepContext = require("@digigov/form/Questions/Step/StepContext");
 
 var _PageTitle = _interopRequireWildcard(require("@digigov/ui/app/PageTitle"));
 
@@ -51,7 +51,7 @@ var StepTitleBase = function StepTitleBase(_ref) {
 exports.StepTitleBase = StepTitleBase;
 
 var StepTitle = function StepTitle(props) {
-  var _useContext = (0, _react.useContext)(_Step.StepContext),
+  var _useContext = (0, _react.useContext)(_StepContext.StepContext),
       caption = _useContext.caption,
       title = _useContext.title,
       step = _useContext.step;

package/Questions/Step/getAddMoreFields.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAddMoreFields = void 0;
+
+var getAddMoreFields = function getAddMoreFields(currentStep) {
+  var _currentStep$review, _currentStep$review2;
+
+  return [{
+    key: 'addMore',
+    type: 'choice:single',
+    required: true,
+    extra: {
+      options: [{
+        label: ((_currentStep$review = currentStep.review) === null || _currentStep$review === void 0 ? void 0 : _currentStep$review.addMore.answers.positive) || {
+          primary: 'Yes'
+        },
+        value: 'yes'
+      }, {
+        label: ((_currentStep$review2 = currentStep.review) === null || _currentStep$review2 === void 0 ? void 0 : _currentStep$review2.addMore.answers.negative) || {
+          primary: 'No'
+        },
+        value: 'no'
+      }]
+    }
+  }];
+};
+
+exports.getAddMoreFields = getAddMoreFields;