ui: form builder create a dropLocked feature to avoid having children in some situations

* closes #2003

Signed-off-by: papadopan <[email protected]>

Author: papadopan

ui/cap-react/src/components/cms/components/SchemaWizard/SchemaPreview/SchemaTree/FieldTemplate.js

@@ -24,9 +24,18 @@ const FieldTemplate = props => {
     uiSchema: [...formContext.uiSchema, ...(rawErrors[0].uiSchema || [])]
   };
 
+  const shouldBoxHideChildren = uiSchema => {
+    return uiSchema["ui:field"] !== undefined;
+  };
+
   if (props.id == "root") {
     return (
-      <HoverBox addProperty={props.addProperty} key={props.id} path={path}>
+      <HoverBox
+        addProperty={props.addProperty}
+        key={props.id}
+        path={path}
+        shouldHideChildren={shouldBoxHideChildren(uiSchema)}
+      >
         <Box
           flex={true}
           pad={formContext.schema.length == 0 ? "medium" : "none"}
@@ -40,11 +49,7 @@ const FieldTemplate = props => {
   let _renderObjectArray = undefined;
 
   if (["array"].indexOf(schema.type) > -1) {
-    _renderObjectArray = (
-      <HoverBox addProperty={props.addProperty} key={props.id} path={path}>
-        <Box>{children}</Box>
-      </HoverBox>
-    );
+    _renderObjectArray = <Box>{children}</Box>;
   } else if (["object"].indexOf(schema.type) > -1) {
     _renderObjectArray = (
       <Box flex={true} style={{ position: "relative", overflow: "visible" }}>
@@ -82,7 +87,12 @@ const FieldTemplate = props => {
 
   if (_renderObjectArray) {
     return (
-      <HoverBox addProperty={props.addProperty} key={props.id} path={path}>
+      <HoverBox
+        addProperty={props.addProperty}
+        key={props.id}
+        path={path}
+        shouldHideChildren={shouldBoxHideChildren(uiSchema)}
+      >
         {_renderObjectArray}
       </HoverBox>
     );

ui/cap-react/src/components/cms/components/SchemaWizard/SchemaPreview/SchemaTree/HoverBox.js

@@ -12,16 +12,20 @@ function getStyle(isOverCurrent) {
   };
 }
 
-function HoverBox({ path, propKey, addProperty, children, index }) {
-  // const [hasDropped, setHasDropped] = useState(false);
-  // const [results, setResults] = useState({});
-  // const [hasDroppedOnChild, setHasDroppedOnChild] = useState(false);
-  // const ref = useRef(null);
+function HoverBox({
+  path,
+  propKey,
+  addProperty,
+  children,
+  index,
+  shouldHideChildren
+}) {
   const [{ isOverCurrent }, drop] = useDrop({
     accept: "FIELD_TYPE",
     drop: (item, monitor) => {
       const didDrop = monitor.didDrop();
-      if (!didDrop) {
+
+      if (!didDrop && !shouldHideChildren) {
         addProperty(path, item.data.default);
         return { item, path, propKey };
       }
@@ -33,8 +37,13 @@ function HoverBox({ path, propKey, addProperty, children, index }) {
       isOverCurrent: monitor.isOver({ shallow: true })
     })
   });
+
   return (
-    <div ref={drop} style={getStyle(isOverCurrent)} index={index}>
+    <div
+      ref={drop}
+      style={getStyle(isOverCurrent && !shouldHideChildren)}
+      index={index}
+    >
       {children}
     </div>
   );
@@ -45,7 +54,8 @@ HoverBox.propTypes = {
   path: PropTypes.array,
   addProperty: PropTypes.func,
   propKey: PropTypes.string,
-  index: PropTypes.number
+  index: PropTypes.number,
+  shouldHideChildren: PropTypes.bool
 };
 
 export default HoverBox;

ui/cap-react/src/components/cms/components/SchemaWizard/SchemaPreview/SchemaTree/SchemaTreeItem.js

@@ -26,6 +26,10 @@ class SchemaTreeItem extends React.Component {
     this.props.addItem(this.props.path);
   };
 
+  shouldBoxAcceptChildren = uiSchema => {
+    return uiSchema["ui:field"] !== undefined;
+  };
+
   render() {
     let _id =
       this.props.type == "array"
@@ -84,7 +88,8 @@ class SchemaTreeItem extends React.Component {
           ) : null}
           {this.props.schema ? (
             <Box direction="row" align="center" wrap={false} flex={false}>
-              {this.props.schema.type == "object" ? (
+              {this.props.schema.type == "object" &&
+              !this.shouldBoxAcceptChildren(this.props.uiSchema) ? (
                 <Box
                   direction="row"
                   responsive={false}
@@ -122,7 +127,8 @@ SchemaTreeItem.propTypes = {
   type: PropTypes.string,
   colorIndex: PropTypes.string,
   display: PropTypes.bool,
-  updateDisplay: PropTypes.func
+  updateDisplay: PropTypes.func,
+  uiSchema: PropTypes.object
 };
 
 function mapDispatchToProps(dispatch) {