Skip to content

Commit f250a28

Browse files
M-i-k-e-lM-i-k-e-l
committed
Merge branch 'master' into release
2 parents 63b0b01 + e06380b commit f250a28

33 files changed

+605
-120
lines changed

‎Gemfile

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
source 'https://rubygems.org'
2-
2
3-
3 # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
4-
4 ruby '2.7.4'
5-
5
6-
6 gem 'cocoapods', '~> 1.11', '>= 1.11.2'
2+
3+
# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
4+
ruby '2.7.4'
5+
6+
gem 'cocoapods', '~> 1.11', '>= 1.11.2'

‎demo/src/screens/MenuStructure.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@ export const navigationData = {
4343
screen: 'unicorn.components.SharedTransitionScreen'
4444
},
4545
{title: 'Stack Aggregator', tags: 'stack aggregator', screen: 'unicorn.components.StackAggregatorScreen'},
46-
{title: 'Wheel Picker Dialog', tags: 'wheel picker dialog', screen: 'unicorn.components.WheelPickerDialogScreen'}
46+
{title: 'Wheel Picker Dialog', tags: 'wheel picker dialog', screen: 'unicorn.components.WheelPickerDialogScreen'},
47+
{title: 'Marquee', tags: 'sliding text', screen: 'unicorn.components.MarqueeScreen'}
4748
]
4849
},
4950
Form: {

‎demo/src/screens/componentScreens/MarqueeScreen.tsx

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import _ from 'lodash';
2+
import React, {Component} from 'react';
3+
import {StyleSheet} from 'react-native';
4+
import {Marquee, MarqueeDirections, Text, View, Spacings} from 'react-native-ui-lib';
5+
import {renderBooleanOption, renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
6+
7+
export default class MarqueeScreen extends Component<{}> {
8+
state = {
9+
duration: 5000,
10+
directionHorizontal: true,
11+
directionVertical: true,
12+
numOfReps: -1
13+
};
14+
15+
renderHorizontalSection = () => {
16+
const {directionHorizontal, numOfReps, duration} = this.state;
17+
return (
18+
<View marginV-s3 center>
19+
<Text h2 marginB-s2 $textDefault>
20+
Horizontal
21+
</Text>
22+
<Text h3 marginV-s2 $textDefault>
23+
Marquee: {directionHorizontal ? MarqueeDirections.LEFT : MarqueeDirections.RIGHT}
24+
</Text>
25+
<Marquee
26+
key={`${directionHorizontal}-${duration}-${numOfReps}`}
27+
label={'Hey there, this is the new Marquee component from UILIB!'}
28+
direction={directionHorizontal ? MarqueeDirections.LEFT : MarqueeDirections.RIGHT}
29+
duration={duration}
30+
numberOfReps={numOfReps}
31+
containerStyle={[styles.containerHorizontal, styles.horizontal]}
32+
/>
33+
</View>
34+
);
35+
};
36+
37+
renderVerticalSection = () => {
38+
const {directionVertical, numOfReps, duration} = this.state;
39+
return (
40+
<View marginV-s3 center>
41+
<Text h2 marginB-s2 $textDefault>
42+
Vertical
43+
</Text>
44+
<Text h3 marginV-s2 $textDefault>
45+
Marquee: {directionVertical ? MarqueeDirections.UP : MarqueeDirections.DOWN}
46+
</Text>
47+
<Marquee
48+
label={
49+
'Hey there, this is the new Marquee! Hey there, this is the new Marquee! Hey there, this is the new Marquee! Hey there, this is the new Marquee!'
50+
}
51+
labelStyle={styles.label}
52+
key={`${directionVertical}-${duration}-${numOfReps}`}
53+
direction={directionVertical ? MarqueeDirections.UP : MarqueeDirections.DOWN}
54+
duration={duration}
55+
numberOfReps={numOfReps}
56+
containerStyle={[styles.containerHorizontal, styles.vertical]}
57+
/>
58+
</View>
59+
);
60+
};
61+
62+
render() {
63+
return (
64+
<View flex padding-page>
65+
<Text h1 center margin-20 $textDefault>
66+
Marquee
67+
</Text>
68+
<View>
69+
{renderMultipleSegmentOptions.call(this, 'Duration (optional)', 'duration', [
70+
{label: '3000', value: 3000},
71+
{label: '5000', value: 5000},
72+
{label: '10000', value: 10000}
73+
])}
74+
{renderMultipleSegmentOptions.call(this, 'Number Of Reps', 'numOfReps', [
75+
{label: 'Infinite', value: -1},
76+
{label: '1', value: 1},
77+
{label: '3', value: 3},
78+
{label: '5', value: 5}
79+
])}
80+
<View marginV-s2>
81+
{renderBooleanOption.call(this, 'Direction Horizontal: Left To Right/Right To Left', 'directionHorizontal')}
82+
{renderBooleanOption.call(this, 'Direction Vertical: Bottom To Up/Up To Bottom', 'directionVertical')}
83+
</View>
84+
</View>
85+
{this.renderHorizontalSection()}
86+
{this.renderVerticalSection()}
87+
</View>
88+
);
89+
}
90+
}
91+
92+
const styles = StyleSheet.create({
93+
containerHorizontal: {
94+
borderWidth: 1,
95+
borderColor: 'black',
96+
marginVertical: Spacings.s2
97+
},
98+
horizontal: {width: 200},
99+
vertical: {width: 250, height: 100, alignItems: 'center'},
100+
containerVertical: {borderWidth: 1, borderColor: 'black', marginVertical: Spacings.s2},
101+
label: {alignSelf: 'center'}
102+
});

‎demo/src/screens/componentScreens/SortableListScreen.tsx

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,33 @@
11
import _ from 'lodash';
22
import React, {useCallback, useState, useRef} from 'react';
33
import {StyleSheet} from 'react-native';
4-
import {SortableList, View, TouchableOpacity, Text, Icon, Assets, Colors, Button} from 'react-native-ui-lib';
4+
import {
5+
SortableList,
6+
SortableListItemProps,
7+
View,
8+
TouchableOpacity,
9+
Text,
10+
Icon,
11+
Assets,
12+
Colors,
13+
Button
14+
} from 'react-native-ui-lib';
515
import {renderHeader} from '../ExampleScreenPresenter';
616

7-
interface Item {
8-
originalIndex: number;
9-
id: string;
17+
interface Item extends SortableListItemProps {
18+
text: string;
1019
}
1120

12-
const data = _.times(30, index => {
21+
const data: Item[] = _.times(30, index => {
22+
let text = `${index}`;
23+
if (index === 3) {
24+
text = 'Locked item';
25+
}
26+
1327
return {
14-
originalIndex: index,
15-
id: `${index}`
28+
text,
29+
id: `${index}`,
30+
locked: index === 3
1631
};
1732
});
1833

@@ -57,23 +72,26 @@ const SortableListScreen = () => {
5772

5873
const renderItem = useCallback(({item, index: _index}: {item: Item; index: number}) => {
5974
const isSelected = selectedItems.includes(item);
75+
const {locked} = item;
76+
const Container = locked ? View : TouchableOpacity;
6077
return (
61-
<TouchableOpacity
78+
<Container
6279
style={[styles.itemContainer, isSelected && styles.selectedItemContainer]}
6380
onPress={() => toggleItemSelection(item)}
6481
// overriding the BG color to anything other than white will cause Android's elevation to fail
6582
// backgroundColor={Colors.red30}
6683
centerV
84+
centerH={locked}
6785
paddingH-page
6886
>
6987
<View flex row spread centerV>
70-
<Icon source={Assets.icons.demo.drag} tintColor={Colors.$iconDisabled}/>
71-
<Text center $textDefault>
72-
{item.originalIndex}
88+
{!locked && <Icon source={Assets.icons.demo.drag} tintColor={Colors.$iconDisabled}/>}
89+
<Text center $textDefault={!locked} $textNeutralLight={locked}>
90+
{item.text}
7391
</Text>
74-
<Icon source={Assets.icons.demo.chevronRight} tintColor={Colors.$iconDefault}/>
92+
{!locked && <Icon source={Assets.icons.demo.chevronRight} tintColor={Colors.$iconDefault}/>}
7593
</View>
76-
</TouchableOpacity>
94+
</Container>
7795
);
7896
},
7997
[selectedItems, toggleItemSelection]);

‎demo/src/screens/componentScreens/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export function registerScreens(registrar) {
3030
registrar('unicorn.components.GridViewScreen', () => require('./GridViewScreen').default);
3131
registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);
3232
registrar('unicorn.components.MaskedInputScreen', () => require('./MaskedInputScreen').default);
33+
registrar('unicorn.components.MarqueeScreen', () => require('./MarqueeScreen').default);
3334
registrar('unicorn.components.OverlaysScreen', () => require('./OverlaysScreen').default);
3435
registrar('unicorn.components.PageControlScreen', () => require('./PageControlScreen').default);
3536
registrar('unicorn.components.PanDismissibleScreen', () => require('./PanDismissibleScreen').default);

‎ios/rnuilib.xcodeproj/project.pbxproj

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -395,10 +395,10 @@
395395
);
396396
inputPaths = (
397397
"${PODS_ROOT}/Target Support Files/Pods-rnuilib-rnuilibTests/Pods-rnuilib-rnuilibTests-frameworks.sh",
398-
"${PODS_XCFRAMEWORKS_BUILD_DIR}/double-conversion/double-conversion.framework/double-conversion",
399-
"${PODS_XCFRAMEWORKS_BUILD_DIR}/glog/glog.framework/glog",
400-
"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
401-
"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes/hermes.framework/hermes",
398+
"${PODS_XCFRAMEWORKS_BUILD_DIR}/Flipper-DoubleConversion/double-conversion.framework/double-conversion",
399+
"${PODS_XCFRAMEWORKS_BUILD_DIR}/Flipper-Glog/glog.framework/glog",
400+
"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL-Universal/OpenSSL.framework/OpenSSL",
401+
"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/hermes.framework/hermes",
402402
);
403403
name = "[CP] Embed Pods Frameworks";
404404
outputPaths = (
@@ -451,10 +451,10 @@
451451
);
452452
inputPaths = (
453453
"${PODS_ROOT}/Target Support Files/Pods-rnuilib/Pods-rnuilib-frameworks.sh",
454-
"${PODS_XCFRAMEWORKS_BUILD_DIR}/double-conversion/double-conversion.framework/double-conversion",
455-
"${PODS_XCFRAMEWORKS_BUILD_DIR}/glog/glog.framework/glog",
456-
"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL/OpenSSL.framework/OpenSSL",
457-
"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes/hermes.framework/hermes",
454+
"${PODS_XCFRAMEWORKS_BUILD_DIR}/Flipper-DoubleConversion/double-conversion.framework/double-conversion",
455+
"${PODS_XCFRAMEWORKS_BUILD_DIR}/Flipper-Glog/glog.framework/glog",
456+
"${PODS_XCFRAMEWORKS_BUILD_DIR}/OpenSSL-Universal/OpenSSL.framework/OpenSSL",
457+
"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/hermes.framework/hermes",
458458
);
459459
name = "[CP] Embed Pods Frameworks";
460460
outputPaths = (

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,10 @@
4646
"moment": "^2.24.0",
4747
"prop-types": "^15.5.10",
4848
"react-freeze": "^1.0.0",
49-
"react-native-color": "0.0.10",
5049
"react-native-redash": "^12.0.3",
5150
"react-native-text-size": "4.0.0-rc.1",
5251
"semver": "^5.5.0",
52+
"tinycolor2": "^1.4.2",
5353
"url-parse": "^1.2.0"
5454
},
5555
"devDependencies": {
@@ -107,7 +107,7 @@
107107
"react-native-gesture-handler": "2.5.0",
108108
"react-native-haptic-feedback": "^1.11.0",
109109
"react-native-linear-gradient": "2.5.6",
110-
"react-native-navigation": "^7.19.1",
110+
"react-native-navigation": "7.29.0",
111111
"react-native-reanimated": "2.8.0",
112112
"react-native-shimmer-placeholder": "^2.0.6",
113113
"react-native-svg": "^12.1.0",
@@ -126,7 +126,7 @@
126126
"jest": {
127127
"preset": "react-native",
128128
"transformIgnorePatterns": [
129-
"node_modules/(?!(@react-native|react-native|react-native-reanimated|react-native-redash|react-native-color)/)"
129+
"node_modules/(?!(@react-native|react-native|react-native-reanimated|react-native-redash)/)"
130130
],
131131
"testPathIgnorePatterns": [
132132
"/e2e/",

‎src/components/dash/dash.api.json

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "Dash",
3+
"category": "lists",
4+
"description": "Dashed line Component",
5+
"images": [],
6+
"props": [
7+
{
8+
"name": "vertical",
9+
"type": "boolean",
10+
"description": "Is the dashed line should be vertical"
11+
},
12+
{
13+
"name": "gap",
14+
"type": "number",
15+
"description": "The gap between the dashes",
16+
"default": "6"
17+
},
18+
{
19+
"name": "length",
20+
"type": "number",
21+
"description": "The length of the dashes",
22+
"default": "6"
23+
},
24+
{
25+
"name": "thickness",
26+
"type": "number",
27+
"description": "The thickness of the dashes",
28+
"default": "2"
29+
},
30+
{
31+
"name": "color",
32+
"type": "string",
33+
"description": "The color of the dashes",
34+
"default": "Colors.black"
35+
},
36+
{"name": "style", "type": "ViewStyle", "description": "Additional style to the dashes"},
37+
{"name": "containerStyle", "type": "ViewStyle", "description": "The container style"}
38+
],
39+
"snippet": ["<Dash vertical={$1} style={$2}/>"]
40+
}

0 commit comments

Comments
 (0)