open-index/open-npm huggingface dataset:
npm package: @sinoui/message
Description: 全局提示消息条。
Latest version: 2.1.0

# @sinoui/message

[![npm version](https://img.shields.io/npm/v/@sinoui/message)](https://www.npmjs.com/package/@sinoui/message)
[![downloads](https://img.shields.io/npm/dm/@sinoui/message)](https://www.npmjs.com/package/@sinoui/message)

全局提示消息条。[官方文档](https://sinoui.github.io/message/)

## 安装

```shell
yarn add @sinoui/message
```

## 简单示例

```tsx
import React from 'react';
import message from '@sinoui/message';
import Button from '@sinoui/core/Button';

function Demo() {
  const handleClick = () => {
    message.info('这是一条提示消息');
  };

  return <Button onClick={handleClick}>显示消息</Button>;
}
```

更多示例请参考[官方文档](https://sinoui.github.io/message/)。

## 本地开发

项目中有以下有用的命令。

### `yarn start`

在开发和监听模式下启动项目。当代码发生变化时就会重新编译代码。它同时会实时地向你汇报项目中的代码错误。

### `yarn build`

打包，并将打包文件放在`dist`文件夹中。使用 rollup 对代码做优化并打包成多种格式（`Common JS`，`UMD`和`ES Module`）。

### `yarn lint`

`yarn lint`会检查整个项目是否有代码错误、风格错误。

开启 vscode 的 eslint、prettier 插件，在使用 vscode 编码时，就会自动修正风格错误、提示语法错误。

### `yarn format`

`yarn format`可以自动调整整个项目的代码风格问题。

### `yarn test`

`yarn test`以监听模式启动 jest，运行单元测试。

开启 vscode 的 jest 插件，会在文件变化时自动运行单元测试。

### 预览文档

```shell
yarn doc:dev
```

### 编译并打包文档

```shell
yarn doc:build
```

### 发布文档

```shell
yarn doc:publish
```
npm package: @sinoui/pop
Description: 弹出效果组件是用于给指定元素的点击或者 hover 动作添加一个附着的弹出框。
Latest version: 0.1.31

# 弹出效果组件

弹出效果组件是用于给指定元素的点击或者 hover 动作添加一个附着的弹出框。

特性：

* [x] 可自由控制弹出内容的渲染
* [x] 可以包含任何内容
* [x] 支持点击和 hover
* [x] 进场、出场动画
* [x] 弹出框的显示位置
* [x] 支持在 Modal 中使用
* [x] 支持自调整位置，不能超出屏幕之外
* [x] z-index

使用方式：

```typescript
import Pop from '@sinoui/pop';

export default function PopDemo() {
  return (
    <Pop render={() => <div>这是弹出的内容</div>}>
      <div>这是内容</div>
    </Pop>
  );
}
```

Pop 组件有以下属性：

| 属性名                   | 属性类型                          | 属性说明                         |
| ------------------------ | --------------------------------- | -------------------------------- |
| render                   | ({close}) => React.ReactNode      | 渲染弹出内容的函数               |
| children                 | React.ReactNode                   | 应用效果的内容                   |
| className                | string                            | 应用到容器的类                   |
| style                    | React.CSSProperties               | 应用到容器上的样式               |
| popContentClassName      | string                            | 应用到弹出框上的类               |
| popContentStyle          | React.CSSProperties               | 应用到弹出框上的样式             |
| popAction                | 'click' 或者 'hover'              | 弹出效果的动作类型。默认为 click |
| verticalPosition         | 'top' 或者 'bottom' 或者 'center' | 弹出框在垂直方向的位置           |
| horizontalPosition       | 'left' 或者 'right' 或者 'center' | 弹出框在水平方向的位置           |
| verticalOrigionPosition  | 'top' 或者 'bottom' 或者 'center' | 弹出框定位时垂直方向的原点位置   |
| horizontalOriginPosition | 'left' 或者 'right' 或者 'center' | 弹出框在水平方向的原点位置       |
| innerRef                 | (dom?: HTMLElement) => void       | 引用 dom 元素                    |

弹出框显示的默认位置：

* verticalPosition: 'bottom'
* horizontalPosition: 'left'
* verticalOrigionPosition: 'top'
* horizontalOriginPosition: 'left'

## 关于弹出框的位置

弹出框的位置是**弹出框的原点**相对于**参照物的原点**重合定义的。`verticalPosition`和`horizontalPosition`是定义**参照物的原点**的位置，`verticalOriginPositon`和`horizontalOriginPosition`是定义**弹出框的原点**位置。如：

定义**参照物的原点**位置为参照物的顶点：

```typescript
<Pop verticalPosition="top" horizontalPosition="left" />
```

定义**参照物的原点**位置位于参照物的顶部并且水平居中的位置：

```typescript
<Pop verticalPosition="top" horizontalPosition="center" />
```
npm package: @sinoui/ripple
Description: 遵循 Material Design 的涟漪效果实现。
Latest version: 1.0.13

# ripple [![npm version](https://img.shields.io/npm/v/@sinoui/ripple)](https://www.npmjs.com/package/@sinoui/ripple) [![downloads](https://img.shields.io/npm/dm/@sinoui/ripple)](https://www.npmjs.com/package/@sinoui/ripple)

涟漪效果。遵循 [Material Design States](https://material.io/design/interaction/states.html#usage) 规范。 [文档](https://sinoui.github.io/ripple)

## 安装

```shell
yarn add @sinoui/ripple
```

## 使用

```tsx
import { useRipple } from '@sinoui/ripple';

function Button({ disabled, ...rest }) {
  const ref = useRipple({ disabled });

  return <button ref={ref} disabled={disabled} {...rest} />;
}
```

## 本地开发

项目中有以下有用的命令。

### `yarn start`

在开发和监听模式下启动项目。当代码发生变化时就会重新编译代码。它同时会实时地向你汇报项目中的代码错误。

### `yarn build`

打包，并将打包文件放在`dist`文件夹中。使用 rollup 对代码做优化并打包成多种格式（`Common JS`，`UMD`和`ES Module`）。

### `yarn lint`

`yarn lint`会检查整个项目是否有代码错误、风格错误。

开启 vscode 的 eslint、prettier 插件，在使用 vscode 编码时，就会自动修正风格错误、提示语法错误。

### `yarn format`

`yarn format`可以自动调整整个项目的代码风格问题。

### `yarn test`

`yarn test`以监听模式启动 jest，运行单元测试。

开启 vscode 的 jest 插件，会在文件变化时自动运行单元测试。

### `yarn release`

发布库到 npm 中的命令：`yarn release`。

### 预览文档

```shell
yarn doc:dev
```

### 编译并打包文档

```shell
yarn doc:publish
```

### 发布文档

```shell
yarn doc:publish
```
npm package: @sinoui/rx-core-form
Description: 适配@sinoui/core 的表单组件库。
Latest version: 2.0.0-alpha.2

# @sinoui/rx-core-form

适配@sinoui/core 的表单组件库。

## 本地开发

项目中有以下有用的命令。

### `yarn build`

打包，并将打包文件放在`dist`文件夹中。使用 rollup 对代码做优化并打包成多种格式（`Common JS`，`UMD`和`ES Module`）。

### `yarn lint`

`yarn lint`会检查整个项目是否有代码错误、风格错误。

开启 vscode 的 eslint、prettier 插件，在使用 vscode 编码时，就会自动修正风格错误、提示语法错误。

### `yarn format`

`yarn format`可以自动调整整个项目的代码风格问题。

### `yarn test`

`yarn test`以监听模式启动 jest，运行单元测试。

开启 vscode 的 jest 插件，会在文件变化时自动运行单元测试。

### `yarn release`

发布 npm 包的命令。

### 预览文档

```shell
yarn doc:dev
```

### 编译并打包文档

```shell
yarn doc:publish
```

### 发布文档

在发布文档之前，在`package.json`中配置好`homepage`，如下所示：

```json
{
  "homepage": "https://sinouiincubator.github.io/editable-data-table"
}
```

配置完之后就可以执行下面的命令行发布文档：

```shell
yarn doc:publish
```
npm package: @sinoui/rx-form-state
Description: 表单状态管理库
Latest version: 1.0.5

# rx-form-state

[![npm version](https://img.shields.io/npm/v/@sinoui/rx-form-state)](https://www.npmjs.com/package/@sinoui/rx-form-state) [![downloads](https://img.shields.io/npm/dm/@sinoui/rx-form-state)](https://www.npmjs.com/package/@sinoui/rx-form-state)

表单状态管理库。[文档](https://sinoui.github.io/rx-form-state/)。

## 安装

```shell
yarn add @sinoui/rx-form-state
```

## 本地开发

项目中有以下有用的命令。

### `yarn build`

打包，并将打包文件放在`dist`文件夹中。使用 rollup 对代码做优化并打包成多种格式（`Common JS`，`UMD`和`ES Module`）。

### `yarn lint`

`yarn lint`会检查整个项目是否有代码错误、风格错误。

开启 vscode 的 eslint、prettier 插件，在使用 vscode 编码时，就会自动修正风格错误、提示语法错误。

### `yarn format`

`yarn format`可以自动调整整个项目的代码风格问题。

### `yarn test`

`yarn test`以监听模式启动 jest，运行单元测试。

开启 vscode 的 jest 插件，会在文件变化时自动运行单元测试。

### `yarn release`

发布 npm 包的命令。

### 预览文档

```shell
yarn doc:dev
```

### 编译并打包文档

```shell
yarn doc:build
```

### 发布文档

```shell
yarn doc:publish
```
npm package: @sinoui/selectable
Description: 可选择高阶组件是用于方便构建类似选择框的组件，这些组件包括：
Latest version: 0.1.31

# 可选择组件

可选择高阶组件是用于方便构建类似选择框的组件，这些组件包括：

* 日期选择框
* 部门选择框
* 可编辑的选择框

特性：

* [x] 自定义内容渲染
* [x] 自定义图标
* [x] focus, blur
* [x] pop
* [x] 内容区域可编辑
* [x] 点击图标弹窗
* [x] 点击整个内容区域弹窗
* [x] modal 弹窗

## 使用方式

```typescript
import { Selectable, SelectableContent } from '@sinoui/selectable';
import { SimpleIcon } from 'sinoui-components/Icon';

export interface DatePicker {
  value: string;
  onChange: (event: any, value: string) => void;
  readOnly?: boolean;
  disabled?: boolean;
  dateFormat?: string;
}

export default function DatePicker(props) {
  return (
    <Selectable
      baseClassName="sinoui-date-picker"
      contentRender={({ value }) => (
        <SelectableContent>{value}</SelectableContent>
      )}
      popRender={({ value, onChange, close }) => (
        <Calendar
          value={value}
          onChange={(value) => {
            onChange(null, value);
            close();
          }}
        />
      )}
      icon={<SimpleIcon>date_range</SimpleIcon>}
      {...props}
    />
  );
}
```

Selectable 的属性：

| 属性名           | 属性类型                                           | 属性说明                  |
| ---------------- | -------------------------------------------------- | ------------------------- |
| width            | string 或者 number                                 | 设置宽度。默认为 100%。   |
| editable         | boolean                                            | 是否可编辑                |
| popWhenIconClick | boolean                                            | 是否仅在点击图标时弹窗    |
| icon             | React.ReactNode                                    | 指定图标                  |
| baseClassName    | string                                             | 基础类                    |
| contentRender    | (props: ContentProps) => React.ReactNode           | 定制内容渲染区域          |
| popRender        | (props: PopContentProps) => React.ReactNode        | 定制弹出框渲染            |
| id               | string                                             | 指定 form 元素 id         |
| onFocus          | (event: React.FocusEvent) => void                  | 监听获取焦点事件          |
| onBlur           | (event: React.FocusEvent) => void                  | 监听失去焦点事件          |
| value            | string                                             | 值                        |
| onChange         | (event?: React.ChangeEvent, value: string) => void | 监听值变化事件            |
| readOnly         | boolean                                            | 只读                      |
| disabled         | boolean                                            | 不可用                    |
| placeholder      | string                                             | 提示文字                  |
| wrapperClassName | string                                             | 包装器类名                |
| error            | boolean                                            | 错误状态                  |
| usePop           | boolean                                            | 是否启用 pop。默认为 true |
| renderModal      | (event: PopContentProps) => React.ReactNode        | 渲染弹窗内容              |
npm package: @sinoui/sinoui-components-forms
Description: 适配 sinoui-components 的表单组件库。
Latest version: 1.0.0-beta.22

# @sinoui/sinoui-components-forms

适配 sinoui-components 的表单组件库。

```shell
yarn add @sinoui/sinoui-components-forms
```

更多特性和用法查看[官方文档](https://sinoui.github.io/sinoui-forms-library/)。
npm package: @sinoui/switch
Description: 开关切换组件
Latest version: 1.0.3

# @sinoui/switch

[![npm version](https://img.shields.io/npm/v/@sinoui/switch)](https://www.npmjs.com/package/@sinoui/switch)
[![downloads](https://img.shields.io/npm/dm/@sinoui/switch)](https://www.npmjs.com/package/@sinoui/switch)

开关切换组件。UI 遵循 [Material Design 设计规范](https://www.material.io/components/selection-controls/#switches)。

[官方文档](https://sinoui.github.io/switch)

## 依赖安装

```shell
yarn add @sinoui/switch
```

## 简单示例

```tsx
import Switch from '@sinoui/switch';

function Demo() {
  const [checked, setChecked] = useState(false);

  const handleChange = useCallback((event) => {
    setChecked(event.target.checked);
  }, []);

  return <Switch checked={checked} value="switch1" onChange={handleChange} />;
}
```

更多示例请参考[官方文档](https://sinoui.github.io/switch)。

## 本地开发

项目中有以下可用的命令。

### `yarn start`

在开发和监听模式下启动项目。当代码发生变化时就会重新编译代码。它同时会实时地向你汇报项目中的代码错误。

### `yarn build`

打包，并将打包文件放在`dist`文件夹中。使用 rollup 对代码做优化并打包成多种格式（`Common JS`，`UMD`和`ES Module`）。

### `yarn lint`

`yarn lint`会检查整个项目是否有代码错误、风格错误。

开启 vscode 的 eslint、prettier 插件，在使用 vscode 编码时，就会自动修正风格错误、提示语法错误。

### `yarn format`

`yarn format`可以自动调整整个项目的代码风格问题。

### `yarn test`

`yarn test`以监听模式启动 jest，运行单元测试。

开启 vscode 的 jest 插件，会在文件变化时自动运行单元测试。

### 预览文档

```shell
yarn doc:dev
```

### 编译并打包文档

```shell
yarn doc:publish
```
npm package: @sinoui/theme
Description: sinoui 主题定制库。
Latest version: 1.0.0

# @sinoui/theme [![npm version](https://img.shields.io/npm/v/@sinoui/theme)](https://www.npmjs.com/package/@sinoui/theme) [![downloads](https://img.shields.io/npm/dm/@sinoui/theme)](https://www.npmjs.com/package/@sinoui/theme)

用来创建 sinoui 的主题对象的库。[文档](https://sinoui.github.io/theme/)

## 安装

```shell
yarn add @sinoui/theme
```

## 本地开发

项目中有以下有用的命令。

### `yarn start`

在开发和监听模式下启动项目。当代码发生变化时就会重新编译代码。它同时会实时地向你汇报项目中的代码错误。

### `yarn build`

打包，并将打包文件放在`dist`文件夹中。使用 rollup 对代码做优化并打包成多种格式（`Common JS`，`UMD`和`ES Module`）。

### `yarn lint`

`yarn lint`会检查整个项目是否有代码错误、风格错误。

开启 vscode 的 eslint、prettier 插件，在使用 vscode 编码时，就会自动修正风格错误、提示语法错误。

### `yarn format`

`yarn format`可以自动调整整个项目的代码风格问题。

### `yarn test`

`yarn test`以监听模式启动 jest，运行单元测试。

开启 vscode 的 jest 插件，会在文件变化时自动运行单元测试。

### 预览文档

```shell
yarn doc:dev
```

### 编译并打包文档

```shell
yarn doc:publish
```

### 发布文档

在发布文档之前，在`package.json`中配置好`homepage`，如下所示：

```json
{
  "homepage": "https://sinouiincubator.github.io/editable-data-table"
}
```

配置完之后就可以执行下面的命令行发布文档：

```shell
yarn doc:publish
```
npm package: @sinoui/use-rest-item-api
Description: 与单条数据的 RESTful 风格的增删改查 API 交互的状态管理 React Hook。
Latest version: 1.0.1

# @sinoui/use-rest-item-api

[![npm version](https://img.shields.io/npm/v/@sinoui/use-rest-item-api)](https://www.npmjs.com/package/@sinoui/use-rest-item-api)
[![downloads](https://img.shields.io/npm/dm/@sinoui/use-rest-item-api)](https://www.npmjs.com/package/@sinoui/use-rest-item-api)

与单条数据的 RESTful 风格的增删改查 API 交互的状态管理 React Hook。

## 安装

```shell
yarn add @sinoui/use-rest-item-api
```

或者：

```shell
npm i --save @sinoui/use-rest-item-api
```

## 方法说明

```ts
import useRestItemApi from '@sinoui/use-rest-item-api';

const dataSource = useRestItemApi('/users', '1');

console.log('加载中状态', dataSource.isLoading);
console.log('加载失败状态', dataSource.isError);
console.log('数据', dataSource.data);

// 保存：save方法会根据数据中是否有id来判断调用后端的创建API还是更新API
dataSource.save({
  userName: '张三',
  sex: 'female',
});

// 删除
dataSource.delete();

// 只更新数据状态，而不向后端发送保存请求
dataSource.setData({
  userName: '李四',
});
```

函数语法：

```ts
/**
 * 返回值接口
 */
interface DataSource<T> {
  /**
   * 数据
   */
  data: T;
  /**
   * 是否加载中的状态
   */
  isLoading: boolean;
  /**
   * 是否加载错误的状态
   */
  isError: boolean;
  /**
   * 保存数据。将数据提交给后端的创建API或者更新API，成功后更新data状态。
   */
  save(newData: T): Promise<T>;
  /**
   * 删除数据。与后端的删除API交互。
   */
  delete(): Promise<void>;
  /**
   * 重新加载数据
   */
  reload(): void;

  /**
   * 更新数据状态
   */
  setData: (newData: T) => void;
}

/**
 * 配置接口
 */
interface Options<T> {
  /**
   * 默认数据
   */
  defaultData?: T;
  /**
   * 是否加载初始化数据。如果为`true`，且`id`为空时，会向后端发送一个`${baseUrl}/_init`的请求，获取初始化数据。默认为`false`。
   */
  loadInitData?: boolean;
  /**
   * 数据中唯一键属性名。默认为`id`。
   */
  idPropertyName?: string;
}

/**
 * 与单条数据的 RESTful 风格的增删改查 API 交互的状态管理 hook。
 *
 * @param {string} url RESTful API的资源集合url，即基础url，如`/users`
 * @param {string} [id] 需要加载数据的id。可以是`undefined`，这时可能表示的是用户刚打开创建表单。
 * @param {Options} [options] 选项。
 * @returns {DataSource}
 */
function useRestItemApi<T>(
  url: string,
  id?: string,
  options?: Options<T>,
): DataSource<T>;
```
npm package: @sinoui/use-rest-table
Description: @sinoui/use-rest-table 旨在简化与@sinoui/data-table 的相关处理
Latest version: 1.0.0

# @sinoui/use-rest-table

[![npm version](https://img.shields.io/npm/v/@sinoui/use-rest-table)](https://www.npmjs.com/package/@sinoui/use-rest-table)
[![downloads](https://img.shields.io/npm/dm/@sinoui/use-rest-table)](https://www.npmjs.com/package/@sinoui/use-rest-table)

@sinoui/use-rest-table 旨在简化与@sinoui/data-table 的相关处理。

## 安装

使用`yarn`：

```shell
yarn add @sinoui/use-rest-table
```

使用`npm`:

```shell
npm i --save @sinoui/use-rest-table
```

## 快速使用

```typescript
import React from 'react';
import useRestTable from '@sinoui/use-rest-table';
import DataTable, { TableColumn } from '@sinoui/data-table';

function ListDemo() {
  const dataSource = useRestTable('/users', [], { keyName: 'userId' });

  return (
    <DataTable {...dataSource}>
      <TableColumn name="userName" width={100} title="姓名" />
      <TableColumn name="age" width={100} title="年龄" />
    </DataTable>
  );
}
```

## dataSource 的属性和方法

`@sinoui/use-rest-table`的`dataSource`继承了[use-rest-page-api 的所有属性和方法](https://sinoui.github.io/use-rest-page-api/#datasource-%E7%9A%84%E5%B1%9E%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95)，除此之外还有以下方法：

- `data` 表示列表数据
- `loading` 表示数据加载中的状态
- `error` 表示加载错误的状态
- `onSelect()` 列表选中时的回调函数
- `selectedRows` 表示列表的选中项
- `setSelectedItems()` 设置列表选中项的回调函数
- `refresh()` 重新加载数据列表数据
- `getItem()` 从列表数据中获取其中一条数据信息(不与后端交互)
- `create()` 新增一条数据
- `onChange()` 翻页、排序时的回调函数
- `sort` 排序信息，类型为`object`
- `clean()` 清空列表数据时的回调函数
npm package: @sinoui/web-forms
Description: 基于[@sinoui/rx-form-state](https://www.npmjs.com/package/@sinoui/rx-form-state)封装简单 html 表单元素的表单组件库。
Latest version: 1.0.0-beta.22

# @sinoui/web-forms

基于[@sinoui/rx-form-state](https://www.npmjs.com/package/@sinoui/rx-form-state)封装简单 html 表单元素的表单组件库。

```shell
yarn add @sinoui/web-forms
```
npm package: @sinouiincubator/tab-group
Description: 选项卡切换组件
Latest version: 2.0.4

# @sinouiincubator/tab-group

[![npm version](https://img.shields.io/npm/v/@sinouiincubator/tab-group)](https://www.npmjs.com/package/@sinouiincubator/tab-group)
[![downloads](https://img.shields.io/npm/dm/@sinouiincubator/tab-group)](https://www.npmjs.com/package/@sinouiincubator/tab-group)

选项卡切换组件。UI 遵循 [Material Design Tabs 设计指南](https://material.io/components/tabs/)。

[官方文档](https://sinouiincubator.github.io/tab-group)

## 安装

```shell
yarn add @sinouiincubator/tab-group
```

## 示例

```tsx
import React from 'react';
import TabGroup, { Tab } from '@sinouiincubator/tab-group';

function Demo() {
  return (
    <TabGroup>
      <Tab title="标签1">内容1</Tab>
      <Tab title="标签2">内容2</Tab>
      <Tab title="标签3">内容3</Tab>
    </TabGroup>
  );
}
```

更多示例请查看[官方文档](https://sinouiincubator.github.io/tab-group)。

## 本地开发

项目中有以下有用的命令。

### `yarn start`

在开发和监听模式下启动项目。当代码发生变化时就会重新编译代码。它同时会实时地向你汇报项目中的代码错误。

### `yarn build`

打包，并将打包文件放在`dist`文件夹中。使用 rollup 对代码做优化并打包成多种格式（`Common JS`，`UMD`和`ES Module`）。

### `yarn lint`

`yarn lint`会检查整个项目是否有代码错误、风格错误。

开启 vscode 的 eslint、prettier 插件，在使用 vscode 编码时，就会自动修正风格错误、提示语法错误。

### `yarn format`

`yarn format`可以自动调整整个项目的代码风格问题。

### `yarn test`

`yarn test`以监听模式启动 jest，运行单元测试。

开启 vscode 的 jest 插件，会在文件变化时自动运行单元测试。

### 预览文档

```shell
yarn doc:dev
```

### 编译并打包文档

```shell
yarn doc:publish
```

### 发布文档

```shell
yarn doc:publish
```
npm package: @sinouiincubator/textarea
Description: 多行文本输入框组件
Latest version: 1.0.1

# @sinouiincubator/textarea

多行文本输入框组件。

[![npm version](https://img.shields.io/npm/v/@sinouiincubator/textarea)](https://www.npmjs.com/package/@sinouiincubator/textarea)
[![downloads](https://img.shields.io/npm/dm/@sinouiincubator/textarea)](https://www.npmjs.com/package/@sinouiincubator/textarea)

[官方文档](https://sinouiincubator.github.io/textarea)

## 依赖安装

```shell
yarn add @sinouiincubator/textarea
```

## 简单示例

```tsx
import React, { useState, useCallback } from 'react';
import Textarea from '@sinouiincubator/textarea';

function SimpleDemo() {
  const [value, setValue] = useState();

  const onChange = useCallback(
    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
      const newValue = event.target.value;
      setValue(newValue);
    },
    [],
  );

  return <Textarea value={value} onChange={onChange} />;
}
```

## 本地开发

项目中有以下有用的命令。

### `yarn start`

在开发和监听模式下启动项目。当代码发生变化时就会重新编译代码。它同时会实时地向你汇报项目中的代码错误。

### `yarn build`

打包，并将打包文件放在`dist`文件夹中。使用 rollup 对代码做优化并打包成多种格式（`Common JS`，`UMD`和`ES Module`）。

### `yarn lint`

`yarn lint`会检查整个项目是否有代码错误、风格错误。

开启 vscode 的 eslint、prettier 插件，在使用 vscode 编码时，就会自动修正风格错误、提示语法错误。

### `yarn format`

`yarn format`可以自动调整整个项目的代码风格问题。

### `yarn test`

`yarn test`以监听模式启动 jest，运行单元测试。

开启 vscode 的 jest 插件，会在文件变化时自动运行单元测试。

### 预览文档

```shell
yarn doc:dev
```

### 编译并打包文档

```shell
yarn doc:publish
```

### 发布文档

```shell
yarn doc:publish
```
npm package: @sinouiincubator/time-input
Description: 用于输入时间的键盘友好的 React 组件。
Latest version: 0.2.0

# @sinouiincubator/time-input

用于输入时间的键盘友好的 React 组件。

查看[文档](https://sinouiincubator.github.io/time-input/)。

## 特性

- UI 与 Chrome 的 `<input type="time" />` 一致。
- 支持 IE 11+ 和现代浏览器。
- 键盘友好
  - 可以输入时间
  - 上、下方向键调整时间
  - 左、右和 tab 键在小时和分钟输入框之间切换
  - 删除（Delete）、回格（Backspace）键清除时间
- 支持清除、上调、下调时间的按钮
- 100% 测试覆盖率
- 支持自定义样式
- 易于与[Formik](https://jaredpalmer.com/formik/)、[@sinoui/rx-form-state](https://sinoui.github.io/sinoui-forms-library/)等表单库集成

## 安装

```shell
yarn add @sinouiincubator/time-input
```

## 使用

```tsx
import React, { useState } from 'react';
import TimeInput from '@sinouiincubator/time-input';

function Demo() {
  const [value, setValue] = useState('');

  return <TimeInput value={value} onChange={setValue} />;
}
```

更多内容查看[文档](https://sinouiincubator.github.io/time-input/)。
npm package: @sinouiincubator/use-disable-backspace-navigation
Description: 阻止浏览器中按下回格键页面发生回退的行为。
Latest version: 1.0.1

# @sinouiincubator/use-disable-backspace-navigation

[![npm version](https://img.shields.io/npm/v/@sinouiincubator/use-disable-backspace-navigation)](https://www.npmjs.com/package/@sinouiincubator/use-disable-backspace-navigation)
[![downloads](https://img.shields.io/npm/dm/@sinouiincubator/use-disable-backspace-navigation)](https://www.npmjs.com/package/@sinouiincubator/use-disable-backspace-navigation)

阻止 IE、Firefox 等浏览器中按下 **回格键（ Backspace ）** 时页面发生回退的默认行为。

## 安装

```shell
yarn add @sinouiincubator/use-disable-backspace-navigation
```

或者

```shell
npm add @sinouiincubator/use-disable-backspace-navigation --save
```

## 使用

建议在 React 项目的根组件中添加，如 `App` 组件：

```tsx
import useDisableBackspaceNavigation from '@sinouiincubator/use-disable-backspace-navigation';

function App() {
  useDisableBackspaceNavigation();

  return <div className="app" />;
}
```

## 说明

`use-disable-backspace-navigation` 不会影响正常的输入框（ `input` ）、多行文本框（ `textarea` ）、可编辑元素（ `contentEditable` ）的输入行为，即按回退键删除内容。更多细节见 [stackoverflow 上的讨论](https://stackoverflow.com/questions/1495219/how-can-i-prevent-the-backspace-key-from-navigating-back)。

## 本地开发

项目中有以下有用的命令。

### `yarn start`

在开发和监听模式下启动项目。当代码发生变化时就会重新编译代码。它同时会实时地向你汇报项目中的代码错误。

### `yarn build`

打包，并将打包文件放在`dist`文件夹中。使用 rollup 对代码做优化并打包成多种格式（`Common JS`，`UMD`和`ES Module`）。

### `yarn lint`

`yarn lint`会检查整个项目是否有代码错误、风格错误。

开启 vscode 的 eslint、prettier 插件，在使用 vscode 编码时，就会自动修正风格错误、提示语法错误。

### `yarn format`

`yarn format`可以自动调整整个项目的代码风格问题。

### `yarn test`

`yarn test`以监听模式启动 jest，运行单元测试。

开启 vscode 的 jest 插件，会在文件变化时自动运行单元测试。
npm package: @sinovuyo97/react-native-snowcoach
Description: A simple and elegant snowcoach library for React Native
Author: Sikhisi
Latest version: 5.6.87

# react-native-coachmark

A simple and elegant coachmark library for React Native that creates spotlight tutorials and walkthroughs.

## 🚀 What's New

### Version 5.6.87 (03/04/2025)
- Improved Tooltip Positioning: The tooltip now dynamically adjusts its position based on available screen space to ensure better visibility.
- Ref-Based Measurement: Replaced layout measurement methods with React refs, removing dependencies on UIManager.measure.
- Enhanced Highlighting: The highlighted child element remains fully visible without dimming, ensuring clarity in walkthroughs.

### Version 5.6.84 (03/04/2025)
- Fixed some typos
- Now it displays and positions itself according to the available space.

### Version 5.6.78 (03/04/2025)
- Added Close Button: Replaced the TouchableWithoutFeedback with a close button in the coachmark component for better user experience.
- Improved Documentation: Updated the README to include a "What's New" section for easier tracking of changes.

### Version 2.0.7 (02/26/2025 - 04:00 PM)
- Improved Error Handling: Enhanced the coachmark component to prevent NaN values for positioning properties.
- Added validation checks to ensure that top and left values are not negative, defaulting to 0 if they are.
- Consistent Layout Handling: Ensured that all layout values are validated before being used in styles, providing a more robust user experience.
- No Changes to Usage: The usage of the coachmark component remains the same, allowing for seamless integration into existing projects.

## 📦 Installation

```sh
npm install @sinovuyo97/react-native-coachmark
```

or

```sh
yarn add @sinovuyo97/react-native-coachmark
```

## 🎬 Usage

```tsx
import { Coachmark } from "@sinovuyo97/react-native-coachmark";

const App = () => {
  const [isVisible, setIsVisible] = React.useState(true);

  return (
    <Coachmark
      visible={isVisible}
      onHide={() => setIsVisible(false)}
      snowcoachText="This is a tutorial message."
    >
      <Button title="Show Coachmark" onPress={() => setIsVisible(true)} />
    </Coachmark>
  );
};
```

## 🛠 Props

| Prop          | Type     | Default | Description                                      |
|---------------|----------|---------|--------------------------------------------------|
| snowcoachText | string   | -       | Text to display in the tooltip                   |
| visible       | boolean  | false   | Controls the visibility of the coachmark         |
| onHide        | () => void | -     | Callback when coachmark is dismissed             |
| children      | ReactElement | -   | The element to highlight with the coachmark      |

## ❗ No Customization

Coachmark follows a strict, pre-defined UI design for consistency. It cannot be customized or modified.

## 📜 License

MIT License