react-morning 0.0.1-security → 1.0.9

package/src/components/Form.jsx

@@ -0,0 +1,179 @@
+import {cloneDeep} from 'lodash/lang';
+import React, {useEffect, useRef, useState} from 'react';
+import PropTypes from 'prop-types';
+import EventEmitter from 'eventemitter2';
+import _isEqual from 'lodash/isEqual';
+import {Formio} from 'formiojs';
+const FormioForm = Formio.Form;
+
+/**
+ * @param {FormProps} props
+ * @returns {JSX.Element}
+ */
+ const Form = (props) => {
+  let instance;
+  let createPromise;
+  let element;
+  const [formio, setFormio] = useState(undefined);
+  const jsonForm = useRef(undefined);
+
+  useEffect(() => () => formio ? formio.destroy(true) : null, [formio]);
+
+  const createWebformInstance = (srcOrForm) => {
+    const {options = {}, formioform, formReady} = props;
+    instance = new (formioform || FormioForm)(element, srcOrForm, options);
+    createPromise = instance.ready.then(formioInstance => {
+      setFormio(formioInstance);
+      if (formReady) {
+        formReady(formioInstance);
+      }
+      return formioInstance;
+    });
+
+    return createPromise;
+  };
+
+  const onAnyEvent = (event, ...args) => {
+     if (event.startsWith('formio.')) {
+      const funcName = `on${event.charAt(7).toUpperCase()}${event.slice(8)}`;
+       // eslint-disable-next-line no-prototype-builtins
+      if (props.hasOwnProperty(funcName) && typeof (props[funcName]) === 'function') {
+        props[funcName](...args);
+      }
+    }
+  };
+
+  const initializeFormio = () => {
+    const {submission} = props;
+    if (createPromise) {
+      instance.onAny(onAnyEvent);
+      createPromise.then(() => {
+        if (formio && submission) {
+          formio.submission = submission;
+        }
+      });
+    }
+  };
+
+  useEffect(() => {
+    const {src} = props;
+    if (src) {
+      createWebformInstance(src).then((formioInstance) => {
+        if (formioInstance) {
+          formioInstance.src = src;
+        }
+      });
+      initializeFormio();
+    }
+  }, [props.src]);
+
+  useEffect(() => {
+    const {form, url} = props;
+
+    if (form && !_isEqual(form, jsonForm.current)) {
+      jsonForm.current = cloneDeep(form);
+      createWebformInstance(jsonForm.current).then((formioInstance) => {
+        if (formioInstance) {
+          formioInstance.form = jsonForm.current;
+          if (url) {
+            formioInstance.url = url;
+          }
+        }
+      });
+      initializeFormio();
+    }
+  }, [props.form]);
+
+  useEffect(() => {
+    const {options = {}} = props;
+    if (!options.events) {
+      options.events = Form.getDefaultEmitter();
+    }
+  }, [props.options]);
+
+  useEffect(() => {
+    const {submission} = props;
+    if (formio && submission && !_isEqual(formio.submission.data, submission.data)) {
+      formio.submission = submission;
+    }
+  }, [props.submission, formio]);
+
+  return <div ref={el => element = el} />;
+};
+
+/**
+ * @typedef {object} Options
+ * @property {boolean} [readOnly]
+ * @property {boolean} [noAlerts]
+ * @property {object} [i18n]
+ * @property {string} [template]
+ * @property {boolean} [saveDraft]
+ */
+
+/**
+ * @typedef {object} FormProps
+ * @property {string} [src]
+ * @property {string} [url]
+ * @property {object} [form]
+ * @property {object} [submission]
+ * @property {Options} [options]
+ * @property {function} [onPrevPage]
+ * @property {function} [onNextPage]
+ * @property {function} [onCancel]
+ * @property {function} [onChange]
+ * @property {function} [onCustomEvent]
+ * @property {function} [onComponentChange]
+ * @property {function} [onSubmit]
+ * @property {function} [onSubmitDone]
+ * @property {function} [onFormLoad]
+ * @property {function} [onError]
+ * @property {function} [onRender]
+ * @property {function} [onAttach]
+ * @property {function} [onBuild]
+ * @property {function} [onFocus]
+ * @property {function} [onBlur]
+ * @property {function} [onInitialized]
+ * @property {function} [formReady]
+ * @property {any} [formioform]
+ */
+Form.propTypes = {
+  src: PropTypes.string,
+  url: PropTypes.string,
+  form: PropTypes.object,
+  submission: PropTypes.object,
+  options: PropTypes.shape({
+    readOnly: PropTypes.bool,
+    noAlerts: PropTypes.bool,
+    i18n: PropTypes.object,
+    template: PropTypes.string,
+    saveDraft: PropTypes.bool,
+    language: PropTypes.string
+  }),
+  onPrevPage: PropTypes.func,
+  onNextPage: PropTypes.func,
+  onCancel: PropTypes.func,
+  onChange: PropTypes.func,
+  onCustomEvent: PropTypes.func,
+  onComponentChange: PropTypes.func,
+  onSubmit: PropTypes.func,
+  onSubmitDone: PropTypes.func,
+  onFormLoad: PropTypes.func,
+  onError: PropTypes.func,
+  onRender: PropTypes.func,
+  onAttach: PropTypes.func,
+  onBuild: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onInitialized: PropTypes.func,
+  formReady: PropTypes.func,
+  formioform: PropTypes.any
+};
+
+Form.getDefaultEmitter = () => {
+  return new EventEmitter({
+    wildcard: false,
+    maxListeners: 0
+  });
+};
+
+export default Form;

