@elliemae/ds-slider 2.0.0-next.6 → 2.0.0-rc.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/cjs/DSSlider.js +5 -0
- package/cjs/components/SliderImp.js +14 -11
- package/cjs/components/Thumb.js +11 -5
- package/cjs/components/TickMarksValues.js +2 -0
- package/cjs/components/Track.js +10 -4
- package/cjs/components/styled.js +21 -12
- package/cjs/components/utils.js +15 -5
- package/esm/DSSlider.js +5 -0
- package/esm/components/SliderImp.js +13 -9
- package/esm/components/Thumb.js +11 -5
- package/esm/components/TickMarksValues.js +2 -0
- package/esm/components/Track.js +10 -4
- package/esm/components/styled.js +21 -12
- package/esm/components/utils.js +13 -3
- package/package.json +8 -8
package/cjs/DSSlider.js
CHANGED
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
5
10
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
11
|
require('react');
|
|
7
12
|
var reactDesc = require('react-desc');
|
|
@@ -5,7 +5,7 @@ require('core-js/modules/web.dom-collections.iterator.js');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var uuid = require('uuid');
|
|
7
7
|
var reactRange = require('react-range');
|
|
8
|
-
var
|
|
8
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
9
9
|
var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
|
|
10
10
|
var dsGrid = require('@elliemae/ds-grid');
|
|
11
11
|
var Track = require('./Track.js');
|
|
@@ -18,11 +18,11 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
18
18
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
19
19
|
|
|
20
20
|
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
21
|
-
var usePrevious__default = /*#__PURE__*/_interopDefaultLegacy(usePrevious);
|
|
22
21
|
var DSTruncatedTooltipText__default = /*#__PURE__*/_interopDefaultLegacy(DSTruncatedTooltipText);
|
|
23
22
|
|
|
24
|
-
const getSubArrayFromRange = (arr,
|
|
25
|
-
|
|
23
|
+
const getSubArrayFromRange = function (arr, _ref) {
|
|
24
|
+
let [minVal, maxVal] = _ref;
|
|
25
|
+
let isCustomTickMarksValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
26
26
|
const trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;
|
|
27
27
|
const minIndex = arr.findIndex(el => el === trueMinVal);
|
|
28
28
|
|
|
@@ -94,7 +94,7 @@ const SliderImp = props => {
|
|
|
94
94
|
const selectedRangeValues = getSubArrayFromRange(parsedValuesArray, rangeValues, !!(customTickMarksValues !== null && customTickMarksValues !== void 0 && customTickMarksValues.length));
|
|
95
95
|
setFullSelectedValues(selectedRangeValues);
|
|
96
96
|
}, [parsedValuesArray, rangeValues, customTickMarksValues === null || customTickMarksValues === void 0 ? void 0 : customTickMarksValues.length]);
|
|
97
|
-
const prevWithTwoHandles =
|
|
97
|
+
const prevWithTwoHandles = dsUtilities.usePrevious(withTwoHandles);
|
|
98
98
|
|
|
99
99
|
const resizeHandler = () => {
|
|
100
100
|
var _ref$current;
|
|
@@ -170,12 +170,15 @@ const SliderImp = props => {
|
|
|
170
170
|
setRangeValues(values);
|
|
171
171
|
onChange(values);
|
|
172
172
|
},
|
|
173
|
-
renderTrack:
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
173
|
+
renderTrack: _ref2 => {
|
|
174
|
+
let {
|
|
175
|
+
props: trackProps,
|
|
176
|
+
children
|
|
177
|
+
} = _ref2;
|
|
178
|
+
return /*#__PURE__*/_jsx__default["default"](Track, {
|
|
179
|
+
props: trackProps
|
|
180
|
+
}, void 0, children);
|
|
181
|
+
},
|
|
179
182
|
renderThumb: renderArgs => {
|
|
180
183
|
const {
|
|
181
184
|
index,
|
package/cjs/components/Thumb.js
CHANGED
|
@@ -3,6 +3,11 @@
|
|
|
3
3
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
4
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
5
5
|
require('core-js/modules/web.dom-collections.iterator.js');
|
|
6
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
8
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
9
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
6
11
|
var React = require('react');
|
|
7
12
|
var dsTooltip = require('@elliemae/ds-tooltip');
|
|
8
13
|
var context = require('./context.js');
|
|
@@ -21,11 +26,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
21
26
|
|
|
22
27
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
23
28
|
|
|
24
|
-
const Thumb =
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
+
const Thumb = _ref => {
|
|
30
|
+
let {
|
|
31
|
+
index,
|
|
32
|
+
props,
|
|
33
|
+
isDragged
|
|
34
|
+
} = _ref;
|
|
29
35
|
const [isHovered, setIsHovered] = React.useState(false);
|
|
30
36
|
const {
|
|
31
37
|
disabled,
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
4
6
|
var React = require('react');
|
|
5
7
|
var styled = require('styled-components');
|
|
6
8
|
var dsSystem = require('@elliemae/ds-system');
|
package/cjs/components/Track.js
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
4
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
6
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
3
8
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
4
9
|
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
5
10
|
var React = require('react');
|
|
@@ -23,10 +28,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
23
28
|
|
|
24
29
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
25
30
|
|
|
26
|
-
const Track =
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
31
|
+
const Track = _ref => {
|
|
32
|
+
let {
|
|
33
|
+
children,
|
|
34
|
+
props
|
|
35
|
+
} = _ref;
|
|
30
36
|
const {
|
|
31
37
|
disabled,
|
|
32
38
|
minValue,
|
package/cjs/components/styled.js
CHANGED
|
@@ -13,16 +13,22 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
|
13
13
|
/* eslint-disable indent */
|
|
14
14
|
const ThumbStyled = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
15
15
|
componentId: "sc-24in0j-0"
|
|
16
|
-
})(["height:20px;width:20px;background-color:", ";border-radius:10px;border:1px solid ", ";:focus{border:1px solid ", ";outline:unset;}:hover{background-color:", ";}"], props => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000'], props => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400], props => props.theme.colors.brand[600],
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
})(["height:20px;width:20px;background-color:", ";border-radius:10px;border:1px solid ", ";:focus{border:1px solid ", ";outline:unset;}:hover{background-color:", ";}"], props => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000'], props => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400], props => props.theme.colors.brand[600], _ref => {
|
|
17
|
+
let {
|
|
18
|
+
disabled,
|
|
19
|
+
theme
|
|
20
|
+
} = _ref;
|
|
21
|
+
return disabled ? theme.colors.neutral[100] : theme.colors.brand[200];
|
|
22
|
+
});
|
|
20
23
|
const TooltipContainerStyled = /*#__PURE__*/styled__default["default"](dsTooltip.TooltipContainer).withConfig({
|
|
21
24
|
componentId: "sc-24in0j-1"
|
|
22
|
-
})(["position:relative;display:flex;align-items:center;flex-direction:column;top:-35px;width:max-content;left:50%;transform:translateX(-50%);visibility:", ";"],
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
25
|
+
})(["position:relative;display:flex;align-items:center;flex-direction:column;top:-35px;width:max-content;left:50%;transform:translateX(-50%);visibility:", ";"], _ref2 => {
|
|
26
|
+
let {
|
|
27
|
+
isDragged,
|
|
28
|
+
isHovered
|
|
29
|
+
} = _ref2;
|
|
30
|
+
return isDragged || isHovered ? 'visible' : 'hidden';
|
|
31
|
+
}); // TODO: didn't work with DSTooltip, see how to improve
|
|
26
32
|
|
|
27
33
|
const TooltipArrow = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
28
34
|
componentId: "sc-24in0j-2"
|
|
@@ -35,10 +41,13 @@ const LabelText = /*#__PURE__*/styled__default["default"].span.withConfig({
|
|
|
35
41
|
})(["color:", ";"], props => props.theme.colors.neutral[600]);
|
|
36
42
|
const ValueText = /*#__PURE__*/styled__default["default"].span.withConfig({
|
|
37
43
|
componentId: "sc-24in0j-5"
|
|
38
|
-
})(["color:", ";"],
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
44
|
+
})(["color:", ";"], _ref3 => {
|
|
45
|
+
let {
|
|
46
|
+
disabled,
|
|
47
|
+
theme
|
|
48
|
+
} = _ref3;
|
|
49
|
+
return theme.colors.neutral[disabled ? 500 : 800];
|
|
50
|
+
});
|
|
42
51
|
const StyledRangeWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
43
52
|
componentId: "sc-24in0j-6"
|
|
44
53
|
})(["min-height:28px;margin:0 10px;"]);
|
package/cjs/components/utils.js
CHANGED
|
@@ -2,14 +2,20 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
6
6
|
|
|
7
7
|
/* eslint-disable max-params */
|
|
8
|
-
const conformedLabel = (rangeValues
|
|
8
|
+
const conformedLabel = function (rangeValues) {
|
|
9
|
+
let label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
10
|
+
let labelWithValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
11
|
+
let withTwoHandles = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
12
|
+
let customTickMarksValues = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
|
|
13
|
+
let step = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
|
|
14
|
+
let minValue = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
|
|
9
15
|
const msg = label.trim();
|
|
10
16
|
let value = '';
|
|
11
17
|
|
|
12
|
-
if (!
|
|
18
|
+
if (!dsUtilities.isEmpty(customTickMarksValues) && labelWithValue && label) {
|
|
13
19
|
const firstValue = customTickMarksValues[(rangeValues[0] - minValue) / step];
|
|
14
20
|
const secondValue = customTickMarksValues[(rangeValues[1] - minValue) / step];
|
|
15
21
|
value = "".concat(firstValue || rangeValues[0].toFixed(1), " ").concat(withTwoHandles ? ", ".concat(secondValue || rangeValues[1].toFixed(1)) : '', " ");
|
|
@@ -22,10 +28,14 @@ const conformedLabel = (rangeValues, label = '', labelWithValue = false, withTwo
|
|
|
22
28
|
value = value.trim();
|
|
23
29
|
return [msg, value];
|
|
24
30
|
};
|
|
25
|
-
const conformedThumbLabel = (rangeValues
|
|
31
|
+
const conformedThumbLabel = function (rangeValues) {
|
|
32
|
+
let customTickMarksValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
33
|
+
let index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
34
|
+
let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
|
|
35
|
+
let minValue = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
|
|
26
36
|
let msg = "Value: ";
|
|
27
37
|
|
|
28
|
-
if (!
|
|
38
|
+
if (!dsUtilities.isEmpty(customTickMarksValues)) {
|
|
29
39
|
const foundValue = customTickMarksValues[(rangeValues[index] - minValue) / step];
|
|
30
40
|
msg += "".concat(foundValue || rangeValues[index].toFixed(1));
|
|
31
41
|
} else {
|
package/esm/DSSlider.js
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
7
|
import 'react';
|
|
3
8
|
import { describe } from 'react-desc';
|
|
@@ -3,7 +3,7 @@ import 'core-js/modules/web.dom-collections.iterator.js';
|
|
|
3
3
|
import { useRef, useState, useMemo, useEffect } from 'react';
|
|
4
4
|
import { v4 } from 'uuid';
|
|
5
5
|
import { Range } from 'react-range';
|
|
6
|
-
import usePrevious from '@elliemae/ds-utilities
|
|
6
|
+
import { usePrevious } from '@elliemae/ds-utilities';
|
|
7
7
|
import DSTruncatedTooltipText, { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';
|
|
8
8
|
import { Grid } from '@elliemae/ds-grid';
|
|
9
9
|
import Track from './Track.js';
|
|
@@ -13,8 +13,9 @@ import { conformedLabel } from './utils.js';
|
|
|
13
13
|
import { SliderContext } from './context.js';
|
|
14
14
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
15
15
|
|
|
16
|
-
const getSubArrayFromRange = (arr,
|
|
17
|
-
|
|
16
|
+
const getSubArrayFromRange = function (arr, _ref) {
|
|
17
|
+
let [minVal, maxVal] = _ref;
|
|
18
|
+
let isCustomTickMarksValues = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
18
19
|
const trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;
|
|
19
20
|
const minIndex = arr.findIndex(el => el === trueMinVal);
|
|
20
21
|
|
|
@@ -162,12 +163,15 @@ const SliderImp = props => {
|
|
|
162
163
|
setRangeValues(values);
|
|
163
164
|
onChange(values);
|
|
164
165
|
},
|
|
165
|
-
renderTrack:
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
166
|
+
renderTrack: _ref2 => {
|
|
167
|
+
let {
|
|
168
|
+
props: trackProps,
|
|
169
|
+
children
|
|
170
|
+
} = _ref2;
|
|
171
|
+
return /*#__PURE__*/_jsx(Track, {
|
|
172
|
+
props: trackProps
|
|
173
|
+
}, void 0, children);
|
|
174
|
+
},
|
|
171
175
|
renderThumb: renderArgs => {
|
|
172
176
|
const {
|
|
173
177
|
index,
|
package/esm/components/Thumb.js
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
7
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
3
8
|
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
@@ -14,11 +19,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
14
19
|
|
|
15
20
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
16
21
|
|
|
17
|
-
const Thumb =
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
+
const Thumb = _ref => {
|
|
23
|
+
let {
|
|
24
|
+
index,
|
|
25
|
+
props,
|
|
26
|
+
isDragged
|
|
27
|
+
} = _ref;
|
|
22
28
|
const [isHovered, setIsHovered] = useState(false);
|
|
23
29
|
const {
|
|
24
30
|
disabled,
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
+
import 'core-js/modules/esnext.async-iterator.map.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.map.js';
|
|
2
4
|
import { useContext, useMemo } from 'react';
|
|
3
5
|
import styled from 'styled-components';
|
|
4
6
|
import { __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
|
package/esm/components/Track.js
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
import 'core-js/modules/esnext.async-iterator.filter.js';
|
|
2
|
+
import 'core-js/modules/esnext.iterator.constructor.js';
|
|
3
|
+
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
+
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
+
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
1
6
|
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
7
|
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
3
8
|
import { useContext } from 'react';
|
|
@@ -15,10 +20,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
15
20
|
|
|
16
21
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
17
22
|
|
|
18
|
-
const Track =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
23
|
+
const Track = _ref => {
|
|
24
|
+
let {
|
|
25
|
+
children,
|
|
26
|
+
props
|
|
27
|
+
} = _ref;
|
|
22
28
|
const {
|
|
23
29
|
disabled,
|
|
24
30
|
minValue,
|
package/esm/components/styled.js
CHANGED
|
@@ -5,16 +5,22 @@ import { TooltipContainer } from '@elliemae/ds-tooltip';
|
|
|
5
5
|
/* eslint-disable indent */
|
|
6
6
|
const ThumbStyled = /*#__PURE__*/styled.div.withConfig({
|
|
7
7
|
componentId: "sc-24in0j-0"
|
|
8
|
-
})(["height:20px;width:20px;background-color:", ";border-radius:10px;border:1px solid ", ";:focus{border:1px solid ", ";outline:unset;}:hover{background-color:", ";}"], props => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000'], props => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400], props => props.theme.colors.brand[600],
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
})(["height:20px;width:20px;background-color:", ";border-radius:10px;border:1px solid ", ";:focus{border:1px solid ", ";outline:unset;}:hover{background-color:", ";}"], props => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral['000'], props => props.disabled ? props.theme.colors.neutral[100] : props.theme.colors.neutral[400], props => props.theme.colors.brand[600], _ref => {
|
|
9
|
+
let {
|
|
10
|
+
disabled,
|
|
11
|
+
theme
|
|
12
|
+
} = _ref;
|
|
13
|
+
return disabled ? theme.colors.neutral[100] : theme.colors.brand[200];
|
|
14
|
+
});
|
|
12
15
|
const TooltipContainerStyled = /*#__PURE__*/styled(TooltipContainer).withConfig({
|
|
13
16
|
componentId: "sc-24in0j-1"
|
|
14
|
-
})(["position:relative;display:flex;align-items:center;flex-direction:column;top:-35px;width:max-content;left:50%;transform:translateX(-50%);visibility:", ";"],
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
})(["position:relative;display:flex;align-items:center;flex-direction:column;top:-35px;width:max-content;left:50%;transform:translateX(-50%);visibility:", ";"], _ref2 => {
|
|
18
|
+
let {
|
|
19
|
+
isDragged,
|
|
20
|
+
isHovered
|
|
21
|
+
} = _ref2;
|
|
22
|
+
return isDragged || isHovered ? 'visible' : 'hidden';
|
|
23
|
+
}); // TODO: didn't work with DSTooltip, see how to improve
|
|
18
24
|
|
|
19
25
|
const TooltipArrow = /*#__PURE__*/styled.div.withConfig({
|
|
20
26
|
componentId: "sc-24in0j-2"
|
|
@@ -27,10 +33,13 @@ const LabelText = /*#__PURE__*/styled.span.withConfig({
|
|
|
27
33
|
})(["color:", ";"], props => props.theme.colors.neutral[600]);
|
|
28
34
|
const ValueText = /*#__PURE__*/styled.span.withConfig({
|
|
29
35
|
componentId: "sc-24in0j-5"
|
|
30
|
-
})(["color:", ";"],
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
36
|
+
})(["color:", ";"], _ref3 => {
|
|
37
|
+
let {
|
|
38
|
+
disabled,
|
|
39
|
+
theme
|
|
40
|
+
} = _ref3;
|
|
41
|
+
return theme.colors.neutral[disabled ? 500 : 800];
|
|
42
|
+
});
|
|
34
43
|
const StyledRangeWrapper = /*#__PURE__*/styled.div.withConfig({
|
|
35
44
|
componentId: "sc-24in0j-6"
|
|
36
45
|
})(["min-height:28px;margin:0 10px;"]);
|
package/esm/components/utils.js
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
|
-
import { isEmpty } from '@elliemae/ds-utilities
|
|
1
|
+
import { isEmpty } from '@elliemae/ds-utilities';
|
|
2
2
|
|
|
3
3
|
/* eslint-disable max-params */
|
|
4
|
-
const conformedLabel = (rangeValues
|
|
4
|
+
const conformedLabel = function (rangeValues) {
|
|
5
|
+
let label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
|
|
6
|
+
let labelWithValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
7
|
+
let withTwoHandles = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
8
|
+
let customTickMarksValues = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
|
|
9
|
+
let step = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 1;
|
|
10
|
+
let minValue = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
|
|
5
11
|
const msg = label.trim();
|
|
6
12
|
let value = '';
|
|
7
13
|
|
|
@@ -18,7 +24,11 @@ const conformedLabel = (rangeValues, label = '', labelWithValue = false, withTwo
|
|
|
18
24
|
value = value.trim();
|
|
19
25
|
return [msg, value];
|
|
20
26
|
};
|
|
21
|
-
const conformedThumbLabel = (rangeValues
|
|
27
|
+
const conformedThumbLabel = function (rangeValues) {
|
|
28
|
+
let customTickMarksValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
|
|
29
|
+
let index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
|
|
30
|
+
let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
|
|
31
|
+
let minValue = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
|
|
22
32
|
let msg = "Value: ";
|
|
23
33
|
|
|
24
34
|
if (!isEmpty(customTickMarksValues)) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-slider",
|
|
3
|
-
"version": "2.0.0-
|
|
3
|
+
"version": "2.0.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Slider",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -72,23 +72,23 @@
|
|
|
72
72
|
"build": "node ../../scripts/build/build.js"
|
|
73
73
|
},
|
|
74
74
|
"dependencies": {
|
|
75
|
-
"@elliemae/ds-grid": "2.0.0-
|
|
76
|
-
"@elliemae/ds-system": "2.0.0-
|
|
77
|
-
"@elliemae/ds-tooltip": "2.0.0-
|
|
78
|
-
"@elliemae/ds-truncated-tooltip-text": "2.0.0-
|
|
79
|
-
"@elliemae/ds-utilities": "2.0.0-
|
|
75
|
+
"@elliemae/ds-grid": "2.0.0-rc.1",
|
|
76
|
+
"@elliemae/ds-system": "2.0.0-rc.1",
|
|
77
|
+
"@elliemae/ds-tooltip": "2.0.0-rc.1",
|
|
78
|
+
"@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.1",
|
|
79
|
+
"@elliemae/ds-utilities": "2.0.0-rc.1",
|
|
80
80
|
"prop-types": "~15.7.2",
|
|
81
81
|
"react-desc": "~4.1.3",
|
|
82
82
|
"react-range": "~1.8.11",
|
|
83
83
|
"uuid": "~8.3.2"
|
|
84
84
|
},
|
|
85
85
|
"devDependencies": {
|
|
86
|
-
"styled-components": "~5.3.
|
|
86
|
+
"styled-components": "~5.3.3"
|
|
87
87
|
},
|
|
88
88
|
"peerDependencies": {
|
|
89
89
|
"react": "^17.0.2",
|
|
90
90
|
"react-dom": "^17.0.2",
|
|
91
|
-
"styled-components": "^5.3.
|
|
91
|
+
"styled-components": "^5.3.3"
|
|
92
92
|
},
|
|
93
93
|
"publishConfig": {
|
|
94
94
|
"access": "public",
|