React App

11 |

evt.preventDefault()}> 12 |

13 |           <button>Submit</button>
14 |         </form>
15 |       </div>
16 |     );
17 |   }
18 | }
19 |

--------------------------------------------------------------------------------
/src/c02/CommentItem.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | export default class Comment extends PureComponent {
 5 |   static propTypes = {
 6 |     comment: PropTypes.object.isRequired
 7 |   };
 8 |   render() {
 9 |     const { author, content } = this.props.comment;
10 |     return (
11 |       <div className="comment-item">
12 |         <span className="avatar" />
13 |         <a href="#">{author}</a>
14 |         <p>{content}</p>
15 |       </div>
16 |     );
17 |   }
18 | }
19 |

--------------------------------------------------------------------------------
/src/c02/CommentList.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from "react";
 2 | import PropTypes from "prop-types";
 3 | import CommentItem from "./CommentItem";
 4 | 
 5 | export default class CommentList extends PureComponent {
 6 |   static propTypes = {
 7 |     comments: PropTypes.object.isRequired
 8 |   };
 9 |   render() {
10 |     return (
11 |       <div className="comment-list">
12 |         {this.props.comments.map(comment => <CommentItem comment={comment} />)}
13 |       </div>
14 |     );
15 |   }
16 | }
17 |

--------------------------------------------------------------------------------
/src/c02/StatefulTabSelector.js:
--------------------------------------------------------------------------------
 1 | import React, { Component, PureComponent } from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | export default class StatefulTabSelect extends Component {
 5 |   static propTypes = {
 6 |     initialValue: PropTypes.string,
 7 |     value: PropTypes.string,
 8 |     options: PropTypes.array,
 9 |     onChange: PropTypes.func
10 |   };
11 | 
12 |   state = { value: null };
13 | 
14 |   static defaultProps = {
15 |     value: null,
16 |     options: [],
17 |     onChange: () => {}
18 |   };
19 | 
20 |   static getDerivedStateFromProps(nextProps, prevState) {
21 |     console.log("get derived");
22 |     return { ...prevState, value: nextProps.value || nextProps.initialValue };
23 |   }
24 |   handleSelect = selected => {
25 |     this.setState({ value: selected });
26 |     this.props.onChange(selected);
27 |   };
28 |   render() {
29 |     console.log("render");
30 |     const { options } = this.props;
31 |     return (
32 |       <div className="tab-selector">
33 |         <ul>
34 |           {options.map(opt => (
35 |             <li
36 |               key={opt.value}
37 |               className={`tab-item ${
38 |                 opt.value === this.state.value ? "selected" : ""
39 |               }`}
40 |               onClick={() => this.handleSelect(opt.value)}
41 |             >
42 |               {opt.name}
43 |             </li>
44 |           ))}
45 |         </ul>
46 |       </div>
47 |     );
48 |   }
49 | }
50 | 
51 | const options = [
52 |   { name: "Red", value: "red" },
53 |   { name: "Blue", value: "blue" },
54 |   { name: "Orange", value: "orange" }
55 | ];
56 | 
57 | export class StatefulTabSelectSample extends PureComponent {
58 |   render() {
59 |     return (
60 |       <div>
61 |         Select color: <StatefulTabSelect options={options} initialValue="red" />
62 |       </div>
63 |     );
64 |   }
65 | }
66 |

--------------------------------------------------------------------------------
/src/c02/TabSelector.css:
--------------------------------------------------------------------------------
 1 | .tab-selector {
 2 |   display: inline-block;
 3 | }
 4 | .tab-selector ul,
 5 | .tab-selector li {
 6 |   display: inline;
 7 |   padding: 0;
 8 |   margin: 0;
 9 |   list-style: none;
10 | }
11 | 
12 | .tab-selector li {
13 |   display: inline-block;
14 |   padding: 5px 10px;
15 |   margin: 0 10px;
16 |   border: 1px solid #999;
17 |   cursor: default;
18 | }
19 | 
20 | .tab-selector li.selected {
21 |   background-color: #777;
22 |   color: #fff;
23 |   border-color: #777;
24 | }
25 |

--------------------------------------------------------------------------------
/src/c02/TabSelector.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from "react";
 2 | import PropTypes from "prop-types";
 3 | import "./TabSelector.css";
 4 | 
 5 | export default class TabSelector extends PureComponent {
 6 |   static propTypes = {
 7 |     value: PropTypes.string,
 8 |     options: PropTypes.array,
 9 |     onChange: PropTypes.func
10 |   };
11 | 
12 |   static defaultProps = {
13 |     value: null,
14 |     options: [],
15 |     onChange: () => {}
16 |   };
17 |   render() {
18 |     const { options, value, onChange } = this.props;
19 |     return (
20 |       <div className="tab-selector">
21 |         <ul>
22 |           {options.map(opt => (
23 |             <li
24 |               key={opt.value}
25 |               className={`tab-item ${
26 |                 opt.value === this.props.value
27 |                   ? "selected"
28 |                   : ""
29 |               }`}
30 |               onClick={() => this.props.onChange(opt.value)}
31 |             >
32 |               {opt.name}
33 |             </li>
34 |           ))}
35 |         </ul>
36 |       </div>
37 |     );
38 |   }
39 | }
40 | 
41 | const options = [
42 |   { name: "Red", value: "red" },
43 |   { name: "Blue", value: "blue" },
44 |   { name: "Orange", value: "orange" }
45 | ];
46 | 
47 | export class TabSelectorSample extends PureComponent {
48 |   state = {
49 |     color: null
50 |   };
51 |   render() {
52 |     return (
53 |       <div>
54 |         Select color:{" "}
55 |         <TabSelector
56 |           options={options}
57 |           value={this.state.color}
58 |           onChange={c => this.setState({ color: c })}
59 |         />
60 |       </div>
61 |     );
62 |   }
63 | }
64 |

--------------------------------------------------------------------------------
/src/c03/Clock.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default class Clock extends React.Component {
 4 |   constructor(props) {
 5 |     super(props);
 6 |     console.log("Clock constructed");
 7 |     this.state = { date: new Date() };
 8 |   }
 9 | 
10 |   componentDidMount() {
11 |     console.log("Clock did mount");
12 |     this.timerID = setInterval(() => this.tick(), 1000);
13 |   }
14 | 
15 |   componentWillUnmount() {
16 |     console.log("Clock will unmount");
17 |     clearInterval(this.timerID);
18 |   }
19 | 
20 |   componentDidUpdate() {
21 |     console.log("Clock did update");
22 |   }
23 | 
24 |   tick() {
25 |     this.setState({
26 |       date: new Date()
27 |     });
28 |   }
29 | 
30 |   render() {
31 |     return (
32 |       <div>
33 |         <h1>Hello, world!</h1>
34 |         <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
35 |       </div>
36 |     );
37 |   }
38 | }
39 |

--------------------------------------------------------------------------------
/src/c04/Clock.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default class Clock extends React.Component {
 4 |   constructor(props) {
 5 |     super(props);
 6 |     console.log("Clock constructed");
 7 |     this.state = { date: new Date() };
 8 |   }
 9 | 
10 |   componentDidMount() {
11 |     console.log("Clock did mount");
12 |     this.timerID = setInterval(() => this.tick(), 1000);
13 |   }
14 | 
15 |   componentWillUnmount() {
16 |     console.log("Clock will unmount");
17 |     clearInterval(this.timerID);
18 |   }
19 | 
20 |   componentDidUpdate() {
21 |     console.log("Clock did update");
22 |   }
23 | 
24 |   tick() {
25 |     this.setState({
26 |       date: new Date()
27 |     });
28 |   }
29 | 
30 |   render() {
31 |     return (
32 |       <div>
33 |         <h2>
34 |           It is {this.state.date.toLocaleTimeString()}.
35 |         </h2>
36 |       </div>
37 |     );
38 |   }
39 | }
40 |

--------------------------------------------------------------------------------
/src/c04/SnapshotSample.css:
--------------------------------------------------------------------------------
1 | .snapshot-sample {
2 |   overflow: auto;
3 |   height: 100px;
4 |   widows: 300px;
5 |   border: 1px solid #eee;
6 |   padding: 20px;
7 | }
8 |

--------------------------------------------------------------------------------
/src/c04/SnapshotSample.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from "react";
 2 | import PropTypes from "prop-types";
 3 | import "./SnapshotSample.css";
 4 | 
 5 | export default class SnapshotSample extends PureComponent {
 6 |   state = {
 7 |     messages: []
 8 |   };
 9 | 
10 |   handleNewMessage() {
11 |     this.setState(prev => ({
12 |       messages: [
13 |         `msg ${prev.messages.length}`,
14 |         ...prev.messages
15 |       ]
16 |     }));
17 |   }
18 | 
19 |   componentDidMount() {
20 |     for (let i = 0; i < 20; i++) this.handleNewMessage();
21 |     this.interval = window.setInterval(() => {
22 |       if (this.state.messages.length > 200) {
23 |         window.clearInterval(this.interval);
24 |         return;
25 |       }
26 |       this.handleNewMessage();
27 |     }, 1000);
28 |   }
29 |   componentWillUnmount() {
30 |     window.clearInterval(this.interval);
31 |   }
32 | 
33 |   getSnapshotBeforeUpdate() {
34 |     return this.rootNode.scrollHeight;
35 |   }
36 | 
37 |   componentDidUpdate(
38 |     prevProps,
39 |     prevState,
40 |     prevScrollHeight
41 |   ) {
42 |     const scrollTop = this.rootNode.scrollTop;
43 |     if (scrollTop < 5) return;
44 |     this.rootNode.scrollTop =
45 |       scrollTop +
46 |       (this.rootNode.scrollHeight - prevScrollHeight);
47 |   }
48 | 
49 |   render() {
50 |     return (
51 |       <div
52 |         className="snapshot-sample"
53 |         ref={n => (this.rootNode = n)}
54 |       >
55 |         {this.state.messages.map(msg => <div>{msg}</div>)}
56 |       </div>
57 |     );
58 |   }
59 | }
60 |

--------------------------------------------------------------------------------
/src/c05/DomDiff.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | 
3 | export default () => (
4 |   <a href="https://supnate.github.io/react-dom-diff/index.html" target="_blank">
5 |     https://supnate.github.io/react-dom-diff/index.html
6 |   </a>
7 | );
8 |

