cinnecta-ui/lib/components/InputOnly.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactTextMask = _interopRequireDefault(require("react-text-mask"));

var _Shimmer = _interopRequireDefault(require("./Shimmer"));

var _reactWithStyles = require("react-with-styles");

var _withStyles = require("../helpers/withStyles");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var propTypes = _objectSpread({}, _reactWithStyles.withStylesPropTypes, {
  actionLink: _propTypes.default.string,
  autoCapitalize: _propTypes.default.bool,
  autoComplete: _propTypes.default.oneOf(['off', 'on']),
  autoCorrect: _propTypes.default.any,
  autoFocus: _propTypes.default.bool,
  book: _propTypes.default.bool,
  borderless: _propTypes.default.bool,
  disabled: _propTypes.default.bool,
  flat: _propTypes.default.bool,
  floating: _propTypes.default.bool,
  focusBorderless: _propTypes.default.bool,
  id: _propTypes.default.string,
  inline: _propTypes.default.bool,
  inputRef: _propTypes.default.func,
  invalid: _propTypes.default.bool,
  inverse: _propTypes.default.bool,
  large: _propTypes.default.bool,
  mask: _propTypes.default.func,
  maxLength: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  name: _propTypes.default.string.isRequired,
  onBlur: _propTypes.default.func,
  onChange: _propTypes.default.func,
  onClear: _propTypes.default.func,
  onFocus: _propTypes.default.func,
  onKeyDown: _propTypes.default.func,
  placeholder: _propTypes.default.string,
  prefix: _propTypes.default.object,
  prefixSeparator: _propTypes.default.bool,
  readOnly: _propTypes.default.bool,
  refForFocus: _propTypes.default.func,
  removeMargins: _propTypes.default.bool,
  removePrefixSpacing: _propTypes.default.bool,
  removeSuffixSpacing: _propTypes.default.bool,
  shimmer: _propTypes.default.bool,
  showFakeValuePlaceholder: _propTypes.default.bool,
  showOverflowEllipsis: _propTypes.default.bool,
  small: _propTypes.default.bool,
  spellCheck: _propTypes.default.any,
  suffix: _propTypes.default.object,
  suffixSeparator: _propTypes.default.bool,
  suffixText: _propTypes.default.any,
  type: _propTypes.default.string,
  underlineFocus: _propTypes.default.bool,
  value: _propTypes.default.string
});

var defaultProps = {
  autoComplete: 'off',
  type: 'text'
};

var InputOnly = function InputOnly(_ref) {
  var actionLink = _ref.actionLink,
      autoCapitalize = _ref.autoCapitalize,
      autoComplete = _ref.autoComplete,
      autoCorrect = _ref.autoCorrect,
      autoFocus = _ref.autoFocus,
      book = _ref.book,
      borderless = _ref.borderless,
      css = _ref.css,
      disabled = _ref.disabled,
      flat = _ref.flat,
      floating = _ref.floating,
      focusBorderless = _ref.focusBorderless,
      id = _ref.id,
      inline = _ref.inline,
      inputRef = _ref.inputRef,
      invalid = _ref.invalid,
      inverse = _ref.inverse,
      large = _ref.large,
      mask = _ref.mask,
      maxLength = _ref.maxLength,
      name = _ref.name,
      onBlur = _ref.onBlur,
      onChange = _ref.onChange,
      onClear = _ref.onClear,
      onFocus = _ref.onFocus,
      onKeyDown = _ref.onKeyDown,
      placeholder = _ref.placeholder,
      prefix = _ref.prefix,
      prefixSeparator = _ref.prefixSeparator,
      readOnly = _ref.readOnly,
      refForFocus = _ref.refForFocus,
      removeMargins = _ref.removeMargins,
      removePrefixSpacing = _ref.removePrefixSpacing,
      removeSuffixSpacing = _ref.removeSuffixSpacing,
      shimmer = _ref.shimmer,
      showFakeValuePlaceholder = _ref.showFakeValuePlaceholder,
      showOverflowEllipsis = _ref.showOverflowEllipsis,
      small = _ref.small,
      spellCheck = _ref.spellCheck,
      styles = _ref.styles,
      suffix = _ref.suffix,
      suffixSeparator = _ref.suffixSeparator,
      suffixText = _ref.suffixText,
      type = _ref.type,
      underlineFocus = _ref.underlineFocus,
      value = _ref.value;
  return _react.default.createElement("div", css(styles.inputOnly, !inline && styles.block, borderless && styles.borderless, disabled && styles.inputOnly_disabled, invalid && styles.inputOnly_invalid, flat && styles.inputOnly_flat, floating && styles.inputOnly_floating, focusBorderless && styles.inputOnly_focusBorderless, small && styles.inputOnly_small, removeMargins && styles.noMargin), shimmer && _react.default.createElement("div", css(styles.shimmer), _react.default.createElement(_Shimmer.default, {
    width: "100%",
    height: "100%"
  })), prefix && _react.default.createElement(_react.Fragment, null, _react.default.createElement("div", css(styles.inputOnly__prefix, removePrefixSpacing && styles.noPadding), prefix), prefixSeparator && _react.default.createElement("div", css(styles.separator, !removePrefixSpacing && styles.separator_prefix))), mask != null ? _react.default.createElement(_reactTextMask.default, _extends({}, css(styles.inputOnly__input, showOverflowEllipsis && styles.inputOnly__input_ellipsis, showFakeValuePlaceholder ? styles.inputOnly__input_fakeValuePlaceholder : styles.inputOnly__input_defaultPlaceholder), {
    autoComplete: autoComplete,
    autoCapitalize: autoCapitalize,
    autoFocus: autoFocus,
    autoCorrect: autoCorrect,
    disabled: disabled,
    id: id,
    mask: mask,
    maxLength: maxLength,
    name: name,
    onBlur: onBlur,
    onChange: onChange,
    onFocus: onFocus,
    onKeyDown: onKeyDown,
    placeholder: placeholder,
    value: value,
    readOnly: readOnly,
    "aria-readonly": readOnly,
    spellCheck: spellCheck,
    type: type
  })) : _react.default.createElement("input", _extends({}, css(styles.inputOnly__input, showOverflowEllipsis && styles.inputOnly__input_ellipsis, showFakeValuePlaceholder ? styles.inputOnly__input_fakeValuePlaceholder : styles.inputOnly__input_defaultPlaceholder), {
    autoComplete: autoComplete,
    autoCapitalize: autoCapitalize,
    autoFocus: autoFocus,
    autoCorrect: autoCorrect,
    disabled: disabled,
    id: id,
    maxLength: maxLength,
    name: name,
    onBlur: onBlur,
    onChange: onChange,
    onFocus: onFocus,
    onKeyDown: onKeyDown,
    placeholder: placeholder,
    value: value,
    readOnly: readOnly,
    "aria-readonly": readOnly,
    spellCheck: spellCheck,
    type: type
  })), suffix && _react.default.createElement(_react.Fragment, null, suffixSeparator && _react.default.createElement("div", css(styles.separator, !removeSuffixSpacing && styles.separator_suffix)), _react.default.createElement("div", css(styles.inputOnly__suffix, removeSuffixSpacing && styles.noPadding), suffix)));
};

InputOnly.propTypes = propTypes;
InputOnly.defaultProps = defaultProps;
var InputOnlyWithStyles = (0, _withStyles.withStyles)(function (_ref2) {
  var units = _ref2.units,
      input = _ref2.input,
      color = _ref2.color,
      shadow = _ref2.shadow;
  return {
    inputOnly: _objectSpread({}, input.default, {
      display: 'inline-flex',
      position: 'relative',
      //zIndex: 0,
      flexWrap: 'nowrap',
      alignItems: 'center',
      boxSizing: 'border-box',
      height: units(2.5),
      ':focus-within': _objectSpread({}, input.focus)
    }),
    inputOnly_focusBorderless: {
      ':focus-within': {
        borderWidth: 0
      }
    },
    inputOnly_disabled: _objectSpread({}, input.disabled),
    inputOnly_invalid: _objectSpread({}, input.invalid),
    inputOnly_flat: {
      borderColor: color.blueGray,
      background: color.white
    },
    inputOnly_floating: _objectSpread({}, shadow.level1, {
      background: color.white,
      borderColor: color.white
    }),
    inputOnly_small: _objectSpread({}, input.small),
    noMargin: {
      marginTop: 0,
      marginRight: 0,
      marginBottom: 0,
      marginLeft: 0
    },
    noPadding: {
      paddingTop: 0,
      paddingRight: 0,
      paddingBottom: 0,
      paddingLeft: 0
    },
    inputOnly__input: _objectSpread({}, input.default, {
      border: 0,
      margin: 0,
      background: color.transparent,
      width: '100%',
      height: 'auto',
      paddingTop: input.verticalPadding,
      paddingRight: input.horizontalPadding,
      paddingBottom: input.verticalPadding,
      paddingLeft: input.horizontalPadding,
      boxSizing: 'border-box',
      '::-ms-clear': {
        display: 'none'
      },
      ':focus': {
        outline: 'none',
        boxShadow: 'none',
        border: 0
      }
    }),
    inputOnly__input_ellipsis: {
      textOverflow: 'ellipsis'
    },
    inputOnly__input_defaultPlaceholder: {
      '::placeholder': {
        color: input.placeholderColor,
        opacity: 1
      }
    },
    inputOnly__input_fakeValuePlaceholder: {
      '::placeholder': {
        color: input.color,
        opacity: 1
      }
    },
    inputOnly__input_inversePlaceholder: {
      '::placeholder': {
        color: color.white,
        opacity: 1
      }
    },
    inputOnly__prefix: {
      paddingLeft: input.horizontalPadding,
      flexShrink: 0
    },
    inputOnly__suffix: {
      paddingRight: input.horizontalPadding,
      flexShrink: 0
    },
    separator: {
      width: 1,
      height: units(1.5),
      background: color.gray,
      flexShrink: 0
    },
    separator_prefix: {
      marginLeft: input.horizontalPadding
    },
    separator_suffix: {
      marginRight: input.horizontalPadding
    },
    block: {
      display: 'flex',
      width: '100%'
    },
    borderless: {
      borderColor: input.background
    },
    shimmer: {
      position: 'absolute',
      width: '100%',
      height: '100%',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
    }
  };
})(InputOnly);
var _default = InputOnlyWithStyles;
exports.default = _default;