feat: dependent fields

decaporg · Jun 12, 2020 · b02bc89 · b02bc89
1 parent dc429f8
commit b02bc89
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 3 deletions.
diff --git a/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js b/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
@@ -55,6 +55,9 @@ const styleStrings = {
   widgetError: `
     border-color: ${colors.errorText};
   `,
+  widgetHidden: `
+    display: none;
+  `,
 };
 
 const ControlContainer = styled.div`
@@ -165,11 +168,13 @@ class EditorControl extends React.Component {
       clearSearch,
       clearFieldErrors,
       loadEntry,
-      className,
       isSelected,
       isEditorComponent,
       isNewEditorComponent,
       parentIds,
+      listIndexes,
+      hideField,
+      hideFieldCondition,
       t,
     } = this.props;
 
@@ -187,7 +192,13 @@ class EditorControl extends React.Component {
     return (
       <ClassNames>
         {({ css, cx }) => (
-          <ControlContainer className={className}>
+          <ControlContainer
+            className={cx({
+              [css`
+                ${styleStrings.widgetHidden}
+              `]: hideField,
+            })}
+          >
             {widget.globalStyles && <Global styles={coreCss`${widget.globalStyles}`} />}
             {errors && (
               <ControlErrorsList>
@@ -276,6 +287,9 @@ class EditorControl extends React.Component {
               isEditorComponent={isEditorComponent}
               isNewEditorComponent={isNewEditorComponent}
               parentIds={parentIds}
+              listIndexes={listIndexes}
+              hideField={hideField}
+              hideFieldCondition={hideFieldCondition}
               t={t}
             />
             {fieldHint && (

diff --git a/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js b/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import { get } from 'lodash';
 import styled from '@emotion/styled';
 import EditorControl from './EditorControl';
 
@@ -29,6 +30,27 @@ export default class ControlPane extends React.Component {
     });
   };
 
+  hideFieldCondition = (field, indexes = [0]) => {
+    const data = this.props.entry.get('data').toJS();
+    const conditions = field.get('conditions');
+
+    return conditions.some(c => {
+      let fieldPath = c.get('fieldPath');
+      if (fieldPath.includes('*')) {
+        fieldPath = fieldPath.split('*').reduce((acc, item, i) => {
+          return `${acc}${item}${indexes[i] >= 0 ? indexes[i] : ''}`;
+        }, '');
+      }
+
+      return (
+        (c.get('equal') && get(data, fieldPath) === c.get('equal')) ||
+        (c.get('notEqual') && get(data, fieldPath) !== c.get('notEqual')) ||
+        (c.get('oneOf') && c.get('oneOf').includes(get(data, fieldPath))) ||
+        (c.get('pattern') && RegExp(c.get('pattern')).test(get(data, fieldPath)))
+      );
+    });
+  };
+
   render() {
     const {
       collection,
@@ -62,6 +84,8 @@ export default class ControlPane extends React.Component {
               onValidate={onValidate}
               processControlRef={this.controlRef.bind(this)}
               controlRef={this.controlRef}
+              hideField={field.get('conditions') && this.hideFieldCondition(field)}
+              hideFieldCondition={this.hideFieldCondition}
             />
           ),
         )}

diff --git a/packages/netlify-cms-core/src/components/Editor/EditorControlPane/Widget.js b/packages/netlify-cms-core/src/components/Editor/EditorControlPane/Widget.js
@@ -114,7 +114,7 @@ export default class Widget extends Component {
       const wrappedError = this.validateWrappedControl(field);
       if (wrappedError.error) errors.push(wrappedError.error);
     }
-    this.props.onValidate(errors);
+    this.props.onValidate(this.props.hideField ? [] : errors);
   };
 
   validatePresence = (field, value) => {
@@ -261,6 +261,8 @@ export default class Widget extends Component {
       isEditorComponent,
       isNewEditorComponent,
       parentIds,
+      listIndexes,
+      hideFieldCondition,
       t,
     } = this.props;
     return React.createElement(controlComponent, {
@@ -306,6 +308,8 @@ export default class Widget extends Component {
       fieldsErrors,
       controlRef,
       parentIds,
+      listIndexes,
+      hideFieldCondition,
       t,
     });
   }

diff --git a/packages/netlify-cms-core/src/constants/configSchema.js b/packages/netlify-cms-core/src/constants/configSchema.js
@@ -25,6 +25,27 @@ const fieldsConfig = () => ({
       field: { $ref: 'field' },
       fields: { $ref: 'fields' },
       types: { $ref: 'fields' },
+      conditions: {
+        type: 'array',
+        minItems: 1,
+        items: {
+          type: 'object',
+          properties: {
+            fieldPath: { type: 'string' },
+            equal: { type: 'string' },
+            notEqual: { type: 'string' },
+            pattern: { type: 'string' },
+            oneOf: { type: 'array', minItems: 1, items: { type: 'string' } },
+          },
+          required: ['fieldPath'],
+          oneOf: [
+            { required: ['equal'] },
+            { required: ['notEqual'] },
+            { required: ['oneOf'] },
+            { required: ['pattern'] },
+          ],
+        },
+      },
     },
     select: { $data: '0/widget' },
     selectCases: {

diff --git a/packages/netlify-cms-widget-list/src/ListControl.js b/packages/netlify-cms-widget-list/src/ListControl.js
@@ -433,13 +433,16 @@ export default class ListControl extends React.Component {
       resolveWidget,
       parentIds,
       forID,
+      hideFieldCondition,
+      listIndexes: indexes,
     } = 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 listIndexes = indexes?.length ? indexes.concat(index) : [index];
 
     if (this.getValueType() === valueTypes.MIXED) {
       field = getTypedFieldForValue(field, item);
@@ -489,6 +492,8 @@ export default class ListControl extends React.Component {
               data-testid={`object-control-${key}`}
               hasError={hasError}
               parentIds={[...parentIds, forID, key]}
+              listIndexes={listIndexes}
+              hideFieldCondition={hideFieldCondition}
             />
           )}
         </ClassNames>

diff --git a/packages/netlify-cms-widget-object/src/ObjectControl.js b/packages/netlify-cms-widget-object/src/ObjectControl.js
@@ -81,6 +81,8 @@ export default class ObjectControl extends React.Component {
       editorControl: EditorControl,
       controlRef,
       parentIds,
+      listIndexes,
+      hideFieldCondition,
     } = this.props;
 
     if (field.get('widget') === 'hidden') {
@@ -102,6 +104,9 @@ export default class ObjectControl extends React.Component {
         processControlRef={controlRef && controlRef.bind(this)}
         controlRef={controlRef}
         parentIds={parentIds}
+        listIndexes={listIndexes}
+        hideField={field.get('conditions') && hideFieldCondition(field, listIndexes)}
+        hideFieldCondition={hideFieldCondition}
       />
     );
   }