Skip to content

Commit 02fa379

Browse files
ahwelgemoedahwelgemoed
committed
feat: 🎨 color on Cal Atts
1 parent c5ee475 commit 02fa379

File tree

7 files changed

+80
-43
lines changed

7 files changed

+80
-43
lines changed

‎packages/native-widgets/calendar-native-widget/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "calendarnativewidget",
33
"widgetName": "CalendarNativeWidget",
4-
"version": "1.0.4",
4+
"version": "1.0.5",
55
"description": "Calendar Widget for Mendix Native",
66
"copyright": "2021 Mendix Technology BV",
77
"author": "Arno Welgemoed",

‎packages/native-widgets/calendar-native-widget/src/CalendarNativeWidget.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@ export class CalendarNativeWidget extends Component<CalendarNativeWidgetProps<Cu
2727
incomingDates,
2828
selectedColor,
2929
darkModeOption,
30+
dateDotColor,
31+
dateSelectColor,
3032
activeSwipeDown,
3133
disableWeekends,
3234
disablePastDates,
@@ -41,6 +43,8 @@ export class CalendarNativeWidget extends Component<CalendarNativeWidgetProps<Cu
4143
<CalendarInit
4244
date={date}
4345
dotColor={dotColor}
46+
dateDotColor={dateDotColor}
47+
dateSelectColor={dateSelectColor}
4448
buttonText={buttonText}
4549
startOfWeek={startOfWeek}
4650
initialDate={initialDate}

‎packages/native-widgets/calendar-native-widget/src/CalendarNativeWidget.xml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,21 @@
2424
</attributeTypes>
2525
</property>
2626

27+
<property key="dateSelectColor" type="attribute" dataSource="incomingDates" required="false">
28+
<caption>Date Color</caption>
29+
<description></description>
30+
<attributeTypes>
31+
<attributeType name="String"/>
32+
</attributeTypes>
33+
</property>
34+
<property key="dateDotColor" type="attribute" dataSource="incomingDates" required="false">
35+
<caption>Date Color</caption>
36+
<description></description>
37+
<attributeTypes>
38+
<attributeType name="String"/>
39+
</attributeTypes>
40+
</property>
41+
2742
<property key="isActiveDate" type="attribute" dataSource="incomingDates" required="false">
2843
<caption>Is Date Active</caption>
2944
<description>Used to show if date is active or not (Not Required | See Docs)</description>

