reanimated-color-picker 1.3.0 → 1.3.2
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/GlobalStyles.d.ts +1 -0
- package/lib/GlobalStyles.js +4 -0
- package/lib/GlobalStyles.js.map +1 -1
- package/lib/GlobalStyles.web.js +1 -1
- package/lib/GlobalStyles.web.js.map +1 -1
- package/lib/components/BrightnessSlider.d.ts +2 -2
- package/lib/components/BrightnessSlider.js +45 -52
- package/lib/components/BrightnessSlider.js.map +1 -1
- package/lib/components/BrightnessSlider.web.js +1 -1
- package/lib/components/BrightnessSlider.web.js.map +1 -1
- package/lib/components/HueSlider.d.ts +2 -2
- package/lib/components/HueSlider.js +48 -49
- package/lib/components/HueSlider.js.map +1 -1
- package/lib/components/HueSlider.web.js +1 -1
- package/lib/components/HueSlider.web.js.map +1 -1
- package/lib/components/OpacitySlider.d.ts +2 -2
- package/lib/components/OpacitySlider.js +48 -55
- package/lib/components/OpacitySlider.js.map +1 -1
- package/lib/components/OpacitySlider.web.js +1 -1
- package/lib/components/OpacitySlider.web.js.map +1 -1
- package/lib/components/Panel1.js +35 -36
- package/lib/components/Panel1.js.map +1 -1
- package/lib/components/Panel1.web.js +1 -1
- package/lib/components/Panel1.web.js.map +1 -1
- package/lib/components/Panel2.js +32 -35
- package/lib/components/Panel2.js.map +1 -1
- package/lib/components/Panel2.web.js +1 -1
- package/lib/components/Panel2.web.js.map +1 -1
- package/lib/components/Panel3.js +34 -42
- package/lib/components/Panel3.js.map +1 -1
- package/lib/components/Panel3.web.js +1 -1
- package/lib/components/Panel3.web.js.map +1 -1
- package/lib/components/SaturationSlider.d.ts +2 -2
- package/lib/components/SaturationSlider.js +48 -55
- package/lib/components/SaturationSlider.js.map +1 -1
- package/lib/components/SaturationSlider.web.js +1 -1
- package/lib/components/SaturationSlider.web.js.map +1 -1
- package/lib/components/Swatches.js +2 -2
- package/lib/components/Swatches.js.map +1 -1
- package/lib/components/Swatches.web.js.map +1 -1
- package/lib/types.d.ts +5 -2
- package/package.json +3 -2
package/lib/GlobalStyles.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import type { TCTX } from './types';
|
|
|
2
2
|
import type { StyleProp, ViewStyle } from 'react-native';
|
|
3
3
|
export declare const CTX: import("react").Context<TCTX>;
|
|
4
4
|
export declare function getStyle<T extends keyof ViewStyle>(style: StyleProp<ViewStyle>, property: T): ViewStyle[T] | undefined;
|
|
5
|
+
export declare function clamp(v: number, max: number): number;
|
|
5
6
|
declare const _default: {
|
|
6
7
|
panel_container: {
|
|
7
8
|
position: "relative";
|
package/lib/GlobalStyles.js
CHANGED
|
@@ -6,6 +6,10 @@ export function getStyle(style, property) {
|
|
|
6
6
|
const flattened = StyleSheet.flatten(style);
|
|
7
7
|
return flattened[property];
|
|
8
8
|
}
|
|
9
|
+
export function clamp(v, max) {
|
|
10
|
+
'worklet';
|
|
11
|
+
return Math.min(Math.max(v, 0), max);
|
|
12
|
+
}
|
|
9
13
|
export default StyleSheet.create({
|
|
10
14
|
panel_container: {
|
|
11
15
|
position: 'relative',
|
package/lib/GlobalStyles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalStyles.js","sourceRoot":"","sources":["../src/GlobalStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAKvD,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC;AAEhC,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAO,IAAK,CAAC,CAAC;AAE9C,MAAM,UAAU,QAAQ,CAA4B,KAA2B,EAAE,QAAW;IAC1F,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,SAAS,CAAC,QAAQ,CAAC,CAAC;AAC7B,CAAC;AAED,eAAe,UAAU,CAAC,MAAM,CAAC;IAC/B,eAAe,EAAE;QACf,QAAQ,EAAE,UAAU;QACpB,SAAS,EAAE,SAAS;QACpB,YAAY,EAAE,CAAC;KAChB;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KACnB;IACD,MAAM,EAAE;QACN,QAAQ,EAAE,UAAU;QACpB,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;QACvC,GAAG,EAAE,CAAC;QACN,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACrB;IACD,WAAW,EAAE;QACX,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QAEb,WAAW,EAAE,MAAM;QACnB,YAAY,EAAE;YACZ,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;SACV;QACD,aAAa,EAAE,IAAI;QACnB,YAAY,EAAE,IAAI;QAElB,SAAS,EAAE,CAAC;KACb;IACD,MAAM,EAAE;QACN,WAAW,EAAE,MAAM;QACnB,YAAY,EAAE;YACZ,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;SACV;QACD,aAAa,EAAE,IAAI;QACnB,YAAY,EAAE,IAAI;QAElB,SAAS,EAAE,CAAC;KACb;CACF,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"GlobalStyles.js","sourceRoot":"","sources":["../src/GlobalStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAKvD,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC;AAEhC,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAO,IAAK,CAAC,CAAC;AAE9C,MAAM,UAAU,QAAQ,CAA4B,KAA2B,EAAE,QAAW;IAC1F,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,SAAS,CAAC,QAAQ,CAAC,CAAC;AAC7B,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,CAAS,EAAE,GAAW;IAC1C,SAAS,CAAC;IACV,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;AACvC,CAAC;AAED,eAAe,UAAU,CAAC,MAAM,CAAC;IAC/B,eAAe,EAAE;QACf,QAAQ,EAAE,UAAU;QACpB,SAAS,EAAE,SAAS;QACpB,YAAY,EAAE,CAAC;KAChB;IACD,WAAW,EAAE;QACX,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,QAAQ;KACnB;IACD,MAAM,EAAE;QACN,QAAQ,EAAE,UAAU;QACpB,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;QACvC,GAAG,EAAE,CAAC;QACN,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACrB;IACD,WAAW,EAAE;QACX,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QAEb,WAAW,EAAE,MAAM;QACnB,YAAY,EAAE;YACZ,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;SACV;QACD,aAAa,EAAE,IAAI;QACnB,YAAY,EAAE,IAAI;QAElB,SAAS,EAAE,CAAC;KACb;IACD,MAAM,EAAE;QACN,WAAW,EAAE,MAAM;QACnB,YAAY,EAAE;YACZ,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;SACV;QACD,aAAa,EAAE,IAAI;QACnB,YAAY,EAAE,IAAI;QAElB,SAAS,EAAE,CAAC;KACb;CACF,CAAC,CAAC"}
|
package/lib/GlobalStyles.web.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.CTX=void 0;exports.getStyle=getStyle;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=require("react");var _reactNative=require("react-native");var isRtl=_reactNative.I18nManager.isRTL;var CTX=(0,_react.createContext)(null);exports.CTX=CTX;function getStyle(style,property){var flattened=_reactNative.StyleSheet.flatten(style);return flattened[property];}var _default=_reactNative.StyleSheet.create({panel_container:{position:'relative',alignSelf:'stretch',borderRadius:5},panel_image:{position:'absolute',top:0,left:0,width:'100%',height:'100%',overflow:'hidden'},handle:(0,_extends2.default)({position:'absolute'},isRtl?{right:0}:{left:0},{top:0,justifyContent:'center',alignItems:'center'}),handleInner:{width:'75%',height:'75%',shadowColor:'#000',shadowOffset:{width:0,height:2},shadowOpacity:0.25,shadowRadius:3.84,elevation:5},shadow:{shadowColor:'#000',shadowOffset:{width:0,height:2},shadowOpacity:0.25,shadowRadius:3.84,elevation:5}});exports.default=_default;
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.clamp=exports.CTX=void 0;exports.getStyle=getStyle;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=require("react");var _reactNative=require("react-native");var isRtl=_reactNative.I18nManager.isRTL;var CTX=(0,_react.createContext)(null);exports.CTX=CTX;function getStyle(style,property){var flattened=_reactNative.StyleSheet.flatten(style);return flattened[property];}var clamp=function(){var _f=function _f(v,max){return Math.min(Math.max(v,0),max);};_f._closure={};_f.asString="function clamp(v,max){return Math.min(Math.max(v,0),max);}";_f.__workletHash=7369916205602;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\GlobalStyles.js (9:7)";return _f;}();exports.clamp=clamp;var _default=_reactNative.StyleSheet.create({panel_container:{position:'relative',alignSelf:'stretch',borderRadius:5},panel_image:{position:'absolute',top:0,left:0,width:'100%',height:'100%',overflow:'hidden'},handle:(0,_extends2.default)({position:'absolute'},isRtl?{right:0}:{left:0},{top:0,justifyContent:'center',alignItems:'center'}),handleInner:{width:'75%',height:'75%',shadowColor:'#000',shadowOffset:{width:0,height:2},shadowOpacity:0.25,shadowRadius:3.84,elevation:5},shadow:{shadowColor:'#000',shadowOffset:{width:0,height:2},shadowOpacity:0.25,shadowRadius:3.84,elevation:5}});exports.default=_default;
|
|
2
2
|
//# sourceMappingURL=GlobalStyles.web.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalStyles.web.js","mappings":"
|
|
1
|
+
{"version":3,"file":"GlobalStyles.web.js","mappings":"uSAAA,4BACA,yCAKA,GAAMA,MAAK,CAAGC,yBAAYC,KAA1B,CAEO,GAAMC,IAAG,CAAG,yBAAoB,IAApB,CAAZ,C,gBAED,QAAUC,SAAV,CAA8CC,KAA9C,CAA2EC,QAA3E,CAAsF,CAC1F,GAAMC,UAAS,CAAGC,wBAAWC,OAAX,CAAmBJ,KAAnB,CAAlB,CACA,MAAOE,UAAS,CAACD,QAAD,CAAhB,CACD,C,GAEeI,M,+BAAMC,C,CAAWC,G,CAAW,CAE1C,MAAOC,KAAI,CAACC,GAAL,CAASD,IAAI,CAACD,GAAL,CAASD,CAAT,CAAY,CAAZ,CAAT,CAAyBC,GAAzB,CAAP,CACD,C,8QAEcJ,wBAAWO,MAAX,CAAkB,CAC/BC,eAAe,CAAE,CACfC,QAAQ,CAAE,UADK,CAEfC,SAAS,CAAE,SAFI,CAGfC,YAAY,CAAE,CAHC,CADc,CAM/BC,WAAW,CAAE,CACXH,QAAQ,CAAE,UADC,CAEXI,GAAG,CAAE,CAFM,CAGXC,IAAI,CAAE,CAHK,CAIXC,KAAK,CAAE,MAJI,CAKXC,MAAM,CAAE,MALG,CAMXC,QAAQ,CAAE,QANC,CANkB,CAc/BC,MAAM,wBACJT,QAAQ,CAAE,UADN,EAEAjB,KAAK,CAAG,CAAE2B,KAAK,CAAE,CAAT,CAAH,CAAkB,CAAEL,IAAI,CAAE,CAAR,CAFvB,EAGJD,GAAG,CAAE,CAHD,CAIJO,cAAc,CAAE,QAJZ,CAKJC,UAAU,CAAE,QALR,EAdyB,CAqB/BC,WAAW,CAAE,CACXP,KAAK,CAAE,KADI,CAEXC,MAAM,CAAE,KAFG,CAIXO,WAAW,CAAE,MAJF,CAKXC,YAAY,CAAE,CACZT,KAAK,CAAE,CADK,CAEZC,MAAM,CAAE,CAFI,CALH,CASXS,aAAa,CAAE,IATJ,CAUXC,YAAY,CAAE,IAVH,CAYXC,SAAS,CAAE,CAZA,CArBkB,CAmC/BC,MAAM,CAAE,CACNL,WAAW,CAAE,MADP,CAENC,YAAY,CAAE,CACZT,KAAK,CAAE,CADK,CAEZC,MAAM,CAAE,CAFI,CAFR,CAMNS,aAAa,CAAE,IANT,CAONC,YAAY,CAAE,IAPR,CASNC,SAAS,CAAE,CATL,CAnCuB,CAAlB,C","names":["isRtl","I18nManager","isRTL","CTX","getStyle","style","property","flattened","StyleSheet","flatten","clamp","v","max","Math","min","create","panel_container","position","alignSelf","borderRadius","panel_image","top","left","width","height","overflow","handle","right","justifyContent","alignItems","handleInner","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","shadow"],"sourceRoot":"","sources":["../src/GlobalStyles.ts"],"sourcesContent":[null]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
export declare function BrightnessSlider({ thumbShape, thumbSize, thumbColor, style, vertical, reverse, }:
|
|
1
|
+
import type { SliderProps } from '../types';
|
|
2
|
+
export declare function BrightnessSlider({ thumbShape, thumbSize, thumbColor, style, vertical, reverse, }: SliderProps): JSX.Element;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import { I18nManager
|
|
1
|
+
import React, { useContext } from 'react';
|
|
2
|
+
import { I18nManager } from 'react-native';
|
|
3
3
|
import { PanGestureHandler } from 'react-native-gesture-handler';
|
|
4
|
-
import Animated, { runOnJS, useAnimatedGestureHandler, useAnimatedStyle,
|
|
5
|
-
import { CTX, getStyle } from '../GlobalStyles';
|
|
4
|
+
import Animated, { runOnJS, useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
|
|
5
|
+
import { clamp, CTX, getStyle } from '../GlobalStyles';
|
|
6
6
|
import Thumb from './Thumbs';
|
|
7
7
|
const isRtl = I18nManager.isRTL;
|
|
8
8
|
export function BrightnessSlider({ thumbShape, thumbSize, thumbColor, style = {}, vertical = false, reverse = false, }) {
|
|
@@ -13,66 +13,59 @@ export function BrightnessSlider({ thumbShape, thumbSize, thumbColor, style = {}
|
|
|
13
13
|
const borderRadius = getStyle(style, 'borderRadius') ?? 5;
|
|
14
14
|
const getWidth = getStyle(style, 'width');
|
|
15
15
|
const getHeight = getStyle(style, 'height');
|
|
16
|
-
const
|
|
17
|
-
const
|
|
16
|
+
const width = useSharedValue(vertical ? sliderThickness : typeof getWidth === 'number' ? getWidth : 0);
|
|
17
|
+
const height = useSharedValue(!vertical ? sliderThickness : typeof getHeight === 'number' ? getHeight : 0);
|
|
18
18
|
const handleScale = useSharedValue(1);
|
|
19
|
-
const
|
|
20
|
-
const length = vertical ? height : width;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}, [
|
|
25
|
-
const handleStyle = useAnimatedStyle(() => ({
|
|
26
|
-
transform: [
|
|
27
|
-
{ translateY: vertical ? handlePos.value : height / 2 - thumb_size / 2 },
|
|
28
|
-
{ translateX: vertical ? width / 2 - thumb_size / 2 : handlePos.value },
|
|
29
|
-
{ scale: handleScale.value },
|
|
30
|
-
],
|
|
31
|
-
}));
|
|
19
|
+
const handleStyle = useAnimatedStyle(() => {
|
|
20
|
+
const length = vertical ? height.value : width.value, percent = (brightnessValue.value / 100) * length, pos = (reverse ? length - percent : percent) - thumb_size / 2, posY = vertical ? pos : height.value / 2 - thumb_size / 2, posX = vertical ? width.value / 2 - thumb_size / 2 : pos;
|
|
21
|
+
return {
|
|
22
|
+
transform: [{ translateY: posY }, { translateX: posX }, { scale: handleScale.value }],
|
|
23
|
+
};
|
|
24
|
+
}, [thumbSize, vertical, reverse]);
|
|
32
25
|
const activeHueStyle = useAnimatedStyle(() => ({ backgroundColor: `hsl(${hueValue.value}, 100%, 50%)` }));
|
|
26
|
+
const setValueFromGestureEvent = (event) => {
|
|
27
|
+
'worklet';
|
|
28
|
+
const posX = clamp(event.x, width.value), posY = clamp(event.y, height.value), percentX = posX / width.value, percentY = posY / height.value, valX = reverse ? 100 - Math.round(percentX * 100) : Math.round(percentX * 100), valY = reverse ? 100 - Math.round(percentY * 100) : Math.round(percentY * 100);
|
|
29
|
+
brightnessValue.value = vertical ? valY : valX;
|
|
30
|
+
runOnJS(onGestureChange)();
|
|
31
|
+
};
|
|
33
32
|
const gestureEvent = useAnimatedGestureHandler({
|
|
34
|
-
onStart:
|
|
35
|
-
ctx.x = event.x;
|
|
36
|
-
ctx.y = event.y;
|
|
33
|
+
onStart: event => {
|
|
37
34
|
handleScale.value = withTiming(1.2, { duration: 100 });
|
|
35
|
+
setValueFromGestureEvent(event);
|
|
38
36
|
},
|
|
39
|
-
onActive:
|
|
40
|
-
|
|
41
|
-
const x = event.translationX, y = event.translationY, posX = clamp(x + ctx.x, width), posY = clamp(y + ctx.y, height), percentX = posX / width, percentY = posY / height, brightnessX = reverse ? 100 - Math.round(percentX * 100) : Math.round(percentX * 100), brightnessY = reverse ? 100 - Math.round(percentY * 100) : Math.round(percentY * 100);
|
|
42
|
-
brightnessValue.value = vertical ? brightnessY : brightnessX;
|
|
43
|
-
runOnJS(onGestureChange)();
|
|
37
|
+
onActive: event => {
|
|
38
|
+
setValueFromGestureEvent(event);
|
|
44
39
|
},
|
|
45
40
|
onFinish: () => {
|
|
46
41
|
handleScale.value = withTiming(1, { duration: 100 });
|
|
47
42
|
runOnJS(onGestureEnd)();
|
|
48
43
|
},
|
|
49
|
-
}, [
|
|
50
|
-
const onLayout =
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
const imageTranslateY = (reverse && isRtl) || (!reverse && !isRtl) ? height / 2 - width / 2 : -height / 2 + width / 2;
|
|
56
|
-
const imageStyle = typeof height === 'number' &&
|
|
57
|
-
typeof width === 'number' && {
|
|
58
|
-
width: vertical ? height : width,
|
|
59
|
-
height: vertical ? width : height,
|
|
60
|
-
borderRadius,
|
|
61
|
-
transform: [
|
|
62
|
-
{ rotate: imageRotate },
|
|
63
|
-
{ translateX: vertical ? (reverse ? -height / 2 + width / 2 : height / 2 - width / 2) : 0 },
|
|
64
|
-
{ translateY: vertical ? imageTranslateY : 0 },
|
|
65
|
-
],
|
|
44
|
+
}, [width.value, height.value, vertical, reverse]);
|
|
45
|
+
const onLayout = ({ nativeEvent: { layout } }) => {
|
|
46
|
+
if (!vertical)
|
|
47
|
+
width.value = withTiming(Math.round(layout.width), { duration: 5 });
|
|
48
|
+
if (vertical)
|
|
49
|
+
height.value = withTiming(Math.round(layout.height), { duration: 5 });
|
|
66
50
|
};
|
|
51
|
+
const imageStyle = useAnimatedStyle(() => {
|
|
52
|
+
const imageRotate = vertical ? (reverse ? '270deg' : '90deg') : reverse ? '180deg' : '0deg';
|
|
53
|
+
const imageTranslateY = (reverse && isRtl) || (!reverse && !isRtl) ? height.value / 2 - width.value / 2 : -height.value / 2 + width.value / 2;
|
|
54
|
+
return {
|
|
55
|
+
width: vertical ? height.value : width.value,
|
|
56
|
+
height: vertical ? width.value : height.value,
|
|
57
|
+
borderRadius,
|
|
58
|
+
transform: [
|
|
59
|
+
{ rotate: imageRotate },
|
|
60
|
+
{ translateX: vertical ? (reverse ? -height.value / 2 + width.value / 2 : height.value / 2 - width.value / 2) : 0 },
|
|
61
|
+
{ translateY: vertical ? imageTranslateY : 0 },
|
|
62
|
+
],
|
|
63
|
+
};
|
|
64
|
+
}, [vertical, reverse, sliderThickness]);
|
|
65
|
+
const thicknessStyle = vertical ? { width: sliderThickness } : { height: sliderThickness };
|
|
67
66
|
return (<PanGestureHandler onGestureEvent={gestureEvent} minDist={0}>
|
|
68
|
-
<Animated.View onLayout={onLayout} style={[
|
|
69
|
-
|
|
70
|
-
vertical ? { width } : { height },
|
|
71
|
-
style,
|
|
72
|
-
{ position: 'relative', borderWidth: 0, padding: 0 },
|
|
73
|
-
activeHueStyle,
|
|
74
|
-
]}>
|
|
75
|
-
<Image source={require('../assets/Brightness.png')} style={imageStyle}/>
|
|
67
|
+
<Animated.View onLayout={onLayout} style={[{ borderRadius }, style, { position: 'relative', borderWidth: 0, padding: 0 }, thicknessStyle, activeHueStyle]}>
|
|
68
|
+
<Animated.Image source={require('../assets/Brightness.png')} style={imageStyle}/>
|
|
76
69
|
<Thumb {...{ channel: 'v', thumbShape, thumbSize: thumb_size, thumbColor: thumb_color, handleStyle, vertical }}/>
|
|
77
70
|
</Animated.View>
|
|
78
71
|
</PanGestureHandler>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BrightnessSlider.js","sourceRoot":"","sources":["../../src/components/BrightnessSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"BrightnessSlider.js","sourceRoot":"","sources":["../../src/components/BrightnessSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,QAAQ,EAAE,EACf,OAAO,EACP,yBAAyB,EACzB,gBAAgB,EAChB,cAAc,EACd,UAAU,GACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,MAAM,UAAU,CAAC;AAM7B,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC;AAEhC,MAAM,UAAU,gBAAgB,CAAC,EAC/B,UAAU,EACV,SAAS,EACT,UAAU,EACV,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,GACH;IACZ,MAAM,EACJ,eAAe,EACf,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,eAAe,EACf,SAAS,EAAE,UAAU,EACrB,UAAU,EAAE,WAAW,EACvB,UAAU,EAAE,WAAW,GACxB,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;IAEpB,UAAU,GAAG,UAAU,IAAI,WAAW,CAAC;IACvC,MAAM,UAAU,GAAG,SAAS,IAAI,UAAU,CAAC;IAC3C,MAAM,WAAW,GAAG,UAAU,IAAI,WAAW,CAAC;IAE9C,MAAM,YAAY,GAAG,QAAQ,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;IAC1D,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACvG,MAAM,MAAM,GAAG,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE3G,MAAM,WAAW,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;IAEtC,MAAM,WAAW,GAAG,gBAAgB,CAAC,GAAG,EAAE;QACxC,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAClD,OAAO,GAAG,CAAC,eAAe,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,MAAM,EAChD,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,UAAU,GAAG,CAAC,EAC7D,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,GAAG,UAAU,GAAG,CAAC,EACzD,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QAC3D,OAAO;YACL,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC;SACtF,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAEnC,MAAM,cAAc,GAAG,gBAAgB,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,eAAe,EAAE,OAAO,QAAQ,CAAC,KAAK,cAAc,EAAE,CAAC,CAAC,CAAC;IAE1G,MAAM,wBAAwB,GAAG,CAAC,KAAoC,EAAE,EAAE;QACxE,SAAS,CAAC;QACV,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,EACtC,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,EACnC,QAAQ,GAAG,IAAI,GAAG,KAAK,CAAC,KAAK,EAC7B,QAAQ,GAAG,IAAI,GAAG,MAAM,CAAC,KAAK,EAC9B,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,EAC9E,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC;QAEjF,eAAe,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;QAE/C,OAAO,CAAC,eAAe,CAAC,EAAE,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,yBAAyB,CAC5C;QACE,OAAO,EAAE,KAAK,CAAC,EAAE;YACf,WAAW,CAAC,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;YACvD,wBAAwB,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;QACD,QAAQ,EAAE,KAAK,CAAC,EAAE;YAChB,wBAAwB,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;QACD,QAAQ,EAAE,GAAG,EAAE;YACb,WAAW,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;YACrD,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;QAC1B,CAAC;KACF,EACD,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,CAC/C,CAAC;IAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,WAAW,EAAE,EAAE,MAAM,EAAE,EAAqB,EAAE,EAAE;QAClE,IAAI,CAAC,QAAQ;YAAE,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;QACnF,IAAI,QAAQ;YAAE,MAAM,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IACtF,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,gBAAgB,CAAC,GAAG,EAAE;QACvC,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;QAC5F,MAAM,eAAe,GACnB,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC;QACxH,OAAO;YACL,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK;YAC5C,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK;YAC7C,YAAY;YACZ,SAAS,EAAE;gBACT,EAAE,MAAM,EAAE,WAAW,EAAE;gBACvB,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;gBACnH,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,EAAE;aAC/C;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC;IAEzC,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;IAE3F,OAAO,CACL,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAC1D;MAAA,CAAC,QAAQ,CAAC,IAAI,CACZ,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC,CAEvH;QAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,EAC/E;QAAA,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,EACjH;MAAA,EAAE,QAAQ,CAAC,IAAI,CACjB;IAAA,EAAE,iBAAiB,CAAC,CACrB,CAAC;AACJ,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BrightnessSlider=BrightnessSlider;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _GlobalStyles=require("../GlobalStyles");var _Thumbs=_interopRequireDefault(require("./Thumbs"));var _jsxFileName="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\BrightnessSlider.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var isRtl=_reactNative.I18nManager.isRTL;function BrightnessSlider(_ref){var _thumbShape,_getStyle;var thumbShape=_ref.thumbShape,thumbSize=_ref.thumbSize,thumbColor=_ref.thumbColor,_ref$style=_ref.style,style=_ref$style===void 0?{}:_ref$style,_ref$vertical=_ref.vertical,vertical=_ref$vertical===void 0?false:_ref$vertical,_ref$reverse=_ref.reverse,reverse=_ref$reverse===void 0?false:_ref$reverse;var _useContext=(0,_react.useContext)(_GlobalStyles.CTX),brightnessValue=_useContext.brightnessValue,hueValue=_useContext.hueValue,onGestureChange=_useContext.onGestureChange,onGestureEnd=_useContext.onGestureEnd,sliderThickness=_useContext.sliderThickness,thumbsSize=_useContext.thumbSize,thumbsShape=_useContext.thumbShape,thumbsColor=_useContext.thumbColor;thumbShape=(_thumbShape=thumbShape)!=null?_thumbShape:thumbsShape;var thumb_size=thumbSize!=null?thumbSize:thumbsSize;var thumb_color=thumbColor!=null?thumbColor:thumbsColor;var borderRadius=(_getStyle=(0,_GlobalStyles.getStyle)(style,'borderRadius'))!=null?_getStyle:5;var getWidth=(0,_GlobalStyles.getStyle)(style,'width');var getHeight=(0,_GlobalStyles.getStyle)(style,'height');var _useState=(0,_react.useState)(typeof getWidth==='number'?getWidth:sliderThickness),_useState2=(0,_slicedToArray2.default)(_useState,2),width=_useState2[0],setWidth=_useState2[1];var _useState3=(0,_react.useState)(typeof getHeight==='number'?getHeight:sliderThickness),_useState4=(0,_slicedToArray2.default)(_useState3,2),height=_useState4[0],setHeight=_useState4[1];var handleScale=(0,_reactNativeReanimated.useSharedValue)(1);var handlePos=(0,_reactNativeReanimated.useDerivedValue)(function(){var _f=function _f(){var length=vertical?height:width;var percent=brightnessValue.value/100*length;var pos=(reverse?length-percent:percent)-thumb_size/2;return pos;};_f._closure={vertical:vertical,height:height,width:width,brightnessValue:brightnessValue,reverse:reverse,thumb_size:thumb_size};_f.asString="function _f(){const{vertical,height,width,brightnessValue,reverse,thumb_size}=jsThis._closure;{const length=vertical?height:width;const percent=brightnessValue.value/100*length;const pos=(reverse?length-percent:percent)-thumb_size/2;return pos;}}";_f.__workletHash=10469689501843;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\BrightnessSlider.js (19:38)";return _f;}(),[height,width,thumbSize,vertical,reverse]);var handleStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{transform:[{translateY:vertical?handlePos.value:height/2-thumb_size/2},{translateX:vertical?width/2-thumb_size/2:handlePos.value},{scale:handleScale.value}]};};_f._closure={vertical:vertical,handlePos:handlePos,height:height,thumb_size:thumb_size,width:width,handleScale:handleScale};_f.asString="function _f(){const{vertical,handlePos,height,thumb_size,width,handleScale}=jsThis._closure;{return{transform:[{translateY:vertical?handlePos.value:height/2-thumb_size/2},{translateX:vertical?width/2-thumb_size/2:handlePos.value},{scale:handleScale.value}]};}}";_f.__workletHash=13633235797636;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\BrightnessSlider.js (25:41)";_f.__optimalization=3;return _f;}());var activeHueStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{backgroundColor:"hsl("+hueValue.value+", 100%, 50%)"};};_f._closure={hueValue:hueValue};_f.asString="function _f(){const{hueValue}=jsThis._closure;{return{backgroundColor:\"hsl(\"+hueValue.value+\", 100%, 50%)\"};}}";_f.__workletHash=6857493922654;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\BrightnessSlider.js (32:44)";_f.__optimalization=3;return _f;}());var gestureEvent=(0,_reactNativeReanimated.useAnimatedGestureHandler)({onStart:function(){var _f=function _f(event,ctx){ctx.x=event.x;ctx.y=event.y;handleScale.value=(0,_reactNativeReanimated.withTiming)(1.2,{duration:100});};_f._closure={handleScale:handleScale,withTiming:_reactNativeReanimated.withTiming};_f.asString="function _f(event,ctx){const{handleScale,withTiming}=jsThis._closure;{ctx.x=event.x;ctx.y=event.y;handleScale.value=withTiming(1.2,{duration:100});}}";_f.__workletHash=16915922246164;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\BrightnessSlider.js (34:17)";return _f;}(),onActive:function(){var _f=function _f(event,ctx){var clamp=function clamp(v,max){return Math.min(Math.max(v,0),max);};var x=event.translationX,y=event.translationY,posX=clamp(x+ctx.x,width),posY=clamp(y+ctx.y,height),percentX=posX/width,percentY=posY/height,brightnessX=reverse?100-Math.round(percentX*100):Math.round(percentX*100),brightnessY=reverse?100-Math.round(percentY*100):Math.round(percentY*100);brightnessValue.value=vertical?brightnessY:brightnessX;(0,_reactNativeReanimated.runOnJS)(onGestureChange)();};_f._closure={width:width,height:height,reverse:reverse,brightnessValue:brightnessValue,vertical:vertical,runOnJS:_reactNativeReanimated.runOnJS,onGestureChange:onGestureChange};_f.asString="function _f(event,ctx){const{width,height,reverse,brightnessValue,vertical,runOnJS,onGestureChange}=jsThis._closure;{const clamp=function(v,max){return Math.min(Math.max(v,0),max);};const x=event.translationX,y=event.translationY,posX=clamp(x+ctx.x,width),posY=clamp(y+ctx.y,height),percentX=posX/width,percentY=posY/height,brightnessX=reverse?100-Math.round(percentX*100):Math.round(percentX*100),brightnessY=reverse?100-Math.round(percentY*100):Math.round(percentY*100);brightnessValue.value=vertical?brightnessY:brightnessX;runOnJS(onGestureChange)();}}";_f.__workletHash=8727116272633;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\BrightnessSlider.js (39:18)";return _f;}(),onFinish:function(){var _f=function _f(){handleScale.value=(0,_reactNativeReanimated.withTiming)(1,{duration:100});(0,_reactNativeReanimated.runOnJS)(onGestureEnd)();};_f._closure={handleScale:handleScale,withTiming:_reactNativeReanimated.withTiming,runOnJS:_reactNativeReanimated.runOnJS,onGestureEnd:onGestureEnd};_f.asString="function _f(){const{handleScale,withTiming,runOnJS,onGestureEnd}=jsThis._closure;{handleScale.value=withTiming(1,{duration:100});runOnJS(onGestureEnd)();}}";_f.__workletHash=6379049506140;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\BrightnessSlider.js (45:18)";return _f;}()},[height,width,thumbSize,vertical,reverse]);var onLayout=(0,_react.useCallback)(function(_ref2){var layout=_ref2.nativeEvent.layout;setWidth(Math.round(layout.width));setHeight(Math.round(layout.height));},[]);var imageRotate=vertical?reverse?'270deg':'90deg':reverse?'180deg':'0deg';var imageTranslateY=reverse&&isRtl||!reverse&&!isRtl?height/2-width/2:-height/2+width/2;var imageStyle=typeof height==='number'&&typeof width==='number'&&{width:vertical?height:width,height:vertical?width:height,borderRadius:borderRadius,transform:[{rotate:imageRotate},{translateX:vertical?reverse?-height/2+width/2:height/2-width/2:0},{translateY:vertical?imageTranslateY:0}]};return _react.default.createElement(_reactNativeGestureHandler.PanGestureHandler,{onGestureEvent:gestureEvent,minDist:0,__self:this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:13}},_react.default.createElement(_reactNativeReanimated.default.View,{onLayout:onLayout,style:[{borderRadius:borderRadius},vertical?{width:width}:{height:height},style,{position:'relative',borderWidth:0,padding:0},activeHueStyle],__self:this,__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:7}},_react.default.createElement(_reactNative.Image,{source:require('../assets/Brightness.png'),style:imageStyle,__self:this,__source:{fileName:_jsxFileName,lineNumber:75,columnNumber:9}}),_react.default.createElement(_Thumbs.default,{channel:'v',thumbShape:thumbShape,thumbSize:thumb_size,thumbColor:thumb_color,handleStyle:handleStyle,vertical:vertical,__self:this,__source:{fileName:_jsxFileName,lineNumber:76,columnNumber:9}})));}
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.BrightnessSlider=BrightnessSlider;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _GlobalStyles=require("../GlobalStyles");var _Thumbs=_interopRequireDefault(require("./Thumbs"));var _jsxFileName="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\BrightnessSlider.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var isRtl=_reactNative.I18nManager.isRTL;function BrightnessSlider(_ref){var _thumbShape,_getStyle;var thumbShape=_ref.thumbShape,thumbSize=_ref.thumbSize,thumbColor=_ref.thumbColor,_ref$style=_ref.style,style=_ref$style===void 0?{}:_ref$style,_ref$vertical=_ref.vertical,vertical=_ref$vertical===void 0?false:_ref$vertical,_ref$reverse=_ref.reverse,reverse=_ref$reverse===void 0?false:_ref$reverse;var _useContext=(0,_react.useContext)(_GlobalStyles.CTX),brightnessValue=_useContext.brightnessValue,hueValue=_useContext.hueValue,onGestureChange=_useContext.onGestureChange,onGestureEnd=_useContext.onGestureEnd,sliderThickness=_useContext.sliderThickness,thumbsSize=_useContext.thumbSize,thumbsShape=_useContext.thumbShape,thumbsColor=_useContext.thumbColor;thumbShape=(_thumbShape=thumbShape)!=null?_thumbShape:thumbsShape;var thumb_size=thumbSize!=null?thumbSize:thumbsSize;var thumb_color=thumbColor!=null?thumbColor:thumbsColor;var borderRadius=(_getStyle=(0,_GlobalStyles.getStyle)(style,'borderRadius'))!=null?_getStyle:5;var getWidth=(0,_GlobalStyles.getStyle)(style,'width');var getHeight=(0,_GlobalStyles.getStyle)(style,'height');var width=(0,_reactNativeReanimated.useSharedValue)(vertical?sliderThickness:typeof getWidth==='number'?getWidth:0);var height=(0,_reactNativeReanimated.useSharedValue)(!vertical?sliderThickness:typeof getHeight==='number'?getHeight:0);var handleScale=(0,_reactNativeReanimated.useSharedValue)(1);var handleStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){var length=vertical?height.value:width.value,percent=brightnessValue.value/100*length,pos=(reverse?length-percent:percent)-thumb_size/2,posY=vertical?pos:height.value/2-thumb_size/2,posX=vertical?width.value/2-thumb_size/2:pos;return{transform:[{translateY:posY},{translateX:posX},{scale:handleScale.value}]};};_f._closure={vertical:vertical,height:height,width:width,brightnessValue:brightnessValue,reverse:reverse,thumb_size:thumb_size,handleScale:handleScale};_f.asString="function _f(){const{vertical,height,width,brightnessValue,reverse,thumb_size,handleScale}=jsThis._closure;{const length=vertical?height.value:width.value,percent=brightnessValue.value/100*length,pos=(reverse?length-percent:percent)-thumb_size/2,posY=vertical?pos:height.value/2-thumb_size/2,posX=vertical?width.value/2-thumb_size/2:pos;return{transform:[{translateY:posY},{translateX:posX},{scale:handleScale.value}]};}}";_f.__workletHash=16258995118076;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\BrightnessSlider.js (19:41)";_f.__optimalization=3;return _f;}(),[thumbSize,vertical,reverse]);var activeHueStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){return{backgroundColor:"hsl("+hueValue.value+", 100%, 50%)"};};_f._closure={hueValue:hueValue};_f.asString="function _f(){const{hueValue}=jsThis._closure;{return{backgroundColor:\"hsl(\"+hueValue.value+\", 100%, 50%)\"};}}";_f.__workletHash=6857493922654;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\BrightnessSlider.js (25:44)";_f.__optimalization=3;return _f;}());var setValueFromGestureEvent=function(){var _f=function _f(event){var posX=(0,_GlobalStyles.clamp)(event.x,width.value),posY=(0,_GlobalStyles.clamp)(event.y,height.value),percentX=posX/width.value,percentY=posY/height.value,valX=reverse?100-Math.round(percentX*100):Math.round(percentX*100),valY=reverse?100-Math.round(percentY*100):Math.round(percentY*100);brightnessValue.value=vertical?valY:valX;(0,_reactNativeReanimated.runOnJS)(onGestureChange)();};_f._closure={clamp:_GlobalStyles.clamp,width:width,height:height,reverse:reverse,brightnessValue:brightnessValue,vertical:vertical,runOnJS:_reactNativeReanimated.runOnJS,onGestureChange:onGestureChange};_f.asString="function _f(event){const{clamp,width,height,reverse,brightnessValue,vertical,runOnJS,onGestureChange}=jsThis._closure;{const posX=clamp(event.x,width.value),posY=clamp(event.y,height.value),percentX=posX/width.value,percentY=posY/height.value,valX=reverse?100-Math.round(percentX*100):Math.round(percentX*100),valY=reverse?100-Math.round(percentY*100):Math.round(percentY*100);brightnessValue.value=vertical?valY:valX;runOnJS(onGestureChange)();}}";_f.__workletHash=849205486466;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\BrightnessSlider.js (26:37)";return _f;}();var gestureEvent=(0,_reactNativeReanimated.useAnimatedGestureHandler)({onStart:function(){var _f=function _f(event){handleScale.value=(0,_reactNativeReanimated.withTiming)(1.2,{duration:100});setValueFromGestureEvent(event);};_f._closure={handleScale:handleScale,withTiming:_reactNativeReanimated.withTiming,setValueFromGestureEvent:setValueFromGestureEvent};_f.asString="function _f(event){const{handleScale,withTiming,setValueFromGestureEvent}=jsThis._closure;{handleScale.value=withTiming(1.2,{duration:100});setValueFromGestureEvent(event);}}";_f.__workletHash=11737613060877;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\BrightnessSlider.js (33:17)";return _f;}(),onActive:function(){var _f=function _f(event){setValueFromGestureEvent(event);};_f._closure={setValueFromGestureEvent:setValueFromGestureEvent};_f.asString="function _f(event){const{setValueFromGestureEvent}=jsThis._closure;{setValueFromGestureEvent(event);}}";_f.__workletHash=11118074997245;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\BrightnessSlider.js (37:18)";return _f;}(),onFinish:function(){var _f=function _f(){handleScale.value=(0,_reactNativeReanimated.withTiming)(1,{duration:100});(0,_reactNativeReanimated.runOnJS)(onGestureEnd)();};_f._closure={handleScale:handleScale,withTiming:_reactNativeReanimated.withTiming,runOnJS:_reactNativeReanimated.runOnJS,onGestureEnd:onGestureEnd};_f.asString="function _f(){const{handleScale,withTiming,runOnJS,onGestureEnd}=jsThis._closure;{handleScale.value=withTiming(1,{duration:100});runOnJS(onGestureEnd)();}}";_f.__workletHash=6379049506140;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\BrightnessSlider.js (40:18)";return _f;}()},[width.value,height.value,vertical,reverse]);var onLayout=function onLayout(_ref2){var layout=_ref2.nativeEvent.layout;if(!vertical)width.value=(0,_reactNativeReanimated.withTiming)(Math.round(layout.width),{duration:5});if(vertical)height.value=(0,_reactNativeReanimated.withTiming)(Math.round(layout.height),{duration:5});};var imageStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){var imageRotate=vertical?reverse?'270deg':'90deg':reverse?'180deg':'0deg';var imageTranslateY=reverse&&isRtl||!reverse&&!isRtl?height.value/2-width.value/2:-height.value/2+width.value/2;return{width:vertical?height.value:width.value,height:vertical?width.value:height.value,borderRadius:borderRadius,transform:[{rotate:imageRotate},{translateX:vertical?reverse?-height.value/2+width.value/2:height.value/2-width.value/2:0},{translateY:vertical?imageTranslateY:0}]};};_f._closure={vertical:vertical,reverse:reverse,isRtl:isRtl,height:height,width:width,borderRadius:borderRadius};_f.asString="function _f(){const{vertical,reverse,isRtl,height,width,borderRadius}=jsThis._closure;{const imageRotate=vertical?reverse?'270deg':'90deg':reverse?'180deg':'0deg';const imageTranslateY=reverse&&isRtl||!reverse&&!isRtl?height.value/2-width.value/2:-height.value/2+width.value/2;return{width:vertical?height.value:width.value,height:vertical?width.value:height.value,borderRadius:borderRadius,transform:[{rotate:imageRotate},{translateX:vertical?reverse?-height.value/2+width.value/2:height.value/2-width.value/2:0},{translateY:vertical?imageTranslateY:0}]};}}";_f.__workletHash=4469555443498;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\BrightnessSlider.js (51:40)";_f.__optimalization=3;return _f;}(),[vertical,reverse,sliderThickness]);var thicknessStyle=vertical?{width:sliderThickness}:{height:sliderThickness};return _react.default.createElement(_reactNativeGestureHandler.PanGestureHandler,{onGestureEvent:gestureEvent,minDist:0,__self:this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:13}},_react.default.createElement(_reactNativeReanimated.default.View,{onLayout:onLayout,style:[{borderRadius:borderRadius},style,{position:'relative',borderWidth:0,padding:0},thicknessStyle,activeHueStyle],__self:this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:7}},_react.default.createElement(_reactNativeReanimated.default.Image,{source:require('../assets/Brightness.png'),style:imageStyle,__self:this,__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:9}}),_react.default.createElement(_Thumbs.default,{channel:'v',thumbShape:thumbShape,thumbSize:thumb_size,thumbColor:thumb_color,handleStyle:handleStyle,vertical:vertical,__self:this,__source:{fileName:_jsxFileName,lineNumber:69,columnNumber:9}})));}
|
|
2
2
|
//# sourceMappingURL=BrightnessSlider.web.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BrightnessSlider.web.js","mappings":"
|
|
1
|
+
{"version":3,"file":"BrightnessSlider.web.js","mappings":"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","names":["isRtl","I18nManager","isRTL","BrightnessSlider","thumbShape","thumbSize","thumbColor","style","vertical","reverse","CTX","brightnessValue","hueValue","onGestureChange","onGestureEnd","sliderThickness","thumbsSize","thumbsShape","thumbsColor","thumb_size","thumb_color","borderRadius","getWidth","getHeight","width","height","handleScale","handleStyle","length","value","percent","pos","posY","posX","transform","translateY","translateX","scale","activeHueStyle","backgroundColor","setValueFromGestureEvent","event","x","y","percentX","percentY","valX","Math","round","valY","clamp","gestureEvent","onStart","duration","withTiming","onActive","onFinish","runOnJS","onLayout","layout","nativeEvent","imageStyle","imageRotate","imageTranslateY","rotate","thicknessStyle","position","borderWidth","padding","require","channel"],"sourceRoot":"","sources":["../../src/components/BrightnessSlider.tsx"],"sourcesContent":[null]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
export declare function HueSlider({ thumbShape, thumbSize, thumbColor, style, vertical, reverse }:
|
|
1
|
+
import type { SliderProps } from '../types';
|
|
2
|
+
export declare function HueSlider({ thumbShape, thumbSize, thumbColor, style, vertical, reverse }: SliderProps): JSX.Element;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import { I18nManager
|
|
1
|
+
import React, { useContext } from 'react';
|
|
2
|
+
import { I18nManager } from 'react-native';
|
|
3
3
|
import { PanGestureHandler } from 'react-native-gesture-handler';
|
|
4
|
-
import Animated, { runOnJS, useAnimatedGestureHandler, useAnimatedStyle,
|
|
5
|
-
import { CTX, getStyle } from '../GlobalStyles';
|
|
4
|
+
import Animated, { runOnJS, useAnimatedGestureHandler, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
|
|
5
|
+
import { clamp, CTX, getStyle } from '../GlobalStyles';
|
|
6
6
|
import Thumb from './Thumbs';
|
|
7
7
|
const isRtl = I18nManager.isRTL;
|
|
8
8
|
export function HueSlider({ thumbShape, thumbSize, thumbColor, style = {}, vertical = false, reverse = false }) {
|
|
@@ -13,61 +13,60 @@ export function HueSlider({ thumbShape, thumbSize, thumbColor, style = {}, verti
|
|
|
13
13
|
const borderRadius = getStyle(style, 'borderRadius') ?? 5;
|
|
14
14
|
const getWidth = getStyle(style, 'width');
|
|
15
15
|
const getHeight = getStyle(style, 'height');
|
|
16
|
-
const
|
|
17
|
-
const
|
|
16
|
+
const width = useSharedValue(vertical ? sliderThickness : typeof getWidth === 'number' ? getWidth : 0);
|
|
17
|
+
const height = useSharedValue(!vertical ? sliderThickness : typeof getHeight === 'number' ? getHeight : 0);
|
|
18
18
|
const handleScale = useSharedValue(1);
|
|
19
|
-
const
|
|
20
|
-
const length = vertical ? height : width;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}, [
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}));
|
|
19
|
+
const handleStyle = useAnimatedStyle(() => {
|
|
20
|
+
const length = vertical ? height.value : width.value, percent = (hueValue.value / 360) * length, pos = (reverse ? length - percent : percent) - thumb_size / 2, posY = vertical ? pos : height.value / 2 - thumb_size / 2, posX = vertical ? width.value / 2 - thumb_size / 2 : pos;
|
|
21
|
+
return {
|
|
22
|
+
transform: [{ translateY: posY }, { translateX: posX }, { scale: handleScale.value }],
|
|
23
|
+
};
|
|
24
|
+
}, [thumbSize, vertical, reverse]);
|
|
25
|
+
const setValueFromGestureEvent = (event) => {
|
|
26
|
+
'worklet';
|
|
27
|
+
const posX = clamp(event.x, width.value), posY = clamp(event.y, height.value), percentX = posX / width.value, percentY = posY / height.value, valX = reverse ? 360 - Math.round(percentX * 360) : Math.round(percentX * 360), valY = reverse ? 360 - Math.round(percentY * 360) : Math.round(percentY * 360);
|
|
28
|
+
hueValue.value = vertical ? valY : valX;
|
|
29
|
+
runOnJS(onGestureChange)();
|
|
30
|
+
};
|
|
32
31
|
const gestureEvent = useAnimatedGestureHandler({
|
|
33
|
-
onStart:
|
|
34
|
-
ctx.x = event.x;
|
|
35
|
-
ctx.y = event.y;
|
|
32
|
+
onStart: event => {
|
|
36
33
|
handleScale.value = withTiming(1.2, { duration: 100 });
|
|
34
|
+
setValueFromGestureEvent(event);
|
|
37
35
|
},
|
|
38
|
-
onActive:
|
|
39
|
-
|
|
40
|
-
const x = event.translationX, y = event.translationY, posX = clamp(x + ctx.x, width), posY = clamp(y + ctx.y, height), percentX = posX / width, percentY = posY / height, hueX = reverse ? 360 - Math.round(percentX * 360) : Math.round(percentX * 360), hueY = reverse ? 360 - Math.round(percentY * 360) : Math.round(percentY * 360);
|
|
41
|
-
hueValue.value = vertical ? hueY : hueX;
|
|
42
|
-
runOnJS(onGestureChange)();
|
|
36
|
+
onActive: event => {
|
|
37
|
+
setValueFromGestureEvent(event);
|
|
43
38
|
},
|
|
44
39
|
onFinish: () => {
|
|
45
40
|
handleScale.value = withTiming(1, { duration: 100 });
|
|
46
41
|
runOnJS(onGestureEnd)();
|
|
47
42
|
},
|
|
48
|
-
}, [
|
|
49
|
-
const onLayout =
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
const imageTranslateY = (reverse && isRtl) || (!reverse && !isRtl) ? height / 2 - width / 2 : -height / 2 + width / 2;
|
|
55
|
-
const imageStyle = typeof height === 'number' &&
|
|
56
|
-
typeof width === 'number' && {
|
|
57
|
-
width: vertical ? height : width,
|
|
58
|
-
height: vertical ? width : height,
|
|
59
|
-
borderRadius,
|
|
60
|
-
transform: [
|
|
61
|
-
{ rotate: imageRotate },
|
|
62
|
-
{ translateX: vertical ? (reverse ? -height / 2 + width / 2 : height / 2 - width / 2) : 0 },
|
|
63
|
-
{ translateY: vertical ? imageTranslateY : 0 },
|
|
64
|
-
],
|
|
43
|
+
}, [width.value, height.value, vertical, reverse]);
|
|
44
|
+
const onLayout = ({ nativeEvent: { layout } }) => {
|
|
45
|
+
if (!vertical)
|
|
46
|
+
width.value = withTiming(Math.round(layout.width), { duration: 5 });
|
|
47
|
+
if (vertical)
|
|
48
|
+
height.value = withTiming(Math.round(layout.height), { duration: 5 });
|
|
65
49
|
};
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
50
|
+
const imageStyle = useAnimatedStyle(() => {
|
|
51
|
+
const imageRotate = vertical ? (reverse ? '270deg' : '90deg') : reverse ? '180deg' : '0deg';
|
|
52
|
+
const imageTranslateY = (reverse && isRtl) || (!reverse && !isRtl) ? height.value / 2 - width.value / 2 : -height.value / 2 + width.value / 2;
|
|
53
|
+
return {
|
|
54
|
+
width: vertical ? height.value : width.value,
|
|
55
|
+
height: vertical ? width.value : height.value,
|
|
56
|
+
borderRadius,
|
|
57
|
+
transform: [
|
|
58
|
+
{ rotate: imageRotate },
|
|
59
|
+
{ translateX: vertical ? (reverse ? -height.value / 2 + width.value / 2 : height.value / 2 - width.value / 2) : 0 },
|
|
60
|
+
{ translateY: vertical ? imageTranslateY : 0 },
|
|
61
|
+
],
|
|
62
|
+
};
|
|
63
|
+
}, [vertical, reverse, sliderThickness]);
|
|
64
|
+
const thicknessStyle = vertical ? { width: sliderThickness } : { height: sliderThickness };
|
|
65
|
+
return (<PanGestureHandler onGestureEvent={gestureEvent} minDist={0}>
|
|
66
|
+
<Animated.View onLayout={onLayout} style={[{ borderRadius }, style, thicknessStyle, { position: 'relative', borderWidth: 0, padding: 0 }]}>
|
|
67
|
+
<Animated.Image source={require('../assets/Hue.png')} style={imageStyle}/>
|
|
68
|
+
<Thumb {...{ channel: 'h', thumbShape, thumbSize: thumb_size, thumbColor: thumb_color, handleStyle, vertical }}/>
|
|
69
|
+
</Animated.View>
|
|
71
70
|
</PanGestureHandler>);
|
|
72
71
|
}
|
|
73
72
|
//# sourceMappingURL=HueSlider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HueSlider.js","sourceRoot":"","sources":["../../src/components/HueSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"HueSlider.js","sourceRoot":"","sources":["../../src/components/HueSlider.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.HueSlider=HueSlider;var
|
|
1
|
+
var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.HueSlider=HueSlider;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _reactNativeGestureHandler=require("react-native-gesture-handler");var _reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated"));var _GlobalStyles=require("../GlobalStyles");var _Thumbs=_interopRequireDefault(require("./Thumbs"));var _jsxFileName="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\HueSlider.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var isRtl=_reactNative.I18nManager.isRTL;function HueSlider(_ref){var _thumbShape,_getStyle;var thumbShape=_ref.thumbShape,thumbSize=_ref.thumbSize,thumbColor=_ref.thumbColor,_ref$style=_ref.style,style=_ref$style===void 0?{}:_ref$style,_ref$vertical=_ref.vertical,vertical=_ref$vertical===void 0?false:_ref$vertical,_ref$reverse=_ref.reverse,reverse=_ref$reverse===void 0?false:_ref$reverse;var _useContext=(0,_react.useContext)(_GlobalStyles.CTX),onGestureChange=_useContext.onGestureChange,onGestureEnd=_useContext.onGestureEnd,hueValue=_useContext.hueValue,sliderThickness=_useContext.sliderThickness,thumbsSize=_useContext.thumbSize,thumbsShape=_useContext.thumbShape,thumbsColor=_useContext.thumbColor;thumbShape=(_thumbShape=thumbShape)!=null?_thumbShape:thumbsShape;var thumb_size=thumbSize!=null?thumbSize:thumbsSize;var thumb_color=thumbColor!=null?thumbColor:thumbsColor;var borderRadius=(_getStyle=(0,_GlobalStyles.getStyle)(style,'borderRadius'))!=null?_getStyle:5;var getWidth=(0,_GlobalStyles.getStyle)(style,'width');var getHeight=(0,_GlobalStyles.getStyle)(style,'height');var width=(0,_reactNativeReanimated.useSharedValue)(vertical?sliderThickness:typeof getWidth==='number'?getWidth:0);var height=(0,_reactNativeReanimated.useSharedValue)(!vertical?sliderThickness:typeof getHeight==='number'?getHeight:0);var handleScale=(0,_reactNativeReanimated.useSharedValue)(1);var handleStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){var length=vertical?height.value:width.value,percent=hueValue.value/360*length,pos=(reverse?length-percent:percent)-thumb_size/2,posY=vertical?pos:height.value/2-thumb_size/2,posX=vertical?width.value/2-thumb_size/2:pos;return{transform:[{translateY:posY},{translateX:posX},{scale:handleScale.value}]};};_f._closure={vertical:vertical,height:height,width:width,hueValue:hueValue,reverse:reverse,thumb_size:thumb_size,handleScale:handleScale};_f.asString="function _f(){const{vertical,height,width,hueValue,reverse,thumb_size,handleScale}=jsThis._closure;{const length=vertical?height.value:width.value,percent=hueValue.value/360*length,pos=(reverse?length-percent:percent)-thumb_size/2,posY=vertical?pos:height.value/2-thumb_size/2,posX=vertical?width.value/2-thumb_size/2:pos;return{transform:[{translateY:posY},{translateX:posX},{scale:handleScale.value}]};}}";_f.__workletHash=10213923895352;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\HueSlider.js (19:41)";_f.__optimalization=3;return _f;}(),[thumbSize,vertical,reverse]);var setValueFromGestureEvent=function(){var _f=function _f(event){var posX=(0,_GlobalStyles.clamp)(event.x,width.value),posY=(0,_GlobalStyles.clamp)(event.y,height.value),percentX=posX/width.value,percentY=posY/height.value,valX=reverse?360-Math.round(percentX*360):Math.round(percentX*360),valY=reverse?360-Math.round(percentY*360):Math.round(percentY*360);hueValue.value=vertical?valY:valX;(0,_reactNativeReanimated.runOnJS)(onGestureChange)();};_f._closure={clamp:_GlobalStyles.clamp,width:width,height:height,reverse:reverse,hueValue:hueValue,vertical:vertical,runOnJS:_reactNativeReanimated.runOnJS,onGestureChange:onGestureChange};_f.asString="function _f(event){const{clamp,width,height,reverse,hueValue,vertical,runOnJS,onGestureChange}=jsThis._closure;{const posX=clamp(event.x,width.value),posY=clamp(event.y,height.value),percentX=posX/width.value,percentY=posY/height.value,valX=reverse?360-Math.round(percentX*360):Math.round(percentX*360),valY=reverse?360-Math.round(percentY*360):Math.round(percentY*360);hueValue.value=vertical?valY:valX;runOnJS(onGestureChange)();}}";_f.__workletHash=3961984408482;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\HueSlider.js (25:37)";return _f;}();var gestureEvent=(0,_reactNativeReanimated.useAnimatedGestureHandler)({onStart:function(){var _f=function _f(event){handleScale.value=(0,_reactNativeReanimated.withTiming)(1.2,{duration:100});setValueFromGestureEvent(event);};_f._closure={handleScale:handleScale,withTiming:_reactNativeReanimated.withTiming,setValueFromGestureEvent:setValueFromGestureEvent};_f.asString="function _f(event){const{handleScale,withTiming,setValueFromGestureEvent}=jsThis._closure;{handleScale.value=withTiming(1.2,{duration:100});setValueFromGestureEvent(event);}}";_f.__workletHash=11737613060877;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\HueSlider.js (32:17)";return _f;}(),onActive:function(){var _f=function _f(event){setValueFromGestureEvent(event);};_f._closure={setValueFromGestureEvent:setValueFromGestureEvent};_f.asString="function _f(event){const{setValueFromGestureEvent}=jsThis._closure;{setValueFromGestureEvent(event);}}";_f.__workletHash=11118074997245;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\HueSlider.js (36:18)";return _f;}(),onFinish:function(){var _f=function _f(){handleScale.value=(0,_reactNativeReanimated.withTiming)(1,{duration:100});(0,_reactNativeReanimated.runOnJS)(onGestureEnd)();};_f._closure={handleScale:handleScale,withTiming:_reactNativeReanimated.withTiming,runOnJS:_reactNativeReanimated.runOnJS,onGestureEnd:onGestureEnd};_f.asString="function _f(){const{handleScale,withTiming,runOnJS,onGestureEnd}=jsThis._closure;{handleScale.value=withTiming(1,{duration:100});runOnJS(onGestureEnd)();}}";_f.__workletHash=6379049506140;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\HueSlider.js (39:18)";return _f;}()},[width.value,height.value,vertical,reverse]);var onLayout=function onLayout(_ref2){var layout=_ref2.nativeEvent.layout;if(!vertical)width.value=(0,_reactNativeReanimated.withTiming)(Math.round(layout.width),{duration:5});if(vertical)height.value=(0,_reactNativeReanimated.withTiming)(Math.round(layout.height),{duration:5});};var imageStyle=(0,_reactNativeReanimated.useAnimatedStyle)(function(){var _f=function _f(){var imageRotate=vertical?reverse?'270deg':'90deg':reverse?'180deg':'0deg';var imageTranslateY=reverse&&isRtl||!reverse&&!isRtl?height.value/2-width.value/2:-height.value/2+width.value/2;return{width:vertical?height.value:width.value,height:vertical?width.value:height.value,borderRadius:borderRadius,transform:[{rotate:imageRotate},{translateX:vertical?reverse?-height.value/2+width.value/2:height.value/2-width.value/2:0},{translateY:vertical?imageTranslateY:0}]};};_f._closure={vertical:vertical,reverse:reverse,isRtl:isRtl,height:height,width:width,borderRadius:borderRadius};_f.asString="function _f(){const{vertical,reverse,isRtl,height,width,borderRadius}=jsThis._closure;{const imageRotate=vertical?reverse?'270deg':'90deg':reverse?'180deg':'0deg';const imageTranslateY=reverse&&isRtl||!reverse&&!isRtl?height.value/2-width.value/2:-height.value/2+width.value/2;return{width:vertical?height.value:width.value,height:vertical?width.value:height.value,borderRadius:borderRadius,transform:[{rotate:imageRotate},{translateX:vertical?reverse?-height.value/2+width.value/2:height.value/2-width.value/2:0},{translateY:vertical?imageTranslateY:0}]};}}";_f.__workletHash=4469555443498;_f.__location="D:\\Development\\--- Packages ---\\reanimated-color-picker\\lib\\components\\HueSlider.js (50:40)";_f.__optimalization=3;return _f;}(),[vertical,reverse,sliderThickness]);var thicknessStyle=vertical?{width:sliderThickness}:{height:sliderThickness};return _react.default.createElement(_reactNativeGestureHandler.PanGestureHandler,{onGestureEvent:gestureEvent,minDist:0,__self:this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:13}},_react.default.createElement(_reactNativeReanimated.default.View,{onLayout:onLayout,style:[{borderRadius:borderRadius},style,thicknessStyle,{position:'relative',borderWidth:0,padding:0}],__self:this,__source:{fileName:_jsxFileName,lineNumber:66,columnNumber:7}},_react.default.createElement(_reactNativeReanimated.default.Image,{source:require('../assets/Hue.png'),style:imageStyle,__self:this,__source:{fileName:_jsxFileName,lineNumber:67,columnNumber:9}}),_react.default.createElement(_Thumbs.default,{channel:'h',thumbShape:thumbShape,thumbSize:thumb_size,thumbColor:thumb_color,handleStyle:handleStyle,vertical:vertical,__self:this,__source:{fileName:_jsxFileName,lineNumber:68,columnNumber:9}})));}
|
|
2
2
|
//# sourceMappingURL=HueSlider.web.js.map
|