forked from p96170835/amis
还有几个有弹出层的都加上 overlayPlacement 定位配置
This commit is contained in:
2betop
parent
fabe96da9d
commit
bfb05e1578
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue