├── src
    ├── styles
    │   ├── mixins.css
    │   ├── variable.css
    │   └── variable.scss
    ├── components
    │   ├── tab
    │   │   ├── index.js
    │   │   ├── TabItem.js
    │   │   └── Tab.js
    │   ├── select
    │   │   ├── index.js
    │   │   ├── Option.js
    │   │   ├── Picker.js
    │   │   └── Select.js
    │   ├── flexbox
    │   │   ├── index.js
    │   │   ├── FlexboxItem.js
    │   │   └── Flexbox.js
    │   ├── radio
    │   │   ├── index.js
    │   │   ├── RadioGroup.js
    │   │   └── Radio.js
    │   ├── swiper
    │   │   ├── index.js
    │   │   ├── SwiperItem.js
    │   │   └── Swiper.js
    │   ├── tabbar
    │   │   ├── index.js
    │   │   ├── TabbarItem.js
    │   │   └── Tabbar.js
    │   ├── checker
    │   │   ├── index.js
    │   │   ├── Checker.js
    │   │   └── CheckerGroup.js
    │   ├── marquee
    │   │   ├── index.js
    │   │   ├── MarqueeItem.js
    │   │   └── Marquee.js
    │   ├── sidebar
    │   │   ├── index.js
    │   │   ├── SidebarItem.js
    │   │   └── Sidebar.js
    │   ├── checkbox
    │   │   ├── index.js
    │   │   ├── CheckboxGroup.js
    │   │   └── Checkbox.js
    │   ├── accordion
    │   │   ├── index.js
    │   │   ├── Accordion.js
    │   │   └── AccordionItem.js
    │   ├── button-tab
    │   │   ├── index.js
    │   │   ├── ButtonTabItem.js
    │   │   └── ButtonTab.js
    │   ├── actionsheet
    │   │   ├── index.js
    │   │   ├── ActionsheetItem.js
    │   │   └── Actionsheet.js
    │   ├── alert
    │   │   └── index.js
    │   ├── icon
    │   │   └── index.js
    │   ├── divider
    │   │   └── index.js
    │   ├── body
    │   │   └── index.js
    │   ├── message
    │   │   └── index.js
    │   ├── group
    │   │   └── index.js
    │   ├── badge
    │   │   └── index.js
    │   ├── spinner
    │   │   └── index.js
    │   ├── overlay
    │   │   └── index.js
    │   ├── cell
    │   │   └── index.js
    │   ├── layout
    │   │   └── index.js
    │   ├── qrcode
    │   │   └── index.js
    │   ├── AsyncComponent.js
    │   ├── rater
    │   │   └── index.js
    │   ├── switch
    │   │   └── index.js
    │   ├── button
    │   │   └── index.js
    │   ├── arrow
    │   │   └── index.js
    │   ├── nav
    │   │   └── index.js
    │   ├── ConnectComponent.js
    │   ├── password
    │   │   └── index.js
    │   ├── prompt
    │   │   └── index.js
    │   ├── remtopx
    │   │   └── index.js
    │   ├── popover
    │   │   └── index.js
    │   ├── input
    │   │   └── index.js
    │   ├── textarea
    │   │   └── index.js
    │   ├── input-number
    │   │   └── index.js
    │   ├── ripple
    │   │   └── index.js
    │   ├── preview
    │   │   └── index.js
    │   ├── toast
    │   │   └── index.js
    │   ├── sticky
    │   │   └── index.js
    │   ├── popup-picker
    │   │   └── index.js
    │   └── img
    │   │   └── index.js
    ├── store
    │   ├── root
    │   │   ├── action.js
    │   │   └── reducer.js
    │   ├── todo
    │   │   ├── action.js
    │   │   └── reducer.js
    │   └── index.js
    ├── index.css
    ├── index.scss
    ├── App.scss
    ├── App.css
    ├── App.test.js
    ├── views
    │   ├── Qrcode.js
    │   ├── Group.js
    │   ├── Nav.js
    │   ├── Message.js
    │   ├── Divider.js
    │   ├── Password.js
    │   ├── Spinner.js
    │   ├── InputNumber.js
    │   ├── Input.js
    │   ├── Ripple.js
    │   ├── Marquee.js
    │   ├── Textarea.js
    │   ├── IndexList.js
    │   ├── Cell.js
    │   ├── Badge.js
    │   ├── Sidebar.js
    │   ├── Alert.js
    │   ├── Flexbox.js
    │   ├── Tabbar.js
    │   ├── ButtonTab.js
    │   ├── Rater.js
    │   ├── Switch.js
    │   ├── Picker.js
    │   ├── Swiper.js
    │   ├── Range.js
    │   ├── Tab.js
    │   ├── Radio.js
    │   ├── Popover.js
    │   ├── Accordion.js
    │   ├── Button.js
    │   ├── Layout.js
    │   ├── Preview.js
    │   ├── Sticky.js
    │   ├── Img.js
    │   ├── Checker.js
    │   ├── Swipeout.js
    │   ├── Confirm.js
    │   ├── Prompt.js
    │   ├── Checkbox.js
    │   ├── Actionsheet.js
    │   ├── ListView.js
    │   ├── Popup.js
    │   ├── Toast.js
    │   ├── Select.js
    │   └── Home.js
    ├── devtools
    │   └── index.js
    ├── App.js
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js
├── public
    ├── robots.txt
    ├── favicon.ico
    ├── images
    │   ├── code.png
    │   ├── logo.png
    │   └── github.png
    ├── manifest.json
    └── index.html
├── .gitignore
├── config
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── pnpTs.js
    ├── paths.js
    ├── env.js
    └── modules.js
├── scripts
    └── test.js
├── components.json
├── README.md
└── package.json


/src/styles/mixins.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/styles/variable.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yunfeihuang/react-components/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/images/code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yunfeihuang/react-components/HEAD/public/images/code.png


--------------------------------------------------------------------------------
/public/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yunfeihuang/react-components/HEAD/public/images/logo.png


--------------------------------------------------------------------------------
/public/images/github.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yunfeihuang/react-components/HEAD/public/images/github.png


--------------------------------------------------------------------------------
/src/components/tab/index.js:
--------------------------------------------------------------------------------
1 | import Tab from './Tab';
2 | import TabItem from './TabItem';
3 | 
4 | export {
5 |   Tab,
6 |   TabItem
7 | }
8 | 


--------------------------------------------------------------------------------
/src/store/root/action.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   action (data) {
3 |     return {
4 |       type: 'ADD_TODO',
5 |       data
6 |     }
7 |   }
8 | }


--------------------------------------------------------------------------------
/src/components/select/index.js:
--------------------------------------------------------------------------------
1 | import Select from './Select';
2 | import Option from './Option';
3 | 
4 | export {
5 |   Select,
6 |   Option
7 | }
8 | 


--------------------------------------------------------------------------------
/src/components/flexbox/index.js:
--------------------------------------------------------------------------------
1 | import Flexbox from './Flexbox'
2 | import FlexboxItem from './FlexboxItem'
3 | export {
4 |   Flexbox,
5 |   FlexboxItem
6 | }


--------------------------------------------------------------------------------
/src/components/radio/index.js:
--------------------------------------------------------------------------------
1 | import Radio from './Radio';
2 | import RadioGroup from './RadioGroup';
3 | 
4 | export {
5 |   Radio,
6 |   RadioGroup
7 | }
8 | 


--------------------------------------------------------------------------------
/src/components/swiper/index.js:
--------------------------------------------------------------------------------
1 | import Swiper from './Swiper';
2 | import SwiperItem from './SwiperItem';
3 | 
4 | export {
5 |   Swiper,
6 |   SwiperItem
7 | }
8 | 


--------------------------------------------------------------------------------
/src/components/tabbar/index.js:
--------------------------------------------------------------------------------
1 | import Tabbar from './Tabbar';
2 | import TabbarItem from './TabbarItem';
3 | 
4 | export {
5 |   Tabbar,
6 |   TabbarItem
7 | }
8 | 


--------------------------------------------------------------------------------
/src/components/checker/index.js:
--------------------------------------------------------------------------------
1 | import Checker from './Checker';
2 | import CheckerGroup from './CheckerGroup';
3 | 
4 | export {
5 |   Checker,
6 |   CheckerGroup
7 | }
8 | 


--------------------------------------------------------------------------------
/src/components/marquee/index.js:
--------------------------------------------------------------------------------
1 | import Marquee from './Marquee';
2 | import MarqueeItem from './MarqueeItem';
3 | 
4 | export {
5 |   Marquee,
6 |   MarqueeItem
7 | }
8 | 


--------------------------------------------------------------------------------
/src/components/sidebar/index.js:
--------------------------------------------------------------------------------
1 | import Sidebar from './Sidebar';
2 | import SidebarItem from './SidebarItem';
3 | 
4 | export {
5 |   Sidebar,
6 |   SidebarItem
7 | }
8 | 


--------------------------------------------------------------------------------
/src/components/checkbox/index.js:
--------------------------------------------------------------------------------
1 | import Checkbox from './Checkbox';
2 | import CheckboxGroup from './CheckboxGroup';
3 | 
4 | export {
5 |   Checkbox,
6 |   CheckboxGroup
7 | }
8 | 


--------------------------------------------------------------------------------
/src/components/accordion/index.js:
--------------------------------------------------------------------------------
1 | import Accordion from './Accordion';
2 | import AccordionItem from './AccordionItem';
3 | 
4 | export {
5 |   Accordion,
6 |   AccordionItem
7 | }
8 | 


--------------------------------------------------------------------------------
/src/components/button-tab/index.js:
--------------------------------------------------------------------------------
1 | import ButtonTab from './ButtonTab';
2 | import ButtonTabItem from './ButtonTabItem';
3 | 
4 | export {
5 |   ButtonTab,
6 |   ButtonTabItem
7 | }
8 | 


--------------------------------------------------------------------------------
/src/components/actionsheet/index.js:
--------------------------------------------------------------------------------
1 | import Actionsheet from './Actionsheet';
2 | import ActionsheetItem from './ActionsheetItem';
3 | 
4 | export {
5 |   Actionsheet,
6 |   ActionsheetItem
7 | }
8 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   font-family: sans-serif;
 5 |   background: #f7f7f7; }
 6 | 
 7 | a {
 8 |   color: inherit;
 9 |   text-decoration: none; }
10 | 


--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   font-family: sans-serif;
 5 |   background:#f7f7f7;
 6 | }
 7 | a{
 8 |   color:inherit;
 9 |   text-decoration:none;
10 | }
11 | 


--------------------------------------------------------------------------------
/src/store/root/reducer.js:
--------------------------------------------------------------------------------
 1 | export let initialState = {
 2 |   global: {id: 'fdsafds'}
 3 | }
 4 | 
 5 | let reducer = {
 6 |   global (state = {}, action) {
 7 |     return state
 8 |   }
 9 | }
10 | 
11 | export default reducer


--------------------------------------------------------------------------------
/src/App.scss:
--------------------------------------------------------------------------------
 1 | .flexbox-demo{
 2 |   padding:10px;
 3 |   overflow:hidden;
 4 |   background: #fff;
 5 |   .vx-flexbox--item{
 6 |     background:#eee;
 7 |     border-radius:6px;
 8 |     text-align:center;
 9 |     line-height:0.8rem;
10 |   }
11 | }


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .flexbox-demo {
 2 |   padding: 10px;
 3 |   overflow: hidden;
 4 |   background: #fff; }
 5 |   .flexbox-demo .vx-flexbox--item {
 6 |     background: #eee;
 7 |     border-radius: 6px;
 8 |     text-align: center;
 9 |     line-height: 0.8rem; }
10 | 


--------------------------------------------------------------------------------
/src/components/alert/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Confirm from '../confirm';
 3 | 
 4 | let Alert = props => {
 5 |   let {children, ...others} = props
 6 |   return (
 7 |     <Confirm {...others} cancel={false}>{children}</Confirm>
 8 |   )
 9 | }
10 | 
11 | export default Alert;
12 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div');
 7 |   ReactDOM.render(<App />, div);
 8 |   ReactDOM.unmountComponentAtNode(div);
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/components/icon/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import classnames from 'classnames'
 3 | 
 4 | const Icon = props => {
 5 |   const { className, ...others } = props
 6 |   return (
 7 |     <i {...others}
 8 |       className={classnames(['vx-iconfont', className])}>
 9 |     </i>
10 |   )
11 | }
12 | 
13 | export default Icon
14 | 


--------------------------------------------------------------------------------
/src/components/select/Option.js:
--------------------------------------------------------------------------------
 1 | import PropTypes from 'prop-types';
 2 | 
 3 | const Option = props => {
 4 |   return null
 5 | }
 6 | Option.propsTypes = {
 7 |   value: PropTypes.String,
 8 |   disabled: PropTypes.bool,
 9 |   label: PropTypes.String
10 | }
11 | Option.defaultProps = {
12 |   disabled: false
13 | }
14 | export default Option;
15 | 


--------------------------------------------------------------------------------
/src/store/todo/action.js:
--------------------------------------------------------------------------------
 1 | export default { 
 2 |   add (data) {
 3 |     return dispatch => {
 4 |       setTimeout(() => {
 5 |         dispatch({
 6 |           type: 'TODO_ADD',
 7 |           data
 8 |         })
 9 |       })
10 |     }
11 |     /*
12 |     return {
13 |       type: 'TODO_ADD',
14 |       data
15 |     }
16 |     */
17 |   }
18 | }


--------------------------------------------------------------------------------
/src/store/todo/reducer.js:
--------------------------------------------------------------------------------
 1 | let initialState = {
 2 |   counter: 0
 3 | }
 4 | 
 5 | const todo = (state = initialState, action) => {
 6 |   switch (action.type) {
 7 |     case 'TODO_ADD': 
 8 |       state.counter++
 9 |       return {
10 |         ...state
11 |       }
12 |     default:
13 |       return state
14 |   }
15 | }
16 | 
17 | export default todo;
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | 


--------------------------------------------------------------------------------
/src/components/divider/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import classnames from 'classnames'
 3 | 
 4 | const Divider = props => {
 5 |   const { children, className, ...others } = props
 6 |   return (
 7 |     <div 
 8 |       {...others}
 9 |       className={classnames(['vx-divider', className])}>
10 |         {children}
11 |     </div>
12 |   )
13 | }
14 | 
15 | export default Divider
16 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/en/webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/src/components/swiper/SwiperItem.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import classnames from 'classnames';
 3 | 
 4 | const SwiperItem = props => {
 5 |   let {children, className, ...others} = props
 6 |   return (
 7 |     <div className={classnames(['vx-swiper--item', 'swiper-slide', className])} {...others}>
 8 |       {children}
 9 |     </div>
10 |   );
11 | }
12 | 
13 | export default SwiperItem;
14 | 


--------------------------------------------------------------------------------
/src/components/marquee/MarqueeItem.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import classnames from 'classnames';
 3 | 
 4 | const MarqueeItem = props => {
 5 |   let {children, className, ...others} = props
 6 |   return (
 7 |     <div className={classnames(['vx-marquee-item', 'swiper-slide', className])} {...others}>
 8 |       {children}
 9 |     </div>
10 |   );
11 | }
12 | 
13 | export default MarqueeItem;
14 | 


--------------------------------------------------------------------------------
/src/components/body/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import classnames from 'classnames'
 3 | import { FlexboxItem } from '../flexbox'
 4 | 
 5 | const Body = props => {
 6 |   const { children, className, ...others } = props
 7 |   return (
 8 |     <FlexboxItem className={classnames(['vx-body', 'vx-scroller', className])} {...others}>
 9 |       {children}
10 |     </FlexboxItem>
11 |   )
12 | }
13 | 
14 | export default Body
15 | 


--------------------------------------------------------------------------------
/src/components/message/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import classnames from 'classnames'
 3 | 
 4 | const Message = props => {
 5 |   const { children, className, type, ...others } = props
 6 |   return (
 7 |     <div 
 8 |       {...others}
 9 |       className={classnames(['vx-message', 'vx-message--' + type, className])}>
10 |         {children}
11 |     </div>
12 |   )
13 | }
14 | Message.defaultProps = {
15 |   type: 'warning'
16 | }
17 | 
18 | export default Message
19 | 


--------------------------------------------------------------------------------
/src/views/Qrcode.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Qrcode } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   render() {
 6 |     return (
 7 |       <Layout>
 8 |         <Nav slot="header" title="Qrcode"/>
 9 |         <Body slot="body" style={{textAlign: 'center', padding: '0.5rem 0'}}>
10 |           <Qrcode text="http://vue.bittyos.com/"/>
11 |         </Body>
12 |       </Layout>
13 |     );
14 |   }
15 | }
16 | 
17 | export default Demo;
18 | 


--------------------------------------------------------------------------------
/src/views/Group.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Group, Cell } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   render() {
 6 |     return (
 7 |       <Layout>
 8 |         <Nav slot="header" title="Group"/>
 9 |         <Body slot="body">
10 |           <Group title="group title">
11 |             <Cell icon="icon" title="title" value="value" arrow={true} />
12 |           </Group>
13 |         </Body>
14 |       </Layout>
15 |     );
16 |   }
17 | }
18 | 
19 | export default Demo;
20 | 


--------------------------------------------------------------------------------
/src/devtools/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | //从redux-devtools中引入createDevTools
 4 | import { createDevTools } from 'redux-devtools';
 5 | 
 6 | //显示包是单独的，要额外指定
 7 | import LogMonitor from 'redux-devtools-log-monitor';
 8 | import DockMonitor from 'redux-devtools-dock-monitor';
 9 | 
10 | //创建DevTools组件
11 | const DevTools = createDevTools(
12 |   <DockMonitor toggleVisibilityKey='ctrl-h'
13 |                changePositionKey  ='ctrl-q'>
14 |     <LogMonitor theme='tomorrow' />
15 |   </DockMonitor>
16 | );
17 | 
18 | export default DevTools
19 | 


--------------------------------------------------------------------------------
/src/components/actionsheet/ActionsheetItem.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import classnames from 'classnames';
 4 | 
 5 | const ActionsheetItem = props => {
 6 |   let {children, className, ...others} = props
 7 |   return (
 8 |     <div className={classnames(["vx-actionsheet--item", className])} {...others}>
 9 |       {children}
10 |     </div>
11 |   );
12 | }
13 | ActionsheetItem.propsTypes = {
14 |   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
15 | }
16 | 
17 | export default ActionsheetItem;
18 | 


--------------------------------------------------------------------------------
/src/components/group/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import classnames from 'classnames'
 3 | 
 4 | const Group = props => {
 5 |   const { className, title, component, children, ...others } = props
 6 |   let Component = component || 'div'
 7 |   return (
 8 |     <Component className={classnames(['vx-group', className])} {...others}>
 9 |       {title && <div  className="vx-group--title">{title}</div>}
10 |       <div className="vx-group--inner">
11 |         {children}
12 |       </div>
13 |     </Component>
14 |   )
15 | }
16 | 
17 | export default Group
18 | 


--------------------------------------------------------------------------------
/src/views/Nav.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Nav } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   render() {
 6 |     return (
 7 |       <Layout>
 8 |         <div slot="header">
 9 |           <Nav title="Nav" backText="返回" pull={<span style={{marginRight: '10px'}}>更多</span>}/>
10 |           <br />
11 |           <Nav title="Nav" type="primary" backText="返回" pull={<span style={{marginRight: '10px'}}>更多</span>}/>
12 |         </div>
13 |       </Layout>
14 |     );
15 |   }
16 | }
17 | 
18 | export default Demo;
19 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { HashRouter as Router } from 'react-router-dom';
 3 | import './App.css';
 4 | import { renderRoutes } from 'react-router-config';
 5 | import globalRouter from './views/router';
 6 | // import DevTools from './devtools';
 7 | 
 8 | const routes = [
 9 |   ...globalRouter
10 | ]
11 | 
12 | class App extends React.Component {
13 |   render() {
14 |     return (
15 |       <Router>
16 |         <div>
17 |           {renderRoutes(routes)}
18 |         </div>
19 |       </Router>
20 |     )
21 |   }
22 | }
23 | 
24 | export default App;
25 | 


--------------------------------------------------------------------------------
/src/components/sidebar/SidebarItem.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import classnames from 'classnames';
 4 | 
 5 | const SidebarItem = props => {
 6 |   let {children, className, active, name, ripple, ...others} = props
 7 |   let cls = classnames(['vx-sidebar--item', {'is-active': active === name}])
 8 |   return (
 9 |     <div className={cls} {...others}>
10 |       {children}
11 |     </div>
12 |   );
13 | }
14 | 
15 | SidebarItem.propsTypes = {
16 |   name: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
17 | }
18 | 
19 | export default SidebarItem;
20 | 


--------------------------------------------------------------------------------
/src/views/Message.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Message } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   render() {
 6 |     return (
 7 |       <Layout>
 8 |         <Nav slot="header" title="Message"/>
 9 |         <Body slot="body">
10 |           <Message>注意：此示例要在移动设备体验哦~</Message>
11 |           <br/>
12 |           <Message type="danger">注意：此示例要在移动设备体验哦~</Message>
13 |           <br/>
14 |           <Message type="success">注意：此示例要在移动设备体验哦~</Message>
15 |         </Body>
16 |       </Layout>
17 |     );
18 |   }
19 | }
20 | 
21 | export default Demo;
22 | 


--------------------------------------------------------------------------------
/src/views/Divider.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Group, Divider } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   render() {
 6 |     return (
 7 |       <Layout>
 8 |         <Nav slot="header" title="Divider"/>
 9 |         <Body slot="body">
10 |           <Group>
11 |             <div style={{lineHeight: '40px', padding: '0 10px'}}>
12 |               标题
13 |               <Divider/>
14 |               内容....
15 |             </div>
16 |           </Group>
17 |         </Body>
18 |       </Layout>
19 |     );
20 |   }
21 | }
22 | 
23 | export default Demo;
24 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/button-tab/ButtonTabItem.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import classnames from 'classnames';
 4 | 
 5 | const ButtonTabItem = props => {
 6 |   let {children, className, active, name, ...others} = props
 7 |   let cls = classnames(['vx-button-tab--item', 'vx-flexbox--item', {'is-active': active === name}], className)
 8 |   return (
 9 |     <div className={cls} {...others}>
10 |       {children}
11 |     </div>
12 |   );
13 | }
14 | 
15 | ButtonTabItem.propsTypes = {
16 |   name: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
17 | }
18 | 
19 | export default ButtonTabItem;
20 | 


--------------------------------------------------------------------------------
/src/views/Password.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Password, Group } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     value: ''
 7 |   }
 8 |   render() {
 9 |     return (
10 |       <Layout>
11 |         <Nav slot="header" title="Password"/>
12 |         <Body slot="body">
13 |           <Group title="default">
14 |             <Password placeholder="请输入" value={this.state.value} onChange={this.handleChange.bind(this)}/>
15 |           </Group>
16 |         </Body>
17 |       </Layout>
18 |     );
19 |   }
20 |   handleChange (value) {
21 |     this.setState({
22 |       value
23 |     })
24 |   }
25 | }
26 | 
27 | export default Demo;
28 | 


--------------------------------------------------------------------------------
/src/components/badge/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import classnames from 'classnames'
 4 | 
 5 | const Badge = props => {
 6 |   let {className, text, max, ...others} = props
 7 |   return (
 8 |     <span className={classnames(['vx-badge', {'vx-badge--dot': text === ''}, className])} {...others}>
 9 |       {typeof text === 'number' && max && text > max ? <span className="badge-ellipsis"></span> : text}
10 |     </span>
11 |   )
12 | }
13 | Badge.propTypes = {
14 |   text: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
15 |   max: PropTypes.number
16 | }
17 | Badge.defaultProps = {
18 |   text: '',
19 |   max: 9
20 | }
21 | 
22 | export default Badge;
23 | 


--------------------------------------------------------------------------------
/src/components/spinner/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import classnames from 'classnames'
 3 | 
 4 | let Spinner = props => {
 5 |   let {children, className, color, primaryColor, ...others} = props
 6 |   const style = {
 7 |     'borderTopColor': `${primaryColor}`,
 8 |     'borderRightColor': `${color}`,
 9 |     'borderBottomColor': `${color}`,
10 |     'borderLeftColor': `${color}`
11 |   }
12 |   return (
13 |     <div { ...others} className={classnames(["vx-spinner--wrapper", className])}>
14 |       <div className="vx-spinner" style={style}></div>
15 |       {children}
16 |     </div>
17 |   )
18 | }
19 | Spinner.defaultProps = {
20 |   color: '',
21 |   primaryColor: ''
22 | }
23 | export default Spinner;
24 | 


--------------------------------------------------------------------------------
/src/components/tab/TabItem.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import classnames from 'classnames';
 4 | const TabItem = props => {
 5 |   let {children, className, underlineWidth, active, name, layout, ...others} = props
 6 |   return (
 7 |     <div className={classnames(['vx-tab--item', {'vx-flexbox--item': layout === 'default', 'is-active': active === name}, className])} {...others}>
 8 |       {underlineWidth && <span className="vx-tab--item-text">
 9 |         {children}
10 |       </span>}
11 |       {!underlineWidth && children}
12 |     </div>
13 |   );
14 | }
15 | TabItem.propsTypes = {
16 |   name: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
17 | }
18 | 
19 | export default TabItem;
20 | 


--------------------------------------------------------------------------------
/src/views/Spinner.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Nav, Body, Spinner} from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     open: false
 7 |   }
 8 |   render() {
 9 |     return (
10 |       <Layout>
11 |         <Nav slot="header" title="Spinner"/>
12 |         <Body slot="body" style={{textAlign: 'center', background: '#fff'}}>
13 |           <br/>
14 |           <Spinner />
15 |           <br/>
16 |           <br/>
17 |           <br/>
18 |           <Spinner style={{height:'50px',width:'50px'}}>
19 |             <span style={{lineHeight:'50px'}}>LOGO</span>
20 |           </Spinner>
21 |         </Body>
22 |       </Layout>
23 |     );
24 |   }
25 | }
26 | 
27 | export default Demo;
28 | 


--------------------------------------------------------------------------------
/src/views/InputNumber.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Group, Cell, InputNumber } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     value: 0
 7 |   }
 8 |   render() {
 9 |     return (
10 |       <Layout>
11 |         <Nav slot="header" title="InputNumber"/>
12 |         <Body slot="body">
13 |           <Group>
14 |             <Cell title={'value：'+this.state.value}>
15 |               <InputNumber value={this.state.value} onChange={this.handleChange.bind(this)} />
16 |             </Cell>
17 |           </Group>
18 |         </Body>
19 |       </Layout>
20 |     );
21 |   }
22 |   handleChange (value) {
23 |     this.setState({
24 |       value
25 |     })
26 |   }
27 | }
28 | 
29 | export default Demo;
30 | 


--------------------------------------------------------------------------------
/config/pnpTs.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const { resolveModuleName } = require('ts-pnp');
 4 | 
 5 | exports.resolveModuleName = (
 6 |   typescript,
 7 |   moduleName,
 8 |   containingFile,
 9 |   compilerOptions,
10 |   resolutionHost
11 | ) => {
12 |   return resolveModuleName(
13 |     moduleName,
14 |     containingFile,
15 |     compilerOptions,
16 |     resolutionHost,
17 |     typescript.resolveModuleName
18 |   );
19 | };
20 | 
21 | exports.resolveTypeReferenceDirective = (
22 |   typescript,
23 |   moduleName,
24 |   containingFile,
25 |   compilerOptions,
26 |   resolutionHost
27 | ) => {
28 |   return resolveModuleName(
29 |     moduleName,
30 |     containingFile,
31 |     compilerOptions,
32 |     resolutionHost,
33 |     typescript.resolveTypeReferenceDirective
34 |   );
35 | };
36 | 


--------------------------------------------------------------------------------
/src/views/Input.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Input, Group } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {value: ''}
 6 |   render() {
 7 |     return (
 8 |       <Layout>
 9 |         <Nav slot="header" title="Input"/>
10 |         <Body slot="body">
11 |           <Group title="default">
12 |             <Input placeholder="请输入" value={this.state.value} onChange={this.handleChange.bind(this)}/>
13 |           </Group>
14 |           <Group title="disabled">
15 |             <Input placeholder="请输入" disabled={true} value={this.state.value}/>
16 |           </Group>
17 |         </Body>
18 |       </Layout>
19 |     );
20 |   }
21 |   handleChange (value) {
22 |     this.setState({
23 |       value
24 |     })
25 |   }
26 | }
27 | 
28 | export default Demo;
29 | 


--------------------------------------------------------------------------------
/src/components/flexbox/FlexboxItem.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import classnames from 'classnames'
 4 | 
 5 | const FlexboxItem = props => {
 6 |   const { children, className, style, flex, order, gutter, ...others } = props
 7 |   let styles = {
 8 |     ...style,
 9 |     marginLeft: `${gutter}px`,
10 |     marginRight: `${gutter}px`,
11 |     flex,
12 |     order
13 |   }
14 |   return (
15 |     <div
16 |       className={classnames(['vx-flexbox--item', className])}
17 |       {...others} style={styles}>
18 |         {children}
19 |     </div>
20 |   )
21 | }
22 | FlexboxItem.propTypes = {
23 |   flex: PropTypes.string,
24 |   order: PropTypes.string,
25 |   gutter: PropTypes.number
26 | }
27 | FlexboxItem.defaultProps = {
28 |   flex: '1'
29 | }
30 | 
31 | export default FlexboxItem
32 | 


--------------------------------------------------------------------------------
/src/views/Ripple.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Nav, Body, Ripple, Group, Divider} from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   render() {
 6 |     return (
 7 |       <Layout>
 8 |         <Nav slot="header" title="Ripple"/>
 9 |         <Body slot="body">
10 |           <Group style={{lineHeight: '0.92rem'}}>
11 |             <Ripple>
12 |               点击我会出现波纹
13 |             </Ripple>
14 |             <Divider />
15 |             <Ripple>
16 |               点击我会出现波纹
17 |             </Ripple>
18 |             <Divider />
19 |             <Ripple color="rgba(255,0,0,0.1)">
20 |               自定义颜色(prop color:rgba(255,0,0,0.1))
21 |             </Ripple>
22 |           </Group>
23 |         </Body>
24 |       </Layout>
25 |     );
26 |   }
27 | }
28 | 
29 | export default Demo;
30 | 


--------------------------------------------------------------------------------
/src/components/overlay/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import classnames from 'classnames'
 3 | import PropTypes from 'prop-types'
 4 | import Transition from 'react-transition-group/Transition'
 5 | 
 6 | const Overlay = props => {
 7 |   const { className, open, ...others } = props
 8 |   const transitionState =  {
 9 |     entering: 'popup-fade-enter',
10 |     entered: 'popup-fade-enter-active',
11 |     exiting: 'popup-fade-leave-active',
12 |     exited: 'popup-fade-leave'
13 |   }
14 |   return (
15 |     <Transition in={open} timeout={300}>
16 |       {state => {
17 |         return <div {...others} className={classnames(['vx-overlay', transitionState[state], className])}></div>
18 |       }}
19 |     </Transition>
20 |   )
21 | }
22 | 
23 | Overlay.propTypes = {
24 |   open: PropTypes.bool
25 | }
26 | 
27 | export default Overlay
28 | 


--------------------------------------------------------------------------------
/src/components/tabbar/TabbarItem.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import classnames from 'classnames';
 4 | import Ripple from '../ripple'
 5 | 
 6 | const TabbarItem = props => {
 7 |   let {children, className, active, name, ripple, ...others} = props
 8 |   let cls = classnames(['vx-tabbar--item', 'vx-flexbox--item', {'is-active': active === name}, className])
 9 |   if (ripple) {
10 |     return (
11 |       <Ripple className={cls} position="center" {...others}>
12 |         {children}
13 |       </Ripple>
14 |     )
15 |   } else {
16 |     return (
17 |       <div className={cls} {...others}>
18 |         {children}
19 |       </div>
20 |     );
21 |   }
22 | }
23 | TabbarItem.propsTypes = {
24 |   name: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
25 | }
26 | 
27 | export default TabbarItem;
28 | 


--------------------------------------------------------------------------------
/src/views/Marquee.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Marquee, MarqueeItem } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   render() {
 6 |     return (
 7 |       <Layout>
 8 |         <Nav slot="header" title="Marquee"/>
 9 |         <Body slot="body">
10 |           <Marquee>
11 |             <MarqueeItem>
12 |               天猫双十一优惠！
13 |             </MarqueeItem>
14 |             <MarqueeItem>
15 |               京东618优惠！
16 |             </MarqueeItem>
17 |           </Marquee>
18 |           <Marquee direction="horizontal">
19 |             <MarqueeItem>
20 |               天猫双十一优惠！
21 |             </MarqueeItem>
22 |             <MarqueeItem>
23 |               京东618优惠！
24 |             </MarqueeItem>
25 |           </Marquee>
26 |         </Body>
27 |       </Layout>
28 |     );
29 |   }
30 | }
31 | 
32 | export default Demo;
33 | 


--------------------------------------------------------------------------------
/src/views/Textarea.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Textarea, Group } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {value: ''}
 6 |   render() {
 7 |     return (
 8 |       <Layout>
 9 |         <Nav slot="header" title="Textarea"/>
10 |         <Body slot="body">
11 |           <Group>
12 |             <Textarea value={this.state.value} onChange={this.handleChange.bind(this)}  placeholder="请输入消息内容" enterNumber maxLength={100}/>
13 |           </Group>
14 |           <div style={{padding:'10px',color:'#999'}}>
15 |             注：输入换行符或者更多内容我会自动”撑高“
16 |           </div>
17 |           <div style={{padding:'10px'}}>{this.state.value}</div>
18 |         </Body>
19 |       </Layout>
20 |     );
21 |   }
22 |   handleChange (value) {
23 |     this.setState({
24 |       value
25 |     })
26 |   }
27 | }
28 | 
29 | export default Demo;
30 | 


--------------------------------------------------------------------------------
/src/views/IndexList.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Nav, IndexList } from '@/components'
 3 | 
 4 | let list = []
 5 | let array = ['★', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L']
 6 | array.forEach(item1 => {
 7 |   let items = array.map(item2 => {
 8 |     return {
 9 |       value: item1 + item2,
10 |       label: `label-${item1 + item2}`
11 |     }
12 |   })
13 |   list.push({
14 |     label: item1,
15 |     items
16 |   })
17 | })
18 | class Demo extends React.Component {
19 |   state = {
20 |     list: list
21 |   }
22 |   render() {
23 |     return (
24 |       <Layout>
25 |         <Nav slot="header" title="IndexList"/>
26 |         <IndexList slot="body" data={this.state.list} onClick={this.handleClick.bind(this)}/>
27 |       </Layout>
28 |     );
29 |   }
30 |   handleClick (value) {
31 |     console.log(value)
32 |   }
33 | }
34 | 
35 | export default Demo;
36 | 


--------------------------------------------------------------------------------
/src/components/cell/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import classnames from 'classnames'
 3 | import { Link } from 'react-router-dom';
 4 | import { Flexbox, FlexboxItem } from '../flexbox'
 5 | 
 6 | const Cell = props => {
 7 |   const { className, title, value, icon, arrow, to, children, ...others } = props
 8 |   let Component = to ? Link : 'div'
 9 |   return (
10 |     <Flexbox 
11 |       component={Component}
12 |       to={to}
13 |       align="center"
14 |       justify="center"
15 |       className={classnames(['vx-cell', {'vx-cell--access': arrow}, className])}
16 |       {...others}>
17 |       <div className="vx-cell--hd">
18 |         {icon}
19 |       </div>
20 |       <FlexboxItem className="vx-cell--bd">
21 |         {title}
22 |       </FlexboxItem>
23 |       <div className="vx-cell--ft">
24 |         {value || children}
25 |       </div>
26 |     </Flexbox>
27 |   )
28 | }
29 | 
30 | export default Cell
31 | 


--------------------------------------------------------------------------------
/src/styles/variable.scss:
--------------------------------------------------------------------------------
 1 | // Prefix
 2 | $css-prefix             : vx-;
 3 | $css-prefix-iconfont    : vx-icon;
 4 | 
 5 | // color
 6 | $color-black            : #333;   
 7 | $color-primary          : #3399ff;
 8 | $color-error            : #f56c6c;
 9 | $color-sub              : #999;
10 | $color-divider          : #f5f5f5;
11 | $color-warning          : #ff9900;
12 | $color-danger           : $color-error;
13 | $color-star             : #f5a623;
14 | $color-placeholder      : rgba(0,0,0,0.4);
15 | $color-background       : #f7f7f7;
16 | 
17 | $font-size-default      : 0.28rem;
18 | $font-size-small        : 0.24rem;
19 | $font-size-large        : 0.32rem;
20 | 
21 | $item-padding           : 0.3rem 0;
22 | 
23 | // Border color
24 | $border-color-base      : rgb(229, 229, 229);  // outside
25 | $border-radius-base     : 6px;
26 | 
27 | // Animation
28 | $animation-time         : .3s;
29 | $transition-time        : .2s;
30 | $ease-in-out            : ease-in-out;
31 | 


--------------------------------------------------------------------------------
/src/views/Cell.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Group, Cell, Switch } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {open: false}
 6 |   render() {
 7 |     let icon = <img alt="img" src="./images/github.png" style={{height:'20px',width:'20px',borderRadius:'50%'}}/>
 8 |     return (
 9 |       <Layout>
10 |         <Nav slot="header" title="Cell"/>
11 |         <Body slot="body">
12 |           <Group title="default">
13 |             <Cell icon={icon} title="title" value="value" arrow={true} />
14 |           </Group>
15 |           <Group title="no arrow">
16 |             <Cell arrow={false} title="标题">
17 |               <Switch value={this.state.open} onChange={this.handleChange.bind(this)}/>
18 |             </Cell>
19 |           </Group>
20 |         </Body>
21 |       </Layout>
22 |     );
23 |   }
24 |   handleChange (value) {
25 |     this.setState({
26 |       open: value
27 |     })
28 |   }
29 | }
30 | 
31 | export default Demo;
32 | 


--------------------------------------------------------------------------------
/src/components/radio/RadioGroup.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import classnames from 'classnames';
 4 | 
 5 | const RadioGroup = props => {
 6 |   let {children, className, divider, onChange, ...others} = props
 7 |   let handleChange = value => {
 8 |     value !== props.value && onChange && onChange(value)
 9 |   }
10 |   let cloneChildren = React.Children.map(children, item => {
11 |     if (item) {
12 |       return React.cloneElement(item, {
13 |         $parent: {
14 |           ...others,
15 |           onChange: handleChange
16 |         }
17 |       })
18 |     }
19 |     return item
20 |   })
21 |   return (
22 |     <div className={classnames(["vx-radio-group", {'is-divider': divider}, className])} {...others}>
23 |       {cloneChildren}
24 |     </div>
25 |   );
26 | }
27 | RadioGroup.propsTypes = {
28 |   divider: PropTypes.bool,
29 |   onChange: PropTypes.func
30 | }
31 | RadioGroup.defaultProps = {
32 |   divider: true
33 | }
34 | 
35 | export default RadioGroup;
36 | 


--------------------------------------------------------------------------------
/src/components/layout/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import classnames from 'classnames'
 3 | import { Flexbox } from '../flexbox'
 4 | 
 5 | const Layout = props => {
 6 |   const { children, className, bodyComponent, ...others } = props
 7 |   let slots = {
 8 |     others: []
 9 |   }
10 |   React.Children.map(children, item => {
11 |     if (item.props.slot) {
12 |       if (!slots[item.props.slot]) {
13 |         slots[item.props.slot] = []
14 |       }
15 |       slots[item.props.slot].push(item)
16 |     } else {
17 |       slots.others.push(item)
18 |     }
19 |   })
20 |   return (
21 |     <div className={classnames(['vx-layout', `vx-layout--${props.type}`, className])} {...others}>
22 |       <Flexbox className="vx-layout--flexbox" direction="column">
23 |         {slots['header']}        
24 |         {slots['body']}
25 |         {slots['footer']}
26 |       </Flexbox>
27 |       {slots['others']}
28 |     </div>
29 |   )
30 | }
31 | Layout.defaultProps = {
32 |   type: 'default'
33 | }
34 | export default Layout
35 | 


--------------------------------------------------------------------------------
/src/components/sidebar/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import classnames from 'classnames';
 3 | import PropTypes from 'prop-types';
 4 | 
 5 | const Sidebar = props => {
 6 |   let {children, className, active, ripple, onChange, ...others} = props
 7 |   let handleClick = value => {
 8 |     value !== active && onChange && onChange(value)
 9 |   }
10 |   let cloneChildren = React.Children.map(children, item => {
11 |     if (item) {
12 |       return React.cloneElement(item, {
13 |         active,
14 |         ripple,
15 |         onClick: handleClick.bind(this, item.props.name)
16 |       })
17 |     }
18 |     return item
19 |   })
20 |   return (
21 |     <div className={classnames(['vx-sidebar', className])} {...others}>
22 |       {cloneChildren}
23 |     </div>
24 |   );
25 | }
26 | Sidebar.propTypes = {
27 |   active: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
28 |   ripple: PropTypes.bool,
29 |   onChange: PropTypes.func
30 | }
31 | Sidebar.defaultProps = {
32 |   ripple: false
33 | }
34 | 
35 | export default Sidebar;
36 | 


--------------------------------------------------------------------------------
/src/components/tabbar/Tabbar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import classnames from 'classnames';
 3 | import PropTypes from 'prop-types';
 4 | 
 5 | const Tabbar = props => {
 6 |   let {children, className, active, ripple, onChange, ...others} = props
 7 |   let handleClick = value => {
 8 |     value !== active && onChange && onChange(value)
 9 |   }
10 |   let cloneChildren = React.Children.map(children, item => {
11 |     if (item) {
12 |       return React.cloneElement(item, {
13 |         active,
14 |         ripple,
15 |         onClick: handleClick.bind(this, item.props.name)
16 |       })
17 |     }
18 |     return item
19 |   })
20 |   return (
21 |     <div className={classnames(['vx-flexbox', 'vx-tabbar', className])} {...others}>
22 |       {cloneChildren}
23 |     </div>
24 |   );
25 | }
26 | Tabbar.propTypes = {
27 |   active: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
28 |   ripple: PropTypes.bool,
29 |   onChange: PropTypes.func
30 | }
31 | Tabbar.defaultProps = {
32 |   ripple: false
33 | }
34 | 
35 | export default Tabbar;
36 | 


--------------------------------------------------------------------------------
/src/components/radio/Radio.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import classnames from 'classnames';
 3 | import PropTypes from 'prop-types'
 4 | 
 5 | const Radio = props => {
 6 |   let {children, className, style, $parent, onChange, ...others} = props
 7 |   let checked = others.checked
 8 |   if ($parent) {
 9 |     checked = $parent.value === others.value
10 |   }
11 |   let handleChange = e => {
12 |     let value = e.target.value
13 |     if ($parent) {
14 |       $parent.onChange && $parent.onChange(value)
15 |     } else {
16 |       onChange && onChange(value)
17 |     }
18 |   }
19 |   return (
20 |     <label
21 |       style={style}
22 |       className={classnames(['vx-radio', {'is-disabled': others.disabled}, className])} >
23 |       <input {...others} type="radio" checked={checked} onChange={handleChange}/>
24 |       <i className="vx-radio--icon"></i>
25 |       <span className="vx-radio--text">
26 |         {children}
27 |       </span>
28 |     </label>
29 |   );
30 | }
31 | Radio.propTypes = {
32 |   onChange: PropTypes.func
33 | }
34 | 
35 | export default Radio;
36 | 


--------------------------------------------------------------------------------
/src/components/button-tab/ButtonTab.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import classnames from 'classnames';
 3 | import PropTypes from 'prop-types';
 4 | 
 5 | const ButtonTab = props => {
 6 |   let {children, className, active, size, onChange, ...others} = props
 7 |   let handleClick = value => {
 8 |     value !== active && onChange && onChange(value)
 9 |   }
10 |   let cloneChildren = React.Children.map(children, item => {
11 |     if (item) {
12 |       return React.cloneElement(item, {
13 |         active,
14 |         onClick: handleClick.bind(this, item.props.name)
15 |       })
16 |     }
17 |     return item
18 |   })
19 |   return (
20 |     <div className={classnames(['vx-flexbox', 'vx-button-tab', `vx-button-tab--size-${size}`, className])} {...others}>
21 |       {cloneChildren}
22 |     </div>
23 |   );
24 | }
25 | ButtonTab.propTypes = {
26 |   active: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
27 |   size: PropTypes.string,
28 |   onChange: PropTypes.func
29 | }
30 | ButtonTab.defaultProps = {
31 |   size: 'default'
32 | }
33 | 
34 | export default ButtonTab;
35 | 


--------------------------------------------------------------------------------
/src/views/Badge.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Nav, Body, Badge, Cell, Group} from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     count: 8
 7 |   }
 8 |   render() {
 9 |     return (
10 |       <Layout>
11 |         <Nav slot="header" title="Badge"/>
12 |         <Body slot="body">
13 |           <Group>
14 |             <Cell title="红点">
15 |               <div>新消息<Badge/></div>
16 |             </Cell>
17 |             <Cell title="个位数红点(点击累加)">
18 |               <div onClick={this.handleClick.bind(this)}>新消息<Badge text={this.state.count}/></div>
19 |             </Cell>
20 |             <Cell title="超出最大值显示(ellipsis)红点">
21 |               <div>新消息<Badge text={20}/></div>
22 |             </Cell>
23 |             <Cell title="多位数红点">
24 |               <div>新消息<Badge text="888"/></div>
25 |             </Cell>
26 |           </Group>
27 |         </Body>
28 |       </Layout>
29 |     );
30 |   }
31 |   handleClick () {
32 |     this.setState({
33 |       count: this.state.count + 1
34 |     })
35 |   }
36 | }
37 | 
38 | export default Demo;
39 | 


--------------------------------------------------------------------------------
/src/components/qrcode/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import classnames from 'classnames'
 3 | import PropTypes from 'prop-types'
 4 | 
 5 | export default class Qrcode extends React.Component {
 6 |   static propTypes = {
 7 |     text: PropTypes.string,
 8 |     height: PropTypes.number,
 9 |     width: PropTypes.number
10 |   }
11 |   static defaultProps = {
12 |     height: 200,
13 |     width: 200,
14 |     text: ''
15 |   }
16 |   render () {
17 |     let {children, className,...others} = this.props
18 |     return (
19 |       <div ref="$el" style={{display:'inline-block'}} className={classnames(['qr-code',className])} {...others}></div>
20 |     )
21 |   }
22 |   componentDidMount () {
23 |     this.$el = this.refs.$el
24 |     import('qrcodejs2').then(res => {
25 |       let QRCode = res.default
26 |       this.$$qrcode = new QRCode(this.$el, {
27 |         ...this.props
28 |       })
29 |     })
30 |   }
31 |   componentDidUpdate (prevProps) {
32 |     if (prevProps.text !== this.props.text && this.$$qrcode) {
33 |       this.$$qrcode.clear()
34 |       this.$$qrcode.makeCode(this.props.text)
35 |     }
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/views/Sidebar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Sidebar, SidebarItem} from '@/components'
 3 | 
 4 | let data = []
 5 | for (let i = 0; i < 20; i++) {
 6 |   data.push({
 7 |     name: i,
 8 |     label: `选项${i}`
 9 |   })
10 | }
11 | class Demo extends React.Component {
12 |   state = {
13 |     active: 0,
14 |     data
15 |   }
16 |   style = {
17 |     width:'80px',
18 |     background:'#f7f7f7',
19 |     position:'absolute',
20 |     height:'100%'
21 |   }
22 |   render() {
23 |     return (
24 |       <Layout>
25 |         <Nav slot="header" title="Sidebar"/>
26 |         <Body slot="body" style={{background:'#fff'}}>
27 |           <Sidebar style={this.style} active={this.state.active} onChange={this.handleChange.bind(this)}>
28 |             {this.state.data.map((item, i) => {
29 |               return <SidebarItem key={i} name={item.name}>{item.label}</SidebarItem>
30 |             })}
31 |           </Sidebar>
32 |         </Body>
33 |       </Layout>
34 |     );
35 |   }
36 |   handleChange (value) {
37 |     this.setState({
38 |       active: value
39 |     })
40 |   }
41 | }
42 | 
43 | export default Demo;
44 | 


--------------------------------------------------------------------------------
/src/views/Alert.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Nav, Body, Alert, Switch, Cell, Group} from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     open: false
 7 |   }
 8 |   render() {
 9 |     return (
10 |       <Layout>
11 |         <Nav slot="header" title="Alert"/>
12 |         <Body slot="body">
13 |           <Group>
14 |             <Cell title="default">
15 |               <Switch value={this.state.open} onChange={this.handleChange.bind(this)} />
16 |             </Cell>
17 |             <Cell title="js调用">
18 |               <span onClick={this.handleClick}>点击我打开</span>
19 |             </Cell>
20 |           </Group>
21 |         </Body>
22 |         <Alert open={this.state.open} onConfirm={this.handleConfirm.bind(this)}>
23 |           确认删除我么
24 |         </Alert>
25 |       </Layout>
26 |     );
27 |   }
28 |   handleChange (value) {
29 |     this.setState({
30 |       open: value
31 |     })
32 |   }
33 |   handleConfirm () {
34 |     this.handleChange(false)
35 |   }
36 |   handleClick () {
37 |     Alert.open({
38 |       message: 'alert'
39 |     })
40 |   }
41 | }
42 | 
43 | export default Demo;
44 | 


--------------------------------------------------------------------------------
/src/views/Flexbox.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Flexbox, FlexboxItem } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   render() {
 6 |     return (
 7 |       <Layout>
 8 |         <Nav slot="header" title="Flexbox"/>
 9 |         <Body slot="body" className="flexbox-demo">
10 |           ### 平均跨度
11 |           <Flexbox gutter={10}>
12 |             <FlexboxItem>1</FlexboxItem>
13 |             <FlexboxItem>2</FlexboxItem>
14 |             <FlexboxItem>3</FlexboxItem>
15 |           </Flexbox>
16 |           <br />
17 |           ### 跨度
18 |           <Flexbox gutter={10}>
19 |             <FlexboxItem>1</FlexboxItem>
20 |             <FlexboxItem flex="2">2</FlexboxItem>
21 |             <FlexboxItem flex="3">3</FlexboxItem>
22 |           </Flexbox>
23 |           <br />
24 |           ### 列布局
25 |           <Flexbox direction="column">
26 |             <FlexboxItem>1</FlexboxItem>
27 |             <FlexboxItem style={{margin:'10px 0'}}>2</FlexboxItem>
28 |             <FlexboxItem>3</FlexboxItem>
29 |           </Flexbox>
30 |         </Body>
31 |       </Layout>
32 |     );
33 |   }
34 | }
35 | 
36 | export default Demo;
37 | 


--------------------------------------------------------------------------------
/src/views/Tabbar.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Tabbar, TabbarItem} from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     active: 'home'
 7 |   }
 8 |   render() {
 9 |     return (
10 |       <Layout>
11 |         <Nav slot="header" title="Tabbar"/>
12 |         <Body slot="body"></Body>
13 |         <Tabbar slot="footer" ripple={true} active={this.state.active} onChange={this.handleChange.bind(this)}>
14 |           <TabbarItem name="home">
15 |             <i style={{fontSize:'0.5rem',margin: '-0.1rem'}}>★</i>
16 |             <small>主页</small>
17 |           </TabbarItem>
18 |           <TabbarItem name="message">
19 |             <i style={{fontSize:'0.5rem',margin: '-0.1rem'}}>♡</i>
20 |             <small>消息</small>
21 |           </TabbarItem>
22 |           <TabbarItem name="my">
23 |             <i style={{fontSize:'0.5rem',margin: '-0.1rem'}}>★</i>
24 |             <small>我的</small>
25 |           </TabbarItem>
26 |         </Tabbar>
27 |       </Layout>
28 |     );
29 |   }
30 |   handleChange (value) {
31 |     this.setState({
32 |       active: value
33 |     })
34 |   }
35 | }
36 | 
37 | export default Demo;
38 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import registerServiceWorker from './registerServiceWorker';
 6 | import { Provider } from 'react-redux';
 7 | import store from './store';
 8 | import 'vx-ui/lib/style/theme/index.css'
 9 | import '@/components';
10 | 
11 | ReactDOM.render(
12 |   <Provider store={store}>
13 |     <App />
14 |   </Provider>,
15 |   document.getElementById('root')
16 | );
17 | registerServiceWorker();
18 | 
19 | let initRootFontSize = function () {
20 |   let deviceWidth = window.innerWidth
21 |   let devicePixelRatio = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio
22 |   let calc = 7.5
23 |   if (deviceWidth > 768) deviceWidth = 768
24 |   if (deviceWidth < 320) deviceWidth = 320
25 |   if (deviceWidth < 320 && devicePixelRatio >= 2) calc = calc - (devicePixelRatio - 1)
26 |   let fontSize = Math.ceil(deviceWidth / calc)
27 |   if (fontSize % 2 === 1) {
28 |     fontSize--
29 |   }
30 |   document.documentElement.style.fontSize = fontSize + 'px'// 计算设计稿和实际像素的缩放比。向上取整1px = 0.01rem
31 | }
32 | window.addEventListener('resize', initRootFontSize)
33 | initRootFontSize()
34 | 


--------------------------------------------------------------------------------
/src/components/AsyncComponent.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Toast from '@/components/toast'
 4 | 
 5 | export default function asyncComponent(importComponent) {
 6 |   class AsyncComponent extends React.Component {
 7 |     constructor(props) {
 8 |       super(props)
 9 |       this.state = {
10 |         component: null
11 |       }
12 |       this.node = document.createElement('div')
13 |       document.body.appendChild(this.node)
14 |       ReactDOM.render(
15 |         <Toast type="loading" open={true} duration={0} align="center">页面努力加载...</Toast>,
16 |         this.node
17 |       )
18 |     }
19 | 
20 |     async componentDidMount() {
21 |       const { default: component } = await importComponent()
22 |       this.setState({
23 |         component: component
24 |       }, () => {
25 |         setTimeout(() => {
26 |           ReactDOM.unmountComponentAtNode(this.node)
27 |           this.node && this.node.parentNode && this.node.parentNode.removeChild(this.node)
28 |           this.node = null
29 |         }, 200)
30 |       })
31 |     }
32 | 
33 |     render() {
34 |       const C = this.state.component
35 |       return C ? <C {...this.props} /> : null
36 |     }
37 |   }
38 |   return AsyncComponent
39 | }


--------------------------------------------------------------------------------
/src/components/rater/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import classnames from 'classnames'
 4 | 
 5 | const Rater = props => {
 6 |   let {className, disabled, value, max, color, gutter, star, onChange, ...others} = props
 7 |   let handleChange = _value => {
 8 |     _value !== value && onChange && onChange(_value)
 9 |   }
10 |   let items = []
11 |   for (let i = 1; i <= max; i++) {
12 |     items.push(
13 |       <span
14 |         key={i}
15 |         className={classnames(['vx-rater--item', {'is-active':i <= value}])}
16 |         style={{color: i <= value && color ? color : '', marginLeft: gutter}}
17 |         onClick={handleChange.bind(this, i)}>
18 |         {star}
19 |       </span>
20 |     )
21 |   }
22 |   
23 |   return (
24 |     <div className={classnames(["vx-rater", className])} disabled={disabled} {...others}>
25 |       {items}
26 |     </div>
27 |   )
28 | }
29 | Rater.propTypes = {
30 |   value: PropTypes.number,
31 |   max: PropTypes.number,
32 |   disabled: PropTypes.bool,
33 |   star: PropTypes.string,
34 |   color: PropTypes.string,
35 |   gutter: PropTypes.string,
36 |   onChange: PropTypes.func
37 | }
38 | Rater.defaultProps = {
39 |   gutter: '',
40 |   max: 5,
41 |   star: '★',
42 |   disabled: false,
43 | }
44 | 
45 | export default Rater;
46 | 


--------------------------------------------------------------------------------
/src/components/switch/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import classnames from 'classnames'
 4 | 
 5 | const Switch = props => {
 6 |   const { className, style, onValue, offValue, value, onChange, size, ...others } = props
 7 |   let handleChange = (e) => {
 8 |     onChange && onChange(e.target.checked ? onValue : offValue)
 9 |   }
10 |   return (
11 |     <div className={classnames(['vx-switch--wrapper', `vx-switch--size-${size}`, className])} style={style}>
12 |       <input
13 |         {...others}
14 |         value={value}
15 |         checked={onValue === value}
16 |         type="checkbox"
17 |         onChange={handleChange}
18 |       />
19 |       <button type="button"></button>
20 |     </div>
21 |   )
22 | }
23 | 
24 | Switch.propTypes = {
25 |   disabled: PropTypes.bool,
26 |   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
27 |   onValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
28 |   offValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
29 |   size: PropTypes.string,
30 |   onChange: PropTypes.func
31 | }
32 | 
33 | Switch.defaultProps = {
34 |   value: false,
35 |   onValue: true,
36 |   offValue: false,
37 |   size: 'default'
38 | }
39 | 
40 | export default Switch
41 | 


