<commit_before>// VCE Project - reactor_conc_plot.js
//
// Routines to support plotly reaction concentration evolution figure.
//
// Requires:
// - plotly.js
// - appropprioate settings.js file to define plot colours etc.
//
//
// Andrew D. McGuire 2018
// a.mcguire227@gmail.com
//
// To do:
//
//
//----------------------------------------------------------
function plotly_layout(reac) {
    var layout =  {
	margin : {
	    l: 80,
	    r: 50,
	    b: 50,
	    t: 20,
	    pad: 5
	},
	//autosize: true,
	height: 300,
	titlefont: {
	    family: "Railway",
	    color: 'white',
	    size: 24,
	},
	legend: {
	    font: {color: 'white'}
	},
	hoverlabel: {bordercolor:'#333438'},
	plot_bgcolor: '#333438',
	paper_bgcolor: '#333333',//'black',
	xaxis: {
	    autorange: false,
	    autoscale: true,
	    showgrid: true,
	    gridcolor: '#44474c',
	    tickmode: 'auto',
	    range: [0,200.0],
	    title: 'time/s',
	    titlefont: {
		family: 'Roboto, serif',
		size: 18,
		color: 'white'
	    },
	    tickfont: {color:'white'}
	},
	yaxis: {
	    title: 'concentration/kmol/m3',
	    showgrid: true,
	    gridcolor: '#44474c',
	    autorange: true,
	    autoscale: false,
	    range: [0.0, Math.max.apply(Math, reac.conc)*1.1],
	    titlefont: {
		family: 'Roboto, serif',
		size: 18,
		color: 'white'
	    },
	    tickfont: {color:'white'}
	}
    };
    return layout
};

function get_fill(i) {
    if (i == 0) {
	return 'tozeroy';
    }
    else {
	return 'tonexty'
    };
};

function get_traces(reac) {

    var all_traces = [];
    for (var i = 0; i < reac.components.length; i++) {
	var trace = {
	    type: "scatter",
	    mode: "lines",
	    name: reac.components[i].name,
	    x: [reac.t],
	    y: [reac.conc[i]],
	    line: {color: settings.component_colours[i]},
	    maxdisplayed: 200/0.1,
//	    fill : get_fill(i)
	};
	all_traces.push(trace);
    };
    return all_traces;
};

function get_saved_traces(savedData, reac) {
    // constuct traces from a previous save
    var all_traces = [];
    for (var i = 0; i < savedData.data.length; i++) {
	var trace = {
	    type: "scatter",
	    mode: "lines",
	    name: reac.components[i].name + " reference",
	    x: savedData.data[i].x,
	    y: savedData.data[i].y,
	    line: {
		color: settings.component_colours[i],
		dash: 'dot'
	    },
	    maxdisplayed: 200/0.1,
	};
	all_traces.push(trace);
    };
    return all_traces;

}

function unpack_data(reac) {
    // unpacks storage data to extend plotly graph
    var x = [], y = [];
    for (var i = 0; i < reac.conc.length; i++) {
	x.push([reac.t]);
	y.push([reac.conc[i]]);
    };
    return{ x : x, y : y };
}
<commit_msg>reactors: adding plotting methods to format hover text based on current and saved data<commit_after>// VCE Project - reactor_conc_plot.js
//
// Routines to support plotly reaction concentration evolution figure.
//
// Requires:
// - plotly.js
// - appropprioate settings.js file to define plot colours etc.
//
//
// Andrew D. McGuire 2018
// a.mcguire227@gmail.com
//
// To do:
//
//
//----------------------------------------------------------
function plotly_layout(reac) {
    var layout =  {
	margin : {
	    l: 80,
	    r: 50,
	    b: 50,
	    t: 20,
	    pad: 5
	},
	//autosize: true,
	height: 300,
	titlefont: {
	    family: "Railway",
	    color: 'white',
	    size: 24,
	},
	legend: {
	    font: {color: 'white'}
	},
	hoverlabel: {bordercolor:'#333438'},
	plot_bgcolor: '#333438',
	paper_bgcolor: '#333333',//'black',
	xaxis: {
	    autorange: false,
	    autoscale: true,
	    showgrid: true,
	    gridcolor: '#44474c',
	    tickmode: 'auto',
	    range: [0,200.0],
	    title: 'time/s',
	    titlefont: {
		family: 'Roboto, serif',
		size: 18,
		color: 'white'
	    },
	    tickfont: {color:'white'}
	},
	yaxis: {
	    title: 'concentration/kmol/m3',
	    showgrid: true,
	    gridcolor: '#44474c',
	    autorange: true,
	    autoscale: false,
	    range: [0.0, Math.max.apply(Math, reac.conc)*1.1],
	    titlefont: {
		family: 'Roboto, serif',
		size: 18,
		color: 'white'
	    },
	    tickfont: {color:'white'}
	}
    };
    return layout
};

function get_fill(i) {
    if (i == 0) {
	return 'tozeroy';
    }
    else {
	return 'tonexty'
    };
};

function get_traces(reac) {

    var all_traces = [];
    for (var i = 0; i < reac.components.length; i++) {
	var trace = {
	    type: "scatter",
	    mode: "lines",
	    name: reac.components[i].name,
	    x: [reac.t],
	    y: [reac.conc[i]],
	    line: {color: settings.component_colours[i]},
	    maxdisplayed: 200/0.1,
	    text : get_hover_text(reac),
//	    fill : get_fill(i)
	};
	all_traces.push(trace);
    };
    return all_traces;
};

function get_saved_traces(savedData, reac) {
    // constuct traces from a previous save
    var all_traces = [];
    for (var i = 0; i < savedData.data.length; i++) {
	var trace = {
	    type: "scatter",
	    mode: "lines",
	    name: reac.components[i].name + " saved",
	    x: savedData.data[i].x,
	    y: savedData.data[i].y,
	    line: {
		color: settings.component_colours[i],
		dash: 'dot'
	    },
	    maxdisplayed: 200/0.1,
	    text : get_saved_hover_text(savedData, reac),
	};
	all_traces.push(trace);
    };
    return all_traces;

}

function get_hover_text(reac) {
    // Format the hover text on the current data traces.
    var text = 'T = ' + reac.T.toString() + 'K';
    for (var i = 0; i < reac.components.length; i++) {
	text = text + ', C' + reac.components[i].name + '0 = ';
	text = text + reac.c0[i].toString();
    };
    return text
};

function get_saved_hover_text(savedData, reac) {
    // Format the hover text on the saved data traces.
    var text = 'T = ' + savedData.T.toString() + 'K';
    for (var i = 0; i < reac.components.length; i++) {
	text = text + ', C' + reac.components[i].name + '0 = ';
	text = text + savedData.c0[i].toString();
    };
    return text
};

function unpack_data(reac) {
    // unpacks storage data to extend plotly graph
    var x = [], y = [];
    for (var i = 0; i < reac.conc.length; i++) {
	x.push([reac.t]);
	y.push([reac.conc[i]]);
    };
    return{ x : x, y : y };
}
<|endoftext|>


<commit_before>{
  trace: true,
  foo: 42,
};
<commit_msg>* move some defaults here<commit_after>// TODO: come up with defaults & documentation here
{   debug:  true,
    trace:  true,
    servers: [
        [ "tcp://localhost:10001", "socket:///tmp/echo1.socket" ],
        [ "tcp://localhost:10002", "udp://localhost:10005" ],
    ],
};
<|endoftext|>


<commit_before>import React from 'react';
import Config from '../../config';
import CommitteeLogos from './CommitteeLogos/CommitteeLogos'
import CommitteeSections from './CommitteeSection/CommitteeSections'
import Banner from '../Banner/Banner';

export default class Sponsors extends React.Component {
	render() {
		return (

				<Banner decorative />

						<CommitteeLogos committees={Config.committees} />

				<Banner decorative />

						<CommitteeSections committees={Config.committees} />

		);
	}
}
<commit_msg>Update Committees.js<commit_after>import React from 'react';
import Config from '../../config';
import CommitteeLogos from './CommitteeLogos/CommitteeLogos'
import CommitteeSections from './CommitteeSection/CommitteeSections'
import Banner from '../Banner/Banner';

export default class Sponsors extends React.Component {
	render() {
		return (

				<Banner decorative />
				{/*

						<CommitteeLogos committees={Config.committees} />

				<Banner decorative /> */}

						<CommitteeSections committees={Config.committees} />

		);
	}
}
<|endoftext|>


<commit_before>import React, { Component, PropTypes } from 'react'
import { find } from 'lodash'

const filterOptions = (options, text) =>
  options.filter(option => option.label.toLowerCase().includes(text.toLowerCase()))

const validOption = (options, text) => find(options, option => option.label === text)

export default class DimensionValueChooser extends Component {
  constructor(props) {
    super(props)
    this.state = {
      inputText: props.value,
      closed: true,
    }
  }

  componentWillReceiveProps = (props) => {
    this.setState({ inputText: props.value })
  }

