From 59e257c2be93a500ec90d052ff2ec03ca4f5d8ee Mon Sep 17 00:00:00 2001 From: sipp11 Date: Wed, 18 Jul 2018 15:58:32 +0900 Subject: [PATCH] Port react-select@1 to @2 --- package.json | 4 +- src/components/First.js | 65 +++++++++++++++++++ src/components/RouteForm.js | 34 ++++++---- src/components/StopForm.js | 20 +++--- src/components/StopTimeForm.js | 83 +++++++++++++----------- src/components/TripForm.js | 31 ++++----- src/components/parts/HorizontalSelect.js | 6 +- src/components/parts/Select.js | 5 +- src/constants/choices.js | 60 +++++++++++++++++ src/container/Geo.js | 2 +- src/container/Main.js | 2 + src/reducers/agency.js | 7 ++ src/utils/index.js | 13 ++++ 13 files changed, 242 insertions(+), 90 deletions(-) create mode 100644 src/components/First.js create mode 100644 src/constants/choices.js create mode 100644 src/utils/index.js diff --git a/package.json b/package.json index 2801be1..98db79e 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "dependencies": { "ajv": "^6.5.1", "axios": "^0.18.0", - "leaflet": "^1.3.1", + "leaflet": "^1.3.2", "leaflet-draw": "^1.0.2", "lodash": "^4.17.10", "moment": "^2.22.2", @@ -17,7 +17,7 @@ "react-redux": "^5.0.7", "react-router-dom": "^4.3.1", "react-scripts": "1.1.4", - "react-select": "^1.2.1", + "react-select": "^2.0.0-beta.7", "redux": "^4.0.0", "redux-api-middleware": "^2.3.0", "redux-logger": "^3.0.6", diff --git a/src/components/First.js b/src/components/First.js new file mode 100644 index 0000000..ab270ee --- /dev/null +++ b/src/components/First.js @@ -0,0 +1,65 @@ +import React, { Component } from 'react' +import { components } from 'react-select' +import AsyncSelect from 'react-select/lib/Async' + + +const cbStopOptions = (inputValue, callback) => { + fetch(`https://api.goth.app/v1/stop/?search=${inputValue}`) + .then((response) => response.json()) + .then((json) => { + callback(json.results.map(ele => Object.assign(ele, { + value: ele.id, label: ele.name + }))) + }) +} + +const Option = (props) => { + const { stop_id, name, stop_desc } = props.data + return ( + + {stop_id} {name} + {stop_desc.length > 0 &&
{stop_desc}} + + ); +}; + +class First extends Component { + + state = { inputValue: '' } + + handleInputChange = (newValue) => { + console.log("inputChange", newValue) + const inputValue = newValue.replace(/\W/g, '') + this.setState({ inputValue }) + return inputValue + } + + render() { + return ( +
+
+
+
+ { + console.log('on change', item, evt) + if (evt.action === 'select-option') { + console.log('select something', item) + return Object.assign(item, {value: item.name}) + } + console.log('?') + return item + }} + onInputChange={this.handleInputChange} + /> +
+ ) + } +} + +export default First diff --git a/src/components/RouteForm.js b/src/components/RouteForm.js index 426cb6f..d1c0b0c 100644 --- a/src/components/RouteForm.js +++ b/src/components/RouteForm.js @@ -5,8 +5,13 @@ import { Redirect, Link } from 'react-router-dom' import Input from './parts/Input' import Select from './parts/Select' -import { updateRoute, createRoute, deleteRoute } from '../actions/route'; +import { + getRoute, updateRoute, + createRoute, deleteRoute +} from '../actions/route'; import store from '../store' +import { getItemFromList } from '../utils' +import { RouteTypeChoices } from '../constants/choices' const StyledRouteForm = styled.div` padding: 1rem; @@ -66,6 +71,13 @@ class RouteForm extends Component { this.setState({justSubmit: true}) } + componentDidMount() { + const { routeId } = this.props.match.params + const { fetching, count } = this.props.route + if (routeId !== undefined && count === 0 && !fetching) + store.dispatch(getRoute(`route_id=${routeId}`)) + } + static getDerivedStateFromProps(props, state) { // if form is ready, then nothing else to do if (state.agency !== null || state.id !== null) @@ -85,8 +97,11 @@ class RouteForm extends Component { } else if (routeId !== undefined && state.id === null) { // this is for editing route const ones = props.route.results.filter(ele => ele.route_id === routeId) - props.updateBreadcrumb({ agencyId, routeId }) - return ones[0] + if (ones.length > 0) { + props.updateBreadcrumb({ agencyId, routeId }) + return ones[0] + } + return null } return null } @@ -132,18 +147,9 @@ class RouteForm extends Component { + choices={StopLocationTypes} /> + choices={StopWheelChairInfo} /> {/* { + console.log('option: ', props) + const { stop_id, name, stop_desc } = props.data + return ( + + {stop_id} {name} + {stop_desc.length > 0 &&
{stop_desc}} + + ) +} + class StopTimeForm extends Component { state = { @@ -64,13 +80,14 @@ class StopTimeForm extends Component { return null } - getStops = (inputValue) => { - if (!inputValue) { - return Promise.resolve({ options: [] }); - } - return fetch(`${API_URL}/stop/?search=${inputValue}`) + getStops = (inputValue, callback) => { + fetch(`${API_URL}/stop/?search=${inputValue}`) .then((response) => response.json()) - .then((json) => ({ options: json.results })) + .then((json) => { + callback(json.results.map(ele => Object.assign(ele, { + value: ele.id, label: ele.name + }))) + }) } render() { @@ -86,19 +103,22 @@ class StopTimeForm extends Component {
- { - let evt = { - target: { - name: 'stop', - value: data, - }} - return this.handleChange(evt) + components={{ Option }} + onChange={(item, evt) => { + if (evt.action === 'select-option') { + let evt = { + target: { + name: 'stop', + value: item, + }} + this.handleChange(evt) + } }} />
@@ -126,38 +146,25 @@ class StopTimeForm extends Component { label="Pickup Type" type="text" fieldName="pickup_type" - value={item.pickup_type || '0'} + value={getItemFromList(item.pickup_type, PickUpTypes, '0')} handleChange={this.handleChange} - choices={[ - { value: '0', label: 'Regularly scheduled pickup' }, - { value: '1', label: 'No pickup' }, - { value: '2', label: 'Arrange pickup' }, - { value: '3', label: 'Contact driver' }, - ]} /> + choices={PickUpTypes} /> + choices={DropOffTypes} /> + choices={TimePointChoices} />
diff --git a/src/components/TripForm.js b/src/components/TripForm.js index 09ee185..2986b3e 100644 --- a/src/components/TripForm.js +++ b/src/components/TripForm.js @@ -12,6 +12,12 @@ import { getCalendar } from '../actions/calendar' import { getRoute } from '../actions' import { getStopTime } from '../actions/stoptime' import store from '../store' +import { + DirectionChoices, WheelChairAccessibles, + BikeAllowanceChoices +} from '../constants/choices' +import { getItemFromList } from '../utils' + const StyledTripForm = styled.div` padding: 1rem; @@ -134,7 +140,7 @@ class TripForm extends Component { label="Service" type="text" fieldName="service" - value={one.service} + value={one.service && Object.assign(one.service, {label: one.service.service_id})} handleChange={this.handleChange} choices={calendar.results.map(ele => ({ value: ele.id, label: ele.service_id }))} />} @@ -142,12 +148,9 @@ class TripForm extends Component { label="Direction ID" type="text" fieldName="direction_id" - value={one.direction_id || ''} + value={getItemFromList(one.direction_id, DirectionChoices)} handleChange={this.handleChange} - choices={[ - { value: '0', label: 'outbound' }, - { value: '1', label: 'inbound' }, - ]} /> + choices={DirectionChoices} /> + choices={WheelChairAccessibles} /> + choices={BikeAllowanceChoices} />
diff --git a/src/components/parts/HorizontalSelect.js b/src/components/parts/HorizontalSelect.js index 9c65856..ab5f0c4 100644 --- a/src/components/parts/HorizontalSelect.js +++ b/src/components/parts/HorizontalSelect.js @@ -1,6 +1,6 @@ import React from 'react' import Select from 'react-select' -import 'react-select/dist/react-select.css' +// import 'react-select/dist/react-select.css' const HorizontalInput = (props) => ( @@ -11,11 +11,11 @@ const HorizontalInput = (props) => (
{ diff --git a/src/constants/choices.js b/src/constants/choices.js new file mode 100644 index 0000000..5805655 --- /dev/null +++ b/src/constants/choices.js @@ -0,0 +1,60 @@ + +export const RouteTypeChoices = [ + { value: '0', label: 'Tram, Light rail' }, + { value: '1', label: 'Subway (within metro area)' }, + { value: '2', label: 'Rail' }, + { value: '3', label: 'Bus' }, + { value: '4', label: 'Ferry' }, + { value: '5', label: 'Cable car' }, + { value: '6', label: 'Gondola' }, + { value: '7', label: 'Funicular (steep inclines)' }, +] + +export const StopLocationTypes = [ + { value: '0', label: 'Stop' }, + { value: '1', label: 'Station' }, + { value: '2', label: 'Station Entrance/Exit' }, +] + +export const StopWheelChairInfo = [ + { value: '0', label: 'No information' }, + { value: '1', label: 'Possible (partially or fully)' }, + { value: '2', label: 'Not possible' }, +] + +export const DropOffTypes = [ + { value: '0', label: 'Regularly scheduled dropoff' }, + { value: '1', label: 'No drop off' }, + { value: '2', label: 'Arrange drop off' }, + { value: '3', label: 'Contact driver' }, +] + +export const TimePointChoices = [ + { value: '0', label: 'times are considered approximate.' }, + { value: '1', label: 'times are considered exact.' }, +] + +export const PickUpTypes = [ + { value: '0', label: 'Regularly scheduled pickup' }, + { value: '1', label: 'No pickup' }, + { value: '2', label: 'Arrange pickup' }, + { value: '3', label: 'Contact driver' }, +] + +export const DirectionChoices = [ + { value: '0', label: 'outbound' }, + { value: '1', label: 'inbound' }, +] + +export const WheelChairAccessibles = [ + { value: '0', label: 'No information' }, + { value: '1', label: 'Yes' }, + { value: '2', label: 'Not possible' }, +] + +export const BikeAllowanceChoices = [ + { value: '0', label: 'No information' }, + { value: '1', label: 'Yes' }, + { value: '2', label: 'Not possible' }, +] + diff --git a/src/container/Geo.js b/src/container/Geo.js index db975e8..e7d501b 100644 --- a/src/container/Geo.js +++ b/src/container/Geo.js @@ -6,7 +6,7 @@ import { Map, TileLayer, CircleMarker, ZoomControl, FeatureGroup, GeoJSON, Marker } from 'react-leaflet' // import { EditControl } from 'react-leaflet-draw' -import L from 'leaflet' +import * as L from 'leaflet' import { loggedIn } from '../reducers/auth' import { diff --git a/src/container/Main.js b/src/container/Main.js index edd7fda..9a23134 100644 --- a/src/container/Main.js +++ b/src/container/Main.js @@ -4,6 +4,7 @@ import { Redirect, Route, Switch } from 'react-router-dom' import { loggedIn } from '../reducers/auth' import { getAgency } from '../actions' +import First from '../components/First' import Nav from '../components/Nav' import Footer from '../components/Footer' import CalendarForm from '../components/CalendarForm' @@ -50,6 +51,7 @@ class Main extends Component { +