创意通用组件库 Troyfe-component

Troyfe-component

install

  npm install troyfe-component

Use

  import { Icon, ProcessManage, DynamicForm, BarAndLineChart } from 'troyfe-component'

Example Icon

  <Icon
    type=""
    // type是必填项
    scriptUrl="//at.alicdn.com/t/font_385790_4939zqugz3c.js"
    // url可以是图标库地址。阿里https://www.iconfont.cn/
    extraCommonProps={{ className: 'myIcon' }}
    style={{
      fontSize: '40px'
    }}
  />

Example ProcessManage

  <ProcessManage
    xml=""
    onSave={(xml) => {
      console.log(xml);
    }}
  />

Example DynamicForm

import React, { useRef } from 'react';
import { NewSelectWidget, NewTreeSelectWidget, NewUploadWidget } from '../../components/CustomDynamicFormItem'
// 这些组件是用户自己子定义
  const refs = useRef(null) // 获取动态表单实例

  <DynamicForm
    settings={[
      {
        title: '自定义组件',
        widgets: [
          {
            text: '下拉框',
            name: 'apiSelect',
            schema: {
              title: '下拉框',
              type: 'string',
              widget: 'NewSelectWidget',
            },
            setting: {
              url: { title: 'url', type: 'string' },
              key: { title: '键', type: 'string' },
              valueKey: { title: '值', type: 'string' },
            }
          },
          {
            text: '树形下拉框',
            name: 'apiTreeSelect',
            schema: {
              title: '树形下拉',
              type: 'string',
              widget: 'NewTreeSelectWidget'
            },
            setting: {
              url: { title: 'url', type: 'string' },
              key: { title: '键', type: 'string' },
              label: { title: '名称', type: 'string' },
            }
          },
          {
            text: '上传文件',
            name: 'apiUpload',
            schema: {
              title: '上传文件',
              type: 'array',
              widget: 'NewUploadWidget',
              enum: ['xlsx', 'docx', 'mp4'],
            },
            setting: {
              enum: { enum: [], props: {mode: "tags"}, title: "文件格式", type: "array", widget: "select" },
            }
          }
        ],
      }
    ]}
    ref={refs}
    widgets={{ NewSelectWidget, NewTreeSelectWidget, NewUploadWidget }}
  />

动态表单获取设置表单值

  const schema = JSON.stringify(refs.current.getValue()) // 获取表单值
  refs.current.setValue(JSON.parse(res.data.metaData)) // 设置表单值

props

| 参数 | 说明 | 类型 | 类型 | | ------ | ------ | ------ | ------ | | hideId | 隐藏组件ID | boolean | false | | defaultValue | 默认表单 schema | object | DEFAULT_SCHEMA | | transformer | schema 双向转换 | object | { fromFormRender, toFormRender } | | extraButtons | 操作栏按钮 | array | extraButton[] | | controlButtons | 选中项操作按钮 | array | controlButton[] | | settings | 左右侧栏配置 | array | defaultSettings | | commonSettings | 通用配置 | object | defaultCommonSettings | | globalSettings | 全局配置 | object | defaultGlobalSettings | | widgets | 自定义组件 | object | {} | | mapping | 组件和 schema 的映射规则 | object | {} |

extraButton

| 属性 | 说明 | 类型 | | ------ | ------ | ------ | | text | 按钮文案 | string | | onClick | 按钮点击回调函数 | (event) => void |

controlButton

| 属性 | 说明 | 类型 | | ------ | ------ | ------ | | text | 按钮文案 | string | | onClick | 按钮点击回调函数 | (event, schema) => void |

Methods

| 事件名 | 说明 | 入参 | | ------ | ------ | ------ | | getValue | 获取导出的 schema 值 | - | | setValue | 从外部强制修改 schema | schema | | copyValue | 将现有 schema 拷贝到剪贴板 | - |

Example BarAndLineProps

  <BarAndLineProps
    option={createOption()}
    notMerge={true}
    lazyUpdate={true}
    style={{ width: '100%', height: '100%' }}
  />

参数

  {
    title?: {};
    legend?: {[key: string]: any};
    grid?: {
      top: string | number;
      left: string | number;
      right: string | number;
      bottom: string | number;
      containLabel: boolean;
    },
    xAxisKey: string,
    xAxisOption?: {},
    yAxisKey?: Array<{
      [key: string]: any
    }>
    seriesKey: Array<{
      type: string;
      key: string | string[];
      color: string;
      yIndex?: number;
      noTansfrom?: boolean;
    }>
    data: Array<{}>;
    horizontal?: boolean;
    tooltipFormatter?: (param: {}) => string
  }

运行该项目执行

yarn dev or npm run dev

运行开发模式 在浏览器中打开http://localhost:6006

yarn build or npm run build

运行该命名进行项目的打包

yarn build build-storybook

运行该项目进行文档打包

yarn start or npm start

运行组件库的文档

Note:

部署组件库文档需要上传如下文件： config server storybook-static package.json

并在config中的config.prod.js文件中修改端口