react-misc-toolbox/dist/Form.js

[ ] imageviewer | gradual scroll [ ] imageviewer | cancellable scroll

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Form = undefined;

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends5 = require('babel-runtime/helpers/extends');

var _extends6 = _interopRequireDefault(_extends5);

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _helperFunctions = require('./helperFunctions');

var _recompose = require('recompose');

var _Button = require('./Button');

var _Button2 = _interopRequireDefault(_Button);

var _SelectOne = require('./SelectOne');

var _SelectOne2 = _interopRequireDefault(_SelectOne);

var _SelectMany = require('./SelectMany');

var _SelectMany2 = _interopRequireDefault(_SelectMany);

var _ = require('.');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var signValueLabelMaps = [{
  value: -1,
  label: '<'
}, {
  value: 0,
  label: '='
}, {
  value: 1,
  label: '>'
}];

var sumOf = function sumOf(arrayOfNumbers) {
  return arrayOfNumbers.reduce(function (acc, v) {
    acc = acc + v;
    return acc;
  });
};

var Form = function Form(props) {
  var onMount = props.onMount,
      onUnmount = props.onUnmount,
      _props$baseClassName = props.baseClassName,
      baseClassName = _props$baseClassName === undefined ? 'form' : _props$baseClassName,
      className = props.className,
      style = props.style,
      values = props.values,
      touched = props.touched,
      errors = props.errors,
      children = props.children,
      handleChange = props.handleChange,
      handleSubmit = props.handleSubmit,
      setFieldValue = props.setFieldValue,
      setFieldTouched = props.setFieldTouched,
      isSubmitting = props.isSubmitting;

  //useEffect(() => {
  //  onMount && onMount()
  //  return () => {
  //    onUnmount && onUnmount()
  //  }
  //}, [])

  var renderError = function renderError(type) {
    return errors && errors[type] && touched && touched[type] && _react2.default.createElement(
      'div',
      { className: baseClassName + '__error' },
      errors[type]
    );
  };

  var renderTextareaInputSocket = function renderTextareaInputSocket(_ref) {
    var type = _ref.type,
        label = _ref.label,
        _ref$required = _ref.required,
        required = _ref$required === undefined ? true : _ref$required;
    return _react2.default.createElement(
      'div',
      { className: baseClassName + '__socket ' + baseClassName + '__textarea__socket' },
      values[type] && _react2.default.createElement(
        _react.Fragment,
        null,
        _react2.default.createElement(
          'div',
          { className: baseClassName + '__label ' + baseClassName + '__textarea__label' },
          (0, _helperFunctions.capitalizeEveryWord)(label)
        ),
        _react2.default.createElement('textarea', {
          className: baseClassName + '__input ' + baseClassName + '__textarea__input',
          'data-testid': type.toLowerCase() + '-input',
          id: type,
          required: required,
          value: values[type],
          onChange: function onChange(e) {
            return setFieldValue(type, e.target.value);
          }
        })
      ),
      errors[type] && touched[type] && _react2.default.createElement(
        'div',
        { className: 'input-feedback' },
        errors[type]
      )
    );
  };

  var renderSelectManyWithAdvancedCompositionSocket = function renderSelectManyWithAdvancedCompositionSocket(_ref2) {
    var _ref2$isSigned = _ref2.isSigned,
        isSigned = _ref2$isSigned === undefined ? true : _ref2$isSigned,
        _ref2$isVertical = _ref2.isVertical,
        isVertical = _ref2$isVertical === undefined ? false : _ref2$isVertical,
        type = _ref2.type,
        label = _ref2.label,
        optionLabels = _ref2.optionLabels,
        renderTrigger = _ref2.renderTrigger;

    //draw currentOptions from labels and current values
    var currentOptions = values[type] ? (0, _keys2.default)(values[type]).map(function (compositionID) {
      var currentOptionLabelMap = optionLabels.find(function (optionLabel) {
        return optionLabel.value === compositionID;
      });
      if (!currentOptionLabelMap) {
        throw new Error('optionLabels prop lacks one or more of the form values');
      }
      return {
        value: compositionID,
        label: currentOptionLabelMap.label
      };
    }) : [];
    var getSharedInputProps = function getSharedInputProps(_ref3) {
      var currentOption = _ref3.currentOption;

      var value = values[type][currentOption.value];
      return {
        onClick: function onClick(e) {
          e.stopPropagation();
          e.nativeEvent.stopImmediatePropagation();
        },
        id: currentOption.value,
        value: value ? value[0] : 0,
        onChange: function onChange(v) {
          var integerValue = parseInt(v.target.value, 10);
          var integerSign = value ? value[1] : 0;
          setFieldValue(type, (0, _extends6.default)({}, values[type], (0, _defineProperty3.default)({}, currentOption.value, [integerValue, integerSign])));
        }
      };
    };
    var renderSignDropdown = function renderSignDropdown(_ref4) {
      var option = _ref4.option;

      //signValueLabelMapExists =
      return values[type][option.value] && _react2.default.createElement(
        _SelectOne2.default,
        {
          renderTrigger: function renderTrigger(_ref5) {
            var currentOption = _ref5.currentOption,
                isOn = _ref5.isOn,
                getTriggerProps = _ref5.getTriggerProps;
            return _react2.default.createElement(
              _Button2.default,
              (0, _extends6.default)({ isOn: isOn }, getTriggerProps()),
              currentOption ? currentOption.label : optionLabels[0].label
            );
          },
          currentOption: signValueLabelMaps.find(function (signValueLabelMap) {
            return signValueLabelMap.value === values[type][option.value][1];
          }),
          onChange: function onChange(signValueLabelMap) {
            setFieldValue(type, (0, _extends6.default)({}, values[type], (0, _defineProperty3.default)({}, option.value, [values[type][option.value][0], signValueLabelMap.value])));
          },
          options: signValueLabelMaps
        },
        signValueLabelMaps
      );
    };

    var renderCurrentOptionLabel = function renderCurrentOptionLabel(_ref6) {
      var currentOption = _ref6.currentOption;

      return _react2.default.createElement(
        'div',
        {
          className: (0, _helperFunctions.flippyClass)(isVertical, baseClassName + '__composition__label', 'vertical', 'horizontal')
        },
        currentOption.label
      );
    };
    var renderCurrentOptionInputs = function renderCurrentOptionInputs(_ref7) {
      var currentOption = _ref7.currentOption;

      var renderRangeInput = function renderRangeInput() {
        return _react2.default.createElement('input', (0, _extends6.default)({}, getSharedInputProps({ currentOption: currentOption }), {
          className: (0, _helperFunctions.flippyMultiBase)(isVertical, [baseClassName + '__composition__input', baseClassName + '__composition__input__range'], 'vertical', 'horizontal'),
          style: isVertical ? {
            WebkitAppearance: 'slider-vertical',
            writingMode: 'bt-lr'
          } : {},
          orient: isVertical ? 'vertical' : 'horizontal',
          type: 'range'
        }));
      };
      var renderNumberInput = function renderNumberInput() {
        return _react2.default.createElement('input', (0, _extends6.default)({}, getSharedInputProps({ currentOption: currentOption }), {
          className: baseClassName + '__composition__input ' + baseClassName + '__composition__input__number',
          type: 'number'
        }));
      };
      return _react2.default.createElement(
        _react.Fragment,
        null,
        renderRangeInput(),
        isSigned && renderSignDropdown({ option: currentOption }),
        renderNumberInput()
      );
    };

    var renderLabel = function renderLabel() {
      return _react2.default.createElement(
        'div',
        { className: baseClassName + '__label ' + baseClassName + '__composition__label' },
        (0, _helperFunctions.capitalizeEveryWord)(label)
      );
    };

    return _react2.default.createElement(
      'div',
      { className: baseClassName + '__socket ' + baseClassName + '__composition__socket' },
      label && renderLabel(),
      _react2.default.createElement(
        _SelectMany2.default,
        {
          initialOptions: currentOptions,
          options: optionLabels,
          renderTrigger: renderTrigger,
          onChange: function onChange(value) {
            console.log('onChange', value);
            setFieldValue(type, value.reduce(function (acc, v) {
              if ((0, _keys2.default)(values[type]).length === 0) {
                acc[v.value] = [100, -1];
              } else if (values[type][v.value]) {
                acc[v.value] = values[type][v.value];
              } else {
                acc[v.value] = [0, 1];
              }
              return acc;
            }, {}));
          },
          transitionType: ['dropdown', 'fade'],
          pivotFrom: 'DOWNRIGHT',
          renderCurrentOption: function renderCurrentOption(currentOption) {
            return _react2.default.createElement(
              'div',
              {
                className: (0, _helperFunctions.flippyClass)(isVertical, baseClassName + '__composition', 'vertical', 'horizontal')
              },
              renderCurrentOptionLabel({
                currentOption: currentOption
              }),
              renderCurrentOptionInputs({
                currentOption: currentOption
              })
            );
          }
        },
        function (_ref8) {
          var getChildProps = _ref8.getChildProps,
              getChildrenProps = _ref8.getChildrenProps,
              currentOptions = _ref8.currentOptions;
          return _react2.default.createElement(
            'div',
            (0, _extends6.default)({}, getChildrenProps({
              className: baseClassName + '__composition__options'
            })),
            optionLabels.map(function (optionLabel) {
              return _react2.default.createElement(
                _Button2.default,
                (0, _extends6.default)({
                  colors: 'neutral',
                  isOn: currentOptions.map(function (currentOption) {
                    return currentOption.value;
                  }).includes(optionLabel.value)
                }, getChildProps({
                  option: optionLabel
                }), {
                  key: optionLabel.value
                }),
                optionLabel.label
              );
            })
          );
        }
      )
    );
  };

  var renderSelectManyWithCompositionSocket = function renderSelectManyWithCompositionSocket(_ref9) {
    var type = _ref9.type,
        label = _ref9.label,
        options = _ref9.options,
        currentOptions = _ref9.currentOptions,
        renderTrigger = _ref9.renderTrigger;

    return _react2.default.createElement(
      'div',
      { className: baseClassName + '__socket ' + baseClassName + '__composition__socket' },
      _react2.default.createElement(
        'div',
        { className: baseClassName + '__label ' + baseClassName + '__composition__label' },
        (0, _helperFunctions.capitalizeEveryWord)(label)
      ),
      _react2.default.createElement(
        _SelectMany2.default,
        {
          currentOptions: values[type] ? (0, _keys2.default)(values[type]).map(function (v) {
            return {
              value: v,
              label: options.find(function (o) {
                return o.value === v;
              }) ? options.find(function (o) {
                return o.value === v;
              }).label : 'label not found'
            };
          }) : [],
          options: options,
          renderTrigger: renderTrigger,
          onChange: function onChange(value) {
            setFieldValue(type, value.reduce(function (acc, v) {
              acc[v.value] = 0;
              return acc;
            }, {}));
          },
          transitionType: ['dropdown', 'fade'],
          pivotFrom: 'DOWNRIGHT'
        },
        function (_ref10) {
          var getChildProps = _ref10.getChildProps,
              getChildrenProps = _ref10.getChildrenProps,
              currentOptions = _ref10.currentOptions;
          return _react2.default.createElement(
            'div',
            (0, _extends6.default)({}, getChildrenProps({ style: { width: '25.5rem' } })),
            options.map(function (option) {
              return _react2.default.createElement(
                _Button2.default,
                (0, _extends6.default)({}, getChildProps({
                  option: { value: option.value, label: option.label }
                }), {
                  key: option.value
                }),
                option.label
              );
            })
          );
        }
      ),
      values[type] && (0, _keys2.default)(values[type]).map(function (component) {
        return _react2.default.createElement(
          'div',
          { key: component, className: baseClassName + '__composition' },
          _react2.default.createElement(
            'div',
            { className: baseClassName + '__composition__label' },
            options.find(function (o) {
              return o.value === component;
            }) ? options.find(function (o) {
              return o.value === component;
            }).label : 'label not found'
          ),
          _react2.default.createElement('input', {
            className: baseClassName + '__composition__input',
            id: component,
            type: 'number',
            value: values[type][component],
            onChange: function onChange(v) {
              setFieldValue(type, (0, _extends6.default)({}, values[type], (0, _defineProperty3.default)({}, component, v.target.value)));
            }
          })
        );
      })
    );
  };

  var renderSelectManySocket = function renderSelectManySocket(_ref11) {
    var type = _ref11.type,
        label = _ref11.label,
        options = _ref11.options,
        currentOptions = _ref11.currentOptions,
        renderTrigger = _ref11.renderTrigger;

    return _react2.default.createElement(
      'div',
      { className: baseClassName + '__socket ' + baseClassName + '__select__socket' },
      _react2.default.createElement(
        'div',
        { className: baseClassName + '__label ' + baseClassName + '__select__label' },
        (0, _helperFunctions.capitalizeEveryWord)(label)
      ),
      _react2.default.createElement(
        _SelectMany2.default,
        {
          currentOptions: values[type],
          options: options,
          renderTrigger: renderTrigger,
          onChange: function onChange(value) {
            setFieldValue(type, value);
          },
          transitionType: ['dropdown', 'fade'],
          pivotFrom: 'DOWNRIGHT'
        },
        function (_ref12) {
          var getChildProps = _ref12.getChildProps,
              getChildrenProps = _ref12.getChildrenProps;
          return _react2.default.createElement(
            'div',
            (0, _extends6.default)({}, getChildrenProps({
              className: baseClassName + '__dropdown',
              style: { width: '25.5rem' }
            })),
            options.map(function (option) {
              return _react2.default.createElement(
                _Button2.default,
                (0, _extends6.default)({}, getChildProps({
                  option: { value: option.value, label: option.label }
                }), {
                  key: option.value
                }),
                option.label
              );
            })
          );
        }
      )
    );
  };

  var renderSelectOneSocket = function renderSelectOneSocket(_ref13) {
    var type = _ref13.type,
        label = _ref13.label,
        options = _ref13.options;

    return _react2.default.createElement(
      'div',
      { className: baseClassName + '__socket ' + baseClassName + '__select__socket' },
      _react2.default.createElement(
        'div',
        { className: baseClassName + '__label ' + baseClassName + '__select__label' },
        (0, _helperFunctions.capitalizeEveryWord)(label)
      ),
      _react2.default.createElement(
        _SelectOne2.default,
        {
          renderTrigger: function renderTrigger(_ref14) {
            var isOn = _ref14.isOn,
                currentOption = _ref14.currentOption,
                getTriggerProps = _ref14.getTriggerProps;
            return _react2.default.createElement(
              _Button2.default,
              (0, _extends6.default)({
                type: 'caretdown',
                isOn: isOn
              }, getTriggerProps({
                className: 'selectone__trigger',
                style: { border: '1px solid #ccc' }
              }), {
                colors: _.buttonStyles.monochrome
              }),
              currentOption ? currentOption.label : ''
            );
          },
          options: options,
          currentOption: values[type],
          onChange: function onChange(value) {
            setFieldValue(type, value);
          },
          transitionType: ['dropdown', 'fade'],
          pivotFrom: 'DOWNRIGHT'
        },
        function (_ref15) {
          var getChildProps = _ref15.getChildProps,
              getChildrenProps = _ref15.getChildrenProps,
              currentOption = _ref15.currentOption,
              toggleIsOn = _ref15.toggleIsOn;
          return _react2.default.createElement(
            'div',
            (0, _extends6.default)({}, getChildrenProps({ style: { width: '25.5rem' } })),
            options.map(function (option) {
              return _react2.default.createElement(
                _Button2.default,
                (0, _extends6.default)({}, getChildProps({
                  option: { value: option.value, label: option.label },
                  onClick: toggleIsOn
                }), {
                  isOn: currentOption.value === option.value,
                  key: option.value
                }),
                option.label
              );
            })
          );
        }
      )
    );
  };

  var renderSubmitButton = function renderSubmitButton() {
    var _ref16 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

    var label = _ref16.label,
        props = (0, _objectWithoutProperties3.default)(_ref16, ['label']);
    return _react2.default.createElement(
      _Button2.default,
      (0, _extends6.default)({
        invert: true,
        colors: 'surfing',
        onClick: handleSubmit,
        dataTestId: 'submit',
        disabled: isSubmitting,
        style: { width: '24rem', borderRadius: '.25rem' }
      }, props),
      label
    );
  };

  var renderTextInputSocket = function renderTextInputSocket(_ref17) {
    var type = _ref17.type,
        label = _ref17.label,
        sublabel = _ref17.sublabel,
        _ref17$options = _ref17.options,
        options = _ref17$options === undefined ? { required: true, autoFocus: false, autoComplete: '' } : _ref17$options,
        props = (0, _objectWithoutProperties3.default)(_ref17, ['type', 'label', 'sublabel', 'options']);

    return _react2.default.createElement(
      'div',
      (0, _extends6.default)({ className: baseClassName + '__socket' }, props),
      _react2.default.createElement('input', {
        id: type,
        className: baseClassName + '__socket__input ' + baseClassName + '__socket__input__' + type.toLowerCase(),
        type: 'text',
        required: options.required ? options.required : true,
        autoFocus: options.autoFocus ? options.autoFocus : false,
        value: values[type],
        autoComplete: options.autoComplete ? options.autoComplete : '',
        onChange: handleChange,
        onBlur: function onBlur() {
          return setFieldTouched(type);
        }
      }),
      _react2.default.createElement(
        'div',
        { className: baseClassName + '__label ' + baseClassName + '__socket__label' },
        (0, _helperFunctions.capitalizeEveryWord)(label)
      ),
      _react2.default.createElement('div', { className: baseClassName + '__socket__bar' }),
      sublabel && _react2.default.createElement(
        'div',
        { className: baseClassName + '__socket__sublabel' },
        sublabel
      ),
      renderError(type)
    );
  };

  var renderGroup = function renderGroup(_ref18) {
    var label = _ref18.label,
        renderChildren = _ref18.renderChildren;
    return _react2.default.createElement(
      'div',
      { className: baseClassName + '__group' },
      _react2.default.createElement(
        'div',
        { className: baseClassName + '__label ' + baseClassName + '__group__label' },
        label
      ),
      _react2.default.createElement(
        'div',
        { className: baseClassName + '__children ' + baseClassName + '__group__children' },
        renderChildren()
      )
    );
  };

  var renderCheckboxSocket = function renderCheckboxSocket(_ref19) {
    var label = _ref19.label,
        type = _ref19.type;
    return _react2.default.createElement(
      'div',
      { className: baseClassName + '__checkbox' },
      _react2.default.createElement(
        'div',
        { className: baseClassName + '__label ' + baseClassName + '__checkbox__label' },
        label
      ),
      _react2.default.createElement('input', {
        id: type,
        className: baseClassName + '__checkbox__input',
        type: 'checkbox',
        checked: values[type],
        onChange: handleChange
      })
    );
  };

  return _react2.default.createElement(
    'form',
    {
      onSubmit: handleSubmit,
      className: className ? className : 'form',
      style: style
    },
    children({
      renderTextInputSocket: renderTextInputSocket,
      renderTextareaInputSocket: renderTextareaInputSocket,
      renderSelectManyWithCompositionSocket: renderSelectManyWithCompositionSocket,
      renderSelectManyWithAdvancedCompositionSocket: renderSelectManyWithAdvancedCompositionSocket,
      renderSelectOneSocket: renderSelectOneSocket,
      renderSelectManySocket: renderSelectManySocket,
      renderCheckboxSocket: renderCheckboxSocket,
      renderGroup: renderGroup,
      renderSubmitButton: renderSubmitButton
    }),
    errors.firebase && _react2.default.createElement(
      'div',
      {
        'data-testid': 'registeraccountmodal-formerror-firebase',
        className: 'input-feedback'
      },
      'error!',
      errors.firebase
    ),
    _react2.default.createElement('input', { type: 'submit', style: { visibility: 'hidden', height: 0, width: 0 } })
  );
};

exports.Form = Form;
Form.defaultProps = {
  handleSubmit: function handleSubmit() {
    return console.log('Form: handleSubmit');
  },
  style: {}
};

var enhance = (0, _recompose.compose)();
//onlyUpdateForKeys([`values`, `touched`, `errors`, `children`])

exports.default = enhance(Form);