[form-builder] Respect editModal schema option on Block Editor (#332)

* [form-builder] Respect editModal option in schema options, and choose proper edit modal when not set * [components] Stick popover to top * [form-builder] Not using lodash get
sanity-io · Nov 7, 2017 · aef99c9 · aef99c9
1 parent 9f189e1
commit aef99c9
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 20 deletions.
diff --git a/packages/@sanity/components/src/edititem/PopOver.js b/packages/@sanity/components/src/edititem/PopOver.js
@@ -183,6 +183,7 @@ export default class EditItemPopOver extends React.Component {
           isOpen={isOpen}
           scrollContainer={scrollContainer}
           onResize={this.handlePortalResize}
+          stickToTop
         >
           <div
             ref={this.setPopoverInnerElement}

diff --git a/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/FormBuilderBlock.js b/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/FormBuilderBlock.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-
+import {get} from 'lodash'
 import ReactDOM from 'react-dom'
 import OffsetKey from 'slate-react/lib/utils/offset-key'
 import setTransferData from 'slate-react/lib/utils/set-transfer-data'
@@ -9,6 +9,8 @@ import Base64 from 'slate-base64-serializer'
 import {findDOMNode} from 'slate-react'
 import ItemForm from './ItemForm'
 import FullscreenDialog from 'part:@sanity/components/dialogs/fullscreen'
+import EditItemPopOver from 'part:@sanity/components/edititem/popover'
+import EditItemFold from 'part:@sanity/components/edititem/fold'
 import Preview from '../../Preview'
 import styles from './styles/FormBuilderBlock.css'
 import createRange from './util/createRange'
@@ -237,21 +239,77 @@ export default class FormBuilderBlock extends React.Component {
     const value = this.getValue()
     const memberType = this.getMemberTypeOf(value)
 
+    const fieldsQty = ((memberType && memberType.fields) || []).length
+
+    let editModalLayout = get(this, 'props.type.options.editModal')
+
+    // Choose editModal based on number of fields
+    if (!editModalLayout) {
+      if (fieldsQty < 3) {
+        editModalLayout = 'popover'
+      } else {
+        editModalLayout = 'fullscreen'
+      }
+    }
+
+    if (editModalLayout === 'fullscreen') {
+      return (
+        <FullscreenDialog
+          isOpen
+          title={this.props.node.title}
+          onClose={this.handleClose}
+        >
+          <ItemForm
+            onDrop={this.handleCancelEvent}
+            type={memberType}
+            level={0}
+            value={this.getValue()}
+            onChange={this.handleChange}
+          />
+        </FullscreenDialog>
+      )
+    }
+
+    if (editModalLayout === 'fold') {
+      return (
+        <div className={styles.editBlockContainerFold}>
+          <EditItemFold
+            isOpen
+            title={this.props.node.title}
+            onClose={this.handleClose}
+          >
+            <ItemForm
+              onDrop={this.handleCancelEvent}
+              type={memberType}
+              level={0}
+              value={this.getValue()}
+              onChange={this.handleChange}
+            />
+          </EditItemFold>
+        </div>
+      )
+    }
+
+    // default
     return (
-      <FullscreenDialog
-        isOpen
-        title={this.props.node.title}
-        onClose={this.handleClose}
-      >
-        <ItemForm
-          onDrop={this.handleCancelEvent}
-          type={memberType}
-          level={0}
-          value={this.getValue()}
-          onChange={this.handleChange}
-        />
-      </FullscreenDialog>
+      <div className={styles.editBlockContainerPopOver}>
+        <EditItemPopOver
+          isOpen
+          title={this.props.node.title}
+          onClose={this.handleClose}
+        >
+          <ItemForm
+            onDrop={this.handleCancelEvent}
+            type={memberType}
+            level={0}
+            value={this.getValue()}
+            onChange={this.handleChange}
+          />
+        </EditItemPopOver>
+      </div>
     )
+
+
   }
 
   showBlockDragMarker(pos, node) {
@@ -298,11 +356,7 @@ export default class FormBuilderBlock extends React.Component {
           {this.renderPreview()}
         </span>
 
-        {isEditing && (
-          <div className={styles.editBlockContainer}>
-            {this.renderInput()}
-          </div>
-        )}
+        {isEditing && this.renderInput()}
       </div>
     )
   }

diff --git a/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/styles/FormBuilderBlock.css b/packages/@sanity/form-builder/src/inputs/BlockEditor-slate/styles/FormBuilderBlock.css
@@ -39,8 +39,16 @@
   background-color: var(--form-builder-block-background-selected);
 }
 
-.editBlockContainer {
+.editBlockContainerPopOver {
   position: absolute;
   top: 50%;
   left: 25%;
 }
+
+.editBlockContainerFold {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  height: 1px;
+  width: 100%;
+}