--------------------------------------------------------------------------------
/src/components/button/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import classnames from 'classnames'
 4 | import Spinner from '../spinner'
 5 | import Ripple from '../ripple'
 6 | 
 7 | const Button = props => {
 8 |   const { type, size, plain, className, disabled, nativeType, loading, ripple, children, ...others } = props
 9 |   const cls = classnames(['vx-btn', 'vx-btn--' + type, 'vx-btn--size-' + size, {
10 |     'is-plain': plain || type === 'default',
11 |     'is-disabled': disabled || loading,
12 |     'is-ripple': ripple
13 |   }, className])
14 |   
15 |   return (
16 |     <button 
17 |       {...others}
18 |       type={nativeType}
19 |       disabled={disabled}
20 |       className={cls}>
21 |         {loading && <Spinner/>} <span>{children}</span>
22 |         {ripple && <Ripple/>}
23 |     </button>
24 |   )
25 | }
26 | 
27 | Button.propTypes = {
28 |   disabled: PropTypes.bool,
29 |   loading: PropTypes.bool,
30 |   ripple: PropTypes.bool,
31 |   type: PropTypes.string,
32 |   size: PropTypes.string,
33 |   plain: PropTypes.bool,
34 |   nativeType: PropTypes.string
35 | }
36 | Button.defaultProps = {
37 |   disabled: false,
38 |   loading: false,
39 |   ripple: false,
40 |   type: 'default',
41 |   size: 'normal',
42 |   nativeType: 'button'
43 | }
44 |   
45 | export default Button
46 | 


--------------------------------------------------------------------------------
/src/views/ButtonTab.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, ButtonTab, ButtonTabItem } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     active: 'recommed',
 7 |     items: [
 8 |       {name: 'recommed', label: '推荐'},
 9 |       {name: 'it', label: '科技'},
10 |       {name: 'active', label: '活动'},
11 |       {name: 'find', label: '发现'}
12 |     ]
13 |   }
14 |   render() {
15 |     let items = this.state.items.map((item, index) => {
16 |       return <ButtonTabItem name={item.name} key={index}>{item.label}</ButtonTabItem>
17 |     })
18 |     return (
19 |       <Layout>
20 |         <Nav slot="header" title="ButtonTab"/>
21 |         <Body slot="body" style={{background:'#fff', padding: '0.2rem'}}>
22 |           <br/>
23 |           <ButtonTab active={this.state.active} onChange={this.handleChange.bind(this)}>
24 |             {items}
25 |           </ButtonTab>
26 |           <br />
27 |           <ButtonTab style={{width:'5rem'}} size="small" active={this.state.active} onChange={this.handleChange.bind(this)}>
28 |             {items}
29 |           </ButtonTab>
30 |         </Body>
31 |         
32 |       </Layout>
33 |     );
34 |   }
35 |   handleChange (value) {
36 |     this.setState({
37 |       active: value
38 |     })
39 |   }
40 | }
41 | 
42 | export default Demo;
43 | 


--------------------------------------------------------------------------------
/src/components/arrow/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import classnames from 'classnames'
 4 | 
 5 | const Arrow = props => {
 6 |   const { direction, size, color, component, style, className, ...others } = props
 7 |   const Component = component
 8 |   const styles = {
 9 |     display: 'inline-block',
10 |     borderWidth: '1px',
11 |     borderStyle: 'solid',
12 |     verticalAlign: 'middle',
13 |     boxSizing: 'border-box',
14 |     transform: 'rotate(45deg)',
15 |     height: size,
16 |     width: size,
17 |     borderColor: {
18 |       up: `${color} transparent transparent ${color}`,
19 |       right: `${color} ${color} transparent transparent`,
20 |       down: `transparent ${color} ${color} transparent`,
21 |       left: `transparent transparent ${color} ${color}`
22 |     }[direction],
23 |     ...style
24 |   }
25 |   return (
26 |     <Component 
27 |       {...others}
28 |       style={styles}
29 |       className={classnames(['vx-arrow', className])}>
30 |     </Component>
31 |   )
32 | }
33 | 
34 | Arrow.propTypes = {
35 |   direction: PropTypes.string,
36 |   size: PropTypes.string,
37 |   color: PropTypes.string,
38 |   component: PropTypes.string
39 | }
40 | 
41 | Arrow.defaultProps = {
42 |   direction: 'right',
43 |   size: '0.2rem',
44 |   color: '#999',
45 |   component: 'i'
46 | }
47 | 
48 | export default Arrow
49 | 


--------------------------------------------------------------------------------
/src/views/Rater.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Nav, Body, Rater, Cell, Group} from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     value: 0
 7 |   }
 8 |   render() {
 9 |     return (
10 |       <Layout>
11 |         <Nav slot="header" title="Rater"/>
12 |         <Body slot="body">
13 |           <Group>
14 |             <Cell title={`评分${this.state.value}`} arrow={false}>
15 |               <Rater value={this.state.value} onChange={this.handleChange.bind(this)}/>
16 |             </Cell>
17 |             <Cell title={`评分${this.state.value}`} arrow={false}>
18 |               <Rater value={this.state.value} color="rgb(255, 204, 102)" onChange={this.handleChange.bind(this)}/>
19 |             </Cell>
20 |             <Cell title={`评分${this.state.value}`} arrow={false}>
21 |               <Rater value={this.state.value} star="♡" onChange={this.handleChange.bind(this)}/>
22 |             </Cell>
23 |             <Cell title={`评分${this.state.value}`} arrow={false}>
24 |               <Rater value={this.state.value} star="♡" color="rgb(255, 204, 102)" onChange={this.handleChange.bind(this)}/>
25 |             </Cell>
26 |           </Group>
27 |         </Body>
28 |       </Layout>
29 |     );
30 |   }
31 |   handleChange (value) {
32 |     this.setState({
33 |       value
34 |     })
35 |   }
36 | }
37 | 
38 | export default Demo;
39 | 


--------------------------------------------------------------------------------
/src/components/checker/Checker.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import classnames from 'classnames';
 3 | import PropTypes from 'prop-types';
 4 | 
 5 | const Checker = props => {
 6 |   let {children, style, className, $parent, onChange, ...others} = props
 7 |   let type = $parent && $parent.max === 1 ? 'radio' : 'checkbox'
 8 |   let checked = others.checked
 9 |   let disabled = others.disabled
10 |   if ($parent) {
11 |     if ($parent.value instanceof Array) {
12 |       checked = $parent.value.indexOf(others.value) > -1
13 |     } else {
14 |       checked = $parent.value === others.value
15 |     }
16 |     if ($parent.value.length >= $parent.max && $parent.max > 1) {
17 |       disabled = $parent.value.indexOf(others.value) === -1
18 |     }
19 |   }
20 |   let handleChange = (e) => {
21 |     if ($parent) {
22 |       $parent.onChange && $parent.onChange(e)
23 |     } else {
24 |       onChange && onChange(e)
25 |     }
26 |   }
27 |   return (
28 |     <label
29 |       style={style}
30 |       className={classnames(['vx-checker', {'is-disabled': disabled}, className])}>
31 |       <input {...others} type={type} checked={checked} disabled={disabled} onChange={handleChange}/>
32 |       <button type="button" disabled={disabled}>
33 |         {children}
34 |       </button>
35 |     </label>
36 |   );
37 | }
38 | Checker.propTypes = {
39 |   onChange: PropTypes.func
40 | }
41 | 
42 | export default Checker;
43 | 


--------------------------------------------------------------------------------
/src/views/Switch.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Group, Cell, Switch } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     open: false,
 7 |     value: '0'
 8 |   }
 9 |   render() {
10 |     return (
11 |       <Layout>
12 |         <Nav slot="header" title="Switch"/>
13 |         <Body slot="body">
14 |           <Group>
15 |             <Cell title={'开关：'+this.state.open}>
16 |               <Switch value={this.state.open} onChange={this.handleChange.bind(this)} />
17 |             </Cell>
18 |           </Group>
19 |           <Group title="small">
20 |             <Cell arrow={false} title={'开关：' + this.state.open}>
21 |               <Switch size="small" value={this.state.open} onChange={this.handleChange.bind(this)}/>
22 |             </Cell>
23 |           </Group>
24 |           <Group title="offValue:0,onValue:1">
25 |             <Cell arrow={false} title={'开关：' + this.state.value}>
26 |               <Switch value={this.state.value} onValue="1" offValue="0" onChange={this.handleChange2.bind(this)}/>
27 |             </Cell>
28 |           </Group>
29 |         </Body>
30 |       </Layout>
31 |     );
32 |   }
33 |   handleChange (value) {
34 |     console.log(value)
35 |     this.setState({
36 |       open: value
37 |     })
38 |   }
39 |   handleChange2 (value) {
40 |     this.setState({
41 |       value
42 |     })
43 |   } 
44 | }
45 | 
46 | export default Demo;
47 | 


--------------------------------------------------------------------------------
/src/components/nav/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import classnames from 'classnames'
 4 | import Arrow from '../arrow'
 5 | import { Flexbox, FlexboxItem } from '../flexbox'
 6 | 
 7 | const Nav = props => {
 8 |   const { className, title, isBack, backText, onBack, pull, children, type, ...others } = props
 9 |   return (
10 |     <div 
11 |       {...others}
12 |       className={classnames(['vx-nav', `vx-nav--${type}`, className])}>
13 |         <Flexbox className="vx-nav--inner" align="center">
14 |         {isBack && <button type="button" className={classnames(['btn-pull','vx-nav--back'])} onClick={onBack}>
15 |             <Arrow direction="left" color={type === 'default' ? '#999' : '#fff'} size="0.24rem" />
16 |             {backText && <span>{backText}</span>}
17 |         </button>}
18 |           <FlexboxItem className={classnames(['vx-nav--title', {'vx-nav--title-center': !isBack}])}>
19 |             <div>{title}</div>
20 |           </FlexboxItem>
21 |           {pull}
22 |         </Flexbox>
23 |         {children}
24 |     </div>
25 |   )
26 | }
27 | Nav.propTypes = {
28 |   type: PropTypes.string,
29 |   back: PropTypes.bool,
30 |   title: PropTypes.string,
31 |   backText: PropTypes.string,
32 |   onBack: PropTypes.func
33 | }
34 | Nav.defaultProps = {
35 |   type: 'default',
36 |   isBack: true,
37 |   onBack: () => {
38 |     window.history.back()
39 |   }
40 | }
41 | export default Nav
42 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const camelcase = require('camelcase');
 5 | 
 6 | // This is a custom Jest transformer turning file imports into filenames.
 7 | // http://facebook.github.io/jest/docs/en/webpack.html
 8 | 
 9 | module.exports = {
10 |   process(src, filename) {
11 |     const assetFilename = JSON.stringify(path.basename(filename));
12 | 
13 |     if (filename.match(/\.svg$/)) {
14 |       // Based on how SVGR generates a component name:
15 |       // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
16 |       const pascalCaseFilename = camelcase(path.parse(filename).name, {
17 |         pascalCase: true,
18 |       });
19 |       const componentName = `Svg${pascalCaseFilename}`;
20 |       return `const React = require('react');
21 |       module.exports = {
22 |         __esModule: true,
23 |         default: ${assetFilename},
24 |         ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
25 |           return {
26 |             $$typeof: Symbol.for('react.element'),
27 |             type: 'svg',
28 |             ref: ref,
29 |             key: null,
30 |             props: Object.assign({}, props, {
31 |               children: ${assetFilename}
32 |             })
33 |           };
34 |         }),
35 |       };`;
36 |     }
37 | 
38 |     return `module.exports = ${assetFilename};`;
39 |   },
40 | };
41 | 


--------------------------------------------------------------------------------
/src/components/ConnectComponent.js:
--------------------------------------------------------------------------------
 1 | import { connect } from 'react-redux';
 2 | import rootAction from '@/store/root/action';
 3 | 
 4 | export default function connectComponent(component, mapStateToProps, mapDispatchToProps) {
 5 |   const _mapStateToProps = mapStateToProps ? mapStateToProps : (state, ownProps) => {
 6 |     return {
 7 |       state,
 8 |       ownProps
 9 |     }
10 |   }
11 | 
12 |   const _mapDispatchToProps = mapDispatchToProps ? mapDispatchToProps : (dispatch) => {
13 |     return {
14 |       dispatch (action, data) {
15 |         let lastIndex = action.lastIndexOf('/')
16 |         let name = lastIndex ? action.substring(lastIndex + 1) : action
17 |         let path = lastIndex ? action.substring(0, lastIndex) : ''
18 |         if (path) {
19 |           import(`../store/${path}/action`).then(res => {
20 |             if (res.default && res.default[name]) {
21 |               let result = res.default[name](data)
22 |               result.$$module = path
23 |               dispatch(result)
24 |             }
25 |           }).catch(() => {
26 |             console.log(`not find store module "${name}"`)
27 |           })
28 |         } else {
29 |           if (rootAction[action]) {
30 |             dispatch(rootAction[action](data))
31 |           } else {
32 |             console.log(`not find store module "${action}"`)
33 |           }
34 |         }
35 |       }
36 |     }
37 |   }
38 |   return connect(_mapStateToProps, _mapDispatchToProps)(component)
39 | }


--------------------------------------------------------------------------------
/src/views/Picker.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Nav, Body, Message, Picker, Group} from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     value: '010101',
 7 |     options: [{
 8 |       value: '010101',
 9 |       label: '南山区'
10 |     },
11 |     {
12 |       value: '010102',
13 |       label: '福田区'
14 |     },
15 |     {
16 |       value: '010103',
17 |       label: '罗湖区'
18 |     },
19 |     {
20 |       value: '010104',
21 |       label: '宝安区'
22 |     },
23 |     {
24 |       value: '010105',
25 |       label: '龙华区'
26 |     },
27 |     {
28 |       value: '010106',
29 |       label: '龙岗区'
30 |     },
31 |     {
32 |       value: '010107',
33 |       label: '盐田区'
34 |     },
35 |     {
36 |       value: '010108',
37 |       label: '坪山区'
38 |     },
39 |     {
40 |       value: '010109',
41 |       label: '光明区'
42 |     }]
43 |   }
44 |   render() {
45 |     return (
46 |       <Layout>
47 |         <Nav slot="header" title="Picker"/>
48 |         <Body slot="body">
49 |           <Message>注意：此示例要在移动设备体验哦~</Message>
50 |           <Group title={'value：' + this.state.value}>
51 |             <Picker placeholder="请选择" value={this.state.value} options={this.state.options} onChange={this.handleChange.bind(this)}></Picker>
52 |           </Group>
53 |         </Body>
54 |       </Layout>
55 |     );
56 |   }
57 |   handleChange (value) {
58 |     this.setState({
59 |       value
60 |     })
61 |   }
62 | }
63 | 
64 | export default Demo;
65 | 


--------------------------------------------------------------------------------
/src/components/password/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import classnames from 'classnames'
 3 | import Input from '../input'
 4 | 
 5 | export default class Password extends React.Component {
 6 |   static defaultProps= {
 7 |     autoComplete: 'new-password',
 8 |     icons: [
 9 |      '<span class="vx-password--pwd-icon"></span>',
10 |      '<span class="vx-password--text-icon">abc</span>'
11 |     ]
12 |   }
13 |   constructor (props) {
14 |     super(props)
15 |     this.handleSwitch = this.handleSwitch.bind(this)
16 |     this.state = {
17 |       type: this.props.type || 'password'
18 |     }
19 |   }
20 |   render () {
21 |     let {children, className, style, icons, ...others} = this.props
22 |     return (
23 |       <div className={classnames(['vx-password', className])} style={style}>
24 |         <Input {...others} type={this.state.type} append={
25 |           <button
26 |             className="vx-password--switch"
27 |             type="button"
28 |             onClick={this.handleSwitch}>
29 |             <i style={{display: this.state.type === 'password' ? '' : 'none'}} dangerouslySetInnerHTML={{__html: icons[0]}}></i>
30 |             <i style={{display: this.state.type === 'password' ? 'none' : ''}}dangerouslySetInnerHTML={{__html: icons[1]}}></i>
31 |           </button>
32 |         }/>
33 |       </div>
34 |     )
35 |   }
36 |   handleSwitch () {
37 |     this.setState({
38 |       type: this.state.type === 'password' ? 'text' : 'password'
39 |     })
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/views/Swiper.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Swiper, SwiperItem } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     images: [
 7 |       'http://assets.bittyos.com/images/swiper/01.jpg',
 8 |       'http://assets.bittyos.com/images/swiper/02.jpg',
 9 |       'http://assets.bittyos.com/images/swiper/03.jpg',
10 |       'http://assets.bittyos.com/images/swiper/04.jpg',
11 |       'http://assets.bittyos.com/images/swiper/05.jpg'
12 |     ],
13 |     active: 0,
14 |     options: {
15 |       speed: 500
16 |     }
17 |   }
18 |   render() {
19 |     let items = this.state.images.map((item,index) =>{
20 |       return (
21 |         <SwiperItem key={index}>
22 |           <img src={item} alt="" style={{maxWidth:'100%'}} />
23 |         </SwiperItem>
24 |       )
25 |     })
26 |     return (
27 |       <Layout>
28 |         <Nav slot="header" title="Swiper"/>
29 |         <Body slot="body">
30 |           <Swiper active={this.state.active} options={this.state.options} onChange={this.handleChange.bind(this)}>
31 |             {items}
32 |           </Swiper>
33 |           <Swiper active={this.state.active} options={{effect: 'fade', speed: 500}} onChange={this.handleChange.bind(this)}>
34 |             {items}
35 |           </Swiper>
36 |         </Body>
37 |       </Layout>
38 |     );
39 |   }
40 |   handleChange (active) {
41 |     console.log(active)
42 |     this.setState({
43 |       active
44 |     })
45 |   }
46 | }
47 | 
48 | export default Demo;
49 | 


--------------------------------------------------------------------------------
/src/components/checker/CheckerGroup.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import classnames from 'classnames';
 4 | 
 5 | const CheckerGroup = props => {
 6 |   let {children, className, onChange, disabled, ...others} = props
 7 |   let handleChange = e => {
 8 |     let value = null
 9 |     if (props.max === 1) {
10 |       value = [e.target.value]
11 |     } else {
12 |       if (e.target.checked && props.max !== 0 && props.max === props.value.length) {
13 |         console.log('max:', props.max)
14 |       } else {
15 |         value = [...props.value]
16 |         if (e.target.checked) {
17 |           value.indexOf(e.target.value) === -1 && value.push(e.target.value)
18 |         } else {
19 |           value.splice(value.indexOf(e.target.value), 1)
20 |         }
21 |       }
22 |     }
23 |     value && onChange && onChange(value)
24 |   }
25 |   let cloneChildren = React.Children.map(children, item => {
26 |     if (item) {
27 |       return React.cloneElement(item, {
28 |         $parent: {
29 |           ...others,
30 |           onChange: handleChange
31 |         }
32 |       })
33 |     }
34 |     return item
35 |   })
36 |   return (
37 |     <div className={classnames(["vx-checker-group", className])} disabled={disabled} {...others}>
38 |       {cloneChildren}
39 |     </div>
40 |   );
41 | }
42 | CheckerGroup.propsTypes = {
43 |   value: PropTypes.array,
44 |   max: PropTypes.number,
45 |   onChange: PropTypes.func
46 | }
47 | CheckerGroup.defaultProps = {
48 |   value: [],
49 |   max: 0,
50 | }
51 | 
52 | export default CheckerGroup;
53 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | 
19 | const jest = require('jest');
20 | const execSync = require('child_process').execSync;
21 | let argv = process.argv.slice(2);
22 | 
23 | function isInGitRepository() {
24 |   try {
25 |     execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
26 |     return true;
27 |   } catch (e) {
28 |     return false;
29 |   }
30 | }
31 | 
32 | function isInMercurialRepository() {
33 |   try {
34 |     execSync('hg --cwd . root', { stdio: 'ignore' });
35 |     return true;
36 |   } catch (e) {
37 |     return false;
38 |   }
39 | }
40 | 
41 | // Watch unless on CI or explicitly running all tests
42 | if (
43 |   !process.env.CI &&
44 |   argv.indexOf('--watchAll') === -1 &&
45 |   argv.indexOf('--watchAll=false') === -1
46 | ) {
47 |   // https://github.com/facebook/create-react-app/issues/5210
48 |   const hasSourceControl = isInGitRepository() || isInMercurialRepository();
49 |   argv.push(hasSourceControl ? '--watch' : '--watchAll');
50 | }
51 | 
52 | 
53 | jest.run(argv);
54 | 


--------------------------------------------------------------------------------
/src/views/Range.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Nav, Body, Range, Group} from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     value1: 0,
 7 |     value2: 0
 8 |   }
 9 |   render() {
10 |     return (
11 |       <Layout>
12 |         <Nav slot="header" title="Range"/>
13 |         <Body slot="body">
14 |           <Group title={`default(value:${this.state.value1})`}>
15 |             <div style={{padding:'10px'}}>
16 |               <Range value={this.state.value1} onChange={this.handleChange.bind(this, 'value1')}/>
17 |             </div>
18 |           </Group>
19 |           <Group title={`step:10(value:${this.state.value1})`}>
20 |             <div style={{padding:'10px'}}>
21 |               <Range unit="M" value={this.state.value1} step={10} onChange={this.handleChange.bind(this, 'value1')}/>
22 |             </div>
23 |           </Group>
24 |           <Group title={`min:10,max:50(value:${this.state.value2})`}>
25 |             <div style={{padding:'10px'}}>
26 |               <Range value={this.state.value2} min={10} max={50} onChange={this.handleChange.bind(this, 'value2')}/>
27 |             </div>
28 |           </Group>
29 |           <Group title={`disabled`}>
30 |             <div style={{padding:'10px'}}>
31 |               <Range value={this.state.value1} disabled/>
32 |             </div>
33 |           </Group>
34 |         </Body>
35 |       </Layout>
36 |     );
37 |   }
38 |   handleChange (key, value) {
39 |     let state = {...this.state}
40 |     state[key] = value
41 |     this.setState(state)
42 |   }
43 | }
44 | 
45 | export default Demo;
46 | 


--------------------------------------------------------------------------------
/src/components/prompt/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import classnames from 'classnames'
 3 | import Input from '../input'
 4 | import Password from '../password'
 5 | import Confirm from '../confirm'
 6 | 
 7 | class Prompt extends React.Component {
 8 |   static defaultProps = {
 9 |     inputProps: {}
10 |   }
11 |   constructor(props) {
12 |     super(props)
13 |     this.state = {
14 |       value: this.props.inputProps.value || ''
15 |     }
16 |     this.handleInput = this.handleInput.bind(this)
17 |     this.handleConfirm = this.handleConfirm.bind(this)
18 |   }
19 |   render () {
20 |     let {children, inputProps, className, style, disabled, ...others} = this.props
21 |     let _children = children
22 |     if (!_children) {
23 |       if (inputProps && inputProps.type === 'password') {
24 |         _children = <Password {...inputProps} value={this.state.value} className={classnames(['vx-prompt-input',inputProps.className])} onInput={this.handleInput}/>
25 |       } else {
26 |         _children = <Input {...inputProps} value={this.state.value} className={classnames(['vx-prompt-input',inputProps.className])}  onInput={this.handleInput}/>
27 |       }
28 |     }
29 |     return (
30 |       <Confirm {...others} style={style} className={classnames(['vx-prompt',{'is-disabled': children ? disabled : !this.state.value}, className])} onConfirm={this.handleConfirm}>{_children}</Confirm>
31 |     )
32 |   }
33 |   handleInput (value) {
34 |     this.setState({value})
35 |   }
36 |   handleConfirm () {
37 |     this.props.onConfirm && this.props.onConfirm(this.state.value)
38 |   }
39 | }
40 | 
41 | export default Prompt;
42 | 


--------------------------------------------------------------------------------
/src/components/marquee/Marquee.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import classnames from 'classnames';
 3 | import PropTypes from 'prop-types';
 4 | 
 5 | class Marquee extends React.Component {
 6 |   static propTypes = {
 7 |     active: PropTypes.number,
 8 |     options: PropTypes.object,
 9 |     direction: PropTypes.string,
10 |     autoplay: PropTypes.number,
11 |     effect: PropTypes.string,
12 |     loop: PropTypes.bool,
13 |     onChange: PropTypes.func
14 |   }
15 |   static defaultProps = {
16 |     active: 0,
17 |     autoplay: 2000,
18 |     direction: 'vertical',
19 |     effect: 'slide',
20 |     loop: true
21 |   }
22 |   render () {
23 |     let {children, className, ...others} = this.props
24 |     return (
25 |       <div ref="$el" className={classnames(['vx-marquee', 'swiper-container', className])} {...others}>
26 |         <div className="swiper-wrapper" >
27 |           {children}
28 |         </div>
29 |       </div>
30 |     );
31 |   }
32 |   componentDidMount () {
33 |     let {active, direction, autoplay, loop, onChange} = this.props
34 |     import('swiper/dist/js/swiper.min.js').then(res => {
35 |       let Swiper = res.default
36 |       import('swiper/dist/css/swiper.min.css')
37 |       let options = Object.assign({
38 |         initialSlide: active,
39 |         direction: direction,
40 |         autoplay: autoplay,
41 |         loop: loop,
42 |         onSlideChangeStart: (swiper) => {
43 |           onChange && onChange(swiper.activeIndex)
44 |         }
45 |       }, this.props.options)
46 |       this.$$swiper = new Swiper(this.refs.$el, options)
47 |     })
48 |   }
49 | }
50 | 
51 | export default Marquee;
52 | 


--------------------------------------------------------------------------------
/src/components/flexbox/Flexbox.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import classnames from 'classnames'
 4 | const mapFlexLayout = {
 5 |   direction: {
 6 |     column: `flexbox--column`
 7 |   },
 8 |   wrap: {
 9 |     wrap: `flexbox--wrap`
10 |   },
11 |   justify: {
12 |     center: `flexbox--content-center`
13 |   },
14 |   align: {
15 |     center: `flexbox--align-center`
16 |   }
17 | }
18 | const Flexbox = props => {
19 |   const { className, direction, wrap, justify, align, children, component, ...others } = props
20 |   let array = ['vx-flexbox']
21 |   for (let name in mapFlexLayout) {
22 |     if (props[name] && mapFlexLayout[name][props[name]]) {
23 |       array.push('vx-' + mapFlexLayout[name][props[name]])
24 |     }
25 |   }
26 |   
27 |   array.push(className)
28 |   const cls = classnames(array)
29 |   let cloneChildren = React.Children.map(children, (item) => {
30 |     if (item) {
31 |       return React.cloneElement(item, {
32 |         gutter: props.gutter
33 |       })
34 |     }
35 |     return item;
36 |   })
37 |   
38 |   let Component = component || 'div'
39 |   return (
40 |     <Component 
41 |       {...others}
42 |       className={cls}>
43 |         {cloneChildren}
44 |     </Component>
45 |   )
46 | }
47 | Flexbox.propTypes = {
48 |   direction: PropTypes.string,
49 |   wrap: PropTypes.string,
50 |   justify: PropTypes.string,
51 |   align: PropTypes.string,
52 |   gutter: PropTypes.number
53 | }
54 | Flexbox.defaultProps = {
55 |   direction: 'normal',
56 |   wrap: 'normal',
57 |   align: 'normal',
58 |   justify: 'normal',
59 |   gutter: 0
60 | }
61 | 
62 | export default Flexbox
63 | 


