@douyinfe/semi-ui/lib/es/input/inputGroup.js

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

import _isFunction from "lodash/isFunction";
import _get from "lodash/get";
var __rest = this && this.__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
import React from 'react';
import cls from 'classnames';
import PropTypes from 'prop-types';
import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/input/constants';
import BaseComponent from '../_base/baseComponent';
import Label from '../form/label';
import { noop } from '@douyinfe/semi-foundation/lib/es/utils/function';
const prefixCls = cssClasses.PREFIX;
const sizeSet = strings.SIZE;
export default class inputGroup extends BaseComponent {
  renderGroupWithLabel(inner) {
    const _a = this.props,
      {
        size,
        className,
        label,
        labelPosition
      } = _a,
      rest = __rest(_a, ["size", "className", "label", "labelPosition"]);
    const groupWrapperCls = cls({
      [`${prefixCls}-group-wrapper`]: true,
      [`${prefixCls}-group-wrapper-with-top-label`]: labelPosition === 'top',
      [`${prefixCls}-group-wrapper-with-left-label`]: labelPosition === 'left'
    });
    const groupCls = cls(`${prefixCls}-group`, className, {
      [`${prefixCls}-${size}`]: size !== 'default'
    });
    // const labelCls = cls(label.className, '');
    const defaultName = 'input-group';
    return /*#__PURE__*/React.createElement("div", {
      className: groupWrapperCls
    }, label && label.text ? /*#__PURE__*/React.createElement(Label, Object.assign({
      name: defaultName
    }, label)) : null, /*#__PURE__*/React.createElement("span", {
      role: "group",
      "aria-disabled": this.props.disabled,
      id: label && label.name || defaultName,
      className: groupCls,
      style: this.props.style,
      onFocus: this.props.onFocus,
      onBlur: this.props.onBlur
    }, inner));
  }
  render() {
    const _a = this.props,
      {
        size,
        style,
        className,
        children,
        label,
        onBlur: groupOnBlur,
        onFocus: groupOnFocus,
        disabled: groupDisabled
      } = _a,
      rest = __rest(_a, ["size", "style", "className", "children", "label", "onBlur", "onFocus", "disabled"]);
    const groupCls = cls(`${prefixCls}-group`, {
      [`${prefixCls}-${size}`]: size !== 'default'
    }, className);
    let inner;
    if (children) {
      inner = (Array.isArray(children) ? children : [children]).map((item, index) => {
        if (item) {
          const {
            onBlur: itemOnBlur,
            onFocus: itemOnFocus,
            disabled: itemDisabled
          } = item.props;
          const onBlur = _isFunction(itemOnBlur) && _get(itemOnBlur, 'name') !== 'noop' ? itemOnBlur : groupOnBlur;
          const onFocus = _isFunction(itemOnFocus) && _get(itemOnFocus, 'name') !== 'noop' ? itemOnFocus : groupOnFocus;
          const disabled = typeof itemDisabled === 'boolean' ? itemDisabled : groupDisabled;
          return /*#__PURE__*/React.cloneElement(item, Object.assign(Object.assign({
            key: index
          }, rest), {
            size,
            onBlur,
            onFocus,
            disabled
          }));
        }
        return null;
      });
    }
    if (label && label.text) {
      return this.renderGroupWithLabel(inner);
    }
    return /*#__PURE__*/React.createElement("span", {
      role: "group",
      "aria-label": "Input group",
      "aria-disabled": this.props.disabled,
      className: groupCls,
      style: style,
      onFocus: this.props.onFocus,
      onBlur: this.props.onBlur
    }, inner);
  }
}
inputGroup.propTypes = {
  className: PropTypes.string,
  children: PropTypes.node,
  size: PropTypes.oneOf(sizeSet),
  style: PropTypes.object,
  onBlur: PropTypes.func,
  onFocus: PropTypes.func,
  label: PropTypes.object,
  labelPosition: PropTypes.string
};
inputGroup.defaultProps = {
  size: 'default',
  className: '',
  onBlur: noop,
  onFocus: noop
};