  onChangeInput = () => {
    const { options, onChange } = this.props
    const inputText = this.inputField.value

    this.setState({ inputText, closed: inputText.length === 0 })

    if (validOption(options, inputText)) {
      onChange(inputText)
    } else {
      onChange('')
    }
  }

  onClickDimensionValue = (dimensionValue) => {
    const { onChange } = this.props

    this.setState({ inputText: dimensionValue })
    onChange(dimensionValue)
  }

  render() {
    const { options } = this.props
    const { inputText } = this.state

    const containerStyle = {
      width: 300,
    }
    const liStyle = {
      width: '100%',
      listStyleType: 'none',
      padding: 0,
      margin: 0,
    }

    const ulStyle = {
      width: '100%',
      padding: 0,
      margin: 0,
    }

    const ulWrapperStyle = {
      width: '100%',
      borderRadius: '0px 0px 5px 5px',
      border: '1px solid grey',
      display: this.state.closed ? 'none' : 'block',
    }

    const inputStyle = {
      width: '100%',
      lineHeight: '1.5em',
      padding: 0,
      margin: 0,
      paddingLeft: 4,
    }

    const aBtnStyle = {
      boxSizing: 'border-box',
      display: 'block',
      backgroundColor: 'lightgrey',
      padding: 5,
      width: '100%',
      height: '100%',
      cursor: 'pointer',
    }

    return (

        <input
          style={inputStyle}
          type="text"
          onChange={this.onChangeInput}
          ref={(ref) => { this.inputField = ref }}
          value={inputText}
        />

            {filterOptions(options, inputText).map((dimensionValueObject, i) => (

                  {dimensionValueObject.label}

              )
            )
          }

    )
  }
}

DimensionValueChooser.propTypes = {
  value: PropTypes.string,
  options: PropTypes.arrayOf(PropTypes.object),
  onChange: PropTypes.func,
}
<commit_msg>bugfixing component<commit_after>import React, { Component, PropTypes } from 'react'
import { find } from 'lodash'

const filterOptions = (options, text) =>
  options.filter(option => option.label.toLowerCase().includes(text.toLowerCase()))

const validOption = (options, text) => find(options, option => option.label === text)

export default class DimensionValueChooser extends Component {
  constructor(props) {
    super(props)
    this.state = {
      inputText: props.value,
      closed: true,
    }
  }

  componentWillReceiveProps = (nextProps) => {
    const { value, options, onChange } = this.props
    let inputText = nextProps.value

    if (inputText === null || inputText === undefined) {
      inputText = ''
    }

    if (value !== inputText) {
      this.setState({
        inputText,
        closed: inputText.length === 0 || validOption(options, inputText),
      })

      if (validOption(options, inputText)) {
        onChange(inputText)
      } else {
        onChange('')
      }
    }
  }

  onChangeInput = () => {
    const { options, onChange } = this.props
    const inputText = this.inputField.value

    this.setState({ inputText, closed: inputText.length === 0 || validOption(options, inputText) })

    if (validOption(options, inputText)) {
      onChange(inputText)
    } else {
      onChange('')
    }
  }

  onClickDimensionValue = (dimensionValue) => {
    const { options, onChange } = this.props
    const inputText = this.inputField.value

    this.setState({ inputText: dimensionValue, closed: !validOption(options, inputText) })
    onChange(dimensionValue)
  }

  render() {
    const { options } = this.props
    const { inputText } = this.state

    const containerStyle = {
      width: 300,
    }
    const liStyle = {
      width: '100%',
      listStyleType: 'none',
      padding: 0,
      margin: 0,
    }

    const ulStyle = {
      width: '100%',
      padding: 0,
      margin: 0,
    }

    const ulWrapperStyle = {
      width: '100%',
      borderRadius: '0px 0px 5px 5px',
      border: '1px solid grey',
      display: this.state.closed ? 'none' : 'block',
    }

    const inputStyle = {
      width: '100%',
      lineHeight: '1.5em',
      padding: 0,
      margin: 0,
      paddingLeft: 4,
    }

    const aBtnStyle = {
      boxSizing: 'border-box',
      display: 'block',
      backgroundColor: 'lightgrey',
      padding: 5,
      width: '100%',
      height: '100%',
      cursor: 'pointer',
    }

    return (

        <input
          style={inputStyle}
          type="text"
          onChange={this.onChangeInput}
          ref={(ref) => { this.inputField = ref }}
          value={inputText}
        />

            {filterOptions(options, inputText).map((dimensionValueObject, i) => (

                  {dimensionValueObject.label}

              )
            )
          }

    )
  }
}

DimensionValueChooser.propTypes = {
  value: PropTypes.string,
  options: PropTypes.arrayOf(PropTypes.object),
  onChange: PropTypes.func,
}
<|endoftext|>


<commit_before>import React from 'react'
import Tooltip from '../Tooltip'
import { DotStepperUI, BulletUI, ProgressBulletUI } from './DotStepper.css.js'
import { classNames } from '../../utilities/classNames'

class DotStepper extends React.Component {
  static defaultProps = {
    numSteps: 1,
    step: 1,
  }

  getClassName() {
    const { className } = this.props
    return classNames('c-DotStepper', className)
  }

  getTitle() {
    const { numSteps, step } = this.props
    return `Step ${step} of ${numSteps}`
  }

  renderSteps() {
    const { numSteps } = this.props
    let markup = []

    for (let i = 0; i < numSteps; i += 1) {
      markup.push(<BulletUI key={i}>•</BulletUI>)
    }

    return markup
  }

  render() {
    const { className, step, ...rest } = this.props
    const title = this.getTitle()

    return (
      <Tooltip title={title} placement="bottom">
        <DotStepperUI
          aria-label={title}
          className={this.getClassName()}
          {...rest}
        >
          {this.renderSteps()}
          <ProgressBulletUI step={step} />
        </DotStepperUI>
      </Tooltip>
    )
  }
}

export default DotStepper
<commit_msg>Add data-cy to DotStepper<commit_after>import React from 'react'
import Tooltip from '../Tooltip'
import { DotStepperUI, BulletUI, ProgressBulletUI } from './DotStepper.css.js'
import { classNames } from '../../utilities/classNames'

class DotStepper extends React.Component {
  static defaultProps = {
    numSteps: 1,
    step: 1,
  }

  getClassName() {
    const { className } = this.props
    return classNames('c-DotStepper', className)
  }

  getTitle() {
    const { numSteps, step } = this.props
    return `Step ${step} of ${numSteps}`
  }

  renderSteps() {
    const { numSteps } = this.props
    let markup = []

    for (let i = 0; i < numSteps; i += 1) {
      markup.push(<BulletUI key={i}>•</BulletUI>)
    }

    return markup
  }

  render() {
    const { className, step, ...rest } = this.props
    const title = this.getTitle()

    return (
      <Tooltip title={title} placement="bottom">
        <DotStepperUI
          data-cy="dot-stepper"
          aria-label={title}
          className={this.getClassName()}
          {...rest}
        >
          {this.renderSteps()}
          <ProgressBulletUI step={step} />
        </DotStepperUI>
      </Tooltip>
    )
  }
}

export default DotStepper
<|endoftext|>


<commit_before>import React from 'react';
import classNames from 'classnames/bind';
import { Link } from 'gatsby';
import { PAGINATION } from '../../constants';
import styles from './Pagination.module.scss';

const cx = classNames.bind(styles);

const Pagination = ({
  prevPagePath,
  nextPagePath,
  hasNextPage,
  hasPrevPage
}) => {
  const prevClassName = cx({
    'pagination__prev-link': true,
    'pagination__prev-link--disable': !hasPrevPage
  });

  const nextClassName = cx({
    'pagination__next-link': true,
    'pagination__next-link--disable': !hasNextPage
  });

  return (

        <Link rel="prev" to={prevPagePath} className={prevClassName}>{PAGINATION.PREV_PAGE}</Link>

        <Link rel="next" to={nextPagePath} className={nextClassName}>{PAGINATION.NEXT_PAGE}</Link>

  )
};

export default Pagination;
<commit_msg>Fix lint issues<commit_after>import React from 'react';
import classNames from 'classnames/bind';
import { Link } from 'gatsby';
import { PAGINATION } from '../../constants';
import styles from './Pagination.module.scss';

const cx = classNames.bind(styles);

const Pagination = ({
  prevPagePath,
  nextPagePath,
  hasNextPage,
  hasPrevPage
}) => {
  const prevClassName = cx({
    'pagination__prev-link': true,
    'pagination__prev-link--disable': !hasPrevPage
  });

  const nextClassName = cx({
    'pagination__next-link': true,
    'pagination__next-link--disable': !hasNextPage
  });

  return (

        <Link rel="prev" to={prevPagePath} className={prevClassName}>{PAGINATION.PREV_PAGE}</Link>

        <Link rel="next" to={nextPagePath} className={nextClassName}>{PAGINATION.NEXT_PAGE}</Link>

  );
};

export default Pagination;
<|endoftext|>


<commit_before>import React from 'react';
import ReactDOM from 'react-dom';
import {
  renderIntoDocument,
  scryRenderedDOMComponentsWithTag
} from 'react-addons-test-utils';
import configureStore from '../redux/configureStore'
import RegistrationForm from './RegistrationForm'

