react#ComponentType TypeScript Examples

Icons = () => {
  return (
    <Grid size={60}>
      {Object.keys(icons).map((iconName) => {
        //@ts-ignore
        const Icon: ComponentType = icons[iconName];
        return (
          <Tooltip title={iconName} placement="right">
            <Icon />
          </Tooltip>
        );
      })}
    </Grid>
  );
}

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>
            )
        }
    }
}

withSharedProps = <P extends SpinnersProps>(Component: ComponentType<P>) => {
  const Wrapper = (props: P) => {
    const {
      color, enabled, size, style, ...otherProps
    } = props;
    const componentProps = {
      ...otherProps,
      style: {
        color,
        overflow: 'visible',
        width: normalizeSize(size),
        ...style,
      },
    };

    if (!enabled) return null;

    return <Component {...componentProps as P} />;
  };

  Wrapper.defaultProps = defaultProps;

  return Wrapper;
}

function withComponentMappingContext<P extends MappedComponentProperties>(Component: React.ComponentType<P>): MappingContextFunction<P> {
    return function ComponentMappingContextComponent(props: P): JSX.Element {
        return (
          <ComponentMappingContext.Consumer>
            { (componentMapping: ComponentMapping) => <Component {...props} componentMapping={componentMapping} /> }
          </ComponentMappingContext.Consumer>
        );
    };
}

export function createComponentServer<C extends ComponentType<any>>({
  dataLazyId,
  defer,
  loader,
  moduleId,
  ssr,
}: {
  dataLazyId: string;
  defer: number;
  loader: ServerLoader<C>;
  moduleId: string;
  ssr: boolean;
}) {
  return (props: ComponentProps<C>) => {
    const Resolved = ssr ? load(moduleId, loader) : null;
    const { fallback } = useContext(LazySuspenseContext);
    const { crossOrigin, manifest } = getConfig();

    return (
      <>
        <input type="hidden" data-lazy-begin={dataLazyId} />
        {defer !== PHASE.LAZY &&
          getAssetUrlsFromId(manifest, moduleId)?.map(url => (
            <link
              key={url}
              rel={defer === PHASE.PAINT ? 'preload' : 'prefetch'}
              href={url}
              crossOrigin={crossOrigin}
              as="script"
            />
          ))}
        {Resolved ? <Resolved {...props} /> : fallback}
        <input type="hidden" data-lazy-end={dataLazyId} />
      </>
    );
  };
}

getWrappedComponentDisplayName = (
  component: ComponentType<any>
): string => {
  let componentDisplayName = 'UNDEFINED';
  const { displayName, name } = component;

  if (displayName) {
    componentDisplayName = displayName;
  }

  if (name) {
    componentDisplayName = name;
  }

  return `withRouter(${componentDisplayName})`;
}

withAuth0 = <P extends WithAuth0Props>(
  Component: ComponentType<P>
): ComponentType<Omit<P, keyof WithAuth0Props>> => {
  return function WithAuth(props): JSX.Element {
    return (
      <Auth0Context.Consumer>
        {(auth: Auth0ContextInterface): JSX.Element => (
          <Component {...(props as P)} auth0={auth} />
        )}
      </Auth0Context.Consumer>
    );
  };
}

SidebarDivider = styled('hr')(
  {
    height: 1,
    width: '100%',
    background: '#383838',
    border: 'none',
    margin: '12px 0px',
  },
  { name: 'BackstageSidebarDivider' },
) as ComponentType<ComponentProps<'hr'> & StyledComponentProps<'root'>>

export function makeList(Container: ComponentType, Item: ComponentType): LayoutComponent<Item[]> {
  return ({ children }): JSX.Element => (
    <Container>
      {children.map(([key, node]) => (
        <Item key={key}>{node}</Item>
      ))}
    </Container>
  )
}

