cloudhubui/dist/Slider.js

Various components to use in react projects

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styles = require("@material-ui/styles");

var _Slider = _interopRequireDefault(require("@material-ui/core/Slider"));

var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));

var _Block = _interopRequireDefault(require("./Block"));

var _ThemeContext = _interopRequireDefault(require("./theme/ThemeContext"));

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

function _extends() { _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; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function ValueLabelComponent(props) {
  var children = props.children,
      open = props.open,
      value = props.value;
  return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
    open: open,
    enterTouchDelay: 0,
    placement: "top",
    title: value
  }, children);
}

ValueLabelComponent.propTypes = {
  children: _propTypes.default.element.isRequired,
  open: _propTypes.default.bool.isRequired,
  value: _propTypes.default.number.isRequired
};

var CustomizedSlider = function CustomizedSlider(_ref) {
  var secondary = _ref.secondary,
      color = _ref.color,
      ios = _ref.ios,
      pretto = _ref.pretto,
      airbnb = _ref.airbnb,
      Min = _ref.Min,
      Max = _ref.Max,
      marks = _ref.marks,
      value = _ref.value,
      input = _ref.input,
      onChange = _ref.onChange,
      title = _ref.title,
      valueLabelDisplay = _ref.valueLabelDisplay,
      defaultValue = _ref.defaultValue,
      ThumbComponent = _ref.ThumbComponent,
      ValueLabelComponent = _ref.ValueLabelComponent,
      name = _ref.name,
      onChangeCommitted = _ref.onChangeCommitted,
      minHeight = _ref.minHeight,
      dense = _ref.dense,
      hideThumb = _ref.hideThumb,
      props = _objectWithoutProperties(_ref, ["secondary", "color", "ios", "pretto", "airbnb", "Min", "Max", "marks", "value", "input", "onChange", "title", "valueLabelDisplay", "defaultValue", "ThumbComponent", "ValueLabelComponent", "name", "onChangeCommitted", "minHeight", "dense", "hideThumb"]);

  var _React$useContext = _react.default.useContext(_ThemeContext.default),
      sizes = _React$useContext.sizes;

  var iOSBoxShadow = '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)';
  var IOSSlider = (0, _styles.withStyles)(function () {
    return {
      root: {
        color: color || '#3880ff',
        height: 2,
        padding: '15px 0'
      },
      thumb: {
        height: 28,
        width: 28,
        backgroundColor: '#fff',
        boxShadow: iOSBoxShadow,
        marginTop: -14,
        marginLeft: -14,
        '&:focus, &:hover, &$active': {
          boxShadow: '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)',
          // Reset on touch devices, it doesn't add specificity
          '@media (hover: none)': {
            boxShadow: iOSBoxShadow
          }
        }
      },
      active: {},
      valueLabel: {
        left: 'calc(-50% + 11px)',
        top: -22,
        '& *': {
          background: 'transparent',
          color: '#000'
        }
      },
      track: {
        height: 2
      },
      rail: {
        height: 2,
        opacity: 0.5,
        backgroundColor: '#bfbfbf'
      },
      mark: {
        backgroundColor: '#bfbfbf',
        height: 8,
        width: 1,
        marginTop: -3
      },
      markActive: {
        opacity: 1,
        backgroundColor: 'currentColor'
      }
    };
  })(_Slider.default);
  var PrettoSlider = (0, _styles.withStyles)(function () {
    return {
      root: {
        color: color || '#52af77',
        height: 8
      },
      thumb: {
        height: hideThumb ? 0 : 24,
        width: hideThumb ? 0 : 24,
        backgroundColor: '#fff',
        border: hideThumb ? '' : '2px solid currentColor',
        marginTop: hideThumb ? 0 : -8,
        marginLeft: hideThumb ? 0 : -12,
        '&:focus, &:hover, &$active': {
          boxShadow: 'inherit'
        }
      },
      active: {},
      valueLabel: {
        left: 'calc(-50% + 4px)'
      },
      track: {
        height: 8,
        borderRadius: 4
      },
      rail: {
        height: 8,
        borderRadius: 4
      }
    };
  })(_Slider.default);
  var AirbnbSlider = (0, _styles.withStyles)(function () {
    return {
      root: {
        color: color || '#3a8589',
        height: 3,
        padding: '13px 0'
      },
      thumb: {
        height: 27,
        width: 27,
        backgroundColor: '#fff',
        border: '1px solid currentColor',
        marginTop: -12,
        marginLeft: -13,
        boxShadow: '#ebebeb 0px 2px 2px',
        '&:focus, &:hover, &$active': {
          boxShadow: '#ccc 0px 2px 3px 1px'
        },
        '& .bar': {
          // display: inline-block !important;
          height: 9,
          width: 1,
          backgroundColor: 'currentColor',
          marginLeft: 1,
          marginRight: 1
        }
      },
      active: {},
      valueLabel: {
        left: 'calc(-50% + 4px)'
      },
      track: {
        height: 3
      },
      rail: {
        color: '#d8d8d8',
        opacity: 1,
        height: 3
      }
    };
  })(_Slider.default);

  function AirbnbThumbComponent(props) {
    return /*#__PURE__*/_react.default.createElement("span", props, /*#__PURE__*/_react.default.createElement("span", {
      className: "bar"
    }), /*#__PURE__*/_react.default.createElement("span", {
      className: "bar"
    }), /*#__PURE__*/_react.default.createElement("span", {
      className: "bar"
    }));
  }

  var changeValue = function changeValue(event, val) {
    if (input && typeof input.onChange === 'function') {
      input.onChange(val);
    }

    if (typeof onChange === 'function') {
      onChange(val);
    }
  };

  return /*#__PURE__*/_react.default.createElement(_Block.default, {
    middle: true,
    style: {
      width: '100%',
      paddingTop: dense ? 0 : sizes.padding,
      zIndex: 0,
      minHeight: dense ? 'auto' : 100
    }
  }, /*#__PURE__*/_react.default.createElement(_Block.default, null, title), /*#__PURE__*/_react.default.createElement(_Block.default, {
    style: {
      marginTop: dense ? 0 : sizes.doubleBaseMargin * 2
    }
  }, ios && /*#__PURE__*/_react.default.createElement(IOSSlider, _extends({
    name: input ? input.name : name,
    color: secondary ? 'secondary' : 'primary',
    defaultValue: defaultValue || (input ? input.value : value),
    min: Min || 0,
    max: Max || 100,
    marks: marks,
    value: value,
    valueLabelDisplay: valueLabelDisplay || 'auto',
    onChange: changeValue,
    onChangeCommitted: onChangeCommitted
  }, props)), pretto && /*#__PURE__*/_react.default.createElement(PrettoSlider, _extends({
    name: input ? input.name : name,
    color: secondary ? 'secondary' : 'primary',
    min: Min || 0,
    max: Max || 100,
    defaultValue: defaultValue || (input ? input.value : value),
    marks: marks,
    value: value,
    valueLabelDisplay: valueLabelDisplay || 'auto',
    onChange: changeValue,
    onChangeCommitted: onChangeCommitted
  }, props)), airbnb && /*#__PURE__*/_react.default.createElement(AirbnbSlider, _extends({
    name: input ? input.name : name,
    color: secondary ? 'secondary' : 'primary',
    ThumbComponent: AirbnbThumbComponent,
    defaultValue: defaultValue || (input ? input.value : value),
    min: Min || 0,
    max: Max || 100,
    marks: marks,
    value: value,
    valueLabelDisplay: valueLabelDisplay || 'auto',
    onChange: changeValue,
    onChangeCommitted: onChangeCommitted
  }, props)), !airbnb && !pretto && !ios && /*#__PURE__*/_react.default.createElement(_Slider.default, _extends({
    name: input ? input.name : name,
    color: secondary ? 'secondary' : 'primary',
    min: Min || 0,
    max: Max || 100,
    marks: marks,
    defaultValue: defaultValue || (input ? input.value : value),
    value: input ? input.value : value,
    valueLabelDisplay: valueLabelDisplay || 'auto',
    onChange: changeValue,
    onChangeCommitted: onChangeCommitted
  }, props))));
};

_Slider.default.defaultProps = {
  onChange: function onChange() {},
  input: {
    value: null,
    onChange: function onChange() {}
  },
  onChangeCommitted: function onChangeCommitted() {}
};
var _default = CustomizedSlider;
exports.default = _default;