Init Li component

packages/strapi-plugin-upload/admin/src/components/Li/index.js

@@ -0,0 +1,62 @@
+/**
+ *
+ * Li
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './styles.scss';
+
+class Li extends React.Component {
+  state = { isOpen: false };
+
+  toggle = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.setState({ isOpen: !this.state.isOpen });
+  }
+
+  render() {
+    const { item } = this.props;
+
+    return (
+      <li className={styles.liWrapper}>
+        <div className={styles.liContainer}>
+          <div />
+          {Object.keys(item).map((value, key) => {
+            if (key === 0) {
+              return (
+                <div key={key}>
+                  <i className={`fa fa-file-${item[value]}-o`} />
+                </div>
+              );
+            }
+
+            return (
+              <div key={key}>{item[value]}</div>
+            );
+          })}
+        </div>
+      </li>
+    );
+  }
+}
+
+Li.defaultProps = {
+  item: {
+    type: 'pdf',
+    hash: '1234',
+    name: 'avatar.pdf',
+    updated: '20/11/2017 19:29:54',
+    size: '24 B',
+    relatedTo: 'John Doe',
+  },
+};
+
+Li.proptypes = {
+  item: PropTypes.object,
+};
+
+export default Li;

packages/strapi-plugin-upload/admin/src/components/Li/styles.scss

@@ -0,0 +1,40 @@
+.liWrapper {
+  height: 53px;
+}
+
+.liContainer {
+  display: flex;
+  height: 52px;
+  margin-left: 32px;
+  margin-right: 32px;
+  border-bottom: 1px solid #0E1622;
+  
+  > div:first-child {
+    min-width: 53px;
+  }
+  > div:nth-child(2) {
+    min-width: 80px;
+  }
+  > div:nth-child(3) {
+    min-width: 148px;
+  }
+  > div:nth-child(4) {
+    min-width: 221px;
+  }
+  > div:nth-child(5) {
+    min-width: 184px;
+    > span {
+      &:after {
+        content: '\f0d8';
+        margin-left: 10px;
+        font-family: 'FontAwesome';
+      }
+    }
+  }
+  > div:nth-child(6) {
+    min-width: 100px;
+  }
+  > div:nth-child(7) {
+    min-width: 114px;
+  }
+}

packages/strapi-plugin-upload/admin/src/components/List/index.js

@@ -8,6 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 
+import Li from 'components/Li';
 import ListHeader from 'components/ListHeader';
 
 import styles from './styles.scss';
@@ -18,6 +19,7 @@ function List(props) {
       <div className="row">
         <ul className={styles.ulList}>
           <ListHeader />
+          <Li />
         </ul>
       </div>
     </div>

packages/strapi-plugin-upload/admin/src/components/List/styles.scss

@@ -14,4 +14,10 @@
   > li {
     width: 100%;
   }
+
+  > li:last-child {
+    > div {
+      border-bottom: 0;
+    }
+  }
 }