update text and object children compose style

Author: jljsj33

assets/index.less

@@ -13,7 +13,7 @@
     position: relative;
     background: @bg-color;
     color: @text-color;
-
+    font-size: 14px;
     height: 100%;
 
     .ant-input {
@@ -91,7 +91,7 @@
 
     &-array,
     &-string {
-      margin: 16px 0;
+      margin: 8px 0;
     }
 
   }
@@ -110,6 +110,12 @@
       margin: 8px 0;
       color: @text-color2;
     }
+    &-z {
+      color: @text-color;
+      border-top: 1px solid @line-color;
+      padding-top: 8px;
+      margin-top: 16px;
+    }
   }
 
   &-editor {

examples/simple.tsx

@@ -20,6 +20,7 @@ Object(产品优势_0) {
     descriptionContent(说明文字): Object{
       abc(test): Object{
         children(test 文字内容): Image,
+        a(dsfsd),
       },
       children(文字内容): Text,
     },

src/components/Box.tsx

@@ -8,14 +8,15 @@ export default class Box<props extends IProps, state = any> extends React.Compon
     return null;
   }
   render() {
-    const { schema, prefixCls, type, noTitle } = this.props;
+    const { schema, prefixCls, type, noTitle, noXTitle } = this.props;
     const { description } = schema;
     const childNames = description.split(remarkStr);
     const childrenToRender = this.getChildrenToRender();
     const className = classnames(`${prefixCls}-box`, `${prefixCls}-box-${type}`);
+    console.log(type, noXTitle)
     return (
       <div className={className}>
-        {!noTitle && <div className={`${prefixCls}-title-x`}>{childNames[0]}</div>}
+        {!noTitle && <div className={`${prefixCls}-title-x ${noXTitle ? `${prefixCls}-title-z` : ''}`}>{childNames[0]}</div>}
         {childrenToRender}
         {childNames[1] && <div>{childNames[1]}</div>}
       </div>

src/components/ObjectType.tsx

@@ -36,13 +36,17 @@ export default class ObjectType extends React.Component<IProps> {
     if (schema.meta && schema.meta.if && !evaluate(parentData, schema.meta && schema.meta.if)) {
       return null;
     }
-    const children = Object.keys(properties).map(key => {
+    const propertiesType = Object.keys(properties).map(key => properties[key].type);
+    const children = Object.keys(properties).map((key, i) => {
       const item = properties[key];
       if (ignore.indexOf(key) >= 0) {
         return null;
       }
       const boxClass = item.type === 'array' && !isOnlyChild || item.type === 'object' && noTop ? `${prefixCls}-box-child` : '';
       const $selected = [...selected, key];
+      console.log(item.type, isOnlyChild, item.type !== 'array' || item.type !== 'object', propertiesType[i - 1], (propertiesType[i - 1] || '').match(/array|object/));
+      const noXTitle = (item.type !== 'array' || item.type !== 'object') && !!(propertiesType[i - 1] || '').match(/array|object/);
+      console.log(noXTitle)
       return (
         <Comp
           schema={item}
@@ -58,6 +62,7 @@ export default class ObjectType extends React.Component<IProps> {
           selected={$selected}
           parentSelected={parentSelected}
           noTitle={isOnlyChild && noTop}
+          noXTitle={noXTitle}
           boxClassName={boxClass}
           ignore={ignore}
           uploadProps={uploadProps}
@@ -69,6 +74,7 @@ export default class ObjectType extends React.Component<IProps> {
     if (!children.length) {
       return null;
     }
+    console.log(children, noTitle)
     return (
       <div>
         {!noTitle && <div

src/index.tsx

@@ -108,7 +108,7 @@ class EditorJSON extends React.Component<IProps, IState> {
     selected.forEach(key => {
       schema = !isNumber(key) ? schema.properties[key] : schema;
       data = data[key];
-      dataBasic = dataBasic[isNumber(key) ? 0 : key];
+      dataBasic = dataBasic ? dataBasic[isNumber(key) ? 0 : key] : {};
     });
     return { schema, data, dataBasic };
   }

src/utils/index.ts

@@ -16,6 +16,7 @@ export interface IProps {
   boxClassName?: string;
   type?: string;
   noTitle?: boolean;
+  noXTitle?: boolean;
   uploadProps?: Upload;
   uploadImageSize?: number;
   uploadVideoSize?: number;