├── .gitignore ├── src ├── components │ ├── Form │ │ ├── util │ │ │ └── index.js │ │ ├── components │ │ │ ├── Func.js │ │ │ ├── FormLineHOC.js │ │ │ ├── Switch.js │ │ │ ├── Number.js │ │ │ ├── DateTime.js │ │ │ ├── Select.js │ │ │ ├── TextArea.js │ │ │ ├── Checkbox.js │ │ │ ├── Input.js │ │ │ └── DateRange.js │ │ ├── index.js │ │ └── style │ │ │ └── form.scss │ ├── DataDisplay │ │ ├── List │ │ │ ├── index.js │ │ │ ├── style │ │ │ │ ├── list.scss │ │ │ │ └── item.scss │ │ │ └── components │ │ │ │ ├── List.js │ │ │ │ └── Item.js │ │ ├── Tag │ │ │ ├── index.js │ │ │ ├── style │ │ │ │ └── index.scss │ │ │ └── components │ │ │ │ └── Tag.js │ │ ├── Badge │ │ │ ├── index.js │ │ │ ├── style │ │ │ │ └── badge.scss │ │ │ └── components │ │ │ │ └── Badge.js │ │ ├── Carousel │ │ │ ├── index.js │ │ │ ├── util │ │ │ │ └── index.js │ │ │ └── style │ │ │ │ └── carousel.scss │ │ ├── Tooltip │ │ │ ├── index.js │ │ │ ├── components │ │ │ │ ├── StateComponent.js │ │ │ │ └── Tooltip.js │ │ │ ├── style │ │ │ │ └── tooltip.scss │ │ │ └── util │ │ │ │ └── index.js │ │ └── ListTitle │ │ │ ├── index.js │ │ │ ├── components │ │ │ └── ListTitle.js │ │ │ └── style │ │ │ └── index.scss │ ├── DataEntry │ │ ├── Picker │ │ │ ├── index.js │ │ │ └── style │ │ │ │ └── picker.scss │ │ ├── Figure │ │ │ ├── index.js │ │ │ ├── style │ │ │ │ └── figure.scss │ │ │ └── components │ │ │ │ └── Figure.js │ │ ├── Switch │ │ │ ├── index.js │ │ │ ├── style │ │ │ │ └── index.scss │ │ │ └── components │ │ │ │ └── Switch.js │ │ ├── Button │ │ │ ├── index.js │ │ │ ├── components │ │ │ │ └── Button.js │ │ │ └── style │ │ │ │ └── index.scss │ │ ├── Uploader │ │ │ ├── index.js │ │ │ └── style │ │ │ │ └── uploader.scss │ │ ├── DataPicker │ │ │ ├── index.js │ │ │ ├── style │ │ │ │ └── datePicker.scss │ │ │ └── util │ │ │ │ └── index.js │ │ └── PickerView │ │ │ ├── index.js │ │ │ ├── style │ │ │ ├── picker-view.scss │ │ │ └── picker-column.scss │ │ │ └── components │ │ │ ├── PickerColumn.js │ │ │ └── PickerView.js │ ├── Feedback │ │ ├── Toast │ │ │ ├── index.js │ │ │ ├── style │ │ │ │ ├── notification.scss │ │ │ │ └── notice.scss │ │ │ └── components │ │ │ │ ├── Toast.js │ │ │ │ ├── Notice.js │ │ │ │ └── Notification.js │ │ └── Popover │ │ │ ├── index.js │ │ │ └── components │ │ │ └── Popover.js │ ├── Tools │ │ └── Tools.js │ └── Gesture │ │ └── Touchable.js ├── static │ ├── img │ │ ├── star-bucks.jpg │ │ └── screen-shot-20171109.png │ └── sass │ │ ├── component.scss │ │ ├── index.scss │ │ └── base.scss ├── routes │ ├── Form │ │ ├── containers │ │ │ └── Input │ │ │ │ ├── index.js │ │ │ │ └── InputPage.js │ │ └── index.js │ ├── DataDisplay │ │ ├── containers │ │ │ ├── Badge │ │ │ │ ├── index.js │ │ │ │ └── BadgePage.js │ │ │ ├── List │ │ │ │ ├── index.js │ │ │ │ └── ListPage.js │ │ │ ├── Tooltip │ │ │ │ ├── index.js │ │ │ │ └── TooltipPage.js │ │ │ └── Carousel │ │ │ │ ├── index.js │ │ │ │ └── CarouselPage.js │ │ └── index.js │ ├── Feedback │ │ ├── containers │ │ │ └── Toast │ │ │ │ ├── index.js │ │ │ │ └── ToastPage.js │ │ └── index.js │ ├── DataEntry │ │ ├── containers │ │ │ ├── Picker │ │ │ │ ├── index.js │ │ │ │ └── PickerPage.js │ │ │ ├── Switch │ │ │ │ ├── index.js │ │ │ │ └── SwitchPage.js │ │ │ ├── Button │ │ │ │ ├── index.js │ │ │ │ └── ButtonPage.js │ │ │ ├── Uploader │ │ │ │ ├── index.js │ │ │ │ └── UploaderPage.js │ │ │ ├── DatePicker │ │ │ │ ├── index.js │ │ │ │ └── DatePickerPage.js │ │ │ └── PickerView │ │ │ │ ├── index.js │ │ │ │ └── PickerViewPage.js │ │ └── index.js │ ├── index.js │ └── Home │ │ └── index.js ├── containers │ ├── AppContainer.js │ ├── Feedback │ │ └── PopoverPage.js │ ├── Form │ │ ├── TextAreaPage.js │ │ ├── SelectPage.js │ │ ├── SwitchPage.js │ │ ├── CheckboxPage.js │ │ ├── NumberPage.js │ │ ├── DateTimePage.js │ │ ├── FormPage.js │ │ └── DateRangePage.js │ └── DataDisplay │ │ ├── ListPage.js │ │ └── TagPage.js ├── layout │ └── index.js ├── main.js └── index.html ├── bin ├── server.js ├── compile.js └── online.js ├── config ├── environments.js └── index.js ├── README.md ├── online.json ├── server └── main.js ├── LICENSE └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | npm-debug.log 2 | /node_modules 3 | /tests 4 | /.idea 5 | /dist 6 | /logs -------------------------------------------------------------------------------- /src/components/Form/util/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/11/28. 3 | */ 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/DataDisplay/List/index.js: -------------------------------------------------------------------------------- 1 | import List from './components/List' 2 | 3 | export default List; -------------------------------------------------------------------------------- /src/components/DataEntry/Picker/index.js: -------------------------------------------------------------------------------- 1 | import Picker from './components/Picker'; 2 | 3 | export default Picker; -------------------------------------------------------------------------------- /src/static/img/star-bucks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aus0049/react-component/HEAD/src/static/img/star-bucks.jpg -------------------------------------------------------------------------------- /src/static/img/screen-shot-20171109.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Aus0049/react-component/HEAD/src/static/img/screen-shot-20171109.png -------------------------------------------------------------------------------- /src/components/DataDisplay/Tag/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/7/10. 3 | */ 4 | import Tag from './components/Tag' 5 | 6 | export default Tag; -------------------------------------------------------------------------------- /src/components/DataDisplay/Badge/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/11/20. 3 | */ 4 | import Badge from './components/Badge' 5 | 6 | export default Badge; -------------------------------------------------------------------------------- /src/components/DataEntry/Figure/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/11/6. 3 | */ 4 | import Figure from './components/Figure' 5 | 6 | export default Figure -------------------------------------------------------------------------------- /src/components/DataEntry/Switch/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/7/7. 3 | */ 4 | import Switch from './components/Switch' 5 | 6 | export default Switch; -------------------------------------------------------------------------------- /src/components/Feedback/Toast/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/8/24. 3 | */ 4 | import Toast from './components/Toast' 5 | 6 | export default Toast; -------------------------------------------------------------------------------- /src/components/DataEntry/Button/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/7/7. 3 | */ 4 | import Button from './components/Button' 5 | 6 | export default Button; 7 | -------------------------------------------------------------------------------- /src/components/Feedback/Popover/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/9/6. 3 | */ 4 | import Popover from './components/Popover' 5 | 6 | export default Popover; -------------------------------------------------------------------------------- /src/components/DataDisplay/Carousel/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/7/8. 3 | */ 4 | import Carousel from './components/Carousel' 5 | 6 | export default Carousel; -------------------------------------------------------------------------------- /src/components/DataDisplay/Tooltip/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/11/13. 3 | */ 4 | import Tooltip from './components/Tooltip' 5 | 6 | export default Tooltip; -------------------------------------------------------------------------------- /src/components/DataEntry/Uploader/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/7/5. 3 | */ 4 | import Uploader from './components/Uploader' 5 | 6 | export default Uploader; -------------------------------------------------------------------------------- /src/components/DataDisplay/ListTitle/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/7/14. 3 | */ 4 | import ListTitle from './components/ListTitle' 5 | 6 | export default ListTitle; -------------------------------------------------------------------------------- /src/components/DataEntry/DataPicker/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/7/7. 3 | */ 4 | import DataPicker from './components/DatePicker'; 5 | 6 | export default DataPicker; -------------------------------------------------------------------------------- /src/components/DataEntry/PickerView/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/7/7. 3 | */ 4 | import PickerView from './components/PickerView' 5 | 6 | export default PickerView; -------------------------------------------------------------------------------- /src/components/DataEntry/PickerView/style/picker-view.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | $prefixCls: 'zby-picker-view'; 4 | 5 | // PickerView 6 | .#{$prefixCls} { 7 | display: flex; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /bin/server.js: -------------------------------------------------------------------------------- 1 | const config = require('../config') 2 | const server = require('../server/main') 3 | const debug = require('debug')('app:bin:server') 4 | const port = config.server_port 5 | 6 | server.listen(port) 7 | debug(`🍺 项目顺利跑起来 http://localhost:${port}.`) 8 | -------------------------------------------------------------------------------- /src/components/Tools/Tools.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/4/1. 3 | */ 4 | import { browserHistory } from 'react-router' 5 | 6 | const Tool = { 7 | linkTo (path) { 8 | browserHistory.push(path); 9 | } 10 | }; 11 | 12 | export default Tool -------------------------------------------------------------------------------- /src/routes/Form/containers/Input/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/11/28. 3 | */ 4 | export default () => ({ 5 | path: 'input', 6 | getComponents(location, callback) { 7 | require.ensure([], function (require) { 8 | callback(null, require('./InputPage').default) 9 | }, 'input') 10 | } 11 | }) -------------------------------------------------------------------------------- /src/routes/DataDisplay/containers/Badge/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/11/20. 3 | */ 4 | export default () => ({ 5 | path: 'badge', 6 | getComponents(location, callback) { 7 | require.ensure([], function (require) { 8 | callback(null, require('./BadgePage').default) 9 | }, 'badge') 10 | } 11 | }) -------------------------------------------------------------------------------- /src/routes/DataDisplay/containers/List/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/10/14. 3 | */ 4 | export default () => ({ 5 | path: 'list', 6 | getComponents(location, callback) { 7 | require.ensure([], function (require) { 8 | callback(null, require('./ListPage').default) 9 | }, 'list') 10 | } 11 | }) -------------------------------------------------------------------------------- /src/routes/Feedback/containers/Toast/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/10/18. 3 | */ 4 | export default () => ({ 5 | path: 'toast', 6 | getComponents(location, callback) { 7 | require.ensure([], function (require) { 8 | callback(null, require('./ToastPage').default) 9 | }, 'toast') 10 | } 11 | }) -------------------------------------------------------------------------------- /src/routes/DataEntry/containers/Picker/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/11/7. 3 | */ 4 | export default () => ({ 5 | path: 'picker', 6 | getComponents(location, callback) { 7 | require.ensure([], function (require) { 8 | callback(null, require('./PickerPage').default) 9 | }, 'picker') 10 | } 11 | }) -------------------------------------------------------------------------------- /src/routes/DataEntry/containers/Switch/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/10/17. 3 | */ 4 | export default () => ({ 5 | path: 'switch', 6 | getComponents(location, callback) { 7 | require.ensure([], function (require) { 8 | callback(null, require('./SwitchPage').default) 9 | }, 'switch') 10 | } 11 | }) -------------------------------------------------------------------------------- /src/routes/DataDisplay/containers/Tooltip/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/11/13. 3 | */ 4 | export default () => ({ 5 | path: 'tooltip', 6 | getComponents(location, callback) { 7 | require.ensure([], function (require) { 8 | callback(null, require('./TooltipPage').default) 9 | }, 'tooltip') 10 | } 11 | }) -------------------------------------------------------------------------------- /src/routes/DataEntry/containers/Button/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/10/13. 3 | */ 4 | export default () => ({ 5 | path: 'button', 6 | getComponents(location, callback) { 7 | require.ensure([], function (require) { 8 | callback(null, require('./ButtonPage').default) 9 | }, 'button') 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /src/routes/DataEntry/containers/Uploader/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/10/19. 3 | */ 4 | export default () => ({ 5 | path: 'uploader', 6 | getComponents(location, callback) { 7 | require.ensure([], function (require) { 8 | callback(null, require('./UploaderPage').default) 9 | }, 'uploader') 10 | } 11 | }) -------------------------------------------------------------------------------- /src/routes/DataDisplay/containers/Carousel/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/11/10. 3 | */ 4 | export default () => ({ 5 | path: 'carousel', 6 | getComponents(location, callback) { 7 | require.ensure([], function (require) { 8 | callback(null, require('./CarouselPage').default) 9 | }, 'carousel') 10 | } 11 | }) -------------------------------------------------------------------------------- /src/routes/DataEntry/containers/DatePicker/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/11/7. 3 | */ 4 | export default () => ({ 5 | path: 'date-picker', 6 | getComponents(location, callback) { 7 | require.ensure([], function (require) { 8 | callback(null, require('./DatePickerPage').default) 9 | }, 'date-picker') 10 | } 11 | }) -------------------------------------------------------------------------------- /src/routes/DataEntry/containers/PickerView/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/10/20. 3 | */ 4 | export default () => ({ 5 | path: 'picker-view', 6 | getComponents(location, callback) { 7 | require.ensure([], function (require) { 8 | callback(null, require('./PickerViewPage').default) 9 | }, 'picker-view') 10 | } 11 | }) -------------------------------------------------------------------------------- /src/components/Feedback/Toast/style/notification.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import '../../../../static/sass/base.scss'; 4 | 5 | $prefixCls: 'zby-notification'; 6 | 7 | .#{$prefixCls}-box { 8 | position: fixed; 9 | left: 50%; 10 | top: 30%; 11 | width: 40%; 12 | height: 300px; 13 | 14 | transform: translate3D(-50%, -50%, 0); 15 | z-index: 110; 16 | } -------------------------------------------------------------------------------- /src/routes/Form/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/11/28. 3 | */ 4 | export default () => ({ 5 | path: 'form', 6 | getChildRoutes (nextState, callback) { 7 | require.ensure([], (require) => { 8 | callback(null, [ 9 | require('./containers/Input').default(), 10 | ]); 11 | }, 'form') 12 | }, 13 | }) -------------------------------------------------------------------------------- /src/routes/Feedback/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/10/18. 3 | */ 4 | export default () => ({ 5 | path: 'feedback', 6 | getChildRoutes (nextState, callback) { 7 | require.ensure([], (require) => { 8 | callback(null, [ 9 | require('./containers/Toast/index').default() 10 | ]); 11 | }, 'feedback') 12 | }, 13 | }) -------------------------------------------------------------------------------- /src/components/Form/components/Func.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/8/8. 3 | */ 4 | // 表单添加报错 5 | export function showError (errorText) { 6 | const errorBox = document.createElement('div'); 7 | errorBox.className = 'zby-form-error'; 8 | errorBox.innerText = errorText; 9 | document.body.appendChild(errorBox); 10 | } 11 | 12 | export function clearError () { 13 | document.querySelector('.zby-form-error').remove(); 14 | } -------------------------------------------------------------------------------- /config/environments.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | development: (config) => ({ 3 | compiler_public_path: `http://${config.server_host}:${config.server_port}/` 4 | }), 5 | production: (config) => ({ 6 | compiler_public_path: '/', 7 | compiler_fail_on_warning: false, 8 | compiler_hash_type: 'chunkhash', 9 | compiler_devtool: null, 10 | compiler_stats: { 11 | chunks: true, 12 | chunkModules: true, 13 | colors: true 14 | } 15 | }) 16 | } 17 | -------------------------------------------------------------------------------- /src/components/DataDisplay/Tooltip/components/StateComponent.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/11/16. 3 | */ 4 | import React from 'react' 5 | 6 | // 不能给传入的children增加div 7 | // 但是又要获取其真实 只能用ref 8 | // 无状态组件没有this 不能绑定ref 9 | // 转化一下 邦到一个有状态组件上 10 | class StateComponent extends React.Component { 11 | constructor (props) { 12 | super(props); 13 | } 14 | render () { 15 | return this.props.component; 16 | } 17 | } 18 | 19 | export default StateComponent -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-component 2 | 3 | 移动端react组件库，参考Antd-mobile制作。 4 | 5 | 效果图： 6 | ![效果图](https://github.com/Aus0049/react-component/blob/master/src/static/img/screen-shot-20171109.png) 7 | 8 | [在线预览地址](http://45.77.244.137:3000/)， 外网速度较慢，请耐心等待。 9 | 10 | # 执行步骤 11 | 12 | ``` 13 | git clone https://github.com/Aus0049/react-component.git 14 | npm install 15 | npm start 16 | ``` 17 | 18 | 浏览器打开`localhost:3000`，即可查看效果。 19 | 20 | 专门适配移动端，组件不定期更新🍺 21 | 22 | 2017年10月份开始会对所有组件进行重构，更改项目目录结构，为了年底在npm上发包。 23 | 24 | -------------------------------------------------------------------------------- /src/routes/DataDisplay/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/10/14. 3 | */ 4 | export default () => ({ 5 | path: 'data-display', 6 | getChildRoutes (nextState, callback) { 7 | require.ensure([], (require) => { 8 | callback(null, [ 9 | require('./containers/List/').default(), 10 | require('./containers/Carousel/').default(), 11 | require('./containers/Tooltip/').default(), 12 | require('./containers/Badge/').default(), 13 | ]); 14 | }, 'data-display') 15 | }, 16 | }) -------------------------------------------------------------------------------- /src/containers/AppContainer.js: -------------------------------------------------------------------------------- 1 | // 项目的根组件 2 | import React, { Component } from 'react' 3 | import { browserHistory, Router } from 'react-router' 4 | 5 | class AppContainer extends Component { 6 | // 验证参数 7 | static propTypes = { 8 | routes : React.PropTypes.object.isRequired 9 | }; 10 | // 禁止reRender 11 | shouldComponentUpdate () { 12 | return false 13 | } 14 | 15 | render () { 16 | const { routes } = this.props; 17 | 18 | return ( 19 |
20 | 21 |
22 | ) 23 | } 24 | } 25 | 26 | export default AppContainer 27 | -------------------------------------------------------------------------------- /online.json: -------------------------------------------------------------------------------- 1 | { 2 | "name" : "react-component", // 应用名称 3 | "script" : "./bin/online.js", // 实际启动脚本 4 | "cwd" : "./", // 当前工作路径 5 | "watch": [ // 监控变化的目录，一旦变化，自动重启 6 | "bin", 7 | "build", 8 | "src" 9 | ], 10 | "ignore_watch" : [ // 从监控目录中排除 11 | "node_modules", 12 | "config", 13 | "dist", 14 | "server" 15 | ], 16 | "watch_options": { 17 | "followSymlinks": false 18 | }, 19 | "error_file" : "./logs/app-err.log", // 错误日志路径 20 | "out_file" : "./logs/app-out.log", // 普通日志路径 21 | "env": { 22 | "NODE_ENV": "production", // 环境参数，当前指定为生产环境 23 | "PORT": 3000, 24 | "DEBUG": "app:*" 25 | } 26 | } -------------------------------------------------------------------------------- /src/components/Form/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/7/17. 3 | */ 4 | import Input from './components/Input' 5 | import TextArea from './components/TextArea' 6 | import DateRange from './components/DateRange' 7 | import DateTime from './components/DateTime' 8 | import Select from './components/Select' 9 | import Checkbox from './components/Checkbox' 10 | import Number from './components/Number' 11 | import Switch from './components/Switch' 12 | import Form from './components/Form' 13 | import Validate from './components/Validate' 14 | 15 | export { 16 | Input, 17 | TextArea, 18 | Number, 19 | DateRange, 20 | DateTime, 21 | Select, 22 | Checkbox, 23 | Switch, 24 | Form, 25 | Validate 26 | } -------------------------------------------------------------------------------- /src/components/Feedback/Popover/components/Popover.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/9/6. 3 | */ 4 | import React from 'react' 5 | import classNames from 'classnames' 6 | 7 | class Popover extends React.Component { 8 | constructor (props) { 9 | super(props); 10 | this.state = { 11 | isAppear: false 12 | } 13 | } 14 | handle (e) { 15 | this.setState({isAppear: true}); 16 | } 17 | render () { 18 | 19 | return ( 20 |
21 | {this.props.children} 22 | {this.state.isAppear ?
1111
: ''} 23 |
24 | ); 25 | } 26 | } 27 | 28 | export default Popover -------------------------------------------------------------------------------- /src/routes/DataEntry/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/10/13. 3 | */ 4 | export default () => ({ 5 | path: 'data-entry', 6 | getChildRoutes (nextState, callback) { 7 | require.ensure([], (require) => { 8 | callback(null, [ 9 | require('./containers/Button/index').default(), 10 | require('./containers/Switch/index').default(), 11 | require('./containers/DatePicker/index').default(), 12 | require('./containers/Picker/index').default(), 13 | require('./containers/PickerView/index').default(), 14 | require('./containers/Uploader/index').default(), 15 | ]); 16 | }, 'data-entry') 17 | }, 18 | }) 19 | -------------------------------------------------------------------------------- /bin/compile.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs-extra') 2 | const debug = require('debug')('app:bin:compile') 3 | const webpackCompiler = require('../build/webpack-compiler') 4 | const webpackConfig = require('../build/webpack.config') 5 | const config = require('../config') 6 | 7 | const paths = config.utils_paths 8 | 9 | const compile = () => { 10 | return Promise.resolve() 11 | .then(() => webpackCompiler(webpackConfig)) 12 | .then(stats => { 13 | fs.copySync(paths.client('static'), paths.dist()) 14 | }) 15 | .then(() => { 16 | debug('Compilation completed successfully.') 17 | }) 18 | .catch((err) => { 19 | debug('Compiler encountered an error.', err) 20 | process.exit(1) 21 | }) 22 | } 23 | 24 | compile() 25 | -------------------------------------------------------------------------------- /src/components/DataEntry/Uploader/style/uploader.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | $prefixCls: 'zby-uploader'; 4 | 5 | // Uploader 6 | .#{$prefixCls} { 7 | width: 100%; 8 | padding: 20px; 9 | background: #fff; 10 | 11 | .#{$prefixCls}-button { 12 | display: inline-block; 13 | width: 160px; 14 | height: 160px; 15 | border-radius: 5px; 16 | border: 2px dashed #d9d9d9; 17 | vertical-align: top; 18 | text-align: center; 19 | color: #999; 20 | 21 | box-sizing: border-box; 22 | 23 | .fa { 24 | display: inline-block; 25 | margin-top: 10px; 26 | font-size: 60px; 27 | line-height: 90px; 28 | } 29 | 30 | .text { 31 | font-size: 28px; 32 | } 33 | } 34 | 35 | .file-input { 36 | display: none; 37 | } 38 | } -------------------------------------------------------------------------------- /src/components/DataDisplay/ListTitle/components/ListTitle.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/4/1. 3 | */ 4 | import React from 'react' 5 | import classNames from 'classnames' 6 | import '../style/index.scss' 7 | 8 | const ListTitle = (props) => { 9 | const {title, align} = props; 10 | 11 | return ( 12 |
{title}
13 | ) 14 | }; 15 | 16 | // 用于展示列表最上方 列表数据的title 17 | // title: title展示名称 必填 字数最好不要太多 溢出文字会...显示 18 | // align: 对齐方式 可选值 枚举 "center" "right" 默认或者不填是左对齐 19 | ListTitle.propTypes = { 20 | title: React.PropTypes.string.isRequired, 21 | align: React.PropTypes.oneOf(['left', 'center', 'right']) 22 | }; 23 | ListTitle.defaultProps = { 24 | align: 'left' 25 | }; 26 | 27 | export default ListTitle -------------------------------------------------------------------------------- /src/components/DataDisplay/ListTitle/style/index.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | $viColor: #00b4a5; 4 | $darkViColor: #009486; 5 | $linearViColor: linear-gradient(to right, #31D5A1, #00B4A5); 6 | $lightGray: #ddd; 7 | $darkGray: #bbb; 8 | 9 | // px2rem并没有自动实现该功能 还是手动加上吧 10 | @mixin font-dpr($font-size){ 11 | font-size: $font-size; 12 | 13 | [data-dpr="2"] & { 14 | font-size: $font-size * 2; 15 | } 16 | 17 | [data-dpr="3"] & { 18 | font-size: $font-size * 3; 19 | } 20 | } 21 | 22 | // list title 23 | .zby-list-title { 24 | padding: 0 40px; 25 | @include font-dpr(14px); 26 | line-height: 80px; 27 | overflow: hidden; 28 | text-overflow: ellipsis; 29 | white-space:nowrap; 30 | vertical-align: top; 31 | 32 | &.center { 33 | text-align: center; 34 | } 35 | 36 | &.right { 37 | text-align: right; 38 | } 39 | } -------------------------------------------------------------------------------- /src/static/sass/component.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | $viColor: #00b4a5; 4 | $darkViColor: #009486; 5 | $linearViColor: linear-gradient(to right, #31D5A1, #00B4A5); 6 | $lightGray: #ddd; 7 | $darkGray: #bbb; 8 | 9 | // px2rem并没有自动实现该功能 还是手动加上吧 10 | @mixin font-dpr($font-size){ 11 | font-size: $font-size; 12 | 13 | [data-dpr="2"] & { 14 | font-size: $font-size * 2; 15 | } 16 | 17 | [data-dpr="3"] & { 18 | font-size: $font-size * 3; 19 | } 20 | } 21 | 22 | // * 23 | a { 24 | background: transparent; 25 | text-decoration: none; 26 | 27 | &:focus { 28 | outline: none; 29 | } 30 | &:hover { 31 | text-decoration: none; 32 | } 33 | } 34 | 35 | // Mask 36 | .zby-mask { 37 | position: fixed; 38 | left: 0; 39 | right: 0; 40 | top: 0; 41 | bottom: 0; 42 | background: #000; 43 | z-index: 100; 44 | opacity: .3; 45 | } 46 | 47 | -------------------------------------------------------------------------------- /src/layout/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import 'normalize.css' 3 | import 'sass/index.scss' 4 | import 'sass/component.scss' 5 | import ReactCSSTransitionGroup from 'react-addons-css-transition-group' 6 | require('font-awesome/css/font-awesome.css'); 7 | 8 | 9 | class Layout extends React.Component { 10 | render () { 11 | return ( 12 | 19 |
20 | {this.props.children} 21 |
22 | 23 | ) 24 | } 25 | } 26 | 27 | export default Layout 28 | -------------------------------------------------------------------------------- /src/containers/Feedback/PopoverPage.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/9/6. 3 | */ 4 | import React from 'react' 5 | import ListTitle from '../../components/DataDisplay/ListTitle/' 6 | import Button from '../../components/DataEntry/Button/components/Button' 7 | import Popover from '../../components/Feedback/Popover/' 8 | import Tools from '../../components/Tools/Tools' 9 | 10 | const PopoverPage = () => { 11 | return ( 12 |
13 |

14 | {Tools.linkTo('/index')}} /> 15 | Toast 16 |

17 | 18 |
19 | 20 | 21 | 22 |
23 |
24 | ) 25 | } 26 | 27 | export default PopoverPage -------------------------------------------------------------------------------- /src/components/DataDisplay/Carousel/util/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/11/10. 3 | */ 4 | // 简易实现jq animate 5 | // 不断调用setInterval 实现动画 6 | export const animationFunc = (obj, style, time, callback) => { 7 | const currentStyle = obj.style; 8 | const diffObj = {}; 9 | const step = 20, intervalNum = time / step; 10 | let num = 0; 11 | 12 | for(let i in style){ 13 | diffObj[i] = (Number.parseFloat(style[i]) - Number.parseFloat(currentStyle[i])) / intervalNum; 14 | } 15 | 16 | // 开始调用 17 | const timer = setInterval(()=>{ 18 | if(num < intervalNum){ 19 | for(let i in diffObj){ 20 | currentStyle[i] = Number.parseFloat(currentStyle[i]) + diffObj[i] + 'px'; 21 | } 22 | 23 | num++; 24 | } else { 25 | clearInterval(timer); 26 | // 回调 27 | if(callback) callback(); 28 | } 29 | }, step); 30 | }; -------------------------------------------------------------------------------- /src/routes/DataEntry/containers/Uploader/UploaderPage.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/10/19. 3 | */ 4 | import React from 'react' 5 | import ListTitle from 'components/DataDisplay/ListTitle/' 6 | import Uploader from 'components/DataEntry/Uploader/' 7 | import Tools from 'components/Tools/Tools' 8 | 9 | class UploaderPage extends React.Component { 10 | constructor (props) { 11 | super(props); 12 | this.state = {}; 13 | } 14 | render () { 15 | return ( 16 |
17 |

