@darthrapid/react-native-color-picker 0.1.0 → 1.1.0
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/README.md +151 -33
- package/lib/module/components/alpha-strip.js +213 -0
- package/lib/module/components/alpha-strip.js.map +1 -0
- package/lib/module/components/color-picker.js +148 -40
- package/lib/module/components/color-picker.js.map +1 -1
- package/lib/module/components/palettes-tab.js +366 -0
- package/lib/module/components/palettes-tab.js.map +1 -0
- package/lib/module/components/picker-panel.js +115 -43
- package/lib/module/components/picker-panel.js.map +1 -1
- package/lib/module/components/picker-tab.js +12 -1
- package/lib/module/components/picker-tab.js.map +1 -1
- package/lib/module/components/tab-bar.js +51 -22
- package/lib/module/components/tab-bar.js.map +1 -1
- package/lib/module/components/values-tab.js +72 -7
- package/lib/module/components/values-tab.js.map +1 -1
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/shared/const.js +4 -5
- package/lib/module/shared/const.js.map +1 -1
- package/lib/module/shared/palletes.js +297 -0
- package/lib/module/shared/palletes.js.map +1 -0
- package/lib/module/utils/colors.js +33 -4
- package/lib/module/utils/colors.js.map +1 -1
- package/lib/typescript/src/components/alpha-strip.d.ts +11 -0
- package/lib/typescript/src/components/alpha-strip.d.ts.map +1 -0
- package/lib/typescript/src/components/color-picker.d.ts +16 -7
- package/lib/typescript/src/components/color-picker.d.ts.map +1 -1
- package/lib/typescript/src/components/palettes-tab.d.ts +19 -0
- package/lib/typescript/src/components/palettes-tab.d.ts.map +1 -0
- package/lib/typescript/src/components/picker-panel.d.ts +9 -5
- package/lib/typescript/src/components/picker-panel.d.ts.map +1 -1
- package/lib/typescript/src/components/picker-tab.d.ts +4 -1
- package/lib/typescript/src/components/picker-tab.d.ts.map +1 -1
- package/lib/typescript/src/components/tab-bar.d.ts.map +1 -1
- package/lib/typescript/src/components/values-tab.d.ts +2 -1
- package/lib/typescript/src/components/values-tab.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +3 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/shared/const.d.ts.map +1 -1
- package/lib/typescript/src/shared/palletes.d.ts +580 -0
- package/lib/typescript/src/shared/palletes.d.ts.map +1 -0
- package/lib/typescript/src/types/misc.d.ts +5 -6
- package/lib/typescript/src/types/misc.d.ts.map +1 -1
- package/lib/typescript/src/utils/colors.d.ts +4 -1
- package/lib/typescript/src/utils/colors.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/alpha-strip.tsx +212 -0
- package/src/components/color-picker.tsx +192 -56
- package/src/components/palettes-tab.tsx +358 -0
- package/src/components/picker-panel.tsx +104 -47
- package/src/components/picker-tab.tsx +17 -0
- package/src/components/tab-bar.tsx +60 -27
- package/src/components/values-tab.tsx +41 -6
- package/src/index.tsx +3 -1
- package/src/shared/const.ts +4 -5
- package/src/shared/palletes.ts +294 -0
- package/src/types/misc.ts +5 -6
- package/src/utils/colors.ts +34 -4
- package/lib/module/components/recent-tab.js +0 -89
- package/lib/module/components/recent-tab.js.map +0 -1
- package/lib/typescript/src/components/recent-tab.d.ts +0 -12
- package/lib/typescript/src/components/recent-tab.d.ts.map +0 -1
- package/src/components/recent-tab.tsx +0 -90
package/README.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
# @darthrapid/react-native-
|
|
1
|
+
# @darthrapid/react-native-color-picker
|
|
2
2
|
|
|
3
|
-
Lightweight HSB color picker for React Native with modal/inline modes,
|
|
3
|
+
Lightweight HSB color picker for React Native with alpha channel support, color palettes, modal/inline modes, and i18n. Pure JS, Expo compatible.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
bun add @darthrapid/react-native-
|
|
8
|
+
bun add @darthrapid/react-native-color-picker
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
### Peer dependency
|
|
@@ -20,7 +20,7 @@ By default, renders as a small color swatch. Tap it to open the picker modal.
|
|
|
20
20
|
|
|
21
21
|
```tsx
|
|
22
22
|
import { useState } from "react";
|
|
23
|
-
import { ColorPicker } from "@darthrapid/react-native-
|
|
23
|
+
import { ColorPicker } from "@darthrapid/react-native-color-picker";
|
|
24
24
|
|
|
25
25
|
export default function App() {
|
|
26
26
|
const [color, setColor] = useState("#007AFF");
|
|
@@ -43,7 +43,7 @@ The picker has 3 tabs — only selected ones are shown:
|
|
|
43
43
|
|
|
44
44
|
```tsx
|
|
45
45
|
// All (default)
|
|
46
|
-
<ColorPicker tabs={["picker", "values", "
|
|
46
|
+
<ColorPicker tabs={["picker", "values", "palettes"]} />
|
|
47
47
|
|
|
48
48
|
// Picker and values only
|
|
49
49
|
<ColorPicker tabs={["picker", "values"]} />
|
|
@@ -54,9 +54,99 @@ The picker has 3 tabs — only selected ones are shown:
|
|
|
54
54
|
|
|
55
55
|
| Tab | Content |
|
|
56
56
|
|---|---|
|
|
57
|
-
| `picker` | Saturation/brightness pad + hue slider |
|
|
58
|
-
| `values` | Hex input, RGB and HSB values |
|
|
59
|
-
| `
|
|
57
|
+
| `picker` | Saturation/brightness pad + hue slider (+ alpha slider when enabled) |
|
|
58
|
+
| `values` | Hex input, RGB and HSB values, save button |
|
|
59
|
+
| `palettes` | Color palettes + saved colors grid |
|
|
60
|
+
|
|
61
|
+
## Alpha Channel
|
|
62
|
+
|
|
63
|
+
Enable alpha channel support with `showAlpha`. The picker will show an alpha slider and return 8-digit hex colors (#RRGGBBAA).
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
const [color, setColor] = useState("#007AFFCC");
|
|
67
|
+
|
|
68
|
+
<ColorPicker
|
|
69
|
+
value={color}
|
|
70
|
+
onChange={setColor}
|
|
71
|
+
showAlpha
|
|
72
|
+
/>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Color Palettes
|
|
76
|
+
|
|
77
|
+
The palettes tab supports custom color palettes. Each palette can contain simple colors or color groups with shades.
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
import { ColorPicker, tailwindPalette } from "@darthrapid/react-native-color-picker";
|
|
81
|
+
|
|
82
|
+
// Use built-in Tailwind palette
|
|
83
|
+
<ColorPicker
|
|
84
|
+
value={color}
|
|
85
|
+
onChange={setColor}
|
|
86
|
+
palettes={[tailwindPalette]}
|
|
87
|
+
/>
|
|
88
|
+
|
|
89
|
+
// Custom palette with simple colors
|
|
90
|
+
<ColorPicker
|
|
91
|
+
value={color}
|
|
92
|
+
onChange={setColor}
|
|
93
|
+
palettes={[
|
|
94
|
+
{
|
|
95
|
+
name: "Brand",
|
|
96
|
+
colors: {
|
|
97
|
+
primary: "#007AFF",
|
|
98
|
+
secondary: "#5856D6",
|
|
99
|
+
accent: "#FF2D55",
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
]}
|
|
103
|
+
/>
|
|
104
|
+
|
|
105
|
+
// Custom palette with color shades
|
|
106
|
+
<ColorPicker
|
|
107
|
+
value={color}
|
|
108
|
+
onChange={setColor}
|
|
109
|
+
palettes={[
|
|
110
|
+
{
|
|
111
|
+
name: "Brand",
|
|
112
|
+
colors: {
|
|
113
|
+
blue: {
|
|
114
|
+
100: "#DBEAFE",
|
|
115
|
+
500: "#3B82F6",
|
|
116
|
+
900: "#1E3A8A",
|
|
117
|
+
},
|
|
118
|
+
gray: {
|
|
119
|
+
100: "#F3F4F6",
|
|
120
|
+
500: "#6B7280",
|
|
121
|
+
900: "#111827",
|
|
122
|
+
},
|
|
123
|
+
},
|
|
124
|
+
},
|
|
125
|
+
]}
|
|
126
|
+
/>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
## Saved Colors
|
|
130
|
+
|
|
131
|
+
The palettes tab includes a "Saved" section where users can save colors. Use controlled mode for persistence:
|
|
132
|
+
|
|
133
|
+
```tsx
|
|
134
|
+
const [savedColors, setSavedColors] = useState<string[]>([]);
|
|
135
|
+
|
|
136
|
+
<ColorPicker
|
|
137
|
+
value={color}
|
|
138
|
+
onChange={setColor}
|
|
139
|
+
savedColors={savedColors}
|
|
140
|
+
onSaveColor={(hex) => setSavedColors((prev) => [hex, ...prev])}
|
|
141
|
+
onClearSaved={() => setSavedColors([])}
|
|
142
|
+
/>
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
Or let the component manage saved colors internally (non-persistent):
|
|
146
|
+
|
|
147
|
+
```tsx
|
|
148
|
+
<ColorPicker value={color} onChange={setColor} />
|
|
149
|
+
```
|
|
60
150
|
|
|
61
151
|
## i18n / Custom Labels
|
|
62
152
|
|
|
@@ -65,12 +155,11 @@ The picker has 3 tabs — only selected ones are shown:
|
|
|
65
155
|
labels={{
|
|
66
156
|
picker: "Výber",
|
|
67
157
|
values: "Hodnoty",
|
|
68
|
-
|
|
158
|
+
palettes: "Palety",
|
|
69
159
|
save: "Uložiť",
|
|
70
|
-
|
|
71
|
-
|
|
160
|
+
saved: "Uložené",
|
|
161
|
+
clearSaved: "Vymazať",
|
|
72
162
|
noSavedColors: "Žiadne uložené farby",
|
|
73
|
-
noSavedColorsHint: "Klikni \"Uložiť\" pre pridanie farieb",
|
|
74
163
|
}}
|
|
75
164
|
/>
|
|
76
165
|
```
|
|
@@ -88,12 +177,11 @@ Only pass the labels you want to override — the rest stays English by default.
|
|
|
88
177
|
|
|
89
178
|
| Prop | Type | Default | Description |
|
|
90
179
|
|---|---|---|---|
|
|
91
|
-
| `value` | `string` | `"#007AFF"` | Current color (hex) |
|
|
180
|
+
| `value` | `string` | `"#007AFF"` | Current color (6 or 8 digit hex) |
|
|
92
181
|
| `onChange` | `(hex: string) => void` | – | Called when color changes |
|
|
93
|
-
| `tabs` | `TabId[]` | `["picker", "values", "
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
-
| `hueStripHeight` | `number` | `28` | Hue slider height |
|
|
182
|
+
| `tabs` | `TabId[]` | `["picker", "values", "palettes"]` | Which tabs to show |
|
|
183
|
+
| `panelWidth` | `DimensionValue` | `"100%"` | Panel width in modal mode. Ignored when `inline` |
|
|
184
|
+
| `hueStripHeight` | `number` | `28` | Hue/alpha slider height |
|
|
97
185
|
| `theme` | `"light" \| "dark"` | `"dark"` | Color theme |
|
|
98
186
|
| `disabled` | `boolean` | `false` | Disables touch input |
|
|
99
187
|
| `style` | `ViewStyle` | – | Style for the picker panel |
|
|
@@ -102,13 +190,18 @@ Only pass the labels you want to override — the rest stays English by default.
|
|
|
102
190
|
| `swatchStyle` | `ViewStyle` | – | Style for the swatch trigger |
|
|
103
191
|
| `inline` | `boolean` | `false` | Renders picker inline without modal |
|
|
104
192
|
| `labels` | `ColorPickerLabels` | – | Custom labels (i18n) |
|
|
105
|
-
| `
|
|
193
|
+
| `contentStyle` | `ViewStyle` | – | Style for the modal content wrapper |
|
|
194
|
+
| `showAlpha` | `boolean` | `false` | Show alpha channel slider |
|
|
195
|
+
| `palettes` | `ColorPalette[]` | – | Color palettes for the palettes tab |
|
|
196
|
+
| `savedColors` | `string[]` | – | Saved colors (controlled mode) |
|
|
197
|
+
| `onSaveColor` | `(hex: string) => void` | – | Called when user saves a color |
|
|
198
|
+
| `onClearSaved` | `() => void` | – | Called when user clears saved colors |
|
|
106
199
|
|
|
107
200
|
## Ref API
|
|
108
201
|
|
|
109
202
|
```tsx
|
|
110
203
|
import { useRef } from "react";
|
|
111
|
-
import { ColorPicker, type ColorPickerRef } from "@darthrapid/react-native-
|
|
204
|
+
import { ColorPicker, type ColorPickerRef } from "@darthrapid/react-native-color-picker";
|
|
112
205
|
|
|
113
206
|
const ref = useRef<ColorPickerRef>(null);
|
|
114
207
|
|
|
@@ -119,12 +212,49 @@ const ref = useRef<ColorPickerRef>(null);
|
|
|
119
212
|
|---|---|
|
|
120
213
|
| `getColor()` | Returns current color as hex string |
|
|
121
214
|
| `setColor(hex)` | Sets color programmatically |
|
|
122
|
-
| `
|
|
215
|
+
| `clearSaved()` | Clears saved colors |
|
|
123
216
|
| `open()` | Opens the modal (no-op when `inline`) |
|
|
124
217
|
| `close()` | Closes the modal (no-op when `inline`) |
|
|
125
218
|
|
|
219
|
+
## Exports
|
|
220
|
+
|
|
221
|
+
```tsx
|
|
222
|
+
import {
|
|
223
|
+
ColorPicker,
|
|
224
|
+
type ColorPickerProps,
|
|
225
|
+
type ColorPickerRef,
|
|
226
|
+
type ColorPickerLabels,
|
|
227
|
+
type ColorPalette,
|
|
228
|
+
tailwindPalette,
|
|
229
|
+
} from "@darthrapid/react-native-color-picker";
|
|
230
|
+
```
|
|
231
|
+
|
|
126
232
|
## Examples
|
|
127
233
|
|
|
234
|
+
### Full-featured picker with alpha and Tailwind palette
|
|
235
|
+
|
|
236
|
+
```tsx
|
|
237
|
+
import { useState } from "react";
|
|
238
|
+
import { ColorPicker, tailwindPalette } from "@darthrapid/react-native-color-picker";
|
|
239
|
+
|
|
240
|
+
export default function App() {
|
|
241
|
+
const [color, setColor] = useState("#3B82F6");
|
|
242
|
+
const [savedColors, setSavedColors] = useState<string[]>([]);
|
|
243
|
+
|
|
244
|
+
return (
|
|
245
|
+
<ColorPicker
|
|
246
|
+
value={color}
|
|
247
|
+
onChange={setColor}
|
|
248
|
+
showAlpha
|
|
249
|
+
palettes={[tailwindPalette]}
|
|
250
|
+
savedColors={savedColors}
|
|
251
|
+
onSaveColor={(hex) => setSavedColors((prev) => [hex, ...prev])}
|
|
252
|
+
onClearSaved={() => setSavedColors([])}
|
|
253
|
+
/>
|
|
254
|
+
);
|
|
255
|
+
}
|
|
256
|
+
```
|
|
257
|
+
|
|
128
258
|
### Custom swatch size
|
|
129
259
|
|
|
130
260
|
```tsx
|
|
@@ -136,18 +266,6 @@ const ref = useRef<ColorPickerRef>(null);
|
|
|
136
266
|
/>
|
|
137
267
|
```
|
|
138
268
|
|
|
139
|
-
### Full width modal
|
|
140
|
-
|
|
141
|
-
```tsx
|
|
142
|
-
<ColorPicker value={color} onChange={setColor} panelWidth="100%" />
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
### Fixed width modal
|
|
146
|
-
|
|
147
|
-
```tsx
|
|
148
|
-
<ColorPicker value={color} onChange={setColor} panelWidth={350} />
|
|
149
|
-
```
|
|
150
|
-
|
|
151
269
|
### Programmatic control
|
|
152
270
|
|
|
153
271
|
```tsx
|
|
@@ -157,4 +275,4 @@ ref.current?.open();
|
|
|
157
275
|
|
|
158
276
|
## License
|
|
159
277
|
|
|
160
|
-
MIT
|
|
278
|
+
MIT
|
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { useCallback, useRef, useState } from "react";
|
|
4
|
+
import { PanResponder, View } from "react-native";
|
|
5
|
+
import Svg, { Defs, LinearGradient, Pattern, Rect, Stop } from "react-native-svg";
|
|
6
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
7
|
+
export function AlphaStrip({
|
|
8
|
+
alpha,
|
|
9
|
+
color,
|
|
10
|
+
height,
|
|
11
|
+
disabled,
|
|
12
|
+
thumbBorder,
|
|
13
|
+
onChange
|
|
14
|
+
}) {
|
|
15
|
+
const containerRef = useRef(null);
|
|
16
|
+
const originXRef = useRef(0);
|
|
17
|
+
const widthRef = useRef(0);
|
|
18
|
+
const disabledRef = useRef(disabled);
|
|
19
|
+
const onChangeRef = useRef(onChange);
|
|
20
|
+
disabledRef.current = disabled;
|
|
21
|
+
onChangeRef.current = onChange;
|
|
22
|
+
const [layoutWidth, setLayoutWidth] = useState(0);
|
|
23
|
+
const calcAlpha = useCallback(pageX => {
|
|
24
|
+
const w = widthRef.current;
|
|
25
|
+
if (w === 0) return 100;
|
|
26
|
+
const x = Math.max(0, Math.min(pageX - originXRef.current, w));
|
|
27
|
+
return Math.round(x / w * 100);
|
|
28
|
+
}, []);
|
|
29
|
+
const panResponder = useRef(PanResponder.create({
|
|
30
|
+
onStartShouldSetPanResponder: () => !disabledRef.current,
|
|
31
|
+
onStartShouldSetPanResponderCapture: () => !disabledRef.current,
|
|
32
|
+
onMoveShouldSetPanResponder: () => !disabledRef.current,
|
|
33
|
+
onMoveShouldSetPanResponderCapture: () => !disabledRef.current,
|
|
34
|
+
onPanResponderTerminationRequest: () => false,
|
|
35
|
+
onPanResponderGrant: evt => {
|
|
36
|
+
const {
|
|
37
|
+
pageX
|
|
38
|
+
} = evt.nativeEvent;
|
|
39
|
+
containerRef.current?.measure((_x, _y, w, _h, ox) => {
|
|
40
|
+
originXRef.current = ox;
|
|
41
|
+
widthRef.current = w;
|
|
42
|
+
onChangeRef.current(calcAlpha(pageX));
|
|
43
|
+
});
|
|
44
|
+
},
|
|
45
|
+
onPanResponderMove: evt => {
|
|
46
|
+
onChangeRef.current(calcAlpha(evt.nativeEvent.pageX));
|
|
47
|
+
}
|
|
48
|
+
})).current;
|
|
49
|
+
const thumbLeft = layoutWidth > 0 ? alpha / 100 * layoutWidth : 0;
|
|
50
|
+
const thumbSize = height + 6;
|
|
51
|
+
const checkerSize = 5;
|
|
52
|
+
return /*#__PURE__*/_jsx(View, {
|
|
53
|
+
ref: containerRef,
|
|
54
|
+
onLayout: e => {
|
|
55
|
+
const w = e.nativeEvent.layout.width;
|
|
56
|
+
setLayoutWidth(w);
|
|
57
|
+
widthRef.current = w;
|
|
58
|
+
},
|
|
59
|
+
style: {
|
|
60
|
+
width: "100%",
|
|
61
|
+
height,
|
|
62
|
+
overflow: "visible"
|
|
63
|
+
},
|
|
64
|
+
...panResponder.panHandlers,
|
|
65
|
+
children: layoutWidth > 0 && /*#__PURE__*/_jsxs(_Fragment, {
|
|
66
|
+
children: [/*#__PURE__*/_jsxs(Svg, {
|
|
67
|
+
width: layoutWidth,
|
|
68
|
+
height: height,
|
|
69
|
+
children: [/*#__PURE__*/_jsxs(Defs, {
|
|
70
|
+
children: [/*#__PURE__*/_jsxs(Pattern, {
|
|
71
|
+
id: "alphaChecker",
|
|
72
|
+
x: "0",
|
|
73
|
+
y: "0",
|
|
74
|
+
width: checkerSize * 2,
|
|
75
|
+
height: checkerSize * 2,
|
|
76
|
+
patternUnits: "userSpaceOnUse",
|
|
77
|
+
children: [/*#__PURE__*/_jsx(Rect, {
|
|
78
|
+
x: "0",
|
|
79
|
+
y: "0",
|
|
80
|
+
width: checkerSize,
|
|
81
|
+
height: checkerSize,
|
|
82
|
+
fill: "#CCCCCC"
|
|
83
|
+
}), /*#__PURE__*/_jsx(Rect, {
|
|
84
|
+
x: checkerSize,
|
|
85
|
+
y: "0",
|
|
86
|
+
width: checkerSize,
|
|
87
|
+
height: checkerSize,
|
|
88
|
+
fill: "#FFFFFF"
|
|
89
|
+
}), /*#__PURE__*/_jsx(Rect, {
|
|
90
|
+
x: "0",
|
|
91
|
+
y: checkerSize,
|
|
92
|
+
width: checkerSize,
|
|
93
|
+
height: checkerSize,
|
|
94
|
+
fill: "#FFFFFF"
|
|
95
|
+
}), /*#__PURE__*/_jsx(Rect, {
|
|
96
|
+
x: checkerSize,
|
|
97
|
+
y: checkerSize,
|
|
98
|
+
width: checkerSize,
|
|
99
|
+
height: checkerSize,
|
|
100
|
+
fill: "#CCCCCC"
|
|
101
|
+
})]
|
|
102
|
+
}), /*#__PURE__*/_jsxs(LinearGradient, {
|
|
103
|
+
id: "alphaGrad",
|
|
104
|
+
x1: "0",
|
|
105
|
+
y1: "0",
|
|
106
|
+
x2: "1",
|
|
107
|
+
y2: "0",
|
|
108
|
+
children: [/*#__PURE__*/_jsx(Stop, {
|
|
109
|
+
offset: "0%",
|
|
110
|
+
stopColor: color,
|
|
111
|
+
stopOpacity: 0
|
|
112
|
+
}), /*#__PURE__*/_jsx(Stop, {
|
|
113
|
+
offset: "100%",
|
|
114
|
+
stopColor: color,
|
|
115
|
+
stopOpacity: 1
|
|
116
|
+
})]
|
|
117
|
+
})]
|
|
118
|
+
}), /*#__PURE__*/_jsx(Rect, {
|
|
119
|
+
x: "0",
|
|
120
|
+
y: "0",
|
|
121
|
+
width: layoutWidth,
|
|
122
|
+
height: height,
|
|
123
|
+
rx: height / 2,
|
|
124
|
+
fill: "url(#alphaChecker)"
|
|
125
|
+
}), /*#__PURE__*/_jsx(Rect, {
|
|
126
|
+
x: "0",
|
|
127
|
+
y: "0",
|
|
128
|
+
width: layoutWidth,
|
|
129
|
+
height: height,
|
|
130
|
+
rx: height / 2,
|
|
131
|
+
fill: "url(#alphaGrad)"
|
|
132
|
+
})]
|
|
133
|
+
}), /*#__PURE__*/_jsxs(View, {
|
|
134
|
+
style: {
|
|
135
|
+
position: "absolute",
|
|
136
|
+
left: thumbLeft - thumbSize / 2,
|
|
137
|
+
top: -3,
|
|
138
|
+
width: thumbSize,
|
|
139
|
+
height: thumbSize,
|
|
140
|
+
borderRadius: thumbSize / 2,
|
|
141
|
+
borderWidth: 3,
|
|
142
|
+
borderColor: thumbBorder,
|
|
143
|
+
overflow: "hidden",
|
|
144
|
+
shadowColor: "#000",
|
|
145
|
+
shadowOffset: {
|
|
146
|
+
width: 0,
|
|
147
|
+
height: 2
|
|
148
|
+
},
|
|
149
|
+
shadowOpacity: 0.3,
|
|
150
|
+
shadowRadius: 4,
|
|
151
|
+
elevation: 5
|
|
152
|
+
},
|
|
153
|
+
children: [/*#__PURE__*/_jsxs(Svg, {
|
|
154
|
+
width: thumbSize,
|
|
155
|
+
height: thumbSize,
|
|
156
|
+
style: {
|
|
157
|
+
position: "absolute"
|
|
158
|
+
},
|
|
159
|
+
children: [/*#__PURE__*/_jsx(Defs, {
|
|
160
|
+
children: /*#__PURE__*/_jsxs(Pattern, {
|
|
161
|
+
id: "thumbChecker",
|
|
162
|
+
x: "0",
|
|
163
|
+
y: "0",
|
|
164
|
+
width: 8,
|
|
165
|
+
height: 8,
|
|
166
|
+
patternUnits: "userSpaceOnUse",
|
|
167
|
+
children: [/*#__PURE__*/_jsx(Rect, {
|
|
168
|
+
x: "0",
|
|
169
|
+
y: "0",
|
|
170
|
+
width: 4,
|
|
171
|
+
height: 4,
|
|
172
|
+
fill: "#CCCCCC"
|
|
173
|
+
}), /*#__PURE__*/_jsx(Rect, {
|
|
174
|
+
x: 4,
|
|
175
|
+
y: "0",
|
|
176
|
+
width: 4,
|
|
177
|
+
height: 4,
|
|
178
|
+
fill: "#FFFFFF"
|
|
179
|
+
}), /*#__PURE__*/_jsx(Rect, {
|
|
180
|
+
x: "0",
|
|
181
|
+
y: 4,
|
|
182
|
+
width: 4,
|
|
183
|
+
height: 4,
|
|
184
|
+
fill: "#FFFFFF"
|
|
185
|
+
}), /*#__PURE__*/_jsx(Rect, {
|
|
186
|
+
x: 4,
|
|
187
|
+
y: 4,
|
|
188
|
+
width: 4,
|
|
189
|
+
height: 4,
|
|
190
|
+
fill: "#CCCCCC"
|
|
191
|
+
})]
|
|
192
|
+
})
|
|
193
|
+
}), /*#__PURE__*/_jsx(Rect, {
|
|
194
|
+
x: "0",
|
|
195
|
+
y: "0",
|
|
196
|
+
width: thumbSize,
|
|
197
|
+
height: thumbSize,
|
|
198
|
+
fill: "url(#thumbChecker)"
|
|
199
|
+
})]
|
|
200
|
+
}), /*#__PURE__*/_jsx(View, {
|
|
201
|
+
style: {
|
|
202
|
+
position: "absolute",
|
|
203
|
+
width: "100%",
|
|
204
|
+
height: "100%",
|
|
205
|
+
backgroundColor: color,
|
|
206
|
+
opacity: alpha / 100
|
|
207
|
+
}
|
|
208
|
+
})]
|
|
209
|
+
})]
|
|
210
|
+
})
|
|
211
|
+
});
|
|
212
|
+
}
|
|
213
|
+
//# sourceMappingURL=alpha-strip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["useCallback","useRef","useState","PanResponder","View","Svg","Defs","LinearGradient","Pattern","Rect","Stop","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","AlphaStrip","alpha","color","height","disabled","thumbBorder","onChange","containerRef","originXRef","widthRef","disabledRef","onChangeRef","current","layoutWidth","setLayoutWidth","calcAlpha","pageX","w","x","Math","max","min","round","panResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderTerminationRequest","onPanResponderGrant","evt","nativeEvent","measure","_x","_y","_h","ox","onPanResponderMove","thumbLeft","thumbSize","checkerSize","ref","onLayout","e","layout","width","style","overflow","panHandlers","children","id","y","patternUnits","fill","x1","y1","x2","y2","offset","stopColor","stopOpacity","rx","position","left","top","borderRadius","borderWidth","borderColor","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","backgroundColor","opacity"],"sourceRoot":"../../../src","sources":["components/alpha-strip.tsx"],"mappings":"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","ignoreList":[]}
|