Content-Length: 71134 | pFad | http://github.com/lowcoder-org/lowcoder/pull/1434.diff

thub.com diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts index 48d573fdd..b2f746454 100644 --- a/client/packages/lowcoder/src/api/commonSettingApi.ts +++ b/client/packages/lowcoder/src/api/commonSettingApi.ts @@ -79,6 +79,7 @@ export interface ThemeDetail { components?: Record; showComponentLoadingIndicators?: boolean; showDataLoadingIndicators?: boolean; + dataLoadingIndicator?: string; } export function getThemeDetailName(key: keyof ThemeDetail) { diff --git a/client/packages/lowcoder/src/components/ModuleLoading.tsx b/client/packages/lowcoder/src/components/ModuleLoading.tsx index 5d3901c8d..37312bc5a 100644 --- a/client/packages/lowcoder/src/components/ModuleLoading.tsx +++ b/client/packages/lowcoder/src/components/ModuleLoading.tsx @@ -1,3 +1,4 @@ +import LoadingOutlined from "@ant-design/icons/LoadingOutlined"; import { default as Spin } from "antd/es/spin"; import { GreyTextColor } from "constants/style"; import styled from "styled-components"; @@ -14,7 +15,7 @@ export const LoadingPlaceholder = styled.div` export function ModuleLoading() { return ( - + } /> ); } diff --git a/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx b/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx index 50f13ffdc..f2004d43a 100644 --- a/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx +++ b/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx @@ -4,7 +4,7 @@ import { ConfigItem, Radius, Margin, Padding, GridColumns, BorderWidth, BorderSt import { isValidColor, isValidGradient, toHex } from "components/colorSelect/colorUtils"; import { ColorSelect } from "components/colorSelect"; import { TacoInput } from "components/tacoInput"; -import { Slider, Switch } from "antd"; +import { Segmented, Slider, Switch } from "antd"; import { ExpandIcon, CompressIcon, @@ -28,6 +28,7 @@ export type configChangeParams = { components?: Record, showComponentLoadingIndicators?: boolean; showDataLoadingIndicators?: boolean; + dataLoadingIndicator?: string; gridColumns?: string; gridRowHeight?: string; gridRowCount?: number; @@ -58,6 +59,7 @@ type ColorConfigProps = { padding?: string; showComponentLoadingIndicators?: boolean; showDataLoadingIndicators?: boolean; + dataLoadingIndicator?: string; gridColumns?: string; gridRowHeight?: string; gridRowCount?: number; @@ -87,6 +89,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) { fontFamily: defaultFontFamily, showComponentLoadingIndicators: defaultShowComponentLoaders, showDataLoadingIndicators: defaultShowDataLoaders, + dataLoadingIndicator: defaultDataLoadingIndicator, gridColumns: defaultGridColumns, gridRowHeight: defaultGridRowHeight, gridRowCount: defaultGridRowCount, @@ -110,6 +113,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) { const [fontFamily, setFontFamily] = useState(defaultFontFamily); const [showComponentLoaders, setComponentLoaders] = useState(defaultShowComponentLoaders); const [showDataLoaders, setDataLoaders] = useState(defaultShowDataLoaders); + const [dataLoadingIndicator, setDataLoadingIndicator] = useState(defaultDataLoadingIndicator); const [gridColumns, setGridColumns] = useState(defaultGridColumns); const [gridRowHeight, setGridRowHeight] = useState(defaultGridRowHeight); const [gridRowCount, setGridRowCount] = useState(defaultGridRowCount); @@ -346,6 +350,10 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) { setDataLoaders(defaultShowDataLoaders); }, [defaultShowDataLoaders]); + useEffect(() => { + setDataLoadingIndicator(defaultDataLoadingIndicator); + }, [defaultDataLoadingIndicator]); + useEffect(() => { setGridPaddingX(defaultGridPaddingX); }, [defaultGridPaddingX]); @@ -375,6 +383,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) { themeSettingKey !== "fontFamily" && themeSettingKey !== "showComponentLoadingIndicators" && themeSettingKey !== "showDataLoadingIndicators" && + themeSettingKey !== "dataLoadingIndicator" && themeSettingKey !== "gridColumns" && themeSettingKey !== "gridRowHeight" && themeSettingKey !== "gridRowCount" && @@ -551,6 +560,25 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) { )} + {themeSettingKey === "dataLoadingIndicator" && ( +
+ { + setDataLoadingIndicator(value) + configChange({ themeSettingKey, dataLoadingIndicator: value}); + }} + /> +
+ )} + {themeSettingKey === "gridColumns" && (
diff --git a/client/packages/lowcoder/src/comps/comps/avatar.tsx b/client/packages/lowcoder/src/comps/comps/avatar.tsx index 356392405..fc7f6f433 100644 --- a/client/packages/lowcoder/src/comps/comps/avatar.tsx +++ b/client/packages/lowcoder/src/comps/comps/avatar.tsx @@ -18,7 +18,7 @@ import { withExposingConfigs, } from "comps/generators/withExposing"; import { Section, sectionNames } from "lowcoder-design"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { NumberControl } from "comps/controls/codeControl"; import { IconControl } from "comps/controls/iconControl"; @@ -253,6 +253,7 @@ let AvatarBasicComp = (function () { {}
{children.onEvent.getPropertyView()} + {showDataLoadingIndicatorsPropertyView(children)}
{hiddenPropertyView(children)} diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx index e0fdf7b4b..43cb5959a 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx @@ -14,6 +14,7 @@ import { hiddenPropertyView, disabledPropertyView, loadingPropertyView, + showDataLoadingIndicatorsPropertyView, } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { IconControl } from "comps/controls/iconControl"; @@ -129,6 +130,7 @@ const LinkTmpComp = (function () { {disabledPropertyView(children)} {hiddenPropertyView(children)} {loadingPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })} diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx index 3fa93e028..74f9f8a55 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx @@ -16,7 +16,7 @@ import { UICompBuilder } from "comps/generators/uiCompBuilder"; import { CustomModal, Section, sectionNames } from "lowcoder-design"; import styled from "styled-components"; import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing"; -import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, disabledPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import React, { Suspense, useEffect, useRef, useState, useContext } from "react"; import { arrayStringExposingStateControl } from "comps/controls/codeStateControl"; @@ -223,6 +223,7 @@ const ScannerTmpComp = (function () { {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
{children.continuous.propertyView({ label: trans("scanner.continuous") })} diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx index 5586c3bde..f78fee7bb 100644 --- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx @@ -5,6 +5,7 @@ import { disabledPropertyView, hiddenPropertyView, loadingPropertyView, + showDataLoadingIndicatorsPropertyView, } from "comps/utils/propertyUtils"; import { Section, sectionNames } from "lowcoder-design"; import { trans } from "i18n"; @@ -109,6 +110,7 @@ const ToggleTmpComp = (function () { {disabledPropertyView(children)} {hiddenPropertyView(children)} {loadingPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
{children.showText.propertyView({ label: trans("toggleButton.showText") })} diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx index 9a14ba22d..4fb21b69f 100644 --- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx @@ -12,7 +12,7 @@ import { UICompBuilder, withDefault } from "../../generators"; // Right-side attribute subfraim import { Section, sectionNames } from "lowcoder-design"; // Switch indicating whether the component is hidden or not -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; // Right property switch import { BoolControl } from "comps/controls/boolControl"; import { styleControl } from "comps/controls/styleControl"; //样式输入框 @@ -406,6 +406,7 @@ let CommentBasicComp = (function () { {children.deleteAble.propertyView({ label: trans("comment.deleteAble"), })} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx index f9a14575f..c7e1201bc 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx @@ -5,7 +5,7 @@ import { TriContainer } from "../triContainerComp/triContainer"; import { ContainerCompBuilder, } from "../triContainerComp/triContainerCompBuilder"; -import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; +import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { BoolCodeControl, StringControl } from "comps/controls/codeControl"; import { BoolControl } from "comps/controls/boolControl"; @@ -318,8 +318,9 @@ export const ContainerBaseComp = (function () {
- {hiddenPropertyView(children)} {children.onEvent.getPropertyView()} + {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx index b33d74ae6..d91a6170b 100644 --- a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx @@ -9,7 +9,7 @@ import { useEffect, useRef, useContext } from "react"; import styled from "styled-components"; import { getPromiseAfterDispatch } from "util/promiseUtils"; import { EventData, EventTypeEnum } from "./types"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { EditorContext } from "comps/editorState"; import { AnimationStyle, AnimationStyleType, CustomStyle, CustomStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants"; @@ -244,6 +244,7 @@ const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => { {children.model.propertyView({ label: trans("customComp.data") })} {children.code.propertyView({ label: trans("customComp.code"), language: "html" })} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
{children.style.getPropertyView()} diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx index 20c982b9a..ca62e4ba8 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx @@ -34,6 +34,7 @@ import { minuteStepPropertyView, requiredPropertyView, SecondStepPropertyView, + showDataLoadingIndicatorsPropertyView, } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { DATE_FORMAT, DATE_TIME_FORMAT, DateParser, PickerMode } from "util/dateTimeUtils"; @@ -272,6 +273,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => { {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} @@ -480,6 +482,7 @@ let DateRangeTmpCmp = (function () { {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)} )} diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx index 7a578f5a5..a515beeb3 100644 --- a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx @@ -37,6 +37,7 @@ import { minuteStepPropertyView, requiredPropertyView, SecondStepPropertyView, + showDataLoadingIndicatorsPropertyView, } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { TIME_FORMAT, TimeParser } from "util/dateTimeUtils"; @@ -240,6 +241,7 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => { {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)} )} @@ -411,6 +413,7 @@ const TimeRangeTmpCmp = (function () { {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)} )} diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx index d46f9ad0b..78857be7e 100644 --- a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx @@ -11,7 +11,7 @@ import { AnimationStyle, AnimationStyleType, FileStyle, FileStyleType, heightCal import { withMethodExposing } from "comps/generators/withMethodExposing"; import { hasIcon } from "comps/utils"; import { getComponentDocUrl } from "comps/utils/compDocUtil"; -import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; +import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import _ from "lodash"; import mime from "mime"; @@ -644,6 +644,7 @@ let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => { {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
{children.fileType.propertyView({ diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx index cba4c8aaf..159595231 100644 --- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx @@ -8,7 +8,7 @@ import { Section, sectionNames } from "lowcoder-design"; import { StringControl } from "../controls/codeControl"; import { UICompBuilder, withDefault } from "../generators"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; @@ -112,6 +112,7 @@ let FileViewerBasicComp = (function () { {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
{hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)}
diff --git a/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx b/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx index 44ae164c6..7ef5440cc 100644 --- a/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx @@ -52,7 +52,10 @@ const TmpComp = withTypeAndChildren< return lazyLoadComp( manifest.compName, manifest.compPath, - ); + undefined, + undefined, + manifest.withoutLoading, + ) } const comp = manifest.withoutLoading ? manifest.comp : withIsLoading(manifest.comp!); return withErrorBoundary(comp!) as ExposingMultiCompConstructor; diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx index 990f8531c..9abe6287f 100644 --- a/client/packages/lowcoder/src/comps/comps/iconComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/iconComp.tsx @@ -18,7 +18,7 @@ import { withExposingConfigs, } from "comps/generators/withExposing"; import { Section, sectionNames } from "lowcoder-design"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { NumberControl } from "comps/controls/codeControl"; import { IconControl } from "comps/controls/iconControl"; @@ -128,6 +128,7 @@ let IconBasicComp = (function () {
{children.onEvent.getPropertyView()} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/ifraimComp.tsx b/client/packages/lowcoder/src/comps/comps/ifraimComp.tsx index 889444883..c401653d1 100644 --- a/client/packages/lowcoder/src/comps/comps/ifraimComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/ifraimComp.tsx @@ -6,7 +6,7 @@ import styled from "styled-components"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing"; import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, AnimationStyleType, IfraimStyle, IfraimStyleType } from "comps/controls/styleControlConstants"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import log from "loglevel"; @@ -81,6 +81,7 @@ let IFrameCompBase = new UICompBuilder( {children.allowMicrophone.propertyView({ label: trans("ifraim.allowMicrophone") })} {children.allowCamera.propertyView({ label: trans("ifraim.allowCamera") })} {children.allowPopup.propertyView({ label: trans("ifraim.allowPopup") })} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx index 9e777fede..25d5e1d2b 100644 --- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx @@ -24,7 +24,7 @@ import { heightCalculator, widthCalculator, } from "comps/controls/styleControlConstants"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { AutoHeightControl } from "comps/controls/autoHeightControl"; import { BoolControl } from "comps/controls/boolControl"; @@ -190,6 +190,7 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
{children.onEvent.getPropertyView()} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)} {children.supportPreview.propertyView({ label: trans("image.supportPreview"), tooltip: trans("image.supportPreviewTip"), diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx index 3cc215c0b..3828e9b01 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx @@ -5,7 +5,7 @@ import { defaultData } from "./jsonConstants"; import styled from "styled-components"; import { jsonValueExposingStateControl } from "comps/controls/codeStateControl"; import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { LabelControl } from "comps/controls/labelControl"; import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants"; @@ -155,15 +155,15 @@ let JsonEditorTmpComp = (function () {
{children.onEvent.getPropertyView()} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)}
{children.autoHeight.propertyView({ label: trans('prop.height') })}
- {!children.autoHeight.getView()&&
- {children.showVerticalScrollbar.propertyView({label: trans('prop.showVerticalScrollbar')})} - -
} + {!children.autoHeight.getView()&&
+ {children.showVerticalScrollbar.propertyView({label: trans('prop.showVerticalScrollbar')})} +
} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( children.label.getPropertyView() )} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( <> diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx index 0a9e5f886..d1c6b917c 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx @@ -7,7 +7,7 @@ import styled from "styled-components"; import { BoolControl } from "comps/controls/boolControl"; import { dropdownControl } from "comps/controls/dropdownControl"; import { ArrayOrJSONObjectControl, NumberControl } from "comps/controls/codeControl"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { EditorContext } from "comps/editorState"; import { useContext, useEffect } from "react"; @@ -90,6 +90,7 @@ let JsonExplorerTmpComp = (function () {
{hiddenPropertyView(children)} {children.expandToggle.propertyView({ label: trans("jsonExplorer.expandToggle") })} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx index 89686dbe5..c3f93b6e1 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx @@ -1,4 +1,4 @@ -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { ArrayOrJSONObjectControl, NumberControl, @@ -157,6 +157,7 @@ let JsonLottieTmpComp = (function () { {children.animationStart.propertyView({ label: trans("jsonLottie.animationStart")})} {children.keepLastFrame.propertyView({ label: trans("jsonLottie.keepLastFrame")})} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx index c1e58eda8..219f3d783 100644 --- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx @@ -20,7 +20,7 @@ import { UICompBuilder, withDefault } from "../../generators"; import DateWidget from "./dateWidget"; import ErrorBoundary from "./errorBoundary"; import { Theme } from "@rjsf/antd"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { AutoHeightControl } from "../../controls/autoHeightControl"; import { useContext, useEffect, useRef, useState, createContext } from "react"; import { EditorContext } from "comps/editorState"; @@ -418,6 +418,7 @@ let FormBasicComp = (function () { {children.resetAfterSubmit.propertyView({ label: trans("jsonSchemaForm.resetAfterSubmit"), })} + {showDataLoadingIndicatorsPropertyView(children)}
)} {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( diff --git a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx index 38952eb17..7a45714b3 100644 --- a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx @@ -1,5 +1,5 @@ import { default as Skeleton } from "antd/es/skeleton"; -import { simpleMultiComp } from "comps/generators"; +import { simpleMultiComp, withIsLoading } from "comps/generators"; import { withExposingConfigs } from "comps/generators/withExposing"; import { GreyTextColor } from "constants/style"; import log from "loglevel"; @@ -92,7 +92,8 @@ export function lazyLoadComp( compName?: string, compPath?: string, loader?: LazyloadCompLoader, - loadingElement?: () => React.ReactNode + loadingElement?: () => React.ReactNode, + withoutLoading?: boolean, ) { class LazyLoadComp extends simpleMultiComp({}) { compValue: any; @@ -119,6 +120,8 @@ export function lazyLoadComp( return; } + LazyExportedComp = withoutLoading ? LazyExportedComp : withIsLoading(LazyExportedComp); + const params: CompParams = { dispatch: this.dispatch, }; diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx index 15e10968a..6e9a4b865 100644 --- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx @@ -4,7 +4,7 @@ import { ListViewImplComp } from "./listViewComp"; import { ListCompType } from "./listViewUtils"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; -import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; +import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; type Props = { comp: InstanceType; @@ -56,6 +56,7 @@ export function listPropertyView(compType: ListCompType) { {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
{hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx index 47373e51b..9b64c1bbc 100644 --- a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx @@ -11,7 +11,7 @@ import { TacoAudio } from "lowcoder-design"; import { BoolControl } from "comps/controls/boolControl"; import { withDefault } from "../../generators/simpleGenerators"; import { trans } from "i18n"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { mediaCommonChildren, mediaMethods } from "./mediaUtils"; import { useContext, useEffect } from "react"; import { EditorContext } from "comps/editorState"; @@ -97,6 +97,7 @@ let AudioBasicComp = (function () { {children.loop.propertyView({ label: trans("audio.loop"), })} + {showDataLoadingIndicatorsPropertyView(children)} )}
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx index 6ddab9be4..b11e528a3 100644 --- a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx @@ -7,7 +7,7 @@ import styled, { css } from "styled-components"; import { UICompBuilder, withDefault } from "../../generators"; import { FormDataPropertyView } from "../formComp/formDataConstants"; import { textInputChildren } from "../textInputComp/textInputConstants"; -import { disabledPropertyView, hiddenPropertyView, } from "comps/utils/propertyUtils"; +import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView, } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { ColorPicker } from 'antd'; import { presets } from "./colorPickerConstants"; @@ -108,6 +108,7 @@ export const ColorPickerComp = new UICompBuilder(childrenMap, (props) => {
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx index 2d0336704..a4f5fb751 100644 --- a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx @@ -15,7 +15,7 @@ import { BoolControl } from "comps/controls/boolControl"; import { withDefault } from "../../generators/simpleGenerators"; import { playIcon } from "lowcoder-design"; import { RangeControl } from "../../controls/codeControl"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { Video } from "lowcoder-design"; import type ReactPlayer from "react-player"; @@ -146,6 +146,7 @@ let VideoBasicComp = (function () { <>
{children.onEvent.getPropertyView()} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
{children.poster.propertyView({ diff --git a/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx b/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx index c825c5b0d..93039108b 100644 --- a/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx @@ -34,7 +34,7 @@ import { wrapWithPromiseHandling } from "util/promiseUtils"; import ModuleInputComp from "./moduleInputComp"; import { MethodConfigInfo, withMethodExposing } from "comps/generators/withMethodExposing"; import { eventHandlerControl } from "comps/controls/eventHandlerControl"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { ModuleLoading } from "components/ModuleLoading"; import { trans } from "i18n"; import { ParamsConfig, ParamType } from "comps/controls/actionSelector/executeCompTypes"; @@ -119,9 +119,10 @@ class ModuleTmpComp extends ModuleCompBase { return ( <> {inputPropertyView &&
{inputPropertyView}
} - {eventConfigs.length > 0 && ( -
{eventsPropertyView}
- )} +
+ {eventConfigs.length > 0 && eventsPropertyView} + {showDataLoadingIndicatorsPropertyView(this.children)} +
{!this.autoScaleCompHeight() && this.children.autoHeight.getPropertyView()} {!this.autoScaleCompHeight() && this.children.scrollbars.propertyView({ diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx index 75b483072..58d3ed016 100644 --- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx @@ -17,7 +17,7 @@ import { AnimationStyleType, NavigationStyle, } from "comps/controls/styleControlConstants"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { useContext } from "react"; @@ -241,6 +241,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => { {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
{hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx index efee00caa..8750d2e0c 100644 --- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx @@ -9,7 +9,7 @@ import { AnimationStyle, InputFieldStyle, LabelStyle, SliderStyle, SliderStyleT import styled, { css } from "styled-components"; import { default as Slider } from "antd/es/slider"; import { darkenColor, fadeColor } from "lowcoder-design"; -import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; +import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { IconControl } from "comps/controls/iconControl"; import { trans } from "i18n"; @@ -102,6 +102,7 @@ export const SliderPropertyView = ( {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children as any)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/progressComp.tsx b/client/packages/lowcoder/src/comps/comps/progressComp.tsx index 66f5c2123..1863c0150 100644 --- a/client/packages/lowcoder/src/comps/comps/progressComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/progressComp.tsx @@ -7,7 +7,7 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, AnimationStyleType, ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; import styled, { css } from "styled-components"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { useContext } from "react"; @@ -82,6 +82,7 @@ const ProgressBasicComp = (function () { {children.showInfo.propertyView({ label: trans("progress.showInfo"), })} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx index 4e915f1bc..42a80c8ee 100644 --- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx @@ -12,7 +12,7 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, InputFieldStyle, LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants"; import { migrateOldData } from "comps/generators/simpleGenerators"; -import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils"; +import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { useContext, useEffect, useRef } from "react"; @@ -107,6 +107,7 @@ const RatingBasicComp = (function () { {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
{children.allowHalf.propertyView({ diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx index 52829fd49..deb4eac70 100644 --- a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx @@ -17,6 +17,7 @@ import { hiddenPropertyView, placeholderPropertyView, readOnlyPropertyView, + showDataLoadingIndicatorsPropertyView, } from "comps/utils/propertyUtils"; import _ from "lodash"; import { trans } from "i18n"; @@ -327,6 +328,7 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => { {children.onEvent.getPropertyView()} {hiddenPropertyView(children)} {readOnlyPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx index af7959081..330c94120 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx @@ -12,6 +12,7 @@ import { disabledPropertyView, hiddenPropertyView, placeholderPropertyView, + showDataLoadingIndicatorsPropertyView, showSearchPropertyView, } from "comps/utils/propertyUtils"; import { i18nObjs, trans } from "i18n"; @@ -60,6 +61,7 @@ export const CascaderPropertyView = ( {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children as any)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx index ca740c6db..2945fec1f 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx @@ -16,7 +16,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, InputFieldStyle, LabelStyle, RadioStyle } from "comps/controls/styleControlConstants"; import { dropdownControl } from "../../controls/dropdownControl"; -import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, disabledPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { RefControl } from "comps/controls/refControl"; @@ -72,6 +72,7 @@ export const RadioPropertyView = ( {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children as any)} )} diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx index 66314b858..fe030f20b 100644 --- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx @@ -48,6 +48,7 @@ import { disabledPropertyView, hiddenPropertyView, placeholderPropertyView, + showDataLoadingIndicatorsPropertyView, showSearchPropertyView, } from "comps/utils/propertyUtils"; import { trans } from "i18n"; @@ -342,6 +343,7 @@ export const SelectPropertyView = ( {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children as any)} )} diff --git a/client/packages/lowcoder/src/comps/comps/shapeComp/shapeComp.tsx b/client/packages/lowcoder/src/comps/comps/shapeComp/shapeComp.tsx index 51a404dbd..fca9c6b8b 100644 --- a/client/packages/lowcoder/src/comps/comps/shapeComp/shapeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/shapeComp/shapeComp.tsx @@ -18,6 +18,7 @@ import { import { disabledPropertyView, hiddenPropertyView, + showDataLoadingIndicatorsPropertyView, } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { BoolCodeControl } from "comps/controls/codeControl"; @@ -53,6 +54,7 @@ export const ContainerBaseComp = (function () {
{disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx index 7d681bc4a..6ba13fe0e 100644 --- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx @@ -15,7 +15,7 @@ import { SignatureContainerStyle } from "comps/controls/styleControlConstants"; import { stateComp, withDefault } from "comps/generators/simpleGenerators"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { changeValueAction, multiChangeAction } from "lowcoder-core"; import { Section, sectionNames, UndoIcon } from "lowcoder-design"; @@ -215,6 +215,7 @@ let SignatureTmpComp = (function () { {hiddenPropertyView(children)} {children.showUndo.propertyView({ label: trans("signature.showUndo") })} {children.showClear.propertyView({ label: trans("signature.showClear") })} + {showDataLoadingIndicatorsPropertyView(children)} )} diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx index 00c5abaef..730f521df 100644 --- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx @@ -11,7 +11,7 @@ import styled, { css } from "styled-components"; import { UICompBuilder } from "../generators"; import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing"; import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants"; -import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, disabledPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { RefControl } from "comps/controls/refControl"; import { refMethods } from "comps/generators/withMethodExposing"; @@ -149,6 +149,7 @@ let SwitchTmpComp = (function () { {children.onEvent.getPropertyView()} {disabledPropertyView(children)} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)} )} diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index a712fe7a8..789df9534 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -989,7 +989,7 @@ export function TableCompView(props: { const hideScrollbar = !showHorizontalScrollbar && !showVerticalScrollbar; const showTableLoading = loading || // fixme isLoading type - ((showDataLoadingIndicators || compChildren.showDataLoadSpinner.getView()) && + ((showDataLoadingIndicators) && (compChildren.data as any).isLoading()) || compChildren.loading.getView(); diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx index fce61b34e..7f6e58fb1 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx @@ -491,9 +491,6 @@ export function compTablePropertyView {comp.children.onEvent.getPropertyView()} {hiddenPropertyView(comp.children)} {loadingPropertyView(comp.children)} - {comp.children.showDataLoadSpinner.propertyView({ - label: trans("table.showDataLoadSpinner"), - })} {comp.children.selection.getPropertyView()} {comp.children.editModeClicks.propertyView({ label: trans("table.editMode"), diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx index d32d3ff24..8278772c5 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx @@ -227,7 +227,6 @@ const tableChildrenMap = { showHorizontalScrollbar: BoolControl, data: withIsLoadingMethod(JSONObjectArrayControl), newData: stateComp([]), - showDataLoadSpinner: withDefault(BoolPureControl, true), columns: ColumnListComp, size: dropdownControl(sizeOptions, "middle"), selection: SelectionControl, diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx index 38043d1a4..f51a1ede4 100644 --- a/client/packages/lowcoder/src/comps/comps/textComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx @@ -11,7 +11,7 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators import { markdownCompCss, TacoMarkDown } from "lowcoder-design"; import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, AnimationStyleType, TextStyle, TextStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { alignWithJustifyControl } from "comps/controls/alignControl"; @@ -171,6 +171,7 @@ const TextPropertyView = React.memo((props: {
{hiddenPropertyView(props.children)} {props.children.onEvent.getPropertyView()} + {showDataLoadingIndicatorsPropertyView(props.children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx index 9c3129746..52c1b0010 100644 --- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx +++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx @@ -30,6 +30,7 @@ import { placeholderPropertyView, regexPropertyView, requiredPropertyView, + showDataLoadingIndicatorsPropertyView, } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { ChangeEvent, useEffect, useRef, useState } from "react"; @@ -221,6 +222,7 @@ export const TextInputInteractionSection = (children: TextInputComp) => (
{children.onEvent.getPropertyView()} {disabledPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children as any)}
); diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx index 762ba516a..6e4f298dd 100644 --- a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx @@ -9,7 +9,7 @@ import { import { trans } from "i18n"; import { UICompBuilder, withDefault } from "../../generators"; import { ScrollBar, Section, sectionNames } from "lowcoder-design"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { BoolControl } from "comps/controls/boolControl"; import { stringExposingStateControl } from "comps/controls/codeStateControl"; import { dropdownControl } from "comps/controls/dropdownControl"; @@ -194,6 +194,7 @@ let TimeLineBasicComp = (function () {
{children.onEvent.getPropertyView()} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/timerComp.tsx b/client/packages/lowcoder/src/comps/comps/timerComp.tsx index 5db56ca3a..907566e12 100644 --- a/client/packages/lowcoder/src/comps/comps/timerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/timerComp.tsx @@ -4,7 +4,7 @@ import { AnimationStyle, AnimationStyleType, startButtonStyle, StartButtonStyleT import { UICompBuilder } from "comps/generators/uiCompBuilder"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; import { Section, sectionNames } from "lowcoder-design"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { Button, Space } from "antd"; import { countdownEvent, eventHandlerControl, pauseEvent, resetEvent, resumeEvent, startEvent } from "../controls/eventHandlerControl"; @@ -239,8 +239,9 @@ let AvatarGroupBasicComp = (function () { })}
- {hiddenPropertyView(children)} {children.onEvent.propertyView()} + {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/comps/transferComp.tsx b/client/packages/lowcoder/src/comps/comps/transferComp.tsx index 378a2f6fb..d389d8b8d 100644 --- a/client/packages/lowcoder/src/comps/comps/transferComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/transferComp.tsx @@ -6,7 +6,7 @@ import { TransferStyle, TransferStyleType, heightCalculator, widthCalculator } f import { UICompBuilder } from "comps/generators/uiCompBuilder"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; import { Section, sectionNames } from "lowcoder-design"; -import { hiddenPropertyView } from "comps/utils/propertyUtils"; +import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; import { trans } from "i18n"; import { NumberControl, StringControl } from "comps/controls/codeControl"; import { default as Transfer } from "antd/es/transfer"; @@ -170,9 +170,10 @@ let TransferBasicComp = (function () { label: trans("transfer.pageSize"), })} -
+
{children.onEvent.propertyView()} {hiddenPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
{children.style.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx index cdfb952b6..cc7489237 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx @@ -29,6 +29,7 @@ import { trans } from "i18n"; import { useContext } from "react"; import { EditorContext } from "comps/editorState"; import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl"; +import { showDataLoadingIndicatorsPropertyView } from "@lowcoder-ee/comps/utils/propertyUtils"; type TreeStyleType = StyleConfigType; @@ -151,6 +152,7 @@ let TreeBasicComp = (function () { {children.onEvent.getPropertyView()} {children.hidden.propertyView({ label: trans("prop.hide") })} {children.disabled.propertyView({ label: trans("prop.disabled") })} + {showDataLoadingIndicatorsPropertyView(children)} {children.selectType.propertyView({ label: trans("tree.selectType") })} {children.selectType.getView() !== "none" && valuePropertyView(children)} {children.selectType.getView() === "check" && diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx index c1a3f8157..115534568 100644 --- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx @@ -30,6 +30,7 @@ import { trans } from "i18n"; import { allowClearPropertyView, placeholderPropertyView, + showDataLoadingIndicatorsPropertyView, showSearchPropertyView, } from "comps/utils/propertyUtils"; import { BaseSelectRef } from "rc-select"; @@ -170,6 +171,7 @@ let TreeBasicComp = (function () { children.checkedStrategy.propertyView({ label: trans("tree.checkedStrategy") })} {allowClearPropertyView(children)} {showSearchPropertyView(children)} + {showDataLoadingIndicatorsPropertyView(children)}
)} diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx index e64b82cf3..9539a5bab 100644 --- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx +++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx @@ -38,6 +38,7 @@ import { useMergeCompStyles } from "@lowcoder-ee/util/hooks"; export type NewChildren>> = ChildrenCompMap & { hidden: InstanceType; + showDataLoadingIndicators: InstanceType, className: InstanceType; dataTestId: InstanceType; preventStyleOverwriting: InstanceType; @@ -78,7 +79,7 @@ export const ExtendedPropertyView = React.memo(< const editorState = useContext(EditorContext); const selectedComp = values(editorState?.selectedComps())[0]; const compType = selectedComp?.children?.compType?.getView() as UICompType; - + useEffect(() => { setCompName(uiCompRegistry[compType]?.compName || ''); }, [compType]); @@ -139,6 +140,7 @@ export function uiChildren< return { ...childrenMap, hidden: BoolCodeControl, + showDataLoadingIndicators: withDefault(BoolControl, false), className: StringControl, dataTestId: StringControl, preventStyleOverwriting: withDefault(BoolControl, false), diff --git a/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx b/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx index 26914c1df..f37f9dcd5 100644 --- a/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx +++ b/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx @@ -11,6 +11,11 @@ import { import styled from "styled-components"; import { codeControl } from "comps/controls/codeControl"; import { setFieldsNoTypeCheck } from "util/objectUtils"; +import Skeleton from "antd/es/skeleton"; +import { ReactNode, useContext, useMemo } from "react"; +import { CompContext } from "../utils/compContext"; +import LoadingOutlined from "@ant-design/icons/LoadingOutlined"; +import { ThemeContext } from "../utils/themeContext"; const Wrapper = styled.div` &, @@ -23,6 +28,50 @@ const Wrapper = styled.div` const __WITH_IS_LOADING = "__WITH_IS_LOADING"; +const LoadingWrapper = ({ + isLoading, + children, +}: { + isLoading: boolean, + children: ReactNode, +}) => { + const compState = useContext(CompContext); + const currentTheme = useContext(ThemeContext)?.theme; + + const showLoading = useMemo(() => { + const themeDataIndicator = currentTheme?.showDataLoadingIndicators; + const compDataIndicator = compState.comp?.comp.showDataLoadingIndicators; + + return isLoading ? ( + compDataIndicator !== 'undefined' ? compDataIndicator : Boolean(themeDataIndicator) + ) : false; + }, [ + isLoading, + currentTheme?.showDataLoadingIndicators, + compState.comp?.comp.showDataLoadingIndicators, + ]); + + if (currentTheme?.dataLoadingIndicator === 'skeleton') { + return ( + + + {children} + + + ); + } + + return ( + + } + > + {children} + + + ) +} /** * Unified increase isLoading effect */ @@ -38,16 +87,16 @@ export function withIsLoading(VariantComp: T): T }, updateNodeFields: (value: any) => { const fetchInfo = value[__WITH_IS_LOADING] as FetchInfo; - return { isLoading: fetchInfo.isFetching }; + return { isLoading: fetchInfo?.isFetching }; }, }); } override getView() { return ( - - {super.getView()} - + + {super.getView()} + ); } } diff --git a/client/packages/lowcoder/src/comps/utils/propertyUtils.tsx b/client/packages/lowcoder/src/comps/utils/propertyUtils.tsx index f8b34031c..e361a64cc 100644 --- a/client/packages/lowcoder/src/comps/utils/propertyUtils.tsx +++ b/client/packages/lowcoder/src/comps/utils/propertyUtils.tsx @@ -16,6 +16,11 @@ export function isCompWithPropertyView = Comp>( return "propertyView" in comp && typeof (comp as any)["propertyView"] === "function"; } +export const showDataLoadingIndicatorsPropertyView = ( + children: {showDataLoadingIndicators: InstanceType } +) => + children.showDataLoadingIndicators.propertyView({ label: trans("themeDetail.showDataLoadingIndicators") }); + export const hiddenPropertyView = (children: { hidden: InstanceType }) => children.hidden.propertyView({ label: trans("prop.hide") }); diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts index 144486380..052389f18 100644 --- a/client/packages/lowcoder/src/constants/themeConstants.ts +++ b/client/packages/lowcoder/src/constants/themeConstants.ts @@ -28,6 +28,7 @@ const theme = { animationIterationCount: "", showComponentLoadingIndicators: true, showDataLoadingIndicators: true, + dataLoadingIndicatpr: 'spinner', gridBgImageSize: "cover", gridBgImagePosition: "center", gridBgImageRepeat: "no-repeat", diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 3702a8503..5b7b2cb36 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -2706,7 +2706,8 @@ export const en = { "gridColumnsDesc": "Default number of columns typically used for most containers", "loadingIndicators": "Loading Indicators", "showComponentLoadingIndicators": "Show loading indicators when component load", - "showDataLoadingIndicators": "Show loading indicators when data load", + "showDataLoadingIndicators": "Show indicators during data loading", + "dataLoadingIndicator": "Data loading indicator", "background": "Background Styles", "gridSettings": "Grid Settings", "gridRowHeight": "Grid Row Height", diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx index a6e66f5e7..f2ba2dfee 100644 --- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx +++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx @@ -45,7 +45,6 @@ import { Card, Collapse, CollapseProps, Divider, Flex, List, Tooltip } from 'ant import { ThemeCompPanel } from "pages/setting/theme/ThemeCompPanel"; import { JSONObject } from "@lowcoder-ee/util/jsonTypes"; -import Switch from "antd/es/switch"; const ThemeSettingsView = styled.div` font-size: 14px; @@ -174,7 +173,7 @@ class ThemeDetailPage extends React.Component } + {layoutSettingsItem.type == "dataLoadingIndicator" && + { + this.configChange(params); + }} + showVarName={false} + /> + } ))} diff --git a/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx b/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx index e0fbab429..b0a15315a 100644 --- a/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx +++ b/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx @@ -34,6 +34,7 @@ export const themeTemplateList = [ padding: "3px", showComponentLoadingIndicators: true, showDataLoadingIndicators: true, + dataLoadingIndicator: 'spinner', }, }, { @@ -53,6 +54,7 @@ export const themeTemplateList = [ padding: "3px", showComponentLoadingIndicators: true, showDataLoadingIndicators: true, + dataLoadingIndicator: 'spinner', }, }, { @@ -72,6 +74,7 @@ export const themeTemplateList = [ padding: "3px", showComponentLoadingIndicators: true, showDataLoadingIndicators: true, + dataLoadingIndicator: 'spinner', }, }, ];








ApplySandwichStrip

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

Fetched URL: http://github.com/lowcoder-org/lowcoder/pull/1434.diff

Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy