refactor(text-input): 添加外层view以解决小程序BUG

packages/rax-image/README.md

@@ -28,6 +28,7 @@ import Image from 'rax-image';
 | **属性**       | **类型**                                          | **默认值**  | **必填** | **描述**                                                                                | **支持**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 | -------------- | ------------------------------------------------- | ----------- | -------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | source         | `object: {uri: string}`                           | -           | true     | 设置图片的 uri                                                                          | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /><img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px"><img alt="bytedanceMicroApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px"><img alt="quickApp" src="https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg" width="25px" height="25px"> |
+| lazyLoad         | `boolean`                           | -           | false     | 是否开启懒加载（注：在Web上需要原生支持`loading="lazy"`）              | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /><img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px"><img alt="bytedanceMicroApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px"> |
 | style          | `object: { width: number height: number }`        | -           | true     | 图片样式 width 和 height 为必填属性，否则图片无法正常展示，可以补充其他属性             | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /><img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px"><img alt="bytedanceMicroApp" src="https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg" width="25px" height="25px"><img alt="quickApp" src="https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg" width="25px" height="25px"> |
 | fallbackSource | `object: {uri: string}`                           | -           | false    | 备用图片的 uri（当主图加载失败是加载）                                                  | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" />                                                                                                                                                                                                                                                          |
 | resizeMode     | `string： 'contain' 'cover' 'stretch'`            | -           | false    | 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小                                | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /><img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="quickApp" src="https://gw.alicdn.com/tfs/TB1MP7EwQT2gK0jSZPcXXcKkpXa-200-200.svg" width="25px" height="25px">                                                                                                                                                                                                                                                          |

packages/rax-image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rax-image",
-  "version": "2.2.1",
+  "version": "2.2.2-1",
   "description": "Image component for Rax.",
   "license": "BSD-3-Clause",
   "main": "lib/index.js",

packages/rax-image/src/index.tsx

@@ -1,6 +1,6 @@
-import { createElement, useState, useCallback } from 'rax';
-import { isWeex } from 'universal-env';
-import { ImageProps, Source, ImageLoadEvent, ImageNativeProps } from './types';
+import { createElement, useCallback, useState } from 'rax';
+import { isByteDanceMicroApp, isMiniApp, isWeb, isWeChatMiniProgram, isWeex } from 'universal-env';
+import { ImageLoadEvent, ImageNativeProps, ImageProps, Source } from './types';
 
 const EMPTY_SOURCE = {} as any as Source;
 
@@ -15,6 +15,7 @@ function Image({
   onError,
   style,
   resizeMode,
+  lazyLoad,
   ...otherProps
 }: ImageProps) {
   source = source || EMPTY_SOURCE;
@@ -81,12 +82,22 @@ function Image({
     }
   }
 
+  // For MiniApp runtime
+  if (isMiniApp || isWeChatMiniProgram || isByteDanceMicroApp) {
+    nativeProps['lazy-load'] = !!lazyLoad;
+  }
+  // For native lazyLoad support on Web
+  // see: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img
+  if (isWeb && lazyLoad) {
+    nativeProps['loading'] = 'lazy';
+  }
+
   // Set default quality to "original" in weex avoid image be optimized unexpect
-  return isWeex ? (
-    <image quality="original" {...nativeProps} />
-  ) : (
-    <img {...nativeProps} />
-  );
+  if (isWeex) {
+    return <image quality="original" {...nativeProps} />;
+  }
+
+  return <img {...nativeProps} />;
 }
 
 export default Image;

packages/rax-image/src/types.ts

@@ -50,6 +50,11 @@ export interface ImageProps extends HTMLAttributes<HTMLImageElement>, RefAttribu
    * support: Weex
    */
   quality?: 'original' | 'normal' | 'low' | 'high' | 'auto';
+  /**
+   * lazyLoad: enable lazy-load
+   * support: Web/MiniApp
+   */
+  lazyLoad?: boolean;
   /**
    * callback of success
    */

packages/rax-textinput/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rax-textinput",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "TextInput component for Rax.",
   "license": "BSD-3-Clause",
   "main": "lib/index.js",
@@ -43,16 +43,17 @@
     "babel-runtime-jsx-plus": "^0.1.4",
     "classnames": "^2.2.6",
     "rax-set-native-props": "^1.0.0",
