react#JSXElementConstructor TypeScript Examples

The following examples show how to use react#JSXElementConstructor. 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: List.tsx    From ra-enterprise-demo with MIT License 6 votes vote down vote up 
hasChildren = (element, type, props): boolean => {
    if (!React.isValidElement(element)) return false;

    let hasChildrenOfType = false;

    React.Children.map(element, child => {
        if (hasChildrenOfType) return;
        if (!React.isValidElement<{ children?: ReactNode }>(child)) return;

        if (
            (child.type as JSXElementConstructor<any>).name === type &&
            Object.keys(props).every(propName =>
                elementHasProp(child, propName, props[propName])
            )
        ) {
            hasChildrenOfType = true;
            return;
        }

        hasChildrenOfType = hasChildren(child.props.children, type, props);
    });

    return hasChildrenOfType;
}
Example #2
Source File: AsyncSelect.tsx    From one-platform with MIT License 5 votes vote down vote up 
AsyncSelect = ({
  render,
  onSelect,
  customFilter,
  onTypeaheadInputChanged,
  ...selectProps
}: Props): JSX.Element => {
  const [isOpen, setIsOpen] = useToggle();
  const [options, setOptions] = useState<ReactElement<any, string | JSXElementConstructor<any>>[]>(
    []
  );

  const [typeAhead, setTypeAhead] = useState('');

  useEffect(() => {
    if (!isOpen) {
      setTypeAhead('');
      setOptions([]);
      return;
    }

    setOptions(LOADING);
    render(typeAhead)
      .then((loadedOptions) => {
        setOptions(loadedOptions);
      })
      .catch(() => {
        setOptions([
          <SelectOption
            key="option-error"
            value="Failed to fetch request"
            isPlaceholder
            isDisabled
          />,
        ]);
      });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [typeAhead, isOpen]);

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const onPfeSelect = (...args: any) => {
    // eslint-disable-next-line prefer-spread
    onSelect?.apply(null, args);
    setIsOpen.off();
  };

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const onPfeTypeAheadChange = (value: string) => {
    setTypeAhead(value);
    // eslint-disable-next-line prefer-spread
    if (onTypeaheadInputChanged) onTypeaheadInputChanged(value);
  };

  const onFilter = (a: ChangeEvent<HTMLInputElement> | null, value: string) => {
    if (!value) {
      return options;
    }

    if (!customFilter) return options;

    return options.filter((child) => customFilter(child));
  };

  return (
    <PfeSelect
      {...selectProps}
      onSelect={onPfeSelect}
      isOpen={isOpen}
      onToggle={setIsOpen.toggle}
      onTypeaheadInputChanged={onPfeTypeAheadChange}
      onFilter={customFilter && onFilter}
    >
      {options}
    </PfeSelect>
  );
}
Example #3
Source File: Router.tsx    From one-platform with MIT License 5 votes vote down vote up 
Router = (): ReactElement<any, string | JSXElementConstructor<any>> | null => {
  return useRoutes(routes);
}
Example #4
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 };
}
Example #5
Source File: find-child-by-type.ts    From mantine with MIT License 5 votes vote down vote up 
export function findChildByType(children: ReactNode, type: JSXElementConstructor<any>) {
  return (Children.toArray(children) as ReactElement[]).find((item) => item.type === type);
}
Example #6
Source File: Text.tsx    From nextjs-bigcommerce-starter with MIT License 5 votes vote down vote up 
Text: FunctionComponent<Props> = ({
  style,
  className = '',
  variant = 'body',
  children,
  html,
}) => {
  const componentsMap: {
    [P in Variant]: React.ComponentType<any> | string
  } = {
    body: 'div',
    heading: 'h1',
    pageHeading: 'h1',
    sectionHeading: 'h2',
  }

  const Component:
    | JSXElementConstructor<any>
    | React.ReactElement<any>
    | React.ComponentType<any>
    | string = componentsMap![variant!]

  const htmlContentProps = html
    ? {
        dangerouslySetInnerHTML: { __html: html },
      }
    : {}

  return (
    <Component
      className={cn(
        s.root,
        {
          [s.body]: variant === 'body',
          [s.heading]: variant === 'heading',
          [s.pageHeading]: variant === 'pageHeading',
          [s.sectionHeading]: variant === 'sectionHeading',
        },
        className
      )}
      style={style}
      {...htmlContentProps}
    >
      {children}
    </Component>
  )
}
Example #7
Source File: filter-children-by-type.ts    From mantine with MIT License 4 votes vote down vote up 
export function filterChildrenByType(
  children: ReactNode,
  type: JSXElementConstructor<any> | JSXElementConstructor<any>[]
) {
  return (Children.toArray(children) as ReactElement[]).filter((item) =>
    Array.isArray(type) ? type.some((component) => component === item.type) : item.type === type
  );
}