From 39ac94f2175cdddbd7a0f70a744f056d720751ea Mon Sep 17 00:00:00 2001 From: tsuki Date: Tue, 24 Mar 2020 20:56:33 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 15 +++++- src/Epics/index.js | 15 ++++++ src/actions/PlayersActions.js | 9 ++++ src/components/AddPlayerInput.js | 27 ++++++----- src/components/PlayerList.css | 16 ++++++ src/components/PlayerList.js | 81 +++++++++++++++++++++++++------ src/components/PlayerList.test.js | 18 +++++++ src/components/PlayerListItem.css | 4 ++ src/components/PlayerListItem.js | 21 ++++++++ src/constants/ActionTypes.js | 2 + src/containers/App.js | 12 ++++- src/containers/PlayerListApp.js | 4 +- src/index.js | 1 + src/reducers/playerlist.js | 8 +++ 14 files changed, 199 insertions(+), 34 deletions(-) create mode 100644 src/Epics/index.js create mode 100644 src/components/PlayerList.test.js diff --git a/package.json b/package.json index f6c7705..92d39b6 100755 --- a/package.json +++ b/package.json @@ -12,13 +12,24 @@ "classnames": "^2.2.6", "lodash": "^4.17.15", "prop-types": "^15.7.2", + "ramda": "^0.27.0", + "rc-pagination": "^2.0.1", "react": "^16.12.0", "react-dom": "^16.12.0", "react-redux": "^7.2.0", - "redux": "^4.0.5" + "redux": "^4.0.5", + "redux-devtools-extension": "^2.13.8", + "redux-observable": "^1.2.0", + "rxjs": "^6.5.4", + "rxjs-compat": "^6.5.4" }, "devDependencies": { "react-scripts": "3.4.0" }, - "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"] + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] } diff --git a/src/Epics/index.js b/src/Epics/index.js new file mode 100644 index 0000000..a856cd0 --- /dev/null +++ b/src/Epics/index.js @@ -0,0 +1,15 @@ +import 'rxjs/add/observable/of'; +import 'rxjs/add/operator/catch'; +import { ajax } from 'rxjs/observable/dom/ajax'; +import { combineEpics } from 'redux-observable'; +// import {SELECT_PLAYER} from '../constants/ActionTypes'; +// const url = ''; +// const ListEpic= (action$)=> ( + // action$ + // .ofType(SELECT_PLAYER) + // .catch((error) =>console.log(error)) + // 可以截取action，拍扁成流形式，在这里进行异步请求数据处理之类，。rxjs提供了很多异步处理操作符， +// ) + +// export const rootEpic = combineEpics(ListEpic); +export const rootEpic = combineEpics(); diff --git a/src/actions/PlayersActions.js b/src/actions/PlayersActions.js index 8f427c2..5f35643 100755 --- a/src/actions/PlayersActions.js +++ b/src/actions/PlayersActions.js @@ -20,3 +20,12 @@ export function starPlayer(id) { id, }; } + +export function selectedPlay(id,selected) { + + return { + type: types.SELECT_PLAYER, + id, + selected, + }; +} diff --git a/src/components/AddPlayerInput.js b/src/components/AddPlayerInput.js index 5d914d8..8958a51 100755 --- a/src/components/AddPlayerInput.js +++ b/src/components/AddPlayerInput.js @@ -4,19 +4,6 @@ import PropTypes from 'prop-types'; import styles from './AddPlayerInput.css'; class AddPlayerInput extends Component { - render() { - return ( - - ); - } constructor(props, context) { super(props, context); @@ -36,6 +23,20 @@ class AddPlayerInput extends Component { this.setState({ name: '' }); } } + render() { + return ( + + ); + } + } AddPlayerInput.propTypes = { diff --git a/src/components/PlayerList.css b/src/components/PlayerList.css index b8d6f00..67aeb7f 100755 --- a/src/components/PlayerList.css +++ b/src/components/PlayerList.css @@ -2,3 +2,19 @@ padding-left: 0; margin-bottom: 0; } +.footer { + display: flex; + margin: 20px 0; + font-size:16px; +} + + +.rcPagination { + display: flex; + list-style: none; + padding-left: 10px; +} +.rcPagination li{ + margin: 0 10px; + +} \ No newline at end of file diff --git a/src/components/PlayerList.js b/src/components/PlayerList.js index 7b40246..d74fcca 100755 --- a/src/components/PlayerList.js +++ b/src/components/PlayerList.js @@ -1,26 +1,75 @@ -import React, { Component } from 'react'; +import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import styles from './PlayerList.css'; +import './PlayerList.css'; + import PlayerListItem from './PlayerListItem'; +import * as R from 'ramda'; +import Pagination from 'rc-pagination'; + +const isArray = (Arr) => { + return R.is(Array, Arr) && !R.isEmpty(Arr) +} + +class PlayerList extends PureComponent { + constructor(props) { + super(props); + + this.state = { + page: 5, + current: 1, + } + } + pageNum = (current) => { + this.setState({ + current + }); + } -class PlayerList extends Component { render() { + const { players } = this.props; + const { current, page } = this.state; + + const getCurrentList = (list, current, page) => { + return R.slice(page * current - page, page * current)(list) + } + return ( - + + ) + } + + ); } } diff --git a/src/components/PlayerList.test.js b/src/components/PlayerList.test.js new file mode 100644 index 0000000..388b700 --- /dev/null +++ b/src/components/PlayerList.test.js @@ -0,0 +1,18 @@ +import * as R from 'ramda'; + +const isArray = (Arr) => { + return R.is(Array, Arr) && !R.isEmpty(Arr) +} + +const getCurrentList = (list, current, page) => { + return R.slice(page * current - page, page * current)(list) + } + + +test('测试isArray和getCurrentList方法，获取current页数，每页5个,结果是否正确', () => { + const testList = [1,2,3,4,5,6,7,8,9,10,11] + const current = 2; + const page = 5 + expect(getCurrentList(testList,current,page)).toEqual([6,7,8,9,10]); + + }) \ No newline at end of file diff --git a/src/components/PlayerListItem.css b/src/components/PlayerListItem.css index 4ed1654..b1994b4 100755 --- a/src/components/PlayerListItem.css +++ b/src/components/PlayerListItem.css @@ -29,3 +29,7 @@ button:focus { outline: 0 !important; } + +.selectPlay { +height: 34px; +} \ No newline at end of file diff --git a/src/components/PlayerListItem.js b/src/components/PlayerListItem.js index ec9758c..fc971c0 100755 --- a/src/components/PlayerListItem.js +++ b/src/components/PlayerListItem.js @@ -3,7 +3,18 @@ import classnames from 'classnames'; import PropTypes from 'prop-types'; import styles from './PlayerListItem.css'; +const options = [ + {key:'SF',value:'SF'}, + {key:'SG',value:'SG'}, + {key:'PE',value:'PE'}, + {key:'PG',value:'PG'}, +] class PlayerListItem extends Component { + + componentDidMount() { + // console.log(this.props) + } + render() { return (
  • @@ -35,6 +46,15 @@ class PlayerListItem extends Component { > +
    • ); @@ -48,6 +68,7 @@ PlayerListItem.propTypes = { position: PropTypes.string.isRequired, starred: PropTypes.bool, starPlayer: PropTypes.func.isRequired, + selectedPlay:PropTypes.func.isRequired, }; export default PlayerListItem; diff --git a/src/constants/ActionTypes.js b/src/constants/ActionTypes.js index b796fae..b96ecff 100755 --- a/src/constants/ActionTypes.js +++ b/src/constants/ActionTypes.js @@ -1,3 +1,5 @@ export const ADD_PLAYER = 'ADD_PLAYER'; export const STAR_PLAYER = 'STAR_PLAYER'; export const DELETE_PLAYER = 'DELETE_PLAYER'; + +export const SELECT_PLAYER = 'SELECT_PLAYER'; \ No newline at end of file diff --git a/src/containers/App.js b/src/containers/App.js index 6043881..2e1d74f 100755 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -1,12 +1,20 @@ import React, { Component } from 'react'; -import { combineReducers, createStore } from 'redux'; +import { applyMiddleware,combineReducers, createStore } from 'redux'; import { Provider } from 'react-redux'; +import { createEpicMiddleware } from 'redux-observable'; +import { composeWithDevTools } from 'redux-devtools-extension' +import { rootEpic } from '../Epics'; import PlayerListApp from './PlayerListApp'; import * as reducers from '../reducers'; +// 实例化一个epic异常流框架 +const epicMiddleware = createEpicMiddleware(); const reducer = combineReducers(reducers); -const store = createStore(reducer); +const store = createStore(reducer, composeWithDevTools(applyMiddleware(epicMiddleware))) + +epicMiddleware.run(rootEpic); + export default class App extends Component { render() { diff --git a/src/containers/PlayerListApp.js b/src/containers/PlayerListApp.js index 0e4bfa5..2780b49 100755 --- a/src/containers/PlayerListApp.js +++ b/src/containers/PlayerListApp.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import styles from './PlayerListApp.css'; import { connect } from 'react-redux'; -import { addPlayer, deletePlayer, starPlayer } from '../actions/PlayersActions'; +import { addPlayer, deletePlayer, starPlayer,selectedPlay } from '../actions/PlayersActions'; import { PlayerList, AddPlayerInput } from '../components'; class PlayerListApp extends Component { @@ -15,6 +15,7 @@ class PlayerListApp extends Component { addPlayer: this.props.addPlayer, deletePlayer: this.props.deletePlayer, starPlayer: this.props.starPlayer, + selectedPlay:this.props.selectedPlay, }; return ( @@ -37,5 +38,6 @@ export default connect( addPlayer, deletePlayer, starPlayer, + selectedPlay, }, )(PlayerListApp); diff --git a/src/index.js b/src/index.js index 95c69b7..14fe274 100755 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './containers/App'; +// import 'rc-pagination/dist/rc-pagination.min.css'; import './index.css'; ReactDOM.render( diff --git a/src/reducers/playerlist.js b/src/reducers/playerlist.js index 1bc7457..a9b9559 100755 --- a/src/reducers/playerlist.js +++ b/src/reducers/playerlist.js @@ -70,7 +70,15 @@ export default function players(state = initialState, action) { ...state, playersById: players, }; + case types.SELECT_PLAYER: + let Arr = [...state.playersById]; + let getItem = Arr.find((item, index) => index === action.id); + getItem.position = action.selected; + return { + ...state, + playersById: Arr, + }; default: return state; }