@chayns-components/devalue-slider 5.0.0-beta.769 → 5.0.0-beta.770

package/lib/cjs/components/DevalueSlider.js

@@ -15,6 +15,7 @@ const DevalueSlider = ({
   devalueBackgroundColor = 'green',
   devalueTime,
   isDisabled,
+  label = 'EINLÖSEN',
   onDevalue,
   onChange,
   onComplete
@@ -49,7 +50,8 @@ const DevalueSlider = ({
     color: backgroundColor,
     devalueColor: devalueBackgroundColor,
     onComplete: handleCompleted,
-    onChange: onChange
+    onChange: onChange,
+    trackText: label
   });
 };
 var _default = exports.default = DevalueSlider;

package/lib/cjs/components/DevalueSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevalueSlider.js","names":["_react","_interopRequireWildcard","require","_Slider","_interopRequireDefault","_Timer","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DevalueSlider","backgroundColor","devalueBackgroundColor","devalueTime","isDisabled","onDevalue","onChange","onComplete","timerDevalueTime","setTimerDevalueTime","useState","sliderRef","useRef","useEffect","handleCompleted","useCallback","Date","_sliderRef$current2","_sliderRef$current","current","disable","enable","createElement","color","ref","devalueColor","_default","exports"],"sources":["../../../src/components/DevalueSlider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState, type CSSProperties } from 'react';\nimport Slider, { type SliderRef } from './slider/Slider';\nimport Timer from './timer/Timer';\n\nexport type DevalueSliderOnDevalueHandlerResult = { success: boolean };\nexport type DevalueSliderOnDevalueHandler = () => Promise<DevalueSliderOnDevalueHandlerResult>;\n\nexport type DevalueSliderOnChangeHandler = (relativeValue: number) => void;\nexport type DevalueSliderOnCompleteHandler = () => void;\n\nexport type DevalueSliderProps = {\n    /**\n     * The basic color of the slider.\n     * This color is the background of the track before the slider is devalued.\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * The devalue color of the slider.\n     * This color fills the track from the left on user movement.\n     * This color is the background of the timer after the slider is devalued.\n     */\n    devalueBackgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * If this slider was devalued, provide the time when it was devalued.\n     * This will show a timer.\n     */\n    devalueTime?: Date;\n    /**\n     * Disables the slider and cancels any active drags.\n     */\n    isDisabled?: boolean;\n    /**\n     * This function is called when the slider is devalued.\n     */\n    onDevalue?: DevalueSliderOnDevalueHandler;\n    /**\n     * This function is called when the slider value changes.\n     * With this function you can keep track of the movement of the slider.\n     */\n    onChange?: DevalueSliderOnChangeHandler;\n    /**\n     * This function is called when the slider is completed.\n     * The slider is completed when the user devalues the slider\n     * and the animation is completed.\n     */\n    onComplete?: DevalueSliderOnCompleteHandler;\n};\n\nconst DevalueSlider: React.FC<DevalueSliderProps> = ({\n    backgroundColor = 'red',\n    devalueBackgroundColor = 'green',\n    devalueTime,\n    isDisabled,\n    onDevalue,\n    onChange,\n    onComplete,\n}) => {\n    const [timerDevalueTime, setTimerDevalueTime] = useState(devalueTime);\n\n    const sliderRef = useRef<SliderRef>(null);\n\n    useEffect(() => {\n        setTimerDevalueTime(devalueTime);\n    }, [devalueTime]);\n\n    const handleCompleted = useCallback(() => {\n        setTimerDevalueTime(new Date());\n\n        onComplete?.();\n    }, [onComplete]);\n\n    useEffect(() => {\n        if (isDisabled) {\n            sliderRef.current?.disable();\n\n            return;\n        }\n\n        sliderRef.current?.enable();\n    }, [isDisabled]);\n\n    if (timerDevalueTime) {\n        return <Timer color={devalueBackgroundColor} devalueTime={timerDevalueTime} />;\n    }\n\n    return (\n        <Slider\n            ref={sliderRef}\n            onDevalue={onDevalue}\n            color={backgroundColor}\n            devalueColor={devalueBackgroundColor}\n            onComplete={handleCompleted}\n            onChange={onChange}\n        />\n    );\n};\n\nexport default DevalueSlider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DevalueSlider.js","names":["_react","_interopRequireWildcard","require","_Slider","_interopRequireDefault","_Timer","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DevalueSlider","backgroundColor","devalueBackgroundColor","devalueTime","isDisabled","label","onDevalue","onChange","onComplete","timerDevalueTime","setTimerDevalueTime","useState","sliderRef","useRef","useEffect","handleCompleted","useCallback","Date","_sliderRef$current2","_sliderRef$current","current","disable","enable","createElement","color","ref","devalueColor","trackText","_default","exports"],"sources":["../../../src/components/DevalueSlider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState, type CSSProperties } from 'react';\nimport Slider, { type SliderRef } from './slider/Slider';\nimport Timer from './timer/Timer';\n\nexport type DevalueSliderOnDevalueHandlerResult = { success: boolean };\nexport type DevalueSliderOnDevalueHandler = () => Promise<DevalueSliderOnDevalueHandlerResult>;\n\nexport type DevalueSliderOnChangeHandler = (relativeValue: number) => void;\nexport type DevalueSliderOnCompleteHandler = () => void;\n\nexport type DevalueSliderProps = {\n    /**\n     * The basic color of the slider.\n     * This color is the background of the track before the slider is devalued.\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * The devalue color of the slider.\n     * This color fills the track from the left on user movement.\n     * This color is the background of the timer after the slider is devalued.\n     */\n    devalueBackgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * If this slider was devalued, provide the time when it was devalued.\n     * This will show a timer.\n     */\n    devalueTime?: Date;\n    /**\n     * Disables the slider and cancels any active drags.\n     */\n    isDisabled?: boolean;\n    /**\n     * The label of the slider. The default value is \"EINLÖSEN\"\n     */\n    label?: string;\n    /**\n     * This function is called when the slider is devalued.\n     */\n    onDevalue?: DevalueSliderOnDevalueHandler;\n    /**\n     * This function is called when the slider value changes.\n     * With this function you can keep track of the movement of the slider.\n     */\n    onChange?: DevalueSliderOnChangeHandler;\n    /**\n     * This function is called when the slider is completed.\n     * The slider is completed when the user devalues the slider\n     * and the animation is completed.\n     */\n    onComplete?: DevalueSliderOnCompleteHandler;\n};\n\nconst DevalueSlider: React.FC<DevalueSliderProps> = ({\n    backgroundColor = 'red',\n    devalueBackgroundColor = 'green',\n    devalueTime,\n    isDisabled,\n    label = 'EINLÖSEN',\n    onDevalue,\n    onChange,\n    onComplete,\n}) => {\n    const [timerDevalueTime, setTimerDevalueTime] = useState(devalueTime);\n\n    const sliderRef = useRef<SliderRef>(null);\n\n    useEffect(() => {\n        setTimerDevalueTime(devalueTime);\n    }, [devalueTime]);\n\n    const handleCompleted = useCallback(() => {\n        setTimerDevalueTime(new Date());\n\n        onComplete?.();\n    }, [onComplete]);\n\n    useEffect(() => {\n        if (isDisabled) {\n            sliderRef.current?.disable();\n\n            return;\n        }\n\n        sliderRef.current?.enable();\n    }, [isDisabled]);\n\n    if (timerDevalueTime) {\n        return <Timer color={devalueBackgroundColor} devalueTime={timerDevalueTime} />;\n    }\n\n    return (\n        <Slider\n            ref={sliderRef}\n            onDevalue={onDevalue}\n            color={backgroundColor}\n            devalueColor={devalueBackgroundColor}\n            onComplete={handleCompleted}\n            onChange={onChange}\n            trackText={label}\n        />\n    );\n};\n\nexport default DevalueSlider;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/DevalueSlider.js

