Skip to content

Commit 585c899

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #693 from lowcoder-org/autocomplete-input-resize
Autocomplete Input resize & Calendar Bugfix
2 parents 0a65c47 + d2638c2 commit 585c899

File tree

4 files changed

+134
-114
lines changed

4 files changed

+134
-114
lines changed

‎client/packages/lowcoder/src/comps/comps/autoCompleteComp/autoCompleteComp.tsx

Lines changed: 16 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ import { trans } from "i18n";
3434
import { IconControl } from "comps/controls/iconControl";
3535
import { hasIcon } from "comps/utils";
3636
import { InputRef } from "antd/es/input";
37-
import { default as AntInputSearch } from "antd/es/input/Search";
3837
import { default as ConfigProvider } from "antd/es/config-provider";
3938
import { default as AutoComplete } from "antd/es/auto-complete";
4039
import { RefControl } from "comps/controls/refControl";
@@ -54,40 +53,21 @@ import {
5453
componentSize,
5554
} from "./autoCompleteConstants";
5655

57-
// const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
58-
// ${(props) => props.$style && getStyle(props.$style) }
59-
// `;
56+
6057

6158
const InputStyle = styled(Input)<{ $style: InputLikeStyleType }>`
6259
${(props) => css`
6360
${getStyle(props.$style)}
64-
.ant-select-selection-search-input {
65-
height: 100%;
66-
}
6761
input {
68-
padding: ${props.style?.padding}
62+
padding: ${props.style?.padding};
6963
}
70-
`}
71-
`;
72-
73-
const CustomStyledSearch = styled(AntInputSearch)<{ $style: InputLikeStyleType }>`
74-
${(props) => css`
75-
padding: 0;
76-
input.ant-input {
77-
padding: ${props.$style?.padding};
78-
}
79-
.ant-btn.ant-input-search-button {
80-
height: 100%;
81-
padding: ${props.$style?.padding} !important;
82-
padding-left: 15px !important;
83-
padding-right: 15px !important;
84-
.ant-btn-icon {
85-
line-height: 28px;
86-
}
64+
.ant-select-single {
65+
width: 100% !important;
8766
}
8867
`}
8968
`;
9069

70+
9171
const childrenMap = {
9272
...textInputChildren,
9373
viewRef: RefControl<InputRef>,
@@ -131,6 +111,7 @@ let AutoCompleteCompBase = (function () {
131111
autocompleteIconColor,
132112
componentSize,
133113
} = props;
114+
134115

135116
const getTextInputValidate = () => {
136117
return {
@@ -181,19 +162,20 @@ let AutoCompleteCompBase = (function () {
181162
},
182163
}}
183164
>
184-
<AutoComplete
165+
<AutoComplete
185166
disabled={props.disabled}
186167
value={searchtext}
187-
options={items}
168+
options={items}
169+
style={{ width: "100%" }}
188170
onChange={(value: string, option) => {
189171
props.valueInItems.onChange(false);
190172
setvalidateState(textInputValidate(getTextInputValidate()));
191173
setsearchtext(value);
192-
props.value.onChange(value);
174+
props.value.onChange(value);
193175
props.onEvent("change")
194-
}}
176+
}}
195177
onFocus={() => {
196-
setActivationFlag(true)
178+
setActivationFlag(true)
197179
props.onEvent("focus")
198180
}}
199181
onBlur={() => props.onEvent("blur")}
@@ -280,22 +262,7 @@ let AutoCompleteCompBase = (function () {
280262
return false;
281263
}}
282264
>
283-
{autoCompleteType === "AntDesign" ? (
284-
<CustomStyledSearch
285-
placeholder={placeholder}
286-
enterButton={autocompleteIconColor === "blue"}
287-
allowClear={props.allowClear}
288-
ref={props.viewRef}
289-
onPressEnter={undefined}
290-
status={getValidate(validateState)}
291-
onSubmit={() => props.onEvent("submit")}
292-
$style={props.style}
293-
/>
294-
) : (
295265
<InputStyle
296-
// style={{
297-
// height: componentSize === "small" ? "30px" : "38px",
298-
// }}
299266
ref={props.viewRef}
300267
placeholder={placeholder}
301268
allowClear={props.allowClear}
@@ -305,29 +272,18 @@ let AutoCompleteCompBase = (function () {
305272
status={getValidate(validateState)}
306273
onPressEnter={undefined}
307274
/>
308-
)}
309275
</AutoComplete>
310276
</ConfigProvider>
311277
</>
312278
),
313-
style: props.style,
314-
...validateState,
279+
// style: props.style,
280+
// ...validateState,
315281
});
316282
})
317283
.setPropertyViewFn((children) => {
318284
return (
319285
<>
320-
<Section name={trans("autoComplete.ComponentType")}>
321-
{children.autoCompleteType.propertyView({
322-
label: trans("autoComplete.type"),
323-
radioButton: true,
324-
})}
325-
{children.autoCompleteType.getView() === "AntDesign" &&
326-
children.autocompleteIconColor.propertyView({
327-
label: trans("button.prefixIcon"),
328-
radioButton: true,
329-
})}
330-
286+
<Section>
331287
{children.autoCompleteType.getView() === "normal" &&
332288
children.prefixIcon.propertyView({
333289
label: trans("button.prefixIcon"),
@@ -403,6 +359,6 @@ export const AutoCompleteComp = withExposingConfigs(AutoCompleteCompBase, [
403359
new NameConfig("value", trans("export.inputValueDesc")),
404360
new NameConfig("valueInItems", trans("autoComplete.valueInItems")),
405361
NameConfigPlaceHolder,
406-
NameConfigRequired,
362+
NameConfigRequired,
407363
...TextInputConfigs,
408364
]);

‎client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx

Lines changed: 61 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
import { BoolControl } from "../../controls/boolControl";
88
import { LabelControl } from "../../controls/labelControl";
99
import { BoolCodeControl, StringControl } from "../../controls/codeControl";
10-
import { PaddingControl } from "../../controls/paddingControl";
10+
import { PaddingControl } from "../../controls/paddingControl";
1111
import { MarginControl } from "../../controls/marginControl";
1212
import {
1313
ControlNode,
@@ -27,14 +27,17 @@ import {
2727
SelectInputValidationChildren,
2828
SelectInputValidationSection,
2929
} from "./selectInputConstants";
30-
import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
30+
import {
31+
formDataChildren,
32+
FormDataPropertyView,
33+
} from "../formComp/formDataConstants";
3134
import {
3235
CascaderStyleType,
3336
MultiSelectStyleType,
3437
SelectStyleType,
3538
TreeSelectStyleType,
3639
widthCalculator,
37-
heightCalculator
40+
heightCalculator,
3841
} from "comps/controls/styleControlConstants";
3942
import { stateComp, withDefault } from "../../generators";
4043
import {
@@ -55,34 +58,39 @@ import { useContext } from "react";
5558
import { EditorContext } from "comps/editorState";
5659

5760
export const getStyle = (
58-
style: SelectStyleType | MultiSelectStyleType | CascaderStyleType | TreeSelectStyleType
61+
style:
62+
| SelectStyleType
63+
| MultiSelectStyleType
64+
| CascaderStyleType
65+
| TreeSelectStyleType
5966
) => {
6067
return css`
6168
&.ant-select .ant-select-selector,
6269
&.ant-select-multiple .ant-select-selection-item {
6370
border-radius: ${style.radius};
64-
padding: ${style.padding};
65-
height: auto;
66-
}
67-
.ant-select-selection-search {
68-
padding: ${style.padding};
69-
}
70-
.ant-select-selector::after,
71-
.ant-select-selection-placeholder,
72-
.ant-select-selection-item {
71+
padding: ${style.padding};
72+
height: auto;
73+
}
74+
.ant-select-selection-search {
75+
padding: ${style.padding};
76+
}
77+
.ant-select-selector::after,
78+
.ant-select-selection-placeholder,
79+
.ant-select-selection-item {
7380
line-height: 1.5715 !important;
7481
}
7582
7683
&.ant-select:not(.ant-select-disabled) {
7784
color: ${style.text};
78-
.ant-select-selection-placeholder,
79-
.ant-select-selection-item {
80-
line-height: 1.5715 !important;
85+
.ant-select-selection-placeholder,
86+
.ant-select-selection-item {
87+
line-height: 1.5715 !important;
8188
}
8289
.ant-select-selection-placeholder,
8390
&.ant-select-single.ant-select-open .ant-select-selection-item {
8491
color: ${style.text};
8592
opacity: 0.4;
93+
width: 100%;
8694
}
8795
8896
.ant-select-selector {
@@ -103,16 +111,16 @@ export const getStyle = (
103111
color: ${style.text === "#222222"
104112
? "#8B8FA3"
105113
: isDarkColor(style.text)
106-
? lightenColor(style.text, 0.2)
107-
: style.text};
114+
? lightenColor(style.text, 0.2)
115+
: style.text};
108116
}
109117
110118
.ant-select-clear:hover {
111119
color: ${style.text === "#222222"
112120
? "#8B8FA3"
113121
: isDarkColor(style.text)
114-
? lightenColor(style.text, 0.1)
115-
: style.text};
122+
? lightenColor(style.text, 0.1)
123+
: style.text};
116124
}
117125
118126
&.ant-select-multiple .ant-select-selection-item {
@@ -160,7 +168,9 @@ const getDropdownStyle = (style: MultiSelectStyleType) => {
160168
`;
161169
};
162170

163-
const Select = styled(AntdSelect)<{ $style: SelectStyleType & MultiSelectStyleType }>`
171+
const Select = styled(AntdSelect)<{
172+
$style: SelectStyleType & MultiSelectStyleType;
173+
}>`
164174
width: 100%;
165175
166176
${(props) => props.$style && getStyle(props.$style)}
@@ -169,7 +179,7 @@ const Select = styled(AntdSelect)<{ $style: SelectStyleType & MultiSelectStyleTy
169179
const DropdownStyled = styled.div<{ $style: MultiSelectStyleType }>`
170180
${(props) => props.$style && getDropdownStyle(props.$style)}
171181
.ant-select-item-option-content {
172-
${(props) => `padding: ${props.$style.padding}`};
182+
${(props) => `padding: ${props.$style.padding}`};
173183
}
174184
.option-label img {
175185
min-width: 14px;
@@ -197,7 +207,7 @@ export const SelectChildrenMap = {
197207
inputValue: stateComp<string>(""), // user's input value when search
198208
showSearch: BoolControl.DEFAULT_TRUE,
199209
viewRef: RefControl<BaseSelectRef>,
200-
margin: MarginControl,
210+
margin: MarginControl,
201211
padding: PaddingControl,
202212
...SelectInputValidationChildren,
203213
...formDataChildren,
@@ -221,9 +231,13 @@ export const SelectUIView = (
221231
placeholder={props.placeholder}
222232
value={props.value}
223233
showSearch={props.showSearch}
224-
filterOption={(input, option) => option?.label.toLowerCase().includes(input.toLowerCase())}
234+
filterOption={(input, option) =>
235+
option?.label.toLowerCase().includes(input.toLowerCase())
236+
}
225237
dropdownRender={(originNode: ReactNode) => (
226-
<DropdownStyled $style={props.style as MultiSelectStyleType}>{originNode}</DropdownStyled>
238+
<DropdownStyled $style={props.style as MultiSelectStyleType}>
239+
{originNode}
240+
</DropdownStyled>
227241
)}
228242
dropdownStyle={{
229243
padding: 0,
@@ -250,8 +264,8 @@ export const SelectUIView = (
250264
key={option.value}
251265
>
252266
<Wrapper className="option-label">
253-
{props.options.findIndex((option) => hasIcon(option.prefixIcon)) > -1 &&
254-
option.prefixIcon}
267+
{props.options.findIndex((option) => hasIcon(option.prefixIcon)) >
268+
-1 && option.prefixIcon}
255269
{<span>{option.label}</span>}
256270
</Wrapper>
257271
</Select.Option>
@@ -273,24 +287,28 @@ export const SelectPropertyView = (
273287
<>
274288
<Section name={sectionNames.basic}>
275289
{children.options.propertyView({})}
276-
{children.defaultValue.propertyView({ label: trans("prop.defaultValue") })}
290+
{children.defaultValue.propertyView({
291+
label: trans("prop.defaultValue"),
292+
})}
277293
{placeholderPropertyView(children)}
278294
</Section>
279295

280296
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
281-
<><>
282-
<SelectInputValidationSection {...children} />
283-
<FormDataPropertyView {...children} />
284-
</><Section name={sectionNames.interaction}>
297+
<>
298+
<>
299+
<SelectInputValidationSection {...children} />
300+
<FormDataPropertyView {...children} />
301+
</>
302+
<Section name={sectionNames.interaction}>
285303
{children.onEvent.getPropertyView()}
286304
{disabledPropertyView(children)}
287305
{hiddenPropertyView(children)}
288-
</Section></>
306+
</Section>
307+
</>
289308
)}
290309

291-
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
292-
children.label.getPropertyView()
293-
)}
310+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) &&
311+
children.label.getPropertyView()}
294312

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

302-
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
320+
{["layout", "both"].includes(
321+
useContext(EditorContext).editorModeStatus
322+
) && (
303323
<Section name={sectionNames.style}>
304324
{children.style.getPropertyView()}
305325
</Section>
306326
)}
307327
</>
308328
);
309329

310-
export const baseSelectRefMethods = refMethods<BaseSelectRef>([focusMethod, blurMethod]);
330+
export const baseSelectRefMethods = refMethods<BaseSelectRef>([
331+
focusMethod,
332+
blurMethod,
333+
]);

0 commit comments

Comments
 (0)