<commit_before>/**
 * echarts组件基类
 *
 * @desc echarts基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。
 * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
 *
 */
define(function (require) {
    var ecConfig = require('../config');
    var ecQuery = require('../util/ecQuery');
    var number = require('../util/number');
    var zrUtil = require('zrender/tool/util');

    function Base(ecTheme, messageCenter, zr, option, myChart){
        this.ecTheme = ecTheme;
        this.messageCenter = messageCenter;
        this.zr =zr;
        this.option = option;
        this.series = option.series;
        this.myChart = myChart;
        this.component = myChart.component;

        this._zlevelBase = this.getZlevelBase();
        this.shapeList = [];
        this.effectList = [];

        var self = this;
        self.hoverConnect = function (param) {
            var target = (param.target || {}).hoverConnect;
            if (target) {
                var zlevel = 10;
                var shape;
                if (!(target instanceof Array)) {
                    shape = self.getShapeById(target);
                    if (shape) {
                        self.zr.addHoverShape(shape);
                        zlevel = Math.min(zlevel, shape.zlevel);
                    }
                }
                else {
                    for (var i = 0, l = target.length; i < l; i++) {
                        shape = self.getShapeById(target[i]);
                        self.zr.addHoverShape(shape);
                        zlevel = Math.min(zlevel, shape.zlevel);
                    }
                }
                if (zlevel < param.target.zlevel) {
                    self.zr.addHoverShape(param.target);
                }
            }
        };
    }

    /**
     * 基类方法
     */
    Base.prototype = {
        canvasSupported : require('zrender/tool/env').canvasSupported,
        /**
         * 获取zlevel基数配置
         * @param {Object} contentType
         */
        getZlevelBase : function (contentType) {
            contentType = contentType || this.type + '';

            switch (contentType) {
                case ecConfig.COMPONENT_TYPE_GRID :
                case ecConfig.COMPONENT_TYPE_AXIS_CATEGORY :
                case ecConfig.COMPONENT_TYPE_AXIS_VALUE :
                case ecConfig.COMPONENT_TYPE_POLAR :
                    return 0;

                case ecConfig.CHART_TYPE_LINE :
                case ecConfig.CHART_TYPE_BAR :
                case ecConfig.CHART_TYPE_SCATTER :
                case ecConfig.CHART_TYPE_PIE :
                case ecConfig.CHART_TYPE_RADAR :
                case ecConfig.CHART_TYPE_MAP :
                case ecConfig.CHART_TYPE_K :
                case ecConfig.CHART_TYPE_CHORD:
                case ecConfig.CHART_TYPE_GUAGE:
                case ecConfig.CHART_TYPE_FUNNEL:
                    return 2;

                case ecConfig.COMPONENT_TYPE_LEGEND :
                case ecConfig.COMPONENT_TYPE_DATARANGE:
                case ecConfig.COMPONENT_TYPE_DATAZOOM :
                case ecConfig.COMPONENT_TYPE_TIMELINE :
                    return 4;

                case ecConfig.CHART_TYPE_ISLAND :
                    return 5;

                case ecConfig.COMPONENT_TYPE_TOOLBOX :
                case ecConfig.COMPONENT_TYPE_TITLE :
                    return 6;

                // ecConfig.EFFECT_ZLEVEL = 7;

                case ecConfig.COMPONENT_TYPE_TOOLTIP :
                    return 8;

                default :
                    return 0;
            }
        },

        /**
         * 参数修正&默认值赋值
         * @param {Object} opt 参数
         *
         * @return {Object} 修正后的参数
         */
        reformOption : function (opt) {
            return zrUtil.merge(
                       opt || {},
                       zrUtil.clone(this.ecTheme[this.type] || {})
                   );
        },

        /**
         * css类属性数组补全，如padding，margin等~
         */
        reformCssArray : function (p) {
            if (p instanceof Array) {
                switch (p.length + '') {
                    case '4':
                        return p;
                    case '3':
                        return [p[0], p[1], p[2], p[1]];
                    case '2':
                        return [p[0], p[1], p[0], p[1]];
                    case '1':
                        return [p[0], p[0], p[0], p[0]];
                    case '0':
                        return [0, 0, 0, 0];
                }
            }
            else {
                return [p, p, p, p];
            }
        },

        getShapeById : function(id) {
            for (var i = 0, l = this.shapeList.length; i < l; i++) {
                if (this.shapeList[i].id == id) {
                    return this.shapeList[i];
                }
            }
            return null;
        },

        /**
         * 获取自定义和默认配置合并后的字体设置
         */
        getFont : function (textStyle) {
            var finalTextStyle = zrUtil.merge(
                zrUtil.clone(textStyle) || {},
                this.ecTheme.textStyle
            );
            return finalTextStyle.fontStyle + ' '
                   + finalTextStyle.fontWeight + ' '
                   + finalTextStyle.fontSize + 'px '
                   + finalTextStyle.fontFamily;
        },

        getItemStyleColor : function (itemColor, seriesIndex, dataIndex, data) {
            return typeof itemColor == 'function'
                   ? itemColor(seriesIndex, dataIndex, data) : itemColor;

        },

        // 亚像素优化
        subPixelOptimize : function (position, lineWidth) {
            if (lineWidth % 2 == 1) {
                //position += position == Math.ceil(position) ? 0.5 : 0;
                position = Math.floor(position) + 0.5;
            }
            else {
                position = Math.round(position);
            }
            return position;
        },

        resize : function () {
            this.refresh && this.refresh();
            this.animationEffect && this.animationEffect();
        },

        /**
         * 清除图形数据，实例仍可用
         */
        clear :function () {
            this.clearEffectShape && this.clearEffectShape();
            this.zr && this.zr.delShape(this.shapeList);
            this.shapeList = [];
        },

        /**
         * 释放后实例不可用
         */
        dispose : function () {
            this.clear();
            this.shapeList = null;
            this.effectList = null;
        },

        query : ecQuery.query,
        deepQuery : ecQuery.deepQuery,
        deepMerge : ecQuery.deepMerge,

        parsePercent : number.parsePercent,
        parseCenter : number.parseCenter,
        parseRadius : number.parseRadius,
        numAddCommas : number.addCommas
    };

    return Base;
});
<commit_msg>fixed resize effect<commit_after>/**
 * echarts组件基类
 *
 * @desc echarts基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。
 * @author Kener (@Kener-林峰, linzhifeng@baidu.com)
 *
 */
define(function (require) {
    var ecConfig = require('../config');
    var ecQuery = require('../util/ecQuery');
    var number = require('../util/number');
    var zrUtil = require('zrender/tool/util');

    function Base(ecTheme, messageCenter, zr, option, myChart){
        this.ecTheme = ecTheme;
        this.messageCenter = messageCenter;
        this.zr =zr;
        this.option = option;
        this.series = option.series;
        this.myChart = myChart;
        this.component = myChart.component;

        this._zlevelBase = this.getZlevelBase();
        this.shapeList = [];
        this.effectList = [];

        var self = this;
        self.hoverConnect = function (param) {
            var target = (param.target || {}).hoverConnect;
            if (target) {
                var zlevel = 10;
                var shape;
                if (!(target instanceof Array)) {
                    shape = self.getShapeById(target);
                    if (shape) {
                        self.zr.addHoverShape(shape);
                        zlevel = Math.min(zlevel, shape.zlevel);
                    }
                }
                else {
                    for (var i = 0, l = target.length; i < l; i++) {
                        shape = self.getShapeById(target[i]);
                        self.zr.addHoverShape(shape);
                        zlevel = Math.min(zlevel, shape.zlevel);
                    }
                }
                if (zlevel < param.target.zlevel) {
                    self.zr.addHoverShape(param.target);
                }
            }
        };
    }

    /**
     * 基类方法
     */
    Base.prototype = {
        canvasSupported : require('zrender/tool/env').canvasSupported,
        /**
         * 获取zlevel基数配置
         * @param {Object} contentType
         */
        getZlevelBase : function (contentType) {
            contentType = contentType || this.type + '';

            switch (contentType) {
                case ecConfig.COMPONENT_TYPE_GRID :
                case ecConfig.COMPONENT_TYPE_AXIS_CATEGORY :
                case ecConfig.COMPONENT_TYPE_AXIS_VALUE :
                case ecConfig.COMPONENT_TYPE_POLAR :
                    return 0;

                case ecConfig.CHART_TYPE_LINE :
                case ecConfig.CHART_TYPE_BAR :
                case ecConfig.CHART_TYPE_SCATTER :
                case ecConfig.CHART_TYPE_PIE :
                case ecConfig.CHART_TYPE_RADAR :
                case ecConfig.CHART_TYPE_MAP :
                case ecConfig.CHART_TYPE_K :
                case ecConfig.CHART_TYPE_CHORD:
                case ecConfig.CHART_TYPE_GUAGE:
                case ecConfig.CHART_TYPE_FUNNEL:
                    return 2;

                case ecConfig.COMPONENT_TYPE_LEGEND :
                case ecConfig.COMPONENT_TYPE_DATARANGE:
                case ecConfig.COMPONENT_TYPE_DATAZOOM :
                case ecConfig.COMPONENT_TYPE_TIMELINE :
                    return 4;

                case ecConfig.CHART_TYPE_ISLAND :
                    return 5;

                case ecConfig.COMPONENT_TYPE_TOOLBOX :
                case ecConfig.COMPONENT_TYPE_TITLE :
                    return 6;

                // ecConfig.EFFECT_ZLEVEL = 7;

                case ecConfig.COMPONENT_TYPE_TOOLTIP :
                    return 8;

                default :
                    return 0;
            }
        },

        /**
         * 参数修正&默认值赋值
         * @param {Object} opt 参数
         *
         * @return {Object} 修正后的参数
         */
        reformOption : function (opt) {
            return zrUtil.merge(
                       opt || {},
                       zrUtil.clone(this.ecTheme[this.type] || {})
                   );
        },

        /**
         * css类属性数组补全，如padding，margin等~
         */
        reformCssArray : function (p) {
            if (p instanceof Array) {
                switch (p.length + '') {
                    case '4':
                        return p;
                    case '3':
                        return [p[0], p[1], p[2], p[1]];
                    case '2':
                        return [p[0], p[1], p[0], p[1]];
                    case '1':
                        return [p[0], p[0], p[0], p[0]];
                    case '0':
                        return [0, 0, 0, 0];
                }
            }
            else {
                return [p, p, p, p];
            }
        },

        getShapeById : function(id) {
            for (var i = 0, l = this.shapeList.length; i < l; i++) {
                if (this.shapeList[i].id == id) {
                    return this.shapeList[i];
                }
            }
            return null;
        },

        /**
         * 获取自定义和默认配置合并后的字体设置
         */
        getFont : function (textStyle) {
            var finalTextStyle = zrUtil.merge(
                zrUtil.clone(textStyle) || {},
                this.ecTheme.textStyle
            );
            return finalTextStyle.fontStyle + ' '
                   + finalTextStyle.fontWeight + ' '
                   + finalTextStyle.fontSize + 'px '
                   + finalTextStyle.fontFamily;
        },

        getItemStyleColor : function (itemColor, seriesIndex, dataIndex, data) {
            return typeof itemColor == 'function'
                   ? itemColor(seriesIndex, dataIndex, data) : itemColor;

        },

        // 亚像素优化
        subPixelOptimize : function (position, lineWidth) {
            if (lineWidth % 2 == 1) {
                //position += position == Math.ceil(position) ? 0.5 : 0;
                position = Math.floor(position) + 0.5;
            }
            else {
                position = Math.round(position);
            }
            return position;
        },

        resize : function () {
            this.refresh && this.refresh();
            this.clearEffectShape && this.clearEffectShape(true);
            var self = this;
            setTimeout(function(){
                self.animationEffect && self.animationEffect();
            },200);
        },

        /**
         * 清除图形数据，实例仍可用
         */
        clear :function () {
            this.clearEffectShape && this.clearEffectShape();
            this.zr && this.zr.delShape(this.shapeList);
            this.shapeList = [];
        },

        /**
         * 释放后实例不可用
         */
        dispose : function () {
            this.clear();
            this.shapeList = null;
            this.effectList = null;
        },

        query : ecQuery.query,
        deepQuery : ecQuery.deepQuery,
        deepMerge : ecQuery.deepMerge,

        parsePercent : number.parsePercent,
        parseCenter : number.parseCenter,
        parseRadius : number.parseRadius,
        numAddCommas : number.addCommas
    };

    return Base;
});
<|endoftext|>


