diff --git a/docs/theme/components/style.ts b/docs/theme/components/style.ts index 121d7cca5..8c59c5c33 100644 --- a/docs/theme/components/style.ts +++ b/docs/theme/components/style.ts @@ -109,12 +109,17 @@ export default createUseStyles( display: 'flex', marginTop: top, position: 'relative', + overflow: 'auto', '& .examples': { flex: 1, - minWidth: 0, + minWidth: 800, }, '& .anchor': { width: 192, + + '@media (max-width: 1200px)': { + display: 'none', + }, }, }, guide: { diff --git a/package.json b/package.json index 53a75e0cc..5c875bda3 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "sheinx", "private": true, - "version": "3.5.8-beta.7", + "version": "3.5.8-beta.8", "description": "A react library developed with sheinx", "module": "dist/index.js", "types": "dist/index.d.ts", diff --git a/packages/base/src/alert/alert.tsx b/packages/base/src/alert/alert.tsx index 817e210c9..4c9d5cc58 100644 --- a/packages/base/src/alert/alert.tsx +++ b/packages/base/src/alert/alert.tsx @@ -19,6 +19,7 @@ const Alert = (props: AlertProps) => { children, icon, title, + titleStyle, iconSize, closable, hideClose, @@ -75,7 +76,7 @@ const Alert = (props: AlertProps) => { }; const renderIcon = () => { - const style: { width?: number } = {}; + const style: React.CSSProperties = titleStyle || {} if (iconSize) { style.width = iconSize; } @@ -91,7 +92,7 @@ const Alert = (props: AlertProps) => { }; const renderTitle = () => { - return
{title}
; + return
{title}
; }; const renderClose = () => { diff --git a/packages/base/src/alert/alert.type.ts b/packages/base/src/alert/alert.type.ts index 6a0366dfe..4a2ada0c3 100644 --- a/packages/base/src/alert/alert.type.ts +++ b/packages/base/src/alert/alert.type.ts @@ -64,6 +64,13 @@ export interface AlertProps extends Pick { * @cn 标题模式 */ title?: React.ReactNode; + + /** + * @en The style of the title + * @cn 标题样式 + * @private + */ + titleStyle?: React.CSSProperties; /** * @en Whether to display the close button, when set to only, only the close button is displayed * @cn 是否可以关闭Alert，当设置为only的时候，点击按钮不会自动隐藏Alert diff --git a/packages/base/src/popover/confirm.tsx b/packages/base/src/popover/confirm.tsx index 77cfc5c14..fd1fec5f4 100644 --- a/packages/base/src/popover/confirm.tsx +++ b/packages/base/src/popover/confirm.tsx @@ -67,6 +67,7 @@ const Confirm = (props: PopoverConfirmProps) => { jssStyle={jssStyle} type={type as any} title={title} + titleStyle={{ fontSize: 14 }} icon={icon} > {children} diff --git a/packages/hooks/src/components/use-table/use-table-virtual.tsx b/packages/hooks/src/components/use-table/use-table-virtual.tsx index a9e989372..d74ddc402 100644 --- a/packages/hooks/src/components/use-table/use-table-virtual.tsx +++ b/packages/hooks/src/components/use-table/use-table-virtual.tsx @@ -1,5 +1,5 @@ import { usePersistFn } from '../../common/use-persist-fn'; -import { useState, useRef, useEffect, useMemo, useLayoutEffect } from 'react'; +import { useState, useRef, useEffect, useMemo } from 'react'; import { TableFormatColumn } from './use-table.type'; // 找出最大的连续数字的个数 @@ -147,7 +147,7 @@ const useTableVirtual = (props: UseTableVirtualProps) => { } }); - const updateIndexAndTopFromTop = (scrollTop: number) => { + const updateIndexAndTopFromTop = (scrollTop: number, fromDrag?: boolean) => { if (props.disabled) return; let sum = 0; let currentIndex = 0; @@ -187,7 +187,7 @@ const useTableVirtual = (props: UseTableVirtualProps) => { setStartIndex(currentIndex); // startIndex处于上方某个合并行的中间一行时，可能引起translate闪烁 - if(startIndex < currentIndex){ + if(!fromDrag && startIndex < currentIndex){ context.autoAddRows = currentIndex - startIndex setTimeout(() => { context.autoAddRows = 0 @@ -252,7 +252,7 @@ const useTableVirtual = (props: UseTableVirtualProps) => { // 拖动滚动条 if (fromDrag) { const top = y * max; - updateIndexAndTopFromTop(top); + updateIndexAndTopFromTop(top, fromDrag); if (context.rateTimer) clearTimeout(context.rateTimer); context.rateTimer = setTimeout(() => { updateRateScroll(y); diff --git a/packages/shineout-style/src/alert/alert.ts b/packages/shineout-style/src/alert/alert.ts index fb527d154..624807318 100644 --- a/packages/shineout-style/src/alert/alert.ts +++ b/packages/shineout-style/src/alert/alert.ts @@ -60,16 +60,16 @@ const alertStyle: JsStyles = { }, widthTitle: { '& $icon': { + fontSize: Token.alertTitleFontSize, // marginBottom: Token.alertNearlyMargin, width: Token.alertTitleIconWidth, - height: Token.alertTitleIconHeight, + height: Token.lineHeightDynamic, }, '& $title': { lineHeight: Token.lineHeightDynamic, }, - '& $close': { - // marginBottom: Token.alertNearlyMargin, - // marginTop: 2, + '& $closeWrapper': { + fontSize: Token.alertTitleFontSize, }, }, title: { @@ -103,8 +103,9 @@ const alertStyle: JsStyles = { }, }, closeWrapper: { + fontSize: Token.alertFontSize, width: Token.alertFontSize, - height: `calc(${Token.lineHeightDynamic} + 2px)`, + height: Token.lineHeightDynamic, display: 'flex', alignItems: 'center', marginLeft: Token.alertNearlyMargin, diff --git a/packages/shineout-style/src/descriptions/descriptions.ts b/packages/shineout-style/src/descriptions/descriptions.ts index afd40e189..bb5b32089 100644 --- a/packages/shineout-style/src/descriptions/descriptions.ts +++ b/packages/shineout-style/src/descriptions/descriptions.ts @@ -168,6 +168,11 @@ const descriptionsStyle: JsStyles = { '& $item': { paddingBottom: 0, }, + '& $row': { + '& td:last-child': { + borderRight: 'none', + } + }, }, }; diff --git a/packages/shineout/src/descriptions/__example__/02-colums.tsx b/packages/shineout/src/descriptions/__example__/02-colums.tsx index b0c92456e..895b51983 100644 --- a/packages/shineout/src/descriptions/__example__/02-colums.tsx +++ b/packages/shineout/src/descriptions/__example__/02-colums.tsx @@ -24,7 +24,7 @@ const data = [ export default () => { return ( -
+ <> { column={1} labelStyle={{ textAlign: 'end' }} /> -
+ ); }; diff --git a/packages/shineout/src/descriptions/__example__/04-border.tsx b/packages/shineout/src/descriptions/__example__/04-border.tsx index 55684431c..c513f9fa1 100644 --- a/packages/shineout/src/descriptions/__example__/04-border.tsx +++ b/packages/shineout/src/descriptions/__example__/04-border.tsx @@ -39,7 +39,7 @@ export default () => { layout='horizontal' border tableLayout='fixed' - style={{ marginBottom: '20px' }} + style={{ marginBottom: 24 }} /> { border tableLayout='fixed' labelStyle={{ textAlign: 'end' }} - style={{ marginBottom: '20px' }} + style={{ marginBottom: 24 }} /> { border={border} labelStyle={{ marginBottom: layout === 'inlineVertical' ? '2px' : '', - paddingBottom: layout === 'vertical' ? '2px' : '', + paddingBottom: layout === 'vertical' && !border ? '2px' : '', }} /> diff --git a/packages/shineout/src/descriptions/__test__/__snapshots__/descriptions.spec.tsx.snap b/packages/shineout/src/descriptions/__test__/__snapshots__/descriptions.spec.tsx.snap index 7e44bed90..c512ee38c 100644 --- a/packages/shineout/src/descriptions/__test__/__snapshots__/descriptions.spec.tsx.snap +++ b/packages/shineout/src/descriptions/__test__/__snapshots__/descriptions.spec.tsx.snap @@ -820,7 +820,7 @@ exports[`Alert[Base] should render correctly about border 1`] = `
-
- User Info -
-
-
- - - - - - - - - - - - - - - -
- Name - - Mai Mai -
- Mobile - - 187-2323-9834 -
- Residence - - Beijing -
+ User Info
-
-
- User Info -
-
-
- - - + + - - - + - - - + + + - - - -
- - Name - - Mai Mai -
- - Mobile - - 187-2323-9834 -
- - Residence - - Beijing -
-
+ Mobile + + + 187-2323-9834 + + + + + Residence + + + Beijing + + + +
`; diff --git a/packages/shineout/src/empty/__doc__/guide.cn.md b/packages/shineout/src/empty/__doc__/guide.cn.md index a56e23c6b..dc1de4034 100644 --- a/packages/shineout/src/empty/__doc__/guide.cn.md +++ b/packages/shineout/src/empty/__doc__/guide.cn.md @@ -1,6 +1,6 @@ ## 何时使用 -当目前没有数据时，用于显式的用户提示 +### 当目前没有数据时，用于显式的用户提示 ## 组件搭配使用 diff --git a/packages/shineout/src/empty/__doc__/guide.en.md b/packages/shineout/src/empty/__doc__/guide.en.md index 0b3825c62..c4307fa4d 100644 --- a/packages/shineout/src/empty/__doc__/guide.en.md +++ b/packages/shineout/src/empty/__doc__/guide.en.md @@ -1,6 +1,6 @@ ## When to Use -Use this to explicitly prompt users when there is no data present. +### Use this to explicitly prompt users when there is no data present. ## Combination with Other Components diff --git a/packages/shineout/src/empty/__example__/004-status.tsx b/packages/shineout/src/empty/__example__/004-status.tsx index 28e9300fd..ea780c351 100644 --- a/packages/shineout/src/empty/__example__/004-status.tsx +++ b/packages/shineout/src/empty/__example__/004-status.tsx @@ -56,8 +56,7 @@ export default () => { display: 'flex', gap: 32, justifyContent: 'space-between', - flexWrap: 'nowrap', - overflow: 'auto', + flexWrap: 'wrap', }} > {renderIcon(noData, 'noData', 'No data')} @@ -72,8 +71,7 @@ export default () => { display: 'flex', gap: 32, justifyContent: 'space-between', - flexWrap: 'nowrap', - overflow: 'auto', + flexWrap: 'wrap', }} > {renderIcon(noDataColorful, 'noDataColorful', 'No data')} diff --git a/packages/shineout/src/form/__example__/001-base.tsx b/packages/shineout/src/form/__example__/001-base.tsx index 0f1fcaa52..93ecc27ce 100644 --- a/packages/shineout/src/form/__example__/001-base.tsx +++ b/packages/shineout/src/form/__example__/001-base.tsx @@ -66,8 +66,11 @@ export default () => { }} /> + + + -