merge from develop (#77)

* #58, patched searchbar, add iconSize for toast #62, change weui dependency to 0.4.1 (#63) * update `weui` version * update react version and move to peerDependencies (#66) 1. react 升级到 v15，并且引入了新的版本规范。 @see https://facebook.github.io/react/blog/2016/02/19/new-versioning-scheme.html 2. 不同版本的 react 会冲突，把依赖写到 peerDependencies 更合适一点。参考其他 react 相关的库，如 react-redux. * fix extra comma in package.json * 修复 package.son 依赖 1. 补充依赖 jsdom 2. npm 对依赖 history 顺序做了调整 * #68 Cell* 增加支持传入自定义 className * #51 ActionSheet 的 menus 和 actions 增加支持传入自定义 className
weui · Apr 28, 2016 · 61cebf5 · 61cebf5
1 parent a2e2a87
commit 61cebf5
Show file tree

Hide file tree

Showing 19 changed files with 174 additions and 86 deletions.
diff --git a/docs/actionsheet.md b/docs/actionsheet.md
@@ -26,17 +26,20 @@ class App extends React.Component {
         show: false,
         menus: [{
             label: '拍照',
+            className: 'customClassName',
             onClick: ()=>{
 
             }
         }, {
             label: '从手机相册中选择',
+            className: 'customClassName',
             onClick: ()=>{
 
             }
         }],
         actions: [{
             label: '取消',
+            className: 'customClassName',
             onClick: this.hide.bind(this)
         }]
     };

diff --git a/docs/toast.md b/docs/toast.md
@@ -6,6 +6,7 @@
 属性 | 类型 | 默认值 | 可选值 | 备注
 -----|------|--------|-------|------|
 icon|string|toast|所有icon| 
+iconSize|string|'small'|small, large| icon size
 show|bool|false|| 是否显示 
 
 示例：

diff --git a/example/pages/toast/index.js b/example/pages/toast/index.js
@@ -13,8 +13,10 @@ export default class ToastDemo extends React.Component {
     state = {
         showToast: false,
         showLoading: false,
+        showCustom: false,
         toastTimer: null,
-        loadingTimer: null
+        loadingTimer: null,
+        customTimer: null
     };
 
     componentWillUnmount() {
@@ -26,7 +28,13 @@ export default class ToastDemo extends React.Component {
         return (
             <Page className="toast" title="Toast" spacing>
                 <Button onClick={this.showToast.bind(this)}>Toast</Button>
+                <Button onClick={this.showCustom.bind(this)}>Custom Toast</Button>
                 <Button onClick={this.showLoading.bind(this)}>Loading</Button>
+                <Toast
+                    show={this.state.showCustom}
+                    icon="waiting_circle"
+                    iconSize="large"
+                >waiting...</Toast>
                 <Toast show={this.state.showToast}>完成</Toast>
                 <Toast icon="loading" show={this.state.showLoading}>正在加载中...</Toast>
             </Page>
@@ -48,4 +56,12 @@ export default class ToastDemo extends React.Component {
             this.setState({showLoading: false});
         }, 2000);
     }
+
+    showCustom() {
+        this.setState({showCustom: true});
+
+        this.state.customTimer = setTimeout(()=> {
+            this.setState({showCustom: false});
+        }, 2000);
+    }
 };
diff --git a/package.json b/package.json
@@ -32,8 +32,7 @@
     },
     "homepage": "https://github.com/weui/react-weui",
     "dependencies": {
-        "classnames": "^2.2.0",
-        "react": "^0.14.2"
+        "classnames": "^2.2.0"
     },
     "devDependencies": {
         "autoprefixer": "^6.3.5",
@@ -47,8 +46,10 @@
         "eslint-plugin-react": "^3.11.3",
         "extract-text-webpack-plugin": "^1.0.1",
         "file-loader": "^0.8.5",
+        "history": "^1.17.0",
         "html-webpack-plugin": "^2.14.0",
         "istanbul": "^0.4.1",
+        "jsdom": "^8.4.0",
         "less": "^2.5.3",
         "less-loader": "^2.2.1",
         "mocha": "^2.3.4",
@@ -57,7 +58,6 @@
         "react-addons-css-transition-group": "^0.14.7",
         "react-addons-test-utils": "^0.14.3",
         "react-dom": "^0.14.2",
-        "history": "^1.17.0",
         "react-router": "^1.0.2",
         "rimraf": "^2.4.3",
         "sinon": "^1.17.2",
@@ -66,6 +66,9 @@
         "url-loader": "^0.5.7",
         "webpack": "^1.12.2",
         "webpack-dev-server": "^1.12.1",
-        "weui": "^0.4.0"
+        "weui": "^0.4.1"
+    },
+    "peerDependencies": {
+        "react": "^0.14.2 || ^15.0.1"
     }
 }
