<commit_before>import fontawesome from '@fortawesome/fontawesome'
import far from '@fortawesome/fontawesome-free-regular'
import fas from '@fortawesome/fontawesome-free-solid'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import PropTypes from 'prop-types'
import React from 'react'

fontawesome.library.add(fas)
fontawesome.library.add(far)

const Icon = ({name, type = 'solid', className, ...props}) => {
    console.log('type', type)
    console.log('fontAwesomeCollection(type)', fontAwesomeCollection(type))
    if (!name)
        return null
    else
        return <FontAwesomeIcon
            tag='i'
            icon={[fontAwesomeCollection(type), name]}
            spin={name === 'spinner'}
            className={className}
            {...props}/>
}

Icon.propTypes = Object.assign(FontAwesomeIcon.propTypes, {
    name: PropTypes.string
})

const fontAwesomeCollection = (type) => {
    switch (type) {
        case 'solid':
            return 'fas'
        case 'regular':
            return 'far'
        default:
            return 'fas'
    }
}

export default Icon<commit_msg>Removed debug logging from icon component.<commit_after>import fontawesome from '@fortawesome/fontawesome'
import far from '@fortawesome/fontawesome-free-regular'
import fas from '@fortawesome/fontawesome-free-solid'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import PropTypes from 'prop-types'
import React from 'react'

fontawesome.library.add(fas)
fontawesome.library.add(far)

const Icon = ({name, type = 'solid', className, ...props}) => {
    if (!name)
        return null
    else
        return <FontAwesomeIcon
            tag='i'
            icon={[fontAwesomeCollection(type), name]}
            spin={name === 'spinner'}
            className={className}
            {...props}/>
}

Icon.propTypes = Object.assign(FontAwesomeIcon.propTypes, {
    name: PropTypes.string
})

const fontAwesomeCollection = (type) => {
    switch (type) {
        case 'solid':
            return 'fas'
        case 'regular':
            return 'far'
        default:
            return 'fas'
    }
}

export default Icon<|endoftext|>


<commit_before>import { storybookDefaults as defaults } from '>/helpers'
import { storiesOf } from '@storybook/vue'
import { historyMock } from '>/mockdata'

import HistoryList from './HistoryList'

storiesOf('History List', module)
  .add('Default', () => defaults({
    render: h => h(HistoryList, {
      props: {
        history: historyMock,
        status: { pending: false, hasValidationErrors: false },
        canLoadMore: true,
        fetchMore: () => {},
      },
    }),
  }))
<commit_msg>fix HistoryList story<commit_after>import { storybookDefaults as defaults } from '>/helpers'
import { storiesOf } from '@storybook/vue'
import { historyMock } from '>/mockdata'

import HistoryListUI from './HistoryListUI'

storiesOf('History List', module)
  .add('Default', () => defaults({
    render: h => h(HistoryListUI, {
      props: {
        history: historyMock,
        status: { pending: false, hasValidationErrors: false },
        canLoadMore: true,
        fetchMore: () => {},
      },
    }),
  }))
<|endoftext|>


<commit_before>import React, { Component, PropTypes } from 'react';
import BreakPoints from 'components/PixelPerfect/breakpoints';
import { Country } from 'components/Map';
import cx from 'classnames';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { routerActions } from 'react-router-redux';
import CSSTransitionGroup from 'react-addons-css-transition-group';
import InlineSvg from 'components/InlineSvg/component';
import Styles from './main.scss';

import SvgCloseIcon from 'theme/components/Locator/Images/closeListIcon.svg';

import {
    region as selectRegion,
    city as selectCity,
    provider as selectProvider,
    back as locationBack,
    close
} from 'redux/modules/watchUs';

/* eslint-disable react/prefer-stateless-function */
@connect(({ watchUs, routing, browser }) => {
    return {
        state: watchUs,
        location: routing.locationBeforeTransitions.pathname,
        browser
    };
}, (dispatch) => {
    return bindActionCreators({
        push: routerActions.push,
        selectRegion,
        selectCity,
        selectProvider,
        locationBack,
        close
    }, dispatch);
})
export default class Locator extends Component {
    static propTypes = {
        state: PropTypes.object.isRequired,
        location: PropTypes.string.isRequired,
        regions: PropTypes.array,
        push: PropTypes.func.isRequired,
        selectRegion: PropTypes.func.isRequired,
        selectCity: PropTypes.func.isRequired,
        selectProvider: PropTypes.func.isRequired,
        locationBack: PropTypes.func.isRequired,
        close: PropTypes.func.isRequired,
        browser: PropTypes.object.isRequired
    };

    selectRegion = (id) => {
        this.props.selectRegion(id, this.props.state);
    };

    selectCity = (id) => {
        this.props.selectCity(id, this.props.state);
    };

    selectProvider = (id) => {
        this.props.selectProvider(id, this.props.state);
    };

    locationBack = (event) => {
        event.preventDefault();
        this.props.locationBack(this.props.state);
    };

    close = (event) => {
        event.preventDefault();
        this.props.close();
    };

    render() {
        const { state, regions, browser } = this.props;
        const isMobile = [
                BreakPoints.phonePortrait.name,
                BreakPoints.phoneLandscape.name
            ].indexOf(browser.mediaType) !== -1;

        // Init
        const currentRegion = state.region ? regions.find((region) => {
            return region.id === state.region;
        }) : null;
        const currentCity = state.city ? currentRegion.cities.find((city) => {
            return city.id === state.city;
        }) : null;
        const currentProvider = state.provider ? currentCity.providers.find((provider) => {
            return provider.id === state.provider;
        }) : null;

        console.log(currentProvider);

        if (isMobile) {
            if (!state.locatorActive) {
                return null;
            }

            // Page id
            let pageId = '';
            if (state.region !== null && state.city === null) {
                pageId = 'regions';
            } else if (state.city !== null) {
                pageId = 'cities';
            } else if (state.provider !== null) {
                pageId = 'providers';
            }

            // Back
            const backButton = state.region ? () : null;

            // Title
            let title = '';
            if (state.region === null) {
                title = 'Выберите область';
            } else if (state.region !== null && state.city === null) {
                title = currentRegion.title.text;
            } else if (state.city !== null) {
                title = currentCity.title;
            }

            // List
            const listClass = cx({
                [Styles.listItems]: true,
                [Styles.operators]: state.city !== null
            });
            let list = [];
            if (state.region === null) {
                list = regions.map((region) => {
                    const total = region.cities.reduce((total, city) => {
                        return total + city.providers.length;
                    }, 0);

                    /* eslint-disable react/jsx-no-bind */
                    return (

 this.selectRegion(region.id) }>

                                { region.title.text }
                                { total }

                    );
                });
            } else if (state.city === null) {
                list = currentRegion.cities.map((city) => {
                    const total = city.providers.length;

                    /* eslint-disable react/jsx-no-bind */
                    return (

 this.selectCity(city.id) }>

                                { city.title }
                                { total }

                    );
                });
            } else {
                list = currentCity.providers.map((provider) => {
                    const itemClass = cx({
                        [Styles.opened]: state.provider === provider.id
                    });

                    const webSite = provider.website !== '' ? (
                        { provider.website }
                    ) : null;

                    const phones = provider.phones.map((phone) => {
                        const phoneNew = `+${phone.slice(0, 3)}
                    (${phone.slice(3, 5)})
                    ${phone.slice(5, 8)}
                    ${phone.slice(8, 10)}
                    ${phone.slice(10)}`;

                        return (

{ phoneNew }

                        );
                    });

                    const providerInfo = state.provider === provider.id ? (

                                { phones }

                            { webSite }

                    ) : null;

                    return (

 this.selectProvider(provider.id) }
                        >

                                { provider.title }

                            { providerInfo }

                    );
                });
            }

            // forward back
            const transitionForward = {
                enter: Styles.sliderEnter,
                enterActive: Styles.sliderEnterActive,
                leave: Styles.sliderLeave,
                leaveActive: Styles.sliderLeaveActive
            };
            // const transitionBack = {
            //     enter: Styles.sliderBackEnter,
            //     enterActive: Styles.sliderBackEnterActive,
            //     leave: Styles.sliderBackLeave,
            //     leaveActive: Styles.sliderBackLeaveActive
            // };

            return (

                        { backButton }

{ title }

                        <InlineSvg content={ SvgCloseIcon }/>

                    <CSSTransitionGroup
                        transitionEnterTimeout={ 200 }
                        transitionLeaveTimeout={ 200 }
                        transitionName={ transitionForward }
                        component="div"
                    >

                            { list }

                    </CSSTransitionGroup>

            );
        }

        // Title
        const title = state.region !== null ? `${currentRegion.title.text} область` : null;

        // City list
        const cityList = state.region !== null ? currentRegion.cities.map((city) => {
            const cityClass = cx({
                [Styles.selected]: state.city === city.id
            });

            /* eslint-disable react/jsx-no-bind */
            return (

 this.selectCity(city.id) }>
                    { city.title }

            );
        }) : null;

        // Provider list
        const providersList = state.region !== null ? currentCity.providers.map((provider) => {
            const providerClass = cx({
                [Styles.selected]: state.provider === provider.id
            });

            const webSite = provider.website !== '' ? (
                { provider.website }
            ) : null;

            const phones = provider.phones.map((phone) => {
                const phoneNew = `+${phone.slice(0, 3)}
                    (${phone.slice(3, 5)})
                    ${phone.slice(5, 8)}
                    ${phone.slice(8, 10)}
                    ${phone.slice(10)}`;

                return (

{ phoneNew }

                );
            });

            const phonesClass = cx({
                [Styles.withWebsite]: provider.website !== ''
            });

            const providerInfo = state.provider === provider.id ? (

                        { phones }

                    { webSite }

            ) : null;

            /* eslint-disable react/jsx-no-bind */
            return (

 this.selectProvider(provider.id) }>

{ provider.title }

                    { providerInfo }

            );
        }) : null;

        // Region popup
        const region = state.region !== null ? (

{ title }

                    { [
                        BreakPoints.tabletLandscape.name,
                        BreakPoints.desktop.name,
                        BreakPoints.desktopWide.name,
                        BreakPoints.desktopHD.name,
                        BreakPoints.desktopMega.name
                    ].indexOf(browser.mediaType) !== -1 ? (

Карта области

                    ) : null }

Города

Кабельные операторы

                    { [
                        BreakPoints.tabletLandscape.name,
                        BreakPoints.desktop.name,
                        BreakPoints.desktopWide.name,
                        BreakPoints.desktopHD.name,
                        BreakPoints.desktopMega.name
                    ].indexOf(browser.mediaType) !== -1 ? (

                    ) : null }

                        { cityList }

                        { providersList }

        ) : null;

        return (

                    <Country regions={ regions }/>

Выберите область

                        чтобы увидеть список операторов в доступных городах этой области

                { region }

        );
    }
}
<commit_msg>clean lint<commit_after>import React, { Component, PropTypes } from 'react';
import BreakPoints from 'components/PixelPerfect/breakpoints';
import { Country } from 'components/Map';
import cx from 'classnames';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { routerActions } from 'react-router-redux';
import CSSTransitionGroup from 'react-addons-css-transition-group';
import InlineSvg from 'components/InlineSvg/component';
import Styles from './main.scss';

