github.com/stampzilla/stampzilla-go@v2.0.0-rc9+incompatible/nodes/stampzilla-server/web/src/routes/dashboard/Trait.js (about)

     1  import React, { Component } from 'react';
     2  import { AlphaPicker } from 'react-color';
     3  import SliderPointer from 'react-color/lib/components/slider/SliderPointer';
     4  import Switch from 'react-switch';
     5  import ct from 'color-temperature';
     6  
     7  import { uniqeId } from '../../helpers';
     8  
     9  // import HueColorPicker from './HueColorPicker';
    10  
    11  const temperatureToRgb = (temp) => {
    12    const color = ct.colorTemperature2rgb(temp);
    13    return `rgb(${color.red}, ${color.green}, ${color.blue})`;
    14  };
    15  
    16  const temperatureGradient = (start = 2000, end = 6000, steps = 10) => {
    17    const grad = [];
    18    for (let i = 0; i <= steps; i += 1) {
    19      const temp = ((end - start) / steps) * i;
    20      grad.push(`${temperatureToRgb(temp + start)} ${(100 / steps) * i}%`);
    21    }
    22  
    23    return grad.join(', ');
    24  };
    25  
    26  class Trait extends Component {
    27    renderTrait() {
    28      const {
    29        trait, state, onChange, device,
    30      } = this.props;
    31      const id = uniqeId();
    32  
    33      switch (trait) {
    34        case 'OnOff':
    35          return (
    36            <label htmlFor={`switch-${id}`} className="mb-0 d-flex">
    37              <Switch
    38                checked={!!state || false}
    39                onChange={checked => onChange(checked)}
    40                disabled={!device.get('online') || !onChange}
    41                id={`switch-${id}`}
    42              />
    43            </label>
    44          );
    45  
    46        /*
    47            <span className="switch switch-sm">
    48              <input
    49                type="checkbox"
    50                className="switch btn-secondary"
    51                id={`switch-${id}`}
    52              />
    53              <label htmlFor={`switch-${id}`} className="mb-0" />
    54            </span> */
    55        case 'Brightness':
    56          return (
    57            <AlphaPicker
    58              style={{
    59                gradient: {
    60                  background: 'linear-gradient(to right, #000 0%, #fff 100%)',
    61                },
    62              }}
    63              pointer={SliderPointer}
    64              height="12px"
    65              width="100%"
    66              color={{
    67                r: 0,
    68                g: 0,
    69                b: 0,
    70                a: state || 0,
    71              }}
    72              onChange={({ rgb }) => onChange(rgb.a)}
    73              disabled={!device.get('online') || !onChange}
    74            />
    75          );
    76        case 'ColorSetting': {
    77          // <HueColorPicker />
    78          const start = 2000;
    79          const stop = 6500;
    80          return (
    81            <AlphaPicker
    82              style={{
    83                gradient: {
    84                  background: `linear-gradient(to right, ${temperatureGradient(
    85                    start,
    86                    stop,
    87                    10,
    88                  )})`,
    89                },
    90              }}
    91              pointer={SliderPointer}
    92              height="12px"
    93              width="100%"
    94              color={{
    95                r: 0,
    96                g: 0,
    97                b: 0,
    98                a: (state - start) / (stop - start) || 0,
    99              }}
   100              onChange={({ rgb }) => {
   101                const temp = rgb.a * (stop - start);
   102                return onChange(temp + start);
   103              }}
   104              disabled={!device.get('online') || !onChange}
   105            />
   106          );
   107        }
   108        default:
   109          return null;
   110      }
   111    }
   112  
   113    render() {
   114      return <React.Fragment>{this.renderTrait()}</React.Fragment>;
   115    }
   116  }
   117  
   118  export default Trait;