added storybook

folio-org · Jun 4, 2021 · 1bcb82b · 1bcb82b
1 parent 457e824
commit 1bcb82b
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 50 deletions.
diff --git a/index.js b/index.js
@@ -27,6 +27,7 @@ export { default as Editor } from './lib/Editor';
 export { default as MultiSelection } from './lib/MultiSelection';
 export { default as RepeatableField } from './lib/RepeatableField';
 export { default as Popper } from './lib/Popper';
+export { default as Tree } from './lib/Tree';
 
 /* data containers */
 export { default as Card } from './lib/Card';

diff --git a/lib/Tree/Tree.js b/lib/Tree/Tree.js
@@ -11,37 +11,67 @@ const propTypes = {
 
 };
 
-const Tree = ({
-  children,
-  content,
-  open,
-  onClick,
-}) => {
-  const [isOpen, setIsOpen] = useState(open);
-
-  const renderContent = () => {
-    if (typeof content === 'function') {
-      return content();
-    }
-
-    return content;
-  };
+const TreeNode = (props) => {
+  const {
+    levelMapping,
+    item,
+    levelToggle,
+    levelToggleAriaLabel,
+  } = props;
+  const [isOpen, setIsOpen] = useState(false);
 
-  const showToggleButton = !!children;
+  const showToggleButton = !!item.children;
 
   return (
-    <div>
+    <li
+      tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
+      style={{ margin: '5px 0', verticalAlign: 'middle' }}
+    >
       {showToggleButton && (
         <IconButton
           icon={isOpen ? 'caret-up' : 'caret-down'}
-          onClick={() => setIsOpen(!isOpen)}
+          onClick={() => {
+            setIsOpen(!isOpen);
+            levelToggle[item.type](!isOpen, item);
+          }}
+          ariaLabel={levelToggleAriaLabel[item.type]}
         />
       )}
-      <span onClick={onClick} style={{ cursor: 'pointer' }}>{renderContent()}</span>
+      <span
+        style={{ cursor: 'pointer', display: 'inline-block' }}
+      >
+        {levelMapping[item.type](item)}
+      </span>
       <div style={{ paddingLeft: '2rem' }}>
-        {isOpen && children}
+        {isOpen && (
+          <Tree
+            {...props}
+            treeData={item.children}
+          />
+        )}
       </div>
-    </div>
+    </li>
+  );
+};
+
+const Tree = (props) => {
+  const {
+    treeData,
+  } = props;
+
+  const renderItem = (item) => {
+    return (
+      <TreeNode
+        {...props}
+        item={item}
+      />
+    );
+  };
+
+  return (
+    <ul style={{ listStyle: 'none', padding: '0' }}>
+      {treeData.map(renderItem)}
+    </ul>
   );
 };
 

diff --git a/lib/Tree/stories/ManyRecords.js b/lib/Tree/stories/ManyRecords.js
@@ -2,21 +2,28 @@
  * Avatar: Basic Usage
  */
 
-import React, { Component } from 'react';
+import React, {
+  Component,
+  useEffect,
+  useCallback,
+  useRef,
+  useState,
+} from 'react';
 
 import {
   Icon,
+  Pagination,
 } from '../../../';
 
 import Tree from '../Tree';
 
-const InstanceRecord = () => ((
+const InstanceRecord = ({ instance }) => ((
   <div style={{
     display: 'inline-block',
     verticalAlign: 'middle'
   }}>
     <Icon icon="source" />
-    <span style={{ padding: '0 10px' }}>Climate change and indigenous people</span>
+    <span style={{ padding: '0 10px' }}>{instance.name}</span>
     <div style={{ margin: '5px 20px' }}>
       <Icon icon="profile" />
       <span>Edward Elgar, 2013</span>
@@ -26,51 +33,84 @@ const InstanceRecord = () => ((
   </div>
 ));
 
-const HoldingRecord = () => ((
+const HoldingRecord = ({ holding }) => ((
   <div style={{
     display: 'inline-block',
     verticalAlign: 'middle'
   }}>
     <Icon icon="archive" />
-    <span>Main library &gt; K32.209</span>
+    <span>Main library &gt; {holding.name}</span>
   </div>
 ));
 
-const ItemRecord = () => ((
-  <div>
+const ItemRecord = ({ item }) => ((
+  <div
+    style={{
+      display: 'inline-block',
+      verticalAlign: 'middle'
+    }}
+  >
     <Icon icon="calendar" />
-    <span>1234567 - Available</span>
+    <span>{item.name} - Available</span>
     <Icon icon="check-out" />
   </div>
 ));
 
+const makeRequest = (okapi, url, params) => {
+  const headers = {
+    'x-okapi-token': okapi.token,
+    'x-okapi-tenant': okapi.tenant,
+    'content-type': 'application/json',
+    ...params.headers,
+  };
+
+  return fetch(`${okapi.url}/${url}`, {
+    ...params,
+    headers: {
+      ...headers,
+    },
+  });
+};
+
 export default class BasicUsage extends Component {
-  renderItemRecords = (Content, count) => {
-    return new Array(count).fill(0).map(() => {
-      return <Tree content={<Content />} />;
-    });
+  constructor() {
+    super();
+    this.state = {
+      data: [],
+      search: '',
+      pages: {
+        providers: 1,
+        packages: 1,
+        resources: 1,
+      },
+    };
+  }
+
+  componentDidMount() {
+    makeRequest()
+  }
+
+  handlePageChange = (key, page) => {
+    this.setState((state) => ({
+      pages: {
+        ...state.pages,
+        [key]: page.selected,
+      }
+    }), () => this.loadData(key));
   };
 
   render() {
     return (
       <>
-        <Tree content={<InstanceRecord />}>
-          <Tree content={<HoldingRecord />}>
-            {this.renderItemRecords(ItemRecord, 100)}
-          </Tree>
-          <Tree content={<HoldingRecord />}>
-            {this.renderItemRecords(ItemRecord, 3)}
-          </Tree>
-          <Tree content={<HoldingRecord />}>
-            {this.renderItemRecords(ItemRecord, 1)}
-          </Tree>
-          <Tree content={<HoldingRecord />}>
-            {this.renderItemRecords(ItemRecord, 6)}
-          </Tree>
-          <Tree content={<HoldingRecord />}>
-            {this.renderItemRecords(ItemRecord, 50)}
-          </Tree>
-        </Tree>
+        <Tree
+          treeData={this.state.data}
+          levelMapping={{
+          }}
+        />
+        <Pagination
+          pageCount={50}
+          onPageChange={this.handlePageChange}
+        />
       </>
     );
   }