152 |
157 |
177 |
178 |
135 | {this.props.children}
136 |
137 | )
138 | }
139 | }
--------------------------------------------------------------------------------
/src/page/common/components/scroll/index.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lcxfs1991/steamer-react/ad7d574bd66b56e7ac8ff9cfe4e0e230338b48f9/src/page/common/components/scroll/index.scss
--------------------------------------------------------------------------------
/src/page/common/components/spinner/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import pureRender from 'pure-render-decorator';
3 | var spin = require('spin');
4 |
5 | require('./index.scss');
6 |
7 | @pureRender
8 | export default class Spinner extends Component {
9 |
10 | constructor(props, context) {
11 | super(props, context);
12 | this.state = {
13 |
14 | };
15 | }
16 |
17 | componentWillMount() {
18 |
19 | }
20 |
21 | componentDidMount() {
22 | var opts = {
23 | lines: 12 // The number of lines to draw
24 | , length: 3 // The length of each line
25 | , width: 2 // The line thickness
26 | , radius: 6 // The radius of the inner circle
27 | , scale: 1.0 // Scales overall size of the spinner
28 | , corners: 1 // Roundness (0..1)
29 | , color: '#777' // #rgb or #rrggbb
30 | , opacity: 1/4 // Opacity of the lines
31 | , rotate: 0 // Rotation offset
32 | , direction: 1 // 1: clockwise, -1: counterclockwise
33 | , speed: 1 // Rounds per second
34 | , trail: 100 // Afterglow percentage
35 | , fps: 20 // Frames per second when using setTimeout()
36 | , zIndex: 2e9 // Use a high z-index by default
37 | , className: 'spin' // CSS class to assign to the element
38 | , top: '50%' // center vertically
39 | , left: '50%' // center horizontally
40 | , shadow: false // Whether to render a shadow
41 | , hwaccel: false // Whether to use hardware acceleration (might be buggy)
42 | , position: 'absolute' // Element positioning
43 | };
44 | var target = document.getElementById('spin');
45 | var spinner = new spin(opts).spin(target);
46 | }
47 |
48 | render() {
49 |
50 | console.dev('render spinner');
51 |
52 | var isShow = this.props.isShow || false;
53 | var spinStyle = {
54 | display: (isShow) ? 'block' : 'none'
55 | };
56 |
57 | return (
58 |
59 | )
60 | }
61 | }
--------------------------------------------------------------------------------
/src/page/common/components/spinner/index.scss:
--------------------------------------------------------------------------------
1 | #spin {
2 | position: fixed;
3 | top: 0;
4 | bottom: 0;
5 | left: 0;
6 | right: 0;
7 | margin: auto;
8 | }
--------------------------------------------------------------------------------
/src/page/common/components/spinner/spinnerComp.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import pureRender from 'pure-render-decorator';
3 | var spin = require('spin');
4 |
5 | require('./index.scss');
6 |
7 | @pureRender
8 | export default class Spinner extends Component {
9 |
10 | constructor(props, context) {
11 | super(props, context);
12 | this.state = {
13 |
14 | };
15 | }
16 |
17 | componentWillMount() {
18 |
19 | }
20 |
21 | componentDidMount() {
22 | var opts = {
23 | lines: 12 // The number of lines to draw
24 | , length: 3 // The length of each line
25 | , width: 2 // The line thickness
26 | , radius: 6 // The radius of the inner circle
27 | , scale: 1.0 // Scales overall size of the spinner
28 | , corners: 1 // Roundness (0..1)
29 | , color: '#777' // #rgb or #rrggbb
30 | , opacity: 1/4 // Opacity of the lines
31 | , rotate: 0 // Rotation offset
32 | , direction: 1 // 1: clockwise, -1: counterclockwise
33 | , speed: 1 // Rounds per second
34 | , trail: 100 // Afterglow percentage
35 | , fps: 20 // Frames per second when using setTimeout()
36 | , zIndex: 2e9 // Use a high z-index by default
37 | , className: 'spin' // CSS class to assign to the element
38 | , top: '50%' // center vertically
39 | , left: '50%' // center horizontally
40 | , shadow: false // Whether to render a shadow
41 | , hwaccel: false // Whether to use hardware acceleration (might be buggy)
42 | , position: 'absolute' // Element positioning
43 | };
44 | var target = document.getElementById('spin');
45 | var spinner = new spin(opts).spin(target);
46 | }
47 |
48 | render() {
49 |
50 | console.log('render spinner');
51 |
52 | var isShow = this.props.isShow || false;
53 | var spinStyle = {
54 | display: (isShow) ? 'block' : 'none'
55 | };
56 |
57 | return (
58 |
59 | )
60 | }
61 | }
--------------------------------------------------------------------------------
/src/page/common/components/touch/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import merge from 'lodash.merge';
3 | import pureRender from 'pure-render-decorator';
4 |
5 | let ua = '';
6 | if (!isNode) {
7 | ua = navigator.userAgent.toLowerCase();
8 | }
9 | let _platform = function(os) {
10 | let ver = ('' + (new RegExp(os + '(\\d+((\\.|_)\\d+)*)').exec(ua) || [,0])[1]).replace(/_/g, '.');
11 | // undefined < 3 === false, but null < 3 === true
12 | return parseFloat(ver) || undefined;
13 | };
14 | let os = {
15 | ios: _platform('os '),
16 | android: _platform('android[/ ]'),
17 | pc : !_platform('os ') && !_platform('android[/ ]')
18 | };
19 |
20 | @pureRender
21 | export default class Touch extends Component {
22 |
23 | constructor(props, context) {
24 | super(props, context);
25 | this.state = {};
26 |
27 | this.touchInfo = {
28 | x: null,
29 | y: null,
30 | x2: null,
31 | y2: null,
32 | start: 0,
33 | last: 0,
34 | isDoubleTap: false,
35 | touchTimeout: null,
36 | tapTimeout: null,
37 | swipeTimeout: null,
38 | longTapTimeout: null
39 | };
40 |
41 | if (isNode) {
42 | this.devicePixelRatio = 1;
43 | } else {
44 | this.devicePixelRatio = window.devicePixelRatio || 1;
45 | }
46 | this.longTapDelay = 750;
47 | this.maxTapAbsX = 30;
48 | this.maxTapAbsY = os.android ? 5 : 30;
49 |
50 | this.getDefaultTouchInfo = this.getDefaultTouchInfo.bind(this);
51 | this.longTap = this.longTap.bind(this);
52 | this.cancelLongTap = this.cancelLongTap.bind(this);
53 | this.cancelAll = this.cancelAll.bind(this);
54 |
55 | this.calculatePos = this.calculatePos.bind(this);
56 | this.touchStart = this.touchStart.bind(this);
57 | this.touchMove = this.touchMove.bind(this);
58 | this.touchEnd = this.touchEnd.bind(this);
59 | }
60 |
61 | componentWillReceiveProps() {
62 | }
63 |
64 | componentDidMount() {
65 | window.addEventListener('scroll', this.cancelAll, false);
66 | }
67 |
68 | componentWillUnmount() {
69 | window.removeEventListener('scroll', this.cancelAll, false);
70 | }
71 |
72 | getDefaultTouchInfo() {
73 | return {
74 | x: null,
75 | y: null,
76 | x2: null,
77 | y2: null,
78 | start: 0,
79 | last: 0,
80 | isDoubleTap: false,
81 | touchTimeout: null,
82 | tapTimeout: null,
83 | swipeTimeout: null,
84 | longTapTimeout: null
85 | };
86 | }
87 |
88 | longTap() {
89 | this.touchInfo.longTapTimeout = null;
90 |
91 | if (this.touchInfo.last) {
92 | this.props.onLongTap && this.props.onLongTap();
93 | this.touchInfo = this.getDefaultTouchInfo();
94 | }
95 | }
96 |
97 | cancelLongTap() {
98 | this.touchInfo.longTapTimeout && clearTimeout(this.touchInfo.longTapTimeout);
99 |
100 | this.touchInfo.longTapTimeout = null;
101 | }
102 |
103 | cancelAll() {
104 | this.touchInfo.touchTimeout && clearTimeout(this.touchInfo.touchTimeout);
105 | this.touchInfo.tapTimeout && clearTimeout(this.touchInfo.tapTimeout);
106 | this.touchInfo.swipeTimeout && clearTimeout(this.touchInfo.swipeTimeout);
107 | this.touchInfo.longTapTimeout && clearTimeout(this.touchInfo.longTapTimeout);
108 |
109 | this.touchInfo = this.getDefaultTouchInfo();
110 | }
111 |
112 | calculatePos(e) {
113 | var x = e ? e.touches[0].pageX : this.touchInfo.x2;
114 | var y = e ? e.touches[0].pageY : this.touchInfo.y2;
115 |
116 | if (x === null && y === null) {
117 | return {
118 | deltaX: 0,
119 | deltaY: 0,
120 | absX: 0,
121 | absY: 0
122 | }
123 | }
124 |
125 | var xd = this.touchInfo.x - x;
126 | var yd = this.touchInfo.y - y;
127 |
128 | var axd = Math.abs(xd);
129 | var ayd = Math.abs(yd);
130 |
131 | return {
132 | deltaX: xd,
133 | deltaY: yd,
134 | absX: axd,
135 | absY: ayd
136 | };
137 | }
138 |
139 | touchStart(e) {
140 | if (e.touches.length > 1) {
141 | return;
142 | }
143 |
144 | let firstTouch = e.touches[0];
145 |
146 | if (e.touches && e.touches.length === 1 && this.touchInfo.x2) {
147 | // Clear out touch movement data if we have it sticking around
148 | // This can occur if touchcancel doesn't fire due to preventDefault, etc.
149 | merge(this.touchInfo, {
150 | x2: null,
151 | y2: null
152 | });
153 | }
154 |
155 | let now = Date.now(),
156 | delta = now - (this.touchInfo.last || now);
157 |
158 | this.touchInfo.touchTimeout && clearTimeout(this.touchInfo.touchTimeout);
159 |
160 | if (delta > 0 && delta <= 250) {
161 | merge(this.touchInfo, {
162 | isDoubleTap: true
163 | });
164 | }
165 |
166 | merge(this.touchInfo, {
167 | start: now,
168 | last: now,
169 | x: firstTouch.pageX,
170 | y: firstTouch.pageY,
171 | longTapTimeout: setTimeout(this.longTap, this.longTapDelay)
172 | });
173 | }
174 |
175 | touchMove(e) {
176 | this.cancelLongTap();
177 |
178 | merge(this.touchInfo, {
179 | x2: e.touches[0].pageX,
180 | y2: e.touches[0].pageY
181 | });
182 |
183 | let pos = this.calculatePos(e);
184 |
185 | if (pos.absX > Math.round(20 / this.devicePixelRatio) && pos.absX > pos.absY) {
186 | e.preventDefault();
187 | }
188 | }
189 |
190 | touchEnd(e) {
191 | this.cancelLongTap();
192 |
193 | let pos = this.calculatePos();
194 |
195 | // swipe
196 | if ((this.touchInfo.x2 && pos.absX > this.maxTapAbsX) ||
197 | (this.touchInfo.y2 && pos.absY > this.maxTapAbsY)) {
198 | let time = Date.now() - this.touchInfo.start,
199 | velocity = Math.sqrt(pos.absX * pos.absX + pos.absY * pos.absY) / time,
200 | isFlick = velocity > this.props.flickThreshold;
201 |
202 | e.persist();
203 | merge(this.touchInfo, {
204 | swipeTimeout: setTimeout(() => {
205 | this.props.onSwipe && this.props.onSwipe(e, pos.deltaX, pos.deltaY, isFlick);
206 |
207 | if (pos.absX > pos.absY) {
208 | if (pos.deltaX > 0) {
209 | this.props.onSwipeLeft && this.props.onSwipeLeft(e, pos.deltaX, isFlick);
210 | } else {
211 | this.props.onSwipeRight && this.props.onSwipeRight(e, pos.deltaX, isFlick);
212 | }
213 | } else {
214 | if (pos.deltaY > 0) {
215 | this.props.onSwipeUp && this.props.onSwipeUp(e, pos.deltaY, isFlick);
216 | } else {
217 | this.props.onSwipeDown && this.props.onSwipeDown(e, pos.deltaY, isFlick);
218 | }
219 | }
220 |
221 | this.touchInfo = this.getDefaultTouchInfo();
222 | }, 0)
223 | });
224 | }
225 | // normal tap
226 | else if (this.touchInfo.last) {
227 | // don't fire tap when delta position changed by more than 30 pixels,
228 | // for instance when moving to a point and back to origin
229 | if (pos.absX < this.maxTapAbsX && pos.absY < this.maxTapAbsY) {
230 | // delay by one tick so we can cancel the 'tap' event if 'scroll' fires
231 | // ('tap' fires before 'scroll')
232 | e.persist();
233 | merge(this.touchInfo, {
234 | tapTimeout: setTimeout(() => {
235 | // trigger universal 'tap' with the option to cancelTouch()
236 | // (cancelTouch cancels processing of single vs double taps for faster 'tap' response)
237 | this.props.onTap && this.props.onTap(e);
238 |
239 | // trigger double tap immediately
240 | if (this.touchInfo.isDoubleTap) {
241 | this.props.onDoubleTap && this.props.onDoubleTap(e);
242 | this.touchInfo = this.getDefaultTouchInfo();
243 | }
244 |
245 | // trigger single tap after 250ms of inactivity
246 | else {
247 | merge(this.touchInfo, {
248 | touchTimeout: setTimeout(() => {
249 | merge(this.touchInfo, {
250 | touchTimeout: null
251 | });
252 | this.props.onSingleTap && this.props.onSingleTap(e);
253 | this.touchInfo = this.getDefaultTouchInfo();
254 | }, 250)
255 | });
256 | }
257 | }, 0)
258 | });
259 | } else {
260 | this.touchInfo = this.getDefaultTouchInfo();
261 | }
262 | }
263 | }
264 |
265 | render() {
266 | // console.log('render Touch');
267 | return (
268 |
273 | {this.props.children}
274 |
275 | )
276 | }
277 | }
278 |
279 | Touch.propTypes = {
280 | onTap: PropTypes.func,
281 | onSingleTap: PropTypes.func,
282 | onDoubleTap: PropTypes.func,
283 | onLongTap: PropTypes.func,
284 | onSwipe: PropTypes.func,
285 | onSwipeUp: PropTypes.func,
286 | onSwipeRight: PropTypes.func,
287 | onSwipeDown: PropTypes.func,
288 | onSwipeLeft: PropTypes.func
289 | };
290 | Touch.defaultProps = {
291 | flickThreshold: 0.6
292 | };
--------------------------------------------------------------------------------
/src/page/common/components/touch/touchComp.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import objectAssign from 'object-assign';
3 | import pureRender from 'pure-render-decorator';
4 |
5 | let ua = '';
6 | if (!isNode) {
7 | ua = navigator.userAgent.toLowerCase();
8 | }
9 | let _platform = function(os) {
10 | let ver = ('' + (new RegExp(os + '(\\d+((\\.|_)\\d+)*)').exec(ua) || [,0])[1]).replace(/_/g, '.');
11 | // undefined < 3 === false, but null < 3 === true
12 | return parseFloat(ver) || undefined;
13 | };
14 | let os = {
15 | ios: _platform('os '),
16 | android: _platform('android[/ ]'),
17 | pc : !_platform('os ') && !_platform('android[/ ]')
18 | };
19 |
20 | @pureRender
21 | export default class Touch extends Component {
22 |
23 | constructor(props, context) {
24 | super(props, context);
25 | this.state = {};
26 |
27 | this.touchInfo = {
28 | x: null,
29 | y: null,
30 | x2: null,
31 | y2: null,
32 | start: 0,
33 | last: 0,
34 | isDoubleTap: false,
35 | touchTimeout: null,
36 | tapTimeout: null,
37 | swipeTimeout: null,
38 | longTapTimeout: null
39 | };
40 |
41 | if (isNode) {
42 | this.devicePixelRatio = 1;
43 | } else {
44 | this.devicePixelRatio = window.devicePixelRatio || 1;
45 | }
46 | this.longTapDelay = 750;
47 | this.maxTapAbsX = 30;
48 | this.maxTapAbsY = os.android ? 5 : 30;
49 |
50 | this.getDefaultTouchInfo = this.getDefaultTouchInfo.bind(this);
51 | this.longTap = this.longTap.bind(this);
52 | this.cancelLongTap = this.cancelLongTap.bind(this);
53 | this.cancelAll = this.cancelAll.bind(this);
54 |
55 | this.calculatePos = this.calculatePos.bind(this);
56 | this.touchStart = this.touchStart.bind(this);
57 | this.touchMove = this.touchMove.bind(this);
58 | this.touchEnd = this.touchEnd.bind(this);
59 | }
60 |
61 | componentWillReceiveProps() {
62 | }
63 |
64 | componentDidMount() {
65 | window.addEventListener('scroll', this.cancelAll, false);
66 | }
67 |
68 | componentWillUnmount() {
69 | window.removeEventListener('scroll', this.cancelAll, false);
70 | }
71 |
72 | getDefaultTouchInfo() {
73 | return {
74 | x: null,
75 | y: null,
76 | x2: null,
77 | y2: null,
78 | start: 0,
79 | last: 0,
80 | isDoubleTap: false,
81 | touchTimeout: null,
82 | tapTimeout: null,
83 | swipeTimeout: null,
84 | longTapTimeout: null
85 | };
86 | }
87 |
88 | longTap() {
89 | this.touchInfo.longTapTimeout = null;
90 |
91 | if (this.touchInfo.last) {
92 | this.props.onLongTap && this.props.onLongTap();
93 | this.touchInfo = this.getDefaultTouchInfo();
94 | }
95 | }
96 |
97 | cancelLongTap() {
98 | this.touchInfo.longTapTimeout && clearTimeout(this.touchInfo.longTapTimeout);
99 |
100 | this.touchInfo.longTapTimeout = null;
101 | }
102 |
103 | cancelAll() {
104 | this.touchInfo.touchTimeout && clearTimeout(this.touchInfo.touchTimeout);
105 | this.touchInfo.tapTimeout && clearTimeout(this.touchInfo.tapTimeout);
106 | this.touchInfo.swipeTimeout && clearTimeout(this.touchInfo.swipeTimeout);
107 | this.touchInfo.longTapTimeout && clearTimeout(this.touchInfo.longTapTimeout);
108 |
109 | this.touchInfo = this.getDefaultTouchInfo();
110 | }
111 |
112 | calculatePos(e) {
113 | var x = e ? e.touches[0].pageX : this.touchInfo.x2;
114 | var y = e ? e.touches[0].pageY : this.touchInfo.y2;
115 |
116 | if (x === null && y === null) {
117 | return {
118 | deltaX: 0,
119 | deltaY: 0,
120 | absX: 0,
121 | absY: 0
122 | }
123 | }
124 |
125 | var xd = this.touchInfo.x - x;
126 | var yd = this.touchInfo.y - y;
127 |
128 | var axd = Math.abs(xd);
129 | var ayd = Math.abs(yd);
130 |
131 | return {
132 | deltaX: xd,
133 | deltaY: yd,
134 | absX: axd,
135 | absY: ayd
136 | };
137 | }
138 |
139 | touchStart(e) {
140 | if (e.touches.length > 1) {
141 | return;
142 | }
143 |
144 | let firstTouch = e.touches[0];
145 |
146 | if (e.touches && e.touches.length === 1 && this.touchInfo.x2) {
147 | // Clear out touch movement data if we have it sticking around
148 | // This can occur if touchcancel doesn't fire due to preventDefault, etc.
149 | objectAssign(this.touchInfo, {
150 | x2: null,
151 | y2: null
152 | });
153 | }
154 |
155 | let now = Date.now(),
156 | delta = now - (this.touchInfo.last || now);
157 |
158 | this.touchInfo.touchTimeout && clearTimeout(this.touchInfo.touchTimeout);
159 |
160 | if (delta > 0 && delta <= 250) {
161 | objectAssign(this.touchInfo, {
162 | isDoubleTap: true
163 | });
164 | }
165 |
166 | objectAssign(this.touchInfo, {
167 | start: now,
168 | last: now,
169 | x: firstTouch.pageX,
170 | y: firstTouch.pageY,
171 | longTapTimeout: setTimeout(this.longTap, this.longTapDelay)
172 | });
173 | }
174 |
175 | touchMove(e) {
176 | this.cancelLongTap();
177 |
178 | objectAssign(this.touchInfo, {
179 | x2: e.touches[0].pageX,
180 | y2: e.touches[0].pageY
181 | });
182 |
183 | let pos = this.calculatePos(e);
184 |
185 | if (pos.absX > Math.round(20 / this.devicePixelRatio) && pos.absX > pos.absY) {
186 | e.preventDefault();
187 | }
188 | }
189 |
190 | touchEnd(e) {
191 | this.cancelLongTap();
192 |
193 | let pos = this.calculatePos();
194 |
195 | // swipe
196 | if ((this.touchInfo.x2 && pos.absX > this.maxTapAbsX) ||
197 | (this.touchInfo.y2 && pos.absY > this.maxTapAbsY)) {
198 | let time = Date.now() - this.touchInfo.start,
199 | velocity = Math.sqrt(pos.absX * pos.absX + pos.absY * pos.absY) / time,
200 | isFlick = velocity > this.props.flickThreshold;
201 |
202 | e.persist();
203 | objectAssign(this.touchInfo, {
204 | swipeTimeout: setTimeout(() => {
205 | this.props.onSwipe && this.props.onSwipe(e, pos.deltaX, pos.deltaY, isFlick);
206 |
207 | if (pos.absX > pos.absY) {
208 | if (pos.deltaX > 0) {
209 | this.props.onSwipeLeft && this.props.onSwipeLeft(e, pos.deltaX, isFlick);
210 | } else {
211 | this.props.onSwipeRight && this.props.onSwipeRight(e, pos.deltaX, isFlick);
212 | }
213 | } else {
214 | if (pos.deltaY > 0) {
215 | this.props.onSwipeUp && this.props.onSwipeUp(e, pos.deltaY, isFlick);
216 | } else {
217 | this.props.onSwipeDown && this.props.onSwipeDown(e, pos.deltaY, isFlick);
218 | }
219 | }
220 |
221 | this.touchInfo = this.getDefaultTouchInfo();
222 | }, 0)
223 | });
224 | }
225 | // normal tap
226 | else if (this.touchInfo.last) {
227 | // don't fire tap when delta position changed by more than 30 pixels,
228 | // for instance when moving to a point and back to origin
229 | if (pos.absX < this.maxTapAbsX && pos.absY < this.maxTapAbsY) {
230 | // delay by one tick so we can cancel the 'tap' event if 'scroll' fires
231 | // ('tap' fires before 'scroll')
232 | e.persist();
233 | objectAssign(this.touchInfo, {
234 | tapTimeout: setTimeout(() => {
235 | // trigger universal 'tap' with the option to cancelTouch()
236 | // (cancelTouch cancels processing of single vs double taps for faster 'tap' response)
237 | this.props.onTap && this.props.onTap(e);
238 |
239 | // trigger double tap immediately
240 | if (this.touchInfo.isDoubleTap) {
241 | this.props.onDoubleTap && this.props.onDoubleTap(e);
242 | this.touchInfo = this.getDefaultTouchInfo();
243 | }
244 |
245 | // trigger single tap after 250ms of inactivity
246 | else {
247 | objectAssign(this.touchInfo, {
248 | touchTimeout: setTimeout(() => {
249 | objectAssign(this.touchInfo, {
250 | touchTimeout: null
251 | });
252 | this.props.onSingleTap && this.props.onSingleTap(e);
253 | this.touchInfo = this.getDefaultTouchInfo();
254 | }, 250)
255 | });
256 | }
257 | }, 0)
258 | });
259 | } else {
260 | this.touchInfo = this.getDefaultTouchInfo();
261 | }
262 | }
263 | }
264 |
265 | render() {
266 | // console.log('render Touch');
267 | return (
268 |
273 | {this.props.children}
274 |
275 | )
276 | }
277 | }
278 |
279 | Touch.propTypes = {
280 | onTap: PropTypes.func,
281 | onSingleTap: PropTypes.func,
282 | onDoubleTap: PropTypes.func,
283 | onLongTap: PropTypes.func,
284 | onSwipe: PropTypes.func,
285 | onSwipeUp: PropTypes.func,
286 | onSwipeRight: PropTypes.func,
287 | onSwipeDown: PropTypes.func,
288 | onSwipeLeft: PropTypes.func
289 | };
290 | Touch.defaultProps = {
291 | flickThreshold: 0.6
292 | };
--------------------------------------------------------------------------------
/src/page/common/constants/cgiPath.js:
--------------------------------------------------------------------------------
1 | const baseUrl = 'http://openapi.inews.qq.com/',
2 | baseUrl1 = 'http://view.inews.qq.com/',
3 | baseUrl2 = 'http://localhost:3001/api/'
4 |
5 | const CGI_PATH = {
6 | // 'GET_TOP_NEWS': baseUrl + 'getQQNewsIndexAndItems',
7 | 'GET_TOP_NEWS': baseUrl2 + 'getQQNewsIndexAndItems',
8 | 'GET_NEWS_LIST': baseUrl + 'getQQNewsNormalContent',
9 | 'GET_COMMENT_LIST': baseUrl1 + 'getQQNewsComment',
10 | 'GET_NEWS_DETAIL': baseUrl2 + 'getQQNewsDetail',
11 | };
12 |
13 | module.exports = CGI_PATH;
--------------------------------------------------------------------------------
/src/page/common/constants/constants.js:
--------------------------------------------------------------------------------
1 |
2 | export const API_REQUEST = 'API_REQUEST';
3 | export const GET_NEWS_LIST = 'GET_NEWS_LIST';
4 | export const GET_TOP_NEWS = 'GET_TOP_NEWS';
5 | export const GET_COMMENT_LIST = 'GET_COMMENT_LIST';
6 | export const GET_NEWS_DETAIL = 'GET_NEWS_DETAIL';
--------------------------------------------------------------------------------
/src/page/common/devtools/DevTools.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // Exported from redux-devtools
4 | import { createDevTools } from 'redux-devtools';
5 |
6 | // Monitors are separate packages, and you can make a custom one
7 | import LogMonitor from 'redux-devtools-log-monitor';
8 | import DockMonitor from 'redux-devtools-dock-monitor';
9 |
10 | // createDevTools takes a monitor and produces a DevTools component
11 | const DevTools = createDevTools(
12 | // Monitors are individually adjustable with props.
13 | // Consult their repositories to learn about those props.
14 | // Here, we put LogMonitor inside a DockMonitor.
15 |
125 |
132 |
126 |
131 |
127 |
129 | {item.title}
128 | {item.des}
130 |
148 |
154 | )
155 | }
156 | }
--------------------------------------------------------------------------------
/src/page/index/components/list/index.scss:
--------------------------------------------------------------------------------
1 | .news-list {
2 | overflow-x: hidden;
3 | width: 100%;
4 | }
5 |
6 | /** 修改1px边框颜色 */
7 |
8 | .title {
9 | margin: 8px 0 8px 14px;
10 |
11 | font-size: 15px;
12 |
13 | color: #777;
14 | }
15 |
16 | .item {
17 | -webkit-tap-highlight-color: transparent;
18 | &:after {
19 | border-top: 1px solid #dedfe0;
20 | border-bottom: 1px solid #dedfe0;
21 | }
22 | & + .item:after {
23 | border-top: 0 none;
24 | }
25 | .item-inner {
26 | position: relative;
27 |
28 | display: -webkit-box;
29 | padding: 14px 23px 10px 14px;
30 | box-sizing: border-box;
31 |
32 | line-height: 33px;
33 |
34 | cursor: pointer;
35 |
36 | background-color: #fff;
37 | }
38 |
39 | .info-wrap {
40 | display: -webkit-box;
41 | padding-left: 11px;
42 |
43 | -webkit-box-flex: 1;
44 | }
45 |
46 | .info-name-text,
47 | .info-wrap p {
48 | overflow: hidden;
49 |
50 | white-space: nowrap;
51 | text-overflow: ellipsis;
52 | word-wrap: normal;
53 | }
54 |
55 | .info-name {
56 | position: relative;
57 |
58 | display: inline-block;
59 | max-width: 100%;
60 | margin-bottom: 2px;
61 | box-sizing: border-box;
62 |
63 | font-size: 16px;
64 |
65 | vertical-align: middle;
66 | }
67 |
68 | .info-name-text {
69 | line-height: 16px;
70 | }
71 |
72 | .info-wrap p {
73 | line-height: 1.2;
74 | }
75 | .info-content {
76 | margin-bottom: 3px;
77 |
78 | font-size: 13px;
79 |
80 | color: #808080;
81 | }
82 | .icon {
83 | width: 75px;
84 | height: 60px;
85 | border-radius: 3px;
86 | background-size: 100%;
87 | }
88 | .list--ellipsis .item,
89 | .item--ellipsis {
90 | overflow: hidden;
91 |
92 | white-space: nowrap;
93 | text-overflow: ellipsis;
94 | }
95 |
96 | .info-left {
97 | padding-right: 5px;
98 | margin-top: -8px;
99 |
100 | -webkit-box-flex: 1;
101 | }
102 | }
103 |
104 | /** 编辑、删除按钮 */
105 | .dislike-btn,
106 | .like-btn {
107 | position: absolute;
108 | top: 0;
109 | right: 0;
110 | bottom: 0;
111 | z-index: 10;
112 |
113 | width: 66px;
114 |
115 | font-size: 18px;
116 | line-height: 84px;
117 |
118 | -webkit-transform: translate3d(200%, 0, 0);
119 | transform: translate3d(200%, 0, 0);
120 | text-align: center;
121 |
122 | color: #fff;
123 | background-color: #fe3c2e;
124 | }
125 |
126 | .dislike-btn {
127 | -webkit-transform: translate3d(100%, 0, 0);
128 | transform: translate3d(100%, 0, 0);
129 | }
130 |
131 | .like-btn {
132 | -webkit-transform: translate3d(100%, 0, 0);
133 | transform: translate3d(100%, 0, 0);
134 |
135 | background-color: #00a5e0;
136 | }
137 |
138 | .item {
139 | -webkit-transition: -webkit-transform .2s ease-out;
140 | transition: transform .2s ease-out;
141 |
142 | &.active-like {
143 | -webkit-transform: translate3d(-66px, 0, 0);
144 | transform: translate3d(-66px, 0, 0);
145 | }
146 | }
147 |
--------------------------------------------------------------------------------
/src/page/index/components/loading/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import pureRender from 'pure-render-decorator';
3 |
4 | require('./index.scss');
5 |
6 | @pureRender
7 | export default class List extends Component {
8 |
9 | constructor(props, context) {
10 | super(props, context);
11 | this.state = {
12 |
13 | };
14 | }
15 |
16 | componentWillMount() {
17 |
18 | }
19 |
20 | componentDidMount() {
21 |
22 | }
23 |
24 | render() {
25 |
26 | console.dev('render Loading');
27 |
28 | var isShow = this.props.isShow || false;
29 | var loadingStyle = {
30 | display: (isShow) ? 'block' : 'none'
31 | };
32 |
33 | var isEnd = this.props.isEnd || false;
34 | var loadingText = (isEnd) ? '已加载全部' : '正在加载中…';
35 |
36 | return (
37 |
149 |
153 | -
150 | {list}
151 |
38 |
40 | )
41 | }
42 | }
--------------------------------------------------------------------------------
/src/page/index/components/loading/index.scss:
--------------------------------------------------------------------------------
1 | .loading {
2 | line-height: 44px;
3 | text-align: center;
4 | font-size: 12px;
5 | color: #808080;
6 | }
--------------------------------------------------------------------------------
/src/page/index/components/scroll/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import pureRender from 'pure-render-decorator';
3 |
4 | @pureRender
5 | export default class Scroll extends Component {
6 |
7 | constructor(props, context) {
8 | super(props, context);
9 | this.state = {
10 |
11 | };
12 | this.isLoading = false;
13 | this.prvScrollTop = 0;
14 | this.scrollTopCache = {};
15 | this.prvScrollTopCache = {};
16 | this.refreshScroll = this.refreshScroll.bind(this);
17 | }
18 |
19 | componentWillMount() {
20 |
21 | }
22 |
23 | componentDidMount() {
24 | this.bindScrollEvt();
25 | }
26 |
27 | componentDidUpdate(prevProps, prevState) {
28 | console.log("==================componentDidUpdate==============");
29 | }
30 |
31 | refreshScroll() {
32 | this.prvScrollTop = this.prvScrollTopCache[this.props.tabs.active] = 0;
33 | }
34 |
35 |
36 | bindScrollEvt() {
37 | var _this = this;
38 | var timer = null;
39 |
40 | window.addEventListener('scroll', function(e) {
41 | // 延迟计算
42 | timer && clearTimeout(timer);
43 | timer = setTimeout(function() {
44 |
45 | var doc = window.document;
46 | var scrollTop = doc.body.scrollTop;
47 | var isEnd = _this.props.isEnd;
48 | // console.log(listType, isEnd);
49 |
50 | // 防止向上滚动也拉数据
51 | if (_this.prvScrollTop > scrollTop) {
52 | return;
53 | }
54 | _this.prvScrollTop = scrollTop;
55 |
56 | var winHeight = window.document.documentElement.clientHeight;
57 | var clientHeight = window.document.body.clientHeight;
58 |
59 | // 条件一： 滚动到最底部才拉数据
60 | // if (scrollTop + winHeight >= clientHeight) {
61 | // 条件二： 滚动到中间拉数据
62 | if (scrollTop >= (clientHeight - winHeight) / 2 && !isEnd) {
63 | _this.props.loadNewsList(null, false);
64 | }
65 |
66 | }, 50);
67 | });
68 |
69 | }
70 |
71 | render() {
72 |
73 | console.dev('render Scroll!');
74 |
75 | return (
76 | {loadingText}
39 |
77 | {this.props.children}
78 |
79 | )
80 | }
81 | }
--------------------------------------------------------------------------------
/src/page/index/components/tab/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import pureRender from 'pure-render-decorator';
3 | import { LATEST_NEWS, LIKE_NEWS } from '../../constants/constants';
4 |
5 | import Touch from 'touch';
6 | import classNames from 'classnames';
7 | require('./index.scss');
8 |
9 |
10 | function TabItem(item, key) {
11 | return (
12 |
68 |
77 | )
78 | }
79 | }
--------------------------------------------------------------------------------
/src/page/index/components/tab/index.scss:
--------------------------------------------------------------------------------
1 | .cm-tabs {
2 | position: fixed;
3 | top: 0;
4 | z-index: 99;
5 |
6 | width: 100%;
7 | }
8 | .nav {
9 | position: relative;
10 | line-height: 45px;
11 | background-color: #fff;
12 |
13 | &:after {
14 | border-bottom: 1px solid #dbdbdb;
15 | }
16 |
17 | .title-list {
18 | display: table;
19 | width: 100%;
20 |
21 | table-layout: fixed;
22 | }
23 |
24 | .title-list li {
25 | display: table-cell;
26 | box-sizing: border-box;
27 | font-size: 16px;
28 | text-align: center;
29 | color: #777;
30 | }
31 |
32 | .title-list li.active {
33 | color: #00a5e0;
34 | }
35 |
36 | .icon-active {
37 | position: absolute;
38 | bottom: 0;
39 | left: 0;
40 |
41 | width: 50%;
42 | height: 4px;
43 |
44 | transform: left .3s ease-in-out;
45 |
46 | background-color: #00a5e0;
47 | }
48 |
49 | .icon-active.pull-right {
50 | right: 0;
51 | left: initial;
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/src/page/index/connect/connect.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import { request } from '../../common/actions/actions';
3 | import { getArgs, updateActiveTab, toggleContent,
4 | toggleListLoading, toggleSpinLoading, toggleDialog, likeNews, dislikeNews } from '../actions/actions';
5 |
6 | // Map Redux state to component props
7 | // ownProps stores react-router-redux props
8 | function mapStateToProps(state, ownProps) {
9 | return {
10 | args: state.args,
11 | tabs: state.tabs,
12 | news: state.news,
13 | spinLoading: state.spinLoading,
14 | listLoading: state.listLoading,
15 | };
16 | }
17 |
18 | // Map Redux actions to component props
19 | function mapDispatchToProps(dispatch) {
20 | return {
21 | request: (cgiName, params, opts) => dispatch(request(cgiName, params, opts)),
22 | getArgs: (value) => dispatch(getArgs(value)),
23 | toggleListLoading: (value) => dispatch(toggleListLoading(value)),
24 | toggleSpinLoading: (value) => dispatch(toggleSpinLoading(value)),
25 | updateActiveTab: (value) => dispatch(updateActiveTab(value)),
26 | likeNews: (value) => dispatch(likeNews(value)),
27 | dislikeNews: (value) => dispatch(dislikeNews(value)),
28 | };
29 | }
30 |
31 | export default connect(
32 | mapStateToProps,
33 | mapDispatchToProps
34 | );
--------------------------------------------------------------------------------
/src/page/index/constants/constants.js:
--------------------------------------------------------------------------------
1 | export const LATEST_NEWS = 10;
2 | export const LIKE_NEWS = 11;
3 |
4 | export const DEBUG = true;
--------------------------------------------------------------------------------
/src/page/index/container/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import merge from 'lodash.merge';
3 | import { render } from 'react-dom';
4 | import Connect from '../connect/connect';
5 | import { GET_NEWS_LIST, GET_TOP_NEWS } from '../../common/constants/constants';
6 | import { LATEST_NEWS, LIKE_NEWS } from '../constants/constants';
7 | import { platform } from 'utils';
8 |
9 | require('./index.scss');
10 | import Scroll from 'scroll';
11 | import Spinner from 'spinner';
12 | import List from '../components/list/index';
13 | import Tab from '../components/tab/index';
14 | import Loading from '../components/loading/index';
15 |
16 |
17 | if (platform().ios) {
18 | document.body.className = "ios";
19 | }
20 |
21 | class Wrapper extends Component {
22 |
23 | constructor(props, context) {
24 | super(props, context);
25 | this.state = {
26 |
27 | };
28 | this.firstGetAllData = false;
29 | this.loadTopNews = this.loadTopNews.bind(this);
30 | this.loadNewsList = this.loadNewsList.bind(this);
31 | this.loadData = this.loadData.bind(this);
32 | this.loadDataForScroll = this.loadDataForScroll.bind(this);
33 | }
34 |
35 | componentDidMount() {
36 |
37 | }
38 |
39 | componentWillMount() {
40 | this.loadTopNews();
41 | }
42 |
43 | componentWillReceiveProps(nextProps) {
44 | this.props.toggleSpinLoading(false);
45 |
46 | return true;
47 | }
48 |
49 | loadDataForScroll() {
50 | this.loadNewsList(null);
51 | }
52 |
53 | loadTopNews() {
54 | var url = GET_TOP_NEWS,
55 | opts = {};
56 |
57 | var pa = merge({}, {
58 | chlid: 'news_news_top',
59 | refer: 'mobilewwwqqcom',
60 | otype: 'jsonp',
61 | callback: 'getNewsIndexOutput',
62 | t: (new Date()).getTime()
63 | }, pa);
64 |
65 | var param = {
66 | param: pa,
67 | ajaxType: 'JSONP',
68 | onSuccess: function(res) {
69 | // console.log(res);
70 | },
71 | onError: function(res) {
72 | // console.log(res);
73 | // alert(res.errMsg || '加载新闻列表失败，请稍后重试');
74 | }
75 | };
76 |
77 | this.props.request(url, param, opts);
78 | }
79 |
80 | loadNewsList(props) {
81 | var props = props || this.props;
82 |
83 | this.loadData(LATEST_NEWS, {});
84 | }
85 |
86 | //http://mat1.gtimg.com/www/mobi/image/loadimg.png
87 |
88 | loadData(listType, pa = {}, opts = {}) {
89 | var _this = this;
90 | var url = GET_NEWS_LIST;
91 |
92 | var listInfoParam = this.props.news.listInfo['listLatest'],
93 | ids = this.props.news.ids,
94 | args = this.props.args;
95 |
96 | // 防止重复拉取
97 | if (listInfoParam.isLoading) {
98 | return;
99 | }
100 |
101 | var curPage = listInfoParam.curPage,
102 | page_size = listInfoParam.pageSize,
103 | startIndex = 0 + (curPage - 1) * page_size,
104 | endIndex = startIndex + page_size;
105 |
106 | var newIds = ids.slice(startIndex, endIndex),
107 | newIdArray = [];
108 |
109 | newIds.forEach((item, index) => {
110 | newIdArray.push(item.id);
111 | });
112 |
113 | var pa = merge({}, {
114 | cmd: GET_NEWS_LIST,
115 | ids: newIdArray.join(','),
116 | refer: "mobilewwwqqcom",
117 | otype: "jsonp",
118 | callback: "getNewsContentOnlyOutput",
119 | t: (new Date()).getTime(),
120 | }, pa);
121 |
122 | var param = {
123 | param: pa,
124 | ajaxType: 'JSONP',
125 | onSuccess: function(data) {
126 | // console.log(data);
127 | },
128 | onError: function(res) {
129 | console.log("err");
130 | // console.log(res);
131 | // alert(res.errMsg || '加载新闻列表失败，请稍后重试');
132 | }
133 | };
134 |
135 | this.props.request(url, param, opts);
136 | }
137 |
138 | render() {
139 |
140 | console.dev('render container!!!');
141 | let tabStyle = this.props.tabs,
142 | isEnd = this.props.news.listInfo['listLatest']['isEnd'],
143 | isLoadingShow = tabStyle === LATEST_NEWS;
144 |
145 | return (
146 |
69 |
75 |
76 |
27 |
30 |
22 |
24 |
144 |
151 |
145 |
150 |
146 |
148 | {item.title}
147 | {item.des}
149 |
167 |
173 | )
174 | }
175 | }
176 |
177 | List.contextTypes = {
178 | router: React.PropTypes.object.isRequired
179 | };
--------------------------------------------------------------------------------
/src/page/spa/components/list/index.scss:
--------------------------------------------------------------------------------
1 | .news-list {
2 | overflow-x: hidden;
3 | width: 100%;
4 | }
5 |
6 | /** 修改1px边框颜色 */
7 |
8 | .title {
9 | margin: 8px 0 8px 14px;
10 |
11 | font-size: 15px;
12 |
13 | color: #777;
14 | }
15 |
16 | .item {
17 | -webkit-tap-highlight-color: transparent;
18 | &:after {
19 | border-top: 1px solid #dedfe0;
20 | border-bottom: 1px solid #dedfe0;
21 | }
22 | & + .item:after {
23 | border-top: 0 none;
24 | }
25 | .item-inner {
26 | position: relative;
27 |
28 | display: -webkit-box;
29 | padding: 14px 23px 10px 14px;
30 | box-sizing: border-box;
31 |
32 | line-height: 33px;
33 |
34 | cursor: pointer;
35 |
36 | background-color: #fff;
37 | }
38 |
39 | .info-wrap {
40 | display: -webkit-box;
41 | padding-left: 11px;
42 |
43 | -webkit-box-flex: 1;
44 | }
45 |
46 | .info-name-text,
47 | .info-wrap p {
48 | overflow: hidden;
49 |
50 | white-space: nowrap;
51 | text-overflow: ellipsis;
52 | word-wrap: normal;
53 | }
54 |
55 | .info-name {
56 | position: relative;
57 |
58 | display: inline-block;
59 | max-width: 100%;
60 | margin-bottom: 2px;
61 | box-sizing: border-box;
62 |
63 | font-size: 16px;
64 |
65 | vertical-align: middle;
66 | }
67 |
68 | .info-name-text {
69 | line-height: 16px;
70 | }
71 |
72 | .info-wrap p {
73 | line-height: 1.2;
74 | }
75 | .info-content {
76 | margin-bottom: 3px;
77 |
78 | font-size: 13px;
79 |
80 | color: #808080;
81 | }
82 | .icon {
83 | width: 75px;
84 | height: 60px;
85 | border-radius: 3px;
86 | background-size: 100%;
87 | }
88 | .list--ellipsis .item,
89 | .item--ellipsis {
90 | overflow: hidden;
91 |
92 | white-space: nowrap;
93 | text-overflow: ellipsis;
94 | }
95 |
96 | .info-left {
97 | padding-right: 5px;
98 | margin-top: -8px;
99 |
100 | -webkit-box-flex: 1;
101 | }
102 | }
103 |
104 | /** 编辑、删除按钮 */
105 | .dislike-btn,
106 | .like-btn {
107 | position: absolute;
108 | top: 0;
109 | right: 0;
110 | bottom: 0;
111 | z-index: 10;
112 |
113 | width: 66px;
114 |
115 | font-size: 18px;
116 | line-height: 84px;
117 |
118 | -webkit-transform: translate3d(200%, 0, 0);
119 | transform: translate3d(200%, 0, 0);
120 | text-align: center;
121 |
122 | color: #fff;
123 | background-color: #fe3c2e;
124 | }
125 |
126 | .dislike-btn {
127 | -webkit-transform: translate3d(100%, 0, 0);
128 | transform: translate3d(100%, 0, 0);
129 | }
130 |
131 | .like-btn {
132 | -webkit-transform: translate3d(100%, 0, 0);
133 | transform: translate3d(100%, 0, 0);
134 |
135 | background-color: #00a5e0;
136 | }
137 |
138 | .item {
139 | -webkit-transition: -webkit-transform .2s ease-out;
140 | transition: transform .2s ease-out;
141 |
142 | &.active-like {
143 | -webkit-transform: translate3d(-66px, 0, 0);
144 | transform: translate3d(-66px, 0, 0);
145 | }
146 | }
147 |
--------------------------------------------------------------------------------
/src/page/spa/components/loading/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import pureRender from 'pure-render-decorator';
3 |
4 | require('./index.scss');
5 |
6 | @pureRender
7 | export default class List extends Component {
8 |
9 | constructor(props, context) {
10 | super(props, context);
11 | this.state = {
12 |
13 | };
14 | }
15 |
16 | componentWillMount() {
17 |
18 | }
19 |
20 | componentDidMount() {
21 |
22 | }
23 |
24 | render() {
25 |
26 | console.dev('render Loading');
27 |
28 | var isShow = this.props.isShow || false;
29 | var loadingStyle = {
30 | display: (isShow) ? 'block' : 'none'
31 | };
32 |
33 | var isEnd = this.props.isEnd || false;
34 | var loadingText = (isEnd) ? '已加载全部' : '正在加载中…';
35 |
36 | return (
37 |
168 |
172 | -
169 | {list}
170 |
38 |
40 | )
41 | }
42 | }
--------------------------------------------------------------------------------
/src/page/spa/components/loading/index.scss:
--------------------------------------------------------------------------------
1 | .loading {
2 | line-height: 44px;
3 | text-align: center;
4 | font-size: 12px;
5 | color: #808080;
6 | }
--------------------------------------------------------------------------------
/src/page/spa/components/tab/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import pureRender from 'pure-render-decorator';
3 | import { LATEST_NEWS, LIKE_NEWS } from '../../constants/constants';
4 |
5 | import Touch from 'touch';
6 | import classNames from 'classnames';
7 | require('./index.scss');
8 |
9 |
10 | function TabItem(item, key) {
11 | return (
12 | {loadingText}
39 |
68 |
77 | )
78 | }
79 | }
--------------------------------------------------------------------------------
/src/page/spa/components/tab/index.scss:
--------------------------------------------------------------------------------
1 | .cm-tabs {
2 | position: fixed;
3 | top: 0;
4 | z-index: 99;
5 |
6 | width: 100%;
7 | }
8 | .nav {
9 | position: relative;
10 | line-height: 45px;
11 | background-color: #fff;
12 |
13 | &:after {
14 | border-bottom: 1px solid #dbdbdb;
15 | }
16 |
17 | .title-list {
18 | display: table;
19 | width: 100%;
20 |
21 | table-layout: fixed;
22 | }
23 |
24 | .title-list li {
25 | display: table-cell;
26 | box-sizing: border-box;
27 | font-size: 16px;
28 | text-align: center;
29 | color: #777;
30 | }
31 |
32 | .title-list li.active {
33 | color: #00a5e0;
34 | }
35 |
36 | .icon-active {
37 | position: absolute;
38 | bottom: 0;
39 | left: 0;
40 |
41 | width: 50%;
42 | height: 4px;
43 |
44 | transform: left .3s ease-in-out;
45 |
46 | background-color: #00a5e0;
47 | }
48 |
49 | .icon-active.pull-right {
50 | right: 0;
51 | left: initial;
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/src/page/spa/connect/connect.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import { request } from '../../common/actions/actions';
3 | import { getArgs, updateActiveTab, toggleContent,
4 | toggleListLoading, toggleSpinLoading, toggleDialog, likeNews, dislikeNews } from '../actions/actions';
5 |
6 | // Map Redux state to component props
7 | // ownProps stores react-router-redux props
8 | function mapStateToProps(state, ownProps) {
9 | return {
10 | args: state.args,
11 | tabs: state.tabs,
12 | news: state.news,
13 | details: state.details,
14 | comments: state.comments,
15 | spinLoading: state.spinLoading,
16 | listLoading: state.listLoading,
17 | };
18 | }
19 |
20 | // Map Redux actions to component props
21 | function mapDispatchToProps(dispatch) {
22 | return {
23 | request: (cgiName, params, opts) => dispatch(request(cgiName, params, opts)),
24 | getArgs: (value) => dispatch(getArgs(value)),
25 | toggleListLoading: (value) => dispatch(toggleListLoading(value)),
26 | toggleSpinLoading: (value) => dispatch(toggleSpinLoading(value)),
27 | updateActiveTab: (value) => dispatch(updateActiveTab(value)),
28 | likeNews: (value) => dispatch(likeNews(value)),
29 | dislikeNews: (value) => dispatch(dislikeNews(value)),
30 | };
31 | }
32 |
33 | export default connect(
34 | mapStateToProps,
35 | mapDispatchToProps
36 | );
--------------------------------------------------------------------------------
/src/page/spa/constants/constants.js:
--------------------------------------------------------------------------------
1 | export const LATEST_NEWS = 10;
2 | export const LIKE_NEWS = 11;
3 |
4 | export const DEBUG = true;
--------------------------------------------------------------------------------
/src/page/spa/container/app.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { render } from 'react-dom';
3 | import Connect from '../connect/connect';
4 | import { Link, browserHistory } from 'react-router';
5 |
6 |
7 | require('./index.scss');
8 |
9 |
10 | function App(props) {
11 |
12 | return (
13 |
69 |
75 |
76 |
14 | {props.children}
15 |
16 | )
17 | }
18 |
19 | App.contextTypes = {
20 | router: React.PropTypes.object.isRequired
21 | };
22 |
23 | export default Connect(App);
--------------------------------------------------------------------------------
/src/page/spa/container/comment.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import merge from 'lodash.merge';
3 | import { render } from 'react-dom';
4 | import { formatDate } from 'utils';
5 | import Connect from '../connect/connect';
6 | import { GET_COMMENT_LIST } from '../../common/constants/constants';
7 | import { LATEST_NEWS, LIKE_NEWS } from '../constants/constants';
8 |
9 | import Spinner from 'spinner';
10 | import Touch from 'touch';
11 |
12 |
13 | require('./comment.scss');
14 |
15 |
16 | class Comment extends Component {
17 |
18 | constructor(props, context) {
19 | super(props, context);
20 | this.state = {
21 |
22 | };
23 | this.commentId = this.props.params.id;
24 |
25 | }
26 |
27 | componentDidMount() {
28 |
29 | }
30 |
31 | componentWillMount() {
32 | if (!this.props.comments.hasOwnProperty(this.commentId)) {
33 | this.getCommentList();
34 | }
35 | }
36 |
37 | getCommentList() {
38 | let url = GET_COMMENT_LIST,
39 | opts = {};
40 |
41 | var pa = merge({}, {
42 | comment_id: this.props.params.id,
43 | otype: "jsonp",
44 | callback: "renderComment",
45 | lcount: 20,
46 | from: 'share',
47 | v: (new Date()).getTime(),
48 | }, pa);
49 |
50 | var param = {
51 | param: pa,
52 | ajaxType: 'JSONP',
53 | onSuccess: function(data) {
54 | // console.log(data);
55 | },
56 | onError: function(res) {
57 | console.log("err");
58 | }
59 | };
60 |
61 | this.props.request(url, param, opts);
62 | }
63 |
64 | render() {
65 | var commentId = this.commentId;
66 | var commentData = (this.props.comments.hasOwnProperty(commentId)) ?
67 | this.props.comments[commentId] : [];
68 |
69 | var commentList = commentData.map((items, index) => {
70 | let item = items[0];
71 |
72 | return (
73 |
74 |
87 | )
88 | });
89 |
90 | commentList = (!commentList.length) ?
75 |
86 |
76 | 
77 |
78 |
79 | {item.nick}
80 | {formatDate(item.pub_time, 2)}
81 |
82 |
83 |
85 | {item.reply_content}
84 |暂无评论
: commentList;
91 |
92 | return (
93 |
94 |
108 |
109 | )
110 | }
111 | }
112 |
113 | Comment.contextTypes = {
114 | router: React.PropTypes.object.isRequired
115 | };
116 |
117 | export default Connect(Comment);
--------------------------------------------------------------------------------
/src/page/spa/container/comment.scss:
--------------------------------------------------------------------------------
1 | @charset "utf-8";
2 | @import"../../../css/common/common";
3 | @import"../../../css/common/reset";
4 |
5 | html, body {
6 | height: 100%;
7 | width: 100%;
8 | }
9 |
10 | body {
11 | background-color: #f8f9fb;
12 | }
13 |
14 | .comment-list {
15 |
16 | h1 {
17 | margin-bottom: 10px;
18 | font-size: 19px;
19 | color: #28292d;
20 | line-height: 19px;
21 | border-left: 4px solid #ff9c00;
22 | padding-left: 11px;
23 |
24 | div {
25 | float: right;
26 | font-size: 15px;
27 | font-weight: 100;
28 | }
29 |
30 | .back {
31 | font-size: 18px;
32 | color: #ff9c00;
33 | padding: 5px;
34 | }
35 | }
36 | }
37 |
38 | .comment-list_item {
39 | display: block;
40 |
41 | .item {
42 | position: relative;
43 | margin-left: 15px;
44 | margin-right: 15px;
45 | color: #47494c;
46 | border-bottom: 1px solid #e0e0e0;
47 | vertical-align: top;
48 |
49 | .avatar {
50 | position: absolute;
51 | top: 15px;
52 |
53 | img {
54 | display: block;
55 | width: 30px;
56 | height: 30px;
57 | border-radius: 30px;
58 | }
59 | }
60 |
61 | .nameBar {
62 | padding-top: 14px;
63 | margin-left: 40px;
64 | font-size: 14px;
65 | overflow: hidden;
66 | text-overflow: ellipsis;
67 | font-weight: 700;
68 |
69 | span {
70 | float: right;
71 | font-size: 13px;
72 | color: #8d8d8d;
73 | }
74 | }
75 |
76 | .contentBox {
77 | padding-left: 40px;
78 | overflow: hidden;
79 |
80 | p {
81 | font-size: 14px;
82 | line-height: 24px;
83 | margin: 7px 0 10px;
84 | white-space: normal;
85 | word-break: break-all;
86 | }
87 | }
88 | }
89 |
90 |
91 | }
--------------------------------------------------------------------------------
/src/page/spa/container/detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import merge from 'lodash.merge';
3 | import { render } from 'react-dom';
4 | import { formatDate } from 'utils';
5 | import Connect from '../connect/connect';
6 | import { GET_COMMENT_LIST, GET_NEWS_DETAIL } from '../../common/constants/constants';
7 | import { LATEST_NEWS, LIKE_NEWS } from '../constants/constants';
8 |
9 | import Spinner from 'spinner';
10 | import Touch from 'touch';
11 |
12 | require('./detail.scss');
13 |
14 | let spaPath = "";
15 | if ("__DEV__" === process.env.NODE_ENV || "__PROD__" === process.env.NODE_ENV) {
16 | spaPath = "spa.html";
17 | }
18 | else {
19 | spaPath = "spa";
20 | }
21 |
22 | class Detail extends Component {
23 |
24 | constructor(props, context) {
25 | super(props, context);
26 | this.state = {
27 |
28 | };
29 | this.newsId = this.props.params.id;
30 | this.commentId = this.props.params.commentid;
31 | this.getNewsDetail = this.getNewsDetail.bind(this);
32 | }
33 |
34 | componentDidMount() {
35 | if (!this.props.details.hasOwnProperty(this.newsId)) {
36 | this.getNewsDetail(this.newsId);
37 | }
38 | }
39 |
40 | componentWillMount() {
41 |
42 | }
43 |
44 | getNewsDetail(newsId) {
45 | let url = GET_NEWS_DETAIL,
46 | opts = {};
47 |
48 | var pa = merge({}, {
49 | // url: item.url,
50 | news_id: newsId,//item.id,
51 | v: (new Date()).getTime(),
52 | }, pa);
53 |
54 | var param = {
55 | param: pa,
56 | ajaxType: 'POST',
57 | onSuccess: function(data) {
58 |
59 | },
60 | onError: function(res) {
61 | console.log("err");
62 | }
63 | };
64 |
65 | this.props.request(url, param, opts);
66 | }
67 |
68 | render() {
69 | var details = this.props.details || {},
70 | detailStr = details.hasOwnProperty(this.newsId) ? details[this.newsId] : '';
71 |
72 | // console.dev(detailStr);
73 | var detailContent = detailStr.split('\n\n').map((item, index) => {
74 | // console.log(item);
75 | switch (index) {
76 | case 0:
77 | return (
78 |
95 |
96 | 精选评论
97 |
102 |
103 |
107 |
96 | 精选评论
97 | {
98 | this.context.router.goBack();
99 | // this.context.router
100 | }}>返回
101 |
102 |
103 | 返回
104 | {commentList}
105 |
106 | {item}
79 | ); 80 | case 1: 81 | return ( 82 |{item}
83 | ); 84 | default: 85 | 86 | var regex = new RegExp('(\[http:\/\/(\w.+)\])', 'i'); 87 | var matches = item.match(regex); 88 | // console.log(matches); 89 | if (matches !== null && !!~matches.input.indexOf("\[http://")) { 90 | // console.log(item); 91 | return ( 92 |
93 |
94 |
{item}
100 | ); 101 | } 102 | } 103 | }); 104 | 105 | return ( 106 |
107 | {detailContent}
108 |
119 |
120 | )
121 | }
122 | }
123 |
124 | Detail.contextTypes = {
125 | router: React.PropTypes.object.isRequired
126 | };
127 |
128 | export default Connect(Detail);
--------------------------------------------------------------------------------
/src/page/spa/container/detail.scss:
--------------------------------------------------------------------------------
1 | .detail-wrapper {
2 |
3 | .title {
4 | font-size: 22px;
5 | font-weight: 700;
6 | padding: 8px 10px;
7 | word-wrap: break-word;
8 | text-align: center;
9 | }
10 |
11 | .src {
12 | font-size: 13px;
13 | border-bottom: 1px solid #d6d6d6;
14 | color: #aaa;
15 | padding-bottom: 10px;
16 | position: relative;
17 | text-align: center;
18 | }
19 |
20 | .text {
21 | font-size: 17px;
22 | text-align: justify;
23 | word-wrap: break-word;
24 | line-height: 25px;
25 | padding: 8px 13px;
26 | }
27 |
28 | .imgNode {
29 | text-align: center;
30 | padding: 10px 15px;
31 | }
32 |
33 | .btns {
34 | display: inline-block;
35 |
36 | div {
37 | display: inline-block;
38 | padding: 10px;
39 | font-size: 18px;
40 | color: #ff9c00;
41 | }
42 | }
43 | }
--------------------------------------------------------------------------------
/src/page/spa/container/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import merge from 'lodash.merge';
3 | import { render } from 'react-dom';
4 | import Connect from '../connect/connect';
5 | import { GET_NEWS_LIST, GET_TOP_NEWS, GET_NEWS_DETAIL } from '../../common/constants/constants';
6 | import { LATEST_NEWS, LIKE_NEWS } from '../constants/constants';
7 | import { platform } from 'utils';
8 |
9 | require('./index.scss');
10 |
11 | import Scroll from 'scroll';
12 | import Spinner from 'spinner';
13 | import List from '../components/list/index';
14 | import Tab from '../components/tab/index';
15 | import Loading from '../components/loading/index';
16 |
17 | if (platform().ios) {
18 | document.body.className = "ios";
19 | }
20 |
21 |
22 | class Wrapper extends Component {
23 |
24 | constructor(props, context) {
25 | super(props, context);
26 | this.state = {
27 | lock: true
28 | };
29 | this.firstGetAllData = false;
30 | this.loadTopNews = this.loadTopNews.bind(this);
31 | this.loadNewsList = this.loadNewsList.bind(this);
32 | this.loadData = this.loadData.bind(this);
33 | this.loadDataForScroll = this.loadDataForScroll.bind(this);
34 | this.getNewsDetail = this.getNewsDetail.bind(this);
35 | }
36 |
37 | componentDidMount() {
38 | setTimeout(() => {
39 | this.setState({
40 | lock: false,
41 | });
42 | }, 100);
43 |
44 | this.props.toggleSpinLoading(false);
45 | }
46 |
47 | componentWillMount() {
48 | if (this.props.news.ids.length === 0 && !isNode) {
49 | this.loadTopNews();
50 | }
51 | }
52 |
53 | componentWillReceiveProps(nextProps) {
54 |
55 | return true;
56 | }
57 |
58 | loadDataForScroll() {
59 | this.loadNewsList(null);
60 | }
61 |
62 | loadTopNews() {
63 |
64 | var url = GET_TOP_NEWS,
65 | opts = {};
66 |
67 | var pa = merge({}, {
68 | chlid: 'news_news_top',
69 | refer: 'mobilewwwqqcom',
70 | otype: 'jsonp',
71 | callback: 'getNewsIndexOutput',
72 | t: (new Date()).getTime()
73 | }, pa);
74 |
75 | var param = {
76 | param: pa,
77 | ajaxType: 'JSONP',
78 | onSuccess: function(res) {
79 | // console.log(res);
80 | },
81 | onError: function(res) {
82 | // console.log(res);
83 | // alert(res.errMsg || '加载新闻列表失败，请稍后重试');
84 | }
85 | };
86 |
87 | this.props.request(url, param, opts);
88 | }
89 |
90 | loadNewsList(props) {
91 | var props = props || this.props;
92 |
93 | this.loadData(LATEST_NEWS, {});
94 | }
95 |
96 | //http://mat1.gtimg.com/www/mobi/image/loadimg.png
97 |
98 | loadData(listType, pa = {}, opts = {}) {
99 | var _this = this;
100 | var url = GET_NEWS_LIST;
101 |
102 | var listInfoParam = this.props.news.listInfo['listLatest'],
103 | ids = this.props.news.ids,
104 | args = this.props.args;
105 |
106 | // 防止重复拉取
107 | if (listInfoParam.isLoading) {
108 | return;
109 | }
110 |
111 | var curPage = listInfoParam.curPage,
112 | page_size = listInfoParam.pageSize,
113 | startIndex = 0 + (curPage) * page_size,
114 | endIndex = startIndex + page_size;
115 |
116 | var newIds = ids.slice(startIndex, endIndex),
117 | newIdArray = [];
118 |
119 |
120 | newIds.forEach((item, index) => {
121 | newIdArray.push(item.id);
122 | });
123 |
124 | var pa = merge({}, {
125 | cmd: GET_NEWS_LIST,
126 | ids: newIdArray.join(','),
127 | refer: "mobilewwwqqcom",
128 | otype: "jsonp",
129 | callback: "getNewsContentOnlyOutput",
130 | t: (new Date()).getTime(),
131 | }, pa);
132 |
133 | var param = {
134 | param: pa,
135 | ajaxType: 'JSONP',
136 | onSuccess: function(data) {
137 | console.log(data);
138 | },
139 | onError: function(res) {
140 | console.log("err");
141 | // console.log(res);
142 | // alert(res.errMsg || '加载新闻列表失败，请稍后重试');
143 | }
144 | };
145 |
146 | this.props.request(url, param, opts);
147 | }
148 |
149 | getNewsDetail(newsId) {
150 | let url = GET_NEWS_DETAIL,
151 | opts = {};
152 |
153 | var pa = merge({}, {
154 | // url: item.url,
155 | news_id: newsId,//item.id,
156 | v: (new Date()).getTime(),
157 | }, pa);
158 |
159 | var param = {
160 | param: pa,
161 | ajaxType: 'POST',
162 | onSuccess: function(data) {
163 |
164 | },
165 | onError: function(res) {
166 | console.log("err");
167 | }
168 | };
169 |
170 | this.props.request(url, param, opts);
171 | }
172 |
173 | render() {
174 | // console.log(this.state.lock);
175 | console.dev('render container!!!');
176 | let tabStyle = this.props.tabs,
177 | isEnd = this.props.news.listInfo['listLatest']['isEnd'],
178 | isLoadingShow = tabStyle === LATEST_NEWS;
179 |
180 | return (
181 |
109 | {
110 | // this.context.router.goBack();
111 | this.context.router.push('/' + spaPath);
112 | // this.context.router
113 | }}>首页
114 | {
115 | this.context.router.push('/' + spaPath + '/comment/' + this.commentId);
116 | }}>精彩评论
117 |
118 |
187 |
193 |
215 |
216 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | {/*
52 |
61 |
63 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | {/*
49 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 | {/*
50 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
56 |
58 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |