@uiw/react-avatar - npm Package Compare versions

Comparing version 4.21.23 to 5.0.0-bate.2.0

cjs/index.d.ts

 import React from 'react';
-import { IconProps } from '@uiw/react-icon';
 import { HTMLSpanProps } from '@uiw/utils';
-import './style/index.less';
+export * from './style';
 export interface AvatarProps extends HTMLSpanProps {
@@ -9,3 +8,3 @@ style?: React.CSSProperties;
     prefixCls?: string;
-    icon?: IconProps['type'];
+    icon?: React.ReactNode;
     alt?: string;
@@ -19,1 +18,2 @@ src?: string;
 export default _default;
+//# sourceMappingURL=index.d.ts.map

cjs/index.js

@@ -8,2 +8,3 @@ "use strict";
 });
+var _exportNames = {};
 exports["default"] = void 0;
@@ -14,4 +15,16 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactIcon = _interopRequireDefault(require("@uiw/react-icon"));
 var _utils = require("@uiw/utils");
+var _style = require("./style");
+Object.keys(_style).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _style[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _style[key];
+    }
+  });
+});
+var _reactIcon = require("@uiw/react-icon");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -43,3 +56,3 @@ var _excluded = ["prefixCls", "shape", "size", "className", "src", "alt", "icon", "onError"];
   if (isImgExist && src) {
-    children = /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+    children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.AvatarStyleImg, {
       src: src,
@@ -54,10 +67,10 @@ alt: alt,
     });
