How to use velocity-react - 10 common examples

} from "searchkit";
import {InputFilter} from './modInputFilter.js';
import {RefinementListFilter, OnlyRefinementListFilter} from './modRefineListFilter.js';
import CardDetailPanel from './CardDetailPanel';
import CardHitsListItem from './CardHitsListItem';
import CardHitsGridItem from './CardHitsGridItem';
import CostSymbols from './CostSymbols';
import {MultiSelect} from './MultiSelect';
import {TogglePanel} from './TogglePanel';
//console.log("multiselect is " + MultiSelect);

String.prototype.replaceAll = function(s,r){return this.split(s).join(r);};

// Register animations here so that 'stagger' property can be used with them.
var Animations = {
    In: VelocityHelpers.registerEffect({
        calls: [
            [{
                transformPerspective: [ 800, 800 ],
                transformOriginX: [ '50%', '50%' ],
                transformOriginY: [ '100%', '100%' ],
                marginBottom: 10,
                opacity: 1,
                rotateX: [0, 130],
            }, 1, {
                easing: 'ease-out',
                display: 'block',
            }]
        ],
    }),
    Out: VelocityHelpers.registerEffect({
        calls: [

return (cards[cardName].cardName = cardName) && cards[cardName];
});

cardArray.sort(function(a,b) {
    if(a.name > b.name) {
        return 1;
    }
    if(a.name < b.name) {
        return -1;
    }
    return 0;
});

// Register animations here so that 'stagger' property can be used with them.
var Animations = {
    In: VelocityHelpers.registerEffect({
        calls: [
            [{
                transformPerspective: [ 800, 800 ],
                transformOriginX: [ '50%', '50%' ],
                transformOriginY: [ '100%', '100%' ],
                marginBottom: 1,
                opacity: 1,
                rotateX: [0, 130],
            }, 1, {
                easing: 'ease-out',
                display: 'block',
            }]
        ],
    }),
    Out: VelocityHelpers.registerEffect({
        calls: [

import React from 'react';
import ReactDOM from 'react-dom';
import {Button, IconButton} from 'react-toolbox/lib/button';
import style from './style';

var VelocityTransitionGroup = require('velocity-react/velocity-transition-group.js');
var VelocityComponent = require('velocity-react/velocity-component.js');
var VelocityHelpers = require('velocity-react/velocity-helpers.js');
require('velocity-animate');
require('velocity-animate/velocity.ui');

// Register animations here so that 'stagger' property can be used with them.
var Animations = {
    In: VelocityHelpers.registerEffect({
        calls: [
            [{
                transformPerspective: [ 800, 800 ],
                transformOriginX: [ '50%', '50%' ],
                transformOriginY: [ '100%', '100%' ],
                marginBottom: 1,
                opacity: 1,
                rotateX: [0, 130],
            }, 1, {
                easing: 'ease-out',
                display: 'block',
            }]
        ],
    }),
    Out: VelocityHelpers.registerEffect({
        calls: [

before(function () {
    VelocityTransitionGroup.disabledForTest = true
    chai.use(sinonChai)
    chai.use(chaiEnzyme())
    injectTapEventPlugin()
})

}, 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))));
    }
  }]);

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"

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.')));
    }
  }]);

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
      })));
    }
  }]);

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", {

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))));
    }
  }]);