Showing
15 changed files
with
551 additions
and
0 deletions
js/coupon/Coupon.js
0 → 100644
1 | +'use strict'; | ||
2 | + | ||
3 | +import React from 'react'; | ||
4 | +import ReactNative, { | ||
5 | + AppRegistry, | ||
6 | + Platform, | ||
7 | + StyleSheet, | ||
8 | + Dimensions, | ||
9 | + TouchableOpacity, | ||
10 | +} from 'react-native'; | ||
11 | + | ||
12 | +import { | ||
13 | + Provider, | ||
14 | + connect | ||
15 | +} from 'react-redux'; | ||
16 | + | ||
17 | +import configureStore from './store/configureStore'; | ||
18 | +import {Record, List, Map} from 'immutable'; | ||
19 | + | ||
20 | +import appInitialState from './reducers/app/appInitialState'; | ||
21 | +import couponInitialState from './reducers/coupon/couponInitialState'; | ||
22 | + | ||
23 | +import CouponCenterContainer from './containers/CouponCenterContainer'; | ||
24 | + | ||
25 | +import { | ||
26 | + setPlatform, | ||
27 | +} from './reducers/app/appActions'; | ||
28 | + | ||
29 | +function getInitialState() { | ||
30 | + const _initState = { | ||
31 | + app: (new appInitialState()), | ||
32 | + coupon: (new couponInitialState()), | ||
33 | + }; | ||
34 | + return _initState; | ||
35 | +} | ||
36 | + | ||
37 | +export default function native(platform) { | ||
38 | + | ||
39 | + let YH_Coupon = React.createClass({ | ||
40 | + | ||
41 | + render() { | ||
42 | + const store = configureStore(getInitialState()); | ||
43 | + store.dispatch(setPlatform(platform)); | ||
44 | + | ||
45 | + return ( | ||
46 | + <Provider store={store}> | ||
47 | + <CouponCenterContainer /> | ||
48 | + </Provider> | ||
49 | + ); | ||
50 | + } | ||
51 | + }); | ||
52 | + | ||
53 | + AppRegistry.registerComponent('YH_Coupon', () => YH_Coupon); | ||
54 | +} | ||
55 | + | ||
56 | +let styles = StyleSheet.create({ | ||
57 | + | ||
58 | +}); |
js/coupon/components/common/BannerView.js
0 → 100644
1 | +import React, {Component} from 'react'; | ||
2 | +import ReactNative from 'react-native'; | ||
3 | + | ||
4 | +let { requireNativeComponent } = ReactNative; | ||
5 | + | ||
6 | +// requireNativeComponent automatically resolves this to "YH_BannerViewManager" | ||
7 | +module.exports = requireNativeComponent('YH_BannerView', null); | ||
8 | + | ||
9 | +class BannerView extends React.Component { | ||
10 | + | ||
11 | + constructor(props) { | ||
12 | + super(props); | ||
13 | + | ||
14 | + this._onSelectBanner = this._onSelectBanner.bind(this); | ||
15 | + } | ||
16 | + | ||
17 | + _onSelectBanner(event: Event) { | ||
18 | + | ||
19 | + if (!this.props.onSelectBanner) { | ||
20 | + return; | ||
21 | + } | ||
22 | + | ||
23 | + this.props.onSelectBanner(event.nativeEvent.url); | ||
24 | + } | ||
25 | + | ||
26 | + render() { | ||
27 | + | ||
28 | + return <YH_BannerView {...this.props} onPress={this._onSelectBanner} />; | ||
29 | + } | ||
30 | +} | ||
31 | + | ||
32 | +BannerView.propTypes = { | ||
33 | + autoLooping: React.PropTypes.bool, | ||
34 | + items: React.PropTypes.arrayOf( | ||
35 | + React.PropTypes.shape({ | ||
36 | + src: React.PropTypes.string.isRequired, | ||
37 | + url: React.PropTypes.string.isRequired, | ||
38 | + }) | ||
39 | + ), | ||
40 | + onSelectBanner: React.PropTypes.func, | ||
41 | +}; | ||
42 | + | ||
43 | +let YH_BannerView = requireNativeComponent('YH_BannerView', BannerView); | ||
44 | + | ||
45 | +module.exports = BannerView; |
js/coupon/components/common/Button.js
0 → 100644
1 | +'use strict' | ||
2 | + | ||
3 | +import React, {Component} from 'react'; | ||
4 | + | ||
5 | +import { | ||
6 | + View, | ||
7 | + Text, | ||
8 | + TouchableWithoutFeedback, | ||
9 | + StyleSheet, | ||
10 | +} from 'react-native'; | ||
11 | + | ||
12 | +export default class Button extends Component { | ||
13 | + | ||
14 | + constructor(props) { | ||
15 | + super(props); | ||
16 | + | ||
17 | + this.state = { | ||
18 | + helighted: false, | ||
19 | + } | ||
20 | + | ||
21 | + this._onPress = this._onPress.bind(this); | ||
22 | + this._onPressIn = this._onPressIn.bind(this); | ||
23 | + this._onPressOut = this._onPressOut.bind(this); | ||
24 | + this._helightedTextStyle = this._helightedTextStyle.bind(this); | ||
25 | + this._selectedTextStyle = this._selectedTextStyle.bind(this); | ||
26 | + | ||
27 | + } | ||
28 | + | ||
29 | + render() { | ||
30 | + | ||
31 | + return ( | ||
32 | + <TouchableWithoutFeedback | ||
33 | + onPress={()=>{this._onPress()}} | ||
34 | + onPressIn={()=>{this._onPressIn()}} | ||
35 | + onPressOut={()=>{this._onPressOut()}} > | ||
36 | + <View style={this.props.containerStyle || styles.container} > | ||
37 | + <Text style={[this._selectedTextStyle(), this._helightedTextStyle()]} > | ||
38 | + {this.props.title} | ||
39 | + </Text> | ||
40 | + </View> | ||
41 | + </TouchableWithoutFeedback> | ||
42 | + ); | ||
43 | + | ||
44 | + } | ||
45 | + | ||
46 | + _helightedTextStyle() { | ||
47 | + if(this.state.helighted) { | ||
48 | + if(this.props.helightedTitleStyle) { | ||
49 | + return this.props.helightedTitleStyle; | ||
50 | + } | ||
51 | + | ||
52 | + if(this.props.selected) { | ||
53 | + return this.props.normalTitleStyle || styles.titleNormal; | ||
54 | + } else { | ||
55 | + return this.props.selectedTitleStyle || styles.titleSelected; | ||
56 | + } | ||
57 | + } else { | ||
58 | + return this._selectedTextStyle(); | ||
59 | + } | ||
60 | + } | ||
61 | + | ||
62 | + _selectedTextStyle() { | ||
63 | + if(this.props.selected) { | ||
64 | + return this.props.selectedTitleStyle || styles.titleSelected; | ||
65 | + } else { | ||
66 | + return this.props.normalTitleStyle || styles.titleNormal; | ||
67 | + } | ||
68 | + } | ||
69 | + | ||
70 | + _onPressIn() { | ||
71 | + this.setState({ | ||
72 | + helighted: !this.state.helighted, | ||
73 | + }); | ||
74 | + } | ||
75 | + | ||
76 | + _onPressOut() { | ||
77 | + this.setState({ | ||
78 | + helighted: !this.state.helighted, | ||
79 | + }); | ||
80 | + } | ||
81 | + | ||
82 | + _onPress() { | ||
83 | + | ||
84 | + if(!this.props.onPress) { | ||
85 | + return; | ||
86 | + } | ||
87 | + | ||
88 | + this.props.onPress(); | ||
89 | + } | ||
90 | + | ||
91 | +}; | ||
92 | + | ||
93 | +Button.propTypes = { | ||
94 | + title: React.PropTypes.string, | ||
95 | + selected: React.PropTypes.bool, | ||
96 | + onPress: React.PropTypes.func, | ||
97 | + selectedTitleStyle: React.PropTypes.any, | ||
98 | + normalTitleStyle: React.PropTypes.any, | ||
99 | + helightedTitleStyle: React.PropTypes.any, | ||
100 | + containerStyle: React.PropTypes.any, | ||
101 | +}; | ||
102 | + | ||
103 | +let styles = StyleSheet.create({ | ||
104 | + container: { | ||
105 | + width: 44, | ||
106 | + flex: 1, | ||
107 | + justifyContent: 'center', | ||
108 | + alignItems: 'center', | ||
109 | + }, | ||
110 | + titleHelighted: { | ||
111 | + color: 'black', | ||
112 | + fontSize: 15, | ||
113 | + }, | ||
114 | + titleNormal: { | ||
115 | + color: '#b0b0b0', | ||
116 | + fontSize: 15, | ||
117 | + }, | ||
118 | + titleSelected: { | ||
119 | + color: 'black', | ||
120 | + fontSize: 15, | ||
121 | + }, | ||
122 | +}); |
js/coupon/components/coupon/CouponCenter.js
0 → 100644
1 | +'use strict'; | ||
2 | + | ||
3 | +import React, {Component} from 'react'; | ||
4 | +import ReactNative, { | ||
5 | + View, | ||
6 | + Text, | ||
7 | + StyleSheet, | ||
8 | + Dimensions, | ||
9 | +} from 'react-native'; | ||
10 | + | ||
11 | +export default class CouponCenter extends Component { | ||
12 | + | ||
13 | + constructor(props) { | ||
14 | + super(props); | ||
15 | + | ||
16 | + | ||
17 | + } | ||
18 | + | ||
19 | + componentDidMount() { | ||
20 | + | ||
21 | + } | ||
22 | + | ||
23 | + | ||
24 | + render() { | ||
25 | + | ||
26 | + return ( | ||
27 | + <View/> | ||
28 | + ); | ||
29 | + } | ||
30 | +} | ||
31 | + | ||
32 | +let styles = StyleSheet.create({ | ||
33 | + container: { | ||
34 | + flex: 1, | ||
35 | + backgroundColor: '#f0f0f0', | ||
36 | + }, | ||
37 | +}); |
js/coupon/constants/actionTypes.js
0 → 100644
1 | +'use strict' | ||
2 | + | ||
3 | +import React, {Component} from 'react'; | ||
4 | +import { | ||
5 | + StyleSheet, | ||
6 | + Dimensions, | ||
7 | + Platform, | ||
8 | + View, | ||
9 | + NativeModules, | ||
10 | + InteractionManager, | ||
11 | + NativeAppEventEmitter, | ||
12 | +} from 'react-native' | ||
13 | + | ||
14 | +import {bindActionCreators} from 'redux'; | ||
15 | +import {connect} from 'react-redux'; | ||
16 | +import {Map} from 'immutable'; | ||
17 | +import * as qrcodeActions from '../reducers/qrcode/qrcodeActions'; | ||
18 | +import CouponCenter from '../components/coupon/CouponCenter'; | ||
19 | + | ||
20 | +const actions = [ | ||
21 | + qrcodeActions, | ||
22 | +]; | ||
23 | + | ||
24 | +function mapStateToProps(state) { | ||
25 | + return { | ||
26 | + ...state | ||
27 | + }; | ||
28 | +} | ||
29 | + | ||
30 | +function mapDispatchToProps(dispatch) { | ||
31 | + | ||
32 | + const creators = Map() | ||
33 | + .merge(...actions) | ||
34 | + .filter(value => typeof value === 'function') | ||
35 | + .toObject(); | ||
36 | + | ||
37 | + return { | ||
38 | + actions: bindActionCreators(creators, dispatch), | ||
39 | + dispatch | ||
40 | + }; | ||
41 | +} | ||
42 | + | ||
43 | +class CouponCenterContainer extends Component { | ||
44 | + constructor(props) { | ||
45 | + super(props); | ||
46 | + | ||
47 | + } | ||
48 | + | ||
49 | + componentDidMount() { | ||
50 | + | ||
51 | + } | ||
52 | + | ||
53 | + componentWillUnmount() { | ||
54 | + | ||
55 | + } | ||
56 | + | ||
57 | + | ||
58 | + | ||
59 | + render() { | ||
60 | + | ||
61 | + return ( | ||
62 | + <View style={styles.container}> | ||
63 | + <CouponCenter/> | ||
64 | + </View> | ||
65 | + ); | ||
66 | + } | ||
67 | +} | ||
68 | + | ||
69 | +let styles = StyleSheet.create({ | ||
70 | + container: { | ||
71 | + flex: 1, | ||
72 | + }, | ||
73 | + | ||
74 | +}); | ||
75 | + | ||
76 | +export default connect(mapStateToProps, mapDispatchToProps)(CouponCenterContainer); |
js/coupon/reducers/app/appActions.js
0 → 100755
1 | +'use strict'; | ||
2 | + | ||
3 | +import ReactNative from 'react-native'; | ||
4 | + | ||
5 | +const { | ||
6 | + SET_PLATFORM, | ||
7 | + SET_CHANNEL, | ||
8 | + | ||
9 | +} = require('../../constants/actionTypes').default; | ||
10 | + | ||
11 | +export function setPlatform(platform) { | ||
12 | + return { | ||
13 | + type: SET_PLATFORM, | ||
14 | + payload: platform | ||
15 | + }; | ||
16 | +} | ||
17 | + | ||
18 | +export function setChannel(channel) { | ||
19 | + return { | ||
20 | + type: SET_CHANNEL, | ||
21 | + payload: channel | ||
22 | + }; | ||
23 | +} |
js/coupon/reducers/app/appInitialState.js
0 → 100755
js/coupon/reducers/app/appReducer.js
0 → 100755
1 | +'use strict'; | ||
2 | + | ||
3 | +import InitialState from './appInitialState'; | ||
4 | + | ||
5 | +const { | ||
6 | + SET_PLATFORM, | ||
7 | + SET_CHANNEL, | ||
8 | +} = require('../../constants/actionTypes').default; | ||
9 | + | ||
10 | +const initialState = new InitialState; | ||
11 | + | ||
12 | +export default function appReducer(state = initialState, action) { | ||
13 | + if (!(state instanceof InitialState)) return initialState.merge(state); | ||
14 | + | ||
15 | + switch (action.type) { | ||
16 | + case SET_PLATFORM: | ||
17 | + return state.set('platform', action.payload); | ||
18 | + case SET_CHANNEL: | ||
19 | + return state.set('channel', action.payload); | ||
20 | + } | ||
21 | + | ||
22 | + return state; | ||
23 | +} |
js/coupon/reducers/coupon/couponActions.js
0 → 100644
1 | +'use strict'; | ||
2 | + | ||
3 | +import ReactNative from 'react-native'; | ||
4 | +import CouponService from '../../services/CouponService'; | ||
5 | + | ||
6 | +const { | ||
7 | + JUMP_WITH_URL, | ||
8 | +} = require('../../constants/actionTypes').default; | ||
9 | + | ||
10 | + | ||
11 | +export function jumpWithUrl(url) { | ||
12 | + if (!url) { | ||
13 | + __DEV__ && console.log('Illegal url'); | ||
14 | + return; | ||
15 | + } | ||
16 | + | ||
17 | + ReactNative.NativeModules.YH_PlustarHelper.jumpWithUrl(url); | ||
18 | + return { | ||
19 | + type: JUMP_WITH_URL, | ||
20 | + payload: url | ||
21 | + }; | ||
22 | +} |
1 | +'use strict'; | ||
2 | + | ||
3 | +import {Record, List, Map} from 'immutable'; | ||
4 | + | ||
5 | +let InitialState = Record({ | ||
6 | + activeTab: 0, | ||
7 | + gender: -1, | ||
8 | + 0: new (Record({ | ||
9 | + isFetching: false, | ||
10 | + error: null, | ||
11 | + head: List(), | ||
12 | + foot: List(), | ||
13 | + list: List(), | ||
14 | + })), | ||
15 | + 1: new (Record({ | ||
16 | + isFetching: false, | ||
17 | + error: null, | ||
18 | + head: List(), | ||
19 | + foot: List(), | ||
20 | + list: List(), | ||
21 | + })), | ||
22 | + segment: null, | ||
23 | +}); | ||
24 | + | ||
25 | +export default InitialState; |
js/coupon/reducers/coupon/couponReducer.js
0 → 100644
1 | +'use strict'; | ||
2 | + | ||
3 | +import InitialState from './couponInitialState'; | ||
4 | +import Immutable, {Map} from 'immutable'; | ||
5 | + | ||
6 | +const { | ||
7 | + JUMP_WITH_URL, | ||
8 | +} = require('../../constants/actionTypes').default; | ||
9 | + | ||
10 | +const initialState = new InitialState; | ||
11 | + | ||
12 | +export default function couponReducer(state=initialState, action) { | ||
13 | + switch(action.type) { | ||
14 | + | ||
15 | + } | ||
16 | + | ||
17 | + return state; | ||
18 | +} |
js/coupon/reducers/index.js
0 → 100644
js/coupon/services/CouponService.js
0 → 100644
1 | +'use strict'; | ||
2 | + | ||
3 | +import Request from '../../common/services/Request'; | ||
4 | + | ||
5 | +export default class CouponService { | ||
6 | + | ||
7 | + constructor () { | ||
8 | + let baseURL = 'http://service.yoho.cn'; | ||
9 | + this.api = new Request(baseURL); | ||
10 | + } | ||
11 | + | ||
12 | + async fetchList(brand_type, options) { | ||
13 | + return await this.api.get({ | ||
14 | + url: '/guang/api/v3/plustar/getlist', | ||
15 | + body: { | ||
16 | + brand_type, | ||
17 | + ...options, | ||
18 | + } | ||
19 | + }) | ||
20 | + .then((json) => { | ||
21 | + return json; | ||
22 | + }) | ||
23 | + .catch((error) => { | ||
24 | + throw(error); | ||
25 | + }); | ||
26 | + } | ||
27 | + | ||
28 | +} |
js/coupon/store/configureStore.js
0 → 100644
1 | +/** | ||
2 | + * # configureStore.js | ||
3 | + * | ||
4 | + * A Redux boilerplate setup | ||
5 | + * | ||
6 | + */ | ||
7 | +'use strict'; | ||
8 | + | ||
9 | +/** | ||
10 | + * ## Imports | ||
11 | + * | ||
12 | + * redux functions | ||
13 | + */ | ||
14 | +import { createStore, applyMiddleware } from 'redux'; | ||
15 | +import thunk from 'redux-thunk'; | ||
16 | +import createLogger from 'redux-logger'; | ||
17 | + | ||
18 | +/** | ||
19 | +* ## Reducer | ||
20 | +* The reducer contains the 4 reducers from | ||
21 | +* device, global, auth, profile | ||
22 | +*/ | ||
23 | +import reducer from '../reducers'; | ||
24 | + | ||
25 | +const logger = createLogger({ | ||
26 | + predicate: (getState, action) => process.env.NODE_ENV === `development` | ||
27 | +}); | ||
28 | + | ||
29 | +/** | ||
30 | + * ## creatStoreWithMiddleware | ||
31 | + * Like the name... | ||
32 | + */ | ||
33 | +const createStoreWithMiddleware = applyMiddleware( | ||
34 | + thunk, | ||
35 | + logger | ||
36 | +)(createStore); | ||
37 | + | ||
38 | +/** | ||
39 | + * ## configureStore | ||
40 | + * @param {Object} the state with for keys: | ||
41 | + * device, global, auth, profile | ||
42 | + * | ||
43 | + */ | ||
44 | +export default function configureStore(initialState) { | ||
45 | + return createStoreWithMiddleware(reducer, initialState); | ||
46 | +}; |
-
Please register or login to post a comment