Skip to content

Commit cbfe787

Browse files
arturbienarturbien
authored
Merge pull request #20 from react95-io/feat/arrow-icon
feat(arrowicon): add arrowicon component
2 parents 0a0243c + 5a91615 commit cbfe787

File tree

8 files changed

+138
-98
lines changed

8 files changed

+138
-98
lines changed

‎example/src/ExamplesScreen.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -82,11 +82,11 @@ const ExamplesScreen = () => {
8282
</List.Accordion>
8383
</ScrollView>
8484
</Cutout>
85-
<View style={[styles.info]}>
86-
<Panel variant='well' style={[styles.infoItem, { flexGrow: 1 }]}>
85+
<View style={[styles.statusBar]}>
86+
<Panel variant='well' style={[styles.statusBarItem, { flexGrow: 1 }]}>
8787
<Text>Current theme: {currentTheme.name}</Text>
8888
</Panel>
89-
<Panel variant='well' style={[styles.infoItem]}>
89+
<Panel variant='well' style={[styles.statusBarItem]}>
9090
<Text>Total themes: {themes.length}</Text>
9191
</Panel>
9292
</View>
@@ -123,18 +123,19 @@ const styles = StyleSheet.create({
123123
section: {
124124
marginBottom: 16,
125125
},
126-
info: {
126+
statusBar: {
127127
display: 'flex',
128128
flexDirection: 'row',
129129
width: '100%',
130130

131131
marginTop: 6,
132132
marginBottom: 2,
133133
},
134-
infoItem: {
134+
statusBarItem: {
135135
marginHorizontal: 2,
136136
paddingHorizontal: 4,
137137
height: 30,
138+
justifyContent: 'center',
138139
},
139140
header: {
140141
justifyContent: 'center',

‎example/src/examples/ColorPickerExample.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const ColorPickerExample = () => {
4545
setColorMenuOpen(false);
4646
};
4747

48-
const [secondColorMenuOpen, setSecondColorMenuOpen] = React.useState(true);
48+
const [secondColorMenuOpen, setSecondColorMenuOpen] = React.useState(false);
4949
const [secondColor, setSecondColor] = React.useState(colors[6]);
5050
const [tempSecondColor, setTempSecondColor] = React.useState(secondColor);
5151

‎src/ArrowIcon/ArrowIcon.tsx‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
import React, { useContext } from 'react';
2+
import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
3+
import { ThemeContext } from '../common/theming/Theme';
4+
5+
type Props = {
6+
direction?: 'top' | 'bottom' | 'left' | 'right';
7+
disabled?: boolean;
8+
segments?: number;
9+
style?: StyleProp<ViewStyle>;
10+
};
11+
12+
const pixelSize = 2;
13+
14+
const ArrowIcon = ({
15+
direction = 'bottom',
16+
disabled = false,
17+
segments = 4,
18+
style = {},
19+
...rest
20+
}: Props) => {
21+
const theme = useContext(ThemeContext);
22+
23+
const segmentSizes = new Array(segments).fill(null).map((_, i) => 1 + i * 2);
24+
25+
if (['right', 'bottom'].includes(direction)) {
26+
segmentSizes.reverse();
27+
}
28+
const isHorizontal = ['left', 'right'].includes(direction);
29+
30+
return (
31+
<View
32+
style={[
33+
styles.wrapper,
34+
{
35+
flexDirection: isHorizontal ? 'row' : 'column',
36+
},
37+
style,
38+
]}
39+
{...rest}
40+
>
41+
{segmentSizes.map((segmentSize, i) => (
42+
<View
43+
key={i}
44+
style={[
45+
styles.segment,
46+
{
47+
[isHorizontal ? 'height' : 'width']: pixelSize * segmentSize,
48+
[isHorizontal ? 'width' : 'height']: pixelSize,
49+
backgroundColor: disabled
50+
? theme.materialTextDisabled
51+
: theme.materialText,
52+
shadowColor: disabled
53+
? theme.materialTextDisabledShadow
54+
: 'transparent',
55+
shadowOffset: {
56+
width: 1,
57+
height: 1,
58+
},
59+
shadowOpacity: 1,
60+
shadowRadius: 0,
61+
},
62+
]}
63+
/>
64+
))}
65+
</View>
66+
);
67+
};
68+
69+
const styles = StyleSheet.create({
70+
wrapper: {
71+
position: 'relative',
72+
alignItems: 'center',
73+
},
74+
segment: {
75+
height: pixelSize,
76+
},
77+
});
78+
79+
export default ArrowIcon;

‎src/ArrowIcon/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './ArrowIcon';

‎src/ColorButton/ColorButton.tsx‎

Lines changed: 8 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,10 @@
11
import React, { useContext } from 'react';
2-
import { StyleSheet, View, Image } from 'react-native';
2+
import { StyleSheet, View } from 'react-native';
33
import type { $RemoveChildren, Color } from '../types';
44

5-
import { Button, Divider } from '..';
5+
import { Button, Divider, ArrowIcon } from '..';
66
import { ThemeContext } from '../common/theming/Theme';
77

8-
const dropdownSymbol = {
9-
default:
10-
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAALElEQVQoU2NkIAIwEqGGgWRF/7GYCjYE3SRkhXA5bNaBFKKIk+wmnB4lyiQAAsgDCqkPxTcAAAAASUVORK5CYII=',
11-
disabled:
12-
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAANklEQVQoU2NkIAIwEqGGgTRFLa0t/9FNramuARuCYhKyQpgCDEUgAZBCZAVYFWHzCGkOxxcUANHnDAplQ9G1AAAAAElFTkSuQmCC',
13-
};
14-
158
type Props = $RemoveChildren<typeof Button> & {
169
color?: Color;
1710
};
@@ -46,11 +39,11 @@ const ColorButton = ({ disabled, color, ...rest }: Props) => {
4639
]}
4740
/>
4841
<Divider orientation='vertical' size={previewHeight} />
49-
<Image
42+
<ArrowIcon
43+
direction='bottom'
44+
disabled={disabled}
45+
segments={3}
5046
style={styles.dropdownIcon}
51-
source={{
52-
uri: dropdownSymbol[disabled ? 'disabled' : 'default'],
53-
}}
5447
/>
5548
</View>
5649
</Button>
@@ -66,11 +59,9 @@ const styles = StyleSheet.create({
6659
marginRight: 6,
6760
},
6861
dropdownIcon: {
69-
width: 20,
70-
height: 20,
7162
alignSelf: 'center',
72-
marginRight: -4,
73-
marginLeft: 1,
63+
marginRight: 2,
64+
marginLeft: 4,
7465
},
7566
});
7667

‎src/ScrollView/ScrollView.tsx‎

Lines changed: 11 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
ViewStyle,
77
StyleProp,
88
ImageBackground,
9-
Image,
109
PanResponder,
1110
TouchableWithoutFeedback,
1211
} from 'react-native';
@@ -18,28 +17,13 @@ import type {
1817
import useAsyncReference from '../common/hooks/useAsyncReference';
1918
import { ThemeContext } from '../common/theming/Theme';
2019

21-
import { Panel, Button } from '..';
20+
import { Panel, Button, ArrowIcon } from '..';
2221

2322
type Direction = -1 | 1;
2423

2524
const scrollbarThickness = 30;
2625
const scrollbarButtonSize = scrollbarThickness;
2726

28-
const Icon = (
29-
<Image
30-
style={[
31-
{
32-
width: 18,
33-
height: 18,
34-
},
35-
]}
36-
source={{
37-
uri:
38-
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAALElEQVQoU2NkIAIwEqGGgWRF/7GYCjYE3SRkhXA5bNaBFKKIk+wmnB4lyiQAAsgDCqkPxTcAAAAASUVORK5CYII=',
39-
}}
40-
/>
41-
);
42-
4327
type ScrollViewProps = React.ComponentProps<typeof View> & {
4428
alwaysShowScrollbars?: boolean;
4529
children: React.ReactNode;
@@ -196,15 +180,11 @@ const ScrollView = ({
196180
disabled={contentFullyVisible}
197181
style={[styles.scrollbarButton]}
198182
>
199-
<View
200-
style={{
201-
justifyContent: 'center',
202-
alignItems: 'center',
203-
transform: [{ rotate: horizontal ? '90deg' : '180deg' }],
204-
}}
205-
>
206-
{Icon}
207-
</View>
183+
<ArrowIcon
184+
direction={horizontal ? 'left' : 'top'}
185+
disabled={contentFullyVisible}
186+
segments={4}
187+
/>
208188
</Button>
209189
<View style={[styles.scrollbarTrack]}>
210190
{!contentFullyVisible && (
@@ -247,15 +227,11 @@ const ScrollView = ({
247227
disabled={contentFullyVisible}
248228
style={[styles.scrollbarButton]}
249229
>
250-
<View
251-
style={{
252-
justifyContent: 'center',
253-
alignItems: 'center',
254-
transform: [{ rotate: horizontal ? '-90deg' : '0deg' }],
255-
}}
256-
>
257-
{Icon}
258-
</View>
230+
<ArrowIcon
231+
direction={horizontal ? 'right' : 'bottom'}
232+
disabled={contentFullyVisible}
233+
segments={4}
234+
/>
259235
</Button>
260236
</View>
261237
)}

‎src/Select/Select.tsx‎

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
StyleSheet,
44
View,
55
TouchableHighlight,
6-
ImageBackground,
76
StyleProp,
87
ViewStyle,
98
} from 'react-native';
@@ -14,14 +13,7 @@ import { blockSizes } from '../common/styles';
1413
import { Border } from '../common/styleElements';
1514

1615
import getSelectOptions, { Option } from './SelectBase';
17-
import { ScrollView, Text } from '..';
18-
19-
const dropdownSymbol = {
20-
default:
21-
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAALElEQVQoU2NkIAIwEqGGgWRF/7GYCjYE3SRkhXA5bNaBFKKIk+wmnB4lyiQAAsgDCqkPxTcAAAAASUVORK5CYII=',
22-
disabled:
23-
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAANklEQVQoU2NkIAIwEqGGgTRFLa0t/9FNramuARuCYhKyQpgCDEUgAZBCZAVYFWHzCGkOxxcUANHnDAplQ9G1AAAAAElFTkSuQmCC',
24-
};
16+
import { ScrollView, Text, ArrowIcon } from '..';
2517

2618
type Props = {
2719
options: Array<Option>;
@@ -126,22 +118,19 @@ const Select = ({
126118
</View>
127119
</View>
128120
<View
129-
style={[styles.fakeButton, { backgroundColor: theme.material }]}
121+
style={[
122+
styles.fakeButton,
123+
{
124+
backgroundColor: theme.material,
125+
},
126+
]}
130127
>
131-
<ImageBackground
132-
style={[
133-
{
134-
marginTop: isPressed ? 1 : 0,
135-
width: '100%',
136-
height: '100%',
137-
},
138-
]}
139-
imageStyle={{
140-
resizeMode: 'contain',
141-
flex: 1,
142-
}}
143-
source={{
144-
uri: dropdownSymbol[disabled ? 'disabled' : 'default'],
128+
<ArrowIcon
129+
segments={4}
130+
direction='bottom'
131+
disabled={disabled}
132+
style={{
133+
paddingTop: isPressed ? 2 : 0,
145134
}}
146135
/>
147136
<Border
@@ -210,6 +199,8 @@ const styles = StyleSheet.create({
210199
height: '100%',
211200
width: 30,
212201
padding: 4,
202+
alignItems: 'center',
203+
justifyContent: 'center',
213204
},
214205
options: {
215206
position: 'absolute',

‎src/index.ts‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
1+
export { default as AppBar } from './AppBar';
2+
export { default as ArrowIcon } from './ArrowIcon';
13
export { default as Button } from './Button';
4+
export { default as Card } from './Card';
5+
export { default as Checkbox } from './Checkbox';
26
export { default as ColorButton } from './ColorButton';
37
export { default as ColorPicker } from './ColorPicker';
4-
export { default as TextInput } from './TextInput';
5-
export { default as NumberInput } from './NumberInput';
6-
export { default as Panel } from './Panel';
7-
export { Text, Title, Anchor } from './Typography';
8-
export { default as AppBar } from './AppBar';
98
export { default as Cutout } from './Cutout';
10-
export { default as Window } from './Window';
9+
export { default as Desktop } from './Desktop';
1110
export { default as Divider } from './Divider';
12-
export { default as Checkbox } from './Checkbox';
13-
export { default as Radio } from './Radio';
14-
export { default as Slider } from './Slider';
1511
export { default as Fieldset } from './Fieldset';
16-
export { default as Progress } from './Progress';
17-
export { Select, SelectBox } from './Select';
18-
export { default as Desktop } from './Desktop';
19-
export { default as Menu } from './Menu';
20-
export { default as Tabs } from './Tabs';
21-
export { default as ScrollView } from './ScrollView';
2212
export { default as Hourglass } from './Hourglass';
2313
export { default as List } from './List';
14+
export { default as Menu } from './Menu';
15+
export { default as NumberInput } from './NumberInput';
16+
export { default as Panel } from './Panel';
17+
export { default as Progress } from './Progress';
18+
export { default as Radio } from './Radio';
2419
export { default as ScrollPanel } from './ScrollPanel';
25-
export { default as Card } from './Card';
20+
export { default as ScrollView } from './ScrollView';
21+
export { default as Slider } from './Slider';
2622
export { default as Snackbar } from './Snackbar';
23+
export { default as Tabs } from './Tabs';
24+
export { default as TextInput } from './TextInput';
25+
export { default as Window } from './Window';
26+
export { Select, SelectBox } from './Select';
27+
export { Text, Title, Anchor } from './Typography';
2728

2829
export * from './common/theming';
2930

0 commit comments

Comments
 (0)