Merge pull request #970 from oceanbase/feat/date-ranger-add-overlay-classname

feat(ui): [date-ranger] add overlayClassName and overlayStyle props

Author: dengfuping

packages/ui/src/DateRanger/Ranger.tsx

@@ -89,6 +89,8 @@ export interface DateRangerProps
   size?: 'small' | 'large' | 'middle';
   tooltipProps?: TooltipProps;
   autoAdjustOverflow?: boolean;
+  overlayClassName?: string;
+  overlayStyle?: React.CSSProperties;
   locale?: any;
 }
 
@@ -130,6 +132,8 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
     rules,
     tip,
     autoAdjustOverflow,
+    overlayClassName,
+    overlayStyle,
     ...rest
   } = props;
 
@@ -358,7 +362,10 @@ const Ranger = React.forwardRef((props: DateRangerProps, ref) => {
             }}
             dropdownRender={originNode => {
               return (
-                <div className={`${prefix}-dropdown-picker`}>
+                <div
+                  className={classNames(`${prefix}-dropdown-picker`, overlayClassName)}
+                  style={overlayStyle}
+                >
                   {originNode}
                   <Divider type="vertical" style={{ height: 'auto', margin: '0px 4px 0px 0px' }} />
                   <InternalPickerPanel

packages/ui/src/DateRanger/index.md

@@ -43,6 +43,9 @@ markdown: |
 | hideYear | 当时间范围在本年时，隐藏年份 | boolean | false | - |
 | hideSecond | 隐藏"秒” | boolean | false | - |
 | autoCalcRange | 自动计算时间范围并回显到选择器tag | boolean | false | - |
+| autoAdjustOverflow | 选择面板被遮挡时自动调整位置 | boolean | true | - |
+| overlayClassName | 选择面板根元素的类名称 | string | - | - |
+| overlayStyle | 选择面板根元素的样式 | CSSProperties | - | - |
 | ref | updateCurrentTime 手动更新当前时间 | function | - | - |
 | 其他 antd/RangePicker 的 `props` | [antd-RangePicker](https://ant.design/components/date-picker-cn/#RangePicker) | - | - | - |