Skip to content

fix: 移除不必要的 fragment 元素 #2587

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oasis-cloud merged 1 commit into from
Sep 12, 2024
Merged

fix: 移除不必要的 fragment 元素 #2587

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 9 additions & 13 deletions src/packages/audio/audio.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,20 +168,16 @@ export const Audio: FunctionComponent<

const renderIcon = () => {
return (
<>
<div className={`${classPrefix}-icon`}>
<div
className={`${classPrefix}-icon-box} ${
playing
? `${classPrefix}-icon-play}`
: `${classPrefix}-icon-stop}`
}`}
onClick={handleStatusChange}
>
<Service className={playing ? 'nut-icon-loading' : ''} />
</div>
<div className={`${classPrefix}-icon`}>
<div
className={`${classPrefix}-icon-box} ${
playing ? `${classPrefix}-icon-play}` : `${classPrefix}-icon-stop}`
}`}
onClick={handleStatusChange}
>
<Service className={playing ? 'nut-icon-loading' : ''} />
</div>
</>
</div>
)
}

Expand Down
66 changes: 31 additions & 35 deletions src/packages/avatarcropper/avatarcropper.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -661,50 +661,46 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
const ToolBar = () => {
const actions = [cancel, reset, rotate, confirm]
return (
<>
<div className={`${classPrefix}-popup-toolbar-flex`}>
{actions.map((action, index) => (
<div
key={index}
className={`${classPrefix}-popup-toolbar-item`}
onClick={(_e) => action()}
>
{toolbar[index]}
</div>
))}
</div>
</>
<div className={`${classPrefix}-popup-toolbar-flex`}>
{actions.map((action, index) => (
<div
key={index}
className={`${classPrefix}-popup-toolbar-item`}
onClick={(_e) => action()}
>
{toolbar[index]}
</div>
))}
</div>
)
}

const CropperPopup = () => {
const { canvasId } = canvasAll
return (
<>
<div
className={`${classPrefix}-popup`}
style={{ display: visible ? 'block' : 'none' }}
>
<Canvas
id={canvasId}
canvas-id={canvasId}
type={showAlipayCanvas2D ? '2d' : undefined}
style={canvasStyle}
className={`${classPrefix}-popup-canvas`}
/>
<div
className={`${classPrefix}-popup`}
style={{ display: visible ? 'block' : 'none' }}
className={`${classPrefix}-popup-highlight`}
onTouchStart={onTouchStart}
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
>
<Canvas
id={canvasId}
canvas-id={canvasId}
type={showAlipayCanvas2D ? '2d' : undefined}
style={canvasStyle}
className={`${classPrefix}-popup-canvas`}
/>
<div
className={`${classPrefix}-popup-highlight`}
onTouchStart={onTouchStart}
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
>
<div className="highlight" style={highlightStyle} />
</div>
<div className={toolbarPositionCls}>
<ToolBar />
</div>
<div className="highlight" style={highlightStyle} />
</div>
</>
<div className={toolbarPositionCls}>
<ToolBar />
</div>
</div>
)
}

Expand Down
56 changes: 26 additions & 30 deletions src/packages/avatarcropper/avatarcropper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -423,44 +423,40 @@ export const AvatarCropper: FunctionComponent<Partial<AvatarCropperProps>> = (
const ToolBar = () => {
const actions = [cancel, reset, rotate, confirm]
return (
<>
<div className={`${classPrefix}-popup-toolbar-flex`}>
{actions.map((action, index) => (
<div
key={index}
className={`${classPrefix}-popup-toolbar-item`}
onClick={(_e) => action()}
>
{toolbar[index]}
</div>
))}
</div>
</>
<div className={`${classPrefix}-popup-toolbar-flex`}>
{actions.map((action, index) => (
<div
key={index}
className={`${classPrefix}-popup-toolbar-item`}
onClick={(_e) => action()}
>
{toolbar[index]}
</div>
))}
</div>
)
}

const CropperPopup = () => {
return (
<>
<div
ref={cropperPopupRef}
className={`${classPrefix}-popup`}
style={{ display: visible ? 'block' : 'none' }}
>
<canvas ref={canvasRef} className={`${classPrefix}-popup-canvas`} />
<div
ref={cropperPopupRef}
className={`${classPrefix}-popup`}
style={{ display: visible ? 'block' : 'none' }}
className={`${classPrefix}-popup-highlight`}
onTouchStart={onTouchStart}
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
>
<canvas ref={canvasRef} className={`${classPrefix}-popup-canvas`} />
<div
className={`${classPrefix}-popup-highlight`}
onTouchStart={onTouchStart}
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
>
<div className="highlight" style={highlightStyle} />
</div>
<div className={toolbarPositionCls}>
<ToolBar />
</div>
<div className="highlight" style={highlightStyle} />
</div>
</>
<div className={toolbarPositionCls}>
<ToolBar />
</div>
</div>
)
}

Expand Down
12 changes: 5 additions & 7 deletions src/packages/calendaritem/calendaritem.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -884,13 +884,11 @@ export const CalendarItem = React.forwardRef<
}

return (
<>
<div className={classes} style={style}>
{renderHeader()}
{renderContent()}
{popup && !autoBackfill ? renderFooter() : ''}
</div>
</>
<div className={classes} style={style}>
{renderHeader()}
{renderContent()}
{popup && !autoBackfill ? renderFooter() : ''}
</div>
)
})

