goblin-gadgets 3.2.2 → 3.2.3

package/widgets/pivot/widget.js

@@ -1,42 +1,42 @@
-//T:2019-02-27
-
-import React from 'react';
-import Widget from 'goblin-laboratory/widgets/widget';
-import PivotTableUI from 'react-pivottable/PivotTableUI';
-import './custom.css';
-
-/******************************************************************************/
-class Pivot extends Widget {
-  constructor() {
-    super(...arguments);
-    this.state = {pivotState: {}};
-  }
-
-  static get wiring() {
-    return {
-      id: 'id',
-      data: 'data',
-    };
-  }
-
-  render() {
-    if (!this.props.data) {
-      return null;
-    }
-
-    const data = this.props.data.toJS();
-
-    return (
-      <PivotTableUI
-        data={data}
-        onChange={(s) => {
-          this.setState({pivotState: s});
-        }}
-        {...this.state.pivotState}
-      />
-    );
-  }
-}
-
-/******************************************************************************/
-export default Pivot;
+//T:2019-02-27
+
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import PivotTableUI from 'react-pivottable/PivotTableUI';
+import './custom.css';
+
+/******************************************************************************/
+class Pivot extends Widget {
+  constructor() {
+    super(...arguments);
+    this.state = {pivotState: {}};
+  }
+
+  static get wiring() {
+    return {
+      id: 'id',
+      data: 'data',
+    };
+  }
+
+  render() {
+    if (!this.props.data) {
+      return null;
+    }
+
+    const data = this.props.data.toJS();
+
+    return (
+      <PivotTableUI
+        data={data}
+        onChange={(s) => {
+          this.setState({pivotState: s});
+        }}
+        {...this.state.pivotState}
+      />
+    );
+  }
+}
+
+/******************************************************************************/
+export default Pivot;

package/widgets/radio-list/styles.js

@@ -1,48 +1,48 @@
-/******************************************************************************/
-
-export const propNames = ['direction', 'width', 'height'];
-
-export default function styles(theme, props) {
-  const {direction: directionProp, width, height} = props;
-
-  let direction, wrap, overflowX, overflowY;
-  switch (directionProp) {
-    case 'row':
-      direction = 'row';
-      wrap = null;
-      overflowX = 'auto';
-      overflowY = null;
-      break;
-    case 'wrap':
-      direction = 'column';
-      wrap = 'wrap';
-      overflowX = 'auto';
-      overflowY = null;
-      break;
-    default:
-      // column
-      direction = 'column';
-      wrap = null;
-      overflowX = null;
-      overflowY = 'auto';
-      break;
-  }
-
-  const boxStyle = {
-    width,
-    height,
-    display: 'flex',
-    flexDirection: direction,
-    flexGrow: width ? null : '1',
-    flexWrap: wrap,
-    alignItems: 'flex-start',
-    overflowX: overflowX,
-    overflowY: overflowY,
-  };
-
-  return {
-    box: boxStyle,
-  };
-}
-
-/******************************************************************************/
+/******************************************************************************/
+
+export const propNames = ['direction', 'width', 'height'];
+
+export default function styles(theme, props) {
+  const {direction: directionProp, width, height} = props;
+
+  let direction, wrap, overflowX, overflowY;
+  switch (directionProp) {
+    case 'row':
+      direction = 'row';
+      wrap = null;
+      overflowX = 'auto';
+      overflowY = null;
+      break;
+    case 'wrap':
+      direction = 'column';
+      wrap = 'wrap';
+      overflowX = 'auto';
+      overflowY = null;
+      break;
+    default:
+      // column
+      direction = 'column';
+      wrap = null;
+      overflowX = null;
+      overflowY = 'auto';
+      break;
+  }
+
+  const boxStyle = {
+    width,
+    height,
+    display: 'flex',
+    flexDirection: direction,
+    flexGrow: width ? null : '1',
+    flexWrap: wrap,
+    alignItems: 'flex-start',
+    overflowX: overflowX,
+    overflowY: overflowY,
+  };
+
+  return {
+    box: boxStyle,
+  };
+}
+
+/******************************************************************************/

