react#startTransition TypeScript Examples

useRippleActivationClassName = (activationClassName: string, deactivationClassName: string): [string, () => void] => {
    const [className, setClassName] = useState('');

    const clearClassNameTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
    const classNameRef = useRef('');

    const setClassNameWithRef = useCallback((className: string) => {
        setClassName(className);
        classNameRef.current = className;
    }, []);

    const onDeactivate = useCallback(() => {
        clearClassNameTimeoutRef.current = setTimeout(() => {
            setClassNameWithRef(deactivationClassName);

            clearClassNameTimeoutRef.current = setTimeout(() => setClassNameWithRef(''), 200);
        }, 100);

        window.removeEventListener('mouseup', onDeactivate, true);
    }, [deactivationClassName, setClassNameWithRef]);

    const onActivate = useCallback(() => {
        clearClassNameTimeoutRef.current && clearTimeout(clearClassNameTimeoutRef.current);

        classNameRef.current && setClassNameWithRef('');
        startTransition(() => setClassNameWithRef(activationClassName));

        window.addEventListener('mouseup', onDeactivate, true);
    }, [activationClassName, onDeactivate, setClassNameWithRef]);

    return [className, onActivate];
}

SearchField: React.FC<SearchFieldProps> = React.memo(({ onChange }) => {
    const searchElementRef = useRef<HTMLInputElement>(null);

    return (
        <div className='search-field'>
            <Button
                variant='icon'
                onClick={() => {
                    if (!searchElementRef.current) { return; }

                    searchElementRef.current.select();
                }}
            >
                <IconFont
                    iconName='#icon-search'
                    style={{fontSize: '20px'}}
                />
            </Button>
            <input
                type='text'
                ref={searchElementRef}
                defaultValue={''}
                placeholder={getMessage('collectionSearchText')}
                onChange={e => startTransition(() => onChange((e.target as HTMLInputElement).value))}
            />
            <Button
                variant='icon'
                className='search-field__close-btn'
                onClick={() => {
                    if (!searchElementRef.current) { return; }

                    searchElementRef.current.value = '';
                    searchElementRef.current.blur();
                    onChange('');
                }}
            >
                <IconFont
                    iconName='#icon-GoX'
                    style={{fontSize: '20px'}}
                />
            </Button>
        </div>
    );
})

raiseBatchCacheUpdated(ids: ReadonlySet<string>): void {
    startTransition(() => {
      this._emitter.emit(
        CacheBatchUpdateEvent.type,
        new CacheBatchUpdateEvent(ids)
      );
    });
  }

raiseCacheCleared(): void {
    startTransition(() => {
      this._emitter.emit(CacheClearEvent.type, new CacheClearEvent());
    });
  }

useAccountsData = (
  keys: (PublicKey | null | undefined)[]
): readonly AccountDatum[] => {
  const { getDatum, onBatchCache, fetchKeys, onError } = useSail();

  const [data, setData] = useState<{ [cacheKey: string]: AccountDatum }>(() =>
    loadKeysFromCache(getDatum, keys)
  );

  // TODO: add cancellation
  const fetchAndSetKeys = useDebouncedCallback(
    async (
      fetchKeys: FetchKeysFn,
      keys: readonly (PublicKey | null | undefined)[]
    ) => {
      const keysData = await fetchKeysMaybe(fetchKeys, keys);

      const nextData: Record<string, AccountDatum> = {};
      keys.forEach((key, keyIndex) => {
        if (key) {
          const keyData = keysData[keyIndex];
          if (keyData) {
            nextData[getCacheKeyOfPublicKey(key)] = keyData.data;
          } else {
            nextData[getCacheKeyOfPublicKey(key)] = keyData;
          }
        }
      });
      startTransition(() => {
        setData(nextData);
      });
    },
    100
  );

  useEffect(() => {
    void (async () => {
      await fetchAndSetKeys(fetchKeys, keys)?.catch((e) => {
        onError(new SailCacheRefetchError(e, keys));
      });
    })();
  }, [keys, fetchAndSetKeys, fetchKeys, onError]);

  useAccountsSubscribe(keys);

  // refresh from the cache whenever the cache is updated
  useEffect(() => {
    return onBatchCache((e) => {
      if (keys.find((key) => key && e.hasKey(key))) {
        void fetchAndSetKeys(fetchKeys, keys)?.catch((e) => {
          onError(new SailCacheRefetchError(e, keys));
        });
      }
    });
  }, [keys, fetchAndSetKeys, fetchKeys, onError, onBatchCache]);

  // unload debounces when the component dismounts
  useEffect(() => {
    return () => {
      fetchAndSetKeys.cancel();
    };
  }, [fetchAndSetKeys]);

  return useMemo(() => {
    return keys.map((key) => {
      if (key) {
        return data[getCacheKeyOfPublicKey(key)];
      }

      return key;
    });
  }, [data, keys]);
}

