goblin-gadgets 3.2.2 → 3.2.3

package/widgets/tree-row/widget.js

@@ -1,135 +1,135 @@
-//T:2019-02-27
-
-import React from 'react';
-import Widget from 'goblin-laboratory/widgets/widget';
-
-import TreeCell from 'goblin-gadgets/widgets/tree-cell/widget';
-import Button from 'goblin-gadgets/widgets/button/widget';
-import * as styles from './styles';
-
-/******************************************************************************/
-
-export default class TreeRow extends Widget {
-  constructor() {
-    super(...arguments);
-    this.styles = styles;
-
-    this.onSelectionChanged = this.onSelectionChanged.bind(this);
-    this.onDoubleClick = this.onDoubleClick.bind(this);
-    this.onExpand = this.onExpand.bind(this);
-  }
-
-  onSelectionChanged(id) {
-    if (this.props.selection) {
-      const x = this.props.selectionChanged;
-      if (x) {
-        x(id);
-      }
-    } else {
-      if (this.props.hasChildren) {
-        this.onExpand();
-      } else {
-        const x = this.props.onClick;
-        if (x) {
-          x(id);
-        }
-      }
-    }
-  }
-
-  onDoubleClick(id) {
-    const x = this.props.onDoubleClick;
-    if (x) {
-      x(id);
-    }
-  }
-
-  onExpand() {
-    const x = this.props.onExpand;
-    if (x) {
-      x();
-    }
-  }
-
-  /******************************************************************************/
-
-  renderExpandButton() {
-    const styleClass = this.styles.classNames.expandButton;
-    const glyph = this.props.hasChildren
-      ? 'solid/chevron-right'
-      : 'solid/circle';
-    const glyphSize = this.props.hasChildren ? null : '30%';
-
-    return (
-      <div className={styleClass}>
-        <Button
-          kind="tree-expand"
-          glyph={glyph}
-          glyphSize={glyphSize}
-          onClick={this.onExpand}
-        />
-      </div>
-    );
-  }
-
-  renderRowCell(rowId, width, grow, textAlign, indent, text, index) {
-    return (
-      <TreeCell
-        rowId={rowId}
-        key={index}
-        index={index}
-        width={width}
-        grow={grow}
-        level={this.props.level}
-        textAlign={textAlign}
-        indent={indent}
-        verticalSpacing={this.props.verticalSpacing}
-        isHeader={false}
-        text={text}
-        selectionChanged={() => this.onSelectionChanged(rowId)}
-        onDoubleClick={() => this.onDoubleClick(rowId)}
-      />
-    );
-  }
-
-  renderRowCells(header, row) {
-    let index = 0;
-    const h = Widget.shred(header);
-    return h
-      .map((column) => {
-        const text = row.get(column.get('name'));
-
-        return this.renderRowCell(
-          row.get('id'),
-          column.get('width'),
-          column.get('grow'),
-          column.get('textAlign'),
-          column.get('indent'),
-          text,
-          index++
-        );
-      })
-      .valueSeq()
-      .toArray();
-  }
-
-  render() {
-    var styleName = this.props.selected ? 'rowSelected' : 'row';
-    const rowClass = this.styles.classNames[styleName];
-
-    return (
-      <div
-        key={this.props.index}
-        className={`${this.props.hoverClass} ${rowClass}`}
-      >
-        {this.renderExpandButton()}
-        {this.renderRowCells(
-          this.props.header.valueSeq().toArray(),
-          this.props.row
-        )}
-      </div>
-    );
-  }
-}
-
-/******************************************************************************/
+//T:2019-02-27
+
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+
+import TreeCell from 'goblin-gadgets/widgets/tree-cell/widget';
+import Button from 'goblin-gadgets/widgets/button/widget';
+import * as styles from './styles';
+
+/******************************************************************************/
+
+export default class TreeRow extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+
+    this.onSelectionChanged = this.onSelectionChanged.bind(this);
+    this.onDoubleClick = this.onDoubleClick.bind(this);
+    this.onExpand = this.onExpand.bind(this);
+  }
+
+  onSelectionChanged(id) {
+    if (this.props.selection) {
+      const x = this.props.selectionChanged;
+      if (x) {
+        x(id);
+      }
+    } else {
+      if (this.props.hasChildren) {
+        this.onExpand();
+      } else {
+        const x = this.props.onClick;
+        if (x) {
+          x(id);
+        }
+      }
+    }
+  }
+
+  onDoubleClick(id) {
+    const x = this.props.onDoubleClick;
+    if (x) {
+      x(id);
+    }
+  }
+
+  onExpand() {
+    const x = this.props.onExpand;
+    if (x) {
+      x();
+    }
+  }
+
+  /******************************************************************************/
+
+  renderExpandButton() {
+    const styleClass = this.styles.classNames.expandButton;
+    const glyph = this.props.hasChildren
+      ? 'solid/chevron-right'
+      : 'solid/circle';
+    const glyphSize = this.props.hasChildren ? null : '30%';
+
+    return (
+      <div className={styleClass}>
+        <Button
+          kind="tree-expand"
+          glyph={glyph}
+          glyphSize={glyphSize}
+          onClick={this.onExpand}
+        />
+      </div>
+    );
+  }
+
+  renderRowCell(rowId, width, grow, textAlign, indent, text, index) {
+    return (
+      <TreeCell
+        rowId={rowId}
+        key={index}
+        index={index}
+        width={width}
+        grow={grow}
+        level={this.props.level}
+        textAlign={textAlign}
+        indent={indent}
+        verticalSpacing={this.props.verticalSpacing}
+        isHeader={false}
+        text={text}
+        selectionChanged={() => this.onSelectionChanged(rowId)}
+        onDoubleClick={() => this.onDoubleClick(rowId)}
+      />
+    );
+  }
+
+  renderRowCells(header, row) {
+    let index = 0;
+    const h = Widget.shred(header);
+    return h
+      .map((column) => {
+        const text = row.get(column.get('name'));
+
+        return this.renderRowCell(
+          row.get('id'),
+          column.get('width'),
+          column.get('grow'),
+          column.get('textAlign'),
+          column.get('indent'),
+          text,
+          index++
+        );
+      })
+      .valueSeq()
+      .toArray();
+  }
+
+  render() {
+    var styleName = this.props.selected ? 'rowSelected' : 'row';
+    const rowClass = this.styles.classNames[styleName];
+
+    return (
+      <div
+        key={this.props.index}
+        className={`${this.props.hoverClass} ${rowClass}`}
+      >
+        {this.renderExpandButton()}
+        {this.renderRowCells(
+          this.props.header.valueSeq().toArray(),
+          this.props.row
+        )}
+      </div>
+    );
+  }
+}
+
+/******************************************************************************/