--------------------------------------------------------------------------------
/src/c06/AdvancedTabSelector.js:
--------------------------------------------------------------------------------
 1 | import React, { PureComponent } from "react";
 2 | import PropTypes from "prop-types";
 3 | 
 4 | export default class AdvancedTabSelector extends PureComponent {
 5 |   static propTypes = {
 6 |     value: PropTypes.object,
 7 |     options: PropTypes.array,
 8 |     onChange: PropTypes.func,
 9 |     children: PropTypes.func
10 |   };
11 | 
12 |   static defaultProps = {
13 |     value: null,
14 |     options: [],
15 |     onChange: () => {},
16 |     children: () => {}
17 |   };
18 | 
19 |   render() {
20 |     const { options, value, onChange } = this.props;
21 |     return (
22 |       <div className="tab-selector">
23 |         <ul>
24 |           {options.map(opt => (
25 |             <li
26 |               key={opt.value}
27 |               className={`tab-item ${
28 |                 opt.value === this.props.value ? "selected" : ""
29 |               }`}
30 |               onClick={() => this.props.onChange(opt.value)}
31 |             >
32 |               {opt.name}
33 |             </li>
34 |           ))}
35 |         </ul>
36 |         <br />
37 |         <br />
38 |         {this.props.value && this.props.children(this.props.value)}
39 |       </div>
40 |     );
41 |   }
42 | }
43 | 
44 | const colors = [
45 |   { name: "Red", value: "red" },
46 |   { name: "Blue", value: "blue" },
47 |   { name: "Orange", value: "orange" }
48 | ];
49 | 
50 | const animals = [
51 |   { name: "Tiger", value: "tiger" },
52 |   { name: "Elephant", value: "elephant" },
53 |   { name: "Cow", value: "cow" }
54 | ];
55 | 
56 | export class AdvancedTabSelectorSample extends PureComponent {
57 |   state = {
58 |     color: null
59 |   };
60 |   render() {
61 |     return (
62 |       <div>
63 |         <h3>Select color: </h3>
64 |         <AdvancedTabSelector
65 |           options={colors}
66 |           value={this.state.color}
67 |           onChange={c => this.setState({ color: c })}
68 |         >
69 |           {color => (
70 |             <span
71 |               style={{
72 |                 display: "inline-block",
73 |                 backgroundColor: color,
74 |                 width: "40px",
75 |                 height: "40px"
76 |               }}
77 |             />
78 |           )}
79 |         </AdvancedTabSelector>
80 |         <br />
81 |         <br />
82 |         <br />
83 |         <h3>Select animal: </h3>
84 |         <AdvancedTabSelector
85 |           options={animals}
86 |           value={this.state.animal}
87 |           onChange={c => this.setState({ animal: c })}
88 |         >
89 |           {animal => (
90 |             <img width="100px" src={require(`../../images/${animal}.png`)} />
91 |           )}
92 |         </AdvancedTabSelector>
93 |       </div>
94 |     );
95 |   }
96 | }
97 |

--------------------------------------------------------------------------------
/src/c06/withTimer.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default function withTimer(WrappedComponent) {
 4 |   return class extends React.Component {
 5 |     state = { time: new Date() };
 6 |     componentDidMount() {
 7 |       this.timerID = setInterval(() => this.tick(), 1000);
 8 |     }
 9 | 
10 |     componentWillUnmount() {
11 |       clearInterval(this.timerID);
12 |     }
13 | 
14 |     tick() {
15 |       this.setState({
16 |         time: new Date()
17 |       });
18 |     }
19 |     render() {
20 |       return <WrappedComponent time={this.state.time} {...this.props} />;
21 |     }
22 |   };
23 | }
24 |

--------------------------------------------------------------------------------
/src/c07/LocaleSample.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const enStrings = {
 4 |   submit: "Submit",
 5 |   cancel: "Cancel"
 6 | };
 7 | 
 8 | const cnStrings = {
 9 |   submit: "提交",
10 |   cancel: "取消"
11 | };
12 | const LocaleContext = React.createContext(enStrings);
13 | 
14 | class LocaleProvider extends React.Component {
15 |   state = { locale: cnStrings };
16 |   toggleLocale = () => {
17 |     const locale =
18 |       this.state.locale === enStrings
19 |         ? cnStrings
20 |         : enStrings;
21 |     this.setState({ locale });
22 |   };
23 |   render() {
24 |     return (
25 |       <LocaleContext.Provider value={this.state.locale}>
26 |         <button onClick={this.toggleLocale}>
27 |           切换语言
28 |         </button>
29 |         {this.props.children}
30 |       </LocaleContext.Provider>
31 |     );
32 |   }
33 | }
34 | 
35 | class LocaledButtons extends React.Component {
36 |   render() {
37 |     return (
38 |       <LocaleContext.Consumer>
39 |         {locale => (
40 |           <div>
41 |             <button>{locale.cancel}</button>
42 |              <button>{locale.submit}</button>
43 |           </div>
44 |         )}
45 |       </LocaleContext.Consumer>
46 |     );
47 |   }
48 | }
49 | 
50 | export default () => (
51 |   <div>
52 |     <LocaleProvider>
53 |       <div>
54 |         <br />
55 |         <LocaledButtons />
56 |       </div>
57 |     </LocaleProvider>
58 |     <LocaledButtons />
59 |   </div>
60 | );
61 |

--------------------------------------------------------------------------------
/src/c11/PureRedux.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {
 3 |   createStore,
 4 |   combineReducers,
 5 |   bindActionCreators
 6 | } from "redux";
 7 | 
 8 | function run() {
 9 |   // Store initial state
10 |   const initialState = { count: 0 };
11 | 
12 |   // reducer
13 |   const counter = (state = initialState, action) => {
14 |     switch (action.type) {
15 |       case "PLUS_ONE":
16 |         return { count: state.count + 1 };
17 |       case "MINUS_ONE":
18 |         return { count: state.count - 1 };
19 |       case "CUSTOM_COUNT":
20 |         return {
21 |           count: state.count + action.payload.count
22 |         };
23 |       default:
24 |         break;
25 |     }
26 |     return state;
27 |   };
28 | 
29 |   const todos = (state = {}) => state;
30 | 
31 |   // Create store
32 |   const store = createStore(
33 |     combineReducers({
34 |       todos,
35 |       counter
36 |     })
37 |   );
38 | 
39 |   // Action creator
40 |   function plusOne() {
41 |     // action
42 |     return { type: "PLUS_ONE" };
43 |   }
44 | 
45 |   function minusOne() {
46 |     return { type: "MINUS_ONE" };
47 |   }
48 | 
49 |   function customCount(count) {
50 |     return { type: "CUSTOM_COUNT", payload: { count } };
51 |   }
52 | 
53 |   plusOne = bindActionCreators(plusOne, store.dispatch);
54 | 
55 |   store.subscribe(() => console.log(store.getState()));
56 |   // store.dispatch(plusOne());
57 |   plusOne();
58 |   store.dispatch(minusOne());
59 |   store.dispatch(customCount(5));
60 | }
61 | export default () => (
62 |   <div>
63 |     <button onClick={run}>Run</button>
64 |     <p>* 请打开控制台查看运行结果</p>
65 |   </div>
66 | );
67 |

--------------------------------------------------------------------------------
/src/c12/Counter.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { bindActionCreators, createStore } from "redux";
 3 | import { Provider, connect } from "react-redux";
 4 | 
 5 | // Store initial state
 6 | const initialState = { count: 0 };
 7 | 
 8 | // reducer
 9 | const counter = (state = initialState, action) => {
10 |   switch (action.type) {
11 |     case "PLUS_ONE":
12 |       return { count: state.count + 1 };
13 |     case "MINUS_ONE":
14 |       return { count: state.count - 1 };
15 |     case "CUSTOM_COUNT":
16 |       return { count: state.count + action.payload.count };
17 |     default:
18 |       break;
19 |   }
20 |   return state;
21 | };
22 | 
23 | // Create store
24 | const store = createStore(counter);
25 | 
26 | // Action creator
27 | function plusOne() {
28 |   // action
29 |   return { type: "PLUS_ONE" };
30 | }
31 | 
32 | function minusOne() {
33 |   return { type: "MINUS_ONE" };
34 | }
35 | 
36 | export class Counter extends React.Component {
37 |   render() {
38 |     const { count, plusOne, minusOne } = this.props;
39 |     return (
40 |       <div className="counter">
41 |         <button onClick={minusOne}>-</button>
42 |         <span style={{ display: "inline-block", margin: "0 10px" }}>
43 |           {count}
44 |         </span>
45 |         <button onClick={plusOne}>+</button>
46 |       </div>
47 |     );
48 |   }
49 | }
50 | 
51 | function mapStateToProps(state) {
52 |   return {
53 |     count: state.count
54 |   };
55 | }
56 | 
57 | function mapDispatchToProps(dispatch) {
58 |   return bindActionCreators({ plusOne, minusOne }, dispatch);
59 | }
60 | 
61 | const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);
62 | 
63 | export default class CounterSample extends React.Component {
64 |   render() {
65 |     return (
66 |       <Provider store={store}>
67 |         <ConnectedCounter />
68 |       </Provider>
69 |     );
70 |   }
71 | }
72 |

--------------------------------------------------------------------------------
/src/c13/AsyncAction.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default () => (
 4 |   <a
 5 |     href="http://demo.rekit.org/element/src%2Ffeatures%2Fhome%2Fredux%2FsaveFile.js/code"
 6 |     target="_blank"
 7 |   >
 8 |     http://demo.rekit.org/element/src%2Ffeatures%2Fhome%2Fredux%2FsaveFile.js/code
 9 |   </a>
10 | );
11 |

--------------------------------------------------------------------------------
/src/c13/ReduxMiddleware.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const link =
 4 |   "http://demo.rekit.org/element/src%2Fcommon%2FconfigStore.js/code";
 5 | export default () => (
 6 |   <a href={link} target="_blank">
 7 |     {link}
 8 |   </a>
 9 | );
10 |

--------------------------------------------------------------------------------
/src/c14/OrgActions.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const link =
 4 |   "https://github.com/reduxjs/redux/blob/master/examples/todomvc/src/actions/index.js";
 5 | export default () => (
 6 |   <a href={link} target="_blank">
 7 |     {link}
 8 |   </a>
 9 | );
10 |

--------------------------------------------------------------------------------
/src/c16/RouterSample.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {
 3 |   HashRouter as Router,
 4 |   Route,
 5 |   Link
 6 | } from "react-router-dom";
 7 | import { MemoryRouter } from "react-router";
 8 | 
 9 | const Home = () => <h1>Home</h1>;
10 | const Hello = () => <h1>Hello</h1>;
11 | const About = () => <h1>About Us</h1>;
12 | 
13 | export default class RouterSample extends React.PureComponent {
14 |   render() {
15 |     return (
16 |       <Router>
17 |         <div>
18 |           <ul id="menu">
19 |             <li>
20 |               <Link to="/home">Home</Link>
21 |             </li>
22 |             <li>
23 |               <Link to="/hello">Hello</Link>
24 |             </li>
25 |             <li>
26 |               <Link to="/about">About</Link>
27 |             </li>
28 |           </ul>
29 | 
30 |           <div id="page-container">
31 |             <Route path="/home" component={Home} />
32 |             <Route path="/hello" component={Hello} />
33 |             <Route path="/about" component={About} />
34 |           </div>
35 |         </div>
36 |       </Router>
37 |     );
38 |   }
39 | }
40 |

--------------------------------------------------------------------------------
/src/c17/NestedRoute.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {
 3 |   BrowserRouter as Router,
 4 |   Route,
 5 |   Link
 6 | } from "react-router-dom";
 7 | 
 8 | const Category = ({ match }) => (
 9 |   <h1>Sub Category {match.params.subId}</h1>
10 | );
11 | 
12 | const SubCategory = ({ match }) => (
13 |   <div>
14 |     <h1>Category {match.params.id}</h1>
15 | 
16 |     <ul id="menu">
17 |       <li>
18 |         <Link to={`/category/${match.params.id}/sub/1`}>
19 |           Sub Category 1
20 |         </Link>
21 |       </li>
22 |       <li>
23 |         <Link to={`/category/${match.params.id}/sub/2`}>
24 |           Sub Category 2
25 |         </Link>
26 |       </li>
27 |       <li>
28 |         <Link to={`/category/${match.params.id}/sub/3`}>
29 |           Sub Category 3
30 |         </Link>
31 |       </li>
32 |     </ul>
33 |     <div id="page-container-2">
34 |       <Route
35 |         path="/category/:id/sub/:subId"
36 |         component={Category}
37 |       />
38 |     </div>
39 |   </div>
40 | );
41 | 
42 | export default class NestedRoute extends React.PureComponent {
43 |   render() {
44 |     return (
45 |       <Router>
46 |         <div>
47 |           <ul id="menu">
48 |             <li>
49 |               <Link to="/category/1">Category 1</Link>
50 |             </li>
51 |             <li>
52 |               <Link to="/category/2">Category 2</Link>
53 |             </li>
54 |             <li>
55 |               <Link to="/category/3">Category 3</Link>
56 |             </li>
57 |           </ul>
58 | 
59 |           <div id="page-container">
60 |             <Route
61 |               path="/category/:id"
62 |               component={SubCategory}
63 |             />
64 |           </div>
65 |         </div>
66 |       </Router>
67 |     );
68 |   }
69 | }
70 |

--------------------------------------------------------------------------------
/src/c17/RouterParams.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {
 3 |   BrowserRouter as Router,
 4 |   Route,
 5 |   Link
 6 | } from "react-router-dom";
 7 | 
 8 | const Topic = ({ match }) => (
 9 |   <h1>Topic {match.params.id}</h1>
10 | );
11 | 
12 | export default class RouterParams extends React.PureComponent {
13 |   render() {
14 |     return (
15 |       <Router>
16 |         <div>
17 |           <ul id="menu">
18 |             <li>
19 |               <Link to="/topic/1">Topic 1</Link>
20 |             </li>
21 |             <li>
22 |               <Link to="/topic/2">Topic 2</Link>
23 |             </li>
24 |             <li>
25 |               <Link to="/topic/3">Topic 3</Link>
26 |             </li>
27 |           </ul>
28 | 
29 |           <div id="page-container">
30 |             <Route path="/topic/:id" component={Topic} />
31 |           </div>
32 |         </div>
33 |       </Router>
34 |     );
35 |   }
36 | }
37 |

--------------------------------------------------------------------------------
/src/c29/FormBuilder.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import PropTypes from "prop-types";
  3 | import { Col, Form, Icon, Row, Tooltip } from "antd";
  4 | 
  5 | const FormItem = Form.Item;
  6 | 
  7 | const defaultFormItemLayout = {
  8 |   labelCol: { span: 8 },
  9 |   wrapperCol: { span: 16 }
 10 | };
 11 | 
 12 | function pickProps(source, props) {
 13 |   const target = {};
 14 |   props.forEach(prop => {
 15 |     if (prop in source) target[prop] = source[prop];
 16 |   });
 17 |   return target;
 18 | }
 19 | 
 20 | let ID_SEED = 0;
 21 | function getId() {
 22 |   ID_SEED += 1;
 23 |   return `form_builder_id_${ID_SEED}`;
 24 | }
 25 | 
 26 | class FormBuilder extends Component {
 27 |   static propTypes = {
 28 |     meta: PropTypes.object.isRequired,
 29 |     form: PropTypes.object.isRequired,
 30 |     disabled: PropTypes.bool
 31 |   };
 32 | 
 33 |   static defaultProps = {
 34 |     disabled: false,
 35 |     one: false
 36 |   };
 37 | 
 38 |   constructor(props) {
 39 |     super(props);
 40 |     this.renderElement = this.renderElement.bind(this);
 41 |   }
 42 | 
 43 |   getMeta() {
 44 |     const { meta } = this.props;
 45 |     return meta.elements ? meta : { elements: [meta] };
 46 |   }
 47 | 
 48 |   renderElement(element) {
 49 |     const meta = this.getMeta();
 50 | 
 51 |     // Handle form item props
 52 |     const label = element.tooltip ? (
 53 |       <span>
 54 |         {element.label}
 55 |         <Tooltip title={element.tooltip}>
 56 |           {" "}
 57 |           <Icon type="question-circle-o" />
 58 |         </Tooltip>
 59 |       </span>
 60 |     ) : (
 61 |       element.label
 62 |     );
 63 | 
 64 |     const formItemProps = {
 65 |       key: element.key,
 66 |       colon: meta.colon,
 67 |       ...(meta.formItemLayout ||
 68 |         (element.label ? defaultFormItemLayout : null)),
 69 |       label,
 70 |       ...pickProps(element, [
 71 |         "help",
 72 |         "extra",
 73 |         "labelCol",
 74 |         "wrapperCol",
 75 |         "colon",
 76 |         "hasFeedback",
 77 |         "validateStatus",
 78 |         "hasFeedback"
 79 |       ]),
 80 |       ...element.formItemProps
 81 |     };
 82 | 
 83 |     if (element.render) {
 84 |       return element.render.call(this, {
 85 |         formItemProps,
 86 |         element,
 87 |         disabled: this.props.disabled
 88 |       });
 89 |     }
 90 | 
 91 |     // Handle field props
 92 |     let rules = element.rules || [];
 93 |     if (element.required) {
 94 |       rules = [
 95 |         ...rules,
 96 |         {
 97 |           required: true,
 98 |           message: `${element.label ||
 99 |             element.key} is required.` // default to English, if needs localization, pass message to it.
100 |         }
101 |       ];
102 |     }
103 |     const fieldProps = {
104 |       ...pickProps(element, [
105 |         "getValueFromEvent",
106 |         "initialValue",
107 |         "normalize",
108 |         "trigger",
109 |         "valuePropName",
110 |         "validateTrigger",
111 |         "validateFirst"
112 |       ]),
113 |       rules,
114 |       ...element.fieldProps
115 |     };
116 | 
117 |     // Handle widget props
118 |     const wp = element.widgetProps || {};
119 |     const widgetProps = {
120 |       ...pickProps(element, [
121 |         "placeholder",
122 |         "type",
123 |         "className",
124 |         "class"
125 |       ]),
126 |       ...wp,
127 |       disabled:
128 |         element.disabled ||
129 |         wp.disabled ||
130 |         this.props.disabled
131 |     };
132 | 
133 |     if (!element.id) {
134 |       // widgetProps.id = formItemProps.id = getId();
135 |     }
136 | 
137 |     const { getFieldDecorator } = this.props.form;
138 |     return (
139 |       <FormItem {...formItemProps}>
140 |         {getFieldDecorator(
141 |           element.id || element.key,
142 |           fieldProps
143 |         )(
144 |           <element.widget {...widgetProps}>
145 |             {element.children || null}
146 |           </element.widget>
147 |         )}
148 |       </FormItem>
149 |     );
150 |   }
151 | 
152 |   renderLayout(elements) {
153 |     // Layout the form in columns
154 |     const columns = this.props.meta.columns || 1;
155 |     if (columns === 1) return elements;
156 |     const gutter = this.props.meta.gutter || 0;
157 |     const rows = [];
158 |     const colspan = 24 / columns;
159 |     for (let i = 0; i < elements.length; i += columns) {
160 |       const cols = [];
161 |       for (let j = 0; j < columns; j += 1) {
162 |         cols.push(
163 |           <Col key={j} span={colspan.toString()}>
164 |             {elements[i + j]}
165 |           </Col>
166 |         );
167 |       }
168 |       rows.push(
169 |         <Row key={i} gutter={gutter}>
170 |           {cols}
171 |         </Row>
172 |       );
173 |     }
174 |     return rows;
175 |   }
176 | 
177 |   render() {
178 |     return this.renderLayout(
179 |       this.getMeta().elements.map(this.renderElement)
180 |     );
181 |   }
182 | }
183 | 
184 | export default FormBuilder;
185 |

--------------------------------------------------------------------------------
/src/c29/FormSubmit.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | export default class FormSubmit extends React.PureComponent {
 4 |   state = {
 5 |     name: "",
 6 |     error: null
 7 |   };
 8 | 
 9 |   handleNameChange = evt => {
10 |     this.setState({
11 |       name: evt.target.value
12 |     });
13 |   };
14 | 
15 |   handleSubmit = evt => {
16 |     evt.preventDefault();
17 |     if (!this.state.name) {
18 |       this.setState({ error: "Name is required" });
19 |       return;
20 |     }
21 | 
22 |     this.setState(
23 |       {
24 |         error: null
25 |       },
26 |       () => {
27 |         console.log("Form submit: ", this.state);
28 |       }
29 |     );
30 |   };
31 |   render() {
32 |     return (
33 |       <form
34 |         className="comment-box"
35 |         onSubmit={this.handleSubmit}
36 |       >
37 |         <div>
38 |           <label>Name:</label>
39 |           <input
40 |             value={this.state.name}
41 |             onChange={this.handleNameChange}
42 |           />
43 |         </div>
44 |         {this.state.error && (
45 |           <div style={{ color: "red" }}>
46 |             {this.state.error}
47 |           </div>
48 |         )}
49 |         <div>
50 |           <button>Submit</button>
51 |         </div>
52 |       </form>
53 |     );
54 |   }
55 | }
56 |

