@yeeyoon/library 3.3.0 → 3.3.4

package/lib/components/AvatarPackaged/index.jsx

@@ -18,11 +18,20 @@ const AvatarInfo = ({
 	style,
 	showInfo = true, // 是否展示信息卡片
 	size = 30,
+	mode,
+	blocked = false,
 	...rest
 }) => {
-	const CustomAvatar = (
-		<span>
-			{icon || name || id ? (
+	const CustomAvatar =
+		mode === 'group' ? (
+			<div style={{ position: 'relative' }}>
+				<div
+					className={`${blocked ? styles.blocked : styles.unDisplay} ${
+						styles['user-avatar-blocked-scale']
+					}`}
+				>
+					已屏蔽
+				</div>
 				<Avatar
 					size={size}
 					shape={shape}
@@ -30,15 +39,35 @@ const AvatarInfo = ({
 					src={icon || defaultHeadUrl}
 					style={{ ...defaultUserStyle, ...style }}
 				/>
-			) : null}
-			{showName &&
-				(icon || name || id ? (
-					<span className={styles['user-avatar-name']}>{name || '-'}</span>
-				) : (
-					'-'
-				))}
-		</span>
-	);
+			</div>
+		) : (
+			<span>
+				{icon || name || id ? (
+					<div style={{ position: 'relative' }}>
+						<div
+							className={`${blocked ? styles.blocked : styles.unDisplay} ${
+								styles['user-avatar-blocked-scale']
+							}`}
+						>
+							已屏蔽
+						</div>
+						<Avatar
+							size={size}
+							shape={shape}
+							className={styles['user-avatar-scale']}
+							src={icon || defaultHeadUrl}
+							style={{ ...defaultUserStyle, ...style }}
+						/>
+					</div>
+				) : null}
+				{showName &&
+					(icon || name || id ? (
+						<span className={styles['user-avatar-name']}>{name || '-'}</span>
+					) : (
+						'-'
+					))}
+			</span>
+		);
 
 	return showInfo && id ? (
 		<Popover
@@ -76,7 +105,7 @@ const AvatarPackaged = ({ data, maxCount = 5, maxStyle, ...rest }) => {
 			}
 		>
 			{data.map((x, i) => (
-				<AvatarInfo key={i} {...rest} {...x} />
+				<AvatarInfo key={i} {...rest} {...x} mode="group" />
 			))}
 		</Avatar.Group>
 	) : data ? (
@@ -91,9 +120,11 @@ AvatarInfo.propTypes = {
 	showName: PropTypes.bool,
 	placement: PropTypes.string,
 	shape: PropTypes.string,
+	mode: PropTypes.string,
 	size: PropTypes.number,
 	style: PropTypes.object,
 	showInfo: PropTypes.bool,
+	blocked: PropTypes.bool,
 };
 
 AvatarPackaged.propTypes = {

package/lib/components/AvatarPackaged/style.less

@@ -12,9 +12,37 @@
 }
 :global {
 	.ant-list:not(.ant-list-lg):not(.ant-list-sm) .ant-list-item {
-		padding: 12px 0px !important;
+		padding: 12px 0 !important;
 	}
 	.ant-progress-text {
 		font-size: 0.7em;
 	}
 }
+.blocked {
+	position: absolute;
+	top: -14px;
+	left: -14px;
+	z-index: 2;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 58px;
+	height: 58px;
+	color: #b4b7bd;
+	font-size: 16px;
+	background: rgba(0, 0, 0, 0.6);
+	border-radius: 12px;
+	transform: scale(0.5);
+}
+.unDisplay {
+	display: none;
+}
+
+.user-avatar-blocked-scale {
+	&:hover {
+		transform: scale(0.6);
+	}
+}
+.user-avatar-blocked-scale:hover + .user-avatar-scale {
+	transform: scale(1.2);
+}

package/lib/components/InfoCard/index.jsx

@@ -12,7 +12,7 @@ function InfoCart(props) {
 	const { baseMsg, ...rest } = props;
 	const reg = /^(\d{3})\d*(\d{4})$/;
 	const [cardData, setCardData] = useState({});
-	const [chartData, setChartData] = useState({});
+	const [chartData, setChartData] = useState([]);
 	const [projectData] = useState([
 		{
 			title: '贡献数据',

package/lib/utils/utils.js

@@ -81,9 +81,9 @@ export function mergeTableColumnCommonConfig(config) {
 							render: (_, record) => {
 								const key = item.dataIndex;
 								let data;
-								if (key === 'creator') {
+								if (key === 'creator.name') {
 									data = record.creator;
-								} else if (key === 'updater') {
+								} else if (key === 'updater.name') {
 									data = record.updater;
 								}
 								return <UserAvatar data={data} showName={true} />;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yeeyoon/library",
-  "version": "3.3.0",
+  "version": "3.3.4",
   "description": "宜云前端组件库和通用服务",
   "main": "index.js",
   "repository": {

package/src/global.css

@@ -4,7 +4,7 @@ html, body, #root {
 
 body {
   margin: 0;
-	background-color: #000 !important;
+	/* background-color: #000 !important; */
 }
 
 body * {

package/src/pages/index.js

@@ -1,14 +1,17 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import Header from '../../lib/components/Header/';
+import TenantSelector from '../../lib/components/TenantSelector';
 
 // eslint-disable-next-line react/display-name
 export default function () {
-	const [tenantId, setTenantId] = useState('');
-	useEffect(() => {
-		setTimeout(() => {
-			setTenantId('053a033a063711ecb0c00c42a1ff8370');
-			// setTenantId('f12a71b6063611ecb0c00c42a1ff8370');
-		}, 3000);
-	}, []);
-	return <Header productName="bpm" tenantId={tenantId} />;
+	return (
+		<>
+			<Header productName="bpm" slot={<div>nasa</div>} />
+			<TenantSelector
+				tenantId="b7b0e19414927b878814094f33b43543"
+				appId="bbe5c8f0063711ecb0c00c42a1ff8370"
+				tenantIdChangeCb={() => {}}
+			/>
+		</>
+	);
 }