import SvgCloseIcon from 'theme/components/Locator/Images/closeListIcon.svg';

import {
    region as selectRegion,
    city as selectCity,
    provider as selectProvider,
    back as locationBack,
    close
} from 'redux/modules/watchUs';

/* eslint-disable react/prefer-stateless-function */
@connect(({ watchUs, routing, browser }) => {
    return {
        state: watchUs,
        location: routing.locationBeforeTransitions.pathname,
        browser
    };
}, (dispatch) => {
    return bindActionCreators({
        push: routerActions.push,
        selectRegion,
        selectCity,
        selectProvider,
        locationBack,
        close
    }, dispatch);
})
export default class Locator extends Component {
    static propTypes = {
        state: PropTypes.object.isRequired,
        location: PropTypes.string.isRequired,
        regions: PropTypes.array,
        push: PropTypes.func.isRequired,
        selectRegion: PropTypes.func.isRequired,
        selectCity: PropTypes.func.isRequired,
        selectProvider: PropTypes.func.isRequired,
        locationBack: PropTypes.func.isRequired,
        close: PropTypes.func.isRequired,
        browser: PropTypes.object.isRequired
    };

    selectRegion = (id) => {
        this.props.selectRegion(id, this.props.state);
    };

    selectCity = (id) => {
        this.props.selectCity(id, this.props.state);
    };

    selectProvider = (id) => {
        this.props.selectProvider(id, this.props.state);
    };

    locationBack = (event) => {
        event.preventDefault();
        this.props.locationBack(this.props.state);
    };

    close = (event) => {
        event.preventDefault();
        this.props.close();
    };

    render() {
        const { state, regions, browser } = this.props;
        const isMobile = [
            BreakPoints.phonePortrait.name,
            BreakPoints.phoneLandscape.name
        ].indexOf(browser.mediaType) !== -1;

        // Init
        const currentRegion = state.region ? regions.find((region) => {
            return region.id === state.region;
        }) : null;
        const currentCity = state.city ? currentRegion.cities.find((city) => {
            return city.id === state.city;
        }) : null;
        const currentProvider = state.provider ? currentCity.providers.find((provider) => {
            return provider.id === state.provider;
        }) : null;

        console.log(currentProvider);

        if (isMobile) {
            if (!state.locatorActive) {
                return null;
            }

            // Page id
            let pageId = '';
            if (state.region !== null && state.city === null) {
                pageId = 'regions';
            } else if (state.city !== null) {
                pageId = 'cities';
            } else if (state.provider !== null) {
                pageId = 'providers';
            }

            // Back
            const backButton = state.region ? () : null;

            // Title
            let title = '';
            if (state.region === null) {
                title = 'Выберите область';
            } else if (state.region !== null && state.city === null) {
                title = currentRegion.title.text;
            } else if (state.city !== null) {
                title = currentCity.title;
            }

            // List
            const listClass = cx({
                [Styles.listItems]: true,
                [Styles.operators]: state.city !== null
            });
            let list = [];
            if (state.region === null) {
                list = regions.map((region) => {
                    const total = region.cities.reduce((total, city) => {
                        return total + city.providers.length;
                    }, 0);

                    /* eslint-disable react/jsx-no-bind */
                    return (

 this.selectRegion(region.id) }>

                                { region.title.text }
                                { total }

                    );
                });
            } else if (state.city === null) {
                list = currentRegion.cities.map((city) => {
                    const total = city.providers.length;

                    /* eslint-disable react/jsx-no-bind */
                    return (

 this.selectCity(city.id) }>

                                { city.title }
                                { total }

                    );
                });
            } else {
                list = currentCity.providers.map((provider) => {
                    const itemClass = cx({
                        [Styles.opened]: state.provider === provider.id
                    });

                    const webSite = provider.website !== '' ? (
                        { provider.website }
                    ) : null;

                    const phones = provider.phones.map((phone) => {
                        const phoneNew = `+${phone.slice(0, 3)}
                    (${phone.slice(3, 5)})
                    ${phone.slice(5, 8)}
                    ${phone.slice(8, 10)}
                    ${phone.slice(10)}`;

                        return (

{ phoneNew }

                        );
                    });

                    const providerInfo = state.provider === provider.id ? (

                                { phones }

                            { webSite }

                    ) : null;

                    return (

 this.selectProvider(provider.id) }
                        >

                                { provider.title }

                            { providerInfo }

                    );
                });
            }

            // forward back
            const transitionForward = {
                enter: Styles.sliderEnter,
                enterActive: Styles.sliderEnterActive,
                leave: Styles.sliderLeave,
                leaveActive: Styles.sliderLeaveActive
            };
            // const transitionBack = {
            //     enter: Styles.sliderBackEnter,
            //     enterActive: Styles.sliderBackEnterActive,
            //     leave: Styles.sliderBackLeave,
            //     leaveActive: Styles.sliderBackLeaveActive
            // };

            return (

                        { backButton }

{ title }

                        <InlineSvg content={ SvgCloseIcon }/>

                    <CSSTransitionGroup
                        transitionEnterTimeout={ 200 }
                        transitionLeaveTimeout={ 200 }
                        transitionName={ transitionForward }
                        component="div"
                    >

                            { list }

                    </CSSTransitionGroup>

            );
        }

        // Title
        const title = state.region !== null ? `${currentRegion.title.text} область` : null;

        // City list
        const cityList = state.region !== null ? currentRegion.cities.map((city) => {
            const cityClass = cx({
                [Styles.selected]: state.city === city.id
            });

            /* eslint-disable react/jsx-no-bind */
            return (

 this.selectCity(city.id) }>
                    { city.title }

            );
        }) : null;

        // Provider list
        const providersList = state.region !== null ? currentCity.providers.map((provider) => {
            const providerClass = cx({
                [Styles.selected]: state.provider === provider.id
            });

            const webSite = provider.website !== '' ? (
                { provider.website }
            ) : null;

            const phones = provider.phones.map((phone) => {
                const phoneNew = `+${phone.slice(0, 3)}
                    (${phone.slice(3, 5)})
                    ${phone.slice(5, 8)}
                    ${phone.slice(8, 10)}
                    ${phone.slice(10)}`;

                return (

{ phoneNew }

                );
            });

            const phonesClass = cx({
                [Styles.withWebsite]: provider.website !== ''
            });

            const providerInfo = state.provider === provider.id ? (

                        { phones }

                    { webSite }

            ) : null;

            /* eslint-disable react/jsx-no-bind */
            return (

 this.selectProvider(provider.id) }>

{ provider.title }

                    { providerInfo }

            );
        }) : null;

        // Region popup
        const region = state.region !== null ? (

{ title }

                    { [
                        BreakPoints.tabletLandscape.name,
                        BreakPoints.desktop.name,
                        BreakPoints.desktopWide.name,
                        BreakPoints.desktopHD.name,
                        BreakPoints.desktopMega.name
                    ].indexOf(browser.mediaType) !== -1 ? (

Карта области

                    ) : null }

Города

Кабельные операторы

                    { [
                        BreakPoints.tabletLandscape.name,
                        BreakPoints.desktop.name,
                        BreakPoints.desktopWide.name,
                        BreakPoints.desktopHD.name,
                        BreakPoints.desktopMega.name
                    ].indexOf(browser.mediaType) !== -1 ? (

                    ) : null }

                        { cityList }

                        { providersList }

        ) : null;

        return (

                    <Country regions={ regions }/>

Выберите область

                        чтобы увидеть список операторов в доступных городах этой области

                { region }

        );
    }
}
<|endoftext|>


