# @pm-pri/form-lib-v5

> 组件库本身依赖 ant design，使用需要同时安装 antd，在 src/global.less 中全量引入 antd less 文件

Latest version **1.0.0** (published 2024-04-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @pm-pri/form-lib-v5
pnpm add @pm-pri/form-lib-v5
yarn add @pm-pri/form-lib-v5
bun add @pm-pri/form-lib-v5
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2024-04-25 |
| First published | 2024-04-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 30 |
| Unpacked size | 9.9 KB |
| Known vulnerabilities | 0 (+29 in 3 direct dependencies) |
| Install scripts | no |
| Maintainers | zhuishao |

## Links

- npm: https://www.npmjs.com/package/@pm-pri/form-lib-v5
- Repository: http://gitlab.alibaba-inc.com/wisdomhammer/formLib
- npm.io page: https://npm.io/package/@pm-pri/form-lib-v5

## Dependencies (30)

- [axios](https://npm.io/package/axios.md) ^0.21.1
- [dayjs](https://npm.io/package/dayjs.md) ^1.11.9
- [eval5](https://npm.io/package/eval5.md) 1.4.7
- [jszip](https://npm.io/package/jszip.md) 3.10.1
- [lodash](https://npm.io/package/lodash.md) 4.17.21
- [nanoid](https://npm.io/package/nanoid.md) ^4.0.0
- [pizzip](https://npm.io/package/pizzip.md) ^3.1.4
- [ali-oss](https://npm.io/package/ali-oss.md) ^6.17.1
- [react-is](https://npm.io/package/react-is.md) 18.1.0
- [react-dnd](https://npm.io/package/react-dnd.md) ^16.0.1
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [file-saver](https://npm.io/package/file-saver.md) ^2.0.5
- [html2canvas](https://npm.io/package/html2canvas.md) 1.4.1
- [bignumber.js](https://npm.io/package/bignumber.js.md) ^9.1.0
- [qrcode.react](https://npm.io/package/qrcode.react.md) ^3.1.0
- [react-window](https://npm.io/package/react-window.md) 1.8.7
- [docxtemplater](https://npm.io/package/docxtemplater.md) ^3.34.3
- [react-to-print](https://npm.io/package/react-to-print.md) 2.13.0
- [rc-virtual-list](https://npm.io/package/rc-virtual-list.md) 3.4.10
- [react-draggable](https://npm.io/package/react-draggable.md) 4.4.5
- [react-resizable](https://npm.io/package/react-resizable.md) 3.0.4
- [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) 4.7.0
- [rc-resize-observer](https://npm.io/package/rc-resize-observer.md) 1.4.0
- [react-fast-marquee](https://npm.io/package/react-fast-marquee.md) ^1.5.2
- [react-sortable-hoc](https://npm.io/package/react-sortable-hoc.md) 2.0.0
- [immutability-helper](https://npm.io/package/immutability-helper.md) ^3.1.1
- [@monaco-editor/loader](https://npm.io/package/@monaco-editor/loader.md) 1.3.3
- [@tinymce/tinymce-react](https://npm.io/package/@tinymce/tinymce-react.md) ^4.0.0
- [@amap/amap-jsapi-loader](https://npm.io/package/@amap/amap-jsapi-loader.md) 1.0.1
- [react-dnd-html5-backend](https://npm.io/package/react-dnd-html5-backend.md) ^16.0.1

## Recent versions

- 1.0.0 (latest) — 2024-04-25

## README

## 安装

组件库本身依赖 ant design，使用需要同时安装 antd，在 src/global.less 中全量引入 antd less 文件

```shell
tnpm install @ali/form-lib-v5 --save
```

## 基本使用

```tsx
import { Form } from '@ali/form-lib-v5';

export default () => {
  return (
    <Form
      fields={[
        {
          type: 'Input',
          label: '姓名',
          name: 'name',
          required: true,
        },
        {
          type: 'Select',
          label: '爱好',
          name: 'liked',
          props: {
            options: [
              {
                label: '爱好1',
                value: 0,
              },
              {
                label: '爱好2',
                value: 1,
              },
            ],
          },
        },
      ]}
    />
  );
};
```

## 使用异步选择器

```tsx
import { Form } from '@ali/form-lib-v5';

export default () => {
  return (
    <Form
      fields={[
        {
          type: 'AsyncSelect',
          label: '爱好',
          name: 'liked',
          props: {
            options: async () => {
              await new Promise((res) => setTimeout(res, 1000));
              return [
                {
                  label: '爱好1',
                  value: 0,
                },
                {
                  label: '爱好2',
                  value: 1,
                },
              ];
            },
          },
        },
      ]}
    />
  );
};
```

## 使用设置联动

```tsx
import { Form } from '@ali/form-lib-v5';

export default () => {
  return (
    <Form
      fields={[
        {
          type: 'RadioGroup',
          label: '性别',
          name: 'sex',
          props: {
            options: [
              {
                label: '男',
                value: 0,
              },
              {
                label: '女',
                value: 1,
              },
            ],
          },
        },
        {
          type: 'InputNumber',
          label: '年龄',
          name: 'age',
          effect: ['sex'],
          isShow: ({ sex }) => sex === 0,
        },
      ]}
    />
  );
};
```

## 使用自定义渲染

```tsx
import { Form } from '@ali/form-lib-v5';

export default () => {
  return (
    <Form
      fields={[
        {
          label: '性别',
          name: 'sex',
          type: ({ value, onChange, form, ...props }) => {
            return <div>自定义渲染</div>;
          },
        },
        {
          type: 'Render',
          props: {
            render(form) {
              return <div>自定义渲染</div>;
            },
          },
        },
        {
          type: 'AsyncRender',
          props: {
            async render(form) {
              await new Promise((res) => setTimeout(res, 1000));
              return <div>自定义异步渲染</div>;
            },
          },
        },
        {
          type: 'MyWidget',
          name: 'my-widget',
          props: {
            text: 'my-widget',
          },
        },
      ]}
      widgets={{
        MyWidget: ({ value, onChange, form, ...props }) => {
          return <div>{props.text}</div>;
        },
      }}
    />
  );
};
```

## 在线文档

- [点击查看](https://pmsaas.taobao.com/form-lib)

---
_Source: https://npm.io/package/@pm-pri/form-lib-v5 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._