@elliemae/ds-resizeable-container 2.0.0-alpha.10 → 2.0.0-alpha.14

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.
Files changed (7) hide show
  1. package/cjs/Resizable.js +31 -57
  2. package/esm/Resizable.js +31 -57
  3. package/package.json +8 -5
  4. package/types/Resizable.d.ts +43 -6
  5. package/types/props.d.ts +31 -5
  6. package/cjs/package.json +0 -7
  7. package/esm/package.json +0 -7
package/cjs/Resizable.js CHANGED
@@ -5,6 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var _jsx2 = require('@babel/runtime/helpers/jsx');
6
6
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
7
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
8
+ require('core-js/modules/esnext.async-iterator.map.js');
9
+ require('core-js/modules/esnext.iterator.map.js');
10
+ require('core-js/modules/web.dom-collections.iterator.js');
11
+ require('core-js/modules/esnext.async-iterator.every.js');
12
+ require('core-js/modules/esnext.iterator.constructor.js');
13
+ require('core-js/modules/esnext.iterator.every.js');
14
+ require('core-js/modules/esnext.async-iterator.filter.js');
15
+ require('core-js/modules/esnext.iterator.filter.js');
16
+ require('core-js/modules/esnext.async-iterator.for-each.js');
17
+ require('core-js/modules/esnext.iterator.for-each.js');
8
18
  var React = require('react');
9
19
  var reactDesc = require('react-desc');
10
20
  var styled = require('styled-components');
@@ -105,75 +115,34 @@ const ResizableItem = /*#__PURE__*/styled__default["default"](ResizableItemCompo
105
115
  })(["position:relative;"]);
106
116
  const ResizableBar = /*#__PURE__*/styled__default["default"].div.withConfig({
107
117
  componentId: "sc-forwbw-2"
108
- })(["position:absolute;cursor:", ";", ""], ({
109
- container,
110
- nextContainer,
111
- v
112
- }) => cursorResolver(nextContainer, container, v), props => {
118
+ })(["position:absolute;cursor:", ";", ""], _ref2 => {
119
+ let {
120
+ container,
121
+ nextContainer,
122
+ v
123
+ } = _ref2;
124
+ return cursorResolver(nextContainer, container, v);
125
+ }, props => {
113
126
  if (props.v) {
114
- return `
115
- bottom: calc(${dsSystem.mapGap(props.gutter)} * -0.5);
116
- left: 0;
117
- width: 100%;
118
- height: 10px;
119
- margin-bottom: -5px;
120
- display: flex;
121
- flex-direction: column;
122
- justify-content:space-around;
123
- align-items: center;
124
- &:after{
125
- width: 100%;
126
- height: 1px;
127
- display: block;
128
- background: ${props.theme.colors.neutral['300']};
129
- content: '';
130
- }
131
- &:hover{
132
- &:after{
133
- background: ${props.theme.colors.brand['600']};
134
- }
135
- }
136
- `;
127
+ return "\n bottom: calc(".concat(dsSystem.mapGap(props.gutter), " * -0.5);\n left: 0;\n width: 100%;\n height: 10px;\n margin-bottom: -5px;\n display: flex;\n flex-direction: column;\n justify-content:space-around;\n align-items: center;\n &:after{\n width: 100%;\n height: 1px;\n display: block;\n background: ").concat(props.theme.colors.neutral['300'], ";\n content: '';\n }\n &:hover{\n &:after{\n background: ").concat(props.theme.colors.brand['600'], ";\n } \n }\n ");
137
128
  }
138
129
 
139
- return `
140
- top: 0;
141
- right: calc(${dsSystem.mapGap(props.gutter)} * -0.5);
142
- height: 100%;
143
- width: 10px;
144
- margin-right: -5px;
145
- display: flex;
146
- flex-direction: row;
147
- justify-content:space-around;
148
- align-items: center;
149
- &:after{
150
- height: 100%;
151
- width: 1px;
152
- display: block;
153
- background: ${props.theme.colors.neutral['300']};
154
- content: '';
155
- }
156
- &:hover{
157
- &:after{
158
- background: ${props.theme.colors.brand['600']};
159
- }
160
- }
161
- `;
130
+ return "\n top: 0;\n right: calc(".concat(dsSystem.mapGap(props.gutter), " * -0.5);\n height: 100%;\n width: 10px;\n margin-right: -5px;\n display: flex;\n flex-direction: row;\n justify-content:space-around;\n align-items: center;\n &:after{\n height: 100%;\n width: 1px;\n display: block;\n background: ").concat(props.theme.colors.neutral['300'], ";\n content: '';\n }\n &:hover{\n &:after{\n background: ").concat(props.theme.colors.brand['600'], ";\n } \n }\n ");
162
131
  });
163
132
 
164
133
  const getWidths = list => list.map(l => l.clientWidth);
165
134
 
166
135
  const getHeights = list => list.map(l => l.clientHeight);
167
136
 
168
- function ResizableContainer(_ref2) {
137
+ function ResizableContainer(_ref3) {
169
138
  let {
170
139
  children,
171
140
  cols,
172
141
  rows,
173
142
  vertical,
174
143
  horizontal
175
- } = _ref2,
176
- rest = _objectWithoutProperties__default["default"](_ref2, _excluded2);
144
+ } = _ref3,
145
+ rest = _objectWithoutProperties__default["default"](_ref3, _excluded2);
177
146
 
178
147
  const refs = React.useRef([]);
179
148
  const [containers, setContainers] = React.useState(cols);
@@ -190,7 +159,9 @@ function ResizableContainer(_ref2) {
190
159
  refs.current.push(node);
191
160
  };
192
161
 
193
- const resizePanels = (diff = 1, v = false) => {
162
+ const resizePanels = function () {
163
+ let diff = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
164
+ let v = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
194
165
  const index = parseInt(start.index, 10);
195
166
 
196
167
  if (!v) {
@@ -220,7 +191,9 @@ function ResizableContainer(_ref2) {
220
191
  }
221
192
  };
222
193
 
223
- const startResize = (event, index, v = false, type) => {
194
+ const startResize = function (event, index) {
195
+ let v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
196
+ let type = arguments.length > 3 ? arguments[3] : undefined;
224
197
  setDragging(type);
225
198
  setStartPoint({
226
199
  x: event.clientX,
@@ -261,7 +234,8 @@ function ResizableContainer(_ref2) {
261
234
  }
262
235
  };
263
236
 
264
- const handleKeyDown = (e, index, v = false) => {
237
+ const handleKeyDown = function (e, index) {
238
+ let v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
265
239
  const keyCodes = {
266
240
  37: DIRECTION.L,
267
241
  Left: DIRECTION.L,
package/esm/Resizable.js CHANGED
@@ -1,6 +1,16 @@
1
+ import 'core-js/modules/esnext.async-iterator.filter.js';
2
+ import 'core-js/modules/esnext.iterator.filter.js';
3
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
4
+ import 'core-js/modules/esnext.iterator.for-each.js';
1
5
  import _jsx2 from '@babel/runtime/helpers/esm/jsx';
2
6
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
3
7
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
8
+ import 'core-js/modules/esnext.async-iterator.map.js';
9
+ import 'core-js/modules/esnext.iterator.map.js';
10
+ import 'core-js/modules/web.dom-collections.iterator.js';
11
+ import 'core-js/modules/esnext.async-iterator.every.js';
12
+ import 'core-js/modules/esnext.iterator.constructor.js';
13
+ import 'core-js/modules/esnext.iterator.every.js';
4
14
  import React, { useRef, useState, useEffect } from 'react';
5
15
  import { describe } from 'react-desc';
6
16
  import styled from 'styled-components';
@@ -93,75 +103,34 @@ const ResizableItem = /*#__PURE__*/styled(ResizableItemComponent).withConfig({
93
103
  })(["position:relative;"]);
94
104
  const ResizableBar = /*#__PURE__*/styled.div.withConfig({
95
105
  componentId: "sc-forwbw-2"
96
- })(["position:absolute;cursor:", ";", ""], ({
97
- container,
98
- nextContainer,
99
- v
100
- }) => cursorResolver(nextContainer, container, v), props => {
106
+ })(["position:absolute;cursor:", ";", ""], _ref2 => {
107
+ let {
108
+ container,
109
+ nextContainer,
110
+ v
111
+ } = _ref2;
112
+ return cursorResolver(nextContainer, container, v);
113
+ }, props => {
101
114
  if (props.v) {
102
- return `
103
- bottom: calc(${mapGap(props.gutter)} * -0.5);
104
- left: 0;
105
- width: 100%;
106
- height: 10px;
107
- margin-bottom: -5px;
108
- display: flex;
109
- flex-direction: column;
110
- justify-content:space-around;
111
- align-items: center;
112
- &:after{
113
- width: 100%;
114
- height: 1px;
115
- display: block;
116
- background: ${props.theme.colors.neutral['300']};
117
- content: '';
118
- }
119
- &:hover{
120
- &:after{
121
- background: ${props.theme.colors.brand['600']};
122
- }
123
- }
124
- `;
115
+ return "\n bottom: calc(".concat(mapGap(props.gutter), " * -0.5);\n left: 0;\n width: 100%;\n height: 10px;\n margin-bottom: -5px;\n display: flex;\n flex-direction: column;\n justify-content:space-around;\n align-items: center;\n &:after{\n width: 100%;\n height: 1px;\n display: block;\n background: ").concat(props.theme.colors.neutral['300'], ";\n content: '';\n }\n &:hover{\n &:after{\n background: ").concat(props.theme.colors.brand['600'], ";\n } \n }\n ");
125
116
  }
126
117
 
127
- return `
128
- top: 0;
129
- right: calc(${mapGap(props.gutter)} * -0.5);
130
- height: 100%;
131
- width: 10px;
132
- margin-right: -5px;
133
- display: flex;
134
- flex-direction: row;
135
- justify-content:space-around;
136
- align-items: center;
137
- &:after{
138
- height: 100%;
139
- width: 1px;
140
- display: block;
141
- background: ${props.theme.colors.neutral['300']};
142
- content: '';
143
- }
144
- &:hover{
145
- &:after{
146
- background: ${props.theme.colors.brand['600']};
147
- }
148
- }
149
- `;
118
+ return "\n top: 0;\n right: calc(".concat(mapGap(props.gutter), " * -0.5);\n height: 100%;\n width: 10px;\n margin-right: -5px;\n display: flex;\n flex-direction: row;\n justify-content:space-around;\n align-items: center;\n &:after{\n height: 100%;\n width: 1px;\n display: block;\n background: ").concat(props.theme.colors.neutral['300'], ";\n content: '';\n }\n &:hover{\n &:after{\n background: ").concat(props.theme.colors.brand['600'], ";\n } \n }\n ");
150
119
  });
151
120
 
152
121
  const getWidths = list => list.map(l => l.clientWidth);
153
122
 
154
123
  const getHeights = list => list.map(l => l.clientHeight);
155
124
 
156
- function ResizableContainer(_ref2) {
125
+ function ResizableContainer(_ref3) {
157
126
  let {
158
127
  children,
159
128
  cols,
160
129
  rows,
161
130
  vertical,
162
131
  horizontal
163
- } = _ref2,
164
- rest = _objectWithoutProperties(_ref2, _excluded2);
132
+ } = _ref3,
133
+ rest = _objectWithoutProperties(_ref3, _excluded2);
165
134
 
166
135
  const refs = useRef([]);
167
136
  const [containers, setContainers] = useState(cols);
@@ -178,7 +147,9 @@ function ResizableContainer(_ref2) {
178
147
  refs.current.push(node);
179
148
  };
180
149
 
181
- const resizePanels = (diff = 1, v = false) => {
150
+ const resizePanels = function () {
151
+ let diff = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
152
+ let v = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
182
153
  const index = parseInt(start.index, 10);
183
154
 
184
155
  if (!v) {
@@ -208,7 +179,9 @@ function ResizableContainer(_ref2) {
208
179
  }
209
180
  };
210
181
 
211
- const startResize = (event, index, v = false, type) => {
182
+ const startResize = function (event, index) {
183
+ let v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
184
+ let type = arguments.length > 3 ? arguments[3] : undefined;
212
185
  setDragging(type);
213
186
  setStartPoint({
214
187
  x: event.clientX,
@@ -249,7 +222,8 @@ function ResizableContainer(_ref2) {
249
222
  }
250
223
  };
251
224
 
252
- const handleKeyDown = (e, index, v = false) => {
225
+ const handleKeyDown = function (e, index) {
226
+ let v = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
253
227
  const keyCodes = {
254
228
  37: DIRECTION.L,
255
229
  Left: DIRECTION.L,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-resizeable-container",
3
- "version": "2.0.0-alpha.10",
3
+ "version": "2.0.0-alpha.14",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Resizeable Container",
6
6
  "module": "./esm/index.js",
@@ -44,17 +44,20 @@
44
44
  "build": "node ../../scripts/build/build.js"
45
45
  },
46
46
  "dependencies": {
47
- "@elliemae/ds-grid": "2.0.0-alpha.10",
48
- "@elliemae/ds-system": "2.0.0-alpha.10",
47
+ "@elliemae/ds-grid": "2.0.0-alpha.14",
48
+ "@elliemae/ds-system": "2.0.0-alpha.14",
49
49
  "react-desc": "~4.1.3"
50
50
  },
51
51
  "devDependencies": {
52
- "styled-components": "~5.3.1"
52
+ "@testing-library/jest-dom": "~5.15.0",
53
+ "@testing-library/react": "~12.1.2",
54
+ "@testing-library/user-event": "~13.5.0",
55
+ "styled-components": "~5.3.3"
53
56
  },
54
57
  "peerDependencies": {
55
58
  "react": "^17.0.2",
56
59
  "react-dom": "^17.0.2",
57
- "styled-components": "^5.3.1"
60
+ "styled-components": "^5.3.3"
58
61
  },
59
62
  "publishConfig": {
60
63
  "access": "public",
package/types/Resizable.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
1
2
  /// <reference types="react" />
2
3
  declare function ResizableContainer({ children, cols, rows, vertical, horizontal, ...rest }: {
3
4
  [x: string]: any;
@@ -9,17 +10,53 @@ declare function ResizableContainer({ children, cols, rows, vertical, horizontal
9
10
  }): JSX.Element;
10
11
  declare namespace ResizableContainer {
11
12
  var propTypes: {
12
- children: any;
13
- vertical: any;
14
- horizontal: any;
15
- rows: any;
16
- cols: any;
13
+ children: {
14
+ defaultValue<T = unknown>(arg: T): {
15
+ deprecated: import("react-desc").PropTypesDescValidator;
16
+ };
17
+ isRequired: import("react-desc").PropTypesDescValidator;
18
+ };
19
+ vertical: {
20
+ defaultValue<T = unknown>(arg: T): {
21
+ deprecated: import("react-desc").PropTypesDescValidator;
22
+ };
23
+ isRequired: import("react-desc").PropTypesDescValidator;
24
+ };
25
+ horizontal: {
26
+ defaultValue<T = unknown>(arg: T): {
27
+ deprecated: import("react-desc").PropTypesDescValidator;
28
+ };
29
+ isRequired: import("react-desc").PropTypesDescValidator;
30
+ };
31
+ rows: {
32
+ defaultValue<T = unknown>(arg: T): {
33
+ deprecated: import("react-desc").PropTypesDescValidator;
34
+ };
35
+ isRequired: import("react-desc").PropTypesDescValidator;
36
+ };
37
+ cols: {
38
+ defaultValue<T = unknown>(arg: T): {
39
+ deprecated: import("react-desc").PropTypesDescValidator;
40
+ };
41
+ isRequired: import("react-desc").PropTypesDescValidator;
42
+ };
17
43
  };
18
44
  var defaultProps: {
19
45
  vertical: boolean;
20
46
  horizontal: boolean;
21
47
  };
22
48
  }
23
- declare const DSResizableContainerWithSchema: any;
49
+ declare const DSResizableContainerWithSchema: {
50
+ (props?: {
51
+ [x: string]: any;
52
+ children: any;
53
+ cols: any;
54
+ rows: any;
55
+ vertical: any;
56
+ horizontal: any;
57
+ } | undefined): JSX.Element;
58
+ propTypes: unknown;
59
+ toTypescript: () => import("react-desc").TypescriptSchema;
60
+ };
24
61
  export { ResizableContainer, DSResizableContainerWithSchema };
25
62
  export default ResizableContainer;
package/types/props.d.ts CHANGED
@@ -1,12 +1,38 @@
1
+ /// <reference path="../../../../shared/typings/react-desc.d.ts" />
1
2
  export declare const props: {
2
3
  /** grid item content */
3
- children: any;
4
+ children: {
5
+ defaultValue<T = unknown>(arg: T): {
6
+ deprecated: import("react-desc").PropTypesDescValidator;
7
+ };
8
+ isRequired: import("react-desc").PropTypesDescValidator;
9
+ };
4
10
  /** vertical resizing */
5
- vertical: any;
11
+ vertical: {
12
+ defaultValue<T = unknown>(arg: T): {
13
+ deprecated: import("react-desc").PropTypesDescValidator;
14
+ };
15
+ isRequired: import("react-desc").PropTypesDescValidator;
16
+ };
6
17
  /** horizontal resizing */
7
- horizontal: any;
18
+ horizontal: {
19
+ defaultValue<T = unknown>(arg: T): {
20
+ deprecated: import("react-desc").PropTypesDescValidator;
21
+ };
22
+ isRequired: import("react-desc").PropTypesDescValidator;
23
+ };
8
24
  /** Row layout cells */
9
- rows: any;
25
+ rows: {
26
+ defaultValue<T = unknown>(arg: T): {
27
+ deprecated: import("react-desc").PropTypesDescValidator;
28
+ };
29
+ isRequired: import("react-desc").PropTypesDescValidator;
30
+ };
10
31
  /** Column layout cells */
11
- cols: any;
32
+ cols: {
33
+ defaultValue<T = unknown>(arg: T): {
34
+ deprecated: import("react-desc").PropTypesDescValidator;
35
+ };
36
+ isRequired: import("react-desc").PropTypesDescValidator;
37
+ };
12
38
  };
package/cjs/package.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "type": "commonjs",
3
- "sideEffects": [
4
- "*.css",
5
- "*.scss"
6
- ]
7
- }
package/esm/package.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "type": "module",
3
- "sideEffects": [
4
- "*.css",
5
- "*.scss"
6
- ]
7
- }