@rmwc/base - npm Package Compare versions

Comparing version 2.2.0 to 3.0.0

component.d.ts

@@ -10,3 +10,3 @@ import * as React from 'react';
     static displayName: string;
-    tag: string;
+    tag: string | React.ComponentType<any>;
     consumeProps: string[];
@@ -13,0 +13,0 @@ classNames: ((props: any) => any[]) | string[];

component.js

@@ -133,10 +133,14 @@ 'use strict';
         if (props[_oldPropName] !== undefined) {
-          props[newPropName] = transformProp(props[_oldPropName]);
-          var propTransformMessage = '';
-          if (props[newPropName] !== props[_oldPropName]) {
-            propTransformMessage = ' The old value has also been converted from \'' + props[newPropName] + '\' to \'' + props[_oldPropName] + '\'';
+          if (newPropName === '') {
+            (0, _deprecationWarning.deprecationWarning)('prop \'' + _oldPropName + '\' has been removed from the ' + (displayName || '') + ' component and is no longer a valid prop.');
+          } else {
+            props[newPropName] = transformProp(props[_oldPropName]);
+            var propTransformMessage = '';
+            if (props[newPropName] !== props[_oldPropName]) {
+              propTransformMessage = ' The old value has also been converted from \'' + props[newPropName] + '\' to \'' + props[_oldPropName] + '\'';
+            }
+
+            (0, _deprecationWarning.deprecationWarning)('prop \'' + _oldPropName + '\' has been replaced with \'' + newPropName + '\' on the ' + (displayName || '') + ' component.' + propTransformMessage);
           }
 
-          (0, _deprecationWarning.deprecationWarning)('prop \'' + _oldPropName + '\' has been replaced with \'' + newPropName + '\' on the ' + (displayName || '') + ' component.' + propTransformMessage);
-
           delete props[_oldPropName];
@@ -143,0 +147,0 @@ }

foundation-component.d.ts

 import * as React from 'react';
 declare type ClassListT = {
-    get: () => string;
+    renderToString: () => string;
     add: (className: string) => void;
+    has: (className: string) => boolean;
     remove: (className: string) => void;
 };
 declare type PropsListT = {
-    get: () => {
+    addEventListener: (evtName: string, callback: Function) => void;
+    removeEventListener: (evtName: string, callback: Function) => void;
+    all: () => {
         [key: string]: any;
     };
+    get: (propName: string) => any;
     add: (propName: string, value: any) => void;
@@ -23,2 +27,3 @@ remove: (propName: string) => void;
     };
+    constructor(props: FoundationPropsT<P>);
     createClassList(elementName: string): void;
@@ -29,5 +34,9 @@ createPropsList(elementName: string): void;
     componentWillUnmount(): void;
-    syncWithDOM(props: any): void;
+    sync(props: any): void;
     getDefaultFoundation(): void;
+    /**
+     * Fires a cross-browser-compatible custom event from the component root of the given type,
+     */
+    emit(evtType: string, evtData: Object, shouldBubble?: boolean): any;
 }
 export {};

foundation-component.js

@@ -18,2 +18,4 @@ 'use strict';
 
+var _eventsMap = require('./utils/events-map');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,2 +25,4 @@
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
@@ -32,25 +36,27 @@
 
+var reactPropFromEventName = function reactPropFromEventName(evtName) {
+  return _eventsMap.eventsMap[evtName];
+};
+
 var FoundationComponent = exports.FoundationComponent = function (_React$Component) {
   _inherits(FoundationComponent, _React$Component);
 
-  function FoundationComponent() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
+  function FoundationComponent(props) {
     _classCallCheck(this, FoundationComponent);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    var _this = _possibleConstructorReturn(this, (FoundationComponent.__proto__ || Object.getPrototypeOf(FoundationComponent)).call(this, props));
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FoundationComponent.__proto__ || Object.getPrototypeOf(FoundationComponent)).call.apply(_ref, [this].concat(args))), _this), Object.defineProperty(_this, 'classList', {
+    Object.defineProperty(_this, 'classList', {
       enumerable: true,
       writable: true,
       value: {}
-    }), Object.defineProperty(_this, 'propsList', {
+    });
+    Object.defineProperty(_this, 'propsList', {
       enumerable: true,
       writable: true,
       value: {}
-    }), _temp), _possibleConstructorReturn(_this, _ret);
+    });
+
+    _this.foundation_ = _this.getDefaultFoundation();
+    return _this;
   }
