Skip to content

Commit bef4782

Browse files
raheeliftikhar5raheeliftikhar5
committed
moved show data/component loader option in theme
1 parent dd5edc2 commit bef4782

File tree

9 files changed

+135
-41
lines changed

9 files changed

+135
-41
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@ export interface ThemeDetail {
6666
boxShadowColor?: string;
6767
animationIterationCount?: string;
6868
components?: Record<string, JSONObject>;
69+
showComponentLoadingIndicators?: boolean;
70+
showDataLoadingIndicators?: boolean;
6971
}
7072

7173
export function getThemeDetailName(key: keyof ThemeDetail) {

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

Lines changed: 66 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { ConfigItem, Radius, Margin, Padding, GridColumns, BorderWidth, BorderSt
44
import { isValidColor, toHex } from "components/colorSelect/colorUtils";
55
import { ColorSelect } from "components/colorSelect";
66
import { TacoInput } from "components/tacoInput";
7-
import { Slider } from "antd";
7+
import { Slider, Switch } from "antd";
88
import {
99
ExpandIcon,
1010
CompressIcon,
@@ -27,6 +27,8 @@ export type configChangeParams = {
2727
borderWidth?: string;
2828
fontFamily?: string;
2929
components?: Record<string, object>,
30+
showComponentLoadingIndicators?: boolean;
31+
showDataLoadingIndicators?: boolean;
3032
};
3133

3234
type ColorConfigProps = {
@@ -46,6 +48,8 @@ type ColorConfigProps = {
4648
margin?: string;
4749
padding?: string;
4850
gridColumns?: string; // Added By Aqib Mirza
51+
showComponentLoadingIndicators?: boolean;
52+
showDataLoadingIndicators?: boolean;
4953
};
5054

5155
export default function ThemeSettingsSelector(props: ColorConfigProps) {
@@ -63,7 +67,9 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
6367
borderStyle: defaultBorderStyle,
6468
borderWidth: defaultBorderWidth,
6569
borderColor: defaultBorderColor,
66-
fontFamily: defaultFontFamily
70+
fontFamily: defaultFontFamily,
71+
showComponentLoadingIndicators: defaultShowComponentLoaders,
72+
showDataLoadingIndicators: defaultShowDataLoaders,
6773
} = props;
6874

6975
const configChangeWithDebounce = _.debounce(configChange, 0);
@@ -76,6 +82,8 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
7682
const [borderWidth, setBorderWidth] = useState(defaultBorderWidth);
7783
const [borderColor, setBorderColor] = useState(defaultBorderColor);
7884
const [fontFamily, setFontFamily] = useState(defaultFontFamily);
85+
const [showComponentLoaders, setComponentLoaders] = useState(defaultShowComponentLoaders);
86+
const [showDataLoaders, setDataLoaders] = useState(defaultShowDataLoaders);
7987

8088
const varName = `(${themeSettingKey})`;
8189

@@ -229,22 +237,36 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
229237
setFontFamily(defaultFontFamily);
230238
}, [defaultFontFamily]);
231239

240+
useEffect(() => {
241+
setComponentLoaders(defaultShowComponentLoaders);
242+
}, [defaultShowComponentLoaders]);
243+
244+
useEffect(() => {
245+
setDataLoaders(defaultShowDataLoaders);
246+
}, [defaultShowDataLoaders]);
247+
232248
return (
233249
<ConfigItem className={props.className}>
234-
<div className="text-desc">
235-
<div className="name">
236-
{name} {showVarName && <span>{varName}</span>}
250+
{themeSettingKey !== "showDataLoadingIndicators"
251+
&& themeSettingKey !== "showComponentLoadingIndicators"
252+
&& (
253+
<div className="text-desc">
254+
<div className="name">
255+
{name} {showVarName && <span>{varName}</span>}
256+
</div>
257+
<div className="desc">{desc}</div>
237258
</div>
238-
<div className="desc">{desc}</div>
239-
</div>
259+
)}
240260

241261
{themeSettingKey !== "radius" &&
242262
themeSettingKey !== "margin" &&
243263
themeSettingKey !== "padding" &&
244264
themeSettingKey !== "gridColumns" &&
245265
themeSettingKey !== "borderStyle" &&
246266
themeSettingKey !== "borderWidth" &&
247-
themeSettingKey !== "fontFamily" && (
267+
themeSettingKey !== "fontFamily" &&
268+
themeSettingKey !== "showComponentLoadingIndicators" &&
269+
themeSettingKey !== "showDataLoadingIndicators" && (
248270
<div className="config-input">
249271
<ColorSelect
250272
changeColor={_.debounce(setColor, 500, {
@@ -386,8 +408,6 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
386408
</div>
387409
)}
388410

389-
390-
391411
{themeSettingKey === "fontFamily" && (
392412
<div className="config-input">
393413
<TacoInput
@@ -398,6 +418,42 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
398418
/>
399419
</div>
400420
)}
421+
{themeSettingKey === "showComponentLoadingIndicators" && (
422+
<div style={{
423+
display: 'flex',
424+
gap: '6px',
425+
lineHeight: 'normal',
426+
}}>
427+
<Switch
428+
size="small"
429+
checked={showComponentLoaders}
430+
onChange={(value) => {
431+
debugger;
432+
setComponentLoaders(value)
433+
configChange({ themeSettingKey, showComponentLoadingIndicators: value});
434+
}}
435+
/>
436+
<span>{name}</span>
437+
</div>
438+
)}
439+
440+
{themeSettingKey === "showDataLoadingIndicators" && (
441+
<div style={{
442+
display: 'flex',
443+
gap: '6px',
444+
lineHeight: 'normal',
445+
}}>
446+
<Switch
447+
size="small"
448+
checked={showDataLoaders}
449+
onChange={(value) => {
450+
setDataLoaders(value)
451+
configChange({ themeSettingKey, showDataLoadingIndicators: value});
452+
}}
453+
/>
454+
<span>{name}</span>
455+
</div>
456+
)}
401457
</ConfigItem>
402458
);
403459
}

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

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -185,8 +185,6 @@ const childrenMap = {
185185
maxWidth: dropdownInputSimpleControl(OPTIONS, USER_DEFINE, "1920"),
186186
themeId: valueComp<string>(DEFAULT_THEMEID),
187187
preventAppStylesOverwriting: withDefault(BoolControl, true),
188-
showComponentLoadingIndicators: withDefault(BoolControl, true),
189-
showDataLoadingIndicators: withDefault(BoolControl, true),
190188
customShortcuts: CustomShortcutsComp,
191189
disableCollision: valueComp<boolean>(false),
192190
lowcoderCompVersion: withDefault(StringControl, 'latest'),
@@ -209,8 +207,6 @@ function AppSettingsModal(props: ChildrenInstance) {
209207
category,
210208
showHeaderInPublic,
211209
preventAppStylesOverwriting,
212-
showComponentLoadingIndicators,
213-
showDataLoadingIndicators,
214210
lowcoderCompVersion,
215211
} = props;
216212

@@ -325,16 +321,6 @@ function AppSettingsModal(props: ChildrenInstance) {
325321
label: trans("prop.preventOverwriting"),
326322
})}
327323
</div>
328-
<div style={{ margin: '20px 0'}}>
329-
{showComponentLoadingIndicators.propertyView({
330-
label: trans("prop.showComponentLoadingIndicators"),
331-
})}
332-
</div>
333-
<div style={{ margin: '20px 0'}}>
334-
{showDataLoadingIndicators.propertyView({
335-
label: trans("prop.showDataLoadingIndicators"),
336-
})}
337-
</div>
338324
</DivStyled>
339325
<DividerStyled />
340326
<DivStyled>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import { WhiteLoading } from "lowcoder-design";
88
import { useContext, useState } from "react";
99
import { useMount } from "react-use";
1010
import styled from "styled-components";
11-
import { RemoteCompInfo, RemoteCompLoader } from "types/remoteComp";
11+
import { RemoteCompInfo } from "types/remoteComp";
1212
import { withErrorBoundary } from "comps/generators/withErrorBoundary";
13-
import { EditorContext } from "@lowcoder-ee/comps/editorState";
13+
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
1414

1515
const ViewError = styled.div`
1616
display: flex;
@@ -53,8 +53,8 @@ interface LazyCompViewProps {
5353
function LazyCompView(props: React.PropsWithChildren<LazyCompViewProps>) {
5454
const { loadComp, loadingElement, errorElement } = props;
5555
const [error, setError] = useState<any>("");
56-
const editorState = useContext(EditorContext);
57-
const showComponentLoadingIndicators = editorState?.getAppSettings().showComponentLoadingIndicators;
56+
const currentTheme = useContext(ThemeContext)?.theme;
57+
const showComponentLoadingIndicators = currentTheme?.showComponentLoadingIndicators;
5858

5959
useMount(() => {
6060
setError("");

‎client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,14 @@ import { SlotConfigContext } from "comps/controls/slotControl";
4040
import { EmptyContent } from "pages/common/styledComponent";
4141
import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
4242
import { ReactRef, ResizeHandleAxis } from "layout/gridLayoutPropTypes";
43-
import { CellColorViewType, ColumnComp } from "./column/tableColumnComp";
43+
import { CellColorViewType } from "./column/tableColumnComp";
4444
import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
4545
import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
4646
import { getVerticalMargin } from "@lowcoder-ee/util/cssUtil";
4747
import { TableSummary } from "./tableSummaryComp";
48-
import { default as LoadingOutlined } from "@ant-design/icons/LoadingOutlined";
4948
import Skeleton from "antd/es/skeleton";
5049
import { SkeletonButtonProps } from "antd/es/skeleton/Button";
50+
import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
5151

5252
export const EMPTY_ROW_KEY = 'empty_row';
5353

@@ -765,7 +765,8 @@ export function TableCompView(props: {
765765
}) {
766766
const [emptyRowsMap, setEmptyRowsMap] = useState<Record<string, RecordType>>({});
767767
const editorState = useContext(EditorContext);
768-
const showDataLoadingIndicators = editorState?.getAppSettings().showDataLoadingIndicators;
768+
const currentTheme = useContext(ThemeContext)?.theme;
769+
const showDataLoadingIndicators = currentTheme?.showDataLoadingIndicators;
769770
const { width, ref } = useResizeDetector({
770771
refreshMode: "debounce",
771772
refreshRate: 600,

‎client/packages/lowcoder/src/constants/themeConstants.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ const theme = {
2323
boxShadow: "",
2424
boxShadowColor: "",
2525
animationIterationCount: "",
26+
showComponentLoadingIndicators: true,
27+
showDataLoadingIndicators: true,
2628
};
2729

2830
const text = {

‎client/packages/lowcoder/src/i18n/locales/en.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -218,8 +218,6 @@ export const en = {
218218
"className": "CSS Class name",
219219
"dataTestId": "Individual ID",
220220
"preventOverwriting": "Prevent overwriting styles",
221-
"showComponentLoadingIndicators": "Show loading indicators when component load",
222-
"showDataLoadingIndicators": "Show loading indicators when data load",
223221
"color": "Color",
224222
"horizontalGridCells": "Horizontal Grid Cells",
225223
"showHorizontalScrollbar": "Show Horizontal Scrollbar",
@@ -2608,7 +2606,10 @@ export const en = {
26082606
"containerHeaderPadding": "Header Padding",
26092607
"containerheaderpaddingDesc": "Default header padding typically used for most components",
26102608
"gridColumns": "Canvas Grid Columns",
2611-
"gridColumnsDesc": "Default number of columns typically used for most containers"
2609+
"gridColumnsDesc": "Default number of columns typically used for most containers",
2610+
"loadingIndicators": "Loading Indicators",
2611+
"showComponentLoadingIndicators": "Show loading indicators when component load",
2612+
"showDataLoadingIndicators": "Show loading indicators when data load"
26122613
},
26132614
"pluginSetting": {
26142615
"title": "Plugins",

‎client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx

Lines changed: 47 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
174174
this.setState({
175175
theme: {
176176
...this.state.theme,
177-
[params.themeSettingKey]: params.color || params.radius || params.chart || params.margin || params.padding || params.gridColumns || params.borderWidth || params.borderStyle || params.fontFamily,
177+
[params.themeSettingKey]: params.color || params.radius || params.chart || params.margin || params.padding || params.gridColumns || params.borderWidth || params.borderStyle || params.fontFamily || params.showComponentLoadingIndicators || params.showDataLoadingIndicators,
178178
},
179179
});
180180
}
@@ -311,6 +311,25 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
311311
}
312312
]
313313
},
314+
{
315+
title: trans('themeDetail.loadingIndicators'),
316+
items: [
317+
{
318+
settingsKey: 'showComponentLoadingIndicators',
319+
name: trans('themeDetail.showComponentLoadingIndicators'),
320+
desc: '',
321+
type: "showComponentLoadingIndicators",
322+
value: this.state.theme?.showComponentLoadingIndicators,
323+
},
324+
{
325+
settingsKey: 'showDataLoadingIndicators',
326+
name: trans('themeDetail.showDataLoadingIndicators'),
327+
desc: '',
328+
type: "showDataLoadingIndicators",
329+
value: this.state.theme?.showDataLoadingIndicators,
330+
},
331+
]
332+
},
314333
];
315334

316335
if (!this.themeDefault) {
@@ -473,7 +492,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
473492
<ThemeSettingsSelector
474493
themeSettingKey={layoutSettingsItem.settingsKey}
475494
name={layoutSettingsItem.name}
476-
radius={layoutSettingsItem.value}
495+
radius={layoutSettingsItem.value as string}
477496
configChange={(params) => {
478497
this.configChange(params);
479498
}}
@@ -483,7 +502,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
483502
<ThemeSettingsSelector
484503
themeSettingKey={layoutSettingsItem.settingsKey}
485504
name={layoutSettingsItem.name}
486-
borderWidth={layoutSettingsItem.value}
505+
borderWidth={layoutSettingsItem.value as string}
487506
configChange={(params) => {
488507
this.configChange(params);
489508
}}
@@ -493,7 +512,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
493512
<ThemeSettingsSelector
494513
themeSettingKey={layoutSettingsItem.settingsKey}
495514
name={layoutSettingsItem.name}
496-
borderStyle={layoutSettingsItem.value}
515+
borderStyle={layoutSettingsItem.value as string}
497516
configChange={(params) => {
498517
this.configChange(params);
499518
}}
@@ -503,7 +522,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
503522
<ThemeSettingsSelector
504523
themeSettingKey={layoutSettingsItem.settingsKey}
505524
name={layoutSettingsItem.name}
506-
margin={layoutSettingsItem.value}
525+
margin={layoutSettingsItem.value as string}
507526
configChange={(params) => {
508527
this.configChange(params);
509528
}}
@@ -513,7 +532,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
513532
<ThemeSettingsSelector
514533
themeSettingKey={layoutSettingsItem.settingsKey}
515534
name={layoutSettingsItem.name}
516-
padding={layoutSettingsItem.value}
535+
padding={layoutSettingsItem.value as string}
517536
configChange={(params) => {
518537
this.configChange(params);
519538
}}
@@ -523,7 +542,28 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
523542
<ThemeSettingsSelector
524543
themeSettingKey={layoutSettingsItem.settingsKey}
525544
name={layoutSettingsItem.name}
526-
gridColumns={layoutSettingsItem.value}
545+
gridColumns={layoutSettingsItem.value as string}
546+
configChange={(params) => {
547+
this.configChange(params);
548+
}}
549+
/>
550+
}
551+
{layoutSettingsItem.type == "showComponentLoadingIndicators" &&
552+
<ThemeSettingsSelector
553+
themeSettingKey={layoutSettingsItem.settingsKey}
554+
name={layoutSettingsItem.name}
555+
showComponentLoadingIndicators={layoutSettingsItem.value as boolean}
556+
configChange={(params) => {
557+
console.log('configChange', params);
558+
this.configChange(params);
559+
}}
560+
/>
561+
}
562+
{layoutSettingsItem.type == "showDataLoadingIndicators" &&
563+
<ThemeSettingsSelector
564+
themeSettingKey={layoutSettingsItem.settingsKey}
565+
name={layoutSettingsItem.name}
566+
showDataLoadingIndicators={layoutSettingsItem.value as boolean}
527567
configChange={(params) => {
528568
this.configChange(params);
529569
}}

0 commit comments

Comments
 (0)