react#ComponentClass TypeScript Examples

The following examples show how to use react#ComponentClass. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: BaseContainer.tsx    From generator-earth with MIT License 6 votes vote down vote up 
contextHoc: (Comp: ComponentType) => ComponentType = function contextHoc(Comp) {
    // class组件
    if ( Comp.prototype.render ) {
        let C = Comp as ComponentClass;
        C.contextType = BaseContext;
        return C;
    // function组件
    } else {
        let fc = Comp as FC
        return function(props) {
            return (
                <BaseContext.Consumer>
                { (context) => fc(props, context) }
                </BaseContext.Consumer>
            )
        }
    }
}
Example #2
Source File: app.ts    From grafana-chinese with Apache License 2.0 6 votes vote down vote up 
/**
   * Set the component displayed under:
   *   /a/${plugin-id}/*
   */
  setRootPage(root: ComponentClass<AppRootProps<T>>, rootNav?: NavModel) {
    this.root = root;
    this.rootNav = rootNav;
    return this;
  }
Example #3
Source File: PreviewContainer.tsx    From openchakra with MIT License 6 votes vote down vote up 
PreviewContainer: React.FC<{
  component: IComponent
  type: string | FunctionComponent<any> | ComponentClass<any, any>
  enableVisualHelper?: boolean
  isBoxWrapped?: boolean
}> = ({
  component,
  type,
  enableVisualHelper,
  isBoxWrapped,
  ...forwardedProps
}) => {
  const { props, ref } = useInteractive(component, enableVisualHelper)

  const children = React.createElement(type, {
    ...props,
    ...forwardedProps,
    ref,
  })

  if (isBoxWrapped) {
    let boxProps: any = {}

    return (
      <Box {...boxProps} ref={ref}>
        {children}
      </Box>
    )
  }

  return children
}
Example #4
Source File: module.ts    From grafana-starter-app with Apache License 2.0 6 votes vote down vote up 
plugin = new AppPlugin<ExampleAppSettings>()
  .setRootPage((ExampleRootPage as unknown) as ComponentClass<AppRootProps>)
  .addConfigPage({
    title: 'Page 1',
    icon: 'info-circle',
    body: ExamplePage1,
    id: 'page1',
  })
  .addConfigPage({
    title: 'Page 2',
    icon: 'user',
    body: ExamplePage2,
    id: 'page2',
  })
Example #5
Source File: react-utils.ts    From utopia with MIT License 6 votes vote down vote up 
static create<P>(
    type: ComponentClass<P>,
    props?: { key: Key } & Attributes & P,
    ...children: ReactNode[]
  ): ReactElement<P>
Example #6
Source File: ErrorBoundary.tsx    From backstage with Apache License 2.0 6 votes vote down vote up 
ErrorBoundary: ComponentClass<
  ErrorBoundaryProps,
  State
> = class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = {
      error: undefined,
      errorInfo: undefined,
    };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    // eslint-disable-next-line no-console
    console.error(`ErrorBoundary, error: ${error}, info: ${errorInfo}`);
    this.setState({ error, errorInfo });
  }

  render() {
    const { slackChannel, children } = this.props;
    const { error } = this.state;

    if (!error) {
      return children;
    }

    return (
      <ErrorPanel title="Something Went Wrong" error={error}>
        <SlackLink slackChannel={slackChannel} />
      </ErrorPanel>
    );
  }
}
Example #7
Source File: Widget.ts    From hive with MIT License 5 votes vote down vote up 
dialogEditComponent: ComponentClass<WidgetProps<Model>> = DialogEditComponent;
Example #8
Source File: WithChildrenPreviewContainer.tsx    From openchakra with MIT License 5 votes vote down vote up 
WithChildrenPreviewContainer: React.FC<{
  component: IComponent
  type: string | FunctionComponent<any> | ComponentClass<any, any>
  enableVisualHelper?: boolean
  isBoxWrapped?: boolean
}> = ({
  component,
  type,
  enableVisualHelper = false,
  isBoxWrapped,
  ...forwardedProps
}) => {
  const { drop, isOver } = useDropComponent(component.id)
  const { props, ref } = useInteractive(component, enableVisualHelper)
  const propsElement = { ...props, ...forwardedProps, pos: 'relative' }

  if (!isBoxWrapped) {
    propsElement.ref = drop(ref)
  }

  if (isOver) {
    propsElement.bg = 'teal.50'
  }

  const children = React.createElement(
    type,
    propsElement,
    component.children.map((key: string) => (
      <ComponentPreview key={key} componentName={key} />
    )),
  )

  if (isBoxWrapped) {
    let boxProps: any = {
      display: 'inline',
    }

    return (
      <Box {...boxProps} ref={drop(ref)}>
        {children}
      </Box>
    )
  }

  return children
}
Example #9
Source File: app.ts    From grafana-chinese with Apache License 2.0 5 votes vote down vote up 
// Content under: /a/${plugin-id}/*
  root?: ComponentClass<AppRootProps<T>>;
Example #10
Source File: VirtualList.d.ts    From taro3-virtual-list with MIT License 5 votes vote down vote up 
VirtualList: ComponentClass<VirtualListProps>
Example #11
Source File: Widget.ts    From hive with MIT License 5 votes vote down vote up 
bigComponent: ComponentClass<WidgetProps<Model>> = BigComponent;
Example #12
Source File: BaseContainer.tsx    From generator-earth with MIT License 5 votes vote down vote up 
contextHoc4CC: <T>(CompClass: T) => T = function<ComponentClass>(CompClass: ComponentClass) {
    // @ts-ignore
    CompClass.contextType = BaseContext;
    return CompClass;
}
Example #13
Source File: index.tsx    From hive with MIT License 5 votes vote down vote up 
function inject<P extends I, I, C>(component: JSXElementConstructor<P> & C, storeMap: StoreMap<I>) {
    const observ = observer(component);
    const injected: any = mobxInject(({ store }: GlobalStoreInjected) => storeMap(store))(observ);

    type Props = JSX.LibraryManagedAttributes<C, Omit<P, keyof I>>;
    return injected as ComponentClass<Props> & { wrappedComponent: JSXElementConstructor<P> & C };
}