Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 | 1x 6x 6x 1x 6x 3x 3x 1x 1x 6x 6x 6x 6x 6x 6x 5x 6x 6x 6x 6x 6x 6x 1x 1x 1x 1x 1x 1x 6x 6x 1x 1x 1x 1x | import {useEffect, useState} from 'react'
import PropTypes from 'prop-types'
import AtomTextarea, {
AtomTextareaResizes as RESIZES,
AtomTextareaSizes as SIZES,
AtomTextareaStates
} from '@s-ui/react-atom-textarea'
import MoleculeField from '@s-ui/react-molecule-field'
import {BASE_CLASS} from './config.js'
const hasErrors = ({successText, errorText}) => {
Iif (errorText) return true
if (successText) return false
}
const getState = ({successText, errorState, alertText}) => {
if (successText) return AtomTextareaStates.SUCCESS
Iif (errorState) return AtomTextareaStates.ERROR
Iif (alertText) return AtomTextareaStates.ALERT
}
const NOOP = () => {}
const MoleculeTextareaField = ({
alertText,
autoHideHelpText = false,
errorText,
isMaxCharBlocked = false,
helpText,
id,
label,
nodeLabel,
maxChars = 4000,
onChange = NOOP,
resize,
successText,
textCharacters = 'characters',
value = '',
...props
}) => {
const errorState = hasErrors({successText, errorText})
const textAreaState = getState({successText, errorState, alertText})
const [showMaxLengthError, setShowMaxLengthError] = useState(false)
const {disabled} = props
const [internalValue, setInternalValue] = useState(value ?? '')
useEffect(() => {
setInternalValue(value ?? '')
}, [value])
const computeHelpText = () => {
Iif (showMaxLengthError) return ''
const numCharacters = internalValue.length
const dynamicText = `${numCharacters}/${maxChars} ${textCharacters}`
return helpText ? `${helpText} - ${dynamicText}` : dynamicText
}
const onChangeHandler = ev => {
ev.persist()
const value = ev.target.value
Eif (value.length <= maxChars || isMaxCharBlocked) {
setInternalValue(value)
onChange(ev, {value})
setShowMaxLengthError(value.length > maxChars)
}
}
const helpTextComputed = (
<div aria-live="polite" aria-atomic="true">
<p className={`${BASE_CLASS}-helpText`}>{computeHelpText()}</p>
</div>
)
return (
<MoleculeField
name={id}
label={label}
nodeLabel={nodeLabel}
successText={successText}
errorText={errorText}
alertText={alertText}
helpText={helpTextComputed}
autoHideHelpText={autoHideHelpText}
maxChars={maxChars}
onChange={onChangeHandler}
disabled={disabled}
>
<AtomTextarea
id={id}
errorState={errorState}
resize={resize}
state={textAreaState}
value={internalValue}
{...props}
/>
</MoleculeField>
)
}
MoleculeTextareaField.displayName = 'MoleculeTextareaField'
MoleculeTextareaField.propTypes = {
/** Maximum number of characters allowed */
maxChars: PropTypes.number,
/** Text `characters` to be used in the character count HelpText */
textCharacters: PropTypes.string,
/** placeholder og the textarea */
placeholder: PropTypes.string,
/** Size of textarea: 'short', 'long' */
size: PropTypes.oneOf(Object.values(SIZES)),
/** Handler triggered on change */
onChange: PropTypes.func,
/** Value (content) of the textarea */
value: PropTypes.string,
/** Text to be displayed as label */
label: PropTypes.string,
/** React node to be displayed as label if there is not a label */
nodeLabel: PropTypes.element,
/** used as for attribute and textarea id */
id: PropTypes.string,
/** Success message to display when success state */
successText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
/** Error message to display when error state */
errorText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
/** Alert message to display when error state */
alertText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
/** Help Text to display */
helpText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
/** Boolean to decide if field elements should be set inline */
inline: PropTypes.bool,
/** Boolean to decide if the field should appear as disabled */
disabled: PropTypes.bool,
/** Boolean to decide if helptext should be auto hide */
autoHideHelpText: PropTypes.bool,
/** Prop to handle if the user can exceed the maxChars length */
isMaxCharBlocked: PropTypes.bool,
/** Resize property for the textarea */
resize: PropTypes.oneOf(Object.values(RESIZES))
}
export default MoleculeTextareaField
export const MoleculeTextareaSizes = SIZES
export const MoleculeTextareaResizes = RESIZES
|