terra-responsive-element - npm Package Compare versions

Comparing version 5.0.0 to 5.1.0

CHANGELOG.md

@@ -7,6 +7,11 @@ Changelog
 
+5.1.0 - (June 28, 2019)
+------------------
+### Changed
+* Updated examples to use React Hooks
+* Removed all inline styles from Dev-site components and implemented the same styles using external css.
+
 5.0.0 - (June 18, 2019)
 ------------------
 ### Breaking Changes
-
 * Removed `breakpoints.scss`
@@ -17,3 +22,2 @@ * Removed the `defaultElement` prop
 ### Added
-
 * Added `onChange` callback function that is invoked when a breakpoint range changes
@@ -24,3 +28,2 @@ * Added `onResize` callback function that is invoked when a resize event is triggered
 ### Fixed
-
 * Repetitive resizing when a scrollbar appears between two breakpoints
@@ -27,0 +30,0 @@

lib/terra-dev-site/doc/example/BreakpointExample.js

@@ -18,61 +18,26 @@ "use strict";
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+var BreakpointExample = function BreakpointExample() {
+  var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      breakpoint = _useState2[0],
+      setBreakpoint = _useState2[1];
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-var BreakpointExample =
-/*#__PURE__*/
-function (_Component) {
-  _inherits(BreakpointExample, _Component);
-
-  function BreakpointExample() {
-    var _this;
-
-    _classCallCheck(this, BreakpointExample);
-
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(BreakpointExample).call(this));
-    _this.state = {
-      breakpoint: ''
-    };
-    _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(BreakpointExample, [{
-    key: "handleChange",
-    value: function handleChange(breakpoint) {
-      this.setState({
-        breakpoint: breakpoint
-      });
+  return _react.default.createElement(_ResponsiveElement.default, {
+    onChange: function onChange(value) {
+      return setBreakpoint(value);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var breakpoint = this.state.breakpoint;
-      return _react.default.createElement(_ResponsiveElement.default, {
-        onChange: this.handleChange
-      }, _react.default.createElement(_Placeholder.default, {
-        title: breakpoint
-      }));
-    }
-  }]);
+  }, _react.default.createElement(_Placeholder.default, {
+    title: breakpoint
+  }));
+};
 
-  return BreakpointExample;
-}(_react.Component);
-
 var _default = BreakpointExample;
 exports.default = _default;

lib/terra-dev-site/doc/example/ResizeExample.js

@@ -18,61 +18,26 @@ "use strict";
 
-function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+var ResizeExample = function ResizeExample() {
+  var _useState = (0, _react.useState)(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-var BreakpointExample =
-/*#__PURE__*/
-function (_Component) {
-  _inherits(BreakpointExample, _Component);
-
-  function BreakpointExample() {
-    var _this;
-
-    _classCallCheck(this, BreakpointExample);
-
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(BreakpointExample).call(this));
-    _this.state = {
-      width: ''
-    };
-    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(BreakpointExample, [{
-    key: "handleResize",
-    value: function handleResize(width) {
-      this.setState({
-        width: width.toString()
-      });
+  return _react.default.createElement(_ResponsiveElement.default, {
+    onResize: function onResize(value) {
+      return setWidth(value);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var width = this.state.width;
-      return _react.default.createElement(_ResponsiveElement.default, {
-        onResize: this.handleResize
-      }, _react.default.createElement(_Placeholder.default, {
-        title: width
-      }));
-    }
-  }]);
+  }, _react.default.createElement(_Placeholder.default, {
+    title: width
+  }));
+};
 
-  return BreakpointExample;
-}(_react.Component);
-
-var _default = BreakpointExample;
+var _default = ResizeExample;
 exports.default = _default;

lib/terra-dev-site/doc/responsive-element/UpgradeGuide.3.doc.js

@@ -19,3 +19,3 @@ "use strict";
   return _react.default.createElement(_terraDocTemplate.default, {
-    packageName: "terra-form-select",
+    packageName: "terra-responsive-element",
     srcPath: "https://github.com/cerner/terra-core/tree/master/packages/terra-responsive-element",
@@ -22,0 +22,0 @@ readme: _UPGRADEGUIDE.default

lib/terra-dev-site/test/responsive-element/FixedSize.test.js

@@ -10,4 +10,8 @@ "use strict";
 
+var _bind = _interopRequireDefault(require("classnames/bind"));
+
 var _ResponsiveElement = _interopRequireDefault(require("../../../ResponsiveElement"));
 
+var _FixedSizeModule = _interopRequireDefault(require("./FixedSize.module.scss"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,2 +23,4 @@
  */
+var cx = _bind.default.bind(_FixedSizeModule.default);
+
 var FixedSize = function FixedSize() {
@@ -24,5 +30,3 @@ return _react.default.createElement("div", {
   }, _react.default.createElement("div", {
-    style: {
-      width: '1000px'
-    }
+    className: cx('responsive-element-wrapper')
   }, _react.default.createElement(_ResponsiveElement.default, {
@@ -29,0 +33,0 @@ tiny: _react.default.createElement("div", null, "Tiny"),

package.json

 {
   "name": "terra-responsive-element",
   "main": "lib/ResponsiveElement.js",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "The terra-responsive-element conditionally renders components based on viewport size",
@@ -31,4 +31,4 @@ "repository": {
     "resize-observer-polyfill": "^1.4.1",
-    "terra-breakpoints": "^2.6.0",
-    "terra-doc-template": "^2.10.0"
+    "terra-breakpoints": "^2.10.0",
+    "terra-doc-template": "^2.11.0"
   },
@@ -35,0 +35,0 @@ "scripts": {

src/terra-dev-site/doc/example/BreakpointExample.jsx

 /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import Placeholder from 'terra-doc-template/lib/Placeholder';
 import ResponsiveElement from '../../../ResponsiveElement';
 
-class BreakpointExample extends Component {
-  constructor() {
-    super();
+const BreakpointExample = () => {
+  const [breakpoint, setBreakpoint] = useState('');
 
-    this.state = { breakpoint: '' };
-    this.handleChange = this.handleChange.bind(this);
-  }
+  return (
+    <ResponsiveElement onChange={value => setBreakpoint(value)}>
+      <Placeholder title={breakpoint} />
+    </ResponsiveElement>
+  );
+};
 
-  handleChange(breakpoint) {
-    this.setState({ breakpoint });
-  }
-
-  render() {
-    const { breakpoint } = this.state;
-
-    return (
-      <ResponsiveElement onChange={this.handleChange}>
-        <Placeholder title={breakpoint} />
-      </ResponsiveElement>
-    );
-  }
-}
-
 export default BreakpointExample;

src/terra-dev-site/doc/example/ResizeExample.jsx

 /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import Placeholder from 'terra-doc-template/lib/Placeholder';
 import ResponsiveElement from '../../../ResponsiveElement';
 
-class BreakpointExample extends Component {
-  constructor() {
-    super();
+const ResizeExample = () => {
+  const [width, setWidth] = useState('');
 
-    this.state = { width: '' };
-    this.handleResize = this.handleResize.bind(this);
-  }
+  return (
+    <ResponsiveElement onResize={value => setWidth(value)}>
+      <Placeholder title={width} />
+    </ResponsiveElement>
+  );
+};
 
-  handleResize(width) {
-    this.setState({ width: width.toString() });
-  }
-
-  render() {
-    const { width } = this.state;
-
-    return (
-      <ResponsiveElement onResize={this.handleResize}>
-        <Placeholder title={width} />
-      </ResponsiveElement>
-    );
-  }
-}
-
-export default BreakpointExample;
+export default ResizeExample;

src/terra-dev-site/doc/responsive-element/UpgradeGuide.3.doc.jsx

@@ -8,3 +8,3 @@ /* eslint-disable import/no-webpack-loader-syntax, import/first, import/extensions */
   <DocTemplate
-    packageName="terra-form-select"
+    packageName="terra-responsive-element"
     srcPath="https://github.com/cerner/terra-core/tree/master/packages/terra-responsive-element"
@@ -11,0 +11,0 @@ readme={UpgradeGuide}

src/terra-dev-site/test/responsive-element/FixedSize.test.jsx

@@ -7,8 +7,11 @@ /**
 import React from 'react';
+import classNames from 'classnames/bind';
 import ResponsiveElement from '../../../ResponsiveElement';
+import styles from './FixedSize.module.scss';
 
+const cx = classNames.bind(styles);
+
 const FixedSize = () => (
   <div id="fixed-target">
-    {/* eslint-disable-next-line react/forbid-dom-props */}
-    <div style={{ width: '1000px' }}>
+    <div className={cx('responsive-element-wrapper')}>
       <ResponsiveElement
@@ -15,0 +18,0 @@ tiny={<div>Tiny</div>}

Fixed 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

Improved metrics

Number of package files

34

6.25%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Total package byte prevSize

67161

-5.32%

Lines of code

889

-7.59%

Dependency changes

• Updated

  terra-breakpoints@^2.10.0

• Updated

  terra-doc-template@^2.11.0