--------------------------------------------------------------------------------
/src/c29/FormSubmitAntd.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import {
  3 |   Button,
  4 |   DatePicker,
  5 |   Form,
  6 |   Input,
  7 |   Select
  8 | } from "antd";
  9 | import FormBuilder from "./FormBuilder";
 10 | 
 11 | const Option = Select.Option;
 12 | 
 13 | const genderOptions = [
 14 |   { value: "male", displayName: "Male" },
 15 |   { value: "female", displayName: "Female" }
 16 | ].map(item => (
 17 |   <Option key={item.value} value={item.value}>
 18 |     {item.displayName}
 19 |   </Option>
 20 | ));
 21 | 
 22 | const formMeta = {
 23 |   colon: true,
 24 |   columns: 1,
 25 |   elements: [
 26 |     {
 27 |       key: "userName",
 28 |       label: "User name",
 29 |       tooltip: "user name",
 30 |       initialValue: "Nate",
 31 |       widget: Input,
 32 |       required: true
 33 |     },
 34 |     {
 35 |       key: "password",
 36 |       label: "Password",
 37 |       widget: Input,
 38 |       type: "password"
 39 |     },
 40 |     {
 41 |       key: "date",
 42 |       label: "Birth date",
 43 |       widget: DatePicker,
 44 |       widgetProps: { style: { width: "100%" } }
 45 |     },
 46 |     {
 47 |       key: "gender",
 48 |       label: "Gender",
 49 |       initialValue: "female",
 50 |       widget: Select,
 51 |       children: genderOptions
 52 |     },
 53 |     {
 54 |       key: "phone",
 55 |       label: "Phone",
 56 |       widget: Input,
 57 |       required: true,
 58 |       rules: [
 59 |         {
 60 |           pattern: /^\d+$/,
 61 |           message: "Phone must only contain numbers."
 62 |         },
 63 |         {
 64 |           min: 11,
 65 |           message: "Phone number at least lenght of 11"
 66 |         }
 67 |       ]
 68 |     },
 69 |     {
 70 |       key: "email",
 71 |       label: "Email",
 72 |       widget: Input,
 73 |       rules: [
 74 |         {
 75 |           type: "email",
 76 |           message: "Please input valid email address."
 77 |         }
 78 |       ]
 79 |     }
 80 |   ]
 81 | };
 82 | 
 83 | class FormSubmitAntd extends Component {
 84 |   constructor(props) {
 85 |     super(props);
 86 |     this.handleSubmit = this.handleSubmit.bind(this);
 87 |     this.resetForm = this.resetForm.bind(this);
 88 |   }
 89 | 
 90 |   resetForm() {
 91 |     this.props.form.resetFields();
 92 |   }
 93 | 
 94 |   handleSubmit(evt) {
 95 |     if (evt) evt.preventDefault();
 96 |     this.props.form.validateFieldsAndScroll(
 97 |       (errors, values) => {
 98 |         if (errors) {
 99 |           return;
100 |         }
101 |         console.log("Submit form: ", values);
102 |       }
103 |     );
104 |   }
105 | 
106 |   render() {
107 |     const { getFieldDecorator } = this.props.form;
108 |     return (
109 |       <Form
110 |         onSubmit={this.handleSubmit}
111 |         layout="horizontal"
112 |         style={{ width: "400px" }}
113 |       >
114 |         <FormBuilder
115 |           meta={formMeta}
116 |           form={this.props.form}
117 |         />
118 |         <div style={{ textAlign: "center" }}>
119 |           <Button type="primary" htmlType="submit">
120 |             Submit
121 |           </Button>   
122 |           <Button onClick={this.resetForm}>Reset</Button>
123 |         </div>
124 |       </Form>
125 |     );
126 |   }
127 | }
128 | 
129 | export default Form.create()(FormSubmitAntd);
130 |

--------------------------------------------------------------------------------
/src/c30/DynamicForm.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import _ from "lodash";
  3 | import {
  4 |   Button,
  5 |   DatePicker,
  6 |   Form,
  7 |   Input,
  8 |   Select
  9 | } from "antd";
 10 | import FormBuilder from "../c29/FormBuilder";
 11 | 
 12 | const Option = Select.Option;
 13 | 
 14 | const formMeta = {
 15 |   colon: true,
 16 |   columns: 1,
 17 |   elements: [
 18 |     {
 19 |       key: "userName",
 20 |       label: "User name",
 21 |       tooltip: "user name",
 22 |       widget: Input,
 23 |       required: true
 24 |     },
 25 |     {
 26 |       key: "job",
 27 |       label: "Job"
 28 |     },
 29 |     {
 30 |       key: "title",
 31 |       label: "Title",
 32 |       widget: Input
 33 |     }
 34 |   ]
 35 | };
 36 | 
 37 | class DynamicForm extends Component {
 38 |   state = {
 39 |     jobs: null
 40 |   };
 41 |   resetForm = () => {
 42 |     this.props.form.resetFields();
 43 |   };
 44 | 
 45 |   componentDidMount() {
 46 |     window.setTimeout(() => {
 47 |       const jobs = [
 48 |         "Software Engineer",
 49 |         "Student",
 50 |         "Doctor"
 51 |       ];
 52 |       this.setState(
 53 |         {
 54 |           jobs
 55 |         },
 56 |         () => {
 57 |           this.props.form.setFieldsValue({
 58 |             job: "Software Engineer"
 59 |           });
 60 |         }
 61 |       );
 62 |     }, 2000);
 63 |   }
 64 | 
 65 |   getMeta() {
 66 |     return {
 67 |       ...formMeta,
 68 |       elements: _.compact(
 69 |         formMeta.elements.map(m => {
 70 |           if (m.key === "job") {
 71 |             return {
 72 |               ...m,
 73 |               widget: Select,
 74 |               initialValue: "loading",
 75 |               children: this.state.jobs
 76 |                 ? this.state.jobs.map(job => (
 77 |                     <Option key={job}>{job}</Option>
 78 |                   ))
 79 |                 : [
 80 |                     <Option key="loading">
 81 |                       Loading...
 82 |                     </Option>
 83 |                   ]
 84 |             };
 85 |           }
 86 |           if (
 87 |             m.key === "title" &&
 88 |             this.props.form.getFieldValue("job") !==
 89 |               "Software Engineer"
 90 |           ) {
 91 |             return null;
 92 |           }
 93 |           return m;
 94 |         })
 95 |       )
 96 |     };
 97 |   }
 98 | 
 99 |   render() {
100 |     return (
101 |       <Form
102 |         onSubmit={this.handleSubmit}
103 |         layout="horizontal"
104 |         style={{ width: "400px" }}
105 |       >
106 |         <FormBuilder
107 |           meta={this.getMeta()}
108 |           form={this.props.form}
109 |         />
110 |         <div style={{ textAlign: "center" }}>
111 |           <Button
112 |             disabled={!this.state.jobs}
113 |             type="primary"
114 |             htmlType="submit"
115 |           >
116 |             Submit
117 |           </Button>   
118 |           <Button onClick={this.resetForm}>Reset</Button>
119 |         </div>
120 |       </Form>
121 |     );
122 |   }
123 | }
124 | 
125 | export default Form.create()(DynamicForm);
126 |

--------------------------------------------------------------------------------
/src/c31/App.css:
--------------------------------------------------------------------------------
 1 | .list-page-app .detail-page li {
 2 |   list-style: none;
 3 |   padding: 10px;
 4 | }
 5 | .list-page-app .detail-page label {
 6 |   font-weight: bold;
 7 |   display: inline-block;
 8 |   width: 100px;
 9 | }
10 |

--------------------------------------------------------------------------------
/src/c31/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import axios from "axios";
 3 | import { bindActionCreators, createStore, applyMiddleware } from "redux";
 4 | import { Provider, connect } from "react-redux";
 5 | import thunk from "redux-thunk";
 6 | import { HashRouter as Router, Route, Link } from "react-router-dom";
 7 | import { Pagination, Table, Input } from "antd";
 8 | import ListPage from "./ListPage";
 9 | import DetailPage from "./DetailPage";
10 | import reducer from "./reducer";
11 | 
12 | require("./App.css");
13 | const createLogger = require("redux-logger").createLogger;
14 | const logger = createLogger({ collapsed: true });
15 | 
16 | // Create store
17 | const store = createStore(reducer, {}, applyMiddleware(thunk, logger));
18 | 
19 | export default class ListPageSample extends React.Component {
20 |   render() {
21 |     return (
22 |       <Provider store={store}>
23 |         <Router>
24 |           <div className="list-page-app">
25 |             <Route path="/list-page/:page?" component={ListPage} />
26 |             <Route path="/user/:userId" component={DetailPage} />
27 |           </div>
28 |         </Router>
29 |       </Provider>
30 |     );
31 |   }
32 | }
33 |

--------------------------------------------------------------------------------
/src/c31/DetailPage.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import axios from "axios";
 3 | import { bindActionCreators } from "redux";
 4 | import { connect } from "react-redux";
 5 | import { Link } from "react-router-dom";
 6 | import { fetchUser } from "./actions";
 7 | 
 8 | class DetailPage extends React.Component {
 9 |   componentDidMount() {
10 |     if (!this.getUser()) this.props.fetchUser(this.props.match.params.userId);
11 |   }
12 | 
13 |   getUser() {
14 |     return this.props.list.byId
15 |       ? this.props.list.byId[this.props.match.params.userId]
16 |       : null;
17 |   }
18 | 
19 |   render() {
20 |     const user = this.getUser();
21 | 
22 |     if (!user) return "loading...";
23 |     const { first_name, last_name } = user;
24 |     return (
25 |       <div className="detail-page">
26 |         <Link to="/list-page">Back to list</Link>
27 |         <br />
28 |         <br />
29 |         <br />
30 |         <ul>
31 |           <li>
32 |             <label>First name:</label>
33 |             <span>{first_name}</span>
34 |           </li>
35 |           <li>
36 |             <label>Last name:</label>
37 |             <span>{last_name}</span>
38 |           </li>
39 |         </ul>
40 |       </div>
41 |     );
42 |   }
43 | }
44 | 
45 | function mapStateToProps(state) {
46 |   return {
47 |     list: state,
48 |   };
49 | }
50 | 
51 | function mapDispatchToProps(dispatch) {
52 |   return bindActionCreators({ fetchUser }, dispatch);
53 | }
54 | 
55 | export default connect(
56 |   mapStateToProps,
57 |   mapDispatchToProps,
58 | )(DetailPage);
59 |