describe('RegistrationForm', () => {

  it('renders inputs for user registration', () => {
    const store = configureStore()
    const component = renderIntoDocument(
      <RegistrationForm store={store} />
    );
    const renderedDOM = ReactDOM.findDOMNode(component)

    const inputs = renderedDOM.querySelectorAll('input')
    expect(inputs.length).toEqual(3)
    expect(inputs[0]).toBeDefined()
    expect(inputs[0].name).toEqual('userName')
    expect(inputs[1]).toBeDefined()
    expect(inputs[1].name).toEqual('email')
    expect(inputs[2]).toBeDefined()
    expect(inputs[2].name).toEqual('phone')
  })

})
<commit_msg>Add test for 'Register' button<commit_after>import React from 'react';
import ReactDOM from 'react-dom';
import {
  renderIntoDocument,
  scryRenderedDOMComponentsWithTag
} from 'react-addons-test-utils';
import configureStore from '../redux/configureStore'
import RegistrationForm from './RegistrationForm'

describe('RegistrationForm', () => {

  it('renders inputs for user registration', () => {
    const store = configureStore()
    const component = renderIntoDocument(
      <RegistrationForm store={store} />
    );
    const renderedDOM = ReactDOM.findDOMNode(component)

    const inputs = renderedDOM.querySelectorAll('input')
    expect(inputs.length).toEqual(2)
    expect(inputs[0]).toBeDefined()
    expect(inputs[0].name).toEqual('userName')
    expect(inputs[1]).toBeDefined()
    expect(inputs[1].name).toEqual('email')

    const buttons = scryRenderedDOMComponentsWithTag(component, 'button');
    expect(buttons.length).toEqual(1);
    expect(buttons[0].textContent).toEqual('Register');
  })

})
<|endoftext|>


<commit_before>import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Map } from 'immutable';
import { resolveWidget } from '../Widgets';
import controlStyles from '../ControlPanel/ControlPane.css';
import styles from './ObjectControl.css';

export default class ObjectControl extends Component {
  static propTypes = {
    onChange: PropTypes.func.isRequired,
    onAddAsset: PropTypes.func.isRequired,
    onRemoveAsset: PropTypes.func.isRequired,
    getAsset: PropTypes.func.isRequired,
    value: PropTypes.oneOfType([
      PropTypes.node,
      PropTypes.object,
      PropTypes.bool,
    ]),
    field: PropTypes.object,
    forID: PropTypes.string,
    className: PropTypes.string,
  };

  controlFor(field) {
    const { onAddAsset, onRemoveAsset, getAsset, value, onChange } = this.props;
    if (field.get('widget') === 'hidden') {
      return null;
    }
    const widget = resolveWidget(field.get('widget') || 'string');
    const fieldValue = value && Map.isMap(value) ? value.get(field.get('name')) : value;

    return (

        {field.get('label')}
        {
          React.createElement(widget.control, {
            id: field.get('name'),
            field,
            value: fieldValue,
            onChange: (val, metadata) => {
              onChange((value || Map()).set(field.get('name'), val), metadata);
            },
            onAddAsset,
            onRemoveAsset,
            getAsset,
            forID: field.get('name'),
          })
        }

);
  }

  render() {
    const { field, forID } = this.props;
    const multiFields = field.get('fields');
    const singleField = field.get('field');
    const className = this.props.className || '';

    if (multiFields) {
      return (<div id={forID} className={`${ className } ${ styles.root }`}>
        {multiFields.map(f => this.controlFor(f))}

);
    } else if (singleField) {
      return this.controlFor(singleField);
    }

    return
No field(s) defined for this widget
;
  }
}
<commit_msg>fix nested field updates<commit_after>import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Map } from 'immutable';
import { resolveWidget } from '../Widgets';
import controlStyles from '../ControlPanel/ControlPane.css';
import styles from './ObjectControl.css';

export default class ObjectControl extends Component {
  static propTypes = {
    onChange: PropTypes.func.isRequired,
    onAddAsset: PropTypes.func.isRequired,
    onRemoveAsset: PropTypes.func.isRequired,
    getAsset: PropTypes.func.isRequired,
    value: PropTypes.oneOfType([
      PropTypes.node,
      PropTypes.object,
      PropTypes.bool,
    ]),
    field: PropTypes.object,
    forID: PropTypes.string,
    className: PropTypes.string,
  };

  /**
   * In case the `onChange` function is frozen by a child widget implementation,
   * e.g. when debounced, always get the latest object value instead of usin
   * `this.props.value` directly.
   */
  getObjectValue = () => this.props.value;

  controlFor(field) {
    const { onAddAsset, onRemoveAsset, getAsset, value, onChange } = this.props;
    if (field.get('widget') === 'hidden') {
      return null;
    }
    const widget = resolveWidget(field.get('widget') || 'string');
    const fieldValue = value && Map.isMap(value) ? value.get(field.get('name')) : value;

    return (

        {field.get('label')}
        {
          React.createElement(widget.control, {
            id: field.get('name'),
            field,
            value: fieldValue,
            onChange: (val, metadata) => {
              onChange((this.getObjectValue() || Map()).set(field.get('name'), val), metadata);
            },
            onAddAsset,
            onRemoveAsset,
            getAsset,
            forID: field.get('name'),
          })
        }

);
  }

  render() {
    const { field, forID } = this.props;
    const multiFields = field.get('fields');
    const singleField = field.get('field');
    const className = this.props.className || '';

    if (multiFields) {
      return (<div id={forID} className={`${ className } ${ styles.root }`}>
        {multiFields.map(f => this.controlFor(f))}

);
    } else if (singleField) {
      return this.controlFor(singleField);
    }

    return
No field(s) defined for this widget
;
  }
}
<|endoftext|>


<commit_before>import React, {Component} from 'react';
const GoldenLayout = require('golden-layout');
import {ButtonToolbar, Dropdown, Glyphicon, MenuItem} from 'react-bootstrap';
import ReactDOM from 'react-dom';
import MapAlert from './MapAlert';
import TableAlert from './TableAlert';
import HistogramAlert from './HistogramAlert';
import CloudAlert from './CloudAlert';
import CardAlert from './CardAlert';
import CustomToggle from'../common/CustomToggle';
const DropdownMenu = Dropdown.Menu;

function isAlert(t) {
    return t == 'MapAlert' || t == 'TableAlert' || t == 'HistogramAlert' || t == 'CloudAlert' || (t.indexOf('Alert') !== -1);
}
const layoutConfig = {
    settings: {
        hasHeaders: true
    },
    dimensions: {
        borderWidth: 2,
        headerHeight: 25
    },
    content: [

        {
            type: 'row',
            width: 100,
            content: [
                {

                            type: 'react-component',
                            component: 'TableAlert',
                            title: 'New #evening',
                            props: { title: 'New #evening', color: '#eb4f4f' },
                            cssClass : ''

                }, {
                    type: 'column',
                    width: 33,
                    content: [
                        {
                            type: 'react-component',
                            component: 'HistogramAlert',
                            title: 'Platforms today',
                            props: { title: 'Platforms today', color: '#eb9650' },
                            cssClass : 'scroll'
                        },

                        {
                            type: 'react-component',
                            component: 'CardAlert',
                            title: 'Local imagery',
                            props: { title: 'Local imagery', color: '#4febeb' },
                            cssClass : 'scroll'

                        }
                    ]
                },
            ]

        }

    ]

}

