add notice icon demo

gulpfile.js

@@ -4,7 +4,6 @@ const less = require('gulp-less');
 const cleanCSS = require('gulp-clean-css');
 const ejs = require('gulp-ejs');
 const rename = require('gulp-rename');
-const replace = require('gulp-replace');
 const fs = require('fs-extra');
 const LessPluginAutoPrefix = require('less-plugin-autoprefix');
 const LessPluginInlineUrls = require('less-plugin-inline-urls');

index.js

@@ -1,63 +1,3 @@
-// window.UXCORE = {
-//   'uxcore-calendar': require('uxcore-calendar'),
-//   'uxcore-button': require('uxcore-button'),
-//   'uxcore-dialog': require('uxcore-dialog'),
-//   'uxcore-select2': require('uxcore-select2'),
-//   'uxcore-pagination': require('uxcore-pagination'),
-//   'uxcore-tooltip': require('uxcore-tooltip'),
-//   'uxcore-tabs': require('uxcore-tabs'),
-//   'uxcore-form': require('uxcore-form'),
-//   'uxcore-form-field': require('uxcore-form-field'),
-//   'uxcore-grid': require('uxcore-grid'),
-//   'uxcore-table': require('uxcore-table'),
-//   'uxcore-dropdown': require('uxcore-dropdown'),
-//   'uxcore-mention': require('uxcore-mention'),
-//   'uxcore-tree': require('uxcore-tree'),
-//   'uxcore-transfer': require('uxcore-transfer'),
-//   'uxcore-popover': require('uxcore-popover'),
-//   'uxcore-collapse': require('uxcore-collapse'),
-//   'uxcore-progress': require('uxcore-progress'),
-//   'uxcore-steps': require('uxcore-steps'),
-//   'uxcore-uploader': require('uxcore-uploader'),
-//   'uxcore-menu': require('uxcore-menu'),
-//   'uxcore-matrix': require('uxcore-matrix'),
-//   'uxcore-layout': require('uxcore-layout'),
-//   'uxcore-crumb': require('uxcore-crumb'),
-//   'uxcore-totop': require('uxcore-totop'),
-//   'uxcore-checkbox-group': require('uxcore-checkbox-group'),
-//   'uxcore-radiogroup': require('uxcore-radiogroup'),
-//   'uxcore-alert': require('uxcore-alert'),
-//   'uxcore-message': require('uxcore-message'),
-//   'uxcore-validator': require('uxcore-validator'),
-//   'uxcore-pickable': require('uxcore-pickable'),
-//   'uxcore-rate': require('uxcore-rate'),
-//   'uxcore-switch': require('uxcore-switch'),
-//   'uxcore-badge': require('uxcore-badge'),
-//   'uxcore-carousel': require('uxcore-carousel'),
-//   'uxcore-tree-select': require('uxcore-tree-select'),
-//   'uxcore-load-more': require('uxcore-load-more'),
-//   'uxcore-multi-select': require('uxcore-multi-select'),
-//   'uxcore-tinymce': require('uxcore-tinymce'),
-//   'uxcore-album': require('uxcore-album'),
-//   'uxcore-cascade-select': require('uxcore-cascade-select'),
-//   'uxcore-animate': require('uxcore-animate'),
-//   'uxcore-tag': require('uxcore-tag'),
-//   'uxcore-empty-data': require('uxcore-empty-data'),
-//   'uxcore-timeline': require('uxcore-timeline'),
-//   'uxcore-float-nav': require('uxcore-float-nav'),
-//   'uxcore-cascade-multi-select': require('uxcore-cascade-multi-select'),
-//   'uxcore-icon': require('uxcore-icon'),
-//   'uxcore-pickable-form-field': require('uxcore-pickable-form-field'),
-//   'uxcore-title': require('uxcore-title'),
-//   'uxcore-button-group': require('uxcore-button-group'),
-//   'uxcore-cell-field': require('uxcore-cell-field'),
-//   'uxcore-formatter': require('uxcore-formatter'),
-//   'uxcore-time-picker': require('uxcore-time-picker'),
-//   classnames: require('classnames'),
-//   'object-assign': require('object-assign'),
-//   'react-clipboard.js': require('react-clipboard.js').default,
-// };
-
 import UXCore from 'uxcore';
 import to from 'to-case';
 import classnames from 'classnames';
