@moxon6/form-components/lib/DynamicList.js

This is small collection of Material-ui fields components,

"use strict";

exports.__esModule = true;

var _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; };

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _recompose = require("recompose");

var _Header = require("./Header");

var _Header2 = _interopRequireDefault(_Header);

var _Divider = require("./Divider");

var _Divider2 = _interopRequireDefault(_Divider);

var _TextInput = require("./TextInput");

var _TextInput2 = _interopRequireDefault(_TextInput);

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

var _utils = require("./utils");

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var handleNameChange = function handleNameChange(value) {
  return function (e) {
    return _extends({}, value, { name: e.target.value });
  };
};
var handlePriceChange = function handlePriceChange(value) {
  return function (e) {
    return _extends({}, value, { price: e.target.value });
  };
};

var DynamicListEntry = function DynamicListEntry(_ref) {
  var value = _ref.value,
      index = _ref.index,
      onChange = _ref.onChange,
      name = _ref.name;
  return _react2.default.createElement(
    "span",
    null,
    _react2.default.createElement(
      _Header2.default,
      null,
      " Drinks Choice ",
      index + 1,
      " "
    ),
    _react2.default.createElement(_TextInput2.default, { name: name + 'name', value: value ? value.name : "", onChange: (0, _recompose.compose)(onChange, handleNameChange(value)), title: "Name" }),
    _react2.default.createElement(_Divider2.default, { line: true }),
    _react2.default.createElement(_TextInput2.default, { name: name + 'price', value: value ? value.price : "", onChange: (0, _recompose.compose)(onChange, handlePriceChange(value)), title: "Price" }),
    _react2.default.createElement(_Divider2.default, { line: true })
  );
};

var DynamicList = function DynamicList(_ref2) {
  var name = _ref2.name,
      value = _ref2.value,
      key = _ref2.key,
      onChange = _ref2.onChange,
      title = _ref2.title,
      restProps = _objectWithoutProperties(_ref2, ["name", "value", "key", "onChange", "title"]),
      error = _ref2.error;

  var handleChange = (0, _recompose.compose)(onChange, _utils.fakeEvent);
  var update = (0, _utils.replaceEntry)(value);
  var dynamicListEntries = value.map(function (entry, i) {
    return _react2.default.createElement(DynamicListEntry, {
      index: i,
      name: name + 'i',
      value: entry,
      onChange: (0, _recompose.compose)(handleChange, update(i)),
      key: "dynamicEntry_" + i
    });
  });
  return _react2.default.createElement(
    "div",
    null,
    _react2.default.createElement(_Button.Add, { key: "remove-choice", onClick: function onClick(e) {
        return handleChange((0, _utils.addEntry)(value));
      } }),
    _react2.default.createElement(_Button.Del, { key: "add-choice", onClick: function onClick(e) {
        return handleChange((0, _utils.removeEntry)(value));
      } }),
    dynamicListEntries,
    _react2.default.createElement(
      "pre",
      null,
      JSON.stringify(error)
    )
  );
};

exports.default = DynamicList;
module.exports = exports["default"];