Merge pull request #8 from yokotani92/issue-2

issue #2 アイテム削除のバグ修正、固定レイアウトに変更
yukiyokotani · Mar 21, 2021 · d089734 · d089734
2 parents c918eb8 + 54ffa59
commit d089734
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 18 deletions.
diff --git a/src/component/Contents.tsx b/src/component/Contents.tsx
@@ -1,13 +1,29 @@
-import { Container, Grid } from '@material-ui/core';
+import {
+  Container,
+  createStyles,
+  Grid,
+  makeStyles,
+  Theme,
+} from '@material-ui/core';
 import React from 'react';
 import Knapsack from '../features/condition/Knapsack';
 import Form from '../features/condition/Form';
 import Evaluation from '../features/condition/Evaluation';
 import DpTable from '../features/dpTable/DpTable';
 
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      minWidth: '960px',
+      overflow: 'auto',
+    },
+  })
+);
 const Contents: React.FC = () => {
+  const classes = useStyles();
+
   return (
-    <Container maxWidth="md">
+    <Container maxWidth="md" className={classes.root}>
       <Grid container spacing={3}>
         <Grid item xl={12} xs={12}>
           <Knapsack />

diff --git a/src/features/condition/conditionSlice.ts b/src/features/condition/conditionSlice.ts
@@ -31,8 +31,12 @@ const conditionSlice = createSlice({
       state.items.push(action.payload);
     },
     delItem: (state, action: PayloadAction<Item>) => {
-      const index = state.items.indexOf(action.payload);
-      state.items.splice(index, 1);
+      const index = state.items.findIndex(
+        (item) => item.id === action.payload.id
+      );
+      if (index !== -1) {
+        state.items.splice(index, 1);
+      }
     },
     setProcessed: (
       state,

diff --git a/src/features/dpTable/DpTable.tsx b/src/features/dpTable/DpTable.tsx
@@ -35,25 +35,18 @@ const useStyles = makeStyles((theme: Theme) =>
       height: '50px',
     },
     thIndex: {
-      width: '200px',
+      width: '28.5%',
+      maxWidth: '300px',
       overflow: 'auto',
-      [theme.breakpoints.down('sm')]: {
-        width: '100px',
-      },
     },
     thColumn: {
       height: '50px',
-      width: 'calc((100% - 200px)/11)',
-      minWidth: 'calc((100% - 200px)/11)',
-      maxWidth: 'calc((100% - 200px)/11)',
-      [theme.breakpoints.down('sm')]: {
-        width: 'calc((100% - 100px)/11)',
-        minWidth: 'calc((100% - 100px)/11)',
-        maxWidth: 'calc((100% - 100px)/11)',
-      },
+      width: '6.5%',
+      minWidth: '6.5%',
+      maxWidth: '6.5%',
     },
     tableLabel: {
-      marginLeft: 'calc(200px + (50% - 200px))',
+      marginLeft: '50%',
     },
     emptyChip: {
       paddingLeft: '2.5rem',
@@ -352,6 +345,7 @@ const DpTable: React.FC = () => {
     [
       classes.emptyChip,
       classes.itemChip,
+      classes.thIndex,
       classes.trData,
       condition.eval,
       handleDelete,

diff --git a/src/utils/theme.ts b/src/utils/theme.ts
@@ -18,7 +18,7 @@ const baseConfig: ThemeOptions = {
   breakpoints: {
     values: {
       xs: 0,
-      sm: 660,
+      sm: 640,
       md: 960,
       lg: 1280,
       xl: 1920,