Functionnal component & hooks

by Bouh

JavaScript

// @flow
import { Trans } from '@lingui/macro';
import { t } from '@lingui/macro';

import * as React from 'react';
import Dialog from '../../UI/Dialog';
import FlatButton from '../../UI/FlatButton';
import { Line, Column } from '../../UI/Grid';
import ColorPicker from '../../UI/ColorField/ColorPicker';
import { type RGBColor } from '../../Utils/ColorTransformer';
import MiniToolbar, { MiniToolbarText } from '../../UI/MiniToolbar';
import SemiControlledTextField from '../../UI/SemiControlledTextField';

const gd: libGDevelop = global.gd;

const styles = {
  sizeTextField: {
    width: 90,
  },
};

type Props = {|
  event: gdBaseEvent,
  onClose: () => void,
  onApply: () => void,
|};

type State = {|
  textValue: string,
  textColor: RGBColor,
  backgroundColor: RGBColor,
|};

const white: RGBColor = {
  r: 255,
  g: 255,
  b: 255,
};

const black: RGBColor = {
  r: 0,
  g: 0,
  b: 0,
};

export const filterEditableWithEventTextDialog = (
  events: Array<gdBaseEvent>
): Array<gdBaseEvent> => {
  return events.filter(event =>
    [
      'BuiltinCommonInstructions::Group',
      'BuiltinCommonInstructions::Comment',
    ].includes(event.getType())
  );
};

const EventTextDialog = (props: Props) => {
  const { event, onApply, onClose } = props;

  const [textValue, setTextValue] = React.useState('');
  const [textColor, setTextColor] = React.useState(black);
  const [backgroundColor, setBackgroundColor] = React.useState(black);

  const eventType = event.getType();

  // Le
  React.useEffect(() => {
    if (eventType === 'BuiltinCommonInstructions::Comment') {
      const commentEvent = gd.asCommentEvent(event);

      // Les couleurs provenant normalement de l'event ne sont pas bonne.
      setTextColor({
        r: commentEvent.getTextColorRed(),
        g: commentEvent.getTextColorGreen(),
        b: commentEvent.getTextColorBlue(),
      });

      // Les couleurs provenant normalement de l'event ne sont pas bonne.
      setBackgroundColor({
        r:...