<commit_before>import React, { Component } from 'react'
import { Grid, Navbar, Row, Jumbotron, Button, Col } from 'react-bootstrap'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import { login, logout } from '../api/auth'
import { firebaseRef } from '../api/firebase'
import { Provider, withUser } from '../Provider'
import AppList from './AppList'
import Playlist from './Playlist'
import SignageScreen from './SignageScreen'
import './App.css'

const FIREBASE_SCHEMA_FORMAT = 1

let Manager = ({ signedIn }) =>

    <Navbar>
      <Grid>
        <Navbar.Header>
          <Navbar.Brand>
            Digital Signage Manager
          </Navbar.Brand>
          <Navbar.Toggle />
          <LoginButton signedIn={signedIn} />
        </Navbar.Header>
      </Grid>
    </Navbar>

    <Grid>
      <Jumbotron>

          Preview the sequence, with placeholders, at <Link to="/preview">{document.location.origin}/preview</Link>.

          Open <Link to="/view">{document.location.origin}/view</Link> on the screen
          that is displaying the digital signage.

      </Jumbotron>
    </Grid>

    <Grid>
      <Row>
        <Col xs={6}>

Playlist

          <Playlist editable={signedIn} />
        </Col>
        <Col xs={6}>

Applications

          <AppList />
        </Col>
      </Row>
    </Grid>

          This application manages digital signage.

          It manages a list of applications, and a playlist that sequences
          those applications.

Manager = withUser(Manager)

let LoginButton = ({ signedIn }) =>
  signedIn
    ? <Button onClick={logout}>Sign out</Button>
    : <Button onClick={login}>Sign in</Button>

LoginButton = withUser(LoginButton)

class App extends Component {
  componentDidMount() {
    firebaseRef.child('version').on('value', (snapshot) => {
      if (snapshot.val() !== FIREBASE_SCHEMA_FORMAT) {
        window.location.reload()
      }
    })
  }

  render = () =>
    <Provider>
      <Router>

          <Route exact path="/" component={Manager} />
          <Route exact path="/view" component={SignageScreen} />
          <Route exact path="/preview" component={() => <SignageScreen dummy={true} />} />

      </Router>
    </Provider>
}

export default App
<commit_msg>move preview, run to playlist area of screen<commit_after>import React, { Component } from 'react'
import { Grid, Navbar, Row, Jumbotron, Button, Col } from 'react-bootstrap'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import { login, logout } from '../api/auth'
import { firebaseRef } from '../api/firebase'
import { Provider, withUser } from '../Provider'
import AppList from './AppList'
import Playlist from './Playlist'
import SignageScreen from './SignageScreen'
import './App.css'

const FIREBASE_SCHEMA_FORMAT = 1

let Manager = ({ signedIn }) =>

    <Navbar>
      <Grid>
        <Navbar.Header>
          <Navbar.Brand>
            Digital Signage Manager
          </Navbar.Brand>
          <Navbar.Toggle />
          <LoginButton signedIn={signedIn} />
        </Navbar.Header>
      </Grid>
    </Navbar>

    {!signedIn &&
      <Grid>
        <Jumbotron>

<Button onClick={login}>Sign in</Button> to edit the playlist.

        </Jumbotron>
      </Grid>}

    <Grid>
      <Row>
        <Col xs={6}>

Playlist

          <Link to="/preview">Wireframe</Link>
          {' '}
          <Link to="/view">Run</Link>
          <Playlist editable={signedIn} />
        </Col>
        <Col xs={6}>

Applications

          <AppList />
        </Col>
      </Row>
    </Grid>

          This application manages digital signage.

          It manages a list of applications, and a playlist that sequences
          those applications.

Manager = withUser(Manager)

let LoginButton = ({ signedIn }) =>
  signedIn
    ? <Button onClick={logout}>Sign out</Button>
    : <Button onClick={login}>Sign in</Button>

LoginButton = withUser(LoginButton)

class App extends Component {
  componentDidMount() {
    firebaseRef.child('version').on('value', (snapshot) => {
      if (snapshot.val() !== FIREBASE_SCHEMA_FORMAT) {
        window.location.reload()
      }
    })
  }

  render = () =>
    <Provider>
      <Router>

          <Route exact path="/" component={Manager} />
          <Route exact path="/view" component={SignageScreen} />
          <Route exact path="/preview" component={() => <SignageScreen dummy={true} />} />

      </Router>
    </Provider>
}

export default App
<|endoftext|>


<commit_before>import React, { Component } from 'react';
import autoBind from 'react-autobind';
import '../styles/App.css';
import photoData from '../photo-data';
import TopBar from './top-bar';
import ColorSwatches from './color-swatches';
import PrevButton from './prev-button';
import NextButton from './next-button';

const photos = Object.getOwnPropertyNames(photoData);
const maxIndex = photos.length - 1;

class App extends Component {
  constructor(props) {
    super(props);
    autoBind(this);
    this.state = {
      index: 34
    };
  }

  nextPhoto = () => {
    const currentIndex = this.state.index;
    if (currentIndex < maxIndex) {
      const newIndex = currentIndex + 1;
      this.setState({index: newIndex});
    }
  }

  prevPhoto = () => {
    const currentIndex = this.state.index;
    if (currentIndex > 0) {
      const newIndex = currentIndex - 1;
      this.setState({index: newIndex});
    }

  }

  clickNext = () =>{
    const {intervalId} = this.state;
    this.clearInterval(intervalId);
    this.setState({isPlaying: false});
    this.nextPhoto();
  }

  clickPrev = () =>{
    const {intervalId} = this.state;
    this.clearInterval(intervalId);
    this.setState({isPlaying: false});
    this.prevPhoto();
  }

  autoPlay = () => {
    const intervalId = window.setInterval(() => {
      this.nextPhoto();
    }, 1500);
    this.setState({intervalId, isPlaying: true});
  }

  pause = () => {
    const {intervalId} = this.state;
    this.clearInterval(intervalId);
    this.setState({isPlaying: false});
  }

  clearInterval = intervalId => {
    if (intervalId) {
      window.clearInterval(intervalId);
    }
  }

  render() {
    const {index, isPlaying} = this.state;
    const photo = photoData[photos[index]];
    const {colors, dateTime, gpsLatitude, gpsLatitudeRef, gpsLongitude, gpsLongitudeRef} = photo;

    let playButton;
    if (isPlaying) {
      playButton = (
        <button onClick={this.pause} className="button">
          pause_circle_outline
        </button>
      );
    } else {
      playButton = (
        <button onClick={this.autoPlay} className="button">
          play_circle_outline
        </button>
      )
    }

    return (

          <button className="button">
            info_outline
          </button>
          {playButton}
          <button className="button">
            view_week
          </button>
          <button className="button">
            grid_on
          </button>

        <TopBar
        dateTime={dateTime}
        gpsLatitude={gpsLatitude}
        gpsLatitudeRef={gpsLatitudeRef}
        gpsLongitude={gpsLongitude}
        gpsLongitudeRef={gpsLongitudeRef}
        />

          <PrevButton prevPhoto={this.clickPrev} active={index > 0}/>
          <ColorSwatches colors={colors}/>
          <NextButton nextPhoto={this.clickNext} active={index < maxIndex}/>

    );
  }
}

export default App;
<commit_msg>loop through photos<commit_after>import React, { Component } from 'react';
import autoBind from 'react-autobind';
import '../styles/App.css';
import photoData from '../photo-data';
import TopBar from './top-bar';
import ColorSwatches from './color-swatches';
import PrevButton from './prev-button';
import NextButton from './next-button';

const photos = Object.getOwnPropertyNames(photoData);
const maxIndex = photos.length - 1;

class App extends Component {
  constructor(props) {
    super(props);
    autoBind(this);
    this.state = {
      index: 34
    };
  }

  nextPhoto = () => {
    const currentIndex = this.state.index;
    if (currentIndex < maxIndex) {
      const newIndex = currentIndex + 1;
      this.setState({index: newIndex});
    } else {
      this.setState({index: 0});
    }
  }

  prevPhoto = () => {
    const currentIndex = this.state.index;
    if (currentIndex > 0) {
      const newIndex = currentIndex - 1;
      this.setState({index: newIndex});
    } else {
      this.setState({index: maxIndex});
    }

  }

  clickNext = () =>{
    const {intervalId} = this.state;
    this.clearInterval(intervalId);
    this.setState({isPlaying: false});
    this.nextPhoto();
  }

  clickPrev = () =>{
    const {intervalId} = this.state;
    this.clearInterval(intervalId);
    this.setState({isPlaying: false});
    this.prevPhoto();
  }

  autoPlay = () => {
    const intervalId = window.setInterval(() => {
      this.nextPhoto();
    }, 1500);
    this.setState({intervalId, isPlaying: true});
  }

  pause = () => {
    const {intervalId} = this.state;
    this.clearInterval(intervalId);
    this.setState({isPlaying: false});
  }

  clearInterval = intervalId => {
    if (intervalId) {
      window.clearInterval(intervalId);
    }
  }

  render() {
    const {index, isPlaying} = this.state;
    const photo = photoData[photos[index]];
    const {colors, dateTime, gpsLatitude, gpsLatitudeRef, gpsLongitude, gpsLongitudeRef} = photo;

    let playButton;
    if (isPlaying) {
      playButton = (
        <button onClick={this.pause} className="button">
          pause_circle_outline
        </button>
      );
    } else {
      playButton = (
        <button onClick={this.autoPlay} className="button">
          play_circle_outline
        </button>
      )
    }

    return (

          <button className="button">
            info_outline
          </button>
          {playButton}
          <button className="button">
            view_week
          </button>
          <button className="button">
            grid_on
          </button>

        <TopBar
        dateTime={dateTime}
        gpsLatitude={gpsLatitude}
        gpsLatitudeRef={gpsLatitudeRef}
        gpsLongitude={gpsLongitude}
        gpsLongitudeRef={gpsLongitudeRef}
        />

          <PrevButton prevPhoto={this.clickPrev} active={index > 0}/>
          <ColorSwatches colors={colors}/>
          <NextButton nextPhoto={this.clickNext} active={index < maxIndex}/>

    );
  }
}

export default App;
<|endoftext|>


<commit_before>/* eslint-disable import/no-named-as-default */
import React from 'react';
import PropTypes from 'prop-types';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { Switch, Route, withRouter, Redirect } from 'react-router-dom';
import MainMenu from './MainMenu';
import Footer from './Footer';

import HomePage from '../containers/HomePage';
import AboutPage from '../containers/AboutPage';
import ContactPage from '../containers/ContactPage';
import StoriesPage from '../components/StoriesPage';
import NotFoundPage from '../components/NotFoundPage';

