UNPKG

create-expo-cljs-app

Version:

Create a react native application with Expo and Shadow-CLJS!

796 lines (729 loc) 19.6 kB
/* global _WORKLET */ /** * Copied from: * react-native/Libraries/StyleSheet/normalizeColor.js * react-native/Libraries/StyleSheet/processColor.js * https://github.com/wcandillon/react-native-redash/blob/master/src/Colors.ts */ /* eslint no-bitwise: 0 */ import { Platform } from 'react-native'; import { makeRemote, makeShareable, isConfigured } from './core'; import { interpolate } from './interpolation'; // @ts-ignore JS file import { Extrapolate } from '../reanimated1/derived'; interface RBG { r: number; g: number; b: number; } interface HSV { h: number; s: number; v: number; } // var INTEGER = '[-+]?\\d+'; const NUMBER = '[-+]?\\d*\\.?\\d+'; const PERCENTAGE = NUMBER + '%'; function call(...args: unknown[]): string { 'worklet'; return '\\(\\s*(' + args.join(')\\s*,\\s*(') + ')\\s*\\)'; } // matchers use RegExp objects which needs to be created separately on JS and on // the UI thread. We keep separate cache of Regexes for UI and JS using the below // objects, then pick the right cache in getMatchers() method. const jsCachedMatchers: Matchers = {}; const uiCachedMatchers: Matchers = !isConfigured() ? {} : makeRemote({}); type Matchers = { rgb?: RegExp; rgba?: RegExp; hsl?: RegExp; hsla?: RegExp; hex3?: RegExp; hex4?: RegExp; hex5?: RegExp; hex6?: RegExp; hex8?: RegExp; }; function getMatchers(): Matchers { 'worklet'; const cachedMatchers: Matchers = _WORKLET ? uiCachedMatchers : jsCachedMatchers; if (cachedMatchers.rgb === undefined) { cachedMatchers.rgb = new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER)); cachedMatchers.rgba = new RegExp( 'rgba' + call(NUMBER, NUMBER, NUMBER, NUMBER) ); cachedMatchers.hsl = new RegExp( 'hsl' + call(NUMBER, PERCENTAGE, PERCENTAGE) ); cachedMatchers.hsla = new RegExp( 'hsla' + call(NUMBER, PERCENTAGE, PERCENTAGE, NUMBER) ); cachedMatchers.hex3 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/; cachedMatchers.hex4 = /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/; cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/; cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/; } return cachedMatchers; } // cachedMatchers is lazy loaded and it is frozen when worklet is being created, // it is possible to call getMatchers() when the object is frozen, then cachedMatchers // has no assigned regexes getMatchers(); function hue2rgb(p: number, q: number, t: number): number { 'worklet'; if (t < 0) { t += 1; } if (t > 1) { t -= 1; } if (t < 1 / 6) { return p + (q - p) * 6 * t; } if (t < 1 / 2) { return q; } if (t < 2 / 3) { return p + (q - p) * (2 / 3 - t) * 6; } return p; } function hslToRgb(h: number, s: number, l: number): number { 'worklet'; const q = l < 0.5 ? l * (1 + s) : l + s - l * s; const p = 2 * l - q; const r = hue2rgb(p, q, h + 1 / 3); const g = hue2rgb(p, q, h); const b = hue2rgb(p, q, h - 1 / 3); return ( (Math.round(r * 255) << 24) | (Math.round(g * 255) << 16) | (Math.round(b * 255) << 8) ); } function parse255(str: string): number { 'worklet'; const int = Number.parseInt(str, 10); if (int < 0) { return 0; } if (int > 255) { return 255; } return int; } function parse360(str: string): number { 'worklet'; const int = Number.parseFloat(str); return (((int % 360) + 360) % 360) / 360; } function parse1(str: string): number { 'worklet'; const num = Number.parseFloat(str); if (num < 0) { return 0; } if (num > 1) { return 255; } return Math.round(num * 255); } function parsePercentage(str: string): number { 'worklet'; // parseFloat conveniently ignores the final % const int = Number.parseFloat(str); if (int < 0) { return 0; } if (int > 100) { return 1; } return int / 100; } const names: any = !isConfigured() ? null : makeShareable({ transparent: 0x00000000, // http://www.w3.org/TR/css3-color/#svg-color aliceblue: 0xf0f8ffff, antiquewhite: 0xfaebd7ff, aqua: 0x00ffffff, aquamarine: 0x7fffd4ff, azure: 0xf0ffffff, beige: 0xf5f5dcff, bisque: 0xffe4c4ff, black: 0x000000ff, blanchedalmond: 0xffebcdff, blue: 0x0000ffff, blueviolet: 0x8a2be2ff, brown: 0xa52a2aff, burlywood: 0xdeb887ff, burntsienna: 0xea7e5dff, cadetblue: 0x5f9ea0ff, chartreuse: 0x7fff00ff, chocolate: 0xd2691eff, coral: 0xff7f50ff, cornflowerblue: 0x6495edff, cornsilk: 0xfff8dcff, crimson: 0xdc143cff, cyan: 0x00ffffff, darkblue: 0x00008bff, darkcyan: 0x008b8bff, darkgoldenrod: 0xb8860bff, darkgray: 0xa9a9a9ff, darkgreen: 0x006400ff, darkgrey: 0xa9a9a9ff, darkkhaki: 0xbdb76bff, darkmagenta: 0x8b008bff, darkolivegreen: 0x556b2fff, darkorange: 0xff8c00ff, darkorchid: 0x9932ccff, darkred: 0x8b0000ff, darksalmon: 0xe9967aff, darkseagreen: 0x8fbc8fff, darkslateblue: 0x483d8bff, darkslategray: 0x2f4f4fff, darkslategrey: 0x2f4f4fff, darkturquoise: 0x00ced1ff, darkviolet: 0x9400d3ff, deeppink: 0xff1493ff, deepskyblue: 0x00bfffff, dimgray: 0x696969ff, dimgrey: 0x696969ff, dodgerblue: 0x1e90ffff, firebrick: 0xb22222ff, floralwhite: 0xfffaf0ff, forestgreen: 0x228b22ff, fuchsia: 0xff00ffff, gainsboro: 0xdcdcdcff, ghostwhite: 0xf8f8ffff, gold: 0xffd700ff, goldenrod: 0xdaa520ff, gray: 0x808080ff, green: 0x008000ff, greenyellow: 0xadff2fff, grey: 0x808080ff, honeydew: 0xf0fff0ff, hotpink: 0xff69b4ff, indianred: 0xcd5c5cff, indigo: 0x4b0082ff, ivory: 0xfffff0ff, khaki: 0xf0e68cff, lavender: 0xe6e6faff, lavenderblush: 0xfff0f5ff, lawngreen: 0x7cfc00ff, lemonchiffon: 0xfffacdff, lightblue: 0xadd8e6ff, lightcoral: 0xf08080ff, lightcyan: 0xe0ffffff, lightgoldenrodyellow: 0xfafad2ff, lightgray: 0xd3d3d3ff, lightgreen: 0x90ee90ff, lightgrey: 0xd3d3d3ff, lightpink: 0xffb6c1ff, lightsalmon: 0xffa07aff, lightseagreen: 0x20b2aaff, lightskyblue: 0x87cefaff, lightslategray: 0x778899ff, lightslategrey: 0x778899ff, lightsteelblue: 0xb0c4deff, lightyellow: 0xffffe0ff, lime: 0x00ff00ff, limegreen: 0x32cd32ff, linen: 0xfaf0e6ff, magenta: 0xff00ffff, maroon: 0x800000ff, mediumaquamarine: 0x66cdaaff, mediumblue: 0x0000cdff, mediumorchid: 0xba55d3ff, mediumpurple: 0x9370dbff, mediumseagreen: 0x3cb371ff, mediumslateblue: 0x7b68eeff, mediumspringgreen: 0x00fa9aff, mediumturquoise: 0x48d1ccff, mediumvioletred: 0xc71585ff, midnightblue: 0x191970ff, mintcream: 0xf5fffaff, mistyrose: 0xffe4e1ff, moccasin: 0xffe4b5ff, navajowhite: 0xffdeadff, navy: 0x000080ff, oldlace: 0xfdf5e6ff, olive: 0x808000ff, olivedrab: 0x6b8e23ff, orange: 0xffa500ff, orangered: 0xff4500ff, orchid: 0xda70d6ff, palegoldenrod: 0xeee8aaff, palegreen: 0x98fb98ff, paleturquoise: 0xafeeeeff, palevioletred: 0xdb7093ff, papayawhip: 0xffefd5ff, peachpuff: 0xffdab9ff, peru: 0xcd853fff, pink: 0xffc0cbff, plum: 0xdda0ddff, powderblue: 0xb0e0e6ff, purple: 0x800080ff, rebeccapurple: 0x663399ff, red: 0xff0000ff, rosybrown: 0xbc8f8fff, royalblue: 0x4169e1ff, saddlebrown: 0x8b4513ff, salmon: 0xfa8072ff, sandybrown: 0xf4a460ff, seagreen: 0x2e8b57ff, seashell: 0xfff5eeff, sienna: 0xa0522dff, silver: 0xc0c0c0ff, skyblue: 0x87ceebff, slateblue: 0x6a5acdff, slategray: 0x708090ff, slategrey: 0x708090ff, snow: 0xfffafaff, springgreen: 0x00ff7fff, steelblue: 0x4682b4ff, tan: 0xd2b48cff, teal: 0x008080ff, thistle: 0xd8bfd8ff, tomato: 0xff6347ff, turquoise: 0x40e0d0ff, violet: 0xee82eeff, wheat: 0xf5deb3ff, white: 0xffffffff, whitesmoke: 0xf5f5f5ff, yellow: 0xffff00ff, yellowgreen: 0x9acd32ff, }); function normalizeColor(color: unknown): number | null { 'worklet'; if (typeof color === 'number') { if (color >>> 0 === color && color >= 0 && color <= 0xffffffff) { return color; } return null; } if (typeof color !== 'string') { return null; } const matchers = getMatchers(); let match: RegExpExecArray | null | undefined; // Ordered based on occurrences on Facebook codebase if ((match = matchers?.hex6?.exec(color))) { return Number.parseInt(match[1] + 'ff', 16) >>> 0; } if (names[color] !== undefined) { return names[color]; } if ((match = matchers?.rgb?.exec(color))) { return ( // b ((parse255(match[1]) << 24) | // r (parse255(match[2]) << 16) | // g (parse255(match[3]) << 8) | 0x000000ff) >>> // a 0 ); } if ((match = matchers?.rgba?.exec(color))) { return ( // b ((parse255(match[1]) << 24) | // r (parse255(match[2]) << 16) | // g (parse255(match[3]) << 8) | parse1(match[4])) >>> // a 0 ); } if ((match = matchers?.hex3?.exec(color))) { return ( Number.parseInt( match[1] + match[1] + // r match[2] + match[2] + // g match[3] + match[3] + // b 'ff', // a 16 ) >>> 0 ); } // https://drafts.csswg.org/css-color-4/#hex-notation if ((match = matchers?.hex8?.exec(color))) { return Number.parseInt(match[1], 16) >>> 0; } if ((match = matchers?.hex4?.exec(color))) { return ( Number.parseInt( match[1] + match[1] + // r match[2] + match[2] + // g match[3] + match[3] + // b match[4] + match[4], // a 16 ) >>> 0 ); } if ((match = matchers?.hsl?.exec(color))) { return ( (hslToRgb( parse360(match[1]), // h parsePercentage(match[2]), // s parsePercentage(match[3]) // l ) | 0x000000ff) >>> // a 0 ); } if ((match = matchers?.hsla?.exec(color))) { return ( (hslToRgb( parse360(match[1]), // h parsePercentage(match[2]), // s parsePercentage(match[3]) // l ) | parse1(match[4])) >>> // a 0 ); } return null; } export const opacity = (c: number): number => { 'worklet'; return ((c >> 24) & 255) / 255; }; export const red = (c: number): number => { 'worklet'; return (c >> 16) & 255; }; export const green = (c: number): number => { 'worklet'; return (c >> 8) & 255; }; export const blue = (c: number): number => { 'worklet'; return c & 255; }; export const rgbaColor = ( r: number, g: number, b: number, alpha = 1 ): number | string => { 'worklet'; if (Platform.OS === 'web' || !_WORKLET) { return `rgba(${r}, ${g}, ${b}, ${alpha})`; } const c = Math.round(alpha * 255) * (1 << 24) + Math.round(r) * (1 << 16) + Math.round(g) * (1 << 8) + Math.round(b); if (Platform.OS === 'android') { // on Android color is represented as signed 32 bit int return c < (1 << 31) >>> 0 ? c : c - 4294967296; // 4294967296 == Math.pow(2, 32); } return c; }; /* accepts parameters * r Object = {r:x, g:y, b:z} * OR * r, g, b * 0 <= r, g, b <= 255 * returns 0 <= h, s, v <= 1 */ function RGBtoHSV(rgb: RBG): HSV; function RGBtoHSV(r: number, g: number, b: number): HSV; function RGBtoHSV(r: any, g?: any, b?: any): HSV { 'worklet'; /* eslint-disable */ if (arguments.length === 1) { g = r.g; b = r.b; r = r.r; } const max = Math.max(r, g, b); const min = Math.min(r, g, b); const d = max - min; const s = max === 0 ? 0 : d / max; const v = max / 255; let h; switch (max) { default: /* fallthrough */ case min: h = 0; break; case r: h = g - b + d * (g < b ? 6 : 0); h /= 6 * d; break; case g: h = b - r + d * 2; h /= 6 * d; break; case b: h = r - g + d * 4; h /= 6 * d; break; } return { h: h, s: s, v: v, }; /* eslint-enable */ } /* accepts parameters * h Object = {h:x, s:y, v:z} * OR * h, s, v * 0 <= h, s, v <= 1 * returns 0 <= r, g, b <= 255 */ function HSVtoRGB(hsv: HSV): RBG; function HSVtoRGB(h: number, s: number, v: number): RBG; function HSVtoRGB(h: any, s?: any, v?: any) { 'worklet'; /* eslint-disable */ var r, g, b, i, f, p, q, t; if (arguments.length === 1) { s = h.s; v = h.v; h = h.h; } i = Math.floor(h * 6); f = h * 6 - i; p = v * (1 - s); q = v * (1 - f * s); t = v * (1 - (1 - f) * s); switch (i % 6) { case 0: (r = v), (g = t), (b = p); break; case 1: (r = q), (g = v), (b = p); break; case 2: (r = p), (g = v), (b = t); break; case 3: (r = p), (g = q), (b = v); break; case 4: (r = t), (g = p), (b = v); break; case 5: (r = v), (g = p), (b = q); break; } return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255), }; /* eslint-enable */ } export const hsvToColor = ( h: number, s: number, v: number ): number | string => { 'worklet'; const { r, g, b } = HSVtoRGB(h, s, v); return rgbaColor(r, g, b); }; export function processColorInitially( color: unknown ): number | null | undefined { 'worklet'; if (color === null || color === undefined || typeof color === 'number') { return color; } let normalizedColor = normalizeColor(color); if (normalizedColor === null || normalizedColor === undefined) { return undefined; } if (typeof normalizedColor !== 'number') { return null; } normalizedColor = ((normalizedColor << 24) | (normalizedColor >>> 8)) >>> 0; // argb return normalizedColor; } export function isColor(value: unknown): boolean { 'worklet'; if (typeof value !== 'string') { return false; } return processColorInitially(value) != null; } export function processColor(color: unknown): number | null | undefined { 'worklet'; let normalizedColor = processColorInitially(color); if (normalizedColor === null || normalizedColor === undefined) { return undefined; } if (typeof normalizedColor !== 'number') { return null; } if (Platform.OS === 'android') { // Android use 32 bit *signed* integer to represent the color // We utilize the fact that bitwise operations in JS also operates on // signed 32 bit integers, so that we can use those to convert from // *unsigned* to *signed* 32bit int that way. normalizedColor = normalizedColor | 0x0; } return normalizedColor; } export type ParsedColorArray = [number, number, number, number]; export function convertToHSVA(color: unknown): ParsedColorArray { 'worklet'; const processedColor = processColorInitially(color)!; // argb; const a = (processedColor >>> 24) / 255; const r = (processedColor << 8) >>> 24; const g = (processedColor << 16) >>> 24; const b = (processedColor << 24) >>> 24; const { h, s, v } = RGBtoHSV(r, g, b); return [h, s, v, a]; } export function toRGBA(HSVA: ParsedColorArray): string { 'worklet'; const { r, g, b } = HSVtoRGB(HSVA[0], HSVA[1], HSVA[2]); return `rgba(${r}, ${g}, ${b}, ${HSVA[3]})`; } const interpolateColorsHSV = ( value: number, inputRange: readonly number[], colors: InterpolateCacheHSV ) => { 'worklet'; const h = interpolate(value, inputRange, colors.h, Extrapolate.CLAMP); const s = interpolate(value, inputRange, colors.s, Extrapolate.CLAMP); const v = interpolate(value, inputRange, colors.v, Extrapolate.CLAMP); return hsvToColor(h, s, v); }; const interpolateColorsRGB = ( value: number, inputRange: readonly number[], colors: InterpolateCacheRGBA ) => { 'worklet'; const r = interpolate(value, inputRange, colors.r, Extrapolate.CLAMP); const g = interpolate(value, inputRange, colors.g, Extrapolate.CLAMP); const b = interpolate(value, inputRange, colors.b, Extrapolate.CLAMP); const a = interpolate(value, inputRange, colors.a, Extrapolate.CLAMP); return rgbaColor(r, g, b, a); }; interface InterpolateCacheRGBA { r: number[]; g: number[]; b: number[]; a: number[]; } const BUFFER_SIZE = 200; const hashOrderRGBA: any = new ArrayBuffer(BUFFER_SIZE); let curentHashIndexRGBA = 0; const interpolateCacheRGBA: { [name: string]: InterpolateCacheRGBA } = {}; const getInterpolateCacheRGBA = ( colors: readonly (string | number)[] ): InterpolateCacheRGBA => { 'worklet'; const hash = colors.join(''); const cache = interpolateCacheRGBA[hash]; if (cache !== undefined) { return cache; } const r = []; const g = []; const b = []; const a = []; for (let i = 0; i < colors.length; ++i) { const color = colors[i]; const proocessedColor = processColor(color); // explicit check in case if processedColor is 0 if (proocessedColor !== null && proocessedColor !== undefined) { r.push(red(proocessedColor)); g.push(green(proocessedColor)); b.push(blue(proocessedColor)); a.push(opacity(proocessedColor)); } } const newCache = { r, g, b, a }; const overrideHash = hashOrderRGBA[curentHashIndexRGBA]; if (overrideHash) { delete interpolateCacheRGBA[overrideHash]; } interpolateCacheRGBA[hash] = newCache; hashOrderRGBA[curentHashIndexRGBA] = hash; curentHashIndexRGBA = (curentHashIndexRGBA + 1) % BUFFER_SIZE; return newCache; }; interface InterpolateCacheHSV { h: number[]; s: number[]; v: number[]; } const hashOrderHSV: any = new ArrayBuffer(BUFFER_SIZE); let curentHashIndexHSV = 0; const interpolateCacheHSV: { [name: string]: InterpolateCacheHSV } = {}; const getInterpolateCacheHSV = ( colors: readonly (string | number)[] ): InterpolateCacheHSV => { 'worklet'; const hash = colors.join(''); const cache = interpolateCacheHSV[hash]; if (cache !== undefined) { return cache; } const h = []; const s = []; const v = []; for (let i = 0; i < colors.length; ++i) { const color = colors[i]; const proocessedColor = RGBtoHSV(processColor(color) as any); if (proocessedColor) { h.push(proocessedColor.h); s.push(proocessedColor.s); v.push(proocessedColor.v); } } const newCache = { h, s, v }; const overrideHash = hashOrderHSV[curentHashIndexHSV]; if (overrideHash) { delete interpolateCacheHSV[overrideHash]; } interpolateCacheHSV[hash] = newCache; hashOrderHSV[curentHashIndexHSV] = hash; curentHashIndexHSV = (curentHashIndexHSV + 1) % BUFFER_SIZE; return newCache; }; export const interpolateColor = ( value: number, inputRange: readonly number[], outputRange: readonly (string | number)[], colorSpace: 'RGB' | 'HSV' = 'RGB' ): string | number => { 'worklet'; if (colorSpace === 'HSV') { return interpolateColorsHSV( value, inputRange, getInterpolateCacheHSV(outputRange) ); } else if (colorSpace === 'RGB') { return interpolateColorsRGB( value, inputRange, getInterpolateCacheRGBA(outputRange) ); } throw new Error( `invalid color space provided: ${colorSpace}. Supported values are: ['RGB', 'HSV']` ); };