@splunk/react-ui 4.20.0 → 4.21.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Accordion.js +425 -441
- package/Anchor.js +147 -193
- package/Animation.js +142 -166
- package/AnimationToggle.js +197 -253
- package/Box.js +145 -194
- package/Breadcrumbs.js +288 -298
- package/Button.js +488 -613
- package/ButtonGroup.js +160 -212
- package/ButtonSimple.js +543 -562
- package/CHANGELOG.md +26 -0
- package/Calendar.js +1107 -1195
- package/Card.js +771 -746
- package/CardLayout.js +205 -223
- package/Chip.js +509 -612
- package/Clickable.js +416 -472
- package/CloseButton.js +165 -250
- package/Code.js +1808 -2172
- package/Code.js.LICENSE.txt +8 -0
- package/CollapsiblePanel.js +586 -675
- package/Color.js +1066 -1297
- package/ColumnLayout.js +402 -465
- package/ComboBox.js +892 -969
- package/Concertina.js +998 -963
- package/ControlGroup.js +687 -718
- package/Date.js +567 -697
- package/DefinitionList.js +308 -310
- package/Divider.js +149 -194
- package/Dropdown.js +459 -558
- package/DualListbox.js +1480 -1735
- package/EventListener.js +94 -165
- package/File.js +1051 -1173
- package/FormRows.js +885 -880
- package/Heading.js +216 -263
- package/Image.js +446 -558
- package/JSONTree.js +690 -699
- package/Layer.js +442 -582
- package/Link.js +336 -361
- package/List.js +213 -237
- package/Markdown.js +510 -612
- package/Menu.js +1109 -1331
- package/Message.js +474 -629
- package/MessageBar.js +387 -561
- package/Modal.js +810 -798
- package/ModalLayer.js +326 -343
- package/Monogram.js +308 -368
- package/Multiselect.js +3558 -3998
- package/Number.js +729 -843
- package/Paginator.js +510 -615
- package/Paragraph.js +145 -188
- package/Popover.js +1470 -1693
- package/Progress.js +301 -362
- package/RadioBar.js +610 -651
- package/RadioList.js +483 -544
- package/Resize.js +530 -623
- package/ResultsMenu.js +494 -597
- package/ScreenReaderContent.js +142 -187
- package/Scroll.js +595 -598
- package/ScrollContainerContext.js +197 -278
- package/Search.js +745 -817
- package/Select.js +2441 -2746
- package/SidePanel.js +390 -392
- package/Slider.js +668 -825
- package/SlidingPanels.js +639 -645
- package/SplitButton.js +464 -499
- package/StaticContent.js +161 -217
- package/StepBar.js +386 -466
- package/Switch.js +710 -764
- package/TabBar.js +724 -815
- package/TabLayout.js +406 -438
- package/Table.js +4842 -5121
- package/Text.js +1169 -1351
- package/TextArea.js +1097 -1307
- package/Tooltip.js +624 -721
- package/TransitionOpen.js +489 -546
- package/Typography.js +176 -229
- package/WaitSpinner.js +230 -298
- package/package.json +14 -15
- package/stubs-splunkui.d.ts +4 -1
- package/types/src/ComboBox/Option.d.ts +1 -1
- package/types/src/Concertina/Concertina.d.ts +4 -0
- package/types/src/JSONTree/JSONTreeContext.d.ts +7 -0
- package/types/src/JSONTree/TreeNode.d.ts +5 -0
- package/types/src/Link/Link.d.ts +7 -3
- package/types/src/Link/docs/examples/NewWindow.d.ts +2 -0
- package/types/src/Markdown/Markdown.d.ts +1 -1
- package/types/src/Markdown/renderers/MarkdownHeading.d.ts +1 -1
- package/types/src/Menu/Item.d.ts +1 -1
- package/types/src/Menu/Menu.d.ts +1 -0
- package/types/src/MessageBar/docs/examples/WithActions.d.ts +2 -0
- package/types/src/Multiselect/Option.d.ts +1 -1
- package/types/src/Search/Option.d.ts +1 -1
- package/types/src/Select/Option.d.ts +1 -1
- package/types/src/Select/OptionBase.d.ts +1 -1
- package/types/src/fixtures/FetchOptions.d.ts +2 -8
- package/useForceUpdate.js +112 -146
- package/useKeyPress.js +74 -128
- package/usePrevious.js +65 -129
- package/useRovingFocus.js +122 -218
- package/types/src/Link/docs/examples/NewTab.d.ts +0 -2
- /package/types/src/Table/docs/examples/{DockedHeader.d.ts → DockedHeaderScrollbar.d.ts} +0 -0
- /package/types/src/Table/docs/examples/prisma/{DockedHeader.d.ts → DockedHeaderScrollbar.d.ts} +0 -0
package/Resize.js
CHANGED
|
@@ -1,634 +1,541 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/******/
|
|
4
|
-
/******/
|
|
5
|
-
/******/
|
|
6
|
-
/******/
|
|
7
|
-
|
|
8
|
-
/******/
|
|
9
|
-
/******/
|
|
10
|
-
/******/
|
|
11
|
-
/******/
|
|
12
|
-
/******/
|
|
13
|
-
/******/
|
|
14
|
-
/******/
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
/******/
|
|
20
|
-
/******/
|
|
21
|
-
/******/
|
|
22
|
-
/******/
|
|
23
|
-
/******/
|
|
24
|
-
/******/
|
|
25
|
-
/******/
|
|
26
|
-
/******/
|
|
27
|
-
/******/
|
|
28
|
-
/******/
|
|
29
|
-
/******/
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
/******/
|
|
34
|
-
/******/
|
|
35
|
-
/******/
|
|
36
|
-
/******/
|
|
37
|
-
/******/
|
|
38
|
-
/******/
|
|
39
|
-
/******/
|
|
40
|
-
/******/
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
/******/
|
|
44
|
-
/******/
|
|
45
|
-
/******/
|
|
46
|
-
/******/
|
|
47
|
-
/******/
|
|
48
|
-
/******/
|
|
49
|
-
/******/
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
/******/
|
|
53
|
-
/******/
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
/******/
|
|
57
|
-
/******/
|
|
58
|
-
/******/
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
1
|
+
/******/ (() => {
|
|
2
|
+
// webpackBootstrap
|
|
3
|
+
/******/ "use strict";
|
|
4
|
+
/******/ // The require scope
|
|
5
|
+
/******/ var e = {};
|
|
6
|
+
/******/
|
|
7
|
+
/************************************************************************/
|
|
8
|
+
/******/ /* webpack/runtime/compat get default export */
|
|
9
|
+
/******/ (() => {
|
|
10
|
+
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
11
|
+
/******/ e.n = t => {
|
|
12
|
+
/******/ var r = t && t.__esModule ?
|
|
13
|
+
/******/ () => t["default"]
|
|
14
|
+
/******/ : () => t
|
|
15
|
+
/******/;
|
|
16
|
+
e.d(r, {
|
|
17
|
+
a: r
|
|
18
|
+
});
|
|
19
|
+
/******/ return r;
|
|
20
|
+
/******/ };
|
|
21
|
+
/******/ })();
|
|
22
|
+
/******/
|
|
23
|
+
/******/ /* webpack/runtime/define property getters */
|
|
24
|
+
/******/ (() => {
|
|
25
|
+
/******/ // define getter functions for harmony exports
|
|
26
|
+
/******/ e.d = (t, r) => {
|
|
27
|
+
/******/ for (var n in r) {
|
|
28
|
+
/******/ if (e.o(r, n) && !e.o(t, n)) {
|
|
29
|
+
/******/ Object.defineProperty(t, n, {
|
|
30
|
+
enumerable: true,
|
|
31
|
+
get: r[n]
|
|
32
|
+
});
|
|
33
|
+
/******/ }
|
|
34
|
+
/******/ }
|
|
35
|
+
/******/ };
|
|
36
|
+
/******/ })();
|
|
37
|
+
/******/
|
|
38
|
+
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
39
|
+
/******/ (() => {
|
|
40
|
+
/******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
|
|
41
|
+
/******/;
|
|
42
|
+
})();
|
|
43
|
+
/******/
|
|
44
|
+
/******/ /* webpack/runtime/make namespace object */
|
|
45
|
+
/******/ (() => {
|
|
46
|
+
/******/ // define __esModule on exports
|
|
47
|
+
/******/ e.r = e => {
|
|
48
|
+
/******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
|
|
49
|
+
/******/ Object.defineProperty(e, Symbol.toStringTag, {
|
|
50
|
+
value: "Module"
|
|
51
|
+
});
|
|
52
|
+
/******/ }
|
|
53
|
+
/******/ Object.defineProperty(e, "__esModule", {
|
|
54
|
+
value: true
|
|
55
|
+
});
|
|
56
|
+
/******/ };
|
|
57
|
+
/******/ })();
|
|
58
|
+
/******/
|
|
59
|
+
/************************************************************************/ var t = {};
|
|
60
|
+
// ESM COMPAT FLAG
|
|
61
|
+
e.r(t);
|
|
62
|
+
// EXPORTS
|
|
63
|
+
e.d(t, {
|
|
64
|
+
default: () => /* reexport */ G
|
|
65
|
+
});
|
|
66
|
+
// CONCATENATED MODULE: external "react"
|
|
67
|
+
const r = require("react");
|
|
68
|
+
var n = e.n(r);
|
|
69
|
+
// CONCATENATED MODULE: external "prop-types"
|
|
70
|
+
const o = require("prop-types");
|
|
71
|
+
var i = e.n(o);
|
|
72
|
+
// CONCATENATED MODULE: external "lodash/keys"
|
|
73
|
+
const a = require("lodash/keys");
|
|
74
|
+
var s = e.n(a);
|
|
75
|
+
// CONCATENATED MODULE: external "lodash/omit"
|
|
76
|
+
const l = require("lodash/omit");
|
|
77
|
+
var c = e.n(l);
|
|
78
|
+
// CONCATENATED MODULE: external "@splunk/react-ui/EventListener"
|
|
79
|
+
const u = require("@splunk/react-ui/EventListener");
|
|
80
|
+
var d = e.n(u);
|
|
81
|
+
// CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
|
|
82
|
+
const f = require("@splunk/react-ui/ScreenReaderContent");
|
|
83
|
+
var p = e.n(f);
|
|
84
|
+
// CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
|
|
85
|
+
const h = require("@splunk/ui-utils/i18n");
|
|
86
|
+
// CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
|
|
87
|
+
const v = require("@splunk/ui-utils/keyboard");
|
|
88
|
+
// CONCATENATED MODULE: external "styled-components"
|
|
89
|
+
const y = require("styled-components");
|
|
90
|
+
var w = e.n(y);
|
|
91
|
+
// CONCATENATED MODULE: external "@splunk/themes"
|
|
92
|
+
const m = require("@splunk/themes");
|
|
93
|
+
// CONCATENATED MODULE: ./src/Resize/ResizeStyles.ts
|
|
94
|
+
var b = "9px";
|
|
95
|
+
var g = "14px";
|
|
96
|
+
var S = "3px";
|
|
97
|
+
var z = "11px";
|
|
98
|
+
var R = w().div.withConfig({
|
|
99
|
+
displayName: "ResizeStyles__Styled",
|
|
100
|
+
componentId: "sc-181mwes-0"
|
|
101
|
+
})([ "", ";position:relative;overflow-x:hidden;overflow-y:hidden;" ], m.mixins.reset("block"));
|
|
102
|
+
var _ = w().div.withConfig({
|
|
103
|
+
displayName: "ResizeStyles__StyledBorder",
|
|
104
|
+
componentId: "sc-181mwes-1"
|
|
105
|
+
})([ "", ";height:100%;width:100%;border:0 solid ", ";", " ", " ", " ", "" ], m.mixins.reset("block"), (0,
|
|
106
|
+
m.pick)({
|
|
107
|
+
prisma: m.variables.interactiveColorBackground,
|
|
108
|
+
enterprise: {
|
|
109
|
+
dark: m.variables.gray22,
|
|
110
|
+
light: m.variables.white
|
|
111
|
+
}
|
|
112
|
+
}), (function(e) {
|
|
113
|
+
var t = e.$borderSides;
|
|
114
|
+
return t.n && (0, y.css)([ "border-top-width:", ";" ], b);
|
|
115
|
+
}), (function(e) {
|
|
116
|
+
var t = e.$borderSides;
|
|
117
|
+
return t.e && (0, y.css)([ "border-right-width:", ";" ], b);
|
|
118
|
+
}), (function(e) {
|
|
119
|
+
var t = e.$borderSides;
|
|
120
|
+
return t.s && (0, y.css)([ "border-bottom-width:", ";" ], b);
|
|
121
|
+
}), (function(e) {
|
|
122
|
+
var t = e.$borderSides;
|
|
123
|
+
return t.w && (0, y.css)([ "border-left-width:", ";" ], b);
|
|
124
|
+
}));
|
|
125
|
+
var x = w().svg.withConfig({
|
|
126
|
+
displayName: "ResizeStyles__StyledCornerSvg",
|
|
127
|
+
componentId: "sc-181mwes-2"
|
|
128
|
+
})([ "display:block;stroke:currentColor;" ]);
|
|
129
|
+
var O = w().path.withConfig({
|
|
130
|
+
displayName: "ResizeStyles__StyledCornerPath",
|
|
131
|
+
componentId: "sc-181mwes-3"
|
|
132
|
+
})([ "stroke-width:1.1px;" ]);
|
|
133
|
+
var k = w().svg.withConfig({
|
|
134
|
+
displayName: "ResizeStyles__StyledSideSvg",
|
|
135
|
+
componentId: "sc-181mwes-4"
|
|
136
|
+
})([ "display:block;fill:currentColor;" ]);
|
|
137
|
+
var D = (0, y.css)([ "", ";color:", ";&:hover,&:focus{color:", ";}", "" ], m.mixins.reset("block"), (0,
|
|
138
|
+
m.pick)({
|
|
139
|
+
prisma: m.variables.contentColorDefault,
|
|
140
|
+
enterprise: {
|
|
141
|
+
dark: m.variables.gray92,
|
|
142
|
+
light: m.variables.borderColor
|
|
143
|
+
}
|
|
144
|
+
}), (0, m.pick)({
|
|
145
|
+
prisma: m.variables.interactiveColorPrimary,
|
|
146
|
+
enterprise: m.variables.linkColor
|
|
147
|
+
}), (function(e) {
|
|
148
|
+
var t = e.$showHandles;
|
|
149
|
+
return t === "on-hover" && (0, y.css)([ "opacity:0;transition:opacity 200ms;", ":hover > div > &,&:focus{opacity:1;}" ],
|
|
150
|
+
/* sc-sel */
|
|
151
|
+
R);
|
|
152
|
+
}));
|
|
153
|
+
var E = (0, y.css)([ "", ";width:", ";height:", ";position:absolute;background-clip:content-box;z-index:2;" ], D, z, z);
|
|
154
|
+
var C = (0, y.css)([ "", ";position:absolute;z-index:1;" ], D);
|
|
155
|
+
var j = w().button.withConfig({
|
|
156
|
+
displayName: "ResizeStyles__StyledResize",
|
|
157
|
+
componentId: "sc-181mwes-5"
|
|
158
|
+
})([ "", "" ], (0, m.pickVariant)("$cardinalDirection", {
|
|
159
|
+
nw: (0, y.css)([ "", ";top:0;left:0;cursor:nwse-resize;> ", "{transform:rotate(180deg);}" ], E,
|
|
160
|
+
/* sc-sel */
|
|
161
|
+
x),
|
|
162
|
+
n: (0, y.css)([ "", ";cursor:ns-resize;top:0;left:calc(50% - ", " / 2);padding:", " 0;" ], C, g, S),
|
|
163
|
+
ne: (0, y.css)([ "", ";right:0;top:0;cursor:nesw-resize;> ", "{transform:rotate(-90deg);}" ], E,
|
|
164
|
+
/* sc-sel */
|
|
165
|
+
x),
|
|
166
|
+
w: (0, y.css)([ "", ";cursor:ew-resize;padding:0 ", ";left:0;top:calc(50% - ", " / 2);" ], C, S, g),
|
|
167
|
+
e: (0, y.css)([ "", ";cursor:ew-resize;padding:0 ", ";right:0;top:calc(50% - ", " / 2);" ], C, S, g),
|
|
168
|
+
sw: (0, y.css)([ "", ";left:0;bottom:0;cursor:nesw-resize;> ", "{transform:rotate(90deg);}" ], E,
|
|
169
|
+
/* sc-sel */
|
|
170
|
+
x),
|
|
171
|
+
s: (0, y.css)([ "", ";cursor:ns-resize;padding:", " 0;bottom:0;left:calc(50% - ", " / 2);" ], C, S, g),
|
|
172
|
+
se: (0, y.css)([ "", ";right:0;bottom:0;cursor:nwse-resize;" ], E)
|
|
173
|
+
}));
|
|
174
|
+
// CONCATENATED MODULE: ./src/utils/updateReactRef.ts
|
|
175
|
+
/**
|
|
110
176
|
* Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
|
|
111
177
|
*
|
|
112
178
|
* @param ref - The React callback or object ref. Can be `null` or `undefined`.
|
|
113
179
|
* @param current - The new value of the ref.
|
|
114
180
|
*/
|
|
115
|
-
function
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
181
|
+
function q(e, t) {
|
|
182
|
+
if (e) {
|
|
183
|
+
if (typeof e === "function") {
|
|
184
|
+
e(t);
|
|
185
|
+
} else {
|
|
186
|
+
// the public signature of this util uses React.Ref<T> to mirror the way React types refs.
|
|
187
|
+
// the intention here is to signal "we will take care of setting 'current', not you".
|
|
188
|
+
e.current = t;
|
|
189
|
+
// eslint-disable-line no-param-reassign
|
|
190
|
+
}
|
|
191
|
+
}
|
|
123
192
|
}
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
/***/ }),
|
|
151
|
-
|
|
152
|
-
/***/ 229:
|
|
153
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
154
|
-
|
|
155
|
-
"use strict";
|
|
156
|
-
// ESM COMPAT FLAG
|
|
157
|
-
__webpack_require__.r(__webpack_exports__);
|
|
158
|
-
|
|
159
|
-
// EXPORTS
|
|
160
|
-
__webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ src_Resize_Resize; });
|
|
161
|
-
|
|
162
|
-
// EXTERNAL MODULE: external "react"
|
|
163
|
-
var external_react_ = __webpack_require__(2);
|
|
164
|
-
var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
|
|
165
|
-
|
|
166
|
-
// EXTERNAL MODULE: external "prop-types"
|
|
167
|
-
var external_prop_types_ = __webpack_require__(1);
|
|
168
|
-
var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
|
|
169
|
-
|
|
170
|
-
// EXTERNAL MODULE: external "lodash/keys"
|
|
171
|
-
var keys_ = __webpack_require__(9);
|
|
172
|
-
var keys_default = /*#__PURE__*/__webpack_require__.n(keys_);
|
|
173
|
-
|
|
174
|
-
// EXTERNAL MODULE: external "lodash/omit"
|
|
175
|
-
var omit_ = __webpack_require__(5);
|
|
176
|
-
var omit_default = /*#__PURE__*/__webpack_require__.n(omit_);
|
|
177
|
-
|
|
178
|
-
// EXTERNAL MODULE: external "@splunk/react-ui/EventListener"
|
|
179
|
-
var EventListener_ = __webpack_require__(16);
|
|
180
|
-
var EventListener_default = /*#__PURE__*/__webpack_require__.n(EventListener_);
|
|
181
|
-
|
|
182
|
-
// EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
|
|
183
|
-
var ScreenReaderContent_ = __webpack_require__(14);
|
|
184
|
-
var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
|
|
185
|
-
|
|
186
|
-
// EXTERNAL MODULE: external "@splunk/ui-utils/i18n"
|
|
187
|
-
var i18n_ = __webpack_require__(4);
|
|
188
|
-
|
|
189
|
-
// EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
|
|
190
|
-
var keyboard_ = __webpack_require__(7);
|
|
191
|
-
|
|
192
|
-
// EXTERNAL MODULE: external "styled-components"
|
|
193
|
-
var external_styled_components_ = __webpack_require__(3);
|
|
194
|
-
var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
|
|
195
|
-
|
|
196
|
-
// EXTERNAL MODULE: external "@splunk/themes"
|
|
197
|
-
var themes_ = __webpack_require__(0);
|
|
198
|
-
|
|
199
|
-
// CONCATENATED MODULE: ./src/Resize/ResizeStyles.ts
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
var edgeWidth = '9px';
|
|
203
|
-
var edgeLength = '14px';
|
|
204
|
-
var edgePadding = '3px';
|
|
205
|
-
var cornerSize = '11px';
|
|
206
|
-
var Styled = external_styled_components_default.a.div.withConfig({
|
|
207
|
-
displayName: "ResizeStyles__Styled",
|
|
208
|
-
componentId: "sc-181mwes-0"
|
|
209
|
-
})(["", ";position:relative;overflow-x:hidden;overflow-y:hidden;"], themes_["mixins"].reset('block'));
|
|
210
|
-
var StyledBorder = external_styled_components_default.a.div.withConfig({
|
|
211
|
-
displayName: "ResizeStyles__StyledBorder",
|
|
212
|
-
componentId: "sc-181mwes-1"
|
|
213
|
-
})(["", ";height:100%;width:100%;border:0 solid ", ";", " ", " ", " ", ""], themes_["mixins"].reset('block'), Object(themes_["pick"])({
|
|
214
|
-
prisma: themes_["variables"].interactiveColorBackground,
|
|
215
|
-
enterprise: {
|
|
216
|
-
dark: themes_["variables"].gray22,
|
|
217
|
-
light: themes_["variables"].white
|
|
218
|
-
}
|
|
219
|
-
}), function (_ref) {
|
|
220
|
-
var $borderSides = _ref.$borderSides;
|
|
221
|
-
return $borderSides.n && Object(external_styled_components_["css"])(["border-top-width:", ";"], edgeWidth);
|
|
222
|
-
}, function (_ref2) {
|
|
223
|
-
var $borderSides = _ref2.$borderSides;
|
|
224
|
-
return $borderSides.e && Object(external_styled_components_["css"])(["border-right-width:", ";"], edgeWidth);
|
|
225
|
-
}, function (_ref3) {
|
|
226
|
-
var $borderSides = _ref3.$borderSides;
|
|
227
|
-
return $borderSides.s && Object(external_styled_components_["css"])(["border-bottom-width:", ";"], edgeWidth);
|
|
228
|
-
}, function (_ref4) {
|
|
229
|
-
var $borderSides = _ref4.$borderSides;
|
|
230
|
-
return $borderSides.w && Object(external_styled_components_["css"])(["border-left-width:", ";"], edgeWidth);
|
|
231
|
-
});
|
|
232
|
-
var StyledCornerSvg = external_styled_components_default.a.svg.withConfig({
|
|
233
|
-
displayName: "ResizeStyles__StyledCornerSvg",
|
|
234
|
-
componentId: "sc-181mwes-2"
|
|
235
|
-
})(["display:block;stroke:currentColor;"]);
|
|
236
|
-
var StyledCornerPath = external_styled_components_default.a.path.withConfig({
|
|
237
|
-
displayName: "ResizeStyles__StyledCornerPath",
|
|
238
|
-
componentId: "sc-181mwes-3"
|
|
239
|
-
})(["stroke-width:1.1px;"]);
|
|
240
|
-
var StyledSideSvg = external_styled_components_default.a.svg.withConfig({
|
|
241
|
-
displayName: "ResizeStyles__StyledSideSvg",
|
|
242
|
-
componentId: "sc-181mwes-4"
|
|
243
|
-
})(["display:block;fill:currentColor;"]);
|
|
244
|
-
var resize = Object(external_styled_components_["css"])(["", ";color:", ";&:hover,&:focus{color:", ";}", ""], themes_["mixins"].reset('block'), Object(themes_["pick"])({
|
|
245
|
-
prisma: themes_["variables"].contentColorDefault,
|
|
246
|
-
enterprise: {
|
|
247
|
-
dark: themes_["variables"].gray92,
|
|
248
|
-
light: themes_["variables"].borderColor
|
|
249
|
-
}
|
|
250
|
-
}), Object(themes_["pick"])({
|
|
251
|
-
prisma: themes_["variables"].interactiveColorPrimary,
|
|
252
|
-
enterprise: themes_["variables"].linkColor
|
|
253
|
-
}), function (_ref5) {
|
|
254
|
-
var $showHandles = _ref5.$showHandles;
|
|
255
|
-
return $showHandles === 'on-hover' && Object(external_styled_components_["css"])(["opacity:0;transition:opacity 200ms;", ":hover > div > &,&:focus{opacity:1;}"],
|
|
256
|
-
/* sc-sel */
|
|
257
|
-
Styled);
|
|
258
|
-
});
|
|
259
|
-
var resizeCorner = Object(external_styled_components_["css"])(["", ";width:", ";height:", ";position:absolute;background-clip:content-box;z-index:2;"], resize, cornerSize, cornerSize);
|
|
260
|
-
var resizeSide = Object(external_styled_components_["css"])(["", ";position:absolute;z-index:1;"], resize);
|
|
261
|
-
var StyledResize = external_styled_components_default.a.button.withConfig({
|
|
262
|
-
displayName: "ResizeStyles__StyledResize",
|
|
263
|
-
componentId: "sc-181mwes-5"
|
|
264
|
-
})(["", ""], Object(themes_["pickVariant"])('$cardinalDirection', {
|
|
265
|
-
nw: Object(external_styled_components_["css"])(["", ";top:0;left:0;cursor:nwse-resize;> ", "{transform:rotate(180deg);}"], resizeCorner,
|
|
266
|
-
/* sc-sel */
|
|
267
|
-
StyledCornerSvg),
|
|
268
|
-
n: Object(external_styled_components_["css"])(["", ";cursor:ns-resize;top:0;left:calc(50% - ", " / 2);padding:", " 0;"], resizeSide, edgeLength, edgePadding),
|
|
269
|
-
ne: Object(external_styled_components_["css"])(["", ";right:0;top:0;cursor:nesw-resize;> ", "{transform:rotate(-90deg);}"], resizeCorner,
|
|
270
|
-
/* sc-sel */
|
|
271
|
-
StyledCornerSvg),
|
|
272
|
-
w: Object(external_styled_components_["css"])(["", ";cursor:ew-resize;padding:0 ", ";left:0;top:calc(50% - ", " / 2);"], resizeSide, edgePadding, edgeLength),
|
|
273
|
-
e: Object(external_styled_components_["css"])(["", ";cursor:ew-resize;padding:0 ", ";right:0;top:calc(50% - ", " / 2);"], resizeSide, edgePadding, edgeLength),
|
|
274
|
-
sw: Object(external_styled_components_["css"])(["", ";left:0;bottom:0;cursor:nesw-resize;> ", "{transform:rotate(90deg);}"], resizeCorner,
|
|
275
|
-
/* sc-sel */
|
|
276
|
-
StyledCornerSvg),
|
|
277
|
-
s: Object(external_styled_components_["css"])(["", ";cursor:ns-resize;padding:", " 0;bottom:0;left:calc(50% - ", " / 2);"], resizeSide, edgePadding, edgeLength),
|
|
278
|
-
se: Object(external_styled_components_["css"])(["", ";right:0;bottom:0;cursor:nwse-resize;"], resizeCorner)
|
|
279
|
-
}));
|
|
280
|
-
|
|
281
|
-
// EXTERNAL MODULE: ./src/utils/updateReactRef.ts
|
|
282
|
-
var updateReactRef = __webpack_require__(10);
|
|
283
|
-
|
|
284
|
-
// CONCATENATED MODULE: ./src/Resize/Resize.tsx
|
|
285
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
286
|
-
|
|
287
|
-
function _extends() { _extends = Object.assign || 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); }
|
|
288
|
-
|
|
289
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
290
|
-
|
|
291
|
-
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
292
|
-
|
|
293
|
-
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
294
|
-
|
|
295
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
296
|
-
|
|
297
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
298
|
-
|
|
299
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
300
|
-
|
|
301
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
302
|
-
|
|
303
|
-
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
304
|
-
|
|
305
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
|
|
306
|
-
|
|
307
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
308
|
-
|
|
309
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
var propTypes = {
|
|
322
|
-
appearance: external_prop_types_default.a.oneOf(['border', 'overlay']),
|
|
323
|
-
children: external_prop_types_default.a.node,
|
|
324
|
-
elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
|
|
325
|
-
keyIncrement: external_prop_types_default.a.number,
|
|
326
|
-
onRequestResize: external_prop_types_default.a.func.isRequired,
|
|
327
|
-
resizeHandles: external_prop_types_default.a.arrayOf(external_prop_types_default.a.oneOf(['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'])).isRequired,
|
|
328
|
-
showHandles: external_prop_types_default.a.oneOf(['always', 'on-hover'])
|
|
329
|
-
};
|
|
330
|
-
var defaultProps = {
|
|
331
|
-
appearance: 'overlay',
|
|
332
|
-
keyIncrement: 10,
|
|
333
|
-
showHandles: 'always'
|
|
334
|
-
};
|
|
335
|
-
|
|
336
|
-
/**
|
|
337
|
-
* Resize is a utility container with drag handles for resizing.
|
|
338
|
-
*/
|
|
339
|
-
var Resize_Resize = /*#__PURE__*/function (_Component) {
|
|
340
|
-
_inherits(Resize, _Component);
|
|
341
|
-
|
|
342
|
-
var _super = _createSuper(Resize);
|
|
343
|
-
|
|
344
|
-
// @docs-props-type ResizePropsBase
|
|
345
|
-
function Resize(props) {
|
|
346
|
-
var _this;
|
|
347
|
-
|
|
348
|
-
_classCallCheck(this, Resize);
|
|
349
|
-
|
|
350
|
-
_this = _super.call(this, props);
|
|
351
|
-
|
|
352
|
-
_defineProperty(_assertThisInitialized(_this), "handleMount", function (el) {
|
|
353
|
-
_this.setState({
|
|
354
|
-
el: el
|
|
355
|
-
});
|
|
356
|
-
|
|
357
|
-
Object(updateReactRef["a" /* updateReactRef */])(_this.props.elementRef, el);
|
|
358
|
-
});
|
|
359
|
-
|
|
360
|
-
_defineProperty(_assertThisInitialized(_this), "handleDragStart", function (e, dragDirection) {
|
|
361
|
-
if (e.button > 0) {
|
|
362
|
-
return;
|
|
363
|
-
}
|
|
364
|
-
|
|
365
|
-
e.preventDefault();
|
|
366
|
-
e.persist();
|
|
367
|
-
|
|
368
|
-
_this.setState(function (state) {
|
|
369
|
-
var _state$el, _state$el2;
|
|
370
|
-
|
|
371
|
-
return {
|
|
372
|
-
dragDirection: dragDirection,
|
|
373
|
-
startWidth: (_state$el = state.el) === null || _state$el === void 0 ? void 0 : _state$el.offsetWidth,
|
|
374
|
-
startHeight: (_state$el2 = state.el) === null || _state$el2 === void 0 ? void 0 : _state$el2.offsetHeight,
|
|
375
|
-
startX: e.clientX,
|
|
376
|
-
startY: e.clientY
|
|
193
|
+
// CONCATENATED MODULE: ./src/Resize/Resize.tsx
|
|
194
|
+
function P(e) {
|
|
195
|
+
"@babel/helpers - typeof";
|
|
196
|
+
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
|
|
197
|
+
P = function e(t) {
|
|
198
|
+
return typeof t;
|
|
199
|
+
};
|
|
200
|
+
} else {
|
|
201
|
+
P = function e(t) {
|
|
202
|
+
return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
|
|
203
|
+
};
|
|
204
|
+
}
|
|
205
|
+
return P(e);
|
|
206
|
+
}
|
|
207
|
+
function H() {
|
|
208
|
+
H = Object.assign || function(e) {
|
|
209
|
+
for (var t = 1; t < arguments.length; t++) {
|
|
210
|
+
var r = arguments[t];
|
|
211
|
+
for (var n in r) {
|
|
212
|
+
if (Object.prototype.hasOwnProperty.call(r, n)) {
|
|
213
|
+
e[n] = r[n];
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
return e;
|
|
377
218
|
};
|
|
378
|
-
|
|
379
|
-
}
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
dragDirection: undefined
|
|
384
|
-
});
|
|
385
|
-
});
|
|
386
|
-
|
|
387
|
-
_defineProperty(_assertThisInitialized(_this), "handleDrag", function (e) {
|
|
388
|
-
var _this$state = _this.state,
|
|
389
|
-
dragDirection = _this$state.dragDirection,
|
|
390
|
-
_this$state$startWidt = _this$state.startWidth,
|
|
391
|
-
startWidth = _this$state$startWidt === void 0 ? 0 : _this$state$startWidt,
|
|
392
|
-
_this$state$startHeig = _this$state.startHeight,
|
|
393
|
-
startHeight = _this$state$startHeig === void 0 ? 0 : _this$state$startHeig,
|
|
394
|
-
_this$state$startX = _this$state.startX,
|
|
395
|
-
startX = _this$state$startX === void 0 ? 0 : _this$state$startX,
|
|
396
|
-
_this$state$startY = _this$state.startY,
|
|
397
|
-
startY = _this$state$startY === void 0 ? 0 : _this$state$startY;
|
|
398
|
-
var changeX = (dragDirection === null || dragDirection === void 0 ? void 0 : dragDirection.match(/(w|e)$/)) ? e.clientX - startX : 0;
|
|
399
|
-
var changeY = (dragDirection === null || dragDirection === void 0 ? void 0 : dragDirection.match(/^(s|n)/)) ? e.clientY - startY : 0;
|
|
400
|
-
var data = {
|
|
401
|
-
width: (dragDirection === null || dragDirection === void 0 ? void 0 : dragDirection.match(/w$/)) ? startWidth - changeX : startWidth + changeX,
|
|
402
|
-
height: (dragDirection === null || dragDirection === void 0 ? void 0 : dragDirection.match(/^n/)) ? startHeight - changeY : startHeight + changeY
|
|
403
|
-
};
|
|
404
|
-
|
|
405
|
-
_this.props.onRequestResize(e, data);
|
|
406
|
-
});
|
|
407
|
-
|
|
408
|
-
_defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e, dir) {
|
|
409
|
-
var keyIncrement = _this.props.keyIncrement;
|
|
410
|
-
var key = Object(keyboard_["keycode"])(e.nativeEvent);
|
|
411
|
-
var lastDir = dir.slice(-1);
|
|
412
|
-
var widthMap = {
|
|
413
|
-
e: {
|
|
414
|
-
right: 1,
|
|
415
|
-
left: -1
|
|
416
|
-
},
|
|
417
|
-
w: {
|
|
418
|
-
right: -1,
|
|
419
|
-
left: 1
|
|
219
|
+
return H.apply(this, arguments);
|
|
220
|
+
}
|
|
221
|
+
function $(e, t) {
|
|
222
|
+
if (!(e instanceof t)) {
|
|
223
|
+
throw new TypeError("Cannot call a class as a function");
|
|
420
224
|
}
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
s: {
|
|
430
|
-
down: 1,
|
|
431
|
-
up: -1
|
|
225
|
+
}
|
|
226
|
+
function I(e, t) {
|
|
227
|
+
for (var r = 0; r < t.length; r++) {
|
|
228
|
+
var n = t[r];
|
|
229
|
+
n.enumerable = n.enumerable || false;
|
|
230
|
+
n.configurable = true;
|
|
231
|
+
if ("value" in n) n.writable = true;
|
|
232
|
+
Object.defineProperty(e, n.key, n);
|
|
432
233
|
}
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
e
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
var isCorner = dir.length > 1;
|
|
450
|
-
var handle;
|
|
451
|
-
|
|
452
|
-
if (isCorner) {
|
|
453
|
-
handle = /*#__PURE__*/external_react_default.a.createElement(StyledCornerSvg, {
|
|
454
|
-
viewBox: "0 0 11 11",
|
|
455
|
-
width: "11px",
|
|
456
|
-
height: "11px"
|
|
457
|
-
}, /*#__PURE__*/external_react_default.a.createElement(StyledCornerPath, {
|
|
458
|
-
d: "M0 8 L 8 0 M4 8 L 8 4"
|
|
459
|
-
}));
|
|
460
|
-
} else if (dir === 'n' || dir === 's') {
|
|
461
|
-
handle = /*#__PURE__*/external_react_default.a.createElement(StyledSideSvg, {
|
|
462
|
-
viewBox: "0 0 14 3",
|
|
463
|
-
width: "14px",
|
|
464
|
-
height: "3px"
|
|
465
|
-
}, /*#__PURE__*/external_react_default.a.createElement("rect", {
|
|
466
|
-
width: "14",
|
|
467
|
-
height: "1",
|
|
468
|
-
x: "0",
|
|
469
|
-
y: "0"
|
|
470
|
-
}), /*#__PURE__*/external_react_default.a.createElement("rect", {
|
|
471
|
-
width: "14",
|
|
472
|
-
height: "1",
|
|
473
|
-
x: "0",
|
|
474
|
-
y: "2"
|
|
475
|
-
}));
|
|
476
|
-
} else if (dir === 'e' || dir === 'w') {
|
|
477
|
-
handle = /*#__PURE__*/external_react_default.a.createElement(StyledSideSvg, {
|
|
478
|
-
viewBox: "0 0 3 14",
|
|
479
|
-
width: "3px",
|
|
480
|
-
height: "14px"
|
|
481
|
-
}, /*#__PURE__*/external_react_default.a.createElement("rect", {
|
|
482
|
-
width: "1",
|
|
483
|
-
height: "14",
|
|
484
|
-
x: "0",
|
|
485
|
-
y: "0"
|
|
486
|
-
}), /*#__PURE__*/external_react_default.a.createElement("rect", {
|
|
487
|
-
width: "1",
|
|
488
|
-
height: "14",
|
|
489
|
-
x: "2",
|
|
490
|
-
y: "0"
|
|
491
|
-
}));
|
|
492
|
-
}
|
|
493
|
-
|
|
494
|
-
return /*#__PURE__*/external_react_default.a.createElement(StyledResize, {
|
|
495
|
-
key: dir,
|
|
496
|
-
"data-test": "resize-handle-".concat(dir) // @ts-expect-error - guaranteed by constructor
|
|
497
|
-
,
|
|
498
|
-
onMouseDown: _this["handleDragStart".concat(dir)] // @ts-expect-error - guaranteed by constructor
|
|
499
|
-
,
|
|
500
|
-
onKeyDown: _this["handleKeyDown".concat(dir)],
|
|
501
|
-
$showHandles: showHandles,
|
|
502
|
-
$cardinalDirection: dir
|
|
503
|
-
}, handle, /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, null, Resize.handleLabels[dir]));
|
|
504
|
-
});
|
|
505
|
-
|
|
506
|
-
_this.state = {
|
|
507
|
-
el: null
|
|
508
|
-
}; // Generate handlers for each direction.
|
|
509
|
-
|
|
510
|
-
Resize.handleOrder.forEach(function (dir) {
|
|
511
|
-
// @ts-expect-error - dynamic function creation
|
|
512
|
-
_this["handleDragStart".concat(dir)] = function (e) {
|
|
513
|
-
_this.handleDragStart(e, dir);
|
|
514
|
-
}; // @ts-expect-error - dynamic function creation
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
_this["handleKeyDown".concat(dir)] = function (e) {
|
|
518
|
-
_this.handleKeyDown(e, dir);
|
|
519
|
-
};
|
|
520
|
-
});
|
|
521
|
-
return _this;
|
|
522
|
-
}
|
|
523
|
-
|
|
524
|
-
_createClass(Resize, [{
|
|
525
|
-
key: "render",
|
|
526
|
-
value: function render() {
|
|
527
|
-
var _this$props = this.props,
|
|
528
|
-
appearance = _this$props.appearance,
|
|
529
|
-
children = _this$props.children,
|
|
530
|
-
resizeHandles = _this$props.resizeHandles;
|
|
531
|
-
var _this$state2 = this.state,
|
|
532
|
-
dragDirection = _this$state2.dragDirection,
|
|
533
|
-
el = _this$state2.el; // Handles are inserted before and after children to optimize tab order
|
|
534
|
-
|
|
535
|
-
var beforeHandles = Resize.handleOrder.slice(0, 4).filter(function (dir) {
|
|
536
|
-
return resizeHandles.indexOf(dir) > -1;
|
|
537
|
-
}).map(this.renderHandle);
|
|
538
|
-
var afterHandles = Resize.handleOrder.slice(4).filter(function (dir) {
|
|
539
|
-
return resizeHandles.indexOf(dir) > -1;
|
|
540
|
-
}).map(this.renderHandle);
|
|
541
|
-
/* When appearance is border, determine which sides need margin.
|
|
542
|
-
* Converts ['se', 'n'] to { e: true, s: true, n: true}
|
|
543
|
-
*/
|
|
544
|
-
|
|
545
|
-
var borderSides = {};
|
|
546
|
-
|
|
547
|
-
if (appearance === 'border') {
|
|
548
|
-
resizeHandles.join('').split('').filter(function (val, index, array) {
|
|
549
|
-
return array.indexOf(val) === index;
|
|
550
|
-
}).forEach(function (dir) {
|
|
551
|
-
borderSides[dir] = true;
|
|
234
|
+
}
|
|
235
|
+
function T(e, t, r) {
|
|
236
|
+
if (t) I(e.prototype, t);
|
|
237
|
+
if (r) I(e, r);
|
|
238
|
+
return e;
|
|
239
|
+
}
|
|
240
|
+
function M(e, t) {
|
|
241
|
+
if (typeof t !== "function" && t !== null) {
|
|
242
|
+
throw new TypeError("Super expression must either be null or a function");
|
|
243
|
+
}
|
|
244
|
+
e.prototype = Object.create(t && t.prototype, {
|
|
245
|
+
constructor: {
|
|
246
|
+
value: e,
|
|
247
|
+
writable: true,
|
|
248
|
+
configurable: true
|
|
249
|
+
}
|
|
552
250
|
});
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
251
|
+
if (t) N(e, t);
|
|
252
|
+
}
|
|
253
|
+
function N(e, t) {
|
|
254
|
+
N = Object.setPrototypeOf || function e(t, r) {
|
|
255
|
+
t.__proto__ = r;
|
|
256
|
+
return t;
|
|
257
|
+
};
|
|
258
|
+
return N(e, t);
|
|
259
|
+
}
|
|
260
|
+
function B(e) {
|
|
261
|
+
var t = W();
|
|
262
|
+
return function r() {
|
|
263
|
+
var n = X(e), o;
|
|
264
|
+
if (t) {
|
|
265
|
+
var i = X(this).constructor;
|
|
266
|
+
o = Reflect.construct(n, arguments, i);
|
|
267
|
+
} else {
|
|
268
|
+
o = n.apply(this, arguments);
|
|
269
|
+
}
|
|
270
|
+
return K(this, o);
|
|
271
|
+
};
|
|
272
|
+
}
|
|
273
|
+
function K(e, t) {
|
|
274
|
+
if (t && (P(t) === "object" || typeof t === "function")) {
|
|
275
|
+
return t;
|
|
276
|
+
}
|
|
277
|
+
return L(e);
|
|
278
|
+
}
|
|
279
|
+
function L(e) {
|
|
280
|
+
if (e === void 0) {
|
|
281
|
+
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
|
|
282
|
+
}
|
|
283
|
+
return e;
|
|
569
284
|
}
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
285
|
+
function W() {
|
|
286
|
+
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
|
|
287
|
+
if (Reflect.construct.sham) return false;
|
|
288
|
+
if (typeof Proxy === "function") return true;
|
|
289
|
+
try {
|
|
290
|
+
Date.prototype.toString.call(Reflect.construct(Date, [], (function() {})));
|
|
291
|
+
return true;
|
|
292
|
+
} catch (e) {
|
|
293
|
+
return false;
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
function X(e) {
|
|
297
|
+
X = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
|
|
298
|
+
return t.__proto__ || Object.getPrototypeOf(t);
|
|
299
|
+
};
|
|
300
|
+
return X(e);
|
|
301
|
+
}
|
|
302
|
+
function Y(e, t, r) {
|
|
303
|
+
if (t in e) {
|
|
304
|
+
Object.defineProperty(e, t, {
|
|
305
|
+
value: r,
|
|
306
|
+
enumerable: true,
|
|
307
|
+
configurable: true,
|
|
308
|
+
writable: true
|
|
309
|
+
});
|
|
310
|
+
} else {
|
|
311
|
+
e[t] = r;
|
|
312
|
+
}
|
|
313
|
+
return e;
|
|
314
|
+
}
|
|
315
|
+
var A = {
|
|
316
|
+
appearance: i().oneOf([ "border", "overlay" ]),
|
|
317
|
+
children: i().node,
|
|
318
|
+
elementRef: i().oneOfType([ i().func, i().object ]),
|
|
319
|
+
keyIncrement: i().number,
|
|
320
|
+
onRequestResize: i().func.isRequired,
|
|
321
|
+
resizeHandles: i().arrayOf(i().oneOf([ "nw", "n", "ne", "w", "e", "sw", "s", "se" ])).isRequired,
|
|
322
|
+
showHandles: i().oneOf([ "always", "on-hover" ])
|
|
323
|
+
};
|
|
324
|
+
var F = {
|
|
325
|
+
appearance: "overlay",
|
|
326
|
+
keyIncrement: 10,
|
|
327
|
+
showHandles: "always"
|
|
328
|
+
};
|
|
329
|
+
/**
|
|
330
|
+
* Resize is a utility container with drag handles for resizing.
|
|
331
|
+
*/ var V = function(e) {
|
|
332
|
+
M(r, e);
|
|
333
|
+
var t = B(r);
|
|
334
|
+
// @docs-props-type ResizePropsBase
|
|
335
|
+
function r(e) {
|
|
336
|
+
var o;
|
|
337
|
+
$(this, r);
|
|
338
|
+
o = t.call(this, e);
|
|
339
|
+
Y(L(o), "handleMount", (function(e) {
|
|
340
|
+
o.setState({
|
|
341
|
+
el: e
|
|
342
|
+
});
|
|
343
|
+
q(o.props.elementRef, e);
|
|
344
|
+
}));
|
|
345
|
+
Y(L(o), "handleDragStart", (function(e, t) {
|
|
346
|
+
if (e.button > 0) {
|
|
347
|
+
return;
|
|
348
|
+
}
|
|
349
|
+
e.preventDefault();
|
|
350
|
+
e.persist();
|
|
351
|
+
o.setState((function(r) {
|
|
352
|
+
var n, o;
|
|
353
|
+
return {
|
|
354
|
+
dragDirection: t,
|
|
355
|
+
startWidth: (n = r.el) === null || n === void 0 ? void 0 : n.offsetWidth,
|
|
356
|
+
startHeight: (o = r.el) === null || o === void 0 ? void 0 : o.offsetHeight,
|
|
357
|
+
startX: e.clientX,
|
|
358
|
+
startY: e.clientY
|
|
359
|
+
};
|
|
360
|
+
}));
|
|
361
|
+
}));
|
|
362
|
+
Y(L(o), "handleDragEnd", (function() {
|
|
363
|
+
o.setState({
|
|
364
|
+
dragDirection: undefined
|
|
365
|
+
});
|
|
366
|
+
}));
|
|
367
|
+
Y(L(o), "handleDrag", (function(e) {
|
|
368
|
+
var t = o.state, r = t.dragDirection, n = t.startWidth, i = n === void 0 ? 0 : n, a = t.startHeight, s = a === void 0 ? 0 : a, l = t.startX, c = l === void 0 ? 0 : l, u = t.startY, d = u === void 0 ? 0 : u;
|
|
369
|
+
var f = (r === null || r === void 0 ? void 0 : r.match(/(w|e)$/)) ? e.clientX - c : 0;
|
|
370
|
+
var p = (r === null || r === void 0 ? void 0 : r.match(/^(s|n)/)) ? e.clientY - d : 0;
|
|
371
|
+
var h = {
|
|
372
|
+
width: (r === null || r === void 0 ? void 0 : r.match(/w$/)) ? i - f : i + f,
|
|
373
|
+
height: (r === null || r === void 0 ? void 0 : r.match(/^n/)) ? s - p : s + p
|
|
374
|
+
};
|
|
375
|
+
o.props.onRequestResize(e, h);
|
|
376
|
+
}));
|
|
377
|
+
Y(L(o), "handleKeyDown", (function(e, t) {
|
|
378
|
+
var r = o.props.keyIncrement;
|
|
379
|
+
var n = (0, v.keycode)(e.nativeEvent);
|
|
380
|
+
var i = t.slice(-1);
|
|
381
|
+
var a = {
|
|
382
|
+
e: {
|
|
383
|
+
right: 1,
|
|
384
|
+
left: -1
|
|
385
|
+
},
|
|
386
|
+
w: {
|
|
387
|
+
right: -1,
|
|
388
|
+
left: 1
|
|
389
|
+
}
|
|
390
|
+
};
|
|
391
|
+
var s = (i === "e" || i === "w") && (n === "right" || n === "left") ? a[i][n] : 0;
|
|
392
|
+
var l = t.charAt(0);
|
|
393
|
+
var c = {
|
|
394
|
+
n: {
|
|
395
|
+
down: -1,
|
|
396
|
+
up: 1
|
|
397
|
+
},
|
|
398
|
+
s: {
|
|
399
|
+
down: 1,
|
|
400
|
+
up: -1
|
|
401
|
+
}
|
|
402
|
+
};
|
|
403
|
+
var u = (l === "n" || l === "s") && (n === "up" || n === "down") ? c[l][n] : 0;
|
|
404
|
+
if ((s || u) && o.state.el) {
|
|
405
|
+
e.preventDefault();
|
|
406
|
+
var d = {
|
|
407
|
+
width: o.state.el.offsetWidth + s * r,
|
|
408
|
+
height: o.state.el.offsetHeight + u * r
|
|
409
|
+
};
|
|
410
|
+
o.props.onRequestResize(e, d);
|
|
411
|
+
}
|
|
412
|
+
}));
|
|
413
|
+
Y(L(o), "renderHandle", (function(e) {
|
|
414
|
+
var t = o.props.showHandles;
|
|
415
|
+
var i = e.length > 1;
|
|
416
|
+
var a;
|
|
417
|
+
if (i) {
|
|
418
|
+
a = n().createElement(x, {
|
|
419
|
+
viewBox: "0 0 11 11",
|
|
420
|
+
width: "11px",
|
|
421
|
+
height: "11px"
|
|
422
|
+
}, n().createElement(O, {
|
|
423
|
+
d: "M0 8 L 8 0 M4 8 L 8 4"
|
|
424
|
+
}));
|
|
425
|
+
} else if (e === "n" || e === "s") {
|
|
426
|
+
a = n().createElement(k, {
|
|
427
|
+
viewBox: "0 0 14 3",
|
|
428
|
+
width: "14px",
|
|
429
|
+
height: "3px"
|
|
430
|
+
}, n().createElement("rect", {
|
|
431
|
+
width: "14",
|
|
432
|
+
height: "1",
|
|
433
|
+
x: "0",
|
|
434
|
+
y: "0"
|
|
435
|
+
}), n().createElement("rect", {
|
|
436
|
+
width: "14",
|
|
437
|
+
height: "1",
|
|
438
|
+
x: "0",
|
|
439
|
+
y: "2"
|
|
440
|
+
}));
|
|
441
|
+
} else if (e === "e" || e === "w") {
|
|
442
|
+
a = n().createElement(k, {
|
|
443
|
+
viewBox: "0 0 3 14",
|
|
444
|
+
width: "3px",
|
|
445
|
+
height: "14px"
|
|
446
|
+
}, n().createElement("rect", {
|
|
447
|
+
width: "1",
|
|
448
|
+
height: "14",
|
|
449
|
+
x: "0",
|
|
450
|
+
y: "0"
|
|
451
|
+
}), n().createElement("rect", {
|
|
452
|
+
width: "1",
|
|
453
|
+
height: "14",
|
|
454
|
+
x: "2",
|
|
455
|
+
y: "0"
|
|
456
|
+
}));
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
return n().createElement(j, {
|
|
460
|
+
key: e,
|
|
461
|
+
"data-test": "resize-handle-".concat(e),
|
|
462
|
+
onMouseDown: o["handleDragStart".concat(e)],
|
|
463
|
+
onKeyDown: o["handleKeyDown".concat(e)],
|
|
464
|
+
$showHandles: t,
|
|
465
|
+
$cardinalDirection: e
|
|
466
|
+
}, a, n().createElement(p(), null, r.handleLabels[e]));
|
|
467
|
+
}));
|
|
468
|
+
o.state = {
|
|
469
|
+
el: null
|
|
470
|
+
};
|
|
471
|
+
// Generate handlers for each direction.
|
|
472
|
+
r.handleOrder.forEach((function(e) {
|
|
473
|
+
// @ts-expect-error - dynamic function creation
|
|
474
|
+
o["handleDragStart".concat(e)] = function(t) {
|
|
475
|
+
o.handleDragStart(t, e);
|
|
476
|
+
};
|
|
477
|
+
// @ts-expect-error - dynamic function creation
|
|
478
|
+
o["handleKeyDown".concat(e)] = function(t) {
|
|
479
|
+
o.handleKeyDown(t, e);
|
|
480
|
+
};
|
|
481
|
+
}));
|
|
482
|
+
return o;
|
|
483
|
+
}
|
|
484
|
+
T(r, [ {
|
|
485
|
+
key: "render",
|
|
486
|
+
value: function e() {
|
|
487
|
+
var t = this.props, o = t.appearance, i = t.children, a = t.resizeHandles;
|
|
488
|
+
var l = this.state, u = l.dragDirection, f = l.el;
|
|
489
|
+
// Handles are inserted before and after children to optimize tab order
|
|
490
|
+
var p = r.handleOrder.slice(0, 4).filter((function(e) {
|
|
491
|
+
return a.indexOf(e) > -1;
|
|
492
|
+
})).map(this.renderHandle);
|
|
493
|
+
var h = r.handleOrder.slice(4).filter((function(e) {
|
|
494
|
+
return a.indexOf(e) > -1;
|
|
495
|
+
})).map(this.renderHandle);
|
|
496
|
+
/* When appearance is border, determine which sides need margin.
|
|
497
|
+
* Converts ['se', 'n'] to { e: true, s: true, n: true}
|
|
498
|
+
*/ var v = {};
|
|
499
|
+
if (o === "border") {
|
|
500
|
+
a.join("").split("").filter((function(e, t, r) {
|
|
501
|
+
return r.indexOf(e) === t;
|
|
502
|
+
})).forEach((function(e) {
|
|
503
|
+
v[e] = true;
|
|
504
|
+
}));
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
return n().createElement(R, H({
|
|
508
|
+
"data-test": "resize",
|
|
509
|
+
ref: this.handleMount
|
|
510
|
+
}, c()(this.props, s()(r.propTypes))), n().createElement(_, {
|
|
511
|
+
$borderSides: v
|
|
512
|
+
}, f && p, i, f && h, u && n().createElement(n().Fragment, null, n().createElement(d(), {
|
|
513
|
+
target: window,
|
|
514
|
+
eventType: "mousemove",
|
|
515
|
+
listener: this.handleDrag
|
|
516
|
+
}), n().createElement(d(), {
|
|
517
|
+
target: window,
|
|
518
|
+
eventType: "mouseup",
|
|
519
|
+
listener: this.handleDragEnd
|
|
520
|
+
}))));
|
|
521
|
+
}
|
|
522
|
+
} ]);
|
|
523
|
+
return r;
|
|
524
|
+
}(r.Component);
|
|
525
|
+
Y(V, "propTypes", A);
|
|
526
|
+
Y(V, "defaultProps", F);
|
|
527
|
+
Y(V, "handleOrder", [ "nw", "n", "ne", "w", "e", "sw", "s", "se" ]);
|
|
528
|
+
Y(V, "handleLabels", {
|
|
529
|
+
nw: (0, h._)("Resize northwest"),
|
|
530
|
+
n: (0, h._)("Resize north"),
|
|
531
|
+
ne: (0, h._)("Resize northeast"),
|
|
532
|
+
w: (0, h._)("Resize west"),
|
|
533
|
+
e: (0, h._)("Resize east"),
|
|
534
|
+
sw: (0, h._)("Resize southwest"),
|
|
535
|
+
s: (0, h._)("Resize south"),
|
|
536
|
+
se: (0, h._)("Resize southeast")
|
|
537
|
+
});
|
|
538
|
+
/* harmony default export */ const G = V;
|
|
539
|
+
// CONCATENATED MODULE: ./src/Resize/index.ts
|
|
540
|
+
module.exports = t;
|
|
541
|
+
/******/})();
|