@elliemae/ds-zoom 2.2.0-alpha.4 → 3.0.0-next.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/DSZoom.js +116 -111
- package/cjs/components/utils.js +15 -41
- package/cjs/components/zoomOptions.js +30 -69
- package/cjs/index.js +11 -36
- package/esm/DSZoom.js +95 -73
- package/esm/components/utils.js +8 -12
- package/esm/components/zoomOptions.js +28 -40
- package/esm/index.js +1 -7
- package/package.json +3 -3
- package/cjs/DSZoom.js.map +0 -7
- package/cjs/components/utils.js.map +0 -7
- package/cjs/components/zoomOptions.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/esm/DSZoom.js.map +0 -7
- package/esm/components/utils.js.map +0 -7
- package/esm/components/zoomOptions.js.map +0 -7
- package/esm/index.js.map +0 -7
package/cjs/DSZoom.js
CHANGED
|
@@ -1,120 +1,125 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
var
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
50
|
-
const { cssClassName } = (0, import_ds_classnames.convertPropToCssClassName)("zoom-resize", className, {
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
7
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.find.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.find.js');
|
|
11
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
12
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
13
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
14
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
15
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
16
|
+
var react = require('react');
|
|
17
|
+
var reactDesc = require('react-desc');
|
|
18
|
+
var dsClassnames = require('@elliemae/ds-classnames');
|
|
19
|
+
var dsForm = require('@elliemae/ds-form');
|
|
20
|
+
var zoomOptions = require('./components/zoomOptions.js');
|
|
21
|
+
var utils = require('./components/utils.js');
|
|
22
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
23
|
+
|
|
24
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
25
|
+
|
|
26
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
27
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
28
|
+
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
29
|
+
|
|
30
|
+
const _excluded = ["className", "disabled", "value", "onChange", "containerProps", "zoomOptions"];
|
|
31
|
+
|
|
32
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
33
|
+
|
|
34
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
35
|
+
|
|
36
|
+
const DSZoom = _ref => {
|
|
37
|
+
let {
|
|
38
|
+
className = '',
|
|
39
|
+
disabled = false,
|
|
40
|
+
value = undefined,
|
|
41
|
+
onChange = () => null,
|
|
42
|
+
containerProps = {},
|
|
43
|
+
zoomOptions: zoomOptions$1 = zoomOptions
|
|
44
|
+
} = _ref,
|
|
45
|
+
otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
46
|
+
|
|
47
|
+
const {
|
|
48
|
+
cssClassName
|
|
49
|
+
} = dsClassnames.convertPropToCssClassName('zoom-resize', className, {
|
|
51
50
|
disabled
|
|
52
51
|
});
|
|
53
|
-
const defaultOption = zoomOptions.find(
|
|
54
|
-
const [menuIsOpen, setMenuIsOpen] =
|
|
55
|
-
const [selectedOption, setSelectedOption] =
|
|
56
|
-
const [custom, setCustom] =
|
|
57
|
-
label:
|
|
58
|
-
value:
|
|
59
|
-
id:
|
|
52
|
+
const defaultOption = zoomOptions$1.find(option => option.default);
|
|
53
|
+
const [menuIsOpen, setMenuIsOpen] = react.useState(false);
|
|
54
|
+
const [selectedOption, setSelectedOption] = react.useState(defaultOption);
|
|
55
|
+
const [custom, setCustom] = react.useState(!value ? defaultOption : {
|
|
56
|
+
label: "".concat(utils.clean(value), "%"),
|
|
57
|
+
value: utils.clean(value),
|
|
58
|
+
id: 'custom'
|
|
60
59
|
});
|
|
61
|
-
const options = [custom, ...zoomOptions.filter(
|
|
62
|
-
const currentValue = value || selectedOption
|
|
63
|
-
return
|
|
64
|
-
className:
|
|
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
|
-
|
|
60
|
+
const options = [custom, ...zoomOptions$1.filter(option => !option.default)];
|
|
61
|
+
const currentValue = value || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || (custom === null || custom === void 0 ? void 0 : custom.value) || (defaultOption === null || defaultOption === void 0 ? void 0 : defaultOption.value);
|
|
62
|
+
return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread({
|
|
63
|
+
className: "".concat(cssClassName)
|
|
64
|
+
}, containerProps), otherProps), {}, {
|
|
65
|
+
children: /*#__PURE__*/_jsx__default["default"](dsForm.DSComboBox, {
|
|
66
|
+
searchable: true,
|
|
67
|
+
disabled: disabled,
|
|
68
|
+
menuIsOpen: menuIsOpen,
|
|
69
|
+
onChange: (valueChange, _ref2) => {
|
|
70
|
+
let {
|
|
71
|
+
action
|
|
72
|
+
} = _ref2;
|
|
73
|
+
const op = options.find(option => option.value === valueChange);
|
|
74
|
+
setSelectedOption(op);
|
|
75
|
+
onChange(op);
|
|
76
|
+
setMenuIsOpen(false);
|
|
77
|
+
|
|
78
|
+
if (action === 'select-option') {
|
|
79
|
+
document.activeElement.blur();
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
onClickDropdownIndicator: () => setMenuIsOpen(!menuIsOpen),
|
|
83
|
+
onInputChange: (valueInput, action) => {
|
|
84
|
+
if (valueInput || action.action === 'input-change') {
|
|
85
|
+
if (!valueInput) {
|
|
86
|
+
setCustom(defaultOption);
|
|
87
|
+
onChange(defaultOption);
|
|
88
|
+
} else if (!Number.isNaN(parseInt(valueInput, 10))) {
|
|
89
|
+
const cleanValue = parseInt(valueInput, 10);
|
|
90
|
+
const newOption = {
|
|
91
|
+
label: "".concat(cleanValue, "%"),
|
|
92
|
+
value: "".concat(cleanValue, "%"),
|
|
93
|
+
id: 'custom'
|
|
94
|
+
};
|
|
95
|
+
setCustom(newOption);
|
|
96
|
+
onChange(newOption);
|
|
97
|
+
}
|
|
95
98
|
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
99
|
+
|
|
100
|
+
setMenuIsOpen(false);
|
|
101
|
+
},
|
|
102
|
+
options: options,
|
|
103
|
+
value: currentValue
|
|
104
|
+
})
|
|
101
105
|
}));
|
|
102
106
|
};
|
|
107
|
+
|
|
103
108
|
const zoomProps = {
|
|
104
|
-
className:
|
|
105
|
-
containerProps:
|
|
106
|
-
disabled:
|
|
107
|
-
value:
|
|
108
|
-
onChange:
|
|
109
|
-
zoomOptions:
|
|
110
|
-
label:
|
|
111
|
-
value:
|
|
112
|
-
default:
|
|
113
|
-
}).description(
|
|
109
|
+
className: reactDesc.PropTypes.string.description('html class attribute'),
|
|
110
|
+
containerProps: reactDesc.PropTypes.object.description('Set of Properties attached to the main container'),
|
|
111
|
+
disabled: reactDesc.PropTypes.bool.description('disable component').defaultValue(false),
|
|
112
|
+
value: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number, reactDesc.PropTypes.object]).description('current value'),
|
|
113
|
+
onChange: reactDesc.PropTypes.func.description('function called when a new value is selected'),
|
|
114
|
+
zoomOptions: reactDesc.PropTypes.shape({
|
|
115
|
+
label: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]),
|
|
116
|
+
value: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]),
|
|
117
|
+
default: reactDesc.PropTypes.bool
|
|
118
|
+
}).description('list of options to display in the select menu')
|
|
114
119
|
};
|
|
115
|
-
|
|
116
|
-
const ZoomWithSchema = (0, import_react_desc.describe)(DSZoom);
|
|
120
|
+
const ZoomWithSchema = reactDesc.describe(DSZoom);
|
|
117
121
|
ZoomWithSchema.propTypes = zoomProps;
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
122
|
+
|
|
123
|
+
exports.DSZoom = DSZoom;
|
|
124
|
+
exports.ZoomWithSchema = ZoomWithSchema;
|
|
125
|
+
exports["default"] = DSZoom;
|
package/cjs/components/utils.js
CHANGED
|
@@ -1,41 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var utils_exports = {};
|
|
29
|
-
__export(utils_exports, {
|
|
30
|
-
clean: () => clean,
|
|
31
|
-
getCurrentFont: () => getCurrentFont,
|
|
32
|
-
getFactor: () => getFactor,
|
|
33
|
-
setSize: () => setSize
|
|
34
|
-
});
|
|
35
|
-
var React = __toESM(require("react"));
|
|
36
|
-
const getCurrentFont = () => Number(window.getComputedStyle(document.querySelector(":root")).getPropertyValue("font-size").match(/\d+/)[0]);
|
|
37
|
-
const setSize = (size) => document.querySelector(":root").setAttribute("style", `font-size: ${size}px`);
|
|
38
|
-
const getFactor = (value) => value / 100;
|
|
39
|
-
const clean = (value) => value.replace(/\D/g, "").substring(0, 3);
|
|
40
|
-
module.exports = __toCommonJS(utils_exports);
|
|
41
|
-
//# sourceMappingURL=utils.js.map
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
require('core-js/modules/es.string.replace.js');
|
|
6
|
+
|
|
7
|
+
const getCurrentFont = () => Number(window.getComputedStyle(document.querySelector(':root')).getPropertyValue('font-size').match(/\d+/)[0]);
|
|
8
|
+
const setSize = size => document.querySelector(':root').setAttribute('style', "font-size: ".concat(size, "px"));
|
|
9
|
+
const getFactor = value => value / 100;
|
|
10
|
+
const clean = value => value.replace(/\D/g, '').substring(0, 3);
|
|
11
|
+
|
|
12
|
+
exports.clean = clean;
|
|
13
|
+
exports.getCurrentFont = getCurrentFont;
|
|
14
|
+
exports.getFactor = getFactor;
|
|
15
|
+
exports.setSize = setSize;
|
|
@@ -1,69 +1,30 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
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
|
-
var React = __toESM(require("react"));
|
|
33
|
-
var zoomOptions_default = [
|
|
34
|
-
{
|
|
35
|
-
label: "25%",
|
|
36
|
-
value: "25"
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
label: "50%",
|
|
40
|
-
value: "50"
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
label: "75%",
|
|
44
|
-
value: "75"
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
label: "100%",
|
|
48
|
-
value: "100",
|
|
49
|
-
default: true
|
|
50
|
-
},
|
|
51
|
-
{
|
|
52
|
-
label: "125%",
|
|
53
|
-
value: "125"
|
|
54
|
-
},
|
|
55
|
-
{
|
|
56
|
-
label: "150%",
|
|
57
|
-
value: "150"
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
label: "175%",
|
|
61
|
-
value: "175"
|
|
62
|
-
},
|
|
63
|
-
{
|
|
64
|
-
label: "200%",
|
|
65
|
-
value: "200"
|
|
66
|
-
}
|
|
67
|
-
];
|
|
68
|
-
module.exports = __toCommonJS(zoomOptions_exports);
|
|
69
|
-
//# sourceMappingURL=zoomOptions.js.map
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var zoomDefaultOptions = [{
|
|
4
|
+
label: '25%',
|
|
5
|
+
value: '25'
|
|
6
|
+
}, {
|
|
7
|
+
label: '50%',
|
|
8
|
+
value: '50'
|
|
9
|
+
}, {
|
|
10
|
+
label: '75%',
|
|
11
|
+
value: '75'
|
|
12
|
+
}, {
|
|
13
|
+
label: '100%',
|
|
14
|
+
value: '100',
|
|
15
|
+
default: true
|
|
16
|
+
}, {
|
|
17
|
+
label: '125%',
|
|
18
|
+
value: '125'
|
|
19
|
+
}, {
|
|
20
|
+
label: '150%',
|
|
21
|
+
value: '150'
|
|
22
|
+
}, {
|
|
23
|
+
label: '175%',
|
|
24
|
+
value: '175'
|
|
25
|
+
}, {
|
|
26
|
+
label: '200%',
|
|
27
|
+
value: '200'
|
|
28
|
+
}];
|
|
29
|
+
|
|
30
|
+
module.exports = zoomDefaultOptions;
|
package/cjs/index.js
CHANGED
|
@@ -1,36 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
-
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (module2, isNodeMode) => {
|
|
21
|
-
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
-
};
|
|
23
|
-
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var src_exports = {};
|
|
29
|
-
__export(src_exports, {
|
|
30
|
-
default: () => import_DSZoom.default
|
|
31
|
-
});
|
|
32
|
-
var React = __toESM(require("react"));
|
|
33
|
-
__reExport(src_exports, require("./DSZoom"));
|
|
34
|
-
var import_DSZoom = require("./DSZoom");
|
|
35
|
-
module.exports = __toCommonJS(src_exports);
|
|
36
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var DSZoom = require('./DSZoom.js');
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
exports.DSZoom = DSZoom.DSZoom;
|
|
10
|
+
exports.ZoomWithSchema = DSZoom.ZoomWithSchema;
|
|
11
|
+
exports["default"] = DSZoom.DSZoom;
|
package/esm/DSZoom.js
CHANGED
|
@@ -1,91 +1,113 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
|
+
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
3
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.find.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
6
|
+
import 'core-js/modules/esnext.iterator.find.js';
|
|
7
|
+
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
8
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
9
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
10
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
11
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
12
|
+
import { useState } from 'react';
|
|
13
|
+
import { PropTypes, describe } from 'react-desc';
|
|
14
|
+
import { convertPropToCssClassName } from '@elliemae/ds-classnames';
|
|
15
|
+
import { DSComboBox } from '@elliemae/ds-form';
|
|
16
|
+
import zoomDefaultOptions from './components/zoomOptions.js';
|
|
17
|
+
import { clean } from './components/utils.js';
|
|
18
|
+
import { jsx } from 'react/jsx-runtime';
|
|
19
|
+
|
|
20
|
+
const _excluded = ["className", "disabled", "value", "onChange", "containerProps", "zoomOptions"];
|
|
21
|
+
|
|
22
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
23
|
+
|
|
24
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
25
|
+
|
|
26
|
+
const DSZoom = _ref => {
|
|
27
|
+
let {
|
|
28
|
+
className = '',
|
|
29
|
+
disabled = false,
|
|
30
|
+
value = undefined,
|
|
31
|
+
onChange = () => null,
|
|
32
|
+
containerProps = {},
|
|
33
|
+
zoomOptions = zoomDefaultOptions
|
|
34
|
+
} = _ref,
|
|
35
|
+
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
36
|
+
|
|
37
|
+
const {
|
|
38
|
+
cssClassName
|
|
39
|
+
} = convertPropToCssClassName('zoom-resize', className, {
|
|
18
40
|
disabled
|
|
19
41
|
});
|
|
20
|
-
const defaultOption = zoomOptions.find(
|
|
42
|
+
const defaultOption = zoomOptions.find(option => option.default);
|
|
21
43
|
const [menuIsOpen, setMenuIsOpen] = useState(false);
|
|
22
44
|
const [selectedOption, setSelectedOption] = useState(defaultOption);
|
|
23
45
|
const [custom, setCustom] = useState(!value ? defaultOption : {
|
|
24
|
-
label:
|
|
46
|
+
label: "".concat(clean(value), "%"),
|
|
25
47
|
value: clean(value),
|
|
26
|
-
id:
|
|
48
|
+
id: 'custom'
|
|
27
49
|
});
|
|
28
|
-
const options = [custom, ...zoomOptions.filter(
|
|
29
|
-
const currentValue = value || selectedOption
|
|
30
|
-
return
|
|
31
|
-
className:
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
onInputChange: (valueInput, action) => {
|
|
49
|
-
if (valueInput || action.action === "input-change") {
|
|
50
|
-
if (!valueInput) {
|
|
51
|
-
setCustom(defaultOption);
|
|
52
|
-
onChange(defaultOption);
|
|
53
|
-
} else if (!Number.isNaN(parseInt(valueInput, 10))) {
|
|
54
|
-
const cleanValue = parseInt(valueInput, 10);
|
|
55
|
-
const newOption = {
|
|
56
|
-
label: `${cleanValue}%`,
|
|
57
|
-
value: `${cleanValue}%`,
|
|
58
|
-
id: "custom"
|
|
59
|
-
};
|
|
60
|
-
setCustom(newOption);
|
|
61
|
-
onChange(newOption);
|
|
50
|
+
const options = [custom, ...zoomOptions.filter(option => !option.default)];
|
|
51
|
+
const currentValue = value || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) || (custom === null || custom === void 0 ? void 0 : custom.value) || (defaultOption === null || defaultOption === void 0 ? void 0 : defaultOption.value);
|
|
52
|
+
return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread({
|
|
53
|
+
className: "".concat(cssClassName)
|
|
54
|
+
}, containerProps), otherProps), {}, {
|
|
55
|
+
children: /*#__PURE__*/_jsx(DSComboBox, {
|
|
56
|
+
searchable: true,
|
|
57
|
+
disabled: disabled,
|
|
58
|
+
menuIsOpen: menuIsOpen,
|
|
59
|
+
onChange: (valueChange, _ref2) => {
|
|
60
|
+
let {
|
|
61
|
+
action
|
|
62
|
+
} = _ref2;
|
|
63
|
+
const op = options.find(option => option.value === valueChange);
|
|
64
|
+
setSelectedOption(op);
|
|
65
|
+
onChange(op);
|
|
66
|
+
setMenuIsOpen(false);
|
|
67
|
+
|
|
68
|
+
if (action === 'select-option') {
|
|
69
|
+
document.activeElement.blur();
|
|
62
70
|
}
|
|
63
|
-
}
|
|
64
|
-
setMenuIsOpen(
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
71
|
+
},
|
|
72
|
+
onClickDropdownIndicator: () => setMenuIsOpen(!menuIsOpen),
|
|
73
|
+
onInputChange: (valueInput, action) => {
|
|
74
|
+
if (valueInput || action.action === 'input-change') {
|
|
75
|
+
if (!valueInput) {
|
|
76
|
+
setCustom(defaultOption);
|
|
77
|
+
onChange(defaultOption);
|
|
78
|
+
} else if (!Number.isNaN(parseInt(valueInput, 10))) {
|
|
79
|
+
const cleanValue = parseInt(valueInput, 10);
|
|
80
|
+
const newOption = {
|
|
81
|
+
label: "".concat(cleanValue, "%"),
|
|
82
|
+
value: "".concat(cleanValue, "%"),
|
|
83
|
+
id: 'custom'
|
|
84
|
+
};
|
|
85
|
+
setCustom(newOption);
|
|
86
|
+
onChange(newOption);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
setMenuIsOpen(false);
|
|
91
|
+
},
|
|
92
|
+
options: options,
|
|
93
|
+
value: currentValue
|
|
94
|
+
})
|
|
68
95
|
}));
|
|
69
96
|
};
|
|
97
|
+
|
|
70
98
|
const zoomProps = {
|
|
71
|
-
className: PropTypes.string.description(
|
|
72
|
-
containerProps: PropTypes.object.description(
|
|
73
|
-
disabled: PropTypes.bool.description(
|
|
74
|
-
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description(
|
|
75
|
-
onChange: PropTypes.func.description(
|
|
99
|
+
className: PropTypes.string.description('html class attribute'),
|
|
100
|
+
containerProps: PropTypes.object.description('Set of Properties attached to the main container'),
|
|
101
|
+
disabled: PropTypes.bool.description('disable component').defaultValue(false),
|
|
102
|
+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('current value'),
|
|
103
|
+
onChange: PropTypes.func.description('function called when a new value is selected'),
|
|
76
104
|
zoomOptions: PropTypes.shape({
|
|
77
105
|
label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
78
106
|
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
79
107
|
default: PropTypes.bool
|
|
80
|
-
}).description(
|
|
108
|
+
}).description('list of options to display in the select menu')
|
|
81
109
|
};
|
|
82
|
-
DSZoom.propTypes = zoomProps;
|
|
83
110
|
const ZoomWithSchema = describe(DSZoom);
|
|
84
111
|
ZoomWithSchema.propTypes = zoomProps;
|
|
85
|
-
|
|
86
|
-
export {
|
|
87
|
-
DSZoom,
|
|
88
|
-
ZoomWithSchema,
|
|
89
|
-
DSZoom_default as default
|
|
90
|
-
};
|
|
91
|
-
//# sourceMappingURL=DSZoom.js.map
|
|
112
|
+
|
|
113
|
+
export { DSZoom, ZoomWithSchema, DSZoom as default };
|
package/esm/components/utils.js
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
const
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
getFactor,
|
|
10
|
-
setSize
|
|
11
|
-
};
|
|
12
|
-
//# sourceMappingURL=utils.js.map
|
|
1
|
+
import 'core-js/modules/es.string.replace.js';
|
|
2
|
+
|
|
3
|
+
const getCurrentFont = () => Number(window.getComputedStyle(document.querySelector(':root')).getPropertyValue('font-size').match(/\d+/)[0]);
|
|
4
|
+
const setSize = size => document.querySelector(':root').setAttribute('style', "font-size: ".concat(size, "px"));
|
|
5
|
+
const getFactor = value => value / 100;
|
|
6
|
+
const clean = value => value.replace(/\D/g, '').substring(0, 3);
|
|
7
|
+
|
|
8
|
+
export { clean, getCurrentFont, getFactor, setSize };
|
|
@@ -1,40 +1,28 @@
|
|
|
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
|
-
label: "175%",
|
|
30
|
-
value: "175"
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
label: "200%",
|
|
34
|
-
value: "200"
|
|
35
|
-
}
|
|
36
|
-
];
|
|
37
|
-
export {
|
|
38
|
-
zoomOptions_default as default
|
|
39
|
-
};
|
|
40
|
-
//# sourceMappingURL=zoomOptions.js.map
|
|
1
|
+
var zoomDefaultOptions = [{
|
|
2
|
+
label: '25%',
|
|
3
|
+
value: '25'
|
|
4
|
+
}, {
|
|
5
|
+
label: '50%',
|
|
6
|
+
value: '50'
|
|
7
|
+
}, {
|
|
8
|
+
label: '75%',
|
|
9
|
+
value: '75'
|
|
10
|
+
}, {
|
|
11
|
+
label: '100%',
|
|
12
|
+
value: '100',
|
|
13
|
+
default: true
|
|
14
|
+
}, {
|
|
15
|
+
label: '125%',
|
|
16
|
+
value: '125'
|
|
17
|
+
}, {
|
|
18
|
+
label: '150%',
|
|
19
|
+
value: '150'
|
|
20
|
+
}, {
|
|
21
|
+
label: '175%',
|
|
22
|
+
value: '175'
|
|
23
|
+
}, {
|
|
24
|
+
label: '200%',
|
|
25
|
+
value: '200'
|
|
26
|
+
}];
|
|
27
|
+
|
|
28
|
+
export { zoomDefaultOptions as default };
|
package/esm/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-zoom",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0-next.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Zoom",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"build": "node ../../scripts/build/build.js"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@elliemae/ds-classnames": "
|
|
48
|
-
"@elliemae/ds-form": "
|
|
47
|
+
"@elliemae/ds-classnames": "3.0.0-next.2",
|
|
48
|
+
"@elliemae/ds-form": "3.0.0-next.2",
|
|
49
49
|
"react-desc": "~4.1.3"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
package/cjs/DSZoom.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/DSZoom.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable indent */\nimport React, { useState } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSComboBox } from '@elliemae/ds-form';\nimport zoomDefaultOptions from './components/zoomOptions';\nimport { clean } from './components/utils';\n\nconst DSZoom = ({\n className = '',\n disabled = false,\n value = undefined,\n onChange = () => null,\n containerProps = {},\n zoomOptions = zoomDefaultOptions,\n ...otherProps\n}) => {\n const { cssClassName } = convertPropToCssClassName('zoom-resize', className, {\n disabled,\n });\n const defaultOption = zoomOptions.find((option) => option.default);\n const [menuIsOpen, setMenuIsOpen] = useState(false);\n const [selectedOption, setSelectedOption] = useState(defaultOption);\n const [custom, setCustom] = useState(\n !value\n ? defaultOption\n : {\n label: `${clean(value)}%`,\n value: clean(value),\n id: 'custom',\n },\n );\n const options = [custom, ...zoomOptions.filter((option) => !option.default)];\n\n const currentValue = value || selectedOption?.value || custom?.value || defaultOption?.value;\n\n return (\n <div className={`${cssClassName}`} {...containerProps} {...otherProps}>\n <DSComboBox\n searchable\n disabled={disabled}\n menuIsOpen={menuIsOpen}\n onChange={(valueChange, { action }) => {\n const op = options.find((option) => option.value === valueChange);\n setSelectedOption(op);\n onChange(op);\n setMenuIsOpen(false);\n if (action === 'select-option') {\n document.activeElement.blur();\n }\n }}\n onClickDropdownIndicator={() => setMenuIsOpen(!menuIsOpen)}\n onInputChange={(valueInput, action) => {\n if (valueInput || action.action === 'input-change') {\n if (!valueInput) {\n setCustom(defaultOption);\n onChange(defaultOption);\n } else if (!Number.isNaN(parseInt(valueInput, 10))) {\n const cleanValue = parseInt(valueInput, 10);\n const newOption = {\n label: `${cleanValue}%`,\n value: `${cleanValue}%`,\n id: 'custom',\n };\n setCustom(newOption);\n onChange(newOption);\n }\n }\n setMenuIsOpen(false);\n }}\n options={options}\n value={currentValue}\n />\n </div>\n );\n};\n\nconst zoomProps = {\n className: PropTypes.string.description('html class attribute'),\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n disabled: PropTypes.bool.description('disable component').defaultValue(false),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('current value'),\n onChange: PropTypes.func.description('function called when a new value is selected'),\n zoomOptions: PropTypes.shape({\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n default: PropTypes.bool,\n }).description('list of options to display in the select menu'),\n};\n\nDSZoom.propTypes = zoomProps;\n\nconst ZoomWithSchema = describe(DSZoom);\nZoomWithSchema.propTypes = zoomProps;\n\nexport { DSZoom, ZoomWithSchema };\nexport default DSZoom;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAgC;AAChC,wBAAoC;AACpC,2BAA0C;AAC1C,qBAA2B;AAC3B,yBAA+B;AAC/B,mBAAsB;AAEtB,MAAM,SAAS,CAAC;AAAA,EACd,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EACjB,iBAAiB;AAAA,EACjB,cAAc;AAAA,KACX;AAAA,MACC;AACJ,QAAM,EAAE,iBAAiB,oDAA0B,eAAe,WAAW;AAAA,IAC3E;AAAA;AAEF,QAAM,gBAAgB,YAAY,KAAK,CAAC,WAAW,OAAO;AAC1D,QAAM,CAAC,YAAY,iBAAiB,2BAAS;AAC7C,QAAM,CAAC,gBAAgB,qBAAqB,2BAAS;AACrD,QAAM,CAAC,QAAQ,aAAa,2BAC1B,CAAC,QACG,gBACA;AAAA,IACE,OAAO,GAAG,wBAAM;AAAA,IAChB,OAAO,wBAAM;AAAA,IACb,IAAI;AAAA;AAGZ,QAAM,UAAU,CAAC,QAAQ,GAAG,YAAY,OAAO,CAAC,WAAW,CAAC,OAAO;AAEnE,QAAM,eAAe,SAAS,gBAAgB,SAAS,QAAQ,SAAS,eAAe;AAEvF,SACE,mDAAC,OAAD;AAAA,IAAK,WAAW,GAAG;AAAA,OAAoB;AAAA,OAAoB;AAAA,KACzD,mDAAC,2BAAD;AAAA,IACE,YAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU,CAAC,aAAa,EAAE,aAAa;AACrC,YAAM,KAAK,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU;AACrD,wBAAkB;AAClB,eAAS;AACT,oBAAc;AACd,UAAI,WAAW,iBAAiB;AAC9B,iBAAS,cAAc;AAAA;AAAA;AAAA,IAG3B,0BAA0B,MAAM,cAAc,CAAC;AAAA,IAC/C,eAAe,CAAC,YAAY,WAAW;AACrC,UAAI,cAAc,OAAO,WAAW,gBAAgB;AAClD,YAAI,CAAC,YAAY;AACf,oBAAU;AACV,mBAAS;AAAA,mBACA,CAAC,OAAO,MAAM,SAAS,YAAY,MAAM;AAClD,gBAAM,aAAa,SAAS,YAAY;AACxC,gBAAM,YAAY;AAAA,YAChB,OAAO,GAAG;AAAA,YACV,OAAO,GAAG;AAAA,YACV,IAAI;AAAA;AAEN,oBAAU;AACV,mBAAS;AAAA;AAAA;AAGb,oBAAc;AAAA;AAAA,IAEhB;AAAA,IACA,OAAO;AAAA;AAAA;AAMf,MAAM,YAAY;AAAA,EAChB,WAAW,4BAAU,OAAO,YAAY;AAAA,EACxC,gBAAgB,4BAAU,OAAO,YAAY;AAAA,EAC7C,UAAU,4BAAU,KAAK,YAAY,qBAAqB,aAAa;AAAA,EACvE,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU,QAAQ,4BAAU,SAAS,YAAY;AAAA,EAC/F,UAAU,4BAAU,KAAK,YAAY;AAAA,EACrC,aAAa,4BAAU,MAAM;AAAA,IAC3B,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU;AAAA,IACxD,OAAO,4BAAU,UAAU,CAAC,4BAAU,QAAQ,4BAAU;AAAA,IACxD,SAAS,4BAAU;AAAA,KAClB,YAAY;AAAA;AAGjB,OAAO,YAAY;AAEnB,MAAM,iBAAiB,gCAAS;AAChC,eAAe,YAAY;AAG3B,IAAO,iBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/utils.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const getCurrentFont = () =>\n Number(\n window\n .getComputedStyle(document.querySelector(':root'))\n .getPropertyValue('font-size')\n .match(/\\d+/)[0],\n );\nexport const setSize = (size) =>\n document.querySelector(':root').setAttribute('style', `font-size: ${size}px`);\n\nexport const getFactor = (value) => value / 100;\n\nexport const clean = (value) => value.replace(/\\D/g, '').substring(0, 3);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,iBAAiB,MAC5B,OACE,OACG,iBAAiB,SAAS,cAAc,UACxC,iBAAiB,aACjB,MAAM,OAAO;AAEb,MAAM,UAAU,CAAC,SACtB,SAAS,cAAc,SAAS,aAAa,SAAS,cAAc;AAE/D,MAAM,YAAY,CAAC,UAAU,QAAQ;AAErC,MAAM,QAAQ,CAAC,UAAU,MAAM,QAAQ,OAAO,IAAI,UAAU,GAAG;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/components/zoomOptions.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export default [\n {\n label: '25%',\n value: '25',\n },\n {\n label: '50%',\n value: '50',\n },\n {\n label: '75%',\n value: '75',\n },\n {\n label: '100%',\n value: '100',\n default: true,\n },\n {\n label: '125%',\n value: '125',\n },\n {\n label: '150%',\n value: '150',\n },\n {\n label: '175%',\n value: '175',\n },\n {\n label: '200%',\n value: '200',\n },\n];\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,IAAO,sBAAQ;AAAA,EACb;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,SAAS;AAAA;AAAA,EAEX;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/cjs/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './DSZoom';\nexport { default } from './DSZoom';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,oBAAwB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/esm/DSZoom.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSZoom.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React, { useState } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSComboBox } from '@elliemae/ds-form';\nimport zoomDefaultOptions from './components/zoomOptions';\nimport { clean } from './components/utils';\n\nconst DSZoom = ({\n className = '',\n disabled = false,\n value = undefined,\n onChange = () => null,\n containerProps = {},\n zoomOptions = zoomDefaultOptions,\n ...otherProps\n}) => {\n const { cssClassName } = convertPropToCssClassName('zoom-resize', className, {\n disabled,\n });\n const defaultOption = zoomOptions.find((option) => option.default);\n const [menuIsOpen, setMenuIsOpen] = useState(false);\n const [selectedOption, setSelectedOption] = useState(defaultOption);\n const [custom, setCustom] = useState(\n !value\n ? defaultOption\n : {\n label: `${clean(value)}%`,\n value: clean(value),\n id: 'custom',\n },\n );\n const options = [custom, ...zoomOptions.filter((option) => !option.default)];\n\n const currentValue = value || selectedOption?.value || custom?.value || defaultOption?.value;\n\n return (\n <div className={`${cssClassName}`} {...containerProps} {...otherProps}>\n <DSComboBox\n searchable\n disabled={disabled}\n menuIsOpen={menuIsOpen}\n onChange={(valueChange, { action }) => {\n const op = options.find((option) => option.value === valueChange);\n setSelectedOption(op);\n onChange(op);\n setMenuIsOpen(false);\n if (action === 'select-option') {\n document.activeElement.blur();\n }\n }}\n onClickDropdownIndicator={() => setMenuIsOpen(!menuIsOpen)}\n onInputChange={(valueInput, action) => {\n if (valueInput || action.action === 'input-change') {\n if (!valueInput) {\n setCustom(defaultOption);\n onChange(defaultOption);\n } else if (!Number.isNaN(parseInt(valueInput, 10))) {\n const cleanValue = parseInt(valueInput, 10);\n const newOption = {\n label: `${cleanValue}%`,\n value: `${cleanValue}%`,\n id: 'custom',\n };\n setCustom(newOption);\n onChange(newOption);\n }\n }\n setMenuIsOpen(false);\n }}\n options={options}\n value={currentValue}\n />\n </div>\n );\n};\n\nconst zoomProps = {\n className: PropTypes.string.description('html class attribute'),\n containerProps: PropTypes.object.description('Set of Properties attached to the main container'),\n disabled: PropTypes.bool.description('disable component').defaultValue(false),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('current value'),\n onChange: PropTypes.func.description('function called when a new value is selected'),\n zoomOptions: PropTypes.shape({\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n default: PropTypes.bool,\n }).description('list of options to display in the select menu'),\n};\n\nDSZoom.propTypes = zoomProps;\n\nconst ZoomWithSchema = describe(DSZoom);\nZoomWithSchema.propTypes = zoomProps;\n\nexport { DSZoom, ZoomWithSchema };\nexport default DSZoom;\n"],
|
|
5
|
-
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,SAAS,CAAC;AAAA,EACd,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EACjB,iBAAiB;AAAA,EACjB,cAAc;AAAA,KACX;AAAA,MACC;AACJ,QAAM,EAAE,iBAAiB,0BAA0B,eAAe,WAAW;AAAA,IAC3E;AAAA;AAEF,QAAM,gBAAgB,YAAY,KAAK,CAAC,WAAW,OAAO;AAC1D,QAAM,CAAC,YAAY,iBAAiB,SAAS;AAC7C,QAAM,CAAC,gBAAgB,qBAAqB,SAAS;AACrD,QAAM,CAAC,QAAQ,aAAa,SAC1B,CAAC,QACG,gBACA;AAAA,IACE,OAAO,GAAG,MAAM;AAAA,IAChB,OAAO,MAAM;AAAA,IACb,IAAI;AAAA;AAGZ,QAAM,UAAU,CAAC,QAAQ,GAAG,YAAY,OAAO,CAAC,WAAW,CAAC,OAAO;AAEnE,QAAM,eAAe,SAAS,gBAAgB,SAAS,QAAQ,SAAS,eAAe;AAEvF,SACE,qCAAC,OAAD;AAAA,IAAK,WAAW,GAAG;AAAA,OAAoB;AAAA,OAAoB;AAAA,KACzD,qCAAC,YAAD;AAAA,IACE,YAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,UAAU,CAAC,aAAa,EAAE,aAAa;AACrC,YAAM,KAAK,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU;AACrD,wBAAkB;AAClB,eAAS;AACT,oBAAc;AACd,UAAI,WAAW,iBAAiB;AAC9B,iBAAS,cAAc;AAAA;AAAA;AAAA,IAG3B,0BAA0B,MAAM,cAAc,CAAC;AAAA,IAC/C,eAAe,CAAC,YAAY,WAAW;AACrC,UAAI,cAAc,OAAO,WAAW,gBAAgB;AAClD,YAAI,CAAC,YAAY;AACf,oBAAU;AACV,mBAAS;AAAA,mBACA,CAAC,OAAO,MAAM,SAAS,YAAY,MAAM;AAClD,gBAAM,aAAa,SAAS,YAAY;AACxC,gBAAM,YAAY;AAAA,YAChB,OAAO,GAAG;AAAA,YACV,OAAO,GAAG;AAAA,YACV,IAAI;AAAA;AAEN,oBAAU;AACV,mBAAS;AAAA;AAAA;AAGb,oBAAc;AAAA;AAAA,IAEhB;AAAA,IACA,OAAO;AAAA;AAAA;AAMf,MAAM,YAAY;AAAA,EAChB,WAAW,UAAU,OAAO,YAAY;AAAA,EACxC,gBAAgB,UAAU,OAAO,YAAY;AAAA,EAC7C,UAAU,UAAU,KAAK,YAAY,qBAAqB,aAAa;AAAA,EACvE,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,QAAQ,UAAU,SAAS,YAAY;AAAA,EAC/F,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,aAAa,UAAU,MAAM;AAAA,IAC3B,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,IACxD,OAAO,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU;AAAA,IACxD,SAAS,UAAU;AAAA,KAClB,YAAY;AAAA;AAGjB,OAAO,YAAY;AAEnB,MAAM,iBAAiB,SAAS;AAChC,eAAe,YAAY;AAG3B,IAAO,iBAAQ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/utils.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const getCurrentFont = () =>\n Number(\n window\n .getComputedStyle(document.querySelector(':root'))\n .getPropertyValue('font-size')\n .match(/\\d+/)[0],\n );\nexport const setSize = (size) =>\n document.querySelector(':root').setAttribute('style', `font-size: ${size}px`);\n\nexport const getFactor = (value) => value / 100;\n\nexport const clean = (value) => value.replace(/\\D/g, '').substring(0, 3);\n"],
|
|
5
|
-
"mappings": "AAAA;ACAO,MAAM,iBAAiB,MAC5B,OACE,OACG,iBAAiB,SAAS,cAAc,UACxC,iBAAiB,aACjB,MAAM,OAAO;AAEb,MAAM,UAAU,CAAC,SACtB,SAAS,cAAc,SAAS,aAAa,SAAS,cAAc;AAE/D,MAAM,YAAY,CAAC,UAAU,QAAQ;AAErC,MAAM,QAAQ,CAAC,UAAU,MAAM,QAAQ,OAAO,IAAI,UAAU,GAAG;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/zoomOptions.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export default [\n {\n label: '25%',\n value: '25',\n },\n {\n label: '50%',\n value: '50',\n },\n {\n label: '75%',\n value: '75',\n },\n {\n label: '100%',\n value: '100',\n default: true,\n },\n {\n label: '125%',\n value: '125',\n },\n {\n label: '150%',\n value: '150',\n },\n {\n label: '175%',\n value: '175',\n },\n {\n label: '200%',\n value: '200',\n },\n];\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA,IAAO,sBAAQ;AAAA,EACb;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP,SAAS;AAAA;AAAA,EAEX;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA,EAET;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/esm/index.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSZoom';\nexport { default } from './DSZoom';\n"],
|
|
5
|
-
"mappings": "AAAA;ACAA;AACA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|