jekyll · ashmaroli · Dec 2, 2019 · Dec 2, 2019
diff --git a/src/components/metadata/MetaArrayItem.js b/src/components/metadata/MetaArrayItem.js
@@ -12,14 +12,6 @@ export class MetaArrayItem extends Component {
     convertField(nameAttr, type);
   }
 
-  handleDropdownFocus() {
-    findDOMNode(this.refs.wrap).classList.add('showing-dropdown');
-  }
-
-  handleDropdownBlur() {
-    findDOMNode(this.refs.wrap).classList.remove('showing-dropdown');
-  }
-
   handleRemoveClick() {
     const { removeField, namePrefix, index } = this.props;
     removeField(namePrefix, index);
@@ -56,8 +48,6 @@ export class MetaArrayItem extends Component {
               parentType="array"
               onConvertClick={type => this.handleConvertClick(type)}
               onRemoveClick={() => this.handleRemoveClick()}
-              onDropdownFocus={() => this.handleDropdownFocus()}
-              onDropdownBlur={() => this.handleDropdownBlur()}
             />
           </div>
           <CurrentComponent

diff --git a/src/components/metadata/MetaButtons.js b/src/components/metadata/MetaButtons.js
@@ -1,62 +1,81 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import Icon from '../Icon';
 
-export class MetaButtons extends Component {
-  handleTypeChange(type) {
+export default class MetaButtons extends Component {
+  state = {
+    dropdown: false,
+  };
+
+  fieldTypes = {
+    simple: {
+      icon: 'pencil',
+      label: 'Simple',
+    },
+    array: {
+      icon: 'list-ol',
+      label: 'List',
+    },
+    object: {
+      icon: 'th-large',
+      label: 'Object',
+    },
+  };
+
+  fieldTypeKeys = Object.keys(this.fieldTypes);
+
+  toggleDropdownState = () => {
+    this.setState(state => {
+      return { dropdown: !state.dropdown };
+    });
+  };
+
+  renderDropdownItems(type) {
     const { onConvertClick } = this.props;
-    onConvertClick(type);
-  }
 
-  handleRemoveClick() {
-    const { onRemoveClick } = this.props;
-    onRemoveClick();
+    return this.fieldTypeKeys.map((ftype, i) => {
+      if (type !== ftype) {
+        const { icon, label } = this.fieldTypes[ftype];
+        return (
+          <span key={i} onMouseDown={() => onConvertClick(ftype)}>
+            <Icon name={icon} />
+            Convert to {label}
+          </span>
+        );
+      }
+    }).filter(Boolean);
   }
 
   render() {
-    const {
-      currentType,
-      parentType,
-      onDropdownFocus,
-      onDropdownBlur,
-    } = this.props;
+    const { currentType, parentType, onRemoveClick } = this.props;
+    const sortableHandle = (
+      <span className="move">
+        <Icon name="arrows" />
+      </span>
+    );
+
+    const dropdownClasses = classnames('dropdown', {
+      'showing-dropdown': this.state.dropdown,
+    });
+
     return (
       <div className="meta-buttons">
-        {parentType == 'array' && (
-          <span className="move">
-            <Icon name="arrows" />
-          </span>
-        )}
-        <span className="dropdown">
+        {parentType == 'array' && sortableHandle}
+        <span className={dropdownClasses}>
           <a
-            onFocus={() => onDropdownFocus()}
-            onBlur={() => onDropdownBlur()}
             className="meta-button"
             tabIndex="1"
+            onClick={this.toggleDropdownState}
+            onBlur={() => this.setState({ dropdown: false })}
           >
             <Icon name="chevron-down" />
           </a>
           <div className="dropdown-wrap">
-            {currentType != 'simple' && (
-              <span onMouseDown={() => this.handleTypeChange('simple')}>
-                <Icon name="pencil" />Convert to Simple
-              </span>
-            )}
-            {currentType != 'array' && (
-              <span onMouseDown={() => this.handleTypeChange('array')}>
-                <Icon name="list-ol" />Convert to List
-              </span>
-            )}
-            {currentType != 'object' && (
-              <span onMouseDown={() => this.handleTypeChange('object')}>
-                <Icon name="th-large" />Convert to Object
-              </span>
-            )}
-            <span
-              onMouseDown={() => this.handleRemoveClick()}
-              className="remove-field"
-            >
-              <Icon name="trash-o" />Remove field
+            {this.renderDropdownItems(currentType)}
+            <span onMouseDown={() => onRemoveClick()} className="remove-field">
+              <Icon name="trash-o" />
+              Remove field
             </span>
           </div>
         </span>
@@ -70,8 +89,4 @@ MetaButtons.propTypes = {
   parentType: PropTypes.string.isRequired,
   onConvertClick: PropTypes.func.isRequired,
   onRemoveClick: PropTypes.func.isRequired,
-  onDropdownFocus: PropTypes.func.isRequired,
-  onDropdownBlur: PropTypes.func.isRequired,
 };
-
-export default MetaButtons;
diff --git a/src/components/metadata/MetaField.js b/src/components/metadata/MetaField.js
@@ -17,14 +17,6 @@ export class MetaField extends Component {
     convertField(nameAttr, type);
   }
 
-  handleDropdownFocus() {
-    findDOMNode(this.refs.wrap).classList.add('showing-dropdown');
-  }
-
-  handleDropdownBlur() {
-    findDOMNode(this.refs.wrap).classList.remove('showing-dropdown');
-  }
-
   handleKeyBlur() {
     const { namePrefix, fieldKey, updateFieldKey } = this.props;
     let currentValue = findDOMNode(this.refs.field_key).value;
@@ -76,8 +68,6 @@ export class MetaField extends Component {
             parentType="top"
             onConvertClick={type => this.handleConvertClick(type)}
             onRemoveClick={() => this.handleRemoveClick()}
-            onDropdownFocus={() => this.handleDropdownFocus()}
-            onDropdownBlur={() => this.handleDropdownBlur()}
           />
         </div>
         <CurrentComponent

diff --git a/src/components/metadata/MetaObjectItem.js b/src/components/metadata/MetaObjectItem.js
@@ -12,14 +12,6 @@ export class MetaObjectItem extends Component {
     convertField(nameAttr, type);
   }
 
-  handleDropdownFocus() {
-    findDOMNode(this.refs.wrap).classList.add('showing-dropdown');
-  }
-
-  handleDropdownBlur() {
-    findDOMNode(this.refs.wrap).classList.remove('showing-dropdown');
-  }
-
   handleKeyBlur() {
     const { namePrefix, fieldKey, updateFieldKey } = this.props;
     let currentValue = findDOMNode(this.refs.field_key).value;
@@ -69,8 +61,6 @@ export class MetaObjectItem extends Component {
             parentType="object"
             onConvertClick={type => this.handleConvertClick(type)}
             onRemoveClick={() => this.handleRemoveClick()}
-            onDropdownFocus={() => this.handleDropdownFocus()}
-            onDropdownBlur={() => this.handleDropdownBlur()}
           />
         </div>
         <div className="object-value">

diff --git a/src/components/metadata/tests/metaarrayitem.spec.js b/src/components/metadata/tests/metaarrayitem.spec.js
@@ -68,15 +68,26 @@ describe('Components::MetaArrayItem', () => {
     expect(component.find(MetaObjectItem).length).toBe(2);
   });
 
-  it('should add `showing-dropdown` class when dropdown button is focused', () => {
+  it('should toggle `showing-dropdown` class when dropdown button is clicked', () => {
     const { component, metabuttons } = setup();
     let dropdownButton = metabuttons.find('.meta-button');
-    dropdownButton.simulate('focus');
-    expect(
-      component.find('.array-item-wrap').hasClass('showing-dropdown')
-    ).toEqual(true);
+    dropdownButton.simulate('click');
+    expect(component.find('.dropdown').hasClass('showing-dropdown')).toEqual(
+      true
+    );
+    dropdownButton.simulate('click');
+    expect(component.find('.dropdown').node.classList.length).toBe(1);
+  });
+
+  it('should remove `showing-dropdown` class when dropdown button loses focus', () => {
+    const { component, metabuttons } = setup();
+    let dropdownButton = metabuttons.find('.meta-button');
+    dropdownButton.simulate('click');
+    expect(component.find('.dropdown').hasClass('showing-dropdown')).toEqual(
+      true
+    );
     dropdownButton.simulate('blur');
-    expect(component.find('.array-item-wrap').node.classList.length).toBe(1);
+    expect(component.find('.dropdown').node.classList.length).toBe(1);
   });
 
   it('should call removeField when the button clicked', () => {

diff --git a/src/components/metadata/tests/metabuttons.spec.js b/src/components/metadata/tests/metabuttons.spec.js
@@ -4,28 +4,24 @@ import MetaButtons from '../MetaButtons';
 
 const defaultProps = {
   currentType: 'simple',
-  parentType: 'array'
+  parentType: 'array',
 };
 
 function setup(props = defaultProps) {
   const actions = {
     onConvertClick: jest.fn(),
     onRemoveClick: jest.fn(),
-    onDropdownFocus: jest.fn(),
-    onDropdownBlur: jest.fn()
   };
 
-  let component = mount(
-    <MetaButtons {...props} {...actions} />
-  );
+  let component = mount(<MetaButtons {...props} {...actions} />);
 
   return {
     component,
     convertButtons: component.find('.dropdown-wrap span'),
     dropdownButton: component.find('.dropdown .meta-button'),
     sortHandle: component.find('.move'),
     actions,
-    props
+    props,
   };
 }
 
@@ -35,25 +31,21 @@ describe('Components::MetaButtons', () => {
     expect(sortHandle.node).toBeTruthy();
     expect(convertButtons.length).toBe(3);
   });
+
   it('should not render sort handle if parentType is not array', () => {
     const { sortHandle } = setup({
       currentType: 'simple',
-      parentType: 'object'
+      parentType: 'object',
     });
     expect(sortHandle.node).toBeFalsy();
   });
-  it('should call onDropdownFocus and onDropdownBlur', () => {
-    const { actions, dropdownButton } = setup();
-    dropdownButton.simulate('focus');
-    expect(actions.onDropdownFocus).toHaveBeenCalled();
-    dropdownButton.simulate('blur');
-    expect(actions.onDropdownBlur).toHaveBeenCalled();
-  });
+
   it('should call onConvertClick', () => {
     const { actions, convertButtons } = setup();
     convertButtons.forEach(node => node.simulate('mousedown'));
     expect(actions.onConvertClick.mock.calls.length).toBe(2);
   });
+
   it('should call removeField', () => {
     const { component, actions } = setup();
     let removeFieldButton = component.find('.remove-field');

diff --git a/src/components/metadata/tests/metafield.spec.js b/src/components/metadata/tests/metafield.spec.js
@@ -76,15 +76,26 @@ describe('Components::MetaField', () => {
     expect(actions.updateFieldKey).toHaveBeenCalled();
   });
 
-  it('should add `showing-dropdown` class when dropdown button is focused', () => {
+  it('should toggle `showing-dropdown` class when dropdown button is clicked', () => {
     const { component, metabuttons } = setup();
     let dropdownButton = metabuttons.find('.meta-button');
-    dropdownButton.simulate('focus');
-    expect(component.find('.metafield').hasClass('showing-dropdown')).toEqual(
+    dropdownButton.simulate('click');
+    expect(component.find('.dropdown').hasClass('showing-dropdown')).toEqual(
+      true
+    );
+    dropdownButton.simulate('click');
+    expect(component.find('.dropdown').node.classList.length).toBe(1);
+  });
+
+  it('should remove `showing-dropdown` class when dropdown button loses focus', () => {
+    const { component, metabuttons } = setup();
+    let dropdownButton = metabuttons.find('.meta-button');
+    dropdownButton.simulate('click');
+    expect(component.find('.dropdown').hasClass('showing-dropdown')).toEqual(
       true
     );
     dropdownButton.simulate('blur');
-    expect(component.find('.metafield').node.classList.length).toBe(1);
+    expect(component.find('.dropdown').node.classList.length).toBe(1);
   });
 
   it('should call removeField when the button clicked', () => {

diff --git a/src/components/metadata/tests/metaobjectitem.spec.js b/src/components/metadata/tests/metaobjectitem.spec.js
@@ -76,15 +76,26 @@ describe('Components::MetaObjectItem', () => {
     expect(actions.updateFieldKey).toHaveBeenCalled();
   });
 
-  it('should add `showing-dropdown` class when dropdown button is focused', () => {
+  it('should toggle `showing-dropdown` class when dropdown button is clicked', () => {
     const { component, metabuttons } = setup();
     let dropdownButton = metabuttons.find('.meta-button');
-    dropdownButton.simulate('focus');
-    expect(
-      component.find('.object-item-wrap').hasClass('showing-dropdown')
-    ).toEqual(true);
+    dropdownButton.simulate('click');
+    expect(component.find('.dropdown').hasClass('showing-dropdown')).toEqual(
+      true
+    );
+    dropdownButton.simulate('click');
+    expect(component.find('.dropdown').node.classList.length).toBe(1);
+  });
+
+  it('should remove `showing-dropdown` class when dropdown button loses focus', () => {
+    const { component, metabuttons } = setup();
+    let dropdownButton = metabuttons.find('.meta-button');
+    dropdownButton.simulate('click');
+    expect(component.find('.dropdown').hasClass('showing-dropdown')).toEqual(
+      true
+    );
     dropdownButton.simulate('blur');
-    expect(component.find('.object-item-wrap').node.classList.length).toBe(1);
+    expect(component.find('.dropdown').node.classList.length).toBe(1);
   });
 
   it('should call removeField when the button clicked', () => {

diff --git a/src/styles/datagui.scss b/src/styles/datagui.scss
@@ -388,9 +388,6 @@
       opacity: 0;
     }
   }
-  .showing-dropdown {
-    z-index: 30;
-  }
   .date-field {
     float: right;
     right: 34px;