export default class AlertWallContainer extends Component {
    constructor(props) {
        super(props);

        //this.state = { layout };
    }
    componentDidMount() {
        const layout = new GoldenLayout(layoutConfig, this.refs.LayoutContainer);

        let alertCtr = 1;

        const alertWall = React.createClass({
            componentDidMount: function () {

                const color = this.props.color || '#000000';
                this.props.glContainer.tab.titleElement.prevObject.css('background-color', this.props.color);
                this.props.glContainer.tab.setTitle(this.props.title || 'No Title');
                // eslint-disable-next-line react/prop-types
                this.props.glContainer.on('tab', (tab) => {
                    tab.titleElement.prevObject.css('background-color', color);
                });
            },
            render: function () {
                return (
Alert Window {alertCtr++}
)
            }
        })

        layout.registerComponent('MapAlert', MapAlert);
        layout.registerComponent('TableAlert', TableAlert);
        layout.registerComponent('HistogramAlert', HistogramAlert);
        layout.registerComponent('CloudAlert', CloudAlert);
        layout.registerComponent('Alert Wall', alertWall);
        layout.registerComponent('CardAlert', CardAlert);

        layout.on('stackCreated', function (stack) {
            /*
             * Listening for activeContentItemChanged. This happens initially
             * when the stack is created and everytime the user clicks a tab
             */
            stack.on('activeContentItemChanged', function (contentItem) {
                stack.header.controlsContainer.children('.alertCommands').remove();
                const buttonInstance = (
                    <ButtonToolbar>
                        <Dropdown id="dropdown-custom-1"  >
                            <CustomToggle bsRole="toggle">
                                <Glyphicon glyph="cog" />
                            </CustomToggle>
                            <DropdownMenu className="">
                                <MenuItem eventKey="1">Load in Search Window</MenuItem>
                                <MenuItem eventKey="1">Change perspective ></MenuItem>
                                <MenuItem divider />
                                <MenuItem eventKey="1">Color ></MenuItem>
                                <MenuItem eventKey="1">Audio ></MenuItem>
                                <MenuItem eventKey="1">[x]Active</MenuItem>
                                <MenuItem eventKey="1">[x]Intelligent downsample</MenuItem>
                                <MenuItem divider />
                                <MenuItem eventKey="1">Export to CSV</MenuItem>
                                <MenuItem eventKey="1">Export to PNG</MenuItem>
                                <MenuItem divider />
                                <MenuItem eventKey="1">Save this configuration</MenuItem>
                                <MenuItem eventKey="1">Share this configuration</MenuItem>
                            </DropdownMenu>
                        </Dropdown>
                    </ButtonToolbar>

                );

                // interact with the contentItem
                if (isAlert(contentItem.config.component)) {

                    stack.header.controlsContainer.prepend('

');
                    stack.header.controlsContainer.prepend('

');
                    ReactDOM.render(buttonInstance, stack.header.controlsContainer.children('.cogSettings')[0]);
                }

            });
        });
        layout.on('itemCreated', function (item) {
            if (item.config.cssClass) {
                item.element.addClass(item.config.cssClass);
            }
        });
        layout.init();

    }

    render() {
        return (

        )
    }

    componentWillUnMount() {
        const layout = this.state.layout;
        if (layout)
            layout.destroy();
    }
}<commit_msg>change layout of alert wall, so we see more of table<commit_after>import React, {Component} from 'react';
const GoldenLayout = require('golden-layout');
import {ButtonToolbar, Dropdown, Glyphicon, MenuItem} from 'react-bootstrap';
import ReactDOM from 'react-dom';
import MapAlert from './MapAlert';
import TableAlert from './TableAlert';
import HistogramAlert from './HistogramAlert';
import CloudAlert from './CloudAlert';
import CardAlert from './CardAlert';
import CustomToggle from'../common/CustomToggle';
const DropdownMenu = Dropdown.Menu;

function isAlert(t) {
    return t == 'MapAlert' || t == 'TableAlert' || t == 'HistogramAlert' || t == 'CloudAlert' || (t.indexOf('Alert') !== -1);
}
const layoutConfig = {
    settings: {
        hasHeaders: true
    },
    dimensions: {
        borderWidth: 2,
        headerHeight: 25
    },
    content: [
        {
            type: 'column',
            width: 100,
            content: [
                {
                    type: 'react-component',
                    component: 'TableAlert',
                    title: 'New #evening',
                    props: { title: 'New #evening', color: '#eb4f4f' },
                    cssClass : ''
                },
                {
                    type: 'row',
                    width: 30,
                    content: [
                        {
                            type: 'react-component',
                            component: 'CardAlert',
                            title: 'Local imagery',
                            props: { title: 'Local imagery', color: '#4febeb' },
                            cssClass : 'scroll'
                        },
                        {
                            type: 'react-component',
                            component: 'HistogramAlert',
                            title: 'Platforms today',
                            props: { title: 'Platforms today', color: '#eb9650' },
                            cssClass : 'scroll'
                        }
                    ]
                }
                ]
        }

    ]

}

export default class AlertWallContainer extends Component {
    constructor(props) {
        super(props);

        //this.state = { layout };
    }
    componentDidMount() {
        const layout = new GoldenLayout(layoutConfig, this.refs.LayoutContainer);

        let alertCtr = 1;

        const alertWall = React.createClass({
            componentDidMount: function () {

                const color = this.props.color || '#000000';
                this.props.glContainer.tab.titleElement.prevObject.css('background-color', this.props.color);
                this.props.glContainer.tab.setTitle(this.props.title || 'No Title');
                // eslint-disable-next-line react/prop-types
                this.props.glContainer.on('tab', (tab) => {
                    tab.titleElement.prevObject.css('background-color', color);
                });
            },
            render: function () {
                return (
Alert Window {alertCtr++}
)
            }
        })

        layout.registerComponent('MapAlert', MapAlert);
        layout.registerComponent('TableAlert', TableAlert);
        layout.registerComponent('HistogramAlert', HistogramAlert);
        layout.registerComponent('CloudAlert', CloudAlert);
        layout.registerComponent('Alert Wall', alertWall);
        layout.registerComponent('CardAlert', CardAlert);

        layout.on('stackCreated', function (stack) {
            /*
             * Listening for activeContentItemChanged. This happens initially
             * when the stack is created and everytime the user clicks a tab
             */
            stack.on('activeContentItemChanged', function (contentItem) {
                stack.header.controlsContainer.children('.alertCommands').remove();
                const buttonInstance = (
                    <ButtonToolbar>
                        <Dropdown id="dropdown-custom-1"  >
                            <CustomToggle bsRole="toggle">
                                <Glyphicon glyph="cog" />
                            </CustomToggle>
                            <DropdownMenu className="">
                                <MenuItem eventKey="1">Load in Search Window</MenuItem>
                                <MenuItem eventKey="1">Change perspective ></MenuItem>
                                <MenuItem divider />
                                <MenuItem eventKey="1">Color ></MenuItem>
                                <MenuItem eventKey="1">Audio ></MenuItem>
                                <MenuItem eventKey="1">[x]Active</MenuItem>
                                <MenuItem eventKey="1">[x]Intelligent downsample</MenuItem>
                                <MenuItem divider />
                                <MenuItem eventKey="1">Export to CSV</MenuItem>
                                <MenuItem eventKey="1">Export to PNG</MenuItem>
                                <MenuItem divider />
                                <MenuItem eventKey="1">Save this configuration</MenuItem>
                                <MenuItem eventKey="1">Share this configuration</MenuItem>
                            </DropdownMenu>
                        </Dropdown>
                    </ButtonToolbar>

                );

                // interact with the contentItem
                if (isAlert(contentItem.config.component)) {

                    stack.header.controlsContainer.prepend('

');
                    stack.header.controlsContainer.prepend('

');
                    ReactDOM.render(buttonInstance, stack.header.controlsContainer.children('.cogSettings')[0]);
                }

            });
        });
        layout.on('itemCreated', function (item) {
            if (item.config.cssClass) {
                item.element.addClass(item.config.cssClass);
            }
        });
        layout.init();

    }

    render() {
        return (

        )
    }

    componentWillUnMount() {
        const layout = this.state.layout;
        if (layout)
            layout.destroy();
    }
}<|endoftext|>


<commit_before>import React from 'react';
import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
import { boolean, select } from '@storybook/addon-knobs/react';
import { IconAddMediumOutline, IconAddSmallOutline } from '@teamleader/ui-icons';
import { Button } from '../../index';

const colors = ['teal', 'neutral', 'mint', 'violet', 'ruby', 'gold', 'aqua', 'white'];
const elements = ['a', 'button'];
const iconPositions = ['left', 'right'];
const levels = ['primary', 'secondary', 'outline', 'destructive', 'link', 'timer'];
const sizes = ['small', 'medium', 'large'];

export default {
  title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Button'),

  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/LHH25GN90ljQaBEUNMsdJn/Desktop-components?node-id=225%3A2',
    },
  },
};

export const withText = () => (
  <Button
    active={boolean('Active', false)}
    color={select('Color', colors, 'teal')}
    label="Button"
    level={select('Level', levels, 'secondary')}
    disabled={boolean('Disabled', false)}
    fullWidth={boolean('Full width', false)}
    processing={boolean('Processing', false)}
    inverse={boolean('Inverse', false)}
    size={select('Size', sizes, 'medium')}
  />
);

withText.story = {
  name: 'With text',
};

export const withIcon = () => (
  <Button
    active={boolean('Active', false)}
    color={select('Color', colors, 'teal')}
    icon={select('Size', sizes, 'medium') === 'small' ? <IconAddSmallOutline /> : <IconAddMediumOutline />}
    level={select('Level', levels, 'secondary')}
    disabled={boolean('Disabled', false)}
    fullWidth={boolean('Full width', false)}
    processing={boolean('Processing', false)}
    inverse={boolean('Inverse', false)}
    size={select('Size', sizes, 'medium')}
  />
);

withIcon.story = {
  name: 'With icon',
};

export const withTextAndIcon = () => (
  <Button
    active={boolean('Active', false)}
    color={select('Color', colors, 'teal')}
    icon={select('Size', sizes, 'medium') === 'small' ? <IconAddSmallOutline /> : <IconAddMediumOutline />}
    iconPlacement={select('Icon placement', iconPositions, 'left')}
    label="Button"
    level={select('Level', levels, 'secondary')}
    disabled={boolean('Disabled', false)}
    fullWidth={boolean('Full width', false)}
    processing={boolean('Processing', false)}
    inverse={boolean('Inverse', false)}
    size={select('Size', sizes, 'medium')}
  />
);

withTextAndIcon.story = {
  name: 'With text and icon',
};

export const withCustomElement = () => (
  <Button
    active={boolean('Active', false)}
    color={select('Color', colors, 'teal')}
    element={select('Element', elements, 'a')}
    label="Button"
    level={select('Level', levels, 'secondary')}
    disabled={boolean('Disabled', false)}
    fullWidth={boolean('Full width', false)}
    processing={boolean('Processing', false)}
    inverse={boolean('Inverse', false)}
    size={select('Size', sizes, 'medium')}
  />
);

withCustomElement.story = {
  name: 'With custom element',
};
<commit_msg>Update stories<commit_after>import React from 'react';
import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
import { boolean, select, text } from '@storybook/addon-knobs/react';
import { IconAddMediumOutline, IconAddSmallOutline } from '@teamleader/ui-icons';
import { Button } from '../../index';

const colors = ['teal', 'neutral', 'mint', 'violet', 'ruby', 'gold', 'aqua', 'white'];
const elements = ['a', 'button'];
const iconPositions = ['left', 'right'];
const levels = ['primary', 'secondary', 'outline', 'destructive', 'link', 'timer'];
const sizes = ['small', 'medium', 'large'];

export default {
  title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Button'),

  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/LHH25GN90ljQaBEUNMsdJn/Desktop-components?node-id=225%3A2',
    },
  },
};

