From f1da2293c663837b36508cb3911769c6a120b3f1 Mon Sep 17 00:00:00 2001 From: Andreas Helms Date: Wed, 20 Nov 2024 12:55:04 +0100 Subject: [PATCH] feat(search): enable swap independently of via points --- app/component/OriginDestinationBar.js | 3 +- app/component/WithSearchContext.js | 6 +- .../README.md | 7 +- .../src/helpers/styles.scss | 6 +- .../src/index.js | 69 +++++++++++-------- 5 files changed, 53 insertions(+), 38 deletions(-) diff --git a/app/component/OriginDestinationBar.js b/app/component/OriginDestinationBar.js index f03965d901..8db5be1532 100644 --- a/app/component/OriginDestinationBar.js +++ b/app/component/OriginDestinationBar.js @@ -148,7 +148,6 @@ class OriginDestinationBar extends React.Component { refPoint={refPoint} originPlaceHolder="search-origin-index" destinationPlaceHolder="search-destination-index" - showMultiPointControls={this.context.config.viaPointsEnabled} viaPoints={this.props.viaPoints} updateViaPoints={this.updateViaPoints} addAnalyticsEvent={addAnalyticsEvent} @@ -171,6 +170,8 @@ class OriginDestinationBar extends React.Component { } modeSet={this.props.modeSet} onFocusChange={() => {}} + showSwapControl + showViapointControl={this.context.config.viaPointsEnabled} filterResults={filter} />{' '} diff --git a/app/component/WithSearchContext.js b/app/component/WithSearchContext.js index 32730d87a1..13e62af0e0 100644 --- a/app/component/WithSearchContext.js +++ b/app/component/WithSearchContext.js @@ -41,15 +41,15 @@ export default function withSearchContext( onGeolocationStart: PropTypes.func, fromMap: PropTypes.string, isMobile: PropTypes.bool, - showMultiPointControls: PropTypes.bool, favouriteContext: PropTypes.bool, + showViapointControl: PropTypes.bool, }; static defaultProps = { onGeolocationStart: null, fromMap: undefined, isMobile: false, - showMultiPointControls: false, + showViapointControl: false, }; constructor(props) { @@ -261,7 +261,7 @@ export default function withSearchContext( return this.renderSelectFromMapModal(fromMap); } - const viaProps = this.props.showMultiPointControls + const viaProps = this.props.showViapointControl ? { handleViaPointLocationSelected: this.onSelect } : {}; return ( diff --git a/digitransit-component/packages/digitransit-component-autosuggest-panel/README.md b/digitransit-component/packages/digitransit-component-autosuggest-panel/README.md index 7e35993056..1339210de8 100644 --- a/digitransit-component/packages/digitransit-component-autosuggest-panel/README.md +++ b/digitransit-component/packages/digitransit-component-autosuggest-panel/README.md @@ -81,10 +81,9 @@ const sources = ['Favourite', 'History', 'Datasource'] // Defines where you are destination={destination} // Selected destination point originPlaceHolder={'Give origin'} // Optional Give string shown initially inside origin search field destinationPlaceHolder={'Give destination'} // Optional Give string shown initally inside destination search field - showMultiPointControls={false} // Optional. If true, controls for via points and reversing is being shown. - initialViaPoints={[]} // Optional. If showMultiPointControls is set to true, pass initial via points to the panel. Currently no default implementation is given. - updateViaPoints={() => return []} // Optional. If showMultiPointControls is set to true, define how to update your via point list with this function. Currenlty no default implementation is given. - swapOrder={() => return null} // Optional. If showMultiPointControls is set to true, define how to swap order of your points (origin, destination, viapoints). Currently no default implementation is given. + initialViaPoints={[]} // Optional. If showViapointControl is set to true, pass initial via points to the panel. Currently no default implementation is given. + updateViaPoints={() => return []} // Optional. If showViapointControl is set to true, define how to update your via point list with this function. Currenlty no default implementation is given. + swapOrder={() => return null} // Optional. If showViapointControl is set to true, define how to swap order of your points (origin, destination, viapoints). Currently no default implementation is given. searchContext={searchContext} getAutoSuggestIcons={getAutoSuggestIcons} onSelect={this.onSelect} diff --git a/digitransit-component/packages/digitransit-component-autosuggest-panel/src/helpers/styles.scss b/digitransit-component/packages/digitransit-component-autosuggest-panel/src/helpers/styles.scss index 2b08205cb1..10c09b383d 100644 --- a/digitransit-component/packages/digitransit-component-autosuggest-panel/src/helpers/styles.scss +++ b/digitransit-component/packages/digitransit-component-autosuggest-panel/src/helpers/styles.scss @@ -150,7 +150,7 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle, justify-content: center; text-align: center; max-height: 50px; - cursor: pointer; + min-width: var(--width); & + .itinerary-search-control { border-left: 1px solid rgba(151, 151, 151, 0.2); } @@ -160,6 +160,7 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle, align-items: center; height: 100%; min-width: 40px; + cursor: pointer; svg { width: 19px; height: 17px; @@ -171,6 +172,7 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle, align-items: center; height: 100%; min-width: 40px; + cursor: pointer; svg { width: 20px; height: 22px; @@ -182,6 +184,7 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle, align-items: center; height: 100%; min-width: 47px; + cursor: pointer; svg { width: 18px; height: 19px; @@ -194,6 +197,7 @@ $zindex: base, map-container, map-gradient, map-fullscreen-toggle, height: 100%; max-height: 44px; min-width: 40px; + cursor: pointer; svg { width: 14px; height: 14px; diff --git a/digitransit-component/packages/digitransit-component-autosuggest-panel/src/index.js b/digitransit-component/packages/digitransit-component-autosuggest-panel/src/index.js index 55bcc712b7..3ff0807e37 100644 --- a/digitransit-component/packages/digitransit-component-autosuggest-panel/src/index.js +++ b/digitransit-component/packages/digitransit-component-autosuggest-panel/src/index.js @@ -38,11 +38,14 @@ const ItinerarySearchControl = ({ enabled, onClick, onKeyPress, + wide, ...rest -}) => - enabled && - onClick && ( -
+}) => ( +
+ {onClick && enabled && (
{children}
-
- ); + )} +
+); ItinerarySearchControl.propTypes = { children: PropTypes.node, @@ -62,6 +66,7 @@ ItinerarySearchControl.propTypes = { enabled: PropTypes.bool.isRequired, onClick: PropTypes.func.isRequired, onKeyPress: PropTypes.func.isRequired, + wide: PropTypes.bool, }; /** @@ -134,10 +139,9 @@ ItinerarySearchControl.propTypes = { * destination={destination} // Selected destination point * originPlaceHolder={'Give origin'} // Optional Give string shown initially inside origin search field * destinationPlaceHolder={'Give destination'} // Optional Give string shown initally inside destination search field - * showMultiPointControls={false} // Optional. If true, controls for via points and reversing is being shown. - * initialViaPoints={[]} // Optional. If showMultiPointControls is set to true, pass initial via points to the panel. Currently no default implementation is given. - * updateViaPoints={() => return []} // Optional. If showMultiPointControls is set to true, define how to update your via point list with this function. Currenlty no default implementation is given. - * swapOrder={() => return null} // Optional. If showMultiPointControls is set to true, define how to swap order of your points (origin, destination, viapoints). Currently no default implementation is given. + * initialViaPoints={[]} // Optional. If showViapointControl is set to true, pass initial via points to the panel. Currently no default implementation is given. + * updateViaPoints={() => return []} // Optional. If showViapointControl is set to true, define how to update your via point list with this function. Currenlty no default implementation is given. + * swapOrder={() => return null} // Optional. If showViapointControl is set to true, define how to swap order of your points (origin, destination, viapoints). Currently no default implementation is given. * searchContext={searchContext} * getAutoSuggestIcons={getAutoSuggestIcons} * onSelect={this.onSelect} @@ -151,13 +155,14 @@ ItinerarySearchControl.propTypes = { * originMobileLabel="Origin label" // Optional. Custom label text for origin field on mobile. * destinationMobileLabel="Destination label" // Optional. Custom label text for destination field on mobile. * handleFocusChange={() => {}} // Optional. If defined overrides default onFocusChange behaviour + * showSwapControl={false} // Optional. + * showViapointControl={false} // Optional. */ class DTAutosuggestPanel extends React.Component { static propTypes = { appElement: PropTypes.string.isRequired, origin: PropTypes.object.isRequired, destination: PropTypes.object.isRequired, - showMultiPointControls: PropTypes.bool, originPlaceHolder: PropTypes.string, destinationPlaceHolder: PropTypes.string, viaPoints: PropTypes.arrayOf(PropTypes.object), @@ -189,11 +194,12 @@ class DTAutosuggestPanel extends React.Component { showScroll: PropTypes.bool, onFocusChange: PropTypes.func, isEmbedded: PropTypes.bool, + showSwapControl: PropTypes.bool, + showViapointControl: PropTypes.bool, }; static defaultProps = { viaPoints: [], - showMultiPointControls: false, originPlaceHolder: 'give-origin', destinationPlaceHolder: 'give-destination', swapOrder: undefined, @@ -217,6 +223,8 @@ class DTAutosuggestPanel extends React.Component { showScroll: false, onFocusChange: undefined, isEmbedded: false, + showSwapControl: false, + showViapointControl: false, }; constructor(props) { @@ -394,7 +402,6 @@ class DTAutosuggestPanel extends React.Component { render = () => { const { - showMultiPointControls, origin, searchPanelText, searchContext, @@ -404,6 +411,8 @@ class DTAutosuggestPanel extends React.Component { destinationMobileLabel, fontWeights, onFocusChange, + showSwapControl, + showViapointControl, } = this.props; const { activeSlackInputs } = this.state; const slackTime = this.getSlackTimeOptions(); @@ -420,7 +429,6 @@ class DTAutosuggestPanel extends React.Component { styles['autosuggest-panel'], { small: this.props.isMobile, - showMultiPointControls, }, ])} style={{ @@ -472,17 +480,19 @@ class DTAutosuggestPanel extends React.Component { showScroll={this.props.showScroll} isEmbedded={this.props.isEmbedded} /> - this.handleSwapOrderClick()} - onKeyPress={e => - this.isKeyboardSelectionEvent(e) && this.handleSwapOrderClick() - } - aria-label={i18next.t('swap-order-button-label')} - > - - + {(showSwapControl || showViapointControl) && ( + this.handleSwapOrderClick()} + onKeyPress={e => + this.isKeyboardSelectionEvent(e) && this.handleSwapOrderClick() + } + aria-label={i18next.t('swap-order-button-label')} + > + + + )} {viaPoints.length === 0 && (
@@ -555,7 +565,7 @@ class DTAutosuggestPanel extends React.Component {
this.handleToggleViaPointSlackClick(i)} onKeyPress={e => this.isKeyboardSelectionEvent(e) && @@ -567,6 +577,7 @@ class DTAutosuggestPanel extends React.Component { : 'add-via-duration-button-label-close', { index: i + 1 }, )} + wide > @@ -609,7 +620,7 @@ class DTAutosuggestPanel extends React.Component { this.handleRemoveViaPointClick(i)} onKeyPress={e => this.isKeyboardSelectionEvent(e) && @@ -658,12 +669,12 @@ class DTAutosuggestPanel extends React.Component { showScroll={this.props.showScroll} isEmbedded={this.props.isEmbedded} /> - {showMultiPointControls && ( + {(showSwapControl || showViapointControl) && ( 4, })} - enabled={showMultiPointControls} + enabled={showViapointControl} onClick={() => this.handleAddViaPointClick()} onKeyPress={e => this.isKeyboardSelectionEvent(e) &&