From 0b6b6d1a39399fecf6311b20dbf1977467ea3e9e Mon Sep 17 00:00:00 2001 From: Barry Low Date: Fri, 16 Nov 2018 10:19:35 -0800 Subject: [PATCH] Upgrade react + style dropzone --- package-lock.json | 28 ++++++++++++++------- package.json | 4 ++- src/image-upload/components/DropZone.js | 27 +++++++++++++++----- src/image-upload/components/ImagePreview.js | 3 ++- src/image-upload/index.js | 20 +++++++++------ 5 files changed, 57 insertions(+), 25 deletions(-) diff --git a/package-lock.json b/package-lock.json index 83e8826..5d94acb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@advancedalgos/web-components", - "version": "0.0.13", + "version": "0.0.14", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -16127,14 +16127,14 @@ } }, "react": { - "version": "16.5.2", - "resolved": "https://registry.npmjs.org/react/-/react-16.5.2.tgz", - "integrity": "sha512-FDCSVd3DjVTmbEAjUNX6FgfAmQ+ypJfHUsqUJOYNCBUp1h8lqmtC+0mXJ+JjsWx4KAVTkk1vKd1hLQPvEviSuw==", + "version": "16.6.1", + "resolved": "https://registry.npmjs.org/react/-/react-16.6.1.tgz", + "integrity": "sha512-OtawJThYlvRgm9BXK+xTL7BIlDx8vv21j+fbQDjRRUyok6y7NyjlweGorielTahLZHYIdKUoK2Dp9ByVWuMqxw==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "schedule": "^0.5.0" + "scheduler": "^0.11.0" } }, "react-apollo": { @@ -16394,14 +16394,14 @@ } }, "react-dom": { - "version": "16.5.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.5.2.tgz", - "integrity": "sha512-RC8LDw8feuZOHVgzEf7f+cxBr/DnKdqp56VU0lAs1f4UfKc4cU8wU4fTq/mgnvynLQo8OtlPC19NUFh/zjZPuA==", + "version": "16.6.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.6.1.tgz", + "integrity": "sha512-zm+wBuEMGm009Wt1uE4Zw5KcXOW7qC4E/xW/fpJsCsbOco4U/R84u+DzzO/S4SYSdNBcqcaulcp4w3FXl8pImw==", "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2", - "schedule": "^0.5.0" + "scheduler": "^0.11.0" } }, "react-dropzone": { @@ -17402,10 +17402,20 @@ "version": "0.5.0", "resolved": "https://registry.npmjs.org/schedule/-/schedule-0.5.0.tgz", "integrity": "sha512-HUcJicG5Ou8xfR//c2rPT0lPIRR09vVvN81T9fqfVgBmhERUbDEQoYKjpBxbueJnCPpSu2ujXzOnRQt6x9o/jw==", + "dev": true, "requires": { "object-assign": "^4.1.1" } }, + "scheduler": { + "version": "0.11.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.11.2.tgz", + "integrity": "sha512-+WCP3s3wOaW4S7C1tl3TEXp4l9lJn0ZK8G3W3WKRWmw77Z2cIFUW2MiNTMHn5sCjxN+t7N43HAOOgMjyAg5hlg==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, "schema-utils": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", diff --git a/package.json b/package.json index 3a60e26..503e616 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@advancedalgos/web-components", "description": "Shared web components for Advanced Algos modules", - "version": "0.0.13", + "version": "0.0.14", "author": "Advanced Algos, Ltd", "license": "SEE LICENSE IN LICENSE", "repository": { @@ -39,7 +39,9 @@ "graphql": "^14.0.2", "graphql-tag": "^2.9.2", "prop-types": "^15.6.2", + "react": "^16.6.1", "react-apollo": "^2.1.11", + "react-dom": "^16.6.1", "react-dropzone": "^5.1.0", "react-image-crop": "^5.0.0", "react-image-cropper": "^1.3.0" diff --git a/src/image-upload/components/DropZone.js b/src/image-upload/components/DropZone.js index 88d62f7..d34b7e2 100644 --- a/src/image-upload/components/DropZone.js +++ b/src/image-upload/components/DropZone.js @@ -8,15 +8,27 @@ import Button from '@material-ui/core/Button' const styles = theme => ({ dropzone: { - display: 'block', - padding: '3em', + display: 'flex', + flexGrow: 1, + padding: '0.5em', height: 200, borderWidth: 2, borderColor: '#999', - backgroundColor: '#eee' + backgroundColor: '#eee', + justifyContent: 'center', + alignItems: 'center', + position: 'relative', + cursor: 'pointer' }, dropzoneText: { - textAlign: 'center' + display: 'flex', + textAlign: 'center', + fontFamily: '"Saira","Saira Condensed", "Arial Narrow", Arial, sans-serif', + cursor: 'pointer' + }, + cancelButton: { + position: 'relative', + top: '-3em' } }) @@ -28,11 +40,14 @@ export const DropZone = ({ classes, onDrop, handleCancel }) => ( className={classes.dropzone} multiple={false} > -

