Merge remote-tracking branch 'upstream/master'

* upstream/master:
  调整,为了方便写编辑器
  renderChild 把 index 传过去
  调整样式
  fix doc
  layout 样式调整
  Each 添加 index 变量
  给 Each 添加 placehoder

docs/components/crud.md

@@ -99,7 +99,7 @@ CRUD，即增删改查组件，主要用来展现数据列表，并支持各类
 
 ### 增
 
-其实这个渲染器并不没有包含新增功能，新增功能其实还是依靠其他位置放个弹框表单完成，弹框完事了会自动让页面里面的 CRUD 刷新如：
+其实这个渲染器并没有包含新增功能，新增功能其实还是依靠其他位置放个弹框表单完成，弹框完事了会自动让页面里面的 CRUD 刷新如：
 
 ```schema:height="600" scope="body"
 [

scss/components/_each.scss

@@ -0,0 +1,7 @@
+.#{$ns}Each {
+  &-placeholder {
+    color: $text--muted-color;
+    text-align: center;
+    padding: $gap-sm;
+  }
+}

scss/components/_page.scss

@@ -14,6 +14,9 @@
 
   &-content {
     padding: $Page-content-paddingY $Page-content-paddingX;
+    position: relative;
+    height: 100%;
+    width: 100%;
   }
 
   &-main > &-header {

scss/layout/_hbox.scss

@@ -3,12 +3,13 @@
   table-layout: fixed;
   border-spacing: 0;
   width: 100%;
-  height: 100%;
+  // height: 100%;
 
-  & > .#{$ns}Hbox-col {
+  &-col {
     display: table-cell;
     vertical-align: top;
     height: 100%;
+    width: 100%;
     float: none;
   }
 }

scss/layout/_layout.scss

@@ -235,7 +235,7 @@ body {
 @include media-breakpoint-up(md) {
   .#{$ns}Layout {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     flex-wrap: wrap;
     justify-content: stretch;
 
@@ -247,9 +247,8 @@ body {
     &-content,
     & > &-body {
       flex-grow: 1;
-      width: 0;
+      height: 0;
       position: relative;
-      height: auto;
     }
 
     &--boxed {

scss/themes/cxd.scss

@@ -504,6 +504,7 @@ $Satus-icon-width: px2rem(14px);
 @import '../components/spinner';
 @import '../components/button-group';
 @import '../components/dropdown';
+@import '../components/each';
 @import '../components/collapse';
 @import '../components/color';
 @import '../components/condition-builder';

scss/themes/dark.scss

@@ -187,6 +187,7 @@ pre {
 @import '../components/spinner';
 @import '../components/button-group';
 @import '../components/dropdown';
+@import '../components/each';
 @import '../components/collapse';
 @import '../components/color';
 @import '../components/condition-builder';

scss/themes/default.scss

@@ -50,6 +50,7 @@ $Form-input-borderColor: #cfdadd;
 @import '../components/spinner';
 @import '../components/button-group';
 @import '../components/dropdown';
+@import '../components/each';
 @import '../components/collapse';
 @import '../components/color';
 @import '../components/condition-builder';

src/renderers/Each.tsx

@@ -21,6 +21,8 @@ export interface EachSchema extends BaseSchema {
   name?: string;
 
   items?: SchemaCollection;
+
+  placeholder?: string;
 }
 
 export interface EachProps extends RendererProps {
@@ -30,12 +32,23 @@ export interface EachProps extends RendererProps {
 
 export default class Each extends React.Component<EachProps> {
   static propsList: Array<string> = ['name', 'items', 'value'];
-  static defaultProps: Partial<EachProps> = {
+  static defaultProps = {
-    className: ''
+    className: '',
+    placeholder: '暂无内容'
   };
 
   render() {
-    const {data, name, className, render, value, items} = this.props;
+    const {
+      data,
+      name,
+      className,
+      render,
+      value,
+      items,
+      placeholder,
+      classnames: cx,
+      translate: __
+    } = this.props;
 
     const arr =
       typeof value !== 'undefined'
@@ -50,18 +63,24 @@ export default class Each extends React.Component<EachProps> {
         : resolveVariable(name, data);
 
     return (
-      <div className={className}>
+      <div className={cx('Each', className)}>
-        {Array.isArray(arr) && items
+        {Array.isArray(arr) && items ? (
-          ? arr.map((item: any, index: number) =>
+          arr.map((item: any, index: number) =>
-              render(`item/${index}`, items, {
+            render(`item/${index}`, items, {
-                data: createObject(
+              data: createObject(
-                  data,
+                data,
-                  isObject(item) ? item : {[name]: item, item: item}
+                isObject(item)
-                ),
+                  ? {index, ...item}
-                key: index
+                  : {[name]: item, item: item, index}
-              })
+              ),
-            )
+              key: index
-          : null}
+            })
+          )
+        ) : (
+          <div className={cx('Each-placeholder')}>
+            {render('placeholder', __(placeholder))}
+          </div>
+        )}
       </div>
     );
   }

src/renderers/Form/HBox.tsx

@@ -79,12 +79,12 @@ export class HBoxRenderer extends React.Component<HBoxProps, any> {
       >
         {itemRender
           ? itemRender(column, key, length, this.props)
-          : this.renderChild(`column/${key}`, column)}
+          : this.renderChild(`column/${key}`, column, key)}
       </div>
     );
   }
 
-  renderChild(region: string, node: Schema) {
+  renderChild(region: string, node: Schema, index: number) {
     const {render, renderFormItems, formMode, store, $path} = this.props;
 
     if (node && !node.type && (node.controls || node.tabs || node.feildSet)) {
@@ -108,6 +108,14 @@ export class HBoxRenderer extends React.Component<HBoxProps, any> {
     return render(region, node.body || node);
   }
 
+  renderColumns() {
+    const {columns} = this.props;
+
+    return columns.map((column, key) =>
+      this.renderColumn(column, key, columns.length)
+    );
+  }
+
   render() {
     const {className, columns, gap, classPrefix: ns} = this.props;
 
@@ -119,11 +127,7 @@ export class HBoxRenderer extends React.Component<HBoxProps, any> {
           className
         )}
       >
-        <div className={`${ns}Hbox`}>
+        <div className={`${ns}Hbox`}>{this.renderColumns()}</div>
-          {columns.map((column: any, key: number) =>
-            this.renderColumn(column, key, columns.length)
-          )}
-        </div>
       </div>
     );
   }

src/renderers/HBox.tsx

@@ -6,11 +6,24 @@ import {isVisible} from '../utils/helper';
 import {BaseSchema, SchemaObject} from '../Schema';
 
 export type HBoxColumnObject = {
+  /**
+   * 列上 CSS 类名
+   */
   columnClassName?: string;
 
+  /**
+   * 宽度
+   */
   width?: number | string;
+
+  /**
+   * 高度
+   */
   height?: number | string;
 
+  /**
+   * 其他样式
+   */
   style?: {
     [propName: string]: any;
   };