@dyst/native/dist/NativeStyleSheet.d.ts

Dynamic Css-in-Js styles engine, based on Emotion for React-Native

import { Interpolation, ReactNativeStyle } from '@emotion/native';
export declare class NativeStyleSheet<TTheme extends Record<string, any> = {}> {
    useTheme: () => TTheme;
    readonly key: string;
    /**
     * Create native dynamic style sheets and link them to functional components
     * using the React hook pattern.
     *
     * @param config - Configuration object
     */
    constructor(config?: NativeStyleSheetConfig<TTheme>);
    /**
     * Indicator for the chain methods to work with `params`.
     *
     * Typescript:
     * Via this method the generic for the `params` object can be specified.
     * The `params` generic had to be excluded from the actual `create()` method
     * due to partial type inference of `TStyles`.
     * https://stackoverflow.com/questions/63678306/typescript-partial-type-inference
     *
     * @public
     */
    withParams<TParams extends Record<string, any> = Record<string, any>>(): {
        create: <TStyles extends NativeStylesData = NativeStylesData>(styles: NativeStylesType<TParams, TStyles, TTheme, true>) => (params: TParams, config?: NativeUseStylesConfigType<TStyles, TTheme> | undefined) => NativeUseStylesReturnType<TStyles, TTheme>;
    };
    /**
     * Indicator for the cain methods to work without `params`.
     *
     * @public
     */
    withoutParams(): {
        create: <TStyles extends NativeStylesData = NativeStylesData>(styles: NativeStylesType<{}, TStyles, TTheme, false>) => (config?: NativeUseStylesConfigType<TStyles, TTheme> | undefined) => NativeUseStylesReturnType<TStyles, TTheme>;
    };
    /**
     * Transfers the (in object shape or emotion style) specified stylesheet
     * into class names that can be accessed via the returned `useStyles()` hook.
     *
     * The returned `useStyles()` hook should be used in React components
     * to access the generated style class names and other utilities
     * for working with emotion-based class names.
     *
     * @public
     * @param styles - Stylesheet to be transferred into class names.
     */
    create<TParams extends Record<string, any> = Record<string, any>, TStyles extends NativeStylesData = NativeStylesData>(styles: NativeStylesType<TParams, TStyles, TTheme, true>): (params: TParams, config?: NativeUseStylesConfigType<TStyles, TTheme> | undefined) => NativeUseStylesReturnType<TStyles, TTheme>;
    /**
     * Internal helper to transfer the (in object shape or emotion style) specified stylesheet
     * into class names that can be accessed via the returned `useStyles()` hook.
     *
     * @internal
     * @param withParams - Whether to create the stylesheet with params (Helper property for Typescript).
     * @param styles - Stylesheet to be transferred into class names.
     */
    private createStyles;
}
export declare type NativeStyleSheetConfig<TTheme> = {
    /**
     * Key/Name identifier of the StyleSheet
     * @default 'cs'
     */
    key?: string;
    /**
     * Theme the Stylesheet should work with.
     * @default undefined
     */
    theme?: TTheme | (() => TTheme);
};
export declare type NativeStyleItem = TemplateStringsArray | Interpolation<any>;
export declare type NativeStylesData = Record<string, NativeStyleItem>;
declare type NativeStylesType<TParams extends Record<string, any>, TStyles extends NativeStylesData, TTheme, TWithParams extends boolean> = TStyles | ((props: NativeStylesPropsType<TParams, TTheme, TWithParams>) => TStyles);
declare type NativeStylesPropsType<TParams extends Record<string, any>, TTheme, TWithParams extends boolean> = TWithParams extends true ? NativeBaseStylesPopsType<TParams, TTheme> : Omit<NativeBaseStylesPopsType<TParams, TTheme>, 'params'>;
declare type NativeBaseStylesPopsType<TParams extends Record<string, any>, TTheme> = {
    theme: TTheme;
    params: TParams;
};
export declare type NativeExpandedStylesType<TStyles extends NativeStylesData, TTheme> = Partial<MapToX<TStyles, NativeStyleItem>> | ((theme: TTheme) => Partial<MapToX<TStyles, NativeStyleItem>>);
export declare type NativeUseStylesType<TParams extends Record<string, any> | undefined, TStyles extends NativeStylesData, TTheme, TWithParams extends boolean> = TWithParams extends true ? (params: TParams, config?: NativeUseStylesConfigType<TStyles, TTheme>) => NativeUseStylesReturnType<TStyles, TTheme> : (config?: NativeUseStylesConfigType<TStyles, TTheme>) => NativeUseStylesReturnType<TStyles, TTheme>;
declare type NativeUseStylesConfigType<TStyles extends NativeStylesData, TTheme> = {
    /**
     * Styles keymap to extend the styles specified in the 'createStyles()' method.
     * @default {}
     */
    styles?: NativeExpandedStylesType<TStyles, TTheme>;
    /**
     * Key/Name identifier of the created style sheet.
     *
     * The here specified name is used to create a readable 'static selector'
     * for styling with e.g. scss, ..
     * This class name has initially no styling applied.
     * e.g. 'prefix-${name}-root' or 'prefix-${name}-container'
     *
     * @default 'unknown'
     */
    name?: string;
};
export declare type StyleItem = TemplateStringsArray | Interpolation<any>;
declare type NativeUseStylesReturnType<TStyles extends NativeStylesData, TTheme> = {
    /**
     * Merges the specified styles.
     *
     * @param args - Arguments to be merged together.
     */
    cx: CXType;
    /**
     * React Native Styles keymap based on the styles key map
     * specified in the 'createStyles()' method.
     */
    styles: MapToX<TStyles, ReactNativeStyle>;
    /**
     * Theme the created stylesheet used.
     */
    theme: TTheme;
};
declare type MapToX<T, X = any> = {
    [K in keyof T]: X;
};
export declare type CXType = (...args: any) => ReactNativeStyle[];
export {};