Expand Down
12 changes: 5 additions & 7 deletions src/packages/calendaritem/calendaritem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -883,13 +883,11 @@ export const CalendarItem = React.forwardRef<
}

return (
<>
<div className={classes} style={style}>
{renderHeader()}
{renderContent()}
{popup && !autoBackfill ? renderFooter() : ''}
</div>
</>
<div className={classes} style={style}>
{renderHeader()}
{renderContent()}
{popup && !autoBackfill ? renderFooter() : ''}
</div>
)
})

Expand Down
42 changes: 20 additions & 22 deletions src/packages/ellipsis/ellipsis.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,28 +358,26 @@ export const Ellipsis: FunctionComponent<
</View>
) : null}
{exceeded && expanded ? (
<>
<View
style={{
width: `${
!Number.isNaN(Number(width)) ? `${width}px` : 'auto'
}`,
}}
>
{content}
{expandText ? (
<span
className="nut-ellipsis-text"
onClick={(e) => {
e.stopPropagation()
clickHandle(2)
}}
>
{collapseText}
</span>
) : null}
</View>
</>
<View
style={{
width: `${
!Number.isNaN(Number(width)) ? `${width}px` : 'auto'
}`,
}}
>
{content}
{expandText ? (
<span
className="nut-ellipsis-text"
onClick={(e) => {
e.stopPropagation()
clickHandle(2)
}}
>
{collapseText}
</span>
) : null}
</View>
) : null}
</View>
</div>
Expand Down
26 changes: 12 additions & 14 deletions src/packages/inputnumber/inputnumber.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,20 +248,18 @@ export const InputNumber: FunctionComponent<
})}
/>
</div>
<>
<input
className="nut-number-input"
type={type}
ref={inputRef}
inputMode={type === 'digit' ? 'decimal' : 'numeric'}
disabled={disabled}
readOnly={readOnly}
value={inputValue}
onInput={handleInputChange}
onBlur={handleBlur}
onFocus={handleFocus}
/>
</>
<input
className="nut-number-input"
type={type}
ref={inputRef}
inputMode={type === 'digit' ? 'decimal' : 'numeric'}
disabled={disabled}
readOnly={readOnly}
value={inputValue}
onInput={handleInputChange}
onBlur={handleBlur}
onFocus={handleFocus}
/>
<div className="nut-input-add" onClick={handlePlus}>
<Plus
className={classNames('nut-inputnumber-icon icon-plus', {
Expand Down
22 changes: 10 additions & 12 deletions src/packages/inputnumber/inputnumber.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,18 +244,16 @@ export const InputNumber: FunctionComponent<
})}
/>
</div>
<>
<input
ref={inputRef}
inputMode="decimal"
disabled={disabled}
readOnly={readOnly}
value={inputValue}
onInput={handleInputChange}
onBlur={handleBlur}
onFocus={handleFocus}
/>
</>
<input
ref={inputRef}
inputMode="decimal"
disabled={disabled}
readOnly={readOnly}
value={inputValue}
onInput={handleInputChange}
onBlur={handleBlur}
onFocus={handleFocus}
/>
<div className="nut-input-add" onClick={handlePlus}>
<Plus
className={classNames('nut-inputnumber-icon icon-plus', {
Expand Down
4 changes: 1 addition & 3 deletions src/packages/layout/layout.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import React, { FunctionComponent } from 'react'

export interface LayoutProps {}
const defaultProps = {} as LayoutProps
export const Layout: FunctionComponent<
Partial<LayoutProps> & React.HTMLAttributes<HTMLDivElement>
> = (props) => {
const { children } = { ...defaultProps, ...props }
> = () => {
return <div className="nut-layout">Layout</div>
}
Comment on lines +6 to 8

@coderabbitai coderabbitai Bot Sep 12, 2024

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

考虑保留组件的灵活性

当前的修改使 Layout 组件变得过于简单，失去了灵活性。它不再接受任何属性或子元素，这可能会影响组件在更大的应用程序上下文中的预期用途。

建议保留 defaultProps 和 children 的处理，以允许组件接受自定义属性和子元素。这将确保组件的可重用性，并减少对现有代码的潜在破坏。

如果你的目标是优化包体积，可以考虑使用条件渲染或其他技术，而不是完全移除组件的功能。


Expand Down
4 changes: 1 addition & 3 deletions src/packages/layout/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import React, { FunctionComponent } from 'react'

export interface LayoutProps {}
const defaultProps = {} as LayoutProps
export const Layout: FunctionComponent<
Partial<LayoutProps> & React.HTMLAttributes<HTMLDivElement>
> = (props) => {
const { children } = { ...defaultProps, ...props }
> = () => {
return <div className="nut-layout">Layout</div>
}
Comment on lines +6 to 8

@coderabbitai coderabbitai Bot Sep 12, 2024

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

重大改变：请说明组件简化的理由以及对可重用性的影响。

这次改动将 Layout 组件从一个可能是可重用的布局组件转变为一个静态组件。移除了 LayoutProps 和 defaultProps，表明该组件不再接受或利用任何自定义属性。

请说明做出这些改变的理由。这个组件现在的预期用途是什么？它还能在其他地方重用吗？如果不能，那么将其保留在组件库中是否还有意义？

我建议重新评估这个组件的设计，要么恢复其可配置性和可重用性，要么考虑将其从组件库中移除，因为静态的 <div> 元素可能不需要封装在一个单独的组件中。


Expand Down
Loading