├── .babelrc ├── docs ├── qrcode.png ├── README.md ├── mask.md ├── icon.md ├── msg.md ├── toast.md ├── progress.md ├── installation.md ├── button.md ├── actionsheet.md ├── grid.md ├── dialog.md └── cell.md ├── .npmignore ├── .gitignore ├── example ├── pages │ ├── cell │ │ └── images │ │ │ ├── avatar.jpg │ │ │ ├── icon.png │ │ │ └── vcode.jpg │ ├── home │ │ ├── images │ │ │ ├── icon_nav_cell.png │ │ │ ├── icon_nav_msg.png │ │ │ ├── icon_nav_tab.png │ │ │ ├── icon_nav_article.png │ │ │ ├── icon_nav_button.png │ │ │ ├── icon_nav_dialog.png │ │ │ ├── icon_nav_icons.png │ │ │ ├── icon_nav_panel.png │ │ │ ├── icon_nav_toast.png │ │ │ ├── icon_nav_progress.png │ │ │ ├── icon_nav_actionSheet.png │ │ │ └── icon_nav_search_bar.png │ │ ├── index.less │ │ └── index.js │ ├── icons │ │ ├── icons.less │ │ └── index.js │ ├── button │ │ ├── button.less │ │ └── index.js │ ├── msg │ │ └── index.js │ ├── actionsheet │ │ └── index.js │ ├── progress │ │ └── index.js │ ├── tab │ │ ├── index.js │ │ ├── navbar_auto.js │ │ ├── tabbar_auto.js │ │ ├── tabbar.js │ │ └── navbar.js │ ├── article │ │ └── index.js │ ├── toast │ │ └── index.js │ ├── dialog │ │ └── index.js │ └── searchbar │ │ └── index.js ├── index.html ├── component │ ├── page.js │ └── page.less └── app.js ├── src ├── components │ ├── msg │ │ ├── index.js │ │ └── msg.js │ ├── mask │ │ ├── index.js │ │ └── mask.js │ ├── toast │ │ ├── index.js │ │ └── toast.js │ ├── article │ │ ├── index.js │ │ └── article.js │ ├── searchbar │ │ ├── index.js │ │ └── searchbar.js │ ├── progress │ │ ├── index.js │ │ └── progress.js │ ├── label │ │ ├── index.js │ │ └── label.js │ ├── actionsheet │ │ ├── index.js │ │ └── actionsheet.js │ ├── icon │ │ ├── index.js │ │ └── icon.js │ ├── dialog │ │ ├── index.js │ │ ├── alert.js │ │ └── confirm.js │ ├── button │ │ ├── index.js │ │ ├── button_area.js │ │ └── button.js │ ├── grid │ │ ├── index.js │ │ ├── grid_icon.js │ │ ├── grid_label.js │ │ ├── grid.js │ │ └── grids.js │ ├── panel │ │ ├── index.js │ │ ├── panel_body.js │ │ ├── panel_header.js │ │ ├── panel_footer.js │ │ └── panel.js │ ├── cell │ │ ├── index.js │ │ ├── cell_footer.js │ │ ├── cell_header.js │ │ ├── cells_tips.js │ │ ├── cells_title.js │ │ ├── cell_body.js │ │ ├── cell.js │ │ └── cells.js │ ├── mediabox │ │ ├── mediabox_body.js │ │ ├── mediabox_desc.js │ │ ├── mediabox_title.js │ │ ├── index.js │ │ ├── mediabox_info_meta.js │ │ ├── mediabox_header.js │ │ ├── mediabox.js │ │ └── mediabox_info.js │ ├── tab │ │ ├── navbar.js │ │ ├── tabbar.js │ │ ├── tab_body.js │ │ ├── tabbar_icon.js │ │ ├── tabbar_label.js │ │ ├── index.js │ │ ├── tab_body_item.js │ │ ├── navbar_item.js │ │ ├── tabbar_item.js │ │ └── tab.js │ └── form │ │ ├── index.js │ │ ├── radio.js │ │ ├── checkbox.js │ │ ├── input.js │ │ ├── switch.js │ │ ├── form.js │ │ ├── select.js │ │ ├── form_cell.js │ │ └── textarea.js └── index.js ├── .travis.yml ├── .editorconfig ├── CONTRIBUTING.md ├── .eslintrc ├── test ├── switch.js ├── input.js ├── cells_tips.js ├── cells_title.js ├── panel_footer.js ├── panel_header.js ├── panel_body.js ├── label.js ├── mask.js ├── radio.js ├── cell_footer.js ├── checkbox.js ├── cell_header.js ├── cell_body.js ├── mediabox_body.js ├── mediabox_title.js ├── button_area.js ├── mediabox_desc.js ├── cells.js ├── icon.js ├── mediabox_header.js ├── progress.js ├── cell.js ├── mediabox_info_meta.js ├── select.js ├── grid.js ├── panel.js ├── grids.js ├── article.js ├── mediabox_info.js ├── mediabox.js ├── textarea.js ├── form.js ├── msg.js ├── toast.js ├── actionsheet.js └── button.js ├── webpack.config.js ├── README.md ├── CHANGELOG.md └── package.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "stage": 2, 3 | "optional": ["es7.classProperties"] 4 | } 5 | -------------------------------------------------------------------------------- /docs/qrcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiajian/react-weui/master/docs/qrcode.png -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .*rc 2 | .*.yml 3 | .idea 4 | webpack.config.* 5 | docs 6 | test 7 | example 8 | coverage -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | coverage 3 | lib 4 | node_modules 5 | npm-debug.log 6 | .DS_Store 7 | dist 8 | publish.sh -------------------------------------------------------------------------------- /example/pages/cell/images/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiajian/react-weui/master/example/pages/cell/images/avatar.jpg -------------------------------------------------------------------------------- /example/pages/cell/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiajian/react-weui/master/example/pages/cell/images/icon.png -------------------------------------------------------------------------------- /example/pages/cell/images/vcode.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiajian/react-weui/master/example/pages/cell/images/vcode.jpg -------------------------------------------------------------------------------- /example/pages/home/images/icon_nav_cell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiajian/react-weui/master/example/pages/home/images/icon_nav_cell.png -------------------------------------------------------------------------------- /example/pages/home/images/icon_nav_msg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiajian/react-weui/master/example/pages/home/images/icon_nav_msg.png -------------------------------------------------------------------------------- /example/pages/home/images/icon_nav_tab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiajian/react-weui/master/example/pages/home/images/icon_nav_tab.png -------------------------------------------------------------------------------- /example/pages/home/images/icon_nav_article.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiajian/react-weui/master/example/pages/home/images/icon_nav_article.png -------------------------------------------------------------------------------- /example/pages/home/images/icon_nav_button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiajian/react-weui/master/example/pages/home/images/icon_nav_button.png -------------------------------------------------------------------------------- /example/pages/home/images/icon_nav_dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiajian/react-weui/master/example/pages/home/images/icon_nav_dialog.png -------------------------------------------------------------------------------- /example/pages/home/images/icon_nav_icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiajian/react-weui/master/example/pages/home/images/icon_nav_icons.png -------------------------------------------------------------------------------- /example/pages/home/images/icon_nav_panel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiajian/react-weui/master/example/pages/home/images/icon_nav_panel.png -------------------------------------------------------------------------------- /example/pages/home/images/icon_nav_toast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiajian/react-weui/master/example/pages/home/images/icon_nav_toast.png -------------------------------------------------------------------------------- /src/components/msg/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/11/4. 3 | */ 4 | 5 | 6 | 7 | import Msg from './msg'; 8 | 9 | export default Msg; -------------------------------------------------------------------------------- /example/pages/home/images/icon_nav_progress.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiajian/react-weui/master/example/pages/home/images/icon_nav_progress.png -------------------------------------------------------------------------------- /src/components/mask/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/10/27. 3 | */ 4 | 5 | 6 | 7 | import Mask from './mask'; 8 | 9 | export default Mask; -------------------------------------------------------------------------------- /src/components/toast/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/10/27. 3 | */ 4 | 5 | 6 | 7 | import Toast from './toast'; 8 | 9 | export default Toast; -------------------------------------------------------------------------------- /example/pages/home/images/icon_nav_actionSheet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiajian/react-weui/master/example/pages/home/images/icon_nav_actionSheet.png -------------------------------------------------------------------------------- /example/pages/home/images/icon_nav_search_bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xiajian/react-weui/master/example/pages/home/images/icon_nav_search_bar.png -------------------------------------------------------------------------------- /src/components/article/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/12/11. 3 | */ 4 | 5 | 6 | 7 | import Article from './article'; 8 | 9 | export default Article; -------------------------------------------------------------------------------- /src/components/searchbar/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best. 3 | */ 4 | 5 | 6 | 7 | import SearchBar from './searchbar'; 8 | 9 | export default SearchBar; -------------------------------------------------------------------------------- /src/components/progress/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/10/27. 3 | */ 4 | 5 | 6 | 7 | import Progress from './progress'; 8 | 9 | export default Progress; -------------------------------------------------------------------------------- /src/components/label/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by yjcxy12 on 16/1/22. 3 | */ 4 | 5 | 6 | 7 | import Label from './label'; 8 | 9 | export default Label; 10 | -------------------------------------------------------------------------------- /src/components/actionsheet/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/11/26. 3 | */ 4 | 5 | 6 | 7 | import ActionSheet from './actionsheet'; 8 | 9 | export default ActionSheet; -------------------------------------------------------------------------------- /src/components/icon/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/11/3. 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import Icon from './icon'; 9 | 10 | export default Icon; -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - stable 4 | script: 5 | - npm test 6 | - npm run coverage 7 | after_script: 8 | npm install coveralls && cat ./coverage/lcov.info | coveralls -------------------------------------------------------------------------------- /example/pages/home/index.less: -------------------------------------------------------------------------------- 1 | 2 | 3 | .global_navs{ 4 | .icon_nav{ 5 | width: 28px; 6 | height: 28px; 7 | display: block; 8 | margin-right: .7em; 9 | } 10 | } -------------------------------------------------------------------------------- /src/components/dialog/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/10/27. 3 | */ 4 | 5 | 6 | 7 | import Confirm from './confirm'; 8 | import Alert from './alert'; 9 | 10 | export default { 11 | Confirm, 12 | Alert 13 | }; -------------------------------------------------------------------------------- /example/pages/icons/icons.less: -------------------------------------------------------------------------------- 1 | 2 | .page{ 3 | &.icons{ 4 | text-align: center; 5 | 6 | i{ 7 | padding: 0 5px 10px; 8 | } 9 | } 10 | } 11 | 12 | .icon_sp_area{ 13 | margin-top: 20px; 14 | } -------------------------------------------------------------------------------- /src/components/button/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/10/27. 3 | */ 4 | 5 | 6 | 7 | import Button from './button'; 8 | import ButtonArea from './button_area'; 9 | 10 | export default { 11 | Button, 12 | ButtonArea 13 | }; -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | end_of_line = lf 6 | charset = utf-8 7 | indent_style = space 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | indent_size = 4 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 2 | ### 贡献 3 | 4 | 欢迎给`react-weui`贡献 5 | 6 | #### 关于issue 7 | 8 | - 问题咨询、报告bug、提出意见或建议，请创建issue 9 | - 发起PR时，如果涉及变更较大，或者有其他不确定的，建议先创建issue讨论确认 10 | 11 | #### 编码规范 12 | 13 | - 文件扩展，使用`.js` 14 | - 一个文件包含一个组件，通过组件目录下的`index.js`导出 15 | - 使用ES2015写法，遵从eslint 16 | - 每个组件需要包含对应的文件和说明文档、示例代码 -------------------------------------------------------------------------------- /src/components/grid/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import Grids from './grids'; 8 | import Grid from './grid'; 9 | import GridIcon from './grid_icon'; 10 | import GridLabel from './grid_label'; 11 | 12 | export default { 13 | Grids, 14 | Grid, 15 | GridIcon, 16 | GridLabel 17 | }; -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | react-weui 7 | 8 | 9 |
10 | 11 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ### 目录 4 | - [快速上手](./installation.md) 5 | - [ActionSheet](./actionsheet.md) 6 | - [Button](./button.md) 7 | - [Cell](./cell.md) 8 | - [Dialog](./dialog.md) 9 | - [Form](./form.md) 10 | - [Icon](./icon.md) 11 | - [Mask](./mask.md) 12 | - [Msg](./msg.md) 13 | - [Progress](./progress.md) 14 | - [Toast](./toast.md) -------------------------------------------------------------------------------- /src/components/panel/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best. 3 | */ 4 | 5 | 6 | 7 | import Panel from './panel'; 8 | import PanelHeader from './panel_header'; 9 | import PanelBody from './panel_body'; 10 | import PanelFooter from './panel_footer'; 11 | 12 | export default { 13 | Panel, 14 | PanelHeader, 15 | PanelBody, 16 | PanelFooter 17 | }; -------------------------------------------------------------------------------- /example/pages/button/button.less: -------------------------------------------------------------------------------- 1 | 2 | .button_sp_area{ 3 | width: 60%; 4 | padding: 10px 0; 5 | margin: 0 auto; 6 | text-align: justify; 7 | font-size: 0; 8 | 9 | &:after{ 10 | display: inline-block; 11 | width: 100%; 12 | height: 0; 13 | font-size: 0; 14 | margin: 0; 15 | padding: 0; 16 | overflow: hidden; 17 | content: "." 18 | } 19 | } -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "ecmaFeatures": { 3 | "jsx": true, 4 | "modules": true 5 | }, 6 | "env": { 7 | "browser": true, 8 | "node": true 9 | }, 10 | "parser": "babel-eslint", 11 | "rules": { 12 | "quotes": [2, "single"], 13 | "strict": [2, "never"], 14 | "react/jsx-uses-react": 2, 15 | "react/jsx-uses-vars": 2, 16 | "react/react-in-jsx-scope": 2 17 | }, 18 | "plugins": [ 19 | "react" 20 | ] 21 | } -------------------------------------------------------------------------------- /docs/mask.md: -------------------------------------------------------------------------------- 1 | 2 | ### Mask 3 | 4 | `Mask`遮罩蒙层，分透明和半透明两种，主要用于`Dialog`、`Toast`等有弹框情况下，对整个屏幕进行遮罩。 5 | 6 | 属性 | 类型 | 默认值 | 可选值 | 备注 7 | -----|------|--------|-------|------| 8 | transparent|bool|false|true, false| 是否透明 9 | 10 | 示例： 11 | 12 | ```javascript 13 | import React from 'react'; 14 | import ReactDOM from 'react-dom'; 15 | import {Mask} from 'react-weui'; 16 | 17 | ReactDOM.render(( 18 |
19 | 20 |
21 | ), document.getElementById('container')); 22 | 23 | ``` 24 | -------------------------------------------------------------------------------- /src/components/panel/panel_body.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class PanelBody extends React.Component { 11 | render() { 12 | const {children, ...others} = this.props; 13 | const className = classNames({ 14 | weui_panel_bd: true 15 | }); 16 | 17 | return ( 18 |
{children}
19 | ); 20 | } 21 | }; -------------------------------------------------------------------------------- /src/components/cell/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/10/28. 3 | */ 4 | 5 | 6 | 7 | import Cells from './cells'; 8 | import Cell from './cell'; 9 | import CellsTitle from './cells_title'; 10 | import CellsTips from './cells_tips'; 11 | import CellHeader from './cell_header'; 12 | import CellBody from './cell_body'; 13 | import CellFooter from './cell_footer'; 14 | 15 | export default { 16 | Cells, 17 | Cell, 18 | CellsTitle, 19 | CellsTips, 20 | CellHeader, 21 | CellBody, 22 | CellFooter 23 | }; -------------------------------------------------------------------------------- /src/components/panel/panel_header.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class PanelHeader extends React.Component { 11 | render() { 12 | const {children, ...others} = this.props; 13 | const className = classNames({ 14 | weui_panel_hd: true 15 | }); 16 | 17 | return ( 18 |
{children}
19 | ); 20 | } 21 | }; -------------------------------------------------------------------------------- /src/components/grid/grid_icon.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class GridIcon extends React.Component { 11 | render() { 12 | const {children, className, ...others} = this.props; 13 | const cls = classNames({ 14 | weui_grid_icon: true 15 | }, className); 16 | 17 | return ( 18 |
{children}
19 | ); 20 | } 21 | }; -------------------------------------------------------------------------------- /src/components/grid/grid_label.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class GridLabel extends React.Component { 11 | render() { 12 | const {children, className, ...others} = this.props; 13 | const cls = classNames({ 14 | weui_grid_label: true 15 | }, className); 16 | 17 | return ( 18 |

{children}

19 | ); 20 | } 21 | }; -------------------------------------------------------------------------------- /src/components/mediabox/mediabox_body.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class PanelBody extends React.Component { 11 | render() { 12 | const {children, className, ...others} = this.props; 13 | const cls = classNames({ 14 | weui_media_bd: true 15 | }, className); 16 | 17 | return ( 18 |
{children}
19 | ); 20 | } 21 | }; -------------------------------------------------------------------------------- /src/components/mediabox/mediabox_desc.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class MediaBoxDescription extends React.Component { 11 | render() { 12 | const {children, className, ...others} = this.props; 13 | const cls = classNames({ 14 | weui_media_desc: true 15 | }, className); 16 | 17 | return ( 18 |

{children}

19 | ); 20 | } 21 | }; -------------------------------------------------------------------------------- /src/components/mediabox/mediabox_title.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class MediaBoxTitle extends React.Component { 11 | render() { 12 | const {children, className, ...others} = this.props; 13 | const cls = classNames({ 14 | weui_media_title: true 15 | }, className); 16 | 17 | return ( 18 |

{children}

19 | ); 20 | } 21 | }; -------------------------------------------------------------------------------- /docs/icon.md: -------------------------------------------------------------------------------- 1 | 2 | ### icon 3 | 4 | `icon`组件包含微信内常用的图标, 如成功(success), 警告(warn), 等待(waiting), 提示(info)等 5 | 6 | ### 属性 7 | 8 | 属性名称 | 类型 | 默认值 | 可选值 9 | ------------- | ------------- | --------| ------------- 10 | value | string | success | 见下 11 | size | string | small| small, large 12 | 13 | ### icon类型 14 | 15 | 目前`weui`包含的图标类型具体有: 16 | 17 | - success 18 | - success_circle 19 | - success_no_circle 20 | - safe_success 21 | - safe_warn 22 | - info 23 | - waiting 24 | - waiting_circle 25 | - circle 26 | - warn 27 | - download 28 | - info_circle 29 | - cancel 30 | -------------------------------------------------------------------------------- /src/components/cell/cell_footer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/11/12. 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class CellFooter extends React.Component { 11 | render() { 12 | const {className, children, ...others} = this.props; 13 | const cls = classNames({ 14 | weui_cell_ft: true, 15 | [className]: className 16 | }); 17 | 18 | return ( 19 |
{children}
20 | ); 21 | } 22 | }; -------------------------------------------------------------------------------- /src/components/cell/cell_header.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/11/12. 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class CellHeader extends React.Component { 11 | render() { 12 | const {className, children, ...others} = this.props; 13 | const cls = classNames({ 14 | weui_cell_hd: true, 15 | [className]: className 16 | }); 17 | 18 | return ( 19 |
{children}
20 | ); 21 | } 22 | }; -------------------------------------------------------------------------------- /src/components/cell/cells_tips.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/12/3. 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class CellsTips extends React.Component { 11 | render() { 12 | const {className, children, ...others} = this.props; 13 | const cls = classNames({ 14 | weui_cells_tips: true, 15 | [className]: className 16 | }); 17 | 18 | return ( 19 |
{children}
20 | ); 21 | } 22 | }; -------------------------------------------------------------------------------- /src/components/tab/navbar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class NavBar extends React.Component { 11 | 12 | render() { 13 | 14 | const {children, className, ...others} = this.props; 15 | const cls = classNames({ 16 | weui_navbar: true 17 | }, className); 18 | 19 | return ( 20 |
21 | {children} 22 |
23 | ); 24 | } 25 | } -------------------------------------------------------------------------------- /src/components/tab/tabbar.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class TabBar extends React.Component { 11 | 12 | render() { 13 | 14 | const {children, className, ...others} = this.props; 15 | const cls = classNames({ 16 | weui_tabbar: true 17 | }, className); 18 | 19 | return ( 20 |
21 | {children} 22 |
23 | ); 24 | } 25 | } -------------------------------------------------------------------------------- /src/components/cell/cells_title.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/11/13. 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class CellsTitle extends React.Component { 11 | render() { 12 | const {className, children, ...others} = this.props; 13 | const cls = classNames({ 14 | weui_cells_title: true, 15 | [className]: className 16 | }); 17 | 18 | return ( 19 |
{children}
20 | ); 21 | } 22 | }; -------------------------------------------------------------------------------- /src/components/tab/tab_body.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class TabBody extends React.Component { 11 | 12 | render() { 13 | 14 | const {children, className, ...others} = this.props; 15 | const cls = classNames({ 16 | weui_tab_bd: true 17 | }, className); 18 | 19 | return ( 20 |
21 | {children} 22 |
23 | ); 24 | } 25 | } -------------------------------------------------------------------------------- /src/components/tab/tabbar_icon.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class TabBarIcon extends React.Component { 11 | 12 | render() { 13 | 14 | const {children, className, ...others} = this.props; 15 | const cls = classNames({ 16 | weui_tabbar_icon: true, 17 | }, className); 18 | 19 | return ( 20 |
21 | {children} 22 |
23 | ); 24 | } 25 | } -------------------------------------------------------------------------------- /src/components/tab/tabbar_label.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class TabBarLabel extends React.Component { 11 | 12 | render() { 13 | 14 | const {children, className, ...others} = this.props; 15 | const cls = classNames({ 16 | weui_tabbar_label: true, 17 | }, className); 18 | 19 | return ( 20 |

21 | {children} 22 |

23 | ); 24 | } 25 | } -------------------------------------------------------------------------------- /src/components/label/label.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by yjcxy12 on 16/1/22. 3 | */ 4 | 5 | 6 | 7 | import React, { Component, PropTypes } from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class Label extends React.Component { 11 | render() { 12 | const { className, children, ...others } = this.props; 13 | const cls = classNames({ 14 | weui_label: true, 15 | [className]: className 16 | }); 17 | 18 | return ( 19 | 20 | ); 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /src/components/panel/panel_footer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class PanelFooter extends React.Component { 11 | render() { 12 | const {children, ...others} = this.props; 13 | const Component = this.props.href ? 'a' : 'div'; 14 | const className = classNames({ 15 | weui_panel_ft: true 16 | }); 17 | 18 | return ( 19 | {children} 20 | ); 21 | } 22 | }; -------------------------------------------------------------------------------- /src/components/article/article.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/12/11. 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class Article extends React.Component { 11 | render() { 12 | const {className, children, ...others} = this.props; 13 | const cls = classNames({ 14 | weui_article: true, 15 | [className]: className 16 | }); 17 | return ( 18 |
19 | {children} 20 |
21 | ); 22 | } 23 | }; -------------------------------------------------------------------------------- /src/components/cell/cell_body.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/11/12. 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class CellBody extends React.Component { 11 | render() { 12 | const {className, children, ...others} = this.props; 13 | const cls = classNames({ 14 | weui_cell_bd: true, 15 | weui_cell_primary: true, 16 | [className]: className 17 | }); 18 | 19 | return ( 20 |
{children}
21 | ); 22 | } 23 | }; -------------------------------------------------------------------------------- /src/components/form/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by yjcxy12 on 16/1/22. 3 | */ 4 | 5 | 6 | 7 | import Form from './form'; 8 | import FormCell from './form_cell'; 9 | import TextArea from './textarea'; 10 | import Input from './input'; 11 | import Switch from './switch'; 12 | import Radio from './radio'; 13 | import Checkbox from './checkbox'; 14 | import Select from './select'; 15 | import Uploader from './uploader'; 16 | 17 | export default { 18 | Form, 19 | FormCell, 20 | TextArea, 21 | Input, 22 | Switch, 23 | Radio, 24 | Checkbox, 25 | Select, 26 | Uploader 27 | }; 28 | -------------------------------------------------------------------------------- /src/components/mediabox/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import MediaBox from './mediabox'; 8 | import MediaBoxHeader from './mediabox_header'; 9 | import MediaBoxBody from './mediabox_body'; 10 | import MediaBoxTitle from './mediabox_title'; 11 | import MediaBoxDescription from './mediabox_desc'; 12 | import MediaBoxInfo from './mediabox_info'; 13 | import MediaBoxInfoMeta from './mediabox_info_meta'; 14 | 15 | export default { 16 | MediaBox, 17 | MediaBoxHeader, 18 | MediaBoxBody, 19 | MediaBoxTitle, 20 | MediaBoxDescription, 21 | MediaBoxInfo, 22 | MediaBoxInfoMeta 23 | }; 24 | -------------------------------------------------------------------------------- /src/components/tab/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import Tab from './tab'; 8 | import TabBody from './tab_body'; 9 | import NavBar from './navbar'; 10 | import NavBarItem from './navbar_item'; 11 | import TabBar from './tabbar'; 12 | import TabBarItem from './tabbar_item'; 13 | import TabBarIcon from './tabbar_icon'; 14 | import TabBarLabel from './tabbar_label'; 15 | import TabBodyItem from './tab_body_item'; 16 | 17 | export default { 18 | NavBar, 19 | NavBarItem, 20 | Tab, 21 | TabBody, 22 | TabBodyItem, 23 | TabBar, 24 | TabBarItem, 25 | TabBarIcon, 26 | TabBarLabel 27 | }; -------------------------------------------------------------------------------- /src/components/form/radio.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best on 16/2/25. 3 | */ 4 | 5 | 6 | 7 | import React, { Component, PropTypes } from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class Radio extends React.Component { 11 | 12 | render() { 13 | const { className, ...others } = this.props; 14 | const cls = classNames({ 15 | weui_check: true, 16 | [className]: className 17 | }); 18 | 19 | return ( 20 |
21 | 22 | 23 |
24 | ); 25 | } 26 | }; 27 | -------------------------------------------------------------------------------- /src/components/form/checkbox.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best on 16/2/25. 3 | */ 4 | 5 | 6 | 7 | import React, { Component, PropTypes } from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class Checkbox extends React.Component { 11 | 12 | render() { 13 | const { className, ...others } = this.props; 14 | const cls = classNames({ 15 | weui_check: true, 16 | [className]: className 17 | }); 18 | 19 | return ( 20 |
21 | 22 | 23 |
24 | ); 25 | } 26 | }; 27 | -------------------------------------------------------------------------------- /src/components/form/input.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by yjcxy12 on 16/1/22. 3 | */ 4 | 5 | 6 | 7 | import React, { Component, PropTypes } from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class Input extends React.Component { 11 | static propTypes = { 12 | defaultValue: PropTypes.string 13 | }; 14 | 15 | static defaultProps = { 16 | defaultValue: undefined 17 | }; 18 | 19 | render() { 20 | const { className, ...others } = this.props; 21 | const cls = classNames({ 22 | weui_input: true, 23 | [className]: className 24 | }); 25 | 26 | return ( 27 | 28 | ); 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /src/components/mask/mask.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/10/27. 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | class Mask extends React.Component { 11 | static propTypes = { 12 | transparent: React.PropTypes.bool 13 | }; 14 | 15 | static defaultProps = { 16 | transparent: false 17 | }; 18 | 19 | render() { 20 | const {transparent, ...others} = this.props; 21 | const className = classNames({ 22 | 'weui_mask': !transparent, 23 | 'weui_mask_transparent': transparent 24 | }); 25 | 26 | return ( 27 |
28 | ); 29 | } 30 | } 31 | 32 | export default Mask; -------------------------------------------------------------------------------- /src/components/form/switch.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by BearJ on 16/2/18. 3 | */ 4 | 5 | 6 | 7 | import React, { Component, PropTypes } from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class Switch extends React.Component { 11 | static propTypes = { 12 | defaultValue: PropTypes.string 13 | }; 14 | 15 | static defaultProps = { 16 | defaultValue: undefined 17 | }; 18 | 19 | render() { 20 | const { className, ...others } = this.props; 21 | const cls = classNames({ 22 | weui_switch: true, 23 | [className]: className 24 | }); 25 | 26 | return ( 27 | 28 | ); 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /src/components/mediabox/mediabox_info_meta.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class MediaBoxInfoMeta extends React.Component { 11 | static propTypes = { 12 | extra: React.PropTypes.bool, 13 | }; 14 | 15 | static defaultProps = { 16 | extra: false, 17 | }; 18 | 19 | render() { 20 | const {children, extra, className, ...others} = this.props; 21 | const cls = classNames({ 22 | weui_media_info_meta: true, 23 | weui_media_info_meta_extra: extra 24 | }, className); 25 | 26 | return ( 27 |
  • {children}
    • 28 | ); 29 | } 30 | }; -------------------------------------------------------------------------------- /src/components/panel/panel.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best. 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class Panel extends React.Component { 11 | static propTypes = { 12 | access: React.PropTypes.bool, 13 | }; 14 | 15 | static defaultProps = { 16 | access: false, 17 | }; 18 | 19 | render() { 20 | const {children, className, access, ...others} = this.props; 21 | const cls = classNames({ 22 | weui_panel: true, 23 | weui_panel_access: access, 24 | [className]: className 25 | }); 26 | 27 | return ( 28 |
    {children}
    29 | ); 30 | } 31 | }; 32 | -------------------------------------------------------------------------------- /example/component/page.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/12/10. 3 | */ 4 | 5 | "use strict"; 6 | 7 | import React from 'react'; 8 | import './page.less'; 9 | 10 | export default class Page extends React.Component { 11 | render() { 12 | const {title, subTitle, spacing, className, children} = this.props; 13 | 14 | return ( 15 |
    16 |
    17 |

    {title}

    18 |

    {subTitle}

    19 |
    20 |
    21 | {children} 22 |
    23 |
    24 | ); 25 | } 26 | }; -------------------------------------------------------------------------------- /src/components/tab/tab_body_item.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class TabBodyItem extends React.Component { 11 | static propTypes = { 12 | active: React.PropTypes.bool 13 | }; 14 | 15 | static defaultProps = { 16 | active: false 17 | }; 18 | 19 | render() { 20 | 21 | const {children, className, active, ...others} = this.props; 22 | const cls = classNames({ 23 | weui_tab_bd_item: true 24 | }, className); 25 | 26 | return ( 27 |
    28 | {children} 29 |
    30 | ); 31 | } 32 | } -------------------------------------------------------------------------------- /src/components/button/button_area.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/12/4. 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class ButtonArea extends React.Component { 11 | static propTypes = { 12 | direction: React.PropTypes.string 13 | }; 14 | 15 | static defaultProps = { 16 | direction: 'vertical' 17 | }; 18 | 19 | render() { 20 | const {direction, children} = this.props; 21 | const className = classNames({ 22 | weui_btn_area: true, 23 | weui_btn_area_inline: direction === 'horizontal' 24 | }); 25 | 26 | return ( 27 |
    28 | {children} 29 |
    30 | ); 31 | } 32 | }; -------------------------------------------------------------------------------- /src/components/tab/navbar_item.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class NavBarItem extends React.Component { 11 | static propTypes = { 12 | active: React.PropTypes.bool, 13 | label: React.PropTypes.string 14 | }; 15 | 16 | static defaultProps = { 17 | active: false, 18 | }; 19 | 20 | render() { 21 | 22 | const {children, className, active, label, ...others} = this.props; 23 | const cls = classNames({ 24 | weui_navbar_item: true, 25 | weui_bar_item_on: active 26 | }, className); 27 | 28 | return ( 29 |
    30 | {label ? label : children} 31 |
    32 | ); 33 | } 34 | } -------------------------------------------------------------------------------- /src/components/cell/cell.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/11/12. 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class Cell extends React.Component { 11 | render() { 12 | const {className, children, ...others} = this.props; 13 | const Component = this.props.href ? 'a' : this.props.htmlFor ? 'label' : 'div'; 14 | const cls = classNames({ 15 | weui_cell: true, 16 | weui_check_label: this.props.htmlFor, 17 | weui_cell_switch: this.props.switch, 18 | weui_cells_radio: this.props.radio, 19 | weui_cells_checkbox: this.props.checkbox, 20 | [className]: className 21 | }); 22 | 23 | return ( 24 | {children} 25 | ); 26 | } 27 | }; -------------------------------------------------------------------------------- /src/components/mediabox/mediabox_header.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class MediaBoxHeader extends React.Component { 11 | render() { 12 | const {children, className, ...others} = this.props; 13 | const clz = classNames({ 14 | weui_media_hd: true 15 | }, className); 16 | 17 | let childrenWithProps = React.Children.map(children, child => { 18 | if(child.type == 'img' && !child.props.className){ 19 | return React.cloneElement(child, { className: 'weui_media_appmsg_thumb' }); 20 | }else{ 21 | return child; 22 | } 23 | }); 24 | 25 | return ( 26 |
    {childrenWithProps}
    27 | ); 28 | } 29 | }; -------------------------------------------------------------------------------- /example/pages/msg/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/12/10. 3 | */ 4 | 5 | "use strict"; 6 | 7 | import React from 'react'; 8 | import {Button, Msg} from '../../../src/index'; 9 | import Page from '../../component/page'; 10 | 11 | export default class MsgDemo extends React.Component { 12 | 13 | state = { 14 | buttons: [{ 15 | type: 'primary', 16 | label: '确定', 17 | onClick: ()=>{ 18 | 19 | } 20 | }, { 21 | type: 'default', 22 | label: '取消', 23 | onClick: ()=>{ 24 | 25 | } 26 | }] 27 | }; 28 | 29 | render() { 30 | return ( 31 | 32 | 33 | 34 | ); 35 | } 36 | }; 37 | -------------------------------------------------------------------------------- /src/components/cell/cells.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/11/12. 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class Cells extends React.Component { 11 | static propTypes = { 12 | access: React.PropTypes.bool, 13 | radio: React.PropTypes.bool, 14 | checkbox: React.PropTypes.bool 15 | }; 16 | 17 | static defaultProps = { 18 | access: false, 19 | radio: false, 20 | checkbox: false 21 | }; 22 | 23 | render() { 24 | const {children, className, access, radio, checkbox, ...others} = this.props; 25 | const cls = classNames({ 26 | weui_cells: true, 27 | weui_cells_access: access, 28 | [className]: className 29 | }); 30 | 31 | return ( 32 |
    {children}
    33 | ); 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /src/components/mediabox/mediabox.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class MediaBox extends React.Component { 11 | static propTypes = { 12 | type: React.PropTypes.string 13 | }; 14 | 15 | static defaultProps = { 16 | type: 'text' 17 | }; 18 | 19 | render() { 20 | const {children, type, className, ...others} = this.props; 21 | const Component = this.props.href ? 'a' : 'div'; 22 | const cls = classNames({ 23 | weui_media_box: true, 24 | weui_media_appmsg: type === 'appmsg', 25 | weui_media_text: type === 'text', 26 | weui_media_small_appmsg: type === 'small_appmsg', 27 | }, className); 28 | 29 | return ( 30 | {children} 31 | ); 32 | } 33 | }; -------------------------------------------------------------------------------- /src/components/form/form.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by yjcxy12 on 16/1/22. 3 | */ 4 | 5 | 6 | 7 | import React, { Component, PropTypes } from 'react'; 8 | import classNames from 'classnames'; 9 | 10 | export default class Form extends Component { 11 | static propTypes = { 12 | radio: PropTypes.bool, 13 | checkbox: PropTypes.bool 14 | }; 15 | 16 | static defaultProps = { 17 | radio: false, 18 | checkbox: false 19 | }; 20 | 21 | render() { 22 | const { children, className, radio, checkbox, ...others } = this.props; 23 | const cls = classNames({ 24 | weui_cells: true, 25 | weui_cells_form: !radio && !checkbox, 26 | weui_cells_radio: radio, 27 | weui_cells_checkbox: checkbox, 28 | [className]: className 29 | }); 30 | 31 | return ( 32 |
    {children}
    33 | ); 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /docs/msg.md: -------------------------------------------------------------------------------- 1 | 2 | ### Msg 3 | 4 | 结果页通常来说可以认为进行一系列操作步骤后，作为流程结束的总结性页面。结果页的作用主要是告知用户操作处理结果以及必要的相关细节（可用于确认之前的操作是否有误）等信息；若该流程用于开启或关闭某些重要功能，可在结果页增加与该功能相关的描述性内容；除此之外，结果页也可以承载一些附加价值操作，例如提供抽奖、关注公众号等功能入口。 5 | 6 | #### 属性 7 | 8 | 属性名|类型|默认值|可选值|备注 9 | ------|----|------|------|----| 10 | type|string|success|有效的icon名|icon类型 11 | title | string|||标题 12 | description|string|||描述 13 | buttons|array| [ ]| | 底部操作按钮，至少包含label属性 14 | extraText | string | | | 额外内容 15 | extraHref | string | | | 额外内容链接 16 | 17 | buttons的描述示例如下： 18 | 19 | ```javascript 20 | const buttons = [{ 21 | label: '确定', 22 | onClick: () => {} 23 | }]; 24 | ``` 25 | 26 | #### 示例 27 | 28 | ```javascript 29 | import React from 'react'; 30 | import ReactDOM from 'react-dom'; 31 | import WeUI from 'react-weui'; 32 | 33 | const {Msg} = WeUI; 34 | 35 | ReactDOM.render(( 36 | 37 | ), document.getElementById('container')); 38 | ``` 39 | -------------------------------------------------------------------------------- /src/components/grid/grid.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | import GridIcon from './grid_icon'; 10 | import GridLabel from './grid_label'; 11 | 12 | export default class Grid extends React.Component { 13 | static propTypes = { 14 | label: React.PropTypes.string, 15 | icon: React.PropTypes.any 16 | }; 17 | 18 | static defaultProps = { 19 | label: '', 20 | icon: false 21 | }; 22 | 23 | render() { 24 | const {children, icon, label, className, ...others} = this.props; 25 | const cls = classNames({ 26 | weui_grid: true 27 | }, className); 28 | 29 | return ( 30 | 31 | {icon ? {icon} : false} 32 | {children} 33 | {label ? {label} : false} 34 | 35 | ); 36 | } 37 | }; -------------------------------------------------------------------------------- /docs/toast.md: -------------------------------------------------------------------------------- 1 | 2 | ### Toast 3 | 4 | `Toast`用于临时显示某些信息，并且会在数秒后自动消失。这些信息通常是轻量级操作的成功、失败或等待状态信息。 5 | 6 | 属性 | 类型 | 默认值 | 可选值 | 备注 7 | -----|------|--------|-------|------| 8 | icon|string|toast|所有icon / loading | 9 | iconSize|string|'small'|small, large| icon size 10 | show|bool|false|| 是否显示 11 | 12 | 示例： 13 | 14 | ```javascript 15 | import React from 'react'; 16 | import ReactDOM from 'react-dom'; 17 | import {Button, Toast} from 'react-weui'; 18 | 19 | class App extends React.Component { 20 | state = { 21 | show: false 22 | }; 23 | 24 | handleClick() { 25 | this.setState({show: true}); 26 | } 27 | render() { 28 |
    29 | 30 | 31 | 加载中... 32 | 33 |
    34 | } 35 | } 36 | 37 | ReactDOM.render(( 38 | 39 | ), document.getElementById('container')); 40 | 41 | ``` 42 | -------------------------------------------------------------------------------- /test/switch.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best on 16/2/25. 3 | */ 4 | 5 | "use strict"; 6 | 7 | import React from 'react'; 8 | import { shallow } from 'enzyme'; 9 | import assert from 'assert'; 10 | import WeUI from '../src/index'; 11 | 12 | const {Switch} = WeUI; 13 | 14 | describe('', ()=> { 15 | [undefined, null, 'custom_class'].map(clazz => { 16 | describe(``, ()=> { 17 | const wrapper = shallow( 18 | 19 | ); 20 | 21 | it(`should render component`, ()=> { 22 | assert(wrapper.instance() instanceof Switch); 23 | assert(wrapper.hasClass('weui_switch')); 24 | }); 25 | 26 | it(`should have custom class name ${clazz} when className is not null or empty`, ()=>{ 27 | if (clazz) { 28 | assert(wrapper.hasClass(clazz)); 29 | } 30 | }); 31 | }) 32 | }); 33 | }); -------------------------------------------------------------------------------- /src/components/mediabox/mediabox_info.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | import MediaBoxInfoMeta from './mediabox_info_meta'; 10 | 11 | export default class MediaBoxInfo extends React.Component { 12 | static propTypes = { 13 | data: React.PropTypes.array, 14 | }; 15 | 16 | static defaultProps = { 17 | data: [], 18 | }; 19 | 20 | renderData(metas) { 21 | return metas.map((meta,i) => { 22 | return {meta.label}; 23 | }); 24 | } 25 | 26 | render() { 27 | const {children, data, className, ...others} = this.props; 28 | const cls = classNames({ 29 | weui_media_info: true 30 | }, className); 31 | 32 | return ( 33 |
      34 | {data.length > 0 ? this.renderData(data) : children} 35 |
    36 | ); 37 | } 38 | }; -------------------------------------------------------------------------------- /test/input.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best on 16/2/25. 3 | */ 4 | 5 | "use strict"; 6 | 7 | import React from 'react'; 8 | import { shallow } from 'enzyme'; 9 | import assert from 'assert'; 10 | import WeUI from '../src/index'; 11 | 12 | const {Input} = WeUI; 13 | 14 | describe('', ()=> { 15 | [undefined, null, 'custom_class'].map(clazz => { 16 | describe(``, ()=> { 17 | const wrapper = shallow( 18 | 19 | ); 20 | 21 | it(`should render component`, ()=> { 22 | assert(wrapper.instance() instanceof Input); 23 | assert(wrapper.find('input').hasClass('weui_input')); 24 | }); 25 | 26 | it(`should have custom class name ${clazz} when className is not null or empty`, ()=>{ 27 | if (clazz) { 28 | assert(wrapper.find('input').hasClass(clazz)); 29 | } 30 | }); 31 | }); 32 | }); 33 | }); -------------------------------------------------------------------------------- /test/cells_tips.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/12/9. 3 | */ 4 | 5 | "use strict"; 6 | 7 | import React from 'react'; 8 | import { shallow } from 'enzyme'; 9 | import assert from 'assert'; 10 | import WeUI from '../src/index'; 11 | 12 | const {CellsTips} = WeUI; 13 | 14 | describe('', ()=> { 15 | 16 | const text = `cells tips wording`; 17 | const customClassName = 'customClassName1 customClassName2'; 18 | const wrapper = shallow( 19 | {text} 20 | ); 21 | 22 | it(`should render component `, ()=>{ 23 | assert(wrapper.instance() instanceof CellsTips); 24 | }); 25 | 26 | it(`should have 'weui_cells_tips' class name`, ()=>{ 27 | assert(wrapper.hasClass(`weui_cells_tips`)); 28 | }); 29 | 30 | it(`should have custom class name ${customClassName}`, ()=> { 31 | assert(wrapper.hasClass(customClassName)); 32 | }); 33 | 34 | it(`should have text ${text}`, ()=>{ 35 | assert(wrapper.text() === text); 36 | }); 37 | }); -------------------------------------------------------------------------------- /src/components/grid/grids.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | import Grid from './grid'; 10 | 11 | export default class Grids extends React.Component { 12 | static propTypes = { 13 | data: React.PropTypes.array 14 | }; 15 | 16 | static defaultProps = { 17 | data: [] 18 | }; 19 | 20 | renderData(data) { 21 | return data.map((item,i) => { 22 | return ; 28 | }); 29 | } 30 | 31 | render() { 32 | 33 | const {children, data, className, ...others} = this.props; 34 | const cls = classNames({ 35 | weui_grids: true 36 | }, className); 37 | 38 | return ( 39 |
    40 | {data.length > 0 ? this.renderData(data) : children} 41 |
    42 | ); 43 | } 44 | }; -------------------------------------------------------------------------------- /test/cells_title.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/12/9. 3 | */ 4 | 5 | "use strict"; 6 | 7 | import React from 'react'; 8 | import { shallow } from 'enzyme'; 9 | import assert from 'assert'; 10 | import WeUI from '../src/index'; 11 | 12 | const {CellsTitle} = WeUI; 13 | 14 | describe('', ()=> { 15 | 16 | const text = `cells tips wording`; 17 | const customClassName = 'customClassName1 customClassName2'; 18 | const wrapper = shallow( 19 | {text} 20 | ); 21 | 22 | it(`should render component `, ()=>{ 23 | assert(wrapper.instance() instanceof CellsTitle); 24 | }); 25 | 26 | it(`should have 'weui_cells_title' class name`, ()=>{ 27 | assert(wrapper.hasClass(`weui_cells_title`)); 28 | }); 29 | 30 | it(`should have custom class name ${customClassName}`, ()=> { 31 | assert(wrapper.hasClass(customClassName)); 32 | }); 33 | 34 | it(`should have text ${text}`, ()=>{ 35 | assert(wrapper.text() === text); 36 | }); 37 | }); -------------------------------------------------------------------------------- /test/panel_footer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | "use strict"; 6 | 7 | import React from 'react'; 8 | import { shallow } from 'enzyme'; 9 | import assert from 'assert'; 10 | import WeUI from '../src/index'; 11 | 12 | const {PanelFooter} = WeUI; 13 | 14 | describe('', ()=> { 15 | 16 | ['Panel footer wording', ].map((child)=>{ 17 | describe(`${child}`, ()=>{ 18 | const wrapper = shallow( 19 | {child} 20 | ); 21 | 22 | it(`should render component `, ()=>{ 23 | assert(wrapper.instance() instanceof PanelFooter); 24 | }); 25 | 26 | it(`should have 'weui_panel_ft' class name`, ()=>{ 27 | assert(wrapper.hasClass(`weui_panel_ft`)); 28 | }); 29 | 30 | it(`should have child ${child}`, ()=>{ 31 | assert(wrapper.contains(child)); 32 | }); 33 | }); 34 | }); 35 | 36 | }); -------------------------------------------------------------------------------- /src/components/toast/toast.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/10/27. 3 | */ 4 | 5 | 6 | 7 | import React from 'react'; 8 | import classNames from 'classnames'; 9 | import Mask from '../mask/index'; 10 | import Icon from '../icon/index'; 11 | 12 | 13 | class Toast extends React.Component { 14 | static propTypes = { 15 | icon: React.PropTypes.string, 16 | iconSize: React.PropTypes.string, 17 | show: React.PropTypes.bool 18 | }; 19 | 20 | static defaultProps = { 21 | icon: 'toast', 22 | show: false, 23 | }; 24 | 25 | render() { 26 | const {icon, show, children, iconSize} = this.props; 27 | 28 | return ( 29 |
    30 | 31 |
    32 | 33 |

    {children}

    34 |
    35 |
    36 | ); 37 | } 38 | } 39 | 40 | export default Toast; -------------------------------------------------------------------------------- /test/panel_header.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best. 3 | */ 4 | 5 | "use strict"; 6 | 7 | import React from 'react'; 8 | import { shallow } from 'enzyme'; 9 | import assert from 'assert'; 10 | import WeUI from '../src/index'; 11 | 12 | const {PanelHeader} = WeUI; 13 | 14 | describe('', ()=> { 15 | 16 | ['Panel header wording', ,

    Panel header wording

    ].map((child)=>{ 17 | describe(`${child}`, ()=>{ 18 | const wrapper = shallow( 19 | {child} 20 | ); 21 | 22 | it(`should render component `, ()=>{ 23 | assert(wrapper.instance() instanceof PanelHeader); 24 | }); 25 | 26 | it(`should have 'weui_panel_hd' class name`, ()=>{ 27 | assert(wrapper.hasClass(`weui_panel_hd`)); 28 | }); 29 | 30 | it(`should have child ${child}`, ()=>{ 31 | assert(wrapper.contains(child)); 32 | }); 33 | }); 34 | }); 35 | 36 | 37 | 38 | }); -------------------------------------------------------------------------------- /test/panel_body.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best 3 | */ 4 | 5 | "use strict"; 6 | 7 | import React from 'react'; 8 | import { shallow } from 'enzyme'; 9 | import assert from 'assert'; 10 | import WeUI from '../src/index'; 11 | 12 | const {PanelBody} = WeUI; 13 | 14 | describe('', ()=> { 15 | 16 | ['Panel body wording', ,

    文章标题

    文章描述

    ].map((child)=>{ 17 | describe(`${child}`, ()=>{ 18 | const wrapper = shallow( 19 | {child} 20 | ); 21 | 22 | it(`should render component `, ()=>{ 23 | assert(wrapper.instance() instanceof PanelBody); 24 | }); 25 | 26 | it(`should have 'weui_panel_bd' class name`, ()=>{ 27 | assert(wrapper.hasClass(`weui_panel_bd`)); 28 | }); 29 | 30 | it(`should have child ${child}`, ()=>{ 31 | assert(wrapper.contains(child)); 32 | }); 33 | }); 34 | }); 35 | 36 | }); -------------------------------------------------------------------------------- /example/pages/button/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by jf on 15/12/10. 3 | */ 4 | 5 | "use strict"; 6 | 7 | import React from 'react'; 8 | import {Button} from '../../../src/index'; 9 | import Page from '../../component/page'; 10 | import './button.less'; 11 | 12 | export default class ButtonDemo extends React.Component { 13 | 14 | render() { 15 | return ( 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |
    27 | 28 | 29 | 30 | 31 | 32 |
    33 |     34 | ); 35 | } 36 | }; -------------------------------------------------------------------------------- /test/label.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by n7best on 16/2/25. 3 | */ 4 | 5 | "use strict"; 6 | 7 | import React from 'react'; 8 | import { shallow } from 'enzyme'; 9 | import assert from 'assert'; 10 | import WeUI from '../src/index'; 11 | 12 | const {Label} = WeUI; 13 | 14 | describe('', ()=> { 15 | [undefined, null, 'custom_class'].map(clazz => { 16 | describe(``, ()=> { 17 | const wrapper = shallow( 18 |