goblin-gadgets 3.2.2 → 3.2.3

package/widgets/colored-container/props.js

@@ -1,34 +1,34 @@
-import {types} from 'goblin-gadgets/types/types.js';
-
-export default [
-  // Aspect.
-  {
-    name: 'value',
-    group: 'aspect',
-    type: types.number,
-    min: 0,
-    max: 100,
-    description: 'Value between 0 and 100.',
-  },
-
-  // Layout.
-  {
-    name: 'width',
-    group: 'layout',
-    type: types.pixel,
-    min: 0,
-    max: 1000,
-  },
-  {
-    name: 'height',
-    group: 'layout',
-    type: types.pixel,
-    min: 0,
-    max: 1000,
-  },
-  {
-    name: 'grow',
-    group: 'layout',
-    type: types.grow,
-  },
-];
+import {types} from 'goblin-gadgets/types/types.js';
+
+export default [
+  // Aspect.
+  {
+    name: 'value',
+    group: 'aspect',
+    type: types.number,
+    min: 0,
+    max: 100,
+    description: 'Value between 0 and 100.',
+  },
+
+  // Layout.
+  {
+    name: 'width',
+    group: 'layout',
+    type: types.pixel,
+    min: 0,
+    max: 1000,
+  },
+  {
+    name: 'height',
+    group: 'layout',
+    type: types.pixel,
+    min: 0,
+    max: 1000,
+  },
+  {
+    name: 'grow',
+    group: 'layout',
+    type: types.grow,
+  },
+];

package/widgets/colored-container/scenarios.js

@@ -1,54 +1,54 @@
-export default [
-  {
-    name: '0',
-    props: {
-      height: '100px',
-      width: '100px',
-      value: 0,
-    },
-  },
-  {
-    name: '20',
-    props: {
-      height: '100px',
-      width: '100px',
-      value: 20,
-    },
-  },
-  {
-    name: '40',
-    props: {
-      height: '100px',
-      width: '100px',
-      value: 40,
-    },
-  },
-  {
-    name: '60',
-    props: {
-      height: '100px',
-      width: '100px',
-      value: 60,
-    },
-  },
-  {
-    name: '80',
-    props: {
-      height: '100px',
-      width: '100px',
-      value: 80,
-    },
-  },
-  {
-    name: '100',
-    props: {
-      height: '100px',
-      width: '100px',
-      value: 100,
-    },
-  },
-  {
-    name: 'empty',
-    props: {},
-  },
-];
+export default [
+  {
+    name: '0',
+    props: {
+      height: '100px',
+      width: '100px',
+      value: 0,
+    },
+  },
+  {
+    name: '20',
+    props: {
+      height: '100px',
+      width: '100px',
+      value: 20,
+    },
+  },
+  {
+    name: '40',
+    props: {
+      height: '100px',
+      width: '100px',
+      value: 40,
+    },
+  },
+  {
+    name: '60',
+    props: {
+      height: '100px',
+      width: '100px',
+      value: 60,
+    },
+  },
+  {
+    name: '80',
+    props: {
+      height: '100px',
+      width: '100px',
+      value: 80,
+    },
+  },
+  {
+    name: '100',
+    props: {
+      height: '100px',
+      width: '100px',
+      value: 100,
+    },
+  },
+  {
+    name: 'empty',
+    props: {},
+  },
+];

package/widgets/colored-container/styles.js

