Selaa lähdekoodia

Merge branch 'scalesPageToFit' into scrollWhenZoomin

iou90 4 vuotta sitten
vanhempi
commit
3b1381acbd
No account linked to committer's email address

+ 25
- 0
.github/ISSUE_TEMPLATE/bug_report.md Näytä tiedosto

1
+---
2
+name: Bug report
3
+about: Create a report to help us improve
4
+title: ''
5
+labels: bug
6
+assignees: iou90
7
+
8
+---
9
+
10
+**Bug description:**
11
+
12
+**To Reproduce:**
13
+
14
+**Source (raw html or url):**
15
+
16
+**Expected behavior:**
17
+
18
+**Screenshots/Videos:**
19
+
20
+**Environment:**
21
+ - OS:
22
+ - OS version:
23
+ - react-native version:
24
+ - react-native-webview version:
25
+ - react-native-autoheight-webview version:

+ 16
- 0
.github/ISSUE_TEMPLATE/feature_request.md Näytä tiedosto

1
+---
2
+name: Feature request
3
+about: Suggest an idea for this project
4
+title: ''
5
+labels: feature request
6
+assignees: iou90
7
+
8
+---
9
+
10
+**Is your feature request related to a problem? If so, Please describe.**
11
+
12
+**Describe the solutions you came up with**
13
+
14
+**Platform targeting (iOS/Android)**
15
+
16
+**Additional context**

+ 2
- 2
README.md Näytä tiedosto

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.                                   |
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
 | source                       |    -    |                                               `PropTypes.object`                                                | BaseUrl now contained by source. 'web/' by default on iOS; 'file:///android_asset/' by default on Android or uri.                                                                                            |
63
 | source                       |    -    |                                               `PropTypes.object`                                                | BaseUrl now contained by source. 'web/' by default on iOS; 'file:///android_asset/' by default on Android or uri.                                                                                            |
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.    |
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
 | zoomable                     |  true   |                                                `PropTypes.bool`                                                 | Only works on iOS when disable scalesPageToFit, in other conditions, using custom scripts to create viewport meta to disable zooming.                                                                        |
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
 | showsVerticalScrollIndicator |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview).                                                                                                                                                      |
67
 | showsVerticalScrollIndicator |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview).                                                                                                                                                      |
68
 | showsVerticalScrollIndicator |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview).                                                                                                                                                      |
68
 | showsVerticalScrollIndicator |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview).                                                                                                                                                      |
71
 ## demo
71
 ## demo
72
 
72
 
73
 ```
73
 ```
74
-npx react-native run-ios/anroid
74
+npx react-native run-ios/android
75
 ```
75
 ```
76
 
76
 
77
 You may have to use yarn to install the dependencies of the demo and remove "demo/node_modules/react-native-autoheight-webview/demo" manually, cause of installing a local package with npm will create symlink, but there is no supporting of React Native to symlink (https://github.com/facebook/watchman/issues/105) and "yarn install" ignores "files" from local dependencies (https://github.com/yarnpkg/yarn/issues/2822).
77
 You may have to use yarn to install the dependencies of the demo and remove "demo/node_modules/react-native-autoheight-webview/demo" manually, cause of installing a local package with npm will create symlink, but there is no supporting of React Native to symlink (https://github.com/facebook/watchman/issues/105) and "yarn install" ignores "files" from local dependencies (https://github.com/yarnpkg/yarn/issues/2822).

+ 6
- 6
autoHeightWebView/index.js Näytä tiedosto

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

+ 4
- 4
autoHeightWebView/utils.js Näytä tiedosto

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
   if (!document.getElementById("rnahw-wrapper")) {
97
   if (!document.getElementById("rnahw-wrapper")) {
107
   window.addEventListener('resize', updateSize);
107
   window.addEventListener('resize', updateSize);
108
   ${domMutationObserveScript}
108
   ${domMutationObserveScript}
109
   ${makeScalePageToFit(zoomable, scalesPageToFit)}
109
   ${makeScalePageToFit(zoomable, scalesPageToFit)}
110
-  ${scrollableWhenZoomin ? detectZoomChanged : ''}
110
+  ${scrollEnabledWithZoomedin ? detectZoomChanged : ''}
111
   updateSize();
111
   updateSize();
112
   `;
112
   `;
113
 
113
 
155
   </script>
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
   script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
160
   script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
161
   script = appendStylesToHead({ style: customStyle, script });
161
   script = appendStylesToHead({ style: customStyle, script });
162
   customScript && (script = customScript + script);
162
   customScript && (script = customScript + script);

+ 1
- 1
index.d.ts Näytä tiedosto

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

+ 1
- 1
package.json Näytä tiedosto

1
 {
1
 {
2
   "name": "react-native-autoheight-webview",
2
   "name": "react-native-autoheight-webview",
3
-  "version": "1.3.5",
3
+  "version": "1.3.6",
4
   "description": "An auto height webview for React Native, even auto width for inline html",
4
   "description": "An auto height webview for React Native, even auto width for inline html",
5
   "main": "autoHeightWebView",
5
   "main": "autoHeightWebView",
6
   "types": "index.d.ts",
6
   "types": "index.d.ts",