--------------------------------------------------------------------------------
/src/c31/ListPage.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { bindActionCreators } from "redux";
  3 | import { connect } from "react-redux";
  4 | import { Pagination, Table, Input } from "antd";
  5 | import { withRouter } from "react-router";
  6 | import { Link } from "react-router-dom";
  7 | import { fetchList } from "./actions";
  8 | 
  9 | class ListPage extends React.Component {
 10 |   state = { search: "" };
 11 |   componentDidMount() {
 12 |     const page = this.props.match.params.page || 1;
 13 |     this.fetchData(page);
 14 |   }
 15 | 
 16 |   componentDidUpdate(prevProps) {
 17 |     const page = this.props.match.params.page || 1;
 18 |     const prevPage = prevProps.match.params.page || 1;
 19 |     if (prevPage !== page && !this.props.list.fetchListPending) {
 20 |       this.fetchData(page);
 21 |     }
 22 |   }
 23 | 
 24 |   fetchData(page) {
 25 |     this.props.fetchList(page);
 26 |   }
 27 | 
 28 |   getDataSource() {
 29 |     const { items, byId } = this.props.list;
 30 |     if (!items) return [];
 31 |     return items.map(id => byId[id]);
 32 |   }
 33 |   getColumns() {
 34 |     return [
 35 |       {
 36 |         title: "First Name",
 37 |         dataIndex: "first_name",
 38 |         key: "first_name",
 39 |         width: "200px",
 40 |         render: (firstName, rec) => (
 41 |           <Link to={`/user/${rec.id}`}>{firstName}</Link>
 42 |         ),
 43 |       },
 44 |       {
 45 |         title: "Last Name",
 46 |         dataIndex: "last_name",
 47 |         key: "last_name",
 48 |         width: "200px",
 49 |       },
 50 |     ];
 51 |   }
 52 |   handleSearch = keyword => {
 53 |     const { page, pageSize } = this.props.list;
 54 |     this.props.fetchList(page, pageSize, keyword);
 55 |   };
 56 |   handlePageChange = newPage => {
 57 |     this.props.history.push(`/list-page/${newPage}`);
 58 |     // this.props.fetchList(newPage);
 59 |   };
 60 |   render() {
 61 |     if (!this.props.list.items) return "loading...";
 62 |     const { page, total, pageSize, keyword } = this.props.list;
 63 |     return (
 64 |       <div>
 65 |         <h2>User List</h2>
 66 |         <Input.Search
 67 |           value={this.state.search}
 68 |           onChange={e => this.setState({ search: e.target.value })}
 69 |           style={{ width: "200px" }}
 70 |           onSearch={this.handleSearch}
 71 |         />
 72 |         <br />
 73 |         <br />
 74 |         <Table
 75 |           dataSource={this.getDataSource()}
 76 |           columns={this.getColumns()}
 77 |           style={{ width: "400px" }}
 78 |           rowKey="id"
 79 |           loading={this.props.list.fetchListPending}
 80 |           pagination={false}
 81 |         />
 82 |         <br />
 83 |         <Pagination
 84 |           current={page}
 85 |           onChange={this.handlePageChange}
 86 |           total={total}
 87 |           pageSize={pageSize}
 88 |         />
 89 |       </div>
 90 |     );
 91 |   }
 92 | }
 93 | 
 94 | function mapStateToProps(state) {
 95 |   return {
 96 |     list: state,
 97 |   };
 98 | }
 99 | 
100 | function mapDispatchToProps(dispatch) {
101 |   return bindActionCreators({ fetchList }, dispatch);
102 | }
103 | 
104 | export default withRouter(
105 |   connect(
106 |     mapStateToProps,
107 |     mapDispatchToProps,
108 |   )(ListPage),
109 | );
110 |

--------------------------------------------------------------------------------
/src/c31/actions.js:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 | 
 3 | // Action creator
 4 | export function fetchList(page = 1, keyword = "", pageSize = 3) {
 5 |   // action
 6 |   return dispatch => {
 7 |     // optionally you can have getState as the second argument
 8 |     dispatch({
 9 |       type: "FETCH_LIST_BEGIN",
10 |     });
11 | 
12 |     const promise = new Promise((resolve, reject) => {
13 |       const doRequest = axios.get(
14 |         `https://reqres.in/api/users?page=${page}&per_page=${pageSize}&q=${keyword}`,
15 |       );
16 | 
17 |       doRequest.then(
18 |         res => {
19 |           dispatch({
20 |             type: "FETCH_LIST_SUCCESS",
21 |             data: {
22 |               items: res.data.data,
23 |               page,
24 |               pageSize,
25 |               total: res.data.total,
26 |             },
27 |           });
28 |           resolve(res);
29 |         },
30 |         err => {
31 |           dispatch({
32 |             type: "FETCH_LIST_ERROR",
33 |             data: { error: err },
34 |           });
35 |           reject(err);
36 |         },
37 |       );
38 |     });
39 | 
40 |     return promise;
41 |   };
42 | }
43 | 
44 | export function fetchUser(id) {
45 |   // action
46 |   return dispatch => {
47 |     // optionally you can have getState as the second argument
48 |     dispatch({
49 |       type: "FETCH_USER_BEGIN",
50 |     });
51 | 
52 |     const promise = new Promise((resolve, reject) => {
53 |       const doRequest = axios.get(`https://reqres.in/api/users/${id}`);
54 | 
55 |       doRequest.then(
56 |         res => {
57 |           dispatch({
58 |             type: "FETCH_USER_SUCCESS",
59 |             data: res.data,
60 |           });
61 |           resolve(res);
62 |         },
63 |         err => {
64 |           dispatch({
65 |             type: "FETCH_USER_ERROR",
66 |             data: { error: err },
67 |           });
68 |           reject(err);
69 |         },
70 |       );
71 |     });
72 | 
73 |     return promise;
74 |   };
75 | }
76 |

--------------------------------------------------------------------------------
/src/c31/reducer.js:
--------------------------------------------------------------------------------
 1 | const initialState = {
 2 |   items: [],
 3 |   page: 1,
 4 |   pageSize: 3,
 5 |   total: 0,
 6 |   byId: {},
 7 |   fetchListPending: false,
 8 |   fetchListError: null,
 9 |   listNeedReload: false,
10 | };
11 | // reducer
12 | export default (state = initialState, action) => {
13 |   switch (action.type) {
14 |     case "FETCH_LIST_BEGIN":
15 |       return {
16 |         ...state,
17 |         fetchListPending: true,
18 |         fetchListError: null,
19 |       };
20 |     case "FETCH_LIST_SUCCESS": {
21 |       const byId = {};
22 |       const items = [];
23 |       action.data.items.forEach(item => {
24 |         items.push(item.id);
25 |         byId[item.id] = item;
26 |       });
27 |       return {
28 |         ...state,
29 |         byId,
30 |         items,
31 |         page: action.data.page,
32 |         pageSize: action.data.pageSize,
33 |         total: action.data.total,
34 |         fetchListPending: false,
35 |         fetchListError: null,
36 |       };
37 |     }
38 |     case "FETCH_LIST_ERROR":
39 |       return {
40 |         ...state,
41 |         fetchListPending: false,
42 |         fetchListError: action.data,
43 |       };
44 |       break;
45 |     default:
46 |       break;
47 |   }
48 |   return state;
49 | };
50 |

--------------------------------------------------------------------------------
/src/c33/MultipleRequest.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import _ from "lodash";
  3 | import { Button, DatePicker, Form, Input, Select } from "antd";
  4 | import { createResource, createCache } from "simple-cache-provider";
  5 | import FormBuilder from "../c29/FormBuilder";
  6 | 
  7 | const Option = Select.Option;
  8 | 
  9 | const formMeta = {
 10 |   colon: true,
 11 |   columns: 1,
 12 |   elements: [
 13 |     {
 14 |       key: "userName",
 15 |       label: "User name",
 16 |       tooltip: "user name",
 17 |       widget: Input,
 18 |       required: true,
 19 |     },
 20 |     {
 21 |       key: "job",
 22 |       label: "Job",
 23 |     },
 24 |     {
 25 |       key: "title",
 26 |       label: "Title",
 27 |       widget: Input,
 28 |     },
 29 |   ],
 30 | };
 31 | 
 32 | function fetchUserInfo() {}
 33 | function fetchProvince() {}
 34 | function fetchCities(provinceId) {}
 35 | 
 36 | class MultipleRequest extends Component {
 37 |   state = {
 38 |     jobs: null,
 39 |   };
 40 |   resetForm = () => {
 41 |     this.props.form.resetFields();
 42 |   };
 43 | 
 44 |   componentDidMount() {
 45 |     window.setTimeout(() => {
 46 |       const jobs = ["Software Engineer", "Student", "Doctor"];
 47 |       this.setState(
 48 |         {
 49 |           jobs,
 50 |         },
 51 |         () => {
 52 |           this.props.form.setFieldsValue({
 53 |             job: "Software Engineer",
 54 |           });
 55 |         },
 56 |       );
 57 |     }, 2000);
 58 |   }
 59 | 
 60 |   getMeta() {
 61 |     return {
 62 |       ...formMeta,
 63 |       elements: _.compact(
 64 |         formMeta.elements.map(m => {
 65 |           if (m.key === "job") {
 66 |             return {
 67 |               ...m,
 68 |               widget: Select,
 69 |               initialValue: "loading",
 70 |               children: this.state.jobs
 71 |                 ? this.state.jobs.map(job => <Option key={job}>{job}</Option>)
 72 |                 : [<Option key="loading">Loading...</Option>],
 73 |             };
 74 |           }
 75 |           if (
 76 |             m.key === "title" &&
 77 |             this.props.form.getFieldValue("job") !== "Software Engineer"
 78 |           ) {
 79 |             return null;
 80 |           }
 81 |           return m;
 82 |         }),
 83 |       ),
 84 |     };
 85 |   }
 86 | 
 87 |   render() {
 88 |     return (
 89 |       <Form
 90 |         onSubmit={this.handleSubmit}
 91 |         layout="horizontal"
 92 |         style={{ width: "400px" }}
 93 |       >
 94 |         <FormBuilder meta={this.getMeta()} form={this.props.form} />
 95 |         <div style={{ textAlign: "center" }}>
 96 |           <Button disabled={!this.state.jobs} type="primary" htmlType="submit">
 97 |             Submit
 98 |           </Button>   
 99 |           <Button onClick={this.resetForm}>Reset</Button>
100 |         </div>
101 |       </Form>
102 |     );
103 |   }
104 | }
105 | 
106 | export default Form.create()(MultipleRequest);
107 |

--------------------------------------------------------------------------------
/src/c35/App.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import _ from "lodash";
  3 | import { HashRouter as Router, Route, Link } from "react-router-dom";
  4 | import { Button, Steps, Form, Modal } from "antd";
  5 | import Step1 from "./Step1";
  6 | import Step2 from "./Step2";
  7 | import Step3 from "./Step3";
  8 | 
  9 | class App extends React.Component {
 10 |   state = {
 11 |     allValues: {}
 12 |   };
 13 | 
 14 |   pushUrl(path) {
 15 |     window.history.pushState(null, "", `/#${path}`);
 16 |     this.forceUpdate();
 17 |   }
 18 | 
 19 |   handleNext = () => {
 20 |     console.log("form values: ", this.props.form.getFieldsValue());
 21 |     this.setState({
 22 |       allValues: {
 23 |         ...this.state.allValues,
 24 |         ...this.props.form.getFieldsValue()
 25 |       }
 26 |     });
 27 |     const currentStep = this.getCurrentStep();
 28 |     if (currentStep < this.getSteps().length - 1) {
 29 |       this.pushUrl(this.getSteps()[currentStep + 1].path);
 30 |     } else {
 31 |       Modal.success({
 32 |         title: "提交成功"
 33 |       });
 34 |     }
 35 |   };
 36 |   handleBack = () => {
 37 |     console.log("form values: ", this.props.form.getFieldsValue());
 38 |     this.setState({
 39 |       allValues: {
 40 |         ...this.state.allValues,
 41 |         ...this.props.form.getFieldsValue()
 42 |       }
 43 |     });
 44 |     const currentStep = this.getCurrentStep();
 45 |     if (currentStep > 0) {
 46 |       this.pushUrl(this.getSteps()[currentStep - 1].path);
 47 |     }
 48 |   };
 49 | 
 50 |   getCurrentStep() {
 51 |     const currentPath = document.location.hash.replace(/^#/, "");
 52 |     return _.findIndex(this.getSteps(), { path: currentPath });
 53 |   }
 54 | 
 55 |   getSteps() {
 56 |     return [
 57 |       { title: "验证邮件", path: "/wizard/step/1", component: Step1 },
 58 |       { title: "账号信息", path: "/wizard/step/2", component: Step2 },
 59 |       { title: "完成", path: "/wizard/step/3", component: Step3 }
 60 |     ];
 61 |   }
 62 |   renderComponent = () => {
 63 |     const StepComponent = this.getSteps()[this.getCurrentStep()].component;
 64 |     return (
 65 |       <StepComponent form={this.props.form} allValues={this.state.allValues} />
 66 |     );
 67 |   };
 68 |   render() {
 69 |     if (!/^#\/wizard\/step/.test(document.location.hash)) {
 70 |       return (
 71 |         <Button type="primary" onClick={() => this.pushUrl("/wizard/step/1")}>
 72 |           创建账号
 73 |         </Button>
 74 |       );
 75 |     }
 76 |     return (
 77 |       <Router>
 78 |         <Form>
 79 |           <div style={{ width: "600px" }}>
 80 |             <h1>创建账号</h1>
 81 |             <Steps current={this.getCurrentStep()}>
 82 |               {this.getSteps().map(step => <Steps.Step title={step.title} />)}
 83 |             </Steps>
 84 | 
 85 |             <div className="step-container" style={{ margin: "40px 0" }}>
 86 |               <Route
 87 |                 path="/wizard/step/:stepId"
 88 |                 render={this.renderComponent}
 89 |               />
 90 |             </div>
 91 |             <div>
 92 |               <Button
 93 |                 disabled={this.getCurrentStep() === 0}
 94 |                 onClick={this.handleBack}
 95 |                 style={{ marginRight: "20px" }}
 96 |               >
 97 |                 上一步
 98 |               </Button>
 99 | 
100 |               <Button onClick={this.handleNext} type="primary">
101 |                 {this.getCurrentStep() === this.getSteps().length - 1
102 |                   ? "完成"
103 |                   : "下一步"}
104 |               </Button>
105 |             </div>
106 |           </div>
107 |         </Form>
108 |       </Router>
109 |     );
110 |   }
111 | }
112 | 
113 | export default Form.create()(App);
114 |

--------------------------------------------------------------------------------
/src/c35/Step1.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import { Button, DatePicker, Form, Input, InputNumber, Select } from "antd";
 3 | import FormBuilder from "../c29/FormBuilder";
 4 | 
 5 | const Option = Select.Option;
 6 | 
 7 | const formMeta = {
 8 |   colon: true,
 9 |   columns: 1,
10 |   elements: [{ key: "email", label: "Email", widget: Input }]
11 | };
12 | 
13 | class Step1 extends Component {
14 |   componentDidMount() {
15 |     this.props.form.setFieldsValue(this.props.allValues);
16 |   }
17 |   render() {
18 |     return (
19 |       <div>
20 |         <FormBuilder meta={formMeta} form={this.props.form} />
21 |       </div>
22 |     );
23 |   }
24 | }
25 | 
26 | export default Step1;
27 |

--------------------------------------------------------------------------------
/src/c35/Step2.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | import { Button, DatePicker, Form, Input, InputNumber, Select } from "antd";
 3 | import FormBuilder from "../c29/FormBuilder";
 4 | 
 5 | const Option = Select.Option;
 6 | 
 7 | const formMeta = {
 8 |   colon: true,
 9 |   columns: 1,
10 |   elements: [
11 |     { key: "userName", label: "用户名", widget: Input },
12 |     { key: "password", label: "密码", widget: Input, type: "password" },
13 |     { key: "birthday", label: "生日", widget: DatePicker }
14 |   ]
15 | };
16 | 
17 | class Step2 extends Component {
18 |   componentDidMount() {
19 |     this.props.form.setFieldsValue(this.props.allValues);
20 |   }
21 |   render() {
22 |     return (
23 |       <div>
24 |         <FormBuilder meta={formMeta} form={this.props.form} />
25 |       </div>
26 |     );
27 |   }
28 | }
29 | 
30 | export default Step2;
31 |

--------------------------------------------------------------------------------
/src/c35/Step3.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | 
 3 | class Step3 extends Component {
 4 |   render() {
 5 |     const { email, userName, birthday } = this.props.allValues;
 6 |     return (
 7 |       <div className="wizard-finish-step">
 8 |         <ul>
 9 |           <li>
10 |             <label>Email:</label>
11 |             <span>{email}</span>
12 |           </li>
13 |           <li>
14 |             <label>用户名:</label>
15 |             <span>{userName}</span>
16 |           </li>
17 |           <li>
18 |             <label>生日:</label>
19 |             <span>{birthday ? birthday.format("M月D日") : ""}</span>
20 |           </li>
21 |         </ul>
22 |       </div>
23 |     );
24 |   }
25 | }
26 | 
27 | export default Step3;
28 |

--------------------------------------------------------------------------------
/src/c36/Layout1.css:
--------------------------------------------------------------------------------
 1 | .app-layout1 {
 2 |   width: 500px;
 3 |   height: 400px;
 4 |   position: relative;
 5 |   background-color: #eee;
 6 |   text-align: center;
 7 | }
 8 | 
 9 | .app-layout1 .header {
10 |   line-height: 60px;
11 |   border-bottom: 2px solid #fff;
12 | }
13 | .app-layout1 .content {
14 |   position: absolute;
15 |   bottom: 60px;
16 |   top: 60px;
17 |   left: 0;
18 |   right: 0;
19 | }
20 | .app-layout1 .footer {
21 |   border-top: 2px solid #fff;
22 |   line-height: 60px;
23 |   bottom: 0;
24 |   left: 0;
25 |   right: 0;
26 |   position: absolute;
27 | }
28 |

--------------------------------------------------------------------------------
/src/c36/Layout1.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import { Button } from "antd";
 4 | import "./Layout1.css";
 5 | 
 6 | export default class Layout1 extends React.PureComponent {
 7 |   render() {
 8 |     return (
 9 |       <div className="app-layout1">
10 |         <div className="header">Header</div>
11 |         <div className="content">content</div>
12 |         <div className="footer">Footer</div>
13 |       </div>
14 |     );
15 |   }
16 | }
17 |

--------------------------------------------------------------------------------
/src/c36/Layout2.css:
--------------------------------------------------------------------------------
 1 | .app-layout2 {
 2 |   width: 500px;
 3 |   height: 400px;
 4 |   position: relative;
 5 |   background-color: #eee;
 6 |   text-align: center;
 7 |   padding-left: 150px;
 8 |   line-height: 60px;
 9 | }
10 | 
11 | .app-layout2 .header {
12 |   border-bottom: 2px solid #fff;
13 | }
14 | .app-layout2 .content {
15 |   position: absolute;
16 |   bottom: 60px;
17 |   top: 60px;
18 |   left: 0;
19 |   right: 0;
20 | }
21 | .app-layout2 .sider {
22 |   width: 150px;
23 |   position: absolute;
24 |   border-right: 2px solid #fff;
25 |   top: 0;
26 |   left: 0;
27 |   bottom: 0;
28 | }
29 | .app-layout2 .footer {
30 |   border-top: 2px solid #fff;
31 |   bottom: 0;
32 |   left: 150px;
33 |   right: 0;
34 |   position: absolute;
35 | }
36 |

--------------------------------------------------------------------------------
/src/c36/Layout2.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Button } from "antd";
 3 | import "./Layout2.css";
 4 | 
 5 | export default class Layout2 extends React.PureComponent {
 6 |   render() {
 7 |     return (
 8 |       <div className="app-layout2">
 9 |         <div className="header">Header</div>
10 |         <div className="sider">Sider</div>
11 |         <div className="content">Content</div>
12 |         <div className="footer">Footer</div>
13 |       </div>
14 |     );
15 |   }
16 | }
17 |

--------------------------------------------------------------------------------
/src/c36/LayoutResize.css:
--------------------------------------------------------------------------------
 1 | .app-layout-resize {
 2 |   width: 500px;
 3 |   height: 400px;
 4 |   position: relative;
 5 |   background-color: #eee;
 6 |   text-align: center;
 7 |   padding-left: 150px;
 8 |   line-height: 60px;
 9 | }
10 | 
11 | .app-layout-resize .header {
12 |   border-bottom: 2px solid #fff;
13 | }
14 | .app-layout-resize .content {
15 |   position: absolute;
16 |   bottom: 60px;
17 |   top: 60px;
18 |   left: 0;
19 |   right: 0;
20 | }
21 | .app-layout-resize .sider {
22 |   width: 150px;
23 |   position: absolute;
24 |   border-right: 2px solid #fff;
25 |   top: 0;
26 |   left: 0;
27 |   bottom: 0;
28 | }
29 | .app-layout-resize .footer {
30 |   border-top: 2px solid #fff;
31 |   bottom: 0;
32 |   left: 150px;
33 |   right: 0;
34 |   position: absolute;
35 | }
36 | 
37 | .app-layout-resize .sider-resizer {
38 |   position: absolute;
39 |   left: 148px;
40 |   width: 6px;
41 |   top: 0;
42 |   bottom: 0;
43 |   cursor: col-resize;
44 | }
45 | .app-layout-resize .resize-mask {
46 |   background: rgba(0, 0, 0, 0);
47 |   position: fixed;
48 |   left: 0;
49 |   top: 0;
50 |   right: 0;
51 |   bottom: 0;
52 |   cursor: col-resize;
53 | }
54 |

--------------------------------------------------------------------------------
/src/c36/LayoutResize.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Button } from "antd";
 3 | import "./LayoutResize.css";
 4 | 
 5 | export default class LayoutResize extends React.PureComponent {
 6 |   state = {
 7 |     dragging: false,
 8 |     startPageX: 0,
 9 |     siderWidth: 150,
10 |   };
11 | 
12 |   handleMouseDown = evt => {
13 |     this.setState({
14 |       dragging: true,
15 |       startPageX: evt.pageX,
16 |     });
17 |   };
18 |   handleMouseUp = () => {
19 |     this.setState({
20 |       dragging: false,
21 |     });
22 |   };
23 |   handleMouseMove = evt => {
24 |     let siderWidth = this.state.siderWidth + evt.pageX - this.state.startPageX;
25 |     if (siderWidth < 20 || siderWidth > 300) return;
26 |     this.setState({
27 |       siderWidth,
28 |       startPageX: evt.pageX,
29 |     });
30 |   };
31 |   render() {
32 |     const { dragging, siderWidth } = this.state;
33 |     const pxWidth = `${siderWidth}px`;
34 |     return (
35 |       <div className="app-layout-resize" style={{ paddingLeft: pxWidth }}>
36 |         <div className="header">Header</div>
37 |         <div className="sider" style={{ width: pxWidth }}>
38 |           Sider
39 |         </div>
40 |         <div className="content" style={{ left: pxWidth }}>
41 |           Content
42 |         </div>
43 |         <div className="footer" style={{ left: pxWidth }}>
44 |           Footer
45 |         </div>
46 |         <div
47 |           className="sider-resizer"
48 |           style={{ left: pxWidth }}
49 |           onMouseDown={this.handleMouseDown}
50 |         />
51 |         {dragging && (
52 |           <div
53 |             className="resize-mask"
54 |             onMouseMove={this.handleMouseMove}
55 |             onMouseUp={this.handleMouseUp}
56 |           />
57 |         )}
58 |       </div>
59 |     );
60 |   }
61 | }
62 |