@@ -7,6 +7,7 @@ const DevalueSlider = _ref => {
     devalueBackgroundColor = 'green',
     devalueTime,
     isDisabled,
+    label = 'EINLÖSEN',
     onDevalue,
     onChange,
     onComplete
@@ -39,7 +40,8 @@ const DevalueSlider = _ref => {
     color: backgroundColor,
     devalueColor: devalueBackgroundColor,
     onComplete: handleCompleted,
-    onChange: onChange
+    onChange: onChange,
+    trackText: label
   });
 };
 export default DevalueSlider;

package/lib/esm/components/DevalueSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevalueSlider.js","names":["React","useCallback","useEffect","useRef","useState","Slider","Timer","DevalueSlider","_ref","backgroundColor","devalueBackgroundColor","devalueTime","isDisabled","onDevalue","onChange","onComplete","timerDevalueTime","setTimerDevalueTime","sliderRef","handleCompleted","Date","current","disable","enable","createElement","color","ref","devalueColor"],"sources":["../../../src/components/DevalueSlider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState, type CSSProperties } from 'react';\nimport Slider, { type SliderRef } from './slider/Slider';\nimport Timer from './timer/Timer';\n\nexport type DevalueSliderOnDevalueHandlerResult = { success: boolean };\nexport type DevalueSliderOnDevalueHandler = () => Promise<DevalueSliderOnDevalueHandlerResult>;\n\nexport type DevalueSliderOnChangeHandler = (relativeValue: number) => void;\nexport type DevalueSliderOnCompleteHandler = () => void;\n\nexport type DevalueSliderProps = {\n    /**\n     * The basic color of the slider.\n     * This color is the background of the track before the slider is devalued.\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * The devalue color of the slider.\n     * This color fills the track from the left on user movement.\n     * This color is the background of the timer after the slider is devalued.\n     */\n    devalueBackgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * If this slider was devalued, provide the time when it was devalued.\n     * This will show a timer.\n     */\n    devalueTime?: Date;\n    /**\n     * Disables the slider and cancels any active drags.\n     */\n    isDisabled?: boolean;\n    /**\n     * This function is called when the slider is devalued.\n     */\n    onDevalue?: DevalueSliderOnDevalueHandler;\n    /**\n     * This function is called when the slider value changes.\n     * With this function you can keep track of the movement of the slider.\n     */\n    onChange?: DevalueSliderOnChangeHandler;\n    /**\n     * This function is called when the slider is completed.\n     * The slider is completed when the user devalues the slider\n     * and the animation is completed.\n     */\n    onComplete?: DevalueSliderOnCompleteHandler;\n};\n\nconst DevalueSlider: React.FC<DevalueSliderProps> = ({\n    backgroundColor = 'red',\n    devalueBackgroundColor = 'green',\n    devalueTime,\n    isDisabled,\n    onDevalue,\n    onChange,\n    onComplete,\n}) => {\n    const [timerDevalueTime, setTimerDevalueTime] = useState(devalueTime);\n\n    const sliderRef = useRef<SliderRef>(null);\n\n    useEffect(() => {\n        setTimerDevalueTime(devalueTime);\n    }, [devalueTime]);\n\n    const handleCompleted = useCallback(() => {\n        setTimerDevalueTime(new Date());\n\n        onComplete?.();\n    }, [onComplete]);\n\n    useEffect(() => {\n        if (isDisabled) {\n            sliderRef.current?.disable();\n\n            return;\n        }\n\n        sliderRef.current?.enable();\n    }, [isDisabled]);\n\n    if (timerDevalueTime) {\n        return <Timer color={devalueBackgroundColor} devalueTime={timerDevalueTime} />;\n    }\n\n    return (\n        <Slider\n            ref={sliderRef}\n            onDevalue={onDevalue}\n            color={backgroundColor}\n            devalueColor={devalueBackgroundColor}\n            onComplete={handleCompleted}\n            onChange={onChange}\n        />\n    );\n};\n\nexport default DevalueSlider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAA4B,OAAO;AAC3F,OAAOC,MAAM,MAA0B,iBAAiB;AACxD,OAAOC,KAAK,MAAM,eAAe;AA8CjC,MAAMC,aAA2C,GAAGC,IAAA,IAQ9C;EAAA,IAR+C;IACjDC,eAAe,GAAG,KAAK;IACvBC,sBAAsB,GAAG,OAAO;IAChCC,WAAW;IACXC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC;EACJ,CAAC,GAAAP,IAAA;EACG,MAAM,CAACQ,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGb,QAAQ,CAACO,WAAW,CAAC;EAErE,MAAMO,SAAS,GAAGf,MAAM,CAAY,IAAI,CAAC;EAEzCD,SAAS,CAAC,MAAM;IACZe,mBAAmB,CAACN,WAAW,CAAC;EACpC,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,MAAMQ,eAAe,GAAGlB,WAAW,CAAC,MAAM;IACtCgB,mBAAmB,CAAC,IAAIG,IAAI,CAAC,CAAC,CAAC;IAE/BL,UAAU,GAAG,CAAC;EAClB,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhBb,SAAS,CAAC,MAAM;IACZ,IAAIU,UAAU,EAAE;MACZM,SAAS,CAACG,OAAO,EAAEC,OAAO,CAAC,CAAC;MAE5B;IACJ;IAEAJ,SAAS,CAACG,OAAO,EAAEE,MAAM,CAAC,CAAC;EAC/B,CAAC,EAAE,CAACX,UAAU,CAAC,CAAC;EAEhB,IAAII,gBAAgB,EAAE;IAClB,oBAAOhB,KAAA,CAAAwB,aAAA,CAAClB,KAAK;MAACmB,KAAK,EAAEf,sBAAuB;MAACC,WAAW,EAAEK;IAAiB,CAAE,CAAC;EAClF;EAEA,oBACIhB,KAAA,CAAAwB,aAAA,CAACnB,MAAM;IACHqB,GAAG,EAAER,SAAU;IACfL,SAAS,EAAEA,SAAU;IACrBY,KAAK,EAAEhB,eAAgB;IACvBkB,YAAY,EAAEjB,sBAAuB;IACrCK,UAAU,EAAEI,eAAgB;IAC5BL,QAAQ,EAAEA;EAAS,CACtB,CAAC;AAEV,CAAC;AAED,eAAeP,aAAa","ignoreList":[]}
+{"version":3,"file":"DevalueSlider.js","names":["React","useCallback","useEffect","useRef","useState","Slider","Timer","DevalueSlider","_ref","backgroundColor","devalueBackgroundColor","devalueTime","isDisabled","label","onDevalue","onChange","onComplete","timerDevalueTime","setTimerDevalueTime","sliderRef","handleCompleted","Date","current","disable","enable","createElement","color","ref","devalueColor","trackText"],"sources":["../../../src/components/DevalueSlider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState, type CSSProperties } from 'react';\nimport Slider, { type SliderRef } from './slider/Slider';\nimport Timer from './timer/Timer';\n\nexport type DevalueSliderOnDevalueHandlerResult = { success: boolean };\nexport type DevalueSliderOnDevalueHandler = () => Promise<DevalueSliderOnDevalueHandlerResult>;\n\nexport type DevalueSliderOnChangeHandler = (relativeValue: number) => void;\nexport type DevalueSliderOnCompleteHandler = () => void;\n\nexport type DevalueSliderProps = {\n    /**\n     * The basic color of the slider.\n     * This color is the background of the track before the slider is devalued.\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * The devalue color of the slider.\n     * This color fills the track from the left on user movement.\n     * This color is the background of the timer after the slider is devalued.\n     */\n    devalueBackgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * If this slider was devalued, provide the time when it was devalued.\n     * This will show a timer.\n     */\n    devalueTime?: Date;\n    /**\n     * Disables the slider and cancels any active drags.\n     */\n    isDisabled?: boolean;\n    /**\n     * The label of the slider. The default value is \"EINLÖSEN\"\n     */\n    label?: string;\n    /**\n     * This function is called when the slider is devalued.\n     */\n    onDevalue?: DevalueSliderOnDevalueHandler;\n    /**\n     * This function is called when the slider value changes.\n     * With this function you can keep track of the movement of the slider.\n     */\n    onChange?: DevalueSliderOnChangeHandler;\n    /**\n     * This function is called when the slider is completed.\n     * The slider is completed when the user devalues the slider\n     * and the animation is completed.\n     */\n    onComplete?: DevalueSliderOnCompleteHandler;\n};\n\nconst DevalueSlider: React.FC<DevalueSliderProps> = ({\n    backgroundColor = 'red',\n    devalueBackgroundColor = 'green',\n    devalueTime,\n    isDisabled,\n    label = 'EINLÖSEN',\n    onDevalue,\n    onChange,\n    onComplete,\n}) => {\n    const [timerDevalueTime, setTimerDevalueTime] = useState(devalueTime);\n\n    const sliderRef = useRef<SliderRef>(null);\n\n    useEffect(() => {\n        setTimerDevalueTime(devalueTime);\n    }, [devalueTime]);\n\n    const handleCompleted = useCallback(() => {\n        setTimerDevalueTime(new Date());\n\n        onComplete?.();\n    }, [onComplete]);\n\n    useEffect(() => {\n        if (isDisabled) {\n            sliderRef.current?.disable();\n\n            return;\n        }\n\n        sliderRef.current?.enable();\n    }, [isDisabled]);\n\n    if (timerDevalueTime) {\n        return <Timer color={devalueBackgroundColor} devalueTime={timerDevalueTime} />;\n    }\n\n    return (\n        <Slider\n            ref={sliderRef}\n            onDevalue={onDevalue}\n            color={backgroundColor}\n            devalueColor={devalueBackgroundColor}\n            onComplete={handleCompleted}\n            onChange={onChange}\n            trackText={label}\n        />\n    );\n};\n\nexport default DevalueSlider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAA4B,OAAO;AAC3F,OAAOC,MAAM,MAA0B,iBAAiB;AACxD,OAAOC,KAAK,MAAM,eAAe;AAkDjC,MAAMC,aAA2C,GAAGC,IAAA,IAS9C;EAAA,IAT+C;IACjDC,eAAe,GAAG,KAAK;IACvBC,sBAAsB,GAAG,OAAO;IAChCC,WAAW;IACXC,UAAU;IACVC,KAAK,GAAG,UAAU;IAClBC,SAAS;IACTC,QAAQ;IACRC;EACJ,CAAC,GAAAR,IAAA;EACG,MAAM,CAACS,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGd,QAAQ,CAACO,WAAW,CAAC;EAErE,MAAMQ,SAAS,GAAGhB,MAAM,CAAY,IAAI,CAAC;EAEzCD,SAAS,CAAC,MAAM;IACZgB,mBAAmB,CAACP,WAAW,CAAC;EACpC,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjB,MAAMS,eAAe,GAAGnB,WAAW,CAAC,MAAM;IACtCiB,mBAAmB,CAAC,IAAIG,IAAI,CAAC,CAAC,CAAC;IAE/BL,UAAU,GAAG,CAAC;EAClB,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhBd,SAAS,CAAC,MAAM;IACZ,IAAIU,UAAU,EAAE;MACZO,SAAS,CAACG,OAAO,EAAEC,OAAO,CAAC,CAAC;MAE5B;IACJ;IAEAJ,SAAS,CAACG,OAAO,EAAEE,MAAM,CAAC,CAAC;EAC/B,CAAC,EAAE,CAACZ,UAAU,CAAC,CAAC;EAEhB,IAAIK,gBAAgB,EAAE;IAClB,oBAAOjB,KAAA,CAAAyB,aAAA,CAACnB,KAAK;MAACoB,KAAK,EAAEhB,sBAAuB;MAACC,WAAW,EAAEM;IAAiB,CAAE,CAAC;EAClF;EAEA,oBACIjB,KAAA,CAAAyB,aAAA,CAACpB,MAAM;IACHsB,GAAG,EAAER,SAAU;IACfL,SAAS,EAAEA,SAAU;IACrBY,KAAK,EAAEjB,eAAgB;IACvBmB,YAAY,EAAElB,sBAAuB;IACrCM,UAAU,EAAEI,eAAgB;IAC5BL,QAAQ,EAAEA,QAAS;IACnBc,SAAS,EAAEhB;EAAM,CACpB,CAAC;AAEV,CAAC;AAED,eAAeN,aAAa","ignoreList":[]}

package/lib/types/components/DevalueSlider.d.ts

@@ -26,6 +26,10 @@ export type DevalueSliderProps = {
      * Disables the slider and cancels any active drags.
      */
     isDisabled?: boolean;
+    /**
+     * The label of the slider. The default value is "EINLÖSEN"
+     */
+    label?: string;
     /**
      * This function is called when the slider is devalued.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/devalue-slider",
-    "version": "5.0.0-beta.769",
+    "version": "5.0.0-beta.770",
     "description": "A slider to devalue something.",
     "siteEffects": false,
     "browserslist": [
@@ -80,5 +80,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "286ee83b16bd6771251a1817efca4aaf3481635b"
+    "gitHead": "7414c7abb8411294cb87824b8278517fbbc2db19"
 }