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

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 +87 -67
  3. package/lib/index.module.less +161 -73
  4. package/lib/props.d.ts +16 -36
  5. package/package.json +1 -1
package/lib/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { IProps, IPropDatas } from './props';
2
+ import { IProps, Data } from './props';
3
3
  declare const HalfHorizontalDrag: React.FC<IProps>;
4
- export { type IProps, type IPropDatas };
4
+ export { type IProps, type Data };
5
5
  export default HalfHorizontalDrag;
package/lib/index.js CHANGED
@@ -1,82 +1,102 @@
1
+ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
1
2
  import "core-js/modules/esnext.iterator.map.js";
2
3
  import React from 'react';
3
- import { View, ScrollView, Image } from '@ray-js/ray';
4
+ import { View } from '@ray-js/ray';
5
+ import clsx from 'clsx';
4
6
  import styles from './index.module.less';
7
+ const NILL = () => null;
5
8
  const HalfHorizontalDrag = props => {
6
9
  const {
7
10
  className,
8
- classNameBox,
9
11
  style,
10
- datas,
11
- onBgClick,
12
- onRightClick
12
+ data
13
13
  } = props;
14
- const onCurRightImage = (e, data) => {
15
- onRightClick && onRightClick(data);
16
- e.stopPropagation();
17
- };
18
- const onCurBgClick = (e, data) => {
19
- onBgClick && onBgClick(data);
20
- };
21
- const datasRender = num => {
22
- let classBox;
23
- if (num === 1) {
24
- classBox = styles.container_box_2;
25
- } else {
26
- classBox = styles.container_box_3;
27
- }
28
- return /*#__PURE__*/React.createElement(React.Fragment, null, datas.map(data => {
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 => {
47
+ const {
48
+ title,
49
+ tag,
50
+ tagStyle,
51
+ tagClassName,
52
+ onClick = NILL
53
+ } = item;
29
54
  return /*#__PURE__*/React.createElement(View, {
30
- className: `${styles.container_box} ${classBox} ${classNameBox}`,
31
- key: data.id
55
+ style: _objectSpread(_objectSpread({}, item.style), {}, {
56
+ backgroundImage: item.backgroundImage ? `url(${item.backgroundImage})` : undefined,
57
+ background: item.background || undefined
58
+ }),
59
+ onClick: onClick,
60
+ className: clsx(styles.two_data_item, styles.item, item.className)
32
61
  }, /*#__PURE__*/React.createElement(View, {
33
- className: styles.container_box_content,
34
- onClick: e => onCurBgClick(e, data)
35
- }, /*#__PURE__*/React.createElement(Image, {
36
- className: styles.container_box_content_bg,
37
- mode: "aspectFill",
38
- src: data.bgImage
39
- }), /*#__PURE__*/React.createElement(View, {
40
- style: {
41
- flex: 1,
42
- width: '100%',
43
- display: 'flex',
44
- flexDirection: 'row',
45
- position: 'relative'
46
- }
47
- }, /*#__PURE__*/React.createElement(View, {
48
- style: {
49
- flex: 1,
50
- overflow: 'hidden'
51
- }
52
- }, /*#__PURE__*/React.createElement(View, {
53
- className: `${styles.container_box_content_name}`
54
- }, data.name), /*#__PURE__*/React.createElement(View, {
55
- className: `${styles.container_box_content_subName}`
56
- }, data.subName)), /*#__PURE__*/React.createElement(Image, {
57
- className: styles.container_box_content_icon,
58
- mode: "aspectFill",
59
- src: data.rightIcon,
60
- onClick: e => onCurRightImage(e, data)
61
- }))));
62
+ className: styles.icon
63
+ }, item.icon), /*#__PURE__*/React.createElement(View, {
64
+ className: styles.title
65
+ }, title), !!tag && /*#__PURE__*/React.createElement(View, {
66
+ style: _objectSpread({}, tagStyle),
67
+ className: clsx(styles.tag, tagClassName)
68
+ }, tag));
62
69
  }));
63
- };
64
- return /*#__PURE__*/React.createElement(React.Fragment, null, (() => {
65
- if (datas.length === 2 || datas.length === 1) {
70
+ }
71
+ if (data.length >= 3) {
72
+ return /*#__PURE__*/React.createElement(View, {
73
+ className: clsx(styles.content, styles.moreContent, className)
74
+ }, data.map(item => {
75
+ const {
76
+ title,
77
+ tag,
78
+ tagStyle,
79
+ tagClassName,
80
+ onClick = NILL
81
+ } = item;
66
82
  return /*#__PURE__*/React.createElement(View, {
67
- className: `half_horizontal_drag ${styles.container} ${className}`,
68
- style: style
69
- }, datasRender(1));
70
- }
71
- if (datas.length > 2) {
72
- return /*#__PURE__*/React.createElement(ScrollView, {
73
- className: `half_horizontal_drag ${styles.container} ${className}`,
74
- style: style,
75
- scrollX: true
76
- }, datasRender(2));
77
- }
78
- return /*#__PURE__*/React.createElement(React.Fragment, null);
79
- })());
83
+ style: _objectSpread(_objectSpread({}, item.style), {}, {
84
+ backgroundImage: item.backgroundImage ? `url(${item.backgroundImage})` : undefined,
85
+ background: item.background || undefined
86
+ }),
87
+ className: clsx(styles.item, styles.more_data_item, item.className),
88
+ onClick: onClick
89
+ }, /*#__PURE__*/React.createElement(View, {
90
+ className: styles.icon
91
+ }, item.icon), /*#__PURE__*/React.createElement(View, {
92
+ className: styles.title
93
+ }, title), !!tag && /*#__PURE__*/React.createElement(View, {
94
+ style: _objectSpread({}, tagStyle),
95
+ className: clsx(styles.tag, tagClassName)
96
+ }, tag));
97
+ }));
98
+ }
99
+ return null;
80
100
  };