@@ -65,5 +71,8 @@
       this.classList[elementName] = {
-        get: function get() {
+        renderToString: function renderToString() {
           return (0, _classnames2.default)(elementName === 'root_' && _this2.props.className, [].concat(_toConsumableArray(classes)));
         },
+        has: function has(className) {
+          return classes.has(className);
+        },
         add: function add(className) {
@@ -89,16 +98,28 @@ if (!classes.has(className)) {
       var props = {};
+
+      var add = function add(propName, value) {
+        props = Object.assign({}, props, _defineProperty({}, propName, value));
+        _this3.setState({});
+      };
+
+      var remove = function remove(propName) {
+        delete props[propName];
+        props = Object.assign({}, props);
+        _this3.setState({});
+      };
+
       this.propsList[elementName] = {
-        get: function get() {
+        addEventListener: function addEventListener(evtName, callback) {
+          add(reactPropFromEventName(evtName), callback);
+        },
+        removeEventListener: function removeEventListener(evtName, callback) {
+          remove(reactPropFromEventName(evtName));
+        },
+        all: function all() {
           return props;
         },
-        add: function add(propName, value) {
-          props = Object.assign({}, props, {
-            propName: value
-          });
-          _this3.setState({});
-        },
-        remove: function remove(propName) {
-          delete props[propName];
-          props = Object.assign({}, props);
-          _this3.setState({});
+        add: add,
+        remove: remove,
+        get: function get(attr) {
+          return props[attr];
         }
@@ -110,4 +131,4 @@ };
     value: function componentDidMount() {
-      this.foundation_ = this.getDefaultFoundation();
-      this.syncWithDOM(this.props);
+      this.foundation_.init();
+      this.sync(this.props);
     }
@@ -117,3 +138,3 @@ }, {
     value: function componentDidUpdate() {
-      this.syncWithDOM(this.props);
+      this.sync(this.props);
     }
@@ -128,7 +149,43 @@ }, {
   }, {
-    key: 'syncWithDOM',
-    value: function syncWithDOM(props) {}
+    key: 'sync',
+    value: function sync(props) {}
   }, {
     key: 'getDefaultFoundation',
     value: function getDefaultFoundation() {}
+
+    /**
+     * Fires a cross-browser-compatible custom event from the component root of the given type,
+     */
+
+  }, {
+    key: 'emit',
+    value: function emit(evtType, evtData) {
+      var shouldBubble = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+
+      var evt = void 0;
+      if (typeof CustomEvent === 'function') {
+        evt = new CustomEvent(evtType, {
+          detail: evtData,
+          bubbles: shouldBubble
+        });
+      } else {
+        evt = document.createEvent('CustomEvent');
+        evt.initCustomEvent(evtType, shouldBubble, false, evtData);
+      }
+
+      // Custom handling for React
+      var propName = evtType;
+
+      // check to see if the foundation still exists. If not, we are
+      // probably unmounted or destroyed and dont want to call any more handlers
+      // This happens when MDC broadcasts certain events on timers
+      if (this.foundation_) {
+        if (this.props[propName]) {
+          // covers calling variations of events. onOpened, onClosed -> onOpen, onClose
+          this.props[propName](evt);
+        }
+      }
+
+      return evt;
+    }
   }]);
@@ -135,0 +192,0 @@

package.json

 {
   "name": "@rmwc/base",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "RMWC base module",
@@ -5,0 +5,0 @@ "main": "index.js",

simpleTag.js

@@ -108,3 +108,5 @@ 'use strict';
           var child = React.Children.only(rest.children);
-          return React.cloneElement(child, Object.assign({}, child.props, safeRest, { className: safeClassNames }));
+          return React.cloneElement(child, Object.assign({}, child.props, safeRest, {
+            className: [safeClassNames, child.props.className].filter(Boolean).join(' ')
+          }));
         }
@@ -111,0 +113,0 @@

No alert changes

Improved metrics

Total package byte prevSize

700152

2.01%

Number of package files

52

8.33%

Lines of code

19333

1.7%

No dependency changes