@salutejs/plasma-new-hope 0.141.2-canary.1412.10789995138.0 → 0.142.0-canary.1421.10790809666.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Drawer/Drawer.css +3 -4
- package/cjs/components/Drawer/Drawer.js +1 -1
- package/cjs/components/Drawer/hooks/useDrawer.js +1 -1
- package/cjs/components/Modal/Modal.css +3 -4
- package/cjs/components/Modal/hooks/useModal.js +1 -1
- package/cjs/components/Notification/NotificationsProvider.css +3 -4
- package/cjs/components/Popup/Popup.css +3 -4
- package/cjs/components/Popup/Popup.js +38 -159
- package/cjs/components/Popup/Popup.js.map +1 -1
- package/cjs/components/Popup/Popup.styles.js +9 -21
- package/cjs/components/Popup/Popup.styles.js.map +1 -1
- package/cjs/components/Popup/Popup.styles_141jyqa.css +3 -0
- package/cjs/components/Popup/PopupContext.js +0 -3
- package/cjs/components/Popup/PopupContext.js.map +1 -1
- package/cjs/components/Popup/hooks/usePopup.js +1 -1
- package/cjs/components/Popup/hooks/usePopup.js.map +1 -1
- package/cjs/components/TextArea/TextArea.js +4 -2
- package/cjs/components/TextArea/TextArea.js.map +1 -1
- package/cjs/index.css +3 -4
- package/cjs/index.js +3 -0
- package/cjs/index.js.map +1 -1
- package/cjs/utils/index.js.map +1 -1
- package/cjs/utils/setRefList.js +28 -0
- package/cjs/utils/setRefList.js.map +1 -0
- package/emotion/cjs/components/Popup/Popup.js +38 -160
- package/emotion/cjs/components/Popup/Popup.styles.js +5 -25
- package/emotion/cjs/components/Popup/PopupContext.js +0 -3
- package/emotion/cjs/components/Popup/hooks/usePopup.js +1 -1
- package/emotion/cjs/components/TextArea/TextArea.js +4 -3
- package/emotion/cjs/examples/plasma_b2c/components/Form/Form.stories.tsx +68 -0
- package/emotion/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/Popup/Popup.stories.tsx +1 -1
- package/emotion/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -1
- package/emotion/cjs/examples/plasma_web/components/Popup/Popup.stories.tsx +1 -1
- package/emotion/cjs/utils/index.js +15 -0
- package/emotion/cjs/utils/setRefList.js +27 -0
- package/emotion/es/components/Popup/Popup.js +39 -160
- package/emotion/es/components/Popup/Popup.styles.js +4 -24
- package/emotion/es/components/Popup/PopupContext.js +0 -3
- package/emotion/es/components/Popup/hooks/usePopup.js +1 -1
- package/emotion/es/components/TextArea/TextArea.js +5 -4
- package/emotion/es/examples/plasma_b2c/components/Form/Form.stories.tsx +68 -0
- package/emotion/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -1
- package/emotion/es/examples/plasma_b2c/components/Popup/Popup.stories.tsx +1 -1
- package/emotion/es/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -1
- package/emotion/es/examples/plasma_web/components/Popup/Popup.stories.tsx +1 -1
- package/emotion/es/utils/index.js +1 -0
- package/emotion/es/utils/setRefList.js +20 -0
- package/es/components/Drawer/Drawer.css +3 -4
- package/es/components/Drawer/Drawer.js +1 -1
- package/es/components/Drawer/hooks/useDrawer.js +1 -1
- package/es/components/Modal/Modal.css +3 -4
- package/es/components/Modal/hooks/useModal.js +1 -1
- package/es/components/Notification/NotificationsProvider.css +3 -4
- package/es/components/Popup/Popup.css +3 -4
- package/es/components/Popup/Popup.js +40 -161
- package/es/components/Popup/Popup.js.map +1 -1
- package/es/components/Popup/Popup.styles.js +10 -20
- package/es/components/Popup/Popup.styles.js.map +1 -1
- package/es/components/Popup/Popup.styles_141jyqa.css +3 -0
- package/es/components/Popup/PopupContext.js +0 -3
- package/es/components/Popup/PopupContext.js.map +1 -1
- package/es/components/Popup/hooks/usePopup.js +1 -1
- package/es/components/Popup/hooks/usePopup.js.map +1 -1
- package/es/components/TextArea/TextArea.js +4 -2
- package/es/components/TextArea/TextArea.js.map +1 -1
- package/es/index.css +3 -4
- package/es/index.js +1 -0
- package/es/index.js.map +1 -1
- package/es/utils/index.js.map +1 -1
- package/es/utils/setRefList.js +23 -0
- package/es/utils/setRefList.js.map +1 -0
- package/package.json +4 -3
- package/styled-components/cjs/components/Popup/Popup.js +38 -160
- package/styled-components/cjs/components/Popup/Popup.styles.js +4 -7
- package/styled-components/cjs/components/Popup/PopupContext.js +0 -3
- package/styled-components/cjs/components/Popup/hooks/usePopup.js +1 -1
- package/styled-components/cjs/components/TextArea/TextArea.js +3 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Form/Form.stories.tsx +68 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Popup/Popup.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Popup/Popup.stories.tsx +1 -1
- package/styled-components/cjs/utils/index.js +15 -0
- package/styled-components/cjs/utils/setRefList.js +27 -0
- package/styled-components/es/components/Popup/Popup.js +39 -160
- package/styled-components/es/components/Popup/Popup.styles.js +3 -6
- package/styled-components/es/components/Popup/PopupContext.js +0 -3
- package/styled-components/es/components/Popup/hooks/usePopup.js +1 -1
- package/styled-components/es/components/TextArea/TextArea.js +4 -3
- package/styled-components/es/examples/plasma_b2c/components/Form/Form.stories.tsx +68 -0
- package/styled-components/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Popup/Popup.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_web/components/Modal/Modal.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_web/components/Popup/Popup.stories.tsx +1 -1
- package/styled-components/es/utils/index.js +1 -0
- package/styled-components/es/utils/setRefList.js +20 -0
- package/types/components/Popup/Popup.d.ts +1 -1
- package/types/components/Popup/Popup.d.ts.map +1 -1
- package/types/components/Popup/Popup.styles.d.ts +0 -1
- package/types/components/Popup/Popup.styles.d.ts.map +1 -1
- package/types/components/Popup/PopupContext.d.ts.map +1 -1
- package/types/utils/index.d.ts +1 -0
- package/types/utils/index.d.ts.map +1 -1
- package/types/utils/setRefList.d.ts +6 -0
- package/types/utils/setRefList.d.ts.map +1 -0
- package/cjs/components/Popup/Popup.styles_8h77g1.css +0 -4
- package/es/components/Popup/Popup.styles_8h77g1.css +0 -4
@@ -8,8 +8,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
8
8
|
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; }
|
9
9
|
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; } }
|
10
10
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
11
|
-
import React, { forwardRef, useRef } from 'react';
|
12
|
-
import ReactDOM from 'react-dom';
|
11
|
+
import React, { forwardRef, useEffect, useRef, useState } from 'react';
|
13
12
|
import { useForkRef, safeUseId } from '@salutejs/plasma-core';
|
14
13
|
import { cx } from '../../utils';
|
15
14
|
import { Portal } from '../Portal';
|
@@ -17,7 +16,6 @@ import { POPUP_PORTAL_ID } from './PopupContext';
|
|
17
16
|
import { PopupRoot } from './PopupRoot';
|
18
17
|
import { usePopup } from './hooks';
|
19
18
|
import { classes } from './Popup.tokens';
|
20
|
-
import { StyledPortal, StyledPortalContainer } from './Popup.styles';
|
21
19
|
export var handlePosition = function handlePosition(placement, offset) {
|
22
20
|
var x = '0rem';
|
23
21
|
var y = '0rem';
|
@@ -41,8 +39,8 @@ export var handlePosition = function handlePosition(placement, offset) {
|
|
41
39
|
var bottom;
|
42
40
|
var transform;
|
43
41
|
var placements = placement.split('-');
|
44
|
-
placements.forEach(function (
|
45
|
-
switch (
|
42
|
+
placements.forEach(function (placement) {
|
43
|
+
switch (placement) {
|
46
44
|
case 'left':
|
47
45
|
left = x;
|
48
46
|
break;
|
@@ -75,139 +73,9 @@ export var handlePosition = function handlePosition(placement, offset) {
|
|
75
73
|
transform: transform
|
76
74
|
};
|
77
75
|
};
|
78
|
-
/*
|
79
|
-
const getPortalParent = (frame: 'document' | string | React.RefObject<HTMLElement>, portalRef) => {
|
80
|
-
if (typeof frame !== 'string' && frame && frame.current) {
|
81
|
-
portalRef.current = frame.current;
|
82
|
-
return;
|
83
|
-
}
|
84
|
-
|
85
|
-
if (typeof frame === 'string' && frame !== 'document') {
|
86
|
-
const element = document.getElementById(frame);
|
87
|
-
if (element) {
|
88
|
-
const portal = document.createElement('div');
|
89
|
-
portal.className = 'frame-portal';
|
90
|
-
portal.style.position = 'relative';
|
91
|
-
portal.style.width = '0';
|
92
|
-
|
93
|
-
element.appendChild(portal);
|
94
|
-
portalRef.current = portal;
|
95
|
-
|
96
|
-
return;
|
97
|
-
//
|
98
|
-
// const portal = document?.querySelector('.frame-portal');
|
99
|
-
// if (!portal) {
|
100
|
-
// portal = document.createElement('div');
|
101
|
-
// document.getElementById(frame)?.appendChild(portal);
|
102
|
-
// }
|
103
|
-
// return portal;
|
104
|
-
}
|
105
|
-
}
|
106
|
-
|
107
|
-
const portal = document.getElementById(POPUP_PORTAL_ID);
|
108
|
-
|
109
|
-
if (!portal) {
|
110
|
-
ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
111
|
-
}
|
112
|
-
|
113
|
-
portalRef.current = portal;
|
114
|
-
|
115
|
-
let portal;
|
116
|
-
|
117
|
-
const hasFrame = typeof frame !== 'string' && frame && frame.current;
|
118
|
-
if (hasFrame) {
|
119
|
-
portal = frame.current;
|
120
|
-
} else {
|
121
|
-
// ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
122
|
-
|
123
|
-
portal = document.getElementById(POPUP_PORTAL_ID);
|
124
|
-
|
125
|
-
if (!portal) {
|
126
|
-
if (typeof frame === 'string' && frame !== 'document') {
|
127
|
-
portal = document.createElement('div');
|
128
|
-
document.getElementById(frame)?.appendChild(portal);
|
129
|
-
} else {
|
130
|
-
portal.className('frame-portal');
|
131
|
-
document.body.appendChild(portal);
|
132
|
-
// ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
133
|
-
}
|
134
|
-
}
|
135
|
-
}
|
136
|
-
|
137
|
-
};
|
138
|
-
|
139
|
-
const usePortalContainer = (frame: 'document' | string | React.RefObject<HTMLElement>) => {
|
140
|
-
const portalRef = useRef<HTMLDivElement | null>(null);
|
141
|
-
|
142
|
-
if (typeof frame !== 'string' && frame && frame.current) {
|
143
|
-
return frame.current;
|
144
|
-
}
|
145
|
-
|
146
|
-
if (typeof frame === 'string' && frame !== 'document') {
|
147
|
-
const element = document.getElementById(frame);
|
148
|
-
|
149
|
-
const portal = document?.querySelector('.frame-portal');
|
150
|
-
|
151
|
-
if (portal) {
|
152
|
-
return portal;
|
153
|
-
}
|
154
|
-
|
155
|
-
if (element) {
|
156
|
-
const portal = document.createElement('div');
|
157
|
-
portal.className = 'frame-portal';
|
158
|
-
portal.style.position = 'relative';
|
159
|
-
// portal.style.width = '0';
|
160
|
-
|
161
|
-
element.appendChild(portal);
|
162
|
-
return portal;
|
163
|
-
//
|
164
|
-
// const portal = document?.querySelector('.frame-portal');
|
165
|
-
// if (!portal) {
|
166
|
-
// portal = document.createElement('div');
|
167
|
-
// document.getElementById(frame)?.appendChild(portal);
|
168
|
-
// }
|
169
|
-
// return portal;
|
170
|
-
}
|
171
|
-
}
|
172
|
-
|
173
|
-
const portal = document.getElementById(POPUP_PORTAL_ID);
|
174
|
-
|
175
|
-
if (!portal) {
|
176
|
-
const res = ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
177
|
-
|
178
|
-
console.log('!!! res', res);
|
179
|
-
}
|
180
|
-
|
181
|
-
console.log('!!!! portalRef.current', portalRef.current, document.getElementById(POPUP_PORTAL_ID));
|
182
|
-
return portalRef.current;
|
183
|
-
|
184
|
-
let portal;
|
185
|
-
|
186
|
-
const hasFrame = typeof frame !== 'string' && frame && frame.current;
|
187
|
-
if (hasFrame) {
|
188
|
-
portal = frame.current;
|
189
|
-
} else {
|
190
|
-
// ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
191
|
-
|
192
|
-
portal = document.getElementById(POPUP_PORTAL_ID);
|
193
|
-
|
194
|
-
if (!portal) {
|
195
|
-
if (typeof frame === 'string' && frame !== 'document') {
|
196
|
-
portal = document.createElement('div');
|
197
|
-
document.getElementById(frame)?.appendChild(portal);
|
198
|
-
} else {
|
199
|
-
portal.className('frame-portal');
|
200
|
-
document.body.appendChild(portal);
|
201
|
-
// ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
202
|
-
}
|
203
|
-
}
|
204
|
-
}
|
205
|
-
|
206
|
-
};
|
207
|
-
*/
|
208
76
|
|
209
77
|
/**
|
210
|
-
* Базовый
|
78
|
+
* Базовый копмонент Popup.
|
211
79
|
*/
|
212
80
|
export var popupRoot = function popupRoot(Root) {
|
213
81
|
return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
|
@@ -243,16 +111,47 @@ export var popupRoot = function popupRoot(Root) {
|
|
243
111
|
isVisible = _usePopup.isVisible,
|
244
112
|
animationInfo = _usePopup.animationInfo,
|
245
113
|
setVisible = _usePopup.setVisible;
|
246
|
-
|
247
|
-
// const container = usePortalContainer(frame);
|
248
114
|
var portalRef = useRef(null);
|
249
115
|
var contentRef = useRef(null);
|
250
116
|
var innerRef = useForkRef(contentRef, outerRootRef);
|
117
|
+
var _useState = useState(false),
|
118
|
+
_useState2 = _slicedToArray(_useState, 2),
|
119
|
+
forceRender = _useState2[1];
|
120
|
+
useEffect(function () {
|
121
|
+
var portal = document.getElementById(POPUP_PORTAL_ID);
|
122
|
+
if (typeof frame !== 'string' && frame && frame.current) {
|
123
|
+
portal = frame.current;
|
124
|
+
}
|
125
|
+
if (!portal) {
|
126
|
+
portal = document.createElement('div');
|
127
|
+
portal.setAttribute('id', POPUP_PORTAL_ID);
|
128
|
+
/**
|
129
|
+
* Нужно для того, чтобы во фрейме не происходило скачков контента
|
130
|
+
* при анимации через transform, если есть элемент с шириной/высотой в 100% (Overlay)
|
131
|
+
*/
|
132
|
+
portal.style.width = '0';
|
133
|
+
if (typeof frame === 'string' && frame !== 'document') {
|
134
|
+
var _document$getElementB;
|
135
|
+
(_document$getElementB = document.getElementById(frame)) === null || _document$getElementB === void 0 || _document$getElementB.appendChild(portal);
|
136
|
+
} else {
|
137
|
+
document.body.appendChild(portal);
|
138
|
+
}
|
139
|
+
}
|
140
|
+
portalRef.current = portal;
|
141
|
+
|
142
|
+
/**
|
143
|
+
* Изменение стейта нужно для того, чтобы Popup
|
144
|
+
* отобразился после записи DOM элемента в portalRef.current
|
145
|
+
*/
|
146
|
+
forceRender(true);
|
147
|
+
}, []);
|
251
148
|
if (!isVisible && !innerIsOpen) {
|
252
149
|
return null;
|
253
150
|
}
|
254
151
|
var cls = cx(className, animationInfo !== null && animationInfo !== void 0 && animationInfo.endAnimation ? classes.endAnimation : '', animationInfo !== null && animationInfo !== void 0 && animationInfo.endTransition ? classes.endTransition : '');
|
255
|
-
|
152
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, portalRef.current && /*#__PURE__*/React.createElement(Portal, {
|
153
|
+
container: portalRef.current
|
154
|
+
}, /*#__PURE__*/React.createElement(Root, _extends({
|
256
155
|
className: cls
|
257
156
|
}, rest), overlay, /*#__PURE__*/React.createElement(PopupRoot, {
|
258
157
|
id: innerId,
|
@@ -262,27 +161,7 @@ export var popupRoot = function popupRoot(Root) {
|
|
262
161
|
zIndex: zIndex,
|
263
162
|
animationInfo: animationInfo,
|
264
163
|
setVisible: setVisible
|
265
|
-
}, children));
|
266
|
-
if (typeof frame !== 'string' && frame && frame.current) {
|
267
|
-
return /*#__PURE__*/React.createElement(Portal, {
|
268
|
-
container: frame.current
|
269
|
-
}, rootNode);
|
270
|
-
}
|
271
|
-
var withFrameId = typeof frame === 'string' && frame !== 'document';
|
272
|
-
var containerElement = withFrameId && document.getElementById(frame);
|
273
|
-
if (containerElement) {
|
274
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(StyledPortalContainer, {
|
275
|
-
ref: portalRef
|
276
|
-
}, portalRef.current && /*#__PURE__*/React.createElement(Portal, {
|
277
|
-
container: portalRef.current
|
278
|
-
}, rootNode)), containerElement));
|
279
|
-
}
|
280
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(StyledPortal, {
|
281
|
-
id: POPUP_PORTAL_ID,
|
282
|
-
ref: portalRef
|
283
|
-
}, portalRef.current && /*#__PURE__*/React.createElement(Portal, {
|
284
|
-
container: portalRef.current
|
285
|
-
}, rootNode)), document.body));
|
164
|
+
}, children))));
|
286
165
|
});
|
287
166
|
};
|
288
167
|
export var popupConfig = {
|
@@ -2,15 +2,12 @@ import styled from 'styled-components';
|
|
2
2
|
import { DEFAULT_Z_INDEX } from './utils';
|
3
3
|
export var StyledPortal = /*#__PURE__*/styled.div.withConfig({
|
4
4
|
componentId: "plasma-new-hope__sc-rkhnjn-0"
|
5
|
-
})(["
|
6
|
-
export var StyledPortalContainer = /*#__PURE__*/styled.div.withConfig({
|
7
|
-
componentId: "plasma-new-hope__sc-rkhnjn-1"
|
8
|
-
})(["width:0;"]);
|
5
|
+
})([""]);
|
9
6
|
export var PopupView = /*#__PURE__*/styled.div.withConfig({
|
10
|
-
componentId: "plasma-new-hope__sc-rkhnjn-
|
7
|
+
componentId: "plasma-new-hope__sc-rkhnjn-1"
|
11
8
|
})(["position:relative;max-width:100%;pointer-events:all;"]);
|
12
9
|
export var PopupRootContainer = /*#__PURE__*/styled.div.withConfig({
|
13
|
-
componentId: "plasma-new-hope__sc-rkhnjn-
|
10
|
+
componentId: "plasma-new-hope__sc-rkhnjn-2"
|
14
11
|
})(["position:absolute;z-index:", ";left:", ";right:", ";top:", ";bottom:", ";transform:", ";"], function (_ref) {
|
15
12
|
var zIndex = _ref.zIndex;
|
16
13
|
return zIndex || DEFAULT_Z_INDEX;
|
@@ -14,11 +14,9 @@ export var POPUP_PORTAL_ID = 'plasma-popup-root';
|
|
14
14
|
var items = [];
|
15
15
|
var PopupContext = /*#__PURE__*/createContext({
|
16
16
|
items: items,
|
17
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
18
17
|
register: function register(_info) {
|
19
18
|
throw new Error('Function not implemented. Add PopupProvider');
|
20
19
|
},
|
21
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
22
20
|
unregister: function unregister(_id) {
|
23
21
|
throw new Error('Function not implemented. Add PopupProvider');
|
24
22
|
}
|
@@ -29,7 +27,6 @@ export var usePopupContext = function usePopupContext() {
|
|
29
27
|
export var PopupProvider = function PopupProvider(_ref) {
|
30
28
|
var children = _ref.children;
|
31
29
|
var prevBodyOverflowY = useRef(typeof document !== 'undefined' ? document.body.style.overflowY : '');
|
32
|
-
// eslint-disable-next-line no-shadow
|
33
30
|
var _useState = useState([]),
|
34
31
|
_useState2 = _slicedToArray(_useState, 2),
|
35
32
|
items = _useState2[0],
|
@@ -13,7 +13,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
13
|
import { useEffect, useState } from 'react';
|
14
14
|
import { usePopupContext } from '../PopupContext';
|
15
15
|
|
16
|
-
// Хук для
|
16
|
+
// Хук для поключения анимации
|
17
17
|
var usePopupAnimation = function usePopupAnimation() {
|
18
18
|
var _useState = useState(false),
|
19
19
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -21,7 +21,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
21
21
|
import React, { forwardRef, useState, createRef, useCallback } from 'react';
|
22
22
|
import { css } from 'styled-components';
|
23
23
|
import { useResizeObserver } from '@salutejs/plasma-core';
|
24
|
-
import { cx } from '../../utils';
|
24
|
+
import { cx, mergeRefs } from '../../utils';
|
25
25
|
import { applyDynamicLabel } from './mixins';
|
26
26
|
import { useAutoResize, ROOT_FONT_SIZE } from './hooks';
|
27
27
|
import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer, StyledIndicator, StyledOptionalText } from './TextArea.styles';
|
@@ -118,7 +118,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
118
118
|
_useState6 = _slicedToArray(_useState5, 2),
|
119
119
|
uncontrolledValue = _useState6[0],
|
120
120
|
setUncontrolledValue = _useState6[1];
|
121
|
-
var outerRef =
|
121
|
+
var outerRef = /*#__PURE__*/createRef();
|
122
122
|
var innerOptional = required ? false : optional;
|
123
123
|
var hasHelper = Boolean(leftHelper || rightHelper || helperText);
|
124
124
|
var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
|
@@ -149,6 +149,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
149
149
|
if (value === undefined) {
|
150
150
|
setUncontrolledValue(event === null || event === void 0 ? void 0 : event.target.value);
|
151
151
|
}
|
152
|
+
console.log(event);
|
152
153
|
onChange === null || onChange === void 0 || onChange(event);
|
153
154
|
}, [value, onChange]);
|
154
155
|
var dynamicLabelClasses = getDynamicLabelClasses(_objectSpread({
|
@@ -190,7 +191,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
190
191
|
hasContentRight: Boolean(contentRight),
|
191
192
|
hasHelper: hasHelper,
|
192
193
|
applyCustomWidth: applyCustomWidth,
|
193
|
-
ref: outerRef,
|
194
|
+
ref: mergeRefs(outerRef, innerRef),
|
194
195
|
disabled: disabled,
|
195
196
|
height: autoResize ? minAuto : height,
|
196
197
|
width: width,
|
@@ -0,0 +1,68 @@
|
|
1
|
+
import { useForm } from 'react-hook-form';
|
2
|
+
import React from 'react';
|
3
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
4
|
+
|
5
|
+
import { WithTheme } from '../../../_helpers';
|
6
|
+
import { Button } from '../Button/Button';
|
7
|
+
import { TextField } from '../TextField/TextField';
|
8
|
+
import { TextArea } from '../TextArea/TextArea'; // TextArea.tsx 120 строка, не работает из-за некорректного ref
|
9
|
+
import { Checkbox } from '../Checkbox/Checkbox';
|
10
|
+
import { Switch } from '../Switch/Switch';
|
11
|
+
import { Radiobox } from '../Radiobox/Radiobox';
|
12
|
+
import { RadioGroup } from '../../../../components/Radiobox';
|
13
|
+
|
14
|
+
type StoryDropdownProps = {};
|
15
|
+
|
16
|
+
const langName = 'language';
|
17
|
+
const itemsRadiobox = [
|
18
|
+
{ langName, value: 'c', label: 'C', disabled: false },
|
19
|
+
{ langName, value: 'cpp', label: 'C++', disabled: false },
|
20
|
+
{ langName, value: 'assembly', label: 'Assembly', disabled: false },
|
21
|
+
];
|
22
|
+
|
23
|
+
const DefaultForm = () => {
|
24
|
+
const { register, handleSubmit } = useForm();
|
25
|
+
const onSubmit = (data) => {
|
26
|
+
console.log(data);
|
27
|
+
};
|
28
|
+
|
29
|
+
return (
|
30
|
+
<form onSubmit={handleSubmit(onSubmit)} style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
|
31
|
+
<TextField {...register('textfield')} placeholder="Textfield" required={false} />
|
32
|
+
<TextArea {...register('textarea')} autoResize placeholder="Textarea" />
|
33
|
+
<Checkbox {...register('checkbox')} label="Checkbox" />
|
34
|
+
<Switch {...register('switch')} label="Switch" labelPosition="after" />
|
35
|
+
<RadioGroup aria-labelledby="radiogroup-title-id">
|
36
|
+
<div id="radiogroup-title-id" style={{ margin: '1rem 0', fontWeight: '600' }}>
|
37
|
+
Выберите язык программирования для изучения.
|
38
|
+
</div>
|
39
|
+
{itemsRadiobox.map((item) => (
|
40
|
+
<Radiobox
|
41
|
+
key={item.value}
|
42
|
+
value={item.value}
|
43
|
+
label={item.label}
|
44
|
+
disabled={item.disabled}
|
45
|
+
{...register('radiobox')}
|
46
|
+
/>
|
47
|
+
))}
|
48
|
+
</RadioGroup>
|
49
|
+
<Button type="submit">Отправить</Button>
|
50
|
+
</form>
|
51
|
+
);
|
52
|
+
};
|
53
|
+
|
54
|
+
const meta: Meta<StoryDropdownProps> = {
|
55
|
+
title: 'plasma_b2c/Form',
|
56
|
+
decorators: [WithTheme],
|
57
|
+
component: DefaultForm,
|
58
|
+
};
|
59
|
+
|
60
|
+
export default meta;
|
61
|
+
|
62
|
+
const StoryNormal = () => {
|
63
|
+
return <DefaultForm />;
|
64
|
+
};
|
65
|
+
|
66
|
+
export const Default: StoryObj<StoryDropdownProps> = {
|
67
|
+
render: () => <StoryNormal />,
|
68
|
+
};
|
@@ -3,6 +3,7 @@ export { extractTextFrom } from './extractTextFrom';
|
|
3
3
|
export { getSizeValueFromProp } from './getSizeValueFromProp';
|
4
4
|
export { IS_REACT_18, safeUseId } from './react';
|
5
5
|
export { isNumber } from './isNumber';
|
6
|
+
export { mergeRefs, setRefList } from './setRefList';
|
6
7
|
export { isEmpty } from './isEmpty';
|
7
8
|
export * from './getPopoverPlacement';
|
8
9
|
export var cx = function cx() {
|
@@ -0,0 +1,20 @@
|
|
1
|
+
export function mergeRefs() {
|
2
|
+
for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
|
3
|
+
refs[_key] = arguments[_key];
|
4
|
+
}
|
5
|
+
return function (val) {
|
6
|
+
setRefList.apply(void 0, [val].concat(refs));
|
7
|
+
};
|
8
|
+
}
|
9
|
+
export function setRefList(val) {
|
10
|
+
for (var _len2 = arguments.length, refs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
11
|
+
refs[_key2 - 1] = arguments[_key2];
|
12
|
+
}
|
13
|
+
refs.forEach(function (ref) {
|
14
|
+
if (typeof ref === 'function') {
|
15
|
+
ref(val);
|
16
|
+
} else if (ref != null) {
|
17
|
+
ref.current = val;
|
18
|
+
}
|
19
|
+
});
|
20
|
+
}
|
@@ -3,7 +3,7 @@ import { RootProps } from '../../engines/types';
|
|
3
3
|
import type { PopupPlacement, PopupPositionType, PopupProps } from './Popup.types';
|
4
4
|
export declare const handlePosition: (placement: PopupPlacement, offset: [number, number] | [string, string]) => PopupPositionType;
|
5
5
|
/**
|
6
|
-
* Базовый
|
6
|
+
* Базовый копмонент Popup.
|
7
7
|
*/
|
8
8
|
export declare const popupRoot: (Root: RootProps<HTMLDivElement, PopupProps>) => React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<HTMLDivElement>>;
|
9
9
|
export declare const popupConfig: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
1
|
+
{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAIhD,OAAO,KAAK,EAAuB,cAAc,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAMxG,eAAO,MAAM,cAAc,cACZ,cAAc,UACjB,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,KAC5C,iBA8DF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,SAAU,UAAU,cAAc,EAAE,UAAU,CAAC,sFAyGhE,CAAC;AAEN,eAAO,MAAM,WAAW;;;mBA3GQ,UAAU,cAAc,EAAE,UAAU,CAAC;;;;CAkHpE,CAAC"}
|
@@ -1,7 +1,6 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import type { PopupRootContainerProps } from './Popup.types';
|
3
3
|
export declare const StyledPortal: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
4
|
-
export declare const StyledPortalContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
5
4
|
export declare const PopupView: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
|
6
5
|
export declare const PopupRootContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & PopupRootContainerProps>;
|
7
6
|
//# sourceMappingURL=Popup.styles.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Popup.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/Popup.styles.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,eAAO,MAAM,YAAY,
|
1
|
+
{"version":3,"file":"Popup.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/Popup.styles.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,eAAO,MAAM,YAAY,qKAAe,CAAC;AAEzC,eAAO,MAAM,SAAS,qKAIrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,sKAQ9B,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"PopupContext.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/PopupContext.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAkD,EAAE,EAAE,iBAAiB,EAAU,MAAM,OAAO,CAAC;AAI7G,OAAO,KAAK,EAAE,gBAAgB,EAAa,MAAM,eAAe,CAAC;AAEjE,eAAO,MAAM,eAAe,sBAAsB,CAAC;
|
1
|
+
{"version":3,"file":"PopupContext.d.ts","sourceRoot":"","sources":["../../../src/components/Popup/PopupContext.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAkD,EAAE,EAAE,iBAAiB,EAAU,MAAM,OAAO,CAAC;AAI7G,OAAO,KAAK,EAAE,gBAAgB,EAAa,MAAM,eAAe,CAAC;AAEjE,eAAO,MAAM,eAAe,sBAAsB,CAAC;AAcnD,eAAO,MAAM,eAAe,wBAAiC,CAAC;AAE9D,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAmD/C,CAAC"}
|
package/types/utils/index.d.ts
CHANGED
@@ -4,6 +4,7 @@ export { extractTextFrom } from './extractTextFrom';
|
|
4
4
|
export { getSizeValueFromProp } from './getSizeValueFromProp';
|
5
5
|
export { IS_REACT_18, safeUseId } from './react';
|
6
6
|
export { isNumber } from './isNumber';
|
7
|
+
export { mergeRefs, setRefList } from './setRefList';
|
7
8
|
export { isEmpty } from './isEmpty';
|
8
9
|
export * from './getPopoverPlacement';
|
9
10
|
export declare const cx: (...classes: (string | undefined)[]) => string;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,cAAc,uBAAuB,CAAC;AAEtC,eAAO,MAAM,EAAE,eAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,WAAuD,CAAC;AAE7G,eAAO,MAAM,eAAe,MAAO,oBAAoB,WAAW,MAAM,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC,KAAG,MAQ1G,CAAC"}
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,cAAc,uBAAuB,CAAC;AAEtC,eAAO,MAAM,EAAE,eAAgB,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,WAAuD,CAAC;AAE7G,eAAO,MAAM,eAAe,MAAO,oBAAoB,WAAW,MAAM,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC,KAAG,MAQ1G,CAAC"}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
import type { MutableRefObject, RefCallback } from 'react';
|
2
|
+
declare type MutableRefList<T> = Array<RefCallback<T> | MutableRefObject<T> | undefined | null>;
|
3
|
+
export declare function mergeRefs<T>(...refs: MutableRefList<T>): RefCallback<T>;
|
4
|
+
export declare function setRefList<T>(val: T, ...refs: MutableRefList<T>): void;
|
5
|
+
export {};
|
6
|
+
//# sourceMappingURL=setRefList.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"setRefList.d.ts","sourceRoot":"","sources":["../../src/utils/setRefList.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3D,aAAK,cAAc,CAAC,CAAC,IAAI,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,CAAC;AAExF,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAIvE;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,IAAI,CAQtE"}
|
@@ -1,4 +0,0 @@
|
|
1
|
-
.svkpf6n{position:fixed;top:0;left:0;right:0;bottom:0;}.svkpf6n:empty{width:0;pointer-events:none;}.svkpf6n:not(:empty){width:auto;pointer-events:auto;}
|
2
|
-
.s1cjo3us{width:0;}
|
3
|
-
.p5u7tqa{position:relative;max-width:100%;pointer-events:all;}
|
4
|
-
.p1f40oul{position:absolute;z-index:var(--p1f40oul-0);left:var(--p1f40oul-1);right:var(--p1f40oul-2);top:var(--p1f40oul-3);bottom:var(--p1f40oul-4);-webkit-transform:var(--p1f40oul-5);-ms-transform:var(--p1f40oul-5);transform:var(--p1f40oul-5);}
|
@@ -1,4 +0,0 @@
|
|
1
|
-
.svkpf6n{position:fixed;top:0;left:0;right:0;bottom:0;}.svkpf6n:empty{width:0;pointer-events:none;}.svkpf6n:not(:empty){width:auto;pointer-events:auto;}
|
2
|
-
.s1cjo3us{width:0;}
|
3
|
-
.p5u7tqa{position:relative;max-width:100%;pointer-events:all;}
|
4
|
-
.p1f40oul{position:absolute;z-index:var(--p1f40oul-0);left:var(--p1f40oul-1);right:var(--p1f40oul-2);top:var(--p1f40oul-3);bottom:var(--p1f40oul-4);-webkit-transform:var(--p1f40oul-5);-ms-transform:var(--p1f40oul-5);transform:var(--p1f40oul-5);}
|