feat(RouteTypeSelect): Add route type selector with new extended GTFS route types.

binh-dam-ibigroup · binh-dam-ibigroup · commit 5509225a8286 · 2022-02-14T10:32:37.000-05:00
diff --git a/gtfs.yml b/gtfs.yml
@@ -271,7 +271,7 @@
     helpContent: 'Contains a description of a route. Please provide useful, quality information. Do not simply duplicate the name of the route. For example, "A trains operate between Inwood-207 St, Manhattan and Far Rockaway-Mott Avenue, Queens at all times. Also from about 6AM until about midnight, additional A trains operate between Inwood-207 St and Lefferts Boulevard (trains typically alternate between Lefferts Blvd and Far Rockaway)."'
   - name: route_type
     required: true
-    inputType: DROPDOWN
+    inputType: GTFS_ROUTE_TYPE
     bulkEditEnabled: true
     options:
     - value: 3
diff --git a/lib/editor/components/EditorInput.js b/lib/editor/components/EditorInput.js
@@ -1,11 +1,13 @@
 // @flow
 
+import moment from 'moment'
 import * as React from 'react'
 import {Checkbox, FormControl, FormGroup, ControlLabel, Tooltip, OverlayTrigger} from 'react-bootstrap'
-import Select from 'react-select'
-import moment from 'moment'
 import DateTimeField from 'react-bootstrap-datetimepicker'
+import ReactDOM from 'react-dom'
+import DropdownTreeSelect from 'react-dropdown-tree-select'
 import Dropzone from 'react-dropzone'
+import Select from 'react-select'
 
 import * as activeActions from '../actions/active'
 import * as editorActions from '../actions/editor'
@@ -19,6 +21,7 @@ import type {Entity, Feed, GtfsSpecField, GtfsAgency, GtfsStop} from '../../type
 import type {EditorTables} from '../../types/reducers'
 
 import ColorField from './ColorField'
+import RouteTypeSelect from './RouteTypeSelect'
 import VirtualizedEntitySelect from './VirtualizedEntitySelect'
 import ZoneSelect from './ZoneSelect'
 
@@ -102,6 +105,18 @@ export default class EditorInput extends React.Component<Props> {
     })
   }
 
+  _onRouteTypeChange = (currentNode: any) => {
+    if (currentNode.value && currentNode.value !== 'extended-route-types-header') {
+      const {activeComponent, activeEntity, field, onChange, updateActiveGtfsEntity} = this.props
+      onChange && onChange(currentNode.value)
+      updateActiveGtfsEntity && activeEntity && updateActiveGtfsEntity({
+        component: activeComponent,
+        entity: activeEntity,
+        props: {[field.name]: currentNode.value}
+      })
+    }
+  }
+
   _onSelectChange = (option: any) => {
     const {onChange, updateActiveGtfsEntity, activeEntity, activeComponent, field} = this.props
     const val = option ? option.value : null
@@ -341,14 +356,6 @@ export default class EditorInput extends React.Component<Props> {
                 </option>
                 : null
               }
-              {field.name === 'route_type'
-                ? this._renderRouteTypeOptions(field)
-                : options.map(o => (
-                  <option value={o.value} key={o.value}>
-                    {o.text || o.value}
-                  </option>
-                ))
-              }
             </FormControl>
           </FormGroup>
         )
@@ -365,6 +372,18 @@ export default class EditorInput extends React.Component<Props> {
             onChange={this._onSelectChange} />
         )
       }
+      case 'GTFS_ROUTE_TYPE': {
+        return (
+          <FormGroup {...formProps}>
+            {basicLabel}
+            <RouteTypeSelect
+              field={field}
+              onRouteTypeChange={this._onRouteTypeChange}
+              routeType={currentValue}
+            />
+          </FormGroup>
+        )
+      }
       case 'GTFS_AGENCY':
         const agencies = getTableById(tableData, 'agency')
         const agency = agencies.find(a => a.agency_id === currentValue)