Drag-and-drop image here or click to select
Only *.jpeg and *.png images

+

Drag *.jpeg or *.png image here or click to select

diff --git a/src/image-upload/components/ImagePreview.js b/src/image-upload/components/ImagePreview.js index 74d4cc7..5fc30e3 100644 --- a/src/image-upload/components/ImagePreview.js +++ b/src/image-upload/components/ImagePreview.js @@ -66,7 +66,8 @@ const styles = theme => ({ position: 'relative', textTransform: 'uppercase', fontWeight: 700, - padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 4}px ${theme.spacing.unit + 6}px` + padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 2}px ${theme.spacing.unit + 6}px`, + fontFamily: '"Saira","Saira Condensed", "Arial Narrow", Arial, sans-serif' } }) diff --git a/src/image-upload/index.js b/src/image-upload/index.js index 2466c6e..f7fc2de 100644 --- a/src/image-upload/index.js +++ b/src/image-upload/index.js @@ -24,8 +24,17 @@ const placeHolder = fileName => { return `data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22288%22%20height%3D%22225%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20288%20225%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164edaf95ee%20text%20%7B%20fill%3A%23eceeef%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164edaf95ee%22%3E%3Crect%20width%3D%22288%22%20height%3D%22225%22%20fill%3D%22%2355595c%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2296.32500076293945%22%20y%3D%22118.8%22%3E${fileName}%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E` } +const containerStyleDefault = { + display: 'block', + margin: 0, + height: 200, + wdith: 200, + overflow: 'visible' +} + const imagePreviewDefault = { width: 400, + height: 400, title: 'Change Avatar' } @@ -66,10 +75,12 @@ class ImageUpload extends Component { this.saveImage = this.saveImage.bind(this) this.debug = this.props.debug + let containerStyleConfig = props.containerStyle !== undefined ? props.containerStyle : containerStyleDefault let previewConfig = props.imagePreviewConfig !== undefined ? props.imagePreviewConfig : imagePreviewDefault let cropConfig = props.cropContainerConfig !== undefined ? props.cropContainerConfig : cropConfigDefault let saveConfig = props.saveImageConfig !== undefined ? props.saveImageConfig : saveImageConfigDefault let cropPreview = props.cropPreviewBox !== undefined ? props.cropPreviewBox : cropPreviewBoxDefault + this.containerStyleConfig = containerStyleConfig this.previewConfig = previewConfig this.cropConfig = cropConfig this.saveConfig = saveConfig @@ -90,7 +101,6 @@ class ImageUpload extends Component { render () { const { classes, - containerStyle, existingImage, cropRatio, fileName @@ -107,13 +117,7 @@ class ImageUpload extends Component { return (
{this.state.event === 'cropping' && ( Cropping...