Geforce File Manager

NAME	SIZE	ACTIONS
📄 CTA.js	600 B	[ EDIT ] \| [ DEL ]
📄 CheckboxControl.js	539 B	[ EDIT ] \| [ DEL ]
📄 ColorPicker.js	730 B	[ EDIT ] \| [ DEL ]
📄 ComboboxControl.js	612 B	[ EDIT ] \| [ DEL ]
📄 CustomCSS.js	1,213 B	[ EDIT ] \| [ DEL ]
📄 Disabled.js	861 B	[ EDIT ] \| [ DEL ]
📄 Fields.js	1,321 B	[ EDIT ] \| [ DEL ]
📄 Group.js	2,021 B	[ EDIT ] \| [ DEL ]
📄 Groups.js	747 B	[ EDIT ] \| [ DEL ]
📄 Integration.js	3,088 B	[ EDIT ] \| [ DEL ]
📄 Loading.js	253 B	[ EDIT ] \| [ DEL ]
📄 Media.js	1,903 B	[ EDIT ] \| [ DEL ]
📄 Notices.js	552 B	[ EDIT ] \| [ DEL ]
📄 NullView.js	47 B	[ EDIT ] \| [ DEL ]
📄 Page.js	428 B	[ EDIT ] \| [ DEL ]
📄 SaveButton.js	1,309 B	[ EDIT ] \| [ DEL ]
📄 SelectControl.js	623 B	[ EDIT ] \| [ DEL ]
📄 TextControl.js	775 B	[ EDIT ] \| [ DEL ]
📄 ToggleControl.js	1,802 B	[ EDIT ] \| [ DEL ]

[ CLOSE ]

EDIT: ToggleControl.js

const { ToggleControl, Modal, Button } = wp.components;
const { dispatch } = wp.data;
const { useState } = wp.element;
const { __ } = wp.i18n;
import classNames from "classnames";

export default ({ option, value, optionName, className }) => {
  const [confirm, setConfirm] = useState(false);
  return (
    <div
      className={classNames(
        className,
        "presto-settings__setting is-toggle-control"
      )}
    >
      <ToggleControl
        label={option?.description || option?.name}
        checked={value}
        help={option?.help}
        onChange={(value) => {
          if (option?.confirm && value) {
            setConfirm(true);
            return;
          }
          dispatch("presto-player/settings").updateSetting(
            option.id,
            value,
            optionName
          );
        }}
      />
      {confirm && (
        <Modal
          className="presto-player__modal-confirm"
          title={option?.confirm?.title}
          style={{ "max-width": "350px" }}
          onRequestClose={() => setConfirm(false)}
        >
          {option?.confirm?.heading && <h2>{option?.confirm?.heading}</h2>}
          {option?.confirm?.message && <p>{option?.confirm?.message}</p>}
          <Button
            className="presto-player__modal-confirm-button"
            isDestructive
            onClick={() => {
              dispatch("presto-player/settings").updateSetting(
                option.id,
                true,
                optionName
              );
              setConfirm(false);
            }}
          >
            {__("Okay", "presto-player")}
          </Button>
          <Button onClick={() => setConfirm(false)}>
            {__("Cancel", "presto-player")}
          </Button>
        </Modal>
      )}
    </div>
  );
};