diff --git a/.changeset/fix-react-warnings-and-style.md b/.changeset/fix-react-warnings-and-style.md new file mode 100644 index 00000000..5bf69a41 --- /dev/null +++ b/.changeset/fix-react-warnings-and-style.md @@ -0,0 +1,5 @@ +--- +"@tiny-design/react": patch +--- + +Fix React warnings (missing keys, nested buttons, DOM attribute leaks, setState during render, infinite loop) and Alert title margin diff --git a/packages/react/src/alert/alert.tsx b/packages/react/src/alert/alert.tsx index 5de2fd20..a5d26386 100755 --- a/packages/react/src/alert/alert.tsx +++ b/packages/react/src/alert/alert.tsx @@ -41,7 +41,7 @@ const Alert = React.forwardRef((props, forwardedRef) const closeBtnOnClick = (e: React.MouseEvent): void => { ref.current && setClosedStyle(ref.current as HTMLDivElement); setShow(false); - onClose && onClose(e); + onClose?.(e); }; // Setting close text attribute also allows to be closable @@ -77,7 +77,7 @@ const Alert = React.forwardRef((props, forwardedRef) }}> {icon && renderIcon()}
- {title &&

{title}

} + {title &&

{title}

} {children}
{closeIcon} diff --git a/packages/react/src/alert/style/_index.scss b/packages/react/src/alert/style/_index.scss index 2e4d0402..5094ae3b 100755 --- a/packages/react/src/alert/style/_index.scss +++ b/packages/react/src/alert/style/_index.scss @@ -22,9 +22,13 @@ &__title { box-sizing: border-box; - margin: 0 0 5px; - font-size: 18px; + margin: 0; + font-size: 17px; font-weight: 500; + + &_has-content { + margin-bottom: 5px; + } } &__desc { diff --git a/packages/react/src/collapse/__tests__/__snapshots__/collapse.test.tsx.snap b/packages/react/src/collapse/__tests__/__snapshots__/collapse.test.tsx.snap index 8d965d8b..28e3c24e 100644 --- a/packages/react/src/collapse/__tests__/__snapshots__/collapse.test.tsx.snap +++ b/packages/react/src/collapse/__tests__/__snapshots__/collapse.test.tsx.snap @@ -8,33 +8,34 @@ exports[` should match the snapshot 1`] = `
- + + + +
+ Panel 1 +
+ +
should match the snapshot 1`] = `
- + + + +
+ Panel 2 +
+ +
{ [`${prefixCls}__arrow_active`]: active, }); + const hasExtra = deletable || extra; + return ( - +
+ + {hasExtra && ( +
+ {deletable ? ✕ : richNode(extra, active)} +
+ )} +
); }; diff --git a/packages/react/src/collapse/style/_index.scss b/packages/react/src/collapse/style/_index.scss index 402c4af6..8f98e3cb 100755 --- a/packages/react/src/collapse/style/_index.scss +++ b/packages/react/src/collapse/style/_index.scss @@ -27,17 +27,9 @@ align-items: center; box-sizing: border-box; position: relative; - padding: 12px 16px; color: var(--ty-color-text); line-height: 22px; - cursor: pointer; transition: all 300ms; - background: none; - border: none; - width: 100%; - text-align: left; - font-size: inherit; - font-family: inherit; &:hover { background-color: var(--ty-collapse-header-hover-bg); @@ -49,11 +41,33 @@ } } + &__toggle { + display: flex; + align-items: center; + flex: 1; + min-width: 0; + box-sizing: border-box; + padding: 12px 16px; + cursor: pointer; + background: none; + border: none; + width: 100%; + text-align: left; + font-size: inherit; + font-family: inherit; + color: inherit; + line-height: inherit; + } + + &__header_disabled &__toggle { + cursor: not-allowed; + } + &__arrow { margin-right: 10px; transform: rotate(-90deg); text-align: center; - color: currentColor; + color: currentcolor; transition: all 300ms; &_active { @@ -66,9 +80,12 @@ } &__extra { + display: flex; + align-items: center; color: inherit; font-size: 11px; - margin-left: 15px; + padding-right: 16px; + margin-left: auto; } &__content { diff --git a/packages/react/src/input-otp/input-otp.tsx b/packages/react/src/input-otp/input-otp.tsx index dbb4fd3d..408e4985 100644 --- a/packages/react/src/input-otp/input-otp.tsx +++ b/packages/react/src/input-otp/input-otp.tsx @@ -85,16 +85,14 @@ const InputOTP = React.forwardRef( // Trigger onChange when value cells change const triggerValueCellsChange = useCallback( (nextValueCells: string[]) => { - setValueCells((prev) => { - const prevValue = prev.join(''); - const nextValue = nextValueCells.join(''); - if (onChange && prevValue !== nextValue) { - onChange(nextValue); - } - return nextValueCells; - }); + const prevValue = valueCells.join(''); + const nextValue = nextValueCells.join(''); + setValueCells(nextValueCells); + if (onChange && prevValue !== nextValue) { + onChange(nextValue); + } }, - [onChange] + [onChange, valueCells] ); // Patch value at given index diff --git a/packages/react/src/list/list.tsx b/packages/react/src/list/list.tsx index e9e15759..d16a0a2f 100644 --- a/packages/react/src/list/list.tsx +++ b/packages/react/src/list/list.tsx @@ -85,7 +85,9 @@ const List = React.forwardRef((props, ref) => { } if (renderItem) { const [start, end] = visibleRange; - const visibleItems = dataSource.slice(start, end + 1).map((item, i) => renderItem(item, start + i)); + const visibleItems = dataSource.slice(start, end + 1).map((item, i) => ( + {renderItem(item, start + i)} + )); return (
@@ -106,7 +108,9 @@ const List = React.forwardRef((props, ref) => { ); } if (renderItem) { - const rendered = items.map((item, index) => renderItem(item, index)); + const rendered = items.map((item, index) => ( + {renderItem(item, index)} + )); if (grid) { return (
+ diff --git a/packages/react/src/strength-indicator/strength-indicator.tsx b/packages/react/src/strength-indicator/strength-indicator.tsx index f7a2ea1c..093969de 100755 --- a/packages/react/src/strength-indicator/strength-indicator.tsx +++ b/packages/react/src/strength-indicator/strength-indicator.tsx @@ -10,6 +10,7 @@ const StrengthIndicator = React.forwardRef
- {'labels' in props && ( + {showLabels && (
{displayLabels[idx]}
)}
diff --git a/packages/react/src/tag/tag.tsx b/packages/react/src/tag/tag.tsx index 6f9cd16b..48b41b7c 100644 --- a/packages/react/src/tag/tag.tsx +++ b/packages/react/src/tag/tag.tsx @@ -7,6 +7,7 @@ import { PresetColors, TagProps } from './types'; const Tag = React.memo(forwardRef((props, ref) => { const { closable = false, + visible: visibleProp, defaultVisible = true, prefixCls: customisedCls, color, @@ -18,7 +19,7 @@ const Tag = React.memo(forwardRef((props, ref) => { ...otherProps } = props; const [visible, setVisible] = useState( - 'visible' in props ? (props.visible as boolean) : defaultVisible + visibleProp !== undefined ? visibleProp : defaultVisible ); const configContext = useContext(ConfigContext); const prefixCls = getPrefixCls('tag', configContext.prefixCls, customisedCls); @@ -37,7 +38,7 @@ const Tag = React.memo(forwardRef((props, ref) => { if (e.defaultPrevented) { return; } - !('visible' in props) && setVisible(false); + visibleProp === undefined && setVisible(false); }; const tagStyle: React.CSSProperties = { @@ -48,8 +49,8 @@ const Tag = React.memo(forwardRef((props, ref) => { }; useEffect(() => { - 'visible' in props && setVisible(props.visible as boolean); - }, [props]); + if (visibleProp !== undefined) setVisible(visibleProp); + }, [visibleProp]); return (
diff --git a/packages/react/src/waterfall/waterfall.tsx b/packages/react/src/waterfall/waterfall.tsx index 710b02ef..923b831a 100644 --- a/packages/react/src/waterfall/waterfall.tsx +++ b/packages/react/src/waterfall/waterfall.tsx @@ -102,6 +102,8 @@ const Waterfall = React.forwardRef((props, ref) }, [items, collectItemSizes]); // ================ onLayoutChange ================ + const prevLayoutRef = useRef(''); + useEffect(() => { if (!onLayoutChange || !items || items.length === 0) return; @@ -112,6 +114,11 @@ const Waterfall = React.forwardRef((props, ref) key: item.key, column: itemPositions.get(item.key)!.column, })); + + const layoutKey = sortInfo.map((s) => `${s.key}:${s.column}`).join(','); + if (layoutKey === prevLayoutRef.current) return; + prevLayoutRef.current = layoutKey; + onLayoutChange(sortInfo); }, [itemPositions, items, onLayoutChange]);