# @wibetter/widget-schema-editor

> UI组件模型设置（添加可配置项）

Latest version **0.2.12** (published 2021-07-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wibetter/widget-schema-editor
pnpm add @wibetter/widget-schema-editor
yarn add @wibetter/widget-schema-editor
bun add @wibetter/widget-schema-editor
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.12 |
| Published | 2021-07-09 |
| First published | 2021-06-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 10.13.0 |
| Dependencies | 13 |
| Unpacked size | 945.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ldan@wibetter |
| Maintainers | wibetter |
| Keywords | jsonSchema, UI组件模型, 可视化模型设置, 添加可配置项 |

## Links

- npm: https://www.npmjs.com/package/@wibetter/widget-schema-editor
- Repository: https://github.com/widget-editor/widget-schema-editor
- Homepage: https://github.com/widget-editor/widget-schema-editor#readme
- Issues: https://github.com/widget-editor/widget-schema-editor/issues
- npm.io page: https://npm.io/package/@wibetter/widget-schema-editor

## Dependencies (13)

- [antd](https://npm.io/package/antd.md) 4.7.3
- [mobx](https://npm.io/package/mobx.md) 5.9.4
- [react](https://npm.io/package/react.md) ^16.8.6
- [react-ace](https://npm.io/package/react-ace.md) ^9.4.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [ace-builds](https://npm.io/package/ace-builds.md) ^1.4.12
- [mobx-react](https://npm.io/package/mobx-react.md) 6.1.3
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.10.1
- [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) 4.0.0
- [@wibetter/json-utils](https://npm.io/package/@wibetter/json-utils.md) ^1.2.31
- [@wibetter/json-editor](https://npm.io/package/@wibetter/json-editor.md) ^3.5.9
- [@wibetter/ui-schema-editor](https://npm.io/package/@wibetter/ui-schema-editor.md) ^1.2.1

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.2.12 (latest) — 2021-07-09
- 0.2.11 — 2021-07-09
- 0.2.9 — 2021-07-08
- 0.2.7 — 2021-07-05
- 0.2.6 — 2021-06-24
- 0.2.5 — 2021-06-10
- 0.2.3 — 2021-06-09
- 0.2.2 — 2021-06-09
- 0.2.1 — 2021-06-08
- 0.1.2 — 2021-06-08
- 0.1.1 — 2021-06-07

## README

# widget-schema-editor

> WidgetSchema主要用于UI组件模型设置。

技术栈：React/Mobx/Ant Design

在线Demo：
[点击访问在线Demo](https://widget-editor.github.io/widget-schema-editor/demo1/index.html)

## 安装

```bash
npm install --save @wibtter/widget-schema-editor
```

## 使用示例

```js
import * as React from 'react';
import WidgetSchemaEditor from '@wibetter/widget-schema-editor';
import '@wibetter/json-schema-editor/dist/index.css';

class IndexDemo extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      widgetLayout: [],
      currentActiveIndex: '',
      widgetSchema: {},
      mockData: {},
    };
  }

  render() {
    const {
      widgetLayout,
      currentActiveIndex,
      widgetSchema,
      mockData,
    } = this.state;
    return (
      <>
        <div className="json-action-container">
          <div className="json-schema-box">
             <WidgetSchemaEditor
                currentWidgetLayout={widgetLayout}
                currentActiveIndex={currentActiveIndex}
                updateCurrentActiveIndex={(activeIndex) => {}}
                widgetSchema={widgetSchema}
                mockData={mockData}
                onChange={(newWidgetSchema) => {
                  console.log('schemaDataChange', newWidgetSchema);
                  this.setState({
                    widgetSchema: newWidgetSchema,
                  });
                }}
             />
          </div>
        </div>
      </>
    );
  }
}
```

## WidgetSchemaEditor 可配置参数说明

| name         | type     | default | desc                            |
| ------------ | -------- | ------- | ------------------------------- |
| `currentWidgetLayout`| object   | {}    | 必填项，当前组件内容数据（widgetLayout） |
| `currentActiveIndex`| object   | {}    | 必填项，当前组件楼层处于选中元素的索引路径值 |
| `updateCurrentActiveIndex`| function   | () => {}      | 必填项，currentActiveIndex更新的回调函数 |
| `widgetSchema`| object   | {}      | 非必填项，当前组件模型数据 |
| `mockData`| object   | {}      | 非必填项，当前组件配置数据 |
| `onChange`   | function | () => {}  | schemaData内容变动时会触发onChange |

---
_Source: https://npm.io/package/@wibetter/widget-schema-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._