Skip to content

Commit 4c040b2

Browse files
[WC-2790]: update design/structure modes on Calendar (#1626)
2 parents 83cff6d + aff119c commit 4c040b2

File tree

11 files changed

+118
-39
lines changed

11 files changed

+118
-39
lines changed
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import commonjs from "@rollup/plugin-commonjs";
2+
3+
export default args => {
4+
const result = args.configDefaultConfig;
5+
return result.map(config => {
6+
config.output.inlineDynamicImports = true;
7+
if (config.output.format !== "es") {
8+
return config;
9+
}
10+
return {
11+
...config,
12+
plugins: [
13+
...config.plugins.map(plugin => {
14+
if (plugin && plugin.name === "commonjs") {
15+
// replace common js plugin that transforms
16+
// external requires to imports
17+
// this is needed in order to work with modern client
18+
return commonjs({
19+
extensions: [".js", ".jsx", ".tsx", ".ts"],
20+
transformMixedEsModules: true,
21+
requireReturnsDefault: "auto",
22+
esmExternals: true
23+
});
24+
}
25+
26+
return plugin;
27+
})
28+
]
29+
};
30+
});
31+
};

packages/pluggableWidgets/calendar-web/src/Calendar.editorConfig.ts

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import {
2-
StructurePreviewProps,
32
container,
43
rowLayout,
54
structurePreviewPalette,
5+
StructurePreviewProps,
6+
svgImage,
67
text
78
} from "@mendix/widget-plugin-platform/preview/structure-preview-api";
89
import { Properties, hidePropertyIn, hidePropertiesIn } from "@mendix/pluggable-widgets-tools";
910
import { CalendarPreviewProps } from "../typings/CalendarProps";
11+
import IconSVGDark from "./assets/StructureCalendarDark.svg";
12+
import IconSVG from "./assets/StructureCalendarLight.svg";
1013

1114
export function getProperties(values: CalendarPreviewProps, defaultProperties: Properties): Properties {
1215
if (values.heightUnit === "percentageOfWidth") {
@@ -41,10 +44,20 @@ export function getProperties(values: CalendarPreviewProps, defaultProperties: P
4144

4245
export function getPreview(_values: CalendarPreviewProps, isDarkMode: boolean): StructurePreviewProps {
4346
const palette = structurePreviewPalette[isDarkMode ? "dark" : "light"];
47+
const readOnly = _values.readOnly;
4448

45-
return rowLayout({ columnSize: "grow", borders: true, backgroundColor: palette.background.containerFill })(
46-
container()(),
47-
rowLayout({ grow: 2, padding: 8 })(text({ fontColor: palette.text.primary, grow: 10 })("calendar")),
48-
container()()
49+
return container({
50+
backgroundColor: readOnly ? palette.background.containerDisabled : palette.background.topbarData,
51+
borders: true
52+
})(
53+
rowLayout({
54+
columnSize: "grow",
55+
padding: 6
56+
})(
57+
svgImage({ width: 16, height: 16, grow: 0 })(
58+
decodeURIComponent((isDarkMode ? IconSVGDark : IconSVG).replace("data:image/svg+xml,", ""))
59+
),
60+
text({ fontColor: palette.text.primary })("Calendar")
61+
)
4962
);
5063
}

packages/pluggableWidgets/calendar-web/src/Calendar.editorPreview.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@ import { ReactElement, createElement } from "react";
44
import { Calendar, dateFnsLocalizer } from "react-big-calendar";
55
import { CalendarPreviewProps } from "../typings/CalendarProps";
66
import { CustomToolbar } from "./components/Toolbar";
7-
import "react-big-calendar/lib/css/react-big-calendar.css";
87
import { constructWrapperStyle, WrapperStyleProps } from "./utils/style-utils";
98
import { eventPropGetter } from "./utils/calendar-utils";
109

10+
import "react-big-calendar/lib/css/react-big-calendar.css";
11+
import "./ui/Calendar.scss";
12+
1113
const localizer = dateFnsLocalizer({
1214
format: dateFns.format,
1315
parse: dateFns.parse,

packages/pluggableWidgets/calendar-web/src/__tests__/__snapshots__/Calendar.spec.tsx.snap

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ exports[`Calendar renders correctly with basic props 1`] = `
1616
class="calendar-toolbar"
1717
>
1818
<div
19-
class="align-left btn-group"
19+
class="btn-group"
2020
>
2121
<button
2222
class="btn btn-default"
@@ -44,7 +44,7 @@ exports[`Calendar renders correctly with basic props 1`] = `
4444
</button>
4545
</div>
4646
<div
47-
class="align-center btn-group"
47+
class="btn-group"
4848
>
4949
<span
5050
class="calendar-label"
@@ -53,7 +53,7 @@ exports[`Calendar renders correctly with basic props 1`] = `
5353
</span>
5454
</div>
5555
<div
56-
class="align-right btn-group"
56+
class="btn-group"
5757
>
5858
<button
5959
class="btn btn-default"
@@ -767,7 +767,7 @@ exports[`Calendar renders correctly with basic props 1`] = `
767767
class="calendar-toolbar"
768768
>
769769
<div
770-
class="align-left btn-group"
770+
class="btn-group"
771771
>
772772
<button
773773
class="btn btn-default"
@@ -795,7 +795,7 @@ exports[`Calendar renders correctly with basic props 1`] = `
795795
</button>
796796
</div>
797797
<div
798-
class="align-center btn-group"
798+
class="btn-group"
799799
>
800800
<span
801801
class="calendar-label"
@@ -804,7 +804,7 @@ exports[`Calendar renders correctly with basic props 1`] = `
804804
</span>
805805
</div>
806806
<div
807-
class="align-right btn-group"
807+
class="btn-group"
808808
>
809809
<button
810810
class="btn btn-default"
Lines changed: 6 additions & 0 deletions
Loading
Lines changed: 6 additions & 0 deletions
Loading

packages/pluggableWidgets/calendar-web/src/components/Toolbar.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import "react-big-calendar/lib/css/react-big-calendar.css";
88
export function CustomToolbar({ label, localizer, onNavigate, onView, view, views }: ToolbarProps): ReactElement {
99
return (
1010
<div className="calendar-toolbar">
11-
<div className="align-left btn-group">
11+
<div className="btn-group">
1212
<Button className="btn btn-default" onClick={() => onNavigate(Navigate.PREVIOUS)}>
1313
<IconInternal icon={{ type: "glyph", iconClass: "glyphicon-backward" }} />
1414
</Button>
@@ -20,11 +20,11 @@ export function CustomToolbar({ label, localizer, onNavigate, onView, view, view
2020
</Button>
2121
</div>
2222

23-
<div className="align-center btn-group">
23+
<div className="btn-group">
2424
<span className="calendar-label">{label}</span>
2525
</div>
2626

27-
<div className="align-right btn-group">
27+
<div className="btn-group">
2828
{Array.isArray(views) &&
2929
views.map(name => {
3030
return (

packages/pluggableWidgets/calendar-web/src/utils/calendar-utils.ts

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as dateFns from "date-fns";
2-
import { Calendar, dateFnsLocalizer, ViewsProps } from "react-big-calendar";
3-
import withDragAndDrop from "react-big-calendar/lib/addons/dragAndDrop";
2+
import { Calendar, CalendarProps, dateFnsLocalizer, ViewsProps } from "react-big-calendar";
3+
import withDragAndDrop, { withDragAndDropProps } from "react-big-calendar/lib/addons/dragAndDrop";
44
import { CalendarContainerProps } from "../../typings/CalendarProps";
55
import { CustomToolbar } from "../components/Toolbar";
66

@@ -25,9 +25,9 @@ const localizer = dateFnsLocalizer({
2525
locales: {}
2626
});
2727

28-
export const DnDCalendar = withDragAndDrop(Calendar);
28+
export const DnDCalendar = withDragAndDrop(Calendar<CalEvent, object>);
2929

30-
function getViewRange(view: string, date: Date) {
30+
function getViewRange(view: string, date: Date): { start: Date; end: Date } {
3131
switch (view) {
3232
case "month":
3333
return { start: dateFns.startOfMonth(date), end: dateFns.endOfMonth(date) };
@@ -44,13 +44,25 @@ function getViewRange(view: string, date: Date) {
4444
}
4545
}
4646

47-
export function eventPropGetter(event: CalEvent) {
47+
type EventPropGetterReturnType = {
48+
style:
49+
| {
50+
backgroundColor: string;
51+
}
52+
| undefined;
53+
};
54+
55+
export function eventPropGetter(event: CalEvent): EventPropGetterReturnType {
4856
return {
4957
style: event.color ? { backgroundColor: event.color } : undefined
5058
};
5159
}
5260

53-
export function extractCalendarProps(props: CalendarContainerProps) {
61+
interface DragAndDropCalendarProps<TEvent extends object = Event, TResource extends object = object>
62+
extends CalendarProps<TEvent, TResource>,
63+
withDragAndDropProps<TEvent, TResource> {}
64+
65+
export function extractCalendarProps(props: CalendarContainerProps): DragAndDropCalendarProps<CalEvent, object> {
5466
const items = props.databaseDataSource?.items ?? [];
5567
const events: CalEvent[] = items.map(item => {
5668
const title =
@@ -69,7 +81,7 @@ export function extractCalendarProps(props: CalendarContainerProps) {
6981
const viewsOption: ViewsProps<CalEvent, object> =
7082
props.view === "standard" ? ["day", "week", "month"] : ["month", "week", "work_week", "day", "agenda"];
7183

72-
const handleSelectEvent = (event: CalEvent) => {
84+
const handleSelectEvent = (event: CalEvent): void => {
7385
if (props.onClickEvent?.canExecute) {
7486
props.onClickEvent.execute({
7587
startDate: event.start,
@@ -80,7 +92,7 @@ export function extractCalendarProps(props: CalendarContainerProps) {
8092
}
8193
};
8294

83-
const handleSelectSlot = (slotInfo: { start: Date; end: Date; action: string }) => {
95+
const handleSelectSlot = (slotInfo: { start: Date; end: Date; action: string }): void => {
8496
if (props.enableCreate && props.onCreateEvent?.canExecute) {
8597
props.onCreateEvent.execute({
8698
startDate: slotInfo.start,
@@ -90,7 +102,7 @@ export function extractCalendarProps(props: CalendarContainerProps) {
90102
}
91103
};
92104

93-
const handleEventDropOrResize = ({ event, start, end }: { event: CalEvent; start: Date; end: Date }) => {
105+
const handleEventDropOrResize = ({ event, start, end }: { event: CalEvent; start: Date; end: Date }): void => {
94106
if (props.onChange?.canExecute) {
95107
props.onChange.execute({
96108
oldStart: event.start,
@@ -101,7 +113,7 @@ export function extractCalendarProps(props: CalendarContainerProps) {
101113
}
102114
};
103115

104-
const handleRangeChange = (date: Date, view: string) => {
116+
const handleRangeChange = (date: Date, view: string): void => {
105117
if (props.onRangeChange?.canExecute) {
106118
const { start, end } = getViewRange(view, date);
107119
props.onRangeChange.execute({

packages/pluggableWidgets/events-web/src/Events.editorConfig.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function getPreview(values: EventsPreviewProps, isDarkMode: boolean): Str
3636
return rowLayout({ columnSize: "grow", borders: true, backgroundColor: palette.background.containerFill })(
3737
container()(),
3838
rowLayout({ grow: 2, padding: 8 })(
39-
svgImage(doc, 15, 15),
39+
svgImage({ width: 15, height: 15 })(doc),
4040
text({ fontColor: palette.text.primary, grow: 10 })(getCaption(eventsCount))
4141
),
4242
container()()

packages/pluggableWidgets/selection-helper-web/src/SelectionHelper.editorConfig.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ export function getPreview(
3030
return container()(
3131
rowLayout({ columnSize: "grow" })(
3232
container({ grow: 1 })(
33-
svgImage(decodeURIComponent(CheckBoxIndeterminateSVG.replace("data:image/svg+xml,", "")), 24, 24)
33+
svgImage({ width: 24, height: 24 })(
34+
decodeURIComponent(CheckBoxIndeterminateSVG.replace("data:image/svg+xml,", ""))
35+
)
3436
),
3537
container({ grow: 100, padding: 3 })(text({ fontSize: 10 })(values.checkboxCaption))
3638
)

packages/shared/widget-plugin-platform/src/preview/structure-preview-api.ts

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,21 +26,28 @@ export interface ImageProps extends BaseStylingProps {
2626
height?: number; // sets a fixed maximum height
2727
}
2828

29-
export function svgImage(svgTextData: string, width?: number, height?: number): ImageProps {
30-
return {
31-
type: "Image",
32-
document: svgTextData,
33-
width,
34-
height
29+
interface ImageStyleProps extends BaseStylingProps {
30+
width?: number;
31+
height?: number;
32+
}
33+
34+
export function svgImage(style: ImageStyleProps): (document: string) => ImageProps {
35+
return (document: string) => {
36+
return {
37+
type: "Image",
38+
document,
39+
...style
40+
};
3541
};
3642
}
3743

38-
export function image(base64Data: string, width?: number, height?: number): ImageProps {
39-
return {
40-
type: "Image",
41-
data: base64Data,
42-
width,
43-
height
44+
export function image(style: ImageStyleProps): (data: string) => ImageProps {
45+
return (data: string) => {
46+
return {
47+
type: "Image",
48+
data,
49+
...style
50+
};
4451
};
4552
}
4653

0 commit comments

Comments
 (0)