@parkassist/pa-ui-library/dist/components/Input/index.js

INX Platform elements

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { Row, Column } from "../Layout/Flex";
import Palette from "../../constants/Palette";
import Theme from "../../constants/Theme";
import Font from "../../constants/Font";
import Measures from "../../constants/Measures";
import FontStyles from "../../constants/FontStyles";
const StyledTextArea = styled.textarea`
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid ${Palette.DIM_GREY};
  width: 100%;
  font: ${FontStyles.BODY1_FONT};
  background-color: ${Palette.WHITE};
  color: ${Theme.FORECOLOR};
  padding: calc(${Measures.unit} / 2);
  min-height: calc(${Measures.unit} * 2);
  padding-left: ${props => props.icon ? `calc(${Measures.unit} * 2)` : Measures.unit};
  outline: none;

`;
export const FormLabel = styled.div`
  font: ${FontStyles.LABEL_FONT};
  min-height: ${Measures.unit};
  height: ${Measures.unit};
`;
const FormInputWrapper = styled(Column)(props => ({
  flex: 1,
  maxWidth: props.width,
  width: props.width,
  minHeight: Measures.rowHeight,
  font: FontStyles.BODY2_FONT
}));
export const FormInputLink = styled.div(() => Object.assign(Object.assign({
  border: "none",
  paddingTop: 10,
  marginTop: -3,
  marginLeft: -20
}, Font), {
  letterSpacing: 0,
  color: Palette.ERROR_RED,
  maxHeight: 23,
  cursor: "pointer",
  borderBottom: `1px solid ${Palette.INFO_BLUE}`
}));
const StyledRightColumn = styled(Column)(() => ({
  width: "100%"
}));
const StyledLeftColumn = styled(Column)(() => Object.assign({
  marginLeft: -25,
  textAlign: "right"
}, Font));
const IconWrapper = styled.i(() => ({
  marginTop: 7,
  marginLeft: 10,
  color: "grey",
  position: "absolute"
}));
const StyledInputTemplate = styled.input`
  box-sizing: border-box;
  border-radius: 4px;
  border: ${({
  dark
}) => dark ? 'none' : `1px solid ${Palette.DARK_GREY}`};
  width: 100%;
  background-color: ${({
  dark
}) => dark ? Palette.LIGHT_BLACK : Palette.WHITE};
  color: ${({
  dark
}) => dark ? Palette.WHITE : Palette.BLACK};
  font: ${FontStyles.INPUT_FONT};
  min-height: calc(${Measures.unit} * 2);
  height: calc(${Measures.unit} * 2);
  padding: calc(${Measures.unit} / 2) ${Measures.unit};
  outline: none;
  
  &:hover, &:focus {
    border-color: ${({
  dark
}) => dark ? 'none' : Palette.BLACK};
  }
`;
const StyledInput = styled(StyledInputTemplate)`
  padding-right: ${props => props.iconComponent ? `calc(${Measures.unit} + 20px)` : `calc(${Measures.unit})`};
`;
const StyledInputLeft = styled(StyledInputTemplate)`
  padding-left: ${props => props.iconComponent ? `calc(${Measures.unit} / 2 + 20px)` : `${Measures.unit}`};
`;
const IconComponentTemplate = styled.div`
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  height: 32px;
  color: ${p => p.value && p.value.length > 0 ? Palette.BLACK : Palette.DIM_GREY};
`;
const IconComponentWrapper = styled(IconComponentTemplate)`
  margin-left: -32px;
`;
const IconComponentWrapperLeft = styled(IconComponentTemplate)`
  margin-right: -32px;
`;
export const Link = styled.a(() => ({
  textDecoration: "none",
  color: Palette.ERROR_RED
}));
const Input = props => {
  const input = _jsx(StyledInput, Object.assign({}, props));
  const inputLeft = _jsx(StyledInputLeft, Object.assign({}, props));
  const textArea = _jsx(StyledTextArea, Object.assign({}, props, {
    children: props.value
  }));
  return _jsxs(FormInputWrapper, {
    className: `pa-input ${props.className}`,
    width: props.width,
    children: [props.label && _jsx(Row, {
      className: "pa-input__label",
      children: _jsx(FormLabel, {
        style: props.labelStyle,
        children: props.label
      })
    }), _jsx(Row, {
      style: {
        width: "100"
      },
      children: props.link ? _jsxs(_Fragment, {
        children: [_jsx(StyledRightColumn, {
          children: _jsx(StyledInput, Object.assign({}, props, {
            placeholder: props.placeholder
          }))
        }), _jsx(StyledLeftColumn, {
          children: _jsx(Link, {
            children: props.link
          })
        })]
      }) : _jsx(_Fragment, {
        children: props.iconRight ? _jsxs(_Fragment, {
          children: [props.multiline ? textArea : input, props.icon && _jsx(IconWrapper, {
            className: props.icon
          }), props.iconComponent && _jsx(IconComponentWrapper, {
            value: props.value,
            children: props.iconComponent
          })]
        }) : _jsxs(_Fragment, {
          children: [props.icon && _jsx(IconWrapper, {
            className: props.icon
          }), props.iconComponent && _jsx(IconComponentWrapperLeft, {
            value: props.value,
            children: props.iconComponent
          }), props.multiline ? textArea : inputLeft]
        })
      })
    })]
  });
};
export default Input;