fix: current user style error (#1049)
Reviewed-on: daoyoucloud/tachybase#1049
This commit is contained in:
parent
fb54e11587
commit
95d2c2f1ee
@ -185,7 +185,7 @@ const useStyles = createStyles(({ css, token }) => {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
padding: '16px';
|
||||
padding: 16px;
|
||||
color: ${token.colorTextHeaderMenu};
|
||||
`,
|
||||
};
|
||||
|
@ -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"
|
||||
|
@ -1,4 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
import CSSTransition from 'react-transition-group/CSSTransition';
|
||||
|
||||
const AnimateComponent = ({ children, isVisible, timeout, className }) => {
|
||||
|
@ -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}
|
||||
|
@ -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;
|
||||
};
|
||||
|
@ -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 {
|
||||
|
@ -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",
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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",
|
||||
|
@ -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"
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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 }}
|
||||
|
@ -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,
|
||||
|
@ -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">
|
||||
|
@ -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>,
|
||||
);
|
||||
|
@ -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`,
|
||||
|
@ -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>
|
||||
|
@ -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,
|
||||
})}
|
||||
|
@ -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>
|
||||
|
@ -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)} />
|
||||
|
@ -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={{
|
||||
|
@ -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}>
|
||||
|
@ -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"
|
||||
|
@ -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,
|
||||
})}
|
||||
>
|
||||
|
@ -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"
|
||||
|
@ -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),
|
||||
})}
|
||||
/>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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}
|
||||
|
@ -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,
|
||||
})}
|
||||
>
|
||||
|
@ -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 }) => (
|
||||
|
@ -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={{
|
||||
|
@ -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",
|
||||
|
@ -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>
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user