fix: 移动端： 城市选择器数据结构调整、日期弹层高度优化、PopUp按钮样式修改 (#3313)

* fix: useMobileUI接受位置修改

* fix：移动端禁用inline模式

* feat: 移动端城市选择器优化

* fix: 颜色选择器移动端禁止输入否则键盘和popup冲突

* fix: 弹出框高度调整

* fix: 去除标题

* fix: 禁止focus选中

* Update _picker-columns.scss

* Update _picker-columns.scss

* fix: 修复城市选择器适配picker数据结构变化

* fix: 日期弹出层高度修改

* fix: PopUp按钮统一使用text形式

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

scss/_properties.scss

@@ -1100,7 +1100,7 @@
   --PickerColumns-title-lineHeight: 1.5;
   --PickerColumns-action-padding: 0 var(--gap-md);
   --PickerColumns-action-fontSize: var(--fontSizeLg);
-  --PickerColumns-confirmAction-color: #2468F2;
+  --PickerColumns-confirmAction-color: #2468f2;
   --PickerColumns-cancelAction-color: #666;
   --PickerColumns-option-fontSize: var(--fontSizeLg);
   --PickerColumns-optionText-color: var(--text-color);
@@ -1112,6 +1112,8 @@
   --PopOverAble-iconColor: inherit;
   --PopOverAble-onHover-iconColor: inherit;
 
+  --PopUp-cancelAction-color: #666;
+
   --Property-title-bg: #f2f2f2;
   --Property-label-bg: #f7f7f7;
 

scss/components/_cascader.scss

@@ -95,4 +95,8 @@
   &-tab {
     padding: 0;
   }
+
+  &-btnCancel {
+    color: var(--PopUp-cancelAction-color);
+  }
 }

scss/components/_popup.scss

@@ -105,6 +105,7 @@
   }
 
   &-cancel {
+    color: var(--PopUp-cancelAction-color);
     margin-left: var(--gap-sm);
   }
 

scss/components/form/_date-range.scss

@@ -128,7 +128,7 @@
 }
 
 .#{$ns}DateRangePicker-popup {
-   height: 90vh;
+  height: px2rem(400px);
 }
 
 @include media-breakpoint-up(sm) {

scss/components/form/_date.scss

@@ -123,7 +123,7 @@
 }
 
 .#{$ns}DatePicker-popup {
-  height: 80vh;
+  height: px2rem(300px);
 }
 
 .#{$ns}DatePicker-popup.#{$ns}DatePicker-mobile {

src/components/Cascader.tsx

@@ -114,7 +114,6 @@ export class Cascader extends React.Component<CascaderProps, CascaderState> {
     });
   }
 
-
   @autobind
   handleTabSelect(index: number) {
     const tabs = this.state.tabs.slice(0, index + 1);
@@ -543,14 +542,14 @@ export class Cascader extends React.Component<CascaderProps, CascaderState> {
         <div className={cx(`Cascader-btnGroup`)}>
           <Button
             className={cx(`Cascader-btnCancel`)}
-            level="default"
+            level="text"
             onClick={onClose}
           >
             {__('cancel')}
           </Button>
           <Button
             className={cx(`Cascader-btnConfirm`)}
-            level="primary"
+            level="text"
             onClick={this.confirm}
           >
             {__('confirm')}

src/components/CityArea.tsx

@@ -8,7 +8,6 @@ import ResultBox from './ResultBox';
 import {useSetState, useUpdateEffect} from '../hooks';
 import {localeable, LocaleProps} from '../locale';
 import {themeable, ThemeProps} from '../theme';
-import {Icon} from './icons';
 import {uncontrollable} from 'uncontrollable';
 import PopUp from './PopUp';
 import {PickerObjectOption} from './PickerColumn';
@@ -101,16 +100,12 @@ const CityArea = memo<AreaProps>(props => {
   });
   const [isOpened, setIsOpened] = useState(false);
 
-  const onChange = (
-    columnValues: Array<AreaColumnOption>,
-    columnIndex: number
-  ) => {
-    values[columnIndex] = columnValues[columnIndex]?.value;
+  const onChange = (columnValues: Array<number>, columnIndex: number) => {
     // 清空后面的值
-    while (values[columnIndex++]) {
-      values[columnIndex++] = -1;
+    while (columnValues[columnIndex++]) {
+      columnValues[columnIndex++] = -1;
     }
-    let [provience, city, district] = values;
+    let [provience, city, district] = columnValues;
     if (city === -1) {
       city = db.city?.[provience]?.[0];
     }

src/components/PopUp.tsx

@@ -56,19 +56,15 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
     if (this.props.isShow) {
       this.scrollTop =
         document.body.scrollTop || document.documentElement.scrollTop;
-      document.body.style.overflow =
-        'hidden';
+      document.body.style.overflow = 'hidden';
     } else {
-      document.body.style.overflow =
-        'auto';
-      document.body.scrollTop =
-        this.scrollTop;
+      document.body.style.overflow = 'auto';
+      document.body.scrollTop = this.scrollTop;
     }
   }
   componentWillUnmount() {
     document.body.style.overflow = 'auto';
-    document.body.scrollTop =
-      this.scrollTop;
+    document.body.scrollTop = this.scrollTop;
   }
   handleClick(e: React.MouseEvent) {
     e.stopPropagation();
@@ -128,7 +124,7 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
                     <div className={cx(`${ns}PopUp-toolbar`)}>
                       <Button
                         className={cx(`${ns}PopUp-cancel`)}
-                        level="default"
+                        level="text"
                         onClick={onHide}
                       >
                         {__('cancel')}
@@ -138,7 +134,7 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
                       )}
                       <Button
                         className={cx(`${ns}PopUp-confirm`)}
-                        level="primary"
+                        level="text"
                         onClick={onConfirm}
                       >
                         {__('confirm')}