import MidsummerInHelsinkiStory from '../stories/2017-08-20-midsummer-in-helsinki';
import SummerInAmsterdamStory from '../stories/2017-06-17-summer-in-amsterdam';
import LisbonACharmingCityStory from '../stories/2017-06-05-lisbon-a-charming-city';
import FlorenceStory from '../stories/2017-01-15-florence-theme-park-of-renaissance';
import IrinaAndLucianMaternityPhotoSessionStory from '../stories/2016-11-20-irina-and-lucian-maternity-photo-session';
import SienaTheTuscanBeautyStory from '../stories/2016-11-12-siena-the-tuscan-beauty';
import PisaAfterglowStory from '../stories/2016-10-08-pisa-afterglow';
import LondonAfterBrexitStory from '../stories/2016-09-10-london-after-brexit';
import BridgesOfFlorenceStory from '../stories/2016-06-30-bridges-of-florence';
import TenerifeTheLandOfEternalSpringStory from '../stories/2016-06-11-tenerife-the-land-of-eternal-spring';
import LanzaroteBeachesStory from '../stories/2016-05-17-lanzarote-beaches';
import WinterFairyTaleInSalzburgStory from '../stories/2016-01-06-winter-fairy-tale-in-salzburg';
import CasinoOfConstantaStory from '../stories/2015-10-15-the-casino-of-constanta';
import LoveAtTheGardensOfTheWorldStory from '../stories/2015-09-30-love-at-the-gardens-of-the-world';
import LunarLandscapesOfLanzaroteStory from '../stories/2015-09-29-lunar-landscapes-of-lanzarote';

// This is a class-based component because the current
// version of hot reloading won't hot reload a stateless
// component at the top-level.
class App extends React.Component {
  redirect(to) {
    return ({ staticContext }) => {
      if (staticContext) {
        staticContext.status = 302;
      }
      return <Redirect to={to} />;
    };
  }

  render() {
    return (

        <MainMenu />
        <TransitionGroup>
          <CSSTransition key={this.props.location.key} timeout={500} classNames="fade">
            <Switch location={this.props.location}>
              <Route exact path="/" component={HomePage}/>
              <Route exact path="/stories/" component={StoriesPage}/>
              <Route exact path="/stories/midsummer-in-helsinki.html" component={MidsummerInHelsinkiStory}/>
              <Route exact path="/stories/summer-in-amsterdam.html" component={SummerInAmsterdamStory}/>
              <Route exact path="/stories/lisbon-a-charming-city.html" component={LisbonACharmingCityStory}/>
              <Route exact path="/stories/florence-theme-park-of-renaissance.html" component={FlorenceStory}/>
              <Route exact path="/stories/irina-and-lucian-maternity-photo-session.html" component={IrinaAndLucianMaternityPhotoSessionStory}/>
              <Route exact path="/stories/siena-the-tuscan-beauty.html" component={SienaTheTuscanBeautyStory}/>
              <Route exact path="/stories/pisa-afterglow.html" component={PisaAfterglowStory}/>
              <Route exact path="/stories/london-after-brexit.html" component={LondonAfterBrexitStory}/>
              <Route exact path="/stories/bridges-of-florence.html" component={BridgesOfFlorenceStory}/>
              <Route exact path="/stories/tenerife-the-land-of-eternal-spring.html" component={TenerifeTheLandOfEternalSpringStory}/>
              <Route exact path="/stories/lanzarote-beaches.html" component={LanzaroteBeachesStory}/>
              <Route exact path="/stories/winter-fairy-tale-in-salzburg.html" component={WinterFairyTaleInSalzburgStory}/>
              <Route exact path="/stories/the-casino-of-constanta.html" component={CasinoOfConstantaStory}/>
              <Route exact path="/stories/love-at-the-gardens-of-the-world.html" component={LoveAtTheGardensOfTheWorldStory}/>
              <Route exact path="/stories/lunar-landscapes-of-lanzarote.html" component={LunarLandscapesOfLanzaroteStory}/>

              <Route exact path="/about" component={AboutPage}/>
              <Route exact path="/contact" component={ContactPage}/>
              <Route exact path="/cats/" render={this.redirect("/stories/")}/>
              <Route exact path="/cats/christmas-cat.html" render={this.redirect("/stories/")}/>
              <Route exact path="/cats/whitey.html" render={this.redirect("/stories/")}/>
              <Route exact path="/cats/shumy-is-one-year-old.html" render={this.redirect("/stories/")}/>
              <Route exact path="/streets-of-berlin/" render={this.redirect("/stories/")}/>
              <Route exact path="/streets-of-berlin/lady-in-red-with-white-dog.html" render={this.redirect("/stories/")}/>
              <Route exact path="/streets-of-berlin/teufelsberg.html" render={this.redirect("/stories/")}/>
              <Route exact path="/streets-of-berlin/charlottenburg-bridge-in-autumn.html" render={this.redirect("/stories/")}/>
              <Route exact path="/streets-of-berlin/resting-in-mauerpark.html" render={this.redirect("/stories/")}/>
              <Route exact path="/streets-of-berlin/surprised-in-the-park.html" render={this.redirect("/stories/")}/>
              <Route exact path="/streets-of-berlin/snow-and-kids.html" render={this.redirect("/stories/")}/>
              <Route exact path="/streets-of-berlin/bike-parked-by-fence.html" render={this.redirect("/stories/")}/>
              <Route path="*" component={NotFoundPage}/>
            </Switch>
          </CSSTransition>
        </TransitionGroup>

    );
  }
}

App.propTypes = {
  children: PropTypes.element,
  location: PropTypes.object
};

export default withRouter(App);
<commit_msg>New redirect<commit_after>/* eslint-disable import/no-named-as-default */
import React from 'react';
import PropTypes from 'prop-types';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import { Switch, Route, withRouter, Redirect } from 'react-router-dom';
import MainMenu from './MainMenu';
import Footer from './Footer';

import HomePage from '../containers/HomePage';
import AboutPage from '../containers/AboutPage';
import ContactPage from '../containers/ContactPage';
import StoriesPage from '../components/StoriesPage';
import NotFoundPage from '../components/NotFoundPage';

import MidsummerInHelsinkiStory from '../stories/2017-08-20-midsummer-in-helsinki';
import SummerInAmsterdamStory from '../stories/2017-06-17-summer-in-amsterdam';
import LisbonACharmingCityStory from '../stories/2017-06-05-lisbon-a-charming-city';
import FlorenceStory from '../stories/2017-01-15-florence-theme-park-of-renaissance';
import IrinaAndLucianMaternityPhotoSessionStory from '../stories/2016-11-20-irina-and-lucian-maternity-photo-session';
import SienaTheTuscanBeautyStory from '../stories/2016-11-12-siena-the-tuscan-beauty';
import PisaAfterglowStory from '../stories/2016-10-08-pisa-afterglow';
import LondonAfterBrexitStory from '../stories/2016-09-10-london-after-brexit';
import BridgesOfFlorenceStory from '../stories/2016-06-30-bridges-of-florence';
import TenerifeTheLandOfEternalSpringStory from '../stories/2016-06-11-tenerife-the-land-of-eternal-spring';
import LanzaroteBeachesStory from '../stories/2016-05-17-lanzarote-beaches';
import WinterFairyTaleInSalzburgStory from '../stories/2016-01-06-winter-fairy-tale-in-salzburg';
import CasinoOfConstantaStory from '../stories/2015-10-15-the-casino-of-constanta';
import LoveAtTheGardensOfTheWorldStory from '../stories/2015-09-30-love-at-the-gardens-of-the-world';
import LunarLandscapesOfLanzaroteStory from '../stories/2015-09-29-lunar-landscapes-of-lanzarote';

// This is a class-based component because the current
// version of hot reloading won't hot reload a stateless
// component at the top-level.
class App extends React.Component {
  redirect(to) {
    return ({ staticContext }) => {
      if (staticContext) {
        staticContext.status = 302;
      }
      return <Redirect to={to} />;
    };
  }

  render() {
    return (

        <MainMenu />
        <TransitionGroup>
          <CSSTransition key={this.props.location.key} timeout={500} classNames="fade">
            <Switch location={this.props.location}>
              <Route exact path="/" component={HomePage}/>
              <Route exact path="/stories/" component={StoriesPage}/>
              <Route exact path="/stories/midsummer-in-helsinki.html" component={MidsummerInHelsinkiStory}/>
              <Route exact path="/stories/summer-in-amsterdam.html" component={SummerInAmsterdamStory}/>
              <Route exact path="/stories/lisbon-a-charming-city.html" component={LisbonACharmingCityStory}/>
              <Route exact path="/stories/florence-theme-park-of-renaissance.html" component={FlorenceStory}/>
              <Route exact path="/stories/irina-and-lucian-maternity-photo-session.html" component={IrinaAndLucianMaternityPhotoSessionStory}/>
              <Route exact path="/stories/siena-the-tuscan-beauty.html" component={SienaTheTuscanBeautyStory}/>
              <Route exact path="/stories/pisa-afterglow.html" component={PisaAfterglowStory}/>
              <Route exact path="/stories/london-after-brexit.html" component={LondonAfterBrexitStory}/>
              <Route exact path="/stories/bridges-of-florence.html" component={BridgesOfFlorenceStory}/>
              <Route exact path="/stories/tenerife-the-land-of-eternal-spring.html" component={TenerifeTheLandOfEternalSpringStory}/>
              <Route exact path="/stories/lanzarote-beaches.html" component={LanzaroteBeachesStory}/>
              <Route exact path="/stories/winter-fairy-tale-in-salzburg.html" component={WinterFairyTaleInSalzburgStory}/>
              <Route exact path="/stories/the-casino-of-constanta.html" component={CasinoOfConstantaStory}/>
              <Route exact path="/stories/love-at-the-gardens-of-the-world.html" component={LoveAtTheGardensOfTheWorldStory}/>
              <Route exact path="/stories/lunar-landscapes-of-lanzarote.html" component={LunarLandscapesOfLanzaroteStory}/>

              <Route exact path="/about" component={AboutPage}/>
              <Route exact path="/contact" component={ContactPage}/>
              <Route exact path="/cats/" render={this.redirect("/stories/")}/>
              <Route exact path="/cats/christmas-cat.html" render={this.redirect("/stories/")}/>
              <Route exact path="/cats/whitey.html" render={this.redirect("/stories/")}/>
              <Route exact path="/cats/shumy-is-one-year-old.html" render={this.redirect("/stories/")}/>
              <Route exact path="/streets-of-berlin/" render={this.redirect("/stories/")}/>
              <Route exact path="/streets-of-berlin/lady-in-red-with-white-dog.html" render={this.redirect("/stories/")}/>
              <Route exact path="/streets-of-berlin/teufelsberg.html" render={this.redirect("/stories/")}/>
              <Route exact path="/streets-of-berlin/charlottenburg-bridge-in-autumn.html" render={this.redirect("/stories/")}/>
              <Route exact path="/streets-of-berlin/resting-in-mauerpark.html" render={this.redirect("/stories/")}/>
              <Route exact path="/streets-of-berlin/surprised-in-the-park.html" render={this.redirect("/stories/")}/>
              <Route exact path="/streets-of-berlin/snow-and-kids.html" render={this.redirect("/stories/")}/>
              <Route exact path="/streets-of-berlin/bike-parked-by-fence.html" render={this.redirect("/stories/")}/>
              <Route exact path="/streets-of-berlin/gendarmenmarkt.html" render={this.redirect("/stories/")}/>
              <Route path="*" component={NotFoundPage}/>
            </Switch>
          </CSSTransition>
        </TransitionGroup>

    );
  }
}

