diff --git a/README.md b/README.md index d70649f..69e7f0b 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,8 @@ A React component that provides a customisable Progressive Web App (PWA) prompt - ⚡️ Efficient. Very little overhead for non-iOS devices and does as little work as needed for each page load. - 📱 Detects user's iOS version to provide the correct icon set. - 🌕 Will display a dark mode if enabled on iOS 13 and 14. +- Support RTL languages like Arabic, Farsi, Persian, ... +- Custom font ## Usage diff --git a/dist/react-ios-pwa-prompt.js b/dist/react-ios-pwa-prompt.js index 6696405..dfdff7e 100644 --- a/dist/react-ios-pwa-prompt.js +++ b/dist/react-ios-pwa-prompt.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("react-ios-pwa-prompt",["React"],t):"object"==typeof exports?exports["react-ios-pwa-prompt"]=t(require("react")):e["react-ios-pwa-prompt"]=t(e.React)}(global,(function(e){return function(e){var t={};function r(o){if(t[o])return t[o].exports;var n=t[o]={i:o,l:!1,exports:{}};return e[o].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,o){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)r.d(o,n,function(t){return e[t]}.bind(null,n));return o},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/dist/",r(r.s=5)}([function(t,r){t.exports=e},function(e,t,r){var o=r(2),n=r(3);"string"==typeof(n=n.__esModule?n.default:n)&&(n=[[e.i,n,""]]);var a={insert:"head",singleton:!1},c=(o(n,a),n.locals?n.locals:{});e.exports=c},function(e,t,r){"use strict";var o,n=function(){return void 0===o&&(o=Boolean(window&&document&&document.all&&!window.atob)),o},a=function(){var e={};return function(t){if(void 0===e[t]){var r=document.querySelector(t);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}e[t]=r}return e[t]}}(),c=[];function i(e){for(var t=-1,r=0;re.length)&&(t=e.length);for(var r=0,o=new Array(t);r1,o="standalone"in window.navigator&&window.navigator.standalone,(t||r)&&!o),visits:0},localStorage.setItem("iosPwaPrompt",JSON.stringify(k))),k.isiOS||E){var C=k.visits+1>=l;if((k.visits+1e.length)&&(t=e.length);for(var r=0,o=new Array(t);r1,o="standalone"in window.navigator&&window.navigator.standalone,(t||r)&&!o),visits:0},localStorage.setItem("iosPwaPrompt",JSON.stringify(H)));var B=H.visits+1>=l,L=H.visits+1=16.8.0" }, "devDependencies": { - "@babel/cli": "^7.8.4", - "@babel/core": "^7.9.0", - "@babel/preset-env": "^7.9.0", + "@babel/cli": "^7.17.10", + "@babel/core": "^7.17.10", + "@babel/preset-env": "^7.17.10", "@babel/preset-react": "^7.9.4", - "babel-loader": "^8.1.0", + "babel-loader": "^8.2.5", "css-loader": "^3.4.2", "node-sass": "^4.13.1", "path": "^0.12.7", diff --git a/src/components/PWAPrompt.js b/src/components/PWAPrompt.js index e9618fc..1796486 100644 --- a/src/components/PWAPrompt.js +++ b/src/components/PWAPrompt.js @@ -16,6 +16,8 @@ const PWAPrompt = ({ promptData, maxVisits, onClose, + dir, + font_family, }) => { const [isVisible, setVisibility] = useState(!Boolean(delay)); @@ -41,6 +43,8 @@ const PWAPrompt = ({ const isiOS13AndUp = /OS (13|14)/.test(window.navigator.userAgent); const visibilityClass = isVisible ? styles.visible : styles.hidden; const iOSClass = isiOS13AndUp ? styles.modern : "legacy"; + const marginText = dir === "ltr" ? {marginLeft : 32} : {marginRight: 32}; + const customFontFamily = {fontFamily: font_family}; const dismissPrompt = (evt) => { document.body.classList.remove(styles.noScroll); @@ -83,31 +87,34 @@ const PWAPrompt = ({ role="dialog" onTransitionEnd={onTransitionOut} > -
+

{copyTitle}

-
+

{copyBody}

-
+

{copyShareButtonLabel}

@@ -126,6 +134,7 @@ const PWAPrompt = ({ />

{copyAddHomeButtonLabel}

diff --git a/src/components/PWAPrompt.styles.scss b/src/components/PWAPrompt.styles.scss index d88ab5e..08aca20 100644 --- a/src/components/PWAPrompt.styles.scss +++ b/src/components/PWAPrompt.styles.scss @@ -125,7 +125,6 @@ $blue-color-modern-dark: rgba(9, 132, 255, 1); .pwaPromptTitle { color: $title-color-legacy; - font-family: $font-family; font-size: 18px; font-weight: 500; line-height: 1.125; @@ -192,7 +191,6 @@ $blue-color-modern-dark: rgba(9, 132, 255, 1); .pwaPromptCopy { color: $font-color-legacy; - font-family: $font-family; font-size: 13px; line-height: 17px; margin: 0; @@ -236,7 +234,6 @@ $blue-color-modern-dark: rgba(9, 132, 255, 1); .pwaPromptHomeIcon { flex: 0 0 auto; height: 30px; - margin-right: 32px; width: 25px; } diff --git a/src/index.js b/src/index.js index 9b2cf85..218d70d 100644 --- a/src/index.js +++ b/src/index.js @@ -14,7 +14,7 @@ const deviceCheck = () => { return (isiOS || isiPadOS) && !isStandalone; }; -export default ({ +export default React.memo(({ timesToShow = 1, promptOnVisit = 1, permanentlyHideOnDismiss = true, @@ -26,17 +26,20 @@ export default ({ delay = 1000, debug = false, onClose = () => {}, + willNotShowPrompt = () => {}, + dir = "ltr", + font_family = "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,'Helvetica Neue', Arial, sans-serif", }) => { let promptData = JSON.parse(localStorage.getItem("iosPwaPrompt")); - if (promptData === null) { promptData = { isiOS: deviceCheck(), visits: 0 }; localStorage.setItem("iosPwaPrompt", JSON.stringify(promptData)); } + const aboveMinVisits = promptData.visits + 1 >= promptOnVisit; + const belowMaxVisits = promptData.visits + 1 < promptOnVisit + timesToShow; + if (promptData.isiOS || debug) { - const aboveMinVisits = promptData.visits + 1 >= promptOnVisit; - const belowMaxVisits = promptData.visits + 1 < promptOnVisit + timesToShow; if (belowMaxVisits || debug) { localStorage.setItem( @@ -60,11 +63,20 @@ export default ({ promptData={promptData} maxVisits={timesToShow + promptOnVisit} onClose={onClose} + dir={dir} + font_family={font_family} /> ); } } } + /** + * Check prompt will show + */ + if (!promptData.isiOS || !aboveMinVisits || !belowMaxVisits) { + willNotShowPrompt() + } + return null; -}; +});