init table component

fai-sal · Feb 18, 2020 · 884e084 · 884e084
1 parent 08c4821
commit 884e084
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 18 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import './App.css';
-import { Calendar, Day } from './components'
+import { Calendar, Day, Table } from './components'
 function App() {
   return (
     <div className="App">
-      <Calendar />
-      <Day />
+      {/* <Calendar /> */}
+      {/* <Day /> */}
+      <Table />
     </div>
   );
 }

diff --git a/src/components/appointments.js b/src/components/appointments.js
@@ -6,7 +6,22 @@ export default class Day extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
-            showTimeSpan: null
+            showTimeSpan: null,
+            appointments: {
+                '2020-02-11': [
+                    {
+                        date: '11',
+                        month: 'February',
+                        name: 'Monday',
+                        year: '2020',
+                        startingTime: '10.00',
+                        endingTime: '11.30',
+                        assignedStuff: 'Mr. X',
+                        purpose: 'Hair treatment'
+                    }
+                ]
+
+            }
         }
     }
 
@@ -51,7 +66,7 @@ export default class Day extends React.Component {
                     {
                         seletedDays.map(({ name, date, month }) => {
                             return (
-                                <div className="day" key={name + date + month}>
+                                <div className={`day${name==='Sunday'?' off':''}`} key={name + date + month}>
 
                                     {
                                         Array(24).fill(0).map((_, hour) => {
@@ -75,12 +90,13 @@ export default class Day extends React.Component {
 
 Day.defaultProps = {
     seletedDays: [
-        { date: '11', month: 'February', name: 'Monday' },
-        { date: '12', month: 'February', name: 'Tuesday' },
-        { date: '13', month: 'February', name: 'Wednesday' },
-        { date: '14', month: 'February', name: 'Thursday' },
-        { date: '15', month: 'February', name: 'Friday' },
-        { date: '16', month: 'February', name: 'Satday' },
-        { date: '17', month: 'February', name: 'Monday' }
+        { date: '11', month: '02', name: 'Monday', year: '2020' },
+        { date: '12', month: '02', name: 'Tuesday', year: '2020' },
+        { date: '13', month: '02', name: 'Wednesday', year: '2020' },
+        { date: '14', month: '02', name: 'Thursday', year: '2020' },
+        { date: '15', month: '02', name: 'Friday', year: '2020' },
+        { date: '16', month: '02', name: 'Satday', year: '2020' },
+        { date: '17', month: '02', name: 'Sunday', year: '2020' },
+        { date: '18', month: '02', name: 'Monday', year: '2020' }
     ]
 }
diff --git a/src/components/index.js b/src/components/index.js
@@ -1,7 +1,9 @@
 import Calendar from './calendar';
 import Day from './appointments';
+import Table from './table';
 
 export {
     Calendar,
-    Day
+    Day,
+    Table
 }
diff --git a/src/components/table.js b/src/components/table.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import '../styles/table.scss';
+export default function Table() {
+
+    const renderSection = ({ name, rows }) => {
+
+        const Tag = `t${name}`;
+
+        return (
+            <Tag>
+                {rows.map(({ cells }, rowIndex) => (
+                    <tr key={rowIndex}>
+                        {cells.map(({ content, tag: CellTag, scope, align }, columnIndex) => {
+                            return (
+                                <td> {content}  </td>
+                            );
+                        })}
+                    </tr>
+                ))}
+            </Tag>
+        );
+    }
+    const Section = renderSection;
+    const head = [
+        {
+            cells: [
+                { content: "col1", tag: "th" },
+                { content: "col2", tag: "th" },
+                { content: "col3", tag: "th" },
+            ]
+
+        }
+    ],
+        body = [
+            {
+                cells: [
+                    { content: "zero one", tag: "td" },
+                    { content: "zero two", tag: "td" },
+                    { content: "zero three", tag: "td" }
+                ]
+            },
+            {
+                cells: [
+                    { content: "one", tag: "td" },
+                    { content: "two", tag: "td" },
+                    { content: "three", tag: "td" }
+                ]
+            },
+
+        ],
+        foot = [];
+    return (
+        <table className="baithok-table">
+            <Section name="head" rows={head} />
+            <Section name="body" rows={body} />
+            <Section name="foot" rows={foot} />
+        </table>
+    )
+}
diff --git a/src/styles/calendar.scss b/src/styles/calendar.scss
@@ -51,7 +51,7 @@
     border-right: 1px solid #dee3e7;
     .hour-label {
       height: 100px;
-      padding: 5px 10px;
+      // padding: 5px 10px;
     }
   }
   .day {
@@ -76,19 +76,23 @@
           border-bottom: thin;
         }
         .label {
-          display: none;
+          color: transparent;
           padding: 0px 10px;
+          font-weight: 700;
+          font-size: 15px;
         }
         &.show {
           background-color: #3578e51f;
           .label {
-            display: inline-block;
             color: #3578e5;
-            font-weight: 700;
-            font-size: 15px;
           }
         }
       }
     }
   }
 }
+
+
+.off .hour .time-span:not(.show) {
+  background: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(0, 0, 0, 0.2) 1px, transparent 8px), repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(0, 0, 0, 0.2) 1px, transparent 8px);
+}
diff --git a/src/styles/table.scss b/src/styles/table.scss
@@ -0,0 +1,3 @@
+table {
+  width: 100%;
+}