easy3wmui 0.0.10 → 0.0.13

package/assets/index.css

@@ -164,6 +164,15 @@
   cursor: pointer;
   color: #999;
 }
+#Easy3wMGridPage .easy3wMGridPageStepper {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  -ms-flex-align: end;
+      align-items: flex-end;
+  padding: 0 12px;
+}
 #Easy3wMLogin .errorMsgReal {
   background: #fff1f0;
   border: 1px solid #ffa39e;

package/assets/mGridPage.css

@@ -0,0 +1,9 @@
+#Easy3wMGridPage .easy3wMGridPageStepper {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  -ms-flex-align: end;
+      align-items: flex-end;
+  padding: 0 12px;
+}

package/lib/Easy3wMGridPage/index.js

@@ -22,6 +22,10 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _numeral = require('numeral');
+
+var _numeral2 = _interopRequireDefault(_numeral);
+
 var _Easy3wMCollapse = require('../Easy3wMCollapse');
 
 var _Easy3wMCollapse2 = _interopRequireDefault(_Easy3wMCollapse);
@@ -38,6 +42,10 @@ var _Easy3wMList = require('../Easy3wMList');
 
 var _Easy3wMList2 = _interopRequireDefault(_Easy3wMList);
 
+var _Easy3wMCard = require('../Easy3wMCard');
+
+var _Easy3wMCard2 = _interopRequireDefault(_Easy3wMCard);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
 var Panel = _Easy3wMCollapse2['default'].Panel;
@@ -51,6 +59,12 @@ var Easy3wMGridPage = function (_Component) {
 
 		var _this = (0, _possibleConstructorReturn3['default'])(this, _Component.call(this, props));
 
+		_this.onChange = function (current) {
+			_this.setState({
+				currentIndex: current
+			});
+		};
+
 		_this.touchFormatData = function (dataItem, columnItem) {
 			var key = columnItem.key,
 			    dataIndex = columnItem.dataIndex,
@@ -61,7 +75,7 @@ var Easy3wMGridPage = function (_Component) {
 			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');
+					var thousandthValue = (0, _numeral2['default'])(dataItem[fieldId]).format('0,0.00');
 					value = thousandthValue;
 				}
 				return value;
@@ -72,6 +86,7 @@ var Easy3wMGridPage = function (_Component) {
 		};
 
 		_this.renderEasy3wMGridPage = function (dataList) {
+			var currentIndex = _this.state.currentIndex;
 			var _this$props = _this.props,
 			    _this$props$panelProp = _this$props.panelProps,
 			    panelProps = _this$props$panelProp === undefined ? {} : _this$props$panelProp,
@@ -82,7 +97,10 @@ var Easy3wMGridPage = function (_Component) {
 			    _this$props$columns = _this$props.columns,
 			    columns = _this$props$columns === undefined ? [] : _this$props$columns,
 			    panelTitle = _this$props.panelTitle,
-			    panelKey = _this$props.panelKey;
+			    panelKey = _this$props.panelKey,
+			    _this$props$expandedR = _this$props.expandedRowRender,
+			    expandedRowRender = _this$props$expandedR === undefined ? function () {} : _this$props$expandedR,
+			    collapseFlag = _this$props.collapseFlag;
 			// collapseProps 折叠面板容器参数
 			// panelProps 折叠面板参数
 			// emptyProps 空状态参数
@@ -94,62 +112,105 @@ var Easy3wMGridPage = function (_Component) {
 			// totalResult 列表记录数量
 			// panelTitle panel标题
 			// panelKey panel唯一标识
+			// expandedRowRender 可扩展行
 
-			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 }),
+			if (collapseFlag) {
+				return dataList.map(function (item, index) {
+					return (// 折叠面板
 						_react2['default'].createElement(
-							_Easy3wMList2['default'],
-							listProps,
-							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'])({ mode: 'card' }, 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);
-											return _react2['default'].createElement(
-												Item,
-												(0, _extends3['default'])({}, itemProps, { extra: childrenExtra }),
-												childrenColumn.title
-											);
-										})
-									);
-								} else {
+							Panel,
+							(0, _extends3['default'])({}, panelProps, { title: item[panelTitle] || '', key: item[panelKey] || index }),
+							_this.renderEasy3wMGridPageItem(item)
+						)
+					);
+				});
+			} else {
+				return _this.renderEasy3wMGridPageItem(dataList[currentIndex - 1]);
+			}
+		};
+
+		_this.renderEasy3wMGridPageItem = function (dataItem) {
+			var children = dataItem.children;
+			var _this$props2 = _this.props,
+			    _this$props2$panelPro = _this$props2.panelProps,
+			    panelProps = _this$props2$panelPro === undefined ? {} : _this$props2$panelPro,
+			    _this$props2$listProp = _this$props2.listProps,
+			    listProps = _this$props2$listProp === undefined ? {} : _this$props2$listProp,
+			    _this$props2$itemProp = _this$props2.itemProps,
+			    itemProps = _this$props2$itemProp === undefined ? {} : _this$props2$itemProp,
+			    _this$props2$columns = _this$props2.columns,
+			    columns = _this$props2$columns === undefined ? [] : _this$props2$columns,
+			    panelTitle = _this$props2.panelTitle,
+			    panelKey = _this$props2.panelKey,
+			    _this$props2$expanded = _this$props2.expandedRowRender,
+			    expandedRowRender = _this$props2$expanded === undefined ? function () {} : _this$props2$expanded;
+			// collapseProps 折叠面板容器参数
+			// panelProps 折叠面板参数
+			// emptyProps 空状态参数
+			// stepperProps 步进器参数
+			// listProps 列表参数
+			// itemProps 列表项参数
+			// columns 字段列表
+			// dataList 列表数据
+			// totalResult 列表记录数量
+			// panelTitle panel标题
+			// panelKey panel唯一标识
+			// expandedRowRender 可扩展行
+
+			return (// 单项数据
+				_react2['default'].createElement(
+					_Easy3wMList2['default'],
+					listProps,
+					columns.map(function (column) {
+						var title = column.title,
+						    key = column.key,
+						    dataIndex = column.dataIndex;
+
+						var fieldId = dataIndex || key;
+						var extra = column.render ? column.render(dataItem[fieldId], dataItem) : _this.touchFormatData(dataItem, column);
+						if (column.children) {
+							return _react2['default'].createElement(
+								_Easy3wMList2['default'],
+								(0, _extends3['default'])({ mode: 'card' }, listProps, { header: title }),
+								column.children.map(function (childrenColumn) {
+									var childrenFieldId = childrenColumn.dataIndex || childrenColumn.key;
+									var childrenExtra = childrenColumn.render ? childrenColumn.render(dataItem[childrenFieldId], dataItem) : _this.touchFormatData(dataItem, childrenColumn);
 									return _react2['default'].createElement(
 										Item,
-										(0, _extends3['default'])({}, itemProps, { extra: extra }),
-										title
+										(0, _extends3['default'])({}, itemProps, { extra: childrenExtra }),
+										childrenColumn.title
 									);
-								}
-							}),
-							children ? _this.renderEasy3wMGridPage(children) : ''
-						)
-					)
-				);
-			});
+								})
+							);
+						} else {
+							return _react2['default'].createElement(
+								Item,
+								(0, _extends3['default'])({}, itemProps, { extra: extra }),
+								title
+							);
+						}
+					}),
+					children ? _this.renderEasy3wMGridPage(children) : '',
+					expandedRowRender ? expandedRowRender(dataItem) : ''
+				)
+			);
 		};
 
