スクロールのスタイル共通化部分修正

visionary-japan · Apr 6, 2024 · a412f46 · a412f46
1 parent 5db19e2
commit a412f46
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 72 deletions.
diff --git a/src/components/div/DivScrollable.tsx b/src/components/div/DivScrollable.tsx
@@ -54,7 +54,7 @@ const styles = stylex.create({
         left: 0,
         width: 4,
         height: 4,
-        backgroundColor: 'green',
+        backgroundColor: 'black',
     },
     wrap: {
         position: 'sticky',
@@ -337,7 +337,7 @@ const Component = forwardRef<RefHandle, Props>(
             if (!refScrollbar.current) return;
             const { clientHeight: heightScrollbar } = refScrollbar.current;
             setCanUp(thumbTop > 0);
-            setCanDown(thumbTop < heightScrollbar - thumbHeight);
+            setCanDown(thumbTop < heightScrollbar - thumbHeight - 1);
         }, [thumbHeight, thumbTop]);
 
         return (

diff --git a/src/components/div/DivScrollableSection.tsx b/src/components/div/DivScrollableSection.tsx
@@ -1,29 +1,44 @@
 import stylex from '@stylexjs/stylex';
 import type { StyleXStyles } from '@stylexjs/stylex';
 import type { UserAuthoredStyles } from '@stylexjs/stylex/lib/StyleXTypes';
-import { type FC, type HTMLAttributes, type ReactNode, memo } from 'react';
-import { stylesCommon } from './styles';
+import { type FC, type ReactNode, memo } from 'react';
 
-interface Section {
+interface Common {
+    styles?: StyleXStyles<UserAuthoredStyles>;
+}
+
+// TODO ContainerとWrapperの違いがわかりにくい
+interface Container extends Common {}
+interface Wrapper extends Common {}
+interface Section extends Common {
     id: string;
     children: ReactNode;
-    styles?: StyleXStyles<UserAuthoredStyles>;
 }
 
-interface Props extends HTMLAttributes<HTMLDivElement> {
-    styles?: StyleXStyles<UserAuthoredStyles>;
+interface Props {
+    wrapper?: Wrapper;
+    container?: Container;
     sections: Section[];
+    children?: ReactNode;
 }
 
 const styles = stylex.create({
+    wrapper: {
+        width: '100dvw',
+        height: '100lvh',
+        position: 'relative',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+    },
     container: {
         overflowY: 'scroll',
         overscrollBehavior: 'none',
         scrollBehavior: 'smooth',
         scrollSnapType: 'y mandatory',
         height: '100lvh',
         width: '50lvw',
-        marginLeft: -160,
         borderTopLeftRadius: 8,
         borderBottomLeftRadius: 8,
         '::-webkit-scrollbar': {
@@ -54,20 +69,17 @@ const styles = stylex.create({
     },
 });
 
-const Component: FC<Props> = ({
-    sections,
-    styles: propsStyles,
-    children,
-    ...attrs
-}) => {
+const Component: FC<Props> = props => {
     // セクションがないなら表示しない
-    if (sections.length === 0) return <></>;
+    if (props.sections.length === 0) return <></>;
 
     return (
         <>
-            <div {...attrs} {...stylex.props(stylesCommon.wrap, propsStyles)}>
-                <div {...stylex.props(styles.container)}>
-                    {sections.map(section => (
+            <div {...stylex.props(styles.wrapper, props.wrapper?.styles)}>
+                <div
+                    {...stylex.props(styles.container, props.container?.styles)}
+                >
+                    {props.sections.map(section => (
                         <div
                             key={section.id}
                             {...stylex.props(styles.section, section.styles)}
@@ -76,7 +88,7 @@ const Component: FC<Props> = ({
                         </div>
                     ))}
                 </div>
-                {children}
+                {props.children}
             </div>
         </>
     );

diff --git a/src/components/div/styles.ts b/src/components/div/styles.ts
diff --git a/src/pages/scroll/Scroll.tsx b/src/pages/scroll/Scroll.tsx
@@ -6,7 +6,6 @@ import { H1 } from '../../components/heading/H1';
 import { useScrollSmooth } from '../../hooks/useScrollSmooth';
 import { ScrollCss } from './ScrollCss';
 import { ScrollDiv } from './ScrollDiv';
-import { stylesCommon } from './styles';
 
 const styles = stylex.create({
     wrap: {
@@ -19,6 +18,14 @@ const styles = stylex.create({
         top: 0,
         transform: 'translateX(-50%)',
     },
+    target: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: 4,
+        height: 4,
+        backgroundColor: 'red',
+    },
     fixed: {
         position: 'fixed',
         right: 0,
@@ -58,7 +65,7 @@ const Component: FC = () => {
             <div
                 ref={refWindowTarget}
                 id='window-target'
-                {...stylex.props(stylesCommon.target)}
+                {...stylex.props(styles.target)}
             />
             <DivCustom
                 styleTypes={['flexColumn', 'gap', 'margin']}

diff --git a/src/pages/scroll/ScrollCss.tsx b/src/pages/scroll/ScrollCss.tsx
@@ -7,6 +7,9 @@ import { H3 } from '../../components/heading/H3';
 import { stylesCommon } from './styles';
 
 const styles = stylex.create({
+    container: {
+        marginLeft: -160,
+    },
     section1: {
         backgroundColor: '#ff6b6b',
     },
@@ -62,6 +65,7 @@ const Component: FC = () => {
                         styles: styles.section4,
                     },
                 ]}
+                container={{ styles: styles.container }}
             >
                 <H2 propsStyles={stylesCommon.h2}>With CSS</H2>
                 <div {...stylex.props(styles.btnWrap)}>

diff --git a/src/pages/scroll/ScrollDiv.tsx b/src/pages/scroll/ScrollDiv.tsx
@@ -9,6 +9,15 @@ import { useScrollSmooth } from '../../hooks/useScrollSmooth';
 import { stylesCommon } from './styles';
 
 const styles = stylex.create({
+    wrapper: {
+        width: '100dvw',
+        height: '100lvh',
+        position: 'relative',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+    },
     child: {
         height: '80svh',
         width: '40svh',
@@ -61,7 +70,7 @@ const Component: FC = () => {
     }, [getNewTopDiv, scrollSmooth]);
 
     return (
-        <DivCustom styles={stylesCommon.wrap}>
+        <DivCustom styles={styles.wrapper}>
             <H2 propsStyles={stylesCommon.h2}>With JS</H2>
             {/* 通常スクロール */}
             <DivScrollable

diff --git a/src/pages/scroll/styles.ts b/src/pages/scroll/styles.ts
@@ -1,23 +1,6 @@
 import stylex from '@stylexjs/stylex';
 
 export const stylesCommon = stylex.create({
-    wrap: {
-        width: '100dvw',
-        height: '100lvh',
-        position: 'relative',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        flexWrap: 'wrap',
-    },
-    target: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: 4,
-        height: 4,
-        backgroundColor: 'red',
-    },
     h2: {
         position: 'absolute',
         left: 0,