mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-26 07:57:17 +00:00
38 lines
1.1 KiB
JavaScript
38 lines
1.1 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
|
|
export const TextArea = function TextArea({ height, properties, styles, setExposedVariable, registerAction }) {
|
|
const [value, setValue] = useState(properties.value);
|
|
useEffect(() => {
|
|
setValue(properties.value);
|
|
setExposedVariable('value', properties.value);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [properties.value]);
|
|
|
|
registerAction('setText', async function (text) {
|
|
setValue(text);
|
|
setExposedVariable('value', text);
|
|
});
|
|
registerAction('clear', async function () {
|
|
setValue('');
|
|
setExposedVariable('value', '');
|
|
});
|
|
return (
|
|
<textarea
|
|
disabled={styles.disabledState}
|
|
onChange={(e) => {
|
|
setValue(e.target.value);
|
|
setExposedVariable('value', e.target.value);
|
|
}}
|
|
type="text"
|
|
className="form-control textarea"
|
|
placeholder={properties.placeholder}
|
|
style={{
|
|
height,
|
|
resize: 'none',
|
|
display: styles.visibility ? '' : 'none',
|
|
borderRadius: `${styles.borderRadius}px`,
|
|
}}
|
|
value={value}
|
|
></textarea>
|
|
);
|
|
};
|