@@ -70,8 +10,6 @@ const pkgMap = {
   'react-clipboard.js': clipboard,
 };
 
-// window.Uxcore = uxcore;
-
 window.require = (key) => {
   let component = key;
   if (key === 'uxcore') {

package.json

@@ -18,6 +18,16 @@
     "coding": "npm run clean && webpack --config webpack.config.min.js && gulp less && nico build -C nico.production.js && gulp coding",
     "postinstall": "node ./postinstall.js"
   },
+  "keywords": [
+    "react",
+    "react-component",
+    "ui",
+    "framework",
+    "controls",
+    "element",
+    "css",
+    "less"
+  ],
   "devDependencies": {
     "autoprefixer": "~6.3.7",
     "autoprefixer-loader": "~3.2.0",
@@ -66,26 +76,17 @@
     "react-clipboard.js": "^1.0.1",
     "react-color": "2.2.2",
     "react-dom": "15.x",
+    "react-mixin": "^4.0.0",
     "readable-stream": "^2.0.2",
     "rimraf": "^2.4.3",
     "socket.io": "~1.3.6",
     "style-loader": "~0.13.0",
     "to-case": "^2.0.0",
     "url-loader": "~0.5.6",
-    "uxcore": "^0.19.9",
+    "uxcore": "^0.21.0",
     "vinyl-fs": "^2.2.1",
     "webpack": "~1.13.0",
     "webpack-dev-middleware": "^1.6.0",
     "wrap-promise": "^1.0.1"
-  },
-  "keywords": [
-    "react",
-    "react-component",
-    "ui",
-    "framework",
-    "controls",
-    "element",
-    "css",
-    "less"
-  ]
+  }
 }

site/components/card/demo/advanced.md

@@ -0,0 +1,86 @@
+# 高级使用
+
+- order: 1
+
+---
+
+````jsx
+import classnames from 'classnames';;
+import { Card, Icon, Form } from 'uxcore';
+
+const { SwitchFormField, FormRow } = Form;
+
+class Demo extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: {
+        showCollapseIcon: false,
+        showIcon: false,
+        hasContentPadding: true,
+        showTip: false,
+      }
+    };
+  }
+
+  render() {
+    const { showCollapseIcon, showIcon, hasContentPadding, showTip } = this.state.value;
+    const cardProps = {
+      title: 'Title Title Title Title Title',
+      tip: showTip ? '这是一个提示' : '',
+      icon: showIcon ? <Icon usei name="shangchuan" /> : null,
+      extra: (
+        <a>
+        自定义操作
+        </a>
+      ),
+      className: 'card-demo',
+      showCollapseIcon,
+      contentPaddingSize: hasContentPadding ? 'middle' : 'none',
+    };
+    return (
+      <div>
+        <Form className="card-demo-form" jsxvalues={this.state.value} jsxonChange={(value) => { this.setState({ value }) }}>
+          <FormRow>
+            <SwitchFormField jsxname="showCollapseIcon" jsxlabel="开启折叠展开" />
+            <SwitchFormField jsxname="showIcon" jsxlabel="显示图标" />
+          </FormRow>
+          <FormRow>
+            <SwitchFormField jsxname="hasContentPadding" jsxlabel="包含内容边距" />
+            <SwitchFormField jsxname="showTip" jsxlabel="显示提示信息" />
+          </FormRow>
+        </Form>
+        <Card
+          {...cardProps}
+        >
+          <p>Card content</p>
+          <p>Card content</p>
+          <p>Card content</p>
+        </Card>
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <Demo />
+, document.getElementById('components-card-demo-advanced'));
+
+````
+
+````css
+.code-box-demo {
+  background: rgba(31, 56, 88, 0.3);
+}
+
+.card-demo {
+  width: 300px;
+}
+
+.card-demo-form {
+  width: 500px;
+}
+
+````
+

site/components/card/demo/basic.md

@@ -0,0 +1,63 @@
+# 基本使用
+
+- order: 0
+
+---
+
+````jsx
+import classnames from 'classnames';;
+import { Card, Icon } from 'uxcore';
+
+class Demo extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  render() {
+    const cardProps = {
+      title: 'Title Title Title Title Title',
+      tip: '这是一个提示',
+      icon: <Icon usei name="shangchuan" />,
+      extra: (
+        <a>
+        自定义操作
+        </a>
+      ),
+      className: 'card-demo',
+      showCollapseIcon: true,
+      contentPaddingSize: 'none',
+    };
+    return (
+      <Card
+        title="Card title"
+        extra={<a href="#">More</a>}
+        className="card-demo"
+      >
+        <p>Card content</p>
+        <p>Card content</p>
+        <p>Card content</p>
+      </Card>
+    );
+  }
+}
+
+ReactDOM.render(
+  <Demo />
+, document.getElementById('components-card-demo-basic'));
+
+````
+
+````css
+.code-box-demo {
+  background: rgba(31, 56, 88, 0.3);
+}
+
+.card-demo {
+  width: 300px;
+}
+
+````
+

