@confi/conflux-react-ui-test-package/esm/input/input.js

Modern and minimalist React UI library.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import _JSXStyle from "styled-jsx/style";
import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import useTheme from '../styles/use-theme';
import InputLabel from './input-label';
import InputBlockLabel from './input-block-label';
import InputIcon from './input-icon';
import InputClearIcon from './input-icon-clear';
import { getSizes, getColors } from './styles';
import { defaultProps } from './input-props';

var simulateChangeEvent = function simulateChangeEvent(el, event) {
  return _extends(_extends({}, event), {}, {
    target: el,
    currentTarget: el
  });
};

var Input = React.forwardRef(function (_ref, ref) {
  var label = _ref.label,
      labelRight = _ref.labelRight,
      size = _ref.size,
      status = _ref.status,
      icon = _ref.icon,
      iconRight = _ref.iconRight,
      iconClickable = _ref.iconClickable,
      onIconClick = _ref.onIconClick,
      initialValue = _ref.initialValue,
      onChange = _ref.onChange,
      readOnly = _ref.readOnly,
      value = _ref.value,
      onClearClick = _ref.onClearClick,
      clearable = _ref.clearable,
      width = _ref.width,
      className = _ref.className,
      onBlur = _ref.onBlur,
      onFocus = _ref.onFocus,
      autoComplete = _ref.autoComplete,
      placeholder = _ref.placeholder,
      children = _ref.children,
      disabled = _ref.disabled,
      props = _objectWithoutProperties(_ref, ["label", "labelRight", "size", "status", "icon", "iconRight", "iconClickable", "onIconClick", "initialValue", "onChange", "readOnly", "value", "onClearClick", "clearable", "width", "className", "onBlur", "onFocus", "autoComplete", "placeholder", "children", "disabled"]);

  var theme = useTheme();
  var inputRef = useRef(null);
  useImperativeHandle(ref, function () {
    return inputRef.current;
  });

  var _useState = useState(initialValue),
      _useState2 = _slicedToArray(_useState, 2),
      selfValue = _useState2[0],
      setSelfValue = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      hover = _useState4[0],
      setHover = _useState4[1];

  var _useMemo = useMemo(function () {
    return getSizes(size);
  }, [size]),
      heightRatio = _useMemo.heightRatio,
      fontSize = _useMemo.fontSize;

  var showClearIcon = useMemo(function () {
    return clearable && selfValue !== '';
  }, [selfValue, clearable]);
  var labelClasses = useMemo(function () {
    return labelRight ? 'right-label' : label ? 'left-label' : '';
  }, [label, labelRight]);
  var iconClasses = useMemo(function () {
    return iconRight ? 'right-icon' : icon ? 'left-icon' : '';
  }, [icon, iconRight]);

  var _useMemo2 = useMemo(function () {
    return getColors(theme.palette, status);
  }, [theme.palette, status]),
      color = _useMemo2.color,
      borderColor = _useMemo2.borderColor,
      hoverBorder = _useMemo2.hoverBorder;

  var changeHandler = function changeHandler(event) {
    if (disabled || readOnly) return;
    setSelfValue(event.target.value);
    onChange && onChange(event);
  };

  var clearHandler = function clearHandler(event) {
    setSelfValue('');
    onClearClick && onClearClick(event);
    /* istanbul ignore next */

    if (!inputRef.current) return;
    var changeEvent = simulateChangeEvent(inputRef.current, event);
    changeEvent.target.value = '';
    onChange && onChange(changeEvent);
    inputRef.current.focus();
  };

  var focusHandler = function focusHandler(e) {
    setHover(true);
    onFocus && onFocus(e);
  };

  var blurHandler = function blurHandler(e) {
    setHover(false);
    onBlur && onBlur(e);
  };

  var iconClickHandler = function iconClickHandler(e) {
    if (disabled) return;
    onIconClick && onIconClick(e);
  };

  var iconProps = useMemo(function () {
    return {
      ratio: heightRatio,
      clickable: iconClickable,
      onClick: iconClickHandler
    };
  }, [heightRatio, iconClickable, iconClickHandler]);
  useEffect(function () {
    if (value === undefined) return;
    setSelfValue(value);
  }, [value]);
  return /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["3197286054", [width, width, heightRatio, theme.layout.gap, theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, fontSize, color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["3197286054", [width, width, heightRatio, theme.layout.gap, theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, fontSize, color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "input-container ".concat(className)
  }, label && /*#__PURE__*/React.createElement(InputLabel, {
    fontSize: fontSize
  }, label), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["3197286054", [width, width, heightRatio, theme.layout.gap, theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, fontSize, color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "input-wrapper ".concat(hover ? 'hover' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(labelClasses)
  }, icon && /*#__PURE__*/React.createElement(InputIcon, _extends({
    icon: icon
  }, iconProps)), /*#__PURE__*/React.createElement("input", _extends({
    type: "text",
    ref: inputRef,
    value: selfValue,
    placeholder: placeholder,
    disabled: disabled,
    readOnly: readOnly,
    onFocus: focusHandler,
    onBlur: blurHandler,
    onChange: changeHandler,
    autoComplete: autoComplete
  }, props, {
    className: _JSXStyle.dynamic([["3197286054", [width, width, heightRatio, theme.layout.gap, theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, fontSize, color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (props && props.className != null && props.className || "".concat(disabled ? 'disabled' : '', " ").concat(iconClasses))
  })), clearable && /*#__PURE__*/React.createElement(InputClearIcon, {
    visibale: showClearIcon,
    heightRatio: heightRatio,
    disabled: disabled || readOnly,
    onClick: clearHandler
  }), iconRight && /*#__PURE__*/React.createElement(InputIcon, _extends({
    icon: iconRight
  }, iconProps))), labelRight && /*#__PURE__*/React.createElement(InputLabel, {
    fontSize: fontSize,
    isRight: true
  }, labelRight)), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "3197286054",
    dynamic: [width, width, heightRatio, theme.layout.gap, theme.layout.radius, borderColor, theme.palette.accents_1, theme.palette.accents_2, hoverBorder, fontSize, color, theme.palette.accents_3, theme.palette.background, color]
  }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;width:".concat(width, ";box-sizing:border-box;-webkit-box-align:center;}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(width, ";height:calc(").concat(heightRatio, " * ").concat(theme.layout.gap, ");}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(theme.layout.radius, ";border:1px solid ").concat(borderColor, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:4px 10px;padding:0;box-shadow:none;font-size:").concat(fontSize, ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
});
Input.defaultProps = defaultProps;
export default Input;