@hitachivantara/uikit-react-core 5.28.0 → 5.28.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Slider/Slider.cjs +3 -3
- package/dist/cjs/components/Slider/Slider.cjs.map +1 -1
- package/dist/cjs/components/Slider/Slider.styles.cjs.map +1 -1
- package/dist/cjs/components/Slider/base.cjs +4 -7
- package/dist/cjs/components/Slider/base.cjs.map +1 -1
- package/dist/cjs/components/Slider/utils.cjs +14 -13
- package/dist/cjs/components/Slider/utils.cjs.map +1 -1
- package/dist/esm/components/Slider/Slider.js +3 -3
- package/dist/esm/components/Slider/Slider.js.map +1 -1
- package/dist/esm/components/Slider/Slider.styles.js.map +1 -1
- package/dist/esm/components/Slider/base.js +4 -7
- package/dist/esm/components/Slider/base.js.map +1 -1
- package/dist/esm/components/Slider/utils.js +14 -13
- package/dist/esm/components/Slider/utils.js.map +1 -1
- package/package.json +2 -2
|
@@ -64,7 +64,7 @@ const HvSlider = (props) => {
|
|
|
64
64
|
const sliderInputId = setId.setId(elementId, "input");
|
|
65
65
|
const stepValue = React.useMemo(() => utils.calculateStepValue(maxPointValue, minPointValue, divisionQuantity), [divisionQuantity, maxPointValue, minPointValue]);
|
|
66
66
|
const inverseStepValue = 1 / stepValue;
|
|
67
|
-
const marks = React.useMemo(() => utils.createMark(markProperties, markStep, divisionQuantity, minPointValue, stepValue, markDigits, !!disabled,
|
|
67
|
+
const marks = React.useMemo(() => utils.createMark(markProperties, markStep, divisionQuantity, minPointValue, stepValue, markDigits, !!disabled, formatMark), [disabled, divisionQuantity, formatMark, markDigits, markProperties, markStep, minPointValue, stepValue]);
|
|
68
68
|
const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
|
|
69
69
|
const isSingle = React.useMemo(() => utils.isSingleSlider(valuesProp, defaultValues), [defaultValues, valuesProp]);
|
|
70
70
|
const value = React.useMemo(() => (valuesProp == null ? void 0 : valuesProp.length) > 0 ? utils.knobsValuesToKnobsPositions(valuesProp, inverseStepValue, minPointValue) : void 0, [inverseStepValue, minPointValue, valuesProp]);
|
|
@@ -79,8 +79,8 @@ const HvSlider = (props) => {
|
|
|
79
79
|
const [isDraggingTrack, setIsDraggingTrack] = React.useState(false);
|
|
80
80
|
const knobProperties = utils.generateDefaultKnobProperties(knobsPositions.length, disabled, knobPropertiesProp);
|
|
81
81
|
const rangesCount = knobProperties.length - 1;
|
|
82
|
-
const trackStyles = utils.createTrackStyles(knobProperties
|
|
83
|
-
const knobStyles = utils.createKnobStyles(knobProperties
|
|
82
|
+
const trackStyles = utils.createTrackStyles(knobProperties);
|
|
83
|
+
const knobStyles = utils.createKnobStyles(knobProperties);
|
|
84
84
|
const performValidation = React.useCallback(() => {
|
|
85
85
|
let invalid = false;
|
|
86
86
|
const newValidationState = knobsPositions.map((position) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.cjs","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import Slider, { SliderProps } from \"rc-slider\";\n\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport Tooltip from \"rc-tooltip\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { HvInputProps } from \"@core/components/Input\";\nimport {\n HvFormElement,\n HvFormStatus,\n HvLabel,\n HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { sliderStyles, staticClasses, useClasses } from \"./Slider.styles\";\nimport {\n calculateStepValue,\n convertStatusToArray,\n createKnobStyles,\n createMark,\n createTrackStyles,\n ensureValuesConsistency,\n generateDefaultKnobProperties,\n isSingleSlider,\n knobsPositionsToKnobsValues,\n knobsPositionToScaledValue,\n knobsValuesToKnobsPositions,\n scaledValueToKnobsPositionValue,\n statusArrayToFormStatus,\n} from \"./utils\";\nimport { HvSliderInput } from \"./SliderInput/SliderInput\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\n\nexport { staticClasses as sliderClasses };\n\nexport type HvSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderProps\n extends HvBaseProps<HTMLDivElement, \"onChange\" | \"onBlur\"> {\n /**\n * The slider name.\n */\n name?: string;\n /**\n * The label of the slider.\n *\n * If not provided, an aria-label or aria-labelledby must be inputted via sliderProps.\n */\n label?: React.ReactNode;\n /**\n * Indicates that the slider is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the slider is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that user slider is required on the form element.\n */\n required?: boolean;\n /**\n * What message to render when the value is required.\n */\n requiredMessage?: string;\n /**\n * If `true` the input that controls the slider is hidden.\n */\n hideInput?: boolean;\n /**\n * Attributes applied to the slider element.\n */\n sliderProps?: SliderProps;\n /**\n * The status of the slider element.\n *\n * Valid is correct, invalid is incorrect and standBy means no validations have run.\n *\n * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n */\n status?: HvFormStatus | HvFormStatus[];\n /**\n * The error message to show when `status` is \"invalid\".\n */\n statusMessage?: React.ReactNode;\n /**\n * The values array to apply to the component\n */\n values?: number[];\n /**\n * The default values array to apply to the component\n */\n defaultValues?: (number | undefined)[];\n /**\n * The object used to set the knob properties,\n * for every item in the array a new knob will be created.\n */\n knobProperties?: HvKnobProperty[];\n /**\n * The object used to set the mark properties individually.\n */\n markProperties?: HvMarkProperty[];\n /**\n * The function executed before a change will occur in the slider.\n */\n onBeforeChange?: (value: number[]) => void;\n /**\n * The function executed while a change is occurring in the slider.\n */\n onChange?: (value: number[]) => void;\n /**\n * The function executed after a change ocurred in the slider.\n */\n onAfterChange?: (value: number[]) => void;\n /**\n * The function executed after a blur ocurred in the slider.\n */\n onBlur?: (\n event: React.FocusEvent,\n knobsValues: number[],\n status?: HvFormStatus | HvFormStatus[]\n ) => void;\n /**\n * The separation in points between marks.\n * example: if 10 divisions and a markstep of 2 there will be 5 marks.\n */\n markStep?: number;\n /**\n * How many subdivisions there are in the slider.\n */\n divisionQuantity?: number;\n /**\n * The value of the first point in the slider from left to right.\n */\n minPointValue?: number;\n /**\n * The value of the last point in the slider from left to right.\n */\n maxPointValue?: number;\n /**\n * The nax number of decimals if no format function is applied\n */\n markDigits?: number;\n /**\n * A formatting function used to add format to the marks in the track,\n * the function receives the mark text\n */\n formatMark?: (label: React.ReactNode) => React.ReactNode;\n /**\n * A formatting function used to add format to the tooltip in the track,\n * the function receives the mark text\n */\n formatTooltip?: (label: React.ReactNode) => React.ReactNode;\n /**\n * If `true` the knobs can't have the same value, if `false` knobs can have the same value.\n */\n noOverlap?: boolean;\n /**\n * Attributes applied to the input element.\n */\n inputProps?: HvInputProps[];\n /**\n * Attributes applied to the knob element.\n */\n knobProps?: React.HTMLAttributes<HTMLDivElement>[];\n /**\n * The classes object to be applied into the root object.\n */\n classes?: HvSliderClasses;\n}\n\n/**\n * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.\n */\nexport const HvSlider = (props: HvSliderProps) => {\n const {\n id,\n className,\n name,\n label,\n status,\n statusMessage,\n disabled,\n classes: classesProp,\n sliderProps,\n knobProps,\n inputProps,\n requiredMessage = \"The value is required\",\n noOverlap = true,\n hideInput = false,\n required = false,\n readOnly = false,\n markProperties = [],\n defaultValues = [undefined],\n values: valuesProp = [],\n knobProperties: knobPropertiesProp,\n \"aria-errormessage\": ariaErrorMessage,\n maxPointValue = 100,\n minPointValue = 0,\n divisionQuantity = 100,\n markStep = 20,\n markDigits = 0,\n formatMark,\n onChange,\n onBlur,\n onBeforeChange,\n onAfterChange,\n formatTooltip,\n ...others\n } = useDefaultProps(\"HvSlider\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n // Miscellaneous state\n const hasLabel = label != null;\n\n // Signals that the user has manually edited the input value\n const isDirty = useRef(false);\n\n const elementId = useUniqueId(id, \"hvSlider\");\n\n const sliderInputId = setId(elementId, \"input\");\n\n const stepValue: number = useMemo(\n () => calculateStepValue(maxPointValue, minPointValue, divisionQuantity),\n [divisionQuantity, maxPointValue, minPointValue]\n );\n\n const inverseStepValue: number = 1 / stepValue;\n\n const marks = useMemo(\n () =>\n createMark(\n markProperties,\n markStep,\n divisionQuantity,\n minPointValue,\n stepValue,\n markDigits,\n !!disabled,\n sliderStyles,\n formatMark\n ),\n [\n disabled,\n divisionQuantity,\n formatMark,\n markDigits,\n markProperties,\n markStep,\n minPointValue,\n stepValue,\n ]\n );\n\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const isSingle: boolean = useMemo(\n () => isSingleSlider(valuesProp, defaultValues),\n [defaultValues, valuesProp]\n );\n\n const value: number[] | undefined = useMemo(\n () =>\n valuesProp?.length > 0\n ? knobsValuesToKnobsPositions(\n valuesProp,\n inverseStepValue,\n minPointValue\n )\n : undefined,\n [inverseStepValue, minPointValue, valuesProp]\n );\n\n const defaultKnobsPositions: number[] = useMemo(\n () =>\n knobsValuesToKnobsPositions(\n defaultValues,\n inverseStepValue,\n minPointValue\n ),\n [defaultValues, inverseStepValue, minPointValue]\n );\n\n const [knobsPositions, setKnobsPositions] = useControlled(\n value,\n defaultKnobsPositions\n );\n\n // Validation related state\n const { arrayStatus, arrayDefaultStatus } = useMemo(\n () => convertStatusToArray(knobsPositions.length, status),\n [knobsPositions.length, status]\n );\n\n const [validationStatus, setValidationState] = useControlled(\n arrayStatus,\n arrayDefaultStatus\n );\n\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\"\n );\n\n const [isDraggingTrack, setIsDraggingTrack] = useState<boolean>(false);\n\n const knobProperties: HvKnobProperty[] = generateDefaultKnobProperties(\n knobsPositions.length,\n disabled,\n knobPropertiesProp\n );\n\n const rangesCount = knobProperties.length - 1;\n\n const trackStyles = createTrackStyles(knobProperties, sliderStyles);\n\n const knobStyles = createKnobStyles(knobProperties, sliderStyles);\n\n const performValidation = useCallback(() => {\n let invalid: boolean = false;\n\n const newValidationState = knobsPositions.map((position) => {\n if (position == null || Number.isNaN(position)) {\n invalid = true;\n return validationStates.invalid;\n }\n return validationStates.valid;\n });\n\n setValidationState([...newValidationState]);\n\n if (invalid) {\n setValidationMessage(requiredMessage);\n return;\n }\n\n setValidationMessage(\"\");\n }, [\n knobsPositions,\n requiredMessage,\n setValidationMessage,\n setValidationState,\n ]);\n\n useEffect(() => {\n const stepVl = calculateStepValue(\n maxPointValue,\n minPointValue,\n divisionQuantity\n );\n\n const inverseStepVl = 1 / stepVl;\n\n if (valuesProp?.length > 0) {\n setKnobsPositions(\n knobsValuesToKnobsPositions(\n valuesProp.length > 0 ? valuesProp : defaultValues,\n inverseStepVl,\n minPointValue\n )\n );\n }\n }, [\n defaultValues,\n divisionQuantity,\n maxPointValue,\n minPointValue,\n setKnobsPositions,\n valuesProp,\n ]);\n\n useEffect(() => {\n if (!isDirty.current) {\n // Skip validation if currently focused or if empty and\n // the user never manually edited the input value\n return;\n }\n\n performValidation();\n }, [knobsPositions, requiredMessage, performValidation]);\n\n const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n if ((event.target as HTMLDivElement).className.includes(\"track\")) {\n setIsDraggingTrack(true);\n }\n };\n\n const onMouseUpHandler = () => {\n setIsDraggingTrack(false);\n };\n\n /**\n * Generates an object which posses the current value and position of the knobs.\n *\n * @param {Array} knobsCurrentPosition - An array containing the current positions of the knobs.\n * @returns {Object} - An object with the positions and values of the knobs.\n * @memberof HvSlider\n */\n const generateKnobsPositionAndValues = (\n knobsCurrentPosition: number[]\n ): { knobsPosition: number[]; knobsValues: number[] } => {\n const newKnobsPosition: number[] = knobsCurrentPosition.slice();\n const knobsValues: number[] = [];\n\n let duplicatedValue: number | null = null;\n\n const findDuplicated: number[] = newKnobsPosition.filter(\n (item, index) => newKnobsPosition.indexOf(item) !== index\n );\n\n if (noOverlap && findDuplicated.length > 0) {\n [duplicatedValue] = findDuplicated;\n }\n\n newKnobsPosition.forEach((position, index, array) => {\n const newArray: number[] = array;\n let newPosition: number = position;\n\n if (noOverlap && newPosition === duplicatedValue) {\n const previousValue = knobsPositions[index];\n if (previousValue !== newPosition) {\n newPosition += newPosition > previousValue ? -1 : 1;\n newArray[index] = newPosition;\n }\n }\n\n knobsValues[index] = knobsPositionToScaledValue(\n newPosition,\n minPointValue,\n stepValue\n );\n }, this);\n\n return {\n knobsPosition: newKnobsPosition,\n knobsValues,\n };\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n const knobs = generateKnobsPositionAndValues(knobsPositions);\n\n performValidation();\n\n onBlur?.(event, knobs.knobsValues, status);\n };\n\n /**\n * Function executed while the knobs changes.\n *\n * executes the callback provided by the user with the values and position of the knobs,\n * also lock the value of the knob in case one is fixed.\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onChangeHandler = (knobsPosition: number[]) => {\n isDirty.current = true;\n\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n knobProperties.forEach((knobProperty, index) => {\n if (knobProperty.fixed) {\n knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(\n defaultValues[index],\n minPointValue,\n inverseStepValue\n );\n }\n });\n\n if (disabled || readOnly) return;\n\n onChange?.(knobs.knobsValues);\n\n setKnobsPositions(knobs.knobsPosition);\n };\n\n const onInputChangeHandler = (inputValues: number[], index: number) => {\n let newKnobPositions = knobsValuesToKnobsPositions(\n inputValues,\n inverseStepValue,\n minPointValue\n );\n\n newKnobPositions = ensureValuesConsistency(newKnobPositions, index);\n\n onChangeHandler(newKnobPositions);\n };\n\n /**\n * Function executed before a change.\n *\n * executes the callback provided by the user with the values and position of the knobs\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onBeforeChangeHandler = (knobsPosition: number[]) => {\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n onBeforeChange?.(knobs.knobsValues);\n };\n\n /**\n * Function executed after a change.\n *\n * executes the callback provided by the user with the values and position of the knobs\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onAfterChangeHandler = (knobsPosition: number[]) => {\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n onAfterChange?.(knobs.knobsValues);\n };\n\n /**\n * Function used to create a custom knob for the slider.\n *\n * TODO: This should be isolated because is creating a sub component,\n * but there were some problems regarding the underlying component losing\n * references of the handlers disabling the focus.\n *\n * @param {Object} props - An object containing the properties of the knobs.\n * @memberof HvSlider\n */\n const createKnob = (knobNode, params) => {\n const { value: knobValue, dragging, index } = params;\n const { className: knobClassName, style, ...restProps } = knobNode.props;\n const scaledKnobValue = knobsPositionToScaledValue(\n knobValue,\n minPointValue,\n stepValue\n ).toFixed(markDigits);\n if (dragging) {\n style.backgroundColor = knobProperties[index]?.dragColor;\n } else {\n style.backgroundColor = knobProperties[index]?.color;\n }\n\n const isEmpty =\n Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;\n const handleId = setId(elementId, \"knob\");\n const indexedHandleId = setId(handleId, index);\n\n return (\n <div\n key={index}\n className={cx({\n [classes.handleContainer]: !!(!disabled && !isEmpty),\n [classes.handleContainerDisabled]: !!(disabled && !isEmpty),\n [classes.handleHiddenContainer]: isEmpty || readOnly,\n })}\n >\n <Tooltip\n prefixCls=\"rc-slider-tooltip\"\n overlay={formatTooltip?.(scaledKnobValue) || scaledKnobValue}\n visible={dragging}\n placement=\"top\"\n overlayClassName={classes.sliderTooltip}\n getTooltipContainer={() =>\n document.getElementById(indexedHandleId || \"\") as HTMLElement\n }\n >\n <div\n id={indexedHandleId}\n style={style}\n className={cx(knobClassName, classes.handle)}\n {...restProps}\n aria-label={`${label}-knob-${index}`}\n aria-valuenow={knobsPositionToScaledValue(\n knobValue,\n minPointValue,\n stepValue\n )}\n aria-valuemin={minPointValue}\n aria-valuemax={maxPointValue}\n {...knobProps?.[index]}\n />\n </Tooltip>\n </div>\n );\n };\n\n return (\n <HvFormElement\n className={cx(\n classes.root,\n {\n [classes.trackStandBy]:\n !readOnly && !disabled && !isSingle && !isDraggingTrack,\n [classes.trackDragging]:\n !readOnly && !disabled && !isSingle && isDraggingTrack,\n [classes.rootDisabled]: !!disabled,\n },\n className\n )}\n id={id}\n name={name}\n status={statusArrayToFormStatus(validationStatus)}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n onMouseDown={onMouseDownHandler}\n onMouseUp={onMouseUpHandler}\n onBlur={onBlurHandler}\n {...others}\n >\n {(hasLabel || !hideInput) && (\n <div\n className={cx(classes.labelContainer, {\n [classes.labelIncluded]: hasLabel,\n [classes.onlyInput]: !hasLabel,\n })}\n >\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n className={classes.label}\n htmlFor={setId(elementId, \"slider\")}\n label={label}\n />\n )}\n\n {!hideInput && (\n <HvSliderInput\n id={sliderInputId}\n label={label}\n values={knobsPositionsToKnobsValues(\n knobsPositions,\n stepValue,\n minPointValue\n )}\n onChange={onInputChangeHandler}\n status={validationStatus}\n disabled={disabled}\n readOnly={readOnly}\n markDigits={markDigits}\n inputProps={inputProps}\n />\n )}\n </div>\n )}\n\n <div className={cx(classes.sliderBase, classes.sliderContainer)}>\n {isSingle && (\n <Slider\n handleRender={createKnob}\n className={classes.sliderRoot}\n min={0}\n max={divisionQuantity}\n step={1}\n marks={marks}\n dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n onChange={(singleValue) =>\n onChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onBeforeChange={(singleValue) =>\n onBeforeChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onAfterChange={(singleValue) =>\n onAfterChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n value={knobsPositions.length > 0 ? knobsPositions[0] : undefined}\n allowCross={false}\n disabled={disabled}\n count={rangesCount}\n railStyle={sliderStyles.rail}\n handleStyle={knobStyles.knobInner}\n trackStyle={trackStyles}\n {...sliderProps}\n />\n )}\n {!isSingle && (\n <Slider\n range\n handleRender={createKnob}\n className={cx(classes.sliderRoot, {\n [classes.rootRange]: !isSingle,\n })}\n min={0}\n max={divisionQuantity}\n step={1}\n marks={marks}\n disabled={disabled}\n dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n onChange={(singleValue) =>\n onChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onBeforeChange={(singleValue) =>\n onBeforeChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onAfterChange={(singleValue) =>\n onAfterChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n value={knobsPositions.length > 0 ? [...knobsPositions] : undefined}\n allowCross={false}\n count={rangesCount}\n railStyle={sliderStyles.rail}\n handleStyle={knobStyles.knobInner}\n trackStyle={trackStyles}\n draggableTrack={!readOnly && !isSingle}\n {...sliderProps}\n />\n )}\n </div>\n\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["HvSlider","props","id","className","name","label","status","statusMessage","disabled","classes","classesProp","sliderProps","knobProps","inputProps","requiredMessage","noOverlap","hideInput","required","readOnly","markProperties","defaultValues","undefined","values","valuesProp","knobProperties","knobPropertiesProp","ariaErrorMessage","maxPointValue","minPointValue","divisionQuantity","markStep","markDigits","formatMark","onChange","onBlur","onBeforeChange","onAfterChange","formatTooltip","others","useDefaultProps","cx","useClasses","hasLabel","isDirty","useRef","elementId","useUniqueId","sliderInputId","setId","stepValue","useMemo","calculateStepValue","inverseStepValue","marks","createMark","sliderStyles","canShowError","isSingle","isSingleSlider","value","length","knobsValuesToKnobsPositions","defaultKnobsPositions","knobsPositions","setKnobsPositions","useControlled","arrayStatus","arrayDefaultStatus","convertStatusToArray","validationStatus","setValidationState","validationMessage","setValidationMessage","isDraggingTrack","setIsDraggingTrack","useState","generateDefaultKnobProperties","rangesCount","trackStyles","createTrackStyles","knobStyles","createKnobStyles","performValidation","useCallback","invalid","newValidationState","map","position","Number","isNaN","validationStates","valid","useEffect","stepVl","inverseStepVl","current","onMouseDownHandler","event","target","includes","onMouseUpHandler","generateKnobsPositionAndValues","knobsCurrentPosition","newKnobsPosition","slice","knobsValues","duplicatedValue","findDuplicated","filter","item","index","indexOf","forEach","array","newArray","newPosition","previousValue","knobsPositionToScaledValue","knobsPosition","onBlurHandler","knobs","onChangeHandler","knobProperty","fixed","scaledValueToKnobsPositionValue","onInputChangeHandler","inputValues","newKnobPositions","ensureValuesConsistency","onBeforeChangeHandler","onAfterChangeHandler","createKnob","knobNode","params","knobValue","dragging","knobClassName","style","restProps","scaledKnobValue","toFixed","backgroundColor","dragColor","color","isEmpty","handleId","indexedHandleId","jsx","handleContainer","handleContainerDisabled","handleHiddenContainer","Tooltip","sliderTooltip","document","getElementById","handle","jsxs","HvFormElement","root","trackStandBy","trackDragging","rootDisabled","statusArrayToFormStatus","labelContainer","labelIncluded","onlyInput","HvLabel","HvSliderInput","knobsPositionsToKnobsValues","sliderBase","sliderContainer","Slider","sliderRoot","dotDisabled","dot","singleValue","Array","isArray","rail","knobInner","rootRange","HvWarningText","error"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Slider.cjs","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import Slider, { SliderProps } from \"rc-slider\";\n\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport Tooltip from \"rc-tooltip\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { HvInputProps } from \"@core/components/Input\";\nimport {\n HvFormElement,\n HvFormStatus,\n HvLabel,\n HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { sliderStyles, staticClasses, useClasses } from \"./Slider.styles\";\nimport {\n calculateStepValue,\n convertStatusToArray,\n createKnobStyles,\n createMark,\n createTrackStyles,\n ensureValuesConsistency,\n generateDefaultKnobProperties,\n isSingleSlider,\n knobsPositionsToKnobsValues,\n knobsPositionToScaledValue,\n knobsValuesToKnobsPositions,\n scaledValueToKnobsPositionValue,\n statusArrayToFormStatus,\n} from \"./utils\";\nimport { HvSliderInput } from \"./SliderInput/SliderInput\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\n\nexport { staticClasses as sliderClasses };\n\nexport type HvSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderProps\n extends HvBaseProps<HTMLDivElement, \"onChange\" | \"onBlur\"> {\n /**\n * The slider name.\n */\n name?: string;\n /**\n * The label of the slider.\n *\n * If not provided, an aria-label or aria-labelledby must be inputted via sliderProps.\n */\n label?: React.ReactNode;\n /**\n * Indicates that the slider is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the slider is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that user slider is required on the form element.\n */\n required?: boolean;\n /**\n * What message to render when the value is required.\n */\n requiredMessage?: string;\n /**\n * If `true` the input that controls the slider is hidden.\n */\n hideInput?: boolean;\n /**\n * Attributes applied to the slider element.\n */\n sliderProps?: SliderProps;\n /**\n * The status of the slider element.\n *\n * Valid is correct, invalid is incorrect and standBy means no validations have run.\n *\n * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n */\n status?: HvFormStatus | HvFormStatus[];\n /**\n * The error message to show when `status` is \"invalid\".\n */\n statusMessage?: React.ReactNode;\n /**\n * The values array to apply to the component\n */\n values?: number[];\n /**\n * The default values array to apply to the component\n */\n defaultValues?: (number | undefined)[];\n /**\n * The object used to set the knob properties,\n * for every item in the array a new knob will be created.\n */\n knobProperties?: HvKnobProperty[];\n /**\n * The object used to set the mark properties individually.\n */\n markProperties?: HvMarkProperty[];\n /**\n * The function executed before a change will occur in the slider.\n */\n onBeforeChange?: (value: number[]) => void;\n /**\n * The function executed while a change is occurring in the slider.\n */\n onChange?: (value: number[]) => void;\n /**\n * The function executed after a change ocurred in the slider.\n */\n onAfterChange?: (value: number[]) => void;\n /**\n * The function executed after a blur ocurred in the slider.\n */\n onBlur?: (\n event: React.FocusEvent,\n knobsValues: number[],\n status?: HvFormStatus | HvFormStatus[]\n ) => void;\n /**\n * The separation in points between marks.\n * example: if 10 divisions and a markstep of 2 there will be 5 marks.\n */\n markStep?: number;\n /**\n * How many subdivisions there are in the slider.\n */\n divisionQuantity?: number;\n /**\n * The value of the first point in the slider from left to right.\n */\n minPointValue?: number;\n /**\n * The value of the last point in the slider from left to right.\n */\n maxPointValue?: number;\n /**\n * The nax number of decimals if no format function is applied\n */\n markDigits?: number;\n /**\n * A formatting function used to add format to the marks in the track,\n * the function receives the mark text\n */\n formatMark?: (label: React.ReactNode) => React.ReactNode;\n /**\n * A formatting function used to add format to the tooltip in the track,\n * the function receives the mark text\n */\n formatTooltip?: (label: React.ReactNode) => React.ReactNode;\n /**\n * If `true` the knobs can't have the same value, if `false` knobs can have the same value.\n */\n noOverlap?: boolean;\n /**\n * Attributes applied to the input element.\n */\n inputProps?: HvInputProps[];\n /**\n * Attributes applied to the knob element.\n */\n knobProps?: React.HTMLAttributes<HTMLDivElement>[];\n /**\n * The classes object to be applied into the root object.\n */\n classes?: HvSliderClasses;\n}\n\n/**\n * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.\n */\nexport const HvSlider = (props: HvSliderProps) => {\n const {\n id,\n className,\n name,\n label,\n status,\n statusMessage,\n disabled,\n classes: classesProp,\n sliderProps,\n knobProps,\n inputProps,\n requiredMessage = \"The value is required\",\n noOverlap = true,\n hideInput = false,\n required = false,\n readOnly = false,\n markProperties = [],\n defaultValues = [undefined],\n values: valuesProp = [],\n knobProperties: knobPropertiesProp,\n \"aria-errormessage\": ariaErrorMessage,\n maxPointValue = 100,\n minPointValue = 0,\n divisionQuantity = 100,\n markStep = 20,\n markDigits = 0,\n formatMark,\n onChange,\n onBlur,\n onBeforeChange,\n onAfterChange,\n formatTooltip,\n ...others\n } = useDefaultProps(\"HvSlider\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n // Miscellaneous state\n const hasLabel = label != null;\n\n // Signals that the user has manually edited the input value\n const isDirty = useRef(false);\n\n const elementId = useUniqueId(id, \"hvSlider\");\n\n const sliderInputId = setId(elementId, \"input\");\n\n const stepValue: number = useMemo(\n () => calculateStepValue(maxPointValue, minPointValue, divisionQuantity),\n [divisionQuantity, maxPointValue, minPointValue]\n );\n\n const inverseStepValue: number = 1 / stepValue;\n\n const marks = useMemo(\n () =>\n createMark(\n markProperties,\n markStep,\n divisionQuantity,\n minPointValue,\n stepValue,\n markDigits,\n !!disabled,\n formatMark\n ),\n [\n disabled,\n divisionQuantity,\n formatMark,\n markDigits,\n markProperties,\n markStep,\n minPointValue,\n stepValue,\n ]\n );\n\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const isSingle: boolean = useMemo(\n () => isSingleSlider(valuesProp, defaultValues),\n [defaultValues, valuesProp]\n );\n\n const value: number[] | undefined = useMemo(\n () =>\n valuesProp?.length > 0\n ? knobsValuesToKnobsPositions(\n valuesProp,\n inverseStepValue,\n minPointValue\n )\n : undefined,\n [inverseStepValue, minPointValue, valuesProp]\n );\n\n const defaultKnobsPositions: number[] = useMemo(\n () =>\n knobsValuesToKnobsPositions(\n defaultValues,\n inverseStepValue,\n minPointValue\n ),\n [defaultValues, inverseStepValue, minPointValue]\n );\n\n const [knobsPositions, setKnobsPositions] = useControlled(\n value,\n defaultKnobsPositions\n );\n\n // Validation related state\n const { arrayStatus, arrayDefaultStatus } = useMemo(\n () => convertStatusToArray(knobsPositions.length, status),\n [knobsPositions.length, status]\n );\n\n const [validationStatus, setValidationState] = useControlled(\n arrayStatus,\n arrayDefaultStatus\n );\n\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\"\n );\n\n const [isDraggingTrack, setIsDraggingTrack] = useState<boolean>(false);\n\n const knobProperties: HvKnobProperty[] = generateDefaultKnobProperties(\n knobsPositions.length,\n disabled,\n knobPropertiesProp\n );\n\n const rangesCount = knobProperties.length - 1;\n\n const trackStyles = createTrackStyles(knobProperties);\n\n const knobStyles = createKnobStyles(knobProperties);\n\n const performValidation = useCallback(() => {\n let invalid: boolean = false;\n\n const newValidationState = knobsPositions.map((position) => {\n if (position == null || Number.isNaN(position)) {\n invalid = true;\n return validationStates.invalid;\n }\n return validationStates.valid;\n });\n\n setValidationState([...newValidationState]);\n\n if (invalid) {\n setValidationMessage(requiredMessage);\n return;\n }\n\n setValidationMessage(\"\");\n }, [\n knobsPositions,\n requiredMessage,\n setValidationMessage,\n setValidationState,\n ]);\n\n useEffect(() => {\n const stepVl = calculateStepValue(\n maxPointValue,\n minPointValue,\n divisionQuantity\n );\n\n const inverseStepVl = 1 / stepVl;\n\n if (valuesProp?.length > 0) {\n setKnobsPositions(\n knobsValuesToKnobsPositions(\n valuesProp.length > 0 ? valuesProp : defaultValues,\n inverseStepVl,\n minPointValue\n )\n );\n }\n }, [\n defaultValues,\n divisionQuantity,\n maxPointValue,\n minPointValue,\n setKnobsPositions,\n valuesProp,\n ]);\n\n useEffect(() => {\n if (!isDirty.current) {\n // Skip validation if currently focused or if empty and\n // the user never manually edited the input value\n return;\n }\n\n performValidation();\n }, [knobsPositions, requiredMessage, performValidation]);\n\n const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n if ((event.target as HTMLDivElement).className.includes(\"track\")) {\n setIsDraggingTrack(true);\n }\n };\n\n const onMouseUpHandler = () => {\n setIsDraggingTrack(false);\n };\n\n /**\n * Generates an object which posses the current value and position of the knobs.\n *\n * @param {Array} knobsCurrentPosition - An array containing the current positions of the knobs.\n * @returns {Object} - An object with the positions and values of the knobs.\n * @memberof HvSlider\n */\n const generateKnobsPositionAndValues = (\n knobsCurrentPosition: number[]\n ): { knobsPosition: number[]; knobsValues: number[] } => {\n const newKnobsPosition: number[] = knobsCurrentPosition.slice();\n const knobsValues: number[] = [];\n\n let duplicatedValue: number | null = null;\n\n const findDuplicated: number[] = newKnobsPosition.filter(\n (item, index) => newKnobsPosition.indexOf(item) !== index\n );\n\n if (noOverlap && findDuplicated.length > 0) {\n [duplicatedValue] = findDuplicated;\n }\n\n newKnobsPosition.forEach((position, index, array) => {\n const newArray: number[] = array;\n let newPosition: number = position;\n\n if (noOverlap && newPosition === duplicatedValue) {\n const previousValue = knobsPositions[index];\n if (previousValue !== newPosition) {\n newPosition += newPosition > previousValue ? -1 : 1;\n newArray[index] = newPosition;\n }\n }\n\n knobsValues[index] = knobsPositionToScaledValue(\n newPosition,\n minPointValue,\n stepValue\n );\n }, this);\n\n return {\n knobsPosition: newKnobsPosition,\n knobsValues,\n };\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n const knobs = generateKnobsPositionAndValues(knobsPositions);\n\n performValidation();\n\n onBlur?.(event, knobs.knobsValues, status);\n };\n\n /**\n * Function executed while the knobs changes.\n *\n * executes the callback provided by the user with the values and position of the knobs,\n * also lock the value of the knob in case one is fixed.\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onChangeHandler = (knobsPosition: number[]) => {\n isDirty.current = true;\n\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n knobProperties.forEach((knobProperty, index) => {\n if (knobProperty.fixed) {\n knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(\n defaultValues[index],\n minPointValue,\n inverseStepValue\n );\n }\n });\n\n if (disabled || readOnly) return;\n\n onChange?.(knobs.knobsValues);\n\n setKnobsPositions(knobs.knobsPosition);\n };\n\n const onInputChangeHandler = (inputValues: number[], index: number) => {\n let newKnobPositions = knobsValuesToKnobsPositions(\n inputValues,\n inverseStepValue,\n minPointValue\n );\n\n newKnobPositions = ensureValuesConsistency(newKnobPositions, index);\n\n onChangeHandler(newKnobPositions);\n };\n\n /**\n * Function executed before a change.\n *\n * executes the callback provided by the user with the values and position of the knobs\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onBeforeChangeHandler = (knobsPosition: number[]) => {\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n onBeforeChange?.(knobs.knobsValues);\n };\n\n /**\n * Function executed after a change.\n *\n * executes the callback provided by the user with the values and position of the knobs\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onAfterChangeHandler = (knobsPosition: number[]) => {\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n onAfterChange?.(knobs.knobsValues);\n };\n\n /**\n * Function used to create a custom knob for the slider.\n *\n * TODO: This should be isolated because is creating a sub component,\n * but there were some problems regarding the underlying component losing\n * references of the handlers disabling the focus.\n *\n * @param {Object} props - An object containing the properties of the knobs.\n * @memberof HvSlider\n */\n const createKnob = (knobNode, params) => {\n const { value: knobValue, dragging, index } = params;\n const { className: knobClassName, style, ...restProps } = knobNode.props;\n const scaledKnobValue = knobsPositionToScaledValue(\n knobValue,\n minPointValue,\n stepValue\n ).toFixed(markDigits);\n if (dragging) {\n style.backgroundColor = knobProperties[index]?.dragColor;\n } else {\n style.backgroundColor = knobProperties[index]?.color;\n }\n\n const isEmpty =\n Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;\n const handleId = setId(elementId, \"knob\");\n const indexedHandleId = setId(handleId, index);\n\n return (\n <div\n key={index}\n className={cx({\n [classes.handleContainer]: !!(!disabled && !isEmpty),\n [classes.handleContainerDisabled]: !!(disabled && !isEmpty),\n [classes.handleHiddenContainer]: isEmpty || readOnly,\n })}\n >\n <Tooltip\n prefixCls=\"rc-slider-tooltip\"\n overlay={formatTooltip?.(scaledKnobValue) || scaledKnobValue}\n visible={dragging}\n placement=\"top\"\n overlayClassName={classes.sliderTooltip}\n getTooltipContainer={() =>\n document.getElementById(indexedHandleId || \"\") as HTMLElement\n }\n >\n <div\n id={indexedHandleId}\n style={style}\n className={cx(knobClassName, classes.handle)}\n {...restProps}\n aria-label={`${label}-knob-${index}`}\n aria-valuenow={knobsPositionToScaledValue(\n knobValue,\n minPointValue,\n stepValue\n )}\n aria-valuemin={minPointValue}\n aria-valuemax={maxPointValue}\n {...knobProps?.[index]}\n />\n </Tooltip>\n </div>\n );\n };\n\n return (\n <HvFormElement\n className={cx(\n classes.root,\n {\n [classes.trackStandBy]:\n !readOnly && !disabled && !isSingle && !isDraggingTrack,\n [classes.trackDragging]:\n !readOnly && !disabled && !isSingle && isDraggingTrack,\n [classes.rootDisabled]: !!disabled,\n },\n className\n )}\n id={id}\n name={name}\n status={statusArrayToFormStatus(validationStatus)}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n onMouseDown={onMouseDownHandler}\n onMouseUp={onMouseUpHandler}\n onBlur={onBlurHandler}\n {...others}\n >\n {(hasLabel || !hideInput) && (\n <div\n className={cx(classes.labelContainer, {\n [classes.labelIncluded]: hasLabel,\n [classes.onlyInput]: !hasLabel,\n })}\n >\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n className={classes.label}\n htmlFor={setId(elementId, \"slider\")}\n label={label}\n />\n )}\n\n {!hideInput && (\n <HvSliderInput\n id={sliderInputId}\n label={label}\n values={knobsPositionsToKnobsValues(\n knobsPositions,\n stepValue,\n minPointValue\n )}\n onChange={onInputChangeHandler}\n status={validationStatus}\n disabled={disabled}\n readOnly={readOnly}\n markDigits={markDigits}\n inputProps={inputProps}\n />\n )}\n </div>\n )}\n\n <div className={cx(classes.sliderBase, classes.sliderContainer)}>\n {isSingle && (\n <Slider\n handleRender={createKnob}\n className={classes.sliderRoot}\n min={0}\n max={divisionQuantity}\n step={1}\n marks={marks}\n dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n onChange={(singleValue) =>\n onChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onBeforeChange={(singleValue) =>\n onBeforeChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onAfterChange={(singleValue) =>\n onAfterChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n value={knobsPositions.length > 0 ? knobsPositions[0] : undefined}\n allowCross={false}\n disabled={disabled}\n count={rangesCount}\n railStyle={sliderStyles.rail}\n handleStyle={knobStyles.knobInner}\n trackStyle={trackStyles}\n {...sliderProps}\n />\n )}\n {!isSingle && (\n <Slider\n range\n handleRender={createKnob}\n className={cx(classes.sliderRoot, {\n [classes.rootRange]: !isSingle,\n })}\n min={0}\n max={divisionQuantity}\n step={1}\n marks={marks}\n disabled={disabled}\n dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n onChange={(singleValue) =>\n onChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onBeforeChange={(singleValue) =>\n onBeforeChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onAfterChange={(singleValue) =>\n onAfterChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n value={knobsPositions.length > 0 ? [...knobsPositions] : undefined}\n allowCross={false}\n count={rangesCount}\n railStyle={sliderStyles.rail}\n handleStyle={knobStyles.knobInner}\n trackStyle={trackStyles}\n draggableTrack={!readOnly && !isSingle}\n {...sliderProps}\n />\n )}\n </div>\n\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["HvSlider","props","id","className","name","label","status","statusMessage","disabled","classes","classesProp","sliderProps","knobProps","inputProps","requiredMessage","noOverlap","hideInput","required","readOnly","markProperties","defaultValues","undefined","values","valuesProp","knobProperties","knobPropertiesProp","ariaErrorMessage","maxPointValue","minPointValue","divisionQuantity","markStep","markDigits","formatMark","onChange","onBlur","onBeforeChange","onAfterChange","formatTooltip","others","useDefaultProps","cx","useClasses","hasLabel","isDirty","useRef","elementId","useUniqueId","sliderInputId","setId","stepValue","useMemo","calculateStepValue","inverseStepValue","marks","createMark","canShowError","isSingle","isSingleSlider","value","length","knobsValuesToKnobsPositions","defaultKnobsPositions","knobsPositions","setKnobsPositions","useControlled","arrayStatus","arrayDefaultStatus","convertStatusToArray","validationStatus","setValidationState","validationMessage","setValidationMessage","isDraggingTrack","setIsDraggingTrack","useState","generateDefaultKnobProperties","rangesCount","trackStyles","createTrackStyles","knobStyles","createKnobStyles","performValidation","useCallback","invalid","newValidationState","map","position","Number","isNaN","validationStates","valid","useEffect","stepVl","inverseStepVl","current","onMouseDownHandler","event","target","includes","onMouseUpHandler","generateKnobsPositionAndValues","knobsCurrentPosition","newKnobsPosition","slice","knobsValues","duplicatedValue","findDuplicated","filter","item","index","indexOf","forEach","array","newArray","newPosition","previousValue","knobsPositionToScaledValue","knobsPosition","onBlurHandler","knobs","onChangeHandler","knobProperty","fixed","scaledValueToKnobsPositionValue","onInputChangeHandler","inputValues","newKnobPositions","ensureValuesConsistency","onBeforeChangeHandler","onAfterChangeHandler","createKnob","knobNode","params","knobValue","dragging","knobClassName","style","restProps","scaledKnobValue","toFixed","backgroundColor","dragColor","color","isEmpty","handleId","indexedHandleId","jsx","handleContainer","handleContainerDisabled","handleHiddenContainer","Tooltip","sliderTooltip","document","getElementById","handle","jsxs","HvFormElement","root","trackStandBy","trackDragging","rootDisabled","statusArrayToFormStatus","labelContainer","labelIncluded","onlyInput","HvLabel","HvSliderInput","knobsPositionsToKnobsValues","sliderBase","sliderContainer","Slider","sliderRoot","sliderStyles","dotDisabled","dot","singleValue","Array","isArray","rail","knobInner","rootRange","HvWarningText","error"],"mappings":";;;;;;;;;;;;;;;;;;;;AA4LaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,kBAAkB;AAAA,IAClBC,YAAY;AAAA,IACZC,YAAY;AAAA,IACZC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,iBAAiB,CAAE;AAAA,IACnBC,gBAAgB,CAACC,MAAS;AAAA,IAC1BC,QAAQC,aAAa,CAAE;AAAA,IACvBC,gBAAgBC;AAAAA,IAChB,qBAAqBC;AAAAA,IACrBC,gBAAgB;AAAA,IAChBC,gBAAgB;AAAA,IAChBC,mBAAmB;AAAA,IACnBC,WAAW;AAAA,IACXC,aAAa;AAAA,IACbC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,YAAYtC,KAAK;AAE/B,QAAA;AAAA,IAAEQ;AAAAA,IAAS+B;AAAAA,EAAAA,IAAOC,cAAAA,WAAW/B,WAAW;AAG9C,QAAMgC,WAAWrC,SAAS;AAGpBsC,QAAAA,UAAUC,aAAO,KAAK;AAEtBC,QAAAA,YAAYC,YAAAA,YAAY5C,IAAI,UAAU;AAEtC6C,QAAAA,gBAAgBC,MAAAA,MAAMH,WAAW,OAAO;AAE9C,QAAMI,YAAoBC,MAAAA,QACxB,MAAMC,MAAAA,mBAAmBxB,eAAeC,eAAeC,gBAAgB,GACvE,CAACA,kBAAkBF,eAAeC,aAAa,CACjD;AAEA,QAAMwB,mBAA2B,IAAIH;AAE/BI,QAAAA,QAAQH,MAAAA,QACZ,MACEI,MAAAA,WACEnC,gBACAW,UACAD,kBACAD,eACAqB,WACAlB,YACA,CAAC,CAACvB,UACFwB,UACF,GACF,CACExB,UACAqB,kBACAG,YACAD,YACAZ,gBACAW,UACAF,eACAqB,SAAS,CAEb;AAEMM,QAAAA,eACJ7B,oBAAoB,SAClBpB,WAAWe,UAAad,kBAAkBc,UACzCf,WAAWe,UAAaJ;AAEvBuC,QAAAA,WAAoBN,cACxB,MAAMO,qBAAelC,YAAYH,aAAa,GAC9C,CAACA,eAAeG,UAAU,CAC5B;AAEA,QAAMmC,QAA8BR,MAAAA,QAClC,OACE3B,yCAAYoC,UAAS,IACjBC,MAAAA,4BACErC,YACA6B,kBACAxB,aACF,IACAP,QACN,CAAC+B,kBAAkBxB,eAAeL,UAAU,CAC9C;AAEA,QAAMsC,wBAAkCX,MAAAA,QACtC,MACEU,MAAAA,4BACExC,eACAgC,kBACAxB,aACF,GACF,CAACR,eAAegC,kBAAkBxB,aAAa,CACjD;AAEA,QAAM,CAACkC,gBAAgBC,iBAAiB,IAAIC,cAAAA,cAC1CN,OACAG,qBACF;AAGM,QAAA;AAAA,IAAEI;AAAAA,IAAaC;AAAAA,EAAuBhB,IAAAA,cAC1C,MAAMiB,2BAAqBL,eAAeH,QAAQrD,MAAM,GACxD,CAACwD,eAAeH,QAAQrD,MAAM,CAChC;AAEA,QAAM,CAAC8D,kBAAkBC,kBAAkB,IAAIL,cAAAA,cAC7CC,aACAC,kBACF;AAEA,QAAM,CAACI,mBAAmBC,oBAAoB,IAAIP,cAAAA,cAChDzD,eACA,EACF;AAEA,QAAM,CAACiE,iBAAiBC,kBAAkB,IAAIC,eAAkB,KAAK;AAErE,QAAMlD,iBAAmCmD,MAAAA,8BACvCb,eAAeH,QACfnD,UACAiB,kBACF;AAEMmD,QAAAA,cAAcpD,eAAemC,SAAS;AAEtCkB,QAAAA,cAAcC,wBAAkBtD,cAAc;AAE9CuD,QAAAA,aAAaC,uBAAiBxD,cAAc;AAE5CyD,QAAAA,oBAAoBC,MAAAA,YAAY,MAAM;AAC1C,QAAIC,UAAmB;AAEjBC,UAAAA,qBAAqBtB,eAAeuB,IAAKC,CAAa,aAAA;AAC1D,UAAIA,YAAY,QAAQC,OAAOC,MAAMF,QAAQ,GAAG;AACpC,kBAAA;AACV,eAAOG,iBAAAA,QAAiBN;AAAAA,MAC1B;AACA,aAAOM,iBAAAA,QAAiBC;AAAAA,IAAAA,CACzB;AAEkB,uBAAA,CAAC,GAAGN,kBAAkB,CAAC;AAE1C,QAAID,SAAS;AACXZ,2BAAqBzD,eAAe;AACpC;AAAA,IACF;AAEAyD,yBAAqB,EAAE;AAAA,KACtB,CACDT,gBACAhD,iBACAyD,sBACAF,kBAAkB,CACnB;AAEDsB,QAAAA,UAAU,MAAM;AACd,UAAMC,SAASzC,MAAAA,mBACbxB,eACAC,eACAC,gBACF;AAEA,UAAMgE,gBAAgB,IAAID;AAEtBrE,SAAAA,yCAAYoC,UAAS,GAAG;AAExBC,wBAAAA,MAAAA,4BACErC,WAAWoC,SAAS,IAAIpC,aAAaH,eACrCyE,eACAjE,aACF,CACF;AAAA,IACF;AAAA,EAAA,GACC,CACDR,eACAS,kBACAF,eACAC,eACAmC,mBACAxC,UAAU,CACX;AAEDoE,QAAAA,UAAU,MAAM;AACV,QAAA,CAAChD,QAAQmD,SAAS;AAGpB;AAAA,IACF;AAEkB;EACjB,GAAA,CAAChC,gBAAgBhD,iBAAiBmE,iBAAiB,CAAC;AAEjDc,QAAAA,qBAAqBA,CAACC,UAA4C;AACtE,QAAKA,MAAMC,OAA0B9F,UAAU+F,SAAS,OAAO,GAAG;AAChEzB,yBAAmB,IAAI;AAAA,IACzB;AAAA,EAAA;AAGF,QAAM0B,mBAAmBA,MAAM;AAC7B1B,uBAAmB,KAAK;AAAA,EAAA;AAUpB2B,QAAAA,iCAAiCA,CACrCC,yBACuD;AACjDC,UAAAA,mBAA6BD,qBAAqBE;AACxD,UAAMC,cAAwB,CAAA;AAE9B,QAAIC,kBAAiC;AAE/BC,UAAAA,iBAA2BJ,iBAAiBK,OAChD,CAACC,MAAMC,UAAUP,iBAAiBQ,QAAQF,IAAI,MAAMC,KACtD;AAEI9F,QAAAA,aAAa2F,eAAe/C,SAAS,GAAG;AAC1C,OAAC8C,eAAe,IAAIC;AAAAA,IACtB;AAEAJ,qBAAiBS,QAAQ,CAACzB,UAAUuB,OAAOG,UAAU;AACnD,YAAMC,WAAqBD;AAC3B,UAAIE,cAAsB5B;AAEtBvE,UAAAA,aAAamG,gBAAgBT,iBAAiB;AAC1CU,cAAAA,gBAAgBrD,eAAe+C,KAAK;AAC1C,YAAIM,kBAAkBD,aAAa;AAClBA,yBAAAA,cAAcC,gBAAgB,KAAK;AAClDF,mBAASJ,KAAK,IAAIK;AAAAA,QACpB;AAAA,MACF;AAEAV,kBAAYK,KAAK,IAAIO,MAAAA,2BACnBF,aACAtF,eACAqB,SACF;AAAA,IAAA,GACC,MAAI;AAEA,WAAA;AAAA,MACLoE,eAAef;AAAAA,MACfE;AAAAA,IAAAA;AAAAA,EACF;AAGIc,QAAAA,gBAAgBA,CAACtB,UAA4B;AAC3CuB,UAAAA,QAAQnB,+BAA+BtC,cAAc;AAEzC;AAETkC,qCAAAA,OAAOuB,MAAMf,aAAalG;AAAAA,EAAM;AAYrCkH,QAAAA,kBAAkBA,CAACH,kBAA4B;AACnD1E,YAAQmD,UAAU;AAEZyB,UAAAA,QAAQnB,+BAA+BiB,aAAa;AAE3CN,mBAAAA,QAAQ,CAACU,cAAcZ,UAAU;AAC9C,UAAIY,aAAaC,OAAO;AAChBL,cAAAA,cAAcR,KAAK,IAAIc,MAAAA,gCAC3BvG,cAAcyF,KAAK,GACnBjF,eACAwB,gBACF;AAAA,MACF;AAAA,IAAA,CACD;AAED,QAAI5C,YAAYU;AAAU;AAE1Be,yCAAWsF,MAAMf;AAEjBzC,sBAAkBwD,MAAMF,aAAa;AAAA,EAAA;AAGjCO,QAAAA,uBAAuBA,CAACC,aAAuBhB,UAAkB;AACrE,QAAIiB,mBAAmBlE,MAAAA,4BACrBiE,aACAzE,kBACAxB,aACF;AAEmBmG,uBAAAA,MAAAA,wBAAwBD,kBAAkBjB,KAAK;AAElEW,oBAAgBM,gBAAgB;AAAA,EAAA;AAW5BE,QAAAA,wBAAwBA,CAACX,kBAA4B;AACnDE,UAAAA,QAAQnB,+BAA+BiB,aAAa;AAE1DlF,qDAAiBoF,MAAMf;AAAAA,EAAW;AAW9ByB,QAAAA,uBAAuBA,CAACZ,kBAA4B;AAClDE,UAAAA,QAAQnB,+BAA+BiB,aAAa;AAE1DjF,mDAAgBmF,MAAMf;AAAAA,EAAW;AAa7B0B,QAAAA,aAAaA,CAACC,UAAUC,WAAW;;AACjC,UAAA;AAAA,MAAE1E,OAAO2E;AAAAA,MAAWC;AAAAA,MAAUzB;AAAAA,IAAUuB,IAAAA;AACxC,UAAA;AAAA,MAAEjI,WAAWoI;AAAAA,MAAeC;AAAAA,MAAO,GAAGC;AAAAA,IAAAA,IAAcN,SAASlI;AACnE,UAAMyI,kBAAkBtB,MACtBiB,2BAAAA,WACAzG,eACAqB,SACF,EAAE0F,QAAQ5G,UAAU;AACpB,QAAIuG,UAAU;AACNM,YAAAA,mBAAkBpH,oBAAeqF,KAAK,MAApBrF,mBAAuBqH;AAAAA,IAAAA,OAC1C;AACCD,YAAAA,mBAAkBpH,oBAAeqF,KAAK,MAApBrF,mBAAuBsH;AAAAA,IACjD;AAEMC,UAAAA,UACJxD,OAAOC,MAAM1B,eAAe+C,KAAK,CAAC,KAAK/C,eAAe+C,KAAK,KAAK;AAC5DmC,UAAAA,WAAWhG,MAAAA,MAAMH,WAAW,MAAM;AAClCoG,UAAAA,kBAAkBjG,MAAAA,MAAMgG,UAAUnC,KAAK;AAG3C,WAAAqC,+BAAC,OAEC,EAAA,WAAW1G,GAAG;AAAA,MACZ,CAAC/B,QAAQ0I,eAAe,GAAG,CAAC,EAAE,CAAC3I,YAAY,CAACuI;AAAAA,MAC5C,CAACtI,QAAQ2I,uBAAuB,GAAG,CAAC,EAAE5I,YAAY,CAACuI;AAAAA,MACnD,CAACtI,QAAQ4I,qBAAqB,GAAGN,WAAW7H;AAAAA,IAC7C,CAAA,GAED,UAACgI,2BAAAA,IAAAI,iBAAAA,SAAA,EACC,WAAU,qBACV,UAASjH,+CAAgBqG,qBAAoBA,iBAC7C,SAASJ,UACT,WAAU,OACV,kBAAkB7H,QAAQ8I,eAC1B,qBAAqB,MACnBC,SAASC,eAAeR,mBAAmB,EAAE,GAG/C,UAAAC,2BAAAA,IAAC,OACC,EAAA,IAAID,iBACJ,OACA,WAAWzG,GAAG+F,eAAe9H,QAAQiJ,MAAM,MACvCjB,WACJ,cAAa,GAAEpI,KAAM,SAAQwG,KAAM,IACnC,iBAAeO,MAAAA,2BACbiB,WACAzG,eACAqB,SACF,GACA,iBAAerB,eACf,iBAAeD,eACXf,GAAAA,uCAAYiG,OAAO,CAAA,EAE3B,CAAA,EAAA,GAhCKA,KAiCP;AAAA,EAAA;AAIJ,SACG8C,2BAAAA,KAAAC,YAAAA,eAAA,EACC,WAAWpH,GACT/B,QAAQoJ,MACR;AAAA,IACE,CAACpJ,QAAQqJ,YAAY,GACnB,CAAC5I,YAAY,CAACV,YAAY,CAACgD,YAAY,CAACgB;AAAAA,IAC1C,CAAC/D,QAAQsJ,aAAa,GACpB,CAAC7I,YAAY,CAACV,YAAY,CAACgD,YAAYgB;AAAAA,IACzC,CAAC/D,QAAQuJ,YAAY,GAAG,CAAC,CAACxJ;AAAAA,EAAAA,GAE5BL,SACF,GACA,IACA,MACA,QAAQ8J,8BAAwB7F,gBAAgB,GAChD,UACA,UACA,UACA,aAAa2B,oBACb,WAAWI,kBACX,QAAQmB,eACR,GAAIhF,QAEFI,UAAAA;AAAAA,KAAAA,YAAY,CAAC1B,cACb2I,gCAAC,SACC,WAAWnH,GAAG/B,QAAQyJ,gBAAgB;AAAA,MACpC,CAACzJ,QAAQ0J,aAAa,GAAGzH;AAAAA,MACzB,CAACjC,QAAQ2J,SAAS,GAAG,CAAC1H;AAAAA,IACvB,CAAA,GAEAA,UAAAA;AAAAA,MAAAA,YACEwG,2BAAA,IAAAmB,eAAA,EACC,IAAIrH,MAAAA,MAAMH,WAAW,OAAO,GAC5B,WAAWpC,QAAQJ,OACnB,SAAS2C,MAAAA,MAAMH,WAAW,QAAQ,GAClC,OAEH;AAAA,MAEA,CAAC7B,aACCkI,+BAAAoB,YAAAA,eAAA,EACC,IAAIvH,eACJ,OACA,QAAQwH,MAAAA,4BACNzG,gBACAb,WACArB,aACF,GACA,UAAUgG,sBACV,QAAQxD,kBACR,UACA,UACA,YACA,YAEH;AAAA,IAAA,GACH;AAAA,IAGFuF,gCAAC,SAAI,WAAWnH,GAAG/B,QAAQ+J,YAAY/J,QAAQgK,eAAe,GAC3DjH,UAAAA;AAAAA,MAAAA,2CACEkH,yBACC,EAAA,cAAcxC,YACd,WAAWzH,QAAQkK,YACnB,KAAK,GACL,KAAK9I,kBACL,MAAM,GACN,OACA,UAAUrB,WAAWoK,cAAAA,aAAaC,cAAcD,cAAAA,aAAaE,KAC7D,UAAWC,CACTvD,gBAAAA,gBACEwD,MAAMC,QAAQF,WAAW,IAAIA,cAAc,CAACA,WAAW,CACzD,GAEF,gBAAiBA,iBACf/C,sBACEgD,MAAMC,QAAQF,WAAW,IAAIA,cAAc,CAACA,WAAW,CACzD,GAEF,eAAgBA,CAAAA,gBACd9C,qBACE+C,MAAMC,QAAQF,WAAW,IAAIA,cAAc,CAACA,WAAW,CACzD,GAEF,OAAOjH,eAAeH,SAAS,IAAIG,eAAe,CAAC,IAAIzC,QACvD,YAAY,OACZ,UACA,OAAOuD,aACP,WAAWgG,cAAAA,aAAaM,MACxB,aAAanG,WAAWoG,WACxB,YAAYtG,aACRlE,GAAAA,aAEP;AAAA,MACA,CAAC6C,YACA0F,2BAAAA,IAACwB,gBACC,SAAA,EAAA,OAAK,MACL,cAAcxC,YACd,WAAW1F,GAAG/B,QAAQkK,YAAY;AAAA,QAChC,CAAClK,QAAQ2K,SAAS,GAAG,CAAC5H;AAAAA,MAAAA,CACvB,GACD,KAAK,GACL,KAAK3B,kBACL,MAAM,GACN,OACA,UACA,UAAUrB,WAAWoK,2BAAaC,cAAcD,cAAAA,aAAaE,KAC7D,UAAWC,CAAAA,gBACTvD,gBACEwD,MAAMC,QAAQF,WAAW,IAAIA,cAAc,CAACA,WAAW,CACzD,GAEF,gBAAiBA,CAAAA,gBACf/C,sBACEgD,MAAMC,QAAQF,WAAW,IAAIA,cAAc,CAACA,WAAW,CACzD,GAEF,eAAgBA,iBACd9C,qBACE+C,MAAMC,QAAQF,WAAW,IAAIA,cAAc,CAACA,WAAW,CACzD,GAEF,OAAOjH,eAAeH,SAAS,IAAI,CAAC,GAAGG,cAAc,IAAIzC,QACzD,YAAY,OACZ,OAAOuD,aACP,WAAWgG,cAAAA,aAAaM,MACxB,aAAanG,WAAWoG,WACxB,YAAYtG,aACZ,gBAAgB,CAAC3D,YAAY,CAACsC,UAC1B7C,GAAAA,aAEP;AAAA,IAAA,GACH;AAAA,IAEC4C,gBACC2F,2BAAA,IAACmC,YACC,eAAA,EAAA,IAAIrI,MAAAA,MAAMH,WAAW,OAAO,GAC5B,WAAWpC,QAAQ6K,OACnB,eAAa,MAEZhH,UACH,mBAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.styles.cjs","sources":["../../../../src/components/Slider/Slider.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { CSSProperties } from \"react\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nimport base from \"./base\";\n\nconst dot: CSSProperties = {\n position: \"absolute\",\n bottom: \"-1px\",\n marginLeft: \"0px\",\n width: \"1px\",\n height: \"4px\",\n border: \"none\",\n borderRadius: \"0%\",\n backgroundColor: theme.colors.atmo4,\n cursor: \"pointer\",\n verticalAlign: \"middle\",\n zIndex: \"-3\",\n};\n\nconst dragSquare: CSSProperties = {\n cursor: \"grab\",\n width: \"calc(100% - 40px)\",\n left: \"20px\",\n height: \"27px\",\n position: \"absolute\",\n top: \"-12px\",\n content: \"''\",\n background: \"transparent\",\n borderTop: `12px solid ${theme.slider.dragBarColor}`,\n borderBottom: `12px solid ${theme.slider.dragBarColor}`,\n zIndex: \"-2\",\n};\n\nconst ring: CSSProperties = {\n width: \"32px\",\n height: \"32px\",\n borderRadius: \"50%\",\n border: `9px solid ${theme.slider.ringColor}`,\n opacity: theme.slider.ringOpacity,\n content: \"''\",\n position: \"absolute\",\n top: \"-10px\",\n left: \"-10px\",\n};\n\nconst border: CSSProperties = {\n width: \"20px\",\n height: \"20px\",\n borderRadius: \"50%\",\n border: `2px solid ${theme.colors.atmo1}`,\n content: \"''\",\n position: \"absolute\",\n top: \"-4px\",\n left: \"-4px\",\n};\n\nexport interface SliderStyles {\n disabledMark: CSSProperties;\n mark: CSSProperties;\n dotDisabled: CSSProperties;\n dot: CSSProperties;\n knobInner: CSSProperties;\n knobOuter: CSSProperties;\n knobHidden: CSSProperties;\n knobHiddenLast: CSSProperties;\n track: CSSProperties;\n rail: CSSProperties;\n}\n\nexport const sliderStyles: SliderStyles = {\n mark: {\n ...(theme.typography.caption1 as CSSProperties),\n fontFamily: theme.fontFamily.body,\n top: \"-2px\",\n zIndex: -1,\n },\n disabledMark: {\n ...(theme.typography.caption1 as CSSProperties),\n fontFamily: theme.fontFamily.body,\n color: `${theme.colors.secondary_60}`,\n cursor: \"not-allowed\",\n top: \"-2px\",\n },\n dot: {\n ...dot,\n },\n dotDisabled: {\n ...dot,\n cursor: \"not-allowed\",\n },\n knobHidden: { display: \"none\" },\n knobHiddenLast: {\n borderColor: \"transparent\",\n height: \"3px\",\n width: \"2px\",\n marginLeft: \"-1px\",\n border: \"none\",\n borderRadius: \"0\",\n marginTop: \"0px\",\n left: \"100%\",\n touchAction: \"none\",\n cursor: \"default\",\n },\n knobInner: {\n borderColor: \"transparent\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.secondary,\n width: \"16px\",\n height: \"16px\",\n },\n knobOuter: {\n position: \"relative\",\n borderColor: \"transparent\",\n borderRadius: \"50%\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.atmo4,\n width: \"32px\",\n height: \"32px\",\n top: \"-80%\",\n left: \"-80%\",\n zIndex: \"-1\",\n },\n track: {\n backgroundColor: theme.colors.secondary,\n height: \"3px\",\n zIndex: \"-1\",\n marginTop: \"-1px\",\n },\n rail: { backgroundColor: theme.colors.atmo4, height: \"1px\", zIndex: \"-3\" },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSlider\", {\n sliderBase: { ...(base as CSSProperties) },\n rootDisabled: {\n cursor: \"not-allowed\",\n \"&& .rc-slider-disabled\": {\n background: \"transparent\",\n },\n },\n sliderContainer: { marginBottom: \"18px\", padding: \"0 23px\" },\n error: { padding: \"0 8px\" },\n trackDragging: {\n cursor: \"grabbing\",\n\n \"&& .rc-slider-track\": {\n \"&::before\": {\n ...dragSquare,\n cursor: \"grabbing\",\n },\n },\n },\n trackStandBy: {\n \"&& .rc-slider-track\": {\n \"&:hover\": {\n \"&::before\": {\n ...dragSquare,\n },\n },\n },\n },\n sliderRoot: { zIndex: 0 },\n rootRange: {},\n handleContainer: {\n \"&& .rc-slider-handle\": {\n cursor: \"pointer\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"grab\",\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n \"&:hover\": {\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n\n // Note about the usage of `!important below`: the way the rc-slider allows us to\n // style the knobs is through inline styles. This means that the `box-shadow`, which\n // is an inline style and is set to `none` to prevent the default rc-slider style to\n // show, can't be overridden for the focus scenario unless we use the `!important` flag.\n \"&:focus-visible\": {\n ...outlineStyles,\n boxShadow: \"0 0 0 3px #52A8EC, 0 0 0 7px rgba(29,155,209,.3)!important\",\n \"&::after\": {\n ...border,\n },\n },\n },\n },\n handle: {},\n handleContainerDisabled: {\n \"&& .rc-slider-handle\": {\n cursor: \"not-allowed\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"not-allowed\",\n },\n \"&:hover\": {\n cursor: \"not-allowed\",\n },\n },\n },\n handleHiddenContainer: { display: \"none\" },\n labelContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n marginBottom: \"12px\",\n marginLeft: \"20px\",\n marginRight: \"20px\",\n },\n labelIncluded: { justifyContent: \"space-between\" },\n onlyInput: { justifyContent: \"flex-end\" },\n label: {},\n root: {},\n sliderTooltip: {\n \"&& .rc-slider-tooltip-inner\": {\n background: theme.colors.atmo1,\n borderRadius: 0,\n maxWidth: \"532px\",\n height: \"100%\",\n padding: theme.space.sm,\n ...theme.typography.body,\n fontFamily: theme.fontFamily.body,\n boxShadow: \"none\",\n },\n\n \"&& .rc-slider-tooltip-arrow\": {\n visibility: \"hidden\",\n },\n },\n});\n"],"names":["dot","position","bottom","marginLeft","width","height","border","borderRadius","backgroundColor","theme","colors","atmo4","cursor","verticalAlign","zIndex","dragSquare","left","top","content","background","borderTop","slider","dragBarColor","borderBottom","ring","ringColor","opacity","ringOpacity","atmo1","sliderStyles","mark","typography","caption1","fontFamily","body","disabledMark","color","secondary_60","dotDisabled","knobHidden","display","knobHiddenLast","borderColor","marginTop","touchAction","knobInner","boxShadow","secondary","knobOuter","track","rail","staticClasses","useClasses","createClasses","sliderBase","base","rootDisabled","sliderContainer","marginBottom","padding","error","trackDragging","trackStandBy","sliderRoot","rootRange","handleContainer","outlineStyles","handle","handleContainerDisabled","handleHiddenContainer","labelContainer","alignItems","justifyContent","marginRight","labelIncluded","onlyInput","label","root","sliderTooltip","maxWidth","space","sm","visibility"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Slider.styles.cjs","sources":["../../../../src/components/Slider/Slider.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { CSSProperties } from \"react\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nimport base from \"./base\";\n\nconst dot: CSSProperties = {\n position: \"absolute\",\n bottom: \"-1px\",\n marginLeft: \"0px\",\n width: \"1px\",\n height: \"4px\",\n border: \"none\",\n borderRadius: \"0%\",\n backgroundColor: theme.colors.atmo4,\n cursor: \"pointer\",\n verticalAlign: \"middle\",\n zIndex: \"-3\",\n};\n\nconst dragSquare: CSSProperties = {\n cursor: \"grab\",\n width: \"calc(100% - 40px)\",\n left: \"20px\",\n height: \"27px\",\n position: \"absolute\",\n top: \"-12px\",\n content: \"''\",\n background: \"transparent\",\n borderTop: `12px solid ${theme.slider.dragBarColor}`,\n borderBottom: `12px solid ${theme.slider.dragBarColor}`,\n zIndex: \"-2\",\n};\n\nconst ring: CSSProperties = {\n width: \"32px\",\n height: \"32px\",\n borderRadius: \"50%\",\n border: `9px solid ${theme.slider.ringColor}`,\n opacity: theme.slider.ringOpacity,\n content: \"''\",\n position: \"absolute\",\n top: \"-10px\",\n left: \"-10px\",\n};\n\nconst border: CSSProperties = {\n width: \"20px\",\n height: \"20px\",\n borderRadius: \"50%\",\n border: `2px solid ${theme.colors.atmo1}`,\n content: \"''\",\n position: \"absolute\",\n top: \"-4px\",\n left: \"-4px\",\n};\n\nexport const sliderStyles = {\n mark: {\n ...theme.typography.caption1,\n fontFamily: theme.fontFamily.body,\n top: \"-2px\",\n zIndex: -1,\n },\n disabledMark: {\n ...theme.typography.caption1,\n fontFamily: theme.fontFamily.body,\n color: `${theme.colors.secondary_60}`,\n cursor: \"not-allowed\",\n top: \"-2px\",\n },\n dot: {\n ...dot,\n },\n dotDisabled: {\n ...dot,\n cursor: \"not-allowed\",\n },\n knobHidden: { display: \"none\" },\n knobHiddenLast: {\n borderColor: \"transparent\",\n height: \"3px\",\n width: \"2px\",\n marginLeft: \"-1px\",\n border: \"none\",\n borderRadius: \"0\",\n marginTop: \"0px\",\n left: \"100%\",\n touchAction: \"none\",\n cursor: \"default\",\n },\n knobInner: {\n borderColor: \"transparent\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.secondary,\n width: \"16px\",\n height: \"16px\",\n },\n knobOuter: {\n position: \"relative\",\n borderColor: \"transparent\",\n borderRadius: \"50%\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.atmo4,\n width: \"32px\",\n height: \"32px\",\n top: \"-80%\",\n left: \"-80%\",\n zIndex: \"-1\",\n },\n track: {\n backgroundColor: theme.colors.secondary,\n height: \"3px\",\n zIndex: \"-1\",\n marginTop: \"-1px\",\n },\n rail: { backgroundColor: theme.colors.atmo4, height: \"1px\", zIndex: \"-3\" },\n} satisfies Record<string, CSSProperties>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSlider\", {\n sliderBase: { ...base },\n rootDisabled: {\n cursor: \"not-allowed\",\n \"&& .rc-slider-disabled\": {\n background: \"transparent\",\n },\n },\n sliderContainer: { marginBottom: \"18px\", padding: \"0 23px\" },\n error: { padding: \"0 8px\" },\n trackDragging: {\n cursor: \"grabbing\",\n\n \"&& .rc-slider-track\": {\n \"&::before\": {\n ...dragSquare,\n cursor: \"grabbing\",\n },\n },\n },\n trackStandBy: {\n \"&& .rc-slider-track\": {\n \"&:hover\": {\n \"&::before\": {\n ...dragSquare,\n },\n },\n },\n },\n sliderRoot: { zIndex: 0 },\n rootRange: {},\n handleContainer: {\n \"&& .rc-slider-handle\": {\n cursor: \"pointer\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"grab\",\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n \"&:hover\": {\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n\n // Note about the usage of `!important below`: the way the rc-slider allows us to\n // style the knobs is through inline styles. This means that the `box-shadow`, which\n // is an inline style and is set to `none` to prevent the default rc-slider style to\n // show, can't be overridden for the focus scenario unless we use the `!important` flag.\n \"&:focus-visible\": {\n ...outlineStyles,\n boxShadow: \"0 0 0 3px #52A8EC, 0 0 0 7px rgba(29,155,209,.3)!important\",\n \"&::after\": {\n ...border,\n },\n },\n },\n },\n handle: {},\n handleContainerDisabled: {\n \"&& .rc-slider-handle\": {\n cursor: \"not-allowed\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"not-allowed\",\n },\n \"&:hover\": {\n cursor: \"not-allowed\",\n },\n },\n },\n handleHiddenContainer: { display: \"none\" },\n labelContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n marginBottom: \"12px\",\n marginLeft: \"20px\",\n marginRight: \"20px\",\n },\n labelIncluded: { justifyContent: \"space-between\" },\n onlyInput: { justifyContent: \"flex-end\" },\n label: {},\n root: {},\n sliderTooltip: {\n \"&& .rc-slider-tooltip-inner\": {\n background: theme.colors.atmo1,\n borderRadius: 0,\n maxWidth: \"532px\",\n height: \"100%\",\n padding: theme.space.sm,\n ...theme.typography.body,\n fontFamily: theme.fontFamily.body,\n boxShadow: \"none\",\n },\n\n \"&& .rc-slider-tooltip-arrow\": {\n visibility: \"hidden\",\n },\n },\n});\n"],"names":["dot","position","bottom","marginLeft","width","height","border","borderRadius","backgroundColor","theme","colors","atmo4","cursor","verticalAlign","zIndex","dragSquare","left","top","content","background","borderTop","slider","dragBarColor","borderBottom","ring","ringColor","opacity","ringOpacity","atmo1","sliderStyles","mark","typography","caption1","fontFamily","body","disabledMark","color","secondary_60","dotDisabled","knobHidden","display","knobHiddenLast","borderColor","marginTop","touchAction","knobInner","boxShadow","secondary","knobOuter","track","rail","staticClasses","useClasses","createClasses","sliderBase","base","rootDisabled","sliderContainer","marginBottom","padding","error","trackDragging","trackStandBy","sliderRoot","rootRange","handleContainer","outlineStyles","handle","handleContainerDisabled","handleHiddenContainer","labelContainer","alignItems","justifyContent","marginRight","labelIncluded","onlyInput","label","root","sliderTooltip","maxWidth","space","sm","visibility"],"mappings":"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"}
|
|
@@ -9,11 +9,11 @@ const base = {
|
|
|
9
9
|
borderRadius: "6px",
|
|
10
10
|
touchAction: "none",
|
|
11
11
|
boxSizing: "border-box",
|
|
12
|
-
|
|
12
|
+
WebkitTapHighlightColor: "rgba(0, 0, 0, 0)"
|
|
13
13
|
},
|
|
14
14
|
"& .rc-slider *": {
|
|
15
15
|
boxSizing: "border-box",
|
|
16
|
-
|
|
16
|
+
WebkitTapHighlightColor: "rgba(0, 0, 0, 0)"
|
|
17
17
|
},
|
|
18
18
|
"& .rc-slider-rail": {
|
|
19
19
|
position: "absolute",
|
|
@@ -36,8 +36,6 @@ const base = {
|
|
|
36
36
|
backgroundColor: "#fff",
|
|
37
37
|
border: "solid 2px #96dbfa",
|
|
38
38
|
borderRadius: "50%",
|
|
39
|
-
// cursor: "pointer",
|
|
40
|
-
// cursor: "-webkit-grab",
|
|
41
39
|
cursor: "grab",
|
|
42
40
|
opacity: 0.8,
|
|
43
41
|
touchAction: "pan-x"
|
|
@@ -64,7 +62,6 @@ const base = {
|
|
|
64
62
|
"& .rc-slider-handle:active": {
|
|
65
63
|
borderColor: "#57c5f7",
|
|
66
64
|
boxShadow: "0 0 5px #57c5f7",
|
|
67
|
-
// cursor: "-webkit-grabbing",
|
|
68
65
|
cursor: "grabbing"
|
|
69
66
|
},
|
|
70
67
|
"& .rc-slider-mark": {
|
|
@@ -207,11 +204,11 @@ const base = {
|
|
|
207
204
|
left: "-9999px",
|
|
208
205
|
visibility: "visible",
|
|
209
206
|
boxSizing: "border-box",
|
|
210
|
-
|
|
207
|
+
WebkitTapHighlightColor: "rgba(0, 0, 0, 0)"
|
|
211
208
|
},
|
|
212
209
|
"& .rc-slider-tooltip *": {
|
|
213
210
|
boxSizing: "border-box",
|
|
214
|
-
|
|
211
|
+
WebkitTapHighlightColor: "rgba(0, 0, 0, 0)"
|
|
215
212
|
},
|
|
216
213
|
"& .rc-slider-tooltip-hidden": {
|
|
217
214
|
display: "none"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base.cjs","sources":["../../../../src/components/Slider/base.ts"],"sourcesContent":["export default {\n \"& .rc-slider\": {\n position: \"relative\",\n width: \"100%\",\n height: \"14px\",\n padding: \" 5px 0\",\n borderRadius: \"6px\",\n touchAction: \"none\",\n boxSizing: \"border-box\",\n \"-webkit-tap-highlight-color\": \"rgba(0, 0, 0, 0)\",\n },\n \"& .rc-slider *\": {\n boxSizing: \"border-box\",\n \"-webkit-tap-highlight-color\": \"rgba(0, 0, 0, 0)\",\n },\n \"& .rc-slider-rail\": {\n position: \"absolute\",\n width: \"100%\",\n height: \"4px\",\n backgroundColor: \"#e9e9e9\",\n borderRadius: \"6px\",\n },\n \"& .rc-slider-track\": {\n position: \"absolute\",\n height: \"4px\",\n backgroundColor: \"#abe2fb\",\n borderRadius: \"6px\",\n },\n \"& .rc-slider-handle\": {\n position: \"absolute\",\n width: \"14px\",\n height: \"14px\",\n marginTop: \"-5px\",\n backgroundColor: \"#fff\",\n border: \"solid 2px #96dbfa\",\n borderRadius: \"50%\",\n // cursor: \"pointer\",\n // cursor: \"-webkit-grab\",\n cursor: \"grab\",\n opacity: 0.8,\n touchAction: \"pan-x\",\n },\n \"& .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging\":\n {\n borderColor: \"#57c5f7\",\n boxShadow: \"0 0 0 5px #96dbfa\",\n },\n \"& .rc-slider-handle:focus\": {\n outline: \"none\",\n boxShadow: \"none\",\n },\n \"& .rc-slider-handle:focus-visible\": {\n borderColor: \"#2db7f5\",\n boxShadow: \"0 0 0 3px #96dbfa\",\n },\n \"& .rc-slider-handle-click-focused:focus\": {\n borderColor: \"#96dbfa\",\n boxShadow: \"unset\",\n },\n \"& .rc-slider-handle:hover\": {\n borderColor: \"#57c5f7\",\n },\n \"& .rc-slider-handle:active\": {\n borderColor: \"#57c5f7\",\n boxShadow: \"0 0 5px #57c5f7\",\n // cursor: \"-webkit-grabbing\",\n cursor: \"grabbing\",\n },\n \"& .rc-slider-mark\": {\n position: \"absolute\",\n top: \"18px\",\n left: 0,\n width: \"100%\",\n fontSize: \"12px\",\n },\n \"& .rc-slider-mark-text\": {\n position: \"absolute\",\n display: \"inline-block\",\n color: \"#999\",\n textAlign: \"center\",\n verticalAlign: \"middle\",\n cursor: \"pointer\",\n },\n \"& .rc-slider-mark-text-active\": {\n color: \"#666\",\n },\n \"& .rc-slider-step\": {\n position: \"absolute\",\n width: \"100%\",\n height: \"4px\",\n background: \"transparent\",\n pointerEvents: \"none\",\n },\n \"& .rc-slider-dot\": {\n position: \"absolute\",\n bottom: \"-2px\",\n width: \"8px\",\n height: \"8px\",\n verticalAlign: \"middle\",\n backgroundColor: \"#fff\",\n border: \"2px solid #e9e9e9\",\n borderRadius: \"50%\",\n cursor: \"pointer\",\n },\n \"& .rc-slider-dot-active\": {\n borderColor: \"#96dbfa\",\n },\n \"& .rc-slider-dot-reverse\": {\n marginRight: \"-4px\",\n },\n \"& .rc-slider-disabled\": {\n backgroundColor: \"#e9e9e9\",\n },\n \"& .rc-slider-disabled .rc-slider-track\": {\n backgroundColor: \"#ccc\",\n },\n \"& .rc-slider-disabled .rc-slider-handle\": {\n backgroundColor: \"#fff\",\n borderColor: \"#ccc\",\n boxShadow: \"none\",\n cursor: \"not-allowed\",\n },\n \"&.rc-slider-disabled .rc-slider-dot\": {\n backgroundColor: \"#fff\",\n borderColor: \"#ccc\",\n boxShadow: \"none\",\n cursor: \"not-allowed\",\n },\n \"& .rc-slider-disabled .rc-slider-mark-text\": {\n cursor: \"not-allowed !important\",\n },\n \"& .rc-slider-disabled .rc-slider-dot\": {\n cursor: \"not-allowed !important\",\n },\n \"& .rc-slider-vertical\": {\n width: \"14px\",\n height: \"100%\",\n padding: \"0 5px\",\n },\n \"& .rc-slider-vertical .rc-slider-rail\": {\n width: \"4px\",\n height: \"100%\",\n },\n \"& .rc-slider-vertical .rc-slider-track\": {\n bottom: 0,\n left: \"5px\",\n width: \"4px\",\n },\n \"& .rc-slider-vertical .rc-slider-handle\": {\n marginTop: 0,\n marginLeft: \"-5px\",\n touchAction: \"pan-y\",\n },\n \"& .rc-slider-vertical .rc-slider-mark\": {\n top: 0,\n left: \"18px\",\n height: \"100%\",\n },\n \"& .rc-slider-vertical .rc-slider-step\": {\n width: \"4px\",\n height: \"100%\",\n },\n \"& .rc-slider-vertical .rc-slider-dot\": {\n marginLeft: \"-2px\",\n },\n \"& .rc-slider-tooltip-zoom-down-enter\": {\n display: \"block !important\",\n animationDuration: \"0.3s\",\n animationFillMode: \"both\",\n animationPlayState: \"paused\",\n transform: \"scale(0, 0)\",\n animationTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n },\n \"& .rc-slider-tooltip-zoom-down-appear\": {\n display: \"block !important\",\n animationDuration: \"0.3s\",\n animationFillMode: \"both\",\n animationPlayState: \"paused\",\n },\n \"& .rc-slider-tooltip-zoom-down-leave\": {\n display: \"block !important\",\n animationDuration: \"0.3s\",\n animationFillMode: \"both\",\n animationPlayState: \"paused\",\n animationTimingFunction: \"cubic-bezier(0.755, 0.05, 0.855, 0.06)\",\n },\n \"& .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active\":\n {\n animationName: \"rcSliderTooltipZoomDownIn\",\n animationPlayState: \"running\",\n },\n \"& .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active\":\n {\n animationName: \"rcSliderTooltipZoomDownIn\",\n animationPlayState: \"running\",\n },\n \"& .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active\":\n {\n animationName: \"rcSliderTooltipZoomDownOut\",\n animationPlayState: \"running\",\n },\n \"&. .rc-slider-tooltip-zoom-down-appear\": {\n transform: \"scale(0, 0)\",\n animationTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n },\n \"& .rc-slider-tooltip\": {\n position: \"absolute\",\n top: \"-9999px\",\n left: \"-9999px\",\n visibility: \"visible\",\n boxSizing: \"border-box\",\n \"-webkit-tap-highlight-color\": \"rgba(0, 0, 0, 0)\",\n },\n \"& .rc-slider-tooltip *\": {\n boxSizing: \"border-box\",\n \"-webkit-tap-highlight-color\": \"rgba(0, 0, 0, 0)\",\n },\n \"& .rc-slider-tooltip-hidden\": {\n display: \"none\",\n },\n \"& .rc-slider-tooltip-placement-top\": {\n padding: \"4px 0 8px 0\",\n },\n \"& .rc-slider-tooltip-inner\": {\n minWidth: \"24px\",\n height: \"24px\",\n padding: \"6px 2px\",\n color: \"#fff\",\n fontSize: \"12px\",\n lineHeight: 1,\n textAlign: \"center\",\n textDecoration: \"none\",\n backgroundColor: \"#6c6c6c\",\n borderRadius: \"6px\",\n boxShadow: \"0 0 4px #d9d9d9\",\n },\n \"& .rc-slider-tooltip-arrow\": {\n position: \"absolute\",\n width: 0,\n height: 0,\n borderColor: \"transparent\",\n borderStyle: \"solid\",\n },\n \"& .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow\": {\n bottom: \"4px\",\n left: \"50%\",\n marginLeft: \"-4px\",\n borderWidth: \"4px 4px 0\",\n borderTopColor: \"#6c6c6c\",\n },\n};\n"],"names":["position","width","height","padding","borderRadius","touchAction","boxSizing","backgroundColor","marginTop","border","cursor","opacity","borderColor","boxShadow","outline","top","left","fontSize","display","color","textAlign","verticalAlign","background","pointerEvents","bottom","marginRight","marginLeft","animationDuration","animationFillMode","animationPlayState","transform","animationTimingFunction","animationName","visibility","minWidth","lineHeight","textDecoration","borderStyle","borderWidth","borderTopColor"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"base.cjs","sources":["../../../../src/components/Slider/base.ts"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\n\nexport default {\n \"& .rc-slider\": {\n position: \"relative\",\n width: \"100%\",\n height: \"14px\",\n padding: \" 5px 0\",\n borderRadius: \"6px\",\n touchAction: \"none\",\n boxSizing: \"border-box\",\n WebkitTapHighlightColor: \"rgba(0, 0, 0, 0)\",\n },\n \"& .rc-slider *\": {\n boxSizing: \"border-box\",\n WebkitTapHighlightColor: \"rgba(0, 0, 0, 0)\",\n },\n \"& .rc-slider-rail\": {\n position: \"absolute\",\n width: \"100%\",\n height: \"4px\",\n backgroundColor: \"#e9e9e9\",\n borderRadius: \"6px\",\n },\n \"& .rc-slider-track\": {\n position: \"absolute\",\n height: \"4px\",\n backgroundColor: \"#abe2fb\",\n borderRadius: \"6px\",\n },\n \"& .rc-slider-handle\": {\n position: \"absolute\",\n width: \"14px\",\n height: \"14px\",\n marginTop: \"-5px\",\n backgroundColor: \"#fff\",\n border: \"solid 2px #96dbfa\",\n borderRadius: \"50%\",\n cursor: \"grab\",\n opacity: 0.8,\n touchAction: \"pan-x\",\n },\n \"& .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging\":\n {\n borderColor: \"#57c5f7\",\n boxShadow: \"0 0 0 5px #96dbfa\",\n },\n \"& .rc-slider-handle:focus\": {\n outline: \"none\",\n boxShadow: \"none\",\n },\n \"& .rc-slider-handle:focus-visible\": {\n borderColor: \"#2db7f5\",\n boxShadow: \"0 0 0 3px #96dbfa\",\n },\n \"& .rc-slider-handle-click-focused:focus\": {\n borderColor: \"#96dbfa\",\n boxShadow: \"unset\",\n },\n \"& .rc-slider-handle:hover\": {\n borderColor: \"#57c5f7\",\n },\n \"& .rc-slider-handle:active\": {\n borderColor: \"#57c5f7\",\n boxShadow: \"0 0 5px #57c5f7\",\n cursor: \"grabbing\",\n },\n \"& .rc-slider-mark\": {\n position: \"absolute\",\n top: \"18px\",\n left: 0,\n width: \"100%\",\n fontSize: \"12px\",\n },\n \"& .rc-slider-mark-text\": {\n position: \"absolute\",\n display: \"inline-block\",\n color: \"#999\",\n textAlign: \"center\",\n verticalAlign: \"middle\",\n cursor: \"pointer\",\n },\n \"& .rc-slider-mark-text-active\": {\n color: \"#666\",\n },\n \"& .rc-slider-step\": {\n position: \"absolute\",\n width: \"100%\",\n height: \"4px\",\n background: \"transparent\",\n pointerEvents: \"none\",\n },\n \"& .rc-slider-dot\": {\n position: \"absolute\",\n bottom: \"-2px\",\n width: \"8px\",\n height: \"8px\",\n verticalAlign: \"middle\",\n backgroundColor: \"#fff\",\n border: \"2px solid #e9e9e9\",\n borderRadius: \"50%\",\n cursor: \"pointer\",\n },\n \"& .rc-slider-dot-active\": {\n borderColor: \"#96dbfa\",\n },\n \"& .rc-slider-dot-reverse\": {\n marginRight: \"-4px\",\n },\n \"& .rc-slider-disabled\": {\n backgroundColor: \"#e9e9e9\",\n },\n \"& .rc-slider-disabled .rc-slider-track\": {\n backgroundColor: \"#ccc\",\n },\n \"& .rc-slider-disabled .rc-slider-handle\": {\n backgroundColor: \"#fff\",\n borderColor: \"#ccc\",\n boxShadow: \"none\",\n cursor: \"not-allowed\",\n },\n \"&.rc-slider-disabled .rc-slider-dot\": {\n backgroundColor: \"#fff\",\n borderColor: \"#ccc\",\n boxShadow: \"none\",\n cursor: \"not-allowed\",\n },\n \"& .rc-slider-disabled .rc-slider-mark-text\": {\n cursor: \"not-allowed !important\",\n },\n \"& .rc-slider-disabled .rc-slider-dot\": {\n cursor: \"not-allowed !important\",\n },\n \"& .rc-slider-vertical\": {\n width: \"14px\",\n height: \"100%\",\n padding: \"0 5px\",\n },\n \"& .rc-slider-vertical .rc-slider-rail\": {\n width: \"4px\",\n height: \"100%\",\n },\n \"& .rc-slider-vertical .rc-slider-track\": {\n bottom: 0,\n left: \"5px\",\n width: \"4px\",\n },\n \"& .rc-slider-vertical .rc-slider-handle\": {\n marginTop: 0,\n marginLeft: \"-5px\",\n touchAction: \"pan-y\",\n },\n \"& .rc-slider-vertical .rc-slider-mark\": {\n top: 0,\n left: \"18px\",\n height: \"100%\",\n },\n \"& .rc-slider-vertical .rc-slider-step\": {\n width: \"4px\",\n height: \"100%\",\n },\n \"& .rc-slider-vertical .rc-slider-dot\": {\n marginLeft: \"-2px\",\n },\n \"& .rc-slider-tooltip-zoom-down-enter\": {\n display: \"block !important\",\n animationDuration: \"0.3s\",\n animationFillMode: \"both\",\n animationPlayState: \"paused\",\n transform: \"scale(0, 0)\",\n animationTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n },\n \"& .rc-slider-tooltip-zoom-down-appear\": {\n display: \"block !important\",\n animationDuration: \"0.3s\",\n animationFillMode: \"both\",\n animationPlayState: \"paused\",\n },\n \"& .rc-slider-tooltip-zoom-down-leave\": {\n display: \"block !important\",\n animationDuration: \"0.3s\",\n animationFillMode: \"both\",\n animationPlayState: \"paused\",\n animationTimingFunction: \"cubic-bezier(0.755, 0.05, 0.855, 0.06)\",\n },\n \"& .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active\":\n {\n animationName: \"rcSliderTooltipZoomDownIn\",\n animationPlayState: \"running\",\n },\n \"& .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active\":\n {\n animationName: \"rcSliderTooltipZoomDownIn\",\n animationPlayState: \"running\",\n },\n \"& .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active\":\n {\n animationName: \"rcSliderTooltipZoomDownOut\",\n animationPlayState: \"running\",\n },\n \"&. .rc-slider-tooltip-zoom-down-appear\": {\n transform: \"scale(0, 0)\",\n animationTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n },\n \"& .rc-slider-tooltip\": {\n position: \"absolute\",\n top: \"-9999px\",\n left: \"-9999px\",\n visibility: \"visible\",\n boxSizing: \"border-box\",\n WebkitTapHighlightColor: \"rgba(0, 0, 0, 0)\",\n },\n \"& .rc-slider-tooltip *\": {\n boxSizing: \"border-box\",\n WebkitTapHighlightColor: \"rgba(0, 0, 0, 0)\",\n },\n \"& .rc-slider-tooltip-hidden\": {\n display: \"none\",\n },\n \"& .rc-slider-tooltip-placement-top\": {\n padding: \"4px 0 8px 0\",\n },\n \"& .rc-slider-tooltip-inner\": {\n minWidth: \"24px\",\n height: \"24px\",\n padding: \"6px 2px\",\n color: \"#fff\",\n fontSize: \"12px\",\n lineHeight: 1,\n textAlign: \"center\",\n textDecoration: \"none\",\n backgroundColor: \"#6c6c6c\",\n borderRadius: \"6px\",\n boxShadow: \"0 0 4px #d9d9d9\",\n },\n \"& .rc-slider-tooltip-arrow\": {\n position: \"absolute\",\n width: 0,\n height: 0,\n borderColor: \"transparent\",\n borderStyle: \"solid\",\n },\n \"& .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow\": {\n bottom: \"4px\",\n left: \"50%\",\n marginLeft: \"-4px\",\n borderWidth: \"4px 4px 0\",\n borderTopColor: \"#6c6c6c\",\n },\n} satisfies CSSInterpolation;\n"],"names":["position","width","height","padding","borderRadius","touchAction","boxSizing","WebkitTapHighlightColor","backgroundColor","marginTop","border","cursor","opacity","borderColor","boxShadow","outline","top","left","fontSize","display","color","textAlign","verticalAlign","background","pointerEvents","bottom","marginRight","marginLeft","animationDuration","animationFillMode","animationPlayState","transform","animationTimingFunction","animationName","visibility","minWidth","lineHeight","textDecoration","borderStyle","borderWidth","borderTopColor"],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const uikitStyles = require("@hitachivantara/uikit-styles");
|
|
4
4
|
const validationStates = require("../Forms/FormElement/validationStates.cjs");
|
|
5
|
+
const Slider_styles = require("./Slider.styles.cjs");
|
|
5
6
|
const knobsPositionToScaledValue = (sliderValue, minPointValue, stepValue) => minPointValue + stepValue * sliderValue;
|
|
6
7
|
const scaledValueToKnobsPositionValue = (scaledValue, minPointValue, inverseStepValue) => typeof scaledValue === "number" ? Math.floor((scaledValue - minPointValue) * inverseStepValue) : NaN;
|
|
7
8
|
const knobsValuesToKnobsPositions = (values, inverseStepValue, minPointValue) => {
|
|
@@ -19,7 +20,7 @@ const knobsPositionsToKnobsValues = (knobPositions, stepValue, minPointValue) =>
|
|
|
19
20
|
return knobsValues;
|
|
20
21
|
};
|
|
21
22
|
const calculateStepValue = (maxPointValue, minPointValue, divisionQuantity) => Math.abs(maxPointValue - minPointValue) / divisionQuantity;
|
|
22
|
-
const createMark = (markProperties, markstep, divisionQuantity, minPointValue, stepValue, markDigits, disabled,
|
|
23
|
+
const createMark = (markProperties, markstep, divisionQuantity, minPointValue, stepValue, markDigits, disabled, formatMark = (mark) => mark) => {
|
|
23
24
|
const marks = {};
|
|
24
25
|
if (markProperties.length > 0) {
|
|
25
26
|
markProperties.forEach((markProperty) => {
|
|
@@ -27,12 +28,12 @@ const createMark = (markProperties, markstep, divisionQuantity, minPointValue, s
|
|
|
27
28
|
marks[markProperty.position] = disabled ? {
|
|
28
29
|
label: `${markProperty.label}`,
|
|
29
30
|
style: {
|
|
30
|
-
...
|
|
31
|
+
...Slider_styles.sliderStyles.disabledMark
|
|
31
32
|
}
|
|
32
33
|
} : {
|
|
33
34
|
label: `${markProperty.label}`,
|
|
34
35
|
style: {
|
|
35
|
-
...
|
|
36
|
+
...Slider_styles.sliderStyles.mark
|
|
36
37
|
}
|
|
37
38
|
};
|
|
38
39
|
}
|
|
@@ -45,24 +46,24 @@ const createMark = (markProperties, markstep, divisionQuantity, minPointValue, s
|
|
|
45
46
|
marks[index] = disabled ? {
|
|
46
47
|
label: `${labelValue}`,
|
|
47
48
|
style: {
|
|
48
|
-
...
|
|
49
|
+
...Slider_styles.sliderStyles.disabledMark
|
|
49
50
|
}
|
|
50
51
|
} : {
|
|
51
52
|
label: `${labelValue}`,
|
|
52
53
|
style: {
|
|
53
|
-
...
|
|
54
|
+
...Slider_styles.sliderStyles.mark
|
|
54
55
|
}
|
|
55
56
|
};
|
|
56
57
|
}
|
|
57
58
|
}
|
|
58
59
|
return marks;
|
|
59
60
|
};
|
|
60
|
-
const createTrackStyles = (knobProperties
|
|
61
|
+
const createTrackStyles = (knobProperties) => {
|
|
61
62
|
const trackStyles = [];
|
|
62
63
|
if (knobProperties.length > 0) {
|
|
63
64
|
knobProperties.forEach((knobProperty, index) => {
|
|
64
65
|
trackStyles[index] = {
|
|
65
|
-
...
|
|
66
|
+
...Slider_styles.sliderStyles.track
|
|
66
67
|
};
|
|
67
68
|
if (knobProperty.color) {
|
|
68
69
|
trackStyles[index].backgroundColor = knobProperty.trackColor;
|
|
@@ -71,31 +72,31 @@ const createTrackStyles = (knobProperties, styles) => {
|
|
|
71
72
|
}
|
|
72
73
|
return trackStyles;
|
|
73
74
|
};
|
|
74
|
-
const createKnobStyles = (knobProperties
|
|
75
|
+
const createKnobStyles = (knobProperties) => {
|
|
75
76
|
const knobInner = [];
|
|
76
77
|
const knobOuterStyle = [];
|
|
77
78
|
const lastItem = knobProperties.length - 1;
|
|
78
79
|
if (knobProperties.length > 0) {
|
|
79
80
|
knobProperties.forEach((knobProperty, index) => {
|
|
80
81
|
knobInner[index] = {
|
|
81
|
-
...
|
|
82
|
+
...Slider_styles.sliderStyles.knobInner
|
|
82
83
|
};
|
|
83
84
|
knobOuterStyle[index] = {
|
|
84
|
-
...
|
|
85
|
+
...Slider_styles.sliderStyles.knobOuter
|
|
85
86
|
};
|
|
86
87
|
if (knobProperty.color) {
|
|
87
88
|
knobInner[index].backgroundColor = knobProperty.color;
|
|
88
89
|
knobOuterStyle[index].backgroundColor = "transparent";
|
|
89
90
|
}
|
|
90
91
|
if (knobProperty.hidden) {
|
|
91
|
-
knobInner[index] =
|
|
92
|
+
knobInner[index] = Slider_styles.sliderStyles.knobHidden;
|
|
92
93
|
if (index === lastItem) {
|
|
93
94
|
knobInner[index] = {
|
|
94
|
-
...
|
|
95
|
+
...Slider_styles.sliderStyles.knobHiddenLast
|
|
95
96
|
};
|
|
96
97
|
knobInner[index].backgroundColor = knobProperty.color;
|
|
97
98
|
knobOuterStyle[index] = {
|
|
98
|
-
...
|
|
99
|
+
...Slider_styles.sliderStyles.knobHidden
|
|
99
100
|
};
|
|
100
101
|
knobOuterStyle[index].backgroundColor = knobProperty.color;
|
|
101
102
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.cjs","sources":["../../../../src/components/Slider/utils.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { HvFormStatus } from \"@core/components/Forms\";\n\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\nimport { SliderStyles } from \"./Slider.styles\";\n\n/**\n * Transform the scaled values into knobs positions.\n *\n * @param {*} sliderValue - he value of the slider to be scaled\n * @param {*} minPointVlue - The value of the first point in the slider from left to right.\n * @param {*} stepVlue - The calculated separation between the values of the slider.\n */\nexport const knobsPositionToScaledValue = (\n sliderValue: number,\n minPointValue: number,\n stepValue: number\n): number => minPointValue + stepValue * sliderValue;\n\n/**\n * Transform the scaled values into knobs positions.\n *\n * @param {*} scaledValue - The value of the slider to be scaled\n * @param {*} minPointValue - The value of the first point in\n * the slider from left to right.\n * @param {*} inverseStepValue - The inverse of calculated separation between\n * the value of the points that compose the slider.\n */\nexport const scaledValueToKnobsPositionValue = (\n scaledValue: number | undefined,\n minPointValue: number,\n inverseStepValue: number\n): number =>\n typeof scaledValue === \"number\"\n ? Math.floor((scaledValue - minPointValue) * inverseStepValue)\n : NaN;\n\n/**\n * Transform the received knobs values into knob positions\n *\n * @param {Object} values - The values of the slider.\n * @param {Number} inverseStepValue - The inverse of calculated separation between\n * the value of the points that compose the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @returns {Array} - The position of the knobs.\n */\nexport const knobsValuesToKnobsPositions = (\n values: (number | undefined)[],\n inverseStepValue: number,\n minPointValue: number\n): number[] => {\n const knobsPositions: number[] = [];\n\n values.forEach((value, index) => {\n knobsPositions[index] = scaledValueToKnobsPositionValue(\n value,\n minPointValue,\n inverseStepValue\n );\n });\n\n return knobsPositions;\n};\n\n/**\n * Transform the received knobs positions into knob values\n *\n * @param {Object} knobPositions - The values of the slider.\n * @param {Number} stepValue - The calculated separation between\n * the value of the points that compose the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @returns {Array} - The position of the knobs.\n */\nexport const knobsPositionsToKnobsValues = (\n knobPositions: number[],\n stepValue: number,\n minPointValue: number\n): number[] => {\n const knobsValues: number[] = [];\n\n knobPositions.forEach((value, index) => {\n knobsValues[index] = knobsPositionToScaledValue(\n value,\n minPointValue,\n stepValue\n );\n });\n\n return knobsValues;\n};\n\n/**\n * Calculates the separation between each value in the slider.\n *\n * @param {*} maxPointValue - The value of the last point in the slider from left to right.\n * @param {*} minPointValue - The value of the first point in the slider from left to right.\n * @param {*} divisionQuantity - How many subdivisions there are in the slider.\n */\nexport const calculateStepValue = (\n maxPointValue: number,\n minPointValue: number,\n divisionQuantity: number\n): number => Math.abs(maxPointValue - minPointValue) / divisionQuantity;\n\n/**\n * Generates the inline styles used for the track of each knob, applying colors if necessary.\n *\n * @param {Object} markProperties - The object provided by the user with\n * the desired configuration for the marks.\n * @param {Integer} markstep - The separation between marks.\n * @param {Integer} divisionQuantity - How many subdivisions there are in the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @param {Integer} stepValue - The calculated separation between the values of the slider.\n * @param {Integer} markDigits - How many decimals the mark will show.\n * @param {Function} formatMark - A function provided by the user that is going to\n * be executed to format the mark text.\n * @param {Object} styles - the default styles for the marks.\n * @returns {Object} - An object with the for the marks.\n * @memberof HvSlider\n */\nexport const createMark = (\n markProperties: HvMarkProperty[],\n markstep: number,\n divisionQuantity: number,\n minPointValue: number,\n stepValue: number,\n markDigits: number,\n disabled: boolean,\n styles: SliderStyles,\n formatMark: (label: React.ReactNode) => React.ReactNode = (mark) => mark\n): {\n [key: number]: {\n label: string;\n style: CSSProperties;\n };\n} => {\n const marks: {\n [key: number]: {\n label: string;\n style: CSSProperties;\n };\n } = {};\n\n if (markProperties.length > 0) {\n markProperties.forEach((markProperty) => {\n if (typeof markProperty.position === \"number\") {\n marks[markProperty.position] = disabled\n ? {\n label: `${markProperty.label}`,\n style: {\n ...styles.disabledMark,\n },\n }\n : {\n label: `${markProperty.label}`,\n style: {\n ...styles.mark,\n },\n };\n }\n });\n } else {\n const roundedMarkStep = Math.floor(markstep);\n\n for (let index = 0; index <= divisionQuantity; index += roundedMarkStep) {\n let labelValue: React.ReactNode = knobsPositionToScaledValue(\n index,\n minPointValue,\n stepValue\n ).toFixed(markDigits);\n\n labelValue = formatMark?.(labelValue) || labelValue;\n\n marks[index] = disabled\n ? {\n label: `${labelValue}`,\n style: {\n ...styles.disabledMark,\n },\n }\n : {\n label: `${labelValue}`,\n style: {\n ...styles.mark,\n },\n };\n }\n }\n\n return marks;\n};\n\n/**\n * Generates the inline styles used for the track of each knob, applying colors if necessary.\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Object} styles - the default styles for the tracks.\n * @returns {Object} - An object with the style for each track.\n * @memberof HvSlider\n */\nexport const createTrackStyles = (\n knobProperties: HvKnobProperty[],\n styles: SliderStyles\n): CSSProperties[] => {\n const trackStyles: CSSProperties[] = [];\n\n if (knobProperties.length > 0) {\n knobProperties.forEach((knobProperty, index) => {\n trackStyles[index] = { ...styles.track };\n if (knobProperty.color) {\n trackStyles[index].backgroundColor = knobProperty.trackColor;\n }\n });\n }\n\n return trackStyles;\n};\n\n/**\n * Generates the inline styles used for each knob, applying colors if specified.\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Object} styles - the default styles for the knobs.\n * @returns {Object} - An object with both the inner and outer styles for the knob.\n * @memberof HvSlider\n */\nexport const createKnobStyles = (\n knobProperties: HvKnobProperty[],\n styles: SliderStyles\n): {\n knobInner: CSSProperties[];\n knobOuterStyle: CSSProperties[];\n} => {\n const knobInner: CSSProperties[] = [];\n const knobOuterStyle: CSSProperties[] = [];\n\n const lastItem = knobProperties.length - 1;\n if (knobProperties.length > 0) {\n knobProperties.forEach((knobProperty, index) => {\n knobInner[index] = { ...styles.knobInner };\n knobOuterStyle[index] = { ...styles.knobOuter };\n\n if (knobProperty.color) {\n knobInner[index].backgroundColor = knobProperty.color;\n knobOuterStyle[index].backgroundColor = \"transparent\";\n }\n\n if (knobProperty.hidden) {\n knobInner[index] = styles.knobHidden;\n if (index === lastItem) {\n knobInner[index] = { ...styles.knobHiddenLast };\n knobInner[index].backgroundColor = knobProperty.color;\n knobOuterStyle[index] = { ...styles.knobHidden };\n knobOuterStyle[index].backgroundColor = knobProperty.color;\n }\n }\n });\n }\n\n return {\n knobInner,\n knobOuterStyle,\n };\n};\n\n/**\n * Analyzes both the values and the default values to determine whether the slider is working in single mode.\n *\n * @param {Array} values - the values where the knobs are positioned when controlled.\n * @param {Array} defaultValues - the values where the knobs start when uncontrolled.\n * @returns {Boolean} - if true the slider should work as single slider\n */\nexport const isSingleSlider = (\n values: number[],\n defaultValues: (number | undefined)[]\n): boolean => {\n if (!(values?.length > 1)) {\n return defaultValues.length === 1;\n }\n return values.length === 1;\n};\n\n/**\n * Generates the default knob styles for each knob\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Integer} numberOfKnobs - the default styles for the knobs.\n * @param {Object} theme - The theme to extract the colors.\n *\n * @returns {Object} - An object with both the inner and outer styles for the knob.\n * @memberof HvSlider\n */\nexport const generateDefaultKnobProperties = (\n numberOfKnobs: number = 1,\n disabled: boolean = false,\n knobPropertiesProp?: HvKnobProperty[]\n): HvKnobProperty[] => {\n let knobProperties = knobPropertiesProp || [];\n\n const defaultKnobStyles = {\n color: theme.colors.secondary,\n hoverColor: theme.colors.secondary,\n trackColor: theme.colors.secondary,\n dragColor: theme.colors.secondary,\n knobRingColor: theme.colors.atmo1,\n };\n\n const disabledKnobStyles = {\n color: theme.colors.secondary_60,\n hoverColor: theme.colors.secondary_60,\n trackColor: theme.colors.secondary_60,\n dragColor: theme.colors.secondary_60,\n knobRingColor: theme.colors.secondary_60,\n };\n\n if (knobProperties.length > 0) {\n knobProperties = knobProperties.slice(0, numberOfKnobs);\n knobProperties = knobProperties.map((knobProperty) => {\n if (!disabled) {\n return {\n ...disabledKnobStyles,\n ...knobProperty,\n };\n }\n return {\n ...defaultKnobStyles,\n ...knobProperty,\n };\n });\n } else {\n for (let i = 0; i < numberOfKnobs; i += 1) {\n if (!disabled) knobProperties.push(defaultKnobStyles);\n if (disabled) knobProperties.push(disabledKnobStyles);\n }\n }\n\n return knobProperties;\n};\n\nconst pushSlider = (\n index: number,\n inputIndex: number,\n inputValue: number\n): number => {\n const difference = index - inputIndex;\n\n return inputValue + difference;\n};\n\nexport const ensureValuesConsistency = (\n knobPositions: number[],\n inputIndex: number\n): number[] => {\n const newKnobsPosition: number[] = [...knobPositions];\n\n newKnobsPosition.forEach((value, index) => {\n if (Number.isNaN(value) || value == null) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex]\n );\n } else if (index < inputIndex && value > newKnobsPosition[inputIndex]) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex]\n );\n } else if (index > inputIndex && value < newKnobsPosition[inputIndex]) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex]\n );\n }\n });\n\n return newKnobsPosition;\n};\n\nexport const convertStatusToArray = (\n length: number,\n status?: HvFormStatus | HvFormStatus[]\n): {\n arrayStatus?: HvFormStatus[];\n arrayDefaultStatus: (keyof typeof validationStates)[];\n} => {\n const result: {\n arrayStatus?: HvFormStatus[];\n arrayDefaultStatus: (keyof typeof validationStates)[];\n } = {\n arrayDefaultStatus: Array.from({ length }, () => validationStates.standBy),\n };\n\n if (status == null) {\n return result;\n }\n if (!Array.isArray(status)) {\n result.arrayStatus = Array.from({ length }, () => status);\n return result;\n }\n result.arrayStatus = status;\n\n return result;\n};\n\nexport const statusArrayToFormStatus = (\n arrayStatus: HvFormStatus[]\n): keyof typeof validationStates => {\n const invalid = arrayStatus.some(\n (status) => status === validationStates.invalid\n );\n\n if (invalid) return validationStates.invalid;\n\n const valid = arrayStatus.some((status) => status === validationStates.valid);\n\n if (valid) return validationStates.valid;\n\n return validationStates.standBy;\n};\n\nexport const knobsValuesToString = (\n knobsValues: number[],\n markDigits: number\n): string[] =>\n knobsValues.map((knobValue) =>\n Number.isNaN(knobValue) ? \"\" : knobValue.toFixed(markDigits)\n );\n\nexport const stringValuesToKnobs = (inputsValues: string[]): number[] =>\n inputsValues.map((inputValue) => parseFloat(inputValue));\n"],"names":["knobsPositionToScaledValue","sliderValue","minPointValue","stepValue","scaledValueToKnobsPositionValue","scaledValue","inverseStepValue","Math","floor","NaN","knobsValuesToKnobsPositions","values","knobsPositions","forEach","value","index","knobsPositionsToKnobsValues","knobPositions","knobsValues","calculateStepValue","maxPointValue","divisionQuantity","abs","createMark","markProperties","markstep","markDigits","disabled","styles","formatMark","mark","marks","length","markProperty","position","label","style","disabledMark","roundedMarkStep","labelValue","toFixed","createTrackStyles","knobProperties","trackStyles","knobProperty","track","color","backgroundColor","trackColor","createKnobStyles","knobInner","knobOuterStyle","lastItem","knobOuter","hidden","knobHidden","knobHiddenLast","isSingleSlider","defaultValues","generateDefaultKnobProperties","numberOfKnobs","knobPropertiesProp","defaultKnobStyles","theme","colors","secondary","hoverColor","dragColor","knobRingColor","atmo1","disabledKnobStyles","secondary_60","slice","map","i","push","pushSlider","inputIndex","inputValue","difference","ensureValuesConsistency","newKnobsPosition","Number","isNaN","convertStatusToArray","status","result","arrayDefaultStatus","Array","from","validationStates","standBy","isArray","arrayStatus","statusArrayToFormStatus","invalid","some","valid","knobsValuesToString","knobValue","stringValuesToKnobs","inputsValues","parseFloat"],"mappings":";;;;AAiBO,MAAMA,6BAA6BA,CACxCC,aACAC,eACAC,cACWD,gBAAgBC,YAAYF;AAWlC,MAAMG,kCAAkCA,CAC7CC,aACAH,eACAI,qBAEA,OAAOD,gBAAgB,WACnBE,KAAKC,OAAOH,cAAcH,iBAAiBI,gBAAgB,IAC3DG;AAYC,MAAMC,8BAA8BA,CACzCC,QACAL,kBACAJ,kBACa;AACb,QAAMU,iBAA2B,CAAA;AAE1BC,SAAAA,QAAQ,CAACC,OAAOC,UAAU;AAC/BH,mBAAeG,KAAK,IAAIX,gCACtBU,OACAZ,eACAI,gBACF;AAAA,EAAA,CACD;AAEMM,SAAAA;AACT;AAYO,MAAMI,8BAA8BA,CACzCC,eACAd,WACAD,kBACa;AACb,QAAMgB,cAAwB,CAAA;AAEhBL,gBAAAA,QAAQ,CAACC,OAAOC,UAAU;AACtCG,gBAAYH,KAAK,IAAIf,2BACnBc,OACAZ,eACAC,SACF;AAAA,EAAA,CACD;AAEMe,SAAAA;AACT;AASaC,MAAAA,qBAAqBA,CAChCC,eACAlB,eACAmB,qBACWd,KAAKe,IAAIF,gBAAgBlB,aAAa,IAAImB;AAmBhD,MAAME,aAAaA,CACxBC,gBACAC,UACAJ,kBACAnB,eACAC,WACAuB,YACAC,UACAC,QACAC,aAA2DC,CAAAA,SAASA,SAMjE;AACH,QAAMC,QAKF,CAAA;AAEAP,MAAAA,eAAeQ,SAAS,GAAG;AAC7BR,mBAAeX,QAASoB,CAAiB,iBAAA;AACnC,UAAA,OAAOA,aAAaC,aAAa,UAAU;AACvCD,cAAAA,aAAaC,QAAQ,IAAIP,WAC3B;AAAA,UACEQ,OAAQ,GAAEF,aAAaE,KAAM;AAAA,UAC7BC,OAAO;AAAA,YACL,GAAGR,OAAOS;AAAAA,UACZ;AAAA,QAAA,IAEF;AAAA,UACEF,OAAQ,GAAEF,aAAaE,KAAM;AAAA,UAC7BC,OAAO;AAAA,YACL,GAAGR,OAAOE;AAAAA,UACZ;AAAA,QAAA;AAAA,MAER;AAAA,IAAA,CACD;AAAA,EAAA,OACI;AACCQ,UAAAA,kBAAkB/B,KAAKC,MAAMiB,QAAQ;AAE3C,aAASV,QAAQ,GAAGA,SAASM,kBAAkBN,SAASuB,iBAAiB;AACvE,UAAIC,aAA8BvC,2BAChCe,OACAb,eACAC,SACF,EAAEqC,QAAQd,UAAU;AAEPG,oBAAAA,yCAAaU,gBAAeA;AAEnCxB,YAAAA,KAAK,IAAIY,WACX;AAAA,QACEQ,OAAQ,GAAEI,UAAW;AAAA,QACrBH,OAAO;AAAA,UACL,GAAGR,OAAOS;AAAAA,QACZ;AAAA,MAAA,IAEF;AAAA,QACEF,OAAQ,GAAEI,UAAW;AAAA,QACrBH,OAAO;AAAA,UACL,GAAGR,OAAOE;AAAAA,QACZ;AAAA,MAAA;AAAA,IAER;AAAA,EACF;AAEOC,SAAAA;AACT;AAWaU,MAAAA,oBAAoBA,CAC/BC,gBACAd,WACoB;AACpB,QAAMe,cAA+B,CAAA;AAEjCD,MAAAA,eAAeV,SAAS,GAAG;AACdnB,mBAAAA,QAAQ,CAAC+B,cAAc7B,UAAU;AAC9C4B,kBAAY5B,KAAK,IAAI;AAAA,QAAE,GAAGa,OAAOiB;AAAAA,MAAAA;AACjC,UAAID,aAAaE,OAAO;AACV/B,oBAAAA,KAAK,EAAEgC,kBAAkBH,aAAaI;AAAAA,MACpD;AAAA,IAAA,CACD;AAAA,EACH;AAEOL,SAAAA;AACT;AAWaM,MAAAA,mBAAmBA,CAC9BP,gBACAd,WAIG;AACH,QAAMsB,YAA6B,CAAA;AACnC,QAAMC,iBAAkC,CAAA;AAElCC,QAAAA,WAAWV,eAAeV,SAAS;AACrCU,MAAAA,eAAeV,SAAS,GAAG;AACdnB,mBAAAA,QAAQ,CAAC+B,cAAc7B,UAAU;AAC9CmC,gBAAUnC,KAAK,IAAI;AAAA,QAAE,GAAGa,OAAOsB;AAAAA,MAAAA;AAC/BC,qBAAepC,KAAK,IAAI;AAAA,QAAE,GAAGa,OAAOyB;AAAAA,MAAAA;AAEpC,UAAIT,aAAaE,OAAO;AACZ/B,kBAAAA,KAAK,EAAEgC,kBAAkBH,aAAaE;AACjC/B,uBAAAA,KAAK,EAAEgC,kBAAkB;AAAA,MAC1C;AAEA,UAAIH,aAAaU,QAAQ;AACbvC,kBAAAA,KAAK,IAAIa,OAAO2B;AAC1B,YAAIxC,UAAUqC,UAAU;AACtBF,oBAAUnC,KAAK,IAAI;AAAA,YAAE,GAAGa,OAAO4B;AAAAA,UAAAA;AACrBzC,oBAAAA,KAAK,EAAEgC,kBAAkBH,aAAaE;AAChDK,yBAAepC,KAAK,IAAI;AAAA,YAAE,GAAGa,OAAO2B;AAAAA,UAAAA;AACrBxC,yBAAAA,KAAK,EAAEgC,kBAAkBH,aAAaE;AAAAA,QACvD;AAAA,MACF;AAAA,IAAA,CACD;AAAA,EACH;AAEO,SAAA;AAAA,IACLI;AAAAA,IACAC;AAAAA,EAAAA;AAEJ;AASaM,MAAAA,iBAAiBA,CAC5B9C,QACA+C,kBACY;AACR,MAAA,GAAE/C,iCAAQqB,UAAS,IAAI;AACzB,WAAO0B,cAAc1B,WAAW;AAAA,EAClC;AACA,SAAOrB,OAAOqB,WAAW;AAC3B;AAaO,MAAM2B,gCAAgCA,CAC3CC,gBAAwB,GACxBjC,WAAoB,OACpBkC,uBACqB;AACjBnB,MAAAA,iBAAiBmB,sBAAsB;AAE3C,QAAMC,oBAAoB;AAAA,IACxBhB,OAAOiB,YAAAA,MAAMC,OAAOC;AAAAA,IACpBC,YAAYH,YAAAA,MAAMC,OAAOC;AAAAA,IACzBjB,YAAYe,YAAAA,MAAMC,OAAOC;AAAAA,IACzBE,WAAWJ,YAAAA,MAAMC,OAAOC;AAAAA,IACxBG,eAAeL,YAAAA,MAAMC,OAAOK;AAAAA,EAAAA;AAG9B,QAAMC,qBAAqB;AAAA,IACzBxB,OAAOiB,YAAAA,MAAMC,OAAOO;AAAAA,IACpBL,YAAYH,YAAAA,MAAMC,OAAOO;AAAAA,IACzBvB,YAAYe,YAAAA,MAAMC,OAAOO;AAAAA,IACzBJ,WAAWJ,YAAAA,MAAMC,OAAOO;AAAAA,IACxBH,eAAeL,YAAAA,MAAMC,OAAOO;AAAAA,EAAAA;AAG1B7B,MAAAA,eAAeV,SAAS,GAAG;AACZU,qBAAAA,eAAe8B,MAAM,GAAGZ,aAAa;AACrClB,qBAAAA,eAAe+B,IAAK7B,CAAiB,iBAAA;AACpD,UAAI,CAACjB,UAAU;AACN,eAAA;AAAA,UACL,GAAG2C;AAAAA,UACH,GAAG1B;AAAAA,QAAAA;AAAAA,MAEP;AACO,aAAA;AAAA,QACL,GAAGkB;AAAAA,QACH,GAAGlB;AAAAA,MAAAA;AAAAA,IACL,CACD;AAAA,EAAA,OACI;AACL,aAAS8B,IAAI,GAAGA,IAAId,eAAec,KAAK,GAAG;AACzC,UAAI,CAAC/C;AAAUe,uBAAeiC,KAAKb,iBAAiB;AAChDnC,UAAAA;AAAUe,uBAAeiC,KAAKL,kBAAkB;AAAA,IACtD;AAAA,EACF;AAEO5B,SAAAA;AACT;AAEA,MAAMkC,aAAaA,CACjB7D,OACA8D,YACAC,eACW;AACX,QAAMC,aAAahE,QAAQ8D;AAE3B,SAAOC,aAAaC;AACtB;AAEaC,MAAAA,0BAA0BA,CACrC/D,eACA4D,eACa;AACPI,QAAAA,mBAA6B,CAAC,GAAGhE,aAAa;AAEnCJ,mBAAAA,QAAQ,CAACC,OAAOC,UAAU;AACzC,QAAImE,OAAOC,MAAMrE,KAAK,KAAKA,SAAS,MAAM;AACxCmE,uBAAiBlE,KAAK,IAAI6D,WACxB7D,OACA8D,YACAI,iBAAiBJ,UAAU,CAC7B;AAAA,IAAA,WACS9D,QAAQ8D,cAAc/D,QAAQmE,iBAAiBJ,UAAU,GAAG;AACrEI,uBAAiBlE,KAAK,IAAI6D,WACxB7D,OACA8D,YACAI,iBAAiBJ,UAAU,CAC7B;AAAA,IAAA,WACS9D,QAAQ8D,cAAc/D,QAAQmE,iBAAiBJ,UAAU,GAAG;AACrEI,uBAAiBlE,KAAK,IAAI6D,WACxB7D,OACA8D,YACAI,iBAAiBJ,UAAU,CAC7B;AAAA,IACF;AAAA,EAAA,CACD;AAEMI,SAAAA;AACT;AAEaG,MAAAA,uBAAuBA,CAClCpD,QACAqD,WAIG;AACH,QAAMC,SAGF;AAAA,IACFC,oBAAoBC,MAAMC,KAAK;AAAA,MAAEzD;AAAAA,IAAAA,GAAU,MAAM0D,iBAAAA,QAAiBC,OAAO;AAAA,EAAA;AAG3E,MAAIN,UAAU,MAAM;AACXC,WAAAA;AAAAA,EACT;AACA,MAAI,CAACE,MAAMI,QAAQP,MAAM,GAAG;AACnBQ,WAAAA,cAAcL,MAAMC,KAAK;AAAA,MAAEzD;AAAAA,IAAAA,GAAU,MAAMqD,MAAM;AACjDC,WAAAA;AAAAA,EACT;AACAA,SAAOO,cAAcR;AAEdC,SAAAA;AACT;AAEaQ,MAAAA,0BAA0BA,CACrCD,gBACkC;AAClC,QAAME,UAAUF,YAAYG,KACzBX,CAAWA,WAAAA,WAAWK,iBAAAA,QAAiBK,OAC1C;AAEIA,MAAAA;AAAS,WAAOL,iBAAAA,QAAiBK;AAErC,QAAME,QAAQJ,YAAYG,KAAMX,CAAWA,WAAAA,WAAWK,iBAAAA,QAAiBO,KAAK;AAExEA,MAAAA;AAAO,WAAOP,iBAAAA,QAAiBO;AAEnC,SAAOP,iBAAAA,QAAiBC;AAC1B;AAEO,MAAMO,sBAAsBA,CACjChF,aACAQ,eAEAR,YAAYuD,IAAK0B,CAAAA,cACfjB,OAAOC,MAAMgB,SAAS,IAAI,KAAKA,UAAU3D,QAAQd,UAAU,CAC7D;AAEW0E,MAAAA,sBAAsBA,CAACC,iBAClCA,aAAa5B,IAAKK,CAAewB,eAAAA,WAAWxB,UAAU,CAAC;;;;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"utils.cjs","sources":["../../../../src/components/Slider/utils.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { HvFormStatus } from \"@core/components/Forms\";\n\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\nimport { sliderStyles as styles } from \"./Slider.styles\";\n\n/**\n * Transform the scaled values into knobs positions.\n *\n * @param {*} sliderValue - he value of the slider to be scaled\n * @param {*} minPointVlue - The value of the first point in the slider from left to right.\n * @param {*} stepVlue - The calculated separation between the values of the slider.\n */\nexport const knobsPositionToScaledValue = (\n sliderValue: number,\n minPointValue: number,\n stepValue: number\n): number => minPointValue + stepValue * sliderValue;\n\n/**\n * Transform the scaled values into knobs positions.\n *\n * @param {*} scaledValue - The value of the slider to be scaled\n * @param {*} minPointValue - The value of the first point in\n * the slider from left to right.\n * @param {*} inverseStepValue - The inverse of calculated separation between\n * the value of the points that compose the slider.\n */\nexport const scaledValueToKnobsPositionValue = (\n scaledValue: number | undefined,\n minPointValue: number,\n inverseStepValue: number\n): number =>\n typeof scaledValue === \"number\"\n ? Math.floor((scaledValue - minPointValue) * inverseStepValue)\n : NaN;\n\n/**\n * Transform the received knobs values into knob positions\n *\n * @param {Object} values - The values of the slider.\n * @param {Number} inverseStepValue - The inverse of calculated separation between\n * the value of the points that compose the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @returns {Array} - The position of the knobs.\n */\nexport const knobsValuesToKnobsPositions = (\n values: (number | undefined)[],\n inverseStepValue: number,\n minPointValue: number\n): number[] => {\n const knobsPositions: number[] = [];\n\n values.forEach((value, index) => {\n knobsPositions[index] = scaledValueToKnobsPositionValue(\n value,\n minPointValue,\n inverseStepValue\n );\n });\n\n return knobsPositions;\n};\n\n/**\n * Transform the received knobs positions into knob values\n *\n * @param {Object} knobPositions - The values of the slider.\n * @param {Number} stepValue - The calculated separation between\n * the value of the points that compose the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @returns {Array} - The position of the knobs.\n */\nexport const knobsPositionsToKnobsValues = (\n knobPositions: number[],\n stepValue: number,\n minPointValue: number\n): number[] => {\n const knobsValues: number[] = [];\n\n knobPositions.forEach((value, index) => {\n knobsValues[index] = knobsPositionToScaledValue(\n value,\n minPointValue,\n stepValue\n );\n });\n\n return knobsValues;\n};\n\n/**\n * Calculates the separation between each value in the slider.\n *\n * @param {*} maxPointValue - The value of the last point in the slider from left to right.\n * @param {*} minPointValue - The value of the first point in the slider from left to right.\n * @param {*} divisionQuantity - How many subdivisions there are in the slider.\n */\nexport const calculateStepValue = (\n maxPointValue: number,\n minPointValue: number,\n divisionQuantity: number\n): number => Math.abs(maxPointValue - minPointValue) / divisionQuantity;\n\n/**\n * Generates the inline styles used for the track of each knob, applying colors if necessary.\n *\n * @param {Object} markProperties - The object provided by the user with\n * the desired configuration for the marks.\n * @param {Integer} markstep - The separation between marks.\n * @param {Integer} divisionQuantity - How many subdivisions there are in the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @param {Integer} stepValue - The calculated separation between the values of the slider.\n * @param {Integer} markDigits - How many decimals the mark will show.\n * @param {Function} formatMark - A function provided by the user that is going to\n * be executed to format the mark text.\n * @param {Object} styles - the default styles for the marks.\n * @returns {Object} - An object with the for the marks.\n * @memberof HvSlider\n */\nexport const createMark = (\n markProperties: HvMarkProperty[],\n markstep: number,\n divisionQuantity: number,\n minPointValue: number,\n stepValue: number,\n markDigits: number,\n disabled: boolean,\n formatMark: (label: React.ReactNode) => React.ReactNode = (mark) => mark\n): {\n [key: number]: {\n label: string;\n style: CSSProperties;\n };\n} => {\n const marks: {\n [key: number]: {\n label: string;\n style: CSSProperties;\n };\n } = {};\n\n if (markProperties.length > 0) {\n markProperties.forEach((markProperty) => {\n if (typeof markProperty.position === \"number\") {\n marks[markProperty.position] = disabled\n ? {\n label: `${markProperty.label}`,\n style: {\n ...styles.disabledMark,\n },\n }\n : {\n label: `${markProperty.label}`,\n style: {\n ...styles.mark,\n },\n };\n }\n });\n } else {\n const roundedMarkStep = Math.floor(markstep);\n\n for (let index = 0; index <= divisionQuantity; index += roundedMarkStep) {\n let labelValue: React.ReactNode = knobsPositionToScaledValue(\n index,\n minPointValue,\n stepValue\n ).toFixed(markDigits);\n\n labelValue = formatMark?.(labelValue) || labelValue;\n\n marks[index] = disabled\n ? {\n label: `${labelValue}`,\n style: {\n ...styles.disabledMark,\n },\n }\n : {\n label: `${labelValue}`,\n style: {\n ...styles.mark,\n },\n };\n }\n }\n\n return marks;\n};\n\n/**\n * Generates the inline styles used for the track of each knob, applying colors if necessary.\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Object} styles - the default styles for the tracks.\n * @returns {Object} - An object with the style for each track.\n * @memberof HvSlider\n */\nexport const createTrackStyles = (\n knobProperties: HvKnobProperty[]\n): CSSProperties[] => {\n const trackStyles: CSSProperties[] = [];\n\n if (knobProperties.length > 0) {\n knobProperties.forEach((knobProperty, index) => {\n trackStyles[index] = { ...styles.track };\n if (knobProperty.color) {\n trackStyles[index].backgroundColor = knobProperty.trackColor;\n }\n });\n }\n\n return trackStyles;\n};\n\n/**\n * Generates the inline styles used for each knob, applying colors if specified.\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Object} styles - the default styles for the knobs.\n * @returns {Object} - An object with both the inner and outer styles for the knob.\n * @memberof HvSlider\n */\nexport const createKnobStyles = (\n knobProperties: HvKnobProperty[]\n): {\n knobInner: CSSProperties[];\n knobOuterStyle: CSSProperties[];\n} => {\n const knobInner: CSSProperties[] = [];\n const knobOuterStyle: CSSProperties[] = [];\n\n const lastItem = knobProperties.length - 1;\n if (knobProperties.length > 0) {\n knobProperties.forEach((knobProperty, index) => {\n knobInner[index] = { ...styles.knobInner };\n knobOuterStyle[index] = { ...styles.knobOuter };\n\n if (knobProperty.color) {\n knobInner[index].backgroundColor = knobProperty.color;\n knobOuterStyle[index].backgroundColor = \"transparent\";\n }\n\n if (knobProperty.hidden) {\n knobInner[index] = styles.knobHidden;\n if (index === lastItem) {\n knobInner[index] = { ...styles.knobHiddenLast };\n knobInner[index].backgroundColor = knobProperty.color;\n knobOuterStyle[index] = { ...styles.knobHidden };\n knobOuterStyle[index].backgroundColor = knobProperty.color;\n }\n }\n });\n }\n\n return {\n knobInner,\n knobOuterStyle,\n };\n};\n\n/**\n * Analyzes both the values and the default values to determine whether the slider is working in single mode.\n *\n * @param {Array} values - the values where the knobs are positioned when controlled.\n * @param {Array} defaultValues - the values where the knobs start when uncontrolled.\n * @returns {Boolean} - if true the slider should work as single slider\n */\nexport const isSingleSlider = (\n values: number[],\n defaultValues: (number | undefined)[]\n): boolean => {\n if (!(values?.length > 1)) {\n return defaultValues.length === 1;\n }\n return values.length === 1;\n};\n\n/**\n * Generates the default knob styles for each knob\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Integer} numberOfKnobs - the default styles for the knobs.\n * @param {Object} theme - The theme to extract the colors.\n *\n * @returns {Object} - An object with both the inner and outer styles for the knob.\n * @memberof HvSlider\n */\nexport const generateDefaultKnobProperties = (\n numberOfKnobs: number = 1,\n disabled: boolean = false,\n knobPropertiesProp?: HvKnobProperty[]\n): HvKnobProperty[] => {\n let knobProperties = knobPropertiesProp || [];\n\n const defaultKnobStyles = {\n color: theme.colors.secondary,\n hoverColor: theme.colors.secondary,\n trackColor: theme.colors.secondary,\n dragColor: theme.colors.secondary,\n knobRingColor: theme.colors.atmo1,\n };\n\n const disabledKnobStyles = {\n color: theme.colors.secondary_60,\n hoverColor: theme.colors.secondary_60,\n trackColor: theme.colors.secondary_60,\n dragColor: theme.colors.secondary_60,\n knobRingColor: theme.colors.secondary_60,\n };\n\n if (knobProperties.length > 0) {\n knobProperties = knobProperties.slice(0, numberOfKnobs);\n knobProperties = knobProperties.map((knobProperty) => {\n if (!disabled) {\n return {\n ...disabledKnobStyles,\n ...knobProperty,\n };\n }\n return {\n ...defaultKnobStyles,\n ...knobProperty,\n };\n });\n } else {\n for (let i = 0; i < numberOfKnobs; i += 1) {\n if (!disabled) knobProperties.push(defaultKnobStyles);\n if (disabled) knobProperties.push(disabledKnobStyles);\n }\n }\n\n return knobProperties;\n};\n\nconst pushSlider = (\n index: number,\n inputIndex: number,\n inputValue: number\n): number => {\n const difference = index - inputIndex;\n\n return inputValue + difference;\n};\n\nexport const ensureValuesConsistency = (\n knobPositions: number[],\n inputIndex: number\n): number[] => {\n const newKnobsPosition: number[] = [...knobPositions];\n\n newKnobsPosition.forEach((value, index) => {\n if (Number.isNaN(value) || value == null) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex]\n );\n } else if (index < inputIndex && value > newKnobsPosition[inputIndex]) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex]\n );\n } else if (index > inputIndex && value < newKnobsPosition[inputIndex]) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex]\n );\n }\n });\n\n return newKnobsPosition;\n};\n\nexport const convertStatusToArray = (\n length: number,\n status?: HvFormStatus | HvFormStatus[]\n): {\n arrayStatus?: HvFormStatus[];\n arrayDefaultStatus: (keyof typeof validationStates)[];\n} => {\n const result: {\n arrayStatus?: HvFormStatus[];\n arrayDefaultStatus: (keyof typeof validationStates)[];\n } = {\n arrayDefaultStatus: Array.from({ length }, () => validationStates.standBy),\n };\n\n if (status == null) {\n return result;\n }\n if (!Array.isArray(status)) {\n result.arrayStatus = Array.from({ length }, () => status);\n return result;\n }\n result.arrayStatus = status;\n\n return result;\n};\n\nexport const statusArrayToFormStatus = (\n arrayStatus: HvFormStatus[]\n): keyof typeof validationStates => {\n const invalid = arrayStatus.some(\n (status) => status === validationStates.invalid\n );\n\n if (invalid) return validationStates.invalid;\n\n const valid = arrayStatus.some((status) => status === validationStates.valid);\n\n if (valid) return validationStates.valid;\n\n return validationStates.standBy;\n};\n\nexport const knobsValuesToString = (\n knobsValues: number[],\n markDigits: number\n): string[] =>\n knobsValues.map((knobValue) =>\n Number.isNaN(knobValue) ? \"\" : knobValue.toFixed(markDigits)\n );\n\nexport const stringValuesToKnobs = (inputsValues: string[]): number[] =>\n inputsValues.map((inputValue) => parseFloat(inputValue));\n"],"names":["knobsPositionToScaledValue","sliderValue","minPointValue","stepValue","scaledValueToKnobsPositionValue","scaledValue","inverseStepValue","Math","floor","NaN","knobsValuesToKnobsPositions","values","knobsPositions","forEach","value","index","knobsPositionsToKnobsValues","knobPositions","knobsValues","calculateStepValue","maxPointValue","divisionQuantity","abs","createMark","markProperties","markstep","markDigits","disabled","formatMark","mark","marks","length","markProperty","position","label","style","styles","disabledMark","roundedMarkStep","labelValue","toFixed","createTrackStyles","knobProperties","trackStyles","knobProperty","track","color","backgroundColor","trackColor","createKnobStyles","knobInner","knobOuterStyle","lastItem","knobOuter","hidden","knobHidden","knobHiddenLast","isSingleSlider","defaultValues","generateDefaultKnobProperties","numberOfKnobs","knobPropertiesProp","defaultKnobStyles","theme","colors","secondary","hoverColor","dragColor","knobRingColor","atmo1","disabledKnobStyles","secondary_60","slice","map","i","push","pushSlider","inputIndex","inputValue","difference","ensureValuesConsistency","newKnobsPosition","Number","isNaN","convertStatusToArray","status","result","arrayDefaultStatus","Array","from","validationStates","standBy","isArray","arrayStatus","statusArrayToFormStatus","invalid","some","valid","knobsValuesToString","knobValue","stringValuesToKnobs","inputsValues","parseFloat"],"mappings":"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"}
|
|
@@ -60,7 +60,7 @@ const HvSlider = (props) => {
|
|
|
60
60
|
const sliderInputId = setId(elementId, "input");
|
|
61
61
|
const stepValue = useMemo(() => calculateStepValue(maxPointValue, minPointValue, divisionQuantity), [divisionQuantity, maxPointValue, minPointValue]);
|
|
62
62
|
const inverseStepValue = 1 / stepValue;
|
|
63
|
-
const marks = useMemo(() => createMark(markProperties, markStep, divisionQuantity, minPointValue, stepValue, markDigits, !!disabled,
|
|
63
|
+
const marks = useMemo(() => createMark(markProperties, markStep, divisionQuantity, minPointValue, stepValue, markDigits, !!disabled, formatMark), [disabled, divisionQuantity, formatMark, markDigits, markProperties, markStep, minPointValue, stepValue]);
|
|
64
64
|
const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
|
|
65
65
|
const isSingle = useMemo(() => isSingleSlider(valuesProp, defaultValues), [defaultValues, valuesProp]);
|
|
66
66
|
const value = useMemo(() => (valuesProp == null ? void 0 : valuesProp.length) > 0 ? knobsValuesToKnobsPositions(valuesProp, inverseStepValue, minPointValue) : void 0, [inverseStepValue, minPointValue, valuesProp]);
|
|
@@ -75,8 +75,8 @@ const HvSlider = (props) => {
|
|
|
75
75
|
const [isDraggingTrack, setIsDraggingTrack] = useState(false);
|
|
76
76
|
const knobProperties = generateDefaultKnobProperties(knobsPositions.length, disabled, knobPropertiesProp);
|
|
77
77
|
const rangesCount = knobProperties.length - 1;
|
|
78
|
-
const trackStyles = createTrackStyles(knobProperties
|
|
79
|
-
const knobStyles = createKnobStyles(knobProperties
|
|
78
|
+
const trackStyles = createTrackStyles(knobProperties);
|
|
79
|
+
const knobStyles = createKnobStyles(knobProperties);
|
|
80
80
|
const performValidation = useCallback(() => {
|
|
81
81
|
let invalid = false;
|
|
82
82
|
const newValidationState = knobsPositions.map((position) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import Slider, { SliderProps } from \"rc-slider\";\n\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport Tooltip from \"rc-tooltip\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { HvInputProps } from \"@core/components/Input\";\nimport {\n HvFormElement,\n HvFormStatus,\n HvLabel,\n HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { sliderStyles, staticClasses, useClasses } from \"./Slider.styles\";\nimport {\n calculateStepValue,\n convertStatusToArray,\n createKnobStyles,\n createMark,\n createTrackStyles,\n ensureValuesConsistency,\n generateDefaultKnobProperties,\n isSingleSlider,\n knobsPositionsToKnobsValues,\n knobsPositionToScaledValue,\n knobsValuesToKnobsPositions,\n scaledValueToKnobsPositionValue,\n statusArrayToFormStatus,\n} from \"./utils\";\nimport { HvSliderInput } from \"./SliderInput/SliderInput\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\n\nexport { staticClasses as sliderClasses };\n\nexport type HvSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderProps\n extends HvBaseProps<HTMLDivElement, \"onChange\" | \"onBlur\"> {\n /**\n * The slider name.\n */\n name?: string;\n /**\n * The label of the slider.\n *\n * If not provided, an aria-label or aria-labelledby must be inputted via sliderProps.\n */\n label?: React.ReactNode;\n /**\n * Indicates that the slider is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the slider is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that user slider is required on the form element.\n */\n required?: boolean;\n /**\n * What message to render when the value is required.\n */\n requiredMessage?: string;\n /**\n * If `true` the input that controls the slider is hidden.\n */\n hideInput?: boolean;\n /**\n * Attributes applied to the slider element.\n */\n sliderProps?: SliderProps;\n /**\n * The status of the slider element.\n *\n * Valid is correct, invalid is incorrect and standBy means no validations have run.\n *\n * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n */\n status?: HvFormStatus | HvFormStatus[];\n /**\n * The error message to show when `status` is \"invalid\".\n */\n statusMessage?: React.ReactNode;\n /**\n * The values array to apply to the component\n */\n values?: number[];\n /**\n * The default values array to apply to the component\n */\n defaultValues?: (number | undefined)[];\n /**\n * The object used to set the knob properties,\n * for every item in the array a new knob will be created.\n */\n knobProperties?: HvKnobProperty[];\n /**\n * The object used to set the mark properties individually.\n */\n markProperties?: HvMarkProperty[];\n /**\n * The function executed before a change will occur in the slider.\n */\n onBeforeChange?: (value: number[]) => void;\n /**\n * The function executed while a change is occurring in the slider.\n */\n onChange?: (value: number[]) => void;\n /**\n * The function executed after a change ocurred in the slider.\n */\n onAfterChange?: (value: number[]) => void;\n /**\n * The function executed after a blur ocurred in the slider.\n */\n onBlur?: (\n event: React.FocusEvent,\n knobsValues: number[],\n status?: HvFormStatus | HvFormStatus[]\n ) => void;\n /**\n * The separation in points between marks.\n * example: if 10 divisions and a markstep of 2 there will be 5 marks.\n */\n markStep?: number;\n /**\n * How many subdivisions there are in the slider.\n */\n divisionQuantity?: number;\n /**\n * The value of the first point in the slider from left to right.\n */\n minPointValue?: number;\n /**\n * The value of the last point in the slider from left to right.\n */\n maxPointValue?: number;\n /**\n * The nax number of decimals if no format function is applied\n */\n markDigits?: number;\n /**\n * A formatting function used to add format to the marks in the track,\n * the function receives the mark text\n */\n formatMark?: (label: React.ReactNode) => React.ReactNode;\n /**\n * A formatting function used to add format to the tooltip in the track,\n * the function receives the mark text\n */\n formatTooltip?: (label: React.ReactNode) => React.ReactNode;\n /**\n * If `true` the knobs can't have the same value, if `false` knobs can have the same value.\n */\n noOverlap?: boolean;\n /**\n * Attributes applied to the input element.\n */\n inputProps?: HvInputProps[];\n /**\n * Attributes applied to the knob element.\n */\n knobProps?: React.HTMLAttributes<HTMLDivElement>[];\n /**\n * The classes object to be applied into the root object.\n */\n classes?: HvSliderClasses;\n}\n\n/**\n * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.\n */\nexport const HvSlider = (props: HvSliderProps) => {\n const {\n id,\n className,\n name,\n label,\n status,\n statusMessage,\n disabled,\n classes: classesProp,\n sliderProps,\n knobProps,\n inputProps,\n requiredMessage = \"The value is required\",\n noOverlap = true,\n hideInput = false,\n required = false,\n readOnly = false,\n markProperties = [],\n defaultValues = [undefined],\n values: valuesProp = [],\n knobProperties: knobPropertiesProp,\n \"aria-errormessage\": ariaErrorMessage,\n maxPointValue = 100,\n minPointValue = 0,\n divisionQuantity = 100,\n markStep = 20,\n markDigits = 0,\n formatMark,\n onChange,\n onBlur,\n onBeforeChange,\n onAfterChange,\n formatTooltip,\n ...others\n } = useDefaultProps(\"HvSlider\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n // Miscellaneous state\n const hasLabel = label != null;\n\n // Signals that the user has manually edited the input value\n const isDirty = useRef(false);\n\n const elementId = useUniqueId(id, \"hvSlider\");\n\n const sliderInputId = setId(elementId, \"input\");\n\n const stepValue: number = useMemo(\n () => calculateStepValue(maxPointValue, minPointValue, divisionQuantity),\n [divisionQuantity, maxPointValue, minPointValue]\n );\n\n const inverseStepValue: number = 1 / stepValue;\n\n const marks = useMemo(\n () =>\n createMark(\n markProperties,\n markStep,\n divisionQuantity,\n minPointValue,\n stepValue,\n markDigits,\n !!disabled,\n sliderStyles,\n formatMark\n ),\n [\n disabled,\n divisionQuantity,\n formatMark,\n markDigits,\n markProperties,\n markStep,\n minPointValue,\n stepValue,\n ]\n );\n\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const isSingle: boolean = useMemo(\n () => isSingleSlider(valuesProp, defaultValues),\n [defaultValues, valuesProp]\n );\n\n const value: number[] | undefined = useMemo(\n () =>\n valuesProp?.length > 0\n ? knobsValuesToKnobsPositions(\n valuesProp,\n inverseStepValue,\n minPointValue\n )\n : undefined,\n [inverseStepValue, minPointValue, valuesProp]\n );\n\n const defaultKnobsPositions: number[] = useMemo(\n () =>\n knobsValuesToKnobsPositions(\n defaultValues,\n inverseStepValue,\n minPointValue\n ),\n [defaultValues, inverseStepValue, minPointValue]\n );\n\n const [knobsPositions, setKnobsPositions] = useControlled(\n value,\n defaultKnobsPositions\n );\n\n // Validation related state\n const { arrayStatus, arrayDefaultStatus } = useMemo(\n () => convertStatusToArray(knobsPositions.length, status),\n [knobsPositions.length, status]\n );\n\n const [validationStatus, setValidationState] = useControlled(\n arrayStatus,\n arrayDefaultStatus\n );\n\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\"\n );\n\n const [isDraggingTrack, setIsDraggingTrack] = useState<boolean>(false);\n\n const knobProperties: HvKnobProperty[] = generateDefaultKnobProperties(\n knobsPositions.length,\n disabled,\n knobPropertiesProp\n );\n\n const rangesCount = knobProperties.length - 1;\n\n const trackStyles = createTrackStyles(knobProperties, sliderStyles);\n\n const knobStyles = createKnobStyles(knobProperties, sliderStyles);\n\n const performValidation = useCallback(() => {\n let invalid: boolean = false;\n\n const newValidationState = knobsPositions.map((position) => {\n if (position == null || Number.isNaN(position)) {\n invalid = true;\n return validationStates.invalid;\n }\n return validationStates.valid;\n });\n\n setValidationState([...newValidationState]);\n\n if (invalid) {\n setValidationMessage(requiredMessage);\n return;\n }\n\n setValidationMessage(\"\");\n }, [\n knobsPositions,\n requiredMessage,\n setValidationMessage,\n setValidationState,\n ]);\n\n useEffect(() => {\n const stepVl = calculateStepValue(\n maxPointValue,\n minPointValue,\n divisionQuantity\n );\n\n const inverseStepVl = 1 / stepVl;\n\n if (valuesProp?.length > 0) {\n setKnobsPositions(\n knobsValuesToKnobsPositions(\n valuesProp.length > 0 ? valuesProp : defaultValues,\n inverseStepVl,\n minPointValue\n )\n );\n }\n }, [\n defaultValues,\n divisionQuantity,\n maxPointValue,\n minPointValue,\n setKnobsPositions,\n valuesProp,\n ]);\n\n useEffect(() => {\n if (!isDirty.current) {\n // Skip validation if currently focused or if empty and\n // the user never manually edited the input value\n return;\n }\n\n performValidation();\n }, [knobsPositions, requiredMessage, performValidation]);\n\n const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n if ((event.target as HTMLDivElement).className.includes(\"track\")) {\n setIsDraggingTrack(true);\n }\n };\n\n const onMouseUpHandler = () => {\n setIsDraggingTrack(false);\n };\n\n /**\n * Generates an object which posses the current value and position of the knobs.\n *\n * @param {Array} knobsCurrentPosition - An array containing the current positions of the knobs.\n * @returns {Object} - An object with the positions and values of the knobs.\n * @memberof HvSlider\n */\n const generateKnobsPositionAndValues = (\n knobsCurrentPosition: number[]\n ): { knobsPosition: number[]; knobsValues: number[] } => {\n const newKnobsPosition: number[] = knobsCurrentPosition.slice();\n const knobsValues: number[] = [];\n\n let duplicatedValue: number | null = null;\n\n const findDuplicated: number[] = newKnobsPosition.filter(\n (item, index) => newKnobsPosition.indexOf(item) !== index\n );\n\n if (noOverlap && findDuplicated.length > 0) {\n [duplicatedValue] = findDuplicated;\n }\n\n newKnobsPosition.forEach((position, index, array) => {\n const newArray: number[] = array;\n let newPosition: number = position;\n\n if (noOverlap && newPosition === duplicatedValue) {\n const previousValue = knobsPositions[index];\n if (previousValue !== newPosition) {\n newPosition += newPosition > previousValue ? -1 : 1;\n newArray[index] = newPosition;\n }\n }\n\n knobsValues[index] = knobsPositionToScaledValue(\n newPosition,\n minPointValue,\n stepValue\n );\n }, this);\n\n return {\n knobsPosition: newKnobsPosition,\n knobsValues,\n };\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n const knobs = generateKnobsPositionAndValues(knobsPositions);\n\n performValidation();\n\n onBlur?.(event, knobs.knobsValues, status);\n };\n\n /**\n * Function executed while the knobs changes.\n *\n * executes the callback provided by the user with the values and position of the knobs,\n * also lock the value of the knob in case one is fixed.\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onChangeHandler = (knobsPosition: number[]) => {\n isDirty.current = true;\n\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n knobProperties.forEach((knobProperty, index) => {\n if (knobProperty.fixed) {\n knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(\n defaultValues[index],\n minPointValue,\n inverseStepValue\n );\n }\n });\n\n if (disabled || readOnly) return;\n\n onChange?.(knobs.knobsValues);\n\n setKnobsPositions(knobs.knobsPosition);\n };\n\n const onInputChangeHandler = (inputValues: number[], index: number) => {\n let newKnobPositions = knobsValuesToKnobsPositions(\n inputValues,\n inverseStepValue,\n minPointValue\n );\n\n newKnobPositions = ensureValuesConsistency(newKnobPositions, index);\n\n onChangeHandler(newKnobPositions);\n };\n\n /**\n * Function executed before a change.\n *\n * executes the callback provided by the user with the values and position of the knobs\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onBeforeChangeHandler = (knobsPosition: number[]) => {\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n onBeforeChange?.(knobs.knobsValues);\n };\n\n /**\n * Function executed after a change.\n *\n * executes the callback provided by the user with the values and position of the knobs\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onAfterChangeHandler = (knobsPosition: number[]) => {\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n onAfterChange?.(knobs.knobsValues);\n };\n\n /**\n * Function used to create a custom knob for the slider.\n *\n * TODO: This should be isolated because is creating a sub component,\n * but there were some problems regarding the underlying component losing\n * references of the handlers disabling the focus.\n *\n * @param {Object} props - An object containing the properties of the knobs.\n * @memberof HvSlider\n */\n const createKnob = (knobNode, params) => {\n const { value: knobValue, dragging, index } = params;\n const { className: knobClassName, style, ...restProps } = knobNode.props;\n const scaledKnobValue = knobsPositionToScaledValue(\n knobValue,\n minPointValue,\n stepValue\n ).toFixed(markDigits);\n if (dragging) {\n style.backgroundColor = knobProperties[index]?.dragColor;\n } else {\n style.backgroundColor = knobProperties[index]?.color;\n }\n\n const isEmpty =\n Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;\n const handleId = setId(elementId, \"knob\");\n const indexedHandleId = setId(handleId, index);\n\n return (\n <div\n key={index}\n className={cx({\n [classes.handleContainer]: !!(!disabled && !isEmpty),\n [classes.handleContainerDisabled]: !!(disabled && !isEmpty),\n [classes.handleHiddenContainer]: isEmpty || readOnly,\n })}\n >\n <Tooltip\n prefixCls=\"rc-slider-tooltip\"\n overlay={formatTooltip?.(scaledKnobValue) || scaledKnobValue}\n visible={dragging}\n placement=\"top\"\n overlayClassName={classes.sliderTooltip}\n getTooltipContainer={() =>\n document.getElementById(indexedHandleId || \"\") as HTMLElement\n }\n >\n <div\n id={indexedHandleId}\n style={style}\n className={cx(knobClassName, classes.handle)}\n {...restProps}\n aria-label={`${label}-knob-${index}`}\n aria-valuenow={knobsPositionToScaledValue(\n knobValue,\n minPointValue,\n stepValue\n )}\n aria-valuemin={minPointValue}\n aria-valuemax={maxPointValue}\n {...knobProps?.[index]}\n />\n </Tooltip>\n </div>\n );\n };\n\n return (\n <HvFormElement\n className={cx(\n classes.root,\n {\n [classes.trackStandBy]:\n !readOnly && !disabled && !isSingle && !isDraggingTrack,\n [classes.trackDragging]:\n !readOnly && !disabled && !isSingle && isDraggingTrack,\n [classes.rootDisabled]: !!disabled,\n },\n className\n )}\n id={id}\n name={name}\n status={statusArrayToFormStatus(validationStatus)}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n onMouseDown={onMouseDownHandler}\n onMouseUp={onMouseUpHandler}\n onBlur={onBlurHandler}\n {...others}\n >\n {(hasLabel || !hideInput) && (\n <div\n className={cx(classes.labelContainer, {\n [classes.labelIncluded]: hasLabel,\n [classes.onlyInput]: !hasLabel,\n })}\n >\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n className={classes.label}\n htmlFor={setId(elementId, \"slider\")}\n label={label}\n />\n )}\n\n {!hideInput && (\n <HvSliderInput\n id={sliderInputId}\n label={label}\n values={knobsPositionsToKnobsValues(\n knobsPositions,\n stepValue,\n minPointValue\n )}\n onChange={onInputChangeHandler}\n status={validationStatus}\n disabled={disabled}\n readOnly={readOnly}\n markDigits={markDigits}\n inputProps={inputProps}\n />\n )}\n </div>\n )}\n\n <div className={cx(classes.sliderBase, classes.sliderContainer)}>\n {isSingle && (\n <Slider\n handleRender={createKnob}\n className={classes.sliderRoot}\n min={0}\n max={divisionQuantity}\n step={1}\n marks={marks}\n dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n onChange={(singleValue) =>\n onChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onBeforeChange={(singleValue) =>\n onBeforeChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onAfterChange={(singleValue) =>\n onAfterChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n value={knobsPositions.length > 0 ? knobsPositions[0] : undefined}\n allowCross={false}\n disabled={disabled}\n count={rangesCount}\n railStyle={sliderStyles.rail}\n handleStyle={knobStyles.knobInner}\n trackStyle={trackStyles}\n {...sliderProps}\n />\n )}\n {!isSingle && (\n <Slider\n range\n handleRender={createKnob}\n className={cx(classes.sliderRoot, {\n [classes.rootRange]: !isSingle,\n })}\n min={0}\n max={divisionQuantity}\n step={1}\n marks={marks}\n disabled={disabled}\n dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n onChange={(singleValue) =>\n onChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onBeforeChange={(singleValue) =>\n onBeforeChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onAfterChange={(singleValue) =>\n onAfterChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n value={knobsPositions.length > 0 ? [...knobsPositions] : undefined}\n allowCross={false}\n count={rangesCount}\n railStyle={sliderStyles.rail}\n handleStyle={knobStyles.knobInner}\n trackStyle={trackStyles}\n draggableTrack={!readOnly && !isSingle}\n {...sliderProps}\n />\n )}\n </div>\n\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["HvSlider","props","id","className","name","label","status","statusMessage","disabled","classes","classesProp","sliderProps","knobProps","inputProps","requiredMessage","noOverlap","hideInput","required","readOnly","markProperties","defaultValues","undefined","values","valuesProp","knobProperties","knobPropertiesProp","ariaErrorMessage","maxPointValue","minPointValue","divisionQuantity","markStep","markDigits","formatMark","onChange","onBlur","onBeforeChange","onAfterChange","formatTooltip","others","useDefaultProps","cx","useClasses","hasLabel","isDirty","useRef","elementId","useUniqueId","sliderInputId","setId","stepValue","useMemo","calculateStepValue","inverseStepValue","marks","createMark","sliderStyles","canShowError","isSingle","isSingleSlider","value","length","knobsValuesToKnobsPositions","defaultKnobsPositions","knobsPositions","setKnobsPositions","useControlled","arrayStatus","arrayDefaultStatus","convertStatusToArray","validationStatus","setValidationState","validationMessage","setValidationMessage","isDraggingTrack","setIsDraggingTrack","useState","generateDefaultKnobProperties","rangesCount","trackStyles","createTrackStyles","knobStyles","createKnobStyles","performValidation","useCallback","invalid","newValidationState","map","position","Number","isNaN","validationStates","valid","useEffect","stepVl","inverseStepVl","current","onMouseDownHandler","event","target","includes","onMouseUpHandler","generateKnobsPositionAndValues","knobsCurrentPosition","newKnobsPosition","slice","knobsValues","duplicatedValue","findDuplicated","filter","item","index","indexOf","forEach","array","newArray","newPosition","previousValue","knobsPositionToScaledValue","knobsPosition","onBlurHandler","knobs","onChangeHandler","knobProperty","fixed","scaledValueToKnobsPositionValue","onInputChangeHandler","inputValues","newKnobPositions","ensureValuesConsistency","onBeforeChangeHandler","onAfterChangeHandler","createKnob","knobNode","params","knobValue","dragging","knobClassName","style","restProps","scaledKnobValue","toFixed","backgroundColor","dragColor","color","isEmpty","handleId","indexedHandleId","handleContainer","handleContainerDisabled","handleHiddenContainer","sliderTooltip","document","getElementById","handle","root","trackStandBy","trackDragging","rootDisabled","statusArrayToFormStatus","labelContainer","labelIncluded","onlyInput","knobsPositionsToKnobsValues","sliderBase","sliderContainer","sliderRoot","dotDisabled","dot","singleValue","Array","isArray","rail","knobInner","rootRange","error"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Slider.js","sources":["../../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import Slider, { SliderProps } from \"rc-slider\";\n\nimport React, {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport Tooltip from \"rc-tooltip\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { HvInputProps } from \"@core/components/Input\";\nimport {\n HvFormElement,\n HvFormStatus,\n HvLabel,\n HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { sliderStyles, staticClasses, useClasses } from \"./Slider.styles\";\nimport {\n calculateStepValue,\n convertStatusToArray,\n createKnobStyles,\n createMark,\n createTrackStyles,\n ensureValuesConsistency,\n generateDefaultKnobProperties,\n isSingleSlider,\n knobsPositionsToKnobsValues,\n knobsPositionToScaledValue,\n knobsValuesToKnobsPositions,\n scaledValueToKnobsPositionValue,\n statusArrayToFormStatus,\n} from \"./utils\";\nimport { HvSliderInput } from \"./SliderInput/SliderInput\";\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\n\nexport { staticClasses as sliderClasses };\n\nexport type HvSliderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvSliderProps\n extends HvBaseProps<HTMLDivElement, \"onChange\" | \"onBlur\"> {\n /**\n * The slider name.\n */\n name?: string;\n /**\n * The label of the slider.\n *\n * If not provided, an aria-label or aria-labelledby must be inputted via sliderProps.\n */\n label?: React.ReactNode;\n /**\n * Indicates that the slider is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the slider is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that user slider is required on the form element.\n */\n required?: boolean;\n /**\n * What message to render when the value is required.\n */\n requiredMessage?: string;\n /**\n * If `true` the input that controls the slider is hidden.\n */\n hideInput?: boolean;\n /**\n * Attributes applied to the slider element.\n */\n sliderProps?: SliderProps;\n /**\n * The status of the slider element.\n *\n * Valid is correct, invalid is incorrect and standBy means no validations have run.\n *\n * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n * or \"invalid\" after any change to the state.\n */\n status?: HvFormStatus | HvFormStatus[];\n /**\n * The error message to show when `status` is \"invalid\".\n */\n statusMessage?: React.ReactNode;\n /**\n * The values array to apply to the component\n */\n values?: number[];\n /**\n * The default values array to apply to the component\n */\n defaultValues?: (number | undefined)[];\n /**\n * The object used to set the knob properties,\n * for every item in the array a new knob will be created.\n */\n knobProperties?: HvKnobProperty[];\n /**\n * The object used to set the mark properties individually.\n */\n markProperties?: HvMarkProperty[];\n /**\n * The function executed before a change will occur in the slider.\n */\n onBeforeChange?: (value: number[]) => void;\n /**\n * The function executed while a change is occurring in the slider.\n */\n onChange?: (value: number[]) => void;\n /**\n * The function executed after a change ocurred in the slider.\n */\n onAfterChange?: (value: number[]) => void;\n /**\n * The function executed after a blur ocurred in the slider.\n */\n onBlur?: (\n event: React.FocusEvent,\n knobsValues: number[],\n status?: HvFormStatus | HvFormStatus[]\n ) => void;\n /**\n * The separation in points between marks.\n * example: if 10 divisions and a markstep of 2 there will be 5 marks.\n */\n markStep?: number;\n /**\n * How many subdivisions there are in the slider.\n */\n divisionQuantity?: number;\n /**\n * The value of the first point in the slider from left to right.\n */\n minPointValue?: number;\n /**\n * The value of the last point in the slider from left to right.\n */\n maxPointValue?: number;\n /**\n * The nax number of decimals if no format function is applied\n */\n markDigits?: number;\n /**\n * A formatting function used to add format to the marks in the track,\n * the function receives the mark text\n */\n formatMark?: (label: React.ReactNode) => React.ReactNode;\n /**\n * A formatting function used to add format to the tooltip in the track,\n * the function receives the mark text\n */\n formatTooltip?: (label: React.ReactNode) => React.ReactNode;\n /**\n * If `true` the knobs can't have the same value, if `false` knobs can have the same value.\n */\n noOverlap?: boolean;\n /**\n * Attributes applied to the input element.\n */\n inputProps?: HvInputProps[];\n /**\n * Attributes applied to the knob element.\n */\n knobProps?: React.HTMLAttributes<HTMLDivElement>[];\n /**\n * The classes object to be applied into the root object.\n */\n classes?: HvSliderClasses;\n}\n\n/**\n * Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.\n */\nexport const HvSlider = (props: HvSliderProps) => {\n const {\n id,\n className,\n name,\n label,\n status,\n statusMessage,\n disabled,\n classes: classesProp,\n sliderProps,\n knobProps,\n inputProps,\n requiredMessage = \"The value is required\",\n noOverlap = true,\n hideInput = false,\n required = false,\n readOnly = false,\n markProperties = [],\n defaultValues = [undefined],\n values: valuesProp = [],\n knobProperties: knobPropertiesProp,\n \"aria-errormessage\": ariaErrorMessage,\n maxPointValue = 100,\n minPointValue = 0,\n divisionQuantity = 100,\n markStep = 20,\n markDigits = 0,\n formatMark,\n onChange,\n onBlur,\n onBeforeChange,\n onAfterChange,\n formatTooltip,\n ...others\n } = useDefaultProps(\"HvSlider\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n // Miscellaneous state\n const hasLabel = label != null;\n\n // Signals that the user has manually edited the input value\n const isDirty = useRef(false);\n\n const elementId = useUniqueId(id, \"hvSlider\");\n\n const sliderInputId = setId(elementId, \"input\");\n\n const stepValue: number = useMemo(\n () => calculateStepValue(maxPointValue, minPointValue, divisionQuantity),\n [divisionQuantity, maxPointValue, minPointValue]\n );\n\n const inverseStepValue: number = 1 / stepValue;\n\n const marks = useMemo(\n () =>\n createMark(\n markProperties,\n markStep,\n divisionQuantity,\n minPointValue,\n stepValue,\n markDigits,\n !!disabled,\n formatMark\n ),\n [\n disabled,\n divisionQuantity,\n formatMark,\n markDigits,\n markProperties,\n markStep,\n minPointValue,\n stepValue,\n ]\n );\n\n const canShowError =\n ariaErrorMessage == null &&\n ((status !== undefined && statusMessage !== undefined) ||\n (status === undefined && required));\n\n const isSingle: boolean = useMemo(\n () => isSingleSlider(valuesProp, defaultValues),\n [defaultValues, valuesProp]\n );\n\n const value: number[] | undefined = useMemo(\n () =>\n valuesProp?.length > 0\n ? knobsValuesToKnobsPositions(\n valuesProp,\n inverseStepValue,\n minPointValue\n )\n : undefined,\n [inverseStepValue, minPointValue, valuesProp]\n );\n\n const defaultKnobsPositions: number[] = useMemo(\n () =>\n knobsValuesToKnobsPositions(\n defaultValues,\n inverseStepValue,\n minPointValue\n ),\n [defaultValues, inverseStepValue, minPointValue]\n );\n\n const [knobsPositions, setKnobsPositions] = useControlled(\n value,\n defaultKnobsPositions\n );\n\n // Validation related state\n const { arrayStatus, arrayDefaultStatus } = useMemo(\n () => convertStatusToArray(knobsPositions.length, status),\n [knobsPositions.length, status]\n );\n\n const [validationStatus, setValidationState] = useControlled(\n arrayStatus,\n arrayDefaultStatus\n );\n\n const [validationMessage, setValidationMessage] = useControlled(\n statusMessage,\n \"\"\n );\n\n const [isDraggingTrack, setIsDraggingTrack] = useState<boolean>(false);\n\n const knobProperties: HvKnobProperty[] = generateDefaultKnobProperties(\n knobsPositions.length,\n disabled,\n knobPropertiesProp\n );\n\n const rangesCount = knobProperties.length - 1;\n\n const trackStyles = createTrackStyles(knobProperties);\n\n const knobStyles = createKnobStyles(knobProperties);\n\n const performValidation = useCallback(() => {\n let invalid: boolean = false;\n\n const newValidationState = knobsPositions.map((position) => {\n if (position == null || Number.isNaN(position)) {\n invalid = true;\n return validationStates.invalid;\n }\n return validationStates.valid;\n });\n\n setValidationState([...newValidationState]);\n\n if (invalid) {\n setValidationMessage(requiredMessage);\n return;\n }\n\n setValidationMessage(\"\");\n }, [\n knobsPositions,\n requiredMessage,\n setValidationMessage,\n setValidationState,\n ]);\n\n useEffect(() => {\n const stepVl = calculateStepValue(\n maxPointValue,\n minPointValue,\n divisionQuantity\n );\n\n const inverseStepVl = 1 / stepVl;\n\n if (valuesProp?.length > 0) {\n setKnobsPositions(\n knobsValuesToKnobsPositions(\n valuesProp.length > 0 ? valuesProp : defaultValues,\n inverseStepVl,\n minPointValue\n )\n );\n }\n }, [\n defaultValues,\n divisionQuantity,\n maxPointValue,\n minPointValue,\n setKnobsPositions,\n valuesProp,\n ]);\n\n useEffect(() => {\n if (!isDirty.current) {\n // Skip validation if currently focused or if empty and\n // the user never manually edited the input value\n return;\n }\n\n performValidation();\n }, [knobsPositions, requiredMessage, performValidation]);\n\n const onMouseDownHandler = (event: React.MouseEvent<HTMLDivElement>) => {\n if ((event.target as HTMLDivElement).className.includes(\"track\")) {\n setIsDraggingTrack(true);\n }\n };\n\n const onMouseUpHandler = () => {\n setIsDraggingTrack(false);\n };\n\n /**\n * Generates an object which posses the current value and position of the knobs.\n *\n * @param {Array} knobsCurrentPosition - An array containing the current positions of the knobs.\n * @returns {Object} - An object with the positions and values of the knobs.\n * @memberof HvSlider\n */\n const generateKnobsPositionAndValues = (\n knobsCurrentPosition: number[]\n ): { knobsPosition: number[]; knobsValues: number[] } => {\n const newKnobsPosition: number[] = knobsCurrentPosition.slice();\n const knobsValues: number[] = [];\n\n let duplicatedValue: number | null = null;\n\n const findDuplicated: number[] = newKnobsPosition.filter(\n (item, index) => newKnobsPosition.indexOf(item) !== index\n );\n\n if (noOverlap && findDuplicated.length > 0) {\n [duplicatedValue] = findDuplicated;\n }\n\n newKnobsPosition.forEach((position, index, array) => {\n const newArray: number[] = array;\n let newPosition: number = position;\n\n if (noOverlap && newPosition === duplicatedValue) {\n const previousValue = knobsPositions[index];\n if (previousValue !== newPosition) {\n newPosition += newPosition > previousValue ? -1 : 1;\n newArray[index] = newPosition;\n }\n }\n\n knobsValues[index] = knobsPositionToScaledValue(\n newPosition,\n minPointValue,\n stepValue\n );\n }, this);\n\n return {\n knobsPosition: newKnobsPosition,\n knobsValues,\n };\n };\n\n const onBlurHandler = (event: React.FocusEvent) => {\n const knobs = generateKnobsPositionAndValues(knobsPositions);\n\n performValidation();\n\n onBlur?.(event, knobs.knobsValues, status);\n };\n\n /**\n * Function executed while the knobs changes.\n *\n * executes the callback provided by the user with the values and position of the knobs,\n * also lock the value of the knob in case one is fixed.\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onChangeHandler = (knobsPosition: number[]) => {\n isDirty.current = true;\n\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n knobProperties.forEach((knobProperty, index) => {\n if (knobProperty.fixed) {\n knobs.knobsPosition[index] = scaledValueToKnobsPositionValue(\n defaultValues[index],\n minPointValue,\n inverseStepValue\n );\n }\n });\n\n if (disabled || readOnly) return;\n\n onChange?.(knobs.knobsValues);\n\n setKnobsPositions(knobs.knobsPosition);\n };\n\n const onInputChangeHandler = (inputValues: number[], index: number) => {\n let newKnobPositions = knobsValuesToKnobsPositions(\n inputValues,\n inverseStepValue,\n minPointValue\n );\n\n newKnobPositions = ensureValuesConsistency(newKnobPositions, index);\n\n onChangeHandler(newKnobPositions);\n };\n\n /**\n * Function executed before a change.\n *\n * executes the callback provided by the user with the values and position of the knobs\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onBeforeChangeHandler = (knobsPosition: number[]) => {\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n onBeforeChange?.(knobs.knobsValues);\n };\n\n /**\n * Function executed after a change.\n *\n * executes the callback provided by the user with the values and position of the knobs\n *\n * @param {Array} knobsPosition - An array containing the current positions of the knobs.\n * @memberof HvSlider\n */\n const onAfterChangeHandler = (knobsPosition: number[]) => {\n const knobs = generateKnobsPositionAndValues(knobsPosition);\n\n onAfterChange?.(knobs.knobsValues);\n };\n\n /**\n * Function used to create a custom knob for the slider.\n *\n * TODO: This should be isolated because is creating a sub component,\n * but there were some problems regarding the underlying component losing\n * references of the handlers disabling the focus.\n *\n * @param {Object} props - An object containing the properties of the knobs.\n * @memberof HvSlider\n */\n const createKnob = (knobNode, params) => {\n const { value: knobValue, dragging, index } = params;\n const { className: knobClassName, style, ...restProps } = knobNode.props;\n const scaledKnobValue = knobsPositionToScaledValue(\n knobValue,\n minPointValue,\n stepValue\n ).toFixed(markDigits);\n if (dragging) {\n style.backgroundColor = knobProperties[index]?.dragColor;\n } else {\n style.backgroundColor = knobProperties[index]?.color;\n }\n\n const isEmpty =\n Number.isNaN(knobsPositions[index]) || knobsPositions[index] == null;\n const handleId = setId(elementId, \"knob\");\n const indexedHandleId = setId(handleId, index);\n\n return (\n <div\n key={index}\n className={cx({\n [classes.handleContainer]: !!(!disabled && !isEmpty),\n [classes.handleContainerDisabled]: !!(disabled && !isEmpty),\n [classes.handleHiddenContainer]: isEmpty || readOnly,\n })}\n >\n <Tooltip\n prefixCls=\"rc-slider-tooltip\"\n overlay={formatTooltip?.(scaledKnobValue) || scaledKnobValue}\n visible={dragging}\n placement=\"top\"\n overlayClassName={classes.sliderTooltip}\n getTooltipContainer={() =>\n document.getElementById(indexedHandleId || \"\") as HTMLElement\n }\n >\n <div\n id={indexedHandleId}\n style={style}\n className={cx(knobClassName, classes.handle)}\n {...restProps}\n aria-label={`${label}-knob-${index}`}\n aria-valuenow={knobsPositionToScaledValue(\n knobValue,\n minPointValue,\n stepValue\n )}\n aria-valuemin={minPointValue}\n aria-valuemax={maxPointValue}\n {...knobProps?.[index]}\n />\n </Tooltip>\n </div>\n );\n };\n\n return (\n <HvFormElement\n className={cx(\n classes.root,\n {\n [classes.trackStandBy]:\n !readOnly && !disabled && !isSingle && !isDraggingTrack,\n [classes.trackDragging]:\n !readOnly && !disabled && !isSingle && isDraggingTrack,\n [classes.rootDisabled]: !!disabled,\n },\n className\n )}\n id={id}\n name={name}\n status={statusArrayToFormStatus(validationStatus)}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n onMouseDown={onMouseDownHandler}\n onMouseUp={onMouseUpHandler}\n onBlur={onBlurHandler}\n {...others}\n >\n {(hasLabel || !hideInput) && (\n <div\n className={cx(classes.labelContainer, {\n [classes.labelIncluded]: hasLabel,\n [classes.onlyInput]: !hasLabel,\n })}\n >\n {hasLabel && (\n <HvLabel\n id={setId(elementId, \"label\")}\n className={classes.label}\n htmlFor={setId(elementId, \"slider\")}\n label={label}\n />\n )}\n\n {!hideInput && (\n <HvSliderInput\n id={sliderInputId}\n label={label}\n values={knobsPositionsToKnobsValues(\n knobsPositions,\n stepValue,\n minPointValue\n )}\n onChange={onInputChangeHandler}\n status={validationStatus}\n disabled={disabled}\n readOnly={readOnly}\n markDigits={markDigits}\n inputProps={inputProps}\n />\n )}\n </div>\n )}\n\n <div className={cx(classes.sliderBase, classes.sliderContainer)}>\n {isSingle && (\n <Slider\n handleRender={createKnob}\n className={classes.sliderRoot}\n min={0}\n max={divisionQuantity}\n step={1}\n marks={marks}\n dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n onChange={(singleValue) =>\n onChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onBeforeChange={(singleValue) =>\n onBeforeChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onAfterChange={(singleValue) =>\n onAfterChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n value={knobsPositions.length > 0 ? knobsPositions[0] : undefined}\n allowCross={false}\n disabled={disabled}\n count={rangesCount}\n railStyle={sliderStyles.rail}\n handleStyle={knobStyles.knobInner}\n trackStyle={trackStyles}\n {...sliderProps}\n />\n )}\n {!isSingle && (\n <Slider\n range\n handleRender={createKnob}\n className={cx(classes.sliderRoot, {\n [classes.rootRange]: !isSingle,\n })}\n min={0}\n max={divisionQuantity}\n step={1}\n marks={marks}\n disabled={disabled}\n dotStyle={disabled ? sliderStyles.dotDisabled : sliderStyles.dot}\n onChange={(singleValue) =>\n onChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onBeforeChange={(singleValue) =>\n onBeforeChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n onAfterChange={(singleValue) =>\n onAfterChangeHandler(\n Array.isArray(singleValue) ? singleValue : [singleValue]\n )\n }\n value={knobsPositions.length > 0 ? [...knobsPositions] : undefined}\n allowCross={false}\n count={rangesCount}\n railStyle={sliderStyles.rail}\n handleStyle={knobStyles.knobInner}\n trackStyle={trackStyles}\n draggableTrack={!readOnly && !isSingle}\n {...sliderProps}\n />\n )}\n </div>\n\n {canShowError && (\n <HvWarningText\n id={setId(elementId, \"error\")}\n className={classes.error}\n disableBorder\n >\n {validationMessage}\n </HvWarningText>\n )}\n </HvFormElement>\n );\n};\n"],"names":["HvSlider","props","id","className","name","label","status","statusMessage","disabled","classes","classesProp","sliderProps","knobProps","inputProps","requiredMessage","noOverlap","hideInput","required","readOnly","markProperties","defaultValues","undefined","values","valuesProp","knobProperties","knobPropertiesProp","ariaErrorMessage","maxPointValue","minPointValue","divisionQuantity","markStep","markDigits","formatMark","onChange","onBlur","onBeforeChange","onAfterChange","formatTooltip","others","useDefaultProps","cx","useClasses","hasLabel","isDirty","useRef","elementId","useUniqueId","sliderInputId","setId","stepValue","useMemo","calculateStepValue","inverseStepValue","marks","createMark","canShowError","isSingle","isSingleSlider","value","length","knobsValuesToKnobsPositions","defaultKnobsPositions","knobsPositions","setKnobsPositions","useControlled","arrayStatus","arrayDefaultStatus","convertStatusToArray","validationStatus","setValidationState","validationMessage","setValidationMessage","isDraggingTrack","setIsDraggingTrack","useState","generateDefaultKnobProperties","rangesCount","trackStyles","createTrackStyles","knobStyles","createKnobStyles","performValidation","useCallback","invalid","newValidationState","map","position","Number","isNaN","validationStates","valid","useEffect","stepVl","inverseStepVl","current","onMouseDownHandler","event","target","includes","onMouseUpHandler","generateKnobsPositionAndValues","knobsCurrentPosition","newKnobsPosition","slice","knobsValues","duplicatedValue","findDuplicated","filter","item","index","indexOf","forEach","array","newArray","newPosition","previousValue","knobsPositionToScaledValue","knobsPosition","onBlurHandler","knobs","onChangeHandler","knobProperty","fixed","scaledValueToKnobsPositionValue","onInputChangeHandler","inputValues","newKnobPositions","ensureValuesConsistency","onBeforeChangeHandler","onAfterChangeHandler","createKnob","knobNode","params","knobValue","dragging","knobClassName","style","restProps","scaledKnobValue","toFixed","backgroundColor","dragColor","color","isEmpty","handleId","indexedHandleId","handleContainer","handleContainerDisabled","handleHiddenContainer","sliderTooltip","document","getElementById","handle","root","trackStandBy","trackDragging","rootDisabled","statusArrayToFormStatus","labelContainer","labelIncluded","onlyInput","knobsPositionsToKnobsValues","sliderBase","sliderContainer","sliderRoot","sliderStyles","dotDisabled","dot","singleValue","Array","isArray","rail","knobInner","rootRange","error"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.styles.js","sources":["../../../../src/components/Slider/Slider.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { CSSProperties } from \"react\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nimport base from \"./base\";\n\nconst dot: CSSProperties = {\n position: \"absolute\",\n bottom: \"-1px\",\n marginLeft: \"0px\",\n width: \"1px\",\n height: \"4px\",\n border: \"none\",\n borderRadius: \"0%\",\n backgroundColor: theme.colors.atmo4,\n cursor: \"pointer\",\n verticalAlign: \"middle\",\n zIndex: \"-3\",\n};\n\nconst dragSquare: CSSProperties = {\n cursor: \"grab\",\n width: \"calc(100% - 40px)\",\n left: \"20px\",\n height: \"27px\",\n position: \"absolute\",\n top: \"-12px\",\n content: \"''\",\n background: \"transparent\",\n borderTop: `12px solid ${theme.slider.dragBarColor}`,\n borderBottom: `12px solid ${theme.slider.dragBarColor}`,\n zIndex: \"-2\",\n};\n\nconst ring: CSSProperties = {\n width: \"32px\",\n height: \"32px\",\n borderRadius: \"50%\",\n border: `9px solid ${theme.slider.ringColor}`,\n opacity: theme.slider.ringOpacity,\n content: \"''\",\n position: \"absolute\",\n top: \"-10px\",\n left: \"-10px\",\n};\n\nconst border: CSSProperties = {\n width: \"20px\",\n height: \"20px\",\n borderRadius: \"50%\",\n border: `2px solid ${theme.colors.atmo1}`,\n content: \"''\",\n position: \"absolute\",\n top: \"-4px\",\n left: \"-4px\",\n};\n\nexport interface SliderStyles {\n disabledMark: CSSProperties;\n mark: CSSProperties;\n dotDisabled: CSSProperties;\n dot: CSSProperties;\n knobInner: CSSProperties;\n knobOuter: CSSProperties;\n knobHidden: CSSProperties;\n knobHiddenLast: CSSProperties;\n track: CSSProperties;\n rail: CSSProperties;\n}\n\nexport const sliderStyles: SliderStyles = {\n mark: {\n ...(theme.typography.caption1 as CSSProperties),\n fontFamily: theme.fontFamily.body,\n top: \"-2px\",\n zIndex: -1,\n },\n disabledMark: {\n ...(theme.typography.caption1 as CSSProperties),\n fontFamily: theme.fontFamily.body,\n color: `${theme.colors.secondary_60}`,\n cursor: \"not-allowed\",\n top: \"-2px\",\n },\n dot: {\n ...dot,\n },\n dotDisabled: {\n ...dot,\n cursor: \"not-allowed\",\n },\n knobHidden: { display: \"none\" },\n knobHiddenLast: {\n borderColor: \"transparent\",\n height: \"3px\",\n width: \"2px\",\n marginLeft: \"-1px\",\n border: \"none\",\n borderRadius: \"0\",\n marginTop: \"0px\",\n left: \"100%\",\n touchAction: \"none\",\n cursor: \"default\",\n },\n knobInner: {\n borderColor: \"transparent\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.secondary,\n width: \"16px\",\n height: \"16px\",\n },\n knobOuter: {\n position: \"relative\",\n borderColor: \"transparent\",\n borderRadius: \"50%\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.atmo4,\n width: \"32px\",\n height: \"32px\",\n top: \"-80%\",\n left: \"-80%\",\n zIndex: \"-1\",\n },\n track: {\n backgroundColor: theme.colors.secondary,\n height: \"3px\",\n zIndex: \"-1\",\n marginTop: \"-1px\",\n },\n rail: { backgroundColor: theme.colors.atmo4, height: \"1px\", zIndex: \"-3\" },\n};\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSlider\", {\n sliderBase: { ...(base as CSSProperties) },\n rootDisabled: {\n cursor: \"not-allowed\",\n \"&& .rc-slider-disabled\": {\n background: \"transparent\",\n },\n },\n sliderContainer: { marginBottom: \"18px\", padding: \"0 23px\" },\n error: { padding: \"0 8px\" },\n trackDragging: {\n cursor: \"grabbing\",\n\n \"&& .rc-slider-track\": {\n \"&::before\": {\n ...dragSquare,\n cursor: \"grabbing\",\n },\n },\n },\n trackStandBy: {\n \"&& .rc-slider-track\": {\n \"&:hover\": {\n \"&::before\": {\n ...dragSquare,\n },\n },\n },\n },\n sliderRoot: { zIndex: 0 },\n rootRange: {},\n handleContainer: {\n \"&& .rc-slider-handle\": {\n cursor: \"pointer\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"grab\",\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n \"&:hover\": {\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n\n // Note about the usage of `!important below`: the way the rc-slider allows us to\n // style the knobs is through inline styles. This means that the `box-shadow`, which\n // is an inline style and is set to `none` to prevent the default rc-slider style to\n // show, can't be overridden for the focus scenario unless we use the `!important` flag.\n \"&:focus-visible\": {\n ...outlineStyles,\n boxShadow: \"0 0 0 3px #52A8EC, 0 0 0 7px rgba(29,155,209,.3)!important\",\n \"&::after\": {\n ...border,\n },\n },\n },\n },\n handle: {},\n handleContainerDisabled: {\n \"&& .rc-slider-handle\": {\n cursor: \"not-allowed\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"not-allowed\",\n },\n \"&:hover\": {\n cursor: \"not-allowed\",\n },\n },\n },\n handleHiddenContainer: { display: \"none\" },\n labelContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n marginBottom: \"12px\",\n marginLeft: \"20px\",\n marginRight: \"20px\",\n },\n labelIncluded: { justifyContent: \"space-between\" },\n onlyInput: { justifyContent: \"flex-end\" },\n label: {},\n root: {},\n sliderTooltip: {\n \"&& .rc-slider-tooltip-inner\": {\n background: theme.colors.atmo1,\n borderRadius: 0,\n maxWidth: \"532px\",\n height: \"100%\",\n padding: theme.space.sm,\n ...theme.typography.body,\n fontFamily: theme.fontFamily.body,\n boxShadow: \"none\",\n },\n\n \"&& .rc-slider-tooltip-arrow\": {\n visibility: \"hidden\",\n },\n },\n});\n"],"names":["dot","position","bottom","marginLeft","width","height","border","borderRadius","backgroundColor","theme","colors","atmo4","cursor","verticalAlign","zIndex","dragSquare","left","top","content","background","borderTop","slider","dragBarColor","borderBottom","ring","ringColor","opacity","ringOpacity","atmo1","sliderStyles","mark","typography","caption1","fontFamily","body","disabledMark","color","secondary_60","dotDisabled","knobHidden","display","knobHiddenLast","borderColor","marginTop","touchAction","knobInner","boxShadow","secondary","knobOuter","track","rail","staticClasses","useClasses","createClasses","sliderBase","base","rootDisabled","sliderContainer","marginBottom","padding","error","trackDragging","trackStandBy","sliderRoot","rootRange","handleContainer","outlineStyles","handle","handleContainerDisabled","handleHiddenContainer","labelContainer","alignItems","justifyContent","marginRight","labelIncluded","onlyInput","label","root","sliderTooltip","maxWidth","space","sm","visibility"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Slider.styles.js","sources":["../../../../src/components/Slider/Slider.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { CSSProperties } from \"react\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nimport base from \"./base\";\n\nconst dot: CSSProperties = {\n position: \"absolute\",\n bottom: \"-1px\",\n marginLeft: \"0px\",\n width: \"1px\",\n height: \"4px\",\n border: \"none\",\n borderRadius: \"0%\",\n backgroundColor: theme.colors.atmo4,\n cursor: \"pointer\",\n verticalAlign: \"middle\",\n zIndex: \"-3\",\n};\n\nconst dragSquare: CSSProperties = {\n cursor: \"grab\",\n width: \"calc(100% - 40px)\",\n left: \"20px\",\n height: \"27px\",\n position: \"absolute\",\n top: \"-12px\",\n content: \"''\",\n background: \"transparent\",\n borderTop: `12px solid ${theme.slider.dragBarColor}`,\n borderBottom: `12px solid ${theme.slider.dragBarColor}`,\n zIndex: \"-2\",\n};\n\nconst ring: CSSProperties = {\n width: \"32px\",\n height: \"32px\",\n borderRadius: \"50%\",\n border: `9px solid ${theme.slider.ringColor}`,\n opacity: theme.slider.ringOpacity,\n content: \"''\",\n position: \"absolute\",\n top: \"-10px\",\n left: \"-10px\",\n};\n\nconst border: CSSProperties = {\n width: \"20px\",\n height: \"20px\",\n borderRadius: \"50%\",\n border: `2px solid ${theme.colors.atmo1}`,\n content: \"''\",\n position: \"absolute\",\n top: \"-4px\",\n left: \"-4px\",\n};\n\nexport const sliderStyles = {\n mark: {\n ...theme.typography.caption1,\n fontFamily: theme.fontFamily.body,\n top: \"-2px\",\n zIndex: -1,\n },\n disabledMark: {\n ...theme.typography.caption1,\n fontFamily: theme.fontFamily.body,\n color: `${theme.colors.secondary_60}`,\n cursor: \"not-allowed\",\n top: \"-2px\",\n },\n dot: {\n ...dot,\n },\n dotDisabled: {\n ...dot,\n cursor: \"not-allowed\",\n },\n knobHidden: { display: \"none\" },\n knobHiddenLast: {\n borderColor: \"transparent\",\n height: \"3px\",\n width: \"2px\",\n marginLeft: \"-1px\",\n border: \"none\",\n borderRadius: \"0\",\n marginTop: \"0px\",\n left: \"100%\",\n touchAction: \"none\",\n cursor: \"default\",\n },\n knobInner: {\n borderColor: \"transparent\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.secondary,\n width: \"16px\",\n height: \"16px\",\n },\n knobOuter: {\n position: \"relative\",\n borderColor: \"transparent\",\n borderRadius: \"50%\",\n boxShadow: \"none\",\n backgroundColor: theme.colors.atmo4,\n width: \"32px\",\n height: \"32px\",\n top: \"-80%\",\n left: \"-80%\",\n zIndex: \"-1\",\n },\n track: {\n backgroundColor: theme.colors.secondary,\n height: \"3px\",\n zIndex: \"-1\",\n marginTop: \"-1px\",\n },\n rail: { backgroundColor: theme.colors.atmo4, height: \"1px\", zIndex: \"-3\" },\n} satisfies Record<string, CSSProperties>;\n\nexport const { staticClasses, useClasses } = createClasses(\"HvSlider\", {\n sliderBase: { ...base },\n rootDisabled: {\n cursor: \"not-allowed\",\n \"&& .rc-slider-disabled\": {\n background: \"transparent\",\n },\n },\n sliderContainer: { marginBottom: \"18px\", padding: \"0 23px\" },\n error: { padding: \"0 8px\" },\n trackDragging: {\n cursor: \"grabbing\",\n\n \"&& .rc-slider-track\": {\n \"&::before\": {\n ...dragSquare,\n cursor: \"grabbing\",\n },\n },\n },\n trackStandBy: {\n \"&& .rc-slider-track\": {\n \"&:hover\": {\n \"&::before\": {\n ...dragSquare,\n },\n },\n },\n },\n sliderRoot: { zIndex: 0 },\n rootRange: {},\n handleContainer: {\n \"&& .rc-slider-handle\": {\n cursor: \"pointer\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"grab\",\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n \"&:hover\": {\n \"&::before\": {\n ...ring,\n },\n \"&::after\": {\n ...border,\n },\n },\n\n // Note about the usage of `!important below`: the way the rc-slider allows us to\n // style the knobs is through inline styles. This means that the `box-shadow`, which\n // is an inline style and is set to `none` to prevent the default rc-slider style to\n // show, can't be overridden for the focus scenario unless we use the `!important` flag.\n \"&:focus-visible\": {\n ...outlineStyles,\n boxShadow: \"0 0 0 3px #52A8EC, 0 0 0 7px rgba(29,155,209,.3)!important\",\n \"&::after\": {\n ...border,\n },\n },\n },\n },\n handle: {},\n handleContainerDisabled: {\n \"&& .rc-slider-handle\": {\n cursor: \"not-allowed\",\n marginTop: \"-8px\",\n opacity: 1,\n \"&:active\": {\n cursor: \"not-allowed\",\n },\n \"&:hover\": {\n cursor: \"not-allowed\",\n },\n },\n },\n handleHiddenContainer: { display: \"none\" },\n labelContainer: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n marginBottom: \"12px\",\n marginLeft: \"20px\",\n marginRight: \"20px\",\n },\n labelIncluded: { justifyContent: \"space-between\" },\n onlyInput: { justifyContent: \"flex-end\" },\n label: {},\n root: {},\n sliderTooltip: {\n \"&& .rc-slider-tooltip-inner\": {\n background: theme.colors.atmo1,\n borderRadius: 0,\n maxWidth: \"532px\",\n height: \"100%\",\n padding: theme.space.sm,\n ...theme.typography.body,\n fontFamily: theme.fontFamily.body,\n boxShadow: \"none\",\n },\n\n \"&& .rc-slider-tooltip-arrow\": {\n visibility: \"hidden\",\n },\n },\n});\n"],"names":["dot","position","bottom","marginLeft","width","height","border","borderRadius","backgroundColor","theme","colors","atmo4","cursor","verticalAlign","zIndex","dragSquare","left","top","content","background","borderTop","slider","dragBarColor","borderBottom","ring","ringColor","opacity","ringOpacity","atmo1","sliderStyles","mark","typography","caption1","fontFamily","body","disabledMark","color","secondary_60","dotDisabled","knobHidden","display","knobHiddenLast","borderColor","marginTop","touchAction","knobInner","boxShadow","secondary","knobOuter","track","rail","staticClasses","useClasses","createClasses","sliderBase","base","rootDisabled","sliderContainer","marginBottom","padding","error","trackDragging","trackStandBy","sliderRoot","rootRange","handleContainer","outlineStyles","handle","handleContainerDisabled","handleHiddenContainer","labelContainer","alignItems","justifyContent","marginRight","labelIncluded","onlyInput","label","root","sliderTooltip","maxWidth","space","sm","visibility"],"mappings":"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"}
|
|
@@ -7,11 +7,11 @@ const base = {
|
|
|
7
7
|
borderRadius: "6px",
|
|
8
8
|
touchAction: "none",
|
|
9
9
|
boxSizing: "border-box",
|
|
10
|
-
|
|
10
|
+
WebkitTapHighlightColor: "rgba(0, 0, 0, 0)"
|
|
11
11
|
},
|
|
12
12
|
"& .rc-slider *": {
|
|
13
13
|
boxSizing: "border-box",
|
|
14
|
-
|
|
14
|
+
WebkitTapHighlightColor: "rgba(0, 0, 0, 0)"
|
|
15
15
|
},
|
|
16
16
|
"& .rc-slider-rail": {
|
|
17
17
|
position: "absolute",
|
|
@@ -34,8 +34,6 @@ const base = {
|
|
|
34
34
|
backgroundColor: "#fff",
|
|
35
35
|
border: "solid 2px #96dbfa",
|
|
36
36
|
borderRadius: "50%",
|
|
37
|
-
// cursor: "pointer",
|
|
38
|
-
// cursor: "-webkit-grab",
|
|
39
37
|
cursor: "grab",
|
|
40
38
|
opacity: 0.8,
|
|
41
39
|
touchAction: "pan-x"
|
|
@@ -62,7 +60,6 @@ const base = {
|
|
|
62
60
|
"& .rc-slider-handle:active": {
|
|
63
61
|
borderColor: "#57c5f7",
|
|
64
62
|
boxShadow: "0 0 5px #57c5f7",
|
|
65
|
-
// cursor: "-webkit-grabbing",
|
|
66
63
|
cursor: "grabbing"
|
|
67
64
|
},
|
|
68
65
|
"& .rc-slider-mark": {
|
|
@@ -205,11 +202,11 @@ const base = {
|
|
|
205
202
|
left: "-9999px",
|
|
206
203
|
visibility: "visible",
|
|
207
204
|
boxSizing: "border-box",
|
|
208
|
-
|
|
205
|
+
WebkitTapHighlightColor: "rgba(0, 0, 0, 0)"
|
|
209
206
|
},
|
|
210
207
|
"& .rc-slider-tooltip *": {
|
|
211
208
|
boxSizing: "border-box",
|
|
212
|
-
|
|
209
|
+
WebkitTapHighlightColor: "rgba(0, 0, 0, 0)"
|
|
213
210
|
},
|
|
214
211
|
"& .rc-slider-tooltip-hidden": {
|
|
215
212
|
display: "none"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base.js","sources":["../../../../src/components/Slider/base.ts"],"sourcesContent":["export default {\n \"& .rc-slider\": {\n position: \"relative\",\n width: \"100%\",\n height: \"14px\",\n padding: \" 5px 0\",\n borderRadius: \"6px\",\n touchAction: \"none\",\n boxSizing: \"border-box\",\n \"-webkit-tap-highlight-color\": \"rgba(0, 0, 0, 0)\",\n },\n \"& .rc-slider *\": {\n boxSizing: \"border-box\",\n \"-webkit-tap-highlight-color\": \"rgba(0, 0, 0, 0)\",\n },\n \"& .rc-slider-rail\": {\n position: \"absolute\",\n width: \"100%\",\n height: \"4px\",\n backgroundColor: \"#e9e9e9\",\n borderRadius: \"6px\",\n },\n \"& .rc-slider-track\": {\n position: \"absolute\",\n height: \"4px\",\n backgroundColor: \"#abe2fb\",\n borderRadius: \"6px\",\n },\n \"& .rc-slider-handle\": {\n position: \"absolute\",\n width: \"14px\",\n height: \"14px\",\n marginTop: \"-5px\",\n backgroundColor: \"#fff\",\n border: \"solid 2px #96dbfa\",\n borderRadius: \"50%\",\n // cursor: \"pointer\",\n // cursor: \"-webkit-grab\",\n cursor: \"grab\",\n opacity: 0.8,\n touchAction: \"pan-x\",\n },\n \"& .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging\":\n {\n borderColor: \"#57c5f7\",\n boxShadow: \"0 0 0 5px #96dbfa\",\n },\n \"& .rc-slider-handle:focus\": {\n outline: \"none\",\n boxShadow: \"none\",\n },\n \"& .rc-slider-handle:focus-visible\": {\n borderColor: \"#2db7f5\",\n boxShadow: \"0 0 0 3px #96dbfa\",\n },\n \"& .rc-slider-handle-click-focused:focus\": {\n borderColor: \"#96dbfa\",\n boxShadow: \"unset\",\n },\n \"& .rc-slider-handle:hover\": {\n borderColor: \"#57c5f7\",\n },\n \"& .rc-slider-handle:active\": {\n borderColor: \"#57c5f7\",\n boxShadow: \"0 0 5px #57c5f7\",\n // cursor: \"-webkit-grabbing\",\n cursor: \"grabbing\",\n },\n \"& .rc-slider-mark\": {\n position: \"absolute\",\n top: \"18px\",\n left: 0,\n width: \"100%\",\n fontSize: \"12px\",\n },\n \"& .rc-slider-mark-text\": {\n position: \"absolute\",\n display: \"inline-block\",\n color: \"#999\",\n textAlign: \"center\",\n verticalAlign: \"middle\",\n cursor: \"pointer\",\n },\n \"& .rc-slider-mark-text-active\": {\n color: \"#666\",\n },\n \"& .rc-slider-step\": {\n position: \"absolute\",\n width: \"100%\",\n height: \"4px\",\n background: \"transparent\",\n pointerEvents: \"none\",\n },\n \"& .rc-slider-dot\": {\n position: \"absolute\",\n bottom: \"-2px\",\n width: \"8px\",\n height: \"8px\",\n verticalAlign: \"middle\",\n backgroundColor: \"#fff\",\n border: \"2px solid #e9e9e9\",\n borderRadius: \"50%\",\n cursor: \"pointer\",\n },\n \"& .rc-slider-dot-active\": {\n borderColor: \"#96dbfa\",\n },\n \"& .rc-slider-dot-reverse\": {\n marginRight: \"-4px\",\n },\n \"& .rc-slider-disabled\": {\n backgroundColor: \"#e9e9e9\",\n },\n \"& .rc-slider-disabled .rc-slider-track\": {\n backgroundColor: \"#ccc\",\n },\n \"& .rc-slider-disabled .rc-slider-handle\": {\n backgroundColor: \"#fff\",\n borderColor: \"#ccc\",\n boxShadow: \"none\",\n cursor: \"not-allowed\",\n },\n \"&.rc-slider-disabled .rc-slider-dot\": {\n backgroundColor: \"#fff\",\n borderColor: \"#ccc\",\n boxShadow: \"none\",\n cursor: \"not-allowed\",\n },\n \"& .rc-slider-disabled .rc-slider-mark-text\": {\n cursor: \"not-allowed !important\",\n },\n \"& .rc-slider-disabled .rc-slider-dot\": {\n cursor: \"not-allowed !important\",\n },\n \"& .rc-slider-vertical\": {\n width: \"14px\",\n height: \"100%\",\n padding: \"0 5px\",\n },\n \"& .rc-slider-vertical .rc-slider-rail\": {\n width: \"4px\",\n height: \"100%\",\n },\n \"& .rc-slider-vertical .rc-slider-track\": {\n bottom: 0,\n left: \"5px\",\n width: \"4px\",\n },\n \"& .rc-slider-vertical .rc-slider-handle\": {\n marginTop: 0,\n marginLeft: \"-5px\",\n touchAction: \"pan-y\",\n },\n \"& .rc-slider-vertical .rc-slider-mark\": {\n top: 0,\n left: \"18px\",\n height: \"100%\",\n },\n \"& .rc-slider-vertical .rc-slider-step\": {\n width: \"4px\",\n height: \"100%\",\n },\n \"& .rc-slider-vertical .rc-slider-dot\": {\n marginLeft: \"-2px\",\n },\n \"& .rc-slider-tooltip-zoom-down-enter\": {\n display: \"block !important\",\n animationDuration: \"0.3s\",\n animationFillMode: \"both\",\n animationPlayState: \"paused\",\n transform: \"scale(0, 0)\",\n animationTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n },\n \"& .rc-slider-tooltip-zoom-down-appear\": {\n display: \"block !important\",\n animationDuration: \"0.3s\",\n animationFillMode: \"both\",\n animationPlayState: \"paused\",\n },\n \"& .rc-slider-tooltip-zoom-down-leave\": {\n display: \"block !important\",\n animationDuration: \"0.3s\",\n animationFillMode: \"both\",\n animationPlayState: \"paused\",\n animationTimingFunction: \"cubic-bezier(0.755, 0.05, 0.855, 0.06)\",\n },\n \"& .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active\":\n {\n animationName: \"rcSliderTooltipZoomDownIn\",\n animationPlayState: \"running\",\n },\n \"& .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active\":\n {\n animationName: \"rcSliderTooltipZoomDownIn\",\n animationPlayState: \"running\",\n },\n \"& .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active\":\n {\n animationName: \"rcSliderTooltipZoomDownOut\",\n animationPlayState: \"running\",\n },\n \"&. .rc-slider-tooltip-zoom-down-appear\": {\n transform: \"scale(0, 0)\",\n animationTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n },\n \"& .rc-slider-tooltip\": {\n position: \"absolute\",\n top: \"-9999px\",\n left: \"-9999px\",\n visibility: \"visible\",\n boxSizing: \"border-box\",\n \"-webkit-tap-highlight-color\": \"rgba(0, 0, 0, 0)\",\n },\n \"& .rc-slider-tooltip *\": {\n boxSizing: \"border-box\",\n \"-webkit-tap-highlight-color\": \"rgba(0, 0, 0, 0)\",\n },\n \"& .rc-slider-tooltip-hidden\": {\n display: \"none\",\n },\n \"& .rc-slider-tooltip-placement-top\": {\n padding: \"4px 0 8px 0\",\n },\n \"& .rc-slider-tooltip-inner\": {\n minWidth: \"24px\",\n height: \"24px\",\n padding: \"6px 2px\",\n color: \"#fff\",\n fontSize: \"12px\",\n lineHeight: 1,\n textAlign: \"center\",\n textDecoration: \"none\",\n backgroundColor: \"#6c6c6c\",\n borderRadius: \"6px\",\n boxShadow: \"0 0 4px #d9d9d9\",\n },\n \"& .rc-slider-tooltip-arrow\": {\n position: \"absolute\",\n width: 0,\n height: 0,\n borderColor: \"transparent\",\n borderStyle: \"solid\",\n },\n \"& .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow\": {\n bottom: \"4px\",\n left: \"50%\",\n marginLeft: \"-4px\",\n borderWidth: \"4px 4px 0\",\n borderTopColor: \"#6c6c6c\",\n },\n};\n"],"names":["position","width","height","padding","borderRadius","touchAction","boxSizing","backgroundColor","marginTop","border","cursor","opacity","borderColor","boxShadow","outline","top","left","fontSize","display","color","textAlign","verticalAlign","background","pointerEvents","bottom","marginRight","marginLeft","animationDuration","animationFillMode","animationPlayState","transform","animationTimingFunction","animationName","visibility","minWidth","lineHeight","textDecoration","borderStyle","borderWidth","borderTopColor"],"mappings":"AAAA,MAAe,OAAA;AAAA,EACb,gBAAgB;AAAA,IACdA,UAAU;AAAA,IACVC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,cAAc;AAAA,IACdC,aAAa;AAAA,IACbC,WAAW;AAAA,IACX,+BAA+B;AAAA,EACjC;AAAA,EACA,kBAAkB;AAAA,IAChBA,WAAW;AAAA,IACX,+BAA+B;AAAA,EACjC;AAAA,EACA,qBAAqB;AAAA,IACnBN,UAAU;AAAA,IACVC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRK,iBAAiB;AAAA,IACjBH,cAAc;AAAA,EAChB;AAAA,EACA,sBAAsB;AAAA,IACpBJ,UAAU;AAAA,IACVE,QAAQ;AAAA,IACRK,iBAAiB;AAAA,IACjBH,cAAc;AAAA,EAChB;AAAA,EACA,uBAAuB;AAAA,IACrBJ,UAAU;AAAA,IACVC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRM,WAAW;AAAA,IACXD,iBAAiB;AAAA,IACjBE,QAAQ;AAAA,IACRL,cAAc;AAAA;AAAA;AAAA,IAGdM,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTN,aAAa;AAAA,EACf;AAAA,EACA,oFACE;AAAA,IACEO,aAAa;AAAA,IACbC,WAAW;AAAA,EACb;AAAA,EACF,6BAA6B;AAAA,IAC3BC,SAAS;AAAA,IACTD,WAAW;AAAA,EACb;AAAA,EACA,qCAAqC;AAAA,IACnCD,aAAa;AAAA,IACbC,WAAW;AAAA,EACb;AAAA,EACA,2CAA2C;AAAA,IACzCD,aAAa;AAAA,IACbC,WAAW;AAAA,EACb;AAAA,EACA,6BAA6B;AAAA,IAC3BD,aAAa;AAAA,EACf;AAAA,EACA,8BAA8B;AAAA,IAC5BA,aAAa;AAAA,IACbC,WAAW;AAAA;AAAA,IAEXH,QAAQ;AAAA,EACV;AAAA,EACA,qBAAqB;AAAA,IACnBV,UAAU;AAAA,IACVe,KAAK;AAAA,IACLC,MAAM;AAAA,IACNf,OAAO;AAAA,IACPgB,UAAU;AAAA,EACZ;AAAA,EACA,0BAA0B;AAAA,IACxBjB,UAAU;AAAA,IACVkB,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,WAAW;AAAA,IACXC,eAAe;AAAA,IACfX,QAAQ;AAAA,EACV;AAAA,EACA,iCAAiC;AAAA,IAC/BS,OAAO;AAAA,EACT;AAAA,EACA,qBAAqB;AAAA,IACnBnB,UAAU;AAAA,IACVC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRoB,YAAY;AAAA,IACZC,eAAe;AAAA,EACjB;AAAA,EACA,oBAAoB;AAAA,IAClBvB,UAAU;AAAA,IACVwB,QAAQ;AAAA,IACRvB,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRmB,eAAe;AAAA,IACfd,iBAAiB;AAAA,IACjBE,QAAQ;AAAA,IACRL,cAAc;AAAA,IACdM,QAAQ;AAAA,EACV;AAAA,EACA,2BAA2B;AAAA,IACzBE,aAAa;AAAA,EACf;AAAA,EACA,4BAA4B;AAAA,IAC1Ba,aAAa;AAAA,EACf;AAAA,EACA,yBAAyB;AAAA,IACvBlB,iBAAiB;AAAA,EACnB;AAAA,EACA,0CAA0C;AAAA,IACxCA,iBAAiB;AAAA,EACnB;AAAA,EACA,2CAA2C;AAAA,IACzCA,iBAAiB;AAAA,IACjBK,aAAa;AAAA,IACbC,WAAW;AAAA,IACXH,QAAQ;AAAA,EACV;AAAA,EACA,uCAAuC;AAAA,IACrCH,iBAAiB;AAAA,IACjBK,aAAa;AAAA,IACbC,WAAW;AAAA,IACXH,QAAQ;AAAA,EACV;AAAA,EACA,8CAA8C;AAAA,IAC5CA,QAAQ;AAAA,EACV;AAAA,EACA,wCAAwC;AAAA,IACtCA,QAAQ;AAAA,EACV;AAAA,EACA,yBAAyB;AAAA,IACvBT,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,SAAS;AAAA,EACX;AAAA,EACA,yCAAyC;AAAA,IACvCF,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AAAA,EACA,0CAA0C;AAAA,IACxCsB,QAAQ;AAAA,IACRR,MAAM;AAAA,IACNf,OAAO;AAAA,EACT;AAAA,EACA,2CAA2C;AAAA,IACzCO,WAAW;AAAA,IACXkB,YAAY;AAAA,IACZrB,aAAa;AAAA,EACf;AAAA,EACA,yCAAyC;AAAA,IACvCU,KAAK;AAAA,IACLC,MAAM;AAAA,IACNd,QAAQ;AAAA,EACV;AAAA,EACA,yCAAyC;AAAA,IACvCD,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AAAA,EACA,wCAAwC;AAAA,IACtCwB,YAAY;AAAA,EACd;AAAA,EACA,wCAAwC;AAAA,IACtCR,SAAS;AAAA,IACTS,mBAAmB;AAAA,IACnBC,mBAAmB;AAAA,IACnBC,oBAAoB;AAAA,IACpBC,WAAW;AAAA,IACXC,yBAAyB;AAAA,EAC3B;AAAA,EACA,yCAAyC;AAAA,IACvCb,SAAS;AAAA,IACTS,mBAAmB;AAAA,IACnBC,mBAAmB;AAAA,IACnBC,oBAAoB;AAAA,EACtB;AAAA,EACA,wCAAwC;AAAA,IACtCX,SAAS;AAAA,IACTS,mBAAmB;AAAA,IACnBC,mBAAmB;AAAA,IACnBC,oBAAoB;AAAA,IACpBE,yBAAyB;AAAA,EAC3B;AAAA,EACA,iFACE;AAAA,IACEC,eAAe;AAAA,IACfH,oBAAoB;AAAA,EACtB;AAAA,EACF,mFACE;AAAA,IACEG,eAAe;AAAA,IACfH,oBAAoB;AAAA,EACtB;AAAA,EACF,iFACE;AAAA,IACEG,eAAe;AAAA,IACfH,oBAAoB;AAAA,EACtB;AAAA,EACF,0CAA0C;AAAA,IACxCC,WAAW;AAAA,IACXC,yBAAyB;AAAA,EAC3B;AAAA,EACA,wBAAwB;AAAA,IACtB/B,UAAU;AAAA,IACVe,KAAK;AAAA,IACLC,MAAM;AAAA,IACNiB,YAAY;AAAA,IACZ3B,WAAW;AAAA,IACX,+BAA+B;AAAA,EACjC;AAAA,EACA,0BAA0B;AAAA,IACxBA,WAAW;AAAA,IACX,+BAA+B;AAAA,EACjC;AAAA,EACA,+BAA+B;AAAA,IAC7BY,SAAS;AAAA,EACX;AAAA,EACA,sCAAsC;AAAA,IACpCf,SAAS;AAAA,EACX;AAAA,EACA,8BAA8B;AAAA,IAC5B+B,UAAU;AAAA,IACVhC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTgB,OAAO;AAAA,IACPF,UAAU;AAAA,IACVkB,YAAY;AAAA,IACZf,WAAW;AAAA,IACXgB,gBAAgB;AAAA,IAChB7B,iBAAiB;AAAA,IACjBH,cAAc;AAAA,IACdS,WAAW;AAAA,EACb;AAAA,EACA,8BAA8B;AAAA,IAC5Bb,UAAU;AAAA,IACVC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRU,aAAa;AAAA,IACbyB,aAAa;AAAA,EACf;AAAA,EACA,+DAA+D;AAAA,IAC7Db,QAAQ;AAAA,IACRR,MAAM;AAAA,IACNU,YAAY;AAAA,IACZY,aAAa;AAAA,IACbC,gBAAgB;AAAA,EAClB;AACF;"}
|
|
1
|
+
{"version":3,"file":"base.js","sources":["../../../../src/components/Slider/base.ts"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/serialize\";\n\nexport default {\n \"& .rc-slider\": {\n position: \"relative\",\n width: \"100%\",\n height: \"14px\",\n padding: \" 5px 0\",\n borderRadius: \"6px\",\n touchAction: \"none\",\n boxSizing: \"border-box\",\n WebkitTapHighlightColor: \"rgba(0, 0, 0, 0)\",\n },\n \"& .rc-slider *\": {\n boxSizing: \"border-box\",\n WebkitTapHighlightColor: \"rgba(0, 0, 0, 0)\",\n },\n \"& .rc-slider-rail\": {\n position: \"absolute\",\n width: \"100%\",\n height: \"4px\",\n backgroundColor: \"#e9e9e9\",\n borderRadius: \"6px\",\n },\n \"& .rc-slider-track\": {\n position: \"absolute\",\n height: \"4px\",\n backgroundColor: \"#abe2fb\",\n borderRadius: \"6px\",\n },\n \"& .rc-slider-handle\": {\n position: \"absolute\",\n width: \"14px\",\n height: \"14px\",\n marginTop: \"-5px\",\n backgroundColor: \"#fff\",\n border: \"solid 2px #96dbfa\",\n borderRadius: \"50%\",\n cursor: \"grab\",\n opacity: 0.8,\n touchAction: \"pan-x\",\n },\n \"& .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging\":\n {\n borderColor: \"#57c5f7\",\n boxShadow: \"0 0 0 5px #96dbfa\",\n },\n \"& .rc-slider-handle:focus\": {\n outline: \"none\",\n boxShadow: \"none\",\n },\n \"& .rc-slider-handle:focus-visible\": {\n borderColor: \"#2db7f5\",\n boxShadow: \"0 0 0 3px #96dbfa\",\n },\n \"& .rc-slider-handle-click-focused:focus\": {\n borderColor: \"#96dbfa\",\n boxShadow: \"unset\",\n },\n \"& .rc-slider-handle:hover\": {\n borderColor: \"#57c5f7\",\n },\n \"& .rc-slider-handle:active\": {\n borderColor: \"#57c5f7\",\n boxShadow: \"0 0 5px #57c5f7\",\n cursor: \"grabbing\",\n },\n \"& .rc-slider-mark\": {\n position: \"absolute\",\n top: \"18px\",\n left: 0,\n width: \"100%\",\n fontSize: \"12px\",\n },\n \"& .rc-slider-mark-text\": {\n position: \"absolute\",\n display: \"inline-block\",\n color: \"#999\",\n textAlign: \"center\",\n verticalAlign: \"middle\",\n cursor: \"pointer\",\n },\n \"& .rc-slider-mark-text-active\": {\n color: \"#666\",\n },\n \"& .rc-slider-step\": {\n position: \"absolute\",\n width: \"100%\",\n height: \"4px\",\n background: \"transparent\",\n pointerEvents: \"none\",\n },\n \"& .rc-slider-dot\": {\n position: \"absolute\",\n bottom: \"-2px\",\n width: \"8px\",\n height: \"8px\",\n verticalAlign: \"middle\",\n backgroundColor: \"#fff\",\n border: \"2px solid #e9e9e9\",\n borderRadius: \"50%\",\n cursor: \"pointer\",\n },\n \"& .rc-slider-dot-active\": {\n borderColor: \"#96dbfa\",\n },\n \"& .rc-slider-dot-reverse\": {\n marginRight: \"-4px\",\n },\n \"& .rc-slider-disabled\": {\n backgroundColor: \"#e9e9e9\",\n },\n \"& .rc-slider-disabled .rc-slider-track\": {\n backgroundColor: \"#ccc\",\n },\n \"& .rc-slider-disabled .rc-slider-handle\": {\n backgroundColor: \"#fff\",\n borderColor: \"#ccc\",\n boxShadow: \"none\",\n cursor: \"not-allowed\",\n },\n \"&.rc-slider-disabled .rc-slider-dot\": {\n backgroundColor: \"#fff\",\n borderColor: \"#ccc\",\n boxShadow: \"none\",\n cursor: \"not-allowed\",\n },\n \"& .rc-slider-disabled .rc-slider-mark-text\": {\n cursor: \"not-allowed !important\",\n },\n \"& .rc-slider-disabled .rc-slider-dot\": {\n cursor: \"not-allowed !important\",\n },\n \"& .rc-slider-vertical\": {\n width: \"14px\",\n height: \"100%\",\n padding: \"0 5px\",\n },\n \"& .rc-slider-vertical .rc-slider-rail\": {\n width: \"4px\",\n height: \"100%\",\n },\n \"& .rc-slider-vertical .rc-slider-track\": {\n bottom: 0,\n left: \"5px\",\n width: \"4px\",\n },\n \"& .rc-slider-vertical .rc-slider-handle\": {\n marginTop: 0,\n marginLeft: \"-5px\",\n touchAction: \"pan-y\",\n },\n \"& .rc-slider-vertical .rc-slider-mark\": {\n top: 0,\n left: \"18px\",\n height: \"100%\",\n },\n \"& .rc-slider-vertical .rc-slider-step\": {\n width: \"4px\",\n height: \"100%\",\n },\n \"& .rc-slider-vertical .rc-slider-dot\": {\n marginLeft: \"-2px\",\n },\n \"& .rc-slider-tooltip-zoom-down-enter\": {\n display: \"block !important\",\n animationDuration: \"0.3s\",\n animationFillMode: \"both\",\n animationPlayState: \"paused\",\n transform: \"scale(0, 0)\",\n animationTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n },\n \"& .rc-slider-tooltip-zoom-down-appear\": {\n display: \"block !important\",\n animationDuration: \"0.3s\",\n animationFillMode: \"both\",\n animationPlayState: \"paused\",\n },\n \"& .rc-slider-tooltip-zoom-down-leave\": {\n display: \"block !important\",\n animationDuration: \"0.3s\",\n animationFillMode: \"both\",\n animationPlayState: \"paused\",\n animationTimingFunction: \"cubic-bezier(0.755, 0.05, 0.855, 0.06)\",\n },\n \"& .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active\":\n {\n animationName: \"rcSliderTooltipZoomDownIn\",\n animationPlayState: \"running\",\n },\n \"& .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active\":\n {\n animationName: \"rcSliderTooltipZoomDownIn\",\n animationPlayState: \"running\",\n },\n \"& .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active\":\n {\n animationName: \"rcSliderTooltipZoomDownOut\",\n animationPlayState: \"running\",\n },\n \"&. .rc-slider-tooltip-zoom-down-appear\": {\n transform: \"scale(0, 0)\",\n animationTimingFunction: \"cubic-bezier(0.23, 1, 0.32, 1)\",\n },\n \"& .rc-slider-tooltip\": {\n position: \"absolute\",\n top: \"-9999px\",\n left: \"-9999px\",\n visibility: \"visible\",\n boxSizing: \"border-box\",\n WebkitTapHighlightColor: \"rgba(0, 0, 0, 0)\",\n },\n \"& .rc-slider-tooltip *\": {\n boxSizing: \"border-box\",\n WebkitTapHighlightColor: \"rgba(0, 0, 0, 0)\",\n },\n \"& .rc-slider-tooltip-hidden\": {\n display: \"none\",\n },\n \"& .rc-slider-tooltip-placement-top\": {\n padding: \"4px 0 8px 0\",\n },\n \"& .rc-slider-tooltip-inner\": {\n minWidth: \"24px\",\n height: \"24px\",\n padding: \"6px 2px\",\n color: \"#fff\",\n fontSize: \"12px\",\n lineHeight: 1,\n textAlign: \"center\",\n textDecoration: \"none\",\n backgroundColor: \"#6c6c6c\",\n borderRadius: \"6px\",\n boxShadow: \"0 0 4px #d9d9d9\",\n },\n \"& .rc-slider-tooltip-arrow\": {\n position: \"absolute\",\n width: 0,\n height: 0,\n borderColor: \"transparent\",\n borderStyle: \"solid\",\n },\n \"& .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow\": {\n bottom: \"4px\",\n left: \"50%\",\n marginLeft: \"-4px\",\n borderWidth: \"4px 4px 0\",\n borderTopColor: \"#6c6c6c\",\n },\n} satisfies CSSInterpolation;\n"],"names":["position","width","height","padding","borderRadius","touchAction","boxSizing","WebkitTapHighlightColor","backgroundColor","marginTop","border","cursor","opacity","borderColor","boxShadow","outline","top","left","fontSize","display","color","textAlign","verticalAlign","background","pointerEvents","bottom","marginRight","marginLeft","animationDuration","animationFillMode","animationPlayState","transform","animationTimingFunction","animationName","visibility","minWidth","lineHeight","textDecoration","borderStyle","borderWidth","borderTopColor"],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { theme } from "@hitachivantara/uikit-styles";
|
|
2
2
|
import validationState from "../Forms/FormElement/validationStates.js";
|
|
3
|
+
import { sliderStyles } from "./Slider.styles.js";
|
|
3
4
|
const knobsPositionToScaledValue = (sliderValue, minPointValue, stepValue) => minPointValue + stepValue * sliderValue;
|
|
4
5
|
const scaledValueToKnobsPositionValue = (scaledValue, minPointValue, inverseStepValue) => typeof scaledValue === "number" ? Math.floor((scaledValue - minPointValue) * inverseStepValue) : NaN;
|
|
5
6
|
const knobsValuesToKnobsPositions = (values, inverseStepValue, minPointValue) => {
|
|
@@ -17,7 +18,7 @@ const knobsPositionsToKnobsValues = (knobPositions, stepValue, minPointValue) =>
|
|
|
17
18
|
return knobsValues;
|
|
18
19
|
};
|
|
19
20
|
const calculateStepValue = (maxPointValue, minPointValue, divisionQuantity) => Math.abs(maxPointValue - minPointValue) / divisionQuantity;
|
|
20
|
-
const createMark = (markProperties, markstep, divisionQuantity, minPointValue, stepValue, markDigits, disabled,
|
|
21
|
+
const createMark = (markProperties, markstep, divisionQuantity, minPointValue, stepValue, markDigits, disabled, formatMark = (mark) => mark) => {
|
|
21
22
|
const marks = {};
|
|
22
23
|
if (markProperties.length > 0) {
|
|
23
24
|
markProperties.forEach((markProperty) => {
|
|
@@ -25,12 +26,12 @@ const createMark = (markProperties, markstep, divisionQuantity, minPointValue, s
|
|
|
25
26
|
marks[markProperty.position] = disabled ? {
|
|
26
27
|
label: `${markProperty.label}`,
|
|
27
28
|
style: {
|
|
28
|
-
...
|
|
29
|
+
...sliderStyles.disabledMark
|
|
29
30
|
}
|
|
30
31
|
} : {
|
|
31
32
|
label: `${markProperty.label}`,
|
|
32
33
|
style: {
|
|
33
|
-
...
|
|
34
|
+
...sliderStyles.mark
|
|
34
35
|
}
|
|
35
36
|
};
|
|
36
37
|
}
|
|
@@ -43,24 +44,24 @@ const createMark = (markProperties, markstep, divisionQuantity, minPointValue, s
|
|
|
43
44
|
marks[index] = disabled ? {
|
|
44
45
|
label: `${labelValue}`,
|
|
45
46
|
style: {
|
|
46
|
-
...
|
|
47
|
+
...sliderStyles.disabledMark
|
|
47
48
|
}
|
|
48
49
|
} : {
|
|
49
50
|
label: `${labelValue}`,
|
|
50
51
|
style: {
|
|
51
|
-
...
|
|
52
|
+
...sliderStyles.mark
|
|
52
53
|
}
|
|
53
54
|
};
|
|
54
55
|
}
|
|
55
56
|
}
|
|
56
57
|
return marks;
|
|
57
58
|
};
|
|
58
|
-
const createTrackStyles = (knobProperties
|
|
59
|
+
const createTrackStyles = (knobProperties) => {
|
|
59
60
|
const trackStyles = [];
|
|
60
61
|
if (knobProperties.length > 0) {
|
|
61
62
|
knobProperties.forEach((knobProperty, index) => {
|
|
62
63
|
trackStyles[index] = {
|
|
63
|
-
...
|
|
64
|
+
...sliderStyles.track
|
|
64
65
|
};
|
|
65
66
|
if (knobProperty.color) {
|
|
66
67
|
trackStyles[index].backgroundColor = knobProperty.trackColor;
|
|
@@ -69,31 +70,31 @@ const createTrackStyles = (knobProperties, styles) => {
|
|
|
69
70
|
}
|
|
70
71
|
return trackStyles;
|
|
71
72
|
};
|
|
72
|
-
const createKnobStyles = (knobProperties
|
|
73
|
+
const createKnobStyles = (knobProperties) => {
|
|
73
74
|
const knobInner = [];
|
|
74
75
|
const knobOuterStyle = [];
|
|
75
76
|
const lastItem = knobProperties.length - 1;
|
|
76
77
|
if (knobProperties.length > 0) {
|
|
77
78
|
knobProperties.forEach((knobProperty, index) => {
|
|
78
79
|
knobInner[index] = {
|
|
79
|
-
...
|
|
80
|
+
...sliderStyles.knobInner
|
|
80
81
|
};
|
|
81
82
|
knobOuterStyle[index] = {
|
|
82
|
-
...
|
|
83
|
+
...sliderStyles.knobOuter
|
|
83
84
|
};
|
|
84
85
|
if (knobProperty.color) {
|
|
85
86
|
knobInner[index].backgroundColor = knobProperty.color;
|
|
86
87
|
knobOuterStyle[index].backgroundColor = "transparent";
|
|
87
88
|
}
|
|
88
89
|
if (knobProperty.hidden) {
|
|
89
|
-
knobInner[index] =
|
|
90
|
+
knobInner[index] = sliderStyles.knobHidden;
|
|
90
91
|
if (index === lastItem) {
|
|
91
92
|
knobInner[index] = {
|
|
92
|
-
...
|
|
93
|
+
...sliderStyles.knobHiddenLast
|
|
93
94
|
};
|
|
94
95
|
knobInner[index].backgroundColor = knobProperty.color;
|
|
95
96
|
knobOuterStyle[index] = {
|
|
96
|
-
...
|
|
97
|
+
...sliderStyles.knobHidden
|
|
97
98
|
};
|
|
98
99
|
knobOuterStyle[index].backgroundColor = knobProperty.color;
|
|
99
100
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../../../src/components/Slider/utils.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { HvFormStatus } from \"@core/components/Forms\";\n\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\nimport { SliderStyles } from \"./Slider.styles\";\n\n/**\n * Transform the scaled values into knobs positions.\n *\n * @param {*} sliderValue - he value of the slider to be scaled\n * @param {*} minPointVlue - The value of the first point in the slider from left to right.\n * @param {*} stepVlue - The calculated separation between the values of the slider.\n */\nexport const knobsPositionToScaledValue = (\n sliderValue: number,\n minPointValue: number,\n stepValue: number\n): number => minPointValue + stepValue * sliderValue;\n\n/**\n * Transform the scaled values into knobs positions.\n *\n * @param {*} scaledValue - The value of the slider to be scaled\n * @param {*} minPointValue - The value of the first point in\n * the slider from left to right.\n * @param {*} inverseStepValue - The inverse of calculated separation between\n * the value of the points that compose the slider.\n */\nexport const scaledValueToKnobsPositionValue = (\n scaledValue: number | undefined,\n minPointValue: number,\n inverseStepValue: number\n): number =>\n typeof scaledValue === \"number\"\n ? Math.floor((scaledValue - minPointValue) * inverseStepValue)\n : NaN;\n\n/**\n * Transform the received knobs values into knob positions\n *\n * @param {Object} values - The values of the slider.\n * @param {Number} inverseStepValue - The inverse of calculated separation between\n * the value of the points that compose the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @returns {Array} - The position of the knobs.\n */\nexport const knobsValuesToKnobsPositions = (\n values: (number | undefined)[],\n inverseStepValue: number,\n minPointValue: number\n): number[] => {\n const knobsPositions: number[] = [];\n\n values.forEach((value, index) => {\n knobsPositions[index] = scaledValueToKnobsPositionValue(\n value,\n minPointValue,\n inverseStepValue\n );\n });\n\n return knobsPositions;\n};\n\n/**\n * Transform the received knobs positions into knob values\n *\n * @param {Object} knobPositions - The values of the slider.\n * @param {Number} stepValue - The calculated separation between\n * the value of the points that compose the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @returns {Array} - The position of the knobs.\n */\nexport const knobsPositionsToKnobsValues = (\n knobPositions: number[],\n stepValue: number,\n minPointValue: number\n): number[] => {\n const knobsValues: number[] = [];\n\n knobPositions.forEach((value, index) => {\n knobsValues[index] = knobsPositionToScaledValue(\n value,\n minPointValue,\n stepValue\n );\n });\n\n return knobsValues;\n};\n\n/**\n * Calculates the separation between each value in the slider.\n *\n * @param {*} maxPointValue - The value of the last point in the slider from left to right.\n * @param {*} minPointValue - The value of the first point in the slider from left to right.\n * @param {*} divisionQuantity - How many subdivisions there are in the slider.\n */\nexport const calculateStepValue = (\n maxPointValue: number,\n minPointValue: number,\n divisionQuantity: number\n): number => Math.abs(maxPointValue - minPointValue) / divisionQuantity;\n\n/**\n * Generates the inline styles used for the track of each knob, applying colors if necessary.\n *\n * @param {Object} markProperties - The object provided by the user with\n * the desired configuration for the marks.\n * @param {Integer} markstep - The separation between marks.\n * @param {Integer} divisionQuantity - How many subdivisions there are in the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @param {Integer} stepValue - The calculated separation between the values of the slider.\n * @param {Integer} markDigits - How many decimals the mark will show.\n * @param {Function} formatMark - A function provided by the user that is going to\n * be executed to format the mark text.\n * @param {Object} styles - the default styles for the marks.\n * @returns {Object} - An object with the for the marks.\n * @memberof HvSlider\n */\nexport const createMark = (\n markProperties: HvMarkProperty[],\n markstep: number,\n divisionQuantity: number,\n minPointValue: number,\n stepValue: number,\n markDigits: number,\n disabled: boolean,\n styles: SliderStyles,\n formatMark: (label: React.ReactNode) => React.ReactNode = (mark) => mark\n): {\n [key: number]: {\n label: string;\n style: CSSProperties;\n };\n} => {\n const marks: {\n [key: number]: {\n label: string;\n style: CSSProperties;\n };\n } = {};\n\n if (markProperties.length > 0) {\n markProperties.forEach((markProperty) => {\n if (typeof markProperty.position === \"number\") {\n marks[markProperty.position] = disabled\n ? {\n label: `${markProperty.label}`,\n style: {\n ...styles.disabledMark,\n },\n }\n : {\n label: `${markProperty.label}`,\n style: {\n ...styles.mark,\n },\n };\n }\n });\n } else {\n const roundedMarkStep = Math.floor(markstep);\n\n for (let index = 0; index <= divisionQuantity; index += roundedMarkStep) {\n let labelValue: React.ReactNode = knobsPositionToScaledValue(\n index,\n minPointValue,\n stepValue\n ).toFixed(markDigits);\n\n labelValue = formatMark?.(labelValue) || labelValue;\n\n marks[index] = disabled\n ? {\n label: `${labelValue}`,\n style: {\n ...styles.disabledMark,\n },\n }\n : {\n label: `${labelValue}`,\n style: {\n ...styles.mark,\n },\n };\n }\n }\n\n return marks;\n};\n\n/**\n * Generates the inline styles used for the track of each knob, applying colors if necessary.\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Object} styles - the default styles for the tracks.\n * @returns {Object} - An object with the style for each track.\n * @memberof HvSlider\n */\nexport const createTrackStyles = (\n knobProperties: HvKnobProperty[],\n styles: SliderStyles\n): CSSProperties[] => {\n const trackStyles: CSSProperties[] = [];\n\n if (knobProperties.length > 0) {\n knobProperties.forEach((knobProperty, index) => {\n trackStyles[index] = { ...styles.track };\n if (knobProperty.color) {\n trackStyles[index].backgroundColor = knobProperty.trackColor;\n }\n });\n }\n\n return trackStyles;\n};\n\n/**\n * Generates the inline styles used for each knob, applying colors if specified.\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Object} styles - the default styles for the knobs.\n * @returns {Object} - An object with both the inner and outer styles for the knob.\n * @memberof HvSlider\n */\nexport const createKnobStyles = (\n knobProperties: HvKnobProperty[],\n styles: SliderStyles\n): {\n knobInner: CSSProperties[];\n knobOuterStyle: CSSProperties[];\n} => {\n const knobInner: CSSProperties[] = [];\n const knobOuterStyle: CSSProperties[] = [];\n\n const lastItem = knobProperties.length - 1;\n if (knobProperties.length > 0) {\n knobProperties.forEach((knobProperty, index) => {\n knobInner[index] = { ...styles.knobInner };\n knobOuterStyle[index] = { ...styles.knobOuter };\n\n if (knobProperty.color) {\n knobInner[index].backgroundColor = knobProperty.color;\n knobOuterStyle[index].backgroundColor = \"transparent\";\n }\n\n if (knobProperty.hidden) {\n knobInner[index] = styles.knobHidden;\n if (index === lastItem) {\n knobInner[index] = { ...styles.knobHiddenLast };\n knobInner[index].backgroundColor = knobProperty.color;\n knobOuterStyle[index] = { ...styles.knobHidden };\n knobOuterStyle[index].backgroundColor = knobProperty.color;\n }\n }\n });\n }\n\n return {\n knobInner,\n knobOuterStyle,\n };\n};\n\n/**\n * Analyzes both the values and the default values to determine whether the slider is working in single mode.\n *\n * @param {Array} values - the values where the knobs are positioned when controlled.\n * @param {Array} defaultValues - the values where the knobs start when uncontrolled.\n * @returns {Boolean} - if true the slider should work as single slider\n */\nexport const isSingleSlider = (\n values: number[],\n defaultValues: (number | undefined)[]\n): boolean => {\n if (!(values?.length > 1)) {\n return defaultValues.length === 1;\n }\n return values.length === 1;\n};\n\n/**\n * Generates the default knob styles for each knob\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Integer} numberOfKnobs - the default styles for the knobs.\n * @param {Object} theme - The theme to extract the colors.\n *\n * @returns {Object} - An object with both the inner and outer styles for the knob.\n * @memberof HvSlider\n */\nexport const generateDefaultKnobProperties = (\n numberOfKnobs: number = 1,\n disabled: boolean = false,\n knobPropertiesProp?: HvKnobProperty[]\n): HvKnobProperty[] => {\n let knobProperties = knobPropertiesProp || [];\n\n const defaultKnobStyles = {\n color: theme.colors.secondary,\n hoverColor: theme.colors.secondary,\n trackColor: theme.colors.secondary,\n dragColor: theme.colors.secondary,\n knobRingColor: theme.colors.atmo1,\n };\n\n const disabledKnobStyles = {\n color: theme.colors.secondary_60,\n hoverColor: theme.colors.secondary_60,\n trackColor: theme.colors.secondary_60,\n dragColor: theme.colors.secondary_60,\n knobRingColor: theme.colors.secondary_60,\n };\n\n if (knobProperties.length > 0) {\n knobProperties = knobProperties.slice(0, numberOfKnobs);\n knobProperties = knobProperties.map((knobProperty) => {\n if (!disabled) {\n return {\n ...disabledKnobStyles,\n ...knobProperty,\n };\n }\n return {\n ...defaultKnobStyles,\n ...knobProperty,\n };\n });\n } else {\n for (let i = 0; i < numberOfKnobs; i += 1) {\n if (!disabled) knobProperties.push(defaultKnobStyles);\n if (disabled) knobProperties.push(disabledKnobStyles);\n }\n }\n\n return knobProperties;\n};\n\nconst pushSlider = (\n index: number,\n inputIndex: number,\n inputValue: number\n): number => {\n const difference = index - inputIndex;\n\n return inputValue + difference;\n};\n\nexport const ensureValuesConsistency = (\n knobPositions: number[],\n inputIndex: number\n): number[] => {\n const newKnobsPosition: number[] = [...knobPositions];\n\n newKnobsPosition.forEach((value, index) => {\n if (Number.isNaN(value) || value == null) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex]\n );\n } else if (index < inputIndex && value > newKnobsPosition[inputIndex]) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex]\n );\n } else if (index > inputIndex && value < newKnobsPosition[inputIndex]) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex]\n );\n }\n });\n\n return newKnobsPosition;\n};\n\nexport const convertStatusToArray = (\n length: number,\n status?: HvFormStatus | HvFormStatus[]\n): {\n arrayStatus?: HvFormStatus[];\n arrayDefaultStatus: (keyof typeof validationStates)[];\n} => {\n const result: {\n arrayStatus?: HvFormStatus[];\n arrayDefaultStatus: (keyof typeof validationStates)[];\n } = {\n arrayDefaultStatus: Array.from({ length }, () => validationStates.standBy),\n };\n\n if (status == null) {\n return result;\n }\n if (!Array.isArray(status)) {\n result.arrayStatus = Array.from({ length }, () => status);\n return result;\n }\n result.arrayStatus = status;\n\n return result;\n};\n\nexport const statusArrayToFormStatus = (\n arrayStatus: HvFormStatus[]\n): keyof typeof validationStates => {\n const invalid = arrayStatus.some(\n (status) => status === validationStates.invalid\n );\n\n if (invalid) return validationStates.invalid;\n\n const valid = arrayStatus.some((status) => status === validationStates.valid);\n\n if (valid) return validationStates.valid;\n\n return validationStates.standBy;\n};\n\nexport const knobsValuesToString = (\n knobsValues: number[],\n markDigits: number\n): string[] =>\n knobsValues.map((knobValue) =>\n Number.isNaN(knobValue) ? \"\" : knobValue.toFixed(markDigits)\n );\n\nexport const stringValuesToKnobs = (inputsValues: string[]): number[] =>\n inputsValues.map((inputValue) => parseFloat(inputValue));\n"],"names":["knobsPositionToScaledValue","sliderValue","minPointValue","stepValue","scaledValueToKnobsPositionValue","scaledValue","inverseStepValue","Math","floor","NaN","knobsValuesToKnobsPositions","values","knobsPositions","forEach","value","index","knobsPositionsToKnobsValues","knobPositions","knobsValues","calculateStepValue","maxPointValue","divisionQuantity","abs","createMark","markProperties","markstep","markDigits","disabled","styles","formatMark","mark","marks","length","markProperty","position","label","style","disabledMark","roundedMarkStep","labelValue","toFixed","createTrackStyles","knobProperties","trackStyles","knobProperty","track","color","backgroundColor","trackColor","createKnobStyles","knobInner","knobOuterStyle","lastItem","knobOuter","hidden","knobHidden","knobHiddenLast","isSingleSlider","defaultValues","generateDefaultKnobProperties","numberOfKnobs","knobPropertiesProp","defaultKnobStyles","theme","colors","secondary","hoverColor","dragColor","knobRingColor","atmo1","disabledKnobStyles","secondary_60","slice","map","i","push","pushSlider","inputIndex","inputValue","difference","ensureValuesConsistency","newKnobsPosition","Number","isNaN","convertStatusToArray","status","result","arrayDefaultStatus","Array","from","validationStates","standBy","isArray","arrayStatus","statusArrayToFormStatus","invalid","some","valid","knobsValuesToString","knobValue","stringValuesToKnobs","inputsValues","parseFloat"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../../../src/components/Slider/utils.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport validationStates from \"@core/components/Forms/FormElement/validationStates\";\nimport { HvFormStatus } from \"@core/components/Forms\";\n\nimport { HvKnobProperty, HvMarkProperty } from \"./types\";\nimport { sliderStyles as styles } from \"./Slider.styles\";\n\n/**\n * Transform the scaled values into knobs positions.\n *\n * @param {*} sliderValue - he value of the slider to be scaled\n * @param {*} minPointVlue - The value of the first point in the slider from left to right.\n * @param {*} stepVlue - The calculated separation between the values of the slider.\n */\nexport const knobsPositionToScaledValue = (\n sliderValue: number,\n minPointValue: number,\n stepValue: number\n): number => minPointValue + stepValue * sliderValue;\n\n/**\n * Transform the scaled values into knobs positions.\n *\n * @param {*} scaledValue - The value of the slider to be scaled\n * @param {*} minPointValue - The value of the first point in\n * the slider from left to right.\n * @param {*} inverseStepValue - The inverse of calculated separation between\n * the value of the points that compose the slider.\n */\nexport const scaledValueToKnobsPositionValue = (\n scaledValue: number | undefined,\n minPointValue: number,\n inverseStepValue: number\n): number =>\n typeof scaledValue === \"number\"\n ? Math.floor((scaledValue - minPointValue) * inverseStepValue)\n : NaN;\n\n/**\n * Transform the received knobs values into knob positions\n *\n * @param {Object} values - The values of the slider.\n * @param {Number} inverseStepValue - The inverse of calculated separation between\n * the value of the points that compose the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @returns {Array} - The position of the knobs.\n */\nexport const knobsValuesToKnobsPositions = (\n values: (number | undefined)[],\n inverseStepValue: number,\n minPointValue: number\n): number[] => {\n const knobsPositions: number[] = [];\n\n values.forEach((value, index) => {\n knobsPositions[index] = scaledValueToKnobsPositionValue(\n value,\n minPointValue,\n inverseStepValue\n );\n });\n\n return knobsPositions;\n};\n\n/**\n * Transform the received knobs positions into knob values\n *\n * @param {Object} knobPositions - The values of the slider.\n * @param {Number} stepValue - The calculated separation between\n * the value of the points that compose the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @returns {Array} - The position of the knobs.\n */\nexport const knobsPositionsToKnobsValues = (\n knobPositions: number[],\n stepValue: number,\n minPointValue: number\n): number[] => {\n const knobsValues: number[] = [];\n\n knobPositions.forEach((value, index) => {\n knobsValues[index] = knobsPositionToScaledValue(\n value,\n minPointValue,\n stepValue\n );\n });\n\n return knobsValues;\n};\n\n/**\n * Calculates the separation between each value in the slider.\n *\n * @param {*} maxPointValue - The value of the last point in the slider from left to right.\n * @param {*} minPointValue - The value of the first point in the slider from left to right.\n * @param {*} divisionQuantity - How many subdivisions there are in the slider.\n */\nexport const calculateStepValue = (\n maxPointValue: number,\n minPointValue: number,\n divisionQuantity: number\n): number => Math.abs(maxPointValue - minPointValue) / divisionQuantity;\n\n/**\n * Generates the inline styles used for the track of each knob, applying colors if necessary.\n *\n * @param {Object} markProperties - The object provided by the user with\n * the desired configuration for the marks.\n * @param {Integer} markstep - The separation between marks.\n * @param {Integer} divisionQuantity - How many subdivisions there are in the slider.\n * @param {Integer} minPointValue - The value of the first point in the slider from\n * left to right.\n * @param {Integer} stepValue - The calculated separation between the values of the slider.\n * @param {Integer} markDigits - How many decimals the mark will show.\n * @param {Function} formatMark - A function provided by the user that is going to\n * be executed to format the mark text.\n * @param {Object} styles - the default styles for the marks.\n * @returns {Object} - An object with the for the marks.\n * @memberof HvSlider\n */\nexport const createMark = (\n markProperties: HvMarkProperty[],\n markstep: number,\n divisionQuantity: number,\n minPointValue: number,\n stepValue: number,\n markDigits: number,\n disabled: boolean,\n formatMark: (label: React.ReactNode) => React.ReactNode = (mark) => mark\n): {\n [key: number]: {\n label: string;\n style: CSSProperties;\n };\n} => {\n const marks: {\n [key: number]: {\n label: string;\n style: CSSProperties;\n };\n } = {};\n\n if (markProperties.length > 0) {\n markProperties.forEach((markProperty) => {\n if (typeof markProperty.position === \"number\") {\n marks[markProperty.position] = disabled\n ? {\n label: `${markProperty.label}`,\n style: {\n ...styles.disabledMark,\n },\n }\n : {\n label: `${markProperty.label}`,\n style: {\n ...styles.mark,\n },\n };\n }\n });\n } else {\n const roundedMarkStep = Math.floor(markstep);\n\n for (let index = 0; index <= divisionQuantity; index += roundedMarkStep) {\n let labelValue: React.ReactNode = knobsPositionToScaledValue(\n index,\n minPointValue,\n stepValue\n ).toFixed(markDigits);\n\n labelValue = formatMark?.(labelValue) || labelValue;\n\n marks[index] = disabled\n ? {\n label: `${labelValue}`,\n style: {\n ...styles.disabledMark,\n },\n }\n : {\n label: `${labelValue}`,\n style: {\n ...styles.mark,\n },\n };\n }\n }\n\n return marks;\n};\n\n/**\n * Generates the inline styles used for the track of each knob, applying colors if necessary.\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Object} styles - the default styles for the tracks.\n * @returns {Object} - An object with the style for each track.\n * @memberof HvSlider\n */\nexport const createTrackStyles = (\n knobProperties: HvKnobProperty[]\n): CSSProperties[] => {\n const trackStyles: CSSProperties[] = [];\n\n if (knobProperties.length > 0) {\n knobProperties.forEach((knobProperty, index) => {\n trackStyles[index] = { ...styles.track };\n if (knobProperty.color) {\n trackStyles[index].backgroundColor = knobProperty.trackColor;\n }\n });\n }\n\n return trackStyles;\n};\n\n/**\n * Generates the inline styles used for each knob, applying colors if specified.\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Object} styles - the default styles for the knobs.\n * @returns {Object} - An object with both the inner and outer styles for the knob.\n * @memberof HvSlider\n */\nexport const createKnobStyles = (\n knobProperties: HvKnobProperty[]\n): {\n knobInner: CSSProperties[];\n knobOuterStyle: CSSProperties[];\n} => {\n const knobInner: CSSProperties[] = [];\n const knobOuterStyle: CSSProperties[] = [];\n\n const lastItem = knobProperties.length - 1;\n if (knobProperties.length > 0) {\n knobProperties.forEach((knobProperty, index) => {\n knobInner[index] = { ...styles.knobInner };\n knobOuterStyle[index] = { ...styles.knobOuter };\n\n if (knobProperty.color) {\n knobInner[index].backgroundColor = knobProperty.color;\n knobOuterStyle[index].backgroundColor = \"transparent\";\n }\n\n if (knobProperty.hidden) {\n knobInner[index] = styles.knobHidden;\n if (index === lastItem) {\n knobInner[index] = { ...styles.knobHiddenLast };\n knobInner[index].backgroundColor = knobProperty.color;\n knobOuterStyle[index] = { ...styles.knobHidden };\n knobOuterStyle[index].backgroundColor = knobProperty.color;\n }\n }\n });\n }\n\n return {\n knobInner,\n knobOuterStyle,\n };\n};\n\n/**\n * Analyzes both the values and the default values to determine whether the slider is working in single mode.\n *\n * @param {Array} values - the values where the knobs are positioned when controlled.\n * @param {Array} defaultValues - the values where the knobs start when uncontrolled.\n * @returns {Boolean} - if true the slider should work as single slider\n */\nexport const isSingleSlider = (\n values: number[],\n defaultValues: (number | undefined)[]\n): boolean => {\n if (!(values?.length > 1)) {\n return defaultValues.length === 1;\n }\n return values.length === 1;\n};\n\n/**\n * Generates the default knob styles for each knob\n *\n * @param {Object} knobProperties - The object provided by the user with\n * the desired configuration for the knobs.\n * @param {Integer} numberOfKnobs - the default styles for the knobs.\n * @param {Object} theme - The theme to extract the colors.\n *\n * @returns {Object} - An object with both the inner and outer styles for the knob.\n * @memberof HvSlider\n */\nexport const generateDefaultKnobProperties = (\n numberOfKnobs: number = 1,\n disabled: boolean = false,\n knobPropertiesProp?: HvKnobProperty[]\n): HvKnobProperty[] => {\n let knobProperties = knobPropertiesProp || [];\n\n const defaultKnobStyles = {\n color: theme.colors.secondary,\n hoverColor: theme.colors.secondary,\n trackColor: theme.colors.secondary,\n dragColor: theme.colors.secondary,\n knobRingColor: theme.colors.atmo1,\n };\n\n const disabledKnobStyles = {\n color: theme.colors.secondary_60,\n hoverColor: theme.colors.secondary_60,\n trackColor: theme.colors.secondary_60,\n dragColor: theme.colors.secondary_60,\n knobRingColor: theme.colors.secondary_60,\n };\n\n if (knobProperties.length > 0) {\n knobProperties = knobProperties.slice(0, numberOfKnobs);\n knobProperties = knobProperties.map((knobProperty) => {\n if (!disabled) {\n return {\n ...disabledKnobStyles,\n ...knobProperty,\n };\n }\n return {\n ...defaultKnobStyles,\n ...knobProperty,\n };\n });\n } else {\n for (let i = 0; i < numberOfKnobs; i += 1) {\n if (!disabled) knobProperties.push(defaultKnobStyles);\n if (disabled) knobProperties.push(disabledKnobStyles);\n }\n }\n\n return knobProperties;\n};\n\nconst pushSlider = (\n index: number,\n inputIndex: number,\n inputValue: number\n): number => {\n const difference = index - inputIndex;\n\n return inputValue + difference;\n};\n\nexport const ensureValuesConsistency = (\n knobPositions: number[],\n inputIndex: number\n): number[] => {\n const newKnobsPosition: number[] = [...knobPositions];\n\n newKnobsPosition.forEach((value, index) => {\n if (Number.isNaN(value) || value == null) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex]\n );\n } else if (index < inputIndex && value > newKnobsPosition[inputIndex]) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex]\n );\n } else if (index > inputIndex && value < newKnobsPosition[inputIndex]) {\n newKnobsPosition[index] = pushSlider(\n index,\n inputIndex,\n newKnobsPosition[inputIndex]\n );\n }\n });\n\n return newKnobsPosition;\n};\n\nexport const convertStatusToArray = (\n length: number,\n status?: HvFormStatus | HvFormStatus[]\n): {\n arrayStatus?: HvFormStatus[];\n arrayDefaultStatus: (keyof typeof validationStates)[];\n} => {\n const result: {\n arrayStatus?: HvFormStatus[];\n arrayDefaultStatus: (keyof typeof validationStates)[];\n } = {\n arrayDefaultStatus: Array.from({ length }, () => validationStates.standBy),\n };\n\n if (status == null) {\n return result;\n }\n if (!Array.isArray(status)) {\n result.arrayStatus = Array.from({ length }, () => status);\n return result;\n }\n result.arrayStatus = status;\n\n return result;\n};\n\nexport const statusArrayToFormStatus = (\n arrayStatus: HvFormStatus[]\n): keyof typeof validationStates => {\n const invalid = arrayStatus.some(\n (status) => status === validationStates.invalid\n );\n\n if (invalid) return validationStates.invalid;\n\n const valid = arrayStatus.some((status) => status === validationStates.valid);\n\n if (valid) return validationStates.valid;\n\n return validationStates.standBy;\n};\n\nexport const knobsValuesToString = (\n knobsValues: number[],\n markDigits: number\n): string[] =>\n knobsValues.map((knobValue) =>\n Number.isNaN(knobValue) ? \"\" : knobValue.toFixed(markDigits)\n );\n\nexport const stringValuesToKnobs = (inputsValues: string[]): number[] =>\n inputsValues.map((inputValue) => parseFloat(inputValue));\n"],"names":["knobsPositionToScaledValue","sliderValue","minPointValue","stepValue","scaledValueToKnobsPositionValue","scaledValue","inverseStepValue","Math","floor","NaN","knobsValuesToKnobsPositions","values","knobsPositions","forEach","value","index","knobsPositionsToKnobsValues","knobPositions","knobsValues","calculateStepValue","maxPointValue","divisionQuantity","abs","createMark","markProperties","markstep","markDigits","disabled","formatMark","mark","marks","length","markProperty","position","label","style","styles","disabledMark","roundedMarkStep","labelValue","toFixed","createTrackStyles","knobProperties","trackStyles","knobProperty","track","color","backgroundColor","trackColor","createKnobStyles","knobInner","knobOuterStyle","lastItem","knobOuter","hidden","knobHidden","knobHiddenLast","isSingleSlider","defaultValues","generateDefaultKnobProperties","numberOfKnobs","knobPropertiesProp","defaultKnobStyles","theme","colors","secondary","hoverColor","dragColor","knobRingColor","atmo1","disabledKnobStyles","secondary_60","slice","map","i","push","pushSlider","inputIndex","inputValue","difference","ensureValuesConsistency","newKnobsPosition","Number","isNaN","convertStatusToArray","status","result","arrayDefaultStatus","Array","from","validationStates","standBy","isArray","arrayStatus","statusArrayToFormStatus","invalid","some","valid","knobsValuesToString","knobValue","stringValuesToKnobs","inputsValues","parseFloat"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-core",
|
|
3
|
-
"version": "5.28.
|
|
3
|
+
"version": "5.28.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Core React components for the NEXT Design System.",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"access": "public",
|
|
65
65
|
"directory": "package"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "10810bb1a106c1db54862892770cce8f9ad1b444",
|
|
68
68
|
"main": "dist/cjs/index.cjs",
|
|
69
69
|
"exports": {
|
|
70
70
|
".": {
|