43 lines
943 B
JavaScript
43 lines
943 B
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import classNames from 'classnames';
|
|
import { Classes, TextArea, FormGroup, Intent } from '@blueprintjs/core';
|
|
|
|
const TextAreaEditableCell = ({
|
|
row: { index },
|
|
column: { id },
|
|
cell: { value: initialValue },
|
|
payload,
|
|
}) => {
|
|
const [value, setValue] = useState(initialValue);
|
|
|
|
const onChange = (e) => {
|
|
setValue(e.target.value);
|
|
};
|
|
const onBlur = () => {
|
|
payload.updateData(index, id, value);
|
|
};
|
|
useEffect(() => {
|
|
setValue(initialValue);
|
|
}, [initialValue]);
|
|
|
|
const error = payload.errors?.[index]?.[id];
|
|
|
|
return (
|
|
<FormGroup
|
|
intent={error ? Intent.DANGER : null}
|
|
className={classNames(Classes.FILL)}
|
|
>
|
|
<TextArea
|
|
growVertically={true}
|
|
large={true}
|
|
value={value}
|
|
onChange={onChange}
|
|
onBlur={onBlur}
|
|
fill={true}
|
|
/>
|
|
</FormGroup>
|
|
);
|
|
};
|
|
|
|
export default TextAreaEditableCell;
|