hy-design v0.1.2

hy-design

包含基础组件，功能性组件，业务组件，hooks，utils

npm i hy-design --save

基础组件

基础组件基于 antd 封装，用 React.mome 包装了一下，防止重复渲染。 Button 新增节流功能，throttleTime 属性,默认节流 500 毫秒。可防止重复提交

import {basicComponent} from "hy-design"
const {Button} from basicComponent

Form 组件 进行改造新鲜出炉

参考下面例子

export default (props: any) => {
  const [state, setState] = useImmer({ name: "李四", age: { label: "大", value: "13" }, eat: "aaa" });
  const formRef = useRef();
  const [form] = Form.useForm();
  const configForm = {
    form: form,
  };

  const mapStateToForm = (data: any) => {
    setState(data);
  };
  const onSubmit = () => {
    console.log(form.getFieldsValue());
    console.log("tongbu", state);
  };

  const configItem = [
    {
      label: "姓名",
      name: "name",
      itemProps: {},
      render: (itemProps: any) => <Input />,
    },
    {
      label: "年龄",
      name: "age",
      render: (itemProps: any) => <Modal popupComponent={(onSelected: any) => <PopupComponent onSelected={onSelected} />} />,
      rules: [
        {
          required: true,
          message: "Please input your nickname",
        },
      ],
    },
  ];
  useEffect(() => {
    console.log(state);
  }, [state]);

  return (
    <>
      <Form ref={formRef} configForm={configForm} configItem={configItem} initValues={state}   mapStateToForm={mapStateToForm} />
      <Button onClick={onSubmit}>点我</Button>
    </>
  );
};

新增 InputModal 的组件 可以配合 Form 组件使用

import {basicComponent} from "hy-design"
const {Input} from basicComponent
const {Modal} = Input

功能性组件

路由组件,routeURLs 属性和 requset 属性二选一，以 routeURLs 优先级更高。主要作用从后台获取路由 url，根据路由 url 动态导入加载相应的页面组件。

type RouterProps = {
  basename?: string;
  redirect?: string;
  routeURLs?: string[];
  requset?: () => Promise<string[]>;
};


import {basicComponent} from "hy-design"
const {Router,RouterProps} = basicComponent


const App = () => {
  const getList = () => {
    return new Promise((resovle, reject) => {
      resovle(["/user/list"]);
    });
  };
  return (
    <>
      <Router basename="bpmn" redirect="/user/list" requset={getList} />
    </>
  );
};


render(<App />, document.getElementById("root"));

注意：webpack 的配置和动态加载路由的关系

//webpack配置
  resolve: {
    alias: {
      "@/pages": resolve("src/pages"),
    },
  },

动态路由组件内部会根据 @/pages/${url}去动态加载页面组件，所以页面组件的路由地址和页面创建的文件路径保持一致，否则加载失败。 例如后台返回的路由地址是 /user/list ,那么你需要在 工程目录src/pages这个文件夹下创建 user 文件夹并创建 list.tsx 文件，并在 list.tsx 文件实现页面组件的功能。

业务组件

暂无后面会陆续添加进来，业务组件主要包含选人组件，某些通用的图表，选机构等等。

hooks

这里主要是一些自定义的 hooks 工具

import {hooks} from "hy-design"
const {useDebounce,useThrottle,useImmer,createModel} = hooks

export default React.memo((props: IProps) => {
  const { children, disabled, ghost, href, htmlType, icon, loading, shape, size, target, type, onClick, block, danger, throttleTime, style } = props;

  const onThrottleClick = useThrottle(onClick, throttleTime || 500);

  return (
    <Button type={type} disabled={disabled} style={style} ghost={ghost} href={href} htmlType={htmlType} icon={icon} loading={loading} shape={shape} size={size} target={target} onClick={onThrottleClick} block={block} danger={danger}>
      {children}
    </Button>
  );
});

  function useNameHook(){
    const [state, setState] = useImmer({name:"123"});
    const onChangeName = useCallback((value)=>{
       setState((draft)=>{
          draft.name = value
       })
    },[])
    return {state,onChangeName}
  }
  //如果需要useNameHook全局共享

  const useNameHookModel = createModel(useNameHook)

• useDebounce 是 react hooks 防抖

• useThrottle 是 react hooks 节流

• useImmer 是针对 useState 做了一层封装实现不可变数据结构

• createModel 是实现自定义 hooks 的全局共享

utils

工具集，封装了一些常用的函数

import {utils} from "hy-design"
const {createTree, utf16toEntities,unzip,zip,base64toFile,imgURLtoBase64,trunshowTable,trunshowTableItem,storage,localstorage,uuidInt,} = utils

createTree //构建树函数

utf16toEntities //类似qq图标 在上传到服务端需要转换

unzip 解压字符串

zip 压缩字符串

base64toFile  //base64的图片转成文件对象

imgURLtoBase64 //远程图片路径转成base64

trunshowTable //自定义2.0平台数据转换函数 传进去为数组

trunshowTableItem //自定义2.0平台数据转换函数 数组中的某条

storage // sessionStorage的操作封装

storage.get("key") //获取

storage.set("key",value) //这里value不一定是字符串，内部做了转换。

storage.remove("key)  //移除

storage.clear() //清空所有的sessionStorage

localstorage //是缓存到 localStorage的方法 ，在使用上和storage方法一样，只是缓存的地方不一样

uuidInt(12) //获取uuidInt全局唯一id的 参数是为位数 获取多少位的唯一uuidInt。返回的是整数字符串。