@yhwang911/yh-ui-react

@安装使用

# 没有安装nrm源管理工具时...
npm i -g nrm

# NPM全局切换到官方源
nrm use npm

# 安装UI/React
npm i @yhwang911/yh-ui-react

使用弹窗

import React, { useState } from "react";

// 引入弹窗
import { YhPopup } from "@yhwang911/yh-ui-react";

export default function PopupDemo() {
  // 用一个state控制要不要显示弹窗
  const [showPopup, setShowPopup] = useState(false);

  return (
    <div>
      <h3>PopupDemo</h3>
      <button onClick={() => setShowPopup(true)}>显示弹窗</button>

      {/* 需要时显示弹窗显示弹窗 */}
      {showPopup && (
        // closer={setShowPopup} 告诉组件哪个state在控制弹窗的显隐 它好在必要时帮你关闭弹窗
        // title="我的弹窗" 弹窗标题
        // onConfirm={() => console.log("已确定")} 点击确定时的回调
        // <p>This is a modal content</p> 自定义弹窗内容
        <YhPopup
          closer={setShowPopup}
          title="我的弹窗"
          onConfirm={() => console.log("已确定")}
        >
          <p>This is a modal content</p>
        </YhPopup>
      )}
    </div>
  );
}

执行效果

使用表格

import React from "react";

// 引入超级表格
import { YhTableX } from "@yhwang911/yh-ui-react";

/* 造一堆测试数据 */
import { getStudents } from "../common/mockdata";
const students = getStudents(20, true);

/* 格式化数据字段 */
const formatters = {
  // 用一个a标签去显示学生姓名
  name: (key: string, item: any) => <a href={`/${item.id}`}>{item[key]}</a>,

  // 用a标签嵌套img显示学生头像
  avatar: (key: string, item: any) => (
    <a href={`/${item.id}`}>
      <img style={{ width: 40 }} src={`${item[key]}`} alt="" />
    </a>
  ),
};

/* 数据多选发生变化时回调 */
const onSelectedItemsChanged = (items: Set<Record<string, any>>) => {
  console.log("onSelectedItemsChanged", items);
};

/* 组合组件：自带筛选器和分页器的超级表格 */
export default function TableXDemo() {
  return (
    <div>
      TableXDemo
      {/* 
       data={students} 表格数据
       width={800}  设置表格宽度
       formatters={formatters} 字段的具体显示方式
       sortables={["name","age","score"]} 哪些字段支持排序
       pageSize={10} 一页显示多少条数据
       onSelectedItemsChanged={onSelectedItemsChanged} 多选发生变化时回调
      */}
      <YhTableX
        data={students}
        // width={800}
        formatters={formatters}
        sortables={["name", "age", "score"]}
        pageSize={10}
        onSelectedItemsChanged={onSelectedItemsChanged}
      ></YhTableX>
    </div>
  );
}

执行效果

使用导入导出为xlsx

import { useState, useRef } from 'react'
import { YhImport, YhExport } from '@yhwang911/yh-ui-react'
export default function App () {
  const ExportRef: any = useRef(null)
  // 数据
  const [row, setRow] = useState([
    { id: 1, name: '养老保险', personage: 40, firm: 35, img: '/public/vite.svg', linkname: '百度', link: 'https://www.baidu.com/', total: 1200 },
    { id: 2, name: '医疗保险', personage: 100, firm: 30, img: '/public/vite.svg', linkname: '百度', link: 'https://www.baidu.com/', total: 1200 },
    { id: 3, name: '失业保险', personage: 25, firm: 35, img: '/public/vite.svg', linkname: '百度', link: 'https://www.baidu.com/', total: 1200 }
  ])
  // 标题
  const columns = [
    { key: 'id', label: 'ID', type: 'sort' },
    { key: 'name', label: '缴纳项目', type: 'normal' },
    { key: 'personage', label: '个人', type: 'normal' },
    { key: 'firm', label: '企业', type: 'sort' },
    { key: 'img', label: '照片', type: 'image' },
    { key: 'total', label: '合计', type: 'normal' }
  ]
  // 导出
  const exportXlsx = () => {
    if (ExportRef.current) {
      ExportRef.current.exportXlsx()
    }
  }
  // 导入
  const importXlsx = (data: Array<any>) => {
    console.log(data, 'data');
    setRow([...row, ...data])
  }
  return (
    <>
      {/* 导出 */}
      <YhExport dataSource={row} columns={columns} ref={ExportRef}>
        <button onClick={exportXlsx}>导出</button>
      </YhExport>
      {/* 导入 */}
      <YhImport columns={columns} importXlsx={importXlsx} inputShow={false}></YhImport>

    </>
  )
}