Skip to content

Commit f69ebf5

Browse files
Sky-FESky-FE
committed
perf: support theme
1 parent b72e9b4 commit f69ebf5

File tree

20 files changed

+141
-108
lines changed

20 files changed

+141
-108
lines changed

‎settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"help_document_url": "https://docs-script-document.developers-6w5.pages.dev/script/introduction/"
2+
"help_document_url": "https://docs-public-script.developers-6w5.pages.dev/script/introduction/"
33
}

‎src/bundler/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const initEsbuild = async () => {
1111
if (!service) {
1212
service = esbuild.initialize({
1313
wasmURL: `${CDN_URL}/esbuild-wasm@0.14.42/esbuild.wasm`,
14+
worker: true
1415
});
1516
}
1617
await service;

‎src/components/document_panel/document_panel.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useRef } from 'react';
22
import { shallowEqual } from 'react-redux';
33
import { t } from '@apitable/widget-sdk';
4-
import { useTheme } from '@apitable/components';
4+
import { getThemeName, useTheme } from '@apitable/components';
55
import { ChevronDownOutlined, ChevronUpOutlined, ColumnLinktableFilled } from '@apitable/icons';
66
import { editorState, toggleDocumentPane, useDispatch, useSelector } from '../../store';
77
import Settings from '../../../settings.json';
@@ -21,7 +21,7 @@ import {
2121
export const DocumentPanel = () => {
2222
const { isDocumentPaneOpen } = useSelector(editorState, shallowEqual);
2323
const dispatch = useDispatch();
24-
const { color } = useTheme() as any;
24+
const { color } = useTheme();
2525
const iframeRef = useRef<any>();
2626

2727
const IconComponent = isDocumentPaneOpen ? ChevronDownOutlined : ChevronUpOutlined;
@@ -58,7 +58,7 @@ export const DocumentPanel = () => {
5858
<Iframe
5959
ref={iframeRef}
6060
title="users-html"
61-
src={Settings.help_document_url}
61+
src={`${Settings.help_document_url}?theme=${getThemeName()}`}
6262
sandbox="allow-same-origin allow-scripts"
6363
frameBorder={'none'}
6464
/>

‎src/components/editor_panel/editor_panel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const EditorPanel = (props) => {
1414
const meta = useMeta();
1515
const editorRef = useRef<editor.IStandaloneCodeEditor>();
1616
const monaco = useMonaco();
17-
const { color } = useTheme() as any;
17+
const { color } = useTheme();
1818
const { run } = useDebounceFn((value) => {
1919
onChange(value)
2020
});

‎src/components/preview_panel/preview_panel.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { htmlTemplate } from './html_template';
66
import { InputClass, OutputClass } from '../../render_components';
77
import { editorState, updateLogs, updateRunningState, useDispatch, useSelector } from '../../store';
88
import { Container, Iframe } from './styled';
9+
import { ThemeProvider } from 'styled-components';
10+
import { dark } from '@apitable/components';
911

1012
export const PreviewPanel = () => {
1113
const dispatch = useDispatch();
@@ -63,14 +65,16 @@ export const PreviewPanel = () => {
6365

6466
return (
6567
<Container>
66-
<Iframe
67-
ref={iframeRef}
68-
title="users-html"
69-
srcDoc={htmlTemplate}
70-
sandbox="allow-same-origin allow-scripts allow-popups"
71-
frameBorder={'none'}
72-
onLoad={onLoad}
73-
/>
68+
<ThemeProvider theme={dark}>
69+
<Iframe
70+
ref={iframeRef}
71+
title="users-html"
72+
srcDoc={htmlTemplate}
73+
sandbox="allow-same-origin allow-scripts allow-popups"
74+
frameBorder={'none'}
75+
onLoad={onLoad}
76+
/>
77+
</ThemeProvider>
7478
</Container>
7579
)
7680
}

‎src/render_components/components/button/styled.tsx‎

Lines changed: 57 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import { getNextShadeColor, getContrastText, IButtonBaseProps, IButtonType } from '@apitable/components';
12
import styled, { css } from 'styled-components';
2-
import { getNextShadeColor, getContrastText, applyDefaultTheme, IButtonBaseProps, IButtonType } from '@apitable/components';
3+
import { applyDefaultTheme } from '../utils';
34

45
export const IconSpanStyled = styled.span<{ existIcon: boolean; position: string }>`
56
display:inline-block;
@@ -95,49 +96,75 @@ export const ButtonBase = styled.button.attrs(applyDefaultTheme) <IButtonBasePro
9596
${(props) => {
9697
const {
9798
deepPurple,
98-
red,
99-
orange,
100-
teal,
101-
fc1,
102-
fill0,
103-
primaryLight,
104-
primaryLightHover,
105-
primaryLightActive,
106-
staticWhite0,
107-
primaryColor,
99+
bgDangerDefault,
100+
bgWarnDefault,
101+
bgSuccessDefault,
102+
textCommonPrimary,
103+
bgControlsDefault,
104+
bgBrandLightHover,
105+
bgBrandLightActive,
106+
textStaticPrimary,
107+
textBrandDefault,
108+
bgBrandLightDefault,
109+
bgDangerLightDefault,
110+
bgDangerLightHover,
111+
bgDangerLightActive,
112+
textDangerDefault,
113+
bgWarnLightDefault,
114+
bgWarnLightHover,
115+
bgWarnLightActive,
116+
textWarnDefault,
117+
bgSuccessLightDefault,
118+
bgSuccessLightHover,
119+
bgSuccessLightActive,
120+
textSuccessDefault,
121+
bgBrandDefault
108122
} = props.theme.color;
109123
const getColor = (color: IButtonType | string) => {
110124
const colorMap: any = {
111125
default: {
112-
fill: fill0,
113-
jelly: primaryLight,
114-
jellyHover: primaryLightHover,
115-
jellyActive: primaryLightActive,
116-
text: fc1,
126+
fill: bgControlsDefault,
127+
jelly: bgBrandLightDefault,
128+
jellyHover: bgBrandLightHover,
129+
jellyActive: bgBrandLightActive,
130+
jellyText: textBrandDefault,
131+
text: textCommonPrimary,
117132
},
118133
primary: {
119-
fill: primaryColor,
120-
jelly: primaryLight,
121-
jellyHover: primaryLightHover,
122-
jellyActive: primaryLightActive,
123-
jellyText: primaryColor,
124-
text: staticWhite0,
134+
fill: textBrandDefault,
135+
jelly: bgBrandLightDefault,
136+
jellyHover: bgBrandLightHover,
137+
jellyActive: bgBrandLightActive,
138+
jellyText: textBrandDefault,
139+
text: textStaticPrimary,
125140
},
126141
danger: {
127-
fill: red[500],
128-
jelly: red[50],
142+
fill: bgDangerDefault,
143+
jelly: bgDangerLightDefault,
144+
jellyHover: bgDangerLightHover,
145+
jellyActive: bgWarnLightActive,
146+
jellyText: textWarnDefault,
129147
},
130148
warning: {
131-
fill: orange[500],
132-
jelly: orange[50],
149+
fill: bgWarnDefault,
150+
jelly: bgWarnLightDefault,
151+
jellyHover: bgWarnLightHover,
152+
jellyActive: bgDangerLightActive,
153+
jellyText: textDangerDefault,
133154
},
134155
success: {
135-
fill: teal[500],
136-
jelly: teal[50]
156+
fill: bgSuccessDefault,
157+
jelly: bgSuccessLightDefault,
158+
jellyHover: bgSuccessLightHover,
159+
jellyActive: bgSuccessLightActive,
160+
jellyText: textSuccessDefault,
137161
},
138162
confirm: {
139163
fill: deepPurple[500],
140-
jelly: deepPurple[50],
164+
jelly: bgBrandDefault,
165+
jellyHover: bgBrandLightHover,
166+
jellyActive: bgBrandLightActive,
167+
jellyText: textSuccessDefault,
141168
},
142169
};
143170
const res = colorMap[color];
@@ -183,6 +210,7 @@ export const ButtonBase = styled.button.attrs(applyDefaultTheme) <IButtonBasePro
183210
activeBgColor = getColor(btnColor).jellyActive || getActiveColor(bgColor);
184211
break;
185212
}
213+
// Disabled status cancel hover and active status ui changes
186214
if (props.disabled) {
187215
hoverBgColor = bgColor;
188216
activeBgColor = bgColor;

‎src/render_components/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ export * from './text_async';
22
export * from './select_async';
33
export * from './record_async';
44
export * from './table';
5+
export * from './text';
56
export * from './markdown';

‎src/render_components/components/input/input.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import Color from 'color';
22
import classnames from 'classnames';
33
import React, { useState } from 'react';
44
import styled, { css } from 'styled-components';
5-
import { ITextInputProps, applyDefaultTheme, ITheme } from '@apitable/components';
5+
import { ITextInputProps, ITheme } from '@apitable/components';
6+
import { applyDefaultTheme } from '../utils';
67

78
const sizeHeightMap = {
89
small: 32,

‎src/render_components/components/list_deprecate/line_search_input/styled.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import styled, { css } from 'styled-components';
22
import { IWrapperDivProps } from './interface';
3-
import { applyDefaultTheme } from '@apitable/components';
3+
import { applyDefaultTheme } from '../../utils';
44

55
const INPUT_SIZE = {
66
small: '24px',

‎src/render_components/components/list_deprecate/styled.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import styled, { css } from 'styled-components';
2-
import { applyDefaultTheme, IOption } from '@apitable/components';
2+
import { IOption } from '@apitable/components';
33
import { Typography } from '../typography';
4+
import { applyDefaultTheme } from '../utils';
45

56
export const StyledItemContainer = styled.div.attrs(applyDefaultTheme) <IOption & { height: number }>`
67
position: relative;

0 commit comments

Comments
 (0)