fix(docs): refresh controllable example when parent element resized

Author: chengpeiquan

docs/src/components/examples/middle-truncate/ControllableMiddleTruncate.tsx

@@ -7,6 +7,7 @@ import {
   EW,
 } from '@/components/examples/Widgets'
 import { useLang, type Languages } from '@/i18n'
+import { useRefreshKey } from '@/hooks/use-refresh-key'
 
 export const ControllableMiddleTruncate: React.FC<{
   lang: Languages
@@ -17,6 +18,8 @@ export const ControllableMiddleTruncate: React.FC<{
   const [end, setEnd] = useState(DEFAULT_END_VALUE)
   const [html, setHtml] = useState(DEFAULT_HTML_VALUE)
 
+  const { refreshKey } = useRefreshKey([width, end])
+
   return (
     <>
       <EW.Range
@@ -26,7 +29,7 @@ export const ControllableMiddleTruncate: React.FC<{
         min="50"
         max="100"
         defaultValue={DEFAULT_WIDTH_VALUE}
-        onChange={(v) => setWidth(v)}
+        onChange={setWidth}
       />
 
       <EW.Range
@@ -36,19 +39,19 @@ export const ControllableMiddleTruncate: React.FC<{
         min="-100"
         max="100"
         defaultValue={DEFAULT_END_VALUE}
-        onChange={(v) => setEnd(v)}
+        onChange={setEnd}
         percentable={false}
       />
 
       <EW.Switch
         lang={lang}
         labelKey="example.html"
         checked={html}
-        onChange={(v) => setHtml(v)}
+        onChange={setHtml}
       />
 
       <EW.Container style={{ width: `${width}%` }}>
-        <MiddleTruncate separator={isZh ? '' : ' '} end={end}>
+        <MiddleTruncate separator={isZh ? '' : ' '} end={end} key={refreshKey}>
           <EW.Content isZh={isZh} html={html} />
         </MiddleTruncate>
       </EW.Container>

docs/src/components/examples/show-more/ControllableShowMore.tsx

@@ -12,6 +12,7 @@ import {
   EW,
 } from '@/components/examples/Widgets'
 import { useLang, type Languages } from '@/i18n'
+import { useRefreshKey } from '@/hooks/use-refresh-key'
 
 const CustomButton: React.FC<{
   type: 'more' | 'less'
@@ -48,6 +49,8 @@ export const ControllableShowMore: React.FC<{
     ref.current?.toggleLines(e)
   }
 
+  const { refreshKey } = useRefreshKey([width, lines, html, custom])
+
   return (
     <>
       <EW.Range
@@ -87,6 +90,7 @@ export const ControllableShowMore: React.FC<{
 
       <EW.Container style={{ width: `${width}%` }}>
         <ShowMore
+          key={refreshKey}
           ref={ref}
           lines={lines}
           separator={isZh ? '' : ' '}

docs/src/hooks/use-refresh-key.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react'
+
+export const useRefreshKey = (deps: unknown[]) => {
+  const [refreshKey, setRefreshKey] = useState(Date.now())
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      setRefreshKey(Date.now())
+    })
+  }, [deps])
+
+  return {
+    refreshKey,
+  }
+}