UNPKG

vcc-ui

Version:

A React library for building user interfaces at Volvo Cars

99 lines 3.31 kB
import _extends from "@babel/runtime/helpers/extends"; import { bool, func, string } from 'prop-types'; import React, { forwardRef } from 'react'; import { useTheme } from '../../styling/use-theme'; import { makeId, makeIdList, useId } from '../../utils/auto-id'; import { Block } from '../block'; import { Flex } from '../flex'; import { Message } from '../message'; import { Spacer } from '../spacer'; import { Spinner } from '../spinner'; import { defaultStyles, labelStyle, wrapperStyle } from './text-area.style'; /** * @deprecated Use `import { TextArea } from '@volvo-cars/react-forms'` instead. See [TextArea](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-textarea--docs) */ export const TextArea = /*#__PURE__*/forwardRef((_ref, ref) => { let { value = '', onChange, isValid = true, label, description = '', errorMessage = '', loading = false, disabled = false, ...props } = _ref; const theme = useTheme(); const isEmpty = value.length === 0; const styleProps = { isEmpty, isValid, disabled, loading, theme }; const id = useId('vcc-ui-text-area', props.id); const errorMessageId = makeId(id, 'error'); const descriptionId = makeId(id, 'description'); const describedBy = makeIdList([errorMessage && errorMessageId, description && descriptionId]); const messages = /*#__PURE__*/React.createElement(React.Fragment, null, errorMessage || description ? /*#__PURE__*/React.createElement(Spacer, { size: 0.5 }) : null, errorMessage ? /*#__PURE__*/React.createElement(Message, { type: "error", id: errorMessageId }, errorMessage) : null, description ? /*#__PURE__*/React.createElement(Message, { id: descriptionId }, description) : null); return /*#__PURE__*/React.createElement(Flex, { extend: wrapperStyle }, /*#__PURE__*/React.createElement(Flex, { extend: { position: 'relative' } }, loading && /*#__PURE__*/React.createElement(Flex, { extend: { position: 'absolute', width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center' } }, /*#__PURE__*/React.createElement(Spinner, { color: theme.tokens.inputForeground, size: 24 })), !loading && /*#__PURE__*/React.createElement(Block, { as: "label", htmlFor: id, extend: labelStyle(styleProps) }, label), /*#__PURE__*/React.createElement(Block, _extends({}, props, { ref: ref, as: "textarea", value: loading ? '' : value, disabled: disabled || loading, id: id, onChange: onChange, extend: defaultStyles(styleProps) }, describedBy && { 'aria-describedby': describedBy }))), messages); }); TextArea.displayName = 'TextArea'; TextArea.propTypes = { id: string, name: string, /** Renders a label inside the input. */ label: string.isRequired, /** Renders a neutral helper message underneath the input. */ description: string, /** Renders a red error message for validation underneath the input. */ errorMessage: string, onChange: func.isRequired, /** Value of the input. This should be stored in the * state of the parent component */ value: string.isRequired, /** Renders the input as valid or invalid */ isValid: bool, loading: bool, disabled: bool };