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 | 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 | import {useEffect, useState} from 'react'
import PropTypes from 'prop-types'
import AtomTextarea, {AtomTextareaSizes as SIZES, AtomTextareaStates} from '@s-ui/react-atom-textarea'
import MoleculeField from '@s-ui/react-molecule-field'
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,
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 = computeHelpText()
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} 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
}
export default MoleculeTextareaField
export const MoleculeTextareaSizes = SIZES
|