Skip to content

Commit

Permalink
fix: react does not recognize the duotoneColor prop on a DOM element. C…
Browse files Browse the repository at this point in the history 
…loses #65
  • Loading branch information
@mrkpatchaa
mrkpatchaa committed Jan 6, 2025
1 parent c3c840d commit 7e81503
Show file tree
Hide file tree
Showing 11 changed files with 610 additions and 418 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@ Icon components accept all props that you can pass to a normal SVG element, incl
- **title?**: `string` – Accessibility label
- **titleId?**: `string` – Accessibility label ID
- **testID?**: `string` – testID for tests
- **duotoneColor?**: `string` – Duotone fill color. Can be any CSS color string, including `hex`, `rgb`, `rgba`, `hsl`, `hsla`, named colors. Default value to black.
- **duotoneOpacity?**: `number` – The opacity of the duotoneColor. Default value to 0.2.
- **duotoneColor?**: `string` – Duotone fill color. Can be any CSS color string, including `hex`, `rgb`, `rgba`, `hsl`, `hsla`, named colors. Default value to black. ⚠️ Use `duototocolor` when importing the weight icon directly, `import Star from 'phosphor-react-native/src/duotone/Star'`.;
- **duotoneOpacity?**: `number` – The opacity of the duotoneColor. Default value to 0.2. ⚠️ Use `duotoneopacity` when importing the weight icon directly, `import Star from 'phosphor-react-native/src/duotone/Star'`.;

### Context

Expand Down
165 changes: 1 addition & 164 deletions example/app/(tabs)/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,164 +1 @@
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable @typescript-eslint/no-explicit-any */

