fix: current user style error (#1049)

Reviewed-on: daoyoucloud/tachybase#1049
This commit is contained in:
sealday 2024-05-24 11:39:29 +08:00
parent fb54e11587
commit 95d2c2f1ee
39 changed files with 93 additions and 103 deletions

View File

@ -185,7 +185,7 @@ const useStyles = createStyles(({ css, token }) => {
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
padding: '16px';
padding: 16px;
color: ${token.colorTextHeaderMenu};
`,
};

View File

@ -10,7 +10,6 @@
"antd": "5.16.1",
"antd-mobile": "^5.35.0",
"antd-mobile-icons": "^0.3.0",
"classnames": "^2.3.1",
"lodash": "4.17.21",
"react-i18next": "^11.15.1",
"react-router-dom": "6.x"

View File

@ -1,4 +1,5 @@
import React from 'react';
import CSSTransition from 'react-transition-group/CSSTransition';
const AnimateComponent = ({ children, isVisible, timeout, className }) => {

View File

@ -1,9 +1,11 @@
import React, { useRef, useEffect, useState, useCallback } from 'react';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import cx from 'classnames';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import { registerEvent, callHideEvent } from './registerEvent';
import AnimateComponent from './animateComponent';
import { throttle } from './helper';
import { callHideEvent, registerEvent } from './registerEvent';
function ContextMenu({
children,
@ -120,7 +122,7 @@ function ContextMenu({
const ContextComponent = () => (
<div
className={classnames('contextmenu', ...className.split(' '))}
className={cx('contextmenu', ...className.split(' '))}
ref={contextMenuEl}
onMouseLeave={handleMouseLeave}
{...attributes}

View File

@ -1,7 +1,8 @@
import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
import Spreadsheet from '../x-sheet';
import { ClassNamesArg, css, cx } from '@tachybase/client';
import Spreadsheet from '../x-sheet';
export type SheetRef = {
getData: () => any;
};

View File

@ -1,6 +1,8 @@
import React from 'react';
import { ClassNamesArg, css, cx } from '@tachybase/client';
import ReactDOM from 'react-dom';
import { cx, css, ClassNamesArg } from '@tachybase/client';
import { ModalHeader } from './ModalFullScreenChild';
interface ModalFullScreenProps {

View File

@ -14,7 +14,6 @@
"@tachybase/schema": "workspace:*",
"ahooks": "^3.7.2",
"antd": "5.16.1",
"classnames": "^2.3.1",
"lodash": "4.17.21",
"react-i18next": "^11.15.1",
"react-router-dom": "^6.11.2",

View File

@ -1,11 +1,10 @@
import React from 'react';
import { useCollectionRecord } from '@tachybase/client';
import { cx, useCollectionRecord } from '@tachybase/client';
import { usePrefixCls } from '@tachybase/components';
import { connect, mapProps, mapReadPretty } from '@tachybase/schema';
import { LoadingOutlined } from '@ant-design/icons';
import { Input as AntdInput } from 'antd';
import cls from 'classnames';
const ReadPretty = (props) => {
const prefixCls = usePrefixCls('description-input', props);
@ -13,7 +12,7 @@ const ReadPretty = (props) => {
data: { name, tableName },
} = useCollectionRecord() as any;
return (
<div className={cls(prefixCls, props.className)} style={props.style}>
<div className={cx(prefixCls, props.className)} style={props.style}>
{name !== tableName ? (
<>
{name} <span style={{ color: 'GrayText' }}>({tableName})</span>

View File

@ -1,6 +1,7 @@
import React, { useState } from 'react';
import {
css,
cx,
RecordIndexProvider,
RecordProvider,
SchemaComponent,
@ -13,7 +14,6 @@ import {
import { ArrayField, Field, observer, RecursionField, Schema, useField, useFieldSchema } from '@tachybase/schema';
import { Table, TableColumnProps } from 'antd';
import { default as classNames } from 'classnames';
import { findIndex } from 'lodash';
import { useTranslation } from 'react-i18next';
@ -31,7 +31,7 @@ export const components = {
cell: (props) => (
<td
{...props}
className={classNames(
className={cx(
props.className,
css`
max-width: 300px;

View File

@ -15,7 +15,6 @@
"@tachybase/schema": "workspace:*",
"ahooks": "^3.7.2",
"antd": "5.16.1",
"classnames": "^2.3.1",
"dayjs": "^1.11.8",
"deepmerge": "^4.2.2",
"koa-compose": "^4.1.0",

View File

@ -13,7 +13,6 @@
"@tachybase/components": "workspace:*",
"@tachybase/schema": "workspace:*",
"antd": "5.16.1",
"classnames": "^2.3.1",
"lodash": "4.17.21",
"react-beautiful-dnd": "^13.1.0",
"react-i18next": "^11.15.1"

View File

@ -2,6 +2,7 @@ import React, { useContext, useState } from 'react';
import {
ActionContextProvider,
css,
cx,
DndContext,
RecordProvider,
SchemaComponentOptions,
@ -11,7 +12,6 @@ import { FormLayout } from '@tachybase/components';
import { observer, RecursionField, useFieldSchema } from '@tachybase/schema';
import { Card } from 'antd';
import cls from 'classnames';
import { KanbanCardContext } from './context';
@ -39,7 +39,7 @@ export const KanbanCard: any = observer(
hoverable
style={{ cursor: 'pointer', overflow: 'hidden' }}
// bodyStyle={{ paddingBottom: 0 }}
className={cls(css`
className={cx(css`
.ant-card-body {
padding: 16px;
}

View File

@ -15,7 +15,6 @@
"antd": "5.16.1",
"antd-mobile": "^5.35.0",
"antd-mobile-icons": "^0.3.0",
"classnames": "2.x",
"lodash": "4.17.21",
"react": "~18.2.0",
"react-dom": "~18.2.0",

View File

@ -13,7 +13,6 @@
"@tachybase/components": "workspace:*",
"@tachybase/schema": "workspace:*",
"antd": "5.16.1",
"classnames": "^2.3.1",
"cron-parser": "4.4.0",
"dayjs": "^1.11.8",
"lodash": "4.17.21",

View File

@ -14,7 +14,6 @@
"@ctrl/tinycolor": "^3.6.0",
"@types/lodash": "4.17.0",
"antd": "5.16.1",
"classnames": "^2.3.1",
"lodash": "4.17.21",
"rc-util": "^5.32.0",
"react": "^18.2.0",

View File

@ -1,7 +1,7 @@
import React, { useEffect, useMemo, useRef, useState, type CSSProperties, type FC } from 'react';
import { cx } from '@tachybase/client';
import { ConfigProvider, Input, InputNumber, Select, theme, type InputProps } from 'antd';
import classNames from 'classnames';
import useMergedState from 'rc-util/es/hooks/useMergedState';
import { HexColorPicker, RgbaColorPicker } from 'react-colorful';
import tinycolor from 'tinycolor2';
@ -258,7 +258,7 @@ const ColorPanel: FC<ColorPanelProps> = ({ color, onChange, alpha, style }) => {
};
return wrapSSR(
<div className={classNames(hashId, 'color-panel')} style={style}>
<div className={cx(hashId, 'color-panel')} style={style}>
{(colorMode === 'HEX' || colorMode === 'RGB') && (
<HexColorPicker
style={{ height: 160 }}

View File

@ -1,6 +1,5 @@
import React, { type FC } from 'react';
import classNames from 'classnames';
import { cx } from '@tachybase/client';
import getColorBgImg from './utils/getColorBgImg';
import makeStyle from './utils/makeStyle';
@ -42,7 +41,7 @@ const ColorPreview: FC<ColorPreviewProps> = ({ color, style, className, dark, ..
return warpSSR(
<div
{...restProps}
className={classNames('previewer-color-preview', className, hashId)}
className={cx('previewer-color-preview', className, hashId)}
style={{
// @ts-ignore
['--antd-token-previewer-color-preview']: color,

View File

@ -1,7 +1,7 @@
import React, { type CSSProperties, type FC } from 'react';
import { cx } from '@tachybase/client';
import { Segmented, Tag } from 'antd';
import classNames from 'classnames';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import makeStyle from './utils/makeStyle';
@ -82,7 +82,7 @@ const FilterPanel: FC<FilterPanelProps> = ({
}
return wrapSSR(
<div className={classNames('previewer-filter-panel', hashId, className)} {...rest}>
<div className={cx('previewer-filter-panel', hashId, className)} {...rest}>
{selectedTokens && selectedTokens.length > 0 && (
<>
<div className="component-tree-head">

View File

@ -1,6 +1,5 @@
import React from 'react';
import classNames from 'classnames';
import { cx } from '@tachybase/client';
import makeStyle from './utils/makeStyle';
@ -88,15 +87,15 @@ export default function IconSwitch({
const [wrapSSR, hashId] = useStyle();
return wrapSSR(
<div className={classNames('theme-editor-icon-switch', className, hashId)} style={style} {...props}>
<div className={cx('theme-editor-icon-switch', className, hashId)} style={style} {...props}>
<div
className={classNames('holder', leftChecked && 'leftChecked')}
className={cx('holder', leftChecked && 'leftChecked')}
onClick={() => {
onChange?.(!leftChecked);
}}
>
<span className={classNames('icon', leftChecked && 'active')}>{leftIcon}</span>
<span className={classNames('icon', !leftChecked && 'active')}>{rightIcon}</span>
<span className={cx('icon', leftChecked && 'active')}>{leftIcon}</span>
<span className={cx('icon', !leftChecked && 'active')}>{rightIcon}</span>
</div>
</div>,
);

View File

@ -1,7 +1,7 @@
import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
import { cx } from '@tachybase/client';
import type { DerivativeFunc } from '@ant-design/cssinjs';
import classNames from 'classnames';
import { antdComponents } from './component-panel';
import useControlledTheme from './hooks/useControlledTheme';
@ -116,7 +116,7 @@ const ThemeEditor = forwardRef<ThemeEditorRef, ThemeEditorProps>(
return wrapSSR(
<LocaleContext.Provider value={locale}>
<div className={classNames(hashId, 'antd-theme-editor', className)} style={style}>
<div className={cx(hashId, 'antd-theme-editor', className)} style={style}>
<div
style={{
flex: aliasOpen ? '0 0 860px' : `0 0 ${860 - 320}px`,

View File

@ -1,8 +1,8 @@
import React, { useMemo, type FC, type ReactNode } from 'react';
import React, { useMemo, type ReactNode } from 'react';
import { cx } from '@tachybase/client';
import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Dropdown, Menu } from 'antd';
import classNames from 'classnames';
import type { Theme } from './interface';
import makeStyle from './utils/makeStyle';
@ -122,7 +122,7 @@ const useStyle = makeStyle('ThemeSelect', (token) => ({
},
}));
const ThemeSelect: FC<ThemeSelectProps> = (props) => {
const ThemeSelect = (props: ThemeSelectProps) => {
const { onEnabledThemeChange, onShownThemeChange, enabledThemes, shownThemes, themes, showAddTheme } = props;
const [wrapSSR, hashId] = useStyle();
@ -159,7 +159,7 @@ const ThemeSelect: FC<ThemeSelectProps> = (props) => {
);
return wrapSSR(
<div className={classNames('previewer-theme-select', hashId)}>
<div className={cx('previewer-theme-select', hashId)}>
{shownThemeEntities.map((theme) => (
<span
onClick={() => {
@ -173,7 +173,7 @@ const ThemeSelect: FC<ThemeSelectProps> = (props) => {
);
}}
key={theme.key}
className={classNames('previewer-theme-select-tag', {
className={cx('previewer-theme-select-tag', {
'previewer-theme-select-tag-active': enabledThemes.includes(theme.key),
})}
>
@ -201,7 +201,7 @@ const ThemeSelect: FC<ThemeSelectProps> = (props) => {
placement="bottomRight"
trigger={['click']}
overlay={<Menu items={dropdownItems} />}
overlayClassName={classNames('previewer-theme-select-dropdown', hashId)}
overlayClassName={cx('previewer-theme-select-dropdown', hashId)}
>
<Button type="primary" shape="circle" className="previewer-theme-select-add-btn" icon={<PlusOutlined />} />
</Dropdown>

View File

@ -1,7 +1,7 @@
import React, { useEffect, useRef, useState, type FC } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { cx } from '@tachybase/client';
import { Button, Dropdown, Input, InputNumber } from 'antd';
import classNames from 'classnames';
import { useDebouncyFn } from 'use-debouncy';
import ColorPanel from './ColorPanel';
@ -81,7 +81,7 @@ type TokenInputProps = {
hideTheme?: boolean;
};
const TokenInput: FC<TokenInputProps> = ({
const TokenInput = ({
value,
theme,
onChange,
@ -90,7 +90,7 @@ const TokenInput: FC<TokenInputProps> = ({
onReset,
canReset: customCanReset,
hideTheme,
}) => {
}: TokenInputProps) => {
const valueRef = useRef<number | string>(value || '');
const [tokenValue, setTokenValue] = useState<string | number>(value || '');
const canReset = customCanReset ?? valueRef.current !== tokenValue;
@ -213,7 +213,7 @@ const TokenInput: FC<TokenInputProps> = ({
}
return wrapSSR(
<div
className={classNames('previewer-token-input', hashId, {
className={cx('previewer-token-input', hashId, {
'previewer-token-input-light': light,
'previewer-token-input-readonly': readonly,
})}

View File

@ -1,7 +1,7 @@
import React from 'react';
import { cx } from '@tachybase/client';
import { Col, Row } from 'antd';
import classNames from 'classnames';
import type { ComponentDemo } from '../../interface';
import makeStyle from '../../utils/makeStyle';
@ -30,7 +30,7 @@ const Demo = () => {
const [, hashId] = useStyle();
return (
<div className={classNames('previewer-grid-demo', hashId)}>
<div className={cx('previewer-grid-demo', hashId)}>
<Row>
<Col span={24}>col</Col>
</Row>

View File

@ -1,7 +1,7 @@
import React, { useState, type FC, type PropsWithChildren } from 'react';
import { cx } from '@tachybase/client';
import { Card, type CardProps } from 'antd';
import classNames from 'classnames';
import { Control } from '../icons';
import type { MutableTheme, TokenName } from '../interface';
@ -57,7 +57,7 @@ const ComponentCard: FC<ComponentCardProps> = ({ children, component, title, the
return wrapSSR(
<>
<Card
className={classNames('component-card', hashId)}
className={cx('component-card', hashId)}
title={title}
extra={
drawer && theme && <Control className="component-token-control-icon" onClick={() => setDrawerOpen(true)} />

View File

@ -1,7 +1,7 @@
import React, { type FC } from 'react';
import { cx } from '@tachybase/client';
import { ConfigProvider, Tooltip } from 'antd';
import classNames from 'classnames';
import ComponentDemos from '../component-demos';
import type { ComponentDemo, MutableTheme, TokenName } from '../interface';
@ -71,7 +71,7 @@ const ComponentDemoBlock: FC<ComponentDemoBlockProps> = ({
const locale = useLocale();
return (
<div className={classNames('previewer-component-demo-group-item', hashId)}>
<div className={cx('previewer-component-demo-group-item', hashId)}>
<ComponentCard
title={component}
component={component}
@ -149,7 +149,7 @@ const ComponentDemoGroup: FC<ComponentDemoGroupProps> = ({
return (
<div
className={classNames('previewer-component-demo-group', hashId)}
className={cx('previewer-component-demo-group', hashId)}
key={item}
id={getComponentDemoId(item)}
style={{

View File

@ -1,8 +1,8 @@
import React, { useMemo, type FC } from 'react';
import { cx } from '@tachybase/client';
import { BuildOutlined, CarOutlined } from '@ant-design/icons';
import { theme as antdTheme, ConfigProvider, Drawer, Empty, Tag, Tooltip } from 'antd';
import classNames from 'classnames';
import ComponentDemos from '../component-demos';
import type { AliasToken, ComponentDemo, MutableTheme, TokenName, TokenValue } from '../interface';
@ -60,7 +60,7 @@ const ComponentFullDemos: FC<ComponentFullDemosProps> = ({ demos }) => {
const locale = useLocale();
return (
<div className={classNames('previewer-component-full-demos', hashId)} style={{}}>
<div className={cx('previewer-component-full-demos', hashId)} style={{}}>
{demos?.map((demo) => (
<ComponentCard
key={demo.key}
@ -126,7 +126,7 @@ const ComponentTokenDrawer: FC<ComponentTokenDrawerProps> = ({ visible, componen
}
onClose={onClose}
width={1200}
className={classNames('previewer-component-token-drawer', hashId)}
className={cx('previewer-component-token-drawer', hashId)}
>
<div style={{ display: 'flex', height: '100%' }}>
<ConfigProvider theme={theme.config}>

View File

@ -1,8 +1,8 @@
import React, { useEffect, useMemo, useRef, useState, type FC } from 'react';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { cx } from '@tachybase/client';
import { SearchOutlined } from '@ant-design/icons';
import { Badge, Input, Tree } from 'antd';
import classNames from 'classnames';
import type { FilterMode } from '../FilterPanel';
import makeStyle from '../utils/makeStyle';
@ -74,13 +74,13 @@ export type ComponentTreeProps = {
const getTreeItemId = (component: string) => `component-tree-item-${component}`;
const ComponentTree: FC<ComponentTreeProps> = ({
const ComponentTree = ({
onSelect,
components,
selectedTokens,
filterMode = 'filter',
activeComponent,
}) => {
}: ComponentTreeProps) => {
const [wrapSSR, hashId] = useStyle();
const treeRef = useRef<HTMLDivElement>(null);
const [search, setSearch] = useState<string>('');
@ -120,7 +120,7 @@ const ComponentTree: FC<ComponentTreeProps> = ({
title: (
<span
id={getTreeItemId(item)}
className={classNames('component-tree-item', {
className={cx('component-tree-item', {
'component-tree-item-highlight': filterMode === 'highlight' && relatedComponents.includes(item),
})}
>
@ -157,7 +157,7 @@ const ComponentTree: FC<ComponentTreeProps> = ({
}, [selectedTokens, filterMode]);
return wrapSSR(
<div className={classNames('component-tree-wrapper', hashId)}>
<div className={cx('component-tree-wrapper', hashId)}>
<Input
allowClear
placeholder="Type to search"

View File

@ -1,8 +1,8 @@
import React, { useEffect, useMemo, useRef, useState, type CSSProperties, type FC } from 'react';
import { cx } from '@tachybase/client';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { Breadcrumb, Segmented, Switch } from 'antd';
import classNames from 'classnames';
import type { FilterMode } from '../FilterPanel';
import type { Theme, TokenName } from '../interface';
@ -250,9 +250,9 @@ const Index: FC<ComponentPanelProps> = ({ themes, selectedTokens, filterMode, cl
);
return wrapSSR(
<div className={classNames('component-panel', hashId, className)} {...rest}>
<div className={cx('component-panel', hashId, className)} {...rest}>
<div
className={classNames('component-panel-side', {
className={cx('component-panel-side', {
'component-panel-side-hidden': !showSide,
})}
>

View File

@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { cx } from '@tachybase/client';
import { theme as antdTheme, Button, Layout, message } from 'antd';
import classNames from 'classnames';
import ComponentPanel from './component-panel';
import FilterPanel, { type FilterMode } from './FilterPanel';
@ -218,7 +218,7 @@ const Previewer: React.FC<PreviewerProps> = ({ onSave, showTheme, theme, onTheme
);
return wrapSSR(
<Layout className={classNames('previewer-layout', hashId)}>
<Layout className={cx('previewer-layout', hashId)}>
<Header className="previewer-header">
<span style={{ fontSize: 16, fontWeight: 'bold', marginRight: 16 }}></span>
{showTheme && (
@ -278,10 +278,7 @@ const Previewer: React.FC<PreviewerProps> = ({ onSave, showTheme, theme, onTheme
/>
<Button
onClick={() => setSiderVisible((prev) => !prev)}
className={classNames(
'previewer-sider-collapse-btn',
!siderVisible && 'previewer-sider-collapse-btn-collapsed',
)}
className={cx('previewer-sider-collapse-btn', !siderVisible && 'previewer-sider-collapse-btn-collapsed')}
size="small"
icon={<Arrow rotate={siderVisible ? 0 : 180} className="previewer-sider-collapse-btn-icon" />}
shape="circle"

View File

@ -1,8 +1,8 @@
import React, { useMemo, type FC } from 'react';
import { cx } from '@tachybase/client';
import { CaretRightOutlined, QuestionCircleOutlined, RightOutlined, ShrinkOutlined } from '@ant-design/icons';
import { Button, Collapse, Empty, Tooltip } from 'antd';
import classNames from 'classnames';
import useMergedState from 'rc-util/es/hooks/useMergedState';
import { MutableTheme } from '../../../types';
@ -155,7 +155,7 @@ const AliasPanel: FC<AliasPanelProps> = ({
);
return wrapSSR(
<div className={classNames(className, 'token-panel-pro-color-alias', hashId)} style={style}>
<div className={cx(className, 'token-panel-pro-color-alias', hashId)} style={style}>
{open ? (
<>
<div className="token-panel-pro-color-alias-title">
@ -197,7 +197,7 @@ const AliasPanel: FC<AliasPanelProps> = ({
}}
>
<Pick
className={classNames('token-panel-pro-token-pick', {
className={cx('token-panel-pro-token-pick', {
'token-panel-pro-token-picked': selectedTokens?.alias?.includes(aliasToken),
})}
/>

View File

@ -1,10 +1,9 @@
import React, { useEffect, useMemo, useState, type FC } from 'react';
import { StablePopover, type ThemeConfig } from '@tachybase/client';
import { cx, StablePopover, type ThemeConfig } from '@tachybase/client';
import { CaretRightOutlined, ExpandOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Button, Checkbox, Collapse, ConfigProvider, Switch, Tooltip, Typography } from 'antd';
import seed from 'antd/es/theme/themes/seed';
import classNames from 'classnames';
import { useDebouncyFn } from 'use-debouncy';
import { MutableTheme } from '../../../types';
@ -397,7 +396,7 @@ const MapTokenCollapseContent: FC<MapTokenCollapseContentProps> = ({
}}
>
<Pick
className={classNames('token-panel-pro-token-pick', {
className={cx('token-panel-pro-token-pick', {
'token-panel-pro-token-picked': selectedTokens?.map?.includes(mapToken),
})}
/>
@ -557,7 +556,7 @@ const TokenContent: FC<ColorTokenContentProps> = ({
};
return wrapSSR(
<div className={classNames(hashId, 'token-panel-pro-color')}>
<div className={cx(hashId, 'token-panel-pro-color')}>
<div className="token-panel-pro-color-seeds">
<div className="token-panel-pro-color-themes">
<span style={{ marginRight: 12 }}>{locale._lang === 'zh-CN' ? category.name : category.nameEn}</span>

View File

@ -1,7 +1,7 @@
import React, { useMemo, type FC } from 'react';
import React, { useMemo } from 'react';
import { cx } from '@tachybase/client';
import { Tooltip } from 'antd';
import classNames from 'classnames';
import { MutableTheme } from '../../../types';
import type { TokenValue } from '../interface';
@ -60,7 +60,7 @@ export type TokenDetailProps = {
style?: React.CSSProperties;
};
const TokenDetail: FC<TokenDetailProps> = ({ themes, path, tokenName, className, style }) => {
const TokenDetail = ({ themes, path, tokenName, className, style }: TokenDetailProps) => {
const [wrapSSR, hashId] = useStyle();
const tokenPath = [...path, tokenName];
const locale = useLocale();
@ -74,7 +74,7 @@ const TokenDetail: FC<TokenDetailProps> = ({ themes, path, tokenName, className,
}, [tokenName]);
return wrapSSR(
<div className={classNames(className, hashId, 'token-panel-token-detail')} style={style}>
<div className={cx(className, hashId, 'token-panel-token-detail')} style={style}>
<div className="token-panel-pro-token-collapse-map-collapse-token-description">
{(tokenMeta as any)[tokenName]?.[locale._lang === 'zh-CN' ? 'desc' : 'descEn']}
</div>

View File

@ -1,7 +1,7 @@
import React, { useEffect, useMemo, useState, type FC } from 'react';
import { cx } from '@tachybase/client';
import { Tabs } from 'antd';
import classNames from 'classnames';
import { Theme } from '../../../types';
import type { SelectedToken } from '../interface';
@ -69,7 +69,7 @@ const TokenPanelPro: FC<TokenPanelProProps> = ({
}, [activeCategory]);
return wrapSSR(
<div className={classNames(hashId, className, 'token-panel-pro')} style={style}>
<div className={cx(hashId, className, 'token-panel-pro')} style={style}>
<Tabs
defaultActiveKey="color"
tabBarGutter={32}

View File

@ -1,8 +1,8 @@
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { cx } from '@tachybase/client';
import { CheckOutlined } from '@ant-design/icons';
import { theme as antdTheme, Dropdown, Input, Menu, Switch } from 'antd';
import classNames from 'classnames';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import { SearchDropdown } from '../icons';
@ -176,10 +176,10 @@ export default forwardRef<TokenPanelRef, TokenPreviewProps>((props: TokenPreview
};
return wrapSSR(
<div className={classNames('preview-panel-wrapper', hashId)}>
<div className={classNames('preview-panel')}>
<div className={cx('preview-panel-wrapper', hashId)}>
<div className={cx('preview-panel')}>
<div style={{ padding: 16 }}>
<h3 className={classNames('preview-panel-space', hashId)}>
<h3 className={cx('preview-panel-space', hashId)}>
<span>Alias Token </span>
<span className="preview-hide-token">
<span></span>
@ -240,7 +240,7 @@ export default forwardRef<TokenPanelRef, TokenPreviewProps>((props: TokenPreview
paddingTop: 2,
transition: 'color 0.3s',
}}
className={classNames({
className={cx({
'previewer-token-type-dropdown-icon-active': mergedFilterTypes.length > 0,
})}
/>
@ -252,7 +252,7 @@ export default forwardRef<TokenPanelRef, TokenPreviewProps>((props: TokenPreview
/>
</div>
<div
className={classNames('preview-panel-token-wrapper', {
className={cx('preview-panel-token-wrapper', {
'preview-panel-token-wrapper-ping-top': showTokenListShadowTop,
})}
>

View File

@ -1,4 +1,5 @@
import React, { type ReactNode } from 'react';
import { cx } from '@tachybase/client';
import {
AlignLeftOutlined,
@ -17,7 +18,6 @@ import {
} from '@ant-design/icons';
import { Collapse, Space } from 'antd';
import type { ThemeConfig } from 'antd/es/config-provider/context';
import classNames from 'classnames';
import useMergedState from 'rc-util/es/hooks/useMergedState';
import { Motion, ShapeLine } from '../../icons';
@ -137,7 +137,7 @@ export default ({
});
return wrapSSR(
<div className={classNames('token-card', hashId)}>
<div className={cx('token-card', hashId)}>
<Collapse
ghost
expandIcon={({ isActive }) => (

View File

@ -1,9 +1,9 @@
import React, { useEffect, useMemo, type CSSProperties } from 'react';
import { cx } from '@tachybase/client';
import { CaretRightOutlined } from '@ant-design/icons';
import { Collapse, Space } from 'antd';
import type { ThemeConfig } from 'antd/es/config-provider/context';
import classNames from 'classnames';
import ColorPreview from '../../ColorPreview';
import { Pick } from '../../icons';
@ -200,7 +200,7 @@ export default ({
collapsible="header"
ghost
onChange={(key) => setInfoVisible(key.length > 0)}
className={classNames('previewer-token-item-collapse', hashId)}
className={cx('previewer-token-item-collapse', hashId)}
expandIcon={({ isActive }) => (
<CaretRightOutlined rotate={isActive ? 90 : 0} style={{ fontSize: 12, cursor: 'pointer' }} />
)}
@ -229,7 +229,7 @@ export default ({
>
<span
title={tokenName}
className={classNames('previewer-token-item-name', {
className={cx('previewer-token-item-name', {
'previewer-token-item-highlighted': active,
})}
style={{

View File

@ -20,7 +20,6 @@
"@types/lodash": "^4.17.0",
"antd": "5.16.1",
"axios": "^1.6.2",
"classnames": "^2.3.1",
"cron-parser": "4.4.0",
"lodash": "4.17.21",
"lru-cache": "8.0.5",

View File

@ -1,10 +1,9 @@
import React from 'react';
import { createStyles, cx } from '@tachybase/client';
import { Button, Tag } from 'antd';
import classnames from 'classnames';
import { createStyles } from '@tachybase/client';
const useStyles = createStyles(({ css, token }) => ({
const useStyles = createStyles(({ css }) => ({
statusButtonClass: css`
border: none;
.ant-tag {
@ -34,7 +33,7 @@ export function StatusButton(props) {
{...props}
shape="circle"
size="small"
className={classnames(tag ? styles.statusButtonClass : styles.noStatusButtonClass, props.className)}
className={cx(tag ? styles.statusButtonClass : styles.noStatusButtonClass, props.className)}
>
{tag}
</Button>

View File

@ -1,6 +1,6 @@
import React from 'react';
import { css, i18n } from '@tachybase/client';
import { evaluators } from '@tachybase/evaluators/client';
import React from 'react';
export const renderEngineReference = (key: string) => {
const engine = evaluators.get(key);