Rewrite as function-based

README.md

@@ -1,5 +1,6 @@
 # Coverflow React
 
+fork of https://github.com/leon-good-life/coverflow-react.
 
 [![npm version](https://badge.fury.io/js/coverflow-react.svg)](http://badge.fury.io/js/coverflow-react)
 
@@ -10,72 +11,94 @@ npm install --save coverflow-react
 ```
 
 ## Live Demo
+
 https://storage.googleapis.com/coverflow-react/index.html
 
 ### Demo project
+
 There is a [coverflow-react-demo](https://github.com/leon-good-life/coverflow-react-demo) repository on GitHub, that demonstrates features of this widget.
 
 ### Screenshots
+
 ![screenshot horizontal](https://storage.googleapis.com/coverflow-react/screenshot_horizontal.gif)
 ![screenshot vertical](https://storage.googleapis.com/coverflow-react/screenshot_vertical.gif)
 
 ## Usage
+
 ### Using CoverFlow in your project
+
 1. Add coverflow-react package to your project using npm.
+
 ```bash
 npm install --save coverflow-react
 ```
 
 2. import CoverFlow
+
 ```javascript
 import CoverFlow from 'coverflow-react';
 ```
 
 3. Create an array of path/URLs to the images.
+
 ```javascript
 const imagesArr = [
-        'img/1.jpg',
-        'img/2.jpg',
-        'img/3.jpg',
-        'img/4.jpg',
-        'img/5.jpg'
-    ];
+  'img/1.jpg',
+  'img/2.jpg',
+  'img/3.jpg',
+  'img/4.jpg',
+  'img/5.jpg',
+];
 ```
+
 (If you are using create-react-app, you can put the images in 'public' directory).
 
 4. Add CoverFlow Component to your project and pass images array.
+
 ```jsx
 <CoverFlow imagesArr={imagesArr} />
 ```
 
+### Optional props
 
+- **zIndex** - by default it is 100. If there are conflicts with z-index in your project. You can pass zIndex you want.
+- **height** - the height of coverflow container in pixels. The default is 300. The height of coverflow item is calculated automatically. It is 60px less than the height of the container.
+- **emptyMessage** - a message the user see when there are no items. The default message is 'No items to show.'. This property allows to customize this message. It is particularly useful for internationalization and localization, by allowing coverflow to adapt to different languages.
+- **itemRatio** - aspect ratio of coverflow items. The default is '8:5'.
+- **background** - a css background property. The default is 'lightgray'. You can assign any valid css background.
+- **border** - a css border property. The default is 'none'. You can assign any valid css border.
+- **boxShadow** - a css box-shadow property. The default is 'none'. You can assign any valid css box-shadow.
+- **handleSelect** - you can pass a callback function. The function has an index parameter.
 
-### Optional props
-* **zIndex** - by default it is 100. If there are conflicts with z-index in your project. You can pass zIndex you want.
-* **height** - the height of coverflow container in pixels. The default is 300. The height of coverflow item is calculated automatically. It is 60px less than the height of the container.
-* **emptyMessage** - a message the user see when there are no items. The default message is 'No items to show.'. This property allows to customize this message. It is particularly useful for internationalization and localization, by allowing coverflow to adapt to different languages.
-* **itemRatio** - aspect ratio of coverflow items. The default is '8:5'.
-* **background** - a css background property. The default is 'lightgray'. You can assign any valid css background.
-* **border** - a css border property. The default is 'none'. You can assign any valid css border.
-* **boxShadow** - a css box-shadow property. The default is 'none'. You can assign any valid css box-shadow.
-* **handleSelect** - you can pass a callback function. The function has an index parameter.
 ```jsx
-<CoverFlow handleSelect={(index)=>{alert(index);}} imagesArr={imagesArr} />
+<CoverFlow
+  handleSelect={(index) => {
+    alert(index);
+  }}
+  imagesArr={imagesArr}
+/>
 ```
-* **labelsArr** - allows to add text labels at the bottom of the images, the array must be the same size of imagesArr.
-* **direction** - the default is "horizontal", if passing "vertical", the CoverFlow will transform to vertical.
+
+- **labelsArr** - allows to add text labels at the bottom of the images, the array must be the same size of imagesArr.
+- **direction** - the default is "horizontal", if passing "vertical", the CoverFlow will transform to vertical.
+- **defaultSelectedItem** - select an image by index, default is middle image.
 
 ## Features
-* Support for large amount of images, by rendering only some of them at a time, and with easy navigation and smooth animation, the user can see all the images.
-* Vertical CoverFlow (In addition to Horizontal CoverFlow).
+
+- Support for large amount of images, by rendering only some of them at a time, and with easy navigation and smooth animation, the user can see all the images.
+- Vertical CoverFlow (In addition to Horizontal CoverFlow).
+
 ### Multiple input devices support
-* Swipe support on touch devices (smartphones, tablets).
-* Keyboard 'left' and 'right' keys support.
-* Scroll support (mouse and trackpad).
+
+- Swipe support on touch devices (smartphones, tablets).
+- Keyboard 'left' and 'right' keys support.
+- Scroll support (mouse and trackpad).
 
 ## Contributing
+
 Opening issues and code contributions are welcomed.
 See [contributing guide](https://github.com/leon-good-life/coverflow-react/blob/master/CONTRIBUTING.md).
 
 ## Credits for images in the demo
+
 Uncopyrited images from Pixabay and Pexels.

lib/CoverFlow/Container/Container.js

@@ -14,17 +14,13 @@ var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _SIDES = require('./SIDES');
+var _arrowKeysReact = require('arrow-keys-react');
 
-var _SIDES2 = _interopRequireDefault(_SIDES);
+var _arrowKeysReact2 = _interopRequireDefault(_arrowKeysReact);
 
-var _Item = require('./Item/Item');
+var _propTypes = require('prop-types');
 
-var _Item2 = _interopRequireDefault(_Item);
+var _propTypes2 = _interopRequireDefault(_propTypes);
 
 var _swipeReact = require('swipe-react');
 
@@ -34,9 +30,13 @@ var _wheelReact = require('wheel-react');
 
 var _wheelReact2 = _interopRequireDefault(_wheelReact);
 
-var _arrowKeysReact = require('arrow-keys-react');
+var _Item = require('./Item/Item');
 
-var _arrowKeysReact2 = _interopRequireDefault(_arrowKeysReact);
+var _Item2 = _interopRequireDefault(_Item);
+
+var _SIDES = require('./SIDES');
+
+var _SIDES2 = _interopRequireDefault(_SIDES);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -59,7 +59,8 @@ var Container = function (_React$Component) {
     _this.calcIndex = _this.calcIndex.bind(_this);
     _this.calcItemDimensions = _this.calcItemDimensions.bind(_this);
     _this.calcItemsAmountToRender = _this.calcItemsAmountToRender.bind(_this);
-    var index = _this.calcIndex();
+    // let index = this.calcIndex();
+    var index = _this.props.defaultSelectedItem || _this.props.defaultSelectedItem == 0 ? _this.props.defaultSelectedItem : _this.calcIndex();
     _this.state = {
       selectedIndex: index,
       prevIndex: index,
@@ -113,12 +114,14 @@ var Container = function (_React$Component) {
       var items = this.prepareItems();
       return _react2.default.createElement(
         'div',
-        _extends({ tabIndex: '0',
+        _extends({
+          tabIndex: '0',
           style: this.props.containerStyles
         }, _swipeReact2.default.events, _wheelReact2.default.events, _arrowKeysReact2.default.events, {
           ref: function ref(coverflow) {
             _this2.coverflow = coverflow;
-          } }),
+          }
+        }),
         items.map(function (item) {
           return _react2.default.createElement(_Item2.default, {
             side: item.side,
@@ -132,7 +135,8 @@ var Container = function (_React$Component) {
             width: itemWidth,
             label: item.label,
             direction: _this2.props.direction,
-            key: item.index });
+            key: item.index
+          });
         })
       );
     }
@@ -171,7 +175,11 @@ var Container = function (_React$Component) {
       var index = this.state.selectedIndex;
       var imagesArr = JSON.parse(JSON.stringify(this.props.imagesArr));
       var items = imagesArr.map(function (imgUrl, index) {
-        return { imgUrl: imgUrl, index: index, label: null };
+        return {
+          imgUrl: imgUrl,
+          index: index,
+          label: null
+        };
       });
 
       for (var i = 0; i < this.props.labelsArr.length; i++) {
@@ -305,7 +313,8 @@ Container.propTypes = {
   border: _propTypes2.default.string,
   boxShadow: _propTypes2.default.string,
   itemRatio: _propTypes2.default.string,
-  handleSelect: _propTypes2.default.func
+  handleSelect: _propTypes2.default.func,
+  defaultSelectedItem: _propTypes2.default.number
 };
 
 exports.default = Container;

lib/CoverFlow/Container/Item/Item.js

@@ -46,18 +46,16 @@ var Item = function (_React$Component) {
       var _this2 = this;
 
       var 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',
+        backgroundColor: 'rgba(0,0,0,0)',
         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)'
+        transition: 'transform 750ms'
       };
       if (this.props.side !== _SIDES2.default.CENTER) {
         if (this.state.tempTransform !== '') {
@@ -81,7 +79,8 @@ var Item = function (_React$Component) {
       if (this.props.label !== null) {
         labelJsx = _react2.default.createElement(
           'div',
-          { style: {
+          {
+            style: {
               background: 'rgba(0,0,0,0.5)',
               color: 'white',
               padding: '5px',
@@ -90,7 +89,8 @@ var Item = function (_React$Component) {
               width: '100%',
               boxSizing: 'border-box',
               userSelect: 'none'
-            } },
+            }
+          },
           this.props.label
         );
       }
@@ -102,6 +102,14 @@ var Item = function (_React$Component) {
             _this2.props.selectItem(_this2.props.index);
           }
         },
+        _react2.default.createElement('img', {
+          src: this.props.imgUrl,
+          style: {
+            boxShadow: '30px 5px 15px -10px rgba(0,0,0,.15), -30px 5px 15px -10px rgba(0,0,0,.15)',
+            height: this.props.height + 'px',
+            objectFit: 'scale-down'
+          }
+        }),
         labelJsx
       );
     }

lib/CoverFlow/CoverFlow.js

@@ -14,14 +14,14 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _EmptyContainer = require('./Container/EmptyContainer');
-
-var _EmptyContainer2 = _interopRequireDefault(_EmptyContainer);
-
 var _Container = require('./Container/Container');
 
 var _Container2 = _interopRequireDefault(_Container);
 
+var _EmptyContainer = require('./Container/EmptyContainer');
+
+var _EmptyContainer2 = _interopRequireDefault(_EmptyContainer);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -42,7 +42,6 @@ var CoverFlow = function (_React$Component) {
   _createClass(CoverFlow, [{
     key: 'render',
     value: function render() {
-
       var width = void 0,
           height = void 0;
       if (this.props.direction === 'vertical') {
@@ -77,7 +76,8 @@ var CoverFlow = function (_React$Component) {
           width: this.props.width,
           background: this.props.background,
           border: this.props.border,
-          boxShadow: this.props.boxShadow });
+          boxShadow: this.props.boxShadow
+        });
       }
       return _react2.default.createElement(_Container2.default, {
         containerStyles: styles,
@@ -91,7 +91,9 @@ var CoverFlow = function (_React$Component) {
         background: this.props.background,
         border: this.props.border,
         boxShadow: this.props.boxShadow,
-        direction: this.props.direction });
+        direction: this.props.direction,
+        defaultSelectedItem: this.props.defaultSelectedItem
+      });
     }
   }]);
 
@@ -109,7 +111,8 @@ CoverFlow.propTypes = {
   emptyMessage: _propTypes2.default.string,
   itemRatio: _propTypes2.default.string,
   handleSelect: _propTypes2.default.func,
-  labelsArr: _propTypes2.default.array
+  labelsArr: _propTypes2.default.array,
+  defaultSelectedItem: _propTypes2.default.number
 };
 
 CoverFlow.defaultProps = {