Merge pull request #63 from back4app/add-collaborator-permission

Add collaborator permission

Author: paivaric

package-lock.json

@@ -33,6 +33,7 @@
     "LICENSE"
   ],
   "dependencies": {
+    "axios": "^0.18.0",
     "bcryptjs": "^2.3.0",
     "body-parser": "^1.15.2",
     "bootstrap": "4.0.0-alpha.6",
@@ -44,11 +45,13 @@
     "html-webpack-plugin": "^3.2.0",
     "jquery": "^3.2.1",
     "json-file-plus": "^3.2.0",
+    "lodash": "^4.17.10",
     "material-design-iconic-font": "^2.2.0",
     "package-json": "^4.0.1",
     "passport": "^0.3.2",
     "passport-local": "^1.0.0",
     "popper.js": "^1.12.9",
+    "react-tabs": "^2.2.2",
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {

package.json

@@ -9,24 +9,25 @@ import PropTypes from 'lib/PropTypes';
 import React     from 'react';
 import styles    from 'components/Field/Field.scss';
 
-let Field = ({label, input, labelWidth = 50, labelPadding, height, className}) => {
+let Field = ({label, input, labelWidth = 50, labelPadding, height, className, minHeight}) => {
   let classes = [styles.field];
   if (className) {
     classes.push(className);
   }
   labelWidth = labelWidth || 50;
+  minHeight = minHeight || '';
   if (label && labelPadding) {
     label = React.cloneElement(
       label,
       { ...label.props, padding: labelPadding }
     );
   }
   return (
-    <div className={classes.join(' ')}>
-      <div className={styles.left} style={{ width: labelWidth + '% ', height: height }}>
+    <div className={classes.join(' ')} style={{minHeight}}>
+      <div className={styles.left} style={{ width: labelWidth + '% ', height: height, minHeight }}>
         {label}
       </div>
-      <div className={styles.right} style={{ marginLeft: labelWidth + '%', height: height }}>
+      <div className={styles.right} style={{ marginLeft: labelWidth + '%', height: height, minHeight }}>
         {input}
       </div>
     </div>

src/components/Field/Field.react.js

@@ -0,0 +1,54 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+import Field           from 'components/Field/Field.react';
+import FormTableCollab from 'components/FormTableCollab/FormTableCollab.react';
+import Label           from 'components/Label/Label.react';
+import React           from 'react';
+
+export const component = FormTableCollab;
+
+export const demos = [
+  {
+    render: () => (
+      <Field
+        labelWidth={62}
+        label={<Label text='Label' />}
+        input={<FormTableCollab
+          items={[
+            {
+              title: 'Title'
+            },
+            {
+              title: 'Title'
+            },
+            {
+              title: 'Title'
+            },
+            {
+              title: 'Title'
+            }
+          ]} />
+        }
+      />
+    )
+  },
+  {
+    render: () => (
+      <Field
+        label={<Label text='Label' />}
+        firstInput={<FormTableCollab
+          keyWidth='150px'
+          items={[
+            {
+              title: 'Title'
+            },
+          ]} />
+        } />
+    )
+  },
+];

src/components/FormTableCollab/FormTableCollab.example.js

@@ -0,0 +1,43 @@
+/*
+ * Copyright (c) 2016-present, Parse, LLC
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the LICENSE file in
+ * the root directory of this source tree.
+ */
+import PropTypes from 'lib/PropTypes';
+import React from 'react';
+import styles from 'components/FormTableCollab/FormTableCollab.scss';
+import Icon   from 'components/Icon/Icon.react';
+
+let Row = ({
+             title,
+             color = 'blue',
+             onDelete,
+             onEdit,
+           }) => {
+  return (
+    <div className={styles.row}>
+      <div className={styles.header}>
+        <span className={[styles.indicator, styles[color]].join(' ')} />
+        <span className={styles.title}>{title}</span>
+        {typeof onDelete === 'function' ? <a href='javascript:;' role='button' className={styles.icon} onClick={onDelete}><Icon name='trash-solid' fill='#59596e' width={18} height={18} role='button'/></a> : null}
+        {typeof onEdit === 'function' ? <a href='javascript:;' role='button' className={styles.firstIcon} onClick={onEdit}><Icon name='gear-solid' fill='#59596e' width={18} height={18} role='button'/></a> : null}
+      </div>
+      <hr className={styles.hrTableDivisor}/>
+    </div>
+
+  );
+};
+
+let FormTableCollab = ({ items, keyWidth = '75px' }) => (
+  <div className={styles.table}>
+    {items.map((item, index) => <Row key={index.toString()} keyWidth={keyWidth} {...item} />)}
+  </div>
+);
+
+FormTableCollab.propTypes = {
+  items: PropTypes.array.isRequired.describe('An array of objects to go in the table. Each object should include a title (string), optional color (blue, red, green, orange), optional onDelete function, and notes (array). Each object in the notes array should contain a key (string), keyColor (blue, red, green, or orange), a value (string), and optionally strong (bool) to use a bold font for the value.'),
+};
+
+export default FormTableCollab;