Skip to content

Commit 70d0aae

Browse files
author
Artur Bien
committed
feat(label): add label component
1 parent da690c8 commit 70d0aae

File tree

7 files changed

+108
-22
lines changed

7 files changed

+108
-22
lines changed
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import { Label } from 'react95-native';
3+
4+
import Container from '../util/Container';
5+
6+
const PanelExample = () => {
7+
return (
8+
<Container>
9+
<Label elevation={0}>No elevation</Label>
10+
<Label elevation={6} style={{ marginTop: 16 }} onPress={() => {}}>
11+
High elevation
12+
</Label>
13+
</Container>
14+
);
15+
};
16+
17+
export default PanelExample;

example/src/examples/index.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import DividerExample from './DividerExample';
88
import FABExample from './FABExample';
99
import FieldsetExample from './FieldsetExample';
1010
import HourglassExample from './HourglassExample';
11+
import LabelExample from './LabelExample';
1112
import ListExample from './ListExample';
1213
import MenuExample from './MenuExample';
1314
import NumberInputExample from './NumberInputExample';
@@ -120,6 +121,11 @@ export default [
120121
component: HourglassExample,
121122
title: 'Hourglass',
122123
},
124+
{
125+
name: 'LabelExample',
126+
component: LabelExample,
127+
title: 'Label',
128+
},
123129
{
124130
name: 'ProgressExample',
125131
component: ProgressExample,

src/components/Label/Label.tsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import React from 'react';
2+
import {
3+
StyleProp,
4+
StyleSheet,
5+
Animated,
6+
View,
7+
ViewStyle,
8+
TouchableWithoutFeedback,
9+
} from 'react-native';
10+
11+
import { withTheme } from '../../core/theming';
12+
import shadow from '../../styles/shadow';
13+
import type { Theme } from '../../types';
14+
15+
import { Text } from '../..';
16+
17+
type Props = React.ComponentPropsWithRef<typeof View> & {
18+
accessible?: boolean;
19+
children?: React.ReactNode;
20+
elevation?: number;
21+
onLongPress?: () => void;
22+
onPress?: () => void;
23+
radius?: number;
24+
style?: StyleProp<ViewStyle>;
25+
theme: Theme;
26+
};
27+
28+
const Label = ({
29+
accessible,
30+
children,
31+
elevation = 0,
32+
onLongPress,
33+
onPress,
34+
radius = 4,
35+
style = {},
36+
theme,
37+
...rest
38+
}: Props) => {
39+
return (
40+
// TODO: fix this TS error
41+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
42+
// @ts-ignore
43+
<Animated.View
44+
{...rest}
45+
style={[
46+
styles.container,
47+
{
48+
backgroundColor: theme.tooltip,
49+
borderRadius: radius,
50+
},
51+
shadow(elevation),
52+
style,
53+
]}
54+
>
55+
<TouchableWithoutFeedback
56+
delayPressIn={0}
57+
disabled={!(onPress || onLongPress)}
58+
onLongPress={onLongPress}
59+
onPress={onPress}
60+
accessible={accessible}
61+
>
62+
<Text>{children}</Text>
63+
</TouchableWithoutFeedback>
64+
</Animated.View>
65+
);
66+
};
67+
68+
const styles = StyleSheet.create({
69+
container: {
70+
position: 'relative',
71+
borderWidth: 2,
72+
paddingHorizontal: 12,
73+
paddingVertical: 6,
74+
},
75+
});
76+
77+
export default withTheme(Label);

src/components/Label/index.ts

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

src/components/Slider/Slider.tsx

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { buildBorderStyles } from '../../styles/styles';
1818
import { Border } from '../../styles/styleElements';
1919
import { clamp, roundValueToStep, findClosest } from '../../utils';
2020

21-
import { Panel, Text } from '../..';
21+
import { Panel, Text, Label } from '../..';
2222

2323
function percentToValue(percent: number, min: number, max: number) {
2424
return (max - min) * percent + min;
@@ -181,17 +181,9 @@ const Slider = ({
181181
)}
182182
{isUsed && (
183183
<View style={styles.tooltipWrapper}>
184-
<View
185-
style={[
186-
styles.tooltip,
187-
{
188-
borderColor: theme.borderDarkest,
189-
backgroundColor: theme.tooltip,
190-
},
191-
]}
192-
>
193-
<Text style={styles.tooltipText}>{value}</Text>
194-
</View>
184+
<Label elevation={4} style={styles.tooltip}>
185+
{value}
186+
</Label>
195187
</View>
196188
)}
197189
</Panel>
@@ -249,7 +241,6 @@ const thumbWidth = 18;
249241
const thumbHeight = 32;
250242
const tickSize = 6;
251243

252-
const tooltipHeight = 30;
253244
const styles = StyleSheet.create({
254245
wrapper: {
255246
paddingVertical: 4,
@@ -279,21 +270,14 @@ const styles = StyleSheet.create({
279270
},
280271
tooltipWrapper: {
281272
position: 'absolute',
282-
top: -(tooltipHeight + 18),
273+
top: -44,
283274
left: thumbWidth / 2,
284275
alignItems: 'center',
285276
},
286277
tooltip: {
287278
position: 'absolute',
288279
alignItems: 'center',
289280
justifyContent: 'center',
290-
borderRadius: 4,
291-
borderWidth: 2,
292-
padding: 8,
293-
backgroundColor: 'red',
294-
},
295-
tooltipText: {
296-
fontSize: 16,
297281
},
298282
marksWrapper: {
299283
position: 'relative',

src/components/Snackbar/Snackbar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const DURATION_MEDIUM = 7000;
5858
const DURATION_LONG = 10000;
5959

6060
const shadowOffset = 8;
61-
const radius = 5;
61+
const radius = 4;
6262

6363
const Snackbar = ({
6464
visible,

src/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export { default as Divider } from './components/Divider';
99
export { default as FAB } from './components/FAB';
1010
export { default as Fieldset } from './components/Fieldset';
1111
export { default as Hourglass } from './components/Hourglass';
12+
export { default as Label } from './components/Label';
1213
export { default as List } from './components/List';
1314
export { default as Menu } from './components/Menu';
1415
export { default as NumberInput } from './components/NumberInput';

0 commit comments

Comments
 (0)