-		_this.state = {};
+		_this.state = {
+			currentIndex: 1 // 当前显示内容数据的索引
+		};
 		return _this;
 	}
 
 	Easy3wMGridPage.prototype.componentWillUnmount = function componentWillUnmount() {};
+	// 切换行数据
+
 	// 数据格式化
 
 	// 渲染列表
 
+	// 渲染列表单项
+
 
 	Easy3wMGridPage.prototype.render = function render() {
 		var _props = this.props,
@@ -157,13 +218,14 @@ var Easy3wMGridPage = function (_Component) {
 		    collapseProps = _props$collapseProps === undefined ? {} : _props$collapseProps,
 		    _props$emptyProps = _props.emptyProps,
 		    emptyProps = _props$emptyProps === undefined ? {} : _props$emptyProps,
+		    _props$panelProps = _props.panelProps,
+		    panelProps = _props$panelProps === undefined ? {} : _props$panelProps,
 		    _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);
+		    totalResult = _props.totalResult,
+		    collapseFlag = _props.collapseFlag;
 		// collapseProps 折叠面板容器参数
 		// panelProps 折叠面板参数
 		// emptyProps 空状态参数
@@ -175,15 +237,44 @@ var Easy3wMGridPage = function (_Component) {
 		// totalResult 列表记录数量
 		// panelTitle panel标题
 		// panelKey panel唯一标识
+		// collapseFlag 是否折叠面板 true 是 false 否
+
+		var currentIndex = this.state.currentIndex;
+
 		return _react2['default'].createElement(
 			'div',
 			{ id: 'Easy3wMGridPage' },
+			dataList && dataList.length ? _react2['default'].createElement(
+				'div',
+				null,
+				collapseFlag ? _react2['default'].createElement(
+					_Easy3wMCollapse2['default'],
+					collapseProps,
+					this.renderEasy3wMGridPage(dataList)
+				) : _react2['default'].createElement(
+					'div',
+					null,
+					this.renderEasy3wMGridPage(dataList)
+				)
+			) : // 空状态
 			_react2['default'].createElement(
-				_Easy3wMCollapse2['default'],
-				collapseProps,
-				dataList && dataList.length ? this.renderEasy3wMGridPage(dataList) : // 空状态
+				_Easy3wMCard2['default'],
+				null,
 				_react2['default'].createElement(_Easy3wMEmpty2['default'], (0, _extends3['default'])({}, emptyProps, { description: emptyProps.description || '暂无数据' }))
-			)
+			),
+			dataList && dataList.length && !collapseFlag ? _react2['default'].createElement(
+				_Easy3wMCard2['default'],
+				null,
+				_react2['default'].createElement(
+					'div',
+					{ className: 'easy3wMGridPageStepper' },
+					_react2['default'].createElement(
+						'span',
+						null,
+						_react2['default'].createElement(_Easy3wMStepper2['default'], (0, _extends3['default'])({}, stepperProps, { step: 1, digits: 0, min: 1, max: dataList.length, onChange: this.onChange, value: currentIndex }))
+					)
+				)
+			) : null
 		);
 	};
 

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;
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy3wmui",
-  "version": "0.0.10",
+  "version": "0.0.13",
   "description": "easy3wmui components for react",
   "keywords": [
     "react",