All files / src/components/script ScriptEventFormTextarea.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { useState, useEffect, FC, useContext } from "react";
import PropTypes from "prop-types";
import { useAppSelector } from "store/hooks";
import { DialogueTextarea } from "ui/form/DialogueTextarea";
import {
  customEventSelectors,
  fontSelectors,
  variableSelectors,
} from "store/features/entities/entitiesState";
import { NamedVariable, namedVariablesByContext } from "renderer/lib/variables";
import { ScriptEditorContext } from "./ScriptEditorContext";
 
interface ScriptEventFormTextAreaProps {
  id?: string;
  value?: string;
  placeholder?: string;
  entityId: string;
  maxlength?: number;
  singleLine?: boolean;
  onChange: (newValue: string) => void;
}
 
const ScriptEventFormTextArea: FC<ScriptEventFormTextAreaProps> = ({
  id,
  value = "",
  placeholder,
  maxlength = 52,
  singleLine = false,
  onChange,
  entityId,
}) => {
  const context = useContext(ScriptEditorContext);
  const [variables, setVariables] = useState<NamedVariable[]>([]);
  const fonts = useAppSelector((state) => fontSelectors.selectAll(state));
  const variablesLookup = useAppSelector((state) =>
    variableSelectors.selectEntities(state)
  );
  const customEvent = useAppSelector((state) =>
    customEventSelectors.selectById(state, entityId)
  );
 
  useEffect(() => {
    setVariables(
      namedVariablesByContext(context, variablesLookup, customEvent)
    );
  }, [entityId, variablesLookup, context, customEvent]);
 
  return (
    <DialogueTextarea
      id={id}
      value={value || ""}
      onChange={onChange}
      variables={variables}
      entityId={entityId}
      fonts={fonts}
      placeholder={placeholder}
      maxlength={maxlength}
      singleLine={singleLine}
    />
  );
};
 
ScriptEventFormTextArea.propTypes = {
  id: PropTypes.string,
  value: PropTypes.string,
  maxlength: PropTypes.number,
  placeholder: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  entityId: PropTypes.string.isRequired,
};
 
export default ScriptEventFormTextArea;