react-image-turntable
Advanced tools
Comparing version
@@ -1,1 +0,1 @@ | ||
export * from "./Turntable"; | ||
export * from './Turntable'; |
@@ -1,2 +0,2 @@ | ||
import React from "react"; | ||
import React from 'react'; | ||
interface TurntableProps { | ||
@@ -3,0 +3,0 @@ images: string[]; |
@@ -22,7 +22,8 @@ "use strict"; | ||
var _b = useTurntable_1.useTurntable(images), activeImageIndex = _b.activeImageIndex, eventHandlers = _b.eventHandlers; | ||
return (react_1.default.createElement("div", __assign({}, eventHandlers, { style: { position: "relative" } }), | ||
!images && react_1.default.createElement("h1", null, "Your gonna need to add your images..."), | ||
return (react_1.default.createElement("div", __assign({}, eventHandlers, { style: { position: 'relative' } }), | ||
!images || | ||
(!images.length && react_1.default.createElement("h1", null, "Your gonna need to add your images...")), | ||
images && | ||
images.map(function (imageSrc, index) { return (react_1.default.createElement("img", { key: imageSrc, src: imageSrc, style: { | ||
position: "absolute", | ||
position: 'absolute', | ||
opacity: index === activeImageIndex ? 1 : 0, | ||
@@ -33,4 +34,4 @@ left: 0, | ||
bottom: 0, | ||
width: "100%", | ||
width: '100%', | ||
}, alt: "turntable image " + index })); }))); | ||
}; |
@@ -17,2 +17,6 @@ "use strict"; | ||
}); | ||
it('should render helper text if no images are passed as props', function () { | ||
var getByText = react_2.render(react_1.default.createElement(index_1.Turntable, { images: [] })).getByText; | ||
expect(getByText('Your gonna need to add your images...')).toBeTruthy(); | ||
}); | ||
it('should render 4 images if 4 image URLs are passed as props', function () { | ||
@@ -19,0 +23,0 @@ var container = react_2.render(react_1.default.createElement(index_1.Turntable, { images: mockProps.images })).container; |
{ | ||
"name": "react-image-turntable", | ||
"version": "2.4.1", | ||
"version": "2.5.1", | ||
"homepage": "https://github.com/andrewmcoupe/react-image-turntable", | ||
@@ -9,5 +9,7 @@ "description": "This package aims to display an object in 360 degree perspective with the use of multiple, angled images from around the object itself.", | ||
"scripts": { | ||
"precommit": "npm test", | ||
"prepublishOnly": "tsc", | ||
"build": "tsc", | ||
"test": "jest" | ||
"test": "jest", | ||
"lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix" | ||
}, | ||
@@ -33,5 +35,13 @@ "dependencies": { | ||
"@types/jest": "^25.2.1", | ||
"@typescript-eslint/eslint-plugin": "^2.30.0", | ||
"@typescript-eslint/parser": "^2.30.0", | ||
"babel-jest": "^25.4.0", | ||
"eslint": "^6.8.0", | ||
"eslint-config-prettier": "^6.11.0", | ||
"eslint-plugin-prettier": "^3.1.3", | ||
"eslint-plugin-react": "^7.19.0", | ||
"husky": "^4.2.5", | ||
"jest": "^25.4.0", | ||
"lint-staged": "^10.2.0", | ||
"prettier": "^2.0.5", | ||
"ts-jest": "^25.4.0", | ||
@@ -42,5 +52,10 @@ "typescript": "^3.8.3" | ||
"hooks": { | ||
"pre-commit": "npm test" | ||
"pre-commit": "lint-staged && npm run precommit" | ||
} | ||
}, | ||
"lint-staged": { | ||
"*.{js,ts,tsx}": [ | ||
"eslint --fix" | ||
] | ||
} | ||
} |
@@ -7,2 +7,4 @@ [](LINK) | ||
### [Try the demo](https://codesandbox.io/s/react-image-turntable-riy93) 👈 | ||
This package aims to display an object in 360 degree perspective with the use of multiple, angled images from around the object itself which you need to provide. | ||
@@ -9,0 +11,0 @@ |
@@ -1,1 +0,1 @@ | ||
export * from "./Turntable"; | ||
export * from './Turntable' |
@@ -10,5 +10,6 @@ { | ||
"strict": true, | ||
"esModuleInterop": true | ||
"esModuleInterop": true, | ||
"noImplicitAny": true | ||
}, | ||
"exclude": ["node_modules", "dist"] | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
23918
11.33%26
8.33%557
2.01%39
5.41%19
72.73%