diff --git a/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/base/appearance/colors/ColorProperties.tsx b/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/base/appearance/colors/ColorProperties.tsx index dbc566cdcef4..7be092c16c92 100644 --- a/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/base/appearance/colors/ColorProperties.tsx +++ b/apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/base/appearance/colors/ColorProperties.tsx @@ -1,3 +1,4 @@ +import type { JSX } from 'react'; import type { ImageProps, ImageStyle, @@ -22,7 +23,6 @@ import { } from '@/apps/css/components'; import { stringifyConfig } from '@/apps/css/utils'; import { colors, radius, sizes, spacing } from '@/theme'; -import type { JSX } from 'react'; const sharedConfig: CSSAnimationSettings = { animationDirection: 'alternate', diff --git a/packages/react-native-reanimated/src/Colors.ts b/packages/react-native-reanimated/src/Colors.ts index 4f9e84ff4a99..345b9987a3bf 100644 --- a/packages/react-native-reanimated/src/Colors.ts +++ b/packages/react-native-reanimated/src/Colors.ts @@ -354,16 +354,6 @@ export const ColorProperties = [ 'stroke', ]; -/* copied from: - * https://github.com/facebook/react-native/blob/v0.81.0/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypesIOS.d.ts - */ -export const DynamicColorIOSProperties = [ - 'light', - 'dark', - 'highContrastLight', - 'highContrastDark', -] as const; - export function normalizeColor(color: unknown): number | null | undefined { 'worklet'; diff --git a/packages/react-native-reanimated/src/css/constants/font.ts b/packages/react-native-reanimated/src/common/constants/font.ts similarity index 100% rename from packages/react-native-reanimated/src/css/constants/font.ts rename to packages/react-native-reanimated/src/common/constants/font.ts diff --git a/packages/react-native-reanimated/src/common/constants/index.ts b/packages/react-native-reanimated/src/common/constants/index.ts new file mode 100644 index 000000000000..f0a26caa5115 --- /dev/null +++ b/packages/react-native-reanimated/src/common/constants/index.ts @@ -0,0 +1,3 @@ +'use strict'; +export * from './font'; +export * from './platform'; diff --git a/packages/react-native-reanimated/src/common/constants.ts b/packages/react-native-reanimated/src/common/constants/platform.ts similarity index 100% rename from packages/react-native-reanimated/src/common/constants.ts rename to packages/react-native-reanimated/src/common/constants/platform.ts diff --git a/packages/react-native-reanimated/src/common/index.ts b/packages/react-native-reanimated/src/common/index.ts index eef443c15371..107bf76c383f 100644 --- a/packages/react-native-reanimated/src/common/index.ts +++ b/packages/react-native-reanimated/src/common/index.ts @@ -2,6 +2,6 @@ export * from './constants'; export * from './errors'; export * from './logger'; -export * from './processors'; +export * from './style'; export type * from './types'; export * from './utils'; diff --git a/packages/react-native-reanimated/src/common/processors/index.ts b/packages/react-native-reanimated/src/common/processors/index.ts deleted file mode 100644 index 9d98ff708c4a..000000000000 --- a/packages/react-native-reanimated/src/common/processors/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -'use strict'; -export { - DynamicColorIOS, - PlatformColor, - processColor, - processColorsInProps, -} from './colors'; -export { processBoxShadowNative, processBoxShadowWeb } from './shadows'; -export { processTransformOrigin } from './transformOrigin'; diff --git a/packages/react-native-reanimated/src/css/native/style/__tests__/createStyleBuilder.test.ts b/packages/react-native-reanimated/src/common/style/__tests__/createStyleBuilder.test.ts similarity index 93% rename from packages/react-native-reanimated/src/css/native/style/__tests__/createStyleBuilder.test.ts rename to packages/react-native-reanimated/src/common/style/__tests__/createStyleBuilder.test.ts index 552c0d7f4a57..f02016b35178 100644 --- a/packages/react-native-reanimated/src/css/native/style/__tests__/createStyleBuilder.test.ts +++ b/packages/react-native-reanimated/src/common/style/__tests__/createStyleBuilder.test.ts @@ -1,5 +1,5 @@ 'use strict'; -import type { PlainStyle } from '../../../../common'; +import type { PlainStyle } from '../../types'; import createStyleBuilder from '../createStyleBuilder'; // TODO - add more tests diff --git a/packages/react-native-reanimated/src/css/native/style/config.ts b/packages/react-native-reanimated/src/common/style/config.ts similarity index 97% rename from packages/react-native-reanimated/src/css/native/style/config.ts rename to packages/react-native-reanimated/src/common/style/config.ts index 92935affbd97..f37dcf83f361 100644 --- a/packages/react-native-reanimated/src/css/native/style/config.ts +++ b/packages/react-native-reanimated/src/common/style/config.ts @@ -1,13 +1,11 @@ 'use strict'; -import type { PlainStyle } from '../../../common'; +import { IS_ANDROID } from '../constants'; +import type { PlainStyle } from '../types'; +import { processTransformOrigin } from '../web'; import { - IS_ANDROID, + processAspectRatio, processBoxShadowNative, processColor, - processTransformOrigin, -} from '../../../common'; -import { - processAspectRatio, processFontWeight, processGap, processInset, diff --git a/packages/react-native-reanimated/src/css/native/style/createStyleBuilder.ts b/packages/react-native-reanimated/src/common/style/createStyleBuilder.ts similarity index 95% rename from packages/react-native-reanimated/src/css/native/style/createStyleBuilder.ts rename to packages/react-native-reanimated/src/common/style/createStyleBuilder.ts index 3e49a64e60c7..61a99daf1ba8 100644 --- a/packages/react-native-reanimated/src/css/native/style/createStyleBuilder.ts +++ b/packages/react-native-reanimated/src/common/style/createStyleBuilder.ts @@ -1,7 +1,7 @@ 'use strict'; -import type { AnyRecord } from '../../../common'; -import { isConfigPropertyAlias, isDefined, isRecord } from '../../utils'; +import type { AnyRecord } from '../types'; +import { isConfigPropertyAlias, isDefined, isRecord } from '../utils'; import type { StyleBuilder, StyleBuilderConfig, diff --git a/packages/react-native-reanimated/src/css/native/style/index.ts b/packages/react-native-reanimated/src/common/style/index.ts similarity index 100% rename from packages/react-native-reanimated/src/css/native/style/index.ts rename to packages/react-native-reanimated/src/common/style/index.ts diff --git a/packages/react-native-reanimated/src/common/processors/__tests__/colors.test.ts b/packages/react-native-reanimated/src/common/style/processors/__tests__/colors.test.ts similarity index 98% rename from packages/react-native-reanimated/src/common/processors/__tests__/colors.test.ts rename to packages/react-native-reanimated/src/common/style/processors/__tests__/colors.test.ts index 9b1962883064..181a527bccc6 100644 --- a/packages/react-native-reanimated/src/common/processors/__tests__/colors.test.ts +++ b/packages/react-native-reanimated/src/common/style/processors/__tests__/colors.test.ts @@ -1,5 +1,5 @@ 'use strict'; -import { ReanimatedError } from '../../errors'; +import { ReanimatedError } from '../../../errors'; import { ERROR_MESSAGES, processColor, processColorsInProps } from '../colors'; describe(processColorsInProps, () => { diff --git a/packages/react-native-reanimated/src/css/native/style/processors/__tests__/others.test.ts b/packages/react-native-reanimated/src/common/style/processors/__tests__/others.test.ts similarity index 90% rename from packages/react-native-reanimated/src/css/native/style/processors/__tests__/others.test.ts rename to packages/react-native-reanimated/src/common/style/processors/__tests__/others.test.ts index 024a5f602f53..1fcafff0c674 100644 --- a/packages/react-native-reanimated/src/css/native/style/processors/__tests__/others.test.ts +++ b/packages/react-native-reanimated/src/common/style/processors/__tests__/others.test.ts @@ -1,5 +1,5 @@ 'use strict'; -import { ReanimatedError } from '../../../../../common'; +import { ReanimatedError } from '../../../errors'; import { ERROR_MESSAGES, processAspectRatio } from '../others'; describe(processAspectRatio, () => { diff --git a/packages/react-native-reanimated/src/common/processors/__tests__/shadows.test.ts b/packages/react-native-reanimated/src/common/style/processors/__tests__/shadows.test.ts similarity index 100% rename from packages/react-native-reanimated/src/common/processors/__tests__/shadows.test.ts rename to packages/react-native-reanimated/src/common/style/processors/__tests__/shadows.test.ts diff --git a/packages/react-native-reanimated/src/css/native/style/processors/__tests__/transform.test.ts b/packages/react-native-reanimated/src/common/style/processors/__tests__/transform.test.ts similarity index 98% rename from packages/react-native-reanimated/src/css/native/style/processors/__tests__/transform.test.ts rename to packages/react-native-reanimated/src/common/style/processors/__tests__/transform.test.ts index 7128dba6e2d7..3491b1eaa346 100644 --- a/packages/react-native-reanimated/src/css/native/style/processors/__tests__/transform.test.ts +++ b/packages/react-native-reanimated/src/common/style/processors/__tests__/transform.test.ts @@ -1,6 +1,6 @@ 'use strict'; -import { ReanimatedError } from '../../../../../common'; -import type { TransformsArray } from '../../../../types'; +import { ReanimatedError } from '../../../errors'; +import type { TransformsArray } from '../../../types'; import { ERROR_MESSAGES, processTransform } from '../transform'; describe(processTransform, () => { diff --git a/packages/react-native-reanimated/src/common/processors/__tests__/transformOrigin.test.ts b/packages/react-native-reanimated/src/common/style/processors/__tests__/transformOrigin.test.ts similarity index 98% rename from packages/react-native-reanimated/src/common/processors/__tests__/transformOrigin.test.ts rename to packages/react-native-reanimated/src/common/style/processors/__tests__/transformOrigin.test.ts index 794a1e039a08..b4a6c8987cc7 100644 --- a/packages/react-native-reanimated/src/common/processors/__tests__/transformOrigin.test.ts +++ b/packages/react-native-reanimated/src/common/style/processors/__tests__/transformOrigin.test.ts @@ -1,6 +1,9 @@ 'use strict'; -import { ReanimatedError } from '../../errors'; -import type { NormalizedTransformOrigin, TransformOrigin } from '../../types'; +import { ReanimatedError } from '../../../errors'; +import type { + NormalizedTransformOrigin, + TransformOrigin, +} from '../../../types'; import { ERROR_MESSAGES, processTransformOrigin } from '../transformOrigin'; describe(processTransformOrigin, () => { diff --git a/packages/react-native-reanimated/src/common/processors/colors.ts b/packages/react-native-reanimated/src/common/style/processors/colors.ts similarity index 84% rename from packages/react-native-reanimated/src/common/processors/colors.ts rename to packages/react-native-reanimated/src/common/style/processors/colors.ts index cd0c2d8a6e2d..1ffe02bf974e 100644 --- a/packages/react-native-reanimated/src/common/processors/colors.ts +++ b/packages/react-native-reanimated/src/common/style/processors/colors.ts @@ -5,15 +5,11 @@ import type { DynamicColorIOS as RNDynamicColorIOS, } from 'react-native'; -import { - ColorProperties, - DynamicColorIOSProperties, - processColorInitially, -} from '../../Colors'; -import type { StyleProps } from '../../commonTypes'; -import { IS_ANDROID, IS_IOS } from '../constants'; -import { ReanimatedError } from '../errors'; -import type { Maybe } from '../types'; +import { ColorProperties, processColorInitially } from '../../../Colors'; +import type { StyleProps } from '../../../commonTypes'; +import { IS_ANDROID, IS_IOS } from '../../constants'; +import { ReanimatedError } from '../../errors'; +import type { Maybe } from '../../types'; type DynamicColorIOSTuple = Parameters[0]; @@ -37,6 +33,16 @@ export function PlatformColor(...names: Array): PlatformColorValue { return mapped as PlatformColorValue; } +/* copied from: + * https://github.com/facebook/react-native/blob/v0.81.0/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypesIOS.d.ts + */ +const DynamicColorIOSProperties = [ + 'light', + 'dark', + 'highContrastLight', + 'highContrastDark', +] as const; + export function DynamicColorIOS( tuple: DynamicColorIOSTuple ): DynamicColorValue { diff --git a/packages/react-native-reanimated/src/css/native/style/processors/font.ts b/packages/react-native-reanimated/src/common/style/processors/font.ts similarity index 74% rename from packages/react-native-reanimated/src/css/native/style/processors/font.ts rename to packages/react-native-reanimated/src/common/style/processors/font.ts index 818d7fae826c..70c057f020a9 100644 --- a/packages/react-native-reanimated/src/css/native/style/processors/font.ts +++ b/packages/react-native-reanimated/src/common/style/processors/font.ts @@ -1,7 +1,7 @@ 'use strict'; -import type { ValueProcessor } from '../../../../common'; -import { ReanimatedError } from '../../../../common'; -import { FONT_WEIGHT_MAPPINGS } from '../../../constants'; +import { FONT_WEIGHT_MAPPINGS } from '../../constants'; +import { ReanimatedError } from '../../errors'; +import type { ValueProcessor } from '../../types'; const ERROR_MESSAGES = { invalidFontWeight: (weight: string | number) => diff --git a/packages/react-native-reanimated/src/css/native/style/processors/index.ts b/packages/react-native-reanimated/src/common/style/processors/index.ts similarity index 61% rename from packages/react-native-reanimated/src/css/native/style/processors/index.ts rename to packages/react-native-reanimated/src/common/style/processors/index.ts index 1e09a398be16..a3cc1e07ab03 100644 --- a/packages/react-native-reanimated/src/css/native/style/processors/index.ts +++ b/packages/react-native-reanimated/src/common/style/processors/index.ts @@ -1,5 +1,12 @@ 'use strict'; +export { + DynamicColorIOS, + PlatformColor, + processColor, + processColorsInProps, +} from './colors'; export { processFontWeight } from './font'; export { processInset, processInsetBlock, processInsetInline } from './insets'; export { processAspectRatio, processGap } from './others'; +export { processBoxShadowNative } from './shadows'; export { processTransform } from './transform'; diff --git a/packages/react-native-reanimated/src/css/native/style/processors/insets.ts b/packages/react-native-reanimated/src/common/style/processors/insets.ts similarity index 89% rename from packages/react-native-reanimated/src/css/native/style/processors/insets.ts rename to packages/react-native-reanimated/src/common/style/processors/insets.ts index ba1c60f6642f..8dbc9810af2d 100644 --- a/packages/react-native-reanimated/src/css/native/style/processors/insets.ts +++ b/packages/react-native-reanimated/src/common/style/processors/insets.ts @@ -1,7 +1,7 @@ 'use strict'; import type { DimensionValue } from 'react-native'; -import type { ValueProcessor } from '../../../../common'; +import type { ValueProcessor } from '../../types'; type InsetProcessor = ValueProcessor< DimensionValue, diff --git a/packages/react-native-reanimated/src/css/native/style/processors/others.ts b/packages/react-native-reanimated/src/common/style/processors/others.ts similarity index 88% rename from packages/react-native-reanimated/src/css/native/style/processors/others.ts rename to packages/react-native-reanimated/src/common/style/processors/others.ts index 8417b05edbfc..8e7a0ae240f0 100644 --- a/packages/react-native-reanimated/src/css/native/style/processors/others.ts +++ b/packages/react-native-reanimated/src/common/style/processors/others.ts @@ -1,6 +1,6 @@ 'use strict'; -import type { ValueProcessor } from '../../../../common'; -import { ReanimatedError } from '../../../../common'; +import { ReanimatedError } from '../../errors'; +import type { ValueProcessor } from '../../types'; export const ERROR_MESSAGES = { unsupportedAspectRatio: (ratio: string | number) => diff --git a/packages/react-native-reanimated/src/common/processors/shadows.ts b/packages/react-native-reanimated/src/common/style/processors/shadows.ts similarity index 67% rename from packages/react-native-reanimated/src/common/processors/shadows.ts rename to packages/react-native-reanimated/src/common/style/processors/shadows.ts index b6c8084bff63..828d77dd9608 100644 --- a/packages/react-native-reanimated/src/common/processors/shadows.ts +++ b/packages/react-native-reanimated/src/common/style/processors/shadows.ts @@ -2,10 +2,10 @@ 'worklet'; import type { BoxShadowValue } from 'react-native'; -import { IS_ANDROID } from '../constants'; -import { ReanimatedError } from '../errors'; -import type { ValueProcessor } from '../types'; -import { maybeAddSuffix, parseBoxShadowString } from '../utils'; +import { IS_ANDROID } from '../../constants'; +import { ReanimatedError } from '../../errors'; +import type { ValueProcessor } from '../../types'; +import { parseBoxShadowString } from '../../utils'; import { processColor } from './colors'; const ERROR_MESSAGES = { @@ -75,34 +75,3 @@ export const processBoxShadowNative: ValueProcessor< }; }); }; - -export const processBoxShadowWeb: ValueProcessor< - string | ReadonlyArray, - string -> = (value) => { - const parsedShadow = - typeof value === 'string' ? parseBoxShadowString(value) : value; - - return parsedShadow - .map( - ({ - offsetX, - offsetY, - color = '#000', - blurRadius = '', - spreadDistance = '', - inset = '', - }) => - [ - maybeAddSuffix(offsetX, 'px'), - maybeAddSuffix(offsetY, 'px'), - maybeAddSuffix(blurRadius, 'px'), - maybeAddSuffix(spreadDistance, 'px'), - color, - inset ? 'inset' : '', - ] - .filter(Boolean) - .join(' ') - ) - .join(', '); -}; diff --git a/packages/react-native-reanimated/src/css/native/style/processors/transform.ts b/packages/react-native-reanimated/src/common/style/processors/transform.ts similarity index 96% rename from packages/react-native-reanimated/src/css/native/style/processors/transform.ts rename to packages/react-native-reanimated/src/common/style/processors/transform.ts index 09c2f9d07cc8..60905df9f5c3 100644 --- a/packages/react-native-reanimated/src/css/native/style/processors/transform.ts +++ b/packages/react-native-reanimated/src/common/style/processors/transform.ts @@ -1,49 +1,14 @@ 'use strict'; -import type { ValueProcessor } from '../../../../common'; -import { ReanimatedError } from '../../../../common'; -import type { TransformsArray } from '../../../types'; -import { isAngle, isNumber, isNumberArray, isPercentage } from '../../../utils'; +'worklet'; +import { ReanimatedError } from '../../errors'; +import type { TransformsArray, ValueProcessor } from '../../types'; +import { isAngle, isNumber, isNumberArray, isPercentage } from '../../utils'; export const ERROR_MESSAGES = { invalidTransform: (transform: string) => `Invalid transform property: ${transform}`, }; -const parseTransformProperty = (transform: string): TransformsArray => { - const [key, valueString] = transform.split(/\(\s*/); - const values = parseValues(valueString.replace(/\)$/g, '')); - - switch (key) { - case 'translate': - return parseTranslate(values); - case 'translateX': - return parseTranslateX(values); - case 'translateY': - return parseTranslateY(values); - case 'scale': - return parseScale(values); - case 'scaleX': - return parseScaleX(values); - case 'scaleY': - return parseScaleY(values); - case 'rotate': - case 'rotateX': - case 'rotateY': - case 'rotateZ': - return parseRotate(key, values); - case 'skew': - return parseSkew(values); - case 'skewX': - return parseSkewX(values); - case 'skewY': - return parseSkewY(values); - case 'matrix': - return parseMatrix(values); - default: - return []; - } -}; - function parseValues(valueString: string): (string | number)[] { return valueString.split(',').map((value) => { const trimmedValue = value.trim(); @@ -55,16 +20,6 @@ function parseValues(valueString: string): (string | number)[] { }); } -function parseTranslate(values: (number | string)[]): TransformsArray { - if (values.length > 2) { - return []; - } - const result = parseTranslateX([values[0]]).concat( - parseTranslateY([values[1] ?? values[0]]) - ); - return result.length === 2 ? result : []; -} - function parseTranslateX(values: (number | string)[]): TransformsArray { return values.length === 1 && (isNumber(values[0]) || isPercentage(values[0])) ? [{ translateX: values[0] }] @@ -77,15 +32,12 @@ function parseTranslateY(values: (number | string)[]): TransformsArray { : []; } -function parseScale(values: (number | string)[]): TransformsArray { +function parseTranslate(values: (number | string)[]): TransformsArray { if (values.length > 2) { return []; } - if (values.length === 1) { - return isNumber(values[0]) ? [{ scale: values[0] }] : []; - } - const result = parseScaleX([values[0]]).concat( - parseScaleY([values[1] ?? values[0]]) + const result = parseTranslateX([values[0]]).concat( + parseTranslateY([values[1] ?? values[0]]) ); return result.length === 2 ? result : []; } @@ -102,6 +54,19 @@ function parseScaleY(values: (number | string)[]): TransformsArray { : []; } +function parseScale(values: (number | string)[]): TransformsArray { + if (values.length > 2) { + return []; + } + if (values.length === 1) { + return isNumber(values[0]) ? [{ scale: values[0] }] : []; + } + const result = parseScaleX([values[0]]).concat( + parseScaleY([values[1] ?? values[0]]) + ); + return result.length === 2 ? result : []; +} + function parseRotate( key: string, values: (string | number)[] @@ -113,16 +78,6 @@ function parseRotate( : []; } -function parseSkew(values: (number | string)[]): TransformsArray { - if (values.length > 2) { - return []; - } - const result = parseSkewX([values[0]]).concat( - parseSkewY([values[1] ?? values[0]]) - ); - return result.length === 2 ? result : []; -} - function parseSkewX(values: (number | string)[]): TransformsArray { return values.length === 1 && (isAngle(values[0]) || values[0] === 0) ? [{ skewX: values[0] === 0 ? '0deg' : values[0] }] @@ -135,6 +90,16 @@ function parseSkewY(values: (number | string)[]): TransformsArray { : []; } +function parseSkew(values: (number | string)[]): TransformsArray { + if (values.length > 2) { + return []; + } + const result = parseSkewX([values[0]]).concat( + parseSkewY([values[1] ?? values[0]]) + ); + return result.length === 2 ? result : []; +} + function parseMatrix(values: (number | string)[]): TransformsArray { let matrixValues: number[] = []; @@ -155,6 +120,41 @@ function parseMatrix(values: (number | string)[]): TransformsArray { return matrixValues.length > 0 ? [{ matrix: matrixValues }] : []; } +const parseTransformProperty = (transform: string): TransformsArray => { + const [key, valueString] = transform.split(/\(\s*/); + const values = parseValues(valueString.replace(/\)$/g, '')); + + switch (key) { + case 'translate': + return parseTranslate(values); + case 'translateX': + return parseTranslateX(values); + case 'translateY': + return parseTranslateY(values); + case 'scale': + return parseScale(values); + case 'scaleX': + return parseScaleX(values); + case 'scaleY': + return parseScaleY(values); + case 'rotate': + case 'rotateX': + case 'rotateY': + case 'rotateZ': + return parseRotate(key, values); + case 'skew': + return parseSkew(values); + case 'skewX': + return parseSkewX(values); + case 'skewY': + return parseSkewY(values); + case 'matrix': + return parseMatrix(values); + default: + return []; + } +}; + export const processTransform: ValueProcessor = ( value ) => { diff --git a/packages/react-native-reanimated/src/common/processors/transformOrigin.ts b/packages/react-native-reanimated/src/common/style/processors/transformOrigin.ts similarity index 96% rename from packages/react-native-reanimated/src/common/processors/transformOrigin.ts rename to packages/react-native-reanimated/src/common/style/processors/transformOrigin.ts index b4b48292c389..40a50aa20207 100644 --- a/packages/react-native-reanimated/src/common/processors/transformOrigin.ts +++ b/packages/react-native-reanimated/src/common/style/processors/transformOrigin.ts @@ -1,7 +1,7 @@ 'use strict'; 'worklet'; -import { ReanimatedError } from '../errors'; -import type { TransformOrigin, ValueProcessor } from '../types'; +import { ReanimatedError } from '../../errors'; +import type { TransformOrigin, ValueProcessor } from '../../types'; type Axis = 'x' | 'y' | 'z'; type ConvertedValue = `${number}%` | number; diff --git a/packages/react-native-reanimated/src/css/native/style/types.ts b/packages/react-native-reanimated/src/common/style/types.ts similarity index 89% rename from packages/react-native-reanimated/src/css/native/style/types.ts rename to packages/react-native-reanimated/src/common/style/types.ts index 8b63b41d07d2..f5e1896b15ac 100644 --- a/packages/react-native-reanimated/src/css/native/style/types.ts +++ b/packages/react-native-reanimated/src/common/style/types.ts @@ -1,6 +1,5 @@ 'use strict'; -import type { AnyRecord, ValueProcessor } from '../../../common'; -import type { ConfigPropertyAlias } from '../../types'; +import type { AnyRecord, ConfigPropertyAlias, ValueProcessor } from '../types'; export type StyleBuildMiddleware

= (props: P) => P; diff --git a/packages/react-native-reanimated/src/common/types/config.ts b/packages/react-native-reanimated/src/common/types/config.ts new file mode 100644 index 000000000000..4eec742eb43f --- /dev/null +++ b/packages/react-native-reanimated/src/common/types/config.ts @@ -0,0 +1,11 @@ +'use strict'; + +import type { AnyRecord, Maybe, NonMutable } from './helpers'; + +export type ValueProcessor = ( + value: NonMutable +) => Maybe | Record; + +export type ConfigPropertyAlias

= { + as: keyof P; +}; diff --git a/packages/react-native-reanimated/src/common/types.ts b/packages/react-native-reanimated/src/common/types/helpers.ts similarity index 50% rename from packages/react-native-reanimated/src/common/types.ts rename to packages/react-native-reanimated/src/common/types/helpers.ts index 43445afa5826..6a924c7633d0 100644 --- a/packages/react-native-reanimated/src/common/types.ts +++ b/packages/react-native-reanimated/src/common/types/helpers.ts @@ -1,7 +1,7 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ 'use strict'; import type { ComponentType } from 'react'; -import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'; export type Maybe = T | null | undefined; @@ -12,32 +12,20 @@ export type Maybe = T | null | undefined; */ export type NonMutable = T extends object ? Readonly : T; -/* eslint-disable @typescript-eslint/no-explicit-any */ export type AnyRecord = Record; -export type ValueProcessor = ( - value: NonMutable -) => Maybe | Record; - -export type TransformOrigin = string | Array; +export type AnyComponent = ComponentType; -export type NormalizedTransformOrigin = [ - `${number}%` | number, - `${number}%` | number, - number, -]; +type Simplify = { + [K in keyof T]: T[K]; +} & {}; -type DeprecatedProps = - | 'transformMatrix' - | 'rotation' - | 'scaleX' - | 'scaleY' - | 'translateX' - | 'translateY'; +type ConvertValueToArray = Simplify<(T extends any[] ? T[number] : T)[]>; -export type PlainStyle = Omit< - ViewStyle & TextStyle & ImageStyle, - DeprecatedProps ->; +export type ConvertValuesToArrays = { + [K in keyof T]-?: ConvertValueToArray>; +}; -export type AnyComponent = ComponentType; +export type ConvertValuesToArraysWithUndefined = { + [K in keyof T]-?: ConvertValueToArray; +}; diff --git a/packages/react-native-reanimated/src/common/types/index.ts b/packages/react-native-reanimated/src/common/types/index.ts new file mode 100644 index 000000000000..524c76643a09 --- /dev/null +++ b/packages/react-native-reanimated/src/common/types/index.ts @@ -0,0 +1,5 @@ +'use strict'; + +export type * from './config'; +export type * from './helpers'; +export type * from './style'; diff --git a/packages/react-native-reanimated/src/common/types/style.ts b/packages/react-native-reanimated/src/common/types/style.ts new file mode 100644 index 000000000000..f1b854c88d36 --- /dev/null +++ b/packages/react-native-reanimated/src/common/types/style.ts @@ -0,0 +1,34 @@ +'use strict'; + +import type { + ImageStyle, + TextStyle, + TransformsStyle, + ViewStyle, +} from 'react-native'; + +export type TransformOrigin = string | Array; + +export type NormalizedTransformOrigin = [ + `${number}%` | number, + `${number}%` | number, + number, +]; + +type DeprecatedProps = + | 'transformMatrix' + | 'rotation' + | 'scaleX' + | 'scaleY' + | 'translateX' + | 'translateY'; + +export type PlainStyle = Omit< + ViewStyle & TextStyle & ImageStyle, + DeprecatedProps +>; + +export type TransformsArray = Exclude< + TransformsStyle['transform'], + string | undefined +>; diff --git a/packages/react-native-reanimated/src/css/utils/conversions.ts b/packages/react-native-reanimated/src/common/utils/conversions.ts similarity index 86% rename from packages/react-native-reanimated/src/css/utils/conversions.ts rename to packages/react-native-reanimated/src/common/utils/conversions.ts index c753f458b134..ef1aceeffbce 100644 --- a/packages/react-native-reanimated/src/css/utils/conversions.ts +++ b/packages/react-native-reanimated/src/common/utils/conversions.ts @@ -1,6 +1,5 @@ 'use strict'; -import type { AnyRecord } from '../../common'; -import type { ConvertValuesToArrays } from '../types'; +import type { AnyRecord, ConvertValuesToArrays } from '../types'; export function convertPropertyToArray(value: T | undefined): T[] { return value !== undefined ? (Array.isArray(value) ? value : [value]) : []; diff --git a/packages/react-native-reanimated/src/common/utils/guards.ts b/packages/react-native-reanimated/src/common/utils/guards.ts index 121859d82888..35598e57a831 100644 --- a/packages/react-native-reanimated/src/common/utils/guards.ts +++ b/packages/react-native-reanimated/src/common/utils/guards.ts @@ -1,6 +1,42 @@ 'use strict'; 'worklet'; +import type { AnyRecord, ConfigPropertyAlias } from '../types'; + +export const isDefined = (value: T): value is NonNullable => + value !== undefined && value !== null; + +export const isAngle = ( + value: string | number +): value is `${number}deg` | `${number}rad` => + typeof value === 'string' && /^-?\d+(\.\d+)?(deg|rad)$/.test(value); + +export const isNumber = (value: unknown): value is number => + typeof value === 'number' && !isNaN(value); + +export const isNumberArray = (value: unknown): value is number[] => + Array.isArray(value) && value.every(isNumber); export const isLength = (value: string) => { return value.endsWith('px') || !isNaN(Number(value)); }; + +export const isPercentage = (value: unknown): value is `${number}%` => + typeof value === 'string' && /^-?\d+(\.\d+)?%$/.test(value); + +export const isRecord = ( + value: unknown +): value is T => + typeof value === 'object' && value !== null && !Array.isArray(value); + +export const hasProp =

( + obj: P, + key: K +): obj is P & Record => key in obj; + +export const isConfigPropertyAlias =

( + value: unknown +): value is ConfigPropertyAlias

=> + !!value && + typeof value === 'object' && + 'as' in value && + typeof value.as === 'string'; diff --git a/packages/react-native-reanimated/src/common/utils/index.ts b/packages/react-native-reanimated/src/common/utils/index.ts index 37aaa625eefe..3297658076d6 100644 --- a/packages/react-native-reanimated/src/common/utils/index.ts +++ b/packages/react-native-reanimated/src/common/utils/index.ts @@ -1,4 +1,5 @@ 'use strict'; +export * from './conversions'; export * from './guards'; export * from './parsers'; export * from './suffix'; diff --git a/packages/react-native-reanimated/src/common/web/index.ts b/packages/react-native-reanimated/src/common/web/index.ts new file mode 100644 index 000000000000..55881ca8ab2e --- /dev/null +++ b/packages/react-native-reanimated/src/common/web/index.ts @@ -0,0 +1,2 @@ +'use strict'; +export * from './style'; diff --git a/packages/react-native-reanimated/src/css/web/style/builderFactories.ts b/packages/react-native-reanimated/src/common/web/style/builderFactories.ts similarity index 98% rename from packages/react-native-reanimated/src/css/web/style/builderFactories.ts rename to packages/react-native-reanimated/src/common/web/style/builderFactories.ts index 238bf29307c5..086d50165956 100644 --- a/packages/react-native-reanimated/src/css/web/style/builderFactories.ts +++ b/packages/react-native-reanimated/src/common/web/style/builderFactories.ts @@ -1,9 +1,8 @@ 'use strict'; - -import type { AnyRecord } from '../../../common'; -import { hasSuffix } from '../../../common'; +import type { AnyRecord } from '../../types'; import { hasProp, + hasSuffix, isConfigPropertyAlias, isDefined, isRecord, diff --git a/packages/react-native-reanimated/src/css/web/style/builders/index.ts b/packages/react-native-reanimated/src/common/web/style/builders/index.ts similarity index 57% rename from packages/react-native-reanimated/src/css/web/style/builders/index.ts rename to packages/react-native-reanimated/src/common/web/style/builders/index.ts index 8e7a1af2d8b0..5a52af801d56 100644 --- a/packages/react-native-reanimated/src/css/web/style/builders/index.ts +++ b/packages/react-native-reanimated/src/common/web/style/builders/index.ts @@ -1,2 +1,3 @@ 'use strict'; export * from './shadows'; +export * from './transforms'; diff --git a/packages/react-native-reanimated/src/css/web/style/builders/shadows.ts b/packages/react-native-reanimated/src/common/web/style/builders/shadows.ts similarity index 90% rename from packages/react-native-reanimated/src/css/web/style/builders/shadows.ts rename to packages/react-native-reanimated/src/common/web/style/builders/shadows.ts index 3a0d7c0eec8d..08e42bbe5454 100644 --- a/packages/react-native-reanimated/src/css/web/style/builders/shadows.ts +++ b/packages/react-native-reanimated/src/common/web/style/builders/shadows.ts @@ -1,15 +1,15 @@ 'use strict'; import type { TextStyle, ViewStyle } from 'react-native'; -import type { ValueProcessor } from '../../../../common'; -import { logger } from '../../../../common'; +import { logger } from '../../../logger'; import { opacifyColor } from '../../utils'; import { createRuleBuilder } from '../builderFactories'; import { processColor } from '../processors'; +import type { ValueProcessor } from '../types'; type ShadowOffset = NonNullable; -const processShadowOffset: ValueProcessor = (value) => +const processShadowOffset: ValueProcessor = (value) => `${value.width}px ${value.height}px`; type BoxShadowProps = Pick< diff --git a/packages/react-native-reanimated/src/css/web/style/processors/transforms.ts b/packages/react-native-reanimated/src/common/web/style/builders/transforms.ts similarity index 100% rename from packages/react-native-reanimated/src/css/web/style/processors/transforms.ts rename to packages/react-native-reanimated/src/common/web/style/builders/transforms.ts diff --git a/packages/react-native-reanimated/src/css/web/config.ts b/packages/react-native-reanimated/src/common/web/style/config.ts similarity index 96% rename from packages/react-native-reanimated/src/css/web/config.ts rename to packages/react-native-reanimated/src/common/web/style/config.ts index 6e925d08b2b2..5d2028373469 100644 --- a/packages/react-native-reanimated/src/css/web/config.ts +++ b/packages/react-native-reanimated/src/common/web/style/config.ts @@ -1,9 +1,13 @@ 'use strict'; -import type { PlainStyle } from '../../common'; -import { processBoxShadowWeb } from '../../common'; -import type { StyleBuilderConfig } from './style'; +import type { PlainStyle } from '../../types'; import { boxShadowBuilder, + processTransform, + processTransformOrigin, + textShadowBuilder, +} from './builders'; +import { + processBoxShadowWeb, processColor, processFilter, processFontVariant, @@ -12,10 +16,8 @@ import { processMarginVertical, processPaddingHorizontal, processPaddingVertical, - processTransform, - processTransformOrigin, - textShadowBuilder, -} from './style'; +} from './processors'; +import type { StyleBuilderConfig } from './types'; const colorAttributes = { process: processColor }; diff --git a/packages/react-native-reanimated/src/css/web/style/index.ts b/packages/react-native-reanimated/src/common/web/style/index.ts similarity index 78% rename from packages/react-native-reanimated/src/css/web/style/index.ts rename to packages/react-native-reanimated/src/common/web/style/index.ts index 154e6a019241..c01c059227c3 100644 --- a/packages/react-native-reanimated/src/css/web/style/index.ts +++ b/packages/react-native-reanimated/src/common/web/style/index.ts @@ -1,5 +1,5 @@ 'use strict'; export * from './builderFactories'; export * from './builders'; +export * from './config'; export * from './processors'; -export type * from './types'; diff --git a/packages/react-native-reanimated/src/css/web/style/processors/colors.ts b/packages/react-native-reanimated/src/common/web/style/processors/colors.ts similarity index 100% rename from packages/react-native-reanimated/src/css/web/style/processors/colors.ts rename to packages/react-native-reanimated/src/common/web/style/processors/colors.ts diff --git a/packages/react-native-reanimated/src/css/web/style/processors/filter.ts b/packages/react-native-reanimated/src/common/web/style/processors/filter.ts similarity index 95% rename from packages/react-native-reanimated/src/css/web/style/processors/filter.ts rename to packages/react-native-reanimated/src/common/web/style/processors/filter.ts index 6298c9500cd7..984503c3889d 100644 --- a/packages/react-native-reanimated/src/css/web/style/processors/filter.ts +++ b/packages/react-native-reanimated/src/common/web/style/processors/filter.ts @@ -1,7 +1,7 @@ 'use strict'; import type { FilterFunction } from 'react-native'; -import { maybeAddSuffix } from '../../../../common'; +import { maybeAddSuffix } from '../../../utils'; import type { ValueProcessor } from '../types'; const FILTER_SUFFIXES: Record = { diff --git a/packages/react-native-reanimated/src/css/web/style/processors/font.ts b/packages/react-native-reanimated/src/common/web/style/processors/font.ts similarity index 100% rename from packages/react-native-reanimated/src/css/web/style/processors/font.ts rename to packages/react-native-reanimated/src/common/web/style/processors/font.ts diff --git a/packages/react-native-reanimated/src/css/web/style/processors/index.ts b/packages/react-native-reanimated/src/common/web/style/processors/index.ts similarity index 82% rename from packages/react-native-reanimated/src/css/web/style/processors/index.ts rename to packages/react-native-reanimated/src/common/web/style/processors/index.ts index 470bd01eac19..3627058a364b 100644 --- a/packages/react-native-reanimated/src/css/web/style/processors/index.ts +++ b/packages/react-native-reanimated/src/common/web/style/processors/index.ts @@ -4,4 +4,4 @@ export * from './filter'; export * from './font'; export * from './margins'; export * from './paddings'; -export * from './transforms'; +export * from './shadows'; diff --git a/packages/react-native-reanimated/src/css/web/style/processors/margins.ts b/packages/react-native-reanimated/src/common/web/style/processors/margins.ts similarity index 92% rename from packages/react-native-reanimated/src/css/web/style/processors/margins.ts rename to packages/react-native-reanimated/src/common/web/style/processors/margins.ts index c78d164be191..429cf36c514e 100644 --- a/packages/react-native-reanimated/src/css/web/style/processors/margins.ts +++ b/packages/react-native-reanimated/src/common/web/style/processors/margins.ts @@ -1,8 +1,8 @@ 'use strict'; import type { DimensionValue } from 'react-native'; -import { parseDimensionValue } from '../../utils'; import type { ValueProcessor } from '../types'; +import { parseDimensionValue } from '../utils'; export const processMarginHorizontal: ValueProcessor = ( value diff --git a/packages/react-native-reanimated/src/css/web/style/processors/paddings.ts b/packages/react-native-reanimated/src/common/web/style/processors/paddings.ts similarity index 92% rename from packages/react-native-reanimated/src/css/web/style/processors/paddings.ts rename to packages/react-native-reanimated/src/common/web/style/processors/paddings.ts index 81b5ac714b3c..e524257f6d67 100644 --- a/packages/react-native-reanimated/src/css/web/style/processors/paddings.ts +++ b/packages/react-native-reanimated/src/common/web/style/processors/paddings.ts @@ -1,8 +1,8 @@ 'use strict'; import type { DimensionValue } from 'react-native'; -import { parseDimensionValue } from '../../utils'; import type { ValueProcessor } from '../types'; +import { parseDimensionValue } from '../utils'; export const processPaddingHorizontal: ValueProcessor = ( value diff --git a/packages/react-native-reanimated/src/common/web/style/processors/shadows.ts b/packages/react-native-reanimated/src/common/web/style/processors/shadows.ts new file mode 100644 index 000000000000..08d12d6d1f2a --- /dev/null +++ b/packages/react-native-reanimated/src/common/web/style/processors/shadows.ts @@ -0,0 +1,36 @@ +'use strict'; +import type { BoxShadowValue } from 'react-native'; + +import type { ValueProcessor } from '../../../types'; +import { maybeAddSuffix, parseBoxShadowString } from '../../../utils'; + +export const processBoxShadowWeb: ValueProcessor< + string | ReadonlyArray, + string +> = (value) => { + const parsedShadow = + typeof value === 'string' ? parseBoxShadowString(value) : value; + + return parsedShadow + .map( + ({ + offsetX, + offsetY, + color = '#000', + blurRadius = '', + spreadDistance = '', + inset = '', + }) => + [ + maybeAddSuffix(offsetX, 'px'), + maybeAddSuffix(offsetY, 'px'), + maybeAddSuffix(blurRadius, 'px'), + maybeAddSuffix(spreadDistance, 'px'), + color, + inset ? 'inset' : '', + ] + .filter(Boolean) + .join(' ') + ) + .join(', '); +}; diff --git a/packages/react-native-reanimated/src/css/web/style/types.ts b/packages/react-native-reanimated/src/common/web/style/types.ts similarity index 96% rename from packages/react-native-reanimated/src/css/web/style/types.ts rename to packages/react-native-reanimated/src/common/web/style/types.ts index 0fd3b2bf23bc..fecd29fa97d8 100644 --- a/packages/react-native-reanimated/src/css/web/style/types.ts +++ b/packages/react-native-reanimated/src/common/web/style/types.ts @@ -1,5 +1,5 @@ 'use strict'; -import type { AnyRecord, Maybe, NonMutable } from '../../../common'; +import type { AnyRecord, Maybe, NonMutable } from '../..'; export type ValueProcessor = ( value: NonMutable diff --git a/packages/react-native-reanimated/src/common/web/style/utils.ts b/packages/react-native-reanimated/src/common/web/style/utils.ts new file mode 100644 index 000000000000..46d1ec62b580 --- /dev/null +++ b/packages/react-native-reanimated/src/common/web/style/utils.ts @@ -0,0 +1,18 @@ +'use strict'; +import type { DimensionValue } from 'react-native'; + +import { hasSuffix } from '../../utils'; + +export function parseDimensionValue(value: DimensionValue) { + if (typeof value === 'object') { + return; + } + if (typeof value === 'string') { + return value; + } + if (!hasSuffix(value)) { + return `${value}px`; + } + + return value; +} diff --git a/packages/react-native-reanimated/src/common/web/utils/colors.ts b/packages/react-native-reanimated/src/common/web/utils/colors.ts new file mode 100644 index 000000000000..9c318bf36df5 --- /dev/null +++ b/packages/react-native-reanimated/src/common/web/utils/colors.ts @@ -0,0 +1,29 @@ +'use strict'; +import type { ColorValue } from 'react-native'; + +import { processColorInitially } from '../../../Colors'; + +export function opacifyColor( + color: ColorValue, + opacity: number +): string | null { + 'worklet'; + const colorNumber = processColorInitially(color); + + if (colorNumber === undefined) { + return null; + } + if (colorNumber === null) { + return 'transparent'; + } + + const a = (colorNumber >> 24) & 0xff; + const r = (colorNumber >> 16) & 0xff; + const g = (colorNumber >> 8) & 0xff; + const b = colorNumber & 0xff; + + // Combine the existing alpha with the new opacity + const newAlpha = (a / 255) * opacity; + + return `rgba(${r}, ${g}, ${b}, ${newAlpha})`; +} diff --git a/packages/react-native-reanimated/src/common/web/utils/index.ts b/packages/react-native-reanimated/src/common/web/utils/index.ts new file mode 100644 index 000000000000..3f3476c88e51 --- /dev/null +++ b/packages/react-native-reanimated/src/common/web/utils/index.ts @@ -0,0 +1,2 @@ +'use strict'; +export * from './colors'; diff --git a/packages/react-native-reanimated/src/css/constants/index.ts b/packages/react-native-reanimated/src/css/constants/index.ts index 425d94a8022c..fb92d62609f4 100644 --- a/packages/react-native-reanimated/src/css/constants/index.ts +++ b/packages/react-native-reanimated/src/css/constants/index.ts @@ -1,5 +1,4 @@ 'use strict'; -export * from './font'; export * from './misc'; export * from './regex'; export * from './settings'; diff --git a/packages/react-native-reanimated/src/css/native/__tests__/registry.test.ts b/packages/react-native-reanimated/src/css/native/__tests__/registry.test.ts index 2574bc2d4dd1..dc82813b0d39 100644 --- a/packages/react-native-reanimated/src/css/native/__tests__/registry.test.ts +++ b/packages/react-native-reanimated/src/css/native/__tests__/registry.test.ts @@ -1,11 +1,11 @@ 'use strict'; +import { BASE_PROPERTIES_CONFIG } from '../../../common'; import { ERROR_MESSAGES, getStyleBuilder, hasStyleBuilder, registerComponentStyleBuilder, } from '../registry'; -import { BASE_PROPERTIES_CONFIG } from '../style'; describe('registry', () => { describe('hasStyleBuilder', () => { diff --git a/packages/react-native-reanimated/src/css/native/index.ts b/packages/react-native-reanimated/src/css/native/index.ts index 635acafe229d..22caa3f07256 100644 --- a/packages/react-native-reanimated/src/css/native/index.ts +++ b/packages/react-native-reanimated/src/css/native/index.ts @@ -4,5 +4,4 @@ export * from './managers'; export * from './normalization'; export * from './proxy'; export * from './registry'; -export * from './style'; export type * from './types'; diff --git a/packages/react-native-reanimated/src/css/native/managers/CSSManager.ts b/packages/react-native-reanimated/src/css/native/managers/CSSManager.ts index b7a97f5b6510..6c1b9f4d8bb2 100644 --- a/packages/react-native-reanimated/src/css/native/managers/CSSManager.ts +++ b/packages/react-native-reanimated/src/css/native/managers/CSSManager.ts @@ -1,6 +1,7 @@ 'use strict'; import type { AnyRecord } from '../../../common'; import { ReanimatedError } from '../../../common'; +import type { StyleBuilder } from '../../../common/style'; import type { ShadowNodeWrapper } from '../../../commonTypes'; import type { ViewInfo } from '../../../createAnimatedComponent/commonTypes'; import type { CSSStyle } from '../../types'; @@ -8,7 +9,6 @@ import type { ICSSManager } from '../../types/interfaces'; import { filterCSSAndStyleProperties } from '../../utils'; import { setViewStyle } from '../proxy'; import { getStyleBuilder, hasStyleBuilder } from '../registry'; -import type { StyleBuilder } from '../style'; import CSSAnimationsManager from './CSSAnimationsManager'; import CSSTransitionsManager from './CSSTransitionsManager'; diff --git a/packages/react-native-reanimated/src/css/native/normalization/animation/keyframes.ts b/packages/react-native-reanimated/src/css/native/normalization/animation/keyframes.ts index 8dfabe844a51..12338a5eab9e 100644 --- a/packages/react-native-reanimated/src/css/native/normalization/animation/keyframes.ts +++ b/packages/react-native-reanimated/src/css/native/normalization/animation/keyframes.ts @@ -1,6 +1,6 @@ 'use strict'; -import type { AnyRecord } from '../../../../common'; -import { ReanimatedError } from '../../../../common'; +import type { AnyRecord, StyleBuilder } from '../../../../common'; +import { isDefined, isNumber, ReanimatedError } from '../../../../common'; import type { StyleProps } from '../../../../commonTypes'; import { PERCENTAGE_REGEX } from '../../../constants'; import type { @@ -8,8 +8,6 @@ import type { CSSAnimationKeyframeSelector, CSSAnimationTimingFunction, } from '../../../types'; -import { isDefined, isNumber } from '../../../utils'; -import type { StyleBuilder } from '../../style'; import type { NormalizedCSSAnimationKeyframesConfig, NormalizedCSSKeyframesStyle, diff --git a/packages/react-native-reanimated/src/css/native/normalization/animation/properties.ts b/packages/react-native-reanimated/src/css/native/normalization/animation/properties.ts index e49e4ef9fbd7..5d7d7cf6a896 100644 --- a/packages/react-native-reanimated/src/css/native/normalization/animation/properties.ts +++ b/packages/react-native-reanimated/src/css/native/normalization/animation/properties.ts @@ -1,9 +1,9 @@ 'use strict'; +import { convertPropertiesToArrays } from '../../../../common'; import type { ExistingCSSAnimationProperties, SingleCSSAnimationProperties, } from '../../../types'; -import { convertPropertiesToArrays } from '../../../utils'; export function createSingleCSSAnimationProperties( properties: ExistingCSSAnimationProperties diff --git a/packages/react-native-reanimated/src/css/native/normalization/animation/settings.ts b/packages/react-native-reanimated/src/css/native/normalization/animation/settings.ts index 2fdb60a4426b..7c7f855df6c0 100644 --- a/packages/react-native-reanimated/src/css/native/normalization/animation/settings.ts +++ b/packages/react-native-reanimated/src/css/native/normalization/animation/settings.ts @@ -1,5 +1,5 @@ 'use strict'; -import { ReanimatedError } from '../../../../common'; +import { isNumber, ReanimatedError } from '../../../../common'; import type { CSSAnimationDirection, CSSAnimationFillMode, @@ -7,7 +7,7 @@ import type { CSSAnimationPlayState, SingleCSSAnimationSettings, } from '../../../types'; -import { deepEqual, isNumber } from '../../../utils'; +import { deepEqual } from '../../../utils'; import type { NormalizedSingleCSSAnimationSettings } from '../../types'; import { normalizeDelay, diff --git a/packages/react-native-reanimated/src/css/native/normalization/transition/config.ts b/packages/react-native-reanimated/src/css/native/normalization/transition/config.ts index bbaedb2e7e58..7a014a128eb4 100644 --- a/packages/react-native-reanimated/src/css/native/normalization/transition/config.ts +++ b/packages/react-native-reanimated/src/css/native/normalization/transition/config.ts @@ -1,15 +1,11 @@ 'use strict'; import type { AnyRecord } from '../../../../common'; -import { ReanimatedError } from '../../../../common'; +import { convertPropertyToArray, ReanimatedError } from '../../../../common'; import type { CSSTransitionProperties, CSSTransitionProperty, } from '../../../types'; -import { - areArraysEqual, - convertPropertyToArray, - deepEqual, -} from '../../../utils'; +import { areArraysEqual, deepEqual } from '../../../utils'; import type { NormalizedCSSTransitionConfig, NormalizedCSSTransitionConfigUpdates, diff --git a/packages/react-native-reanimated/src/css/native/normalization/transition/shorthand.ts b/packages/react-native-reanimated/src/css/native/normalization/transition/shorthand.ts index d76dfabaa1de..67b8590b13b7 100644 --- a/packages/react-native-reanimated/src/css/native/normalization/transition/shorthand.ts +++ b/packages/react-native-reanimated/src/css/native/normalization/transition/shorthand.ts @@ -1,15 +1,15 @@ 'use strict'; -import { ReanimatedError } from '../../../../common'; +import type { ConvertValuesToArraysWithUndefined } from '../../../../common'; +import { + camelizeKebabCase, + isPercentage, + ReanimatedError, +} from '../../../../common'; import type { ControlPoint, CSSTimingFunction } from '../../../easing'; import { cubicBezier, linear, steps } from '../../../easing'; -import type { - ConvertValuesToArraysWithUndefined, - CSSTransitionProperties, -} from '../../../types'; +import type { CSSTransitionProperties } from '../../../types'; import { - camelizeKebabCase, isArrayOfLength, - isPercentage, isPredefinedTimingFunction, isStepsModifier, parseSingleTransitionShorthand, diff --git a/packages/react-native-reanimated/src/css/native/registry.ts b/packages/react-native-reanimated/src/css/native/registry.ts index 3844999c0fbf..4a4184b4dcbf 100644 --- a/packages/react-native-reanimated/src/css/native/registry.ts +++ b/packages/react-native-reanimated/src/css/native/registry.ts @@ -1,7 +1,10 @@ 'use strict'; -import { ReanimatedError } from '../../common'; -import type { StyleBuilder, StyleBuilderConfig } from './style'; -import { BASE_PROPERTIES_CONFIG, createStyleBuilder } from './style'; +import type { StyleBuilder, StyleBuilderConfig } from '../../common'; +import { + BASE_PROPERTIES_CONFIG, + createStyleBuilder, + ReanimatedError, +} from '../../common'; export const ERROR_MESSAGES = { styleBuilderNotFound: (componentName: string) => diff --git a/packages/react-native-reanimated/src/css/svg/native/configs/common.ts b/packages/react-native-reanimated/src/css/svg/native/configs/common.ts index e0a373be3125..8b7b804c5616 100644 --- a/packages/react-native-reanimated/src/css/svg/native/configs/common.ts +++ b/packages/react-native-reanimated/src/css/svg/native/configs/common.ts @@ -16,7 +16,7 @@ import type { TransformProps, } from 'react-native-svg'; -import type { StyleBuilderConfig } from '../../../native'; +import type { StyleBuilderConfig } from '../../../../common'; import { convertStringToNumber, processColorSVG, diff --git a/packages/react-native-reanimated/src/css/types/common.ts b/packages/react-native-reanimated/src/css/types/common.ts index 8388fdd4dccf..8ca4794afadf 100644 --- a/packages/react-native-reanimated/src/css/types/common.ts +++ b/packages/react-native-reanimated/src/css/types/common.ts @@ -1,13 +1,7 @@ 'use strict'; -import type { TransformsStyle } from 'react-native'; export type TimeUnit = `${number}s` | `${number}ms` | number; export type Percentage = `${number}%`; export type Point = { x: number; y: number }; - -export type TransformsArray = Exclude< - TransformsStyle['transform'], - string | undefined ->; diff --git a/packages/react-native-reanimated/src/css/types/config.ts b/packages/react-native-reanimated/src/css/types/config.ts deleted file mode 100644 index dc7133828559..000000000000 --- a/packages/react-native-reanimated/src/css/types/config.ts +++ /dev/null @@ -1,6 +0,0 @@ -'use strict'; -import type { AnyRecord } from '../../common'; - -export type ConfigPropertyAlias

= { - as: keyof P; -}; diff --git a/packages/react-native-reanimated/src/css/types/helpers.ts b/packages/react-native-reanimated/src/css/types/helpers.ts index e77e260d0987..71450f9f8b85 100644 --- a/packages/react-native-reanimated/src/css/types/helpers.ts +++ b/packages/react-native-reanimated/src/css/types/helpers.ts @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ 'use strict'; type NoUndef = T extends undefined ? never : T; @@ -9,20 +8,6 @@ export type Repeat< R extends T[] = [], > = R['length'] extends N ? R : Repeat; -type Simplify = { - [K in keyof T]: T[K]; -} & {}; - -type ConvertValueToArray = Simplify<(T extends any[] ? T[number] : T)[]>; - -export type ConvertValuesToArrays = { - [K in keyof T]-?: ConvertValueToArray>; -}; - -export type ConvertValuesToArraysWithUndefined = { - [K in keyof T]-?: ConvertValueToArray; -}; - export type AddArrayPropertyType = T | T[]; export type AddArrayPropertyTypes = { diff --git a/packages/react-native-reanimated/src/css/types/index.ts b/packages/react-native-reanimated/src/css/types/index.ts index 93c9eb0aa7ad..e1bff415fb66 100644 --- a/packages/react-native-reanimated/src/css/types/index.ts +++ b/packages/react-native-reanimated/src/css/types/index.ts @@ -1,11 +1,9 @@ 'use strict'; - import type { CSSAnimationProp } from './animation'; import type { CSSTransitionProp } from './transition'; export type * from './animation'; export type * from './common'; -export type * from './config'; export type * from './helpers'; export type * from './interfaces'; export type * from './props'; diff --git a/packages/react-native-reanimated/src/css/utils/guards.ts b/packages/react-native-reanimated/src/css/utils/guards.ts index cf8ce5a1d151..40948b31831e 100644 --- a/packages/react-native-reanimated/src/css/utils/guards.ts +++ b/packages/react-native-reanimated/src/css/utils/guards.ts @@ -1,5 +1,5 @@ 'use strict'; -import type { AnyRecord } from '../../common'; +import { isNumber, isPercentage } from '../../common'; import { ANIMATION_PROPS, TRANSITION_PROPS, @@ -17,7 +17,6 @@ import type { Repeat, TimeUnit, } from '../types'; -import type { ConfigPropertyAlias } from '../types/config'; const ANIMATION_PROPS_SET = new Set(ANIMATION_PROPS); const TRANSITION_PROPS_SET = new Set(TRANSITION_PROPS); @@ -57,31 +56,9 @@ export const isTimeUnit = (value: unknown): value is TimeUnit => typeof value === 'string' && (/^-?(\d+)?(\.\d+)?(ms|s)$/.test(value) || value === '0'); -export const isNumber = (value: unknown): value is number => - typeof value === 'number' && !isNaN(value); - -export const isPercentage = (value: unknown): value is `${number}%` => - typeof value === 'string' && /^-?\d+(\.\d+)?%$/.test(value); - export const isLength = (value: unknown): value is `${number}%` | number => isNumber(value) || isPercentage(value); -export const isAngle = ( - value: string | number -): value is `${number}deg` | `${number}rad` => - typeof value === 'string' && /^-?\d+(\.\d+)?(deg|rad)$/.test(value); - -export const isDefined = (value: T): value is NonNullable => - value !== undefined && value !== null; - -export const isRecord = ( - value: unknown -): value is T => - typeof value === 'object' && value !== null && !Array.isArray(value); - -export const isNumberArray = (value: unknown): value is number[] => - Array.isArray(value) && value.every(isNumber); - export const isArrayOfLength = ( value: T[], length: L @@ -94,16 +71,3 @@ export const isCSSKeyframesObject = ( export const isCSSKeyframesRule = (value: object): value is CSSKeyframesRule => typeof value === 'object' && 'cssRules' in value && 'cssText' in value; - -export const isConfigPropertyAlias =

( - value: unknown -): value is ConfigPropertyAlias

=> - !!value && - typeof value === 'object' && - 'as' in value && - typeof value.as === 'string'; - -export const hasProp =

( - obj: P, - key: K -): obj is P & Record => key in obj; diff --git a/packages/react-native-reanimated/src/css/utils/index.ts b/packages/react-native-reanimated/src/css/utils/index.ts index a2f4be763fa8..4e08ac5b776b 100644 --- a/packages/react-native-reanimated/src/css/utils/index.ts +++ b/packages/react-native-reanimated/src/css/utils/index.ts @@ -1,5 +1,4 @@ 'use strict'; -export * from './conversions'; export * from './equality'; export * from './guards'; export * from './parsers'; diff --git a/packages/react-native-reanimated/src/css/web/animationParser.ts b/packages/react-native-reanimated/src/css/web/animationParser.ts index 770e43181f75..a4573bf59b1d 100644 --- a/packages/react-native-reanimated/src/css/web/animationParser.ts +++ b/packages/react-native-reanimated/src/css/web/animationParser.ts @@ -1,12 +1,11 @@ 'use strict'; import type { PlainStyle } from '../../common'; import { hasSuffix } from '../../common'; +import { createStyleBuilder, PROPERTIES_CONFIG } from '../../common/web'; import type { CSSAnimationKeyframeBlock, CSSAnimationKeyframes, } from '../types'; -import { PROPERTIES_CONFIG } from './config'; -import { createStyleBuilder } from './style'; import { parseTimingFunction } from './utils'; const styleBuilder = createStyleBuilder(PROPERTIES_CONFIG); diff --git a/packages/react-native-reanimated/src/css/web/managers/CSSAnimationsManager.ts b/packages/react-native-reanimated/src/css/web/managers/CSSAnimationsManager.ts index 7c517708df40..6bfb11289289 100644 --- a/packages/react-native-reanimated/src/css/web/managers/CSSAnimationsManager.ts +++ b/packages/react-native-reanimated/src/css/web/managers/CSSAnimationsManager.ts @@ -1,13 +1,16 @@ 'use strict'; +import { + convertPropertiesToArrays, + type ConvertValuesToArrays, + kebabizeCamelCase, +} from '../../../common'; import type { ReanimatedHTMLElement } from '../../../ReanimatedModule/js-reanimated'; import type { - ConvertValuesToArrays, CSSAnimationKeyframes, CSSAnimationSettings, ExistingCSSAnimationProperties, ICSSAnimationsManager, } from '../../types'; -import { convertPropertiesToArrays, kebabizeCamelCase } from '../../utils'; import { processKeyframeDefinitions } from '../animationParser'; import { configureWebCSSAnimations, diff --git a/packages/react-native-reanimated/src/css/web/managers/CSSTransitionsManager.ts b/packages/react-native-reanimated/src/css/web/managers/CSSTransitionsManager.ts index 6461c63a381e..bff50ee66921 100644 --- a/packages/react-native-reanimated/src/css/web/managers/CSSTransitionsManager.ts +++ b/packages/react-native-reanimated/src/css/web/managers/CSSTransitionsManager.ts @@ -1,10 +1,10 @@ 'use strict'; +import { kebabizeCamelCase } from '../../../common'; import type { ReanimatedHTMLElement } from '../../../ReanimatedModule/js-reanimated'; import type { CSSTransitionProperties, ICSSTransitionsManager, } from '../../types'; -import { kebabizeCamelCase } from '../../utils'; import { normalizeCSSTransitionProperties } from '../normalization'; import { maybeAddSuffixes, parseTimingFunction } from '../utils'; diff --git a/packages/react-native-reanimated/src/css/web/normalization/transition.ts b/packages/react-native-reanimated/src/css/web/normalization/transition.ts index 94f1489df66d..f78d8af2bf48 100644 --- a/packages/react-native-reanimated/src/css/web/normalization/transition.ts +++ b/packages/react-native-reanimated/src/css/web/normalization/transition.ts @@ -1,11 +1,7 @@ 'use strict'; -import type { AnyRecord } from '../../../common'; +import { type AnyRecord, convertPropertyToArray } from '../../../common'; import type { CSSTransitionProp, CSSTransitionProperties } from '../../types'; -import { - convertPropertyToArray, - parseSingleTransitionShorthand, - splitByComma, -} from '../../utils'; +import { parseSingleTransitionShorthand, splitByComma } from '../../utils'; type ExpandedCSSTransitionConfigProperties = Record< Exclude, diff --git a/packages/react-native-reanimated/src/css/web/utils.ts b/packages/react-native-reanimated/src/css/web/utils.ts index 4d4c5212fb3a..10d31d29b47e 100644 --- a/packages/react-native-reanimated/src/css/web/utils.ts +++ b/packages/react-native-reanimated/src/css/web/utils.ts @@ -1,16 +1,13 @@ 'use strict'; -import type { ColorValue, DimensionValue } from 'react-native'; - +import type { ConvertValuesToArrays } from '../../common'; import { - hasSuffix, + kebabizeCamelCase, maybeAddSuffix, - processColor, ReanimatedError, } from '../../common'; import type { ParametrizedTimingFunction } from '../easing'; import { CubicBezierEasing, LinearEasing, StepsEasing } from '../easing'; -import type { AddArrayPropertyType, ConvertValuesToArrays } from '../types'; -import { kebabizeCamelCase } from '../utils'; +import type { AddArrayPropertyType } from '../types'; export function maybeAddSuffixes( object: ConvertValuesToArrays, @@ -57,37 +54,3 @@ export function parseTimingFunction( return easingMapper(timingFunction); } - -export function parseDimensionValue(value: DimensionValue) { - if (typeof value === 'object') { - return; - } - if (typeof value === 'string') { - return value; - } - if (!hasSuffix(value)) { - return `${value}px`; - } - - return value; -} - -export function opacifyColor( - color: ColorValue, - opacity: number -): string | null { - const colorNumber = processColor(color); - if (colorNumber == null) { - return null; - } - - const a = (colorNumber >> 24) & 0xff; - const r = (colorNumber >> 16) & 0xff; - const g = (colorNumber >> 8) & 0xff; - const b = colorNumber & 0xff; - - // Combine the existing alpha with the new opacity - const newAlpha = (a / 255) * opacity; - - return `rgba(${r}, ${g}, ${b}, ${newAlpha})`; -} diff --git a/packages/react-native-reanimated/src/index.ts b/packages/react-native-reanimated/src/index.ts index f3e5bc6f0746..0cd14755727f 100644 --- a/packages/react-native-reanimated/src/index.ts +++ b/packages/react-native-reanimated/src/index.ts @@ -48,12 +48,8 @@ export { } from './animation'; export type { ParsedColorArray } from './Colors'; export { convertToRGBA, isColor } from './Colors'; -export { - DynamicColorIOS, - PlatformColor, - processColor, - ReanimatedLogLevel, -} from './common'; +export { ReanimatedLogLevel } from './common'; +export { DynamicColorIOS, PlatformColor, processColor } from './common'; export type { AnimatableValue, AnimatableValueObject, diff --git a/packages/react-native-reanimated/src/updateProps/updateProps.ts b/packages/react-native-reanimated/src/updateProps/updateProps.ts index 065074881c14..d9f0539133b4 100644 --- a/packages/react-native-reanimated/src/updateProps/updateProps.ts +++ b/packages/react-native-reanimated/src/updateProps/updateProps.ts @@ -6,12 +6,11 @@ import { runOnJS, runOnUI } from 'react-native-worklets'; import { IS_JEST, processBoxShadowNative, - processBoxShadowWeb, processColorsInProps, - processTransformOrigin, ReanimatedError, SHOULD_BE_USE_WEB, } from '../common'; +import { processBoxShadowWeb, processTransformOrigin } from '../common/web'; import type { AnimatedStyle, ShadowNodeWrapper,