open-index/open-npm huggingface dataset:
npm package: @ray-js/doublekey
Description: 双键
Latest version: 1.0.0

English | [简体中文](./README-zh_CN.md)

# @ray-js/doublekey

> DoubleKey

## Installation

```sh
$ npm install @ray-js/doublekey
# or
$ yarn add @ray-js/doublekey
```

## Usage

```tsx
import DoubleKey from '@ray-js/doublekey';

<DoubleKey
  status={[true, true]}
  tip="volume"
  text={['top', 'bottom']}
  onPress={[
    () => {
      console.log('click top');
    },
    () => {
      console.log('click bottom');
    },
  ]}
  onLongPress={[
    () => {
      console.log('longClick top');
    },
    () => {
      console.log('longClick bottom');
    },
  ]}
/>

<DoubleKey
  status={[true, true]}
  tip="text"
  img={[Res.add, Res.minus]}
  type="horizontal"
  width={200}
/>

```
npm package: @ray-js/energy-flow-graph
Description: 能流图
Latest version: 0.0.3

English | [简体中文](./README-zh_CN.md)

# @ray-js/energy-flow-graph

[![latest](https://img.shields.io/npm/v/@ray-js/energy-flow-graph/latest.svg)](https://www.npmjs.com/package/@ray-js/energy-flow-graph) [![download](https://img.shields.io/npm/dt/@ray-js/energy-flow-graph.svg)](https://www.npmjs.com/package/@ray-js/energy-flow-graph)

> energy flow graph

## Installation

```sh
$ npm install @ray-js/energy-flow-graph
# or
$ yarn add @ray-js/energy-flow-graph
```

## Usage

```tsx
import EnergyFlowGraph from '@ray-js/energy-flow-graph';
export default () => (
  <EnergyFlowGraph
    systemType="3"
    timeZoneId="Asia/Shanghai"
    graphData={{
      reportTime: 1718870900000,
      backupLoadTotalPower: -2,
      totalPvPower: -3,
      totalGridPower: -4,
    }}
  />
);
```

## API

### systemType

- '3': Micro Inverter,
- '0-1': PV-Storage,
- '1-2-4': Storage-Consumption-Grid,
- '0-2-4': PV-Consumption-Grid,
- '0-1-2-4': PV-Storage-Consumption-Grid,
- '0-1-2-4-5': PV-Storage-Consumption-Grid-Electric Vehicle Supply Equipment

### IGraphData

| Name                    | Description                             | Type   | Default |
| ----------------------- | --------------------------------------- | ------ | ------- |
| reportTime              | report time                             | number |         |
| backupLoadTotalPower    | backup load total power                 | number |         |
| totalPvPower            | total pv power                          | number |         |
| totalGridPower          | total grid power                        | number |         |
| chargeAndDisChargePower | charge and discharge power              | number |         |
| evsePower               | Electric Vehicle Supply Equipment power | number |         |
npm package: @ray-js/gateway-add-device-progress
Description: 网关添加设备进度组件
Latest version: 2.0.6

English | [简体中文](./README-zh_CN.md)

# @ray-js/gateway-add-device-progress

[![latest](https://img.shields.io/npm/v/@ray-js/gateway-add-device-progress/latest.svg)](https://www.npmjs.com/package/@ray-js/gateway-add-device-progress) [![download](https://img.shields.io/npm/dt/@ray-js/gateway-add-device-progress.svg)](https://www.npmjs.com/package/@ray-js/gateway-add-device-progress)

> Gateway adds device progress component

## Installation

```sh
$ npm install @ray-js/gateway-add-device-progress
# or
$ yarn add @ray-js/gateway-add-device-progress
```

## Usage

### Gateway adds device progress component Demo

```tsx
import GatewayAddDeviceProgress from '@ray-js/gateway-add-device-progress';

<GatewayAddDeviceProgress
  show={true}
  percent={25}
  isShowButton={false}
  isShowPrompt
  onClickOverlay={hideProgress}
  onClick={onClick}
/>;
```
npm package: @ray-js/gesture
Description: Tuya Ray 手势库
Latest version: 0.1.6

English | [简体中文](./README-zh_CN.md)

# @ray-js/gesture

[![latest](https://img.shields.io/npm/v/@ray-js/gesture/latest.svg)](https://www.npmjs.com/package/@ray-js/gesture) [![download](https://img.shields.io/npm/dt/@ray-js/gesture.svg)](https://www.npmjs.com/package/@ray-js/gesture)

> Tuya Ray 手势库

## Installation

```sh
$ npm install @ray-js/gesture
# or
$ yarn add @ray-js/gesture
```

## Usage

### Class Component

```tsx
import React from 'react';
import { View, Text } from '@ray-js/components';
import Gesture from '@ray-js/gesture';

export default () => (
  <Gesture
    onTap={event => {
      console.log('onTap', event);
    }}
  >
    <View />
  </Gesture>
);
```

### useGesture

```tsx
import React from 'react';
import { View, Text } from '@ray-js/components';
import { useGesture } from '@ray-js/gesture';

export default () => {
  const gesture = useGesture({
    onTap: event => {
      console.log('onTap', event);
    },
  });
  <View {...gesture} />;
};
```

### useRect

```tsx
import React from 'react';
import { View, Text } from '@ray-js/components';
import useRect from '@ray-js/gesture';

export default props => {
  const [id, ref, rect] = useRect();
  console.log(rect.width, rect.height); // 150 150
  return <View ref={ref} id={id} style={{ width: '150px', height: '150px' }} />;
};
```

## References

- [@use-gesture](https://github.com/pmndrs/use-gesture)
- [Finger.Taro](https://github.com/xueyida/Finger.taro)
- [https://github.com/AlloyTeam/AlloyFinger](http://www.alloyteam.com/2016/05/super-small-web-gesture-library-alloyfinger-released/)
- [rc-gesture](https://github.com/react-component/gesture)
npm package: @ray-js/graffiti
Description: 画布涂鸦组件
Latest version: 1.1.6

English | [简体中文](./README-zh_CN.md)

# @ray-js/graffiti

[![latest](https://img.shields.io/npm/v/@ray-js/graffiti/latest.svg)](https://www.npmjs.com/package/@ray-js/graffiti) [![download](https://img.shields.io/npm/dt/@ray-js/graffiti.svg)](https://www.npmjs.com/package/@ray-js/graffiti)

> Canvas Graffiti

## Installation

```sh
$ npm install @ray-js/graffiti
# or
$ yarn add @ray-js/graffiti
```

## Develop

```sh
# install deps
yarn

# watch compile demo
yarn start:tuya
```

## Code Demonstration

### Basic usage

- By changing the operation type, you can switch to pencil mode, eraser mode, paint bucket mode
- By changing `penColor`, you can pass in different pen colors
- `needStroke` is `true`, start monitoring each brush data, and get the x, y coordinate path data of each brush stroke through `onStrokeChange`
- Updating the `saveTrigger` value triggers canvas saving, returning the canvas's base64 data and grid color data.
- Updating the `clearTrigger` value triggers canvas clearing.
- The `scale` function allows scaling the canvas.
- `isDragging` disables drawing; the canvas can be dragged when it exceeds the limit.

```tsx
import React, { useState } from 'react';
import { View } from '@ray-js/ray';
import Graffiti from '@ray-js/graffiti';

type IStrokeData = {
  points: Array<{ x: number; y: number }>;
};

type IData = {
  base64: string;
};

export function Home() {
  const [actionType, setActiontype] = useState<'pencil' | 'eraser' | 'paint'>('pencil');
  const [color, setColor] = useState('rgba(255, 0, 0, 1)');
  const [saveTrigger, setSaveTrigger] = useState(0);
  const [clearTrigger, setClearTrigger] = useState(0);
  const [scale, setScale] = useState<number>(1);
  const [isDragging, setIsDragging] = useState<boolean>(false);

  const reset = () => {
    setClearTrigger(clearTrigger + 1);
  };

  const save = () => {
    setSaveTrigger(saveTrigger + 1);
  };

  const handleStrokeChange = (data: IPoints) => {
    console.log('handleStrokeChange', data);
  };

  const handleSaveData = (data: IData) => {
    console.log('handleSaveData', data);
  };

  return (
    <>
      <Graffiti
        needStroke
        penColor={color}
        actionType={actionType}
        saveTrigger={saveTrigger}
        clearTrigger={clearTrigger}
        scale={scale}
        isDragging={isDragging}
        onStrokeChange={handleStrokeChange}
        onSaveData={handleSaveData}
      />
      <View className="footer">
        <Button className="btn" type="primary" onClick={reset}>
          Reset
        </Button>
        <Button className="btn" type="primary" onClick={save}>
          Save
        </Button>
      </View>
    <>
  );
}
```