-  } else if (icon && typeof icon === 'string') {
-    children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcon["default"], {
-      type: icon
+  } else if (icon) {
+    children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcon.IconStyleBase, {
+      children: icon
     });
-  } else if (icon && /*#__PURE__*/_react["default"].isValidElement(icon)) {
-    children = icon;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, resetProps), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.AvatarStyleWarp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, resetProps), {}, {
+    size: size,
+    shape: shape,
     className: cls,
@@ -69,3 +82,2 @@ ref: ref,
 exports["default"] = _default;
-module.exports = exports.default;
 //# sourceMappingURL=index.js.map

esm/index.d.ts

 import React from 'react';
-import { IconProps } from '@uiw/react-icon';
 import { HTMLSpanProps } from '@uiw/utils';
-import './style/index.less';
+export * from './style';
 export interface AvatarProps extends HTMLSpanProps {
@@ -9,3 +8,3 @@ style?: React.CSSProperties;
     prefixCls?: string;
-    icon?: IconProps['type'];
+    icon?: React.ReactNode;
     alt?: string;
@@ -19,1 +18,2 @@ src?: string;
 export default _default;
+//# sourceMappingURL=index.d.ts.map

esm/index.js

@@ -5,8 +5,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import Icon from '@uiw/react-icon';
 import { noop } from '@uiw/utils';
-import "./style/index.css";
-import { useState } from 'react';
-import { useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import { AvatarStyleWarp, AvatarStyleImg } from './style';
+import { IconStyleBase } from '@uiw/react-icon';
 import { jsx as _jsx } from "react/jsx-runtime";
+export * from './style';
 export default /*#__PURE__*/React.forwardRef((props, ref) => {
@@ -31,3 +31,3 @@ var {
   if (isImgExist && src) {
-    children = /*#__PURE__*/_jsx("img", {
+    children = /*#__PURE__*/_jsx(AvatarStyleImg, {
       src: src,
@@ -42,10 +42,10 @@ alt: alt,
     });
-  } else if (icon && typeof icon === 'string') {
-    children = /*#__PURE__*/_jsx(Icon, {
-      type: icon
+  } else if (icon) {
+    children = /*#__PURE__*/_jsx(IconStyleBase, {
+      children: icon
     });
-  } else if (icon && /*#__PURE__*/React.isValidElement(icon)) {
-    children = icon;
   }
-  return /*#__PURE__*/_jsx("span", _extends({}, resetProps, {
+  return /*#__PURE__*/_jsx(AvatarStyleWarp, _extends({}, resetProps, {
+    size: size,
+    shape: shape,
     className: cls,
@@ -52,0 +52,0 @@ ref: ref,

package.json

 {
   "name": "@uiw/react-avatar",
-  "version": "4.21.23",
+  "version": "5.0.0-bate.2.0",
   "description": "Avatar component",
@@ -44,8 +44,9 @@ "author": "Kenny Wong <[e-mail]>",
     "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react-dom": ">=16.9.0",
+    "styled-components": ">=5.3.5"
   },
   "dependencies": {
-    "@uiw/react-icon": "^4.21.23",
-    "@uiw/utils": "^4.21.23"
+    "@uiw/react-icon": "^5.0.0-bate.2.0",
+    "@uiw/utils": "^5.0.0-bate.2.0"
   }
 }

README.md

@@ -20,24 +20,23 @@ Avatar 头像
 
-```jsx mdx:preview
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
 import { Avatar, Icon } from 'uiw';
 
-export default function Demo() {
-  return (
+function Demo() {
+  return <div>
+    <div style={{ paddingBottom: 20 }}>
+      <Avatar size="large" icon={<Icon type="user"/>} />
+      <Avatar icon={<Icon type="user"/>} />
+      <Avatar size="small" icon={<Icon type="user"/>} />
+      <Avatar size="mini" icon={<Icon type="user"/>} />
+    </div>
     <div>
-      <div style={{ paddingBottom: 20 }}>
-        <Avatar size="large" icon={<Icon type="user"/>} />
-        <Avatar icon="user" />
-        <Avatar size="small" icon="user" />
-        <Avatar size="mini" icon={<Icon type="user"/>} />
-      </div>
-      <div>
-        <Avatar shape="square" size="large" icon="user" />
-        <Avatar shape="square" icon="user" />
-        <Avatar shape="square" size="small" icon="user" />
-        <Avatar shape="square" size="mini" icon="user" />
-      </div>
+      <Avatar shape="square" size="large"icon={<Icon type="user"/>} />
+      <Avatar shape="square" icon={<Icon type="user"/>}  />
+      <Avatar shape="square" size="small" icon={<Icon type="user"/>} />
+      <Avatar shape="square" size="mini" icon={<Icon type="user"/>}  />
     </div>
-  )
+  </div>
 }
+export default Demo
 ```
@@ -49,17 +48,16 @@
 
-```jsx mdx:preview
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
 import { Avatar, Icon } from 'uiw';
 
-export default function Demo() {
-  return (
-    <div>
-      <Avatar icon={<Icon type="user"/>} />
-      <Avatar>U</Avatar>
-      <Avatar src="https://avatars2.githubusercontent.com/u/1680273?s=40&v=4" />
-      <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
-      <Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
-    </div>
-  )
+function Demo() {
+  return <div>
+    <Avatar icon={<Icon type="user"/>} />
+    <Avatar>U</Avatar>
+    <Avatar src="https://avatars2.githubusercontent.com/u/1680273?s=40&v=4" />
+    <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
+    <Avatar style={{ backgroundColor: '#87d068' }} icon={<Icon type="user"/>} />
+  </div>
 }
+export default Demo
 ```
@@ -71,3 +69,3 @@
 
-```jsx mdx:preview
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
@@ -101,3 +99,3 @@ import { Avatar, Icon } from 'uiw';
 
-export default App;
+export default App
 ```
@@ -107,18 +105,17 @@
 
-```jsx mdx:preview
+```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
 import React from 'react';
-import { Avatar, Badge } from 'uiw';
+import { Avatar, Badge,Icon } from 'uiw';
 
-export default function Demo() {
-  return (
-    <div>
-      <span style={{ marginRight: 24 }}>
-        <Badge count={1}><Avatar shape="square" icon="user" /></Badge>
-      </span>
-      <span>
-        <Badge dot><Avatar shape="square" icon="user" /></Badge>
-      </span>
-    </div>
-  )
-}
+function Demo() {
+  return <div>
+    <span style={{ marginRight: 24 }}>
+      <Badge count={1}><Avatar shape="square" icon={<Icon type="user"/>}  /></Badge>
+    </span>
+    <span>
+      <Badge dot><Avatar shape="square" icon={<Icon type="user"/>}  /></Badge>
+    </span>
+  </div>
+};
+export default Demo
 ```
@@ -130,4 +127,4 @@
 |--------- |-------- |--------- |-------- |
-| icon | 设置头像的图标类型，参考 Icon 组件 | String、ReactNode | - |
-| shape | 指定头像的形状 `square` 正方形或者 `circle` 圆	 | Enum{'`circle`', '`square`' } | - |
+| icon | 设置头像的图标类型，参考 Icon 组件 | ReactNode | - |
+| shape | 指定头像的形状 `square` 正方形或者 `circle` 圆 | Enum{'`circle`', '`square`' } | - |
 | size | 设置头像的大小 | Enum{ '`large`', '`small`','`mini`', '`default`' } | `default` |
@@ -134,0 +131,0 @@ | src | 图片类头像的资源地址 | String | - |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50685

increased by105.39%

Number of package files

17

increased by13.33%

Lines of code

483

increased by46.81%

Worsened metrics

Dependency count

5

increased by25%

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

128

decreased by-2.29%

Dependency changes

• + Added@emotion/is-prop-valid@1.2.2(transitive)

• + Added@emotion/memoize@0.8.1(transitive)

• + Added@emotion/unitless@0.8.1(transitive)

• + Added@types/stylis@4.2.5(transitive)

• + Added@uiw/icons@2.6.1(transitive)

• + Added@uiw/react-icon@5.0.0-bate-9(transitive)

• + Added@uiw/utils@5.0.0-bate-9(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-to-react-native@3.2.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addednanoid@3.3.8(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.38(transitive)

• + Addedpostcss-value-parser@4.2.0(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedstyled-components@6.1.13(transitive)

• + Addedstylis@4.3.2(transitive)

• + Addedtslib@2.6.2(transitive)

• - Removed@uiw/icons@2.6.10(transitive)

• - Removed@uiw/react-icon@4.22.3(transitive)

• - Removed@uiw/utils@4.22.3(transitive)

• Updated@uiw/react-icon@^5.0.0-bate.2.0

• Updated@uiw/utils@^5.0.0-bate.2.0