New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

rax-image

Package Overview
Dependencies
Maintainers
7
Versions
121
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rax-image - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

lib/miniapp/fmtEvent.d.ts
lib/miniapp/fmtEvent.js
lib/miniapp/index.acss
lib/miniapp/index.axml
lib/miniapp/index.d.ts
lib/miniapp/index.js
lib/miniapp/index.json
lib/types.d.ts
lib/types.js
src/index.tsx
src/miniapp/fmtEvent.ts
src/miniapp/index.acss
src/miniapp/index.axml
src/miniapp/index.json
src/miniapp/index.ts
src/types.ts

140

lib/index.d.ts

@@ -1,137 +0,3 @@

import * as Rax from "rax";
import {BaseProps} from "rax";
/**
* component: image(图片)
* document address(文档地址)：
* https://alibaba.github.io/rax/component/image
*/
export interface ImageSource {
uri: string;
width?: number
height?: number
}
export interface ImageProps extends BaseProps {
/**
* image source
*/
source: ImageSource;
/**
* Decide how to adjust the size of the picture when the component size and picture size are out of proportion,
* Please refer to the resizeMode definition in the component
* (决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小，请参照组件中的resizeMode定义)
*/
resizeMode?: string;
/**
* the load event is fired when the picture specified by src is loaded.
* (当加载完成 src 指定的图片时，load事件将被触发)
* @param {ImageLoadEvent} event
*/
load?: (event: ImageLoadEvent) => void;
}
/**
* reference documents(参考文档):https://weex.apache.org/cn/references/components/image.html
*/
interface ImageLoadEvent {
/**
* Whether the tag image was loaded successfully.
* (标记图片是否成功加载。)
*/
readonly success: boolean;
/**
* loaded image size object, property list
* (加载的图片大小对象，属性列表)
*/
readonly size: {
/**
* the width of the picture, 0 if the picture fails to load.
* (图片宽度，如果图片加载失败则为0)
*/
readonly naturalWidth: number,
/**
* image height, 0 if the image failed to load
* (图片高度，如果图片加载失败则为0)
*/
readonly naturalHeight: number
}
}
declare class Image extends Rax.Component<ImageProps, any> {
static resizeMode: {
/**
* scale the picture to fully fit in the <image> area. It is possible that the background area is partially blank.
* (缩放图片以完全装入<image>区域，可能背景区部分空白。)
*/
contain: 'contain',
/**
* scale the picture to completely cover the <image> area, possibly invisible part of the picture
* (缩放图片以完全覆盖<image>区域，可能图片部分看不见)
*/
cover: 'cover',
/**
* scale the picture according to the width and height of the <image> area
* 按照<image>区域的宽高比例缩放图片
*/
stretch: 'stretch',
/**
* centered
* (居中)
*/
center: 'center',
/**
* tiled horizontally and vertically
* (在横向和纵向平铺)
*/
repeat: 'repeat',
};
render(): JSX.Element;
/**
* save image content to a local file or album. This may require device-related permissions.
* (保存图片内容到本地文件或相册，此操作可能需要设备相关权限。)
*/
save: (callback: (result: {
/**
* whether the tag image has been written
* (标记图片是否已写入完成)
*/
readonly success: boolean;
/**
* if the image was not successfully written, the string contains a detailed description of the error
* (如果图像没有成功写入，该字符串包含了详细的错误描述)
*/
readonly errorDesc: string;
}) => void) => void;
}
export default Image;
import { Props } from './types';
declare const _default: import("@rax-types/rax").ForwardRefExoticComponent<Props & import("@rax-types/rax").RefAttributes<unknown>>;
export default _default;

66

lib/index.js

@@ -12,4 +12,2 @@ "use strict";

