+
)}
diff --git a/src/components/Playground/CodeEditor/FileSelector/file-selector.scss b/src/components/Playground/CodeEditor/FileSelector/file-selector.scss
deleted file mode 100644
index a4aca21..0000000
--- a/src/components/Playground/CodeEditor/FileSelector/file-selector.scss
+++ /dev/null
@@ -1,86 +0,0 @@
-[data-component=playground-file-selector].tab{
- display: flex;
- flex: 0 0 auto;
- height: 40px;
-
- .multiple {
- flex: 1;
- width: 0;
-
- .tab-content {
- height: 40px;
- align-items: flex-end;
- gap: 2px;
- margin-left: 10px;
-
- .tab-item-add {
- padding: 0 12px;
- }
-
- .tabs-margin-right {
- height: 100%;
-
- > * {
- height: 100%;
- width: 10px;
- }
- }
- }
- }
-
- .sticky {
- display: flex;
- flex: 0 0 auto;
- align-items: flex-end;
- margin-right: 10px;
- }
-
- .tab-item {
- display: flex;
- align-items: center;
- justify-content: center;
- flex: 0 0 auto;
- height: 30px;
- padding: 0 20px;
- border: 1px solid #f0f0f0;
- background-color: rgba(0, 0, 0, 0.04);
- border-radius: 6px 6px 0 0;
- cursor: pointer;
-
- .tab-item-input {
- position: relative;
- min-width: 40px;
- transform: translateY(1px);
-
- .tab-item-input-mask {
- display: inline-block;
- color: transparent;
- }
- input {
- position: absolute;
- background-color: transparent;
- width: 100%;
- font-size: 1em;
- }
- }
-
- .tab-item-close {
- transform: translateX(10px);
-
- :hover {
- fill: #888;
- }
-
- svg {
- height: 8px;
- fill: #666;
- }
- }
-
- &.active {
- background-color: white;
- border-bottom: none;
- }
- }
-
-}
diff --git a/src/components/Playground/CodeEditor/FileSelector/index.style.ts b/src/components/Playground/CodeEditor/FileSelector/index.style.ts
new file mode 100644
index 0000000..d19ffb5
--- /dev/null
+++ b/src/components/Playground/CodeEditor/FileSelector/index.style.ts
@@ -0,0 +1,41 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(() => ({
+ root: {
+ display: 'flex',
+ flex: '0 0 auto',
+ height: 40
+ },
+
+ multiple: {
+ flex: 1,
+ width: 0
+ },
+
+ tabContent: {
+ height: 40,
+ alignItems: 'flex-end',
+ gap: 2,
+ marginLeft: 10
+ },
+
+ tabItemAdd: {
+ padding: '0 12px'
+ },
+
+ tabsMarginRight: {
+ height: '100%',
+
+ '> *': {
+ height: '100%',
+ width: 10
+ }
+ },
+
+ sticky: {
+ display: 'flex',
+ flex: '0 0 auto',
+ alignItems: 'flex-end',
+ marginRight: 10
+ }
+}))
diff --git a/src/components/Playground/CodeEditor/FileSelector/index.tsx b/src/components/Playground/CodeEditor/FileSelector/index.tsx
index ffe35b0..661ad06 100644
--- a/src/components/Playground/CodeEditor/FileSelector/index.tsx
+++ b/src/components/Playground/CodeEditor/FileSelector/index.tsx
@@ -1,4 +1,4 @@
-import '@/components/Playground/CodeEditor/FileSelector/file-selector.scss'
+import useStyles from '@/components/Playground/CodeEditor/FileSelector/index.style'
import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
import FlexBox from '@/components/common/FlexBox'
import { IFiles } from '@/components/Playground/shared'
@@ -32,6 +32,7 @@ const FileSelector = ({
onUpdateFileName,
selectedFileName = ''
}: FileSelectorProps) => {
+ const { styles } = useStyles()
const hideScrollbarRef = useRef
(null)
const [tabs, setTabs] = useState([])
const [isCreating, setIsCreating] = useState(false)
@@ -164,8 +165,8 @@ const FileSelector = ({
return (
<>
-
-
+
+
-
+
{tabs.map((item, index) => (
+
{files[TS_CONFIG_FILE_NAME] && (
- ({
+ root: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ flex: '0 0 auto',
+ height: 30,
+ padding: '0 20px',
+ color: token.colorText,
+ border: `1px solid ${token.colorBorder}`,
+ backgroundColor: token.colorBgLayout,
+ borderRadius: '6px 6px 0 0',
+ cursor: 'pointer'
+ },
+
+ active: {
+ backgroundColor: token.colorBgElevated,
+ borderBottom: 'none'
+ },
+
+ tabItemInput: {
+ position: 'relative',
+ minWidth: 40,
+ transform: 'translateY(1px)',
+
+ input: {
+ position: 'absolute',
+ backgroundColor: 'transparent',
+ width: '100%',
+ color: token.colorText,
+ fontSize: token.fontSizeSM
+ }
+ },
+
+ tabItemInputMask: {
+ display: 'inline-block',
+ color: 'transparent'
+ },
+
+ tabItemClose: {
+ transform: 'translateX(10px)',
+
+ svg: {
+ height: token.sizeXS,
+ fill: token.colorTextSecondary
+ },
+
+ '>:hover': {
+ fill: token.colorTextDescription
+ }
+ }
+}))
diff --git a/src/components/Playground/CodeEditor/code-editor.scss b/src/components/Playground/CodeEditor/code-editor.scss
deleted file mode 100644
index eeaefc0..0000000
--- a/src/components/Playground/CodeEditor/code-editor.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-[data-component=playground-code-editor] {
- position: relative;
- width: 100%;
- height: 100%;
-}
diff --git a/src/components/Playground/CodeEditor/index.style.ts b/src/components/Playground/CodeEditor/index.style.ts
new file mode 100644
index 0000000..8b61578
--- /dev/null
+++ b/src/components/Playground/CodeEditor/index.style.ts
@@ -0,0 +1,19 @@
+import { createStyles } from 'antd-style'
+
+export default createStyles(({ token }) => ({
+ root: {
+ position: 'relative',
+ width: '100%',
+ height: '100%'
+ },
+
+ errorMessage: {
+ position: 'absolute',
+ bottom: 0,
+ width: '100%',
+ color: token.colorErrorText,
+ backgroundColor: token.colorErrorBg,
+ padding: '5px 10px',
+ fontSize: token.fontSize
+ }
+}))
diff --git a/src/components/Playground/CodeEditor/index.tsx b/src/components/Playground/CodeEditor/index.tsx
index 9116633..c06a6ef 100644
--- a/src/components/Playground/CodeEditor/index.tsx
+++ b/src/components/Playground/CodeEditor/index.tsx
@@ -1,7 +1,7 @@
import _ from 'lodash'
-import '@/components/Playground/CodeEditor/code-editor.scss'
+import useStyles from '@/components/Playground/CodeEditor/index.style'
import FlexBox from '@/components/common/FlexBox'
-import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playground/shared'
+import { IEditorOptions, IFiles, ITsconfig } from '@/components/Playground/shared'
import {
fileNameToLanguage,
getFileNameList,
@@ -12,7 +12,7 @@ import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
import Editor, { ExtraLib } from '@/components/Playground/CodeEditor/Editor'
interface CodeEditorProps {
- theme?: ITheme
+ isDarkMode?: boolean
showFileSelector?: boolean
tsconfig?: ITsconfig
files: IFiles
@@ -31,7 +31,7 @@ interface CodeEditorProps {
}
const CodeEditor = ({
- theme,
+ isDarkMode,
showFileSelector = true,
tsconfig,
files,
@@ -48,6 +48,7 @@ const CodeEditor = ({
extraLibs,
...props
}: CodeEditorProps) => {
+ const { styles } = useStyles()
const filteredFilesName = getFileNameList(files).filter(
(item) => ![IMPORT_MAP_FILE_NAME, TS_CONFIG_FILE_NAME].includes(item) && !files[item].hidden
)
@@ -122,7 +123,7 @@ const CodeEditor = ({
return (
<>
-
+
{showFileSelector && (
)}
- {errorMsg &&
{errorMsg}
}
+ {errorMsg && {errorMsg}
}
)
diff --git a/src/components/Playground/Output/Preview/Render.tsx b/src/components/Playground/Output/Preview/Render.tsx
index 1d162ee..40d015d 100644
--- a/src/components/Playground/Output/Preview/Render.tsx
+++ b/src/components/Playground/Output/Preview/Render.tsx
@@ -1,6 +1,5 @@
import { ChangeEvent } from 'react'
-import '@/components/Playground/Output/Preview/render.scss'
-import { COLOR_FONT_MAIN } from '@/constants/common.constants'
+import useStyles from '@/components/Playground/Output/Preview/render.style'
import iframeRaw from '@/components/Playground/Output/Preview/iframe.html?raw'
import HideScrollbar from '@/components/common/HideScrollbar'
@@ -41,6 +40,7 @@ const getIframeUrl = (iframeRaw: string) => {
const iframeUrl = getIframeUrl(iframeRaw)
const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) => {
+ const { styles, theme, cx } = useStyles()
const iframeRef = useRef(null)
const [isLoaded, setIsLoaded] = useState(false)
const [selectedDevice, setSelectedDevice] = useState('Pixel 7')
@@ -164,7 +164,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
iframeRef.current?.contentWindow?.postMessage(
{
type: 'SCALE',
- data: { zoom: zoom }
+ data: { zoom }
} as IMessage,
'*'
)
@@ -174,16 +174,24 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
return mobileMode ? (
<>
-
-
-
+
+
+
value.name === selectedDevice)
@@ -198,7 +206,7 @@ const Render = ({ iframeKey, compiledCode, mobileMode = false }: RenderProps) =>
}}
>