‎packages/native-widgets/calendar-native-widget/src/components/CalendarInit.tsx‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createElement, Fragment, cloneElement, useState, useEffect, ReactElement } from "react";
2-
import { View, Button } from "react-native";
2+
import { View, Button, Text } from "react-native";
33
import { Calendar, DateObject } from "react-native-calendars";
44
import { Style } from "@mendix/pluggable-widgets-tools";
55
import GestureRecognizer from "react-native-swipe-gestures";
@@ -32,6 +32,8 @@ const CalendarInit = ({
3232
volatileDate,
3333
propertyName,
3434
dynamicOffset,
35+
dateDotColor,
36+
dateSelectColor,
3537
incomingDates,
3638
selectedColor,
3739
darkModeOption,
@@ -108,8 +110,9 @@ const CalendarInit = ({
108110
...a,
109111
[c.formattedDate]: {
110112
marked: true,
111-
disabled: isDateDisabled(c),
112-
dotColor: defaultDotColor
113+
dateSelectedColorAtt: c.dateSelectColorAtt ? c.dateSelectColorAtt : defaultSelectedColor,
114+
dotColor: c.dateDotColorAtt ? c.dateDotColorAtt : defaultDotColor,
115+
disabled: isDateDisabled(c)
113116
}
114117
};
115118
return internalDate;
@@ -123,10 +126,14 @@ const CalendarInit = ({
123126
if (incomingDates) {
124127
const destructedValues = incomingDates.items?.map((item: any) => {
125128
const dateValue = date(item);
129+
const dateSelectColorAtt = dateSelectColor && dateSelectColor(item).value;
130+
const dateDotColorAtt = dateDotColor && dateDotColor(item).value;
126131
const isActiveDateValue = isActiveDate ? isActiveDate(item) : NOT_PROVIDED;
127132
const formattedDate = format(dateValue.value as Date, DATE_FORMAT);
128133
return {
129134
dateValue,
135+
dateDotColorAtt,
136+
dateSelectColorAtt,
130137
formattedDate,
131138
isActiveDateValue
132139
};
@@ -195,7 +202,7 @@ const CalendarInit = ({
195202
};
196203
/**
197204
* This is done (with the Clone Element) to be able to pass Conditional Props to the Calendar Components
198-
* This Helps so that we can keep the CORE Calendar Module with out the need to Fork from Github
205+
* This Helps so that we can keep the CORE Calendar Module with out the need to Fork from Github
199206
*/
200207
const rendererForActiveSwipeDown = activeSwipeDown
201208
? {
@@ -214,6 +221,7 @@ const CalendarInit = ({
214221
)
215222
}
216223
: {};
224+
217225
const rendererForMinDate = disablePastDates
218226
? {
219227
minDate: Date.now()
@@ -222,11 +230,12 @@ const CalendarInit = ({
222230
const rendererForTheme = {
223231
theme: witchTheme(darkModeOption)
224232
};
225-
console.log(`startDate`, startDate);
233+
console.log(`activeSwipeDown`, rendererForActiveSwipeDown);
226234
return (
227235
<View>
228236
{startDate && (
229237
<Fragment>
238+
<Text> {activeSwipeDown ? "yes" : "no"}</Text>
230239
<GestureRecognizer
231240
config={config}
232241
style={{ paddingBottom: 10 }}
@@ -249,7 +258,12 @@ const CalendarInit = ({
249258
selected: true,
250259
userSelected: true,
251260
disableTouchEvent: true,
252-
selectedColor: defaultSelectedColor,
261+
selectedColor:
262+
// @ts-ignore
263+
inComingDates[selected] && inComingDates[selected].dateSelectedColorAtt
264+
? // @ts-ignore
265+
inComingDates[selected].dateSelectedColorAtt
266+
: defaultSelectedColor,
253267
selectedTextColor: defaultTextColor
254268
},
255269
...weekends
@@ -265,7 +279,7 @@ const CalendarInit = ({
265279
onMonthChange(month);
266280
}}
267281
/>,
268-
{ ...rendererForActiveSwipeDown, ...rendererForMinDate, ...rendererForTheme }
282+
{ ...rendererForMinDate, ...rendererForTheme }
269283
)}
270284
</GestureRecognizer>
271285
{!autoTriggerAction && (

‎packages/native-widgets/calendar-native-widget/src/package.xml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<?xml version="1.0" encoding="utf-8" ?>
22
<package xmlns="http://www.mendix.com/package/1.0/">
3-
<clientModule name="CalendarNativeWidget" version="1.0.4" xmlns="http://www.mendix.com/clientModule/1.0/">
3+
<clientModule name="CalendarNativeWidget" version="1.0.5" xmlns="http://www.mendix.com/clientModule/1.0/">
44
<widgetFiles>
55
<widgetFile path="CalendarNativeWidget.xml"/>
66
</widgetFiles>

‎packages/native-widgets/calendar-native-widget/typings/CalendarNativeWidgetProps.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ export interface CalendarNativeWidgetProps<Style> {
1414
style: Style[];
1515
incomingDates?: ListValue;
1616
date: ListAttributeValue<Date>;
17+
dateSelectColor?: ListAttributeValue<string>;
18+
dateDotColor?: ListAttributeValue<string>;
1719
isActiveDate?: ListAttributeValue<boolean>;
1820
volatileDate?: EditableValue<Date>;
1921
onClick?: ActionValue;
@@ -39,6 +41,8 @@ export interface CalendarNativeWidgetPreviewProps {
3941
style: string;
4042
incomingDates: {} | null;
4143
date: string;
44+
dateSelectColor: string;
45+
dateDotColor: string;
4246
isActiveDate: string;
4347
volatileDate: string;
4448
onClick: {} | null;

‎packages/web-widgets/edit-dropdown-widget/package.json‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
{
2-
"name": "editdropdown",
3-
"widgetName": "Editdropdown",
4-
"version": "0.0.1",
5-
"description": "My widget description",
6-
"copyright": "2020 Mendix Technology BV",
7-
"author": "ahwelgemoed",
8-
"engines": {
9-
"node": ">=12"
10-
},
11-
"config": {
12-
"projectPath": "./tests/testProject/",
13-
"mendixHost": "http://localhost:8080",
14-
"developmentPort": "3000"
15-
},
16-
"packagePath": "mendix",
17-
"scripts": {
18-
"start": "pluggable-widgets-tools start:web",
19-
"build": "pluggable-widgets-tools build:web",
20-
"lint": "pluggable-widgets-tools lint",
21-
"lint:fix": "pluggable-widgets-tools lint:fix",
22-
"prerelease": "npm run lint",
23-
"release": "pluggable-widgets-tools release:web"
24-
},
25-
"license": "Apache-2.0",
26-
"devDependencies": {
27-
"@mendix/pluggable-widgets-tools": "^9.0.0",
28-
"@types/big.js": "^6.0.2",
29-
"@types/classnames": "^2.2.4",
30-
"@types/react": "~17.0.1",
31-
"@types/react-dom": "~17.0.1"
32-
},
33-
"dependencies": {
34-
"classnames": "^2.2.6"
35-
}
2+
"name": "editdropdown",
3+
"widgetName": "Editdropdown",
4+
"version": "0.0.1",
5+
"description": "My widget description",
6+
"copyright": "2021 Mendix Technology BV",
7+
"author": "ahwelgemoed",
8+
"engines": {
9+
"node": ">=12"
10+
},
11+
"config": {
12+
"projectPath": "./tests/testProject/",
13+
"mendixHost": "http://localhost:8080",
14+
"developmentPort": "3000"
15+
},
16+
"packagePath": "mendix",
17+
"scripts": {
18+
"start": "pluggable-widgets-tools start:web",
19+
"build": "pluggable-widgets-tools build:web",
20+
"lint": "pluggable-widgets-tools lint",
21+
"lint:fix": "pluggable-widgets-tools lint:fix",
22+
"prerelease": "npm run lint",
23+
"release": "pluggable-widgets-tools release:web"
24+
},
25+
"license": "Apache-2.0",
26+
"devDependencies": {
27+
"@mendix/pluggable-widgets-tools": "^9.0.0",
28+
"@types/big.js": "^6.0.2",
29+
"@types/classnames": "^2.2.4",
30+
"@types/react": "~17.0.1",
31+
"@types/react-dom": "~17.0.1"
32+
},
33+
"dependencies": {
34+
"classnames": "^2.2.6"
35+
}
3636
}

0 commit comments

Comments
 (0)