UNPKG

@itwin/itwinui-react

Version:

A react component library for iTwinUI

82 lines (81 loc) 1.97 kB
import * as React from 'react'; import cx from 'classnames'; import { Box } from '../../utils/index.js'; import { InputGrid } from '../InputGrid/InputGrid.js'; import { Label } from '../Label/Label.js'; import { StatusMessage } from '../StatusMessage/StatusMessage.js'; export const InputGroup = React.forwardRef((props, forwardedRef) => { let { className, children, disabled = false, displayStyle = 'default', label, status, required = false, labelProps, innerProps, message, svgIcon, messageProps, ...rest } = props; return React.createElement( InputGrid, { ref: forwardedRef, as: 'div', labelPlacement: displayStyle, className: cx('iui-input-group-wrapper', className), 'data-iui-status': status, ...rest, }, label && React.createElement( Label, { as: 'label', required: required, disabled: disabled, ...labelProps, }, label, ), React.createElement( Box, { as: 'div', ...innerProps, className: cx('iui-input-group', innerProps?.className), }, children, ), React.createElement(BottomMessage, { message: message, status: status, svgIcon: svgIcon, displayStyle: displayStyle, messageProps: messageProps, }), ); }); if ('development' === process.env.NODE_ENV) InputGroup.displayName = 'InputGroup'; let BottomMessage = (props) => { let { message, status, svgIcon, displayStyle, messageProps } = props; if (message && 'string' != typeof message) return message; if (message || status || svgIcon) return React.createElement( StatusMessage, { iconProps: { 'aria-hidden': true, }, startIcon: svgIcon, status: status, ...messageProps, }, 'inline' !== displayStyle && message, ); return null; };