@compositive/foundation/dist/surfaces/SurfaceSpec.js

Compositive framework foundation package.

import { __decorate } from 'tslib';
import { jsxs, jsx } from 'react/jsx-runtime';
import { Memoized, NamedTupleMap } from '@compositive/commons-memoize';
import { isDefined } from '@compositive/commons-predicates';
import { Spec } from '@compositive/commons-spec';
import { freeze, pick } from '@compositive/commons-util';
import { useState, useCallback } from 'react';
import '../color/Color.js';
import { ColorProvider } from '../color/ColorContext.js';
import '../color/colors.js';
import '@compositive/commons-sequences';
import '../color/contrast/getCIECAM02Contrast.js';
import 'chroma-js';
import '../color/contrast/types.js';
import '../color/UniformLightnessColorScale.js';
import '../theming/ComputedTheme.js';
import '../theming/Theme.js';
import '../theming/ThemeContext.js';
import { Style } from '@compositive/primitives';
import '../styling/resolveThemedStyleProperties.js';
import { ThemedStyle } from '../styling/ThemedStyle.js';
import { View } from '../primitives/index.js';
import { SurfaceParts } from './SurfaceParts.js';

const ELEMENT_NAMES = freeze([
    "shape",
    "corners",
    "border",
    "background",
    "shadow",
]);
const ATTRIBUTE_NAMES = freeze([...ELEMENT_NAMES, "foreground"]);
const innerViewBaseStyle = new Style({ flex: 1 });
class SurfaceSpec extends Spec(ATTRIBUTE_NAMES) {
    toComponent() {
        const variantPropKeys = Object.keys(this.variants);
        const hasStateVariant = this.hasVariant("state");
        const SurfaceComponent = ({ children, as, sx, innerSx, onHoverStart, onHoverEnd, onPress, onPressIn, onPressOut, state, ...props }) => {
            const [internalState, setInternalState] = useState(state !== null && state !== void 0 ? state : "default");
            const onHoverStartCallback = useCallback((e) => {
                if (state !== "disabled") {
                    hasStateVariant && setInternalState("hovered");
                    onHoverStart && onHoverStart(e);
                }
            }, [state, onHoverStart, setInternalState]);
            const onHoverEndCallback = useCallback((e) => {
                if (state !== "disabled") {
                    hasStateVariant && setInternalState("default");
                    onHoverEnd && onHoverEnd(e);
                }
            }, [state, onHoverEnd, setInternalState]);
            const onPressInCallback = useCallback((e) => {
                if (state !== "disabled") {
                    hasStateVariant && setInternalState("pressed");
                    onPressIn && onPressIn(e);
                }
            }, [state, onPressIn, setInternalState]);
            const onPressOutCallback = useCallback((e) => {
                if (state !== "disabled") {
                    hasStateVariant && setInternalState("hovered");
                    onPressOut && onPressOut(e);
                }
            }, [state, onPressOut, setInternalState]);
            const propsWithDefaults = {
                ...props,
                state: state !== null && state !== void 0 ? state : internalState,
            };
            const variantProps = pick(propsWithDefaults, variantPropKeys);
            const { parts, foreground } = this._getSurfaceParts(variantProps);
            return (jsxs(View, { sx: ThemedStyle.concat(parts.outerStyles, sx), as: as, onHoverStart: onHoverStartCallback, onHoverEnd: onHoverEndCallback, onPress: onPress, onPressIn: onPressInCallback, onPressOut: onPressOutCallback, children: [parts.prependedComponents, jsx(View, { sx: ThemedStyle.concat(innerViewBaseStyle, parts.innerStyles, innerSx), children: jsx(ColorProvider, { foreground: foreground, children: children }) }), parts.appendedComponents] }));
        };
        return SurfaceComponent;
    }
    _getSurfaceParts(activeVariants) {
        const { foreground, ...attributes } = this.using(activeVariants).attributes;
        let parts = new SurfaceParts();
        let chain = ELEMENT_NAMES.map((name) => attributes[name]).filter(isDefined.test);
        while (chain.length > 0) {
            const element = chain.shift();
            if (element != null)
                [parts, chain] = element.process(parts, chain);
        }
        return { parts, foreground };
    }
}
__decorate([
    Memoized()
], SurfaceSpec.prototype, "toComponent", null);
__decorate([
    Memoized([NamedTupleMap])
], SurfaceSpec.prototype, "_getSurfaceParts", null);

export { SurfaceSpec };
//# sourceMappingURL=SurfaceSpec.js.map