diff --git a/packages/render-html/src/helpers/splitBoxModelStyle.ts b/packages/render-html/src/helpers/splitBoxModelStyle.ts new file mode 100644 index 000000000..e96517efa --- /dev/null +++ b/packages/render-html/src/helpers/splitBoxModelStyle.ts @@ -0,0 +1,62 @@ +import { NativeStyleProp } from '../shared-types'; + +/** + * A utility to separate box model styles and other styles. Useful when one wants + * to wrap a text element in a view to benefit from padding vertical, + * borders... etc. + * + * @param styles - The native styles to split. + */ +export default function splitBoxModelStyle({ + backgroundColor, + borderBottomColor, + borderBottomLeftRadius, + borderBottomRightRadius, + borderBottomWidth, + borderLeftColor, + borderLeftWidth, + borderRightColor, + borderRightWidth, + borderStyle, + borderTopColor, + borderTopLeftRadius, + borderTopRightRadius, + borderTopWidth, + paddingBottom, + paddingLeft, + paddingRight, + paddingTop, + marginBottom, + marginLeft, + marginRight, + marginTop, + ...rest +}: NativeStyleProp) { + return { + boxModel: { + backgroundColor, + borderBottomColor, + borderBottomLeftRadius, + borderBottomRightRadius, + borderBottomWidth, + borderLeftColor, + borderLeftWidth, + borderRightColor, + borderRightWidth, + borderStyle, + borderTopColor, + borderTopLeftRadius, + borderTopRightRadius, + borderTopWidth, + paddingBottom, + paddingLeft, + paddingRight, + paddingTop, + marginBottom, + marginLeft, + marginRight, + marginTop + }, + rest + }; +} diff --git a/packages/render-html/src/index.ts b/packages/render-html/src/index.ts index 79352245b..24eda4590 100644 --- a/packages/render-html/src/index.ts +++ b/packages/render-html/src/index.ts @@ -20,3 +20,4 @@ export { default as useTRenderEngine } from './hooks/useTRenderEngine'; export { default as useTTree } from './hooks/useTTree'; export { default as defaultRenderers } from './render/defaultRenderers'; export { default as extendRenderer } from './render/extendRenderer'; +export { default as splitBoxModelStyle } from './helpers/splitBoxModelStyle';