package/src/components/FormBuilder.jsx

@@ -0,0 +1,113 @@
+import React, {useEffect, useRef, useCallback, useLayoutEffect} from 'react';
+import PropTypes from 'prop-types';
+import {FormBuilder as FormioFormBuilder} from 'formiojs';
+
+const FormBuilder = (props) => {
+  const builderRef = useRef();
+  let element;
+
+  const emit = (funcName) => (...args) => {
+    // eslint-disable-next-line no-prototype-builtins
+    if (props.hasOwnProperty(funcName) && typeof (props[funcName]) === 'function') {
+      props[funcName](...args);
+    }
+  };
+
+  const onChange = () => {
+    const {onChange} = props;
+    if (onChange && typeof onChange === 'function') {
+      const schema = {
+        ...builderRef.current.instance.form
+      };
+
+      Object.defineProperty(schema, 'components', {
+        get: function() {
+          return builderRef.current.instance.schema.components;
+        }
+      });
+
+      onChange(builderRef.current.instance.form, schema);
+    }
+  };
+
+  const builderEvents = [
+    {name: 'saveComponent', action: emit('onSaveComponent')},
+    {name: 'updateComponent', action: emit('onUpdateComponent')},
+    {name: 'removeComponent', action: emit('onDeleteComponent')},
+    {name: 'cancelComponent', action: emit('onUpdateComponent')},
+    {name: 'editComponent', action: emit('onEditComponent')},
+    {name: 'addComponent', action: onChange},
+    {name: 'saveComponent', action: onChange},
+    {name: 'updateComponent', action: onChange},
+    {name: 'removeComponent', action: onChange},
+    {name: 'deleteComponent', action: onChange},
+    {name: 'pdfUploaded', action: onChange},
+  ];
+
+  const initializeBuilder = (builderProps) => {
+    let {options, form} = builderProps;
+    const {Builder} = builderProps;
+    options = Object.assign({}, options);
+    form = Object.assign({}, form);
+
+    builderRef.current = new Builder(element, form, options);
+
+    builderRef.current.ready.then(() => {
+      onChange();
+      builderEvents.forEach(({name, action}) => {
+        builderRef.current.instance.off(name, action);
+        builderRef.current.instance.on(name, action);
+      });
+    });
+  };
+
+  useEffect(() => {
+    initializeBuilder(props);
+    return () => (builderRef.current ? builderRef.current.instance.destroy(true) : null);
+  }, [builderRef]);
+
+  useEffect(() => {
+    if (!builderRef.current && props.form) {
+      initializeBuilder(props);
+    }
+  }, [props.form, builderRef]);
+
+  const elementDidMount = useCallback((el) => element = el);
+
+  useLayoutEffect(() => {
+    if (builderRef.current && props.form && props.form.display) {
+      builderRef.current.setDisplay(props.form.display);
+    }
+  }, [props.form.display]);
+
+  useLayoutEffect(() => {
+    if (builderRef.current && props.form && props.form.components) {
+      builderRef.current.setForm(props.form);
+    }
+  }, [props.form]);
+
+  return (
+    <div>
+      <div ref={elementDidMount}></div>
+    </div>
+  );
+};
+
+FormBuilder.defaultProps = {
+  options: {},
+  Builder: FormioFormBuilder
+};
+
+FormBuilder.propTypes = {
+  form: PropTypes.object,
+  options: PropTypes.object,
+  onChange: PropTypes.func,
+  onSaveComponent: PropTypes.func,
+  onUpdateComponent: PropTypes.func,
+  onDeleteComponent: PropTypes.func,
+  onCancelComponent: PropTypes.func,
+  onEditComponent: PropTypes.func,
+  Builder: PropTypes.any
+};
+
+export default FormBuilder;

package/src/components/FormEdit.jsx

@@ -0,0 +1,175 @@
+import React, {useEffect, useReducer} from 'react';
+import PropTypes from 'prop-types';
+import FormBuilder from './FormBuilder';
+import _set from 'lodash/set';
+import _cloneDeep from 'lodash/cloneDeep';
+import _camelCase from 'lodash/camelCase';
+
+const reducer = (form, {type, value}) => {
+  const formCopy = _cloneDeep(form);
+  switch (type) {
+    case 'formChange':
+      for (let prop in value) {
+        // eslint-disable-next-line no-prototype-builtins
+        if (value.hasOwnProperty(prop)) {
+          form[prop] = value[prop];
+        }
+      }
+      return form;
+    case 'replaceForm':
+      return _cloneDeep(value);
+    case 'title':
+      if (type === 'title' && !form._id) {
+        formCopy.name = _camelCase(value);
+        formCopy.path = _camelCase(value).toLowerCase();
+      }
+      break;
+  }
+  _set(formCopy, type, value);
+  return formCopy;
+};
+
+const FormEdit = (props) => {
+  const [form, dispatchFormAction] = useReducer(reducer, _cloneDeep(props.form));
+  useEffect(() => {
+    const {form: newForm} = props;
+    if (newForm && (form._id !== newForm._id || form.modified !== newForm.modified)) {
+      dispatchFormAction({type: 'replaceForm', value: newForm});
+    }
+  }, [props.form]);
+
+  const saveForm = () => {
+    const {saveForm} = props;
+    if (saveForm && typeof saveForm === 'function') {
+      saveForm(form);
+    }
+  };
+
+  const handleChange = (path, event) => {
+    const {target} = event;
+    const value = target.type === 'checkbox' ? target.checked : target.value;
+    dispatchFormAction({type: path, value});
+  };
+
+  const formChange = (newForm) => dispatchFormAction({type: 'formChange', value: newForm});
+
+  const {saveText, options, builder, ref} = props;
+
+  return (
+    <div>
+      <div className="row" ref={ref}>
+        <div className="col-lg-2 col-md-4 col-sm-4">
+          <div id="form-group-title" className="form-group">
+            <label htmlFor="title" className="control-label field-required">Title</label>
+            <input
+              type="text"
+              className="form-control" id="title"
+              placeholder="Enter the form title"
+              value={form.title || ''}
+              onChange={event => handleChange('title', event)}
+            />
+          </div>
+        </div>
+        <div className="col-lg-2 col-md-4 col-sm-4">
+          <div id="form-group-name" className="form-group">
+            <label htmlFor="name" className="control-label field-required">Name</label>
+            <input
+              type="text"
+              className="form-control"
+              id="name"
+              placeholder="Enter the form machine name"
+              value={form.name || ''}
+              onChange={event => handleChange('name', event)}
+            />
+          </div>
+        </div>
+        <div className="col-lg-2 col-md-3 col-sm-3">
+          <div id="form-group-display" className="form-group">
+            <label htmlFor="name" className="control-label">Display as</label>
+            <div className="input-group">
+              <select
+                className="form-control"
+                name="form-display"
+                id="form-display"
+                value={form.display || ''}
+                onChange={event => handleChange('display', event)}
+              >
+                <option label="Form" value="form">Form</option>
+                <option label="Wizard" value="wizard">Wizard</option>
+                <option label="PDF" value="pdf">PDF</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div className="col-lg-2 col-md-3 col-sm-3">
+          <div id="form-group-type" className="form-group">
+            <label htmlFor="form-type" className="control-label">Type</label>
+            <div className="input-group">
+              <select
+                className="form-control"
+                name="form-type"
+                id="form-type"
+                value={form.type}
+                onChange={event => handleChange('type', event)}
+              >
+                <option label="Form" value="form">Form</option>
+                <option label="Resource" value="resource">Resource</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div className="col-lg-2 col-md-4 col-sm-4">
+          <div id="form-group-path" className="form-group">
+            <label htmlFor="path" className="control-label field-required">Path</label>
+            <div className="input-group">
+              <input
+                type="text"
+                className="form-control"
+                id="path"
+                placeholder="example"
+                style={{'textTransform': 'lowercase', width:'120px'}}
+                value={form.path || ''}
+                onChange={event => handleChange('path', event)}
+              />
+            </div>
+          </div>
+        </div>
+        <div id="save-buttons" className="col-lg-2 col-md-5 col-sm-5 save-buttons pull-right">
+          <div className="form-group pull-right">
+            <span className="btn btn-primary" onClick={() => saveForm()}>
+              {saveText}
+            </span>
+          </div>
+        </div>
+      </div>
+      <FormBuilder
+        key={form._id}
+        form={form}
+        options={options}
+        builder={builder}
+        onChange={formChange}
+      />
+    </div>
+  );
+};
+
+FormEdit.propTypes = {
+  form: PropTypes.object.isRequired,
+  options: PropTypes.object,
+  builder: PropTypes.any,
+  saveForm: PropTypes.func,
+  saveText: PropTypes.string
+};
+
+FormEdit.defaultProps = {
+  form: {
+    title: '',
+    name: '',
+    path: '',
+    display: 'form',
+    type: 'form',
+    components: [],
+  }
+};
+
+export default FormEdit;