function render(RootComponent: ComponentType) {
  ReactDOM.render(
    <Provider store={store}>
      <Suspense fallback={<div>on suspensing....</div>}>
        <RootComponent />
        <div></div>
      </Suspense>
    </Provider>,
    document.getElementById(name)
  )
}

/**
     * Load a component type synchronously from the cache
     * 
     * @param   component       The name/path of the component
     * @param   throwOnUnknown  Wether or not an error must be thrown if the component is not in the cache
     */
    public getPreLoadedType<P = ComponentProps<IContent>>(component: string, throwOnUnknown = true) : ComponentType<P> | null
    {
        if (this.isPreLoaded(component)) {
            const c = this.cache[component];
            if (!c.displayName) c.displayName = component;
            return c as ComponentType<P>;
        }
        if (throwOnUnknown) {
            throw new Error(`The component ${component} has not been pre-loaded!`);
        }
        return null;
    }

asyncComponent = (getComponent: () => Promise<ComponentType>) => {
  return class AsyncComponent extends React.Component {
    state = { Component: null as unknown as any };

    componentDidMount() {
      if (!this.state.Component) {
        getComponent().then((Component) => {
          this.setState({ Component });
        });
      }
    }

    render() {
      const { Component } = this.state;
      if (!Component) {
        return null;
      }
      return <Component {...this.props} />;
    }
  };
}

withProtectedRoute = <P extends {}>(Component: ComponentType<P>) =>
  function withProtectedRoute(props: P) {
    const { isAuthenticated, isLoading, loginUrl } = useAuth((state) => ({
      isAuthenticated: state,
      isLoading: state.isLoading,
      loginUrl: state.routes.loginUrl,
    }));
    return isLoading ? null : isAuthenticated ? <Component {...props} /> : onRedirecting(loginUrl);
  }

withFrontegg = <P extends {}>(AppComponent: ComponentType<P>) => (props: P) => {
  return (
    <FronteggProvider plugins={plugins} context={contextOptions}>
      <LegacyProvider contextOptions={legacyContextOptions}>
        <AppComponent {...props} />
      </LegacyProvider>
    </FronteggProvider>
  );
}

grabbable = function<P>(
	Component: ComponentType<P>
): FunctionComponent<P> {
	const WrappedComponent: FunctionComponent<P> = ({ ...props }) => {
		return (
			<Component
				{...props}
				interactive
				cursor="move"
			/>
		);
	};
	WrappedComponent.displayName = `grabbable(${Component.displayName || Component.name || 'Component'})`;

	return WrappedComponent;
}

/**
 * 解决 SVG 组件 ID 重复问题的高阶组件
 * @param Component 需要传入的 SVG 组件
 * @returns 注入随机 ID 后的 SVG 组件
 */
export default function InjectRandomIds<P>(
  Component: ComponentType<P>
): ComponentType<P & RefAttributes<SVGSVGElement>> {
  return function WrapperComponent(props) {
    const componentRef = useRef<SVGSVGElement>();
    useLayoutEffect(() => {
      if (!componentRef.current) return;
      const elementsWithId = componentRef.current.querySelectorAll('svg [id]');
      const elementsWithFill = componentRef.current.querySelectorAll('svg [fill^=url\\(\\#]');
      elementsWithId.forEach((element) => {
        const id = element.getAttribute('id');
        const elementsWithFillSameId = filter(elementsWithFill, (item) => item.getAttribute('fill') === `url(#${id})`);
        elementsWithFillSameId.forEach((node) => {
          if (node) {
            const newId = `${id}__${uniqueId()}`;
            element.setAttribute('id', newId);
            node.setAttribute('fill', `url(#${newId})`);
          }
        });
      });
    }, []);
    return React.createElement(Component, { ...props, ref: componentRef });
  };
}

/**
 * Component decorator that enables analytics services and sets a correct document title
 */
function pageOf(component: React.ComponentType<any>, opts: { pageTitle: string }) {
  return page => {
    ApplicationServices.get().analyticsService.onPageLoad({
      pagePath: page.location.key || "/unknown",
    })
    document["title"] = opts.pageTitle
    const Component = component as ExoticComponent
    return <Component {...(page as any)} />
  }
}

