2022-08-24 21:45:30 +00:00
|
|
|
import React, { useState, useEffect } from 'react';
|
2021-04-14 08:30:22 +00:00
|
|
|
|
2022-08-24 21:45:30 +00:00
|
|
|
export const TextArea = function TextArea({ height, properties, styles, setExposedVariable, registerAction }) {
|
|
|
|
|
const [value, setValue] = useState(properties.value);
|
2021-04-30 06:31:32 +00:00
|
|
|
useEffect(() => {
|
2022-08-24 21:45:30 +00:00
|
|
|
setValue(properties.value);
|
2021-10-20 02:20:45 +00:00
|
|
|
setExposedVariable('value', properties.value);
|
2021-09-21 13:48:28 +00:00
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
2021-10-20 02:20:45 +00:00
|
|
|
}, [properties.value]);
|
2021-04-14 11:32:03 +00:00
|
|
|
|
2022-07-13 10:12:19 +00:00
|
|
|
registerAction('setText', async function (text) {
|
2022-08-24 21:45:30 +00:00
|
|
|
setValue(text);
|
2022-07-13 10:12:19 +00:00
|
|
|
setExposedVariable('value', text);
|
|
|
|
|
});
|
|
|
|
|
registerAction('clear', async function () {
|
2022-08-24 21:45:30 +00:00
|
|
|
setValue('');
|
2022-07-13 10:12:19 +00:00
|
|
|
setExposedVariable('value', '');
|
|
|
|
|
});
|
2021-04-30 06:31:32 +00:00
|
|
|
return (
|
|
|
|
|
<textarea
|
2021-10-20 02:20:45 +00:00
|
|
|
disabled={styles.disabledState}
|
2021-04-30 06:31:32 +00:00
|
|
|
onChange={(e) => {
|
2022-08-24 21:45:30 +00:00
|
|
|
setValue(e.target.value);
|
2021-10-20 02:20:45 +00:00
|
|
|
setExposedVariable('value', e.target.value);
|
2021-04-30 06:31:32 +00:00
|
|
|
}}
|
|
|
|
|
type="text"
|
2022-01-09 08:39:49 +00:00
|
|
|
className="form-control textarea"
|
2021-10-20 02:20:45 +00:00
|
|
|
placeholder={properties.placeholder}
|
2021-12-10 03:13:05 +00:00
|
|
|
style={{
|
|
|
|
|
height,
|
|
|
|
|
resize: 'none',
|
|
|
|
|
display: styles.visibility ? '' : 'none',
|
2022-01-29 01:36:08 +00:00
|
|
|
borderRadius: `${styles.borderRadius}px`,
|
2021-12-10 03:13:05 +00:00
|
|
|
}}
|
2022-08-24 21:45:30 +00:00
|
|
|
value={value}
|
2021-04-30 06:31:32 +00:00
|
|
|
></textarea>
|
|
|
|
|
);
|
2021-04-10 04:51:19 +00:00
|
|
|
};
|