Refactoring cells component pattern

zourdyzou · Jul 27, 2022 · 52c8492 · 52c8492
1 parent 552316a
commit 52c8492
Showing 1 changed file with 18 additions and 24 deletions.
diff --git a/src/components/grid/cell/cell.tsx b/src/components/grid/cell/cell.tsx
@@ -12,31 +12,25 @@ interface CellsType {
 export const CellComponent: FunctionComponent<CellsType> = ({ mouseDown, children }) => {
   switch (children) {
     case 0:
-      return (
-        <div
-          className={classNames(styles.closedFrame, styles.emptyFrame, {
-            // [styles.changedBorderColor]: !mouseDown,
-            // [styles.transparentClosedFrame]: mouseDown,
-          })}
-        />
-      );
+      return <EmptyFrame />;
     case 10:
-      return (
-        <div
-          className={classNames(styles.closedFrame, {
-            [styles.changedBorderColor]: !mouseDown,
-            [styles.transparentClosedFrame]: mouseDown,
-          })}
-        />
-      );
+      return <ClosedFrame mouseDown={mouseDown} />;
     default:
-      return (
-        <div
-          className={classNames(styles.closedFrame, {
-            [styles.changedBorderColor]: !mouseDown,
-            [styles.transparentClosedFrame]: mouseDown,
-          })}
-        />
-      );
+      return <ClosedFrame mouseDown={mouseDown} />;
   }
 };
+
+const ClosedFrame: FunctionComponent<{ mouseDown: boolean }> = ({ mouseDown }) => {
+  return (
+    <div
+      className={classNames(styles.closedFrame, {
+        [styles.changedBorderColor]: !mouseDown,
+        [styles.transparentClosedFrame]: mouseDown,
+      })}
+    />
+  );
+};
+
+const EmptyFrame: FunctionComponent = () => {
+  return <div className={classNames(styles.closedFrame, styles.emptyFrame)} />;
+};