<commit_before>import React, { Fragment } from 'react'
import StringStackOption from '../options/StringStackOption'
import SelectStackOption from '../options/SelectStackOption'
import { readableInputLabel } from '../../utils/string'
import RangeStackOption from '../options/RangeStackOption'
import ColorStackOption from '../options/ColorStackOption'
import BooleanStackOption from '../options/BooleanStackOption'

const SORT_ORDERS = {
  integer: 4,
  number: 4,
  boolean: 3,
  string: 2,
  color: 2,
  default: 0
}

/**
 * Returns the type used for sorting
 * @param {String} name
 * @param {String} type
 * @param {Object} definition
 * @returns {Integer}
 */
function getSortOrder(name, { type, ...definition }) {
  if (name.includes('color')) {
    return SORT_ORDERS['color']
  }
  return SORT_ORDERS[type] || SORT_ORDERS['default']
}

export default function StackOperation({
  availableOperations = {},
  name,
  values,
  onChange = null,
  errors = {},
  ...props
}) {
  if (!availableOperations[name]) {
    return null
  }
  const { properties, required = [] } = availableOperations[name]

  const sortedProps = Object.keys(properties).sort(
    (a, b) => getSortOrder(b, properties[b]) - getSortOrder(a, properties[a])
  )

  const $rows = sortedProps.map(name => {
    const definition = properties[name]

    const operationProps = {
      key: name,
      label: readableInputLabel(name),
      name,
      definitions: definition,
      value: values[name],
      onChange,
      error: errors[name],
      required: required.includes(name)
    }

    if (Array.isArray(definition.values)) {
      return <SelectStackOption {...operationProps} />
    }
    if (name.includes('color')) {
      return <ColorStackOption {...operationProps} />
    }

    switch (definition.type) {
      case 'number':
      // fallthrough
      case 'integer':
        if (onChange) {
          return <RangeStackOption {...operationProps} />
        }
        return <StringStackOption {...operationProps} />
      case 'boolean':
        return <BooleanStackOption {...operationProps} />
      default:
        return <StringStackOption {...operationProps} />
    }
  })

  return <Fragment>{$rows}</Fragment>
}
<commit_msg>allow multiple types, take the first one for the stackoption component<commit_after>import React, { Fragment } from 'react'
import StringStackOption from '../options/StringStackOption'
import SelectStackOption from '../options/SelectStackOption'
import { readableInputLabel } from '../../utils/string'
import RangeStackOption from '../options/RangeStackOption'
import ColorStackOption from '../options/ColorStackOption'
import BooleanStackOption from '../options/BooleanStackOption'

const SORT_ORDERS = {
  integer: 4,
  number: 4,
  boolean: 3,
  string: 2,
  color: 2,
  default: 0
}

/**
 * Returns the type used for sorting
 * @param {String} name
 * @param {String} type
 * @param {Object} definition
 * @returns {Integer}
 */
function getSortOrder(name, { type, ...definition }) {
  if (name.includes('color')) {
    return SORT_ORDERS['color']
  }
  return SORT_ORDERS[type] || SORT_ORDERS['default']
}

export default function StackOperation({
  availableOperations = {},
  name,
  values,
  onChange = null,
  errors = {},
  ...props
}) {
  if (!availableOperations[name]) {
    return null
  }
  const { properties, required = [] } = availableOperations[name]

  const sortedProps = Object.keys(properties).sort(
    (a, b) => getSortOrder(b, properties[b]) - getSortOrder(a, properties[a])
  )

  const $rows = sortedProps.map(name => {
    const definition = properties[name]

    const operationProps = {
      key: name,
      label: readableInputLabel(name),
      name,
      definitions: definition,
      value: values[name],
      onChange,
      error: errors[name],
      required: required.includes(name)
    }

    if (Array.isArray(definition.values)) {
      return <SelectStackOption {...operationProps} />
    }
    if (name.includes('color')) {
      return <ColorStackOption {...operationProps} />
    }
    let type = definition.type
    // take the first one, if it's an array
    if (Array.isArray(definition.type)) {
      type = definition.type[0]
    }
    switch (type) {
      case 'number':
      // fallthrough
      case 'integer':
        if (onChange) {
          return <RangeStackOption {...operationProps} />
        }
        return <StringStackOption {...operationProps} />
      case 'boolean':
        return <BooleanStackOption {...operationProps} />
      default:
        return <StringStackOption {...operationProps} />
    }
  })

  return <Fragment>{$rows}</Fragment>
}
<|endoftext|>


