@eureca/eureca-ui/src/components/Inputs/search.js

UI component library of Eureca's user and admin apps

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';

import { Box, InputAdornment, useTheme, Typography } from '@material-ui/core';

import { FiNavigation, FiSearch } from 'react-icons/fi';

import { IconContext } from 'react-icons';

import { colors } from '../../theme/colors';

import { TextInput } from './text-input';
import { Flex } from '../Flex';

const StyledInput = styled(TextInput)`
  ${({ width, radius }) => css`
    &.MuiFormControl-root {
      width: ${width}px;
    }
    & .MuiFormLabel-root {
      color: ${colors.gray3};
    }
    & .MuiOutlinedInput-notchedOutline {
      border-color: ${colors.gray5};
      border-radius: ${radius};
    }
  `}
`;

const Adornment = ({ label, icon, onClick, error }) => {
  return (
    <InputAdornment position="end">
      <Box p={1} aria-label={`search by ${label}`} onClick={onClick} style={{ cursor: 'pointer' }}>
        <IconContext.Provider value={{ color: error ? colors.error1 : colors.gray3, size: 16 }}>
          {icon}
        </IconContext.Provider>
      </Box>
    </InputAdornment>
  );
};

Adornment.propTypes = {
  label: PropTypes.string.isRequired,
  icon: PropTypes.object.isRequired,
  onClick: PropTypes.func.isRequired,
};

function SearchInput({ clickSearchLocation, clickSearchOpportunity, helperText, error }) {
  const [locationValue, setLocationValue] = useState('');
  const [opportunityValue, setOpportunityValue] = useState('');
  const theme = useTheme();

  return (
    <Flex>
      <Flex directionRow alignCenter>
        <StyledInput
          width={theme.spacing(23)}
          radius="4px 0 0 4px"
          size="small"
          value={locationValue}
          onChange={e => setLocationValue(e.target.value)}
          variant="outlined"
          label="Buscar por cidade"
          error={error}
          InputProps={{
            endAdornment: (
              <Adornment
                label="location"
                icon={<FiNavigation />}
                error={error}
                onClick={() => clickSearchLocation(locationValue)}
              />
            ),
          }}
        />
        <StyledInput
          width={theme.spacing(34)}
          size="small"
          radius="0 4px 4px 0"
          value={opportunityValue}
          onChange={e => setOpportunityValue(e.target.value)}
          variant="outlined"
          label="Buscar oportunidade ou vaga"
          error={error}
          InputProps={{
            endAdornment: (
              <Adornment
                label="opportunity"
                icon={<FiSearch />}
                error={error}
                onClick={() => clickSearchOpportunity(opportunityValue)}
              />
            ),
          }}
        />
      </Flex>
      <Box mt="3px" ml="14px">
        <Typography
          variant="body2"
          style={{
            color: error ? colors.error1 : colors.gray3,
            lineHeight: 1.66,
          }}
        >
          {helperText}
        </Typography>
      </Box>
    </Flex>
  );
}

SearchInput.propTypes = {
  clickSearchOpportunity: PropTypes.func.isRequired,
  clickSearchLocation: PropTypes.func.isRequired,
  helperText: PropTypes.string,
  error: PropTypes.bool,
};

export { SearchInput };