Skip to content

Commit beacb0c

Browse files
yinLiangDreamyinLiangDream
committed
Merge branch 'develop'
2 parents 40b063a + c323c2f commit beacb0c

File tree

19 files changed

+598
-232
lines changed

19 files changed

+598
-232
lines changed

‎@types/floatButton.d.ts

+13-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
1-
import {ComponentClass} from "react";
2-
import {bgColorMoreType, bgColorType, iconType, lightBgColorType, normalSizeType} from "./baseType";
1+
import { ComponentClass } from "react";
2+
import { bgColorMoreType, bgColorType, iconType, lightBgColorType, normalSizeType } from "./baseType";
33

44
export interface IProps {
5+
/**
6+
* 初始化时 Button 的位置
7+
*
8+
* 默认 top: `auto`, right: `50`, bottom: `200`, left: `auto`
9+
*/
10+
position?: {
11+
top?: number | 'auto';
12+
right?: number | 'auto';
13+
bottom?: number | 'auto';
14+
left?: number | 'auto';
15+
}
516
/**
617
* 点击阴影关闭
718
*

‎@types/index.d.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,6 @@ export { default as ClDivider } from './divider';
3737
export { default as ClForm } from './form';
3838
export { default as ClFormItem } from './formItem';
3939
export { default as ClTip } from './tip';
40+
export { default as ClSwiperAction } from './swiperAction'
4041

41-
export { default as ClUtils } from './utils';
42+
export { default as ClUtils } from './utils';

‎@types/swiperAction.d.ts

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { ComponentClass } from 'react';
2+
import { bgColorType, bgColorMoreType, lightBgColorType } from './baseType';
3+
4+
export interface IProps {
5+
/**
6+
* 是否开启
7+
*
8+
* 默认 `false`
9+
*/
10+
show?: boolean;
11+
/**
12+
* 是否禁止滑动
13+
*
14+
* 默认 `false`
15+
*/
16+
disabled?: boolean;
17+
/**
18+
* 点击选项时,是否自动关闭
19+
*
20+
* 默认 `false`
21+
*/
22+
autoClose?: boolean;
23+
/**
24+
* 展示的选项数组
25+
*/
26+
options?: {
27+
/**
28+
* 按钮背景色
29+
*
30+
* 默认 `white`
31+
*/
32+
bgColor?: bgColorType | bgColorMoreType | lightBgColorType;
33+
/**
34+
* 文字内容
35+
*/
36+
text?: string;
37+
}[];
38+
/**
39+
* 方向
40+
*
41+
* 默认 `right`
42+
*/
43+
direction?: 'right' | 'left';
44+
/**
45+
* 点击按钮事件
46+
*/
47+
onClick?: (index: number) => void;
48+
/**
49+
* 打开时触发
50+
*/
51+
onOpened?: () => void;
52+
/**
53+
* 关闭时触发
54+
*/
55+
onClose?: () => void;
56+
children?: any
57+
}
58+
59+
declare const SwiperAction: ComponentClass<IProps>;
60+
61+
export default SwiperAction;

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# MP-COLORUI 是基于 Taro 框架的组件库
22