--------------------------------------------------------------------------------
/src/components/accordion/Accordion.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import classnames from 'classnames';
 4 | 
 5 | class Accordion extends React.Component{
 6 |   static propTypes = {
 7 |     mutex: PropTypes.bool
 8 |   }
 9 |   static defaultProps = {
10 |     mutex: true
11 |   }
12 |   constructor (props) {
13 |     super(props)
14 |     this.state = {value: []}
15 |     this.open = this.open.bind(this)
16 |     this.close = this.close.bind(this)
17 |   }
18 |   render () {
19 |     let {children, className, mutex, ...others} = this.props
20 |     let cloneChildren = React.Children.map(children, (item) => {
21 |       if (item) {
22 |         return React.cloneElement(item, {
23 |           toOpen: this.open,
24 |           toClose: this.close,
25 |           value: this.state.value
26 |         })
27 |       }
28 |       return item;
29 |     })
30 |     return (
31 |       <div className={classnames(["vx-accordion", className])} data-mutex={mutex} {...others}>
32 |         {cloneChildren}
33 |       </div>
34 |     );
35 |   }
36 |   open (name) {
37 |     if (!this.props.mutex) {
38 |       if (this.state.value.indexOf(name) === -1) {
39 |         this.setState({
40 |           value: [...this.state.value, name]
41 |         })
42 |       } else {
43 |         this.close(name)
44 |       }
45 |     } else {
46 |       this.setState({
47 |         value: this.state.value[0] === name ? [] : [name]
48 |       })
49 |     }
50 |   }
51 |   close (name) {
52 |     let value = this.state.value.filter(item => {
53 |       return item !== name
54 |     })
55 |     this.setState({value})
56 |   }
57 | }
58 | 
59 | export default Accordion;
60 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
 2 | import thunk from 'redux-thunk';
 3 | import { createLogger } from 'redux-logger';
 4 | import reducer, { initialState } from './root/reducer';
 5 | import DevTools from '../devtools'
 6 | 
 7 | let rootReducer = reducer
 8 | 
 9 | const AsyncReducer = store => next => action => {
10 |   let module = action.$$module
11 |   if (module) {
12 |     import(`@/store/${module}/reducer`).then(res => {
13 |       injectReducer({key: module, reducer: res.default})
14 |       next(action)
15 |     }).catch(() => {
16 |       return next(action)
17 |     })
18 |   } else {
19 |     return next(action)
20 |   }
21 | }
22 | 
23 | let enhancer = applyMiddleware(AsyncReducer, thunk)
24 | if (process.env.NODE_ENV === 'development') {
25 |   enhancer = compose(
26 |     applyMiddleware(AsyncReducer, thunk, createLogger()),
27 |     DevTools.instrument()
28 |   )
29 | }
30 | 
31 | export const makeRootReducer = (asyncReducers) => {
32 |   return combineReducers({
33 |     ...rootReducer,
34 |     ...asyncReducers
35 |   })
36 | }
37 | 
38 | let store = createStore(makeRootReducer(), initialState, enhancer);
39 | 
40 | store.asyncReducers = {}
41 | 
42 | export const injectReducer = ({ key, reducer }) => {
43 |   store.asyncReducers[key] = reducer
44 |   store.replaceReducer(makeRootReducer(store.asyncReducers))
45 | }
46 | 
47 | if (process.env.NODE_ENV === 'development') {
48 |   if (module.hot) {
49 |     module.hot.accept('./root/reducer', () => {
50 |       rootReducer = require('./root/reducer').default;
51 |       store.replaceReducer(makeRootReducer(store.asyncReducers))
52 |     })
53 |   }
54 | }
55 | 
56 | 
57 | export default store


--------------------------------------------------------------------------------
/src/views/Tab.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Tab, TabItem } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     active: 'recommed',
 7 |     items: [
 8 |       {name: 'recommed', label: '推荐'},
 9 |       {name: 'it', label: '科技'},
10 |       {name: 'active', label: '活动'},
11 |       {name: 'find', label: '发现'},
12 |       {name: 'sort', label: '排行'},
13 |       {name: 'msg', label: '消息'},
14 |       {name: 'sns', label: '社区'}
15 |     ]
16 |   }
17 |   render() {
18 |     let items = this.state.items.slice(0,4).map((item, index) => {
19 |       return <TabItem name={item.name} key={index}>{item.label}</TabItem>
20 |     })
21 |     return (
22 |       <Layout>
23 |         <Nav slot="header" title="Tab"/>
24 |         <Body slot="body">
25 |           <Tab active={this.state.active} onChange={this.handleChange.bind(this)}>
26 |             {items}
27 |           </Tab>
28 |           <Tab active={this.state.active} underlineWidth="10" onChange={this.handleChange.bind(this)}>
29 |             {items}
30 |           </Tab>
31 |           <Tab active={this.state.active} underlineWidth="auto"onChange={this.handleChange.bind(this)}>
32 |             {items}
33 |           </Tab>
34 |           <Tab active={this.state.active} underlineWidth="10" layout="scroll" onChange={this.handleChange.bind(this)}>
35 |             {this.state.items.map((item, index) => {
36 |               return <TabItem name={item.name} key={index}>{item.label}</TabItem>
37 |             })}
38 |           </Tab>
39 |         </Body>
40 |         
41 |       </Layout>
42 |     );
43 |   }
44 |   handleChange (value) {
45 |     this.setState({
46 |       active: value
47 |     })
48 |   }
49 | }
50 | 
51 | export default Demo;
52 | 


--------------------------------------------------------------------------------
/src/views/Radio.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Group, Radio, RadioGroup, Divider } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     checked: false,
 7 |     value: '1',
 8 |     options: [
 9 |       {
10 |         value: '1',
11 |         label: '篮球'
12 |       },
13 |       {
14 |         value: '2',
15 |         label: '羽毛球'
16 |       },
17 |       {
18 |         value: '3',
19 |         label: '乒乓球',
20 |         disabled: true
21 |       },
22 |       {
23 |         value: '4',
24 |         label: '高尔夫'
25 |       }
26 |     ]
27 |   }
28 |   render() {
29 |     return (
30 |       <Layout>
31 |         <Nav slot="header" title="Radio"/>
32 |         <Body slot="body">
33 |         <Group title="Radio">
34 |           <Radio checked={this.state.value === '1'} value="1" onChange={this.handleGroupChange.bind(this)}>篮球</Radio>
35 |           <Divider/>
36 |           <Radio checked={this.state.value === '2'} value="2" onChange={this.handleGroupChange.bind(this)}>羽毛球</Radio>
37 |         </Group>
38 |           <Group title={"RadioGroup："+this.state.value}>
39 |             <RadioGroup value={this.state.value} onChange={this.handleGroupChange.bind(this)}>
40 |               {(() => {
41 |                 return this.state.options.map((item, index) => {
42 |                   return <Radio value={item.value} key={index} disabled={item.disabled}>{item.label}</Radio>
43 |                 })
44 |               })()}
45 |             </RadioGroup>
46 |           </Group>
47 |         </Body>
48 |       </Layout>
49 |     );
50 |   }
51 |   handleChange (e) {
52 |     this.setState({
53 |       checked: e.target.checked
54 |     })
55 |   }
56 |   handleGroupChange (value) {
57 |     this.setState({
58 |       value: value
59 |     })
60 |   }
61 | }
62 | 
63 | export default Demo;
64 | 


--------------------------------------------------------------------------------
/src/views/Popover.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Nav, Body, Popover, Button, Divider, Flexbox, FlexboxItem} from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   render() {
 6 |     let menu = (
 7 |       <div className="vx-popover--menu">
 8 |         <div className="vx-popover--menu-item" onClick={this.handleClick}>扫一扫</div>
 9 |         <Divider />
10 |         <div className="vx-popover--menu-item" onClick={this.handleClick}>找朋友</div>
11 |         <Divider />
12 |         <div className="vx-popover--menu-item" onClick={this.handleClick}>收付款</div>
13 |       </div>
14 |     )
15 |     return (
16 |       <Layout>
17 |         <Nav slot="header" title="Popover"/>
18 |         <Body slot="body" style={{padding:'0.2rem'}}>
19 |           <Flexbox style={{marginBottom:'400px'}}>
20 |             <FlexboxItem>
21 |               <Popover trigger={<Button>left top</Button>}>
22 |                 {menu}
23 |               </Popover>
24 |             </FlexboxItem>
25 |             <FlexboxItem style={{textAlign:'right'}}>
26 |               <Popover trigger={<Button>right top</Button>}>
27 |                 {menu}
28 |               </Popover>
29 |             </FlexboxItem>
30 |           </Flexbox>
31 |           <Flexbox>
32 |             <FlexboxItem>
33 |               <Popover trigger={<Button>left bottom</Button>}>
34 |                 {menu}
35 |               </Popover>
36 |             </FlexboxItem>
37 |             <FlexboxItem style={{textAlign:'right'}}>
38 |               <Popover trigger={<Button>right bottom</Button>}>
39 |                 {menu}
40 |               </Popover>
41 |             </FlexboxItem>
42 |           </Flexbox>
43 |         </Body>
44 |       </Layout>
45 |     );
46 |   }
47 |   handleClick (e) {
48 |     console.log(e.target.innerHTML)
49 |   }
50 | }
51 | 
52 | export default Demo;
53 | 


--------------------------------------------------------------------------------
/src/components/checkbox/CheckboxGroup.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import classnames from 'classnames';
 4 | 
 5 | const CheckboxGroup = props => {
 6 |   let {children, className, divider, inline, iconStyle, onChange, ...others} = props
 7 |   let handleChange = e => {
 8 |     let value = null
 9 |     if (props.max === 1) {
10 |       value = [e.target.value]
11 |     } else {
12 |       if (e.target.checked && props.max !== 0 && props.max === props.value.length) {
13 |         console.log('max:', props.max)
14 |       } else {
15 |         value = [...props.value]
16 |         if (e.target.checked) {
17 |           value.indexOf(e.target.value) === -1 && value.push(e.target.value)
18 |         } else {
19 |           value.splice(value.indexOf(e.target.value), 1)
20 |         }
21 |       }
22 |     }
23 |     value && onChange && onChange(value)
24 |   }
25 |   let cloneChildren = React.Children.map(children, item => {
26 |     if (item) {
27 |       return React.cloneElement(item, {
28 |         $parent: {
29 |           ...others,
30 |           inline,
31 |           iconStyle,
32 |           onChange: handleChange
33 |         }
34 |       })
35 |     }
36 |     return item
37 |   })
38 |   return (
39 |     <div className={classnames(["vx-checkbox-group", {'is-divider': divider && !inline}, className])} {...others}>
40 |       {cloneChildren}
41 |     </div>
42 |   );
43 | }
44 | CheckboxGroup.propsTypes = {
45 |   value: PropTypes.array,
46 |   divider: PropTypes.bool,
47 |   inline: PropTypes.bool,
48 |   max: PropTypes.number,
49 |   direction: PropTypes.string,
50 |   iconStyle: PropTypes.string,
51 |   onChange: PropTypes.func
52 | }
53 | CheckboxGroup.defaultProps = {
54 |   value: [],
55 |   divider: true,
56 |   max: 0,
57 |   inline: false,
58 |   direction: 'normal'
59 | }
60 | 
61 | export default CheckboxGroup;
62 | 


--------------------------------------------------------------------------------
/src/views/Accordion.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Accordion, AccordionItem, Group} from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   render() {
 6 |     return (
 7 |       <Layout>
 8 |         <Nav slot="header" title="Accordion"/>
 9 |         <Body slot="body">
10 |           <Group>
11 |             <Accordion>
12 |               <AccordionItem title="标题文字" open={true}>
13 |                 如果有一天我能够拥有一个大果园，
14 |                 我愿放下所有追求做个农夫去种田，
15 |                 每一个早晨我耕耘在绿野田园，
16 |                 每一个黄昏我守望在乡间的麦田。
17 |                 我会把忧虑都融化在夕阳里，
18 |                 让孤独的心等待秋收的欢喜。
19 |               </AccordionItem>
20 |               <AccordionItem title="标题文字">
21 |                 如果有一天我能够拥有一个大果园，
22 |                 我愿放下所有追求做个农夫去种田，
23 |                 每一个早晨我耕耘在绿野田园，
24 |                 每一个黄昏我守望在乡间的麦田。
25 |                 我会把忧虑都融化在夕阳里，
26 |                 让孤独的心等待秋收的欢喜。
27 |               </AccordionItem>
28 |             </Accordion>
29 |           </Group>
30 |           <Group title="非互斥状态:mutex={false}">
31 |             <Accordion mutex={false}>
32 |               <AccordionItem title="标题文字" open={true}>
33 |                 如果有一天我能够拥有一个大果园，
34 |                 我愿放下所有追求做个农夫去种田，
35 |                 每一个早晨我耕耘在绿野田园，
36 |                 每一个黄昏我守望在乡间的麦田。
37 |                 我会把忧虑都融化在夕阳里，
38 |                 让孤独的心等待秋收的欢喜。
39 |               </AccordionItem>
40 |               <AccordionItem title="标题文字">
41 |                 如果有一天我能够拥有一个大果园，
42 |                 我愿放下所有追求做个农夫去种田，
43 |                 每一个早晨我耕耘在绿野田园，
44 |                 每一个黄昏我守望在乡间的麦田。
45 |                 我会把忧虑都融化在夕阳里，
46 |                 让孤独的心等待秋收的欢喜。
47 |               </AccordionItem>
48 |             </Accordion>
49 |           </Group>
50 |         </Body>
51 |       </Layout>
52 |     );
53 |   }
54 | }
55 | 
56 | export default Demo;
57 | 


--------------------------------------------------------------------------------
/src/views/Button.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Button } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   render() {
 6 |     return (
 7 |       <Layout>
 8 |         <Nav slot="header" title="Button"/>
 9 |         <Body slot="body" style={{padding:'10px',background: '#fff'}}>
10 |           <Button>default</Button>
11 |           <Button type="primary">primary</Button>
12 |           <Button type="danger">danger</Button>
13 |           <Button type="warning">warning</Button>
14 |           <Button type="primary" plain>primary</Button>
15 |           <Button type="primary" size="small">primary</Button>
16 |           <Button type="link">link</Button>
17 |           <br/>
18 |           <br/>
19 |           <Button size="large">default</Button>
20 |           <br/>
21 |           <Button type="primary" size="large">primary</Button>
22 |           <br/>
23 |           <Button type="danger" size="large">danger</Button>
24 |           <br/>
25 |           <Button type="warning" size="large">warning</Button>
26 |           <br/>
27 |           <Button disabled size="large">default</Button>
28 |           <br/>
29 |           <Button type="primary" disabled size="large">primary</Button>
30 |           <br/>
31 |           <Button type="primary" plain size="large" disabled>primary</Button>
32 |           <br/>
33 |           <Button type="danger" plain size="large">danger</Button>
34 |           <br/>
35 |           <Button type="warning" plain size="large">warning</Button>
36 |           <br />
37 |           <Button type="primary" loading size="large">primary</Button>
38 |           <br/>
39 |           <Button size="large" ripple>default</Button>
40 |           <br/>
41 |           <Button type="primary" size="large" ripple>primary</Button>
42 |         </Body>
43 |       </Layout>
44 |     );
45 |   }
46 | }
47 | 
48 | export default Demo;
49 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/views/Layout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   render() {
 6 |     return (
 7 |       <Layout>
 8 |         <Nav slot="header" title="Layout --- header area"/>
 9 |         <Body slot="body" style={{background:'#fff',padding:'0.2rem', lineHeight:1.7}}>
10 |           新华社北京5月27日电 中共中央政治局5月26日下午就推动形成绿色发展方式和生活方式进行第四十一次集体学习。中共中央总书记习近平在主持学习时强调，推动形成绿色发展方式和生活方式是贯彻新发展理念的必然要求，必须把生态文明建设摆在全局工作的突出地位，坚持节约资源和保护环境的基本国策，坚持节约优先、保护优先、自然恢复为主的方针，形成节约资源和保护环境的空间格局、产业结构、生产方式、生活方式，努力实现经济社会发展和生态环境保护协同共进，为人民群众创造良好生产生活环境。
11 |     学习开始时，播放了有关生态环境保护的专题片。随后，何立峰、姜大明、陈吉宁、陈政高、陈雷同志先后发言，他们结合本部门工作实际谈了对推进生态文明建设、推动绿色发展、加强环境保护等方面的体会和意见。新华社北京5月27日电 中共中央政治局5月26日下午就推动形成绿色发展方式和生活方式进行第四十一次集体学习。中共中央总书记习近平在主持学习时强调，推动形成绿色发展方式和生活方式是贯彻新发展理念的必然要求，必须把生态文明建设摆在全局工作的突出地位，坚持节约资源和保护环境的基本国策，坚持节约优先、保护优先、自然恢复为主的方针，形成节约资源和保护环境的空间格局、产业结构、生产方式、生活方式，努力实现经济社会发展和生态环境保护协同共进，为人民群众创造良好生产生活环境。
12 |     学习开始时，播放了有关生态环境保护的专题片。随后，何立峰、姜大明、陈吉宁、陈政高、陈雷同志先后发言，他们结合本部门工作实际谈了对推进生态文明建设、推动绿色发展、加强环境保护等方面的体会和意见。新华社北京5月27日电 中共中央政治局5月26日下午就推动形成绿色发展方式和生活方式进行第四十一次集体学习。中共中央总书记习近平在主持学习时强调，推动形成绿色发展方式和生活方式是贯彻新发展理念的必然要求，必须把生态文明建设摆在全局工作的突出地位，坚持节约资源和保护环境的基本国策，坚持节约优先、保护优先、自然恢复为主的方针，形成节约资源和保护环境的空间格局、产业结构、生产方式、生活方式，努力实现经济社会发展和生态环境保护协同共进，为人民群众创造良好生产生活环境。
13 |     学习开始时，播放了有关生态环境保护的专题片。随后，何立峰、姜大明、陈吉宁、陈政高、陈雷同志先后发言，他们结合本部门工作实际谈了对推进生态文明建设、推动绿色发展、加强环境保护等方面的体会和意见。新华社北京5月27日电 中共中央政治局5月26日下午就推动形成绿色发展方式和生活方式进行第四十一次集体学习。中共中央总书记习近平在主持学习时强调，推动形成绿色发展方式和生活方式是贯彻新发展理念的必然要求，必须把生态文明建设摆在全局工作的突出地位，坚持节约资源和保护环境的基本国策，坚持节约优先、保护优先、自然恢复为主的方针，形成节约资源和保护环境的空间格局、产业结构、生产方式、生活方式，努力实现经济社会发展和生态环境保护协同共进，为人民群众创造良好生产生活环境。
14 |     学习开始时，播放了有关生态环境保护的专题片。随后，何立峰、姜大明、陈吉宁、陈政高、陈雷同志先后发言，他们结合本部门工作实际谈了对推进生态文明建设、推动绿色发展、加强环境保护等方面的体会和意见。
15 |         </Body>
16 |         <div slot="footer" style={{padding:'0.3rem'}}>footer area</div>
17 |         <div>other area</div>
18 |       </Layout>
19 |     );
20 |   }
21 | }
22 | 
23 | export default Demo;
24 | 


--------------------------------------------------------------------------------
/src/components/remtopx/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | 
 4 | export default class RemToPx extends React.Component{
 5 |   static propTypes = {
 6 |     width: PropTypes.number,
 7 |     height: PropTypes.number,
 8 |     even: PropTypes.bool,
 9 |     component: PropTypes.string
10 |   }
11 |   static defaultProps = {
12 |     component: 'div',
13 |     even: false
14 |   }
15 |   constructor (props) {
16 |     super(props)
17 |     this.state = {
18 |       style: {}
19 |     }
20 |     this.handleResize = this.handleResize.bind(this)
21 |   }
22 |   render () {
23 |     const { style, width, height, even, component, children, ...others} = this.props
24 |     let Component = component
25 |     return (
26 |       <Component style={this.state.style} {...others}>
27 |         {children}
28 |       </Component>
29 |     )
30 |   }
31 |   componentDidMount () {
32 |     this.handleResize()
33 |     window.addEventListener('resize', this.handleResize, false)
34 |   }
35 |   componentWillUnmount () {
36 |     window.removeEventListener('resize', this.handleResize)
37 |   }
38 |   handleResize () {
39 |     this.setState({
40 |       style: this.getStyle()
41 |     })
42 |   }
43 |   getStyle () {
44 |     let fontSize = document.documentElement.style.fontSize
45 |     let width = ''
46 |     let height = ''
47 |     if (fontSize) {
48 |       fontSize = parseInt(fontSize, 10)
49 |       if (this.props.width) {
50 |         width = Math.round(fontSize * this.props.width)
51 |         if (this.props.even && width % 2) {
52 |           width++
53 |         }
54 |       }
55 |       if (this.props.height) {
56 |         height = Math.round(fontSize * this.props.height)
57 |         if (this.props.even && height % 2) {
58 |           height++
59 |         }
60 |       }
61 |     }
62 |     return {
63 |       width: `${width}px`,
64 |       height: `${height}px`
65 |     }
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/src/views/Preview.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Preview, Img } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     images: [
 7 |       {
 8 |         src: 'http://assets.bittyos.com/images/swiper/01.jpg'
 9 |       },
10 |       {
11 |         src: 'http://assets.bittyos.com/images/swiper/02.jpg'
12 |       },
13 |       {
14 |         src: 'http://assets.bittyos.com/images/swiper/03.jpg'
15 |       },
16 |       {
17 |         src: 'http://assets.bittyos.com/images/swiper/04.jpg'
18 |       },
19 |       {
20 |         src: 'http://assets.bittyos.com/images/swiper/05.jpg'
21 |       }
22 |     ]
23 |   }
24 |   render() {
25 |     return (
26 |       <Layout>
27 |         <Nav slot="header" title="Preview(点击图片浏览图片)"/>
28 |         <Body slot="body">
29 |           {this.state.images.map((item,index) => {
30 |             return (
31 |               <Img
32 |                 key={index} 
33 |                 loading={true}
34 |                 src={item.src}
35 |                 style={{minHeight:'150px'}}
36 |                 onLoad={this.handleLoad.bind(this,index)}
37 |                 onClick={this.handleClick.bind(this,index)}/>
38 |             )
39 |           })}
40 |         </Body>
41 |         <Preview list={this.state.images} ref="preview"/>
42 |       </Layout>
43 |     );
44 |   }
45 |   handleLoad (index, e) {
46 |     let windowWidth = window.innerWidth
47 |     let img = e.target
48 |     let natural = {
49 |       w: img.naturalWidth,
50 |       h: img.naturalHeight
51 |     }
52 |     let item = {
53 |       src: img.src,
54 |       w: natural.w > windowWidth ? windowWidth : natural.w,
55 |       h: natural.w > windowWidth ? natural.h / natural.w * windowWidth : natural.h
56 |     }
57 |     let state = {...this.state}
58 |     state.images[index] = item
59 |     this.setState(state)
60 |   }
61 |   handleClick (index) {
62 |     this.refs.preview.open(index)
63 |   }
64 | }
65 | 
66 | export default Demo;
67 | 


--------------------------------------------------------------------------------
/src/components/actionsheet/Actionsheet.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Popup from '../popup';
 3 | import classnames from 'classnames';
 4 | import PropTypes from 'prop-types';
 5 | 
 6 | const Actionsheet = props => {
 7 |   let {children, className, title, cancelText, cancel, type, onAction, onClose, ...others} = props
 8 |   
 9 |   let handleClose = () => {
10 |     onClose && onClose()
11 |   }
12 |   let handleClick = value => {
13 |     onAction && onAction(value)
14 |     handleClose()
15 |   }
16 |   let direction = type === 'menu' ? 'center' : 'bottom'
17 |   let cloneChildren = React.Children.map(children, item => {
18 |     if (item) {
19 |       return React.cloneElement(item, {
20 |         onClick: handleClick.bind(this, item.props.value)
21 |       })
22 |     }
23 |     return item
24 |   })
25 |   let cls = classnames(["vx-actionsheet", {'vx-actionsheet--menu': type === 'menu'}, {'is-not-title': !title}, className])
26 |   return (
27 |     <Popup className={cls} {...others} direction={direction} onClose={handleClose}>
28 |       <div className="vx-actionsheet--inner" >
29 |         {title && <div className="vx-actionsheet--title">
30 |           {title}
31 |         </div>
32 |         }
33 |         <div className="vx-actionsheet--items">
34 |           {cloneChildren}
35 |         </div>
36 |         {cancel && <div className="vx-actionsheet--cancel" onClick={handleClose}>
37 |           {cancelText}
38 |         </div>
39 |         }
40 |       </div>
41 |     </Popup>
42 |   );
43 | }
44 | Actionsheet.propTypes = {
45 |   type: PropTypes.string,
46 |   open: PropTypes.bool,
47 |   cancel: PropTypes.bool,
48 |   cancelText: PropTypes.string,
49 |   title: PropTypes.string,
50 |   fastClose: PropTypes.bool,
51 |   onClose: PropTypes.func,
52 |   onClick: PropTypes.func
53 | }
54 | Actionsheet.defaultProps = {
55 |   type: 'default',
56 |   open: false,
57 |   cancel: false,
58 |   cancelText: '取消',
59 |   title: '',
60 |   fastClose: true
61 | }
62 | 
63 | export default Actionsheet;
64 | 


--------------------------------------------------------------------------------
/src/views/Sticky.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Tab, TabItem, Img, Sticky} from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     active: 'recommed',
 7 |     items: [
 8 |       {name: 'recommed', label: '推荐'},
 9 |       {name: 'it', label: '科技'},
10 |       {name: 'active', label: '活动'},
11 |       {name: 'find', label: '发现'}
12 |     ]
13 |   }
14 |   render() {
15 |     let items = this.state.items.map((item, index) => {
16 |       return <TabItem name={item.name} key={index}>{item.label}</TabItem>
17 |     })
18 |     return (
19 |       <Layout>
20 |         <Nav slot="header" title="Sticky-往上滚动Tab栏会固定位置"/>
21 |         <Body slot="body" style={{background:'#fff', lineHeight:2.5}}>
22 |           <Img src="http://assets.bittyos.com/images/swiper/01.jpg" style={{minHeight:'100px'}}/>
23 |           <Sticky>
24 |             <Tab active={this.state.active} onChange={this.handleChange.bind(this)} underlineWidth="auto">
25 |               {items}
26 |             </Tab>
27 |           </Sticky>
28 |           <div>
29 |               新华社北京5月27日电 中共中央政治局5月26日下午就推动形成绿色发展方式和生活方式进行第四十一次集体学习。中共中央总书记习近平在主持学习时强调，推动形成绿色发展方式和生活方式是贯彻新发展理念的必然要求，必须把生态文明建设摆在全局工作的突出地位，坚持节约资源和保护环境的基本国策，坚持节约优先、保护优先、自然恢复为主的方针，形成节约资源和保护环境的空间格局、产业结构、生产方式、生活方式，努力实现经济社会发展和生态环境保护协同共进，为人民群众创造良好生产生活环境。
30 | 
31 |         学习开始时，播放了有关生态环境保护的专题片。随后，何立峰、姜大明、陈吉宁、陈政高、陈雷同志先后发言，他们结合本部门工作实际谈了对推进生态文明建设、推动绿色发展、加强环境保护等方面的体会和意见。
32 |               新华社北京5月27日电 中共中央政治局5月26日下午就推动形成绿色发展方式和生活方式进行第四十一次集体学习。中共中央总书记习近平在主持学习时强调，推动形成绿色发展方式和生活方式是贯彻新发展理念的必然要求，必须把生态文明建设摆在全局工作的突出地位，坚持节约资源和保护环境的基本国策，坚持节约优先、保护优先、自然恢复为主的方针，形成节约资源和保护环境的空间格局、产业结构、生产方式、生活方式，努力实现经济社会发展和生态环境保护协同共进，为人民群众创造良好生产生活环境。
33 | 
34 |         学习开始时，播放了有关生态环境保护的专题片。随后，何立峰、姜大明、陈吉宁、陈政高、陈雷同志先后发言，他们结合本部门工作实际谈了对推进生态文明建设、推动绿色发展、加强环境保护等方面的体会和意见。
35 |           </div>
36 |         </Body>
37 |       </Layout>
38 |     );
39 |   }
40 |   handleChange (value) {
41 |     this.setState({
42 |       active: value
43 |     })
44 |   }
45 | }
46 | 
47 | export default Demo;
48 | 


