还有几个有弹出层的都加上 overlayPlacement 定位配置

2024-12-05 05:28:37 +08:00 · 2020-01-02 11:34:26 +08:00 · 2020-01-02 11:34:26 +08:00 · bfb05e1578
commit bfb05e1578
parent fabe96da9d
2 changed files with 105 additions and 97 deletions
--- a/src/components/DateRangePicker.tsx
+++ b/src/components/DateRangePicker.tsx
@ -4,18 +4,18 @@
 * @author fex
 */

-import React = require('react');
-import moment = require('moment');
-import {findDOMNode} from 'react-dom';
-import cx from 'classnames';
-import {Icon} from './icons';
-import Overlay from './Overlay';
-import {ShortCuts, ShortCutDateRange} from './DatePicker';
-import Calendar from './calendar/Calendar';
-import PopOver from './PopOver';
-import {ClassNamesFn, themeable} from '../theme';
-import {PlainObject} from '../types';
-import {noop} from '../utils/helper';
+import React = require("react");
+import moment = require("moment");
+import { findDOMNode } from "react-dom";
+import cx from "classnames";
+import { Icon } from "./icons";
+import Overlay from "./Overlay";
+import { ShortCuts, ShortCutDateRange } from "./DatePicker";
+import Calendar from "./calendar/Calendar";
+import PopOver from "./PopOver";
+import { ClassNamesFn, themeable } from "../theme";
+import { PlainObject } from "../types";
+import { noop } from "../utils/helper";

 export interface DateRangePickerProps {
  className?: string;
@ -37,6 +37,7 @@ export interface DateRangePickerProps {
  data?: any;
  disabled?: boolean;
  closeOnSelect?: boolean;
+  overlayPlacement: string;
  [propName: string]: any;
 }

@ -47,110 +48,110 @@ export interface DateRangePickerState {
  endDate?: moment.Moment;
 }

-const availableRanges: {[propName: string]: any} = {
-  'today': {
-    label: '今天',
+const availableRanges: { [propName: string]: any } = {
+  today: {
+    label: "今天",
    startDate: (now: moment.Moment) => {
-      return now.startOf('day');
+      return now.startOf("day");
    },
    endDate: (now: moment.Moment) => {
      return now;
    }
  },

-  'yesterday': {
-    label: '昨天',
+  yesterday: {
+    label: "昨天",
    startDate: (now: moment.Moment) => {
-      return now.add(-1, 'days').startOf('day');
+      return now.add(-1, "days").startOf("day");
    },
    endDate: (now: moment.Moment) => {
-      return now.add(-1, 'days').endOf('day');
+      return now.add(-1, "days").endOf("day");
    }
  },

-  '1dayago': {
-    label: '最近1天',
+  "1dayago": {
+    label: "最近1天",
    startDate: (now: moment.Moment) => {
-      return now.add(-1, 'days');
+      return now.add(-1, "days");
    },
    endDate: (now: moment.Moment) => {
      return now;
    }
  },

-  '7daysago': {
-    label: '最近7天',
+  "7daysago": {
+    label: "最近7天",
    startDate: (now: moment.Moment) => {
-      return now.add(-7, 'days').startOf('day');
+      return now.add(-7, "days").startOf("day");
    },
    endDate: (now: moment.Moment) => {
-      return now.add(-1, 'days').endOf('day');
+      return now.add(-1, "days").endOf("day");
    }
  },

-  '90daysago': {
-    label: '最近90天',
+  "90daysago": {
+    label: "最近90天",
    startDate: (now: moment.Moment) => {
-      return now.add(-90, 'days').startOf('day');
+      return now.add(-90, "days").startOf("day");
    },
    endDate: (now: moment.Moment) => {
-      return now.add(-1, 'days').endOf('day');
+      return now.add(-1, "days").endOf("day");
    }
  },

-  'prevweek': {
-    label: '上周',
+  prevweek: {
+    label: "上周",
    startDate: (now: moment.Moment) => {
-      return now.startOf('week').add(-1, 'weeks');
+      return now.startOf("week").add(-1, "weeks");
    },
    endDate: (now: moment.Moment) => {
      return now
-        .startOf('week')
-        .add(-1, 'days')
-        .endOf('day');
+        .startOf("week")
+        .add(-1, "days")
+        .endOf("day");
    }
  },

-  'thismonth': {
-    label: '本月',
+  thismonth: {
+    label: "本月",
    startDate: (now: moment.Moment) => {
-      return now.startOf('month');
+      return now.startOf("month");
    },
    endDate: (now: moment.Moment) => {
      return now;
    }
  },

-  'prevmonth': {
-    label: '上个月',
+  prevmonth: {
+    label: "上个月",
    startDate: (now: moment.Moment) => {
-      return now.startOf('month').add(-1, 'month');
+      return now.startOf("month").add(-1, "month");
    },
    endDate: (now: moment.Moment) => {
      return now
-        .startOf('month')
-        .add(-1, 'day')
-        .endOf('day');
+        .startOf("month")
+        .add(-1, "day")
+        .endOf("day");
    }
  },

-  'prevquarter': {
-    label: '上个季节',
+  prevquarter: {
+    label: "上个季节",
    startDate: (now: moment.Moment) => {
-      return now.startOf('quarter').add(-1, 'quarter');
+      return now.startOf("quarter").add(-1, "quarter");
    },
    endDate: (now: moment.Moment) => {
      return now
-        .startOf('quarter')
-        .add(-1, 'day')
-        .endOf('day');
+        .startOf("quarter")
+        .add(-1, "day")
+        .endOf("day");
    }
  },

-  'thisquarter': {
-    label: '本季度',
+  thisquarter: {
+    label: "本季度",
    startDate: (now: moment.Moment) => {
-      return now.startOf('quarter');
+      return now.startOf("quarter");
    },
    endDate: (now: moment.Moment) => {
      return now;
@ -163,16 +164,17 @@ export class DateRangePicker extends React.Component<
  DateRangePickerState
 > {
  static defaultProps = {
-    placeholder: '请选择日期范围',
-    format: 'X',
-    inputFormat: 'YYYY-MM-DD',
+    placeholder: "请选择日期范围",
+    format: "X",
+    inputFormat: "YYYY-MM-DD",
    joinValues: true,
    clearable: true,
-    delimiter: ',',
-    ranges: 'yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter',
-    iconClassName: 'fa fa-calendar',
-    resetValue: '',
-    closeOnSelect: true
+    delimiter: ",",
+    ranges: "yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter",
+    iconClassName: "fa fa-calendar",
+    resetValue: "",
+    closeOnSelect: true,
+    overlayPlacement: "auto"
  };

  innerDom: any;
@ -210,7 +212,7 @@ export class DateRangePicker extends React.Component<
      };
    }

-    if (joinValues && typeof value === 'string') {
+    if (joinValues && typeof value === "string") {
      value = value.split(delimiter);
    }

@ -221,7 +223,7 @@ export class DateRangePicker extends React.Component<
  }

  dom: React.RefObject<HTMLDivElement>;
-  nextMonth = moment().add(1, 'months');
+  nextMonth = moment().add(1, "months");

  constructor(props: DateRangePickerProps) {
    super(props);
@ -241,7 +243,7 @@ export class DateRangePicker extends React.Component<
    this.handleKeyPress = this.handleKeyPress.bind(this);
    this.handlePopOverClick = this.handlePopOverClick.bind(this);
    this.renderDay = this.renderDay.bind(this);
-    const {format, joinValues, delimiter, value} = this.props;
+    const { format, joinValues, delimiter, value } = this.props;

    this.state = {
      isOpened: false,
@ -252,7 +254,7 @@ export class DateRangePicker extends React.Component<

  componentWillReceiveProps(nextProps: DateRangePickerProps) {
    const props = this.props;
-    const {value, format, joinValues, delimiter} = nextProps;
+    const { value, format, joinValues, delimiter } = nextProps;

    if (props.value !== value) {
      this.setState({
@ -318,7 +320,7 @@ export class DateRangePicker extends React.Component<
  }

  handleKeyPress(e: React.KeyboardEvent) {
-    if (e.key === ' ') {
+    if (e.key === " ") {
      this.handleClick();
    }
  }
@ -363,7 +365,7 @@ export class DateRangePicker extends React.Component<
  handleEndChange(newValue: moment.Moment) {
    newValue =
      !this.state.endDate && !this.props.timeFormat
-        ? newValue.endOf('day')
+        ? newValue.endOf("day")
        : newValue;

    if (
@ -382,7 +384,7 @@ export class DateRangePicker extends React.Component<
  }

  selectRannge(range: PlainObject) {
-    const {closeOnSelect} = this.props;
+    const { closeOnSelect } = this.props;
    const now = moment();
    this.setState(
      {
@ -397,10 +399,10 @@ export class DateRangePicker extends React.Component<
    if (!ranges) {
      return null;
    }
-    const {classPrefix: ns} = this.props;
+    const { classPrefix: ns } = this.props;
    let rangeArr: Array<string | ShortCuts>;
-    if (typeof ranges === 'string') {
-      rangeArr = ranges.split(',');
+    if (typeof ranges === "string") {
+      rangeArr = ranges.split(",");
    } else {
      rangeArr = ranges;
    }
@ -411,7 +413,7 @@ export class DateRangePicker extends React.Component<
            return null;
          }
          let range: PlainObject = {};
-          if (typeof item === 'string') {
+          if (typeof item === "string") {
            range = availableRanges[item];
            range.key = item;
          } else if (
@ -441,15 +443,15 @@ export class DateRangePicker extends React.Component<
  clearValue(e: React.MouseEvent<any>) {
    e.preventDefault();
    e.stopPropagation();
-    const {resetValue, onChange} = this.props;
+    const { resetValue, onChange } = this.props;

    onChange(resetValue);
  }

  checkStartIsValidDate(currentDate: moment.Moment) {
-    let {endDate} = this.state;
+    let { endDate } = this.state;

-    let {minDate, maxDate} = this.props;
+    let { minDate, maxDate } = this.props;

    maxDate =
      maxDate && endDate
@ -458,9 +460,9 @@ export class DateRangePicker extends React.Component<
          : endDate
        : maxDate || endDate;

-    if (minDate && currentDate.isBefore(minDate, 'day')) {
+    if (minDate && currentDate.isBefore(minDate, "day")) {
      return false;
-    } else if (maxDate && currentDate.isAfter(maxDate, 'day')) {
+    } else if (maxDate && currentDate.isAfter(maxDate, "day")) {
      return false;
    }

@ -468,9 +470,9 @@ export class DateRangePicker extends React.Component<
  }

  checkEndIsValidDate(currentDate: moment.Moment) {
-    let {startDate} = this.state;
+    let { startDate } = this.state;

-    let {minDate, maxDate} = this.props;
+    let { minDate, maxDate } = this.props;

    minDate =
      minDate && startDate
@ -479,9 +481,9 @@ export class DateRangePicker extends React.Component<
          : startDate
        : minDate || startDate;

-    if (minDate && currentDate.isBefore(minDate, 'day')) {
+    if (minDate && currentDate.isBefore(minDate, "day")) {
      return false;
-    } else if (maxDate && currentDate.isAfter(maxDate, 'day')) {
+    } else if (maxDate && currentDate.isAfter(maxDate, "day")) {
      return false;
    }

@ -489,14 +491,14 @@ export class DateRangePicker extends React.Component<
  }

  renderDay(props: any, currentDate: moment.Moment) {
-    let {startDate, endDate} = this.state;
+    let { startDate, endDate } = this.state;

    if (
      startDate &&
      endDate &&
-      currentDate.isBetween(startDate, endDate, 'day', '[]')
+      currentDate.isBetween(startDate, endDate, "day", "[]")
    ) {
-      props.className += ' rdtBetween';
+      props.className += " rdtBetween";
    }

    return <td {...props}>{currentDate.date()}</td>;
@ -517,10 +519,11 @@ export class DateRangePicker extends React.Component<
      timeFormat,
      ranges,
      disabled,
-      iconClassName
+      iconClassName,
+      overlayPlacement
    } = this.props;

-    const {isOpened, isFocused, startDate, endDate} = this.state;
+    const { isOpened, isFocused, startDate, endDate } = this.state;

    const selectedDate = DateRangePicker.unFormatValue(
      value,
@ -530,10 +533,10 @@ export class DateRangePicker extends React.Component<
    );
    const startViewValue = selectedDate.startDate
      ? selectedDate.startDate.format(inputFormat)
-      : '';
+      : "";
    const endViewValue = selectedDate.endDate
      ? selectedDate.endDate.format(inputFormat)
-      : '';
+      : "";
    const arr = [];
    startViewValue && arr.push(startViewValue);
    endViewValue && arr.push(endViewValue);
@ -547,8 +550,8 @@ export class DateRangePicker extends React.Component<
        className={cx(
          `${ns}DateRangePicker`,
          {
-            'is-disabled': disabled,
-            'is-focused': isFocused
+            "is-disabled": disabled,
+            "is-focused": isFocused
          },
          className
        )}
@ -557,7 +560,7 @@ export class DateRangePicker extends React.Component<
      >
        {arr.length ? (
          <span className={`${ns}DateRangePicker-value`}>
-            {arr.join(' 至 ')}
+            {arr.join(" 至 ")}
          </span>
        ) : (
          <span className={`${ns}DateRangePicker-placeholder`}>
@ -581,6 +584,7 @@ export class DateRangePicker extends React.Component<
            onHide={this.close}
            container={popOverContainer || (() => findDOMNode(this))}
            rootClose={false}
+            placement={overlayPlacement}
            show
          >
            <PopOver
@ -625,8 +629,8 @@ export class DateRangePicker extends React.Component<

                <div key="button" className={`${ns}DateRangePicker-actions`}>
                  <a
-                    className={cx('rdtBtn rdtBtnConfirm', {
-                      'is-disabled':
+                    className={cx("rdtBtn rdtBtnConfirm", {
+                      "is-disabled":
                        !this.state.startDate || !this.state.endDate
                    })}
                    onClick={this.confirm}
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@ -200,6 +200,7 @@ interface SelectProps extends OptionProps {
  inline: boolean;
  disabled: boolean;
  popOverContainer?: any;
+  overlayPlacement?: string;
  onChange: (value: void | string | Option | Array<Option>) => void;
  onFocus?: Function;
  onBlur?: Function;
@ -237,7 +238,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
    disabled: false,
    checkAll: false,
    checkAllLabel: "全选",
-    defaultCheckAll: false
+    defaultCheckAll: false,
+    overlayPlacement: "auto"
  };

  input: HTMLInputElement;
@ -583,7 +585,8 @@ export class Select extends React.Component<SelectProps, SelectState> {
      disabled,
      searchPromptText,
      editable,
-      removable
+      removable,
+      overlayPlacement
    } = this.props;
    const { selection } = this.state;

@ -731,6 +734,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
      <Overlay
        container={popOverContainer || this.getTarget}
        target={this.getTarget}
+        placement={overlayPlacement}
        show
      >
        <PopOver