Skip to content

Commit 4a167ba

Browse files
leonardomendixleonardomendix
authored
[WC-1296]: Dropdown basic (Single selection) (#472)
2 parents db7f6f8 + f2979f0 commit 4a167ba

Some content is hidden

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

43 files changed

+1517
-28
lines changed

‎packages/pluggableWidgets/dropdown-web/.eslintrc.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"root": true,
3+
"extends": ["@mendix/eslint-config-web-widgets/widget-ts"]
4+
}

‎packages/pluggableWidgets/dropdown-web/.prettierrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require("@mendix/prettier-config-web-widgets");

‎packages/pluggableWidgets/dropdown-web/CHANGELOG.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Changelog
2+
3+
All notable changes to this widget will be documented in this file.
4+
5+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
6+
7+
## [Unreleased]

‎packages/pluggableWidgets/dropdown-web/README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<!-- TODO: Update marketplace URL -->
2+
3+
Please see [Drop-down](https://docs.mendix.com/appstore/widgets/dropdown) in the Mendix documentation for details.

‎packages/pluggableWidgets/dropdown-web/cypress.config.cjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require("@web-widgets/run-e2e/cypress.config.cjs");

‎packages/pluggableWidgets/dropdown-web/package.json

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
{
2+
"name": "dropdown-web",
3+
"widgetName": "Dropdown",
4+
"version": "1.0.0",
5+
"description": "Configurable drop-down widget with suggestions and autocomplete.",
6+
"copyright": "© Mendix Technology BV 2022. All rights reserved.",
7+
"license": "Apache-2.0",
8+
"repository": {
9+
"type": "git",
10+
"url": "https://github.com/mendix/web-widgets.git"
11+
},
12+
"config": {
13+
"mendixHost": "http://localhost:8080",
14+
"developmentPort": 3000
15+
},
16+
"mxpackage": {
17+
"name": "Dropdown",
18+
"type": "widget",
19+
"mpkName": "com.mendix.widget.web.Dropdown.mpk"
20+
},
21+
"marketplace": {
22+
"minimumMXVersion": "9.17.0",
23+
"appNumber": -1,
24+
"appName": "Drop-down"
25+
},
26+
"testProject": {
27+
"githubUrl": "https://github.com/mendix/testProjects",
28+
"branchName": "dropdown-web"
29+
},
30+
"packagePath": "com.mendix.widget.web",
31+
"scripts": {
32+
"start": "pluggable-widgets-tools start:server",
33+
"dev": "pluggable-widgets-tools start:web",
34+
"build": "pluggable-widgets-tools build:web",
35+
"format": "pluggable-widgets-tools format",
36+
"lint": "eslint --ext .jsx,.js,.ts,.tsx src/",
37+
"test": "pluggable-widgets-tools test:unit:web",
38+
"e2e": "echo \"Skipping this e2e test\"",
39+
"e2edev": "run-e2e dev --with-preps",
40+
"release": "pluggable-widgets-tools release:web",
41+
"create-gh-release": "rui-create-gh-release",
42+
"publish-marketplace": "rui-publish-marketplace",
43+
"verify": "rui-verify-package-format",
44+
"update-changelog": "rui-update-changelog-widget"
45+
},
46+
"devDependencies": {
47+
"@mendix-internal/automation-utils": "workspace:*",
48+
"@mendix/eslint-config-web-widgets": "workspace:*",
49+
"@mendix/pluggable-test-utils": "workspace:^1.0.0",
50+
"@mendix/pluggable-widgets-tools": "^9.20.0",
51+
"@mendix/prettier-config-web-widgets": "workspace:*",
52+
"@testing-library/dom": "^8.1.0",
53+
"@testing-library/jest-dom": "^5.14.1",
54+
"@testing-library/react": "^12.0.0",
55+
"@testing-library/react-hooks": "^3.4.2",
56+
"@testing-library/user-event": "^13.2.1",
57+
"@types/jest": "^26.0.24",
58+
"@types/node": "^18.8.3",
59+
"@types/react": "^17.0.52",
60+
"@types/react-dom": "^17.0.18",
61+
"@types/react-test-renderer": "<18.0.0",
62+
"@types/testing-library__jest-dom": "^5.14.5",
63+
"@types/testing-library__react-hooks": "^3.4.1",
64+
"@web-widgets/run-e2e": "workspace:^*",
65+
"cross-env": "^7.0.3",
66+
"eslint": "^7.20.0",
67+
"mendix": "^9.19.55544",
68+
"react": "~17.0.2",
69+
"react-dom": "~17.0.2",
70+
"react-test-renderer": "~17.0.2",
71+
"rollup": "^2.68.0",
72+
"ts-node": "^9.0.0",
73+
"typescript": "4.5.4"
74+
},
75+
"dependencies": {
76+
"@mendix/pluggable-widgets-commons": "workspace:*",
77+
"classnames": "^2.3.2",
78+
"downshift": "^7.2.0",
79+
"match-sorter": "^6.3.1"
80+
}
81+
}

‎packages/pluggableWidgets/dropdown-web/src/Dropdown.dark.png

1.43 KB
Loading

‎packages/pluggableWidgets/dropdown-web/src/Dropdown.editorConfig.ts

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { StructurePreviewProps } from "@mendix/pluggable-widgets-commons";
2+
import { hidePropertiesIn, Properties } from "@mendix/pluggable-widgets-tools";
3+
import { DropdownPreviewProps } from "../typings/DropdownProps";
4+
5+
export function getProperties(values: DropdownPreviewProps, defaultProperties: Properties): Properties {
6+
if (values.optionsSourceType === "enumerationOrBoolean") {
7+
// hide attribute
8+
hidePropertiesIn(defaultProperties, values, [
9+
"attributeAssociation",
10+
"optionsSourceAssociationCaptionType",
11+
"optionsSourceAssociationCaptionAttribute",
12+
"optionsSourceAssociationCaptionExpression",
13+
"optionsSourceAssociationDataSource"
14+
]);
15+
16+
// clearable is not available in boolean, is it for Enums?
17+
hidePropertiesIn(defaultProperties, values, ["clearable"]);
18+
} else if (values.optionsSourceType === "association") {
19+
hidePropertiesIn(defaultProperties, values, ["attributeEnumerationOrBoolean"]);
20+
if (values.optionsSourceAssociationCaptionType === "attribute") {
21+
hidePropertiesIn(defaultProperties, values, ["optionsSourceAssociationCaptionExpression"]);
22+
} else {
23+
hidePropertiesIn(defaultProperties, values, ["optionsSourceAssociationCaptionAttribute"]);
24+
}
25+
}
26+
27+
return defaultProperties;
28+
}
29+
30+
export function getPreview(_values: DropdownPreviewProps, isDarkMode: boolean): StructurePreviewProps {
31+
return {
32+
type: "RowLayout",
33+
columnSize: "fixed",
34+
backgroundColor: isDarkMode
35+
? _values.readOnly
36+
? "#4F4F4F"
37+
: undefined
38+
: _values.readOnly
39+
? "#C8C8C8"
40+
: "#F5F5F5",
41+
borders: true,
42+
borderWidth: 1,
43+
children: [
44+
{
45+
type: "Container",
46+
padding: 4,
47+
children: [
48+
{
49+
type: "Text",
50+
content: "Dropdown",
51+
fontColor: isDarkMode ? "#DEDEDE" : "#6B707B"
52+
}
53+
]
54+
}
55+
]
56+
};
57+
}

‎packages/pluggableWidgets/dropdown-web/src/Dropdown.editorPreview.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { createElement, ReactElement } from "react";
2+
import { DropdownPreviewProps } from "../typings/DropdownProps";
3+
import { DropdownPreview } from "./components/DropdownPreview";
4+
5+
export const preview = (props: DropdownPreviewProps): ReactElement => {
6+
return (
7+
<DropdownPreview
8+
emptyOptionText={props.emptyOptionText}
9+
clearable={props.clearable}
10+
readOnly={props.readOnly}
11+
ariaRequired={props.ariaRequired}
12+
typeahead="contains"
13+
/>
14+
);
15+
};

‎packages/pluggableWidgets/dropdown-web/src/Dropdown.icon.dark.png

1.43 KB
Loading

‎packages/pluggableWidgets/dropdown-web/src/Dropdown.icon.png

1.41 KB
Loading

‎packages/pluggableWidgets/dropdown-web/src/Dropdown.png

1.38 KB
Loading

‎packages/pluggableWidgets/dropdown-web/src/Dropdown.tile.dark.png

5.59 KB
Loading

‎packages/pluggableWidgets/dropdown-web/src/Dropdown.tile.png

5.36 KB
Loading

‎packages/pluggableWidgets/dropdown-web/src/Dropdown.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { createElement, ReactElement } from "react";
2+
3+
import { DropdownContainerProps } from "../typings/DropdownProps";
4+
import { Dropdown as DropdownComponent } from "./components/Dropdown";
5+
import "./ui/Dropdown.scss";
6+
7+
export default function Dropdown(props: DropdownContainerProps): ReactElement {
8+
return <DropdownComponent {...props} />;
9+
}

‎packages/pluggableWidgets/dropdown-web/src/Dropdown.xml

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<widget id="com.mendix.widget.web.dropdown.Dropdown" pluginWidget="true" offlineCapable="true" xmlns="http://www.mendix.com/widget/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.mendix.com/widget/1.0/ ../node_modules/mendix/custom_widget.xsd">
3+
<name>Drop-down</name>
4+
<description />
5+
<studioProCategory>Input elements</studioProCategory>
6+
<studioCategory>Display</studioCategory>
7+
<helpUrl>https://docs.mendix.com/appstore/widgets/dropdown</helpUrl>
8+
<properties>
9+
<propertyGroup caption="General">
10+
<!-- OPTIONS SOURCE -->
11+
<propertyGroup caption="Data source">
12+
<property key="optionsSourceType" type="enumeration" defaultValue="enumerationOrBoolean">
13+
<caption>Type</caption>
14+
<description />
15+
<enumerationValues>
16+
<enumerationValue key="enumerationOrBoolean">Enumeration or boolean</enumerationValue>
17+
<enumerationValue key="association">Association</enumerationValue>
18+
<enumerationValue key="custom">Custom</enumerationValue>
19+
</enumerationValues>
20+
</property>
21+
22+
<!-- ENUM OR BOOLEAN -->
23+
<property key="attributeEnumerationOrBoolean" type="attribute" required="false">
24+
<caption>Attribute (enum)</caption>
25+
<description />
26+
<attributeTypes>
27+
<attributeType name="Enum" />
28+
<attributeType name="Boolean" />
29+
</attributeTypes>
30+
</property>
31+
<!-- END ENUM OR BOOLEAN -->
32+
33+
<!-- ASSOCIATION -->
34+
<property key="attributeAssociation" type="association" selectableObjects="optionsSourceAssociationDataSource" required="false">
35+
<caption>Attribute (assoc)</caption>
36+
<description />
37+
<associationTypes>
38+
<associationType name="Reference" />
39+
<associationType name="ReferenceSet" />
40+
</associationTypes>
41+
</property>
42+
<property key="optionsSourceAssociationDataSource" type="datasource" isList="true" required="false">
43+
<caption>Data source (association)</caption>
44+
<description />
45+
</property>
46+
<property key="optionsSourceAssociationCaptionType" type="enumeration" defaultValue="attribute">
47+
<caption>Caption type</caption>
48+
<description>Custom caption is not supported in the early version.</description>
49+
<enumerationValues>
50+
<enumerationValue key="attribute">Attribute</enumerationValue>
51+
<enumerationValue key="expression">Expression</enumerationValue>
52+
<enumerationValue key="custom">Custom (n/a)</enumerationValue>
53+
</enumerationValues>
54+
</property>
55+
</propertyGroup>
56+
<!-- END OPTIONS SOURCE -->
57+
58+
<!-- GENERAL -->
59+
<propertyGroup caption="General">
60+
<!-- Empty option -->
61+
<property key="emptyOptionText" type="textTemplate">
62+
<caption>Empty option</caption>
63+
<description />
64+
</property>
65+
66+
<!-- CAPTIONS -->
67+
<property key="optionsSourceAssociationCaptionAttribute" type="attribute" dataSource="optionsSourceAssociationDataSource" required="false">
68+
<caption>Caption (attribute)</caption>
69+
<description />
70+
<attributeTypes>
71+
<attributeType name="String" />
72+
</attributeTypes>
73+
</property>
74+
<property key="optionsSourceAssociationCaptionExpression" type="expression" dataSource="optionsSourceAssociationDataSource" required="false">
75+
<caption>Caption (expression)</caption>
76+
<description />
77+
<returnType type="String" />
78+
</property>
79+
<!-- END CAPTIONS -->
80+
81+
<!-- MISC PROPS -->
82+
<property key="typeahead" type="enumeration" defaultValue="contains">
83+
<caption>Typeahead</caption>
84+
<description />
85+
<enumerationValues>
86+
<enumerationValue key="no">No</enumerationValue>
87+
<enumerationValue key="startsWith">Starts-with</enumerationValue>
88+
<enumerationValue key="contains">Contains</enumerationValue>
89+
</enumerationValues>
90+
</property>
91+
<property key="clearable" type="boolean" defaultValue="true">
92+
<caption>Clearable</caption>
93+
<description />
94+
</property>
95+
<!-- END MISC PROPS -->
96+
</propertyGroup>
97+
<!-- END GENERAL -->
98+
99+
<!-- SYSTEM PROPS -->
100+
<propertyGroup caption="Label">
101+
<systemProperty key="Label" />
102+
</propertyGroup>
103+
104+
<propertyGroup caption="Conditional visibility">
105+
<systemProperty key="Visibility" />
106+
</propertyGroup>
107+
<propertyGroup caption="Editability">
108+
<systemProperty key="Editability" />
109+
</propertyGroup>
110+
<!-- END SYSTEM PROPS -->
111+
</propertyGroup>
112+
113+
<propertyGroup caption="Events">
114+
<property key="onClickEvent" type="action" required="false">
115+
<caption>On click action</caption>
116+
<description />
117+
</property>
118+
<property key="onEnterEvent" type="action" required="false">
119+
<caption>On enter action</caption>
120+
<description />
121+
</property>
122+
<property key="onLeaveEvent" type="action" required="false">
123+
<caption>On leave action</caption>
124+
<description />
125+
</property>
126+
</propertyGroup>
127+
128+
<propertyGroup caption="Accessibility">
129+
<property key="ariaRequired" type="boolean" defaultValue="false">
130+
<caption>Aria required</caption>
131+
<description />
132+
</property>
133+
</propertyGroup>
134+
</properties>
135+
</widget>

0 commit comments

Comments
 (0)