diff --git a/package.json b/package.json index ae91c3a..f7d412a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "private": false, - "version": "0.4.0-alpha.9", + "version": "0.4.0-alpha.10", "workspaces": [ "packages/*" ], @@ -19,7 +19,7 @@ "upgrade:version": "vite-node ./scripts/upgrade-version.ts && pnpm i" }, "dependencies": { - "idraw": "0.4.0-beta.9", + "idraw": "0.4.0-beta.10", "antd": "5.12.1" }, "devDependencies": { diff --git a/packages/studio-base/package.json b/packages/studio-base/package.json index 5552fe5..55def76 100644 --- a/packages/studio-base/package.json +++ b/packages/studio-base/package.json @@ -1,6 +1,6 @@ { "name": "@idraw/studio-base", - "version": "0.4.0-alpha.9", + "version": "0.4.0-alpha.10", "main": "dist/index.js", "module": "dist/index.js", "types": "dist/index.d.ts", @@ -22,7 +22,7 @@ "peerDependencies": { "antd": "^5.12.1", "classnames": "^2.3.2", - "idraw": "^0.4.0-beta.9", + "idraw": "^0.4.0-beta.10", "react": "^18.2.0", "react-color": "^2.19.3", "react-dom": "^18.2.0" diff --git a/packages/studio-base/src/hooks/theme.ts b/packages/studio-base/src/hooks/theme.ts new file mode 100644 index 0000000..b8b985a --- /dev/null +++ b/packages/studio-base/src/hooks/theme.ts @@ -0,0 +1,15 @@ +import { generateClassName } from '../css'; +import classnames from 'classnames'; +import type { ThemeMode } from '../types'; + +export const useThemeClassName = (props: { themeMode?: ThemeMode }) => { + const { themeMode } = props; + const themeName = 'theme'; + const themeClassName = generateClassName(themeName); + const themeDarkClassName = generateClassName(themeName, 'dark'); + const className = classnames({ + [themeClassName]: true, + [themeDarkClassName]: themeMode === 'dark' + }); + return { themeMode, className }; +}; diff --git a/packages/studio-base/src/icons/util/icon-wrapper.tsx b/packages/studio-base/src/icons/util/icon-wrapper.tsx index a52317e..581acb7 100644 --- a/packages/studio-base/src/icons/util/icon-wrapper.tsx +++ b/packages/studio-base/src/icons/util/icon-wrapper.tsx @@ -25,5 +25,5 @@ export const IconWrapper = (props: IconWrapperProps) => { {children} ); - }, [iconClassName]); + }, [iconClassName, style, className]); }; diff --git a/packages/studio-base/src/index.ts b/packages/studio-base/src/index.ts index bd42dee..6b0ac1b 100644 --- a/packages/studio-base/src/index.ts +++ b/packages/studio-base/src/index.ts @@ -11,6 +11,7 @@ export { ElementDetail, type ElementDetailProps } from './modules/element-detail export { getElementTree } from './tools'; export { setClassNameTopPrefix, generateClassName } from './css/index'; +export { useThemeClassName } from './hooks/theme'; export * from './locale/types'; export { diff --git a/packages/studio-base/src/modules/config-provider/index.tsx b/packages/studio-base/src/modules/config-provider/index.tsx index e4898e7..9bdda6b 100644 --- a/packages/studio-base/src/modules/config-provider/index.tsx +++ b/packages/studio-base/src/modules/config-provider/index.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import { createContext, useEffect, useState, useContext } from 'react'; +import { createContext, useEffect, useState } from 'react'; import { ConfigProvider as AntdConfigProvider, theme } from 'antd'; -import classnames from 'classnames'; import { createPrefixName, generateClassName, getClassNameTopPrefix, setClassNameTopPrefix } from '../../css'; import { LocaleCode } from '../../locale'; import { DEFAULT_LOCALE_CODE } from '../../locale'; import { ThemeMode } from '../../types'; +import { useThemeClassName } from '../../hooks/theme'; export interface ConfigContextValue { topPrefix: string; @@ -39,19 +39,15 @@ export const ConfigContext: React.Context = createContext, 'topPrefix' | 'localeCode' | 'container' | 'themeMode'> { children?: React.ReactNode; } + export const ConfigProvider: React.FC = (props) => { const { children, topPrefix, localeCode, container, themeMode } = props; const contextValue: ConfigContextValue = getDefaultConfigValue({ topPrefix, localeCode }); - - const themeName = 'theme'; const [context, setContext] = useState(contextValue); - const { createPrefixName } = useContext(ConfigContext); - const themePrefixName = createPrefixName(themeName); - const themeClassName = themePrefixName(); - const themeDarkClassName = themePrefixName('dark'); + const { className } = useThemeClassName({ themeMode }); useEffect(() => { setContext({ @@ -63,7 +59,7 @@ export const ConfigProvider: React.FC = (props) => { return ( -
{children}
+
{children}
); diff --git a/packages/studio/package.json b/packages/studio/package.json index 4158866..f095fba 100644 --- a/packages/studio/package.json +++ b/packages/studio/package.json @@ -1,6 +1,6 @@ { "name": "@idraw/studio", - "version": "0.4.0-alpha.9", + "version": "0.4.0-alpha.10", "main": "dist/index.js", "module": "dist/index.js", "types": "dist/index.d.ts", @@ -20,13 +20,13 @@ "author": "chenshenhai", "license": "MIT", "dependencies": { - "@idraw/studio-base": "^0.4.0-alpha.9", + "@idraw/studio-base": "^0.4.0-alpha.10", "classnames": "^2.3.2", "is-hotkey": "^0.2.0" }, "peerDependencies": { "antd": "^5.12.1", - "idraw": "^0.4.0-beta.9", + "idraw": "^0.4.0-beta.10", "react": "^18.2.0", "react-color": "^2.19.3", "react-dom": "^18.2.0" diff --git a/packages/studio/src/modules/context.ts b/packages/studio/src/modules/context.ts index 8fc17f3..5ad758d 100644 --- a/packages/studio/src/modules/context.ts +++ b/packages/studio/src/modules/context.ts @@ -13,12 +13,12 @@ export function createStudioContextStateByProps(props?: StudioProps): StudioStat elements: [], ...(props?.data || {}) }; - let editingDataPostion: ElementPosition = []; + let editingDataPosition: ElementPosition = []; let editingData: Data = data; if (props?.defaultEditingGroupUUID) { - editingDataPostion = getElementPositionFromList(props.defaultEditingGroupUUID, data.elements); + editingDataPosition = getElementPositionFromList(props.defaultEditingGroupUUID, data.elements); } - editingData = cloneEditingDataByPosition(editingDataPostion, data); + editingData = cloneEditingDataByPosition(editingDataPosition, data); const treeData = getElementTree(editingData); return { @@ -26,7 +26,7 @@ export function createStudioContextStateByProps(props?: StudioProps): StudioStat themeMode: props?.defaultThemeMode || defaultThemeMode, data, editingData, - editingDataPostion, + editingDataPosition, treeData, selectedUUIDs: props?.defaultSelectedElementUUIDs || [], scaleInfo: { @@ -51,7 +51,7 @@ export function createStudioContextState(opts?: Partial): StudioSta ...(opts?.data || {}) }, editingData: cloneEditingDataByPosition([], data), - editingDataPostion: [], + editingDataPosition: [], treeData: [], selectedUUIDs: [], scaleInfo: { diff --git a/packages/studio/src/modules/panel-layer/index.tsx b/packages/studio/src/modules/panel-layer/index.tsx index 74f2b23..c4f68d3 100644 --- a/packages/studio/src/modules/panel-layer/index.tsx +++ b/packages/studio/src/modules/panel-layer/index.tsx @@ -39,10 +39,10 @@ export const PanelLayer = (props: PanelLayerProps) => { const [contextMenuOptions] = useContextMenuOptions({ sharedEvent, sharedStore }); const getCurrentName = () => { - if (state.editingDataPostion.length === 0) { + if (state.editingDataPosition.length === 0) { return ''; } - const elem = findElementFromListByPosition(state.editingDataPostion, state.data.elements); + const elem = findElementFromListByPosition(state.editingDataPosition, state.data.elements); return elem?.name || elem?.type || ''; }; @@ -123,10 +123,10 @@ export const PanelLayer = (props: PanelLayerProps) => { className={headerBtnClassName} size="small" icon={} - disabled={!(state.editingDataPostion.length > 0)} + disabled={!(state.editingDataPosition.length > 0)} onClick={onClickBackRootEdit} /> -