diff --git a/packages/rax-image/README.md b/packages/rax-image/README.md index 6f311bbb..79fd6970 100644 --- a/packages/rax-image/README.md +++ b/packages/rax-image/README.md @@ -28,6 +28,7 @@ import Image from 'rax-image'; | **属性** | **类型** | **默认值** | **必填** | **描述** | **支持** | | -------------- | ------------------------------------------------- | ----------- | -------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | source | `object: {uri: string}` | - | true | 设置图片的 uri | browserweexminiAppwechatMiniprogrambytedanceMicroAppquickApp | +| lazyLoad | `boolean` | - | false | 是否开启懒加载（注：在Web上需要原生支持`loading="lazy"`） | browserminiAppwechatMiniprogrambytedanceMicroApp | | style | `object: { width: number height: number }` | - | true | 图片样式 width 和 height 为必填属性，否则图片无法正常展示，可以补充其他属性 | browserweexminiAppwechatMiniprogrambytedanceMicroAppquickApp | | fallbackSource | `object: {uri: string}` | - | false | 备用图片的 uri（当主图加载失败是加载） | browserweex | | resizeMode | `string： 'contain' 'cover' 'stretch'` | - | false | 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小 | browserweexquickApp | diff --git a/packages/rax-image/package.json b/packages/rax-image/package.json index 70ff5004..39f75093 100644 --- a/packages/rax-image/package.json +++ b/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", diff --git a/packages/rax-image/src/index.tsx b/packages/rax-image/src/index.tsx index 6ceb399a..afa7ec32 100644 --- a/packages/rax-image/src/index.tsx +++ b/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 ? ( - - ) : ( - - ); + if (isWeex) { + return ; + } + + return ; } export default Image; diff --git a/packages/rax-image/src/types.ts b/packages/rax-image/src/types.ts index 8257f8a0..9ba76f45 100644 --- a/packages/rax-image/src/types.ts +++ b/packages/rax-image/src/types.ts @@ -50,6 +50,11 @@ export interface ImageProps extends HTMLAttributes, RefAttribu * support: Weex */ quality?: 'original' | 'normal' | 'low' | 'high' | 'auto'; + /** + * lazyLoad: enable lazy-load + * support: Web/MiniApp + */ + lazyLoad?: boolean; /** * callback of success */ diff --git a/packages/rax-textinput/package.json b/packages/rax-textinput/package.json index 353337ab..84c6fbc6 100644 --- a/packages/rax-textinput/package.json +++ b/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": { diff --git a/packages/rax-textinput/src/index.css b/packages/rax-textinput/src/index.css index fe48fb40..5b5d7b48 100644 --- a/packages/rax-textinput/src/index.css +++ b/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; +} diff --git a/packages/rax-textinput/src/index.tsx b/packages/rax-textinput/src/index.tsx index 116130a8..70a3122e 100644 --- a/packages/rax-textinput/src/index.tsx +++ b/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 = forwardRef( const styleClassName = `rax-textinput-placeholder-${inputId++}`; const { - className, + className = '', accessibilityLabel, autoComplete, editable, @@ -146,57 +146,49 @@ const TextInput: ForwardRefExoticComponent = forwardRef( } }); - if (multiline) { - return ( - - {/* style should not render in miniapp */} -