-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
168 additions
and
139 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 |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| const GridItem: React.FC = (): JSX.Element => { | ||
| return <>TODO</>; | ||
| }; | ||
|
|
||
| export { GridItem }; |
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 |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './grid-item'; |
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 |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| import { | ||
| EuiPanel, | ||
| EuiText, | ||
| useEuiOverflowScroll, | ||
| useEuiTheme, | ||
| } from '@elastic/eui'; | ||
| import { cx } from '@emotion/css'; | ||
| import { css } from '@emotion/react'; | ||
| import Head from 'next/head'; | ||
| import { | ||
| CSSProperties, | ||
| MouseEvent, | ||
| ReactNode, | ||
| TouchEvent, | ||
| forwardRef, | ||
| useMemo, | ||
| useRef, | ||
| useState, | ||
| } from 'react'; | ||
| import { Responsive, WidthProvider } from 'react-grid-layout'; | ||
| import { useLogger } from '../logger'; | ||
|
|
||
| const Grid: React.FC = (): JSX.Element => { | ||
| const { logger } = useLogger('component:grid'); | ||
|
|
||
| logger.info('rendering'); | ||
|
|
||
| const { euiTheme } = useEuiTheme(); | ||
|
|
||
| const gridLayoutStyles = css` | ||
| .react-grid-layout { | ||
| background: ${euiTheme.colors.lightestShade}; | ||
| } | ||
| .react-grid-item { | ||
| padding: ${euiTheme.size.xs}; | ||
| } | ||
| .react-grid-item.react-grid-placeholder { | ||
| background: ${euiTheme.colors.warning}; | ||
| } | ||
| `; | ||
|
|
||
| const gridItemTextStyles = css` | ||
| font-family: ${euiTheme.font.familyCode}; | ||
| white-space: pre-wrap; | ||
| ${useEuiOverflowScroll('y', true)} | ||
| `; | ||
|
|
||
| /** | ||
| * Using hooks to save the layout state on change will cause the layouts to | ||
| * re-render because the layout component's value keeps changing every render. | ||
| * To avoid this we memoize the layout component using the `useMemo` hook. | ||
| * https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#react-hooks-performance | ||
| */ | ||
| const ResponsiveGridLayout = useMemo(() => { | ||
| return WidthProvider(Responsive); | ||
| }, []); | ||
|
|
||
| /** | ||
| * Define the initial layout state. | ||
| */ | ||
| const [layout, setLayout] = useState([ | ||
| { i: 'a', x: 0, y: 0, w: 3, h: 2 }, | ||
| { i: 'b', x: 3, y: 0, w: 3, h: 2 }, | ||
| { i: 'c', x: 6, y: 0, w: 3, h: 2 }, | ||
| ]); | ||
|
|
||
| /** | ||
| * To improve performance, we memoize the children prop so that it doesn't | ||
| * change between rerenders. And if the children don't change then the | ||
| * components within the layout won't rerender either. | ||
| * https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#performance | ||
| */ | ||
| const children = useMemo(() => { | ||
| return layout.map((item) => { | ||
| /** | ||
| * How to use custom components a react-grid-layout children. | ||
| * https://github.com/react-grid-layout/react-grid-layout/tree/master?tab=readme-ov-file#custom-child-components-and-draggable-handles | ||
| * https://stackoverflow.com/questions/67053157/react-grid-layout-error-draggablecore-not-mounted-on-dragstart | ||
| */ | ||
|
|
||
| interface ReactGridLayoutItemProps { | ||
| style?: CSSProperties; | ||
| className?: string; | ||
| onMouseDown?: (e: MouseEvent<HTMLDivElement>) => void; | ||
| onMouseUp?: (e: MouseEvent<HTMLDivElement>) => void; | ||
| onTouchEnd?: (e: TouchEvent<HTMLDivElement>) => void; | ||
| children?: ReactNode; | ||
| } | ||
|
|
||
| const MyGridItem = forwardRef<HTMLDivElement, ReactGridLayoutItemProps>( | ||
| (props, ref) => { | ||
| const { style, className, children, ...otherProps } = props; | ||
|
|
||
| return ( | ||
| <EuiPanel | ||
| panelRef={ref} | ||
| hasBorder={true} | ||
| grow={false} | ||
| style={style} | ||
| className={cx(className)} | ||
| {...otherProps} | ||
| > | ||
| <EuiText css={gridItemTextStyles}>{item.i}</EuiText> | ||
| {children} | ||
| </EuiPanel> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| MyGridItem.displayName = 'MyGridItem'; | ||
|
|
||
| return <MyGridItem key={item.i} ref={useRef(null)} />; | ||
| }); | ||
| }, [layout.length]); | ||
|
|
||
| return ( | ||
| <> | ||
| <Head> | ||
| <link rel="stylesheet" href={`/react-grid/layout.min.css`} /> | ||
| <link rel="stylesheet" href={`/react-grid/resizable.min.css`} /> | ||
| </Head> | ||
| <ResponsiveGridLayout | ||
| css={gridLayoutStyles} | ||
| layouts={{ lg: layout }} | ||
| breakpoints={{ lg: 1200 }} | ||
| cols={{ lg: 30 }} | ||
| rowHeight={30} | ||
| isBounded={true} | ||
| isDraggable={true} | ||
| isDroppable={true} | ||
| isResizable={true} | ||
| resizeHandles={['se']} | ||
| > | ||
| {children} | ||
| </ResponsiveGridLayout> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export { Grid }; |
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 |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './grid'; |
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 |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import { css } from '@emotion/react'; | ||
|
|
||
| export const styles = css` | ||
| #__next, | ||
| .example { | ||
| } | ||
| `; |
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