3-
![GitHub stars](https://img.shields.io/github/stars/yinliangdream/mp-colorui?style=social) ![GitHub forks](https://img.shields.io/github/forks/yinliangdream/mp-colorui?style=social)
3+
[![GitHub stars](https://img.shields.io/github/stars/yinliangdream/mp-colorui?style=social) ![GitHub forks](https://img.shields.io/github/forks/yinliangdream/mp-colorui?style=social)](https://github.com/yinLiangDream/mp-colorui)
44

5-
![npm](https://img.shields.io/npm/dw/mp-colorui) ![NPM](https://img.shields.io/npm/l/mp-colorui) ![npm type definitions](https://img.shields.io/npm/types/mp-colorui) ![GitHub package.json version](https://img.shields.io/github/package-json/v/yinliangdream/mp-colorui)
5+
[![npm](https://img.shields.io/npm/dm/mp-colorui) ![NPM](https://img.shields.io/npm/l/mp-colorui) ![npm type definitions](https://img.shields.io/npm/types/mp-colorui) ![GitHub package.json version](https://img.shields.io/github/package-json/v/yinliangdream/mp-colorui)](https://github.com/yinLiangDream/mp-colorui)
66

77

88
## 特色

‎package.json

+93-93
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,95 @@
11
{
2-
"name": "mp-colorui",
3-
"version": "0.4.8",
4-
"description": "MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）",
5-
"keywords": [
6-
"taro",
7-
"mp-colorui",
8-
"colorui"
9-
],
10-
"main": "dist/index.js",
11-
"main:h5": "dist/h5/index.js",
12-
"types": "./@types/index.d.ts",
13-
"repository": "https://github.com/yinLiangDream/mp-colorui",
14-
"homepage": "https://yinliangdream.github.io/mp-colorui-doc/#/",
15-
"files": [
16-
"dist",
17-
"@types"
18-
],
19-
"scripts": {
20-
"build:weapp": "taro build --type weapp",
21-
"build:swan": "taro build --type swan",
22-
"build:alipay": "taro build --type alipay",
23-
"build:h5": "taro build --type h5",
24-
"build:rn": "taro build --type rn",
25-
"dev:weapp": "npm run build:weapp -- --watch",
26-
"dev:swan": "npm run build:swan -- --watch",
27-
"dev:alipay": "npm run build:alipay -- --watch",
28-
"dev:h5": "npm run build:h5 -- --watch",
29-
"dev:rn": "npm run build:rn -- --watch",
30-
"lint": "eslint ./src --fix",
31-
"test": "jest --coverage",
32-
"build": "TARO_BUILD_TYPE=ui taro build --ui",
33-
"publish:beta": "npm run build & npm publish --tag=beta",
34-
"publish:production": "npm run build & npm publish"
35-
},
36-
"lint-staged": {
37-
"*.{js,ts,tsx,jsx}": [
38-
"eslint --quiet --cache --fix",
39-
"git add"
40-
]
41-
},
42-
"author": "liangyin",
43-
"license": "MIT",
44-
"dependencies": {
45-
"area-data": "^5.0.6"
46-
},
47-
"devDependencies": {
48-
"@babel/core": "^7.4.5",
49-
"@babel/plugin-proposal-class-properties": "^7.4.4",
50-
"@babel/plugin-transform-react-jsx": "^7.3.0",
51-
"@babel/preset-env": "^7.1.0",
52-
"@tarojs/async-await": "1.3.15",
53-
"@tarojs/components": "1.3.15",
54-
"@tarojs/plugin-babel": "1.3.15",
55-
"@tarojs/plugin-csso": "1.3.15",
56-
"@tarojs/plugin-sass": "1.3.15",
57-
"@tarojs/plugin-uglifyjs": "1.3.15",
58-
"@tarojs/router": "1.3.15",
59-
"@tarojs/taro": "1.3.15",
60-
"@tarojs/taro-alipay": "1.3.15",
61-
"@tarojs/taro-h5": "1.3.15",
62-
"@tarojs/taro-swan": "1.3.15",
63-
"@tarojs/taro-weapp": "1.3.15",
64-
"@tarojs/webpack-runner": "1.3.15",
65-
"@types/react": "^16.8.20",
66-
"@types/sinon": "^5.0.7",
67-
"@types/webpack-env": "^1.13.9",
68-
"babel-core": "^7.0.0-bridge.0",
69-
"babel-eslint": "^10.0.1",
70-
"babel-jest": "^24.8.0",
71-
"babel-plugin-transform-class-properties": "^6.24.1",
72-
"babel-plugin-transform-decorators-legacy": "^1.3.5",
73-
"babel-plugin-transform-jsx-stylesheet": "^0.6.5",
74-
"babel-plugin-transform-object-rest-spread": "^6.26.0",
75-
"babel-preset-env": "^1.7.0",
76-
"cross-env": "^5.2.0",
77-
"eslint": "^6.1.0",
78-
"eslint-config-taro": "1.3.15",
79-
"eslint-plugin-import": "^2.17.3",
80-
"eslint-plugin-react": "^7.13.0",
81-
"eslint-plugin-react-hooks": "^2.0.1",
82-
"eslint-plugin-taro": "1.3.15",
83-
"husky": "^2.4.1",
84-
"jest": "^24.8.0",
85-
"lint-staged": "^8.0.3",
86-
"nerv-server": "^1.4.0",
87-
"nerv-test-utils": "^1.4.0",
88-
"nervjs": "^1.4.4",
89-
"regenerator-runtime": "^0.12.1",
90-
"simulant": "^0.2.2",
91-
"sinon": "^7.3.2",
92-
"tslint": "^5.19.0",
93-
"typescript": "^3.5.2"
94-
}
2+
"name": "mp-colorui",
3+
"version": "0.4.9",
4+
"description": "MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）",
5+
"keywords": [
6+
"taro",
7+
"mp-colorui",
8+
"colorui"
9+
],
10+
"main": "dist/index.js",
11+
"main:h5": "dist/h5/index.js",
12+
"types": "./@types/index.d.ts",
13+
"repository": "https://github.com/yinLiangDream/mp-colorui",
14+
"homepage": "https://yinliangdream.github.io/mp-colorui-doc/#/",
15+
"files": [
16+
"dist",
17+
"@types"
18+
],
19+
"scripts": {
20+
"build:weapp": "taro build --type weapp",
21+
"build:swan": "taro build --type swan",
22+
"build:alipay": "taro build --type alipay",
23+
"build:h5": "taro build --type h5",
24+
"build:rn": "taro build --type rn",
25+
"dev:weapp": "npm run build:weapp -- --watch",
26+
"dev:swan": "npm run build:swan -- --watch",
27+
"dev:alipay": "npm run build:alipay -- --watch",
28+
"dev:h5": "npm run build:h5 -- --watch",
29+
"dev:rn": "npm run build:rn -- --watch",
30+
"lint": "eslint ./src --fix",
31+
"test": "jest --coverage",
32+
"build": "TARO_BUILD_TYPE=ui taro build --ui",
33+
"publish:beta": "npm run build & npm publish --tag=beta",
34+
"publish:production": "npm run build & npm publish"
35+
},
36+
"lint-staged": {
37+
"*.{js,ts,tsx,jsx}": [
38+
"eslint --quiet --cache --fix",
39+
"git add"
40+
]
41+
},
42+
"author": "liangyin",
43+
"license": "MIT",
44+
"dependencies": {
45+
"area-data": "^5.0.6"
46+
},
47+
"devDependencies": {
48+
"@babel/core": "^7.4.5",
49+
"@babel/plugin-proposal-class-properties": "^7.4.4",
50+
"@babel/plugin-transform-react-jsx": "^7.3.0",
51+
"@babel/preset-env": "^7.1.0",
52+
"@tarojs/async-await": "1.3.15",
53+
"@tarojs/components": "1.3.15",
54+
"@tarojs/plugin-babel": "1.3.15",
55+
"@tarojs/plugin-csso": "1.3.15",
56+
"@tarojs/plugin-sass": "1.3.15",
57+
"@tarojs/plugin-uglifyjs": "1.3.15",
58+
"@tarojs/router": "1.3.15",
59+
"@tarojs/taro": "1.3.15",
60+
"@tarojs/taro-alipay": "1.3.15",
61+
"@tarojs/taro-h5": "1.3.15",
62+
"@tarojs/taro-swan": "1.3.15",
63+
"@tarojs/taro-weapp": "1.3.15",
64+
"@tarojs/webpack-runner": "1.3.15",
65+
"@types/react": "^16.8.20",
66+
"@types/sinon": "^5.0.7",
67+
"@types/webpack-env": "^1.13.9",
68+
"babel-core": "^7.0.0-bridge.0",
69+
"babel-eslint": "^10.0.1",
70+
"babel-jest": "^24.8.0",
71+
"babel-plugin-transform-class-properties": "^6.24.1",
72+
"babel-plugin-transform-decorators-legacy": "^1.3.5",
73+
"babel-plugin-transform-jsx-stylesheet": "^0.6.5",
74+
"babel-plugin-transform-object-rest-spread": "^6.26.0",
75+
"babel-preset-env": "^1.7.0",
76+
"cross-env": "^5.2.0",
77+
"eslint": "^6.1.0",
78+
"eslint-config-taro": "1.3.15",
79+
"eslint-plugin-import": "^2.17.3",
80+
"eslint-plugin-react": "^7.13.0",
81+
"eslint-plugin-react-hooks": "^2.0.1",
82+
"eslint-plugin-taro": "1.3.15",
83+
"husky": "^2.4.1",
84+
"jest": "^24.8.0",
85+
"lint-staged": "^8.0.3",
86+
"nerv-server": "^1.4.0",
87+
"nerv-test-utils": "^1.4.0",
88+
"nervjs": "^1.4.4",
89+
"regenerator-runtime": "^0.12.1",
90+
"simulant": "^0.2.2",
91+
"sinon": "^7.3.2",
92+
"tslint": "^5.19.0",
93+
"typescript": "^3.5.2"
94+
}
9595
}

‎src/components/avatar/index.tsx

+29-21
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
import { Text, View } from '@tarojs/components'
2-
import Taro, { pxTransform } from '@tarojs/taro'
3-
import { isNumber } from '../utils'
2+
import Taro, { pxTransform, useEffect, useState } from '@tarojs/taro'
3+
import { isNumber, generateId } from '../utils'
44
import { BG_COLOR_LIST } from '../utils/model'
55
import { IProps, THeaderArray } from '../../../@types/avatar'
66

7-
function ClAvatar (props: IProps) {
7+
function ClAvatar(props: IProps) {
8+
const [headList, setHeadList] = useState(props.headerArray)
9+
useEffect(() => {
10+
const list = props.headerArray || []
11+
setHeadList(list.map((item: any) => {
12+
item.cu_avatar_id = generateId()
13+
return item
14+
}))
15+
}, [props.headerArray])
816
const onClick = () => {
917
props.onClick && props.onClick()
1018
}
@@ -17,13 +25,13 @@ function ClAvatar (props: IProps) {
1725
const width = isNumber(props.size) ? pxTransform(props.size) : pxTransform(customSize[props.size || 'normal'])
1826
const height = isNumber(props.size) ? pxTransform(props.size) : pxTransform(customSize[props.size || 'normal'])
1927
const em = isNumber(props.size) ? props.size / 48 : customSize[props.size || 'normal'] / 48
20-
const avatarArray = props.headerArray ? (
21-
props.headerArray.map((item: THeaderArray, index: number) => (
28+
const avatarArray = headList ? (
29+
headList.map(((item: any) => (
2230
<View
23-
key={index}
31+
key={item.cu_avatar_id}
2432
className={`${props.shape} ${BG_COLOR_LIST[item.bgColor || 'black']} ${
2533
props.shadow ? 'shadow' : ''
26-
} cu-avatar`}
34+
} cu-avatar`}
2735
style={item.url ? {
2836
backgroundImage: `url(${item.url})`,
2937
width,
@@ -38,16 +46,16 @@ function ClAvatar (props: IProps) {
3846
<View
3947
className={`cu-tag badge cuIcon-${item.tag} ${
4048
item.tagColor ? BG_COLOR_LIST[item.tagColor] : ''
41-
}`}
49+
}`}
4250
/>
4351
) : (
44-
''
45-
)}
52+
''
53+
)}
4654
</View>
4755
))
48-
) : (
49-
<View/>
50-
)
56+
) : (
57+
<View />
58+
)
5159
const avatarArrayComponent = (
5260
<View
5361
className='cu-avatar-group'
@@ -61,14 +69,14 @@ function ClAvatar (props: IProps) {
6169
return props.headerArray && props.headerArray.length > 1 ? (
6270
avatarArrayComponent
6371
) : (
64-
<View
65-
onClick={() => {
66-
onClick()
67-
}}
68-
>
69-
{avatarArray}
70-
</View>
71-
)
72+
<View
73+
onClick={() => {
74+
onClick()
75+
}}
76+
>
77+
{avatarArray}
78+
</View>
79+
)
7280
}
7381

7482
ClAvatar.options = {

0 commit comments

Comments
 (0)