feat: add container block

react-materials/components/container/.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[makefile]
+indent_style = tab
+indent_size = 4

react-materials/components/container/.eslintignore

@@ -0,0 +1,12 @@
+# 忽略目录
+build/
+tests/
+demo/
+lib/
+
+# node 覆盖率文件
+coverage/
+
+# 忽略文件
+**/*-min.js
+**/*.min.js

react-materials/components/container/.gitignore

@@ -0,0 +1,21 @@
+*.swp
+*.dia~
+.idea/
+.DS_Store
+
+npm-debug.log
+yarn-error.log
+node_modules/
+tmp/
+
+# 这是编译后的代码, 用于提交到 tnpm, git 仓库不需要此份代码
+lib/
+# 提供 start dev 的环境依赖
+demo/index.js
+# happypack 缓存
+.happypack
+
+# fusion 配置平台相关
+theme/build/
+theme/deps.json
+theme/index.html

react-materials/components/container/README.md

@@ -0,0 +1,16 @@
+---
+title: Container
+category: Components
+chinese: 区块容器组件
+---
+
+## 参数（props）
+
+| 参数名    | 说明           | 必填  | 类型             | 默认值 | 备注 |
+| --------- | -------------- | ----- | ---------------- | ------ | ---- |
+| className | 样式名         | false | string           | -      |      |
+| style     | 样式           | false | object           | {}     |      |
+| loading   | 加载时 loading | 否    | boolean          | false  |      |
+| error     | 数据错误       | 否    | 任何数据类型的值 | false  |      |
+| empty     | 数据为空       | 否    | 任何数据类型的值 | false  |      |
+| title     | 标题           | 否    | string           | -      |      |  |

react-materials/components/container/demo/all.md

@@ -0,0 +1,36 @@
+---
+title: DEMO
+order: 2
+importStyle: true
+---
+
+基本展示
+
+---
+
+````jsx
+import React, {Component} from 'react';
+import ReactDOM from 'react-dom';
+import { Button } from '@icedesign/base';
+import IceContainer from '@icedesign/container';
+
+
+class App extends Component {
+
+  state = {
+
+  }
+
+  render() {
+    return (
+      <div style={{ padding: '50px', background: '#ddd'}}>
+        <IceContainer>Hello World!</IceContainer>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render((
+  <App />
+), mountNode);
+````

react-materials/components/container/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@icedesign/container",
+  "version": "0.1.3",
+  "description": "",
+  "main": "lib/index.js",
+  "files": [
+    "lib/",
+    "demo/"
+  ],
+  "scripts": {
+    "start": "ice-devtools start",
+    "build": "ice-devtools build",
+    "prepublish": "npm run build"
+  },
+  "author": {
+    "name": "ICE Team",
+    "email": "[email protected]"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alibaba/ice/tree/master/react-materials/components/container"
+  },
+  "license": "MIT",
+  "keywords": [
+    "ice",
+    "ice-component"
+  ],
+  "dependencies": {
+    "@icedesign/base": "^0.2.0",
+    "prop-types": "^15.5.8"
+  },
+  "typings": "lib/index.d.ts",
+  "devDependencies": {
+    "ice-devtools": "^1.0.6"
+  }
+}

react-materials/components/container/src/IceContainer.jsx

@@ -0,0 +1,153 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Loading } from '@icedesign/base';
+import './main.scss';
+
+export default class Container extends Component {
+  static displayName = 'Container';
+
+  static propTypes = {
+    /**
+     * 加载的loading
+     */
+    loading: PropTypes.bool,
+    /**
+     * 数据错误
+     */
+    error: PropTypes.any,
+    /**
+     * 数据为空
+     */
+    empty: PropTypes.any,
+    /**
+     * 样式
+     */
+    style: PropTypes.object,
+    /**
+     * 样式名
+     */
+    className: PropTypes.string,
+    /**
+     * 标题
+     */
+    title: PropTypes.string,
+  };
+
+  static defaultProps = {
+    loading: false,
+    error: false,
+    empty: false,
+    style: {},
+    className: '',
+    title: '',
+  };
+
+  renderChildren = () => {
+    const { error, empty, children } = this.props;
+
+    if (error) {
+      return (
+        <div
+          style={{
+            padding: '80px 0',
+            textAlign: 'center',
+          }}
+        >
+          <img
+            style={{
+              width: '108px',
+            }}
+            src="https://img.alicdn.com/tfs/TB1KJkbRFXXXXbRXVXXXXXXXXXX-216-218.png"
+            alt="数据加载错误"
+          />
+          <p
+            style={{
+              width: '80%',
+              margin: '30px auto 0',
+              color: '#999',
+              textAlign: 'center',
+            }}
+          >
+            {error}
+          </p>
+        </div>
+      );
+    } else if (empty) {
+      return (
+        <div
+          style={{
+            padding: '80px 0',
+            textAlign: 'center',
+          }}
+        >
+          <img
+            style={{
+              width: '97px',
+            }}
+            src="https://img.alicdn.com/tfs/TB1df3oRFXXXXbEXFXXXXXXXXXX-194-220.png"
+            alt="数据为空"
+          />
+          <p
+            style={{
+              width: '80%',
+              margin: '30px auto 0',
+              color: '#999',
+              textAlign: 'center',
+            }}
+          >
+            {empty}
+          </p>
+        </div>
+      );
+    }
+    return children;
+  };
+
+  render() {
+    const { loading, children, title, style, className, ...others } = this.props;
+
+    const containerStyle = {
+      backgroundColor: '#fff',
+      borderRadius: '6px',
+      padding: '20px',
+      marginBottom: '20px',
+      ...style,
+    };
+
+    if (loading) {
+      return (
+        <Loading
+          shape="fusion-reactor"
+          color="#66AAFF"
+          style={{ width: '100%' }}
+        >
+          <div className={`container-block ${className}`} style={containerStyle}>
+            {children}
+          </div>
+        </Loading>
+      );
+    }
+
+    return (
+      <div className={`container-block ${className}`} style={containerStyle} {...others}>
+        {title && (
+          <h4
+            style={{
+              height: '16px',
+              lineHeight: '16px',
+              fontSize: '16px',
+              color: '#333',
+              fontWeight: 'bold',
+              margin: 0,
+              padding: 0,
+              marginBottom: '20px',
+            }}
+          >
+            {title}
+          </h4>
+        )}
+        {this.renderChildren()}
+      </div>
+    );
+  }
+}

react-materials/components/container/src/index.js

@@ -0,0 +1,3 @@
+import IceContainer from './IceContainer';
+
+export default IceContainer;

react-materials/components/container/src/main.scss

@@ -0,0 +1,3 @@
+.container-block {
+  overflow: hidden;
+}