Skip to content

Commit 67bb209

Browse files
adids1221adids1221
committed
Merge branch 'v6' into release
2 parents 7e82d27 + 1493474 commit 67bb209

File tree

28 files changed

+168
-57
lines changed

28 files changed

+168
-57
lines changed

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

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export default class TextFieldScreen extends Component {
1414
state = {
1515
errorPosition: TextField.validationMessagePositions.TOP,
1616
shouldDisable: false,
17+
isReadonly: false,
1718
value: 'Initial Value',
1819
searching: false,
1920
preset: 'withUnderline'
@@ -50,7 +51,7 @@ export default class TextFieldScreen extends Component {
5051
}
5152

5253
render() {
53-
const {errorPosition, shouldDisable, price, preset} = this.state;
54+
const {errorPosition, shouldDisable, isReadonly, price, preset} = this.state;
5455
return (
5556
<ScrollView keyboardShouldPersistTaps="always">
5657
<View flex padding-page>
@@ -182,11 +183,19 @@ export default class TextFieldScreen extends Component {
182183
<Text h3 blue50 marginV-s4>
183184
Colors By State
184185
</Text>
185-
<Button
186-
label={shouldDisable ? 'Enable' : 'Disable'}
187-
onPress={() => this.setState({shouldDisable: !shouldDisable})}
188-
size={Button.sizes.xSmall}
189-
/>
186+
<View row>
187+
<Button
188+
label={isReadonly ? 'Enable' : 'Readonly'}
189+
onPress={() => this.setState({isReadonly: !isReadonly})}
190+
size={Button.sizes.xSmall}
191+
marginR-s4
192+
/>
193+
<Button
194+
label={shouldDisable ? 'Enable' : 'Disable'}
195+
onPress={() => this.setState({shouldDisable: !shouldDisable})}
196+
size={Button.sizes.xSmall}
197+
/>
198+
</View>
190199
</View>
191200

192201
<TextField
@@ -195,14 +204,16 @@ export default class TextFieldScreen extends Component {
195204
default: Colors.$textDefault,
196205
focus: Colors.$textGeneral,
197206
error: Colors.$textDangerLight,
198-
disabled: Colors.$textDisabled
207+
disabled: Colors.$textDisabled,
208+
readonly: Colors.$textNeutral
199209
}}
200210
placeholder="Enter valid email"
201211
validationMessage="Email is invalid"
202212
validate={'email'}
203213
validateOnChange
204214
fieldStyle={styles.withFrame}
205215
editable={!shouldDisable}
216+
readonly={isReadonly}
206217
/>
207218

208219
<View row spread centerV>
@@ -224,6 +235,7 @@ export default class TextFieldScreen extends Component {
224235
preset === 'withUnderline' ? styles.withUnderline : styles.withFrame
225236
}
226237
editable={!shouldDisable}
238+
readonly={isReadonly}
227239
/>
228240

229241
<Text h3 blue50 marginV-s4>

‎scripts/buildPackages/buildComponentsPackages.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const fs = require('fs');
2+
const _ = require('lodash');
3+
4+
/* Write all components as separate packages */
5+
const path = './src/components';
6+
fs.readdir(path, (err, files) => {
7+
if (!err) {
8+
files
9+
.filter((f) => f !== 'index.js')
10+
.forEach((file) => {
11+
fs.writeFileSync(`${file}.js`,
12+
`module.exports = require('${path}/${file}').default;\n`);
13+
const componentName = _.upperFirst(file);
14+
fs.writeFileSync(`${file}.d.ts`,
15+
`import {${componentName}} from './src';\nexport default ${componentName};\n`);
16+
});
17+
}
18+
});

‎scripts/buildPackages.js renamed to ‎scripts/buildPackages/buildCustomPackages.js

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ const packages = [
1414
filename: 'constants.js',
1515
content: `module.exports = require('./src/commons/Constants').default;\n`
1616
},
17+
{
18+
filename: 'textField.js',
19+
content: `module.exports = require('./src/components/textField/TextFieldMigrator').default;\n`
20+
},
1721
{
1822
filename: 'core.js',
1923
components: ['View', 'Text', 'Image', 'TouchableOpacity', 'Button'],
@@ -84,19 +88,3 @@ packages.forEach((package) => {
8488
fs.writeFileSync(filename, typings);
8589
}
8690
});
87-
88-
/* Write all components as separate packages */
89-
const path = './src/components';
90-
fs.readdir(path, (err, files) => {
91-
if (!err) {
92-
files
93-
.filter((f) => f !== 'index.js')
94-
.forEach((file) => {
95-
fs.writeFileSync(`${file}.js`,
96-
`module.exports = require('${path}/${file}').default;\n`);
97-
const componentName = _.upperFirst(file);
98-
fs.writeFileSync(`${file}.d.ts`,
99-
`import {${componentName}} from './src';\nexport default ${componentName};\n`);
100-
});
101-
}
102-
});

‎scripts/buildPackages/index.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const childProcess = require('child_process');
2+
3+
const path = 'scripts/buildPackages';
4+
5+
childProcess.execSync(`node ${path}/buildComponentsPackages`);
6+
childProcess.execSync(`node ${path}/buildCustomPackages`);

‎src/components/colorPalette/ColorPalette.api.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@
3838
{"name": "containerWidth", "type": "number", "description": "The container margins"},
3939
{"name": "containerStyle", "type": "ViewStyle", "description": "Component's container style"},
4040
{"name": "style", "type": "ViewStyle", "description": "Component's style"},
41-
{"name": "testID", "type": "string", "description": "The test id for e2e tests"}
41+
{"name": "testID", "type": "string", "description": "The test id for e2e tests"},
42+
{"name": "backgroundColor", "type": "string", "description": "The ColorPalette's background color"}
4243
],
4344
"snippet": [
4445
"<ColorPalette",

‎src/components/colorPalette/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ interface Props {
5454
style?: StyleProp<ViewStyle>;
5555
testID?: string;
5656
/**
57-
* Give the ColorPalette a background color
57+
* The ColorPalette's background color
5858
*/
5959
backgroundColor?: string;
6060
}

‎src/components/colorPicker/colorPicker.api.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@
3131
"description": "Accessibility labels as an object of strings",
3232
"default": "{\n addButton: 'add custom color using hex code',\n dismissButton: 'dismiss',\n doneButton: 'done',\n input: 'custom hex color code'\n}"
3333
},
34-
{"name": "style", "type": "ViewStyle", "description": "Component's style"},
35-
{"name": "testID", "type": "string", "description": "The test id for e2e tests"}
34+
{"name": "testID", "type": "string", "description": "The test id for e2e tests"},
35+
{"name": "backgroundColor", "type": "string", "description": "The ColorPicker's background color"}
3636
],
3737
"snippet": [
3838
"<ColorPicker",

‎src/components/colorPicker/index.tsx

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import Button from '../button';
77
import ColorPalette from '../colorPalette';
88
import {SWATCH_MARGIN, SWATCH_SIZE} from '../colorSwatch';
99
import ColorPickerDialog, {ColorPickerDialogProps} from './ColorPickerDialog';
10+
import {LogService} from '../../services';
1011

1112
interface Props extends ColorPickerDialogProps {
1213
/**
@@ -43,7 +44,7 @@ interface Props extends ColorPickerDialogProps {
4344
style?: StyleProp<ViewStyle>;
4445
testID?: string;
4546
/**
46-
* Give the ColorPicker a background color
47+
* The ColorPicker's background color
4748
*/
4849
backgroundColor?: string;
4950
}
@@ -70,6 +71,14 @@ class ColorPicker extends PureComponent<Props> {
7071
backgroundColor: Colors.$backgroundDefault
7172
};
7273

74+
constructor(props: Props) {
75+
super(props);
76+
77+
if (props.style) {
78+
LogService.warn(`UILib ColorPicker's 'style' prop is deprecated. You can use the 'backgroundColor' prop instead`);
79+
}
80+
}
81+
7382
state = {
7483
show: false
7584
};

‎src/components/drawer/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ interface DrawerProps {
133133
* @description: Drawer Component
134134
* @important: If your app works with RNN, your screen must be wrapped
135135
* with gestureHandlerRootHOC from 'react-native-gesture-handler'. see
136-
* @importantLink: https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation
136+
* @importantLink: https://docs.swmansion.com/react-native-gesture-handler/docs/installation/
137137
* @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Drawer/Drawer.gif?raw=true
138138
*/
139139
class Drawer extends PureComponent<DrawerProps> {

‎src/components/picker/PickerItemsList.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,12 @@ const PickerItemsList = (props: PickerItemsListProps) => {
8787
{topBarProps.doneLabel ?? 'Select'}
8888
</Text>
8989
</View>
90-
<WheelPicker initialValue={context.value as PickerSingleValue} items={items} onChange={setWheelPickerValue}/>
90+
<WheelPicker
91+
flatListProps={listProps}
92+
initialValue={context.value as PickerSingleValue}
93+
items={items}
94+
onChange={setWheelPickerValue}
95+
/>
9196
</View>
9297
);
9398
};

‎src/components/touchableOpacity/index.tsx

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import _ from 'lodash';
2-
import React, {BaseSyntheticEvent, PureComponent} from 'react';
3-
import {TouchableOpacity as RNTouchableOpacity, TouchableOpacityProps as RNTouchableOpacityProps} from 'react-native';
2+
import React, {PureComponent} from 'react';
3+
import {
4+
GestureResponderEvent,
5+
TouchableOpacity as RNTouchableOpacity,
6+
TouchableOpacityProps as RNTouchableOpacityProps
7+
} from 'react-native';
48
import {
59
asBaseComponent,
610
forwardRef,
@@ -43,10 +47,16 @@ export interface TouchableOpacityProps
4347
*/
4448
customValue?: any;
4549
style?: ViewProps['style'];
46-
onPress?: (props?: TouchableOpacityProps | any) => void;
47-
onPressIn?: (props?: TouchableOpacityProps | any) => void | RNTouchableOpacityProps['onPressIn'];
48-
onPressOut?: (props?: TouchableOpacityProps | any) => void | RNTouchableOpacityProps['onPressOut'];
49-
onLongPress?: (props?: TouchableOpacityProps | any) => void | RNTouchableOpacityProps['onLongPress'];
50+
onPress?: (props?: (TouchableOpacityProps & {event: GestureResponderEvent}) | any) => void;
51+
onPressIn?: (
52+
props?: TouchableOpacityProps | GestureResponderEvent | any
53+
) => void | RNTouchableOpacityProps['onPressIn'];
54+
onPressOut?: (
55+
props?: TouchableOpacityProps | GestureResponderEvent | any
56+
) => void | RNTouchableOpacityProps['onPressOut'];
57+
onLongPress?: (
58+
props?: (TouchableOpacityProps & {event: GestureResponderEvent}) | any
59+
) => void | RNTouchableOpacityProps['onLongPress'];
5060
}
5161

5262
type Props = BaseComponentInjectedProps & ForwardRefInjectedProps & TouchableOpacityProps;
@@ -155,12 +165,12 @@ class TouchableOpacity extends PureComponent<Props, {active: boolean}> {
155165
);
156166
}
157167

158-
onPress(event: BaseSyntheticEvent) {
159-
this.props.onPress?.({...this.props, ...event});
168+
onPress(event: GestureResponderEvent) {
169+
this.props.onPress?.({...this.props, event});
160170
}
161171

162-
onLongPress = (event: BaseSyntheticEvent) => {
163-
this.props.onLongPress?.({...this.props, ...event});
172+
onLongPress = (event: GestureResponderEvent) => {
173+
this.props.onLongPress?.({...this.props, event});
164174
};
165175
}
166176

‎src/components/touchableOpacity/touchableOpacity.api.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
"description": "Custom value of any type to pass on to TouchableOpacity and receive back in onPress callback"
2828
},
2929
{"name": "style", "type": "ViewStyle", "description": "Custom style"},
30-
{"name": "onPress", "type": "(props) => void", "description": "On press callback"}
30+
{"name": "onPress", "type": "(props?: TouchableOpacityProps & {event: GestureResponderEvent} | any) => void", "description": "On press callback"}
3131
],
3232
"snippet": [
3333
"<TouchableOpacity onPress={() => console.log('pressed')$1}/>"

‎src/incubator/Calendar/Agenda.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
import React, {useContext, useCallback, useRef} from 'react';
22
import {runOnJS, useAnimatedReaction, useSharedValue} from 'react-native-reanimated';
3-
import {FlashList, ViewToken} from '@shopify/flash-list';
3+
import {FlashListPackage} from 'optionalDeps';
4+
import type {FlashList as FlashListType, ViewToken} from '@shopify/flash-list';
45
import {BorderRadiuses} from 'style';
56
import View from '../../components/view';
67
import Text from '../../components/text';
78
import {isSameDay, isSameMonth} from './helpers/DateUtils';
89
import {InternalEvent, Event, DateSectionHeader, UpdateSource} from './types';
910
import CalendarContext from './CalendarContext';
1011

12+
const {FlashList} = FlashListPackage;
13+
1114
// TODO: Fix initial scrolling
1215
function Agenda() {
1316
const {data, selectedDate, setDate, updateSource} = useContext(CalendarContext);
14-
const flashList = useRef<FlashList<InternalEvent>>(null);
17+
const flashList = useRef<FlashListType<InternalEvent>>(null);
1518
const closestSectionHeader = useSharedValue<DateSectionHeader | null>(null);
1619
const scrolledByUser = useSharedValue<boolean>(false);
1720

‎src/incubator/Calendar/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import findIndex from 'lodash/findIndex';
22
import React, {PropsWithChildren, useCallback, useMemo, useRef, useEffect} from 'react';
33
import {useSharedValue, useAnimatedReaction, runOnJS} from 'react-native-reanimated';
4-
import {FlashList} from '@shopify/flash-list';
4+
import {FlashListPackage} from 'optionalDeps';
55
import {Constants} from '../../commons/new';
66
import {generateMonthItems} from './helpers/CalendarProcessor';
77
import {addHeaders} from './helpers/DataProcessor';
@@ -13,6 +13,8 @@ import Agenda from './Agenda';
1313
import TodayButton from './TodayButton';
1414
import Header from './Header';
1515

16+
const {FlashList} = FlashListPackage;
17+
1618
// TODO: Move this logic elsewhere to pre-generate on install?
1719
const MONTH_ITEMS = generateMonthItems(2);
1820
const getIndex = (date: number) => {
@@ -105,7 +107,6 @@ function Calendar(props: PropsWithChildren<CalendarProps>) {
105107
<CalendarContext.Provider value={contextValue}>
106108
{staticHeader && <Header/>}
107109
<FlashList
108-
// @ts-expect-error
109110
ref={flashListRef}
110111
estimatedItemSize={calendarWidth}
111112
data={MONTH_ITEMS}

‎src/incubator/TextField/FieldContext.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const FieldContext = createContext<FieldContextType>({
88
isValid: true,
99
failingValidatorIndex: undefined,
1010
disabled: false,
11+
readonly: false,
1112
validateField: _.noop,
1213
checkValidity: () => true
1314
});

‎src/incubator/TextField/Input.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import useImperativeInputHandle from './useImperativeInputHandle';
99

1010
const DEFAULT_INPUT_COLOR: ColorType = {
1111
default: Colors.$textDefault,
12-
disabled: Colors.$textDisabled
12+
disabled: Colors.$textDisabled,
13+
readonly: Colors.$textNeutral
1314
};
1415

1516
const Input = ({
@@ -19,6 +20,7 @@ const Input = ({
1920
forwardedRef,
2021
formatter,
2122
useGestureHandlerInput,
23+
readonly,
2224
...props
2325
}: InputProps & ForwardRefInjectedProps) => {
2426
const inputRef = useImperativeInputHandle(forwardedRef, {onChangeText: props.onChangeText});
@@ -27,6 +29,7 @@ const Input = ({
2729
const inputColor = getColorByState(color, context);
2830
const placeholderTextColor = getColorByState(props.placeholderTextColor, context);
2931
const value = formatter && !context.isFocused ? formatter(props.value) : props.value;
32+
const disabled = props.editable === false || readonly;
3033

3134
const TextInput = useMemo(() => {
3235
if (useGestureHandlerInput) {
@@ -43,13 +46,14 @@ const Input = ({
4346
<TextInput
4447
style={[styles.input, !!inputColor && {color: inputColor}, style, Constants.isWeb && styles.webStyle]}
4548
{...props}
49+
editable={!disabled}
4650
value={value}
4751
placeholder={placeholder}
4852
placeholderTextColor={placeholderTextColor}
4953
// @ts-expect-error
5054
ref={inputRef}
5155
underlineColorAndroid="transparent"
52-
accessibilityState={{disabled: props.editable === false}}
56+
accessibilityState={{disabled}}
5357
/>
5458
);
5559
};

‎src/incubator/TextField/Label.tsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,19 @@ import React, {useContext, useMemo} from 'react';
22
import {StyleSheet} from 'react-native';
33
import {Colors} from '../../style';
44
import Text from '../../components/text';
5-
import {LabelProps, ValidationMessagePosition} from './types';
5+
import {ColorType, LabelProps, ValidationMessagePosition} from './types';
66
import {getColorByState} from './Presenter';
77
import FieldContext from './FieldContext';
88

99

10+
const DEFAULT_LABEL_COLOR: ColorType = {
11+
default: Colors.$textDefault,
12+
readonly: Colors.$textNeutral
13+
};
14+
1015
const Label = ({
1116
label,
12-
labelColor = Colors.$textDefault,
17+
labelColor = DEFAULT_LABEL_COLOR,
1318
labelStyle,
1419
labelProps,
1520
validationMessagePosition,

‎src/incubator/TextField/Presenter.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ export function getColorByState(color?: ColorType, context?: FieldContextType) {
1414
} else if (_.isPlainObject(color)) {
1515
if (context?.disabled) {
1616
finalColor = color?.disabled;
17+
} else if (context?.readonly) {
18+
finalColor = color?.readonly;
1719
} else if (!context?.isValid) {
1820
finalColor = color?.error;
1921
} else if (context?.isFocused) {

0 commit comments

Comments
 (0)