Add MetadataField component

Print photo metadata (wip)
tropy · Jul 19, 2019 · 85306c2 · 85306c2
1 parent acf3f05
commit 85306c2
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 101 deletions.
diff --git a/src/components/print/metadata.js b/src/components/print/metadata.js
@@ -0,0 +1,49 @@
+'use strict'
+
+const React = require('react')
+const cx = require('classnames')
+
+const {
+  arrayOf,
+  bool,
+  object,
+  string
+} = require('prop-types')
+
+
+const MetadataField = ({ isExtra, label, value }) => (
+  <li className={cx('metadata-field', { extra: isExtra })}>
+    <label>{label}</label>
+    <div className="value">{value}</div>
+  </li>
+)
+
+MetadataField.propTypes = {
+  isExtra: bool,
+  label: string.isRequired,
+  value: string
+}
+
+const MetadataSection = ({ fields, title }) => (
+  <section>
+    <h5 className="metadata-heading">{title}</h5>
+    <ol className="metadata-fields">
+      {fields.map((f, idx) =>
+        <MetadataField
+          key={idx}
+          isExtra={f.isExtra}
+          label={f.label || f.property.label}
+          value={f.value.text}/>)}
+    </ol>
+  </section>
+)
+
+MetadataSection.propTypes = {
+  fields: arrayOf(object),
+  title: string.isRequired
+}
+
+module.exports = {
+  MetadataField,
+  MetadataSection
+}
diff --git a/src/components/print/photo.js b/src/components/print/photo.js
@@ -1,11 +1,20 @@
 'use strict'
 
 const React = require('react')
+const { MetadataSection } = require('./metadata')
 const cx = require('classnames')
 const { Rotation } = require('../../common/iiif')
-const { bool, number, string } = require('prop-types')
 
-const Photo = ({ angle, height, mirror, orientation, path, width }) => {
+const {
+  arrayOf,
+  bool,
+  number,
+  object,
+  string
+} = require('prop-types')
+
+
+const Photo = ({ angle, data, height, mirror, orientation, path, width }) => {
   let rotation = Rotation
     .fromExifOrientation(orientation)
     .add({ angle, mirror })
@@ -17,112 +26,21 @@ const Photo = ({ angle, height, mirror, orientation, path, width }) => {
           className={`iiif rot-${rotation.format('x')}`}
           src={path}/>
       </div>
-        <div className="metadata-container">
-          <div className="col">
-            <section>
-              <h5 className="metadata-heading">Item</h5>
-              <ol className="metadata-fields">
-                <li className="metadata-field">
-                  <label>Title</label>
-                  <div className="value">Cathcart to Eaton</div>
-                </li>
-                <li className="metadata-field">
-                  <label>Author</label>
-                  <div className="value">Cathcart, James Leander</div>
-                </li>
-                <li className="metadata-field">
-                  <label>Recipient</label>
-                  <div className="value">Eaton, William</div>
-                </li>
-                <li className="metadata-field">
-                  <label>Date</label>
-                  <div className="value">Oct 11, 1800</div>
-                </li>
-                <li className="metadata-field">
-                  <label>Location</label>
-                  <div className="value">Tripoli</div>
-                </li>
-                <li className="metadata-field">
-                  <label>Type</label>
-                  <div className="value">Correspondence</div>
-                </li>
-                <li className="metadata-field">
-                  <label>Archive</label>
-                  <div className="value">Library of Congress</div>
-                </li>
-                <li className="metadata-field">
-                  <label>Collection</label>
-                  <div className="value">James L. Cathcart papers, 1785–1817</div>
-                </li>
-                <li className="metadata-field">
-                  <label>Box</label>
-                  <div className="value"/>
-                </li>
-                <li className="metadata-field">
-                  <label>Folder</label>
-                  <div className="value">Cathcart Letterbook</div>
-                </li>
-                <li className="metadata-field">
-                  <label>Identifier</label>
-                  <div className="value">MSS15388</div>
-                </li>
-                <li className="metadata-field">
-                  <label>Rights</label>
-                  <div className="value">public domain</div>
-                </li>
-                <li className="metadata-field">
-                  <label>Finding Aid</label>
-                  <div className="value">http://hdl.loc.gov/loc.mss/eadmss.ms009015</div>
-                </li>
-                <li className="metadata-field">
-                  <label>Date Added</label>
-                  <div className="value">Sep 19, 2017, 9:41 AM</div>
-                </li>
-                <li className="metadata-field">
-                  <label>Modified</label>
-                  <div className="value">Feb 7, 2019, 12:50 PM</div>
-                </li>
-              </ol>
-            </section>
-          </div>
-          <div className="col">
-            <section>
-              <h5 className="metadata-heading">Photo</h5>
-              <ol className="metadata-fields">
-                <li className="metadata-field">
-                  <label>Title</label>
-                  <div className="value">IMG_1716</div>
-                </li>
-                <li className="metadata-field">
-                  <label>Date</label>
-                  <div className="value">Aug 13, 2018, 12:57 PM</div>
-                </li>
-                <li className="metadata-field">
-                  <label>File</label>
-                  <div className="value">IMG_1716.jpg</div>
-                </li>
-                <li className="metadata-field">
-                  <label>Size</label>
-                  <div className="value">4,032×3,024, 1.74MB</div>
-                </li>
-                <li className="metadata-field">
-                  <label>Date Added</label>
-                  <div className="value">Mar 11, 2019, 12:50 PM</div>
-                </li>
-                <li className="metadata-field">
-                  <label>Modified</label>
-                  <div className="value">Mar 18, 2019, 7:22 PM</div>
-                </li>
-              </ol>
-            </section>
-          </div>
+      <div className="metadata-container">
+        <div className="col">
+          <MetadataSection title="Item" fields={[]}/>
         </div>
+        <div className="col">
+          <MetadataSection title="Photo" fields={data}/>
+        </div>
+      </div>
     </div>
   )
 }
 
 Photo.propTypes = {
   angle: number.isRequired,
+  data: arrayOf(object).isRequired,
   height: number.isRequired,
   mirror: bool.isRequired,
   orientation: number.isRequired,