Add warning when font name not found in family

This commit is contained in:
Brent Vatne
2021-03-11 21:40:55 -08:00
parent b09b31e0e5
commit 52897364c9
4 changed files with 33 additions and 13 deletions

View File

@@ -1,6 +1,6 @@
import React, { ComponentClass } from "react";
import { TextProps, TouchableHighlightProps, ViewProps, OpaqueColorValue, TextStyle, ViewStyle } from "react-native";
export { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE } from "./vendor/react-native-vector-icons/lib/create-icon-set";
export { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE, } from "./vendor/react-native-vector-icons/lib/create-icon-set";
export interface IconProps<GLYPHS extends string> extends TextProps {
/**
* Size of the icon, can also be passed as fontSize in the style object.

View File

@@ -1,9 +1,9 @@
import * as Font from "expo-font";
import React from "react";
import { Text } from "react-native";
import { Text, } from "react-native";
import createIconSet from "./vendor/react-native-vector-icons/lib/create-icon-set";
import createIconButtonComponent from "./vendor/react-native-vector-icons/lib/icon-button";
export { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE } from "./vendor/react-native-vector-icons/lib/create-icon-set";
export { DEFAULT_ICON_COLOR, DEFAULT_ICON_SIZE, } from "./vendor/react-native-vector-icons/lib/create-icon-set";
export default function (glyphMap, fontName, expoAssetId, fontStyle) {
var _a;
const font = { [fontName]: expoAssetId };
@@ -13,7 +13,7 @@ export default function (glyphMap, fontName, expoAssetId, fontStyle) {
super(...arguments);
this._mounted = false;
this.state = {
fontIsLoaded: Font.isLoaded(fontName)
fontIsLoaded: Font.isLoaded(fontName),
};
}
async componentDidMount() {
@@ -32,10 +32,13 @@ export default function (glyphMap, fontName, expoAssetId, fontStyle) {
}
}
render() {
if (__DEV__ && this.props.name && !(this.props.name in glyphMap)) {
console.warn(`"${this.props.name}" is not a valid icon name for family "${fontName}"`);
}
if (!this.state.fontIsLoaded) {
return <Text />;
}
return (<RNVIconComponent ref={view => {
return (<RNVIconComponent ref={(view) => {
this._icon = view;
}} {...this.props}/>);
}

File diff suppressed because one or more lines are too long

View File

@@ -1,13 +1,21 @@
import * as Font from "expo-font";
import React, { ComponentClass } from "react";
import { Text, TextProps, TouchableHighlightProps, ViewProps, OpaqueColorValue, TextStyle, ViewStyle } from "react-native";
import {
Text,
TextProps,
TouchableHighlightProps,
ViewProps,
OpaqueColorValue,
TextStyle,
ViewStyle,
} from "react-native";
import createIconSet from "./vendor/react-native-vector-icons/lib/create-icon-set";
import createIconButtonComponent from "./vendor/react-native-vector-icons/lib/icon-button";
export {
DEFAULT_ICON_COLOR,
DEFAULT_ICON_SIZE
DEFAULT_ICON_SIZE,
} from "./vendor/react-native-vector-icons/lib/create-icon-set";
export interface IconProps<GLYPHS extends string> extends TextProps {
@@ -34,7 +42,10 @@ export interface IconProps<GLYPHS extends string> extends TextProps {
color?: string | OpaqueColorValue;
}
export interface IconButtonProps<GLYPHS extends string> extends IconProps<GLYPHS>, ViewProps, TouchableHighlightProps {
export interface IconButtonProps<GLYPHS extends string>
extends IconProps<GLYPHS>,
ViewProps,
TouchableHighlightProps {
/**
* Text and icon color
* Use iconStyle or nest a Text component if you need different colors.
@@ -76,7 +87,7 @@ export interface IconButtonProps<GLYPHS extends string> extends IconProps<GLYPHS
backgroundColor?: string | OpaqueColorValue;
}
export type GlyphMap<G extends string> = { [K in G]: number | string }
export type GlyphMap<G extends string> = { [K in G]: number | string };
export interface Icon<G extends string, FN extends string> {
defaultProps: any;
@@ -89,7 +100,7 @@ export interface Icon<G extends string, FN extends string> {
new (props: IconProps<G>): React.Component<IconProps<G>>;
}
export default function<G extends string, FN extends string>(
export default function <G extends string, FN extends string>(
glyphMap: GlyphMap<G>,
fontName: FN,
expoAssetId,
@@ -111,7 +122,7 @@ export default function<G extends string, FN extends string>(
_icon?: any;
state = {
fontIsLoaded: Font.isLoaded(fontName)
fontIsLoaded: Font.isLoaded(fontName),
};
async componentDidMount() {
@@ -133,13 +144,19 @@ export default function<G extends string, FN extends string>(
}
render() {
if (__DEV__ && this.props.name && !(this.props.name in glyphMap)) {
console.warn(
`"${this.props.name}" is not a valid icon name for family "${fontName}"`
);
}
if (!this.state.fontIsLoaded) {
return <Text />;
}
return (
<RNVIconComponent
ref={view => {
ref={(view) => {
this._icon = view;
}}
{...this.props}