Skip to content

Commit fbfc4a5

Browse files
xiaoyatongxiaoyatong
committed
fix: avatar taro >max fixed, lint fixed
1 parent 586f1c8 commit fbfc4a5

File tree

2 files changed

+93
-94
lines changed

2 files changed

+93
-94
lines changed

‎src/packages/avatar/avatar.taro.tsx‎

Lines changed: 48 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@ import React, {
44
useRef,
55
FunctionComponent,
66
useContext,
7+
useCallback,
78
} from 'react'
89
import type { MouseEvent } from 'react'
910
import Taro, { getEnv } from '@tarojs/taro'
1011
import classNames from 'classnames'
1112
import { User } from '@nutui/icons-react-taro'
12-
import Image from '@/packages/image/index.taro'
1313
import { AvatarContext } from '@/packages/avatargroup/context'
14+
import Image from '@/packages/image/index.taro'
1415
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
1516
import AvatarGroup from '@/packages/avatargroup/index.taro'
1617

@@ -34,9 +35,9 @@ const defaultProps = {
3435
size: '',
3536
shape: 'round',
3637
icon: '',
37-
fit: 'cover',
3838
background: '#eee',
3939
color: '#666',
40+
fit: 'cover',
4041
src: '',
4142
alt: '',
4243
} as AvatarProps
@@ -52,9 +53,9 @@ export const Avatar: FunctionComponent<
5253
background,
5354
color,
5455
src,
56+
alt,
5557
icon,
5658
fit,
57-
alt,
5859
className,
5960
style,
6061
onClick,
@@ -67,14 +68,15 @@ export const Avatar: FunctionComponent<
6768

6869
const [maxSum, setMaxSum] = useState(0) // avatarGroup里的avatar的个数
6970
const [showMax, setShowMax] = useState(false) // 是否显示的最大头像个数
70-
const [avatarIndex, setAvatarIndex] = useState(1) // avatar的索引
71+
const [avatarIndex, setAvatarIndex] = useState(1)
7172
const avatarRef = useRef<any>(null)
7273
const parent: any = useContext(AvatarContext)
7374
const sizeValue = ['large', 'normal', 'small']
75+
const { propAvatarGroup, avatarGroupRef } = parent
7476

7577
const classes = classNames({
76-
[`nut-avatar-${parent?.propAvatarGroup?.size || size || 'normal'}`]: true,
77-
[`nut-avatar-${parent?.propAvatarGroup?.shape || shape}`]: true,
78+
[`nut-avatar-${propAvatarGroup?.size || size || 'normal'}`]: true,
79+
[`nut-avatar-${propAvatarGroup?.shape || shape}`]: true,
7880
})
7981
const cls = classNames(classPrefix, classes, className)
8082

@@ -84,27 +86,53 @@ export const Avatar: FunctionComponent<
8486
backgroundColor: `${background}`,
8587
color,
8688
marginLeft:
87-
avatarIndex !== 1 && parent?.propAvatarGroup?.gap
88-
? `${parent?.propAvatarGroup?.gap}px`
89+
avatarIndex !== 1 && propAvatarGroup?.gap
90+
? `${propAvatarGroup?.gap}px`
8991
: '',
9092
zIndex:
91-
parent?.propAvatarGroup?.level === 'right'
93+
propAvatarGroup?.level === 'right'
9294
? `${Math.abs(maxSum - avatarIndex)}`
9395
: '',
9496
...style,
9597
}
9698

9799
const maxStyles: React.CSSProperties = {
98-
backgroundColor: `${parent?.propAvatarGroup?.maxBackground}`,
99-
color: `${parent?.propAvatarGroup?.maxColor}`,
100+
backgroundColor: `${propAvatarGroup?.maxBackground}`,
101+
color: `${propAvatarGroup?.maxColor}`,
100102
}
101103

104+
const avatarLength = useCallback(
105+
(children: any) => {
106+
for (let i = 0; i < children.length; i++) {
107+
if (
108+
children[i] &&
109+
children[i].classList &&
110+
isAvatarInClassList(children[i])
111+
) {
112+
children[i].setAttribute('data-index', i + 1)
113+
}
114+
}
115+
const index = Number(avatarRef?.current?.dataset?.index)
116+
const maxCount = propAvatarGroup?.max
117+
setMaxSum(children.length)
118+
setAvatarIndex(index)
119+
if (
120+
index === children.length &&
121+
index !== maxCount &&
122+
children.length > maxCount
123+
) {
124+
setShowMax(true)
125+
}
126+
},
127+
[propAvatarGroup?.max]
128+
)
129+
102130
useEffect(() => {
103-
const avatarChildren = parent?.avatarGroupRef?.current.children
131+
const avatarChildren = avatarGroupRef?.current.children
104132
if (avatarChildren) {
105133
avatarLength(avatarChildren)
106134
}
107-
}, [])
135+
}, [avatarLength, avatarGroupRef])
108136

