-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[run ci] fixed jimaku-visible-button layout issue
- Loading branch information
Showing
3 changed files
with
71 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,62 +1,75 @@ | ||
| import { useEffect, useRef, useState } from "react" | ||
| import { useEffect, useMemo, useRef, useState } from "react" | ||
| import ReactShadowRoot from "react-shadow-root" | ||
| import ShadowRootContext from "~contexts/ShadowRootContext" | ||
|
|
||
|
|
||
| /** | ||
| * Props for the ShadowRoot component. | ||
| */ | ||
| export type ShadowRootProps = { | ||
| children: React.ReactNode | ||
| styles: string[] | ||
| /** | ||
| * The children of the ShadowRoot component. | ||
| */ | ||
| children: React.ReactNode | ||
| /** | ||
| * An array of styles to be applied to the ShadowRoot component. | ||
| */ | ||
| styles: string[] | ||
| /** | ||
| * Specifies whether the ShadowRoot component should have a line wrap or not. | ||
| */ | ||
| noWrap?: boolean | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * Renders a component that creates a shadow root and provides it as a context value. | ||
| * | ||
| * @component | ||
| * @example | ||
| * // Example usage of ShadowRoot component | ||
| * function App() { | ||
| * const styles = ['body { background-color: lightgray; }']; | ||
| * const styles = ['body { background-color: lightgray }'] | ||
| * return ( | ||
| * <div> | ||
| * <h1>App</h1> | ||
| * <ShadowRoot styles={styles}> | ||
| * <h2>ShadowRoot Content</h2> | ||
| * </ShadowRoot> | ||
| * </div> | ||
| * ); | ||
| * ) | ||
| * } | ||
| * | ||
| * @param {Object} props - The component props. | ||
| * @param {ReactNode} props.children - The content to be rendered inside the shadow root. | ||
| * @param {string[]} props.styles - An array of CSS styles to be applied to the shadow root. | ||
| * @returns {JSX.Element} The rendered ShadowRoot component. | ||
| */ | ||
| function ShadowRoot({ children, styles }: ShadowRootProps): JSX.Element { | ||
| const reactShadowRoot = useRef<ReactShadowRoot>(null); | ||
| const [shadowRoot, setShadowRoot] = useState<ShadowRoot>(null); | ||
| function ShadowRoot({ children, styles, noWrap = false }: ShadowRootProps): JSX.Element { | ||
| const reactShadowRoot = useRef<ReactShadowRoot>(null) | ||
| const [shadowRoot, setShadowRoot] = useState<ShadowRoot>(null) | ||
|
|
||
| useEffect(() => { | ||
| if (reactShadowRoot.current) { | ||
| setShadowRoot(reactShadowRoot.current.shadowRoot) | ||
| console.debug("ShadowRoot created") | ||
| } | ||
| }, []) | ||
|
|
||
| useEffect(() => { | ||
| if (reactShadowRoot.current) { | ||
| setShadowRoot(reactShadowRoot.current.shadowRoot); | ||
| console.debug('ShadowRoot created'); | ||
| } | ||
| }, []); | ||
| const child = shadowRoot && ( | ||
| <ShadowRootContext.Provider value={shadowRoot}> | ||
| {children} | ||
| </ShadowRootContext.Provider> | ||
| ) | ||
|
|
||
| return ( | ||
| <ReactShadowRoot ref={reactShadowRoot}> | ||
| {styles?.map((style, i) => ( | ||
| <style key={i}>{style}</style> | ||
| ))} | ||
| <div className="relative"> | ||
| {shadowRoot && ( | ||
| <ShadowRootContext.Provider value={shadowRoot}> | ||
| {children} | ||
| </ShadowRootContext.Provider> | ||
| )} | ||
| </div> | ||
| </ReactShadowRoot> | ||
| ); | ||
| return ( | ||
| <ReactShadowRoot ref={reactShadowRoot}> | ||
| {styles?.map((style, i) => ( | ||
| <style key={i}>{style}</style> | ||
| ))} | ||
| {noWrap ? child : ( | ||
| <div className="relative">{child}</div> | ||
| )} | ||
| </ReactShadowRoot> | ||
| ) | ||
| } | ||
|
|
||
| export default ShadowRoot | ||
| export default ShadowRoot |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters