Skip to content

Commit 166b7a1

Browse files
M-i-k-e-lM-i-k-e-l
committed
Merge branch 'master' into scroll-enabler
2 parents 7160bc2 + 2962e8e commit 166b7a1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+272
-399
lines changed

‎.buildkite/pipeline.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,5 @@ steps:
1212
- "npm install"
1313
- "npm run test"
1414
- "npm run build"
15-
- "[[ $BUILDKITE_PULL_REQUEST == 'false' ]] && npm run bkRelease && npm run demo || true"
15+
- "[[ $BUILDKITE_PULL_REQUEST == 'false' ]] && npm run release && npm run demo || true"
1616
timeout_in_minutes: 15

‎.nvmrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
14.16.0
1+
14.17.0

‎demo/src/screens/ExampleScreenPresenter.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ interface RadioGroupOptions {
2222
useValueAsLabel?: boolean;
2323
}
2424

25-
export function renderHeader(title: string, others: TextProps) {
25+
export function renderHeader(title: string, others?: TextProps) {
2626
return (
2727
<Text text30 $textDefault {...others}>
2828
{title}

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ export default class ActionBarScreen extends Component {
1919

2020
render() {
2121
return (
22-
<View flex bg-grey80>
22+
<View flex bg-$backgroundNeutralLight>
2323
<PageControl
2424
containerStyle={[styles.pageControl, styles.absoluteContainer]}
2525
numOfPages={6}
2626
currentPage={this.state.currentPage}
27-
color={Colors.grey10}
27+
color={Colors.$backgroundInverted}
2828
size={15}
2929
/>
3030
<Carousel
@@ -35,7 +35,7 @@ export default class ActionBarScreen extends Component {
3535
<View style={styles.page}>
3636
<ActionBar
3737
actions={[
38-
{label: 'Delete', onPress: () => Alert.alert('delete'), red30: true},
38+
{label: 'Delete', onPress: () => Alert.alert('delete'), $textDangerLight: true},
3939
{label: 'Replace Photo', onPress: () => Alert.alert('replace photo')},
4040
{label: 'Edit', onPress: () => Alert.alert('edit')}
4141
]}
@@ -44,17 +44,17 @@ export default class ActionBarScreen extends Component {
4444

4545
<View style={styles.page}>
4646
<ActionBar
47-
backgroundColor={Colors.primary}
47+
backgroundColor={Colors.$backgroundPrimaryHeavy}
4848
actions={[
49-
{label: 'Hide', onPress: () => Alert.alert('hide'), white: true},
50-
{label: 'Add Discount', onPress: () => Alert.alert('add discount'), white: true},
51-
{label: 'Duplicate', onPress: () => Alert.alert('duplicate'), white: true}
49+
{label: 'Hide', onPress: () => Alert.alert('hide'), $textDefaultLight: true},
50+
{label: 'Add Discount', onPress: () => Alert.alert('add discount'), $textDefaultLight: true},
51+
{label: 'Duplicate', onPress: () => Alert.alert('duplicate'), $textDefaultLight: true}
5252
]}
5353
/>
5454
</View>
5555

5656
<View style={styles.page}>
57-
<ActionBar actions={[{label: 'Delete', red30: true}, {label: 'Edit'}]}/>
57+
<ActionBar actions={[{label: 'Delete', $textDangerLight: true}, {label: 'Edit'}]}/>
5858
</View>
5959

6060
<View style={styles.page}>
@@ -65,9 +65,9 @@ export default class ActionBarScreen extends Component {
6565
<ActionBar
6666
centered
6767
actions={[
68-
{label: 'Bold', labelStyle: {color: Colors.grey10, ...Typography.text60, fontWeight: '400'}},
69-
{label: 'Italic', text60: true, labelStyle: {fontStyle: 'italic', color: Colors.grey10}},
70-
{label: 'Link', text60: true, labelStyle: {textDecorationLine: 'underline', color: Colors.grey10}}
68+
{label: 'Bold', labelStyle: {color: Colors.$textDefault, ...Typography.text60, fontWeight: '400'}},
69+
{label: 'Italic', text60: true, labelStyle: {fontStyle: 'italic', color: Colors.$textDefault}},
70+
{label: 'Link', text60: true, labelStyle: {textDecorationLine: 'underline', color: Colors.$textDefault}}
7171
]}
7272
/>
7373
</View>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ const styles = StyleSheet.create({
7070
height: itemHeight,
7171
width: itemWidth,
7272
backgroundColor: Colors.$backgroundDefault,
73-
borderColor: Colors.$outlineNeutralMedium,
73+
borderColor: Colors.$outlineDisabled,
7474
borderWidth: 2,
7575
alignItems: 'center',
7676
justifyContent: 'center'

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ import {
1313
PanningProvider,
1414
Typography,
1515
PickerProps,
16-
DialogProps
16+
PickerMethods,
17+
DialogProps,
18+
Button
1719
} from 'react-native-ui-lib'; //eslint-disable-line
1820
import contactsData from '../../data/conversations';
1921
import {longOptions} from './PickerScreenLongOptions';
@@ -38,6 +40,7 @@ const filters = [
3840
];
3941

4042
export default class PickerScreen extends Component {
43+
picker = React.createRef<PickerMethods>();
4144
state = {
4245
itemsCount: 1,
4346
// language: {value: 'java', label: 'Java'},
@@ -260,6 +263,8 @@ export default class PickerScreen extends Component {
260263

261264
<Picker
262265
migrate
266+
// @ts-expect-error
267+
ref={this.picker}
263268
migrateTextField
264269
label="Language"
265270
placeholder="Favorite Language"
@@ -270,13 +275,20 @@ export default class PickerScreen extends Component {
270275
searchPlaceholder={'Search a language'}
271276
searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
272277
marginT-s4
278+
enableErrors={false}
273279
// mode={Picker.modes.MULTI}
274280
// useNativePicker
275281
>
276282
{_.map(options, option => (
277283
<Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
278284
))}
279285
</Picker>
286+
<Button
287+
label="Open Picker Manually"
288+
link
289+
style={{alignSelf: 'flex-start'}}
290+
onPress={() => this.picker.current?.openExpandable?.()}
291+
/>
280292
</View>
281293
</ScrollView>
282294
);

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,17 +38,17 @@ const SegmentedControlScreen = () => {
3838
/>
3939
<SegmentedControl
4040
containerStyle={styles.container}
41-
activeColor={Colors.red30}
41+
activeColor={Colors.$textDangerLight}
4242
segments={segments.third}
4343
/>
4444
<SegmentedControl
4545
containerStyle={styles.container}
4646
segments={segments.forth}
47-
activeColor={Colors.grey10}
47+
activeColor={Colors.$textDefault}
4848
borderRadius={BorderRadiuses.br20}
49-
backgroundColor={Colors.grey10}
50-
activeBackgroundColor={Colors.grey40}
51-
inactiveColor={Colors.grey70}
49+
backgroundColor={Colors.$backgroundInverted}
50+
activeBackgroundColor={Colors.$backgroundNeutralIdle}
51+
inactiveColor={Colors.$textDisabled}
5252
/>
5353
</View>
5454
<SegmentedControl
@@ -60,7 +60,7 @@ const SegmentedControlScreen = () => {
6060
segments={segments.sixth}
6161
/>
6262
</View>
63-
<Text text40 grey10>
63+
<Text text40 $textDefault>
6464
Segmented Control
6565
</Text>
6666
</View>

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

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
View,
1515
Colors
1616
} from 'react-native-ui-lib';
17-
// @ts-expect-error
1817
import * as ExampleScreenPresenter from '../ExampleScreenPresenter';
1918

2019
const AVATAR_SIZE = 48;
@@ -153,7 +152,7 @@ export default class SkeletonViewScreen extends Component {
153152
<Text>Verified</Text>
154153
</View>
155154
);
156-
}
155+
};
157156

158157
renderListItemsData = (customValue?: any) => {
159158
const {isLarge, showEndContent} = this.state;
@@ -163,13 +162,7 @@ export default class SkeletonViewScreen extends Component {
163162
<React.Fragment>
164163
{_.times(NUMBER_OF_ITEMS_TO_SHOW, index => {
165164
return (
166-
<ListItem
167-
key={index}
168-
activeBackgroundColor={Colors.grey60}
169-
activeOpacity={0.3}
170-
height={90}
171-
onPress={() => Alert.alert(`pressed on order #${index + 1}`)}
172-
>
165+
<ListItem key={index} height={90} onPress={() => Alert.alert(`pressed on order #${index + 1}`)}>
173166
{hasAvatar && this.renderAvatar()}
174167
{hasThumbnail && this.renderThumbnail()}
175168
<ListItem.Part middle column containerStyle={[styles.border, {marginLeft: 18}]}>
@@ -248,16 +241,17 @@ export default class SkeletonViewScreen extends Component {
248241
const imageSize = this.getImageSize();
249242

250243
return (
251-
<View row spread margin-page>
252-
<SkeletonView
253-
width={imageSize}
254-
height={imageSize}
255-
showContent={isDataAvailable}
256-
renderContent={this.renderImagesData}
257-
accessibilityLabel={'Loading image'}
258-
times={IMAGE_URIS.length}
259-
/>
260-
</View>
244+
<SkeletonView
245+
row
246+
spread
247+
margin-page
248+
width={imageSize}
249+
height={imageSize}
250+
showContent={isDataAvailable}
251+
renderContent={this.renderImagesData}
252+
accessibilityLabel={'Loading image'}
253+
times={IMAGE_URIS.length}
254+
/>
261255
);
262256
};
263257

@@ -337,11 +331,11 @@ export default class SkeletonViewScreen extends Component {
337331
borderRadius={5}
338332
style={{marginTop: 5}}
339333
showContent={isDataAvailable}
340-
renderContent={() => <Button label='Info' size={'small'} link/>}
334+
renderContent={() => <Button label={'Info'} size={Button.sizes.small} link/>}
341335
/>
342336
</View>
343337
<SkeletonView
344-
shimmerStyle={{width: '100%'/* , height: 30 */}}
338+
shimmerStyle={{width: '100%' /* , height: 30 */}}
345339
height={10}
346340
borderRadius={5}
347341
showContent={isDataAvailable}
@@ -350,7 +344,7 @@ export default class SkeletonViewScreen extends Component {
350344
/>
351345
</View>
352346
);
353-
}
347+
};
354348

355349
renderContent = () => {
356350
const {isDataAvailable} = this.state;

‎demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import _ from 'lodash';
22
import React, {Component} from 'react';
33
import {TextInput, StyleSheet, ScrollView, ActivityIndicator} from 'react-native';
4-
import {Assets, Colors, Spacings, Typography, View, Text, Button, Keyboard, Incubator, Constants} from 'react-native-ui-lib'; //eslint-disable-line
4+
import {Assets, Colors, Spacings, Typography, View, Text, Button, Keyboard, Incubator} from 'react-native-ui-lib'; //eslint-disable-line
55
const {TextField} = Incubator;
66
const {KeyboardAwareInsetsView} = Keyboard;
77

@@ -283,12 +283,12 @@ const styles = StyleSheet.create({
283283
container: {},
284284
withUnderline: {
285285
borderBottomWidth: 1,
286-
borderColor: Constants.isAndroid ? Colors.$outlineDisabledHeavy.toString() : Colors.$outlineDisabledHeavy,
286+
borderColor: Colors.$outlineDisabledHeavy,
287287
paddingBottom: 4
288288
},
289289
withFrame: {
290290
borderWidth: 1,
291-
borderColor: Constants.isAndroid ? Colors.$outlineDisabledHeavy.toString() : Colors.$outlineDisabledHeavy,
291+
borderColor: Colors.$outlineDisabledHeavy,
292292
padding: 4,
293293
borderRadius: 2
294294
}

‎docuilib/docusaurus.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
1717
trailingSlash: false,
1818
customFields: {
1919
expoSnackLink: 'https://snack.expo.io/@ethanshar/rnuilib_snack?platform=ios&supportedPlatforms=ios,android',
20-
stars: '4.2'
20+
stars: '4.4'
2121
},
2222
plugins: ['docusaurus-plugin-sass'],
2323
presets: [

‎lib/components/Keyboard/KeyboardInput/KeyboardAccessoryView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export type KeyboardAccessoryViewProps = {
5151
/**
5252
* Callback that will be called when an item on the keyboard has been pressed.
5353
*/
54-
onItemSelected?: () => void;
54+
onItemSelected?: (component?: string, args?: any) => void;
5555
/**
5656
* Callback that will be called if KeyboardRegistry.requestShowKeyboard is called.
5757
*/

‎package.json

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,32 +15,23 @@
1515
},
1616
"scripts": {
1717
"start": "watchman watch-del-all && export DEV_MODE=true && react-native start",
18-
"start-ios": "node ./scripts/cliStuff.js",
1918
"ios": "react-native run-ios",
20-
"iPad": "react-native run-ios --simulator='iPad Pro (9.7 inch)'",
2119
"android": "react-native run-android",
20+
"iPad": "react-native run-ios --simulator='iPad Pro (9.7 inch)'",
2221
"pretest": "npm run lint",
2322
"test": "jest",
2423
"test:watch": "jest --watch",
2524
"lint": "eslint src -c .eslintrc.js --ext .tsx,.ts,.js",
2625
"lint:fix": "eslint src -c .eslintrc.js --fix",
27-
"lint:test": "mocha --compilers js:babel-core/register eslint-rules/tests/lib/rules",
2826
"xcode": "xed ios",
2927
"build:dev": "tsc --p tsconfig.dev.json",
30-
"build:src": "./node_modules/.bin/babel src --out-dir src --config-file ./src/.babelrc.json --extensions '.ts,.tsx' --ignore 'src/index.ts'",
31-
"build:lib": "./node_modules/.bin/babel lib --out-dir lib --config-file ./src/.babelrc.json --extensions '.ts,.tsx'",
32-
"build:exports": "npm run build:src && npm run build:lib",
33-
"build:packages": "node scripts/buildPackages.js",
3428
"build": "node scripts/build.js",
3529
"prepush": "npm run build:dev && npm run test",
36-
"log": "react-native log-ios | grep 'ethan -'",
3730
"docs:deploy": "./scripts/deployDocs.sh",
38-
"docs:build": "node scripts/build-docs.js",
31+
"docs:build": "node scripts/buildDocs.js",
3932
"snippets:build": "node scripts/generateSnippets.js",
40-
"bump:patch": "npm version patch",
4133
"demo": "./scripts/demo.sh",
42-
"release": "node ./scripts/release.js",
43-
"bkRelease": "node ./scripts/bkRelease.js"
34+
"release": "node ./scripts/release.js"
4435
},
4536
"dependencies": {
4637
"babel-plugin-transform-inline-environment-variables": "^0.0.2",
@@ -61,6 +52,7 @@
6152
"devDependencies": {
6253
"@babel/cli": "^7.16.8",
6354
"@babel/core": "^7.12.9",
55+
"@babel/plugin-transform-modules-commonjs": "^7.17.9",
6456
"@babel/preset-env": "^7.16.11",
6557
"@babel/preset-react": "^7.10.1",
6658
"@babel/runtime": "^7.12.5",
@@ -85,7 +77,6 @@
8577
"babel-jest": "^26.6.3",
8678
"babel-plugin-lodash": "^3.3.4",
8779
"babel-plugin-module-resolver": "^4.1.0",
88-
"babel-plugin-typescript-to-proptypes": "^1.3.2",
8980
"babel-preset-react-native": "*",
9081
"eslint": "^7.27.0",
9182
"eslint-config-wix": "2.0.0",

0 commit comments

Comments
 (0)