How to use the velocity-react.VelocityTransitionGroup function in velocity-react

To help you get started, we’ve selected a few velocity-react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github opentripplanner / otp-react-redux / build / components / narrative / line-itin / transit-leg-body.js View on Github external
}, alertsExpanded && _react.default.createElement(AlertsBody, {
        alerts: leg.alerts,
        longDateFormat: longDateFormat,
        timeFormat: timeFormat
      })), leg.intermediateStops && leg.intermediateStops.length > 0 && _react.default.createElement("div", {
        className: "transit-leg-details"
      }, _react.default.createElement("div", {
        onClick: this._onToggleStopsClick,
        className: "header"
      }, leg.duration && _react.default.createElement("span", null, "Ride ", (0, _time.formatDuration)(leg.duration)), leg.intermediateStops && _react.default.createElement("span", null, ' / ', leg.intermediateStops.length + 1, ' stops ', _react.default.createElement("i", {
        className: "fa fa-caret-".concat(this.state.stopsExpanded ? 'up' : 'down')
      })), _react.default.createElement(_viewTripButton.default, {
        tripId: leg.tripId,
        fromIndex: leg.from.stopIndex,
        toIndex: leg.to.stopIndex
      })), _react.default.createElement(_velocityReact.VelocityTransitionGroup, {
        enter: {
          animation: 'slideDown'
        },
        leave: {
          animation: 'slideUp'
        }
      }, stopsExpanded ? _react.default.createElement(IntermediateStops, {
        stops: leg.intermediateStops
      }) : null), leg.averageWait && _react.default.createElement("span", null, "Typical Wait: ", (0, _time.formatDuration)(leg.averageWait))));
    }
  }]);
github opentripplanner / otp-react-redux / build / components / viewers / stop-viewer.js View on Github external
return _react.default.createElement("div", {
        className: "route-row"
      }, _react.default.createElement("div", {
        className: "header"
      }, _react.default.createElement("div", {
        className: "route-name"
      }, _react.default.createElement("b", null, routeName), " To ", pattern.headsign), hasStopTimes && _react.default.createElement("div", {
        className: "next-trip-preview"
      }, getFormattedStopTime(sortedStopTimes[0], homeTimezone, stopViewerArriving, timeFormat)), _react.default.createElement("div", {
        className: "expansion-button-container"
      }, _react.default.createElement("button", {
        className: "expansion-button",
        onClick: this._toggleExpandedView
      }, _react.default.createElement(_icon.default, {
        type: "chevron-".concat(this.state.expanded ? 'up' : 'down')
      })))), _react.default.createElement(_velocityReact.VelocityTransitionGroup, {
        enter: {
          animation: 'slideDown'
        },
        leave: {
          animation: 'slideUp'
        }
      }, this.state.expanded && _react.default.createElement("div", null, _react.default.createElement("div", {
        className: "trip-table"
      }, _react.default.createElement("div", {
        className: "header"
      }, _react.default.createElement("div", {
        className: "cell"
      }), _react.default.createElement("div", {
        className: "cell time-column"
      }, "DEPARTURE"), _react.default.createElement("div", {
        className: "cell status-column"
github opentripplanner / otp-react-redux / build / components / viewers / route-viewer.js View on Github external
style: {
          display: 'inline-block'
        }
      }), _react.default.createElement("div", {
        style: {
          display: 'inline-block',
          marginTop: '2px'
        }
      }, _react.default.createElement(_reactBootstrap.Label, {
        style: {
          backgroundColor: backgroundColor === '#ffffff' ? 'rgba(0,0,0,0)' : backgroundColor,
          fontSize: 'medium',
          fontWeight: 400,
          color: color
        }
      }, _react.default.createElement("b", null, route.shortName), " ", longName))), _react.default.createElement(_velocityReact.VelocityTransitionGroup, {
        enter: {
          animation: 'slideDown'
        },
        leave: {
          animation: 'slideUp'
        }
      }, isActive && _react.default.createElement("div", {
        style: {
          padding: 8
        }
      }, route.url ? _react.default.createElement("a", {
        href: route.url,
        target: "_blank"
      }, "Route Details") : 'No route URL provided.')));
    }
  }]);