109137
const isAvatarInClassList = (element: any) => {
110138
if (getEnv() === Taro.ENV_TYPE.WEB) {
@@ -120,33 +148,8 @@ export const Avatar: FunctionComponent<
120148
)
121149
}
122150

123-
const avatarLength = (children: any) => {
124-
for (let i = 0; i < children.length; i++) {
125-
if (
126-
children[i] &&
127-
children[i].classList &&
128-
isAvatarInClassList(children[i])
129-
) {
130-
children[i].setAttribute('data-index', i + 1)
131-
}
132-
}
133-
const index = avatarRef?.current?.dataset?.index
134-
const maxCount = parent?.propAvatarGroup?.max
135-
setMaxSum(children.length)
136-
setAvatarIndex(index)
137-
if (
138-
index === children.length &&
139-
index !== maxCount &&
140-
children.length > maxCount
141-
) {
142-
setShowMax(true)
143-
}
144-
}
145-
146151
const errorEvent = () => {
147-
if (onError) {
148-
onError()
149-
}
152+
onError && onError()
150153
}
151154

152155
const clickAvatar = (e: MouseEvent<HTMLDivElement>) => {
@@ -156,17 +159,16 @@ export const Avatar: FunctionComponent<
156159
return (
157160
<>
158161
{(showMax ||
159-
!parent?.propAvatarGroup?.max ||
160-
avatarIndex <= parent?.propAvatarGroup?.max) && (
162+
!propAvatarGroup?.max ||
163+
avatarIndex <= propAvatarGroup?.max) && (
161164
<div
162165
className={cls}
163166
{...rest}
164167
style={!showMax ? styles : maxStyles}
165168
onClick={clickAvatar}
166169
ref={avatarRef}
167170
>
168-
{(!parent?.propAvatarGroup?.max ||
169-
avatarIndex <= parent?.propAvatarGroup?.max) && (
171+
{(!propAvatarGroup?.max || avatarIndex <= propAvatarGroup?.max) && (
170172
<>
171173
{src && (
172174
<Image
@@ -186,14 +188,11 @@ export const Avatar: FunctionComponent<
186188
{!src && !icon && !children && <User className="icon" />}
187189
</>
188190
)}
189-
{/* 折叠头像 */}
190191
{showMax && (
191192
<div className="text">
192-
{parent?.propAvatarGroup?.maxContent
193-
? parent?.propAvatarGroup?.maxContent
194-
: `+ ${
195-
avatarIndex - Number(parent?.propAvatarGroup?.max || 0)
196-
}`}
193+
{propAvatarGroup?.maxContent
194+
? propAvatarGroup?.maxContent
195+
: `+ ${avatarIndex - Number(propAvatarGroup?.max || 0)}`}
197196
</div>
198197
)}
199198
</div>

‎src/packages/avatar/avatar.tsx‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import React, {
44
useRef,
55
FunctionComponent,
66
useContext,
7+
useCallback,
78
} from 'react'
89
import type { MouseEvent } from 'react'
910
import classNames from 'classnames'
@@ -16,10 +17,10 @@ import AvatarGroup from '@/packages/avatargroup'
1617
export interface AvatarProps extends BasicComponent {
1718
size: string
1819
icon: React.ReactNode
19-
fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
2020
shape: AvatarShape
2121
background: string
2222
color: string
23+
fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
2324
src: string
2425
alt: string
2526
onClick: (e: MouseEvent<HTMLDivElement>) => void
@@ -70,10 +71,11 @@ export const Avatar: FunctionComponent<
7071
const avatarRef = useRef<any>(null)
7172
const parent: any = useContext(AvatarContext)
7273
const sizeValue = ['large', 'normal', 'small']
74+
const { propAvatarGroup, avatarGroupRef } = parent
7375

7476
const classes = classNames({
75-
[`nut-avatar-${parent?.propAvatarGroup?.size || size || 'normal'}`]: true,
76-
[`nut-avatar-${parent?.propAvatarGroup?.shape || shape}`]: true,
77+
[`nut-avatar-${propAvatarGroup?.size || size || 'normal'}`]: true,
78+
[`nut-avatar-${propAvatarGroup?.shape || shape}`]: true,
7779
})
7880
const cls = classNames(classPrefix, classes, className)
7981

@@ -83,55 +85,56 @@ export const Avatar: FunctionComponent<
8385
backgroundColor: `${background}`,
8486
color,
8587
marginLeft:
86-
avatarIndex !== 1 && parent?.propAvatarGroup?.gap
87-
? `${parent?.propAvatarGroup?.gap}px`
88+
avatarIndex !== 1 && propAvatarGroup?.gap
89+
? `${propAvatarGroup?.gap}px`
8890
: '',
8991
zIndex:
90-
parent?.propAvatarGroup?.level === 'right'
92+
propAvatarGroup?.level === 'right'
9193
? `${Math.abs(maxSum - avatarIndex)}`
9294
: '',
9395
...style,
9496
}
9597

9698
const maxStyles: React.CSSProperties = {
97-
backgroundColor: `${parent?.propAvatarGroup?.maxBackground}`,
98-
color: `${parent?.propAvatarGroup?.maxColor}`,
99+
backgroundColor: `${propAvatarGroup?.maxBackground}`,
100+
color: `${propAvatarGroup?.maxColor}`,
99101
}
100102

101-
useEffect(() => {
102-
const avatarChildren = parent?.avatarGroupRef?.current.children
103-
if (avatarChildren) {
104-
avatarLength(avatarChildren)
105-
}
106-
}, [])
107-
108-
const avatarLength = (children: any) => {
109-
for (let i = 0; i < children.length; i++) {
103+
const avatarLength = useCallback(
104+
(children: any) => {
105+
for (let i = 0; i < children.length; i++) {
106+
if (
107+
children[i] &&
108+
children[i].classList &&
109+
children[i].classList[0] === 'nut-avatar'
110+
) {
111+
children[i].setAttribute('data-index', i + 1)
112+
}
113+
}
114+
const index = Number(avatarRef.current?.dataset?.index)
115+
const maxCount = propAvatarGroup?.max
116+
setMaxSum(children.length)
117+
setAvatarIndex(index)
110118
if (
111-
children[i] &&
112-
children[i].classList &&
113-
children[i].classList[0] === 'nut-avatar'
119+
index === children.length &&
120+
index !== maxCount &&
121+
children.length > maxCount
114122
) {
115-
children[i].setAttribute('data-index', i + 1)
123+
setShowMax(true)
116124
}
125+
},
126+
[propAvatarGroup?.max]
127+
)
128+
129+
useEffect(() => {
130+
const avatarChildren = avatarGroupRef?.current.children
131+
if (avatarChildren) {
132+
avatarLength(avatarChildren)
117133
}
118-
const index = Number(avatarRef?.current?.dataset?.index)
119-
const maxCount = parent?.propAvatarGroup?.max
120-
setMaxSum(children.length)
121-
setAvatarIndex(index)
122-
if (
123-
index === children.length &&
124-
index !== maxCount &&
125-
children.length > maxCount
126-
) {
127-
setShowMax(true)
128-
}
129-
}
134+
}, [avatarLength, avatarGroupRef])
130135

131136
const errorEvent = () => {
132-
if (onError) {
133-
onError()
134-
}
137+
onError && onError()
135138
}
136139

137140
const clickAvatar = (e: MouseEvent<HTMLDivElement>) => {
@@ -141,17 +144,16 @@ export const Avatar: FunctionComponent<
141144
return (
142145
<>
143146
{(showMax ||
144-
!parent?.propAvatarGroup?.max ||
145-
avatarIndex <= parent?.propAvatarGroup?.max) && (
147+
!propAvatarGroup?.max ||
148+
avatarIndex <= propAvatarGroup?.max) && (
146149
<div
147150
className={cls}
148151
{...rest}
149152
style={!showMax ? styles : maxStyles}
150153
onClick={clickAvatar}
151154
ref={avatarRef}
152155
>
153-
{(!parent?.propAvatarGroup?.max ||
154-
avatarIndex <= parent?.propAvatarGroup?.max) && (
156+
{(!propAvatarGroup?.max || avatarIndex <= propAvatarGroup?.max) && (
155157
<>
156158
{src && (
157159
<Image
@@ -174,11 +176,9 @@ export const Avatar: FunctionComponent<
174176
)}
175177
{showMax && (
176178
<div className="text">
177-
{parent?.propAvatarGroup?.maxContent
178-
? parent?.propAvatarGroup?.maxContent
179-
: `+ ${
180-
avatarIndex - Number(parent?.propAvatarGroup?.max || 0)
181-
}`}
179+
{propAvatarGroup?.maxContent
180+
? propAvatarGroup?.maxContent
181+
: `+ ${avatarIndex - Number(propAvatarGroup?.max || 0)}`}
182182
</div>
183183
)}
184184
</div>

0 commit comments

Comments
 (0)