--------------------------------------------------------------------------------
/src/c37/AntdDialog.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import { Button, Modal } from "antd";
 4 | import "./PortalSample.css";
 5 | 
 6 | export default class PortalSample extends React.PureComponent {
 7 |   state = { visible: false };
 8 |   renderButton() {
 9 |     return (
10 |       <Button type="primary" onClick={() => this.setState({ visible: true })}>
11 |         打开对话框
12 |       </Button>
13 |     );
14 |   }
15 |   renderDialog() {
16 |     return (
17 |       <Modal
18 |         visible={this.state.visible}
19 |         onCancel={() => this.setState({ visible: false })}
20 |       >
21 |         <div>这是一个对话框！</div>
22 |       </Modal>
23 |     );
24 |   }
25 |   render() {
26 |     return (
27 |       <div>
28 |         {this.renderButton()}
29 |         {this.renderDialog()}
30 |       </div>
31 |     );
32 |   }
33 | }
34 |

--------------------------------------------------------------------------------
/src/c37/PortalSample.css:
--------------------------------------------------------------------------------
 1 | .portal-sample {
 2 |   position: absolute;
 3 |   padding: 20px;
 4 |   width: 500px;
 5 |   height: 300px;
 6 |   left: 50%;
 7 |   top: 30%;
 8 |   transform: translate(-50%, -50%);
 9 |   border-radius: 10px;
10 |   border: 1px solid #ddd;
11 |   box-shadow: 0px 0px 20px 2px #ddd;
12 | }
13 |

--------------------------------------------------------------------------------
/src/c37/PortalSample.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import { Button } from "antd";
 4 | import "./PortalSample.css";
 5 | 
 6 | export default class PortalSample extends React.PureComponent {
 7 |   state = { visible: false };
 8 |   renderButton() {
 9 |     return (
10 |       <Button type="primary" onClick={() => this.setState({ visible: true })}>
11 |         打开对话框
12 |       </Button>
13 |     );
14 |   }
15 |   renderDialog() {
16 |     return (
17 |       <div className="portal-sample">
18 |         <div>这是一个对话框！</div>
19 |         <br />
20 |         <Button
21 |           type="primary"
22 |           onClick={() => this.setState({ visible: false })}
23 |         >
24 |           关闭对话框
25 |         </Button>
26 |       </div>
27 |     );
28 |   }
29 |   render() {
30 |     if (!this.state.visible) return this.renderButton();
31 |     return ReactDOM.createPortal(
32 |       this.renderDialog(),
33 |       document.getElementById("dialog-container"),
34 |     );
35 |   }
36 | }
37 |

--------------------------------------------------------------------------------
/src/c38/D3Sample.css:
--------------------------------------------------------------------------------
1 | .d3-sample {
2 | }
3 | 
4 | .d3-node {
5 |   width: 600px;
6 |   background-color: #f0f0f0;
7 | }
8 |

--------------------------------------------------------------------------------
/src/c38/D3Sample.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from "react";
  2 | import _ from "lodash";
  3 | import { Button } from "antd";
  4 | import * as d3 from "d3";
  5 | const data = require("./data.json");
  6 | 
  7 | require("./D3Sample.css");
  8 | 
  9 | const width = 600;
 10 | const height = 600;
 11 | 
 12 | export default class D3Sample extends Component {
 13 |   state = {
 14 |     data,
 15 |   };
 16 |   componentDidMount() {
 17 |     this.svg = d3
 18 |       .select(this.d3Node)
 19 |       .append("svg")
 20 |       .attr("width", width)
 21 |       .attr("height", height);
 22 |     this.color = d3.scaleOrdinal(d3.schemeCategory10);
 23 |     this.simulation = d3
 24 |       .forceSimulation()
 25 |       .force("link", d3.forceLink().id(d => d.id))
 26 |       .force("charge", d3.forceManyBody())
 27 |       .force("center", d3.forceCenter(width / 2, height / 2));
 28 | 
 29 |     this.linksGroup = this.svg.append("g");
 30 |     this.nodesGroup = this.svg.append("g");
 31 | 
 32 |     this.updateDiagrarm();
 33 |   }
 34 | 
 35 |   componentDidUpdate(prevProps, prevState) {
 36 |     if (this.state.data !== prevState.data) this.updateDiagrarm();
 37 |   }
 38 |   updateDiagrarm() {
 39 |     const { data } = this.state;
 40 |     let link = this.linksGroup
 41 |       .attr("class", "links")
 42 |       .selectAll("line")
 43 |       .data(data.links);
 44 |     link.exit().remove();
 45 |     link = link
 46 |       .enter()
 47 |       .append("line")
 48 |       .attr("stroke-width", function(d) {
 49 |         return Math.sqrt(d.value);
 50 |       })
 51 |       .merge(link);
 52 | 
 53 |     let node = this.nodesGroup
 54 |       .attr("class", "nodes")
 55 |       .selectAll("circle")
 56 |       .data(data.nodes);
 57 |     node.exit().remove();
 58 |     node = node
 59 |       .enter()
 60 |       .append("circle")
 61 |       .attr("r", d => (d.id === "id1" ? 24 : 16))
 62 |       .attr("fill", d => {
 63 |         return this.color(d.group);
 64 |       })
 65 |       .call(
 66 |         d3
 67 |           .drag()
 68 |           .on("start", this.dragstarted)
 69 |           .on("drag", this.dragged)
 70 |           .on("end", this.dragended),
 71 |       )
 72 |       .merge(node);
 73 | 
 74 |     this.simulation.nodes(data.nodes).on("tick", ticked);
 75 | 
 76 |     this.simulation
 77 |       .force("link")
 78 |       .links(data.links)
 79 |       .distance(100);
 80 | 
 81 |     this.simulation.alpha(1).restart();
 82 | 
 83 |     function ticked() {
 84 |       link
 85 |         .attr("stroke", "#c7c7c7")
 86 |         .attr("x1", d => d.source.x)
 87 |         .attr("y1", d => d.source.y)
 88 |         .attr("x2", d => d.target.x)
 89 |         .attr("y2", d => d.target.y);
 90 | 
 91 |       node.attr("cx", d => d.x).attr("cy", d => d.y);
 92 |     }
 93 |   }
 94 | 
 95 |   dragstarted = d => {
 96 |     if (!d3.event.active) this.simulation.alphaTarget(0.3).restart();
 97 |     d.fx = d.x;
 98 |     d.fy = d.y;
 99 |   };
100 |   dragged = d => {
101 |     d.fx = d3.event.x;
102 |     d.fy = d3.event.y;
103 |   };
104 |   dragended = d => {
105 |     if (!d3.event.active) this.simulation.alphaTarget(0);
106 |     d.fx = null;
107 |     d.fy = null;
108 |   };
109 | 
110 |   handleAddNode = () => {
111 |     const id = `id${new Date().getTime()}`;
112 |     const node = { id, group: _.random(1, 9) };
113 |     this.setState({
114 |       data: {
115 |         nodes: [...this.state.data.nodes, node],
116 |         links: [
117 |           ...this.state.data.links,
118 |           { source: "id1", target: id, value: 1 },
119 |         ],
120 |       },
121 |     });
122 |   };
123 |   render() {
124 |     return (
125 |       <div className="d3-sample">
126 |         <div style={{ margin: "0 0 20px 0" }}>
127 |           <Button onClick={this.handleAddNode}>Add node</Button>
128 |         </div>
129 |         <div className="d3-node" ref={node => (this.d3Node = node)} />
130 |       </div>
131 |     );
132 |   }
133 | }
134 |

--------------------------------------------------------------------------------
/src/c38/data.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "nodes": [
 3 |     {
 4 |       "id": "id1",
 5 |       "group": 1
 6 |     },
 7 |     {
 8 |       "id": "id2",
 9 |       "group": 2
10 |     },
11 |     {
12 |       "id": "id3",
13 |       "group": 3
14 |     },
15 |     {
16 |       "id": "id4",
17 |       "group": 4
18 |     },
19 |     {
20 |       "id": "id5",
21 |       "group": 5
22 |     }
23 |     
24 |   ],
25 |   "links": [
26 |     {
27 |       "source": "id1",
28 |       "target": "id2",
29 |       "value": 1
30 |     },
31 |     {
32 |       "source": "id1",
33 |       "target": "id3",
34 |       "value": 1
35 |     },
36 |     {
37 |       "source": "id1",
38 |       "target": "id4",
39 |       "value": 1
40 |     },
41 |     {
42 |       "source": "id5",
43 |       "target": "id4",
44 |       "value": 1
45 |     }
46 |     
47 |     
48 |     
49 |   ]
50 | }

--------------------------------------------------------------------------------
/src/c40/DndSample.css:
--------------------------------------------------------------------------------
 1 | .dnd-sample ul {
 2 |   display: inline-block;
 3 |   margin: 0;
 4 |   padding: 0;
 5 |   background-color: #eee;
 6 | }
 7 | 
 8 | .dnd-sample li {
 9 |   cursor: default;
10 |   list-style: none;
11 |   border-bottom: 1px solid #ddd;
12 |   padding: 10px;
13 |   margin: 0;
14 |   width: 300px;
15 |   background-color: #fff;
16 | }
17 | 
18 | .dnd-sample-mask {
19 |   position: fixed;
20 |   left: 0;
21 |   right: 0;
22 |   top: 0;
23 |   bottom: 0;
24 |   background: rgba(0, 0, 0, 0);
25 | }
26 |

--------------------------------------------------------------------------------
/src/c40/DndSample.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from "react";
 2 | 
 3 | require("./DndSample.css");
 4 | 
 5 | const list = [];
 6 | for (let i = 0; i < 10; i++) {
 7 |   list.push(`Item ${i + 1}`);
 8 | }
 9 | 
