@hakit/components
Version:
A series of components to work with @hakit/core
103 lines • 6.38 kB
TypeScript
import { LongPressReactEvents } from 'use-long-press';
import { ReactElement, ReactNode, CSSProperties } from 'react';
import { EntityName, DomainService, ExtractDomain, ServiceData, HassEntityWithService, HistoryOptions } from '@hakit/core';
import { CSSInterpolation } from '@emotion/serialize';
import { RipplesProps, AvailableQueries, ModalByEntityDomainProps, ButtonBarProps, SvgGraphProps, RelatedEntity } from '../..';
import { FeatureEntity } from './FeatureEntity';
import { useResizeDetectorProps } from 'react-resize-detector';
type Extendable<T extends keyof React.JSX.IntrinsicElements> = Omit<React.ComponentPropsWithRef<T>, "onClick" | "disabled" | "title" | "children" | "active">;
type AllowedFeaturedEntity = ReactElement<typeof FeatureEntity> | false | null | undefined;
type AllowedFeaturedEntities = AllowedFeaturedEntity | AllowedFeaturedEntity[];
type AllowedRelatedEntity = ReactElement<typeof RelatedEntity> | false | null | undefined;
type AllowedRelatedEntities = AllowedRelatedEntity | AllowedRelatedEntity[];
export type CardBaseProps<T extends keyof React.JSX.IntrinsicElements = "div", E extends EntityName = EntityName> = Extendable<T> & AvailableQueries & {
/** convert the component type to something else @default "div" */
as?: T;
/** children to render alongside the card */
children?: ReactNode;
/** should the card be disabled, this will disable any click events, service calls and scale effects */
disabled?: boolean;
/** Optional active param, By default this is updated via home assistant @default undefined */
active?: boolean;
/** By default, the title is retrieved from the domain name, or you can specify a manual title @default undefined */
title?: ReactNode;
/** The name of your entity */
entity?: E;
/** The service name to call */
service?: DomainService<ExtractDomain<E>>;
/** The data to pass to the service */
serviceData?: ServiceData<ExtractDomain<E>, DomainService<ExtractDomain<E>>>;
/** allows you to place a fully functional and interactive element at predefined zones of the card, like displaying an icon in the top left which might be a sensor indicating battery level */
relatedEntities?: AllowedRelatedEntities;
/** provide a FeatureEntity component as a list or individual components to render a bar at the bottom of the card */
features?: AllowedFeaturedEntities;
/** props to pass to the feature bar */
featureBarProps?: Omit<ButtonBarProps, "children">;
/** callback to fire after a long press event */
longPressCallback?: E extends undefined ? (entity: null, event: LongPressReactEvents) => void : (entity: HassEntityWithService<ExtractDomain<E>>, event: LongPressReactEvents) => void;
/** The onClick handler is called when the card is pressed, the first argument will be entity object with api methods if entity is provided */
/** The onClick handler is called when the button is pressed, the first argument will be entity object with api methods if entity is provided */
onClick?: E extends undefined ? (entity: null, event: React.MouseEvent<HTMLElement>) => void : (entity: HassEntityWithService<ExtractDomain<E>>, event: React.MouseEvent<HTMLElement>) => void;
/** disable the modal opening functionality @default false */
disableModal?: boolean;
/** props to pass to the modal */
modalProps?: Partial<ModalByEntityDomainProps<E>>;
/** include ripples or not */
disableRipples?: boolean;
/** disable the scale effect on the card when clicked */
disableScale?: boolean;
/** disable the styles of the card when in the active state */
disableActiveState?: boolean;
/** This also controls the animated modal border-radius, update the border radius of the card @default "16px" */
borderRadius?: CSSProperties["borderRadius"];
/** completely disable the automated column sizes, this will default to whatever width is provided by the user or the card @default false */
disableColumns?: boolean;
/** props to pass to the ripple component if enabled */
rippleProps?: Omit<RipplesProps, "children">;
/** className to provide to the trigger element */
triggerClass?: string;
/** the graph settings containing the entity to display a graph in the background of the card */
graph?: {
/** the entity to display the graph for */
entity: EntityName;
/** the props to pass to the svg graph, control the styles and colors of the graph from here */
props?: SvgGraphProps;
/** the space at the bottom of the card is automatically calculated by the available height, you can adjust this by manipulating the value here @default 0px */
adjustGraphSpaceBy?: CSSProperties["paddingBottom"];
/** options to pass to the history request */
historyOptions?: HistoryOptions;
};
/**
*
* A css string to update the card, this is similar to how you'd write scss.
*
* ```jsx
* export const MyComponent = (otherProps) => {
* return <SomeCard cssStyles={`
* color: var(--ha-900-contrast);
* .some-selector {
* &:hover {
* background-color: var(--ha-A400);
* }
* }
* `} {...otherProps} />
* }
* ```
*/
cssStyles?: CSSInterpolation;
/** remove all base styles of the card and just use the inbuilt functionality */
onlyFunctionality?: boolean;
/** props to pass to the resize detector, this is useful if you want to trigger something whenever the card resizes */
resizeDetectorProps?: useResizeDetectorProps<HTMLElement>;
/** ref callback to get the reference to the card element */
refCallback?: (ref: React.RefObject<HTMLElement | null>) => void;
};
/**
* This is the base card component that every other card component should extend, it comes with everything we need to be able to replicate functionality
* like the modal popup, ripples and more.
*
* You can use this if you want an empty shell of a component that you can build on top of.
* */
export declare const CardBase: import('react').MemoExoticComponent<(<T extends keyof React.JSX.IntrinsicElements = "div", E extends EntityName = EntityName>(props: CardBaseProps<T, E>) => import("@emotion/react/jsx-runtime").JSX.Element)>;
export {};
//# sourceMappingURL=index.d.ts.map