apeman-react-range/shim/node/ap_range_style.js

apeman react package for range input component.

/**
 * Style for ApRange.
 * @class ApRangeStyle
 */

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _apemanReactStyle = require('apeman-react-style');

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

/** @lends ApRangeStyle */
var ApRangeStyle = _react2.default.createClass({
  displayName: 'ApRangeStyle',

  propTypes: {
    style: _react.PropTypes.object,
    handleSize: _react.PropTypes.number,
    barHeight: _react.PropTypes.number,
    highlightColor: _react.PropTypes.string
  },
  getDefaultProps: function getDefaultProps() {
    return {
      style: {},
      handleSize: 24,
      barHeight: 4,
      highlightColor: '#38E'
    };
  },

  statics: {
    styleData: function styleData(config) {
      var handleSize = config.handleSize;
      var barHeight = config.barHeight;
      var highlightColor = config.highlightColor;

      var barMargin = (handleSize - barHeight) / 2;
      var handlePaddingRate = -20;

      return {
        all: {
          '.ap-range': {
            position: 'relative',
            height: handleSize + 2 + 'px'
          },
          '.ap-range-inner': {
            display: 'flex',
            margin: '2px 0'
          },
          '.ap-range-bar-wrap': {
            display: 'block',
            position: 'relative',
            width: '100%',
            boxSizing: 'border-box'
          },
          '.ap-range-bar': {
            position: 'absolute',
            left: 0,
            right: 0,
            top: 0,
            height: barHeight + barMargin * 2 + 'px'
          },
          '.ap-range-bar-bg': {
            position: 'absolute',
            top: barMargin,
            left: 0,
            right: 0,
            height: barHeight + 'px',
            borderRadius: barHeight / 2 + 'px',
            border: '1px solid #BBB',
            backgroundColor: '#CCC'
          },
          '.ap-range-bar-highlight': {
            backgroundColor: '' + highlightColor,
            top: barMargin - 1,
            position: 'absolute',
            height: barHeight + 2,
            borderRadius: barHeight / 2,
            border: '1px solid rgba(0,0,0,0.1)',
            maxWidth: '100%'
          },
          '.ap-range-handle': {
            position: 'absolute',
            left: -handleSize / 2 + 'px',
            top: 0,
            display: 'inline-block',
            cursor: '-webkit-grab'
          },
          '.ap-range-handle-area': {
            position: 'absolute',
            display: 'inline-block',
            color: 'transparent',
            opacity: 0,
            left: handlePaddingRate + '%',
            top: handlePaddingRate + '%',
            right: handlePaddingRate + '%',
            bottom: handlePaddingRate + '%'
          },
          '.ap-range-handle:active': {
            cursor: '-webkit-grabbing',
            backgroundColor: '#FCFCFC'
          },
          '.ap-range-handle-from': { left: -handleSize / 2 },
          '.ap-range-handle-to': { left: -handleSize / 2 },
          '.ap-range-handle-icon': {
            width: handleSize,
            height: handleSize,
            borderRadius: 0,
            display: 'inline-block',
            backgroundColor: 'white',
            border: '1px solid #D0D0D0',
            boxShadow: '1px 1px 2px rgba(0,0,0,0.5)',
            position: 'relative',
            zIndex: 3
          },
          '.ap-range-handle-icon:hover': {
            boxShadow: '1px 1px 3px rgba(0,0,0,0.5)'
          },
          '.ap-range-label': {
            display: 'inline-block',
            padding: '2px 4px',
            textAlign: 'right',
            minWidth: '24px',
            fontSize: '14px',
            lineHeight: handleSize + 'px',
            boxSizing: 'border-box'
          }
        }

      };
    }
  },
  render: function render() {
    var s = this;
    var props = s.props;

    var _ApRangeStyle$styleDa = ApRangeStyle.styleData(props);

    var all = _ApRangeStyle$styleDa.all;
    var small = _ApRangeStyle$styleDa.small;
    var medium = _ApRangeStyle$styleDa.medium;
    var large = _ApRangeStyle$styleDa.large;


    return _react2.default.createElement(
      _apemanReactStyle.ApStyle,
      { data: Object.assign(all, props.style),
        smallMediaData: small,
        mediumMediaData: medium,
        largeMediaData: large
      },
      props.children
    );
  }
});

exports.default = ApRangeStyle;
//# sourceMappingURL=data:application/json;base64,bnVsbA==