dark
4 months ago
16 changed files with 349 additions and 122 deletions
-
4src/App.css
-
14src/components/avatar/index.tsx
-
2src/components/table/style.ts
-
2src/global.d.ts
-
65src/hooks/useInlineStyle.ts
-
63src/hooks/useResizeObserver.ts
-
20src/layout/ListPageLayout.tsx
-
25src/layout/RootLayout.tsx
-
21src/layout/TwoColPageLayout.tsx
-
17src/layout/style.ts
-
8src/pages/system/menus/index.tsx
-
5src/pages/websites/domain/index.tsx
-
5src/store/system.ts
-
11src/store/system/user.ts
-
3src/utils/index.ts
@ -0,0 +1,65 @@ |
|||
import React, { useEffect, useRef } from 'react' |
|||
|
|||
interface UseStyleOptions { |
|||
selector?: string; |
|||
styles: React.CSSProperties & { [key: `--${string}`]: string }; |
|||
} |
|||
|
|||
const applyStyles = (element: HTMLElement, styles: React.CSSProperties) => { |
|||
Object.entries(styles).forEach(([ key, value ]) => { |
|||
element.style.setProperty(key, value as string) |
|||
}) |
|||
} |
|||
|
|||
const removeStyles = (element: HTMLElement, styles: React.CSSProperties) => { |
|||
Object.keys(styles).forEach(key => { |
|||
element.style.removeProperty(key) |
|||
}) |
|||
} |
|||
|
|||
function useInlineStyle({ selector, styles }: UseStyleOptions) { |
|||
const elementRef = useRef<HTMLElement | null>(null) |
|||
|
|||
useEffect(() => { |
|||
|
|||
|
|||
let targetElement: HTMLElement | null = null |
|||
|
|||
const manageStyles = () => { |
|||
targetElement = selector ? document.querySelector<HTMLElement>(selector) : elementRef.current |
|||
|
|||
if (!targetElement) return |
|||
|
|||
applyStyles(targetElement, styles) |
|||
|
|||
return () => { |
|||
if (targetElement) { |
|||
removeStyles(targetElement, styles) |
|||
} |
|||
} |
|||
} |
|||
|
|||
if (selector) { |
|||
if (document.readyState === 'complete' || document.readyState === 'interactive') { |
|||
manageStyles() |
|||
} else { |
|||
document.addEventListener('DOMContentLoaded', manageStyles) |
|||
return () => { |
|||
document.removeEventListener('DOMContentLoaded', manageStyles) |
|||
} |
|||
} |
|||
} else { |
|||
manageStyles() |
|||
} |
|||
|
|||
return () => { |
|||
if (targetElement) { |
|||
removeStyles(targetElement, styles) |
|||
} |
|||
} |
|||
}, [ selector, styles ]) |
|||
|
|||
return elementRef |
|||
} |
|||
|
|||
export default useInlineStyle |
@ -0,0 +1,63 @@ |
|||
import { useState, useEffect, useRef } from 'react' |
|||
|
|||
interface UseResizeObserverOptions { |
|||
selector?: string; |
|||
} |
|||
|
|||
interface Size { |
|||
width: number; |
|||
height: number; |
|||
inlineSize: number; |
|||
blockSize: number; |
|||
} |
|||
|
|||
function useResizeObserver({ selector }: UseResizeObserverOptions = {}) { |
|||
const [ size, setSize ] = useState<Size>({ width: 0, height: 0, inlineSize: 0, blockSize: 0 }) |
|||
const elementRef = useRef<HTMLElement | null>(null) |
|||
|
|||
useEffect(() => { |
|||
const handleResize = (entries: ResizeObserverEntry[]) => { |
|||
if (entries[0]) { |
|||
const [ { inlineSize, blockSize } ] = entries[0].borderBoxSize |
|||
const { width, height } = entries[0].contentRect |
|||
setSize({ width, height, inlineSize, blockSize }) |
|||
} |
|||
} |
|||
|
|||
let resizeObserver: ResizeObserver | null = null |
|||
let targetElement: HTMLElement | null = null |
|||
|
|||
const observeElement = () => { |
|||
targetElement = selector ? document.querySelector<HTMLElement>(selector) : elementRef.current |
|||
|
|||
if (!targetElement) return |
|||
|
|||
resizeObserver = new ResizeObserver(handleResize) |
|||
resizeObserver.observe(targetElement) |
|||
} |
|||
|
|||
if (selector) { |
|||
if (document.readyState === 'complete' || document.readyState === 'interactive') { |
|||
observeElement() |
|||
} else { |
|||
document.addEventListener('DOMContentLoaded', observeElement) |
|||
return () => { |
|||
document.removeEventListener('DOMContentLoaded', observeElement) |
|||
} |
|||
} |
|||
} else { |
|||
observeElement() |
|||
} |
|||
|
|||
return () => { |
|||
if (resizeObserver && targetElement) { |
|||
resizeObserver.unobserve(targetElement) |
|||
resizeObserver.disconnect() |
|||
} |
|||
} |
|||
}, [ selector, elementRef.current ]) |
|||
|
|||
return [ elementRef, size ] as const |
|||
} |
|||
|
|||
export default useResizeObserver |
Write
Preview
Loading…
Cancel
Save
Reference in new issue