2021-10-20 02:20:45 +00:00
|
|
|
import React, { useEffect } from 'react';
|
2021-04-14 08:30:22 +00:00
|
|
|
|
2021-10-20 02:20:45 +00:00
|
|
|
export const TextArea = function TextArea({ width, height, properties, exposedVariables, styles, setExposedVariable }) {
|
2021-04-30 06:31:32 +00:00
|
|
|
useEffect(() => {
|
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
|
|
|
|
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) => {
|
2021-10-20 02:20:45 +00:00
|
|
|
setExposedVariable('value', e.target.value);
|
2021-04-30 06:31:32 +00:00
|
|
|
}}
|
|
|
|
|
type="text"
|
2021-04-30 08:10:57 +00:00
|
|
|
className="form-control"
|
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',
|
|
|
|
|
}}
|
2021-10-20 02:20:45 +00:00
|
|
|
value={exposedVariables.value}
|
2021-04-30 06:31:32 +00:00
|
|
|
></textarea>
|
|
|
|
|
);
|
2021-04-10 04:51:19 +00:00
|
|
|
};
|