Skip to content

Commit bcb2ba0

Browse files
zhangpaopao0609zhangpaopao0609
authored
refactor(loading): component optimization (Tencent#5127)
* refactor(loading): component otimization * chore(loading): remove unused showNormalLoading
1 parent f826c95 commit bcb2ba0

File tree

5 files changed

+82
-106
lines changed

5 files changed

+82
-106
lines changed

‎packages/components/layout/aside.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@ import { useTNodeJSX } from '../hooks/tnode';
66

77
export default defineComponent({
88
name: 'TAside',
9-
109
props,
11-
1210
setup(props) {
1311
const { hasSide } = inject<LayoutProvideType>('layout', Object.create(null));
1412
const COMPONENT_NAME = usePrefixClass('layout__sider');

‎packages/components/layout/header.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,7 @@ import { usePrefixClass } from '../hooks/useConfig';
66

77
export default defineComponent({
88
name: 'THeader',
9-
109
props,
11-
1210
setup(props) {
1311
const COMPONENT_NAME = usePrefixClass('layout__header');
1412
const renderTNodeJSX = useTNodeJSX();

‎packages/components/layout/layout.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ export type LayoutProvideType = {
88

99
export default defineComponent({
1010
name: 'TLayout',
11-
1211
setup() {
1312
const hasSide = ref(false);
1413
const renderTNodeJSX = useTNodeJSX();

‎packages/components/loading/icon/gradient.tsx

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,37 @@
1-
import { defineComponent, onMounted, getCurrentInstance, nextTick } from 'vue';
2-
import circleAdapter from '@tdesign/common-js/loading/circle-adapter';
1+
import { defineComponent, onMounted, nextTick, ref } from 'vue';
32
import { usePrefixClass } from '../../hooks/useConfig';
3+
import circleAdapter from '@tdesign/common-js/loading/circle-adapter';
44

55
export default defineComponent({
66
name: 'TLoadingGradient',
7-
87
setup() {
98
const classPrefix = usePrefixClass();
9+
const circleRef = ref<HTMLElement | null>();
10+
1011
onMounted(() => {
11-
const circleElem = getCurrentInstance().refs.circle as HTMLElement;
1212
nextTick(() => {
13-
circleAdapter(circleElem);
13+
circleAdapter(circleRef.value);
1414
});
1515
});
16-
return {
17-
classPrefix,
18-
};
19-
},
20-
render() {
21-
const { classPrefix } = this;
22-
const name = `${classPrefix}-loading__gradient`;
2316

24-
const classes = [name, `${classPrefix}-icon-loading`];
25-
return (
26-
<svg
27-
class={classes}
28-
viewBox="0 0 12 12"
29-
version="1.1"
30-
width="1em"
31-
height="1em"
32-
xmlns="http://www.w3.org/2000/svg"
33-
>
34-
<foreignObject x="0" y="0" width="12" height="12">
35-
<div class={`${name}-conic`} ref="circle" />
36-
</foreignObject>
37-
</svg>
38-
);
17+
return () => {
18+
const name = `${classPrefix.value}-loading__gradient`;
19+
const classes = [name, `${classPrefix.value}-icon-loading`];
20+
21+
return (
22+
<svg
23+
class={classes}
24+
viewBox="0 0 12 12"
25+
version="1.1"
26+
width="1em"
27+
height="1em"
28+
xmlns="http://www.w3.org/2000/svg"
29+
>
30+
<foreignObject x="0" y="0" width="12" height="12">
31+
<div class={`${name}-conic`} ref={circleRef} />
32+
</foreignObject>
33+
</svg>
34+
);
35+
};
3936
},
4037
});

‎packages/components/loading/loading.tsx

Lines changed: 58 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import { defineComponent, ref, computed, watch, onMounted, toRefs, CSSProperties, Teleport } from 'vue';
22
import GradientIcon from './icon/gradient';
33
import { addClass, removeClass } from '../utils/dom';
4-
import { renderTNodeJSX, renderContent } from '../utils/render-tnode';
5-
import props from './props';
6-
4+
import { getPropertyValFromObj } from '@tdesign/common-js/utils/general';
5+
import { useTNodeJSX, useContent } from '../hooks/tnode';
76
import { usePrefixClass, useCommonClassName } from '../hooks/useConfig';
87
import useTeleport from '../hooks/useTeleport';
9-
10-
import { getPropertyValFromObj } from '@tdesign/common-js/utils/general';
8+
import props from './props';
119

1210
const useComponentClassName = () => {
1311
return {
@@ -26,13 +24,15 @@ export default defineComponent({
2624
name: 'TLoading',
2725
inheritAttrs: false,
2826
props,
29-
setup(props, { slots }) {
27+
setup(props, { slots, attrs }) {
3028
const delayShowLoading = ref(false);
3129

3230
const { name, centerClass, fullscreenClass, lockClass, overlayClass, relativeClass, fullClass, inheritColorClass } =
3331
useComponentClassName();
3432

3533
const classPrefix = usePrefixClass();
34+
const renderTNodeJSX = useTNodeJSX();
35+
const renderContent = useContent();
3636
const { SIZE } = useCommonClassName();
3737

3838
const countDelay = () => {
@@ -64,7 +64,6 @@ export default defineComponent({
6464
const showText = computed(() => Boolean(props.text || slots.text));
6565
const showWrapLoading = computed(() => hasContent.value && props.loading && delayCounted.value);
6666
const showFullScreenLoading = computed(() => props.fullscreen && props.loading && delayCounted.value);
67-
const showNormalLoading = computed(() => props.attach && props.loading && delayCounted.value);
6867
const showAttachedLoading = computed(() => props.attach && props.loading && delayCounted.value);
6968
const classes = computed(() => {
7069
const baseClasses = [
@@ -104,78 +103,63 @@ export default defineComponent({
104103
props.delay && countDelay();
105104
});
106105

107-
return {
108-
classPrefix,
109-
relativeClass,
110-
delayShowLoading,
111-
styles,
112-
showText,
113-
hasContent,
114-
classes,
115-
lockFullscreen,
116-
showWrapLoading,
117-
showNormalLoading,
118-
showFullScreenLoading,
119-
showAttachedLoading,
120-
teleportElement,
121-
};
122-
},
123-
render() {
124-
const { fullScreenClasses, baseClasses, withContentClasses, attachClasses, normalClasses } = this.classes;
125-
126-
const defaultIndicator = <GradientIcon size={this.size} />;
127-
const indicator = this.loading && renderTNodeJSX(this, 'indicator', defaultIndicator);
128-
const text = this.showText && <div class={`${this.classPrefix}-loading__text`}>{renderTNodeJSX(this, 'text')}</div>;
129-
130-
// full screen loading
131-
if (this.fullscreen) {
132-
if (!this.showFullScreenLoading || !this.loading) return null;
133-
return (
134-
<Teleport disabled={!this.attach || !this.teleportElement} to={this.teleportElement}>
135-
<div class={fullScreenClasses} style={this.styles} {...this.$attrs}>
136-
<div class={baseClasses}>
137-
{indicator}
138-
{text}
106+
return () => {
107+
const { fullScreenClasses, baseClasses, withContentClasses, attachClasses, normalClasses } = classes.value;
108+
109+
const defaultIndicator = <GradientIcon size={props.size} />;
110+
const indicator = loading.value && renderTNodeJSX('indicator', defaultIndicator);
111+
const text = showText.value && <div class={`${classPrefix.value}-loading__text`}>{renderTNodeJSX('text')}</div>;
112+
113+
// full screen loading
114+
if (props.fullscreen) {
115+
if (!showFullScreenLoading.value || !props.loading) return null;
116+
return (
117+
<Teleport disabled={!props.attach || !teleportElement.value} to={teleportElement.value}>
118+
<div class={fullScreenClasses} style={styles.value} {...attrs}>
119+
<div class={baseClasses}>
120+
{indicator}
121+
{text}
122+
</div>
139123
</div>
124+
</Teleport>
125+
);
126+
}
127+
128+
// Loading is wrapping a HTMLElement.
129+
if (hasContent.value) {
130+
return (
131+
<div class={relativeClass.value} {...attrs}>
132+
{renderContent('default', 'content')}
133+
{showWrapLoading.value && (
134+
<div class={withContentClasses} style={styles.value}>
135+
{indicator}
136+
{text}
137+
</div>
138+
)}
140139
</div>
141-
</Teleport>
142-
);
143-
}
144-
145-
// Loading is wrapping a HTMLElement.
146-
if (this.hasContent) {
147-
return (
148-
<div class={this.relativeClass} {...this.$attrs}>
149-
{renderContent(this, 'default', 'content')}
150-
{this.showWrapLoading && (
151-
<div class={withContentClasses} style={this.styles}>
140+
);
141+
}
142+
143+
// transfer parent node
144+
if (props.attach) {
145+
if (!showAttachedLoading.value || !loading.value) return null;
146+
return (
147+
<Teleport disabled={!props.attach || !teleportElement.value} to={teleportElement.value}>
148+
<div class={attachClasses} style={styles.value} {...attrs}>
152149
{indicator}
153150
{text}
154151
</div>
155-
)}
152+
</Teleport>
153+
);
154+
}
155+
156+
// Normal Loading without overlay or content
157+
return loading.value ? (
158+
<div class={normalClasses} style={styles.value} {...attrs}>
159+
{indicator}
160+
{text}
156161
</div>
157-
);
158-
}
159-
160-
// transfer parent node
161-
if (this.attach) {
162-
if (!this.showAttachedLoading || !this.loading) return null;
163-
return (
164-
<Teleport disabled={!this.attach || !this.teleportElement} to={this.teleportElement}>
165-
<div class={attachClasses} style={this.styles} {...this.$attrs}>
166-
{indicator}
167-
{text}
168-
</div>
169-
</Teleport>
170-
);
171-
}
172-
173-
// Normal Loading without overlay or content
174-
return this.loading ? (
175-
<div class={normalClasses} style={this.styles} {...this.$attrs}>
176-
{indicator}
177-
{text}
178-
</div>
179-
) : null;
162+
) : null;
163+
};
180164
},
181165
});

0 commit comments

Comments
 (0)