@@ -1,100 +1,100 @@
-/******************************************************************************/
-
-//  Compute the color of gauge.
-function getColor(gradient, value, alpha) {
-  if (value) {
-    value /= 100; // 0..1
-    let red, green, blue;
-    if (gradient === 'red-yellow-green') {
-      if (value < 0.5) {
-        // From red to yellow.
-        value = value * 2; // 0..1
-        red = 255;
-        green = 255 * value; // 0/1 -> 0/255
-      } else {
-        // From yellow to green.
-        value = (value - 0.5) * 2; // 0..1
-        red = 255 - 255 * value; // 0/1 -> 255/0
-        green = 255;
-      }
-      blue = 0;
-    } else if (gradient === 'yellow-green') {
-      // From yellow to green.
-      red = 255 - 255 * value; // 0/1 -> 255/0
-      green = 255;
-      blue = 0;
-    } else if (gradient === 'blue-petrol-green') {
-      if (value < 0.5) {
-        // From blue to purple.
-        value = value * 2; // 0..1
-        blue = 255;
-        red = 0;
-        green = 255 * value; // 0/1 -> 0/255
-      } else {
-        // From purple to green.
-        value = (value - 0.5) * 2; // 0..1
-        blue = 255 - 255 * value; // 0/1 -> 255/0
-        green = 255;
-      }
-      red = 0;
-    } else {
-      // From orange to red.
-      red = 255;
-      green = 128 - 128 * value; // 0/1 -> 128/0
-      blue = 0;
-    }
-    return `rgba(${Math.floor(red)},${Math.floor(green)},${Math.floor(
-      blue
-    )},${alpha})`;
-  } else {
-    return '#fff';
-  }
-}
-
-/******************************************************************************/
-
-export const propNames = [
-  'gradient',
-  'value',
-  'alpha',
-  'width',
-  'height',
-  'grow',
-  'margin',
-  'padding',
-  'radius',
-];
-
-export default function styles(theme, props) {
-  const {
-    gradient = 'red-yellow-green',
-    value,
-    alpha = 1,
-    width,
-    height,
-    grow,
-    margin,
-    padding,
-    radius,
-  } = props;
-
-  const gaugeValue = Math.max(Math.min(value, 100), 0); // 0..100
-
-  const colorerContainer = {
-    flexDirection: 'column',
-    height: height,
-    width: width,
-    margin: margin,
-    padding: padding,
-    borderRadius: radius,
-    display: 'flex',
-    flexGrow: grow,
-    backgroundColor: getColor(gradient, gaugeValue, alpha),
-  };
-
-  return {
-    colorerContainer,
-  };
-}
-
-/******************************************************************************/
+/******************************************************************************/
+
+//  Compute the color of gauge.
+function getColor(gradient, value, alpha) {
+  if (value) {
+    value /= 100; // 0..1
+    let red, green, blue;
+    if (gradient === 'red-yellow-green') {
+      if (value < 0.5) {
+        // From red to yellow.
+        value = value * 2; // 0..1
+        red = 255;
+        green = 255 * value; // 0/1 -> 0/255
+      } else {
+        // From yellow to green.
+        value = (value - 0.5) * 2; // 0..1
+        red = 255 - 255 * value; // 0/1 -> 255/0
+        green = 255;
+      }
+      blue = 0;
+    } else if (gradient === 'yellow-green') {
+      // From yellow to green.
+      red = 255 - 255 * value; // 0/1 -> 255/0
+      green = 255;
+      blue = 0;
+    } else if (gradient === 'blue-petrol-green') {
+      if (value < 0.5) {
+        // From blue to purple.
+        value = value * 2; // 0..1
+        blue = 255;
+        red = 0;
+        green = 255 * value; // 0/1 -> 0/255
+      } else {
+        // From purple to green.
+        value = (value - 0.5) * 2; // 0..1
+        blue = 255 - 255 * value; // 0/1 -> 255/0
+        green = 255;
+      }
+      red = 0;
+    } else {
+      // From orange to red.
+      red = 255;
+      green = 128 - 128 * value; // 0/1 -> 128/0
+      blue = 0;
+    }
+    return `rgba(${Math.floor(red)},${Math.floor(green)},${Math.floor(
+      blue
+    )},${alpha})`;
+  } else {
+    return '#fff';
+  }
+}
+
+/******************************************************************************/
+
+export const propNames = [
+  'gradient',
+  'value',
+  'alpha',
+  'width',
+  'height',
+  'grow',
+  'margin',
+  'padding',
+  'radius',
+];
+
+export default function styles(theme, props) {
+  const {
+    gradient = 'red-yellow-green',
+    value,
+    alpha = 1,
+    width,
+    height,
+    grow,
+    margin,
+    padding,
+    radius,
+  } = props;
+
+  const gaugeValue = Math.max(Math.min(value, 100), 0); // 0..100
+
+  const colorerContainer = {
+    flexDirection: 'column',
+    height: height,
+    width: width,
+    margin: margin,
+    padding: padding,
+    borderRadius: radius,
+    display: 'flex',
+    flexGrow: grow,
+    backgroundColor: getColor(gradient, gaugeValue, alpha),
+  };
+
+  return {
+    colorerContainer,
+  };
+}
+
+/******************************************************************************/

package/widgets/colored-container/widget.js

