@blocklet/pages-kit 0.4.121 → 0.4.123

package/lib/cjs/utils/style.js

@@ -10,6 +10,7 @@ exports.isMuiColorKey = isMuiColorKey;
 exports.getSafeGradient = getSafeGradient;
 exports.parseColor = parseColor;
 exports.colorConvert = colorConvert;
+exports.getTransparentBackground = getTransparentBackground;
 const Theme_1 = require("@arcblock/ux/lib/Theme");
 const gradient_parser_1 = __importDefault(require("gradient-parser"));
 const get_1 = __importDefault(require("lodash/get"));
@@ -173,3 +174,6 @@ if ((0, common_1.isBrowserEnv)()) {
     // @ts-ignore inject colorConvert to globalThis
     globalThis[common_1.COLOR_CONVERT_FUNCTION_NAME] = colorConvert;
 }
+function getTransparentBackground() {
+    return 'repeating-conic-gradient(#CCCCCC 0% 25%, #FFFFFF 0% 50%) 50% / 10px 10px';
+}

package/lib/esm/builtin/color-picker.js

@@ -1,48 +1,47 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Empty from '@arcblock/ux/lib/Empty';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, ButtonGroup, Typography, Tooltip, Skeleton, } from '@mui/material';
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, ButtonGroup, Typography, Tooltip, Skeleton, ThemeProvider, } from '@mui/material';
 import { useBoolean, useLocalStorageState, useReactive } from 'ahooks';
 import { Suspense, forwardRef, lazy, useCallback, useImperativeHandle, useRef } from 'react';
 import tinycolor from 'tinycolor2';
 import { useMuiColorPalette } from '../contexts/color';
-import { isColorString, isGradient, getSafeGradient } from '../utils/style';
+import { getBlockletTheme, isColorString, isGradient, getSafeGradient, getTransparentBackground } from '../utils/style';
 const ColorPickerLib = lazy(() => import('react-best-gradient-color-picker'));
 const HEIGHT = 400;
 const WIDTH = 270;
+const blockletTheme = getBlockletTheme();
+export function BlockletThemeProvider({ children }) {
+    return _jsx(ThemeProvider, { theme: blockletTheme, children: children });
+}
 export function ColorItem({ color, sx = {}, ...props }) {
     isColorString(color);
     const styleMap = {};
     if (isGradient(color)) {
         styleMap.backgroundImage = color;
     }
+    else if (color === 'transparent') {
+        styleMap.background = getTransparentBackground();
+    }
     else {
         styleMap.backgroundColor = color;
     }
-    return (_jsx(Box, { sx: {
-            ...sx,
-            width: '100%',
-            paddingBottom: '100%',
-            cursor: 'pointer',
-            transition: 'opacity 0.2s',
-            border: '1px solid #ccc',
-            borderRadius: 0.5,
-            '&:hover': {
-                opacity: 0.75,
-            },
-            ...styleMap,
-        }, ...props }));
-}
-export function ColorPicker({ value, onChange, style = {}, sx = {} }) {
-    const refDialog = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsx(ColorItem, { color: value, style: { width: '1rem', height: '1rem', padding: 0, marginRight: '0.25rem', ...style }, sx: { ...sx }, onClick: () => {
-                    refDialog.current?.open({ value });
-                } }), _jsx(ConfigColorDialog, { ref: refDialog, onSave: ({ value }, close) => {
-                    onChange(value);
-                    close();
-                } })] }));
+    return (
+    // @FIXME：临时方案，等 theme 功能定下来之后去掉
+    _jsx(BlockletThemeProvider, { children: _jsx(Box, { sx: {
+                width: '100%',
+                height: '100%',
+                cursor: 'pointer',
+                transition: 'opacity 0.2s',
+                border: '1px solid #ccc',
+                borderRadius: 0.5,
+                '&:hover': {
+                    opacity: 0.75,
+                },
+                ...sx,
+                ...styleMap,
+            }, ...props }) }));
 }
-export default ColorPicker;
 export const ConfigColorDialog = forwardRef(function ConfigColorDialog({ onSave, enableMuiPalette = true }, ref) {
     const state = useReactive({
         value: '',
@@ -156,7 +155,7 @@ export const ConfigColorDialog = forwardRef(function ConfigColorDialog({ onSave,
                                                     selectedColor = 'rgba(0,0,0,0.7)';
                                                 }
                                             }
-                                            return (_jsx(Tooltip, { title: item.colorKey, children: _jsx(Box, { onClick: () => {
+                                            return (_jsx(Tooltip, { title: item.colorKey, children: _jsx(ColorItem, { color: item.colorValue, onClick: () => {
                                                         state.value = item.colorValue;
                                                         state.originalMuiKey = item.colorKey;
                                                     }, sx: {
@@ -175,7 +174,7 @@ export const ConfigColorDialog = forwardRef(function ConfigColorDialog({ onSave,
                                                         // 透明色时显示棋盘背景
                                                         ...(item.colorValue === 'transparent'
                                                             ? {
-                                                                background: 'repeating-conic-gradient(#CCCCCC 0% 25%, #FFFFFF 0% 50%) 50% / 10px 10px',
+                                                                background: getTransparentBackground(),
                                                             }
                                                             : {}),
                                                     }, children: state.originalMuiKey === item.colorKey && (_jsx("i", { className: "i-mdi:check", style: {
@@ -191,3 +190,13 @@ export const ConfigColorDialog = forwardRef(function ConfigColorDialog({ onSave,
                                         state.originalMuiKey = null;
                                     }, hidePresets: true, hideAdvancedSliders: true, hideColorGuide: true, hideInputType: true }) }) })) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "outlined", size: "small", onClick: handleClose, children: t('common.cancel') }), _jsx(Button, { variant: "contained", size: "small", onClick: handleSave, children: t('maker.save') })] })] }));
 });
+export function ColorPicker({ value, onChange, style = {}, sx = {} }) {
+    const refDialog = useRef(null);
+    return (_jsxs(_Fragment, { children: [_jsx(ColorItem, { color: value || '', style: { width: '1rem', height: '1rem', padding: 0, marginRight: '0.25rem', ...style }, sx: { ...sx }, onClick: () => {
+                    refDialog.current?.open({ value });
+                } }), _jsx(ConfigColorDialog, { ref: refDialog, onSave: ({ value }, close) => {
+                    onChange(value);
+                    close();
+                } })] }));
+}
+export default ColorPicker;

package/lib/esm/contexts/color.js

@@ -1,11 +1,13 @@
-import { useTheme } from '@mui/material/styles';
+// import { useTheme } from '@mui/material/styles';
 import { useCallback, useMemo } from 'react';
-import { isMuiColorKey, colorConvert } from '../utils/style';
+import { isMuiColorKey, colorConvert, getBlockletTheme } from '../utils/style';
 /**
  * Hook 用于获取和操作 MUI 主题色
  */
 export function useMuiColorPalette() {
-    const theme = useTheme();
+    // @FIXME：临时方案，等 theme 功能定下来之后去掉
+    const theme = getBlockletTheme();
+    // const theme = useTheme();
     // 创建 MUI 色板预设及映射关系
     const muiPaletteColors = useMemo(() => {
         const colors = [];