kitten-components/dist/javascripts/kitten/components/grid/scrollable-container.js

Front-end components library

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _radium = require('radium');

var _radium2 = _interopRequireDefault(_radium);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _container = require('kitten/components/grid/container');

var _colorsConfig = require('kitten/constants/colors-config');

var _colorsConfig2 = _interopRequireDefault(_colorsConfig);

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

var ScrollableContainer = exports.ScrollableContainer = function ScrollableContainer(props) {
  return _react2.default.createElement(
    _container.Container,
    _extends({}, props, {
      className: (0, _classnames2.default)('k-Container--no-padding', props.className),
      style: _extends({}, styles.container, props.style)
    }),
    _react2.default.createElement(
      'div',
      { className: 'k-ScrollableContainer', style: styles.scrollable },
      props.children
    ),
    _react2.default.createElement('div', { style: styles.gradiantLeft }),
    _react2.default.createElement('div', { style: styles.gradiantRight }),
    _react2.default.createElement(_radium.Style, {
      scopeSelector: '.k-ScrollableContainer::-webkit-scrollbar',
      rules: { display: 'none' }
    })
  );
};

var transparent = 'rgba(255, 255, 255, 0)';
var gradiantWidth = 20;

var styles = {
  container: {
    position: 'relative'
  },

  scrollable: {
    display: 'flex',
    whiteSpace: 'nowrap',
    overflowX: 'auto',
    // Hide scrollbar on IE and Edge.
    MsOverflowStyle: 'none',
    // Mandatory to combine scroll with this property on iOS.
    WebkitOverflowScrolling: 'touch'
  },

  gradiantLeft: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    width: gradiantWidth,
    background: 'linear-gradient(90deg, ' + _colorsConfig2.default.background1 + ', ' + transparent + ')'
  },

  gradiantRight: {
    position: 'absolute',
    right: 0,
    top: 0,
    bottom: 0,
    width: gradiantWidth,
    background: 'linear-gradient(90deg, ' + transparent + ', ' + _colorsConfig2.default.background1 + ')'
  }
};