ProfilingImportExportButtons() — react Function Reference

Source Code

packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js lines 30–155

export default function ProfilingImportExportButtons(): React.Node {
  const {isProfiling, profilingData, rootID} = useContext(ProfilerContext);
  const {setFile} = useContext(TimelineContext);
  const store = useContext(StoreContext);
  const {profilerStore} = store;

  const inputRef = useRef<HTMLInputElement | null>(null);
  const downloadRef = useRef<HTMLAnchorElement | null>(null);

  const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);

  const doesHaveInMemoryData = profilerStore.didRecordCommits;

  const downloadData = useCallback(() => {
    if (rootID === null) {
      return;
    }

    const anchorElement = downloadRef.current;

    if (profilingData !== null && anchorElement !== null) {
      const profilingDataExport = prepareProfilingDataExport(profilingData);
      const date = new Date();
      const dateString = date
        .toLocaleDateString(undefined, {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        })
        .replace(/\//g, '-');
      const timeString = date
        .toLocaleTimeString(undefined, {
          hour12: false,
        })
        .replace(/:/g, '-');
      downloadFile(
        anchorElement,
        `profiling-data.${dateString}.${timeString}.json`,
        JSON.stringify(profilingDataExport, null, 2),
      );
    }
  }, [rootID, profilingData]);

  const clickInputElement = useCallback(() => {
    if (inputRef.current !== null) {
      inputRef.current.click();
    }
  }, []);

  // TODO (profiling) We should probably use a transition for this and suspend while loading the file.
  // Local files load so fast it's probably not very noticeable though.
  const handleChange = () => {
    const input = inputRef.current;
    if (input !== null && input.files.length > 0) {
      const file = input.files[0];

      // TODO (profiling) Handle fileReader errors.
      const fileReader = new FileReader();
      fileReader.addEventListener('load', () => {
        const raw = ((fileReader.result: any): string);
        const json = JSON.parse(raw);

        if (!isArray(json) && hasOwnProperty.call(json, 'version')) {
          // This looks like React profiling data.
          // But first, clear any User Timing marks; we should only have one type open at a time.
          setFile(null);

          try {
            const profilingDataExport = ((json: any): ProfilingDataExport);
            profilerStore.profilingData =
              prepareProfilingDataFrontendFromExport(profilingDataExport);
          } catch (error) {
            modalDialogDispatch({
              id: 'ProfilingImportExportButtons',
              type: 'SHOW',
              title: 'Import failed',
              content: (
                <Fragment>
                  <div>The profiling data you selected cannot be imported.</div>
                  {error !== null && (
                    <div className={styles.ErrorMessage}>{error.message}</div>