From 3a23efe2f75898090aa952ae06f7a0f4accd4874 Mon Sep 17 00:00:00 2001 From: jpl Date: Tue, 8 Nov 2016 17:47:56 +0100 Subject: add select2 with reactux --- .../javascripts/es6_browserified/actions/index.js | 5 +- .../es6_browserified/components/BSelect2.js | 96 ++++++++++++++++++++++ .../es6_browserified/components/Todo.js | 74 +++++++++-------- .../es6_browserified/components/TodoList.js | 44 +++++----- .../javascripts/es6_browserified/reducers/todos.js | 14 ++-- .../javascripts/es6_browserified/stop_points.js | 16 ++-- 6 files changed, 179 insertions(+), 70 deletions(-) create mode 100644 app/assets/javascripts/es6_browserified/components/BSelect2.js (limited to 'app/assets/javascripts') diff --git a/app/assets/javascripts/es6_browserified/actions/index.js b/app/assets/javascripts/es6_browserified/actions/index.js index c0f64005e..8967c0322 100644 --- a/app/assets/javascripts/es6_browserified/actions/index.js +++ b/app/assets/javascripts/es6_browserified/actions/index.js @@ -1,25 +1,21 @@ module.exports = { - addStop : () => { return { type: 'ADD_STOP' } }, - moveStopUp : (index) => { return { type: 'MOVE_STOP_UP', index } }, - moveStopDown : (index) => { return { type: 'MOVE_STOP_DOWN', index } }, - deleteStop: (index) => { return { type: 'DELETE_STOP', @@ -27,6 +23,7 @@ module.exports = { } }, updateInputValue: (index, text) => { + console.log('action',index, text) return { type : "UPDATE_INPUT_VALUE", index, diff --git a/app/assets/javascripts/es6_browserified/components/BSelect2.js b/app/assets/javascripts/es6_browserified/components/BSelect2.js new file mode 100644 index 000000000..7e4782563 --- /dev/null +++ b/app/assets/javascripts/es6_browserified/components/BSelect2.js @@ -0,0 +1,96 @@ +var React = require('react') +var PropTypes = require('react').PropTypes +var Select2 = require('react-select2') + +// get JSON full path +var origin = window.location.origin +var path = window.location.pathname.split('/', 3).join('/') + +class BSelect3 extends React.Component{ + constructor(props) { + super(props) + this.state = { + edit: false + } + } + onToggleEdit(e) { + e.preventDefault() + this.setState({edit: !this.state.edit}) + } + onChange(e) { + console.log(e.currentTarget.value, e.currentTarget.textContent) + this.props.onChange(this.props.index, {text: e.currentTarget.textContent, id: e.currentTarget.value}) + this.setState({edit: false}) + } + render() { + if(this.state.edit) + return ( +
+ +
+ ) + else + return ( +
+ + {this.props.value.text} + +
+ ) + } +} + +const BSelect2 = (props) => { + return ( + Object.assign( + {}, + item, + { text: item.name + ", " + item.zip_code + " " + item.short_city_name } + ) + ) + }; + }, + cache: true + }, + minimumInputLength: 3, + templateResult: formatRepo + }} + /> + ) +} + +// to fix: this is for custom results return +const formatRepo = (props) => { + if(props.text) return props.text + // console.log(props) + // return ( + //
+ // {props.short_name} + // {props.zip_code} {props.short_city_name} + //
+ // ) +} + +module.exports = BSelect3 diff --git a/app/assets/javascripts/es6_browserified/components/Todo.js b/app/assets/javascripts/es6_browserified/components/Todo.js index aeee78295..0e74e728f 100644 --- a/app/assets/javascripts/es6_browserified/components/Todo.js +++ b/app/assets/javascripts/es6_browserified/components/Todo.js @@ -1,48 +1,52 @@ var React = require('react') var PropTypes = require('react').PropTypes +var BSelect2 = require('./BSelect2') const Container = {display: 'table', width: '100%'} const firstBlock = {display: 'table-cell', verticalAlign: 'middle'} const secondBlock = {display: 'table-cell', verticalAlign: 'middle', width: '150px', textAlign: 'right'} -const Todo = (props) => ( -
-
-
- Id: {props.index} -
-
- -
-
- -
-
-
- -
-
- +const Todo = (props) => { + return ( +
+
+
+ #{props.index}
-
- + +
+
-
- +
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
-
-) + ) +} Todo.propTypes = { onDeleteClick: PropTypes.func.isRequired, @@ -50,7 +54,9 @@ Todo.propTypes = { onMoveDownClick: PropTypes.func.isRequired, onChange: PropTypes.func.isRequired, first: PropTypes.bool, - last: PropTypes.bool + last: PropTypes.bool, + index: PropTypes.number, + defaultData: PropTypes.array } module.exports = Todo diff --git a/app/assets/javascripts/es6_browserified/components/TodoList.js b/app/assets/javascripts/es6_browserified/components/TodoList.js index 768c691bb..367cfc256 100644 --- a/app/assets/javascripts/es6_browserified/components/TodoList.js +++ b/app/assets/javascripts/es6_browserified/components/TodoList.js @@ -2,27 +2,33 @@ var React = require('react') var PropTypes = require('react').PropTypes var Todo = require('./Todo') -const TodoList = ({ todos, onDeleteClick, onMoveUpClick, onMoveDownClick, onChange }) => ( -
- {todos.map((todo, index) => - onDeleteClick(index)} - onMoveUpClick={() => onMoveUpClick(index)} - onMoveDownClick={() => onMoveDownClick(index)} - onChange={(event) => onChange(index, event.currentTarget.value)} - first={ index === 0 } - last={ index === (todos.length - 1) } - /> - )} -
-) +const TodoList = ({ todos, onDeleteClick, onMoveUpClick, onMoveDownClick, onChange }) => { + console.log(todos) + return ( +
+ {todos.map((todo, index) => + onDeleteClick(index)} + onMoveUpClick={() => { + console.log(index, todos) + onMoveUpClick(index)} + } + onMoveDownClick={() => onMoveDownClick(index)} + onChange={ onChange } + first={ index === 0 } + last={ index === (todos.length - 1) } + index={ index } + defaultData={ todos } + value={ todo } + /> + )} +
+ ) +} TodoList.propTypes = { - todos: PropTypes.arrayOf(PropTypes.shape({ - index: PropTypes.number.isRequired, - }).isRequired).isRequired, + todos: PropTypes.array.isRequired, onDeleteClick: PropTypes.func.isRequired, onMoveUpClick: PropTypes.func.isRequired, onMoveDownClick: PropTypes.func.isRequired diff --git a/app/assets/javascripts/es6_browserified/reducers/todos.js b/app/assets/javascripts/es6_browserified/reducers/todos.js index d5a02f40a..bf64632bd 100644 --- a/app/assets/javascripts/es6_browserified/reducers/todos.js +++ b/app/assets/javascripts/es6_browserified/reducers/todos.js @@ -6,6 +6,7 @@ const todo = (state = {}, action, length) => { index: length } case 'UPDATE_INPUT_VALUE': + console.log('reducer', action) if (state.index !== action.index) { return state } @@ -13,7 +14,7 @@ const todo = (state = {}, action, length) => { return Object.assign( {}, state, - {text: action.text} + {text: action.text.text, id: action.text.id} ) default: return state @@ -28,8 +29,6 @@ const todos = (state = [], action) => { todo(undefined, action, state.length) ] case 'MOVE_STOP_UP': - state[action.index].index = state[action.index - 1].index - state[action.index - 1].index = state[action.index].index + 1 return [ ...state.slice(0, action.index - 1), state[action.index], @@ -37,8 +36,6 @@ const todos = (state = [], action) => { ...state.slice(action.index + 1) ] case 'MOVE_STOP_DOWN': - state[action.index + 1].index = state[action.index].index - state[action.index].index = state[action.index + 1].index + 1 return [ ...state.slice(0, action.index), state[action.index + 1], @@ -54,9 +51,10 @@ const todos = (state = [], action) => { }) ] case 'UPDATE_INPUT_VALUE': - return state.map(t => - todo(t, action) - ) + return state.map((t, i) => (i === action.index) ? action.text : t) + // return state.map(t => + // todo(t, action) + // ) default: return state } diff --git a/app/assets/javascripts/es6_browserified/stop_points.js b/app/assets/javascripts/es6_browserified/stop_points.js index 41c99c90f..9c0195f2b 100644 --- a/app/assets/javascripts/es6_browserified/stop_points.js +++ b/app/assets/javascripts/es6_browserified/stop_points.js @@ -13,14 +13,20 @@ const getInitialState = () => { let state = [] let datas = JSON.parse(decodeURIComponent(window.itinerary_stop)) for (let [index, value] of datas.entries()){ + + let fancyText = value.name + if(value.zip_code && value.city_name) + fancyText += ", " + value.zip_code + " " + value.city_name + state.push({ - index: index, - text: value.name, + id: value.id, + name: value.name, city_name: value.city_name, - zip_code: value.zip_code + zip_code: value.zip_code, + text: fancyText }) } - console.log(state) + // console.log(state) return state } @@ -32,7 +38,7 @@ let store = createStore( // applyMiddleware(thunkMiddleware, promise, loggerMiddleware) ) -console.log(store.getState()) +// console.log(store.getState()) render( -- cgit v1.2.3