apeman-react-range/lib/jsx/ap_range_style.jsx

apeman react package for range input component.

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

"use strict";

const React = require('react'),
    types = React.PropTypes,
    extend = require('extend'),
    ApStyle = require('apeman-react-style')['ApStyle'];


/** @lends ApRangeStyle */
const ApRangeStyle = React.createClass({
    propTypes: {
        scope: types.bool,
        type: types.string,
        style: types.object,
        handleSize: types.number,
        barHeight: types.number,
        highlightColor: types.string
    },
    getDefaultProps: function () {
        return {
            scoped: false,
            type: 'text/css',
            style: {},
            handleSize: 24,
            barHeight: 4,
            highlightColor: '#38E'
        }
    },
    render: function () {
        let s = this,
            props = s.props;

        let handleSize = props.handleSize,
            barHeight = props.barHeight,
            barMargin = (handleSize - barHeight) / 2,
            highlightColor = props.highlightColor;

        let data = {
                '.ap-range': {
                    position: `relative`,
                    height: `${handleSize + 2}px`
                },
                '.ap-range-inner': {
                    display: `flex`
                },
                '.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)`
                },
                '.ap-range-handle': {
                    position: `absolute`,
                    left: `${-handleSize / 2}px`,
                    top: 0,
                    display: `inline-block`,
                    cursor: '-webkit-grab'
                },
                '.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 #DDD`,
                    boxShadow: `1px 1px 2px rgba(0,0,0,0.5)`
                },
                '.ap-range-label': {
                    display: `inline-block`,
                    padding: `2px 4px`,
                    textAlign: `right`,
                    minWidth: `24px`,
                    fontSize: `14px`,
                    lineHeight: `${handleSize + 2}px`,
                    boxSizing: `border-box`
                }
            },
            smallMediaData = {},
            mediumMediaData = {},
            largeMediaData = {};

        return (
            <ApStyle scoped={props.scoped}
                     data={extend(data, props.style)}
                     smallMediaData={smallMediaData}
                     mediumMediaData={mediumMediaData}
                     largeMediaData={largeMediaData}
            >{props.children}</ApStyle>
        );
    }
});

module.exports = ApRangeStyle;