1.7.1 • Published 12 months ago

@szsk/rac v1.7.1

Weekly downloads
-
License
ISC
Repository
github
Last release
12 months ago

使用

npm install @szsk/rac

使用范围

antd组件的补充,react后台管理

线上文档地址

http://111.0.123.139:43001/szsk-doc/#/

组件类型

较常用型

Form

这是一个表单组件,完全配置化,减少繁杂代码

Form属性

属性说明类型默认值
formItemsitem配置IFormItem[]-
columns?列数number3

IFormItem属性

属性说明类型默认值
id参数keystring-
label前面的名称string-
type?item类型选择input|select|radio|datePicker|rangePicker|checkbox-
render?自定义表单组件(item: T) => React.ReactNode-
initialValue?初始值any-
rules?表单校验规则数组Rule[]-
options?select|checkbox|radio类型的可选项ISelectOption[]-
props?各种类型的基本可选属性InputProps|SelectProps|RadioGroupProps|DatePickerProps|RangePickerProps|CheckboxGroupProps-

ISelectOption属性

属性说明类型默认值
label名称string-
valuestring|number-
import React, { useRef, useState } from 'react';
import { SForm } from '@szsk/rac';
import { Button } from 'antd';
import { IFormItem } from '@szsk/rac/lib/Form/type';

const Demo = () => {
  const formEle = useRef<any>(null);
  const [columns, setCol] = useState(3);

  const formItems: IFormItem[] = [
    {
      id: 'input',
      label: '输入框',
      type: 'input',
      rules: [{ required: true }],
      props: {
        placeholder: '我是item的props',
      },
    },
    {
      id: 'select',
      label: '下拉选择',
      type: 'select',
      options: [
        {
          label: 'select1',
          value: '1',
        },
        {
          label: 'select2',
          value: '2',
        },
      ],
    },
    {
      id: 'radio',
      label: '单选框',
      type: 'radio',
      options: [
        {
          label: 'select1',
          value: '1',
        },
        {
          label: 'select2',
          value: '2',
        },
      ],
    },
    {
      id: 'checkbox',
      label: '复选框',
      type: 'checkbox',
      options: [
        {
          label: 'select1',
          value: '1',
        },
        {
          label: 'select2',
          value: '2',
        },
      ],
    },
    {
      id: 'datePicker',
      label: '时间选择',
      type: 'datePicker',
    },
  ];

  const onSubmit = () => {
    formEle.current.validateFields().then((values: any) => {
      console.log(values);
    });
  };

  return (
    <>
      <div className="f-mb-m">
        <Button className="f-mr-m" type="primary" onClick={() => setCol(3)}>
          3列
        </Button>
        <Button className="f-mr-m" type="primary" onClick={() => setCol(4)}>
          4列
        </Button>
        <Button className="f-mr-m" type="primary" onClick={() => setCol(5)}>
          5列
        </Button>
      </div>
      <SForm ref={formEle} formItems={formItems} columns={columns} />
      <Button type="primary" onClick={onSubmit}>
        提交
      </Button>
    </>
  );
};

export default Demo;

Search

用于列表搜索

SSearch属性

属性说明类型默认值
formItemsitem配置IFormItem[]-
onSearchsearch方法,默认挂载即搜索一次(params: any, toFirst: boolean, isReset: boolean) => any,params为搜索参数集合,toFirst为是否跳到第一页,isReset为是否为重置-
columns?列数number3
import React, { useRef, useState } from 'react';
import { SForm, SSearch } from '@szsk/rac';
import { Button } from 'antd';
import { IFormItem } from '@szsk/rac/lib/Form/type';

const Demo = () => {
  const formEle = useRef<any>(null);
  const [columns, setCol] = useState(3);

  const formItems: IFormItem[] = [
    {
      id: 'input',
      label: '输入框',
      type: 'input',
      props: {
        placeholder: '我是item的props',
      },
    },
    {
      id: 'select',
      label: '下拉选择',
      type: 'select',
      options: [
        {
          label: 'select1',
          value: '1',
        },
        {
          label: 'select2',
          value: '2',
        },
      ],
    },
    {
      id: 'radio',
      label: '单选框',
      type: 'radio',
      options: [
        {
          label: 'select1',
          value: '1',
        },
        {
          label: 'select2',
          value: '2',
        },
      ],
    },
    {
      id: 'checkbox',
      label: '复选框',
      type: 'checkbox',
      options: [
        {
          label: 'select1',
          value: '1',
        },
        {
          label: 'select2',
          value: '2',
        },
      ],
    },
    {
      id: 'datePicker',
      label: '时间选择',
      type: 'datePicker',
    },
  ];

  const onSubmit = (params: any, toFirst, isReset) => {
    console.log(params);
  };

  return (
    <>
      <div className="f-mb-m">
        <Button className="f-mr-m" type="primary" onClick={() => setCol(3)}>
          3列
        </Button>
        <Button className="f-mr-m" type="primary" onClick={() => setCol(4)}>
          4列
        </Button>
        <Button className="f-mr-m" type="primary" onClick={() => setCol(5)}>
          5列
        </Button>
      </div>
      <SSearch
        ref={formEle}
        formItems={formItems}
        columns={columns}
        onSearch={onSubmit}
      />
    </>
  );
};

export default Demo;

响应式自适应型

AutoSizeList

自适应容器下用于卡片列表的自适应排列

属性
属性说明类型默认值
list数据源列表T[]-
CompCard组件形式渲染React.FC<{ data: T; idx: number }>-
itemWidth卡片最小宽度number-
space?两个item中间间距number10px
rowNum?显示的行数,有时候只是想显示几行推荐的number-
示例
import React, { useRef, useState } from 'react';
import { SForm, SSearch, AutoSizeList } from '@szsk/rac';
import { Button } from 'antd';
import { IFormItem } from '@szsk/rac/lib/Form/type';

