diff --git a/src/components/node/CommentForm/index.tsx b/src/components/node/CommentForm/index.tsx index cabbade5..e73cd78a 100644 --- a/src/components/node/CommentForm/index.tsx +++ b/src/components/node/CommentForm/index.tsx @@ -17,6 +17,8 @@ import * as UPLOAD_ACTIONS from '~/redux/uploads/actions'; import { selectUploads } from '~/redux/uploads/selectors'; import { IState } from '~/redux/store'; import pipe from 'ramda/es/pipe'; +import { ImageUpload } from '~/components/upload/ImageUpload'; +import { getImageSize } from '~/utils/dom'; const mapStateToProps = (state: IState) => ({ node: selectNode(state), @@ -125,6 +127,23 @@ const CommentFormUnconnected: FC<IProps> = ({ /> </div> + <div className={styles.uploads}> + {comment_data[id].files.map(file => ( + <ImageUpload id={file.id} thumb={getImageSize(file.url)} key={file.id} /> + ))} + {comment_data[id].temp_ids.map( + status => + statuses[status] && ( + <ImageUpload + id={statuses[status].uuid} + thumb={statuses[status].preview} + key={status} + progress={statuses[status].progress} + /> + ) + )} + </div> + <Group horizontal className={styles.buttons}> <input type="file" onInput={onInputChange} /> diff --git a/src/components/node/CommentForm/styles.scss b/src/components/node/CommentForm/styles.scss index de992cba..47ea3817 100644 --- a/src/components/node/CommentForm/styles.scss +++ b/src/components/node/CommentForm/styles.scss @@ -21,3 +21,11 @@ @include outer_shadow(); } + +.uploads { + padding: ($gap / 2); + display: grid; + grid-column-gap: $gap / 2; + grid-row-gap: $gap / 2; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); +}