baseui/drawer/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledRoot = exports.StyledDrawerContainer = exports.StyledDrawerBody = exports.StyledClose = exports.StyledBackdrop = exports.Hidden = void 0;
var _styles = require("../styles");
var _constants = require("./constants");
/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

function getSizeStyles($size, $anchor) {
  const styles = {
    maxWidth: '100%',
    maxHeight: '100%',
    width: _constants.SIZE_DIMENSION.default,
    height: _constants.SIZE_DIMENSION.full
  };
  if ($anchor === _constants.ANCHOR.left || $anchor === _constants.ANCHOR.right) {
    // If the anchor is horizontal, set the width
    styles.height = _constants.SIZE_DIMENSION.full;
    // @ts-ignore
    if (_constants.SIZE[$size]) {
      // @ts-ignore
      styles.width = _constants.SIZE_DIMENSION[$size];
    } else if (typeof $size === 'string') {
      styles.width = $size;
    }
  } else {
    // If the anchor is vertical, set the height
    styles.width = _constants.SIZE_DIMENSION.full;
    // @ts-ignore
    if (_constants.SIZE[$size]) {
      // @ts-ignore
      styles.height = _constants.SIZE_DIMENSION[$size];
    } else if (typeof $size === 'string') {
      styles.height = $size;
    }
  }
  return styles;
}
function getAnchorStyles(props) {
  const {
    $anchor,
    $isVisible,
    $size
  } = props;
  const sizeStyles = getSizeStyles($size, $anchor);
  const {
    left,
    right,
    top,
    bottom
  } = _constants.ANCHOR;
  switch ($anchor) {
    case right:
      {
        return {
          transform: $isVisible ? 'translateX(0)' : 'translateX(100%)',
          right: $isVisible ? 0 : '-100%',
          top: 0,
          ...sizeStyles
        };
      }
    case left:
      {
        return {
          transform: $isVisible ? 'translateX(0)' : `translateX(-100%)`,
          left: $isVisible ? 0 : '-100%',
          top: 0,
          ...sizeStyles
        };
      }
    case bottom:
      {
        return {
          transform: $isVisible ? 'translateY(0)' : 'translateY(100%)',
          left: 0,
          bottom: $isVisible ? '0' : `-100%`,
          ...sizeStyles
        };
      }
    case top:
      {
        return {
          transform: $isVisible ? 'translateY(0)' : 'translateY(-100%)',
          left: 0,
          top: $isVisible ? '0' : '-100%',
          ...sizeStyles
        };
      }
    default:
      {
        return {};
      }
  }
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', props => {
  return {
    position: 'fixed',
    overflow: 'auto',
    right: 0,
    bottom: 0,
    top: 0,
    left: 0
  };
});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
const StyledBackdrop = exports.StyledBackdrop = (0, _styles.styled)('div', props => {
  const {
    $animating,
    $isOpen,
    $isVisible,
    $showBackdrop,
    $theme
  } = props;
  return {
    position: 'fixed',
    right: 0,
    bottom: 0,
    top: 0,
    left: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    // Remove grey highlight
    WebkitTapHighlightColor: 'transparent',
    // Disable scroll capabilities.
    touchAction: 'none',
    opacity: $isVisible && $isOpen && $showBackdrop ? 1 : 0,
    ...($animating ? {
      transitionProperty: 'opacity',
      transitionDuration: $theme.animation.timing400,
      transitionTimingFunction: $theme.animation.easeOutCurve
    } : null)
  };
});
StyledBackdrop.displayName = "StyledBackdrop";
StyledBackdrop.displayName = 'StyledBackdrop';

// @ts-ignore
const StyledDrawerContainer = exports.StyledDrawerContainer = (0, _styles.styled)('div', props => {
  const {
    $animating,
    $isOpen,
    $isVisible,
    $theme
  } = props;
  return {
    backgroundColor: $theme.colors.backgroundPrimary,
    borderTopLeftRadius: $theme.borders.surfaceBorderRadius,
    borderTopRightRadius: $theme.borders.surfaceBorderRadius,
    borderBottomRightRadius: $theme.borders.surfaceBorderRadius,
    borderBottomLeftRadius: $theme.borders.surfaceBorderRadius,
    ...getAnchorStyles(props),
    // Animation
    opacity: $isVisible && $isOpen ? 1 : 0,
    transitionProperty: $animating ? 'opacity, transform' : null,
    transitionDuration: $animating ? $theme.animation.timing400 : null,
    transitionTimingFunction: $animating ? $theme.animation.easeOutCurve : null,
    display: 'flex',
    position: 'fixed'
  };
});
StyledDrawerContainer.displayName = "StyledDrawerContainer";
StyledDrawerContainer.displayName = 'StyledDrawerContainer';
const StyledDrawerBody = exports.StyledDrawerBody = (0, _styles.styled)('div', props => {
  const {
    $theme
  } = props;
  return {
    ...$theme.typography.font200,
    color: $theme.colors.contentPrimary,
    marginTop: $theme.sizing.scale900,
    marginBottom: $theme.sizing.scale900,
    marginLeft: $theme.sizing.scale900,
    marginRight: $theme.sizing.scale900,
    overflow: 'auto',
    width: '100%'
  };
});
StyledDrawerBody.displayName = "StyledDrawerBody";
StyledDrawerBody.displayName = 'StyledDrawerBody';
const StyledClose = exports.StyledClose = (0, _styles.styled)('button', props => {
  const {
    $theme,
    $isFocusVisible
  } = props;
  const dir = $theme.direction === 'rtl' ? 'left' : 'right';
  return {
    // Reset button styles
    background: 'transparent',
    outline: 0,
    paddingLeft: 0,
    paddingTop: 0,
    paddingRight: 0,
    paddingBottom: 0,
    // colors
    fill: $theme.colors.contentPrimary,
    transitionProperty: 'fill, border-color',
    transitionDuration: $theme.animation.timing200,
    borderLeftWidth: '1px',
    borderRightWidth: '1px',
    borderTopWidth: '1px',
    borderBottomWidth: '1px',
    borderLeftStyle: 'solid',
    borderRightStyle: 'solid',
    borderTopStyle: 'solid',
    borderBottomStyle: 'solid',
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderTopColor: 'transparent',
    borderBottomColor: 'transparent',
    ':hover': {
      fill: $theme.colors.gray600
    },
    ':focus': {
      outline: $isFocusVisible ? `3px solid ${$theme.colors.borderAccent}` : 'none'
    },
    // Positioning
    position: 'absolute',
    top: $theme.sizing.scale500,
    [dir]: $theme.sizing.scale500,
    width: $theme.sizing.scale800,
    height: $theme.sizing.scale800,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    cursor: 'pointer'
  };
});
StyledClose.displayName = "StyledClose";
StyledClose.displayName = 'StyledClose';
const Hidden = exports.Hidden = (0, _styles.styled)('div', {
  display: 'none'
});
Hidden.displayName = "Hidden";
Hidden.displayName = 'Hidden';