27 | );
28 | }
29 | }
30 |
31 | Mask.propTypes = {
32 | transparent: React.PropTypes.bool,
33 | fade: React.PropTypes.bool,
34 | className: React.PropTypes.string,
35 | onClick: React.PropTypes.func,
36 | show: React.PropTypes.bool,
37 | opacity: React.PropTypes.number
38 | };
39 |
40 | Mask.defaultProps = {
41 | transparent: false,
42 | className: '',
43 | fade: false,
44 | show: false,
45 | opacity: 0.4
46 | };
47 |
48 | export default Mask;
--------------------------------------------------------------------------------
/src/style/components/mask/style.less:
--------------------------------------------------------------------------------
1 | @import "../base/fn";
2 |
3 | .weui_mask {
4 | position: fixed;
5 | z-index: 1;
6 | width: 100%;
7 | height: 100%;
8 | top: 0;
9 | left: 0;
10 | background: rgba(0, 0, 0, .6);
11 | }
12 |
13 | .weui_mask_transparent {
14 | position: fixed;
15 | z-index: 1;
16 | width: 100%;
17 | height: 100%;
18 | top: 0;
19 | left: 0;
20 | }
21 |
22 | .weui_mask_transition_fade{
23 | display: none;
24 | position: fixed;
25 | z-index: 1;
26 | width: 100%;
27 | height: 100%;
28 | top: 0;
29 | left: 0;
30 | background: rgba(0,0,0,.6);
31 | .animated;
32 | .fadeIn;
33 | }
34 | .weui_fade_toggle{
35 | background: rgba(0,0,0,.6);
36 | }
--------------------------------------------------------------------------------
/src/style/components/message/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import style from './style';
3 | import classNames from 'classnames';
4 | import Button from '../button';
5 |
6 | const Message = (props) => {
7 | let actions = props.actions.map((action,idx)=>{
8 | return (
);
9 | });
10 |
11 | let className = classNames('weui_msg',props.className);
12 | return (
13 |
14 |
{props.icon}
15 |
16 |
{props.title}
17 |
{props.children}
18 |
19 |
20 |
21 | {actions}
22 |
23 |
24 |
25 | {props.extra}
26 |
27 |
28 | );
29 | }
30 |
31 | Message.propTypes = {
32 | className: React.PropTypes.string,
33 | icon: React.PropTypes.any,
34 | title: React.PropTypes.string,
35 | actions: React.PropTypes.array,
36 | extra: React.PropTypes.any
37 | };
38 |
39 | Message.defaultProps = {
40 | className: '',
41 | actions:[]
42 | };
43 |
44 | export default Message;
--------------------------------------------------------------------------------
/src/style/components/message/style.less:
--------------------------------------------------------------------------------
1 | @import "../base/fn";
2 |
3 | .weui_msg {
4 | padding-top: @weuiMsgPaddingTop;
5 | text-align: center;
6 |
7 | .weui_icon_area {
8 | margin-bottom: @weuiMsgIconGap;
9 | }
10 |
11 | .weui_text_area {
12 | margin-bottom: @weuiMsgTextGap;
13 | padding:0 20px;
14 | }
15 | .weui_msg_title {
16 | margin-bottom: @weuiMsgTitleGap;
17 | font-weight: 400;
18 | font-size: 20px;
19 | }
20 | .weui_msg_desc {
21 | font-size: 14px;
22 | color: @globalTextColor;
23 | }
24 |
25 | .weui_opr_area {
26 | margin-bottom: @weuiMsgOprGap;
27 | }
28 |
29 | .weui_extra_area {
30 | margin-bottom: @weuiMsgExtraAreaGap;
31 | font-size: 14px;
32 | color: @globalTextColor;
33 | a{color: @globalLinkColor;}
34 | }
35 | }
36 |
37 | @media screen and (min-height: @weuiMsgExtraAreaOfMinHeight) {
38 | .weui_extra_area {
39 | position: fixed;
40 | left: 0;
41 | bottom: 0;
42 | width: 100%;
43 | text-align: center;
44 | }
45 | }
--------------------------------------------------------------------------------
/src/style/components/page/page-header.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const PageHeader = (props) => {
4 | let desc = props.desc ?
{props.desc}
: null;
5 | return (
6 |
7 |
{props.title}
8 | {desc}
9 |
10 | )
11 | };
12 |
13 | export default PageHeader;
--------------------------------------------------------------------------------
/src/style/components/progress/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import style from './style';
3 | import classNames from 'classnames';
4 |
5 | const Progress = (props) => {
6 | let className = classNames('weui_progress',props.className);
7 | let prgstyle = {
8 | width: props.percent + '%'
9 | };
10 |
11 | return (
12 |
20 | );
21 | }
22 |
23 | Progress.propTypes = {
24 | className: React.PropTypes.string,
25 | percent: React.PropTypes.number,
26 | };
27 |
28 | Progress.defaultProps = {
29 | className: '',
30 | percent:0
31 | };
32 |
33 | export default Progress;
--------------------------------------------------------------------------------
/src/style/components/progress/style.less:
--------------------------------------------------------------------------------
1 | @import "../base/fn";
2 |
3 | .weui_progress {
4 | display: flex;
5 | align-items: center;
6 | }
7 |
8 | .weui_progress_bar {
9 | background-color: @weuiProgressBg;
10 | height: @weuiProgressHeight;
11 | flex: 1;
12 | }
13 |
14 | .weui_progress_inner_bar {
15 | width: 0;
16 | height: 100%;
17 | background-color: @weuiProgressColor;
18 | }
19 |
20 | .weui_progress_opr {
21 | display: block;
22 | margin-left: 15px;
23 | font-size: 0;
24 | }
--------------------------------------------------------------------------------
/src/style/components/swiper/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import style from './style';
3 | import classNames from 'classnames';
4 | import SwiperJS from './swiper';
5 |
6 |
7 | class Swiper extends React.Component {
8 | constructor(props) {
9 | super(props);
10 |
11 | }
12 |
13 | componentDidMount() {
14 | this.swiper = new SwiperJS({
15 | container: '#'+this.props.id,
16 | direction:'horizontal'
17 | });
18 | }
19 |
20 | render() {
21 | let className = classNames('swipercontainer',this.props.className);
22 | let style={
23 | height: this.props.height
24 | };
25 |
26 | return (
27 |
28 |
29 |
30 | {this.props.children}
31 |
32 |
33 |
34 |
35 |
36 | );
37 | }
38 | }
39 |
40 |
41 | Swiper.propTypes = {
42 | className: React.PropTypes.string,
43 | id:React.PropTypes.string.isRequired,
44 | height:React.PropTypes.number
45 |
46 | };
47 |
48 | Swiper.defaultProps = {
49 | className: '',
50 | height: 200
51 | };
52 |
53 |
54 | export default Swiper;
55 |
--------------------------------------------------------------------------------
/src/style/components/swiper/item.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import style from './style';
3 | import classNames from 'classnames';
4 |
5 | const SwiperItem = (props) => {
6 | let className = classNames('item',props.className);
7 |
8 | return (
9 |
10 | {props.children}
11 |
12 | );
13 | }
14 |
15 | SwiperItem.propTypes = {
16 | className: React.PropTypes.string,
17 | };
18 |
19 | SwiperItem.defaultProps = {
20 | className: '',
21 | };
22 |
23 | export default SwiperItem;
--------------------------------------------------------------------------------
/src/style/components/swiper/style.less:
--------------------------------------------------------------------------------
1 | @import "../base/fn";
2 |
3 | .swiperwrapper {
4 | position: relative;
5 | padding: 1px 0;
6 | background-color: @weuiCellBg;
7 | overflow: auto;
8 | &:before {
9 | .setTopLine(@weuiCellBorderColor);
10 | }
11 | &:after {
12 | .setBottomLine(@weuiCellBorderColor);
13 | }
14 | }
15 |
16 | .swiper {
17 | height: 100%;
18 | overflow: hidden;
19 | transition: all 0.3s ease;
20 |
21 |
22 | }
23 | .swipernav{
24 | position: absolute;
25 | bottom: 0;
26 | right: 0;
27 | height: 20px;
28 | margin-right: 10px;
29 |
30 | .bullet{
31 | width: 10px;
32 | height: 10px;
33 | border-radius: 5px;
34 | background-color: rgba(138, 138, 138, 0.25);
35 | display: inline-block;
36 | margin: 3px 1px;
37 |
38 | &.active{
39 | background-color: @monokaiGreen;
40 | }
41 | }
42 | }
43 | .item {
44 | height: 100%;
45 | background-position: center center;
46 | background-size: cover;
47 | position: relative;
48 | overflow: hidden;
49 | float: left;
50 |
51 | &.active{
52 | .animated{
53 | animation-fill-mode: both;
54 | opacity: 1;
55 | }
56 | }
57 | &:not(.active){
58 | .animated{
59 | animation: none;
60 | opacity: 0;
61 | }
62 | }
63 | }
64 |
65 | .item{
66 | color: @globalTextColor;
67 | background-color: @weuiCellBg;
68 | }
69 |
--------------------------------------------------------------------------------
/src/style/components/toast/style.less:
--------------------------------------------------------------------------------
1 | @import "../base/fn";
2 |
3 | .weui_toast {
4 | position: fixed;
5 | z-index: 3;
6 | width: 7.6em;
7 | min-height: 7.6em;
8 | top: 180px;
9 | left: 50%;
10 | margin-left: -3.8em;
11 | background: rgba(40, 40, 40, 0.75);
12 | text-align: center;
13 | border-radius: 5px;
14 | color: #FFFFFF;
15 | }
16 | .weui_icon_toast {
17 | margin: 22px 0 0;
18 | display: block;
19 | &:before {
20 | content: '\EA08';
21 | color: #FFFFFF;
22 | font-size: 55px;
23 | }
24 | }
25 | .weui_toast_content {
26 | margin: 0 0 15px;
27 | }
28 |
29 |
30 |
31 | // loading toast
32 | .weui_loading_toast{
33 | .weui_toast_content{margin-top:64%;font-size:14px;}
34 | }
35 | .weui_loading{
36 | position: absolute; width: 0px; z-index: 2000000000; left: 50%; top: 38%;
37 | }
--------------------------------------------------------------------------------
/src/style/components/utils/events.jsx:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |
3 | getMousePosition (event) {
4 | return {
5 | x: event.pageX,
6 | y: event.pageY
7 | };
8 | },
9 |
10 | getTouchPosition (event) {
11 | return {
12 | x: event.touches[0].pageX,
13 | y: event.touches[0].pageY
14 | };
15 | },
16 |
17 | pauseEvent (event) {
18 | event.stopPropagation();
19 | event.preventDefault();
20 | event.returnValue = false;
21 | event.cancelBubble = true;
22 | },
23 |
24 | addEventsToDocument (eventMap) {
25 | for (const key in eventMap) {
26 | document.addEventListener(key, eventMap[key], false);
27 | }
28 | },
29 |
30 | removeEventsFromDocument (eventMap) {
31 | for (const key in eventMap) {
32 | document.removeEventListener(key, eventMap[key], false);
33 | }
34 | },
35 |
36 | targetIsDescendant (event, parent) {
37 | let node = event.target;
38 | while (node !== null) {
39 | if (node === parent) return true;
40 | node = node.parentNode;
41 | }
42 | return false;
43 | }
44 |
45 | };
--------------------------------------------------------------------------------
/src/style/components/utils/mobiledetect.jsx:
--------------------------------------------------------------------------------
1 | import MobileDetect from 'mobile-detect';
2 | const md = new MobileDetect(window.navigator.userAgent);
3 |
4 | module.exports = {
5 | iOSVer: md.version('iOS') ? md.version('iOS') : null,
6 | androidVer : md.version('Android') ? md.version('Android') : null,
7 | isIOS : md.os() === 'iOS',
8 | isIOS8 : md.os() === 'iOS' && parseFloat(md.version('iOS')) >= 8 && parseFloat(md.version('iOS')) <= 9,
9 | isIOS9 : md.os() === 'iOS' && parseFloat(md.version('iOS')) >= 9 && parseFloat(md.version('iOS')) <= 10,
10 | isAndroid : md.os() === 'AndroidOS',
11 | isWindow: md.os() === 'WindowsMobileOS' || md.os() === 'WindowsPhoneOS',
12 | isMobile: md.mobile() !== null ? true : false,
13 | isWechat: md.match('MicroMessenger') ? true : false,
14 | wechatVer: md.version('MicroMessenger') ? md.version('MicroMessenger') : null,
15 | };
--------------------------------------------------------------------------------
/tests.webpack.js:
--------------------------------------------------------------------------------
1 | var context = require.context('./src/style/components', true, /(.spec\.cjsx?|.spec\.jsx?)$/);
2 | context.keys().forEach(context);
3 |
4 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | entry: [
6 | 'babel-polyfill',
7 | './src/example/index.js',
8 | 'webpack-dev-server/client?http://localhost:8080'
9 | ],
10 | output: {
11 | path:'./dist',
12 | publicPath: '/',
13 | filename: 'bundle.js'
14 | },
15 | devServer:{
16 | inline:true,
17 | contentBase: './dist'
18 | },
19 | resolve: {
20 | extensions: ['', '.jsx', '.less', '.js', '.json']
21 | },
22 | debug: true,
23 | devtool: 'source-map',
24 | module: {
25 | loaders: [
26 | {
27 | test: /\.jsx?$/,
28 | include: path.join(__dirname, 'src'),
29 | loader: 'babel',
30 | query: {
31 | presets: ['es2015','react']
32 | }
33 | },
34 | {
35 | test: /\.less$/,
36 | loader: "style!css!autoprefixer!less"
37 | },
38 | ]
39 | }
40 | };
41 |
--------------------------------------------------------------------------------
/webpack.config.test.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | const webpack = require('webpack');
3 |
4 | module.exports = {
5 | module: {
6 | loaders: [
7 | {
8 | test: /\.jsx?$/,
9 | include: path.join(__dirname, 'src'),
10 | loader: 'babel',
11 | query: {
12 | presets: ['es2015','react']
13 | }
14 | },
15 | {
16 | test: /\.less$/,
17 | loader: "style!css!autoprefixer!less"
18 | },
19 | ],
20 | noParse: [
21 | /node_modules\/sinon\//,
22 | ]
23 | },
24 | resolve: {
25 | extensions: ['', '.jsx', '.less', '.js', '.json'],
26 | alias: {
27 | 'sinon': 'sinon/pkg/sinon'
28 | }
29 | },
30 | watch: true,
31 | plugins: [
32 | new webpack.DefinePlugin({
33 | 'process.env.NODE_ENV': JSON.stringify('test')
34 | })
35 | ],
36 | externals: {
37 | 'jsdom': 'window',
38 | 'cheerio': 'window',
39 | 'react/lib/ExecutionEnvironment': true
40 | },
41 | devtool: 'inline-source-map', // sourcemap support
42 | debug: true,
43 | };
--------------------------------------------------------------------------------
/webpack.production.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 |
4 | module.exports = {
5 | entry: [
6 | 'babel-polyfill',
7 | './src/example/index.js',
8 | ],
9 | output: {
10 | path:'./dist',
11 | filename: 'bundle.js'
12 | },
13 | resolve: {
14 | extensions: ['', '.jsx', '.less', '.js', '.json']
15 | },
16 | module: {
17 | loaders: [
18 | {
19 | test: /\.jsx?$/,
20 | include: path.join(__dirname, 'src'),
21 | loader: 'babel',
22 | query: {
23 | presets: ['es2015','react']
24 | }
25 | },
26 | {
27 | test: /\.less$/,
28 | loader: "style!css!autoprefixer!less"
29 | },
30 | ]
31 | }
32 | };
33 |
--------------------------------------------------------------------------------
13 | 
16 | 
19 |