From 2d9187effa78b610f3af62e6ad1cc6c8f375a2a1 Mon Sep 17 00:00:00 2001 From: mou <10402885@qq.com> Date: Mon, 31 Jul 2023 21:06:43 +0800 Subject: [PATCH 1/3] add_autoComplete_component: 1. Has two display modes 2. Support ignoring case and only searching for labels or both. In the Chinese environment, native support for first pinyin and full pinyin searches 3. Support for setting titles and title styles 4. Support content validation 5. Exposed value: valueInItem, indicating whether the value belongs to the item list --- .../src/icons/icon-autocomplete-comp.svg | 1 + .../lowcoder-design/src/icons/index.ts | 3 +- client/packages/lowcoder/package.json | 1 + .../autoCompleteComp/autoCompleteComp.tsx | 389 ++++++++++++++++++ .../autoCompleteConstants.tsx | 114 +++++ .../textInputComp/textInputConstants.tsx | 2 +- client/packages/lowcoder/src/comps/index.tsx | 19 +- .../lowcoder/src/comps/uiCompRegistry.ts | 1 + .../packages/lowcoder/src/i18n/locales/en.ts | 31 +- .../packages/lowcoder/src/i18n/locales/zh.ts | 29 ++ .../src/pages/editor/editorConstants.tsx | 2 + client/yarn.lock | 17 + 12 files changed, 604 insertions(+), 5 deletions(-) create mode 100644 client/packages/lowcoder-design/src/icons/icon-autocomplete-comp.svg create mode 100644 client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx create mode 100644 client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteConstants.tsx diff --git a/client/packages/lowcoder-design/src/icons/icon-autocomplete-comp.svg b/client/packages/lowcoder-design/src/icons/icon-autocomplete-comp.svg new file mode 100644 index 000000000..dd882963a --- /dev/null +++ b/client/packages/lowcoder-design/src/icons/icon-autocomplete-comp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/packages/lowcoder-design/src/icons/index.ts b/client/packages/lowcoder-design/src/icons/index.ts index dd55eb897..05fd271e7 100644 --- a/client/packages/lowcoder-design/src/icons/index.ts +++ b/client/packages/lowcoder-design/src/icons/index.ts @@ -288,4 +288,5 @@ export { ReactComponent as ExpandIcon } from "icons/icon-expand.svg"; export { ReactComponent as CompressIcon } from "icons/icon-compress.svg"; export { ReactComponent as TableCellsIcon } from "icons/icon-table-cells.svg"; // Added By Aqib Mirza export { ReactComponent as TimeLineIcon } from "icons/icon-timeline-comp.svg" -export { ReactComponent as LottieIcon } from "icons/icon-lottie.svg"; \ No newline at end of file +export { ReactComponent as LottieIcon } from "icons/icon-lottie.svg"; +export { ReactComponent as AutoCompleteCompIcon } from "icons/icon-autocomplete-comp.svg"; \ No newline at end of file diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json index 4220f810e..278628768 100644 --- a/client/packages/lowcoder/package.json +++ b/client/packages/lowcoder/package.json @@ -42,6 +42,7 @@ "axios": "^0.21.1", "buffer": "^6.0.3", "clsx": "^1.2.1", + "cnchar": "^3.2.4", "copy-to-clipboard": "^3.3.3", "core-js": "^3.25.2", "echarts": "^5.4.2", diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx new file mode 100644 index 000000000..5654c8bfd --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -0,0 +1,389 @@ +import React, { useEffect, useState } from "react"; +import { Input, Section, sectionNames } from "lowcoder-design"; +import { BoolControl } from "comps/controls/boolControl"; +import { styleControl } from "comps/controls/styleControl"; +import { + InputLikeStyle, + InputLikeStyleType, +} from "comps/controls/styleControlConstants"; +import { + NameConfig, + NameConfigPlaceHolder, + NameConfigRequired, + withExposingConfigs, +} from "comps/generators/withExposing"; +import styled from "styled-components"; +import { UICompBuilder } from "../../generators"; +import { FormDataPropertyView } from "../formComp/formDataConstants"; +import { jsonControl } from "comps/controls/codeControl"; +import { dropdownControl } from "comps/controls/dropdownControl"; +import { + getStyle, + TextInputBasicSection, + textInputChildren, + TextInputConfigs, + TextInputInteractionSection, + textInputValidate, + TextInputValidationSection, +} from "../textInputComp/textInputConstants"; +import { + allowClearPropertyView, + hiddenPropertyView, +} from "comps/utils/propertyUtils"; +import { trans } from "i18n"; +import { IconControl } from "comps/controls/iconControl"; +import { hasIcon } from "comps/utils"; +import { + ConfigProvider, + InputRef, + AutoComplete, + Input as AntInput, +} from "antd"; +import { RefControl } from "comps/controls/refControl"; +import { + booleanExposingStateControl, +} from "comps/controls/codeStateControl"; + +import { getMomentLocale } from "i18n/momentLocale"; +import { + autoCompleteDate, + itemsDataTooltip, + convertAutoCompleteData, + valueOrLabelOption, + autoCompleteRefMethods, + autoCompleteType, + autocompleteIconColor, + componentSize, +} from "./autoCompleteConstants"; + +const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>` + ${(props) => props.$style && getStyle(props.$style)} +`; + +const childrenMap = { + ...textInputChildren, + viewRef: RefControl, + allowClear: BoolControl.DEFAULT_TRUE, + style: styleControl(InputLikeStyle), + prefixIcon: IconControl, + suffixIcon: IconControl, + items: jsonControl(convertAutoCompleteData, autoCompleteDate), + ignoreCase: BoolControl.DEFAULT_TRUE, + searchFirstPY: BoolControl.DEFAULT_TRUE, + searchCompletePY: BoolControl, + searchLabelOnly: BoolControl.DEFAULT_TRUE, + valueOrLabel: dropdownControl(valueOrLabelOption, "label"), + autoCompleteType: dropdownControl(autoCompleteType, "AntDesign"), + autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"), + componentSize: dropdownControl(componentSize, "small"), + valueInItems: booleanExposingStateControl("valueInItems"), +}; + +const getValidate = (value: any): "" | "warning" | "error" | undefined => { + if ( + value.hasOwnProperty("validateStatus") && + value["validateStatus"] === "error" + ) + return "error"; + return ""; +}; + +let AutoCompleteCompBase = (function () { + return new UICompBuilder(childrenMap, (props) => { + const { + items, + onEvent, + placeholder, + searchFirstPY, + searchCompletePY, + searchLabelOnly, + ignoreCase, + valueOrLabel, + autoCompleteType, + autocompleteIconColor, + componentSize, + } = props; + + const getTextInputValidate = () => { + return { + value: { value: props.value.value }, + required: props.required, + minLength: props?.minLength ?? 0, + maxLength: props?.maxLength ?? 0, + validationType: props.validationType, + regex: props.regex, + customRule: props.customRule, + }; + }; + + const [activationFlag, setActivationFlag] = useState(false); + const [searchtext, setsearchtext] = useState(props.value.value); + const [validateState, setvalidateState] = useState({}); + + // 是否中文环境 + const [chineseEnv, setChineseEnv] = useState(getMomentLocale() === "zh-cn"); + + useEffect(() => { + setsearchtext(props.value.value); + activationFlag && + setvalidateState(textInputValidate(getTextInputValidate())); + }, [ + props.value.value, + props.required, + props?.minLength, + props?.maxLength, + props.validationType, + props.regex, + props.customRule, + ]); + + return props.label({ + required: props.required, + children: ( + <> + + { + props.valueInItems.onChange(false); + setvalidateState(textInputValidate(getTextInputValidate())); + setsearchtext(value); + props.value.onChange(value); + props.onEvent("change") + }} + onFocus={() => { + setActivationFlag(true) + props.onEvent("focus") + }} + onBlur={() => props.onEvent("blur")} + onSelect={(data: string, option) => { + setsearchtext(option[valueOrLabel]); + props.valueInItems.onChange(true); + props.value.onChange(option[valueOrLabel]); + props.onEvent("submit"); + }} + filterOption={(inputValue: string, option) => { + if (ignoreCase) { + if ( + option?.label && + option?.label + .toUpperCase() + .indexOf(inputValue.toUpperCase()) !== -1 + ) + return true; + } else { + if (option?.label && option?.label.indexOf(inputValue) !== -1) + return true; + } + if ( + chineseEnv && + searchFirstPY && + option?.label && + option.label + .spell("first") + .toString() + .toLowerCase() + .indexOf(inputValue.toLowerCase()) >= 0 + ) + return true; + if ( + chineseEnv && + searchCompletePY && + option?.label && + option.label + .spell() + .toString() + .toLowerCase() + .indexOf(inputValue.toLowerCase()) >= 0 + ) + return true; + if (!searchLabelOnly) { + if (ignoreCase) { + if ( + option?.value && + option?.value + .toUpperCase() + .indexOf(inputValue.toUpperCase()) !== -1 + ) + return true; + } else { + if ( + option?.value && + option?.value.indexOf(inputValue) !== -1 + ) + return true; + } + if ( + chineseEnv && + searchFirstPY && + option?.value && + option.value + .spell("first") + .toString() + .toLowerCase() + .indexOf(inputValue.toLowerCase()) >= 0 + ) + return true; + if ( + chineseEnv && + searchCompletePY && + option?.value && + option.value + .spell() + .toString() + .toLowerCase() + .indexOf(inputValue.toLowerCase()) >= 0 + ) + return true; + } + return false; + }} + > + {autoCompleteType === "AntDesign" ? ( + props.onEvent("submit")} + /> + ) : ( + + )} + + + + ), + style: props.style, + ...validateState, + }); + }) + .setPropertyViewFn((children) => { + return ( + <> +
+ {children.autoCompleteType.propertyView({ + label: trans("autoComplete.type"), + radioButton: true, + })} + {allowClearPropertyView(children)} + {children.componentSize.propertyView({ + label: trans("autoComplete.componentSize"), + radioButton: true, + })} + {children.autoCompleteType.getView() === "AntDesign" && + children.autocompleteIconColor.propertyView({ + label: trans("button.prefixIcon"), + radioButton: true, + })} + + {children.autoCompleteType.getView() === "normal" && + children.prefixIcon.propertyView({ + label: trans("button.prefixIcon"), + })} + {children.autoCompleteType.getView() === "normal" && + children.suffixIcon.propertyView({ + label: trans("button.suffixIcon"), + })} +
+
+ {children.items.propertyView({ + label: trans("autoComplete.value"), + tooltip: itemsDataTooltip, + placeholder: "[]", + })} + {getMomentLocale() === "zh-cn" && + children.searchFirstPY.propertyView({ + label: trans("autoComplete.searchFirstPY"), + })} + {getMomentLocale() === "zh-cn" && + children.searchCompletePY.propertyView({ + label: trans("autoComplete.searchCompletePY"), + })} + {children.searchLabelOnly.propertyView({ + label: trans("autoComplete.searchLabelOnly"), + })} + {children.ignoreCase.propertyView({ + label: trans("autoComplete.ignoreCase"), + })} + {children.valueOrLabel.propertyView({ + label: trans("autoComplete.checkedValueFrom"), + radioButton: true, + })} +
+ + + + {children.label.getPropertyView()} + + + + {} + +
+ {hiddenPropertyView(children)} +
+ +
+ {children.style.getPropertyView()} +
+ + ); + }) + .setExposeMethodConfigs(autoCompleteRefMethods) + .setExposeStateConfigs([ + new NameConfig("value", trans("export.inputValueDesc")), + new NameConfig("valueInItems", trans("autoComplete.valueInItems")), + NameConfigPlaceHolder, + NameConfigRequired, + ...TextInputConfigs, + ]) + .build(); +})(); + +AutoCompleteCompBase = class extends AutoCompleteCompBase { + override autoHeight(): boolean { + return true; + } +}; + +export const AutoCompleteComp = withExposingConfigs(AutoCompleteCompBase, [ + new NameConfig("value", trans("export.inputValueDesc")), + new NameConfig("valueInItems", trans("autoComplete.valueInItems")), + NameConfigPlaceHolder, + NameConfigRequired, + ...TextInputConfigs, +]); diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteConstants.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteConstants.tsx new file mode 100644 index 000000000..eb375a170 --- /dev/null +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteConstants.tsx @@ -0,0 +1,114 @@ +import { trans } from "i18n"; +import { check } from "util/convertUtils"; +import { refMethods } from "comps/generators/withMethodExposing"; +import { InputRef } from "antd"; + + +import { + blurMethod, + focusWithOptions, + selectMethod, + setSelectionRangeMethod, +} from "comps/utils/methodUtils"; + +export const autoCompleteRefMethods = [ + ...refMethods([focusWithOptions, blurMethod, selectMethod, setSelectionRangeMethod]), +]; + + +export type autoCompleteDataTYPE = { + value: string; + label: string; +}; + +export const autocompleteIconColor = [ + { + label: trans("autoComplete.colorIcon"), + value: 'blue', + }, + { + label: trans("autoComplete.grewIcon"), + value: 'grew', + }, +] as const; + +export const valueOrLabelOption = [ + { + label: trans("autoComplete.selectLable"), + value: "label", + }, + { + label: trans("autoComplete.selectKey"), + value: "value", + }, +] as const; + +export const componentSize = [ + { + label: trans("autoComplete.small"), + value: "small", + }, + { + label: trans("autoComplete.large"), + value: "large", + }, +] as const; + +export const autoCompleteType = [ + { + label: trans("autoComplete.antDesign"), + value: "AntDesign", + }, + { + label: trans("autoComplete.normal"), + value: "normal", + }, +] as const; + +export const itemsDataTooltip = ( +
  • + {trans("autoComplete.Introduction")}: +
    + 1. label - {trans("autoComplete.helpLabel")} +
    + 2. value - {trans("autoComplete.helpValue")} +
    • +); + +export const autoCompleteDate = [ + {value: '1-BeiJing',label: '北京'}, + {value: '2-ShangHai',label: '上海'}, + {value: '3-GuangDong',label: '广东'}, + {value: '4-ShenZhen',label: '深圳'}, +]; + +export function convertAutoCompleteData(data: any) { + return data === "" ? [] : checkDataNodes(data) ?? []; +} + +function checkDataNodes( + value: any, + key?: string +): autoCompleteDataTYPE[] | undefined { + return check(value, ["array", "undefined"], key, (node, k) => { + check(node["value"], ["string"], "value"); + check(node["label"], ["string"], "label"); + return node; + }); +} +export function checkUserInfoData(data: any) { + check(data?.name, ["string"], "name") + check(data?.avatar, ["string","undefined"], "avatar") + return data +} + +export function checkMentionListData(data: any) { + if(data === "") return {} + for(const key in data) { + check(data[key], ["array"], key,(node)=>{ + check(node, ["string"], ); + return node + }) + } + return data +} \ No newline at end of file diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx index f6bdabe60..0527c5729 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx @@ -151,7 +151,7 @@ export const textInputChildren = { ...formDataChildren, }; -const textInputProps = (props: RecordConstructorToView) => ({ +export const textInputProps = (props: RecordConstructorToView) => ({ disabled: props.disabled, readOnly: props.readOnly, placeholder: props.placeholder, diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx index e2bdd418c..8f2ac1f31 100644 --- a/client/packages/lowcoder/src/comps/index.tsx +++ b/client/packages/lowcoder/src/comps/index.tsx @@ -1,5 +1,6 @@ import "comps/comps/layout/navLayout"; import "comps/comps/layout/mobileTabLayout"; +import cnchar from "cnchar"; import { ModalComp } from "comps/hooks/modalComp"; import { ButtonComp } from "./comps/buttonComp/buttonComp"; import { DropdownComp } from "./comps/buttonComp/dropdownComp"; @@ -93,6 +94,7 @@ import { VideoCompIcon, TimeLineIcon, LottieIcon, + AutoCompleteCompIcon, } from "lowcoder-design"; import { defaultFormData, FormComp } from "./comps/formComp/formComp"; @@ -119,7 +121,7 @@ import { RemoteCompInfo } from "types/remoteComp"; import { ScannerComp } from "./comps/buttonComp/scannerComp"; import { SignatureComp } from "./comps/signatureComp"; import { TimeLineComp } from "./comps/timelineComp/timelineComp"; - +import { AutoCompleteComp } from "./comps/autoCompleteComp/autoCompleteComp"; //Added by Aqib Mirza import { JsonLottieComp } from "./comps/jsonComp/jsonLottieComp"; @@ -813,7 +815,7 @@ const uiCompMap: Registry = { layoutInfo: { w: 24, h: 60, - } + }, }, signature: { name: trans("uiComp.signatureCompName"), @@ -855,6 +857,19 @@ const uiCompMap: Registry = { h: 55, }, }, + autocomplete: { + name: trans("uiComp.autoCompleteCompName"), + enName: "autoComplete", + description: trans("uiComp.autoCompleteCompDesc"), + categories: ["dataDisplay"], + icon: AutoCompleteCompIcon, + keywords: cnchar.spell(trans("uiComp.autoCompleteCompName"), "first", "low").toString(), + comp: AutoCompleteComp, + layoutInfo: { + w: 7, + h: 5, + }, + }, }; export function loadComps() { diff --git a/client/packages/lowcoder/src/comps/uiCompRegistry.ts b/client/packages/lowcoder/src/comps/uiCompRegistry.ts index bba81c125..a2fac91c3 100644 --- a/client/packages/lowcoder/src/comps/uiCompRegistry.ts +++ b/client/packages/lowcoder/src/comps/uiCompRegistry.ts @@ -112,6 +112,7 @@ export type UICompType = | "signature" | "jsonLottie" //Added By Aqib Mirza | "timeline" + | "autocomplete" export const uiCompRegistry = {} as Record; diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 160955098..c4eb204a7 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -845,6 +845,9 @@ export const en = { timelineCompName: "Time Line", timelineCompDesc: "Time Line", timelineCompKeywords: "", + autoCompleteCompName: "autoComplete", + autoCompleteCompDesc: "autoComplete", + autoCompleteCompKeywords: "", }, comp: { menuViewDocs: "View documentation", @@ -2467,5 +2470,31 @@ export const en = { valueDesc: "data of timeline", clickedObjectDesc: "clicked item data", clickedIndexDesc: "clicked item index", - } + }, + autoComplete: { + value: "auto complete value", + checkedValueFrom: "checked value from", + ignoreCase: "search ignore case", + searchLabelOnly: "search label only", + searchFirstPY: "search first pinying", + searchCompletePY: "search complete pinying", + searchText: "search text", + SectionDataName: "autoComplete Data", + valueInItems: "value in items", + type: "type", + antDesign: "AntDesign", + normal: "Normal", + selectKey: 'key', + selectLable: 'label', + ComponentType: 'Component Type', + colorIcon: 'blue', + grewIcon: 'grew', + noneIcon: 'none', + small: 'small', + large: "large", + componentSize: "component size", + Introduction: "Introduction keys", + helpLabel: "label", + helpValue: "value", + }, }; diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts index f92dff893..303262a91 100644 --- a/client/packages/lowcoder/src/i18n/locales/zh.ts +++ b/client/packages/lowcoder/src/i18n/locales/zh.ts @@ -828,6 +828,9 @@ uiComp: { timelineCompName: "时间线", timelineCompDesc: "时间线组件", timelineCompKeywords: "sjx", + autoCompleteCompName: "自动完成", + autoCompleteCompDesc: "自动完成", + autoCompleteCompKeywords: "zdwc", }, comp: { menuViewDocs: "查看文档", @@ -2458,5 +2461,31 @@ timeLine: { endlessLoop: "循环播放", keepLastFrame: "冻结最后一帧", }, + autoComplete: { + value: "数据", + checkedValueFrom: "选择提示时获取", + ignoreCase: "搜索忽略大小写", + searchLabelOnly: "仅搜索标签", + searchFirstPY: "搜索首拼", + searchCompletePY: "搜索全拼", + searchText: "搜索文字", + valueInItems: "项目中的值", + SectionDataName: "组件数据", + type: "类型", + antDesign: "AntDesign", + normal: "常规", + selectKey: '值', + selectLable: '标签', + ComponentType: '组件类型', + colorIcon: '彩色', + grewIcon: '黑白', + noneIcon: '无', + small: '小', + large: "大", + componentSize: "组件尺寸", + Introduction: '键值介绍', + helpLabel: "标签", + helpValue: "值", + }, }; diff --git a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx index 7e23f6d99..339a15484 100644 --- a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx +++ b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx @@ -37,6 +37,7 @@ import { LeftVideo, LeftSignature, TimeLineIcon, + AutoCompleteCompIcon, } from "lowcoder-design"; export const CompStateIcon: { @@ -103,4 +104,5 @@ export const CompStateIcon: { signature: , jsonLottie: , //Added By Aqib Mirza timeline: , + autocomplete: , }; diff --git a/client/yarn.lock b/client/yarn.lock index b30035da5..c000939f6 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -6065,6 +6065,22 @@ __metadata: languageName: node linkType: hard +"cnchar-types@npm:^3.2.4": + version: 3.2.4 + resolution: "cnchar-types@npm:3.2.4" + checksum: 5a79f30632cbc34e94c1fa5a81efa535956a1d9ad2c6f0dcf4f5fdaa20cbe3983056769806b04a37ed6e9aa2e80f529eaa90436ebb6faac7c8341e4a9440bb4d + languageName: node + linkType: hard + +"cnchar@npm:^3.2.4": + version: 3.2.4 + resolution: "cnchar@npm:3.2.4" + dependencies: + cnchar-types: ^3.2.4 + checksum: 536502ce4e5e3087ce33658fe250350bf247f8a546b5bb7e67fe760ee122618a7cdc5d3019171d326b7123afc05ddc573f70adf949587375c70685e23a95c172 + languageName: node + linkType: hard + "co@npm:^4.6.0": version: 4.6.0 resolution: "co@npm:4.6.0" @@ -11706,6 +11722,7 @@ __metadata: axios: ^0.21.1 buffer: ^6.0.3 clsx: ^1.2.1 + cnchar: ^3.2.4 copy-to-clipboard: ^3.3.3 core-js: ^3.25.2 dotenv: ^16.0.3 From 33209f7f0fac7936e88b4e96ef2798900257588a Mon Sep 17 00:00:00 2001 From: mou <10402885@qq.com> Date: Mon, 31 Jul 2023 22:11:56 +0800 Subject: [PATCH 2/3] Modify the component categories to dataInputText --- client/packages/lowcoder/src/comps/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx index 8f2ac1f31..cbecb0fde 100644 --- a/client/packages/lowcoder/src/comps/index.tsx +++ b/client/packages/lowcoder/src/comps/index.tsx @@ -861,7 +861,7 @@ const uiCompMap: Registry = { name: trans("uiComp.autoCompleteCompName"), enName: "autoComplete", description: trans("uiComp.autoCompleteCompDesc"), - categories: ["dataDisplay"], + categories: ["dataInputText"], icon: AutoCompleteCompIcon, keywords: cnchar.spell(trans("uiComp.autoCompleteCompName"), "first", "low").toString(), comp: AutoCompleteComp, From 92317ad751eb9e2f6133d1166654a44141602843 Mon Sep 17 00:00:00 2001 From: Aqib Mirza Date: Mon, 7 Aug 2023 13:31:54 +0530 Subject: [PATCH 3/3] fix: design fixes --- .../autoCompleteComp/autoCompleteComp.tsx | 55 +++++++++++++------ 1 file changed, 38 insertions(+), 17 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx index 5654c8bfd..81a8244bb 100644 --- a/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx @@ -12,7 +12,7 @@ import { NameConfigRequired, withExposingConfigs, } from "comps/generators/withExposing"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { UICompBuilder } from "../../generators"; import { FormDataPropertyView } from "../formComp/formDataConstants"; import { jsonControl } from "comps/controls/codeControl"; @@ -56,8 +56,38 @@ import { componentSize, } from "./autoCompleteConstants"; +// const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>` +// ${(props) => props.$style && getStyle(props.$style) } +// `; + const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>` - ${(props) => props.$style && getStyle(props.$style)} + ${(props) => css` + ${getStyle(props.$style)} + .ant-select-selection-search-input { + height: 100%; + } + input { + padding: ${props.style?.padding} + } + `} +`; + +const CustomStyledSearch = styled(AntInput.Search)<{ $style: InputLikeStyleType }>` + ${(props) => css` + padding: 0; + input.ant-input { + padding: ${props.$style?.padding}; + } + .ant-btn.ant-input-search-button { + height: 100%; + padding: ${props.$style?.padding} !important; + padding-left: 15px !important; + padding-right: 15px !important; + .ant-btn-icon { + line-height: 28px; + } + } + `} `; const childrenMap = { @@ -156,12 +186,6 @@ let AutoCompleteCompBase = (function () { { props.valueInItems.onChange(false); @@ -259,7 +283,7 @@ let AutoCompleteCompBase = (function () { }} > {autoCompleteType === "AntDesign" ? ( - props.onEvent("submit")} + $style={props.style} /> ) : (
    {children.items.propertyView({