-
Notifications
You must be signed in to change notification settings - Fork 42
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
100 changed files
with
3,429 additions
and
1,819 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,174 @@ | ||
| /* eslint-disable */ | ||
|
|
||
| /** | ||
| * These are types for things that are present in the upcoming React 18 release. | ||
| * | ||
| * Once React 18 is released they can just be moved to the main index file. | ||
| * | ||
| * To load the types declared here in an actual project, there are three ways. The easiest one, | ||
| * if your `tsconfig.json` already has a `"types"` array in the `"compilerOptions"` section, | ||
| * is to add `"react/next"` to the `"types"` array. | ||
| * | ||
| * Alternatively, a specific import syntax can to be used from a typescript file. | ||
| * This module does not exist in reality, which is why the {} is important: | ||
| * | ||
| * ```ts | ||
| * import {} from 'react/next' | ||
| * ``` | ||
| * | ||
| * It is also possible to include it through a triple-slash reference: | ||
| * | ||
| * ```ts | ||
| * /// <reference types="react/next" /> | ||
| * ``` | ||
| * | ||
| * Either the import or the reference only needs to appear once, anywhere in the project. | ||
| */ | ||
|
|
||
| // See https://github.com/facebook/react/blob/master/packages/react/src/React.js to see how the exports are declared, | ||
|
|
||
| import React = require('.'); | ||
|
|
||
| export {}; | ||
|
|
||
| declare const UNDEFINED_VOID_ONLY: unique symbol; | ||
| type VoidOrUndefinedOnly = void | { [UNDEFINED_VOID_ONLY]: never }; | ||
|
|
||
| declare module '.' { | ||
| export interface SuspenseProps { | ||
| /** | ||
| * The presence of this prop indicates that the content is computationally expensive to render. | ||
| * In other words, the tree is CPU bound and not I/O bound (e.g. due to fetching data). | ||
| * @see {@link https://github.com/facebook/react/pull/19936} | ||
| */ | ||
| unstable_expectedLoadTime?: number; | ||
| } | ||
|
|
||
| export type SuspenseListRevealOrder = 'forwards' | 'backwards' | 'together'; | ||
| export type SuspenseListTailMode = 'collapsed' | 'hidden'; | ||
|
|
||
| export interface SuspenseListCommonProps { | ||
| /** | ||
| * Note that SuspenseList require more than one child; | ||
| * it is a runtime warning to provide only a single child. | ||
| * | ||
| * It does, however, allow those children to be wrapped inside a single | ||
| * level of `<React.Fragment>`. | ||
| */ | ||
| children: ReactElement | Iterable<ReactElement>; | ||
| } | ||
|
|
||
| interface DirectionalSuspenseListProps extends SuspenseListCommonProps { | ||
| /** | ||
| * Defines the order in which the `SuspenseList` children should be revealed. | ||
| */ | ||
| revealOrder: 'forwards' | 'backwards'; | ||
| /** | ||
| * Dictates how unloaded items in a SuspenseList is shown. | ||
| * | ||
| * - By default, `SuspenseList` will show all fallbacks in the list. | ||
| * - `collapsed` shows only the next fallback in the list. | ||
| * - `hidden` doesn’t show any unloaded items. | ||
| */ | ||
| tail?: SuspenseListTailMode; | ||
| } | ||
|
|
||
| interface NonDirectionalSuspenseListProps extends SuspenseListCommonProps { | ||
| /** | ||
| * Defines the order in which the `SuspenseList` children should be revealed. | ||
| */ | ||
| revealOrder?: Exclude<SuspenseListRevealOrder, DirectionalSuspenseListProps['revealOrder']>; | ||
| /** | ||
| * The tail property is invalid when not using the `forwards` or `backwards` reveal orders. | ||
| */ | ||
| tail?: never; | ||
| } | ||
|
|
||
| export type SuspenseListProps = DirectionalSuspenseListProps | NonDirectionalSuspenseListProps; | ||
|
|
||
| /** | ||
| * `SuspenseList` helps coordinate many components that can suspend by orchestrating the order | ||
| * in which these components are revealed to the user. | ||
| * | ||
| * When multiple components need to fetch data, this data may arrive in an unpredictable order. | ||
| * However, if you wrap these items in a `SuspenseList`, React will not show an item in the list | ||
| * until previous items have been displayed (this behavior is adjustable). | ||
| * | ||
| * @see https://reactjs.org/docs/concurrent-mode-reference.html#suspenselist | ||
| * @see https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist | ||
| */ | ||
| export const SuspenseList: ExoticComponent<SuspenseListProps>; | ||
|
|
||
| // must be synchronous | ||
| export type TransitionFunction = () => VoidOrUndefinedOnly; | ||
| // strange definition to allow vscode to show documentation on the invocation | ||
| export interface TransitionStartFunction { | ||
| /** | ||
| * State updates caused inside the callback are allowed to be deferred. | ||
| * | ||
| * **If some state update causes a component to suspend, that state update should be wrapped in a transition.** | ||
| * | ||
| * @param callback A _synchronous_ function which causes state updates that can be deferred. | ||
| */ | ||
| (callback: TransitionFunction): void; | ||
| } | ||
|
|
||
| /** | ||
| * Returns a deferred version of the value that may “lag behind” it for at most `timeoutMs`. | ||
| * | ||
| * This is commonly used to keep the interface responsive when you have something that renders immediately | ||
| * based on user input and something that needs to wait for a data fetch. | ||
| * | ||
| * A good example of this is a text input. | ||
| * | ||
| * @param value The value that is going to be deferred | ||
| * | ||
| * @see https://reactjs.org/docs/concurrent-mode-reference.html#usedeferredvalue | ||
| */ | ||
| export function useDeferredValue<T>(value: T): T; | ||
|
|
||
| /** | ||
| * Allows components to avoid undesirable loading states by waiting for content to load | ||
| * before transitioning to the next screen. It also allows components to defer slower, | ||
| * data fetching updates until subsequent renders so that more crucial updates can be | ||
| * rendered immediately. | ||
| * | ||
| * The `useTransition` hook returns two values in an array. | ||
| * | ||
| * The first is boolean, React’s way of informing us whether we’re waiting for the transition to finish. | ||
| * The seconda is a function that takes a callback. We can use it to tell React which state we want to defer. | ||
| * | ||
| * **If some state update causes a component to suspend, that state update should be wrapped in a transition.** | ||
| * | ||
| * @param config An optional object with `timeoutMs` | ||
| * | ||
| * @see https://reactjs.org/docs/concurrent-mode-reference.html#usetransition | ||
| */ | ||
| export function useTransition(): [boolean, TransitionStartFunction]; | ||
|
|
||
| /** | ||
| * Similar to `useTransition` but allows uses where hooks are not available. | ||
| * | ||
| * @param callback A _synchronous_ function which causes state updates that can be deferred. | ||
| */ | ||
| export function startTransition(scope: TransitionFunction): void; | ||
|
|
||
| const opaqueIdentifierBranding: unique symbol; | ||
| /** | ||
| * WARNING: Don't use this as a `string`. | ||
| * | ||
| * This is an opaque type that is not supposed to type-check structurally. | ||
| * It is only valid if returned from React methods and passed to React e.g. `<button aria-labelledby={opaqueIdentifier} />` | ||
| */ | ||
| // We can't create a type that would be rejected for string concatenation or `.toString()` calls. | ||
| // So in order to not have to add `string | OpaqueIdentifier` to every react-dom host prop we intersect it with `string`. | ||
| type OpaqueIdentifier = string & { | ||
| readonly [opaqueIdentifierBranding]: unknown; | ||
| // While this would cause `const stringified: string = opaqueIdentifier.toString()` to not type-check it also adds completions while typing. | ||
| // It would also still allow string concatenation. | ||
| // Unsure which is better. Not type-checking or not suggesting. | ||
| // toString(): void; | ||
| }; | ||
|
|
||
| export function unstable_useOpaqueIdentifier(): OpaqueIdentifier; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,26 @@ | ||
| import { useCallback } from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
|
|
||
| import './Header.scss'; | ||
|
|
||
| export function AppHeader() { | ||
| const { i18n } = useTranslation(); | ||
|
|
||
| const changeLanguage = useCallback(() => { | ||
| if (i18n.language === 'en-US') { | ||
| document.body.classList.add('CJK'); | ||
| i18n.changeLanguage('zh-Hant'); | ||
| } else { | ||
| document.body.classList.remove('CJK'); | ||
| i18n.changeLanguage('en-US'); | ||
| } | ||
| }, [i18n]); | ||
|
|
||
| return ( | ||
| <header className="app-header is-shadow"> | ||
| <img className="app-header__logo" src="/assets/logo.svg" alt="Logo" width="36" height="36" /> | ||
| <span className="app-header__title">DevUI</span> | ||
| <span onClick={() => i18n.changeLanguage(i18n.language === 'en-US' ? 'zh-Hant' : 'en-US')}>{i18n.language}</span> | ||
| <span onClick={changeLanguage}>{i18n.language}</span> | ||
| </header> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.