HitElement: ComponentType<{ hit: Hit<BasicDoc> }> = ({ hit }) => (
  <ListItem
    button
    component={GatsbyLink}
    to={hit.path}
    className={classes.hit}
    key={hit.objectID}
  >
    <Typography className={classes.title} variant="h6" component="span">
      <Highlight attribute="title" hit={hit} />
      ()
    </Typography>
    <Typography variant="body2" color="textSecondary" component="span">
      <Highlight attribute="excerpt" hit={hit} />
    </Typography>
    <Divider />
  </ListItem>
)

Select: React.FC<SelectProps> = ({ placeholder, options, values, setValues, handleChange, handleTouch }) => {
	const onSortEnd = ({ oldIndex, newIndex }) => {
		const newValue = arrayMove(values, oldIndex, newIndex)
		setValues(newValue)
	}
	return <SortableSelect useDragHandle axis='xy' distance={4} getHelperDimensions={({ node }) => node.getBoundingClientRect()} onSortEnd={onSortEnd}
	// select props
		styles={{
			control: (provided) => {
				return { ...provided, border: 'none' }
			},
			option: (provided) => {
				return { ...provided, cursor: 'pointer', ':hover': {
					opacity: '0.7'
				} }
			}
		}} isMulti className='border border-grey-light dark:border-transparent rounded' classNamePrefix='outline-none text-black dark:bg-very-black dark:text-white cursor-pointer ' placeholder={placeholder || '선택해주세요.'} options={options} onChange={handleChange} onBlur={handleTouch} noOptionsMessage={() => '검색 결과가 없습니다.'}
		value={values.map(el => ({ label: el, value: el}))}
		components={{
			MultiValue: SortableMultiValue as ComponentType<MultiValueProps<OptionTypeBase, GroupTypeBase<{ label: string, value: string}>>>,
			MultiValueLabel: SortableMultiValueLabel,
		}}
		closeMenuOnSelect={false}
	/>
}

componentMap: Record<PlotType, ComponentType<any>> = {
  [PlotType.CONFUSION_MATRIX]: ConfusionMatrix,
  [PlotType.MARKDOWN]: MarkdownViewer,
  [PlotType.ROC]: ROCCurve,
  [PlotType.TABLE]: PagedTable,
  [PlotType.TENSORBOARD]: TensorboardViewer,
  [PlotType.VISUALIZATION_CREATOR]: VisualizationCreator,
  [PlotType.WEB_APP]: HTMLViewer,
}

WithAllProviders: (
  opts: AuthOptions,
  includeSnackbar?: boolean
) => ComponentType =
  (opts: AuthOptions, includeSnackbar?: boolean) =>
  ({ children }) => {
    return (
      <I18nProvider i18n={i18n} forceRenderOnLocaleChange={false}>
        <AuthContext.Provider
          value={{
            user: undefined,
            isAdmin: false,
            isPatron: false,
            loading: false,
            error: undefined,
            ...opts,
          }}
        >
          {includeSnackbar ? (
            <SnackbarProvider>{children}</SnackbarProvider>
          ) : (
            children
          )}
        </AuthContext.Provider>
      </I18nProvider>
    );
  }

function withSuspense<P extends string | number | object>(
  WrappedComponent: ComponentType<P>,
  fallback: SuspenseProps["fallback"] = null
) {
  function ComponentWithSuspense(props: P) {
    return (
      <Suspense fallback={fallback}>
        <WrappedComponent {...(props as any)} />
      </Suspense>
    );
  }

  return ComponentWithSuspense;
}

