feat(hippy-react): support horizontal PullHeader & PullFooter

docs/en-us/_navbar.md

@@ -30,6 +30,12 @@
   * [Custom UI Components](ios/custom-component.md)
   * [Custom Modules](ios/custom-module.md)
 
+* Web
+  * [Web Integration](web/integration.md)
+  * [Web Events](web/event.md)
+  * [Custom UI Components](web/custom-component.md)
+  * [Custom Modules](web/custom-module.md)
+
 * Hippy-React
   * [Introduction](hippy-react/introduction.md)
   * [Components](hippy-react/components.md)

docs/en-us/_sidebar.md

@@ -4,6 +4,7 @@
 * [Get Started](guide/integration.md)
 * [Android](android/integration.md)
 * [iOS](ios/integration.md)
+* [Web](web/integration.md)
 * [Hippy-React](hippy-react/introduction.md)
 * [Hippy-Vue](hippy-vue/introduction.md)
 * [Style](style/layout.md)

docs/en-us/hippy-react/modules.md

@@ -17,6 +17,8 @@
 
 > Note that when switching to the web, you need to use the setRef method to manually pass in the ref to run the animation normally. hippy-react-web does not support color gradient animation.
 
+> iOS skew animation minimum supported version `2.14.1`
+
 ## Construction Attributes
 
 | Props            | Type                                        | Required | Default value | Description                                                                                                                                                                                                                                                    |
@@ -25,14 +27,14 @@
 | delay            | `number`                                    | yes      | -             | The animation delay start time, in milliseconds, the default is 0, that is, the animation will be executed immediately after the animation starts; the number of rows in the specified list is generally directly passed in the number of data source`length`. |
 | startValue       | `number`,`string`,  [color](style/color.md) | yes      | -             | The value at the beginning of the animation, which can be of type Number or String. If it is a color value, refer to [color](style/color.md).                                                                                                                  |
 | toValue          | `number`,`string`,  [color](style/color.md) | yes      | -             | The value at the end of the animation; If it is a color value, refer to [color](style/color.md).                                                                                                                                                               |
-| valueType\*      | `enum(undefined,rad,deg,color)`             | no       | null          | The type of the start and end values of the animation, the default is empty, and the unit that indicates the start and end of the animation is a common Number. PS: The parameter on the web platform only supports the number type.                           |
+| valueType\*      | `enum(undefined,rad,deg,color)`             | no       | undefined `(rotate、skew default unit is rad)`          | The type of the start and end values of the animation, the default is empty, and the unit that indicates the start and end of the animation is a common Number. PS: The parameter on the web platform only supports the number type.                           |
 | duration         | `number`                                    | no       | -             | Animation duration, in milliseconds(ms).                                                                                                                                                                                                                       |
 | timingFunction\* | `string`                                    | no       | linear        | Animation interpolator type, support`linear`,`ease-in`,`ease-out`,`ease-in-out`,`cubic-bezier`.                                                                                                                                                                |
 | repeatCount      | `number`,`loop`                             | no       | -             | The number of repetitions of the animation. The default is 0, which means it will be played only once; when it is -1 or "loop", it means infinite loop playback; when repeatCount is set to n, the animation will be played n times.                           |
 
 - Other options for valueType:
 
