easy3wmui 0.0.2 → 0.0.4-3.beta1

package/lib/Easy3wMGridPage/index.js

@@ -2,6 +2,10 @@
 
 exports.__esModule = true;
 
+var _button = require('antd-mobile/es/components/button');
+
+var _button2 = _interopRequireDefault(_button);
+
 var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
@@ -22,174 +26,473 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _Easy3wMCollapse = require('../Easy3wMCollapse');
-
-var _Easy3wMCollapse2 = _interopRequireDefault(_Easy3wMCollapse);
-
-var _Easy3wMEmpty = require('../Easy3wMEmpty');
+var _numeral = require('numeral');
 
-var _Easy3wMEmpty2 = _interopRequireDefault(_Easy3wMEmpty);
+var _numeral2 = _interopRequireDefault(_numeral);
 
-var _Easy3wMStepper = require('../Easy3wMStepper');
+var _antdMobile = require('antd-mobile');
 
-var _Easy3wMStepper2 = _interopRequireDefault(_Easy3wMStepper);
+var _antdMobileIcons = require('antd-mobile-icons');
 
-var _Easy3wMList = require('../Easy3wMList');
-
-var _Easy3wMList2 = _interopRequireDefault(_Easy3wMList);
+var _easy3wmui = require('easy3wmui');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-var Panel = _Easy3wMCollapse2['default'].Panel;
-var Item = _Easy3wMList2['default'].Item;
+// import Easy3wMCollapse from '../Easy3wMCollapse';
+// import Easy3wMEmpty from '../Easy3wMEmpty';
+// import Easy3wMStepper from '../Easy3wMStepper';
+// import Easy3wMList from '../Easy3wMList';
+// import Easy3wMCard from '../Easy3wMCard';
+// import Easy3wMSpace from '../Easy3wMSpace';
+
+var Panel = _easy3wmui.Easy3wMCollapse.Panel;
+var Item = _easy3wmui.Easy3wMList.Item;
 
 var Easy3wMGridPage = function (_Component) {
-	(0, _inherits3['default'])(Easy3wMGridPage, _Component);
-
-	function Easy3wMGridPage(props) {
-		(0, _classCallCheck3['default'])(this, Easy3wMGridPage);
-
-		var _this = (0, _possibleConstructorReturn3['default'])(this, _Component.call(this, props));
-
-		_this.touchFormatData = function (dataItem, columnItem) {
-			var key = columnItem.key,
-			    dataIndex = columnItem.dataIndex,
-			    numberFormat = columnItem.numberFormat;
-
-			var fieldId = dataIndex || key;
-			var value = dataItem[fieldId];
-			if (value || value === false || value === 0) {
-				// value值存在  Boolean()值为false的7个特殊值   undefined， null， false， NaN， ''， 0， -0
-				if (numberFormat) {
-					var thousandthValue = numeral(dataItem[fieldId]).format('0,0.00');
-					value = thousandthValue;
-				}
-				return value;
-			} else {
-				// value值不存在
-				return '';
-			}
-		};
-
-		_this.renderEasy3wMGridPage = function (dataList) {
-			var _this$props = _this.props,
-			    _this$props$panelProp = _this$props.panelProps,
-			    panelProps = _this$props$panelProp === undefined ? {} : _this$props$panelProp,
-			    _this$props$listProps = _this$props.listProps,
-			    listProps = _this$props$listProps === undefined ? {} : _this$props$listProps,
-			    _this$props$itemProps = _this$props.itemProps,
-			    itemProps = _this$props$itemProps === undefined ? {} : _this$props$itemProps,
-			    _this$props$columns = _this$props.columns,
-			    columns = _this$props$columns === undefined ? [] : _this$props$columns,
-			    panelTitle = _this$props.panelTitle,
-			    panelKey = _this$props.panelKey;
-			// collapseProps 折叠面板容器参数
-			// panelProps 折叠面板参数
-			// emptyProps 空状态参数
-			// stepperProps 步进器参数
-			// listProps 列表参数
-			// itemProps 列表项参数
-			// columns 字段列表
-			// dataList 列表数据
-			// totalResult 列表记录数量
-			// panelTitle panel标题
-			// panelKey panel唯一标识
-
-			return dataList.map(function (item, index) {
-				var children = item.children;
-
-				return (// 折叠面板
-					_react2['default'].createElement(
-						Panel,
-						(0, _extends3['default'])({}, panelProps, { title: item[panelTitle] || '', key: item[panelKey] || index }),
-						columns.map(function (column) {
-							var title = column.title,
-							    key = column.key,
-							    dataIndex = column.dataIndex;
-
-							var fieldId = dataIndex || key;
-							var extra = column.render ? column.render(item[fieldId], item) : _this.touchFormatData(item, column);
-							if (column.children) {
-								return _react2['default'].createElement(
-									_Easy3wMList2['default'],
-									(0, _extends3['default'])({}, listProps, { header: title }),
-									column.children.map(function (childrenColumn) {
-										var childrenFieldId = childrenColumn.dataIndex || childrenColumn.key;
-										var childrenExtra = childrenColumn.render ? childrenColumn.render(item[childrenFieldId], item) : _this.touchFormatData(item, childrenColumn);
-										// const {} = childrenItem;
-										return _react2['default'].createElement(
-											Item,
-											(0, _extends3['default'])({}, itemProps, { extra: childrenExtra }),
-											childrenColumn.title
-										);
-									})
-								);
-							} else {
-								return _react2['default'].createElement(
-									_Easy3wMList2['default'],
-									listProps,
-									_react2['default'].createElement(
-										Item,
-										(0, _extends3['default'])({}, itemProps, { extra: extra }),
-										title
-									)
-								);
-							}
-						}),
-						children ? _this.renderEasy3wMGridPage(children) : ''
-					)
-				);
-			});
-		};
-
-		_this.state = {};
-		return _this;
-	}
-
-	Easy3wMGridPage.prototype.componentWillUnmount = function componentWillUnmount() {};
-	// 数据格式化
-
-	// 渲染列表
-
-
-	Easy3wMGridPage.prototype.render = function render() {
-		var _props = this.props,
-		    _props$collapseProps = _props.collapseProps,
-		    collapseProps = _props$collapseProps === undefined ? {} : _props$collapseProps,
-		    _props$emptyProps = _props.emptyProps,
-		    emptyProps = _props$emptyProps === undefined ? {} : _props$emptyProps,
-		    _props$stepperProps = _props.stepperProps,
-		    stepperProps = _props$stepperProps === undefined ? {} : _props$stepperProps,
-		    _props$dataList = _props.dataList,
-		    dataList = _props$dataList === undefined ? [] : _props$dataList,
-		    totalResult = _props.totalResult;
-
-		console.log('totalResult', totalResult);
-		// collapseProps 折叠面板容器参数
-		// panelProps 折叠面板参数
-		// emptyProps 空状态参数
-		// stepperProps 步进器参数
-		// listProps 列表参数
-		// itemProps 列表项参数
-		// columns 字段列表
-		// dataList 列表数据
-		// totalResult 列表记录数量
-		// panelTitle panel标题
-		// panelKey panel唯一标识
-		return _react2['default'].createElement(
-			'div',
-			{ id: 'Easy3wMGridPage' },
-			_react2['default'].createElement(
-				_Easy3wMCollapse2['default'],
-				collapseProps,
-				dataList && dataList.length ? this.renderEasy3wMGridPage(dataList) : // 空状态
-				_react2['default'].createElement(_Easy3wMEmpty2['default'], (0, _extends3['default'])({}, emptyProps, { description: emptyProps.description || '暂无数据' }))
-			)
-		);
-	};
-
-	return Easy3wMGridPage;
+  (0, _inherits3['default'])(Easy3wMGridPage, _Component);
+
+  function Easy3wMGridPage(props) {
+    (0, _classCallCheck3['default'])(this, Easy3wMGridPage);
+
+    var _this = (0, _possibleConstructorReturn3['default'])(this, _Component.call(this, props));
+
+    _initialiseProps.call(_this);
+
+    var collapseFlag = _this.props.collapseFlag;
+
+    _this.state = {
+      // 分页信息 折叠面板形式每页10条，非折叠面板每页1条
+      offset: 1, // 当前分页
+      limit: collapseFlag ? 10 : 1 // 每页条数
+      // paginationInfo: { // 分页
+      //   offset: 1,
+      //   limit: 10,
+      // },
+    };
+    return _this;
+  }
+
+  Easy3wMGridPage.prototype.componentWillUnmount = function componentWillUnmount() {};
+  // --------------------------------------------- 分页 start ---------------------------------------------
+  // 生成分页数字
+
+  // 按钮翻页
+
+  // 触发查询
+
+  // --------------------------------------------- 分页 end -----------------------------------------------
+  // 数据格式化
+
+  // 渲染列表
+
+  // 渲染列表单项
+
+
+  Easy3wMGridPage.prototype.render = function render() {
+    var _this2 = this;
+
+    var _props = this.props,
+        _props$collapseProps = _props.collapseProps,
+        collapseProps = _props$collapseProps === undefined ? {} : _props$collapseProps,
+        _props$emptyProps = _props.emptyProps,
+        emptyProps = _props$emptyProps === undefined ? {} : _props$emptyProps,
+        _props$dataList = _props.dataList,
+        dataList = _props$dataList === undefined ? [] : _props$dataList,
+        collapseFlag = _props.collapseFlag,
+        needPaginationFlag = _props.needPaginationFlag,
+        paginationNumBtnFlag = _props.paginationNumBtnFlag;
+    var totalResult = this.props.totalResult;
+
+    if (totalResult) {
+      // 有总数就使用总数，无总数直接使用数组长度
+    } else if (dataList && dataList.length) {
+      totalResult = dataList.length;
+    }
+    // collapseProps 折叠面板容器参数
+    // panelProps 折叠面板参数
+    // emptyProps 空状态参数
+    // stepperProps 步进器参数
+    // listProps 列表参数
+    // itemProps 列表项参数
+    // columns 字段列表
+    // dataList 列表数据
+    // totalResult 列表记录数量
+    // panelTitle panel标题
+    // panelKey panel唯一标识
+    // collapseFlag 是否折叠面板 true 是 false 否
+    var _state = this.state,
+        offset = _state.offset,
+        limit = _state.limit;
+
+    var intTotalPage = Math.ceil(totalResult / 10);
+    var btn2 = this.touchCreatePageNum(intTotalPage, offset, 2);
+    var btnText2 = typeof btn2 === 'string' ? _react2['default'].createElement(_antdMobileIcons.MoreOutline, null) : btn2;
+    var btn3 = this.touchCreatePageNum(intTotalPage, offset, 3);
+    var btnText3 = typeof btn3 === 'string' ? _react2['default'].createElement(_antdMobileIcons.MoreOutline, null) : btn3;
+    var btn4 = this.touchCreatePageNum(intTotalPage, offset, 4);
+    var btnText4 = typeof btn4 === 'string' ? _react2['default'].createElement(_antdMobileIcons.MoreOutline, null) : btn4;
+    var btn5 = this.touchCreatePageNum(intTotalPage, offset, 5);
+    var btnText5 = typeof btn5 === 'string' ? _react2['default'].createElement(_antdMobileIcons.MoreOutline, null) : btn5;
+    var btn6 = this.touchCreatePageNum(intTotalPage, offset, 6);
+    var btnText6 = typeof btn6 === 'string' ? _react2['default'].createElement(_antdMobileIcons.MoreOutline, null) : btn6;
+    return _react2['default'].createElement(
+      'div',
+      { id: 'Easy3wMGridPage' },
+      dataList && dataList.length ? _react2['default'].createElement(
+        'div',
+        null,
+        collapseFlag ? _react2['default'].createElement(
+          _easy3wmui.Easy3wMCollapse,
+          collapseProps,
+          this.renderEasy3wMGridPage(dataList)
+        ) : _react2['default'].createElement(
+          'div',
+          null,
+          this.renderEasy3wMGridPage(dataList)
+        )
+      ) : // 空状态
+      _react2['default'].createElement(
+        _easy3wmui.Easy3wMCard,
+        null,
+        _react2['default'].createElement(_easy3wmui.Easy3wMEmpty, (0, _extends3['default'])({}, emptyProps, { description: emptyProps.description || '暂无数据' }))
+      ),
+      totalResult && !collapseFlag || collapseFlag && needPaginationFlag && totalResult ? paginationNumBtnFlag ? _react2['default'].createElement(
+        'div',
+        { className: 'easy3wMGridPageStepper' },
+        _react2['default'].createElement(
+          'span',
+          { className: 'emgpsBtn ' + (offset === 1 ? 'emgpsBtnDisable' : ''), onClick: offset === 1 ? function () {} : function () {
+              return _this2.touchChangePage(offset - 1);
+            } },
+          _react2['default'].createElement(_antdMobileIcons.LeftOutline, null)
+        ),
+        _react2['default'].createElement(
+          'span',
+          { className: 'emgpsBtn ' + (offset === 1 ? 'emgpsBtnActive' : ''), onClick: offset === 1 ? function () {} : function () {
+              return _this2.touchChangePage(1);
+            } },
+          '1'
+        ),
+        _react2['default'].createElement(
+          'span',
+          { className: 'emgpsBtn ' + (offset === btn2 ? 'emgpsBtnActive' : '') + ' ' + (btn2 >= intTotalPage ? 'emgpsBtnNo' : ''), onClick: offset === btn2 ? function () {} : function () {
+              return _this2.touchChangePage(btn2);
+            } },
+          btnText2
+        ),
+        _react2['default'].createElement(
+          'span',
+          { className: 'emgpsBtn ' + (offset === btn3 ? 'emgpsBtnActive' : '') + ' ' + (btn3 >= intTotalPage ? 'emgpsBtnNo' : ''), onClick: offset === btn3 ? function () {} : function () {
+              return _this2.touchChangePage(btn3);
+            } },
+          btnText3
+        ),
+        _react2['default'].createElement(
+          'span',
+          { className: 'emgpsBtn ' + (offset === btn4 ? 'emgpsBtnActive' : '') + ' ' + (btn4 >= intTotalPage ? 'emgpsBtnNo' : ''), onClick: offset === btn4 ? function () {} : function () {
+              return _this2.touchChangePage(btn4);
+            } },
+          btnText4
+        ),
+        _react2['default'].createElement(
+          'span',
+          { className: 'emgpsBtn ' + (offset === btn5 ? 'emgpsBtnActive' : '') + ' ' + (btn5 >= intTotalPage || intTotalPage > 999 ? 'emgpsBtnNo' : ''), onClick: offset === btn5 ? function () {} : function () {
+              return _this2.touchChangePage(btn5);
+            } },
+          btnText5
+        ),
+        _react2['default'].createElement(
+          'span',
+          { className: 'emgpsBtn ' + (offset === btn6 ? 'emgpsBtnActive' : '') + ' ' + (btn6 >= intTotalPage || intTotalPage > 999 ? 'emgpsBtnNo' : ''), onClick: offset === btn6 ? function () {} : function () {
+              return _this2.touchChangePage(btn6);
+            } },
+          btnText6
+        ),
+        _react2['default'].createElement(
+          'span',
+          { className: 'emgpsBtn ' + (offset === intTotalPage ? 'emgpsBtnActive' : '') + ' ' + (intTotalPage > 1 ? '' : 'emgpsBtnNo'), onClick: offset === intTotalPage ? function () {} : function () {
+              return _this2.touchChangePage(intTotalPage);
+            } },
+          intTotalPage
+        ),
+        _react2['default'].createElement(
+          'span',
+          { className: 'emgpsBtn ' + (offset === intTotalPage ? 'emgpsBtnDisable' : ''), onClick: offset === intTotalPage ? function () {} : function () {
+              return _this2.touchChangePage(offset + 1);
+            } },
+          _react2['default'].createElement(_antdMobileIcons.RightOutline, null)
+        )
+      ) : _react2['default'].createElement(
+        'div',
+        { className: 'easy3wMGridPageStepper' },
+        _react2['default'].createElement(
+          _button2['default'],
+          { color: 'default', fill: 'none', onClick: function onClick() {
+              return _this2.touchChangePage(offset - 1);
+            }, disabled: offset === 1 },
+          _react2['default'].createElement(_antdMobileIcons.LeftOutline, null)
+        ),
+        _react2['default'].createElement(
+          'span',
+          null,
+          offset,
+          '/',
+          Math.ceil(totalResult / limit),
+          '  \u5171',
+          totalResult,
+          '\u6761'
+        ),
+        _react2['default'].createElement(
+          _button2['default'],
+          { color: 'default', fill: 'none', onClick: function onClick() {
+              return _this2.touchChangePage(offset + 1);
+            }, disabled: offset === Math.ceil(totalResult / limit) },
+          _react2['default'].createElement(_antdMobileIcons.RightOutline, null)
+        )
+      ) : ''
+    );
+  };
+
+  return Easy3wMGridPage;
 }(_react.Component);
 