import { useCallback, useState, useMemo } from 'react';
import {
StyleSheet,
View,
Text,
FlatList,
StatusBar,
Image,
TouchableOpacity,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import * as IconPack from '@/components/icons';
import PhosphorLogo from '@/assets/images/phosphor-mark-tight-yellow.png';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { IconContext, ...Icons } = IconPack;

const weights = ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'];

export default function HomeScreen() {
const [weightIdx, setWeightIdx] = useState(2);
const [iconColor, setIconColor] = useState(undefined);
const [mirrorActive, setMirrorActive] = useState(false);

const weight: IconPack.IconWeight = useMemo(
() => weights[weightIdx] as any,
[weightIdx]
);

const handleChangeWeight = useCallback(() => {
setWeightIdx((weightIdx + 1) % weights.length);
}, [weightIdx]);

const handleChangeIconColor = useCallback(() => {
setIconColor(`#${Math.floor(Math.random() * 16777215).toString(16)}`);
}, []);

const handleToggleMirror = useCallback(() => {
setMirrorActive(!mirrorActive);
}, [mirrorActive]);

return (
<View style={styles.rootView}>
<StatusBar barStyle="light-content" />

<SafeAreaView style={styles.headerContainer}>
<View style={styles.header}>
<Image source={PhosphorLogo} style={styles.logoImage} />
<View
style={{
flex: 1,
alignItems: 'flex-start',
justifyContent: 'center',
paddingStart: 10,
}}
>
<Text style={styles.headerText}>Phosphor React Native</Text>
<Text
style={{
color: '#fff',
opacity: 0.8,
textTransform: 'capitalize',
}}
>
{weight}
</Text>
</View>
<TouchableOpacity
style={styles.weightSelect}
onPress={handleChangeIconColor}
>
<IconPack.Palette color="#FFF" weight={weight} />
</TouchableOpacity>
<TouchableOpacity
style={styles.weightSelect}
onPress={handleChangeWeight}
>
<IconPack.PencilLine color="#FFF" weight={weight} />
</TouchableOpacity>
<TouchableOpacity
style={styles.weightSelect}
onPress={handleToggleMirror}
>
<IconPack.Swap color="#FFF" weight={weight} />
</TouchableOpacity>
</View>
</SafeAreaView>
<FlatList
style={styles.scrollView}
contentContainerStyle={styles.main}
data={Object.entries(Icons).filter(([, Icon]) => !!Icon) as any[]}
keyExtractor={(item) => item[0]}
numColumns={3}
renderItem={({ item: [name, Icon] }) => (
<View style={styles.iconItem}>
<Icon
size={48}
weight={weight}
mirrored={mirrorActive}
color={iconColor}
/>
<Text style={styles.iconName}>{name}</Text>
</View>
)}
/>
</View>
);
}

const styles = StyleSheet.create({
rootView: {
flex: 1,
backgroundColor: '#FFF',
},
headerContainer: {
backgroundColor: '#e76f51',
},
header: {
backgroundColor: '#e76f51',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
paddingBottom: 16,
paddingHorizontal: 16,
},
logoImage: {
width: 40,
height: 40,
borderRadius: 20,
},
headerText: {
color: '#FFF',
fontSize: 18,
fontWeight: 'bold',
flex: 1,
textAlign: 'center',
},
weightSelect: {
width: 35,
},
scrollView: {
flex: 1,
},
main: {
backgroundColor: 'white',
paddingHorizontal: 8,
paddingBottom: 16,
},
iconItem: {
width: '33%',
height: 100,
alignItems: 'center',
justifyContent: 'center',
padding: 8,
},
iconName: {
textAlign: 'center',
opacity: 0.8,
marginTop: 4,
},
});
export { default } from '@/components/home';
134 changes: 1 addition & 133 deletions example/app/(tabs)/test-lab.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,133 +1 @@
/* eslint-disable react-native/no-inline-styles */

import { useCallback, useState } from 'react';

import {
StyleSheet,
View,
Text,
StatusBar,
Image,
FlatList,
TouchableOpacity,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import PhosphorLogo from '@/assets/images/phosphor-mark-tight-yellow.png';
import * as IconPack from '@/components/icons';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { IconContext, ...Icons } = IconPack;

export default function TestLabScreen() {
const [toggleActive, setToggleActive] = useState(false);

const handleToggle = useCallback(() => {
setToggleActive(!toggleActive);
}, [toggleActive]);
return (
<View style={styles.rootView}>
<StatusBar barStyle="light-content" />
<SafeAreaView style={styles.headerContainer}>
<View style={styles.header}>
<Image source={PhosphorLogo} style={styles.logoImage} />
<View
style={{
flex: 1,
alignItems: 'flex-start',
justifyContent: 'center',
paddingStart: 10,
}}
>
<Text style={styles.headerText}>Phosphor React Native</Text>
<Text
style={{
color: '#fff',
opacity: 0.8,
textTransform: 'capitalize',
}}
>
Duotone test lab
</Text>
</View>
<TouchableOpacity style={styles.weightSelect} onPress={handleToggle}>
<IconPack.Swap color="#FFF" weight={'regular'} />
</TouchableOpacity>
</View>
</SafeAreaView>
<FlatList
style={styles.scrollView}
contentContainerStyle={styles.main}
data={Object.entries(Icons)
.filter(([, Icon]) => !!Icon)
.slice(0, 6)}
keyExtractor={(item) => item[0]}
numColumns={3}
renderItem={({ item: [name, Icon] }) => (
<View style={styles.iconItem}>
<Icon
size={48}
weight={'duotone'}
color={`#${Math.floor(Math.random() * 16777215).toString(16)}`}
duotoneColor={`#${Math.floor(Math.random() * 16777215).toString(16)}`}
duotoneOpacity={Math.random()}
/>
<Text style={styles.iconName}>{name}</Text>
</View>
)}
/>
</View>
);
}

const styles = StyleSheet.create({
rootView: {
flex: 1,
backgroundColor: '#FFF',
},
headerContainer: {
backgroundColor: '#e76f51',
},
header: {
backgroundColor: '#e76f51',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'row',
paddingBottom: 16,
paddingHorizontal: 16,
},
logoImage: {
width: 40,
height: 40,
borderRadius: 20,
},
headerText: {
color: '#FFF',
fontSize: 18,
fontWeight: 'bold',
flex: 1,
textAlign: 'center',
},
weightSelect: {
width: 35,
},
scrollView: {
flex: 1,
},
main: {
backgroundColor: 'white',
paddingHorizontal: 8,
paddingBottom: 16,
},
iconItem: {
width: '33%',
height: 100,
alignItems: 'center',
justifyContent: 'center',
padding: 8,
},
iconName: {
textAlign: 'center',
opacity: 0.8,
marginTop: 4,
},
});
export { default } from '@/components/test-lab';
Loading

0 comments on commit 7e81503

Please sign in to comment.