site/components/card/index.md

@@ -0,0 +1,22 @@
+# Card
+
+- category: Components
+- chinese: 卡片
+- subtype: Presentation
+
+---
+
+## Props
+
+| Name | Type | Required | Default | Comments |
+|---|---|---|---|---|
+| prefixCls | String | No | - | 类名前缀 |
+| className | String | No | - | 额外类名 |
+| icon | React Element | No | - | 头部图标 |
+| title | React Element | No | - | 头部标题 |
+| tip | React Element | No | - | 头部提示 |
+| extra | React Element | No | - | 头部右侧额外区域，通用用于放置动作 |
+| children | React Element | No | - | 卡片内容 |
+| showCollapseIcon | Bool | No | false | 显示折叠按钮 |
+| onCollapseChange | func(collapse) | No | noop | 折叠状态发生改变时的回调，参数为是否被折叠 |
+| contentPaddingSize | string | No | 'middle' | 内容区间距，枚举值：middle/none |

site/components/icon/demo/basic.md

@@ -88,6 +88,7 @@ const icons = [
   'bottom',
   'left_double',
   'right_double',
+  'shaixuan',
   'xiaolian-line',
   'kulian-full',
   'caozuo-xingji-line',
@@ -117,6 +118,7 @@ const icons = [
   'zidingyilie',
   'suoxiao',
   'fangda',
+  'fangwen',
   'fanyi',
   'fanyi-full',
   'option-yixuan-gou',
@@ -150,6 +152,22 @@ const icons = [
   'shanjian-full',
   'zengjia-full',
   'moren',
+  'bianji',
+  'guojihua',
+  'gengduo',
+  'fuli',
+  'nianjia',
+  'xinchouhesuan',
+  'gouwuche',
+  'fuhao-tongzhi',
+  'fuhao-shizhong-line',
+  'saoma',
+  'shoudiantong',
+  'ARsaomiao',
+  'nav-bottom',
+  'nav-right',
+  'nav-top',
+  'nav-left',
 ];
 
 class Demo extends React.Component {

site/components/mention/index.md

@@ -3,7 +3,7 @@
 - category: Components
 - chinese: At组件
 - order: 9
-- subtype: Other
+- subtype: Form Control
 
 ---
 

site/components/message/demo/basic.md

@@ -20,7 +20,7 @@ class Demo extends React.Component {
   }
 
   handleClick(type) {
-    Message[type](`这是一个 ${type}`);
+    Message[type](`这是一个 ${type}`, 1.5);
   }
 
   render() {
@@ -31,6 +31,8 @@ class Demo extends React.Component {
         <Button onClick={me.handleClick.bind(me, 'info')}>显示普通提示</Button>
         <Button onClick={me.handleClick.bind(me, 'error')}>显示错误提示</Button>
         <Button onClick={me.handleClick.bind(me, 'loading')}>显示加载提示</Button>
+        <Button onClick={me.handleClick.bind(me, 'nw_loading')}>显示信息平台加载提示</Button>
+        <Button onClick={me.handleClick.bind(me, 'mask_loading')}>显示带遮罩加载提示</Button>
       </div>
     );
   }