native-base/lib/commonjs/theme/v33x-theme/components/input.js

Essential cross-platform UI components for React Native

"use strict";

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

var _tools = require("../tools");

var _reactNative = require("react-native");

function getSelectionColor(props) {
  if (_reactNative.Platform.OS === 'ios') {
    return (0, _tools.mode)('coolGray.800', 'warmGray.50')(props);
  } else if (_reactNative.Platform.OS === 'android') {
    return (0, _tools.mode)('coolGray.800', 'warmGray.50')(props);
  }
}

const baseStyle = props => {
  // const { primary } = props.theme.colors;
  // Todo: Resolve boxShadow Color or Provide some alternatiove prop for user to change focusRing color
  // // Todo: Update to support similar focusRing on iOS , Android and Web
  // const focusRing =
  //   Platform.OS === 'web'
  //     ? {
  //         boxShadow:
  //           props.variant !== 'underlined'
  //             ? `${primary[400]} 0px 0px 0px 1px`
  //             : `${primary[400]} 0px 1px 0px 0px`,
  //         zIndex: 1,
  //       }
  //     : {
  //         // boxShadow: `${useToken('colors', ['primary.400'])} 0px 0px 0px 1px`,
  //       };
  return {
    selectionColor: getSelectionColor(props),
    fontFamily: 'body',
    p: '2',
    borderRadius: 'sm',
    overflow: 'hidden',
    color: (0, _tools.mode)('coolGray.800', 'warmGray.50')(props),
    placeholderTextColor: 'muted.400',
    borderColor: (0, _tools.mode)('muted.200', 'gray.500')(props),
    _disabled: {
      opacity: '80',
      bg: (0, _tools.mode)('muted.100', 'muted.700')(props),
      _web: {
        disabled: true,
        cursor: 'not-allowed'
      }
    },
    _invalid: {
      borderColor: (0, _tools.mode)('danger.600', 'danger.300')(props)
    },
    _focus: {
      borderColor: (0, _tools.mode)('primary.400', 'primary.500')(props)
    },
    _web: {
      outlineWidth: '0',
      overflow: 'auto',
      lineHeight: 'lg',
      // Todo: Move to _web inside size so that sm and xs don't have this much height
      outline: 'none',
      cursor: 'auto'
    },
    _stack: {
      flexDirection: 'row',
      alignItems: 'center',
      // justifyContent: 'space-between',
      overflow: 'hidden'
    },
    _input: {
      bg: 'transparent',
      flex: 1
    }
  };
};

function roundedStyle(props) {
  return {
    borderRadius: '25',
    borderWidth: '1',
    _hover: {
      bg: (0, _tools.mode)('gray.100', 'gray.700')(props)
    }
  };
}

function outlineStyle(props) {
  return {
    borderWidth: '1',
    _hover: {
      bg: (0, _tools.mode)('gray.100', 'gray.700')(props)
    }
  };
}

function filledStyle(props) {
  return {
    bg: props.bg || (0, _tools.mode)('muted.200', 'muted.600')(props),
    borderWidth: '1',
    borderColor: 'transparent',
    _hover: {
      bg: (0, _tools.mode)('muted.300', 'muted.700')(props)
    }
  };
}

function unstyledStyle() {
  return {
    borderWidth: '0'
  };
}

function underlinedStyle() {
  return {
    borderRadius: '0',
    borderTopWidth: '0',
    borderLeftWidth: '0',
    borderRightWidth: '0',
    borderBottomWidth: '1'
  };
}

const variants = {
  outline: outlineStyle,
  underlined: underlinedStyle,
  rounded: roundedStyle,
  filled: filledStyle,
  unstyled: unstyledStyle
};
const sizes = {
  '2xl': {
    fontSize: 'xl'
  },
  'xl': {
    fontSize: 'lg'
  },
  'lg': {
    fontSize: 'md'
  },
  'md': {
    fontSize: 'sm'
  },
  'sm': {
    fontSize: 'xs'
  },
  'xs': {
    fontSize: '2xs'
  }
};
const defaultProps = {
  size: 'sm',
  variant: 'outline'
}; // Input

const Input = {
  baseStyle,
  defaultProps,
  variants,
  sizes
};
exports.Input = Input;
var _default = {};
exports.default = _default;
//# sourceMappingURL=input.js.map