"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _base = _interopRequireDefault(require("@emotion/styled/base"));
var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
var _partial2 = _interopRequireDefault(require("lodash/partial"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
var _react2 = require("@emotion/react");
var _immutable = require("immutable");
var _uuid = require("uuid");
var _decapCmsWidgetObject = _interopRequireDefault(require("decap-cms-widget-object"));
var _core = require("@dnd-kit/core");
var _sortable = require("@dnd-kit/sortable");
var _modifiers = require("@dnd-kit/modifiers");
var _utilities = require("@dnd-kit/utilities");
var _decapCmsUiDefault = require("decap-cms-ui-default");
var _decapCmsLibWidgets = require("decap-cms-lib-widgets");
var _typedListHelpers = require("./typedListHelpers");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
const ObjectControl = _decapCmsWidgetObject.default.controlComponent;
const ListItem = /*#__PURE__*/(0, _base.default)("div", {
  target: "e11zrb3c2",
  label: "ListItem"
})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 31388 characters] */");
const StyledListItemTopBar = /*#__PURE__*/(0, _base.default)(_decapCmsUiDefault.ListItemTopBar, {
  target: "e11zrb3c1",
  label: "StyledListItemTopBar"
})("background-color:", _decapCmsUiDefault.colors.textFieldBorder, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 31388 characters] */"));
const NestedObjectLabel = /*#__PURE__*/(0, _base.default)("div", {
  target: "e11zrb3c0",
  label: "NestedObjectLabel"
})("display:", props => props.collapsed ? 'block' : 'none', ";border-top:0;color:", props => props.error ? _decapCmsUiDefault.colors.errorText : 'inherit', ";background-color:", _decapCmsUiDefault.colors.textFieldBorder, ";padding:13px;border-radius:0 0 ", _decapCmsUiDefault.lengths.borderRadius, " ", _decapCmsUiDefault.lengths.borderRadius, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 31388 characters] */"));
const styleStrings = {
  collapsedObjectControl: `
    display: none;
  `,
  objectWidgetTopBarContainer: `
    padding: ${_decapCmsUiDefault.lengths.objectWidgetTopBarContainerPadding};
  `
};
const styles = {
  listControlItem: process.env.NODE_ENV === "production" ? {
    name: "1pb8r5b-listControlItem",
    styles: "margin-top:18px;&:first-of-type{margin-top:26px;};label:listControlItem;"
  } : {
    name: "1pb8r5b-listControlItem",
    styles: "margin-top:18px;&:first-of-type{margin-top:26px;};label:listControlItem;",
    map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 31388 characters] */",
    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
  },
  listControlItemCollapsed: process.env.NODE_ENV === "production" ? {
    name: "1gjco9g-listControlItemCollapsed",
    styles: "padding-bottom:0;label:listControlItemCollapsed;"
  } : {
    name: "1gjco9g-listControlItemCollapsed",
    styles: "padding-bottom:0;label:listControlItemCollapsed;",
    map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 31388 characters] */",
    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
  }
};
function SortableList({
  items,
  children,
  onSortEnd,
  keys
}) {
  const activationConstraint = {
    distance: 4
  };
  const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor, {
    activationConstraint
  }), (0, _core.useSensor)(_core.TouchSensor, {
    activationConstraint
  }));
  function handleSortEnd({
    active,
    over
  }) {
    onSortEnd({
      oldIndex: keys.indexOf(active.id),
      newIndex: keys.indexOf(over.id)
    });
  }
  return (0, _react2.jsx)("div", null, (0, _react2.jsx)(_core.DndContext, {
    modifiers: [_modifiers.restrictToParentElement],
    collisionDetection: _core.closestCenter,
    sensors: sensors,
    onDragEnd: handleSortEnd
  }, (0, _react2.jsx)(_sortable.SortableContext, {
    items: items
  }, children)));
}
function SortableListItem(props) {
  const {
    setNodeRef,
    transform,
    transition
  } = (0, _sortable.useSortable)({
    id: props.id
  });
  const style = {
    transform: _utilities.CSS.Transform.toString(transform),
    transition
  };
  const {
    collapsed
  } = props;
  return (0, _react2.jsx)(ListItem, {
    sortable: true,
    ref: setNodeRef,
    style: style,
    css: [styles.listControlItem, collapsed && styles.listControlItemCollapsed, ";label:SortableListItem;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 31388 characters] */")]
  }, props.children);
}
function DragHandle({
  children,
  id
}) {
  const {
    attributes,
    listeners
  } = (0, _sortable.useSortable)({
    id
  });
  return (0, _react2.jsx)("div", _extends({}, attributes, listeners), children);
}
const valueTypes = {
  SINGLE: 'SINGLE',
  MULTIPLE: 'MULTIPLE',
  MIXED: 'MIXED'
};
function handleSummary(summary, entry, label, item) {
  const data = _decapCmsLibWidgets.stringTemplate.addFileTemplateFields(entry.get('path'), item.set('fields.label', label));
  return _decapCmsLibWidgets.stringTemplate.compileStringTemplate(summary, null, '', data);
}
function validateItem(field, item) {
  if (!_immutable.Map.isMap(item)) {
    console.warn(`'${field.get('name')}' field item value value should be a map but is a '${typeof item}'`);
    return false;
  }
  return true;
}
function LabelComponent({
  field,
  isActive,
  hasErrors,
  uniqueFieldId,
  isFieldOptional,
  t
}) {
  const label = `${field.get('label', field.get('name'))}`;
  return (0, _react2.jsx)(_decapCmsUiDefault.FieldLabel, {
    isActive: isActive,
    hasErrors: hasErrors,
    htmlFor: uniqueFieldId
  }, label, " ", `${isFieldOptional ? ` (${t('editor.editorControl.field.optional')})` : ''}`);
}
class ListControl extends _react.default.Component {
  constructor(props) {
    super(props);
    _defineProperty(this, "validations", []);
    _defineProperty(this, "valueToString", value => {
      let stringValue;
      if (_immutable.List.isList(value) || Array.isArray(value)) {
        stringValue = value.join(',');
      } else {
        console.warn(`Expected List value to be an array but received '${value}' with type of '${typeof value}'. Please check the value provided to the '${this.props.field.get('name')}' field`);
        stringValue = String(value);
      }
      return stringValue.replace(/,([^\s]|$)/g, ', $1');
    });
    _defineProperty(this, "getValueType", () => {
      const {
        field
      } = this.props;
      if (field.get('fields')) {
        return valueTypes.MULTIPLE;
      } else if (field.get('field')) {
        return valueTypes.SINGLE;
      } else if (field.get(_typedListHelpers.TYPES_KEY)) {
        return valueTypes.MIXED;
      } else {
        return null;
      }
    });
    _defineProperty(this, "uniqueFieldId", (0, _uniqueId2.default)(`${this.props.field.get('name')}-field-`));
    _defineProperty(this, "handleChange", e => {
      const {
        onChange
      } = this.props;
      const oldValue = this.state.value;
      const newValue = e.target.value.trim();
      const listValue = newValue ? newValue.split(',') : [];
      if (newValue.match(/,$/) && oldValue.match(/, $/)) {
        listValue.pop();
      }
      const parsedValue = this.valueToString(listValue);
      this.setState({
        value: parsedValue
      });
      onChange((0, _immutable.List)(listValue.map(val => val.trim())));
    });
    _defineProperty(this, "handleFocus", () => {
      this.props.setActiveStyle();
    });
    _defineProperty(this, "handleBlur", e => {
      const listValue = e.target.value.split(',').map(el => el.trim()).filter(el => el);
      this.setState({
        value: this.valueToString(listValue)
      });
      this.props.setInactiveStyle();
    });
    _defineProperty(this, "handleAdd", e => {
      e.preventDefault();
      const {
        field
      } = this.props;
      const parsedValue = this.getValueType() === valueTypes.SINGLE ? this.singleDefault() : (0, _immutable.fromJS)(this.multipleDefault(field.get('fields')));
      this.addItem(parsedValue);
    });
    _defineProperty(this, "singleDefault", () => {
      return this.props.field.getIn(['field', 'default'], null);
    });
    _defineProperty(this, "multipleDefault", fields => {
      return this.getFieldsDefault(fields);
    });
    _defineProperty(this, "handleAddType", (type, typeKey) => {
      const parsedValue = (0, _immutable.fromJS)(this.mixedDefault(typeKey, type));
      this.addItem(parsedValue);
    });
    _defineProperty(this, "mixedDefault", (typeKey, type) => {
      const selectedType = this.props.field.get(_typedListHelpers.TYPES_KEY).find(f => f.get('name') === type);
      const fields = selectedType.get('fields') || [selectedType.get('field')];
      return this.getFieldsDefault(fields, {
        [typeKey]: type
      });
    });
    _defineProperty(this, "getFieldsDefault", (fields, initialValue = {}) => {
      return fields.reduce((acc, item) => {
        const subfields = item.get('field') || item.get('fields');
        const object = item.get('widget') == 'object';
        const name = item.get('name');
        const defaultValue = item.get('default', null);
        if (_immutable.List.isList(subfields) && object) {
          const subDefaultValue = this.getFieldsDefault(subfields);
          !(0, _isEmpty2.default)(subDefaultValue) && (acc[name] = subDefaultValue);
          return acc;
        }
        if (_immutable.Map.isMap(subfields) && object) {
          const subDefaultValue = this.getFieldsDefault([subfields]);
          !(0, _isEmpty2.default)(subDefaultValue) && (acc[name] = subDefaultValue);
          return acc;
        }
        if (defaultValue !== null) {
          acc[name] = defaultValue;
        }
        return acc;
      }, initialValue);
    });
    _defineProperty(this, "addItem", parsedValue => {
      const {
        value,
        onChange,
        field
      } = this.props;
      const addToTop = field.get('add_to_top', false);
      const itemKey = (0, _uuid.v4)();
      this.setState({
        itemsCollapsed: addToTop ? [false, ...this.state.itemsCollapsed] : [...this.state.itemsCollapsed, false],
        keys: addToTop ? [itemKey, ...this.state.keys] : [...this.state.keys, itemKey]
      });
      const listValue = value || (0, _immutable.List)();
      if (addToTop) {
        onChange(listValue.unshift(parsedValue));
      } else {
        onChange(listValue.push(parsedValue));
      }
    });
    _defineProperty(this, "processControlRef", ref => {
      if (!ref) return;
      const {
        validate,
        props: {
          validationKey: key
        }
      } = ref;
      this.validations.push({
        key,
        validate
      });
    });
    _defineProperty(this, "validate", () => {
      if (this.getValueType()) {
        this.validations.forEach(item => {
          item.validate();
        });
      } else {
        this.props.validate();
      }
      this.props.onValidateObject(this.props.forID, this.validateSize());
    });
    _defineProperty(this, "validateSize", () => {
      const {
        field,
        value,
        t
      } = this.props;
      const min = field.get('min');
      const max = field.get('max');
      const required = field.get('required', true);
      if (!required && !(value !== null && value !== void 0 && value.size)) {
        return [];
      }
      const error = _decapCmsLibWidgets.validations.validateMinMax(t, field.get('label', field.get('name')), value, min, max);
      return error ? [error] : [];
    });
    /**
     * In case the `onChangeObject` function is frozen by a child widget implementation,
     * e.g. when debounced, always get the latest object value instead of using
     * `this.props.value` directly.
     */
    _defineProperty(this, "getObjectValue", idx => this.props.value.get(idx) || (0, _immutable.Map)());
    _defineProperty(this, "handleRemove", (index, event) => {
      event.preventDefault();
      const {
        itemsCollapsed
      } = this.state;
      const {
        value,
        metadata,
        onChange,
        field,
        clearFieldErrors
      } = this.props;
      const collectionName = field.get('name');
      const isSingleField = this.getValueType() === valueTypes.SINGLE;
      const metadataRemovePath = isSingleField ? value.get(index) : value.get(index).valueSeq();
      const parsedMetadata = metadata && !metadata.isEmpty() ? {
        [collectionName]: metadata.removeIn(metadataRemovePath)
      } : metadata;
      itemsCollapsed.splice(index, 1);
      // clear validations
      this.validations = [];
      this.setState({
        itemsCollapsed: [...itemsCollapsed],
        keys: Array.from({
          length: value.size - 1
        }, () => (0, _uuid.v4)())
      });
      onChange(value.remove(index), parsedMetadata);
      clearFieldErrors();
    });
    _defineProperty(this, "handleItemCollapseToggle", (index, event) => {
      event.preventDefault();
      const {
        itemsCollapsed
      } = this.state;
      const newItemsCollapsed = itemsCollapsed.map((collapsed, itemIndex) => {
        if (index === itemIndex) {
          return !collapsed;
        }
        return collapsed;
      });
      this.setState({
        itemsCollapsed: newItemsCollapsed
      });
    });
    _defineProperty(this, "handleCollapseAllToggle", e => {
      e.preventDefault();
      const {
        value,
        field
      } = this.props;
      const {
        itemsCollapsed,
        listCollapsed
      } = this.state;
      const minimizeCollapsedItems = field.get('minimize_collapsed', false);
      const listCollapsedByDefault = field.get('collapsed', true);
      const allItemsCollapsed = itemsCollapsed.every(val => val === true);
      if (minimizeCollapsedItems) {
        let updatedItemsCollapsed = itemsCollapsed;
        // Only allow collapsing all items in this mode but not opening all at once
        if (!listCollapsed || !listCollapsedByDefault) {
          updatedItemsCollapsed = Array(value.size).fill(!listCollapsed);
        }
        this.setState({
          listCollapsed: !listCollapsed,
          itemsCollapsed: updatedItemsCollapsed
        });
      } else {
        this.setState({
          itemsCollapsed: Array(value.size).fill(!allItemsCollapsed)
        });
      }
    });
    _defineProperty(this, "onSortEnd", ({
      oldIndex,
      newIndex
    }) => {
      const {
        value,
        clearFieldErrors
      } = this.props;
      const {
        itemsCollapsed,
        keys
      } = this.state;

      // Update value
      const item = value.get(oldIndex);
      const newValue = value.delete(oldIndex).insert(newIndex, item);
      this.props.onChange(newValue);

      // Update collapsing
      const collapsed = itemsCollapsed[oldIndex];
      itemsCollapsed.splice(oldIndex, 1);
      const updatedItemsCollapsed = [...itemsCollapsed];
      updatedItemsCollapsed.splice(newIndex, 0, collapsed);

      // Reset item to ensure updated state
      const updatedKeys = keys.map((key, keyIndex) => {
        if (keyIndex === oldIndex || keyIndex === newIndex) {
          return (0, _uuid.v4)();
        }
        return key;
      });
      this.setState({
        itemsCollapsed: updatedItemsCollapsed,
        keys: updatedKeys
      });

      //clear error fields and remove old validations
      clearFieldErrors();
      this.validations = this.validations.filter(item => updatedKeys.includes(item.key));
    });
    _defineProperty(this, "hasError", index => {
      const {
        fieldsErrors
      } = this.props;
      if (fieldsErrors && fieldsErrors.size > 0) {
        return Object.values(fieldsErrors.toJS()).some(arr => arr.some(err => err.parentIds && err.parentIds.includes(this.state.keys[index])));
      }
    });
    // eslint-disable-next-line react/display-name
    _defineProperty(this, "renderItem", (item, index) => {
      const {
        classNameWrapper,
        editorControl,
        onValidateObject,
        metadata,
        clearFieldErrors,
        fieldsErrors,
        controlRef,
        resolveWidget,
        parentIds,
        forID,
        t
      } = this.props;
      const {
        itemsCollapsed,
        keys
      } = this.state;
      const collapsed = itemsCollapsed[index];
      const key = keys[index];
      let field = this.props.field;
      const hasError = this.hasError(index);
      const isVariableTypesList = this.getValueType() === valueTypes.MIXED;
      if (isVariableTypesList) {
        field = (0, _typedListHelpers.getTypedFieldForValue)(field, item);
        if (!field) {
          return this.renderErroneousTypedItem(index, item);
        }
      }
      return (0, _react2.jsx)(SortableListItem, {
        css: [styles.listControlItem, collapsed && styles.listControlItemCollapsed, ";label:ListControl;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 31388 characters] */")],
        index: index,
        key: key,
        id: key,
        keys: keys
      }, isVariableTypesList && (0, _react2.jsx)(LabelComponent, {
        field: field,
        isActive: false,
        hasErrors: hasError,
        uniqueFieldId: this.uniqueFieldId,
        isFieldOptional: field.get('required') === false,
        t: t
      }), (0, _react2.jsx)(StyledListItemTopBar, {
        collapsed: collapsed,
        onCollapseToggle: (0, _partial2.default)(this.handleItemCollapseToggle, index),
        dragHandle: DragHandle,
        id: key,
        onRemove: (0, _partial2.default)(this.handleRemove, index),
        "data-testid": `styled-list-item-top-bar-${key}`
      }), (0, _react2.jsx)(NestedObjectLabel, {
        collapsed: collapsed,
        error: hasError
      }, this.objectLabel(item)), (0, _react2.jsx)(_react2.ClassNames, null, ({
        css,
        cx
      }) => (0, _react2.jsx)(ObjectControl, {
        classNameWrapper: cx(classNameWrapper, {
          [css`
                  ${styleStrings.collapsedObjectControl};
                `]: collapsed
        }),
        value: item,
        field: field,
        onChangeObject: this.handleChangeFor(index),
        editorControl: editorControl,
        resolveWidget: resolveWidget,
        metadata: metadata,
        forList: true,
        onValidateObject: onValidateObject,
        clearFieldErrors: clearFieldErrors,
        fieldsErrors: fieldsErrors,
        ref: this.processControlRef,
        controlRef: controlRef,
        validationKey: key,
        collapsed: collapsed,
        "data-testid": `object-control-${key}`,
        hasError: hasError,
        parentIds: [...parentIds, forID, key]
      })));
    });
    const {
      field: _field,
      value: _value
    } = props;
    const _listCollapsed = _field.get('collapsed', true);
    const _itemsCollapsed = _value && Array(_value.size).fill(_listCollapsed) || [];
    const _keys = _value && Array.from({
      length: _value.size
    }, () => (0, _uuid.v4)()) || [];
    this.state = {
      listCollapsed: _listCollapsed,
      itemsCollapsed: _itemsCollapsed,
      value: this.valueToString(_value),
      keys: _keys
    };
  }
  /**
   * Always update so that each nested widget has the option to update. This is
   * required because ControlHOC provides a default `shouldComponentUpdate`
   * which only updates if the value changes, but every widget must be allowed
   * to override this.
   */
  shouldComponentUpdate() {
    return true;
  }
  handleChangeFor(index) {
    return (f, newValue, newMetadata) => {
      const {
        value,
        metadata,
        onChange,
        field
      } = this.props;
      const collectionName = field.get('name');
      const listFieldObjectWidget = field.getIn(['field', 'widget']) === 'object';
      const withNameKey = this.getValueType() !== valueTypes.SINGLE || this.getValueType() === valueTypes.SINGLE && listFieldObjectWidget;
      const newObjectValue = withNameKey ? this.getObjectValue(index).set(f.get('name'), newValue) : newValue;
      const parsedMetadata = {
        [collectionName]: Object.assign(metadata ? metadata.toJS() : {}, newMetadata || {})
      };
      onChange(value.set(index, newObjectValue), parsedMetadata);
    };
  }
  objectLabel(item) {
    const {
      field,
      entry
    } = this.props;
    const valueType = this.getValueType();
    switch (valueType) {
      case valueTypes.MIXED:
        {
          if (!validateItem(field, item)) {
            return;
          }
          const itemType = (0, _typedListHelpers.getTypedFieldForValue)(field, item);
          const label = itemType.get('label', itemType.get('name'));
          // each type can have its own summary, but default to the list summary if exists
          const summary = itemType.get('summary', field.get('summary'));
          const labelReturn = summary ? handleSummary(summary, entry, label, item) : label;
          return labelReturn;
        }
      case valueTypes.SINGLE:
        {
          const singleField = field.get('field');
          const label = singleField.get('label', singleField.get('name'));
          const summary = field.get('summary');
          const data = (0, _immutable.fromJS)({
            [singleField.get('name')]: item
          });
          const labelReturn = summary ? handleSummary(summary, entry, label, data) : label;
          return labelReturn;
        }
      case valueTypes.MULTIPLE:
        {
          if (!validateItem(field, item)) {
            return;
          }
          const multiFields = field.get('fields');
          const labelField = multiFields && multiFields.first();
          const value = item.get(labelField.get('name'));
          const summary = field.get('summary');
          const labelReturn = summary ? handleSummary(summary, entry, value, item) : value;
          return (labelReturn || `No ${labelField.get('name')}`).toString();
        }
    }
    return '';
  }
  renderErroneousTypedItem(index, item) {
    const field = this.props.field;
    const errorMessage = (0, _typedListHelpers.getErrorMessageForTypedFieldAndValue)(field, item);
    const key = `item-${index}`;
    return (0, _react2.jsx)(SortableListItem, {
      css: [styles.listControlItem, styles.listControlItemCollapsed, ";label:ListControl;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 31388 characters] */")],
      index: index,
      key: key
    }, (0, _react2.jsx)(StyledListItemTopBar, {
      onCollapseToggle: null,
      onRemove: (0, _partial2.default)(this.handleRemove, index, key),
      dragHandle: DragHandle,
      id: key
    }), (0, _react2.jsx)(NestedObjectLabel, {
      collapsed: true,
      error: true
    }, errorMessage));
  }
  renderListControl() {
    const {
      value,
      forID,
      field,
      classNameWrapper,
      t
    } = this.props;
    const {
      itemsCollapsed,
      listCollapsed,
      keys
    } = this.state;
    const items = value || (0, _immutable.List)();
    const label = field.get('label', field.get('name'));
    const labelSingular = field.get('label_singular') || field.get('label', field.get('name'));
    const listLabel = items.size === 1 ? labelSingular.toLowerCase() : label.toLowerCase();
    const minimizeCollapsedItems = field.get('minimize_collapsed', false);
    const allItemsCollapsed = itemsCollapsed.every(val => val === true);
    const selfCollapsed = allItemsCollapsed && (listCollapsed || !minimizeCollapsedItems);
    const itemsArray = keys.map(key => ({
      id: key
    }));
    return (0, _react2.jsx)(_react2.ClassNames, null, ({
      cx,
      css
    }) => (0, _react2.jsx)("div", {
      id: forID,
      className: cx(classNameWrapper, css`
                ${styleStrings.objectWidgetTopBarContainer}
              `)
    }, (0, _react2.jsx)(_decapCmsUiDefault.ObjectWidgetTopBar, {
      allowAdd: field.get('allow_add', true),
      onAdd: this.handleAdd,
      types: field.get(_typedListHelpers.TYPES_KEY, null),
      onAddType: type => this.handleAddType(type, (0, _typedListHelpers.resolveFieldKeyType)(field)),
      heading: `${items.size} ${listLabel}`,
      label: labelSingular.toLowerCase(),
      onCollapseToggle: this.handleCollapseAllToggle,
      collapsed: selfCollapsed,
      t: t
    }), (!selfCollapsed || !minimizeCollapsedItems) && (0, _react2.jsx)(SortableList, {
      items: itemsArray,
      keys: keys,
      onSortEnd: this.onSortEnd
    }, items.map(this.renderItem))));
  }
  renderInput() {
    const {
      forID,
      classNameWrapper
    } = this.props;
    const {
      value
    } = this.state;
    return (0, _react2.jsx)("input", {
      type: "text",
      id: forID,
      value: value,
      onChange: this.handleChange,
      onFocus: this.handleFocus,
      onBlur: this.handleBlur,
      className: classNameWrapper
    });
  }
  render() {
    if (this.getValueType() !== null) {
      return this.renderListControl();
    } else {
      return this.renderInput();
    }
  }
}
exports.default = ListControl;
_defineProperty(ListControl, "propTypes", {
  metadata: _reactImmutableProptypes.default.map,
  onChange: _propTypes.default.func.isRequired,
  onChangeObject: _propTypes.default.func.isRequired,
  onValidateObject: _propTypes.default.func.isRequired,
  validate: _propTypes.default.func.isRequired,
  value: _reactImmutableProptypes.default.list,
  field: _propTypes.default.object,
  forID: _propTypes.default.string,
  controlRef: _propTypes.default.func,
  mediaPaths: _reactImmutableProptypes.default.map.isRequired,
  getAsset: _propTypes.default.func.isRequired,
  onOpenMediaLibrary: _propTypes.default.func.isRequired,
  onAddAsset: _propTypes.default.func.isRequired,
  onRemoveInsertedMedia: _propTypes.default.func.isRequired,
  classNameWrapper: _propTypes.default.string.isRequired,
  setActiveStyle: _propTypes.default.func.isRequired,
  setInactiveStyle: _propTypes.default.func.isRequired,
  editorControl: _propTypes.default.elementType.isRequired,
  resolveWidget: _propTypes.default.func.isRequired,
  clearFieldErrors: _propTypes.default.func.isRequired,
  fieldsErrors: _reactImmutableProptypes.default.map.isRequired,
  entry: _reactImmutableProptypes.default.map.isRequired,
  t: _propTypes.default.func
});
_defineProperty(ListControl, "defaultProps", {
  value: (0, _immutable.List)(),
  parentIds: []
});