81
101
  HalfHorizontalDrag.displayName = 'HalfHorizontalDrag';
82
102
  export {};
package/lib/index.module.less CHANGED
@@ -1,85 +1,173 @@
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;
13
- height: 200rpx;
1
+ .content {
14
2
  margin: 48rpx 0;
15
- }
16
-
17
- .container_box_2 {
18
- flex: 1;
19
- }
20
-
21
- .container_box_3 {
22
- width: 314rpx;
23
- }
24
-
25
- .container_box {
26
- height: 100%;
27
- overflow: hidden;
28
- display: inline-block;
29
- margin-left: 16rpx;
30
- border-radius: 32rpx;
31
-
32
- &:last-child {
33
- margin-right: 32rpx;
3
+ &.towContent {
4
+ display: flex;
34
5
  }
35
-
36
- &_content {
6
+ &.moreContent {
7
+ margin: 0;
8
+ padding: 48rpx 0;
37
9
  display: flex;
38
- flex-direction: row;
39
- height: 100%;
40
- padding: 18rpx 0 18rpx 24rpx;
41
- justify-content: space-between;
42
- align-items: center;
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
+ }
25
+ }
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
+ }
36
+ }
37
+ .item {
43
38
  position: relative;
44
-
45
- &_bg {
46
- position: absolute;
47
- left: 0;
48
- top: 0;
49
- width: 100%;
50
- height: 100%;
39
+ border-radius: 32rpx;
40
+ height: 110rpx;
41
+ display: flex;
42
+ 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;
51
55
  }
52
-
53
- &_name {
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; /* 溢出显示省略号 */
54
64
  font-size: 28rpx;
55
- color: #fff;
56
- overflow: hidden;
57
- text-overflow: ellipsis;
65
+ line-height: 40rpx;
58
66
  }
59
-
60
- &_subName {
67
+ .tag {
68
+ position: absolute;
69
+ right: -6rpx;
70
+ top: -20rpx;
71
+ color: #fff;
72
+ height: 40rpx;
73
+ line-height: 40rpx;
74
+ border-radius: 40rpx;
75
+ border-bottom-right-radius: 0px;
76
+ padding: 0 20rpx;
61
77
  font-size: 24rpx;
62
- color: rgba(255, 255, 255, 0.7);
63
- overflow: hidden;
64
- text-overflow: ellipsis;
65
- }
66
-
67
- &_icon {
68
- margin: 0 8rpx;
69
- width: 44rpx;
70
- height: 44rpx;
71
- margin-right: 10rpx;
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; /* 单行溢出显示省略号 */
72
85
  }
73
86
  }
74
87
  }
75
88
 
76
- .right_icon_bg {
77
- width: 40rpx;
78
- height: 40rpx;
79
- border-radius: 40rpx;
80
- background: #fff;
81
- margin-right: 10rpx;
82
- display: flex;
83
- align-items: center;
84
- justify-content: center;
85
- }
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
+ // }
package/lib/props.d.ts CHANGED
@@ -1,20 +1,27 @@
1
- /// <reference types="react" />
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
+ };
2
14
  export interface IProps {
3
15
  /**
4
16
  * @description.zh 数据
5
17
  * @description.en datas
6
18
  */
7
- datas: IPropDatas[];
19
+ data: Data[];
8
20
  /**
9
21
  * @description.zh 类名
10
22
  * @description.en class name
11
23
  */
12
24
  className?: string;
13
- /**
14
- * @description.zh 盒子类名
15
- * @description.en class name box
16
- */
17
- classNameBox?: string;
18
25
  /**
19
26
  * @description.zh 样式
20
27
  * @description.en Style
@@ -24,37 +31,10 @@ export interface IProps {
24
31
  * @description.zh 点击事件
25
32
  * @description.en bg image
26
33
  */
27
- onBgClick?: (data: IPropDatas) => void;
34
+ onBgClick?: (data: Data) => void;
28
35
  /**
29
36
  * @description.zh 点击事件
30
37
  * @description.en bg image
31
38
  */
32
- onRightClick?: (data: IPropDatas) => void;
33
- }
34
- export interface IPropDatas {
35
- /**
36
- * @description.zh 唯一标识
37
- * @description.en id
38
- */
39
- id: string;
40
- /**
41
- * @description.zh 名称
42
- * @description.en name
43
- */
44
- name?: string;
45
- /**
46
- * @description.zh 子名称
47
- * @description.en sub name
48
- */
49
- subName?: string;
50
- /**
51
- * @description.zh 右侧图标
52
- * @description.en right icon
53
- */
54
- rightIcon?: string;
55
- /**
56
- * @description.zh 背景图
57
- * @description.en bg image
58
- */
59
- bgImage?: string;
39
+ onRightClick?: (data: Data) => void;
60
40
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ray-js/ray-ipc-half-horizontal-drag",
3
- "version": "0.0.3-beta-2",
3
+ "version": "0.0.4-beta-1",
4
4
  "description": "水平方向可拖动，显示出下一个组件的小部分内容",
5
5
  "main": "lib/index",
6
6
  "files": [