<commit_before>/*
Copyright 2015, 2016 OpenMarket Ltd

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

'use strict';

var React = require('react');
var ReactDOM = require('react-dom');
var sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher');

module.exports = React.createClass({
    displayName: 'BottomLeftMenu',

    propTypes: {
        collapsed: React.PropTypes.bool.isRequired,
    },

    getInitialState: function() {
        return({
            directoryHover : false,
            roomsHover : false,
            homeHover: false,
            peopleHover : false,
            settingsHover : false,
        });
    },

    // Room events
    onDirectoryClick: function() {
        dis.dispatch({ action: 'view_room_directory' });
    },

    onDirectoryMouseEnter: function() {
        this.setState({ directoryHover: true });
    },

    onDirectoryMouseLeave: function() {
        this.setState({ directoryHover: false });
    },

    onRoomsClick: function() {
        dis.dispatch({ action: 'view_create_room' });
    },

    onRoomsMouseEnter: function() {
        this.setState({ roomsHover: true });
    },

    onRoomsMouseLeave: function() {
        this.setState({ roomsHover: false });
    },

    // Home button events
    onHomeClick: function() {
        dis.dispatch({ action: 'view_home_page' });
    },

    onHomeMouseEnter: function() {
        this.setState({ homeHover: true });
    },

    onHomeMouseLeave: function() {
        this.setState({ homeHover: false });
    },

    // People events
    onPeopleClick: function() {
        dis.dispatch({ action: 'view_create_chat' });
    },

    onPeopleMouseEnter: function() {
        this.setState({ peopleHover: true });
    },

    onPeopleMouseLeave: function() {
        this.setState({ peopleHover: false });
    },

    // Settings events
    onSettingsClick: function() {
        dis.dispatch({ action: 'view_user_settings' });
    },

    onSettingsMouseEnter: function() {
        this.setState({ settingsHover: true });
    },

    onSettingsMouseLeave: function() {
        this.setState({ settingsHover: false });
    },

    // Get the label/tooltip to show
    getLabel: function(label, show) {
        if (show) {
            var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
            return <RoomTooltip className="mx_BottomLeftMenu_tooltip" label={label} />;
        }
    },

    render: function() {
        var TintableSvg = sdk.getComponent('elements.TintableSvg');

        var homeButton;
        if (window.localStorage.getItem('mx_team_token')) {
            homeButton = (

                    <TintableSvg src="img/icons-home.svg" width="25" height="25" />
                    { this.getLabel("Welcome page", this.state.homeHover) }

            );
        }

        return (

                    { homeButton }

                        <TintableSvg src="img/icons-people.svg" width="25" height="25" />
                        { this.getLabel("Start chat", this.state.peopleHover) }

                        <TintableSvg src="img/icons-directory.svg" width="25" height="25"/>
                        { this.getLabel("Room directory", this.state.directoryHover) }

                        <TintableSvg src="img/icons-create-room.svg" width="25" height="25" />
                        { this.getLabel("Create new room", this.state.roomsHover) }

                        <TintableSvg src="img/icons-settings.svg" width="25" height="25" />
                        { this.getLabel("Settings", this.state.settingsHover) }

        );
    }
});
<commit_msg>Set team token in state on mount<commit_after>/*
Copyright 2015, 2016 OpenMarket Ltd

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

'use strict';

var React = require('react');
var ReactDOM = require('react-dom');
var sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher');

module.exports = React.createClass({
    displayName: 'BottomLeftMenu',

    propTypes: {
        collapsed: React.PropTypes.bool.isRequired,
    },

    getInitialState: function() {
        return({
            directoryHover : false,
            roomsHover : false,
            homeHover: false,
            peopleHover : false,
            settingsHover : false,
            teamToken: null,
        });
    },

    componentWillMount: function() {
        this.teamToken = window.localStorage.getItem('mx_team_token');
    },

    // Room events
    onDirectoryClick: function() {
        dis.dispatch({ action: 'view_room_directory' });
    },

    onDirectoryMouseEnter: function() {
        this.setState({ directoryHover: true });
    },

    onDirectoryMouseLeave: function() {
        this.setState({ directoryHover: false });
    },

    onRoomsClick: function() {
        dis.dispatch({ action: 'view_create_room' });
    },

    onRoomsMouseEnter: function() {
        this.setState({ roomsHover: true });
    },

    onRoomsMouseLeave: function() {
        this.setState({ roomsHover: false });
    },

    // Home button events
    onHomeClick: function() {
        dis.dispatch({ action: 'view_home_page' });
    },

    onHomeMouseEnter: function() {
        this.setState({ homeHover: true });
    },

    onHomeMouseLeave: function() {
        this.setState({ homeHover: false });
    },

    // People events
    onPeopleClick: function() {
        dis.dispatch({ action: 'view_create_chat' });
    },

    onPeopleMouseEnter: function() {
        this.setState({ peopleHover: true });
    },

    onPeopleMouseLeave: function() {
        this.setState({ peopleHover: false });
    },

    // Settings events
    onSettingsClick: function() {
        dis.dispatch({ action: 'view_user_settings' });
    },

    onSettingsMouseEnter: function() {
        this.setState({ settingsHover: true });
    },

    onSettingsMouseLeave: function() {
        this.setState({ settingsHover: false });
    },

    // Get the label/tooltip to show
    getLabel: function(label, show) {
        if (show) {
            var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
            return <RoomTooltip className="mx_BottomLeftMenu_tooltip" label={label} />;
        }
    },

    render: function() {
        var TintableSvg = sdk.getComponent('elements.TintableSvg');

        var homeButton;
        if (this.state.teamToken) {
            homeButton = (

                    <TintableSvg src="img/icons-home.svg" width="25" height="25" />
                    { this.getLabel("Welcome page", this.state.homeHover) }

            );
        }

        return (

                    { homeButton }

                        <TintableSvg src="img/icons-people.svg" width="25" height="25" />
                        { this.getLabel("Start chat", this.state.peopleHover) }

                        <TintableSvg src="img/icons-directory.svg" width="25" height="25"/>
                        { this.getLabel("Room directory", this.state.directoryHover) }

                        <TintableSvg src="img/icons-create-room.svg" width="25" height="25" />
                        { this.getLabel("Create new room", this.state.roomsHover) }

                        <TintableSvg src="img/icons-settings.svg" width="25" height="25" />
                        { this.getLabel("Settings", this.state.settingsHover) }

        );
    }
});
<|endoftext|>


<commit_before>import React from 'react'
import 'spectrum-colorpicker'
import 'spectrum-colorpicker/spectrum.css'
import DropdownList from 'react-widgets/lib/DropdownList'
import './index.less'
export default React.createClass({
  componentDidMount() {
    $("#sp-border-colorpicker").spectrum({
      color: this.props.currentStyle.borderColor,
      showAlpha: true,
      showInput: true,
      allowEmpty: true,
      preferredFormat: 'rgb',
      change: (tinycolor) => {
        this.props.updateStyle({borderColor: tinycolor && tinycolor.toRgbString()})
      },
    })
  },
  componentDidUpdate: function () {
    $("#sp-border-colorpicker").spectrum("set", this.props.currentStyle.borderColor)
  },
  parseBorder: function () {
    let border = {
      width: {components: []},
      style: this.props.currentStyle.borderStyle
    }
    try {
      let widthComponentsRaw = this.props.currentStyle.borderWidth.split(' ')
      border.width.components = widthComponentsRaw.map((e, i)=> {
        let lengthMatch = e.match(/(\d+)(\w+)/)
        if (lengthMatch) {
          return {
            length: parseInt(lengthMatch[1]),
            uom: lengthMatch[2]
          }
        }
        else {
          return e
        }
      })
    }
    catch (ex) {
    }

    return border
  },
  composeBorder: function (parsedBorder) {
    let borderStyleObject = {borderStyle: parsedBorder.style}
    try {
      borderStyleObject.borderWidth = parsedBorder.width.components.reduce((pv, cv, ci)=> {
        return pv + ' ' + ((typeof cv == 'string') ? cv : (cv.length + cv.uom))
      }, '').trim()
    }
    catch (ex) {
    }
    return borderStyleObject
  },
  onChangeStyle: function (newStyle) {
    let border = this.parseBorder()
    border.style = newStyle
    this.props.updateStyle(this.composeBorder(border))
  },
  onChangeWidthComponentCnt: function (newCnt) {
    let border = this.parseBorder()
    let diff = newCnt - border.width.components.length
    if (diff > 0) {
      let i = 0
      while (i < diff) {
        border.width.components.push({length: 0, uom: 'px'})
        i++
      }
    }
    else {
      border.width.components.splice(newCnt, -diff)
    }
    this.props.updateStyle(this.composeBorder(border))
  },
  onChangeWidthComponent: function (i, prop, newVal) {
    let border = this.parseBorder()
    border.width.components[i][prop] = (newVal instanceof Object) ? newVal.target.value : newVal
    this.props.updateStyle(this.composeBorder(border))
  },
  render: function () {
    let border = this.parseBorder()
    let borderWidthComponents = border.width.components && border.width.components.map((e, i)=> {
        return

          <input value={e.length}
                 size={1}
                 onChange={this.onChangeWidthComponent.bind(null, i, 'length')
                 }/>
          <DropdownList data={['px', 'em']}
                        value={e.uom}
                        onChange={this.onChangeWidthComponent.bind(null, i, 'uom')}
          />

      })
    return

Width:

          <DropdownList data={[1, 2, 3, 4]}
                        value={border.width.components && border.width.components.length}
                        onChange={this.onChangeWidthComponentCnt}
          /> components

          {borderWidthComponents}

Style:

          <DropdownList
            data={['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']}
            value={border.style}
            onChange={this.onChangeStyle}
            className="sp-style-dropdown"
          />

Color:

          <input id='sp-border-colorpicker'/>

  }
})
<commit_msg>allow set border radius<commit_after>import React from 'react'
import 'spectrum-colorpicker'
import 'spectrum-colorpicker/spectrum.css'
import DropdownList from 'react-widgets/lib/DropdownList'
import './index.less'
export default React.createClass({
  componentDidMount() {
    $("#sp-border-colorpicker").spectrum({
      color: this.props.currentStyle.borderColor,
      showAlpha: true,
      showInput: true,
      allowEmpty: true,
      preferredFormat: 'rgb',
      change: (tinycolor) => {
        this.props.updateStyle({borderColor: tinycolor && tinycolor.toRgbString()})
      },
    })
  },
  componentDidUpdate: function () {
    $("#sp-border-colorpicker").spectrum("set", this.props.currentStyle.borderColor)
  },
  parseBorder: function () {
    let border = {
      width: {components: []},
      style: this.props.currentStyle.borderStyle,
      radius: {components: []}
    }
    try {
      let widthComponentsRaw = this.props.currentStyle.borderWidth.split(' ')
      border.width.components = widthComponentsRaw.map((e, i)=> {
        let lengthMatch = e.match(/(\d+)(\w+)/)
        if (lengthMatch) {
          return {
            length: parseInt(lengthMatch[1]),
            uom: lengthMatch[2]
          }
        }
        else {
          return e
        }
      })
    }
    catch (ex) {
    }
    try {
      let radiusComponentsRaw = this.props.currentStyle.borderRadius.split(' ')
      border.radius.components = radiusComponentsRaw.map((e, i)=> {
        let lengthMatch = e.match(/(\d+)(\w+)/)
        if (lengthMatch) {
          return {
            length: parseInt(lengthMatch[1]),
            uom: lengthMatch[2]
          }
        }
        else {
          return e
        }
      })
    }
    catch (ex) {
    }

    return border
  },
  composeBorder: function (parsedBorder) {
    let borderStyleObject = {borderStyle: parsedBorder.style}
    try {
      borderStyleObject.borderWidth = parsedBorder.width.components.reduce((pv, cv, ci)=> {
        return pv + ' ' + ((typeof cv == 'string') ? cv : (cv.length + cv.uom))
      }, '').trim()
    }
    catch (ex) {
    }
    try {
      borderStyleObject.borderRadius = parsedBorder.radius.components.reduce((pv, cv)=> {
        return pv + ' ' + ((typeof cv == 'string') ? cv : (cv.length + cv.uom))
      }, '').trim()
    }
    catch (ex) {
    }
    return borderStyleObject
  },
  onChangeStyle: function (newStyle) {
    let border = this.parseBorder()
    border.style = newStyle
    this.props.updateStyle(this.composeBorder(border))
  },
  onChangeWidthComponentCnt: function (newCnt) {
    let border = this.parseBorder()
    let diff = newCnt - border.width.components.length
    if (diff > 0) {
      let i = 0
      while (i < diff) {
        border.width.components.push({length: 0, uom: 'px'})
        i++
      }
    }
    else {
      border.width.components.splice(newCnt, -diff)
    }
    this.props.updateStyle(this.composeBorder(border))
  },
  onChangeWidthComponent: function (i, prop, newVal) {
    let border = this.parseBorder()
    border.width.components[i][prop] = (newVal instanceof Object) ? newVal.target.value : newVal
    this.props.updateStyle(this.composeBorder(border))
  },
  onChangeRadiusComponentCnt: function (newCnt) {
    let border = this.parseBorder()
    let diff = newCnt - border.radius.components.length
    if (diff > 0) {
      let i = 0
      while (i < diff) {
        border.radius.components.push({length: 0, uom: 'px'})
        i++
      }
    }
    else {
      border.radius.components.splice(newCnt, -diff)
    }
    this.props.updateStyle(this.composeBorder(border))
  },
  onChangeRadiusComponent: function (i, prop, newVal) {
    let border = this.parseBorder()
    border.radius.components[i][prop] = (newVal instanceof Object) ? newVal.target.value : newVal
    this.props.updateStyle(this.composeBorder(border))
  },
  render: function () {
    let border = this.parseBorder()
    let borderWidthComponents = border.width.components && border.width.components.map((e, i)=> {
        return

          <input value={e.length}
                 size={1}
                 onChange={this.onChangeWidthComponent.bind(null, i, 'length')
                 }/>
          <DropdownList data={['px', 'em']}
                        value={e.uom}
                        onChange={this.onChangeWidthComponent.bind(null, i, 'uom')}
          />

      })
    let borderRadiusComponents = border.radius.components && border.radius.components.map((e, i)=> {
        return

          <input value={e.length}
                 size={1}
                 onChange={this.onChangeRadiusComponent.bind(null, i, 'length')
                 }/>
          <DropdownList data={['px', 'em', '%']}
                        value={e.uom}
                        onChange={this.onChangeRadiusComponent.bind(null, i, 'uom')}
          />

      })
    return

Width:

          <DropdownList data={[1, 2, 3, 4]}
                        value={border.width.components && border.width.components.length}
                        onChange={this.onChangeWidthComponentCnt}
          /> components

          {borderWidthComponents}

Style:

          <DropdownList
            data={['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset']}
            value={border.style}
            onChange={this.onChangeStyle}
            className="sp-style-dropdown"
          />

Color:

          <input id='sp-border-colorpicker'/>

Radius:

          <DropdownList data={[1, 2, 3, 4]}
                        value={border.radius.components && border.radius.components.length}
                        onChange={this.onChangeRadiusComponentCnt}
          /> components

          {borderRadiusComponents}

  }
})
<|endoftext|>


<commit_before>import React from 'react';
import classNames from 'classnames';
import TableCell from './../table-cell';
import TableHeader from './../table-header';
import Checkbox from './../../checkbox';
import guid from './../../../utils/helpers/guid';
import { validProps } from '../../../utils/ether';
import WithDragAndDrop from './../../with-drag-and-drop';

/**
 * A TableRow widget.
 *
 * == How to use a TableRow in a component:
 *
 * See documentation for Table component.
 *
 * If you add an onClick event to a Table Row, will display the cursor as a pointer
 * when hovering over the row.
 *
 * @class TableRow
 * @constructor
 */
