@salutejs/plasma-new-hope 0.236.0-dev.0 → 0.237.0-canary.1681.12515137471.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/cjs/components/Note/Note.css +11 -0
- package/cjs/components/Note/Note.js +124 -0
- package/cjs/components/Note/Note.js.map +1 -0
- package/cjs/components/Note/Note.styles.js +47 -0
- package/cjs/components/Note/Note.styles.js.map +1 -0
- package/cjs/components/Note/Note.styles_178qpj9.css +7 -0
- package/cjs/components/Note/Note.tokens.js +44 -0
- package/cjs/components/Note/Note.tokens.js.map +1 -0
- package/cjs/components/Note/variations/_size/base.js +9 -0
- package/cjs/components/Note/variations/_size/base.js.map +1 -0
- package/cjs/components/Note/variations/_size/base_14g19gh.css +1 -0
- package/cjs/components/Note/variations/_view/base.js +9 -0
- package/cjs/components/Note/variations/_view/base.js.map +1 -0
- package/cjs/components/Note/variations/_view/base_pq323y.css +1 -0
- package/cjs/index.css +12 -0
- package/cjs/index.js +6 -0
- package/cjs/index.js.map +1 -1
- package/emotion/cjs/components/Note/Note.js +135 -0
- package/emotion/cjs/components/Note/Note.styles.js +83 -0
- package/emotion/cjs/components/Note/Note.template-doc.mdx +159 -0
- package/emotion/cjs/components/Note/Note.tokens.js +41 -0
- package/emotion/cjs/components/Note/Note.types.js +5 -0
- package/emotion/cjs/components/Note/index.js +31 -0
- package/emotion/cjs/components/Note/variations/_size/base.js +11 -0
- package/emotion/cjs/components/Note/variations/_size/tokens.json +23 -0
- package/emotion/cjs/components/Note/variations/_view/base.js +10 -0
- package/emotion/cjs/components/Note/variations/_view/tokens.json +1 -0
- package/emotion/cjs/components/_Icon/Icon.assets/Icon.svg.16/SaluteOutline.js +24 -0
- package/emotion/cjs/components/_Icon/Icons/Icon.16/IconSaluteOutline.js +27 -0
- package/emotion/cjs/components/_Icon/index.js +8 -1
- package/emotion/cjs/examples/plasma_b2c/components/Dropzone/Dropzone.stories.tsx +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Note/Note.config.js +29 -0
- package/emotion/cjs/examples/plasma_b2c/components/Note/Note.js +11 -0
- package/emotion/cjs/examples/plasma_b2c/components/Note/Note.stories.tsx +86 -0
- package/emotion/cjs/examples/plasma_web/components/Note/Note.config.js +29 -0
- package/emotion/cjs/examples/plasma_web/components/Note/Note.js +11 -0
- package/emotion/cjs/examples/plasma_web/components/Note/Note.stories.tsx +86 -0
- package/emotion/cjs/index.js +11 -0
- package/emotion/es/components/Note/Note.js +127 -0
- package/emotion/es/components/Note/Note.styles.js +76 -0
- package/emotion/es/components/Note/Note.template-doc.mdx +159 -0
- package/emotion/es/components/Note/Note.tokens.js +35 -0
- package/emotion/es/components/Note/Note.types.js +1 -0
- package/emotion/es/components/Note/index.js +2 -0
- package/emotion/es/components/Note/variations/_size/base.js +5 -0
- package/emotion/es/components/Note/variations/_size/tokens.json +23 -0
- package/emotion/es/components/Note/variations/_view/base.js +4 -0
- package/emotion/es/components/Note/variations/_view/tokens.json +1 -0
- package/emotion/es/components/_Icon/Icon.assets/Icon.svg.16/SaluteOutline.js +17 -0
- package/emotion/es/components/_Icon/Icons/Icon.16/IconSaluteOutline.js +20 -0
- package/emotion/es/components/_Icon/index.js +2 -1
- package/emotion/es/examples/plasma_b2c/components/Dropzone/Dropzone.stories.tsx +1 -1
- package/emotion/es/examples/plasma_b2c/components/Note/Note.config.js +23 -0
- package/emotion/es/examples/plasma_b2c/components/Note/Note.js +5 -0
- package/emotion/es/examples/plasma_b2c/components/Note/Note.stories.tsx +86 -0
- package/emotion/es/examples/plasma_web/components/Note/Note.config.js +23 -0
- package/emotion/es/examples/plasma_web/components/Note/Note.js +5 -0
- package/emotion/es/examples/plasma_web/components/Note/Note.stories.tsx +86 -0
- package/emotion/es/index.js +2 -1
- package/es/components/Note/Note.css +11 -0
- package/es/components/Note/Note.js +119 -0
- package/es/components/Note/Note.js.map +1 -0
- package/es/components/Note/Note.styles.js +37 -0
- package/es/components/Note/Note.styles.js.map +1 -0
- package/es/components/Note/Note.styles_178qpj9.css +7 -0
- package/es/components/Note/Note.tokens.js +38 -0
- package/es/components/Note/Note.tokens.js.map +1 -0
- package/es/components/Note/variations/_size/base.js +5 -0
- package/es/components/Note/variations/_size/base.js.map +1 -0
- package/es/components/Note/variations/_size/base_14g19gh.css +1 -0
- package/es/components/Note/variations/_view/base.js +5 -0
- package/es/components/Note/variations/_view/base.js.map +1 -0
- package/es/components/Note/variations/_view/base_pq323y.css +1 -0
- package/es/index.css +12 -0
- package/es/index.js +2 -0
- package/es/index.js.map +1 -1
- package/package.json +4 -4
- package/styled-components/cjs/components/Note/Note.js +135 -0
- package/styled-components/cjs/components/Note/Note.styles.js +29 -0
- package/styled-components/cjs/components/Note/Note.template-doc.mdx +159 -0
- package/styled-components/cjs/components/Note/Note.tokens.js +41 -0
- package/styled-components/cjs/components/Note/Note.types.js +5 -0
- package/styled-components/cjs/components/Note/index.js +31 -0
- package/styled-components/cjs/components/Note/variations/_size/base.js +11 -0
- package/styled-components/cjs/components/Note/variations/_size/tokens.json +23 -0
- package/styled-components/cjs/components/Note/variations/_view/base.js +10 -0
- package/styled-components/cjs/components/Note/variations/_view/tokens.json +1 -0
- package/styled-components/cjs/components/_Icon/Icon.assets/Icon.svg.16/SaluteOutline.js +24 -0
- package/styled-components/cjs/components/_Icon/Icons/Icon.16/IconSaluteOutline.js +27 -0
- package/styled-components/cjs/components/_Icon/index.js +8 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Dropzone/Dropzone.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Note/Note.config.js +29 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Note/Note.js +11 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Note/Note.stories.tsx +86 -0
- package/styled-components/cjs/examples/plasma_web/components/Note/Note.config.js +29 -0
- package/styled-components/cjs/examples/plasma_web/components/Note/Note.js +11 -0
- package/styled-components/cjs/examples/plasma_web/components/Note/Note.stories.tsx +86 -0
- package/styled-components/cjs/index.js +11 -0
- package/styled-components/es/components/Note/Note.js +127 -0
- package/styled-components/es/components/Note/Note.styles.js +21 -0
- package/styled-components/es/components/Note/Note.template-doc.mdx +159 -0
- package/styled-components/es/components/Note/Note.tokens.js +35 -0
- package/styled-components/es/components/Note/Note.types.js +1 -0
- package/styled-components/es/components/Note/index.js +2 -0
- package/styled-components/es/components/Note/variations/_size/base.js +5 -0
- package/styled-components/es/components/Note/variations/_size/tokens.json +23 -0
- package/styled-components/es/components/Note/variations/_view/base.js +4 -0
- package/styled-components/es/components/Note/variations/_view/tokens.json +1 -0
- package/styled-components/es/components/_Icon/Icon.assets/Icon.svg.16/SaluteOutline.js +17 -0
- package/styled-components/es/components/_Icon/Icons/Icon.16/IconSaluteOutline.js +20 -0
- package/styled-components/es/components/_Icon/index.js +2 -1
- package/styled-components/es/examples/plasma_b2c/components/Dropzone/Dropzone.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Note/Note.config.js +23 -0
- package/styled-components/es/examples/plasma_b2c/components/Note/Note.js +5 -0
- package/styled-components/es/examples/plasma_b2c/components/Note/Note.stories.tsx +86 -0
- package/styled-components/es/examples/plasma_web/components/Note/Note.config.js +23 -0
- package/styled-components/es/examples/plasma_web/components/Note/Note.js +5 -0
- package/styled-components/es/examples/plasma_web/components/Note/Note.stories.tsx +86 -0
- package/styled-components/es/index.js +2 -1
- package/types/components/Note/Note.d.ts +43 -0
- package/types/components/Note/Note.d.ts.map +1 -0
- package/types/components/Note/Note.styles.d.ts +9 -0
- package/types/components/Note/Note.styles.d.ts.map +1 -0
- package/types/components/Note/Note.tokens.d.ts +36 -0
- package/types/components/Note/Note.tokens.d.ts.map +1 -0
- package/types/components/Note/Note.types.d.ts +41 -0
- package/types/components/Note/Note.types.d.ts.map +1 -0
- package/types/components/Note/index.d.ts +3 -0
- package/types/components/Note/index.d.ts.map +1 -0
- package/types/components/Note/variations/_size/base.d.ts +2 -0
- package/types/components/Note/variations/_size/base.d.ts.map +1 -0
- package/types/components/Note/variations/_view/base.d.ts +2 -0
- package/types/components/Note/variations/_view/base.d.ts.map +1 -0
- package/types/components/_Icon/Icon.assets/Icon.svg.16/SaluteOutline.d.ts +4 -0
- package/types/components/_Icon/Icon.assets/Icon.svg.16/SaluteOutline.d.ts.map +1 -0
- package/types/components/_Icon/Icons/Icon.16/IconSaluteOutline.d.ts +4 -0
- package/types/components/_Icon/Icons/Icon.16/IconSaluteOutline.d.ts.map +1 -0
- package/types/components/_Icon/index.d.ts +1 -0
- package/types/components/_Icon/index.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Note/Note.config.d.ts +22 -0
- package/types/examples/plasma_b2c/components/Note/Note.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Note/Note.d.ts +27 -0
- package/types/examples/plasma_b2c/components/Note/Note.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Note/Note.config.d.ts +22 -0
- package/types/examples/plasma_web/components/Note/Note.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Note/Note.d.ts +27 -0
- package/types/examples/plasma_web/components/Note/Note.d.ts.map +1 -0
- package/types/index.d.ts +1 -0
- package/types/index.d.ts.map +1 -1
@@ -0,0 +1,11 @@
|
|
1
|
+
.base_pq323y_b1ygm22t__ed5da473{background:var(--plasma-note-background);color:var(--plasma-note-color);}.base_pq323y_b1ygm22t__ed5da473 .base_pq323y_c1i6bkpn__ed5da473{color:var(--plasma-note-content-before-color);fill:var(--plasma-note-content-before-color);}
|
2
|
+
|
3
|
+
.base_14g19gh_bnp62xb__2fa012c5{padding:var(--plasma-note-padding);border-radius:var(--plasma-note-border-radius);height:var(--plasma_private-note-height);width:var(--plasma_private-note-width);gap:var(--plasma-note-gap);}.base_14g19gh_bnp62xb__2fa012c5.base_14g19gh_noteStretch__2fa012c5{width:100%;height:100%;}.base_14g19gh_bnp62xb__2fa012c5 .base_14g19gh_c1i6bkpn__2fa012c5{width:var(--plasma-note-fixed-content-before-width);height:var(--plasma-note-fixed-content-before-height);padding:var(--plasma-note-fixed-content-before-padding);box-sizing:border-box;}.base_14g19gh_bnp62xb__2fa012c5.base_14g19gh_noteContentAlignCenter__2fa012c5{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--plasma-note-padding-scalable);gap:var(--plasma-note-gap-scalable);}.base_14g19gh_bnp62xb__2fa012c5.base_14g19gh_noteContentAlignCenter__2fa012c5 .base_14g19gh_c1i6bkpn__2fa012c5{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:unset;}.base_14g19gh_bnp62xb__2fa012c5 .base_14g19gh_cendmch__2fa012c5{width:var(--plasma_private-note-content-width-with-offset);gap:var(--plasma-note-content-gap);}.base_14g19gh_bnp62xb__2fa012c5 .base_14g19gh_t1wkjxug__2fa012c5,.base_14g19gh_bnp62xb__2fa012c5 .base_14g19gh_te86upw__2fa012c5{width:100%;min-height:var(--plasma-note-title-line-height);font-family:var(--plasma-note-title-font-family);font-size:var(--plasma-note-title-font-size);font-style:var(--plasma-note-title-font-style);font-weight:var(--plasma-note-title-font-weight);-webkit-letter-spacing:var(--plasma-note-title-letter-spacing);-moz-letter-spacing:var(--plasma-note-title-letter-spacing);-ms-letter-spacing:var(--plasma-note-title-letter-spacing);letter-spacing:var(--plasma-note-title-letter-spacing);line-height:var(--plasma-note-title-line-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.base_14g19gh_bnp62xb__2fa012c5 .base_14g19gh_t1kp0wa7__2fa012c5,.base_14g19gh_bnp62xb__2fa012c5 .base_14g19gh_tf1lafs__2fa012c5{font-family:var(--plasma-note-text-font-family);font-size:var(--plasma-note-text-font-size);font-style:var(--plasma-note-text-font-style);font-weight:var(--plasma-note-text-font-weight);-webkit-letter-spacing:var(--plasma-note-text-letter-spacing);-moz-letter-spacing:var(--plasma-note-text-letter-spacing);-ms-letter-spacing:var(--plasma-note-text-letter-spacing);letter-spacing:var(--plasma-note-text-letter-spacing);line-height:var(--plasma-note-text-line-height);word-break:break-all;}
|
4
|
+
|
5
|
+
.Note_styles_178qpj9_b1eqam57__381585e2{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-sizing:border-box;}
|
6
|
+
.Note_styles_178qpj9_c1i6bkpn__381585e2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
|
7
|
+
.Note_styles_178qpj9_cendmch__381585e2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;}
|
8
|
+
|
9
|
+
.Note_styles_178qpj9_te86upw__381585e2{visibility:hidden;position:absolute;z-index:-9999;opacity:0;}
|
10
|
+
.Note_styles_178qpj9_t1kp0wa7__381585e2{display:block;position:relative;}
|
11
|
+
.Note_styles_178qpj9_tf1lafs__381585e2{visibility:hidden;position:absolute;z-index:-9999;opacity:0;top:0;left:0;}
|
@@ -0,0 +1,124 @@
|
|
1
|
+
'use strict';
|
2
|
+
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
4
|
+
|
5
|
+
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
6
|
+
var React = require('react');
|
7
|
+
var plasmaCore = require('@salutejs/plasma-core');
|
8
|
+
var index = require('../../utils/index.js');
|
9
|
+
var base = require('./variations/_view/base.js');
|
10
|
+
var base$1 = require('./variations/_size/base.js');
|
11
|
+
var Note_styles = require('./Note.styles.js');
|
12
|
+
var Note_tokens = require('./Note.tokens.js');
|
13
|
+
var getSizeValueFromProp = require('../../utils/getSizeValueFromProp.js');
|
14
|
+
var canUseDOM = require('../../utils/canUseDOM.js');
|
15
|
+
|
16
|
+
var _excluded = ["className", "style", "title", "text", "contentBefore", "contentBeforeSizing", "size", "view", "stretch", "width", "height"];
|
17
|
+
var noteRoot = function noteRoot(Root) {
|
18
|
+
return /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
|
19
|
+
var className = _ref.className,
|
20
|
+
style = _ref.style,
|
21
|
+
title = _ref.title,
|
22
|
+
text = _ref.text,
|
23
|
+
contentBefore = _ref.contentBefore,
|
24
|
+
_ref$contentBeforeSiz = _ref.contentBeforeSizing,
|
25
|
+
contentBeforeSizing = _ref$contentBeforeSiz === void 0 ? 'fixed' : _ref$contentBeforeSiz,
|
26
|
+
size = _ref.size,
|
27
|
+
view = _ref.view,
|
28
|
+
stretch = _ref.stretch,
|
29
|
+
width = _ref.width,
|
30
|
+
height = _ref.height,
|
31
|
+
rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
32
|
+
var _useState = React.useState(text),
|
33
|
+
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
34
|
+
innerText = _useState2[0],
|
35
|
+
setInnerText = _useState2[1];
|
36
|
+
var _useState3 = React.useState(contentBefore ? "var(".concat(Note_tokens.tokens.fixedContentBeforeWidth, ")") : '0'),
|
37
|
+
_useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
|
38
|
+
contentBeforeWidth = _useState4[0],
|
39
|
+
setContentBeforeWidth = _useState4[1];
|
40
|
+
var contentWrapperRef = React.useRef(null);
|
41
|
+
var contentBeforeRef = React.useRef(null);
|
42
|
+
var titleHelperRef = React.useRef(null);
|
43
|
+
var textRenderHelperRef = React.useRef(null);
|
44
|
+
var innerWidth = width ? getSizeValueFromProp.getSizeValueFromProp(width) : 'fit-content';
|
45
|
+
var innerHeight = height ? getSizeValueFromProp.getSizeValueFromProp(height) : 'fit-content';
|
46
|
+
var contentGapToken = contentBeforeSizing === 'scalable' ? Note_tokens.tokens.gapScalable : Note_tokens.tokens.gap;
|
47
|
+
var contentWidthWithOffsetToken = contentBefore ? "calc(100% - ".concat(contentBeforeWidth, " - var(").concat(contentGapToken, "))") : '100%';
|
48
|
+
var setTruncatedText = function setTruncatedText() {
|
49
|
+
var _titleHelperRef$curre;
|
50
|
+
if (!canUseDOM.canUseDOM || !text || !(contentWrapperRef !== null && contentWrapperRef !== void 0 && contentWrapperRef.current) || !(textRenderHelperRef !== null && textRenderHelperRef !== void 0 && textRenderHelperRef.current) || !width && !height) {
|
51
|
+
return;
|
52
|
+
}
|
53
|
+
var contentHeight = contentWrapperRef.current.offsetHeight;
|
54
|
+
var titleHeight = ((_titleHelperRef$curre = titleHelperRef.current) === null || _titleHelperRef$curre === void 0 ? void 0 : _titleHelperRef$curre.offsetHeight) || 0;
|
55
|
+
var contentGap = Number(window.getComputedStyle(contentWrapperRef.current).rowGap.replace('px', ''));
|
56
|
+
var textAvailableHeight = contentHeight - titleHeight - contentGap;
|
57
|
+
textRenderHelperRef.current.textContent = text;
|
58
|
+
if (textRenderHelperRef.current.offsetHeight <= textAvailableHeight) {
|
59
|
+
setInnerText(text);
|
60
|
+
return;
|
61
|
+
}
|
62
|
+
var fullText = "".concat(text.slice(0, -3), "...");
|
63
|
+
for (var i = text.length - 1; i >= 0; i -= 1) {
|
64
|
+
textRenderHelperRef.current.textContent = fullText;
|
65
|
+
if (textRenderHelperRef.current.offsetHeight <= textAvailableHeight) {
|
66
|
+
break;
|
67
|
+
}
|
68
|
+
fullText = "".concat(fullText.slice(0, i), "...");
|
69
|
+
}
|
70
|
+
setInnerText(fullText);
|
71
|
+
};
|
72
|
+
plasmaCore.useResizeObserver(contentWrapperRef, setTruncatedText);
|
73
|
+
React.useLayoutEffect(function () {
|
74
|
+
setTruncatedText();
|
75
|
+
}, [text, contentBefore, contentBeforeSizing, stretch]);
|
76
|
+
React.useEffect(function () {
|
77
|
+
if (!(contentBeforeRef !== null && contentBeforeRef !== void 0 && contentBeforeRef.current)) {
|
78
|
+
return;
|
79
|
+
}
|
80
|
+
if (contentBeforeSizing === 'scalable') {
|
81
|
+
setContentBeforeWidth("".concat(contentBeforeRef.current.offsetWidth, "px"));
|
82
|
+
return;
|
83
|
+
}
|
84
|
+
setContentBeforeWidth("var(".concat(Note_tokens.tokens.fixedContentBeforeWidth, ")"));
|
85
|
+
}, [contentBefore, contentBeforeSizing]);
|
86
|
+
return /*#__PURE__*/React.createElement(Root, _rollupPluginBabelHelpers.extends({
|
87
|
+
ref: outerRef,
|
88
|
+
className: index.cx(className, stretch && Note_tokens.classes.stretch, contentBeforeSizing === 'scalable' && Note_tokens.classes.contentAlignCenter),
|
89
|
+
view: view,
|
90
|
+
size: size,
|
91
|
+
style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, style), {}, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, Note_tokens.privateTokens.width, innerWidth), Note_tokens.privateTokens.height, innerHeight), Note_tokens.privateTokens.contentWidthWithOffset, contentWidthWithOffsetToken))
|
92
|
+
}, rest), contentBefore && /*#__PURE__*/React.createElement(Note_styles.ContentBefore, {
|
93
|
+
ref: contentBeforeRef
|
94
|
+
}, contentBefore), /*#__PURE__*/React.createElement(Note_styles.ContentWrapper, {
|
95
|
+
ref: contentWrapperRef
|
96
|
+
}, title && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Note_styles.Title, null, title), /*#__PURE__*/React.createElement(Note_styles.TitleHelper, {
|
97
|
+
ref: titleHelperRef
|
98
|
+
}, "C")), innerText && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Note_styles.Text, null, innerText, /*#__PURE__*/React.createElement(Note_styles.TextHelper, {
|
99
|
+
ref: textRenderHelperRef
|
100
|
+
}, "C")))));
|
101
|
+
});
|
102
|
+
};
|
103
|
+
var noteConfig = {
|
104
|
+
name: 'Note',
|
105
|
+
tag: 'div',
|
106
|
+
layout: noteRoot,
|
107
|
+
base: Note_styles.base,
|
108
|
+
variations: {
|
109
|
+
view: {
|
110
|
+
css: base.base
|
111
|
+
},
|
112
|
+
size: {
|
113
|
+
css: base$1.base
|
114
|
+
}
|
115
|
+
},
|
116
|
+
defaults: {
|
117
|
+
view: 'default',
|
118
|
+
size: 'm'
|
119
|
+
}
|
120
|
+
};
|
121
|
+
|
122
|
+
exports.noteConfig = noteConfig;
|
123
|
+
exports.noteRoot = noteRoot;
|
124
|
+
//# sourceMappingURL=Note.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Note.js","sources":["../../../src/components/Note/Note.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport type { CSSProperties } from 'react';\nimport { useResizeObserver } from '@salutejs/plasma-core';\n\nimport { canUseDOM, cx, getSizeValueFromProp } from '../../utils';\nimport type { RootProps } from '../../engines';\n\nimport type { NoteProps } from './Note.types';\nimport { base as viewCSS } from './variations/_view/base';\nimport { base as sizeCSS } from './variations/_size/base';\nimport { base, ContentBefore, ContentWrapper, Text, TextHelper, Title, TitleHelper } from './Note.styles';\nimport { classes, privateTokens, tokens } from './Note.tokens';\n\nexport const noteRoot = (Root: RootProps<HTMLDivElement, NoteProps>) =>\n forwardRef<HTMLDivElement, NoteProps>(\n (\n {\n className,\n style,\n title,\n text,\n contentBefore,\n contentBeforeSizing = 'fixed',\n size,\n view,\n stretch,\n width,\n height,\n ...rest\n },\n outerRef,\n ) => {\n const [innerText, setInnerText] = useState(text);\n const [contentBeforeWidth, setContentBeforeWidth] = useState(\n contentBefore ? `var(${tokens.fixedContentBeforeWidth})` : '0',\n );\n\n const contentWrapperRef = useRef<HTMLDivElement>(null);\n const contentBeforeRef = useRef<HTMLDivElement>(null);\n const titleHelperRef = useRef<HTMLDivElement>(null);\n const textRenderHelperRef = useRef<HTMLSpanElement>(null);\n\n const innerWidth = width ? getSizeValueFromProp(width) : 'fit-content';\n const innerHeight = height ? getSizeValueFromProp(height) : 'fit-content';\n\n const contentGapToken = contentBeforeSizing === 'scalable' ? tokens.gapScalable : tokens.gap;\n const contentWidthWithOffsetToken = contentBefore\n ? `calc(100% - ${contentBeforeWidth} - var(${contentGapToken}))`\n : '100%';\n\n const setTruncatedText = () => {\n if (\n !canUseDOM ||\n !text ||\n !contentWrapperRef?.current ||\n !textRenderHelperRef?.current ||\n (!width && !height)\n ) {\n return;\n }\n\n const contentHeight = contentWrapperRef.current.offsetHeight;\n const titleHeight = titleHelperRef.current?.offsetHeight || 0;\n\n const contentGap = Number(window.getComputedStyle(contentWrapperRef.current).rowGap.replace('px', ''));\n\n const textAvailableHeight = contentHeight - titleHeight - contentGap;\n\n textRenderHelperRef.current.textContent = text;\n\n if (textRenderHelperRef.current.offsetHeight <= textAvailableHeight) {\n setInnerText(text);\n return;\n }\n\n let fullText = `${text.slice(0, -3)}...`;\n\n for (let i = text.length - 1; i >= 0; i -= 1) {\n textRenderHelperRef.current.textContent = fullText;\n\n if (textRenderHelperRef.current.offsetHeight <= textAvailableHeight) {\n break;\n }\n\n fullText = `${fullText.slice(0, i)}...`;\n }\n\n setInnerText(fullText);\n };\n\n useResizeObserver(contentWrapperRef, setTruncatedText);\n\n useLayoutEffect(() => {\n setTruncatedText();\n }, [text, contentBefore, contentBeforeSizing, stretch]);\n\n useEffect(() => {\n if (!contentBeforeRef?.current) {\n return;\n }\n\n if (contentBeforeSizing === 'scalable') {\n setContentBeforeWidth(`${contentBeforeRef.current.offsetWidth}px`);\n return;\n }\n\n setContentBeforeWidth(`var(${tokens.fixedContentBeforeWidth})`);\n }, [contentBefore, contentBeforeSizing]);\n\n return (\n <Root\n ref={outerRef}\n className={cx(\n className,\n stretch && classes.stretch,\n contentBeforeSizing === 'scalable' && classes.contentAlignCenter,\n )}\n view={view}\n size={size}\n style={\n {\n ...style,\n [privateTokens.width]: innerWidth,\n [privateTokens.height]: innerHeight,\n [privateTokens.contentWidthWithOffset]: contentWidthWithOffsetToken,\n } as CSSProperties\n }\n {...rest}\n >\n {contentBefore && <ContentBefore ref={contentBeforeRef}>{contentBefore}</ContentBefore>}\n <ContentWrapper ref={contentWrapperRef}>\n {title && (\n <>\n <Title>{title}</Title>\n <TitleHelper ref={titleHelperRef}>C</TitleHelper>\n </>\n )}\n {innerText && (\n <>\n <Text>\n {innerText}\n <TextHelper ref={textRenderHelperRef}>C</TextHelper>\n </Text>\n </>\n )}\n </ContentWrapper>\n </Root>\n );\n },\n );\n\nexport const noteConfig = {\n name: 'Note',\n tag: 'div',\n layout: noteRoot,\n base,\n variations: {\n view: {\n css: viewCSS,\n },\n size: {\n css: sizeCSS,\n },\n },\n defaults: {\n view: 'default',\n size: 'm',\n },\n};\n"],"names":["noteRoot","Root","forwardRef","_ref","outerRef","className","style","title","text","contentBefore","_ref$contentBeforeSiz","contentBeforeSizing","size","view","stretch","width","height","rest","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","innerText","setInnerText","_useState3","concat","tokens","fixedContentBeforeWidth","_useState4","contentBeforeWidth","setContentBeforeWidth","contentWrapperRef","useRef","contentBeforeRef","titleHelperRef","textRenderHelperRef","innerWidth","getSizeValueFromProp","innerHeight","contentGapToken","gapScalable","gap","contentWidthWithOffsetToken","setTruncatedText","_titleHelperRef$curre","canUseDOM","current","contentHeight","offsetHeight","titleHeight","contentGap","Number","window","getComputedStyle","rowGap","replace","textAvailableHeight","textContent","fullText","slice","i","length","useResizeObserver","useLayoutEffect","useEffect","offsetWidth","React","createElement","_extends","ref","cx","classes","contentAlignCenter","_objectSpread","_defineProperty","privateTokens","contentWidthWithOffset","ContentBefore","ContentWrapper","Fragment","Title","TitleHelper","Text","TextHelper","noteConfig","name","tag","layout","base","variations","css","viewCSS","sizeCSS","defaults"],"mappings":"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"}
|
@@ -0,0 +1,47 @@
|
|
1
|
+
import './Note.styles_178qpj9.css';
|
2
|
+
'use strict';
|
3
|
+
|
4
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
5
|
+
|
6
|
+
var react = require('@linaria/react');
|
7
|
+
|
8
|
+
var base = "b1eqam57";
|
9
|
+
var ContentBefore = /*#__PURE__*/react.styled('div')({
|
10
|
+
name: "ContentBefore",
|
11
|
+
"class": "c1i6bkpn",
|
12
|
+
propsAsIs: false
|
13
|
+
});
|
14
|
+
var ContentWrapper = /*#__PURE__*/react.styled('div')({
|
15
|
+
name: "ContentWrapper",
|
16
|
+
"class": "cendmch",
|
17
|
+
propsAsIs: false
|
18
|
+
});
|
19
|
+
var Title = /*#__PURE__*/react.styled('div')({
|
20
|
+
name: "Title",
|
21
|
+
"class": "t1wkjxug",
|
22
|
+
propsAsIs: false
|
23
|
+
});
|
24
|
+
var TitleHelper = /*#__PURE__*/react.styled('div')({
|
25
|
+
name: "TitleHelper",
|
26
|
+
"class": "te86upw",
|
27
|
+
propsAsIs: false
|
28
|
+
});
|
29
|
+
var Text = /*#__PURE__*/react.styled('span')({
|
30
|
+
name: "Text",
|
31
|
+
"class": "t1kp0wa7",
|
32
|
+
propsAsIs: false
|
33
|
+
});
|
34
|
+
var TextHelper = /*#__PURE__*/react.styled('span')({
|
35
|
+
name: "TextHelper",
|
36
|
+
"class": "tf1lafs",
|
37
|
+
propsAsIs: false
|
38
|
+
});
|
39
|
+
|
40
|
+
exports.ContentBefore = ContentBefore;
|
41
|
+
exports.ContentWrapper = ContentWrapper;
|
42
|
+
exports.Text = Text;
|
43
|
+
exports.TextHelper = TextHelper;
|
44
|
+
exports.Title = Title;
|
45
|
+
exports.TitleHelper = TitleHelper;
|
46
|
+
exports.base = base;
|
47
|
+
//# sourceMappingURL=Note.styles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Note.styles.js","sources":["../../../src/components/Note/Note.styles.ts"],"sourcesContent":["import { styled } from '@linaria/react';\nimport { css } from '@linaria/core';\n\nexport const base = css`\n position: relative;\n display: flex;\n box-sizing: border-box;\n`;\n\nexport const ContentBefore = styled.div`\n display: flex;\n`;\n\nexport const ContentWrapper = styled.div`\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n`;\n\nexport const Title = styled.div``;\nexport const TitleHelper = styled.div`\n visibility: hidden;\n position: absolute;\n z-index: -9999;\n opacity: 0;\n`;\n\nexport const Text = styled.span`\n display: block;\n position: relative;\n`;\nexport const TextHelper = styled.span`\n visibility: hidden;\n position: absolute;\n z-index: -9999;\n opacity: 0;\n top: 0;\n left: 0;\n`;\n"],"names":["base","ContentBefore","styled","name","class","propsAsIs","ContentWrapper","Title","TitleHelper","Text","TextHelper"],"mappings":";;;;;;AAGO,IAAMA,IAAI,GAIhB,WAAA;AAEM,IAAMC,aAAa,gBAAGC,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,eAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAElC,EAAA;AAEM,IAAMC,cAAc,gBAAGJ,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,gBAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAInC,EAAA;AAEM,IAAME,KAAK,gBAAGL,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,OAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAAM,EAAA;AAC1B,IAAMG,WAAW,gBAAGN,YAAM,CAAA,KAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,aAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAKhC,EAAA;AAEM,IAAMI,IAAI,gBAAGP,YAAM,CAAA,MAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,MAAA;AAAAC,EAAAA,OAAAA,EAAA,UAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAGzB,EAAA;AACM,IAAMK,UAAU,gBAAGR,YAAM,CAAA,MAAA,CAAA,CAAA;AAAAC,EAAAA,IAAA,EAAA,YAAA;AAAAC,EAAAA,OAAAA,EAAA,SAAA;AAAAC,EAAAA,SAAA,EAAA,KAAA;AAAA,CAO/B;;;;;;;;;;"}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
.b1eqam57{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-sizing:border-box;}
|
2
|
+
.c1i6bkpn{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
|
3
|
+
.cendmch{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;}
|
4
|
+
|
5
|
+
.te86upw{visibility:hidden;position:absolute;z-index:-9999;opacity:0;}
|
6
|
+
.t1kp0wa7{display:block;position:relative;}
|
7
|
+
.tf1lafs{visibility:hidden;position:absolute;z-index:-9999;opacity:0;top:0;left:0;}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
'use strict';
|
2
|
+
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
4
|
+
|
5
|
+
var classes = {
|
6
|
+
stretch: 'note-stretch',
|
7
|
+
contentAlignCenter: 'note-content-align-center'
|
8
|
+
};
|
9
|
+
var privateTokens = {
|
10
|
+
width: '--plasma_private-note-width',
|
11
|
+
height: '--plasma_private-note-height',
|
12
|
+
contentWidthWithOffset: '--plasma_private-note-content-width-with-offset'
|
13
|
+
};
|
14
|
+
var tokens = {
|
15
|
+
background: '--plasma-note-background',
|
16
|
+
color: '--plasma-note-color',
|
17
|
+
contentBeforeColor: '--plasma-note-content-before-color',
|
18
|
+
padding: '--plasma-note-padding',
|
19
|
+
paddingScalable: '--plasma-note-padding-scalable',
|
20
|
+
borderRadius: '--plasma-note-border-radius',
|
21
|
+
gap: '--plasma-note-gap',
|
22
|
+
gapScalable: '--plasma-note-gap-scalable',
|
23
|
+
contentGap: '--plasma-note-content-gap',
|
24
|
+
fixedContentBeforeWidth: '--plasma-note-fixed-content-before-width',
|
25
|
+
fixedContentBeforeHeight: '--plasma-note-fixed-content-before-height',
|
26
|
+
fixedContentBeforePadding: '--plasma-note-fixed-content-before-padding',
|
27
|
+
titleFontFamily: '--plasma-note-title-font-family',
|
28
|
+
titleFontSize: '--plasma-note-title-font-size',
|
29
|
+
titleFontStyle: '--plasma-note-title-font-style',
|
30
|
+
titleFontWeight: '--plasma-note-title-font-weight',
|
31
|
+
titleLetterSpacing: '--plasma-note-title-letter-spacing',
|
32
|
+
titleLineHeight: '--plasma-note-title-line-height',
|
33
|
+
textFontFamily: '--plasma-note-text-font-family',
|
34
|
+
textFontSize: '--plasma-note-text-font-size',
|
35
|
+
textFontStyle: '--plasma-note-text-font-style',
|
36
|
+
textFontWeight: '--plasma-note-text-font-weight',
|
37
|
+
textLetterSpacing: '--plasma-note-text-letter-spacing',
|
38
|
+
textLineHeight: '--plasma-note-text-line-height'
|
39
|
+
};
|
40
|
+
|
41
|
+
exports.classes = classes;
|
42
|
+
exports.privateTokens = privateTokens;
|
43
|
+
exports.tokens = tokens;
|
44
|
+
//# sourceMappingURL=Note.tokens.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Note.tokens.js","sources":["../../../src/components/Note/Note.tokens.ts"],"sourcesContent":["export const classes = {\n stretch: 'note-stretch',\n contentAlignCenter: 'note-content-align-center',\n};\n\nexport const privateTokens = {\n width: '--plasma_private-note-width',\n height: '--plasma_private-note-height',\n contentWidthWithOffset: '--plasma_private-note-content-width-with-offset',\n};\n\nexport const tokens = {\n background: '--plasma-note-background',\n color: '--plasma-note-color',\n contentBeforeColor: '--plasma-note-content-before-color',\n\n padding: '--plasma-note-padding',\n paddingScalable: '--plasma-note-padding-scalable',\n borderRadius: '--plasma-note-border-radius',\n gap: '--plasma-note-gap',\n gapScalable: '--plasma-note-gap-scalable',\n contentGap: '--plasma-note-content-gap',\n\n fixedContentBeforeWidth: '--plasma-note-fixed-content-before-width',\n fixedContentBeforeHeight: '--plasma-note-fixed-content-before-height',\n fixedContentBeforePadding: '--plasma-note-fixed-content-before-padding',\n\n titleFontFamily: '--plasma-note-title-font-family',\n titleFontSize: '--plasma-note-title-font-size',\n titleFontStyle: '--plasma-note-title-font-style',\n titleFontWeight: '--plasma-note-title-font-weight',\n titleLetterSpacing: '--plasma-note-title-letter-spacing',\n titleLineHeight: '--plasma-note-title-line-height',\n\n textFontFamily: '--plasma-note-text-font-family',\n textFontSize: '--plasma-note-text-font-size',\n textFontStyle: '--plasma-note-text-font-style',\n textFontWeight: '--plasma-note-text-font-weight',\n textLetterSpacing: '--plasma-note-text-letter-spacing',\n textLineHeight: '--plasma-note-text-line-height',\n};\n"],"names":["classes","stretch","contentAlignCenter","privateTokens","width","height","contentWidthWithOffset","tokens","background","color","contentBeforeColor","padding","paddingScalable","borderRadius","gap","gapScalable","contentGap","fixedContentBeforeWidth","fixedContentBeforeHeight","fixedContentBeforePadding","titleFontFamily","titleFontSize","titleFontStyle","titleFontWeight","titleLetterSpacing","titleLineHeight","textFontFamily","textFontSize","textFontStyle","textFontWeight","textLetterSpacing","textLineHeight"],"mappings":";;;;AAAO,IAAMA,OAAO,GAAG;AACnBC,EAAAA,OAAO,EAAE,cAAc;AACvBC,EAAAA,kBAAkB,EAAE,2BAAA;AACxB,EAAC;AAEM,IAAMC,aAAa,GAAG;AACzBC,EAAAA,KAAK,EAAE,6BAA6B;AACpCC,EAAAA,MAAM,EAAE,8BAA8B;AACtCC,EAAAA,sBAAsB,EAAE,iDAAA;AAC5B,EAAC;AAEM,IAAMC,MAAM,GAAG;AAClBC,EAAAA,UAAU,EAAE,0BAA0B;AACtCC,EAAAA,KAAK,EAAE,qBAAqB;AAC5BC,EAAAA,kBAAkB,EAAE,oCAAoC;AAExDC,EAAAA,OAAO,EAAE,uBAAuB;AAChCC,EAAAA,eAAe,EAAE,gCAAgC;AACjDC,EAAAA,YAAY,EAAE,6BAA6B;AAC3CC,EAAAA,GAAG,EAAE,mBAAmB;AACxBC,EAAAA,WAAW,EAAE,4BAA4B;AACzCC,EAAAA,UAAU,EAAE,2BAA2B;AAEvCC,EAAAA,uBAAuB,EAAE,0CAA0C;AACnEC,EAAAA,wBAAwB,EAAE,2CAA2C;AACrEC,EAAAA,yBAAyB,EAAE,4CAA4C;AAEvEC,EAAAA,eAAe,EAAE,iCAAiC;AAClDC,EAAAA,aAAa,EAAE,+BAA+B;AAC9CC,EAAAA,cAAc,EAAE,gCAAgC;AAChDC,EAAAA,eAAe,EAAE,iCAAiC;AAClDC,EAAAA,kBAAkB,EAAE,oCAAoC;AACxDC,EAAAA,eAAe,EAAE,iCAAiC;AAElDC,EAAAA,cAAc,EAAE,gCAAgC;AAChDC,EAAAA,YAAY,EAAE,8BAA8B;AAC5CC,EAAAA,aAAa,EAAE,+BAA+B;AAC9CC,EAAAA,cAAc,EAAE,gCAAgC;AAChDC,EAAAA,iBAAiB,EAAE,mCAAmC;AACtDC,EAAAA,cAAc,EAAE,gCAAA;AACpB;;;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"base.js","sources":["../../../../../src/components/Note/variations/_size/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { classes, privateTokens, tokens } from '../../Note.tokens';\nimport { ContentBefore, ContentWrapper, Text, TextHelper, Title, TitleHelper } from '../../Note.styles';\nimport { applyEllipsis } from '../../../../mixins';\n\nexport const base = css`\n padding: var(${tokens.padding});\n border-radius: var(${tokens.borderRadius});\n height: var(${privateTokens.height});\n width: var(${privateTokens.width});\n gap: var(${tokens.gap});\n\n &.${classes.stretch} {\n width: 100%;\n height: 100%;\n }\n\n ${ContentBefore} {\n width: var(${tokens.fixedContentBeforeWidth});\n height: var(${tokens.fixedContentBeforeHeight});\n padding: var(${tokens.fixedContentBeforePadding});\n box-sizing: border-box;\n }\n\n &.${classes.contentAlignCenter} {\n align-items: center;\n padding: var(${tokens.paddingScalable});\n gap: var(${tokens.gapScalable});\n\n ${ContentBefore} {\n width: fit-content;\n height: fit-content;\n padding: unset;\n }\n }\n\n ${ContentWrapper} {\n width: var(${privateTokens.contentWidthWithOffset});\n gap: var(${tokens.contentGap});\n }\n\n ${Title}, ${TitleHelper} {\n width: 100%;\n min-height: var(${tokens.titleLineHeight});\n\n font-family: var(${tokens.titleFontFamily});\n font-size: var(${tokens.titleFontSize});\n font-style: var(${tokens.titleFontStyle});\n font-weight: var(${tokens.titleFontWeight});\n letter-spacing: var(${tokens.titleLetterSpacing});\n line-height: var(${tokens.titleLineHeight});\n\n ${applyEllipsis()}\n }\n\n ${Text}, ${TextHelper} {\n font-family: var(${tokens.textFontFamily});\n font-size: var(${tokens.textFontSize});\n font-style: var(${tokens.textFontStyle});\n font-weight: var(${tokens.textFontWeight});\n letter-spacing: var(${tokens.textLetterSpacing});\n line-height: var(${tokens.textLineHeight});\n\n word-break: break-all;\n }\n`;\n"],"names":["base"],"mappings":";;;;AAMO,IAAMA,IAAI,GA4DhB;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
.bnp62xb{padding:var(--plasma-note-padding);border-radius:var(--plasma-note-border-radius);height:var(--plasma_private-note-height);width:var(--plasma_private-note-width);gap:var(--plasma-note-gap);}.bnp62xb.note-stretch{width:100%;height:100%;}.bnp62xb .c1i6bkpn{width:var(--plasma-note-fixed-content-before-width);height:var(--plasma-note-fixed-content-before-height);padding:var(--plasma-note-fixed-content-before-padding);box-sizing:border-box;}.bnp62xb.note-content-align-center{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--plasma-note-padding-scalable);gap:var(--plasma-note-gap-scalable);}.bnp62xb.note-content-align-center .c1i6bkpn{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:unset;}.bnp62xb .cendmch{width:var(--plasma_private-note-content-width-with-offset);gap:var(--plasma-note-content-gap);}.bnp62xb .t1wkjxug,.bnp62xb .te86upw{width:100%;min-height:var(--plasma-note-title-line-height);font-family:var(--plasma-note-title-font-family);font-size:var(--plasma-note-title-font-size);font-style:var(--plasma-note-title-font-style);font-weight:var(--plasma-note-title-font-weight);-webkit-letter-spacing:var(--plasma-note-title-letter-spacing);-moz-letter-spacing:var(--plasma-note-title-letter-spacing);-ms-letter-spacing:var(--plasma-note-title-letter-spacing);letter-spacing:var(--plasma-note-title-letter-spacing);line-height:var(--plasma-note-title-line-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.bnp62xb .t1kp0wa7,.bnp62xb .tf1lafs{font-family:var(--plasma-note-text-font-family);font-size:var(--plasma-note-text-font-size);font-style:var(--plasma-note-text-font-style);font-weight:var(--plasma-note-text-font-weight);-webkit-letter-spacing:var(--plasma-note-text-letter-spacing);-moz-letter-spacing:var(--plasma-note-text-letter-spacing);-ms-letter-spacing:var(--plasma-note-text-letter-spacing);letter-spacing:var(--plasma-note-text-letter-spacing);line-height:var(--plasma-note-text-line-height);word-break:break-all;}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"base.js","sources":["../../../../../src/components/Note/variations/_view/base.ts"],"sourcesContent":["import { css } from '@linaria/core';\n\nimport { tokens } from '../../Note.tokens';\nimport { ContentBefore } from '../../Note.styles';\n\nexport const base = css`\n background: var(${tokens.background});\n color: var(${tokens.color});\n\n ${ContentBefore} {\n color: var(${tokens.contentBeforeColor});\n fill: var(${tokens.contentBeforeColor});\n }\n`;\n"],"names":["base"],"mappings":";;;;AAKO,IAAMA,IAAI,GAQhB;;;;"}
|
@@ -0,0 +1 @@
|
|
1
|
+
.b1ygm22t{background:var(--plasma-note-background);color:var(--plasma-note-color);}.b1ygm22t .c1i6bkpn{color:var(--plasma-note-content-before-color);fill:var(--plasma-note-content-before-color);}
|
package/cjs/index.css
CHANGED
@@ -873,3 +873,15 @@
|
|
873
873
|
.base_ifpbjw_b10gf48d__de0b9df0 .base_ifpbjw_smcag5a__de0b9df0{color:var(--plasma-rating-color);}.base_ifpbjw_b10gf48d__de0b9df0 .base_ifpbjw_h1v9l89e__de0b9df0{color:var(--plasma-rating_helper-text_color);}.base_ifpbjw_b10gf48d__de0b9df0 .base_ifpbjw_s1qyefgr__de0b9df0{color:var(--plasma-rating_icon_color);fill:var(--plasma-rating_icon_color);}.base_ifpbjw_b10gf48d__de0b9df0 .base_ifpbjw_s1qyefgr__de0b9df0.base_ifpbjw_ratingIconOutline__de0b9df0{color:unset;}.base_ifpbjw_b10gf48d__de0b9df0 .base_ifpbjw_s1qyefgr__de0b9df0.base_ifpbjw_ratingIconOutline__de0b9df0 path{fill:var(--plasma-rating_outline-icon_color);}
|
874
874
|
|
875
875
|
.base_1q9gsno_bk1uq2r__d447cc34{gap:var(--plasma-rating-gap);}.base_1q9gsno_bk1uq2r__d447cc34 .base_1q9gsno_cq35jd4__d447cc34{gap:var(--plasma-rating_content_gap);}.base_1q9gsno_bk1uq2r__d447cc34 .base_1q9gsno_cq35jd4__d447cc34.base_1q9gsno_ratingSingleIconContent__d447cc34{gap:var(--plasma-rating_single-icon_content_gap);}.base_1q9gsno_bk1uq2r__d447cc34 .base_1q9gsno_cq35jd4__d447cc34.base_1q9gsno_ratingScoreValueAfter__d447cc34{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}.base_1q9gsno_bk1uq2r__d447cc34 .base_1q9gsno_smcag5a__d447cc34{font-family:var(--plasma-rating-font-family);font-size:var(--plasma-rating-font-size);font-style:var(--plasma-rating-font-style);font-weight:var(--plasma-rating-font-weight);-webkit-letter-spacing:var(--plasma-rating-letter-spacing);-moz-letter-spacing:var(--plasma-rating-letter-spacing);-ms-letter-spacing:var(--plasma-rating-letter-spacing);letter-spacing:var(--plasma-rating-letter-spacing);line-height:var(--plasma-rating-line-height);}.base_1q9gsno_bk1uq2r__d447cc34 .base_1q9gsno_h1v9l89e__d447cc34{font-family:var(--plasma-rating_helper-text_font-family);font-size:var(--plasma-rating_helper-text_font-size);font-style:var(--plasma-rating_helper-text_font-style);font-weight:var(--plasma-rating_helper-text_font-weight);-webkit-letter-spacing:var(--plasma-rating_helper-text_letter-spacing);-moz-letter-spacing:var(--plasma-rating_helper-text_letter-spacing);-ms-letter-spacing:var(--plasma-rating_helper-text_letter-spacing);letter-spacing:var(--plasma-rating_helper-text_letter-spacing);line-height:var(--plasma-rating_helper-text_line-height);}.base_1q9gsno_bk1uq2r__d447cc34 .base_1q9gsno_w2w5s5q__d447cc34{gap:var(--plasma-rating_wrapper_gap);}.base_1q9gsno_bk1uq2r__d447cc34 .base_1q9gsno_si7qyrs__d447cc34{gap:var(--plasma-rating_stars-wrapper_gap);}.base_1q9gsno_bk1uq2r__d447cc34 .base_1q9gsno_s1qyefgr__d447cc34{margin-bottom:var(--plasma-rating_icon-margin-bottom,0);width:var(--plasma-rating_icon-size);height:var(--plasma-rating_icon-size);--plasma_private-rating_icon-size:var(--plasma-rating_icon-size_actual,100%);}@media (min-width:0){.base_1q9gsno_bk1uq2r__d447cc34 .base_1q9gsno_s1qyefgr__d447cc34{width:var(--plasma-rating_icon-size_small-screen,var(--plasma-rating_icon-size));height:var(--plasma-rating_icon-size_small-screen,var(--plasma-rating_icon-size));}}@media (min-width:35rem){.base_1q9gsno_bk1uq2r__d447cc34 .base_1q9gsno_s1qyefgr__d447cc34{width:var(--plasma-rating_icon-size_medium-screen,var(--plasma-rating_icon-size));height:var(--plasma-rating_icon-size_medium-screen,var(--plasma-rating_icon-size));}}@media (min-width:60rem){.base_1q9gsno_bk1uq2r__d447cc34 .base_1q9gsno_s1qyefgr__d447cc34{width:var(--plasma-rating_icon-size_large-screen,var(--plasma-rating_icon-size));height:var(--plasma-rating_icon-size_large-screen,var(--plasma-rating_icon-size));}}.base_1q9gsno_bk1uq2r__d447cc34 .base_1q9gsno_s1qyefgr__d447cc34 .base_1q9gsno_ratingCustomIconSizing__d447cc34{display:inline-block;width:var(--plasma-rating_icon-size_actual,100%);height:var(--plasma-rating_icon-size_actual,100%);}.base_1q9gsno_bk1uq2r__d447cc34 .base_1q9gsno_s1qyefgr__d447cc34 svg{width:var(--plasma-rating_icon-size_actual,100%);height:var(--plasma-rating_icon-size_actual,100%);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-transform:scale(var(--plasma-rating_icon-size_scale-factor,1));-ms-transform:scale(var(--plasma-rating_icon-size_scale-factor,1));transform:scale(var(--plasma-rating_icon-size_scale-factor,1));}.base_1q9gsno_bk1uq2r__d447cc34 .base_1q9gsno_s1qyefgr__d447cc34.base_1q9gsno_ratingSingleIcon__d447cc34{margin-bottom:var(--plasma-rating_single-icon_margin-bottom,0);width:var(--plasma-rating_single-icon-size);height:var(--plasma-rating_single-icon-size);}@media (min-width:0){.base_1q9gsno_bk1uq2r__d447cc34 .base_1q9gsno_s1qyefgr__d447cc34.base_1q9gsno_ratingSingleIcon__d447cc34{width:var(--plasma-rating_single-icon-size_small-screen,var(--plasma-rating_icon-size));height:var(--plasma-rating_single-icon-size_small-screen,var(--plasma-rating_icon-size));}}@media (min-width:35rem){.base_1q9gsno_bk1uq2r__d447cc34 .base_1q9gsno_s1qyefgr__d447cc34.base_1q9gsno_ratingSingleIcon__d447cc34{width:var(--plasma-rating_single-icon-size_medium-screen,var(--plasma-rating_icon-size));height:var(--plasma-rating_single-icon-size_medium-screen,var(--plasma-rating_icon-size));}}@media (min-width:60rem){.base_1q9gsno_bk1uq2r__d447cc34 .base_1q9gsno_s1qyefgr__d447cc34.base_1q9gsno_ratingSingleIcon__d447cc34{width:var(--plasma-rating_single-icon-size_large-screen,var(--plasma-rating_icon-size));height:var(--plasma-rating_single-icon-size_large-screen,var(--plasma-rating_icon-size));}}
|
876
|
+
|
877
|
+
.base_pq323y_b1ygm22t__ed5da473{background:var(--plasma-note-background);color:var(--plasma-note-color);}.base_pq323y_b1ygm22t__ed5da473 .base_pq323y_c1i6bkpn__ed5da473{color:var(--plasma-note-content-before-color);fill:var(--plasma-note-content-before-color);}
|
878
|
+
|
879
|
+
.base_14g19gh_bnp62xb__2fa012c5{padding:var(--plasma-note-padding);border-radius:var(--plasma-note-border-radius);height:var(--plasma_private-note-height);width:var(--plasma_private-note-width);gap:var(--plasma-note-gap);}.base_14g19gh_bnp62xb__2fa012c5.base_14g19gh_noteStretch__2fa012c5{width:100%;height:100%;}.base_14g19gh_bnp62xb__2fa012c5 .base_14g19gh_c1i6bkpn__2fa012c5{width:var(--plasma-note-fixed-content-before-width);height:var(--plasma-note-fixed-content-before-height);padding:var(--plasma-note-fixed-content-before-padding);box-sizing:border-box;}.base_14g19gh_bnp62xb__2fa012c5.base_14g19gh_noteContentAlignCenter__2fa012c5{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--plasma-note-padding-scalable);gap:var(--plasma-note-gap-scalable);}.base_14g19gh_bnp62xb__2fa012c5.base_14g19gh_noteContentAlignCenter__2fa012c5 .base_14g19gh_c1i6bkpn__2fa012c5{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:unset;}.base_14g19gh_bnp62xb__2fa012c5 .base_14g19gh_cendmch__2fa012c5{width:var(--plasma_private-note-content-width-with-offset);gap:var(--plasma-note-content-gap);}.base_14g19gh_bnp62xb__2fa012c5 .base_14g19gh_t1wkjxug__2fa012c5,.base_14g19gh_bnp62xb__2fa012c5 .base_14g19gh_te86upw__2fa012c5{width:100%;min-height:var(--plasma-note-title-line-height);font-family:var(--plasma-note-title-font-family);font-size:var(--plasma-note-title-font-size);font-style:var(--plasma-note-title-font-style);font-weight:var(--plasma-note-title-font-weight);-webkit-letter-spacing:var(--plasma-note-title-letter-spacing);-moz-letter-spacing:var(--plasma-note-title-letter-spacing);-ms-letter-spacing:var(--plasma-note-title-letter-spacing);letter-spacing:var(--plasma-note-title-letter-spacing);line-height:var(--plasma-note-title-line-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.base_14g19gh_bnp62xb__2fa012c5 .base_14g19gh_t1kp0wa7__2fa012c5,.base_14g19gh_bnp62xb__2fa012c5 .base_14g19gh_tf1lafs__2fa012c5{font-family:var(--plasma-note-text-font-family);font-size:var(--plasma-note-text-font-size);font-style:var(--plasma-note-text-font-style);font-weight:var(--plasma-note-text-font-weight);-webkit-letter-spacing:var(--plasma-note-text-letter-spacing);-moz-letter-spacing:var(--plasma-note-text-letter-spacing);-ms-letter-spacing:var(--plasma-note-text-letter-spacing);letter-spacing:var(--plasma-note-text-letter-spacing);line-height:var(--plasma-note-text-line-height);word-break:break-all;}
|
880
|
+
|
881
|
+
.Note_styles_178qpj9_b1eqam57__381585e2{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;box-sizing:border-box;}
|
882
|
+
.Note_styles_178qpj9_c1i6bkpn__381585e2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
|
883
|
+
.Note_styles_178qpj9_cendmch__381585e2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;box-sizing:border-box;}
|
884
|
+
|
885
|
+
.Note_styles_178qpj9_te86upw__381585e2{visibility:hidden;position:absolute;z-index:-9999;opacity:0;}
|
886
|
+
.Note_styles_178qpj9_t1kp0wa7__381585e2{display:block;position:relative;}
|
887
|
+
.Note_styles_178qpj9_tf1lafs__381585e2{visibility:hidden;position:absolute;z-index:-9999;opacity:0;top:0;left:0;}
|
package/cjs/index.js
CHANGED
@@ -216,6 +216,8 @@ var Tree = require('./components/Tree/Tree.js');
|
|
216
216
|
var Tree_tokens = require('./components/Tree/Tree.tokens.js');
|
217
217
|
var Rating = require('./components/Rating/Rating.js');
|
218
218
|
var Rating_tokens = require('./components/Rating/Rating.tokens.js');
|
219
|
+
var Note = require('./components/Note/Note.js');
|
220
|
+
var Note_tokens = require('./components/Note/Note.tokens.js');
|
219
221
|
|
220
222
|
|
221
223
|
|
@@ -625,4 +627,8 @@ exports.ratingConfig = Rating.ratingConfig;
|
|
625
627
|
exports.ratingRoot = Rating.ratingRoot;
|
626
628
|
exports.ratingClasses = Rating_tokens.classes;
|
627
629
|
exports.ratingTokens = Rating_tokens.tokens;
|
630
|
+
exports.noteConfig = Note.noteConfig;
|
631
|
+
exports.noteRoot = Note.noteRoot;
|
632
|
+
exports.noteClasses = Note_tokens.classes;
|
633
|
+
exports.noteTokens = Note_tokens.tokens;
|
628
634
|
//# sourceMappingURL=index.js.map
|
package/cjs/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
@@ -0,0 +1,135 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.noteRoot = exports.noteConfig = void 0;
|
8
|
+
var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
|
9
|
+
var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
|
10
|
+
var _utils = /*#__PURE__*/require("../../utils");
|
11
|
+
var _base = /*#__PURE__*/require("./variations/_view/base");
|
12
|
+
var _base2 = /*#__PURE__*/require("./variations/_size/base");
|
13
|
+
var _Note = /*#__PURE__*/require("./Note.styles");
|
14
|
+
var _Note2 = /*#__PURE__*/require("./Note.tokens");
|
15
|
+
var _excluded = ["className", "style", "title", "text", "contentBefore", "contentBeforeSizing", "size", "view", "stretch", "width", "height"];
|
16
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
17
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
18
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
19
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
20
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
21
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
22
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
23
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
24
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
25
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
26
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
27
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
28
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
29
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
30
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
31
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
32
|
+
var noteRoot = exports.noteRoot = function noteRoot(Root) {
|
33
|
+
return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRef) {
|
34
|
+
var className = _ref.className,
|
35
|
+
style = _ref.style,
|
36
|
+
title = _ref.title,
|
37
|
+
text = _ref.text,
|
38
|
+
contentBefore = _ref.contentBefore,
|
39
|
+
_ref$contentBeforeSiz = _ref.contentBeforeSizing,
|
40
|
+
contentBeforeSizing = _ref$contentBeforeSiz === void 0 ? 'fixed' : _ref$contentBeforeSiz,
|
41
|
+
size = _ref.size,
|
42
|
+
view = _ref.view,
|
43
|
+
stretch = _ref.stretch,
|
44
|
+
width = _ref.width,
|
45
|
+
height = _ref.height,
|
46
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
47
|
+
var _useState = (0, _react.useState)(text),
|
48
|
+
_useState2 = _slicedToArray(_useState, 2),
|
49
|
+
innerText = _useState2[0],
|
50
|
+
setInnerText = _useState2[1];
|
51
|
+
var _useState3 = (0, _react.useState)(contentBefore ? "var(".concat(_Note2.tokens.fixedContentBeforeWidth, ")") : '0'),
|
52
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
53
|
+
contentBeforeWidth = _useState4[0],
|
54
|
+
setContentBeforeWidth = _useState4[1];
|
55
|
+
var contentWrapperRef = (0, _react.useRef)(null);
|
56
|
+
var contentBeforeRef = (0, _react.useRef)(null);
|
57
|
+
var titleHelperRef = (0, _react.useRef)(null);
|
58
|
+
var textRenderHelperRef = (0, _react.useRef)(null);
|
59
|
+
var innerWidth = width ? (0, _utils.getSizeValueFromProp)(width) : 'fit-content';
|
60
|
+
var innerHeight = height ? (0, _utils.getSizeValueFromProp)(height) : 'fit-content';
|
61
|
+
var contentGapToken = contentBeforeSizing === 'scalable' ? _Note2.tokens.gapScalable : _Note2.tokens.gap;
|
62
|
+
var contentWidthWithOffsetToken = contentBefore ? "calc(100% - ".concat(contentBeforeWidth, " - var(").concat(contentGapToken, "))") : '100%';
|
63
|
+
var setTruncatedText = function setTruncatedText() {
|
64
|
+
var _titleHelperRef$curre;
|
65
|
+
if (!_utils.canUseDOM || !text || !(contentWrapperRef !== null && contentWrapperRef !== void 0 && contentWrapperRef.current) || !(textRenderHelperRef !== null && textRenderHelperRef !== void 0 && textRenderHelperRef.current) || !width && !height) {
|
66
|
+
return;
|
67
|
+
}
|
68
|
+
var contentHeight = contentWrapperRef.current.offsetHeight;
|
69
|
+
var titleHeight = ((_titleHelperRef$curre = titleHelperRef.current) === null || _titleHelperRef$curre === void 0 ? void 0 : _titleHelperRef$curre.offsetHeight) || 0;
|
70
|
+
var contentGap = Number(window.getComputedStyle(contentWrapperRef.current).rowGap.replace('px', ''));
|
71
|
+
var textAvailableHeight = contentHeight - titleHeight - contentGap;
|
72
|
+
textRenderHelperRef.current.textContent = text;
|
73
|
+
if (textRenderHelperRef.current.offsetHeight <= textAvailableHeight) {
|
74
|
+
setInnerText(text);
|
75
|
+
return;
|
76
|
+
}
|
77
|
+
var fullText = "".concat(text.slice(0, -3), "...");
|
78
|
+
for (var i = text.length - 1; i >= 0; i -= 1) {
|
79
|
+
textRenderHelperRef.current.textContent = fullText;
|
80
|
+
if (textRenderHelperRef.current.offsetHeight <= textAvailableHeight) {
|
81
|
+
break;
|
82
|
+
}
|
83
|
+
fullText = "".concat(fullText.slice(0, i), "...");
|
84
|
+
}
|
85
|
+
setInnerText(fullText);
|
86
|
+
};
|
87
|
+
(0, _plasmaCore.useResizeObserver)(contentWrapperRef, setTruncatedText);
|
88
|
+
(0, _react.useLayoutEffect)(function () {
|
89
|
+
setTruncatedText();
|
90
|
+
}, [text, contentBefore, contentBeforeSizing, stretch]);
|
91
|
+
(0, _react.useEffect)(function () {
|
92
|
+
if (!(contentBeforeRef !== null && contentBeforeRef !== void 0 && contentBeforeRef.current)) {
|
93
|
+
return;
|
94
|
+
}
|
95
|
+
if (contentBeforeSizing === 'scalable') {
|
96
|
+
setContentBeforeWidth("".concat(contentBeforeRef.current.offsetWidth, "px"));
|
97
|
+
return;
|
98
|
+
}
|
99
|
+
setContentBeforeWidth("var(".concat(_Note2.tokens.fixedContentBeforeWidth, ")"));
|
100
|
+
}, [contentBefore, contentBeforeSizing]);
|
101
|
+
return /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
102
|
+
ref: outerRef,
|
103
|
+
className: (0, _utils.cx)(className, stretch && _Note2.classes.stretch, contentBeforeSizing === 'scalable' && _Note2.classes.contentAlignCenter),
|
104
|
+
view: view,
|
105
|
+
size: size,
|
106
|
+
style: _objectSpread(_objectSpread({}, style), {}, _defineProperty(_defineProperty(_defineProperty({}, _Note2.privateTokens.width, innerWidth), _Note2.privateTokens.height, innerHeight), _Note2.privateTokens.contentWidthWithOffset, contentWidthWithOffsetToken))
|
107
|
+
}, rest), contentBefore && /*#__PURE__*/_react["default"].createElement(_Note.ContentBefore, {
|
108
|
+
ref: contentBeforeRef
|
109
|
+
}, contentBefore), /*#__PURE__*/_react["default"].createElement(_Note.ContentWrapper, {
|
110
|
+
ref: contentWrapperRef
|
111
|
+
}, title && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Note.Title, null, title), /*#__PURE__*/_react["default"].createElement(_Note.TitleHelper, {
|
112
|
+
ref: titleHelperRef
|
113
|
+
}, "C")), innerText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Note.Text, null, innerText, /*#__PURE__*/_react["default"].createElement(_Note.TextHelper, {
|
114
|
+
ref: textRenderHelperRef
|
115
|
+
}, "C")))));
|
116
|
+
});
|
117
|
+
};
|
118
|
+
var noteConfig = exports.noteConfig = {
|
119
|
+
name: 'Note',
|
120
|
+
tag: 'div',
|
121
|
+
layout: noteRoot,
|
122
|
+
base: _Note.base,
|
123
|
+
variations: {
|
124
|
+
view: {
|
125
|
+
css: _base.base
|
126
|
+
},
|
127
|
+
size: {
|
128
|
+
css: _base2.base
|
129
|
+
}
|
130
|
+
},
|
131
|
+
defaults: {
|
132
|
+
view: 'default',
|
133
|
+
size: 'm'
|
134
|
+
}
|
135
|
+
};
|