diff --git a/packages/css-processor/src/CSSNativeParseRun.ts b/packages/css-processor/src/CSSNativeParseRun.ts index 5e3baeb0..8e9d08e8 100644 --- a/packages/css-processor/src/CSSNativeParseRun.ts +++ b/packages/css-processor/src/CSSNativeParseRun.ts @@ -2,6 +2,7 @@ import { CSSParseRun } from './CSSParseRun'; import { MixedStyleDeclaration } from './CSSProcessor'; import { CSSPropertiesValidationRegistry } from './CSSPropertiesValidationRegistry'; import { lookupRecord } from './helpers'; +import { ValidatorsType } from './makepropertiesValidators'; import { ExtraNativeTextStyle, NativeDirectionalStyleKeys, @@ -42,9 +43,6 @@ const extraLongViewStyles: Record = { shadowRadius: 'block', tintColor: 'block', transformMatrix: 'block', - translateX: 'block', - translateY: 'block', - borderCurve: 'block', gap: 'block', inset: 'block', insetBlock: 'block', @@ -83,16 +81,16 @@ export class CSSNativeParseRun extends CSSParseRun { private fillProp( key: K, - value: any + value: MixedStyleDeclaration[K] ): void { const validator = this.validationMap.getValidatorForProperty( - String(key) - ) as any; + String(key) as keyof ValidatorsType + ); if (validator && 'normalizeNativeValue' in validator) { const normalizedValue = validator.normalizeNativeValue(value); if (normalizedValue instanceof ShortMergeRequest) { normalizedValue.forEach(([innerKey, innerValue]) => { - this.fillProp(innerKey as any, innerValue); + this.fillProp(innerKey, innerValue); }); } else { // assume longhand merge @@ -123,10 +121,8 @@ export class CSSNativeParseRun extends CSSParseRun { protected fillProcessedProps(): void { const declaration = this.declaration; - for (const key of Object.keys(declaration) as Array< - keyof MixedStyleDeclaration - >) { - this.fillProp(key, this.declaration[key]); + for (const [key, value] of Object.entries(declaration)) { + this.fillProp(key as keyof MixedStyleDeclaration, value); } } } diff --git a/packages/css-processor/src/makepropertiesValidators.ts b/packages/css-processor/src/makepropertiesValidators.ts index 2408b3f4..2eb09799 100644 --- a/packages/css-processor/src/makepropertiesValidators.ts +++ b/packages/css-processor/src/makepropertiesValidators.ts @@ -138,6 +138,46 @@ export default function makepropertiesValidators(config: CSSProcessorConfig) { model: nativeTranslatableBlockRetainModel, propertyName: 'flexFlow' }), + gap: new LongSizeCSSPropertyValidator({ + config, + propertyName: 'gap', + model: nativeTranslatableBlockRetainModel + }), + inset: new LongSizeCSSPropertyValidator({ + config, + propertyName: 'inset', + model: nativeTranslatableBlockRetainModel + }), + insetBlock: new LongSizeCSSPropertyValidator({ + config, + propertyName: 'insetBlock', + model: nativeTranslatableBlockRetainModel + }), + insetInline: new LongSizeCSSPropertyValidator({ + config, + propertyName: 'insetInline', + model: nativeTranslatableBlockRetainModel + }), + marginBlock: new LongSizeCSSPropertyValidator({ + config, + propertyName: 'marginBlock', + model: nativeTranslatableBlockRetainModel + }), + marginInline: new LongSizeCSSPropertyValidator({ + config, + propertyName: 'marginInline', + model: nativeTranslatableBlockRetainModel + }), + paddingBlock: new LongSizeCSSPropertyValidator({ + config, + propertyName: 'paddingBlock', + model: nativeTranslatableBlockRetainModel + }), + paddingInline: new LongSizeCSSPropertyValidator({ + config, + propertyName: 'paddingInline', + model: nativeTranslatableBlockRetainModel + }), font: new ShortFontCSSValidator({ config, model: nativeTranslatableTextFlowModel, diff --git a/packages/css-processor/src/native-types.ts b/packages/css-processor/src/native-types.ts index 051ff183..46a71b6d 100644 --- a/packages/css-processor/src/native-types.ts +++ b/packages/css-processor/src/native-types.ts @@ -45,6 +45,8 @@ export type ExtraNativeUntranslatedLongStyles = Pick< CSSLongNativeUntranslatableBlockPropKey >; +type UnimplementedNativeStyleKeys = 'translateX' | 'translateY' | 'borderCurve'; + /** * Extraneous React Native ViewStyle keys. */ @@ -53,6 +55,7 @@ export type ExtraNativeLongViewStyleKeys = Exclude< | CSSLongNativeBlockPropKey | NativeDirectionalStyleKeys | ExtraNativeShortViewStyleKeys + | UnimplementedNativeStyleKeys >; /** diff --git a/packages/render-html/src/TNodeRenderer.tsx b/packages/render-html/src/TNodeRenderer.tsx index 50a14a1a..88725665 100644 --- a/packages/render-html/src/TNodeRenderer.tsx +++ b/packages/render-html/src/TNodeRenderer.tsx @@ -1,5 +1,11 @@ -import React, { memo, ReactElement } from 'react'; -import { TDefaultRenderer, TNodeRendererProps } from './shared-types'; +import React, { ComponentType, memo, ReactElement } from 'react'; +import { + CustomRendererProps, + InternalRendererProps, + TDefaultRenderer, + TDefaultRendererProps, + TNodeRendererProps +} from './shared-types'; import { useSharedProps } from './context/SharedPropsProvider'; import { TText, @@ -54,18 +60,19 @@ const TNodeRenderer = memo(function MemoizedTNodeRenderer( TNodeChildrenRenderer, sharedProps }; - const renderer = + const renderer = ( tnode.type === 'block' || tnode.type === 'document' ? TDefaultBlockRenderer : tnode.type === 'text' ? TDefaultTextRenderer : tnode.type === 'phrasing' ? TDefaultPhrasingRenderer - : renderEmptyContent; + : renderEmptyContent + ) as TDefaultRenderer; - const { assembledProps, Renderer } = useAssembledCommonProps( + const { assembledProps, Renderer } = useAssembledCommonProps( tnodeProps, - renderer as any + renderer ); switch (tnode.type) { case 'empty': @@ -112,13 +119,20 @@ const TNodeRenderer = memo(function MemoizedTNodeRenderer( } break; } - const renderFn = - tnode.type === 'block' || tnode.type === 'document' - ? renderBlockContent - : renderTextualContent; - return Renderer === null - ? renderFn(assembledProps as any) - : React.createElement(Renderer as any, assembledProps); + + if (Renderer !== null) + return React.createElement( + Renderer as ComponentType< + CustomRendererProps | InternalRendererProps + >, + assembledProps + ); + if (tnode.type === 'block' || tnode.type === 'document') { + return renderBlockContent(assembledProps as TDefaultRendererProps); + } + return renderTextualContent( + assembledProps as TDefaultRendererProps + ); }); export { diff --git a/packages/render-html/src/hooks/useAssembledCommonProps.ts b/packages/render-html/src/hooks/useAssembledCommonProps.ts index c3e697c7..594e63f4 100644 --- a/packages/render-html/src/hooks/useAssembledCommonProps.ts +++ b/packages/render-html/src/hooks/useAssembledCommonProps.ts @@ -24,7 +24,7 @@ export default function useAssembledCommonProps( renderLength, TNodeChildrenRenderer }: TNodeSubRendererProps, - TDefault: TDefaultRenderer | null + TDefault: TDefaultRenderer | null ): { Renderer: CustomRenderer | InternalRenderer | null; assembledProps: CustomRendererProps & @@ -33,7 +33,7 @@ export default function useAssembledCommonProps( } { const { Default, Custom } = useRendererConfig(tnode); const containerProps = useDefaultContainerProps(); - const assembledProps: CustomRendererProps & TDefaultRendererProps = { + const assembledProps = { tnode, propsFromParent, sharedProps, @@ -45,11 +45,12 @@ export default function useAssembledCommonProps( ) as any, type: tnode.type === 'text' || tnode.type === 'phrasing' ? 'text' : 'block', propsForChildren: tnode.tagName ? {} : propsFromParent, - InternalRenderer: Default || (TDefault as any), renderIndex, renderLength, ...containerProps - }; + } as CustomRendererProps & + TDefaultRendererProps & + InternalRendererProps; return { assembledProps, Renderer: Custom || Default || null