reanimated-color-picker 3.0.2 → 3.0.3

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.
Files changed (14) hide show
  1. package/lib/commonjs/components/Panels/Panel5.js +47 -31
  2. package/lib/commonjs/components/Panels/Panel5.js.map +1 -1
  3. package/lib/commonjs/utils.js +0 -11
  4. package/lib/commonjs/utils.js.map +1 -1
  5. package/lib/module/components/Panels/Panel5.js +50 -34
  6. package/lib/module/components/Panels/Panel5.js.map +1 -1
  7. package/lib/module/utils.js +0 -10
  8. package/lib/module/utils.js.map +1 -1
  9. package/lib/src/components/Panels/Panel5.tsx +55 -35
  10. package/lib/src/utils.tsx +0 -10
  11. package/lib/typescript/components/Panels/Panel5.d.ts.map +1 -1
  12. package/lib/typescript/utils.d.ts +0 -2
  13. package/lib/typescript/utils.d.ts.map +1 -1
  14. package/package.json +1 -1
package/lib/commonjs/components/Panels/Panel5.js CHANGED
@@ -15,6 +15,11 @@ var _utils = require("../../utils");
15
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
16
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
17
17
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
18
+ const animationOptions = {
19
+ duration: 300,
20
+ easing: _reactNativeReanimated.Easing.elastic(0.8)
21
+ };
22
+
18
23
  /** - This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares. */
