Merge pull request #30 from mendixCN/engalar/issue14

Engalar/issue14
mendixCN · Nov 28, 2021 · 81fefa7 · 81fefa7
2 parents 2270bdd + 7f9df50
commit 81fefa7
Show file tree

Hide file tree

Showing 25 changed files with 20,703 additions and 68 deletions.
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "build": "lerna run build --ignore @mendix/custom-widgets-utils-internal",
     "start:transfer": "lerna run start --scope 'transfer'",
     "start:amap": "lerna run start --scope 'amap'",
-    "new": "yo @mendix/widget packages/pluggableWidgets/BackTop",
+    "new": "yo @mendix/widget packages/pluggableWidgets/DatePicker",
     "release:marketplace": "lerna run release:marketplace",
     "release": "lerna run release",
     "validate-staged-widget-versions": "node scripts/validation/validate-versions-staged-files.js"

diff --git a/packages/pluggableWidgets/ant-select-web/package.json b/packages/pluggableWidgets/ant-select-web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ant-select-web",
   "widgetName": "Select",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "My widget description",
   "copyright": "2020 Mendix Technology BV",
   "author": "John",

diff --git a/packages/pluggableWidgets/ant-select-web/src/Select.editorConfig.ts b/packages/pluggableWidgets/ant-select-web/src/Select.editorConfig.ts
@@ -14,7 +14,7 @@ export function getProperties(
     if (values.isMultiConst === false) {
         hidePropertiesIn(defaultProperties, values, ["selectList", "optionValueM", "onDeselectM"]);
     } else {
-        hidePropertiesIn(defaultProperties, values, ["onDeselect", "optionValue"]);
+        hidePropertiesIn(defaultProperties, values, ["onDeselect"]);
     }
     if (platform === "web") {
         transformGroupsIntoTabs(defaultProperties);

diff --git a/packages/pluggableWidgets/ant-select-web/src/Select.tsx b/packages/pluggableWidgets/ant-select-web/src/Select.tsx
@@ -16,45 +16,12 @@ export interface SelectOption {
 }
 export default function SelectMX(props: SelectContainerProps) {
     const [showCreate, setShowCreate] = useState(false);
+    const [value, setValue] = useState<string | string[]>();
     const [searchValue, setSearchValue] = useState<string>("");
     const [dropdownVisible, setDropdownVisible] = useState(false);
-    useMount(() => {
-        props.options.setLimit(PAGE_SIZE);
-        props.options.requestTotalCount(true);
-    });
-    const onChange = useCallback(
-        (value: string) => {
-            if (props.isMultiConst) {
-                return;
-            }
-            const selectedObjectItem = props.options.items?.find(d => d.id === value);
-            if (selectedObjectItem) {
-                if (props.value && props.value.status === ValueStatus.Available) {
-                    props.value.setValue(props.optionValue.get(selectedObjectItem).value?.toString());
-                }
-                if (props.onSelect && props.options.status === ValueStatus.Available) {
-                    props.onSelect?.get(selectedObjectItem).execute();
-                }
-            }
-        },
-        [props.value, props.options]
-    );
-
+    const [open, setOpen] = useState(false);
     const [onCreateLoading, setOnCreateLoading] = useState(false);
-
-    useEffect(() => {
-        setOnCreateLoading(props.onCreate?.isExecuting ?? false);
-    }, [props.onCreate]);
-
-    const onCreate = useCallback(
-        (value: string) => {
-            if (props.onCreate?.canExecute) {
-                props.value?.setValue(value);
-                props.onCreate?.execute();
-            }
-        },
-        [props.onCreate]
-    );
+    const [interval, setInterval] = useState<number>();
 
     const options = useMemo(() => {
         if (props.options.status === ValueStatus.Available) {
@@ -87,13 +54,52 @@ export default function SelectMX(props: SelectContainerProps) {
                 });
         }
     }, [props.options]);
-
     const preOptions = usePrevious(options);
 
-    const [value, setValue] = useState<string | string[]>();
+    const onChange = useCallback(
+        (value: string) => {
+            if (props.isMultiConst) {
+                return;
+            }
+            const selectedObjectItem = props.options.items?.find(d => d.id === value);
+            if (selectedObjectItem) {
+                if (props.value && props.value.status === ValueStatus.Available) {
+                    props.value.setValue(props.optionValue.get(selectedObjectItem).value?.toString());
+                }
+                if (props.onSelect && props.options.status === ValueStatus.Available) {
+                    props.onSelect?.get(selectedObjectItem).execute();
+                }
+            }
+        },
+        [props.value, props.options]
+    );
+
+    const onCreate = useCallback(
+        (value: string) => {
+            if (props.onCreate?.canExecute) {
+                props.searchValue?.setValue(value);
+                props.onCreate?.execute();
+            }
+        },
+        [props.onCreate]
+    );
+
+    const { run } = useDebounceFn(
+        (offset, _) => {
+            if (Math.abs(offset - props.options.offset) % 50 > 15) {
+                props.options.setOffset(Math.max(0, offset - 1));
+            }
+        },
+        { wait: 300 }
+    );
 
     useEffect(() => {
-        if (props.isMultiConst && props.selectList && props.optionValueM) {
+        if (
+            !searchValue /*搜索中不应该变更值，以免失去输入焦点*/ &&
+            props.isMultiConst &&
+            props.selectList &&
+            props.optionValueM
+        ) {
             if (props.selectList && props.selectList.status === ValueStatus.Available) {
                 const listValue = props.selectList.items?.map(obj => props.optionValueM!.get(obj).value!.toString());
                 setValue(listValue ?? []);
@@ -102,21 +108,18 @@ export default function SelectMX(props: SelectContainerProps) {
         }
     }, [props.selectList]);
 
+    /* useEffect(() => {
+        if (props.searchValue && props.searchValue.status === ValueStatus.Available) {
+            setSearchValue(props.searchValue.value ?? '')
+        }
+    }, [props.searchValue]); */
+
     useEffect(() => {
         if (!props.isMultiConst && props.value && props.value.status === ValueStatus.Available) {
             setValue(props.value.value);
         }
     }, [props.value]);
 
-    const { run } = useDebounceFn(
-        (offset, _) => {
-            if (Math.abs(offset - props.options.offset) % 50 > 15) {
-                props.options.setOffset(Math.max(0, offset - 1));
-            }
-        },
-        { wait: 300 }
-    );
-
     useEffect(() => {
         if (searchValue) {
             // https://docs.mendix.com/apidocs-mxsdk/apidocs/pluggable-widgets-client-apis-list-values#4-3-string-conditions
@@ -134,9 +137,9 @@ export default function SelectMX(props: SelectContainerProps) {
         }
     }, [searchValue]);
 
-    const [open, setOpen] = useState(false);
-
-    const [interval, setInterval] = useState<number>();
+    useEffect(() => {
+        setOnCreateLoading(props.onCreate?.isExecuting ?? false);
+    }, [props.onCreate]);
 
     useInterval(
         () => {
@@ -153,7 +156,12 @@ export default function SelectMX(props: SelectContainerProps) {
         { immediate: true }
     );
 
-    useWhyDidYouUpdate(props.name, { ...props, options, showCreate });
+    useMount(() => {
+        props.options.setLimit(PAGE_SIZE);
+        props.options.requestTotalCount(true);
+    });
+
+    useWhyDidYouUpdate(props.name, { ...props, _options: options, showCreate, searchValue });
 
     return (
         <Select
@@ -165,9 +173,6 @@ export default function SelectMX(props: SelectContainerProps) {
             value={value}
             listItemHeight={32}
             onChange={onChange}
-            // filterOption={(inputValue, option)=>{
-            // return true;
-            // }}
             onSelect={(_value, option) => {
                 const obj = props.options?.items?.find(d => d.id === option.id);
                 if (obj) {
@@ -196,6 +201,9 @@ export default function SelectMX(props: SelectContainerProps) {
                 setSearchValue("");
             }}
             onDropdownVisibleChange={o => {
+                if (!o) {
+                    setSearchValue("");
+                }
                 setOpen(o);
                 setDropdownVisible(o);
             }}
@@ -206,10 +214,10 @@ export default function SelectMX(props: SelectContainerProps) {
             options={dropdownVisible ? (options ? options : preOptions) : options}
             onSearch={setSearchValue}
             showSearch
-            dropdownRender={menu =>
-                showCreate ? (
-                    <div className="mxcn-select-dropdown">
-                        {menu}
+            dropdownRender={menu => (
+                <div className="mxcn-select-dropdown">
+                    {menu}
+                    {showCreate ? (
                         <div aria-selected="false" className="ant-select-item ant-select-item-option">
                             <div className="ant-select-item-option-content">
                                 <Button
@@ -233,11 +241,9 @@ export default function SelectMX(props: SelectContainerProps) {
                                 style={{ userSelect: "none" }}
                             ></span>
                         </div>
-                    </div>
-                ) : (
-                    menu
-                )
-            }
+                    ) : null}
+                </div>
+            )}
         ></Select>
     );
 }
diff --git a/packages/pluggableWidgets/ant-select-web/src/Select.xml b/packages/pluggableWidgets/ant-select-web/src/Select.xml
@@ -7,6 +7,15 @@
     <icon/>
     <properties>
         <propertyGroup caption="数据源">
+            <propertyGroup caption="搜索值">
+                <property key="searchValue" type="attribute" required="true">
+                    <caption>搜索值</caption>
+                    <description></description>
+                    <attributeTypes>
+                        <attributeType name="String" />
+                    </attributeTypes>
+                </property>
+            </propertyGroup>
             <propertyGroup caption="待选">
                 <property key="options" type="datasource" required="true" isList="true">
                     <caption>待选项数据源</caption>

diff --git a/packages/pluggableWidgets/ant-select-web/src/package.xml b/packages/pluggableWidgets/ant-select-web/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Select" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Select" version="1.1.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Select.xml"/>
         </widgetFiles>

diff --git a/packages/pluggableWidgets/ant-select-web/typings/SelectProps.d.ts b/packages/pluggableWidgets/ant-select-web/typings/SelectProps.d.ts
@@ -12,6 +12,7 @@ export interface SelectContainerProps {
     class: string;
     style?: CSSProperties;
     tabIndex?: number;
+    searchValue: EditableValue<string>;
     options: ListValue;
     optionValue: ListAttributeValue<string | Big>;
     optionLabel: ListAttributeValue<string>;
@@ -28,6 +29,7 @@ export interface SelectContainerProps {
 export interface SelectPreviewProps {
     class: string;
     style: string;
+    searchValue: string;
     options: {} | { type: string } | null;
     optionValue: string;
     optionLabel: string;

diff --git a/packages/pluggableWidgets/date-picker-web/.eslintrc.js b/packages/pluggableWidgets/date-picker-web/.eslintrc.js
@@ -0,0 +1,5 @@
+const base = require("@mendix/pluggable-widgets-tools/configs/eslint.ts.base");
+
+module.exports = {
+    ...base
+};
diff --git a/packages/pluggableWidgets/date-picker-web/.gitattributes b/packages/pluggableWidgets/date-picker-web/.gitattributes
@@ -0,0 +1,15 @@
+* text=auto
+*.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
+*.png binary
+*.jpg binary
+*.gif binary
diff --git a/packages/pluggableWidgets/date-picker-web/.gitignore b/packages/pluggableWidgets/date-picker-web/.gitignore
@@ -0,0 +1,5 @@
+dist/
+node_modules/
+tests/testProject/
+*.log
+.env
diff --git a/packages/pluggableWidgets/date-picker-web/.prettierignore b/packages/pluggableWidgets/date-picker-web/.prettierignore
@@ -0,0 +1 @@
+tests/testProject/
diff --git a/packages/pluggableWidgets/date-picker-web/LICENSE b/packages/pluggableWidgets/date-picker-web/LICENSE
@@ -0,0 +1,15 @@
+The Apache License v2.0
+
+Copyright 2020 Mendix Technology BV
+
+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-picker-web/README.md b/packages/pluggableWidgets/date-picker-web/README.md
@@ -0,0 +1,24 @@
+## DatePicker
+[My widget description]
+
+## Features
+[feature highlights]
+
+## Usage
+[step by step instructions]
+
+## Demo project
+[link to sandbox]
+
+## Issues, suggestions and feature requests
+[link to GitHub issues]
+
+## Development and contribution
+
+1. Install NPM package dependencies by using: `npm install`. If you use NPM v7.x.x, which can be checked by executing `npm -v`, execute: `npm install --legacy-peer-deps`.
+1. Run `npm start` to watch for code changes. On every change:
+    - the widget will be bundled;
+    - the bundle will be included in a `dist` folder in the root directory of the project;
+    - the bundle will be included in the `deployment` and `widgets` folder of the Mendix test project.
+
+[specify contribution]