10 | const move = (arr, startIndex, toIndex) => {
11 |   arr = arr.slice();
12 |   arr.splice(toIndex, 0, arr.splice(startIndex, 1)[0]);
13 |   return arr;
14 | };
15 | 
16 | const lineHeight = 42;
17 | class DndSample extends Component {
18 |   constructor(props) {
19 |     super(props);
20 |     this.state.list = list;
21 |   }
22 |   state = {
23 |     dragging: false,
24 |     draggingIndex: -1,
25 |     startPageY: 0,
26 |     offsetPageY: 0,
27 |   };
28 | 
29 |   handleMounseDown = (evt, index) => {
30 |     this.setState({
31 |       dragging: true,
32 |       startPageY: evt.pageY,
33 |       currentPageY: evt.pageY,
34 |       draggingIndex: index,
35 |     });
36 |   };
37 |   handleMouseUp = () => {
38 |     this.setState({ dragging: false, startPageY: 0, draggingIndex: -1 });
39 |   };
40 |   handleMouseMove = evt => {
41 |     let offset = evt.pageY - this.state.startPageY;
42 |     const draggingIndex = this.state.draggingIndex;
43 |     if (offset > lineHeight && draggingIndex < this.state.list.length - 1) {
44 |       // move down
45 |       offset -= lineHeight;
46 |       this.setState({
47 |         list: move(this.state.list, draggingIndex, draggingIndex + 1),
48 |         draggingIndex: draggingIndex + 1,
49 |         startPageY: this.state.startPageY + lineHeight,
50 |       });
51 |     } else if (offset < -lineHeight && draggingIndex > 0) {
52 |       // move up
53 |       offset += lineHeight;
54 |       this.setState({
55 |         list: move(this.state.list, draggingIndex, draggingIndex - 1),
56 |         draggingIndex: draggingIndex - 1,
57 |         startPageY: this.state.startPageY - lineHeight,
58 |       });
59 |     }
60 |     this.setState({ offsetPageY: offset });
61 |   };
62 | 
63 |   getDraggingStyle(index) {
64 |     if (index !== this.state.draggingIndex) return {};
65 |     return {
66 |       backgroundColor: "#eee",
67 |       transform: `translate(10px, ${this.state.offsetPageY}px)`,
68 |       opacity: 0.5,
69 |     };
70 |   }
71 | 
72 |   render() {
73 |     return (
74 |       <div className="dnd-sample">
75 |         <ul>
76 |           {this.state.list.map((text, i) => (
77 |             <li
78 |               key={text}
79 |               onMouseDown={evt => this.handleMounseDown(evt, i)}
80 |               style={this.getDraggingStyle(i)}
81 |             >
82 |               {text}
83 |             </li>
84 |           ))}
85 |         </ul>
86 |         {this.state.dragging && (
87 |           <div
88 |             className="dnd-sample-mask"
89 |             onMouseMove={this.handleMouseMove}
90 |             onMouseUp={this.handleMouseUp}
91 |           />
92 |         )}
93 |       </div>
94 |     );
95 |   }
96 | }
97 | 
98 | export default DndSample;
99 |

--------------------------------------------------------------------------------
/src/c43/ReselectSample.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Button } from "antd";
 3 | import { createSelector } from "reselect";
 4 | 
 5 | function runDemo() {
 6 |   const shopItemsSelector = state => state.shop.items;
 7 |   const taxPercentSelector = state => state.shop.taxPercent;
 8 | 
 9 |   const subtotalSelector = createSelector(shopItemsSelector, items =>
10 |     items.reduce((acc, item) => acc + item.value, 0),
11 |   );
12 | 
13 |   const taxSelector = createSelector(
14 |     subtotalSelector,
15 |     taxPercentSelector,
16 |     (subtotal, taxPercent) => subtotal * (taxPercent / 100),
17 |   );
18 | 
19 |   const totalSelector = createSelector(
20 |     subtotalSelector,
21 |     taxSelector,
22 |     (subtotal, tax) => ({ total: subtotal + tax }),
23 |   );
24 | 
25 |   let exampleState = {
26 |     shop: {
27 |       taxPercent: 8,
28 |       items: [{ name: "apple", value: 1.2 }, { name: "orange", value: 0.95 }],
29 |     },
30 |   };
31 | 
32 |   console.log(subtotalSelector(exampleState)); // 2.15
33 |   console.log(taxSelector(exampleState)); // 0.172
34 |   console.log(totalSelector(exampleState)); // { total: 2.322 }
35 | }
36 | 
37 | export default class extends React.Component {
38 |   render() {
39 |     return (
40 |       <div>
41 |         <Button onClick={runDemo}>Run Demo</Button>
42 |         <br />
43 |         <br />
44 |         <div>* 打开控制台查看运行结果</div>
45 |       </div>
46 |     );
47 |   }
48 | }
49 |

--------------------------------------------------------------------------------
/src/c44/Suspense.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | const link = "https://codesandbox.io/s/8nq4w3jj39";
3 | export default () => (
4 |   <a target="_blank" href={link}>
5 |     {link}
6 |   </a>
7 | );
8 |

--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | .menu-list {
 2 |   position: absolute;
 3 |   left: 0;
 4 |   top: 0;
 5 |   bottom: 0;
 6 |   width: 200px;
 7 |   list-style: none;
 8 |   background-color: #eee;
 9 |   padding: 0;
10 |   margin: 0;
11 |   padding-top: 30px;
12 |   overflow: auto;
13 | }
14 | 
15 | .menu-list li {
16 |   padding: 5px 15px;
17 |   color: #2175bc;
18 | }
19 | 
20 | .menu-list li.is-active {
21 |   background-color: #2175bc;
22 |   color: #fff !important;
23 | }
24 | 
25 | .link {
26 |   display: block;
27 |   cursor: pointer;
28 | }
29 | 
30 | input {
31 |   padding: 7px;
32 |   outline: none;
33 | }
34 | button {
35 |   color: #fff;
36 |   background-color: #38f;
37 |   padding: 8px 15px;
38 |   border: none;
39 |   cursor: pointer;
40 |   outline: none;
41 | }
42 | 
43 | .wizard-finish-step li {
44 |   list-style: none;
45 |   padding: 10px;
46 | }
47 | .wizard-finish-step label {
48 |   font-weight: bold;
49 |   display: inline-block;
50 |   width: 100px;
51 | }
52 |

--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { render } from "react-dom";
  3 | import Hello from "./Hello";
  4 | import ChatApp from "./c01/ChatApp";
  5 | import CommentBox from "./c02/CommentBox";
  6 | import { TabSelectorSample } from "./c02/TabSelector";
  7 | import { StatefulTabSelectSample } from "./c02/StatefulTabSelector";
  8 | import Clock from "./c03/Clock";
  9 | import SnapshotSample from "./c04/SnapshotSample";
 10 | import DomDiff from "./c05/DomDiff";
 11 | import { AdvancedTabSelectorSample } from "./c06/AdvancedTabSelector";
 12 | import LocaleSample from "./c07/LocaleSample";
 13 | import PureRedux from "./c11/PureRedux";
 14 | import Counter from "./c12/Counter";
 15 | import AsyncAction from "./c13/AsyncAction";
 16 | import ReduxMiddleware from "./c13/ReduxMiddleware";
 17 | import OrgActions from "./c14/OrgActions";
 18 | import RouterSample from "./c16/RouterSample";
 19 | import RouterParams from "./c17/RouterParams";
 20 | import NestedRoute from "./c17/NestedRoute";
 21 | import FormSubmit from "./c29/FormSubmit";
 22 | import FormSubmitAntd from "./c29/FormSubmitAntd";
 23 | import DynamicForm from "./c30/DynamicForm";
 24 | import ListSample from "./c31/App";
 25 | import WizardSample from "./c35/App";
 26 | import Layout1 from "./c36/Layout1";
 27 | import Layout2 from "./c36/Layout2";
 28 | import LayoutResize from "./c36/LayoutResize";
 29 | import PortalSample from "./c37/PortalSample";
 30 | import AntdDialog from "./c37/AntdDialog";
 31 | import D3Sample from "./c38/D3Sample";
 32 | import DndSample from "./c40/DndSample";
 33 | import ReselectSample from "./c43/ReselectSample";
 34 | import Suspense from "./c44/Suspense";
 35 | import "antd/dist/antd.css";
 36 | 
 37 | import "./index.css";
 38 | 
 39 | const styles = {
 40 |   fontFamily: "sans-serif",
 41 |   paddingLeft: "250px",
 42 | };
 43 | 
 44 | const routeMap = {
 45 |   chat: ChatApp,
 46 |   "comment-box": CommentBox,
 47 |   "tab-selector": TabSelectorSample,
 48 |   "stateful-tab-selector": StatefulTabSelectSample,
 49 |   "snapshot-sample": SnapshotSample,
 50 |   "dom-diff": DomDiff,
 51 |   "adv-tab-selector": AdvancedTabSelectorSample,
 52 |   "locale-sample": LocaleSample,
 53 |   clock: Clock,
 54 |   "pure-redux": PureRedux,
 55 |   counter: Counter,
 56 |   "async-action": AsyncAction,
 57 |   "redux-middleware": ReduxMiddleware,
 58 |   "org-actions": OrgActions,
 59 |   "router-sample": RouterSample,
 60 |   "router-params": RouterParams,
 61 |   "nested-route": NestedRoute,
 62 |   "form-submit": FormSubmit,
 63 |   "form-submit-antd": FormSubmitAntd,
 64 |   "dynamic-form": DynamicForm,
 65 |   "list-page": ListSample,
 66 |   "wizard-sample": WizardSample,
 67 |   layout1: Layout1,
 68 |   layout2: Layout2,
 69 |   "layout-resize": LayoutResize,
 70 |   "portal-sample": PortalSample,
 71 |   "antd-dialog": AntdDialog,
 72 |   "d3-sample": D3Sample,
 73 |   "dnd-sample": DndSample,
 74 |   "reselect-sample": ReselectSample,
 75 |   suspense: Suspense,
 76 | };
 77 | 
 78 | class App extends React.PureComponent {
 79 |   handleLinkClick = key => {
 80 |     // window.location.hash = `#${key}`;
 81 |     window.history.pushState(null, "", `/#/${key}`);
 82 |     this.forceUpdate();
 83 |   };
 84 |   render() {
 85 |     const currentPage = document.location.hash.replace(/#\/?/, "");
 86 | 
 87 |     let CurrentPage = routeMap[currentPage] || Hello;
 88 |     if (currentPage.match(/\/user\/\w+|\/list-page/)) {
 89 |       CurrentPage = ListSample;
 90 |     }
 91 |     if (currentPage.match(/\/wizard\/step\/\w+/)) {
 92 |       CurrentPage = WizardSample;
 93 |     }
 94 |     return (
 95 |       <div style={styles}>
 96 |         <ul className="menu-list">
 97 |           {Object.keys(routeMap).map(key => (
 98 |             <li
 99 |               key={key}
100 |               className={key === currentPage ? "is-active" : ""}
101 |               style={{ listStyle: "none" }}
102 |             >
103 |               <span className="link" onClick={() => this.handleLinkClick(key)}>
104 |                 {key}
105 |               </span>
106 |             </li>
107 |           ))}
108 |         </ul>
109 |         <div style={{ padding: "30px 0" }}>
110 |           <CurrentPage />
111 |         </div>
112 |       </div>
113 |     );
114 |   }
115 | }
116 | 
117 | render(<App />, document.getElementById("root"));
118 |

--------------------------------------------------------------------------------
/src/index.less:
--------------------------------------------------------------------------------
1 | body {
2 |   color: red !important;
3 | }
4 | .link {
5 |   color: red;
6 | }
7 |

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

Welcome to React course!

{this.props.time.toLocaleString()}

Comments ({comments.length})