From 5a3103b469d9033d611526060ca76be40851c106 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Mon, 10 Nov 2025 16:04:44 +0100 Subject: [PATCH 1/3] feat(date-time-picker): create new date-time-picker widget --- .../date-time-picker-web/.eslintrc.js | 5 + .../date-time-picker-web/.gitattributes | 21 +++ .../date-time-picker-web/.gitignore | 20 +++ .../date-time-picker-web/.prettierignore | 1 + .../date-time-picker-web/.prettierrc.js | 1 + .../date-time-picker-web/LICENSE | 15 ++ .../date-time-picker-web/README.md | 4 + .../date-time-picker-web/package.json | 60 ++++++++ .../date-time-picker-web/rollup.config.mjs | 5 + .../src/DateTimePicker.dark.png | Bin 0 -> 1466 bytes .../src/DateTimePicker.editorConfig.ts | 140 ++++++++++++++++++ .../src/DateTimePicker.editorPreview.tsx | 37 +++++ .../src/DateTimePicker.icon.dark.png | Bin 0 -> 1466 bytes .../src/DateTimePicker.icon.png | Bin 0 -> 1444 bytes .../src/DateTimePicker.png | Bin 0 -> 1413 bytes .../src/DateTimePicker.tile.dark.png | Bin 0 -> 5723 bytes .../src/DateTimePicker.tile.png | Bin 0 -> 5485 bytes .../src/DateTimePicker.tsx | 27 ++++ .../src/components/Alert.tsx | 12 ++ .../src/components/BadgeSample.tsx | 33 +++++ .../src/components/__tests__/Alert.spec.tsx | 19 +++ .../components/__tests__/BadgeSample.spec.tsx | 97 ++++++++++++ .../date-time-picker-web/src/package.xml | 11 ++ .../src/ui/DateTimePicker.css | 24 +++ .../date-time-picker-web/tsconfig.json | 32 ++++ 25 files changed, 564 insertions(+) create mode 100644 packages/pluggableWidgets/date-time-picker-web/.eslintrc.js create mode 100644 packages/pluggableWidgets/date-time-picker-web/.gitattributes create mode 100644 packages/pluggableWidgets/date-time-picker-web/.gitignore create mode 100644 packages/pluggableWidgets/date-time-picker-web/.prettierignore create mode 100644 packages/pluggableWidgets/date-time-picker-web/.prettierrc.js create mode 100644 packages/pluggableWidgets/date-time-picker-web/LICENSE create mode 100644 packages/pluggableWidgets/date-time-picker-web/README.md create mode 100644 packages/pluggableWidgets/date-time-picker-web/package.json create mode 100644 packages/pluggableWidgets/date-time-picker-web/rollup.config.mjs create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.dark.png create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.icon.dark.png create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.icon.png create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.png create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.tile.dark.png create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.tile.png create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.tsx create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/components/Alert.tsx create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/components/BadgeSample.tsx create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/components/__tests__/Alert.spec.tsx create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/components/__tests__/BadgeSample.spec.tsx create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/package.xml create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.css create mode 100644 packages/pluggableWidgets/date-time-picker-web/tsconfig.json diff --git a/packages/pluggableWidgets/date-time-picker-web/.eslintrc.js b/packages/pluggableWidgets/date-time-picker-web/.eslintrc.js new file mode 100644 index 0000000000..a81cc74f08 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/.eslintrc.js @@ -0,0 +1,5 @@ +const base = require("@mendix/pluggable-widgets-tools/configs/eslint.ts.base.json"); + +module.exports = { + ...base +}; diff --git a/packages/pluggableWidgets/date-time-picker-web/.gitattributes b/packages/pluggableWidgets/date-time-picker-web/.gitattributes new file mode 100644 index 0000000000..ed8ea8651d --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/.gitattributes @@ -0,0 +1,21 @@ +# Set the default behavior, in case people don't have core.autocrlf set. +* text=auto + +# Explicitly declare text files you want to always be normalized and converted +# to native line endings on checkout. +*.ts text eol=lf +*.tsx text eol=lf +*.js text eol=lf +*.jsx text eol=lf +*.css text eol=lf +*.scss text eol=lf +*.json text eol=lf +*.xml text eol=lf +*.md text eol=lf +*.gitattributes eol=lf +*.gitignore eol=lf + +# Denote all files that are truly binary and should not be modified. +*.png binary +*.jpg binary +*.gif binary diff --git a/packages/pluggableWidgets/date-time-picker-web/.gitignore b/packages/pluggableWidgets/date-time-picker-web/.gitignore new file mode 100644 index 0000000000..6721739184 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/.gitignore @@ -0,0 +1,20 @@ +tests/testProject/ +.DS_Store +.idea +.vscode +dist +node_modules +.env +*.log +*.bak +*.launch +mxproject +coverage + +**/results +mendixProject +**/e2e/diffs +**/screenshot +**/screenshot-results +**/tests/testProject +**/artifacts diff --git a/packages/pluggableWidgets/date-time-picker-web/.prettierignore b/packages/pluggableWidgets/date-time-picker-web/.prettierignore new file mode 100644 index 0000000000..316da987ac --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/.prettierignore @@ -0,0 +1 @@ +tests/testProject/ diff --git a/packages/pluggableWidgets/date-time-picker-web/.prettierrc.js b/packages/pluggableWidgets/date-time-picker-web/.prettierrc.js new file mode 100644 index 0000000000..0892704ab0 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/.prettierrc.js @@ -0,0 +1 @@ +module.exports = require("@mendix/prettier-config-web-widgets"); diff --git a/packages/pluggableWidgets/date-time-picker-web/LICENSE b/packages/pluggableWidgets/date-time-picker-web/LICENSE new file mode 100644 index 0000000000..035fced0d9 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/LICENSE @@ -0,0 +1,15 @@ +The Apache License v2.0 + +Copyright © Mendix Technology BV 2022. All rights reserved. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. diff --git a/packages/pluggableWidgets/date-time-picker-web/README.md b/packages/pluggableWidgets/date-time-picker-web/README.md new file mode 100644 index 0000000000..765710f775 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/README.md @@ -0,0 +1,4 @@ + + +Please see [Date Time Picker](https://docs.mendix.com/appstore/widgets/combobox) in the Mendix documentation for +details. diff --git a/packages/pluggableWidgets/date-time-picker-web/package.json b/packages/pluggableWidgets/date-time-picker-web/package.json new file mode 100644 index 0000000000..5236da9141 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/package.json @@ -0,0 +1,60 @@ +{ + "name": "@mendix/date-time-picker-web", + "widgetName": "DateTimePicker", + "version": "1.0.0", + "description": "Date, time and range picker widget", + "copyright": "© Mendix Technology BV 2025. All rights reserved.", + "license": "Apache-2.0", + "repository": { + "type": "git", + "url": "https://github.com/mendix/web-widgets.git" + }, + "config": { + "developmentPort": 3000, + "mendixHost": "http://localhost:8080" + }, + "mxpackage": { + "name": "DateTimePicker", + "type": "widget", + "mpkName": "com.mendix.widget.web.DateTimePicker.mpk" + }, + "packagePath": "com.mendix.widget.web", + "marketplace": { + "minimumMXVersion": "10.24.0", + "appNumber": 999999, + "appName": "Date Time Picker", + "reactReady": true + }, + "testProject": { + "githubUrl": "https://github.com/mendix/testProjects", + "branchName": "date-time-picker-web" + }, + "scripts": { + "prebuild": "rui-create-translation", + "build": "pluggable-widgets-tools build:web", + "create-gh-release": "rui-create-gh-release", + "create-translation": "rui-create-translation", + "dev": "pluggable-widgets-tools start:web", + "format": "prettier --ignore-path ./node_modules/@mendix/prettier-config-web-widgets/global-prettierignore --write .", + "lint": "pluggable-widgets-tools lint", + "lint:fix": "pluggable-widgets-tools lint:fix", + "publish-marketplace": "rui-publish-marketplace", + "prerelease": "npm run lint", + "release": "pluggable-widgets-tools release:web", + "start": "pluggable-widgets-tools start:server", + "test": "pluggable-widgets-tools test:unit:web:enzyme-free", + "update-changelog": "rui-update-changelog-widget", + "verify": "rui-verify-package-format" + }, + "dependencies": { + "classnames": "^2.5.1" + }, + "devDependencies": { + "@mendix/automation-utils": "workspace:*", + "@mendix/eslint-config-web-widgets": "workspace:*", + "@mendix/pluggable-widgets-tools": "*", + "@mendix/prettier-config-web-widgets": "workspace:*", + "@mendix/rollup-web-widgets": "workspace:*", + "@mendix/widget-plugin-test-utils": "workspace:*" + } +} diff --git a/packages/pluggableWidgets/date-time-picker-web/rollup.config.mjs b/packages/pluggableWidgets/date-time-picker-web/rollup.config.mjs new file mode 100644 index 0000000000..688a1a7197 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/rollup.config.mjs @@ -0,0 +1,5 @@ +import copyFiles from "@mendix/rollup-web-widgets/copyFiles.mjs"; + +export default args => { + return copyFiles(args); +}; diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.dark.png b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.dark.png new file mode 100644 index 0000000000000000000000000000000000000000..57c8008c44b12436f8a4078253b80def84485b28 GIT binary patch literal 1466 zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5893O0R7}x|G$6%U;1OBOz`!jG!i)^F=172) z6bHFGF|0c$^AgBmNq6*hWMJ6X&;2Knm4SiP-_yl0q=ND7UH_txP>}-cX|qhfefaU? z$L*UrWfHQbd=9&REWi9RnOnZ9)MWm7``1#9o+Vdw{=L_&dvUkSy42l$F7pMQf7*;| z4j+B7qL`s!>r0zTZUz-Kh6ytm9FmwAIytd(E=O$6zP@hl6I;%Nj&I+;XRn#a$si=m z;NiodV93~TgoP5$#;x^w3?+qM&wb1n{2KIS<&ngh`g-^O|2mY&Gl#RmQCofa=4btj zUj+7UvTi$iUxtFx+}0KexMOyZYtYyI=bSrBWDfsn>T_8Q#b-Efc$3 zyx+}V?%b(B&F;uGQJX)SZ@c(^>Os~A^VPf5{|9VY`0vs3^xYRHe_MLM%bX>C&d>hr z$L~uI&t_P*QJTkVrq8)&r9c1wt=8TnZLrMve=3`JgR74nZ(G`K+qIqZ*1X9(aN^vb z>5?%Fvv@Pt|7Cx%F2BGTVajiu=I_Qzjpk-^eCkWS+1l{oiSxeEtPj+7Di^ ziM(#{_g*=(Tg|imXC5$pIG8M(9qj#6@!E^I@7a3(oT;Dbn8&m&IW~8m*1==h=9kSL zYP^ko$JX-~B*V5q_I2O#=lZi*%x-tj{la_Gr~38X1{RR<-y}Bl9?-vTzwc&_UhSnn z3+@^V=1i)(P~)$cf6MRJ?00M_(tqP6|NLg$BXe_Km*}g{<~QzT?2_C+ZI8y}wE|~BPTwf(LIrpPTpUM7Cd3E?B7cpT)O|cK0J?U(z(~= z%tmv6>MJuW`TYKFLkiFZ91NOU^;zf5zx~T>k}$)iTTjlO+Q)%C2jR|J*kx|qvX{!K zuiwwMK}?N^d}hVI;98Z)0R>*?y}vd$@? F2>@zDNS*)y literal 0 HcmV?d00001 diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts new file mode 100644 index 0000000000..2fe7a3f94e --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorConfig.ts @@ -0,0 +1,140 @@ +import { DateTimePickerPreviewProps } from "../typings/DateTimePickerProps"; + +export type Platform = "web" | "desktop"; + +export type Properties = PropertyGroup[]; + +type PropertyGroup = { + caption: string; + propertyGroups?: PropertyGroup[]; + properties?: Property[]; +}; + +type Property = { + key: string; + caption: string; + description?: string; + objectHeaders?: string[]; // used for customizing object grids + objects?: ObjectProperties[]; + properties?: Properties[]; +}; + +type ObjectProperties = { + properties: PropertyGroup[]; + captions?: string[]; // used for customizing object grids +}; + +export type Problem = { + property?: string; // key of the property, at which the problem exists + severity?: "error" | "warning" | "deprecation"; // default = "error" + message: string; // description of the problem + studioMessage?: string; // studio-specific message, defaults to message + url?: string; // link with more information about the problem + studioUrl?: string; // studio-specific link +}; + +type BaseProps = { + type: "Image" | "Container" | "RowLayout" | "Text" | "DropZone" | "Selectable" | "Datasource"; + grow?: number; // optionally sets a growth factor if used in a layout (default = 1) +}; + +type ImageProps = BaseProps & { + type: "Image"; + document?: string; // svg image + data?: string; // base64 image + property?: object; // widget image property object from Values API + width?: number; // sets a fixed maximum width + height?: number; // sets a fixed maximum height +}; + +type ContainerProps = BaseProps & { + type: "Container" | "RowLayout"; + children: PreviewProps[]; // any other preview element + borders?: boolean; // sets borders around the layout to visually group its children + borderRadius?: number; // integer. Can be used to create rounded borders + backgroundColor?: string; // HTML color, formatted #RRGGBB + borderWidth?: number; // sets the border width + padding?: number; // integer. adds padding around the container +}; + +type RowLayoutProps = ContainerProps & { + type: "RowLayout"; + columnSize?: "fixed" | "grow"; // default is fixed +}; + +type TextProps = BaseProps & { + type: "Text"; + content: string; // text that should be shown + fontSize?: number; // sets the font size + fontColor?: string; // HTML color, formatted #RRGGBB + bold?: boolean; + italic?: boolean; +}; + +type DropZoneProps = BaseProps & { + type: "DropZone"; + property: object; // widgets property object from Values API + placeholder: string; // text to be shown inside the dropzone when empty + showDataSourceHeader?: boolean; // true by default. Toggles whether to show a header containing information about the datasource +}; + +type SelectableProps = BaseProps & { + type: "Selectable"; + object: object; // object property instance from the Value API + child: PreviewProps; // any type of preview property to visualize the object instance +}; + +type DatasourceProps = BaseProps & { + type: "Datasource"; + property: object | null; // datasource property object from Values API + child?: PreviewProps; // any type of preview property component (optional) +}; + +export type PreviewProps = + | ImageProps + | ContainerProps + | RowLayoutProps + | TextProps + | DropZoneProps + | SelectableProps + | DatasourceProps; + +export function getProperties( + _values: DateTimePickerPreviewProps, + defaultProperties: Properties /*, target: Platform*/ +): Properties { + // Do the values manipulation here to control the visibility of properties in Studio and Studio Pro conditionally. + /* Example + if (values.myProperty === "custom") { + delete defaultProperties.properties.myOtherProperty; + } + */ + return defaultProperties; +} + +// export function check(_values: DateTimePickerPreviewProps): Problem[] { +// const errors: Problem[] = []; +// // Add errors to the above array to throw errors in Studio and Studio Pro. +// /* Example +// if (values.myProperty !== "custom") { +// errors.push({ +// property: `myProperty`, +// message: `The value of 'myProperty' is different of 'custom'.`, +// url: "https://github.com/myrepo/mywidget" +// }); +// } +// */ +// return errors; +// } + +// export function getPreview(values: DateTimePickerPreviewProps, isDarkMode: boolean, version: number[]): PreviewProps { +// // Customize your pluggable widget appearance for Studio Pro. +// return { +// type: "Container", +// children: [] +// } +// } + +// export function getCustomCaption(values: DateTimePickerPreviewProps, platform: Platform): string { +// return "DateTimePicker"; +// } diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx new file mode 100644 index 0000000000..c338cc236e --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.editorPreview.tsx @@ -0,0 +1,37 @@ +import { ReactElement, createElement } from "react"; + +import { parseInlineStyle } from "@mendix/pluggable-widgets-tools"; + +import { BadgeSample, BadgeSampleProps } from "./components/BadgeSample"; +import { DateTimePickerPreviewProps } from "../typings/DateTimePickerProps"; + +function parentInline(node?: HTMLElement | null): void { + // Temporary fix, the web modeler add a containing div, to render inline we need to change it. + if (node && node.parentElement && node.parentElement.parentElement) { + node.parentElement.parentElement.style.display = "inline-block"; + } +} + +function transformProps(props: DateTimePickerPreviewProps): BadgeSampleProps { + return { + type: props.datetimepickerType, + bootstrapStyle: props.bootstrapStyle, + className: props.className, + clickable: false, + style: parseInlineStyle(props.style), + defaultValue: props.datetimepickerValue ? props.datetimepickerValue : "", + value: props.valueAttribute + }; +} + +export function preview(props: DateTimePickerPreviewProps): ReactElement { + return ( +
+ +
+ ); +} + +export function getPreviewCss(): string { + return require("./ui/DateTimePicker.css"); +} diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.icon.dark.png b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.icon.dark.png new file mode 100644 index 0000000000000000000000000000000000000000..57c8008c44b12436f8a4078253b80def84485b28 GIT binary patch literal 1466 zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5893O0R7}x|G$6%U;1OBOz`!jG!i)^F=172) z6bHFGF|0c$^AgBmNq6*hWMJ6X&;2Knm4SiP-_yl0q=ND7UH_txP>}-cX|qhfefaU? z$L*UrWfHQbd=9&REWi9RnOnZ9)MWm7``1#9o+Vdw{=L_&dvUkSy42l$F7pMQf7*;| z4j+B7qL`s!>r0zTZUz-Kh6ytm9FmwAIytd(E=O$6zP@hl6I;%Nj&I+;XRn#a$si=m z;NiodV93~TgoP5$#;x^w3?+qM&wb1n{2KIS<&ngh`g-^O|2mY&Gl#RmQCofa=4btj zUj+7UvTi$iUxtFx+}0KexMOyZYtYyI=bSrBWDfsn>T_8Q#b-Efc$3 zyx+}V?%b(B&F;uGQJX)SZ@c(^>Os~A^VPf5{|9VY`0vs3^xYRHe_MLM%bX>C&d>hr z$L~uI&t_P*QJTkVrq8)&r9c1wt=8TnZLrMve=3`JgR74nZ(G`K+qIqZ*1X9(aN^vb z>5?%Fvv@Pt|7Cx%F2BGTVajiu=I_Qzjpk-^eCkWS+1l{oiSxeEtPj+7Di^ ziM(#{_g*=(Tg|imXC5$pIG8M(9qj#6@!E^I@7a3(oT;Dbn8&m&IW~8m*1==h=9kSL zYP^ko$JX-~B*V5q_I2O#=lZi*%x-tj{la_Gr~38X1{RR<-y}Bl9?-vTzwc&_UhSnn z3+@^V=1i)(P~)$cf6MRJ?00M_(tqP6|NLg$BXe_Km*}g{<~QzT?2_C+ZI8y}wE|~BPTwf(LIrpPTpUM7Cd3E?B7cpT)O|cK0J?U(z(~= z%tmv6>MJuW`TYKFLkiFZ91NOU^;zf5zx~T>k}$)iTTjlO+Q)%C2jR|J*kx|qvX{!K zuiwwMK}?N^d}hVI;98Z)0R>*?y}vd$@? F2>@zDNS*)y literal 0 HcmV?d00001 diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.icon.png b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.icon.png new file mode 100644 index 0000000000000000000000000000000000000000..3e0905098f75c7884c5664a19a8e25afc9ba91de GIT binary patch literal 1444 zcmeAS@N?(olHy`uVBq!ia0y~yU<5K5893O0R7}x|G$6%U;1OBOz`!jG!i)^F=172) z6bHFGF|0c$^AgBmNq6*hWMJ6X&;2Knm4SiP($mE;q=ND7UEe(6bcq8W)8A}ZoTXL7 zP}N+})Fx~qI(yR@rj@guEEpfM@UEG#OCxrw@6v*%W$GDu7i1V(LRW-zTI8o+@;TZb zvRmM`@#jBv+7s9&^6#&=e}CpiAJ9H(0fpIF^P0Eq|M%?Gj#>W%LT~m2t!2NEc=h0x zo_BIKl_fTxPeiiM(fxPvWWJc)ms2TG$F8TjCWsjKte*T{r|!kvubWraw#{T*(cbcw z;a5iSHO68Vh8HVmPTtMnki^8$$;qIi#xP+9cFs02?r)#{@1OrVkNLpwygPeBlNx<+ zD#mRL4jJ7)#f%A&W@Yhtt}E+0Lsy>qoBn(L8`u6B3=%z6A7!Tn$sOUE((!no?!Pt$ z1C7fUPsVMQNItpj>g(4Ro%h~mTJwHig#7V})q2-|*&Ls~qHl4sU(#C(tEcNvru^UR z$>Z?3_DXc)+@*P}uP*NYSKq(5y-K*@^WVFBt6cL<>*HUrFVnpd<+C_i@943);e~;# zIu>6Js#`n1_j~w8gIQ}2Ouely9}-%sF1BW-*}U%sU-G{uac?O6eZKm+>wPY(^>HGz z&pwLQo?d7F`|jEUo3=64%KnX>%YWb|^9rqMNBgV$cZa$xxXBd~db88@)yEh2UzISd zd-HE&?nizH;l}*%iITnhJ4AP!SbHGA?SEK0vq4n% z(*ACpFwv)3YfiZ4vbGuh+J1-AgG+pqsKf=J3vw9Zj(^dRm=bzt(eGvbH@SFn!FH5p z_P>(z#|8rQ|tbT2`su%jOq-yWxS9_J^SJtt;J+%4%>}NouN`ZFRF`Rwz_0Pel z=V!AAUeH!OwPfG7^6lN{7n}`Ch&menzw$zZ`~R@~IKDeJ9oNd^ZSwAMEBLKGyTWb$ zxu5>mU%x&dyLy-u=&O6XSNcnK9xwN>$AUm(|PCQzo(0PZ|lEz z58eAcY3aWGXUgODRyj}jEM?EPL*Z=YvR>=;`_}ybac%B$XZgR;c`QnMCu`l?r!^tr zOFk#VOVj8^jsJ6!rG7>JFXv=9vVZ!V{!Kmqbmwz3Jb&eV?t1&DXDdD%F&@~N)4gAj zN{OHQe@uh4dHz%etCK7QvLG<;+<3zfV#t{=A&vckNgvaT`9l8bvPQ-XmnGiMU|NvA z%4p^Fckk95PGfuU;N;@RFJJzMnmf6fVb|KYAAzSHekpkywYiL$T4fQ?oO>V5jklIB T)hs;h3^LWz)z4*}Q$iB}vb{jw literal 0 HcmV?d00001 diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.png b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.png new file mode 100644 index 0000000000000000000000000000000000000000..bf2e00774c7af49bfcc6511bb13f6b7a68636e4f GIT binary patch literal 1413 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 a1|{l)fm4QihAJN*xjkKXxiGgAPyGczM*)xk literal 0 HcmV?d00001 diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.tile.png b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.tile.png new file mode 100644 index 0000000000000000000000000000000000000000..e758564f7c2163388c9bf5bc54c258518db1ed8d GIT binary patch literal 5485 zcmeHL`#+T18ecQUEi@@1#R##rW9)WEl*_o&skGIQktmfZpQ2on%gh^H)QBR5WVG9I z%5{|7Zz+3~JI#I9)UB%OF^vPu@y8y_*P^uy`#pu*kswHv^vk(w1iY$!Yh+5BYDL z{q!+&bkG|Y*b)I&^ZsO%Ygk+)0S28a+N{mhmSF=B+|}Bh>MSFV=^xi( zzOJpUrNlim2Owppc3_~dhNQY2Fq^gLzB&N#ZRp`Pid!@hk69Pv^8>b_Cu~6!ffVgO zA3R<@)#iZ<>!7-ZPdAp1uTx$EUk89XAfOv@+2UZ41DFSGFyWf6##Sb4wRl&!r@Q5@ z!)`8zxxsuX8LO>PmHe@6e|lwi&ho0vB6#Z2yqr0^w>J4Wjr}n%S;2*NG_Rojj`tH& zwMzo?cBe;f9u6|mj+il#V%v@tiOAswG#gzIy0}h>5;G;g|`_xRG_Z`fupaQtDDswF zA3r=92$BbbX0X~%(o%R_MQ zt!7IQoNzE%RwSmf4gz_GXOumET1ja9Mq8RI+LliNq%FAXbHy|BCKI%Sf)^b8Zn60I z=@%h}mPBR>w5fX6?=UmFg%&V7gx@LD1bWE-(D~*kbnH~_DODo#3LMj@eO}`>{LXPi znlzzF5jpGH+cMMLs~0iJElx2OkRSQ{NZ7~kt50B^dB@T-u8^uK$X2A6O!~!X=-#X6 zo2La5!6zpQJK>FFtl=B)Se;?>?%%3E)aW~LBkV;+k3&E4gkL1*+d4-YYJ#|Gg8AEb z$P)%t2N~(5+`1?*JMPZ&nV~RYk_owG?YJmowKu_Y4cT4Cu>~JAawz+urBQ9ydXbjMo)D1L?Qv0#4F*a)lS45`AmL#Ln&r<&NU|4H~i6= z{*mojE=!Hw`*`LQ@k;toRAS?FO6NBq~Kne^Sj>S5M+eXKVx1>eyB@-;gxln8d2ONA;+{QA6m z-1=3It6uF2aQSHEeq8$LS{Rld<=`zQDDbK*((|wN;%Q0(X==1XQt}|YFh!27&PUPD zGlQPyrekF_i0}P`A&DqM%{s&bTwiUp2R`t$`A2-zS^I(Zia|NL=uAScnCuQS0o&+F z;VMw00YCw-Bb!uY&zev6ajbdFkR4x7D;^wKy4Rclg0;J|AN?p1oz$9p#mdaqLzcPO z)J{id6f;`}Fz<=Rr*?&oBkoHuUhy;|K{VBJe`}j2FKhhm3_h4JM4GC1CK~B*Nk+jx zr`dL0>{bI(!)-m%Y3K19_3pY|Li65eJER{>bj*WKJAMv#unOw*n)=y$E z;j3Rv`os*(yD@K0M@Nvf1lBMFo=p=gW5ZO_s1w5vYY64(Aj%4%pPV^w1)FG;zQW9){cjKTYPL3(|9X1VBCrmB8a;VQi2#dRY;x%5Q zRu&HU8yBV?Enwm>hAx4uPQWi&fOIJhR7S^b^S1jR;w69;N-qOOgMh`FHFLOYuB z>=)L_EAB$1J{G{>5ZdjX4I`n#n;tI*J=_p;7myaKr!>Ex__nrRP)8%BLl)a`PstAZ zrr5O>$m+NLkMGZ7b#sb%RWOp>bJr1ZF4RvAA+z#;VeIGvRK$3G#bY9gI}wQ-Piv-2Us@A^iR}P!=0RHL?QmKnsro=$U&MrU9bfv zUS1Fp9G|m;X}^CLy}5gNfIUc~cRM%x-i8q7-{I)u~Zs7`VcQUQ)$Ejob@}# zV1pl}?;AsJjub|xa1-F)CyUp2V?gV>d0KR|$iVkypr{Q8( { + if (onClickAction && onClickAction.canExecute) { + onClickAction.execute(); + } + }, [onClickAction]); + + return ( + + ); +} diff --git a/packages/pluggableWidgets/date-time-picker-web/src/components/Alert.tsx b/packages/pluggableWidgets/date-time-picker-web/src/components/Alert.tsx new file mode 100644 index 0000000000..b3d283091d --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/components/Alert.tsx @@ -0,0 +1,12 @@ +import { ReactElement, createElement } from "react"; +import classNames from "classnames"; + +export interface AlertProps { + message?: string; + className?: string; + bootstrapStyle: "default" | "primary" | "success" | "info" | "inverse" | "warning" | "danger"; +} + +export function Alert({ message, className, bootstrapStyle }: AlertProps): ReactElement | null { + return message ?
{message}
: null; +} diff --git a/packages/pluggableWidgets/date-time-picker-web/src/components/BadgeSample.tsx b/packages/pluggableWidgets/date-time-picker-web/src/components/BadgeSample.tsx new file mode 100644 index 0000000000..9c3d762bd3 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/components/BadgeSample.tsx @@ -0,0 +1,33 @@ +import { ReactElement, CSSProperties, createElement } from "react"; +import classNames from "classnames"; + +export interface BadgeSampleProps { + type: "badge" | "label"; + defaultValue?: string; + className?: string; + style?: CSSProperties; + value?: string; + bootstrapStyle?: BootstrapStyle; + clickable?: boolean; + onClickAction?: () => void; + getRef?: (node: HTMLElement) => void; +} + +export type BootstrapStyle = "default" | "info" | "inverse" | "primary" | "danger" | "success" | "warning"; + +export function BadgeSample(props: BadgeSampleProps): ReactElement { + const { type, defaultValue, className, style, value, bootstrapStyle, clickable, onClickAction, getRef } = props; + return ( + + {value || defaultValue} + + ); +} diff --git a/packages/pluggableWidgets/date-time-picker-web/src/components/__tests__/Alert.spec.tsx b/packages/pluggableWidgets/date-time-picker-web/src/components/__tests__/Alert.spec.tsx new file mode 100644 index 0000000000..55334ef1cf --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/components/__tests__/Alert.spec.tsx @@ -0,0 +1,19 @@ +import { createElement } from "react"; +import { shallow } from "enzyme"; + +import { Alert } from "../Alert"; + +describe("Alert", () => { + it("renders the structure when an alert message is specified", () => { + const message = "This is an error"; + const alert = shallow(); + + expect(alert.equals(
{message}
)).toEqual(true); + }); + + it("renders no structure when the alert message is not specified", () => { + const alert = shallow(); + + expect(alert.isEmptyRender()).toEqual(true); + }); +}); diff --git a/packages/pluggableWidgets/date-time-picker-web/src/components/__tests__/BadgeSample.spec.tsx b/packages/pluggableWidgets/date-time-picker-web/src/components/__tests__/BadgeSample.spec.tsx new file mode 100644 index 0000000000..db0dcde8e9 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/components/__tests__/BadgeSample.spec.tsx @@ -0,0 +1,97 @@ +import { createElement } from "react"; +import { shallow, ShallowWrapper } from "enzyme"; + +import { BadgeSample, BadgeSampleProps } from "../BadgeSample"; + +describe("Badge", () => { + const createBadge = (props: BadgeSampleProps): ShallowWrapper => shallow(); + + it("should render the structure", () => { + const badgeProps: BadgeSampleProps = { + type: "badge", + bootstrapStyle: "default", + value: "0" + }; + const badge = createBadge(badgeProps); + + expect(badge.equals(0)).toEqual(true); + }); + + it("should show value when no value or default value provided", () => { + const value = "value"; + const badge = createBadge({ type: "label", value, defaultValue: "default value" }); + + expect(badge.text()).toBe(value); + }); + + it("should show default value when no value is provided", () => { + const defaultValue = "default"; + const badge = createBadge({ type: "label", value: undefined, defaultValue }); + + expect(badge.text()).toBe(defaultValue); + }); + + it("should show no value when no value or default value provided", () => { + const badge = createBadge({ type: "label", value: undefined }); + + expect(badge.text()).toBe(""); + }); + + it("configured as a label should have the class label", () => { + const badge = createBadge({ type: "label" }); + + expect(badge.hasClass("label")).toBe(true); + }); + + it("configured as a badge should have the class badge", () => { + const badge = createBadge({ type: "badge" }); + + expect(badge.hasClass("badge")).toBe(true); + }); + + it("with a click action should respond to click events", () => { + const badgeProps: BadgeSampleProps = { onClickAction: jest.fn(), type: "badge" }; + const onClick = (badgeProps.onClickAction = jest.fn()); + const badge = createBadge(badgeProps); + + badge.simulate("click"); + + expect(onClick).toHaveBeenCalledTimes(1); + }); + + it("with the Bootstrap style default should have the class label-default", () => { + const badge = createBadge({ bootstrapStyle: "default", type: "badge" }); + + expect(badge.hasClass("label-default")).toBe(true); + }); + + it("with the Bootstrap style primary should have the class label-primary", () => { + const badge = createBadge({ bootstrapStyle: "primary", type: "badge" }); + + expect(badge.hasClass("label-primary")).toBe(true); + }); + + it("with the Bootstrap style success should have the class label-success", () => { + const badge = createBadge({ bootstrapStyle: "success", type: "badge" }); + + expect(badge.hasClass("label-success")).toBe(true); + }); + + it("with the Bootstrap style info should have the class label-info", () => { + const badge = createBadge({ bootstrapStyle: "info", type: "badge" }); + + expect(badge.hasClass("label-info")).toBe(true); + }); + + it("with the Bootstrap style warning should have the class label-warning", () => { + const badge = createBadge({ bootstrapStyle: "warning", type: "badge" }); + + expect(badge.hasClass("label-warning")).toBe(true); + }); + + it("with the Bootstrap style danger should have the class label-danger", () => { + const badge = createBadge({ bootstrapStyle: "danger", type: "badge" }); + + expect(badge.hasClass("label-danger")).toBe(true); + }); +}); diff --git a/packages/pluggableWidgets/date-time-picker-web/src/package.xml b/packages/pluggableWidgets/date-time-picker-web/src/package.xml new file mode 100644 index 0000000000..bada44ee78 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/package.xml @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.css b/packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.css new file mode 100644 index 0000000000..963df20d55 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/ui/DateTimePicker.css @@ -0,0 +1,24 @@ +.widget-datetimepicker-clickable { + cursor: pointer; +} + +.widget-datetimepicker { + display: inline-block; +} + +.widget-datetimepicker.badge:empty { + display: initial; + /* Fix padding to stay round */ + padding: 3px 10px; +} + +.widget-datetimepicker.label:empty { + display: initial; + /* Fix padding to stay square */ + padding: .2em .8em .3em; +} + +.widget-datetimepicker.badge { + min-width: 18px; + min-height: 18px; +} diff --git a/packages/pluggableWidgets/date-time-picker-web/tsconfig.json b/packages/pluggableWidgets/date-time-picker-web/tsconfig.json new file mode 100644 index 0000000000..a3d2c5cce8 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/tsconfig.json @@ -0,0 +1,32 @@ +{ + "extends": "@mendix/pluggable-widgets-tools/configs/tsconfig.base", + "compilerOptions": { + "baseUrl": "./", + "noEmitOnError": true, + "sourceMap": true, + "module": "esnext", + "target": "es6", + "lib": ["esnext", "dom"], + "types": ["jest", "node"], + "moduleResolution": "node", + "declaration": false, + "noLib": false, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "strict": true, + "strictFunctionTypes": false, + "skipLibCheck": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "jsx": "react-jsx", + "jsxFactory": "", + "allowSyntheticDefaultImports": true, + "esModuleInterop": true, + "useUnknownInCatchVariables": false, + "exactOptionalPropertyTypes": false, + "paths": { + "react-hot-loader/root": ["./hot-typescript.ts"] + } + }, + "include": ["./src", "./typings"] +} From 84652f95a8cdfd9d47c620f13091129724c00752 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Mon, 10 Nov 2025 16:05:25 +0100 Subject: [PATCH 2/3] feat(date-time-picker): add base properties for date time picker --- .../src/DateTimePicker.xml | 123 ++++++++++++++++++ .../typings/DateTimePickerProps.d.ts | 67 ++++++++++ 2 files changed, 190 insertions(+) create mode 100644 packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.xml create mode 100644 packages/pluggableWidgets/date-time-picker-web/typings/DateTimePickerProps.d.ts diff --git a/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.xml b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.xml new file mode 100644 index 0000000000..585c1bde14 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/src/DateTimePicker.xml @@ -0,0 +1,123 @@ + + + Date Time Picker + + Input elements + Display + https://docs.mendix.com/appstore/widgets/datetimepicker + + + + + Picker type + + + Date + Time + Range + + + + Placeholder + + + + + + + Value + + + + + + + + + Show label + + + + Label caption + + + + + + + Editable + + + Default + Never + Conditionally + + + + Condition + + + + + Read-only style + + + Based on data view (Control) + Control + Text + + + + + + Visible + + + + + + + Validation + + + None + Required + Date in the future + Date in the past + Custom + + + + Custom condition + + + + + Message + + + + + + + Aria required + Used by assistive technologies to indicate that a field is required. + + + + + + On change + + + + On enter + + + + On leave + + + + + diff --git a/packages/pluggableWidgets/date-time-picker-web/typings/DateTimePickerProps.d.ts b/packages/pluggableWidgets/date-time-picker-web/typings/DateTimePickerProps.d.ts new file mode 100644 index 0000000000..f3fee7d375 --- /dev/null +++ b/packages/pluggableWidgets/date-time-picker-web/typings/DateTimePickerProps.d.ts @@ -0,0 +1,67 @@ +/** + * This file was generated from DateTimePicker.xml + * WARNING: All changes made to this file will be overwritten + * @author Mendix Widgets Framework Team + */ +import { CSSProperties } from "react"; +import { ActionValue, DynamicValue, EditableValue } from "mendix"; + +export type TypeEnum = "date" | "time" | "Range"; + +export type EditableEnum = "default" | "never" | "conditionally"; + +export type ReadOnlyStyleEnum = "default" | "control" | "text"; + +export type ValidationTypeEnum = "none" | "required" | "future" | "past" | "custom"; + +export interface DateTimePickerContainerProps { + name: string; + class: string; + style?: CSSProperties; + tabIndex?: number; + type: TypeEnum; + placeholder?: DynamicValue; + dateAttribute: EditableValue; + showLabel: boolean; + label?: DynamicValue; + editable: EditableEnum; + editabilityCondition?: DynamicValue; + readOnlyStyle: ReadOnlyStyleEnum; + visible?: DynamicValue; + validationType: ValidationTypeEnum; + customValidation?: DynamicValue; + validationMessage?: DynamicValue; + ariaRequired: boolean; + onChange?: ActionValue; + onEnter?: ActionValue; + onLeave?: ActionValue; +} + +export interface DateTimePickerPreviewProps { + /** + * @deprecated Deprecated since version 9.18.0. Please use class property instead. + */ + className: string; + class: string; + style: string; + styleObject?: CSSProperties; + readOnly: boolean; + renderMode: "design" | "xray" | "structure"; + translate: (text: string) => string; + type: TypeEnum; + placeholder: string; + dateAttribute: string; + showLabel: boolean; + label: string; + editable: EditableEnum; + editabilityCondition: string; + readOnlyStyle: ReadOnlyStyleEnum; + visible: string; + validationType: ValidationTypeEnum; + customValidation: string; + validationMessage: string; + ariaRequired: boolean; + onChange: {} | null; + onEnter: {} | null; + onLeave: {} | null; +} From ee5e722c1eca157d4b5a2d4f81fcad79be0b4950 Mon Sep 17 00:00:00 2001 From: Samuel Reichert Date: Mon, 10 Nov 2025 16:05:34 +0100 Subject: [PATCH 3/3] chore: update pnpm lock --- pnpm-lock.yaml | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4fb47d0630..cb641c98b2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1330,6 +1330,31 @@ importers: specifier: workspace:* version: link:../../shared/widget-plugin-test-utils + packages/pluggableWidgets/date-time-picker-web: + dependencies: + classnames: + specifier: ^2.5.1 + version: 2.5.1 + devDependencies: + '@mendix/automation-utils': + specifier: workspace:* + version: link:../../../automation/utils + '@mendix/eslint-config-web-widgets': + specifier: workspace:* + version: link:../../shared/eslint-config-web-widgets + '@mendix/pluggable-widgets-tools': + specifier: 10.21.2 + version: 10.21.2(@jest/transform@29.7.0)(@jest/types@30.2.0)(@swc/core@1.13.5)(@types/babel__core@7.20.5)(@types/node@22.14.1)(jest-util@30.2.0)(picomatch@4.0.3)(react-dom@18.3.1(react@18.3.1))(react-native@0.82.0(@babel/core@7.28.4)(@types/react@19.2.2)(react@18.3.1))(react@18.3.1)(tslib@2.8.1) + '@mendix/prettier-config-web-widgets': + specifier: workspace:* + version: link:../../shared/prettier-config-web-widgets + '@mendix/rollup-web-widgets': + specifier: workspace:* + version: link:../../shared/rollup-web-widgets + '@mendix/widget-plugin-test-utils': + specifier: workspace:* + version: link:../../shared/widget-plugin-test-utils + packages/pluggableWidgets/document-viewer-web: dependencies: '@mendix/widget-plugin-component-kit':