zrmc
Version:
ZRMC is an ES7 React wrapper for Material Components Web.
281 lines (252 loc) • 8.22 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require("babel-runtime/helpers/createClass");
var _createClass3 = _interopRequireDefault(_createClass2);
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _manager = require("./dialog/manager");
var _manager2 = _interopRequireDefault(_manager);
var _dialog = require("./dialog/dialog");
var _dialog2 = _interopRequireDefault(_dialog);
var _anchor = require("./menu/anchor");
var _anchor2 = _interopRequireDefault(_anchor);
var _ripple = require("./animations/ripple");
var _ripple2 = _interopRequireDefault(_ripple);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
* Zrmc
* Global & helper class
* It handle
* ripple : DONE
* https://material.io/components/web/catalog/ripples/
* rtl : DONE
* https://material.io/components/web/catalog/rtl/
* theme : TODO
* https://material.io/components/web/catalog/theme/
* elevation : DONE
* https://material.io/components/web/catalog/elevation/
* typography: DONE
* https://material.io/components/web/catalog/typography/
*/
var Zrmc = new (function () {
function _class() {
(0, _classCallCheck3.default)(this, _class);
}
(0, _createClass3.default)(_class, [{
key: "init",
value: function init(root, _ref) {
var rtl = _ref.rtl,
themeDark = _ref.themeDark,
style = _ref.style,
typography = _ref.typography,
_ref$ripple = _ref.ripple,
ripple = _ref$ripple === undefined ? true : _ref$ripple;
this.isLockScroll = false;
this.rtl = rtl;
this.changeTheme(themeDark, style);
this.typography = typography;
if (rtl) {
var html = document.getElementsByTagName("html")[0];
html.setAttribute("dir", "rtl");
}
if (typography) {
document.body.className += " mdc-typography";
}
if (ripple) {
this.ripple = ripple;
}
_manager2.default.init();
}
}, {
key: "changeTheme",
value: function changeTheme(themeDark, style) {
this.themeDark = themeDark;
if (themeDark) {
document.body.className += " mdc-theme--dark";
}
this.style = style; // TODO style
}
}, {
key: "isRtl",
value: function isRtl(element) {
return Boolean(this.rtl || element && element.props.rtl);
}
/* eslint-disable class-methods-use-this */
}, {
key: "generateId",
value: function generateId(id) {
// TODO better cid generator
var cid = id || Math.random().toString(36);
return cid;
}
}, {
key: "sanitizeProps",
value: function sanitizeProps(props) {
var mdcElement = props.mdcElement,
rtl = props.rtl,
elevation = props.elevation,
themeDark = props.themeDark,
style = props.style,
typography = props.typography,
ripple = props.ripple,
menu = props.menu,
className = props.className,
p = (0, _objectWithoutProperties3.default)(props, ["mdcElement", "rtl", "elevation", "themeDark", "style", "typography", "ripple", "menu", "className"]);
return p;
}
/* eslint-enable class-methods-use-this */
}, {
key: "attachDrawer",
value: function attachDrawer() {
if (this.menu && this.drawer) {
// TODO attach drawer
}
}
}, {
key: "render",
value: function render(element, _ref2) {
var rtl = _ref2.rtl,
elevation = _ref2.elevation,
themeDark = _ref2.themeDark,
style = _ref2.style,
typography = _ref2.typography,
ripple = _ref2.ripple,
menu = _ref2.menu,
className = _ref2.className,
props = (0, _objectWithoutProperties3.default)(_ref2, ["rtl", "elevation", "themeDark", "style", "typography", "ripple", "menu", "className"]);
var name = props.mdcElement;
if (name === "mdc-toolbar__menu-icon") {
this.menu = element;
this.attachDrawer();
}
var ps = {};
var change = false;
var classes = element.props.className || "";
if (className) {
classes = className + " " + classes;
change = true;
}
if (rtl && !this.rtl) {
ps.dir = "rtl";
change = true;
}
if (elevation) {
var e = Number(elevation);
if (Number.isInteger(e) && e > -1 && e < 25) {
classes += " mdc-elevation--z" + e;
change = true;
}
}
if (themeDark) {
classes += " " + name + "--theme-dark";
change = true;
}
if (style) {
// TODO check style
ps.style = style;
change = true;
}
if (typography) {
// TODO validate value
classes += " mdc-typography--" + typography;
change = true;
}
var el = element;
if (change) {
ps.className = classes;
el = _react2.default.cloneElement(element, ps);
}
if (ripple && this.ripple) {
// TODO check if element could get ripple effect
var unbounded = ripple === "unbounded";
el = _react2.default.createElement(_ripple2.default, { unbounded: unbounded }, el);
}
if (menu) {
// Create Menu Anchor
return _react2.default.createElement(_anchor2.default, { menu: menu }, el);
}
return el;
}
}, {
key: "showDialog",
value: function showDialog(dialog) {
if (typeof dialog === "string") {
this.dialog = _react2.default.createElement(_dialog2.default, {}, dialog);
} else if (dialog.body || dialog.field) {
var body = dialog.body,
props = (0, _objectWithoutProperties3.default)(dialog, ["body"]);
this.dialog = _react2.default.createElement(_dialog2.default, props, body);
} else {
// It should be a React Component
this.dialog = dialog;
}
// openDialog
_manager2.default.open(this.dialog);
}
}, {
key: "closeDialog",
value: function closeDialog() {
this.dialog = null;
// close current dialog
_manager2.default.close();
}
}, {
key: "enableClickOutside",
value: function enableClickOutside(callback) {
this.outsideCallback = callback;
document.addEventListener("click", callback, true);
}
}, {
key: "disableClickOutside",
value: function disableClickOutside(callback) {
this.outsideCallback = null;
document.removeEventListener("click", callback, true);
}
}, {
key: "getComputedStyleValue",
value: function getComputedStyleValue(element, name) {
this.name = name;
return window.getComputedStyle(element).getPropertyValue(name);
}
}, {
key: "getFontStyle",
value: function getFontStyle(element) {
var font = this.getComputedStyleValue(element, "font");
if (!font) {
var primaryFontFamily = this.getComputedStyleValue(element, "font-family").split(",")[0];
var fontSize = this.getComputedStyleValue(element, "font-size");
font = fontSize + " " + primaryFontFamily;
}
return font;
}
}, {
key: "lockScroll",
value: function lockScroll() {
if (!this.isLockScroll) {
this.isLockScroll = true;
document.body.classList.add("zrmc-scroll-lock");
}
}
}, {
key: "unlockScroll",
value: function unlockScroll() {
if (this.isLockScroll) {
this.isLockScroll = false;
document.body.classList.remove("zrmc-scroll-lock");
}
}
}]);
return _class;
}())(); /**
* Copyright (c) 2015-present, CWB SAS
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
exports.default = Zrmc;