--------------------------------------------------------------------------------
/src/views/Img.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Nav, Body, Img} from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     value: 0
 7 |   }
 8 |   render() {
 9 |     return (
10 |       <Layout>
11 |         <Nav slot="header" title="Img(滚动加载资源)"/>
12 |         <Body slot="body" style={{lineHeight:2}}>
13 |           <Img style={{minHeight:'100px'}} src="http://assets.bittyos.com/images/swiper/01.jpg" />
14 |           <p>新华社北京5月27日电 中共中央政治局5月26日下午就推动形成绿色发展方式和生活方式进行第四十一次集体学习。中共中央总书记习近平在主持学习时强调，推动形成绿色发展方式和生活方式是贯彻新发展理念的必然要求，必须把生态文明建设摆在全局工作的突出地位，坚持节约资源和保护环境的基本国策，坚持节约优先、保护优先、自然恢复为主的方针，形成节约资源和保护环境的空间格局、产业结构、生产方式、生活方式，努力实现经济社会发展和生态环境保护协同共进，为人民群众创造良好生产生活环境。
15 |     学习开始时，播放了有关生态环境保护的专题片。随后，何立峰、姜大明、陈吉宁、陈政高、陈雷同志先后发言，他们结合本部门工作实际谈了对推进生态文明建设、推动绿色发展、加强环境保护等方面的体会和意见。</p>
16 |           <Img style={{minHeight:'100px'}} src="http://assets.bittyos.com/images/swiper/02.jpg" loading={true}/>
17 |           <p>新华社北京5月27日电 中共中央政治局5月26日下午就推动形成绿色发展方式和生活方式进行第四十一次集体学习。中共中央总书记习近平在主持学习时强调，推动形成绿色发展方式和生活方式是贯彻新发展理念的必然要求，必须把生态文明建设摆在全局工作的突出地位，坚持节约资源和保护环境的基本国策，坚持节约优先、保护优先、自然恢复为主的方针，形成节约资源和保护环境的空间格局、产业结构、生产方式、生活方式，努力实现经济社会发展和生态环境保护协同共进，为人民群众创造良好生产生活环境。
18 |     学习开始时，播放了有关生态环境保护的专题片。随后，何立峰、姜大明、陈吉宁、陈政高、陈雷同志先后发言，他们结合本部门工作实际谈了对推进生态文明建设、推动绿色发展、加强环境保护等方面的体会和意见。</p>
19 |           <Img style={{minHeight:'100px'}} src="http://assets.bittyos.com/images/swiper/03.jpg" loading={true}/>
20 |           <p>新华社北京5月27日电 中共中央政治局5月26日下午就推动形成绿色发展方式和生活方式进行第四十一次集体学习。中共中央总书记习近平在主持学习时强调，推动形成绿色发展方式和生活方式是贯彻新发展理念的必然要求，必须把生态文明建设摆在全局工作的突出地位，坚持节约资源和保护环境的基本国策，坚持节约优先、保护优先、自然恢复为主的方针，形成节约资源和保护环境的空间格局、产业结构、生产方式、生活方式，努力实现经济社会发展和生态环境保护协同共进，为人民群众创造良好生产生活环境。
21 |     学习开始时，播放了有关生态环境保护的专题片。随后，何立峰、姜大明、陈吉宁、陈政高、陈雷同志先后发言，他们结合本部门工作实际谈了对推进生态文明建设、推动绿色发展、加强环境保护等方面的体会和意见。</p>
22 |           <Img style={{minHeight:'100px'}} src="http://assets.bittyos.com/images/swiper/03.jpg" loading={true}/>
23 |         </Body>
24 |       </Layout>
25 |     );
26 |   }
27 |   handleChange (value) {
28 |     this.setState({
29 |       value
30 |     })
31 |   }
32 | }
33 | 
34 | export default Demo;
35 | 


--------------------------------------------------------------------------------
/src/components/checkbox/Checkbox.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import classnames from 'classnames';
 3 | import PropTypes from 'prop-types';
 4 | 
 5 | const Checkbox = props => {
 6 |   let {children, className, style, $parent, inline, iconStyle, onChange, ...others} = props
 7 |   let type = $parent && $parent.max === 1 ? 'radio' : 'checkbox'
 8 |   let checked = others.checked
 9 |   let disabled = others.disabled
10 |   if ($parent) {
11 |     if ($parent.value instanceof Array) {
12 |       checked = $parent.value.indexOf(others.value) > -1
13 |     } else {
14 |       checked = $parent.value === others.value
15 |     }
16 |     if ($parent.value.length >= $parent.max && $parent.max > 1) {
17 |       disabled = $parent.value.indexOf(others.value) === -1
18 |     }
19 |     if ($parent.inline !== undefined) {
20 |       inline = $parent.inline
21 |     }
22 |     if ($parent.iconStyle !== undefined) {
23 |       iconStyle = $parent.iconStyle
24 |     }
25 |   }
26 |   let handleChange = (e) => {
27 |     if ($parent) {
28 |       $parent.onChange && $parent.onChange(e)
29 |     } else {
30 |       onChange && onChange(e)
31 |     }
32 |   }
33 |   return (
34 |     <label
35 |       style={style}
36 |       className={classnames(['vx-checkbox', {'is-disabled': disabled, 'is-inline': inline, 'vx-checkbox--reverse': $parent && $parent.direction === 'reverse', 'is-active': others.checked}, className])}>
37 |       <input {...others} type={type} checked={checked} disabled={disabled} onChange={handleChange}/>
38 |       <i className={classnames(["vx-checkbox--icon", iconStyle ? `is-${iconStyle}` : ''])}></i>
39 |       <span className="vx-checkbox--text">
40 |         {children}
41 |       </span>
42 |     </label>
43 |   );
44 | }
45 | Checkbox.propTypes = {
46 |   disabled: PropTypes.bool,
47 |   checked: PropTypes.bool,
48 |   inline: PropTypes.bool,
49 |   iconStyle: PropTypes.string,
50 |   onChange: PropTypes.func
51 | }
52 | Checkbox.defaultProps = {
53 |   disabled: false,
54 |   checked: false,
55 |   inline: false
56 | }
57 | 
58 | export default Checkbox;
59 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "index": ["./src/components"],
 3 |   "layout": ["./src/components/layout"],
 4 |   "actionsheet": ["./src/components/actionsheet"],
 5 |   "accordion": ["./src/components/accordion"],
 6 |   "swiper": ["./src/components/swiper"],
 7 |   "marquee": ["./src/components/marquee"],
 8 |   "tab": ["./src/components/tab"],
 9 |   "tabbar": ["./src/components/tabbar"],
10 |   "sidebar": ["./src/components/sidebar"],
11 |   "flexbox": ["./src/components/flexbox"],
12 |   "button-tab": ["./src/components/button-tab"],
13 |   "button": ["./src/components/button"],
14 |   "input": ["./src/components/input"],
15 |   "input-number": ["./src/components/input-number"],
16 |   "password": ["./src/components/password"],
17 |   "range": ["./src/components/range"],
18 |   "textarea": ["./src/components/textarea"],
19 |   "switch": ["./src/components/switch"],
20 |   "checkbox": ["./src/components/checkbox"],
21 |   "radio": ["./src/components/radio"],
22 |   "select": ["./src/components/select"],
23 |   "checker": ["./src/components/checker"],
24 |   "divider": ["./src/components/divider"],
25 |   "group": ["./src/components/group"],
26 |   "cell": ["./src/components/cell"],
27 |   "confirm": ["./src/components/confirm"],
28 |   "prompt": ["./src/components/prompt"],
29 |   "alert": ["./src/components/alert"],
30 |   "popup": ["./src/components/popup"],
31 |   "popup-picker": ["./src/components/popup-picker"],
32 |   "toast": ["./src/components/toast"],
33 |   "img": ["./src/components/img"],
34 |   "index-list": ["./src/components/index-list"],
35 |   "list-view": ["./src/components/list-view"],
36 |   "ripple": ["./src/components/ripple"],
37 |   "nav": ["./src/components/nav"],
38 |   "preview": ["./src/components/preview"],
39 |   "spinner": ["./src/components/spinner"],
40 |   "picker": ["./src/components/picker"],
41 |   "badge": ["./src/components/badge"],
42 |   "swipeout": ["./src/components/swipeout"],
43 |   "rater": ["./src/components/rater"],
44 |   "popover": ["./src/components/popover"],
45 |   "sticky": ["./src/components/sticky"],
46 |   "qrcode": ["./src/components/qrcode"]
47 | }


--------------------------------------------------------------------------------
/src/views/Checker.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Group, Checker, CheckerGroup } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     checked: false,
 7 |     value: ['1', '2'],
 8 |     options: [
 9 |       {
10 |         value: '1',
11 |         label: '篮球'
12 |       },
13 |       {
14 |         value: '2',
15 |         label: '羽毛球'
16 |       },
17 |       {
18 |         value: '3',
19 |         label: '乒乓球',
20 |         disabled: true
21 |       },
22 |       {
23 |         value: '4',
24 |         label: '高尔夫'
25 |       }
26 |     ]
27 |   }
28 |   render() {
29 |     let options = this.state.options.map((item, index) => {
30 |       return <Checker value={item.value} key={index} disabled={item.disabled}>{item.label}</Checker>
31 |     })
32 |     return (
33 |       <Layout>
34 |         <Nav slot="header" title="Checker"/>
35 |         <Body slot="body">
36 |           <Group title={"Checker："+this.state.checked}>
37 |             <div style={{padding:'20px'}}>
38 |               <Checker checked={this.state.checked} onChange={this.handleChange.bind(this)}>Checker</Checker>
39 |             </div>
40 |           </Group>
41 |           <Group title={"CheckerGroup："+this.state.value}>
42 |             <div style={{padding:'20px'}}>
43 |               <CheckerGroup value={this.state.value} onChange={this.handleGroupChange.bind(this)}>
44 |                 {options}
45 |               </CheckerGroup>
46 |             </div>
47 |           </Group>
48 |           <Group title={"CheckerGroup最多选2个"}>
49 |             <div style={{padding:'20px'}}>
50 |               <CheckerGroup value={this.state.value} onChange={this.handleGroupChange.bind(this)} max={2}>
51 |                 {options}
52 |               </CheckerGroup>
53 |             </div>
54 |           </Group>
55 |         </Body>
56 |       </Layout>
57 |     );
58 |   }
59 |   handleChange (e) {
60 |     this.setState({
61 |       checked: e.target.checked
62 |     })
63 |   }
64 |   handleGroupChange (value) {
65 |     this.setState({
66 |       value: value
67 |     })
68 |   }
69 | }
70 | 
71 | export default Demo;
72 | 


--------------------------------------------------------------------------------
/src/views/Swipeout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Nav, Body, Swipeout, Flexbox, FlexboxItem, Img } from '@/components'
 3 | class Demo extends React.Component {
 4 |   constructor (props) {
 5 |     super(props)
 6 |     let list = this.getList()
 7 |     this.state = {
 8 |       list
 9 |     }
10 |   }
11 |   render() {
12 |     let action = [
13 |       <button key="1" style={{background:'#1AAD19', color:'#fff'}} onClick={this.handleAction} className="swipeout-button" slot="action" type="button">顶置</button>,
14 |       <button key="2" style={{background:'#ffe26d', color:'#fff'}} onClick={this.handleAction} className="swipeout-button" slot="action" type="button">收藏</button>,
15 |       <button key="3" style={{background:'#ff5500', color:'#fff'}} onClick={this.handleAction} className="swipeout-button" slot="action" type="button">删除</button>
16 |     ]
17 |     return (
18 |       <Layout>
19 |         <Nav slot="header" title="Swipeout"/>
20 |         <Body slot="body">
21 |           {this.state.list.map((item,index) => {
22 |             return (
23 |             <Swipeout action={action} key={index} open={index===1} onClose={this.handleCloseSwipeout} onOpen={this.handleOpenSwipeout}>
24 |               <Flexbox align="center" className="list-view-item" gutter={20} style={{padding:'5px'}}>
25 |                 <Img className="avatar" src={item.src} style={{width:'40px',height: '40px'}}/>
26 |                 <FlexboxItem>
27 |                   <h4 style={{margin:'0'}}>{item.name}(按我向左滑动)</h4>
28 |                   <div>{item.date}</div>
29 |                 </FlexboxItem>
30 |               </Flexbox>
31 |             </Swipeout>
32 |             )
33 |           })}
34 |         </Body>
35 |       </Layout>
36 |     );
37 |   }
38 |   getList () {
39 |     let result = []
40 |     for (let i = 0; i < 30; i++) {
41 |       result.push({
42 |         src: '/images/github.png',
43 |         name: `item-${Date.now()}`,
44 |         date: new Date().toLocaleString()
45 |       })
46 |     }
47 |     return result
48 |   }
49 |   handleCloseSwipeout () {
50 |     console.log('handleCloseSwipeout')
51 |   }
52 |   handleOpenSwipeout () {
53 |     console.log('handleOpenSwipeout')
54 |   }
55 |   handleAction (e) {
56 |     console.log('点击了' + e.target.innerHTML)
57 |   }
58 | }
59 | 
60 | export default Demo;
61 | 


--------------------------------------------------------------------------------
/src/views/Confirm.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Nav, Body, Confirm, Switch, Cell, Group} from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     open: false,
 7 |     open2: false
 8 |   }
 9 |   render() {
10 |     return (
11 |       <Layout>
12 |         <Nav slot="header" title="Confirm"/>
13 |         <Body slot="body">
14 |           <Group>
15 |             <Cell title="default">
16 |               <Switch value={this.state.open} onChange={this.handleChange.bind(this)} />
17 |             </Cell>
18 |             <Cell title="长文本">
19 |               <Switch value={this.state.open2} onChange={this.handleChange2.bind(this)} />
20 |             </Cell>
21 |             <Cell title="js调用">
22 |               <span onClick={this.handleClick}>点击我打开</span>
23 |             </Cell>
24 |           </Group>
25 |         </Body>
26 |         <Confirm title="标题文字" open={this.state.open} onClose={this.handleClose.bind(this)} onConfirm={this.handleConfirm.bind(this)}>
27 |           确认删除我么
28 |         </Confirm>
29 |         <Confirm title="标题文字" open={this.state.open2} onClose={this.handleClose2.bind(this)} onConfirm={this.handleConfirm2.bind(this)}>
30 |           <div style={{lineHeight: 2.5}}>
31 |           长内容长内容长内容长内容长内容长内容长长内容长内容长内容长内容长内容长
32 |           内容长内容长内容长内容长内容长内容长内容长内容长内容长内容内容长内容长内
33 |           容长内容长内容长内容长内容长内容长内容
34 |           长内容长内容长内容长内容长内容长内容长长内容长内容长内容长内容长内容长
35 |           内容长内容长内容长内容长内容长内容长内容长内容长内容长内容内容长内容长内
36 |           容长内容长内容长内容长内容长内容长内容
37 |           长内容长内容长内容长内容长内容长内容长长内容长内容长内容长内容长内容长
38 |           内容长内容长内容长内容长内容长内容长内容长内容长内容长内容内容长内容长内
39 |           容长内容长内容长内容长内容长内容长内容
40 |           </div>
41 |         </Confirm>
42 |       </Layout>
43 |     );
44 |   }
45 |   handleChange (value) {
46 |     this.setState({
47 |       open: value
48 |     })
49 |   }
50 |   handleClose () {
51 |     this.handleChange(false)
52 |   }
53 |   handleConfirm () {
54 |     this.handleChange(false)
55 |   }
56 |   handleChange2 (value) {
57 |     this.setState({
58 |       open2: value
59 |     })
60 |   }
61 |   handleClose2 () {
62 |     this.handleChange2(false)
63 |   }
64 |   handleConfirm2 () {
65 |     this.handleChange2(false)
66 |   }
67 |   handleClick () {
68 |     Confirm.open({
69 |       message: 'Confirm'
70 |     })
71 |   }
72 | }
73 | 
74 | export default Demo;
75 | 


--------------------------------------------------------------------------------
/src/views/Prompt.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Nav, Body, Prompt, Switch, Cell, Group} from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     open1: false,
 7 |     open2: false,
 8 |     value1: '',
 9 |     value2: ''
10 |   }
11 |   render() {
12 |     return (
13 |       <Layout>
14 |         <Nav slot="header" title="Prompt"/>
15 |         <Body slot="body">
16 |           <Group>
17 |             <Cell title={`default(${this.state.value1})`}>
18 |               <Switch value={this.state.open1} onChange={this.handleChange1.bind(this)} />
19 |             </Cell>
20 |             <Cell title={`password(${this.state.value2})`}>
21 |               <Switch value={this.state.open2} onChange={this.handleChange2.bind(this)} />
22 |             </Cell>
23 |             <Cell title="js调用">
24 |               <span onClick={this.handleClick}>点击我打开</span>
25 |             </Cell>
26 |           </Group>
27 |         </Body>
28 |         <Prompt
29 |           open={this.state.open1}
30 |           title="用户名称"
31 |           inputProps={{value: this.state.value1, placeholder: '请输入用户名'}}
32 |           onClose={this.handleChange1.bind(this)}
33 |           onConfirm={this.handleConfirm1.bind(this)} />
34 |         <Prompt
35 |           open={this.state.open2}
36 |           title="wifi密码"
37 |           inputProps={{type: 'password', value: this.state.value2, placeholder: '请输入wifi密码'}}
38 |           onClose={this.handleChange2.bind(this)}
39 |           onConfirm={this.handleConfirm2.bind(this)} />
40 |       </Layout>
41 |     );
42 |   }
43 |   handleChange1 (value = false) {
44 |     this.setState({
45 |       open1: value
46 |     })
47 |   }
48 |   handleChange2 (value = false) {
49 |     this.setState({
50 |       open2: value
51 |     })
52 |   }
53 |   handleConfirm1 (value) {
54 |     this.handleChange1(false)
55 |     this.setState({
56 |       value1: value
57 |     })
58 |   }
59 |   handleConfirm2 (value) {
60 |     this.handleChange2(false)
61 |     this.setState({
62 |       value2: value
63 |     })
64 |   }
65 |   handleClick () {
66 |     Prompt.open({
67 |       title: '用户名称',
68 |       inputProps: {value: '', placeholder: '请输入用户名'},
69 |       onConfirm (value) {
70 |         console.log(value)
71 |       }
72 |     })
73 |   }
74 | }
75 | 
76 | export default Demo;
77 | 


--------------------------------------------------------------------------------
/src/components/popover/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Popup from '../popup'
 4 | import PropTypes from 'prop-types'
 5 | import classnames from 'classnames'
 6 | 
 7 | let Popover = props => {
 8 |   let {children, className, overlayOpacity, popoverClass, trigger, open,...others} = props
 9 |   let vnode = null
10 |   let handleClose = () => {
11 |     let node = ReactDOM.findDOMNode(vnode).parentNode
12 |     node.parentNode && node.parentNode.removeChild(node)
13 |   }
14 |   let handleClick = (e) => {
15 |     vnode = ReactDOM.render(
16 |       <Popup
17 |         open={true}
18 |         className={classnames([popoverClass])}
19 |         opacity={overlayOpacity}
20 |         onClose={handleClose}
21 |         inner={<div
22 |           className={classnames(['vx-popover--content', popoverClass])}
23 |           style={{visibility: 'hidden',position: 'absolute'}}
24 |           onClick={handleClose}>
25 |             {children}
26 |           </div>}>
27 |       </Popup>,
28 |       document.createElement('div')
29 |     )
30 |     let target = e.currentTarget
31 |     let node = ReactDOM.findDOMNode(vnode).querySelector('.vx-popover--content')
32 |     let rect = target.getBoundingClientRect()
33 |     let left = rect.left + 'px'
34 |     let isRight = false
35 |     let isBottom = false
36 |     if (rect.left > window.innerWidth / 2) {
37 |       isRight = true
38 |       left = rect.right - node.offsetWidth + 'px'
39 |     }
40 |     let top = rect.top + rect.height + 'px'
41 |     if (rect.top > window.innerHeight / 2) {
42 |       isBottom = true
43 |       top = rect.bottom - node.offsetHeight - rect.height - 24 + 'px'
44 |     }
45 |     requestAnimationFrame(() => {
46 |       node.style.top = top
47 |       node.style.left = left
48 |       node.style.visibility = ''
49 |       isRight && node.classList.add('vx-popover--content-right')
50 |       isBottom && node.classList.add('vx-popover--content-bottom')
51 |     })
52 |   }
53 |   return (
54 |     <div className={classnames(["vx-popover", className])} {...others} onClick={handleClick}>
55 |       {trigger}
56 |     </div>
57 |   )
58 | }
59 | 
60 | Popover.propTypes = {
61 |   open: PropTypes.bool,
62 |   overlayOpacity: PropTypes.number,
63 |   popoverClass: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
64 | }
65 | 
66 | export default Popover;
67 | 


--------------------------------------------------------------------------------
/src/components/swiper/Swiper.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import classnames from 'classnames';
 3 | import PropTypes from 'prop-types';
 4 | 
 5 | class Swiper extends React.Component {
 6 |   static propTypes = {
 7 |     active: PropTypes.number,
 8 |     options: PropTypes.object,
 9 |     pagination: PropTypes.bool,
10 |     prev: PropTypes.bool,
11 |     next: PropTypes.bool,
12 |     scrollbar: PropTypes.bool,
13 |     autoplay: PropTypes.number,
14 |     onChange: PropTypes.func
15 |   }
16 |   static defaultProps = {
17 |     active: 0,
18 |     autoplay: 2000,
19 |     pagination: true
20 |   }
21 |   render () {
22 |     let {children, className, onChange, pagination, prev, next, scrollbar, autoplay, ...others} = this.props
23 |     return (
24 |       <div ref="$el" className={classnames(['vx-swiper', 'swiper-container', className])} {...others}>
25 |         <div className="swiper-wrapper" >
26 |           {children}
27 |         </div>
28 |         {pagination && <div className="swiper-pagination"></div>}
29 |         {prev && <div className="swiper-button-prev"></div>}
30 |         {next && <div className="swiper-button-next"></div>}
31 |         {scrollbar && <div className="swiper-scrollbar"></div>}
32 |       </div>
33 |     );
34 |   }
35 |   componentWillReceiveProps (nextProps) {
36 |     if (this.props.active !== nextProps.active) {
37 |       this.$$swiper.slideTo(nextProps.active)
38 |     }
39 |   }
40 |   componentDidMount () {
41 |     let {active, pagination, prev, next, scrollbar, onChange} = this.props
42 |     import('swiper/dist/js/swiper.min.js').then(res => {
43 |       let Swiper = res.default
44 |       import('swiper/dist/css/swiper.min.css')
45 |       let options = Object.assign({
46 |         initialSlide: active,
47 |         autoplay: this.props.autoplay,
48 |         autoplayDisableOnInteraction: false,
49 |         onSlideChangeStart: (swiper) => {
50 |           onChange && onChange(swiper.activeIndex)
51 |         }
52 |       }, this.props.options)
53 |       if (pagination) {
54 |         options.pagination = '.swiper-pagination'
55 |       }
56 |       if (prev) {
57 |         options.prev = '.swiper-button-prev'
58 |       }
59 |       if (next) {
60 |         options.nextButton = '.swiper-button-prev'
61 |       }
62 |       if (scrollbar) {
63 |         options.scrollbar = '.swiper-scrollbar'
64 |       }
65 |       this.$$swiper = new Swiper(this.refs.$el, options)
66 |     })
67 |   }
68 | }
69 | 
70 | export default Swiper;
71 | 


--------------------------------------------------------------------------------
/src/views/Checkbox.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Group, Checkbox, CheckboxGroup } from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     checked: false,
 7 |     value: ['1', '2'],
 8 |     options: [
 9 |       {
10 |         value: '1',
11 |         label: '篮球'
12 |       },
13 |       {
14 |         value: '2',
15 |         label: '羽毛球'
16 |       },
17 |       {
18 |         value: '3',
19 |         label: '乒乓球',
20 |         disabled: true
21 |       },
22 |       {
23 |         value: '4',
24 |         label: '高尔夫'
25 |       }
26 |     ]
27 |   }
28 |   render() {
29 |     let options = this.state.options.map((item, index) => {
30 |       return <Checkbox value={item.value} key={index} disabled={item.disabled}>{item.label}</Checkbox>
31 |     })
32 |     return (
33 |       <Layout>
34 |         <Nav slot="header" title="Checkbox"/>
35 |         <Body slot="body">
36 |           <Group title={"Checkbox："+this.state.checked}>
37 |             <Checkbox style={{margin: '0 0.2rem'}} checked={this.state.checked} onChange={this.handleChange.bind(this)}>checkbox</Checkbox>
38 |           </Group>
39 |           <Group title={"CheckboxGroup："+this.state.value}>
40 |             <CheckboxGroup value={this.state.value} onChange={this.handleGroupChange.bind(this)}>
41 |               {options}
42 |             </CheckboxGroup>
43 |           </Group>
44 |           <Group title={"CheckboxGroup Change Icon style And inline style"}>
45 |             <CheckboxGroup style={{padding:'0.2rem'}} inline={true} iconStyle="checkbox" value={this.state.value} onChange={this.handleGroupChange.bind(this)}>
46 |               {options}
47 |             </CheckboxGroup>
48 |           </Group>
49 |           <Group title={"CheckboxGroup-Reverse"}>
50 |             <CheckboxGroup value={this.state.value} onChange={this.handleGroupChange.bind(this)} direction="reverse">
51 |               {options}
52 |             </CheckboxGroup>
53 |           </Group>
54 |           <Group title={"CheckboxGroup最多选2个"}>
55 |             <CheckboxGroup value={this.state.value} onChange={this.handleGroupChange.bind(this)} max={2}>
56 |               {options}
57 |             </CheckboxGroup>
58 |           </Group>
59 |         </Body>
60 |       </Layout>
61 |     );
62 |   }
63 |   handleChange (e) {
64 |     this.setState({
65 |       checked: e.target.checked
66 |     })
67 |   }
68 |   handleGroupChange (value) {
69 |     this.setState({
70 |       value: value
71 |     })
72 |   }
73 | }
74 | 
75 | export default Demo;
76 | 


--------------------------------------------------------------------------------
/src/components/input/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import classnames from 'classnames'
 3 | import PropTypes from 'prop-types'
 4 | import {Flexbox, FlexboxItem} from '../flexbox'
 5 | import Arrow from '../arrow'
 6 | 
 7 | export default class Input extends React.Component {
 8 |   static propTypes = {
 9 |     clear: PropTypes.bool,
10 |     border: PropTypes.bool,
11 |     arrow: PropTypes.bool,
12 |     onChange: PropTypes.func,
13 |     onInput: PropTypes.func
14 |   } 
15 |   static defaultProps = {
16 |     border: true,
17 |     clear: true,
18 |     arrow: false,
19 |     arrowProps: {}
20 |   }
21 |   constructor (props) {
22 |     super(props)
23 |     this.state = {
24 |       isFocus: false
25 |     }
26 |     this.handleFocus = this.handleFocus.bind(this)
27 |     this.handleBlur = this.handleBlur.bind(this)
28 |     this.handleChange = this.handleChange.bind(this)
29 |     this.handleInput = this.handleInput.bind(this)
30 |   }
31 |   render () {
32 |     let {children, className, style, prepend, append, arrow, arrowProps, clear, border, ...others} = this.props
33 |     let getClassName  = () => {
34 |       return classnames([
35 |         'vx-input--wrapper',
36 |         {
37 |           'is-focus': this.state.isFocus,
38 |           'is-clear': !!others.value && clear,
39 |           'vx-input--prepend': prepend,
40 |           'vx-input--append': append,
41 |           'is-disabled': others.disabled,
42 |           'is-border': border
43 |         }, 
44 |         className
45 |       ])
46 |     }
47 |     return (
48 |       <div
49 |         style={style}
50 |         className={getClassName()}
51 |         
52 |         >
53 |         <Flexbox component="label" align="center"
54 |           className={classnames(['vx-input--inner'])}
55 |           >
56 |             {prepend}
57 |             <FlexboxItem>
58 |               <input {...others} 
59 |                 onFocus={this.handleFocus}
60 |                 onBlur={this.handleBlur}
61 |                 onChange={this.handleChange} onInput= {this.handleInput}/>
62 |             </FlexboxItem>
63 |             {append}
64 |             {arrow && !append && <Arrow {...arrowProps} direction="down"/>}
65 |         </Flexbox>
66 |       </div>
67 |     )
68 |   }
69 |   handleChange (e) {
70 |     this.props.onChange && this.props.onChange (e.target.value)
71 |   }
72 |   handleInput (e) {
73 |     this.props.onInput && this.props.onInput (e.target.value)
74 |   }
75 |   handleFocus () {
76 |     this.setState({
77 |       isFocus: true
78 |     })
79 |   }
80 |   handleBlur () {
81 |     this.setState({
82 |       isFocus: false
83 |     })
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/views/Actionsheet.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Actionsheet, ActionsheetItem, Switch, Nav, Cell, Group} from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     open1: false,
 7 |     open2: false,
 8 |     open3: false,
 9 |     options: [
10 |       {
11 |         value: '1',
12 |         label: '编辑'
13 |       },
14 |       {
15 |         value: '2',
16 |         label: '收藏'
17 |       },
18 |       {
19 |         value: '3',
20 |         label: '分享'
21 |       },
22 |       {
23 |         value: '4',
24 |         label: '删除'
25 |       }
26 |     ]
27 |   }
28 |   render() {
29 |     let options = this.state.options.map((item, index) => {
30 |       return <ActionsheetItem value={item.value} key={index}>{item.label}</ActionsheetItem>
31 |     })
32 |     return (
33 |       <Layout>
34 |         <Nav slot="header" title="Actionsheet"/>
35 |         <Body slot="body">
36 |           <Group>
37 |             <Cell title="default">
38 |               <Switch value={this.state.open1} onChange={this.handleChange.bind(this, 1)} />
39 |             </Cell>
40 |             <Cell title="cancel && title">
41 |               <Switch value={this.state.open2} onChange={this.handleChange.bind(this, 2)} />
42 |             </Cell>
43 |             <Cell title="menu">
44 |               <Switch value={this.state.open3} onChange={this.handleChange.bind(this, 3)} />
45 |             </Cell>
46 |             <Cell title="js调用">
47 |               <span onClick={this.handleClick.bind(this)}>点击我打开</span>
48 |             </Cell>
49 |           </Group>
50 |         </Body>
51 |         <Actionsheet open={this.state.open1} onClose={this.handleClose.bind(this, 1)} onAction={this.handleAction.bind(this)}>
52 |           {options}
53 |         </Actionsheet>
54 |         <Actionsheet open={this.state.open2} onClose={this.handleClose.bind(this, 2)} cancel={true} title="title" onAction={this.handleAction.bind(this)}>
55 |           {options}
56 |         </Actionsheet>
57 |         <Actionsheet open={this.state.open3} onClose={this.handleClose.bind(this, 3)} type="menu" onAction={this.handleAction.bind(this)}>
58 |           {options}
59 |         </Actionsheet>
60 |       </Layout>
61 |     );
62 |   }
63 |   handleChange (key, value) {
64 |     let state = {
65 |       ...this.state
66 |     }
67 |     state['open' + key] = value
68 |     this.setState(state)
69 |   }
70 |   handleAction (value) {
71 |     console.log('点击了' + value)
72 |   }
73 |   handleClose (key) {
74 |     this.handleChange(key, false)
75 |   }
76 |   handleClick () {
77 |     Actionsheet.open({
78 |       title: '标题文字',
79 |       options: this.state.options,
80 |       onAction (value) {
81 |         console.log(value)
82 |       }
83 |     })
84 |   }
85 | }
86 | 
87 | export default Demo;
88 | 