App.propTypes = {
  children: PropTypes.element,
  location: PropTypes.object
};

export default withRouter(App);
<|endoftext|>


<commit_before>/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */

// @flow
import React, { Component } from "react";
import PropTypes from "prop-types";
import classnames from "classnames";

import { connect } from "../utils/connect";
import { prefs, features } from "../utils/prefs";
import actions from "../actions";
import A11yIntention from "./A11yIntention";
import { ShortcutsModal } from "./ShortcutsModal";

import {
  getSelectedSource,
  getPaneCollapse,
  getActiveSearch,
  getQuickOpenEnabled,
  getOrientation,
  getCanRewind
} from "../selectors";

import type { OrientationType } from "../reducers/types";
import type { Source } from "../types";

import { KeyShortcuts } from "devtools-modules";
import Services from "devtools-services";
const shortcuts = new KeyShortcuts({ window });

const { appinfo } = Services;

const isMacOS = appinfo.OS === "Darwin";

const horizontalLayoutBreakpoint = window.matchMedia("(min-width: 800px)");
const verticalLayoutBreakpoint = window.matchMedia(
  "(min-width: 10px) and (max-width: 799px)"
);

import "./variables.css";
import "./App.css";

// $FlowIgnore
import "devtools-launchpad/src/components/Root.css";

import type { ActiveSearchType } from "../selectors";

import "./shared/menu.css";
import "./shared/reps.css";

import SplitBox from "devtools-splitter";
import ProjectSearch from "./ProjectSearch";
import PrimaryPanes from "./PrimaryPanes";
import Editor from "./Editor";
import SecondaryPanes from "./SecondaryPanes";
import WelcomeBox from "./WelcomeBox";
import EditorTabs from "./Editor/Tabs";
import EditorFooter from "./Editor/Footer";
import QuickOpenModal from "./QuickOpenModal";

type Props = {
  selectedSource: Source,
  orientation: OrientationType,
  startPanelCollapsed: boolean,
  endPanelCollapsed: boolean,
  activeSearch: ActiveSearchType,
  quickOpenEnabled: boolean,
  canRewind: boolean,
  setActiveSearch: typeof actions.setActiveSearch,
  closeActiveSearch: typeof actions.closeActiveSearch,
  closeProjectSearch: typeof actions.closeProjectSearch,
  openQuickOpen: typeof actions.openQuickOpen,
  closeQuickOpen: typeof actions.closeQuickOpen,
  setOrientation: typeof actions.setOrientation
};

type State = {
  shortcutsModalEnabled: boolean,
  startPanelSize: number,
  endPanelSize: number
};

class App extends Component<Props, State> {
  onLayoutChange: Function;
  getChildContext: Function;
  renderEditorPane: Function;
  renderLayout: Function;
  toggleQuickOpenModal: Function;
  onEscape: Function;
  onCommandSlash: Function;

  constructor(props) {
    super(props);
    this.state = {
      shortcutsModalEnabled: false,
      startPanelSize: 0,
      endPanelSize: 0
    };
  }

  getChildContext = () => {
    return { shortcuts, l10n: L10N };
  };

  componentDidMount() {
    horizontalLayoutBreakpoint.addListener(this.onLayoutChange);
    verticalLayoutBreakpoint.addListener(this.onLayoutChange);
    this.setOrientation();

    shortcuts.on(L10N.getStr("symbolSearch.search.key2"), (_, e) =>
      this.toggleQuickOpenModal(_, e, "@")
    );

    const searchKeys = [
      L10N.getStr("sources.search.key2"),
      L10N.getStr("sources.search.alt.key")
    ];
    searchKeys.forEach(key => shortcuts.on(key, this.toggleQuickOpenModal));

    shortcuts.on(L10N.getStr("gotoLineModal.key2"), (_, e) =>
      this.toggleQuickOpenModal(_, e, ":")
    );

    shortcuts.on("Escape", this.onEscape);
    shortcuts.on("Cmd+/", this.onCommandSlash);
  }

  componentWillUnmount() {
    horizontalLayoutBreakpoint.removeListener(this.onLayoutChange);
    verticalLayoutBreakpoint.removeListener(this.onLayoutChange);
    shortcuts.off(
      L10N.getStr("symbolSearch.search.key2"),
      this.toggleQuickOpenModal
    );

    const searchKeys = [
      L10N.getStr("sources.search.key2"),
      L10N.getStr("sources.search.alt.key")
    ];
    searchKeys.forEach(key => shortcuts.off(key, this.toggleQuickOpenModal));

    shortcuts.off(L10N.getStr("gotoLineModal.key2"), this.toggleQuickOpenModal);

    shortcuts.off("Escape", this.onEscape);
  }

  onEscape = (_, e) => {
    const {
      activeSearch,
      closeActiveSearch,
      closeQuickOpen,
      quickOpenEnabled
    } = this.props;

    if (activeSearch) {
      e.preventDefault();
      closeActiveSearch();
    }

    if (quickOpenEnabled) {
      e.preventDefault();
      closeQuickOpen();
    }
  };

  onCommandSlash = () => {
    this.toggleShortcutsModal();
  };

  isHorizontal() {
    return this.props.orientation === "horizontal";
  }

  toggleQuickOpenModal = (
    _,
    e: SyntheticEvent<HTMLElement>,
    query?: string
  ) => {
    const { quickOpenEnabled, openQuickOpen, closeQuickOpen } = this.props;

    e.preventDefault();
    e.stopPropagation();

    if (quickOpenEnabled === true) {
      closeQuickOpen();
      return;
    }

    if (query != null) {
      openQuickOpen(query);
      return;
    }
    openQuickOpen();
  };

  onLayoutChange = () => {
    this.setOrientation();
  };

  setOrientation() {
    // If the orientation does not match (if it is not visible) it will
    // not setOrientation, or if it is the same as before, calling
    // setOrientation will not cause a rerender.
    if (horizontalLayoutBreakpoint.matches) {
      this.props.setOrientation("horizontal");
    } else if (verticalLayoutBreakpoint.matches) {
      this.props.setOrientation("vertical");
    }
  }

  renderEditorPane = () => {
    const { startPanelCollapsed, endPanelCollapsed } = this.props;
    const { endPanelSize, startPanelSize } = this.state;
    const horizontal = this.isHorizontal();

    return (

          <EditorTabs
            startPanelCollapsed={startPanelCollapsed}
            endPanelCollapsed={endPanelCollapsed}
            horizontal={horizontal}
            startPanelSize={startPanelSize}
            endPanelSize={endPanelSize}
          />
          <Editor
            horizontal={horizontal}
            startPanelSize={startPanelSize}
            endPanelSize={endPanelSize}
          />
          {!this.props.selectedSource ? (
            <WelcomeBox
              horizontal={horizontal}
              toggleShortcutsModal={() => this.toggleShortcutsModal()}
            />
          ) : null}
          <EditorFooter horizontal={horizontal} />
          <ProjectSearch />

    );
  };

  toggleShortcutsModal() {
    this.setState(prevState => ({
      shortcutsModalEnabled: !prevState.shortcutsModalEnabled
    }));
  }

  // Important so that the tabs chevron updates appropriately when
  // the user resizes the left or right columns
  triggerEditorPaneResize() {
    const editorPane = window.document.querySelector(".editor-pane");
    if (editorPane) {
      editorPane.dispatchEvent(new Event("resizeend"));
    }
  }

  renderLayout = () => {
    const { startPanelCollapsed, endPanelCollapsed } = this.props;
    const horizontal = this.isHorizontal();

    const maxSize = horizontal ? "70%" : "95%";

    return (
      <SplitBox
        style={{ width: "100vw" }}
        initialSize={prefs.endPanelSize}
        minSize={30}
        maxSize={maxSize}
        splitterSize={1}
        vert={horizontal}
        onResizeEnd={num => {
          prefs.endPanelSize = num;
          this.triggerEditorPaneResize();
        }}
        startPanel={
          <SplitBox
            style={{ width: "100vw" }}
            initialSize={prefs.startPanelSize}
            minSize={30}
            maxSize="85%"
            splitterSize={1}
            onResizeEnd={num => {
              prefs.startPanelSize = num;
            }}
            startPanelCollapsed={startPanelCollapsed}
            startPanel={<PrimaryPanes horizontal={horizontal} />}
            endPanel={this.renderEditorPane()}
          />
        }
        endPanelControl={true}
        endPanel={
          <SecondaryPanes
            horizontal={horizontal}
            toggleShortcutsModal={() => this.toggleShortcutsModal()}
          />
        }
        endPanelCollapsed={endPanelCollapsed}
      />
    );
  };

  renderShortcutsModal() {
    const additionalClass = isMacOS ? "mac" : "";

    if (!features.shortcuts) {
      return;
    }

    return (
      <ShortcutsModal
        additionalClass={additionalClass}
        enabled={this.state.shortcutsModalEnabled}
        handleClose={() => this.toggleShortcutsModal()}
      />
    );
  }

  render() {
    const { quickOpenEnabled, canRewind } = this.props;
    return (

        <A11yIntention>
          {this.renderLayout()}
          {quickOpenEnabled === true && (
            <QuickOpenModal
              shortcutsModalEnabled={this.state.shortcutsModalEnabled}
              toggleShortcutsModal={() => this.toggleShortcutsModal()}
            />
          )}
          {this.renderShortcutsModal()}
        </A11yIntention>

    );
  }
}

App.childContextTypes = {
  shortcuts: PropTypes.object,
  l10n: PropTypes.object
};

const mapStateToProps = state => ({
  canRewind: getCanRewind(state),
  selectedSource: getSelectedSource(state),
  startPanelCollapsed: getPaneCollapse(state, "start"),
  endPanelCollapsed: getPaneCollapse(state, "end"),
  activeSearch: getActiveSearch(state),
  quickOpenEnabled: getQuickOpenEnabled(state),
  orientation: getOrientation(state)
});

