@elliemae/ds-slider 3.12.0-rc.2 → 3.12.0-rc.3
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/dist/cjs/DSSlider.js +1 -3
- package/dist/cjs/DSSlider.js.map +1 -1
- package/dist/cjs/components/SliderImp.js +37 -46
- package/dist/cjs/components/SliderImp.js.map +1 -1
- package/dist/cjs/components/Thumb.js +22 -15
- package/dist/cjs/components/Thumb.js.map +1 -1
- package/dist/cjs/components/TickMarks.js +2 -9
- package/dist/cjs/components/TickMarks.js.map +1 -1
- package/dist/cjs/components/TickMarksValues.js +2 -8
- package/dist/cjs/components/TickMarksValues.js.map +1 -1
- package/dist/cjs/components/Track.js +8 -7
- package/dist/cjs/components/Track.js.map +1 -1
- package/dist/esm/DSSlider.js +1 -3
- package/dist/esm/DSSlider.js.map +1 -1
- package/dist/esm/components/SliderImp.js +37 -46
- package/dist/esm/components/SliderImp.js.map +1 -1
- package/dist/esm/components/Thumb.js +22 -15
- package/dist/esm/components/Thumb.js.map +1 -1
- package/dist/esm/components/TickMarks.js +2 -9
- package/dist/esm/components/TickMarks.js.map +1 -1
- package/dist/esm/components/TickMarksValues.js +2 -8
- package/dist/esm/components/TickMarksValues.js.map +1 -1
- package/dist/esm/components/Track.js +8 -7
- package/dist/esm/components/Track.js.map +1 -1
- package/package.json +6 -6
package/dist/cjs/DSSlider.js
CHANGED
|
@@ -34,9 +34,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
34
34
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
35
35
|
var import_SliderImp = __toESM(require("./components/SliderImp"));
|
|
36
36
|
var import_prop_types = require("./prop-types");
|
|
37
|
-
const DSSlider = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SliderImp.default, {
|
|
38
|
-
...props
|
|
39
|
-
});
|
|
37
|
+
const DSSlider = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SliderImp.default, { ...props });
|
|
40
38
|
DSSlider.defaultProps = import_prop_types.defaultProps;
|
|
41
39
|
DSSlider.propTypes = import_prop_types.sliderPropTypes;
|
|
42
40
|
DSSlider.displayName = "DSSlider";
|
package/dist/cjs/DSSlider.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSSlider.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport SliderImp from './components/SliderImp';\nimport { defaultProps, sliderPropTypes } from './prop-types';\n\nconst DSSlider = (props) => <SliderImp {...props} />;\n\nDSSlider.defaultProps = defaultProps;\nDSSlider.propTypes = sliderPropTypes;\nDSSlider.displayName = 'DSSlider';\nconst DSSliderWithSchema = describe(DSSlider);\nDSSliderWithSchema.propTypes = sliderPropTypes;\n\nexport { DSSlider, DSSliderWithSchema };\nexport default DSSlider;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKK;AAJ5B,0BAAyB;AACzB,uBAAsB;AACtB,wBAA8C;AAE9C,MAAM,WAAW,CAAC,UAAU,4CAAC,iBAAAA,SAAA
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADKK;AAJ5B,0BAAyB;AACzB,uBAAsB;AACtB,wBAA8C;AAE9C,MAAM,WAAW,CAAC,UAAU,4CAAC,iBAAAA,SAAA,EAAW,GAAG,OAAO;AAElD,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,yBAAqB,8BAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAG/B,IAAO,mBAAQ;",
|
|
6
6
|
"names": ["SliderImp"]
|
|
7
7
|
}
|
|
@@ -126,30 +126,24 @@ const SliderImp = (props) => {
|
|
|
126
126
|
() => (0, import_utils.conformedLabel)(rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep),
|
|
127
127
|
[rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep]
|
|
128
128
|
);
|
|
129
|
-
const SliderLabel = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
130
|
-
children:
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
finalLabelText && " ",
|
|
135
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.ValueText, {
|
|
136
|
-
disabled,
|
|
137
|
-
children: finalValueText
|
|
138
|
-
})
|
|
139
|
-
]
|
|
140
|
-
});
|
|
129
|
+
const SliderLabel = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
130
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.LabelText, { children: finalLabelText }),
|
|
131
|
+
finalLabelText && " ",
|
|
132
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.ValueText, { disabled, children: finalValueText })
|
|
133
|
+
] });
|
|
141
134
|
const theme = (0, import_react.useContext)(import_ds_system.ThemeContext);
|
|
142
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.TooltipTextProvider, {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
135
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.TooltipTextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
136
|
+
import_ds_grid.Grid,
|
|
137
|
+
{
|
|
138
|
+
width: "100%",
|
|
139
|
+
style: { maxWidth: "100%" },
|
|
140
|
+
containerProps,
|
|
141
|
+
"data-testid": "slider",
|
|
142
|
+
alignItems: "center",
|
|
143
|
+
rows: ["auto", "auto"],
|
|
144
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
145
|
+
import_context.SliderContext.Provider,
|
|
146
|
+
{
|
|
153
147
|
value: {
|
|
154
148
|
disabled,
|
|
155
149
|
sliderUUID,
|
|
@@ -168,14 +162,10 @@ const SliderImp = (props) => {
|
|
|
168
162
|
zIndex: zIndex ?? theme.zIndex.tooltip
|
|
169
163
|
},
|
|
170
164
|
children: [
|
|
171
|
-
finalLabelText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.LabelWrapper, {
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
})
|
|
176
|
-
}),
|
|
177
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledRangeWrapper, {
|
|
178
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_range.Range, {
|
|
165
|
+
finalLabelText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.LabelWrapper, { width, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_truncated_tooltip_text.default, { value: SliderLabel }) }),
|
|
166
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledRangeWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
167
|
+
import_react_range.Range,
|
|
168
|
+
{
|
|
179
169
|
step: parsedStep,
|
|
180
170
|
min: parsedMinValue,
|
|
181
171
|
max: parsedMaxValue,
|
|
@@ -187,26 +177,27 @@ const SliderImp = (props) => {
|
|
|
187
177
|
setRangeValues(values);
|
|
188
178
|
onChange(values);
|
|
189
179
|
},
|
|
190
|
-
renderTrack: ({ props: trackProps, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Track.default, {
|
|
191
|
-
props: trackProps,
|
|
192
|
-
children
|
|
193
|
-
}),
|
|
180
|
+
renderTrack: ({ props: trackProps, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Track.default, { props: trackProps, children }),
|
|
194
181
|
renderThumb: (renderArgs) => {
|
|
195
182
|
const { index, props: thumbProps, isDragged } = renderArgs;
|
|
196
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
184
|
+
import_Thumb.default,
|
|
185
|
+
{
|
|
186
|
+
props: thumbProps,
|
|
187
|
+
isDragged,
|
|
188
|
+
index
|
|
189
|
+
},
|
|
190
|
+
`${sliderUUID}-${thumbProps.key}`
|
|
191
|
+
);
|
|
201
192
|
},
|
|
202
193
|
allowOverlap: false
|
|
203
|
-
}
|
|
204
|
-
})
|
|
194
|
+
}
|
|
195
|
+
) })
|
|
205
196
|
]
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
}
|
|
209
|
-
});
|
|
197
|
+
}
|
|
198
|
+
)
|
|
199
|
+
}
|
|
200
|
+
) }) });
|
|
210
201
|
};
|
|
211
202
|
var SliderImp_default = SliderImp;
|
|
212
203
|
//# sourceMappingURL=SliderImp.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/SliderImp.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React, { useState, useEffect, useRef, useMemo, useContext } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { Range } from 'react-range';\nimport { usePrevious } from '@elliemae/ds-utilities';\nimport DSTruncatedTooltipText, { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport Track from './Track';\nimport Thumb from './Thumb';\nimport { LabelWrapper, StyledRangeWrapper, LabelText, ValueText } from './styled';\nimport { conformedLabel } from './utils';\nimport { SliderContext } from './context';\n\nconst getSubArrayFromRange = (\n arr,\n [minVal, maxVal], // maxValue is undefined when only one handler\n isCustomTickMarksValues = false,\n) => {\n const trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;\n const minIndex = arr.findIndex((el) => el === trueMinVal);\n\n if (maxVal !== undefined) {\n // if two handlers, return the found slice\n const trueMaxVal = isCustomTickMarksValues ? arr[maxVal] : maxVal;\n const maxIndex = arr.findIndex((el) => el === trueMaxVal);\n\n if (minIndex >= 0 && maxIndex > minIndex) return arr.slice(minIndex, maxIndex + 1);\n return [];\n }\n // if only one handler, return the value in an array\n return [trueMinVal];\n};\n\nconst SliderImp = (props) => {\n const {\n containerProps,\n disabled,\n label,\n labelWithValue,\n minValue,\n maxValue,\n step,\n onChange,\n withTickMarks,\n withTickMarksValues,\n withTwoHandles,\n customTickMarksValues,\n zIndex,\n } = props;\n const ref = useRef();\n const [width, setWidth] = useState(0);\n const sliderUUID = useMemo(() => uuidv4(), []);\n\n const parsedMinValue = useMemo(() => {\n // ensure this works correctly with customTickMarksValues array\n if (customTickMarksValues?.length) return 0;\n return minValue;\n }, [customTickMarksValues?.length, minValue]);\n const parsedMaxValue = useMemo(() => {\n // ensure this works correctly with customTickMarksValues array\n if (customTickMarksValues?.length) return customTickMarksValues?.length - 1;\n return maxValue;\n }, [customTickMarksValues?.length, maxValue]);\n const parsedStep = useMemo(() => {\n // ensure this works correctly with customTickMarksValues array\n if (customTickMarksValues?.length) return 1;\n return step;\n }, [customTickMarksValues?.length, step]);\n\n const parsedValuesArray = useMemo(() => {\n // ensure this works correctly with customTickMarksValues array\n if (customTickMarksValues?.length) return customTickMarksValues;\n const newLength = Math.ceil(maxValue / step);\n const valuesArray = [];\n for (let i = 0; i <= newLength; i += 1) {\n valuesArray.push(step * i);\n }\n\n return valuesArray;\n }, [customTickMarksValues?.length, minValue, maxValue, step]);\n\n const [rangeValues, setRangeValues] = useState(withTwoHandles ? [parsedMinValue, parsedMaxValue] : [parsedMinValue]);\n // track the full slice of values selected instead of only the limits\n // this is important to handle the selected range labels colors\n const [fullSelectedValues, setFullSelectedValues] = useState([]);\n useEffect(() => {\n const selectedRangeValues = getSubArrayFromRange(parsedValuesArray, rangeValues, !!customTickMarksValues?.length);\n setFullSelectedValues(selectedRangeValues);\n }, [parsedValuesArray, rangeValues, customTickMarksValues?.length]);\n\n const prevWithTwoHandles = usePrevious(withTwoHandles);\n const resizeHandler = () => {\n setWidth(0);\n setWidth(ref.current?.clientWidth);\n };\n useEffect(() => {\n window.addEventListener('resize', resizeHandler);\n return () => window.removeEventListener('resize', resizeHandler);\n });\n useEffect(() => {\n if (!prevWithTwoHandles && withTwoHandles) {\n setRangeValues([parsedMinValue, parsedMaxValue]);\n } else if (prevWithTwoHandles && !withTwoHandles) {\n setRangeValues([parsedMinValue]);\n }\n }, [withTwoHandles]);\n\n useEffect(() => {\n setWidth(ref.current?.clientWidth);\n }, [ref.current?.clientWidth]);\n\n const [finalLabelText, finalValueText] = useMemo(\n () => conformedLabel(rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep),\n [rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep],\n );\n\n const SliderLabel = (\n <>\n <LabelText>{finalLabelText}</LabelText>\n {finalLabelText && ' '}\n <ValueText disabled={disabled}>{finalValueText}</ValueText>\n </>\n );\n\n const theme = useContext(ThemeContext);\n\n return (\n <TooltipTextProvider>\n <div ref={ref}>\n <Grid\n width=\"100%\"\n style={{ maxWidth: '100%' }}\n containerProps={containerProps}\n data-testid=\"slider\"\n alignItems=\"center\"\n rows={['auto', 'auto']}\n >\n <SliderContext.Provider\n value={{\n disabled,\n sliderUUID,\n label,\n labelWithValue,\n minValue: parsedMinValue,\n maxValue: parsedMaxValue,\n step: parsedStep,\n parsedValuesArray,\n withTickMarks,\n withTickMarksValues,\n withTwoHandles,\n customTickMarksValues,\n rangeValues,\n fullSelectedValues,\n zIndex: zIndex ?? theme.zIndex.tooltip,\n }}\n >\n {finalLabelText && (\n <LabelWrapper width={width}>\n <DSTruncatedTooltipText value={SliderLabel} />\n </LabelWrapper>\n )}\n <StyledRangeWrapper>\n <Range\n step={parsedStep}\n min={parsedMinValue}\n max={parsedMaxValue}\n values={rangeValues}\n disabled={disabled}\n onChange={(values) => {\n if (withTwoHandles && values[0] === values[1]) return;\n setRangeValues(values);\n onChange(values);\n }}\n renderTrack={({ props: trackProps, children }) => <Track props={trackProps}>{children}</Track>}\n renderThumb={(renderArgs) => {\n const { index, props: thumbProps, isDragged } = renderArgs;\n return (\n <Thumb\n key={`${sliderUUID}-${thumbProps.key}`}\n props={thumbProps}\n isDragged={isDragged}\n index={index}\n />\n );\n }}\n allowOverlap={false}\n />\n </StyledRangeWrapper>\n </SliderContext.Provider>\n </Grid>\n </div>\n </TooltipTextProvider>\n );\n};\n\n// SliderImp.propTypes = sliderPropTypes;\n\nexport default SliderImp;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "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
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["uuidv4", "DSTruncatedTooltipText", "Track", "Thumb"]
|
|
7
7
|
}
|
|
@@ -39,21 +39,28 @@ const Thumb = ({ index, props, isDragged }) => {
|
|
|
39
39
|
const [isHovered, setIsHovered] = (0, import_react.useState)(false);
|
|
40
40
|
const { disabled, rangeValues, zIndex, customTickMarksValues, step, minValue } = (0, import_react.useContext)(import_context.SliderContext);
|
|
41
41
|
const cleanedProps = { ...props };
|
|
42
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
42
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
43
|
+
import_styled.ThumbStyled,
|
|
44
|
+
{
|
|
45
|
+
...cleanedProps,
|
|
46
|
+
"data-testid": "slider-thumb",
|
|
47
|
+
disabled,
|
|
48
|
+
style: { ...cleanedProps.style, zIndex },
|
|
49
|
+
index,
|
|
50
|
+
onMouseEnter: () => setIsHovered(true),
|
|
51
|
+
onMouseLeave: () => setIsHovered(false),
|
|
52
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
53
|
+
import_ds_tooltip.DSTooltipV3,
|
|
54
|
+
{
|
|
55
|
+
text: (0, import_utils.conformedThumbLabel)(rangeValues, customTickMarksValues, index, step, minValue),
|
|
56
|
+
showPopover: isDragged || isHovered,
|
|
57
|
+
customOffset: [0, 20],
|
|
58
|
+
withoutAnimation: true
|
|
59
|
+
},
|
|
60
|
+
(0, import_utils.conformedThumbLabel)(rangeValues, customTickMarksValues, index, step, minValue)
|
|
61
|
+
)
|
|
62
|
+
}
|
|
63
|
+
);
|
|
57
64
|
};
|
|
58
65
|
Thumb.propTypes = {
|
|
59
66
|
index: import_prop_types.default.number,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Thumb.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React, { useContext, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { SliderContext } from './context';\nimport { conformedThumbLabel } from './utils';\nimport { ThumbStyled, TooltipContainerStyled, TooltipArrow } from './styled';\n\nconst Thumb = ({ index, props, isDragged }) => {\n const [isHovered, setIsHovered] = useState(false);\n const { disabled, rangeValues, zIndex, customTickMarksValues, step, minValue } = useContext(SliderContext);\n\n const cleanedProps = { ...props };\n // delete cleanedProps.key;\n // delete cleanedProps.draggable;\n return (\n // ...props is needed because it's received from the library\n // ...props.style has it own style from the library but has a bug with the zIndex for two thumbs, so that's why it has to be overwrite\n <ThumbStyled\n {...cleanedProps}\n data-testid=\"slider-thumb\"\n disabled={disabled}\n // eslint-disable-next-line react/prop-types\n style={{ ...cleanedProps.style, zIndex }}\n index={index}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n <DSTooltipV3\n key={conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)}\n text={conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)}\n showPopover={isDragged || isHovered}\n customOffset={[0, 20]}\n withoutAnimation\n ></DSTooltipV3>\n </ThumbStyled>\n );\n};\n\n/* {createPortal(\n <TooltipContainerStyled isDragged={isDragged} isHovered={isHovered}>\n <TooltipText>{</TooltipText>\n <TooltipArrow />\n </TooltipContainerStyled>,\n document.body,\n )} */\n\nThumb.propTypes = {\n index: PropTypes.number,\n props: PropTypes.shape({\n style: PropTypes.shape({}).isRequired,\n }).isRequired,\n isDragged: PropTypes.bool,\n};\n\nexport default Thumb;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BjB;AA5BN,mBAA4C;AAE5C,wBAAsB;AACtB,wBAA4B;AAC5B,qBAA8B;AAC9B,mBAAoC;AACpC,oBAAkE;AAElE,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,UAAU,MAAM;AAC7C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,EAAE,UAAU,aAAa,QAAQ,uBAAuB,MAAM,SAAS,QAAI,yBAAW,4BAAa;AAEzG,QAAM,eAAe,EAAE,GAAG,MAAM;AAGhC,SAGE,
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4BjB;AA5BN,mBAA4C;AAE5C,wBAAsB;AACtB,wBAA4B;AAC5B,qBAA8B;AAC9B,mBAAoC;AACpC,oBAAkE;AAElE,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,UAAU,MAAM;AAC7C,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,KAAK;AAChD,QAAM,EAAE,UAAU,aAAa,QAAQ,uBAAuB,MAAM,SAAS,QAAI,yBAAW,4BAAa;AAEzG,QAAM,eAAe,EAAE,GAAG,MAAM;AAGhC,SAGE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAY;AAAA,MACZ;AAAA,MAEA,OAAO,EAAE,GAAG,aAAa,OAAO,OAAO;AAAA,MACvC;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MAEtC;AAAA,QAAC;AAAA;AAAA,UAEC,UAAM,kCAAoB,aAAa,uBAAuB,OAAO,MAAM,QAAQ;AAAA,UACnF,aAAa,aAAa;AAAA,UAC1B,cAAc,CAAC,GAAG,EAAE;AAAA,UACpB,kBAAgB;AAAA;AAAA,YAJX,kCAAoB,aAAa,uBAAuB,OAAO,MAAM,QAAQ;AAAA,MAKnF;AAAA;AAAA,EACH;AAEJ;AAUA,MAAM,YAAY;AAAA,EAChB,OAAO,kBAAAA,QAAU;AAAA,EACjB,OAAO,kBAAAA,QAAU,MAAM;AAAA,IACrB,OAAO,kBAAAA,QAAU,MAAM,CAAC,CAAC,EAAE;AAAA,EAC7B,CAAC,EAAE;AAAA,EACH,WAAW,kBAAAA,QAAU;AACvB;AAEA,IAAO,gBAAQ;",
|
|
6
6
|
"names": ["PropTypes"]
|
|
7
7
|
}
|
|
@@ -37,16 +37,9 @@ const TickMarks = () => {
|
|
|
37
37
|
const dots = [];
|
|
38
38
|
for (let index = minValue || 0; index <= maxValue; index += step) {
|
|
39
39
|
const isActive = withTwoHandles ? rangeValues[0] <= index && index < rangeValues[1] : rangeValues[0] > index;
|
|
40
|
-
dots.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dot, {
|
|
41
|
-
"data-testid": "slider-dot",
|
|
42
|
-
isActive
|
|
43
|
-
}, index));
|
|
40
|
+
dots.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dot, { "data-testid": "slider-dot", isActive }, index));
|
|
44
41
|
}
|
|
45
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DotsContainer, {
|
|
46
|
-
"data-testid": "slider-tick-marks",
|
|
47
|
-
zIndex,
|
|
48
|
-
children: dots
|
|
49
|
-
});
|
|
42
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DotsContainer, { "data-testid": "slider-tick-marks", zIndex, children: dots });
|
|
50
43
|
};
|
|
51
44
|
const Dot = import_ds_system.styled.div`
|
|
52
45
|
&:after {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/TickMarks.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable indent */\nimport React, { useContext } from 'react';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { SliderContext } from './context';\n\nconst TickMarks = () => {\n const { minValue, maxValue, rangeValues, step, withTwoHandles, zIndex } = useContext(SliderContext);\n const dots = [];\n\n for (let index = minValue || 0; index <= maxValue; index += step) {\n const isActive = withTwoHandles ? rangeValues[0] <= index && index < rangeValues[1] : rangeValues[0] > index;\n dots.push(<Dot data-testid=\"slider-dot\" isActive={isActive} key={index} />);\n }\n\n return (\n <DotsContainer data-testid=\"slider-tick-marks\" zIndex={zIndex}>\n {dots}\n </DotsContainer>\n );\n};\n\nconst Dot = styled.div`\n &:after {\n content: '';\n background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n border-radius: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n display: block;\n position: relative;\n width: 2px;\n height: 2px;\n }\n`;\n\nconst DotsContainer = styled.div`\n padding: 0 calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 0.5);\n align-items: center;\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ${(props) => props.zIndex - 1};\n`;\n\nexport default TickMarks;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWT;AAVd,mBAAkC;AAClC,uBAAiD;AACjD,qBAA8B;AAE9B,MAAM,YAAY,MAAM;AACtB,QAAM,EAAE,UAAU,UAAU,aAAa,MAAM,gBAAgB,OAAO,QAAI,yBAAW,4BAAa;AAClG,QAAM,OAAO,CAAC;AAEd,WAAS,QAAQ,YAAY,GAAG,SAAS,UAAU,SAAS,MAAM;AAChE,UAAM,WAAW,iBAAiB,YAAY,MAAM,SAAS,QAAQ,YAAY,KAAK,YAAY,KAAK;AACvG,SAAK,KAAK,4CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADWT;AAVd,mBAAkC;AAClC,uBAAiD;AACjD,qBAA8B;AAE9B,MAAM,YAAY,MAAM;AACtB,QAAM,EAAE,UAAU,UAAU,aAAa,MAAM,gBAAgB,OAAO,QAAI,yBAAW,4BAAa;AAClG,QAAM,OAAO,CAAC;AAEd,WAAS,QAAQ,YAAY,GAAG,SAAS,UAAU,SAAS,MAAM;AAChE,UAAM,WAAW,iBAAiB,YAAY,MAAM,SAAS,QAAQ,YAAY,KAAK,YAAY,KAAK;AACvG,SAAK,KAAK,4CAAC,OAAI,eAAY,cAAa,YAAyB,KAAO,CAAE;AAAA,EAC5E;AAEA,SACE,4CAAC,iBAAc,eAAY,qBAAoB,QAC5C,gBACH;AAEJ;AAEA,MAAM,MAAM,wBAAO;AAAA;AAAA;AAAA,kBAGD,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA,qBACrF,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ9E,MAAM,gBAAgB,wBAAO;AAAA,oBACT,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAUhE,CAAC,UAAU,MAAM,SAAS;AAAA;AAGvC,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,18 +37,12 @@ const TickMarks = () => {
|
|
|
37
37
|
const TickMarksLabels = (0, import_react.useMemo)(
|
|
38
38
|
() => parsedValuesArray.map((value) => {
|
|
39
39
|
const isSelected = fullSelectedValues.findIndex((selectedVal) => selectedVal === value) >= 0;
|
|
40
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TickMarkValue, {
|
|
41
|
-
isSelected,
|
|
42
|
-
children: value
|
|
43
|
-
}, `${sliderUUID}-${value}`);
|
|
40
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TickMarkValue, { isSelected, children: value }, `${sliderUUID}-${value}`);
|
|
44
41
|
}),
|
|
45
42
|
[parsedValuesArray, sliderUUID, fullSelectedValues]
|
|
46
43
|
);
|
|
47
44
|
const PureTickMArksValues = (0, import_react.useMemo)(
|
|
48
|
-
() => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TickMarksContainer, {
|
|
49
|
-
"data-testid": "slider-tick-marks-values",
|
|
50
|
-
children: TickMarksLabels
|
|
51
|
-
}),
|
|
45
|
+
() => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TickMarksContainer, { "data-testid": "slider-tick-marks-values", children: TickMarksLabels }),
|
|
52
46
|
[TickMarksLabels]
|
|
53
47
|
);
|
|
54
48
|
return PureTickMArksValues;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/TickMarksValues.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable no-plusplus */\nimport React, { useContext, useMemo } from 'react';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { SliderContext } from './context';\n\nconst TickMarks = () => {\n const { parsedValuesArray, fullSelectedValues, sliderUUID } = useContext(SliderContext);\n\n const TickMarksLabels = useMemo(\n () =>\n parsedValuesArray.map((value) => {\n const isSelected = fullSelectedValues.findIndex((selectedVal) => selectedVal === value) >= 0;\n return (\n <TickMarkValue key={`${sliderUUID}-${value}`} isSelected={isSelected}>\n {value}\n </TickMarkValue>\n );\n }),\n\n [parsedValuesArray, sliderUUID, fullSelectedValues],\n );\n\n const PureTickMArksValues = useMemo(\n () => <TickMarksContainer data-testid=\"slider-tick-marks-values\">{TickMarksLabels}</TickMarksContainer>,\n [TickMarksLabels],\n );\n\n return PureTickMArksValues;\n};\n\nconst TickMarkValue = styled.div`\n min-height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n overflow: visible;\n transform: translateX(-100%);\n width: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n`;\n\nconst TickMarksContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\n\nexport default TickMarks;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADab;AAZV,mBAA2C;AAC3C,uBAAiD;AACjD,qBAA8B;AAE9B,MAAM,YAAY,MAAM;AACtB,QAAM,EAAE,mBAAmB,oBAAoB,WAAW,QAAI,yBAAW,4BAAa;AAEtF,QAAM,sBAAkB;AAAA,IACtB,MACE,kBAAkB,IAAI,CAAC,UAAU;AAC/B,YAAM,aAAa,mBAAmB,UAAU,CAAC,gBAAgB,gBAAgB,KAAK,KAAK;AAC3F,aACE,4CAAC
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADab;AAZV,mBAA2C;AAC3C,uBAAiD;AACjD,qBAA8B;AAE9B,MAAM,YAAY,MAAM;AACtB,QAAM,EAAE,mBAAmB,oBAAoB,WAAW,QAAI,yBAAW,4BAAa;AAEtF,QAAM,sBAAkB;AAAA,IACtB,MACE,kBAAkB,IAAI,CAAC,UAAU;AAC/B,YAAM,aAAa,mBAAmB,UAAU,CAAC,gBAAgB,gBAAgB,KAAK,KAAK;AAC3F,aACE,4CAAC,iBAA6C,YAC3C,mBADiB,GAAG,cAAc,OAErC;AAAA,IAEJ,CAAC;AAAA,IAEH,CAAC,mBAAmB,YAAY,kBAAkB;AAAA,EACpD;AAEA,QAAM,0BAAsB;AAAA,IAC1B,MAAM,4CAAC,sBAAmB,eAAY,4BAA4B,2BAAgB;AAAA,IAClF,CAAC,eAAe;AAAA,EAClB;AAEA,SAAO;AACT;AAEA,MAAM,gBAAgB,wBAAO;AAAA,gBACb,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA,WAG5D,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,WACzD,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGvG,MAAM,qBAAqB,wBAAO;AAAA;AAAA;AAAA;AAKlC,IAAO,0BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,9 +37,10 @@ var import_TickMarksValues = __toESM(require("./TickMarksValues"));
|
|
|
37
37
|
var import_context = require("./context");
|
|
38
38
|
const Track = ({ children, props }) => {
|
|
39
39
|
const { disabled, minValue, maxValue, rangeValues, withTickMarks, withTickMarksValues, withTwoHandles } = (0, import_react.useContext)(import_context.SliderContext);
|
|
40
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
41
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
42
|
+
TrackStyled,
|
|
43
|
+
{
|
|
43
44
|
...props,
|
|
44
45
|
disabled,
|
|
45
46
|
minValue,
|
|
@@ -50,10 +51,10 @@ const Track = ({ children, props }) => {
|
|
|
50
51
|
children,
|
|
51
52
|
withTickMarks && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TickMarks.default, {})
|
|
52
53
|
]
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
});
|
|
54
|
+
}
|
|
55
|
+
),
|
|
56
|
+
withTickMarksValues && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TickMarksValues.default, {})
|
|
57
|
+
] });
|
|
57
58
|
};
|
|
58
59
|
const TrackStyled = import_ds_system.styled.div`
|
|
59
60
|
position: relative;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Track.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable react/prop-types */\nimport React, { useContext } from 'react';\nimport { getTrackBackground } from 'react-range';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\n\nimport TickMarks from './TickMarks';\nimport TickMarksValues from './TickMarksValues';\nimport { SliderContext } from './context';\n\nconst Track = ({ children, props }) => {\n const { disabled, minValue, maxValue, rangeValues, withTickMarks, withTickMarksValues, withTwoHandles } =\n useContext(SliderContext);\n\n return (\n <>\n <TrackStyled\n {...props} // This is needed because it's received from the library\n disabled={disabled}\n minValue={minValue}\n maxValue={maxValue}\n rangeValues={rangeValues}\n withTwoHandles={withTwoHandles}\n >\n {children}\n {withTickMarks && !disabled && <TickMarks />}\n </TrackStyled>\n {withTickMarksValues && <TickMarksValues />}\n </>\n );\n};\n\nconst TrackStyled = styled.div`\n position: relative;\n height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n width: 100%;\n min-width: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxl)};\n border-radius: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n background: ${(props) =>\n props.disabled\n ? props.theme.colors.neutral[100]\n : getTrackBackground({\n values: props.rangeValues,\n colors: props.withTwoHandles\n ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n min: props.minValue,\n max: props.maxValue,\n })};\n`;\n\nexport default Track;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADenB;AAbJ,mBAAkC;AAClC,yBAAmC;AACnC,uBAAiD;AAEjD,uBAAsB;AACtB,6BAA4B;AAC5B,qBAA8B;AAE9B,MAAM,QAAQ,CAAC,EAAE,UAAU,MAAM,MAAM;AACrC,QAAM,EAAE,UAAU,UAAU,UAAU,aAAa,eAAe,qBAAqB,eAAe,QACpG,yBAAW,4BAAa;AAE1B,SACE;AAAA
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADenB;AAbJ,mBAAkC;AAClC,yBAAmC;AACnC,uBAAiD;AAEjD,uBAAsB;AACtB,6BAA4B;AAC5B,qBAA8B;AAE9B,MAAM,QAAQ,CAAC,EAAE,UAAU,MAAM,MAAM;AACrC,QAAM,EAAE,UAAU,UAAU,UAAU,aAAa,eAAe,qBAAqB,eAAe,QACpG,yBAAW,4BAAa;AAE1B,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,iBAAiB,CAAC,YAAY,4CAAC,iBAAAA,SAAA,EAAU;AAAA;AAAA;AAAA,IAC5C;AAAA,IACC,uBAAuB,4CAAC,uBAAAC,SAAA,EAAgB;AAAA,KAC3C;AAEJ;AAEA,MAAM,cAAc,wBAAO;AAAA;AAAA,YAEf,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,eAEtD,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,mBACrD,CAAC,cAAU,2CAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,gBAC5D,CAAC,UACb,MAAM,WACF,MAAM,MAAM,OAAO,QAAQ,WAC3B,uCAAmB;AAAA,EACjB,QAAQ,MAAM;AAAA,EACd,QAAQ,MAAM,iBACV,CAAC,MAAM,MAAM,OAAO,QAAQ,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM,MAAM,OAAO,QAAQ,IAAI,IAChG,CAAC,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM,MAAM,OAAO,QAAQ,IAAI;AAAA,EACnE,KAAK,MAAM;AAAA,EACX,KAAK,MAAM;AACb,CAAC;AAAA;AAGT,IAAO,gBAAQ;",
|
|
6
6
|
"names": ["TickMarks", "TickMarksValues"]
|
|
7
7
|
}
|
package/dist/esm/DSSlider.js
CHANGED
|
@@ -3,9 +3,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import { describe } from "@elliemae/ds-utilities";
|
|
4
4
|
import SliderImp from "./components/SliderImp";
|
|
5
5
|
import { defaultProps, sliderPropTypes } from "./prop-types";
|
|
6
|
-
const DSSlider = (props) => /* @__PURE__ */ jsx(SliderImp, {
|
|
7
|
-
...props
|
|
8
|
-
});
|
|
6
|
+
const DSSlider = (props) => /* @__PURE__ */ jsx(SliderImp, { ...props });
|
|
9
7
|
DSSlider.defaultProps = defaultProps;
|
|
10
8
|
DSSlider.propTypes = sliderPropTypes;
|
|
11
9
|
DSSlider.displayName = "DSSlider";
|
package/dist/esm/DSSlider.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSSlider.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport SliderImp from './components/SliderImp';\nimport { defaultProps, sliderPropTypes } from './prop-types';\n\nconst DSSlider = (props) => <SliderImp {...props} />;\n\nDSSlider.defaultProps = defaultProps;\nDSSlider.propTypes = sliderPropTypes;\nDSSlider.displayName = 'DSSlider';\nconst DSSliderWithSchema = describe(DSSlider);\nDSSliderWithSchema.propTypes = sliderPropTypes;\n\nexport { DSSlider, DSSliderWithSchema };\nexport default DSSlider;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACKK;AAJ5B,SAAS,gBAAgB;AACzB,OAAO,eAAe;AACtB,SAAS,cAAc,uBAAuB;AAE9C,MAAM,WAAW,CAAC,UAAU,oBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACKK;AAJ5B,SAAS,gBAAgB;AACzB,OAAO,eAAe;AACtB,SAAS,cAAc,uBAAuB;AAE9C,MAAM,WAAW,CAAC,UAAU,oBAAC,aAAW,GAAG,OAAO;AAElD,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAG/B,IAAO,mBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -97,30 +97,24 @@ const SliderImp = (props) => {
|
|
|
97
97
|
() => conformedLabel(rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep),
|
|
98
98
|
[rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep]
|
|
99
99
|
);
|
|
100
|
-
const SliderLabel = /* @__PURE__ */ jsxs(Fragment, {
|
|
101
|
-
children:
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
finalLabelText && " ",
|
|
106
|
-
/* @__PURE__ */ jsx(ValueText, {
|
|
107
|
-
disabled,
|
|
108
|
-
children: finalValueText
|
|
109
|
-
})
|
|
110
|
-
]
|
|
111
|
-
});
|
|
100
|
+
const SliderLabel = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
101
|
+
/* @__PURE__ */ jsx(LabelText, { children: finalLabelText }),
|
|
102
|
+
finalLabelText && " ",
|
|
103
|
+
/* @__PURE__ */ jsx(ValueText, { disabled, children: finalValueText })
|
|
104
|
+
] });
|
|
112
105
|
const theme = useContext(ThemeContext);
|
|
113
|
-
return /* @__PURE__ */ jsx(TooltipTextProvider, {
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
106
|
+
return /* @__PURE__ */ jsx(TooltipTextProvider, { children: /* @__PURE__ */ jsx("div", { ref, children: /* @__PURE__ */ jsx(
|
|
107
|
+
Grid,
|
|
108
|
+
{
|
|
109
|
+
width: "100%",
|
|
110
|
+
style: { maxWidth: "100%" },
|
|
111
|
+
containerProps,
|
|
112
|
+
"data-testid": "slider",
|
|
113
|
+
alignItems: "center",
|
|
114
|
+
rows: ["auto", "auto"],
|
|
115
|
+
children: /* @__PURE__ */ jsxs(
|
|
116
|
+
SliderContext.Provider,
|
|
117
|
+
{
|
|
124
118
|
value: {
|
|
125
119
|
disabled,
|
|
126
120
|
sliderUUID,
|
|
@@ -139,14 +133,10 @@ const SliderImp = (props) => {
|
|
|
139
133
|
zIndex: zIndex ?? theme.zIndex.tooltip
|
|
140
134
|
},
|
|
141
135
|
children: [
|
|
142
|
-
finalLabelText && /* @__PURE__ */ jsx(LabelWrapper, {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
})
|
|
147
|
-
}),
|
|
148
|
-
/* @__PURE__ */ jsx(StyledRangeWrapper, {
|
|
149
|
-
children: /* @__PURE__ */ jsx(Range, {
|
|
136
|
+
finalLabelText && /* @__PURE__ */ jsx(LabelWrapper, { width, children: /* @__PURE__ */ jsx(DSTruncatedTooltipText, { value: SliderLabel }) }),
|
|
137
|
+
/* @__PURE__ */ jsx(StyledRangeWrapper, { children: /* @__PURE__ */ jsx(
|
|
138
|
+
Range,
|
|
139
|
+
{
|
|
150
140
|
step: parsedStep,
|
|
151
141
|
min: parsedMinValue,
|
|
152
142
|
max: parsedMaxValue,
|
|
@@ -158,26 +148,27 @@ const SliderImp = (props) => {
|
|
|
158
148
|
setRangeValues(values);
|
|
159
149
|
onChange(values);
|
|
160
150
|
},
|
|
161
|
-
renderTrack: ({ props: trackProps, children }) => /* @__PURE__ */ jsx(Track, {
|
|
162
|
-
props: trackProps,
|
|
163
|
-
children
|
|
164
|
-
}),
|
|
151
|
+
renderTrack: ({ props: trackProps, children }) => /* @__PURE__ */ jsx(Track, { props: trackProps, children }),
|
|
165
152
|
renderThumb: (renderArgs) => {
|
|
166
153
|
const { index, props: thumbProps, isDragged } = renderArgs;
|
|
167
|
-
return /* @__PURE__ */ jsx(
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
154
|
+
return /* @__PURE__ */ jsx(
|
|
155
|
+
Thumb,
|
|
156
|
+
{
|
|
157
|
+
props: thumbProps,
|
|
158
|
+
isDragged,
|
|
159
|
+
index
|
|
160
|
+
},
|
|
161
|
+
`${sliderUUID}-${thumbProps.key}`
|
|
162
|
+
);
|
|
172
163
|
},
|
|
173
164
|
allowOverlap: false
|
|
174
|
-
}
|
|
175
|
-
})
|
|
165
|
+
}
|
|
166
|
+
) })
|
|
176
167
|
]
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
}
|
|
180
|
-
});
|
|
168
|
+
}
|
|
169
|
+
)
|
|
170
|
+
}
|
|
171
|
+
) }) });
|
|
181
172
|
};
|
|
182
173
|
var SliderImp_default = SliderImp;
|
|
183
174
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/SliderImp.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React, { useState, useEffect, useRef, useMemo, useContext } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { Range } from 'react-range';\nimport { usePrevious } from '@elliemae/ds-utilities';\nimport DSTruncatedTooltipText, { TooltipTextProvider } from '@elliemae/ds-truncated-tooltip-text';\nimport { Grid } from '@elliemae/ds-grid';\nimport { ThemeContext } from '@elliemae/ds-system';\nimport Track from './Track';\nimport Thumb from './Thumb';\nimport { LabelWrapper, StyledRangeWrapper, LabelText, ValueText } from './styled';\nimport { conformedLabel } from './utils';\nimport { SliderContext } from './context';\n\nconst getSubArrayFromRange = (\n arr,\n [minVal, maxVal], // maxValue is undefined when only one handler\n isCustomTickMarksValues = false,\n) => {\n const trueMinVal = isCustomTickMarksValues ? arr[minVal] : minVal;\n const minIndex = arr.findIndex((el) => el === trueMinVal);\n\n if (maxVal !== undefined) {\n // if two handlers, return the found slice\n const trueMaxVal = isCustomTickMarksValues ? arr[maxVal] : maxVal;\n const maxIndex = arr.findIndex((el) => el === trueMaxVal);\n\n if (minIndex >= 0 && maxIndex > minIndex) return arr.slice(minIndex, maxIndex + 1);\n return [];\n }\n // if only one handler, return the value in an array\n return [trueMinVal];\n};\n\nconst SliderImp = (props) => {\n const {\n containerProps,\n disabled,\n label,\n labelWithValue,\n minValue,\n maxValue,\n step,\n onChange,\n withTickMarks,\n withTickMarksValues,\n withTwoHandles,\n customTickMarksValues,\n zIndex,\n } = props;\n const ref = useRef();\n const [width, setWidth] = useState(0);\n const sliderUUID = useMemo(() => uuidv4(), []);\n\n const parsedMinValue = useMemo(() => {\n // ensure this works correctly with customTickMarksValues array\n if (customTickMarksValues?.length) return 0;\n return minValue;\n }, [customTickMarksValues?.length, minValue]);\n const parsedMaxValue = useMemo(() => {\n // ensure this works correctly with customTickMarksValues array\n if (customTickMarksValues?.length) return customTickMarksValues?.length - 1;\n return maxValue;\n }, [customTickMarksValues?.length, maxValue]);\n const parsedStep = useMemo(() => {\n // ensure this works correctly with customTickMarksValues array\n if (customTickMarksValues?.length) return 1;\n return step;\n }, [customTickMarksValues?.length, step]);\n\n const parsedValuesArray = useMemo(() => {\n // ensure this works correctly with customTickMarksValues array\n if (customTickMarksValues?.length) return customTickMarksValues;\n const newLength = Math.ceil(maxValue / step);\n const valuesArray = [];\n for (let i = 0; i <= newLength; i += 1) {\n valuesArray.push(step * i);\n }\n\n return valuesArray;\n }, [customTickMarksValues?.length, minValue, maxValue, step]);\n\n const [rangeValues, setRangeValues] = useState(withTwoHandles ? [parsedMinValue, parsedMaxValue] : [parsedMinValue]);\n // track the full slice of values selected instead of only the limits\n // this is important to handle the selected range labels colors\n const [fullSelectedValues, setFullSelectedValues] = useState([]);\n useEffect(() => {\n const selectedRangeValues = getSubArrayFromRange(parsedValuesArray, rangeValues, !!customTickMarksValues?.length);\n setFullSelectedValues(selectedRangeValues);\n }, [parsedValuesArray, rangeValues, customTickMarksValues?.length]);\n\n const prevWithTwoHandles = usePrevious(withTwoHandles);\n const resizeHandler = () => {\n setWidth(0);\n setWidth(ref.current?.clientWidth);\n };\n useEffect(() => {\n window.addEventListener('resize', resizeHandler);\n return () => window.removeEventListener('resize', resizeHandler);\n });\n useEffect(() => {\n if (!prevWithTwoHandles && withTwoHandles) {\n setRangeValues([parsedMinValue, parsedMaxValue]);\n } else if (prevWithTwoHandles && !withTwoHandles) {\n setRangeValues([parsedMinValue]);\n }\n }, [withTwoHandles]);\n\n useEffect(() => {\n setWidth(ref.current?.clientWidth);\n }, [ref.current?.clientWidth]);\n\n const [finalLabelText, finalValueText] = useMemo(\n () => conformedLabel(rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep),\n [rangeValues, label, labelWithValue, withTwoHandles, customTickMarksValues, parsedStep],\n );\n\n const SliderLabel = (\n <>\n <LabelText>{finalLabelText}</LabelText>\n {finalLabelText && ' '}\n <ValueText disabled={disabled}>{finalValueText}</ValueText>\n </>\n );\n\n const theme = useContext(ThemeContext);\n\n return (\n <TooltipTextProvider>\n <div ref={ref}>\n <Grid\n width=\"100%\"\n style={{ maxWidth: '100%' }}\n containerProps={containerProps}\n data-testid=\"slider\"\n alignItems=\"center\"\n rows={['auto', 'auto']}\n >\n <SliderContext.Provider\n value={{\n disabled,\n sliderUUID,\n label,\n labelWithValue,\n minValue: parsedMinValue,\n maxValue: parsedMaxValue,\n step: parsedStep,\n parsedValuesArray,\n withTickMarks,\n withTickMarksValues,\n withTwoHandles,\n customTickMarksValues,\n rangeValues,\n fullSelectedValues,\n zIndex: zIndex ?? theme.zIndex.tooltip,\n }}\n >\n {finalLabelText && (\n <LabelWrapper width={width}>\n <DSTruncatedTooltipText value={SliderLabel} />\n </LabelWrapper>\n )}\n <StyledRangeWrapper>\n <Range\n step={parsedStep}\n min={parsedMinValue}\n max={parsedMaxValue}\n values={rangeValues}\n disabled={disabled}\n onChange={(values) => {\n if (withTwoHandles && values[0] === values[1]) return;\n setRangeValues(values);\n onChange(values);\n }}\n renderTrack={({ props: trackProps, children }) => <Track props={trackProps}>{children}</Track>}\n renderThumb={(renderArgs) => {\n const { index, props: thumbProps, isDragged } = renderArgs;\n return (\n <Thumb\n key={`${sliderUUID}-${thumbProps.key}`}\n props={thumbProps}\n isDragged={isDragged}\n index={index}\n />\n );\n }}\n allowOverlap={false}\n />\n </StyledRangeWrapper>\n </SliderContext.Provider>\n </Grid>\n </div>\n </TooltipTextProvider>\n );\n};\n\n// SliderImp.propTypes = sliderPropTypes;\n\nexport default SliderImp;\n"],
|
|
5
|
-
"mappings": "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
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -10,21 +10,28 @@ const Thumb = ({ index, props, isDragged }) => {
|
|
|
10
10
|
const [isHovered, setIsHovered] = useState(false);
|
|
11
11
|
const { disabled, rangeValues, zIndex, customTickMarksValues, step, minValue } = useContext(SliderContext);
|
|
12
12
|
const cleanedProps = { ...props };
|
|
13
|
-
return /* @__PURE__ */ jsx(
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
13
|
+
return /* @__PURE__ */ jsx(
|
|
14
|
+
ThumbStyled,
|
|
15
|
+
{
|
|
16
|
+
...cleanedProps,
|
|
17
|
+
"data-testid": "slider-thumb",
|
|
18
|
+
disabled,
|
|
19
|
+
style: { ...cleanedProps.style, zIndex },
|
|
20
|
+
index,
|
|
21
|
+
onMouseEnter: () => setIsHovered(true),
|
|
22
|
+
onMouseLeave: () => setIsHovered(false),
|
|
23
|
+
children: /* @__PURE__ */ jsx(
|
|
24
|
+
DSTooltipV3,
|
|
25
|
+
{
|
|
26
|
+
text: conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue),
|
|
27
|
+
showPopover: isDragged || isHovered,
|
|
28
|
+
customOffset: [0, 20],
|
|
29
|
+
withoutAnimation: true
|
|
30
|
+
},
|
|
31
|
+
conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)
|
|
32
|
+
)
|
|
33
|
+
}
|
|
34
|
+
);
|
|
28
35
|
};
|
|
29
36
|
Thumb.propTypes = {
|
|
30
37
|
index: PropTypes.number,
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/Thumb.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { SliderContext } from './context';\nimport { conformedThumbLabel } from './utils';\nimport { ThumbStyled, TooltipContainerStyled, TooltipArrow } from './styled';\n\nconst Thumb = ({ index, props, isDragged }) => {\n const [isHovered, setIsHovered] = useState(false);\n const { disabled, rangeValues, zIndex, customTickMarksValues, step, minValue } = useContext(SliderContext);\n\n const cleanedProps = { ...props };\n // delete cleanedProps.key;\n // delete cleanedProps.draggable;\n return (\n // ...props is needed because it's received from the library\n // ...props.style has it own style from the library but has a bug with the zIndex for two thumbs, so that's why it has to be overwrite\n <ThumbStyled\n {...cleanedProps}\n data-testid=\"slider-thumb\"\n disabled={disabled}\n // eslint-disable-next-line react/prop-types\n style={{ ...cleanedProps.style, zIndex }}\n index={index}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n <DSTooltipV3\n key={conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)}\n text={conformedThumbLabel(rangeValues, customTickMarksValues, index, step, minValue)}\n showPopover={isDragged || isHovered}\n customOffset={[0, 20]}\n withoutAnimation\n ></DSTooltipV3>\n </ThumbStyled>\n );\n};\n\n/* {createPortal(\n <TooltipContainerStyled isDragged={isDragged} isHovered={isHovered}>\n <TooltipText>{</TooltipText>\n <TooltipArrow />\n </TooltipContainerStyled>,\n document.body,\n )} */\n\nThumb.propTypes = {\n index: PropTypes.number,\n props: PropTypes.shape({\n style: PropTypes.shape({}).isRequired,\n }).isRequired,\n isDragged: PropTypes.bool,\n};\n\nexport default Thumb;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;AC4BjB;AA5BN,SAAgB,YAAY,gBAAgB;AAE5C,OAAO,eAAe;AACtB,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,mBAAyD;AAElE,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,UAAU,MAAM;AAC7C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,UAAU,aAAa,QAAQ,uBAAuB,MAAM,SAAS,IAAI,WAAW,aAAa;AAEzG,QAAM,eAAe,EAAE,GAAG,MAAM;AAGhC,SAGE,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC4BjB;AA5BN,SAAgB,YAAY,gBAAgB;AAE5C,OAAO,eAAe;AACtB,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,mBAAyD;AAElE,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,UAAU,MAAM;AAC7C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,EAAE,UAAU,aAAa,QAAQ,uBAAuB,MAAM,SAAS,IAAI,WAAW,aAAa;AAEzG,QAAM,eAAe,EAAE,GAAG,MAAM;AAGhC,SAGE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAY;AAAA,MACZ;AAAA,MAEA,OAAO,EAAE,GAAG,aAAa,OAAO,OAAO;AAAA,MACvC;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MAEtC;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM,oBAAoB,aAAa,uBAAuB,OAAO,MAAM,QAAQ;AAAA,UACnF,aAAa,aAAa;AAAA,UAC1B,cAAc,CAAC,GAAG,EAAE;AAAA,UACpB,kBAAgB;AAAA;AAAA,QAJX,oBAAoB,aAAa,uBAAuB,OAAO,MAAM,QAAQ;AAAA,MAKnF;AAAA;AAAA,EACH;AAEJ;AAUA,MAAM,YAAY;AAAA,EAChB,OAAO,UAAU;AAAA,EACjB,OAAO,UAAU,MAAM;AAAA,IACrB,OAAO,UAAU,MAAM,CAAC,CAAC,EAAE;AAAA,EAC7B,CAAC,EAAE;AAAA,EACH,WAAW,UAAU;AACvB;AAEA,IAAO,gBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,16 +8,9 @@ const TickMarks = () => {
|
|
|
8
8
|
const dots = [];
|
|
9
9
|
for (let index = minValue || 0; index <= maxValue; index += step) {
|
|
10
10
|
const isActive = withTwoHandles ? rangeValues[0] <= index && index < rangeValues[1] : rangeValues[0] > index;
|
|
11
|
-
dots.push(/* @__PURE__ */ jsx(Dot, {
|
|
12
|
-
"data-testid": "slider-dot",
|
|
13
|
-
isActive
|
|
14
|
-
}, index));
|
|
11
|
+
dots.push(/* @__PURE__ */ jsx(Dot, { "data-testid": "slider-dot", isActive }, index));
|
|
15
12
|
}
|
|
16
|
-
return /* @__PURE__ */ jsx(DotsContainer, {
|
|
17
|
-
"data-testid": "slider-tick-marks",
|
|
18
|
-
zIndex,
|
|
19
|
-
children: dots
|
|
20
|
-
});
|
|
13
|
+
return /* @__PURE__ */ jsx(DotsContainer, { "data-testid": "slider-tick-marks", zIndex, children: dots });
|
|
21
14
|
};
|
|
22
15
|
const Dot = styled.div`
|
|
23
16
|
&:after {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/TickMarks.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\nimport React, { useContext } from 'react';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { SliderContext } from './context';\n\nconst TickMarks = () => {\n const { minValue, maxValue, rangeValues, step, withTwoHandles, zIndex } = useContext(SliderContext);\n const dots = [];\n\n for (let index = minValue || 0; index <= maxValue; index += step) {\n const isActive = withTwoHandles ? rangeValues[0] <= index && index < rangeValues[1] : rangeValues[0] > index;\n dots.push(<Dot data-testid=\"slider-dot\" isActive={isActive} key={index} />);\n }\n\n return (\n <DotsContainer data-testid=\"slider-tick-marks\" zIndex={zIndex}>\n {dots}\n </DotsContainer>\n );\n};\n\nconst Dot = styled.div`\n &:after {\n content: '';\n background: ${(props) => (props.isActive ? props.theme.colors.brand[300] : props.theme.colors.neutral[400])};\n border-radius: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n display: block;\n position: relative;\n width: 2px;\n height: 2px;\n }\n`;\n\nconst DotsContainer = styled.div`\n padding: 0 calc(${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)} * 0.5);\n align-items: center;\n display: flex;\n justify-content: space-between;\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: ${(props) => props.zIndex - 1};\n`;\n\nexport default TickMarks;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACWT;AAVd,SAAgB,kBAAkB;AAClC,SAAS,QAAQ,gCAAgC;AACjD,SAAS,qBAAqB;AAE9B,MAAM,YAAY,MAAM;AACtB,QAAM,EAAE,UAAU,UAAU,aAAa,MAAM,gBAAgB,OAAO,IAAI,WAAW,aAAa;AAClG,QAAM,OAAO,CAAC;AAEd,WAAS,QAAQ,YAAY,GAAG,SAAS,UAAU,SAAS,MAAM;AAChE,UAAM,WAAW,iBAAiB,YAAY,MAAM,SAAS,QAAQ,YAAY,KAAK,YAAY,KAAK;AACvG,SAAK,KAAK,oBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACWT;AAVd,SAAgB,kBAAkB;AAClC,SAAS,QAAQ,gCAAgC;AACjD,SAAS,qBAAqB;AAE9B,MAAM,YAAY,MAAM;AACtB,QAAM,EAAE,UAAU,UAAU,aAAa,MAAM,gBAAgB,OAAO,IAAI,WAAW,aAAa;AAClG,QAAM,OAAO,CAAC;AAEd,WAAS,QAAQ,YAAY,GAAG,SAAS,UAAU,SAAS,MAAM;AAChE,UAAM,WAAW,iBAAiB,YAAY,MAAM,SAAS,QAAQ,YAAY,KAAK,YAAY,KAAK;AACvG,SAAK,KAAK,oBAAC,OAAI,eAAY,cAAa,YAAyB,KAAO,CAAE;AAAA,EAC5E;AAEA,SACE,oBAAC,iBAAc,eAAY,qBAAoB,QAC5C,gBACH;AAEJ;AAEA,MAAM,MAAM,OAAO;AAAA;AAAA;AAAA,kBAGD,CAAC,UAAW,MAAM,WAAW,MAAM,MAAM,OAAO,MAAM,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA,qBACrF,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ9E,MAAM,gBAAgB,OAAO;AAAA,oBACT,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAUhE,CAAC,UAAU,MAAM,SAAS;AAAA;AAGvC,IAAO,oBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,18 +8,12 @@ const TickMarks = () => {
|
|
|
8
8
|
const TickMarksLabels = useMemo(
|
|
9
9
|
() => parsedValuesArray.map((value) => {
|
|
10
10
|
const isSelected = fullSelectedValues.findIndex((selectedVal) => selectedVal === value) >= 0;
|
|
11
|
-
return /* @__PURE__ */ jsx(TickMarkValue, {
|
|
12
|
-
isSelected,
|
|
13
|
-
children: value
|
|
14
|
-
}, `${sliderUUID}-${value}`);
|
|
11
|
+
return /* @__PURE__ */ jsx(TickMarkValue, { isSelected, children: value }, `${sliderUUID}-${value}`);
|
|
15
12
|
}),
|
|
16
13
|
[parsedValuesArray, sliderUUID, fullSelectedValues]
|
|
17
14
|
);
|
|
18
15
|
const PureTickMArksValues = useMemo(
|
|
19
|
-
() => /* @__PURE__ */ jsx(TickMarksContainer, {
|
|
20
|
-
"data-testid": "slider-tick-marks-values",
|
|
21
|
-
children: TickMarksLabels
|
|
22
|
-
}),
|
|
16
|
+
() => /* @__PURE__ */ jsx(TickMarksContainer, { "data-testid": "slider-tick-marks-values", children: TickMarksLabels }),
|
|
23
17
|
[TickMarksLabels]
|
|
24
18
|
);
|
|
25
19
|
return PureTickMArksValues;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/TickMarksValues.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-plusplus */\nimport React, { useContext, useMemo } from 'react';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\nimport { SliderContext } from './context';\n\nconst TickMarks = () => {\n const { parsedValuesArray, fullSelectedValues, sliderUUID } = useContext(SliderContext);\n\n const TickMarksLabels = useMemo(\n () =>\n parsedValuesArray.map((value) => {\n const isSelected = fullSelectedValues.findIndex((selectedVal) => selectedVal === value) >= 0;\n return (\n <TickMarkValue key={`${sliderUUID}-${value}`} isSelected={isSelected}>\n {value}\n </TickMarkValue>\n );\n }),\n\n [parsedValuesArray, sliderUUID, fullSelectedValues],\n );\n\n const PureTickMArksValues = useMemo(\n () => <TickMarksContainer data-testid=\"slider-tick-marks-values\">{TickMarksLabels}</TickMarksContainer>,\n [TickMarksLabels],\n );\n\n return PureTickMArksValues;\n};\n\nconst TickMarkValue = styled.div`\n min-height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};\n overflow: visible;\n transform: translateX(-100%);\n width: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n color: ${(props) => (props.isSelected ? props.theme.colors.neutral[800] : props.theme.colors.neutral[500])};\n`;\n\nconst TickMarksContainer = styled.div`\n display: flex;\n justify-content: space-between;\n`;\n\nexport default TickMarks;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACab;AAZV,SAAgB,YAAY,eAAe;AAC3C,SAAS,QAAQ,gCAAgC;AACjD,SAAS,qBAAqB;AAE9B,MAAM,YAAY,MAAM;AACtB,QAAM,EAAE,mBAAmB,oBAAoB,WAAW,IAAI,WAAW,aAAa;AAEtF,QAAM,kBAAkB;AAAA,IACtB,MACE,kBAAkB,IAAI,CAAC,UAAU;AAC/B,YAAM,aAAa,mBAAmB,UAAU,CAAC,gBAAgB,gBAAgB,KAAK,KAAK;AAC3F,aACE,oBAAC
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACab;AAZV,SAAgB,YAAY,eAAe;AAC3C,SAAS,QAAQ,gCAAgC;AACjD,SAAS,qBAAqB;AAE9B,MAAM,YAAY,MAAM;AACtB,QAAM,EAAE,mBAAmB,oBAAoB,WAAW,IAAI,WAAW,aAAa;AAEtF,QAAM,kBAAkB;AAAA,IACtB,MACE,kBAAkB,IAAI,CAAC,UAAU;AAC/B,YAAM,aAAa,mBAAmB,UAAU,CAAC,gBAAgB,gBAAgB,KAAK,KAAK;AAC3F,aACE,oBAAC,iBAA6C,YAC3C,mBADiB,GAAG,cAAc,OAErC;AAAA,IAEJ,CAAC;AAAA,IAEH,CAAC,mBAAmB,YAAY,kBAAkB;AAAA,EACpD;AAEA,QAAM,sBAAsB;AAAA,IAC1B,MAAM,oBAAC,sBAAmB,eAAY,4BAA4B,2BAAgB;AAAA,IAClF,CAAC,eAAe;AAAA,EAClB;AAEA,SAAO;AACT;AAEA,MAAM,gBAAgB,OAAO;AAAA,gBACb,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA,WAG5D,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,WACzD,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,OAAO,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGvG,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAKlC,IAAO,0BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,9 +8,10 @@ import TickMarksValues from "./TickMarksValues";
|
|
|
8
8
|
import { SliderContext } from "./context";
|
|
9
9
|
const Track = ({ children, props }) => {
|
|
10
10
|
const { disabled, minValue, maxValue, rangeValues, withTickMarks, withTickMarksValues, withTwoHandles } = useContext(SliderContext);
|
|
11
|
-
return /* @__PURE__ */ jsxs(Fragment, {
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
12
|
+
/* @__PURE__ */ jsxs(
|
|
13
|
+
TrackStyled,
|
|
14
|
+
{
|
|
14
15
|
...props,
|
|
15
16
|
disabled,
|
|
16
17
|
minValue,
|
|
@@ -21,10 +22,10 @@ const Track = ({ children, props }) => {
|
|
|
21
22
|
children,
|
|
22
23
|
withTickMarks && !disabled && /* @__PURE__ */ jsx(TickMarks, {})
|
|
23
24
|
]
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
});
|
|
25
|
+
}
|
|
26
|
+
),
|
|
27
|
+
withTickMarksValues && /* @__PURE__ */ jsx(TickMarksValues, {})
|
|
28
|
+
] });
|
|
28
29
|
};
|
|
29
30
|
const TrackStyled = styled.div`
|
|
30
31
|
position: relative;
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/Track.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable react/prop-types */\nimport React, { useContext } from 'react';\nimport { getTrackBackground } from 'react-range';\nimport { styled, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';\n\nimport TickMarks from './TickMarks';\nimport TickMarksValues from './TickMarksValues';\nimport { SliderContext } from './context';\n\nconst Track = ({ children, props }) => {\n const { disabled, minValue, maxValue, rangeValues, withTickMarks, withTickMarksValues, withTwoHandles } =\n useContext(SliderContext);\n\n return (\n <>\n <TrackStyled\n {...props} // This is needed because it's received from the library\n disabled={disabled}\n minValue={minValue}\n maxValue={maxValue}\n rangeValues={rangeValues}\n withTwoHandles={withTwoHandles}\n >\n {children}\n {withTickMarks && !disabled && <TickMarks />}\n </TrackStyled>\n {withTickMarksValues && <TickMarksValues />}\n </>\n );\n};\n\nconst TrackStyled = styled.div`\n position: relative;\n height: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n width: 100%;\n min-width: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxl)};\n border-radius: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xxs)};\n background: ${(props) =>\n props.disabled\n ? props.theme.colors.neutral[100]\n : getTrackBackground({\n values: props.rangeValues,\n colors: props.withTwoHandles\n ? [props.theme.colors.neutral[100], props.theme.colors.brand[600], props.theme.colors.neutral[100]]\n : [props.theme.colors.brand[600], props.theme.colors.neutral[100]],\n min: props.minValue,\n max: props.maxValue,\n })};\n`;\n\nexport default Track;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACenB,mBAUmC,KATjC,YADF;AAbJ,SAAgB,kBAAkB;AAClC,SAAS,0BAA0B;AACnC,SAAS,QAAQ,gCAAgC;AAEjD,OAAO,eAAe;AACtB,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAE9B,MAAM,QAAQ,CAAC,EAAE,UAAU,MAAM,MAAM;AACrC,QAAM,EAAE,UAAU,UAAU,UAAU,aAAa,eAAe,qBAAqB,eAAe,IACpG,WAAW,aAAa;AAE1B,SACE;AAAA
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACenB,mBAUmC,KATjC,YADF;AAbJ,SAAgB,kBAAkB;AAClC,SAAS,0BAA0B;AACnC,SAAS,QAAQ,gCAAgC;AAEjD,OAAO,eAAe;AACtB,OAAO,qBAAqB;AAC5B,SAAS,qBAAqB;AAE9B,MAAM,QAAQ,CAAC,EAAE,UAAU,MAAM,MAAM;AACrC,QAAM,EAAE,UAAU,UAAU,UAAU,aAAa,eAAe,qBAAqB,eAAe,IACpG,WAAW,aAAa;AAE1B,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,iBAAiB,CAAC,YAAY,oBAAC,aAAU;AAAA;AAAA;AAAA,IAC5C;AAAA,IACC,uBAAuB,oBAAC,mBAAgB;AAAA,KAC3C;AAEJ;AAEA,MAAM,cAAc,OAAO;AAAA;AAAA,YAEf,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA,eAEtD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,mBACrD,CAAC,UAAU,yBAAyB,MAAM,MAAM,MAAM,GAAG;AAAA,gBAC5D,CAAC,UACb,MAAM,WACF,MAAM,MAAM,OAAO,QAAQ,OAC3B,mBAAmB;AAAA,EACjB,QAAQ,MAAM;AAAA,EACd,QAAQ,MAAM,iBACV,CAAC,MAAM,MAAM,OAAO,QAAQ,MAAM,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM,MAAM,OAAO,QAAQ,IAAI,IAChG,CAAC,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM,MAAM,OAAO,QAAQ,IAAI;AAAA,EACnE,KAAK,MAAM;AAAA,EACX,KAAK,MAAM;AACb,CAAC;AAAA;AAGT,IAAO,gBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-slider",
|
|
3
|
-
"version": "3.12.0-rc.
|
|
3
|
+
"version": "3.12.0-rc.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Slider",
|
|
6
6
|
"files": [
|
|
@@ -75,11 +75,11 @@
|
|
|
75
75
|
"indent": 4
|
|
76
76
|
},
|
|
77
77
|
"dependencies": {
|
|
78
|
-
"@elliemae/ds-grid": "3.12.0-rc.
|
|
79
|
-
"@elliemae/ds-system": "3.12.0-rc.
|
|
80
|
-
"@elliemae/ds-tooltip": "3.12.0-rc.
|
|
81
|
-
"@elliemae/ds-truncated-tooltip-text": "3.12.0-rc.
|
|
82
|
-
"@elliemae/ds-utilities": "3.12.0-rc.
|
|
78
|
+
"@elliemae/ds-grid": "3.12.0-rc.3",
|
|
79
|
+
"@elliemae/ds-system": "3.12.0-rc.3",
|
|
80
|
+
"@elliemae/ds-tooltip": "3.12.0-rc.3",
|
|
81
|
+
"@elliemae/ds-truncated-tooltip-text": "3.12.0-rc.3",
|
|
82
|
+
"@elliemae/ds-utilities": "3.12.0-rc.3",
|
|
83
83
|
"prop-types": "~15.8.1",
|
|
84
84
|
"react-range": "~1.8.12",
|
|
85
85
|
"uuid": "~8.3.2"
|