rmwc/Theme/index.js

A thin React wrapper for Material Design (Web) Components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ThemeProvider = exports.Theme = undefined;

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _Base = require('../Base');

var _toDashCase = require('../Base/utils/to-dash-case');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

// prettier-ignore
var ThemeRoot = (0, _Base.simpleTag)({
  tag: 'span'
});

/**
 * A Theme Component.
 */
var Theme = function Theme(_ref) {
  var use = _ref.use,
      rest = _objectWithoutProperties(_ref, ['use']);

  return React.createElement(ThemeRoot, Object.assign({ theme: use }, rest));
};

exports.Theme = Theme;
Theme.displayName = 'Theme';

/** A ThemeProvider. This sets theme colors for its child tree. */
var ThemeProvider = function ThemeProvider(_ref2) {
  var options = _ref2.options,
      _ref2$style = _ref2.style,
      style = _ref2$style === undefined ? {} : _ref2$style,
      rest = _objectWithoutProperties(_ref2, ['options', 'style']);

  var processedColors = Object.keys(options).reduce(function (acc, key) {
    var val = options[key];
    acc['--mdc-theme-' + (0, _toDashCase.toDashCase)(key)] = val;
    return acc;
  }, {});

  // Casting styles to avoid TSX error
  //$FlowFixMe
  var tsxSafeStyle = style;

  var themeStyles = Object.assign({}, tsxSafeStyle, processedColors);
  return React.createElement('div', Object.assign({}, rest, { style: themeStyles }));
};

exports.ThemeProvider = ThemeProvider;
ThemeProvider.displayName = 'ThemeProvider';