--------------------------------------------------------------------------------
/src/views/ListView.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Nav, Body, ListView, Flexbox, FlexboxItem, Img, Divider } from '@/components'
 3 | class Demo extends React.Component {
 4 |   constructor (props) {
 5 |     super(props)
 6 |     this.state = {
 7 |       list: [],
 8 |       loading: false,
 9 |       end: false // 是否还没有更多
10 |     }
11 |   }
12 |   componentDidMount () {
13 |     setTimeout(() => {
14 |       this.setState({
15 |         list: this.getList()
16 |       })
17 |     }, 2000)
18 |   }
19 |   render() {
20 |     return (
21 |       <Layout>
22 |         <Nav slot="header" title="ListView (pulldown and pullup)"/>
23 |         <Body slot="body" style={{overflow:'visible'}}>
24 |           <ListView
25 |             style={{height:'100%',background:'#fff',position: 'absolute',width: '100%'}}
26 |             onPullUp={this.handlePullup.bind(this)}
27 |             onPullDown={this.handlePulldown.bind(this)}
28 |             loading={this.state.loading}
29 |             end={this.state.end}>
30 |           {this.state.list.map((item,index) => {
31 |             return (
32 |               <div key={index}>
33 |                 <Flexbox  align="center" className="list-view-item" gutter={20} style={{padding:'5px'}}>
34 |                   <Img className="avatar" src={item.src} style={{width:'50px',height: '50px'}}/>
35 |                   <FlexboxItem>
36 |                     <h4 style={{margin:'0'}}>{item.name}</h4>
37 |                     <div>{item.date}</div>
38 |                   </FlexboxItem>
39 |                 </Flexbox>
40 |                 <Divider/>
41 |               </div>
42 |             )
43 |           })}
44 |           </ListView>
45 |         </Body>
46 |       </Layout>
47 |     );
48 |   }
49 |   getList () {
50 |     let result = []
51 |     for (let i = 0; i < 30; i++) {
52 |       result.push({
53 |         src: '/images/github.png',
54 |         name: `item-${Date.now()}`,
55 |         date: new Date().toLocaleString()
56 |       })
57 |     }
58 |     return result
59 |   }
60 |   handlePullup (e) {
61 |     this.setState({
62 |       loading: true
63 |     }, () => {
64 |       setTimeout(() => { // 模拟ajax请求
65 |         let list = [...this.state.list]
66 |         list = list.concat(this.getList())
67 |         this.setState({
68 |           loading: false,
69 |           list: list,
70 |           end: list.length >= 60
71 |         })
72 |       }, 1000)
73 |     })
74 |   }
75 |   handlePulldown (e) {
76 |     this.setState({
77 |       loading: true
78 |     }, () => {
79 |       setTimeout(() => { // 模拟ajax请求
80 |         let list= this.getList()
81 |         list = list.concat(this.state.list)
82 |         this.setState({
83 |           loading: false,
84 |           list: list
85 |         })
86 |       }, 1000)
87 |     })
88 |   }
89 | }
90 | 
91 | export default Demo;
92 | 


