time-calendar/dist/index.mjs.map

Shows the schedule, increases and decreases the calendar day, changing the schedule

{"version":3,"sources":["../src/components/Time/Time.styled.ts","../src/components/Time/Time.tsx","../src/components/Calendar/Calendar.tsx","../src/components/Calendar/Calendar.styled.ts","../src/hooks/useDateFnsLocale.ts"],"sourcesContent":["import styled from \"styled-components\";\n\nexport const Wrapper = styled.div`\n    display: grid;\n    grid-template-columns: repeat(auto-fill, 80px);\n    gap: 10px;\n`\n\nexport const Cell = styled.div`\n    padding: 8px 16px;\n    border-radius: 16px;\n    border: 1px solid rgba(197, 193, 193, 0.77);\n    background-color: #fff;\n    text-align: center;\n    font-size: 14px;\n    font-weight: 400;\n\n    &:hover {\n        background-color: #f6f6f6;\n        border: 0;\n        cursor: pointer;\n    }\n`","import { Cell, Wrapper } from './Time.styled'\n\ntype TimeProps = {\n    onClick: () => void;\n    cells: string[],\n    className?: string,\n    style?: React.CSSProperties,\n    delegated?: React.HTMLAttributes<HTMLDivElement>,\n};\n\nconst Time: React.FC<TimeProps> = ({ onClick, cells, className = \"\", style = {}, ...delegated }) => {\n    return (\n        <Wrapper className={className} style={style} {...delegated}>\n            {cells.map(c => (\n                <Cell onClick={onClick}>{c}</Cell>)\n            )}\n        </Wrapper>\n    )\n}\n\nexport default Time","import { useState } from \"react\";\nimport Time from \"../Time/Time\"\nimport { FormatedDate, Header, Nav, Wrapper, NavWrapper } from \"./Calendar.styled\"\nimport { format, addDays, subDays } from 'date-fns';\nimport useDateFnsLocale from \"../../hooks/useDateFnsLocale\";\n\ntype CalendarTypes = {\n    onClickTime: () => void,\n    shedule: { [key: string]: string[] },\n    initialDate?: Date,\n    localeCode?: string,\n    className?: string,\n    style?: React.CSSProperties,\n    delegated?: React.HTMLAttributes<HTMLDivElement>,\n    loadingFallback?: React.ReactNode,\n    errorFallback?: (error: Error) => React.ReactNode,\n}\n\nconst Calendar: React.FC<CalendarTypes> = ({ onClickTime, shedule, loadingFallback, errorFallback, initialDate = new Date(), localeCode = \"en-US\", className = \"\", style = {}, ...delegated }) => {\n    const { loading, error, locale } = useDateFnsLocale(localeCode)\n    const [date, setDate] = useState(initialDate)\n\n    if (loading) return loadingFallback ?? <div>...loading</div>\n    if (error) return errorFallback?.(error) ?? <div>{error.message}</div>\n\n    return (\n        <Wrapper className={className} style={style} {...delegated}>\n            <Header>\n                <FormatedDate>{locale ? format(date, \"d MMMM yyyy\", { locale: locale }) : format(date, \"d MMMM yyyy\" )}</FormatedDate>\n                <NavWrapper>\n                    <Nav onClick={() => setDate(initialDate)}>↻</Nav>\n                    <Nav onClick={() => setDate(prev => subDays(prev, 1))}>ᐊ</Nav>\n                    <Nav onClick={() => setDate(prev => addDays(prev, 1))}>ᐅ</Nav>\n                </NavWrapper>\n            </Header>\n            <Time onClick={onClickTime} cells={shedule[format(date, \"dd.MM.yyyy\")]} />\n        </Wrapper>\n    )\n}\n\nexport default Calendar","import styled from \"styled-components\";\n\nexport const Wrapper = styled.div`\n    max-width: 350px;\n    border-radius: 12px;\n    box-shadow: 0px 4px 16px 0px #0000000A;\n    background-color: white;\n    padding: 10px;\n`\n\nexport const Header = styled.div`\n    margin-bottom: 16px;\n    display: flex;\n    justify-content: space-between;\n`\n\nexport const FormatedDate = styled.span`\n    font-size: 16px;\n    font-weight: 600;\n`\n\nexport const NavWrapper = styled.div`\n    display: flex;\n    justify-content: space-between;\n    gap: 10px;\n`\n\nexport const Nav = styled.button`\n    padding: 6px 10px;\n    border-radius: 12px;\n    background-color: rgba(197, 193, 193, 0.77);\n    border: 0;\n\n    &:hover {\n        background-color: #f6f6f6;\n        border: 0;\n        cursor: pointer;\n    }\n`\n\n","import { useState, useEffect } from \"react\"\nimport type { Locale } from 'date-fns'\nimport { localeLoaders } from \"../localeLoaders\";\n\nconst localeCache: Record<string, Locale> = {}\n\ninterface UseDateFnsLocaleResult {\n    loading: boolean;\n    locale: Locale | null;\n    error: Error | null;\n}\n\nconst useDateFnsLocale = (localeCode: string): UseDateFnsLocaleResult => {\n    const [loading, setLoading] = useState<boolean>(false)\n    const [locale, setLocale] = useState<Locale | null>(null)\n    const [error, setError] = useState<Error | null>(null)\n\n    useEffect(() => {\n        if (!localeCode) throw new Error(\"Locale code must be provided\")\n\n        if (localeCache[localeCode]) {\n            setLocale(localeCache[localeCode])\n            return\n        }\n\n        setLoading(true)\n\n        const loadLocale = async () => {\n            try {\n                const loadedLocale = await localeLoaders[localeCode]();\n                localeCache[localeCode] = loadedLocale;\n                setLocale(loadedLocale);\n            } catch (err: any) {\n                setError(Error(`Locale ${localeCode} not found, fallback to en-US`))\n\n                try {\n                    const loadedLocale = await localeLoaders[\"en-US\"]();\n                    localeCache[localeCode] = loadedLocale;\n                    localeCache['en-US'] = loadedLocale;\n                    setLocale(loadedLocale);\n                } catch (e: any) {\n                    setLocale(null)\n                    setError(e)\n                }\n            } finally {\n                setLoading(false)\n            }\n        }\n\n        loadLocale()\n    }, [localeCode])\n\n    return {\n        loading,\n        locale,\n        error\n    }\n}\n\nexport default useDateFnsLocale\n"],"mappings":";AAAA,OAAO,YAAY;AAEZ,IAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,IAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACMX;;;ACdhB,SAAS,YAAAA,iBAAgB;;;ACAzB,OAAOC,aAAY;AAEZ,IAAMC,WAAUD,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQvB,IAAM,SAASA,QAAO;AAAA;AAAA;AAAA;AAAA;AAMtB,IAAM,eAAeA,QAAO;AAAA;AAAA;AAAA;AAK5B,IAAM,aAAaA,QAAO;AAAA;AAAA;AAAA;AAAA;AAM1B,IAAM,MAAMA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADxB1B,SAAS,QAAQ,SAAS,eAAe;;;AEHzC,SAAS,UAAU,iBAAiB;;;AFsBO,gBAAAE,MAO3B,YAP2B;","names":["useState","styled","Wrapper","jsx"]}