diff --git a/lib/editor/components/RouteTypeSelect.js b/lib/editor/components/RouteTypeSelect.js
@@ -0,0 +1,94 @@
+// @flow
+
+import React, { Component } from 'react'
+import DropdownTreeSelect from 'react-dropdown-tree-select'
+
+import type { GtfsSpecField } from '../../types'
+
+type Props = {
+  field: GtfsSpecField,
+  onRouteTypeChange: any => void,
+  routeType: string
+}
+
+type State = {
+  data: any
+}
+
+/**
+ * Creates the route types tree structure for the route type selector.
+ */
+function getRouteTypeOptions (field: GtfsSpecField, routeType: string) {
+  const routeTypes = field.options || []
+  const standardRouteTypes = routeTypes.filter(opt => parseInt(opt.value, 10) < 100)
+  const extendedRouteTypes = routeTypes.filter(opt => parseInt(opt.value, 10) >= 100)
+
+  const routeTypeData = [
+    // Show standard route types (< 100) at the top level
+    ...standardRouteTypes.map(({ text, value }) => ({
+      checked: value === routeType,
+      label: `${text} (${value})`,
+      value
+    })),
+    
+    // If any, show extended route types initially collapsed
+    ...(extendedRouteTypes.length > 0 ? [{
+      children: [
+        // Group children by type (e.g. all 101-199 route types fall under 100-Railway)
+        ...extendedRouteTypes
+          .filter(opt => parseInt(opt.value, 10) % 100 === 0)
+          .map(category => {
+            const routeTypesForCategory = extendedRouteTypes.filter(
+              opt => opt.value > category.value && opt.value < category.value + 100
+            )
+
+            return {
+              checked: category.value === routeType,
+              children: routeTypesForCategory.map(({ text, value }) => ({
+                checked: value === routeType,
+                label: `${text} (${value})`,
+                value
+              })),
+              label: `${category.text} (${category.value})`,
+              value: category.value
+            }
+          })
+      ],
+      label: 'Extended GTFS Route Types',
+      value: 'extended-route-types-header'
+    }] : [])
+  ]
+
+  return routeTypeData
+}
+
+/**
+ * Encapsulates a drop-down selector with a hierarchical (tree) list of choices.
+ */
+export default class RouteTypeSelect extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { data: getRouteTypeOptions(props.field, props.routeType) }
+  }
+
+  /**
+   * Prevent resetting of any expanded status of the tree hierarchy
+   * (datatools polls the backend every 10 seconds and that causes new props
+   * to be passed to the editor component).
+   */
+  shouldComponentUpdate(nextProps: Props) {
+    return nextProps.routeType !== this.props.routeType && nextProps.field !== this.props.field
+  }
+
+  render() {
+    return (
+      <DropdownTreeSelect
+        className='route-type-select'
+        data={this.state.data}
+        inlineSearchInput
+        mode='radioSelect'
+        onChange={this.props.onRouteTypeChange}
+      />
+    );
+  }
+}
diff --git a/lib/index.css b/lib/index.css
@@ -17,5 +17,6 @@
 @import url(node_modules/rc-slider/assets/index.css);
 @import url(node_modules/react-toggle/style.css);
 @import url(node_modules/react-toastify/dist/ReactToastify.min.css);
+@import url(node_modules/react-dropdown-tree-select/dist/styles.css);
 
 @import url(lib/style.css);
