vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
99 lines • 3.31 kB
JavaScript
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
};