@react-cupertino-ui/mail-list 1.0.1 → 2.0.0
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.
- package/README.md +26 -0
- package/package.json +9 -9
- package/dist/index.css +0 -111
- package/dist/index.scss +0 -120
package/README.md
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
# @react-cupertino-ui/mail-list
|
|
2
|
+
|
|
3
|
+
MailList component from React Cupertino UI
|
|
4
|
+
|
|
5
|
+
part of [React Cupertino UI](https://github.com/Andersonlimahw/react-cupertino-ui)
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
npm install @react-cupertino-ui/mail-list
|
|
10
|
+
# or
|
|
11
|
+
pnpm add @react-cupertino-ui/mail-list
|
|
12
|
+
# or
|
|
13
|
+
yarn add @react-cupertino-ui/mail-list
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
import { MailList } from '@react-cupertino-ui/mail-list';
|
|
18
|
+
|
|
19
|
+
function App() {
|
|
20
|
+
return <MailList />;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
## Links
|
|
24
|
+
- [Website](http://react-cupertino-ui.pro/)
|
|
25
|
+
- [Storybook](http://react-cupertino-ui.pro/storybook/)
|
|
26
|
+
- [GitHub](https://github.com/Andersonlimahw/react-cupertino-ui)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-cupertino-ui/mail-list",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "MailList component from React Cupertino UI",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -13,19 +13,15 @@
|
|
|
13
13
|
"./dist/**/*.css",
|
|
14
14
|
"./dist/**/*.scss"
|
|
15
15
|
],
|
|
16
|
-
"scripts": {
|
|
17
|
-
"build": "tsc -p tsconfig.build.json && npm run build:styles",
|
|
18
|
-
"build:styles": "node ../../../scripts/build-styles.mjs"
|
|
19
|
-
},
|
|
20
16
|
"peerDependencies": {
|
|
21
17
|
"lucide-react": "^0.417.0",
|
|
22
18
|
"react": "^18.3.1",
|
|
23
19
|
"react-dom": "^18.3.1"
|
|
24
20
|
},
|
|
25
21
|
"dependencies": {
|
|
26
|
-
"@react-cupertino-ui/list": "
|
|
27
|
-
"@react-cupertino-ui/
|
|
28
|
-
"@react-cupertino-ui/
|
|
22
|
+
"@react-cupertino-ui/list": "1.0.2",
|
|
23
|
+
"@react-cupertino-ui/swipe-actions": "2.0.0",
|
|
24
|
+
"@react-cupertino-ui/shared": "2.0.0"
|
|
29
25
|
},
|
|
30
26
|
"devDependencies": {
|
|
31
27
|
"typescript": "^5.2.2"
|
|
@@ -33,5 +29,9 @@
|
|
|
33
29
|
"gitHead": "3f53987bdb936a331665691b517c2ba9984777f8",
|
|
34
30
|
"publishConfig": {
|
|
35
31
|
"access": "public"
|
|
32
|
+
},
|
|
33
|
+
"scripts": {
|
|
34
|
+
"build": "tsc -p tsconfig.build.json && npm run build:styles",
|
|
35
|
+
"build:styles": "node ../../../scripts/build-styles.mjs"
|
|
36
36
|
}
|
|
37
|
-
}
|
|
37
|
+
}
|
package/dist/index.css
DELETED
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
.react-cupertino-ui-mail-list {
|
|
2
|
-
width: 100%;
|
|
3
|
-
}
|
|
4
|
-
.react-cupertino-ui-mail-list .react-cupertino-ui-list {
|
|
5
|
-
background: transparent;
|
|
6
|
-
}
|
|
7
|
-
.react-cupertino-ui-mail-list .mail-item-wrapper {
|
|
8
|
-
position: relative;
|
|
9
|
-
/* Ensure border separator logic works with SwipeActions wrapper */
|
|
10
|
-
}
|
|
11
|
-
.react-cupertino-ui-mail-list .mail-item-wrapper:not(:last-child)::after {
|
|
12
|
-
content: "";
|
|
13
|
-
position: absolute;
|
|
14
|
-
bottom: 0;
|
|
15
|
-
left: 20px;
|
|
16
|
-
/* Inset separator */
|
|
17
|
-
right: 0;
|
|
18
|
-
height: 1px;
|
|
19
|
-
background-color: #c6c6c8;
|
|
20
|
-
z-index: 5;
|
|
21
|
-
/* Above swipe content */
|
|
22
|
-
}
|
|
23
|
-
@media (prefers-color-scheme: dark) {
|
|
24
|
-
.react-cupertino-ui-mail-list .mail-item-wrapper:not(:last-child)::after {
|
|
25
|
-
background-color: #38383a;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
.react-cupertino-ui-mail-list {
|
|
29
|
-
/* Override generic List Item padding/layout for custom mail content */
|
|
30
|
-
}
|
|
31
|
-
.react-cupertino-ui-mail-list .react-cupertino-ui-list-item.mail-item {
|
|
32
|
-
padding: 0;
|
|
33
|
-
/* Remove default list item structure constraints if needed */
|
|
34
|
-
}
|
|
35
|
-
.react-cupertino-ui-mail-list .react-cupertino-ui-list-item.mail-item .react-cupertino-ui-list-item-content {
|
|
36
|
-
width: 100%;
|
|
37
|
-
}
|
|
38
|
-
.react-cupertino-ui-mail-list .mail-content {
|
|
39
|
-
padding: 10px 20px 10px 36px;
|
|
40
|
-
/* Left padding space for unread dot */
|
|
41
|
-
width: 100%;
|
|
42
|
-
position: relative;
|
|
43
|
-
display: flex;
|
|
44
|
-
flex-direction: column;
|
|
45
|
-
gap: 2px;
|
|
46
|
-
}
|
|
47
|
-
.react-cupertino-ui-mail-list .header {
|
|
48
|
-
display: flex;
|
|
49
|
-
justify-content: space-between;
|
|
50
|
-
align-items: baseline;
|
|
51
|
-
margin-bottom: 1px;
|
|
52
|
-
}
|
|
53
|
-
.react-cupertino-ui-mail-list .sender {
|
|
54
|
-
font-size: 16px;
|
|
55
|
-
font-weight: 600;
|
|
56
|
-
color: #000;
|
|
57
|
-
}
|
|
58
|
-
@media (prefers-color-scheme: dark) {
|
|
59
|
-
.react-cupertino-ui-mail-list .sender {
|
|
60
|
-
color: #fff;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
.react-cupertino-ui-mail-list .sender.unread::before {
|
|
64
|
-
content: "";
|
|
65
|
-
position: absolute;
|
|
66
|
-
left: 14px;
|
|
67
|
-
top: 18px;
|
|
68
|
-
width: 10px;
|
|
69
|
-
height: 10px;
|
|
70
|
-
border-radius: 50%;
|
|
71
|
-
background-color: #007aff;
|
|
72
|
-
}
|
|
73
|
-
.react-cupertino-ui-mail-list .date {
|
|
74
|
-
font-size: 14px;
|
|
75
|
-
color: #8e8e93;
|
|
76
|
-
flex-shrink: 0;
|
|
77
|
-
}
|
|
78
|
-
.react-cupertino-ui-mail-list .subject {
|
|
79
|
-
font-size: 14px;
|
|
80
|
-
font-weight: 500;
|
|
81
|
-
/* Medium weight */
|
|
82
|
-
color: #000;
|
|
83
|
-
}
|
|
84
|
-
@media (prefers-color-scheme: dark) {
|
|
85
|
-
.react-cupertino-ui-mail-list .subject {
|
|
86
|
-
color: #fff;
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
.react-cupertino-ui-mail-list .preview {
|
|
90
|
-
font-size: 14px;
|
|
91
|
-
color: #8e8e93;
|
|
92
|
-
display: -webkit-box;
|
|
93
|
-
-webkit-line-clamp: 2;
|
|
94
|
-
line-clamp: 2;
|
|
95
|
-
-webkit-box-orient: vertical;
|
|
96
|
-
overflow: hidden;
|
|
97
|
-
line-height: 1.35;
|
|
98
|
-
}
|
|
99
|
-
.react-cupertino-ui-mail-list .flag-indicator {
|
|
100
|
-
position: absolute;
|
|
101
|
-
top: 12px;
|
|
102
|
-
right: 12px;
|
|
103
|
-
color: #ff9500;
|
|
104
|
-
/* Orange */
|
|
105
|
-
}
|
|
106
|
-
.react-cupertino-ui-mail-list {
|
|
107
|
-
/* Custom action color for Flag */
|
|
108
|
-
}
|
|
109
|
-
.react-cupertino-ui-mail-list .action-button.color-orange {
|
|
110
|
-
background-color: #ff9500;
|
|
111
|
-
}
|
package/dist/index.scss
DELETED
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
.react-cupertino-ui-mail-list {
|
|
2
|
-
width: 100%;
|
|
3
|
-
|
|
4
|
-
.react-cupertino-ui-list {
|
|
5
|
-
background: transparent;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.mail-item-wrapper {
|
|
9
|
-
position: relative;
|
|
10
|
-
|
|
11
|
-
/* Ensure border separator logic works with SwipeActions wrapper */
|
|
12
|
-
&:not(:last-child)::after {
|
|
13
|
-
content: "";
|
|
14
|
-
position: absolute;
|
|
15
|
-
bottom: 0;
|
|
16
|
-
left: 20px;
|
|
17
|
-
/* Inset separator */
|
|
18
|
-
right: 0;
|
|
19
|
-
height: 1px;
|
|
20
|
-
background-color: #c6c6c8;
|
|
21
|
-
z-index: 5;
|
|
22
|
-
/* Above swipe content */
|
|
23
|
-
|
|
24
|
-
@media (prefers-color-scheme: dark) {
|
|
25
|
-
background-color: #38383a;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
/* Override generic List Item padding/layout for custom mail content */
|
|
31
|
-
.react-cupertino-ui-list-item {
|
|
32
|
-
&.mail-item {
|
|
33
|
-
padding: 0;
|
|
34
|
-
|
|
35
|
-
/* Remove default list item structure constraints if needed */
|
|
36
|
-
.react-cupertino-ui-list-item-content {
|
|
37
|
-
width: 100%;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.mail-content {
|
|
43
|
-
padding: 10px 20px 10px 36px;
|
|
44
|
-
/* Left padding space for unread dot */
|
|
45
|
-
width: 100%;
|
|
46
|
-
position: relative;
|
|
47
|
-
display: flex;
|
|
48
|
-
flex-direction: column;
|
|
49
|
-
gap: 2px;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.header {
|
|
53
|
-
display: flex;
|
|
54
|
-
justify-content: space-between;
|
|
55
|
-
align-items: baseline;
|
|
56
|
-
margin-bottom: 1px;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.sender {
|
|
60
|
-
font-size: 16px;
|
|
61
|
-
font-weight: 600;
|
|
62
|
-
color: #000;
|
|
63
|
-
|
|
64
|
-
@media (prefers-color-scheme: dark) {
|
|
65
|
-
color: #fff;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
&.unread::before {
|
|
69
|
-
content: "";
|
|
70
|
-
position: absolute;
|
|
71
|
-
left: 14px;
|
|
72
|
-
top: 18px;
|
|
73
|
-
width: 10px;
|
|
74
|
-
height: 10px;
|
|
75
|
-
border-radius: 50%;
|
|
76
|
-
background-color: #007aff;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
.date {
|
|
81
|
-
font-size: 14px;
|
|
82
|
-
color: #8e8e93;
|
|
83
|
-
flex-shrink: 0;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.subject {
|
|
87
|
-
font-size: 14px;
|
|
88
|
-
font-weight: 500;
|
|
89
|
-
/* Medium weight */
|
|
90
|
-
color: #000;
|
|
91
|
-
|
|
92
|
-
@media (prefers-color-scheme: dark) {
|
|
93
|
-
color: #fff;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.preview {
|
|
98
|
-
font-size: 14px;
|
|
99
|
-
color: #8e8e93;
|
|
100
|
-
display: -webkit-box;
|
|
101
|
-
-webkit-line-clamp: 2;
|
|
102
|
-
line-clamp: 2;
|
|
103
|
-
-webkit-box-orient: vertical;
|
|
104
|
-
overflow: hidden;
|
|
105
|
-
line-height: 1.35;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.flag-indicator {
|
|
109
|
-
position: absolute;
|
|
110
|
-
top: 12px;
|
|
111
|
-
right: 12px;
|
|
112
|
-
color: #ff9500;
|
|
113
|
-
/* Orange */
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
/* Custom action color for Flag */
|
|
117
|
-
.action-button.color-orange {
|
|
118
|
-
background-color: #ff9500;
|
|
119
|
-
}
|
|
120
|
-
}
|