jobiqo-cl/lib/src/components/03-molecules/01-form/03-form-items-inline/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$3 = require('../../../02-atoms/06-layout/03-flex/02-flex-item/index.js');

/**
 * @file index.tsx
 *
 * @fileoverview Shows form elements inline.
 */
const ChildFlexItem = styled__default(index$3.default) `
  position: relative;
  z-index: 10;
  & > div {
    margin-bottom: 0;

    label {
      margin: 0;
    }
  }

  /* Custom style for selects */
  div[role='combobox'],
  select,
  .jobiqo-select__wrapper {
    width: 100%;
    max-width: none !important;
  }

  ${props => props.theme.mediaQueries.smallRevert} {
    margin-left: 0;
    margin-right: 0;
  }

  ${props => props.theme.mediaQueries.small} {
    input,
    input[type='text'],
    select {
      width: 100%;
      border-right-width: ${props => `calc(${props.theme.input.borderWidth} / 2)`};
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    &:not(:first-child) {
      input,
      input[type='text'],
      select {
        border-left-width: ${props => `calc(${props.theme.input.borderWidth} / 2)`};
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
`;
const StyledFlexItemsWrapper = styled__default.div `
  ${props => props.theme.mediaQueries.smallRevert} {
    button {
      width: 100%;
      margin-top: ${props => props.theme.space[4]};
    }
  }

  ${props => props.theme.mediaQueries.small} {
    button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
`;
const StyledFlexItems = styled__default.div `
  display: block;
  ${props => props.theme.mediaQueries.small} {
    display: flex;
    align-items: center;
    justify-content: center;
  }
`;
const FormItemsInline = ({ inputs, button }) => {
    return (React__default.createElement(StyledFlexItemsWrapper, null,
        React__default.createElement(StyledFlexItems, null,
            inputs.map((input, index) => {
                return (inputs && (React__default.createElement(ChildFlexItem, { key: index, m: [3, 0] }, input)));
            }),
            button)));
};

exports.FormItemsInline = FormItemsInline;