form-render/demo/index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import GithubCorner from 'react-github-corner';
import Demo from './main';
import { Radio, Select, Switch, Collapse, Slider } from 'antd';

const Option = Select.Option;
const RadioGroup = Radio.Group;
const { Panel } = Collapse;
// constant
const themeList = [
  { label: 'antd主题', value: 'antd' },
  { label: 'fusion主题', value: 'fusion' },
];
class Root extends Component {
  state = {
    schemaName: 'default',
    theme: 'antd',
    column: 1,
    displayType: 'column',
    showDescIcon: false,
    readOnly: false,
    labelWidth: 110,
  };

  onThemeChange = e => {
    this.setState({ theme: e.target.value });
  };

  onColumnNumberChange = value => {
    this.setState({ column: value });
  };

  onDisplayChange = value => {
    this.setState({
      displayType: value,
      showDescIcon: value === 'row',
    });
  };

  onShowDescChange = value => {
    this.setState({ showDescIcon: value });
  };

  onReadOnlyChange = value => this.setState({ readOnly: value });

  onSchemaChange = e => {
    this.setState({ schemaName: e.target.value });
  };

  onLabelWidthChange = value => {
    this.setState({ labelWidth: value });
  };

  render() {
    const { showDescIcon, readOnly, labelWidth } = this.state;
    return (
      <div className="vh-100 overflow-auto flex flex-column">
        <GithubCorner
          href="https://github.com/alibaba/form-render"
          bannerColor="#F6C14F"
          className="absolute top-0 right-0 z-999"
        />
        <Collapse defaultActiveKey={['1']} onChange={() => {}}>
          <Panel header={<div className="b f3">FormRender</div>} key="1">
            <div className="w-100 flex">
              <Radio.Group
                name="schemaName"
                defaultValue="simplest"
                className="w-50 flex items-center flex-wrap z-999"
                onChange={this.onSchemaChange}
              >
                <Radio value="simplest">最简样例</Radio>
                <Radio value="basic">基础控件</Radio>
                <Radio value="function">复杂联动</Radio>
                <Radio value="input">个性输入框</Radio>
                <Radio value="select">个性选择框</Radio>
                <Radio value="date">日期</Radio>
                <Radio value="new-feature">新功能</Radio>
                <Radio value="demo">完整例子</Radio>
              </Radio.Group>
              <div className="w-50 flex items-center flex-wrap z-999">
                <RadioGroup
                  options={themeList}
                  value={this.state.theme}
                  onChange={this.onThemeChange}
                />
                <Select
                  style={{ marginRight: 8 }}
                  onChange={this.onColumnNumberChange}
                  defaultValue="1"
                >
                  <Option value="1">一行一列</Option>
                  <Option value="2">一行二列</Option>
                  <Option value="3">一行三列</Option>
                </Select>
                <Select
                  style={{ marginRight: 8 }}
                  onChange={this.onDisplayChange}
                  defaultValue="column"
                >
                  <Option value="column">上下排列</Option>
                  <Option value="row">左右排列</Option>
                </Select>
                <Switch
                  style={{ marginRight: 8 }}
                  checkedChildren="关描述"
                  onChange={this.onShowDescChange}
                  unCheckedChildren="开描述"
                  checked={showDescIcon}
                />
                <Switch
                  style={{ marginRight: 8 }}
                  checkedChildren="编辑"
                  onChange={this.onReadOnlyChange}
                  unCheckedChildren="只读"
                  checked={readOnly}
                />
                <div style={{ width: 42 }}>标签：</div>
                <Slider
                  style={{ width: 80 }}
                  max={200}
                  min={20}
                  value={labelWidth}
                  onChange={this.onLabelWidthChange}
                />
              </div>
            </div>
          </Panel>
        </Collapse>
        <Demo {...this.state} />
      </div>
    );
  }
}

ReactDOM.render(<Root />, document.getElementById('__render_content_'));