const Demo = () => {
  const itemWidth = 100;
  const list = [
    {
      name: '100px',
    },
    {
      name: '100px',
    },
    {
      name: '100px',
    },
    {
      name: '100px',
    },
    {
      name: '100px',
    },
    {
      name: '100px',
    },
    {
      name: '100px',
    },
    {
      name: '100px',
    },
    {
      name: '100px',
    },
    {
      name: '100px',
    },
    {
      name: '100px',
    },
  ];
  const Card = (props: any) => {
    const { data, idx } = props;
    return (
      <div>{data.name}</div>
    );
  };

  return <AutoSizeList list={list} CompCard={<Card />} space={24} itemWidth={itemWidth} />;
};

export default Demo;

StickyTabs

tabs瀑布展示模块吸顶,整体模块head + tabs吸顶,tab切换与滚动联动

interface IProps {
  tabL: ITabItem[]; // tab列表
  offsetTop?: number; // 容器距顶fixed的top距离
  headEle?: React.ReactNode; // 顶部包裹固定的元素
  tabBarExtraContent?: any;
  // 副作用:smooth形式下点击tab滚动,短时间内可能会导致自行滚动的tab active无效
  behavior?: 'instant' | 'smooth'; // 滚动形式1.instant 表示滚动会直接跳转到目标位置 2.smooth 平滑滚动并产生过渡效果
  // scrollContainer是为了兼容容器是scroll的,传入容器元素的处理目前可能存在问题(要求容器顶部区域为固定高度区域,不滚动!!!)
  // 若不是必须先不考虑scrollContainer
  scrollContainer?: Element;
}

export interface ITabItem {
  key: string;
  label: string;
  children?: React.ReactNode;
}

ContainImage

图片自适应块居中展示

interface IProps {
  imgSrc: string; // 图片地址
  width: string; // 容器宽度
  height: string; // 容器高度
  outerClass?: string; // 传入的class
  picCallback?: () => void; // 图片点击事件
}

ContainVideo

video自适应块居中展示,包含视频截图功能

interface IProps {
  videoSrc: string; // 视频地址
  style?: React.CSSProperties; // css样式
  width?: string; // 容器宽度
  height?: string; // 容器高度
  title?: string; // 视频modal title
  outerClass?: string; // 传入的class
  cropEnable?: boolean; // 是否可以截图
  videoCallback?: (dataUrl?: string) => void; // 弹窗点击确定回调
  children?: React.ReactNode;
}

图片型

ContainImage

图片自适应块居中展示

interface IProps {
  imgSrc: string; // 图片地址
  width: string; // 容器宽度
  height: string; // 容器高度
  outerClass?: string; // 传入的class
  picCallback?: () => void; // 图片点击事件
}

CropPicModal

图片裁剪

interface IProps {
  pic: string; // pic url
  visible: boolean; // 控制Modal显示
  onCloseModal: () => void; // 关闭Modal回调
  onCropData: (data: any) => void; // // ok回调
}

PictrueJigsaw

一个容器内多图片拼图

interface IPictureJigsawProps {
  picList: string[];
  width: string; // 目前只接受px
  height: string; // 目前只接受px
  className?: string;
}

其他

TextCopy

复制功能

interface IProps {
  // 待复制文字
  text: string;
  // 复制成功回调
  onCopy?: (text: string, result: boolean) => void;
}
1.7.1

12 months ago

1.7.0

2 years ago

1.2.0

2 years ago

1.6.4

2 years ago

1.2.8

2 years ago

1.6.3

2 years ago

1.2.7

2 years ago

1.6.2

2 years ago

1.2.6

2 years ago

1.6.1

2 years ago

1.2.5

2 years ago

1.6.0

2 years ago

1.4.2

2 years ago

1.2.4

2 years ago

1.4.1

2 years ago

1.2.3

2 years ago

1.4.0

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.2.12

2 years ago

1.2.13

2 years ago

1.2.10

2 years ago

1.2.11

2 years ago

1.2.14

2 years ago

1.2.15

2 years ago

1.3.1

2 years ago

1.3.0

2 years ago

1.2.9

2 years ago

1.1.9

2 years ago

1.1.8

2 years ago

1.1.7

2 years ago

1.1.6

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.10

2 years ago

1.1.1

2 years ago

1.1.2

2 years ago

1.1.0

2 years ago

1.0.51

2 years ago

1.0.50

2 years ago

1.0.54

2 years ago

1.0.53

2 years ago

1.0.52

2 years ago

1.0.48

2 years ago

1.0.49

2 years ago

1.0.47

2 years ago

1.0.46

2 years ago

1.0.45

2 years ago

1.0.39

2 years ago

1.0.38

2 years ago

1.0.40

2 years ago

1.0.44

2 years ago

1.0.43

2 years ago

1.0.42

2 years ago

1.0.41

2 years ago

1.0.37

2 years ago

1.0.36

3 years ago

1.0.22

3 years ago

1.0.26

3 years ago

1.0.25

3 years ago

1.0.24

3 years ago

1.0.23

3 years ago

1.0.29

3 years ago

1.0.28

3 years ago

1.0.27

3 years ago

1.0.33

3 years ago

1.0.32

3 years ago

1.0.31

3 years ago

1.0.30

3 years ago

1.0.35

3 years ago

1.0.34

3 years ago

1.0.21

3 years ago

1.0.20

3 years ago

1.0.19

3 years ago

1.0.18

3 years ago

1.0.17

3 years ago

1.0.16

3 years ago

1.0.15

3 years ago

1.0.14

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.13

3 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago