Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit8b13735

Browse files
fixed floatingButton and autoComplete comps loading issue in component docs
1 parentdd9dbf2 commit8b13735

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-
importReact,{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
importstyled,{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{defaultasConfigProvider}from"antd/es/config-provider";
4142
import{defaultasAutoComplete}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
constInputStyle=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
constchildrenMap={
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+
returntrue;
192+
}else{
193+
if(option?.label&&option?.label.indexOf(inputValue)!==-1)
194+
returntrue;
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+
returntrue;
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+
returntrue;
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
returntrue;
202227
}else{
203-
if(option?.label&&option?.label.indexOf(inputValue)!==-1)
228+
if(
229+
option?.value&&
230+
option?.value.indexOf(inputValue)!==-1
231+
)
204232
returntrue;
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
returntrue;
228-
if(!searchLabelOnly){
229-
if(ignoreCase){
230-
if(
231-
option?.value&&
232-
option?.value
233-
.toUpperCase()
234-
.indexOf(inputValue.toUpperCase())!==-1
235-
)
236-
returntrue;
237-
}else{
238-
if(
239-
option?.value&&
240-
option?.value.indexOf(inputValue)!==-1
241-
)
242-
returntrue;
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-
returntrue;
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-
returntrue;
266-
}
267-
returnfalse;
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+
returnfalse;
258+
}}
259+
dropdownRender={(originNode:ReactNode)=>(
260+
<DropdownStyled$style={props.childrenInputFieldStyleasChildrenMultiSelectStyleType}>
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
<Sectionname={sectionNames.inputFieldStyle}>
351346
{children.inputFieldStyle.getPropertyView()}
352347
</Section>
348+
<Sectionname={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-
constDropdownStyled=styled.div<{$style:ChildrenMultiSelectStyleType}>`
193+
exportconstDropdownStyled=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
constBound=styled.div<IBoundProps>`
9191
padding: 5px;
9292
border:${({ show})=>`1px dashed${show ?"rgb(51, 119, 255)" :"transparent"}`};
93+
transform: translate(0);
9394
`;
9495

9596
constStyledBorderIcon=styled(ShowBorderIcon)`

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp