Bladeren bron

Change the name of scrollableWhenZoomin prop to scrollEnabledWithZoomedin

iou90 4 jaren geleden
bovenliggende
commit
5ac5222a8c
5 gewijzigde bestanden met toevoegingen van 11 en 11 verwijderingen
  1. 1
    1
      README.md
  2. 4
    4
      autoHeightWebView/index.js
  3. 4
    4
      autoHeightWebView/utils.js
  4. 1
    1
      demo/App.js
  5. 1
    1
      index.d.ts

+ 1
- 1
README.md Bestand weergeven

@@ -62,7 +62,7 @@ import { Dimensions } from 'react-native'
62 62
 | files                        |    -    | `PropTypes.arrayOf(PropTypes.shape({ href: PropTypes.string, type: PropTypes.string, rel: PropTypes.string }))` | Using local or remote files. To add local files: Add files to android/app/src/main/assets/ (depends on baseUrl) on android; add files to web/ (depends on baseUrl) on iOS.                                   |
63 63
 | source                       |    -    |                                               `PropTypes.object`                                                | BaseUrl now contained by source. 'web/' by default on iOS; 'file:///android_asset/' by default on Android or uri.                                                                                            |
64 64
 | scalesPageToFit              |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview which true by default on Android). When scalesPageToFit was enabled, it will apply the scale of the page directly instead of using viewport meta script.    |
65
-| scrollableWhenZoomin                     |  false   |                                                `PropTypes.bool`                                                 | Making the webview scrollable on iOS when zoomed in even if scrollEnabled is false.                                                                        |
65
+| scrollEnabledWithZoomedin                     |  false   |                                                `PropTypes.bool`                                                 | Making the webview scrollable on iOS when zoomed in even if scrollEnabled is false.                                                                        |
66 66
 | zoomable                     |  true   |                                                `PropTypes.bool`                                                 | Only works on iOS when disable scalesPageToFit, in other conditions, using custom scripts to create viewport meta to disable zooming.                                                                        |
67 67
 | showsVerticalScrollIndicator |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview).                                                                                                                                                      |
68 68
 | showsVerticalScrollIndicator |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview).                                                                                                                                                      |

+ 4
- 4
autoHeightWebView/index.js Bestand weergeven

@@ -12,7 +12,7 @@ import { reduceData, getWidth, isSizeChanged, shouldUpdate } from './utils';
12 12
 
13 13
 const AutoHeightWebView = React.memo(
14 14
   forwardRef((props, ref) => {
15
-    const { style, onMessage, onSizeUpdated, scrollableWhenZoomin, scrollEnabled, source } = props;
15
+    const { style, onMessage, onSizeUpdated, scrollEnabledWithZoomedin, scrollEnabled, source } = props;
16 16
 
17 17
     if (!source) {
18 18
       return null;
@@ -46,7 +46,7 @@ const AutoHeightWebView = React.memo(
46 46
         return;
47 47
       }
48 48
       const { height, width, zoomin } = data;
49
-      !scrollEnabled && scrollableWhenZoomin && setScrollable(zoomin);
49
+      !scrollEnabled && scrollEnabledWithZoomedin && setScrollable(zoomin);
50 50
       const { height: previousHeight, width: previousWidth } = size;
51 51
       isSizeChanged({ height, previousHeight, width, previousWidth }) &&
52 52
         setSize({
@@ -55,7 +55,7 @@ const AutoHeightWebView = React.memo(
55 55
         });
56 56
     };
57 57
 
58
-    const currentScrollEnabled = scrollEnabled === false && scrollableWhenZoomin ? scrollable : scrollEnabled;
58
+    const currentScrollEnabled = scrollEnabled === false && scrollEnabledWithZoomedin ? scrollable : scrollEnabled;
59 59
 
60 60
     const { currentSource, script } = reduceData(props);
61 61
 
@@ -105,7 +105,7 @@ AutoHeightWebView.propTypes = {
105 105
   customScript: PropTypes.string,
106 106
   customStyle: PropTypes.string,
107 107
   zoomable: PropTypes.bool,
108
-  scrollableWhenZoomin: PropTypes.bool,
108
+  scrollEnabledWithZoomedin: PropTypes.bool,
109 109
   // webview props
110 110
   originWhitelist: PropTypes.arrayOf(PropTypes.string),
111 111
   onMessage: PropTypes.func,

+ 4
- 4
autoHeightWebView/utils.js Bestand weergeven

@@ -91,7 +91,7 @@ const detectZoomChanged = `
91 91
   });
92 92
 `
93 93
 
94
-const getBaseScript = ({ style, zoomable, scalesPageToFit, scrollableWhenZoomin }) =>
94
+const getBaseScript = ({ style, zoomable, scalesPageToFit, scrollEnabledWithZoomedin }) =>
95 95
   `
96 96
   ;
97 97
   if (!document.getElementById("rnahw-wrapper")) {
@@ -107,7 +107,7 @@ const getBaseScript = ({ style, zoomable, scalesPageToFit, scrollableWhenZoomin
107 107
   window.addEventListener('resize', updateSize);
108 108
   ${domMutationObserveScript}
109 109
   ${makeScalePageToFit(zoomable, scalesPageToFit)}
110
-  ${scrollableWhenZoomin ? detectZoomChanged : ''}
110
+  ${scrollEnabledWithZoomedin ? detectZoomChanged : ''}
111 111
   updateSize();
112 112
   `;
113 113
 
@@ -155,8 +155,8 @@ const getInjectedSource = ({ html, script }) => `
155 155
   </script>
156 156
 `;
157 157
 
158
-const getScript = ({ files, customStyle, customScript, style, zoomable, scalesPageToFit, scrollableWhenZoomin }) => {
159
-  let script = getBaseScript({ style, zoomable, scalesPageToFit, scrollableWhenZoomin });
158
+const getScript = ({ files, customStyle, customScript, style, zoomable, scalesPageToFit, scrollEnabledWithZoomedin }) => {
159
+  let script = getBaseScript({ style, zoomable, scalesPageToFit, scrollEnabledWithZoomedin });
160 160
   script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
161 161
   script = appendStylesToHead({ style: customStyle, script });
162 162
   customScript && (script = customScript + script);

+ 1
- 1
demo/App.js Bestand weergeven

@@ -115,7 +115,7 @@ const Explorer = () => {
115 115
         alignItems: 'center',
116 116
       }}>
117 117
       <AutoHeightWebView
118
-        scrollableWhenZoomin
118
+        scrollEnabledWithZoomedin
119 119
         scrollEnabled={false}
120 120
         customStyle={
121 121
           `

+ 1
- 1
index.d.ts Bestand weergeven

@@ -26,7 +26,7 @@ export interface AutoHeightWebViewProps extends WebViewProps {
26 26
   customScript: string;
27 27
   customStyle: string;
28 28
   zoomable: boolean;
29
-  scrollableWhenZoomin: boolean;
29
+  scrollEnabledWithZoomedin: boolean;
30 30
 }
31 31
 
32 32
 export default class AutoHeightWebView extends Component<Partial<AutoHeightWebViewProps>> {}