class TableRow extends React.Component {

  static propTypes = {
    /**
     * Enables multi-selectable table rows.
     *
     * @property selectable
     * @type {Boolean}
     */
    selectable: React.PropTypes.bool,

    /**
     * Enables highlightable table rows.
     *
     * @property highlightable
     * @type {Boolean}
     */
    highlightable: React.PropTypes.bool,

    /**
     * Allows developers to manually control selected state for the row.
     *
     * @property selected
     * @type {Boolean}
     */
    selected: React.PropTypes.bool,

    /**
     * Allows developers to manually control highlighted state for the row.
     *
     * @property highlighted
     * @type {Boolean}
     */
    highlighted: React.PropTypes.bool,

    /**
     * Define a unique ID so the table can track the row (useful for highlightable or selectable rows).
     *
     * @property uniqueID
     * @type {String}
     */
    uniqueID: React.PropTypes.string,

    /**
     * What the row should be displayed as, set to 'header' to display as header
     *
     * @property as
     * @type {String}
     */
    as: React.PropTypes.string,

    /**
     * Whether to hide the multiSelect
     *
     * @property hideMultiSelect
     * @type {Boolean}
     */
    hideMultiSelect: React.PropTypes.bool,

    /**
     * Whether to select all
     *
     * @property selectAll
     * @type {Boolean}
     */
    selectAll: React.PropTypes.bool,

    /**
     * Callback for when a row is highlighted
     * @property onHighlight
     * @type {Function}
     */
    onHighlight: React.PropTypes.func,

    /**
     * Callback for when a row is selected
     * @property onSelect
     * @type {Function}
     */
    onSelect: React.PropTypes.func
  }

  /**
   * Sort handler passed from table context
   *
   * @property onSort
   * @type {Function}
   */
  static contextTypes = {
    attachToTable: React.PropTypes.func, // attach the row to the table
    detachFromTable: React.PropTypes.func, // detach the row from the table
    checkSelection: React.PropTypes.func, // a function to check if the row is currently selected
    highlightRow: React.PropTypes.func, // highlights the row
    selectAll: React.PropTypes.func, // a callback function for when all visible rows are selected
    highlightable: React.PropTypes.bool, // table can enable all rows to be highlightable
    selectable: React.PropTypes.bool, // table can enable all rows to be multi-selectable
    selectRow: React.PropTypes.func, // a callback function for when a row is selected
    dragDropManager: React.PropTypes.object,
    moveItem: React.PropTypes.func
  }

  state = {
    /**
     * Internal state to track if the row is currently highlighted.
     *
     * @property highlighted
     * @type {Boolean}
     * @default false
     */
    highlighted: false,

    /**
     * Internal state to track if the row is currently selected.
     *
     * @property selected
     * @type {Boolean}
     * @default false
     */
    selected: false
  }

  /**
   * @method componentWillMount
   * @return {Void}
   */
  componentWillMount() {
    if (this.context.dragDropManager) {
      if (typeof this.props.index === 'undefined') {
        throw new Error('You need to provide an index for rows that are draggable');
      }
    }

    if (this.requiresUniqueID && !this.props.uniqueID) {
      throw new Error("A TableRow which is selectable or highlightable should provide a uniqueID.");
    }

    if (this.context.attachToTable && this.props.uniqueID && !this.props.selectAll && !this.isHeader) {
      // generate row id
      this.rowID = guid();
      // only attach to the table if we have a unique id
      this.context.attachToTable(this.rowID, this);
      // also check if row is already selected/highlighted
      this.context.checkSelection(this.props.uniqueID, this);
    }

    if (this.props.selected) {
      // if developer is controlling selected state - set it
      this.setState({ selected: true });
    }

    if (this.props.highlighted) {
      // if developer is controlling highlighted state - set it
      this.setState({ highlighted: true });
    }
  }

  /**
   * @method componentWillUnmount
   * @return {Void}
   */
  componentWillUnmount() {
    if (this.context.detachFromTable) {
      this.context.detachFromTable(this.rowID);
    }
  }

  /**
   * @method componentWillReceiveProps
   * @return {Void}
   */
  componentWillReceiveProps(nextProps) {
    if (this.props.uniqueID != nextProps.uniqueID) {
      // if unique id has changed, check if the table has the new id as selected or not
      this.context.checkSelection(nextProps.uniqueID, this);
    }

    if (this.props.selected != nextProps.selected) {
      // if developer is controlling selected state - set it
      this.setState({ selected: nextProps.selected });
    }

    if (this.props.highlighted != nextProps.highlighted) {
      // if developer is controlling highlighted state - set it
      this.setState({ highlighted: nextProps.highlighted });
    }
  }

  /**
   * Call the selectAll callback.
   *
   * @method onSelectAll
   * @return {Void}
   */
  onSelectAll = () => {
    this.context.selectAll(this);
  }

  /**
   * Call the selectRow callback and call any custom event the developer may have set.
   *
   * @method onRowClick
   * @return {Void}
   */
  onRowClick = (...args) => {
    if (this.props.onHighlight) {
      // trigger onHighlight callback if defined
      this.props.onHighlight(this.props.uniqueID, !this.state.highlighted, this);
    } else {
      // trigger highlightRow method on the table
      this.context.highlightRow(this.props.uniqueID, this);
    }

    // trigger any custom onClick event the developer may have set
    if (this.props.onClick) { this.props.onClick(...args); }
  }

  /**
   * Call the selectRow callback.
   *
   * @method onSelect
   * @return {Void}
   */
  onSelect = (ev) => {
    if (this.props.onSelect) {
      // trigger onSelect callback if defined
      this.props.onSelect(this.props.uniqueID, ev.target.value, this);
    } else {
      // trigger selectRow method on the table
      this.context.selectRow(this.props.uniqueID, this, !this.state.selected);
    }
  }

  /**
   * Classes to be applied to the table row component
   *
   * @method mainClasses Main Class getter
   */
  get mainClasses() {
    return classNames(
      'carbon-table-row',
      this.props.className, {
        'carbon-table-row--clickable': this.props.onClick || this.props.highlightable || this.context.highlightable,
        'carbon-table-row--selected': this.state.selected,
        'carbon-table-row--highlighted': (this.state.highlighted && !this.state.selected)
      }
    );
  }

  /**
   * Sets additional props to the row.
   *
   * @method rowProps
   * @return {Object}
   */
  get rowProps() {
    let { ...props } = validProps(this);

    props.className = this.mainClasses;

    if (this.context.highlightable || this.props.highlightable) {
      props.onClick = this.onRowClick;
    }

    return props;
  }

  /**
   * Determines if the developer has flagged this row as a header.
   *
   * @method isHeader
   * @return {Boolean}
   */
  get isHeader() {
    return this.props.as === "header";
  }

