jobiqo-cl/lib/src/components/02-atoms/01-forms/05-select/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var index = require('../11-form-item/index.js');

/**
 * @file index.tsx
 *
 * @fileoverview Renders a normal select.
 */
const StyledSelect = styled__default.select `
  outline: 0;
  appearance: none;
  font-size: ${props => props.theme.select.fontSize};
  margin: ${props => props.theme.select.margin};
  padding: ${props => props.theme.select.normal.padding};
  height: ${props => props.theme.select.normal.height};
  border-radius: ${props => props.theme.select.borderRadius};
  border-width: ${props => props.theme.select.borderWidth};
  border-top-width: ${props => props.theme.select.borderTopWidth};
  border-left-width: ${props => props.theme.select.borderLeftWidth};
  border-right-width: ${props => props.theme.select.borderRightWidth};
  border-bottom-width: ${props => props.theme.select.borderBottomWidth};
  border-style: ${props => props.theme.select.borderStyle};
  border-color: ${props => props.error ? props.theme.colors.danger : props.theme.select.borderColor};
  background: ${props => props.theme.select.background};
  &:focus,
  &:focus-within,
  &:active {
    outline: 0;
    border-color: ${props => props.theme.colors.focusRingColor};
    box-shadow: ${props => props.theme.select.focus.boxShadowType},
      ${props => `${props.theme.select.focus.boxShadowVals} ${props.theme.colors.focusRingColor}`};
  }
`;
const ArrowIcon = () => {
    return (React__default.createElement("svg", { viewBox: "0 0 20 20", preserveAspectRatio: "none", width: 16, fill: "transparent", stroke: "#979797", strokeWidth: "1.1px" },
        React__default.createElement("path", { d: "M1,6 L10,15 L19,6" })));
};
const Relative = styled__default.div `
  position: relative;

  svg {
    position: absolute;
    pointer-events: none;
    right: 1rem;
    top: 30%;
  }
`;
/**
 * Filters for the id that was selected.
 *
 * @param {SelectItem} items
 *   The whole value list.
 * @param {string} value
 *   The code that was passed as default value
 *
 * @return {string}
 *   The value the pass to the input as default value.
 */
const getDefaultValue = (items, value) => {
    const filteredItem = items.filter(i => i.code === value);
    if (filteredItem.length > 0) {
        return filteredItem[0].name;
    }
    return null;
};
const Select = ({ id, items = [], label, error = false, required = false, onChange, onBlur, selectedValue }) => {
    const defaultValue = getDefaultValue(items, selectedValue);
    return (React__default.createElement(index.FormItem, null,
        label && (React__default.createElement(index.FormLabel, { error: error, required: required, htmlFor: id }, label)),
        React__default.createElement(Relative, { className: "jobiqo-select__wrapper" },
            React__default.createElement(StyledSelect, Object.assign({ id: id, required: required, error: error, onChange: e => {
                    onChange(items.filter(item => item.name === e.target.value)[0]);
                }, onBlur: onBlur }, (defaultValue ? { value: defaultValue } : null)), items.map(item => {
                return React__default.createElement("option", { key: item.code }, item.name);
            })),
            React__default.createElement(ArrowIcon, null))));
};

exports.Select = Select;