jupyterlab/packages/jldbq-extenison/src/wizard/drawer.tsx

import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { solarizedDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import { useTableSchema } from './service';

export const TableShemaDrawer: React.FunctionComponent<{
  dataSource: string;
  tableName: string;
  show: boolean;
  onClose: () => void;
}> = ({ dataSource, tableName, show, onClose }) => {
  const { data } = useTableSchema(dataSource, tableName);
  return (
    <div className={'drawer-container ' + (show ? '' : 'drawer-hidden')}>
      <div className="drawer-titlebar">
        <div className="drawer-title">表结构预览</div>
        <button
          type="button"
          tabIndex={-1}
          className="drawer-close-btn"
          onClick={onClose}
        />
      </div>
      <div className="drawer-table-header">
        <span className="drawer-table-cell" style={{ width: '20%' }}>
          序号
        </span>
        <span className="drawer-table-cell" style={{ width: '35%' }}>
          字段
        </span>
        <span className="drawer-table-cell" style={{ width: '35%' }}>
          类型
        </span>
        <span className="drawer-table-cell" style={{ width: '10%' }}>
          长度
        </span>
      </div>
      <div className="drawer-table-body">
        {data &&
          data.map((row, idx) => (
            <div key={idx} className="drawer-table-row">
              <span className="drawer-table-cell" style={{ width: '20%' }}>
                {idx + 1}
              </span>
              <span className="drawer-table-cell" style={{ width: '35%' }}>
                {row.field}
              </span>
              <span className="drawer-table-cell" style={{ width: '35%' }}>
                {row.type}
              </span>
              <span className="drawer-table-cell" style={{ width: '10%' }}>
                {row.length}
              </span>
            </div>
          ))}
      </div>
    </div>
  );
};

export const JsonSchemaDrawer: React.FunctionComponent<{
  jsonSchema: any;
  show: boolean;
  onClose: () => void;
}> = ({ jsonSchema, show, onClose }) => {
  return (
    <div
      className={
        'drawer-container drawer-dark ' + (show ? '' : 'drawer-hidden')
      }
    >
      <div className="drawer-titlebar">
        <div className="drawer-title" />
        <button
          type="button"
          tabIndex={-1}
          className="drawer-close-btn"
          onClick={onClose}
        />
      </div>
      <SyntaxHighlighter showLineNumbers language="json" style={solarizedDark}>
        {JSON.stringify(jsonSchema, null, 2)}
      </SyntaxHighlighter>
    </div>
  );
};