Allow default metadata fields to be overridden and edited in place (#597)

This allows a user to see the default fields for a new or existing document, choose to "override" the defaults, and revert back to the default at any time.

Author: i-a-n

src/components/MarkdownPageBody.js

@@ -4,7 +4,6 @@ import Splitter from './Splitter';
 import InputPath from './form/InputPath';
 import InputTitle from './form/InputTitle';
 import MarkdownEditor from './MarkdownEditor';
-import StaticMetaData from './metadata/StaticMetaFields';
 import Metadata from '../containers/MetaFields';
 
 export default function MarkdownPageBody({
@@ -30,8 +29,7 @@ export default function MarkdownPageBody({
         initialValue={body}
       />
       <Splitter />
-      <StaticMetaData fields={staticmetafields} />
-      <Metadata fields={metafields} />
+      <Metadata fields={metafields} staticFields={staticmetafields} />
     </div>
   );
 }

src/components/metadata/MetaButtons.js

@@ -36,23 +36,30 @@ export default class MetaButtons extends Component {
 
     if (parentKey === 'tags') return null;
 
-    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>
-        );
-      }
+    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>
+          );
+        }
 
-      return null;
-    }).filter(Boolean);
+        return null;
+      })
+      .filter(Boolean);
   }
 
   render() {
-    const { currentType, parentType, onRemoveClick } = this.props;
+    const {
+      currentType,
+      parentType,
+      onRemoveClick,
+      isDefaultField,
+    } = this.props;
     const sortableHandle = (
       <span className="move">
         <Icon name="arrows" />
@@ -78,8 +85,8 @@ export default class MetaButtons extends Component {
           <div className="dropdown-wrap">
             {this.renderDropdownItems(currentType)}
             <span onMouseDown={() => onRemoveClick()} className="remove-field">
-              <Icon name="trash-o" />
-              Remove field
+              <Icon name={isDefaultField ? 'undo' : 'trash-o'} />
+              {isDefaultField ? 'Revert to default' : 'Remove field'}
             </span>
           </div>
         </span>
@@ -94,4 +101,5 @@ MetaButtons.propTypes = {
   onConvertClick: PropTypes.func.isRequired,
   onRemoveClick: PropTypes.func.isRequired,
   parentKey: PropTypes.string,
+  isDefaultField: PropTypes.bool,
 };

src/components/metadata/MetaField.js

@@ -45,6 +45,8 @@ export class MetaField extends Component {
       convertField,
       key_prefix,
       siteMeta,
+      isInDefaultState,
+      isDefaultField,
     } = this.props;
 
     const FieldTypes = {
@@ -63,9 +65,11 @@ export class MetaField extends Component {
             className="field key-field"
             type="text"
             placeholder="Key"
+            disabled={isInDefaultState}
           />
           <MetaButtons
             currentType={type}
+            isDefaultField={isDefaultField}
             parentType="top"
             parentKey={fieldKey}
             onConvertClick={type => this.handleConvertClick(type)}
@@ -86,6 +90,7 @@ export class MetaField extends Component {
           nameAttr={`${namePrefix}['${fieldKey}']`}
           namePrefix={`${namePrefix}['${fieldKey}']`}
           siteMeta={siteMeta}
+          isInDefaultState={isInDefaultState}
         />
       </div>
     );
@@ -107,6 +112,8 @@ MetaField.propTypes = {
   namePrefix: PropTypes.string.isRequired,
   key_prefix: PropTypes.string.isRequired,
   siteMeta: PropTypes.object,
+  isInDefaultState: PropTypes.bool,
+  isDefaultField: PropTypes.bool,
 };
 
 export default MetaField;

src/components/metadata/StaticMetaButton.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Icon from '../Icon';
+import classnames from 'classnames';
+
+export default class StaticMetaButton extends Component {
+  state = {
+    dropdown: false,
+  };
+
+  toggleDropdownState = () => {
+    this.setState(state => ({ dropdown: !state.dropdown }));
+  };
+
+  render() {
+    const { onEnableField } = this.props;
+
+    const dropdownClasses = classnames('dropdown', {
+      'showing-dropdown': this.state.dropdown,
+    });
+
+    return (
+      <div className="meta-buttons">
+        <span className={dropdownClasses}>
+          <a
+            className="meta-button"
+            tabIndex="1"
+            onClick={this.toggleDropdownState}
+            onBlur={() => this.setState({ dropdown: false })}
+          >
+            <Icon name="chevron-down" />
+          </a>
+          <div className="dropdown-wrap">
+            <span onMouseDown={() => onEnableField()}>
+              <Icon name="pencil" /> Override default
+            </span>
+          </div>
+        </span>
+      </div>
+    );
+  }
+}
+
+StaticMetaButton.propTypes = {
+  onEnableField: PropTypes.func.isRequired,
+};

src/components/metadata/StaticMetaFields.js

@@ -3,25 +3,36 @@ import PropTypes from 'prop-types';
 import StaticMetaArray from './StaticMetaArray';
 import StaticMetaObject from './StaticMetaObject';
 import StaticMetaSimple from './StaticMetaSimple';
+import StaticMetaButton from '../StaticMetaButton';
 
 const FieldTypes = {
   array: StaticMetaArray,
   object: StaticMetaObject,
   simple: StaticMetaSimple,
 };
 
-export default function StaticMetaField({ type, fieldKey, fieldValue }) {
+export default function StaticMetaField({
+  type,
+  fieldKey,
+  fieldValue,
+  enableField,
+}) {
   const CurrentComponent = FieldTypes[type];
 
   return (
-    <div className="metafield">
+    <div className="metafield  default-field">
       <div className={`meta-key ${type}`}>
         <input
           value={fieldKey}
           className="field key-field"
           type="text"
           disabled
         />
+        <StaticMetaButton
+          onEnableField={() => {
+            enableField(`metadata['${fieldKey}']`, fieldValue);
+          }}
+        />
       </div>
       <CurrentComponent fieldValue={fieldValue} />
     </div>
@@ -32,4 +43,5 @@ StaticMetaField.propTypes = {
   type: PropTypes.string.isRequired,
   fieldKey: PropTypes.string.isRequired,
   fieldValue: PropTypes.any.isRequired,
+  enableField: PropTypes.func.isRequired,
 };