18 | {Tools.linkTo('/')}} /> 19 | Uploader 20 |

21 | 22 | 23 | 27 |
28 | ) 29 | } 30 | } 31 | 32 | export default UploaderPage 33 | -------------------------------------------------------------------------------- /src/components/DataDisplay/Carousel/style/carousel.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import '../../../../static/sass/base.scss'; 4 | 5 | $prefixCls: 'zby-carousel'; 6 | 7 | // Carousel 8 | .#{$prefixCls} { 9 | width: 100%; 10 | position: relative; 11 | overflow: hidden; 12 | 13 | .#{$prefixCls}-list { 14 | overflow: hidden; 15 | 16 | .#{$prefixCls}-figure { 17 | float: left; 18 | height: 300px; 19 | background: #333333; 20 | } 21 | } 22 | 23 | .#{$prefixCls}-dot-box { 24 | position: absolute; 25 | left: 50%; 26 | bottom: 15px; 27 | 28 | transform: translate(-50%, 0); 29 | 30 | .#{$prefixCls}-dot { 31 | display: inline-block; 32 | margin-right: 20px; 33 | width: 15px; 34 | height: 15px; 35 | border-radius: 50%; 36 | background: #fff; 37 | transition: all .3s; 38 | 39 | &.active { 40 | transform: scale(1.5, 1.5); 41 | } 42 | 43 | &:last-of-type { 44 | margin-right: 0; 45 | } 46 | } 47 | } 48 | } 49 | 50 | -------------------------------------------------------------------------------- /src/components/DataDisplay/List/style/list.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import '../../../../static/sass/base.scss'; 4 | 5 | $prefixCls: 'zby-list'; 6 | $itemPrefixCls: 'zby-item'; 7 | 8 | /* List */ 9 | .#{$prefixCls} { 10 | &-header { 11 | padding: 0 40px; 12 | @include font-dpr(14px); 13 | line-height: 80px; 14 | overflow: hidden; 15 | text-overflow: ellipsis; 16 | white-space:nowrap; 17 | vertical-align: top; 18 | } 19 | 20 | &-footer { 21 | padding: 0 40px; 22 | @include font-dpr(14px); 23 | line-height: 80px; 24 | overflow: hidden; 25 | text-overflow: ellipsis; 26 | white-space:nowrap; 27 | vertical-align: top; 28 | } 29 | 30 | &-body { 31 | position: relative; 32 | background-color: #fff; 33 | @include border-top(); 34 | 35 | &:after { 36 | @include list-item-bottom-line(0px); 37 | } 38 | 39 | div:not(:last-child) { 40 | .#{$itemPrefixCls}:after, 41 | &.#{$itemPrefixCls}:after { 42 | @include list-item-bottom-line(); 43 | } 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /src/components/DataDisplay/Tag/style/index.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | $viColor: #00b4a5; 4 | $darkViColor: #009486; 5 | $linearViColor: linear-gradient(to right, #31D5A1, #00B4A5); 6 | $lightGray: #ddd; 7 | $darkGray: #bbb; 8 | 9 | // Tag 10 | .zby-tag-box { 11 | display: inline-block; 12 | position: relative; 13 | margin: 0 10px 20px 10px; 14 | padding: 16px 20px; 15 | border: 1px solid $darkGray; 16 | border-radius: 5px; 17 | background: #fff; 18 | font-size: 28px; 19 | color: #888; 20 | word-break: break-all; 21 | 22 | &.selected { 23 | border-color: $viColor; 24 | color: $viColor; 25 | } 26 | 27 | &.disabled { 28 | color: #bbb; 29 | background: #ddd; 30 | border-color: #ddd; 31 | } 32 | 33 | .close { 34 | position: absolute; 35 | right: -20px; 36 | top: -20px; 37 | width: 40px; 38 | height: 40px; 39 | border: 1px solid $darkGray; 40 | background: #fff; 41 | border-radius: 50%; 42 | font-size: 24px; 43 | line-height: 40px; 44 | color: #888; 45 | text-align: center; 46 | } 47 | } -------------------------------------------------------------------------------- /server/main.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | const debug = require('debug')('app:server') 3 | const webpack = require('webpack') 4 | const webpackConfig = require('../build/webpack.config') 5 | const config = require('../config') 6 | 7 | const app = express() 8 | const paths = config.utils_paths 9 | 10 | app.use(require('connect-history-api-fallback')()) 11 | 12 | if (config.env === 'development') { 13 | const compiler = webpack(webpackConfig) 14 | 15 | debug('Enable webpack dev and HMR middleware') 16 | app.use(require('webpack-dev-middleware')(compiler, { 17 | publicPath : webpackConfig.output.publicPath, 18 | contentBase : paths.client(), 19 | hot : true, 20 | quiet : config.compiler_quiet, 21 | noInfo : config.compiler_quiet, 22 | lazy : false, 23 | stats : config.compiler_stats 24 | })) 25 | app.use(require('webpack-hot-middleware')(compiler)) 26 | 27 | app.use(express.static(paths.client('static'))) 28 | } else { 29 | app.use(express.static(paths.dist())) 30 | } 31 | 32 | module.exports = app 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/components/DataDisplay/Badge/style/badge.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import '../../../../static/sass/base.scss'; 4 | 5 | $prefixCls: 'zby-badge'; 6 | 7 | // Badge 8 | .#{$prefixCls} { 9 | display: inline-block; 10 | margin-top: -5px; 11 | line-height: 1.5; 12 | vertical-align: middle; 13 | 14 | &.dot { 15 | position: absolute; 16 | display: block; 17 | right: -5px; 18 | top: -5px; 19 | height: 20px; 20 | width: 20px; 21 | border-radius: 100%; 22 | background: #ff5b05; 23 | z-index: 10; 24 | } 25 | 26 | &.ribbon { 27 | position: absolute; 28 | top: 40px; 29 | right: 0; 30 | transform: rotate(45deg); 31 | transform-origin: right bottom; 32 | 33 | .#{$prefixCls}-text { 34 | display: inline-block; 35 | width: 80px; 36 | border-radius: 0; 37 | } 38 | } 39 | 40 | &-text { 41 | height: 32px; 42 | min-width: 20px; 43 | padding: 0 15px; 44 | border-radius: 24px; 45 | text-align: center; 46 | font-size: 24px; 47 | color: #fff; 48 | background-color: #ff5b05; 49 | white-space: nowrap; 50 | } 51 | } 52 | 53 | .#{$prefixCls}-wrap { 54 | position: relative; 55 | } -------------------------------------------------------------------------------- /src/components/Form/components/FormLineHOC.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/12/1. 3 | */ 4 | import React from 'react' 5 | import classNames from 'classnames' 6 | import Icon from 'component-font-awesome' 7 | import Tooltip from 'components/DataDisplay/Tooltip/' 8 | import '../style/form.scss' 9 | 10 | // 生成表单的HOC 11 | export default function FormLineHOC(WrappedComponent) { 12 | // 反向继承 13 | return class FormLine extends WrappedComponent { 14 | render () { 15 | const {prefixCls, labelName, errorText, required} = this.props; 16 | 17 | return ( 18 |
19 |
20 | 21 |
{labelName}
22 |
23 | {errorText ? 24 | {super.render()} 25 | : 26 | super.render() 27 | } 28 |
29 | ); 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /bin/online.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/11/8. 3 | */ 4 | // 压缩之后在线运行 5 | const express = require('express') 6 | const webpack = require('webpack') 7 | const webpackConfig = require('../build/webpack.config') 8 | const config = require('../config') 9 | const debug = require('debug')('app:prod:online') 10 | const fs = require('fs-extra') 11 | const webpackCompiler = require('../build/webpack-compiler') 12 | 13 | const app = express() 14 | const paths = config.utils_paths 15 | 16 | app.use(require('connect-history-api-fallback')()) 17 | 18 | const compile = () => { 19 | return Promise.resolve() 20 | .then(() => webpackCompiler(webpackConfig)) 21 | .then(stats => { 22 | fs.copySync(paths.client('static'), paths.dist()) 23 | }) 24 | .then(() => { 25 | debug('Compilation completed successfully.') 26 | }) 27 | .catch((err) => { 28 | debug('Compiler encountered an error.', err) 29 | process.exit(1) 30 | }) 31 | }; 32 | 33 | compile() 34 | .then(()=>{ 35 | app.use(express.static(paths.dist())) 36 | debug(`🍺server running on port: ${config.server_port}🍺`) 37 | app.listen(config.server_port); 38 | }); 39 | -------------------------------------------------------------------------------- /src/components/Feedback/Toast/style/notice.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import '../../../../static/sass/base.scss'; 4 | 5 | $prefixCls: 'zby-notice'; 6 | 7 | // Notice 8 | .#{$prefixCls} { 9 | position: absolute; 10 | box-sizing: border-box; 11 | left: 50%; 12 | top: 30%; 13 | margin: 0; 14 | width: 100%; 15 | padding: 20px 30px; 16 | background: rgba(0,0,0, .7); 17 | border-radius: 10px; 18 | text-align: center; 19 | font-size: 28px; 20 | line-height: 42px; 21 | color: #fff; 22 | z-index: 1110; 23 | 24 | transition: all .3s; 25 | transform: translate3D(-50%, -50%, 0) scale(1, 1); 26 | 27 | &.leave { 28 | transform: translate3D(-50%, -100%, 0); 29 | opacity: 0; 30 | } 31 | 32 | // 正常提示 33 | &.info { 34 | animation: Flop .5s linear; 35 | } 36 | 37 | // 成功提示 38 | &.success { 39 | animation: BombIn .3s; 40 | } 41 | 42 | // 警告提示⚠️ 43 | &.warning { 44 | animation: slideInFromBottom .3s; 45 | } 46 | 47 | // 错误提示 48 | &.error { 49 | animation: shake .5s; 50 | } 51 | 52 | .#{$prefixCls}-icon { 53 | padding: 20px; 54 | font-size: 80px; 55 | text-align: center; 56 | color: #fff; 57 | } 58 | 59 | .#{$prefixCls}-content { 60 | font-size: 28px; 61 | text-align: center; 62 | color: #fff; 63 | } 64 | } -------------------------------------------------------------------------------- /src/components/DataEntry/Picker/style/picker.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import '../../../../static/sass/base.scss'; 4 | 5 | $prefixCls: 'zby-picker'; 6 | 7 | // Picker 8 | .#{$prefixCls} { 9 | .#{$prefixCls}-popup-mask { 10 | position: fixed; 11 | left: 0; 12 | right: 0; 13 | top: 0; 14 | bottom: 0; 15 | z-index: 1000; 16 | background-color: rgba(0,0,0,.4); 17 | transition: all .3s; 18 | 19 | &.hide { 20 | z-index: -1; 21 | background-color: rgba(0,0,0,0); 22 | } 23 | } 24 | 25 | .#{$prefixCls}-popup-wrap { 26 | position: fixed; 27 | left: 0; 28 | right: 0; 29 | bottom: -100%; 30 | z-index: 1000; 31 | background-color: #fff; 32 | transition: all .3s; 33 | 34 | &.popup { 35 | bottom: 0; 36 | } 37 | 38 | .#{$prefixCls}-popup-header { 39 | display: flex; 40 | border-bottom: 1px solid #ddd; 41 | 42 | .#{$prefixCls}-popup-item { 43 | padding: 10px 30px; 44 | height: 60px; 45 | font-size: 34px; 46 | line-height: 60px; 47 | color: #000; 48 | text-align: center; 49 | 50 | &.#{$prefixCls}-header-title { 51 | flex: 1; 52 | } 53 | 54 | &.#{$prefixCls}-header-left, 55 | &.#{$prefixCls}-header-right { 56 | color: $viColor; 57 | } 58 | } 59 | } 60 | } 61 | } -------------------------------------------------------------------------------- /src/components/DataEntry/DataPicker/style/datePicker.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @import '../../../../static/sass/base.scss'; 4 | 5 | $prefixCls: 'zby-picker'; 6 | 7 | // Picker 8 | .#{$prefixCls} { 9 | .#{$prefixCls}-popup-mask { 10 | position: fixed; 11 | left: 0; 12 | right: 0; 13 | top: 0; 14 | bottom: 0; 15 | z-index: 1000; 16 | background-color: rgba(0,0,0,.4); 17 | transition: all .3s; 18 | 19 | &.hide { 20 | z-index: -1; 21 | background-color: rgba(0,0,0,0); 22 | } 23 | } 24 | 25 | .#{$prefixCls}-popup-wrap { 26 | position: fixed; 27 | left: 0; 28 | right: 0; 29 | bottom: -100%; 30 | z-index: 1000; 31 | background-color: #fff; 32 | transition: all .3s; 33 | 34 | &.popup { 35 | bottom: 0; 36 | } 37 | 38 | .#{$prefixCls}-popup-header { 39 | display: flex; 40 | border-bottom: 1px solid #ddd; 41 | 42 | .#{$prefixCls}-popup-item { 43 | padding: 10px 30px; 44 | height: 60px; 45 | font-size: 34px; 46 | line-height: 60px; 47 | color: #000; 48 | text-align: center; 49 | 50 | &.#{$prefixCls}-header-title { 51 | flex: 1; 52 | } 53 | 54 | &.#{$prefixCls}-header-left, 55 | &.#{$prefixCls}-header-right { 56 | color: $viColor; 57 | } 58 | } 59 | } 60 | } 61 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // 项目入口文件 2 | import React from 'react' 3 | import ReactDOM from 'react-dom' 4 | import AppContainer from './containers/AppContainer' 5 | 6 | // 接受服务器端传来的state 7 | // 初始化state 8 | 9 | // 定义根节点的render 10 | // render的时候 传进去store和router 11 | const MOUNT_NODE = document.getElementById('root') 12 | 13 | let render = () => { 14 | const routes = require('./routes/index').default() 15 | 16 | ReactDOM.render( 17 | , 18 | MOUNT_NODE 19 | ) 20 | } 21 | 22 | // 开发环境下 开启开发工具调试 23 | if (window.__DEV__) { 24 | if (window.devToolsExtension) { 25 | window.devToolsExtension.open() 26 | } 27 | } 28 | 29 | // This code is excluded from production bundle 30 | // 开发环境下的报错 31 | if (window.__DEV__) { 32 | if (module.hot) { 33 | // Development render functions 34 | const renderApp = render 35 | const renderError = (error) => { 36 | const RedBox = require('redbox-react').default 37 | 38 | ReactDOM.render(, MOUNT_NODE) 39 | } 40 | 41 | // Wrap render in try/catch 42 | render = () => { 43 | try { 44 | renderApp() 45 | } catch (error) { 46 | renderError(error) 47 | } 48 | } 49 | 50 | // Setup hot module replacement 51 | module.hot.accept('./routes/index', () => 52 | setImmediate(() => { 53 | ReactDOM.unmountComponentAtNode(MOUNT_NODE) 54 | render() 55 | }) 56 | ) 57 | } 58 | } 59 | 60 | // 非开发环境下 正常执行 61 | render() 62 | -------------------------------------------------------------------------------- /src/components/DataDisplay/List/components/List.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/4/1. 3 | */ 4 | import React from 'react' 5 | import Item from './Item' 6 | import classNames from 'classnames' 7 | import '../style/list.scss' 8 | 9 | // 用于包裹item的外层组件 10 | const List = (props) => { 11 | const { prefixCls, className, renderHeader, renderFooter, children, ...restProps } = props; 12 | const wrapClass = classNames(prefixCls, className); 13 | 14 | return ( 15 |
16 | {renderHeader ?
17 | {typeof renderHeader === 'function' ? renderHeader() : renderHeader} 18 |
: null} 19 | {children ?
{children}
: null} 20 | {renderFooter ?
21 | {typeof renderFooter === 'function' ? renderFooter() : renderFooter} 22 |
: null} 23 |
24 | ) 25 | }; 26 | 27 | // 列表展示数据项 28 | List.Item = Item; 29 | 30 | // List中的item 组件 31 | List.PropTypes = { 32 | prefixCls: React.PropTypes.string, // class前缀 33 | className: React.PropTypes.string, // 自定义class 34 | renderHeader: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.func]), // list上面的说明 35 | renderFooter: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.func]) // list结束的说明 36 | }; 37 | 38 | List.defaultProps = { 39 | prefixCls: 'zby-list' 40 | }; 41 | 42 | export default List -------------------------------------------------------------------------------- /src/components/DataDisplay/Badge/components/Badge.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/11/20. 3 | */ 4 | import React from 'react' 5 | import '../style/badge.scss' 6 | 7 | const Badge = (props) => { 8 | const {prefixCls, text, type, overflowCount, style, children} = props; 9 | let count = text; 10 | 11 | if(type === 'dot'){ 12 | return ( 13 |
14 | {children} 15 | 16 |
17 | ); 18 | } else if (type === 'ribbon') { 19 | return ( 20 |
21 | {text} 22 |
23 | ); 24 | } 25 | 26 | if(text === 0) return null; 27 | 28 | if (overflowCount && Number.parseInt(text) > overflowCount) { 29 | count = `${overflowCount}+`; 30 | } 31 | 32 | return ( 33 | 34 | {count} 35 | 36 | ); 37 | }; 38 | 39 | Badge.propTypes = { 40 | prefixCls: React.PropTypes.string, // 前缀class 41 | text: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]), // 徽章显示的字 42 | overflowCount: React.PropTypes.number, // 封顶数值 如99 text>99时候显示 99+ 为0的话不设置封顶 43 | type: React.PropTypes.oneOf(['ribbon', 'dot', 'common']) // 展现形式 右上角还是点 44 | }; 45 | 46 | Badge.defaultProps = { 47 | prefixCls: 'zby-badge', 48 | text: 0, 49 | overflowCount: 99, 50 | type: 'common' 51 | }; 52 | 53 | export default Badge; -------------------------------------------------------------------------------- /src/static/sass/index.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // px2rem并没有自动实现该功能 还是手动加上吧 4 | @mixin font-dpr($font-size){ 5 | font-size: $font-size; 6 | 7 | [data-dpr="2"] & { 8 | font-size: $font-size * 2; 9 | } 10 | 11 | [data-dpr="3"] & { 12 | font-size: $font-size * 3; 13 | } 14 | } 15 | 16 | body { 17 | overflow: hidden; 18 | background-color: #f8f8fb; 19 | color: #666; 20 | 21 | &:after { 22 | content: ''; 23 | position: fixed; 24 | left: 0; 25 | right: 0; 26 | top: 0; 27 | bottom: 0; 28 | background-color: #f8f8fb; 29 | z-index: -1; 30 | } 31 | } 32 | 33 | // 首页样式 34 | .page { 35 | padding-bottom: 40px; 36 | 37 | .title { 38 | padding-left: 40px; 39 | 40 | .fa { 41 | display: inline-block; 42 | margin-right: 10px; 43 | } 44 | } 45 | } 46 | 47 | .button-box { 48 | padding: 0 40px; 49 | } 50 | 51 | .button-group { 52 | display: flex; 53 | justify-content: space-between; 54 | } 55 | 56 | // 进出场动画 57 | // 飞入 58 | .slide-in-appear { 59 | transform: translate3D(100%, 0, 0); 60 | transition: all 300ms linear; 61 | 62 | &.slide-in-appear-active { 63 | transform: translate3D(0, 0, 0); 64 | } 65 | } 66 | 67 | .slide-in-enter { 68 | transform: translate3D(100%, 0, 0); 69 | transition: all 300ms linear; 70 | 71 | &.slide-in-enter-active { 72 | transform: translate3D(0, 0, 0); 73 | } 74 | } 75 | 76 | // 向左滑出 77 | .slide-in-leave { 78 | position: absolute; 79 | left: 0; 80 | top: 0; 81 | opacity: 1; 82 | transform: translate3D(0, 0, 0); 83 | transition: all 300ms linear; 84 | 85 | &.slide-in-leave-active { 86 | opacity: 0.01; 87 | transform: translate3D(-100%, 0, 0); 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /src/components/DataEntry/PickerView/style/picker-column.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | $prefixCls: 'zby-picker-column'; 4 | 5 | .#{$prefixCls} { 6 | flex: 1; 7 | 8 | &-list { 9 | position: relative; 10 | height: 400px; 11 | overflow: hidden; 12 | 13 | .#{$prefixCls}-window { 14 | position: absolute; 15 | left: 0; 16 | right: 0; 17 | top: 0; 18 | bottom: 0; 19 | background-image: 20 | linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.4)), 21 | linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.4)); 22 | background-position: top, bottom; 23 | background-size: 100% 166px; 24 | background-repeat: no-repeat; 25 | z-index: 3; 26 | } 27 | 28 | .#{$prefixCls}-indicator { 29 | box-sizing: border-box; 30 | position: absolute; 31 | top: 50%; 32 | left: 0; 33 | right: 0; 34 | height: 68px; 35 | border-top: 1px solid #ddd; 36 | border-bottom: 1px solid #ddd; 37 | transform: translate3D(0, -50%, 0); 38 | z-index: 3; 39 | } 40 | 41 | .#{$prefixCls}-content { 42 | position: absolute; 43 | left: 0; 44 | top: 0; 45 | right: 0; 46 | padding: 166px 0; 47 | transform: translate3D(0, 0, 0); 48 | z-index: 1; 49 | 50 | .#{$prefixCls}-col { 51 | height: 68px; 52 | padding: 0 10px; 53 | font-size: 34px; 54 | color: #000; 55 | text-align: center; 56 | line-height: 68px; 57 | overflow: hidden; 58 | text-overflow: ellipsis; 59 | white-space:nowrap; 60 | 61 | &.selected { 62 | font-size: 38px; 63 | } 64 | } 65 | } 66 | } 67 | } -------------------------------------------------------------------------------- /src/containers/Form/TextAreaPage.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Aus on 2017/7/18. 3 | */ 4 | import React from 'react' 5 | import ListTitle from '../../components/DataDisplay/ListTitle/' 6 | import {TextArea} from '../../components/Form/' 7 | import Tools from '../../components/Tools/Tools' 8 | 9 | class TextAreaPage extends React.Component { 10 | constructor (props) { 11 | super(props); 12 | this.state = { 13 | value1: '一二三四五六七八九十一二三四五六七八九十', 14 | value2: 'ABC', 15 | value3: '一二三' 16 | }; 17 | } 18 | handleChange (type, e) { 19 | const value = e.target.value; 20 | console.log({[type]: value}); 21 | this.setState({ 22 | [type]: value 23 | }); 24 | } 25 | render () { 26 | const {value1, value2, value3} = this.state; 27 | 28 | return ( 29 |
30 |

31 | {Tools.linkTo('/index')}} /> 32 | Input 33 |

34 | 35 | 36 | 37 |
38 |