WithErrorBoundary = (errorBoundaryProps: ErrorBoundaryProps = {}) =>
  function <C extends ComponentType>(ToWrapComponent: C) {
    // ToWrapComponent may be class component or Function
    const componentDisplayName = ToWrapComponent.displayName || ToWrapComponent.name || 'unknown'
    const wrapped: FC = (props: any) => (
      <ErrorBoundary {...errorBoundaryProps}>
        <ToWrapComponent {...props} />
      </ErrorBoundary>
    )
    wrapped.displayName = `MitoErrorBoundary(${componentDisplayName})`
    return wrapped as C
  }

export function authorizedOnlyHoc<P>(
  Component: ComponentType<P>,
  redirectPath = "/login"
) {
  return (props: P) => {
    const [isAuthorized, setIsAuthorized] = useState(CheckState.initiated);

    useEffect(() => {
      //https://medium.com/javascript-in-plain-english/how-to-use-async-function-in-react-hook-useeffect-typescript-js-6204a788a435
      (async () => {
        const isAuthorized = await isLoggedIn();
        setIsAuthorized(isAuthorized ? CheckState.succeed : CheckState.failed);
      })();
    }, []);

    if (isAuthorized === CheckState.initiated) {
      return <div>Checking if user is authorized</div>;
    }

    if (isAuthorized === CheckState.failed) {
      return <Redirect to={redirectPath} />;
    }

    return <Component {...props} />;
  };
}

TextFilter: FC<TextFilterProps> = ({ value, onChange, options }) => {
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value);

  const icon = options?.icon as string;
  const Icon = icon
    ? dynamic(
        () => import('react-icons/all').then((bundle) => bundle[icon]) as Promise<ComponentType>,
        {
          ssr: false,
        },
      )
    : () => null;

  return (
    <div className={styles.textInputWrapper}>
      <input
        className={styles.textInput}
        placeholder={options?.placeholder}
        type="text"
        value={value as string}
        onChange={handleChange}
      />
      <Icon />
    </div>
  );
}

withDefaultLayout = (Component: ComponentType): FunctionComponent<Props> => {
    const WrappedComponent: FunctionComponent = (props: Props) => {
        const theme = useTheme();
        return (
            <Container
                maxW={theme.breakpoints.lg}
                mx="auto"
                px={4}
                mb={6}
            >
                <Navbar />
                <Box mb={[2, 0]} />
                <hr />
                <Component {...props} />
                <Footer />
            </Container>
        );
    };
    return WrappedComponent;
}

onlyOn =
  (environment: Environment) =>
  <T extends ComponentType<any>>(component: T): T | (() => null) => {
    if (getEnvironment() === environment) {
      return component;
    }

    return () => null;
  }

function render(App: ComponentType) {
  root.render(
    <StrictMode>
      <RecoilRoot>
        <HelmetProvider>
          <ThemeProvider>
            <App />
          </ThemeProvider>
        </HelmetProvider>
      </RecoilRoot>
    </StrictMode>,
  );
}

connectWithCleanUp = <
  TStateProps extends {} = {},
  TDispatchProps = {},
  TOwnProps = {},
  State = {},
  TSelector extends object = {},
  Statics = {}
>(
  mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, State>,
  mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>,
  stateSelector: StateSelector<TSelector>
) => (Component: ComponentType<any>) => {
  const ConnectedComponent = connect(
    mapStateToProps,
    mapDispatchToProps
    // @ts-ignore
  )(Component);

  const ConnectedComponentWithCleanUp: FunctionComponent = props => {
    const dispatch = useDispatch();
    useEffect(() => {
      return function cleanUp() {
        dispatch(cleanUpAction({ stateSelector }));
      };
    }, []);
    // @ts-ignore
    return <ConnectedComponent {...props} />;
  };

  ConnectedComponentWithCleanUp.displayName = `ConnectWithCleanUp(${ConnectedComponent.displayName})`;
  hoistNonReactStatics(ConnectedComponentWithCleanUp, Component);
  type Hoisted = typeof ConnectedComponentWithCleanUp & Statics;

  return ConnectedComponentWithCleanUp as Hoisted;
}