Skip to content

Commit 8b13735

Browse files
raheeliftikhar5raheeliftikhar5
committed
fixed floatingButton and autoComplete comps loading issue in component docs
1 parent dd9dbf2 commit 8b13735

File tree

3 files changed

+103
-104
lines changed

3 files changed

+103
-104
lines changed

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

Lines changed: 101 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import React, { useContext, useEffect, useState } from "react";
1+
import { ReactNode, useEffect, useState } from "react";
22
import { Input, Section, sectionNames } from "lowcoder-design";
33
import { BoolControl } from "comps/controls/boolControl";
44
import { styleControl } from "comps/controls/styleControl";
55
import {
66
AnimationStyle,
7+
ChildrenMultiSelectStyle,
8+
ChildrenMultiSelectStyleType,
79
InputFieldStyle,
810
InputLikeStyle,
911
InputLikeStyleType,
@@ -16,7 +18,7 @@ import {
1618
withExposingConfigs,
1719
} from "comps/generators/withExposing";
1820
import styled, { css } from "styled-components";
19-
import { UICompBuilder, withDefault } from "../../generators";
21+
import { UICompBuilder } from "../../generators";
2022
import { FormDataPropertyView } from "../formComp/formDataConstants";
2123
import { jsonControl } from "comps/controls/codeControl";
2224
import { dropdownControl } from "comps/controls/dropdownControl";
@@ -37,7 +39,6 @@ import { trans } from "i18n";
3739
import { IconControl } from "comps/controls/iconControl";
3840
import { hasIcon } from "comps/utils";
3941
import { InputRef } from "antd/es/input";
40-
import { default as ConfigProvider } from "antd/es/config-provider";
4142
import { default as AutoComplete } from "antd/es/auto-complete";
4243
import { RefControl } from "comps/controls/refControl";
4344
import {
@@ -55,6 +56,7 @@ import {
5556
autocompleteIconColor,
5657
componentSize,
5758
} from "./autoCompleteConstants";
59+
import { DropdownStyled } from "../selectInputComp/selectCompConstants";
5860

5961
const InputStyle = styled(Input) <{ $style: InputLikeStyleType }>`
6062
box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}`};
@@ -69,13 +71,10 @@ box-shadow: ${props=>`${props.$style?.boxShadow} ${props.$style?.boxShadowColor}
6971
`}
7072
`;
7173

72-
7374
const childrenMap = {
7475
...textInputChildren,
7576
viewRef: RefControl<InputRef>,
7677
allowClear: BoolControl.DEFAULT_TRUE,
77-
style: styleControl(InputFieldStyle , 'style'),
78-
labelStyle: styleControl(LabelStyle , 'labelStyle'),
7978
prefixIcon: IconControl,
8079
suffixIcon: IconControl,
8180
items: jsonControl(convertAutoCompleteData, autoCompleteDate),
@@ -88,7 +87,10 @@ const childrenMap = {
8887
autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"),
8988
componentSize: dropdownControl(componentSize, "small"),
9089
valueInItems: booleanExposingStateControl("valueInItems"),
90+
style: styleControl(InputFieldStyle , 'style'),
91+
labelStyle: styleControl(LabelStyle , 'labelStyle'),
9192
inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
93+
childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle'),
9294
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
9395
};
9496

@@ -155,59 +157,85 @@ let AutoCompleteCompBase = (function () {
155157
required: props.required,
156158
children: (
157159
<>
158-
<ConfigProvider
159-
theme={{
160-
token: {
161-
colorBgContainer: props.inputFieldStyle.background,
162-
colorBorder: props.inputFieldStyle.border,
163-
borderRadius: parseInt(props.inputFieldStyle.radius),
164-
colorText: props.inputFieldStyle.text,
165-
colorPrimary: props.inputFieldStyle.accent,
166-
controlHeight: componentSize === "small" ? 30 : 38,
167-
},
160+
<AutoComplete
161+
disabled={props.disabled}
162+
value={searchtext}
163+
options={items}
164+
style={{ width: "100%" }}
165+
onChange={(value: string, option) => {
166+
props.valueInItems.onChange(false);
167+
setvalidateState(textInputValidate(getTextInputValidate()));
168+
setsearchtext(value);
169+
props.value.onChange(value);
170+
props.onEvent("change")
171+
}}
172+
onFocus={() => {
173+
setActivationFlag(true)
174+
props.onEvent("focus")
168175
}}
169-
>
170-
<AutoComplete
171-
disabled={props.disabled}
172-
value={searchtext}
173-
options={items}
174-
style={{ width: "100%" }}
175-
onChange={(value: string, option) => {
176-
props.valueInItems.onChange(false);
177-
setvalidateState(textInputValidate(getTextInputValidate()));
178-
setsearchtext(value);
179-
props.value.onChange(value);
180-
props.onEvent("change")
181-
}}
182-
onFocus={() => {
183-
setActivationFlag(true)
184-
props.onEvent("focus")
185-
}}
186-
onBlur={() => props.onEvent("blur")}
187-
onSelect={(data: string, option) => {
188-
setsearchtext(option[valueOrLabel]);
189-
props.valueInItems.onChange(true);
190-
props.value.onChange(option[valueOrLabel]);
191-
props.onEvent("submit");
192-
}}
193-
filterOption={(inputValue: string, option) => {
176+
onBlur={() => props.onEvent("blur")}
177+
onSelect={(data: string, option) => {
178+
setsearchtext(option[valueOrLabel]);
179+
props.valueInItems.onChange(true);
180+
props.value.onChange(option[valueOrLabel]);
181+
props.onEvent("submit");
182+
}}
183+
filterOption={(inputValue: string, option) => {
184+
if (ignoreCase) {
185+
if (
186+
option?.label &&
187+
option?.label
188+
.toUpperCase()
189+
.indexOf(inputValue.toUpperCase()) !== -1
190+
)
191+
return true;
192+
} else {
193+
if (option?.label && option?.label.indexOf(inputValue) !== -1)
194+
return true;
195+
}
196+
if (
197+
chineseEnv &&
198+
searchFirstPY &&
199+
option?.label &&
200+
option.label
201+
.spell("first")
202+
.toString()
203+
.toLowerCase()
204+
.indexOf(inputValue.toLowerCase()) >= 0
205+
)
206+
return true;
207+
if (
208+
chineseEnv &&
209+
searchCompletePY &&
210+
option?.label &&
211+
option.label
212+
.spell()
213+
.toString()
214+
.toLowerCase()
215+
.indexOf(inputValue.toLowerCase()) >= 0
216+
)
217+
return true;
218+
if (!searchLabelOnly) {
194219
if (ignoreCase) {
195220
if (
196-
option?.label &&
197-
option?.label
221+
option?.value &&
222+
option?.value
198223
.toUpperCase()
199224
.indexOf(inputValue.toUpperCase()) !== -1
200225
)
201226
return true;
202227
} else {
203-
if (option?.label && option?.label.indexOf(inputValue) !== -1)
228+
if (
229+
option?.value &&
230+
option?.value.indexOf(inputValue) !== -1
231+
)
204232
return true;
205233
}
206234
if (
207235
chineseEnv &&
208236
searchFirstPY &&
209-
option?.label &&
210-
option.label
237+
option?.value &&
238+
option.value
211239
.spell("first")
212240
.toString()
213241
.toLowerCase()
@@ -217,73 +245,40 @@ let AutoCompleteCompBase = (function () {
217245
if (
218246
chineseEnv &&
219247
searchCompletePY &&
220-
option?.label &&
221-
option.label
248+
option?.value &&
249+
option.value
222250
.spell()
223251
.toString()
224252
.toLowerCase()
225253
.indexOf(inputValue.toLowerCase()) >= 0
226254
)
227255
return true;
228-
if (!searchLabelOnly) {
229-
if (ignoreCase) {
230-
if (
231-
option?.value &&
232-
option?.value
233-
.toUpperCase()
234-
.indexOf(inputValue.toUpperCase()) !== -1
235-
)
236-
return true;
237-
} else {
238-
if (
239-
option?.value &&
240-
option?.value.indexOf(inputValue) !== -1
241-
)
242-
return true;
243-
}
244-
if (
245-
chineseEnv &&
246-
searchFirstPY &&
247-
option?.value &&
248-
option.value
249-
.spell("first")
250-
.toString()
251-
.toLowerCase()
252-
.indexOf(inputValue.toLowerCase()) >= 0
253-
)
254-
return true;
255-
if (
256-
chineseEnv &&
257-
searchCompletePY &&
258-
option?.value &&
259-
option.value
260-
.spell()
261-
.toString()
262-
.toLowerCase()
263-
.indexOf(inputValue.toLowerCase()) >= 0
264-
)
265-
return true;
266-
}
267-
return false;
268-
}}
269-
>
270-
<InputStyle
271-
ref={props.viewRef}
272-
placeholder={placeholder}
273-
allowClear={props.allowClear}
274-
$style={props.inputFieldStyle}
275-
prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
276-
suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
277-
status={getValidate(validateState)}
278-
onPressEnter={undefined}
279-
/>
280-
</AutoComplete>
281-
</ConfigProvider>
256+
}
257+
return false;
258+
}}
259+
dropdownRender={(originNode: ReactNode) => (
260+
<DropdownStyled $style={props.childrenInputFieldStyle as ChildrenMultiSelectStyleType}>
261+
{originNode}
262+
</DropdownStyled>
263+
)}
264+
>
265+
<InputStyle
266+
ref={props.viewRef}
267+
placeholder={placeholder}
268+
allowClear={props.allowClear}
269+
$style={props.inputFieldStyle}
270+
prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
271+
suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
272+
status={getValidate(validateState)}
273+
onPressEnter={undefined}
274+
/>
275+
</AutoComplete>
282276
</>
283277
),
284278
style: props.style,
285279
labelStyle: props.labelStyle,
286-
inputFieldStyle:props.inputFieldStyle,
280+
inputFieldStyle: props.inputFieldStyle,
281+
childrenInputFieldStyle: props.childrenInputFieldStyle,
287282
animationStyle: props.animationStyle,
288283
showValidationWhenEmpty: props.showValidationWhenEmpty,
289284
...validateState,
@@ -350,6 +345,9 @@ let AutoCompleteCompBase = (function () {
350345
<Section name={sectionNames.inputFieldStyle}>
351346
{children.inputFieldStyle.getPropertyView()}
352347
</Section>
348+
<Section name={sectionNames.childrenInputFieldStyle}>
349+
{children.childrenInputFieldStyle.getPropertyView()}
350+
</Section>
353351
<Section
354352
name={sectionNames.animationStyle}
355353
hasTooltip={true}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ const Select = styled(AntdSelect) <{ $style: SelectStyleType & MultiSelectStyleT
190190
${(props) => props.$inputFieldStyle && getStyle(props.$inputFieldStyle)}
191191
`;
192192

193-
const DropdownStyled = styled.div<{ $style: ChildrenMultiSelectStyleType }>`
193+
export const DropdownStyled = styled.div<{ $style: ChildrenMultiSelectStyleType }>`
194194
background: ${props => props.$style?.background};
195195
border: ${props => props.$style?.border};
196196
border-style: ${props => props.$style?.borderStyle};

‎client/packages/lowcoder/src/pages/ComponentDoc/common/Example.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@ interface IBoundProps {
9090
const Bound = styled.div<IBoundProps>`
9191
padding: 5px;
9292
border: ${({ show }) => `1px dashed ${show ? "rgb(51, 119, 255)" : "transparent"}`};
93+
transform: translate(0);
9394
`;
9495

9596
const StyledBorderIcon = styled(ShowBorderIcon)`

0 commit comments

Comments
 (0)