@schibstedspain/sui-image-picker - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

CHANGELOG.md

@@ -5,2 +5,12 @@ # Change Log
 
+<a name="1.3.0"></a>
+# 1.3.0 (2019-04-02)
+
+
+### Features
+
+* Remove .npmignore ([8624be2](https://github.com/SUI-Components/schibsted-spain-components/commit/8624be2))
+
+
+
 <a name="1.2.0"></a>
@@ -12,3 +22,3 @@ # 1.2.0 (2018-03-07)
 
-* prepare component for sui-theme change ([7d945a6](https://github.com/SUI-Components/sui-components/commit/7d945a6))
+* prepare component for sui-theme change ([7d945a6](https://github.com/SUI-Components/schibsted-spain-components/commit/7d945a6))
 
@@ -23,5 +33,5 @@
 
-* adding different images ([401e526](https://github.com/SUI-Components/sui-components/commit/401e526))
-* fixing comments from enablers ([0b238d4](https://github.com/SUI-Components/sui-components/commit/0b238d4))
-* partial fix after review of enablers ([9963880](https://github.com/SUI-Components/sui-components/commit/9963880))
+* adding different images ([401e526](https://github.com/SUI-Components/schibsted-spain-components/commit/401e526))
+* fixing comments from enablers ([0b238d4](https://github.com/SUI-Components/schibsted-spain-components/commit/0b238d4))
+* partial fix after review of enablers ([9963880](https://github.com/SUI-Components/schibsted-spain-components/commit/9963880))
 
@@ -31,5 +41,5 @@
 
-* new image-picker component ([2af3d61](https://github.com/SUI-Components/sui-components/commit/2af3d61))
+* new image-picker component ([2af3d61](https://github.com/SUI-Components/schibsted-spain-components/commit/2af3d61))
 
 
 

lib/index.js

@@ -1,73 +0,43 @@
-'use strict';
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import ImagePlaceholder from '@schibstedspain/sui-image-placeholder';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+var ImagePicker =
+/*#__PURE__*/
+function (_Component) {
+  _inheritsLoose(ImagePicker, _Component);
 
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+  function ImagePicker(props) {
+    var _this;
 
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+    _this = _Component.call(this, props) || this;
 
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+    _this._buttonAction = function (callback) {
+      var _this$state = _this.state,
+          images = _this$state.images,
+          selected = _this$state.selected;
 
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+      if (selected === -1) {
+        return;
+      }
 
-var _createClass2 = require('babel-runtime/helpers/createClass');
+      callback(images[selected]);
+    };
 
-var _createClass3 = _interopRequireDefault(_createClass2);
-
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
-var _inherits2 = require('babel-runtime/helpers/inherits');
-
-var _inherits3 = _interopRequireDefault(_inherits2);
-
-var _class, _temp, _initialiseProps;
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _classnames = require('classnames');
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
-var _suiImagePlaceholder = require('@schibstedspain/sui-image-placeholder');
-
-var _suiImagePlaceholder2 = _interopRequireDefault(_suiImagePlaceholder);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var ImagePicker = (_temp = _class = function (_Component) {
-  (0, _inherits3.default)(ImagePicker, _Component);
-
-  function ImagePicker(props) {
-    (0, _classCallCheck3.default)(this, ImagePicker);
-
-    var _this = (0, _possibleConstructorReturn3.default)(this, (ImagePicker.__proto__ || (0, _getPrototypeOf2.default)(ImagePicker)).call(this, props));
-
-    _initialiseProps.call(_this);
-
     var defaultAlt = props.defaultAlt,
         emptyImage = props.emptyImage,
-        images = props.images,
-        selected = props.selected;
+        _images = props.images,
+        _selected = props.selected;
+    var selectedImage = -1;
 
-
-    var selectedImage = -1;
-    if (images.length !== 0) {
-      selectedImage = images[selected] ? selected : 0;
+    if (_images.length !== 0) {
+      selectedImage = _images[_selected] ? _selected : 0;
     }
 
     _this.state = {
-      images: images,
+      images: _images,
       selected: selectedImage
     };
-
     _this.placeHolder = {
@@ -80,176 +50,90 @@ alt: defaultAlt,
 
-  (0, _createClass3.default)(ImagePicker, [{
-    key: '_getHeadImage',
-    value: function _getHeadImage() {
-      var _state = this.state,
-          images = _state.images,
-          selected = _state.selected;
-      var _props = this.props,
-          defaultAlt = _props.defaultAlt,
-          emptyImage = _props.emptyImage;
+  var _proto = ImagePicker.prototype;
 
+  _proto._getHeadImage = function _getHeadImage() {
+    var _this$state2 = this.state,
+        images = _this$state2.images,
+        selected = _this$state2.selected;
+    var _this$props = this.props,
+        defaultAlt = _this$props.defaultAlt,
+        emptyImage = _this$props.emptyImage;
+    var src = selected === -1 ? emptyImage : images[selected].src;
+    var alt = selected === -1 ? defaultAlt : images[selected].alt;
+    return React.createElement(ImagePlaceholder, {
+      src: src,
+      alt: alt,
+      placeholder: this.placeHolder
+    });
+  };
 
-      var src = selected === -1 ? emptyImage : images[selected].src;
-      var alt = selected === -1 ? defaultAlt : images[selected].alt;
+  _proto._getListImages = function _getListImages() {
+    var _this2 = this;
 
-      return _react2.default.createElement(_suiImagePlaceholder2.default, { src: src, alt: alt, placeholder: this.placeHolder });
-    }
-  }, {
-    key: '_getListImages',
-    value: function _getListImages() {
-      var _this2 = this;
-
-      var _state2 = this.state,
-          images = _state2.images,
-          selected = _state2.selected;
-
-
-      var imageList = images.map(function (image, index) {
-        var itemClass = (0, _classnames2.default)('sui-ImagePicker-thumbItem', {
-          'sui-ImagePicker-thumbItem--selected': index === selected
-        });
-        return _react2.default.createElement(
-          'li',
-          { className: itemClass, key: image.src, onClick: function onClick() {
-              return _this2._handleClick(image);
-            } },
-          _react2.default.createElement('img', { src: image.thumb, alt: image.alt, title: image.alt })
-        );
+    var _this$state3 = this.state,
+        images = _this$state3.images,
+        selected = _this$state3.selected;
+    var imageList = images.map(function (image, index) {
+      var itemClass = cx('sui-ImagePicker-thumbItem', {
+        'sui-ImagePicker-thumbItem--selected': index === selected
       });
-      return imageList;
-    }
-  }, {
-    key: '_handleClick',
-    value: function _handleClick(clickedImage) {
-      var images = this.state.images;
-      var onClick = this.props.onClick;
+      return React.createElement("li", {
+        className: itemClass,
+        key: image.src,
+        onClick: function onClick() {
+          return _this2._handleClick(image);
+        }
+      }, React.createElement("img", {
+        src: image.thumb,
+        alt: image.alt,
+        title: image.alt
+      }));
+    });
+    return imageList;
+  };
 
+  _proto._handleClick = function _handleClick(clickedImage) {
+    var images = this.state.images;
+    var onClick = this.props.onClick;
+    var selected = images.findIndex(function (image) {
+      return image.src === clickedImage.src;
+    });
+    this.setState({
+      selected: selected
+    });
+    onClick(clickedImage);
+  };
 
-      var selected = images.findIndex(function (image) {
-        return image.src === clickedImage.src;
-      });
-      this.setState({ selected: selected });
-      onClick(clickedImage);
-    }
-  }, {
-    key: '_displayActions',
-    value: function _displayActions(actions) {
-      var _this3 = this;
+  _proto._displayActions = function _displayActions(actions) {
+    var _this3 = this;
 
-      var actionList = actions.map(function (action, index) {
-        return _react2.default.createElement(
-          'div',
-          { className: 'sui-ImagePicker-action', key: index, onClick: function onClick() {
-              return _this3._buttonAction(action.callback);
-            } },
-          action.node
-        );
-      });
-      return _react2.default.createElement(
-        'div',
-        { className: 'sui-ImagePicker-actions' },
-        actionList
-      );
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var actions = this.props.actions;
-      var images = this.state.images;
+    var actionList = actions.map(function (action, index) {
+      return React.createElement("div", {
+        className: "sui-ImagePicker-action",
+        key: index,
+        onClick: function onClick() {
+          return _this3._buttonAction(action.callback);
+        }
+      }, action.node);
+    });
+    return React.createElement("div", {
+      className: "sui-ImagePicker-actions"
+    }, actionList);
+  };
 
+  _proto.render = function render() {
+    var actions = this.props.actions;
+    var images = this.state.images;
+    return React.createElement("div", {
+      className: "sui-ImagePicker"
+    }, React.createElement("div", null, React.createElement("div", {
+      className: "sui-ImagePicker-headImage"
+    }, this._getHeadImage()), actions.length > 0 && this._displayActions(actions)), images.length > 0 && React.createElement("ul", {
+      className: "sui-ImagePicker-thumbList"
+    }, this._getListImages()));
+  };
 
-      return _react2.default.createElement(
-        'div',
-        { className: 'sui-ImagePicker' },
-        _react2.default.createElement(
-          'div',
-          null,
-          _react2.default.createElement(
-            'div',
-            { className: 'sui-ImagePicker-headImage' },
-            this._getHeadImage()
-          ),
-          actions.length > 0 && this._displayActions(actions)
-        ),
-        images.length > 0 && _react2.default.createElement(
-          'ul',
-          { className: 'sui-ImagePicker-thumbList' },
-          this._getListImages()
-        )
-      );
-    }
-  }]);
   return ImagePicker;
-}(_react.Component), _initialiseProps = function _initialiseProps() {
-  var _this4 = this;
+}(Component);
 
-  this._buttonAction = function (callback) {
-    var _state3 = _this4.state,
-        images = _state3.images,
-        selected = _state3.selected;
-
-    if (selected === -1) {
-      return;
-    }
-    callback(images[selected]);
-  };
-}, _temp);
-
-
 ImagePicker.displayName = 'ImagePicker';
-
-ImagePicker.propTypes = process.env.NODE_ENV !== "production" ? process.env.NODE_ENV !== "production" ? {
-  /**
-   * Array with React components (or nodes) with the different actions to be done
-   */
-  actions: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-    /**
-     * Action callback
-     */
-    callback: _propTypes2.default.func.isRequired,
-    /**
-     * React node to be displayed
-     */
-    node: _propTypes2.default.node.isRequired
-  })),
-
-  /**
-   * String that must be displayed in the ALT when there's no image to display
-   */
-  defaultAlt: _propTypes2.default.string.isRequired,
-
-  /**
-   * Image that will be displayed when there is no image in the array of images
-   */
-  emptyImage: _propTypes2.default.node.isRequired,
-
-  /**
-   * Array of images to be displayed and picked
-   */
-  images: _propTypes2.default.arrayOf(_propTypes2.default.shape({
-    /**
-     * ALT text
-     */
-    alt: _propTypes2.default.string.isRequired,
-    /**
-     * Url with the image to be displayed. This image must be pre-resized to fit.
-     */
-    src: _propTypes2.default.string.isRequired,
-    /**
-     * Url with the thumbnail
-     */
-    thumb: _propTypes2.default.string.isRequired
-  })),
-
-  /**
-   * Callback to the parent that will be called every time a thumb is clicked.
-   */
-  onClick: _propTypes2.default.func,
-
-  /**
-   * Index of the image that must be display upon the rendering
-   */
-  selected: _propTypes2.default.number
-} : {} : {};
-
 ImagePicker.defaultProps = {
@@ -261,3 +145,2 @@ actions: [],
 };
-
-exports.default = ImagePicker;
+export default ImagePicker;

package.json

 {
   "name": "@schibstedspain/sui-image-picker",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12994

increased by1.22%

Lines of code

278

increased by6.51%

Number of low supply chain risk alerts

1

decreased by-66.67%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes