Skip to content

Autocomplete Input resize & Calendar Bugfix #693

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 20, 2024
Merged

Autocomplete Input resize & Calendar Bugfix #693

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ad0d049
fix:Date Range Component crashes when we remove Suffix Icon
freddysundowner Feb 15, 2024
a314784
fix:when using an external data source
freddysundowner Feb 15, 2024
b58ad7d
autocomplete removed extra tab and cleaned up the codes
freddysundowner Feb 17, 2024
e77d063
fixed auto complete resize issue
freddysundowner Feb 19, 2024
d2638c2
Merge branch 'dev' into autocomplete-input-resize
FalkWolsky Feb 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 16 additions & 60 deletions client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ import { trans } from "i18n";
import { IconControl } from "comps/controls/iconControl";
import { hasIcon } from "comps/utils";
import { InputRef } from "antd/es/input";
import { default as AntInputSearch } from "antd/es/input/Search";
import { default as ConfigProvider } from "antd/es/config-provider";
import { default as AutoComplete } from "antd/es/auto-complete";
import { RefControl } from "comps/controls/refControl";
Expand All @@ -54,40 +53,21 @@ import {
componentSize,
} from "./autoCompleteConstants";

// const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
// ${(props) => props.$style && getStyle(props.$style) }
// `;


const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
${(props) => css`
${getStyle(props.$style)}
.ant-select-selection-search-input {
height: 100%;
}
input {
padding: ${props.style?.padding}
padding: ${props.style?.padding};
}
`}
`;

const CustomStyledSearch = styled(AntInputSearch)<{ $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;
}
.ant-select-single {
width: 100% !important;
}
`}
`;


const childrenMap = {
...textInputChildren,
viewRef: RefControl<InputRef>,
Expand Down Expand Up @@ -131,6 +111,7 @@ let AutoCompleteCompBase = (function () {
autocompleteIconColor,
componentSize,
} = props;


const getTextInputValidate = () => {
return {
Expand Down Expand Up @@ -181,19 +162,20 @@ let AutoCompleteCompBase = (function () {
},
}}
>
<AutoComplete
<AutoComplete
disabled={props.disabled}
value={searchtext}
options={items}
options={items}
style={{ width: "100%" }}
onChange={(value: string, option) => {
props.valueInItems.onChange(false);
setvalidateState(textInputValidate(getTextInputValidate()));
setsearchtext(value);
props.value.onChange(value);
props.value.onChange(value);
props.onEvent("change")
}}
}}
onFocus={() => {
setActivationFlag(true)
setActivationFlag(true)
props.onEvent("focus")
}}
onBlur={() => props.onEvent("blur")}
Expand Down Expand Up @@ -280,22 +262,7 @@ let AutoCompleteCompBase = (function () {
return false;
}}
>
{autoCompleteType === "AntDesign" ? (
<CustomStyledSearch
placeholder={placeholder}
enterButton={autocompleteIconColor === "blue"}
allowClear={props.allowClear}
ref={props.viewRef}
onPressEnter={undefined}
status={getValidate(validateState)}
onSubmit={() => props.onEvent("submit")}
$style={props.style}
/>
) : (
<InputStyle
// style={{
// height: componentSize === "small" ? "30px" : "38px",
// }}
ref={props.viewRef}
placeholder={placeholder}
allowClear={props.allowClear}
Expand All @@ -305,29 +272,18 @@ let AutoCompleteCompBase = (function () {
status={getValidate(validateState)}
onPressEnter={undefined}
/>
)}
</AutoComplete>
</ConfigProvider>
</>
),
style: props.style,
...validateState,
// style: props.style,
// ...validateState,
});
})
.setPropertyViewFn((children) => {
return (
<>
<Section name={trans("autoComplete.ComponentType")}>
{children.autoCompleteType.propertyView({
label: trans("autoComplete.type"),
radioButton: true,
})}
{children.autoCompleteType.getView() === "AntDesign" &&
children.autocompleteIconColor.propertyView({
label: trans("button.prefixIcon"),
radioButton: true,
})}

<Section>
{children.autoCompleteType.getView() === "normal" &&
children.prefixIcon.propertyView({
label: trans("button.prefixIcon"),
Expand Down Expand Up @@ -403,6 +359,6 @@ export const AutoCompleteComp = withExposingConfigs(AutoCompleteCompBase, [
new NameConfig("value", trans("export.inputValueDesc")),
new NameConfig("valueInItems", trans("autoComplete.valueInItems")),
NameConfigPlaceHolder,
NameConfigRequired,
NameConfigRequired,
...TextInputConfigs,
]);
99 changes: 61 additions & 38 deletions client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
import { BoolControl } from "../../controls/boolControl";
import { LabelControl } from "../../controls/labelControl";
import { BoolCodeControl, StringControl } from "../../controls/codeControl";
import { PaddingControl } from "../../controls/paddingControl";
import { PaddingControl } from "../../controls/paddingControl";
import { MarginControl } from "../../controls/marginControl";
import {
ControlNode,
Expand All @@ -27,14 +27,17 @@ import {
SelectInputValidationChildren,
SelectInputValidationSection,
} from "./selectInputConstants";
import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
import {
formDataChildren,
FormDataPropertyView,
} from "../formComp/formDataConstants";
import {
CascaderStyleType,
MultiSelectStyleType,
SelectStyleType,
TreeSelectStyleType,
widthCalculator,
heightCalculator
heightCalculator,
} from "comps/controls/styleControlConstants";
import { stateComp, withDefault } from "../../generators";
import {
Expand All @@ -55,34 +58,39 @@ import { useContext } from "react";
import { EditorContext } from "comps/editorState";

export const getStyle = (
style: SelectStyleType | MultiSelectStyleType | CascaderStyleType | TreeSelectStyleType
style:
| SelectStyleType
| MultiSelectStyleType
| CascaderStyleType
| TreeSelectStyleType
) => {
return css`
&.ant-select .ant-select-selector,
&.ant-select-multiple .ant-select-selection-item {
border-radius: ${style.radius};
padding: ${style.padding};
height: auto;
}
.ant-select-selection-search {
padding: ${style.padding};
}
.ant-select-selector::after,
.ant-select-selection-placeholder,
.ant-select-selection-item {
padding: ${style.padding};
height: auto;
}
.ant-select-selection-search {
padding: ${style.padding};
}
.ant-select-selector::after,
.ant-select-selection-placeholder,
.ant-select-selection-item {
line-height: 1.5715 !important;
}

&.ant-select:not(.ant-select-disabled) {
color: ${style.text};
.ant-select-selection-placeholder,
.ant-select-selection-item {
line-height: 1.5715 !important;
.ant-select-selection-placeholder,
.ant-select-selection-item {
line-height: 1.5715 !important;
}
.ant-select-selection-placeholder,
&.ant-select-single.ant-select-open .ant-select-selection-item {
color: ${style.text};
opacity: 0.4;
width: 100%;
}

.ant-select-selector {
Expand All @@ -103,16 +111,16 @@ export const getStyle = (
color: ${style.text === "#222222"
? "#8B8FA3"
: isDarkColor(style.text)
? lightenColor(style.text, 0.2)
: style.text};
? lightenColor(style.text, 0.2)
: style.text};
}

.ant-select-clear:hover {
color: ${style.text === "#222222"
? "#8B8FA3"
: isDarkColor(style.text)
? lightenColor(style.text, 0.1)
: style.text};
? lightenColor(style.text, 0.1)
: style.text};
}

&.ant-select-multiple .ant-select-selection-item {
Expand Down Expand Up @@ -160,7 +168,9 @@ const getDropdownStyle = (style: MultiSelectStyleType) => {
`;
};

const Select = styled(AntdSelect)<{ $style: SelectStyleType & MultiSelectStyleType }>`
const Select = styled(AntdSelect)<{
$style: SelectStyleType & MultiSelectStyleType;
}>`
width: 100%;

${(props) => props.$style && getStyle(props.$style)}
Expand All @@ -169,7 +179,7 @@ const Select = styled(AntdSelect)<{ $style: SelectStyleType & MultiSelectStyleTy
const DropdownStyled = styled.div<{ $style: MultiSelectStyleType }>`
${(props) => props.$style && getDropdownStyle(props.$style)}
.ant-select-item-option-content {
${(props) => `padding: ${props.$style.padding}`};
${(props) => `padding: ${props.$style.padding}`};
}
.option-label img {
min-width: 14px;
Expand Down Expand Up @@ -197,7 +207,7 @@ export const SelectChildrenMap = {
inputValue: stateComp<string>(""), // user's input value when search
showSearch: BoolControl.DEFAULT_TRUE,
viewRef: RefControl<BaseSelectRef>,
margin: MarginControl,
margin: MarginControl,
padding: PaddingControl,
...SelectInputValidationChildren,
...formDataChildren,
Expand All @@ -221,9 +231,13 @@ export const SelectUIView = (
placeholder={props.placeholder}
value={props.value}
showSearch={props.showSearch}
filterOption={(input, option) => option?.label.toLowerCase().includes(input.toLowerCase())}
filterOption={(input, option) =>
option?.label.toLowerCase().includes(input.toLowerCase())
}
dropdownRender={(originNode: ReactNode) => (
<DropdownStyled $style={props.style as MultiSelectStyleType}>{originNode}</DropdownStyled>
<DropdownStyled $style={props.style as MultiSelectStyleType}>
{originNode}
</DropdownStyled>
)}
dropdownStyle={{
padding: 0,
Expand All @@ -250,8 +264,8 @@ export const SelectUIView = (
key={option.value}
>
<Wrapper className="option-label">
{props.options.findIndex((option) => hasIcon(option.prefixIcon)) > -1 &&
option.prefixIcon}
{props.options.findIndex((option) => hasIcon(option.prefixIcon)) >
-1 && option.prefixIcon}
{<span>{option.label}</span>}
</Wrapper>
</Select.Option>
Expand All @@ -273,24 +287,28 @@ export const SelectPropertyView = (
<>
<Section name={sectionNames.basic}>
{children.options.propertyView({})}
{children.defaultValue.propertyView({ label: trans("prop.defaultValue") })}
{children.defaultValue.propertyView({
label: trans("prop.defaultValue"),
})}
{placeholderPropertyView(children)}
</Section>

{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
<><>
<SelectInputValidationSection {...children} />
<FormDataPropertyView {...children} />
</><Section name={sectionNames.interaction}>
<>
<>
<SelectInputValidationSection {...children} />
<FormDataPropertyView {...children} />
</>
<Section name={sectionNames.interaction}>
{children.onEvent.getPropertyView()}
{disabledPropertyView(children)}
{hiddenPropertyView(children)}
</Section></>
</Section>
</>
)}

{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
children.label.getPropertyView()
)}
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) &&
children.label.getPropertyView()}

{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
<Section name={sectionNames.advanced}>
Expand All @@ -299,12 +317,17 @@ export const SelectPropertyView = (
</Section>
)}

{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
{["layout", "both"].includes(
useContext(EditorContext).editorModeStatus
) && (
<Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section>
)}
</>
);

export const baseSelectRefMethods = refMethods<BaseSelectRef>([focusMethod, blurMethod]);
export const baseSelectRefMethods = refMethods<BaseSelectRef>([
focusMethod,
blurMethod,
]);
Loading