var _index = _interopRequireDefault(require("./index.css"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -19,6 +17,4 @@

var _styleSheet = _index.default;
var Image = function Image(props) {
var _useState = (0, _rax.useState)(''),
var Image = function Image(props, ref) {
var _useState = (0, _rax.useState)({}),
source = _useState[0],

@@ -33,17 +29,2 @@ setSource = _useState[1];

var onLoad = function onLoad(e) {
var _props$onLoad = props.onLoad,
onLoad = _props$onLoad === void 0 ? function () {} : _props$onLoad;
if (typeof e.success !== 'undefined') {
if (e.success) onLoad(e);else onError(e);
} else if (typeof e.currentTarget !== 'undefined') {
if (e.currentTarget.naturalWidth > 1 && e.currentTarget.naturalHeight > 1) {
onLoad(e);
} else {
onError(e);
}
}
};
var onError = function onError(e) {

@@ -63,10 +44,23 @@ var _props$fallbackSource = props.fallbackSource,

var save = function save(callback) {
imgRef.current.save(function (result) {
callback(result);
});
var onLoad = function onLoad(e) {
var _props$onLoad = props.onLoad,
onLoad = _props$onLoad === void 0 ? function () {} : _props$onLoad;
if (typeof e.success !== 'undefined') {
if (e.success) onLoad(e);else onError(e);
} else if (typeof e.currentTarget !== 'undefined') {
if (e.currentTarget.naturalWidth > 1 && e.currentTarget.naturalHeight > 1) {
onLoad(e);
} else {
onError(e);
}
}
};
var nativeProps = _extends({}, props);
(0, _rax.useImperativeHandle)(ref, function () {
return {
_nativeNode: imgRef.current
};
});
var nativeProps = Object.assign({}, props);
source = isError ? source : nativeProps.source; // Source must a object

@@ -86,3 +80,3 @@

nativeProps.style = _extends({}, _extends({}, {
nativeProps.style = Object.assign({}, Object.assign({
display: 'flex'

@@ -117,3 +111,7 @@ }, {

}, nativeProps)), (0, _rax.createElement)(_raxView.default, {
style: _styleSheet["absoluteImage"]
style: {
left: 0,
top: 0,
position: 'absolute'
}
}, props.children));

@@ -130,10 +128,4 @@ } else {

Image.resizeMode = {
contain: 'contain',
cover: 'cover',
stretch: 'stretch',
center: 'center',
repeat: 'repeat'
};
var _default = Image;
var _default = (0, _rax.forwardRef)(Image);
exports.default = _default;

55

package.json
{
"name": "rax-image",
"version": "1.0.2",
"version": "1.0.3",
"description": "Image component for Rax.",
"license": "BSD-3-Clause",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"scripts": {
"start": "rax-scripts start",
"build": "rax-scripts build",
"test": "jest",
"lint": "eslint --ext .js --ext .jsx ./src"
"clean": "rm -rf ./lib && rm -rf ./package-lock.json",
"build": "npm run clean && rax-scripts build --type 'component'",
"start": "rax-scripts start --type 'component' -p 8000",
"miniapp": "rax-scripts start --type 'component-miniapp'",
"prepublishOnly": "npm run build",
"test": "npm run build && rax-scripts test",
"lint": "eslint --ext .js --ext .jsx --ext .ts --ext .tsx ./src"
},

@@ -24,4 +28,3 @@ "files": [

"Rax",
"rax-component",
"react-component"
"rax-component"
],

@@ -36,4 +39,4 @@ "bugs": {

"dependencies": {
"rax-view": "1.0.0",
"universal-env": "^0.6.5"
"universal-env": "^1.0.0",
"rax-view": "^1.0.1"
},

@@ -44,24 +47,18 @@ "peerDependencies": {

"devDependencies": {
"@rax-types/rax": "^1.0.5",
"@types/ali-app": "^1.0.0",
"@types/jest": "^24.0.12",
"@typescript-eslint/eslint-plugin": "^1.7.0",
"@typescript-eslint/parser": "^1.7.0",
"csstype": "^2.6.4",
"driver-universal": "^1.0.0-beta.5",
"eslint": "^5.16.0",
"eslint-config-rax": "^0.0.0",
"rax": "^1.0.0",
"@babel/core": "7.2.0",
"@babel/plugin-proposal-class-properties": "7.2.0",
"@babel/plugin-proposal-decorators": "7.2.0",
"@babel/plugin-proposal-export-default-from": "7.2.0",
"@babel/plugin-transform-runtime": "^7.2.0",
"babel-plugin-transform-jsx-stylesheet": "0.6.5",
"@babel/preset-env": "7.2.0",
"@babel/preset-flow": "7.0.0",
"@babel/preset-react": "7.0.0",
"rax-test-renderer": "^1.0.0",
"rax-scripts": "^1.2.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "10.0.1",
"babel-jest": "23.6.0",
"babel-preset-rax": "^0.6.5",
"eslint": "^5.10.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-react": "~7.11.1",
"jest": "^23.6.0",
"jest-localstorage-mock": "^2.3.0"
"rax-scripts": "1.2.1",
"rax-test-renderer": "^1.0.0"
},
"miniappConfig": {
"main": "lib/miniapp/index"
}
}

135

README.md

@@ -5,6 +5,7 @@ # Image

Based on the realization of the type of image, a better picture can be displayed using Picture components.
**描述：**
Image用于展示图片
## Install
## 安装

@@ -14,5 +15,4 @@ ```bash

```
## 引用
## Import
```jsx

@@ -22,68 +22,93 @@ import Image from 'rax-image';

## Props
## 属性
| name | type | default | describe |
| :------------- | :----- | :------ | :--------------------------- |
| source | Object | '' | set image uri |
| fallbackSource | Object | '' | load fallback image when source image load failed |
| style | Object | '' | if picture is not set wide high default is 0x0 |
| resizeMode | String | '' | Decide how to resize the image when the component size and picture size are out of proportion |
注：
1、**支持**列表中的 <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" />代表h5 <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" />代表weex <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" />代表小程序
Support any custom attributes.
| **属性** | **类型** | **默认值** | ** 必填 ** | **描述** | ** 支持 ** |
| ----------- | ---------- | ---------- | ------------ | ------------------ | ------------ |
| source | `Object: {uri: String}` | - | true | 设置图片的 uri | ALL |
| style | `Object: { width: Number height: Number }` | - | true | 图片样式 width和height为必填属性，否则图片无法正常展示，可以补充其他属性| ALL |
| fallbackSource | `Object: {uri: String}` | - | false | 备用图片的uri（当主图加载失败是加载） | ALL |
| resizeMode | `String： 'contain' 'cover' 'stretch'` | - | false | 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小 | ALL |
| quality | `String: 'original' 'normal' 'low' 'high' 'auto'` | - | false | 图片质量 | <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" />|
| placeholder | `String` | - | false | 占位图的 URL，在图片下载过程中将展示占位图，图片下载完成后将显示source中指定的图片。 | <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" />|
| onLoad | `Function` | - | false | 图片加载成功的回调函数 | ALL |
| onError | `Function` | - | false | 图片加载失败的回调函数 | ALL |
resizeMode supported values include：contain、cover、stretch、center、repeat
## Local image sample
### onLoad onError 返回
Before you use it, check that image-source-loader is already enabled in webpack.config.js
当完成图片加载成功/失败时，将分别触发onLoad/onError中的回调函数 function(event) => {}
weex下（iOS/Android）
| **成员** | **类型** |** 描述** |
| --- | --- | --- |
| success | `boolean` | 标记图片是否成功加载，成功为1/true，失败为0/false |
| size | `object` | 加载的图片大小对象 |
| size.naturalWidth | `number` | 图片宽度，如果图片加载失败则为0/-1 |
| size.naturalHeight | `number` | 图片高度，如果图片加载失败则为0/-1 |
h5下是web原生的Event事件
| **成员** | **类型** |** 描述** |
| --- | --- | --- |
| target | `Dom` | 图片自身元素 |
| target.naturalWidth | `number` | 图片宽度 |
| target.naturalHeight | `number` | 图片高度 |
## 示例
### 普通示例
```jsx
import {createElement, Component, render} from 'rax';
import Image from 'rax-image';
import {createElement, render} from 'rax';
import DU from 'driver-universal';
import Image from '../src/index';
class App extends Component {
render() {
return (
<Image
source={require('./path/to/your/image.png')}
fallbackSource={{
uri: 'https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_70x70.jpg'
}}
resizeMode="cover"
/>
);
}
}
const App = () => {
const imageRef = useRef(null);
return (
<Image
ref={imageRef}
source={{
uri: 'https://gw.alicdn.com/tfs/TB1bBD0zCzqK1RjSZFpXXakSXXa-68-67.png',
}}
style={{
height: '68',
width: '67'
}}
/>
);
};
render(<App />);
render(<App />, document.body, { driver: DU });
```
## URL image sample
### 使用fallbackSource和resizeMode
```jsx
// demo
import {createElement, Component, render} from 'rax';
import Image from 'rax-image';
import {createElement, render} from 'rax';
import DU from 'driver-universal';
import Image from '../src/index';
class App extends Component {
render() {
return (
<Image
source={{
uri: 'https://gw.alicdn.com/tfs/TB1g6AvPVXXXXa7XpXXXXXXXXXX-215-215.png'
}}
fallbackSource={{
uri: 'https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_70x70.jpg'
}}
style={{
width: 100,
height: 100,
}}
resizeMode="cover"
/>
);
}
}
const App = () => {
return (
<Image
source={{
uri: 'https://gw.alicdn.com/tfs/TB1g6AvPVXXXXa7XpXXXXXXXXXX-215-215.png'
}}
fallbackSource={{
uri: 'https://gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_70x70.jpg'
}}
style={{
width: 100,
height: 100,
}}
resizeMode="cover"
/>
);
};
render(<App />);
render(<App />, document.body, { driver: DU });
```

2

src/__tests__/Image.js
import {createElement, Component} from 'rax';
import renderer from 'rax-test-renderer';
import Image from '../';
import Image from '../../lib/';

@@ -5,0 +5,0 @@ describe('Image', () => {

2

src/__tests__/Image.weex.js
import {createElement} from 'rax';
import renderer from 'rax-test-renderer';
import Image from '../';
import Image from '../../lib/';

@@ -5,0 +5,0 @@ jest.mock('universal-env', () => {

dist/image.factory.js
dist/image.factory.map
dist/image.js
dist/image.map
dist/image.min.js
dist/image.min.map
lib/index.css
src/index.css
src/index.d.ts
src/index.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc