@chayns-components/core 5.0.0-beta.519 → 5.0.0-beta.520
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/lib/components/slider/Slider.d.ts +1 -1
- package/lib/components/slider/Slider.js +5 -5
- package/lib/components/slider/Slider.js.map +1 -1
- package/lib/components/slider/Slider.styles.d.ts +1 -1
- package/lib/components/slider/Slider.styles.js +1 -1
- package/lib/components/slider/Slider.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
2
2
|
import { useTheme } from 'styled-components';
|
|
3
3
|
import { fillSlider } from '../../utils/slider';
|
|
4
|
-
import { StyledSlider, StyledSliderInput, StyledSliderThumb,
|
|
4
|
+
import { StyledSlider, StyledSliderInput, StyledSliderThumb, StyledSliderThumbLabel } from './Slider.styles';
|
|
5
5
|
const Slider = _ref => {
|
|
6
6
|
let {
|
|
7
7
|
maxValue,
|
|
@@ -11,7 +11,7 @@ const Slider = _ref => {
|
|
|
11
11
|
onChange,
|
|
12
12
|
interval,
|
|
13
13
|
thumbLabelFormatter,
|
|
14
|
-
|
|
14
|
+
shouldShowThumbLabel = false,
|
|
15
15
|
steps = 1
|
|
16
16
|
} = _ref;
|
|
17
17
|
const [fromValue, setFromValue] = useState(0);
|
|
@@ -158,10 +158,10 @@ const Slider = _ref => {
|
|
|
158
158
|
}), /*#__PURE__*/React.createElement(StyledSliderThumb, {
|
|
159
159
|
ref: fromSliderThumbRef,
|
|
160
160
|
$position: fromSliderThumbPosition
|
|
161
|
-
},
|
|
161
|
+
}, shouldShowThumbLabel && /*#__PURE__*/React.createElement(StyledSliderThumbLabel, null, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(fromValue) : fromValue)), interval && /*#__PURE__*/React.createElement(StyledSliderThumb, {
|
|
162
162
|
ref: toSliderThumbRef,
|
|
163
163
|
$position: toSliderThumbPosition
|
|
164
|
-
},
|
|
164
|
+
}, shouldShowThumbLabel && /*#__PURE__*/React.createElement(StyledSliderThumbLabel, null, typeof thumbLabelFormatter === 'function' ? thumbLabelFormatter(toValue) : toValue)), interval && /*#__PURE__*/React.createElement(StyledSliderInput, {
|
|
165
165
|
$max: maxValue,
|
|
166
166
|
$min: minValue,
|
|
167
167
|
$value: toValue,
|
|
@@ -174,7 +174,7 @@ const Slider = _ref => {
|
|
|
174
174
|
min: minValue,
|
|
175
175
|
onChange: handleControlToSlider,
|
|
176
176
|
onMouseUp: handleMouseUp
|
|
177
|
-
})), [interval, fromValue, steps, maxValue, minValue, handleInputChange, handleMouseUp, fromSliderThumbPosition,
|
|
177
|
+
})), [interval, fromValue, steps, maxValue, minValue, handleInputChange, handleMouseUp, fromSliderThumbPosition, shouldShowThumbLabel, thumbLabelFormatter, toSliderThumbPosition, toValue, handleControlToSlider]);
|
|
178
178
|
};
|
|
179
179
|
Slider.displayName = 'Slider';
|
|
180
180
|
export default Slider;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useTheme","fillSlider","StyledSlider","StyledSliderInput","StyledSliderThumb","StyledSliderThumbLable","Slider","_ref","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLable","steps","fromValue","setFromValue","toValue","setToValue","fromSliderRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","theme","handleMouseUp","from","Number","current","to","undefined","handleControlFromSlider","event","target","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","offsetWidth","toSliderThumbPosition","createElement","ref","$isInterval","type","step","max","min","onMouseUp","$max","$min","$value","$position","displayName"],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { fillSlider } from '../../utils/slider';\nimport {\n StyledSlider,\n StyledSliderInput,\n StyledSliderThumb,\n StyledSliderThumbLable,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n maxValue: number;\n minValue: number;\n}\n\nexport type SliderProps = {\n /**\n * The range that can be selected with two thumbs..\n */\n interval?: SliderInterval;\n /**\n * The maximum value of the slider.\n */\n maxValue: number;\n /**\n * The minimum value of the slider.\n */\n minValue: number;\n /**\n *\n */\n onSelect?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Function that will be executed when the value is changed.\n */\n onChange?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Whether the current value should be displayed inside the slider thumb.\n */\n shouldShowThumbLable?: boolean;\n /**\n * The steps of the slider.\n */\n steps?: number;\n /**\n * A function to format the thumb label.\n */\n thumbLabelFormatter?: (value: number) => string;\n /**\n * the Value that the slider should have.\n */\n value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n maxValue,\n minValue,\n value,\n onSelect,\n onChange,\n interval,\n thumbLabelFormatter,\n shouldShowThumbLable = false,\n steps = 1,\n}) => {\n const [fromValue, setFromValue] = useState(0);\n const [toValue, setToValue] = useState(maxValue);\n\n const fromSliderRef = useRef<HTMLInputElement>(null);\n const toSliderRef = useRef<HTMLInputElement>(null);\n const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n const toSliderThumbRef = useRef<HTMLDivElement>(null);\n\n const theme = useTheme();\n\n /**\n * This function sets the value\n */\n useEffect(() => {\n if (typeof value !== 'number') {\n return;\n }\n\n if (value >= minValue && value <= maxValue) {\n setFromValue(value);\n }\n }, [maxValue, minValue, value]);\n\n useEffect(() => {\n if (fromValue > toValue) {\n setFromValue(toValue);\n }\n\n if (toValue < fromValue) {\n setToValue(fromValue);\n }\n }, [fromValue, toValue]);\n\n const handleMouseUp = useCallback(() => {\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n }, [interval, onSelect]);\n\n const handleControlFromSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n setFromValue(Number(event.target.value));\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n theme,\n });\n\n if (from > to) {\n fromSliderRef.current.value = String(to);\n } else {\n fromSliderRef.current.value = String(from);\n }\n },\n [onChange, theme],\n );\n\n const handleControlToSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n setToValue(Number(event.target.value));\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n theme,\n });\n\n if (from <= to) {\n toSliderRef.current.value = String(to);\n } else {\n toSliderRef.current.value = String(from);\n }\n },\n [onChange, theme],\n );\n\n useEffect(() => {\n if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n return;\n }\n\n setFromValue(interval.minValue);\n setToValue(interval.maxValue);\n\n fromSliderRef.current.value = String(interval.minValue);\n toSliderRef.current.value = String(interval.maxValue);\n\n fillSlider({\n fromSlider: fromSliderRef.current,\n toSlider: toSliderRef.current,\n theme,\n });\n // Note: interval can´t be in the deps because of rerender\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [theme]);\n\n /**\n * This function updates the value\n */\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const newValue = Number(event.target.value);\n\n if (interval) {\n handleControlFromSlider(event);\n\n return;\n }\n\n setFromValue(newValue);\n\n if (onChange) {\n onChange(newValue);\n }\n },\n [handleControlFromSlider, interval, onChange],\n );\n\n const fromSliderThumbPosition = useMemo(() => {\n if (fromSliderRef.current && fromSliderThumbRef.current) {\n return (\n ((fromValue - minValue) / (maxValue - minValue)) *\n (fromSliderRef.current.offsetWidth - fromSliderThumbRef.current.offsetWidth / 2)\n );\n }\n return 0;\n }, [fromValue, maxValue, minValue]);\n\n const toSliderThumbPosition = useMemo(() => {\n if (toSliderRef.current && toSliderThumbRef.current) {\n return (\n ((toValue - minValue) / (maxValue - minValue)) *\n (toSliderRef.current.offsetWidth - toSliderThumbRef.current.offsetWidth / 2)\n );\n }\n return 0;\n }, [toValue, maxValue, minValue]);\n\n return useMemo(\n () => (\n <StyledSlider>\n <StyledSliderInput\n ref={fromSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={fromValue}\n step={steps}\n max={maxValue}\n min={minValue}\n onChange={handleInputChange}\n onMouseUp={handleMouseUp}\n $max={maxValue}\n $min={minValue}\n $value={fromValue}\n />\n <StyledSliderThumb ref={fromSliderThumbRef} $position={fromSliderThumbPosition}>\n {shouldShowThumbLable && (\n <StyledSliderThumbLable>\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(fromValue)\n : fromValue}\n </StyledSliderThumbLable>\n )}\n </StyledSliderThumb>\n {interval && (\n <StyledSliderThumb ref={toSliderThumbRef} $position={toSliderThumbPosition}>\n {shouldShowThumbLable && (\n <StyledSliderThumbLable>\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(toValue)\n : toValue}\n </StyledSliderThumbLable>\n )}\n </StyledSliderThumb>\n )}\n {interval && (\n <StyledSliderInput\n $max={maxValue}\n $min={minValue}\n $value={toValue}\n ref={toSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={toValue}\n step={steps}\n max={maxValue}\n min={minValue}\n onChange={handleControlToSlider}\n onMouseUp={handleMouseUp}\n />\n )}\n </StyledSlider>\n ),\n [\n interval,\n fromValue,\n steps,\n maxValue,\n minValue,\n handleInputChange,\n handleMouseUp,\n fromSliderThumbPosition,\n shouldShowThumbLable,\n thumbLabelFormatter,\n toSliderThumbPosition,\n toValue,\n handleControlToSlider,\n ],\n );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAqBC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACjG,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SACIC,YAAY,EACZC,iBAAiB,EACjBC,iBAAiB,EACjBC,sBAAsB,QACnB,iBAAiB;AA8CxB,MAAMC,MAAuB,GAAGC,IAAA,IAU1B;EAAA,IAV2B;IAC7BC,QAAQ;IACRC,QAAQ;IACRC,KAAK;IACLC,QAAQ;IACRC,QAAQ;IACRC,QAAQ;IACRC,mBAAmB;IACnBC,oBAAoB,GAAG,KAAK;IAC5BC,KAAK,GAAG;EACZ,CAAC,GAAAT,IAAA;EACG,MAAM,CAACU,SAAS,EAAEC,YAAY,CAAC,GAAGnB,QAAQ,CAAC,CAAC,CAAC;EAC7C,MAAM,CAACoB,OAAO,EAAEC,UAAU,CAAC,GAAGrB,QAAQ,CAACS,QAAQ,CAAC;EAEhD,MAAMa,aAAa,GAAGvB,MAAM,CAAmB,IAAI,CAAC;EACpD,MAAMwB,WAAW,GAAGxB,MAAM,CAAmB,IAAI,CAAC;EAClD,MAAMyB,kBAAkB,GAAGzB,MAAM,CAAiB,IAAI,CAAC;EACvD,MAAM0B,gBAAgB,GAAG1B,MAAM,CAAiB,IAAI,CAAC;EAErD,MAAM2B,KAAK,GAAGzB,QAAQ,CAAC,CAAC;;EAExB;AACJ;AACA;EACIJ,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOc,KAAK,KAAK,QAAQ,EAAE;MAC3B;IACJ;IAEA,IAAIA,KAAK,IAAID,QAAQ,IAAIC,KAAK,IAAIF,QAAQ,EAAE;MACxCU,YAAY,CAACR,KAAK,CAAC;IACvB;EACJ,CAAC,EAAE,CAACF,QAAQ,EAAEC,QAAQ,EAAEC,KAAK,CAAC,CAAC;EAE/Bd,SAAS,CAAC,MAAM;IACZ,IAAIqB,SAAS,GAAGE,OAAO,EAAE;MACrBD,YAAY,CAACC,OAAO,CAAC;IACzB;IAEA,IAAIA,OAAO,GAAGF,SAAS,EAAE;MACrBG,UAAU,CAACH,SAAS,CAAC;IACzB;EACJ,CAAC,EAAE,CAACA,SAAS,EAAEE,OAAO,CAAC,CAAC;EAExB,MAAMO,aAAa,GAAG/B,WAAW,CAAC,MAAM;IACpC,MAAMgC,IAAI,GAAGC,MAAM,CAACP,aAAa,CAACQ,OAAO,EAAEnB,KAAK,CAAC;IACjD,MAAMoB,EAAE,GAAGF,MAAM,CAACN,WAAW,CAACO,OAAO,EAAEnB,KAAK,CAAC;IAE7C,IAAI,OAAOC,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CACJE,QAAQ,GAAGkB,SAAS,GAAGJ,IAAI,EAC3Bd,QAAQ,GAAG;QAAEL,QAAQ,EAAEsB,EAAE;QAAErB,QAAQ,EAAEkB;MAAK,CAAC,GAAGI,SAClD,CAAC;IACL;EACJ,CAAC,EAAE,CAAClB,QAAQ,EAAEF,QAAQ,CAAC,CAAC;EAExB,MAAMqB,uBAAuB,GAAGrC,WAAW,CACtCsC,KAAoC,IAAK;IACtC,IAAI,CAACZ,aAAa,CAACQ,OAAO,IAAI,CAACP,WAAW,CAACO,OAAO,EAAE;MAChD;IACJ;IAEAX,YAAY,CAACU,MAAM,CAACK,KAAK,CAACC,MAAM,CAACxB,KAAK,CAAC,CAAC;IAExC,MAAMiB,IAAI,GAAGC,MAAM,CAACP,aAAa,CAACQ,OAAO,CAACnB,KAAK,CAAC;IAChD,MAAMoB,EAAE,GAAGF,MAAM,CAACN,WAAW,CAACO,OAAO,CAACnB,KAAK,CAAC;IAE5C,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACmB,SAAS,EAAE;QAAEvB,QAAQ,EAAEsB,EAAE;QAAErB,QAAQ,EAAEkB;MAAK,CAAC,CAAC;IACzD;IAEA1B,UAAU,CAAC;MACPkC,QAAQ,EAAEb,WAAW,CAACO,OAAO;MAC7BO,UAAU,EAAEf,aAAa,CAACQ,OAAO;MACjCJ;IACJ,CAAC,CAAC;IAEF,IAAIE,IAAI,GAAGG,EAAE,EAAE;MACXT,aAAa,CAACQ,OAAO,CAACnB,KAAK,GAAG2B,MAAM,CAACP,EAAE,CAAC;IAC5C,CAAC,MAAM;MACHT,aAAa,CAACQ,OAAO,CAACnB,KAAK,GAAG2B,MAAM,CAACV,IAAI,CAAC;IAC9C;EACJ,CAAC,EACD,CAACf,QAAQ,EAAEa,KAAK,CACpB,CAAC;EAED,MAAMa,qBAAqB,GAAG3C,WAAW,CACpCsC,KAAoC,IAAK;IACtC,IAAI,CAACZ,aAAa,CAACQ,OAAO,IAAI,CAACP,WAAW,CAACO,OAAO,EAAE;MAChD;IACJ;IAEAT,UAAU,CAACQ,MAAM,CAACK,KAAK,CAACC,MAAM,CAACxB,KAAK,CAAC,CAAC;IAEtC,MAAMiB,IAAI,GAAGC,MAAM,CAACP,aAAa,CAACQ,OAAO,CAACnB,KAAK,CAAC;IAChD,MAAMoB,EAAE,GAAGF,MAAM,CAACN,WAAW,CAACO,OAAO,CAACnB,KAAK,CAAC;IAE5C,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACmB,SAAS,EAAE;QAAEvB,QAAQ,EAAEsB,EAAE;QAAErB,QAAQ,EAAEkB;MAAK,CAAC,CAAC;IACzD;IAEA1B,UAAU,CAAC;MACPkC,QAAQ,EAAEb,WAAW,CAACO,OAAO;MAC7BO,UAAU,EAAEf,aAAa,CAACQ,OAAO;MACjCJ;IACJ,CAAC,CAAC;IAEF,IAAIE,IAAI,IAAIG,EAAE,EAAE;MACZR,WAAW,CAACO,OAAO,CAACnB,KAAK,GAAG2B,MAAM,CAACP,EAAE,CAAC;IAC1C,CAAC,MAAM;MACHR,WAAW,CAACO,OAAO,CAACnB,KAAK,GAAG2B,MAAM,CAACV,IAAI,CAAC;IAC5C;EACJ,CAAC,EACD,CAACf,QAAQ,EAAEa,KAAK,CACpB,CAAC;EAED7B,SAAS,CAAC,MAAM;IACZ,IAAI,CAACyB,aAAa,CAACQ,OAAO,IAAI,CAACP,WAAW,CAACO,OAAO,IAAI,CAAChB,QAAQ,EAAE;MAC7D;IACJ;IAEAK,YAAY,CAACL,QAAQ,CAACJ,QAAQ,CAAC;IAC/BW,UAAU,CAACP,QAAQ,CAACL,QAAQ,CAAC;IAE7Ba,aAAa,CAACQ,OAAO,CAACnB,KAAK,GAAG2B,MAAM,CAACxB,QAAQ,CAACJ,QAAQ,CAAC;IACvDa,WAAW,CAACO,OAAO,CAACnB,KAAK,GAAG2B,MAAM,CAACxB,QAAQ,CAACL,QAAQ,CAAC;IAErDP,UAAU,CAAC;MACPmC,UAAU,EAAEf,aAAa,CAACQ,OAAO;MACjCM,QAAQ,EAAEb,WAAW,CAACO,OAAO;MAC7BJ;IACJ,CAAC,CAAC;IACF;IACA;EACJ,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;;EAEX;AACJ;AACA;EACI,MAAMc,iBAAiB,GAAG5C,WAAW,CAChCsC,KAAoC,IAAK;IACtC,MAAMO,QAAQ,GAAGZ,MAAM,CAACK,KAAK,CAACC,MAAM,CAACxB,KAAK,CAAC;IAE3C,IAAIG,QAAQ,EAAE;MACVmB,uBAAuB,CAACC,KAAK,CAAC;MAE9B;IACJ;IAEAf,YAAY,CAACsB,QAAQ,CAAC;IAEtB,IAAI5B,QAAQ,EAAE;MACVA,QAAQ,CAAC4B,QAAQ,CAAC;IACtB;EACJ,CAAC,EACD,CAACR,uBAAuB,EAAEnB,QAAQ,EAAED,QAAQ,CAChD,CAAC;EAED,MAAM6B,uBAAuB,GAAG5C,OAAO,CAAC,MAAM;IAC1C,IAAIwB,aAAa,CAACQ,OAAO,IAAIN,kBAAkB,CAACM,OAAO,EAAE;MACrD,OACK,CAACZ,SAAS,GAAGR,QAAQ,KAAKD,QAAQ,GAAGC,QAAQ,CAAC,IAC9CY,aAAa,CAACQ,OAAO,CAACa,WAAW,GAAGnB,kBAAkB,CAACM,OAAO,CAACa,WAAW,GAAG,CAAC,CAAC;IAExF;IACA,OAAO,CAAC;EACZ,CAAC,EAAE,CAACzB,SAAS,EAAET,QAAQ,EAAEC,QAAQ,CAAC,CAAC;EAEnC,MAAMkC,qBAAqB,GAAG9C,OAAO,CAAC,MAAM;IACxC,IAAIyB,WAAW,CAACO,OAAO,IAAIL,gBAAgB,CAACK,OAAO,EAAE;MACjD,OACK,CAACV,OAAO,GAAGV,QAAQ,KAAKD,QAAQ,GAAGC,QAAQ,CAAC,IAC5Ca,WAAW,CAACO,OAAO,CAACa,WAAW,GAAGlB,gBAAgB,CAACK,OAAO,CAACa,WAAW,GAAG,CAAC,CAAC;IAEpF;IACA,OAAO,CAAC;EACZ,CAAC,EAAE,CAACvB,OAAO,EAAEX,QAAQ,EAAEC,QAAQ,CAAC,CAAC;EAEjC,OAAOZ,OAAO,CACV,mBACIH,KAAA,CAAAkD,aAAA,CAAC1C,YAAY,qBACTR,KAAA,CAAAkD,aAAA,CAACzC,iBAAiB;IACd0C,GAAG,EAAExB,aAAc;IACnByB,WAAW,EAAE,CAAC,CAACjC,QAAS;IACxBkC,IAAI,EAAC,OAAO;IACZrC,KAAK,EAAEO,SAAU;IACjB+B,IAAI,EAAEhC,KAAM;IACZiC,GAAG,EAAEzC,QAAS;IACd0C,GAAG,EAAEzC,QAAS;IACdG,QAAQ,EAAE2B,iBAAkB;IAC5BY,SAAS,EAAEzB,aAAc;IACzB0B,IAAI,EAAE5C,QAAS;IACf6C,IAAI,EAAE5C,QAAS;IACf6C,MAAM,EAAErC;EAAU,CACrB,CAAC,eACFvB,KAAA,CAAAkD,aAAA,CAACxC,iBAAiB;IAACyC,GAAG,EAAEtB,kBAAmB;IAACgC,SAAS,EAAEd;EAAwB,GAC1E1B,oBAAoB,iBACjBrB,KAAA,CAAAkD,aAAA,CAACvC,sBAAsB,QAClB,OAAOS,mBAAmB,KAAK,UAAU,GACpCA,mBAAmB,CAACG,SAAS,CAAC,GAC9BA,SACc,CAEb,CAAC,EACnBJ,QAAQ,iBACLnB,KAAA,CAAAkD,aAAA,CAACxC,iBAAiB;IAACyC,GAAG,EAAErB,gBAAiB;IAAC+B,SAAS,EAAEZ;EAAsB,GACtE5B,oBAAoB,iBACjBrB,KAAA,CAAAkD,aAAA,CAACvC,sBAAsB,QAClB,OAAOS,mBAAmB,KAAK,UAAU,GACpCA,mBAAmB,CAACK,OAAO,CAAC,GAC5BA,OACc,CAEb,CACtB,EACAN,QAAQ,iBACLnB,KAAA,CAAAkD,aAAA,CAACzC,iBAAiB;IACdiD,IAAI,EAAE5C,QAAS;IACf6C,IAAI,EAAE5C,QAAS;IACf6C,MAAM,EAAEnC,OAAQ;IAChB0B,GAAG,EAAEvB,WAAY;IACjBwB,WAAW,EAAE,CAAC,CAACjC,QAAS;IACxBkC,IAAI,EAAC,OAAO;IACZrC,KAAK,EAAES,OAAQ;IACf6B,IAAI,EAAEhC,KAAM;IACZiC,GAAG,EAAEzC,QAAS;IACd0C,GAAG,EAAEzC,QAAS;IACdG,QAAQ,EAAE0B,qBAAsB;IAChCa,SAAS,EAAEzB;EAAc,CAC5B,CAEK,CACjB,EACD,CACIb,QAAQ,EACRI,SAAS,EACTD,KAAK,EACLR,QAAQ,EACRC,QAAQ,EACR8B,iBAAiB,EACjBb,aAAa,EACbe,uBAAuB,EACvB1B,oBAAoB,EACpBD,mBAAmB,EACnB6B,qBAAqB,EACrBxB,OAAO,EACPmB,qBAAqB,CAE7B,CAAC;AACL,CAAC;AAEDhC,MAAM,CAACkD,WAAW,GAAG,QAAQ;AAE7B,eAAelD,MAAM"}
|
|
1
|
+
{"version":3,"file":"Slider.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","useTheme","fillSlider","StyledSlider","StyledSliderInput","StyledSliderThumb","StyledSliderThumbLabel","Slider","_ref","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","toValue","setToValue","fromSliderRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","theme","handleMouseUp","from","Number","current","to","undefined","handleControlFromSlider","event","target","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","offsetWidth","toSliderThumbPosition","createElement","ref","$isInterval","type","step","max","min","onMouseUp","$max","$min","$value","$position","displayName"],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { fillSlider } from '../../utils/slider';\nimport {\n StyledSlider,\n StyledSliderInput,\n StyledSliderThumb,\n StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n maxValue: number;\n minValue: number;\n}\n\nexport type SliderProps = {\n /**\n * The range that can be selected with two thumbs..\n */\n interval?: SliderInterval;\n /**\n * The maximum value of the slider.\n */\n maxValue: number;\n /**\n * The minimum value of the slider.\n */\n minValue: number;\n /**\n *\n */\n onSelect?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Function that will be executed when the value is changed.\n */\n onChange?: (value?: number, interval?: SliderInterval) => void;\n /**\n * Whether the current value should be displayed inside the slider thumb.\n */\n shouldShowThumbLabel?: boolean;\n /**\n * The steps of the slider.\n */\n steps?: number;\n /**\n * A function to format the thumb label.\n */\n thumbLabelFormatter?: (value: number) => string;\n /**\n * the Value that the slider should have.\n */\n value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n maxValue,\n minValue,\n value,\n onSelect,\n onChange,\n interval,\n thumbLabelFormatter,\n shouldShowThumbLabel = false,\n steps = 1,\n}) => {\n const [fromValue, setFromValue] = useState(0);\n const [toValue, setToValue] = useState(maxValue);\n\n const fromSliderRef = useRef<HTMLInputElement>(null);\n const toSliderRef = useRef<HTMLInputElement>(null);\n const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n const toSliderThumbRef = useRef<HTMLDivElement>(null);\n\n const theme = useTheme();\n\n /**\n * This function sets the value\n */\n useEffect(() => {\n if (typeof value !== 'number') {\n return;\n }\n\n if (value >= minValue && value <= maxValue) {\n setFromValue(value);\n }\n }, [maxValue, minValue, value]);\n\n useEffect(() => {\n if (fromValue > toValue) {\n setFromValue(toValue);\n }\n\n if (toValue < fromValue) {\n setToValue(fromValue);\n }\n }, [fromValue, toValue]);\n\n const handleMouseUp = useCallback(() => {\n const from = Number(fromSliderRef.current?.value);\n const to = Number(toSliderRef.current?.value);\n\n if (typeof onSelect === 'function') {\n onSelect(\n interval ? undefined : from,\n interval ? { maxValue: to, minValue: from } : undefined,\n );\n }\n }, [interval, onSelect]);\n\n const handleControlFromSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n setFromValue(Number(event.target.value));\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n theme,\n });\n\n if (from > to) {\n fromSliderRef.current.value = String(to);\n } else {\n fromSliderRef.current.value = String(from);\n }\n },\n [onChange, theme],\n );\n\n const handleControlToSlider = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n if (!fromSliderRef.current || !toSliderRef.current) {\n return;\n }\n\n setToValue(Number(event.target.value));\n\n const from = Number(fromSliderRef.current.value);\n const to = Number(toSliderRef.current.value);\n\n if (typeof onChange === 'function') {\n onChange(undefined, { maxValue: to, minValue: from });\n }\n\n fillSlider({\n toSlider: toSliderRef.current,\n fromSlider: fromSliderRef.current,\n theme,\n });\n\n if (from <= to) {\n toSliderRef.current.value = String(to);\n } else {\n toSliderRef.current.value = String(from);\n }\n },\n [onChange, theme],\n );\n\n useEffect(() => {\n if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n return;\n }\n\n setFromValue(interval.minValue);\n setToValue(interval.maxValue);\n\n fromSliderRef.current.value = String(interval.minValue);\n toSliderRef.current.value = String(interval.maxValue);\n\n fillSlider({\n fromSlider: fromSliderRef.current,\n toSlider: toSliderRef.current,\n theme,\n });\n // Note: interval can´t be in the deps because of rerender\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [theme]);\n\n /**\n * This function updates the value\n */\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const newValue = Number(event.target.value);\n\n if (interval) {\n handleControlFromSlider(event);\n\n return;\n }\n\n setFromValue(newValue);\n\n if (onChange) {\n onChange(newValue);\n }\n },\n [handleControlFromSlider, interval, onChange],\n );\n\n const fromSliderThumbPosition = useMemo(() => {\n if (fromSliderRef.current && fromSliderThumbRef.current) {\n return (\n ((fromValue - minValue) / (maxValue - minValue)) *\n (fromSliderRef.current.offsetWidth - fromSliderThumbRef.current.offsetWidth / 2)\n );\n }\n return 0;\n }, [fromValue, maxValue, minValue]);\n\n const toSliderThumbPosition = useMemo(() => {\n if (toSliderRef.current && toSliderThumbRef.current) {\n return (\n ((toValue - minValue) / (maxValue - minValue)) *\n (toSliderRef.current.offsetWidth - toSliderThumbRef.current.offsetWidth / 2)\n );\n }\n return 0;\n }, [toValue, maxValue, minValue]);\n\n return useMemo(\n () => (\n <StyledSlider>\n <StyledSliderInput\n ref={fromSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={fromValue}\n step={steps}\n max={maxValue}\n min={minValue}\n onChange={handleInputChange}\n onMouseUp={handleMouseUp}\n $max={maxValue}\n $min={minValue}\n $value={fromValue}\n />\n <StyledSliderThumb ref={fromSliderThumbRef} $position={fromSliderThumbPosition}>\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel>\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(fromValue)\n : fromValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n {interval && (\n <StyledSliderThumb ref={toSliderThumbRef} $position={toSliderThumbPosition}>\n {shouldShowThumbLabel && (\n <StyledSliderThumbLabel>\n {typeof thumbLabelFormatter === 'function'\n ? thumbLabelFormatter(toValue)\n : toValue}\n </StyledSliderThumbLabel>\n )}\n </StyledSliderThumb>\n )}\n {interval && (\n <StyledSliderInput\n $max={maxValue}\n $min={minValue}\n $value={toValue}\n ref={toSliderRef}\n $isInterval={!!interval}\n type=\"range\"\n value={toValue}\n step={steps}\n max={maxValue}\n min={minValue}\n onChange={handleControlToSlider}\n onMouseUp={handleMouseUp}\n />\n )}\n </StyledSlider>\n ),\n [\n interval,\n fromValue,\n steps,\n maxValue,\n minValue,\n handleInputChange,\n handleMouseUp,\n fromSliderThumbPosition,\n shouldShowThumbLabel,\n thumbLabelFormatter,\n toSliderThumbPosition,\n toValue,\n handleControlToSlider,\n ],\n );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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"}
|
|
@@ -12,5 +12,5 @@ type StyledSliderThumbProps = WithTheme<{
|
|
|
12
12
|
$position: number;
|
|
13
13
|
}>;
|
|
14
14
|
export declare const StyledSliderThumb: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSliderThumbProps>>;
|
|
15
|
-
export declare const
|
|
15
|
+
export declare const StyledSliderThumbLabel: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
|
|
16
16
|
export {};
|
|
@@ -94,7 +94,7 @@ export const StyledSliderThumb = styled.div`
|
|
|
94
94
|
padding: 0 8px;
|
|
95
95
|
white-space: nowrap;
|
|
96
96
|
`;
|
|
97
|
-
export const
|
|
97
|
+
export const StyledSliderThumbLabel = styled.span`
|
|
98
98
|
pointer-events: none;
|
|
99
99
|
`;
|
|
100
100
|
//# sourceMappingURL=Slider.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.styles.js","names":["styled","css","StyledSlider","div","StyledSliderInput","input","_ref","$isInterval","_ref2","theme","$min","$max","$value","StyledSliderThumb","_ref3","_ref4","$position","
|
|
1
|
+
{"version":3,"file":"Slider.styles.js","names":["styled","css","StyledSlider","div","StyledSliderInput","input","_ref","$isInterval","_ref2","theme","$min","$max","$value","StyledSliderThumb","_ref3","_ref4","$position","StyledSliderThumbLabel","span"],"sources":["../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n width: 100%;\n height: 30px;\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n $min: number;\n $max: number;\n $value: number;\n $isInterval: boolean;\n}>;\n\nexport const StyledSliderInput = styled.input<StyledSliderInputProps>`\n position: absolute;\n width: 100%;\n border-radius: 100px;\n -webkit-appearance: none;\n height: 10px;\n outline: none;\n cursor: pointer !important;\n z-index: 2;\n appearance: none;\n pointer-events: ${({ $isInterval }) => ($isInterval ? 'none' : 'all')};\n\n ${({ $isInterval, theme, $min, $max, $value }: StyledSliderInputProps) =>\n !$isInterval &&\n css`\n background: ${`linear-gradient(\n to right,\n ${theme['409'] ?? ''} 0%,\n ${theme['409'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${theme['403'] ?? ''}\n ${(($value - $min) / ($max - $min)) * 100}%,\n ${theme['403'] ?? ''}\n )`};\n `}\n\n // Slider thumb for chrome\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 20px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n\n // slider thumb for firefox\n &::-moz-range-thumb {\n width: 20px;\n height: 20px;\n cursor: pointer;\n opacity: 0;\n pointer-events: all;\n position: relative;\n }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{ $position: number }>;\n\nexport const StyledSliderThumb = styled.div<StyledSliderThumbProps>`\n min-width: 20px;\n height: 20px;\n background-color: ${({ theme }: StyledSliderThumbProps) => theme['100']};\n cursor: pointer;\n border-radius: 100px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n pointer-events: none;\n z-index: 3;\n left: ${({ $position }) => $position}px;\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n white-space: nowrap;\n`;\n\nexport const StyledSliderThumbLabel = styled.span`\n pointer-events: none;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,YAAY,GAAGF,MAAM,CAACG,GAAI;AACvC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AASD,OAAO,MAAMC,iBAAiB,GAAGJ,MAAM,CAACK,KAA8B;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,MAAM,GAAG,KAAK;AAAA,CAAE;AAC1E;AACA,MAAMC,KAAA;EAAA,IAAC;IAAED,WAAW;IAAEE,KAAK;IAAEC,IAAI;IAAEC,IAAI;IAAEC;EAA+B,CAAC,GAAAJ,KAAA;EAAA,OACjE,CAACD,WAAW,IACZN,GAAI;AACZ,0BAA2B;AAC3B;AACA,cAAcQ,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,cAAcA,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,cAAe,CAACG,MAAM,GAAGF,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAI;AACtD,cAAcD,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,cAAe,CAACG,MAAM,GAAGF,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAI;AACtD,cAAcD,KAAK,CAAC,KAAK,CAAC,IAAI,EAAG;AACjC,UAAW;AACX,SAAS;AAAA,CAAC;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMI,iBAAiB,GAAGb,MAAM,CAACG,GAA4B;AACpE;AACA;AACA,wBAAwBW,KAAA;EAAA,IAAC;IAAEL;EAA8B,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA,YAAYM,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAKC,SAAS;AAAA,CAAC;AACzC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,sBAAsB,GAAGjB,MAAM,CAACkB,IAAK;AAClD;AACA,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.520",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "513b090e2a587338cad189441abb8db0fe5f14e7"
|
|
77
77
|
}
|