@@ -1,27 +1,27 @@
-import React from 'react';
-import Widget from 'goblin-laboratory/widgets/widget';
-import props from './props';
-import scenarios from './scenarios';
-import {registerWidget} from 'goblin-gadgets/widgets/widget-doc/widget-list';
-import * as styles from './styles';
-
-/******************************************************************************/
-
-export default class ColorerContainer extends Widget {
-  constructor() {
-    super(...arguments);
-    this.styles = styles;
-  }
-
-  render() {
-    return (
-      <div className={this.styles.classNames.colorerContainer}>
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-/******************************************************************************/
-
-registerWidget(ColorerContainer, props, scenarios);
+import React from 'react';
+import Widget from 'goblin-laboratory/widgets/widget';
+import props from './props';
+import scenarios from './scenarios';
+import {registerWidget} from 'goblin-gadgets/widgets/widget-doc/widget-list';
+import * as styles from './styles';
+
+/******************************************************************************/
+
+export default class ColorerContainer extends Widget {
+  constructor() {
+    super(...arguments);
+    this.styles = styles;
+  }
+
+  render() {
+    return (
+      <div className={this.styles.classNames.colorerContainer}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+/******************************************************************************/
+
+registerWidget(ColorerContainer, props, scenarios);

package/widgets/combo/styles.js

@@ -1,69 +1,69 @@
-/******************************************************************************/
-
-export const propNames = [
-  'trianglePosition',
-  'left',
-  'right',
-  'top',
-  'bottom',
-  'maxHeight',
-  'width',
-];
-
-export default function styles(theme, props) {
-  const {trianglePosition, left, right, top, bottom, maxHeight, width} = props;
-
-  const fullScreen = {
-    visibility: 'visible',
-    position: 'fixed',
-    zIndex: 11,
-    top: '0px',
-    left: '0px',
-    width: '100%',
-    height: '100%',
-    userSelect: 'none',
-    cursor: 'default',
-    // backgroundColor: 'rgba(0, 0, 0, 0.2)',
-  };
-
-  const combo = {
-    visibility: 'visible',
-    position: 'absolute',
-    transform: trianglePosition ? null : 'translate(-50%, 0%)',
-    zIndex: 11,
-    left,
-    right,
-    top,
-    bottom,
-    opacity: 1.0,
-    cursor: 'default',
-    userSelect: 'none',
-  };
-
-  const inside = {
-    maxHeight: maxHeight,
-    overflowY: 'auto',
-    cursor: 'default',
-    userSelect: 'none',
-  };
-
-  const insideWrap = {
-    maxHeight: maxHeight,
-    width: width,
-    overflowY: 'auto',
-    cursor: 'default',
-    userSelect: 'none',
-    display: 'flex',
-    flexDirection: 'column',
-    flexWrap: 'wrap',
-  };
-
-  return {
-    fullScreen,
-    combo,
-    inside,
-    insideWrap,
-  };
-}
-
-/******************************************************************************/
+/******************************************************************************/
+
+export const propNames = [
+  'trianglePosition',
+  'left',
+  'right',
+  'top',
+  'bottom',
+  'maxHeight',
+  'width',
+];
+
+export default function styles(theme, props) {
+  const {trianglePosition, left, right, top, bottom, maxHeight, width} = props;
+
+  const fullScreen = {
+    visibility: 'visible',
+    position: 'fixed',
+    zIndex: 11,
+    top: '0px',
+    left: '0px',
+    width: '100%',
+    height: '100%',
+    userSelect: 'none',
+    cursor: 'default',
+    // backgroundColor: 'rgba(0, 0, 0, 0.2)',
+  };
+
+  const combo = {
+    visibility: 'visible',
+    position: 'absolute',
+    transform: trianglePosition ? null : 'translate(-50%, 0%)',
+    zIndex: 11,
+    left,
+    right,
+    top,
+    bottom,
+    opacity: 1.0,
+    cursor: 'default',
+    userSelect: 'none',
+  };
+
+  const inside = {
+    maxHeight: maxHeight,
+    overflowY: 'auto',
+    cursor: 'default',
+    userSelect: 'none',
+  };
+
+  const insideWrap = {
+    maxHeight: maxHeight,
+    width: width,
+    overflowY: 'auto',
+    cursor: 'default',
+    userSelect: 'none',
+    display: 'flex',
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+  };
+
+  return {
+    fullScreen,
+    combo,
+    inside,
+    insideWrap,
+  };
+}
+
+/******************************************************************************/