@hakit/components
Version:
A series of components to work with @hakit/core
71 lines • 4.05 kB
TypeScript
import { CSSProperties, Key } from 'react';
import { CardBaseProps } from '../..';
export declare namespace GarbageCollectionCardTypes {
type Day = "Sunday" | "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday";
type Week = Array<BinProperties | CSSProperties["color"]> | null;
interface SvgProperties {
color: CSSProperties["color"];
/** If the name is provided, this color will apply to the text of the bin @default rgba(0,0,0,0.6) */
textColor?: CSSProperties["color"];
/** the color of the icon if provided to any of the bins @default rgba(0,0,0,0.6) */
iconColor?: CSSProperties["color"];
/** the size of the rendered default svg @default 45 */
size?: number;
}
interface BinProperties extends SvgProperties {
/** the name of the bin @default "''" */
name?: string;
/** the icon name from iconify to display over the bin, if provided as well as name, the display may look odd */
icon?: string;
/** if provided, the default garbage bin will not be rendered and you can render your own */
render?: (bin: BinProperties, key: Key) => React.ReactElement<HTMLElement>;
}
interface Schedule {
/** optional title to appear in each schedule */
title?: React.ReactNode;
/** on what day does your garbage get collected */
day: GarbageCollectionCardTypes.Day;
/** as there's (usually) 4 weeks in a month, provide a config for each week, if you only have your garbage collected once a month, on a tuesday, specify null for the weeks that aren't relevant */
weeks: [
GarbageCollectionCardTypes.Week,
GarbageCollectionCardTypes.Week,
GarbageCollectionCardTypes.Week,
GarbageCollectionCardTypes.Week
];
/** how often is your garbage collected */
frequency: "weekly" | "fortnightly" | "monthly";
/** hide the next collection time @default false */
hideNextCollection?: boolean;
}
}
type OmitProperties = "onClick" | "as" | "title" | "entity" | "children" | "disabled" | "active" | "service" | "serviceData" | "modalProps" | "longPressCallback" | "disableActiveState" | "disableScale" | "disableRipples" | "rippleProps";
export interface GarbageCollectionCardProps extends Omit<CardBaseProps, OmitProperties> {
/** The title of the card @default 'Garbage Collection' */
title?: React.ReactNode;
/** The description of the card @default undefined */
description?: React.ReactNode;
/** the schedule(s) for your garbage collection */
schedules: GarbageCollectionCardTypes.Schedule[];
/** the styles to apply globally to the garbage bin svg, this can be overwritten per week */
svg?: GarbageCollectionCardTypes.SvgProperties;
/** fired when the card is clicked */
onClick?: () => void;
}
/**
* This card is useful to remind you of schedule of the pickup of our rubbish bins, it's very simple, yet highly customizable.
*
* It uses the current date (either provided by home assistant sensor.date or via javascript to determine the current day of the week, and then calculates the next collection date based on the schedule provided.
*
* You can change the color of the bin, by simply providing a css color property or providing an object will allow you to change colors, size of the bin, text, textColors, icon or even a custom render function.
*
* It will also allow you to create multiple schedules if you need to.
*
* You can also hide the "next" collection by passing through hideNextCollection on the schedule.
*
* WARNING: If the approach I've taken for schedules doesn't work for you, reach out on github an open an new issue with some details on what isn't working for you!
*
* Here's an example of some of the customization achievable:
* */
export declare function GarbageCollectionCard(props: GarbageCollectionCardProps): import("@emotion/react/jsx-runtime").JSX.Element;
export {};
//# sourceMappingURL=index.d.ts.map