package/widgets/triangle/props.js

@@ -1,48 +1,48 @@
-import {types} from 'goblin-gadgets/types/types.js';
-
-export default [
-  // Main.
-  {
-    name: 'position',
-    group: 'main',
-    type: types.enum(['left', 'right', 'top', 'bottom']),
-    description: 'Position of the triangle, relative to the parent.',
-  },
-  {
-    name: 'size',
-    group: 'main',
-    type: types.pixel,
-    min: 0,
-    max: 200,
-  },
-  {
-    name: 'shift',
-    group: 'main',
-    type: types.pixel,
-    min: -500,
-    max: 500,
-  },
-  {
-    name: 'color',
-    group: 'main',
-    type: types.color,
-  },
-
-  // Simulation.
-  {
-    name: 'parentSimulatorHeight',
-    group: 'simulation',
-    type: types.pixel,
-    min: 0,
-    max: 1000,
-  },
-  {
-    name: 'parentSimulatorWidth',
-    group: 'simulation',
-    type: types.pixel,
-    min: 0,
-    max: 1000,
-    description:
-      'Height and width of the parent, only for simulation. Normally, these values are not specified.',
-  },
-];
+import {types} from 'goblin-gadgets/types/types.js';
+
+export default [
+  // Main.
+  {
+    name: 'position',
+    group: 'main',
+    type: types.enum(['left', 'right', 'top', 'bottom']),
+    description: 'Position of the triangle, relative to the parent.',
+  },
+  {
+    name: 'size',
+    group: 'main',
+    type: types.pixel,
+    min: 0,
+    max: 200,
+  },
+  {
+    name: 'shift',
+    group: 'main',
+    type: types.pixel,
+    min: -500,
+    max: 500,
+  },
+  {
+    name: 'color',
+    group: 'main',
+    type: types.color,
+  },
+
+  // Simulation.
+  {
+    name: 'parentSimulatorHeight',
+    group: 'simulation',
+    type: types.pixel,
+    min: 0,
+    max: 1000,
+  },
+  {
+    name: 'parentSimulatorWidth',
+    group: 'simulation',
+    type: types.pixel,
+    min: 0,
+    max: 1000,
+    description:
+      'Height and width of the parent, only for simulation. Normally, these values are not specified.',
+  },
+];

