chore: datepicker 移动端样式优化 (#3325)

* fix: 修复 crud 中放 form 里面的 combo 填充不正确的问题 (#3251)

* 发布新版本

* fix: 修复 crud 中放 form 里面的 combo 填充不正确的问题

* bugfix:button样式,移动端embed不展示picker选择,兼容移动端选择框样式

Co-authored-by: liaoxuezhi <liaoxuezhi@baidu.com>

scss/components/_picker-columns.scss

@@ -22,7 +22,7 @@
     height: 100%;
     padding: var(--PickerColumns-action-padding);
     font-size: var(--PickerColumns-action-fontSize);
-    background-color: none !important;
+    background-color: transparent !important;
     border: none;
     cursor: pointer;
 
@@ -35,11 +35,11 @@
   }
 
   &-confirm {
-    color: var(--PickerColumns-confirmAction-color);
+    color: var(--PickerColumns-confirmAction-color) !important;
   }
 
   &-cancel {
-    color: var(--PickerColumns-cancelAction-color);
+    color: var(--PickerColumns-cancelAction-color) !important;
   }
 
   &-title {

scss/components/form/_date.scss

@@ -126,6 +126,39 @@
   height: px2rem(300px);
 }
 
+// 移动端输入框样式
+.#{$ns}DatePicker.is-mobile {
+  border: 0;
+  justify-content: flex-end;
+
+  span,
+  a {
+    &:focus {
+      outline: unset;
+    }
+  }
+
+  .#{$ns}DatePicker-value,
+  .#{$ns}DatePicker-clear {
+    display: inline-flex;
+    justify-content: flex-end;
+    padding: 0 0;
+  }
+
+  .#{$ns}DatePicker-value {
+    margin-right: var(--gap-xs);
+  }
+
+  .#{$ns}DatePicker-placeholder {
+    flex-grow: unset;
+    flex-basis: unset;
+  }
+
+  .#{$ns}DatePicker-toggler {
+    margin-top: -3px;
+  }
+}
+
 .#{$ns}DatePicker-popup.#{$ns}DatePicker-mobile {
   color: red;
   .rdt {

src/components/DatePicker.tsx

@@ -288,8 +288,9 @@ export interface DateProps extends LocaleProps, ThemeProps {
   scheduleClassNames?: Array<string>;
   largeMode?: boolean;
   onScheduleClick?: (scheduleData: any) => void;
-
   useMobileUI?: boolean;
+  // 在移动端日期展示有多种形式，一种是picker 滑动选择，一种是日历展开选择，mobileCalendarMode为calendar表示日历展开选择
+  mobileCalendarMode?: 'picker' | 'calendar';
 
   // 下面那个千万不要写，写了就会导致 keyof DateProps 得到的结果是 string | number;
   // [propName: string]: any;
@@ -571,7 +572,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
       schedules,
       largeMode,
       scheduleClassNames,
-      onScheduleClick
+      onScheduleClick,
+      mobileCalendarMode
     } = this.props;
 
     const __ = this.props.translate;
@@ -628,6 +630,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
             schedules={schedulesData}
             largeMode={largeMode}
             onScheduleClick={onScheduleClick}
+            embed={embed}
             useMobileUI={useMobileUI}
           />
         </div>
@@ -645,7 +648,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
           {
             'is-disabled': disabled,
             'is-focused': this.state.isFocused,
-            [`DatePicker--border${ucFirst(borderMode)}`]: borderMode
+            [`DatePicker--border${ucFirst(borderMode)}`]: borderMode,
+            'is-mobile': useMobileUI && isMobile()
           },
           className
         )}
@@ -718,7 +722,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
             showClose={false}
             onHide={this.handleClick}
           >
-            {this.renderShortCuts(shortcuts)}
+            {mobileCalendarMode === 'calendar' && this.renderShortCuts(shortcuts)}
 
             <Calendar
               value={date}

src/components/calendar/Calendar.tsx

@@ -57,6 +57,7 @@ interface BaseDatePickerProps
   hideHeader?: boolean;
   updateOn?: string;
   useMobileUI?: boolean;
+  embed?: boolean;
   showToolbar?: boolean;
 }