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

Commit84393c8

Browse files
authored
Merge pull request#1434 from lowcoder-org/feat/loading-indicators
Feature - Data Loading Indicators
2 parents7553286 +54380cb commit84393c8

File tree

56 files changed

+221
-58
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+221
-58
lines changed

‎client/packages/lowcoder/src/api/commonSettingApi.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ export interface ThemeDetail {
7979
components?:Record<string,JSONObject>;
8080
showComponentLoadingIndicators?:boolean;
8181
showDataLoadingIndicators?:boolean;
82+
dataLoadingIndicator?:string;
8283
}
8384

8485
exportfunctiongetThemeDetailName(key:keyofThemeDetail){

‎client/packages/lowcoder/src/components/ModuleLoading.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
importLoadingOutlinedfrom"@ant-design/icons/LoadingOutlined";
12
import{defaultasSpin}from"antd/es/spin";
23
import{GreyTextColor}from"constants/style";
34
importstyledfrom"styled-components";
@@ -14,7 +15,7 @@ export const LoadingPlaceholder = styled.div`
1415
exportfunctionModuleLoading(){
1516
return(
1617
<LoadingPlaceholder>
17-
<Spin/>
18+
<Spinindicator={<LoadingOutlinedstyle={{fontSize:15}}spin/>}/>
1819
</LoadingPlaceholder>
1920
);
2021
}

‎client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { ConfigItem, Radius, Margin, Padding, GridColumns, BorderWidth, BorderSt
44
import{isValidColor,isValidGradient,toHex}from"components/colorSelect/colorUtils";
55
import{ColorSelect}from"components/colorSelect";
66
import{TacoInput}from"components/tacoInput";
7-
import{Slider,Switch}from"antd";
7+
import{Segmented,Slider,Switch}from"antd";
88
import{
99
ExpandIcon,
1010
CompressIcon,
@@ -28,6 +28,7 @@ export type configChangeParams = {
2828
components?:Record<string,object>,
2929
showComponentLoadingIndicators?:boolean;
3030
showDataLoadingIndicators?:boolean;
31+
dataLoadingIndicator?:string;
3132
gridColumns?:string;
3233
gridRowHeight?:string;
3334
gridRowCount?:number;
@@ -58,6 +59,7 @@ type ColorConfigProps = {
5859
padding?:string;
5960
showComponentLoadingIndicators?:boolean;
6061
showDataLoadingIndicators?:boolean;
62+
dataLoadingIndicator?:string;
6163
gridColumns?:string;
6264
gridRowHeight?:string;
6365
gridRowCount?:number;
@@ -87,6 +89,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
8789
fontFamily:defaultFontFamily,
8890
showComponentLoadingIndicators:defaultShowComponentLoaders,
8991
showDataLoadingIndicators:defaultShowDataLoaders,
92+
dataLoadingIndicator:defaultDataLoadingIndicator,
9093
gridColumns:defaultGridColumns,
9194
gridRowHeight:defaultGridRowHeight,
9295
gridRowCount:defaultGridRowCount,
@@ -110,6 +113,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
110113
const[fontFamily,setFontFamily]=useState(defaultFontFamily);
111114
const[showComponentLoaders,setComponentLoaders]=useState(defaultShowComponentLoaders);
112115
const[showDataLoaders,setDataLoaders]=useState(defaultShowDataLoaders);
116+
const[dataLoadingIndicator,setDataLoadingIndicator]=useState(defaultDataLoadingIndicator);
113117
const[gridColumns,setGridColumns]=useState(defaultGridColumns);
114118
const[gridRowHeight,setGridRowHeight]=useState(defaultGridRowHeight);
115119
const[gridRowCount,setGridRowCount]=useState(defaultGridRowCount);
@@ -346,6 +350,10 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
346350
setDataLoaders(defaultShowDataLoaders);
347351
},[defaultShowDataLoaders]);
348352

353+
useEffect(()=>{
354+
setDataLoadingIndicator(defaultDataLoadingIndicator);
355+
},[defaultDataLoadingIndicator]);
356+
349357
useEffect(()=>{
350358
setGridPaddingX(defaultGridPaddingX);
351359
},[defaultGridPaddingX]);
@@ -375,6 +383,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
375383
themeSettingKey!=="fontFamily"&&
376384
themeSettingKey!=="showComponentLoadingIndicators"&&
377385
themeSettingKey!=="showDataLoadingIndicators"&&
386+
themeSettingKey!=="dataLoadingIndicator"&&
378387
themeSettingKey!=="gridColumns"&&
379388
themeSettingKey!=="gridRowHeight"&&
380389
themeSettingKey!=="gridRowCount"&&
@@ -551,6 +560,25 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
551560
</div>
552561
)}
553562

563+
{themeSettingKey==="dataLoadingIndicator"&&(
564+
<divstyle={{
565+
marginTop:'6px',
566+
}}>
567+
<Segmented
568+
block
569+
value={dataLoadingIndicator}
570+
options={[
571+
{value:'spinner',label:'Spinner'},
572+
{value:'skeleton',label:'Skeleton'},
573+
]}
574+
onChange={(value)=>{
575+
setDataLoadingIndicator(value)
576+
configChange({ themeSettingKey,dataLoadingIndicator:value});
577+
}}
578+
/>
579+
</div>
580+
)}
581+
554582
{themeSettingKey==="gridColumns"&&(
555583
<divclassName="config-input">
556584
<GridColumns$gridColumns={defaultGridColumns||"24"}>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
withExposingConfigs,
1919
}from"comps/generators/withExposing";
2020
import{Section,sectionNames}from"lowcoder-design";
21-
import{hiddenPropertyView}from"comps/utils/propertyUtils";
21+
import{hiddenPropertyView,showDataLoadingIndicatorsPropertyView}from"comps/utils/propertyUtils";
2222
import{trans}from"i18n";
2323
import{NumberControl}from"comps/controls/codeControl";
2424
import{IconControl}from"comps/controls/iconControl";
@@ -253,6 +253,7 @@ let AvatarBasicComp = (function () {
253253
{<BadgeBasicSection{...children}/>}
254254
<Sectionname={sectionNames.interaction}>
255255
{children.onEvent.getPropertyView()}
256+
{showDataLoadingIndicatorsPropertyView(children)}
256257
</Section>
257258
<Sectionname={sectionNames.layout}>
258259
{hiddenPropertyView(children)}

‎client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
hiddenPropertyView,
1515
disabledPropertyView,
1616
loadingPropertyView,
17+
showDataLoadingIndicatorsPropertyView,
1718
}from"comps/utils/propertyUtils";
1819
import{trans}from"i18n";
1920
import{IconControl}from"comps/controls/iconControl";
@@ -129,6 +130,7 @@ const LinkTmpComp = (function () {
129130
{disabledPropertyView(children)}
130131
{hiddenPropertyView(children)}
131132
{loadingPropertyView(children)}
133+
{showDataLoadingIndicatorsPropertyView(children)}
132134
</Section>
133135
<Sectionname={sectionNames.advanced}>
134136
{children.prefixIcon.propertyView({label:trans("button.prefixIcon")})}

‎client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { UICompBuilder } from "comps/generators/uiCompBuilder";
1616
import{CustomModal,Section,sectionNames}from"lowcoder-design";
1717
importstyledfrom"styled-components";
1818
import{CommonNameConfig,NameConfig,withExposingConfigs}from"../../generators/withExposing";
19-
import{hiddenPropertyView,disabledPropertyView}from"comps/utils/propertyUtils";
19+
import{hiddenPropertyView,disabledPropertyView,showDataLoadingIndicatorsPropertyView}from"comps/utils/propertyUtils";
2020
import{trans}from"i18n";
2121
importReact,{Suspense,useEffect,useRef,useState,useContext}from"react";
2222
import{arrayStringExposingStateControl}from"comps/controls/codeStateControl";
@@ -223,6 +223,7 @@ const ScannerTmpComp = (function () {
223223
{children.onEvent.getPropertyView()}
224224
{disabledPropertyView(children)}
225225
{hiddenPropertyView(children)}
226+
{showDataLoadingIndicatorsPropertyView(children)}
226227
</Section>
227228
<Sectionname={sectionNames.advanced}>
228229
{children.continuous.propertyView({label:trans("scanner.continuous")})}

‎client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
disabledPropertyView,
66
hiddenPropertyView,
77
loadingPropertyView,
8+
showDataLoadingIndicatorsPropertyView,
89
}from"comps/utils/propertyUtils";
910
import{Section,sectionNames}from"lowcoder-design";
1011
import{trans}from"i18n";
@@ -109,6 +110,7 @@ const ToggleTmpComp = (function () {
109110
{disabledPropertyView(children)}
110111
{hiddenPropertyView(children)}
111112
{loadingPropertyView(children)}
113+
{showDataLoadingIndicatorsPropertyView(children)}
112114
</Section>
113115
<Sectionname={sectionNames.advanced}>
114116
{children.showText.propertyView({label:trans("toggleButton.showText")})}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { UICompBuilder, withDefault } from "../../generators";
1212
// Right-side attribute subframe
1313
import{Section,sectionNames}from"lowcoder-design";
1414
// Switch indicating whether the component is hidden or not
15-
import{hiddenPropertyView}from"comps/utils/propertyUtils";
15+
import{hiddenPropertyView,showDataLoadingIndicatorsPropertyView}from"comps/utils/propertyUtils";
1616
// Right property switch
1717
import{BoolControl}from"comps/controls/boolControl";
1818
import{styleControl}from"comps/controls/styleControl";//样式输入框
@@ -406,6 +406,7 @@ let CommentBasicComp = (function () {
406406
{children.deleteAble.propertyView({
407407
label:trans("comment.deleteAble"),
408408
})}
409+
{showDataLoadingIndicatorsPropertyView(children)}
409410
</Section>
410411
</>
411412
)}

‎client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { TriContainer } from "../triContainerComp/triContainer";
55
import{
66
ContainerCompBuilder,
77
}from"../triContainerComp/triContainerCompBuilder";
8-
import{disabledPropertyView,hiddenPropertyView}from"comps/utils/propertyUtils";
8+
import{disabledPropertyView,hiddenPropertyView,showDataLoadingIndicatorsPropertyView}from"comps/utils/propertyUtils";
99
import{trans}from"i18n";
1010
import{BoolCodeControl,StringControl}from"comps/controls/codeControl";
1111
import{BoolControl}from"comps/controls/boolControl";
@@ -318,8 +318,9 @@ export const ContainerBaseComp = (function () {
318318

319319
</Section>
320320
<Sectionname={sectionNames.interaction}>
321-
{hiddenPropertyView(children)}
322321
{children.onEvent.getPropertyView()}
322+
{hiddenPropertyView(children)}
323+
{showDataLoadingIndicatorsPropertyView(children)}
323324
</Section>
324325
</>
325326
)}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { useEffect, useRef, useContext } from "react";
99
importstyledfrom"styled-components";
1010
import{getPromiseAfterDispatch}from"util/promiseUtils";
1111
import{EventData,EventTypeEnum}from"./types";
12-
import{hiddenPropertyView}from"comps/utils/propertyUtils";
12+
import{hiddenPropertyView,showDataLoadingIndicatorsPropertyView}from"comps/utils/propertyUtils";
1313
import{trans}from"i18n";
1414
import{EditorContext}from"comps/editorState";
1515
import{AnimationStyle,AnimationStyleType,CustomStyle,CustomStyleType}from"@lowcoder-ee/comps/controls/styleControlConstants";
@@ -244,6 +244,7 @@ const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
244244
{children.model.propertyView({label:trans("customComp.data")})}
245245
{children.code.propertyView({label:trans("customComp.code"),language:"html"})}
246246
{hiddenPropertyView(children)}
247+
{showDataLoadingIndicatorsPropertyView(children)}
247248
</Section>
248249
<Sectionname={sectionNames.style}>
249250
{children.style.getPropertyView()}

0 commit comments

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