Skip to content

Commit 08d3388

Browse files
yinLiangDreamyinLiangDream
committed
Merge branch 'develop'
2 parents beacb0c + 286b75b commit 08d3388

19 files changed

+801
-445
lines changed

‎.eslintrc

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"extends": ["taro"],
3+
"plugins": ["react", "react-hooks", "import"],
34
"rules": {
45
"no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }],
56
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx"] }]

‎.idea/jsLinters/eslint.xml

-6
This file was deleted.

‎.idea/workspace.xml

+13-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎@types/actionSheet.d.ts

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import { bgColorType, bgColorMoreType, lightBgColorType } from './baseType';
2+
import { ComponentClass } from "react";
3+
4+
export interface IProps {
5+
/**
6+
* 出现类型
7+
*/
8+
type?: 'full' | 'card';
9+
/**
10+
* 提示文字
11+
*/
12+
tip?: string
13+
/**
14+
* 是否打开
15+
*
16+
* 默认 `false`
17+
*/
18+
isOpened?: boolean;
19+
/**
20+
* 点击阴影是否可以关闭
21+
*
22+
* 默认值 `true`
23+
*/
24+
closeWithShadow?: boolean;
25+
/**
26+
* 动作面板数组
27+
*/
28+
options?: {
29+
/**
30+
* 文字
31+
*/
32+
text?: string
33+
/**
34+
* 背景色
35+
*/
36+
bgColor?: bgColorType | bgColorMoreType | lightBgColorType | string
37+
}[]
38+
/**
39+
* 取消按钮的文本
40+
*/
41+
cancelText?: string
42+
/**
43+
* 是否显示取消按钮
44+
*
45+
* 默认 `false`
46+
*/
47+
showCancel?: boolean
48+
/**
49+
* 取消按钮背景色
50+
*
51+
* 默认 `white`
52+
*/
53+
cancelBgColor?: bgColorType | bgColorMoreType | lightBgColorType
54+
/**
55+
* 取消按钮按钮文字颜色
56+
*/
57+
cancelFontColor?: bgColorType
58+
/**
59+
* 点击按钮事件
60+
*/
61+
onClick?: (index: number) => void
62+
/**
63+
* 点击取消触发
64+
*/
65+
onCancel?: () => void
66+
}
67+
68+
declare const ActionSheet: ComponentClass<IProps>
69+
70+
export default ActionSheet

‎@types/card.d.ts

+6
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,12 @@ export interface IProps {
2626
* 默认 `true`
2727
*/
2828
shadow?: boolean;
29+
/**
30+
* 激活当前 Card
31+
*
32+
* 默认 `false`
33+
*/
34+
active?: boolean;
2935
children?: any;
3036
}
3137

‎@types/drawer.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export interface IProps {
3232
onCancel?: () => void;
3333
}
3434

35-
export interface DrawerProps extends IProps {}
35+
export interface DrawerProps extends IProps { }
3636
declare const Drawer: ComponentClass<DrawerProps>;
3737

3838
export default Drawer;

‎@types/index.d.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ 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'
40+
export { default as ClSwiperAction } from './swiperAction';
41+
export { default as ClActionSheet } from './actionSheet';
4142

4243
export { default as ClUtils } from './utils';

‎@types/swiperAction.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export interface IProps {
2929
*
3030
* 默认 `white`
3131
*/
32-
bgColor?: bgColorType | bgColorMoreType | lightBgColorType;
32+
bgColor?: bgColorType | bgColorMoreType | lightBgColorType | string;
3333
/**
3434
* 文字内容
3535
*/

‎package.json

+18-17
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mp-colorui",
3-
"version": "0.4.9",
3+
"version": "0.4.10",
44
"description": "MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）",
55
"keywords": [
66
"taro",
@@ -49,19 +49,19 @@
4949
"@babel/plugin-proposal-class-properties": "^7.4.4",
5050
"@babel/plugin-transform-react-jsx": "^7.3.0",
5151
"@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",
52+
"@tarojs/async-await": "1.3.18",
53+
"@tarojs/components": "1.3.18",
54+
"@tarojs/plugin-babel": "1.3.18",
55+
"@tarojs/plugin-csso": "1.3.18",
56+
"@tarojs/plugin-sass": "1.3.18",
57+
"@tarojs/plugin-uglifyjs": "1.3.18",
58+
"@tarojs/router": "1.3.18",
59+
"@tarojs/taro": "1.3.18",
60+
"@tarojs/taro-alipay": "1.3.18",
61+
"@tarojs/taro-h5": "1.3.18",
62+
"@tarojs/taro-swan": "1.3.18",
63+
"@tarojs/taro-weapp": "1.3.18",
64+
"@tarojs/webpack-runner": "1.3.18",
6565
"@types/react": "^16.8.20",
6666
"@types/sinon": "^5.0.7",
6767
"@types/webpack-env": "^1.13.9",
@@ -73,13 +73,14 @@
7373
"babel-plugin-transform-jsx-stylesheet": "^0.6.5",
7474
"babel-plugin-transform-object-rest-spread": "^6.26.0",
7575
"babel-preset-env": "^1.7.0",
76+
"classnames": "^2.2.6",
7677
"cross-env": "^5.2.0",
7778
"eslint": "^6.1.0",
78-
"eslint-config-taro": "1.3.15",
79-
"eslint-plugin-import": "^2.17.3",
79+
"eslint-config-taro": "1.3.18",
80+
"eslint-plugin-import": "^2.18.2",
8081
"eslint-plugin-react": "^7.13.0",
8182
"eslint-plugin-react-hooks": "^2.0.1",
82-
"eslint-plugin-taro": "1.3.15",
83+
"eslint-plugin-taro": "1.3.18",
8384
"husky": "^2.4.1",
8485
"jest": "^24.8.0",
8586
"lint-staged": "^8.0.3",

‎src/components/actionSheet/index.scss

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.cu_action_sheet {
2+
&_line {
3+
border-bottom-width: 1px;
4+
border-bottom-style: solid;
5+
overflow: hidden;
6+
}
7+
&_card {
8+
border-radius: 24px;
9+
overflow: hidden;
10+
margin: 0 30px;
11+
}
12+
}

‎src/components/actionSheet/index.tsx

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import Taro, { useState, useMemo, useEffect, pxTransform } from '@tarojs/taro';
2+
import classnames from 'classnames';
3+
import { IProps } from '../../../@types/actionSheet';
4+
import ClCard from '../card';
5+
import { generateId } from '../utils';
6+
import { bgColorType, bgColorMoreType, lightBgColorType } from '../utils/types';
7+
import ClText from '../text';
8+
import { View } from '@tarojs/components';
9+
import ClLayout from '../layout';
10+
11+
import './index.scss';
12+
13+
import { BG_COLOR_LIST } from '../utils/model';
14+
15+
export default function ClActionSheet(props: IProps) {
16+
const {
17+
type,
18+
tip,
19+
isOpened,
20+
closeWithShadow,
21+
options,
22+
cancelText,
23+
showCancel,
24+
cancelBgColor,
25+
cancelFontColor,
26+
onClick,
27+
onCancel
28+
} = props;
29+
const [actionsArr, setActionsArr] = useState([] as any[]);
30+
const [show, setShow] = useState(false);
31+
useMemo(() => {
32+
const list = options || [];
33+
setActionsArr(
34+
list.map((item: any) => {
35+
item.cu_action_sheet_id = generateId();
36+
return item;
37+
})
38+
);
39+
}, [options]);
40+
useMemo(() => {
41+
setShow(!!isOpened);
42+
}, [isOpened]);
43+
const click = (index: number) => {
44+
onClick && onClick(index);
45+
};
46+
const cancelComponent = (
47+
<View>
48+
<View
49+
onClick={(e) => {
50+
e.stopPropagation()
51+
onCancel && onCancel();
52+
}}
53+
style={{
54+
marginTop: pxTransform(20)
55+
}}
56+
className={classnames([
57+
{
58+
cu_action_sheet_card: type === 'card'
59+
}
60+
])}
61+
>
62+
<ClCard bgColor={cancelBgColor} type="full" active>
63+
<ClText text={cancelText} textColor={cancelFontColor} align="center" />
64+
</ClCard>
65+
</View>
66+
</View>
67+
);
68+
const tipComponent = (
69+
<ClText align="center" bgColor="gray" textColor="grey">
70+
<ClLayout padding="xsmall" paddingDirection="vertical">
71+
{tip}
72+
</ClLayout>
73+
</ClText>
74+
);
75+
const actionsComponents = actionsArr.map(
76+
(
77+
item: {
78+
cu_action_sheet_id: string;
79+
text: string;
80+
bgColor: bgColorType | bgColorMoreType | lightBgColorType;
81+
},
82+
index: number
83+
) => (
84+
<View
85+
onClick={click.bind(this, index)}
86+
className={classnames([
87+
{
88+
cu_action_sheet_line: index !== actionsArr.length - 1
89+
},
90+
BG_COLOR_LIST[item.bgColor]
91+
])}
92+
key={item.cu_action_sheet_id}
93+
>
94+
<ClCard bgColor={item.bgColor} type="full" active>
95+
<ClText align="center" text={item.text} />
96+
</ClCard>
97+
</View>
98+
)
99+
);
100+
return (
101+
<View
102+
className={classnames([
103+
'cu-modal bottom-modal',
104+
{
105+
show: show
106+
}
107+
])}
108+
onClick={e => {
109+
closeWithShadow && setShow(false);
110+
onCancel && onCancel();
111+
e.stopPropagation();
112+
}}
113+
>
114+
<View
115+
className="cu-dialog"
116+
style={{ maxHeight: '70vh', backgroundColor: `${type === 'card' ? 'transparent' : '#f8f8f8'}` }}
117+
onClick={e => {
118+
e.stopPropagation();
119+
}}
120+
>
121+
<View
122+
className={classnames([
123+
{
124+
cu_action_sheet_card: type === 'card'
125+
}
126+
])}
127+
>
128+
{tip ? tipComponent : ''}
129+
{actionsComponents}
130+
</View>
131+
{showCancel ? cancelComponent : ''}
132+
<View style={{ height: '20px', width: '100%' }} />
133+
</View>
134+
</View>
135+
);
136+
}
137+
138+
ClActionSheet.options = {
139+
addGlobalClass: true
140+
};
141+
142+
ClActionSheet.defaultProps = {
143+
tip: '',
144+
isOpened: false,
145+
closeWithShadow: true,
146+
actions: [],
147+
cancelText: '取消',
148+
showCancel: false,
149+
cancelBgColor: 'white',
150+
cancelFontColor: undefined,
151+
onClick: () => { },
152+
onCancel: () => { }
153+
} as IProps;

0 commit comments

Comments
 (0)