[form-builder] Use Dialog for editing array items (#487)

* [components] Cleaning up default dialog

* [form-builder] Using Default Dialog for editing array content

* [pr] Request change from bjoerge

packages/@sanity/components/src/dialogs/DefaultDialog.js

@@ -52,15 +52,40 @@ export default class DefaultDialog extends React.PureComponent {
     event.stopPropagation()
   }
 
-  handleActionClick = event => {
-    const actionIndex = event.currentTarget.getAttribute('data-action-index')
-    this.props.onAction(this.props.actions[actionIndex])
-  }
-
   setDialogElement = element => {
     this.dialog = element
   }
 
+  renderActions = actions => {
+    if (!actions || actions.length < 1) {
+      return undefined
+    }
+
+    return (
+      <div className={styles.actions}>
+        {
+          actions.map((action, i) => {
+            const isSecondary = action.kind === 'secondary'
+            return (
+              <Button
+                key={i}
+                onClick={() => this.props.onAction(action)}
+                data-action-index={i}
+                color={action.color}
+                disabled={action.disabled}
+                kind={action.kind}
+                autoFocus={action.autoFocus}
+                className={isSecondary ? styles.actionSecondary : ''}
+              >
+                {action.title}
+              </Button>
+            )
+          })
+        }
+      </div>
+    )
+  }
+
   render() {
     const {title, actions, isOpen, showHeader, kind, onClose, className} = this.props
     const classNames = `
@@ -97,34 +122,8 @@ export default class DefaultDialog extends React.PureComponent {
                 <div className={styles.content}>
                   {this.props.children}
                 </div>
-
                 <div className={styles.footer}>
-                  {
-                    actions.length > 0 && <div className={styles.functions}>
-                      {
-                        actions.map((action, i) => {
-                          return (
-                            <Button
-                              key={i}
-                              onClick={this.handleActionClick}
-                              data-action-index={i}
-                              color={action.color}
-                              disabled={action.disabled}
-                              kind={action.kind}
-                              autoFocus={action.autoFocus}
-                              className={`
-                              ${styles.button}
-                              ${styles[`button_${action.kind}`] || styles.button}
-                            `
-                              }
-                            >
-                              {action.title}
-                            </Button>
-                          )
-                        })
-                      }
-                    </div>
-                  }
+                  {this.renderActions(actions)}
                 </div>
               </div>
             </div>

packages/@sanity/components/src/dialogs/styles/DefaultDialog.css

@@ -34,7 +34,7 @@
 
 .root {
   position: fixed;
-  z-index: var(--zindex-modal-background);
+  z-index: var(--zindex-portal);
   top: 0;
   left: 0;
   width: 100%;
@@ -72,7 +72,6 @@
 
 .dialog {
   composes: shadow-10dp from "part:@sanity/base/theme/shadows-style";
-  z-index: var(--zindex-modal);
   position: absolute;
   border: 0;
   border-radius: var(--border-radius-base);
@@ -87,6 +86,7 @@
   left: 0;
   box-sizing: border-box;
   background-color: var(--body-bg);
+  transition: all 0.3s linear;
 
   @nest .danger & {
     background-color: var(--state-danger-color);
@@ -112,12 +112,8 @@
     display: block;
     top: 50%;
     left: 50%;
-    height: 100%;
-    width: 100%;
-    min-width: 50%;
-    min-height: 30%;
-    max-width: 80%;
-    max-height: 80%;
+    height: auto;
+    width: auto;
     transform: translateX(-50%) translateY(-50%) scale(1);
   }
 }
@@ -142,29 +138,26 @@
 }
 
 .inner {
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  box-sizing: border-box;
+  display: block;
 }
 
 .content {
   box-sizing: border-box;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-  overflow-y: auto;
+  composes: lightScrollbars from "part:@sanity/base/theme/layout/scrolling-style";
+  composes: scrollY from "part:@sanity/base/theme/layout/scrolling-style";
+  max-height: 90vh;
+  max-width: 80vw;
 
   @nest .hasFunctions & {
-    max-height: calc(100% - var(--dialog-functions-height));
+    max-height: calc(90vh - var(--dialog-functions-height));
   }
 
   @nest .hasHeader & {
-    max-height: calc(100% - var(--dialog-header-height));
+    max-height: calc(90vh - var(--dialog-header-height));
   }
 
   @nest .hasFunctions.hasHeader & {
-    max-height: calc(100% - var(--dialog-header-height) - var(--dialog-functions-height));
+    max-height: calc(90vh - var(--dialog-header-height) - var(--dialog-functions-height));
   }
 }
 
@@ -212,23 +205,26 @@
   right: -3.5rem;
 }
 
-.functions {
+.actions {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.actionSecondary {
+  margin-right: auto;
+  order: -1;
+  border: 3px solid red;
+}
+
+.footer {
   font-size: var(--font-size-small);
   box-sizing: border-box;
   padding: var(--dialog-padding);
-  background-color: var(--gray-lightest);
-  border-top: 1px solid var(--gray-lighter);
+  background-color: var(--body-bg);
+  border-top: 1px solid var(--component-border-color);
   height: var(--dialog-functions-height);
 
   @nest .danger & {
     background-color: color(var(--white) a(60%));
   }
 }
-
-.button {
-  float: right;
-}
-
-.button_secondary {
-  float: left;
-}

packages/@sanity/components/src/dialogs/styles/PopOver.css

@@ -135,7 +135,6 @@
   padding: var(--small-padding);
   max-height: 100%;
   box-sizing: border-box;
-  overflow: overlay;
 }
 
 .paddingDummy {

packages/@sanity/components/src/edititem/styles/EditItemPopOver.css

@@ -139,7 +139,6 @@
   padding: 1em;
   max-height: 100%;
   box-sizing: border-box;
-  overflow: overlay;
 
   @media (--max-screen-medium) {
     max-height: calc(100vh - var(--header-height)) !important;

packages/@sanity/form-builder/src/inputs/Array/ItemValue.js

@@ -10,6 +10,7 @@ import LinkIcon from 'part:@sanity/base/link-icon'
 import EditItemFold from 'part:@sanity/components/edititem/fold'
 import EditItemPopOver from 'part:@sanity/components/edititem/popover'
 import FullscreenDialog from 'part:@sanity/components/dialogs/fullscreen'
+import DefaultDialog from 'part:@sanity/components/dialogs/default'
 
 import {FormBuilderInput} from '../../FormBuilderInput'
 import PatchEvent from '../../PatchEvent'
@@ -118,19 +119,32 @@ export default class RenderItemValue extends React.Component<Props> {
     this._focusArea = el
   }
 
+  handleDialogAction = action => {
+    if (!action) {
+      console.error('no action')
+    }
+    if (action.name === 'close') {
+      this.handleEditStop()
+    }
+    if (action.name === 'delete') {
+      //this.handleRemove
+      console.log('delete')
+    }
+  }
+
   renderEditItemForm(item: ItemValue): Node {
     const {type, focusPath, onFocus, onBlur} = this.props
     const options = type.options || {}
 
     const memberType = this.getMemberType() || {}
 
     // Reset level if a full screen modal
-    const level = options.editModal === 'fullscreen' ? 1 : this.props.level + 1
+    const level = options.editModal === 'fullscreen' ? 0 : 2
 
     const content = (
       <FormBuilderInput
         type={memberType}
-        level={level}
+        level={1}
         value={item}
         onChange={this.handleChange}
         onFocus={onFocus}
@@ -161,11 +175,42 @@ export default class RenderItemValue extends React.Component<Props> {
       )
     }
 
+    if (options.editModal === 'popover') {
+      return (
+        <div className={styles.popupAnchor}>
+          <EditItemPopOver onClose={this.handleEditStop} key={item._key}>
+            {content}
+          </EditItemPopOver>
+        </div>
+      )
+    }
+
     return (
       <div className={styles.popupAnchor}>
-        <EditItemPopOver onClose={this.handleEditStop} key={item._key}>
-          {content}
-        </EditItemPopOver>
+        <DefaultDialog
+          isOpen
+          onClose={this.handleEditStop}
+          key={item._key}
+          title="Edit"
+          onAction={this.handleDialogAction}
+          actions={[{
+            index: '1',
+            name: 'close',
+            title: 'Close'
+          },
+          {
+            index: '2',
+            name: 'delete',
+            kind: 'simple',
+            title: 'Delete',
+            color: 'danger'
+          }
+          ]}
+        >
+          <div className={styles.defaultDialogContent}>
+            {content}
+          </div>
+        </DefaultDialog>
       </div>
     )
   }

packages/@sanity/form-builder/src/inputs/Array/styles/ItemValue.css

@@ -82,6 +82,7 @@
   min-width: 0;
   box-sizing: border-box;
   border: 1px solid transparent;
+
   @nest &:focus {
     border: 1px solid var(--input-border-color-focus);
     box-shadow: var(--component-box-shadow--focus);
@@ -94,3 +95,7 @@
   flex-grow: 0;
   font-size: 0.9rem;
 }
+
+.defaultDialogContent {
+  padding: var(--medium-padding);
+}