Merge branch 'dev-schema' of gitlab.corp.qunar.com:mfe/yapi into dev-schema

client/components/SchemaTable/SchemaTable.js

@@ -0,0 +1,152 @@
+import React, { Component } from 'react';
+import { Table } from 'antd';
+import { schemaTransformToTable } from '../../../common/shema-transformTo-table.js';
+import _ from 'underscore';
+
+const messageMap = {
+  desc: '备注',
+  default: '实例',
+  maximum: '最大值',
+  minimum: '最小值',
+  maxItems: '最大数量',
+  minItems: '最小数量',
+  maxLength: '最大长度',
+  minLength: '最小长度',
+  enum: '枚举',
+  uniqueItems: '元素是否都不同',
+  itemType: 'item 类型',
+  format: '版本'
+};
+
+const columns = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    key: 'name'
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    key: 'type',
+    render: (text, item) => {
+      // console.log('text',item.sub);
+      return text === 'array' ? <span>{item.sub.itemType || ''} []</span> : <span>{text}</span>;
+    }
+  },
+  {
+    title: '是否必须',
+    dataIndex: 'required',
+    key: 'required',
+    render: text => {
+      return <div>{text ? '必须' : '非必须'}</div>;
+    }
+  },
+  {
+    title: '默认值',
+    dataIndex: 'default',
+    key: 'default'
+  },
+  {
+    title: '备注',
+    dataIndex: 'desc',
+    key: 'desc',
+    render: (text, item) => {
+      // console.log('text',item.sub);
+      return _.isUndefined(item.childrenDesc) ? (
+        <span>{text}</span>
+      ) : (
+        <span>{item.childrenDesc}</span>
+      );
+    }
+  },
+  {
+    title: '其他信息',
+    dataIndex: 'sub',
+    key: 'sub',
+    render: text => {
+      return Object.keys(text || []).map((item, index) => {
+        let name = messageMap[item];
+        let value = text[item];
+
+        return (
+          !_.isUndefined(text[item]) && (
+            <p key={index}>
+              <span style={{ fontWeight: '700' }}>{name}: </span>
+              <span>{value.toString()}</span>
+            </p>
+          )
+        );
+      });
+    }
+  }
+];
+
+const product = {
+  title: 'Product',
+  type: 'object',
+  properties: {
+    id: {
+      description: 'The unique identifier for a product',
+      type: 'number'
+    },
+    name: {
+      type: 'string'
+    },
+    price: {
+      type: 'number',
+      minimum: 0,
+      exclusiveMinimum: true
+    },
+    arr: {
+      type: 'array',
+      items: {
+        type: 'string',
+        description: 'bbbbb'
+      },
+      description: 'sdfsdf'
+    },
+    tags: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          length: { type: 'number' },
+          width: { type: 'number' },
+          height: { type: 'number' }
+        }
+      },
+      minItems: 1,
+      uniqueItems: true
+    },
+    dimensions: {
+      type: 'object',
+      properties: {
+        length: { type: 'number' },
+        width: { type: 'number' },
+        height: { type: 'number' }
+      },
+      required: ['length', 'width', 'height']
+    }
+  },
+  required: ['id', 'name', 'price']
+};
+
+export default class SchemaTable extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: []
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      data: schemaTransformToTable(product)
+    });
+  }
+
+  render() {
+    console.log('data', this.state.data);
+    return <Table dataSource={this.state.data} columns={columns} />;
+  }
+}

common/shema-transformTo-table.js

@@ -0,0 +1,148 @@
+import _  from 'underscore';
+
+exports.schemaTransformToTable = (schema) =>{
+  try{
+  
+   let result = mapping(schema, 0);
+   return result
+  }catch(err){
+    console.log(err);
+  }
+}
+
+const mapping = function(data, index) {
+  switch(data.type){
+    case 'string':
+      return SchemaString(data);
+    case 'number':
+      return SchemaNumber(data);
+    case 'array':
+      return SchemaArray(data, index);
+    case 'object':
+      return SchemaObject(data, index);
+    case 'boolean':
+      return SchemaBoolean(data);
+    case 'integer':
+      return SchemaInt(data)
+    default:
+      console.log(data);
+  }
+
+};
+
+
+const SchemaObject = (data, key) => {
+  let {properties, required} = data
+  properties = properties || {}
+  required = required || []
+  let result =[];
+  Object.keys(properties).map((name, index) => {
+    let value = properties[name];
+    let copiedState = JSON.parse(JSON.stringify(value));
+    let optionForm = mapping(copiedState, index);
+    let desc = optionForm.desc;
+    let d = optionForm.default;
+    let children = optionForm.children;
+    
+    delete optionForm.desc;
+    delete optionForm.default;
+    delete optionForm.children;
+    let item = {
+      name,
+      type: value.type,
+      required: required.indexOf(name) != -1,
+      sub: optionForm,
+      desc,
+      default: d,
+      key: key+''+index
+    }
+
+    if(value.type === 'array' && !_.isUndefined(children) ){
+
+      if( _.isArray(children)){
+        item.children = children
+      }
+      item = {
+        ...item,
+        childrenDesc: children.desc
+      }
+     
+    }
+
+    if(value.type === 'object' ){
+      item = {
+        ...item,
+        children: optionForm
+      }
+      delete item.sub
+    }
+
+    result.push(item)
+   
+
+  })
+  
+return result
+  
+}
+
+
+const SchemaString = (data) => {
+  let item = {
+    desc: data.description,
+    default: data.default,
+    maxLength: data.maxLength,
+    minLength: data.minLength,
+    enum: data.enum
+  }
+  return item
+}
+
+const SchemaArray =(data, index) => {
+  data.items = data.items || {type: 'string'};
+  
+  let optionForm = mapping(data.items, index);
+  
+  let item = {
+    desc: data.description,
+    default: data.default,
+    minItems: data.minItems,
+    uniqueItems: data.uniqueItems,
+    maxItems: data.maxItems,
+    itemType: data.items.type,
+    children: optionForm
+
+  }
+  return {...item}
+}
+
+const SchemaNumber =(data) => {
+  
+  let item = {
+    desc: data.description,
+    maximum: data.maximum,
+    minimum: data.minimum,
+    default: data.default
+  }
+  return item
+}
+
+const SchemaInt = (data) =>{
+  let item = {
+    desc: data.description,
+    maximum: data.maximum,
+    minimum: data.minimum,
+    default: data.default,
+    format: data.format
+  }
+  return item
+}
+
+const SchemaBoolean = (data) =>{
+  
+  let item = {
+    desc: data.description,
+    default: data.default
+  }
+  return item
+}