feat(netlify-cms-widget-list): add variable type definitions to list widget (#1857)

packages/netlify-cms-ui-default/src/ObjectWidgetTopBar.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import styled, { css } from 'react-emotion';
 import Icon from './Icon';
 import { colors, buttons } from './styles';
+import Dropdown, { StyledDropdownButton, DropdownItem } from './Dropdown';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 
 const TopBarContainer = styled.div`
   align-items: center;
@@ -51,36 +53,70 @@ const AddButton = styled.button`
   }
 `;
 
-const ObjectWidgetTopBar = ({
-  allowAdd,
-  onAdd,
-  onCollapseToggle,
-  collapsed,
-  heading = null,
-  label,
-}) => (
-  <TopBarContainer>
-    <ExpandButtonContainer hasHeading={!!heading}>
-      <ExpandButton onClick={onCollapseToggle}>
-        <Icon type="chevron" direction={collapsed ? 'right' : 'down'} size="small" />
-      </ExpandButton>
-      {heading}
-    </ExpandButtonContainer>
-    {!allowAdd ? null : (
-      <AddButton onClick={onAdd}>
-        Add {label} <Icon type="add" size="xsmall" />
-      </AddButton>
-    )}
-  </TopBarContainer>
-);
+class ObjectWidgetTopBar extends React.Component {
+  static propTypes = {
+    allowAdd: PropTypes.bool,
+    types: ImmutablePropTypes.list,
+    onAdd: PropTypes.func,
+    onAddType: PropTypes.func,
+    onCollapseToggle: PropTypes.func,
+    collapsed: PropTypes.bool,
+    heading: PropTypes.node,
+    label: PropTypes.string,
+  };
 
-ObjectWidgetTopBar.propTypes = {
-  allowAdd: PropTypes.bool,
-  onAdd: PropTypes.func,
-  onCollapseToggle: PropTypes.func,
-  collapsed: PropTypes.bool,
-  heading: PropTypes.node,
-  label: PropTypes.string,
-};
+  renderAddUI() {
+    if (!this.props.allowAdd) {
+      return null;
+    }
+    if (this.props.types && this.props.types.size > 0) {
+      return this.renderTypesDropdown(this.props.types);
+    } else {
+      return this.renderAddButton();
+    }
+  }
+
+  renderTypesDropdown(types) {
+    return (
+      <Dropdown
+        renderButton={() => (
+          <StyledDropdownButton>Add {this.props.label} item</StyledDropdownButton>
+        )}
+      >
+        {types.map((type, idx) => (
+          <DropdownItem
+            key={idx}
+            label={type.get('label', type.get('name'))}
+            onClick={() => this.props.onAddType(type.get('name'))}
+          />
+        ))}
+      </Dropdown>
+    );
+  }
+
+  renderAddButton() {
+    return (
+      <AddButton onClick={this.props.onAdd}>
+        Add {this.props.label} <Icon type="add" size="xsmall" />
+      </AddButton>
+    );
+  }
+
+  render() {
+    const { onCollapseToggle, collapsed, heading = null } = this.props;
+
+    return (
+      <TopBarContainer>
+        <ExpandButtonContainer hasHeading={!!heading}>
+          <ExpandButton onClick={onCollapseToggle}>
+            <Icon type="chevron" direction={collapsed ? 'right' : 'down'} size="small" />
+          </ExpandButton>
+          {heading}
+        </ExpandButtonContainer>
+        {this.renderAddUI()}
+      </TopBarContainer>
+    );
+  }
+}
 
 export default ObjectWidgetTopBar;