Added zooming image and max width fix
This commit is contained in:
parent
a725a4bbf6
commit
5c47f9b5d1
|
@ -1,5 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
import ImageZoom from 'react-medium-image-zoom';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import type { Props } from '../types';
|
import type { Props } from '../types';
|
||||||
import { color } from 'shared/styles/constants';
|
import { color } from 'shared/styles/constants';
|
||||||
|
@ -34,13 +35,25 @@ class Image extends Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CenteredImage>
|
<CenteredImage>
|
||||||
<StyledImg
|
{!readOnly
|
||||||
{...attributes}
|
? <StyledImg
|
||||||
src={src}
|
{...attributes}
|
||||||
alt={caption}
|
src={src}
|
||||||
active={active}
|
alt={caption}
|
||||||
loading={loading}
|
active={active}
|
||||||
/>
|
loading={loading}
|
||||||
|
/>
|
||||||
|
: <ImageZoom
|
||||||
|
image={{
|
||||||
|
src,
|
||||||
|
alt: caption,
|
||||||
|
style: {
|
||||||
|
maxWidth: '100%',
|
||||||
|
},
|
||||||
|
...attributes,
|
||||||
|
}}
|
||||||
|
shouldRespectMaxDimension
|
||||||
|
/>}
|
||||||
{showCaption &&
|
{showCaption &&
|
||||||
<Caption
|
<Caption
|
||||||
type="text"
|
type="text"
|
||||||
|
@ -58,6 +71,7 @@ class Image extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
const StyledImg = styled.img`
|
const StyledImg = styled.img`
|
||||||
|
max-width: 100%;
|
||||||
box-shadow: ${props => (props.active ? `0 0 0 2px ${color.slate}` : '0')};
|
box-shadow: ${props => (props.active ? `0 0 0 2px ${color.slate}` : '0')};
|
||||||
border-radius: ${props => (props.active ? `2px` : '0')};
|
border-radius: ${props => (props.active ? `2px` : '0')};
|
||||||
opacity: ${props => (props.loading ? 0.5 : 1)};
|
opacity: ${props => (props.loading ? 0.5 : 1)};
|
||||||
|
|
41
package.json
41
package.json
|
@ -4,11 +4,14 @@
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"clean": "rimraf dist",
|
"clean": "rimraf dist",
|
||||||
"build:webpack": "NODE_ENV=production webpack --config webpack.config.prod.js",
|
"build:webpack":
|
||||||
"build:analyze": "NODE_ENV=production webpack --config webpack.config.prod.js --json | webpack-bundle-size-analyzer",
|
"NODE_ENV=production webpack --config webpack.config.prod.js",
|
||||||
|
"build:analyze":
|
||||||
|
"NODE_ENV=production webpack --config webpack.config.prod.js --json | webpack-bundle-size-analyzer",
|
||||||
"build": "npm run clean && npm run build:webpack",
|
"build": "npm run clean && npm run build:webpack",
|
||||||
"start": "node index.js",
|
"start": "node index.js",
|
||||||
"dev": "NODE_ENV=development DEBUG=sql,cache,presenters ./node_modules/.bin/nodemon --inspect --watch server index.js",
|
"dev":
|
||||||
|
"NODE_ENV=development DEBUG=sql,cache,presenters ./node_modules/.bin/nodemon --inspect --watch server index.js",
|
||||||
"lint": "npm run lint:flow && npm run lint:js",
|
"lint": "npm run lint:flow && npm run lint:js",
|
||||||
"lint:js": "eslint app",
|
"lint:js": "eslint app",
|
||||||
"lint:flow": "flow",
|
"lint:flow": "flow",
|
||||||
|
@ -18,39 +21,24 @@
|
||||||
"sequelize:migrate": "sequelize db:migrate",
|
"sequelize:migrate": "sequelize db:migrate",
|
||||||
"test": "npm run test:app && npm run test:server",
|
"test": "npm run test:app && npm run test:server",
|
||||||
"test:app": "jest",
|
"test:app": "jest",
|
||||||
"test:server": "jest --config=server/.jestconfig.json --runInBand --forceExit",
|
"test:server":
|
||||||
|
"jest --config=server/.jestconfig.json --runInBand --forceExit",
|
||||||
"precommit": "lint-staged"
|
"precommit": "lint-staged"
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"*.js": [
|
"*.js": ["eslint --fix", "git add"]
|
||||||
"eslint --fix",
|
|
||||||
"git add"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"jest": {
|
"jest": {
|
||||||
"verbose": false,
|
"verbose": false,
|
||||||
"roots": [
|
"roots": ["app"],
|
||||||
"app"
|
|
||||||
],
|
|
||||||
"moduleNameMapper": {
|
"moduleNameMapper": {
|
||||||
"^.*[.](s?css|css)$": "<rootDir>/__mocks__/styleMock.js",
|
"^.*[.](s?css|css)$": "<rootDir>/__mocks__/styleMock.js",
|
||||||
"^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
|
"^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
|
||||||
},
|
},
|
||||||
"moduleFileExtensions": [
|
"moduleFileExtensions": ["js", "jsx", "json"],
|
||||||
"js",
|
"moduleDirectories": ["node_modules"],
|
||||||
"jsx",
|
"modulePaths": ["app"],
|
||||||
"json"
|
"setupFiles": ["<rootDir>/setupJest.js", "<rootDir>/__mocks__/window.js"]
|
||||||
],
|
|
||||||
"moduleDirectories": [
|
|
||||||
"node_modules"
|
|
||||||
],
|
|
||||||
"modulePaths": [
|
|
||||||
"app"
|
|
||||||
],
|
|
||||||
"setupFiles": [
|
|
||||||
"<rootDir>/setupJest.js",
|
|
||||||
"<rootDir>/__mocks__/window.js"
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 7.6"
|
"node": ">= 7.6"
|
||||||
|
@ -145,6 +133,7 @@
|
||||||
"react-dropzone": "3.6.0",
|
"react-dropzone": "3.6.0",
|
||||||
"react-helmet": "^5.2.0",
|
"react-helmet": "^5.2.0",
|
||||||
"react-keydown": "^1.7.3",
|
"react-keydown": "^1.7.3",
|
||||||
|
"react-medium-image-zoom": "^2.0.3",
|
||||||
"react-modal": "^2.2.1",
|
"react-modal": "^2.2.1",
|
||||||
"react-portal": "^3.1.0",
|
"react-portal": "^3.1.0",
|
||||||
"react-router-dom": "^4.1.1",
|
"react-router-dom": "^4.1.1",
|
||||||
|
|
|
@ -7360,6 +7360,10 @@ react-keydown@^1.7.3:
|
||||||
dependencies:
|
dependencies:
|
||||||
core-js "^2.5.0"
|
core-js "^2.5.0"
|
||||||
|
|
||||||
|
react-medium-image-zoom@^2.0.3:
|
||||||
|
version "2.0.6"
|
||||||
|
resolved "https://registry.yarnpkg.com/react-medium-image-zoom/-/react-medium-image-zoom-2.0.6.tgz#9c6c6b38f2bae4f9f5fd7f8adf43c2b816e13660"
|
||||||
|
|
||||||
react-modal@^2.2.1:
|
react-modal@^2.2.1:
|
||||||
version "2.2.4"
|
version "2.2.4"
|
||||||
resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-2.2.4.tgz#a32483c3555bd7677f09bca65d82f51da3abcbc0"
|
resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-2.2.4.tgz#a32483c3555bd7677f09bca65d82f51da3abcbc0"
|
||||||
|
|
Reference in New Issue