preact-material-components
Version:
preact wrapper for "Material Components for the web"
282 lines (230 loc) • 8.88 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.MaterialComponent = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _ripple = require("@material/ripple");
var _bindDecorator = require("bind-decorator");
var _preact = require("preact");
var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
var c = arguments.length,
r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
d;
if ((typeof Reflect === "undefined" ? "undefined" : (0, _typeof2.default)(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
}
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var doNotRemoveProps = ['disabled'];
/**
* Base class for every Material component in this package
* NOTE: every component should add a ref by the name of `control` to its root dom for autoInit Properties
*
* @export
* @class MaterialComponent
* @extends {Component}
*/
var MaterialComponent =
/*#__PURE__*/
function (_Component) {
(0, _inherits2.default)(MaterialComponent, _Component);
function MaterialComponent() {
(0, _classCallCheck2.default)(this, MaterialComponent);
return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(MaterialComponent).apply(this, arguments));
}
(0, _createClass2.default)(MaterialComponent, [{
key: "render",
value: function render(props) {
if (!this.classText) {
this.classText = this.buildClassName(props);
} // Fetch a VNode
var componentProps = props;
var userDefinedClasses = componentProps.className || componentProps.class || ''; // We delete class props and add them later in the final
// step so every component does not need to handle user specified classes.
if (componentProps.class) {
delete componentProps.class;
}
if (componentProps.className) {
delete componentProps.className;
}
var element = this.materialDom(componentProps);
var propName = 'attributes';
if ('props' in element) {
propName = 'props'; // @ts-ignore
element.props = element.props || {};
} else {
element.attributes = element.attributes || {};
} // @ts-ignore
element[propName].className = "".concat(userDefinedClasses, " ").concat(this.getClassName(element)).split(' ').filter(function (value, index, self) {
return self.indexOf(value) === index && value !== '';
}) // Unique + exclude empty class names
.join(' '); // Clean this shit of proxy attributes
this.mdcProps.forEach(function (prop) {
// TODO: Fix this better
if (prop in doNotRemoveProps) {
return;
} // @ts-ignore
delete element[propName][prop];
});
return element;
}
/** Attach the ripple effect */
}, {
key: "componentDidMount",
value: function componentDidMount() {
if (this.props.ripple && this.control) {
this.ripple = new _ripple.MDCRipple(this.control);
}
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if (this.MDComponent && this.mdcNotifyProps) {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = this.mdcNotifyProps[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var prop = _step.value;
if (this.props[prop] !== nextProps[prop]) {
this.MDComponent[prop] = nextProps[prop];
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = this.mdcProps[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var _prop = _step2.value;
if (this.props[_prop] !== nextProps[_prop]) {
this.classText = this.buildClassName(nextProps);
break;
}
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
if (this.ripple) {
this.ripple.destroy();
}
}
}, {
key: "afterComponentDidMount",
value: function afterComponentDidMount() {
if (this.MDComponent && this.mdcNotifyProps) {
var _iteratorNormalCompletion3 = true;
var _didIteratorError3 = false;
var _iteratorError3 = undefined;
try {
for (var _iterator3 = this.mdcNotifyProps[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
var prop = _step3.value;
this.MDComponent[prop] = this.props[prop];
}
} catch (err) {
_didIteratorError3 = true;
_iteratorError3 = err;
} finally {
try {
if (!_iteratorNormalCompletion3 && _iterator3.return != null) {
_iterator3.return();
}
} finally {
if (_didIteratorError3) {
throw _iteratorError3;
}
}
}
}
} // Shared setter for the root element ref
}, {
key: "setControlRef",
value: function setControlRef(control) {
this.control = control;
}
/** Build the className based on component names and mdc props */
}, {
key: "buildClassName",
value: function buildClassName(props) {
// Class name based on component name
var classText = 'mdc-' + this.componentName; // Loop over mdcProps to turn them into classNames
for (var propKey in props) {
if (props.hasOwnProperty(propKey)) {
var prop = props[propKey];
if (typeof prop === 'boolean' && prop) {
if (this.mdcProps.indexOf(propKey) !== -1) {
classText += " mdc-".concat(this.componentName, "--").concat(propKey);
}
}
}
}
return classText;
}
/** Returns the class name for element */
}, {
key: "getClassName",
value: function getClassName(element) {
if (!element) {
return '';
}
var propName = 'attributes';
if ('props' in element) {
propName = 'props'; // @ts-ignore
element.props = element.props || {};
} else {
element.attributes = element.attributes || {};
} // @ts-ignore
var attrs = element[propName] = element[propName] || {};
var classText = this.classText;
if (attrs.class) {
classText += ' ' + attrs.class;
}
if (attrs.className && attrs.className !== attrs.class) {
classText += ' ' + attrs.className;
}
return classText;
}
}]);
return MaterialComponent;
}(_preact.Component);
exports.MaterialComponent = MaterialComponent;
__decorate([_bindDecorator.bind], MaterialComponent.prototype, "setControlRef", null);
var _default = MaterialComponent;
exports.default = _default;
//# sourceMappingURL=MaterialComponent.js.map