@elliemae/ds-slider-v2 3.26.0-next.11
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/DSSliderV2.js +50 -0
- package/dist/cjs/DSSliderV2.js.map +7 -0
- package/dist/cjs/DSSliderV2CTX.js +40 -0
- package/dist/cjs/DSSliderV2CTX.js.map +7 -0
- package/dist/cjs/config/useSliderV2.js +70 -0
- package/dist/cjs/config/useSliderV2.js.map +7 -0
- package/dist/cjs/config/useTickMarksValues.js +51 -0
- package/dist/cjs/config/useTickMarksValues.js.map +7 -0
- package/dist/cjs/config/useValidateProps.js +45 -0
- package/dist/cjs/config/useValidateProps.js.map +7 -0
- package/dist/cjs/constants/index.js +50 -0
- package/dist/cjs/constants/index.js.map +7 -0
- package/dist/cjs/index.js +42 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/package.json +7 -0
- package/dist/cjs/parts/MainContent.js +95 -0
- package/dist/cjs/parts/MainContent.js.map +7 -0
- package/dist/cjs/parts/Thumb.js +82 -0
- package/dist/cjs/parts/Thumb.js.map +7 -0
- package/dist/cjs/parts/TickMarks.js +67 -0
- package/dist/cjs/parts/TickMarks.js.map +7 -0
- package/dist/cjs/parts/TickMarksValues.js +67 -0
- package/dist/cjs/parts/TickMarksValues.js.map +7 -0
- package/dist/cjs/parts/Track.js +71 -0
- package/dist/cjs/parts/Track.js.map +7 -0
- package/dist/cjs/react-desc-prop-types.js +64 -0
- package/dist/cjs/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/styles.js +122 -0
- package/dist/cjs/styles.js.map +7 -0
- package/dist/cjs/typescript-testing/typescript-slider-v2-valid.js +95 -0
- package/dist/cjs/typescript-testing/typescript-slider-v2-valid.js.map +7 -0
- package/dist/cjs/utils/inRange.js +42 -0
- package/dist/cjs/utils/inRange.js.map +7 -0
- package/dist/cjs/utils/thumbLabels.js +51 -0
- package/dist/cjs/utils/thumbLabels.js.map +7 -0
- package/dist/esm/DSSliderV2.js +20 -0
- package/dist/esm/DSSliderV2.js.map +7 -0
- package/dist/esm/DSSliderV2CTX.js +10 -0
- package/dist/esm/DSSliderV2CTX.js.map +7 -0
- package/dist/esm/config/useSliderV2.js +40 -0
- package/dist/esm/config/useSliderV2.js.map +7 -0
- package/dist/esm/config/useTickMarksValues.js +21 -0
- package/dist/esm/config/useTickMarksValues.js.map +7 -0
- package/dist/esm/config/useValidateProps.js +15 -0
- package/dist/esm/config/useValidateProps.js.map +7 -0
- package/dist/esm/constants/index.js +20 -0
- package/dist/esm/constants/index.js.map +7 -0
- package/dist/esm/index.js +12 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/package.json +7 -0
- package/dist/esm/parts/MainContent.js +65 -0
- package/dist/esm/parts/MainContent.js.map +7 -0
- package/dist/esm/parts/Thumb.js +52 -0
- package/dist/esm/parts/Thumb.js.map +7 -0
- package/dist/esm/parts/TickMarks.js +37 -0
- package/dist/esm/parts/TickMarks.js.map +7 -0
- package/dist/esm/parts/TickMarksValues.js +37 -0
- package/dist/esm/parts/TickMarksValues.js.map +7 -0
- package/dist/esm/parts/Track.js +41 -0
- package/dist/esm/parts/Track.js.map +7 -0
- package/dist/esm/react-desc-prop-types.js +39 -0
- package/dist/esm/react-desc-prop-types.js.map +7 -0
- package/dist/esm/styles.js +92 -0
- package/dist/esm/styles.js.map +7 -0
- package/dist/esm/typescript-testing/typescript-slider-v2-valid.js +72 -0
- package/dist/esm/typescript-testing/typescript-slider-v2-valid.js.map +7 -0
- package/dist/esm/utils/inRange.js +12 -0
- package/dist/esm/utils/inRange.js.map +7 -0
- package/dist/esm/utils/thumbLabels.js +21 -0
- package/dist/esm/utils/thumbLabels.js.map +7 -0
- package/dist/types/DSSliderV2.d.ts +7 -0
- package/dist/types/DSSliderV2CTX.d.ts +5 -0
- package/dist/types/config/useSliderV2.d.ts +20 -0
- package/dist/types/config/useTickMarksValues.d.ts +2 -0
- package/dist/types/config/useValidateProps.d.ts +5 -0
- package/dist/types/constants/index.d.ts +12 -0
- package/dist/types/index.d.ts +3 -0
- package/dist/types/parts/MainContent.d.ts +1 -0
- package/dist/types/parts/Thumb.d.ts +2 -0
- package/dist/types/parts/TickMarks.d.ts +1 -0
- package/dist/types/parts/TickMarksValues.d.ts +1 -0
- package/dist/types/parts/Track.d.ts +2 -0
- package/dist/types/react-desc-prop-types.d.ts +30 -0
- package/dist/types/styles.d.ts +21 -0
- package/dist/types/tests/axe-core.test.d.ts +1 -0
- package/dist/types/tests/events.test.d.ts +1 -0
- package/dist/types/tests/render.test.d.ts +1 -0
- package/dist/types/typescript-testing/typescript-slider-v2-valid.d.ts +1 -0
- package/dist/types/utils/inRange.d.ts +1 -0
- package/dist/types/utils/thumbLabels.d.ts +7 -0
- package/package.json +78 -0
@@ -0,0 +1,51 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __create = Object.create;
|
3
|
+
var __defProp = Object.defineProperty;
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
8
|
+
var __export = (target, all) => {
|
9
|
+
for (var name in all)
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
11
|
+
};
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
14
|
+
for (let key of __getOwnPropNames(from))
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
17
|
+
}
|
18
|
+
return to;
|
19
|
+
};
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
26
|
+
mod
|
27
|
+
));
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
29
|
+
var thumbLabels_exports = {};
|
30
|
+
__export(thumbLabels_exports, {
|
31
|
+
conformedThumbLabel: () => conformedThumbLabel
|
32
|
+
});
|
33
|
+
module.exports = __toCommonJS(thumbLabels_exports);
|
34
|
+
var React = __toESM(require("react"));
|
35
|
+
const conformedThumbLabel = ({
|
36
|
+
rangeValues,
|
37
|
+
customTickMarksValues,
|
38
|
+
index,
|
39
|
+
step,
|
40
|
+
minValue
|
41
|
+
}) => {
|
42
|
+
let msg = `Value: `;
|
43
|
+
if (customTickMarksValues.length) {
|
44
|
+
const foundValue = customTickMarksValues[Math.floor((rangeValues[index] - minValue) / step)];
|
45
|
+
msg += `${foundValue ?? rangeValues[index].toFixed(1)}`;
|
46
|
+
} else {
|
47
|
+
msg += `${rangeValues[index].toFixed(1)}`;
|
48
|
+
}
|
49
|
+
return msg;
|
50
|
+
};
|
51
|
+
//# sourceMappingURL=thumbLabels.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../../src/utils/thumbLabels.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
+
"sourcesContent": ["export const conformedThumbLabel = ({\n rangeValues,\n customTickMarksValues,\n index,\n step,\n minValue,\n}: {\n rangeValues: [number] | [number, number];\n customTickMarksValues: string[];\n index: number;\n step: number;\n minValue: number;\n}) => {\n let msg = `Value: `;\n if (customTickMarksValues.length) {\n const foundValue = customTickMarksValues[Math.floor((rangeValues[index] - minValue) / step)];\n msg += `${foundValue ?? rangeValues[index].toFixed(1)}`;\n } else {\n msg += `${rangeValues[index].toFixed(1)}`;\n }\n\n return msg;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMM;AACJ,MAAI,MAAM;AACV,MAAI,sBAAsB,QAAQ;AAChC,UAAM,aAAa,sBAAsB,KAAK,OAAO,YAAY,KAAK,IAAI,YAAY,IAAI,CAAC;AAC3F,WAAO,GAAG,cAAc,YAAY,KAAK,EAAE,QAAQ,CAAC;AAAA,EACtD,OAAO;AACL,WAAO,GAAG,YAAY,KAAK,EAAE,QAAQ,CAAC;AAAA,EACxC;AAEA,SAAO;AACT;",
|
6
|
+
"names": []
|
7
|
+
}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
3
|
+
import { describe } from "@elliemae/ds-props-helpers";
|
4
|
+
import { DSSliderV2PropTypesSchema } from "./react-desc-prop-types.js";
|
5
|
+
import { useSliderV2 } from "./config/useSliderV2.js";
|
6
|
+
import { DSSliderV2Name } from "./constants/index.js";
|
7
|
+
import DSSliderV2Context from "./DSSliderV2CTX.js";
|
8
|
+
import { MainContent } from "./parts/MainContent.js";
|
9
|
+
const DSSliderV2 = (props) => {
|
10
|
+
const ctx = useSliderV2(props);
|
11
|
+
return /* @__PURE__ */ jsx(DSSliderV2Context.Provider, { value: ctx, children: /* @__PURE__ */ jsx(MainContent, {}) });
|
12
|
+
};
|
13
|
+
DSSliderV2.displayName = DSSliderV2Name;
|
14
|
+
const DSSliderV2WithSchema = describe(DSSliderV2);
|
15
|
+
DSSliderV2WithSchema.propTypes = DSSliderV2PropTypesSchema;
|
16
|
+
export {
|
17
|
+
DSSliderV2,
|
18
|
+
DSSliderV2WithSchema
|
19
|
+
};
|
20
|
+
//# sourceMappingURL=DSSliderV2.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSSliderV2.tsx"],
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type DSSliderV2T, DSSliderV2PropTypesSchema } from './react-desc-prop-types.js';\nimport { useSliderV2 } from './config/useSliderV2.js';\nimport { DSSliderV2Name } from './constants/index.js';\n\nimport DSSliderV2Context from './DSSliderV2CTX.js';\nimport { MainContent } from './parts/MainContent.js';\n\nconst DSSliderV2 = <TMultiple extends boolean = false>(props: DSSliderV2T.Props<TMultiple>) => {\n const ctx = useSliderV2(props);\n\n return (\n <DSSliderV2Context.Provider value={ctx}>\n <MainContent />\n </DSSliderV2Context.Provider>\n );\n};\n\nDSSliderV2.displayName = DSSliderV2Name;\nconst DSSliderV2WithSchema = describe(DSSliderV2);\nDSSliderV2WithSchema.propTypes = DSSliderV2PropTypesSchema;\n\nexport { DSSliderV2, DSSliderV2WithSchema };\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACcjB;AAbN,SAAS,gBAAgB;AACzB,SAA2B,iCAAiC;AAC5D,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAE/B,OAAO,uBAAuB;AAC9B,SAAS,mBAAmB;AAE5B,MAAM,aAAa,CAAoC,UAAwC;AAC7F,QAAM,MAAM,YAAY,KAAK;AAE7B,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,KACjC,8BAAC,eAAY,GACf;AAEJ;AAEA,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU;AAChD,qBAAqB,YAAY;",
|
6
|
+
"names": []
|
7
|
+
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import { createContext } from "react";
|
3
|
+
const defaultContext = {};
|
4
|
+
const DSSliderV2Context = createContext(defaultContext);
|
5
|
+
var DSSliderV2CTX_default = DSSliderV2Context;
|
6
|
+
export {
|
7
|
+
DSSliderV2Context,
|
8
|
+
DSSliderV2CTX_default as default
|
9
|
+
};
|
10
|
+
//# sourceMappingURL=DSSliderV2CTX.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSSliderV2CTX.ts"],
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { DSSliderV2CTX } from './config/useSliderV2.js';\n\nconst defaultContext = {} as DSSliderV2CTX<boolean>;\n\n/** Context for cross component communication */\nexport const DSSliderV2Context = createContext<DSSliderV2CTX<boolean>>(defaultContext);\n\nexport default DSSliderV2Context;\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAG9B,MAAM,iBAAiB,CAAC;AAGjB,MAAM,oBAAoB,cAAsC,cAAc;AAErF,IAAO,wBAAQ;",
|
6
|
+
"names": []
|
7
|
+
}
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import React2 from "react";
|
3
|
+
import { useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
4
|
+
import { uid } from "uid";
|
5
|
+
import { DSSliderV2PropTypes, defaultProps } from "../react-desc-prop-types.js";
|
6
|
+
import { useValidateProps } from "./useValidateProps.js";
|
7
|
+
import { useTickMarksValues } from "./useTickMarksValues.js";
|
8
|
+
import { useOwnerProps } from "@elliemae/ds-utilities";
|
9
|
+
const useSliderV2 = (propsFromUser) => {
|
10
|
+
const propsWithDefault = useMemoMergePropsWithDefault(
|
11
|
+
propsFromUser,
|
12
|
+
defaultProps
|
13
|
+
);
|
14
|
+
const { multiple, value } = propsWithDefault;
|
15
|
+
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
16
|
+
const instanceUid = React2.useMemo(() => `slider-v2-${uid(5)}`, []);
|
17
|
+
const rangeValues = React2.useMemo(() => {
|
18
|
+
if (multiple === true)
|
19
|
+
return value;
|
20
|
+
return [value];
|
21
|
+
}, [multiple, value]);
|
22
|
+
const tickMarkPositions = useTickMarksValues(propsWithDefault);
|
23
|
+
useValidateProps(propsWithDefault, DSSliderV2PropTypes, { tickMarkPositions });
|
24
|
+
const ownerPropConfig = useOwnerProps(propsWithDefault);
|
25
|
+
return React2.useMemo(
|
26
|
+
() => ({
|
27
|
+
propsWithDefault,
|
28
|
+
xstyledProps,
|
29
|
+
instanceUid,
|
30
|
+
rangeValues,
|
31
|
+
tickMarkPositions,
|
32
|
+
...ownerPropConfig
|
33
|
+
}),
|
34
|
+
[propsWithDefault, xstyledProps, instanceUid, rangeValues, tickMarkPositions, ownerPropConfig]
|
35
|
+
);
|
36
|
+
};
|
37
|
+
export {
|
38
|
+
useSliderV2
|
39
|
+
};
|
40
|
+
//# sourceMappingURL=useSliderV2.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useSliderV2.ts"],
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { XstyledProps } from '@elliemae/ds-props-helpers';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSSliderV2T, DSSliderV2PropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useTickMarksValues } from './useTickMarksValues.js';\nimport { useOwnerProps } from '@elliemae/ds-utilities';\n\nexport interface DSSliderV2CTX<TMultiple extends boolean> {\n propsWithDefault: DSSliderV2T.InternalProps<TMultiple>;\n xstyledProps: XstyledProps;\n instanceUid: string;\n rangeValues: [number, number] | [number];\n tickMarkPositions: number[];\n getOwnerProps: () => DSSliderV2T.InternalProps<TMultiple>;\n getOwnerPropsArguments: () => Record<string, unknown>;\n}\n\nexport const useSliderV2 = <TMultiple extends boolean>(propsFromUser: DSSliderV2T.Props<TMultiple>) => {\n // =============================================================================\n // MERGE WITH DEFAULT\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSSliderV2T.InternalProps<TMultiple>>(\n propsFromUser,\n defaultProps as DSSliderV2T.DefaultProps<TMultiple>,\n );\n\n const { multiple, value } = propsWithDefault;\n\n // =============================================================================\n // XSTYLED PROPS\n // =============================================================================\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const instanceUid = React.useMemo(() => `slider-v2-${uid(5)}`, []);\n\n const rangeValues = React.useMemo(() => {\n if (multiple === true) return value as [number, number];\n return [value] as [number];\n }, [multiple, value]);\n\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n const tickMarkPositions = useTickMarksValues(propsWithDefault);\n\n // ===========================================================================\n // VALIDATE PROPS\n // ===========================================================================\n useValidateProps(propsWithDefault, DSSliderV2PropTypes, { tickMarkPositions });\n\n const ownerPropConfig = useOwnerProps(propsWithDefault);\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n xstyledProps,\n instanceUid,\n rangeValues,\n tickMarkPositions,\n ...ownerPropConfig,\n }),\n [propsWithDefault, xstyledProps, instanceUid, rangeValues, tickMarkPositions, ownerPropConfig],\n );\n};\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAElB,SAAS,oBAAoB,oCAAoC;AACjE,SAAS,WAAW;AACpB,SAA2B,qBAAqB,oBAAoB;AACpE,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAYvB,MAAM,cAAc,CAA4B,kBAAgD;AAIrG,QAAM,mBAAmB;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,UAAU,MAAM,IAAI;AAK5B,QAAM,eAAe,mBAAmB,gBAAgB;AAIxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,aAAa,IAAI,CAAC,KAAK,CAAC,CAAC;AAEjE,QAAM,cAAcA,OAAM,QAAQ,MAAM;AACtC,QAAI,aAAa;AAAM,aAAO;AAC9B,WAAO,CAAC,KAAK;AAAA,EACf,GAAG,CAAC,UAAU,KAAK,CAAC;AAKpB,QAAM,oBAAoB,mBAAmB,gBAAgB;AAK7D,mBAAiB,kBAAkB,qBAAqB,EAAE,kBAAkB,CAAC;AAE7E,QAAM,kBAAkB,cAAc,gBAAgB;AAEtD,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,kBAAkB,cAAc,aAAa,aAAa,mBAAmB,eAAe;AAAA,EAC/F;AACF;",
|
6
|
+
"names": ["React"]
|
7
|
+
}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import React2 from "react";
|
3
|
+
const getDefaultTickMarksValues = ({
|
4
|
+
minValue,
|
5
|
+
maxValue,
|
6
|
+
step
|
7
|
+
}) => {
|
8
|
+
const parsedValuesArray = [];
|
9
|
+
for (let value = minValue; value <= maxValue; value += step) {
|
10
|
+
parsedValuesArray.push(value);
|
11
|
+
}
|
12
|
+
return parsedValuesArray;
|
13
|
+
};
|
14
|
+
const useTickMarksValues = (props) => {
|
15
|
+
const { minValue, maxValue, step } = props;
|
16
|
+
return React2.useMemo(() => getDefaultTickMarksValues({ minValue, maxValue, step }), [maxValue, minValue, step]);
|
17
|
+
};
|
18
|
+
export {
|
19
|
+
useTickMarksValues
|
20
|
+
};
|
21
|
+
//# sourceMappingURL=useTickMarksValues.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTickMarksValues.ts"],
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { DSSliderV2T } from '../react-desc-prop-types.js';\n\n// Tick mark values will be generated from the minValue, maxValue and step props\nconst getDefaultTickMarksValues = ({\n minValue,\n maxValue,\n step,\n}: {\n minValue: number;\n maxValue: number;\n step: number;\n}) => {\n const parsedValuesArray: number[] = [];\n for (let value = minValue; value <= maxValue; value += step) {\n parsedValuesArray.push(value);\n }\n return parsedValuesArray;\n};\n\nexport const useTickMarksValues = <TMultiple extends boolean>(props: DSSliderV2T.InternalProps<TMultiple>) => {\n const { minValue, maxValue, step } = props;\n return React.useMemo(() => getDefaultTickMarksValues({ minValue, maxValue, step }), [maxValue, minValue, step]);\n};\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAIlB,MAAM,4BAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,oBAA8B,CAAC;AACrC,WAAS,QAAQ,UAAU,SAAS,UAAU,SAAS,MAAM;AAC3D,sBAAkB,KAAK,KAAK;AAAA,EAC9B;AACA,SAAO;AACT;AAEO,MAAM,qBAAqB,CAA4B,UAAgD;AAC5G,QAAM,EAAE,UAAU,UAAU,KAAK,IAAI;AACrC,SAAOA,OAAM,QAAQ,MAAM,0BAA0B,EAAE,UAAU,UAAU,KAAK,CAAC,GAAG,CAAC,UAAU,UAAU,IAAI,CAAC;AAChH;",
|
6
|
+
"names": ["React"]
|
7
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
|
3
|
+
import { DSSliderV2Name } from "../constants/index.js";
|
4
|
+
const useValidateProps = (props, propTypes, { tickMarkPositions }) => {
|
5
|
+
useValidateTypescriptPropTypes(props, propTypes, DSSliderV2Name);
|
6
|
+
if (props.customTickMarksValues.length && props.customTickMarksValues.length !== tickMarkPositions.length) {
|
7
|
+
throw new Error(
|
8
|
+
`The length of the customTickMarksValues prop must be equal to the length of the tickMarkPositions array (${tickMarkPositions.length}).`
|
9
|
+
);
|
10
|
+
}
|
11
|
+
};
|
12
|
+
export {
|
13
|
+
useValidateProps
|
14
|
+
};
|
15
|
+
//# sourceMappingURL=useValidateProps.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { type DSSliderV2T } from '../react-desc-prop-types.js';\nimport { DSSliderV2Name } from '../constants/index.js';\n\nexport const useValidateProps = <TMultiple extends boolean>(\n props: DSSliderV2T.InternalProps<TMultiple>,\n propTypes: WeakValidationMap<unknown>,\n { tickMarkPositions }: { tickMarkPositions: number[] },\n): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSSliderV2Name);\n\n if (props.customTickMarksValues.length && props.customTickMarksValues.length !== tickMarkPositions.length) {\n throw new Error(\n `The length of the customTickMarksValues prop must be equal to the length of the tickMarkPositions array (${tickMarkPositions.length}).`,\n );\n }\n};\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,sBAAsB;AAExB,MAAM,mBAAmB,CAC9B,OACA,WACA,EAAE,kBAAkB,MACX;AAET,iCAA+B,OAAO,WAAW,cAAc;AAE/D,MAAI,MAAM,sBAAsB,UAAU,MAAM,sBAAsB,WAAW,kBAAkB,QAAQ;AACzG,UAAM,IAAI;AAAA,MACR,4GAA4G,kBAAkB;AAAA,IAChI;AAAA,EACF;AACF;",
|
6
|
+
"names": []
|
7
|
+
}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import { slotObjectToDataTestIds } from "@elliemae/ds-system";
|
3
|
+
const DSSliderV2Name = "DSSliderV2";
|
4
|
+
const SLIDER_V2_SLOTS = {
|
5
|
+
ROOT: "root",
|
6
|
+
RANGE_WRAPPER: "range-wrapper",
|
7
|
+
TRACK: "track",
|
8
|
+
DOT: "dot",
|
9
|
+
DOT_CONTAINER: "dot-container",
|
10
|
+
TICK_MARK_VALUE: "tick-mark-value",
|
11
|
+
TICK_MARK_CONTAINER: "tick-mark-container",
|
12
|
+
THUMB: "thumb"
|
13
|
+
};
|
14
|
+
const SLIDER_V2_DATA_TESTID = slotObjectToDataTestIds(DSSliderV2Name, SLIDER_V2_SLOTS);
|
15
|
+
export {
|
16
|
+
DSSliderV2Name,
|
17
|
+
SLIDER_V2_DATA_TESTID,
|
18
|
+
SLIDER_V2_SLOTS
|
19
|
+
};
|
20
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSSliderV2Name = 'DSSliderV2';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const SLIDER_V2_SLOTS = {\n ROOT: 'root',\n RANGE_WRAPPER: 'range-wrapper',\n TRACK: 'track',\n DOT: 'dot',\n DOT_CONTAINER: 'dot-container',\n TICK_MARK_VALUE: 'tick-mark-value',\n TICK_MARK_CONTAINER: 'tick-mark-container',\n THUMB: 'thumb',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const SLIDER_V2_DATA_TESTID = slotObjectToDataTestIds(DSSliderV2Name, SLIDER_V2_SLOTS);\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,iBAAiB;AAGvB,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,eAAe;AAAA,EACf,OAAO;AAAA,EACP,KAAK;AAAA,EACL,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,qBAAqB;AAAA,EACrB,OAAO;AACT;AAGO,MAAM,wBAAwB,wBAAwB,gBAAgB,eAAe;",
|
6
|
+
"names": []
|
7
|
+
}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import { DSSliderV2, DSSliderV2WithSchema } from "./DSSliderV2.js";
|
3
|
+
import {} from "./react-desc-prop-types.js";
|
4
|
+
import { DSSliderV2Name, SLIDER_V2_SLOTS, SLIDER_V2_DATA_TESTID } from "./constants/index.js";
|
5
|
+
export {
|
6
|
+
DSSliderV2,
|
7
|
+
DSSliderV2Name,
|
8
|
+
DSSliderV2WithSchema,
|
9
|
+
SLIDER_V2_DATA_TESTID,
|
10
|
+
SLIDER_V2_SLOTS
|
11
|
+
};
|
12
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport { DSSliderV2, DSSliderV2WithSchema } from './DSSliderV2.js';\nexport { type DSSliderV2T } from './react-desc-prop-types.js';\nexport { DSSliderV2Name, SLIDER_V2_SLOTS, SLIDER_V2_DATA_TESTID } from './constants/index.js';\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,YAAY,4BAA4B;AACjD,eAAiC;AACjC,SAAS,gBAAgB,iBAAiB,6BAA6B;",
|
6
|
+
"names": []
|
7
|
+
}
|
@@ -0,0 +1,65 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
3
|
+
import { useContext } from "react";
|
4
|
+
import { Range } from "react-range";
|
5
|
+
import DSSliderV2Context from "../DSSliderV2CTX.js";
|
6
|
+
import { StyledRangeWrapper, StyledWrapper } from "../styles.js";
|
7
|
+
import { Track } from "./Track.js";
|
8
|
+
import { Thumb } from "./Thumb.js";
|
9
|
+
const MainContent = () => {
|
10
|
+
const {
|
11
|
+
propsWithDefault: { step, minValue, maxValue, disabled, onValueChange, className },
|
12
|
+
xstyledProps,
|
13
|
+
rangeValues,
|
14
|
+
getOwnerProps,
|
15
|
+
getOwnerPropsArguments
|
16
|
+
} = useContext(DSSliderV2Context);
|
17
|
+
return /* @__PURE__ */ jsx(
|
18
|
+
StyledWrapper,
|
19
|
+
{
|
20
|
+
width: "100%",
|
21
|
+
style: { maxWidth: "100%" },
|
22
|
+
alignItems: "center",
|
23
|
+
rows: ["auto", "auto"],
|
24
|
+
getOwnerProps,
|
25
|
+
getOwnerPropsArguments,
|
26
|
+
className,
|
27
|
+
...xstyledProps,
|
28
|
+
children: /* @__PURE__ */ jsx(
|
29
|
+
StyledRangeWrapper,
|
30
|
+
{
|
31
|
+
rows: ["28px", "auto"],
|
32
|
+
alignItems: "center",
|
33
|
+
margin: "0 16px",
|
34
|
+
minHeight: "28px",
|
35
|
+
getOwnerProps,
|
36
|
+
getOwnerPropsArguments,
|
37
|
+
children: /* @__PURE__ */ jsx(
|
38
|
+
Range,
|
39
|
+
{
|
40
|
+
step,
|
41
|
+
min: minValue,
|
42
|
+
max: maxValue,
|
43
|
+
values: rangeValues,
|
44
|
+
disabled,
|
45
|
+
onChange: (values) => {
|
46
|
+
if (values.length === 1) {
|
47
|
+
onValueChange(values[0]);
|
48
|
+
} else {
|
49
|
+
onValueChange(values);
|
50
|
+
}
|
51
|
+
},
|
52
|
+
renderTrack: (args) => /* @__PURE__ */ jsx(Track, { ...args }),
|
53
|
+
renderThumb: (args) => /* @__PURE__ */ jsx(Thumb, { ...args }),
|
54
|
+
allowOverlap: false
|
55
|
+
}
|
56
|
+
)
|
57
|
+
}
|
58
|
+
)
|
59
|
+
}
|
60
|
+
);
|
61
|
+
};
|
62
|
+
export {
|
63
|
+
MainContent
|
64
|
+
};
|
65
|
+
//# sourceMappingURL=MainContent.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MainContent.tsx"],
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext } from 'react';\nimport { Range } from 'react-range';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\nimport { StyledRangeWrapper, StyledWrapper } from '../styles.js';\nimport { Track } from './Track.js';\nimport { Thumb } from './Thumb.js';\nimport type { DSSliderV2T } from '../react-desc-prop-types.js';\n\nexport const MainContent = () => {\n const {\n propsWithDefault: { step, minValue, maxValue, disabled, onValueChange, className },\n xstyledProps,\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n return (\n <StyledWrapper\n width=\"100%\"\n style={{ maxWidth: '100%' }}\n alignItems=\"center\"\n rows={['auto', 'auto']}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n className={className}\n {...xstyledProps}\n >\n <StyledRangeWrapper\n rows={['28px', 'auto']}\n alignItems=\"center\"\n margin=\"0 16px\"\n minHeight=\"28px\"\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Range\n step={step}\n min={minValue}\n max={maxValue}\n values={rangeValues}\n disabled={disabled}\n onChange={(values) => {\n if (values.length === 1) {\n onValueChange(values[0]);\n } else {\n onValueChange(values as DSSliderV2T.ValueType<true>);\n }\n }}\n renderTrack={(args) => <Track {...args} />}\n renderThumb={(args) => <Thumb {...args} />}\n allowOverlap={false}\n />\n </StyledRangeWrapper>\n </StyledWrapper>\n );\n};\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACiDU;AAjDjC,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,OAAO,uBAAuB;AAC9B,SAAS,oBAAoB,qBAAqB;AAClD,SAAS,aAAa;AACtB,SAAS,aAAa;AAGf,MAAM,cAAc,MAAM;AAC/B,QAAM;AAAA,IACJ,kBAAkB,EAAE,MAAM,UAAU,UAAU,UAAU,eAAe,UAAU;AAAA,IACjF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,OAAO,EAAE,UAAU,OAAO;AAAA,MAC1B,YAAW;AAAA,MACX,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,CAAC,QAAQ,MAAM;AAAA,UACrB,YAAW;AAAA,UACX,QAAO;AAAA,UACP,WAAU;AAAA,UACV;AAAA,UACA;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,KAAK;AAAA,cACL,KAAK;AAAA,cACL,QAAQ;AAAA,cACR;AAAA,cACA,UAAU,CAAC,WAAW;AACpB,oBAAI,OAAO,WAAW,GAAG;AACvB,gCAAc,OAAO,CAAC,CAAC;AAAA,gBACzB,OAAO;AACL,gCAAc,MAAqC;AAAA,gBACrD;AAAA,cACF;AAAA,cACA,aAAa,CAAC,SAAS,oBAAC,SAAO,GAAG,MAAM;AAAA,cACxC,aAAa,CAAC,SAAS,oBAAC,SAAO,GAAG,MAAM;AAAA,cACxC,cAAc;AAAA;AAAA,UAChB;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;",
|
6
|
+
"names": []
|
7
|
+
}
|
@@ -0,0 +1,52 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import { Fragment, jsx } from "react/jsx-runtime";
|
3
|
+
import { useContext, useState } from "react";
|
4
|
+
import { DSTooltipV3 } from "@elliemae/ds-tooltip";
|
5
|
+
import { conformedThumbLabel } from "../utils/thumbLabels.js";
|
6
|
+
import { StyledThumb } from "../styles.js";
|
7
|
+
import DSSliderV2Context from "../DSSliderV2CTX.js";
|
8
|
+
const Thumb = ({ index, props, isDragged }) => {
|
9
|
+
const {
|
10
|
+
propsWithDefault: { disabled, customTickMarksValues, step, minValue },
|
11
|
+
rangeValues,
|
12
|
+
getOwnerProps,
|
13
|
+
getOwnerPropsArguments
|
14
|
+
} = useContext(DSSliderV2Context);
|
15
|
+
const [isHovered, setIsHovered] = useState(false);
|
16
|
+
const [isFocused, setIsFocused] = useState(false);
|
17
|
+
const { ref, ...rest } = props;
|
18
|
+
const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });
|
19
|
+
return /* @__PURE__ */ jsx(
|
20
|
+
StyledThumb,
|
21
|
+
{
|
22
|
+
...rest,
|
23
|
+
style: { ...rest.style, zIndex: void 0 },
|
24
|
+
innerRef: ref,
|
25
|
+
disabled,
|
26
|
+
onMouseEnter: () => {
|
27
|
+
setIsHovered(true);
|
28
|
+
setIsFocused(false);
|
29
|
+
},
|
30
|
+
onMouseLeave: () => setIsHovered(false),
|
31
|
+
onKeyDownCapture: () => setIsFocused(true),
|
32
|
+
onBlur: () => setIsFocused(false),
|
33
|
+
getOwnerProps,
|
34
|
+
getOwnerPropsArguments,
|
35
|
+
children: /* @__PURE__ */ jsx(
|
36
|
+
DSTooltipV3,
|
37
|
+
{
|
38
|
+
text: label,
|
39
|
+
showPopover: isDragged || isHovered || isFocused,
|
40
|
+
customOffset: [0, 20],
|
41
|
+
withoutAnimation: true,
|
42
|
+
children: /* @__PURE__ */ jsx(Fragment, {})
|
43
|
+
},
|
44
|
+
label
|
45
|
+
)
|
46
|
+
}
|
47
|
+
);
|
48
|
+
};
|
49
|
+
export {
|
50
|
+
Thumb
|
51
|
+
};
|
52
|
+
//# sourceMappingURL=Thumb.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Thumb.tsx"],
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useState } from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { conformedThumbLabel } from '../utils/thumbLabels.js';\nimport { StyledThumb } from '../styles.js';\nimport type { IRenderThumbParams } from 'react-range/lib/types.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const Thumb = ({ index, props, isDragged }: IRenderThumbParams) => {\n const {\n propsWithDefault: { disabled, customTickMarksValues, step, minValue },\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n const [isHovered, setIsHovered] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n\n const { ref, ...rest } = props;\n\n const label = conformedThumbLabel({ rangeValues, customTickMarksValues, index, step, minValue });\n\n return (\n <StyledThumb\n {...rest}\n style={{ ...rest.style, zIndex: undefined }}\n innerRef={ref}\n disabled={disabled}\n onMouseEnter={() => {\n setIsHovered(true);\n setIsFocused(false);\n }}\n onMouseLeave={() => setIsHovered(false)}\n onKeyDownCapture={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <DSTooltipV3\n key={label}\n text={label}\n showPopover={isDragged || isHovered || isFocused}\n customOffset={[0, 20]}\n withoutAnimation\n >\n <></>\n </DSTooltipV3>\n </StyledThumb>\n );\n};\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC6Cf;AA7CR,SAAgB,YAAY,gBAAgB;AAC5C,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAE5B,OAAO,uBAAuB;AAEvB,MAAM,QAAQ,CAAC,EAAE,OAAO,OAAO,UAAU,MAA0B;AACxE,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,uBAAuB,MAAM,SAAS;AAAA,IACpE;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AAEzB,QAAM,QAAQ,oBAAoB,EAAE,aAAa,uBAAuB,OAAO,MAAM,SAAS,CAAC;AAE/F,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO,EAAE,GAAG,KAAK,OAAO,QAAQ,OAAU;AAAA,MAC1C,UAAU;AAAA,MACV;AAAA,MACA,cAAc,MAAM;AAClB,qBAAa,IAAI;AACjB,qBAAa,KAAK;AAAA,MACpB;AAAA,MACA,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,kBAAkB,MAAM,aAAa,IAAI;AAAA,MACzC,QAAQ,MAAM,aAAa,KAAK;AAAA,MAChC;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UAEC,MAAM;AAAA,UACN,aAAa,aAAa,aAAa;AAAA,UACvC,cAAc,CAAC,GAAG,EAAE;AAAA,UACpB,kBAAgB;AAAA,UAEhB,0CAAE;AAAA;AAAA,QANG;AAAA,MAOP;AAAA;AAAA,EACF;AAEJ;",
|
6
|
+
"names": []
|
7
|
+
}
|
@@ -0,0 +1,37 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
3
|
+
import { useContext, useMemo } from "react";
|
4
|
+
import { StyledDot, StyledDotsContainer } from "../styles.js";
|
5
|
+
import { inRange } from "../utils/inRange.js";
|
6
|
+
import DSSliderV2Context from "../DSSliderV2CTX.js";
|
7
|
+
const TickMarks = () => {
|
8
|
+
const {
|
9
|
+
propsWithDefault: { step, minValue, maxValue },
|
10
|
+
rangeValues,
|
11
|
+
getOwnerProps,
|
12
|
+
getOwnerPropsArguments
|
13
|
+
} = useContext(DSSliderV2Context);
|
14
|
+
const dots = useMemo(() => {
|
15
|
+
const dotsArr = [];
|
16
|
+
for (let value = minValue; value <= maxValue; value += step) {
|
17
|
+
const isActive = inRange(value, rangeValues);
|
18
|
+
dotsArr.push(
|
19
|
+
/* @__PURE__ */ jsx(
|
20
|
+
StyledDot,
|
21
|
+
{
|
22
|
+
isActive,
|
23
|
+
getOwnerProps,
|
24
|
+
getOwnerPropsArguments
|
25
|
+
},
|
26
|
+
value
|
27
|
+
)
|
28
|
+
);
|
29
|
+
}
|
30
|
+
return dotsArr;
|
31
|
+
}, [getOwnerProps, getOwnerPropsArguments, maxValue, minValue, rangeValues, step]);
|
32
|
+
return /* @__PURE__ */ jsx(StyledDotsContainer, { getOwnerProps, getOwnerPropsArguments, children: dots });
|
33
|
+
};
|
34
|
+
export {
|
35
|
+
TickMarks
|
36
|
+
};
|
37
|
+
//# sourceMappingURL=TickMarks.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TickMarks.tsx"],
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { StyledDot, StyledDotsContainer } from '../styles.js';\nimport { inRange } from '../utils/inRange.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const TickMarks = () => {\n const {\n propsWithDefault: { step, minValue, maxValue },\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n const dots = useMemo(() => {\n const dotsArr = [];\n\n for (let value = minValue; value <= maxValue; value += step) {\n const isActive = inRange(value, rangeValues);\n dotsArr.push(\n <StyledDot\n isActive={isActive}\n key={value}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />,\n );\n }\n\n return dotsArr;\n }, [getOwnerProps, getOwnerPropsArguments, maxValue, minValue, rangeValues, step]);\n\n return (\n <StyledDotsContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {dots}\n </StyledDotsContainer>\n );\n};\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACmBf;AAnBR,SAAgB,YAAY,eAAe;AAC3C,SAAS,WAAW,2BAA2B;AAC/C,SAAS,eAAe;AACxB,OAAO,uBAAuB;AAEvB,MAAM,YAAY,MAAM;AAC7B,QAAM;AAAA,IACJ,kBAAkB,EAAE,MAAM,UAAU,SAAS;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,QAAM,OAAO,QAAQ,MAAM;AACzB,UAAM,UAAU,CAAC;AAEjB,aAAS,QAAQ,UAAU,SAAS,UAAU,SAAS,MAAM;AAC3D,YAAM,WAAW,QAAQ,OAAO,WAAW;AAC3C,cAAQ;AAAA,QACN;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YAEA;AAAA,YACA;AAAA;AAAA,UAFK;AAAA,QAGP;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,eAAe,wBAAwB,UAAU,UAAU,aAAa,IAAI,CAAC;AAEjF,SACE,oBAAC,uBAAoB,eAA8B,wBAChD,gBACH;AAEJ;",
|
6
|
+
"names": []
|
7
|
+
}
|
@@ -0,0 +1,37 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
3
|
+
import { useContext, useMemo } from "react";
|
4
|
+
import { StyledTickMarkValue, StyledTickMarksContainer } from "../styles.js";
|
5
|
+
import { inRange } from "../utils/inRange.js";
|
6
|
+
import DSSliderV2Context from "../DSSliderV2CTX.js";
|
7
|
+
const TickMarksValues = () => {
|
8
|
+
const {
|
9
|
+
propsWithDefault: { customTickMarksValues },
|
10
|
+
rangeValues,
|
11
|
+
tickMarkPositions,
|
12
|
+
instanceUid,
|
13
|
+
getOwnerProps,
|
14
|
+
getOwnerPropsArguments
|
15
|
+
} = useContext(DSSliderV2Context);
|
16
|
+
const markValues = useMemo(
|
17
|
+
() => tickMarkPositions.map((value, index) => {
|
18
|
+
const isSelected = inRange(value, rangeValues);
|
19
|
+
return /* @__PURE__ */ jsx(
|
20
|
+
StyledTickMarkValue,
|
21
|
+
{
|
22
|
+
isSelected,
|
23
|
+
getOwnerProps,
|
24
|
+
getOwnerPropsArguments,
|
25
|
+
children: customTickMarksValues[index] ?? value
|
26
|
+
},
|
27
|
+
`${instanceUid}-${value}`
|
28
|
+
);
|
29
|
+
}),
|
30
|
+
[tickMarkPositions, rangeValues, instanceUid, getOwnerProps, getOwnerPropsArguments, customTickMarksValues]
|
31
|
+
);
|
32
|
+
return /* @__PURE__ */ jsx(StyledTickMarksContainer, { getOwnerProps, getOwnerPropsArguments, children: markValues });
|
33
|
+
};
|
34
|
+
export {
|
35
|
+
TickMarksValues
|
36
|
+
};
|
37
|
+
//# sourceMappingURL=TickMarksValues.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TickMarksValues.tsx"],
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { StyledTickMarkValue, StyledTickMarksContainer } from '../styles.js';\nimport { inRange } from '../utils/inRange.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const TickMarksValues = () => {\n const {\n propsWithDefault: { customTickMarksValues },\n rangeValues,\n tickMarkPositions,\n instanceUid,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n const markValues = useMemo(\n () =>\n tickMarkPositions.map((value, index) => {\n const isSelected = inRange(value, rangeValues);\n return (\n <StyledTickMarkValue\n key={`${instanceUid}-${value}`}\n isSelected={isSelected}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {customTickMarksValues[index] ?? value}\n </StyledTickMarkValue>\n );\n }),\n [tickMarkPositions, rangeValues, instanceUid, getOwnerProps, getOwnerPropsArguments, customTickMarksValues],\n );\n\n return (\n <StyledTickMarksContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n {markValues}\n </StyledTickMarksContainer>\n );\n};\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACoBb;AApBV,SAAgB,YAAY,eAAe;AAC3C,SAAS,qBAAqB,gCAAgC;AAC9D,SAAS,eAAe;AACxB,OAAO,uBAAuB;AAEvB,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ,kBAAkB,EAAE,sBAAsB;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,QAAM,aAAa;AAAA,IACjB,MACE,kBAAkB,IAAI,CAAC,OAAO,UAAU;AACtC,YAAM,aAAa,QAAQ,OAAO,WAAW;AAC7C,aACE;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA;AAAA,UACA;AAAA,UAEC,gCAAsB,KAAK,KAAK;AAAA;AAAA,QAL5B,GAAG,eAAe;AAAA,MAMzB;AAAA,IAEJ,CAAC;AAAA,IACH,CAAC,mBAAmB,aAAa,aAAa,eAAe,wBAAwB,qBAAqB;AAAA,EAC5G;AAEA,SACE,oBAAC,4BAAyB,eAA8B,wBACrD,sBACH;AAEJ;",
|
6
|
+
"names": []
|
7
|
+
}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
3
|
+
import { useContext } from "react";
|
4
|
+
import { TickMarks } from "./TickMarks.js";
|
5
|
+
import { TickMarksValues } from "./TickMarksValues.js";
|
6
|
+
import { StyledTrack } from "../styles.js";
|
7
|
+
import DSSliderV2Context from "../DSSliderV2CTX.js";
|
8
|
+
const Track = ({ children, props, disabled }) => {
|
9
|
+
const {
|
10
|
+
propsWithDefault: { minValue, maxValue, withTickMarksValues, withTickMarks },
|
11
|
+
rangeValues,
|
12
|
+
getOwnerProps,
|
13
|
+
getOwnerPropsArguments
|
14
|
+
} = useContext(DSSliderV2Context);
|
15
|
+
const { ref, ...rest } = props;
|
16
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
17
|
+
/* @__PURE__ */ jsxs(
|
18
|
+
StyledTrack,
|
19
|
+
{
|
20
|
+
...rest,
|
21
|
+
innerRef: ref,
|
22
|
+
disabled,
|
23
|
+
minValue,
|
24
|
+
maxValue,
|
25
|
+
rangeValues,
|
26
|
+
multiple: rangeValues.length === 2,
|
27
|
+
getOwnerProps,
|
28
|
+
getOwnerPropsArguments,
|
29
|
+
children: [
|
30
|
+
children,
|
31
|
+
withTickMarks && !disabled && /* @__PURE__ */ jsx(TickMarks, {})
|
32
|
+
]
|
33
|
+
}
|
34
|
+
),
|
35
|
+
withTickMarksValues && /* @__PURE__ */ jsx(TickMarksValues, {})
|
36
|
+
] });
|
37
|
+
};
|
38
|
+
export {
|
39
|
+
Track
|
40
|
+
};
|
41
|
+
//# sourceMappingURL=Track.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Track.tsx"],
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { TickMarks } from './TickMarks.js';\nimport { TickMarksValues } from './TickMarksValues.js';\nimport { StyledTrack } from '../styles.js';\nimport type { IRenderTrackParams } from 'react-range/lib/types.js';\nimport DSSliderV2Context from '../DSSliderV2CTX.js';\n\nexport const Track = ({ children, props, disabled }: IRenderTrackParams) => {\n const {\n propsWithDefault: { minValue, maxValue, withTickMarksValues, withTickMarks },\n rangeValues,\n getOwnerProps,\n getOwnerPropsArguments,\n } = useContext(DSSliderV2Context);\n\n const { ref, ...rest } = props;\n\n return (\n <>\n <StyledTrack\n {...rest} // This is needed because it's received from the library\n innerRef={ref}\n disabled={disabled}\n minValue={minValue}\n maxValue={maxValue}\n rangeValues={rangeValues}\n multiple={rangeValues.length === 2}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {children}\n {withTickMarks && !disabled && <TickMarks />}\n </StyledTrack>\n {withTickMarksValues && <TickMarksValues />}\n </>\n );\n};\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACkBnB,mBAamC,KAZjC,YADF;AAlBJ,SAAgB,kBAAkB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAE5B,OAAO,uBAAuB;AAEvB,MAAM,QAAQ,CAAC,EAAE,UAAU,OAAO,SAAS,MAA0B;AAC1E,QAAM;AAAA,IACJ,kBAAkB,EAAE,UAAU,UAAU,qBAAqB,cAAc;AAAA,IAC3E;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,iBAAiB;AAEhC,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AAEzB,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,YAAY,WAAW;AAAA,QACjC;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UACA,iBAAiB,CAAC,YAAY,oBAAC,aAAU;AAAA;AAAA;AAAA,IAC5C;AAAA,IACC,uBAAuB,oBAAC,mBAAgB;AAAA,KAC3C;AAEJ;",
|
6
|
+
"names": []
|
7
|
+
}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import * as React from "react";
|
2
|
+
import {
|
3
|
+
PropTypes,
|
4
|
+
globalAttributesPropTypes,
|
5
|
+
xstyledPropTypes,
|
6
|
+
getPropsPerSlotPropTypes
|
7
|
+
} from "@elliemae/ds-props-helpers";
|
8
|
+
import { DSSliderV2Name, SLIDER_V2_SLOTS } from "./constants/index.js";
|
9
|
+
const defaultProps = {
|
10
|
+
disabled: false,
|
11
|
+
step: 5,
|
12
|
+
onValueChange: () => {
|
13
|
+
},
|
14
|
+
withTickMarks: false,
|
15
|
+
withTickMarksValues: false,
|
16
|
+
customTickMarksValues: [],
|
17
|
+
multiple: false
|
18
|
+
};
|
19
|
+
const DSSliderV2PropTypes = {
|
20
|
+
...getPropsPerSlotPropTypes(DSSliderV2Name, SLIDER_V2_SLOTS),
|
21
|
+
...globalAttributesPropTypes,
|
22
|
+
...xstyledPropTypes,
|
23
|
+
disabled: PropTypes.bool.description("disable slider").defaultValue(false),
|
24
|
+
minValue: PropTypes.number.description("min value for slider").defaultValue(0),
|
25
|
+
maxValue: PropTypes.number.description("max value for slider").defaultValue(100),
|
26
|
+
step: PropTypes.number.description("steps of values from min to max").defaultValue(5),
|
27
|
+
onValueChange: PropTypes.func.description("change handler").defaultValue(() => {
|
28
|
+
}),
|
29
|
+
withTickMarks: PropTypes.bool.description("add tick marks between steps").defaultValue(false),
|
30
|
+
withTickMarksValues: PropTypes.bool.description("add step value to tickmark").defaultValue(false),
|
31
|
+
customTickMarksValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).description("Explicitly set tickmark values for custom tickmarks").defaultValue([])
|
32
|
+
};
|
33
|
+
const DSSliderV2PropTypesSchema = DSSliderV2PropTypes;
|
34
|
+
export {
|
35
|
+
DSSliderV2PropTypes,
|
36
|
+
DSSliderV2PropTypesSchema,
|
37
|
+
defaultProps
|
38
|
+
};
|
39
|
+
//# sourceMappingURL=react-desc-prop-types.js.map
|