  /**
   * Determines what kind of cell to render for the checkbox.
   *
   * @method multiSelectCell
   * @return {Object} JSX
   */
  get multiSelectCell() {
    // renders a TableHeader if row is flagged as a header.
    let cell = this.isHeader ? TableHeader : TableCell;

    return React.createElement(cell, {
      key: "select", className: "carbon-table-cell--select"
    }, this.multiSelect);
  }

  /**
   * Returns the checkbox for the select action.
   *
   * @method multiSelect
   * @return {Object} JSX
   */
  get multiSelect() {
    if (this.props.hideMultiSelect) { return null; }

    // determines which action to use (multi-select or select-all)
    let action = (this.props.selectAll || this.isHeader) ? this.onSelectAll : this.onSelect;

    return <Checkbox onClick={ (ev) => ev.stopPropagation() } onChange={ action } checked={ this.state.selected } />;
  }

  /**
   * Determines if the row should have a multi select column.
   *
   * @method shouldHaveMultiSelectColumn
   * @return {Boolean}
   */
  get shouldHaveMultiSelectColumn() {
    // if component specifically disables selectable, don't put the cell in
    if (this.props.selectable !== false) {
      // if multi-seletable, add the checkbox cell
      if (this.props.selectAll || this.context.selectable || this.props.selectable) {
        return true;
      }
    }

    return false;
  }

  /**
   * Determines if the row requires a unique ID.
   *
   * @method requiresUniqueID
   * @return {Boolean}
   */
  get requiresUniqueID() {
    let highlightable = this.props.highlightable !== false && (this.props.highlightable || this.context.highlightable),
        selectable = this.props.selectable !== false && (this.props.selectable || this.context.selectable);

    return highlightable || selectable;
  }

  /**
   * Renders the component
   *
   * @method render
   */
  render() {
    let content = [this.props.children];

    if (this.shouldHaveMultiSelectColumn) {
      content.unshift(this.multiSelectCell);
    }

    if (this.context.dragDropManager) {
      console.log('**** TableRow.render() ****');
      console.log(this.context.moveItem);
      console.log(this.rowProps);
      console.log(content);
      console.log('this.props.index: ' + this.props.index);
      return (
        <WithDragAndDrop moveItem={ this.context.moveItem } index={ this.props.index }>
          <tr { ...this.rowProps }>
            { content }
          </tr>
        </WithDragAndDrop>
      );
    } else {
      return (
        <tr { ...this.rowProps }>
          { content }
        </tr>
      );
    }

  }

}

export default TableRow;
<commit_msg>Removed console statements<commit_after>import React from 'react';
import classNames from 'classnames';
import TableCell from './../table-cell';
import TableHeader from './../table-header';
import Checkbox from './../../checkbox';
import guid from './../../../utils/helpers/guid';
import { validProps } from '../../../utils/ether';
import WithDragAndDrop from './../../with-drag-and-drop';

/**
 * A TableRow widget.
 *
 * == How to use a TableRow in a component:
 *
 * See documentation for Table component.
 *
 * If you add an onClick event to a Table Row, will display the cursor as a pointer
 * when hovering over the row.
 *
 * @class TableRow
 * @constructor
 */
class TableRow extends React.Component {

  static propTypes = {
    /**
     * Enables multi-selectable table rows.
     *
     * @property selectable
     * @type {Boolean}
     */
    selectable: React.PropTypes.bool,

    /**
     * Enables highlightable table rows.
     *
     * @property highlightable
     * @type {Boolean}
     */
    highlightable: React.PropTypes.bool,

    /**
     * Allows developers to manually control selected state for the row.
     *
     * @property selected
     * @type {Boolean}
     */
    selected: React.PropTypes.bool,

    /**
     * Allows developers to manually control highlighted state for the row.
     *
     * @property highlighted
     * @type {Boolean}
     */
    highlighted: React.PropTypes.bool,

    /**
     * Define a unique ID so the table can track the row (useful for highlightable or selectable rows).
     *
     * @property uniqueID
     * @type {String}
     */
    uniqueID: React.PropTypes.string,

    /**
     * What the row should be displayed as, set to 'header' to display as header
     *
     * @property as
     * @type {String}
     */
    as: React.PropTypes.string,

    /**
     * Whether to hide the multiSelect
     *
     * @property hideMultiSelect
     * @type {Boolean}
     */
    hideMultiSelect: React.PropTypes.bool,

    /**
     * Whether to select all
     *
     * @property selectAll
     * @type {Boolean}
     */
    selectAll: React.PropTypes.bool,

    /**
     * Callback for when a row is highlighted
     * @property onHighlight
     * @type {Function}
     */
    onHighlight: React.PropTypes.func,

    /**
     * Callback for when a row is selected
     * @property onSelect
     * @type {Function}
     */
    onSelect: React.PropTypes.func
  }

  /**
   * Sort handler passed from table context
   *
   * @property onSort
   * @type {Function}
   */
  static contextTypes = {
    attachToTable: React.PropTypes.func, // attach the row to the table
    detachFromTable: React.PropTypes.func, // detach the row from the table
    checkSelection: React.PropTypes.func, // a function to check if the row is currently selected
    highlightRow: React.PropTypes.func, // highlights the row
    selectAll: React.PropTypes.func, // a callback function for when all visible rows are selected
    highlightable: React.PropTypes.bool, // table can enable all rows to be highlightable
    selectable: React.PropTypes.bool, // table can enable all rows to be multi-selectable
    selectRow: React.PropTypes.func, // a callback function for when a row is selected
    dragDropManager: React.PropTypes.object,
    moveItem: React.PropTypes.func
  }

  state = {
    /**
     * Internal state to track if the row is currently highlighted.
     *
     * @property highlighted
     * @type {Boolean}
     * @default false
     */
    highlighted: false,

    /**
     * Internal state to track if the row is currently selected.
     *
     * @property selected
     * @type {Boolean}
     * @default false
     */
    selected: false
  }

  /**
   * @method componentWillMount
   * @return {Void}
   */
  componentWillMount() {
    if (this.context.dragDropManager) {
      if (typeof this.props.index === 'undefined') {
        throw new Error('You need to provide an index for rows that are draggable');
      }
    }

    if (this.requiresUniqueID && !this.props.uniqueID) {
      throw new Error("A TableRow which is selectable or highlightable should provide a uniqueID.");
    }

    if (this.context.attachToTable && this.props.uniqueID && !this.props.selectAll && !this.isHeader) {
      // generate row id
      this.rowID = guid();
      // only attach to the table if we have a unique id
      this.context.attachToTable(this.rowID, this);
      // also check if row is already selected/highlighted
      this.context.checkSelection(this.props.uniqueID, this);
    }

    if (this.props.selected) {
      // if developer is controlling selected state - set it
      this.setState({ selected: true });
    }

    if (this.props.highlighted) {
      // if developer is controlling highlighted state - set it
      this.setState({ highlighted: true });
    }
  }

  /**
   * @method componentWillUnmount
   * @return {Void}
   */
  componentWillUnmount() {
    if (this.context.detachFromTable) {
      this.context.detachFromTable(this.rowID);
    }
  }

  /**
   * @method componentWillReceiveProps
   * @return {Void}
   */
  componentWillReceiveProps(nextProps) {
    if (this.props.uniqueID != nextProps.uniqueID) {
      // if unique id has changed, check if the table has the new id as selected or not
      this.context.checkSelection(nextProps.uniqueID, this);
    }

    if (this.props.selected != nextProps.selected) {
      // if developer is controlling selected state - set it
      this.setState({ selected: nextProps.selected });
    }

    if (this.props.highlighted != nextProps.highlighted) {
      // if developer is controlling highlighted state - set it
      this.setState({ highlighted: nextProps.highlighted });
    }
  }

  /**
   * Call the selectAll callback.
   *
   * @method onSelectAll
   * @return {Void}
   */
  onSelectAll = () => {
    this.context.selectAll(this);
  }

  /**
   * Call the selectRow callback and call any custom event the developer may have set.
   *
   * @method onRowClick
   * @return {Void}
   */
  onRowClick = (...args) => {
    if (this.props.onHighlight) {
      // trigger onHighlight callback if defined
      this.props.onHighlight(this.props.uniqueID, !this.state.highlighted, this);
    } else {
      // trigger highlightRow method on the table
      this.context.highlightRow(this.props.uniqueID, this);
    }

    // trigger any custom onClick event the developer may have set
    if (this.props.onClick) { this.props.onClick(...args); }
  }

  /**
   * Call the selectRow callback.
   *
   * @method onSelect
   * @return {Void}
   */
  onSelect = (ev) => {
    if (this.props.onSelect) {
      // trigger onSelect callback if defined
      this.props.onSelect(this.props.uniqueID, ev.target.value, this);
    } else {
      // trigger selectRow method on the table
      this.context.selectRow(this.props.uniqueID, this, !this.state.selected);
    }
  }

  /**
   * Classes to be applied to the table row component
   *
   * @method mainClasses Main Class getter
   */
  get mainClasses() {
    return classNames(
      'carbon-table-row',
      this.props.className, {
        'carbon-table-row--clickable': this.props.onClick || this.props.highlightable || this.context.highlightable,
        'carbon-table-row--selected': this.state.selected,
        'carbon-table-row--highlighted': (this.state.highlighted && !this.state.selected)
      }
    );
  }

