0.0.7 • Published 11 months ago

@ray-js/lamp-strip-light-smear v0.0.7

Weekly downloads
-
License
MIT
Repository
-
Last release
11 months ago

English | 简体中文

@ray-js/lamp-strip-light-smear

latest download

lamp-strip-light-smear

Installation

$ npm install @ray-js/lamp-strip-light-smear
# or
$ yarn add @ray-js/lamp-strip-light-smear

Develop

# watch compile component code
yarn watch
# watch compile demo
yarn start:tuya

Usage

import DimmerStrip, { hsv2rgbString } from '@ray-js/lamp-strip-light-smear';
export default () => {
  const [smearedColor, setSmearedColor] = useState<HSV>({ h: 0, s: 1000, v: 1000 });
  const [lightColorMaps, setLightColorMaps] = useState({});
  const [smearMode, setSmearMode] = useState(SmearMode.all);

  useEffect(() => {
    // Simulation modifies the color of the current smear
    setTimeout(() => {
      setSmearedColor({ h: 120, s: 1000, v: 1000 });
    }, 1000);
  }, []);

  useEffect(() => {
    const _lightColorMaps = {};
    const { h, s, v } = smearedColor;
    new Array(20).fill(0).forEach((_, index) => {
      _lightColorMaps[index] = hsv2rgbString(h, s / 10, v / 10, 1);
    });
    setLightColorMaps(_lightColorMaps);
  }, []);

  const onChange = data => {
    const newCheckedMapColor = {};
    [...data].forEach(item => {
      newCheckedMapColor[item] = hsv2rgbString(
        smearedColor.h,
        smearedColor.s / 10,
        smearedColor.v / 10,
        1
      );
    });
    const _lightColorMaps = {
      ...lightColorMaps,
      ...newCheckedMapColor,
    };
    setLightColorMaps(_lightColorMaps);
  };

  const onEnd = data => {
    const newCheckedMapColor = {};
    [...data].forEach(item => {
      newCheckedMapColor[item] = hsv2rgbString(
        smearedColor.h,
        smearedColor.s / 10,
        smearedColor.v / 10,
        1
      );
    });
    const _lightColorMaps = {
      ...lightColorMaps,
      ...newCheckedMapColor,
    };
    setLightColorMaps(_lightColorMaps);
  };

  return (
    <DimmerStrip
      className="aaa"
      disabled={false}
      type={smearMode}
      gradient
      smearedColor={smearedColor}
      lightColorMaps={lightColorMaps}
      onLightChange={onChange}
      onLightEnd={onEnd}
    />
  );
};
0.0.8-beta-1

11 months ago

0.0.8-beta-2

11 months ago

0.0.7-beta-1

1 year ago

0.0.7

1 year ago

0.0.6-beta-1

1 year ago

0.0.6

1 year ago

0.0.5-beta-1

1 year ago

0.0.4-beta-1

1 year ago

0.0.3-beta-1

1 year ago

0.0.2-beta-1

1 year ago

0.0.1-beta-1

1 year ago