@digitalzz/x-render1.0.0

x-render components for digitalcnzz

Usage no npm install needed!

<script type="module">
  import digitalzzXRender100 from 'https://cdn.skypack.dev/@digitalzz/x-render1.0.0';
</script>

README

@digitalzz/x-render

Getting Started

Install dependencies,

npm i @digitalzz/x-render -S

or

yarn add @digitalzz/x-render

Usage

import React from 'react';
import { FormRender, Generator, TableRender } from '@digitalzz/x-render/lib';

Example

import React from 'react';
import { Generator, generatorSetting } from '@digitalzz/x-render/lib';
const { defaultSettings } = generatorSetting;

const NewWidget = ({ value = 0, onChange }) => (
  <button onClick={() => onChange(value + 1)}>{value}</button>
);

export default () => {
  const onCallback = (data) => {
    console.log('onCallback', data);
  };
  return (
    <div>
      <Generator
        widgets={{ NewWidget }}
        settings={[
          ...defaultSettings,
          {
            title: '个人信息',
            widgets: [
              {
                text: '计数器',
                name: 'asyncSelect',
                schema: {
                  title: '计数器',
                  type: 'number',
                  widget: 'NewWidget',
                },
              },
            ],
          },
        ]}
        commonSettings={{
          description: {
            title: '自定义共通用的入参',
            type: 'string',
          },
        }}
        creator="sui"
        createUrl="http://192.168.150.23:8080/form/meta/create"
        deployUrl="http://192.168.150.23:8080/form/meta/deploy"
        onCallback={onCallback}
      />
    </div>
  );
};

CODE

import React from 'react';
import { FormRender, Generator, TableRender } from '@digitalzz/x-render/lib';

// Generator
Index.propTypes = {
  createUrl: PropTypes.string,
  deployUrl: PropTypes.string,
  onCancel: PropTypes.func,
  onCallback: PropTypes.func,
  showCandel: PropTypes.bool,
  showOk: PropTypes.bool,
  okText: PropTypes.string,
  cancelText: PropTypes.string,
  settings: PropTypes.arrayOf(PropTypes.object),
  widgets: PropTypes.object,
};
Index.defaultProps = {
  onCancel: () => {}, // 取消事件
  onCallback: () => {}, // 发布成功后的回调
  showCandel: true, // 是否展示取消按钮
  showOk: true, // 是否展示确定按钮
  okText: '确定',
  cancelText: '取消',
  creator: '', // 创建者
  settings: defaultSettings, //配置组件
  commonSettings: defaultCommonSettings, //配置组件
  widgets: {}, // 自定义组件
};