feat: add comment-placer-component (#5)

ipfs-shipyard · Feb 21, 2019 · dfe61d3 · dfe61d3
1 parent d94a90d
commit dfe61d3
Show file tree

Hide file tree

Showing 24 changed files with 2,383 additions and 2,039 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -50,11 +50,12 @@
     "prop-type-conditionals": "0.0.6",
     "prop-types": "^15.6.2",
     "proper-on-transition-end": "^0.3.0",
+    "react-animate-height": "^2.0.7",
     "react-modal": "^3.5.1",
     "react-popper": "^1.0.0",
     "react-preload-image": "^1.0.4",
     "react-time-ago": "^3.0.2",
-    "react-transition-group": "^2.4.0"
+    "react-transition-group": "^2.5.3"
   },
   "peerDepedencies": {
     "react": "^16.6.0",

diff --git a/src/components/avatar/Avatar.css b/src/components/avatar/Avatar.css
@@ -25,6 +25,6 @@
         left: 0;
         width: 100%;
         height: 100%;
-        object-fit: contain;
+        object-fit: cover;
     }
 }
diff --git a/src/components/button/Button.js b/src/components/button/Button.js
@@ -21,7 +21,10 @@ export default class Button extends Component {
         feedback: 'none',
     };
 
-    state = {};
+    state = {
+        feedback: null,
+        feedbackOutcome: null,
+    };
 
     componentDidMount() {
         this.maybeHandleFeedbackChange();
@@ -95,7 +98,7 @@ export default class Button extends Component {
 
     handleProgressBarBegin = () => {
         this.clearFeedbackOutcomeTimers();
-        this.setState({ feedbackOutcome: undefined });
+        this.setState({ feedbackOutcome: null });
     };
 
     handleProgressBarEnd = () => {
@@ -105,7 +108,7 @@ export default class Button extends Component {
         this.setState({ feedbackOutcome: feedback }, () => {
             this.clearFeedbackOutcomeTimers();
             this.resetFeedbackOutcomeTimeoutId = setTimeout(() => {
-                this.setState({ feedbackOutcome: undefined });
+                this.setState({ feedbackOutcome: null });
             }, FEEDBACK_OUTCOME_VISIBLE_DURATION);
         });
     };

diff --git a/src/components/comment-error/CommentError.css b/src/components/comment-error/CommentError.css
@@ -2,7 +2,7 @@
 @import "../../styles/mixins/typography";
 
 .commentError {
-    min-width: 35rem;
+    min-width: 30rem;
 
     & .content {
         position: relative;

diff --git a/src/components/comment-input/CommentInput.css b/src/components/comment-input/CommentInput.css
@@ -2,7 +2,7 @@
 @import "../../styles/mixins/typography";
 
 .commentInput {
-    min-width: 350px;
+    min-width: 30rem;
 
     & .textarea {
         width: 100%;

diff --git a/src/components/comment-input/CommentInput.js b/src/components/comment-input/CommentInput.js
@@ -7,7 +7,6 @@ import TextareaAutosize from '../textarea-autosize';
 import TextButton from '../text-button';
 import { ModalTrigger, ConfirmModal } from '../modal';
 import { Author } from '../comment-common';
-import FocusManager from './FocusManager';
 import styles from './CommentInput.css';
 
 const isBodyEmpty = (body) => !body || isWhitespace(body);
@@ -33,18 +32,12 @@ export default class CommentInput extends PureComponent {
         type: PropTypes.oneOf(['reply', 'edit']),
         author: PropTypes.object.isRequired,
         body: PropTypes.string,
-        focusOnMount: PropTypes.bool,
         preloadAvatarImage: PropTypes.bool,
         onSubmit: PropTypes.func.isRequired,
         onCancel: PropTypes.func.isRequired,
         className: PropTypes.string,
     };
 
-    static defaultProps = {
-        focusOnMount: true,
-    };
-
-    focusManagerRef = createRef();
     textareaAutosizeRef = createRef();
 
     constructor(props) {
@@ -57,76 +50,66 @@ export default class CommentInput extends PureComponent {
     }
 
     render() {
-        const { type, body, author, focusOnMount, preloadAvatarImage, onSubmit, onCancel, className, ...rest } = this.props;
+        const { type, body, author, preloadAvatarImage, onSubmit, onCancel, className, ...rest } = this.props;
         const { empty, changed } = this.state;
         const reply = type === 'reply';
 
         const ConfirmCancelModal = reply ? ConfirmCancelReplyModal : ConfirmCancelEditModal;
 
         return (
-            <FocusManager ref={ this.focusManagerRef } focusOnMount={ focusOnMount }>
-                <div { ...rest } className={ classNames(styles.commentInput, className) }>
-                    <TextareaAutosize
-                        placeholder={ reply ? 'Reply to this comment...' : '' }
-                        ref={ this.textareaAutosizeRef }
-                        defaultValue={ body }
-                        rows={ reply ? 2 : 1 }
-                        maxRows={ 10 }
-                        submitOnEnter
-                        onSubmit={ this.handleSubmitClick }
-                        onChange={ this.handleTextareaChange }
-                        onTransitionEnd={ this.handleTextareaTransitionEnd }
-                        className={ styles.textarea } />
-
-                    <div className={ styles.bottomBar }>
-                        <Author
-                            author={ author }
-                            myself
-                            preloadAvatarImage={ preloadAvatarImage }
-                            className={ styles.author } />
-
-                        <div className={ styles.actions }>
-                            <TextButton
-                                onMouseDown={ this.handleActionMouseDown }
-                                onClick={ this.handleSubmitClick }
-                                disabled={ empty }
-                                className={ styles.button }>
-                                { reply ? 'Send' : 'Save' }
-                            </TextButton>
-
-                            <span className={ styles.separator } />
-
-                            { changed ? (
-                                <ModalTrigger modal={ <ConfirmCancelModal onConfirm={ onCancel } /> }>
-                                    <TextButton
-                                        onMouseDown={ this.handleActionMouseDown }
-                                        className={ styles.button }>
-                                        Cancel
-                                    </TextButton>
-                                </ModalTrigger>
-                            ) : (
+            <div { ...rest } className={ classNames(styles.commentInput, className) }>
+                <TextareaAutosize
+                    placeholder={ reply ? 'Reply to this comment...' : '' }
+                    ref={ this.textareaAutosizeRef }
+                    defaultValue={ body }
+                    rows={ 1 }
+                    maxRows={ 10 }
+                    submitOnEnter
+                    onSubmit={ this.handleSubmitClick }
+                    onChange={ this.handleTextareaChange }
+                    onTransitionEnd={ this.handleTextareaTransitionEnd }
+                    className={ styles.textarea } />
+
+                <div className={ styles.bottomBar }>
+                    <Author
+                        author={ author }
+                        myself
+                        preloadAvatarImage={ preloadAvatarImage }
+                        className={ styles.author } />
+
+                    <div className={ styles.actions }>
+                        <TextButton
+                            onMouseDown={ this.handleActionMouseDown }
+                            onClick={ this.handleSubmitClick }
+                            disabled={ empty }
+                            className={ styles.button }>
+                            { reply ? 'Send' : 'Save' }
+                        </TextButton>
+
+                        <span className={ styles.separator } />
+
+                        { changed ? (
+                            <ModalTrigger modal={ <ConfirmCancelModal onConfirm={ onCancel } /> }>
                                 <TextButton
                                     onMouseDown={ this.handleActionMouseDown }
-                                    onClick={ this.handleCancelClick }
                                     className={ styles.button }>
-                                    Cancel
+                                        Cancel
                                 </TextButton>
-                            ) }
-                        </div>
+                            </ModalTrigger>
+                        ) : (
+                            <TextButton
+                                onMouseDown={ this.handleActionMouseDown }
+                                onClick={ this.handleCancelClick }
+                                className={ styles.button }>
+                                    Cancel
+                            </TextButton>
+                        ) }
                     </div>
                 </div>
-            </FocusManager>
+            </div>
         );
     }
 
-    isFocused() {
-        return this.focusManagerRef.current ? this.focusManagerRef.current.isFocused() : false;
-    }
-
-    focus() {
-        this.focusManagerRef.current && this.focusManagerRef.current.focus();
-    }
-
     handleActionMouseDown = (event) => {
         // Since the textarea animates, when the mouseup happens the mouse is no longer within the button
         // Because of that we trigger click() manually after the animation ends

diff --git a/src/components/comment-input/FocusManager.js b/src/components/comment-input/FocusManager.js
diff --git a/src/components/comment-placeholder/CommentPlaceholder.css b/src/components/comment-placeholder/CommentPlaceholder.css
@@ -7,7 +7,7 @@
 }
 
 .commentPlaceholder {
-    min-width: 35rem;
+    min-width: 30rem;
     background-color: var(--color-white);
 
     & .content {