日期时间范围,下拉增加popoverClassName属性,可以自定义弹框的className;父级有缩放比时弹框宽度计算问题修复; (#1954)

* 日期时间范围,下拉增加popoverClassName属性,可以自定义弹框的className;父级有缩放比时弹框宽度计算问题修复;

* 日期时间范围,下拉增加popoverClassName属性,可以自定义弹框的className;父级有缩放比时弹框宽度计算问题修复;

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

src/components/ColorPicker.tsx

@@ -21,6 +21,7 @@ export interface ColorProps extends LocaleProps, ThemeProps {
   // closeOnSelect:boolean;
   clearable: boolean;
   className?: string;
+  popoverClassName?: string;
   disabled?: boolean;
   popOverContainer?: any;
   placement?: string;
@@ -205,6 +206,7 @@ export class ColorControl extends React.PureComponent<
     const {
       classPrefix: ns,
       className,
+      popoverClassName,
       value,
       placeholder,
       disabled,
@@ -272,7 +274,7 @@ export class ColorControl extends React.PureComponent<
           >
             <PopOver
               classPrefix={ns}
-              className={cx('ColorPicker-popover')}
+              className={cx('ColorPicker-popover', popoverClassName)}
               onHide={this.close}
               overlay
             >

src/components/DatePicker.tsx

@@ -236,6 +236,7 @@ export type ShortCuts =
 export interface DateProps extends LocaleProps, ThemeProps {
   viewMode: 'years' | 'months' | 'days' | 'time' | 'quarters';
   className?: string;
+  popoverClassName?: string;
   placeholder?: string;
   inputFormat?: string;
   timeFormat?: string;
@@ -523,6 +524,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
       classPrefix: ns,
       classnames: cx,
       className,
+      popoverClassName,
       value,
       placeholder,
       disabled,
@@ -621,7 +623,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
           >
             <PopOver
               classPrefix={ns}
-              className={cx(`DatePicker-popover`)}
+              className={cx(`DatePicker-popover`, popoverClassName)}
               onHide={this.close}
               overlay
               onClick={this.handlePopOverClick}

src/components/DateRangePicker.tsx

@@ -20,6 +20,7 @@ import {LocaleProps, localeable} from '../locale';
 
 export interface DateRangePickerProps extends ThemeProps, LocaleProps {
   className?: string;
+  popoverClassName?: string;
   placeholder?: string;
   theme?: any;
   format: string;
@@ -677,6 +678,7 @@ export class DateRangePicker extends React.Component<
   render() {
     const {
       className,
+      popoverClassName,
       classPrefix: ns,
       value,
       placeholder,
@@ -774,7 +776,7 @@ export class DateRangePicker extends React.Component<
           >
             <PopOver
               classPrefix={ns}
-              className={`${ns}DateRangePicker-popover`}
+              className={cx(`${ns}DateRangePicker-popover`, popoverClassName)}
               onHide={this.close}
               onClick={this.handlePopOverClick}
               overlay

src/components/LocationPicker.tsx

@@ -22,6 +22,7 @@ export interface LocationProps extends ThemeProps, LocaleProps {
   };
   disabled?: boolean;
   className?: string;
+  popoverClassName?: string;
   onChange: (value: any) => void;
   popOverContainer?: any;
 }
@@ -130,6 +131,7 @@ export class LocationPicker extends React.Component<
       classnames: cx,
       value,
       className,
+      popoverClassName,
       disabled,
       placeholder,
       clearable,
@@ -184,7 +186,7 @@ export class LocationPicker extends React.Component<
           show={isOpened}
         >
           <PopOver
-            className={cx('LocationPicker-popover')}
+            className={cx('LocationPicker-popover', popoverClassName)}
             onHide={this.close}
             overlay
             onClick={this.handlePopOverClick}

src/components/MonthRangePicker.tsx

@@ -21,6 +21,7 @@ import capitalize from 'lodash/capitalize';
 
 export interface MonthRangePickerProps extends ThemeProps, LocaleProps {
   className?: string;
+  popoverClassName?: string;
   placeholder?: string;
   theme?: any;
   format: string;
@@ -437,6 +438,7 @@ export class MonthRangePicker extends React.Component<
   render() {
     const {
       className,
+      popoverClassName,
       classPrefix: ns,
       value,
       placeholder,
@@ -534,7 +536,7 @@ export class MonthRangePicker extends React.Component<
           >
             <PopOver
               classPrefix={ns}
-              className={`${ns}DateRangePicker-popover`}
+              className={cx(`${ns}DateRangePicker-popover`, popoverClassName)}
               onHide={this.close}
               onClick={this.handlePopOverClick}
               overlay

src/components/PopOverContainer.tsx

@@ -84,7 +84,7 @@ export class PopOverContainer extends React.Component<
             className={popOverClassName}
             style={{
               minWidth: this.target
-                ? Math.max(this.target.getBoundingClientRect().width, 100)
+                ? Math.max(this.target.offsetWidth().width, 100)
                 : 'auto'
             }}
             onHide={this.close}

src/components/Select.tsx

@@ -247,6 +247,7 @@ const DownshiftChangeTypes = Downshift.stateChangeTypes;
 
 interface SelectProps extends OptionProps, ThemeProps, LocaleProps {
   className?: string;
+  popoverClassName?: string;
   creatable: boolean;
   createBtnLabel: string;
   multiple: boolean;
@@ -710,6 +711,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       creatable,
       multiple,
       classnames: cx,
+      popoverClassName,
       checkAll,
       checkAllLabel,
       searchable,
@@ -809,8 +811,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
                   index
                 })}
               </Checkbox>
-            )
-            : renderMenu(item, {
+            ) : (
+              renderMenu(item, {
                 multiple,
                 checkAll,
                 checked,
@@ -819,6 +821,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                 searchable,
                 index
               })
+            )
           ) : checkAll || multiple ? (
             <Checkbox
               checked={checked}
@@ -942,11 +945,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
       >
         <PopOver
           overlay
-          className={cx('Select-popover')}
+          className={cx('Select-popover', popoverClassName)}
           style={{
-            minWidth: this.target
-              ? this.target.getBoundingClientRect().width
-              : 'auto'
+            minWidth: this.target ? this.target.offsetWidth : 'auto'
           }}
           onHide={this.close}
         >

src/renderers/DropDownButton.tsx

@@ -216,7 +216,7 @@ export default class DropDownButton extends React.Component<
             onHide={this.close}
             classPrefix={ns}
             className={cx('DropDown-popover')}
-            style={{minWidth: this.target?.getBoundingClientRect().width}}
+            style={{minWidth: this.target?.offsetWidth}}
           >
             {body}
           </PopOver>

src/renderers/Form/TreeSelect.tsx

@@ -466,9 +466,7 @@ export default class TreeSelectControl extends React.Component<
           classPrefix={ns}
           className={`${ns}TreeSelect-popover`}
           style={{
-            minWidth: this.target
-              ? this.target.getBoundingClientRect().width
-              : undefined
+            minWidth: this.target ? this.target.offsetWidth : undefined
           }}
           onHide={this.close}
           overlay