+var _initialiseProps = function _initialiseProps() {
+  var _this3 = this;
+
+  this.touchCreatePageNum = function (intTotalPage, offset, index) {
+    var btnNum = intTotalPage > 999 ? 5 : 7;
+    /*
+      intTotalPage 总页数
+      offset 当前分页
+      btnNum 按钮数量
+        intTotalPage <= btnNum
+      <,1,2,3,4,5,6,7,> 删除6，7
+        intTotalPage > btnNum
+      offset - 3 <= 1
+      <,1,2,3,4,5,+5,intTotalPage,> 删除第三及倒数第三个按钮
+        intTotalPage > btnNum
+      offset - 3 > 1 &&  offset + 3 < intTotalPage
+      <,1,-5,6,7,8,+5,intTotalPage,> 删除第三及倒数第三个按钮
+        intTotalPage > btnNum
+      offset - 3 > 1 && offset + 3 >= intTotalPage
+      <,1,-5,6,7,8,9,intTotalPage,> 删除第三及倒数第三个按钮
+    */
+    if (intTotalPage <= btnNum) {
+      return index;
+    } else if (btnNum === 5 && intTotalPage > btnNum && offset - 2 < 1) {
+      if (index === 4) {
+        return '+5';
+      } else {
+        return index;
+      }
+    } else if (btnNum === 5 && intTotalPage > btnNum && offset - 2 >= 1 && offset + 2 <= intTotalPage) {
+      if (index === 4) {
+        return '+5';
+      } else if (index === 2) {
+        return '-5';
+      } else {
+        return offset;
+      }
+    } else if (btnNum === 5 && offset - 2 >= 1 && offset + 2 > intTotalPage) {
+      if (index === 2) {
+        // <1,-5,6,7,8>
+        return '-5';
+      } else if (index === 3) {
+        return intTotalPage - 2;
+      } else if (index === 4) {
+        return intTotalPage - 1;
+      }
+    } else if (btnNum === 7 && intTotalPage > btnNum && offset - 3 <= 1) {
+      if (index === 6) {
+        // 1,2,3,4,5,+5,intTotalPage
+        return '+5';
+      } else {
+        return index;
+      }
+    } else if (btnNum === 7 && intTotalPage > btnNum && offset - 3 > 1 && offset + 3 < intTotalPage) {
+      if (index === 2) {
+        return '-5';
+      } else if (index === 3) {
+        return offset - 1;
+      } else if (index === 4) {
+        return offset;
+      } else if (index === 5) {
+        return offset + 1;
+      } else if (index === 6) {
+        return '+5';
+      }
+    } else if (btnNum === 7 && intTotalPage > btnNum && offset - 3 > 1 && offset + 3 >= intTotalPage) {
+      if (index === 2) {
+        return '-5';
+      } else if (index === 3) {
+        return intTotalPage - 4;
+      } else if (index === 4) {
+        return intTotalPage - 3;
+      } else if (index === 5) {
+        return intTotalPage - 2;
+      } else if (index === 6) {
+        return intTotalPage - 1;
+      }
+    }
+  };
+
+  this.touchChangePage = function (num) {
+    var totalResult = _this3.props.totalResult;
+
+    var intTotalPage = Math.ceil(totalResult / 10);
+    // const intTotalPage = 99999;
+    var offset = _this3.state.offset;
+
+    if (typeof num === 'string') {
+      offset += Number(num);
+    } else {
+      offset = num;
+    }
+    if (offset < 1) {
+      offset = 1;
+    } else if (offset > intTotalPage) {
+      offset = intTotalPage;
+    }
+    _this3.setState({
+      offset: offset // 当前页
+    }, _this3.touchSearch);
+  };
+
+  this.touchSearch = function () {
+    var handleSearch = _this3.props.handleSearch;
+    var _state2 = _this3.state,
+        offset = _state2.offset,
+        limit = _state2.limit;
+
+    if (handleSearch && typeof handleSearch === 'function') {
+      handleSearch({ offset: offset, limit: limit });
+    }
+  };
+
+  this.touchFormatData = function (dataItem, columnItem) {
+    var key = columnItem.key,
+        dataIndex = columnItem.dataIndex,
+        numberFormat = columnItem.numberFormat;
+
+    var fieldId = dataIndex || key;
+    var value = dataItem[fieldId];
+    if (value || value === false || value === 0) {
+      // value值存在  Boolean()值为false的7个特殊值   undefined， null， false， NaN， ''， 0， -0
+      if (numberFormat) {
+        var thousandthValue = (0, _numeral2['default'])(dataItem[fieldId]).format('0,0.00');
+        value = thousandthValue;
+      }
+      return value;
+    } else {
+      // value值不存在
+      return '';
+    }
+  };
+
+  this.renderEasy3wMGridPage = function (dataList) {
+    var offset = _this3.state.offset;
+    var _props2 = _this3.props,
+        _props2$panelProps = _props2.panelProps,
+        panelProps = _props2$panelProps === undefined ? {} : _props2$panelProps,
+        panelTitle = _props2.panelTitle,
+        panelKey = _props2.panelKey,
+        collapseFlag = _props2.collapseFlag;
+    // collapseProps 折叠面板容器参数
+    // panelProps 折叠面板参数
+    // emptyProps 空状态参数
+    // stepperProps 步进器参数
+    // listProps 列表参数
+    // itemProps 列表项参数
+    // columns 字段列表
+    // dataList 列表数据
+    // totalResult 列表记录数量
+    // panelTitle panel标题 数据类型：string或function
+    // panelKey panel唯一标识 数据类型：string或function
+    // expandedRowRender 可扩展行
+
+    if (collapseFlag) {
+      return dataList.map(function (item, index) {
+        var title = typeof panelTitle === 'function' ? panelTitle(item, index) : item[panelTitle] || '';
+        var key = typeof panelKey === 'function' ? panelKey(item, index) : item[panelKey] || index;
+        return (// 折叠面板
+          _react2['default'].createElement(
+            Panel,
+            (0, _extends3['default'])({}, panelProps, { title: title, key: key }),
+            _this3.renderEasy3wMGridPageItem(item, index)
+          )
+        );
+      });
+    } else {
+      return _this3.renderEasy3wMGridPageItem(dataList[offset - 1], offset - 1);
+    }
+  };
+
+  this.renderEasy3wMGridPageItem = function (dataItem, index) {
+    var children = dataItem.children;
+    var _props3 = _this3.props,
+        _props3$listProps = _props3.listProps,
+        listProps = _props3$listProps === undefined ? {} : _props3$listProps,
+        _props3$itemProps = _props3.itemProps,
+        itemProps = _props3$itemProps === undefined ? {} : _props3$itemProps,
+        _props3$columns = _props3.columns,
+        columns = _props3$columns === undefined ? [] : _props3$columns,
+        _props3$expandedRowRe = _props3.expandedRowRender,
+        expandedRowRender = _props3$expandedRowRe === undefined ? function () {} : _props3$expandedRowRe;
+    // collapseProps 折叠面板容器参数
+    // panelProps 折叠面板参数
+    // emptyProps 空状态参数
+    // stepperProps 步进器参数
+    // listProps 列表参数
+    // itemProps 列表项参数
+    // columns 字段列表
+    // dataList 列表数据
+    // totalResult 列表记录数量
+    // panelTitle panel标题
+    // panelKey panel唯一标识
+    // expandedRowRender 可扩展行
+
+    return (// 单项数据
+      _react2['default'].createElement(
+        _easy3wmui.Easy3wMList,
+        listProps,
+        columns.map(function (column) {
+          if (column.children) {
+            return _react2['default'].createElement(
+              _easy3wmui.Easy3wMList,
+              (0, _extends3['default'])({ mode: 'card' }, listProps, { header: column.title }),
+              column.children.map(function (childrenColumn) {
+                var type = childrenColumn.type;
+
+                var childrenFieldId = childrenColumn.dataIndex || childrenColumn.key;
+                var childrenExtra = childrenColumn.render ? childrenColumn.render(dataItem[childrenFieldId], dataItem, index) : _this3.touchFormatData(dataItem, childrenColumn);
+                if (type === 'longText') {
+                  return _react2['default'].createElement(Item, (0, _extends3['default'])({ className: 'e3wmLongText' }, itemProps, { title: childrenColumn.title, description: childrenExtra }));
+                } else {
+                  return _react2['default'].createElement(Item, (0, _extends3['default'])({}, itemProps, { title: childrenColumn.title, extra: childrenExtra }));
+                }
+              })
+            );
+          } else {
+            var title = column.title,
+                key = column.key,
+                dataIndex = column.dataIndex,
+                type = column.type;
+
+            var fieldId = dataIndex || key;
+            var extra = column.render ? column.render(dataItem[fieldId], dataItem, index) : _this3.touchFormatData(dataItem, column);
+            if (type === 'longText') {
+              return _react2['default'].createElement(Item, (0, _extends3['default'])({ className: 'e3wmLongText' }, itemProps, { title: title, description: extra }));
+            } else {
+              return _react2['default'].createElement(Item, (0, _extends3['default'])({}, itemProps, { title: title, extra: extra }));
+            }
+          }
+        }),
+        children ? _this3.renderEasy3wMGridPage(children) : '',
+        expandedRowRender ? expandedRowRender(dataItem) : ''
+      )
+    );
+  };
+};
+
 exports['default'] = Easy3wMGridPage;
 module.exports = exports['default'];

package/lib/Easy3wMGridPage/index.less

@@ -1,8 +1,7 @@
 #Easy3wMGridPage {
-	.adm-list-item {
-		padding-left: 0;
-		.adm-list-item-content {
-			padding-right: 0;
-		}
-	}
+  .easy3wMGridPageStepper {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
 }