diff --git a/lib/style.css b/lib/style.css
@@ -747,3 +747,74 @@ h4.line:after {
 .recent-activity-inner {
   margin-left: 36;
 }
+
+
+/* Custom classes for the DropdownTreeSelect component that
+ * override CSS from 'react-dropdown-tree-select/dist/styles.css'.
+ * Modified from https://dowjones.github.io/react-dropdown-tree-select/#/story/with-bootstrap-styles.
+ */
+
+.route-type-select .dropdown {
+  display: block;
+}
+
+ /* Make some styles look like bootstrap. */
+.route-type-select .dropdown-trigger {
+  background-color: #fff;
+  border-color: #ccc!important;
+  border-radius: 4px;
+  color: #555;
+  padding: 0px 6px!important;
+  width: 100%;
+}
+
+/* Remove border and background of tags (a "tag" is a selected item). */
+.route-type-select .dropdown-trigger .tag {
+  background: none!important;
+  border: none!important;
+}
+
+/* Hide the search box and the mini "delete" button next to the value. */
+.route-type-select .dropdown-trigger .tag-item,
+.route-type-select .dropdown-trigger .tag-item .search,
+.route-type-select .dropdown-trigger .tag-remove {
+  display: none;
+}
+
+.route-type-select .dropdown-trigger .tag-item:first-of-type {
+  display: inherit;
+}
+
+/* Position the drop-down arrow. */
+.route-type-select .dropdown-trigger.arrow:after {
+  position: absolute;
+  right: 2px;
+}
+
+/* Hide the checkboxes in the tree list. */
+.route-type-select .dropdown-content input[type=radio] {
+  display: none;
+}
+
+/* Reduce v-space between tree items. */
+.route-type-select .dropdown-content .node {
+  padding: 2px;
+}
+
+.route-type-select .toggle {
+  font: normal normal normal 12px/1 FontAwesome;
+  color: #555;
+}
+
+.route-type-select .toggle.collapsed::after {
+  content: "\f067";
+}
+
+.route-type-select .toggle.expanded::after {
+  content: "\f068";
+}
+
+.route-type-select .root {
+  padding: 0px;
+  margin: 0px;
+}
diff --git a/package.json b/package.json
@@ -78,6 +78,7 @@
     "react-dnd": "^2.1.4",
     "react-dnd-html5-backend": "^2.1.2",
     "react-dom": "^15.4.1",
+    "react-dropdown-tree-select": "^2.5.1",
     "react-dropzone": "^3.5.3",
     "react-ga": "^2.3.5",
     "react-leaflet": "1.1.0",
diff --git a/yarn.lock b/yarn.lock
@@ -1899,6 +1899,11 @@ array-unique@^0.3.2:
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
   integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
 
+array.partial@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/array.partial/-/array.partial-1.0.5.tgz#f514595aacbf6a99ea20bbcffbcacc10316f0d56"
+  integrity sha512-nkHH1dU6JXrwppCqdUD5M1R85vihgBqhk9miq+3WFwwRayNY1ggpOT6l99PppqYQ1Hcjv2amFfUzhe25eAcYfA==
+
 array.prototype.find@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/array.prototype.find/-/array.prototype.find-2.0.0.tgz#56a9ab1edde2a7701ed6d9166acec338919d8430"
@@ -9695,7 +9700,6 @@ npm@^6.14.8:
     cmd-shim "^3.0.3"
     columnify "~1.5.4"
     config-chain "^1.1.12"
-    debuglog "*"
     detect-indent "~5.0.0"
     detect-newline "^2.1.0"
     dezalgo "~1.0.3"
@@ -9710,7 +9714,6 @@ npm@^6.14.8:
     has-unicode "~2.0.1"
     hosted-git-info "^2.8.8"
     iferr "^1.0.2"
-    imurmurhash "*"
     infer-owner "^1.0.4"
     inflight "~1.0.6"
     inherits "^2.0.4"
@@ -9729,14 +9732,8 @@ npm@^6.14.8:
     libnpx "^10.2.4"
     lock-verify "^2.1.0"
     lockfile "^1.0.4"
-    lodash._baseindexof "*"
     lodash._baseuniq "~4.6.0"
-    lodash._bindcallback "*"
-    lodash._cacheindexof "*"
-    lodash._createcache "*"
-    lodash._getnative "*"
     lodash.clonedeep "~4.5.0"
-    lodash.restparam "*"
     lodash.union "~4.6.0"
     lodash.uniq "~4.5.0"
     lodash.without "~4.4.0"
@@ -11794,6 +11791,14 @@ react-dom@^15.4.1, react-dom@^15.6.2:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
+react-dropdown-tree-select@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/react-dropdown-tree-select/-/react-dropdown-tree-select-2.5.1.tgz#071bef6193352cda8f3177d7f56e906a8fa175e3"
+  integrity sha512-9sN62pIci6EZ0Fni5fqB7b5e7UG/FQ/qSwYtcc0+P3VaE1bHnEYQ9XxTSkFqpbVsy9dfq94RGaECzWcErgB+jw==
+  dependencies:
+    array.partial "^1.0.5"
+    react-infinite-scroll-component "^4.0.2"
+
 react-dropzone@^3.5.3:
   version "3.13.4"
   resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-3.13.4.tgz#84da26815c40339691c49b4544c2ef7a16912ccc"
@@ -11807,6 +11812,11 @@ react-ga@^2.3.5:
   resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-2.5.6.tgz#5a2e2fa78ae298e5b0a4498210eeec631ef1b562"
   integrity sha512-g04dz6zrbdHRxVaURPWT3RUbjLflh74sS6dCuhGeZupj7ii+UEt9lwTjALb2ST2w+7wAmzG1YqYlNX4yvRXe1g==
 
+react-infinite-scroll-component@^4.0.2:
+  version "4.5.3"
+  resolved "https://registry.yarnpkg.com/react-infinite-scroll-component/-/react-infinite-scroll-component-4.5.3.tgz#008c2ec358628b490117ffc4aa6ce6982b26f8be"
+  integrity sha512-8O0PIeYZx0xFVS1ChLlLl/1obn64vylzXeheLsm+t0qUibmet7U6kDaKFg6jVRQJwDikWBTcyqEFFsxrbFCO5w==
+
 react-input-autosize@^2.1.2:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8"
