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: Group.js

import { __ } from "@wordpress/i18n";
const { Card, CardBody, CardFooter } = wp.components;
import SaveButton from "./SaveButton";
import { useDispatch } from "@wordpress/data";
import { store as noticesStore } from "@wordpress/notices";
import Disabled from "./Disabled";
import useSave from "../../../hooks/useSave";

export default ({
  title,
  description,
  children,
  disabled,
  hideSaveButton,
  saveDisabled,
}) => {
  const { save } = useSave();
  const { createSuccessNotice, createErrorNotice } = useDispatch(noticesStore);

/**
   * Form is submitted.
   */
  const onSave = async () => {
    if (saveDisabled) {
      return;
    }
    try {
      await save();
      createSuccessNotice(__("Settings Updated", "presto-player"), {
        type: "snackbar",
      });
    } catch (e) {
      console.error(e);
      createErrorNotice(
        e?.message || __("Something went wrong", "presto-player")
      );
    }
  };

return (
    <Disabled disabled={disabled}>
      <Card size="large" className="presto-options__card">
        <CardBody className={`presto-options__card-body`}>
          <div className="presto-flow" style={{ "--presto-flow-space": "2em" }}>
            <div
              className="presto-flow"
              style={{ "--presto-flow-space": "1em" }}
            >
              {title && (
                <h2 style={{ marginBottom: 0 }}>
                  {title}{" "}
                  {!!disabled && (
                    <div className="presto-options__pro-badge">Pro</div>
                  )}
                </h2>
              )}
              {description && <p>{description}</p>}
            </div>
            <div>{children}</div>
          </div>
        </CardBody>
        {!hideSaveButton ? (
          <CardFooter isShady>
            <div>
              <SaveButton onSave={onSave}>{__("Update Settings", "presto-player")}</SaveButton>
            </div>
          </CardFooter>
        ) : (
          <br />
        )}
      </Card>
    </Disabled>
  );
};