gutenblock-controls/dist/repeat/index.js

Useful inspector controls for gutenberg

'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _item = require('./item');

var _item2 = _interopRequireDefault(_item);

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

(function () {
  var enterModule = require('react-hot-loader').enterModule;

  enterModule && enterModule(module);
})();

function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Button = wp.components.Button;


var getItems = function getItems(_ref) {
  var attributes = _ref.attributes,
      attribute = _ref.attribute;
  return attributes && attributes[attribute] ? attributes[attribute] : [];
};

var Repeat = function (_React$Component) {
  _inherits(Repeat, _React$Component);

  function Repeat() {
    _classCallCheck(this, Repeat);

    var _this = _possibleConstructorReturn(this, (Repeat.__proto__ || Object.getPrototypeOf(Repeat)).call(this));

    _this.add = _this.add.bind(_this);
    _this.update = _this.update.bind(_this);
    _this.delete = _this.delete.bind(_this);
    return _this;
  }

  _createClass(Repeat, [{
    key: 'add',
    value: function add() {
      var _props = this.props,
          attribute = _props.attribute,
          onChange = _props.onChange;


      onChange(attribute, [].concat(_toConsumableArray(getItems(this.props)), [{}]));
    }
  }, {
    key: 'update',
    value: function update(name, value, tabId, onChange) {
      var attribute = this.props.attribute;


      var currentAttributes = getItems(this.props);

      var foundAttribute = currentAttributes.find(function (attr, index) {
        return index === tabId;
      });

      var newAttributes = void 0;
      if (!foundAttribute) newAttributes = [].concat(_toConsumableArray(currentAttributes), [_defineProperty({}, name, value)]);else newAttributes = currentAttributes.map(function (attr, index) {
        return index === tabId ? Object.assign({}, attr, _defineProperty({}, name, value)) : attr;
      });

      return onChange(attribute, newAttributes);
    }
  }, {
    key: 'delete',
    value: function _delete(tabId, onChange) {
      var _props2 = this.props,
          attribute = _props2.attribute,
          attributes = _props2.attributes;


      var newAttributes = attributes[attribute].filter(function (attr, index) {
        return index !== tabId;
      });

      return onChange(attribute, newAttributes);
    }
  }, {
    key: 'renderChildren',
    value: function renderChildren(index) {
      var _this2 = this;

      var _props3 = this.props,
          attribute = _props3.attribute,
          children = _props3.children,
          setAttributes = _props3.setAttributes,
          attributes = _props3.attributes,
          _onChange = _props3.onChange,
          deleteButton = _props3.deleteButton,
          collapsable = _props3.collapsable,
          title = _props3.title;


      var component = function component(child) {
        return _react2.default.cloneElement(child, {
          key: index,
          index: index,
          setAttributes: setAttributes,
          attributes: attributes && attributes[attribute] && attributes[attribute][index] ? attributes[attribute][index] : {},
          onChange: function onChange(name, value) {
            return _this2.update(name, value, index, _onChange);
          }
        });
      };

      var _children = _toArray(children),
          first = _children[0],
          restOfChildren = _children.slice(1);

      return wp.element.createElement(
        _item2.default,
        {
          title: title,
          collapsable: collapsable,
          first: collapsable ? component(first) : null,
          deleteButton: deleteButton ? deleteButton(function () {
            return _this2.delete(index, _onChange);
          }) : wp.element.createElement(
            'div',
            { onClick: function onClick() {
                return _this2.delete(index, _onChange);
              } },
            'Delete item'
          )
        },
        wp.element.createElement(
          'div',
          {
            style: {
              marginLeft: '10px',
              marginTop: '15px'
            }
          },
          _react2.default.Children.map(collapsable ? restOfChildren : children, function (child) {
            return component(child);
          })
        )
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var _props4 = this.props,
          style = _props4.style,
          title = _props4.title,
          addNew = _props4.addNew,
          max = _props4.max,
          createButton = _props4.createButton,
          collapsable = _props4.collapsable;


      var items = getItems(this.props).length;

      var repeats = [];

      for (var item = 0; item < items; item++) {
        repeats.push(this.renderChildren(item));
      }

      return wp.element.createElement(
        'div',
        { style: style },
        collapsable ? null : wp.element.createElement(
          'h1',
          null,
          title
        ),
        wp.element.createElement(
          'div',
          null,
          repeats,
          wp.element.createElement(
            'div',
            { style: { marginTop: '10px' } },
            max > items || !max ? createButton ? createButton(function () {
              return _this3.add();
            }) : wp.element.createElement(
              Button,
              { isPrimary: true, onClick: function onClick() {
                  return _this3.add();
                } },
              addNew
            ) : null
          )
        )
      );
    }
  }, {
    key: '__reactstandin__regenerateByEval',
    value: function __reactstandin__regenerateByEval(key, code) {
      this[key] = eval(code);
    }
  }]);

  return Repeat;
}(_react2.default.Component);

var _default = Repeat;
exports.default = _default;
;

(function () {
  var reactHotLoader = require('react-hot-loader').default;

  var leaveModule = require('react-hot-loader').leaveModule;

  if (!reactHotLoader) {
    return;
  }

  reactHotLoader.register(Button, 'Button', 'src/repeat/index.js');
  reactHotLoader.register(getItems, 'getItems', 'src/repeat/index.js');
  reactHotLoader.register(Repeat, 'Repeat', 'src/repeat/index.js');
  reactHotLoader.register(_default, 'default', 'src/repeat/index.js');
  leaveModule(module);
})();

;