export const withText = () => (
  <Button
    active={boolean('Active', false)}
    color={select('Color', colors, 'teal')}
    label={text('Label', 'Button with label')}
    level={select('Level', levels, 'secondary')}
    disabled={boolean('Disabled', false)}
    fullWidth={boolean('Full width', false)}
    processing={boolean('Processing', false)}
    inverse={boolean('Inverse', false)}
    size={select('Size', sizes, 'medium')}
  />
);

withText.story = {
  name: 'With text',
};

export const withIcon = () => (
  <Button
    active={boolean('Active', false)}
    color={select('Color', colors, 'teal')}
    icon={select('Size', sizes, 'medium') === 'small' ? <IconAddSmallOutline /> : <IconAddMediumOutline />}
    level={select('Level', levels, 'secondary')}
    disabled={boolean('Disabled', false)}
    fullWidth={boolean('Full width', false)}
    processing={boolean('Processing', false)}
    inverse={boolean('Inverse', false)}
    size={select('Size', sizes, 'medium')}
  />
);

withIcon.story = {
  name: 'With icon',
};

export const withTextAndIcon = () => (
  <Button
    active={boolean('Active', false)}
    color={select('Color', colors, 'teal')}
    icon={select('Size', sizes, 'medium') === 'small' ? <IconAddSmallOutline /> : <IconAddMediumOutline />}
    iconPlacement={select('Icon placement', iconPositions, 'left')}
    label={text('Label', 'Button with icon and label')}
    level={select('Level', levels, 'secondary')}
    disabled={boolean('Disabled', false)}
    fullWidth={boolean('Full width', false)}
    processing={boolean('Processing', false)}
    inverse={boolean('Inverse', false)}
    size={select('Size', sizes, 'medium')}
  />
);

withTextAndIcon.story = {
  name: 'With text and icon',
};

export const withCustomElement = () => (
  <Button
    active={boolean('Active', false)}
    color={select('Color', colors, 'teal')}
    element={select('Element', elements, 'a')}
    label={text('Label', 'Button with custom element')}
    level={select('Level', levels, 'secondary')}
    disabled={boolean('Disabled', false)}
    fullWidth={boolean('Full width', false)}
    processing={boolean('Processing', false)}
    inverse={boolean('Inverse', false)}
    size={select('Size', sizes, 'medium')}
  />
);

withCustomElement.story = {
  name: 'With custom element',
};
<|endoftext|>


<commit_before>import React from "react";
import { text, select, boolean } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";
import OptionsHelper from "../../utils/helpers/options-helper";
import Button from ".";

const getIconKnobs = () => {
  const defaultPosition = Button.defaultProps.iconPosition;
  const hasIcon = boolean("has icon", false);
  return {
    iconType: hasIcon
      ? select("iconType", [...OptionsHelper.icons, ""], "")
      : undefined,
    iconPosition: hasIcon
      ? select(
          "iconPosition",
          [...OptionsHelper.buttonIconPositions],
          defaultPosition
        )
      : undefined,
  };
};
const getKnobs = () => {
  const size = select(
    "size",
    OptionsHelper.sizesRestricted,
    Button.defaultProps.size
  );
  return {
    children: text("children", "Example Button"),
    disabled: boolean("disabled", Button.defaultProps.disabled),
    onClick: (ev) => action("click")(ev),
    size,
    fullWidth: boolean("fullWidth", false),
    subtext:
      size === OptionsHelper.sizesRestricted[2]
        ? text("subtext", Button.defaultProps.subtext)
        : undefined,
    buttonType: select(
      "buttonType",
      OptionsHelper.buttonTypes,
      Button.defaultProps.as
    ),
    href: text("href"),
    destructive: boolean("destructive", false),
    noWrap: boolean("noWrap", false),
    ...getIconKnobs(),
  };
};
export const knobs = () => {
  const props = getKnobs();
  const { children } = props; // eslint-disable-line react/prop-types
  return <Button {...props}>{children}</Button>;
};
export const asASibling = () => {
  const props = getKnobs();
  const { children } = props; // eslint-disable-line react/prop-types
  return (

      <Button {...props}>{children}</Button>
      <Button {...props} ml={2}>
        {children}
      </Button>

  );
};
const generateButtons = (buttonType, iconPosition) => () => {
  return (
    <>
      {["", ...OptionsHelper.icons].map((iconType) => {
        const props = { iconPosition, buttonType, iconType };
        return (
          <div key={`${buttonType}-${iconPosition}-${iconType}`}>
            {OptionsHelper.sizesRestricted.map((size) => (
              <React.Fragment
                key={`${buttonType}-${iconPosition}-${iconType}-${size}`}
              >
                <Button key="basic" size={size} {...props} ml={2}>
                  {size}
                </Button>
                {size === "large" && (
                  <Button
                    key="subtext"
                    size={size}
                    subtext="line two"
                    {...props}
                    ml={2}
                  >
                    {size}
                  </Button>
                )}
              </React.Fragment>
            ))}
            {OptionsHelper.sizesRestricted.map((size) => (
              <React.Fragment
                key={`${buttonType}-${iconPosition}-${iconType}-${size}-destructive`}
              >
                <Button key="basic" size={size} destructive {...props} ml={2}>
                  {size}
                </Button>
                {size === "large" && (
                  <Button
                    key="subtext"
                    size={size}
                    destructive
                    subtext="line two"
                    {...props}
                    ml={2}
                  >
                    {size}
                  </Button>
                )}
              </React.Fragment>
            ))}
            {OptionsHelper.sizesRestricted.map((size) => (
              <React.Fragment
                key={`${buttonType}-${iconPosition}-${iconType}-${size}-disabled`}
              >
                <Button key="basic" size={size} disabled {...props} ml={2}>
                  {size}
                </Button>
                {size === "large" && (
                  <Button
                    key="subtext"
                    size={size}
                    disabled
                    subtext="line two"
                    {...props}
                    ml={2}
                  >
                    {size}
                  </Button>
                )}
              </React.Fragment>
            ))}

        );
      })}
    </>
  );
};
export const primaryButtonsIconsBefore = generateButtons("primary", "before");
export const primaryButtonsIconsAfter = generateButtons("primary", "after");
export const secondaryButtonsIconsBefore = generateButtons(
  "secondary",
  "before"
);
export const secondaryButtonsIconsAfter = generateButtons("secondary", "after");
export const tertiaryButtonsIconsBefore = generateButtons("tertiary", "before");
export const tertiaryButtonsIconsAfter = generateButtons("tertiary", "after");
export const dashedButtonsIconsBefore = generateButtons("dashed", "before");
export const dashedButtonsIconsAfter = generateButtons("dashed", "after");
export const darkBackgroundButtonsIconsBefore = generateButtons(
  "darkBackground",
  "before"
);
export const darkBackgroundButtonsIconsAfter = generateButtons(
  "darkBackground",
  "after"
);

export const noWrapButtons = () => {
  const noWrap = boolean("noWrap", true);
  return (
    <>
      {OptionsHelper.buttonTypes.map((buttonType) => {
        return OptionsHelper.sizesRestricted.map((size) => {
          return (

              <Button buttonType={buttonType} noWrap={noWrap} size={size}>
                Long button text
              </Button>
              <Button
                buttonType={buttonType}
                noWrap={noWrap}
                size={size}
                iconType="bin"
              >
                Long button text
              </Button>
              <Button
                buttonType={buttonType}
                noWrap={noWrap}
                size={size}
                iconType="bin"
                iconPosition="after"
              >
                Long button text
              </Button>
              <Button
                buttonType={buttonType}
                noWrap={noWrap}
                size="large"
                iconType="bin"
                subtext="Even longer button subtext"
              >
                Long button text
              </Button>
              <Button
                buttonType={buttonType}
                noWrap={noWrap}
                size="large"
                iconType="bin"
                iconPosition="after"
                subtext="Even longer button subtext"
              >
                Long button text
              </Button>

          );
        });
      })}
    </>
  );
};

export const iconOnlyButtons = () => {
  const binIcon = "bin";
  return (
    <>
      {OptionsHelper.buttonTypes.map((buttonType) => {
        return OptionsHelper.sizesRestricted.map((size) => {
          return (

              <Button
                buttonType={buttonType}
                size={size}
                iconType={binIcon}
                aria-label={binIcon}
              />

          );
        });
      })}
    </>
  );
};

export const fullWidthButtons = () => {
  return (
    <>
      {OptionsHelper.buttonTypes.map((buttonType) => {
        const props = { buttonType, fullWidth: true };
        return (
          <React.Fragment key={`${buttonType}-${buttonType}`}>
            {OptionsHelper.sizesRestricted.map((size) => (
              <React.Fragment key={`${buttonType}-${buttonType}-${size}`}>
                <Button key="basic" size={size} {...props} ml={2}>
                  {size}
                </Button>
                <Button key="basic-icon" size={size} {...props} iconType="bin">
                  {size}
                </Button>
                <Button
                  key="basic-icon-after"
                  size={size}
                  {...props}
                  iconType="bin"
                  iconPosition="after"
                  ml={2}
                >
                  {size}
                </Button>
                {size === "large" && (
                  <>
                    <Button
                      key="subtext"
                      size={size}
                      subtext="line two"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                    <Button
                      key="subtext-icon"
                      size={size}
                      subtext="line two"
                      iconType="bin"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                    <Button
                      key="subtext-icon-after"
                      size={size}
                      subtext="line two"
                      iconType="bin"
                      iconPosition="after"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                  </>
                )}
              </React.Fragment>
            ))}
            {OptionsHelper.sizesRestricted.map((size) => (
              <React.Fragment
                key={`${buttonType}-${buttonType}-${size}-destructive`}
              >
                <Button key="basic" size={size} destructive {...props} ml={2}>
                  {size}
                </Button>
                <Button
                  key="basic-icon"
                  size={size}
                  destructive
                  iconType="bin"
                  {...props}
                  ml={2}
                >
                  {size}
                </Button>
                <Button
                  key="basic-icon-after"
                  size={size}
                  destructive
                  iconType="bin"
                  iconPosition="after"
                  {...props}
                >
                  {size}
                </Button>
                {size === "large" && (
                  <>
                    <Button
                      key="subtext"
                      size={size}
                      destructive
                      subtext="line two"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                    <Button
                      key="subtext-icon"
                      size={size}
                      destructive
                      subtext="line two"
                      iconType="bin"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                    <Button
                      key="subtext-icon-after"
                      size={size}
                      destructive
                      subtext="line two"
                      iconType="bin"
                      iconPosition="after"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                  </>
                )}
              </React.Fragment>
            ))}
            {OptionsHelper.sizesRestricted.map((size) => (
              <React.Fragment
                key={`${buttonType}-${buttonType}-${size}-disabled`}
              >
                <Button key="basic" size={size} disabled {...props} ml={2}>
                  {size}
                </Button>
                <Button
                  key="basic-icon"
                  size={size}
                  disabled
                  iconType="bin"
                  {...props}
                >
                  {size}
                </Button>
                <Button
                  key="basic-icon-after"
                  size={size}
                  disabled
                  iconType="bin"
                  iconPosition="after"
                  {...props}
                  ml={2}
                >
                  {size}
                </Button>
                {size === "large" && (
                  <>
                    <Button
                      key="subtext"
                      size={size}
                      disabled
                      subtext="line two"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                    <Button
                      key="subtext-icon"
                      size={size}
                      disabled
                      subtext="line two"
                      iconType="bin"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                    <Button
                      key="subtext-icon-after"
                      size={size}
                      disabled
                      subtext="line two"
                      iconType="bin"
                      iconPosition="after"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                  </>
                )}
              </React.Fragment>
            ))}
          </React.Fragment>
        );
      })}
    </>
  );
};

export default {
  component: Button,
  title: "Design System/Button/Test",
  parameters: {
    info: { disable: true },
    chromatic: {
      disable: false,
    },
    knobs: { escapeHTML: false },
  },
};

primaryButtonsIconsBefore.story = {
  name: "primary buttons icons before",
};

primaryButtonsIconsAfter.story = {
  name: "primary buttons icons after",
};

secondaryButtonsIconsBefore.story = {
  name: "secondary buttons icons before",
};

secondaryButtonsIconsAfter.story = {
  name: "secondary buttons icons after",
};

tertiaryButtonsIconsBefore.story = {
  name: "tertiary buttons icons before",
};

tertiaryButtonsIconsAfter.story = {
  name: "tertiary buttons icons after",
};

dashedButtonsIconsBefore.story = {
  name: "dashed buttons icons before",
};

dashedButtonsIconsAfter.story = {
  name: "dashed buttons icons after",
};

darkBackgroundButtonsIconsBefore.story = {
  name: "darkBackground buttons icons before",
};

darkBackgroundButtonsIconsAfter.story = {
  name: "darkBackground buttons icons after",
};

asASibling.story = {
  name: "as a sibling",
  parameters: {
    chromatic: {
      disable: true,
    },
    knobs: { escapeHTML: false },
  },
};

knobs.story = {
  name: "knobs",
  parameters: {
    chromatic: {
      disable: true,
    },
    knobs: { escapeHTML: false },
  },
};

fullWidthButtons.story = {
  name: "full width buttons",
};

iconOnlyButtons.story = {
  name: "icon only buttons",
  parameters: {
    chromatic: {
      disable: true,
    },
    knobs: { escapeHTML: false },
  },
};
<commit_msg>docs(button): change no wrap story title to lowercase<commit_after>import React from "react";
import { text, select, boolean } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";
import OptionsHelper from "../../utils/helpers/options-helper";
import Button from ".";

const getIconKnobs = () => {
  const defaultPosition = Button.defaultProps.iconPosition;
  const hasIcon = boolean("has icon", false);
  return {
    iconType: hasIcon
      ? select("iconType", [...OptionsHelper.icons, ""], "")
      : undefined,
    iconPosition: hasIcon
      ? select(
          "iconPosition",
          [...OptionsHelper.buttonIconPositions],
          defaultPosition
        )
      : undefined,
  };
};
const getKnobs = () => {
  const size = select(
    "size",
    OptionsHelper.sizesRestricted,
    Button.defaultProps.size
  );
  return {
    children: text("children", "Example Button"),
    disabled: boolean("disabled", Button.defaultProps.disabled),
    onClick: (ev) => action("click")(ev),
    size,
    fullWidth: boolean("fullWidth", false),
    subtext:
      size === OptionsHelper.sizesRestricted[2]
        ? text("subtext", Button.defaultProps.subtext)
        : undefined,
    buttonType: select(
      "buttonType",
      OptionsHelper.buttonTypes,
      Button.defaultProps.as
    ),
    href: text("href"),
    destructive: boolean("destructive", false),
    noWrap: boolean("noWrap", false),
    ...getIconKnobs(),
  };
};
export const knobs = () => {
  const props = getKnobs();
  const { children } = props; // eslint-disable-line react/prop-types
  return <Button {...props}>{children}</Button>;
};
export const asASibling = () => {
  const props = getKnobs();
  const { children } = props; // eslint-disable-line react/prop-types
  return (

      <Button {...props}>{children}</Button>
      <Button {...props} ml={2}>
        {children}
      </Button>

  );
};
const generateButtons = (buttonType, iconPosition) => () => {
  return (
    <>
      {["", ...OptionsHelper.icons].map((iconType) => {
        const props = { iconPosition, buttonType, iconType };
        return (
          <div key={`${buttonType}-${iconPosition}-${iconType}`}>
            {OptionsHelper.sizesRestricted.map((size) => (
              <React.Fragment
                key={`${buttonType}-${iconPosition}-${iconType}-${size}`}
              >
                <Button key="basic" size={size} {...props} ml={2}>
                  {size}
                </Button>
                {size === "large" && (
                  <Button
                    key="subtext"
                    size={size}
                    subtext="line two"
                    {...props}
                    ml={2}
                  >
                    {size}
                  </Button>
                )}
              </React.Fragment>
            ))}
            {OptionsHelper.sizesRestricted.map((size) => (
              <React.Fragment
                key={`${buttonType}-${iconPosition}-${iconType}-${size}-destructive`}
              >
                <Button key="basic" size={size} destructive {...props} ml={2}>
                  {size}
                </Button>
                {size === "large" && (
                  <Button
                    key="subtext"
                    size={size}
                    destructive
                    subtext="line two"
                    {...props}
                    ml={2}
                  >
                    {size}
                  </Button>
                )}
              </React.Fragment>
            ))}
            {OptionsHelper.sizesRestricted.map((size) => (
              <React.Fragment
                key={`${buttonType}-${iconPosition}-${iconType}-${size}-disabled`}
              >
                <Button key="basic" size={size} disabled {...props} ml={2}>
                  {size}
                </Button>
                {size === "large" && (
                  <Button
                    key="subtext"
                    size={size}
                    disabled
                    subtext="line two"
                    {...props}
                    ml={2}
                  >
                    {size}
                  </Button>
                )}
              </React.Fragment>
            ))}

        );
      })}
    </>
  );
};
export const primaryButtonsIconsBefore = generateButtons("primary", "before");
export const primaryButtonsIconsAfter = generateButtons("primary", "after");
export const secondaryButtonsIconsBefore = generateButtons(
  "secondary",
  "before"
);
export const secondaryButtonsIconsAfter = generateButtons("secondary", "after");
export const tertiaryButtonsIconsBefore = generateButtons("tertiary", "before");
export const tertiaryButtonsIconsAfter = generateButtons("tertiary", "after");
export const dashedButtonsIconsBefore = generateButtons("dashed", "before");
export const dashedButtonsIconsAfter = generateButtons("dashed", "after");
export const darkBackgroundButtonsIconsBefore = generateButtons(
  "darkBackground",
  "before"
);
export const darkBackgroundButtonsIconsAfter = generateButtons(
  "darkBackground",
  "after"
);

