@ray-js/ray-ipc-half-horizontal-drag 0.0.4 → 0.0.5-beta-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/index.d.ts +2 -2
  2. package/lib/index.js +86 -90
  3. package/lib/index.module.less +106 -160
  4. package/lib/props.d.ts +64 -14
  5. package/package.json +4 -5
package/lib/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { IProps, Data } from './props';
2
+ import { IProps, IPropDatas } from './props';
3
3
  declare const HalfHorizontalDrag: React.FC<IProps>;
4
- export { type IProps, type Data };
4
+ export { type IProps, type IPropDatas };
5
5
  export default HalfHorizontalDrag;
package/lib/index.js CHANGED
@@ -1,107 +1,103 @@
1
- import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
2
1
  import "core-js/modules/esnext.iterator.map.js";
3
2
  import React from 'react';
4
- import { View } from '@ray-js/ray';
5
3
  import clsx from 'clsx';
4
+ import { View, ScrollView, Image } from '@ray-js/ray';
6
5
  import styles from './index.module.less';
7
6
  const NILL = () => null;
8
7
  const HalfHorizontalDrag = props => {
9
8
  const {
10
9
  className,
10
+ classNameBox,
11
11
  style,
12
- data
12
+ datas,
13
+ onBgClick,
14
+ onRightClick,
15
+ showCloseBtn,
16
+ onCloseClick = NILL,
17
+ closeBtnTitle,
18
+ closeBtnIcon
13
19
  } = props;
14
- if (!data || !data.length) return null;
15
- if (data.length === 1) {
16
- const item = data[0];
17
- const {
18
- tag,
19
- tagStyle,
20
- tagClassName,
21
- title,
22
- onClick = NILL
23
- } = item || {};
24
- return /*#__PURE__*/React.createElement(View, {
25
- className: clsx(styles.content, className),
26
- style: _objectSpread({}, style)
27
- }, /*#__PURE__*/React.createElement(View, {
28
- style: _objectSpread(_objectSpread({}, item.style), {}, {
29
- backgroundImage: item.backgroundImage ? `url(${item.backgroundImage})` : undefined,
30
- background: item.background || undefined
31
- }),
32
- className: clsx(styles.one_data_item, styles.item, item.className),
33
- onClick: onClick
34
- }, /*#__PURE__*/React.createElement(View, {
35
- className: styles.icon
36
- }, item.icon), /*#__PURE__*/React.createElement(View, {
37
- className: styles.title
38
- }, title), !!tag && /*#__PURE__*/React.createElement(View, {
39
- style: _objectSpread({}, tagStyle),
40
- className: clsx(styles.tag, tagClassName)
41
- }, tag)));
42
- }
43
- if (data.length === 2) {
44
- return /*#__PURE__*/React.createElement(View, {
45
- className: clsx(styles.content, styles.towContent, className)
46
- }, data.map((item, idx) => {
47
- const {
48
- title,
49
- tag,
50
- tagStyle,
51
- tagClassName,
52
- onClick = NILL
53
- } = item;
20
+ const onCurRightImage = (e, data) => {
21
+ onRightClick && onRightClick(data);
22
+ e.stopPropagation();
23
+ };
24
+ const onCurBgClick = (e, data) => {
25
+ onBgClick && onBgClick(data);
26
+ };
27
+ const datasRender = num => {
28
+ const classBox = clsx({
29
+ [styles.container_box_1]: num === 1,
30
+ [styles.container_box_2]: num === 2,
31
+ [styles.container_box_3]: num > 2,
32
+ [styles.container_box_1_width]: num === 1 && showCloseBtn,
33
+ [styles.container_box_2_width]: num === 2 && showCloseBtn
34
+ });
35
+ return /*#__PURE__*/React.createElement(React.Fragment, null, datas.map(data => {
54
36
  return /*#__PURE__*/React.createElement(View, {
55
- key: idx // eslint-disable-line
56
- ,
57
- style: _objectSpread(_objectSpread({}, item.style), {}, {
58
- backgroundImage: item.backgroundImage ? `url(${item.backgroundImage})` : undefined,
59
- background: item.background || undefined
60
- }),
61
- onClick: onClick,
62
- className: clsx(styles.two_data_item, styles.item, item.className)
37
+ className: `${styles.container_box} ${classBox} ${classNameBox}`,
38
+ key: data.id
63
39
  }, /*#__PURE__*/React.createElement(View, {
64
- className: styles.icon
65
- }, item.icon), /*#__PURE__*/React.createElement(View, {
66
- className: styles.title
67
- }, title), !!tag && /*#__PURE__*/React.createElement(View, {
68
- style: _objectSpread({}, tagStyle),
69
- className: clsx(styles.tag, tagClassName)
70
- }, tag));
71
- }));
72
- }
73
- if (data.length >= 3) {
74
- return /*#__PURE__*/React.createElement(View, {
75
- className: clsx(styles.content, styles.moreContent, className)
76
- }, data.map((item, idx) => {
77
- const {
78
- title,
79
- tag,
80
- tagStyle,
81
- tagClassName,
82
- onClick = NILL
83
- } = item;
84
- return /*#__PURE__*/React.createElement(View
85
- // eslint-disable-next-line react/no-array-index-key
86
- , {
87
- key: idx,
88
- style: _objectSpread(_objectSpread({}, item.style), {}, {
89
- backgroundImage: item.backgroundImage ? `url(${item.backgroundImage})` : undefined,
90
- background: item.background || undefined
91
- }),
92
- className: clsx(styles.item, styles.more_data_item, item.className),
93
- onClick: onClick
40
+ className: styles.container_box_content,
41
+ onClick: e => onCurBgClick(e, data)
42
+ }, /*#__PURE__*/React.createElement(Image, {
43
+ className: styles.container_box_content_bg,
44
+ mode: "aspectFill",
45
+ src: data.bgImage
46
+ }), /*#__PURE__*/React.createElement(View, {
47
+ style: {
48
+ flex: 1,
49
+ width: '100%',
50
+ display: 'flex',
51
+ flexDirection: 'row',
52
+ position: 'relative'
53
+ }
54
+ }, /*#__PURE__*/React.createElement(View, {
55
+ style: {
56
+ flex: 1,
57
+ overflow: 'hidden'
58
+ }
94
59
  }, /*#__PURE__*/React.createElement(View, {
95
- className: styles.icon
96
- }, item.icon), /*#__PURE__*/React.createElement(View, {
97
- className: styles.title
98
- }, title), !!tag && /*#__PURE__*/React.createElement(View, {
99
- style: _objectSpread({}, tagStyle),
100
- className: clsx(styles.tag, tagClassName)
101
- }, tag));
60
+ className: `${styles.container_box_content_name}`
61
+ }, data.name), /*#__PURE__*/React.createElement(View, {
62
+ className: `${styles.container_box_content_subName}`
63
+ }, data.subName)), /*#__PURE__*/React.createElement(Image, {
64
+ className: styles.container_box_content_icon,
65
+ mode: "aspectFill",
66
+ src: data.rightIcon,
67
+ onClick: e => onCurRightImage(e, data)
68
+ }))));
102
69
  }));
103
- }
104
- return null;
70
+ };
71
+ const renderCloseBtn = () => {
72
+ if (!showCloseBtn) {
73
+ return null;
74
+ }
75
+ return /*#__PURE__*/React.createElement(View, {
76
+ className: styles.close_btn,
77
+ onClick: onCloseClick
78
+ }, closeBtnIcon, closeBtnTitle);
79
+ };
80
+ return /*#__PURE__*/React.createElement(React.Fragment, null, (() => {
81
+ if (!datas || !datas.length) return null;
82
+ if (datas.length === 2 || datas.length === 1) {
83
+ const Container = showCloseBtn ? ScrollView : View;
84
+ return /*#__PURE__*/React.createElement(Container, {
85
+ hideScrollbar: true,
86
+ className: `half_horizontal_drag ${styles.container} ${className || ''}`,
87
+ style: style,
88
+ scrollX: showCloseBtn
89
+ }, datasRender(datas.length), renderCloseBtn());
90
+ }
91
+ if (datas.length > 2) {
92
+ return /*#__PURE__*/React.createElement(ScrollView, {
93
+ hideScrollbar: true,
94
+ className: `half_horizontal_drag ${styles.container} ${className || ''}`,
95
+ style: style,
96
+ scrollX: true
97
+ }, datasRender(datas.length), renderCloseBtn());
98
+ }
99
+ return /*#__PURE__*/React.createElement(React.Fragment, null);
100
+ })());
105
101
  };