--------------------------------------------------------------------------------
/src/components/textarea/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import classnames from 'classnames'
 3 | import PropTypes from 'prop-types'
 4 | 
 5 | export default class Textarea extends React.Component {
 6 |   static propTypes = {
 7 |     onChange: PropTypes.func,
 8 |     enterNumber: PropTypes.bool,
 9 |   }
10 |   defaultProps = {
11 |     enterNumber: false
12 |   }
13 |   constructor (props) {
14 |     super(props)
15 |     this.state = {
16 |       isFocus: false
17 |     }
18 |     this.handleFocus = this.handleFocus.bind(this)
19 |     this.handleBlur = this.handleBlur.bind(this)
20 |     this.handleChange = this.handleChange.bind(this)
21 |     this.handleInput = this.handleInput.bind(this)
22 |   }
23 |   render () {
24 |     let {children, className, style, enterNumber, ...others} = this.props
25 |     return (
26 |       <label
27 |         ref="$el"
28 |         style={style}
29 |         className={classnames(['vx-textarea--wrapper',{'is-focus': this.state.isFocus,'vx-textarea--enter-number': enterNumber}, className])}
30 |         onFocus={this.handleFocus}
31 |         onBlur={this.handleBlur}>
32 |         <div className="vx-textarea--inner">
33 |           <div className="vx-textarea--shadow"></div>
34 |           <textarea {...others} onChange={this.handleChange} onInput= {this.handleInput}/>
35 |           {enterNumber && others.maxLength && <em>
36 |             {others.value.length}/{others.maxLength}
37 |           </em>}
38 |         </div>
39 |       </label>
40 |     )
41 |   }
42 |   componentDidMount () {
43 |     this.$$textarea = this.refs.$el.querySelector('textarea')
44 |     this.$$inner = this.refs.$el.querySelector('.vx-textarea--inner')
45 |     this.$$shadow = this.refs.$el.querySelector('.vx-textarea--shadow')
46 |     this.renderAutoHeight(this.$$textarea.value)
47 |     this.$handleResize = this.handleResize.bind(this)
48 |     window.addEventListener('resize', this.$handleResize, false)
49 |   }
50 |   componentWillUnmount () {
51 |     window.removeEventListener('resize', this.$handleResize)
52 |   }
53 |   handleResize () {
54 |     this.renderAutoHeight(this.$$textarea.value)
55 |   }
56 |   renderAutoHeight (value) {
57 |     requestAnimationFrame(() => {
58 |       this.$$shadow.innerHTML = value.replace(/(\r|\n)$/, '<br/><span style="color:transparent">s</span>').replace(/(\r|\n)/g, '<br/>')
59 |       this.$$inner.style.height = this.$$shadow.offsetHeight + 'px'
60 |     })
61 |   }
62 |   handleChange (e) {
63 |     this.props.onChange && this.props.onChange (e.target.value)
64 |   }
65 |   handleInput (e) {
66 |     this.renderAutoHeight(e.target.value)
67 |     this.props.onInput && this.props.onInput (e.target.value)
68 |   }
69 |   handleFocus () {
70 |     this.setState({
71 |       isFocus: true
72 |     })
73 |   }
74 |   handleBlur () {
75 |     this.setState({
76 |       isFocus: false
77 |     })
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/src/components/input-number/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import classnames from 'classnames'
 3 | import PropTypes from 'prop-types'
 4 | 
 5 | export default class InputNumber extends React.Component {
 6 |   static propTypes = {
 7 |     step: PropTypes.number,
 8 |     buttonStep: PropTypes.number,
 9 |     onChange: PropTypes.func
10 |   }
11 |   static defaultProps = {
12 |     step: 1,
13 |     buttonStep: 1
14 |   }
15 |   constructor (props) {
16 |     super(props)
17 |     this.handleChange = this.handleChange.bind(this)
18 |     this.handleChangeAdd = this.handleChangeAdd.bind(this, this.props.buttonStep)
19 |     this.handleChangeReduce = this.handleChangeReduce.bind(this, -this.props.buttonStep)
20 |   }
21 |   render () {
22 |     let {children, className, style, buttonStep, onChange, value, ...others} = this.props
23 |     return (
24 |       <div ref="$el" className={classnames(["vx-input-number", className])} style={style}>
25 |         <button className="vx-input-number--reduce" type="button" onClick={this.handleChangeReduce}></button>
26 |         <input
27 |           {...others}
28 |           type="number"
29 |           initialvalue={this.myValue()}
30 |           onBlur={this.handleChange}/>
31 |         <button className="vx-input-number--add" type="button" onClick={this.handleChangeAdd}></button>
32 |       </div>
33 |     )
34 |   }
35 |   componentWillReceiveProps (nextProps) {
36 |     if (this.props.value !== nextProps.value) {
37 |       let node = this.refs.$el.querySelector('input')
38 |       node.value = nextProps.value
39 |     }
40 |   }
41 |   handleChangeAdd (step) {
42 |     this.handleChange(this.myValue() + step)
43 |   }
44 |   handleChangeReduce (step) {
45 |     this.handleChange(this.myValue() + step)
46 |   }
47 |   handleChange (e) {
48 |     let value = Number(e.target ? e.target.value : e)
49 |     let node = this.refs.$el.querySelector('input')
50 |     let {min, max} = this.props
51 |     if (isNaN(value)) {
52 |       node && (node.value = this.props.value)
53 |     } else {
54 |       if (typeof max === 'number' && value > max) {
55 |         value = max
56 |       }
57 |       if (typeof min === 'number' && value < min) {
58 |         value = min
59 |       }
60 |       value = Math.round(value * this.stepRate()) / this.stepRate()
61 |       node && (node.value = value)
62 |       console.log('value', value)
63 |       this.props.onChange && this.props.onChange (value)
64 |     }
65 |   }
66 |   myValue () {
67 |     let {value, min, max} = this.props
68 |     if (value < min) {
69 |       return Math.round(min * this.stepRate()) / this.stepRate()
70 |     }
71 |     if (value > max) {
72 |       return Math.round(max * this.stepRate()) / this.stepRate()
73 |     }
74 |     return Math.round(value * this.stepRate()) / this.stepRate()
75 |   }
76 |   stepRate () {
77 |     return 1 / this.props.step
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/src/components/accordion/AccordionItem.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import classnames from 'classnames';
 4 | import Arrow from '../arrow'
 5 | import Transition from 'react-transition-group/Transition'
 6 | 
 7 | class AccordionItem extends React.Component {
 8 |   static propTypes = {
 9 |     open: PropTypes.bool
10 |   }
11 |   static defaultProps = {
12 |     open: false
13 |   }
14 |   constructor (props) {
15 |     super(props)
16 |     this.state = {
17 |       open: this.props.open
18 |     }
19 |     this.handleOpen = this.handleOpen.bind(this)
20 |   }
21 |   render () {
22 |     let {children, className, title, open, value, toClose, toOpen, ...others} = this.props
23 |     const transitionClass = {
24 |       entering: 'accordion-slide-enter',
25 |       entered: 'accordion-slide-enter-active',
26 |       exiting: 'accordion-slide-leave-active',
27 |       exited: 'accordion-slide-leave'
28 |     }
29 |     return (
30 |       <div ref="$el" className={classnames(['vx-accordion--item', {'is-open': value.indexOf(this.name)>-1}, className])} {...others}>
31 |         <div className="vx-accordion--item-hd" onClick={this.handleOpen}>
32 |           <div className="vx-accordion--item-title">{title}</div>
33 |           <Arrow direction="down" />
34 |         </div>
35 |         <Transition timeout={300} in={value.indexOf(this.name)>-1} onEntering={this.handleEnter}>
36 |           {state => {
37 |             return (
38 |               <div style={{display: state==='exited'?'none':''}} className={classnames(["vx-accordion--item-bd", transitionClass[state]])}>
39 |                 <div className="vx-accordion--item-content">{children}</div>
40 |               </div>
41 |             )
42 |           }}
43 |         </Transition>
44 |       </div>
45 |     );
46 |   }
47 |   componentWillMount () {
48 |     this.name = Math.random().toString(36).substr(2)
49 |     this.props.open && this.props.toOpen(this.name)
50 |   }
51 |   componentDidMount () {
52 |     this.handleResize()
53 |     window.addEventListener('resize', this.$handleResize, false)
54 |   }
55 |   componentWillUnmount () {
56 |     window.removeEventListener('resize', this.$handleResize)
57 |   }
58 |   componentWillReceiveProps (nextProps) {
59 |     if (this.props.open !== nextProps.open) {
60 |       if (nextProps.open) {
61 |         this.props.toOpen(this.name)
62 |       } else {
63 |         this.props.toClose(this.name)
64 |       }
65 |     }
66 |   }
67 |   handleResize () {
68 |     if (this.props.value.indexOf(this.name) > -1) {
69 |       let node = this.refs.$el.querySelector('.vx-accordion--item-bd')
70 |       this.handleEnter(node)
71 |     }
72 |   }
73 |   handleEnter (node) {
74 |     requestAnimationFrame(() => {
75 |       node.style.height = node.children[0].offsetHeight + 'px'
76 |     })
77 |   }
78 |   handleOpen () {
79 |     this.props.toOpen(this.name)
80 |   }
81 | }
82 | 
83 | export default AccordionItem;
84 | 


--------------------------------------------------------------------------------
/src/views/Popup.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Cell, Group, Switch, Popup} from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   constructor (props) {
 6 |     super(props)
 7 |     this.state = {
 8 |       open: false,
 9 |       direction: 'bottom',
10 |       fullOpen: false
11 |     }
12 |     this.handleClose = this.handleClose.bind(this)
13 |   }
14 |   render() {
15 |     return (
16 |       <Layout>
17 |         <Nav slot="header" title="Popup"/>
18 |         <Body slot="body">
19 |           <Group>
20 |             <Cell title="popup default">
21 |               <Switch value={this.state.open && this.state.direction === 'bottom'} onChange={this.handleChange.bind(this,'bottom')} />
22 |             </Cell>
23 |             <Cell title="popup top">
24 |               <Switch value={this.state.open && this.state.direction === 'top'} onChange={this.handleChange.bind(this,'top')} />
25 |             </Cell>
26 |             <Cell title="popup left">
27 |               <Switch value={this.state.open && this.state.direction === 'left'} onChange={this.handleChange.bind(this,'left')} />
28 |             </Cell>
29 |             <Cell title="popup right">
30 |               <Switch value={this.state.open && this.state.direction === 'right'} onChange={this.handleChange.bind(this,'right')} />
31 |             </Cell>
32 |             <Cell title="popup center">
33 |               <Switch value={this.state.open && this.state.direction === 'center'} onChange={this.handleChange.bind(this,'center')} />
34 |             </Cell>
35 |             <Cell title="popup full && show close">
36 |               <Switch value={this.state.fullOpen} onChange={this.handleFullChange.bind(this)} />
37 |             </Cell>
38 |           </Group>
39 |         </Body>
40 |         <Popup open={this.state.open} onClose={this.handleClose} direction={this.state.direction}>
41 |           <div style={{padding:'0.5rem 0',background:'#fff'}}>
42 |             <Cell title="popup close" value={<Switch value={this.state.open} onChange={this.handleChange.bind(this, this.state.direction)} />} />
43 |           </div>
44 |         </Popup>
45 |         <Popup open={this.state.fullOpen} direction={this.state.direction} full={true} showClose={true} onClose={this.handleFullClose.bind(this)}>
46 |           <div style={{padding:'0.5rem 0',background:'#fff'}}>
47 |             <Cell title="popup close" value={<Switch value={this.state.fullOpen} onChange={this.handleFullChange.bind(this)} />} />
48 |           </div>
49 |         </Popup>
50 |       </Layout>
51 |     );
52 |   }
53 |   handleChange (direction, value) {
54 |     this.setState({
55 |       open: value,
56 |       direction
57 |     })
58 |   }
59 |   handleClose () {
60 |     this.setState({
61 |       open: false
62 |     })
63 |   }
64 |   handleFullChange (value) {
65 |     this.setState({
66 |       fullOpen: value
67 |     })
68 |   }
69 |   handleFullClose () {
70 |     this.setState({
71 |       fullOpen: false
72 |     })
73 |   }
74 | }
75 | 
76 | export default Demo;
77 | 


--------------------------------------------------------------------------------
/src/views/Toast.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Nav, Body, Toast, Switch, Cell, Group} from '@/components'
 3 | 
 4 | class Demo extends React.Component {
 5 |   state = {
 6 |     topOpen: false,
 7 |     centerOpen: false,
 8 |     loadingOpen: false,
 9 |     bottomOpen: false,
10 |     failOpen: false,
11 |     warnOpen: false,
12 |     content: '操作成功'
13 |   }
14 |   render() {
15 |     return (
16 |       <Layout>
17 |         <Nav slot="header" title="Toast"/>
18 |         <Body slot="body">
19 |           <Group>
20 |             <Cell title="Toast Top">
21 |               <Switch value={this.state.topOpen} onChange={this.handleChange.bind(this, 'topOpen')} />
22 |             </Cell>
23 |             <Cell title="Toast Center Success">
24 |               <Switch value={this.state.centerOpen} onChange={this.handleChange.bind(this, 'centerOpen')} />
25 |             </Cell>
26 |             <Cell title="Toast Center Fail">
27 |               <Switch value={this.state.failOpen} onChange={this.handleChange.bind(this, 'failOpen')} />
28 |             </Cell>
29 |             <Cell title="Toast Center Warn">
30 |               <Switch value={this.state.warnOpen} onChange={this.handleChange.bind(this, 'warnOpen')} />
31 |             </Cell>
32 |             <Cell title="Toast Center Loading">
33 |               <Switch value={this.state.loadingOpen} onChange={this.handleChange.bind(this, 'loadingOpen')} />
34 |             </Cell>
35 |             <Cell title="Toast Bottom">
36 |               <Switch value={this.state.bottomOpen} onChange={this.handleChange.bind(this, 'bottomOpen')} />
37 |             </Cell>
38 |             <Cell title="js调用">
39 |               <span onClick={this.handleClick}>点击我打开</span>
40 |             </Cell>
41 |           </Group>
42 |         </Body>
43 |         <Toast open={this.state.topOpen} onClose={this.handleClose.bind(this, 'topOpen')}>{this.state.content}</Toast>
44 |         <Toast open={this.state.centerOpen} type="success" align="center"  onClose={this.handleClose.bind(this, 'centerOpen')}>{this.state.content}</Toast>
45 |         <Toast open={this.state.failOpen} type="error" align="center" onClose={this.handleClose.bind(this, 'failOpen')}>操作失败</Toast>
46 |         <Toast open={this.state.warnOpen} type="warn" align="center" onClose={this.handleClose.bind(this, 'warnOpen')}>已经操作过了</Toast>
47 |         <Toast open={this.state.loadingOpen} type="loading" align="center" onClose={this.handleClose.bind(this, 'loadingOpen')}>Loading</Toast>
48 |         <Toast open={this.state.bottomOpen} align="bottom" onClose={this.handleClose.bind(this, 'bottomOpen')}>{this.state.content}</Toast>
49 |       </Layout>
50 |     );
51 |   }
52 |   handleChange (key, value) {
53 |     let state = {...this.state}
54 |     state[key] = value
55 |     this.setState(state)
56 |   }
57 |   handleClose (key) {
58 |     let state = {...this.state}
59 |     state[key] = false
60 |     this.setState(state)
61 |   }
62 |   handleClick () {
63 |     Toast.open({
64 |       type: 'loading',
65 |       message: 'loading...'
66 |     })
67 |   }
68 | }
69 | 
70 | export default Demo;
71 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebook/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(inputPath, needsSlash) {
15 |   const hasSlash = inputPath.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return inputPath.substr(0, inputPath.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${inputPath}/`;
20 |   } else {
21 |     return inputPath;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | const moduleFileExtensions = [
42 |   'web.mjs',
43 |   'mjs',
44 |   'web.js',
45 |   'js',
46 |   'web.ts',
47 |   'ts',
48 |   'web.tsx',
49 |   'tsx',
50 |   'json',
51 |   'web.jsx',
52 |   'jsx',
53 | ];
54 | 
55 | // Resolve file paths in the same order as webpack
56 | const resolveModule = (resolveFn, filePath) => {
57 |   const extension = moduleFileExtensions.find(extension =>
58 |     fs.existsSync(resolveFn(`${filePath}.${extension}`))
59 |   );
60 | 
61 |   if (extension) {
62 |     return resolveFn(`${filePath}.${extension}`);
63 |   }
64 | 
65 |   return resolveFn(`${filePath}.js`);
66 | };
67 | 
68 | // config after eject: we're in ./config/
69 | module.exports = {
70 |   dotenv: resolveApp('.env'),
71 |   appPath: resolveApp('.'),
72 |   appBuild: resolveApp('build'),
73 |   appPublic: resolveApp('public'),
74 |   appHtml: resolveApp('public/index.html'),
75 |   appIndexJs: resolveModule(resolveApp, 'src/index'),
76 |   appPackageJson: resolveApp('package.json'),
77 |   appSrc: resolveApp('src'),
78 |   appTsConfig: resolveApp('tsconfig.json'),
79 |   appJsConfig: resolveApp('jsconfig.json'),
80 |   yarnLockFile: resolveApp('yarn.lock'),
81 |   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
82 |   proxySetup: resolveApp('src/setupProxy.js'),
83 |   appNodeModules: resolveApp('node_modules'),
84 |   publicUrl: getPublicUrl(resolveApp('package.json')),
85 |   servedPath: getServedPath(resolveApp('package.json')),
86 | };
87 | 
88 | 
89 | 
90 | module.exports.moduleFileExtensions = moduleFileExtensions;
91 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 2 | 
 3 | ## Available Scripts
 4 | 
 5 | In the project directory, you can run:
 6 | 
 7 | ### `npm start`
 8 | 
 9 | Runs the app in the development mode.<br />
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 | 
12 | The page will reload if you make edits.<br />
13 | You will also see any lint errors in the console.
14 | 
15 | ### `npm test`
16 | 
17 | Launches the test runner in the interactive watch mode.<br />
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19 | 
20 | ### `npm run build`
21 | 
22 | Builds the app for production to the `build` folder.<br />
23 | It correctly bundles React in production mode and optimizes the build for the best performance.
24 | 
25 | The build is minified and the filenames include the hashes.<br />
26 | Your app is ready to be deployed!
27 | 
28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29 | 
30 | ### `npm run eject`
31 | 
32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33 | 
34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35 | 
36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37 | 
38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39 | 
40 | ## Learn More
41 | 
42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43 | 
44 | To learn React, check out the [React documentation](https://reactjs.org/).
45 | 
46 | ### Code Splitting
47 | 
48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
49 | 
50 | ### Analyzing the Bundle Size
51 | 
52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
53 | 
54 | ### Making a Progressive Web App
55 | 
56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
57 | 
58 | ### Advanced Configuration
59 | 
60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
61 | 
62 | ### Deployment
63 | 
64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
65 | 
66 | ### `npm run build` fails to minify
67 | 
68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
69 | 


--------------------------------------------------------------------------------
/src/components/ripple/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import classnames from 'classnames'
 4 | 
 5 | class Ripple extends React.Component {
 6 |   static propTypes = {
 7 |     position: PropTypes.string,
 8 |     color: PropTypes.string
 9 |   }
10 |   render () {
11 |     let {className, position, color, children, ...others} = this.props
12 |     return (
13 |       <div ref="$el" className={classnames(["vx-ripple", className])} {...others}>
14 |         {children}
15 |       </div>
16 |     )
17 |   }
18 |   componentDidMount () {
19 |     this.$el = this.refs.$el
20 |     if (document.touchstart === undefined) {
21 |       this.$el.addEventListener('mousedown', this.handleTouchStart.bind(this), false)
22 |       this.$el.addEventListener('mouseup', this.handleTouchEnd.bind(this), false)
23 |     } else {
24 |       this.$el.addEventListener('touchstart', this.handleTouchStart.bind(this), false)
25 |       this.$el.addEventListener('touchend', this.handleTouchEnd.bind(this), false)
26 |     }
27 |   }
28 |   getOffset (rect, {pageX, pageY}) {
29 |     if (this.props.position === 'center') {
30 |       return {
31 |         top: rect.height / 2,
32 |         left: rect.width / 2,
33 |         width: rect.width,
34 |         height: rect.height
35 |       }
36 |     } else {
37 |       return {
38 |         top: pageY - rect.top,
39 |         left: pageX - rect.left,
40 |         width: rect.width,
41 |         height: rect.height
42 |       }
43 |     }
44 |   }
45 |   handleTouchStart (e) {
46 |     let shadow = this.$el.querySelector('.vx-ripple--shadow')
47 |     shadow && shadow.parentNode.removeChild(shadow)
48 |     this.$$offset = this.getOffset(this.$el.getBoundingClientRect(), e.changedTouches ? e.changedTouches[0] : e)
49 |     this.$$node = document.createElement('div')
50 |     this.$$node.classList.add('vx-ripple--shadow')
51 |     this.$$node.style.cssText = 'top:' + this.$$offset.top + 'px;left:' + this.$$offset.left + 'px;'
52 |     if (this.props.color) {
53 |       this.$$node.style.backgroundColor = this.props.color
54 |     }
55 |     this.$el.appendChild(this.$$node)
56 |     this.$$timer = setTimeout(() => {
57 |       this.$$node.style.transition = this.$$node.style.webkitTransition = `transform 0.25s ease-in-out 0s`
58 |       this.$$node.style.transform = this.$$node.style.webkitTransform = 'scale(1.4)'
59 |     })
60 |     e.preventDefault()
61 |   }
62 |   handleTouchEnd (e) {
63 |     this.$$timer && clearTimeout(this.$$timer)
64 |     let max = Math.max(this.$$offset.height, this.$$offset.width)
65 |     this.$$duration = max / 400
66 |     if (this.$$duration < 0.6) {
67 |       this.$$duration = 0.6
68 |     } else if (this.$$duration > 2) {
69 |       this.$$duration = 2
70 |     }
71 |     this.$$node.style.transition = this.$$node.style.webkitTransition = `transform ${this.$$duration}s ease-in-out 0s, opacity ${this.$$duration - 0.3}s linear 0s`
72 |     this.$$node.style.transform = this.$$node.style.webkitTransform = 'scale(' + (Math.max(this.$$offset.height, this.$$offset.width) / 5) + ')'
73 |     this.$$node.style.opacity = '0'
74 |     setTimeout(((node) => {
75 |       node.parentNode && node.parentNode.removeChild(node)
76 |     }).bind(this, this.$$node), this.$$duration * 1000)
77 |   }
78 | }
79 | 
80 | export default Ripple;
81 | 


--------------------------------------------------------------------------------
/src/components/preview/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import classnames from 'classnames'
 3 | import PropTypes from 'prop-types'
 4 | 
 5 | export default class Preview extends React.Component {
 6 |   static propTypes = {
 7 |     list: PropTypes.array,
 8 |     index: PropTypes.number,
 9 |     options: PropTypes.object,
10 |     onClose: PropTypes.func
11 |   }
12 |   static defaultProps = {
13 |     index: 0
14 |   }
15 |   render () {
16 |     let {children, className,...others} = this.props
17 |     return (
18 |       <div ref="$el" className={classnames(['vx-photoswiper',className])} {...others} tabIndex={-1} role="dialog" aria-hidden={true}>
19 |         <div className="pswp__bg"></div>
20 |         <div className="pswp__scroll-wrap">
21 |           <div className="pswp__container">
22 |             <div className="pswp__item"></div>
23 |             <div className="pswp__item"></div>
24 |             <div className="pswp__item"></div>
25 |           </div>
26 |           <div className="pswp__ui pswp__ui--hidden">
27 |             <div className="pswp__top-bar">
28 |               <div className="pswp__counter"></div>
29 |               <button className="pswp__button pswp__button--close" title="Close (Esc)"></button>
30 |               <button className="pswp__button pswp__button--share" title="Share"></button>
31 |               <button className="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
32 |               <button className="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
33 |               <div className="pswp__preloader">
34 |                 <div className="pswp__preloader__icn">
35 |                   <div className="pswp__preloader__cut">
36 |                     <div className="pswp__preloader__donut"></div>
37 |                   </div>
38 |                 </div>
39 |               </div>
40 |             </div>
41 |             <div className="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
42 |               <div className="pswp__share-tooltip"></div>
43 |             </div>
44 |             <button className="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
45 |             <button className="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
46 |             <div className="pswp__caption">
47 |               <div className="pswp__caption__center"></div>
48 |             </div>
49 |           </div>
50 |         </div>
51 |       </div>
52 |     )
53 |   }
54 |   open (index) {
55 |     let self = this
56 |     this.$el = this.refs.$el
57 |     import('photoswipe/dist/photoswipe.min.js').then(res => {
58 |       require('photoswipe/dist/photoswipe.css')
59 |       require('photoswipe/dist/default-skin/default-skin.css')
60 |       let PhotoSwipe = res.default
61 |       import('photoswipe/dist/photoswipe.min.js').then(res2 => {
62 |         let UI = res2.default
63 |         let options = Object.assign({
64 |           history: true,
65 |           shareEl: false,
66 |           tapToClose: true,
67 |           fullscreenEl: false,
68 |           zoomEl: true,
69 |           index: index
70 |         }, this.options)
71 |         this.$el.style.display = 'block'
72 |         this.$$photoswipe = new PhotoSwipe(this.$el, UI, this.props.list, options)
73 |         this.$$photoswipe.init()
74 |         this.$$photoswipe.listen('close', () => {
75 |           self.props.onClose && self.props.onClose()
76 |         })
77 |       })
78 |     })
79 |   }
80 |   close () {
81 |     this.$$photoswipe.close()
82 |   }
83 | }
84 | 


--------------------------------------------------------------------------------
/src/components/select/Picker.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import Popup from '../popup'
  3 | import PropTypes from 'prop-types'
  4 | import { Checkbox, CheckboxGroup} from '../checkbox'
  5 | 
  6 | class Picker extends React.Component {
  7 |   static propTypes = {
  8 |     open: PropTypes.bool,
  9 |     cancelText: PropTypes.string,
 10 |     confirmText: PropTypes.string,
 11 |     title: PropTypes.string,
 12 |     max: PropTypes.number,
 13 |     onClose: PropTypes.func,
 14 |     onChange: PropTypes.func
 15 |   }
 16 |   static defaultProps = {
 17 |     confirmText: '确定',
 18 |     cancelText: '取消'
 19 |   }
 20 |   constructor (props) {
 21 |     super(props)
 22 |     this.state = {
 23 |       value: this.props.value,
 24 |       open: this.props.open
 25 |     }
 26 |     this.handleChange = this.handleChange.bind(this)
 27 |     this.handleCancel = this.handleCancel.bind(this)
 28 |     this.handleConfirm = this.handleConfirm.bind(this)
 29 |     this.handleAfterClose = this.handleAfterClose.bind(this)
 30 |   }
 31 |   componentDidMount () {
 32 |     this.setState({open: true})
 33 |   }
 34 |   render () {
 35 |     let {children, max, title, cancelText, confirmText, fastClose, direction} = this.props
 36 |     let Checkboxs = React.Children.map(children, (item, index) => {
 37 |       return (
 38 |         <Checkbox
 39 |           value={item.props.value}
 40 |           key={index}
 41 |           disabled={item.props.disabled}
 42 |           label={item.props.label}
 43 |           >
 44 |           {item.props.children}
 45 |         </Checkbox>
 46 |       )
 47 |     })
 48 |     let myTitle = title
 49 |     if (max > 1 && this.state.value.length >= max) {
 50 |       myTitle = `选项不能超过${max}个`
 51 |     }
 52 |     return (
 53 |       <Popup open={this.state.open} fastClose={fastClose} onClose={this.handleCancel} onAfterClose={this.handleAfterClose} direction={direction}
 54 |         className="vx-select--picker"
 55 |         header={
 56 |           max !== 1 ? <div style={{}} className="vx-flexbox vx-option-picker--header">
 57 |             <button type="button" className="vx-option-picker--cancel" onClick={this.handleCancel}>{cancelText}</button>
 58 |             <button type="button" className="vx-flexbox--item vx-option-picker--placeholder">{myTitle}</button>
 59 |             <button type="button" disabled={!this.state.value.length} className="vx-option-picker--confirm" onClick={this.handleConfirm}>{confirmText}</button>
 60 |           </div> : undefined
 61 |         }
 62 |         >
 63 |         <div className="vx-option-picker--wrapper">
 64 |           <div className="vx-option-picker">
 65 |             <CheckboxGroup max={max} onChange={this.handleChange} value={this.state.value}>
 66 |               {Checkboxs}
 67 |             </CheckboxGroup>
 68 |           </div>
 69 |         </div>
 70 |       </Popup>
 71 |     );
 72 |   }
 73 |   handleChange (value) {
 74 |     if (this.props.max === 1) {
 75 |       this.onChange(value[0])
 76 |     }
 77 |     this.setState({
 78 |       value
 79 |     })
 80 |   }
 81 |   handleCancel () {
 82 |     this.setState({
 83 |       open: false
 84 |     })
 85 |   }
 86 |   handleAfterClose () {
 87 |     this.props.onClose && this.props.onClose()
 88 |   }
 89 |   handleConfirm () {
 90 |     this.onChange(this.state.value)
 91 |   }
 92 |   onChange (value) {
 93 |     this.setState({
 94 |       open: false
 95 |     }, () => {
 96 |       this.props.onChange && this.props.onChange(value)
 97 |     })
 98 |   }
 99 | }
100 | 
101 | export default Picker;
102 | 


--------------------------------------------------------------------------------
/src/views/Select.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Layout, Body, Nav, Cell, Group, Select, Option} from '@/components'
  3 | 
  4 | class Demo extends React.Component {
  5 |   constructor (props) {
  6 |     super(props)
  7 |     this.state = {
  8 |       value: '',
  9 |       value2: [],
 10 |       options: [
 11 |         {
 12 |           value: '1',
 13 |           label: '篮球'
 14 |         },
 15 |         {
 16 |           value: '2',
 17 |           label: '羽毛球'
 18 |         },
 19 |         {
 20 |           value: '3',
 21 |           label: '乒乓球'
 22 |         },
 23 |         {
 24 |           value: '4',
 25 |           label: '高尔夫',
 26 |           disabled: true
 27 |         },
 28 |         {
 29 |           value: '5',
 30 |           label: '篮球'
 31 |         },
 32 |         {
 33 |           value: '6',
 34 |           label: '羽毛球'
 35 |         },
 36 |         {
 37 |           value: '7',
 38 |           label: '乒乓球'
 39 |         },
 40 |         {
 41 |           value: '8',
 42 |           label: '篮球'
 43 |         },
 44 |         {
 45 |           value: '9',
 46 |           label: '羽毛球'
 47 |         },
 48 |         {
 49 |           value: '10',
 50 |           label: '乒乓球'
 51 |         },
 52 |         {
 53 |           value: '11',
 54 |           label: '高尔夫'
 55 |         }
 56 |       ]
 57 |     }
 58 |     this.handleChange = this.handleChange.bind(this)
 59 |     this.handleChange2 = this.handleChange2.bind(this)
 60 |   }
 61 |   render() {
 62 |     let Options1 = this.state.options.map((item, index) => {
 63 |       return (
 64 |         <Option value={item.value} disabled={item.disabled} key={index}>{item.label}</Option>
 65 |       )
 66 |     })
 67 |     let Options2 = this.state.options.map((item, index) => {
 68 |       return (
 69 |         <Option value={item.value} disabled={item.disabled} key={index} label={item.label}><span style={{color:'red'}}>red color</span>{item.label}</Option>
 70 |       )
 71 |     })
 72 |     let Options3 = this.state.options.map((item, index) => {
 73 |       return (
 74 |         <Option value={item.value} disabled={item.disabled} key={index}>{item.label}</Option>
 75 |       )
 76 |     })
 77 |     return (
 78 |       <Layout>
 79 |         <Nav slot="header" title="Select"/>
 80 |         <Body slot="body">
 81 |           <Group>
 82 |             <Cell title="default" value={
 83 |               <Select value={this.state.value} onChange={this.handleChange} >
 84 |                 {Options1}
 85 |               </Select>
 86 |             } />
 87 |             <Cell title="下拉框option含html" value={
 88 |               <Select popupDirection="center" value={this.state.value} onChange={this.handleChange} >
 89 |                 {Options2}
 90 |               </Select>
 91 |             } />
 92 |             <Cell title="多选" value={
 93 |               <Select value={this.state.value2} max={0} onChange={this.handleChange2} >
 94 |                 {Options3}
 95 |               </Select>
 96 |             } />
 97 |             <Cell title="最多选两个" value={
 98 |               <Select value={this.state.value2} max={2} onChange={this.handleChange2} >
 99 |                 {Options3}
100 |               </Select>
101 |             } />
102 |           </Group>
103 |         </Body>
104 |       </Layout>
105 |     );
106 |   }
107 |   handleChange (value) {
108 |     this.setState({
109 |       value: value
110 |     })
111 |   }
112 |   handleChange2 (value) {
113 |     this.setState({
114 |       value2: value
115 |     })
116 |   }
117 |   
118 | }
119 | 
120 | export default Demo;
121 | 


--------------------------------------------------------------------------------
/src/components/toast/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import PropTypes from 'prop-types'
  3 | import Spinner from '../spinner'
  4 | import classnames from 'classnames'
  5 | import Transition from 'react-transition-group/Transition'
  6 | 
  7 | class Toast extends React.Component {
  8 |   static propTypes = {
  9 |     duration: PropTypes.number,
 10 |     align: PropTypes.string,
 11 |     open: PropTypes.bool,
 12 |     type: PropTypes.string,
 13 |     destroy: PropTypes.bool,
 14 |     onClose: PropTypes.func
 15 |   }
 16 |   static defaultProps = {
 17 |     duration: 2000,
 18 |     align: 'top',
 19 |     type: 'default',
 20 |     open: true,
 21 |     destroy: false,
 22 |     spinnerProps: {
 23 |       color:"#999",
 24 |       primaryColor:"#fff"
 25 |     }
 26 |   }
 27 |   constructor (props) {
 28 |     super(props)
 29 |     this.handleEntering = this.handleEntering.bind(this)
 30 |     this.handleExited = this.handleExited.bind(this)
 31 |     this.rootId = Math.random().toString(36).substr(2)
 32 |   }
 33 |   render () {
 34 |     let {className, align, type, children, style, open} = this.props
 35 |     const transitionClass = {
 36 |       entering: 'popup-fade-enter',
 37 |       entered: 'popup-fade-enter-active',
 38 |       exiting: 'popup-fade-leave-active',
 39 |       exited: 'popup-fade-leave'
 40 |     }
 41 |     return (
 42 |       <Transition in={open} timeout={120} onEntering={this.handleEntering} onExited={this.handleExited}>
 43 |         {state => {
 44 |           let display = ''
 45 |           if (state === 'entering') {
 46 |             display = 'block'
 47 |           }
 48 |           if (state === 'exited') {
 49 |             display = 'none'
 50 |           }
 51 |           return (
 52 |           <div id={this.rootId}
 53 |             className={classnames(['vx-toast', 'vx-toast--' + align, className, transitionClass[state]])}
 54 |             style={{...style,display: display}}>
 55 |             <div className={classnames(['vx-toast--inner'])}>
 56 |               <div className="vx-toast--content">
 57 |                 {this.renderIcon()}
 58 |                 {type !== 'default' && <br/>}
 59 |                 {children}
 60 |               </div>
 61 |             </div>
 62 |           </div>)
 63 |         }}
 64 |       </Transition>
 65 |     )
 66 |   }
 67 |   renderIcon () {
 68 |     let type = this.props.type
 69 |     if (type === 'loading') {
 70 |       return <Spinner {...this.props.spinnerProps} className="vx-toast--loading"/>
 71 |     } else if (type !== 'default') {
 72 |       return <i className={classnames(['vx-toast--icon',`vx-toast--${type}`])}></i>
 73 |     }
 74 |     return null
 75 |   }
 76 |   componentDidMount () {
 77 |     if (this.props.open) {
 78 |       let node = document.getElementById(this.rootId)
 79 |       if (node){
 80 |         node.style.opacity = 1;
 81 |         this.handleEntering(node)
 82 |       }
 83 |     }
 84 |   }
 85 |   handleEntering (node) {
 86 |     let width = node.children[0].offsetWidth + 4
 87 |     let height = node.children[0].offsetHeight + 4
 88 |     requestAnimationFrame(() => {
 89 |       node.style.width = width + 'px'
 90 |       node.style.height = height + 'px'
 91 |     })
 92 |     this.$$timer && clearTimeout(this.$$timer)
 93 |     if (this.props.duration) {
 94 |       this.$$timer = setTimeout(() => {
 95 |         this.props.onClose && this.props.onClose()
 96 |       }, this.props.duration)
 97 |     }
 98 |   }
 99 |   handleExited () {
100 |     this.props.onAfterClose && this.props.onAfterClose()
101 |   }
102 | }
103 | 
104 | export default Toast;
105 | 


--------------------------------------------------------------------------------
/src/components/sticky/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import classnames from 'classnames'
 4 | 
 5 | export default class Sticky extends React.Component{
 6 |   static propTypes = {
 7 |     fixedTop: PropTypes.string
 8 |   }
 9 |   constructor (props) {
10 |     super(props)
11 |     this.handleTouchStart = this.handleTouchStart.bind(this)
12 |     this.handleScroll = this.handleScroll.bind(this)
13 |   }
14 |   render () {
15 |     const { className, children, style, ...others } = this.props
16 |     return (
17 |       <div ref="$el" className={classnames(['vx-sticky--box', className])} style={Object.assign({top: '0px'}, style)} {...others}>
18 |         <div className="vx-sticky--inner">
19 |           {children}
20 |         </div>
21 |       </div>
22 |     )
23 |   }
24 |   supportSticky () {
25 |     if (this.$$supportSticky !== undefined) {
26 |       return this.$$supportSticky
27 |     }
28 |     let node = document.createElement('div')
29 |     node.style.cssText = 'position:-webkit-sticky;position:sticky;'
30 |     this.$$supportSticky = (node.cssText || '').indexOf('sticky') > -1
31 |     return this.$$supportSticky
32 |   }
33 |   componentDidMount () {
34 |     this.$el = this.refs.$el
35 |     if (!this.supportSticky()) {
36 |       this.$$scrollNode = this.getScrollNode(this.$el.offsetParent)
37 |       if (this.$$scrollNode) {
38 |         this.$$childNode = this.$el.querySelector('.vx-sticky--inner')
39 |         this.$$scrollNode.addEventListener('touchstart', this.handleTouchStart, false)
40 |         this.$$scrollNode.addEventListener('scroll', this.handleScroll, false)
41 |         this.$handleResize = this.handleResize.bind(this)
42 |         window.addEventListener('resize', this.$handleResize, false)
43 |       }
44 |     }
45 |   }
46 |   componentWillUnmount () {
47 |     if (!this.supportSticky()) {
48 |       this.$$scrollNode.removeEventListener('scroll', this.handleScroll)
49 |       this.$$scrollNode.removeEventListener('touchstart', this.handleTouchStart)
50 |       window.removeEventListener('resize', this.$handleResize)
51 |     }
52 |   }
53 |   handleResize () {
54 |     this.handleTouchStart()
55 |     this.handleScroll()
56 |   }
57 |   handleTouchStart () {
58 |     this.$el.style.height = this.$$childNode.offsetHeight + 'px'
59 |     this.$myData = {
60 |       offsetTop: this.$el.offsetTop,
61 |       fixedTop: this.props.fixedTop || this.$$scrollNode.offsetTop + 'px'
62 |     }
63 |   }
64 |   handleScroll (e) {
65 |     if (e.touchstart === undefined) {
66 |       this.handleTouchStart()
67 |     }
68 |     if (this.$$scrollNode.scrollTop > this.$myData.offsetTop) {
69 |       this.$el.classList.add('is-fixed')
70 |       if (this.$$childNode.style.top !== this.$myData.fixedTop) {
71 |         this.$$childNode.style.top = this.$myData.fixedTop
72 |       }
73 |     } else {
74 |       this.$el.classList.remove('is-fixed')
75 |       this.$$childNode.style.top = ''
76 |     }
77 |   }
78 |   getScrollNode (node) {
79 |     let n = node
80 |     let closest = () => {
81 |       let styleObject = window.getComputedStyle(n)
82 |       if (!(['scroll', 'auto'].indexOf(styleObject['overflow']) > -1 || ['scroll', 'auto'].indexOf(styleObject['overflow-y']) > -1) || styleObject['-webkit-overflow-scrolling'] === 'touch' || styleObject['overflow-scrolling'] === 'touch') {
83 |         n = n.offsetParent
84 |         if (n === document.body) {
85 |           n = document.body
86 |         } else {
87 |           closest()
88 |         }
89 |       }
90 |     }
91 |     document.body !== n && closest()
92 |     return n
93 |   }
94 | }
95 | 


--------------------------------------------------------------------------------
/src/components/tab/Tab.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import classnames from 'classnames';
 3 | import PropTypes from 'prop-types';
 4 | 
 5 | class Tab extends React.Component {
 6 |   static propTypes = {
 7 |     active: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 8 |     underlineWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 9 |     layout: PropTypes.string,
10 |     onChange: PropTypes.func
11 |   }
12 |   static defaultProps = {
13 |     layout: 'default'
14 |   }
15 |   render () {
16 |     let {children, className, active, underlineWidth, layout, ...others} = this.props
17 |     let cloneChildren = React.Children.map(children, item => {
18 |       if (item) {
19 |         return React.cloneElement(item, {
20 |           underlineWidth,
21 |           active,
22 |           layout,
23 |           onClick: this.handleClick.bind(this, item.props.name)
24 |         })
25 |       }
26 |       return item
27 |     })
28 |     let cls = classnames(['vx-tab', `vx-tab--type-${layout}`, className])
29 |     return (
30 |       <div className={cls} {...others} ref="$el" >
31 |         <div className="vx-tab--scroller">
32 |         	<div className={classnames([{'vx-flexbox': layout === 'default'} ,"vx-tab--inner"])}>
33 |             {cloneChildren}
34 |           </div>
35 |           <div className="vx-tab--underline"></div>
36 |         </div>
37 |       </div>
38 |     );
39 |   }
40 |   componentDidMount () {
41 |     this.$el = this.refs.$el
42 |     this.computedStyle()
43 |     this.$ComputedStyle = this.computedStyle.bind(this)
44 |     window.addEventListener('resize', this.$ComputedStyle, false)
45 |   }
46 |   componentDidUpdate (prevProps) {
47 |     if (prevProps.active !== this.props.active) {
48 |       requestAnimationFrame(this.computedStyle.bind(this))
49 |       
50 |     }
51 |   }
52 |   componentWillUnmount () {
53 |     window.removeEventListener('resize', this.$ComputedStyle)
54 |   }
55 |   handleClick (value) {
56 |     this.props.onChange && this.props.onChange(value)
57 |   }
58 |   computedStyle () {
59 |     let node = this.$el.querySelector('.vx-tab--underline')
60 |     let activeNode = this.$el.querySelector('.is-active')
61 |     if (activeNode) {
62 |       let activeWidth = activeNode.offsetWidth
63 |       let width = activeWidth
64 |       let left = activeNode.offsetLeft
65 |       if (this.props.underlineWidth === 'auto' || this.props.underlineWidth === 0) {
66 |         width = activeNode.children[0].offsetWidth
67 |         if (width > activeWidth) {
68 |           width = activeWidth
69 |         }
70 |         left = activeNode.offsetLeft + (activeWidth - width) / 2
71 |       } else if (this.props.underlineWidth) {
72 |         width = this.props.underlineWidth
73 |         left = activeNode.offsetLeft + (activeWidth - this.props.underlineWidth) / 2
74 |       }
75 |       requestAnimationFrame(() => {
76 |         node.style.cssText = `width: ${width}px;left:${left}px;display:block`
77 |       })
78 |     }
79 |     if (this.props.layout === 'scroll') {
80 |       let target = activeNode
81 |       let node = this.$el.querySelector('.vx-tab--scroller')
82 |       requestAnimationFrame(() => {
83 |         let width = target.offsetWidth
84 |         let innerWidth = window.innerWidth
85 |         let rect = target.getBoundingClientRect()
86 |         let offsetLeft = target.nextElementSibling ? target.nextElementSibling.offsetLeft : 0
87 |         if (rect.right + width > innerWidth && target.nextElementSibling) {
88 |           requestAnimationFrame(() => {
89 |             node.scrollLeft = offsetLeft + target.nextElementSibling.offsetWidth - innerWidth
90 |           })
91 |         }
92 |       })
93 |     }
94 |   }
95 | }
96 | 
97 | export default Tab;
98 | 


--------------------------------------------------------------------------------
/src/components/select/Select.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import ReactDOM from 'react-dom';
  3 | import classnames from 'classnames'
  4 | import PropTypes from 'prop-types'
  5 | import Picker from './Picker'
  6 | import Arrow from '../arrow'
  7 | import {Flexbox, FlexboxItem} from '../flexbox'
  8 | 
  9 | class Select extends React.Component {
 10 |   static propTypes = {
 11 |     placeholder: PropTypes.string,
 12 |     max: PropTypes.number,
 13 |     popupDirection: PropTypes.string,
 14 |     separator: PropTypes.string,
 15 |     arrow: PropTypes.bool,
 16 |     onChange: PropTypes.func
 17 |   }
 18 |   static defaultProps = {
 19 |     placeholder: '请选择',
 20 |     separator: ',',
 21 |     max: 1,
 22 |     arrow: true,
 23 |     arrowProps: {}
 24 |   }
 25 |   constructor (props) {
 26 |     super(props)
 27 |     this.state = {
 28 |       open: false,
 29 |       focus: false,
 30 |       label: this.props.max === 1 ? '' : []
 31 |     }
 32 |     this.handleChange = this.handleChange.bind(this)
 33 |     this.handleClick = this.handleClick.bind(this)
 34 |     this.handleClose = this.handleClose.bind(this)
 35 |   }
 36 |   componentDidUpdate (prevProps) {
 37 |     if (JSON.stringify(this.props.value) !== JSON.stringify(prevProps.value)) {
 38 |       let label = this.getLabel(this.props.value)
 39 |       this.setState({label: label.join(this.props.separator)})
 40 |     }
 41 |   }
 42 |   render () {
 43 |     let {disabled, placeholder, separator, arrow, arrowProps, children, prepend, append, className, popupDirection, max, ...others} = this.props
 44 |     return (
 45 |       <div className={classnames(["vx-select", {'is-disabled': disabled}, className])} onClick={this.handleClick} {...others}>
 46 |         <Flexbox className="vx-select--inner" align="center">
 47 |           {prepend}
 48 |           <FlexboxItem>
 49 |             <button type="button" data-placeholder={placeholder}>{this.state.label}</button>
 50 |           </FlexboxItem>
 51 |           {arrow && !append && <Arrow {...arrowProps} direction="down"/>}
 52 |           {append}
 53 |         </Flexbox>
 54 |       </div>
 55 |     );
 56 |   }
 57 |   handleChange (value) {
 58 |     let label = this.getLabel(value)
 59 |     this.setState({label: label.join(this.props.separator)}, () => {
 60 |       this.props.onChange && this.props.onChange(value)
 61 |     })
 62 |   }
 63 |   getLabel (value) {
 64 |     let label = []
 65 |     if (this.props.max === 1) {
 66 |       React.Children.map(this.props.children, item => {
 67 |         if (value === item.props.value) {
 68 |           label.push(item.props.label || item.props.children)
 69 |         }
 70 |       })
 71 |     } else {
 72 |       React.Children.map(this.props.children, item => {
 73 |         if (value.indexOf(item.props.value) > -1) {
 74 |           label.push(item.props.label || item.props.children)
 75 |         }
 76 |       })
 77 |     }
 78 |     return label
 79 |   }
 80 |   handleClose (value = false) {
 81 |     this.setState({
 82 |       open: value,
 83 |       focus: false
 84 |     }, () => {
 85 |       this.node && ReactDOM.unmountComponentAtNode(this.node)
 86 |     })
 87 |   }
 88 |   handleClick () {
 89 |     this.setState({
 90 |       focus: true
 91 |     })
 92 |     let node = this.node = document.createElement('div')
 93 |     ReactDOM.render(
 94 |       <Picker
 95 |         open={false}
 96 |         value={this.props.value}
 97 |         title={this.props.placeholder}
 98 |         max={this.props.max}
 99 |         direction={this.props.popupDirection}
100 |         fastClose={this.props.max === 1}
101 |         onClose={this.handleClose}
102 |         onChange={this.handleChange}>
103 |           {this.props.children}
104 |       </Picker>,
105 |       node
106 |     )
107 |   }
108 | }
109 | 
110 | export default Select;
111 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | const dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.  Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 |   if (fs.existsSync(dotenvFile)) {
35 |     require('dotenv-expand')(
36 |       require('dotenv').config({
37 |         path: dotenvFile,
38 |       })
39 |     );
40 |   }
41 | });
42 | 
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebook/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 |   .split(path.delimiter)
55 |   .filter(folder => folder && !path.isAbsolute(folder))
56 |   .map(folder => path.resolve(appDirectory, folder))
57 |   .join(path.delimiter);
58 | 
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in Webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 | 
63 | function getClientEnvironment(publicUrl) {
64 |   const raw = Object.keys(process.env)
65 |     .filter(key => REACT_APP.test(key))
66 |     .reduce(
67 |       (env, key) => {
68 |         env[key] = process.env[key];
69 |         return env;
70 |       },
71 |       {
72 |         // Useful for determining whether we’re running in production mode.
73 |         // Most importantly, it switches React into the correct mode.
74 |         NODE_ENV: process.env.NODE_ENV || 'development',
75 |         // Useful for resolving the correct path to static assets in `public`.
76 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
77 |         // This should only be used as an escape hatch. Normally you would put
78 |         // images into the `src` and `import` them in code to get their paths.
79 |         PUBLIC_URL: publicUrl,
80 |       }
81 |     );
82 |   // Stringify all values so we can feed into Webpack DefinePlugin
83 |   const stringified = {
84 |     'process.env': Object.keys(raw).reduce((env, key) => {
85 |       env[key] = JSON.stringify(raw[key]);
86 |       return env;
87 |     }, {}),
88 |   };
89 | 
90 |   return { raw, stringified };
91 | }
92 | 
93 | module.exports = getClientEnvironment;
94 | 


--------------------------------------------------------------------------------
/src/components/popup-picker/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import PropTypes from 'prop-types'
  3 | import classnames from 'classnames'
  4 | import Popup from '../popup'
  5 | import Picker from '../picker'
  6 | 
  7 | export default class PopupPicker extends React.Component{
  8 |   static propTypes = {
  9 |     open: PropTypes.bool,
 10 |     history: PropTypes.bool,
 11 |     pickers: PropTypes.array,
 12 |     placeholder: PropTypes.string,
 13 |     cancelText: PropTypes.string,
 14 |     confirmText: PropTypes.string,
 15 |     onChange: PropTypes.func,
 16 |     onConfirm: PropTypes.func,
 17 |     onClose: PropTypes.func,
 18 |     onCloseAfter: PropTypes.func,
 19 |     onPickerChange: PropTypes.func
 20 |   }
 21 |   static defaultProps = {
 22 |     history: true,
 23 |     pickers: [],
 24 |     cancelText: '取消',
 25 |     confirmText: '完成',
 26 |   }
 27 |   constructor (props) {
 28 |     super(props)
 29 |     this.state = {
 30 |       myPickers: this.props.pickers
 31 |     }
 32 |     this.handleCancel = this.handleCancel.bind(this)
 33 |     this.handleClose = this.handleClose.bind(this)
 34 |     this.handleCloseAfter = this.handleCloseAfter.bind(this)
 35 |     this.handleConfirm = this.handleConfirm.bind(this)
 36 |   }
 37 |   render () {
 38 |     const {open, history, cancelText, confirmText, placeholder} = this.props
 39 |     return (
 40 |       <Popup open={open} history={history} onClose={this.handleClose}
 41 |         header={
 42 |           <div className={classnames(['vx-flexbox','vx-popup-picker--header'])}>
 43 |             <button type="button" className="vx-popup-picker--cancel" onClick={this.handleCancel}>{cancelText}</button>
 44 |             <button type="button" className={classnames(['vx-flexbox--item','vx-popup-picker--placeholder'])}>{placeholder}</button>
 45 |             <button type="button" className="vx-popup-picker--confirm" onClick={this.handleConfirm}>{confirmText}</button>
 46 |           </div>
 47 |         }
 48 |         >
 49 |         <div className={classnames(['vx-flexbox','vx-popup-picker'])}>
 50 |           {
 51 |             open && this.state.myPickers && this.state.myPickers.map((item, index) => {
 52 |               return (
 53 |                 <Picker
 54 |                   className={classnames(['vx-flexbox--item','vx-popup-picker--item'])}
 55 |                   key={index}
 56 |                   value={item.value}
 57 |                   placeholder={item.placeholder}
 58 |                   options={item.options}
 59 |                   onChange={this.handleChange.bind(this, index)}
 60 |                 />
 61 |               )
 62 |             })
 63 |           }
 64 |         </div>
 65 |       </Popup>
 66 |     )
 67 |   }
 68 |   componentWillReceiveProps (nextProps) {
 69 |     if (nextProps.pickers !== this.props.pickers) {
 70 |       this.setState({
 71 |         myPickers: nextProps.pickers
 72 |       })
 73 |     }
 74 |   }
 75 |   handleCancel () {
 76 |     this.props.onClose && this.props.onClose()
 77 |   }
 78 |   handleClose () {
 79 |     this.props.onClose && this.props.onClose()
 80 |   }
 81 |   handleCloseAfter () {
 82 |     this.props.onCloseAfter && this.props.onCloseAfter()
 83 |   }
 84 |   handleConfirm () {
 85 |     this.props.onConfirm && this.props.onConfirm()
 86 |     let value = this.state.myPickers.map(item => {
 87 |       return {
 88 |         value: item.value
 89 |       }
 90 |     })
 91 |     if (!this.props.value || value.toString() !== this.props.value.toString()) {
 92 |       this.props.open && this.props.onChange && this.props.onChange(value)
 93 |     }
 94 |     this.handleClose()
 95 |   }
 96 |   handleChange (index, value) {
 97 |     let pickers = JSON.parse(JSON.stringify(this.state.myPickers))
 98 |     pickers[index].value = value
 99 |     this.setState({
100 |       myPickers: pickers
101 |     }, () => {
102 |       this.props.onPickerChange && this.props.onPickerChange(value, index)
103 |     })
104 |   }
105 | }
106 | 


--------------------------------------------------------------------------------
/src/views/Home.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Layout, Body, Nav, Cell, Group } from '@/components'
 3 | 
 4 | class Home extends React.Component {
 5 |   handleClick () {
 6 |     this.props.dispatch('todo/add', {name: 'fdafd'})
 7 |   }
 8 |   render() {
 9 |     return (
10 |       <Layout className="home">
11 |         <Nav slot="header" isBack={false} title="Vx UI Demo@react"  onClick={this.handleClick.bind(this)} />
12 |         <Body slot="body">
13 |         
14 |         <div style={{textAlign: 'center',paddingTop: '0.2rem',marginBottom: '-0.25rem'}}>
15 |           <a target="_blank" rel="noopener noreferrer" href="https://github.com/yunfeihuang/react-components">
16 |             <img style={{borderRadius: '50%',height: '40px',width: '40px'}} src="./images/github.png" alt=""/> <br/>
17 |             star me
18 |             {this.props.state.todo && this.props.state.todo.counter}
19 |           </a>
20 |         </div>
21 |           <Group title="basic">
22 |             <Cell title="Button" arrow={true} to="/demos/button" />
23 |             <Cell title="Layout" arrow={true} to="/demos/layout" />
24 |             <Cell title="Flexbox" arrow={true} to="/demos/flexbox" />
25 |             <Cell title="Nav" arrow={true} to="/demos/nav" />
26 |             <Cell title="Group" arrow={true} to="/demos/group" />
27 |             <Cell title="Cell" arrow={true} to="/demos/cell" />
28 |             <Cell title="Divider" arrow={true} to="/demos/divider" />
29 |             <Cell title="Message" arrow={true} to="/demos/message" />
30 |           </Group>
31 |           <Group title="form表单">
32 |             <Cell title="Input" arrow={true} to="/demos/input" />
33 |             <Cell title="Password" arrow={true} to="/demos/password" />
34 |             <Cell title="Textarea" arrow={true} to="/demos/textarea" />
35 |             <Cell title="InputNumber" arrow={true} to="/demos/inputnumber" />
36 |             <Cell title="Switch" arrow={true} to="/demos/switch" />
37 |             <Cell title="Checkbox" arrow={true} to="/demos/checkbox" />
38 |             <Cell title="Checker" arrow={true} to="/demos/checker" />
39 |             <Cell title="Radio" arrow={true} to="/demos/radio" />
40 |             <Cell title="Select" arrow={true} to="/demos/select" />
41 |             <Cell title="Range" arrow={true} to="/demos/range" />
42 |             <Cell title="Rater" arrow={true} to="/demos/rater" />
43 |           </Group>
44 |           <Group title="对话弹框">
45 |             <Cell title="Actionsheet" arrow={true} to="/demos/actionsheet" />
46 |             <Cell title="Alert" arrow={true} to="/demos/alert" />
47 |             <Cell title="Confirm" arrow={true} to="/demos/confirm" />
48 |             <Cell title="Prompt" arrow={true} to="/demos/prompt" />
49 |             <Cell title="Toast" arrow={true} to="/demos/toast" />
50 |             <Cell title="Popover" arrow={true} to="/demos/popover" />
51 |             <Cell title="Popup" arrow={true} to="/demos/popup" />
52 |             <Cell title="PopupPicker" arrow={true} to="/demos/popuppicker" />
53 |           </Group>
54 |           <Group title="选项卡">
55 |             <Cell title="Tab" arrow={true} to="/demos/tab" />
56 |             <Cell title="Tabbar" arrow={true} to="/demos/tabbar" />
57 |             <Cell title="Sidebar" arrow={true} to="/demos/sidebar" />
58 |             <Cell title="ButtonTab" arrow={true} to="/demos/buttontab" />
59 |           </Group>
60 |           <Group title="图片">
61 |             <Cell title="Img" arrow={true} to="/demos/img" />
62 |             <Cell title="Swiper" arrow={true} to="/demos/swiper" />
63 |             <Cell title="Preview" arrow={true} to="/demos/preview" />
64 |             <Cell title="Qrcode" arrow={true} to="/demos/qrcode" />
65 |           </Group>
66 |           <Group title="其他">
67 |             <Cell title="Badge" arrow={true} to="/demos/badge" />
68 |             <Cell title="Accordion" arrow={true} to="/demos/accordion" />
69 |             <Cell title="Picker" arrow={true} to="/demos/picker" />
70 |             <Cell title="Spinner" arrow={true} to="/demos/spinner" />
71 |             <Cell title="ListView" arrow={true} to="/demos/listview" />
72 |             <Cell title="Sticky" arrow={true} to="/demos/sticky" />
73 |             <Cell title="IndexList" arrow={true} to="/demos/indexlist" />
74 |             <Cell title="Swipeout" arrow={true} to="/demos/swipeout" />
75 |             <Cell title="Ripple" arrow={true} to="/demos/ripple" />
76 |             <Cell title="Marquee" arrow={true} to="/demos/marquee" />
77 |           </Group>
78 |         </Body>
79 |       </Layout>
80 |     );
81 |   }
82 | }
83 | 
84 | export default Home;
85 | 


--------------------------------------------------------------------------------
/config/modules.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const path = require('path');
  5 | const paths = require('./paths');
  6 | const chalk = require('react-dev-utils/chalk');
  7 | const resolve = require('resolve');
  8 | 
  9 | /**
 10 |  * Get additional module paths based on the baseUrl of a compilerOptions object.
 11 |  *
 12 |  * @param {Object} options
 13 |  */
 14 | function getAdditionalModulePaths(options = {}) {
 15 |   const baseUrl = options.baseUrl;
 16 | 
 17 |   // We need to explicitly check for null and undefined (and not a falsy value) because
 18 |   // TypeScript treats an empty string as `.`.
 19 |   if (baseUrl == null) {
 20 |     // If there's no baseUrl set we respect NODE_PATH
 21 |     // Note that NODE_PATH is deprecated and will be removed
 22 |     // in the next major release of create-react-app.
 23 | 
 24 |     const nodePath = process.env.NODE_PATH || '';
 25 |     return nodePath.split(path.delimiter).filter(Boolean);
 26 |   }
 27 | 
 28 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 29 | 
 30 |   // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
 31 |   // the default behavior.
 32 |   if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
 33 |     return null;
 34 |   }
 35 | 
 36 |   // Allow the user set the `baseUrl` to `appSrc`.
 37 |   if (path.relative(paths.appSrc, baseUrlResolved) === '') {
 38 |     return [paths.appSrc];
 39 |   }
 40 | 
 41 |   // If the path is equal to the root directory we ignore it here.
 42 |   // We don't want to allow importing from the root directly as source files are
 43 |   // not transpiled outside of `src`. We do allow importing them with the
 44 |   // absolute path (e.g. `src/Components/Button.js`) but we set that up with
 45 |   // an alias.
 46 |   if (path.relative(paths.appPath, baseUrlResolved) === '') {
 47 |     return null;
 48 |   }
 49 | 
 50 |   // Otherwise, throw an error.
 51 |   throw new Error(
 52 |     chalk.red.bold(
 53 |       "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
 54 |         ' Create React App does not support other values at this time.'
 55 |     )
 56 |   );
 57 | }
 58 | 
 59 | /**
 60 |  * Get webpack aliases based on the baseUrl of a compilerOptions object.
 61 |  *
 62 |  * @param {*} options
 63 |  */
 64 | function getWebpackAliases(options = {}) {
 65 |   const baseUrl = options.baseUrl;
 66 | 
 67 |   if (!baseUrl) {
 68 |     return {};
 69 |   }
 70 | 
 71 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 72 | 
 73 |   if (path.relative(paths.appPath, baseUrlResolved) === '') {
 74 |     return {
 75 |       src: paths.appSrc,
 76 |     };
 77 |   }
 78 | }
 79 | 
 80 | /**
 81 |  * Get jest aliases based on the baseUrl of a compilerOptions object.
 82 |  *
 83 |  * @param {*} options
 84 |  */
 85 | function getJestAliases(options = {}) {
 86 |   const baseUrl = options.baseUrl;
 87 | 
 88 |   if (!baseUrl) {
 89 |     return {};
 90 |   }
 91 | 
 92 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 93 | 
 94 |   if (path.relative(paths.appPath, baseUrlResolved) === '') {
 95 |     return {
 96 |       'src/(.*)$': '<rootDir>/src/$1',
 97 |     };
 98 |   }
 99 | }
100 | 
101 | function getModules() {
102 |   // Check if TypeScript is setup
103 |   const hasTsConfig = fs.existsSync(paths.appTsConfig);
104 |   const hasJsConfig = fs.existsSync(paths.appJsConfig);
105 | 
106 |   if (hasTsConfig && hasJsConfig) {
107 |     throw new Error(
108 |       'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
109 |     );
110 |   }
111 | 
112 |   let config;
113 | 
114 |   // If there's a tsconfig.json we assume it's a
115 |   // TypeScript project and set up the config
116 |   // based on tsconfig.json
117 |   if (hasTsConfig) {
118 |     const ts = require(resolve.sync('typescript', {
119 |       basedir: paths.appNodeModules,
120 |     }));
121 |     config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
122 |     // Otherwise we'll check if there is jsconfig.json
123 |     // for non TS projects.
124 |   } else if (hasJsConfig) {
125 |     config = require(paths.appJsConfig);
126 |   }
127 | 
128 |   config = config || {};
129 |   const options = config.compilerOptions || {};
130 | 
131 |   const additionalModulePaths = getAdditionalModulePaths(options);
132 | 
133 |   return {
134 |     additionalModulePaths: additionalModulePaths,
135 |     webpackAliases: getWebpackAliases(options),
136 |     jestAliases: getJestAliases(options),
137 |     hasTsConfig,
138 |   };
139 | }
140 | 
141 | module.exports = getModules();
142 | 


--------------------------------------------------------------------------------
/src/components/img/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import PropTypes from 'prop-types'
  3 | import classnames from 'classnames'
  4 | import Spinner from '../spinner'
  5 | 
  6 | export default class Img extends React.Component{
  7 |   static propTypes = {
  8 |     lazyload: PropTypes.bool,
  9 |     loading: PropTypes.bool,
 10 |     src: PropTypes.string,
 11 |     alt: PropTypes.string
 12 |   }
 13 |   static defaultProps = {
 14 |     lazyload: true,
 15 |     loading: false,
 16 |     alt: ''
 17 |   }
 18 |   constructor (props) {
 19 |     super(props)
 20 |     this.handleError = this.handleError.bind(this)
 21 |     this.handleLoad = this.handleLoad.bind(this)
 22 |     this.handleScroll = this.handleScroll.bind(this)
 23 |   }
 24 |   render () {
 25 |     const { className, style, loading, lazyload, src, children, placeholder, alt, ...others } = this.props
 26 |     return (
 27 |       <div ref="$el" className={classnames(['vx-img--wrapper',{'vx-img--placeholder': !loading}, className])} style={style}>
 28 |         <img className={classnames(['vx-img', {'is-lazyload': lazyload}])}
 29 |           {...others}
 30 |           alt={alt}
 31 |           onError={this.handleError}
 32 |           onLoad={this.handleLoad}
 33 |         />
 34 |         {loading ? <Spinner className="vx-img--spinner"/> : placeholder}
 35 |       </div>
 36 |     )
 37 |   }
 38 |   componentDidMount () {
 39 |     this.$el = this.refs.$el
 40 |     this.$$scrollNode = this.getScrollNode(this.$el.offsetParent)
 41 |     if (!this.$$scrollNode.lazyloadImages) {
 42 |       this.$$scrollNode.lazyloadImages = []
 43 |       this.$$scrollNode.scrollTimer = null
 44 |       this.$$scrollNode.onscroll = (e) => {
 45 |         e.target.scrollTimer && clearTimeout(e.target.scrollTimer)
 46 |         e.target.scrollTimer = setTimeout(() => {
 47 |           e.target.lazyloadImages = e.target.lazyloadImages.filter((item, index) => {
 48 |             if (item.loaded === false && item.img.inViewPort()) {
 49 |               item.img.setSource()
 50 |               return false
 51 |             } else {
 52 |               return true
 53 |             }
 54 |           })
 55 |         }, 500)
 56 |       }
 57 |     }
 58 |     if (this.props.lazyload) {
 59 |       if (this.inViewPort()) {
 60 |         this.setSource()
 61 |       } else {
 62 |         this.$$scrollNode.lazyloadImages.push({
 63 |           img: this,
 64 |           loaded: false
 65 |         })
 66 |       }
 67 |     }
 68 |   }
 69 |   componentWillUnmount () {
 70 |     let self = this
 71 |     this.$$scrollNode.lazyloadImages = this.$$scrollNode.lazyloadImages.filter((item) => {
 72 |       return item !== self
 73 |     })
 74 |   }
 75 |   getScrollNode (node) {
 76 |       let n = node
 77 |       let closest = () => {
 78 |         let styleObject = window.getComputedStyle(n)
 79 |         if (!(['scroll', 'auto'].indexOf(styleObject['overflow']) > -1 || ['scroll', 'auto'].indexOf(styleObject['overflow-y']) > -1) || styleObject['-webkit-overflow-scrolling'] === 'touch' || styleObject['overflow-scrolling'] === 'touch') {
 80 |           n = n.offsetParent
 81 |           if (n === document.body) {
 82 |             n = document.body
 83 |           } else {
 84 |             closest()
 85 |           }
 86 |         }
 87 |       }
 88 |       document.body !== n && closest()
 89 |       return n
 90 |     }
 91 |     inViewPort () {
 92 |       if (this.$el.offsetWidth === 0 && this.$el.offsetHeight === 0) {
 93 |         return false
 94 |       }
 95 |       let rect = this.$el.getBoundingClientRect()
 96 |       return rect.top < window.innerHeight && rect.left < window.innerWidth
 97 |     }
 98 |     setSource () {
 99 |       if (this.props.src) {
100 |         let image = new Image()
101 |         image.onload = (e) => {
102 |           let icon = this.$el.querySelector('.vx-img--icon') || this.$el.querySelector('.vx-img--spinner')
103 |           let img = this.$el.querySelector('img')
104 |           requestAnimationFrame(() => {
105 |             icon && (icon.style.display = 'none')
106 |             img.src = this.props.src
107 |             img.style.opacity = 1
108 |             this.$el.classList.remove('vx-img--placeholder')
109 |           })
110 |         }
111 |         image.src = this.props.src
112 |       }
113 |       this.props.srcset && (this.$el.srcset = this.props.srcset)
114 |     }
115 |     handleScroll (e) {
116 |       if (this.inViewPort()) {
117 |         e.currentTarget && e.currentTarget.removeEventListener('scroll', this.handleScroll)
118 |         this.setSource()
119 |       }
120 |     }
121 |     handleError (e) {
122 |       this.props.onError && this.props.onError(e)
123 |     }
124 |     handleLoad (e) {
125 |       this.props.onLoad && this.props.onLoad(e)
126 |     }
127 | }
128 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost' ||
 13 |     // [::1] is the IPv6 localhost address.
 14 |     window.location.hostname === '[::1]' ||
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     window.location.hostname.match(
 17 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 18 |     )
 19 | );
 20 | 
 21 | export default function register() {
 22 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 23 |     // The URL constructor is available in all browsers that support SW.
 24 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 25 |     if (publicUrl.origin !== window.location.origin) {
 26 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 27 |       // from what our page is served on. This might happen if a CDN is used to
 28 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 29 |       return;
 30 |     }
 31 | 
 32 |     window.addEventListener('load', () => {
 33 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 34 | 
 35 |       if (isLocalhost) {
 36 |         // This is running on localhost. Lets check if a service worker still exists or not.
 37 |         checkValidServiceWorker(swUrl);
 38 | 
 39 |         // Add some additional logging to localhost, pointing developers to the
 40 |         // service worker/PWA documentation.
 41 |         navigator.serviceWorker.ready.then(() => {
 42 |           console.log(
 43 |             'This web app is being served cache-first by a service ' +
 44 |               'worker. To learn more, visit https://goo.gl/SC7cgQ'
 45 |           );
 46 |         });
 47 |       } else {
 48 |         // Is not local host. Just register service worker
 49 |         registerValidSW(swUrl);
 50 |       }
 51 |     });
 52 |   }
 53 | }
 54 | 
 55 | function registerValidSW(swUrl) {
 56 |   navigator.serviceWorker
 57 |     .register(swUrl)
 58 |     .then(registration => {
 59 |       registration.onupdatefound = () => {
 60 |         const installingWorker = registration.installing;
 61 |         installingWorker.onstatechange = () => {
 62 |           if (installingWorker.state === 'installed') {
 63 |             if (navigator.serviceWorker.controller) {
 64 |               // At this point, the old content will have been purged and
 65 |               // the fresh content will have been added to the cache.
 66 |               // It's the perfect time to display a "New content is
 67 |               // available; please refresh." message in your web app.
 68 |               console.log('New content is available; please refresh.');
 69 |             } else {
 70 |               // At this point, everything has been precached.
 71 |               // It's the perfect time to display a
 72 |               // "Content is cached for offline use." message.
 73 |               console.log('Content is cached for offline use.');
 74 |             }
 75 |           }
 76 |         };
 77 |       };
 78 |     })
 79 |     .catch(error => {
 80 |       console.error('Error during service worker registration:', error);
 81 |     });
 82 | }
 83 | 
 84 | function checkValidServiceWorker(swUrl) {
 85 |   // Check if the service worker can be found. If it can't reload the page.
 86 |   fetch(swUrl)
 87 |     .then(response => {
 88 |       // Ensure service worker exists, and that we really are getting a JS file.
 89 |       if (
 90 |         response.status === 404 ||
 91 |         response.headers.get('content-type').indexOf('javascript') === -1
 92 |       ) {
 93 |         // No service worker found. Probably a different app. Reload the page.
 94 |         navigator.serviceWorker.ready.then(registration => {
 95 |           registration.unregister().then(() => {
 96 |             window.location.reload();
 97 |           });
 98 |         });
 99 |       } else {
100 |         // Service worker found. Proceed as normal.
101 |         registerValidSW(swUrl);
102 |       }
103 |     })
104 |     .catch(() => {
105 |       console.log(
106 |         'No internet connection found. App is running in offline mode.'
107 |       );
108 |     });
109 | }
110 | 
111 | export function unregister() {
112 |   if ('serviceWorker' in navigator) {
113 |     navigator.serviceWorker.ready.then(registration => {
114 |       registration.unregister();
115 |     });
116 |   }
117 | }
118 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "react-app10",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "dependencies": {
  6 |     "@babel/core": "7.6.0",
  7 |     "@svgr/webpack": "4.3.2",
  8 |     "@typescript-eslint/eslint-plugin": "^2.2.0",
  9 |     "@typescript-eslint/parser": "^2.2.0",
 10 |     "babel-eslint": "10.0.3",
 11 |     "babel-jest": "^24.9.0",
 12 |     "babel-loader": "8.0.6",
 13 |     "babel-plugin-named-asset-import": "^0.3.4",
 14 |     "babel-preset-react-app": "^9.0.2",
 15 |     "camelcase": "^5.2.0",
 16 |     "case-sensitive-paths-webpack-plugin": "2.2.0",
 17 |     "css-loader": "2.1.1",
 18 |     "dotenv": "6.2.0",
 19 |     "dotenv-expand": "5.1.0",
 20 |     "eslint": "^6.1.0",
 21 |     "eslint-config-react-app": "^5.0.2",
 22 |     "eslint-loader": "3.0.2",
 23 |     "eslint-plugin-flowtype": "3.13.0",
 24 |     "eslint-plugin-import": "2.18.2",
 25 |     "eslint-plugin-jsx-a11y": "6.2.3",
 26 |     "eslint-plugin-react": "7.14.3",
 27 |     "eslint-plugin-react-hooks": "^1.6.1",
 28 |     "file-loader": "3.0.1",
 29 |     "fs-extra": "7.0.1",
 30 |     "html-webpack-plugin": "4.0.0-beta.5",
 31 |     "identity-obj-proxy": "3.0.0",
 32 |     "is-wsl": "^1.1.0",
 33 |     "jest": "24.9.0",
 34 |     "jest-environment-jsdom-fourteen": "0.1.0",
 35 |     "jest-resolve": "24.9.0",
 36 |     "jest-watch-typeahead": "0.4.0",
 37 |     "mini-css-extract-plugin": "0.8.0",
 38 |     "optimize-css-assets-webpack-plugin": "5.0.3",
 39 |     "pnp-webpack-plugin": "1.5.0",
 40 |     "postcss-flexbugs-fixes": "4.1.0",
 41 |     "postcss-loader": "3.0.0",
 42 |     "postcss-normalize": "7.0.1",
 43 |     "postcss-preset-env": "6.7.0",
 44 |     "postcss-safe-parser": "4.0.1",
 45 |     "react": "^16.11.0",
 46 |     "react-app-polyfill": "^1.0.4",
 47 |     "react-dev-utils": "^11.0.4",
 48 |     "react-dom": "^16.11.0",
 49 |     "resolve": "1.12.0",
 50 |     "resolve-url-loader": "3.1.0",
 51 |     "sass-loader": "7.2.0",
 52 |     "semver": "6.3.0",
 53 |     "style-loader": "1.0.0",
 54 |     "terser-webpack-plugin": "1.4.1",
 55 |     "ts-pnp": "1.1.4",
 56 |     "url-loader": "2.1.0",
 57 |     "webpack": "4.41.0",
 58 |     "webpack-dev-server": "3.2.1",
 59 |     "webpack-manifest-plugin": "2.1.1",
 60 |     "workbox-webpack-plugin": "4.3.1"
 61 |   },
 62 |   "scripts": {
 63 |     "start": "node scripts/start.js",
 64 |     "build": "node scripts/build.js",
 65 |     "test": "node scripts/test.js"
 66 |   },
 67 |   "eslintConfig": {
 68 |     "extends": "react-app"
 69 |   },
 70 |   "browserslist": {
 71 |     "production": [
 72 |       ">0.2%",
 73 |       "not dead",
 74 |       "not op_mini all"
 75 |     ],
 76 |     "development": [
 77 |       "last 1 chrome version",
 78 |       "last 1 firefox version",
 79 |       "last 1 safari version"
 80 |     ]
 81 |   },
 82 |   "jest": {
 83 |     "roots": [
 84 |       "<rootDir>/src"
 85 |     ],
 86 |     "collectCoverageFrom": [
 87 |       "src/**/*.{js,jsx,ts,tsx}",
 88 |       "!src/**/*.d.ts"
 89 |     ],
 90 |     "setupFiles": [
 91 |       "react-app-polyfill/jsdom"
 92 |     ],
 93 |     "setupFilesAfterEnv": [],
 94 |     "testMatch": [
 95 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
 96 |       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
 97 |     ],
 98 |     "testEnvironment": "jest-environment-jsdom-fourteen",
 99 |     "transform": {
100 |       "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
101 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
102 |       "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
103 |     },
104 |     "transformIgnorePatterns": [
105 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
106 |       "^.+\\.module\\.(css|sass|scss)$"
107 |     ],
108 |     "modulePaths": [],
109 |     "moduleNameMapper": {
110 |       "^react-native$": "react-native-web",
111 |       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
112 |     },
113 |     "moduleFileExtensions": [
114 |       "web.js",
115 |       "js",
116 |       "web.ts",
117 |       "ts",
118 |       "web.tsx",
119 |       "tsx",
120 |       "json",
121 |       "web.jsx",
122 |       "jsx",
123 |       "node"
124 |     ],
125 |     "watchPlugins": [
126 |       "jest-watch-typeahead/filename",
127 |       "jest-watch-typeahead/testname"
128 |     ]
129 |   },
130 |   "babel": {
131 |     "presets": [
132 |       "react-app"
133 |     ]
134 |   },
135 |   "devDependencies": {
136 |     "classnames": "^2.2.6",
137 |     "photoswipe": "^4.1.2",
138 |     "qrcodejs2": "^0.0.2",
139 |     "react-redux": "^7.1.1",
140 |     "react-router": "^5.1.2",
141 |     "react-router-config": "^5.1.1",
142 |     "react-router-dom": "^5.1.2",
143 |     "react-router-native": "^5.1.2",
144 |     "react-transition-group": "^2.5.0",
145 |     "redux": "^4.0.0",
146 |     "redux-thunk": "^2.2.0",
147 |     "redux-devtools": "^3.4.1",
148 |     "redux-devtools-dock-monitor": "^1.1.3",
149 |     "redux-devtools-log-monitor": "^1.4.0",
150 |     "redux-logger": "^3.0.6",
151 |     "vx-ui": "0.1.7-alpha",
152 |     "swiper": "^3.4.2"
153 |   }
154 | }
155 | 


--------------------------------------------------------------------------------