package/widgets/triangle/scenarios.js

@@ -1,33 +1,33 @@
-export default [
-  {
-    name: 'default',
-    props: {
-      parentSimulatorWidth: '300px',
-      parentSimulatorHeight: '32px',
-    },
-  },
-  {
-    name: 'big-bottom',
-    props: {
-      parentSimulatorWidth: '300px',
-      parentSimulatorHeight: '32px',
-      position: 'bottom',
-      size: '50px',
-      color: 'red',
-    },
-  },
-  {
-    name: 'big-top',
-    props: {
-      parentSimulatorWidth: '300px',
-      parentSimulatorHeight: '32px',
-      position: 'top',
-      size: '50px',
-      color: 'red',
-    },
-  },
-  {
-    name: 'empty',
-    props: {},
-  },
-];
+export default [
+  {
+    name: 'default',
+    props: {
+      parentSimulatorWidth: '300px',
+      parentSimulatorHeight: '32px',
+    },
+  },
+  {
+    name: 'big-bottom',
+    props: {
+      parentSimulatorWidth: '300px',
+      parentSimulatorHeight: '32px',
+      position: 'bottom',
+      size: '50px',
+      color: 'red',
+    },
+  },
+  {
+    name: 'big-top',
+    props: {
+      parentSimulatorWidth: '300px',
+      parentSimulatorHeight: '32px',
+      position: 'top',
+      size: '50px',
+      color: 'red',
+    },
+  },
+  {
+    name: 'empty',
+    props: {},
+  },
+];

package/widgets/triangle/styles.js

