From 472799d743a64e4cead71332bb556477e5b417ae Mon Sep 17 00:00:00 2001 From: Hossein Mehrabi Date: Thu, 14 Dec 2023 17:53:55 +0330 Subject: [PATCH] refactor: extract Grid scroll buttons into a reusable component, ScrollButtons --- .../src/client/components/mdx/Grid/Grid.tsx | 131 ++---------------- .../mdx/ScrollButtons/ScrollButtons.scss | 57 ++++++++ .../mdx/ScrollButtons/ScrollButtons.tsx | 85 ++++++++++++ .../components/mdx/ScrollButtons/index.ts | 1 + 4 files changed, 152 insertions(+), 122 deletions(-) create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.scss create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.tsx create mode 100644 packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/index.ts diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx index 99e9ca2..54d4e48 100644 --- a/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/Grid/Grid.tsx @@ -1,15 +1,10 @@ -import { - ChevronLeftIcon, - ChevronRightIcon, - IconButton, - IconButtonGroup, - THEME_BREAKPOINTS, -} from '@acid-info/lsd-react' +import { THEME_BREAKPOINTS } from '@acid-info/lsd-react' import { css } from '@emotion/react' import styled from '@emotion/styled' import clsx from 'clsx' import React, { useRef } from 'react' import { lsdUtils } from '../../../lib/lsd.utils' +import { ScrollButtons } from '../ScrollButtons' import { GridItem } from './GridItem' export type GridProps = React.ComponentProps & { @@ -29,62 +24,17 @@ export const Grid: { Item: typeof GridItem } & React.FC = ({ }) => { const ref = useRef(null) - const scroll = (direction: -1 | 1) => { - const el = ref.current - if (!el) return - - const itemWidth = el.children[0]?.getBoundingClientRect?.()?.width ?? 236 - el.scrollTo({ - behavior: 'smooth', - left: - el.scrollLeft + - (el.getBoundingClientRect()?.width - itemWidth) * direction, - }) - } - return (
{actions} -
- - - - {leftLabel.length ? ( - - {leftLabel} - - ) : null} - - - {rightLabel.length ? ( - - {rightLabel} - - ) : null} - - - -
+
{children} @@ -113,26 +63,6 @@ const GridRoot = styled.div<{ .mdx-grid__scroll { display: flex; - flex-direction: row; - gap: 0 1rem; - margin-left: auto; - } - - .mdx-grid__scroll--spacing-buttons { - width: 100%; - - > div { - justify-content: space-between; - width: 100%; - } - - > div > button:not(:last-child) { - border-right: 1px solid rgb(var(--lsd-border-primary)) !important; - } - } - - .mdx-grid__scroll-button { - display: flex; } .mdx-grid__content { @@ -211,47 +141,4 @@ const GridRoot = styled.div<{ `} `) })} - - ${(props) => - lsdUtils.responsive( - props.theme as any, - 'md', - 'up', - )(css` - .mdx-grid__scroll-button--with-label { - width: auto; - min-width: 83px; - padding: 5px 11px 5px 9px; - gap: 12px; - - &:first-of-type { - justify-content: flex-start; - } - - &:last-of-type { - justify-content: flex-start; - } - } - `)} - - ${(props) => - lsdUtils.responsive( - props.theme as any, - 'sm', - 'down', - )(css` - .mdx-grid__scroll { - & > div { - justify-content: flex-end; - - > button:not(:last-child) { - border-right: none !important; - } - } - } - - .mdx-grid__scroll-button-label { - display: none; - } - `)} ` diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.scss b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.scss new file mode 100644 index 0000000..eae0ebe --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.scss @@ -0,0 +1,57 @@ +@use '../../../css/utils'; +@use '../../../css/lsd'; + +.mdx-scroll-buttons { + width: 100%; + + > div { + width: 100%; + display: flex; + flex-direction: row; + justify-content: flex-end; + } +} + +@include utils.responsive('md', 'up') { + .mdx-scroll-buttons__button--with-label { + width: auto !important; + min-width: 83px; + padding: 5px 11px 5px 9px !important; + gap: 12px; + + &:first-of-type { + justify-content: flex-start; + } + + &:last-of-type { + justify-content: flex-start; + } + } + + .mdx-scroll-buttons--spaced { + & > div { + gap: 0 1rem; + justify-content: space-between; + + & > button:not(:last-child) { + border-right: 1px solid rgb(var(--lsd-border-primary)) !important; + } + } + } +} + +@include utils.responsive('md', 'down') { + .mdx-scroll-buttons { + & > div { + justify-content: flex-end; + + > button:not(:last-child) { + border-right: none !important; + } + } + + .mdx-scroll-buttons__label { + display: none; + } + } +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.tsx new file mode 100644 index 0000000..651f385 --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/ScrollButtons.tsx @@ -0,0 +1,85 @@ +import { + ChevronLeftIcon, + ChevronRightIcon, + IconButton, + IconButtonGroup, +} from '@acid-info/lsd-react' +import clsx from 'clsx' +import React from 'react' +import './ScrollButtons.scss' + +export type ScrollButtonsProps = React.HTMLProps & { + containerId?: string + containerRef?: React.RefObject + leftLabel?: string + rightLabel?: string + spacing?: 'spaced' | 'grouped' +} + +export const ScrollButtons: React.FC = ({ + leftLabel, + rightLabel, + containerRef, + containerId, + spacing = 'grouped', + ...props +}) => { + const scroll = (direction: -1 | 1) => { + const el = containerRef + ? containerRef.current + : document.querySelector(`#${containerId}`) + if (!el) return + + const itemWidth = el.children[0]?.getBoundingClientRect?.()?.width ?? 236 + el.scrollTo({ + behavior: 'smooth', + left: + el.scrollLeft + + (el.getBoundingClientRect()?.width - itemWidth) * direction, + }) + } + + return ( +
+ + 0 && + 'mdx-scroll-buttons__button--with-label', + )} + size="small" + onClick={scroll.bind(null, -1)} + > + + {leftLabel && leftLabel.length > 0 && ( + {leftLabel} + )} + + + {rightLabel && rightLabel.length > 0 && ( + {rightLabel} + )} + + + +
+ ) +} diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/index.ts b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/index.ts new file mode 100644 index 0000000..24c317c --- /dev/null +++ b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollButtons/index.ts @@ -0,0 +1 @@ +export * from './ScrollButtons'