export const noWrapButtons = () => {
  const noWrap = boolean("noWrap", true);
  return (
    <>
      {OptionsHelper.buttonTypes.map((buttonType) => {
        return OptionsHelper.sizesRestricted.map((size) => {
          return (

              <Button buttonType={buttonType} noWrap={noWrap} size={size}>
                Long button text
              </Button>
              <Button
                buttonType={buttonType}
                noWrap={noWrap}
                size={size}
                iconType="bin"
              >
                Long button text
              </Button>
              <Button
                buttonType={buttonType}
                noWrap={noWrap}
                size={size}
                iconType="bin"
                iconPosition="after"
              >
                Long button text
              </Button>
              <Button
                buttonType={buttonType}
                noWrap={noWrap}
                size="large"
                iconType="bin"
                subtext="Even longer button subtext"
              >
                Long button text
              </Button>
              <Button
                buttonType={buttonType}
                noWrap={noWrap}
                size="large"
                iconType="bin"
                iconPosition="after"
                subtext="Even longer button subtext"
              >
                Long button text
              </Button>

          );
        });
      })}
    </>
  );
};

export const iconOnlyButtons = () => {
  const binIcon = "bin";
  return (
    <>
      {OptionsHelper.buttonTypes.map((buttonType) => {
        return OptionsHelper.sizesRestricted.map((size) => {
          return (

              <Button
                buttonType={buttonType}
                size={size}
                iconType={binIcon}
                aria-label={binIcon}
              />

          );
        });
      })}
    </>
  );
};

export const fullWidthButtons = () => {
  return (
    <>
      {OptionsHelper.buttonTypes.map((buttonType) => {
        const props = { buttonType, fullWidth: true };
        return (
          <React.Fragment key={`${buttonType}-${buttonType}`}>
            {OptionsHelper.sizesRestricted.map((size) => (
              <React.Fragment key={`${buttonType}-${buttonType}-${size}`}>
                <Button key="basic" size={size} {...props} ml={2}>
                  {size}
                </Button>
                <Button key="basic-icon" size={size} {...props} iconType="bin">
                  {size}
                </Button>
                <Button
                  key="basic-icon-after"
                  size={size}
                  {...props}
                  iconType="bin"
                  iconPosition="after"
                  ml={2}
                >
                  {size}
                </Button>
                {size === "large" && (
                  <>
                    <Button
                      key="subtext"
                      size={size}
                      subtext="line two"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                    <Button
                      key="subtext-icon"
                      size={size}
                      subtext="line two"
                      iconType="bin"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                    <Button
                      key="subtext-icon-after"
                      size={size}
                      subtext="line two"
                      iconType="bin"
                      iconPosition="after"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                  </>
                )}
              </React.Fragment>
            ))}
            {OptionsHelper.sizesRestricted.map((size) => (
              <React.Fragment
                key={`${buttonType}-${buttonType}-${size}-destructive`}
              >
                <Button key="basic" size={size} destructive {...props} ml={2}>
                  {size}
                </Button>
                <Button
                  key="basic-icon"
                  size={size}
                  destructive
                  iconType="bin"
                  {...props}
                  ml={2}
                >
                  {size}
                </Button>
                <Button
                  key="basic-icon-after"
                  size={size}
                  destructive
                  iconType="bin"
                  iconPosition="after"
                  {...props}
                >
                  {size}
                </Button>
                {size === "large" && (
                  <>
                    <Button
                      key="subtext"
                      size={size}
                      destructive
                      subtext="line two"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                    <Button
                      key="subtext-icon"
                      size={size}
                      destructive
                      subtext="line two"
                      iconType="bin"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                    <Button
                      key="subtext-icon-after"
                      size={size}
                      destructive
                      subtext="line two"
                      iconType="bin"
                      iconPosition="after"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                  </>
                )}
              </React.Fragment>
            ))}
            {OptionsHelper.sizesRestricted.map((size) => (
              <React.Fragment
                key={`${buttonType}-${buttonType}-${size}-disabled`}
              >
                <Button key="basic" size={size} disabled {...props} ml={2}>
                  {size}
                </Button>
                <Button
                  key="basic-icon"
                  size={size}
                  disabled
                  iconType="bin"
                  {...props}
                >
                  {size}
                </Button>
                <Button
                  key="basic-icon-after"
                  size={size}
                  disabled
                  iconType="bin"
                  iconPosition="after"
                  {...props}
                  ml={2}
                >
                  {size}
                </Button>
                {size === "large" && (
                  <>
                    <Button
                      key="subtext"
                      size={size}
                      disabled
                      subtext="line two"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                    <Button
                      key="subtext-icon"
                      size={size}
                      disabled
                      subtext="line two"
                      iconType="bin"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                    <Button
                      key="subtext-icon-after"
                      size={size}
                      disabled
                      subtext="line two"
                      iconType="bin"
                      iconPosition="after"
                      {...props}
                      ml={2}
                    >
                      {size}
                    </Button>
                  </>
                )}
              </React.Fragment>
            ))}
          </React.Fragment>
        );
      })}
    </>
  );
};

export default {
  component: Button,
  title: "Design System/Button/Test",
  parameters: {
    info: { disable: true },
    chromatic: {
      disable: false,
    },
    knobs: { escapeHTML: false },
  },
};

primaryButtonsIconsBefore.story = {
  name: "primary buttons icons before",
};

primaryButtonsIconsAfter.story = {
  name: "primary buttons icons after",
};

secondaryButtonsIconsBefore.story = {
  name: "secondary buttons icons before",
};

secondaryButtonsIconsAfter.story = {
  name: "secondary buttons icons after",
};

tertiaryButtonsIconsBefore.story = {
  name: "tertiary buttons icons before",
};

tertiaryButtonsIconsAfter.story = {
  name: "tertiary buttons icons after",
};

dashedButtonsIconsBefore.story = {
  name: "dashed buttons icons before",
};

dashedButtonsIconsAfter.story = {
  name: "dashed buttons icons after",
};

darkBackgroundButtonsIconsBefore.story = {
  name: "darkBackground buttons icons before",
};

darkBackgroundButtonsIconsAfter.story = {
  name: "darkBackground buttons icons after",
};

asASibling.story = {
  name: "as a sibling",
  parameters: {
    chromatic: {
      disable: true,
    },
    knobs: { escapeHTML: false },
  },
};

knobs.story = {
  name: "knobs",
  parameters: {
    chromatic: {
      disable: true,
    },
    knobs: { escapeHTML: false },
  },
};

fullWidthButtons.story = {
  name: "full width buttons",
};

noWrapButtons.story = {
  name: "no wrap buttons",
};

iconOnlyButtons.story = {
  name: "icon only buttons",
  parameters: {
    chromatic: {
      disable: true,
    },
    knobs: { escapeHTML: false },
  },
};
<|endoftext|>


<commit_before>'use strict'

angular.module('serinaApp').directive('basicSettings', function ($rootScope, $mdColorPalette, $i18next, LocalStorage) {
  return {
    restrict: 'E',
    templateUrl: 'views/settings/basic-settings.html',
    link: function (scope) {

      scope.displayFormat = [
        { label: 'card', icon: 'view_agenda' },
        { label: 'list', icon: 'list' }
      ]

      scope.changeDisplayFormat = function (format) {
        $rootScope.settings.selectedDisplayFormat = format
        LocalStorage.setItem($rootScope.keySettingsApp, $rootScope.settings)
      }

      scope.languages = [
        { code: 'es' },
        { code: 'en' },
        { code: 'fr' }
      ]

      scope.changeLocaleOfApplication = function (language) {
        $rootScope.settings.locale = language
        window.i18next.changeLanguage($rootScope.settings.locale)
        LocalStorage.setItem($rootScope.keySettingsApp, $rootScope.settings)
      }

      scope.colors = [
        { label: 'commons.themeColor.indigo', value: 'indigo' },
        { label: 'commons.themeColor.green', value: 'green' },
        { label: 'commons.themeColor.orange', value: 'orange' },
        { label: 'commons.themeColor.purple', value: 'purple' },
        { label: 'commons.themeColor.brown', value: 'brown' },
        { label: 'commons.themeColor.grey', value: 'grey' }
      ]

      scope.changeColor = function (color) {
        $rootScope.settings.theme = color
        LocalStorage.setItem($rootScope.keySettingsApp, $rootScope.settings)
      }

    }
  }
})
<commit_msg>Maj order locales of app<commit_after>'use strict'