diff --git a/src/components/actionsheet/actionsheet.js b/src/components/actionsheet/actionsheet.js
@@ -48,26 +48,28 @@ export default class ActionSheet extends React.Component {
 
     _renderMenuItem() {
         return this.props.menus.map((menu, idx) => {
-            const {label, ...others} = menu;
-            const className = classNames({
-                weui_actionsheet_cell: true
+            const {label, className, ...others} = menu;
+            const cls = classNames({
+                weui_actionsheet_cell: true,
+                [className]: className
             });
 
             return (
-                <div key={idx} {...others} className={className}>{label}</div>
+                <div key={idx} {...others} className={cls}>{label}</div>
             );
         });
     }
 
     _renderActions() {
         return this.props.actions.map((action, idx) => {
-            const {label, ...others} = action;
-            const className = classNames({
-                weui_actionsheet_cell: true
+            const {label, className, ...others} = action;
+            const cls = classNames({
+                weui_actionsheet_cell: true,
+                [className]: className
             });
 
             return (
-                <div key={idx} {...others} className={className}>{label}</div>
+                <div key={idx} {...others} className={cls}>{label}</div>
             );
         });
     }

diff --git a/src/components/cell/cell_body.js b/src/components/cell/cell_body.js
@@ -9,14 +9,15 @@ import classNames from 'classnames';
 
 export default class CellBody extends React.Component {
     render() {
-        const {children, ...others} = this.props;
-        const className = classNames({
+        const {className, children, ...others} = this.props;
+        const cls = classNames({
             weui_cell_bd: true,
-            weui_cell_primary: true
+            weui_cell_primary: true,
+            [className]: className
         });
 
         return (
-            <div className={className} {...others}>{children}</div>
+            <div className={cls} {...others}>{children}</div>
         );
     }
 };
diff --git a/src/components/cell/cell_footer.js b/src/components/cell/cell_footer.js
@@ -9,13 +9,14 @@ import classNames from 'classnames';
 
 export default class CellFooter extends React.Component {
     render() {
-        const {children, ...others} = this.props;
-        const className = classNames({
-            weui_cell_ft: true
+        const {className, children, ...others} = this.props;
+        const cls = classNames({
+            weui_cell_ft: true,
+            [className]: className
         });
 
         return (
-            <div className={className} {...others}>{children}</div>
+            <div className={cls} {...others}>{children}</div>
         );
     }
 };
diff --git a/src/components/cell/cell_header.js b/src/components/cell/cell_header.js
@@ -9,13 +9,14 @@ import classNames from 'classnames';
 
 export default class CellHeader extends React.Component {
     render() {
-        const {children, ...others} = this.props;
-        const className = classNames({
-            weui_cell_hd: true
+        const {className, children, ...others} = this.props;
+        const cls = classNames({
+            weui_cell_hd: true,
+            [className]: className
         });
 
         return (
-            <div className={className} {...others}>{children}</div>
+            <div className={cls} {...others}>{children}</div>
         );
     }
 };
diff --git a/src/components/cell/cells_tips.js b/src/components/cell/cells_tips.js
@@ -9,13 +9,14 @@ import classNames from 'classnames';
 
 export default class CellsTips extends React.Component {
     render() {
-        const {children, ...others} = this.props;
-        const className = classNames({
-            weui_cells_tips: true
+        const {className, children, ...others} = this.props;
+        const cls = classNames({
+            weui_cells_tips: true,
+            [className]: className
         });
 
         return (
-            <div className={className} {...others}>{children}</div>
+            <div className={cls} {...others}>{children}</div>
         );
     }
 };
diff --git a/src/components/cell/cells_title.js b/src/components/cell/cells_title.js
@@ -9,13 +9,14 @@ import classNames from 'classnames';
 
 export default class CellsTitle extends React.Component {
     render() {
-        const {children, ...others} = this.props;
-        const className = classNames({
-            weui_cells_title: true
+        const {className, children, ...others} = this.props;
+        const cls = classNames({
+            weui_cells_title: true,
+            [className]: className
         });
 
         return (
-            <div className={className} {...others}>{children}</div>
+            <div className={cls} {...others}>{children}</div>
         );
     }
 };
diff --git a/src/components/searchbar/searchbar.js b/src/components/searchbar/searchbar.js
@@ -72,7 +72,12 @@ class SearchBar extends React.Component {
                             onChange={this.changeHandle.bind(this)}
                             value={this.state.text}
                         />
-                        <a className='weui_icon_clear' onMouseDown={this.clearHandle.bind(this)}/>
+                        {/*React will not trigger onMouseDown when not onClick presented*/}
+                        <a
+                            className='weui_icon_clear'
+                            onClick={e=>e/*issues #59*/}
+                            onMouseDown={this.clearHandle.bind(this)}
+                        />
                     </div>
                     <label
                         className='weui_search_text'

diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js
@@ -13,22 +13,23 @@ import Icon from '../icon/index';
 class Toast extends React.Component {
     static propTypes = {
         icon: React.PropTypes.string,
+        iconSize: React.PropTypes.string,
         show: React.PropTypes.bool
     };
 
     static defaultProps = {
         icon: 'toast',
-        show: false
+        show: false,
     };
 
     render() {
-        const {icon, show, children} = this.props;
+        const {icon, show, children, iconSize} = this.props;
 
         return (
             <div className={icon === 'loading' ? 'weui_loading_toast' : ''} style={{display: show ? 'block' : 'none'}}>
                 <Mask transparent={true}/>
                 <div className="weui_toast">
-                    <Icon value={icon}/>
+                    <Icon value={icon} size={iconSize}/>
                     <p className="weui_toast_content">{children}</p>
                 </div>
             </div>

diff --git a/test/actionsheet.js b/test/actionsheet.js
@@ -16,12 +16,15 @@ describe('<ActionSheet></ActionSheet>', ()=> {
     [undefined, null, true, false].map((show) => {
         describe(`<ActionSheet></ActionSheet>`, ()=> {
             const menus = [{
-                label: '拍照'
+                label: '拍照',
+                className: 'customClassName1'
             }, {
-                label: '从相册中选取'
+                label: '从相册中选取',
+                className: 'customClassName2'
             }];
             const actions = [{
-                label: '取消'
+                label: '取消',
+                className: 'customClassName'
             }, {
                 label: '确定'
             }];
@@ -67,7 +70,9 @@ describe('<ActionSheet></ActionSheet>', ()=> {
                 assert(menuItems.length === menus.length);
 
                 menuItems.map((menuItem, index)=> {
-                    assert(menuItem.text() === menus[index].label);
+                    const menu = menus[index];
+                    assert(menuItem.text() === menu.label);
+                    menu.className && assert(menuItem.hasClass(menu.className));
                 });
             });
 
@@ -76,7 +81,9 @@ describe('<ActionSheet></ActionSheet>', ()=> {
                 assert(actionItems.length === actions.length);
 
                 actionItems.map((actionItem, index)=> {
-                    assert(actionItem.text() === actions[index].label);
+                    const action = actions[index];
+                    assert(actionItem.text() === action.label);
+                    action.className && assert(actionItem.hasClass(action.className));
                 });
             });
         });

diff --git a/test/cell_body.js b/test/cell_body.js
@@ -15,8 +15,9 @@ describe('<CellBody></CellBody>', ()=> {
 
     ['cell body wording', <img src="http://mmrb.github.io/avatar/jf.jpg" />, <div><h2 className="title">文章标题</h2><p className="desc">文章描述</p></div>].map((child)=>{
         describe(`<CellBody>${child}</CellBody>`, ()=>{
+            const customClassName = 'customClassName1 customClassName2';
             const wrapper = shallow(
-                <CellBody>{child}</CellBody>
+                <CellBody className={customClassName}>{child}</CellBody>
             );
 
             it(`should render <CellBody></CellBody> component `, ()=>{
@@ -27,6 +28,10 @@ describe('<CellBody></CellBody>', ()=> {
                 assert(wrapper.hasClass(`weui_cell_bd`));
             });
 
+            it(`should have custom class name ${customClassName}`, ()=> {
+                assert(wrapper.hasClass(customClassName));
+            });
+
             it(`should have child ${child}`, ()=>{
                 assert(wrapper.contains(child));
             });

diff --git a/test/cell_footer.js b/test/cell_footer.js
@@ -15,8 +15,9 @@ describe('<CellFooter></CellFooter>', ()=> {
 
     ['cell footer wording', <img src="http://mmrb.github.io/avatar/bear.jpg" />].map((child)=>{
         describe(`<CellFooter>${child}</CellFooter>`, ()=>{
+            const customClassName = 'customClassName1 customClassName2';
             const wrapper = shallow(
-                <CellFooter>{child}</CellFooter>
+                <CellFooter className={customClassName}>{child}</CellFooter>
             );
 
             it(`should render <CellFooter></CellFooter> component `, ()=>{
@@ -27,6 +28,10 @@ describe('<CellFooter></CellFooter>', ()=> {
                 assert(wrapper.hasClass(`weui_cell_ft`));
             });
 
+            it(`should have custom class name ${customClassName}`, ()=> {
+                assert(wrapper.hasClass(customClassName));
+            });
+
             it(`should have child ${child}`, ()=>{
                 assert(wrapper.contains(child));
             });

diff --git a/test/cell_header.js b/test/cell_header.js
@@ -15,8 +15,9 @@ describe('<CellHeader></CellHeader>', ()=> {
 
     ['cell header wording', <img src="http://mmrb.github.io/avatar/jf.jpg" />, <p>cell header wording</p>].map((child)=>{
         describe(`<CellHeader>${child}</CellHeader>`, ()=>{
+            const customClassName = 'customClassName1 customClassName2';
             const wrapper = shallow(
-                <CellHeader>{child}</CellHeader>
+                <CellHeader className={customClassName}>{child}</CellHeader>
             );
 
             it(`should render <CellHeader></CellHeader> component `, ()=>{
@@ -27,6 +28,10 @@ describe('<CellHeader></CellHeader>', ()=> {
                 assert(wrapper.hasClass(`weui_cell_hd`));
             });
 
+            it(`should have custom class name ${customClassName}`, ()=> {
+                assert(wrapper.hasClass(customClassName));
+            });
+
             it(`should have child ${child}`, ()=>{
                 assert(wrapper.contains(child));
             });