@@ -1,92 +1,92 @@
-import {Unit} from 'goblin-theme';
-import {ColorHelpers} from 'goblin-theme';
-
-/******************************************************************************/
-
-export const propNames = [
-  'parentSimulatorWidth',
-  'parentSimulatorHeight',
-  'position',
-  'size',
-  'shift',
-  'color',
-];
-
-export default function styles(theme, props) {
-  let {
-    parentSimulatorWidth,
-    parentSimulatorHeight,
-    position = 'bottom',
-    size = theme.shapes.flyingBalloonTriangleSize,
-    shift,
-    color = theme.palette.flyingBalloonBackground,
-  } = props;
-
-  const triangleColor = ColorHelpers.getMarkColor(theme, color);
-
-  const parentSimulator = {
-    position: 'relative',
-    width: parentSimulatorWidth,
-    height: parentSimulatorHeight,
-    border: '1px dashed #aaa',
-  };
-
-  let triangle = {};
-  const t = Unit.add(size, '0px', 0); // round (suppress decimals)
-  const tt = shift ? Unit.add(t, shift) : t;
-  const p = Unit.add(size, '1px');
-
-  switch (position) {
-    case 'left':
-      triangle = {
-        position: 'absolute',
-        height: '0px',
-        bottom: 'calc(50% - ' + tt + ')',
-        left: '-' + p,
-        borderTop: t + ' solid transparent',
-        borderBottom: t + ' solid transparent',
-        borderLeft: t + ' solid ' + triangleColor,
-      };
-      break;
-    case 'right':
-      triangle = {
-        position: 'absolute',
-        height: '0px',
-        bottom: 'calc(50% - ' + tt + ')',
-        right: '-' + p,
-        borderTop: t + ' solid transparent',
-        borderBottom: t + ' solid transparent',
-        borderRight: t + ' solid ' + triangleColor,
-      };
-      break;
-    case 'bottom':
-      triangle = {
-        position: 'absolute',
-        width: '0px',
-        left: 'calc(50% - ' + tt + ')',
-        bottom: '-' + p,
-        borderLeft: t + ' solid transparent',
-        borderRight: t + ' solid transparent',
-        borderBottom: t + ' solid ' + triangleColor,
-      };
-      break;
-    case 'top':
-      triangle = {
-        position: 'absolute',
-        width: '0px',
-        left: 'calc(50% - ' + tt + ')',
-        top: '-' + p,
-        borderLeft: t + ' solid transparent',
-        borderRight: t + ' solid transparent',
-        borderTop: t + ' solid ' + triangleColor,
-      };
-      break;
-  }
-
-  return {
-    parentSimulator,
-    triangle,
-  };
-}
-
-/******************************************************************************/
+import {Unit} from 'goblin-theme';
+import {ColorHelpers} from 'goblin-theme';
+
+/******************************************************************************/
+
+export const propNames = [
+  'parentSimulatorWidth',
+  'parentSimulatorHeight',
+  'position',
+  'size',
+  'shift',
+  'color',
+];
+
+export default function styles(theme, props) {
+  let {
+    parentSimulatorWidth,
+    parentSimulatorHeight,
+    position = 'bottom',
+    size = theme.shapes.flyingBalloonTriangleSize,
+    shift,
+    color = theme.palette.flyingBalloonBackground,
+  } = props;
+
+  const triangleColor = ColorHelpers.getMarkColor(theme, color);
+
+  const parentSimulator = {
+    position: 'relative',
+    width: parentSimulatorWidth,
+    height: parentSimulatorHeight,
+    border: '1px dashed #aaa',
+  };
+
+  let triangle = {};
+  const t = Unit.add(size, '0px', 0); // round (suppress decimals)
+  const tt = shift ? Unit.add(t, shift) : t;
+  const p = Unit.add(size, '1px');
+
+  switch (position) {
+    case 'left':
+      triangle = {
+        position: 'absolute',
+        height: '0px',
+        bottom: 'calc(50% - ' + tt + ')',
+        left: '-' + p,
+        borderTop: t + ' solid transparent',
+        borderBottom: t + ' solid transparent',
+        borderLeft: t + ' solid ' + triangleColor,
+      };
+      break;
+    case 'right':
+      triangle = {
+        position: 'absolute',
+        height: '0px',
+        bottom: 'calc(50% - ' + tt + ')',
+        right: '-' + p,
+        borderTop: t + ' solid transparent',
+        borderBottom: t + ' solid transparent',
+        borderRight: t + ' solid ' + triangleColor,
+      };
+      break;
+    case 'bottom':
+      triangle = {
+        position: 'absolute',
+        width: '0px',
+        left: 'calc(50% - ' + tt + ')',
+        bottom: '-' + p,
+        borderLeft: t + ' solid transparent',
+        borderRight: t + ' solid transparent',
+        borderBottom: t + ' solid ' + triangleColor,
+      };
+      break;
+    case 'top':
+      triangle = {
+        position: 'absolute',
+        width: '0px',
+        left: 'calc(50% - ' + tt + ')',
+        top: '-' + p,
+        borderLeft: t + ' solid transparent',
+        borderRight: t + ' solid transparent',
+        borderTop: t + ' solid ' + triangleColor,
+      };
+      break;
+  }
+
+  return {
+    parentSimulator,
+    triangle,
+  };
+}
+
+/******************************************************************************/