react-cm-ui/core/surfaces/rail/rail.js

React UI for Healthy Church

"use strict";

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

var _classnames = _interopRequireDefault(require("classnames"));

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

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

var _makeStyles = _interopRequireDefault(require("../../styles/makeStyles"));

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var propTypes = {
  children: _propTypes["default"].node,
  classes: _propTypes["default"].shape({
    root: _propTypes["default"].string,
    positionLeft: _propTypes["default"].string,
    positionRight: _propTypes["default"].string
  }),
  className: _propTypes["default"].string,
  position: _propTypes["default"].oneOf(['left', 'right'])
};
var defaultProps = {
  children: null,
  classes: null,
  className: null,
  position: 'left'
};
var useStyles = (0, _makeStyles["default"])(function (_ref) {
  var palette = _ref.palette;
  return {
    positionLeft: {},
    positionRight: {},
    root: {
      backgroundColor: palette.background.primary,
      height: '100%',
      padding: [[33, 22]],
      width: 250,
      '&$positionLeft, &$positionRight': {
        '&::after': {
          content: '""',
          height: '100%',
          position: 'absolute',
          top: 0,
          width: 15
        }
      },
      '&$positionLeft': {
        boxShadow: "inset -1px 0 0 0 ".concat(palette.border.primary),
        left: 0,
        top: 0,
        '&::after': {
          background: 'linear-gradient(to right, rgba(0, 0, 0, .1) -100%, transparent 100%)',
          right: -15
        }
      },
      '&$positionRight': {
        boxShadow: "inset 1px 0 0 0 ".concat(palette.border.primary),
        right: 0,
        top: 0,
        '&::after': {
          background: 'linear-gradient(to left, rgba(0, 0, 0, .1) -100%, transparent 100%)',
          left: -15
        }
      }
    }
  };
}); // eslint-disable-next-line prefer-arrow-callback

var Rail = /*#__PURE__*/_react["default"].forwardRef(function Rail(props, ref) {
  var _ClassNames;

  var children = props.children,
      className = props.className,
      position = props.position;
  var classes = useStyles(props);
  var rootClasses = (0, _classnames["default"])('ui', 'rail', classes.root, className, (_ClassNames = {}, _defineProperty(_ClassNames, classes.positionLeft, position === 'left'), _defineProperty(_ClassNames, classes.positionRight, position === 'right'), _ClassNames));
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: rootClasses,
    ref: ref
  }, children);
});

Rail.propTypes = propTypes;
Rail.defaultProps = defaultProps;
var _default = Rail;
exports["default"] = _default;