Skip to content

Commit 23a3c06

Browse files
M-i-k-e-lM-i-k-e-l
committed
Merge branch 'master' into release
2 parents ae9b5f1 + d64843e commit 23a3c06

Some content is hidden

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

51 files changed

+1629
-60
lines changed

‎demo/src/screens/MenuStructure.js

+1
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,7 @@ export const navigationData = {
174174
Incubator: {
175175
title: 'Incubator (Experimental)',
176176
screens: [
177+
{title: 'Calendar', tags: 'calendar', screen: 'unicorn.components.IncubatorCalendarScreen'},
177178
{title: 'ChipsInput (New)', tags: 'chips input', screen: 'unicorn.components.IncubatorChipsInputScreen'},
178179
{title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
179180
{title: 'Dialog (New)', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},

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

+13-3
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,10 @@ export default class ColorSwatchScreen extends Component {
5151
this.setState({color2: value});
5252
};
5353

54+
unavailableOnPress = () => {
55+
console.log(`Pressed on unavailable color swatch!`);
56+
};
57+
5458
render() {
5559
const {color, color1, color2, selected} = this.state;
5660

@@ -61,10 +65,16 @@ export default class ColorSwatchScreen extends Component {
6165
Single ColorSwatch
6266
</Text>
6367
<View row>
64-
<ColorSwatch selected={selected} onPress={this.onPress}/>
6568
<View>
66-
<ColorSwatch selected color={Colors.$backgroundMajorLight}/>
67-
<Text>Disabled</Text>
69+
<ColorSwatch selected={selected} onPress={this.onPress}/>
70+
</View>
71+
<View>
72+
<ColorSwatch color={Colors.$backgroundMajorLight}/>
73+
<Text text90R>Disabled</Text>
74+
</View>
75+
<View>
76+
<ColorSwatch unavailable onPress={this.unavailableOnPress} color={Colors.yellow10}/>
77+
<Text text90R>Unavailable</Text>
6878
</View>
6979
</View>
7080

‎demo/src/screens/incubatorScreens/IncubatorCalendarScreen/MockData.ts

+2
Large diffs are not rendered by default.

‎demo/src/screens/incubatorScreens/IncubatorCalendarScreen/index.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, {Component} from 'react';
2+
import {View, Incubator} from 'react-native-ui-lib';
3+
import {data} from './MockData';
4+
5+
export default class CalendarScreen extends Component {
6+
// constructor(props) {
7+
// super(props);
8+
9+
// setTimeout(() => {
10+
// this.setState({date: 1676026748000});
11+
// }, 2000);
12+
// }
13+
14+
state = {
15+
date: undefined
16+
};
17+
18+
render() {
19+
return (
20+
<View flex>
21+
<Incubator.Calendar data={data} staticHeader initialDate={this.state.date}>
22+
<Incubator.Calendar.Agenda/>
23+
</Incubator.Calendar>
24+
</View>
25+
);
26+
}
27+
}

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

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
22

33
export function registerScreens(registrar) {
4+
registrar('unicorn.components.IncubatorCalendarScreen', () => require('./IncubatorCalendarScreen').default);
45
registrar('unicorn.components.IncubatorChipsInputScreen', () => require('./IncubatorChipsInputScreen').default);
56
registrar('unicorn.incubator.TouchableOpacityScreen', () =>
67
gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"pre-push": "npm run build:dev && npm run test",
3333
"docs:deploy": "./scripts/deployDocs.sh",
3434
"docs:build": "node scripts/buildDocs.js",
35+
"calendar:createMocks": "node scripts/createCalendarMockData.js",
3536
"snippets:build": "node scripts/generateSnippets.js",
3637
"demo": "./scripts/demo.sh",
3738
"release": "node ./scripts/release.js"
@@ -40,6 +41,7 @@
4041
"babel-plugin-transform-inline-environment-variables": "^0.0.2",
4142
"color": "^3.1.0",
4243
"commons-validator-js": "^1.0.237",
44+
"date-fns": "^2.29.3",
4345
"deprecated-react-native-prop-types": "^2.3.0",
4446
"hoist-non-react-statics": "^3.0.0",
4547
"lodash": "^4.17.21",
@@ -107,7 +109,7 @@
107109
"react-native": "0.68.2",
108110
"react-native-gesture-handler": "2.5.0",
109111
"react-native-haptic-feedback": "^1.11.0",
110-
"react-native-linear-gradient": "2.5.6",
112+
"react-native-linear-gradient": "2.6.2",
111113
"react-native-navigation": "7.30.0",
112114
"react-native-reanimated": "2.13.0",
113115
"react-native-shimmer-placeholder": "^2.0.6",

‎scripts/buildPackages.js

+4
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@ const packages = [
1010
filename: 'config.js',
1111
content: `module.exports = require('./src/commons/Config').default;\n`
1212
},
13+
{
14+
filename: 'constants.js',
15+
content: `module.exports = require('./src/commons/Constants').default;\n`
16+
},
1317
{
1418
filename: 'core.js',
1519
components: ['View', 'Text', 'Image', 'TouchableOpacity', 'Button'],

‎scripts/createCalendarMockData.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const fs = require('fs');
2+
const HOUR_IN_MS = 60 * 60 * 1000;
3+
const ID_LENGTH = 10;
4+
5+
function generateId() {
6+
let result = '';
7+
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
8+
const charactersLength = characters.length;
9+
for (let i = 0; i < ID_LENGTH; i++) {
10+
result += characters.charAt(Math.floor(Math.random() * charactersLength));
11+
}
12+
return result;
13+
}
14+
15+
const data = [];
16+
17+
for (let year = 2021; year <= 2023; ++year) {
18+
for (let month = 0; month <= 11; ++month) {
19+
for (let day = 1; day <= 31; day += Math.random() > 0.5 ? 2 : 1) {
20+
for (let hour = 9; hour <= 19; hour += Math.random() > 0.5 ? 4 : 3) {
21+
const startDate = new Date(year, month, day, hour, 0);
22+
if (startDate.getDay() >= 2 && startDate.getDay() <= 5) {
23+
const start = startDate.getTime();
24+
const end = start + HOUR_IN_MS * (Math.random() > 0.5 ? 0.5 : 1);
25+
const id = generateId();
26+
data.push({id, start, end});
27+
}
28+
}
29+
}
30+
}
31+
}
32+
33+
console.log(`${data.length} events were created`);
34+
35+
fs.writeFileSync('demo/src/screens/incubatorScreens/IncubatorCalendarScreen/MockData.ts',
36+
`// Note: to generate new data run calendar:createMocks and update createCalendarMockData script \n` +
37+
`export const data = ${JSON.stringify(data)};`);

‎src/components/checkbox/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -240,9 +240,9 @@ class Checkbox extends Component<CheckboxProps, CheckboxState> {
240240
render() {
241241
const {label, labelStyle, containerStyle, labelProps} = this.props;
242242
return label ? (
243-
<View row centerV style={[containerStyle]}>
243+
<View row centerV style={containerStyle}>
244244
{this.renderCheckbox()}
245-
<Text style={[this.styles.checkboxLabel, labelStyle]} {...labelProps} onPress={this.onPress}>
245+
<Text flexS style={[this.styles.checkboxLabel, labelStyle]} {...labelProps} onPress={this.onPress}>
246246
{label}
247247
</Text>
248248
</View>

‎src/components/colorSwatch/colorSwatch.api.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@
1919
{"name": "onPress", "type": "(value: string, options: object) => void", "description": "Callback from press event"},
2020
{"name": "index", "type": "number", "description": "The index of the Swatch if in array"},
2121
{"name": "style", "type": "ViewStyle", "description": "Component's style"},
22-
{"name": "testID", "type": "string", "description": "The test id for e2e tests"}
22+
{"name": "testID", "type": "string", "description": "The test id for e2e tests"},
23+
{"name": "unavailable", "type": "boolean", "description": "Is the initial state is unavailable"},
24+
{"name": "size", "type": "number", "description": "Color Swatch size"}
2325
],
24-
"snippet": [
25-
"<ColorSwatch color={Colors.red30$1} selected={true$2} onPress={() => console.log('pressed')$3}/>"
26-
]
26+
"snippet": ["<ColorSwatch color={Colors.red30$1} selected={true$2} onPress={() => console.log('pressed')$3}/>"]
2727
}

‎src/components/colorSwatch/index.tsx

+30-15
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ interface Props {
2121
* Is the initial state is selected
2222
*/
2323
selected?: boolean;
24+
/**
25+
* Is the initial state is unavailable
26+
*/
27+
unavailable?: boolean;
2428
/**
2529
* Is first render should be animated
2630
*/
@@ -32,6 +36,10 @@ interface Props {
3236
index?: number;
3337
style?: StyleProp<ViewStyle>;
3438
testID?: string;
39+
/**
40+
* Color swatch size
41+
*/
42+
size?: number;
3543
}
3644
export type ColorSwatchProps = Props;
3745

@@ -133,7 +141,7 @@ class ColorSwatch extends PureComponent<Props> {
133141
};
134142

135143
renderContent() {
136-
const {style, color, onPress, ...others} = this.props;
144+
const {style, color, onPress, unavailable, size = DEFAULT_SIZE, ...others} = this.props;
137145
const {isSelected} = this.state;
138146
const Container = onPress ? TouchableOpacity : View;
139147
const tintColor = this.getTintColor(color);
@@ -147,21 +155,25 @@ class ColorSwatch extends PureComponent<Props> {
147155
throttleTime={0}
148156
hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
149157
onPress={this.onPress}
150-
style={[this.styles.container, style]}
158+
style={[this.styles.container, {width: size, height: size, borderRadius: size / 2}, style]}
151159
onLayout={this.onLayout}
152160
{...accessibilityInfo}
153161
>
154162
{Colors.isTransparent(color) && (
155163
<Image source={transparentImage} style={this.styles.transparentImage} resizeMode={'cover'}/>
156164
)}
157-
<Animated.Image
158-
source={Assets.icons.check}
159-
style={{
160-
tintColor,
161-
opacity: isSelected,
162-
transform: [{scaleX: isSelected}, {scaleY: isSelected}]
163-
}}
164-
/>
165+
{unavailable ? (
166+
<View style={[this.styles.unavailable, {backgroundColor: tintColor}]}/>
167+
) : (
168+
<Animated.Image
169+
source={Assets.icons.check}
170+
style={{
171+
tintColor,
172+
opacity: isSelected,
173+
transform: [{scaleX: isSelected}, {scaleY: isSelected}]
174+
}}
175+
/>
176+
)}
165177
</Container>
166178
);
167179
}
@@ -196,12 +208,9 @@ function createStyles({color = Colors.grey30}) {
196208
return StyleSheet.create({
197209
container: {
198210
backgroundColor: color,
199-
width: DEFAULT_SIZE,
200-
height: DEFAULT_SIZE,
201-
borderRadius: DEFAULT_SIZE / 2,
202-
margin: SWATCH_MARGIN,
203211
borderWidth: color === 'transparent' ? undefined : 1,
204-
borderColor: Colors.rgba(Colors.$outlineDisabledHeavy, 0.2)
212+
borderColor: Colors.rgba(Colors.$outlineDisabledHeavy, 0.2),
213+
margin: SWATCH_MARGIN
205214
},
206215
transparentImage: {
207216
...StyleSheet.absoluteFillObject,
@@ -210,6 +219,12 @@ function createStyles({color = Colors.grey30}) {
210219
borderWidth: 1,
211220
borderRadius: BorderRadiuses.br100,
212221
borderColor: Colors.rgba(Colors.$outlineDisabledHeavy, 0.2)
222+
},
223+
unavailable: {
224+
height: '100%',
225+
width: 3,
226+
transform: [{rotate: '45deg'}],
227+
opacity: 0.7
213228
}
214229
});
215230
}

‎src/components/radioButton/index.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,7 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
141141
const {opacityAnimationValue, scaleAnimationValue} = this.state;
142142
const animationTime = 150;
143143
const animationDelay = 60;
144+
144145
if (selected) {
145146
Animated.parallel([
146147
Animated.timing(opacityAnimationValue, {
@@ -229,7 +230,7 @@ class RadioButton extends PureComponent<Props, RadioButtonState> {
229230
const {label, labelStyle, testID} = this.props;
230231
return (
231232
label && (
232-
<Text marginL-10={!this.isContentOnLeft} marginR-10={this.isContentOnLeft} $textDefault style={labelStyle} testID={`${testID}.label`}>
233+
<Text flexS marginL-10={!this.isContentOnLeft} marginR-10={this.isContentOnLeft} $textDefault style={labelStyle} testID={`${testID}.label`}>
233234
{label}
234235
</Text>
235236
)

‎src/components/touchableOpacity/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@ export interface TouchableOpacityProps
4444
customValue?: any;
4545
style?: ViewProps['style'];
4646
onPress?: (props?: TouchableOpacityProps | any) => void;
47-
onPressIn?: (props?: TouchableOpacityProps) => void | RNTouchableOpacityProps['onPressIn'];
48-
onPressOut?: (props?: TouchableOpacityProps) => void | RNTouchableOpacityProps['onPressOut'];
49-
onLongPress?: (props?: TouchableOpacityProps) => void | RNTouchableOpacityProps['onLongPress'];
47+
onPressIn?: (props?: TouchableOpacityProps | any) => void | RNTouchableOpacityProps['onPressIn'];
48+
onPressOut?: (props?: TouchableOpacityProps | any) => void | RNTouchableOpacityProps['onPressOut'];
49+
onLongPress?: (props?: TouchableOpacityProps | any) => void | RNTouchableOpacityProps['onLongPress'];
5050
}
5151

5252
type Props = BaseComponentInjectedProps & ForwardRefInjectedProps & TouchableOpacityProps;

0 commit comments

Comments
 (0)