+    "rax-view": "^1.0.1",
     "universal-env": "^3.2.0"
   },
   "peerDependencies": {
     "rax": "^1.0.0"
   },
   "devDependencies": {
-    "@types/rax": "^1.0.0",
     "@types/ali-app": "^1.0.0",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^24.0.12",
+    "@types/rax": "^1.0.0",
     "@typescript-eslint/eslint-plugin": "^1.7.0",
     "@typescript-eslint/parser": "^1.7.0",
     "csstype": "^2.6.4",
@@ -62,8 +63,7 @@
     "jest-transform-css": "^2.0.0",
     "rax": "^1.0.0",
     "rax-test-renderer": "^1.0.0",
-    "rax-text": "^1.0.1",
-    "rax-view": "^1.0.1"
+    "rax-text": "^1.0.1"
   },
   "jest": {
     "moduleNameMapper": {

packages/rax-textinput/src/index.css

@@ -1,13 +1,26 @@
-.rax-textinput {
-  appearance: none;
-  background-color: transparent;
+.rax-textinput-container {
   border-color: #000000;
   border-width: 0;
   box-sizing: border-box;
   color: #000000;
   padding: 0;
   padding-left: 24rpx;
-  font-size: 24rpx;
-  line-height: 60rpx;
   height: 60rpx;
 }
+
+.rax-textinput {
+  box-sizing: border-box;
+  appearance: none;
+  background-color: transparent;
+  font-size: 24rpx;
+  line-height: 32rpx;
+  height: 100%;
+  width: 100%;
+  padding-top: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.rax-textinput-input {
+  padding-bottom: 0;
+}

packages/rax-textinput/src/index.tsx

@@ -7,6 +7,7 @@ import {
   useEffect,
   useState
 } from 'rax';
+import View from 'rax-view';
 import { isWeex, isWeb, isWeChatMiniProgram, isNode } from 'universal-env';
 import setNativeProps from 'rax-set-native-props';
 import keyboardTypeMap from './keyboardTypeMap';
@@ -20,7 +21,6 @@ import {
 } from './types';
 import './index.css';
 
-declare const Fragment;
 let inputId = 0;
 
 function getText(event) {
@@ -52,7 +52,7 @@ const TextInput: ForwardRefExoticComponent<TextInputProps> = forwardRef(
     const styleClassName = `rax-textinput-placeholder-${inputId++}`;
 
     const {
-      className,
+      className = '',
       accessibilityLabel,
       autoComplete,
       editable,
@@ -146,57 +146,49 @@ const TextInput: ForwardRefExoticComponent<TextInputProps> = forwardRef(
       }
     });
 
-    if (multiline) {
-      return (
-        <Fragment>
-          {/* style should not render in miniapp */}
-          <style x-if={(isWeb || isNode) && placeholderColor} dangerouslySetInnerHTML={{ __html: `.${styleClassName}::placeholder {
-            color: ${placeholderColor}
-          }` }} />
-          <textarea
-            {...propsCommon}
-            className={['rax-textinput', styleClassName, className || ''].join(' ')}
-            style={{
-              ...style,
-              placeholderColor
-            }}
-            row={rows}
-            rows={rows}
-            disabled={disbaled}
-            onChange={handleChange}
-            value={value || defaultValue}
-            confirm-type={confirmType}
-            show-count={showCount}
-          >
-            {/* undefined will be rendered to comment node in ssr */}
-            {!isWeex && (propsCommon.value || defaultValue || '')}
-          </textarea>
-        </Fragment>
-      );
-    } else {
-      return (
-        <Fragment>
-          <style x-if={(isWeb || isNode) && placeholderColor} dangerouslySetInnerHTML={{ __html: `.${styleClassName}::placeholder {
-            color: ${placeholderColor}
-          }` }} />
-          <input
-            {...propsCommon}
-            className={['rax-textinput', styleClassName, className || ''].join(' ')}
-            style={{
-              ...style,
-              placeholderColor
-            }}
-            type={type}
-            disabled={disbaled}
-            value={value || defaultValue}
-            confirm-type={confirmType}
-            random-Number={randomNumber}
-            selection-start={selectionStart}
-            selection-end={selectionEnd}
+    return (
+      <View className={"rax-textinput-container " + className}>
+        {/* style should not render in miniapp */}
+        <style x-if={(isWeb || isNode) && placeholderColor} dangerouslySetInnerHTML={{ __html: `.${styleClassName}::placeholder {
+          color: ${placeholderColor}
+        }` }} />
+        <input
+          x-if={!multiline}
+          {...propsCommon}
+          className={['rax-textinput', 'rax-textinput-input', styleClassName].join(' ')}
+          style={{
+            ...style,
+            placeholderColor
+          }}
+          type={type}
+          disabled={disbaled}
+          value={value || defaultValue}
+          confirm-type={confirmType}
+          random-Number={randomNumber}
+          selection-start={selectionStart}
+          selection-end={selectionEnd}
           />
-        </Fragment>
-      );
-    }
+        <textarea
+          x-else
+          {...propsCommon}
+          className={['rax-textinput', 'rax-textinput-textarea', styleClassName].join(' ')}
+          style={{
+            ...style,
+            placeholderColor
+          }}
+          row={rows}
+          rows={rows}
+          disabled={disbaled}
+          onChange={handleChange}
+          value={value || defaultValue}
+          confirm-type={confirmType}
+          show-count={showCount}
+        >
+          {/* undefined will be rendered to comment node in ssr */}
+          {!isWeex && (propsCommon.value || defaultValue || '')}
+        </textarea>
+      </View>
+    );
   }
 );
 TextInput.displayName = 'TextInput';

packages/rax-textinput/src/miniapp-wechat/index.wxml

@@ -1,33 +1,35 @@
-<input wx:if="{{!multiline}}" class="rax-textinput {{className}}" 
-  style="{{styleSheet}}"
-  placeholder-style="color:{{placeholderColor}}"
-  focus="{{autoFocus}}"
-  disabled="{{!editable}}"
-  type="{{keyboardType}}"
-  maxlength="{{maxLength}}"
-  placeholder="{{placeholder}}"
-  password="{{password || secureTextEntry}}"
-  value="{{value || defaultValue}}"
-  confirm-type="{{confirmType}}"
-  selection-start="{{selectionStart}}"
-  selection-end="{{selectionEnd}}"
-  bindblur="onBlur"
-  bindfocus="onFocus"
-  bindinput="onInput"
-  bindconfirm="onConfirm">
-</input>
-<textarea wx:else class="rax-textinput {{className}}" 
-  style="{{styleSheet}}"
-  placeholder-style="color:{{placeholderColor}}"
-  auto-focus="{{autoFocus}}"
-  disabled="{{!editable}}"
-  maxlength="{{maxLength}}"
-  placeholder="{{placeholder}}"
-  value="{{value || defaultValue}}"
-  show-count="{{showCount}}"
-  bindblur="onBlur"
-  bindfocus="onFocus"
-  bindinput="onInput"
-  fixed="{{fixed}}"
-  bindconfirm="onConfirm"
-/>
+<view class="rax-textinput-container {{className}}">
+  <input wx:if="{{!multiline}}" class="rax-textinput rax-textinput-input" 
+    style="{{styleSheet}}"
+    placeholder-style="color:{{placeholderColor}}"
+    focus="{{autoFocus}}"
+    disabled="{{!editable}}"
+    type="{{keyboardType}}"
+    maxlength="{{maxLength}}"
+    placeholder="{{placeholder}}"
+    password="{{password || secureTextEntry}}"
+    value="{{value || defaultValue}}"
+    confirm-type="{{confirmType}}"
+    selection-start="{{selectionStart}}"
+    selection-end="{{selectionEnd}}"
+    bindblur="onBlur"
+    bindfocus="onFocus"
+    bindinput="onInput"
+    bindconfirm="onConfirm">
+  </input>
+  <textarea wx:else class="rax-textinput rax-textinput-textarea" 
+    style="{{styleSheet}}"
+    placeholder-style="color:{{placeholderColor}}"
+    auto-focus="{{autoFocus}}"
+    disabled="{{!editable}}"
+    maxlength="{{maxLength}}"
+    placeholder="{{placeholder}}"
+    value="{{value || defaultValue}}"
+    show-count="{{showCount}}"
+    bindblur="onBlur"
+    bindfocus="onFocus"
+    bindinput="onInput"
+    fixed="{{fixed}}"
+    bindconfirm="onConfirm"
+  />
+</view>

packages/rax-textinput/src/miniapp-wechat/index.wxss

@@ -1,12 +1,26 @@
-.rax-textinput{
-    appearance: 'none';
-    background-color: 'transparent';
-    border-color: '#000000';
-    border-width: 0;
-    box-sizing: 'border-box';
-    color: '#000000';
-    padding: 0;
-    padding-left: 24rpx;
-    font-size: 24rpx;
-    height: 60rpx;
-}
+.rax-textinput-container {
+  border-color: #000000;
+  border-width: 0;
+  box-sizing: border-box;
+  color: #000000;
+  padding: 0;
+  padding-left: 24rpx;
+  height: 60rpx;
+}
+
+.rax-textinput {
+  box-sizing: border-box;
+  appearance: none;
+  background-color: transparent;
+  font-size: 24rpx;
+  line-height: 32rpx;
+  height: 100%;
+  width: 100%;
+  padding-top: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.rax-textinput-input {
+  padding-bottom: 0;
+}