@opensumi/ide-components 3.8.3-next-1741920696.0 → 3.8.3-next-1741927421.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/lib/image/index.d.ts +8 -0
- package/lib/image/index.d.ts.map +1 -0
- package/lib/image/index.js +15 -0
- package/lib/image/index.js.map +1 -0
- package/lib/image/styles.less +205 -0
- package/lib/style/mixins.less +37 -0
- package/lib/style/variable.less +19 -0
- package/package.json +6 -5
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ImageProps as RcImageProps } from 'rc-image';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import './styles.less';
|
|
4
|
+
export interface ImageProps extends RcImageProps {
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const Image: (props: ImageProps) => React.JSX.Element;
|
|
8
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image/index.tsx"],"names":[],"mappings":"AAAA,OAAgB,EAAE,UAAU,IAAI,YAAY,EAAE,MAAM,UAAU,CAAC;AAC/D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AAGvB,MAAM,WAAW,UAAW,SAAQ,YAAY;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,KAAK,UAAW,UAAU,sBAatC,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Image = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const rc_image_1 = tslib_1.__importDefault(require("rc-image"));
|
|
6
|
+
const react_1 = tslib_1.__importDefault(require("react"));
|
|
7
|
+
require("./styles.less");
|
|
8
|
+
const icon_1 = require("../icon");
|
|
9
|
+
const Image = (props) => (react_1.default.createElement(rc_image_1.default, { prefixCls: 'kt-image', preview: {
|
|
10
|
+
getContainer: () => { var _a; return document.getElementById('main') || ((_a = document.getElementsByTagName('body')) === null || _a === void 0 ? void 0 : _a[0]); },
|
|
11
|
+
mask: (react_1.default.createElement("div", { className: 'mask' },
|
|
12
|
+
react_1.default.createElement(icon_1.Icon, { iconClass: 'codicon codicon-eye' }))),
|
|
13
|
+
}, ...props }));
|
|
14
|
+
exports.Image = Image;
|
|
15
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/image/index.tsx"],"names":[],"mappings":";;;;AAAA,gEAA+D;AAC/D,0DAA0B;AAE1B,yBAAuB;AACvB,kCAA+B;AAMxB,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE,CAAC,CAC1C,8BAAC,kBAAO,IACN,SAAS,EAAC,UAAU,EACpB,OAAO,EAAE;QACP,YAAY,EAAE,GAAG,EAAE,WAAC,OAAA,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,KAAI,MAAA,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,0CAAG,CAAC,CAAC,CAAA,CAAA,EAAA;QACjG,IAAI,EAAE,CACJ,uCAAK,SAAS,EAAC,MAAM;YACnB,8BAAC,WAAI,IAAC,SAAS,EAAC,qBAAqB,GAAG,CACpC,CACP;KACF,KACG,KAAK,GACT,CACH,CAAC;AAbW,QAAA,KAAK,SAahB"}
|
|
@@ -0,0 +1,205 @@
|
|
|
1
|
+
@import '../style/variable.less';
|
|
2
|
+
@import '../style/mixins.less';
|
|
3
|
+
|
|
4
|
+
@image-prefix-cls: ~'kt-image';
|
|
5
|
+
@image-preview-prefix-cls: ~'@{image-prefix-cls}-preview';
|
|
6
|
+
|
|
7
|
+
.@{image-prefix-cls} {
|
|
8
|
+
position: relative;
|
|
9
|
+
display: inline-block;
|
|
10
|
+
|
|
11
|
+
&-img {
|
|
12
|
+
width: 100%;
|
|
13
|
+
height: auto;
|
|
14
|
+
vertical-align: middle;
|
|
15
|
+
|
|
16
|
+
&-placeholder {
|
|
17
|
+
background-color: @image-bg;
|
|
18
|
+
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=');
|
|
19
|
+
background-repeat: no-repeat;
|
|
20
|
+
background-position: center center;
|
|
21
|
+
background-size: 30%;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&-mask {
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: 0;
|
|
28
|
+
right: 0;
|
|
29
|
+
bottom: 0;
|
|
30
|
+
left: 0;
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
color: @text-color-inverse;
|
|
35
|
+
background: fade(@black, 50%);
|
|
36
|
+
cursor: pointer;
|
|
37
|
+
opacity: 0;
|
|
38
|
+
transition: opacity @animation-duration-slow;
|
|
39
|
+
|
|
40
|
+
&-info {
|
|
41
|
+
padding: 0 @padding-xss;
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
white-space: nowrap;
|
|
44
|
+
text-overflow: ellipsis;
|
|
45
|
+
.@{iconfont-css-prefix} {
|
|
46
|
+
margin-inline-end: @margin-xss;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&:hover {
|
|
51
|
+
opacity: 1;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&-placeholder {
|
|
56
|
+
.box();
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&-preview {
|
|
60
|
+
.modal-mask();
|
|
61
|
+
|
|
62
|
+
height: 100%;
|
|
63
|
+
text-align: center;
|
|
64
|
+
|
|
65
|
+
&-body {
|
|
66
|
+
.box();
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&-img {
|
|
71
|
+
max-width: 100%;
|
|
72
|
+
max-height: 100%;
|
|
73
|
+
vertical-align: middle;
|
|
74
|
+
transform: scale3d(1, 1, 1);
|
|
75
|
+
cursor: grab;
|
|
76
|
+
transition: transform 0.3s @ease-out 0s;
|
|
77
|
+
user-select: none;
|
|
78
|
+
pointer-events: auto;
|
|
79
|
+
|
|
80
|
+
&-wrapper {
|
|
81
|
+
.box();
|
|
82
|
+
transition: transform 0.3s @ease-out 0s;
|
|
83
|
+
|
|
84
|
+
&::before {
|
|
85
|
+
display: inline-block;
|
|
86
|
+
width: 1px;
|
|
87
|
+
height: 50%;
|
|
88
|
+
margin-right: -1px;
|
|
89
|
+
content: '';
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&-moving {
|
|
95
|
+
.@{image-prefix-cls}-preview-img {
|
|
96
|
+
cursor: grabbing;
|
|
97
|
+
|
|
98
|
+
&-wrapper {
|
|
99
|
+
transition-duration: 0s;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
&-wrap {
|
|
105
|
+
z-index: @zindex-image;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// 暂时不需要控制
|
|
109
|
+
&-operations-wrapper {
|
|
110
|
+
display: none;
|
|
111
|
+
// position: fixed;
|
|
112
|
+
// top: 0;
|
|
113
|
+
// right: 0;
|
|
114
|
+
// z-index: @zindex-image + 1;
|
|
115
|
+
// width: 100%;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&-operations {
|
|
119
|
+
.reset-component();
|
|
120
|
+
display: flex;
|
|
121
|
+
flex-direction: row-reverse;
|
|
122
|
+
align-items: center;
|
|
123
|
+
color: @image-preview-operation-color;
|
|
124
|
+
list-style: none;
|
|
125
|
+
background: fade(@modal-mask-bg, 10%);
|
|
126
|
+
pointer-events: auto;
|
|
127
|
+
|
|
128
|
+
&-operation {
|
|
129
|
+
margin-left: @control-padding-horizontal;
|
|
130
|
+
padding: @control-padding-horizontal;
|
|
131
|
+
cursor: pointer;
|
|
132
|
+
transition: all 0.3s;
|
|
133
|
+
|
|
134
|
+
&:hover {
|
|
135
|
+
background: fade(@modal-mask-bg, 20%);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
&-disabled {
|
|
139
|
+
color: @image-preview-operation-disabled-color;
|
|
140
|
+
pointer-events: none;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
&:last-of-type {
|
|
144
|
+
margin-left: 0;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
&-progress {
|
|
149
|
+
position: absolute;
|
|
150
|
+
left: 50%;
|
|
151
|
+
transform: translateX(-50%);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
&-icon {
|
|
155
|
+
font-size: @image-preview-operation-size;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
&-switch-left,
|
|
160
|
+
&-switch-right {
|
|
161
|
+
position: fixed;
|
|
162
|
+
top: 50%;
|
|
163
|
+
right: 8px;
|
|
164
|
+
z-index: @zindex-image + 1;
|
|
165
|
+
display: flex;
|
|
166
|
+
align-items: center;
|
|
167
|
+
justify-content: center;
|
|
168
|
+
width: 44px;
|
|
169
|
+
height: 44px;
|
|
170
|
+
color: @image-preview-operation-color;
|
|
171
|
+
background: fade(@modal-mask-bg, 10%);
|
|
172
|
+
border-radius: 50%;
|
|
173
|
+
transform: translateY(-50%);
|
|
174
|
+
cursor: pointer;
|
|
175
|
+
transition: all 0.3s;
|
|
176
|
+
pointer-events: auto;
|
|
177
|
+
|
|
178
|
+
&:hover {
|
|
179
|
+
background: fade(@modal-mask-bg, 20%);
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
&-disabled,
|
|
183
|
+
&-disabled:hover {
|
|
184
|
+
color: @image-preview-operation-disabled-color;
|
|
185
|
+
background: fade(@modal-mask-bg, 10%);
|
|
186
|
+
cursor: not-allowed;
|
|
187
|
+
> .@{iconfont-css-prefix} {
|
|
188
|
+
cursor: not-allowed;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
> .@{iconfont-css-prefix} {
|
|
193
|
+
font-size: 18px;
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
&-switch-left {
|
|
198
|
+
left: 8px;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
&-switch-right {
|
|
202
|
+
right: 8px;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
}
|
package/lib/style/mixins.less
CHANGED
|
@@ -133,3 +133,40 @@
|
|
|
133
133
|
clear: both;
|
|
134
134
|
}
|
|
135
135
|
}
|
|
136
|
+
|
|
137
|
+
.box(@position: absolute) {
|
|
138
|
+
position: @position;
|
|
139
|
+
top: 0;
|
|
140
|
+
right: 0;
|
|
141
|
+
bottom: 0;
|
|
142
|
+
left: 0;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.modal-mask() {
|
|
146
|
+
pointer-events: none;
|
|
147
|
+
|
|
148
|
+
&.@{prefix}-zoom-enter,
|
|
149
|
+
&.@{prefix}-zoom-appear {
|
|
150
|
+
transform: none; // reset scale avoid mousePosition bug
|
|
151
|
+
opacity: 0;
|
|
152
|
+
animation-duration: @animation-duration-slow;
|
|
153
|
+
user-select: none; // https://github.com/ant-design/ant-design/issues/11777
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
&-mask {
|
|
157
|
+
.box(fixed);
|
|
158
|
+
z-index: @zindex-modal-mask;
|
|
159
|
+
height: 100%;
|
|
160
|
+
background-color: @modal-mask-bg;
|
|
161
|
+
|
|
162
|
+
&-hidden {
|
|
163
|
+
display: none;
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
&-wrap {
|
|
168
|
+
.box(fixed);
|
|
169
|
+
overflow: auto;
|
|
170
|
+
outline: 0;
|
|
171
|
+
}
|
|
172
|
+
}
|
package/lib/style/variable.less
CHANGED
|
@@ -59,6 +59,7 @@
|
|
|
59
59
|
@zindex-dropdown: 1050;
|
|
60
60
|
@zindex-picker: 1050;
|
|
61
61
|
@zindex-tooltip: 1060;
|
|
62
|
+
@zindex-image: 1080;
|
|
62
63
|
|
|
63
64
|
// Shadow
|
|
64
65
|
@shadow-color: rgba(0, 0, 0, 0.15);
|
|
@@ -112,6 +113,14 @@
|
|
|
112
113
|
@padding-md: 16px; // small containers and buttons
|
|
113
114
|
@padding-sm: 12px; // Form controls and items
|
|
114
115
|
@padding-xs: 8px; // small items
|
|
116
|
+
@padding-xss: 4px; // more small
|
|
117
|
+
|
|
118
|
+
// vertical margins
|
|
119
|
+
@margin-lg: 24px; // containers
|
|
120
|
+
@margin-md: 16px; // small containers and buttons
|
|
121
|
+
@margin-sm: 12px; // Form controls and items
|
|
122
|
+
@margin-xs: 8px; // small items
|
|
123
|
+
@margin-xss: 4px; // more small
|
|
115
124
|
|
|
116
125
|
// vertical padding for all form controls
|
|
117
126
|
@control-padding-horizontal: @padding-sm;
|
|
@@ -205,3 +214,13 @@
|
|
|
205
214
|
// Checkbox
|
|
206
215
|
@checkbox-default-size: 12px;
|
|
207
216
|
@checkbox-large-size: 14px;
|
|
217
|
+
|
|
218
|
+
// Image
|
|
219
|
+
@image-size-base: 48px;
|
|
220
|
+
@image-font-size-base: 24px;
|
|
221
|
+
@image-bg: #f5f5f5;
|
|
222
|
+
@image-color: #fff;
|
|
223
|
+
@image-mask-font-size: 16px;
|
|
224
|
+
@image-preview-operation-size: 18px;
|
|
225
|
+
@image-preview-operation-color: @text-color-dark;
|
|
226
|
+
@image-preview-operation-disabled-color: fade(@image-preview-operation-color, 25%);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opensumi/ide-components",
|
|
3
|
-
"version": "3.8.3-next-
|
|
3
|
+
"version": "3.8.3-next-1741927421.0",
|
|
4
4
|
"description": "@opensumi/ide-components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@ant-design/icons": "^4.6.4",
|
|
19
|
-
"@opensumi/ide-core-common": "3.8.3-next-
|
|
20
|
-
"@opensumi/ide-utils": "3.8.3-next-
|
|
19
|
+
"@opensumi/ide-core-common": "3.8.3-next-1741927421.0",
|
|
20
|
+
"@opensumi/ide-utils": "3.8.3-next-1741927421.0",
|
|
21
21
|
"@opensumi/react-custom-scrollbars-2": "^4.3.4",
|
|
22
22
|
"@rc-component/mini-decimal": "^1.0.1",
|
|
23
23
|
"fuzzy": "^0.1.3",
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
"raf": "^3.4.1",
|
|
27
27
|
"rc-dialog": "^9.6.0",
|
|
28
28
|
"rc-dropdown": "~2.4.1",
|
|
29
|
+
"rc-image": "^7.11.0",
|
|
29
30
|
"rc-input-number": "^9.3.0",
|
|
30
31
|
"rc-menu": "^9.16.0",
|
|
31
32
|
"rc-notification": "~3.3.1",
|
|
@@ -38,10 +39,10 @@
|
|
|
38
39
|
"react-window": "^1.8.5"
|
|
39
40
|
},
|
|
40
41
|
"devDependencies": {
|
|
41
|
-
"@opensumi/ide-dev-tool": "3.8.3-next-
|
|
42
|
+
"@opensumi/ide-dev-tool": "3.8.3-next-1741927421.0",
|
|
42
43
|
"@types/marked": "^4.0.7",
|
|
43
44
|
"@types/react-window": "^1.8.5",
|
|
44
45
|
"prop-types": "^15.8.1"
|
|
45
46
|
},
|
|
46
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "bd77b89976b089e461aa1f1078287c3f19b2709f"
|
|
47
48
|
}
|