# zl-react-component

> react component library for zeling

Latest version **3.3.4** (published 2019-12-27) · ISC license · 0 weekly downloads

## Install

```sh
npm install zl-react-component
pnpm add zl-react-component
yarn add zl-react-component
bun add zl-react-component
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.3.4 |
| Published | 2019-12-27 |
| First published | 2018-12-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 407.2 KB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | theling-tb |

## Links

- npm: https://www.npmjs.com/package/zl-react-component
- npm.io page: https://npm.io/package/zl-react-component

## Dependencies (12)

- [antd](https://npm.io/package/antd.md) 3.26.4
- [axios](https://npm.io/package/axios.md) 0.19.0
- [react](https://npm.io/package/react.md) 16.9.0
- [history](https://npm.io/package/history.md) 4.9.0
- [react-dom](https://npm.io/package/react-dom.md) 16.9.0
- [react-amap](https://npm.io/package/react-amap.md) 1.2.8
- [umi-request](https://npm.io/package/umi-request.md) 1.2.2
- [react-router](https://npm.io/package/react-router.md) ^5.0.0
- [react-json-view](https://npm.io/package/react-json-view.md) ^1.19.1
- [@types/amap-js-sdk](https://npm.io/package/@types/amap-js-sdk.md) ^1.4.1
- [react-image-lightbox](https://npm.io/package/react-image-lightbox.md) ^5.1.0
- [@types/amap-js-api-geolocation](https://npm.io/package/@types/amap-js-api-geolocation.md) ^1.4.0

## Recent versions

- 3.3.4 (latest) — 2019-12-27
- 3.3.2 — 2019-12-19
- 3.3.1 — 2019-11-01
- 3.3.0 — 2019-10-10
- 3.2.3 — 2019-09-17
- 3.2.2 — 2019-08-16
- 3.2.1 — 2019-08-08
- 3.2.0 — 2019-08-05
- 3.1.30 — 2019-07-26
- 3.1.29 — 2019-07-26
- 3.1.28 — 2019-07-09
- 3.1.27 — 2019-06-21
- 3.1.26 — 2019-06-21
- 3.1.25 — 2019-06-21
- 3.1.24 — 2019-06-21
- … 90 more at https://npm.io/package/zl-react-component/versions

## README

## zl的组件封装

参考自：https://www.jianshu.com/p/db6113c94dbc

说明：

1. 使用npm或cnpm进行包的安装更新

2. 组件编译 `npm run build`

3. 项目关联到本地 `npm link`

4. 其他项目引用本项目 `npm link zl-react-component`

```text
    1、本地更新版本号
        比如我想来个1.0.1版本，这个是补丁的意思，补丁最合适；
        ：npm version patch
        比如我想来个1.1.0版本，这个是小修小改；
        ：npm version minor
        比如我想来个2.0.0版本，这个是大改咯；
        ：npm version major
    2、修改远端的版本,提交到远端npm中：
        npm publish 
```

配置文件简要说明：

.babelrc:

> 编译的配置文件，用于react，es6编译成es5。具体请查看注释

webpack.config:

> webpack的配置文件，这里使用的是webpack3。具体请查看注释

项目中使用的插件说明：

文件拷贝：[copy-webpack-plugin](https://www.npmjs.com/package/copy-webpack-plugin)

dist文件清理：[clean-webpack-plugin](https://www.npmjs.com/package/clean-webpack-plugin)

request的页面跳转：[history](https://www.jianshu.com/p/1f94291a5370)

> React-Router v4.0上已经不推荐使用hashRouter，主推browserRouter，但是因为使用browserRouter需要服务端配合可能造成不便，有时还是需要用到hashRouter。下面是v4.0的React-Router中hashRouter以js方式跳转的实现步骤。

开发注意事项：

在基于antd开发时，没有完善对组件的样式加载，需要进行手动一个一个的引入

## 如何使用

> 组件都没有默认导出，都要用花括号的哦

```js
import { zlrequest as request } from 'zl-react-component';
```

### zlrequest请求组件

zlrequest 请求组件依赖包如下

    "antd": "^3.11.2",      
    "axios": "^0.18.0",
    "history": "^4.7.2",
    "react": "^16.6.3",
    "react-amap": "^1.2.7",
    "react-dom": "^16.6.3",
    "react-json-view": "^1.19.1"
    
请保证项目安装了以下依赖

API：

参数 | 说明 | 类型 | 默认值
---|---|---|---
OpenParamsNotification | 开启参数提示，这个参数是保存子啊sessionStory里面的 | String | null

### 地图组件的使用

我们提供了三个地图组件的使用。

对于地图组件，需要使用搞得地图提供的key，你可以定义window的全局变量。也可以传递进来

#### 1. MapPointInfo 地图上选择坐标点

```jsx harmony
    <MapPointInfo mapInfoFn={this.mapInfoFn} mapstyle={mapstyle} />
```

API:

参数 | 说明 | 类型 | 默认值
---|---|---|---
mapInfoFn | 地图的点击回调 | function | null
mapstyle | 地图的样式 | object | null
center | 地图的中心点 | object | 天安门
markerPoint | 默认显示的marker点 | object | null
version | 版本号 | string | 1.44.1
zoom | 放大级别 | number | 15
mapConfig | 地图的配置项，可以直接传递一个这个来覆盖前面的配置 | object | {}

#### 2. MapPoint 地图上显示一个marker点

```jsx harmony
    <MapPoint point={point} />
```

API:

参数 | 说明 | 类型 | 默认值
---|---|---|---
gis | 后台返回的gis对象{lat: '', lng: '', address: '', addressinfo: '', } | object | null
mapstyle | 地图的样式 | object | null
center | 地图的中心点 | object | 天安门
markerPoint | 默认显示的marker点 | object | null
version | 版本号 | string | 1.44.1
zoom | 放大级别 | number | 15
**mapConfig** | 地图的配置项，可以直接传递一个这个来覆盖前面的配置 | object | {}

#### 3. MapPolygon 地图是哪个显示一个多边形

```jsx harmony
    <MapPolygon areaList={areaList} height={350} {...amapConfig} />
```

API: 

参数 | 说明 | 类型 | 默认值
---|---|---|---
amapConfig | 坐标点对象{point: '', center: '', version: '', amapkey: '', } | object | null
height | 高度 | number | 不可为空
areaList | 接收带有区域坐标的数据 | array | []
 
#### 4. zllayouts 统一的布局
```jsx harmony
    <Col {...colOption2}>
        <GisInfo gis={project} />
    </Col>
```

API:

名称 | 说明
---|---
rowGutterOption | 栅格配置（100%）
colOption2 | 栅格配置（二等份）
colOption3 | 栅格配置（三等份）
searchLayout | 搜索布局
timeLayout | 时间布局
formItemLayout | 表单布局（labelCol和WrapperCol）
 
 #### 5. zlnetwork 下载文件的方法
```js
 /**
  * 获取文件的上下文
  * @param suffix 后缀名
  * @return {string}
  */
 export const fileMIME = (suffix) => {
     switch (suffix) {
         case 'txt':
             return 'text/plain';
         case 'doc':
             return 'application/msword';
         default:
             return '';
     }
 };
```

 ```js
 /**
 * 文件下载
 * @param { function } downloadFile 下载文件的方法
 * @param { string } fileid 文件的id
 * @param { string } name 文件的名称
 * @param { string } suffix 文件的后缀名
 * @param { string } alias 别名
*/
export const downloadFileUtil = (downloadFile,fileid,name,suffix,alias) => {
    // 获取文件的名字
    const getName = alias ? name + "_" + alias : name;
    // 获得mime配置
    const mime = fileMIME(suffix);
    downloadFile({ fileid }).then(res => {
        // 这里res.data是返回的blob对象
        // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
        const blob = new Blob([res], { type: mime + ';charset=utf-8' });
        const downloadElement = document.createElement('a');
        // 创建下载的链接
        const href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        // 下载后文件名
        downloadElement.download = getName;
        document.body.appendChild(downloadElement);
        // 点击下载
        downloadElement.click();
        // 下载完成移除元素
        document.body.removeChild(downloadElement);
        // 释放掉blob对象
        window.URL.revokeObjectURL(href);
    });
};
```

#### 6.zlobject封装好的一些方法（区域颜色样式、假数据数组等）


#### 7.zlrequest 发送请求

 * @param params 参数数组
 * @param apiUrl 请求的地址
 * @returns {*}
 * @constructor
 
 

#### 8. ImageUpload 图片上传组件

```jsx harmony
<ImageUpload
    saveImgList={this.saveImgList}
    boxType="picture-card"
/>
```

API: 

参数 | 说明 | 类型 | 默认值
---|---|---|---
saveImgList | 上传文件后的回调 | func | null
boxType | 上传文件的样式 | string | 'picture-card'
maxNum | 文件上传的最大数量 | number | 6

#### 9. BaseForm 表单构建组件

```jsx harmony
<BaseForm itemList={itemList} form={form} col={24} />
```

API:

参数 | 说明 | 类型 | 默认值
---|---|---|---
itemList | 表单配置数据 | Array | null
itemObj | 表单配置数据 | Object | null
form | 表单对象，基于ant提供的form组件 | Obj | null
col | 布局 | number | 12

itemList是一个有着固定规范的表单对象

栗子：

```js
 const itemList = [{
    id: 'name',
    name: '名字',
    type: 'input',
    must: true
}, {
    id: 'uniscid',
    name: '统一社会信用代码',
    type: 'text',
    must: true
}, {
    id: 'sex',
    value: '', // 默认值
    name: '性别',
    type: 'select',
    must: true,
    opts: [
        {
            text: '男',
            id: '01'
        },
        {
            text: '女',
            id: '02'
        }
    ]
}];
```

对象栗子：

```js
const itemObj = {
    id: 'rangeTime',
    name: '选择日期',
    type: 'rangeTime',
    value: '',
    must: true,
}
```

关于type的说明：

参数 | 说明 | 其他参数
---|---|---
input | 输入框 |
select | 单选框 |
selectMu | 多选框 | 
text | 文本输入-默认三行 | 
number | 数字-使用数字的时候 | 最小值-min，最大值-max
time | 日期选择 | 
rangeTime | 开始时间-结束时间 | 
cascader | 级联选择 | 直接查看ant的级联选择
radio | 单选点击 | 竖布局-vertical true或者false
rate | 评分 | 

#### 10. BaseFormItem（推荐使用）单个Form组件渲染

> 在使用BaseForm进行开发的时候，出现了这么一个需求，我们要点击想要的输入框，然后动态的编辑他的文本，所以弄了一个单个的FormItem组件

> 注意：在BaseFormItem里面，使用了Col组件，所以，在开发中，我们要求这么使用

```jsx
<Row>
    {formData.map(item => (
        <div key={item.id}>
            <BaseFormItem itemObj={item} form={form} />
        </div>
    ))}
</Row>
```

对于`BaseFormItem`，它只接收对象，不能接收数组，

数据格式:

```js
const formObj = {
    id: 'rangeTime',
    name: '选择日期',
    type: 'rangeTime',
    value: '',
    must: true,
}
```

关于type的说明：

参数 | 说明 | 其他参数
---|---|---
input | 输入框 |
select | 单选框 |
selectMu | 多选框 | 
text | 文本输入-默认三行 | 
number | 数字-使用数字的时候 | 最小值-min，最大值-max
time | 日期选择 | 
rangeTime | 开始时间-结束时间 | 
cascader | 级联选择 | 直接查看ant的级联选择
radio | 单选点击 | 竖布局-vertical true或者false
rate | 评分 | 
checkbox | 复选框 | 打勾勾的

---
_Source: https://npm.io/package/zl-react-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._