github opentripplanner / otp-react-redux / build / components / narrative / line-itin / access-leg-body.js View on Github external
return _react.default.createElement("div", {
        className: "leg-body"
      }, _react.default.createElement(AccessLegSummary, {
        config: config,
        leg: leg,
        onSummaryClick: this._onSummaryClick,
        customIcons: customIcons
      }), _react.default.createElement("div", {
        onClick: this._onStepsHeaderClick,
        className: "steps-header"
      }, (0, _time.formatDuration)(leg.duration), leg.steps && _react.default.createElement("span", null, " ", _react.default.createElement("i", {
        className: "fa fa-caret-".concat(this.state.expanded ? 'up' : 'down')
      }))), this.props.routingType === 'ITINERARY' && _react.default.createElement(_legDiagramPreview.default, {
        leg: leg
      }), _react.default.createElement(_velocityReact.VelocityTransitionGroup, {
        enter: {
          animation: 'slideDown'
        },
        leave: {
          animation: 'slideUp'
        }
      }, this.state.expanded && _react.default.createElement(AccessLegSteps, {
        steps: leg.steps
      })));
    }
  }]);
github opentripplanner / otp-react-redux / build / components / narrative / line-itin / transit-leg-body.js View on Github external
href: agencyUrl,
        target: "_blank"
      }, agencyName, logoUrl && _react.default.createElement("img", {
        src: logoUrl,
        height: 25,
        style: {
          marginLeft: '5px'
        }
      }))), alerts && alerts.length > 0 && _react.default.createElement("div", {
        onClick: this._onToggleAlertsClick,
        className: "transit-alerts-toggle"
      }, _react.default.createElement("i", {
        className: "fa fa-exclamation-triangle"
      }), " ", alerts.length, " ", pluralize('alert', alerts), ' ', _react.default.createElement("i", {
        className: "fa fa-caret-".concat(this.state.alertsExpanded ? 'up' : 'down')
      })), _react.default.createElement(_velocityReact.VelocityTransitionGroup, {
        enter: {
          animation: 'slideDown'
        },
        leave: {
          animation: 'slideUp'
        }
      }, alertsExpanded && _react.default.createElement(AlertsBody, {
        alerts: leg.alerts,
        longDateFormat: longDateFormat,
        timeFormat: timeFormat
      })), leg.intermediateStops && leg.intermediateStops.length > 0 && _react.default.createElement("div", {
        className: "transit-leg-details"
      }, _react.default.createElement("div", {
        onClick: this._onToggleStopsClick,
        className: "header"
      }, leg.duration && _react.default.createElement("span", null, "Ride ", (0, _time.formatDuration)(leg.duration)), leg.intermediateStops && _react.default.createElement("span", null, ' / ', leg.intermediateStops.length + 1, ' stops ', _react.default.createElement("i", {
github opentripplanner / otp-react-redux / build / components / narrative / trip-details.js View on Github external
var _this$props2 = this.props,
          icon = _this$props2.icon,
          summary = _this$props2.summary,
          description = _this$props2.description;
      return _react.default.createElement("div", {
        className: "trip-detail"
      }, _react.default.createElement("div", {
        className: "icon"
      }, icon), _react.default.createElement("div", {
        className: "summary"
      }, summary, description && _react.default.createElement(_reactBootstrap.Button, {
        className: "expand-button clear-button-formatting",
        onClick: this._toggle
      }, _react.default.createElement("i", {
        className: "fa fa-question-circle"
      })), _react.default.createElement(_velocityReact.VelocityTransitionGroup, {
        enter: {
          animation: 'slideDown'
        },
        leave: {
          animation: 'slideUp'
        }
      }, this.state.expanded && _react.default.createElement("div", {
        className: "description"
      }, _react.default.createElement(_reactBootstrap.Button, {
        className: "hide-button clear-button-formatting",
        onClick: this._onHideClick
      }, _react.default.createElement("i", {
        className: "fa fa-close"
      })), description))));
    }
  }]);