{
- this.coverflow = coverflow;
- }}>
- {items.map((item)=>{
- return
- );
- }
- componentDidMount(){
- this.coverflow.focus();
- }
- componentWillUnmount(){
- WheelReact.clearTimeout();
- }
- selectItem(index){
- this.setState((prevState)=>({
- selectedIndex: index,
- prevIndex: prevState.selectedIndex
- }));
- if (this.props.handleSelect) {
- this.props.handleSelect(index);
+ if (direction === 'vertical') {
+ itemWidth = width - 70;
+ itemHeight = (itemWidth * ratio.y) / ratio.x;
+ } else {
+ itemHeight = height - 60;
+ itemWidth = (itemHeight * ratio.x) / ratio.y;
+ }
+ return [itemWidth, itemHeight];
+ };
+
+ const calcItemsAmountToRender = () => {
+ let amount;
+ if (direction === 'vertical') {
+ const containerHeight = height;
+ let itemHeight;
+ [, itemHeight] = calcItemDimensions();
+ amount = Math.floor(containerHeight / itemHeight) * 2 - 4;
+ } else {
+ const containerWidth = width;
+ let itemWidth;
+ [itemWidth] = calcItemDimensions();
+ amount = Math.floor(containerWidth / itemWidth) * 2 - 3;
+ }
+ if (amount < 3) {
+ amount = 3;
+ } else if (amount > 11) {
+ amount = 11;
}
- }
- prepareItems(){
- if (this.props.imagesArr.length === 0){
+ return Math.min(amount, imagesArr.length);
+ };
+
+ const prepareItems = () => {
+ if (imagesArr.length === 0) {
return [];
}
- const AMOUNT_TO_RENDER = this.calcItemsAmountToRender();
+ const AMOUNT_TO_RENDER = calcItemsAmountToRender();
const SIDE_AMOUNT = Math.floor(AMOUNT_TO_RENDER / 2);
- const index = this.state.selectedIndex;
- const imagesArr = JSON.parse(JSON.stringify(this.props.imagesArr));
- const items = imagesArr.map((imgUrl, index)=>({imgUrl, index, label: null}));
+ const index = cState.selectedIndex;
+ const images = JSON.parse(JSON.stringify(imagesArr));
+ const items = images.map((imgUrl, index) => ({
+ imgUrl,
+ index,
+ label: null,
+ }));
- for (let i = 0; i < this.props.labelsArr.length; i++) {
- items[i].label = this.props.labelsArr[i];
+ for (let i = 0; i < labelsArr.length; i++) {
+ items[i].label = labelsArr[i];
}
items[index].side = SIDES.CENTER;
items[index].distance = 0;
let fromIndex = Math.max(0, index - SIDE_AMOUNT);
- let untilIndex = Math.min(imagesArr.length, index + SIDE_AMOUNT+1);
+ let untilIndex = Math.min(images.length, index + SIDE_AMOUNT + 1);
- for(let i = fromIndex; i < index; i++){
+ for (let i = fromIndex; i < index; i++) {
items[i].side = SIDES.LEFT;
items[i].distance = index - i;
}
- for(let i = index + 1; i < untilIndex; i++){
+ for (let i = index + 1; i < untilIndex; i++) {
items[i].side = SIDES.RIGHT;
items[i].distance = i - index;
}
- if (items.length < AMOUNT_TO_RENDER){
+ if (items.length < AMOUNT_TO_RENDER) {
return items;
}
// calc removed items, in order to animate them.
- let amount = index - this.state.prevIndex;
+ let amount = index - cState.prevIndex;
if (amount > 0 && fromIndex > SIDE_AMOUNT) {
- for(let i = fromIndex - amount; i < fromIndex; i++){
+ for (let i = fromIndex - amount; i < fromIndex; i++) {
items[i].side = SIDES.REMOVED_LEFT;
items[i].distance = index - i;
}
fromIndex -= amount;
} else if (amount < 0) {
amount *= -1;
- if(untilIndex + amount < items.length){
- for(let i = untilIndex; i < untilIndex + amount; i++){
- if(!items[i]){
+ if (untilIndex + amount < items.length) {
+ for (let i = untilIndex; i < untilIndex + amount; i++) {
+ if (!items[i]) {
debugger;
}
items[i].side = SIDES.REMOVED_RIGHT;
@@ -151,61 +151,77 @@ class Container extends React.Component {
}
return items.slice(fromIndex, untilIndex);
- }
- calcIndex(){
- const length = this.props.imagesArr.length;
- if (length === 0) {
- return -1;
- }
- if (length > 10) {
- return 5;
- }
- return parseInt(this.props.imagesArr.length / 2, 10);
- }
- calcItemDimensions(){
- let ratio = {};
- [ratio.x, ratio.y] = this.props.itemRatio.split(':').map(x=>parseFloat(x));
- let itemWidth, itemHeight;
- if (this.props.direction === 'vertical') {
- itemWidth = this.props.width - 70;
- itemHeight = itemWidth * ratio.y / ratio.x;
- } else {
- itemHeight = this.props.height - 60;
- itemWidth = itemHeight * ratio.x / ratio.y;
- }
- return [itemWidth, itemHeight];
- }
- calcItemsAmountToRender(){
- let amount;
- if (this.props.direction === 'vertical') {
- const containerHeight = this.props.height;
- let itemHeight;
- [,itemHeight] = this.calcItemDimensions();
- amount = Math.floor(containerHeight / itemHeight) * 2 - 4;
- } else {
- const containerWidth = this.props.width;
- let itemWidth;
- [itemWidth,] = this.calcItemDimensions();
- amount = Math.floor(containerWidth / itemWidth) * 2 - 3;
+ };
+
+ const next = () => {
+ let index = cState.selectedIndex;
+ if (index + 1 < imagesArr.length) {
+ selectItem(index + 1);
}
- if (amount < 3) {
- amount = 3;
- } else if (amount > 11) {
- amount = 11;
+ };
+
+ const previous = () => {
+ let index = cState.selectedIndex;
+ if (index > 0) {
+ selectItem(index - 1);
}
- return Math.min(amount, this.props.imagesArr.length);
- }
-}
-
-Container.propTypes = {
- imagesArr: PropTypes.array.isRequired,
- zIndex: PropTypes.number,
- height: PropTypes.number,
- background: PropTypes.string,
- border: PropTypes.string,
- boxShadow: PropTypes.string,
- itemRatio: PropTypes.string,
- handleSelect: PropTypes.func
-};
+ };
+
+ const keysConfig = {
+ left: previous,
+ right: next,
+ up: next,
+ down: previous,
+ };
+ const touchConfig = {
+ left: next,
+ right: previous,
+ up: next,
+ down: previous,
+ };
+ SwipeReact.config(touchConfig);
+ WheelReact.config(touchConfig);
+ ArrowKeysReact.config(keysConfig);
-export default Container;
\ No newline at end of file
+ const coverflow = useRef < HTMLDivElement > null;
+
+ useEffect(() => {
+ coverflow?.current?.focus();
+ return () => {
+ WheelReact.clearTimeout();
+ };
+ }, []);
+
+ let itemWidth, itemHeight;
+ [itemWidth, itemHeight] = calcItemDimensions();
+ let items = prepareItems();
+ return (
+
+ {items.map((item) => {
+ return (
+
+ );
+};
diff --git a/src/CoverFlow/Container/EmptyContainer.js b/src/CoverFlow/Container/EmptyContainer.js
deleted file mode 100644
index b4ffe3b..0000000
--- a/src/CoverFlow/Container/EmptyContainer.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-class EmptyContainer extends React.Component {
- render(){
- return (
-
-
- )
- }
-}
-
-EmptyContainer.propTypes = {
- emptyMessage: PropTypes.string,
- height: PropTypes.number,
- background: PropTypes.string,
- border: PropTypes.string,
- boxShadow: PropTypes.string
-};
-
-export default EmptyContainer;
\ No newline at end of file
diff --git a/src/CoverFlow/Container/Item/Item.js b/src/CoverFlow/Container/Item/Item.js
index 56b9ba6..04831da 100644
--- a/src/CoverFlow/Container/Item/Item.js
+++ b/src/CoverFlow/Container/Item/Item.js
@@ -1,186 +1,200 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect } from 'react';
+
import SIDES from '../SIDES';
-class Item extends React.Component {
- constructor(props){
- super(props);
- this.cssTransform = this.cssTransform.bind(this);
- this.cssTransformVertical = this.cssTransformVertical.bind(this);
- this.state = {tempTransform: ''};
- }
- render(){
- let styles = {
- backgroundImage: `url('${this.props.imgUrl}')`,
- left: `calc(50% - ${this.props.width}px / 2)`,
- top: `calc(50% - ${this.props.height}px / 2)`,
- width: `${this.props.width}px`,
- height: `${this.props.height}px`,
- backgroundSize: `${this.props.width}px ${this.props.height}px`,
- display: 'inline-block',
- position: 'absolute',
- backgroundColor: 'greenyellow',
- transitionTimingFunction: 'ease-in-out',
- transition: 'transform 750ms',
- boxShadow: '30px 5px 15px -10px rgba(0,0,0,.15), -30px 5px 15px -10px rgba(0,0,0,.15)',
- };
- if (this.props.side !== SIDES.CENTER) {
- if (this.state.tempTransform !== ''){
- styles.transform = this.state.tempTransform;
- } else {
- if (this.props.direction === 'vertical') {
- styles.transform = this.cssTransformVertical(this.props.side, this.props.distance);
- } else {
- styles.transform = this.cssTransform(this.props.side, this.props.distance);
- }
- }
- }
- if (this.props.side === SIDES.CENTER){
- styles.zIndex = this.props.zIndex;
- } else if (this.props.side === SIDES.RIGHT){
- styles.zIndex = this.props.zIndex - this.props.distance;
- } else if (this.props.side === SIDES.REMOVED_RIGHT){
- styles.zIndex = this.props.zIndex - this.props.distance - 1;
- }
- let labelJsx = '';
- if (this.props.label !== null) {
- labelJsx = (
- {this.props.emptyMessage}
- {this.props.label}
- );
- }
- return(
- {
- this.props.selectItem(this.props.index);
- }}
- >{labelJsx}
- );
- }
- componentWillMount(){
- let tempTransform;
- if(this.props.direction === 'vertical') {
- if (this.props.side === SIDES.LEFT || this.props.side === SIDES.RIGHT){
- tempTransform = this.cssTransformVertical(this.props.side, this.props.max);
- } else {
- tempTransform = '';
- }
- } else {
- if (this.props.side === SIDES.LEFT || this.props.side === SIDES.RIGHT){
- tempTransform = this.cssTransform(this.props.side, this.props.max);
- } else {
- tempTransform = '';
- }
- }
- this.setState({tempTransform});
- }
- componentDidMount(){
- this.timeout = setTimeout(()=>{
- this.setState({tempTransform: ''});
- }, 100);
- }
- componentWillUnmount(){
- if (this.timeout){
- clearTimeout(this.timeout);
- }
- let tempTransform;
- if(this.props.direction === 'vertical') {
- if (this.props.side === SIDES.LEFT || this.props.side === SIDES.RIGHT){
- tempTransform = this.cssTransformVertical(this.props.side, this.props.max);
- } else {
- tempTransform = '';
- }
- } else {
- if (this.props.side === SIDES.LEFT || this.props.side === SIDES.RIGHT){
- tempTransform = this.cssTransform(this.props.side, this.props.max);
- } else {
- tempTransform = '';
- }
- }
- this.setState({tempTransform});
- }
- cssTransform(side, distance){
+export const Item = (props) => {
+ const {
+ width,
+ height,
+ side,
+ direction,
+ distance,
+ zIndex = 100,
+ label,
+ index,
+ imgUrl,
+ max,
+ selectItem,
+ } = props;
+
+ const [cState, setCState] = useState({
+ tempTransform: null,
+ });
+
+ const cssTransform = (side, distance) => {
const template = (deg, x, z) =>
`rotateY(${deg}deg) translate3d(${x}px, 0px, ${z}px)`;
- const a = Math.floor(this.props.width / 3);
- const z = (-1*a * distance - a) * 1.08;
+ const a = Math.floor(width / 3);
+ const z = (-1 * a * distance - a) * 1.08;
const left = {
deg: 45,
- x: -1*a * distance,
- z
+ x: -1 * a * distance,
+ z,
};
const right = {
deg: -45,
x: a * distance,
- z
+ z,
};
if (side === SIDES.LEFT) {
return template(left.deg, left.x, left.z);
} else if (side === SIDES.RIGHT) {
return template(right.deg, right.x, right.z);
- } else if (side === SIDES.REMOVED_LEFT){
- return this.cssTransform(SIDES.LEFT, this.props.max);
- } else if (side === SIDES.REMOVED_RIGHT){
- return this.cssTransform(SIDES.RIGHT, this.props.max);
+ } else if (side === SIDES.REMOVED_LEFT) {
+ return cssTransform(SIDES.LEFT, max);
+ } else if (side === SIDES.REMOVED_RIGHT) {
+ return cssTransform(SIDES.RIGHT, max);
} else {
throw 'Error: side is undefined or invalid.';
}
- }
- cssTransformVertical(side, distance){
+ };
+
+ const cssTransformVertical = (side, distance) => {
const template = (deg, y, z) =>
`rotateX(${deg}deg) translate3d(0px, ${y}px, ${z}px)`;
- const a = Math.floor(this.props.height / 3);
+ const a = Math.floor(height / 3);
const z = (-1 * a * distance - a) * 1.08;
const up = {
deg: -45,
y: -1 * a * distance,
- z
+ z,
};
const down = {
deg: 45,
y: a * distance,
- z
+ z,
};
if (side === SIDES.LEFT) {
return template(up.deg, up.y, up.z);
} else if (side === SIDES.RIGHT) {
return template(down.deg, down.y, down.z);
- } else if (side === SIDES.REMOVED_LEFT){
- return this.cssTransformVertical(SIDES.LEFT, this.props.max);
- } else if (side === SIDES.REMOVED_RIGHT){
- return this.cssTransformVertical(SIDES.RIGHT, this.props.max);
+ } else if (side === SIDES.REMOVED_LEFT) {
+ return cssTransformVertical(SIDES.LEFT, max);
+ } else if (side === SIDES.REMOVED_RIGHT) {
+ return cssTransformVertical(SIDES.RIGHT, max);
} else {
throw 'Error: side is undefined or invalid.';
}
- }
-}
+ };
-Item.propTypes = {
- side: PropTypes.oneOf([SIDES.LEFT, SIDES.CENTER, SIDES.RIGHT, SIDES.REMOVED_RIGHT, SIDES.REMOVED_LEFT]).isRequired,
- zIndex: PropTypes.number,
- height: PropTypes.number.isRequired,
- width: PropTypes.number.isRequired
-};
+ const timeout = setTimeout(() => {
+ setCState({ tempTransform: '' });
+ }, 100);
-Item.defaultProps = {
- zIndex: 100
-};
+ useEffect(() => {
+ let tempTransform;
+ if (direction === 'vertical') {
+ if (side === SIDES.LEFT || side === SIDES.RIGHT) {
+ tempTransform = cssTransformVertical(side, max);
+ } else {
+ tempTransform = '';
+ }
+ } else {
+ if (side === SIDES.LEFT || side === SIDES.RIGHT) {
+ tempTransform = cssTransform(side, max);
+ } else {
+ tempTransform = '';
+ }
+ }
+ setCState({ tempTransform });
-export default Item;
\ No newline at end of file
+ return () => {
+ clearTimeout(timeout);
+
+ let tempTransform;
+ if (direction === 'vertical') {
+ if (side === SIDES.LEFT || side === SIDES.RIGHT) {
+ tempTransform = cssTransformVertical(side, max);
+ } else {
+ tempTransform = '';
+ }
+ } else {
+ if (side === SIDES.LEFT || side === SIDES.RIGHT) {
+ tempTransform = cssTransform(side, max);
+ } else {
+ tempTransform = '';
+ }
+ }
+ setCState({ tempTransform });
+ };
+ }, []);
+
+ let styles = {
+ left: `calc(50% - ${width}px / 2)`,
+ top: `calc(50% - ${height}px / 2)`,
+ width: `${width}px`,
+ height: `${height}px`,
+ backgroundSize: `${width}px ${height}px`,
+ display: 'inline-block',
+ position: 'absolute',
+ backgroundColor: 'rgba(0,0,0,0)',
+ transitionTimingFunction: 'ease-in-out',
+ transition: 'transform 750ms',
+ transform: null,
+ zIndex: 100,
+ };
+ if (side !== SIDES.CENTER) {
+ if (cState.tempTransform !== '') {
+ styles.transform = cState.tempTransform;
+ } else {
+ if (direction === 'vertical') {
+ styles.transform = cssTransformVertical(side, distance);
+ } else {
+ styles.transform = cssTransform(side, distance);
+ }
+ }
+ }
+ if (side === SIDES.CENTER) {
+ styles.zIndex = zIndex;
+ } else if (side === SIDES.RIGHT) {
+ styles.zIndex = zIndex - distance;
+ } else if (side === SIDES.REMOVED_RIGHT) {
+ styles.zIndex = zIndex - distance - 1;
+ }
+ let labelJsx = '';
+ if (label !== null) {
+ labelJsx = (
+
+ {label}
+
+ );
+ }
+ return (
+ {
+ selectItem(index);
+ }}
+ >
+ 
+ {labelJsx}
+
+ );
+};
diff --git a/src/CoverFlow/CoverFlow.js b/src/CoverFlow/CoverFlow.js
index bc837ea..c32ab75 100644
--- a/src/CoverFlow/CoverFlow.js
+++ b/src/CoverFlow/CoverFlow.js
@@ -1,85 +1,78 @@
import React from 'react';
-import PropTypes from 'prop-types';
-import EmptyContainer from './Container/EmptyContainer';
-import Container from './Container/Container';
-
-class CoverFlow extends React.Component {
- render(){
- let width, height;
- if (this.props.direction === 'vertical') {
- width = isNaN(this.props.width) ? 250 : this.props.width;
- height = isNaN(this.props.height) ? document.body.offsetHeight : this.props.height;
- } else {
- height = isNaN(this.props.height) ? 250 : this.props.height;
- width = isNaN(this.props.width) ? document.body.offsetWidth : this.props.width;
- }
+import Container from './Container/Container';
- let styles = {
- textAlign: 'center',
- perspective: '400px',
- margin: '0px',
- position: 'relative',
- height: `${height}px`,
- width: `${width}px`,
- display: 'inline-block',
- boxSizing: 'border-box',
- padding: '25px',
- outline: 'transparent',
- background: this.props.background,
- border: this.props.border,
- boxShadow: this.props.boxShadow
- };
+export const CoverFlow = (props) => {
+ const {
+ zIndex = 100,
+ direction = 'horizontal',
+ background = '#333333',
+ border = 'none',
+ boxShadow = 'none',
+ emptyMessage = 'No items to show.',
+ itemRatio = '8:5',
+ labelsArr = [],
+ containerStyles,
+ imagesArr,
+ handleSelect,
+ width,
+ height,
+ defaultSelectedItem,
+ } = props;
- if (this.props.imagesArr.length === 0) {
- return
+ {labelJsx}
+
+
+ ) : (
+
+ {emptyMessage}
+
+