- {this.props.options.map((o) => {
+
this.setState({ open: false })}
+ >
+
+ {this.props.options.map(o => {
let key = o;
let value = o;
if (o instanceof Object) {
key = o.key;
value = o.value;
}
- return
{value}
+ return (
+
+ {value}
+
+ );
})}
@@ -98,25 +115,13 @@ export default class ChromeDropdown extends React.Component {
}
ChromeDropdown.propTypes = {
- color: PropTypes.oneOf(['blue', 'purple']).describe(
- 'Determines the color of the dropdown.'
- ),
- value: PropTypes.string.isRequired.describe(
- 'The current value of the dropdown.'
- ),
+ color: PropTypes.oneOf(['blue', 'purple']).describe('Determines the color of the dropdown.'),
+ value: PropTypes.string.isRequired.describe('The current value of the dropdown.'),
options: PropTypes.array.isRequired.describe(
'An array of options available in the dropdown. Can be an array of string or array of { key, value }'
),
- onChange: PropTypes.func.isRequired.describe(
- 'A function called when the dropdown is changed.'
- ),
- width: PropTypes.string.describe(
- 'An optional width override.'
- ),
- placeholder: PropTypes.string.describe(
- 'Placeholder text used in place of default selection.'
- ),
- styles: PropTypes.object.describe(
- 'Styles override used to provide dropdown with differnt skin.'
- ),
+ onChange: PropTypes.func.isRequired.describe('A function called when the dropdown is changed.'),
+ width: PropTypes.string.describe('An optional width override.'),
+ placeholder: PropTypes.string.describe('Placeholder text used in place of default selection.'),
+ styles: PropTypes.object.describe('Styles override used to provide dropdown with differnt skin.'),
};
diff --git a/src/components/CodeEditor/CodeEditor.example.js b/src/components/CodeEditor/CodeEditor.example.js
index 87ba16cc77..4b9cb25b4b 100644
--- a/src/components/CodeEditor/CodeEditor.example.js
+++ b/src/components/CodeEditor/CodeEditor.example.js
@@ -13,8 +13,6 @@ export const component = CodeEditor;
export const demos = [
{
name: 'Simple code editor (only JS support)',
- render: () => (
-
- )
- }
+ render: () =>
,
+ },
];
diff --git a/src/components/CodeEditor/CodeEditor.react.js b/src/components/CodeEditor/CodeEditor.react.js
index a3231bf9a8..bf865041a9 100644
--- a/src/components/CodeEditor/CodeEditor.react.js
+++ b/src/components/CodeEditor/CodeEditor.react.js
@@ -56,5 +56,5 @@ export default class CodeEditor extends React.Component {
CodeEditor.propTypes = {
fontSize: PropTypes.number.describe('Font size of the editor'),
- placeHolder: PropTypes.string.describe('Code place holder')
+ placeHolder: PropTypes.string.describe('Code place holder'),
};
diff --git a/src/components/CodeSnippet/CodeSnippet.example.js b/src/components/CodeSnippet/CodeSnippet.example.js
index 699be4da7a..0822076280 100644
--- a/src/components/CodeSnippet/CodeSnippet.example.js
+++ b/src/components/CodeSnippet/CodeSnippet.example.js
@@ -5,7 +5,7 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import CodeSnippet from 'components/CodeSnippet/CodeSnippet.react';
export const component = CodeSnippet;
@@ -13,28 +13,24 @@ export const component = CodeSnippet;
export const demos = [
{
render() {
- let source = `// Some comment here
+ const source = `// Some comment here
Parse.Cloud.define('hello', function(req, resp) {
let someVariable = "
";
let otherVariable = "
";
-});`
+});`;
- return (
-
- )
- }
+ return
;
+ },
},
{
name: 'Print JSON',
render() {
- let obj = {
+ const obj = {
this: 'is awesome',
- awesome: true
+ awesome: true,
};
- return (
-
- )
- }
- }
+ return
;
+ },
+ },
];
diff --git a/src/components/CodeSnippet/CodeSnippet.react.js b/src/components/CodeSnippet/CodeSnippet.react.js
index 85b57bbe89..521d09d5a4 100644
--- a/src/components/CodeSnippet/CodeSnippet.react.js
+++ b/src/components/CodeSnippet/CodeSnippet.react.js
@@ -6,8 +6,8 @@
* the root directory of this source tree.
*/
import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import Prism from 'prismjs';
+import React from 'react';
+import Prism from 'prismjs';
import './CodeSnippet.css';
import 'prismjs/plugins/line-numbers/prism-line-numbers';
@@ -31,15 +31,17 @@ export default class CodeSnippet extends React.Component {
}
render() {
- let { fullPage = true, lineNumbers = true } = this.props;
- let classes = ['language-' + this.props.language];
+ const { fullPage = true, lineNumbers = true } = this.props;
+ const classes = ['language-' + this.props.language];
if (lineNumbers) {
classes.push('line-numbers');
}
- let pageStyle = fullPage ? { minHeight: 'calc(100vh - 96px)'} : {};
+ const pageStyle = fullPage ? { minHeight: 'calc(100vh - 96px)' } : {};
return (
-
- {this.props.source}
+
+
+ {this.props.source}
+
);
}
@@ -49,13 +51,11 @@ CodeSnippet.propTypes = {
source: PropTypes.string.isRequired.describe(
'The source code to be rendered with syntax-highlighting.'
),
- language: PropTypes.string.describe(
- 'The programming language of the snippet.'
- ),
+ language: PropTypes.string.describe('The programming language of the snippet.'),
fullPage: PropTypes.bool.describe(
'Pass false if this component doesn\'t need to fill the whole page.'
),
lineNumbers: PropTypes.bool.describe(
'Pass false if this component doesn\'t need to print line numbers.'
- )
+ ),
};
diff --git a/src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js b/src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js
index 279beb1926..d4b0f5d70a 100644
--- a/src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js
+++ b/src/components/ColumnsConfiguration/ColumnConfigurationItem.react.js
@@ -7,37 +7,47 @@ import styles from 'components/ColumnsConfiguration/ColumnConfigurationItem.scss
const DND_TYPE = 'ColumnConfigurationItem';
export default ({ name, handleColumnDragDrop, index, onChangeVisible, visible }) => {
- const [ { isDragging}, drag ] = useDrag({
+ const [{ isDragging }, drag] = useDrag({
item: { type: DND_TYPE, index },
- collect: monitor => ({ isDragging: !!monitor.isDragging() })
+ collect: monitor => ({ isDragging: !!monitor.isDragging() }),
});
- const [ { canDrop, isOver }, drop ] = useDrop({
+ const [{ canDrop, isOver }, drop] = useDrop({
accept: DND_TYPE,
drop: item => handleColumnDragDrop(item.index, index),
canDrop: item => item.index !== index,
collect: monitor => ({
isOver: !!monitor.isOver(),
- canDrop: !!monitor.canDrop()
- })
+ canDrop: !!monitor.canDrop(),
+ }),
});
- return drag(drop(
- onChangeVisible(!visible)}>
-
-
- {name}
-
-
-
- ));
+ return drag(
+ drop(
+ onChangeVisible(!visible)}
+ >
+
+
+
+ {name}
+
+
+
+
+ )
+ );
};
diff --git a/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js b/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
index 45c9389087..7328db1afb 100644
--- a/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
+++ b/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
@@ -1,6 +1,6 @@
import React from 'react';
-import { DndProvider } from 'react-dnd'
-import HTML5Backend from 'react-dnd-html5-backend'
+import { DndProvider } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
import Button from 'components/Button/Button.react';
import ColumnConfigurationItem from 'components/ColumnsConfiguration/ColumnConfigurationItem.react';
@@ -16,7 +16,7 @@ export default class ColumnsConfiguration extends React.Component {
super();
this.state = {
- open: false
+ open: false,
};
this.entryRef = React.createRef();
@@ -25,24 +25,24 @@ export default class ColumnsConfiguration extends React.Component {
componentWillReceiveProps(props) {
if (props.schema !== this.props.schema) {
this.setState({
- open: false
+ open: false,
});
}
}
toggle() {
this.setState({
- open: !this.state.open
- })
+ open: !this.state.open,
+ });
}
showAll() {
let shouldReload = false;
- let updatedOrder = this.props.order.map(field => {
+ const updatedOrder = this.props.order.map(field => {
if (!shouldReload && !field.cached) {
shouldReload = true;
}
- return { ...field, visible: true }
+ return { ...field, visible: true };
});
this.props.handleColumnsOrder(updatedOrder, shouldReload);
}
@@ -52,94 +52,107 @@ export default class ColumnsConfiguration extends React.Component {
}
autoSort() {
- const defaultOrder = ['objectId', 'createdAt', 'updatedAt', 'ACL']
+ const defaultOrder = ['objectId', 'createdAt', 'updatedAt', 'ACL'];
const order = {
default: [],
- other: []
+ other: [],
};
for (const column of this.props.order) {
const index = defaultOrder.indexOf(column.name);
if (index !== -1) {
order.default[index] = column;
} else {
- order.other.push(column)
+ order.other.push(column);
}
}
- this.props.handleColumnsOrder([...order.default.filter(column => column), ...order.other.sort((a,b) => a.name.localeCompare(b.name))]);
+ this.props.handleColumnsOrder([
+ ...order.default.filter(column => column),
+ ...order.other.sort((a, b) => a.name.localeCompare(b.name)),
+ ]);
}
render() {
const { handleColumnDragDrop, handleColumnsOrder, order, disabled } = this.props;
- const title =
- Manage Columns
-
+ const title = (
+
+ Manage Columns
+
+ );
- let entry =
- Manage Columns
-
+ let entry = (
+
+ Manage Columns
+
+ );
if (disabled) {
- entry =
- Manage Columns
-
;
+ entry = (
+
+ Manage Columns
+
+ );
}
let popover = null;
if (this.state.open) {
popover = (
-
+
{title}
{order.map(({ name, visible, ...rest }, index) => {
- return {
- const updatedOrder = [...order];
- updatedOrder[index] = {
- ...rest,
- name,
- visible
- };
- let shouldReload = visible;
- // these fields are always cached as they are never excluded from server
- // therefore no need to make another request.
- if (name === 'objectId' || name === 'createdAt' || name === 'updatedAt' || name === 'ACL') {
- shouldReload = false;
- }
- if (this.props.className === '_User' && name === 'password') {
- shouldReload = false;
- }
- if (updatedOrder[index].cached) {
- shouldReload = false;
- }
- handleColumnsOrder(updatedOrder, shouldReload);
- }}
- handleColumnDragDrop={handleColumnDragDrop} />
+ return (
+ {
+ const updatedOrder = [...order];
+ updatedOrder[index] = {
+ ...rest,
+ name,
+ visible,
+ };
+ let shouldReload = visible;
+ // these fields are always cached as they are never excluded from server
+ // therefore no need to make another request.
+ if (
+ name === 'objectId' ||
+ name === 'createdAt' ||
+ name === 'updatedAt' ||
+ name === 'ACL'
+ ) {
+ shouldReload = false;
+ }
+ if (this.props.className === '_User' && name === 'password') {
+ shouldReload = false;
+ }
+ if (updatedOrder[index].cached) {
+ shouldReload = false;
+ }
+ handleColumnsOrder(updatedOrder, shouldReload);
+ }}
+ handleColumnDragDrop={handleColumnDragDrop}
+ />
+ );
})}
-
+
{ alert('C1 Item 1 clicked!') } },
- { text: 'C1 Item 2', callback: () => { alert('C1 Item 2 clicked!') } },
+ text: 'Category 1',
+ items: [
{
- text: 'Sub Category 1', items: [
- { text: 'SC1 Item 1', callback: () => { alert('SC1 Item 1 clicked!') } },
- { text: 'SC1 Item 2', callback: () => { alert('SC1 Item 2 clicked!') } },
- ]
- }
- ]
+ text: 'C1 Item 1',
+ callback: () => {
+ alert('C1 Item 1 clicked!');
+ },
+ },
+ {
+ text: 'C1 Item 2',
+ callback: () => {
+ alert('C1 Item 2 clicked!');
+ },
+ },
+ {
+ text: 'Sub Category 1',
+ items: [
+ {
+ text: 'SC1 Item 1',
+ callback: () => {
+ alert('SC1 Item 1 clicked!');
+ },
+ },
+ {
+ text: 'SC1 Item 2',
+ callback: () => {
+ alert('SC1 Item 2 clicked!');
+ },
+ },
+ ],
+ },
+ ],
},
{
- text: 'Category 2', items: [
- { text: 'C2 Item 1', callback: () => { alert('C2 Item 1 clicked!') } },
- { text: 'C2 Item 2', callback: () => { alert('C2 Item 2 clicked!') } }
- ]
- }
+ text: 'Category 2',
+ items: [
+ {
+ text: 'C2 Item 1',
+ callback: () => {
+ alert('C2 Item 1 clicked!');
+ },
+ },
+ {
+ text: 'C2 Item 2',
+ callback: () => {
+ alert('C2 Item 2 clicked!');
+ },
+ },
+ ],
+ },
]}
/>
- )
- }
+ ),
+ },
];
diff --git a/src/components/ContextMenu/ContextMenu.react.js b/src/components/ContextMenu/ContextMenu.react.js
index 611e1e0a99..04d973b7d9 100644
--- a/src/components/ContextMenu/ContextMenu.react.js
+++ b/src/components/ContextMenu/ContextMenu.react.js
@@ -9,22 +9,20 @@ import PropTypes from 'lib/PropTypes';
import React, { useState, useEffect, useRef } from 'react';
import styles from 'components/ContextMenu/ContextMenu.scss';
-const getPositionToFitVisibleScreen = (ref) => {
+const getPositionToFitVisibleScreen = ref => {
if (ref.current) {
-
const elBox = ref.current.getBoundingClientRect();
- const y = (elBox.y + elBox.height) < window.innerHeight ?
- 0 : (0 - elBox.y + 100);
+ const y = elBox.y + elBox.height < window.innerHeight ? 0 : 0 - elBox.y + 100;
// If there's a previous element show current next to it.
// Try on right side first, then on left if there's no place.
const prevEl = ref.current.previousSibling;
if (prevEl) {
const prevElBox = prevEl.getBoundingClientRect();
- const showOnRight = (prevElBox.x + prevElBox.width + elBox.width) < window.innerWidth;
+ const showOnRight = prevElBox.x + prevElBox.width + elBox.width < window.innerWidth;
return {
x: showOnRight ? prevElBox.width : -elBox.width,
- y
+ y,
};
}
@@ -33,7 +31,6 @@ const getPositionToFitVisibleScreen = (ref) => {
};
const MenuSection = ({ level, items, path, setPath, hide }) => {
-
const sectionRef = useRef(null);
const [position, setPosition] = useState();
@@ -42,18 +39,21 @@ const MenuSection = ({ level, items, path, setPath, hide }) => {
newPosition && setPosition(newPosition);
}, [sectionRef]);
- const style = position ? {
- left: position.x,
- top: position.y,
- maxHeight: '80vh',
- overflowY: 'scroll',
- opacity: 1
- } : {};
-
- return (
- {items.map((item, index) => {
- if (item.items) {
- return (
+ const style = position
+ ? {
+ left: position.x,
+ top: position.y,
+ maxHeight: '80vh',
+ overflowY: 'scroll',
+ opacity: 1,
+ }
+ : {};
+
+ return (
+
+ {items.map((item, index) => {
+ if (item.items) {
+ return (
{
{item.text}
);
- }
- return (
+ }
+ return (
{
{item.subtext && - {item.subtext} }
);
- })}
- );
-}
-
-let ContextMenu = ({ x, y, items }) => {
+ })}
+
+ );
+};
+const ContextMenu = ({ x, y, items }) => {
const [path, setPath] = useState([0]);
const [visible, setVisible] = useState(true);
- useEffect(() => { setVisible(true); }, [items]);
+ useEffect(() => {
+ setVisible(true);
+ }, [items]);
const hide = () => {
setVisible(false);
setPath([0]);
- }
+ };
//#region Closing menu after clicking outside it
@@ -114,38 +116,49 @@ let ContextMenu = ({ x, y, items }) => {
//#endregion
- if (!visible) { return null; }
+ if (!visible) {
+ return null;
+ }
- const getItemsFromLevel = (level) => {
+ const getItemsFromLevel = level => {
let result = items;
for (let index = 1; index <= level; index++) {
result = result[path[index]].items;
}
return result;
- }
+ };
return (
-
+
{path.map((position, level) => {
- return
);
-}
+};
ContextMenu.propTypes = {
x: PropTypes.number.isRequired.describe('X context menu position.'),
y: PropTypes.number.isRequired.describe('Y context menu position.'),
- items: PropTypes.array.isRequired.describe('Array with tree representation of context menu items.'),
-}
+ items: PropTypes.array.isRequired.describe(
+ 'Array with tree representation of context menu items.'
+ ),
+};
export default ContextMenu;
diff --git a/src/components/CreditCardInput/CreditCardInput.example.js b/src/components/CreditCardInput/CreditCardInput.example.js
index 0d5cc55c9d..2d8585c8b1 100644
--- a/src/components/CreditCardInput/CreditCardInput.example.js
+++ b/src/components/CreditCardInput/CreditCardInput.example.js
@@ -6,9 +6,9 @@
* the root directory of this source tree.
*/
import CreditCardInput from 'components/CreditCardInput/CreditCardInput.react';
-import React from 'react';
-import Field from 'components/Field/Field.react';
-import Label from 'components/Label/Label.react';
+import React from 'react';
+import Field from 'components/Field/Field.react';
+import Label from 'components/Label/Label.react';
class Demo extends React.Component {
constructor() {
@@ -21,7 +21,8 @@ class Demo extends React.Component {
this.setState({ value })} />
+ onChange={value => this.setState({ value })}
+ />
);
}
}
@@ -32,15 +33,15 @@ export const demos = [
{
render: () => (
-
- )
+ ),
},
{
render: () => (
-
- )
- }
+ ),
+ },
];
diff --git a/src/components/CreditCardInput/CreditCardInput.react.js b/src/components/CreditCardInput/CreditCardInput.react.js
index c9eeb524cb..6376e40f9d 100644
--- a/src/components/CreditCardInput/CreditCardInput.react.js
+++ b/src/components/CreditCardInput/CreditCardInput.react.js
@@ -6,8 +6,8 @@
* the root directory of this source tree.
*/
import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import styles from 'components/CreditCardInput/CreditCardInput.scss';
+import React from 'react';
+import styles from 'components/CreditCardInput/CreditCardInput.scss';
const VALID_REGEX = /^[\d ]*$/;
@@ -26,7 +26,8 @@ class CreditCardInput extends React.Component {
}
render() {
- let { value, lastFour, onChange } = this.props
+ let { value } = this.props;
+ const { lastFour, onChange } = this.props;
let prefilled = false;
if (value == null && lastFour) {
prefilled = true;
@@ -35,24 +36,25 @@ class CreditCardInput extends React.Component {
return (
@@ -45,8 +49,6 @@ class HeadersDemo extends React.Component {
export const demos = [
{
- render: () => (
-
-
{name}
-
{targetClass ? `${type} <${targetClass}>` : type}
-
+
{name}
+
{targetClass ? `${type} <${targetClass}>` : type}
+
- {readonly
- ? null
- :
+ const {
+ headers,
+ onResize,
+ selectAll,
+ onAddColumn,
+ updateOrdering,
+ readonly,
+ preventSchemaEdits,
+ selected,
+ isDataLoaded,
+ } = this.props;
+ const elements = [
+
+ {readonly ? null : (
+
,
];
headers.forEach(({ width, name, type, targetClass, order, visible, preventSort }, i) => {
- if (!visible) return;
- let wrapStyle = { width };
+ if (!visible) {
+ return;
+ }
+ const wrapStyle = { width };
if (i % 2) {
wrapStyle.background = '#726F85';
} else {
wrapStyle.background = '#66637A';
}
let onClick = null;
- if (!preventSort && (type === 'String' || type === 'Number' || type === 'Date' || type === 'Boolean')) {
+ if (
+ !preventSort &&
+ (type === 'String' || type === 'Number' || type === 'Date' || type === 'Boolean')
+ ) {
onClick = () => updateOrdering((order === 'descending' ? '' : '-') + name);
}
@@ -46,18 +57,15 @@ export default class DataBrowserHeaderBar extends React.Component {
}
elements.push(
-
+
+ moveDataBrowserHeader={this.props.handleDragDrop}
+ />
);
elements.push(
@@ -66,18 +74,15 @@ export default class DataBrowserHeaderBar extends React.Component {
});
if (onAddColumn) {
- let finalStyle = {};
+ const finalStyle = {};
if (headers.length % 2) {
finalStyle.background = 'rgba(224,224,234,0.10)';
}
elements.push(
readonly || preventSchemaEdits ? null : (
-
-
+
+
Add a new column
@@ -86,8 +91,10 @@ export default class DataBrowserHeaderBar extends React.Component {
}
function renderSkeleton() {
- if (isDataLoaded) return null;
- var skeletons = [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1];
+ if (isDataLoaded) {
+ return null;
+ }
+ const skeletons = [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1];
return (
{skeletons.map(function (opacity, index) {
@@ -112,6 +119,6 @@ export default class DataBrowserHeaderBar extends React.Component {
{renderSkeleton()}
- )
+ );
}
}
diff --git a/src/components/DatePicker/DatePicker.example.js b/src/components/DatePicker/DatePicker.example.js
index d7e3f55728..d5a57b5920 100644
--- a/src/components/DatePicker/DatePicker.example.js
+++ b/src/components/DatePicker/DatePicker.example.js
@@ -6,9 +6,9 @@
* the root directory of this source tree.
*/
import DatePicker from 'components/DatePicker/DatePicker.react';
-import Field from 'components/Field/Field.react';
-import Label from 'components/Label/Label.react';
-import React from 'react';
+import Field from 'components/Field/Field.react';
+import Label from 'components/Label/Label.react';
+import React from 'react';
export const component = DatePicker;
@@ -23,9 +23,7 @@ class DatePickerDemo extends React.Component {
}
render() {
- return (
-
- )
- }
+ ),
+ },
];
diff --git a/src/components/DatePicker/DatePicker.react.js b/src/components/DatePicker/DatePicker.react.js
index 6ae363adf9..f6718abcdb 100644
--- a/src/components/DatePicker/DatePicker.react.js
+++ b/src/components/DatePicker/DatePicker.react.js
@@ -5,23 +5,23 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import Calendar from 'components/Calendar/Calendar.react';
+import Calendar from 'components/Calendar/Calendar.react';
import { Directions } from 'lib/Constants';
-import { MONTHS } from 'lib/DateUtils';
-import Popover from 'components/Popover/Popover.react';
-import Position from 'lib/Position';
-import React from 'react';
-import SliderWrap from 'components/SliderWrap/SliderWrap.react';
-import styles from 'components/DatePicker/DatePicker.scss';
+import { MONTHS } from 'lib/DateUtils';
+import Popover from 'components/Popover/Popover.react';
+import Position from 'lib/Position';
+import React from 'react';
+import SliderWrap from 'components/SliderWrap/SliderWrap.react';
+import styles from 'components/DatePicker/DatePicker.scss';
export default class DatePicker extends React.Component {
constructor() {
super();
this.state = {
open: false,
- position: null
- }
- this.inputRef = React.createRef()
+ position: null,
+ };
+ this.inputRef = React.createRef();
}
toggle() {
@@ -31,32 +31,35 @@ export default class DatePicker extends React.Component {
}
return {
open: true,
- position: Position.inDocument(this.inputRef.current)
+ position: Position.inDocument(this.inputRef.current),
};
});
}
close() {
this.setState({
- open: false
+ open: false,
});
}
render() {
let popover = null;
if (this.state.open) {
- let width = this.inputRef.current.clientWidth;
+ const width = this.inputRef.current.clientWidth;
popover = (
- {
- this.setState({ open: false }, this.props.onChange.bind(null, newValue));
- }} />
+ {
+ this.setState({ open: false }, this.props.onChange.bind(null, newValue));
+ }}
+ />
- )
+ );
}
let content = null;
@@ -65,11 +68,14 @@ export default class DatePicker extends React.Component {
} else {
content = (
- {`${MONTHS[this.props.value.getMonth()].substr(0, 3)} ${this.props.value.getDate()}, ${this.props.value.getFullYear()}`}
+ {`${MONTHS[this.props.value.getMonth()].substr(
+ 0,
+ 3
+ )} ${this.props.value.getDate()}, ${this.props.value.getFullYear()}`}
);
}
-
+
return (
{content}
diff --git a/src/components/DateRange/DateRange.example.js b/src/components/DateRange/DateRange.example.js
index b9b169ffaf..43d4a3c093 100644
--- a/src/components/DateRange/DateRange.example.js
+++ b/src/components/DateRange/DateRange.example.js
@@ -5,9 +5,9 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import DateRange from 'components/DateRange/DateRange.react';
+import DateRange from 'components/DateRange/DateRange.react';
import { Directions } from 'lib/Constants';
-import React from 'react';
+import React from 'react';
export const component = DateRange;
@@ -23,7 +23,11 @@ class Demo extends React.Component {
render() {
return (
-
+
);
}
}
@@ -34,13 +38,13 @@ export const demos = [
- )
+ ),
},
{
render: () => (
- )
- }
+ ),
+ },
];
diff --git a/src/components/DateRange/DateRange.react.js b/src/components/DateRange/DateRange.react.js
index 555b7eb6c8..c6439aa3bb 100644
--- a/src/components/DateRange/DateRange.react.js
+++ b/src/components/DateRange/DateRange.react.js
@@ -5,31 +5,27 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import Calendar from 'components/Calendar/Calendar.react';
-import { Directions } from 'lib/Constants';
-import Icon from 'components/Icon/Icon.react';
-import {
- monthDayStringUTC,
- monthsFrom,
- daysFrom
-} from 'lib/DateUtils';
-import Popover from 'components/Popover/Popover.react';
-import Position from 'lib/Position';
-import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import styles from 'components/DateRange/DateRange.scss';
+import Calendar from 'components/Calendar/Calendar.react';
+import { Directions } from 'lib/Constants';
+import Icon from 'components/Icon/Icon.react';
+import { monthDayStringUTC, monthsFrom, daysFrom } from 'lib/DateUtils';
+import Popover from 'components/Popover/Popover.react';
+import Position from 'lib/Position';
+import PropTypes from 'lib/PropTypes';
+import React from 'react';
+import styles from 'components/DateRange/DateRange.scss';
export default class DateRange extends React.Component {
constructor(props) {
super();
- let val = props.value || {};
+ const val = props.value || {};
this.state = {
open: false,
position: null,
start: val.start || monthsFrom(new Date(), -1),
- end: val.end || new Date()
+ end: val.end || new Date(),
};
this.wrapRef = React.createRef();
@@ -40,13 +36,13 @@ export default class DateRange extends React.Component {
if (this.state.open) {
return { open: false };
}
- let pos = Position.inWindow(this.wrapRef.current);
+ const pos = Position.inWindow(this.wrapRef.current);
if (this.props.align === Directions.RIGHT) {
pos.x += this.wrapRef.current.clientWidth;
}
return {
open: true,
- position: pos
+ position: pos,
};
});
}
@@ -69,45 +65,48 @@ export default class DateRange extends React.Component {
close() {
this.setState({
- open: false
+ open: false,
});
this.props.onChange({ start: this.state.start, end: this.state.end });
}
rangeString() {
- return (
- `${monthDayStringUTC(this.state.start)} - ${monthDayStringUTC(this.state.end)}`
- );
+ return `${monthDayStringUTC(this.state.start)} - ${monthDayStringUTC(this.state.end)}`;
}
render() {
let popover = null;
let content = null;
if (this.state.open) {
- let classes = [styles.open];
+ const classes = [styles.open];
if (this.props.align === Directions.RIGHT) {
classes.push(styles.right);
}
- let renderShade = (
+ const renderShade =
this.state.start.getFullYear() < this.state.end.getFullYear() ||
- this.state.start.getMonth() !== this.state.end.getMonth()
- );
+ this.state.start.getMonth() !== this.state.end.getMonth();
popover = (
-
+
this.setStart(start)}
- shadeAfter={renderShade} />
+ onChange={start => this.setStart(start)}
+ shadeAfter={renderShade}
+ />
this.setEnd(end)}
- shadeBefore={renderShade} />
+ onChange={end => this.setEnd(end)}
+ shadeBefore={renderShade}
+ />
{this.rangeString()}
-
@@ -116,7 +115,7 @@ export default class DateRange extends React.Component {
content = (
{this.rangeString()}
-
);
}
diff --git a/src/components/DateTimeEditor/DateTimeEditor.react.js b/src/components/DateTimeEditor/DateTimeEditor.react.js
index f2af5dc61c..3799d845e0 100644
--- a/src/components/DateTimeEditor/DateTimeEditor.react.js
+++ b/src/components/DateTimeEditor/DateTimeEditor.react.js
@@ -6,9 +6,9 @@
* the root directory of this source tree.
*/
import DateTimePicker from 'components/DateTimePicker/DateTimePicker.react';
-import hasAncestor from 'lib/hasAncestor';
-import React from 'react';
-import styles from 'components/DateTimeEditor/DateTimeEditor.scss';
+import hasAncestor from 'lib/hasAncestor';
+import React from 'react';
+import styles from 'components/DateTimeEditor/DateTimeEditor.scss';
export default class DateTimeEditor extends React.Component {
constructor(props) {
@@ -18,7 +18,7 @@ export default class DateTimeEditor extends React.Component {
open: false,
position: null,
value: props.value,
- text: props.value.toISOString()
+ text: props.value.toISOString(),
};
this.checkExternalClick = this.checkExternalClick.bind(this);
@@ -55,7 +55,7 @@ export default class DateTimeEditor extends React.Component {
}
toggle() {
- this.setState((state) => ({ open: !state.open }));
+ this.setState(state => ({ open: !state.open }));
}
inputDate(e) {
@@ -66,22 +66,27 @@ export default class DateTimeEditor extends React.Component {
if (this.state.text === this.props.value.toISOString()) {
return;
}
- let date = new Date(this.state.text);
+ const date = new Date(this.state.text);
if (isNaN(date.getTime())) {
- this.setState({ value: this.props.value, text: this.props.value.toISOString() });
+ this.setState({
+ value: this.props.value,
+ text: this.props.value.toISOString(),
+ });
} else {
if (this.state.text.endsWith('Z')) {
this.setState({ value: date });
} else {
- let utc = new Date(Date.UTC(
- date.getFullYear(),
- date.getMonth(),
- date.getDate(),
- date.getHours(),
- date.getMinutes(),
- date.getSeconds(),
- date.getMilliseconds()
- ));
+ const utc = new Date(
+ Date.UTC(
+ date.getFullYear(),
+ date.getMonth(),
+ date.getDate(),
+ date.getHours(),
+ date.getMinutes(),
+ date.getSeconds(),
+ date.getMilliseconds()
+ )
+ );
this.setState({ value: utc });
}
}
@@ -95,8 +100,11 @@ export default class DateTimeEditor extends React.Component {
this.setState({ value: value, text: value.toISOString() })}
- close={() => this.setState({ open: false }, () => this.props.onCommit(this.state.value))} />
+ onChange={value => this.setState({ value: value, text: value.toISOString() })}
+ close={() =>
+ this.setState({ open: false }, () => this.props.onCommit(this.state.value))
+ }
+ />
);
diff --git a/src/components/DateTimeEntry/DateTimeEntry.react.js b/src/components/DateTimeEntry/DateTimeEntry.react.js
index 2da49d5f62..ee49f84e92 100644
--- a/src/components/DateTimeEntry/DateTimeEntry.react.js
+++ b/src/components/DateTimeEntry/DateTimeEntry.react.js
@@ -6,9 +6,9 @@
* the root directory of this source tree.
*/
import DateTimePicker from 'components/DateTimePicker/DateTimePicker.react';
-import Popover from 'components/Popover/Popover.react';
-import Position from 'lib/Position';
-import React from 'react';
+import Popover from 'components/Popover/Popover.react';
+import Position from 'lib/Position';
+import React from 'react';
export default class DateTimeEntry extends React.Component {
constructor(props) {
@@ -17,8 +17,8 @@ export default class DateTimeEntry extends React.Component {
this.state = {
open: false,
position: null,
- value: props.value.toISOString ? props.value.toISOString() : props.value
- }
+ value: props.value.toISOString ? props.value.toISOString() : props.value,
+ };
this.rootRef = React.createRef();
this.inputRef = React.createRef();
@@ -26,7 +26,7 @@ export default class DateTimeEntry extends React.Component {
componentWillReceiveProps(props) {
this.setState({
- value: props.value.toISOString ? props.value.toISOString() : props.value
+ value: props.value.toISOString ? props.value.toISOString() : props.value,
});
}
@@ -39,23 +39,23 @@ export default class DateTimeEntry extends React.Component {
}
open() {
- let node = this.rootRef.current;
- let pos = Position.inDocument(node);
+ const node = this.rootRef.current;
+ const pos = Position.inDocument(node);
pos.y += node.clientHeight;
- let height = 230 + node.clientWidth * 0.14;
+ const height = 230 + node.clientWidth * 0.14;
if (window.innerHeight - pos.y - height < 40) {
pos.y = window.innerHeight - height - 40;
}
this.setState({
open: true,
- position: pos
+ position: pos,
});
}
close() {
this.setState({
- open: false
+ open: false,
});
}
@@ -67,19 +67,21 @@ export default class DateTimeEntry extends React.Component {
if (this.state.value === this.props.value.toISOString()) {
return;
}
- let date = new Date(this.state.value);
+ const date = new Date(this.state.value);
if (isNaN(date.getTime())) {
this.setState({ value: this.props.value.toISOString() });
} else if (!this.state.value.toLowerCase().endsWith('z')) {
- let utc = new Date(Date.UTC(
- date.getFullYear(),
- date.getMonth(),
- date.getDate(),
- date.getHours(),
- date.getMinutes(),
- date.getSeconds(),
- date.getMilliseconds()
- ));
+ const utc = new Date(
+ Date.UTC(
+ date.getFullYear(),
+ date.getMonth(),
+ date.getDate(),
+ date.getHours(),
+ date.getMinutes(),
+ date.getSeconds(),
+ date.getMilliseconds()
+ )
+ );
this.props.onChange(utc);
} else {
this.props.onChange(date);
@@ -94,24 +96,31 @@ export default class DateTimeEntry extends React.Component {
let popover = null;
if (this.state.open) {
popover = (
-
+
this.setState({ open: false })} />
+ close={() => this.setState({ open: false })}
+ />
);
}
-
+
return (
);
diff --git a/src/components/DateTimeInput/DateTimeInput.example.js b/src/components/DateTimeInput/DateTimeInput.example.js
index cb7cf53e90..9c293a0b18 100644
--- a/src/components/DateTimeInput/DateTimeInput.example.js
+++ b/src/components/DateTimeInput/DateTimeInput.example.js
@@ -6,9 +6,9 @@
* the root directory of this source tree.
*/
import DateTimeInput from 'components/DateTimeInput/DateTimeInput.react';
-import Field from 'components/Field/Field.react';
-import Label from 'components/Label/Label.react';
-import React from 'react';
+import Field from 'components/Field/Field.react';
+import Label from 'components/Label/Label.react';
+import React from 'react';
export const component = DateTimeInput;
@@ -24,7 +24,11 @@ class DateTimeInputDemo extends React.Component {
render() {
return (
-
- )
+ ),
},
{
render: () => (
- )
- }
+ ),
+ },
];
diff --git a/src/components/DateTimeInput/DateTimeInput.react.js b/src/components/DateTimeInput/DateTimeInput.react.js
index 5c66e9c177..cd9f7a82d0 100644
--- a/src/components/DateTimeInput/DateTimeInput.react.js
+++ b/src/components/DateTimeInput/DateTimeInput.react.js
@@ -5,12 +5,12 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import DateTimePicker from 'components/DateTimePicker/DateTimePicker.react';
-import { MONTHS, getDateMethod } from 'lib/DateUtils';
-import Popover from 'components/Popover/Popover.react';
-import Position from 'lib/Position';
-import React from 'react';
-import styles from 'components/DateTimeInput/DateTimeInput.scss';
+import DateTimePicker from 'components/DateTimePicker/DateTimePicker.react';
+import { MONTHS, getDateMethod } from 'lib/DateUtils';
+import Popover from 'components/Popover/Popover.react';
+import Position from 'lib/Position';
+import React from 'react';
+import styles from 'components/DateTimeInput/DateTimeInput.scss';
export default class DateTimeInput extends React.Component {
constructor() {
@@ -19,7 +19,7 @@ export default class DateTimeInput extends React.Component {
this.state = {
open: false,
position: null,
- }
+ };
this.inputRef = React.createRef();
}
@@ -29,9 +29,9 @@ export default class DateTimeInput extends React.Component {
if (this.state.open) {
return { open: false };
}
- let node = this.inputRef.current;
+ const node = this.inputRef.current;
let pos = Position.inDocument(node);
- let height = 230 + node.clientWidth * 0.14;
+ const height = 230 + node.clientWidth * 0.14;
if (this.props.fixed) {
pos = Position.inWindow(node);
if (window.innerHeight - pos.y - height < 40) {
@@ -44,14 +44,14 @@ export default class DateTimeInput extends React.Component {
}
return {
open: true,
- position: pos
+ position: pos,
};
});
}
close() {
this.setState({
- open: false
+ open: false,
});
}
@@ -59,13 +59,18 @@ export default class DateTimeInput extends React.Component {
let popover = null;
if (this.state.open) {
popover = (
-
+
this.setState({ open: false })} />
+ close={() => this.setState({ open: false })}
+ />
);
}
@@ -76,18 +81,28 @@ export default class DateTimeInput extends React.Component {
} else {
content = (
- {MONTHS[this.props.value[getDateMethod(this.props.local, 'getMonth')]()].substr(0, 3) + ' ' + this.props.value[getDateMethod(this.props.local, 'getDate')]()}
+
+ {MONTHS[this.props.value[getDateMethod(this.props.local, 'getMonth')]()].substr(0, 3) +
+ ' ' +
+ this.props.value[getDateMethod(this.props.local, 'getDate')]()}
+
at
- {this.props.value[getDateMethod(this.props.local, 'getHours')]()}:{(this.props.value[getDateMethod(this.props.local, 'getMinutes')]() < 10 ? '0' : '') + this.props.value[getDateMethod(this.props.local, 'getMinutes')]()}
+ {this.props.value[getDateMethod(this.props.local, 'getHours')]()}:
+ {(this.props.value[getDateMethod(this.props.local, 'getMinutes')]() < 10 ? '0' : '') +
+ this.props.value[getDateMethod(this.props.local, 'getMinutes')]()}
{!this.props.local ? UTC : null}
);
}
-
+
return (
-
+
{content}
{popover}
diff --git a/src/components/DateTimePicker/DateTimePicker.react.js b/src/components/DateTimePicker/DateTimePicker.react.js
index a4fdabe5b2..2c8f582df5 100644
--- a/src/components/DateTimePicker/DateTimePicker.react.js
+++ b/src/components/DateTimePicker/DateTimePicker.react.js
@@ -5,33 +5,37 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import Button from 'components/Button/Button.react';
-import Calendar from 'components/Calendar/Calendar.react';
+import Button from 'components/Button/Button.react';
+import Calendar from 'components/Calendar/Calendar.react';
import { hoursFrom, getDateMethod } from 'lib/DateUtils';
-import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import styles from 'components/DateTimePicker/DateTimePicker.scss';
+import PropTypes from 'lib/PropTypes';
+import React from 'react';
+import styles from 'components/DateTimePicker/DateTimePicker.scss';
export default class DateTimePicker extends React.Component {
constructor(props) {
super();
- let timeRef = props.value || hoursFrom(new Date(), 1);
+ const timeRef = props.value || hoursFrom(new Date(), 1);
this.state = {
hours: String(timeRef[getDateMethod(props.local, 'getHours')]()),
- minutes: (timeRef[getDateMethod(props.local, 'getMinutes')]() < 10 ? '0' : '') + String(timeRef[getDateMethod(props.local, 'getMinutes')]()),
- }
+ minutes:
+ (timeRef[getDateMethod(props.local, 'getMinutes')]() < 10 ? '0' : '') +
+ String(timeRef[getDateMethod(props.local, 'getMinutes')]()),
+ };
}
componentWillReceiveProps(props) {
- let timeRef = props.value || hoursFrom(new Date(), 1);
+ const timeRef = props.value || hoursFrom(new Date(), 1);
this.setState({
hours: String(timeRef[getDateMethod(props.local, 'getHours')]()),
- minutes: (timeRef[getDateMethod(props.local, 'getMinutes')]() < 10 ? '0' : '') + String(timeRef[getDateMethod(props.local, 'getMinutes')]()),
+ minutes:
+ (timeRef[getDateMethod(props.local, 'getMinutes')]() < 10 ? '0' : '') +
+ String(timeRef[getDateMethod(props.local, 'getMinutes')]()),
});
}
changeHours(e) {
- let hoursString = e.target.value;
+ const hoursString = e.target.value;
if (hoursString === '') {
return this.setState({ hours: '' });
}
@@ -49,7 +53,7 @@ export default class DateTimePicker extends React.Component {
}
changeMinutes(e) {
- let minutesString = e.target.value;
+ const minutesString = e.target.value;
if (minutesString === '') {
return this.setState({ minutes: '' });
}
@@ -67,21 +71,24 @@ export default class DateTimePicker extends React.Component {
}
commitTime() {
- let dateRef = this.props.value || new Date();
- let newDate = this.props.local ? new Date(
- dateRef.getFullYear(),
- dateRef.getMonth(),
- dateRef.getDate(),
- parseInt(this.state.hours, 10),
- parseInt(this.state.minutes, 10)
- ) :
- new Date(Date.UTC(
- dateRef.getUTCFullYear(),
- dateRef.getUTCMonth(),
- dateRef.getUTCDate(),
- parseInt(this.state.hours, 10),
- parseInt(this.state.minutes, 10)
- ));
+ const dateRef = this.props.value || new Date();
+ const newDate = this.props.local
+ ? new Date(
+ dateRef.getFullYear(),
+ dateRef.getMonth(),
+ dateRef.getDate(),
+ parseInt(this.state.hours, 10),
+ parseInt(this.state.minutes, 10)
+ )
+ : new Date(
+ Date.UTC(
+ dateRef.getUTCFullYear(),
+ dateRef.getUTCMonth(),
+ dateRef.getUTCDate(),
+ parseInt(this.state.hours, 10),
+ parseInt(this.state.minutes, 10)
+ )
+ );
this.props.onChange(newDate);
if (this.props.close) {
this.props.close();
@@ -90,32 +97,47 @@ export default class DateTimePicker extends React.Component {
render() {
return (
-
e.stopPropagation()} >
-
{
- let timeRef = this.props.value || hoursFrom(new Date(), 1);
- let newDate = this.props.local ? new Date(
- newValue.getFullYear(),
- newValue.getMonth(),
- newValue.getDate(),
- timeRef.getHours(),
- timeRef.getMinutes()
- ) :
- new Date(Date.UTC(
- newValue.getUTCFullYear(),
- newValue.getUTCMonth(),
- newValue.getUTCDate(),
- timeRef.getUTCHours(),
- timeRef.getUTCMinutes()
- ));
- this.props.onChange(newDate);
- }} />
+ e.stopPropagation()}
+ >
+
{
+ const timeRef = this.props.value || hoursFrom(new Date(), 1);
+ const newDate = this.props.local
+ ? new Date(
+ newValue.getFullYear(),
+ newValue.getMonth(),
+ newValue.getDate(),
+ timeRef.getHours(),
+ timeRef.getMinutes()
+ )
+ : new Date(
+ Date.UTC(
+ newValue.getUTCFullYear(),
+ newValue.getUTCMonth(),
+ newValue.getUTCDate(),
+ timeRef.getUTCHours(),
+ timeRef.getUTCMinutes()
+ )
+ );
+ this.props.onChange(newDate);
+ }}
+ />
);
@@ -123,19 +145,9 @@ export default class DateTimePicker extends React.Component {
}
DateTimePicker.propTypes = {
- value: PropTypes.instanceOf(Date).describe(
- 'The current date of the picker.'
- ),
- width: PropTypes.number.isRequired.describe(
- 'The width of the calendar.'
- ),
- onChange: PropTypes.func.isRequired.describe(
- 'A function to call when a new date is selected.'
- ),
- close: PropTypes.func.describe(
- 'An optional function to call to close the calendar.'
- ),
- local: PropTypes.bool.describe(
- 'An option flag to set when using a local DateTimeInput.'
- ),
+ value: PropTypes.instanceOf(Date).describe('The current date of the picker.'),
+ width: PropTypes.number.isRequired.describe('The width of the calendar.'),
+ onChange: PropTypes.func.isRequired.describe('A function to call when a new date is selected.'),
+ close: PropTypes.func.describe('An optional function to call to close the calendar.'),
+ local: PropTypes.bool.describe('An option flag to set when using a local DateTimeInput.'),
};
diff --git a/src/components/DonutChart/DonutChart.example.js b/src/components/DonutChart/DonutChart.example.js
index 3f2e2ea9ea..22b72e4aae 100644
--- a/src/components/DonutChart/DonutChart.example.js
+++ b/src/components/DonutChart/DonutChart.example.js
@@ -6,31 +6,28 @@
* the root directory of this source tree.
*/
import DonutChart from 'components/DonutChart/DonutChart.react';
-import React from 'react';
+import React from 'react';
export const component = DonutChart;
export const demos = [
{
name: 'Simple DonutChart',
- render: () => (
-
- {printPercentage ? (segment / sum * 100).toFixed(2) + '%' : segment}
+
+ {printPercentage ? ((segment / sum) * 100).toFixed(2) + '%' : segment}
))}
- {label}
+
+ {label}
+
);
};
@@ -86,19 +91,15 @@ let DonutChart = ({ segments=[], diameter=200, label='', isMonochrome=false, pri
export default DonutChart;
DonutChart.propTypes = {
- 'segments': PropTypes.arrayOf(PropTypes.number).isRequired.describe(
- 'Values of the DonutChart.'
- ),
- 'diameter': PropTypes.number.describe(
- 'Width and height of the DonutChart.'
- ),
- 'label': PropTypes.string.describe(
+ segments: PropTypes.arrayOf(PropTypes.number).isRequired.describe('Values of the DonutChart.'),
+ diameter: PropTypes.number.describe('Width and height of the DonutChart.'),
+ label: PropTypes.string.describe(
'Additional string to be appended after each rendered value in DonutChart.'
),
- 'isMonochrome': PropTypes.bool.describe(
+ isMonochrome: PropTypes.bool.describe(
'Whether the DonutChart is monochrome/bicolor (usually used for progress bar).'
),
- 'printPercentage': PropTypes.bool.describe(
+ printPercentage: PropTypes.bool.describe(
'Whether the DonutChart should render percentage of each segment instead of the actual value.'
- )
+ ),
};
diff --git a/src/components/DragHandle/DragHandle.example.js b/src/components/DragHandle/DragHandle.example.js
index cb0571f2b6..4fbf2fa1a7 100644
--- a/src/components/DragHandle/DragHandle.example.js
+++ b/src/components/DragHandle/DragHandle.example.js
@@ -5,11 +5,11 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import DataBrowserHeader from 'components/DataBrowserHeader/DataBrowserHeader.react';
-import DragHandle from 'components/DragHandle/DragHandle.react';
-import HTML5Backend from 'react-dnd-html5-backend';
-import React from 'react';
-import { DndProvider } from 'react-dnd'
+import DataBrowserHeader from 'components/DataBrowserHeader/DataBrowserHeader.react';
+import DragHandle from 'components/DragHandle/DragHandle.react';
+import HTML5Backend from 'react-dnd-html5-backend';
+import React from 'react';
+import { DndProvider } from 'react-dnd';
export const component = DragHandle;
@@ -22,14 +22,14 @@ class DragDemo extends React.Component {
handleDrag(dx, dy) {
this.setState(({ x, y }) => {
- let newX = Math.max(0, Math.min(x + dx, 480));
- let newY = Math.max(0, Math.min(y + dy, 480));
+ const newX = Math.max(0, Math.min(x + dx, 480));
+ const newY = Math.max(0, Math.min(y + dy, 480));
return { x: newX, y: newY };
});
}
render() {
- let style = {
+ const style = {
width: 20,
height: 20,
background: '#5298fc',
@@ -37,31 +37,33 @@ class DragDemo extends React.Component {
cursor: 'move',
position: 'absolute',
left: this.state.x,
- top: this.state.y
+ top: this.state.y,
};
return (
-
+
);
}
}
-let lightBg = { background: 'rgba(224,224,234,0.10)' };
-let handleStyle = {
+const lightBg = { background: 'rgba(224,224,234,0.10)' };
+const handleStyle = {
position: 'relative',
display: 'inline-block',
width: 4,
height: 30,
marginLeft: -2,
marginRight: -2,
- cursor: 'ew-resize'
+ cursor: 'ew-resize',
};
class HeadersDemo extends React.Component {
@@ -69,14 +71,7 @@ class HeadersDemo extends React.Component {
super();
this.state = {
- widths: [
- 140,
- 140,
- 140,
- 140,
- 140,
- 140
- ]
+ widths: [140, 140, 140, 140, 140, 140],
};
}
@@ -92,27 +87,31 @@ class HeadersDemo extends React.Component {
@@ -124,13 +123,10 @@ class HeadersDemo extends React.Component {
export const demos = [
{
name: 'Drag the ball',
- render: () => (
-
- Red
- Orange
- Yellow
- Green
- Blue
- Purple
- Rainbow
- No preference. Instead, I like really long strings
+ Red
+ Orange
+ Yellow
+ Green
+ Blue
+ Purple
+ Rainbow
+ No preference. Instead, I like really long strings
);
}
@@ -42,14 +42,10 @@ class DropdownDemo extends React.Component {
export const demos = [
{
render: () => (
-
-
}
- input={
} />
-
}
- input={
} />
+
+
- )
- }
+ ),
+ },
];
diff --git a/src/components/Dropdown/Dropdown.react.js b/src/components/Dropdown/Dropdown.react.js
index 3f444767f9..471cf1d31e 100644
--- a/src/components/Dropdown/Dropdown.react.js
+++ b/src/components/Dropdown/Dropdown.react.js
@@ -6,20 +6,20 @@
* the root directory of this source tree.
*/
import { Directions } from 'lib/Constants';
-import Popover from 'components/Popover/Popover.react';
-import Position from 'lib/Position';
-import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import SliderWrap from 'components/SliderWrap/SliderWrap.react';
-import styles from 'components/Dropdown/Dropdown.scss';
+import Popover from 'components/Popover/Popover.react';
+import Position from 'lib/Position';
+import PropTypes from 'lib/PropTypes';
+import React from 'react';
+import SliderWrap from 'components/SliderWrap/SliderWrap.react';
+import styles from 'components/Dropdown/Dropdown.scss';
export default class Dropdown extends React.Component {
constructor() {
super();
this.state = {
open: false,
- position: null
- }
+ position: null,
+ };
this.dropdownRef = React.createRef();
}
@@ -35,14 +35,14 @@ export default class Dropdown extends React.Component {
}
return {
open: true,
- position: pos
+ position: pos,
};
});
}
close() {
this.setState({
- open: false
+ open: false,
});
}
@@ -50,30 +50,40 @@ export default class Dropdown extends React.Component {
if (value === this.props.value) {
return this.setState({ open: false });
}
- this.setState({
- open: false
- }, () => {
- this.props.onChange(value);
- });
+ this.setState(
+ {
+ open: false,
+ },
+ () => {
+ this.props.onChange(value);
+ }
+ );
}
render() {
let popover = null;
if (this.state.open && !this.props.disabled) {
- let width = this.dropdownRef.current.clientWidth;
- let popoverChildren = (
+ const width = this.dropdownRef.current.clientWidth;
+ const popoverChildren = (
{React.Children.map(this.props.children, c => (
- {c}
+
+ {c}
+
))}
);
- popover =
-
+ popover = (
+
{popoverChildren}
- ;
+
+ );
}
let content = null;
React.Children.forEach(this.props.children, c => {
@@ -82,26 +92,25 @@ export default class Dropdown extends React.Component {
}
});
if (!content) {
- content = (
-
- {this.props.placeHolder}
-
- );
+ content =
{this.props.placeHolder}
;
}
let dropdownStyle = {};
if (this.props.width) {
dropdownStyle = {
width: this.props.width,
- float: 'left'
+ float: 'left',
};
}
- let dropdownClasses = [styles.dropdown];
+ const dropdownClasses = [styles.dropdown];
if (this.props.disabled) {
dropdownClasses.push(styles.disabled);
}
return (
-
+
{content}
{popover}
@@ -114,9 +123,7 @@ Dropdown.propTypes = {
onChange: PropTypes.func.isRequired.describe(
'A function called when the dropdown is changed. It receives the new value as the only parameter.'
),
- value: PropTypes.string.describe(
- 'The currently-selected value of this controlled input.'
- ),
+ value: PropTypes.string.describe('The currently-selected value of this controlled input.'),
disabled: PropTypes.bool.describe('Set to true to disable the dropdown.'),
children: PropTypes.node.isRequired.describe(
'The children of Dropdown should only be
components.'
@@ -124,10 +131,6 @@ Dropdown.propTypes = {
fixed: PropTypes.bool.describe(
'Fixes the dropdown in place. Set to true in modals or other places where you don\u2019t want the dropdown to move when you scroll.'
),
- placeHolder: PropTypes.string.describe(
- 'Placeholder text used in place of default selection.'
- ),
- hideArrow: PropTypes.bool.describe(
- 'Flag to hide the dropdown arrow.'
- ),
-}
+ placeHolder: PropTypes.string.describe('Placeholder text used in place of default selection.'),
+ hideArrow: PropTypes.bool.describe('Flag to hide the dropdown arrow.'),
+};
diff --git a/src/components/Dropdown/Option.react.js b/src/components/Dropdown/Option.react.js
index d9726537d2..4995b2d4d5 100644
--- a/src/components/Dropdown/Option.react.js
+++ b/src/components/Dropdown/Option.react.js
@@ -8,6 +8,6 @@
import React from 'react';
import styles from 'components/Dropdown/Dropdown.scss';
-let Option = props =>
;
+const Option = props =>
;
export default Option;
diff --git a/src/components/EmptyState/EmptyState.example.js b/src/components/EmptyState/EmptyState.example.js
index 2c16c46331..8b1e014e6f 100644
--- a/src/components/EmptyState/EmptyState.example.js
+++ b/src/components/EmptyState/EmptyState.example.js
@@ -14,27 +14,29 @@ export const demos = [
{
name: 'Example with Action callback',
render: () => (
-
+
alert('CTA was clicked')}>
+ action={() => alert('CTA was clicked')}
+ >
- )
+ ),
},
{
name: 'Example with Action href',
render: () => (
-
+
- )
- }
-]
+ ),
+ },
+];
diff --git a/src/components/EmptyState/EmptyState.react.js b/src/components/EmptyState/EmptyState.react.js
index 22be2eb529..4e27072db7 100644
--- a/src/components/EmptyState/EmptyState.react.js
+++ b/src/components/EmptyState/EmptyState.react.js
@@ -5,52 +5,46 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import Button from 'components/Button/Button.react';
-import Icon from 'components/Icon/Icon.react';
-import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import styles from 'components/EmptyState/EmptyState.scss';
+import Button from 'components/Button/Button.react';
+import Icon from 'components/Icon/Icon.react';
+import PropTypes from 'lib/PropTypes';
+import React from 'react';
+import styles from 'components/EmptyState/EmptyState.scss';
import stylesButton from 'components/Button/Button.scss';
-import baseStyles from 'stylesheets/base.scss';
+import baseStyles from 'stylesheets/base.scss';
-let ctaButton = (cta, action) => {
+const ctaButton = (cta, action) => {
if (cta) {
if (action.constructor === String) {
return (
-
+
{cta}
);
} else {
- return (
-
- );
+ return
;
}
} else {
return null;
}
-}
+};
-let EmptyState = ({
- icon='',
- title='',
- description='',
- cta='',
- action=() => {},
- secondaryCta='',
- secondaryAction=() => {},
+const EmptyState = ({
+ icon = '',
+ title = '',
+ description = '',
+ cta = '',
+ action = () => {},
+ secondaryCta = '',
+ secondaryAction = () => {},
}) => (
-
{title}
{description}
@@ -61,26 +55,20 @@ let EmptyState = ({
);
EmptyState.propTypes = {
- icon: PropTypes.string.describe(
- 'The name of the large icon that appears in the empty state.'
- ),
+ icon: PropTypes.string.describe('The name of the large icon that appears in the empty state.'),
title: PropTypes.string.describe(
'Help text that explains why this is an empty state; ' +
- 'usually because you haven\u2019t created any data here.'
+ 'usually because you haven\u2019t created any data here.'
),
description: PropTypes.node.describe(
'Help text that indicates how to leave the empty state, ' +
- 'usually by visiting docs or using the CTA.'
- ),
- cta: PropTypes.string.describe(
- 'The text that appears in the CTA button.'
+ 'usually by visiting docs or using the CTA.'
),
+ cta: PropTypes.string.describe('The text that appears in the CTA button.'),
action: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).describe(
'An href link or a click handler that is forwarded to the CTA button.'
),
- secondaryCta: PropTypes.string.describe(
- 'The text that appears in the secondary CTA button.'
- ),
+ secondaryCta: PropTypes.string.describe('The text that appears in the secondary CTA button.'),
secondaryAction: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).describe(
'An href link or a click handler that is forwarded to the secondary CTA button.'
),
diff --git a/src/components/ExpirationDateInput/ExpirationDateInput.example.js b/src/components/ExpirationDateInput/ExpirationDateInput.example.js
index ae1c72efdf..987fd329a0 100644
--- a/src/components/ExpirationDateInput/ExpirationDateInput.example.js
+++ b/src/components/ExpirationDateInput/ExpirationDateInput.example.js
@@ -5,10 +5,10 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import Field from 'components/Field/Field.react';
+import Field from 'components/Field/Field.react';
import ExpirationDateInput from 'components/ExpirationDateInput/ExpirationDateInput.react';
-import Label from 'components/Label/Label.react';
-import React from 'react';
+import Label from 'components/Label/Label.react';
+import React from 'react';
export const component = ExpirationDateInput;
@@ -23,7 +23,8 @@ class Demo extends React.Component {
this.setState(change)} />
+ onChange={change => this.setState(change)}
+ />
);
}
}
@@ -31,11 +32,9 @@ class Demo extends React.Component {
export const demos = [
{
render: () => (
-
-
}
- input={
} />
+
+
- )
- }
+ ),
+ },
];
diff --git a/src/components/ExpirationDateInput/ExpirationDateInput.react.js b/src/components/ExpirationDateInput/ExpirationDateInput.react.js
index 0027b5b362..4993b269e7 100644
--- a/src/components/ExpirationDateInput/ExpirationDateInput.react.js
+++ b/src/components/ExpirationDateInput/ExpirationDateInput.react.js
@@ -10,31 +10,41 @@ import Option from 'components/Dropdown/Option.react';
import PropTypes from 'lib/PropTypes';
import React from 'react';
-let months = [];
+const months = [];
for (let i = 1; i <= 12; i++) {
- let value = (i < 10 ? '0' : '') + String(i);
- months.push(
{value} );
+ const value = (i < 10 ? '0' : '') + String(i);
+ months.push(
+
+ {value}
+
+ );
}
-let years = [];
-let startYear = new Date().getFullYear();
+const years = [];
+const startYear = new Date().getFullYear();
for (let i = 0; i < 10; i++) {
- let value = String(startYear + i);
- years.push(
{value} );
+ const value = String(startYear + i);
+ years.push(
+
+ {value}
+
+ );
}
-let ExpirationDateInput = ({ month, year, onChange }) => {
+const ExpirationDateInput = ({ month, year, onChange }) => {
return (
onChange({ month: parseInt(value, 10), year: year })}>
+ onChange={value => onChange({ month: parseInt(value, 10), year: year })}
+ >
{months}
onChange({ month: month, year: parseInt(value, 10) })}>
+ onChange={value => onChange({ month: month, year: parseInt(value, 10) })}
+ >
{years}
@@ -44,13 +54,9 @@ let ExpirationDateInput = ({ month, year, onChange }) => {
export default ExpirationDateInput;
ExpirationDateInput.propTypes = {
- month: PropTypes.number.describe(
- 'The expiration month.'
- ),
- year: PropTypes.number.describe(
- 'The expiration year, in four-digit form.'
- ),
+ month: PropTypes.number.describe('The expiration month.'),
+ year: PropTypes.number.describe('The expiration year, in four-digit form.'),
onChange: PropTypes.func.isRequired.describe(
'A function called when the value changes. It receives an object with two parameters: the month and the year.'
- )
+ ),
};
diff --git a/src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.example.js b/src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.example.js
index 41e3b0da39..bdb1bb0b94 100644
--- a/src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.example.js
+++ b/src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.example.js
@@ -6,8 +6,8 @@
* the root directory of this source tree.
*/
import ExplorerActiveChartButton from 'components/ExplorerActiveChartButton/ExplorerActiveChartButton.react';
-import React from 'react';
-import { ChartColorSchemes } from 'lib/Constants';
+import React from 'react';
+import { ChartColorSchemes } from 'lib/Constants';
export const component = ExplorerActiveChartButton;
@@ -17,103 +17,107 @@ const QUERIES = [
children: [
{
name: 'Daily Active Installations',
- query: { },
+ query: {},
preset: true,
- nonComposable: true
+ nonComposable: true,
},
{
name: 'Daily Active Users',
- query: { },
+ query: {},
preset: true,
- nonComposable: true
+ nonComposable: true,
},
{
name: 'Monthly Active Installations',
- query: { },
+ query: {},
preset: true,
- nonComposable: true
+ nonComposable: true,
},
{
name: 'Monthly Active Users',
- query: { },
+ query: {},
preset: true,
- nonComposable: true
- }
- ]
- }, {
+ nonComposable: true,
+ },
+ ],
+ },
+ {
name: 'Core',
children: [
{
name: 'Gogo Count',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'User Count',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Installation Count',
- query: { },
- preset: true
- }
- ]
- }, {
+ query: {},
+ preset: true,
+ },
+ ],
+ },
+ {
name: 'Events',
children: [
{
name: 'API Requests',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Analytics Requests',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'File Requests',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Push Notifications',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'App Opens',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Push Opens',
- query: { },
- preset: true
- }
- ]
- }, {
+ query: {},
+ preset: true,
+ },
+ ],
+ },
+ {
name: 'Recent Queries',
children: [
{
name: 'User Count Aggregate',
- query: { }
- }
- ]
- }, {
+ query: {},
+ },
+ ],
+ },
+ {
name: 'Saved Queries',
children: [
{
name: 'Gogo Queries',
- query: { }
+ query: {},
},
{
name: 'Saved Queries',
- query: { }
- }
- ]
- }
+ query: {},
+ },
+ ],
+ },
];
export const demos = [
@@ -124,43 +128,61 @@ export const demos = [
{/* Do nothing */}}
- onToggle={() => {/* Do nothing */} } />
+ onSave={() => {
+ /* Do nothing */
+ }}
+ onToggle={() => {
+ /* Do nothing */
+ }}
+ />
);
- }
- }, {
+ },
+ },
+ {
name: 'With Custom Color',
render: () => {
return (
{/* Do nothing */}}
- onToggle={() => {/* Do nothing */} } />
+ onSave={() => {
+ /* Do nothing */
+ }}
+ onToggle={() => {
+ /* Do nothing */
+ }}
+ />
);
- }
- }, {
+ },
+ },
+ {
name: 'Without Dropdown',
render: () => {
return (
{/* Do nothing */}}
- onToggle={() => {/* Do nothing */} }
- disableDropdown={true} />
+ onSave={() => {
+ /* Do nothing */
+ }}
+ onToggle={() => {
+ /* Do nothing */
+ }}
+ disableDropdown={true}
+ />
);
- }
- }, {
+ },
+ },
+ {
name: 'With Non-Composable Query',
render: () => {
return (
@@ -168,12 +190,17 @@ export const demos = [
queries={QUERIES}
query={{
name: 'User Count Aggregate',
- nonComposable: true
+ nonComposable: true,
}}
color={ChartColorSchemes[1]}
- onSave={() => {/* Do nothing */}}
- onToggle={() => {/* Do nothing */} } />
+ onSave={() => {
+ /* Do nothing */
+ }}
+ onToggle={() => {
+ /* Do nothing */
+ }}
+ />
);
- }
- }
-]
+ },
+ },
+];
diff --git a/src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.react.js b/src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.react.js
index 51930881be..d3d65957d3 100644
--- a/src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.react.js
+++ b/src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.react.js
@@ -5,15 +5,15 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import { Directions } from 'lib/Constants';
+import { Directions } from 'lib/Constants';
import ExplorerQueryComposer from 'components/ExplorerQueryComposer/ExplorerQueryComposer.react';
-import Icon from 'components/Icon/Icon.react';
-import Popover from 'components/Popover/Popover.react';
-import Position from 'lib/Position';
-import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import styles from 'components/ExplorerActiveChartButton/ExplorerActiveChartButton.scss';
-import baseStyles from 'stylesheets/base.scss';
+import Icon from 'components/Icon/Icon.react';
+import Popover from 'components/Popover/Popover.react';
+import Position from 'lib/Position';
+import PropTypes from 'lib/PropTypes';
+import React from 'react';
+import styles from 'components/ExplorerActiveChartButton/ExplorerActiveChartButton.scss';
+import baseStyles from 'stylesheets/base.scss';
export default class ExplorerActiveChartButton extends React.Component {
constructor() {
@@ -23,17 +23,17 @@ export default class ExplorerActiveChartButton extends React.Component {
position: null,
open: false,
active: true,
- align: Directions.LEFT
- }
+ align: Directions.LEFT,
+ };
this.wrapRef = React.createRef();
}
handleCheckbox() {
- let nextActiveState = !this.state.active;
+ const nextActiveState = !this.state.active;
this.props.onToggle(nextActiveState);
this.setState({
- active: nextActiveState
+ active: nextActiveState,
});
}
@@ -52,7 +52,7 @@ export default class ExplorerActiveChartButton extends React.Component {
let color = '#343445';
if (this.state.active) {
// TODO (hallucinogen): a11y the checkbox
- checkMark = {
- let position = Position.inDocument(this.wrapRef.current);
+ const position = Position.inDocument(this.wrapRef.current);
let align = Directions.LEFT;
if (position.x > 700) {
position.x += this.wrapRef.current.clientWidth;
@@ -70,9 +70,10 @@ export default class ExplorerActiveChartButton extends React.Component {
this.setState({
open: !this.state.open,
position,
- align
+ align,
});
- }} />
+ }}
+ />
);
}
@@ -83,8 +84,9 @@ export default class ExplorerActiveChartButton extends React.Component {
onClick={this.handleCheckbox.bind(this)}
style={{
backgroundColor: this.state.active ? this.props.color : null,
- border: `1px solid ${color}`
- }}>
+ border: `1px solid ${color}`,
+ }}
+ >
{checkMark}
{this.props.query.name}
@@ -95,10 +97,10 @@ export default class ExplorerActiveChartButton extends React.Component {
render() {
let popover = null;
- let content = this.renderButton();
+ const content = this.renderButton();
if (this.state.open) {
- let classes = [styles.composerContainer];
+ const classes = [styles.composerContainer];
let calloutStyle = { marginLeft: '10px' };
if (this.state.align === Directions.RIGHT) {
classes.push(styles.right);
@@ -106,9 +108,7 @@ export default class ExplorerActiveChartButton extends React.Component {
}
popover = (
-
+
{content}
@@ -120,7 +120,8 @@ export default class ExplorerActiveChartButton extends React.Component {
onDismiss={() => {
this.setState({ open: false });
this.props.onDismiss();
- }} />
+ }}
+ />
);
@@ -136,13 +137,11 @@ export default class ExplorerActiveChartButton extends React.Component {
}
ExplorerActiveChartButton.propTypes = {
- query: PropTypes.object.describe(
- 'Current query being rendered.'
- ),
+ query: PropTypes.object.describe('Current query being rendered.'),
queries: PropTypes.arrayOf(PropTypes.object).describe(
'An array of queryGroups. Each querygroup should include the following fields: name, children. ' +
- 'children of queryGroup contains an array of queries. Each query should include the following fields: ' +
- 'name, query, (optional)preset.'
+ 'children of queryGroup contains an array of queries. Each query should include the following fields: ' +
+ 'name, query, (optional)preset.'
),
onSave: PropTypes.func.describe(
'Function to be called when an analytics query is sucessfully composed.'
@@ -153,14 +152,12 @@ ExplorerActiveChartButton.propTypes = {
onDismiss: PropTypes.func.describe(
'Function to be called when current chart is being dismissed from list of active charts.'
),
- color: PropTypes.string.describe(
- 'The color of the checkbox and the chart to be rendered.'
- ),
+ color: PropTypes.string.describe('The color of the checkbox and the chart to be rendered.'),
disableDropdown: PropTypes.bool.describe(
'If set to true, disable dropdown to pick/compose the query.'
),
isTimeSeries: PropTypes.bool.describe(
'If set to true, add default grouping (day, hour) and aggregate to the composer. ' +
- 'Otherwise, render limit inside the composer.'
- )
-}
+ 'Otherwise, render limit inside the composer.'
+ ),
+};
diff --git a/src/components/ExplorerMenuButton/ExplorerMenuButton.example.js b/src/components/ExplorerMenuButton/ExplorerMenuButton.example.js
index 1246cfb74b..b72b753bb5 100644
--- a/src/components/ExplorerMenuButton/ExplorerMenuButton.example.js
+++ b/src/components/ExplorerMenuButton/ExplorerMenuButton.example.js
@@ -6,119 +6,126 @@
* the root directory of this source tree.
*/
import ExplorerMenuButton from 'components/ExplorerMenuButton/ExplorerMenuButton.react';
-import React from 'react';
+import React from 'react';
export const component = ExplorerMenuButton;
export const demos = [
{
render: () => {
- let queries = [
+ const queries = [
{
name: 'Audience',
children: [
{
name: 'Daily Active Installations',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Daily Active Users',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Monthly Active Installations',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Monthly Active Users',
- query: { },
- preset: true
- }
- ]
- }, {
+ query: {},
+ preset: true,
+ },
+ ],
+ },
+ {
name: 'Core',
children: [
{
name: 'Gogo Count',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'User Count',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Installation Count',
- query: { },
- preset: true
- }
- ]
- }, {
+ query: {},
+ preset: true,
+ },
+ ],
+ },
+ {
name: 'Events',
children: [
{
name: 'API Requests',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Analytics Requests',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'File Requests',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Push Notifications',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'App Opens',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Push Opens',
- query: { },
- preset: true
- }
- ]
- }, {
+ query: {},
+ preset: true,
+ },
+ ],
+ },
+ {
name: 'Recent Queries',
children: [
{
name: 'User Count Aggregate',
- query: { }
- }
- ]
- }, {
+ query: {},
+ },
+ ],
+ },
+ {
name: 'Saved Queries',
children: [
{
name: 'Gogo Queries',
- query: { }
+ query: {},
},
{
name: 'Saved Queries',
- query: { }
- }
- ]
- }
+ query: {},
+ },
+ ],
+ },
];
return (
{/* Do nothing */}} />
+ value="Add query"
+ onSave={() => {
+ /* Do nothing */
+ }}
+ />
);
- }
- }
-]
+ },
+ },
+];
diff --git a/src/components/ExplorerMenuButton/ExplorerMenuButton.react.js b/src/components/ExplorerMenuButton/ExplorerMenuButton.react.js
index 254bb5bdb2..b5526c55b5 100644
--- a/src/components/ExplorerMenuButton/ExplorerMenuButton.react.js
+++ b/src/components/ExplorerMenuButton/ExplorerMenuButton.react.js
@@ -5,14 +5,14 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import { Directions } from 'lib/Constants';
+import { Directions } from 'lib/Constants';
import ExplorerQueryComposer from 'components/ExplorerQueryComposer/ExplorerQueryComposer.react';
-import ExplorerQueryPicker from 'components/ExplorerQueryPicker/ExplorerQueryPicker.react';
-import Popover from 'components/Popover/Popover.react';
-import Position from 'lib/Position';
-import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import styles from 'components/ExplorerMenuButton/ExplorerMenuButton.scss';
+import ExplorerQueryPicker from 'components/ExplorerQueryPicker/ExplorerQueryPicker.react';
+import Popover from 'components/Popover/Popover.react';
+import Position from 'lib/Position';
+import PropTypes from 'lib/PropTypes';
+import React from 'react';
+import styles from 'components/ExplorerMenuButton/ExplorerMenuButton.scss';
export default class ExplorerMenuButton extends React.Component {
constructor() {
@@ -21,7 +21,7 @@ export default class ExplorerMenuButton extends React.Component {
// can be null, 'picker', or 'composer'
currentView: null,
position: null,
- align: Directions.LEFT
+ align: Directions.LEFT,
};
this.wrapRef = React.createRef();
@@ -32,7 +32,7 @@ export default class ExplorerMenuButton extends React.Component {
if (this.state.currentView) {
return { currentView: null };
}
- let position = Position.inDocument(this.wrapRef.current);
+ const position = Position.inDocument(this.wrapRef.current);
let align = Directions.LEFT;
if (position.x > 700) {
position.x += this.wrapRef.current.clientWidth;
@@ -41,7 +41,7 @@ export default class ExplorerMenuButton extends React.Component {
return {
currentView: 'picker',
position,
- align
+ align,
};
});
}
@@ -71,11 +71,11 @@ export default class ExplorerMenuButton extends React.Component {
render() {
let popover = null;
- let content = this.renderButton();
+ const content = this.renderButton();
if (this.state.currentView) {
let queryMenu = null;
- let classes = [styles.queryMenuContainer];
+ const classes = [styles.queryMenuContainer];
let calloutStyle = { marginLeft: '10px' };
if (this.state.align === Directions.RIGHT) {
classes.push(styles.right);
@@ -88,10 +88,11 @@ export default class ExplorerMenuButton extends React.Component {
{
- this.setState({ currentView: 'composer' })
+ this.setState({ currentView: 'composer' });
}}
onSelect={this.handleSelect.bind(this)}
- onDelete={this.handleDelete.bind(this)} />
+ onDelete={this.handleDelete.bind(this)}
+ />
);
break;
case 'composer':
@@ -99,15 +100,14 @@ export default class ExplorerMenuButton extends React.Component {
+
{content}
@@ -130,20 +130,16 @@ ExplorerMenuButton.propTypes = {
value: PropTypes.string.describe('The label of the button.'),
queries: PropTypes.arrayOf(PropTypes.object).describe(
'An array of queryGroups. Each querygroup should include the following fields: name, children. ' +
- 'children of queryGroup contains an array of queries. Each query should include the following fields: ' +
- 'name, query, (optional)preset.'
+ 'children of queryGroup contains an array of queries. Each query should include the following fields: ' +
+ 'name, query, (optional)preset.'
),
onSave: PropTypes.func.describe(
'Function to be called when an analytics query is sucessfully composed.'
),
- onSelect: PropTypes.func.describe(
- 'Function to be called when a query is being selected.'
- ),
- onDelete: PropTypes.func.describe(
- 'Function to be called when a query is being deleted.'
- ),
+ onSelect: PropTypes.func.describe('Function to be called when a query is being selected.'),
+ onDelete: PropTypes.func.describe('Function to be called when a query is being deleted.'),
isTimeSeries: PropTypes.bool.describe(
'If set to true, add default grouping (day, hour) and aggregate to the composer. ' +
- 'Otherwise, render limit inside the composer.'
- )
+ 'Otherwise, render limit inside the composer.'
+ ),
};
diff --git a/src/components/ExplorerQueryComposer/ExplorerFilter.js b/src/components/ExplorerQueryComposer/ExplorerFilter.js
index ba876c054e..e48ac27536 100644
--- a/src/components/ExplorerQueryComposer/ExplorerFilter.js
+++ b/src/components/ExplorerQueryComposer/ExplorerFilter.js
@@ -6,49 +6,49 @@
* the root directory of this source tree.
*/
export const Constraints = {
- '$eq': {
+ $eq: {
name: 'equals',
},
- '$ne': {
+ $ne: {
name: 'does not equal',
},
- '$lt': {
+ $lt: {
name: 'less than',
field: 'Number',
composable: true,
},
- '$le': {
+ $le: {
name: 'less than or equal',
field: 'Number',
composable: true,
},
- '$gt': {
+ $gt: {
name: 'greater than',
field: 'Number',
composable: true,
},
- '$ge': {
+ $ge: {
name: 'greater than or equal',
field: 'Number',
composable: true,
},
- '$contains': {
+ $contains: {
name: 'contains string',
field: 'String',
composable: true,
},
- 'json_extract_scalar': {
+ json_extract_scalar: {
name: 'json',
field: 'JSON',
- composable: true
- }
+ composable: true,
+ },
};
export const FieldConstraints = {
- 'Boolean': [ '$eq' ],
- 'Number': [ '$eq', '$ne', '$lt', '$le', '$gt', '$ge' ],
- 'String': [ '$eq', '$ne', '$contains' ],
- 'Date': [ '$eq', '$ne', '$lt', '$le', '$gt', '$ge' ],
- 'JSON': [ '$eq', '$ne', 'json_extract_scalar' ],
- 'JSONValue': [ '$eq', '$ne' ]
+ Boolean: ['$eq'],
+ Number: ['$eq', '$ne', '$lt', '$le', '$gt', '$ge'],
+ String: ['$eq', '$ne', '$contains'],
+ Date: ['$eq', '$ne', '$lt', '$le', '$gt', '$ge'],
+ JSON: ['$eq', '$ne', 'json_extract_scalar'],
+ JSONValue: ['$eq', '$ne'],
};
diff --git a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.example.js b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.example.js
index c5efbad358..e2b5d014f2 100644
--- a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.example.js
+++ b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.example.js
@@ -6,7 +6,7 @@
* the root directory of this source tree.
*/
import ExplorerQueryComposer from 'components/ExplorerQueryComposer/ExplorerQueryComposer.react';
-import React from 'react';
+import React from 'react';
export const component = ExplorerQueryComposer;
@@ -15,28 +15,24 @@ export const demos = [
name: 'New query',
render: () => (
-
- )
+ ),
},
{
name: 'Old query, but no name',
render: () => (
-
- )
+ ),
},
{
name: 'Query composer that shows grouping and aggregate',
render: () => (
-
- )
- }
-]
+ ),
+ },
+];
diff --git a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js
index 046ae0f232..552786ffd8 100644
--- a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js
+++ b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js
@@ -5,17 +5,14 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import baseStyles from 'stylesheets/base.scss';
-import Button from 'components/Button/Button.react';
+import baseStyles from 'stylesheets/base.scss';
+import Button from 'components/Button/Button.react';
import ChromeDropdown from 'components/ChromeDropdown/ChromeDropdown.react';
-import DateTimeEntry from 'components/DateTimeEntry/DateTimeEntry.react';
-import {
- Constraints,
- FieldConstraints
-} from 'components/ExplorerQueryComposer/ExplorerFilter';
-import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import styles from 'components/ExplorerQueryComposer/ExplorerQueryComposer.scss';
+import DateTimeEntry from 'components/DateTimeEntry/DateTimeEntry.react';
+import { Constraints, FieldConstraints } from 'components/ExplorerQueryComposer/ExplorerFilter';
+import PropTypes from 'lib/PropTypes';
+import React from 'react';
+import styles from 'components/ExplorerQueryComposer/ExplorerQueryComposer.scss';
const TABLE_SOURCES_LABEL = ['API Event', 'Custom Event'];
@@ -32,7 +29,7 @@ const FIELD_LABELS = {
'App Build Version',
'App Display Version',
'Timestamp (s)',
- 'Latency (s)'
+ 'Latency (s)',
],
'Custom Event': [
'Event Name',
@@ -45,63 +42,65 @@ const FIELD_LABELS = {
'OS Version',
'App Build Version',
'App Display Version',
- 'Timestamp (s)'
- ]
+ 'Timestamp (s)',
+ ],
};
const AGGREGATE_TYPE_LABELS = [
- 'Count', 'Count Distinct', 'Sum', 'Minimum', 'Median', '99th Percentile', 'Average'
+ 'Count',
+ 'Count Distinct',
+ 'Sum',
+ 'Minimum',
+ 'Median',
+ '99th Percentile',
+ 'Average',
];
-const REQUIRED_GROUPING_LABELS = [
- 'Time (day)', 'Time (hour)'
-];
+const REQUIRED_GROUPING_LABELS = ['Time (day)', 'Time (hour)'];
-const ORDER_LABELS = [
- 'Ascending', 'Descending'
-];
+const ORDER_LABELS = ['Ascending', 'Descending'];
const FIELD_TYPE = {
- 'Request Type' : 'String',
- 'Class' : 'String',
- 'Event Name' : 'String',
+ 'Request Type': 'String',
+ Class: 'String',
+ 'Event Name': 'String',
/* eslint-disable no-constant-condition */
- 'Dimensions' : false ? 'JSON' : 'String', //In progress features. Change false to true to work on this feature.
+ Dimensions: false ? 'JSON' : 'String', //In progress features. Change false to true to work on this feature.
/* eslint-enable */
- 'Installation ID' : 'String',
- 'Parse User ID' : 'String',
- 'Parse SDK' : 'String',
- 'Parse SDK Version' : 'String',
- 'OS' : 'String',
- 'OS Version' : 'String',
- 'App Build Version' : 'String',
- 'App Display Version' : 'String',
- 'Timestamp (s)' : 'Date',
- 'Latency (s)' : 'Number',
+ 'Installation ID': 'String',
+ 'Parse User ID': 'String',
+ 'Parse SDK': 'String',
+ 'Parse SDK Version': 'String',
+ OS: 'String',
+ 'OS Version': 'String',
+ 'App Build Version': 'String',
+ 'App Display Version': 'String',
+ 'Timestamp (s)': 'Date',
+ 'Latency (s)': 'Number',
};
-let availableFilters = {};
-for (let field in FIELD_TYPE) {
+const availableFilters = {};
+for (const field in FIELD_TYPE) {
availableFilters[field] = FieldConstraints[FIELD_TYPE[field]];
}
const TIMESERIES_DEFAULT_STATE = {
groups: [REQUIRED_GROUPING_LABELS[0]],
- limit: undefined
+ limit: undefined,
};
const NON_TIMESERIES_DEFAULT_STATE = {
aggregates: [],
groups: [],
- limit: 100
+ limit: 100,
};
-let constraintLookup = {};
-for (let c in Constraints) {
+const constraintLookup = {};
+for (const c in Constraints) {
constraintLookup[Constraints[c].name] = c;
}
-let setFocus = (input) => {
+const setFocus = input => {
if (input !== null) {
input.focus();
}
@@ -111,17 +110,50 @@ function validateNumeric() {
return true;
}
-let fieldView = (type, value, onChangeValue) => {
- let fieldStyle = { width: '32%', marginLeft: '1%', display: 'inline-block' };
+const fieldView = (type, value, onChangeValue) => {
+ const fieldStyle = {
+ width: '32%',
+ marginLeft: '1%',
+ display: 'inline-block',
+ };
switch (type) {
case null:
return null;
case 'String':
- return
onChangeValue(e.target.value)} ref={setFocus}/>;
+ return (
+
onChangeValue(e.target.value)}
+ ref={setFocus}
+ />
+ );
case 'Number':
- return
onChangeValue(validateNumeric(e.target.value) ? e.target.value : (value || ''))} />;
+ return (
+
+ onChangeValue(validateNumeric(e.target.value) ? e.target.value : value || '')
+ }
+ />
+ );
case 'Date':
- return
;
+ return (
+
+
+ );
default:
throw new Error('Incompatible type ' + type + ' used to render fieldView.');
}
@@ -131,26 +163,28 @@ export default class ExplorerQueryComposer extends React.Component {
constructor(props) {
super();
- let initialState = this.getInitialStateFromProps(props);
+ const initialState = this.getInitialStateFromProps(props);
this.state = {
// newName is used to revert the edit if cancelled.
newName: '',
editing: false,
isSaved: false,
- ...initialState
+ ...initialState,
};
}
getInitialStateFromProps(props) {
- let query = props.query || {};
+ const query = props.query || {};
let defaultState = {};
if (props.isTimeSeries) {
defaultState = {
...TIMESERIES_DEFAULT_STATE,
- aggregates: [{
- op: AGGREGATE_TYPE_LABELS[0],
- col: FIELD_LABELS[TABLE_SOURCES_LABEL[0]][0]
- }]
+ aggregates: [
+ {
+ op: AGGREGATE_TYPE_LABELS[0],
+ col: FIELD_LABELS[TABLE_SOURCES_LABEL[0]][0],
+ },
+ ],
};
} else {
defaultState = NON_TIMESERIES_DEFAULT_STATE;
@@ -163,23 +197,23 @@ export default class ExplorerQueryComposer extends React.Component {
groups: query.groups || defaultState.groups,
limit: query.limit || defaultState.limit,
filters: query.filters || [],
- orders: query.orders || []
+ orders: query.orders || [],
};
}
getOrderOptions() {
- let options = [];
+ const options = [];
this.state.aggregates.forEach((value, index) => {
options.push({
key: 'aggregate|' + index,
- value: [value.col, value.op].join(' ')
+ value: [value.col, value.op].join(' '),
});
});
this.state.groups.forEach((value, index) => {
options.push({
key: 'group|' + index,
- value: value
+ value: value,
});
});
@@ -187,19 +221,19 @@ export default class ExplorerQueryComposer extends React.Component {
}
componentWillReceiveProps(nextProps) {
- let initialState = this.getInitialStateFromProps(nextProps);
+ const initialState = this.getInitialStateFromProps(nextProps);
this.setState({ ...initialState });
}
toggleEditing() {
this.setState({
editing: !this.state.editing,
- newName: this.state.name
+ newName: this.state.name,
});
}
handleSave() {
- let query = this.props.query || {};
+ const query = this.props.query || {};
this.props.onSave({
source: this.state.source,
name: this.state.name,
@@ -208,15 +242,15 @@ export default class ExplorerQueryComposer extends React.Component {
limit: this.state.limit,
filters: this.state.filters,
// Only pass them if order is valid
- orders: this.state.orders.filter((order) => order.col !== null && order.col !== undefined),
+ orders: this.state.orders.filter(order => order.col !== null && order.col !== undefined),
localId: query.localId,
- objectId: query.objectId
+ objectId: query.objectId,
});
this.setState({
editing: false,
name: this.state.newName,
- isSaved: !!this.state.newName
+ isSaved: !!this.state.newName,
});
}
@@ -226,45 +260,49 @@ export default class ExplorerQueryComposer extends React.Component {
handleAddAggregate() {
this.setState({
- aggregates: this.state.aggregates.concat([{
- op: AGGREGATE_TYPE_LABELS[0],
- col: FIELD_LABELS[this.state.source][0]
- }])
+ aggregates: this.state.aggregates.concat([
+ {
+ op: AGGREGATE_TYPE_LABELS[0],
+ col: FIELD_LABELS[this.state.source][0],
+ },
+ ]),
});
}
handleAddGroup() {
this.setState({
- groups: this.state.groups.concat([
- FIELD_LABELS[this.state.source][0]
- ])
+ groups: this.state.groups.concat([FIELD_LABELS[this.state.source][0]]),
});
}
handleAddFilter() {
this.setState({
- filters: this.state.filters.concat([{
- op: '$eq',
- col: FIELD_LABELS[this.state.source][0],
- val: null
- }])
+ filters: this.state.filters.concat([
+ {
+ op: '$eq',
+ col: FIELD_LABELS[this.state.source][0],
+ val: null,
+ },
+ ]),
});
}
handleAddOrder() {
this.setState({
- orders: this.state.orders.concat([{
- col: null,
- asc: ORDER_LABELS[0]
- }])
+ orders: this.state.orders.concat([
+ {
+ col: null,
+ asc: ORDER_LABELS[0],
+ },
+ ]),
});
}
handleSourceChange(newSource) {
- let initialState = this.getInitialStateFromProps(this.props);
+ const initialState = this.getInitialStateFromProps(this.props);
this.setState({
...initialState,
- source: newSource
+ source: newSource,
});
}
@@ -273,15 +311,16 @@ export default class ExplorerQueryComposer extends React.Component {
this.setState({ [stateKey]: this.state[stateKey] });
}
- renderAggregate(aggregate, index=0) {
+ renderAggregate(aggregate, index = 0) {
let deleteButton = null;
- if (!this.props.isTimeSeries || index !== 0 ) {
+ if (!this.props.isTimeSeries || index !== 0) {
deleteButton = (
+ onClick={this.removeAdditionalQuery.bind(this, 'aggregates', index)}
+ >
×
@@ -295,20 +334,23 @@ export default class ExplorerQueryComposer extends React.Component {
{
- let aggregates = this.state.aggregates;
+ onChange={val => {
+ const aggregates = this.state.aggregates;
aggregates[index] = {
op: val,
- col: FIELD_LABELS[this.state.source][0]
+ col: FIELD_LABELS[this.state.source][0],
};
this.setState({ aggregates });
}}
- color='blue'
- width='100%' />
+ color="blue"
+ width="100%"
+ />
-
of
+
+ of
+
{
@@ -321,13 +363,14 @@ export default class ExplorerQueryComposer extends React.Component {
return true;
}
})}
- onChange={(val) => {
- let aggregates = this.state.aggregates;
+ onChange={val => {
+ const aggregates = this.state.aggregates;
aggregates[index].col = val;
this.setState({ aggregates });
}}
- color='blue'
- width='100%' />
+ color="blue"
+ width="100%"
+ />
{deleteButton}
+ onClick={this.removeAdditionalQuery.bind(this, 'groups', index)}
+ >
×
@@ -357,25 +401,28 @@ export default class ExplorerQueryComposer extends React.Component {
{
- let groups = this.state.groups;
+ onChange={val => {
+ const groups = this.state.groups;
groups[index] = val;
this.setState({ groups });
}}
- color='blue'
- width='100%' />
+ color="blue"
+ width="100%"
+ />
{deleteButton}
Constraints[c].name)}
- onChange={(val) => {
- let filters = this.state.filters;
+ options={FieldConstraints['JSONValue'].map(c => Constraints[c].name)}
+ onChange={val => {
+ const filters = this.state.filters;
filters[index] = {
col: filter.col,
op: filter.op,
json_path: filter.json_path,
json_scalar_op: constraintLookup[val],
- val: filter.val
+ val: filter.val,
};
this.setState({ filters });
- }} />
+ }}
+ />
);
}
- let constraintInputValue = isJSONView ? filter.json_path : filter.val;
+ const constraintInputValue = isJSONView ? filter.json_path : filter.val;
constraintView = (
Constraints[c].name)}
- onChange={(val) => {
- let filters = this.state.filters;
+ options={availableFilters[filter.col].map(c => Constraints[c].name)}
+ onChange={val => {
+ const filters = this.state.filters;
filters[index] = {
col: filter.col,
op: constraintLookup[val],
- val: filter.val
+ val: filter.val,
};
this.setState({ filters });
- }} />
+ }}
+ />
{jsonView}
@@ -472,25 +523,26 @@ export default class ExplorerQueryComposer extends React.Component {
Constraints[c].name)}
- onChange={(val) => {
- let filters = this.state.filters;
+ options={availableFilters[filter.col].map(c => Constraints[c].name)}
+ onChange={val => {
+ const filters = this.state.filters;
filters[index] = {
col: filter.col,
op: constraintLookup[val],
- val: null
+ val: null,
};
this.setState({ filters });
- }} />
+ }}
+ />
- {fieldView(type, filter.val, (val) => {
- let filters = this.state.filters;
+ {fieldView(type, filter.val, val => {
+ const filters = this.state.filters;
filters[index] = {
col: filter.col,
op: filter.op,
- val: val
+ val: val,
};
this.setState({ filters });
})}
@@ -503,28 +555,30 @@ export default class ExplorerQueryComposer extends React.Component {
Filter
{
- let filters = this.state.filters;
+ onChange={val => {
+ const filters = this.state.filters;
filters[index] = {
col: val,
op: '$eq',
- val: null
+ val: null,
};
this.setState({ filters });
- }} />
+ }}
+ />
{constraintView}
+ onClick={this.removeAdditionalQuery.bind(this, 'filters', index)}
+ >
×
@@ -538,38 +592,41 @@ export default class ExplorerQueryComposer extends React.Component {
Sort by
{
- let orders = this.state.orders;
+ onChange={val => {
+ const orders = this.state.orders;
orders[index] = {
col: val,
- asc: ORDER_LABELS[0]
+ asc: ORDER_LABELS[0],
};
this.setState({ orders });
}}
- color='blue'
- width='100%' />
+ color="blue"
+ width="100%"
+ />
{
- let orders = this.state.orders;
+ onChange={val => {
+ const orders = this.state.orders;
orders[index].asc = val;
this.setState({ orders });
}}
- color='blue'
- width='100%' />
+ color="blue"
+ width="100%"
+ />
+ onClick={this.removeAdditionalQuery.bind(this, 'orders', index)}
+ >
×
@@ -579,7 +636,8 @@ export default class ExplorerQueryComposer extends React.Component {
}
render() {
- let { query, isNew, isTimeSeries, onDismiss } = this.props;
+ let { query } = this.props;
+ const { isNew, isTimeSeries, onDismiss } = this.props;
query = query || {};
// First and foremost, let's not waste time if the query itself is not composable.
@@ -594,11 +652,12 @@ export default class ExplorerQueryComposer extends React.Component {
@@ -611,24 +670,27 @@ export default class ExplorerQueryComposer extends React.Component {
headerView = (
+ placeholder={'Give your query a name'}
+ />
- { this.state.isSaved ? 'Rename' : 'Save' }
+ onClick={this.handleSave.bind(this)}
+ >
+ {this.state.isSaved ? 'Rename' : 'Save'}
+ onClick={this.toggleEditing.bind(this)}
+ >
Cancel
@@ -637,14 +699,15 @@ export default class ExplorerQueryComposer extends React.Component {
} else {
headerView = (
-
{ this.state.name || 'Build a custom query' }
- { isNew ? null : (
+
{this.state.name || 'Build a custom query'}
+ {isNew ? null : (
- { this.state.isSaved ? 'Rename' : 'Save' }
+ onClick={this.toggleEditing.bind(this)}
+ >
+ {this.state.isSaved ? 'Rename' : 'Save'}
)}
@@ -665,9 +728,7 @@ export default class ExplorerQueryComposer extends React.Component {
);
group = (
-
- {this.renderGroup(this.state.groups[0])}
-
+
{this.renderGroup(this.state.groups[0])}
);
} else {
// On table/json view, we hide aggregate and group. And we also show limit.
@@ -676,11 +737,12 @@ export default class ExplorerQueryComposer extends React.Component {
);
@@ -692,22 +754,24 @@ export default class ExplorerQueryComposer extends React.Component {
));
}
- let offset = isTimeSeries ? 1 : 0;
- let extraAggregateModels = isTimeSeries ? this.state.aggregates.slice(1) : this.state.aggregates;
- let extraAggregates = extraAggregateModels.map((aggregate, i) => (
+ const offset = isTimeSeries ? 1 : 0;
+ const extraAggregateModels = isTimeSeries
+ ? this.state.aggregates.slice(1)
+ : this.state.aggregates;
+ const extraAggregates = extraAggregateModels.map((aggregate, i) => (
{this.renderAggregate(aggregate, i + offset)}
));
- let extraGroupModels = isTimeSeries ? this.state.groups.slice(1) : this.state.groups;
- let extraGroups = extraGroupModels.map((group, i) => (
+ const extraGroupModels = isTimeSeries ? this.state.groups.slice(1) : this.state.groups;
+ const extraGroups = extraGroupModels.map((group, i) => (
{this.renderGroup(group, i + offset)}
));
- let filters = this.state.filters.map((filter, i) => (
+ const filters = this.state.filters.map((filter, i) => (
{this.renderFilter(filter, i)}
@@ -718,10 +782,11 @@ export default class ExplorerQueryComposer extends React.Component {
sortButton = (
);
}
@@ -731,30 +796,28 @@ export default class ExplorerQueryComposer extends React.Component {
footerButton = (
);
} else {
footerButton = (
-
);
@@ -762,9 +825,7 @@ export default class ExplorerQueryComposer extends React.Component {
return (
-
- {headerView}
-
+
{headerView}
@@ -773,8 +834,9 @@ export default class ExplorerQueryComposer extends React.Component {
value={this.state.source}
options={TABLE_SOURCES_LABEL}
onChange={this.handleSourceChange.bind(this)}
- color='blue'
- width='100%' />
+ color="blue"
+ width="100%"
+ />
@@ -790,54 +852,49 @@ export default class ExplorerQueryComposer extends React.Component {
{sortButton}
-
- {footerButton}
-
+
{footerButton}
);
}
}
ExplorerQueryComposer.propTypes = {
- query: PropTypes.object.describe(
- 'The query to be edited by this composer.'
- ),
- onSave: PropTypes.func.isRequired.describe(
- 'Function to be called on query created/saved.'
- ),
- onDismiss: PropTypes.func.describe(
- 'Function to be called on dismiss button clicked.'
- ),
+ query: PropTypes.object.describe('The query to be edited by this composer.'),
+ onSave: PropTypes.func.isRequired.describe('Function to be called on query created/saved.'),
+ onDismiss: PropTypes.func.describe('Function to be called on dismiss button clicked.'),
isNew: PropTypes.bool.describe(
'True if the composer is trying to compose a new query. ' +
- 'False if the composer is editing an existing one.'
+ 'False if the composer is editing an existing one.'
),
isTimeSeries: PropTypes.bool.describe(
'If set to true, add default group (day, hour) and aggregate to the composer. ' +
- 'Otherwise, render limit inside the composer.'
- )
-}
+ 'Otherwise, render limit inside the composer.'
+ ),
+};
diff --git a/src/components/ExplorerQueryPicker/ExplorerQueryPicker.example.js b/src/components/ExplorerQueryPicker/ExplorerQueryPicker.example.js
index 22d2610fe9..a0063799c8 100644
--- a/src/components/ExplorerQueryPicker/ExplorerQueryPicker.example.js
+++ b/src/components/ExplorerQueryPicker/ExplorerQueryPicker.example.js
@@ -6,115 +6,126 @@
* the root directory of this source tree.
*/
import ExplorerQueryPicker from 'components/ExplorerQueryPicker/ExplorerQueryPicker.react';
-import React from 'react';
+import React from 'react';
export const component = ExplorerQueryPicker;
export const demos = [
{
render: () => {
- let queries = [
+ const queries = [
{
name: 'Audience',
children: [
{
name: 'Daily Active Installations',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Daily Active Users',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Monthly Active Installations',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Monthly Active Users',
- query: { },
- preset: true
- }
- ]
- }, {
+ query: {},
+ preset: true,
+ },
+ ],
+ },
+ {
name: 'Core',
children: [
{
name: 'Gogo Count',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'User Count',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Installation Count',
- query: { },
- preset: true
- }
- ]
- }, {
+ query: {},
+ preset: true,
+ },
+ ],
+ },
+ {
name: 'Events',
children: [
{
name: 'API Requests',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Analytics Requests',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'File Requests',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Push Notifications',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'App Opens',
- query: { },
- preset: true
+ query: {},
+ preset: true,
},
{
name: 'Push Opens',
- query: { },
- preset: true
- }
- ]
- }, {
+ query: {},
+ preset: true,
+ },
+ ],
+ },
+ {
name: 'Recent Queries',
children: [
{
name: 'User Count Aggregate',
- query: { }
- }
- ]
- }, {
+ query: {},
+ },
+ ],
+ },
+ {
name: 'Saved Queries',
children: [
{
name: 'Gogo Queries',
- query: { }
+ query: {},
},
{
name: 'Saved Queries',
- query: { }
- }
- ]
- }
+ query: {},
+ },
+ ],
+ },
];
- return {/* Do nothing */}} />
- }
- }
+ return (
+ {
+ /* Do nothing */
+ }}
+ />
+ );
+ },
+ },
];
diff --git a/src/components/ExplorerQueryPicker/ExplorerQueryPicker.react.js b/src/components/ExplorerQueryPicker/ExplorerQueryPicker.react.js
index 51a76b9ad6..24ac44ee47 100644
--- a/src/components/ExplorerQueryPicker/ExplorerQueryPicker.react.js
+++ b/src/components/ExplorerQueryPicker/ExplorerQueryPicker.react.js
@@ -5,40 +5,38 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import baseStyles from 'stylesheets/base.scss';
-import Button from 'components/Button/Button.react';
+import baseStyles from 'stylesheets/base.scss';
+import Button from 'components/Button/Button.react';
import CascadingView from 'components/CascadingView/CascadingView.react';
-import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import styles from 'components/ExplorerQueryPicker/ExplorerQueryPicker.scss';
+import PropTypes from 'lib/PropTypes';
+import React from 'react';
+import styles from 'components/ExplorerQueryPicker/ExplorerQueryPicker.scss';
-let ExplorerQueryPicker = ({ queries, onCompose, onSelect, onDelete }) => {
+const ExplorerQueryPicker = ({ queries, onCompose, onSelect, onDelete }) => {
return (
Choose a query to visualize
- {queries.map((queryGroup) => {
+ {queries.map(queryGroup => {
let childrenView = null;
if (queryGroup.children.length > 0) {
childrenView = queryGroup.children.map((query, j) => {
return (
-
+
onSelect(query)}
- className={styles.queryLabel}>
+ className={styles.queryLabel}
+ >
{query.name}
- {query.preset ? null : onDelete(query)}
- className={styles.del}>
- ×
- }
+ {query.preset ? null : (
+ onDelete(query)} className={styles.del}>
+ ×
+
+ )}
);
});
@@ -47,31 +45,23 @@ let ExplorerQueryPicker = ({ queries, onCompose, onSelect, onDelete }) => {
if (!emptyMessage) {
emptyMessage = `No query found in ${queryGroup.name}.`;
}
- childrenView = (
-
- {emptyMessage}
-
- );
+ childrenView =
{emptyMessage}
;
}
return (
+ key={queryGroup.name}
+ >
{childrenView}
);
})}
@@ -83,16 +73,12 @@ export default ExplorerQueryPicker;
ExplorerQueryPicker.propTypes = {
queries: PropTypes.arrayOf(PropTypes.object).isRequired.describe(
'An array of queryGroups. Each querygroup should include the following fields: name, children. ' +
- 'children of queryGroup contains an array of queries. Each query should include the following fields: ' +
- 'name, query, (optional)preset.'
+ 'children of queryGroup contains an array of queries. Each query should include the following fields: ' +
+ 'name, query, (optional)preset.'
),
onCompose: PropTypes.func.isRequired.describe(
'Function to be called when "Build a custom query" button is clicked.'
),
- onSelect: PropTypes.func.describe(
- 'Function to be called when a query is being selected.'
- ),
- onDelete: PropTypes.func.describe(
- 'Function to be called when a query is being deleted.'
- )
+ onSelect: PropTypes.func.describe('Function to be called when a query is being selected.'),
+ onDelete: PropTypes.func.describe('Function to be called when a query is being deleted.'),
};
diff --git a/src/components/Field/Field.example.js b/src/components/Field/Field.example.js
index 8cb9068ca4..23de039927 100644
--- a/src/components/Field/Field.example.js
+++ b/src/components/Field/Field.example.js
@@ -5,10 +5,10 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
-import Field from 'components/Field/Field.react';
-import Label from 'components/Label/Label.react';
-import Toggle from 'components/Toggle/Toggle.react';
+import React from 'react';
+import Field from 'components/Field/Field.react';
+import Label from 'components/Label/Label.react';
+import Toggle from 'components/Toggle/Toggle.react';
import TextInput from 'components/TextInput/TextInput.react';
export const component = Field;
@@ -17,17 +17,26 @@ export const demos = [
{
render: () => (
}
- input={
{}} />} />
- )
+ label={
+ {}} />}
+ />
+ ),
},
{
render: () => (
{}} />} />
- )
- }
+ label={
+ {}} />}
+ />
+ ),
+ },
];
diff --git a/src/components/Field/Field.react.js b/src/components/Field/Field.react.js
index 53706bd2b9..7c9f06b617 100644
--- a/src/components/Field/Field.react.js
+++ b/src/components/Field/Field.react.js
@@ -6,27 +6,27 @@
* the root directory of this source tree.
*/
import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import styles from 'components/Field/Field.scss';
+import React from 'react';
+import styles from 'components/Field/Field.scss';
-let Field = ({label, input, labelWidth = 50, labelPadding, height, className}) => {
- let classes = [styles.field];
+const Field = ({ label, input, labelWidth = 50, labelPadding, height, className }) => {
+ const classes = [styles.field];
if (className) {
classes.push(className);
}
labelWidth = labelWidth || 50;
if (label && labelPadding) {
- label = React.cloneElement(
- label,
- { ...label.props, padding: labelPadding }
- );
+ label = React.cloneElement(label, {
+ ...label.props,
+ padding: labelPadding,
+ });
}
return (
{label}
-
@@ -38,15 +38,13 @@ export default Field;
Field.propTypes = {
label: PropTypes.node.describe(
'The label content, placed on the left side of the Field. ' +
- 'It can be any renderable content.'
+ 'It can be any renderable content.'
),
input: PropTypes.node.describe(
'The input content, placed on the right side of the Field. ' +
- 'It can be any renderable content.'
- ),
- className: PropTypes.string.describe(
- 'A CSS class name to add to this field'
+ 'It can be any renderable content.'
),
+ className: PropTypes.string.describe('A CSS class name to add to this field'),
labelWidth: PropTypes.number.describe(
'A percentage value for the width of the left label. It cannot be 0.'
),
@@ -55,5 +53,5 @@ Field.propTypes = {
),
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).describe(
'The height of the field. Can be a string containing any CSS unit, or a number of pixels. By default, it will expand to fit it\u2019s content, with a min-height of 80px.'
- )
+ ),
};
diff --git a/src/components/Field/Field.scss b/src/components/Field/Field.scss
index 116a490828..2978470710 100644
--- a/src/components/Field/Field.scss
+++ b/src/components/Field/Field.scss
@@ -14,6 +14,7 @@
border-width: 1px 1px 0 1px;
min-height: 80px;
background: white;
+ display: flex;
&:last-of-type {
border-bottom-width: 1px;
@@ -25,16 +26,8 @@
}
.left {
- position: absolute;
- left: 0;
- height: 100%;
-}
-
-.centered {
- @include transform(translateY(-50%));
- position: absolute;
- width: 100%;
- top: 50%;
+ display: flex;
+ align-items: center;
}
.right {
@@ -46,6 +39,7 @@
display: flex;
justify-content: center;
align-items: center;
+ flex: 1
}
diff --git a/src/components/Fieldset/Fieldset.example.js b/src/components/Fieldset/Fieldset.example.js
index 22521366e8..cb83ab0432 100644
--- a/src/components/Fieldset/Fieldset.example.js
+++ b/src/components/Fieldset/Fieldset.example.js
@@ -5,24 +5,23 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
-import Field from 'components/Field/Field.react';
+import React from 'react';
+import Field from 'components/Field/Field.react';
import Fieldset from 'components/Fieldset/Fieldset.react';
-import Label from 'components/Label/Label.react';
-import Toggle from 'components/Toggle/Toggle.react';
+import Label from 'components/Label/Label.react';
+import Toggle from 'components/Toggle/Toggle.react';
export const component = Fieldset;
export const demos = [
{
render: () => (
-
+
- )
- }
+ ),
+ },
];
diff --git a/src/components/Fieldset/Fieldset.react.js b/src/components/Fieldset/Fieldset.react.js
index 62dee6d53d..bcab28ebaf 100644
--- a/src/components/Fieldset/Fieldset.react.js
+++ b/src/components/Fieldset/Fieldset.react.js
@@ -6,16 +6,14 @@
* the root directory of this source tree.
*/
import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import styles from 'components/Fieldset/Fieldset.scss';
+import React from 'react';
+import styles from 'components/Fieldset/Fieldset.scss';
-let Fieldset = ({ legend, description, children }) => (
+const Fieldset = ({ legend, description, children }) => (
{legend}
{description}
-
- {children}
-
+
{children}
);
@@ -27,5 +25,5 @@ Fieldset.propTypes = {
),
description: PropTypes.node.describe(
'The secondary header of the Fieldset. It can be any renderable content.'
- )
+ ),
};
diff --git a/src/components/FileEditor/FileEditor.react.js b/src/components/FileEditor/FileEditor.react.js
index abc87b654b..71c0af55fb 100644
--- a/src/components/FileEditor/FileEditor.react.js
+++ b/src/components/FileEditor/FileEditor.react.js
@@ -15,7 +15,7 @@ export default class FileEditor extends React.Component {
super();
this.state = {
- value: props.value
+ value: props.value,
};
this.checkExternalClick = this.checkExternalClick.bind(this);
@@ -28,7 +28,7 @@ export default class FileEditor extends React.Component {
componentDidMount() {
document.body.addEventListener('click', this.checkExternalClick);
document.body.addEventListener('keypress', this.handleKey);
- let fileInputElement = document.getElementById('fileInput');
+ const fileInputElement = document.getElementById('fileInput');
if (fileInputElement) {
fileInputElement.click();
}
@@ -68,9 +68,9 @@ export default class FileEditor extends React.Component {
}
async handleChange(e) {
- let file = e.target.files[0];
+ const file = e.target.files[0];
if (file) {
- let base64 = await this.getBase64(file);
+ const base64 = await this.getBase64(file);
this.props.onCommit(new Parse.File(file.name, { base64 }));
}
}
@@ -78,9 +78,18 @@ export default class FileEditor extends React.Component {
render() {
const file = this.props.value;
return (
-
+
diff --git a/src/components/FileInput/FileInput.example.js b/src/components/FileInput/FileInput.example.js
index ae85f567c4..d46e13ae35 100644
--- a/src/components/FileInput/FileInput.example.js
+++ b/src/components/FileInput/FileInput.example.js
@@ -5,10 +5,10 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
-import Field from 'components/Field/Field.react';
-import Fieldset from 'components/Fieldset/Fieldset.react';
-import Label from 'components/Label/Label.react';
+import React from 'react';
+import Field from 'components/Field/Field.react';
+import Fieldset from 'components/Fieldset/Fieldset.react';
+import Label from 'components/Label/Label.react';
import FileInput from 'components/FileInput/FileInput.react';
export const component = FileInput;
@@ -18,18 +18,27 @@ export const demos = [
render: () => (
- )
- }
+ ),
+ },
];
diff --git a/src/components/FileInput/FileInput.react.js b/src/components/FileInput/FileInput.react.js
index cff626fd95..a2ee18a830 100644
--- a/src/components/FileInput/FileInput.react.js
+++ b/src/components/FileInput/FileInput.react.js
@@ -5,13 +5,13 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import { escape } from 'lib/StringEscaping';
-import styles from 'components/FileInput/FileInput.scss';
+import styles from 'components/FileInput/FileInput.scss';
export default class FileInput extends React.Component {
handleChange(e) {
- let file = e.target.files[0];
+ const file = e.target.files[0];
this.props.onChange(file);
}
@@ -27,10 +27,7 @@ export default class FileInput extends React.Component {
}
if (this.props.value.name && this.props.value.url) {
return (
-
+
{escape(this.props.value.name)}
);
@@ -38,7 +35,7 @@ export default class FileInput extends React.Component {
}
render() {
- let inputProps = {
+ const inputProps = {
type: 'file',
value: '',
disabled: this.props.disabled,
@@ -47,13 +44,13 @@ export default class FileInput extends React.Component {
if (this.props.accept) {
inputProps.accept = this.props.accept;
}
- let label = this.renderLabel();
- let buttonStyles = [styles.button];
+ const label = this.renderLabel();
+ const buttonStyles = [styles.button];
if (this.props.disabled || this.props.uploading) {
buttonStyles.push(styles.disabled);
}
if (label) {
- buttonStyles.push(styles.withLabel)
+ buttonStyles.push(styles.withLabel);
}
return (
diff --git a/src/components/FileTree/FileTree.react.js b/src/components/FileTree/FileTree.react.js
index 656a18fccf..fbfe0970c5 100644
--- a/src/components/FileTree/FileTree.react.js
+++ b/src/components/FileTree/FileTree.react.js
@@ -5,10 +5,10 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import Icon from 'components/Icon/Icon.react';
+import Icon from 'components/Icon/Icon.react';
import { Link } from 'react-router-dom';
-import React from 'react';
-import styles from 'components/FileTree/FileTree.scss';
+import React from 'react';
+import styles from 'components/FileTree/FileTree.scss';
export default class FileTree extends React.Component {
constructor(props) {
@@ -16,7 +16,7 @@ export default class FileTree extends React.Component {
let open = !props.name;
if (props.current && props.name) {
- let dirPath = (props.prefix || '') + props.name + '/';
+ const dirPath = (props.prefix || '') + props.name + '/';
if (props.current.startsWith(dirPath)) {
open = true;
}
@@ -31,8 +31,16 @@ export default class FileTree extends React.Component {
let dir = null;
if (this.props.name) {
dir = (
-
this.setState((state) => ({ open: !state.open }))}>
-
+
this.setState(state => ({ open: !state.open }))}
+ >
+
);
@@ -40,12 +48,12 @@ export default class FileTree extends React.Component {
let content = null;
if (this.state.open) {
- let dirs = {};
- let files = [];
- this.props.files.forEach((f) => {
- let folderEnd = f.indexOf('/');
+ const dirs = {};
+ const files = [];
+ this.props.files.forEach(f => {
+ const folderEnd = f.indexOf('/');
if (folderEnd > -1) {
- let folder = f.substr(0, folderEnd);
+ const folder = f.substr(0, folderEnd);
if (!dirs[folder]) {
dirs[folder] = [];
}
@@ -54,27 +62,29 @@ export default class FileTree extends React.Component {
files.push(f);
}
});
- let folders = Object.keys(dirs);
+ const folders = Object.keys(dirs);
folders.sort();
content = (
- {folders.map((f) => (
+ {folders.map(f => (
+ current={this.props.current}
+ />
))}
- {files.map((f) => {
- let path = (this.props.name ? this.props.prefix + this.props.name + '/' : '') + f;
- let isCurrent = this.props.current === path;
+ {files.map(f => {
+ const path = (this.props.name ? this.props.prefix + this.props.name + '/' : '') + f;
+ const isCurrent = this.props.current === path;
return (
{filters.toArray().map((filter, i) => {
- let field = filter.get('field');
- let constraint = filter.get('constraint');
- let compareTo = filter.get('compareTo');
+ const field = filter.get('field');
+ const constraint = filter.get('constraint');
+ const compareTo = filter.get('compareTo');
- let fields = Object.keys(available).concat([]);
+ const fields = Object.keys(available).concat([]);
if (fields.indexOf(field) < 0) {
fields.push(field);
}
// Get the column preference of the current class.
- const currentColumnPreference = currentApp.columnPreference ? currentApp.columnPreference[className] : null;
+ const currentColumnPreference = currentApp.columnPreference
+ ? currentApp.columnPreference[className]
+ : null;
// Check if the preference exists.
if (currentColumnPreference) {
@@ -78,7 +80,7 @@ let Filter = ({ schema, filters, renderRow, onChange, onSearch, blacklist, class
fields.sort((a, b) => {
// Only "a" should sorted to the top.
if (fieldsToSortToTop.includes(a) && !fieldsToSortToTop.includes(b)) {
- return -1
+ return -1;
}
// Only "b" should sorted to the top.
if (!fieldsToSortToTop.includes(a) && fieldsToSortToTop.includes(b)) {
@@ -96,7 +98,9 @@ let Filter = ({ schema, filters, renderRow, onChange, onSearch, blacklist, class
fields.sort();
}
- let constraints = Filters.FieldConstraints[schema[field].type].filter((c) => blacklist.indexOf(c) < 0);
+ const constraints = Filters.FieldConstraints[schema[field].type].filter(
+ c => blacklist.indexOf(c) < 0
+ );
let compareType = schema[field].type;
if (Object.prototype.hasOwnProperty.call(Filters.Constraints[constraint], 'field')) {
compareType = Filters.Constraints[constraint].field;
@@ -122,14 +126,14 @@ let Filter = ({ schema, filters, renderRow, onChange, onSearch, blacklist, class
onChangeCompareTo: newCompare => {
onChange(changeCompareTo(schema, filters, i, compareType, newCompare));
},
- onKeyDown: ({key}) => {
+ onKeyDown: ({ key }) => {
if (key === 'Enter') {
onSearch();
}
},
onDeleteRow: () => {
onChange(deleteRow(filters, i));
- }
+ },
});
})}
@@ -145,7 +149,5 @@ Filter.propTypes = {
filters: PropTypes.instanceOf(List).isRequired.describe(
'An array of filter objects. Each filter contains "field", "comparator", and "compareTo" fields.'
),
- renderRow: PropTypes.func.isRequired.describe(
- 'A function for rendering a row of a filter.'
- )
+ renderRow: PropTypes.func.isRequired.describe('A function for rendering a row of a filter.'),
};
diff --git a/src/components/FlowFooter/FlowFooter.react.js b/src/components/FlowFooter/FlowFooter.react.js
index 7477486490..126e4a9371 100644
--- a/src/components/FlowFooter/FlowFooter.react.js
+++ b/src/components/FlowFooter/FlowFooter.react.js
@@ -5,17 +5,17 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import PropTypes from 'lib/PropTypes';
-import styles from 'components/FlowFooter/FlowFooter.scss';
+import styles from 'components/FlowFooter/FlowFooter.scss';
-let FlowFooter = ({ primary, secondary, errorMessage, borderTop, children }) => (
+const FlowFooter = ({ primary, secondary, errorMessage, borderTop, children }) => (
{secondary}
{primary}
-
+
{errorMessage || children}
@@ -23,19 +23,11 @@ let FlowFooter = ({ primary, secondary, errorMessage, borderTop, children }) =>
export default FlowFooter;
FlowFooter.propTypes = {
- primary: PropTypes.node.describe(
- 'A primary action Button.'
- ),
- secondary: PropTypes.node.describe(
- 'A secondary action Button.'
- ),
- errorMessage: PropTypes.node.describe(
- 'The error message of the flow.'
- ),
- borderTop: PropTypes.string.describe(
- 'Style override for footer border-top.'
- ),
+ primary: PropTypes.node.describe('A primary action Button.'),
+ secondary: PropTypes.node.describe('A secondary action Button.'),
+ errorMessage: PropTypes.node.describe('The error message of the flow.'),
+ borderTop: PropTypes.string.describe('Style override for footer border-top.'),
children: PropTypes.node.describe(
'The text of the footer.
tags will be rendered in bold.'
),
-}
+};
diff --git a/src/components/FlowView/FlowView.react.js b/src/components/FlowView/FlowView.react.js
index 275f272b4e..cf2a9dbbf3 100644
--- a/src/components/FlowView/FlowView.react.js
+++ b/src/components/FlowView/FlowView.react.js
@@ -5,10 +5,10 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import Button from 'components/Button/Button.react';
+import Button from 'components/Button/Button.react';
import FlowFooter from 'components/FlowFooter/FlowFooter.react';
-import PropTypes from 'lib/PropTypes';
-import React from 'react';
+import PropTypes from 'lib/PropTypes';
+import React from 'react';
import SaveButton from 'components/SaveButton/SaveButton.react';
export default class FlowView extends React.Component {
@@ -23,21 +23,21 @@ export default class FlowView extends React.Component {
}
componentWillReceiveProps(props) {
- let newChanges = {...this.state.changes};
- for (let k in props.initialFields) {
+ const newChanges = { ...this.state.changes };
+ for (const k in props.initialFields) {
if (this.state.changes[k] === props.initialFields[k]) {
delete newChanges[k];
}
}
- this.setState({changes: newChanges});
+ this.setState({ changes: newChanges });
}
currentFields() {
- let fields = {};
- for (let k in this.props.initialFields) {
+ const fields = {};
+ for (const k in this.props.initialFields) {
fields[k] = this.props.initialFields[k];
}
- for (let k in this.state.changes) {
+ for (const k in this.state.changes) {
fields[k] = this.state.changes[k];
}
return fields;
@@ -45,7 +45,7 @@ export default class FlowView extends React.Component {
setField(key, value, preserveSavingState = false) {
if (this.state.saveState !== SaveButton.States.SAVING) {
- let newChanges = {...this.state.changes};
+ const newChanges = { ...this.state.changes };
newChanges[key] = value;
if (newChanges[key] === this.props.initialFields[key]) {
delete newChanges[key];
@@ -72,7 +72,7 @@ export default class FlowView extends React.Component {
}
render() {
- let {
+ const {
inProgressText,
submitText,
showFooter = () => true,
@@ -82,24 +82,24 @@ export default class FlowView extends React.Component {
validate = () => '',
onSubmit,
afterSave = () => {},
- secondaryButton = () => {
- this.setState({ saveState: SaveButton.States.SAVING });
- onSubmit({ changes, fields, setField, resetFields }).then(() => {
- this.setState({ saveState: SaveButton.States.SUCCEEDED });
- afterSave({ fields, setField, resetFields });
- }).catch(({ message, error, notice, errors = [] }) => {
- this.setState({
- saveState: SaveButton.States.FAILED,
- saveError: errors.join(' ') || message || error || notice || 'An error occurred',
- });
- });
- }}
- />;
+ const saveButton = (
+ {
+ this.setState({ saveState: SaveButton.States.SAVING });
+ onSubmit({ changes, fields, setField, resetFields })
+ .then(() => {
+ this.setState({ saveState: SaveButton.States.SUCCEEDED });
+ afterSave({ fields, setField, resetFields });
+ })
+ .catch(({ message, error, notice, errors = [] }) => {
+ this.setState({
+ saveState: SaveButton.States.FAILED,
+ saveError: errors.join(' ') || message || error || notice || 'An error occurred',
+ });
+ });
+ }}
+ />
+ );
- let footer = shouldShowFooter ?
- {footerMessage}
- : null;
+ const footer = shouldShowFooter ? (
+
+ {footerMessage}
+
+ ) : null;
- return {form}{footer}
;
+ return (
+
+ {form}
+ {footer}
+
+ );
}
}
FlowView.propTypes = {
- initialChanges: PropTypes.object.describe('A map of field names to their initial changed values (where applicable), used to seed the form'),
- initialFields: PropTypes.object.isRequired.describe('A map of field names to their starting values. For a creation form, this is probably an empty object.'),
- renderForm: PropTypes.func.isRequired.describe('A function used to render the body of the form. It receives an object with fields (the current form state), changes (an isolated set of changes), setField(name, value) (a method for updating a field), and resetFields().'),
- footerContents: PropTypes.func.isRequired.describe('A function that renders the message in the footer. It receives an object with fields (the current form state) and changes (an isolated set of changes). This will only be called if some changes have been made.'),
- inProgressText: PropTypes.string.describe('Text for commit button when request is in progress. Default is "Save changes".'),
- submitText: PropTypes.string.describe('Text for commit button when filling out form. Default is "Saving\u2026"'),
- onSubmit: PropTypes.func.describe('Function to call when submitting the FlowView. Must return a promise. It receives an object with fields (the current form state) and changes (an isolated set of changes).'),
- afterSave: PropTypes.func.describe('Function to call after saving succeeds. It receives the fields, setField(), and resetFields(). Use this if you require custom modification to fields after save succeeds (eg. in PushSettings we clear the GCM credentials fields after they are saved)'),
- validate: PropTypes.func.describe('Function that validates the form. If it returns a non-empty string, that string is display in the footer, and the submit button is disabled. You can return "use default" to disable the button and use the default message (not in red), but you really shouldn\'t.'),
- showFooter: PropTypes.func.describe('Recieves the changes, and returns false if the footer should be hidden. By default the footer shows if there are any changes.'),
- secondaryButton: PropTypes.func.describe('Overrride the cancel button by passing a function that returns your custom node. By default, the cancel button says "Cancel" and calls resetFields().'),
- defaultFooterMessage: PropTypes.node.describe('A message for the footer when the validate message is "use default"'),
+ initialChanges: PropTypes.object.describe(
+ 'A map of field names to their initial changed values (where applicable), used to seed the form'
+ ),
+ initialFields: PropTypes.object.isRequired.describe(
+ 'A map of field names to their starting values. For a creation form, this is probably an empty object.'
+ ),
+ renderForm: PropTypes.func.isRequired.describe(
+ 'A function used to render the body of the form. It receives an object with fields (the current form state), changes (an isolated set of changes), setField(name, value) (a method for updating a field), and resetFields().'
+ ),
+ footerContents: PropTypes.func.isRequired.describe(
+ 'A function that renders the message in the footer. It receives an object with fields (the current form state) and changes (an isolated set of changes). This will only be called if some changes have been made.'
+ ),
+ inProgressText: PropTypes.string.describe(
+ 'Text for commit button when request is in progress. Default is "Save changes".'
+ ),
+ submitText: PropTypes.string.describe(
+ 'Text for commit button when filling out form. Default is "Saving\u2026"'
+ ),
+ onSubmit: PropTypes.func.describe(
+ 'Function to call when submitting the FlowView. Must return a promise. It receives an object with fields (the current form state) and changes (an isolated set of changes).'
+ ),
+ afterSave: PropTypes.func.describe(
+ 'Function to call after saving succeeds. It receives the fields, setField(), and resetFields(). Use this if you require custom modification to fields after save succeeds (eg. in PushSettings we clear the GCM credentials fields after they are saved)'
+ ),
+ validate: PropTypes.func.describe(
+ 'Function that validates the form. If it returns a non-empty string, that string is display in the footer, and the submit button is disabled. You can return "use default" to disable the button and use the default message (not in red), but you really shouldn\'t.'
+ ),
+ showFooter: PropTypes.func.describe(
+ 'Recieves the changes, and returns false if the footer should be hidden. By default the footer shows if there are any changes.'
+ ),
+ secondaryButton: PropTypes.func.describe(
+ 'Overrride the cancel button by passing a function that returns your custom node. By default, the cancel button says "Cancel" and calls resetFields().'
+ ),
+ defaultFooterMessage: PropTypes.node.describe(
+ 'A message for the footer when the validate message is "use default"'
+ ),
};
diff --git a/src/components/FormButton/FormButton.example.js b/src/components/FormButton/FormButton.example.js
index fa40a84485..1f9e15ab55 100644
--- a/src/components/FormButton/FormButton.example.js
+++ b/src/components/FormButton/FormButton.example.js
@@ -5,25 +5,27 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
-import Field from 'components/Field/Field.react';
-import Fieldset from 'components/Fieldset/Fieldset.react';
+import React from 'react';
+import Field from 'components/Field/Field.react';
+import Fieldset from 'components/Fieldset/Fieldset.react';
import FormButton from 'components/FormButton/FormButton.react';
-import Label from 'components/Label/Label.react';
+import Label from 'components/Label/Label.react';
export const component = FormButton;
export const demos = [
{
render: () => (
-
+
- )
- }
+ ),
+ },
];
diff --git a/src/components/FormButton/FormButton.react.js b/src/components/FormButton/FormButton.react.js
index 61564b39df..b4a71ed1ea 100644
--- a/src/components/FormButton/FormButton.react.js
+++ b/src/components/FormButton/FormButton.react.js
@@ -9,13 +9,13 @@ import Button from 'components/Button/Button.react';
import React from 'react';
import styles from 'components/FormButton/FormButton.scss';
-let FormButton = (props) => (
+const FormButton = props => (
-
);
-let { ...otherPropTypes } = Button.propTypes;
+const { ...otherPropTypes } = Button.propTypes;
FormButton.propTypes = otherPropTypes;
export default FormButton;
diff --git a/src/components/FormModal/FormModal.react.js b/src/components/FormModal/FormModal.react.js
index eb375e6545..422a3f7e96 100644
--- a/src/components/FormModal/FormModal.react.js
+++ b/src/components/FormModal/FormModal.react.js
@@ -5,10 +5,10 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import PropTypes from 'lib/PropTypes';
-import Modal from 'components/Modal/Modal.react';
-import FormNote from 'components/FormNote/FormNote.react';
+import Modal from 'components/Modal/Modal.react';
+import FormNote from 'components/FormNote/FormNote.react';
export default class FormModal extends React.Component {
constructor() {
@@ -20,7 +20,7 @@ export default class FormModal extends React.Component {
}
render() {
- let {
+ const {
children,
open,
submitText = 'Confirm',
@@ -33,7 +33,7 @@ export default class FormModal extends React.Component {
showErrors = true,
...modalProps
} = this.props;
- let showModal = open || this.state.inProgress;
+ const showModal = open || this.state.inProgress;
if (!modalProps.type) {
if (this.state.errorMessage.length > 0) {
modalProps.type = Modal.Types.DANGER;
@@ -41,57 +41,76 @@ export default class FormModal extends React.Component {
modalProps.type = Modal.Types.VALID;
}
}
- return (showModal ? {
- this.setState({
- errorMessage: '',
- inProgress: true,
- });
- onSubmit().then(result => {
+ return showModal ? (
+ {
+ this.setState({
+ errorMessage: '',
+ inProgress: true,
+ });
+ onSubmit()
+ .then(result => {
+ onClose();
+ clearFields();
+ onSuccess(result);
+ this.setState({ inProgress: false });
+ })
+ .catch(({ message, error, notice, errors = [] }) => {
+ this.setState({
+ errorMessage: errors.join(' ') || message || error || notice || 'An error occurred',
+ inProgress: false,
+ });
+ });
+ }}
+ onCancel={() => {
onClose();
clearFields();
- onSuccess(result);
- this.setState({inProgress: false});
- }).catch(({ message, error, notice, errors = [] }) => {
this.setState({
- errorMessage: errors.join(' ') || message || error || notice || 'An error occurred',
- inProgress: false,
+ errorMessage: '',
});
- });
- }}
- onCancel={() => {
- onClose();
- clearFields();
- this.setState({
- errorMessage: '',
- });
- }}
- disabled={!enabled}
- canCancel={!this.state.inProgress}
- progress={this.state.inProgress} >
- {children}
- {showErrors ? 0}
- color='red' >
- {this.state.errorMessage}
- : null}
- : null)
+ }}
+ disabled={!enabled}
+ canCancel={!this.state.inProgress}
+ progress={this.state.inProgress}
+ >
+ {children}
+ {showErrors ? (
+ 0} color="red">
+ {this.state.errorMessage}
+
+ ) : null}
+
+ ) : null;
}
}
-let { ...forwardedModalProps} = Modal.propTypes;
+const { ...forwardedModalProps } = Modal.propTypes;
FormModal.propTypes = {
...forwardedModalProps,
children: PropTypes.node.describe('The form elements to be rendered in the modal.'),
open: PropTypes.bool.isRequired.describe('Whether or not to show the modal.'),
- submitText: PropTypes.string.describe('The text to show on the CTA button. Defaults to "Confirm"'),
- inProgressText: PropTypes.string.describe('The text to show to the CTA button while the request is in flight. Defaults to "Confirming\u2026".'),
- onSubmit: PropTypes.func.isRequired.describe('A function that will be called when the user submits the form. This function must return a promise.'),
- onSuccess: PropTypes.func.describe('A function that will be called with the result of the promise created in onSubmit.'),
- onClose: PropTypes.func.isRequired.describe('A function that will be called when the modal is closing. After this function is called, the parent should not pass "true" to the "open" prop.'),
- clearFields: PropTypes.func.describe('A function that should clear the state of the form fields inside the modal.'),
+ submitText: PropTypes.string.describe(
+ 'The text to show on the CTA button. Defaults to "Confirm"'
+ ),
+ inProgressText: PropTypes.string.describe(
+ 'The text to show to the CTA button while the request is in flight. Defaults to "Confirming\u2026".'
+ ),
+ onSubmit: PropTypes.func.isRequired.describe(
+ 'A function that will be called when the user submits the form. This function must return a promise.'
+ ),
+ onSuccess: PropTypes.func.describe(
+ 'A function that will be called with the result of the promise created in onSubmit.'
+ ),
+ onClose: PropTypes.func.isRequired.describe(
+ 'A function that will be called when the modal is closing. After this function is called, the parent should not pass "true" to the "open" prop.'
+ ),
+ clearFields: PropTypes.func.describe(
+ 'A function that should clear the state of the form fields inside the modal.'
+ ),
enabled: PropTypes.bool.describe('Set to false to disable the confirm button.'),
- showErrors: PropTypes.bool.describe('Set to false to hide errors if you are doing custom error handling (such as migration and new app modals).'),
+ showErrors: PropTypes.bool.describe(
+ 'Set to false to hide errors if you are doing custom error handling (such as migration and new app modals).'
+ ),
};
diff --git a/src/components/FormNote/FormNote.react.js b/src/components/FormNote/FormNote.react.js
index d1c2879a74..9eb754b5f6 100644
--- a/src/components/FormNote/FormNote.react.js
+++ b/src/components/FormNote/FormNote.react.js
@@ -11,7 +11,7 @@ import React from 'react';
import SliderWrap from 'components/SliderWrap/SliderWrap.react';
import styles from 'components/FormNote/FormNote.scss';
-let FormNote = ({ show, children, color, ...other }) => (
+const FormNote = ({ show, children, color, ...other }) => (
{children}
@@ -19,7 +19,7 @@ let FormNote = ({ show, children, color, ...other }) => (
FormNote.propTypes = {
show: PropTypes.bool,
- color: PropTypes.oneOf(['blue', 'green', 'orange', 'red'])
+ color: PropTypes.oneOf(['blue', 'green', 'orange', 'red']),
};
export default FormNote;
diff --git a/src/components/FormTable/FormTable.example.js b/src/components/FormTable/FormTable.example.js
index 778dbb0a6b..f04429adcc 100644
--- a/src/components/FormTable/FormTable.example.js
+++ b/src/components/FormTable/FormTable.example.js
@@ -5,10 +5,10 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import Field from 'components/Field/Field.react';
-import FormTable from 'components/FormTable/FormTable.react';
-import Label from 'components/Label/Label.react';
-import React from 'react';
+import Field from 'components/Field/Field.react';
+import FormTable from 'components/FormTable/FormTable.react';
+import Label from 'components/Label/Label.react';
+import React from 'react';
export const component = FormTable;
@@ -16,58 +16,67 @@ export const demos = [
{
render: () => (
{
+ alert('Delete button clicked.');
},
- {
- key: 'important',
- value: 'pay attention',
- strong: true,
- }
- ],
- },
- {
- title: 'Title',
- color: 'red',
- onDelete: () => {alert('Delete button clicked.')},
- notes: [
- {
- key: 'foo',
- keyColor: 'red',
- value: 'bar',
- }
- ]
- }
- ]} />
- } />
- )
+ notes: [
+ {
+ key: 'foo',
+ keyColor: 'red',
+ value: 'bar',
+ },
+ ],
+ },
+ ]}
+ />
+ }
+ />
+ ),
},
{
render: () => (
{title}
- {typeof onDelete === 'function' ? × : null}
+ {typeof onDelete === 'function' ? (
+
+ ×
+
+ ) : null}
{notes.map(({ key, keyColor = '', value, strong }, index) => {
- return
- {key}
- {strong ? {value} : {value} }
-
;
+ return (
+
+
+ {key}
+
+ {strong ? {value} : {value} }
+
+ );
})}
);
};
-let FormTable = ({ items, keyWidth = '70px' }) => (
+const FormTable = ({ items, keyWidth = '70px' }) => (
- {items.map((item, index) => |
)}
+ {items.map((item, index) => (
+ |
+ ))}
);
FormTable.propTypes = {
- items: PropTypes.array.isRequired.describe('An array of objects to go in the table. Each object should include a title (string), optional color (blue, red, green, orange), optional onDelete function, and notes (array). Each object in the notes array should contain a key (string), keyColor (blue, red, green, or orange), a value (string), and optionally strong (bool) to use a bold font for the value.'),
- keyWidth: PropTypes.string.describe('A CSS unit for the width of the key portion of the table. Defaults to 70px.'),
+ items: PropTypes.array.isRequired.describe(
+ 'An array of objects to go in the table. Each object should include a title (string), optional color (blue, red, green, orange), optional onDelete function, and notes (array). Each object in the notes array should contain a key (string), keyColor (blue, red, green, or orange), a value (string), and optionally strong (bool) to use a bold font for the value.'
+ ),
+ keyWidth: PropTypes.string.describe(
+ 'A CSS unit for the width of the key portion of the table. Defaults to 70px.'
+ ),
};
export default FormTable;
diff --git a/src/components/FourOhFour/FourOhFour.react.js b/src/components/FourOhFour/FourOhFour.react.js
index 2e53789d92..ae95fb8fcf 100644
--- a/src/components/FourOhFour/FourOhFour.react.js
+++ b/src/components/FourOhFour/FourOhFour.react.js
@@ -5,8 +5,8 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
-import styles from 'components/FourOhFour/FourOhFour.scss';
+import React from 'react';
+import styles from 'components/FourOhFour/FourOhFour.scss';
import { withRouter } from 'lib/withRouter';
const EMOJI_COUNT = 30;
@@ -17,7 +17,7 @@ class FourOhFour extends React.Component {
super();
this.state = {
- emoji: (Math.random() * EMOJI_COUNT) | 0
+ emoji: (Math.random() * EMOJI_COUNT) | 0,
};
this.timeout = null;
this.updateEmoji = this.updateEmoji.bind(this);
@@ -47,12 +47,15 @@ class FourOhFour extends React.Component {
Oh no, we can't find that page!
- this.props.navigate(-1)}>Go back
+ this.props.navigate(-1)}>
+ Go back
+
diff --git a/src/components/GeoPointEditor/GeoPointEditor.react.js b/src/components/GeoPointEditor/GeoPointEditor.react.js
index 597bc529ee..76ec915aa3 100644
--- a/src/components/GeoPointEditor/GeoPointEditor.react.js
+++ b/src/components/GeoPointEditor/GeoPointEditor.react.js
@@ -5,9 +5,9 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import { GeoPoint } from 'parse';
-import React from 'react';
-import styles from 'components/GeoPointEditor/GeoPointEditor.scss';
+import { GeoPoint } from 'parse';
+import React from 'react';
+import styles from 'components/GeoPointEditor/GeoPointEditor.scss';
import validateNumeric from 'lib/validateNumeric';
export default class GeoPointEditor extends React.Component {
@@ -54,16 +54,19 @@ export default class GeoPointEditor extends React.Component {
checkExternalClick() {
// timeout needed because activeElement is set after onBlur event is done
- setTimeout(function() {
- // check if activeElement is something else from input fields,
- // to avoid commiting new value on every switch of focus beetween latitude and longitude fields
- if (
- document.activeElement !== this.latitudeRef.current &&
- document.activeElement !== this.longitudeRef.current
- ) {
- this.commitValue();
- }
- }.bind(this), 1);
+ setTimeout(
+ function () {
+ // check if activeElement is something else from input fields,
+ // to avoid commiting new value on every switch of focus beetween latitude and longitude fields
+ if (
+ document.activeElement !== this.latitudeRef.current &&
+ document.activeElement !== this.longitudeRef.current
+ ) {
+ this.commitValue();
+ }
+ }.bind(this),
+ 1
+ );
}
handleKeyLatitude(e) {
@@ -88,7 +91,11 @@ export default class GeoPointEditor extends React.Component {
if (typeof this.state.longitude === 'string') {
longitude = parseFloat(this.state.longitude);
}
- if (this.props.value && latitude === this.props.value.latitude && longitude === this.props.value.longitude) {
+ if (
+ this.props.value &&
+ latitude === this.props.value.latitude &&
+ longitude === this.props.value.longitude
+ ) {
// No change, return the original object
this.props.onCommit(this.props.value);
} else {
@@ -102,35 +109,39 @@ export default class GeoPointEditor extends React.Component {
}
render() {
- let onChange = (target, e) => {
- let value = e.target.value;
+ const onChange = (target, e) => {
+ const value = e.target.value;
if (!validateNumeric(value)) {
- var values = value.split(',');
-
- if (values.length == 2) {
- values = values.map(val => val.trim());
-
- if (values[0].length > 0 && validateNumeric(values[0])) {
-
- if (values[1].length <= 0 || !validateNumeric(values[1])) {
- this.setState({ latitude: values[0] });
- this.longitudeRef.current.focus();
- this.longitudeRef.current.setSelectionRange(0, String(this.state.longitude).length);
- return;
- }
-
- if (validateNumeric(values[1])) {
- this.setState({ latitude: values[0] });
- this.setState({ longitude: values[1] });
- this.longitudeRef.current.focus();
- return;
- }
+ const regex = /[[("' ]?(?[0-9.]+)["' ]?,["' ]?(?[0-9.]+)["' )\]]?/;
+ const match = regex.exec(value);
+
+ if (!match) {
+ return null;
+ }
+
+ const values = [match.groups.x, match.groups.y];
+
+ if (values[0].length > 0 && validateNumeric(values[0])) {
+ if (values[1].length <= 0 || !validateNumeric(values[1])) {
+ this.setState({ latitude: values[0] });
+ this.longitudeRef.current.focus();
+ this.longitudeRef.current.setSelectionRange(0, String(this.state.longitude).length);
+ return;
+ }
+
+ if (validateNumeric(values[1])) {
+ this.setState({ latitude: values[0] });
+ this.setState({ longitude: values[1] });
+ this.longitudeRef.current.focus();
+ return;
}
}
}
- this.setState({ [target]: validateNumeric(value) ? value : this.state[target] });
+ this.setState({
+ [target]: validateNumeric(value) ? value : this.state[target],
+ });
};
return (
@@ -138,12 +149,14 @@ export default class GeoPointEditor extends React.Component {
ref={this.latitudeRef}
value={this.state.latitude}
onBlur={this.checkExternalClick}
- onChange={onChange.bind(this, 'latitude')} />
+ onChange={onChange.bind(this, 'latitude')}
+ />
);
}
diff --git a/src/components/GeoPointInput/GeoPointInput.react.js b/src/components/GeoPointInput/GeoPointInput.react.js
index c80484519b..6d81d883c0 100644
--- a/src/components/GeoPointInput/GeoPointInput.react.js
+++ b/src/components/GeoPointInput/GeoPointInput.react.js
@@ -5,7 +5,7 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import styles from 'components/GeoPointInput/GeoPointInput.scss';
export default class GeoPointInput extends React.Component {
@@ -16,7 +16,7 @@ export default class GeoPointInput extends React.Component {
}
this.props.onChange({
latitude: e.target.value,
- longitude: this.props.value ? this.props.value.longitude : '0.0'
+ longitude: this.props.value ? this.props.value.longitude : '0.0',
});
}
@@ -27,12 +27,12 @@ export default class GeoPointInput extends React.Component {
}
this.props.onChange({
latitude: this.props.value ? this.props.value.latitude : '0.0',
- longitude: e.target.value
+ longitude: e.target.value,
});
}
render() {
- let value = this.props.value || { latitude: '0.0', longitude: '0.0' };
+ const value = this.props.value || { latitude: '0.0', longitude: '0.0' };
return (
);
diff --git a/src/components/Icon/Icon.example.js b/src/components/Icon/Icon.example.js
index 94bd04711a..25fd8c3862 100644
--- a/src/components/Icon/Icon.example.js
+++ b/src/components/Icon/Icon.example.js
@@ -5,7 +5,7 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import Icon from 'components/Icon/Icon.react';
+import Icon from 'components/Icon/Icon.react';
import React from 'react';
export const component = Icon;
@@ -14,11 +14,11 @@ export const demos = [
{
render: () => (
-
- )
- }
+ ),
+ },
];
diff --git a/src/components/Icon/Icon.react.js b/src/components/Icon/Icon.react.js
index e32e65eabb..750e80806b 100644
--- a/src/components/Icon/Icon.react.js
+++ b/src/components/Icon/Icon.react.js
@@ -6,18 +6,18 @@
* the root directory of this source tree.
*/
import PropTypes from 'lib/PropTypes';
-import React from 'react';
+import React from 'react';
-let Icon = ({ name, fill, width, height }) => {
- let props = {
+const Icon = ({ name, fill, width, height }) => {
+ const props = {
width: width,
- height: height
+ height: height,
};
if (fill) {
props.fill = fill;
}
return (
-
+
);
@@ -26,16 +26,8 @@ let Icon = ({ name, fill, width, height }) => {
export default Icon;
Icon.propTypes = {
- name: PropTypes.string.isRequired.describe(
- 'The icon name. This will be the name found in the '
- ),
- width: PropTypes.number.isRequired.describe(
- 'The icon width, in pixels.'
- ),
- height: PropTypes.number.isRequired.describe(
- 'The icon height, in pixels.'
- ),
- fill: PropTypes.string.describe(
- 'A valid color, used as the fill property for the SVG.'
- )
+ name: PropTypes.string.isRequired.describe('The icon name. This will be the name found in the '),
+ width: PropTypes.number.isRequired.describe('The icon width, in pixels.'),
+ height: PropTypes.number.isRequired.describe('The icon height, in pixels.'),
+ fill: PropTypes.string.describe('A valid color, used as the fill property for the SVG.'),
};
diff --git a/src/components/InlineSubmitInput/InlineSubmitInput.example.js b/src/components/InlineSubmitInput/InlineSubmitInput.example.js
index 1309237305..91d561e2a4 100644
--- a/src/components/InlineSubmitInput/InlineSubmitInput.example.js
+++ b/src/components/InlineSubmitInput/InlineSubmitInput.example.js
@@ -18,18 +18,23 @@ export const demos = [
render: () => (
alert('submitting: ' + v)}
- submitButtonText='ADD' />} />
+ label={ alert('submitting: ' + v)} submitButtonText="ADD" />
+ }
+ />
v.length > 5}
- placeholder='Must be longer than 5 letters'
- onSubmit={(v) => alert('submitting: ' + v)}
- submitButtonText='ADD' />} />
+ label={ v.length > 5}
+ placeholder="Must be longer than 5 letters"
+ onSubmit={v => alert('submitting: ' + v)}
+ submitButtonText="ADD"
+ />
+ }
+ />
- )
- }
+ ),
+ },
];
diff --git a/src/components/InlineSubmitInput/InlineSubmitInput.react.js b/src/components/InlineSubmitInput/InlineSubmitInput.react.js
index e8563090a7..f92bb2aa79 100644
--- a/src/components/InlineSubmitInput/InlineSubmitInput.react.js
+++ b/src/components/InlineSubmitInput/InlineSubmitInput.react.js
@@ -29,7 +29,7 @@ export default class InlineSubmitInput extends React.Component {
}
handleSubmit() {
- this.props.onSubmit(this.state.value).then((shouldClearInput) => {
+ this.props.onSubmit(this.state.value).then(shouldClearInput => {
if (shouldClearInput) {
this.handleInputChange('');
}
@@ -43,14 +43,14 @@ export default class InlineSubmitInput extends React.Component {
- { this.state.showButton ?
-
+ {this.state.showButton ? (
+
{this.props.submitButtonText}
- : null
- }
+ ) : null}
);
}
@@ -66,7 +66,5 @@ InlineSubmitInput.propTypes = {
validate: PropTypes.func.describe(
'A function fired when the input is changed. It receives the new value as its only parameter, and must return a boolean for whether to show the submit button.'
),
- placeholder: PropTypes.string.describe(
- 'A placeholder string, for when the input is empty'
- ),
+ placeholder: PropTypes.string.describe('A placeholder string, for when the input is empty'),
};
diff --git a/src/components/IntervalInput/IntervalInput.example.js b/src/components/IntervalInput/IntervalInput.example.js
index 043e3e2db6..2e5999e176 100644
--- a/src/components/IntervalInput/IntervalInput.example.js
+++ b/src/components/IntervalInput/IntervalInput.example.js
@@ -5,10 +5,10 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import Field from 'components/Field/Field.react';
-import IntervalInput from 'components/IntervalInput/IntervalInput.react';
-import Label from 'components/Label/Label.react';
-import React from 'react';
+import Field from 'components/Field/Field.react';
+import IntervalInput from 'components/IntervalInput/IntervalInput.react';
+import Label from 'components/Label/Label.react';
+import React from 'react';
export const component = IntervalInput;
@@ -27,7 +27,8 @@ class IntervalDemo extends React.Component {
+ onChange={this.handleChange.bind(this)}
+ />
);
}
}
@@ -35,11 +36,9 @@ class IntervalDemo extends React.Component {
export const demos = [
{
render: () => (
-
-
}
- input={
} />
+
+
- )
- }
+ ),
+ },
];
diff --git a/src/components/IntervalInput/IntervalInput.react.js b/src/components/IntervalInput/IntervalInput.react.js
index 97afccbe7b..8de75595fa 100644
--- a/src/components/IntervalInput/IntervalInput.react.js
+++ b/src/components/IntervalInput/IntervalInput.react.js
@@ -10,28 +10,32 @@ import Option from 'components/Dropdown/Option.react';
import PropTypes from 'lib/PropTypes';
import React from 'react';
-let IntervalInput = ({ count, unit, onChange }) => {
- let counts = [];
- let max = (unit === 'hour') ? 23 : 59;
+const IntervalInput = ({ count, unit, onChange }) => {
+ const counts = [];
+ const max = unit === 'hour' ? 23 : 59;
for (let i = 1; i <= max; i++) {
- counts.push(
{String(i)} );
+ counts.push(
+
+ {String(i)}
+
+ );
}
- let countChange = (newCount) => onChange(parseInt(newCount, 10), unit);
- let unitChange = (newUnit) => {
+ const countChange = newCount => onChange(parseInt(newCount, 10), unit);
+ const unitChange = newUnit => {
if (newUnit === 'minute') {
return onChange(count, newUnit);
} else {
return onChange(Math.min(23, count), newUnit);
}
- }
+ };
return (
-
+
{counts}
-
+
{count === 1 ? 'Minute' : 'Minutes'}
{count === 1 ? 'Hour' : 'Hours'}
@@ -44,5 +48,5 @@ export default IntervalInput;
IntervalInput.propTypes = {
count: PropTypes.number.isRequired,
unit: PropTypes.oneOf(['minute', 'hour']),
- onChange: PropTypes.func.isRequired
+ onChange: PropTypes.func.isRequired,
};
diff --git a/src/components/JsonPrinter/JsonPrinter.example.js b/src/components/JsonPrinter/JsonPrinter.example.js
index 449ad2978d..639128aea1 100644
--- a/src/components/JsonPrinter/JsonPrinter.example.js
+++ b/src/components/JsonPrinter/JsonPrinter.example.js
@@ -5,26 +5,29 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import Fieldset from 'components/Fieldset/Fieldset.react';
-import JsonPrinter from 'components/JsonPrinter/JsonPrinter.react';
-import React from 'react';
+import Fieldset from 'components/Fieldset/Fieldset.react';
+import JsonPrinter from 'components/JsonPrinter/JsonPrinter.react';
+import React from 'react';
export const component = JsonPrinter;
-let json = {
+const json = {
results: [
{
name: 'Apples',
description: 'Blah blah blah...',
count: 12,
edible: true,
- lengthyProp: 'This is a really long sentence that hopefully fills up the entire width of the container, and demonstrates overflow.'
- }, {
+ lengthyProp:
+ 'This is a really long sentence that hopefully fills up the entire width of the container, and demonstrates overflow.',
+ },
+ {
name: 'Bananas',
description: 'Blah blah blah...',
count: 3,
edible: true,
- }, {
+ },
+ {
name: 'Rocks',
description: 'Blah blah blah...',
count: 44,
@@ -32,18 +35,18 @@ let json = {
acquiredAt: {
name: 'Dusty Flea Market',
address: '1 Main St',
- phone: '555-555-1234'
- }
- }
- ]
+ phone: '555-555-1234',
+ },
+ },
+ ],
};
export const demos = [
{
render: () => (
-
+
- )
- }
+ ),
+ },
];
diff --git a/src/components/JsonPrinter/JsonPrinter.react.js b/src/components/JsonPrinter/JsonPrinter.react.js
index fddf5a75c3..a4e904fa8f 100644
--- a/src/components/JsonPrinter/JsonPrinter.react.js
+++ b/src/components/JsonPrinter/JsonPrinter.react.js
@@ -6,21 +6,20 @@
* the root directory of this source tree.
*/
import CodeSnippet from 'components/CodeSnippet/CodeSnippet.react';
-import PropTypes from 'lib/PropTypes';
-import React from 'react';
+import PropTypes from 'lib/PropTypes';
+import React from 'react';
-let JsonPrinter = ({ object }) => (
+const JsonPrinter = ({ object }) => (
+
abc123qwerty4567890 } />
+ label={abc123qwerty4567890 }
+ />
abc123qwerty4567890 } />
+ label={abc123qwerty4567890 }
+ />
- )
- }
+ ),
+ },
];
diff --git a/src/components/KeyField/KeyField.react.js b/src/components/KeyField/KeyField.react.js
index 2d1945eecd..449f57eebb 100644
--- a/src/components/KeyField/KeyField.react.js
+++ b/src/components/KeyField/KeyField.react.js
@@ -6,16 +6,16 @@
* the root directory of this source tree.
*/
import FormButton from 'components/FormButton/FormButton.react';
-import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import styles from 'components/KeyField/KeyField.scss';
+import PropTypes from 'lib/PropTypes';
+import React from 'react';
+import styles from 'components/KeyField/KeyField.scss';
export default class KeyField extends React.Component {
constructor(props) {
super();
this.state = {
- hidden: props.hidden
+ hidden: props.hidden,
};
}
@@ -32,7 +32,8 @@ export default class KeyField extends React.Component {
return (
{this.props.children}
;
@@ -42,6 +43,10 @@ export default class KeyField extends React.Component {
KeyField.propTypes = {
children: PropTypes.node.describe('The contents of the field. Ideally, this is an app key.'),
hidden: PropTypes.bool.describe('Determines whether the field is initially hidden'),
- name: PropTypes.string.describe('If the field is initially hidden, this name will be used in the button used to show it. If the value is NAME, the button will contain the text "Show NAME Key"'),
- whenHiddenText: PropTypes.string.describe('Use this instead of "name" if you aren\'t showing a key.'),
+ name: PropTypes.string.describe(
+ 'If the field is initially hidden, this name will be used in the button used to show it. If the value is NAME, the button will contain the text "Show NAME Key"'
+ ),
+ whenHiddenText: PropTypes.string.describe(
+ 'Use this instead of "name" if you aren\'t showing a key.'
+ ),
};
diff --git a/src/components/Label/Label.example.js b/src/components/Label/Label.example.js
index 2869cdd7a3..a7eb1f2c96 100644
--- a/src/components/Label/Label.example.js
+++ b/src/components/Label/Label.example.js
@@ -15,8 +15,9 @@ export const demos = [
{
render: () => (
+ style={{ padding: '0 ' + padding, ...props.style }}>
{props.text}
{props.description ?
{props.description}
: null}
Promise.resolve(Math.random())}
- render={num => {num} }
- refreshIntervalMillis={100}
- initialData={0}/>,
+ render: () => (
+ Promise.resolve(Math.random())}
+ render={num => {num} }
+ refreshIntervalMillis={100}
+ initialData={0}
+ />
+ ),
},
- ];
+];
diff --git a/src/components/LiveReload/LiveReload.react.js b/src/components/LiveReload/LiveReload.react.js
index 2497760ac3..4d369413df 100644
--- a/src/components/LiveReload/LiveReload.react.js
+++ b/src/components/LiveReload/LiveReload.react.js
@@ -5,8 +5,8 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import PropTypes from 'lib/PropTypes';
-import React from 'react';
+import PropTypes from 'lib/PropTypes';
+import React from 'react';
import { abortableGet } from 'lib/AJAX';
export default class LiveReload extends React.Component {
@@ -16,66 +16,76 @@ export default class LiveReload extends React.Component {
this.timer = null;
this.refreshIntervalMillis = props.refreshIntervalMillis || 1000;
this.state = {
- currentData: props.initialData,
- };
+ currentData: props.initialData,
+ };
}
fetchNewData() {
- clearTimeout(this.timer);
- let promise = null;
- let xhr = null;
- if (typeof(this.props.source) === 'function') {
- let obj = this.props.source();
- if (obj.promise && obj.xhr) {
- promise = obj.promise;
- xhr = obj.xhr;
- } else {
- promise = obj;
- }
- } else {
- let obj = abortableGet(this.props.source);
- promise = obj.promise;
- xhr = obj.xhr;
- }
- this.abortXHR = () => {
- if (xhr) {
- xhr.abort();
- }
- clearTimeout(this.timer);
- }
- promise.then(data => {
- this.setState({currentData: data});
- }).finally(() => {
- if (this.shouldContinueReloading) {
- this.timer = setTimeout(this.fetchNewData.bind(this), this.refreshIntervalMillis);
- }
- });
- return promise;
- }
+ clearTimeout(this.timer);
+ let promise = null;
+ let xhr = null;
+ if (typeof this.props.source === 'function') {
+ const obj = this.props.source();
+ if (obj.promise && obj.xhr) {
+ promise = obj.promise;
+ xhr = obj.xhr;
+ } else {
+ promise = obj;
+ }
+ } else {
+ const obj = abortableGet(this.props.source);
+ promise = obj.promise;
+ xhr = obj.xhr;
+ }
+ this.abortXHR = () => {
+ if (xhr) {
+ xhr.abort();
+ }
+ clearTimeout(this.timer);
+ };
+ promise
+ .then(data => {
+ this.setState({ currentData: data });
+ })
+ .finally(() => {
+ if (this.shouldContinueReloading) {
+ this.timer = setTimeout(this.fetchNewData.bind(this), this.refreshIntervalMillis);
+ }
+ });
+ return promise;
+ }
componentWillMount() {
- this.shouldContinueReloading = true;
- if (!this.state.currentData) {
- this.fetchNewData();
- } else {
- this.timer = setTimeout(this.fetchNewData.bind(this), this.refreshIntervalMillis);
- }
- }
+ this.shouldContinueReloading = true;
+ if (!this.state.currentData) {
+ this.fetchNewData();
+ } else {
+ this.timer = setTimeout(this.fetchNewData.bind(this), this.refreshIntervalMillis);
+ }
+ }
- componentWillUnmount() {
- this.abortXHR();
- this.shouldContinueReloading = false;
- clearTimeout(this.timer);
- }
+ componentWillUnmount() {
+ this.abortXHR();
+ this.shouldContinueReloading = false;
+ clearTimeout(this.timer);
+ }
render() {
- return this.props.render(this.state.currentData);
+ return this.props.render(this.state.currentData);
}
}
LiveReload.propTypes = {
- refreshIntervalMillis: PropTypes.number.describe('How often to refresh the data, in milliseconds. Defaults to 1s.'),
- source: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired.describe('Either a URL to fetch updates from, or a function that returns a promise that fetches update, or a function that returns { promise, xhr }.'),
- render: PropTypes.func.isRequired.describe('Receives the data from the URL or promise and returns the component to be rendered.'),
- initialData: PropTypes.any.describe('Initial data to seed the component before any request has been made. If this is not passed, then your render function must be prepared to handle being called with "undefined" instead of data. Passing this will also cause the first load to happen after refreshIntervalMillis, while not passing it will cause it the first load to happen immediately.'),
-}
+ refreshIntervalMillis: PropTypes.number.describe(
+ 'How often to refresh the data, in milliseconds. Defaults to 1s.'
+ ),
+ source: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired.describe(
+ 'Either a URL to fetch updates from, or a function that returns a promise that fetches update, or a function that returns { promise, xhr }.'
+ ),
+ render: PropTypes.func.isRequired.describe(
+ 'Receives the data from the URL or promise and returns the component to be rendered.'
+ ),
+ initialData: PropTypes.any.describe(
+ 'Initial data to seed the component before any request has been made. If this is not passed, then your render function must be prepared to handle being called with "undefined" instead of data. Passing this will also cause the first load to happen after refreshIntervalMillis, while not passing it will cause it the first load to happen immediately.'
+ ),
+};
diff --git a/src/components/Loader/Loader.example.js b/src/components/Loader/Loader.example.js
index 673be9733f..70ffe04773 100644
--- a/src/components/Loader/Loader.example.js
+++ b/src/components/Loader/Loader.example.js
@@ -7,7 +7,7 @@
*/
import baseStyles from 'stylesheets/base.scss';
import Loader from 'components/Loader/Loader.react';
-import React from 'react';
+import React from 'react';
export const component = Loader;
@@ -15,15 +15,17 @@ export const demos = [
{
render() {
return (
-
+
);
- }
- }
+ },
+ },
];
diff --git a/src/components/Loader/Loader.react.js b/src/components/Loader/Loader.react.js
index 277972f68f..f88613edcb 100644
--- a/src/components/Loader/Loader.react.js
+++ b/src/components/Loader/Loader.react.js
@@ -5,7 +5,7 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import styles from 'components/Loader/Loader.scss';
const SMALL_RADIUS = 20;
@@ -26,27 +26,27 @@ function getRadius(t) {
function getPosition(t) {
if (t < POINTS.A) {
- let multiplier = LENGTH / SMALL_RADIUS;
+ const multiplier = LENGTH / SMALL_RADIUS;
return {
x: SMALL_RADIUS + SMALL_RADIUS * Math.cos(t * multiplier + Math.PI / 2),
- y: 2 * LARGE_RADIUS + SMALL_RADIUS - SMALL_RADIUS * Math.sin(t * multiplier + Math.PI / 2)
+ y: 2 * LARGE_RADIUS + SMALL_RADIUS - SMALL_RADIUS * Math.sin(t * multiplier + Math.PI / 2),
};
} else if (t < POINTS.B) {
return {
x: 2 * SMALL_RADIUS,
- y: LENGTH * (POINTS.A - t) + 2 * LARGE_RADIUS + SMALL_RADIUS
+ y: LENGTH * (POINTS.A - t) + 2 * LARGE_RADIUS + SMALL_RADIUS,
};
} else if (t < POINTS.C) {
- let t2 = t - POINTS.B;
- let multiplier = LENGTH / LARGE_RADIUS;
+ const t2 = t - POINTS.B;
+ const multiplier = LENGTH / LARGE_RADIUS;
return {
x: 2 * SMALL_RADIUS + LARGE_RADIUS - LARGE_RADIUS * Math.cos(t2 * multiplier),
- y: LARGE_RADIUS - LARGE_RADIUS * Math.sin(t2 * multiplier)
+ y: LARGE_RADIUS - LARGE_RADIUS * Math.sin(t2 * multiplier),
};
} else {
return {
x: LENGTH * (POINTS.C - t) + 2 * SMALL_RADIUS + LARGE_RADIUS,
- y: 2 * LARGE_RADIUS
+ y: 2 * LARGE_RADIUS,
};
}
}
@@ -73,7 +73,7 @@ export default class Loader extends React.Component {
if (!this.mounted) {
return;
}
- let delta = new Date() - this.mountTime;
+ const delta = new Date() - this.mountTime;
let t = (delta / DURATION) % 1;
let pos = getPosition(t);
let style = this.dot0Ref.current.style;
diff --git a/src/components/LoaderContainer/LoaderContainer.example.js b/src/components/LoaderContainer/LoaderContainer.example.js
index 2d1a111855..c6037dbd0e 100644
--- a/src/components/LoaderContainer/LoaderContainer.example.js
+++ b/src/components/LoaderContainer/LoaderContainer.example.js
@@ -5,91 +5,95 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import LoaderContainer from 'components/LoaderContainer/LoaderContainer.react';
+import LoaderContainer from 'components/LoaderContainer/LoaderContainer.react';
import PushAudiencesSelector from 'components/PushAudiencesSelector/PushAudiencesSelector.react';
-import React from 'react';
+import React from 'react';
export const component = LoaderContainer;
class PushAudiencesSelectorDemo extends React.Component {
constructor() {
super();
- this.state = { current: '1'};
+ this.state = { current: '1' };
}
handleChange(value) {
- this.setState({ current: value});
+ this.setState({ current: value });
}
render() {
return (
-
+
-
- {children}
-
-
- {(hideAnimation || !loading) ? null :
}
+ {children}
+
+ {hideAnimation || !loading ? null :
);
@@ -30,9 +34,7 @@ LoaderContainer.propTypes = {
loading: PropTypes.bool.describe(
'State of the loader (true displays loader, false hides loader).'
),
- hideAnimation: PropTypes.bool.describe(
- 'Whether to hide the animation within the container.'
- ),
+ hideAnimation: PropTypes.bool.describe('Whether to hide the animation within the container.'),
solid: PropTypes.bool.describe(
'Optional flag to have an solid background. Defaults to true. If false an opacity of 70% is used.'
),
diff --git a/src/components/LoaderDots/LoaderDots.example.js b/src/components/LoaderDots/LoaderDots.example.js
index 012ac2ea63..777514615f 100644
--- a/src/components/LoaderDots/LoaderDots.example.js
+++ b/src/components/LoaderDots/LoaderDots.example.js
@@ -5,7 +5,7 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import LoaderDots from 'components/LoaderDots/LoaderDots.react';
export const component = LoaderDots;
@@ -17,6 +17,6 @@ export const demos = [
- )
- }
+ ),
+ },
];
diff --git a/src/components/LoaderDots/LoaderDots.react.js b/src/components/LoaderDots/LoaderDots.react.js
index 47ef036e7b..9605c67bc4 100644
--- a/src/components/LoaderDots/LoaderDots.react.js
+++ b/src/components/LoaderDots/LoaderDots.react.js
@@ -5,7 +5,7 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import styles from 'components/LoaderDots/LoaderDots.scss';
export default class LoaderDots extends React.Component {
diff --git a/src/components/LogView/LogView.example.js b/src/components/LogView/LogView.example.js
index 8125b57835..cf0c04845f 100644
--- a/src/components/LogView/LogView.example.js
+++ b/src/components/LogView/LogView.example.js
@@ -14,7 +14,7 @@ export const component = LogView;
export const demos = [
{
render() {
- let text1 = `I2015-09-30T00:25:26.950Z]Deployed v1 with triggers:
+ const text1 = `I2015-09-30T00:25:26.950Z]Deployed v1 with triggers:
Item:
before_save
after_save
@@ -26,21 +26,21 @@ export const demos = [
anotherFunction
WillError`;
- let text2 = `I2015-09-30T00:35:42.336Z]v2 before_save triggered for Item:
+ const text2 = `I2015-09-30T00:35:42.336Z]v2 before_save triggered for Item:
Input: {"original":null,"update":{"name":"i"}}
Result: Update changed to {"name":"i","count":12}`;
- let text3 = `I2015-10-06T22:39:11.029Z]v4 Ran cloud function doSomething with:
+ const text3 = `I2015-10-06T22:39:11.029Z]v4 Ran cloud function doSomething with:
Input: {}
Result: {}`;
return (
-
-
-
+
);
- }
- }
+ },
+ },
];
diff --git a/src/components/LogView/LogView.react.js b/src/components/LogView/LogView.react.js
index f50a9cbc69..da84974122 100644
--- a/src/components/LogView/LogView.react.js
+++ b/src/components/LogView/LogView.react.js
@@ -5,15 +5,11 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
-import styles from 'components/LogView/LogView.scss';
+import React from 'react';
+import styles from 'components/LogView/LogView.scss';
-let LogView = (props) => {
- return (
-
- {props.children}
-
- );
-}
+const LogView = props => {
+ return
{props.children} ;
+};
export default LogView;
diff --git a/src/components/LogView/LogViewEntry.example.js b/src/components/LogView/LogViewEntry.example.js
index 2d63b015de..3743839bb2 100644
--- a/src/components/LogView/LogViewEntry.example.js
+++ b/src/components/LogView/LogViewEntry.example.js
@@ -12,8 +12,6 @@ export const component = LogViewEntry;
export const demos = [
{
- render: () => (
-
- )
- }
+ render: () =>
,
+ },
];
diff --git a/src/components/LogView/LogViewEntry.react.js b/src/components/LogView/LogViewEntry.react.js
index c434f2ec84..70a3888786 100644
--- a/src/components/LogView/LogViewEntry.react.js
+++ b/src/components/LogView/LogViewEntry.react.js
@@ -6,41 +6,38 @@
* the root directory of this source tree.
*/
import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import styles from 'components/LogView/LogViewEntry.scss';
+import React from 'react';
+import styles from 'components/LogView/LogViewEntry.scss';
const TIMESTAMP_REGEX = [
'([a-z])', // Any Single Word Character (Not Whitespace) 1
'((?:2|1)\\d{3}(?:-|\\/)(?:(?:0[1-9])|(?:1[0-2]))(?:-|\\/)(?:(?:0[1-9])|(?:[1-2][0-9])|(?:3[0-1]))(?:T|\\s)(?:(?:[0-1][0-9])|(?:2[0-3])):(?:[0-5][0-9]):(?:[0-5][0-9]))', // Time Stamp 1
- '(\\.)', // Any Single Character 1
- '(\\d)', // Any Single Digit 1
- '(\\d)', // Any Single Digit 2
- '(\\d)', // Any Single Digit 3
- '([a-z])', // Any Single Word Character (Not Whitespace) 2
- '(\\])' // Any Single Character 2
+ '(\\.)', // Any Single Character 1
+ '(\\d)', // Any Single Digit 1
+ '(\\d)', // Any Single Digit 2
+ '(\\d)', // Any Single Digit 3
+ '([a-z])', // Any Single Word Character (Not Whitespace) 2
+ '(\\])', // Any Single Character 2
].join('');
-let isError = (str) => str[0] === 'E';
+const isError = str => str[0] === 'E';
-let getLogEntryInfo = (str) => {
- let re = getTimestampRegex();
- let timeStampStr = str.match(re) ? str.match(re)[0] : '';
+const getLogEntryInfo = str => {
+ const re = getTimestampRegex();
+ const timeStampStr = str.match(re) ? str.match(re)[0] : '';
return {
time: timeStampStr,
- content: str.replace(timeStampStr,''),
- error: isError(str)
+ content: str.replace(timeStampStr, ''),
+ error: isError(str),
};
-}
+};
//example timestamp: 'I2015-09-30T00:36:45.522Z]'
-let getTimestampRegex = () => new RegExp(TIMESTAMP_REGEX,['i']);
+const getTimestampRegex = () => new RegExp(TIMESTAMP_REGEX, ['i']);
-let LogViewEntry = ({
- text = '',
- timestamp,
-}) => {
- let logEntryInfo = getLogEntryInfo(text);
- let classes = [styles.entry, logEntryInfo.error ? styles.error: ''];
+const LogViewEntry = ({ text = '', timestamp }) => {
+ const logEntryInfo = getLogEntryInfo(text);
+ const classes = [styles.entry, logEntryInfo.error ? styles.error : ''];
return (
{/* handle the timestamp format used by both Parse Server and Parse.com */}
@@ -48,12 +45,10 @@ let LogViewEntry = ({
{logEntryInfo.content}
);
-}
+};
export default LogViewEntry;
LogViewEntry.propTypes = {
- text: PropTypes.string.isRequired.describe(
- 'The content of the log view entry.'
- ),
+ text: PropTypes.string.isRequired.describe('The content of the log view entry.'),
};
diff --git a/src/components/LoginForm/LoginForm.example.js b/src/components/LoginForm/LoginForm.example.js
index 010dee5832..7747ee04be 100644
--- a/src/components/LoginForm/LoginForm.example.js
+++ b/src/components/LoginForm/LoginForm.example.js
@@ -6,8 +6,8 @@
* the root directory of this source tree.
*/
import LoginForm from 'components/LoginForm/LoginForm.react';
-import LoginRow from 'components/LoginRow/LoginRow.react';
-import React from 'react';
+import LoginRow from 'components/LoginRow/LoginRow.react';
+import React from 'react';
export const component = LoginForm;
@@ -16,49 +16,48 @@ export const demos = [
render() {
return (
-
-
+
);
- }
- }, {
+ },
+ },
+ {
render() {
return (
}
- action='Sign Up'>
-
} />
+ action="Sign Up"
+ >
} />
+ label="Email"
+ input={
}
+ />
} />
+ label="Password"
+ input={
+
+ }
+ />
} />
+ label="App Name"
+ input={
}
+ />
+
} />
);
diff --git a/src/components/LoginRow/LoginRow.react.js b/src/components/LoginRow/LoginRow.react.js
index 69215b29d1..c6568f7d83 100644
--- a/src/components/LoginRow/LoginRow.react.js
+++ b/src/components/LoginRow/LoginRow.react.js
@@ -5,10 +5,10 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import styles from 'components/LoginRow/LoginRow.scss';
-let LoginRow = ({ label, input, extra }) => (
+const LoginRow = ({ label, input, extra }) => (
{label}
{extra ? {extra}
: null}
diff --git a/src/components/Markdown/Markdown.example.js b/src/components/Markdown/Markdown.example.js
index 2684e8cfa7..5155e6009d 100644
--- a/src/components/Markdown/Markdown.example.js
+++ b/src/components/Markdown/Markdown.example.js
@@ -5,7 +5,7 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import Markdown from 'components/Markdown/Markdown.react';
export const component = Markdown;
@@ -14,7 +14,7 @@ export const demos = [
{
name: 'Demo name',
render: () => {
- let content = `
+ const content = `
**bold** *italic*
~~This code is a mistake~~
@@ -35,10 +35,7 @@ export const demos = [
some code block
\`\`\`
`;
- return (
-
{})}/>
- {this.state.showModal ? {})}
- onCancel={this.setState.bind(this, { showModal: false }, () => {})}>
- {this.props.children}
- : null}
+ value="Show demo modal"
+ onClick={this.setState.bind(this, { showModal: true }, () => {})}
+ />
+ {this.state.showModal ? (
+ {})}
+ onCancel={this.setState.bind(this, { showModal: false }, () => {})}
+ >
+ {this.props.children}
+
+ ) : null}
);
}
@@ -39,14 +43,22 @@ class ModalDemo extends React.Component {
export const demos = [
{
name: 'Modal with children',
- render: () => Children ,
+ render: () => (
+
+ Children
+
+ ),
},
{
name: 'Modal without children',
- render: () => {null} ,
+ render: () => {null} ,
},
{
name: 'Modal without children, but with buttons on right anyway.',
- render: () => {null} ,
+ render: () => (
+
+ {null}
+
+ ),
},
];
diff --git a/src/components/Modal/Modal.react.js b/src/components/Modal/Modal.react.js
index 9a267b6203..9ffe0e47ab 100644
--- a/src/components/Modal/Modal.react.js
+++ b/src/components/Modal/Modal.react.js
@@ -5,23 +5,23 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import Button from 'components/Button/Button.react';
-import Field from 'components/Field/Field.react';
-import Icon from 'components/Icon/Icon.react';
-import Popover from 'components/Popover/Popover.react';
-import Position from 'lib/Position';
-import React from 'react';
-import PropTypes from 'lib/PropTypes';
-import styles from 'components/Modal/Modal.scss';
+import Button from 'components/Button/Button.react';
+import Field from 'components/Field/Field.react';
+import Icon from 'components/Icon/Icon.react';
+import Popover from 'components/Popover/Popover.react';
+import Position from 'lib/Position';
+import React from 'react';
+import PropTypes from 'lib/PropTypes';
+import styles from 'components/Modal/Modal.scss';
-let origin = new Position(0, 0);
-let buttonColors = {
+const origin = new Position(0, 0);
+const buttonColors = {
danger: 'red',
info: 'blue',
- valid: 'green'
+ valid: 'green',
};
-let Modal = (({
+const Modal = ({
type = Modal.Types.INFO,
icon,
iconSize = 36,
@@ -45,7 +45,7 @@ let Modal = (({
buttonsInCenter = React.Children.count(children) === 0,
}) => {
if (children) {
- children = React.Children.map(children, (c) => {
+ children = React.Children.map(children, c => {
if (c && c.type === Field && c.props.label) {
return React.cloneElement(c, { ...c.props, labelPadding: 24 });
}
@@ -53,67 +53,80 @@ let Modal = (({
});
}
- let footer = customFooter || (
-
- {showCancel &&
}
- { showContinue &&
}
+ const footer = customFooter || (
+
+ {showCancel &&
);
- let wrappedChildren = textModal ?
- {children}
-
: children;
+ const wrappedChildren = textModal ?
{children}
: children;
return (
-
+
-
{title}
+
+ {title}
+
{subtitle}
- {icon ?
+ {icon ? (
-
: null}
+
+
+ ) : null}
{wrappedChildren}
{footer}
.'),
cancelText: PropTypes.string.describe('String for the cancel button. Defaults to "Cancel".'),
onCancel: PropTypes.func.describe('Called when the cancel button is clicked.'),
- canCancel: PropTypes.bool.describe('Determines whether this modal can be cancelled. Defaults to true. Useful to prevent the user from attempting to cancel a modal when a related request is in-flight.'),
- showCancel: PropTypes.bool.describe('Determines whether to show the cancel button. Defaults to true.'),
+ canCancel: PropTypes.bool.describe(
+ 'Determines whether this modal can be cancelled. Defaults to true. Useful to prevent the user from attempting to cancel a modal when a related request is in-flight.'
+ ),
+ showCancel: PropTypes.bool.describe(
+ 'Determines whether to show the cancel button. Defaults to true.'
+ ),
confirmText: PropTypes.string.describe('String for the confirm button. Defaults to "Okay".'),
onConfirm: PropTypes.func.describe('Called when the confirm button is clicked.'),
disabled: PropTypes.bool.describe('If true, the confirm button will be disabled.'),
@@ -121,7 +134,9 @@ Modal.propTypes = {
customFooter: PropTypes.node.describe('used to fill any custom footer use case.'),
textModal: PropTypes.bool.describe('Used for modals that contain only text to pad the text.'),
width: PropTypes.number.describe('custom width of modal.'),
- buttonsInCenter: PropTypes.bool.describe('If true, the buttons will appear in the center of the modal, instead of to the right. By default, the buttons appear on the right unless the modal contains no children, in which case they appear in the center.'),
+ buttonsInCenter: PropTypes.bool.describe(
+ 'If true, the buttons will appear in the center of the modal, instead of to the right. By default, the buttons appear on the right unless the modal contains no children, in which case they appear in the center.'
+ ),
};
export default Modal;
diff --git a/src/components/MoneyInput/MoneyInput.example.js b/src/components/MoneyInput/MoneyInput.example.js
index f353703e82..bef7221e54 100644
--- a/src/components/MoneyInput/MoneyInput.example.js
+++ b/src/components/MoneyInput/MoneyInput.example.js
@@ -5,10 +5,10 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
-import Field from 'components/Field/Field.react';
-import Fieldset from 'components/Fieldset/Fieldset.react';
-import Label from 'components/Label/Label.react';
+import React from 'react';
+import Field from 'components/Field/Field.react';
+import Fieldset from 'components/Fieldset/Fieldset.react';
+import Label from 'components/Label/Label.react';
import MoneyInput from 'components/MoneyInput/MoneyInput.react';
class Wrapper extends React.Component {
@@ -25,13 +25,15 @@ export const demos = [
{}} />} />
+ label={ {}} />}
+ />
{}} />} />
+ label={ {}} />}
+ />
- )
- }
+ ),
+ },
];
diff --git a/src/components/MoneyInput/MoneyInput.react.js b/src/components/MoneyInput/MoneyInput.react.js
index 0c3e948475..b8586db4c0 100644
--- a/src/components/MoneyInput/MoneyInput.react.js
+++ b/src/components/MoneyInput/MoneyInput.react.js
@@ -9,28 +9,26 @@ import PropTypes from 'lib/PropTypes';
import React from 'react';
import styles from 'components/MoneyInput/MoneyInput.scss';
-let MoneyInput = ({ enabled = true, value, onChange = () => {}}) => {
- return
- Red
- Orange
- Yellow
- Green
- Blue
- Purple
- Rainbow
+
+ Red
+ Orange
+ Yellow
+ Green
+ Blue
+ Purple
+ Rainbow
);
}
@@ -41,20 +46,22 @@ class MultiSelectDemo extends React.Component {
export const demos = [
{
render: () => (
-
+
- )
+ ),
},
{
render: () => (
-
+
- )
+ ),
},
];
diff --git a/src/components/MultiSelect/MultiSelect.react.js b/src/components/MultiSelect/MultiSelect.react.js
index 2e3dcb1758..67e37a2c85 100644
--- a/src/components/MultiSelect/MultiSelect.react.js
+++ b/src/components/MultiSelect/MultiSelect.react.js
@@ -5,39 +5,39 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import hasAncestor from 'lib/hasAncestor';
-import Popover from 'components/Popover/Popover.react';
-import Position from 'lib/Position';
-import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import stringList from 'lib/stringList';
-import styles from 'components/MultiSelect/MultiSelect.scss';
-import Chip from 'components/Chip/Chip.react';
+import hasAncestor from 'lib/hasAncestor';
+import Popover from 'components/Popover/Popover.react';
+import Position from 'lib/Position';
+import PropTypes from 'lib/PropTypes';
+import React from 'react';
+import stringList from 'lib/stringList';
+import styles from 'components/MultiSelect/MultiSelect.scss';
+import Chip from 'components/Chip/Chip.react';
export default class MultiSelect extends React.Component {
constructor() {
super();
this.state = {
open: false,
- position: null
- }
+ position: null,
+ };
this.popoverRef = React.createRef();
this.dropdownRef = React.createRef();
this.handleScroll = () => {
const node = this.dropdownRef.current;
- let newPosition = this.props.fixed ? Position.inWindow(node) : Position.inDocument(node);
+ const newPosition = this.props.fixed ? Position.inWindow(node) : Position.inDocument(node);
newPosition.y += node.offsetHeight;
- if(this.popoverRef.current){
+ if (this.popoverRef.current) {
this.popoverRef.current.setPosition(newPosition);
}
- }
+ };
}
componentDidMount() {
- window.addEventListener('scroll', this.handleScroll)
+ window.addEventListener('scroll', this.handleScroll);
}
- componentWillUnmount(){
- window.removeEventListener('scroll', this.handleScroll)
+ componentWillUnmount() {
+ window.removeEventListener('scroll', this.handleScroll);
}
componentWillReceiveProps() {
@@ -47,7 +47,7 @@ export default class MultiSelect extends React.Component {
setPosition() {
const node = this.dropdownRef.current;
- let newPosition = this.props.fixed ? Position.inWindow(node) : Position.inDocument(node);
+ const newPosition = this.props.fixed ? Position.inWindow(node) : Position.inDocument(node);
newPosition.y += node.offsetHeight; //Move dropdown down below field
//The forceUpdate call is necessary in case the size of the field changes size during the current render.
this.setState({ position: newPosition }, () => this.forceUpdate());
@@ -61,7 +61,7 @@ export default class MultiSelect extends React.Component {
close(e) {
if (!hasAncestor(e.target, this.dropdownRef.current)) {
//In the case where the user clicks on the node, toggle() will handle closing the dropdown.
- this.setState({open: false});
+ this.setState({ open: false });
}
}
@@ -78,30 +78,35 @@ export default class MultiSelect extends React.Component {
render() {
let popover = null;
if (this.state.open) {
- let width = this.dropdownRef.current.clientWidth;
-
- let classes = [styles.menu];
- if (this.props.dense){
+ const width = this.dropdownRef.current.clientWidth;
+
+ const classes = [styles.menu];
+ if (this.props.dense) {
classes.push(styles.dense);
}
popover = (
-
+
- {React.Children.map(this.props.children, c => React.cloneElement(c,
- {
- ...c.props,
- checked: this.props.value.indexOf(c.props.value) > -1,
- onClick: c.props.disabled? null : this.select.bind(this, c.props.value)
- }
- ))}
+ {React.Children.map(this.props.children, c =>
+ React.cloneElement(c, {
+ ...c.props,
+ checked: this.props.value.indexOf(c.props.value) > -1,
+ onClick: c.props.disabled ? null : this.select.bind(this, c.props.value),
+ })
+ )}
- )
+ );
}
- let selection = [];
- let classes = [styles.current];
+ const selection = [];
+ const classes = [styles.current];
React.Children.forEach(this.props.children, c => {
if (this.props.value.indexOf(c.props.value) > -1) {
selection.push(c.props.children);
@@ -111,45 +116,48 @@ export default class MultiSelect extends React.Component {
if (this.props.width) {
dropdownStyle = {
width: this.props.width,
- float: 'left'
+ float: 'left',
};
}
- let dropDownClasses = [styles.dropdown];
- if (this.props.dense){
+ const dropDownClasses = [styles.dropdown];
+ if (this.props.dense) {
dropDownClasses.push(styles.dense);
}
let content = null;
- if (selection.length === 0 && this.props.placeHolder){
+ if (selection.length === 0 && this.props.placeHolder) {
content = this.props.placeHolder;
classes.push(styles.placeholder);
} else {
-
- content = this.props.chips?
- selection.map((child,index) => {
- let item;
- if(Array.isArray(this.props.value)){
- item = this.props.value[index]
- }
- return (
- {
- if(removed) this.select(removed);
- }}>
- {child}
- )}
- ) :
- stringList(selection, this.props.endDelineator);
+ content = this.props.chips
+ ? selection.map((child, index) => {
+ let item;
+ if (Array.isArray(this.props.value)) {
+ item = this.props.value[index];
+ }
+ return (
+ {
+ if (removed) {
+ this.select(removed);
+ }
+ }}
+ >
+ {child}
+
+ );
+ })
+ : stringList(selection, this.props.endDelineator);
}
return (
- {content}
+ {content}
{popover}
@@ -170,13 +178,7 @@ MultiSelect.propTypes = {
placeHolder: PropTypes.string.describe(
'Option placeholder text to be displayed when no options are chosen.'
),
- endDelineator: PropTypes.string.describe(
- 'End delineator to separate last selected option.'
- ),
- dense: PropTypes.bool.describe(
- 'Mini variant - less height'
- ),
- chips: PropTypes.bool.describe(
- 'Display chip for every selected item'
- ),
-}
+ endDelineator: PropTypes.string.describe('End delineator to separate last selected option.'),
+ dense: PropTypes.bool.describe('Mini variant - less height'),
+ chips: PropTypes.bool.describe('Display chip for every selected item'),
+};
diff --git a/src/components/MultiSelect/MultiSelectOption.react.js b/src/components/MultiSelect/MultiSelectOption.react.js
index 3e8bf8ad08..595a61a229 100644
--- a/src/components/MultiSelect/MultiSelectOption.react.js
+++ b/src/components/MultiSelect/MultiSelectOption.react.js
@@ -5,36 +5,27 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import Icon from 'components/Icon/Icon.react';
-import React from 'react';
-import styles from 'components/MultiSelect/MultiSelect.scss';
+import Icon from 'components/Icon/Icon.react';
+import React from 'react';
+import styles from 'components/MultiSelect/MultiSelect.scss';
+
+const MultiSelectOption = ({ checked, children, dense, disabled, ...other }) => {
+ const classes = [styles.option, disabled ? styles.disabled : undefined];
-let MultiSelectOption = ({ checked, children, dense, disabled, ...other }) => {
-
- const classes = [styles.option,
- disabled? styles.disabled: undefined
- ];
-
const icon = checked ? (
-
) : (
- )
-
- return (
+ );
-
- {children}
- {disabled ?
-);
-}
+ return (
+
+ {children}
+ {disabled ?
+ );
+};
export default MultiSelectOption;
diff --git a/src/components/NumberEditor/NumberEditor.react.js b/src/components/NumberEditor/NumberEditor.react.js
index 0a63275272..50b8771f57 100644
--- a/src/components/NumberEditor/NumberEditor.react.js
+++ b/src/components/NumberEditor/NumberEditor.react.js
@@ -14,7 +14,7 @@ export default class NumberEditor extends React.Component {
super();
this.state = {
- value: props.value || 0
+ value: props.value || 0,
};
this.checkExternalClick = this.checkExternalClick.bind(this);
@@ -35,7 +35,7 @@ export default class NumberEditor extends React.Component {
checkExternalClick(e) {
if (e.target !== this.inputRef.current) {
- this.commitValue()
+ this.commitValue();
}
}
@@ -58,16 +58,15 @@ export default class NumberEditor extends React.Component {
}
render() {
- let onChange = (e) => {
- let value = e.target.value;
- this.setState({ value: validateNumeric(value) ? value : this.state.value });
+ const onChange = e => {
+ const value = e.target.value;
+ this.setState({
+ value: validateNumeric(value) ? value : this.state.value,
+ });
};
return (
-
);
}
diff --git a/src/components/PasswordStrength/PasswordStrength.react.js b/src/components/PasswordStrength/PasswordStrength.react.js
index e15bffdc1c..34e2fcd9de 100644
--- a/src/components/PasswordStrength/PasswordStrength.react.js
+++ b/src/components/PasswordStrength/PasswordStrength.react.js
@@ -5,21 +5,33 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import styles from 'components/PasswordStrength/PasswordStrength.scss';
const tips = [
'It should be at least 8 characters',
'Consider making your password stronger',
- 'Looks great'
+ 'Looks great',
];
-let PasswordStrength = ({ strength }) => {
+const PasswordStrength = ({ strength }) => {
return (
-
-
+
+
{strength > -1 ?
{tips[strength]}
: null}
);
diff --git a/src/components/PermissionsDialog/PermissionsDialog.example.js b/src/components/PermissionsDialog/PermissionsDialog.example.js
index 5f21a96bdb..c80d9833c8 100644
--- a/src/components/PermissionsDialog/PermissionsDialog.example.js
+++ b/src/components/PermissionsDialog/PermissionsDialog.example.js
@@ -6,20 +6,25 @@
* the root directory of this source tree.
*/
// import Parse from 'parse';
-import React from 'react';
+import React from 'react';
import PermissionsDialog from 'components/PermissionsDialog/PermissionsDialog.react';
-import Button from 'components/Button/Button.react';
+import Button from 'components/Button/Button.react';
export const component = PermissionsDialog;
function validateSimple(text) {
-
if (text.startsWith('u')) {
- return Promise.resolve({ entry: { id: text, get:() => 'demouser' } , type:'user'});
+ return Promise.resolve({
+ entry: { id: text, get: () => 'demouser' },
+ type: 'user',
+ });
}
if (text.startsWith('role:')) {
const roleName = text.substring(5);
- return Promise.resolve({ entry: {id:`1d0f${roleName}`, getName:()=>roleName}, type:'role' });
+ return Promise.resolve({
+ entry: { id: `1d0f${roleName}`, getName: () => roleName },
+ type: 'role',
+ });
}
if (text.startsWith('ptr')) {
return Promise.resolve({ entry: text, type: 'pointer' });
@@ -28,15 +33,21 @@ function validateSimple(text) {
}
function validateAdvanced(text) {
- if (text==='*') {
- return Promise.resolve({ entry: '*' , type:'public'});
+ if (text === '*') {
+ return Promise.resolve({ entry: '*', type: 'public' });
}
if (text.startsWith('u')) {
- return Promise.resolve({ entry: { id: text, get:() => 'demouser' } , type:'user'});
+ return Promise.resolve({
+ entry: { id: text, get: () => 'demouser' },
+ type: 'user',
+ });
}
if (text.startsWith('role:')) {
const roleName = text.substring(5);
- return Promise.resolve({ entry: {id:`1d0f${roleName}`, getName:()=>roleName}, type:'role' });
+ return Promise.resolve({
+ entry: { id: `1d0f${roleName}`, getName: () => roleName },
+ type: 'role',
+ });
}
if (text.startsWith('ptr')) {
return Promise.resolve({ entry: text, type: 'pointer' });
@@ -45,24 +56,19 @@ function validateAdvanced(text) {
}
const columns = {
- 'email': { type: 'String',},
- 'password':{ type: 'String', },
- 'ptr_owner':{ type: 'Pointer', targetClass:'_User'},
- 'nickname':{ type: 'String',},
- 'ptr_followers':{ type: 'Array', },
- 'ptr_friends':{ type: 'Array', }
+ email: { type: 'String' },
+ password: { type: 'String' },
+ ptr_owner: { type: 'Pointer', targetClass: '_User' },
+ nickname: { type: 'String' },
+ ptr_followers: { type: 'Array' },
+ ptr_friends: { type: 'Array' },
};
-const userPointers = [
- 'ptr_followers',
- 'ptr_owner',
- 'ptr_friends'
-]
-
+const userPointers = ['ptr_followers', 'ptr_owner', 'ptr_friends'];
class DialogDemo extends React.Component {
constructor() {
- super()
+ super();
this.state = {
showSimple: false,
showAdvanced: false,
@@ -73,28 +79,35 @@ class DialogDemo extends React.Component {
return (
{
this.setState({
- showSimple: true
+ showSimple: true,
});
- }}/>
+ }}
+ />
{
this.setState({
- showAdvanced: true
+ showAdvanced: true,
});
- }}/>
- {this.state.showSimple ?
+ }}
+ />
+ {this.state.showSimple ? (
Learn more about ACLs and app security}
+ confirmText="Save ACL"
+ details={Learn more about ACLs and app security }
permissions={{
- read: {'*': true, 'role:admin': true, 'role:user': true, 'us3r1d':true},
- write: {'*': true, 'role:admin':true },
+ read: {
+ '*': true,
+ 'role:admin': true,
+ 'role:user': true,
+ us3r1d: true,
+ },
+ write: { '*': true, 'role:admin': true },
}}
validateEntry={validateSimple}
onCancel={() => {
@@ -103,25 +116,30 @@ class DialogDemo extends React.Component {
});
}}
coolumns={columns}
- onConfirm={(perms) => {
+ onConfirm={perms => {
console.log(perms);
- }} /> : null}
- {this.state.showAdvanced ?
+ }}
+ />
+ ) : null}
+ {this.state.showAdvanced ? (
Learn more about CLPs and app security}
+ confirmText="Save CLP"
+ details={Learn more about CLPs and app security }
permissions={{
- get: {'*': false, 'us3r1d': true, 'role:admin': true,},
- find: {'*': true, 'us3r1d': true, 'role:admin': true, },
- create: {'*': true, },
- update: {'*': true, pointerFields: ['user']},
- delete: {'*': true, },
- addField: {'*': true, 'requiresAuthentication': true},
+ get: { '*': false, us3r1d: true, 'role:admin': true },
+ find: { '*': true, us3r1d: true, 'role:admin': true },
+ create: { '*': true },
+ update: { '*': true, pointerFields: ['user'] },
+ delete: { '*': true },
+ addField: { '*': true, requiresAuthentication: true },
readUserFields: ['ptr_owner', 'ptr_followers', 'ptr_friends'],
writeUserFields: ['ptr_owner'],
- protectedFields: {'*': ['password', 'email'], 'userField:ptr_owner': []}
+ protectedFields: {
+ '*': ['password', 'email'],
+ 'userField:ptr_owner': [],
+ },
}}
columns={columns}
validateEntry={validateAdvanced}
@@ -131,9 +149,11 @@ class DialogDemo extends React.Component {
showAdvanced: false,
});
}}
- onConfirm={(perms) => {
+ onConfirm={perms => {
console.log(perms);
- }} /> : null}
+ }}
+ />
+ ) : null}
);
}
@@ -142,7 +162,7 @@ class DialogDemo extends React.Component {
export const demos = [
{
render() {
- return (
+
@@ -205,9 +203,7 @@ function renderAdvancedCheckboxes(rowId, perms, advanced, onChange) {
label="Write"
checked={writeChecked}
indeterminate={indeterminateWrite}
- onChange={value =>
- onChange(rowId, ['create', 'update', 'delete'], value)
- }
+ onChange={value => onChange(rowId, ['create', 'update', 'delete'], value)}
/>
) : (
+ ,
];
}
function renderSimpleCheckboxes(rowId, perms, onChange) {
// Public state
- let allowPublicRead = perms.get('read').get('*');
- let allowPublicWrite = perms.get('write').get('*');
+ const allowPublicRead = perms.get('read').get('*');
+ const allowPublicWrite = perms.get('write').get('*');
// requireAuthentication state
- let onlyAuthRead = perms.get('read').get('requiresAuthentication');
- let onlyAuthWrite = perms.get('write').get('requiresAuthentication');
-
- let isAuthRow = rowId === 'requiresAuthentication';
- let isPublicRow = rowId === '*';
-
- let showReadCheckbox =
- isAuthRow ||
- (!onlyAuthRead && isPublicRow) ||
- (!onlyAuthRead && !allowPublicRead);
- let showWriteCheckbox =
- isAuthRow ||
- (!onlyAuthWrite && isPublicRow) ||
- (!onlyAuthWrite && !allowPublicWrite);
-
- let readChecked =
- perms.get('read').get(rowId) || allowPublicRead || isAuthRow;
- let writeChecked =
- perms.get('write').get(rowId) || allowPublicWrite || isAuthRow;
+ const onlyAuthRead = perms.get('read').get('requiresAuthentication');
+ const onlyAuthWrite = perms.get('write').get('requiresAuthentication');
+
+ const isAuthRow = rowId === 'requiresAuthentication';
+ const isPublicRow = rowId === '*';
+
+ const showReadCheckbox =
+ isAuthRow || (!onlyAuthRead && isPublicRow) || (!onlyAuthRead && !allowPublicRead);
+ const showWriteCheckbox =
+ isAuthRow || (!onlyAuthWrite && isPublicRow) || (!onlyAuthWrite && !allowPublicWrite);
+
+ const readChecked = perms.get('read').get(rowId) || allowPublicRead || isAuthRow;
+ const writeChecked = perms.get('write').get(rowId) || allowPublicWrite || isAuthRow;
return [
@@ -275,108 +265,94 @@ function renderSimpleCheckboxes(rowId, perms, onChange) {
) : (
+
,
];
}
-function renderPointerCheckboxes(
- rowId,
- perms,
- pointerPerms,
- advanced,
- onChange
-) {
- let get = resolvePointerPermission(perms, pointerPerms, rowId, 'get');
- let find = resolvePointerPermission(perms, pointerPerms, rowId, 'find');
- let count = resolvePointerPermission(perms, pointerPerms, rowId, 'count');
- let create = resolvePointerPermission(perms, pointerPerms, rowId, 'create');
- let update = resolvePointerPermission(perms, pointerPerms, rowId, 'update');
- let del = resolvePointerPermission(perms, pointerPerms, rowId, 'delete');
- let addField = resolvePointerPermission(
- perms,
- pointerPerms,
- rowId,
- 'addField'
- );
+function renderPointerCheckboxes(rowId, perms, pointerPerms, advanced, onChange) {
+ const get = resolvePointerPermission(perms, pointerPerms, rowId, 'get');
+ const find = resolvePointerPermission(perms, pointerPerms, rowId, 'find');
+ const count = resolvePointerPermission(perms, pointerPerms, rowId, 'count');
+ const create = resolvePointerPermission(perms, pointerPerms, rowId, 'create');
+ const update = resolvePointerPermission(perms, pointerPerms, rowId, 'update');
+ const del = resolvePointerPermission(perms, pointerPerms, rowId, 'delete');
+ const addField = resolvePointerPermission(perms, pointerPerms, rowId, 'addField');
// whether this field is listed under readUserFields[]
- let readUserFields = pointerPerms.get('read');
+ const readUserFields = pointerPerms.get('read');
// or writeUserFields[]
- let writeUserFields = pointerPerms.get('write');
+ const writeUserFields = pointerPerms.get('write');
- let read = {
+ const read = {
checked: readUserFields || (get.checked && find.checked && count.checked),
- editable: true
+ editable: true,
};
- let write = {
+ const write = {
checked:
- writeUserFields ||
- (create.checked && update.checked && del.checked && addField.checked),
- editable: true
+ writeUserFields || (create.checked && update.checked && del.checked && addField.checked),
+ editable: true,
};
- let cols = [];
+ const cols = [];
if (!advanced) {
// simple view mode
// detect whether public access is enabled
//for read
- let publicReadGrouped = perms.getIn(['read', '*']);
- let publicReadGranular =
- perms.getIn(['get', '*']) &&
- perms.getIn(['find', '*']) &&
- perms.getIn(['count', '*']);
+ const publicReadGrouped = perms.getIn(['read', '*']);
+ const publicReadGranular =
+ perms.getIn(['get', '*']) && perms.getIn(['find', '*']) && perms.getIn(['count', '*']);
// for write
- let publicWriteGrouped = perms.getIn(['write', '*']);
- let publicWriteGranular =
+ const publicWriteGrouped = perms.getIn(['write', '*']);
+ const publicWriteGranular =
perms.getIn(['create', '*']) &&
perms.getIn(['update', '*']) &&
perms.getIn(['delete', '*']) &&
perms.getIn(['addField', '*']);
// assume public access is on when it is set either for group or for each operation
- let publicRead = publicReadGrouped || publicReadGranular;
- let publicWrite = publicWriteGrouped || publicWriteGranular;
+ const publicRead = publicReadGrouped || publicReadGranular;
+ const publicWrite = publicWriteGrouped || publicWriteGranular;
// --------------
// detect whether auth is required
// for read
- let readAuthGroup = perms.getIn(['read', 'requiresAuthentication']);
- let readAuthSeparate =
+ const readAuthGroup = perms.getIn(['read', 'requiresAuthentication']);
+ const readAuthSeparate =
perms.getIn(['get', 'requiresAuthentication']) &&
perms.getIn(['find', 'requiresAuthentication']) &&
perms.getIn(['count', 'requiresAuthentication']);
// for write
- let writeAuthGroup = perms.getIn(['write', 'requiresAuthentication']);
- let writeAuthSeparate =
+ const writeAuthGroup = perms.getIn(['write', 'requiresAuthentication']);
+ const writeAuthSeparate =
perms.getIn(['create', 'requiresAuthentication']) &&
perms.getIn(['update', 'requiresAuthentication']) &&
perms.getIn(['delete', 'requiresAuthentication']) &&
perms.getIn(['addField', 'requiresAuthentication']);
// assume auth is required when it's set either for group or for each operation
- let readAuth = readAuthGroup || readAuthSeparate;
- let writeAuth = writeAuthGroup || writeAuthSeparate;
+ const readAuth = readAuthGroup || readAuthSeparate;
+ const writeAuth = writeAuthGroup || writeAuthSeparate;
// when all ops have public access and none requiure auth, show non-editable checked icon
- let readForceChecked = publicRead && !readAuth;
- let writeForceChecked = publicWrite && !writeAuth;
+ const readForceChecked = publicRead && !readAuth;
+ const writeForceChecked = publicWrite && !writeAuth;
// --------------
// detect whether to show indeterminate checkbox (dash icon)
// in simple view indeterminate happens when:
// {read/write}UserFields is not set and
// not all permissions have same value !(all checked || all unchecked)
- let indeterminateRead =
+ const indeterminateRead =
!readUserFields &&
[get, find, count].some(s => s.checked) &&
[get, find, count].some(s => !s.checked);
- let indeterminateWrite =
+ const indeterminateWrite =
!writeUserFields &&
[create, update, del, addField].some(s => s.checked) &&
[create, update, del, addField].some(s => !s.checked);
@@ -542,20 +518,16 @@ export default class PermissionsDialog extends React.Component {
this.observer = new IntersectionObserver(callback, {
root: this.refTable.current,
rootMargin: intersectionMargin,
- threshold: [0.92]
+ threshold: [0.92],
});
this.suggestInput = this.suggestInput.bind(this);
this.buildLabel = this.buildLabel.bind(this);
- let uniqueKeys = [...(advanced ? ['requiresAuthentication'] : []), '*'];
- let perms = {};
- for (let k in permissions) {
- if (
- k !== 'readUserFields' &&
- k !== 'writeUserFields' &&
- k !== 'protectedFields'
- ) {
+ const uniqueKeys = [...(advanced ? ['requiresAuthentication'] : []), '*'];
+ const perms = {};
+ for (const k in permissions) {
+ if (k !== 'readUserFields' && k !== 'writeUserFields' && k !== 'protectedFields') {
Object.keys(permissions[k]).forEach(key => {
if (key === 'pointerFields') {
//pointerFields is not a regular entity; processed later
@@ -576,9 +548,9 @@ export default class PermissionsDialog extends React.Component {
}
}
- let pointerPermsSubset = {
+ const pointerPermsSubset = {
read: permissions.readUserFields || [],
- write: permissions.writeUserFields || []
+ write: permissions.writeUserFields || [],
};
if (advanced) {
@@ -593,26 +565,27 @@ export default class PermissionsDialog extends React.Component {
// The double check is necessary because the permissions object seems to be empty when accessing the CLP section
// if the class was recently created.
- (pointerPermsSubset.get = permissions.get && permissions.get.pointerFields || []),
- (pointerPermsSubset.find = permissions.find && permissions.find.pointerFields || []),
- (pointerPermsSubset.count = permissions.count && permissions.count.pointerFields || []),
- (pointerPermsSubset.create = permissions.create && permissions.create.pointerFields || []),
- (pointerPermsSubset.update = permissions.update && permissions.update.pointerFields || []),
- (pointerPermsSubset.delete = permissions.delete && permissions.delete.pointerFields || []),
- (pointerPermsSubset.addField = permissions.addField && permissions.addField.pointerFields || []);
+ (pointerPermsSubset.get = (permissions.get && permissions.get.pointerFields) || []),
+ (pointerPermsSubset.find = (permissions.find && permissions.find.pointerFields) || []),
+ (pointerPermsSubset.count = (permissions.count && permissions.count.pointerFields) || []),
+ (pointerPermsSubset.create =
+ (permissions.create && permissions.create.pointerFields) || []),
+ (pointerPermsSubset.update =
+ (permissions.update && permissions.update.pointerFields) || []),
+ (pointerPermsSubset.delete =
+ (permissions.delete && permissions.delete.pointerFields) || []),
+ (pointerPermsSubset.addField =
+ (permissions.addField && permissions.addField.pointerFields) || []);
}
- let pointerPerms = {};
+ const pointerPerms = {};
// form an object where each pointer-field name holds operations it has access to
// e.g. { [field]: { read: true, create: true}, [field2]: {read: true,} ...}
for (const action in pointerPermsSubset) {
// action holds array of field names
for (const field of pointerPermsSubset[action]) {
- pointerPerms[field] = Object.assign(
- { [action]: true },
- pointerPerms[field]
- );
+ pointerPerms[field] = Object.assign({ [action]: true }, pointerPerms[field]);
}
}
// preserve protectedFields
@@ -632,7 +605,7 @@ export default class PermissionsDialog extends React.Component {
columns,
newEntry: '',
entryError: null,
- newKeys: [] // Order for new entries
+ newKeys: [], // Order for new entries
};
}
@@ -649,33 +622,27 @@ export default class PermissionsDialog extends React.Component {
for (const { entry, type } of rows) {
let key;
- let value = {};
+ const value = {};
- if(typeof entry === 'string') {
+ if (typeof entry === 'string') {
key = type + ':' + entry;
value[type] = {
name: entry,
- id: undefined
+ id: undefined,
};
- }
-
- else if (type === 'user') {
+ } else if (type === 'user') {
key = entry.id;
value[type] = {
name: entry.get('username'),
- id: entry.id
+ id: entry.id,
};
- }
-
- else if (type === 'role') {
+ } else if (type === 'role') {
key = 'role:' + entry.getName();
value[type] = {
name: entry.getName(),
- id: entry.id
+ id: entry.id,
};
- }
-
- else if (type === 'pointer') {
+ } else if (type === 'pointer') {
key = entry;
value[type] = true;
}
@@ -763,18 +730,15 @@ export default class PermissionsDialog extends React.Component {
if (this.props.validateEntry) {
this.props.validateEntry(input).then(
({ type, entry }) => {
- let next = { [type]: entry };
+ const next = { [type]: entry };
if (next.public) {
return this.setState({
- entryError: 'You already have a row for Public'
+ entryError: 'You already have a row for Public',
});
}
let id, name, key, newEntry;
-
- let nextKeys;
- let nextEntryTypes;
let nextPerms = this.state.perms;
let nextPointerPerms = this.state.pointerPerms;
@@ -789,33 +753,30 @@ export default class PermissionsDialog extends React.Component {
newEntry = { [type]: true };
} else {
return this.setState({
- entryError: 'Unsupported entry'
+ entryError: 'Unsupported entry',
});
}
// check if key already in list
- if (
- this.state.keys.indexOf(key) > -1 ||
- this.state.newKeys.indexOf(key) > -1
- ) {
+ if (this.state.keys.indexOf(key) > -1 || this.state.newKeys.indexOf(key) > -1) {
return this.setState({
- entryError: 'You already have a row for this object'
+ entryError: 'You already have a row for this object',
});
}
// create new permissions
if (next.pointer) {
if (this.props.advanced) {
- nextPointerPerms = nextPointerPerms.setIn([entry, 'get'], true)
- nextPointerPerms = nextPointerPerms.setIn([entry, 'find'], true)
- nextPointerPerms = nextPointerPerms.setIn([entry, 'count'], true)
- nextPointerPerms = nextPointerPerms.setIn([entry, 'create'], true)
- nextPointerPerms = nextPointerPerms.setIn([entry, 'update'], true)
- nextPointerPerms = nextPointerPerms.setIn([entry, 'delete'], true)
- nextPointerPerms = nextPointerPerms.setIn([entry, 'addField'], true)
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'get'], true);
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'find'], true);
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'count'], true);
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'create'], true);
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'update'], true);
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'delete'], true);
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'addField'], true);
} else {
- nextPointerPerms = nextPointerPerms.setIn([entry, 'read'], true)
- nextPointerPerms = nextPointerPerms.setIn([entry, 'write'], true)
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'read'], true);
+ nextPointerPerms = nextPointerPerms.setIn([entry, 'write'], true);
}
} else {
if (this.props.advanced) {
@@ -832,8 +793,8 @@ export default class PermissionsDialog extends React.Component {
}
}
- nextKeys = this.state.newKeys.concat([key]);
- nextEntryTypes = this.state.entryTypes.set(key, newEntry);
+ const nextKeys = this.state.newKeys.concat([key]);
+ const nextEntryTypes = this.state.entryTypes.set(key, newEntry);
return this.setState(
{
@@ -842,7 +803,7 @@ export default class PermissionsDialog extends React.Component {
newKeys: nextKeys,
entryTypes: nextEntryTypes,
newEntry: '',
- entryError: null
+ entryError: null,
},
() => this.refEntry.current.resetInput()
);
@@ -850,12 +811,11 @@ export default class PermissionsDialog extends React.Component {
() => {
if (this.props.advanced && this.props.enablePointerPermissions) {
this.setState({
- entryError:
- 'Role, User or field not found. Enter a valid id, name or column'
+ entryError: 'Role, User or field not found. Enter a valid id, name or column',
});
} else {
this.setState({
- entryError: 'Role or User not found. Enter a valid name or id.'
+ entryError: 'Role or User not found. Enter a valid name or id.',
});
}
}
@@ -867,20 +827,20 @@ export default class PermissionsDialog extends React.Component {
if (isPointer) {
let index = this.state.pointers.indexOf(key);
if (index > -1) {
- let filtered = this.state.pointers.concat([]);
+ const filtered = this.state.pointers.concat([]);
filtered.splice(index, 1);
return this.setState({
pointers: filtered,
- pointerPerms: this.state.pointerPerms.delete(key)
+ pointerPerms: this.state.pointerPerms.delete(key),
});
}
index = this.state.newKeys.indexOf(key);
if (index > -1) {
- let filtered = this.state.newKeys.concat([]);
+ const filtered = this.state.newKeys.concat([]);
filtered.splice(index, 1);
return this.setState({
newKeys: filtered,
- pointerPerms: this.state.pointerPerms.delete(key)
+ pointerPerms: this.state.pointerPerms.delete(key),
});
}
} else {
@@ -899,38 +859,30 @@ export default class PermissionsDialog extends React.Component {
newPerms = newPerms.deleteIn(['read', key]).deleteIn(['write', key]);
}
if (index > -1) {
- let filtered = this.state.keys.concat([]);
+ const filtered = this.state.keys.concat([]);
filtered.splice(index, 1);
return this.setState({
keys: filtered,
- perms: newPerms
+ perms: newPerms,
});
}
index = this.state.newKeys.indexOf(key);
if (index > -1) {
- let filtered = this.state.newKeys.concat([]);
+ const filtered = this.state.newKeys.concat([]);
filtered.splice(index, 1);
return this.setState({
newKeys: filtered,
- perms: newPerms
+ perms: newPerms,
});
}
}
}
outputPerms() {
- let output = {};
+ const output = {};
let fields = ['read', 'write'];
if (this.props.advanced) {
- fields = [
- 'get',
- 'find',
- 'count',
- 'create',
- 'update',
- 'delete',
- 'addField'
- ];
+ fields = ['get', 'find', 'count', 'create', 'update', 'delete', 'addField'];
}
fields.forEach(field => {
@@ -939,9 +891,9 @@ export default class PermissionsDialog extends React.Component {
if (k === 'pointerFields') {
return;
}
- if (k === 'requiresAuthentication' && !v){
+ if (k === 'requiresAuthentication' && !v) {
// only acceppt requiresAuthentication with true
- return
+ return;
}
if (v) {
output[field][k] = true;
@@ -949,8 +901,8 @@ export default class PermissionsDialog extends React.Component {
});
});
- let readUserFields = [];
- let writeUserFields = [];
+ const readUserFields = [];
+ const writeUserFields = [];
this.state.pointerPerms.forEach((perms, key) => {
if (perms.get('read')) {
readUserFields.push(key);
@@ -984,20 +936,24 @@ export default class PermissionsDialog extends React.Component {
}
urlForKey(key) {
- let isRole = key.startsWith('role:')
- let className = isRole ? '_Role' : '_User';
- let field = isRole ? 'name' : 'objectId';
- let value = isRole ? key.replace('role:', '') : key
- let filters = JSON.stringify([{
- field,
- constraint: 'eq',
- compareTo: value
- }]);
- return generatePath(this.context, `browser/${className}?filters=${encodeURIComponent(filters)}`);
+ const isRole = key.startsWith('role:');
+ const className = isRole ? '_Role' : '_User';
+ const field = isRole ? 'name' : 'objectId';
+ const value = isRole ? key.replace('role:', '') : key;
+ const filters = JSON.stringify([
+ {
+ field,
+ constraint: 'eq',
+ compareTo: value,
+ },
+ ]);
+ return generatePath(
+ this.context,
+ `browser/${className}?filters=${encodeURIComponent(filters)}`
+ );
}
renderRow(key, columns, types) {
-
const pill = text => (
{key}
+
+ {key}
+
+
+ );
if (type.user) {
label = (
@@ -1016,13 +978,21 @@ export default class PermissionsDialog extends React.Component {
- {type.user.id}
+
+ {type.user.id}
+
{pill('User')}
- username: {type.user.name ?? 'user not found'}
+ username:{' '}
+
+ {type.user.name ?? 'user not found'}
+
);
@@ -1032,19 +1002,27 @@ export default class PermissionsDialog extends React.Component {
{'role:'}
- {type.role.name}
+
+ {type.role.name}
+
- id: {type.role.id ?? 'role not found'}
+ id:{' '}
+
+ {type.role.id ?? 'role not found'}
+
);
} else if (pointer) {
// get class info from schema
- let { type, targetClass } = columns[key];
+ const { type, targetClass } = columns[key];
- let pillText = type + (targetClass ? `<${targetClass}>` : '');
+ const pillText = type + (targetClass ? `<${targetClass}>` : '');
label = (
@@ -1075,21 +1053,14 @@ export default class PermissionsDialog extends React.Component {
this.toggleField.bind(this)
);
} else {
- content = renderSimpleCheckboxes(
- key,
- this.state.perms,
- this.toggleField.bind(this)
- );
+ content = renderSimpleCheckboxes(key, this.state.perms, this.toggleField.bind(this));
}
}
let trash = null;
if (!this.state.transitioning) {
trash = (
-
+
@@ -1116,11 +1087,7 @@ export default class PermissionsDialog extends React.Component {
this.toggleField.bind(this)
);
}
- return renderSimpleCheckboxes(
- '*',
- this.state.perms,
- this.toggleField.bind(this)
- );
+ return renderSimpleCheckboxes('*', this.state.perms, this.toggleField.bind(this));
}
renderAuthenticatedCheckboxes() {
@@ -1161,17 +1128,17 @@ export default class PermissionsDialog extends React.Component {
const allKeys = [...keys, ...newKeys];
// "userPointer:" fields that were not added yet
- let unusedPointerFields = userPointers.filter(
+ const unusedPointerFields = userPointers.filter(
ptr => !allKeys.includes(ptr) && ptr.includes(input)
);
// roles
- let prefixes = ['role:']
+ const prefixes = ['role:']
.filter(o => o.startsWith(input) && o.length > input.length) // filter matching input
.concat(...unusedPointerFields);
// pointer fields that are not applied yet;
- let availableFields = [];
+ const availableFields = [];
availableFields.push(...prefixes);
@@ -1179,7 +1146,7 @@ export default class PermissionsDialog extends React.Component {
}
render() {
- let classes = [styles.dialog, baseStyles.unselectable];
+ const classes = [styles.dialog, baseStyles.unselectable];
// for 3-column CLP dialog
if (this.props.advanced) {
@@ -1198,13 +1165,7 @@ export default class PermissionsDialog extends React.Component {
}
return (
-
+
{this.props.title}
@@ -1213,16 +1174,14 @@ export default class PermissionsDialog extends React.Component {
className={styles.settings}
onClick={() =>
this.setState(({ showLevels }) => ({
- showLevels: !showLevels
+ showLevels: !showLevels,
}))
}
>
) : null}
- {this.props.advanced && this.state.showLevels ? (
-
- ) : null}
+ {this.props.advanced && this.state.showLevels ?
: null}
@@ -1238,10 +1197,7 @@ export default class PermissionsDialog extends React.Component {
return;
}
this.setState({ level, transitioning: true });
- setTimeout(
- () => this.setState({ transitioning: false }),
- 700
- );
+ setTimeout(() => this.setState({ transitioning: false }), 700);
}}
/>
@@ -1253,9 +1209,7 @@ export default class PermissionsDialog extends React.Component {
@@ -1276,13 +1230,9 @@ export default class PermissionsDialog extends React.Component {
{this.state.keys
.slice(this.props.advanced ? 2 : 1)
- .map(key =>
- this.renderRow(key, this.state.columns, this.state.entryTypes)
- )}
+ .map(key => this.renderRow(key, this.state.columns, this.state.entryTypes))}
{this.props.advanced
- ? this.state.pointers.map(pointer =>
- this.renderRow(pointer, this.state.columns)
- )
+ ? this.state.pointers.map(pointer => this.renderRow(pointer, this.state.columns))
: null}
{this.state.newKeys.map(key =>
this.renderRow(key, this.state.columns, this.state.entryTypes)
@@ -1295,11 +1245,11 @@ export default class PermissionsDialog extends React.Component {
inputStyle={{
width: '290px',
padding: '0 6px',
- margin: '10px 0px 0px 20px'
+ margin: '10px 0px 0px 20px',
}}
suggestionsStyle={{
margin: '-6px 0px 0px 21px',
- width: '290px'
+ width: '290px',
}}
onChange={input => {
this.setState({ newEntry: input, entryError: undefined });
@@ -1309,13 +1259,13 @@ export default class PermissionsDialog extends React.Component {
buildSuggestions={input => this.suggestInput(input)}
buildLabel={input => this.buildLabel(input)}
error={this.state.entryError}
- />
+ />
-
+
(
- )
- }
+ ),
+ },
];
diff --git a/src/components/Pill/Pill.react.js b/src/components/Pill/Pill.react.js
index ffef318f39..e8fae726cc 100644
--- a/src/components/Pill/Pill.react.js
+++ b/src/components/Pill/Pill.react.js
@@ -5,20 +5,29 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import styles from 'components/Pill/Pill.scss';
import Icon from 'components/Icon/Icon.react';
//TODO: refactor, may want to move onClick outside or need to make onClick able to handle link/button a11y
-let Pill = ({ value, onClick, fileDownloadLink, followClick = false, shrinkablePill = false }) => (
+const Pill = ({
+ value,
+ onClick,
+ fileDownloadLink,
+ followClick = false,
+ shrinkablePill = false,
+}) => (
- {value}
+
+ {value}
+
{followClick && (
!e.metaKey && onClick()}>
-
+
+
{name}
{subtitle ?
{subtitle}
: null}
{
this.setState({
- show: true
+ show: true,
});
- }}/>
+ }}
+ />
- Learn more about CLPs and app security}
- protectedFields={{
- '*': ['password', 'email'],
- 'userField:ptr_owner': [],
- 'us3r1d': ['password']
- }}
- userPointers={userPointers}
- columns={columns}
- validateEntry={validateDemo}
- onCancel={() => {
- this.setState({
- show: false,
- });
- }}
- onClose={()=>{}}
- onConfirm={(perms) => {
- console.log(perms);
- }} />
+ Learn more about CLPs and app security}
+ protectedFields={{
+ '*': ['password', 'email'],
+ 'userField:ptr_owner': [],
+ us3r1d: ['password'],
+ }}
+ userPointers={userPointers}
+ columns={columns}
+ validateEntry={validateDemo}
+ onCancel={() => {
+ this.setState({
+ show: false,
+ });
+ }}
+ onClose={() => {}}
+ onConfirm={perms => {
+ console.log(perms);
+ }}
+ />
);
}
@@ -103,7 +103,7 @@ class ProtectedFieldsDemo extends React.Component {
export const demos = [
{
render() {
- return (
@@ -233,17 +227,17 @@ export default class ProtectedFieldsDialog extends React.Component {
);
}
- let noAvailableFields = options.length === 0;
+ const noAvailableFields = options.length === 0;
- if(noAvailableFields){
+ if (noAvailableFields) {
options.push(
-
- {'This class has no fields to protect'}
+
+ {'This class has no fields to protect'}
- )
+ );
}
- const placeholder = 'All fields allowed.'+ (noAvailableFields ? '': ' Click to protect.');
+ const placeholder = 'All fields allowed.' + (noAvailableFields ? '' : ' Click to protect.');
return (
@@ -301,8 +295,7 @@ export default class ProtectedFieldsDialog extends React.Component {
- username:{' '}
- {type.user.name}
+ username: {type.user.name}
);
@@ -330,8 +323,8 @@ export default class ProtectedFieldsDialog extends React.Component {
}
if (type.pointer) {
- let { type, targetClass } = columns[key.substring(10)];
- let pillText = type + (targetClass ? `<${targetClass}>` : '');
+ const { type, targetClass } = columns[key.substring(10)];
+ const pillText = type + (targetClass ? `<${targetClass}>` : '');
label = (
@@ -347,20 +340,13 @@ export default class ProtectedFieldsDialog extends React.Component {
let content = null;
if (!this.state.transitioning) {
- content = this.renderSelector(
- key,
- this.state.columns,
- this.state.protectedFields.get(key)
- );
+ content = this.renderSelector(key, this.state.columns, this.state.protectedFields.get(key));
}
let trash = null;
if (!this.state.transitioning) {
trash = (
-
+
@@ -393,21 +379,20 @@ export default class ProtectedFieldsDialog extends React.Component {
const newKeys = this.state.newKeys;
const allKeys = [...keys, ...newKeys];
- let availablePointerFields = userPointers
+ const availablePointerFields = userPointers
.map(ptr => `userField:${ptr}`)
.filter(ptr => !allKeys.includes(ptr) && ptr.includes(input));
- let possiblePrefix = ['role:']
+ const possiblePrefix = ['role:']
.filter(o => o.startsWith(input) && o.length > input.length) // filter matching prefixes
.concat(...availablePointerFields); //
// pointer fields that are not applied yet;
- let availableFields = [];
+ const availableFields = [];
// do not suggest unique rows that are already added;
- let uniqueOptions = ['*', 'authenticated'].filter(
- key =>
- !allKeys.includes(key) && (input.length == 0 || key.startsWith(input))
+ const uniqueOptions = ['*', 'authenticated'].filter(
+ key => !allKeys.includes(key) && (input.length == 0 || key.startsWith(input))
);
availableFields.push(...uniqueOptions);
@@ -421,7 +406,7 @@ export default class ProtectedFieldsDialog extends React.Component {
{
activeSuggestion: 0,
newEntry: e.currentTarget.innerText,
- showSuggestions: false
+ showSuggestions: false,
},
() => {
this.props.onChange(this.state.newEntry);
@@ -443,9 +428,9 @@ export default class ProtectedFieldsDialog extends React.Component {
}
render() {
- let classes = [styles.dialog, baseStyles.unselectable];
+ const classes = [styles.dialog, baseStyles.unselectable];
- let placeholderText = 'Role/User id/name * or authenticated\u2026';
+ const placeholderText = 'Role/User id/name * or authenticated\u2026';
return (
this.onUserInput(e)}
onSubmit={this.checkEntry.bind(this)}
@@ -498,7 +483,7 @@ export default class ProtectedFieldsDialog extends React.Component {
-
+
{
+const setFocus = input => {
if (input !== null) {
input.focus();
}
-}
+};
function compareValue(info, value, onChangeCompareTo) {
- let type = info.type;
+ const type = info.type;
switch (type) {
case null:
return -
;
case 'String':
- return onChangeCompareTo(_value)} ref={setFocus}/>;
+ return (
+ onChangeCompareTo(_value)}
+ ref={setFocus}
+ />
+ );
case 'Pointer':
- return {
- let obj = new Parse.Object(info.targetClass);
- obj.id = _value;
- onChangeCompareTo(Parse._encode(obj.toPointer()));
- }}
- ref={setFocus} />
+ return (
+ {
+ const obj = new Parse.Object(info.targetClass);
+ obj.id = _value;
+ onChangeCompareTo(Parse._encode(obj.toPointer()));
+ }}
+ ref={setFocus}
+ />
+ );
case 'Boolean':
- return onChangeCompareTo(_value === 'True')} >
- {['True', 'False'].map(value => {value} )}
+ return (
+ onChangeCompareTo(_value === 'True')}
+ >
+ {['True', 'False'].map(value => (
+
+ {value}
+
+ ))}
+ );
case 'Number':
- return onChangeCompareTo(validateNumeric(_value) ? Number(_value) : Number(value))} ref={setFocus}/>;
+ return (
+
+ onChangeCompareTo(validateNumeric(_value) ? Number(_value) : Number(value))
+ }
+ ref={setFocus}
+ />
+ );
case 'Date':
- return onChangeCompareTo(Parse._encode(_value))}
- ref={setFocus} />
+ return (
+ onChangeCompareTo(Parse._encode(_value))}
+ ref={setFocus}
+ />
+ );
}
}
export default class InstallationCondition extends React.Component {
constructor() {
- super()
+ super();
this.state = {
open: false,
filters: new List(),
@@ -74,13 +104,13 @@ export default class InstallationCondition extends React.Component {
}
handleChange(type, selection) {
- let stateChange = {};
+ const stateChange = {};
stateChange[type] = selection;
this.setState(stateChange);
}
render() {
- let input = (
+ const input = (
- {this.props.fields.map(function(object, i){
- return {object} ;
+ placeHolder="field"
+ className={styles.conditionDropdown}
+ >
+ {this.props.fields.map(function (object, i) {
+ return (
+
+ {object}
+
+ );
})}
@@ -100,11 +135,16 @@ export default class InstallationCondition extends React.Component {
fixed={true}
hideArrow={true}
value={Constraints[this.props.currentConstraint].name}
- onChange={(c) => this.props.onChangeConstraint(constraintLookup[c])}
- placeHolder='is'
- className={styles.conditionDropdown}>
- {this.props.constraints.map(function(object, i){
- return
{Constraints[object].name} ;
+ onChange={c => this.props.onChangeConstraint(constraintLookup[c])}
+ placeHolder="is"
+ className={styles.conditionDropdown}
+ >
+ {this.props.constraints.map(function (object, i) {
+ return (
+
+ {Constraints[object].name}
+
+ );
})}
@@ -114,11 +154,8 @@ export default class InstallationCondition extends React.Component {
);
- let labelDescription = (
-
+ const labelDescription = (
+
Remove
);
@@ -126,8 +163,9 @@ export default class InstallationCondition extends React.Component {
return (
{
this.setState({
- showModal: true
+ showModal: true,
});
- }}>
-
- {this.state.showModal ?
{
- this.setState({
- showModal: false
- });
- }}/> : null}
+ }}
+ >
+ {this.state.showModal ? (
+ {
+ this.setState({
+ showModal: false,
+ });
+ }}
+ />
+ ) : null}
- )
+ );
}
}
export const demos = [
{
render() {
- return (
+
{PushConstants.DEVICE_MAP[availableDevices[index]]}
);
}
- let platformSelect = (
+ const platformSelect = (
+ placeHolder="Choose some platforms..."
+ >
{options}
);
- let nonEmptyConditions = this.state.filters.size !== 0 ? true : false;
- let audienceSize = PushUtils.formatCountDetails(this.state.audienceSize, this.state.approximate);
- let customFooter = (
+ const nonEmptyConditions = this.state.filters.size !== 0 ? true : false;
+ const audienceSize = PushUtils.formatCountDetails(
+ this.state.audienceSize,
+ this.state.approximate
+ );
+ const customFooter = (
- {AUDIENCE_SIZE_FETCHING_ENABLED ?
-
AUDIENCE SIZE
-
{audienceSize}
-
: null}
-
+ {AUDIENCE_SIZE_FETCHING_ENABLED ? (
+
+
AUDIENCE SIZE
+
{audienceSize}
+
+ customFooter={customFooter}
+ >
-
- {
- this.setState(
- { filters },
- this.fetchAudienceSize.bind(this)
- );
- }
- }
- renderRow={(props) => {
+ this.setState({ filters }, this.fetchAudienceSize.bind(this));
+ }}
+ renderRow={props =>
-
-
+
+
{futureUseSegment}
0) || (this.state.errorMessage && this.state.errorMessage.length > 0))}
- color='red' >
+ show={Boolean(
+ (this.props.errorMessage && this.props.errorMessage.length > 0) ||
+ (this.state.errorMessage && this.state.errorMessage.length > 0)
+ )}
+ color="red"
+ >
{this.props.errorMessage || this.state.errorMessage}
@@ -274,9 +319,7 @@ export default class PushAudienceDialog extends React.Component {
}
PushAudienceDialog.propTypes = {
- editMode: PropTypes.bool.describe(
- 'Flag if true to be edit mode of dialog.'
- ),
+ editMode: PropTypes.bool.describe('Flag if true to be edit mode of dialog.'),
primaryAction: PropTypes.func.isRequired.describe(
'Primary callback triggered when submitting modal.'
),
@@ -296,4 +339,3 @@ PushAudienceDialog.propTypes = {
'List of all availableDevices devices for push notifications.'
),
};
-
diff --git a/src/components/PushAudiencesSelector/PushAudiencesBaseRow.react.js b/src/components/PushAudiencesSelector/PushAudiencesBaseRow.react.js
index 5b00f94080..dd6d5138e6 100644
--- a/src/components/PushAudiencesSelector/PushAudiencesBaseRow.react.js
+++ b/src/components/PushAudiencesSelector/PushAudiencesBaseRow.react.js
@@ -5,9 +5,9 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import { NEW_SEGMENT_ID } from 'dashboard/Push/PushConstants';
-import { CurrentApp } from 'context/currentApp';
+import { CurrentApp } from 'context/currentApp';
export default class PushAudiencesBaseRow extends React.Component {
static contextType = CurrentApp;
@@ -19,32 +19,36 @@ export default class PushAudiencesBaseRow extends React.Component {
expandedView: false,
approximate: false,
isNewSegment: false,
- }
+ };
}
handleDetailsToggle(query, schema, evt) {
evt.preventDefault();
this.setState({
- expandedView : !this.state.expandedView
+ expandedView: !this.state.expandedView,
});
}
fetchPushSubscriberCount(context) {
- if (!context) { //so we don't break the PIG demo
+ if (!context) {
+ //so we don't break the PIG demo
return;
}
- let query = this.props.id === NEW_SEGMENT_ID ? this.props.query : null;
+ const query = this.props.id === NEW_SEGMENT_ID ? this.props.query : null;
//Added count fetch logic directly to component
- let {xhr, promise} = context.fetchPushSubscriberCount(this.props.id, query);
+ const { xhr, promise } = context.fetchPushSubscriberCount(this.props.id, query);
this.xhrHandle = xhr;
- promise.then(({ approximate, count }) => {
- this.setState({ approximate, count });
- }, () => {});
+ promise.then(
+ ({ approximate, count }) => {
+ this.setState({ approximate, count });
+ },
+ () => {}
+ );
}
componentWillMount() {
- this.fetchPushSubscriberCount.call(this,this.context);
+ this.fetchPushSubscriberCount.call(this, this.context);
if (this.props.id == NEW_SEGMENT_ID) {
this.setState({ isNewSegment: true });
}
diff --git a/src/components/PushAudiencesSelector/PushAudiencesOption.example.js b/src/components/PushAudiencesSelector/PushAudiencesOption.example.js
index 64441cd7a5..96fdc6db4f 100644
--- a/src/components/PushAudiencesSelector/PushAudiencesOption.example.js
+++ b/src/components/PushAudiencesSelector/PushAudiencesOption.example.js
@@ -10,24 +10,24 @@ import PushAudiencesOption from 'components/PushAudiencesSelector/PushAudiencesO
export const component = PushAudiencesOption;
-let mockData = {
+const mockData = {
id: '1',
name: 'Everyone',
- createdAt: new Date(1444757195683)
+ createdAt: new Date(1444757195683),
};
export const demos = [
{
- render() {
- return (
-
- {PushUtils.shortInfoBuilder(this.props.query, this.props.schema)}
-
- );
+ const detailsView = this.state.expandedView ? (
+ PushUtils.largeInfoBuilder(this.props.query, this.props.schema, styles)
+ ) : (
+
+ {PushUtils.shortInfoBuilder(this.props.query, this.props.schema)}
+
+ );
return (
-
+
+ disabled={this.props.isDisabled}
+ />
- { this.props.icon ?
+ {this.props.icon ? (
-
:
- null }
-
{this.props.name}
+
+
+ ) : null}
+
+ {this.props.name}
+
{detailsView}
- {!this.state.isNewSegment ?
+ {!this.state.isNewSegment ? (
+ type="button"
+ className={[
+ styles.moreDetails,
+ !this.props.query ? styles.hideMoreDetails : '',
+ ].join(' ')}
+ onClick={this.handleDetailsToggle.bind(this, this.props.query, this.props.schema)}
+ >
{this.state.expandedView ? 'less details' : 'more details'}
- :
+
+ ) : (
+ })}
+ >
{'Edit audience'}
- }
+ )}
- {PushUtils.formatCountDetails(this.state.count, this.state.approximate)}
-
: null}
- {AUDIENCE_CREATED_DATE_ENABLED ?
- {yearMonthDayFormatter(this.props.createdAt)}
-
: null}
+ {AUDIENCE_SIZE_FETCHING_ENABLED ? (
+
+ {PushUtils.formatCountDetails(this.state.count, this.state.approximate)}
+
+ ) : null}
+ {AUDIENCE_CREATED_DATE_ENABLED ? (
+
+ {yearMonthDayFormatter(this.props.createdAt)}
+
+ ) : null}
);
}
}
PushAudiencesOption.propTypes = {
- id: PropTypes.string.isRequired.describe(
- 'The id of the push audience option.'
- ),
- name: PropTypes.string.describe(
- 'The name of the push audience option.'
- ),
- createdAt: PropTypes.instanceOf(Date).describe(
- 'The size of the push audience option.'
- ),
+ id: PropTypes.string.isRequired.describe('The id of the push audience option.'),
+ name: PropTypes.string.describe('The name of the push audience option.'),
+ createdAt: PropTypes.instanceOf(Date).describe('The size of the push audience option.'),
query: PropTypes.object.describe(
'Key value pair of installation condition info for the specific audience'
),
- isChecked: PropTypes.bool.describe(
- 'Boolean describing if option is currently selected.'
- ),
- onChange: PropTypes.func.isRequired.describe(
- 'Callback that is executed on option change.'
- ),
- isDisabled: PropTypes.bool.describe(
- 'Boolean describing if option is disabled.'
- ),
- schema: PropTypes.object.describe(
- 'Schema of installation.'
- ),
+ isChecked: PropTypes.bool.describe('Boolean describing if option is currently selected.'),
+ onChange: PropTypes.func.isRequired.describe('Callback that is executed on option change.'),
+ isDisabled: PropTypes.bool.describe('Boolean describing if option is disabled.'),
+ schema: PropTypes.object.describe('Schema of installation.'),
onEditAudience: PropTypes.func.isRequired.describe(
'Callback that is executed on click of edit audience for new segment.'
),
- icon: PropTypes.string.describe(
- 'Specifiying icon for option. Used for "Everyone" case.'
- ),
+ icon: PropTypes.string.describe('Specifiying icon for option. Used for "Everyone" case.'),
};
diff --git a/src/components/PushAudiencesSelector/PushAudiencesSelector.example.js b/src/components/PushAudiencesSelector/PushAudiencesSelector.example.js
index 751aab69a5..93ef471f56 100644
--- a/src/components/PushAudiencesSelector/PushAudiencesSelector.example.js
+++ b/src/components/PushAudiencesSelector/PushAudiencesSelector.example.js
@@ -13,69 +13,71 @@ export const component = PushAudiencesSelector;
class PushAudiencesSelectorDemo extends React.Component {
constructor() {
super();
- this.state = { current: '1'};
+ this.state = { current: '1' };
}
handleChange(value) {
- this.setState({ current: value});
+ this.setState({ current: value });
}
render() {
return (
-
+
- );
- }
- }
+ return
- {audiences.map(({
- icon,
- objectId,
- name,
- query,
- createdAt,
- filters,
- }) => {
- const queryOrFilters = objectId === PushConstants.NEW_SEGMENT_ID ?
- filters.push(fromJS({
- field: 'deviceType',
- constraint: 'containedIn',
- array: query.deviceType['$in'],
- })) :
- query;
- return
onChange(objectId, queryOrFilters)}
- onEditAudience={onEditAudience}
- schema={schema}
- filters={filters} />
- })}
-
+ {audiences.map(({ icon, objectId, name, query, createdAt, filters }) => {
+ const queryOrFilters =
+ objectId === PushConstants.NEW_SEGMENT_ID
+ ? filters.push(
+ fromJS({
+ field: 'deviceType',
+ constraint: 'containedIn',
+ array: query.deviceType['$in'],
+ })
+ )
+ : query;
+ return (
+
onChange(objectId, queryOrFilters)}
+ onEditAudience={onEditAudience}
+ schema={schema}
+ filters={filters}
+ />
+ );
+ })}
+
-
-
-
- Audience
+}) => (
+
+
+
+
Audience
+ {AUDIENCE_SIZE_FETCHING_ENABLED ? (
+
Size
+ ) : null}
+ {AUDIENCE_CREATED_DATE_ENABLED ? (
+
Created
+ ) : null}
- {AUDIENCE_SIZE_FETCHING_ENABLED ?
- Size
-
: null}
- {AUDIENCE_CREATED_DATE_ENABLED ?
- Created
-
: null}
+ {children}
- {children}
-
+);
PushAudiencesSelector.propTypes = {
audiences: PropTypes.object.isRequired.describe('Immutable List of push audiences.'),
- defaultAudience: PropTypes.object.describe('Default push audience option. Not added to the store. Everyone.'),
- newSegment: PropTypes.object.describe('New segment (one time use) push audience option. Not added to the store.'),
+ defaultAudience: PropTypes.object.describe(
+ 'Default push audience option. Not added to the store. Everyone.'
+ ),
+ newSegment: PropTypes.object.describe(
+ 'New segment (one time use) push audience option. Not added to the store.'
+ ),
current: PropTypes.string.isRequired.describe('id of the currently selected row.'),
onChange: PropTypes.func.isRequired.describe('callback to be executed when option has changed'),
schema: PropTypes.object.describe('Schema of installation'),
- onEditAudience: PropTypes.func.isRequired.describe('Callback that is executed on click of edit audience for new segment.'),
+ onEditAudience: PropTypes.func.isRequired.describe(
+ 'Callback that is executed on click of edit audience for new segment.'
+ ),
};
export default PushAudiencesSelector;
diff --git a/src/components/PushCerts/CertsTable.react.js b/src/components/PushCerts/CertsTable.react.js
index db8db279fd..9c1524c6d8 100644
--- a/src/components/PushCerts/CertsTable.react.js
+++ b/src/components/PushCerts/CertsTable.react.js
@@ -11,11 +11,11 @@ import { dateStringUTC } from 'lib/DateUtils';
const MONTH_IN_MS = 1000 * 60 * 60 * 24 * 30;
-let CertsTable = ({ certs, onDelete, uploadPending }) => {
- let tableData = certs.map(c => {
+const CertsTable = ({ certs, onDelete, uploadPending }) => {
+ const tableData = certs.map(c => {
let color = '';
let expiresKeyColor = '';
- let isExpired = new Date(c.expiration) < Date.now();
+ const isExpired = new Date(c.expiration) < Date.now();
if (isExpired) {
expiresKeyColor = color = 'red';
} else if (new Date(c.expiration) - Date.now() < MONTH_IN_MS) {
@@ -37,15 +37,15 @@ let CertsTable = ({ certs, onDelete, uploadPending }) => {
key: isExpired ? 'Expired' : 'Expires',
keyColor: expiresKeyColor,
value: dateStringUTC(new Date(c.expiration)),
- }
- ]
+ },
+ ],
};
- })
+ });
if (uploadPending) {
tableData.unshift({
title: 'Processing File\u2026',
color: 'blue',
- notes:[
+ notes: [
{
key: 'Type',
value: 'Not Sure',
@@ -54,11 +54,11 @@ let CertsTable = ({ certs, onDelete, uploadPending }) => {
{
key: 'Expires',
value: 'TBD',
- }
+ },
],
});
}
- return
+ return
;
};
export default CertsTable;
diff --git a/src/components/PushCerts/PushCerts.example.js b/src/components/PushCerts/PushCerts.example.js
index 5375c06460..2a6876227c 100644
--- a/src/components/PushCerts/PushCerts.example.js
+++ b/src/components/PushCerts/PushCerts.example.js
@@ -7,7 +7,7 @@
*/
import { daysFrom } from 'lib/DateUtils';
import PushCerts from 'components/PushCerts/PushCerts.react';
-import React from 'react';
+import React from 'react';
export const component = PushCerts;
@@ -17,30 +17,49 @@ export const demos = [
{}}
- onDelete={()=>{}} />
- )
- }, {
- render: () => (
- {}}
- onDelete={()=>{}} />
- )
- }, {
+ onUpload={() => {}}
+ onDelete={() => {}}
+ />
+ ),
+ },
+ {
+ render: () => {}} onDelete={() => {}} />,
+ },
+ {
render: () => (
{}}
- onDelete={()=>{}} />
- )
+ error="Something happened, you might want to get that checked out."
+ onUpload={() => {}}
+ onDelete={() => {}}
+ />
+ ),
},
];
diff --git a/src/components/PushCerts/PushCerts.react.js b/src/components/PushCerts/PushCerts.react.js
index fcff72e3fb..685a7ac416 100644
--- a/src/components/PushCerts/PushCerts.react.js
+++ b/src/components/PushCerts/PushCerts.react.js
@@ -6,11 +6,11 @@
* the root directory of this source tree.
*/
import CertsTable from 'components/PushCerts/CertsTable.react';
-import Field from 'components/Field/Field.react';
-import Fieldset from 'components/Fieldset/Fieldset.react';
-import FileInput from 'components/FileInput/FileInput.react';
-import FormNote from 'components/FormNote/FormNote.react';
-import Label from 'components/Label/Label.react';
+import Field from 'components/Field/Field.react';
+import Fieldset from 'components/Fieldset/Fieldset.react';
+import FileInput from 'components/FileInput/FileInput.react';
+import FormNote from 'components/FormNote/FormNote.react';
+import Label from 'components/Label/Label.react';
import PropTypes from 'lib/PropTypes';
import React from 'react';
@@ -21,21 +21,46 @@ class PushCerts extends React.Component {
}
render() {
- let renderTable = this.props.uploadPending || (this.props.certs && this.props.certs.length > 0);
+ const renderTable =
+ this.props.uploadPending || (this.props.certs && this.props.certs.length > 0);
return (
+ legend="Apple Push Certificates"
+ description={'You may upload up to 6 push certificates. This limit cannot be raised.'}
+ >
{this.props.error} : null}
- {renderTable ?
+ label={
+
+ {this.props.error}
+
+ ) : null}
+ {renderTable ? (
);
}
@@ -45,12 +70,8 @@ PushCerts.propTypes = {
certs: PropTypes.arrayOf(PropTypes.object).describe(
'An array of push cert metadata. Each should include the following fields: id, bundle, type, expiresAt'
),
- uploadPending: PropTypes.bool.describe(
- 'A boolean that indicates whether an upload is pending'
- ),
- error: PropTypes.string.describe(
- 'An error message to display in the form'
- ),
+ uploadPending: PropTypes.bool.describe('A boolean that indicates whether an upload is pending'),
+ error: PropTypes.string.describe('An error message to display in the form'),
onUpload: PropTypes.func.isRequired.describe(
'A function called when a cert file is selected. The File is passed to the handler as the only parameter.'
),
diff --git a/src/components/PushExperimentDropdown/PushExperimentDropdown.example.js b/src/components/PushExperimentDropdown/PushExperimentDropdown.example.js
index f36be936e6..a0aaf5e03d 100644
--- a/src/components/PushExperimentDropdown/PushExperimentDropdown.example.js
+++ b/src/components/PushExperimentDropdown/PushExperimentDropdown.example.js
@@ -5,7 +5,7 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import PushExperimentDropdown from 'components/PushExperimentDropdown/PushExperimentDropdown.react';
export const component = PushExperimentDropdown;
@@ -20,11 +20,15 @@ class PushExperimentDropdownDemo extends React.Component {
return (
this.setState({ color })}
- options={[{key: 'Group A (winner)', style: {color: 'green'} }, {key: 'Group B (loser)', style: {color: 'red'}}]} />
+ onChange={color => this.setState({ color })}
+ options={[
+ { key: 'Group A (winner)', style: { color: 'green' } },
+ { key: 'Group B (loser)', style: { color: 'red' } },
+ ]}
+ />
);
}
}
@@ -35,6 +39,6 @@ export const demos = [
- )
+ ),
},
];
diff --git a/src/components/PushExperimentDropdown/PushExperimentDropdown.react.js b/src/components/PushExperimentDropdown/PushExperimentDropdown.react.js
index ec4b14e9d9..7135e10977 100644
--- a/src/components/PushExperimentDropdown/PushExperimentDropdown.react.js
+++ b/src/components/PushExperimentDropdown/PushExperimentDropdown.react.js
@@ -5,17 +5,17 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import Popover from 'components/Popover/Popover.react';
+import Popover from 'components/Popover/Popover.react';
import PropTypes from 'lib/PropTypes';
-import Position from 'lib/Position';
-import React from 'react';
-import styles from 'components/PushExperimentDropdown/PushExperimentDropdown.scss';
+import Position from 'lib/Position';
+import React from 'react';
+import styles from 'components/PushExperimentDropdown/PushExperimentDropdown.scss';
export default class PushExperimentDropdown extends React.Component {
constructor() {
super();
- this.state = {
+ this.state = {
open: false,
selected: false,
};
@@ -29,29 +29,47 @@ export default class PushExperimentDropdown extends React.Component {
select(value, e) {
e.stopPropagation();
- this.setState({
- open: false,
- selected: true,
- }, () => {
- this.props.onChange(value);
- });
+ this.setState(
+ {
+ open: false,
+ selected: true,
+ },
+ () => {
+ this.props.onChange(value);
+ }
+ );
}
render() {
- let widthStyle = { width: this.props.width || 140 };
- let styles = this.styles;
- let color = this.props.color;
+ const widthStyle = { width: this.props.width || 140 };
+ const styles = this.styles;
+ const color = this.props.color;
let content = (
- this.setState({ open: true })}>
-
{!this.state.selected && this.props.placeholder && this.props.value === undefined ? this.props.placeholder : this.props.value}
+
this.setState({ open: true })}
+ >
+
+ {!this.state.selected && this.props.placeholder && this.props.value === undefined
+ ? this.props.placeholder
+ : this.props.value}
+
);
if (this.state.open) {
- let position = Position.inWindow(this.dropdownRef.current);
+ const position = Position.inWindow(this.dropdownRef.current);
content = (
-
this.setState({ open: false })}>
+ this.setState({ open: false })}
+ >
- {this.props.options.map(({key, style}) =>
{key}
)}
+ {this.props.options.map(({ key, style }) => (
+
+ {key}
+
+ ))}
);
@@ -65,25 +83,13 @@ export default class PushExperimentDropdown extends React.Component {
}
PushExperimentDropdown.propTypes = {
- color: PropTypes.string.describe(
- 'Determines the color of the dropdown.'
- ),
- value: PropTypes.string.isRequired.describe(
- 'The current value of the dropdown.'
- ),
+ color: PropTypes.string.describe('Determines the color of the dropdown.'),
+ value: PropTypes.string.isRequired.describe('The current value of the dropdown.'),
options: PropTypes.arrayOf(PropTypes.object).isRequired.describe(
'An array of options available in the dropdown.'
),
- onChange: PropTypes.func.isRequired.describe(
- 'A function called when the dropdown is changed.'
- ),
- width: PropTypes.string.describe(
- 'An optional width override.'
- ),
- placeHolder: PropTypes.string.describe(
- 'Placeholder text used in place of default selection.'
- ),
- styles: PropTypes.object.describe(
- 'Styles override used to provide dropdown with differnt skin.'
- ),
+ onChange: PropTypes.func.isRequired.describe('A function called when the dropdown is changed.'),
+ width: PropTypes.string.describe('An optional width override.'),
+ placeHolder: PropTypes.string.describe('Placeholder text used in place of default selection.'),
+ styles: PropTypes.object.describe('Styles override used to provide dropdown with differnt skin.'),
};
diff --git a/src/components/PushOpenRate/PushOpenRate.example.js b/src/components/PushOpenRate/PushOpenRate.example.js
index 8e1c313094..70b5b624be 100644
--- a/src/components/PushOpenRate/PushOpenRate.example.js
+++ b/src/components/PushOpenRate/PushOpenRate.example.js
@@ -13,62 +13,64 @@ export const component = PushOpenRate;
export const demos = [
{
name: 'Normal Push <10%',
- render: () => (
-
- {isExperiment ?
-
{isWinner ? 'WINNER' : ''}
- : null}
-
- { /*
{rateStr}%
*/ }
+ {isExperiment ? (
+
+ {isWinner ? 'WINNER' : ''}
+
+ ) : null}
+
+ {/*
{rateStr}%
*/}
N/A
Open Rate
- { /*
{numOpened}
*/ }
+ {/*
{numOpened}
*/}
N/A
Push Opens
@@ -84,19 +93,11 @@ let PushOpenRate = ({
export default PushOpenRate;
PushOpenRate.propTypes = {
- numOpened: PropTypes.number.isRequired.describe(
- 'Number of pushes opened.'
- ),
- numSent: PropTypes.number.isRequired.describe(
- 'Number of pushes sent'
- ),
+ numOpened: PropTypes.number.isRequired.describe('Number of pushes opened.'),
+ numSent: PropTypes.number.isRequired.describe('Number of pushes sent'),
color: PropTypes.oneOf(['blue', 'yellow', 'pink']).isRequired.describe(
'Color of text and circle'
),
- isExperiment: PropTypes.bool.describe(
- 'Whether or not this is an A/B test group'
- ),
- isWinner: PropTypes.bool.describe(
- 'Whether or not this group won the A/B test'
- ),
+ isExperiment: PropTypes.bool.describe('Whether or not this is an A/B test group'),
+ isWinner: PropTypes.bool.describe('Whether or not this group won the A/B test'),
};
diff --git a/src/components/PushPreview/PushPreview.react.js b/src/components/PushPreview/PushPreview.react.js
index 8c1c7b90bb..fd66250834 100644
--- a/src/components/PushPreview/PushPreview.react.js
+++ b/src/components/PushPreview/PushPreview.react.js
@@ -5,35 +5,34 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
-import SegmentSelect from 'components/SegmentSelect/SegmentSelect.react';
-import styles from 'components/PushPreview/PushPreview.scss';
-import VisiblePreview from 'components/PushPreview/VisiblePreview.react';
-import { CurrentApp } from 'context/currentApp';
-import {
- getDateMethod,
- MONTHS,
- pad,
- } from 'lib/DateUtils';
+import React from 'react';
+import SegmentSelect from 'components/SegmentSelect/SegmentSelect.react';
+import styles from 'components/PushPreview/PushPreview.scss';
+import VisiblePreview from 'components/PushPreview/VisiblePreview.react';
+import { CurrentApp } from 'context/currentApp';
+import { getDateMethod, MONTHS, pad } from 'lib/DateUtils';
-let Row = ({ label, content }) => (
+const Row = ({ label, content }) => (
);
-let timeString = (time, isLocal) => {
+const timeString = (time, isLocal) => {
if (time && time.constructor === Date) {
return (
- {MONTHS[time[getDateMethod(isLocal, 'getMonth')]()].substr(0, 3) + ' ' + time[getDateMethod(isLocal, 'getDate')]()}
+ {MONTHS[time[getDateMethod(isLocal, 'getMonth')]()].substr(0, 3) +
+ ' ' +
+ time[getDateMethod(isLocal, 'getDate')]()}
at
- {time[getDateMethod(isLocal, 'getHours')]()}:{pad(time[getDateMethod(isLocal, 'getMinutes')]())}
+ {time[getDateMethod(isLocal, 'getHours')]()}:
+ {pad(time[getDateMethod(isLocal, 'getMinutes')]())}
);
}
-}
+};
export default class PushPreview extends React.Component {
static contextType = CurrentApp;
@@ -47,18 +46,19 @@ export default class PushPreview extends React.Component {
}
render() {
- let pushState = this.props.pushState;
- let isExperiment = !!pushState.exp_enable;
+ const pushState = this.props.pushState;
+ const isExperiment = !!pushState.exp_enable;
let audienceName = 'Everyone';
let count = -1;
if (pushState.audience_id === 'new_segment') {
audienceName = 'New Segment';
- } else if (pushState.audience_id !== 'everyone' &&
- this.props.audiences &&
- this.props.audiences.data &&
- this.props.audiences.data.get('audiences')
+ } else if (
+ pushState.audience_id !== 'everyone' &&
+ this.props.audiences &&
+ this.props.audiences.data &&
+ this.props.audiences.data.get('audiences')
) {
- this.props.audiences.data.get('audiences').forEach((a) => {
+ this.props.audiences.data.get('audiences').forEach(a => {
if (a.objectId === pushState.audience_id) {
audienceName = a.name;
count = a.size;
@@ -69,20 +69,20 @@ export default class PushPreview extends React.Component {
let messagePreview = (
Message
-
|
- {pushState.increment_badge ?
|
: null}
+
|
+ {pushState.increment_badge ?
|
: null}
);
if (isExperiment && pushState.exp_type === 'message') {
messagePreview = (
A/B Test
-
|
-
|
-
|
-
|
- {pushState.increment_badge ?
|
: null}
-
|
+
|
+
|
+
|
+
|
+ {pushState.increment_badge ?
|
: null}
+
|
);
}
@@ -97,9 +97,16 @@ export default class PushPreview extends React.Component {
let timePreview = (
);
//TODO: clarify use of UTC or GMT as GMT is time zone and UTC is standard
@@ -107,13 +114,19 @@ export default class PushPreview extends React.Component {
timePreview = (
A/B Test
-
|
-
|
-
|
-
|
-
|
-
|
-
|
+
|
+
|
+
|
+
|
+
|
+
|
+
|
);
}
@@ -123,7 +136,10 @@ export default class PushPreview extends React.Component {
}
let previewTime = new Date();
if (isExperiment && pushState.exp_type === 'time') {
- previewTime = this.state.currentTest === 'Group A' ? pushState.push_time_1_iso : pushState.push_time_2_iso;
+ previewTime =
+ this.state.currentTest === 'Group A'
+ ? pushState.push_time_1_iso
+ : pushState.push_time_2_iso;
} else if (pushState.push_time_type !== 'now') {
previewTime = pushState.push_time_iso;
}
@@ -135,7 +151,8 @@ export default class PushPreview extends React.Component {
message={previewMessage}
time={previewTime || new Date()}
appName={this.context.name}
- fade={isExperiment} />
+ fade={isExperiment}
+ />
);
if (!isExperiment && pushState.data_type === 'json') {
previewContent = null;
@@ -151,27 +168,34 @@ export default class PushPreview extends React.Component {
Audience
-
-1 ? ` (${count} devices)` : '')} />
+ -1 ? ` (${count} devices)` : '')}
+ />
{messagePreview}
{timePreview}
{previewContent ||
No Preview
}
- {previewContent ?
+ {previewContent ? (
this.setState({ currentPreview })} />
-
: null}
- {isExperiment ?
+ onChange={currentPreview => this.setState({ currentPreview })}
+ />
+
+ ) : null}
+ {isExperiment ? (
this.setState({ currentTest })} />
-
: null}
+ onChange={currentTest => this.setState({ currentTest })}
+ />
+
+ ) : null}
{timeString}
;
}
if (type === 'ios') {
- notificationTime = {DateUtils.WEEKDAYS[time[DateUtils.getDateMethod(isLocal, 'getDay')]()].substr(0, 3) + ' ' + timeString}
;
+ notificationTime = (
+
+ {DateUtils.WEEKDAYS[time[DateUtils.getDateMethod(isLocal, 'getDay')]()].substr(0, 3) +
+ ' ' +
+ timeString}
+
+ );
}
return (
diff --git a/src/components/RadioButton/RadioButton.example.js b/src/components/RadioButton/RadioButton.example.js
index 635dc348f9..5a0a863a67 100644
--- a/src/components/RadioButton/RadioButton.example.js
+++ b/src/components/RadioButton/RadioButton.example.js
@@ -14,33 +14,25 @@ export const demos = [
{
name: 'Unchecked State',
render() {
- return (
-
- );
+ return
;
},
},
{
name: 'Checked State',
render() {
- return (
-
- );
- }
+ return
- );
- }
+ return
- );
- }
- }
+ return
-
);
-}
+};
export default RadioButton;
diff --git a/src/components/Range/Range.example.js b/src/components/Range/Range.example.js
index d3508b265b..3281ae747b 100644
--- a/src/components/Range/Range.example.js
+++ b/src/components/Range/Range.example.js
@@ -5,8 +5,8 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import Range from 'components/Range/Range.react';
-import React from 'react';
+import Range from 'components/Range/Range.react';
+import React from 'react';
class RangeWrapper extends React.Component {
constructor() {
@@ -15,7 +15,13 @@ class RangeWrapper extends React.Component {
}
render() {
- return this.setState({ value })} />;
+ return (
+ this.setState({ value })}
+ />
+ );
}
}
@@ -24,35 +30,37 @@ export const component = Range;
export const demos = [
{
name: 'Basic Range',
- render: () => (
- {
- return value + 'req/s & ' + Math.floor((value-10)/20) + ' jobs';
- }} min={0} max={100} width={200} step={10} />
+ {
+ return value + 'req/s & ' + Math.floor((value - 10) / 20) + ' jobs';
+ }}
+ min={0}
+ max={100}
+ width={200}
+ step={10}
+ />
),
},
];
diff --git a/src/components/Range/Range.react.js b/src/components/Range/Range.react.js
index 65b8a9ae26..22464fef4b 100644
--- a/src/components/Range/Range.react.js
+++ b/src/components/Range/Range.react.js
@@ -6,9 +6,9 @@
* the root directory of this source tree.
*/
import fieldStyles from 'components/Field/Field.scss';
-import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import styles from 'components/Range/Range.scss';
+import PropTypes from 'lib/PropTypes';
+import React from 'react';
+import styles from 'components/Range/Range.scss';
const DEFAULT_COLOR = '#fd9539';
@@ -30,15 +30,16 @@ export default class Range extends React.Component {
}
buildGradient() {
- let fillLevel = this.props.value / (this.props.max - this.props.min) * 100 + '%';
- let fillColor = this.props.color || DEFAULT_COLOR;
+ const fillLevel = (this.props.value / (this.props.max - this.props.min)) * 100 + '%';
+ const fillColor = this.props.color || DEFAULT_COLOR;
return `linear-gradient(90deg, ${fillColor}, ${fillColor} ${fillLevel}, #e0e0ea ${fillLevel}, #e0e0ea)`;
}
render() {
let trackerStyle = {};
if (this.state.width) {
- let left = this.props.value / (this.props.max - this.props.min) * (this.state.width - 24) + 11;
+ const left =
+ (this.props.value / (this.props.max - this.props.min)) * (this.state.width - 24) + 11;
trackerStyle = { left };
}
if (this.props.color) {
@@ -46,19 +47,18 @@ export default class Range extends React.Component {
trackerStyle.borderTopColor = this.props.color;
}
let tracker = null;
- let unitsText = (typeof this.props.units === 'function') ?
- this.props.units(this.props.value) :
- this.props.value + (this.props.units || '');
+ const unitsText =
+ typeof this.props.units === 'function'
+ ? this.props.units(this.props.value)
+ : this.props.value + (this.props.units || '');
if (this.props.track && this.state.width) {
tracker = (
-
+
{unitsText}
);
}
- let wrapperStyle = {};
+ const wrapperStyle = {};
if (this.props.width) {
wrapperStyle.width = this.props.width;
}
@@ -66,40 +66,32 @@ export default class Range extends React.Component {
+ className={[styles.range, fieldStyles.input].join(' ')}
+ >
{tracker}
);
}
}
Range.propTypes = {
- min: PropTypes.number.isRequired.describe(
- 'The minimum value on the slider'
- ),
- max: PropTypes.number.isRequired.describe(
- 'The maximum value on the slider'
- ),
+ min: PropTypes.number.isRequired.describe('The minimum value on the slider'),
+ max: PropTypes.number.isRequired.describe('The maximum value on the slider'),
step: PropTypes.number.describe(
'Adjusts the granularity of the slider. If this is set, the slider will only move in increments of this size.'
),
- value: PropTypes.number.isRequired.describe(
- 'The current value of this controlled input'
- ),
- onChange: PropTypes.func.isRequired.describe(
- 'A function called whenever the input is adjusted'
- ),
- width: PropTypes.number.describe(
- 'The physical width, in pixels, of the slider track'
- ),
+ value: PropTypes.number.isRequired.describe('The current value of this controlled input'),
+ onChange: PropTypes.func.isRequired.describe('A function called whenever the input is adjusted'),
+ width: PropTypes.number.describe('The physical width, in pixels, of the slider track'),
units: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).describe(
'A string displayed as after the number in the tracker, or a function that accepts the value of the tracker, and returns the string to be displayed in the tracker.'
),
diff --git a/src/components/ReleaseInfo/ReleaseInfo.js b/src/components/ReleaseInfo/ReleaseInfo.js
index 235be9733e..3fe74edebe 100644
--- a/src/components/ReleaseInfo/ReleaseInfo.js
+++ b/src/components/ReleaseInfo/ReleaseInfo.js
@@ -7,7 +7,7 @@
*/
import howLongAgo from 'lib/howLongAgo';
-let ReleaseInfo = ({ release }) => {
+const ReleaseInfo = ({ release }) => {
if (!release) {
return '';
}
@@ -18,7 +18,7 @@ let ReleaseInfo = ({ release }) => {
' \u2022 ',
howLongAgo(release.deployedAt),
' \u2022 SDK Version: ',
- release.parseVersion
+ release.parseVersion,
].join('');
};
diff --git a/src/components/SaveButton/SaveButton.example.js b/src/components/SaveButton/SaveButton.example.js
index f7e55af774..84289f885d 100644
--- a/src/components/SaveButton/SaveButton.example.js
+++ b/src/components/SaveButton/SaveButton.example.js
@@ -5,7 +5,7 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import SaveButton from 'components/SaveButton/SaveButton.react';
export const component = SaveButton;
@@ -23,9 +23,10 @@ class SaveDemo extends React.Component {
handleClick() {
this.setState({ saveState: SaveButton.States.SAVING });
setTimeout(() => {
- let next = this.state.nextState === SaveButton.States.SUCCEEDED ?
- SaveButton.States.FAILED :
- SaveButton.States.SUCCEEDED;
+ const next =
+ this.state.nextState === SaveButton.States.SUCCEEDED
+ ? SaveButton.States.FAILED
+ : SaveButton.States.SUCCEEDED;
this.setState({ saveState: this.state.nextState, nextState: next });
setTimeout(() => {
@@ -43,22 +44,23 @@ export const demos = [
{
render: () => (
-
+
-
+
-
+
-
- )
- }, {
+ ),
+ },
+ {
name: 'Clickable demo',
- render: () =>
- }
+ render: () =>
,
+ },
];
diff --git a/src/components/SaveButton/SaveButton.react.js b/src/components/SaveButton/SaveButton.react.js
index e8172fa5d9..f590066b80 100644
--- a/src/components/SaveButton/SaveButton.react.js
+++ b/src/components/SaveButton/SaveButton.react.js
@@ -11,7 +11,7 @@ import PropTypes from 'lib/PropTypes';
import React from 'react';
import styles from 'components/SaveButton/SaveButton.scss';
-let SaveButton = ({
+const SaveButton = ({
state = SaveButton.States.WAITING,
onClick,
waitingText = 'Save changes',
@@ -39,26 +39,34 @@ let SaveButton = ({
color = 'red';
break;
}
- let className = state === SaveButton.States.FAILED ? styles.shake : null;
- return
;
+ const className = state === SaveButton.States.FAILED ? styles.shake : null;
+ return (
+
+
+ );
};
SaveButton.States = keyMirror(['SAVING', 'SUCCEEDED', 'FAILED']);
-let {...forwardedButtonProps} = Button.propTypes;
+const { ...forwardedButtonProps } = Button.propTypes;
delete forwardedButtonProps.value;
SaveButton.propTypes = {
- state: PropTypes.string.describe('SaveButton.States.(SAVING|SUCCEEDED|FAILED|WAITING). Defaults to WAITING.'),
- onClick: PropTypes.func.describe('Click handler. Actived if button is clicked while enabled and in WAITING state.'),
+ state: PropTypes.string.describe(
+ 'SaveButton.States.(SAVING|SUCCEEDED|FAILED|WAITING). Defaults to WAITING.'
+ ),
+ onClick: PropTypes.func.describe(
+ 'Click handler. Actived if button is clicked while enabled and in WAITING state.'
+ ),
waitingText: PropTypes.string.describe('Text for WAITING state. Defaults to "Save changes".'),
savingText: PropTypes.string.describe('Text for SAVING state. Defaults to "Saving\u2025".'),
failedText: PropTypes.string.describe('Text for FAILED state. Defaults to "Save failed".'),
diff --git a/src/components/ScrollHint/ScrollHint.react.js b/src/components/ScrollHint/ScrollHint.react.js
index 8933679914..466e211697 100644
--- a/src/components/ScrollHint/ScrollHint.react.js
+++ b/src/components/ScrollHint/ScrollHint.react.js
@@ -5,27 +5,24 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
- import React from 'react'
- import styles from 'components/ScrollHint/ScrollHint.scss'
+import React from 'react';
+import styles from 'components/ScrollHint/ScrollHint.scss';
- export default class ScrollHint extends React.Component {
- constructor() {
- super();
- this.state = { active: false };
- }
+export default class ScrollHint extends React.Component {
+ constructor() {
+ super();
+ this.state = { active: false };
+ }
- toggle(active) {
- this.setState({ active });
- }
+ toggle(active) {
+ this.setState({ active });
+ }
- render() {
- const { active } = this.state;
+ render() {
+ const { active } = this.state;
- const classes = [
- styles.scrollHint,
- active ? styles.active: undefined
- ].join(' ');
+ const classes = [styles.scrollHint, active ? styles.active : undefined].join(' ');
- return
;
- }
- }
+ return
;
+ }
+}
diff --git a/src/components/SegmentSelect/SegmentSelect.example.js b/src/components/SegmentSelect/SegmentSelect.example.js
index afe6db5cff..a8f08e2891 100644
--- a/src/components/SegmentSelect/SegmentSelect.example.js
+++ b/src/components/SegmentSelect/SegmentSelect.example.js
@@ -5,7 +5,7 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import SegmentSelect from 'components/SegmentSelect/SegmentSelect.react';
export const component = SegmentSelect;
@@ -14,7 +14,7 @@ class Demo extends React.Component {
constructor() {
super();
this.state = {
- current: null
+ current: null,
};
}
@@ -23,15 +23,14 @@ class Demo extends React.Component {
this.setState({ current })} />
+ onChange={current => this.setState({ current })}
+ />
);
}
}
export const demos = [
{
- render: () => (
-
- {values.map((v) => (
+ {values.map(v => (
{
if (current !== v) {
- onChange(v)
+ onChange(v);
}
- }}>
+ }}
+ >
{v}
))}
@@ -32,10 +33,8 @@ SegmentSelect.propTypes = {
values: PropTypes.arrayOf(PropTypes.string).isRequired.describe(
'An array of strings that can be selected'
),
- current: PropTypes.string.describe(
- 'The currently selected value.'
- ),
+ current: PropTypes.string.describe('The currently selected value.'),
onChange: PropTypes.func.isRequired.describe(
'A function that is called whenever a new segment is selected. The selected value is passed as the only parameter.'
- )
+ ),
};
diff --git a/src/components/Sidebar/AppName.react.js b/src/components/Sidebar/AppName.react.js
index 93053923a6..a5f0eca30c 100644
--- a/src/components/Sidebar/AppName.react.js
+++ b/src/components/Sidebar/AppName.react.js
@@ -6,9 +6,7 @@ const AppName = ({ name, onClick, onPinClick }) => (
diff --git a/src/components/Sidebar/AppsMenu.react.js b/src/components/Sidebar/AppsMenu.react.js
index cbee4edd80..9ab134565c 100644
--- a/src/components/Sidebar/AppsMenu.react.js
+++ b/src/components/Sidebar/AppsMenu.react.js
@@ -5,25 +5,34 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import AppBadge from 'components/AppBadge/AppBadge.react';
-import AppName from 'components/Sidebar/AppName.react';
-import html from 'lib/htmlString';
-import { Link } from 'react-router-dom';
-import React from 'react';
-import styles from 'components/Sidebar/Sidebar.scss';
-import baseStyles from 'stylesheets/base.scss';
+import AppBadge from 'components/AppBadge/AppBadge.react';
+import AppName from 'components/Sidebar/AppName.react';
+import html from 'lib/htmlString';
+import { Link } from 'react-router-dom';
+import React from 'react';
+import styles from 'components/Sidebar/Sidebar.scss';
+import baseStyles from 'stylesheets/base.scss';
const AppsMenu = ({ apps, current, height, onSelect, onPinClick }) => (
-
+
All Apps
- {apps.map((app) => {
+ {apps.map(app => {
if (app.slug === current.slug) {
return null;
}
return (
-
+
{app.name}
diff --git a/src/components/Sidebar/Pin.react.js b/src/components/Sidebar/Pin.react.js
index 95f3b2f1fd..21c4eb2d7f 100644
--- a/src/components/Sidebar/Pin.react.js
+++ b/src/components/Sidebar/Pin.react.js
@@ -5,7 +5,7 @@ import styles from 'components/Sidebar/Sidebar.scss';
const Pin = ({ onClick }) => (
-
);
diff --git a/src/components/Sidebar/Sidebar.react.js b/src/components/Sidebar/Sidebar.react.js
index 80764af925..79bbf1fcce 100644
--- a/src/components/Sidebar/Sidebar.react.js
+++ b/src/components/Sidebar/Sidebar.react.js
@@ -5,19 +5,19 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import AppsManager from 'lib/AppsManager';
-import AppsMenu from 'components/Sidebar/AppsMenu.react';
-import AppName from 'components/Sidebar/AppName.react';
+import AppsManager from 'lib/AppsManager';
+import AppsMenu from 'components/Sidebar/AppsMenu.react';
+import AppName from 'components/Sidebar/AppName.react';
import isInsidePopover from 'lib/isInsidePopover';
-import Pin from 'components/Sidebar/Pin.react';
+import Pin from 'components/Sidebar/Pin.react';
import React, { useEffect, useState, useContext } from 'react';
-import SidebarHeader from 'components/Sidebar/SidebarHeader.react';
+import SidebarHeader from 'components/Sidebar/SidebarHeader.react';
import SidebarSection from 'components/Sidebar/SidebarSection.react';
import SidebarSubItem from 'components/Sidebar/SidebarSubItem.react';
-import styles from 'components/Sidebar/Sidebar.scss';
+import styles from 'components/Sidebar/Sidebar.scss';
import { CurrentApp } from 'context/currentApp';
-import Icon from 'components/Icon/Icon.react';
-let mountPath = window.PARSE_DASHBOARD_PATH;
+import Icon from 'components/Icon/Icon.react';
+const mountPath = window.PARSE_DASHBOARD_PATH;
const Sidebar = ({
prefix,
@@ -29,17 +29,17 @@ const Sidebar = ({
section,
appSelector,
primaryBackgroundColor,
- secondaryBackgroundColor
+ secondaryBackgroundColor,
}) => {
const currentApp = useContext(CurrentApp);
const collapseWidth = 980;
- const [ appsMenuOpen, setAppsMenuOpen ] = useState(false);
- const [ collapsed, setCollapsed ] = useState(false);
- const [ fixed, setFixed ] = useState(true);
+ const [appsMenuOpen, setAppsMenuOpen] = useState(false);
+ const [collapsed, setCollapsed] = useState(false);
+ const [fixed, setFixed] = useState(true);
const [dashboardUser, setDashboardUser] = useState('');
fetch(mountPath).then(response => {
- setDashboardUser(response.headers.get('username'))
- })
+ setDashboardUser(response.headers.get('username'));
+ });
let currentWidth = window.innerWidth;
const windowResizeHandler = () => {
@@ -56,14 +56,14 @@ const Sidebar = ({
}
// Update window width
currentWidth = window.innerWidth;
- }
+ };
useEffect(() => {
window.addEventListener('resize', windowResizeHandler);
return () => {
window.removeEventListener('resize', windowResizeHandler);
- }
+ };
});
const sidebarClasses = [styles.sidebar];
@@ -82,7 +82,7 @@ const Sidebar = ({
}
return (
- {subsections.map(({name, link}) => {
+ {subsections.map(({ name, link }) => {
const active = subsection === name;
return (
+ active={active}
+ >
{active ? children : null}
);
})}
);
- }
+ };
const onPinClick = () => {
if (fixed) {
@@ -113,34 +114,38 @@ const Sidebar = ({
let sidebarContent;
if (appsMenuOpen) {
- const apps = [].concat(AppsManager.apps()).sort((a, b) => (a.name < b.name ? -1 : (a.name > b.name ? 1 : 0)));
+ const apps = []
+ .concat(AppsManager.apps())
+ .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0));
sidebarContent = (
setAppsMenuOpen(false)} />
+ onSelect={() => setAppsMenuOpen(false)}
+ />
);
} else {
- const topContent = collapsed
- ?
-
setAppsMenuOpen(true)} onPinClick={onPinClick} />
+ setAppsMenuOpen(true)}
+ onPinClick={onPinClick}
+ />
{topContent}
- {sections.map(({
- name,
- icon,
- style,
- link,
- subsections,
- }) => {
+ {sections.map(({ name, icon, style, link, subsections }) => {
const active = name === section;
return (
+ >
{!collapsed && active ? _subMenu(subsections) : null}
);
})}
- )
+ );
}
return (
setCollapsed(false)
- : undefined
- }
+ onMouseEnter={!fixed && collapsed ? () => setCollapsed(false) : undefined}
onMouseLeave={
!collapsed && !fixed
- ? (e => {
+ ? e => {
if (!isInsidePopover(e.relatedTarget)) {
setAppsMenuOpen(false);
setCollapsed(true);
}
- })
+ }
: undefined
}
>
{sidebarContent}
- {dashboardUser &&
}
+ {dashboardUser && (
+
+ )}
+
{this.text}
);
diff --git a/src/components/Sidebar/SidebarHeader.react.js b/src/components/Sidebar/SidebarHeader.react.js
index 03c3b82b2d..c609ff1cff 100644
--- a/src/components/Sidebar/SidebarHeader.react.js
+++ b/src/components/Sidebar/SidebarHeader.react.js
@@ -5,47 +5,39 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import Icon from 'components/Icon/Icon.react';
+import Icon from 'components/Icon/Icon.react';
import { Link } from 'react-router-dom';
-import React from 'react';
-import styles from 'components/Sidebar/Sidebar.scss';
+import React from 'react';
+import styles from 'components/Sidebar/Sidebar.scss';
// get the package.json environment variable
const version = process.env.version;
export default class SidebarHeader extends React.Component {
constructor() {
super();
- this.state = { };
+ this.state = {};
}
render() {
const { isCollapsed = false, dashboardUser } = this.props;
- const headerContent = isCollapsed
- ? (
-
-
- )
- : (
- <>
-
-
- Parse Dashboard {version}
-
- {dashboardUser}
-
-
-
- {headerContent}
+ const headerContent = isCollapsed ? (
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+ Parse Dashboard {version}
+
{dashboardUser}
+
+
+
+
);
+ return
{headerContent}
;
}
}
diff --git a/src/components/Sidebar/SidebarSection.react.js b/src/components/Sidebar/SidebarSection.react.js
index fb86c00c60..09a9d6317f 100644
--- a/src/components/Sidebar/SidebarSection.react.js
+++ b/src/components/Sidebar/SidebarSection.react.js
@@ -5,25 +5,39 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import Icon from 'components/Icon/Icon.react';
+import Icon from 'components/Icon/Icon.react';
import { Link } from 'react-router-dom';
-import React from 'react';
-import styles from 'components/Sidebar/Sidebar.scss';
+import React from 'react';
+import styles from 'components/Sidebar/Sidebar.scss';
-let SidebarSection = ({ active, children, name, link, icon, style, primaryBackgroundColor, secondaryBackgroundColor, isCollapsed }) => {
- let classes = [styles.section];
+const SidebarSection = ({
+ active,
+ children,
+ name,
+ link,
+ icon,
+ style,
+ primaryBackgroundColor,
+ secondaryBackgroundColor,
+ isCollapsed,
+}) => {
+ const classes = [styles.section];
if (active) {
classes.push(styles.active);
}
let iconContent = null;
if (icon) {
- iconContent =
;
+ iconContent =
;
}
if (isCollapsed) {
classes.push(styles.collapsed);
return (
-
@@ -31,11 +45,27 @@ let SidebarSection = ({ active, children, name, link, icon, style, primaryBackgr
}
return (
- {active ?
-
{iconContent}{name}
:
-
{iconContent}
{name} }
+ {active ? (
+
+ {iconContent}
+ {name}
+
+ ) : (
+
+ {iconContent}
+
{name}
+
+ )}
- {children ?
{children}
: null}
+ {children ? (
+
+ {children}
+
+ ) : null}
);
};
diff --git a/src/components/Sidebar/SidebarSubItem.react.js b/src/components/Sidebar/SidebarSubItem.react.js
index 72962893a9..3017466b60 100644
--- a/src/components/Sidebar/SidebarSubItem.react.js
+++ b/src/components/Sidebar/SidebarSubItem.react.js
@@ -6,10 +6,10 @@
* the root directory of this source tree.
*/
import { Link } from 'react-router-dom';
-import React from 'react';
-import styles from 'components/Sidebar/Sidebar.scss';
+import React from 'react';
+import styles from 'components/Sidebar/Sidebar.scss';
-let SidebarSubItem = ({ active, name, action, link, children }) => {
+const SidebarSubItem = ({ active, name, action, link, children }) => {
if (active) {
return (
@@ -17,18 +17,14 @@ let SidebarSubItem = ({ active, name, action, link, children }) => {
{name}
{action ? action.renderButton() : null}
-
- {children}
-
+
{children}
);
}
return (
-
diff --git a/src/components/SliderWrap/SliderWrap.example.js b/src/components/SliderWrap/SliderWrap.example.js
index b03c0278ce..29f77673ce 100644
--- a/src/components/SliderWrap/SliderWrap.example.js
+++ b/src/components/SliderWrap/SliderWrap.example.js
@@ -6,17 +6,17 @@
* the root directory of this source tree.
*/
import { Directions } from 'lib/Constants';
-import React from 'react';
-import SliderWrap from 'components/SliderWrap/SliderWrap.react';
+import React from 'react';
+import SliderWrap from 'components/SliderWrap/SliderWrap.react';
-let contentStyle = {
+const contentStyle = {
background: '#67c0ff',
color: '#ffffff',
width: '200px',
height: '60px',
lineHeight: '60px',
fontSize: '16px',
- textAlign: 'center'
+ textAlign: 'center',
};
class Toggler extends React.Component {
@@ -27,20 +27,18 @@ class Toggler extends React.Component {
toggle() {
this.setState({
- expanded: !this.state.expanded
+ expanded: !this.state.expanded,
});
}
render() {
- let { children, ...otherProps } = this.props;
+ const { children, ...otherProps } = this.props;
return (
);
@@ -55,10 +53,16 @@ export const demos = [
Open your mind
Closed for renovations
- To the right, to the right
- In the box to the left
- Zooooooom
+
+ To the right, to the right
+
+
+ In the box to the left
+
+
+ Zooooooom
+
- )
- }
+ ),
+ },
];
diff --git a/src/components/SliderWrap/SliderWrap.react.js b/src/components/SliderWrap/SliderWrap.react.js
index 8fd7886e67..959f33e32c 100644
--- a/src/components/SliderWrap/SliderWrap.react.js
+++ b/src/components/SliderWrap/SliderWrap.react.js
@@ -6,8 +6,8 @@
* the root directory of this source tree.
*/
import { Directions } from 'lib/Constants';
-import React from 'react';
-import styles from 'components/SliderWrap/SliderWrap.scss';
+import React from 'react';
+import styles from 'components/SliderWrap/SliderWrap.scss';
export default class SliderWrap extends React.Component {
constructor() {
@@ -23,22 +23,23 @@ export default class SliderWrap extends React.Component {
}
_getMetric() {
- if (this.props.direction === Directions.LEFT ||
- this.props.direction === Directions.RIGHT) {
+ if (this.props.direction === Directions.LEFT || this.props.direction === Directions.RIGHT) {
return 'width';
}
- if (!this.props.direction ||
- this.props.direction === Directions.UP ||
- this.props.direction === Directions.DOWN) {
+ if (
+ !this.props.direction ||
+ this.props.direction === Directions.UP ||
+ this.props.direction === Directions.DOWN
+ ) {
return 'height';
}
return 'both';
}
render() {
- let style = {};
- let metric = this._getMetric();
- let node = this.metricsRef.current;
+ const style = {};
+ const metric = this._getMetric();
+ const node = this.metricsRef.current;
if (!this.props.expanded || !node) {
if (metric === 'width' || metric === 'both') {
style.width = '0px';
@@ -59,7 +60,11 @@ export default class SliderWrap extends React.Component {
}
return (
-
diff --git a/src/components/SlowQueriesFilter/SlowQueriesFilter.react.js b/src/components/SlowQueriesFilter/SlowQueriesFilter.react.js
index d1c52a02d2..5155791890 100644
--- a/src/components/SlowQueriesFilter/SlowQueriesFilter.react.js
+++ b/src/components/SlowQueriesFilter/SlowQueriesFilter.react.js
@@ -6,20 +6,20 @@
* the root directory of this source tree.
*/
import ChromeDropdown from 'components/ChromeDropdown/ChromeDropdown.react';
-import Icon from 'components/Icon/Icon.react';
-import Popover from 'components/Popover/Popover.react';
-import Position from 'lib/Position';
-import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import styles from 'components/SlowQueriesFilter/SlowQueriesFilter.scss';
+import Icon from 'components/Icon/Icon.react';
+import Popover from 'components/Popover/Popover.react';
+import Position from 'lib/Position';
+import PropTypes from 'lib/PropTypes';
+import React from 'react';
+import styles from 'components/SlowQueriesFilter/SlowQueriesFilter.scss';
export default class SlowQueriesFilter extends React.Component {
constructor() {
super();
this.state = {
- open: false
- }
+ open: false,
+ };
this.wrapRef = React.createRef();
}
@@ -31,12 +31,12 @@ export default class SlowQueriesFilter extends React.Component {
}
render() {
- let { className, os, version } = this.props;
+ const { className, os, version } = this.props;
let popover = null;
- let active = className || os || version;
+ const active = className || os || version;
if (this.state.open) {
- let position = Position.inDocument(this.wrapRef.current);
- let popoverStyle = [styles.popover];
+ const position = Position.inDocument(this.wrapRef.current);
+ const popoverStyle = [styles.popover];
if (active) {
popoverStyle.push(styles.active);
}
@@ -44,7 +44,7 @@ export default class SlowQueriesFilter extends React.Component {
this.setState({ open: false })}>
- Filter
@@ -53,31 +53,34 @@ export default class SlowQueriesFilter extends React.Component {
color={active ? 'blue' : 'purple'}
value={className || 'Class'}
options={this.props.classNameOptions}
- onChange={className => this.props.onChange({ className })} />
+ onChange={className => this.props.onChange({ className })}
+ />
this.props.onChange({ os })} />
+ onChange={os => this.props.onChange({ os })}
+ />
this.props.onChange({ version })} />
+ onChange={version => this.props.onChange({ version })}
+ />
);
}
- let buttonStyle = [styles.entry];
+ const buttonStyle = [styles.entry];
if (active) {
buttonStyle.push(styles.active);
}
return (
this.setState({ open: true })}>
- Filter
{popover}
@@ -87,25 +90,11 @@ export default class SlowQueriesFilter extends React.Component {
}
SlowQueriesFilter.propTypes = {
- className: PropTypes.string.describe(
- 'Filtered class name.'
- ),
- os: PropTypes.string.describe(
- 'Filtered OS.'
- ),
- version: PropTypes.string.describe(
- 'Filtered app version.'
- ),
- classNameOptions: PropTypes.arrayOf(PropTypes.string).describe(
- 'Options for class names.'
- ),
- osOptions: PropTypes.arrayOf(PropTypes.string).describe(
- 'Options for OSes.'
- ),
- versionOptions: PropTypes.arrayOf(PropTypes.string).describe(
- 'Options for app versions.'
- ),
- onChange: PropTypes.func.isRequired.describe(
- 'Function to be called when the filter is changed.'
- )
-}
+ className: PropTypes.string.describe('Filtered class name.'),
+ os: PropTypes.string.describe('Filtered OS.'),
+ version: PropTypes.string.describe('Filtered app version.'),
+ classNameOptions: PropTypes.arrayOf(PropTypes.string).describe('Options for class names.'),
+ osOptions: PropTypes.arrayOf(PropTypes.string).describe('Options for OSes.'),
+ versionOptions: PropTypes.arrayOf(PropTypes.string).describe('Options for app versions.'),
+ onChange: PropTypes.func.isRequired.describe('Function to be called when the filter is changed.'),
+};
diff --git a/src/components/StatusIndicator/StatusIndicator.example.js b/src/components/StatusIndicator/StatusIndicator.example.js
index 9ae22e015c..be3b9f4c86 100644
--- a/src/components/StatusIndicator/StatusIndicator.example.js
+++ b/src/components/StatusIndicator/StatusIndicator.example.js
@@ -5,7 +5,7 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import StatusIndicator from 'components/StatusIndicator/StatusIndicator.react';
export const component = StatusIndicator;
@@ -13,26 +13,14 @@ export const component = StatusIndicator;
export const demos = [
{
name: 'Positive',
- render: () => (
-
- )
+ render: () =>
,
},
{
name: 'Negative',
- render: () => (
-
- )
+ render: () =>
,
},
{
name: 'In Progress',
- render: () => (
-
- )
- }
+ render: () =>
,
+ },
];
diff --git a/src/components/StatusIndicator/StatusIndicator.react.js b/src/components/StatusIndicator/StatusIndicator.react.js
index 6238e3f765..7232c80776 100644
--- a/src/components/StatusIndicator/StatusIndicator.react.js
+++ b/src/components/StatusIndicator/StatusIndicator.react.js
@@ -6,21 +6,17 @@
* the root directory of this source tree.
*/
import PropTypes from 'lib/PropTypes';
-import React from 'react';
-import styles from 'components/StatusIndicator/StatusIndicator.scss';
+import React from 'react';
+import styles from 'components/StatusIndicator/StatusIndicator.scss';
-let StatusIndicator = ({ text, color }) => {
+const StatusIndicator = ({ text, color }) => {
color = color || 'blue';
- return (
-
- {text}
-
- );
+ return
{text} ;
};
StatusIndicator.propTypes = {
text: PropTypes.string.isRequired,
- color: PropTypes.oneOf(['blue', 'green', 'red'])
+ color: PropTypes.oneOf(['blue', 'green', 'red']),
};
export default StatusIndicator;
diff --git a/src/components/StringEditor/StringEditor.react.js b/src/components/StringEditor/StringEditor.react.js
index 6141d33b7c..d36fdb296b 100644
--- a/src/components/StringEditor/StringEditor.react.js
+++ b/src/components/StringEditor/StringEditor.react.js
@@ -13,7 +13,7 @@ export default class StringEditor extends React.Component {
super();
this.state = {
- value: props.value || ''
+ value: props.value || '',
};
this.checkExternalClick = this.checkExternalClick.bind(this);
@@ -49,14 +49,14 @@ export default class StringEditor extends React.Component {
}
render() {
- let classes = [styles.editor];
- let onChange = this.props.readonly ? () => {} : (e) => this.setState({ value: e.target.value });
+ const classes = [styles.editor];
+ const onChange = this.props.readonly ? () => {} : e => this.setState({ value: e.target.value });
if (this.props.readonly) {
- classes.push(styles.readonly)
+ classes.push(styles.readonly);
}
if (this.props.multiline) {
- var style = { minWidth: this.props.minWidth };
+ const style = { minWidth: this.props.minWidth };
if (this.props.resizable) {
style.resize = 'both';
}
@@ -66,7 +66,8 @@ export default class StringEditor extends React.Component {
ref={this.inputRef}
value={this.state.value}
onChange={onChange}
- style={style} />
+ style={style}
+ />
);
}
@@ -76,7 +77,8 @@ export default class StringEditor extends React.Component {
ref={this.inputRef}
value={this.state.value}
onChange={onChange}
- disabled={this.props.readonly} />
+ disabled={this.props.readonly}
+ />
-
- {suggestions.map((suggestion, index) => {
- let className;
- if (index === activeSuggestion) {
- className = styles.active;
- }
- return (
-
- {suggestion}
-
- );
- })}
-
-
+ fixed={false}
+ position={position}
+ ref={this.popoverRef}
+ onExternalClick={onExternalClick}
+ data-popover-type="inner"
+ >
+
+ {suggestions.map((suggestion, index) => {
+ let className;
+ if (index === activeSuggestion) {
+ className = styles.active;
+ }
+ return (
+
+ {suggestion}
+
+ );
+ })}
+
+
);
}
}
diff --git a/src/components/Table/TableHeader.react.js b/src/components/Table/TableHeader.react.js
index b3b8aa3807..8c3431a25c 100644
--- a/src/components/Table/TableHeader.react.js
+++ b/src/components/Table/TableHeader.react.js
@@ -5,15 +5,15 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
+import React from 'react';
import styles from 'components/Table/Table.scss';
-let TableHeader = ({ width, ...props }) => {
- let style = {};
+const TableHeader = ({ width, ...props }) => {
+ const style = {};
if (width !== undefined) {
style.width = width + '%';
}
return
;
-}
+};
export default TableHeader;
diff --git a/src/components/TextInput/TextInput.example.js b/src/components/TextInput/TextInput.example.js
index 993ee875b4..d6a800d724 100644
--- a/src/components/TextInput/TextInput.example.js
+++ b/src/components/TextInput/TextInput.example.js
@@ -5,11 +5,11 @@
* This source code is licensed under the license found in the LICENSE file in
* the root directory of this source tree.
*/
-import React from 'react';
-import Field from 'components/Field/Field.react';
-import Fieldset from 'components/Fieldset/Fieldset.react';
-import Label from 'components/Label/Label.react';
-import styles from './TextInput.example.scss';
+import React from 'react';
+import Field from 'components/Field/Field.react';
+import Fieldset from 'components/Fieldset/Fieldset.react';
+import Label from 'components/Label/Label.react';
+import styles from './TextInput.example.scss';
import TextInput from 'components/TextInput/TextInput.react';
class Wrapper extends React.Component {
@@ -26,24 +26,36 @@ export const demos = [
-
} />
+ label={
+
+ }
+ />
- )
- }
+ ),
+ },
];
diff --git a/src/components/TextInput/TextInput.react.js b/src/components/TextInput/TextInput.react.js
index 6ab9df19a5..4aa72f3b76 100644
--- a/src/components/TextInput/TextInput.react.js
+++ b/src/components/TextInput/TextInput.react.js
@@ -15,7 +15,9 @@ class TextInput extends React.Component {
if (props.multiline !== this.props.multiline) {
const node = props.forwardedRef.current;
node.focus();
- if (this.props.value) node.setSelectionRange(this.props.value.length, this.props.value.length);
+ if (this.props.value) {
+ node.setSelectionRange(this.props.value.length, this.props.value.length);
+ }
}
}
@@ -33,7 +35,7 @@ class TextInput extends React.Component {
}
render() {
- let classes = [styles.text_input];
+ const classes = [styles.text_input];
if (this.props.monospace) {
classes.push(styles.monospace);
}
@@ -45,11 +47,14 @@ class TextInput extends React.Component {
disabled={!!this.props.disabled}
className={classes.join(' ')}
rows={this.props.rows && this.props.rows > 3 ? this.props.rows : null}
- style={this.props.rows && this.props.rows > 3 ? null : {height: this.props.height || 80}}
+ style={
+ this.props.rows && this.props.rows > 3 ? null : { height: this.props.height || 80 }
+ }
placeholder={this.props.placeholder}
value={this.props.value}
onChange={this.changeValue.bind(this)}
- onBlur={this.updateValue.bind(this)} />
+ onBlur={this.updateValue.bind(this)}
+ />
);
}
return (
@@ -59,11 +64,12 @@ class TextInput extends React.Component {
type={this.props.hidden ? 'password' : 'text'}
disabled={!!this.props.disabled}
className={classes.join(' ')}
- style={{height: this.props.height || 80}}
+ style={{ height: this.props.height || 80 }}
placeholder={this.props.placeholder}
value={this.props.value}
onChange={this.changeValue.bind(this)}
- onBlur={this.updateValue.bind(this)} />
+ onBlur={this.updateValue.bind(this)}
+ />
);
}
}
@@ -72,27 +78,17 @@ TextInput.propTypes = {
monospace: PropTypes.bool.describe(
'Determines whether the input is formatted with a monospace font'
),
- disabled: PropTypes.bool.describe(
- 'Determines whether the input is disabled'
- ),
- hidden: PropTypes.bool.describe(
- 'Determines whether the contents are hidden (password field)'
- ),
+ disabled: PropTypes.bool.describe('Determines whether the input is disabled'),
+ hidden: PropTypes.bool.describe('Determines whether the contents are hidden (password field)'),
multiline: PropTypes.bool.describe(
'Determines whether the input is a multiline input (