Skip to content

Commit

Permalink
fixed floatingButton and autoComplete comps loading issue in componen…
Browse files Browse the repository at this point in the history
…t docs
  • Loading branch information
raheeliftikhar5 committed Jan 1, 2025
1 parent dd9dbf2 commit 8b13735
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 104 deletions.
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import React, { useContext, useEffect, useState } from "react";
import { ReactNode, useEffect, useState } from "react";
import { Input, Section, sectionNames } from "lowcoder-design";
import { BoolControl } from "comps/controls/boolControl";
import { styleControl } from "comps/controls/styleControl";
import {
AnimationStyle,
ChildrenMultiSelectStyle,
ChildrenMultiSelectStyleType,
InputFieldStyle,
InputLikeStyle,
InputLikeStyleType,
Expand All @@ -16,7 +18,7 @@ import {
withExposingConfigs,
} from "comps/generators/withExposing";
import styled, { css } from "styled-components";
import { UICompBuilder, withDefault } from "../../generators";
import { UICompBuilder } from "../../generators";
import { FormDataPropertyView } from "../formComp/formDataConstants";
import { jsonControl } from "comps/controls/codeControl";
import { dropdownControl } from "comps/controls/dropdownControl";
Expand All @@ -37,7 +39,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 ConfigProvider } from "antd/es/config-provider";
import { default as AutoComplete } from "antd/es/auto-complete";
import { RefControl } from "comps/controls/refControl";
import {
Expand All @@ -55,6 +56,7 @@ import {
autocompleteIconColor,
componentSize,
} from "./autoCompleteConstants";
import { DropdownStyled } from "../selectInputComp/selectCompConstants";

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


const childrenMap = {
...textInputChildren,
viewRef: RefControl<InputRef>,
allowClear: BoolControl.DEFAULT_TRUE,
style: styleControl(InputFieldStyle , 'style'),
labelStyle: styleControl(LabelStyle , 'labelStyle'),
prefixIcon: IconControl,
suffixIcon: IconControl,
items: jsonControl(convertAutoCompleteData, autoCompleteDate),
Expand All @@ -88,7 +87,10 @@ const childrenMap = {
autocompleteIconColor: dropdownControl(autocompleteIconColor, "blue"),
componentSize: dropdownControl(componentSize, "small"),
valueInItems: booleanExposingStateControl("valueInItems"),
style: styleControl(InputFieldStyle , 'style'),
labelStyle: styleControl(LabelStyle , 'labelStyle'),
inputFieldStyle: styleControl(InputLikeStyle , 'inputFieldStyle'),
childrenInputFieldStyle: styleControl(ChildrenMultiSelectStyle, 'childrenInputFieldStyle'),
animationStyle: styleControl(AnimationStyle , 'animationStyle'),
};

Expand Down Expand Up @@ -155,59 +157,85 @@ let AutoCompleteCompBase = (function () {
required: props.required,
children: (
<>
<ConfigProvider
theme={{
token: {
colorBgContainer: props.inputFieldStyle.background,
colorBorder: props.inputFieldStyle.border,
borderRadius: parseInt(props.inputFieldStyle.radius),
colorText: props.inputFieldStyle.text,
colorPrimary: props.inputFieldStyle.accent,
controlHeight: componentSize === "small" ? 30 : 38,
},
<AutoComplete
disabled={props.disabled}
value={searchtext}
options={items}
style={{ width: "100%" }}
onChange={(value: string, option) => {
props.valueInItems.onChange(false);
setvalidateState(textInputValidate(getTextInputValidate()));
setsearchtext(value);
props.value.onChange(value);
props.onEvent("change")
}}
onFocus={() => {
setActivationFlag(true)
props.onEvent("focus")
}}
>
<AutoComplete
disabled={props.disabled}
value={searchtext}
options={items}
style={{ width: "100%" }}
onChange={(value: string, option) => {
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) => {
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?.label &&
option?.label
option?.value &&
option?.value
.toUpperCase()
.indexOf(inputValue.toUpperCase()) !== -1
)
return true;
} else {
if (option?.label && option?.label.indexOf(inputValue) !== -1)
if (
option?.value &&
option?.value.indexOf(inputValue) !== -1
)
return true;
}
if (
chineseEnv &&
searchFirstPY &&
option?.label &&
option.label
option?.value &&
option.value
.spell("first")
.toString()
.toLowerCase()
Expand All @@ -217,73 +245,40 @@ let AutoCompleteCompBase = (function () {
if (
chineseEnv &&
searchCompletePY &&
option?.label &&
option.label
option?.value &&
option.value
.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;
}}
>
<InputStyle
ref={props.viewRef}
placeholder={placeholder}
allowClear={props.allowClear}
$style={props.inputFieldStyle}
prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
status={getValidate(validateState)}
onPressEnter={undefined}
/>
</AutoComplete>
</ConfigProvider>
}
return false;
}}
dropdownRender={(originNode: ReactNode) => (
<DropdownStyled $style={props.childrenInputFieldStyle as ChildrenMultiSelectStyleType}>
{originNode}
</DropdownStyled>
)}
>
<InputStyle
ref={props.viewRef}
placeholder={placeholder}
allowClear={props.allowClear}
$style={props.inputFieldStyle}
prefix={hasIcon(props.prefixIcon) && props.prefixIcon}
suffix={hasIcon(props.suffixIcon) && props.suffixIcon}
status={getValidate(validateState)}
onPressEnter={undefined}
/>
</AutoComplete>
</>
),
style: props.style,
labelStyle: props.labelStyle,
inputFieldStyle:props.inputFieldStyle,
inputFieldStyle: props.inputFieldStyle,
childrenInputFieldStyle: props.childrenInputFieldStyle,
animationStyle: props.animationStyle,
showValidationWhenEmpty: props.showValidationWhenEmpty,
...validateState,
Expand Down Expand Up @@ -350,6 +345,9 @@ let AutoCompleteCompBase = (function () {
<Section name={sectionNames.inputFieldStyle}>
{children.inputFieldStyle.getPropertyView()}
</Section>
<Section name={sectionNames.childrenInputFieldStyle}>
{children.childrenInputFieldStyle.getPropertyView()}
</Section>
<Section
name={sectionNames.animationStyle}
hasTooltip={true}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ const Select = styled(AntdSelect) <{ $style: SelectStyleType & MultiSelectStyleT
${(props) => props.$inputFieldStyle && getStyle(props.$inputFieldStyle)}
`;

const DropdownStyled = styled.div<{ $style: ChildrenMultiSelectStyleType }>`
export const DropdownStyled = styled.div<{ $style: ChildrenMultiSelectStyleType }>`
background: ${props => props.$style?.background};
border: ${props => props.$style?.border};
border-style: ${props => props.$style?.borderStyle};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ interface IBoundProps {
const Bound = styled.div<IBoundProps>`
padding: 5px;
border: ${({ show }) => `1px dashed ${show ? "rgb(51, 119, 255)" : "transparent"}`};
transform: translate(0);
`;

const StyledBorderIcon = styled(ShowBorderIcon)`
Expand Down

0 comments on commit 8b13735

Please sign in to comment.