feat(grid): dinamically resize main area

Paker30 · May 11, 2020 · e8c7210 · e8c7210
1 parent e23f4f4
commit e8c7210
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 12 deletions.
diff --git a/src/App.js b/src/App.js
@@ -29,11 +29,11 @@ const FooterArea = Styled.div`
     align-self: end;
     
 `;
-const MainArea = Styled.div`
+const MainArea = Styled.div.attrs(({ columnEnd }) => ({ columnEnd: columnEnd || '5' }))`
     grid-area: main;
     justify-items: center;
     grid-column-start: 1;
-    grid-column-end: 5;
+    grid-column-end: ${(props) => props.columnEnd};
     margin-left: 10px;
     margin-right: 10px;
 `;
@@ -89,31 +89,41 @@ export default class App extends Component {
                     type: 'wine',
                     year: 2018
                 }
-            ]
+            ],
+            mainAreaWide: '5'
         };
         this.addBottle = this.addBottle.bind(this);
+        this.adjustMainAreaWide = this.adjustMainAreaWide.bind(this);
     }
 
     addBottle(bottle) {
         const { bottles } = this.state;
         this.setState({ bottles: [...bottles, { id: Uniqid('bottle-'), key: bottles.length.toString(), ...bottle }] });
     }
 
+    adjustMainAreaWide(columnEnd = '5') {
+        this.setState({ mainAreaWide: columnEnd });
+    }
+
     render() {
-        const { columns, bottles } = this.state;
+        const { columns, bottles, mainAreaWide } = this.state;
         return (
             <Router>
                 <Container>
                     <HeaderArea>
-                        <Title title="Mi Bodega" items={[<Link to="/cellar">Cellar</Link>, <Link to="/cellar/add">Add</Link>]} />
+                        <Title
+                            title="Mi Bodega"
+                            adjustMainAreaWide={this.adjustMainAreaWide}
+                            items={[{ link: <Link to="/cellar">Cellar</Link>, mainAreaWide: '5' }, { link: <Link to="/cellar/add">Add</Link>, mainAreaWide: '4' }]}
+                        />
                     </HeaderArea>
-                    <MainArea>
+                    <MainArea columnEnd={mainAreaWide}>
                         <Switch>
                             <Route exact path="/">
                                 <Redirect to="/cellar" />
                             </Route>
                             <Route path="/cellar">
-                                <Cellar columns={columns} bottles={bottles} />
+                                <Cellar columns={columns} bottles={bottles} adjustMainAreaWide={this.adjustMainAreaWide} />
                             </Route>
                         </Switch>
                     </MainArea>
@@ -123,7 +133,7 @@ export default class App extends Component {
                                 <Bottle find={pickBottle(bottles)} />
                             </Route>
                             <Route path="/cellar/add">
-                                <OtherBottle add={this.addBottle} />
+                                <OtherBottle add={this.addBottle} adjustMainAreaWide={this.adjustMainAreaWide} />
                             </Route>
                         </Switch>
                     </DetailArea>

diff --git a/src/components/cellar/index.js b/src/components/cellar/index.js
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 
 export default class Cellar extends Component {
     render() {
-        const { bottles } = this.props;
+        const { bottles, adjustMainAreaWide } = this.props;
         return (
             <List
                 itemLayout="horizontal"
@@ -14,6 +14,7 @@ export default class Cellar extends Component {
                         <List.Item.Meta
                             title={<Link to={`/cellar/bottle?id=${bottle.id}`}>{bottle.name}</Link>}
                             description={bottle.year}
+                            onClick={() => adjustMainAreaWide('4')}
                         />
                     </List.Item>
                 )}

diff --git a/src/components/new/index.js b/src/components/new/index.js
@@ -21,13 +21,14 @@ const NewBottle = Styled.div`
     padding: 24px;
 `;
 
-function OtherBottle({ add, history }) {
+function OtherBottle({ add, history, adjustMainAreaWide }) {
     const onFinishFailed = (errorInfo) => {
         console.error('Failed:', errorInfo);
     };
 
     const onFinish = (form) => {
         add(form);
+        adjustMainAreaWide('5');
         history.push('/');
     };
 

diff --git a/src/components/title/index.js b/src/components/title/index.js
@@ -5,13 +5,13 @@ const { Header } = Layout;
 
 export default class Title extends Component {
     render() {
-        const { items } = this.props;
+        const { items, adjustMainAreaWide } = this.props;
         return (
             <Header>
                 <div className="logo" />
                 <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['0']}>
                     {// eslint-disable-next-line react/no-array-index-key
-                        items.map((item, index) => (<Menu.Item key={index}>{item}</Menu.Item>))
+                        items.map(({ link, mainAreaWide }, index) => (<Menu.Item onClick={() => adjustMainAreaWide(mainAreaWide)} key={index}>{link}</Menu.Item>))
                     }
                 </Menu>
             </Header>