feat(component): make calendar render

phodal · Dec 12, 2021 · e51bbf2 · e51bbf2
1 parent 61b2a26
commit e51bbf2
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 86 deletions.
diff --git a/quake_webapp/packages/timeline/public/index.html b/quake_webapp/packages/timeline/public/index.html
@@ -14,7 +14,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <quake-timeline data="{}"></quake-timeline>
+    <quake-timeline data="[{&quot;id&quot;:1,&quot;title&quot;: &quot;&quot;,&quot;subtitle&quot;: &quot;sub time&quot;,&quot;time&quot;: &quot;now&quot;,&quot;content&quot;: &quot;something&quot; }, {&quot;id&quot;:2,&quot;title&quot;: &quot;title2&quot;,&quot;subtitle&quot;: &quot;sub time&quot;,&quot;time&quot;: &quot;now&quot;,&quot;content&quot;: &quot;something&quot; }]"></quake-timeline>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/quake_webapp/packages/timeline/src/QuakeTimeline.tsx b/quake_webapp/packages/timeline/src/QuakeTimeline.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { VerticalTimeline, VerticalTimelineElement }  from 'react-vertical-timeline-component';
+import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
 import 'react-vertical-timeline-component/style.min.css';
 
 export type Props = {
@@ -8,93 +8,28 @@ export type Props = {
 }
 
 function QuakeTimeline(props: Props) {
-  console.log(props);
+  const [data, setData] = React.useState(props.data);
+
+  React.useEffect(() => {
+    setData(props.data);
+  }, [props])
 
   return (
-    <div>
+    <div style= {{backgroundColor: "#eee"}}>
       <VerticalTimeline>
-        <VerticalTimelineElement
-          className="vertical-timeline-element--work"
-          contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
-          contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
-          date="2011 - present"
-          iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
-        >
-          <h3 className="vertical-timeline-element-title">Creative Director</h3>
-          <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
-          <p>
-            Creative Direction, User Experience, Visual Design, Project Management, Team Leading
-          </p>
-        </VerticalTimelineElement>
-        <VerticalTimelineElement
-          className="vertical-timeline-element--work"
-          date="2010 - 2011"
-          iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
-        >
-          <h3 className="vertical-timeline-element-title">Art Director</h3>
-          <h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h4>
-          <p>
-            Creative Direction, User Experience, Visual Design, SEO, Online Marketing
-          </p>
-        </VerticalTimelineElement>
-        <VerticalTimelineElement
-          className="vertical-timeline-element--work"
-          date="2008 - 2010"
-          iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
-        >
-          <h3 className="vertical-timeline-element-title">Web Designer</h3>
-          <h4 className="vertical-timeline-element-subtitle">Los Angeles, CA</h4>
-          <p>
-            User Experience, Visual Design
-          </p>
-        </VerticalTimelineElement>
-        <VerticalTimelineElement
-          className="vertical-timeline-element--work"
-          date="2006 - 2008"
-          iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
-        >
-          <h3 className="vertical-timeline-element-title">Web Designer</h3>
-          <h4 className="vertical-timeline-element-subtitle">San Francisco, CA</h4>
-          <p>
-            User Experience, Visual Design
-          </p>
-        </VerticalTimelineElement>
-        <VerticalTimelineElement
-          className="vertical-timeline-element--education"
-          date="April 2013"
-          iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
-        >
-          <h3 className="vertical-timeline-element-title">Content Marketing for Web, Mobile and Social Media</h3>
-          <h4 className="vertical-timeline-element-subtitle">Online Course</h4>
-          <p>
-            Strategy, Social Media
-          </p>
-        </VerticalTimelineElement>
-        <VerticalTimelineElement
-          className="vertical-timeline-element--education"
-          date="November 2012"
-          iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
-        >
-          <h3 className="vertical-timeline-element-title">Agile Development Scrum Master</h3>
-          <h4 className="vertical-timeline-element-subtitle">Certification</h4>
-          <p>
-            Creative Direction, User Experience, Visual Design
-          </p>
-        </VerticalTimelineElement>
-        <VerticalTimelineElement
-          className="vertical-timeline-element--education"
-          date="2002 - 2006"
-          iconStyle={{ background: 'rgb(233, 30, 99)', color: '#fff' }}
-        >
-          <h3 className="vertical-timeline-element-title">Bachelor of Science in Interactive Digital Media Visual Imaging</h3>
-          <h4 className="vertical-timeline-element-subtitle">Bachelor Degree</h4>
-          <p>
-            Creative Direction, Visual Design
-          </p>
-        </VerticalTimelineElement>
-        <VerticalTimelineElement
-          iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}
-        />
+        { data && data.map((item) =>
+          <VerticalTimelineElement
+            date={item.date}
+            key={item.id}
+            iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
+          >
+            <h3 className="vertical-timeline-element-title">{item.title}</h3>
+            { item.subtitle && <h4 className="vertical-timeline-element-subtitle">{item.subtitle}</h4> }
+            <p>
+              {item.content}
+            </p>
+          </VerticalTimelineElement>
+        )}
       </VerticalTimeline>
     </div>
   );

diff --git a/quake_webapp/packages/timeline/src/index.tsx b/quake_webapp/packages/timeline/src/index.tsx
@@ -63,6 +63,9 @@ class ReactElement extends HTMLElement {
       value = +attrValue;
     else if ((/^{.*}/.exec(attrValue)) || (/^\[.*]/.exec(attrValue)) )
       value = JSON.parse(attrValue);
+
+    console.log(/^\[.*]/.exec(attrValue))
+    console.log(typeof value);
     return {
       name: attrName,
       value: value