Fix/comment expand error #4502
Fix/comment expand error #4502
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
src/common/utils/detect.ts
Outdated
|
|
||
| export const checkIsSafariVersionLessThan17 = () => { | ||
| const userAgent = navigator.userAgent | ||
| const safariMatch = userAgent.match(/Version\/(\d+\.\d+)/) |
There was a problem hiding this comment.
Need a better RegExp to match Safari.
Here is one from GPT:
/^Mozilla\/5\.0 \(Macintosh; Intel Mac OS X \d+_\d+(?:_\d+)?\) AppleWebKit\/\d+(?:\.\d+)* \(KHTML, like Gecko\) Version\/\d+\.\d+(?:\.\d+)* Safari\/\d+(?:\.\d+)*$/
There was a problem hiding this comment.
This is not applicable to Apple M series chips?
There was a problem hiding this comment.
Here is mine: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15
src/components/Expandable/index.tsx
Outdated
| collapseable = true, | ||
| bgColor = 'white', | ||
| }) => { | ||
| const [expandable, setExpandable] = useState(false) | ||
| const [firstRender, setFirstRender] = useState(true) | ||
| const [isOverFlowing, setIsOverFlowing] = useState(false) | ||
| const [expand, setExpand] = useState(true) |
There was a problem hiding this comment.
rename to expanded / setExpanded or isExpanded / setIsExpanded would be clearer
src/components/Expandable/index.tsx
Outdated
| if (!node?.current) { | ||
| return | ||
| } | ||
| if (checkOverflow(node.current, limit, buffer, isRichShow, isComment)) { |
There was a problem hiding this comment.
There is only one place to use checkOverflow, could we move it back to handleOverflowCheck to avoid unnecessary props passing?
src/components/Expandable/index.tsx
Outdated
| if (isSafariVersionLessThan17 && isRichShow) { | ||
| reset() | ||
| setIsRichShow(false) | ||
| setTimeout(() => { |
There was a problem hiding this comment.
should avoid using setTimeout, can add another useEffect hook or merge it into L148 instead:
useEffect(() => {
handleOverflowCheck()
}, [...])or
useIsomorphicLayoutEffect(() => {
reset()
handleOverflowCheck()
}, [content, isRichShow])There was a problem hiding this comment.
use async function instead of setTimeout
src/components/Expandable/index.tsx
Outdated
| const [firstRender, setFirstRender] = useState(true) | ||
| const [expand, setExpand] = useState(true) | ||
| const [isOverFlowing, setIsOverFlowing] = useState(false) | ||
| const [isExpand, setIsExpand] = useState(true) |
No description provided.