  /**
   * Sets additional props to the row.
   *
   * @method rowProps
   * @return {Object}
   */
  get rowProps() {
    let { ...props } = validProps(this);

    props.className = this.mainClasses;

    if (this.context.highlightable || this.props.highlightable) {
      props.onClick = this.onRowClick;
    }

    return props;
  }

  /**
   * Determines if the developer has flagged this row as a header.
   *
   * @method isHeader
   * @return {Boolean}
   */
  get isHeader() {
    return this.props.as === "header";
  }

  /**
   * Determines what kind of cell to render for the checkbox.
   *
   * @method multiSelectCell
   * @return {Object} JSX
   */
  get multiSelectCell() {
    // renders a TableHeader if row is flagged as a header.
    let cell = this.isHeader ? TableHeader : TableCell;

    return React.createElement(cell, {
      key: "select", className: "carbon-table-cell--select"
    }, this.multiSelect);
  }

  /**
   * Returns the checkbox for the select action.
   *
   * @method multiSelect
   * @return {Object} JSX
   */
  get multiSelect() {
    if (this.props.hideMultiSelect) { return null; }

    // determines which action to use (multi-select or select-all)
    let action = (this.props.selectAll || this.isHeader) ? this.onSelectAll : this.onSelect;

    return <Checkbox onClick={ (ev) => ev.stopPropagation() } onChange={ action } checked={ this.state.selected } />;
  }

  /**
   * Determines if the row should have a multi select column.
   *
   * @method shouldHaveMultiSelectColumn
   * @return {Boolean}
   */
  get shouldHaveMultiSelectColumn() {
    // if component specifically disables selectable, don't put the cell in
    if (this.props.selectable !== false) {
      // if multi-seletable, add the checkbox cell
      if (this.props.selectAll || this.context.selectable || this.props.selectable) {
        return true;
      }
    }

    return false;
  }

  /**
   * Determines if the row requires a unique ID.
   *
   * @method requiresUniqueID
   * @return {Boolean}
   */
  get requiresUniqueID() {
    let highlightable = this.props.highlightable !== false && (this.props.highlightable || this.context.highlightable),
        selectable = this.props.selectable !== false && (this.props.selectable || this.context.selectable);

    return highlightable || selectable;
  }

  /**
   * Renders the component
   *
   * @method render
   */
  render() {
    let content = [this.props.children];

    if (this.shouldHaveMultiSelectColumn) {
      content.unshift(this.multiSelectCell);
    }

    if (this.context.dragDropManager) {
      return (
        <WithDragAndDrop moveItem={ this.context.moveItem } index={ this.props.index }>
          <tr { ...this.rowProps }>
            { content }
          </tr>
        </WithDragAndDrop>
      );
    } else {
      return (
        <tr { ...this.rowProps }>
          { content }
        </tr>
      );
    }

  }

}

export default TableRow;
<|endoftext|>


<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { _t } from '../../../languageHandler';

function AppWarning(props) {
    return (

                {props.errorMsg}

    );
}

AppWarning.propTypes = {
    errorMsg: PropTypes.string,
};
AppWarning.defaultProps = {
    errorMsg: _t('Error'),
};

export default AppWarning;
<commit_msg>Fix invalid translation<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { _t } from '../../../languageHandler';

function AppWarning(props) {
    return (

                {props.errorMsg}

    );
}

AppWarning.propTypes = {
    errorMsg: PropTypes.string,
};
AppWarning.defaultProps = {
    errorMsg: 'Error',
};

export default AppWarning;
<|endoftext|>


<commit_before>/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 New Vector Ltd

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { _t } from '../../../languageHandler';
import Widgets from '../../../utils/widgets';
import AppTile from '../elements/AppTile';
import ContextualMenu from '../../structures/ContextualMenu';
import MatrixClientPeg from '../../../MatrixClientPeg';
import Modal from '../../../Modal';
import sdk from '../../../index';
import SdkConfig from '../../../SdkConfig';
import ScalarAuthClient from '../../../ScalarAuthClient';
import dis from '../../../dispatcher';

const widgetType = 'm.stickerpicker';

export default class Stickerpicker extends React.Component {
    constructor(props) {
        super(props);
        this._onShowStickersClick = this._onShowStickersClick.bind(this);
        this._onHideStickersClick = this._onHideStickersClick.bind(this);
        this._launchManageIntegrations = this._launchManageIntegrations.bind(this);
        this._removeStickerpickerWidgets = this._removeStickerpickerWidgets.bind(this);
        this._onWidgetAction = this._onWidgetAction.bind(this);
        this.onFinished = this.onFinished.bind(this);

        this.defaultStickersContent = (

{ _t("You don't currently have any stickerpacks enabled") }

{ _t("Click") }  { _t("here") } { _t("to add some!") }

        );
        this.popoverWidth = 300;
        this.popoverHeight = 300;

        this.state = {
            stickersContent: this.defaultStickersContent,
            showStickers: false,
            imError: null,
        };
    }

    _removeStickerpickerWidgets() {
        console.warn('Removing Stickerpicker widgets');
        if (this.widgetId) {
            this.scalarClient.disableWidgetAssets(widgetType, this.widgetId).then(() => {
                console.warn('Assets disabled');
            }).catch((err) => {
                console.error('Failed to disable assets');
            });
        } else {
            console.warn('No widget ID specified, not disabling assets');
        }
        Widgets.removeStickerpickerWidgets();
        this._getStickerPickerWidget();
        // Wrap this in a timeout in order to avoid the DOM node from being pulled from under its feet
        setTimeout(() => this.stickersMenu.close());
    }

    componentDidMount() {
        this.scalarClient = null;
        if (SdkConfig.get().integrations_ui_url && SdkConfig.get().integrations_rest_url) {
            this.scalarClient = new ScalarAuthClient();
            this.scalarClient.connect().then(() => {
                this.forceUpdate();
            }).catch((e) => {
                this._imError("Failed to connect to integrations server", e);
            });
        }

        if (!this.state.imError) {
            this._getStickerPickerWidget();
            this.dispatcherRef = dis.register(this._onWidgetAction);
        }
    }

    componentWillUnmount() {
        dis.unregister(this.dispatcherRef);
    }

    _imError(errorMsg, e) {
        console.error(errorMsg, e);
        const imErrorContent =

 { errorMsg }

;
        this.setState({
            showStickers: false,
            imError: errorMsg,
            stickersContent: imErrorContent,
        });
    }

    _onWidgetAction(payload) {
        if (payload.action === "user_widget_updated") {
            this._getStickerPickerWidget();
            return;
        } else if (payload.action === "stickerpicker_close") {
          setTimeout(() => this.stickersMenu.close());
        }
    }

    _getStickerPickerWidget() {
        // Stickers
        // TODO - Add support for Stickerpickers from multiple app stores.
        // Render content from multiple stickerpack sources, each within their own iframe, within the stickerpicker UI element.
        const stickerpickerWidget = Widgets.getStickerpickerWidgets()[0];
        let stickersContent;

        // Load stickerpack content
        if (stickerpickerWidget && stickerpickerWidget.content && stickerpickerWidget.content.url) {
            // Set default name
            stickerpickerWidget.content.name = stickerpickerWidget.name || "Stickerpack";
            this.widgetId = stickerpickerWidget.id;

            stickersContent = (

                        <AppTile
                            id={stickerpickerWidget.id}
                            url={stickerpickerWidget.content.url}
                            name={stickerpickerWidget.content.name}
                            room={this.props.room}
                            type={stickerpickerWidget.content.type}
                            fullWidth={true}
                            userId={stickerpickerWidget.sender || MatrixClientPeg.get().credentials.userId}
                            creatorUserId={MatrixClientPeg.get().credentials.userId}
                            waitForIframeLoad={true}
                            show={true}
                            showMenubar={true}
                            onEditClick={this._launchManageIntegrations}
                            onDeleteClick={this._removeStickerpickerWidgets}
                            showTitle={false}
                            showMinimise={true}
                            showDelete={false}
                            onMinimiseClick={this._onHideStickersClick}
                            handleMinimisePointerEvents={true}
                            whitelistCapabilities={['m.sticker']}
                        />

            );
        } else {
            // Default content to show if stickerpicker widget not added
            console.warn("No available sticker picker widgets");
            stickersContent = this.defaultStickersContent;
            this.widgetId = null;
            this.forceUpdate();
        }
        this.setState({
            showStickers: false,
            stickersContent: stickersContent,
        });
    }

    /**
     * Show the sticker picker overlay
     * If no stickerpacks have been added, show a link to the integration manager add sticker packs page.
     * @param  {Event} e Event that triggered the function
     */
    _onShowStickersClick(e) {
        this._getStickerPickerWidget();
        const GenericElementContextMenu = sdk.getComponent('context_menus.GenericElementContextMenu');
        const buttonRect = e.target.getBoundingClientRect();

        // The window X and Y offsets are to adjust position when zoomed in to page
        const x = buttonRect.right + window.pageXOffset - 42;
        const y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19;
        // const self = this;
        this.stickersMenu = ContextualMenu.createMenu(GenericElementContextMenu, {
            chevronOffset: 10,
            chevronFace: 'bottom',
            left: x,
            top: y,
            menuWidth: this.popoverWidth,
            menuHeight: this.popoverHeight,
            element: this.state.stickersContent,
            onFinished: this.onFinished,
            menuPaddingTop: 0,
        });

        this.setState({showStickers: true});
    }

