diff --git a/package.json b/package.json index 72b22c78..abf1ade0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@bitnoi.se/react-scheduler", - "version": "0.2.1", + "version": "0.3.0", "type": "module", "license": "MIT", "repository": { diff --git a/readme.md b/readme.md index 68c49327..7686bc89 100644 --- a/readme.md +++ b/readme.md @@ -186,17 +186,19 @@ const mockedSchedulerData: SchedulerData = [ ##### Scheduler Config Object -| Property Name | Type | Default | Description | -| ------------------------------------ | --------------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| zoom | `0` or `1` | 0 | `0` - display grid divided into weeks `1` - display grid divided into days | -| filterButtonState | `number` | 0 | `< 0` - hides filter button, `0` - state for when filters were not set, `> 0` - state for when some filters were set (allows to also handle `onClearFilterData` event) | -| maxRecordsPerPage | `number` | 50 | number of items from `SchedulerData` visible per page | -| lang | `en`, `lt`, `de`, `fr`, `it`, `pt-BR` or `pl` | en | scheduler's language | -| includeTakenHoursOnWeekendsInDayView | `boolean` | `false` | show weekends as taken when given resource is longer than a week | -| showTooltip | `boolean` | `true` | show tooltip when hovering over tiles | -| translations | `LocaleType[]` | `undefined` | option to add specific langs translations | -| showTooltip | `boolean` | `true` | show tooltip when hovering over tiles | -| translations | `LocaleType[]` | `undefined` | option to add specific langs translations | +--- + +| Property Name | Type | Default | Description | +| ------------------------------------ | ------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| zoom | `0` or `1` or `2` | 0 | `0` - display grid divided into weeks `1` - display grid divided into days `2` - display grid divided into hours | +| filterButtonState | `number` | 0 | `< 0` - hides filter button, `0` - state for when filters were not set, `> 0` - state for when some filters were set (allows to also handle `onClearFilterData` event) | +| maxRecordsPerPage | `number` | 50 | number of items from `SchedulerData` visible per page | +| lang | `en`, `lt` or `pl` | en | scheduler's language | +| includeTakenHoursOnWeekendsInDayView | `boolean` | `false` | show weekends as taken when given resource is longer than a week | +| showTooltip | `boolean` | `true` | show tooltip when hovering over tiles | +| translations | `LocaleType[]` | `undefined` | option to add specific langs translations | +| showThemeToggle | `boolean` | `false` | show toggle button to switch between light/dark mode | +| defaultTheme | `light` or `dark` | `light` | scheduler's default theme | #### Translation object example diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index f7a7b32c..af9089f6 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -51,7 +51,7 @@ const Tooltip: FC = ({ tooltipData, zoom }) => { tooltipRef.current.style.top = `${coords.y + 8}px`; // disposition.overtime affects tooltip's width, thus it's needed to recalculate it's coords whenever overtime changes - }, [coords.x, width, disposition.overtime, coords.y]); + }, [coords.x, width, disposition.overtime, coords.y, zoom]); return ( diff --git a/src/context/CalendarProvider/CalendarProvider.tsx b/src/context/CalendarProvider/CalendarProvider.tsx index fc79cf68..7953af0b 100644 --- a/src/context/CalendarProvider/CalendarProvider.tsx +++ b/src/context/CalendarProvider/CalendarProvider.tsx @@ -122,13 +122,13 @@ const CalendarProvider = ({ }, 300); load(); }, - [onRangeChange, range] + [onRangeChange, range, zoom] ); useEffect(() => { outsideWrapper.current = document.getElementById(outsideWrapperId); setCols(getCols(zoom)); - }, []); + }, [zoom]); useEffect(() => { const handleResize = () => setCols(getCols(zoom)); diff --git a/src/context/LocaleProvider/locales.ts b/src/context/LocaleProvider/locales.ts index d9331792..b42de527 100644 --- a/src/context/LocaleProvider/locales.ts +++ b/src/context/LocaleProvider/locales.ts @@ -5,7 +5,10 @@ import ltDayjsTranslations from "dayjs/locale/lt"; import frDayjsTranslations from "dayjs/locale/fr"; import itDayjsTranslations from "dayjs/locale/it"; import ptBRDayjsTranslations from "dayjs/locale/pt-br"; -import { en, pl, de, lt, fr, it, ptBR } from "@/locales"; +import roDayjsTranslations from "dayjs/locale/ro"; +import heDayjsTranslations from "dayjs/locale/he"; +import esDayjsTranslations from "dayjs/locale/es"; +import { en, pl, de, lt, fr, it, ptBR, es, he, ro } from "@/locales"; import { LocaleType } from "./types"; export const localesData: LocaleType[] = [ @@ -39,6 +42,30 @@ export const localesData: LocaleType[] = [ translateCode: "lt-LT", dayjsTranslations: ltDayjsTranslations }, + { + id: "de", + lang: de, + translateCode: "de-DE", + dayjsTranslations: deDayjsTranslations + }, + { + id: "es", + lang: es, + translateCode: "es-ES", + dayjsTranslations: esDayjsTranslations + }, + { + id: "he", + lang: he, + translateCode: "he_IL", + dayjsTranslations: heDayjsTranslations + }, + { + id: "ro", + lang: ro, + translateCode: "ro_RO", + dayjsTranslations: roDayjsTranslations + }, { id: "pl", lang: pl, diff --git a/src/locales/es.ts b/src/locales/es.ts new file mode 100644 index 00000000..b947f350 --- /dev/null +++ b/src/locales/es.ts @@ -0,0 +1,17 @@ +export const es = { + feelingEmpty: "Me siento vacío...", + free: "Libre", + loadNext: "Siguiente", + loadPrevious: "Anterior", + over: "Finalizado", + taken: "Reservado", + topbar: { + filters: "Filtros", + next: "Siguiente", + prev: "Anterior", + today: "Hoy", + view: "Vista" + }, + search: "Buscar", + week: "Semana" +}; diff --git a/src/locales/he.ts b/src/locales/he.ts new file mode 100644 index 00000000..d2f7f6a7 --- /dev/null +++ b/src/locales/he.ts @@ -0,0 +1,17 @@ +export const he = { + feelingEmpty: "אני מרגיש ריק...", + free: "חופשי", + loadNext: "הבא", + loadPrevious: "הקודם", + over: "מסתיים", + taken: "תפוס", + topbar: { + filters: "מסננים", + next: "הבא", + prev: "הקודם", + today: "היום", + view: "תצוגה" + }, + search: "חיפוש", + week: "שבוע" +}; diff --git a/src/locales/index.ts b/src/locales/index.ts index d1d62c23..af263b63 100644 --- a/src/locales/index.ts +++ b/src/locales/index.ts @@ -5,3 +5,6 @@ export { lt } from "./lt"; export { fr } from "./fr"; export { it } from "./it"; export { ptBR } from "./ptBR"; +export { he } from "./he"; +export { ro } from "./ro"; +export { es } from "./es"; diff --git a/src/locales/ro.ts b/src/locales/ro.ts new file mode 100644 index 00000000..a4c11044 --- /dev/null +++ b/src/locales/ro.ts @@ -0,0 +1,17 @@ +export const ro = { + feelingEmpty: "Mă simt gol...", + free: "Liber", + loadNext: "Următorul", + loadPrevious: "Anterior", + over: "Finalizat", + taken: "Ocupat", + topbar: { + filters: "Filtre", + next: "Următorul", + prev: "Anterior", + today: "Astăzi", + view: "Vizualizare" + }, + search: "Căutare", + week: "Săptămână" +}; diff --git a/src/types/global.ts b/src/types/global.ts index 634f2ae7..e5cf8ebf 100644 --- a/src/types/global.ts +++ b/src/types/global.ts @@ -9,7 +9,7 @@ type ZoomLevelTuple = typeof allZoomLevel; export type ZoomLevel = ZoomLevelTuple[number]; -export type LangCodes = "en" | "pl" | "de" | "lt" | "fr" | "it" | "pt-BR"; +export type LangCodes = "en" | "pl" | "de" | "lt" | "fr" | "it" | "pt-BR" | "he" | "es" | "ro"; export type Config = { zoom: ZoomLevel; @@ -21,7 +21,7 @@ export type Config = { */ filterButtonState?: number; /** - * Language code: "en" | "pl" | "de" | "lt" | "fr" | "it" | "pt-BR" + * Language code: "en" | "pl" | "de" | "lt" | "fr" | "it" | "pt-BR" | "he" | "es" | "ro" */ lang?: LangCodes | string; isFiltersButtonVisible?: boolean;