reanimated-color-picker
Version:
A Pure JavaScript Color Picker for React Native
311 lines (304 loc) • 7.7 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', {
value: true,
});
exports.Panel5 = Panel5;
var _react = _interopRequireDefault(require('react'));
var _reactNative = require('react-native');
var _reactNativeReanimated = _interopRequireWildcard(require('react-native-reanimated'));
var _index = _interopRequireDefault(require('../../colorKit/index'));
var _AppContext = _interopRequireDefault(require('../../AppContext'));
var _PanelCore = require('./PanelCore');
var _styles = require('../../styles');
var _utils = require('../../utils');
function _interopRequireWildcard(e, t) {
if ('function' == typeof WeakMap)
var r = new WeakMap(),
n = new WeakMap();
return (_interopRequireWildcard = function (e, t) {
if (!t && e && e.__esModule) return e;
var o,
i,
f = { __proto__: null, default: e };
if (null === e || ('object' != typeof e && 'function' != typeof e)) return f;
if ((o = t ? n : r)) {
if (o.has(e)) return o.get(e);
o.set(e, f);
}
for (const t in e)
'default' !== t &&
{}.hasOwnProperty.call(e, t) &&
((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set)
? o(f, t, i)
: (f[t] = e[t]));
return f;
})(e, t);
}
function _interopRequireDefault(e) {
return e && e.__esModule ? e : { default: e };
}
/** @see [Panel5](https://alabsi91.github.io/reanimated-color-picker/api/panels/panel5/) */
function Panel5({ gestures = [], style = {}, selectionStyle = {}, accessibilityLabel, accessibilityHint }) {
const { hueValue, saturationValue, brightnessValue, onGestureChange, onGestureEnd } = (0, _AppContext.default)();
const borderRadius = (0, _utils.getStyle)(style, 'borderRadius') ?? 0;
const row = (0, _reactNativeReanimated.useSharedValue)(0);
const column = (0, _reactNativeReanimated.useSharedValue)(0);
const adaptiveColor = (0, _reactNativeReanimated.useSharedValue)('#000');
const width = (0, _reactNativeReanimated.useSharedValue)(0);
const height = (0, _reactNativeReanimated.useSharedValue)(0);
const squareSize = (0, _reactNativeReanimated.useDerivedValue)(
() => Math.max(width.value / 12, height.value / 10),
[width, height],
);
const setAdaptiveColor = color => {
'worklet';
const isDark = _index.default.runOnUI().isDark(color);
adaptiveColor.value = isDark ? '#ffffff' : '#000000';
};
// Calculate the position of the selected square on color change.
// Since color conversion is not 100% accurate, we need to find the closest color in the grid.
(0, _reactNativeReanimated.useDerivedValue)(() => {
const hsvColor = {
h: hueValue.value,
s: saturationValue.value,
v: brightnessValue.value,
};
for (let y = 0; y < GRID_COLORS.length; y++) {
for (let x = 0; x < GRID_COLORS[y].length; x++) {
const gridColor = GRID_COLORS[y][x];
const areColorsEqual = _index.default.runOnUI().areColorsEqual(gridColor, hsvColor, 5);
if (!areColorsEqual) continue;
row.value = y;
column.value = x;
setAdaptiveColor(gridColor);
break;
}
}
}, [hueValue, saturationValue, brightnessValue, row, column]);
const selectedStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
const x = column.value * squareSize.value;
const y = row.value * squareSize.value;
return {
width: squareSize.value,
height: squareSize.value,
top: y,
left: _utils.isRtl ? undefined : x,
right: _utils.isRtl ? x : undefined,
borderColor: adaptiveColor.value,
};
}, [squareSize, adaptiveColor, row, column]);
const onUpdate = (newColumn, newRow) => {
'worklet';
var _GRID_COLORS$newRow;
const color =
(_GRID_COLORS$newRow = GRID_COLORS[newRow]) === null || _GRID_COLORS$newRow === void 0
? void 0
: _GRID_COLORS$newRow[newColumn];
if (!color) return;
const { h, s, v } = _index.default.runOnUI().HSV(color).object(false);
if (hueValue.value === h && saturationValue.value === s && brightnessValue.value === v) {
return;
}
hueValue.value = h;
saturationValue.value = s;
brightnessValue.value = v;
setAdaptiveColor(color);
onGestureChange();
};
const onGestureUpdate = ({ x, y }) => {
'worklet';
if (!squareSize.value) return;
const newRow = Math.floor(y / squareSize.value);
const newColumn = Math.floor(x / squareSize.value);
onUpdate(newColumn, newRow);
};
const onEnd = () => {
'worklet';
onGestureEnd();
};
return /*#__PURE__*/ _react.default.createElement(
_PanelCore.PanelCore,
{
style: [
style,
{
position: 'relative',
borderWidth: 0,
padding: 0,
aspectRatio: 1.2,
},
],
label: accessibilityLabel ?? '12 by 10 Grid of 120 Colors',
hint: accessibilityHint ?? 'Double tap to switch between column and row selection',
labelX: 'Column',
currentXValue: column,
maxXValue: 12,
labelY: 'Row',
currentYValue: row,
maxYValue: 10,
reverseY: true,
width: width,
height: height,
gestures: gestures,
onGestureUpdate: onGestureUpdate,
onUpdate: onUpdate,
onEnd: onEnd,
},
/*#__PURE__*/ _react.default.createElement(_reactNative.Image, {
source: require('../../assets/grid.png'),
style: {
borderRadius,
width: '100%',
height: '100%',
},
resizeMode: 'stretch',
'aria-hidden': true,
}),
/*#__PURE__*/ _react.default.createElement(_reactNativeReanimated.default.View, {
style: [_styles.styles.selected, selectionStyle, selectedStyle],
'aria-hidden': true,
}),
);
}
const GRID_COLORS = [
[
'#FFFFFF',
'#EBEBEB',
'#D6D6D6',
'#C2C2C2',
'#ADADAD',
'#999999',
'#858585',
'#707070',
'#5C5C5C',
'#474747',
'#333333',
'#000000',
],
[
'#00374A',
'#011D57',
'#11053B',
'#2E063D',
'#3C071B',
'#5C0701',
'#5A1C00',
'#583300',
'#563D00',
'#666100',
'#4F5504',
'#263E0F',
],
[
'#004D65',
'#012F7B',
'#1A0A52',
'#450D59',
'#551029',
'#831100',
'#7B2900',
'#7A4A00',
'#785800',
'#8D8602',
'#6F760A',
'#38571A',
],
[
'#016E8F',
'#0042A9',
'#2C0977',
'#61187C',
'#791A3D',
'#B51A00',
'#AD3E00',
'#A96800',
'#A67B01',
'#C4BC00',
'#9BA50E',
'#4E7A27',
],
[
'#008CB4',
'#0056D6',
'#371A94',
'#7A219E',
'#99244F',
'#E22400',
'#DA5100',
'#D38301',
'#D19D01',
'#F5EC00',
'#C3D117',
'#669D34',
],
[
'#00A1D8',
'#0061FD',
'#4D22B2',
'#982ABC',
'#B92D5D',
'#FF4015',
'#FF6A00',
'#FFAB01',
'#FCC700',
'#FEFB41',
'#D9EC37',
'#76BB40',
],
[
'#01C7FC',
'#3A87FD',
'#5E30EB',
'#BE38F3',
'#E63B7A',
'#FE6250',
'#FE8648',
'#FEB43F',
'#FECB3E',
'#FFF76B',
'#E4EF65',
'#96D35F',
],
[
'#52D6FC',
'#74A7FF',
'#864FFD',
'#D357FE',
'#EE719E',
'#FF8C82',
'#FEA57D',
'#FEC777',
'#FED977',
'#FFF994',
'#EAF28F',
'#B1DD8B',
],
[
'#93E3FC',
'#A7C6FF',
'#B18CFE',
'#E292FE',
'#F4A4C0',
'#FFB5AF',
'#FFC5AB',
'#FED9A8',
'#FDE4A8',
'#FFFBB9',
'#F1F7B7',
'#CDE8B5',
],
[
'#CBF0FF',
'#D2E2FE',
'#D8C9FE',
'#EFCAFE',
'#F9D3E0',
'#FFDAD8',
'#FFE2D6',
'#FEECD4',
'#FEF1D5',
'#FDFBDD',
'#F6FADB',
'#DEEED4',
],
];