Something went wrong. Try again.
experimental web port of the Union style engine + adapters
Something went wrong. Try again.
1.9 kB · 50 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051import type { JSX } from 'solid-js';import { createMemo } from 'solid-js';import { useUnion } from './useUnion.js';import { toPx } from './utils.js';import { styleGroupToUnionStyleProps } from '@union-web/core';
type Props = { children?: JSX.Element; text?: string; richText?: boolean; wrap?: boolean; style?: JSX.CSSProperties;};
export function Text(props: Props) { const { current } = useUnion({ role: 'text' }); const textStyle = createMemo(() => { const u = styleGroupToUnionStyleProps(current()); const s: JSX.CSSProperties = {}; if (u.color) s.color = u.color; if (u.textColor) s.color = u.textColor; if (u.fontSize !== undefined) s['font-size'] = toPx(u.fontSize); if (u.fontWeight !== undefined) s['font-weight'] = typeof u.fontWeight === 'number' ? String(u.fontWeight) : u.fontWeight; if (u.fontFamily) s['font-family'] = u.fontFamily; if (props.wrap === false) { s['white-space'] = 'nowrap'; } else if (props.wrap === true) { s['white-space'] = 'pre-wrap'; s['word-break'] = 'break-word'; } else if (u.textWrapMode) { switch (u.textWrapMode) { case 'no-wrap': s['white-space'] = 'nowrap'; break; case 'wrap': case 'word-wrap': s['white-space'] = 'pre-wrap'; s['word-break'] = 'break-word'; break; case 'wrap-anywhere': s['white-space'] = 'pre-wrap'; s['word-break'] = 'break-all'; break; case 'wrap-at-word-boundary-or-anywhere': s['white-space'] = 'pre-wrap'; s['overflow-wrap'] = 'anywhere'; break; case 'manual-wrap': s['white-space'] = 'pre'; break; } } return { ...s, ...props.style }; }); return ( <div style={textStyle()} innerHTML={props.richText ? (props.text ?? '') : undefined} > {props.richText ? undefined : (props.text ?? props.children)} </div> );}