Skip to content

Commit

Permalink
feat: add comment-placer-component
Browse files Browse the repository at this point in the history
  • Loading branch information
Pedro Santos committed Feb 1, 2019
1 parent 9275dc5 commit ee94d85
Show file tree
Hide file tree
Showing 16 changed files with 570 additions and 178 deletions.
63 changes: 60 additions & 3 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 5 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@
"test": "exit 0",
"lint": "eslint --ignore-path .gitignore . && stylelint --ignore-path .gitignore \"**/*.css\"",
"prerelease": "npm t && npm run lint && npm run build",
"release": "standard-version"
"release": "standard-version",
"dev": "onchange src/** -- npm run build"
},
"dependencies": {
"@moxy/grow-element-fn": "^1.0.6",
Expand All @@ -50,11 +51,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",
Expand All @@ -75,6 +77,7 @@
"husky": "^1.0.0",
"lint-staged": "^8.0.0",
"marked": "^0.5.1",
"onchange": "^5.2.0",
"postcss-cli": "^6.0.0",
"postcss-preset-moxy": "^2.3.0",
"react": "^16.6.0",
Expand Down
108 changes: 46 additions & 62 deletions src/components/comment-input/CommentInput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -33,18 +32,13 @@ 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,
rows: PropTypes.number,
};

static defaultProps = {
focusOnMount: true,
};

focusManagerRef = createRef();
textareaAutosizeRef = createRef();

constructor(props) {
Expand All @@ -57,76 +51,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
Expand Down
111 changes: 0 additions & 111 deletions src/components/comment-input/FocusManager.js
View file

This file was deleted.

Loading

0 comments on commit ee94d85

Please sign in to comment.