@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
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.popupRoot = exports.popupConfig = exports.handlePosition = void 0;
|
8
8
|
var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
|
9
|
-
var _reactDom = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react-dom"));
|
10
9
|
var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
|
11
10
|
var _utils = /*#__PURE__*/require("../../utils");
|
12
11
|
var _Portal = /*#__PURE__*/require("../Portal");
|
@@ -14,9 +13,7 @@ var _PopupContext = /*#__PURE__*/require("./PopupContext");
|
|
14
13
|
var _PopupRoot = /*#__PURE__*/require("./PopupRoot");
|
15
14
|
var _hooks = /*#__PURE__*/require("./hooks");
|
16
15
|
var _Popup = /*#__PURE__*/require("./Popup.tokens");
|
17
|
-
var _Popup2 = /*#__PURE__*/require("./Popup.styles");
|
18
16
|
var _excluded = ["id", "isOpen", "opened", "placement", "offset", "frame", "children", "overlay", "role", "zIndex", "popupInfo", "withAnimation", "className"];
|
19
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
20
17
|
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); }
|
21
18
|
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; }
|
22
19
|
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); }
|
@@ -51,8 +48,8 @@ var handlePosition = exports.handlePosition = function handlePosition(placement,
|
|
51
48
|
var bottom;
|
52
49
|
var transform;
|
53
50
|
var placements = placement.split('-');
|
54
|
-
placements.forEach(function (
|
55
|
-
switch (
|
51
|
+
placements.forEach(function (placement) {
|
52
|
+
switch (placement) {
|
56
53
|
case 'left':
|
57
54
|
left = x;
|
58
55
|
break;
|
@@ -85,139 +82,9 @@ var handlePosition = exports.handlePosition = function handlePosition(placement,
|
|
85
82
|
transform: transform
|
86
83
|
};
|
87
84
|
};
|
88
|
-
/*
|
89
|
-
const getPortalParent = (frame: 'document' | string | React.RefObject<HTMLElement>, portalRef) => {
|
90
|
-
if (typeof frame !== 'string' && frame && frame.current) {
|
91
|
-
portalRef.current = frame.current;
|
92
|
-
return;
|
93
|
-
}
|
94
|
-
|
95
|
-
if (typeof frame === 'string' && frame !== 'document') {
|
96
|
-
const element = document.getElementById(frame);
|
97
|
-
if (element) {
|
98
|
-
const portal = document.createElement('div');
|
99
|
-
portal.className = 'frame-portal';
|
100
|
-
portal.style.position = 'relative';
|
101
|
-
portal.style.width = '0';
|
102
|
-
|
103
|
-
element.appendChild(portal);
|
104
|
-
portalRef.current = portal;
|
105
|
-
|
106
|
-
return;
|
107
|
-
//
|
108
|
-
// const portal = document?.querySelector('.frame-portal');
|
109
|
-
// if (!portal) {
|
110
|
-
// portal = document.createElement('div');
|
111
|
-
// document.getElementById(frame)?.appendChild(portal);
|
112
|
-
// }
|
113
|
-
// return portal;
|
114
|
-
}
|
115
|
-
}
|
116
|
-
|
117
|
-
const portal = document.getElementById(POPUP_PORTAL_ID);
|
118
|
-
|
119
|
-
if (!portal) {
|
120
|
-
ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
121
|
-
}
|
122
|
-
|
123
|
-
portalRef.current = portal;
|
124
|
-
|
125
|
-
let portal;
|
126
|
-
|
127
|
-
const hasFrame = typeof frame !== 'string' && frame && frame.current;
|
128
|
-
if (hasFrame) {
|
129
|
-
portal = frame.current;
|
130
|
-
} else {
|
131
|
-
// ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
132
|
-
|
133
|
-
portal = document.getElementById(POPUP_PORTAL_ID);
|
134
|
-
|
135
|
-
if (!portal) {
|
136
|
-
if (typeof frame === 'string' && frame !== 'document') {
|
137
|
-
portal = document.createElement('div');
|
138
|
-
document.getElementById(frame)?.appendChild(portal);
|
139
|
-
} else {
|
140
|
-
portal.className('frame-portal');
|
141
|
-
document.body.appendChild(portal);
|
142
|
-
// ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
143
|
-
}
|
144
|
-
}
|
145
|
-
}
|
146
|
-
|
147
|
-
};
|
148
|
-
|
149
|
-
const usePortalContainer = (frame: 'document' | string | React.RefObject<HTMLElement>) => {
|
150
|
-
const portalRef = useRef<HTMLDivElement | null>(null);
|
151
|
-
|
152
|
-
if (typeof frame !== 'string' && frame && frame.current) {
|
153
|
-
return frame.current;
|
154
|
-
}
|
155
|
-
|
156
|
-
if (typeof frame === 'string' && frame !== 'document') {
|
157
|
-
const element = document.getElementById(frame);
|
158
|
-
|
159
|
-
const portal = document?.querySelector('.frame-portal');
|
160
|
-
|
161
|
-
if (portal) {
|
162
|
-
return portal;
|
163
|
-
}
|
164
|
-
|
165
|
-
if (element) {
|
166
|
-
const portal = document.createElement('div');
|
167
|
-
portal.className = 'frame-portal';
|
168
|
-
portal.style.position = 'relative';
|
169
|
-
// portal.style.width = '0';
|
170
|
-
|
171
|
-
element.appendChild(portal);
|
172
|
-
return portal;
|
173
|
-
//
|
174
|
-
// const portal = document?.querySelector('.frame-portal');
|
175
|
-
// if (!portal) {
|
176
|
-
// portal = document.createElement('div');
|
177
|
-
// document.getElementById(frame)?.appendChild(portal);
|
178
|
-
// }
|
179
|
-
// return portal;
|
180
|
-
}
|
181
|
-
}
|
182
|
-
|
183
|
-
const portal = document.getElementById(POPUP_PORTAL_ID);
|
184
|
-
|
185
|
-
if (!portal) {
|
186
|
-
const res = ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
187
|
-
|
188
|
-
console.log('!!! res', res);
|
189
|
-
}
|
190
|
-
|
191
|
-
console.log('!!!! portalRef.current', portalRef.current, document.getElementById(POPUP_PORTAL_ID));
|
192
|
-
return portalRef.current;
|
193
|
-
|
194
|
-
let portal;
|
195
|
-
|
196
|
-
const hasFrame = typeof frame !== 'string' && frame && frame.current;
|
197
|
-
if (hasFrame) {
|
198
|
-
portal = frame.current;
|
199
|
-
} else {
|
200
|
-
// ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
201
|
-
|
202
|
-
portal = document.getElementById(POPUP_PORTAL_ID);
|
203
|
-
|
204
|
-
if (!portal) {
|
205
|
-
if (typeof frame === 'string' && frame !== 'document') {
|
206
|
-
portal = document.createElement('div');
|
207
|
-
document.getElementById(frame)?.appendChild(portal);
|
208
|
-
} else {
|
209
|
-
portal.className('frame-portal');
|
210
|
-
document.body.appendChild(portal);
|
211
|
-
// ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
|
212
|
-
}
|
213
|
-
}
|
214
|
-
}
|
215
|
-
|
216
|
-
};
|
217
|
-
*/
|
218
85
|
|
219
86
|
/**
|
220
|
-
* Базовый
|
87
|
+
* Базовый копмонент Popup.
|
221
88
|
*/
|
222
89
|
var popupRoot = exports.popupRoot = function popupRoot(Root) {
|
223
90
|
return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRootRef) {
|
@@ -253,16 +120,47 @@ var popupRoot = exports.popupRoot = function popupRoot(Root) {
|
|
253
120
|
isVisible = _usePopup.isVisible,
|
254
121
|
animationInfo = _usePopup.animationInfo,
|
255
122
|
setVisible = _usePopup.setVisible;
|
256
|
-
|
257
|
-
// const container = usePortalContainer(frame);
|
258
123
|
var portalRef = (0, _react.useRef)(null);
|
259
124
|
var contentRef = (0, _react.useRef)(null);
|
260
125
|
var innerRef = (0, _plasmaCore.useForkRef)(contentRef, outerRootRef);
|
126
|
+
var _useState = (0, _react.useState)(false),
|
127
|
+
_useState2 = _slicedToArray(_useState, 2),
|
128
|
+
forceRender = _useState2[1];
|
129
|
+
(0, _react.useEffect)(function () {
|
130
|
+
var portal = document.getElementById(_PopupContext.POPUP_PORTAL_ID);
|
131
|
+
if (typeof frame !== 'string' && frame && frame.current) {
|
132
|
+
portal = frame.current;
|
133
|
+
}
|
134
|
+
if (!portal) {
|
135
|
+
portal = document.createElement('div');
|
136
|
+
portal.setAttribute('id', _PopupContext.POPUP_PORTAL_ID);
|
137
|
+
/**
|
138
|
+
* Нужно для того, чтобы во фрейме не происходило скачков контента
|
139
|
+
* при анимации через transform, если есть элемент с шириной/высотой в 100% (Overlay)
|
140
|
+
*/
|
141
|
+
portal.style.width = '0';
|
142
|
+
if (typeof frame === 'string' && frame !== 'document') {
|
143
|
+
var _document$getElementB;
|
144
|
+
(_document$getElementB = document.getElementById(frame)) === null || _document$getElementB === void 0 || _document$getElementB.appendChild(portal);
|
145
|
+
} else {
|
146
|
+
document.body.appendChild(portal);
|
147
|
+
}
|
148
|
+
}
|
149
|
+
portalRef.current = portal;
|
150
|
+
|
151
|
+
/**
|
152
|
+
* Изменение стейта нужно для того, чтобы Popup
|
153
|
+
* отобразился после записи DOM элемента в portalRef.current
|
154
|
+
*/
|
155
|
+
forceRender(true);
|
156
|
+
}, []);
|
261
157
|
if (!isVisible && !innerIsOpen) {
|
262
158
|
return null;
|
263
159
|
}
|
264
160
|
var cls = (0, _utils.cx)(className, animationInfo !== null && animationInfo !== void 0 && animationInfo.endAnimation ? _Popup.classes.endAnimation : '', animationInfo !== null && animationInfo !== void 0 && animationInfo.endTransition ? _Popup.classes.endTransition : '');
|
265
|
-
|
161
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, portalRef.current && /*#__PURE__*/_react["default"].createElement(_Portal.Portal, {
|
162
|
+
container: portalRef.current
|
163
|
+
}, /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
266
164
|
className: cls
|
267
165
|
}, rest), overlay, /*#__PURE__*/_react["default"].createElement(_PopupRoot.PopupRoot, {
|
268
166
|
id: innerId,
|
@@ -272,27 +170,7 @@ var popupRoot = exports.popupRoot = function popupRoot(Root) {
|
|
272
170
|
zIndex: zIndex,
|
273
171
|
animationInfo: animationInfo,
|
274
172
|
setVisible: setVisible
|
275
|
-
}, children));
|
276
|
-
if (typeof frame !== 'string' && frame && frame.current) {
|
277
|
-
return /*#__PURE__*/_react["default"].createElement(_Portal.Portal, {
|
278
|
-
container: frame.current
|
279
|
-
}, rootNode);
|
280
|
-
}
|
281
|
-
var withFrameId = typeof frame === 'string' && frame !== 'document';
|
282
|
-
var containerElement = withFrameId && document.getElementById(frame);
|
283
|
-
if (containerElement) {
|
284
|
-
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(_Popup2.StyledPortalContainer, {
|
285
|
-
ref: portalRef
|
286
|
-
}, portalRef.current && /*#__PURE__*/_react["default"].createElement(_Portal.Portal, {
|
287
|
-
container: portalRef.current
|
288
|
-
}, rootNode)), containerElement));
|
289
|
-
}
|
290
|
-
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(_Popup2.StyledPortal, {
|
291
|
-
id: _PopupContext.POPUP_PORTAL_ID,
|
292
|
-
ref: portalRef
|
293
|
-
}, portalRef.current && /*#__PURE__*/_react["default"].createElement(_Portal.Portal, {
|
294
|
-
container: portalRef.current
|
295
|
-
}, rootNode)), document.body));
|
173
|
+
}, children))));
|
296
174
|
});
|
297
175
|
};
|
298
176
|
var popupConfig = exports.popupConfig = {
|
@@ -3,21 +3,18 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
6
|
+
exports.StyledPortal = exports.PopupView = exports.PopupRootContainer = void 0;
|
7
7
|
var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
|
8
8
|
var _utils = /*#__PURE__*/require("./utils");
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
10
10
|
var StyledPortal = exports.StyledPortal = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
11
11
|
componentId: "plasma-new-hope__sc-rkhnjn-0"
|
12
|
-
})(["
|
13
|
-
var StyledPortalContainer = exports.StyledPortalContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
14
|
-
componentId: "plasma-new-hope__sc-rkhnjn-1"
|
15
|
-
})(["width:0;"]);
|
12
|
+
})([""]);
|
16
13
|
var PopupView = exports.PopupView = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
17
|
-
componentId: "plasma-new-hope__sc-rkhnjn-
|
14
|
+
componentId: "plasma-new-hope__sc-rkhnjn-1"
|
18
15
|
})(["position:relative;max-width:100%;pointer-events:all;"]);
|
19
16
|
var PopupRootContainer = exports.PopupRootContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
20
|
-
componentId: "plasma-new-hope__sc-rkhnjn-
|
17
|
+
componentId: "plasma-new-hope__sc-rkhnjn-2"
|
21
18
|
})(["position:absolute;z-index:", ";left:", ";right:", ";top:", ";bottom:", ";transform:", ";"], function (_ref) {
|
22
19
|
var zIndex = _ref.zIndex;
|
23
20
|
return zIndex || _utils.DEFAULT_Z_INDEX;
|
@@ -23,11 +23,9 @@ var POPUP_PORTAL_ID = exports.POPUP_PORTAL_ID = 'plasma-popup-root';
|
|
23
23
|
var items = [];
|
24
24
|
var PopupContext = /*#__PURE__*/(0, _react.createContext)({
|
25
25
|
items: items,
|
26
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
27
26
|
register: function register(_info) {
|
28
27
|
throw new Error('Function not implemented. Add PopupProvider');
|
29
28
|
},
|
30
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
31
29
|
unregister: function unregister(_id) {
|
32
30
|
throw new Error('Function not implemented. Add PopupProvider');
|
33
31
|
}
|
@@ -38,7 +36,6 @@ var usePopupContext = exports.usePopupContext = function usePopupContext() {
|
|
38
36
|
var PopupProvider = exports.PopupProvider = function PopupProvider(_ref) {
|
39
37
|
var children = _ref.children;
|
40
38
|
var prevBodyOverflowY = (0, _react.useRef)(typeof document !== 'undefined' ? document.body.style.overflowY : '');
|
41
|
-
// eslint-disable-next-line no-shadow
|
42
39
|
var _useState = (0, _react.useState)([]),
|
43
40
|
_useState2 = _slicedToArray(_useState, 2),
|
44
41
|
items = _useState2[0],
|
@@ -18,7 +18,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
18
18
|
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; }
|
19
19
|
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; } }
|
20
20
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
21
|
-
// Хук для
|
21
|
+
// Хук для поключения анимации
|
22
22
|
var usePopupAnimation = function usePopupAnimation() {
|
23
23
|
var _useState = (0, _react.useState)(false),
|
24
24
|
_useState2 = _slicedToArray(_useState, 2),
|
@@ -126,7 +126,7 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
|
|
126
126
|
_useState6 = _slicedToArray(_useState5, 2),
|
127
127
|
uncontrolledValue = _useState6[0],
|
128
128
|
setUncontrolledValue = _useState6[1];
|
129
|
-
var outerRef =
|
129
|
+
var outerRef = /*#__PURE__*/(0, _react.createRef)();
|
130
130
|
var innerOptional = required ? false : optional;
|
131
131
|
var hasHelper = Boolean(leftHelper || rightHelper || helperText);
|
132
132
|
var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
|
@@ -157,6 +157,7 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
|
|
157
157
|
if (value === undefined) {
|
158
158
|
setUncontrolledValue(event === null || event === void 0 ? void 0 : event.target.value);
|
159
159
|
}
|
160
|
+
console.log(event);
|
160
161
|
onChange === null || onChange === void 0 || onChange(event);
|
161
162
|
}, [value, onChange]);
|
162
163
|
var dynamicLabelClasses = getDynamicLabelClasses(_objectSpread({
|
@@ -198,7 +199,7 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
|
|
198
199
|
hasContentRight: Boolean(contentRight),
|
199
200
|
hasHelper: hasHelper,
|
200
201
|
applyCustomWidth: applyCustomWidth,
|
201
|
-
ref: outerRef,
|
202
|
+
ref: (0, _utils.mergeRefs)(outerRef, innerRef),
|
202
203
|
disabled: disabled,
|
203
204
|
height: autoResize ? minAuto : height,
|
204
205
|
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
|
+
};
|
@@ -12,6 +12,8 @@ var _exportNames = {
|
|
12
12
|
IS_REACT_18: true,
|
13
13
|
safeUseId: true,
|
14
14
|
isNumber: true,
|
15
|
+
mergeRefs: true,
|
16
|
+
setRefList: true,
|
15
17
|
isEmpty: true
|
16
18
|
};
|
17
19
|
Object.defineProperty(exports, "IS_REACT_18", {
|
@@ -51,17 +53,30 @@ Object.defineProperty(exports, "isNumber", {
|
|
51
53
|
return _isNumber.isNumber;
|
52
54
|
}
|
53
55
|
});
|
56
|
+
Object.defineProperty(exports, "mergeRefs", {
|
57
|
+
enumerable: true,
|
58
|
+
get: function get() {
|
59
|
+
return _setRefList.mergeRefs;
|
60
|
+
}
|
61
|
+
});
|
54
62
|
Object.defineProperty(exports, "safeUseId", {
|
55
63
|
enumerable: true,
|
56
64
|
get: function get() {
|
57
65
|
return _react.safeUseId;
|
58
66
|
}
|
59
67
|
});
|
68
|
+
Object.defineProperty(exports, "setRefList", {
|
69
|
+
enumerable: true,
|
70
|
+
get: function get() {
|
71
|
+
return _setRefList.setRefList;
|
72
|
+
}
|
73
|
+
});
|
60
74
|
var _canUseDOM = /*#__PURE__*/require("./canUseDOM");
|
61
75
|
var _extractTextFrom = /*#__PURE__*/require("./extractTextFrom");
|
62
76
|
var _getSizeValueFromProp = /*#__PURE__*/require("./getSizeValueFromProp");
|
63
77
|
var _react = /*#__PURE__*/require("./react");
|
64
78
|
var _isNumber = /*#__PURE__*/require("./isNumber");
|
79
|
+
var _setRefList = /*#__PURE__*/require("./setRefList");
|
65
80
|
var _isEmpty = /*#__PURE__*/require("./isEmpty");
|
66
81
|
var _getPopoverPlacement = /*#__PURE__*/require("./getPopoverPlacement");
|
67
82
|
Object.keys(_getPopoverPlacement).forEach(function (key) {
|
@@ -0,0 +1,27 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.mergeRefs = mergeRefs;
|
7
|
+
exports.setRefList = setRefList;
|
8
|
+
function mergeRefs() {
|
9
|
+
for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
|
10
|
+
refs[_key] = arguments[_key];
|
11
|
+
}
|
12
|
+
return function (val) {
|
13
|
+
setRefList.apply(void 0, [val].concat(refs));
|
14
|
+
};
|
15
|
+
}
|
16
|
+
function setRefList(val) {
|
17
|
+
for (var _len2 = arguments.length, refs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
18
|
+
refs[_key2 - 1] = arguments[_key2];
|
19
|
+
}
|
20
|
+
refs.forEach(function (ref) {
|
21
|
+
if (typeof ref === 'function') {
|
22
|
+
ref(val);
|
23
|
+
} else if (ref != null) {
|
24
|
+
ref.current = val;
|
25
|
+
}
|
26
|
+
});
|
27
|
+
}
|