baseui/input/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getRootStyles = exports.getInputStyles = exports.getInputContainerStyles = exports.StyledMaskToggleButton = exports.StyledClearIconContainer = exports.StyledClearIcon = exports.Root = exports.InputEnhancer = exports.InputContainer = exports.Input = void 0;
var _styles = require("../styles");
var _constants = require("./constants");
var _deleteAlt = _interopRequireDefault(require("../icon/delete-alt"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/*
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.
*/

const StyledMaskToggleButton = exports.StyledMaskToggleButton = (0, _styles.styled)('button', ({
  $theme,
  $size,
  $isFocusVisible
}) => {
  const pad = {
    [_constants.SIZE.mini]: $theme.sizing.scale400,
    [_constants.SIZE.compact]: $theme.sizing.scale400,
    [_constants.SIZE.default]: $theme.sizing.scale300,
    [_constants.SIZE.large]: $theme.sizing.scale200
  }[$size];
  return {
    display: 'flex',
    alignItems: 'center',
    borderTopStyle: 'none',
    borderBottomStyle: 'none',
    borderLeftStyle: 'none',
    borderRightStyle: 'none',
    background: 'none',
    paddingLeft: pad,
    paddingRight: pad,
    outline: $isFocusVisible ? `solid 3px ${$theme.colors.borderAccent}` : 'none',
    color: $theme.colors.contentPrimary
  };
});
StyledMaskToggleButton.displayName = "StyledMaskToggleButton";
StyledMaskToggleButton.displayName = 'StyledMaskToggleButton';
const StyledClearIconContainer = exports.StyledClearIconContainer = (0, _styles.styled)('div', ({
  $alignTop = false,
  $size,
  $theme
}) => {
  const pad = {
    [_constants.SIZE.mini]: $theme.sizing.scale200,
    [_constants.SIZE.compact]: $theme.sizing.scale200,
    [_constants.SIZE.default]: $theme.sizing.scale100,
    [_constants.SIZE.large]: $theme.sizing.scale0
  }[$size];
  return {
    display: 'flex',
    alignItems: $alignTop ? 'flex-start' : 'center',
    paddingLeft: pad,
    paddingRight: pad,
    paddingTop: $alignTop ? $theme.sizing.scale500 : '0px',
    color: $theme.colors.contentPrimary
  };
});
StyledClearIconContainer.displayName = "StyledClearIconContainer";
StyledClearIconContainer.displayName = 'StyledClearIconContainer';
const StyledClearIcon = exports.StyledClearIcon = (0, _styles.styled)(_deleteAlt.default, ({
  $theme,
  $isFocusVisible
}) => ({
  cursor: 'pointer',
  outline: $isFocusVisible ? `solid 3px ${$theme.colors.borderAccent}` : 'none'
}));
StyledClearIcon.displayName = "StyledClearIcon";
StyledClearIcon.displayName = 'StyledClearIcon';
function getInputPadding(
// @ts-ignore
size,
// @ts-ignore
sizing) {
  // @ts-ignore
  return {
    [_constants.SIZE.mini]: {
      paddingTop: sizing.scale100,
      paddingBottom: sizing.scale100,
      paddingLeft: sizing.scale550,
      paddingRight: sizing.scale550
    },
    [_constants.SIZE.compact]: {
      paddingTop: sizing.scale200,
      paddingBottom: sizing.scale200,
      paddingLeft: sizing.scale550,
      paddingRight: sizing.scale550
    },
    [_constants.SIZE.default]: {
      paddingTop: sizing.scale400,
      paddingBottom: sizing.scale400,
      paddingLeft: sizing.scale550,
      paddingRight: sizing.scale550
    },
    [_constants.SIZE.large]: {
      paddingTop: sizing.scale550,
      paddingBottom: sizing.scale550,
      paddingLeft: sizing.scale550,
      paddingRight: sizing.scale550
    }
  }[size];
}
function getRootPadding(
// @ts-ignore
adjoined,
// @ts-ignore
size,
// @ts-ignore
sizing,
// @ts-ignore
direction,
// @ts-ignore
hasIconTrailing) {
  let ifLeftPad = adjoined === _constants.ADJOINED.both || adjoined === _constants.ADJOINED.left && direction !== 'rtl' || adjoined === _constants.ADJOINED.right && direction === 'rtl' || hasIconTrailing && direction === 'rtl';
  let ifRightPad = adjoined === _constants.ADJOINED.both || adjoined === _constants.ADJOINED.right && direction !== 'rtl' || adjoined === _constants.ADJOINED.left && direction === 'rtl' || hasIconTrailing && direction !== 'rtl';
  return {
    paddingLeft: ifLeftPad ? sizing.scale550 : '0px',
    paddingRight: ifRightPad ? sizing.scale550 : '0px'
  };
}

// @ts-ignore
function getFont(size, typography) {
  // @ts-ignore
  return {
    [_constants.SIZE.mini]: typography.font100,
    [_constants.SIZE.compact]: typography.font200,
    [_constants.SIZE.default]: typography.font300,
    [_constants.SIZE.large]: typography.font400
  }[size];
}
function getRootColors(
// @ts-ignore
$disabled,
// @ts-ignore
$isFocused,
// @ts-ignore
$error, $positive = false,
// @ts-ignore
colors) {
  if ($disabled) {
    return {
      borderLeftColor: colors.inputFillDisabled,
      borderRightColor: colors.inputFillDisabled,
      borderTopColor: colors.inputFillDisabled,
      borderBottomColor: colors.inputFillDisabled,
      backgroundColor: colors.inputFillDisabled
    };
  }
  if ($isFocused) {
    return {
      borderLeftColor: colors.borderSelected,
      borderRightColor: colors.borderSelected,
      borderTopColor: colors.borderSelected,
      borderBottomColor: colors.borderSelected,
      backgroundColor: colors.inputFillActive
    };
  }
  if ($error) {
    return {
      borderLeftColor: colors.inputBorderError,
      borderRightColor: colors.inputBorderError,
      borderTopColor: colors.inputBorderError,
      borderBottomColor: colors.inputBorderError,
      backgroundColor: colors.inputFillError
    };
  }
  if ($positive) {
    return {
      borderLeftColor: colors.inputBorderPositive,
      borderRightColor: colors.inputBorderPositive,
      borderTopColor: colors.inputBorderPositive,
      borderBottomColor: colors.inputBorderPositive,
      backgroundColor: colors.inputFillPositive
    };
  }
  return {
    borderLeftColor: colors.inputBorder,
    borderRightColor: colors.inputBorder,
    borderTopColor: colors.inputBorder,
    borderBottomColor: colors.inputBorder,
    backgroundColor: colors.inputFill
  };
}
function getRootBorderRadius(
// @ts-ignore
size,
// @ts-ignore
borders) {
  let radius = borders.inputBorderRadius;
  if (size === _constants.SIZE.mini) {
    radius = borders.inputBorderRadiusMini;
  }
  return {
    borderTopLeftRadius: radius,
    borderBottomLeftRadius: radius,
    borderTopRightRadius: radius,
    borderBottomRightRadius: radius
  };
}
const getRootStyles = props => {
  const {
    $isFocused,
    $adjoined,
    $error,
    $disabled,
    $positive,
    $size,
    $theme,
    $theme: {
      borders,
      colors,
      sizing,
      typography,
      animation
    },
    $hasIconTrailing
  } = props;
  return {
    boxSizing: 'border-box',
    display: 'flex',
    overflow: 'hidden',
    width: '100%',
    borderLeftWidth: '2px',
    borderRightWidth: '2px',
    borderTopWidth: '2px',
    borderBottomWidth: '2px',
    borderLeftStyle: 'solid',
    borderRightStyle: 'solid',
    borderTopStyle: 'solid',
    borderBottomStyle: 'solid',
    transitionProperty: 'border',
    transitionDuration: animation.timing200,
    transitionTimingFunction: animation.easeOutCurve,
    ...getRootBorderRadius($size, borders),
    ...getFont($size, typography),
    ...getRootColors($disabled, $isFocused, $error, $positive, colors),
    ...getRootPadding($adjoined, $size, sizing, $theme.direction, $hasIconTrailing)
  };
};
exports.getRootStyles = getRootStyles;
const Root = exports.Root = (0, _styles.styled)('div', getRootStyles);
Root.displayName = "Root";
Root.displayName = 'Root';

// InputEnhancer

// @ts-ignore
function getInputEnhancerPadding($size, sizing) {
  // @ts-ignore
  return {
    [_constants.SIZE.mini]: {
      paddingRight: sizing.scale400,
      paddingLeft: sizing.scale400
    },
    [_constants.SIZE.compact]: {
      paddingRight: sizing.scale400,
      paddingLeft: sizing.scale400
    },
    [_constants.SIZE.default]: {
      paddingRight: sizing.scale300,
      paddingLeft: sizing.scale300
    },
    [_constants.SIZE.large]: {
      paddingRight: sizing.scale200,
      paddingLeft: sizing.scale200
    }
  }[$size];
}

// @ts-ignore
function getInputEnhancerColors($disabled, $isFocused, $error, $positive, colors) {
  if ($disabled) {
    return {
      color: colors.inputEnhancerTextDisabled,
      backgroundColor: colors.inputFillDisabled
    };
  }
  if ($isFocused) {
    return {
      color: colors.contentPrimary,
      backgroundColor: colors.inputFillActive
    };
  }
  if ($error) {
    return {
      color: colors.contentPrimary,
      backgroundColor: colors.inputFillError
    };
  }
  if ($positive) {
    return {
      color: colors.contentPrimary,
      backgroundColor: colors.inputFillPositive
    };
  }
  return {
    color: colors.contentPrimary,
    backgroundColor: colors.inputFill
  };
}
const InputEnhancer = exports.InputEnhancer = (0, _styles.styled)('div', props => {
  const {
    $size,
    $disabled,
    $isFocused,
    $error,
    $positive,
    $theme: {
      colors,
      sizing,
      typography,
      animation
    }
  } = props;
  return {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    transitionProperty: 'color, background-color',
    transitionDuration: animation.timing200,
    transitionTimingFunction: animation.easeOutCurve,
    ...getFont($size, typography),
    ...getInputEnhancerPadding($size, sizing),
    ...getInputEnhancerColors($disabled, $isFocused, $error, $positive, colors)
  };
});
InputEnhancer.displayName = "InputEnhancer";
InputEnhancer.displayName = 'InputEnhancer';

// InputContainer

// @ts-ignore
function getInputContainerColors($disabled, $isFocused, $error, $positive, colors) {
  if ($disabled) {
    return {
      color: colors.inputTextDisabled,
      backgroundColor: colors.inputFillDisabled
    };
  }
  if ($isFocused) {
    return {
      color: colors.contentPrimary,
      backgroundColor: colors.inputFillActive
    };
  }
  if ($error) {
    return {
      color: colors.contentPrimary,
      backgroundColor: colors.inputFillError
    };
  }
  if ($positive) {
    return {
      color: colors.contentPrimary,
      backgroundColor: colors.inputFillPositive
    };
  }
  return {
    color: colors.contentPrimary,
    backgroundColor: colors.inputFill
  };
}
const getInputContainerStyles = props => {
  const {
    $isFocused,
    $error,
    $disabled,
    $positive,
    $size,
    $theme: {
      colors,
      typography,
      animation
    }
  } = props;
  return {
    display: 'flex',
    width: '100%',
    transitionProperty: 'background-color',
    transitionDuration: animation.timing200,
    transitionTimingFunction: animation.easeOutCurve,
    ...getFont($size, typography),
    ...getInputContainerColors($disabled, $isFocused, $error, $positive, colors)
  };
};
exports.getInputContainerStyles = getInputContainerStyles;
const InputContainer = exports.InputContainer = (0, _styles.styled)('div', getInputContainerStyles);
InputContainer.displayName = "InputContainer";
InputContainer.displayName = 'InputContainer';

// @ts-ignore
function getInputColors($disabled, $isFocused, $error, colors) {
  if ($disabled) {
    return {
      color: colors.inputTextDisabled,
      '-webkit-text-fill-color': colors.inputTextDisabled,
      caretColor: colors.contentPrimary,
      '::placeholder': {
        color: colors.inputPlaceholderDisabled
      }
    };
  }
  return {
    color: colors.contentPrimary,
    caretColor: colors.contentPrimary,
    '::placeholder': {
      color: colors.inputPlaceholder
    }
  };
}
const getInputStyles = props => {
  const {
    $disabled,
    $isFocused,
    $error,
    $size,
    $theme: {
      colors,
      sizing,
      typography
    }
  } = props;
  return {
    boxSizing: 'border-box',
    backgroundColor: 'transparent',
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderTopWidth: 0,
    borderBottomWidth: 0,
    borderLeftStyle: 'none',
    borderRightStyle: 'none',
    borderTopStyle: 'none',
    borderBottomStyle: 'none',
    outline: 'none',
    width: '100%',
    // See https://stackoverflow.com/a/33811151
    minWidth: 0,
    maxWidth: '100%',
    cursor: $disabled ? 'not-allowed' : 'text',
    margin: '0',
    // @ts-ignore
    paddingTop: '0',
    // @ts-ignore
    paddingBottom: '0',
    // @ts-ignore
    paddingLeft: '0',
    // @ts-ignore
    paddingRight: '0',
    ...getFont($size, typography),
    ...getInputPadding($size, sizing),
    ...getInputColors($disabled, $isFocused, $error, colors)
  };
};
exports.getInputStyles = getInputStyles;
const Input = exports.Input = (0, _styles.styled)('input', getInputStyles);
Input.displayName = "Input";
Input.displayName = 'Input';