diff --git a/CHANGELOG.md b/CHANGELOG.md index c2cd1a9..8d13a97 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,19 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## [1.3.0](https://github.com/fashionstudio/react-native-web-app/compare/v1.1.7...v1.3.0) (2021-09-18) + + +### Features + +* support custom offline screen options and component ([f8badc3](https://github.com/fashionstudio/react-native-web-app/commit/f8badc3497e59b914f095bb8a4a294d98f447ec4)) + + +### Bug Fixes + +* **version:** rename ([d0d30f9](https://github.com/fashionstudio/react-native-web-app/commit/d0d30f9b963e9416bc812c1ad2c02d75d26f0217)) +* **version:** rename ([2a041ef](https://github.com/fashionstudio/react-native-web-app/commit/2a041ef106a3cea00c384930f5c1c014638e6958)) + ## [1.2.0](https://github.com/fashionstudio/react-native-web-app/compare/v1.1.6...v1.2.0) (2021-09-16) diff --git a/package.json b/package.json index 0220da1..28a6fa5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-web-app", - "version": "1.2.0", + "version": "1.2.1", "description": "Easily create apps using web views", "author": "Johann Buscail (https://github.com/johannb75)", "license": "Apache-2.0", @@ -82,4 +82,4 @@ "react-native-webview": "^11.13.0", "react-navigation": "^4.4.4" } -} +} \ No newline at end of file diff --git a/src/Main.tsx b/src/Main.tsx index 38e7e34..5cfada9 100644 --- a/src/Main.tsx +++ b/src/Main.tsx @@ -12,7 +12,10 @@ import { StructureContext } from "./helpers/context"; const CustomWebView: React.FC = require("./components/webview").default; export const Main: React.FC = () => { - const props = useContext(StructureContext); + const { + offlineScreenComponent: OfflineScreenComponent = NoInternet, + ...props + } = useContext(StructureContext); const [loading, setLoading] = useState(true); const [webviewUrl, setWebviewUrl] = useState(props.siteUrl); @@ -41,7 +44,7 @@ export const Main: React.FC = () => { return ; if (!isConnected) - return ; + return ; return ( { - const { - fontName: fontFamily, - offlineText, - themeColor, - } = useContext(StructureContext); + const { offlineScreenOptions: offlineScreen } = useContext(StructureContext); + + const { refreshButton, fontName: fontFamily, message } = offlineScreen!; return ( - + - {offlineText?.message} + {message} - - {offlineText?.message} + + {refreshButton?.text} diff --git a/src/helpers/default.ts b/src/helpers/default.ts index 8825781..9f7a391 100644 --- a/src/helpers/default.ts +++ b/src/helpers/default.ts @@ -1,4 +1,5 @@ import { IAppProps } from "../types"; +import NoInternet from "../components/NoInternet"; export const defaultProps: IAppProps = { siteUrl: "", @@ -11,10 +12,15 @@ export const defaultProps: IAppProps = { onCustomEvent: () => {}, customJSInjection: "", - fontName: "custom", - offlineText: { + + offlineScreenOptions: { message: "Вы не подключены к Интернету.", - refreshButton: "Обновить", + fontName: "custom", + refreshButton: { + text: "Обновить", + textColor: "white", + backgroundColor: "#583d72", + }, }, - themeColor: "#583d72", + offlineScreenComponent: NoInternet, }; diff --git a/src/types.ts b/src/types.ts index e62d765..57c2ff9 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,3 +1,4 @@ +import React from "react"; import { ExpoPushToken } from "expo-notifications"; import { StructureError } from "./helpers/errors"; @@ -10,6 +11,42 @@ export type TOnPushRegistered = (values: { /** Handle Custom Events */ export type TOnCustomEvent = (event: T, data: any) => void; +export interface IOfflineScreen { + /** + * Custom fonts name.\ + * Default value: **custom** + * */ + fontName?: string; + + /** + * The message to show the user.\ + * Default value: **Вы не подключены к Интернету.** + * */ + message?: string; + + /** All options for the refresh button. */ + refreshButton?: { + /** + * Custom refresh button text.\ + * Default value: **Обновить** + */ + text?: string; + + /** + * Custom button text color.\ + * Default value: **##ffffff** + */ + textColor?: string; + + /** + * Custom refresh button background color.\ + * Default value: **#583d72** + */ + backgroundColor?: string; + }; + +} + export interface IAppProps { /** Website url */ siteUrl: string; @@ -20,32 +57,11 @@ export interface IAppProps { * */ paymentPattern?: string | RegExp; - /** - * Custom fonts name.\ - * Default value: **custom** - * */ - fontName?: string; - - /** - * Theme color.\ - * Default value: **#583d72** - */ - themeColor?: string; + /** Custom options for the offline screen */ + offlineScreenOptions?: IOfflineScreen; - /** - * Custom text to show when the user is offline.\ - * **Default:** - * ```json - * { - * "message": "Вы не подключены к Интернету.", - * "refreshButton": "Обновить", - * } - * ``` - */ - offlineText?: { - message?: string; - refreshButton?: string; - } + /** Custom component for the offline screen */ + offlineScreenComponent?: React.ComponentType; /** Custom injected javascript when the site is loading */ customJSInjection?: string;