unicorn-demo-app 8.2.0-snapshot.7650 → 8.2.0-snapshot.7661
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -3
- package/src/screens/MainScreen.js +0 -8
- package/src/screens/componentScreens/ChipScreen.tsx +1 -1
- package/src/screens/componentScreens/ConversationListScreen.js +0 -8
- package/src/screens/componentScreens/FeatureHighlightScreen.tsx +5 -1
- package/src/screens/componentScreens/NumberInputScreen.tsx +1 -1
- package/src/screens/componentScreens/OverlaysScreen.tsx +1 -1
- package/src/screens/componentScreens/ProgressBarScreen.tsx +6 -13
- package/src/screens/componentScreens/SearchInputScreen.tsx +1 -1
- package/src/screens/componentScreens/TimelineScreen.tsx +1 -1
- package/src/screens/foundationScreens/TypographyScreen.js +0 -5
- package/src/screens/realExamples/ListActions/ActionsList.js +0 -6
- package/src/screens/DemoScreen.js +0 -96
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "unicorn-demo-app",
|
|
3
|
-
"version": "8.2.0-snapshot.
|
|
3
|
+
"version": "8.2.0-snapshot.7661",
|
|
4
4
|
"main": "src/index.js",
|
|
5
5
|
"author": "Ethan Sharabi <ethan.shar@gmail.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
"shell-utils": "^1.0.10"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
|
-
"react": "^
|
|
26
|
-
"react-native": "^0.
|
|
25
|
+
"react": "^19.0.0",
|
|
26
|
+
"react-native": "^0.78.3",
|
|
27
27
|
"react-native-ui-lib": "*",
|
|
28
28
|
"semver": "^5.5.0"
|
|
29
29
|
}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import _ from 'lodash';
|
|
2
2
|
import React, {Component} from 'react';
|
|
3
|
-
import PropTypes from 'prop-types';
|
|
4
3
|
import {StyleSheet, FlatList, SectionList, ScrollView} from 'react-native';
|
|
5
|
-
import {ViewPropTypes} from 'deprecated-react-native-prop-types';
|
|
6
4
|
import {Navigation} from 'react-native-navigation';
|
|
7
5
|
import {
|
|
8
6
|
Assets,
|
|
@@ -27,12 +25,6 @@ const chevronIcon = require('../assets/icons/chevronRight.png');
|
|
|
27
25
|
const FADER_SIZE = 50;
|
|
28
26
|
|
|
29
27
|
class MainScreen extends Component {
|
|
30
|
-
static propTypes = {
|
|
31
|
-
containerStyle: ViewPropTypes.style,
|
|
32
|
-
renderItem: PropTypes.func,
|
|
33
|
-
pageStyle: ViewPropTypes.style
|
|
34
|
-
};
|
|
35
|
-
|
|
36
28
|
settingsScreenName = 'unicorn.Settings';
|
|
37
29
|
|
|
38
30
|
static options() {
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import _ from 'lodash';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
2
|
import React, {Component, PureComponent} from 'react';
|
|
4
3
|
import {StyleSheet, Alert, FlatList} from 'react-native';
|
|
5
4
|
import {Colors, ListItem, Text, Avatar, AvatarHelper, Drawer, Button} from 'react-native-ui-lib'; //eslint-disable-line
|
|
@@ -121,13 +120,6 @@ class ConversationListScreen extends Component {
|
|
|
121
120
|
}
|
|
122
121
|
|
|
123
122
|
class ContactItem extends PureComponent {
|
|
124
|
-
static propTypes = {
|
|
125
|
-
item: PropTypes.object,
|
|
126
|
-
index: PropTypes.number,
|
|
127
|
-
addRef: PropTypes.func,
|
|
128
|
-
onSwipeableWillOpen: PropTypes.func
|
|
129
|
-
};
|
|
130
|
-
|
|
131
123
|
render() {
|
|
132
124
|
const {item, index, addRef, onSwipeableWillOpen} = this.props;
|
|
133
125
|
|
|
@@ -165,7 +165,11 @@ class FeatureHighlightScreen extends Component<{}, State> {
|
|
|
165
165
|
</View>
|
|
166
166
|
</View>
|
|
167
167
|
<View center padding-25>
|
|
168
|
-
<View
|
|
168
|
+
<View
|
|
169
|
+
ref={r => {
|
|
170
|
+
this.viewRef = r;
|
|
171
|
+
}}
|
|
172
|
+
>
|
|
169
173
|
<Text marginT-20>
|
|
170
174
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
|
|
171
175
|
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
|
|
@@ -28,7 +28,7 @@ const DISCOUNT_PERCENTAGE = {min: 1, max: 80};
|
|
|
28
28
|
const DISCOUNT_PERCENTAGE_VALIDATION_MESSAGE = `Make sure your number is between ${DISCOUNT_PERCENTAGE.min} and ${DISCOUNT_PERCENTAGE.max}`;
|
|
29
29
|
|
|
30
30
|
const NumberInputScreen = () => {
|
|
31
|
-
const currentData = useRef<NumberInputData>();
|
|
31
|
+
const currentData = useRef<NumberInputData>(undefined);
|
|
32
32
|
const [text, setText] = useState<string>('');
|
|
33
33
|
const [showLabel, setShowLabel] = useState<boolean>(true);
|
|
34
34
|
const [exampleType, setExampleType] = useState<ExampleType>('price');
|
|
@@ -2,7 +2,9 @@ import React, {Component} from 'react';
|
|
|
2
2
|
import {StyleSheet, ScrollView} from 'react-native';
|
|
3
3
|
import {View, Text, ProgressBar, Colors, Spacings} from 'react-native-ui-lib';//eslint-disable-line
|
|
4
4
|
|
|
5
|
+
|
|
5
6
|
export default class ProgressBarScreen extends Component {
|
|
7
|
+
|
|
6
8
|
state = {
|
|
7
9
|
progresses: [0, 0, 0, 0]
|
|
8
10
|
};
|
|
@@ -51,7 +53,7 @@ export default class ProgressBarScreen extends Component {
|
|
|
51
53
|
</Text>
|
|
52
54
|
<ProgressBar
|
|
53
55
|
progress={progresses[0]}
|
|
54
|
-
|
|
56
|
+
style={styles.progressBar}
|
|
55
57
|
/>
|
|
56
58
|
|
|
57
59
|
<Text $textDefault text70 style={styles.text}>
|
|
@@ -59,7 +61,7 @@ export default class ProgressBarScreen extends Component {
|
|
|
59
61
|
</Text>
|
|
60
62
|
<ProgressBar
|
|
61
63
|
progress={progresses[1]}
|
|
62
|
-
|
|
64
|
+
style={styles.fullWidthProgressBar}
|
|
63
65
|
fullWidth
|
|
64
66
|
/>
|
|
65
67
|
|
|
@@ -68,7 +70,7 @@ export default class ProgressBarScreen extends Component {
|
|
|
68
70
|
</Text>
|
|
69
71
|
<ProgressBar
|
|
70
72
|
progress={progresses[2]}
|
|
71
|
-
|
|
73
|
+
style={[styles.progressBar, styles.styledProgressBar]}
|
|
72
74
|
progressColor={Colors.purple70}
|
|
73
75
|
/>
|
|
74
76
|
|
|
@@ -77,18 +79,9 @@ export default class ProgressBarScreen extends Component {
|
|
|
77
79
|
</Text>
|
|
78
80
|
<ProgressBar
|
|
79
81
|
progress={progresses[0]}
|
|
80
|
-
|
|
82
|
+
style={styles.progressBar}
|
|
81
83
|
customElement={this.customElement}
|
|
82
84
|
/>
|
|
83
|
-
|
|
84
|
-
<Text $textDefault text70 style={styles.text}>
|
|
85
|
-
Custom Style - No Border Radius, 50% progress
|
|
86
|
-
</Text>
|
|
87
|
-
<ProgressBar
|
|
88
|
-
progress={50}
|
|
89
|
-
containerStyle={[styles.progressBar, styles.styledProgressBar, {borderRadius: 0}]}
|
|
90
|
-
progressStyle={{borderRadius: 0, backgroundColor: Colors.purple70}}
|
|
91
|
-
/>
|
|
92
85
|
</View>
|
|
93
86
|
</ScrollView>
|
|
94
87
|
);
|
|
@@ -6,7 +6,7 @@ const SearchInputScreen = () => {
|
|
|
6
6
|
const [showCancelBtn, setShowCancelBtn] = useState(false);
|
|
7
7
|
const [showLoader, setShowLoader] = useState(false);
|
|
8
8
|
const [showCustomRightElement, setShowCustomRightElement] = useState(false);
|
|
9
|
-
const searchInput = useRef<SearchInputRef>();
|
|
9
|
+
const searchInput = useRef<SearchInputRef>(undefined);
|
|
10
10
|
|
|
11
11
|
const onChangeText = (text: string) => {
|
|
12
12
|
console.log('UILIB text: ', text);
|
|
@@ -15,7 +15,7 @@ const contents = [
|
|
|
15
15
|
const TimelineScreen = () => {
|
|
16
16
|
const [anchorIndex, setAnchorIndex] = useState(0);
|
|
17
17
|
const [expand, setExpand] = useState(false);
|
|
18
|
-
const anchor = useRef();
|
|
18
|
+
const anchor = useRef(undefined);
|
|
19
19
|
|
|
20
20
|
const onPress = useCallback(() => {
|
|
21
21
|
setAnchorIndex(anchorIndex === 0 ? 1 : 0);
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import _ from 'lodash';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
2
|
import React, {Component} from 'react';
|
|
4
3
|
import {ScrollView} from 'react-native';
|
|
5
4
|
import {TabController, Colors, Typography, View, Text} from 'react-native-ui-lib';
|
|
@@ -7,10 +6,6 @@ import {TabController, Colors, Typography, View, Text} from 'react-native-ui-lib
|
|
|
7
6
|
const WEIGHTS = ['Thin', 'Light', 'Default', 'Regular', 'Medium', 'Bold', 'Heavy', 'Black'];
|
|
8
7
|
|
|
9
8
|
export default class TypographyScreen extends Component {
|
|
10
|
-
static propTypes = {
|
|
11
|
-
color: PropTypes.string
|
|
12
|
-
};
|
|
13
|
-
|
|
14
9
|
static defaultProps = {
|
|
15
10
|
color: Colors.grey10
|
|
16
11
|
};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import PropTypes from 'prop-types';
|
|
2
1
|
import React, {Component} from 'react';
|
|
3
2
|
import {Animated, LayoutAnimation, PanResponder, I18nManager} from 'react-native';
|
|
4
3
|
import {Constants, Assets, Colors, View, TouchableOpacity, Button, Text} from 'react-native-ui-lib'; //eslint-disable-line
|
|
@@ -17,11 +16,6 @@ const DIRECTIONS = {
|
|
|
17
16
|
|
|
18
17
|
export default class ActionsList extends Component {
|
|
19
18
|
static displayName = 'ActionsList';
|
|
20
|
-
|
|
21
|
-
static propTypes = {
|
|
22
|
-
item: PropTypes.object,
|
|
23
|
-
index: PropTypes.number
|
|
24
|
-
}
|
|
25
19
|
|
|
26
20
|
constructor(props) {
|
|
27
21
|
super(props);
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
import React, {Component} from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import _ from 'lodash';
|
|
4
|
-
import {ScrollView, Switch} from 'react-native';
|
|
5
|
-
import {View, TextField, Text, Badge, Colors} from 'react-native-ui-lib';//eslint-disable-line
|
|
6
|
-
|
|
7
|
-
export default class DemoScreen extends Component {
|
|
8
|
-
|
|
9
|
-
constructor(props) {
|
|
10
|
-
super(props);
|
|
11
|
-
|
|
12
|
-
this.state = {
|
|
13
|
-
backgroundColor: Colors.red50,
|
|
14
|
-
label: '12',
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
this.updatePropValue = this.updatePropValue.bind(this);
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
componentDidMount() {
|
|
21
|
-
this.getComponentProps();
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
getComponentProps() {
|
|
25
|
-
const DemoComponent = this.getComponent();
|
|
26
|
-
return DemoComponent.propTypes;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
shouldRenderProp(propId) {
|
|
30
|
-
let shouldRender = true;
|
|
31
|
-
shouldRender = shouldRender && propId !== 'testID';
|
|
32
|
-
if (this.propsToRender) {
|
|
33
|
-
shouldRender = shouldRender && _.includes(this.propsToRender, propId);
|
|
34
|
-
}
|
|
35
|
-
return shouldRender;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
updatePropValue(value, propId, prop) {
|
|
39
|
-
let validValue = value;
|
|
40
|
-
|
|
41
|
-
if (prop === PropTypes.number) {
|
|
42
|
-
validValue = isNaN(value) ? undefined : Number(value);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
this.setState({
|
|
46
|
-
[propId]: validValue,
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
renderProp(prop, propId) {
|
|
52
|
-
if (!this.shouldRenderProp(propId)) return;
|
|
53
|
-
|
|
54
|
-
if (PropTypes.bool === prop) {
|
|
55
|
-
return (
|
|
56
|
-
<View row spread key={propId} paddingV-10>
|
|
57
|
-
<Text test70 grey60>
|
|
58
|
-
{propId}
|
|
59
|
-
</Text>
|
|
60
|
-
<Switch
|
|
61
|
-
value={this.state[propId]}
|
|
62
|
-
onValueChange={value => this.updatePropValue(value, propId, prop)}
|
|
63
|
-
/>
|
|
64
|
-
</View>
|
|
65
|
-
);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
// if (_.includes([PropTypes.string, PropTypes.number], prop)) {
|
|
69
|
-
return (
|
|
70
|
-
<View key={propId}>
|
|
71
|
-
<TextField
|
|
72
|
-
placeholder={propId}
|
|
73
|
-
floatingPlaceholder
|
|
74
|
-
enableError={false}
|
|
75
|
-
value={this.state[propId]}
|
|
76
|
-
onChangeText={text => this.updatePropValue(text, propId, prop)}
|
|
77
|
-
autoCapitalize='none'
|
|
78
|
-
/>
|
|
79
|
-
</View>
|
|
80
|
-
);
|
|
81
|
-
// }
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
renderComponentSettings() {
|
|
85
|
-
const props = this.getComponentProps();
|
|
86
|
-
return (
|
|
87
|
-
<ScrollView keyboardShouldPersistTaps>
|
|
88
|
-
<View padding-15>
|
|
89
|
-
{_.map(props, (prop, propId) => {
|
|
90
|
-
return this.renderProp(prop, propId);
|
|
91
|
-
})}
|
|
92
|
-
</View>
|
|
93
|
-
</ScrollView>
|
|
94
|
-
);
|
|
95
|
-
}
|
|
96
|
-
}
|