angular.module('serinaApp').directive('basicSettings', function ($rootScope, $mdColorPalette, $i18next, LocalStorage) {
  return {
    restrict: 'E',
    templateUrl: 'views/settings/basic-settings.html',
    link: function (scope) {

      scope.displayFormat = [
        { label: 'card', icon: 'view_agenda' },
        { label: 'list', icon: 'list' }
      ]

      scope.changeDisplayFormat = function (format) {
        $rootScope.settings.selectedDisplayFormat = format
        LocalStorage.setItem($rootScope.keySettingsApp, $rootScope.settings)
      }

      scope.languages = [
        { code: 'en' },
        { code: 'es' },
        { code: 'fr' }
      ]

      scope.changeLocaleOfApplication = function (language) {
        $rootScope.settings.locale = language
        window.i18next.changeLanguage($rootScope.settings.locale)
        LocalStorage.setItem($rootScope.keySettingsApp, $rootScope.settings)
      }

      scope.colors = [
        { label: 'commons.themeColor.indigo', value: 'indigo' },
        { label: 'commons.themeColor.green', value: 'green' },
        { label: 'commons.themeColor.orange', value: 'orange' },
        { label: 'commons.themeColor.purple', value: 'purple' },
        { label: 'commons.themeColor.brown', value: 'brown' },
        { label: 'commons.themeColor.grey', value: 'grey' }
      ]

      scope.changeColor = function (color) {
        $rootScope.settings.theme = color
        LocalStorage.setItem($rootScope.keySettingsApp, $rootScope.settings)
      }

    }
  }
})
<|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 sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher');
var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc');

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

    Phase : {
        MemberList: 'MemberList',
        FileList: 'FileList',
        MemberInfo: 'MemberInfo',
    },

    componentWillMount: function() {
        this.dispatcherRef = dis.register(this.onAction);
        var cli = MatrixClientPeg.get();
        cli.on("RoomState.members", this.onRoomStateMember);
    },

    componentWillUnmount: function() {
        dis.unregister(this.dispatcherRef);
        if (MatrixClientPeg.get()) {
            MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
        }
    },

    getInitialState: function() {
        return {
            phase : this.Phase.MemberList
        }
    },

    onMemberListButtonClick: function() {
        if (this.props.collapsed) {
            this.setState({ phase: this.Phase.MemberList });
            dis.dispatch({
                action: 'show_right_panel',
            });
        }
        else {
            dis.dispatch({
                action: 'hide_right_panel',
            });
        }
    },

    onRoomStateMember: function(ev, state, member) {
        // redraw the badge on the membership list
        if (this.state.phase == this.Phase.MemberList && member.roomId === this.props.roomId) {
            this._delayedUpdate();
        }
        else if (this.state.phase === this.Phase.MemberInfo && member.roomId === this.props.roomId &&
                member.userId === this.state.member.userId) {
            // refresh the member info (e.g. new power level)
            this._delayedUpdate();
        }
    },

    _delayedUpdate: new rate_limited_func(function() {
        this.forceUpdate();
    }, 500),

    onAction: function(payload) {
        if (payload.action === "view_user") {
            if (payload.member) {
                this.setState({
                    phase: this.Phase.MemberInfo,
                    member: payload.member,
                });
            }
            else {
                this.setState({
                    phase: this.Phase.MemberList
                });
            }
        }
        if (payload.action === "view_room") {
            if (this.state.phase === this.Phase.MemberInfo) {
                this.setState({
                    phase: this.Phase.MemberList
                });
            }
        }
    },

    render: function() {
        var MemberList = sdk.getComponent('rooms.MemberList');
        var TintableSvg = sdk.getComponent("elements.TintableSvg");
        var buttonGroup;
        var panel;

        var filesHighlight;
        var membersHighlight;
        if (!this.props.collapsed) {
            if (this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) {
                membersHighlight =

;
            }
            else if (this.state.phase == this.Phase.FileList) {
                filesHighlight =

;
            }
        }

        var membersBadge;
        if ((this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) && this.props.roomId) {
            var cli = MatrixClientPeg.get();
            var room = cli.getRoom(this.props.roomId);
            if (room) {
                membersBadge =
{ room.getJoinedMembers().length }
;
            }
        }

        if (this.props.roomId) {
            buttonGroup =

                            <TintableSvg src="img/members.svg" width="17" height="22"/>
                            { membersBadge }
                            { membersHighlight }

                            <TintableSvg src="img/files.svg" width="17" height="22"/>
                            { filesHighlight }

;

            if (!this.props.collapsed) {
                if(this.state.phase == this.Phase.MemberList) {
                    panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />
                }
                else if(this.state.phase == this.Phase.MemberInfo) {
                    var MemberInfo = sdk.getComponent('rooms.MemberInfo');
                    panel = <MemberInfo roomId={this.props.roomId} member={this.state.member} key={this.props.roomId} />
                }
            }

        }

        var classes = "mx_RightPanel";
        if (this.props.collapsed) {
            classes += " collapsed";
        }

        return (

                    { buttonGroup }

                { panel }

        );
    }
});

<commit_msg>show right panel if needed when viewing users<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 sdk = require('matrix-react-sdk')
var dis = require('matrix-react-sdk/lib/dispatcher');
var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc');

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

    Phase : {
        MemberList: 'MemberList',
        FileList: 'FileList',
        MemberInfo: 'MemberInfo',
    },

    componentWillMount: function() {
        this.dispatcherRef = dis.register(this.onAction);
        var cli = MatrixClientPeg.get();
        cli.on("RoomState.members", this.onRoomStateMember);
    },

    componentWillUnmount: function() {
        dis.unregister(this.dispatcherRef);
        if (MatrixClientPeg.get()) {
            MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
        }
    },

    getInitialState: function() {
        return {
            phase : this.Phase.MemberList
        }
    },

    onMemberListButtonClick: function() {
        if (this.props.collapsed) {
            this.setState({ phase: this.Phase.MemberList });
            dis.dispatch({
                action: 'show_right_panel',
            });
        }
        else {
            dis.dispatch({
                action: 'hide_right_panel',
            });
        }
    },

    onRoomStateMember: function(ev, state, member) {
        // redraw the badge on the membership list
        if (this.state.phase == this.Phase.MemberList && member.roomId === this.props.roomId) {
            this._delayedUpdate();
        }
        else if (this.state.phase === this.Phase.MemberInfo && member.roomId === this.props.roomId &&
                member.userId === this.state.member.userId) {
            // refresh the member info (e.g. new power level)
            this._delayedUpdate();
        }
    },

    _delayedUpdate: new rate_limited_func(function() {
        this.forceUpdate();
    }, 500),

    onAction: function(payload) {
        if (payload.action === "view_user") {
            dis.dispatch({
                action: 'show_right_panel',
            });
            if (payload.member) {
                this.setState({
                    phase: this.Phase.MemberInfo,
                    member: payload.member,
                });
            }
            else {
                this.setState({
                    phase: this.Phase.MemberList
                });
            }
        }
        if (payload.action === "view_room") {
            if (this.state.phase === this.Phase.MemberInfo) {
                this.setState({
                    phase: this.Phase.MemberList
                });
            }
        }
    },

    render: function() {
        var MemberList = sdk.getComponent('rooms.MemberList');
        var TintableSvg = sdk.getComponent("elements.TintableSvg");
        var buttonGroup;
        var panel;

        var filesHighlight;
        var membersHighlight;
        if (!this.props.collapsed) {
            if (this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) {
                membersHighlight =

;
            }
            else if (this.state.phase == this.Phase.FileList) {
                filesHighlight =

;
            }
        }

        var membersBadge;
        if ((this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) && this.props.roomId) {
            var cli = MatrixClientPeg.get();
            var room = cli.getRoom(this.props.roomId);
            if (room) {
                membersBadge =
{ room.getJoinedMembers().length }
;
            }
        }

        if (this.props.roomId) {
            buttonGroup =

                            <TintableSvg src="img/members.svg" width="17" height="22"/>
                            { membersBadge }
                            { membersHighlight }

                            <TintableSvg src="img/files.svg" width="17" height="22"/>
                            { filesHighlight }

;

            if (!this.props.collapsed) {
                if(this.state.phase == this.Phase.MemberList) {
                    panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />
                }
                else if(this.state.phase == this.Phase.MemberInfo) {
                    var MemberInfo = sdk.getComponent('rooms.MemberInfo');
                    panel = <MemberInfo roomId={this.props.roomId} member={this.state.member} key={this.props.roomId} />
                }
            }

        }

        var classes = "mx_RightPanel";
        if (this.props.collapsed) {
            classes += " collapsed";
        }

        return (

                    { buttonGroup }

                { panel }

        );
    }
});

<|endoftext|>