Integrated master/detail, refactor Icon, add base router

2018-05-12 12:36:39 -07:00
parent 84babf0e4b
commit 6fae5ef5d6
61 changed files with 1203 additions and 1620 deletions
--- a/website/src/MasterDetail/MasterList.js
+++ b/website/src/MasterDetail/MasterList.js
@@ -0,0 +1,73 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { Column, List, Button } from "ui"
+import { sizeInfo } from "ui/style"
+
+export class MasterList extends React.Component {
+  static propTypes = {
+    capitalizedName: PropTypes.string,
+    items: PropTypes.array,
+    listData: PropTypes.func,
+    onItemListClick: PropTypes.func,
+    selectedItem: PropTypes.object,
+    selectionModified: PropTypes.bool,
+    onAddNewItem: PropTypes.func,
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      items: null,
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.items !== this.props.items) {
+      this.setState({ items: nextProps.items })
+    }
+  }
+
+  render() {
+    const { selectedItem, selectionModified, capitalizedName } = this.props
+    const { items } = this.state
+
+    return (
+      <Column fillParent>
+        <Column.Item grow>
+          <List
+            items={items}
+            render={(item, index) => {
+              const data = item._id
+                ? this.props.listData(item)
+                : {
+                    icon: "blank",
+                    text: `[New ${capitalizedName}]`,
+                  }
+              return (
+                <List.Item
+                  key={item._id || "0"}
+                  onClick={(e) => this.props.onItemListClick(e, index)}
+                  active={item === this.props.selectedItem}>
+                  <List.Icon name={data.icon} size={sizeInfo.listIcon} />
+                  <List.Text>{data.text}</List.Text>
+                  {item === selectedItem && selectionModified ? (
+                    <List.Icon name="edit" size={sizeInfo.listIcon} />
+                  ) : null}
+                </List.Item>
+              )
+            }}
+          />
+        </Column.Item>
+        <Column.Item height={sizeInfo.formColumnSpacing} />
+        <Column.Item height={sizeInfo.buttonHeight}>
+          <Button
+            width="100%"
+            color="inverse"
+            onClick={this.props.onAddNewItem}
+            text={`Add New ${capitalizedName}`}
+          />
+        </Column.Item>
+      </Column>
+    )
+  }
+}