How to use the radium.StyleRoot function in radium

To help you get started, we’ve selected a few radium examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github frontend-collective / react-image-lightbox / lib / ReactImageLightbox.js View on Github external
if (this.state.zoomLevel === _Constant2['default'].MIN_ZOOM_LEVEL) {
            zoomOutButtonStyle.push(_Styles2['default'].builtinButtonDisabled);
            zoomOutButtonHandler = noop;
        }

        // Ignore clicks during animation
        if (this.isAnimating()) {
            zoomInButtonHandler = noop;
            zoomOutButtonHandler = noop;
        }

        return _react2['default'].createElement(
            _Portal2['default'],
            null,
            _react2['default'].createElement(
                _radium.StyleRoot,
                null,
                _react2['default'].createElement(
                    'div',
                    { // Floating modal with closing animations
                        className: 'outer' + (this.state.isClosing ? ' closing' : ''),
                        onWheel: this.handleOuterMousewheel,
                        onMouseMove: this.handleOuterMouseMove,
                        onMouseDown: this.handleOuterMouseDown,
                        onMouseUp: this.handleOuterMouseUp,
                        style: [_Styles2['default'].outer, _Styles2['default'].outerAnimating(this.props.animationDuration, this.state.isClosing), this.state.isClosing ? _Styles2['default'].outerClosing : {}]
                    },
                    _react2['default'].createElement(
                        'div',
                        { // Image holder
                            className: 'inner',
                            onClick: this.props.clickOutsideToClose ? this.closeIfClickInner : noop,
github frontend-collective / react-image-lightbox / bundle.js View on Github external
},{"radium":undefined}],"react-image-lightbox":[function(require,module,exports){
/*
 * react-image-lightbox 1.0.0
 * Copyright 2016 Chris Fritz All rights reserved.
 * @license Open source under the MIT License
 */
'use strict';

var React = require('react');
var Radium = require('radium');
var StyleRoot = Radium.StyleRoot;
var Styles = require('./Styles');
var Portal = require('./Portal');
var Constant = require('./Constant');

function _getWindowWidth() {
    return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}

function _getWindowHeight() {
    return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}

// Returns true if this window is rendered as an iframe inside another window
function _isInIframe() {
    try {
        return window.self !== window.top;
github contentful-labs / gazette / src / app.js View on Github external
'use strict';

const React = require('react');
const Radium = require('radium');
const StyleRoot = Radium.StyleRoot;

const client = require('./contentful.js');
const pubsub = require('./pubnub.js');
const style = require('./style.js').app;

const {Link, Ribbon} = require('./links.js');
const Articles = require('./articles.js');

const App = React.createClass({
  getInitialState: function () {
    return {loading: true, entries: null};
  },
  componentDidMount: function () {
    client.getList()
    .then(entries => {
      this.setState({loading: false, entries});
github rkendall / visible-react / lib / console / index.js View on Github external
var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _radium = require('radium');

var _Console = require('./components/Console');

var _Console2 = _interopRequireDefault(_Console);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _reactDom.render)(_react2.default.createElement(
	_radium.StyleRoot,
	null,
	_react2.default.createElement(_Console2.default, null)
), document.getElementById('visible-react'));
github KissKissBankBank / kitten / src / components / cards / team-card / button-with-tooltip.js View on Github external
value: function render() {
      var _this$props = this.props,
          phoneNumber = _this$props.phoneNumber,
          color = _this$props.color;
      var tooltipStyle = [tooltipColor(color), styles.tooltip.content, this.state.hover && styles.tooltip.content.hover, this.state.focus && styles.tooltip.content.focus];
      var arrowTooltipStyle = [styles.tooltip.content.after, arrowTooltipColor(color)];
      return _react.default.createElement(_radium.StyleRoot, null, _react.default.createElement("a", {
        href: "tel:".concat(phoneNumber),
        onMouseEnter: this.handleOnMouseEnter,
        onMouseLeave: this.handleOnMouseLeave,
        onFocus: this.handleSubmitFocus,
        onBlur: this.handleSubmitBlur,
        style: {
          outline: 'none'
        }
      }, _react.default.createElement("div", {
        style: styles.tooltip
      }, _react.default.createElement("span", {
        style: tooltipStyle
      }, phoneNumber, _react.default.createElement("span", {
        style: arrowTooltipStyle
      })), _react.default.createElement(_buttonIcon.ButtonIcon, {
        modifier: "hydrogen",
github scaleflex / filerobot-uploader / dist / components / AirstoreUploader.js View on Github external
setPostUpload: this.setPostUpload,
        saveUploadedFiles: this.saveUploadedFiles,
        onClose: this.props.onClose
      };
      var filteredTabs = tabs.filter(function (tab) {
        return tab.id && activeModules.includes(tab.id);
      });
      var activeTab = (postUpload ? postUploadTabs : filteredTabs).find(function (tab) {
        return tab.id === activeTabId;
      });

      return _react2.default.createElement(
        _Modal.Modal,
        { noBorder: true, fullScreen: 'md', onClose: this.closeModal, style: { borderRadius: 5 } },
        _react2.default.createElement(
          _radium.StyleRoot,
          { className: 'airstore-root-box', style: { width: '100%', height: '100%' } },
          _react2.default.createElement(
            _reactFocusLock2.default,
            null,
            _react2.default.createElement(
              _styledComponents.Dialog,
              { role: 'dialog', className: 'ae-dialog' },
              _react2.default.createElement(
                'div',
                { style: [_styles.CSS.tabs.header], className: 'ae-tabs-header' },
                _react2.default.createElement(_Nav2.default, {
                  tabs: postUpload ? postUploadTabs : filteredTabs,
                  activeTabId: activeTabId,
                  activateTab: this.activateTab
                })
              ),