-  - `rad`: Indicates that the starting and ending values of the animation parameters are in radians.
+  - `rad`: Indicates that the starting and ending values of the animation parameters are in radians, `this is default unit of rotate and skew`.
   - `deg`: Indicates that the starting and ending values of the animation parameters are in degrees.
   - `color`: Indicates that the starting and ending values of the animation parameters are color values, which can modify the background color `backgroundColor` and text color `color` (only supported by Android), refer to [examples.](//github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/src/modules/Animation/index.jsx) `Minimum supported version 2.6.0`
 

docs/en-us/hippy-react/web.md

@@ -43,7 +43,7 @@ This configuration shows the minimum configuration for running Hippy on the web,
 
 hippy-react-web and hippy-react have the same startup parameters and can share the same `main.js` entry file.
 
-# Npm Script
+# NPM Script
 
 hippy-react-web uses [webpack-dev-server](//webpack.js.org/configuration/dev-server/) to start debugging, which supports all web debugging features. At the same time, use the same configuration file and use webpack for packaging.
 
@@ -60,6 +60,6 @@ The command here actually refers to the Vue project generated by vue-cli, starts
 
 Web debugging will start after executing `npm run serve`, but note that the default generated HTML file name is defined from the `name` field of `package.json`, not the default `index.html`, so for the official example , you need to use `http://localhost:8080/hippy-react-demo.html` to access the debugging page.
 
-# New Scheme For Adapting To The Web
+# WebRenderer Scheme
 
-In the future, Hippy will adopt the `WebRenderer` scheme to add a conversion layer based on common communication protocols. Business developers can use the same set of Hippy syntax to map business code to components and modules implemented in JavaScript. Whether the upper layer uses React, Vue or other third-party frameworks, it can be compatible, so stay tuned.
+Hippy use [`WebRenderer`](web/integration.md) scheme to add a conversion layer based on common communication protocols. Business developers can use the same set of Hippy syntax to map business code to components and modules implemented in JavaScript. Whether the upper layer uses React, Vue or other third-party frameworks, it can be compatible.

docs/en-us/hippy-vue/components.md

@@ -264,7 +264,8 @@ Please refer to the Android development documentation for details.
 
 | Event Name          | Description                                                         | Type                                      | Supported Platforms |
 | ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
-| blur                | Called when the text box loses focus.    | `Function`                                                   | `Android、iOS`     |
+| blur                | Called when the text box is blurred. | `Function`                                                   | `Android、iOS`     |
+| focus | Called when the text box is focused. | `Function` | `Android、iOS` |
 | change          | Called when the contents of the text box change. The changed text is passed as a parameter. | `Function`                                                   | `Android、iOS`     |
 | keyboardWillShow    | Called when the input keyboard pops-up, the return value contains the keyboard height `keyboardHeight`, style such as `{keyboardHeight: 260 }`| `Function`                                                   | `Android、iOS`     |
 | keyboardWillHide     | Called when hiding input keyboard.| `Function`                                                   | `Android`     |
@@ -288,14 +289,20 @@ Please refer to the Android development documentation for details.
 
 ### getValue
 
-`() => Promise<string>` Get the contents of the text box.
+`() => Promise<string>` Get the contents of the text box. Caution, value may be changed since the callback is asynchronous.
 
 ### setValue
 
 `(value: string) => void` Sets the text box contents.
 
 > * value: string - Text Box Contents
 
+### isFocused
+
+`Minimum supported version 2.14.1. hippy-react-web does not support.`
+
+`() => Promise<boolean>`Get the focus status of the input box. Caution, value may be changed since the callback is asynchronous.
+
 ---
 
 # label
@@ -321,17 +328,19 @@ Show the text. All the same as [p](hippy-vue/components.md?id=p)。
 
 Hippy's key features, high performance reusable list components, on the native side will be mapped to `ListView`, contains all abilities of `ListView`. The first layer inside can only contain `<li>`.
 
+!> Android replaced `ListView` with `RecyclerView` after `2.14.0`
+
 ## Attributes
 
 | Props                  | Description                                                         | Type                                                        | Supported Platforms |
 | --------------------- | ------------------------------------------------------------ | ----------------------------------------------------------- | -------- |
-| horizontal       | Specifies whether `ul` is laid out horizontally. `default: undefined` | `any`   | `Android`    |
+| horizontal       | Specifies whether `ul` is laid out horizontally. `default: undefined`, Android can set `false` after `2.14.1`. iOS not supported horizontal `ul`. | `boolean`  \| `undefined`   | `Android`    |
 | initialContentOffset  | The initial offset value. In the list of initialization can specify the scroll distance, avoid flashing caused by series method of scrollT after oinitialization. Android supports after version ` 2.8.0 `  | `number`  | `Android、iOS` |
-| bounces | Whether to open the rebound effect, default `true` | `boolean`                                                  | `iOS`    |
-| overScrollEnabled | Whether to open the rebound effect, default `true` | `boolean`                                                  | `Android`    |
+| bounces | Whether to open the rebound effect, default `true`, Android supports this attribute after `2.14.1`, `overScrollEnabled` can be used in old version | `boolean`                                                  | `Android, iOS`    |
+| overScrollEnabled | Whether to open the rebound effect, default `true`, it will be deprecated in version 3.0 | `boolean`                                                  | `Android`    |
 | rowShouldSticky  | Sets whether `ul` needs to turn on the hover ability, used in conjunction with `li` 's `sticky`. `default: false` | `boolean`  | `Android、iOS`
 | scrollEnabled    | Whether the slide function is on.`default: true` | `boolean` | `Android、iOS` |
-| scrollEventThrottle   | Specify the sliding event callback frequency, the incoming value specifies how many milliseconds (ms) components will call a `onScroll` callback event, the default is 200 ms | `number`                                                    | `Android、iOS`    |
+| scrollEventThrottle   | Specify the sliding event callback frequency, the incoming value specifies how many milliseconds (ms) components will call a `onScroll` callback event, the default is 200 ms | `number`                                                    | `Android, iOS`    |
 | showScrollIndicator   | Whether scroll bars are displayed. `default: true` | `boolean`                                                   | `iOS`    |
 | preloadItemNumber     | Specifies the number of rows that will call the `endReached` function when the list scrolls.| `number` | `Android、iOS` |
 | exposureEventEnabled | The switch to enable Android exposure ability, if you want to use the `appear` and `disappear` related events, Android needs to set the switch (iOS need not set), `default: true` | `boolean` | `Android`
@@ -384,8 +393,8 @@ ul's child nodes, the minimum granularity of the native layer node recycling and
 
 | Props                  | Description                                                         | Type                                                        | Supported Platforms |
 | --------------------- | ------------------------------------------------------------ | ----------------------------------------------------------- | -------- |
-| type            | Specify a function in which the type of the corresponding entry is returned (the natural number of the Number type is returned, and the default value is 0). List will reuse the entries of the same type, so reasonable type splitting can improve the performance of List. `Note: item components of the same type may not go through the complete component creation life cycle due to reuse.` | `number`              | `Android、iOS`    |
-| key             | Specify a function in which the Key value of the corresponding entry is returned. See [Vue Official Document](//cn.vuejs.org/v2/guide/list.html) | `string`                                    | `Android、iOS`    |
+| type            | Specify a value which is the type of the corresponding item (the natural number, and the default value is 0). List will reuse the entries of the same type, so reasonable type splitting can improve the performance of List. `Note: item components of the same type may not go through the complete component creation life cycle due to reuse.` | `number`              | `Android、iOS`    |
+| key             | Specify a value which is the key of the corresponding item. See [Vue Official Document](//cn.vuejs.org/v2/guide/list.html) | `string`                                    | `Android、iOS`    |
 | sticky       | Whether the corresponding item needs to use the hover effect (scroll to the top, will hover at the top of the ListView, won't roll out of the screen), with `ul` `rowShouldSticky`| `boolean`                                | `Android、iOS`
 | appear       | Called when a `li` node slides into the screen (exposure), the parameter returns the index value corresponding to the `li` node of the exposure. | `(index) => any` | `Android、iOS` |
 | disappear       | Called when a `li` node slides away from the screen, and the parameter returns the index value corresponding to the `li` node that left. | `(index) => any` | `Android、iOS` |
@@ -415,13 +424,13 @@ Display text, but because there is no `display: Inline` display mode, the defaul
 | ------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- |
 | numberOfLines | Used to trim text when it is too long. The total number of lines, including line breaks caused by folding, will not exceed the limit of this property. | `number`                                  | `Android、iOS`    |
 | opacity       | Configure the transparency of the `View`, at the same time will affect the transparency of the child nodes.             | `number`                                  | `Android、iOS`    |
-| ellipsizeMode* | When set the `numberOfLines` value, this parameter specifies how the string is truncated. So when using `ellipsizeMode`, `numberOfLines` value must be specified at the same time. | `enum(head, middle, tail, clip)` | `Android only supports the tail attribute, iOS fully supports it`    |
+| ellipsizeMode* | When set the `numberOfLines` value, this parameter specifies how the string is truncated. So when using `ellipsizeMode`, `numberOfLines` value must be specified at the same time. `default: tail` | `enum(head, middle, tail, clip)` | `Android( minimum supported version 2.14.1, earlier version only supported tail)、iOS(full supported)、hippy-react-web(clip、ellipsis)` |
 
 * The meaning of parameters of ellipsizeMode：
-  * `clip` - Texts that exceed the specified number of lines will be truncated directly, "..." will not shows;(iOS only)
-  * `head` - Texts will be truncated from the beginning. To ensure that the string at the end of the text can be displayed at the end of the `Text` components, the texts will be truncated from the beginning. The truncated text will be replaced by "...". For example,"...wxyz ";(iOS only)
-  * `middle` - Text will be truncated from the middle to ensure that the last and first text of the string can be displayed in the response position of the Text component normally. And the text truncated in the middle will be replaced by "..." For example,"ab ab.."yz ";(iOS only)
-  * `tail` - Text will be truncated from the end to ensure that the first text of the string can be displayed normally in the front of the Text component, and the text truncated from the end will be replaced by "..." For example, "abcd ...";
+  * `clip` - Texts that exceed the specified number of lines will be truncated directly, "..." will not shows;(Android  2.14.1+, iOS full supported)
+  * `head` - Texts will be truncated from the beginning. To ensure that the string at the end of the text can be displayed at the end of the `Text` components, the texts will be truncated from the beginning. The truncated text will be replaced by "...". For example,"...wxyz ";(Android  2.14.1+, iOS full supported)
+  * `middle` - Text will be truncated from the middle to ensure that the last and first text of the string can be displayed in the response position of the Text component normally. And the text truncated in the middle will be replaced by "..." For example,"ab ab.."yz ";(Android  2.14.1+, iOS full supported)
+  * `tail`(default value) - Text will be truncated from the end to ensure that the first text of the string can be displayed normally in the front of the Text component, and the text truncated from the end will be replaced by "..." For example, "abcd ...";
 
 ---
 

docs/en-us/hippy-vue/external-components.md

@@ -101,6 +101,8 @@ export default {
   > * Set `playing = false`=> replace actions => delay after a certain time (such as setTimeout) or in `actionsDidUpdate` (supported after 2.14.0), set `playing = true`
    
   > Version `2.12.2` and the above support parameters `repeatCount: 'loop'`, use `repeatCount: -1` for lower version.
+
+  > iOS version `2.14.1` and the above support skew animation. 
    
   > Version `2.6.0` and the above support `backgroundColor` background color gradient animation, reference [gradient animation DEMO](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/animations/color-change.vue)
   >
@@ -214,7 +216,7 @@ Subcontainer of the flipping component container.
 
 # pull-header
 
-[[Example: demo-pull-header.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-pull-header.vue)
+[[Example: demo-pull-header.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-pull-header-footer.vue)
 
 Dropdown refresh component, nested in `ul` as first child element
 
@@ -240,7 +242,7 @@ Dropdown refresh component, nested in `ul` as first child element
 
 # pull-footer
 
-[[Example: demo-pull-footer.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-pull-footer.vue)
+[[Example: demo-pull-footer.vue]](//github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/native-demos/demo-pull-header-footer.vue)
 
 Pull-up refresh component, nested in `ul` as last child element
 

docs/en-us/ios/integration.md

@@ -38,6 +38,10 @@ This tutorial shows how to integrate Hippy into an iOS project.
 
     * fork Hippy source code, change `hippy.podspec`, add the config below to `user_target`, and include this source code.
 
+    ```text
+    s.user_target_xcconfig = {'OTHER_LDFLAGS' => '-force_load "${PODS_CONFIGURATION_BUILD_DIR}/hippy/libhippy.a"'}
+    ```
+
 4. Execute in the command line
 
     ```text

docs/en-us/web/_sidebar.md

@@ -0,0 +1,6 @@
+<!-- docs/android/_sidebar.md -->
+
+* [Web Integration](web/integration.md)
+* [Web Events](web/event.md)
+* [Custom UI Components](web/custom-component.md)
+* [Custom Modules](web/custom-module.md)