summaryrefslogtreecommitdiffstats
path: root/src/generic-components
diff options
context:
space:
mode:
Diffstat (limited to 'src/generic-components')
-rw-r--r--src/generic-components/autoCompleteSearchBar/AutoCompleteSearchBar.jsx16
-rw-r--r--src/generic-components/componentManager/ComponentManagerContainer.jsx16
-rw-r--r--src/generic-components/graph/Link.jsx66
-rw-r--r--src/generic-components/graph/Node.jsx54
-rw-r--r--src/generic-components/graph/SVGShape.jsx66
-rw-r--r--src/generic-components/input/ToggleInput.jsx100
-rw-r--r--src/generic-components/input/inputOptions/InputOptions.jsx418
-rw-r--r--src/generic-components/map/TopographicMap.jsx2
-rw-r--r--src/generic-components/notifications/NotificationModal.jsx158
-rw-r--r--src/generic-components/panel/SlidePanel.jsx216
-rw-r--r--src/generic-components/titledContainer/TitledContainer.jsx2
-rw-r--r--src/generic-components/toggleButtonGroup/ToggleButtonGroup.jsx78
12 files changed, 596 insertions, 596 deletions
diff --git a/src/generic-components/autoCompleteSearchBar/AutoCompleteSearchBar.jsx b/src/generic-components/autoCompleteSearchBar/AutoCompleteSearchBar.jsx
index b7fca67..4f93125 100644
--- a/src/generic-components/autoCompleteSearchBar/AutoCompleteSearchBar.jsx
+++ b/src/generic-components/autoCompleteSearchBar/AutoCompleteSearchBar.jsx
@@ -94,13 +94,13 @@ export default class AutoCompleteSearchBar extends Component {
render() {
const {
- value, suggestions,
- suggestionName, cachedSuggestions,
- onInputChange, onInvalidSearch,
- onClearSuggestionsTextFieldRequested,
- onSuggestionsClearRequested,
- dispatchAnalytics
- } = this.props;
+ value, suggestions,
+ suggestionName, cachedSuggestions,
+ onInputChange, onInvalidSearch,
+ onClearSuggestionsTextFieldRequested,
+ onSuggestionsClearRequested,
+ dispatchAnalytics
+ } = this.props;
const inputProps = {
placeholder: SEARCH_PLACEHOLDER_TEXT,
value,
@@ -201,7 +201,7 @@ export default class AutoCompleteSearchBar extends Component {
rest.className = 'react-autosuggest__suggestions-containerCopy';
}
return (
- <div {...rest}>
+ <div {...rest.containerProps} {...rest}>
{children}
</div>
);
diff --git a/src/generic-components/componentManager/ComponentManagerContainer.jsx b/src/generic-components/componentManager/ComponentManagerContainer.jsx
index 02a3eba..cd51d37 100644
--- a/src/generic-components/componentManager/ComponentManagerContainer.jsx
+++ b/src/generic-components/componentManager/ComponentManagerContainer.jsx
@@ -18,7 +18,7 @@
* limitations under the License.
* ============LICENSE_END=========================================================
*/
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
import { PropTypes } from 'prop-types';
import ButtonGroup from 'react-bootstrap/lib/ButtonGroup';
import Button from 'react-bootstrap/lib/Button';
@@ -53,13 +53,13 @@ export default class ComponentManagerContainer extends Component {
render() {
let {
- title,
- actions,
- children,
- showHeader,
- showTitle,
- showBorder
- } = this.props;
+ title,
+ actions,
+ children,
+ showHeader,
+ showTitle,
+ showBorder
+ } = this.props;
let buttons = [];
actions.forEach((action) => {
switch (action.type) {
diff --git a/src/generic-components/graph/Link.jsx b/src/generic-components/graph/Link.jsx
index aec33b8..8c87ac5 100644
--- a/src/generic-components/graph/Link.jsx
+++ b/src/generic-components/graph/Link.jsx
@@ -24,39 +24,39 @@ import { PropTypes } from 'prop-types';
import TempCreateAttributes from './TempCreateAttributes.js';
class Link extends Component {
-
- static propTypes = {
- x1: PropTypes.number,
- y1: PropTypes.number,
- x2: PropTypes.number,
- y2: PropTypes.number,
- linkAttributes: PropTypes.object
- };
-
- static defaultProps = {
- x1: 0,
- y1: 0,
- x2: 0,
- y2: 0,
- linkAttributes: {}
- };
-
- render() {
- let {x1, y1, x2, y2, linkAttributes} = this.props;
-
- let combinedAttributes = {
- ...linkAttributes,
- x1: x1,
- y1: y1,
- x2: x2,
- y2: y2
- };
-
- return (
- <line {...combinedAttributes}
- style={TempCreateAttributes.createLineStyle()}/>
- );
- }
+
+ static propTypes = {
+ x1: PropTypes.number,
+ y1: PropTypes.number,
+ x2: PropTypes.number,
+ y2: PropTypes.number,
+ linkAttributes: PropTypes.object
+ };
+
+ static defaultProps = {
+ x1: 0,
+ y1: 0,
+ x2: 0,
+ y2: 0,
+ linkAttributes: {}
+ };
+
+ render() {
+ let {x1, y1, x2, y2, linkAttributes} = this.props;
+
+ let combinedAttributes = {
+ ...linkAttributes,
+ x1: x1,
+ y1: y1,
+ x2: x2,
+ y2: y2
+ };
+
+ return (
+ <line {...combinedAttributes}
+ style={TempCreateAttributes.createLineStyle()}/>
+ );
+ }
}
export default Link;
diff --git a/src/generic-components/graph/Node.jsx b/src/generic-components/graph/Node.jsx
index 6de4715..67d954c 100644
--- a/src/generic-components/graph/Node.jsx
+++ b/src/generic-components/graph/Node.jsx
@@ -22,33 +22,33 @@ import React, {Component} from 'react';
import { PropTypes } from 'prop-types';
class Node extends Component {
-
- static propTypes = {
- x: PropTypes.number,
- y: PropTypes.number,
- nodeClass: PropTypes.string,
- visualElements: PropTypes.array,
- meta: PropTypes.object
- };
-
- static defaultProps = {
- x: 0,
- y: 0,
- nodeClass: '',
- visualElements: [],
- meta: {}
- };
-
- render() {
- let {x, y, nodeClass, visualElements} = this.props;
- let translate = `translate(${x}, ${y})`;
-
- return (
- <g className={nodeClass} transform={translate}>
- {visualElements}
- </g>
- );
- }
+
+ static propTypes = {
+ x: PropTypes.number,
+ y: PropTypes.number,
+ nodeClass: PropTypes.string,
+ visualElements: PropTypes.array,
+ meta: PropTypes.object
+ };
+
+ static defaultProps = {
+ x: 0,
+ y: 0,
+ nodeClass: '',
+ visualElements: [],
+ meta: {}
+ };
+
+ render() {
+ let {x, y, nodeClass, visualElements} = this.props;
+ let translate = `translate(${x}, ${y})`;
+
+ return (
+ <g className={nodeClass} transform={translate}>
+ {visualElements}
+ </g>
+ );
+ }
}
export default Node;
diff --git a/src/generic-components/graph/SVGShape.jsx b/src/generic-components/graph/SVGShape.jsx
index b06c46f..8b33598 100644
--- a/src/generic-components/graph/SVGShape.jsx
+++ b/src/generic-components/graph/SVGShape.jsx
@@ -23,39 +23,39 @@ import { PropTypes } from 'prop-types';
import NodeVisualElementConstants from './NodeVisualElementConstants';
class SVGShape extends Component {
-
- static propTypes = {
- shapeType: PropTypes.string.isRequired,
- shapeAttributes: PropTypes.object.isRequired,
- shapeClass: PropTypes.object.isRequired,
- textValue: PropTypes.string
- };
-
- static defaultProps = {
- shapeType: '',
- shapeAttributes: {},
- shapeClass: {},
- textValue: ''
- };
-
- render() {
- let {shapeType, shapeAttributes, shapeClass, textValue} = this.props;
-
- switch (shapeType) {
- case NodeVisualElementConstants.SVG_CIRCLE:
- return <circle {...shapeAttributes} className={shapeClass}/>;
-
- case NodeVisualElementConstants.SVG_LINELINE:
- return <line {...shapeAttributes} className={shapeClass}/>;
-
- case NodeVisualElementConstants.TEXT:
- return <text {...shapeAttributes}
- className={shapeClass}>{textValue}</text>;
-
- default:
- return undefined;
- }
- }
+
+ static propTypes = {
+ shapeType: PropTypes.string.isRequired,
+ shapeAttributes: PropTypes.object.isRequired,
+ shapeClass: PropTypes.object.isRequired,
+ textValue: PropTypes.string
+ };
+
+ static defaultProps = {
+ shapeType: '',
+ shapeAttributes: {},
+ shapeClass: {},
+ textValue: ''
+ };
+
+ render() {
+ let {shapeType, shapeAttributes, shapeClass, textValue} = this.props;
+
+ switch (shapeType) {
+ case NodeVisualElementConstants.SVG_CIRCLE:
+ return <circle {...shapeAttributes} className={shapeClass}/>;
+
+ case NodeVisualElementConstants.SVG_LINELINE:
+ return <line {...shapeAttributes} className={shapeClass}/>;
+
+ case NodeVisualElementConstants.TEXT:
+ return <text {...shapeAttributes}
+ className={shapeClass}>{textValue}</text>;
+
+ default:
+ return undefined;
+ }
+ }
}
export default SVGShape;
diff --git a/src/generic-components/input/ToggleInput.jsx b/src/generic-components/input/ToggleInput.jsx
index 49b0376..f68758a 100644
--- a/src/generic-components/input/ToggleInput.jsx
+++ b/src/generic-components/input/ToggleInput.jsx
@@ -23,54 +23,54 @@ import { PropTypes } from 'prop-types';
export default
class ToggleInput extends React.Component {
-
- static propTypes = {
- label: PropTypes.node,
- value: PropTypes.bool,
- onChange: PropTypes.func,
- disabled: PropTypes.bool
- }
-
- static defaultProps = {
- value: false,
- label: ''
- }
-
- state = {
- value: this.props.value
- }
-
- status() {
- return this.state.value ? 'on' : 'off';
- }
-
- render() {
- let {label, disabled} = this.props;
- let checked = this.status() === 'on';
- return (
- <div className='toggle-input-wrapper form-group'
- onClick={!disabled && this.click}>
- <div className='toggle-input-label'>{label}</div>
- <div className='toggle-switch'>
- <input className='toggle toggle-round-flat' type='checkbox'
- checked={checked} readOnly/>
- <label></label>
- </div>
- </div>
- );
- }
-
- click = () => {
- let value = !this.state.value;
- this.setState({value});
-
- let onChange = this.props.onChange;
- if (onChange) {
- onChange(value);
- }
- }
-
- getValue() {
- return this.state.value;
- }
+
+ static propTypes = {
+ label: PropTypes.node,
+ value: PropTypes.bool,
+ onChange: PropTypes.func,
+ disabled: PropTypes.bool
+ }
+
+ static defaultProps = {
+ value: false,
+ label: ''
+ }
+
+ state = {
+ value: this.props.value
+ }
+
+ status() {
+ return this.state.value ? 'on' : 'off';
+ }
+
+ render() {
+ let {label, disabled} = this.props;
+ let checked = this.status() === 'on';
+ return (
+ <div className='toggle-input-wrapper form-group'
+ onClick={!disabled && this.click}>
+ <div className='toggle-input-label'>{label}</div>
+ <div className='toggle-switch'>
+ <input className='toggle toggle-round-flat' type='checkbox'
+ checked={checked} readOnly/>
+ <label></label>
+ </div>
+ </div>
+ );
+ }
+
+ click = () => {
+ let value = !this.state.value;
+ this.setState({value});
+
+ let onChange = this.props.onChange;
+ if (onChange) {
+ onChange(value);
+ }
+ }
+
+ getValue() {
+ return this.state.value;
+ }
}
diff --git a/src/generic-components/input/inputOptions/InputOptions.jsx b/src/generic-components/input/inputOptions/InputOptions.jsx
index bb9d777..bf17df1 100644
--- a/src/generic-components/input/inputOptions/InputOptions.jsx
+++ b/src/generic-components/input/inputOptions/InputOptions.jsx
@@ -27,215 +27,215 @@ import Select from 'generic-components/input/SelectInput.jsx';
export const other = {OTHER: 'Other'};
class InputOptions extends React.Component {
-
- static propTypes = {
- values: PropTypes.arrayOf(PropTypes.shape({
- enum: PropTypes.string,
- title: PropTypes.string
- })),
- isEnabledOther: PropTypes.bool,
- title: PropTypes.string,
- selectedValue: PropTypes.string,
- multiSelectedEnum: PropTypes.array,
- selectedEnum: PropTypes.string,
- otherValue: PropTypes.string,
- onEnumChange: PropTypes.func,
- onOtherChange: PropTypes.func,
- isRequired: PropTypes.bool,
- isMultiSelect: PropTypes.bool
- };
-
-
- static contextTypes = {
- isReadOnlyMode: PropTypes.bool
- };
-
- state = {
- otherInputDisabled: !this.props.otherValue
- };
-
- oldProps = {
- selectedEnum: '',
- otherValue: '',
- multiSelectedEnum: []
- };
-
- render() {
- let {label, isRequired, values, otherValue, onOtherChange, isMultiSelect, onBlur, multiSelectedEnum, selectedEnum, hasError, validations, children} = this.props;
-
- let currentMultiSelectedEnum = [];
- let currentSelectedEnum = '';
- let {otherInputDisabled} = this.state;
- if (isMultiSelect) {
- currentMultiSelectedEnum = multiSelectedEnum;
- if (!otherInputDisabled) {
- currentSelectedEnum =
- multiSelectedEnum ? multiSelectedEnum.toString() : undefined;
- }
- }
- else {
- currentSelectedEnum = selectedEnum;
- }
-
- let isReadOnlyMode = this.context.isReadOnlyMode;
-
- return (
- <div
- className={classNames('form-group', {'required' : validations.required , 'has-error' : hasError})}>
- <label className='control-label'>{label}</label>
- {isMultiSelect && otherInputDisabled ?
- <Select
- ref='_myInput'
- value={currentMultiSelectedEnum}
- className='options-input'
- clearable={false}
- required={isRequired}
- disabled={isReadOnlyMode || Boolean(this.props.disabled)}
- onBlur={() => onBlur()}
- onMultiSelectChanged={value => this.multiSelectEnumChanged(value)}
- options={this.renderMultiSelectOptions(values)}
- multi/> :
- <div className={classNames('input-options',{'has-error' : hasError})}>
- <select
- ref={'_myInput'}
- label={label}
- className='form-control input-options-select'
- value={currentSelectedEnum}
- style={{'width' : otherInputDisabled ? '100%' : '95px'}}
- onBlur={() => onBlur()}
- disabled={isReadOnlyMode || Boolean(this.props.disabled)}
- onChange={ value => this.enumChanged(value)}
- type='select'>
- {values &&
- values.length &&
- values.map(val => this.renderOptions(val))}
- {onOtherChange && <option key='other'
- value={other.OTHER}>{i18n(
- other.OTHER)}</option>}
- {children}
- </select>
-
- {!otherInputDisabled && <div className='input-options-separator'/>}
- <input
- className='form-control input-options-other'
- placeholder={i18n('other')}
- ref='_otherValue'
- style={{'display' : otherInputDisabled ? 'none' : 'block'}}
- disabled={isReadOnlyMode || Boolean(this.props.disabled)}
- value={otherValue || ''}
- onBlur={() => onBlur()}
- onChange={() => this.changedOtherInput()}/>
- </div>
- }
- </div>
- );
- }
-
- renderOptions(val) {
- return (
- <option key={val.enum} value={val.enum}>{val.title}</option>
- );
- }
-
-
- renderMultiSelectOptions(values) {
- let {onOtherChange} = this.props;
- let optionsList = [];
- if (onOtherChange) {
- optionsList = values.map(option => {
- return {
- label: option.title,
- value: option.enum,
- };
- }).concat([{
- label: i18n(other.OTHER),
- value: i18n(other.OTHER),
- }]);
- }
- else {
- optionsList = values.map(option => {
- return {
- label: option.title,
- value: option.enum,
- };
- });
- }
- if (optionsList.length > 0 && optionsList[0].value === '') {
- optionsList.shift();
- }
- return optionsList;
- }
-
- getValue() {
- let res = '';
- let {isMultiSelect} = this.props;
- let {otherInputDisabled} = this.state;
-
- if (otherInputDisabled) {
- res =
- isMultiSelect
- ? this.refs._myInput.getValue()
- : this.refs._myInput.value;
- } else {
- res = this.refs._otherValue.value;
- }
- return res;
- }
-
- enumChanged() {
- let enumValue = this.refs._myInput.value;
- let {onEnumChange, isMultiSelect, onChange} = this.props;
- this.setState({
- otherInputDisabled: enumValue !== other.OTHER
- });
- if (onEnumChange) {
- onEnumChange(isMultiSelect ? [enumValue] : enumValue);
- }
-
- if (onChange) {
- onChange(enumValue);
- }
-
- }
-
- multiSelectEnumChanged(enumValue) {
- let {onEnumChange} = this.props;
- let selectedValues = enumValue.map(enumVal => {
- return enumVal.value;
- });
-
- if (this.state.otherInputDisabled === false) {
- selectedValues.shift();
- }
- else if (selectedValues.includes(i18n(other.OTHER))) {
- selectedValues = [i18n(other.OTHER)];
- }
-
- this.setState({
- otherInputDisabled: !selectedValues.includes(i18n(other.OTHER))
- });
- onEnumChange(selectedValues);
- }
-
- changedOtherInput() {
- let {onOtherChange} = this.props;
- onOtherChange(this.refs._otherValue.value);
- }
-
- componentDidUpdate() {
- let {otherValue, selectedEnum, onInputChange, multiSelectedEnum} = this.props;
- if (this.oldProps.otherValue !== otherValue
- || this.oldProps.selectedEnum !== selectedEnum
- || this.oldProps.multiSelectedEnum !== multiSelectedEnum) {
- this.oldProps = {
- otherValue,
- selectedEnum,
- multiSelectedEnum
- };
- onInputChange();
- }
- }
-
+
+ static propTypes = {
+ values: PropTypes.arrayOf(PropTypes.shape({
+ enum: PropTypes.string,
+ title: PropTypes.string
+ })),
+ isEnabledOther: PropTypes.bool,
+ title: PropTypes.string,
+ selectedValue: PropTypes.string,
+ multiSelectedEnum: PropTypes.array,
+ selectedEnum: PropTypes.string,
+ otherValue: PropTypes.string,
+ onEnumChange: PropTypes.func,
+ onOtherChange: PropTypes.func,
+ isRequired: PropTypes.bool,
+ isMultiSelect: PropTypes.bool
+ };
+
+
+ static contextTypes = {
+ isReadOnlyMode: PropTypes.bool
+ };
+
+ state = {
+ otherInputDisabled: !this.props.otherValue
+ };
+
+ oldProps = {
+ selectedEnum: '',
+ otherValue: '',
+ multiSelectedEnum: []
+ };
+
+ render() {
+ let {label, isRequired, values, otherValue, onOtherChange, isMultiSelect, onBlur, multiSelectedEnum, selectedEnum, hasError, validations, children} = this.props;
+
+ let currentMultiSelectedEnum = [];
+ let currentSelectedEnum = '';
+ let {otherInputDisabled} = this.state;
+ if (isMultiSelect) {
+ currentMultiSelectedEnum = multiSelectedEnum;
+ if (!otherInputDisabled) {
+ currentSelectedEnum =
+ multiSelectedEnum ? multiSelectedEnum.toString() : undefined;
+ }
+ }
+ else {
+ currentSelectedEnum = selectedEnum;
+ }
+
+ let isReadOnlyMode = this.context.isReadOnlyMode;
+
+ return (
+ <div
+ className={classNames('form-group', {'required' : validations.required , 'has-error' : hasError})}>
+ <label className='control-label'>{label}</label>
+ {isMultiSelect && otherInputDisabled ?
+ <Select
+ ref='_myInput'
+ value={currentMultiSelectedEnum}
+ className='options-input'
+ clearable={false}
+ required={isRequired}
+ disabled={isReadOnlyMode || Boolean(this.props.disabled)}
+ onBlur={() => onBlur()}
+ onMultiSelectChanged={value => this.multiSelectEnumChanged(value)}
+ options={this.renderMultiSelectOptions(values)}
+ multi/> :
+ <div className={classNames('input-options',{'has-error' : hasError})}>
+ <select
+ ref={'_myInput'}
+ label={label}
+ className='form-control input-options-select'
+ value={currentSelectedEnum}
+ style={{'width' : otherInputDisabled ? '100%' : '95px'}}
+ onBlur={() => onBlur()}
+ disabled={isReadOnlyMode || Boolean(this.props.disabled)}
+ onChange={ value => this.enumChanged(value)}
+ type='select'>
+ {values &&
+ values.length &&
+ values.map(val => this.renderOptions(val))}
+ {onOtherChange && <option key='other'
+ value={other.OTHER}>{i18n(
+ other.OTHER)}</option>}
+ {children}
+ </select>
+
+ {!otherInputDisabled && <div className='input-options-separator'/>}
+ <input
+ className='form-control input-options-other'
+ placeholder={i18n('other')}
+ ref='_otherValue'
+ style={{'display' : otherInputDisabled ? 'none' : 'block'}}
+ disabled={isReadOnlyMode || Boolean(this.props.disabled)}
+ value={otherValue || ''}
+ onBlur={() => onBlur()}
+ onChange={() => this.changedOtherInput()}/>
+ </div>
+ }
+ </div>
+ );
+ }
+
+ renderOptions(val) {
+ return (
+ <option key={val.enum} value={val.enum}>{val.title}</option>
+ );
+ }
+
+
+ renderMultiSelectOptions(values) {
+ let {onOtherChange} = this.props;
+ let optionsList = [];
+ if (onOtherChange) {
+ optionsList = values.map(option => {
+ return {
+ label: option.title,
+ value: option.enum,
+ };
+ }).concat([{
+ label: i18n(other.OTHER),
+ value: i18n(other.OTHER),
+ }]);
+ }
+ else {
+ optionsList = values.map(option => {
+ return {
+ label: option.title,
+ value: option.enum,
+ };
+ });
+ }
+ if (optionsList.length > 0 && optionsList[0].value === '') {
+ optionsList.shift();
+ }
+ return optionsList;
+ }
+
+ getValue() {
+ let res = '';
+ let {isMultiSelect} = this.props;
+ let {otherInputDisabled} = this.state;
+
+ if (otherInputDisabled) {
+ res =
+ isMultiSelect
+ ? this.refs._myInput.getValue()
+ : this.refs._myInput.value;
+ } else {
+ res = this.refs._otherValue.value;
+ }
+ return res;
+ }
+
+ enumChanged() {
+ let enumValue = this.refs._myInput.value;
+ let {onEnumChange, isMultiSelect, onChange} = this.props;
+ this.setState({
+ otherInputDisabled: enumValue !== other.OTHER
+ });
+ if (onEnumChange) {
+ onEnumChange(isMultiSelect ? [enumValue] : enumValue);
+ }
+
+ if (onChange) {
+ onChange(enumValue);
+ }
+
+ }
+
+ multiSelectEnumChanged(enumValue) {
+ let {onEnumChange} = this.props;
+ let selectedValues = enumValue.map(enumVal => {
+ return enumVal.value;
+ });
+
+ if (this.state.otherInputDisabled === false) {
+ selectedValues.shift();
+ }
+ else if (selectedValues.includes(i18n(other.OTHER))) {
+ selectedValues = [i18n(other.OTHER)];
+ }
+
+ this.setState({
+ otherInputDisabled: !selectedValues.includes(i18n(other.OTHER))
+ });
+ onEnumChange(selectedValues);
+ }
+
+ changedOtherInput() {
+ let {onOtherChange} = this.props;
+ onOtherChange(this.refs._otherValue.value);
+ }
+
+ componentDidUpdate() {
+ let {otherValue, selectedEnum, onInputChange, multiSelectedEnum} = this.props;
+ if (this.oldProps.otherValue !== otherValue
+ || this.oldProps.selectedEnum !== selectedEnum
+ || this.oldProps.multiSelectedEnum !== multiSelectedEnum) {
+ this.oldProps = {
+ otherValue,
+ selectedEnum,
+ multiSelectedEnum
+ };
+ onInputChange();
+ }
+ }
+
}
export default InputOptions;
diff --git a/src/generic-components/map/TopographicMap.jsx b/src/generic-components/map/TopographicMap.jsx
index fc0fb64..6da9909 100644
--- a/src/generic-components/map/TopographicMap.jsx
+++ b/src/generic-components/map/TopographicMap.jsx
@@ -18,7 +18,7 @@
* limitations under the License.
* ============LICENSE_END=========================================================
*/
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
import { PropTypes } from 'prop-types';
import {geoAlbersUsa, geoEquirectangular, geoPath} from 'd3-geo';
import {feature, mesh} from 'topojson';
diff --git a/src/generic-components/notifications/NotificationModal.jsx b/src/generic-components/notifications/NotificationModal.jsx
index 1547da3..0e747d5 100644
--- a/src/generic-components/notifications/NotificationModal.jsx
+++ b/src/generic-components/notifications/NotificationModal.jsx
@@ -19,17 +19,17 @@
* ============LICENSE_END=========================================================
*/
/**
- * NotificationModal options:
- *
- * show: whether to show notification or not,
- * type: the type of the notification. valid values are: 'default', 'error',
- * 'warning', 'success' msg: the notification content. could be a string or
- * node (React component) title: the notification title timeout: timeout for
- * the notification to fade out. if timeout == 0 then the notification is
- * rendered until the user closes it
- *
- */
-import React, {Component, PropTypes} from 'react';
+ * NotificationModal options:
+ *
+ * show: whether to show notification or not,
+ * type: the type of the notification. valid values are: 'default', 'error',
+ * 'warning', 'success' msg: the notification content. could be a string or
+ * node (React component) title: the notification title timeout: timeout for
+ * the notification to fade out. if timeout == 0 then the notification is
+ * rendered until the user closes it
+ *
+ */
+import React, {Component} from 'react';
import { PropTypes } from 'prop-types';
import {connect} from 'react-redux';
import Button from 'react-bootstrap/lib/Button.js';
@@ -39,83 +39,83 @@ import Modal from 'generic-components/modal/Modal.jsx';
import NotificationConstants from './NotificationConstants.js';
let typeClass = {
- 'default': 'primary',
- error: 'danger',
- warning: 'warning',
- success: 'success'
+ 'default': 'primary',
+ error: 'danger',
+ warning: 'warning',
+ success: 'success'
};
const mapActionsToProps = (dispatch) => {
- return {
- onCloseClick: () => dispatch({type: NotificationConstants.NOTIFY_CLOSE})
- };
+ return {
+ onCloseClick: () => dispatch({type: NotificationConstants.NOTIFY_CLOSE})
+ };
};
const mapStateToProps = ({notification}) => {
-
- let show = notification !== null && notification.title !== 'Conflict';
- let mapResult = {show};
- if (show) {
- mapResult = {show, ...notification};
- }
-
- return mapResult;
+
+ let show = notification !== null && notification.title !== 'Conflict';
+ let mapResult = {show};
+ if (show) {
+ mapResult = {show, ...notification};
+ }
+
+ return mapResult;
};
class NotificationModal extends Component {
-
- static propTypes = {
- show: PropTypes.bool,
- type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
- msg: PropTypes.node,
- title: PropTypes.string,
- timeout: PropTypes.number
- };
-
- static defaultProps = {
- show: false,
- type: 'default',
- title: '',
- msg: '',
- timeout: 0
- };
-
- state = {type: undefined};
-
- componentWillReceiveProps(nextProps) {
- if (this.props.show !== nextProps.show && nextProps.show === false) {
- this.setState({type: this.props.type});
- }
- else {
- this.setState({type: undefined});
- }
- }
-
- componentDidUpdate() {
- if (this.props.timeout) {
- setTimeout(this.props.onCloseClick, this.props.timeout);
- }
- }
-
- render() {
- let {title, type, msg, show} = this.props;
- if (!show) {
- type = this.state.type;
- }
- return (
- <Modal show={this.props.show}
- className={`notification-modal ${typeClass[type]}`}>
- <Modal.Header>
- <Modal.Title>{title}</Modal.Title>
- </Modal.Header>
- <Modal.Body>{msg}</Modal.Body>
- <Modal.Footer>
- <Button bsStyle={typeClass[type]}
- onClick={this.props.onCloseClick}>{i18n('OK')}</Button>
- </Modal.Footer>
- </Modal>
- );
- }
+
+ static propTypes = {
+ show: PropTypes.bool,
+ type: PropTypes.oneOf(['default', 'error', 'warning', 'success']),
+ msg: PropTypes.node,
+ title: PropTypes.string,
+ timeout: PropTypes.number
+ };
+
+ static defaultProps = {
+ show: false,
+ type: 'default',
+ title: '',
+ msg: '',
+ timeout: 0
+ };
+
+ state = {type: undefined};
+
+ componentWillReceiveProps(nextProps) {
+ if (this.props.show !== nextProps.show && nextProps.show === false) {
+ this.setState({type: this.props.type});
+ }
+ else {
+ this.setState({type: undefined});
+ }
+ }
+
+ componentDidUpdate() {
+ if (this.props.timeout) {
+ setTimeout(this.props.onCloseClick, this.props.timeout);
+ }
+ }
+
+ render() {
+ let {title, type, msg, show} = this.props;
+ if (!show) {
+ type = this.state.type;
+ }
+ return (
+ <Modal show={this.props.show}
+ className={`notification-modal ${typeClass[type]}`}>
+ <Modal.Header>
+ <Modal.Title>{title}</Modal.Title>
+ </Modal.Header>
+ <Modal.Body>{msg}</Modal.Body>
+ <Modal.Footer>
+ <Button bsStyle={typeClass[type]}
+ onClick={this.props.onCloseClick}>{i18n('OK')}</Button>
+ </Modal.Footer>
+ </Modal>
+ );
+ }
}
export default connect(mapStateToProps, mapActionsToProps)(NotificationModal);
diff --git a/src/generic-components/panel/SlidePanel.jsx b/src/generic-components/panel/SlidePanel.jsx
index 9580837..1550cee 100644
--- a/src/generic-components/panel/SlidePanel.jsx
+++ b/src/generic-components/panel/SlidePanel.jsx
@@ -24,114 +24,114 @@ import FontAwesome from 'react-fontawesome';
import ReactDOM from 'react-dom';
class SlidePanel extends React.Component {
-
- static PropTypes = {
- direction: PropTypes.string.isRequired,
- className: PropTypes.string,
- title: PropTypes.string,
- isOpen: PropTypes.bool
- };
-
- static defaultProps = {
- title: '',
- className: '',
- isOpen: true
- };
-
- state = {
- isOpen: this.props.isOpen,
- direction: this.props.direction,
- width: 0,
- arrowWidth: 0
- };
-
- componentDidMount() {
- this.setSliderPosition();
- }
-
- componentDidUpdate() {
- this.setSliderPosition();
- }
-
- render() {
-
- let {children, className} = this.props;
- let {isOpen} = this.state;
-
- return (
- <div className={ `slide-panel ${className}`}>
- {this.renderHeader(isOpen)}
- <div
- className={'slide-panel-content ' + (isOpen ? 'opened' : 'closed')}>{children}</div>
- </div>
- );
- }
-
- renderHeader(isOpen) {
- let {direction: initialDirection, title} = this.props;
- let {direction: currentDirection} = this.state;
-
- let iconName = currentDirection ===
- 'right'
- ? 'angle-double-right collapse-double-icon'
- : 'angle-double-left collapse-double-icon';
-
- let awestyle = {padding: '5px'};
-
- if (!isOpen && initialDirection === 'right') {
- awestyle.marginLeft = '-1px';
- }
- return (
- <div className='slide-panel-header'>
- { initialDirection === 'left' &&
- <span className='slide-panel-header-title'>{title}</span>}
- <FontAwesome
- ref='arrowIcon'
- style={awestyle}
- onClick={this.handleClick}
- className='pull-right'
- name={iconName}
- size='2x'/>
- { initialDirection === 'right' &&
- <span className='slide-panel-header-title'>{title}</span>}
- </div>
- );
- }
-
- handleClick = () => {
- this.setState({
- isOpen: !this.state.isOpen,
- direction: this.state.direction === 'left' ? 'right' : 'left'
- });
- }
-
- setSliderPosition = () => {
-
- let el = ReactDOM.findDOMNode(this);
- let {style} = el;
-
- let {direction: initialDirection} = this.props;
- let arrowIconSize = Math.floor(ReactDOM.findDOMNode(this.refs.arrowIcon)
- .getBoundingClientRect().width) * 2;
- if (!this.state.isOpen) {
- if (this.props.direction === 'left') {
- style.left = arrowIconSize - el.getBoundingClientRect().width + 'px';
- }
- if (initialDirection === 'right') {
- style.right = arrowIconSize - el.getBoundingClientRect().width + 'px';
- }
- }
- else {
- if (initialDirection === 'left') {
- style.left = '0px';
- }
-
- if (this.props.direction === 'right') {
- style.right = '0px';
- }
- }
- }
-
+
+ static PropTypes = {
+ direction: PropTypes.string.isRequired,
+ className: PropTypes.string,
+ title: PropTypes.string,
+ isOpen: PropTypes.bool
+ };
+
+ static defaultProps = {
+ title: '',
+ className: '',
+ isOpen: true
+ };
+
+ state = {
+ isOpen: this.props.isOpen,
+ direction: this.props.direction,
+ width: 0,
+ arrowWidth: 0
+ };
+
+ componentDidMount() {
+ this.setSliderPosition();
+ }
+
+ componentDidUpdate() {
+ this.setSliderPosition();
+ }
+
+ render() {
+
+ let {children, className} = this.props;
+ let {isOpen} = this.state;
+
+ return (
+ <div className={ `slide-panel ${className}`}>
+ {this.renderHeader(isOpen)}
+ <div
+ className={'slide-panel-content ' + (isOpen ? 'opened' : 'closed')}>{children}</div>
+ </div>
+ );
+ }
+
+ renderHeader(isOpen) {
+ let {direction: initialDirection, title} = this.props;
+ let {direction: currentDirection} = this.state;
+
+ let iconName = currentDirection ===
+ 'right'
+ ? 'angle-double-right collapse-double-icon'
+ : 'angle-double-left collapse-double-icon';
+
+ let awestyle = {padding: '5px'};
+
+ if (!isOpen && initialDirection === 'right') {
+ awestyle.marginLeft = '-1px';
+ }
+ return (
+ <div className='slide-panel-header'>
+ { initialDirection === 'left' &&
+ <span className='slide-panel-header-title'>{title}</span>}
+ <FontAwesome
+ ref='arrowIcon'
+ style={awestyle}
+ onClick={this.handleClick}
+ className='pull-right'
+ name={iconName}
+ size='2x'/>
+ { initialDirection === 'right' &&
+ <span className='slide-panel-header-title'>{title}</span>}
+ </div>
+ );
+ }
+
+ handleClick = () => {
+ this.setState({
+ isOpen: !this.state.isOpen,
+ direction: this.state.direction === 'left' ? 'right' : 'left'
+ });
+ }
+
+ setSliderPosition = () => {
+
+ let el = ReactDOM.findDOMNode(this);
+ let {style} = el;
+
+ let {direction: initialDirection} = this.props;
+ let arrowIconSize = Math.floor(ReactDOM.findDOMNode(this.refs.arrowIcon)
+ .getBoundingClientRect().width) * 2;
+ if (!this.state.isOpen) {
+ if (this.props.direction === 'left') {
+ style.left = arrowIconSize - el.getBoundingClientRect().width + 'px';
+ }
+ if (initialDirection === 'right') {
+ style.right = arrowIconSize - el.getBoundingClientRect().width + 'px';
+ }
+ }
+ else {
+ if (initialDirection === 'left') {
+ style.left = '0px';
+ }
+
+ if (this.props.direction === 'right') {
+ style.right = '0px';
+ }
+ }
+ }
+
}
export default SlidePanel;
diff --git a/src/generic-components/titledContainer/TitledContainer.jsx b/src/generic-components/titledContainer/TitledContainer.jsx
index d3d606a..6aa626d 100644
--- a/src/generic-components/titledContainer/TitledContainer.jsx
+++ b/src/generic-components/titledContainer/TitledContainer.jsx
@@ -18,7 +18,7 @@
* limitations under the License.
* ============LICENSE_END=========================================================
*/
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
import { PropTypes } from 'prop-types';
import Button from 'react-bootstrap/lib/Button';
diff --git a/src/generic-components/toggleButtonGroup/ToggleButtonGroup.jsx b/src/generic-components/toggleButtonGroup/ToggleButtonGroup.jsx
index 6d57637..0fe8939 100644
--- a/src/generic-components/toggleButtonGroup/ToggleButtonGroup.jsx
+++ b/src/generic-components/toggleButtonGroup/ToggleButtonGroup.jsx
@@ -18,7 +18,7 @@
* limitations under the License.
* ============LICENSE_END=========================================================
*/
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
import { PropTypes } from 'prop-types';
import {connect} from 'react-redux';
@@ -28,49 +28,49 @@ import Button from 'react-bootstrap/lib/Button.js';
import ToggleButtonGroupActions from 'generic-components/toggleButtonGroup/ToggleButtonGroupActions.js';
let mapActionToProps = (dispatch) => {
- return {
- onButtonToggle: (buttonName) => {
- dispatch(ToggleButtonGroupActions.onToggle({button: buttonName}));
- }
- };
+ return {
+ onButtonToggle: (buttonName) => {
+ dispatch(ToggleButtonGroupActions.onToggle({button: buttonName}));
+ }
+ };
};
let mapStateToProps = ({toggleButtonGroupData}) => {
-
- let {selectedButton} = toggleButtonGroupData;
-
- return {
- selectedButton
- };
+
+ let {selectedButton} = toggleButtonGroupData;
+
+ return {
+ selectedButton
+ };
};
class ToggleButtonGroup extends Component {
-
- static propTypes = {
- buttonDefinitions: PropTypes.object.isRequired
- };
-
- onButtonSelect(buttonName) {
- this.props.onButtonToggle(buttonName);
- }
-
- render() {
- let {selectedButton, buttonDefinitions} = this.props;
- let buttonListElements = [];
- Object.keys(buttonDefinitions).map(function (item) {
- buttonListElements.push(
- <Button id={item} active={selectedButton === item ? true : false}
- onClick={() => this.onButtonSelect(item)}>
- <i className={buttonDefinitions[item]} aria-hidden='true'></i>
- </Button>
- );
- }.bind(this));
-
- return (
- <ButtonGroup bsClass='btn-group displayOptionButtons'>
- {buttonListElements}
- </ButtonGroup>
- );
- }
+
+ static propTypes = {
+ buttonDefinitions: PropTypes.object.isRequired
+ };
+
+ onButtonSelect(buttonName) {
+ this.props.onButtonToggle(buttonName);
+ }
+
+ render() {
+ let {selectedButton, buttonDefinitions} = this.props;
+ let buttonListElements = [];
+ Object.keys(buttonDefinitions).map(function (item) {
+ buttonListElements.push(
+ <Button id={item} active={selectedButton === item ? true : false}
+ onClick={() => this.onButtonSelect(item)}>
+ <i className={buttonDefinitions[item]} aria-hidden='true'></i>
+ </Button>
+ );
+ }.bind(this));
+
+ return (
+ <ButtonGroup bsClass='btn-group displayOptionButtons'>
+ {buttonListElements}
+ </ButtonGroup>
+ );
+ }
}
export default connect(mapStateToProps, mapActionToProps)(ToggleButtonGroup);