TypeScript react.createContext函數代碼示例

import * as React from 'react'
import { ChartConfig } from 'charts/ChartConfig'
import { ChartView } from 'charts/ChartView'
import { VNode } from 'charts/Util'

export interface ChartViewContextType {
    chart: ChartConfig
    chartView: ChartView
    baseFontSize: number
    isStatic: boolean
    addPopup: (vnode: VNode) => void,
    removePopup: (vnode: VNode) => void
}

const ChartViewContext: React.Context<ChartViewContextType> = React.createContext({}) as any
export { ChartViewContext }

/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License;
 * you may not use this file except in compliance with the Elastic License.
 */

import { createContext } from 'react';

interface UMRefreshContext {
  lastRefresh: number;
}

const defaultContext: UMRefreshContext = {
  lastRefresh: 0,
};

export const UptimeRefreshContext = createContext(defaultContext);

import { IndexPattern } from 'ui/index_patterns';

export interface KibanaContextValue {
  combinedQuery: any;
  currentIndexPattern: IndexPattern;
  currentSavedSearch: any;
  indexPatterns: any;
  kbnBaseUrl: string;
  kibanaConfig: any;
}

export type SavedSearchQuery = object;

// Because we're only getting the actual contextvalue within a wrapping angular component,
// we need to initialize here with `null` because TypeScript doesn't allow createContext()
// without a default value. The nullable union type takes care of allowing
// the actual required type and `null`.
export type NullableKibanaContextValue = KibanaContextValue | null;
export const KibanaContext = React.createContext<NullableKibanaContextValue>(null);

export function isKibanaContext(arg: any): arg is KibanaContextValue {
  return (
    arg.combinedQuery !== undefined &&
    arg.currentIndexPattern !== undefined &&
    arg.currentSavedSearch !== undefined &&
    arg.indexPatterns !== undefined &&
    typeof arg.kbnBaseUrl === 'string' &&
    arg.kibanaConfig !== undefined
  );
}

export const defaultFullScreenState: FullScreenNavState = {
  initial: true,
  visibleComponentLeft: '',
  visibleComponentRight: '',
  inventoryItems: null,
  equippedItems: null,
  containerIdToDrawerInfo: {},
  stackGroupIdToItemIDs: {},
  myTradeItems: null,
  myTradeState: SecureTradeState.None,
  tabsLeft: defaultTabsLeft,
  tabsRight: defaultTabsRight,
  invBodyDimensions: { width: 0, height: 0 },
};

export const FullScreenContext = React.createContext(defaultFullScreenState);

export function requestUIKeydown() {
  const shouldFullscreenListen = false;
  events.fire('hudfullscreen-shouldListenKeydown', shouldFullscreenListen);
}

export function releaseUIKeydown() {
  const shouldFullscreenListen = true;
  events.fire('hudfullscreen-shouldListenKeydown', shouldFullscreenListen);
}

export function isRightOrLeftItem(gearSlots: GearSlotDefRef.Fragment[]) {
  if (gearSlots.length === 1) {
    const firstGearSlotId = gearSlots[0].id;
    return _.includes(firstGearSlotId.toLowerCase(), 'right') ||

  refetch: () => {},
  statusCode: 0,
};

export const defaultContextState: HUDContextState = {
  skills: {
    ...defaultQueryResultInfo,
    data: [],
  },
  itemDefRefs: {
    ...defaultQueryResultInfo,
    data: [],
  },
};

export const HUDContext = React.createContext(defaultContextState);

export const skillsQuery = `
  {
    myCharacter {
      skills {
        id
        name
        icon
        notes
        tracks
      }
    }
  }
`;

  updateCurrentDocument(sender?: Partial<PubDocument>): void;
  adjustObjectLayer(sender: LayerMutationDelta): void;
  setStartModalVisible(visible: boolean): void;
  setNewAccountModalVisible(visible: boolean): void;
  setLoginModalVisible(visible: boolean): void;
  setAboutModalVisible(visible: boolean): void;
  setCurrentDocument: React.Dispatch<PubDocument | null>;
}

export interface PubAppState {
  actions: PubActions;
  currentDocument: PubDocument | null;
  clipboardContents: PubShape | null;
  dataLoaded: boolean;
  documents: Array<PubDocument>;
  layersPanelVisible: boolean;
  selectedObject: PubShape | null;
  user: PubUser | null;
  zoom: number;
  startModalVisible: boolean;
  loginModalVisible: boolean;
  newAccountModalVisible: boolean;
  openDocumentModalVisible: boolean;
  aboutModalVisible: boolean;
  newDocumentModalVisible: boolean;
}

export const StateContext = React.createContext<PubAppState>(
  null as PubAppState
);

import { createContext } from "react";

export interface IMessage {
  text: string;
  onUndo?: () => void;
}
export const MessageContext = createContext(undefined);

export * from "./MessageManager";
export default MessageContext.Consumer;

import * as React from 'react'
import { Admin } from './Admin'

const AdminAppContext: React.Context<{ admin: Admin }> = React.createContext({}) as any
export { AdminAppContext }

/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License;
 * you may not use this file except in compliance with the Elastic License.
 */

import { ApolloClient } from 'apollo-client';
import { createContext, useContext } from 'react';

/**
 * This is a temporary provider and hook for use with hooks until react-apollo
 * has upgraded to the new-style `createContext` api.
 */

export const ApolloClientContext = createContext<ApolloClient<{}> | undefined>(undefined);

export const useApolloClient = () => {
  return useContext(ApolloClientContext);
};

import Kefir, { Pool } from 'kefir';
import { Action } from 'redux';
import { createContext } from 'react';

const { Provider, Consumer } = createContext<Pool<Action, Error>>(Kefir.pool());

export { Provider, Consumer };