2023-09-18 08:45:09 +00:00
|
|
|
import styled, { css } from "styled-components";
|
2021-02-03 11:43:38 +00:00
|
|
|
import commonInputStyles from "./common-input-styles";
|
2021-03-03 11:57:14 +00:00
|
|
|
import Input from "./input";
|
2021-02-25 21:19:45 +00:00
|
|
|
import Base from "../themes/base";
|
2023-10-08 04:48:46 +00:00
|
|
|
|
2021-08-30 12:59:17 +00:00
|
|
|
import NoUserSelect from "../utils/commonStyles";
|
2021-02-03 11:43:38 +00:00
|
|
|
/* eslint-enable react/prop-types, no-unused-vars */
|
|
|
|
const StyledTextInput = styled(Input).attrs((props) => ({
|
|
|
|
id: props.id,
|
2023-08-29 11:49:35 +00:00
|
|
|
forwardedRef: props.forwardedRef,
|
2021-02-03 11:43:38 +00:00
|
|
|
name: props.name,
|
|
|
|
type: props.type,
|
|
|
|
value: props.value,
|
|
|
|
placeholder: props.placeholder,
|
|
|
|
maxLength: props.maxLength,
|
|
|
|
onChange: props.onChange,
|
|
|
|
onBlur: props.onBlur,
|
|
|
|
onFocus: props.onFocus,
|
|
|
|
readOnly: props.isReadOnly,
|
|
|
|
autoFocus: props.isAutoFocussed,
|
|
|
|
autoComplete: props.autoComplete,
|
|
|
|
tabIndex: props.tabIndex,
|
|
|
|
disabled: props.isDisabled ? "disabled" : "",
|
|
|
|
}))`
|
|
|
|
${commonInputStyles}
|
|
|
|
-webkit-appearance: ${(props) => props.theme.textInput.appearance};
|
2023-08-28 14:20:45 +00:00
|
|
|
|
2023-11-13 12:38:57 +00:00
|
|
|
background-color:
|
|
|
|
${(props) => props.isDisabled ?
|
|
|
|
props.theme.input.disableBackgroundColor
|
|
|
|
: props.theme.input.backgroundColor};
|
|
|
|
-webkit-text-fill-color: ${(props) => props.isDisabled ? props.theme.input.disableColor :
|
2023-11-09 07:24:19 +00:00
|
|
|
props?.value?.length > 0
|
2023-09-18 08:45:09 +00:00
|
|
|
? props.theme.text.color
|
|
|
|
: props.theme.textInput.placeholderColor} !important;
|
2023-11-13 12:38:57 +00:00
|
|
|
caret-color: ${(props) => props.isDisabled ? props.theme.input.disableColor : props.theme.text.color};
|
|
|
|
-webkit-background-clip: text !important;
|
|
|
|
box-shadow: inset 0 0 20px 20px
|
|
|
|
${(props) => props.isDisabled ?
|
|
|
|
props.theme.input.disableBackgroundColor
|
|
|
|
: props.theme.input.backgroundColor} !important;
|
2023-08-28 14:20:45 +00:00
|
|
|
|
2021-02-03 11:43:38 +00:00
|
|
|
display: ${(props) => props.theme.textInput.display};
|
|
|
|
font-family: ${(props) => props.theme.fontFamily};
|
|
|
|
line-height: ${(props) =>
|
|
|
|
(props.size === "base" && props.theme.textInput.lineHeight.base) ||
|
|
|
|
(props.size === "middle" && props.theme.textInput.lineHeight.middle) ||
|
|
|
|
(props.size === "big" && props.theme.textInput.lineHeight.big) ||
|
|
|
|
(props.size === "huge" && props.theme.textInput.lineHeight.huge) ||
|
|
|
|
(props.size === "large" && props.theme.textInput.lineHeight.large)};
|
|
|
|
font-size: ${(props) =>
|
2023-11-09 16:43:16 +00:00
|
|
|
props.theme.getCorrectFontSize(
|
|
|
|
(props.size === "base" && props.theme.textInput.fontSize.base) ||
|
|
|
|
(props.size === "middle" && props.theme.textInput.fontSize.middle) ||
|
|
|
|
(props.size === "big" && props.theme.textInput.fontSize.big) ||
|
|
|
|
(props.size === "huge" && props.theme.textInput.fontSize.huge) ||
|
|
|
|
(props.size === "large" && props.theme.textInput.fontSize.large)
|
|
|
|
)};
|
2021-02-03 11:43:38 +00:00
|
|
|
|
|
|
|
font-weight: ${(props) =>
|
|
|
|
props.fontWeight
|
|
|
|
? props.fontWeight
|
|
|
|
: props.isBold
|
|
|
|
? 600
|
|
|
|
: props.theme.textInput.fontWeight};
|
|
|
|
|
|
|
|
flex: ${(props) => props.theme.textInput.flex};
|
|
|
|
outline: ${(props) => props.theme.textInput.outline};
|
|
|
|
overflow: ${(props) => props.theme.textInput.overflow};
|
|
|
|
opacity: ${(props) => props.theme.textInput.opacity};
|
|
|
|
|
|
|
|
width: ${(props) =>
|
|
|
|
(props.scale && "100%") ||
|
|
|
|
(props.size === "base" && props.theme.input.width.base) ||
|
|
|
|
(props.size === "middle" && props.theme.input.width.middle) ||
|
|
|
|
(props.size === "big" && props.theme.input.width.big) ||
|
|
|
|
(props.size === "huge" && props.theme.input.width.huge) ||
|
|
|
|
(props.size === "large" && props.theme.input.width.large)};
|
|
|
|
padding: ${(props) =>
|
|
|
|
(props.size === "base" && props.theme.textInput.padding.base) ||
|
|
|
|
(props.size === "middle" && props.theme.textInput.padding.middle) ||
|
|
|
|
(props.size === "big" && props.theme.textInput.padding.big) ||
|
|
|
|
(props.size === "huge" && props.theme.textInput.padding.huge) ||
|
|
|
|
(props.size === "large" && props.theme.textInput.padding.large)};
|
|
|
|
|
|
|
|
transition: ${(props) => props.theme.textInput.transition};
|
|
|
|
|
|
|
|
::-webkit-input-placeholder {
|
2021-12-12 12:32:32 +00:00
|
|
|
color: ${(props) =>
|
|
|
|
props.isDisabled
|
|
|
|
? props.theme.textInput.disablePlaceholderColor
|
|
|
|
: props.theme.textInput.placeholderColor};
|
2021-02-03 11:43:38 +00:00
|
|
|
font-family: ${(props) => props.theme.fontFamily};
|
2021-08-30 12:59:17 +00:00
|
|
|
${NoUserSelect}
|
2021-02-03 11:43:38 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
:-moz-placeholder {
|
2021-12-12 12:32:32 +00:00
|
|
|
color: ${(props) =>
|
|
|
|
props.isDisabled
|
|
|
|
? props.theme.textInput.disablePlaceholderColor
|
|
|
|
: props.theme.textInput.placeholderColor};
|
2021-02-03 11:43:38 +00:00
|
|
|
font-family: ${(props) => props.theme.fontFamily};
|
2021-08-30 12:59:17 +00:00
|
|
|
${NoUserSelect}
|
2021-02-03 11:43:38 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
::-moz-placeholder {
|
2021-12-12 12:32:32 +00:00
|
|
|
color: ${(props) =>
|
|
|
|
props.isDisabled
|
|
|
|
? props.theme.textInput.disablePlaceholderColor
|
|
|
|
: props.theme.textInput.placeholderColor};
|
2021-02-03 11:43:38 +00:00
|
|
|
font-family: ${(props) => props.theme.fontFamily};
|
2021-08-30 12:59:17 +00:00
|
|
|
${NoUserSelect}
|
2021-02-03 11:43:38 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
:-ms-input-placeholder {
|
2021-12-12 12:32:32 +00:00
|
|
|
color: ${(props) =>
|
|
|
|
props.isDisabled
|
|
|
|
? props.theme.textInput.disablePlaceholderColor
|
|
|
|
: props.theme.textInput.placeholderColor};
|
2021-02-03 11:43:38 +00:00
|
|
|
font-family: ${(props) => props.theme.fontFamily};
|
2021-08-30 12:59:17 +00:00
|
|
|
${NoUserSelect}
|
2021-02-03 11:43:38 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
::placeholder {
|
2021-12-12 12:32:32 +00:00
|
|
|
color: ${(props) =>
|
|
|
|
props.isDisabled
|
|
|
|
? props.theme.textInput.disablePlaceholderColor
|
|
|
|
: props.theme.textInput.placeholderColor};
|
2021-02-03 11:43:38 +00:00
|
|
|
font-family: ${(props) => props.theme.fontFamily};
|
2021-08-30 12:59:17 +00:00
|
|
|
${NoUserSelect}
|
2021-02-03 11:43:38 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
${(props) => !props.withBorder && `border: none;`}
|
|
|
|
`;
|
|
|
|
|
|
|
|
StyledTextInput.defaultProps = { theme: Base };
|
|
|
|
|
|
|
|
export default StyledTextInput;
|