react-misc-toolbox/dist/Form.js

'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 _extends4 = require('babel-runtime/helpers/extends');

var _extends5 = _interopRequireDefault(_extends4);

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

var _keys2 = _interopRequireDefault(_keys);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Checkbox = require('./Checkbox');

var _Checkbox2 = _interopRequireDefault(_Checkbox);

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('.');

var _StyledForm = require('./StyledForm');

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 _props$className = props.className,
      className = _props$className === undefined ? 'form' : _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;


  var getClassName = function getClassName(primary, secondary) {
    return (0, _helperFunctions.advancedMulti)({
      unflattenedBase: ['form', className],
      suffixes: ['__' + primary, '__' + secondary + '__' + primary]
    });
  };

  var renderError = function renderError(type) {
    return errors && errors[type] && touched && touched[type] && _react2.default.createElement(
      _StyledForm.ERROR,
      {
        className: className ? 'form__error ' + className + '__error' : 'form__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;

    var getLocalClassName = function getLocalClassName(primary) {
      return getClassName(primary, 'textarea');
    };
    var SOCKET = _StyledForm.TEXTAREA.SOCKET,
        LABEL = _StyledForm.TEXTAREA.LABEL,
        INPUT = _StyledForm.TEXTAREA.INPUT;

    var onChange = function onChange(e) {
      return setFieldValue(type, e.target.value);
    };
    return _react2.default.createElement(
      SOCKET,
      {
        className: getLocalClassName('socket')
      },
      _react2.default.createElement(
        _react.Fragment,
        null,
        _react2.default.createElement(
          LABEL,
          {
            className: getLocalClassName('label')
          },
          (0, _helperFunctions.capitalizeEveryWord)(label)
        ),
        _react2.default.createElement(INPUT, {
          className: getLocalClassName('input'),
          'data-testid': type.toLowerCase() + '-input',
          id: type,
          required: required,
          value: values[type],
          onChange: onChange
        }),
        errors[type] && touched[type] && _react2.default.createElement(
          _StyledForm.ERROR,
          null,
          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;
    var OPTIONS = _StyledForm.COMPOSITION.OPTIONS,
        CURRENT_OPTION = _StyledForm.COMPOSITION.CURRENT_OPTION,
        RANGE_INPUT = _StyledForm.COMPOSITION.RANGE_INPUT,
        NUMBER_INPUT = _StyledForm.COMPOSITION.NUMBER_INPUT,
        HEAD = _StyledForm.COMPOSITION.HEAD,
        LABEL = _StyledForm.COMPOSITION.LABEL,
        SOCKET = _StyledForm.COMPOSITION.SOCKET;

    var getLocalClassName = function getLocalClassName(primary) {
      return getClassName(primary, 'composition');
    };
    // 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 id = currentOption.value;
      var value = values[type][id];
      return {
        onClick: function onClick(e) {
          e.stopPropagation();
          e.nativeEvent.stopImmediatePropagation();
        },
        id: id,
        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, _extends5.default)({}, values[type], (0, _defineProperty3.default)({}, id, [integerValue, integerSign])));
        }
      };
    };
    var renderSignDropdown = function renderSignDropdown(_ref4) {
      var option = _ref4.option;

      //signValueLabelMapExists =
      var id = option.value;
      var value = values[type][id];
      return 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, _extends5.default)({ isOn: isOn }, getTriggerProps()),
              currentOption ? currentOption.label : optionLabels[0].label
            );
          },
          currentOption: signValueLabelMaps.find(function (signValueLabelMap) {
            return signValueLabelMap.value === value[1];
          }),
          onChange: function onChange(signValueLabelMap) {
            setFieldValue(type, (0, _extends5.default)({}, values[type], (0, _defineProperty3.default)({}, id, [value[0], signValueLabelMap.value])));
          },
          options: signValueLabelMaps
        },
        signValueLabelMaps
      );
    };

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

      return _react2.default.createElement(
        LABEL,
        {
          isVertical: isVertical,
          className: (0, _helperFunctions.advancedMulti)({
            unflattenedBases: ['form', '' + className],
            suffixes: ['__composition__label'],
            flipVars: [[isVertical, 'vertical', 'horizontal']]
          })
        },
        currentOption.label
      );
    };
    var renderCurrentOptionInputs = function renderCurrentOptionInputs(_ref7) {
      var currentOption = _ref7.currentOption;

      var renderRangeInput = function renderRangeInput() {
        return _react2.default.createElement(RANGE_INPUT, (0, _extends5.default)({}, getSharedInputProps({ currentOption: currentOption }), {
          className: (0, _helperFunctions.advancedMulti)({
            unflattenedBases: ['form', '' + className],
            suffixes: ['__input', '__input__range'],
            flipVars: [[isVertical, 'vertical', 'horizontal']]
          }),
          isVertical: isVertical
        }));
      };
      var renderNumberInput = function renderNumberInput() {
        return _react2.default.createElement(NUMBER_INPUT, (0, _extends5.default)({}, getSharedInputProps({ currentOption: currentOption }), {
          isVertical: isVertical,
          className: className + '__composition__input ' + className + '__composition__input__number'
        }));
      };
      var renderEmptyDiv = function renderEmptyDiv(_ref8) {
        var size = _ref8.size;
        return _react2.default.createElement('div', { style: { height: size, width: size } });
      };
      return _react2.default.createElement(
        _react.Fragment,
        null,
        renderRangeInput(),
        isSigned ? renderSignDropdown({ option: currentOption }) : renderEmptyDiv({ size: '3rem' }),
        renderNumberInput()
      );
    };

    var renderHead = function renderHead() {
      return _react2.default.createElement(
        HEAD,
        { className: className + '__label ' + className + '__composition__label' },
        (0, _helperFunctions.capitalizeEveryWord)(label)
      );
    };
    var handleOnChange = function handleOnChange(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;
      }, {}));
    };
    var handleRenderCurrentOption = function handleRenderCurrentOption(currentOption) {
      return _react2.default.createElement(
        CURRENT_OPTION,
        {
          isVertical: isVertical,
          className: (0, _helperFunctions.flippyClass)(isVertical, className + '__composition__currentoption', 'vertical', 'horizontal')
        },
        renderCurrentOptionLabel({
          currentOption: currentOption
        }),
        renderCurrentOptionInputs({
          currentOption: currentOption
        })
      );
    };
    return _react2.default.createElement(
      SOCKET,
      { className: className + '__socket ' + className + '__composition__socket' },
      label && renderHead(),
      _react2.default.createElement(
        _SelectMany2.default,
        {
          initialOptions: currentOptions,
          options: optionLabels,
          renderTrigger: renderTrigger,
          onChange: handleOnChange,
          transitionType: ['dropdown', 'fade'],
          pivotFrom: 'DOWNRIGHT',
          renderCurrentOption: handleRenderCurrentOption
        },
        function (_ref9) {
          var getChildProps = _ref9.getChildProps,
              getChildrenProps = _ref9.getChildrenProps,
              currentOptions = _ref9.currentOptions;
          return _react2.default.createElement(
            OPTIONS,
            (0, _extends5.default)({}, getChildrenProps({
              className: className + '__composition__options'
            })),
            optionLabels.map(function (optionLabel) {
              return _react2.default.createElement(
                _Button2.default,
                (0, _extends5.default)({
                  colors: 'neutral',
                  isOn: currentOptions.map(function (currentOption) {
                    return currentOption.value;
                  }).includes(optionLabel.value)
                }, getChildProps({
                  option: optionLabel
                }), {
                  key: optionLabel.value
                }),
                optionLabel.label
              );
            })
          );
        }
      )
    );
  };

  var renderSelectManySocket = function renderSelectManySocket(_ref10) {
    var type = _ref10.type,
        label = _ref10.label,
        options = _ref10.options,
        renderTrigger = _ref10.renderTrigger;
    var SOCKET = _StyledForm.SELECTMANY.SOCKET,
        LABEL = _StyledForm.SELECTMANY.LABEL,
        DROPDOWN = _StyledForm.SELECTMANY.DROPDOWN;

    var getLocalClassName = function getLocalClassName(primary) {
      return getClassName(primary, 'selectmany');
    };
    return _react2.default.createElement(
      SOCKET,
      { className: getLocalClassName('socket') },
      _react2.default.createElement(
        LABEL,
        { className: getLocalClassName('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 (_ref11) {
          var getChildProps = _ref11.getChildProps,
              getChildrenProps = _ref11.getChildrenProps;
          return _react2.default.createElement(
            DROPDOWN,
            (0, _extends5.default)({}, getChildrenProps({
              className: className + '__dropdown',
              style: { width: '25.5rem' }
            })),
            options.map(function (option) {
              return _react2.default.createElement(
                _Button2.default,
                (0, _extends5.default)({}, getChildProps({
                  option: { value: option.value, label: option.label }
                }), {
                  key: option.value
                }),
                option.label
              );
            })
          );
        }
      )
    );
  };

  var renderSelectOneSocket = function renderSelectOneSocket(_ref12) {
    var type = _ref12.type,
        label = _ref12.label,
        options = _ref12.options;
    var SOCKET = _StyledForm.SELECTONE.SOCKET,
        LABEL = _StyledForm.SELECTONE.LABEL,
        DROPDOWN = _StyledForm.SELECTONE.DROPDOWN;

    var getLocalClassName = function getLocalClassName(primary) {
      return getClassName(primary, 'selectone');
    };
    return _react2.default.createElement(
      SOCKET,
      { className: getLocalClassName('socket') },
      _react2.default.createElement(
        LABEL,
        { className: getLocalClassName('label') },
        (0, _helperFunctions.capitalizeEveryWord)(label)
      ),
      _react2.default.createElement(
        _SelectOne2.default,
        {
          renderTrigger: function renderTrigger(_ref13) {
            var isOn = _ref13.isOn,
                currentOption = _ref13.currentOption,
                getTriggerProps = _ref13.getTriggerProps;
            return _react2.default.createElement(
              _Button2.default,
              (0, _extends5.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 (_ref14) {
          var getChildProps = _ref14.getChildProps,
              getChildrenProps = _ref14.getChildrenProps,
              currentOption = _ref14.currentOption,
              toggleIsOn = _ref14.toggleIsOn;
          return _react2.default.createElement(
            DROPDOWN,
            (0, _extends5.default)({}, getChildrenProps({ style: { width: '25.5rem' } })),
            options.map(function (option) {
              return _react2.default.createElement(
                _Button2.default,
                (0, _extends5.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 _ref15 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

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

  var renderTextInputSocket = function renderTextInputSocket(_ref16) {
    var type = _ref16.type,
        label = _ref16.label,
        sublabel = _ref16.sublabel,
        _ref16$options = _ref16.options,
        options = _ref16$options === undefined ? { required: true, autoFocus: false, autoComplete: '' } : _ref16$options,
        props = (0, _objectWithoutProperties3.default)(_ref16, ['type', 'label', 'sublabel', 'options']);
    var SOCKET = _StyledForm.TEXTINPUT.SOCKET,
        INPUT = _StyledForm.TEXTINPUT.INPUT,
        LABEL = _StyledForm.TEXTINPUT.LABEL,
        SUBLABEL = _StyledForm.TEXTINPUT.SUBLABEL,
        BAR = _StyledForm.TEXTINPUT.BAR;

    var getLocalClassName = function getLocalClassName(primary) {
      return getClassName(primary, 'textinput');
    };
    return _react2.default.createElement(
      SOCKET,
      (0, _extends5.default)({ className: getLocalClassName('socket') }, props),
      _react2.default.createElement(INPUT, {
        id: type,
        className: className + '__socket__input ' + className + '__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(
        LABEL,
        { className: getLocalClassName('label') },
        (0, _helperFunctions.capitalizeEveryWord)(label)
      ),
      _react2.default.createElement(BAR, { className: getLocalClassName('bar') }),
      sublabel && _react2.default.createElement(
        SUBLABEL,
        { className: getLocalClassName('sublabel') },
        sublabel
      ),
      renderError(type)
    );
  };

  var renderGroup = function renderGroup(_ref17) {
    var label = _ref17.label,
        renderChildren = _ref17.renderChildren;
    var SOCKET = _StyledForm.GROUP.SOCKET,
        LABEL = _StyledForm.GROUP.LABEL,
        CHILDREN = _StyledForm.GROUP.CHILDREN;

    var getLocalClassName = function getLocalClassName(primary) {
      return getClassName(primary, 'group');
    };
    return _react2.default.createElement(
      SOCKET,
      { className: getLocalClassName('socket') },
      _react2.default.createElement(
        LABEL,
        { className: getLocalClassName('label') },
        label
      ),
      _react2.default.createElement(
        CHILDREN,
        { className: getLocalClassName('children') },
        renderChildren()
      )
    );
  };

  var renderCheckboxSocket = function renderCheckboxSocket(_ref18) {
    var label = _ref18.label,
        type = _ref18.type;
    var SOCKET = _StyledForm.CHECKBOX.SOCKET,
        LABEL = _StyledForm.CHECKBOX.LABEL,
        INPUT = _StyledForm.CHECKBOX.INPUT;

    var getLocalClassName = function getLocalClassName(primary) {
      return getClassName(primary, 'checkbox');
    };
    return _react2.default.createElement(
      SOCKET,
      { className: getLocalClassName('socket') },
      _react2.default.createElement(
        LABEL,
        { className: getLocalClassName('label') },
        label
      ),
      _react2.default.createElement(INPUT, {
        className: getLocalClassName('input'),
        id: type,
        checked: values[type],
        onChange: handleChange
      })
    );
  };

  return _react2.default.createElement(
    _StyledForm.CONTAINER,
    {
      onSubmit: handleSubmit,
      className: className ? className : 'form',
      style: style
    },
    children({
      renderTextInputSocket: renderTextInputSocket,
      renderTextareaInputSocket: renderTextareaInputSocket,
      renderSelectManyWithAdvancedCompositionSocket: renderSelectManyWithAdvancedCompositionSocket,
      renderSelectOneSocket: renderSelectOneSocket,
      renderSelectManySocket: renderSelectManySocket,
      renderCheckboxSocket: renderCheckboxSocket,
      renderGroup: renderGroup,
      renderSubmitButton: renderSubmitButton
    }),
    _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);