useParsedAccountsData = <T>(
  keys: (PublicKey | null | undefined)[],
  parser: AccountParser<T>
): ParsedAccountDatum<T>[] => {
  const { onError } = useSail();
  const data = useAccountsData(keys);
  const [parsed, setParsed] = useState<Record<string, ParsedAccountDatum<T>>>(
    keys.reduce<Record<string, ParsedAccountDatum<T>>>((acc, k) => {
      if (k) {
        acc[getCacheKeyOfPublicKey(k)] = undefined;
      }

      return acc;
    }, {})
  );

  useEffect(() => {
    startTransition(() => {
      setParsed((prevParsed) => {
        const nextParsed = { ...prevParsed };
        zip(keys, data).forEach(([key, datum]) => {
          if (datum) {
            const key = getCacheKeyOfPublicKey(datum.accountId);
            const prevValue = prevParsed[key];
            if (
              prevValue &&
              prevValue.raw.length === datum.accountInfo.data.length &&
              prevValue.raw.equals(datum.accountInfo.data)
            ) {
              // preserve referential equality if buffers are equal
              return;
            }
            try {
              const parsed = parser(datum);
              nextParsed[key] = {
                ...datum,
                accountInfo: {
                  ...datum.accountInfo,
                  data: parsed,
                },
                raw: datum.accountInfo.data,
              };
            } catch (e) {
              onError(new SailAccountParseError(e, datum));
              nextParsed[key] = null;
              return;
            }
          }
          if (key && datum === null) {
            nextParsed[getCacheKeyOfPublicKey(key)] = null;
          }
        });
        return nextParsed;
      });
    });
  }, [data, keys, onError, parser]);

  return useMemo(() => {
    return keys.map((k) => {
      if (!k) {
        return k;
      }
      return parsed[getCacheKeyOfPublicKey(k)];
    });
  }, [keys, parsed]);
}

LanguageSelect: React.FC<LanguageSelectProps> = ({ value, onChange, className, langCodes, langLocal, recentLangs }) => {
    const [showOptions, setShowOptions] = useState(false);
    const [searchLangCodes, setSearchLangCodes] = useState<LangCodes>([]);
    const [searchText, setSearchText] = useState('');

    const searchInputElementRef = useRef<HTMLInputElement>(null);
    const languageSelectElementRef = useRef<HTMLDivElement>(null);
    const onMouseDownRef = useRef((e: MouseEvent) => {
        const path = e.composedPath?.();

        if (languageSelectElementRef.current && path.indexOf(languageSelectElementRef.current) >= 0) { return; }

        setShowOptions(false);
    });

    const handleOptionClick = useCallback((value: string) => {
        onChange(value);
        setShowOptions(false);
    }, [onChange]);

    const handleInputChange = useCallback(() => {
        if (!searchInputElementRef.current) { return; }

        setSearchText(searchInputElementRef.current.value);
    }, []);

    const handleOptionsShow = useCallback(() => {
        if (!searchInputElementRef.current) { return; }

        const tempElement = searchInputElementRef.current.parentElement?.parentElement?.parentElement;
        tempElement && (tempElement.scrollTop = 0);
        searchInputElementRef.current.focus();
        searchInputElementRef.current.select();
    }, []);

    useEffect(() => {
        startTransition(() => {
            setSearchLangCodes(langCodes.filter(v => v.name.includes(searchText)));
        });
    }, [langCodes, searchText]);

    useEffect(() => {
        showOptions ? window.addEventListener('mousedown', onMouseDownRef.current, true) : window.removeEventListener('mousedown', onMouseDownRef.current, true);
    }, [showOptions]);

    return (
        <div
            className={`language-select${className ? ' ' + className : ''}`}
            ref={languageSelectElementRef}
            tabIndex={-1}
            onClick={() => setShowOptions(v => !v)}
        >
            <span className='language-select__badge'>
                <span className='language-select__badge-text'>{langLocal[value] ?? langLocal['']}</span>
                <IconFont iconName='#icon-GoChevronDown' />
            </span>
            <SelectOptions
                show={showOptions}
                onShow={handleOptionsShow}
                onClick={e => e.stopPropagation()}
            >
                {recentLangs?.map((v) => (v in langLocal && <div
                    className='language-select__option'
                    key={'recent-' + v}
                    onClick={() => handleOptionClick(v)}
                >
                    {langLocal[v]}
                </div>))}
                <div className='language-select__search'>
                    <IconFont iconName='#icon-search' />
                    <div className='language-select__search-input'>
                        <input type='text' placeholder={getMessage('sentenceSearchLanguages')} onChange={handleInputChange} ref={searchInputElementRef} />
                    </div>
                </div>
                {searchLangCodes.length > 0 ? searchLangCodes.map((v) => (<div
                    className='language-select__option'
                    key={v['code']}
                    onClick={() => handleOptionClick(v['code'])}
                >
                    {v['name']}
                </div>)) : <div className='language-select__no-result'>
                    {getMessage('sentenceNoResult')}
                </div>}
            </SelectOptions>
        </div>
    );
}