@shilong521/design

介绍

React 组件库

安装

1. 安装组件包

yarn add @shilong521/design
# 或者npm install @shilong521/design --save

2. 导入组件

import { CodeView } from '@shilong521/design'; //代码视图

<CodeView
  title="代码视图"
  style={{ width: 1000, height: 800 }}
  code={code}
  language="go"
  highlightLines={[13, 16]}
  collapseCodeBlock={[
    { startLine: 3, endLine: 4, expandLines: 10 },
    { startLine: 7, endLine: 10, expandLines: 5 },
  ]}
/>;

//拖拽流程图编排，ProcessSidebar（侧边栏），ProcessView（流程图）
import { ProcessSidebar, ProcessView } from '@shilong521/design';

import { useRef, useState } from 'react';
import {
  ProcessViewApiRefProps,
  ProcessViewValueProps,
  SidebarDataProps,
} from '@shilong521/design/dist/es/processDnD/interface';
import { ProcessSidebar, ProcessView } from '@shilong521/design';

const App = () => {
  const apiRef = useRef<ProcessViewApiRefProps>(null);

  const [activeId, setActiveId] = useState<string>('');
  const [sidebarData] = useState<SidebarDataProps[]>([
    { id: '1', title: '测试节点1' },
    { id: '2', title: '测试节点2' },
  ]);
  const [contentData, setContentData] = useState<ProcessViewValueProps>({
    nodeList: [],
    edgeList: [],
  });

  return (
    <div style={{ display: 'flex', height: 800, width: 1000 }}>
      <ProcessSidebar sidebarData={sidebarData} style={{ marginRight: 10 }} />
      <div style={{ flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
        <ProcessView
          emptyProcessConfig={{
            style: {
              height: 300,
            },
          }}
          activeId={activeId}
          onActiveIdChange={(id) => setActiveId(id as string)}
          style={{ height: 300 }}
          apisRef={apiRef}
          value={contentData}
          onChange={(_, newSource) =>
            setContentData(
              newSource || {
                nodeList: [],
                edgeList: [],
              }
            )
          }
        />
        <div style={{ border: '1px solid rgba(60, 60, 60, 0.1)', flexGrow: 1 }}>
          {JSON.stringify(
            contentData.nodeList.find((v) => v.id === activeId) || {}
          )}
        </div>
      </div>
    </div>
  );
};

import { SimpleForm } from '@shilong521/design'; //Simple表单

<SimpleForm
  onSubmit={onSubmit}
  formItemData={[
    {
      type: 'input',
      itemDataProps: {
        label: 'uid',
        field: 'uid',
        rules: [{ required: true, message: '必填项' }],
      },
      componentProps: {},
    },
    {
      type: 'select',
      itemDataProps: {
        label: 'uids',
        field: 'uids',
        rules: [{ required: true, message: '必填项' }],
      },
      componentProps: {
        options: [
          {
            label: '1',
            value: '1',
          },
          {
            label: '2',
            value: '2',
          },
        ],
      },
    },
  ]}
  submitButtonText="切换"
/>;

import { CascaderArea } from '@shilong521/design'; //区域选择器