Move components back into / temporarily to fix https://twitter.com/vjeux/status/706128843015237632 Closes #87

Author: drew-gross

components/ACLEditor/ACLEditor.react.js

@@ -0,0 +1,83 @@
+/*
+ * 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 Parse from 'parse';
+import PermissionsDialog from 'components/PermissionsDialog/PermissionsDialog.react';
+import React from 'react';
+
+function validateEntry(text) {
+  let userQuery = Parse.Query.or(
+    new Parse.Query(Parse.User).equalTo('username', text),
+    new Parse.Query(Parse.User).equalTo('objectId', text)
+  );
+  let roleQuery = new Parse.Query(Parse.Role).equalTo('name', text);
+  let promise = new Parse.Promise();
+  Parse.Promise.when(userQuery.find({ useMasterKey: true }), roleQuery.find({ useMasterKey: true })).then((user, role) => {
+    if (user.length > 0) {
+      promise.resolve({ user: user[0] });
+    } else if (role.length > 0) {
+      promise.resolve({ role: role[0] });
+    } else {
+      promise.reject();
+    }
+  });
+
+  return promise;
+}
+
+function toPerms(acl) {
+  if (!acl) {
+    return { read: { '*': true }, write: { '*': true } };
+  }
+  let json = acl.toJSON();
+  let perms = { read: {}, write: {} };
+  for (let key in json) {
+    if (json[key].read) {
+      perms.read[key] = true;
+    }
+    if (json[key].write) {
+      perms.write[key] = true;
+    }
+  }
+  return perms;
+}
+
+function toACL(perms) {
+  let acl = {};
+  for (let key in perms.read) {
+    if (perms.read[key]) {
+      acl[key] = { read: true };
+    }
+  }
+  for (let key in perms.write) {
+    if (perms.write[key]) {
+      if (acl[key]) {
+        acl[key].write = true;
+      } else {
+        acl[key] = { write: true };
+      }
+    }
+  }
+  return new Parse.ACL(acl);
+}
+
+let ACLEditor = ({ value, onCommit }) => (
+  <PermissionsDialog
+    title='Edit Access Control List (ACL)'
+    confirmText='Save ACL'
+    details={<a href='https://parse.com/docs/ios/guide#security-object-level-access-control'>Learn more about ACLs and app security</a>}
+    permissions={toPerms(value)}
+    validateEntry={validateEntry}
+    onCancel={() => {
+      onCommit(value);
+    }}
+    onConfirm={(perms) => {
+      onCommit(toACL(perms));
+    }} />
+);
+
+export default ACLEditor;

components/AppBadge/AppBadge.react.js

@@ -0,0 +1,24 @@
+/*
+ * 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/AppBadge/AppBadge.scss';
+
+let AppBadge = ({ production }) => (
+  <span className={production ? [styles.badge, styles.prod].join(' ') : styles.badge}>
+    {production ? 'PROD' : 'DEV'}
+  </span>
+);
+
+export default AppBadge;
+
+AppBadge.propTypes = {
+  production: PropTypes.bool.describe(
+    'Indicates whether the app is in production mode or not.'
+  )
+};

components/AppBadge/AppBadge.scss

@@ -0,0 +1,29 @@
+/*
+ * 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 'stylesheets/globals.scss';
+
+.badge {
+  @include DosisFont;
+  display: inline-block;
+  height: 26px;
+  line-height: 26px;
+  vertical-align: middle;
+  text-align: center;
+  border: 1px solid #768C97;
+  color: #768C97;
+  border-radius: 5px;
+  font-size: 10px;
+  letter-spacing: 4px;
+  width: 60px;
+  padding-left: 3px;
+}
+
+.prod {
+  color: #00dc7c;
+  border-color: #00dc7c;
+}

components/BooleanEditor/BooleanEditor.react.js

@@ -0,0 +1,57 @@
+/*
+ * 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 hasAncestor from 'lib/hasAncestor';
+import React from 'react';
+import styles from 'components/BooleanEditor/BooleanEditor.scss';
+import Toggle from 'components/Toggle/Toggle.react';
+
+export default class BooleanEditor extends React.Component {
+  constructor(props) {
+    super();
+
+    this.state = {
+      value: !!props.value
+    };
+
+    this.checkExternalClick = this.checkExternalClick.bind(this);
+    this.handleKey = this.handleKey.bind(this);
+  }
+
+  componentDidMount() {
+    document.body.addEventListener('click', this.checkExternalClick);
+    document.body.addEventListener('keypress', this.handleKey);
+  }
+
+  componentWillUnmount() {
+    document.body.removeEventListener('click', this.checkExternalClick);
+    document.body.removeEventListener('keypress', this.handleKey);
+  }
+
+  checkExternalClick(e) {
+    if (!hasAncestor(e.target, this.refs.input)) {
+      this.props.onCommit(this.state.value);
+    }
+  }
+
+  handleKey(e) {
+    if (e.keyCode === 13) {
+      this.props.onCommit(this.state.value);
+    }
+  }
+
+  render() {
+    return (
+      <div ref='input' style={{ minWidth: this.props.width }} className={styles.editor}>
+        <Toggle
+          type={Toggle.Types.TRUE_FALSE}
+          value={this.state.value}
+          onChange={(value) => this.setState({ value })} />
+      </div>
+    );
+  }
+}

components/BooleanEditor/BooleanEditor.scss

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+.editor {
+  background: white;
+  white-space: nowrap;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
+
+  > *:first-child {
+    margin: 6px 0;
+  }
+}

components/BrowserCell/BrowserCell.react.js

@@ -0,0 +1,107 @@
+/*
+ * 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 { dateStringUTC, isDate } from 'lib/DateUtils';
+import getFileName               from 'lib/getFileName';
+import Parse                     from 'parse';
+import Pill                      from 'components/Pill/Pill.react';
+import React                     from 'react';
+import styles                    from 'components/BrowserCell/BrowserCell.scss';
+import { unselectable }          from 'stylesheets/base.scss';
+
+let BrowserCell = ({ type, value, hidden, width, current, onSelect, readonly, onEditChange, setRelation,  onPointerClick }) => {
+  let content = value;
+  let classes = [styles.cell, unselectable];
+  if (hidden) {
+    content = '(hidden)';
+    classes.push(styles.empty);
+  } else if (value === undefined) {
+    if (type === 'ACL') {
+      content = 'Public Read + Write';
+    } else {
+      content = '(undefined)';
+      classes.push(styles.empty);
+    }
+  } else if (value === null) {
+    content = '(null)';
+    classes.push(styles.empty);
+  } else if (type === 'Pointer') {
+    content = (
+      <a href='javascript:;' onClick={onPointerClick.bind(undefined, value)}>
+        <Pill value={value.id} />
+      </a>
+    );
+  } else if (type === 'Date') {
+    content = dateStringUTC(value);
+  } else if (type === 'Boolean') {
+    content = value ? 'True' : 'False';
+  } else if (type === 'Array' || type === 'Object') {
+    if (type === 'Array') {
+      let _value = [];
+      value.forEach((val) => {
+        _value.push(val.constructor === Parse.Object ? val.toPointer() : val);
+      });
+      content = JSON.stringify(_value);
+    } else {
+      content = JSON.stringify(value);
+    }
+  } else if (type === 'File') {
+    if (value.url()) {
+      content = <a href={value.url()} target='_blank'><Pill value={getFileName(value)} /></a>;
+    } else {
+      content = <Pill value={'Uploading\u2026'} />;
+    }
+  } else if (type === 'ACL') {
+    let pieces = [];
+    let json = value.toJSON();
+    if (json.hasOwnProperty('*')) {
+      if (json['*'].read && json['*'].write) {
+        pieces.push('Public Read + Write');
+      } else if (json['*'].read) {
+        pieces.push('Public Read');
+      } else if (json['*'].write) {
+        pieces.push('Public Write');
+      }
+    }
+    for (let role in json) {
+      if (role !== '*') {
+        pieces.push(role);
+      }
+    }
+    if (pieces.length === 0) {
+      pieces.push('Master Key Only');
+    }
+    content = pieces.join(', ');
+  } else if (type === 'GeoPoint') {
+    content = `(${value.latitude}, ${value.longitude})`;
+  } else if (type === 'Relation') {
+    content = (
+      <div style={{ textAlign: 'center', cursor: 'pointer' }}>
+        <Pill onClick={() => setRelation(value)} value='View relation' />
+      </div>
+    );
+  }
+  
+  if (current) {
+    classes.push(styles.current);
+  }
+  return (
+    <span
+      className={classes.join(' ')}
+      style={{ width }}
+      onClick={onSelect}
+      onDoubleClick={() => {
+        if (type !== 'Relation') {
+          onEditChange(true)
+        }
+      }}>
+      {content}
+    </span>
+  );
+};
+
+export default BrowserCell;

components/BrowserCell/BrowserCell.scss

@@ -0,0 +1,37 @@
+/*
+ * 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.
+ */
+.cell {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: default;
+  color: #0E69A1;
+  height: 30px;
+  line-height: 22px;
+  padding: 5px 4px 0;
+  border-right: 1px solid #e3e3ea;
+}
+
+.empty {
+  color: #7D929F;
+}
+
+.current {
+  position: relative;
+
+  &:after {
+    position: absolute;
+    pointer-events: none;
+    content: '';
+    border: 2px solid #555572;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+}