package/widgets/radio-list/widget.js

@@ -1,111 +1,111 @@
-//T:2019-02-27
-import React from 'react';
-import Widget from 'goblin-laboratory/widgets/widget';
-
-import Checkbox from 'goblin-gadgets/widgets/checkbox/widget';
-import * as styles from './styles';
-
-/******************************************************************************/
-
-class RadioList extends Widget {
-  constructor() {
-    super(...arguments);
-    this.styles = styles;
-
-    this.onRadioClicked = this.onRadioClicked.bind(this);
-    this.onCheckClicked = this.onCheckClicked.bind(this);
-    this.getItem = this.getItem.bind(this);
-  }
-
-  onRadioClicked(index) {
-    const x = this.props.selectionChanged;
-    if (x) {
-      x(index);
-    }
-  }
-
-  onCheckClicked() {
-    const x = this.props.selectionChanged;
-    if (x) {
-      const index = this.props.selectedIndex ^ 1; // swap (0 <-> 1)
-      x(index);
-    }
-  }
-
-  // Indicates whether the list of radio buttons can be reduced to a single check button.
-  get isBool() {
-    return (
-      this.props.list.length === 2 &&
-      ((this.props.list[0] === 'no' && this.props.list[1] === 'yes') ||
-        (this.props.list[0] === false && this.props.list[1] === true))
-    );
-  }
-
-  getItem(item) {
-    if (!item || typeof item === 'string') {
-      return item;
-    } else {
-      if (item.text) {
-        return item.text;
-      }
-      console.warn(`malformed radio item: ${JSON.stringify(item)}`);
-    }
-  }
-
-  /******************************************************************************/
-
-  // Render a single check button, with the text of the second option (yes/true).
-  renderCheck() {
-    return (
-      <Checkbox
-        kind="check"
-        heightStrategy={this.props.heightStrategy}
-        text={this.props.list[1]}
-        focusable={true}
-        disabled={this.props.disabled}
-        checked={this.props.selectedIndex === 1}
-        onChange={this.onCheckClicked}
-      />
-    );
-  }
-
-  // Render a single radio button.
-  renderRow(text, index) {
-    return (
-      <Checkbox
-        key={index}
-        kind={this.props.kind || 'radio'}
-        width={this.props.buttonWidth}
-        heightStrategy={this.props.heightStrategy}
-        justify="left"
-        text={this.getItem(text)}
-        focusable={true}
-        disabled={this.props.disabled}
-        checked={index === this.props.selectedIndex}
-        onChange={() => this.onRadioClicked(index)}
-      />
-    );
-  }
-
-  // Render a list of radio buttons.
-  renderRows() {
-    const result = [];
-    let index = 0;
-    for (const row of this.props.list) {
-      result.push(this.renderRow(row, index++));
-    }
-    return result;
-  }
-
-  render() {
-    const boxClass = this.styles.classNames.box;
-    return (
-      <div className={boxClass}>
-        {this.isBool ? this.renderCheck() : this.renderRows()}
-      </div>
-    );
-  }
-}
-
-/******************************************************************************/
-export default RadioList;
+//T:2019-02-27
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+
+import Checkbox from 'goblin-gadgets/widgets/checkbox/widget';
+import * as styles from './styles';
+
+/******************************************************************************/
+
+class RadioList extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+
+    this.onRadioClicked = this.onRadioClicked.bind(this);
+    this.onCheckClicked = this.onCheckClicked.bind(this);
+    this.getItem = this.getItem.bind(this);
+  }
+
+  onRadioClicked(index) {
+    const x = this.props.selectionChanged;
+    if (x) {
+      x(index);
+    }
+  }
+
+  onCheckClicked() {
+    const x = this.props.selectionChanged;
+    if (x) {
+      const index = this.props.selectedIndex ^ 1; // swap (0 <-> 1)
+      x(index);
+    }
+  }
+
+  // Indicates whether the list of radio buttons can be reduced to a single check button.
+  get isBool() {
+    return (
+      this.props.list.length === 2 &&
+      ((this.props.list[0] === 'no' && this.props.list[1] === 'yes') ||
+        (this.props.list[0] === false && this.props.list[1] === true))
+    );
+  }
+
+  getItem(item) {
+    if (!item || typeof item === 'string') {
+      return item;
+    } else {
+      if (item.text) {
+        return item.text;
+      }
+      console.warn(`malformed radio item: ${JSON.stringify(item)}`);
+    }
+  }
+
+  /******************************************************************************/
+
+  // Render a single check button, with the text of the second option (yes/true).
+  renderCheck() {
+    return (
+      <Checkbox
+        kind="check"
+        heightStrategy={this.props.heightStrategy}
+        text={this.props.list[1]}
+        focusable={true}
+        disabled={this.props.disabled}
+        checked={this.props.selectedIndex === 1}
+        onChange={this.onCheckClicked}
+      />
+    );
+  }
+
+  // Render a single radio button.
+  renderRow(text, index) {
+    return (
+      <Checkbox
+        key={index}
+        kind={this.props.kind || 'radio'}
+        width={this.props.buttonWidth}
+        heightStrategy={this.props.heightStrategy}
+        justify="left"
+        text={this.getItem(text)}
+        focusable={true}
+        disabled={this.props.disabled}
+        checked={index === this.props.selectedIndex}
+        onChange={() => this.onRadioClicked(index)}
+      />
+    );
+  }
+
+  // Render a list of radio buttons.
+  renderRows() {
+    const result = [];
+    let index = 0;
+    for (const row of this.props.list) {
+      result.push(this.renderRow(row, index++));
+    }
+    return result;
+  }
+
+  render() {
+    const boxClass = this.styles.classNames.box;
+    return (
+      <div className={boxClass}>
+        {this.isBool ? this.renderCheck() : this.renderRows()}
+      </div>
+    );
+  }
+}
+
+/******************************************************************************/
+export default RadioList;

