diff --git a/app/component/RouteNumber.js b/app/component/RouteNumber.js index db54ec341f..efbaefa2cb 100644 --- a/app/component/RouteNumber.js +++ b/app/component/RouteNumber.js @@ -12,15 +12,43 @@ const LONG_ROUTE_NUMBER_LENGTH = 6; function RouteNumber(props, context) { const mode = props.mode.toLowerCase(); - const { alertSeverityLevel, color, withBicycle, withCar, text } = props; + const { alertSeverityLevel, color, withBicycle, withCar } = props; const isScooter = mode === TransportMode.Scooter.toLowerCase(); - const textIsText = typeof text === 'string'; // can be also react node + + // Perform text-related processing + let filteredText = props.text; + if ( + props.isInItineraryList && + context.config.disabledLegTextModes?.includes(mode) && + props.className.includes('line') + ) { + filteredText = ''; + } + const textFieldIsText = typeof filteredText === 'string'; // can be also react node + if ( + props.isInItineraryList && + context.config.shortenLongTextInItineraryListThreshold && + filteredText && + textFieldIsText && + filteredText.length > context.config.shortenLongTextInItineraryListThreshold + ) { + filteredText = `${filteredText.substring( + 0, + context.config.shortenLongTextInItineraryListThreshold - 3, + )}...`; + } const longText = - text && textIsText && text.length >= LONG_ROUTE_NUMBER_LENGTH; + filteredText && + textFieldIsText && + filteredText.length >= LONG_ROUTE_NUMBER_LENGTH; // Checks if route only has letters without identifying numbers and // length doesn't fit in the tab view const hasNoShortName = - text && textIsText && /^([^0-9]*)$/.test(text) && text.length > 3; + filteredText && + textFieldIsText && + /^([^0-9]*)$/.test(filteredText) && + filteredText.length > 3; + const getColor = () => color || (props.isTransitLeg ? 'currentColor' : null); const getIcon = ( @@ -140,7 +168,7 @@ function RouteNumber(props, context) { )} )} - {text && ( + {filteredText && (
- {props.text} + {filteredText} - {textIsText && ( - {text?.toLowerCase()} + {textFieldIsText && ( + {filteredText?.toLowerCase()} )}
)} @@ -222,6 +250,7 @@ RouteNumber.propTypes = { card: PropTypes.bool, appendClass: PropTypes.string, occupancyStatus: PropTypes.string, + isInItineraryList: PropTypes.bool, }; RouteNumber.defaultProps = { @@ -245,6 +274,7 @@ RouteNumber.defaultProps = { color: undefined, duration: undefined, occupancyStatus: undefined, + isInItineraryList: false, }; RouteNumber.contextTypes = { diff --git a/app/component/RouteNumberContainer.js b/app/component/RouteNumberContainer.js index 504d801d08..3d84755b72 100644 --- a/app/component/RouteNumberContainer.js +++ b/app/component/RouteNumberContainer.js @@ -24,12 +24,8 @@ const RouteNumberContainer = ( isCallAgency={isCallAgency} color={route.color ? `#${route.color}` : null} mode={mode !== undefined ? mode : route.mode} - text={ - config.disabledLegTextModes?.includes(route.mode) && - className.includes('line') - ? '' - : getLegText(route, config, interliningWithRoute) - } + text={getLegText(route, config, interliningWithRoute)} + isInItineraryList occupancyStatus={occupancyStatus} {...props} /> diff --git a/app/configurations/config.kela.js b/app/configurations/config.kela.js index 9ef8429630..b299e00ba3 100644 --- a/app/configurations/config.kela.js +++ b/app/configurations/config.kela.js @@ -156,4 +156,5 @@ export default { showCO2InItinerarySummary: false, useAssembledGeoJsonZones: 'isOnByDefault', locationSearchTargetsFromOTP: [], // remove stop/station location search + shortenLongTextInItineraryListThreshold: 10, }; diff --git a/app/configurations/config.matka.js b/app/configurations/config.matka.js index 8185c71530..37b6f37309 100644 --- a/app/configurations/config.matka.js +++ b/app/configurations/config.matka.js @@ -403,7 +403,7 @@ export default { FERRY: { showNotification: true }, }, - disabledLegTextModes: ['FERRY'], + disabledLegTextModes: ['ferry'], // Include both bike and park and bike and public, if bike is enabled includePublicWithBikePlan: true,