fix: Fix the problem that DatePicker width cannot be set. Affected ve…

…rsion 2.65.0-beta.0
DouyinFE · Aug 23, 2024 · e37263b · e37263b
1 parent 22a36be
commit e37263b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 24 deletions.
diff --git a/packages/semi-foundation/datePicker/datePicker.scss b/packages/semi-foundation/datePicker/datePicker.scss
@@ -6,7 +6,7 @@ $module-list: #{$prefix}-scrolllist;
 
 .#{$module} {
     box-sizing: border-box;
-    display: inline-flex;
+    display: inline-block;
 
     &-container {
         display: flex;

diff --git a/packages/semi-ui/datePicker/datePicker.tsx b/packages/semi-ui/datePicker/datePicker.tsx
@@ -761,34 +761,36 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
 
         return (
             <div ref={this.panelRef} className={wrapCls} style={dropdownStyle} x-type={type}>
-                {leftSlot && (
-                    <div className={`${cssClasses.PREFIX}-leftSlot`} x-semi-prop="leftSlot">
-                        {leftSlot}
-                    </div>
-                )}
-                <div>
-                    {topSlot && (
-                        <div className={`${cssClasses.PREFIX}-topSlot`} x-semi-prop="topSlot">
-                            {topSlot}
+                <div className={`${cssClasses.PREFIX}-container`}>
+                    {leftSlot && (
+                        <div className={`${cssClasses.PREFIX}-leftSlot`} x-semi-prop="leftSlot">
+                            {leftSlot}
                         </div>
                     )}
-                    {/* todo: monthRange does not support presetPosition temporarily */}
-                    {presetPosition === "top" && type !== 'monthRange' && this.renderQuickControls()}
-                    {this.adapter.typeIsYearOrMonth()
-                        ? this.renderYearMonthPanel(locale, localeCode)
-                        : this.renderMonthGrid(locale, localeCode, dateFnsLocale)}
-                    {presetPosition === "bottom" && type !== 'monthRange' && this.renderQuickControls()}
-                    {bottomSlot && (
-                        <div className={`${cssClasses.PREFIX}-bottomSlot`} x-semi-prop="bottomSlot">
-                            {bottomSlot}
+                    <div>
+                        {topSlot && (
+                            <div className={`${cssClasses.PREFIX}-topSlot`} x-semi-prop="topSlot">
+                                {topSlot}
+                            </div>
+                        )}
+                        {/* todo: monthRange does not support presetPosition temporarily */}
+                        {presetPosition === "top" && type !== 'monthRange' && this.renderQuickControls()}
+                        {this.adapter.typeIsYearOrMonth()
+                            ? this.renderYearMonthPanel(locale, localeCode)
+                            : this.renderMonthGrid(locale, localeCode, dateFnsLocale)}
+                        {presetPosition === "bottom" && type !== 'monthRange' && this.renderQuickControls()}
+                        {bottomSlot && (
+                            <div className={`${cssClasses.PREFIX}-bottomSlot`} x-semi-prop="bottomSlot">
+                                {bottomSlot}
+                            </div>
+                        )}
+                    </div>
+                    {rightSlot && (
+                        <div className={`${cssClasses.PREFIX}-rightSlot`} x-semi-prop="rightSlot">
+                            {rightSlot}
                         </div>
                     )}
                 </div>
-                {rightSlot && (
-                    <div className={`${cssClasses.PREFIX}-rightSlot`} x-semi-prop="rightSlot">
-                        {rightSlot}
-                    </div>
-                )}
                 {this.renderFooter(locale, localeCode)}
             </div>
         );