19
24
  function Panel5({
20
25
  gestures = [],
@@ -22,7 +27,6 @@ function Panel5({
22
27
  selectionStyle = {}
23
28
  }) {
24
29
  const {
25
- value,
26
30
  hueValue,
27
31
  saturationValue,
28
32
  brightnessValue,
@@ -33,17 +37,8 @@ function Panel5({
33
37
  const squareSize = (0, _reactNativeReanimated.useSharedValue)(0),
34
38
  posX = (0, _reactNativeReanimated.useSharedValue)(0),
35
39
  posY = (0, _reactNativeReanimated.useSharedValue)(0),
36
- adaptiveColor = (0, _reactNativeReanimated.useSharedValue)('#000');
37
- const selectedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
38
- return {
39
- width: squareSize.value,
40
- height: squareSize.value,
41
- top: posY.value * squareSize.value,
42
- left: _utils.isRtl ? undefined : posX.value * squareSize.value,
43
- right: _utils.isRtl ? posX.value * squareSize.value : undefined,
44
- borderColor: adaptiveColor.value
45
- };
46
- }, [squareSize, posX, posY, adaptiveColor]);
40
+ adaptiveColor = (0, _reactNativeReanimated.useSharedValue)('#000'),
41
+ isTap = (0, _reactNativeReanimated.useSharedValue)(0);
47
42
  const setAdaptiveColor = color1 => {
48
43
  'worklet';
49
44
 
@@ -51,6 +46,39 @@ function Panel5({
51
46
  const contrast = _index.default.runOnUI().contrastRatio(color1, adaptiveColor.value);
52
47
  adaptiveColor.value = contrast < 4.5 ? color : adaptiveColor.value;
53
48
  };
49
+
50
+ // To apply color changes that are not triggered by the tap gesture
51
+ (0, _reactNativeReanimated.useDerivedValue)(() => {
52
+ if (isTap.value === 1) return;
53
+ const hsvColor = {
54
+ h: hueValue.value,
55
+ s: saturationValue.value,
56
+ v: brightnessValue.value
57
+ };
58
+ for (let y = 0; y < gridColors.length; y++) {
59
+ for (let x = 0; x < gridColors[y].length; x++) {
60
+ const gridColor = gridColors[y][x];
61
+ const areColorsEqual = _index.default.runOnUI().areColorsEqual(gridColor, hsvColor, 6);
62
+ if (!areColorsEqual) continue;
63
+ setAdaptiveColor(gridColor);
64
+ posX.value = (0, _reactNativeReanimated.withTiming)(x, animationOptions);
65
+ posY.value = (0, _reactNativeReanimated.withTiming)(y, animationOptions);
66
+ break;
67
+ }
68
+ }
69
+ }, [hueValue, saturationValue, brightnessValue, isTap, posX, posY]);
70
+ const selectedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
71
+ const x = posX.value * squareSize.value;
72
+ const y = posY.value * squareSize.value;
73
+ return {
74
+ width: squareSize.value,
75
+ height: squareSize.value,
76
+ top: y,
77
+ left: _utils.isRtl ? undefined : x,
78
+ right: _utils.isRtl ? x : undefined,
79
+ borderColor: adaptiveColor.value
80
+ };
81
+ }, [squareSize, adaptiveColor, posX, posY]);
54
82
  const tap = _reactNativeGestureHandler.Gesture.Tap().onBegin(({
55
83
  x,
56
84
  y
@@ -59,8 +87,9 @@ function Panel5({
59
87
  if (!squareSize.value) return;
60
88
  const row = Math.floor(y / squareSize.value);
61
89
  const column = Math.floor(x / squareSize.value);
62
- const color = gridColors === null || gridColors === void 0 || (_gridColors$row = gridColors[row]) === null || _gridColors$row === void 0 ? void 0 : _gridColors$row[column];
90
+ const color = (_gridColors$row = gridColors[row]) === null || _gridColors$row === void 0 ? void 0 : _gridColors$row[column];
63
91
  if (!color) return;
92
+ isTap.value = 1;
64
93
  const {
65
94
  h,
66
95
  s,
@@ -69,29 +98,16 @@ function Panel5({
69
98
  hueValue.value = h;
70
99
  saturationValue.value = s;
71
100
  brightnessValue.value = v;
72
- posX.value = (0, _reactNativeReanimated.withTiming)(column, {
73
- duration: 300,
74
- easing: _reactNativeReanimated.Easing.elastic(0.8)
75
- });
76
- posY.value = (0, _reactNativeReanimated.withTiming)(row, {
77
- duration: 300,
78
- easing: _reactNativeReanimated.Easing.elastic(0.8)
79
- });
101
+ posX.value = (0, _reactNativeReanimated.withTiming)(column, animationOptions);
102
+ posY.value = (0, _reactNativeReanimated.withTiming)(row, animationOptions);
80
103
  setAdaptiveColor(color);
81
104
  onGestureChange();
82
105
  onGestureEnd();
106
+ isTap.value = (0, _reactNativeReanimated.withDelay)(300, (0, _reactNativeReanimated.withTiming)(0, {
107
+ duration: 0
108
+ }));
83
109
  });
84
110
  const composed = _reactNativeGestureHandler.Gesture.Simultaneous(tap, ...gestures);
85
- (0, _react.useEffect)(() => {
86
- const [row, column] = (0, _utils.findIndexIn2DArray)(gridColors, c => _index.default.areColorsEqual(c, value, 6));
87
- if (column === null || row === null) {
88
- console.warn(`[ColorPicker]: The color '${value}' specified in the 'value' prop cannot be displayed in 'Panel5' as it falls outside the limited range of available colors.`);
89
- return;
90
- }
91
- posX.value = column;
92
- posY.value = row;
93
- setAdaptiveColor(value);
94
- }, [value]);
95
111
  const onLayout = (0, _react.useCallback)(({
96
112
  nativeEvent: {
97
113
  layout
package/lib/commonjs/components/Panels/Panel5.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Panel5.js","names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeGestureHandler","_reactNativeReanimated","_index","_interopRequireDefault","_AppContext","_styles","_utils","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Panel5","gestures","style","selectionStyle","value","hueValue","saturationValue","brightnessValue","onGestureChange","onGestureEnd","usePickerContext","borderRadius","getStyle","squareSize","useSharedValue","posX","posY","adaptiveColor","selectedStyle","useAnimatedStyle","width","height","top","left","isRtl","undefined","right","borderColor","setAdaptiveColor","color1","color","contrast","colorKit","runOnUI","contrastRatio","tap","Gesture","Tap","onBegin","x","y","_gridColors$row","row","Math","floor","column","gridColors","h","s","v","HSV","object","withTiming","duration","easing","Easing","elastic","composed","Simultaneous","useEffect","findIndexIn2DArray","c","areColorsEqual","console","warn","onLayout","useCallback","nativeEvent","layout","createElement","GestureDetector","gesture","ImageBackground","source","position","borderWidth","padding","aspectRatio","imageStyle","resizeMode","View","styles","selected"],"sources":["../../../src/components/Panels/Panel5.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react';\nimport { ImageBackground } from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\n\nimport colorKit from '../../colorKit/index';\nimport usePickerContext from '../../AppContext';\nimport { styles } from '../../styles';\nimport { findIndexIn2DArray, getStyle, isRtl } from '../../utils';\n\nimport type { Panel5Props } from '../../types';\nimport type { LayoutChangeEvent } from 'react-native';\n\n/** - This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares. */\nexport function Panel5({ gestures = [], style = {}, selectionStyle = {} }: Panel5Props) {\n const { value, hueValue, saturationValue, brightnessValue, onGestureChange, onGestureEnd } = usePickerContext();\n\n const borderRadius = getStyle(style, 'borderRadius') ?? 0;\n\n const squareSize = useSharedValue(0),\n posX = useSharedValue(0),\n posY = useSharedValue(0),\n adaptiveColor = useSharedValue('#000');\n\n const selectedStyle = useAnimatedStyle(() => {\n return {\n width: squareSize.value,\n height: squareSize.value,\n top: posY.value * squareSize.value,\n left: isRtl ? undefined : posX.value * squareSize.value,\n right: isRtl ? posX.value * squareSize.value : undefined,\n borderColor: adaptiveColor.value,\n };\n }, [squareSize, posX, posY, adaptiveColor]);\n\n const setAdaptiveColor = (color1: string) => {\n 'worklet';\n const color = adaptiveColor.value === '#ffffff' ? '#000000' : '#ffffff';\n const contrast = colorKit.runOnUI().contrastRatio(color1, adaptiveColor.value);\n adaptiveColor.value = contrast < 4.5 ? color : adaptiveColor.value;\n };\n\n const tap = Gesture.Tap().onBegin(({ x, y }) => {\n if (!squareSize.value) return;\n\n const row = Math.floor(y / squareSize.value);\n const column = Math.floor(x / squareSize.value);\n\n const color = gridColors?.[row]?.[column];\n if (!color) return;\n\n const { h, s, v } = colorKit.runOnUI().HSV(color).object(false);\n hueValue.value = h;\n saturationValue.value = s;\n brightnessValue.value = v;\n\n posX.value = withTiming(column, { duration: 300, easing: Easing.elastic(0.8) });\n posY.value = withTiming(row, { duration: 300, easing: Easing.elastic(0.8) });\n\n setAdaptiveColor(color);\n onGestureChange();\n onGestureEnd();\n });\n\n const composed = Gesture.Simultaneous(tap, ...gestures);\n\n useEffect(() => {\n const [row, column] = findIndexIn2DArray(gridColors, c => colorKit.areColorsEqual(c, value, 6));\n\n if (column === null || row === null) {\n console.warn(\n `[ColorPicker]: The color '${value}' specified in the 'value' prop cannot be displayed in 'Panel5' as it falls outside the limited range of available colors.`,\n );\n return;\n }\n\n posX.value = column;\n posY.value = row;\n\n setAdaptiveColor(value);\n }, [value]);\n\n const onLayout = useCallback(({ nativeEvent: { layout } }: LayoutChangeEvent) => {\n squareSize.value = withTiming(layout.width / 12 || layout.height / 10, { duration: 100 });\n }, []);\n\n return (\n <GestureDetector gesture={composed}>\n <ImageBackground\n source={require('../../assets/grid.png')}\n onLayout={onLayout}\n style={[style, { position: 'relative', borderWidth: 0, padding: 0, aspectRatio: 1.2 }]}\n imageStyle={{ borderRadius }}\n resizeMode='stretch'\n >\n <Animated.View style={[styles.selected, selectionStyle, selectedStyle]} />\n </ImageBackground>\n </GestureDetector>\n );\n}\n\nconst gridColors = [\n [\n '#FFFFFF',\n '#EBEBEB',\n '#D6D6D6',\n '#C2C2C2',\n '#ADADAD',\n '#999999',\n '#858585',\n '#707070',\n '#5C5C5C',\n '#474747',\n '#333333',\n '#000000',\n ],\n [\n '#00374A',\n '#011D57',\n '#11053B',\n '#2E063D',\n '#3C071B',\n '#5C0701',\n '#5A1C00',\n '#583300',\n '#563D00',\n '#666100',\n '#4F5504',\n '#263E0F',\n ],\n [\n '#004D65',\n '#012F7B',\n '#1A0A52',\n '#450D59',\n '#551029',\n '#831100',\n '#7B2900',\n '#7A4A00',\n '#785800',\n '#8D8602',\n '#6F760A',\n '#38571A',\n ],\n [\n '#016E8F',\n '#0042A9',\n '#2C0977',\n '#61187C',\n '#791A3D',\n '#B51A00',\n '#AD3E00',\n '#A96800',\n '#A67B01',\n '#C4BC00',\n '#9BA50E',\n '#4E7A27',\n ],\n [\n '#008CB4',\n '#0056D6',\n '#371A94',\n '#7A219E',\n '#99244F',\n '#E22400',\n '#DA5100',\n '#D38301',\n '#D19D01',\n '#F5EC00',\n '#C3D117',\n '#669D34',\n ],\n [\n '#00A1D8',\n '#0061FD',\n '#4D22B2',\n '#982ABC',\n '#B92D5D',\n '#FF4015',\n '#FF6A00',\n '#FFAB01',\n '#FCC700',\n '#FEFB41',\n '#D9EC37',\n '#76BB40',\n ],\n [\n '#01C7FC',\n '#3A87FD',\n '#5E30EB',\n '#BE38F3',\n '#E63B7A',\n '#FE6250',\n '#FE8648',\n '#FEB43F',\n '#FECB3E',\n '#FFF76B',\n '#E4EF65',\n '#96D35F',\n ],\n [\n '#52D6FC',\n '#74A7FF',\n '#864FFD',\n '#D357FE',\n '#EE719E',\n '#FF8C82',\n '#FEA57D',\n '#FEC777',\n '#FED977',\n '#FFF994',\n '#EAF28F',\n '#B1DD8B',\n ],\n [\n '#93E3FC',\n '#A7C6FF',\n '#B18CFE',\n '#E292FE',\n '#F4A4C0',\n '#FFB5AF',\n '#FFC5AB',\n '#FED9A8',\n '#FDE4A8',\n '#FFFBB9',\n '#F1F7B7',\n '#CDE8B5',\n ],\n [\n '#CBF0FF',\n '#D2E2FE',\n '#D8C9FE',\n '#EFCAFE',\n '#F9D3E0',\n '#FFDAD8',\n '#FFE2D6',\n '#FEECD4',\n '#FEF1D5',\n '#FDFBDD',\n '#F6FADB',\n '#DEEED4',\n ],\n];\n"],"mappings":"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,IAAI;IAAC9E,KAAK,EAAE,CAAC+E,cAAM,CAACC,QAAQ,EAAE/E,cAAc,EAAEe,aAAa;EAAE,CAAE,CAC1D,CACF,CAAC;AAEtB;AAEA,MAAM4B,UAAU,GAAG,CACjB,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,CACF"}
1
+ {"version":3,"file":"Panel5.js","names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeGestureHandler","_reactNativeReanimated","_index","_interopRequireDefault","_AppContext","_styles","_utils","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","animationOptions","duration","easing","Easing","elastic","Panel5","gestures","style","selectionStyle","hueValue","saturationValue","brightnessValue","onGestureChange","onGestureEnd","usePickerContext","borderRadius","getStyle","squareSize","useSharedValue","posX","posY","adaptiveColor","isTap","setAdaptiveColor","color1","color","value","contrast","colorKit","runOnUI","contrastRatio","useDerivedValue","hsvColor","h","s","v","y","gridColors","length","x","gridColor","areColorsEqual","withTiming","selectedStyle","useAnimatedStyle","width","height","top","left","isRtl","undefined","right","borderColor","tap","Gesture","Tap","onBegin","_gridColors$row","row","Math","floor","column","HSV","object","withDelay","composed","Simultaneous","onLayout","useCallback","nativeEvent","layout","createElement","GestureDetector","gesture","ImageBackground","source","position","borderWidth","padding","aspectRatio","imageStyle","resizeMode","View","styles","selected"],"sources":["../../../src/components/Panels/Panel5.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { ImageBackground } from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, {\n Easing,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withDelay,\n withTiming,\n} from 'react-native-reanimated';\n\nimport colorKit from '../../colorKit/index';\nimport usePickerContext from '../../AppContext';\nimport { styles } from '../../styles';\nimport { getStyle, isRtl } from '../../utils';\n\nimport type { Panel5Props } from '../../types';\nimport type { LayoutChangeEvent } from 'react-native';\n\nconst animationOptions = { duration: 300, easing: Easing.elastic(0.8) };\n\n/** - This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares. */\nexport function Panel5({ gestures = [], style = {}, selectionStyle = {} }: Panel5Props) {\n const { hueValue, saturationValue, brightnessValue, onGestureChange, onGestureEnd } = usePickerContext();\n\n const borderRadius = getStyle(style, 'borderRadius') ?? 0;\n\n const squareSize = useSharedValue(0),\n posX = useSharedValue(0),\n posY = useSharedValue(0),\n adaptiveColor = useSharedValue('#000'),\n isTap = useSharedValue<0 | 1>(0);\n\n const setAdaptiveColor = (color1: string) => {\n 'worklet';\n const color = adaptiveColor.value === '#ffffff' ? '#000000' : '#ffffff';\n const contrast = colorKit.runOnUI().contrastRatio(color1, adaptiveColor.value);\n adaptiveColor.value = contrast < 4.5 ? color : adaptiveColor.value;\n };\n\n // To apply color changes that are not triggered by the tap gesture\n useDerivedValue(() => {\n if (isTap.value === 1) return;\n\n const hsvColor = { h: hueValue.value, s: saturationValue.value, v: brightnessValue.value };\n\n for (let y = 0; y < gridColors.length; y++) {\n for (let x = 0; x < gridColors[y].length; x++) {\n const gridColor = gridColors[y][x];\n const areColorsEqual = colorKit.runOnUI().areColorsEqual(gridColor, hsvColor, 6);\n if (!areColorsEqual) continue;\n setAdaptiveColor(gridColor);\n posX.value = withTiming(x, animationOptions);\n posY.value = withTiming(y, animationOptions);\n break;\n }\n }\n }, [hueValue, saturationValue, brightnessValue, isTap, posX, posY]);\n\n const selectedStyle = useAnimatedStyle(() => {\n const x = posX.value * squareSize.value;\n const y = posY.value * squareSize.value;\n\n return {\n width: squareSize.value,\n height: squareSize.value,\n top: y,\n left: isRtl ? undefined : x,\n right: isRtl ? x : undefined,\n borderColor: adaptiveColor.value,\n };\n }, [squareSize, adaptiveColor, posX, posY]);\n\n const tap = Gesture.Tap().onBegin(({ x, y }) => {\n if (!squareSize.value) return;\n\n const row = Math.floor(y / squareSize.value);\n const column = Math.floor(x / squareSize.value);\n\n const color: string | undefined = gridColors[row]?.[column];\n if (!color) return;\n\n isTap.value = 1;\n\n const { h, s, v } = colorKit.runOnUI().HSV(color).object(false);\n hueValue.value = h;\n saturationValue.value = s;\n brightnessValue.value = v;\n\n posX.value = withTiming(column, animationOptions);\n posY.value = withTiming(row, animationOptions);\n\n setAdaptiveColor(color);\n onGestureChange();\n onGestureEnd();\n\n isTap.value = withDelay(300, withTiming(0, { duration: 0 }));\n });\n\n const composed = Gesture.Simultaneous(tap, ...gestures);\n\n const onLayout = useCallback(({ nativeEvent: { layout } }: LayoutChangeEvent) => {\n squareSize.value = withTiming(layout.width / 12 || layout.height / 10, { duration: 100 });\n }, []);\n\n return (\n <GestureDetector gesture={composed}>\n <ImageBackground\n source={require('../../assets/grid.png')}\n onLayout={onLayout}\n style={[style, { position: 'relative', borderWidth: 0, padding: 0, aspectRatio: 1.2 }]}\n imageStyle={{ borderRadius }}\n resizeMode='stretch'\n >\n <Animated.View style={[styles.selected, selectionStyle, selectedStyle]} />\n </ImageBackground>\n </GestureDetector>\n );\n}\n\nconst gridColors = [\n [\n '#FFFFFF',\n '#EBEBEB',\n '#D6D6D6',\n '#C2C2C2',\n '#ADADAD',\n '#999999',\n '#858585',\n '#707070',\n '#5C5C5C',\n '#474747',\n '#333333',\n '#000000',\n ],\n [\n '#00374A',\n '#011D57',\n '#11053B',\n '#2E063D',\n '#3C071B',\n '#5C0701',\n '#5A1C00',\n '#583300',\n '#563D00',\n '#666100',\n '#4F5504',\n '#263E0F',\n ],\n [\n '#004D65',\n '#012F7B',\n '#1A0A52',\n '#450D59',\n '#551029',\n '#831100',\n '#7B2900',\n '#7A4A00',\n '#785800',\n '#8D8602',\n '#6F760A',\n '#38571A',\n ],\n [\n '#016E8F',\n '#0042A9',\n '#2C0977',\n '#61187C',\n '#791A3D',\n '#B51A00',\n '#AD3E00',\n '#A96800',\n '#A67B01',\n '#C4BC00',\n '#9BA50E',\n '#4E7A27',\n ],\n [\n '#008CB4',\n '#0056D6',\n '#371A94',\n '#7A219E',\n '#99244F',\n '#E22400',\n '#DA5100',\n '#D38301',\n '#D19D01',\n '#F5EC00',\n '#C3D117',\n '#669D34',\n ],\n [\n '#00A1D8',\n '#0061FD',\n '#4D22B2',\n '#982ABC',\n '#B92D5D',\n '#FF4015',\n '#FF6A00',\n '#FFAB01',\n '#FCC700',\n '#FEFB41',\n '#D9EC37',\n '#76BB40',\n ],\n [\n '#01C7FC',\n '#3A87FD',\n '#5E30EB',\n '#BE38F3',\n '#E63B7A',\n '#FE6250',\n '#FE8648',\n '#FEB43F',\n '#FECB3E',\n '#FFF76B',\n '#E4EF65',\n '#96D35F',\n ],\n [\n '#52D6FC',\n '#74A7FF',\n '#864FFD',\n '#D357FE',\n '#EE719E',\n '#FF8C82',\n '#FEA57D',\n '#FEC777',\n '#FED977',\n '#FFF994',\n '#EAF28F',\n '#B1DD8B',\n ],\n [\n '#93E3FC',\n '#A7C6FF',\n '#B18CFE',\n '#E292FE',\n '#F4A4C0',\n '#FFB5AF',\n '#FFC5AB',\n '#FED9A8',\n '#FDE4A8',\n '#FFFBB9',\n '#F1F7B7',\n '#CDE8B5',\n ],\n [\n '#CBF0FF',\n '#D2E2FE',\n '#D8C9FE',\n '#EFCAFE',\n '#F9D3E0',\n '#FFDAD8',\n '#FFE2D6',\n '#FEECD4',\n '#FEF1D5',\n '#FDFBDD',\n '#F6FADB',\n '#DEEED4',\n ],\n];\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,0BAAA,GAAAF,OAAA;AACA,IAAAG,sBAAA,GAAAJ,uBAAA,CAAAC,OAAA;AASA,IAAAI,MAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,WAAA,GAAAD,sBAAA,CAAAL,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AACA,IAAAQ,MAAA,GAAAR,OAAA;AAA8C,SAAAK,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAd,wBAAAc,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;AAK9C,MAAMY,gBAAgB,GAAG;EAAEC,QAAQ,EAAE,GAAG;EAAEC,MAAM,EAAEC,6BAAM,CAACC,OAAO,CAAC,GAAG;AAAE,CAAC;;AAEvE;AACO,SAASC,MAAMA,CAAC;EAAEC,QAAQ,GAAG,EAAE;EAAEC,KAAK,GAAG,CAAC,CAAC;EAAEC,cAAc,GAAG,CAAC;AAAe,CAAC,EAAE;EACtF,MAAM;IAAEC,QAAQ;IAAEC,eAAe;IAAEC,eAAe;IAAEC,eAAe;IAAEC;EAAa,CAAC,GAAG,IAAAC,mBAAgB,EAAC,CAAC;EAExG,MAAMC,YAAY,GAAG,IAAAC,eAAQ,EAACT,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC;EAEzD,MAAMU,UAAU,GAAG,IAAAC,qCAAc,EAAC,CAAC,CAAC;IAClCC,IAAI,GAAG,IAAAD,qCAAc,EAAC,CAAC,CAAC;IACxBE,IAAI,GAAG,IAAAF,qCAAc,EAAC,CAAC,CAAC;IACxBG,aAAa,GAAG,IAAAH,qCAAc,EAAC,MAAM,CAAC;IACtCI,KAAK,GAAG,IAAAJ,qCAAc,EAAQ,CAAC,CAAC;EAElC,MAAMK,gBAAgB,GAAIC,MAAc,IAAK;IAC3C,SAAS;;IACT,MAAMC,KAAK,GAAGJ,aAAa,CAACK,KAAK,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS;IACvE,MAAMC,QAAQ,GAAGC,cAAQ,CAACC,OAAO,CAAC,CAAC,CAACC,aAAa,CAACN,MAAM,EAAEH,aAAa,CAACK,KAAK,CAAC;IAC9EL,aAAa,CAACK,KAAK,GAAGC,QAAQ,GAAG,GAAG,GAAGF,KAAK,GAAGJ,aAAa,CAACK,KAAK;EACpE,CAAC;;EAED;EACA,IAAAK,sCAAe,EAAC,MAAM;IACpB,IAAIT,KAAK,CAACI,KAAK,KAAK,CAAC,EAAE;IAEvB,MAAMM,QAAQ,GAAG;MAAEC,CAAC,EAAExB,QAAQ,CAACiB,KAAK;MAAEQ,CAAC,EAAExB,eAAe,CAACgB,KAAK;MAAES,CAAC,EAAExB,eAAe,CAACe;IAAM,CAAC;IAE1F,KAAK,IAAIU,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGC,UAAU,CAACC,MAAM,EAAEF,CAAC,EAAE,EAAE;MAC1C,KAAK,IAAIG,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGF,UAAU,CAACD,CAAC,CAAC,CAACE,MAAM,EAAEC,CAAC,EAAE,EAAE;QAC7C,MAAMC,SAAS,GAAGH,UAAU,CAACD,CAAC,CAAC,CAACG,CAAC,CAAC;QAClC,MAAME,cAAc,GAAGb,cAAQ,CAACC,OAAO,CAAC,CAAC,CAACY,cAAc,CAACD,SAAS,EAAER,QAAQ,EAAE,CAAC,CAAC;QAChF,IAAI,CAACS,cAAc,EAAE;QACrBlB,gBAAgB,CAACiB,SAAS,CAAC;QAC3BrB,IAAI,CAACO,KAAK,GAAG,IAAAgB,iCAAU,EAACH,CAAC,EAAEvC,gBAAgB,CAAC;QAC5CoB,IAAI,CAACM,KAAK,GAAG,IAAAgB,iCAAU,EAACN,CAAC,EAAEpC,gBAAgB,CAAC;QAC5C;MACF;IACF;EACF,CAAC,EAAE,CAACS,QAAQ,EAAEC,eAAe,EAAEC,eAAe,EAAEW,KAAK,EAAEH,IAAI,EAAEC,IAAI,CAAC,CAAC;EAEnE,MAAMuB,aAAa,GAAG,IAAAC,uCAAgB,EAAC,MAAM;IAC3C,MAAML,CAAC,GAAGpB,IAAI,CAACO,KAAK,GAAGT,UAAU,CAACS,KAAK;IACvC,MAAMU,CAAC,GAAGhB,IAAI,CAACM,KAAK,GAAGT,UAAU,CAACS,KAAK;IAEvC,OAAO;MACLmB,KAAK,EAAE5B,UAAU,CAACS,KAAK;MACvBoB,MAAM,EAAE7B,UAAU,CAACS,KAAK;MACxBqB,GAAG,EAAEX,CAAC;MACNY,IAAI,EAAEC,YAAK,GAAGC,SAAS,GAAGX,CAAC;MAC3BY,KAAK,EAAEF,YAAK,GAAGV,CAAC,GAAGW,SAAS;MAC5BE,WAAW,EAAE/B,aAAa,CAACK;IAC7B,CAAC;EACH,CAAC,EAAE,CAACT,UAAU,EAAEI,aAAa,EAAEF,IAAI,EAAEC,IAAI,CAAC,CAAC;EAE3C,MAAMiC,GAAG,GAAGC,kCAAO,CAACC,GAAG,CAAC,CAAC,CAACC,OAAO,CAAC,CAAC;IAAEjB,CAAC;IAAEH;EAAE,CAAC,KAAK;IAAA,IAAAqB,eAAA;IAC9C,IAAI,CAACxC,UAAU,CAACS,KAAK,EAAE;IAEvB,MAAMgC,GAAG,GAAGC,IAAI,CAACC,KAAK,CAACxB,CAAC,GAAGnB,UAAU,CAACS,KAAK,CAAC;IAC5C,MAAMmC,MAAM,GAAGF,IAAI,CAACC,KAAK,CAACrB,CAAC,GAAGtB,UAAU,CAACS,KAAK,CAAC;IAE/C,MAAMD,KAAyB,IAAAgC,eAAA,GAAGpB,UAAU,CAACqB,GAAG,CAAC,cAAAD,eAAA,uBAAfA,eAAA,CAAkBI,MAAM,CAAC;IAC3D,IAAI,CAACpC,KAAK,EAAE;IAEZH,KAAK,CAACI,KAAK,GAAG,CAAC;IAEf,MAAM;MAAEO,CAAC;MAAEC,CAAC;MAAEC;IAAE,CAAC,GAAGP,cAAQ,CAACC,OAAO,CAAC,CAAC,CAACiC,GAAG,CAACrC,KAAK,CAAC,CAACsC,MAAM,CAAC,KAAK,CAAC;IAC/DtD,QAAQ,CAACiB,KAAK,GAAGO,CAAC;IAClBvB,eAAe,CAACgB,KAAK,GAAGQ,CAAC;IACzBvB,eAAe,CAACe,KAAK,GAAGS,CAAC;IAEzBhB,IAAI,CAACO,KAAK,GAAG,IAAAgB,iCAAU,EAACmB,MAAM,EAAE7D,gBAAgB,CAAC;IACjDoB,IAAI,CAACM,KAAK,GAAG,IAAAgB,iCAAU,EAACgB,GAAG,EAAE1D,gBAAgB,CAAC;IAE9CuB,gBAAgB,CAACE,KAAK,CAAC;IACvBb,eAAe,CAAC,CAAC;IACjBC,YAAY,CAAC,CAAC;IAEdS,KAAK,CAACI,KAAK,GAAG,IAAAsC,gCAAS,EAAC,GAAG,EAAE,IAAAtB,iCAAU,EAAC,CAAC,EAAE;MAAEzC,QAAQ,EAAE;IAAE,CAAC,CAAC,CAAC;EAC9D,CAAC,CAAC;EAEF,MAAMgE,QAAQ,GAAGX,kCAAO,CAACY,YAAY,CAACb,GAAG,EAAE,GAAG/C,QAAQ,CAAC;EAEvD,MAAM6D,QAAQ,GAAG,IAAAC,kBAAW,EAAC,CAAC;IAAEC,WAAW,EAAE;MAAEC;IAAO;EAAqB,CAAC,KAAK;IAC/ErD,UAAU,CAACS,KAAK,GAAG,IAAAgB,iCAAU,EAAC4B,MAAM,CAACzB,KAAK,GAAG,EAAE,IAAIyB,MAAM,CAACxB,MAAM,GAAG,EAAE,EAAE;MAAE7C,QAAQ,EAAE;IAAI,CAAC,CAAC;EAC3F,CAAC,EAAE,EAAE,CAAC;EAEN,oBACElC,MAAA,CAAAa,OAAA,CAAA2F,aAAA,CAACpG,0BAAA,CAAAqG,eAAe;IAACC,OAAO,EAAER;EAAS,gBACjClG,MAAA,CAAAa,OAAA,CAAA2F,aAAA,CAACrG,YAAA,CAAAwG,eAAe;IACdC,MAAM,EAAE1G,OAAO,wBAAwB,CAAE;IACzCkG,QAAQ,EAAEA,QAAS;IACnB5D,KAAK,EAAE,CAACA,KAAK,EAAE;MAAEqE,QAAQ,EAAE,UAAU;MAAEC,WAAW,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,WAAW,EAAE;IAAI,CAAC,CAAE;IACvFC,UAAU,EAAE;MAAEjE;IAAa,CAAE;IAC7BkE,UAAU,EAAC;EAAS,gBAEpBlH,MAAA,CAAAa,OAAA,CAAA2F,aAAA,CAACnG,sBAAA,CAAAQ,OAAQ,CAACsG,IAAI;IAAC3E,KAAK,EAAE,CAAC4E,cAAM,CAACC,QAAQ,EAAE5E,cAAc,EAAEmC,aAAa;EAAE,CAAE,CAC1D,CACF,CAAC;AAEtB;AAEA,MAAMN,UAAU,GAAG,CACjB,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,CACF"}
package/lib/commonjs/utils.js CHANGED
@@ -9,7 +9,6 @@ exports.RenderNativeOnly = RenderNativeOnly;
9
9
  exports.RenderWebOnly = RenderWebOnly;
10
10
  exports.clamp = clamp;
11
11
  exports.enableAndroidHardwareTextures = void 0;
12
- exports.findIndexIn2DArray = findIndexIn2DArray;
13
12
  exports.getStyle = getStyle;
14
13
  exports.isWeb = exports.isRtl = void 0;
15
14
  var _react = _interopRequireDefault(require("react"));
@@ -18,16 +17,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
18
17
  const isRtl = exports.isRtl = _reactNative.I18nManager.isRTL;
19
18
  const isWeb = exports.isWeb = _reactNative.Platform.OS === 'web';
20
19
 
21
- /** - To find the index of an element in a two-dimensional array. */
22
- function findIndexIn2DArray(array, evaluate) {
23
- for (let i = 0; i < array.length; i++) {
24
- for (let j = 0; j < array[i].length; j++) {
25
- if (evaluate(array[i][j])) return [i, j];
26
- }
27
- }
28
- return [null, null];
29
- }
30
-
31
20
  /** - Get a specific property from a react native style object */
32
21
  function getStyle(style, property) {
33
22
  const flattened = _reactNative.StyleSheet.flatten(style);
package/lib/commonjs/utils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","names":["_react","_interopRequireDefault","require","_reactNative","obj","__esModule","default","isRtl","exports","I18nManager","isRTL","isWeb","Platform","OS","findIndexIn2DArray","array","evaluate","i","length","j","getStyle","style","property","flattened","StyleSheet","flatten","clamp","v","max","Math","min","HSVA2HSLA_string","h","s","a","l","sl","sln","ConditionalRendering","props","if","createElement","Fragment","children","RenderNativeOnly","RenderWebOnly","enableAndroidHardwareTextures","Version"],"sources":["../src/utils.tsx"],"sourcesContent":["import React from 'react';\nimport { I18nManager, Platform, StyleSheet } from 'react-native';\n\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nexport const isRtl = I18nManager.isRTL;\nexport const isWeb = Platform.OS === 'web';\n\n/** - To find the index of an element in a two-dimensional array. */\nexport function findIndexIn2DArray<T>(array: T[][], evaluate: (target: T) => boolean): [number, number] | [null, null] {\n for (let i = 0; i < array.length; i++) {\n for (let j = 0; j < array[i].length; j++) {\n if (evaluate(array[i][j])) return [i, j];\n }\n }\n return [null, null];\n}\n\n/** - Get a specific property from a react native style object */\nexport function getStyle<T extends keyof ViewStyle>(style: StyleProp<ViewStyle>, property: T): ViewStyle[T] | undefined {\n const flattened = StyleSheet.flatten(style);\n return flattened[property];\n}\n\n/** - Clamp a number value between `0` and a max value */\nexport function clamp(v: number, max: number) {\n 'worklet';\n return Math.min(Math.max(v, 0), max);\n}\n\n/** - Convert `HSV` color to an `HSLA` string representation */\nexport function HSVA2HSLA_string(h: number, s: number, v: number, a = 1) {\n 'worklet';\n\n s = s / 100;\n v = v / 100;\n\n const l = ((2 - s) * v) / 2,\n sl = s * v,\n sln = l !== 0 && l !== 1 ? sl / (l < 0.5 ? l * 2 : 2 - l * 2) : sl;\n\n return `hsla(${h}, ${sln * 100}%, ${l * 100}%, ${a})`;\n}\n\n/** - Render children only if the `render` property is `true` */\nexport function ConditionalRendering(props: { children: React.ReactNode; if: boolean }) {\n if (!props.if) return null;\n return <>{props.children}</>;\n}\n\n/** - Render children for native platforms only (Android, IOS) */\nexport function RenderNativeOnly({ children }: { children: React.ReactNode }) {\n if (isWeb) return null;\n return <>{children}</>;\n}\n\n/** - Render children for Web platform only */\nexport function RenderWebOnly({ children }: { children: React.ReactNode }) {\n if (!isWeb) return null;\n return <>{children}</>;\n}\n\n/**\n * Enable Android hardware texture rendering for Android Nougat(API 24) to Pie(API 28) to address an issue when applying a\n * transform on a View with a border radius > 0.\n *\n * See: https://github.com/facebook/react-native/issues/18266\n */\nexport const enableAndroidHardwareTextures = Platform.OS === 'android' && Platform.Version >= 24 && Platform.Version <= 28;\n"],"mappings":"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"}
1
+ {"version":3,"file":"utils.js","names":["_react","_interopRequireDefault","require","_reactNative","obj","__esModule","default","isRtl","exports","I18nManager","isRTL","isWeb","Platform","OS","getStyle","style","property","flattened","StyleSheet","flatten","clamp","v","max","Math","min","HSVA2HSLA_string","h","s","a","l","sl","sln","ConditionalRendering","props","if","createElement","Fragment","children","RenderNativeOnly","RenderWebOnly","enableAndroidHardwareTextures","Version"],"sources":["../src/utils.tsx"],"sourcesContent":["import React from 'react';\nimport { I18nManager, Platform, StyleSheet } from 'react-native';\n\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nexport const isRtl = I18nManager.isRTL;\nexport const isWeb = Platform.OS === 'web';\n\n/** - Get a specific property from a react native style object */\nexport function getStyle<T extends keyof ViewStyle>(style: StyleProp<ViewStyle>, property: T): ViewStyle[T] | undefined {\n const flattened = StyleSheet.flatten(style);\n return flattened[property];\n}\n\n/** - Clamp a number value between `0` and a max value */\nexport function clamp(v: number, max: number) {\n 'worklet';\n return Math.min(Math.max(v, 0), max);\n}\n\n/** - Convert `HSV` color to an `HSLA` string representation */\nexport function HSVA2HSLA_string(h: number, s: number, v: number, a = 1) {\n 'worklet';\n\n s = s / 100;\n v = v / 100;\n\n const l = ((2 - s) * v) / 2,\n sl = s * v,\n sln = l !== 0 && l !== 1 ? sl / (l < 0.5 ? l * 2 : 2 - l * 2) : sl;\n\n return `hsla(${h}, ${sln * 100}%, ${l * 100}%, ${a})`;\n}\n\n/** - Render children only if the `render` property is `true` */\nexport function ConditionalRendering(props: { children: React.ReactNode; if: boolean }) {\n if (!props.if) return null;\n return <>{props.children}</>;\n}\n\n/** - Render children for native platforms only (Android, IOS) */\nexport function RenderNativeOnly({ children }: { children: React.ReactNode }) {\n if (isWeb) return null;\n return <>{children}</>;\n}\n\n/** - Render children for Web platform only */\nexport function RenderWebOnly({ children }: { children: React.ReactNode }) {\n if (!isWeb) return null;\n return <>{children}</>;\n}\n\n/**\n * Enable Android hardware texture rendering for Android Nougat(API 24) to Pie(API 28) to address an issue when applying a\n * transform on a View with a border radius > 0.\n *\n * See: https://github.com/facebook/react-native/issues/18266\n */\nexport const enableAndroidHardwareTextures = Platform.OS === 'android' && Platform.Version >= 24 && Platform.Version <= 28;\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAAiE,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAI1D,MAAMG,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAGE,wBAAW,CAACC,KAAK;AAC/B,MAAMC,KAAK,GAAAH,OAAA,CAAAG,KAAA,GAAGC,qBAAQ,CAACC,EAAE,KAAK,KAAK;;AAE1C;AACO,SAASC,QAAQA,CAA4BC,KAA2B,EAAEC,QAAW,EAA4B;EACtH,MAAMC,SAAS,GAAGC,uBAAU,CAACC,OAAO,CAACJ,KAAK,CAAC;EAC3C,OAAOE,SAAS,CAACD,QAAQ,CAAC;AAC5B;;AAEA;AACO,SAASI,KAAKA,CAACC,CAAS,EAAEC,GAAW,EAAE;EAC5C,SAAS;;EACT,OAAOC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACD,GAAG,CAACD,CAAC,EAAE,CAAC,CAAC,EAAEC,GAAG,CAAC;AACtC;;AAEA;AACO,SAASG,gBAAgBA,CAACC,CAAS,EAAEC,CAAS,EAAEN,CAAS,EAAEO,CAAC,GAAG,CAAC,EAAE;EACvE,SAAS;;EAETD,CAAC,GAAGA,CAAC,GAAG,GAAG;EACXN,CAAC,GAAGA,CAAC,GAAG,GAAG;EAEX,MAAMQ,CAAC,GAAI,CAAC,CAAC,GAAGF,CAAC,IAAIN,CAAC,GAAI,CAAC;IACzBS,EAAE,GAAGH,CAAC,GAAGN,CAAC;IACVU,GAAG,GAAGF,CAAC,KAAK,CAAC,IAAIA,CAAC,KAAK,CAAC,GAAGC,EAAE,IAAID,CAAC,GAAG,GAAG,GAAGA,CAAC,GAAG,CAAC,GAAG,CAAC,GAAGA,CAAC,GAAG,CAAC,CAAC,GAAGC,EAAE;EAEpE,OAAQ,QAAOJ,CAAE,KAAIK,GAAG,GAAG,GAAI,MAAKF,CAAC,GAAG,GAAI,MAAKD,CAAE,GAAE;AACvD;;AAEA;AACO,SAASI,oBAAoBA,CAACC,KAAiD,EAAE;EACtF,IAAI,CAACA,KAAK,CAACC,EAAE,EAAE,OAAO,IAAI;EAC1B,oBAAOlC,MAAA,CAAAM,OAAA,CAAA6B,aAAA,CAAAnC,MAAA,CAAAM,OAAA,CAAA8B,QAAA,QAAGH,KAAK,CAACI,QAAW,CAAC;AAC9B;;AAEA;AACO,SAASC,gBAAgBA,CAAC;EAAED;AAAwC,CAAC,EAAE;EAC5E,IAAI1B,KAAK,EAAE,OAAO,IAAI;EACtB,oBAAOX,MAAA,CAAAM,OAAA,CAAA6B,aAAA,CAAAnC,MAAA,CAAAM,OAAA,CAAA8B,QAAA,QAAGC,QAAW,CAAC;AACxB;;AAEA;AACO,SAASE,aAAaA,CAAC;EAAEF;AAAwC,CAAC,EAAE;EACzE,IAAI,CAAC1B,KAAK,EAAE,OAAO,IAAI;EACvB,oBAAOX,MAAA,CAAAM,OAAA,CAAA6B,aAAA,CAAAnC,MAAA,CAAAM,OAAA,CAAA8B,QAAA,QAAGC,QAAW,CAAC;AACxB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMG,6BAA6B,GAAAhC,OAAA,CAAAgC,6BAAA,GAAG5B,qBAAQ,CAACC,EAAE,KAAK,SAAS,IAAID,qBAAQ,CAAC6B,OAAO,IAAI,EAAE,IAAI7B,qBAAQ,CAAC6B,OAAO,IAAI,EAAE"}
package/lib/module/components/Panels/Panel5.js CHANGED
@@ -1,11 +1,16 @@
1
- import React, { useCallback, useEffect } from 'react';
1
+ import React, { useCallback } from 'react';
2
2
  import { ImageBackground } from 'react-native';
3
3
  import { Gesture, GestureDetector } from 'react-native-gesture-handler';
4
- import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
4
+ import Animated, { Easing, useAnimatedStyle, useDerivedValue, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
5
5
  import colorKit from "../../colorKit/index";
6
6
  import usePickerContext from "../../AppContext";
7
7
  import { styles } from "../../styles";
8
- import { findIndexIn2DArray, getStyle, isRtl } from "../../utils";
8
+ import { getStyle, isRtl } from "../../utils";
9
+ const animationOptions = {
10
+ duration: 300,
11
+ easing: Easing.elastic(0.8)
12
+ };
13
+
9
14
  /** - This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares. */
10
15
  export function Panel5({
11
16
  gestures = [],
@@ -13,7 +18,6 @@ export function Panel5({
13
18
  selectionStyle = {}
14
19
  }) {
15
20
  const {
16
- value,
17
21
  hueValue,
18
22
  saturationValue,
19
23
  brightnessValue,
@@ -24,17 +28,8 @@ export function Panel5({
24
28
  const squareSize = useSharedValue(0),
25
29
  posX = useSharedValue(0),
26
30
  posY = useSharedValue(0),
27
- adaptiveColor = useSharedValue('#000');
28
- const selectedStyle = useAnimatedStyle(() => {
29
- return {
30
- width: squareSize.value,
31
- height: squareSize.value,
32
- top: posY.value * squareSize.value,
33
- left: isRtl ? undefined : posX.value * squareSize.value,
34
- right: isRtl ? posX.value * squareSize.value : undefined,
35
- borderColor: adaptiveColor.value
36
- };
37
- }, [squareSize, posX, posY, adaptiveColor]);
31
+ adaptiveColor = useSharedValue('#000'),
32
+ isTap = useSharedValue(0);
38
33
  const setAdaptiveColor = color1 => {
39
34
  'worklet';
40
35
 
@@ -42,6 +37,39 @@ export function Panel5({
42
37
  const contrast = colorKit.runOnUI().contrastRatio(color1, adaptiveColor.value);
43
38
  adaptiveColor.value = contrast < 4.5 ? color : adaptiveColor.value;
44
39
  };
40
+
41
+ // To apply color changes that are not triggered by the tap gesture
42
+ useDerivedValue(() => {
43
+ if (isTap.value === 1) return;
44
+ const hsvColor = {
45
+ h: hueValue.value,
46
+ s: saturationValue.value,
47
+ v: brightnessValue.value
48
+ };
49
+ for (let y = 0; y < gridColors.length; y++) {
50
+ for (let x = 0; x < gridColors[y].length; x++) {
51
+ const gridColor = gridColors[y][x];
52
+ const areColorsEqual = colorKit.runOnUI().areColorsEqual(gridColor, hsvColor, 6);
53
+ if (!areColorsEqual) continue;
54
+ setAdaptiveColor(gridColor);
55
+ posX.value = withTiming(x, animationOptions);
56
+ posY.value = withTiming(y, animationOptions);
57
+ break;
58
+ }
59
+ }
60
+ }, [hueValue, saturationValue, brightnessValue, isTap, posX, posY]);
61
+ const selectedStyle = useAnimatedStyle(() => {
62
+ const x = posX.value * squareSize.value;
63
+ const y = posY.value * squareSize.value;
64
+ return {
65
+ width: squareSize.value,
66
+ height: squareSize.value,
67
+ top: y,
68
+ left: isRtl ? undefined : x,
69
+ right: isRtl ? x : undefined,
70
+ borderColor: adaptiveColor.value
71
+ };
72
+ }, [squareSize, adaptiveColor, posX, posY]);
45
73
  const tap = Gesture.Tap().onBegin(({
46
74
  x,
47
75
  y
@@ -50,8 +78,9 @@ export function Panel5({
50
78
  if (!squareSize.value) return;
51
79
  const row = Math.floor(y / squareSize.value);
52
80
  const column = Math.floor(x / squareSize.value);
53
- const color = gridColors === null || gridColors === void 0 || (_gridColors$row = gridColors[row]) === null || _gridColors$row === void 0 ? void 0 : _gridColors$row[column];
81
+ const color = (_gridColors$row = gridColors[row]) === null || _gridColors$row === void 0 ? void 0 : _gridColors$row[column];
54
82
  if (!color) return;
83
+ isTap.value = 1;
55
84
  const {
56
85
  h,
57
86
  s,
@@ -60,29 +89,16 @@ export function Panel5({
60
89
  hueValue.value = h;
61
90
  saturationValue.value = s;
62
91
  brightnessValue.value = v;
63
- posX.value = withTiming(column, {
64
- duration: 300,
65
- easing: Easing.elastic(0.8)
66
- });
67
- posY.value = withTiming(row, {
68
- duration: 300,
69
- easing: Easing.elastic(0.8)
70
- });
92
+ posX.value = withTiming(column, animationOptions);
93
+ posY.value = withTiming(row, animationOptions);
71
94
  setAdaptiveColor(color);
72
95
  onGestureChange();
73
96
  onGestureEnd();
97
+ isTap.value = withDelay(300, withTiming(0, {
98
+ duration: 0
99
+ }));
74
100
  });
75
101
  const composed = Gesture.Simultaneous(tap, ...gestures);
76
- useEffect(() => {
77
- const [row, column] = findIndexIn2DArray(gridColors, c => colorKit.areColorsEqual(c, value, 6));
78
- if (column === null || row === null) {
79
- console.warn(`[ColorPicker]: The color '${value}' specified in the 'value' prop cannot be displayed in 'Panel5' as it falls outside the limited range of available colors.`);
80
- return;
81
- }
82
- posX.value = column;
83
- posY.value = row;
84
- setAdaptiveColor(value);
85
- }, [value]);
86
102
  const onLayout = useCallback(({
87
103
  nativeEvent: {
88
104
  layout
package/lib/module/components/Panels/Panel5.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Panel5.js","names":["React","useCallback","useEffect","ImageBackground","Gesture","GestureDetector","Animated","Easing","useAnimatedStyle","useSharedValue","withTiming","colorKit","usePickerContext","styles","findIndexIn2DArray","getStyle","isRtl","Panel5","gestures","style","selectionStyle","value","hueValue","saturationValue","brightnessValue","onGestureChange","onGestureEnd","borderRadius","squareSize","posX","posY","adaptiveColor","selectedStyle","width","height","top","left","undefined","right","borderColor","setAdaptiveColor","color1","color","contrast","runOnUI","contrastRatio","tap","Tap","onBegin","x","y","_gridColors$row","row","Math","floor","column","gridColors","h","s","v","HSV","object","duration","easing","elastic","composed","Simultaneous","c","areColorsEqual","console","warn","onLayout","nativeEvent","layout","createElement","gesture","source","require","position","borderWidth","padding","aspectRatio","imageStyle","resizeMode","View","selected"],"sources":["../../../src/components/Panels/Panel5.tsx"],"sourcesContent":["import React, { useCallback, useEffect } from 'react';\nimport { ImageBackground } from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';\n\nimport colorKit from '../../colorKit/index';\nimport usePickerContext from '../../AppContext';\nimport { styles } from '../../styles';\nimport { findIndexIn2DArray, getStyle, isRtl } from '../../utils';\n\nimport type { Panel5Props } from '../../types';\nimport type { LayoutChangeEvent } from 'react-native';\n\n/** - This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares. */\nexport function Panel5({ gestures = [], style = {}, selectionStyle = {} }: Panel5Props) {\n const { value, hueValue, saturationValue, brightnessValue, onGestureChange, onGestureEnd } = usePickerContext();\n\n const borderRadius = getStyle(style, 'borderRadius') ?? 0;\n\n const squareSize = useSharedValue(0),\n posX = useSharedValue(0),\n posY = useSharedValue(0),\n adaptiveColor = useSharedValue('#000');\n\n const selectedStyle = useAnimatedStyle(() => {\n return {\n width: squareSize.value,\n height: squareSize.value,\n top: posY.value * squareSize.value,\n left: isRtl ? undefined : posX.value * squareSize.value,\n right: isRtl ? posX.value * squareSize.value : undefined,\n borderColor: adaptiveColor.value,\n };\n }, [squareSize, posX, posY, adaptiveColor]);\n\n const setAdaptiveColor = (color1: string) => {\n 'worklet';\n const color = adaptiveColor.value === '#ffffff' ? '#000000' : '#ffffff';\n const contrast = colorKit.runOnUI().contrastRatio(color1, adaptiveColor.value);\n adaptiveColor.value = contrast < 4.5 ? color : adaptiveColor.value;\n };\n\n const tap = Gesture.Tap().onBegin(({ x, y }) => {\n if (!squareSize.value) return;\n\n const row = Math.floor(y / squareSize.value);\n const column = Math.floor(x / squareSize.value);\n\n const color = gridColors?.[row]?.[column];\n if (!color) return;\n\n const { h, s, v } = colorKit.runOnUI().HSV(color).object(false);\n hueValue.value = h;\n saturationValue.value = s;\n brightnessValue.value = v;\n\n posX.value = withTiming(column, { duration: 300, easing: Easing.elastic(0.8) });\n posY.value = withTiming(row, { duration: 300, easing: Easing.elastic(0.8) });\n\n setAdaptiveColor(color);\n onGestureChange();\n onGestureEnd();\n });\n\n const composed = Gesture.Simultaneous(tap, ...gestures);\n\n useEffect(() => {\n const [row, column] = findIndexIn2DArray(gridColors, c => colorKit.areColorsEqual(c, value, 6));\n\n if (column === null || row === null) {\n console.warn(\n `[ColorPicker]: The color '${value}' specified in the 'value' prop cannot be displayed in 'Panel5' as it falls outside the limited range of available colors.`,\n );\n return;\n }\n\n posX.value = column;\n posY.value = row;\n\n setAdaptiveColor(value);\n }, [value]);\n\n const onLayout = useCallback(({ nativeEvent: { layout } }: LayoutChangeEvent) => {\n squareSize.value = withTiming(layout.width / 12 || layout.height / 10, { duration: 100 });\n }, []);\n\n return (\n <GestureDetector gesture={composed}>\n <ImageBackground\n source={require('../../assets/grid.png')}\n onLayout={onLayout}\n style={[style, { position: 'relative', borderWidth: 0, padding: 0, aspectRatio: 1.2 }]}\n imageStyle={{ borderRadius }}\n resizeMode='stretch'\n >\n <Animated.View style={[styles.selected, selectionStyle, selectedStyle]} />\n </ImageBackground>\n </GestureDetector>\n );\n}\n\nconst gridColors = [\n [\n '#FFFFFF',\n '#EBEBEB',\n '#D6D6D6',\n '#C2C2C2',\n '#ADADAD',\n '#999999',\n '#858585',\n '#707070',\n '#5C5C5C',\n '#474747',\n '#333333',\n '#000000',\n ],\n [\n '#00374A',\n '#011D57',\n '#11053B',\n '#2E063D',\n '#3C071B',\n '#5C0701',\n '#5A1C00',\n '#583300',\n '#563D00',\n '#666100',\n '#4F5504',\n '#263E0F',\n ],\n [\n '#004D65',\n '#012F7B',\n '#1A0A52',\n '#450D59',\n '#551029',\n '#831100',\n '#7B2900',\n '#7A4A00',\n '#785800',\n '#8D8602',\n '#6F760A',\n '#38571A',\n ],\n [\n '#016E8F',\n '#0042A9',\n '#2C0977',\n '#61187C',\n '#791A3D',\n '#B51A00',\n '#AD3E00',\n '#A96800',\n '#A67B01',\n '#C4BC00',\n '#9BA50E',\n '#4E7A27',\n ],\n [\n '#008CB4',\n '#0056D6',\n '#371A94',\n '#7A219E',\n '#99244F',\n '#E22400',\n '#DA5100',\n '#D38301',\n '#D19D01',\n '#F5EC00',\n '#C3D117',\n '#669D34',\n ],\n [\n '#00A1D8',\n '#0061FD',\n '#4D22B2',\n '#982ABC',\n '#B92D5D',\n '#FF4015',\n '#FF6A00',\n '#FFAB01',\n '#FCC700',\n '#FEFB41',\n '#D9EC37',\n '#76BB40',\n ],\n [\n '#01C7FC',\n '#3A87FD',\n '#5E30EB',\n '#BE38F3',\n '#E63B7A',\n '#FE6250',\n '#FE8648',\n '#FEB43F',\n '#FECB3E',\n '#FFF76B',\n '#E4EF65',\n '#96D35F',\n ],\n [\n '#52D6FC',\n '#74A7FF',\n '#864FFD',\n '#D357FE',\n '#EE719E',\n '#FF8C82',\n '#FEA57D',\n '#FEC777',\n '#FED977',\n '#FFF994',\n '#EAF28F',\n '#B1DD8B',\n ],\n [\n '#93E3FC',\n '#A7C6FF',\n '#B18CFE',\n '#E292FE',\n '#F4A4C0',\n '#FFB5AF',\n '#FFC5AB',\n '#FED9A8',\n '#FDE4A8',\n '#FFFBB9',\n '#F1F7B7',\n '#CDE8B5',\n ],\n [\n '#CBF0FF',\n '#D2E2FE',\n '#D8C9FE',\n '#EFCAFE',\n '#F9D3E0',\n '#FFDAD8',\n '#FFE2D6',\n '#FEECD4',\n '#FEF1D5',\n '#FDFBDD',\n '#F6FADB',\n '#DEEED4',\n ],\n];\n"],"mappings":"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AAE;MAAEvD;IAAa,CAAE;IAC7BwD,UAAU,EAAC;EAAS,gBAEpBnF,KAAA,CAAA0E,aAAA,CAACpE,QAAQ,CAAC8E,IAAI;IAACjE,KAAK,EAAE,CAACN,MAAM,CAACwE,QAAQ,EAAEjE,cAAc,EAAEY,aAAa;EAAE,CAAE,CAC1D,CACF,CAAC;AAEtB;AAEA,MAAMwB,UAAU,GAAG,CACjB,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,CACF"}
1
+ {"version":3,"file":"Panel5.js","names":["React","useCallback","ImageBackground","Gesture","GestureDetector","Animated","Easing","useAnimatedStyle","useDerivedValue","useSharedValue","withDelay","withTiming","colorKit","usePickerContext","styles","getStyle","isRtl","animationOptions","duration","easing","elastic","Panel5","gestures","style","selectionStyle","hueValue","saturationValue","brightnessValue","onGestureChange","onGestureEnd","borderRadius","squareSize","posX","posY","adaptiveColor","isTap","setAdaptiveColor","color1","color","value","contrast","runOnUI","contrastRatio","hsvColor","h","s","v","y","gridColors","length","x","gridColor","areColorsEqual","selectedStyle","width","height","top","left","undefined","right","borderColor","tap","Tap","onBegin","_gridColors$row","row","Math","floor","column","HSV","object","composed","Simultaneous","onLayout","nativeEvent","layout","createElement","gesture","source","require","position","borderWidth","padding","aspectRatio","imageStyle","resizeMode","View","selected"],"sources":["../../../src/components/Panels/Panel5.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { ImageBackground } from 'react-native';\nimport { Gesture, GestureDetector } from 'react-native-gesture-handler';\nimport Animated, {\n Easing,\n useAnimatedStyle,\n useDerivedValue,\n useSharedValue,\n withDelay,\n withTiming,\n} from 'react-native-reanimated';\n\nimport colorKit from '../../colorKit/index';\nimport usePickerContext from '../../AppContext';\nimport { styles } from '../../styles';\nimport { getStyle, isRtl } from '../../utils';\n\nimport type { Panel5Props } from '../../types';\nimport type { LayoutChangeEvent } from 'react-native';\n\nconst animationOptions = { duration: 300, easing: Easing.elastic(0.8) };\n\n/** - This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares. */\nexport function Panel5({ gestures = [], style = {}, selectionStyle = {} }: Panel5Props) {\n const { hueValue, saturationValue, brightnessValue, onGestureChange, onGestureEnd } = usePickerContext();\n\n const borderRadius = getStyle(style, 'borderRadius') ?? 0;\n\n const squareSize = useSharedValue(0),\n posX = useSharedValue(0),\n posY = useSharedValue(0),\n adaptiveColor = useSharedValue('#000'),\n isTap = useSharedValue<0 | 1>(0);\n\n const setAdaptiveColor = (color1: string) => {\n 'worklet';\n const color = adaptiveColor.value === '#ffffff' ? '#000000' : '#ffffff';\n const contrast = colorKit.runOnUI().contrastRatio(color1, adaptiveColor.value);\n adaptiveColor.value = contrast < 4.5 ? color : adaptiveColor.value;\n };\n\n // To apply color changes that are not triggered by the tap gesture\n useDerivedValue(() => {\n if (isTap.value === 1) return;\n\n const hsvColor = { h: hueValue.value, s: saturationValue.value, v: brightnessValue.value };\n\n for (let y = 0; y < gridColors.length; y++) {\n for (let x = 0; x < gridColors[y].length; x++) {\n const gridColor = gridColors[y][x];\n const areColorsEqual = colorKit.runOnUI().areColorsEqual(gridColor, hsvColor, 6);\n if (!areColorsEqual) continue;\n setAdaptiveColor(gridColor);\n posX.value = withTiming(x, animationOptions);\n posY.value = withTiming(y, animationOptions);\n break;\n }\n }\n }, [hueValue, saturationValue, brightnessValue, isTap, posX, posY]);\n\n const selectedStyle = useAnimatedStyle(() => {\n const x = posX.value * squareSize.value;\n const y = posY.value * squareSize.value;\n\n return {\n width: squareSize.value,\n height: squareSize.value,\n top: y,\n left: isRtl ? undefined : x,\n right: isRtl ? x : undefined,\n borderColor: adaptiveColor.value,\n };\n }, [squareSize, adaptiveColor, posX, posY]);\n\n const tap = Gesture.Tap().onBegin(({ x, y }) => {\n if (!squareSize.value) return;\n\n const row = Math.floor(y / squareSize.value);\n const column = Math.floor(x / squareSize.value);\n\n const color: string | undefined = gridColors[row]?.[column];\n if (!color) return;\n\n isTap.value = 1;\n\n const { h, s, v } = colorKit.runOnUI().HSV(color).object(false);\n hueValue.value = h;\n saturationValue.value = s;\n brightnessValue.value = v;\n\n posX.value = withTiming(column, animationOptions);\n posY.value = withTiming(row, animationOptions);\n\n setAdaptiveColor(color);\n onGestureChange();\n onGestureEnd();\n\n isTap.value = withDelay(300, withTiming(0, { duration: 0 }));\n });\n\n const composed = Gesture.Simultaneous(tap, ...gestures);\n\n const onLayout = useCallback(({ nativeEvent: { layout } }: LayoutChangeEvent) => {\n squareSize.value = withTiming(layout.width / 12 || layout.height / 10, { duration: 100 });\n }, []);\n\n return (\n <GestureDetector gesture={composed}>\n <ImageBackground\n source={require('../../assets/grid.png')}\n onLayout={onLayout}\n style={[style, { position: 'relative', borderWidth: 0, padding: 0, aspectRatio: 1.2 }]}\n imageStyle={{ borderRadius }}\n resizeMode='stretch'\n >\n <Animated.View style={[styles.selected, selectionStyle, selectedStyle]} />\n </ImageBackground>\n </GestureDetector>\n );\n}\n\nconst gridColors = [\n [\n '#FFFFFF',\n '#EBEBEB',\n '#D6D6D6',\n '#C2C2C2',\n '#ADADAD',\n '#999999',\n '#858585',\n '#707070',\n '#5C5C5C',\n '#474747',\n '#333333',\n '#000000',\n ],\n [\n '#00374A',\n '#011D57',\n '#11053B',\n '#2E063D',\n '#3C071B',\n '#5C0701',\n '#5A1C00',\n '#583300',\n '#563D00',\n '#666100',\n '#4F5504',\n '#263E0F',\n ],\n [\n '#004D65',\n '#012F7B',\n '#1A0A52',\n '#450D59',\n '#551029',\n '#831100',\n '#7B2900',\n '#7A4A00',\n '#785800',\n '#8D8602',\n '#6F760A',\n '#38571A',\n ],\n [\n '#016E8F',\n '#0042A9',\n '#2C0977',\n '#61187C',\n '#791A3D',\n '#B51A00',\n '#AD3E00',\n '#A96800',\n '#A67B01',\n '#C4BC00',\n '#9BA50E',\n '#4E7A27',\n ],\n [\n '#008CB4',\n '#0056D6',\n '#371A94',\n '#7A219E',\n '#99244F',\n '#E22400',\n '#DA5100',\n '#D38301',\n '#D19D01',\n '#F5EC00',\n '#C3D117',\n '#669D34',\n ],\n [\n '#00A1D8',\n '#0061FD',\n '#4D22B2',\n '#982ABC',\n '#B92D5D',\n '#FF4015',\n '#FF6A00',\n '#FFAB01',\n '#FCC700',\n '#FEFB41',\n '#D9EC37',\n '#76BB40',\n ],\n [\n '#01C7FC',\n '#3A87FD',\n '#5E30EB',\n '#BE38F3',\n '#E63B7A',\n '#FE6250',\n '#FE8648',\n '#FEB43F',\n '#FECB3E',\n '#FFF76B',\n '#E4EF65',\n '#96D35F',\n ],\n [\n '#52D6FC',\n '#74A7FF',\n '#864FFD',\n '#D357FE',\n '#EE719E',\n '#FF8C82',\n '#FEA57D',\n '#FEC777',\n '#FED977',\n '#FFF994',\n '#EAF28F',\n '#B1DD8B',\n ],\n [\n '#93E3FC',\n '#A7C6FF',\n '#B18CFE',\n '#E292FE',\n '#F4A4C0',\n '#FFB5AF',\n '#FFC5AB',\n '#FED9A8',\n '#FDE4A8',\n '#FFFBB9',\n '#F1F7B7',\n '#CDE8B5',\n ],\n [\n '#CBF0FF',\n '#D2E2FE',\n '#D8C9FE',\n '#EFCAFE',\n '#F9D3E0',\n '#FFDAD8',\n '#FFE2D6',\n '#FEECD4',\n '#FEF1D5',\n '#FDFBDD',\n '#F6FADB',\n '#DEEED4',\n ],\n];\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,SAASC,eAAe,QAAQ,cAAc;AAC9C,SAASC,OAAO,EAAEC,eAAe,QAAQ,8BAA8B;AACvE,OAAOC,QAAQ,IACbC,MAAM,EACNC,gBAAgB,EAChBC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,UAAU,QACL,yBAAyB;AAEhC,OAAOC,QAAQ;AACf,OAAOC,gBAAgB;AACvB,SAASC,MAAM;AACf,SAASC,QAAQ,EAAEC,KAAK;AAKxB,MAAMC,gBAAgB,GAAG;EAAEC,QAAQ,EAAE,GAAG;EAAEC,MAAM,EAAEb,MAAM,CAACc,OAAO,CAAC,GAAG;AAAE,CAAC;;AAEvE;AACA,OAAO,SAASC,MAAMA,CAAC;EAAEC,QAAQ,GAAG,EAAE;EAAEC,KAAK,GAAG,CAAC,CAAC;EAAEC,cAAc,GAAG,CAAC;AAAe,CAAC,EAAE;EACtF,MAAM;IAAEC,QAAQ;IAAEC,eAAe;IAAEC,eAAe;IAAEC,eAAe;IAAEC;EAAa,CAAC,GAAGhB,gBAAgB,CAAC,CAAC;EAExG,MAAMiB,YAAY,GAAGf,QAAQ,CAACQ,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC;EAEzD,MAAMQ,UAAU,GAAGtB,cAAc,CAAC,CAAC,CAAC;IAClCuB,IAAI,GAAGvB,cAAc,CAAC,CAAC,CAAC;IACxBwB,IAAI,GAAGxB,cAAc,CAAC,CAAC,CAAC;IACxByB,aAAa,GAAGzB,cAAc,CAAC,MAAM,CAAC;IACtC0B,KAAK,GAAG1B,cAAc,CAAQ,CAAC,CAAC;EAElC,MAAM2B,gBAAgB,GAAIC,MAAc,IAAK;IAC3C,SAAS;;IACT,MAAMC,KAAK,GAAGJ,aAAa,CAACK,KAAK,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS;IACvE,MAAMC,QAAQ,GAAG5B,QAAQ,CAAC6B,OAAO,CAAC,CAAC,CAACC,aAAa,CAACL,MAAM,EAAEH,aAAa,CAACK,KAAK,CAAC;IAC9EL,aAAa,CAACK,KAAK,GAAGC,QAAQ,GAAG,GAAG,GAAGF,KAAK,GAAGJ,aAAa,CAACK,KAAK;EACpE,CAAC;;EAED;EACA/B,eAAe,CAAC,MAAM;IACpB,IAAI2B,KAAK,CAACI,KAAK,KAAK,CAAC,EAAE;IAEvB,MAAMI,QAAQ,GAAG;MAAEC,CAAC,EAAEnB,QAAQ,CAACc,KAAK;MAAEM,CAAC,EAAEnB,eAAe,CAACa,KAAK;MAAEO,CAAC,EAAEnB,eAAe,CAACY;IAAM,CAAC;IAE1F,KAAK,IAAIQ,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGC,UAAU,CAACC,MAAM,EAAEF,CAAC,EAAE,EAAE;MAC1C,KAAK,IAAIG,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGF,UAAU,CAACD,CAAC,CAAC,CAACE,MAAM,EAAEC,CAAC,EAAE,EAAE;QAC7C,MAAMC,SAAS,GAAGH,UAAU,CAACD,CAAC,CAAC,CAACG,CAAC,CAAC;QAClC,MAAME,cAAc,GAAGxC,QAAQ,CAAC6B,OAAO,CAAC,CAAC,CAACW,cAAc,CAACD,SAAS,EAAER,QAAQ,EAAE,CAAC,CAAC;QAChF,IAAI,CAACS,cAAc,EAAE;QACrBhB,gBAAgB,CAACe,SAAS,CAAC;QAC3BnB,IAAI,CAACO,KAAK,GAAG5B,UAAU,CAACuC,CAAC,EAAEjC,gBAAgB,CAAC;QAC5CgB,IAAI,CAACM,KAAK,GAAG5B,UAAU,CAACoC,CAAC,EAAE9B,gBAAgB,CAAC;QAC5C;MACF;IACF;EACF,CAAC,EAAE,CAACQ,QAAQ,EAAEC,eAAe,EAAEC,eAAe,EAAEQ,KAAK,EAAEH,IAAI,EAAEC,IAAI,CAAC,CAAC;EAEnE,MAAMoB,aAAa,GAAG9C,gBAAgB,CAAC,MAAM;IAC3C,MAAM2C,CAAC,GAAGlB,IAAI,CAACO,KAAK,GAAGR,UAAU,CAACQ,KAAK;IACvC,MAAMQ,CAAC,GAAGd,IAAI,CAACM,KAAK,GAAGR,UAAU,CAACQ,KAAK;IAEvC,OAAO;MACLe,KAAK,EAAEvB,UAAU,CAACQ,KAAK;MACvBgB,MAAM,EAAExB,UAAU,CAACQ,KAAK;MACxBiB,GAAG,EAAET,CAAC;MACNU,IAAI,EAAEzC,KAAK,GAAG0C,SAAS,GAAGR,CAAC;MAC3BS,KAAK,EAAE3C,KAAK,GAAGkC,CAAC,GAAGQ,SAAS;MAC5BE,WAAW,EAAE1B,aAAa,CAACK;IAC7B,CAAC;EACH,CAAC,EAAE,CAACR,UAAU,EAAEG,aAAa,EAAEF,IAAI,EAAEC,IAAI,CAAC,CAAC;EAE3C,MAAM4B,GAAG,GAAG1D,OAAO,CAAC2D,GAAG,CAAC,CAAC,CAACC,OAAO,CAAC,CAAC;IAAEb,CAAC;IAAEH;EAAE,CAAC,KAAK;IAAA,IAAAiB,eAAA;IAC9C,IAAI,CAACjC,UAAU,CAACQ,KAAK,EAAE;IAEvB,MAAM0B,GAAG,GAAGC,IAAI,CAACC,KAAK,CAACpB,CAAC,GAAGhB,UAAU,CAACQ,KAAK,CAAC;IAC5C,MAAM6B,MAAM,GAAGF,IAAI,CAACC,KAAK,CAACjB,CAAC,GAAGnB,UAAU,CAACQ,KAAK,CAAC;IAE/C,MAAMD,KAAyB,IAAA0B,eAAA,GAAGhB,UAAU,CAACiB,GAAG,CAAC,cAAAD,eAAA,uBAAfA,eAAA,CAAkBI,MAAM,CAAC;IAC3D,IAAI,CAAC9B,KAAK,EAAE;IAEZH,KAAK,CAACI,KAAK,GAAG,CAAC;IAEf,MAAM;MAAEK,CAAC;MAAEC,CAAC;MAAEC;IAAE,CAAC,GAAGlC,QAAQ,CAAC6B,OAAO,CAAC,CAAC,CAAC4B,GAAG,CAAC/B,KAAK,CAAC,CAACgC,MAAM,CAAC,KAAK,CAAC;IAC/D7C,QAAQ,CAACc,KAAK,GAAGK,CAAC;IAClBlB,eAAe,CAACa,KAAK,GAAGM,CAAC;IACzBlB,eAAe,CAACY,KAAK,GAAGO,CAAC;IAEzBd,IAAI,CAACO,KAAK,GAAG5B,UAAU,CAACyD,MAAM,EAAEnD,gBAAgB,CAAC;IACjDgB,IAAI,CAACM,KAAK,GAAG5B,UAAU,CAACsD,GAAG,EAAEhD,gBAAgB,CAAC;IAE9CmB,gBAAgB,CAACE,KAAK,CAAC;IACvBV,eAAe,CAAC,CAAC;IACjBC,YAAY,CAAC,CAAC;IAEdM,KAAK,CAACI,KAAK,GAAG7B,SAAS,CAAC,GAAG,EAAEC,UAAU,CAAC,CAAC,EAAE;MAAEO,QAAQ,EAAE;IAAE,CAAC,CAAC,CAAC;EAC9D,CAAC,CAAC;EAEF,MAAMqD,QAAQ,GAAGpE,OAAO,CAACqE,YAAY,CAACX,GAAG,EAAE,GAAGvC,QAAQ,CAAC;EAEvD,MAAMmD,QAAQ,GAAGxE,WAAW,CAAC,CAAC;IAAEyE,WAAW,EAAE;MAAEC;IAAO;EAAqB,CAAC,KAAK;IAC/E5C,UAAU,CAACQ,KAAK,GAAG5B,UAAU,CAACgE,MAAM,CAACrB,KAAK,GAAG,EAAE,IAAIqB,MAAM,CAACpB,MAAM,GAAG,EAAE,EAAE;MAAErC,QAAQ,EAAE;IAAI,CAAC,CAAC;EAC3F,CAAC,EAAE,EAAE,CAAC;EAEN,oBACElB,KAAA,CAAA4E,aAAA,CAACxE,eAAe;IAACyE,OAAO,EAAEN;EAAS,gBACjCvE,KAAA,CAAA4E,aAAA,CAAC1E,eAAe;IACd4E,MAAM,EAAEC,OAAO,wBAAwB,CAAE;IACzCN,QAAQ,EAAEA,QAAS;IACnBlD,KAAK,EAAE,CAACA,KAAK,EAAE;MAAEyD,QAAQ,EAAE,UAAU;MAAEC,WAAW,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,WAAW,EAAE;IAAI,CAAC,CAAE;IACvFC,UAAU,EAAE;MAAEtD;IAAa,CAAE;IAC7BuD,UAAU,EAAC;EAAS,gBAEpBrF,KAAA,CAAA4E,aAAA,CAACvE,QAAQ,CAACiF,IAAI;IAAC/D,KAAK,EAAE,CAACT,MAAM,CAACyE,QAAQ,EAAE/D,cAAc,EAAE6B,aAAa;EAAE,CAAE,CAC1D,CACF,CAAC;AAEtB;AAEA,MAAML,UAAU,GAAG,CACjB,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,EACD,CACE,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,CACV,CACF"}
package/lib/module/utils.js CHANGED
@@ -3,16 +3,6 @@ import { I18nManager, Platform, StyleSheet } from 'react-native';
3
3
  export const isRtl = I18nManager.isRTL;
4
4
  export const isWeb = Platform.OS === 'web';
5
5
 
6
- /** - To find the index of an element in a two-dimensional array. */
7
- export function findIndexIn2DArray(array, evaluate) {
8
- for (let i = 0; i < array.length; i++) {
9
- for (let j = 0; j < array[i].length; j++) {
10
- if (evaluate(array[i][j])) return [i, j];
11
- }
12
- }
13
- return [null, null];
14
- }
15
-
16
6
  /** - Get a specific property from a react native style object */
17
7
  export function getStyle(style, property) {
18
8
  const flattened = StyleSheet.flatten(style);
package/lib/module/utils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","names":["React","I18nManager","Platform","StyleSheet","isRtl","isRTL","isWeb","OS","findIndexIn2DArray","array","evaluate","i","length","j","getStyle","style","property","flattened","flatten","clamp","v","max","Math","min","HSVA2HSLA_string","h","s","a","l","sl","sln","ConditionalRendering","props","if","createElement","Fragment","children","RenderNativeOnly","RenderWebOnly","enableAndroidHardwareTextures","Version"],"sources":["../src/utils.tsx"],"sourcesContent":["import React from 'react';\nimport { I18nManager, Platform, StyleSheet } from 'react-native';\n\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nexport const isRtl = I18nManager.isRTL;\nexport const isWeb = Platform.OS === 'web';\n\n/** - To find the index of an element in a two-dimensional array. */\nexport function findIndexIn2DArray<T>(array: T[][], evaluate: (target: T) => boolean): [number, number] | [null, null] {\n for (let i = 0; i < array.length; i++) {\n for (let j = 0; j < array[i].length; j++) {\n if (evaluate(array[i][j])) return [i, j];\n }\n }\n return [null, null];\n}\n\n/** - Get a specific property from a react native style object */\nexport function getStyle<T extends keyof ViewStyle>(style: StyleProp<ViewStyle>, property: T): ViewStyle[T] | undefined {\n const flattened = StyleSheet.flatten(style);\n return flattened[property];\n}\n\n/** - Clamp a number value between `0` and a max value */\nexport function clamp(v: number, max: number) {\n 'worklet';\n return Math.min(Math.max(v, 0), max);\n}\n\n/** - Convert `HSV` color to an `HSLA` string representation */\nexport function HSVA2HSLA_string(h: number, s: number, v: number, a = 1) {\n 'worklet';\n\n s = s / 100;\n v = v / 100;\n\n const l = ((2 - s) * v) / 2,\n sl = s * v,\n sln = l !== 0 && l !== 1 ? sl / (l < 0.5 ? l * 2 : 2 - l * 2) : sl;\n\n return `hsla(${h}, ${sln * 100}%, ${l * 100}%, ${a})`;\n}\n\n/** - Render children only if the `render` property is `true` */\nexport function ConditionalRendering(props: { children: React.ReactNode; if: boolean }) {\n if (!props.if) return null;\n return <>{props.children}</>;\n}\n\n/** - Render children for native platforms only (Android, IOS) */\nexport function RenderNativeOnly({ children }: { children: React.ReactNode }) {\n if (isWeb) return null;\n return <>{children}</>;\n}\n\n/** - Render children for Web platform only */\nexport function RenderWebOnly({ children }: { children: React.ReactNode }) {\n if (!isWeb) return null;\n return <>{children}</>;\n}\n\n/**\n * Enable Android hardware texture rendering for Android Nougat(API 24) to Pie(API 28) to address an issue when applying a\n * transform on a View with a border radius > 0.\n *\n * See: https://github.com/facebook/react-native/issues/18266\n */\nexport const enableAndroidHardwareTextures = Platform.OS === 'android' && Platform.Version >= 24 && Platform.Version <= 28;\n"],"mappings":"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"}
1
+ {"version":3,"file":"utils.js","names":["React","I18nManager","Platform","StyleSheet","isRtl","isRTL","isWeb","OS","getStyle","style","property","flattened","flatten","clamp","v","max","Math","min","HSVA2HSLA_string","h","s","a","l","sl","sln","ConditionalRendering","props","if","createElement","Fragment","children","RenderNativeOnly","RenderWebOnly","enableAndroidHardwareTextures","Version"],"sources":["../src/utils.tsx"],"sourcesContent":["import React from 'react';\nimport { I18nManager, Platform, StyleSheet } from 'react-native';\n\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nexport const isRtl = I18nManager.isRTL;\nexport const isWeb = Platform.OS === 'web';\n\n/** - Get a specific property from a react native style object */\nexport function getStyle<T extends keyof ViewStyle>(style: StyleProp<ViewStyle>, property: T): ViewStyle[T] | undefined {\n const flattened = StyleSheet.flatten(style);\n return flattened[property];\n}\n\n/** - Clamp a number value between `0` and a max value */\nexport function clamp(v: number, max: number) {\n 'worklet';\n return Math.min(Math.max(v, 0), max);\n}\n\n/** - Convert `HSV` color to an `HSLA` string representation */\nexport function HSVA2HSLA_string(h: number, s: number, v: number, a = 1) {\n 'worklet';\n\n s = s / 100;\n v = v / 100;\n\n const l = ((2 - s) * v) / 2,\n sl = s * v,\n sln = l !== 0 && l !== 1 ? sl / (l < 0.5 ? l * 2 : 2 - l * 2) : sl;\n\n return `hsla(${h}, ${sln * 100}%, ${l * 100}%, ${a})`;\n}\n\n/** - Render children only if the `render` property is `true` */\nexport function ConditionalRendering(props: { children: React.ReactNode; if: boolean }) {\n if (!props.if) return null;\n return <>{props.children}</>;\n}\n\n/** - Render children for native platforms only (Android, IOS) */\nexport function RenderNativeOnly({ children }: { children: React.ReactNode }) {\n if (isWeb) return null;\n return <>{children}</>;\n}\n\n/** - Render children for Web platform only */\nexport function RenderWebOnly({ children }: { children: React.ReactNode }) {\n if (!isWeb) return null;\n return <>{children}</>;\n}\n\n/**\n * Enable Android hardware texture rendering for Android Nougat(API 24) to Pie(API 28) to address an issue when applying a\n * transform on a View with a border radius > 0.\n *\n * See: https://github.com/facebook/react-native/issues/18266\n */\nexport const enableAndroidHardwareTextures = Platform.OS === 'android' && Platform.Version >= 24 && Platform.Version <= 28;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,EAAEC,QAAQ,EAAEC,UAAU,QAAQ,cAAc;AAIhE,OAAO,MAAMC,KAAK,GAAGH,WAAW,CAACI,KAAK;AACtC,OAAO,MAAMC,KAAK,GAAGJ,QAAQ,CAACK,EAAE,KAAK,KAAK;;AAE1C;AACA,OAAO,SAASC,QAAQA,CAA4BC,KAA2B,EAAEC,QAAW,EAA4B;EACtH,MAAMC,SAAS,GAAGR,UAAU,CAACS,OAAO,CAACH,KAAK,CAAC;EAC3C,OAAOE,SAAS,CAACD,QAAQ,CAAC;AAC5B;;AAEA;AACA,OAAO,SAASG,KAAKA,CAACC,CAAS,EAAEC,GAAW,EAAE;EAC5C,SAAS;;EACT,OAAOC,IAAI,CAACC,GAAG,CAACD,IAAI,CAACD,GAAG,CAACD,CAAC,EAAE,CAAC,CAAC,EAAEC,GAAG,CAAC;AACtC;;AAEA;AACA,OAAO,SAASG,gBAAgBA,CAACC,CAAS,EAAEC,CAAS,EAAEN,CAAS,EAAEO,CAAC,GAAG,CAAC,EAAE;EACvE,SAAS;;EAETD,CAAC,GAAGA,CAAC,GAAG,GAAG;EACXN,CAAC,GAAGA,CAAC,GAAG,GAAG;EAEX,MAAMQ,CAAC,GAAI,CAAC,CAAC,GAAGF,CAAC,IAAIN,CAAC,GAAI,CAAC;IACzBS,EAAE,GAAGH,CAAC,GAAGN,CAAC;IACVU,GAAG,GAAGF,CAAC,KAAK,CAAC,IAAIA,CAAC,KAAK,CAAC,GAAGC,EAAE,IAAID,CAAC,GAAG,GAAG,GAAGA,CAAC,GAAG,CAAC,GAAG,CAAC,GAAGA,CAAC,GAAG,CAAC,CAAC,GAAGC,EAAE;EAEpE,OAAQ,QAAOJ,CAAE,KAAIK,GAAG,GAAG,GAAI,MAAKF,CAAC,GAAG,GAAI,MAAKD,CAAE,GAAE;AACvD;;AAEA;AACA,OAAO,SAASI,oBAAoBA,CAACC,KAAiD,EAAE;EACtF,IAAI,CAACA,KAAK,CAACC,EAAE,EAAE,OAAO,IAAI;EAC1B,oBAAO3B,KAAA,CAAA4B,aAAA,CAAA5B,KAAA,CAAA6B,QAAA,QAAGH,KAAK,CAACI,QAAW,CAAC;AAC9B;;AAEA;AACA,OAAO,SAASC,gBAAgBA,CAAC;EAAED;AAAwC,CAAC,EAAE;EAC5E,IAAIxB,KAAK,EAAE,OAAO,IAAI;EACtB,oBAAON,KAAA,CAAA4B,aAAA,CAAA5B,KAAA,CAAA6B,QAAA,QAAGC,QAAW,CAAC;AACxB;;AAEA;AACA,OAAO,SAASE,aAAaA,CAAC;EAAEF;AAAwC,CAAC,EAAE;EACzE,IAAI,CAACxB,KAAK,EAAE,OAAO,IAAI;EACvB,oBAAON,KAAA,CAAA4B,aAAA,CAAA5B,KAAA,CAAA6B,QAAA,QAAGC,QAAW,CAAC;AACxB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMG,6BAA6B,GAAG/B,QAAQ,CAACK,EAAE,KAAK,SAAS,IAAIL,QAAQ,CAACgC,OAAO,IAAI,EAAE,IAAIhC,QAAQ,CAACgC,OAAO,IAAI,EAAE"}
package/lib/src/components/Panels/Panel5.tsx CHANGED
@@ -1,37 +1,36 @@
1
- import React, { useCallback, useEffect } from 'react';
1
+ import React, { useCallback } from 'react';
2
2
  import { ImageBackground } from 'react-native';
3
3
  import { Gesture, GestureDetector } from 'react-native-gesture-handler';
4
- import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
4
+ import Animated, {
5
+ Easing,
6
+ useAnimatedStyle,
7
+ useDerivedValue,
8
+ useSharedValue,
9
+ withDelay,
10
+ withTiming,
11
+ } from 'react-native-reanimated';
5
12
 
6
13
  import colorKit from '../../colorKit/index';
7
14
  import usePickerContext from '../../AppContext';
8
15
  import { styles } from '../../styles';
9
- import { findIndexIn2DArray, getStyle, isRtl } from '../../utils';
16
+ import { getStyle, isRtl } from '../../utils';
10
17
 
11
18
  import type { Panel5Props } from '../../types';
12
19
  import type { LayoutChangeEvent } from 'react-native';
13
20
 
21
+ const animationOptions = { duration: 300, easing: Easing.elastic(0.8) };
22
+
14
23
  /** - This is a grid of 120 colors, arranged in 12 columns and 10 rows of squares. */
15
24
  export function Panel5({ gestures = [], style = {}, selectionStyle = {} }: Panel5Props) {
16
- const { value, hueValue, saturationValue, brightnessValue, onGestureChange, onGestureEnd } = usePickerContext();
25
+ const { hueValue, saturationValue, brightnessValue, onGestureChange, onGestureEnd } = usePickerContext();
17
26
 
18
27
  const borderRadius = getStyle(style, 'borderRadius') ?? 0;
19
28
 
20
29
  const squareSize = useSharedValue(0),
21
30
  posX = useSharedValue(0),
22
31
  posY = useSharedValue(0),
23
- adaptiveColor = useSharedValue('#000');
24
-
25
- const selectedStyle = useAnimatedStyle(() => {
26
- return {
27
- width: squareSize.value,
28
- height: squareSize.value,
29
- top: posY.value * squareSize.value,
30
- left: isRtl ? undefined : posX.value * squareSize.value,
31
- right: isRtl ? posX.value * squareSize.value : undefined,
32
- borderColor: adaptiveColor.value,
33
- };
34
- }, [squareSize, posX, posY, adaptiveColor]);
32
+ adaptiveColor = useSharedValue('#000'),
33
+ isTap = useSharedValue<0 | 1>(0);
35
34
 
36
35
  const setAdaptiveColor = (color1: string) => {
37
36
  'worklet';
@@ -40,46 +39,67 @@ export function Panel5({ gestures = [], style = {}, selectionStyle = {} }: Panel
40
39
  adaptiveColor.value = contrast < 4.5 ? color : adaptiveColor.value;
41
40
  };
42
41
 
42
+ // To apply color changes that are not triggered by the tap gesture
43
+ useDerivedValue(() => {
44
+ if (isTap.value === 1) return;
45
+
46
+ const hsvColor = { h: hueValue.value, s: saturationValue.value, v: brightnessValue.value };
47
+
48
+ for (let y = 0; y < gridColors.length; y++) {
49
+ for (let x = 0; x < gridColors[y].length; x++) {
50
+ const gridColor = gridColors[y][x];
51
+ const areColorsEqual = colorKit.runOnUI().areColorsEqual(gridColor, hsvColor, 6);
52
+ if (!areColorsEqual) continue;
53
+ setAdaptiveColor(gridColor);
54
+ posX.value = withTiming(x, animationOptions);
55
+ posY.value = withTiming(y, animationOptions);
56
+ break;
57
+ }
58
+ }
59
+ }, [hueValue, saturationValue, brightnessValue, isTap, posX, posY]);
60
+
61
+ const selectedStyle = useAnimatedStyle(() => {
62
+ const x = posX.value * squareSize.value;
63
+ const y = posY.value * squareSize.value;
64
+
65
+ return {
66
+ width: squareSize.value,
67
+ height: squareSize.value,
68
+ top: y,
69
+ left: isRtl ? undefined : x,
70
+ right: isRtl ? x : undefined,
71
+ borderColor: adaptiveColor.value,
72
+ };
73
+ }, [squareSize, adaptiveColor, posX, posY]);
74
+
43
75
  const tap = Gesture.Tap().onBegin(({ x, y }) => {
44
76
  if (!squareSize.value) return;
45
77
 
46
78
  const row = Math.floor(y / squareSize.value);
47
79
  const column = Math.floor(x / squareSize.value);
48
80
 
49
- const color = gridColors?.[row]?.[column];
81
+ const color: string | undefined = gridColors[row]?.[column];
50
82
  if (!color) return;
51
83
 
84
+ isTap.value = 1;
85
+
52
86
  const { h, s, v } = colorKit.runOnUI().HSV(color).object(false);
53
87
  hueValue.value = h;
54
88
  saturationValue.value = s;
55
89
  brightnessValue.value = v;
56
90
 
57
- posX.value = withTiming(column, { duration: 300, easing: Easing.elastic(0.8) });
58
- posY.value = withTiming(row, { duration: 300, easing: Easing.elastic(0.8) });
91
+ posX.value = withTiming(column, animationOptions);
92
+ posY.value = withTiming(row, animationOptions);
59
93
 
60
94
  setAdaptiveColor(color);
61
95
  onGestureChange();
62
96
  onGestureEnd();
97
+
98
+ isTap.value = withDelay(300, withTiming(0, { duration: 0 }));
63
99
  });
64
100
 
65
101
  const composed = Gesture.Simultaneous(tap, ...gestures);
66
102
 
67
- useEffect(() => {
68
- const [row, column] = findIndexIn2DArray(gridColors, c => colorKit.areColorsEqual(c, value, 6));
69
-
70
- if (column === null || row === null) {
71
- console.warn(
72
- `[ColorPicker]: The color '${value}' specified in the 'value' prop cannot be displayed in 'Panel5' as it falls outside the limited range of available colors.`,
73
- );
74
- return;
75
- }
76
-
77
- posX.value = column;
78
- posY.value = row;
79
-
80
- setAdaptiveColor(value);
81
- }, [value]);
82
-
83
103
  const onLayout = useCallback(({ nativeEvent: { layout } }: LayoutChangeEvent) => {
84
104
  squareSize.value = withTiming(layout.width / 12 || layout.height / 10, { duration: 100 });
85
105
  }, []);
package/lib/src/utils.tsx CHANGED
@@ -6,16 +6,6 @@ import type { StyleProp, ViewStyle } from 'react-native';
6
6
  export const isRtl = I18nManager.isRTL;
7
7
  export const isWeb = Platform.OS === 'web';
8
8
 
9
- /** - To find the index of an element in a two-dimensional array. */
10
- export function findIndexIn2DArray<T>(array: T[][], evaluate: (target: T) => boolean): [number, number] | [null, null] {
11
- for (let i = 0; i < array.length; i++) {
12
- for (let j = 0; j < array[i].length; j++) {
13
- if (evaluate(array[i][j])) return [i, j];
14
- }
15
- }
16
- return [null, null];
17
- }
18
-
19
9
  /** - Get a specific property from a react native style object */
20
10
  export function getStyle<T extends keyof ViewStyle>(style: StyleProp<ViewStyle>, property: T): ViewStyle[T] | undefined {
21
11
  const flattened = StyleSheet.flatten(style);
package/lib/typescript/components/Panels/Panel5.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Panel5.d.ts","sourceRoot":"../src/","sources":["components/Panels/Panel5.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAUtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAG1C,qFAAqF;AACrF,wBAAgB,MAAM,CAAC,EAAE,QAAa,EAAE,KAAU,EAAE,cAAmB,EAAE,EAAE,WAAW,qBAqFrF"}
1
+ {"version":3,"file":"Panel5.d.ts","sourceRoot":"../src/","sources":["components/Panels/Panel5.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAiB3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAK1C,qFAAqF;AACrF,wBAAgB,MAAM,CAAC,EAAE,QAAa,EAAE,KAAU,EAAE,cAAmB,EAAE,EAAE,WAAW,qBAgGrF"}
package/lib/typescript/utils.d.ts CHANGED
@@ -2,8 +2,6 @@ import React from 'react';
2
2
  import type { StyleProp, ViewStyle } from 'react-native';
3
3
  export declare const isRtl: boolean;
4
4
  export declare const isWeb: boolean;
5
- /** - To find the index of an element in a two-dimensional array. */
6
- export declare function findIndexIn2DArray<T>(array: T[][], evaluate: (target: T) => boolean): [number, number] | [null, null];
7
5
  /** - Get a specific property from a react native style object */
8
6
  export declare function getStyle<T extends keyof ViewStyle>(style: StyleProp<ViewStyle>, property: T): ViewStyle[T] | undefined;
9
7
  /** - Clamp a number value between `0` and a max value */
package/lib/typescript/utils.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"../src/","sources":["utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,eAAO,MAAM,KAAK,SAAoB,CAAC;AACvC,eAAO,MAAM,KAAK,SAAwB,CAAC;AAE3C,oEAAoE;AACpE,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAOrH;AAED,iEAAiE;AACjE,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAGtH;AAED,yDAAyD;AACzD,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,UAG3C;AAED,+DAA+D;AAC/D,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,SAAI,UAWtE;AAED,gEAAgE;AAChE,wBAAgB,oBAAoB,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,EAAE,EAAE,OAAO,CAAA;CAAE,4BAGrF;AAED,iEAAiE;AACjE,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4BAG3E;AAED,8CAA8C;AAC9C,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4BAGxE;AAED;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B,SAAgF,CAAC"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"../src/","sources":["utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,eAAO,MAAM,KAAK,SAAoB,CAAC;AACvC,eAAO,MAAM,KAAK,SAAwB,CAAC;AAE3C,iEAAiE;AACjE,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAGtH;AAED,yDAAyD;AACzD,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,UAG3C;AAED,+DAA+D;AAC/D,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,SAAI,UAWtE;AAED,gEAAgE;AAChE,wBAAgB,oBAAoB,CAAC,KAAK,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,EAAE,EAAE,OAAO,CAAA;CAAE,4BAGrF;AAED,iEAAiE;AACjE,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4BAG3E;AAED,8CAA8C;AAC9C,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4BAGxE;AAED;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B,SAAgF,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "reanimated-color-picker",
3
- "version": "3.0.2",
3
+ "version": "3.0.3",
4
4
  "description": "A Pure JavaScript Color Picker for React Native",
5
5
  "main": "lib/commonjs/index",
6
6
  "module": "lib/module/index",