    /**
     * Trigger hiding of the sticker picker overlay
     * @param  {Event} ev Event that triggered the function call
     */
    _onHideStickersClick(ev) {
        setTimeout(() => this.stickersMenu.close());
    }

    /**
     * The stickers picker was hidden
     */
    onFinished() {
        this.setState({showStickers: false});
    }

    /**
     * Launch the integrations manager on the stickers integration page
     */
    _launchManageIntegrations() {
        const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
        const src = (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
                this.scalarClient.getScalarInterfaceUrlForRoom(
                    this.props.room,
                    'type_' + widgetType,
                    this.widgetId,
                ) :
                null;
        Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
            src: src,
        }, "mx_IntegrationsManager");

        // Wrap this in a timeout in order to avoid the DOM node from being pulled from under its feet
        setTimeout(() => this.stickersMenu.close());
    }

    render() {
        const TintableSvg = sdk.getComponent("elements.TintableSvg");
        let stickersButton;
        if (this.state.showStickers) {
            // Show hide-stickers button
            stickersButton =

                    <TintableSvg src="img/icons-hide-stickers.svg" width="35" height="35" />

;
        } else {
            // Show show-stickers button
            stickersButton =

                    <TintableSvg src="img/icons-show-stickers.svg" width="35" height="35" />

;
        }
        return stickersButton;
    }
}
<commit_msg>Comment.<commit_after>/*
Copyright 2015, 2016 OpenMarket Ltd
Copyright 2017 New Vector Ltd

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import { _t } from '../../../languageHandler';
import Widgets from '../../../utils/widgets';
import AppTile from '../elements/AppTile';
import ContextualMenu from '../../structures/ContextualMenu';
import MatrixClientPeg from '../../../MatrixClientPeg';
import Modal from '../../../Modal';
import sdk from '../../../index';
import SdkConfig from '../../../SdkConfig';
import ScalarAuthClient from '../../../ScalarAuthClient';
import dis from '../../../dispatcher';

const widgetType = 'm.stickerpicker';

export default class Stickerpicker extends React.Component {
    constructor(props) {
        super(props);
        this._onShowStickersClick = this._onShowStickersClick.bind(this);
        this._onHideStickersClick = this._onHideStickersClick.bind(this);
        this._launchManageIntegrations = this._launchManageIntegrations.bind(this);
        this._removeStickerpickerWidgets = this._removeStickerpickerWidgets.bind(this);
        this._onWidgetAction = this._onWidgetAction.bind(this);
        this.onFinished = this.onFinished.bind(this);

        this.defaultStickersContent = (

{ _t("You don't currently have any stickerpacks enabled") }

{ _t("Click") }  { _t("here") } { _t("to add some!") }

        );
        this.popoverWidth = 300;
        this.popoverHeight = 300;

        this.state = {
            stickersContent: this.defaultStickersContent,
            showStickers: false,
            imError: null,
        };
    }

    _removeStickerpickerWidgets() {
        console.warn('Removing Stickerpicker widgets');
        if (this.widgetId) {
            this.scalarClient.disableWidgetAssets(widgetType, this.widgetId).then(() => {
                console.warn('Assets disabled');
            }).catch((err) => {
                console.error('Failed to disable assets');
            });
        } else {
            console.warn('No widget ID specified, not disabling assets');
        }
        Widgets.removeStickerpickerWidgets();
        this._getStickerPickerWidget();
        // Wrap this in a timeout in order to avoid the DOM node from being pulled from under its feet
        setTimeout(() => this.stickersMenu.close());
    }

    componentDidMount() {
        this.scalarClient = null;
        if (SdkConfig.get().integrations_ui_url && SdkConfig.get().integrations_rest_url) {
            this.scalarClient = new ScalarAuthClient();
            this.scalarClient.connect().then(() => {
                this.forceUpdate();
            }).catch((e) => {
                this._imError("Failed to connect to integrations server", e);
            });
        }

        if (!this.state.imError) {
            this._getStickerPickerWidget();
            this.dispatcherRef = dis.register(this._onWidgetAction);
        }
    }

    componentWillUnmount() {
        dis.unregister(this.dispatcherRef);
    }

    _imError(errorMsg, e) {
        console.error(errorMsg, e);
        const imErrorContent =

 { errorMsg }

;
        this.setState({
            showStickers: false,
            imError: errorMsg,
            stickersContent: imErrorContent,
        });
    }

    _onWidgetAction(payload) {
        if (payload.action === "user_widget_updated") {
            this._getStickerPickerWidget();
            return;
        } else if (payload.action === "stickerpicker_close") {
            // Wrap this in a timeout in order to avoid the DOM node from being pulled from under its feet
            setTimeout(() => this.stickersMenu.close());
        }
    }

    _getStickerPickerWidget() {
        // Stickers
        // TODO - Add support for Stickerpickers from multiple app stores.
        // Render content from multiple stickerpack sources, each within their own iframe, within the stickerpicker UI element.
        const stickerpickerWidget = Widgets.getStickerpickerWidgets()[0];
        let stickersContent;

        // Load stickerpack content
        if (stickerpickerWidget && stickerpickerWidget.content && stickerpickerWidget.content.url) {
            // Set default name
            stickerpickerWidget.content.name = stickerpickerWidget.name || "Stickerpack";
            this.widgetId = stickerpickerWidget.id;

            stickersContent = (

                        <AppTile
                            id={stickerpickerWidget.id}
                            url={stickerpickerWidget.content.url}
                            name={stickerpickerWidget.content.name}
                            room={this.props.room}
                            type={stickerpickerWidget.content.type}
                            fullWidth={true}
                            userId={stickerpickerWidget.sender || MatrixClientPeg.get().credentials.userId}
                            creatorUserId={MatrixClientPeg.get().credentials.userId}
                            waitForIframeLoad={true}
                            show={true}
                            showMenubar={true}
                            onEditClick={this._launchManageIntegrations}
                            onDeleteClick={this._removeStickerpickerWidgets}
                            showTitle={false}
                            showMinimise={true}
                            showDelete={false}
                            onMinimiseClick={this._onHideStickersClick}
                            handleMinimisePointerEvents={true}
                            whitelistCapabilities={['m.sticker']}
                        />

            );
        } else {
            // Default content to show if stickerpicker widget not added
            console.warn("No available sticker picker widgets");
            stickersContent = this.defaultStickersContent;
            this.widgetId = null;
            this.forceUpdate();
        }
        this.setState({
            showStickers: false,
            stickersContent: stickersContent,
        });
    }

    /**
     * Show the sticker picker overlay
     * If no stickerpacks have been added, show a link to the integration manager add sticker packs page.
     * @param  {Event} e Event that triggered the function
     */
    _onShowStickersClick(e) {
        this._getStickerPickerWidget();
        const GenericElementContextMenu = sdk.getComponent('context_menus.GenericElementContextMenu');
        const buttonRect = e.target.getBoundingClientRect();

        // The window X and Y offsets are to adjust position when zoomed in to page
        const x = buttonRect.right + window.pageXOffset - 42;
        const y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19;
        // const self = this;
        this.stickersMenu = ContextualMenu.createMenu(GenericElementContextMenu, {
            chevronOffset: 10,
            chevronFace: 'bottom',
            left: x,
            top: y,
            menuWidth: this.popoverWidth,
            menuHeight: this.popoverHeight,
            element: this.state.stickersContent,
            onFinished: this.onFinished,
            menuPaddingTop: 0,
        });

        this.setState({showStickers: true});
    }

    /**
     * Trigger hiding of the sticker picker overlay
     * @param  {Event} ev Event that triggered the function call
     */
    _onHideStickersClick(ev) {
        setTimeout(() => this.stickersMenu.close());
    }

    /**
     * The stickers picker was hidden
     */
    onFinished() {
        this.setState({showStickers: false});
    }

    /**
     * Launch the integrations manager on the stickers integration page
     */
    _launchManageIntegrations() {
        const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
        const src = (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
                this.scalarClient.getScalarInterfaceUrlForRoom(
                    this.props.room,
                    'type_' + widgetType,
                    this.widgetId,
                ) :
                null;
        Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
            src: src,
        }, "mx_IntegrationsManager");

        // Wrap this in a timeout in order to avoid the DOM node from being pulled from under its feet
        setTimeout(() => this.stickersMenu.close());
    }

    render() {
        const TintableSvg = sdk.getComponent("elements.TintableSvg");
        let stickersButton;
        if (this.state.showStickers) {
            // Show hide-stickers button
            stickersButton =

                    <TintableSvg src="img/icons-hide-stickers.svg" width="35" height="35" />

;
        } else {
            // Show show-stickers button
            stickersButton =

                    <TintableSvg src="img/icons-show-stickers.svg" width="35" height="35" />

;
        }
        return stickersButton;
    }
}
<|endoftext|>