npm package: @ray-js/lamp-mutation-sync-utils
Description: 开关灯渐变工具包
Latest version: 0.0.1

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

# @ray-js/lamp-mutation-sync-utils

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

> Switch lamp transition toolkit

## Installation

```sh
$ npm install @ray-js/lamp-mutation-sync-utils
// Or
$ yarn add @ray-js/lamp-mutation-sync-utils
```

## Development

```sh
# Real-time compilation of demo code
yarn start:tuya
```

## Usage

### Navigate to Functional Page

```ts
import { navigateToLampMutationFunctional } from '@ray-js/lamp-mutation-sync-utils';

const jumpUrl = `functional://LampMutationFunctional/home?deviceId=${deviceId || ''}&groupId=${
  groupId || ''
}`;

navigateToLampMutationFunctional(jumpUrl);
```

### Modify Functional Page Style

```ts
import { navigateToLampMutationFunctional } from '@ray-js/lamp-mutation-sync-utils';

const jumpUrl = `functional://LampMutationFunctional/home?deviceId=${deviceId || ''}&groupId=${
  groupId || ''
}`;

navigateToLampMutationFunctional(jumpUrl, {
  smartUIThemeVars: {
    stepperBackgroundColor: 'red',
  },
  cardStyle: {
    background: 'red',
  },
  descStyle: {
    background: 'red',
  },
});
```

## API

| Method Name                      | Parameter Description                   | Type                                                                  |
| -------------------------------- | --------------------------------------- | --------------------------------------------------------------------- |
| presetLampMutationFunctionalData | Store functional page data as a Promise | `(url: string, data: LampMutationFunctionalData) => Promise<boolean>` |
| clearLampMutationFunctionalData  | Clear functional page data              | `(url: string) => Promise<boolean>`                                   |
| navigateToLampMutationFunctional | Jump to the feature page                | `(url: string, data?: LampMutationFunctionalData) => void`            |
| useLampMutationPresetData        | Get stored functional page data         | `() => LampMutationFunctionalData`                                    |

### LampMutationFunctionalData

| Parameter        | Parameter Description                                                                                                                                                                | Type                                    | Default | Required |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------- | ------- | -------- |
| smartUIThemeVars | The variables of the smart-ui component refer to the `themeVars` attribute of the ConfigProvider component. The styles of the components that can be modified are: `NavBar, Stepper` | `SmartConfigProviderProps['themeVars']` | -       | Optional |
| cardStyle        | Style of the entire page card                                                                                                                                                        | `React.CSSProperties`                   | -       | Optional |
| descStyle        | Style of text line at the bottom of the page                                                                                                                                         | `React.CSSProperties`                   | -       | Optional |