export default connect(
  mapStateToProps,
  {
    setActiveSearch: actions.setActiveSearch,
    closeActiveSearch: actions.closeActiveSearch,
    closeProjectSearch: actions.closeProjectSearch,
    openQuickOpen: actions.openQuickOpen,
    closeQuickOpen: actions.closeQuickOpen,
    setOrientation: actions.setOrientation
  }
)(App);
<commit_msg>Add toggleShortcutsModal call to onEscape function (#8167)<commit_after>/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */

// @flow
import React, { Component } from "react";
import PropTypes from "prop-types";
import classnames from "classnames";

import { connect } from "../utils/connect";
import { prefs, features } from "../utils/prefs";
import actions from "../actions";
import A11yIntention from "./A11yIntention";
import { ShortcutsModal } from "./ShortcutsModal";

import {
  getSelectedSource,
  getPaneCollapse,
  getActiveSearch,
  getQuickOpenEnabled,
  getOrientation,
  getCanRewind
} from "../selectors";

import type { OrientationType } from "../reducers/types";
import type { Source } from "../types";

import { KeyShortcuts } from "devtools-modules";
import Services from "devtools-services";
const shortcuts = new KeyShortcuts({ window });

const { appinfo } = Services;

const isMacOS = appinfo.OS === "Darwin";

const horizontalLayoutBreakpoint = window.matchMedia("(min-width: 800px)");
const verticalLayoutBreakpoint = window.matchMedia(
  "(min-width: 10px) and (max-width: 799px)"
);

import "./variables.css";
import "./App.css";

// $FlowIgnore
import "devtools-launchpad/src/components/Root.css";

import type { ActiveSearchType } from "../selectors";

import "./shared/menu.css";
import "./shared/reps.css";

import SplitBox from "devtools-splitter";
import ProjectSearch from "./ProjectSearch";
import PrimaryPanes from "./PrimaryPanes";
import Editor from "./Editor";
import SecondaryPanes from "./SecondaryPanes";
import WelcomeBox from "./WelcomeBox";
import EditorTabs from "./Editor/Tabs";
import EditorFooter from "./Editor/Footer";
import QuickOpenModal from "./QuickOpenModal";

type Props = {
  selectedSource: Source,
  orientation: OrientationType,
  startPanelCollapsed: boolean,
  endPanelCollapsed: boolean,
  activeSearch: ActiveSearchType,
  quickOpenEnabled: boolean,
  canRewind: boolean,
  setActiveSearch: typeof actions.setActiveSearch,
  closeActiveSearch: typeof actions.closeActiveSearch,
  closeProjectSearch: typeof actions.closeProjectSearch,
  openQuickOpen: typeof actions.openQuickOpen,
  closeQuickOpen: typeof actions.closeQuickOpen,
  setOrientation: typeof actions.setOrientation
};

type State = {
  shortcutsModalEnabled: boolean,
  startPanelSize: number,
  endPanelSize: number
};

class App extends Component<Props, State> {
  onLayoutChange: Function;
  getChildContext: Function;
  renderEditorPane: Function;
  renderLayout: Function;
  toggleQuickOpenModal: Function;
  onEscape: Function;
  onCommandSlash: Function;

  constructor(props) {
    super(props);
    this.state = {
      shortcutsModalEnabled: false,
      startPanelSize: 0,
      endPanelSize: 0
    };
  }

  getChildContext = () => {
    return { shortcuts, l10n: L10N };
  };

  componentDidMount() {
    horizontalLayoutBreakpoint.addListener(this.onLayoutChange);
    verticalLayoutBreakpoint.addListener(this.onLayoutChange);
    this.setOrientation();

    shortcuts.on(L10N.getStr("symbolSearch.search.key2"), (_, e) =>
      this.toggleQuickOpenModal(_, e, "@")
    );

    const searchKeys = [
      L10N.getStr("sources.search.key2"),
      L10N.getStr("sources.search.alt.key")
    ];
    searchKeys.forEach(key => shortcuts.on(key, this.toggleQuickOpenModal));

    shortcuts.on(L10N.getStr("gotoLineModal.key2"), (_, e) =>
      this.toggleQuickOpenModal(_, e, ":")
    );

    shortcuts.on("Escape", this.onEscape);
    shortcuts.on("Cmd+/", this.onCommandSlash);
  }

  componentWillUnmount() {
    horizontalLayoutBreakpoint.removeListener(this.onLayoutChange);
    verticalLayoutBreakpoint.removeListener(this.onLayoutChange);
    shortcuts.off(
      L10N.getStr("symbolSearch.search.key2"),
      this.toggleQuickOpenModal
    );

    const searchKeys = [
      L10N.getStr("sources.search.key2"),
      L10N.getStr("sources.search.alt.key")
    ];
    searchKeys.forEach(key => shortcuts.off(key, this.toggleQuickOpenModal));

    shortcuts.off(L10N.getStr("gotoLineModal.key2"), this.toggleQuickOpenModal);

    shortcuts.off("Escape", this.onEscape);
  }

  onEscape = (_, e) => {
    const {
      activeSearch,
      closeActiveSearch,
      closeQuickOpen,
      quickOpenEnabled
    } = this.props;

    const { shortcutsModalEnabled } = this.state;

    if (activeSearch) {
      e.preventDefault();
      closeActiveSearch();
    }

    if (quickOpenEnabled) {
      e.preventDefault();
      closeQuickOpen();
    }

    if (shortcutsModalEnabled) {
      this.toggleShortcutsModal();
    }
  };

  onCommandSlash = () => {
    this.toggleShortcutsModal();
  };

  isHorizontal() {
    return this.props.orientation === "horizontal";
  }

  toggleQuickOpenModal = (
    _,
    e: SyntheticEvent<HTMLElement>,
    query?: string
  ) => {
    const { quickOpenEnabled, openQuickOpen, closeQuickOpen } = this.props;

    e.preventDefault();
    e.stopPropagation();

    if (quickOpenEnabled === true) {
      closeQuickOpen();
      return;
    }

    if (query != null) {
      openQuickOpen(query);
      return;
    }
    openQuickOpen();
  };

  onLayoutChange = () => {
    this.setOrientation();
  };

  setOrientation() {
    // If the orientation does not match (if it is not visible) it will
    // not setOrientation, or if it is the same as before, calling
    // setOrientation will not cause a rerender.
    if (horizontalLayoutBreakpoint.matches) {
      this.props.setOrientation("horizontal");
    } else if (verticalLayoutBreakpoint.matches) {
      this.props.setOrientation("vertical");
    }
  }

  renderEditorPane = () => {
    const { startPanelCollapsed, endPanelCollapsed } = this.props;
    const { endPanelSize, startPanelSize } = this.state;
    const horizontal = this.isHorizontal();

    return (

          <EditorTabs
            startPanelCollapsed={startPanelCollapsed}
            endPanelCollapsed={endPanelCollapsed}
            horizontal={horizontal}
            startPanelSize={startPanelSize}
            endPanelSize={endPanelSize}
          />
          <Editor
            horizontal={horizontal}
            startPanelSize={startPanelSize}
            endPanelSize={endPanelSize}
          />
          {!this.props.selectedSource ? (
            <WelcomeBox
              horizontal={horizontal}
              toggleShortcutsModal={() => this.toggleShortcutsModal()}
            />
          ) : null}
          <EditorFooter horizontal={horizontal} />
          <ProjectSearch />

    );
  };

  toggleShortcutsModal() {
    this.setState(prevState => ({
      shortcutsModalEnabled: !prevState.shortcutsModalEnabled
    }));
  }

  // Important so that the tabs chevron updates appropriately when
  // the user resizes the left or right columns
  triggerEditorPaneResize() {
    const editorPane = window.document.querySelector(".editor-pane");
    if (editorPane) {
      editorPane.dispatchEvent(new Event("resizeend"));
    }
  }

  renderLayout = () => {
    const { startPanelCollapsed, endPanelCollapsed } = this.props;
    const horizontal = this.isHorizontal();

    const maxSize = horizontal ? "70%" : "95%";

    return (
      <SplitBox
        style={{ width: "100vw" }}
        initialSize={prefs.endPanelSize}
        minSize={30}
        maxSize={maxSize}
        splitterSize={1}
        vert={horizontal}
        onResizeEnd={num => {
          prefs.endPanelSize = num;
          this.triggerEditorPaneResize();
        }}
        startPanel={
          <SplitBox
            style={{ width: "100vw" }}
            initialSize={prefs.startPanelSize}
            minSize={30}
            maxSize="85%"
            splitterSize={1}
            onResizeEnd={num => {
              prefs.startPanelSize = num;
            }}
            startPanelCollapsed={startPanelCollapsed}
            startPanel={<PrimaryPanes horizontal={horizontal} />}
            endPanel={this.renderEditorPane()}
          />
        }
        endPanelControl={true}
        endPanel={
          <SecondaryPanes
            horizontal={horizontal}
            toggleShortcutsModal={() => this.toggleShortcutsModal()}
          />
        }
        endPanelCollapsed={endPanelCollapsed}
      />
    );
  };

  renderShortcutsModal() {
    const additionalClass = isMacOS ? "mac" : "";

    if (!features.shortcuts) {
      return;
    }

    return (
      <ShortcutsModal
        additionalClass={additionalClass}
        enabled={this.state.shortcutsModalEnabled}
        handleClose={() => this.toggleShortcutsModal()}
      />
    );
  }

  render() {
    const { quickOpenEnabled, canRewind } = this.props;
    return (

        <A11yIntention>
          {this.renderLayout()}
          {quickOpenEnabled === true && (
            <QuickOpenModal
              shortcutsModalEnabled={this.state.shortcutsModalEnabled}
              toggleShortcutsModal={() => this.toggleShortcutsModal()}
            />
          )}
          {this.renderShortcutsModal()}
        </A11yIntention>

    );
  }
}

App.childContextTypes = {
  shortcuts: PropTypes.object,
  l10n: PropTypes.object
};

const mapStateToProps = state => ({
  canRewind: getCanRewind(state),
  selectedSource: getSelectedSource(state),
  startPanelCollapsed: getPaneCollapse(state, "start"),
  endPanelCollapsed: getPaneCollapse(state, "end"),
  activeSearch: getActiveSearch(state),
  quickOpenEnabled: getQuickOpenEnabled(state),
  orientation: getOrientation(state)
});

export default connect(
  mapStateToProps,
  {
    setActiveSearch: actions.setActiveSearch,
    closeActiveSearch: actions.closeActiveSearch,
    closeProjectSearch: actions.closeProjectSearch,
    openQuickOpen: actions.openQuickOpen,
    closeQuickOpen: actions.closeQuickOpen,
    setOrientation: actions.setOrientation
  }
)(App);
<|endoftext|>


<commit_before>import React from 'react'
import GoogleMap from 'google-map-react'
import TextField from 'material-ui/lib/text-field'
import SelectField from 'material-ui/lib/select-field'
import MenuItem from 'material-ui/lib/menus/menu-item'
import Slider from 'material-ui/lib/slider'
import RaisedButton from 'material-ui/lib/raised-button'
import request from 'superagent'

const greatPlaceStyle = {
  // initially any map object has left top corner at lat lng coordinates
  // it's on you to set object origin to 0,0 coordinates
  position: 'absolute',
  width: 60,
  height: 20,
  left: -40 / 2,
  top: -40 / 2,

  border: '2px solid #f44336',
  borderRadius: 30,
  backgroundColor: 'white',
  color: '#3f51b5',
  fontSize: 14,
  fontWeight: 'bold',
  margin: 4,
  textAlign: 'center'

}

const Map = React.createClass({
  getInitialState () {
    return {
      la: 43.701100,
      lo: -79.416300,
      job: '',
      language: 1,
      rooms: 1,
      lifestyle: 1,
      downtown: 1
    }
  },

  handleJob (e) {
    this.setState({job: e.target.value})
  },

  // language handler
  handleChange (e, index, language) {
    this.setState({language})
  },

  handleRooms (e, index, rooms) {
    this.setState({rooms})
  },

  handleSlider (e, value) {
    this.setState({value})
  },

  handleLifestyle (e, index, lifestyle) {
    this.setState({lifestyle})
  },

  handleDowntown (e, index, downtown) {
    this.setState({downtown})
  },

  onSearch () {
    console.log(this.state)
    let stuff = [{'cityName': 'Toronto', 'grossSalary': '50000', 'image': '...', 'rent': '500', 'disposableIncome': '12500', 'coords': {'la': '1', 'lo': '2'}}, {'cityName': 'Hamilton', 'grossSalary': '5000', 'image': '...', 'rent': '500', 'disposableIncome': '12500', 'coords': {'la': '43.7001100', 'lo': '-79.4163000'}}]
    this.state.newData = stuff.map((e, i) => {
      return
{e.cityName}

    })
    this.setState({la: parseFloat(stuff[0].coords.la), lo: parseFloat(stuff[0].coords.lo)})
    let data = {
      jobTitle: this.state.job,
      language: this.state.language === 1 ? 'EN' : 'FR',
      housing: {
        lifestyle: this.state.lifestyle === 2,
        bedrooms: this.state.rooms === 2 ? 3 : 1,
        downtown: this.state.downtown === 2
      }
    }
    // console.log(data)
    request
      .post('http://localhost:8080/compute')
      .send(data)
      .end((err, data) => {
        console.log(err, data)
      })
  },

  render () {
    const center = [this.state.la, this.state.lo]
    const zoom = 1
    return (

        acre.

                Job Title

                <TextField hintText='ex. Software Developer' value={this.state.job} onChange={this.handleJob}/>

                Language

                <SelectField value={this.state.language} onChange={this.handleChange}>
                  <MenuItem value={1} primaryText='English' />
                  <MenuItem value={2} primaryText='French' />
                </SelectField>

                Population Density

                <Slider min={500} max={3000} defaultValue={700} value={this.state.value} step={0.1} onChange={this.handleSlider} />

                No. of Rooms

                <SelectField value={this.state.rooms} onChange={this.handleRooms}>
                  <MenuItem value={1} primaryText='1' />
                  <MenuItem value={2} primaryText='3' />
                </SelectField>

                Lifestyle

                <SelectField value={this.state.lifestyle} onChange={this.handleLifestyle}>
                  <MenuItem value={1} primaryText='Conservative' />
                  <MenuItem value={2} primaryText='Lofty' />
                </SelectField>

                Downtown

                <SelectField value={this.state.downtown} onChange={this.handleDowntown}>
                  <MenuItem value={1} primaryText='No' />
                  <MenuItem value={2} primaryText='Yes' />
                </SelectField>

          <RaisedButton label='Search' primary={true} onClick={this.onSearch}/>

          <GoogleMap lat={this.state.la} lng={this.state.lo} center={center} zoom={zoom} onChildMouseEnter={this._onChildMouseEnter}
          onChildMouseLeave={this._onChildMouseLeave}>
            {this.state.newData}
          </GoogleMap>

    )
  }
})

export default Map
<commit_msg>Fixed CSS<commit_after>import React from 'react'
import GoogleMap from 'google-map-react'
import TextField from 'material-ui/lib/text-field'
import SelectField from 'material-ui/lib/select-field'
import MenuItem from 'material-ui/lib/menus/menu-item'
import Slider from 'material-ui/lib/slider'
import RaisedButton from 'material-ui/lib/raised-button'
import request from 'superagent'

const greatPlaceStyle = {
  // initially any map object has left top corner at lat lng coordinates
  // it's on you to set object origin to 0,0 coordinates
  position: 'absolute',
  width: 60,
  height: 20,
  left: -40 / 2,
  top: -40 / 2,

  border: '2px solid #f44336',
  borderRadius: 30,
  backgroundColor: 'white',
  color: '#3f51b5',
  fontSize: 14,
  fontWeight: 'bold',
  margin: 4,
  textAlign: 'center'

}

const Map = React.createClass({
  getInitialState () {
    return {
      la: 43.701100,
      lo: -79.416300,
      job: '',
      language: 1,
      rooms: 1,
      lifestyle: 1,
      downtown: 1
    }
  },

  handleJob (e) {
    this.setState({job: e.target.value})
  },

  // language handler
  handleChange (e, index, language) {
    this.setState({language})
  },

  handleRooms (e, index, rooms) {
    this.setState({rooms})
  },

  handleSlider (e, value) {
    this.setState({value})
  },

  handleLifestyle (e, index, lifestyle) {
    this.setState({lifestyle})
  },

  handleDowntown (e, index, downtown) {
    this.setState({downtown})
  },

  onSearch () {
    console.log(this.state)
    let stuff = [{'cityName': 'Toronto', 'grossSalary': '50000', 'image': '...', 'rent': '500', 'disposableIncome': '12500', 'coords': {'la': '1', 'lo': '2'}}, {'cityName': 'Hamilton', 'grossSalary': '5000', 'image': '...', 'rent': '500', 'disposableIncome': '12500', 'coords': {'la': '43.7001100', 'lo': '-79.4163000'}}]
    this.state.newData = stuff.map((e, i) => {
      return
{e.cityName}

    })
    this.setState({la: parseFloat(stuff[0].coords.la), lo: parseFloat(stuff[0].coords.lo)})
    let data = {
      jobTitle: this.state.job,
      language: this.state.language === 1 ? 'EN' : 'FR',
      housing: {
        lifestyle: this.state.lifestyle === 2,
        bedrooms: this.state.rooms === 2 ? 3 : 1,
        downtown: this.state.downtown === 2
      }
    }
    // console.log(data)
    request
      .post('http://localhost:8080/compute')
      .send(data)
      .end((err, data) => {
        console.log(err, data)
      })
  },

  render () {
    const center = [this.state.la, this.state.lo]
    const zoom = 1
    return (

        acre.

                Job Title

                <TextField hintText='ex. Software Developer' value={this.state.job} onChange={this.handleJob}/>

                Language

                <SelectField value={this.state.language} onChange={this.handleChange}>
                  <MenuItem value={1} primaryText='English' />
                  <MenuItem value={2} primaryText='French' />
                </SelectField>

                Population Density

                <Slider min={500} max={3000} defaultValue={700} value={this.state.value} step={0.1} onChange={this.handleSlider} />

                No. of Rooms

                <SelectField value={this.state.rooms} onChange={this.handleRooms}>
                  <MenuItem value={1} primaryText='1' />
                  <MenuItem value={2} primaryText='3' />
                </SelectField>

                Lifestyle

                <SelectField value={this.state.lifestyle} onChange={this.handleLifestyle}>
                  <MenuItem value={1} primaryText='Conservative' />
                  <MenuItem value={2} primaryText='Lofty' />
                </SelectField>

                Downtown

                <SelectField value={this.state.downtown} onChange={this.handleDowntown}>
                  <MenuItem value={1} primaryText='No' />
                  <MenuItem value={2} primaryText='Yes' />
                </SelectField>

          <RaisedButton label='Search' primary={true} onClick={this.onSearch}/>

          <GoogleMap lat={this.state.la} lng={this.state.lo} center={center} zoom={zoom} onChildMouseEnter={this._onChildMouseEnter}
          onChildMouseLeave={this._onChildMouseLeave}>
            {this.state.newData}
          </GoogleMap>

    )
  }
})

export default Map
<|endoftext|>


<commit_before>import React from 'react';
import { Link } from 'react-router-dom';
import { Navbar, Nav, NavItem } from 'react-bootstrap';

const Navigation = (props) => {
  return (
    <Navbar fixedTop={true}>
      <Navbar.Header>
        <Navbar.Brand>
          <Link to="/">
            Recipeas
          </Link>
        </Navbar.Brand>
        <Navbar.Toggle />
      </Navbar.Header>
      <Navbar.Collapse>

          <NavItem>

            Source Code

          </NavItem>

      </Navbar.Collapse>
    </Navbar>
  );
}

export default Navigation;
<commit_msg>Change navbar to be static at top of app.<commit_after>import React from 'react';
import { Link } from 'react-router-dom';
import { Navbar, Nav, NavItem } from 'react-bootstrap';

const Navigation = (props) => {
  return (
    <Navbar>
      <Navbar.Header>
        <Navbar.Brand>
          <Link to="/">
            Recipeas
          </Link>
        </Navbar.Brand>
        <Navbar.Toggle />
      </Navbar.Header>
      <Navbar.Collapse>

          <NavItem>

            Source Code

          </NavItem>

      </Navbar.Collapse>
    </Navbar>
  );
}

export default Navigation;
<|endoftext|>


<commit_before>import React from 'react';
import CreateTodo from './create-todo';
import TodosList from './todos-list';

const todos = [  //creating mock to dos
  {
      task: 'make React tutorial',
      isCompleted: false
},
{
      task: 'eat dinner',
      isCompleted: true
}
];

export default class App extends React.Component {  //this is what were calling our component
  constructor(props) { // a special method for creationg an object created with a class
    super(props);      //super connects it to the parent that it is inheriting from. Standard syntax for setting up the app.

    this.state = {    //to update and render components.
        todos        //referenced from line 4
    };
  }

  render () {
    return (   //keeps code organzed, putting divs in there

React ToDos App

            <CreateTodo createTask={this.createTask.bind(this)} />  {/*when create buttin is clicked, this will render the createTask function*/}
            <TodosList
                todos={this.state.todos}/>  {/*pass our state .todos into our todo list. see line 19-22*/}

    );
  }

    createTask(task) {   {/*take whatever task and push it through out todos state*/}
        this.state.todos({
            task,
            isCompleted: false
        });
        this.setState({ todos: this.state.todos }); {/*this will only render what is different and not the same when creating a task*/}
    }
}
<commit_msg>fix a grammitical error with the word button on line 29<commit_after>import React from 'react';
import CreateTodo from './create-todo';
import TodosList from './todos-list';

const todos = [  //creating mock to dos
  {
      task: 'make React tutorial',
      isCompleted: false
},
{
      task: 'eat dinner',
      isCompleted: true
}
];

export default class App extends React.Component {  //this is what were calling our component
  constructor(props) { // a special method for creationg an object created with a class
    super(props);      //super connects it to the parent that it is inheriting from. Standard syntax for setting up the app.

    this.state = {    //to update and render components.
        todos        //referenced from line 4
    };
  }

  render () {
    return (   //keeps code organzed, putting divs in there

React ToDos App

            <CreateTodo createTask={this.createTask.bind(this)} />  {/*when create button is clicked, this will render the createTask function*/}
            <TodosList
                todos={this.state.todos}/>  {/*pass our state .todos into our todo list. see line 19-22*/}

    );
  }

    createTask(task) {   {/*take whatever task and push it through out todos state*/}
        this.state.todos({
            task,
            isCompleted: false
        });
        this.setState({ todos: this.state.todos }); {/*this will only render what is different and not the same when creating a task*/}
    }
}
<|endoftext|>


<commit_before>import React from 'react'
import ReactMapGL from 'react-map-gl'
import { graphql } from 'react-apollo'

import allHives from 'src/graphql/queries/all_hives.gql'
import Layers from './layers'

@graphql(allHives)
export default class Map extends React.Component {
	constructor(props) {
		super(props)

		this.map = {
			render: false,
		}

		this.state = {
			mapStyle: 'mapbox://styles/mapbox/streets-v10',
			token:
				'pk.eyJ1IjoiYXN0d3lzIiwiYSI6ImNqNTBzbHMzYTJkMTkycXFqOHV2bDFwc28ifQ.BAEjuFoOh6TfXlYKwRfRrg',
			viewport: {
				latitude: 48.210033,
				longitude: 16.363449,
				zoom: 11,
				bearing: 0,
				pitch: 50,
				width: 800,
				height: 600,
			},
			hiveInfo: null,
		}
	}

	componentDidMount() {
		this.map = {
			render: true,
		}
	}

	onViewportChange = viewport => this.setState({ viewport })

	render() {
		const { viewport, mapStyle, token } = this.state
		const { data } = this.props

		if (data.loading) {
			return
loading...

		}

		if (!this.map.render) {
			return

		}

		return (

				<ReactMapGL
					{...viewport}
					debug
					mapStyle={mapStyle}
					mapboxApiAccessToken={token}
					onViewportChange={this.onViewportChange}>
					<Layers viewport={viewport} data={data} />
				</ReactMapGL>

		)
		// return this.renderMap()
	}
}
<commit_msg>removed commend<commit_after>import React from 'react'
import ReactMapGL from 'react-map-gl'
import { graphql } from 'react-apollo'

import allHives from 'src/graphql/queries/all_hives.gql'
import Layers from './layers'

@graphql(allHives)
export default class Map extends React.Component {
	constructor(props) {
		super(props)

		this.map = {
			render: false,
		}

		this.state = {
			mapStyle: 'mapbox://styles/mapbox/streets-v10',
			token:
				'pk.eyJ1IjoiYXN0d3lzIiwiYSI6ImNqNTBzbHMzYTJkMTkycXFqOHV2bDFwc28ifQ.BAEjuFoOh6TfXlYKwRfRrg',
			viewport: {
				latitude: 48.210033,
				longitude: 16.363449,
				zoom: 11,
				bearing: 0,
				pitch: 50,
				width: 800,
				height: 600,
			},
			hiveInfo: null,
		}
	}

	componentDidMount() {
		this.map = {
			render: true,
		}
	}

	onViewportChange = viewport => this.setState({ viewport })

	render() {
		const { viewport, mapStyle, token } = this.state
		const { data } = this.props

		if (data.loading) {
			return
loading...

		}

		if (!this.map.render) {
			return

		}

		return (

				<ReactMapGL
					{...viewport}
					debug
					mapStyle={mapStyle}
					mapboxApiAccessToken={token}
					onViewportChange={this.onViewportChange}>
					<Layers viewport={viewport} data={data} />
				</ReactMapGL>

		)
	}
}
<|endoftext|>


<commit_before>import React, { Component } from 'react';
import { wpm, accuracy } from '../helpers/wpm.js'
const containerStyle = {
  float: "left",
  width: "30%",
  marginLeft: "3px",
};

class WPM extends Component {
  constructor() {
    super();
    this.state = {
      wpm: 0,
      accuracy: "NaN",
    };
    this.netWPM = this.netWPM.bind(this);
  }

  componentDidMount() {
    this.setState({
      // Update WPM once per second
      timer: setInterval(() => {
        if (this.props.typingTest.inProgress) {
          this.setState({
            wpm: this.netWPM().toFixed(),
            accuracy: accuracy(this.props.correctChars, this.props.wrongChars)
                      .toFixed(1),
          });
        }
        if (this.props.typingTest.finished)
          clearInterval(this.state.timer);
      }, 500)
    });
  }

  netWPM() {
    const { correctChars, wrongChars, typingTest } = this.props;

    // Figure out elapsed time in milliseconds
    let timeElapsed;
    if (!typingTest.inProgress) {
      if (typingTest.finished)
        timeElapsed = typingTest.stopTime - typingTest.startTime;
      else
        return 0; // Nothing has been typed yet
    } else
      timeElapsed = Date.now() - typingTest.startTime;

    return wpm(correctChars, wrongChars, timeElapsed);
  }

  render() {
    return(

        WPM: {this.state.wpm}

Accuracy:
        {this.state.accuracy !== "NaN" ? this.state.accuracy + "%" : ""}

);
  }
}

export default WPM;
<commit_msg>missing semicolon<commit_after>import React, { Component } from 'react';
import { wpm, accuracy } from '../helpers/wpm.js';

const containerStyle = {
  float: "left",
  width: "30%",
  marginLeft: "3px",
};

class WPM extends Component {
  constructor() {
    super();
    this.state = {
      wpm: 0,
      accuracy: "NaN",
    };
    this.netWPM = this.netWPM.bind(this);
  }

  componentDidMount() {
    this.setState({
      // Update WPM once per second
      timer: setInterval(() => {
        if (this.props.typingTest.inProgress) {
          this.setState({
            wpm: this.netWPM().toFixed(),
            accuracy: accuracy(this.props.correctChars, this.props.wrongChars)
                      .toFixed(1),
          });
        }
        if (this.props.typingTest.finished)
          clearInterval(this.state.timer);
      }, 500)
    });
  }

  netWPM() {
    const { correctChars, wrongChars, typingTest } = this.props;

    // Figure out elapsed time in milliseconds
    let timeElapsed;
    if (!typingTest.inProgress) {
      if (typingTest.finished)
        timeElapsed = typingTest.stopTime - typingTest.startTime;
      else
        return 0; // Nothing has been typed yet
    } else
      timeElapsed = Date.now() - typingTest.startTime;

    return wpm(correctChars, wrongChars, timeElapsed);
  }

  render() {
    return(

        WPM: {this.state.wpm}

Accuracy:
        {this.state.accuracy !== "NaN" ? this.state.accuracy + "%" : ""}

);
  }
}

export default WPM;
<|endoftext|>


<commit_before>/**
* Configure the Aurelia-KendoUI-bridge
*/
export class KendoConfigBuilder {

	resources: string[] = [];
  debugMode = false;

  /**
  * Globally register all Kendo Core wrappers including templating support
  */
  core(): KendoConfigBuilder {
    this.kendoAutoComplete()
      .kendoButton()
      .kendoButtonGroup()
      .kendoCalendar()
      .kendoColorPicker()
      .kendoColorPalette()
      .kendoCombobox()
      .kendoContextMenu()
      .kendoDropDownList()
      .kendoDateTimePicker()
      .kendoDatePicker()
      .kendoDraggable()
      .kendoDropTarget()
      .kendoFlatColorPicker()
      .kendoListView()
      .kendoMaskedTextBox()
      .kendoMenu()
      .kendoMultiselect()
      .kendoNotification()
      .kendoNumericTextBox()
      .kendoPanelBar()
      .kendoProgressBar()
      .kendoRangeSlider()
      .kendoResponsivePanel()
      .kendoScrollView()
      .kendoSortable()
      .kendoSlider()
      .kendoSplitter()
      .kendoSwitch()
      .kendoTabStrip()
      .kendoTemplateSupport()
      .kendoTimePicker()
      .kendoToolbar()
      .kendoTooltip()
      .kendoValidator()
      .kendoWindow()
      .useValueConverters();
    return this;
  }

  /**
  * Globally register all Kendo Core and Kendo Pro wrappers
  */
  pro(): KendoConfigBuilder {
    this.core()
      .kendoBarcode()
      .kendoChart()
      .kendoDiagram()
      .kendoEditor()
      .kendoGantt()
      .kendoGrid()
      .kendoMap()
      .kendoLinearGauge()
      .kendoPivotGrid()
      .kendoQRCode()
      .kendoRadialGauge()
      .kendoScheduler()
      .kendoTreeList()
      .kendoTreeView()
      .kendoUpload();
    return this;
  }

  /**
  * Registers value converters (wrappers around kendo functions)
  */
  useValueConverters(): KendoConfigBuilder {
    this.resources.push('./valueconverters/valueconverters');
    return this;
  }

  /**
  * Adds kendo templating support
  */
  kendoTemplateSupport(): KendoConfigBuilder {
    this.resources.push('./common/template');
    return this;
  }

  /**
  * Adds kendo templating support
  */
  debug(): KendoConfigBuilder {
    this.debugMode = true;
    return this;
  }

  kendoAutoComplete(): KendoConfigBuilder {
    this.resources.push('./autocomplete/autocomplete');
    return this;
  }

  kendoButton(): KendoConfigBuilder {
    this.resources.push('./button/button');
    return this;
  }

  kendoButtonGroup(): KendoConfigBuilder {
    this.resources.push('./buttongroup/buttongroup');
    return this;
  }

  kendoBarcode(): KendoConfigBuilder {
    this.resources.push('./barcode/barcode');
    return this;
  }

  kendoCalendar(): KendoConfigBuilder {
    this.resources.push('./calendar/calendar');
    return this;
  }

  kendoChart(): KendoConfigBuilder {
    this.resources.push('./chart/chart');
    this.resources.push('./chart/sparkline');
    this.resources.push('./chart/stock');
    this.resources.push('./chart/treemap');
    return this;
  }

  kendoCombobox(): KendoConfigBuilder {
    this.resources.push('./combobox/combobox');
    return this;
  }

  kendoContextMenu(): KendoConfigBuilder {
    this.resources.push('./contextmenu/contextmenu');
    return this;
  }

  kendoColorPicker(): KendoConfigBuilder {
    this.resources.push('./colorpicker/colorpicker');
    return this;
  }

  kendoColorPalette(): KendoConfigBuilder {
    this.resources.push('./colorpalette/colorpalette');
    return this;
  }

  kendoDatePicker(): KendoConfigBuilder {
    this.resources.push('./datepicker/datepicker');
    return this;
  }

  kendoDateTimePicker(): KendoConfigBuilder {
    this.resources.push('./datetimepicker/datetimepicker');
    return this;
  }

  kendoDiagram(): KendoConfigBuilder {
    this.resources.push('./diagram/diagram');
    return this;
  }

  kendoDraggable(): KendoConfigBuilder {
    this.resources.push('./draggable/draggable');
    return this;
  }

  kendoDropDownList(): KendoConfigBuilder {
    this.resources.push('./dropdownlist/dropdownlist');
    return this;
  }

  kendoDropTarget(): KendoConfigBuilder {
    this.resources.push('./drop-target/drop-target');
    this.resources.push('./drop-target/drop-target-area');
    return this;
  }

  kendoEditor(): KendoConfigBuilder {
    this.resources.push('./editor/editor');
    return this;
  }

  kendoFlatColorPicker(): KendoConfigBuilder {
    this.resources.push('./flatcolorpicker/flatcolorpicker');
    return this;
  }

  kendoGantt(): KendoConfigBuilder {
    this.resources.push('./gantt/gantt');
    this.resources.push('./gantt/gantt-col');
    return this;
  }

  kendoGrid(): KendoConfigBuilder {
    this.resources.push('./grid/grid');
    this.resources.push('./grid/col');
    this.resources.push('./grid/grid-toolbar');
    return this;
  }

  kendoLinearGauge(): KendoConfigBuilder {
    this.resources.push('./gauges/linear-gauge');
    return this;
  }

  kendoListView(): KendoConfigBuilder {
    this.resources.push('./listview/listview');
    return this;
  }

  kendoNotification(): KendoConfigBuilder {
    this.resources.push('./notification/notification');
    this.resources.push('./notification/notification-template');
    return this;
  }

  kendoMap(): KendoConfigBuilder {
    this.resources.push('./map/map');
    return this;
  }

  kendoMenu(): KendoConfigBuilder {
    this.resources.push('./menu/menu');
    return this;
  }

  kendoMaskedTextBox(): KendoConfigBuilder {
    this.resources.push('./maskedtextbox/maskedtextbox');
    return this;
  }

  kendoMultiselect(): KendoConfigBuilder {
    this.resources.push('./multiselect/multiselect');
    return this;
  }

  kendoNumericTextBox(): KendoConfigBuilder {
    this.resources.push('./numerictextbox/numerictextbox');
    return this;
  }

  kendoPanelBar(): KendoConfigBuilder {
    this.resources.push('./panelbar/panelbar');
    return this;
  }

  kendoPivotGrid(): KendoConfigBuilder {
    this.resources.push('./pivotgrid/pivotgrid');
    this.resources.push('./pivotgrid/pivotconfigurator');
    return this;
  }

  kendoProgressBar(): KendoConfigBuilder {
    this.resources.push('./progressbar/progressbar');
    return this;
  }

  kendoQRCode(): KendoConfigBuilder {
    this.resources.push('./qrcode/qrcode');
    return this;
  }

  kendoRadialGauge(): KendoConfigBuilder {
    this.resources.push('./gauges/radial-gauge');
    return this;
  }

  kendoResponsivePanel(): KendoConfigBuilder {
    this.resources.push('./responsivepanel/responsivepanel');
    return this;
  }

  kendoScrollView(): KendoConfigBuilder {
    this.resources.push('./scrollview/scrollview');
    return this;
  }

  kendoScheduler(): KendoConfigBuilder {
    this.resources.push('./scheduler/scheduler');
    return this;
  }

  kendoSlider(): KendoConfigBuilder {
    this.resources.push('./slider/slider');
    return this;
  }

  kendoSortable(): KendoConfigBuilder {
    this.resources.push('./sortable/sortable');
    return this;
  }

  kendoSpreadsheet(): KendoConfigBuilder {
    this.resources.push('./spreadsheet/spreadsheet');
    return this;
  }

  kendoSplitter(): KendoConfigBuilder {
    this.resources.push('./splitter/splitter');
    return this;
  }

  kendoSlider(): KendoConfigBuilder {
    this.resources.push('./slider/slider');
    return this;
  }

  kendoSwitch(): KendoConfigBuilder {
    this.resources.push('./switch/switch');
    return this;
  }

  kendoTabStrip(): KendoConfigBuilder {
    this.resources.push('./tabstrip/tabstrip');
    return this;
  }

  kendoTreeList(): KendoConfigBuilder {
    this.resources.push('./treelist/treelist');
    this.resources.push('./treelist/tree-col');
    return this;
  }

  kendoToolbar(): KendoConfigBuilder {
    this.resources.push('./toolbar/toolbar');
    return this;
  }

  kendoTreeView(): KendoConfigBuilder {
    this.resources.push('./treeview/treeview');
    return this;
  }

  kendoTimePicker(): KendoConfigBuilder {
    this.resources.push('./timepicker/timepicker');
    return this;
  }

  kendoToolbar(): KendoConfigBuilder {
    this.resources.push('./toolbar/toolbar');
    this.resources.push('./toolbar/toolbar-item');
    this.resources.push('./toolbar/toolbar-item-button');
    return this;
  }

  kendoTooltip(): KendoConfigBuilder {
    this.resources.push('./tooltip/tooltip');
    return this;
  }

  kendoRangeSlider(): KendoConfigBuilder {
    this.resources.push('./rangeslider/rangeslider');
    return this;
  }

  kendoUpload(): KendoConfigBuilder {
    this.resources.push('./upload/upload');
    return this;
  }

  kendoValidator(): KendoConfigBuilder {
    this.resources.push('./validator/validator');
    return this;
  }

  kendoWindow(): KendoConfigBuilder {
    this.resources.push('./window/window');
    return this;
  }
}
<commit_msg>refactor(multiselect): rename kendoMultiselect() to kendoMultiSelect()<commit_after>/**
* Configure the Aurelia-KendoUI-bridge
*/
export class KendoConfigBuilder {

	resources: string[] = [];
  debugMode = false;

  /**
  * Globally register all Kendo Core wrappers including templating support
  */
  core(): KendoConfigBuilder {
    this.kendoAutoComplete()
      .kendoButton()
      .kendoButtonGroup()
      .kendoCalendar()
      .kendoColorPicker()
      .kendoColorPalette()
      .kendoCombobox()
      .kendoContextMenu()
      .kendoDropDownList()
      .kendoDateTimePicker()
      .kendoDatePicker()
      .kendoDraggable()
      .kendoDropTarget()
      .kendoFlatColorPicker()
      .kendoListView()
      .kendoMaskedTextBox()
      .kendoMenu()
      .kendoMultiSelect()
      .kendoNotification()
      .kendoNumericTextBox()
      .kendoPanelBar()
      .kendoProgressBar()
      .kendoRangeSlider()
      .kendoResponsivePanel()
      .kendoScrollView()
      .kendoSortable()
      .kendoSlider()
      .kendoSplitter()
      .kendoSwitch()
      .kendoTabStrip()
      .kendoTemplateSupport()
      .kendoTimePicker()
      .kendoToolbar()
      .kendoTooltip()
      .kendoValidator()
      .kendoWindow()
      .useValueConverters();
    return this;
  }

  /**
  * Globally register all Kendo Core and Kendo Pro wrappers
  */
  pro(): KendoConfigBuilder {
    this.core()
      .kendoBarcode()
      .kendoChart()
      .kendoDiagram()
      .kendoEditor()
      .kendoGantt()
      .kendoGrid()
      .kendoMap()
      .kendoLinearGauge()
      .kendoPivotGrid()
      .kendoQRCode()
      .kendoRadialGauge()
      .kendoScheduler()
      .kendoTreeList()
      .kendoTreeView()
      .kendoUpload();
    return this;
  }

  /**
  * Registers value converters (wrappers around kendo functions)
  */
  useValueConverters(): KendoConfigBuilder {
    this.resources.push('./valueconverters/valueconverters');
    return this;
  }

  /**
  * Adds kendo templating support
  */
  kendoTemplateSupport(): KendoConfigBuilder {
    this.resources.push('./common/template');
    return this;
  }

  /**
  * Adds kendo templating support
  */
  debug(): KendoConfigBuilder {
    this.debugMode = true;
    return this;
  }

  kendoAutoComplete(): KendoConfigBuilder {
    this.resources.push('./autocomplete/autocomplete');
    return this;
  }

  kendoButton(): KendoConfigBuilder {
    this.resources.push('./button/button');
    return this;
  }

  kendoButtonGroup(): KendoConfigBuilder {
    this.resources.push('./buttongroup/buttongroup');
    return this;
  }

  kendoBarcode(): KendoConfigBuilder {
    this.resources.push('./barcode/barcode');
    return this;
  }

  kendoCalendar(): KendoConfigBuilder {
    this.resources.push('./calendar/calendar');
    return this;
  }

  kendoChart(): KendoConfigBuilder {
    this.resources.push('./chart/chart');
    this.resources.push('./chart/sparkline');
    this.resources.push('./chart/stock');
    this.resources.push('./chart/treemap');
    return this;
  }

  kendoCombobox(): KendoConfigBuilder {
    this.resources.push('./combobox/combobox');
    return this;
  }

  kendoContextMenu(): KendoConfigBuilder {
    this.resources.push('./contextmenu/contextmenu');
    return this;
  }

  kendoColorPicker(): KendoConfigBuilder {
    this.resources.push('./colorpicker/colorpicker');
    return this;
  }

  kendoColorPalette(): KendoConfigBuilder {
    this.resources.push('./colorpalette/colorpalette');
    return this;
  }

  kendoDatePicker(): KendoConfigBuilder {
    this.resources.push('./datepicker/datepicker');
    return this;
  }

  kendoDateTimePicker(): KendoConfigBuilder {
    this.resources.push('./datetimepicker/datetimepicker');
    return this;
  }

  kendoDiagram(): KendoConfigBuilder {
    this.resources.push('./diagram/diagram');
    return this;
  }

  kendoDraggable(): KendoConfigBuilder {
    this.resources.push('./draggable/draggable');
    return this;
  }

  kendoDropDownList(): KendoConfigBuilder {
    this.resources.push('./dropdownlist/dropdownlist');
    return this;
  }

  kendoDropTarget(): KendoConfigBuilder {
    this.resources.push('./drop-target/drop-target');
    this.resources.push('./drop-target/drop-target-area');
    return this;
  }

  kendoEditor(): KendoConfigBuilder {
    this.resources.push('./editor/editor');
    return this;
  }

  kendoFlatColorPicker(): KendoConfigBuilder {
    this.resources.push('./flatcolorpicker/flatcolorpicker');
    return this;
  }

  kendoGantt(): KendoConfigBuilder {
    this.resources.push('./gantt/gantt');
    this.resources.push('./gantt/gantt-col');
    return this;
  }

  kendoGrid(): KendoConfigBuilder {
    this.resources.push('./grid/grid');
    this.resources.push('./grid/col');
    this.resources.push('./grid/grid-toolbar');
    return this;
  }

  kendoLinearGauge(): KendoConfigBuilder {
    this.resources.push('./gauges/linear-gauge');
    return this;
  }

  kendoListView(): KendoConfigBuilder {
    this.resources.push('./listview/listview');
    return this;
  }

  kendoNotification(): KendoConfigBuilder {
    this.resources.push('./notification/notification');
    this.resources.push('./notification/notification-template');
    return this;
  }

  kendoMap(): KendoConfigBuilder {
    this.resources.push('./map/map');
    return this;
  }

  kendoMenu(): KendoConfigBuilder {
    this.resources.push('./menu/menu');
    return this;
  }

  kendoMaskedTextBox(): KendoConfigBuilder {
    this.resources.push('./maskedtextbox/maskedtextbox');
    return this;
  }

  kendoMultiSelect(): KendoConfigBuilder {
    this.resources.push('./multiselect/multiselect');
    return this;
  }

  kendoNumericTextBox(): KendoConfigBuilder {
    this.resources.push('./numerictextbox/numerictextbox');
    return this;
  }

  kendoPanelBar(): KendoConfigBuilder {
    this.resources.push('./panelbar/panelbar');
    return this;
  }

  kendoPivotGrid(): KendoConfigBuilder {
    this.resources.push('./pivotgrid/pivotgrid');
    this.resources.push('./pivotgrid/pivotconfigurator');
    return this;
  }

  kendoProgressBar(): KendoConfigBuilder {
    this.resources.push('./progressbar/progressbar');
    return this;
  }

  kendoQRCode(): KendoConfigBuilder {
    this.resources.push('./qrcode/qrcode');
    return this;
  }

  kendoRadialGauge(): KendoConfigBuilder {
    this.resources.push('./gauges/radial-gauge');
    return this;
  }

  kendoResponsivePanel(): KendoConfigBuilder {
    this.resources.push('./responsivepanel/responsivepanel');
    return this;
  }

  kendoScrollView(): KendoConfigBuilder {
    this.resources.push('./scrollview/scrollview');
    return this;
  }

  kendoScheduler(): KendoConfigBuilder {
    this.resources.push('./scheduler/scheduler');
    return this;
  }

  kendoSlider(): KendoConfigBuilder {
    this.resources.push('./slider/slider');
    return this;
  }

  kendoSortable(): KendoConfigBuilder {
    this.resources.push('./sortable/sortable');
    return this;
  }

  kendoSpreadsheet(): KendoConfigBuilder {
    this.resources.push('./spreadsheet/spreadsheet');
    return this;
  }

  kendoSplitter(): KendoConfigBuilder {
    this.resources.push('./splitter/splitter');
    return this;
  }

  kendoSlider(): KendoConfigBuilder {
    this.resources.push('./slider/slider');
    return this;
  }

  kendoSwitch(): KendoConfigBuilder {
    this.resources.push('./switch/switch');
    return this;
  }

  kendoTabStrip(): KendoConfigBuilder {
    this.resources.push('./tabstrip/tabstrip');
    return this;
  }

  kendoTreeList(): KendoConfigBuilder {
    this.resources.push('./treelist/treelist');
    this.resources.push('./treelist/tree-col');
    return this;
  }

  kendoToolbar(): KendoConfigBuilder {
    this.resources.push('./toolbar/toolbar');
    return this;
  }

  kendoTreeView(): KendoConfigBuilder {
    this.resources.push('./treeview/treeview');
    return this;
  }

  kendoTimePicker(): KendoConfigBuilder {
    this.resources.push('./timepicker/timepicker');
    return this;
  }

  kendoToolbar(): KendoConfigBuilder {
    this.resources.push('./toolbar/toolbar');
    this.resources.push('./toolbar/toolbar-item');
    this.resources.push('./toolbar/toolbar-item-button');
    return this;
  }

  kendoTooltip(): KendoConfigBuilder {
    this.resources.push('./tooltip/tooltip');
    return this;
  }

  kendoRangeSlider(): KendoConfigBuilder {
    this.resources.push('./rangeslider/rangeslider');
    return this;
  }

  kendoUpload(): KendoConfigBuilder {
    this.resources.push('./upload/upload');
    return this;
  }

  kendoValidator(): KendoConfigBuilder {
    this.resources.push('./validator/validator');
    return this;
  }

  kendoWindow(): KendoConfigBuilder {
    this.resources.push('./window/window');
    return this;
  }
}
<|endoftext|>