106
102
  HalfHorizontalDrag.displayName = 'HalfHorizontalDrag';
107
103
  export {};
package/lib/index.module.less CHANGED
@@ -1,173 +1,119 @@
1
- .content {
1
+ @class-prefix: ~'half_horizontal_drag';
2
+
3
+ .@{class-prefix} {
4
+ color: #000;
5
+ font-size: 48rpx;
6
+ font-weight: bold;
7
+ }
8
+
9
+ .container {
10
+ display: flex;
11
+ flex-direction: row;
12
+ white-space: nowrap;
2
13
  margin: 48rpx 0;
3
- &.towContent {
4
- display: flex;
5
- }
6
- &.moreContent {
7
- margin: 0;
8
- padding: 48rpx 0;
9
- display: flex;
10
- overflow-x: scroll;
11
- overflow-y: visible;
12
- &::-webkit-scrollbar {
13
- display: none;
14
- }
15
- }
16
- .one_data_item {
17
- margin: 0 32rpx;
18
- }
19
- .two_data_item {
20
- flex: 1;
21
- margin-left: 32rpx;
22
- &:last-child {
23
- margin-right: 32rpx;
24
- }
14
+ scrollbar-width: none;
15
+ -ms-overflow-style: none;
16
+
17
+ &::-webkit-scrollbar {
18
+ display: none;
25
19
  }
26
- .more_data_item {
27
- width: 336rpx;
28
- min-width: 336rpx;
29
- margin-left: 12rpx;
30
- &:first-child {
31
- margin-left: 32rpx;
32
- }
33
- &:last-child {
34
- margin-right: 32rpx;
35
- }
20
+ }
21
+
22
+ .container_box_1 {
23
+ flex: 1;
24
+ }
25
+
26
+ .container_box_1_width {
27
+ flex: none;
28
+ width: 686rpx;
29
+ }
30
+
31
+ .container_box_2 {
32
+ flex: 1;
33
+ }
34
+
35
+ .container_box_2_width {
36
+ flex: none;
37
+ width: 335rpx;
38
+ }
39
+
40
+ .container_box_3 {
41
+ width: 314rpx;
42
+ }
43
+
44
+ .container_box {
45
+ height: 110rpx;
46
+ overflow: hidden;
47
+ display: inline-block;
48
+ margin-left: 16rpx;
49
+ border-radius: 32rpx;
50
+
51
+ &:last-child {
52
+ margin-right: 32rpx;
36
53
  }
37
- .item {
38
- position: relative;
39
- border-radius: 32rpx;
40
- height: 110rpx;
54
+
55
+ &_content {
41
56
  display: flex;
57
+ flex-direction: row;
58
+ height: 100%;
59
+ padding: 18rpx 0 18rpx 24rpx;
60
+ justify-content: space-between;
42
61
  align-items: center;
43
- padding: 0 40rpx;
44
- color: #000;
45
- background: #fff;
46
- background-size: cover;
47
- background-repeat: no-repeat;
48
- background-position: center;
49
- .icon {
50
- width: 48rpx;
51
- height: 48rpx;
52
- display: flex;
53
- align-items: center;
54
- justify-content: center;
62
+ position: relative;
63
+
64
+ &_bg {
65
+ position: absolute;
66
+ left: 0;
67
+ top: 0;
68
+ width: 100%;
69
+ height: 100%;
55
70
  }
56
- .title {
57
- flex: 1;
58
- display: -webkit-box; /* 必须结合以下两个属性使用 */
59
- -webkit-box-orient: vertical; /* 垂直箱子布局 */
60
- margin-left: 24rpx;
61
- -webkit-line-clamp: 2; /* 显示的行数 */
62
- overflow: hidden; /* 溢出隐藏 */
63
- text-overflow: ellipsis; /* 溢出显示省略号 */
71
+
72
+ &_name {
64
73
  font-size: 28rpx;
65
- line-height: 40rpx;
66
- }
67
- .tag {
68
- position: absolute;
69
- right: -6rpx;
70
- top: -20rpx;
71
74
  color: #fff;
72
- height: 40rpx;
73
- line-height: 40rpx;
74
- border-radius: 40rpx;
75
- border-bottom-right-radius: 0px;
76
- padding: 0 20rpx;
75
+ overflow: hidden;
76
+ text-overflow: ellipsis;
77
+ }
78
+
79
+ &_subName {
77
80
  font-size: 24rpx;
78
- background: linear-gradient(345deg, #B2B0B0 1%, #EBEBEB 100%);
79
- font-weight: 600;
80
- color: rgba(0, 0, 0, 0.4);
81
- max-width: 128rpx;
82
- white-space: nowrap; /* 禁止换行 */
83
- overflow: hidden; /* 隐藏溢出内容 */
84
- text-overflow: ellipsis; /* 单行溢出显示省略号 */
81
+ color: rgba(255, 255, 255, 0.7);
82
+ overflow: hidden;
83
+ text-overflow: ellipsis;
84
+ }
85
+
86
+ &_icon {
87
+ margin: 0 8rpx;
88
+ width: 44rpx;
89
+ height: 44rpx;
90
+ margin-right: 10rpx;
85
91
  }
86
92
  }
87
93
  }
88
94
 
89
- // @class-prefix: ~'half_horizontal_drag';
90
-
91
- // .@{class-prefix} {
92
- // color: #000;
93
- // font-size: 48rpx;
94
- // font-weight: bold;
95
- // }
96
-
97
- // .container {
98
- // display: flex;
99
- // flex-direction: row;
100
- // white-space: nowrap;
101
- // height: 200rpx;
102
- // margin: 48rpx 0;
103
- // }
104
-
105
- // .container_box_2 {
106
- // flex: 1;
107
- // }
108
-
109
- // .container_box_3 {
110
- // width: 314rpx;
111
- // }
112
-
113
- // .container_box {
114
- // height: 100%;
115
- // overflow: hidden;
116
- // display: inline-block;
117
- // margin-left: 16rpx;
118
- // border-radius: 32rpx;
119
-
120
- // &:last-child {
121
- // margin-right: 32rpx;
122
- // }
123
-
124
- // &_content {
125
- // display: flex;
126
- // flex-direction: row;
127
- // height: 100%;
128
- // padding: 18rpx 0 18rpx 24rpx;
129
- // justify-content: space-between;
130
- // align-items: center;
131
- // position: relative;
132
-
133
- // &_bg {
134
- // position: absolute;
135
- // left: 0;
136
- // top: 0;
137
- // width: 100%;
138
- // height: 100%;
139
- // }
140
-
141
- // &_name {
142
- // font-size: 28rpx;
143
- // color: #fff;
144
- // overflow: hidden;
145
- // text-overflow: ellipsis;
146
- // }
147
-
148
- // &_subName {
149
- // font-size: 24rpx;
150
- // color: rgba(255, 255, 255, 0.7);
151
- // overflow: hidden;
152
- // text-overflow: ellipsis;
153
- // }
154
-
155
- // &_icon {
156
- // margin: 0 8rpx;
157
- // width: 44rpx;
158
- // height: 44rpx;
159
- // margin-right: 10rpx;
160
- // }
161
- // }
162
- // }
163
-
164
- // .right_icon_bg {
165
- // width: 40rpx;
166
- // height: 40rpx;
167
- // border-radius: 40rpx;
168
- // background: #fff;
169
- // margin-right: 10rpx;
170
- // display: flex;
171
- // align-items: center;
172
- // justify-content: center;
173
- // }
95
+ .right_icon_bg {
96
+ width: 40rpx;
97
+ height: 40rpx;
98
+ border-radius: 40rpx;
99
+ background: #fff;
100
+ margin-right: 10rpx;
101
+ display: flex;
102
+ align-items: center;
103
+ justify-content: center;
104
+ }
105
+
106
+ .close_btn {
107
+ position: relative;
108
+ display: inline-block;
109
+ margin-left: 14rpx;
110
+ margin-right: 32rpx;
111
+ border-radius: 32rpx;
112
+ height: 110rpx;
113
+ line-height: 110rpx;
114
+ background-color: rgba(240, 76, 76, 0.2);
115
+ vertical-align: top;
116
+ padding: 0 32rpx;
117
+ color: #F04C4C;
118
+ font-size: 28rpx;
119
+ }
package/lib/props.d.ts CHANGED
@@ -1,30 +1,80 @@
1
- import React from 'react';
2
- export type Data = {
3
- title: string;
4
- backgroundImage?: string;
5
- background?: string;
6
- icon?: React.ReactNode;
7
- className?: string;
8
- style?: React.CSSProperties;
9
- tag?: string;
10
- tagClassName?: string;
11
- tagStyle?: React.CSSProperties;
12
- onClick?: () => void;
13
- };
1
+ /// <reference types="react" />
14
2
  export interface IProps {
15
3
  /**
16
4
  * @description.zh 数据
17
5
  * @description.en datas
18
6
  */
19
- data: Data[];
7
+ datas: IPropDatas[];
20
8
  /**
21
9
  * @description.zh 类名
22
10
  * @description.en class name
23
11
  */
24
12
  className?: string;
13
+ /**
14
+ * @description.zh 盒子类名
15
+ * @description.en class name box
16
+ */
17
+ classNameBox?: string;
25
18
  /**
26
19
  * @description.zh 样式
27
20
  * @description.en Style
28
21
  */
29
22
  style?: React.CSSProperties;
23
+ /**
24
+ * @description.zh 点击事件
25
+ * @description.en bg image
26
+ */
27
+ onBgClick?: (data: IPropDatas) => void;
28
+ /**
29
+ * @description.zh 点击事件
30
+ * @description.en bg image
31
+ */
32
+ onRightClick?: (data: IPropDatas) => void;
33
+ /**
34
+ * @description.zh 是否显示关闭按钮
35
+ * @description.en Whether to display the close button
36
+ */
37
+ showCloseBtn?: boolean;
38
+ /**
39
+ * @description.zh 点击关闭按钮触发的回调
40
+ * @description.en Callback triggered by clicking the close button
41
+ */
42
+ onCloseClick?: (e: any) => void;
43
+ /**
44
+ * @description.zh 关闭按钮标题
45
+ * @description.en Close button title
46
+ */
47
+ closeBtnTitle?: string | React.ReactElement;
48
+ /**
49
+ * @description.zh 关闭按钮图标
50
+ * @description.en Close button icon
51
+ */
52
+ closeBtnIcon?: React.ReactElement;
53
+ }
54
+ export interface IPropDatas {
55
+ /**
56
+ * @description.zh 唯一标识
57
+ * @description.en id
58
+ */
59
+ id: string;
60
+ /**
61
+ * @description.zh 名称
62
+ * @description.en name
63
+ */
64
+ name?: string;
65
+ /**
66
+ * @description.zh 子名称
67
+ * @description.en sub name
68
+ */
69
+ subName?: string;
70
+ /**
71
+ * @description.zh 右侧图标
72
+ * @description.en right icon
73
+ */
74
+ rightIcon?: string;
75
+ /**
76
+ * @description.zh 背景图
77
+ * @description.en bg image
78
+ */
79
+ bgImage?: string;
30
80
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ray-js/ray-ipc-half-horizontal-drag",
3
- "version": "0.0.4",
3
+ "version": "0.0.5-beta-2",
4
4
  "description": "水平方向可拖动，显示出下一个组件的小部分内容",
5
5
  "main": "lib/index",
6
6
  "files": [
@@ -34,20 +34,19 @@
34
34
  "@ray-js/ray": "^1.4.9"
35
35
  },
36
36
  "dependencies": {
37
- "clsx": "^1.2.1",
38
- "uuid": "^11.0.4"
37
+ "clsx": "^1.2.1"
39
38
  },
40
39
  "devDependencies": {
41
40
  "@commitlint/cli": "^7.2.1",
42
41
  "@commitlint/config-conventional": "^9.0.1",
43
42
  "@ray-js/cli": "^1.4.9",
44
- "@ray-js/panel-sdk": "^1.13.0-storage.7",
45
43
  "@ray-js/ray": "^1.4.9",
46
44
  "core-js": "^3.19.1",
47
45
  "eslint-config-tuya-panel": "^0.4.2",
48
46
  "husky": "^1.2.0",
49
47
  "lint-staged": "^10.2.11",
50
- "standard-version": "9.3.2"
48
+ "standard-version": "9.3.2",
49
+ "@ray-js/panel-sdk": "^1.13.0-storage.7"
51
50
  },
52
51
  "resolutions": {
53
52
  "@ray-js/builder-mp": "1.4.15"