@s-ui/react-atom-image - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

CHANGELOG.md

@@ -5,2 +5,13 @@ # Change Log
 
+<a name="2.1.0"></a>
+# 2.1.0 (2019-07-30)
+
+
+### Features
+
+* hooks migratino ([1ac3104](https://github.com/SUI-Components/sui-components/commit/1ac3104))
+* hooks migration ([0a3fa9d](https://github.com/SUI-Components/sui-components/commit/0a3fa9d))
+
+
+
 <a name="2.0.0"></a>
@@ -7,0 +18,0 @@ # 2.0.0 (2019-07-05)

lib/index.js

@@ -0,5 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-import React, { Component } from 'react';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
@@ -15,5 +14,5 @@ import cx from 'classnames';
 var CLASS_ERROR = BASE_CLASS + "-error";
+/* eslint-disable-next-line react/prop-types */
 
-var Error = function Error(_ref // eslint-disable-line react/prop-types
-) {
+var Error = function Error(_ref) {
   var className = _ref.className,
@@ -27,115 +26,65 @@ Icon = _ref.icon,
 
-var AtomImage =
-/*#__PURE__*/
-function (_Component) {
-  _inheritsLoose(AtomImage, _Component);
+var AtomImage = function AtomImage(_ref2) {
+  var placeholder = _ref2.placeholder,
+      skeleton = _ref2.skeleton,
+      bgStyles = _ref2.bgStyles,
+      Spinner = _ref2.spinner,
+      errorIcon = _ref2.errorIcon,
+      errorText = _ref2.errorText,
+      onError = _ref2.onError,
+      onLoad = _ref2.onLoad,
+      imgProps = _objectWithoutProperties(_ref2, ["placeholder", "skeleton", "bgStyles", "spinner", "errorIcon", "errorText", "onError", "onLoad"]);
 
-  function AtomImage() {
-    var _this;
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      error = _useState4[0],
+      setError = _useState4[1];
 
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
-    _this.state = {
-      loading: true,
-      error: false
-    };
-    _this.imageRef = React.createRef();
+  var imageRef = useRef();
+  var handleLoad = useCallback(function () {
+    setLoading(false);
+    onLoad && onLoad();
+  }, [onLoad]);
+  useEffect(function () {
+    var img = imageRef.current;
+    if (img && img.complete && loading) handleLoad();
+  }, [handleLoad, loading]);
+  var classNames = cx(BASE_CLASS, "is-" + (loading ? 'loading' : 'loaded'), error && "is-error");
+  var classNamesFigure = cx(BASE_CLASS_FIGURE, placeholder && CLASS_PLACEHOLDER, skeleton && CLASS_SKELETON);
 
-    _this.handleLoad = function () {
-      var onLoad = _this.props.onLoad;
-
-      _this.setState({
-        loading: false
-      });
-
-      onLoad && onLoad();
-    };
-
-    _this.handleError = function () {
-      var onError = _this.props.onError;
-
-      _this.setState({
-        error: true,
-        loading: false
-      });
-
-      onError && onError();
-    };
-
-    return _this;
-  }
-
-  var _proto = AtomImage.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    var img = this.imageRef.current;
-
-    if (img && img.complete && this.state.loading) {
-      this.handleLoad();
-    }
+  var handleError = function handleError() {
+    setLoading(false);
+    setError(true);
+    onError && onError();
   };
 
-  _proto.render = function render() {
-    var _this$props = this.props,
-        placeholder = _this$props.placeholder,
-        skeleton = _this$props.skeleton,
-        bgStyles = _this$props.bgStyles,
-        Spinner = _this$props.spinner,
-        errorIcon = _this$props.errorIcon,
-        errorText = _this$props.errorText,
-        onError = _this$props.onError,
-        onLoad = _this$props.onLoad,
-        imgProps = _objectWithoutProperties(_this$props, ["placeholder", "skeleton", "bgStyles", "spinner", "errorIcon", "errorText", "onError", "onLoad"]);
-
-    var _this$state = this.state,
-        loading = _this$state.loading,
-        error = _this$state.error;
-    var figureStyles = {
-      backgroundImage: "url(" + (placeholder || skeleton) + ")"
-    };
-    var SpinnerExtended = Spinner && React.cloneElement(Spinner, {
-      className: CLASS_SPINNER
-    });
-    return React.createElement("div", {
-      className: this.classNames
-    }, React.createElement("figure", {
-      className: this.classNamesFigure,
-      style: !error && (placeholder || skeleton) ? figureStyles : {}
-    }, React.createElement("img", Object.assign({
-      className: CLASS_IMAGE,
-      onLoad: this.handleLoad,
-      onError: this.handleError,
-      ref: this.imageRef
-    }, imgProps))), !error && loading && SpinnerExtended, error && React.createElement(Error, {
-      className: CLASS_ERROR,
-      icon: errorIcon,
-      text: errorText
-    }));
+  var figureStyles = {
+    backgroundImage: "url(" + (placeholder || skeleton) + ")"
   };
+  var SpinnerExtended = Spinner && React.cloneElement(Spinner, {
+    className: CLASS_SPINNER
+  });
+  return React.createElement("div", {
+    className: classNames
+  }, React.createElement("figure", {
+    className: classNamesFigure,
+    style: !error && (placeholder || skeleton) ? figureStyles : {}
+  }, React.createElement("img", Object.assign({
+    className: CLASS_IMAGE,
+    onLoad: handleLoad,
+    onError: handleError,
+    ref: imageRef
+  }, imgProps))), !error && loading && SpinnerExtended, error && React.createElement(Error, {
+    className: CLASS_ERROR,
+    icon: errorIcon,
+    text: errorText
+  }));
+};
 
-  _createClass(AtomImage, [{
-    key: "classNames",
-    get: function get() {
-      var _this$state2 = this.state,
-          loading = _this$state2.loading,
-          error = _this$state2.error;
-      return cx(BASE_CLASS, "is-" + (loading ? 'loading' : 'loaded'), error && "is-error");
-    }
-  }, {
-    key: "classNamesFigure",
-    get: function get() {
-      var _this$props2 = this.props,
-          placeholder = _this$props2.placeholder,
-          skeleton = _this$props2.skeleton;
-      return cx(BASE_CLASS_FIGURE, placeholder && CLASS_PLACEHOLDER, skeleton && CLASS_SKELETON);
-    }
-  }]);
-
-  return AtomImage;
-}(Component);
-
 AtomImage.displayName = 'AtomImage';
 export default AtomImage;

package.json

 {
   "name": "@s-ui/react-atom-image",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

9754

decreased by-8.06%

Lines of code

94

decreased by-29.32%

No dependency changes