Geforce File Manager

NAME	SIZE	ACTIONS
📁 parts		[ DEL ]
📄 ActionBar.js	9,233 B	[ EDIT ] \| [ DEL ]
📄 Behavior.js	5,564 B	[ EDIT ] \| [ DEL ]
📄 CTA.js	10,729 B	[ EDIT ] \| [ DEL ]
📄 Controls.js	4,779 B	[ EDIT ] \| [ DEL ]
📄 Edit.js	10,235 B	[ EDIT ] \| [ DEL ]
📄 Email.js	7,520 B	[ EDIT ] \| [ DEL ]
📄 Preset.js	6,565 B	[ EDIT ] \| [ DEL ]
📄 Search.js	3,832 B	[ EDIT ] \| [ DEL ]
📄 Style.js	2,114 B	[ EDIT ] \| [ DEL ]
📄 Watermark.js	4,043 B	[ EDIT ] \| [ DEL ]
📄 index.js	3,615 B	[ EDIT ] \| [ DEL ]

[ CLOSE ]

EDIT: Search.js

/**
 * WordPress dependencies
 */
import { __ } from "@wordpress/i18n";
import {
  ToggleControl,
  BaseControl,
  RangeControl,
  TextControl,
  Button,
} from "@wordpress/components";
import { chevronDown, chevronUp } from "@wordpress/icons";
import { useEffect, useState } from "@wordpress/element";

export default ({ state, updateState, className }) => {
  const { search } = state;
  const [showAdvanced, setShowAdvanced] = useState(false);

const updateSearchState = (updated) => {
    updateState({
      ...state,
      search: {
        ...search,
        ...updated,
      },
    });
  };

return (
    <div className={className}>
      <BaseControl>
        <h3>{__("Searchable Captions", "presto-player")}</h3>
      </BaseControl>
      <BaseControl className="presto-player__control--search">
        <ToggleControl
          label={__("Enable", "presto-player")}
          help={__(
            "Show a search bar on your player which enables searching within the subtitles of the video.",
            "presto-player"
          )}
          onChange={(enabled) => {
            updateSearchState({
              enabled,
            });
          }}
          checked={search?.enabled}
        />
      </BaseControl>
      {search?.enabled && (
        <div>
          <BaseControl className="presto-player__control--placeholder-text">
            <TextControl
              label={__("Placeholder Text", "presto-player")}
              help=""
              value={search?.placeholder}
              onChange={(placeholder) => updateSearchState({ placeholder })}
            />
          </BaseControl>

<BaseControl>
            <Button
              onClick={() => setShowAdvanced(!showAdvanced)}
              iconPosition="right"
              icon={showAdvanced ? chevronUp : chevronDown}
              variant="link"
            >
              {__("Advanced Settings", "presto-player")}
            </Button>
          </BaseControl>

{!!showAdvanced && (
            <>
              <BaseControl>
                <RangeControl
                  label={__(
                    "Minimum Matching Character Length",
                    "presto-player"
                  )}
                  help={__(
                    "Only the matches whose length exceeds this value will be returned. (For instance, if you want to ignore single character matches in the result, set it to 2",
                    "presto-player"
                  )}
                  value={search?.minMatchCharLength || 1}
                  onChange={(minMatchCharLength) =>
                    updateSearchState({ minMatchCharLength })
                  }
                  min={0}
                  max={10}
                />
              </BaseControl>
              <BaseControl>
                <RangeControl
                  label={__("Threshold", "presto-player")}
                  help={__(
                    "At what point does the match algorithm give up. A threshold of 0.0 requires a perfect match (of both letters and location), a threshold of 1.0 would match anything.",
                    "presto-player"
                  )}
                  value={search?.threshold || 1}
                  onChange={(threshold) => updateSearchState({ threshold })}
                  min={0}
                  max={1}
                  step={0.1}
                />
              </BaseControl>
            </>
          )}
        </div>
      )}
    </div>
  );
};