mimir-ui-kit 1.60.4 → 1.61.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.
package/dist/assets/CopyText.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._wrapper_1t6ix_2{position:relative;display:inline-block}._container_1t6ix_7{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;gap:var(--mimir-space-xs);-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}._container_1t6ix_7._disabled_1t6ix_14{cursor:not-allowed;opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}._container_1t6ix_7._hovered_1t6ix_19:not(._disabled_1t6ix_14){cursor:pointer}._text_1t6ix_23{-webkit-transition:color .2s ease;transition:color .2s ease}._text_1t6ix_23._pressed_1t6ix_26{color:var(--citrine-100)}._icon_1t6ix_30{-ms-flex-negative:0;flex-shrink:0;-webkit-transform:translateX(-4px);transform:translate(-4px);opacity:0;-webkit-transition:opacity .2s ease,-webkit-transform .2s ease;transition:opacity .2s ease,-webkit-transform .2s ease;transition:opacity .2s ease,transform .2s ease;transition:opacity .2s ease,transform .2s ease,-webkit-transform .2s ease}._icon_1t6ix_30 path,._icon_1t6ix_30 svg{-webkit-transition:fill .2s ease;transition:fill .2s ease}._icon_1t6ix_30._visible_1t6ix_40{-webkit-transform:translateX(0);transform:translate(0);opacity:1}._icon_1t6ix_30._pressed_1t6ix_26 path,._icon_1t6ix_30._pressed_1t6ix_26 svg{fill:var(--citrine-100)}._toast_1t6ix_49{position:absolute;top:100%;left:calc(-1 * var(--mimir-space-xxl));z-index:1000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:286px;height:52px;padding:var(--mimir-space-m);font-size:var(--mimir-size-text-l);line-height:var(--mimir-line-height-text-s1);background:var(--white);border-radius:var(--mimir-control-radius);-webkit-box-shadow:0 0 0 0 rgba(22,23,39,.02),0 2px 4px 0 rgba(22,23,39,.02);box-shadow:0 0 #16172705,0 2px 4px #16172705;-webkit-animation:_slide-in_1t6ix_1 .2s ease-out;animation:_slide-in_1t6ix_1 .2s ease-out}._toast_1t6ix_49._fadeOut_1t6ix_66{-webkit-animation:_slide-out_1t6ix_1 .2s ease-out forwards;animation:_slide-out_1t6ix_1 .2s ease-out forwards}@-webkit-keyframes _slide-in_1t6ix_1{0%{-webkit-transform:translateY(-8px);transform:translateY(-8px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes _slide-in_1t6ix_1{0%{-webkit-transform:translateY(-8px);transform:translateY(-8px);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes _slide-out_1t6ix_1{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-8px);transform:translateY(-8px);opacity:0}}@keyframes _slide-out_1t6ix_1{0%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(-8px);transform:translateY(-8px);opacity:0}}
|
|
@@ -1,96 +1,98 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as N, jsx as _ } from "react/jsx-runtime";
|
|
2
2
|
import { c as r } from "../../index-DIxK0V-G.js";
|
|
3
|
-
import { forwardRef as
|
|
4
|
-
import { Icon as
|
|
5
|
-
import '../../assets/CopyText.css';const
|
|
6
|
-
wrapper:
|
|
7
|
-
container:
|
|
8
|
-
disabled:
|
|
9
|
-
hovered:
|
|
10
|
-
text:
|
|
11
|
-
pressed:
|
|
12
|
-
icon:
|
|
13
|
-
visible:
|
|
14
|
-
toast:
|
|
15
|
-
"slide-in": "_slide-
|
|
16
|
-
fadeOut:
|
|
17
|
-
"slide-out": "_slide-
|
|
18
|
-
},
|
|
19
|
-
(
|
|
3
|
+
import { forwardRef as E, useState as c, useCallback as i } from "react";
|
|
4
|
+
import { Icon as H } from "../../icons/Icon.js";
|
|
5
|
+
import '../../assets/CopyText.css';const L = "_wrapper_1t6ix_2", R = "_container_1t6ix_7", k = "_disabled_1t6ix_14", B = "_hovered_1t6ix_19", q = "_text_1t6ix_23", z = "_pressed_1t6ix_26", G = "_icon_1t6ix_30", J = "_visible_1t6ix_40", K = "_toast_1t6ix_49", Q = "_fadeOut_1t6ix_66", e = {
|
|
6
|
+
wrapper: L,
|
|
7
|
+
container: R,
|
|
8
|
+
disabled: k,
|
|
9
|
+
hovered: B,
|
|
10
|
+
text: q,
|
|
11
|
+
pressed: z,
|
|
12
|
+
icon: G,
|
|
13
|
+
visible: J,
|
|
14
|
+
toast: K,
|
|
15
|
+
"slide-in": "_slide-in_1t6ix_1",
|
|
16
|
+
fadeOut: Q,
|
|
17
|
+
"slide-out": "_slide-out_1t6ix_1"
|
|
18
|
+
}, T = 200, V = E(
|
|
19
|
+
(b, w) => {
|
|
20
20
|
const {
|
|
21
|
-
text:
|
|
22
|
-
className:
|
|
21
|
+
text: s,
|
|
22
|
+
className: M,
|
|
23
23
|
onCopy: n,
|
|
24
|
-
showToast:
|
|
25
|
-
toastDuration:
|
|
26
|
-
toastText:
|
|
27
|
-
disabled:
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
24
|
+
showToast: p = !0,
|
|
25
|
+
toastDuration: u = 2e3,
|
|
26
|
+
toastText: y = "Скопировано в буфер обмена",
|
|
27
|
+
disabled: t = !1,
|
|
28
|
+
showCopyButton: o = !1,
|
|
29
|
+
defaultText: C,
|
|
30
|
+
...O
|
|
31
|
+
} = b, [f, x] = c(o), [a, m] = c(!1), [I, h] = c(!1), [D, d] = c(!1), v = i(async () => {
|
|
32
|
+
if (!t)
|
|
31
33
|
try {
|
|
32
|
-
if (await navigator.clipboard.writeText(
|
|
33
|
-
h(!0),
|
|
34
|
-
const
|
|
35
|
-
|
|
34
|
+
if (await navigator.clipboard.writeText(s), p) {
|
|
35
|
+
h(!0), d(!1);
|
|
36
|
+
const l = Math.max(
|
|
37
|
+
u - T,
|
|
36
38
|
0
|
|
37
39
|
);
|
|
38
40
|
setTimeout(() => {
|
|
39
|
-
|
|
40
|
-
h(!1),
|
|
41
|
-
},
|
|
42
|
-
},
|
|
41
|
+
d(!0), setTimeout(() => {
|
|
42
|
+
h(!1), d(!1);
|
|
43
|
+
}, T);
|
|
44
|
+
}, l);
|
|
43
45
|
}
|
|
44
|
-
n == null || n(
|
|
45
|
-
} catch (
|
|
46
|
-
console.error("Failed to copy text:",
|
|
46
|
+
n == null || n(s);
|
|
47
|
+
} catch (l) {
|
|
48
|
+
console.error("Failed to copy text:", l);
|
|
47
49
|
}
|
|
48
|
-
}, [
|
|
49
|
-
|
|
50
|
-
}, [
|
|
51
|
-
|
|
52
|
-
}, []),
|
|
53
|
-
s
|
|
54
|
-
}, [s]),
|
|
55
|
-
|
|
56
|
-
}, [
|
|
57
|
-
[e.disabled]:
|
|
58
|
-
[e.hovered]:
|
|
59
|
-
[e.pressed]:
|
|
60
|
-
}),
|
|
61
|
-
[e.pressed]:
|
|
62
|
-
}),
|
|
63
|
-
[e.pressed]:
|
|
64
|
-
[e.visible]:
|
|
50
|
+
}, [s, n, p, u, t]), S = i(() => {
|
|
51
|
+
o || t || x(!0);
|
|
52
|
+
}, [t, o]), g = i(() => {
|
|
53
|
+
o || x(!1);
|
|
54
|
+
}, [o]), A = i(() => {
|
|
55
|
+
!t && s && m(!0);
|
|
56
|
+
}, [t, s]), F = i(() => {
|
|
57
|
+
s && !t && a && (m(!1), v());
|
|
58
|
+
}, [t, a, s, v]), P = r(e.container, M, {
|
|
59
|
+
[e.disabled]: t,
|
|
60
|
+
[e.hovered]: f,
|
|
61
|
+
[e.pressed]: a
|
|
62
|
+
}), U = r(e.text, {
|
|
63
|
+
[e.pressed]: a
|
|
64
|
+
}), j = r(e.icon, {
|
|
65
|
+
[e.pressed]: a,
|
|
66
|
+
[e.visible]: f
|
|
65
67
|
});
|
|
66
|
-
return /* @__PURE__ */
|
|
67
|
-
/* @__PURE__ */
|
|
68
|
+
return /* @__PURE__ */ N("div", { ref: w, className: e.wrapper, ...O, children: [
|
|
69
|
+
/* @__PURE__ */ N(
|
|
68
70
|
"div",
|
|
69
71
|
{
|
|
70
|
-
className:
|
|
71
|
-
onMouseEnter:
|
|
72
|
-
onMouseLeave:
|
|
73
|
-
onMouseDown:
|
|
74
|
-
onMouseUp:
|
|
72
|
+
className: P,
|
|
73
|
+
onMouseEnter: S,
|
|
74
|
+
onMouseLeave: g,
|
|
75
|
+
onMouseDown: A,
|
|
76
|
+
onMouseUp: F,
|
|
75
77
|
children: [
|
|
76
|
-
/* @__PURE__ */
|
|
77
|
-
/* @__PURE__ */
|
|
78
|
+
/* @__PURE__ */ _("span", { className: U, children: s || C }),
|
|
79
|
+
s && /* @__PURE__ */ _(H, { iconName: "CopyClipboard16px", className: j })
|
|
78
80
|
]
|
|
79
81
|
}
|
|
80
82
|
),
|
|
81
|
-
|
|
83
|
+
I && /* @__PURE__ */ _(
|
|
82
84
|
"div",
|
|
83
85
|
{
|
|
84
86
|
className: r(e.toast, {
|
|
85
|
-
[e.fadeOut]:
|
|
87
|
+
[e.fadeOut]: D
|
|
86
88
|
}),
|
|
87
|
-
children:
|
|
89
|
+
children: y
|
|
88
90
|
}
|
|
89
91
|
)
|
|
90
92
|
] });
|
|
91
93
|
}
|
|
92
94
|
);
|
|
93
|
-
|
|
95
|
+
V.displayName = "CopyText";
|
|
94
96
|
export {
|
|
95
|
-
|
|
97
|
+
V as CopyText
|
|
96
98
|
};
|
|
@@ -5,6 +5,14 @@ export type TProps = ComponentProps<'div'> & {
|
|
|
5
5
|
* Текст для копирования
|
|
6
6
|
*/
|
|
7
7
|
text: string;
|
|
8
|
+
/**
|
|
9
|
+
* Текст, если props text пустой или undefined
|
|
10
|
+
*/
|
|
11
|
+
defaultText?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Флаг, отвечающий за показ кнопки "Скопировать"
|
|
14
|
+
*/
|
|
15
|
+
showCopyButton?: boolean;
|
|
8
16
|
/**
|
|
9
17
|
* Класс, применяемый к корневому элементу
|
|
10
18
|
*/
|