feat: remove extra div

DouyinFE · Aug 20, 2024 · d55b9ba · d55b9ba
1 parent aca709d
commit d55b9ba
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 27 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-block;
+ display: inline-flex;
 
  &-container {
  display: flex;

diff --git a/packages/semi-ui/datePicker/_story/DatePickerSlot/index.jsx b/packages/semi-ui/datePicker/_story/DatePickerSlot/index.jsx
@@ -44,6 +44,22 @@ export default function Demo() {
  );
  };
 
+ const LeftSlot = function (props) {
+ const { style } = props;
+ return (
+ <div>LeftSlot</div>
+ );
+ };
+
+ const RightSlot = function (props) {
+ const { style } = props;
+ return (
+ <Space style={{ padding: '12px 20px', ...style }}>
+ <div>RightSlot</div>
+ </Space>
+ );
+ };
+
  const MonthBottomSlot = function (props) {
  const { style } = props;
  return (
@@ -60,7 +76,7 @@ export default function Demo() {
  return (
  <div>
  <span>topSlot</span>
- <DatePicker topSlot={<TopSlot />} disabledDate={disabledDate} value={date} onChange={handleDateChange} />
+ <DatePicker topSlot={<TopSlot />} leftSlot={<LeftSlot />} rightSlot={<RightSlot/>} disabledDate={disabledDate} value={date} onChange={handleDateChange} />
  <br />
  <br />
  <span>bottomSlot</span>

diff --git a/packages/semi-ui/datePicker/datePicker.tsx b/packages/semi-ui/datePicker/datePicker.tsx
@@ -761,36 +761,34 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
 
  return (
  <div ref={this.panelRef} className={wrapCls} style={dropdownStyle} x-type={type}>
- <div className={`${cssClasses.PREFIX}-container`}>
- {leftSlot && (
- <div className={`${cssClasses.PREFIX}-leftSlot`} x-semi-prop="leftSlot">
- {leftSlot}
+ {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>
  )}
- <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}
+ {/* 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>
+ )}
  {this.renderFooter(locale, localeCode)}
  </div>
  );