Skip to content

Commit 7894b70

Browse files
author
Artur Bien
committed
feat(checkmarkicon): add checkmarkicon component
1 parent cbfe787 commit 7894b70

File tree

6 files changed

+77
-50
lines changed

6 files changed

+77
-50
lines changed

src/ArrowIcon/index.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

src/ArrowIcon/ArrowIcon.tsx renamed to src/Icons/ArrowIcon.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ const ArrowIcon = ({
5353
? theme.materialTextDisabledShadow
5454
: 'transparent',
5555
shadowOffset: {
56-
width: 1,
57-
height: 1,
56+
width: pixelSize,
57+
height: pixelSize,
5858
},
5959
shadowOpacity: 1,
6060
shadowRadius: 0,

src/Icons/CheckmarkIcon.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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+
disabled?: boolean;
7+
style?: StyleProp<ViewStyle>;
8+
};
9+
10+
const pixelSize = 1.5;
11+
const segmentSize = 3 * pixelSize;
12+
13+
const CheckmarkIcon = ({ disabled = false, style = {}, ...rest }: Props) => {
14+
const theme = useContext(ThemeContext);
15+
16+
const segmentOffsets = [2, 3, 4, 3, 2, 1, 0];
17+
18+
return (
19+
<View style={[styles.wrapper, style]} {...rest}>
20+
{segmentOffsets.map((offset, i) => (
21+
<View
22+
key={i}
23+
style={[
24+
styles.segment,
25+
{
26+
marginTop: offset * pixelSize,
27+
backgroundColor: disabled
28+
? theme.checkmarkDisabled
29+
: theme.checkmark,
30+
},
31+
]}
32+
/>
33+
))}
34+
</View>
35+
);
36+
};
37+
38+
const styles = StyleSheet.create({
39+
wrapper: {
40+
position: 'relative',
41+
flexDirection: 'row',
42+
},
43+
segment: {
44+
width: pixelSize,
45+
height: segmentSize,
46+
},
47+
});
48+
49+
export default CheckmarkIcon;

src/Icons/index.ts

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

src/SwitchBase/SwitchBase.tsx

Lines changed: 23 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -11,30 +11,10 @@ import {
1111
import { Border } from '../common/styleElements';
1212
import { ThemeContext } from '../common/theming/Theme';
1313

14-
import { Text } from '..';
14+
import { Text, CheckmarkIcon } from '..';
1515

16-
const switchSize = 20;
17-
18-
const symbols = {
19-
checkbox: {
20-
default:
21-
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQ0lEQVQoU42Q0Q4AIARFj///6BqNSat4sXFcF6ER8mEGIC9IAY2AbCKpOnBAVgA2wIuac8MFQ/m6Ih9UjVdvy3njTUwR1AkKqm4yNwAAAABJRU5ErkJggg==',
22-
disabled:
23-
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAR0lEQVQoU2NkIAIw4lPT0tryv6a6hhGnIpACkAFwRTAdMFNhCjAUwQTQFYDEwdYhS8BMA1kDY8MZ2EzAUAQzEdkErIpwBQcA7RckCvjAHfcAAAAASUVORK5CYII=',
24-
},
25-
radio: {
26-
default:
27-
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAKElEQVQoU2NkIAAYSVXwH6oBrhHZBJgkzFCwHEkKQBrwWoHVvQR9AQAfmgQJp08TYAAAAABJRU5ErkJggg==',
28-
disabled:
29-
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALUlEQVQoU2NkIAAYSVLQ0tryH6ShproGrhHOgEnCTIQpIl4BSCdeK3A5lqAvAEBkEAkDjL/SAAAAAElFTkSuQmCC',
30-
},
31-
indeterminate: {
32-
default:
33-
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NkYGD4z4AKGJG5IA4dFKA5AdVKFAdBVaK4iXIFAEiuCAWq9MdHAAAAAElFTkSuQmCC',
34-
disabled:
35-
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NsaW35z4AEaqprGJH5jHRQgGwfiI1uJYqDaKMAAHKtGjlbjgHwAAAAAElFTkSuQmCC',
36-
},
37-
};
16+
const checkboxSize = 20;
17+
const radioSize = 20;
3818

3919
export type SwitchStatus = 'checked' | 'unchecked' | 'indeterminate';
4020

@@ -67,46 +47,41 @@ export const SwitchBase = ({
6747
const theme = useContext(ThemeContext);
6848
const [isPressed, setIsPressed] = React.useState(false);
6949
const isRadio = component === 'radio';
50+
const switchSize = component === 'checkbox' ? checkboxSize : radioSize;
7051
const boxSize = variant === 'flat' ? switchSize - 4 : switchSize;
7152
const borderRadius = isRadio ? boxSize / 2 : 0;
7253

7354
const renderCheckmark = () => {
74-
const symbolOffset = variant === 'flat' ? 2 : 4;
7555
if (status === 'checked') {
76-
const symbol = symbols[component][disabled ? 'disabled' : 'default'];
77-
78-
return (
79-
<ImageBackground
80-
// border to compensate for Border
81-
style={[
82-
{
83-
width: boxSize,
84-
height: boxSize,
85-
borderWidth: symbolOffset,
86-
borderColor: 'transparent',
87-
},
88-
]}
89-
imageStyle={{
90-
resizeMode: 'contain',
91-
flex: 1,
92-
}}
93-
source={{
94-
uri: symbol,
56+
return component === 'checkbox' ? (
57+
<CheckmarkIcon disabled={disabled} />
58+
) : (
59+
<View
60+
style={{
61+
borderRadius: 6,
62+
height: 6,
63+
width: 6,
64+
backgroundColor: disabled
65+
? theme.checkmarkDisabled
66+
: theme.checkmark,
9567
}}
9668
/>
9769
);
9870
}
9971
if (status === 'indeterminate') {
100-
const symbol = symbols[status][disabled ? 'disabled' : 'default'];
101-
10272
return (
10373
<ImageBackground
10474
style={[{ width: '100%', height: '100%' }]}
10575
imageStyle={{
10676
resizeMode: 'repeat',
10777
}}
10878
source={{
109-
uri: symbol,
79+
uri: {
80+
default:
81+
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NkYGD4z4AKGJG5IA4dFKA5AdVKFAdBVaK4iXIFAEiuCAWq9MdHAAAAAElFTkSuQmCC',
82+
disabled:
83+
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQoU2NsaW35z4AEaqprGJH5jHRQgGwfiI1uJYqDaKMAAHKtGjlbjgHwAAAAAElFTkSuQmCC',
84+
}[disabled ? 'disabled' : 'default'],
11085
}}
11186
/>
11287
);
@@ -189,6 +164,8 @@ const styles = StyleSheet.create({
189164
},
190165
switchSymbol: {
191166
marginRight: 4,
167+
alignItems: 'center',
168+
justifyContent: 'center',
192169
},
193170
labelWrapper: {
194171
paddingHorizontal: 4,

src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
export { default as AppBar } from './AppBar';
2-
export { default as ArrowIcon } from './ArrowIcon';
32
export { default as Button } from './Button';
43
export { default as Card } from './Card';
54
export { default as Checkbox } from './Checkbox';
@@ -26,6 +25,7 @@ export { default as Window } from './Window';
2625
export { Select, SelectBox } from './Select';
2726
export { Text, Title, Anchor } from './Typography';
2827

28+
export * from './Icons';
2929
export * from './common/theming';
3030

3131
export { Theme } from './types';

0 commit comments

Comments
 (0)