package/widgets/resizable-container/styles.js

@@ -1,108 +1,108 @@
-import {ColorManipulator} from 'goblin-theme';
-
-/******************************************************************************/
-
-export const propNames = ['style'];
-
-export default function styles(theme, props) {
-  const {style} = props;
-
-  const resizableContainer = {
-    position: 'relative',
-    display: 'content',
-    width: '100%',
-    height: '100%',
-  };
-
-  const borderColor = ColorManipulator.lighten(theme.palette.buttonBorder, 0.4);
-  const box = {
-    position: 'absolute',
-    top: '0px',
-    left: '0px',
-    borderLeft: `1px solid ${borderColor}`,
-    borderTop: `1px solid ${borderColor}`,
-    borderRight: `2px dashed ${borderColor}`,
-    borderBottom: `2px dashed ${borderColor}`,
-    padding: '10px',
-    display: 'flex',
-  };
-
-  const children = {
-    position: 'absolute',
-    top: '10px',
-    bottom: '10px',
-    left: '10px',
-    right: '10px',
-    display: 'flex',
-    ...style,
-  };
-
-  const borderColorDragging = 'red';
-  const boxDragging = {
-    ...box,
-    borderRight: `2px dashed ${borderColorDragging}`,
-    borderBottom: `2px dashed ${borderColorDragging}`,
-  };
-
-  const _button = {
-    'position': 'absolute',
-    'width': '20px',
-    'height': '20px',
-    'boxSizing': 'border-box',
-    'border': `1px solid ${borderColor}`,
-    'borderRadius': '10px',
-    'background': theme.palette.buttonBackground,
-    'transform': 'rotate(90deg) scale(1)',
-    'transition':
-      'border-radius 0.2s ease-out, border 0.2s ease-out, transform 0.2s ease-out',
-    ':hover': {
-      borderRadius: '0px',
-      border: `2px solid ${theme.palette.buttonBorder}`,
-      transform: 'rotate(0deg) scale(1.5)',
-    },
-  };
-
-  // Button at bottom right, for resizing width and height.
-  const buttonCorner = {
-    ..._button,
-    cursor: 'move',
-  };
-
-  // Button at bottom left, for resizing height.
-  const buttonHeight = {
-    ..._button,
-    cursor: 'ns-resize',
-  };
-
-  // Button at top right, for resizing width.
-  const buttonWidth = {
-    ..._button,
-    cursor: 'ew-resize',
-  };
-
-  const size = {
-    position: 'absolute',
-    left: '0px',
-    top: '0px',
-    padding: '5px 10px',
-    border: '1px solid black',
-    backgroundColor: 'red',
-    color: 'white',
-    fontSize: '80%',
-  };
-
-  /******************************************************************************/
-
-  return {
-    resizableContainer,
-    box,
-    children,
-    boxDragging,
-    buttonCorner,
-    buttonHeight,
-    buttonWidth,
-    size,
-  };
-}
-
-/******************************************************************************/
+import {ColorManipulator} from 'goblin-theme';
+
+/******************************************************************************/
+
+export const propNames = ['style'];
+
+export default function styles(theme, props) {
+  const {style} = props;
+
+  const resizableContainer = {
+    position: 'relative',
+    display: 'content',
+    width: '100%',
+    height: '100%',
+  };
+
+  const borderColor = ColorManipulator.lighten(theme.palette.buttonBorder, 0.4);
+  const box = {
+    position: 'absolute',
+    top: '0px',
+    left: '0px',
+    borderLeft: `1px solid ${borderColor}`,
+    borderTop: `1px solid ${borderColor}`,
+    borderRight: `2px dashed ${borderColor}`,
+    borderBottom: `2px dashed ${borderColor}`,
+    padding: '10px',
+    display: 'flex',
+  };
+
+  const children = {
+    position: 'absolute',
+    top: '10px',
+    bottom: '10px',
+    left: '10px',
+    right: '10px',
+    display: 'flex',
+    ...style,
+  };
+
+  const borderColorDragging = 'red';
+  const boxDragging = {
+    ...box,
+    borderRight: `2px dashed ${borderColorDragging}`,
+    borderBottom: `2px dashed ${borderColorDragging}`,
+  };
+
+  const _button = {
+    'position': 'absolute',
+    'width': '20px',
+    'height': '20px',
+    'boxSizing': 'border-box',
+    'border': `1px solid ${borderColor}`,
+    'borderRadius': '10px',
+    'background': theme.palette.buttonBackground,
+    'transform': 'rotate(90deg) scale(1)',
+    'transition':
+      'border-radius 0.2s ease-out, border 0.2s ease-out, transform 0.2s ease-out',
+    ':hover': {
+      borderRadius: '0px',
+      border: `2px solid ${theme.palette.buttonBorder}`,
+      transform: 'rotate(0deg) scale(1.5)',
+    },
+  };
+
+  // Button at bottom right, for resizing width and height.
+  const buttonCorner = {
+    ..._button,
+    cursor: 'move',
+  };
+
+  // Button at bottom left, for resizing height.
+  const buttonHeight = {
+    ..._button,
+    cursor: 'ns-resize',
+  };
+
+  // Button at top right, for resizing width.
+  const buttonWidth = {
+    ..._button,
+    cursor: 'ew-resize',
+  };
+
+  const size = {
+    position: 'absolute',
+    left: '0px',
+    top: '0px',
+    padding: '5px 10px',
+    border: '1px solid black',
+    backgroundColor: 'red',
+    color: 'white',
+    fontSize: '80%',
+  };
+
+  /******************************************************************************/
+
+  return {
+    resizableContainer,
+    box,
+    children,
+    boxDragging,
+    buttonCorner,
+    buttonHeight,
+    buttonWidth,
+    size,
+  };
+}
+
+/******************************************************************************/