Something went wrong. Try again.
experimental web port of the Union style engine + adapters
styling theming css solidjs react union kde
Something went wrong. Try again.
2.0 kB · 62 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263import { createSignal, createMemo } from 'solid-js';import type { JSX } from 'solid-js';import { useUnion } from './useUnion.js';import { StyledRect } from './StyledRect.js';import { styleGroupToUnionStyleProps } from '@union-web/core';
type ButtonProps = { children?: JSX.Element; role?: string; disabled?: boolean; onClick?: (e: MouseEvent & { currentTarget: HTMLElement }) => void;};
export function Button(props: ButtonProps) { const [hovered, setHovered] = createSignal(false); const [pressed, setPressed] = createSignal(false);
const state = () => { const parts: string[] = []; if (props.disabled) parts.push('disabled'); if (hovered()) parts.push('hovered'); if (pressed()) parts.push('pressed'); return parts; };
const { current, UnionProvider, insidePositioner } = useUnion({ role: props.role || 'button', state, });
const styleProps = createMemo(() => styleGroupToUnionStyleProps(current()));
const handleKeyDown = (e: KeyboardEvent) => { if (props.disabled) return; if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); props.onClick?.(e as unknown as MouseEvent & { currentTarget: HTMLElement }); } };
return ( <UnionProvider> <StyledRect role="button" tabindex={props.disabled ? -1 : 0} aria-disabled={props.disabled || undefined} insidePositioner={insidePositioner} style={styleProps()} style:cursor={props.disabled ? 'not-allowed' : 'pointer'} style:user-select="none" onClick={props.disabled ? undefined : props.onClick} onKeyDown={handleKeyDown} onPointerEnter={() => !props.disabled && setHovered(true)} onPointerLeave={() => { setHovered(false); setPressed(false); }} onPointerDown={() => !props.disabled && setPressed(true)} onPointerUp={() => !props.disabled && setPressed(false)} > {props.children} </StyledRect> </UnionProvider> );}