@mongez/react-atom
Version:
A simple state management tool for React Js.
1 lines • 6.44 kB
Source Map (JSON)
{"version":3,"file":"helpers.mjs","names":[],"sources":["../../../../@mongez/react-atom/src/helpers.ts"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { atom } from \"./react-atom\";\nimport { ReactAtom } from \"./types\";\n\nexport type OpenAtomActions = {\n /**\n * Toggle open state\n */\n toggle: () => void;\n /**\n * Mark as opened\n */\n open: () => void;\n /**\n * Mark as closed\n */\n close: () => void;\n /**\n * Listen and get the opened state\n */\n useOpened: () => boolean;\n};\n\n/**\n * Open atom type\n */\nexport type OpenAtomType = {\n opened: boolean;\n} & OpenAtomActions;\n\n/**\n * Create a boolean atom\n */\nexport function openAtom(\n key: string,\n defaultOpened = false,\n): ReactAtom<boolean, OpenAtomActions> {\n return atom<boolean, OpenAtomActions>({\n key,\n default: defaultOpened,\n actions: {\n toggle() {\n this.update(!this.currentValue);\n },\n open() {\n this.update(true);\n },\n close() {\n this.update(false);\n },\n useOpened() {\n return (this as unknown as ReactAtom).useState()[0];\n },\n },\n });\n}\n\nexport type LoadingAtomActions = {\n /**\n * Start loading\n */\n startLoading: () => void;\n /**\n * Stop loading\n */\n stopLoading: () => void;\n /**\n * Toggle loading\n */\n toggleLoading: () => void;\n};\n\nexport type LoadingAtom = ReactAtom<boolean, LoadingAtomActions>;\n\n/**\n * Create a loading atom\n */\nexport function loadingAtom(key: string, defaultLoading = false) {\n const atomHandler = atom<boolean, LoadingAtomActions>({\n key,\n default: defaultLoading,\n actions: {\n startLoading() {\n this.update(true);\n },\n stopLoading() {\n this.update(false);\n },\n toggleLoading() {\n this.update(!this.currentValue);\n },\n },\n });\n\n return atomHandler;\n}\n\n/**\n * Fetching atom type\n */\nexport type FetchingAtomType<DataType, PaginationType> = {\n /**\n * Loading state\n */\n isLoading: boolean;\n /**\n * Fetched data\n */\n data: DataType | null;\n /**\n * Pagination data\n */\n pagination?: PaginationType;\n /**\n * Fetching error\n */\n error: any;\n};\n\nexport type FetchingAtomActions<DataType, PaginationType> = {\n /**\n * Start loading\n */\n startLoading: () => void;\n /**\n * Stop loading\n */\n stopLoading: () => void;\n /**\n * Mark data as fetched successfully, this will mark loading as false and set data\n */\n success: (data: DataType, pagination?: PaginationType) => void;\n /**\n * Mark data as fetched successfully, this will mark loading as false and set data\n */\n failed: (error: ReactNode) => void;\n /**\n * Used only with arrays, this will append data to the current data and mark loading as false\n */\n append: (data: DataType) => void;\n /**\n * Used only with arrays, this will prepend data to current data and mark loading as false\n */\n prepend: (data: DataType) => void;\n /**\n * Get and use loading state\n */\n useLoading: () => boolean;\n /**\n * Get and use data\n */\n useData: () => DataType | null;\n /**\n * Get and use error\n */\n useError: () => ReactNode;\n /**\n * Get and use pagination\n */\n usePagination: () => PaginationType | undefined;\n};\n\n/**\n * Create a fetching atom\n */\nexport function fetchingAtom<DataType = any, PaginationType = any>(\n key: string,\n defaultValue: DataType | null = null,\n defaultFetching = true,\n) {\n return atom<\n FetchingAtomType<DataType, PaginationType>,\n FetchingAtomActions<DataType, PaginationType>\n >({\n key,\n actions: {\n startLoading() {\n this.change(\"isLoading\", true);\n },\n stopLoading() {\n this.change(\"isLoading\", false);\n },\n useLoading() {\n return (this as unknown as ReactAtom).use(\"isLoading\");\n },\n useData() {\n return (this as unknown as ReactAtom).use(\"data\");\n },\n useError() {\n return (this as unknown as ReactAtom).use(\"error\");\n },\n usePagination() {\n return (this as unknown as ReactAtom).use(\"pagination\");\n },\n success(data, pagination?: PaginationType) {\n this.merge({\n isLoading: false,\n data,\n pagination,\n });\n },\n append(data: DataType) {\n const newData: any[] = [...(this.value.data as any), ...(data as any)];\n this.merge({\n isLoading: false,\n data: newData as DataType,\n });\n },\n prepend(data: DataType) {\n const newData: any[] = [...(data as any), ...(this.value.data as any)];\n this.merge({\n isLoading: false,\n data: newData as DataType,\n });\n },\n failed(error) {\n this.merge({\n isLoading: false,\n error,\n });\n },\n },\n default: {\n isLoading: defaultFetching,\n data: defaultValue,\n error: undefined,\n pagination: undefined,\n },\n });\n}\n"],"mappings":";;;;;;AAiCA,SAAgB,SACd,KACA,gBAAgB,OACqB;CACrC,OAAO,KAA+B;EACpC;EACA,SAAS;EACT,SAAS;GACP,SAAS;IACP,KAAK,OAAO,CAAC,KAAK,YAAY;GAChC;GACA,OAAO;IACL,KAAK,OAAO,IAAI;GAClB;GACA,QAAQ;IACN,KAAK,OAAO,KAAK;GACnB;GACA,YAAY;IACV,OAAQ,KAA8B,SAAS,EAAE;GACnD;EACF;CACF,CAAC;AACH;;;;AAsBA,SAAgB,YAAY,KAAa,iBAAiB,OAAO;CAiB/D,OAhBoB,KAAkC;EACpD;EACA,SAAS;EACT,SAAS;GACP,eAAe;IACb,KAAK,OAAO,IAAI;GAClB;GACA,cAAc;IACZ,KAAK,OAAO,KAAK;GACnB;GACA,gBAAgB;IACd,KAAK,OAAO,CAAC,KAAK,YAAY;GAChC;EACF;CACF,CAEiB;AACnB;;;;AAsEA,SAAgB,aACd,KACA,eAAgC,MAChC,kBAAkB,MAClB;CACA,OAAO,KAGL;EACA;EACA,SAAS;GACP,eAAe;IACb,KAAK,OAAO,aAAa,IAAI;GAC/B;GACA,cAAc;IACZ,KAAK,OAAO,aAAa,KAAK;GAChC;GACA,aAAa;IACX,OAAQ,KAA8B,IAAI,WAAW;GACvD;GACA,UAAU;IACR,OAAQ,KAA8B,IAAI,MAAM;GAClD;GACA,WAAW;IACT,OAAQ,KAA8B,IAAI,OAAO;GACnD;GACA,gBAAgB;IACd,OAAQ,KAA8B,IAAI,YAAY;GACxD;GACA,QAAQ,MAAM,YAA6B;IACzC,KAAK,MAAM;KACT,WAAW;KACX;KACA;IACF,CAAC;GACH;GACA,OAAO,MAAgB;IACrB,MAAM,UAAiB,CAAC,GAAI,KAAK,MAAM,MAAc,GAAI,IAAY;IACrE,KAAK,MAAM;KACT,WAAW;KACX,MAAM;IACR,CAAC;GACH;GACA,QAAQ,MAAgB;IACtB,MAAM,UAAiB,CAAC,GAAI,MAAc,GAAI,KAAK,MAAM,IAAY;IACrE,KAAK,MAAM;KACT,WAAW;KACX,MAAM;IACR,CAAC;GACH;GACA,OAAO,OAAO;IACZ,KAAK,MAAM;KACT,WAAW;KACX;IACF,CAAC;GACH;EACF;EACA,SAAS;GACP,WAAW;GACX,MAAM;GACN,OAAO;GACP,YAAY;EACd;CACF,CAAC;AACH"}