amis 1.9.1-beta.28 → 1.9.1-beta.30

package/src/components/AnchorNav.tsx

@@ -49,8 +49,13 @@ export interface AnchorNavProps extends ThemeProps {
   direction?: 'vertical' | 'horizontal'; // 导航方向
 }
 
+interface SectionOffset {
+  key: string | number;
+  offsetTop: number;
+}
+
 export interface AnchorNavState {
-  offsetArr: PlainObject[]; // 记录每个段落的offsetTop
+  offsetArr: SectionOffset[]; // 记录每个段落的offsetTop
   fromSelect: boolean; // 标识滚动触发来源
 }
 
@@ -67,17 +72,53 @@ export class AnchorNav extends React.Component<AnchorNavProps, AnchorNavState> {
   // 滚动区域DOM
   contentDom: React.RefObject<HTMLDivElement> = React.createRef();
 
+  // 后代节点观察器
+  observer: MutationObserver;
+
+  // 滚动区域的高度
+  contentDomHeight = 0;
+
   componentDidMount() {
-    // 初始化滚动标识
+    // 初始化滚动标识
     this.setState({fromSelect: false});
 
-    // add scroll event
     const sectionRootDom =
       this.contentDom && (this.contentDom.current as HTMLElement);
-    sectionRootDom.addEventListener('scroll', this.scrollToNav);
-    let offsetArr: Array<object> = [];
+
+    this.updateSectionOffset(sectionRootDom, false);
+    this.observer = new MutationObserver((mutations: MutationRecord[]) => {
+      let height = sectionRootDom.scrollHeight;
+
+      // 监听sectio容器dom高度是否变化，如果变化，则重新计算section的offset
+      if (height !== this.contentDomHeight) {
+        this.contentDomHeight = height;
+        this.updateSectionOffset(sectionRootDom, true);
+      }
+    });
+
+    this.observer.observe(sectionRootDom, {
+      childList: true,
+      attributes: true, // 属性变化也有可能导致高度的变化，例如类名，所以也要监听
+      subtree: true
+    });
+  }
+
+  componentWillUnmount() {
+    if (this.contentDom && this.contentDom.current) {
+      this.contentDom.current.removeEventListener('scroll', this.scrollToNav);
+    }
+    this.observer && this.observer.disconnect();
+  }
+
+  updateSectionOffset(parentNode: HTMLElement, inited: boolean) {
+    const offsetArr: Array<SectionOffset> = [];
     const {children, active} = this.props;
 
+    if (!inited) {
+      // add scroll event
+      parentNode.addEventListener('scroll', this.scrollToNav);
+    }
+
     // 收集段落区域offsetTop
     children &&
       React.Children.forEach(
@@ -85,7 +126,7 @@ export class AnchorNav extends React.Component<AnchorNavProps, AnchorNavState> {
         (section: AnchorNavSectionComponent, index: number) => {
           offsetArr.push({
             key: section.props.name,
-            offsetTop: (sectionRootDom.children[index] as HTMLElement).offsetTop
+            offsetTop: (parentNode.children[index] as HTMLElement).offsetTop
           });
         }
       );
@@ -94,7 +135,7 @@ export class AnchorNav extends React.Component<AnchorNavProps, AnchorNavState> {
       {
         offsetArr
       },
-      () => active && this.scrollToSection(active)
+      !inited ? () => active && this.scrollToSection(active) : undefined
     );
   }
 

package/src/components/DatePicker.tsx

@@ -276,7 +276,7 @@ export interface DateProps extends LocaleProps, ThemeProps {
     };
   };
   popOverContainer?: any;
-
+  label?: string | false;
   borderMode?: 'full' | 'half' | 'none';
   // 是否为内嵌模式，如果开启就不是 picker 了，直接页面点选。
   embed?: boolean;
@@ -368,7 +368,6 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
 
   componentDidUpdate(prevProps: DateProps) {
     const props = this.props;
-
     const prevValue = prevProps.value;
 
     if (prevValue !== props.value) {
@@ -400,9 +399,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
   }
 
   handleBlur(e: React.SyntheticEvent<HTMLDivElement>) {
-    this.setState({
-      isFocused: false
-    });
+    this.setState({isFocused: false});
     const {onBlur} = this.props;
     onBlur && onBlur(e);
   }
@@ -657,7 +654,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
       largeMode,
       scheduleClassNames,
       onScheduleClick,
-      mobileCalendarMode
+      mobileCalendarMode,
+      label
     } = this.props;
 
     const __ = this.props.translate;
@@ -687,7 +685,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     );
     const CalendarMobileTitle = (
       <div className={`${ns}CalendarMobile-title`}>
-        {__('Calendar.datepicker')}
+        {label && typeof label === 'string' ? label : __('Calendar.datepicker')}
       </div>
     );
     const useCalendarMobile =
@@ -788,7 +786,10 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
         ) : null}
 
         <a className={cx(`DatePicker-toggler`)}>
-          <Icon icon={viewMode === 'time' ? 'clock' : 'date'} className="icon" />
+          <Icon
+            icon={viewMode === 'time' ? 'clock' : 'date'}
+            className="icon"
+          />
         </a>
 
         {!(useMobileUI && isMobile()) && isOpened ? (

package/src/components/DateRangePicker.tsx

@@ -55,6 +55,7 @@ export interface DateRangePickerProps extends ThemeProps, LocaleProps {
   onBlur?: Function;
   type?: string;
   onRef?: any;
+  label?: string | false;
 }
 
 export interface DateRangePickerState {
@@ -62,6 +63,8 @@ export interface DateRangePickerState {
   isFocused: boolean;
   startDate?: moment.Moment;
   endDate?: moment.Moment;
+  oldStartDate?: moment.Moment;
+  oldEndDate?: moment.Moment;
   editState?: 'start' | 'end'; // 编辑开始时间还是结束时间
   startInputValue?: string;
   endInputValue?: string;
@@ -534,6 +537,8 @@ export class DateRangePicker extends React.Component<
       editState: 'start',
       startDate,
       endDate,
+      oldStartDate: startDate,
+      oldEndDate: endDate,
       startInputValue: startDate?.format(inputFormat),
       endInputValue: endDate?.format(inputFormat)
     };
@@ -645,7 +650,17 @@ export class DateRangePicker extends React.Component<
     });
   }
 
-  close() {
+  close(isConfirm: boolean = false) {
+    if (!isConfirm) {
+      const {oldEndDate, oldStartDate} = this.state;
+      const {inputFormat} = this.props;
+      this.setState({
+        endDate: oldEndDate,
+        endInputValue: oldEndDate ? oldEndDate.format(inputFormat) : '',
+        startDate: oldStartDate,
+        startInputValue: oldStartDate ? oldStartDate.format(inputFormat) : ''
+      });
+    }
     this.setState(
       {
         isOpened: false,
@@ -693,7 +708,7 @@ export class DateRangePicker extends React.Component<
     if (this.state.startDate && !this.state.endDate) {
       this.setState({editState: 'end'});
     } else {
-      this.close();
+      this.close(true);
     }
   }
 
@@ -723,8 +738,22 @@ export class DateRangePicker extends React.Component<
     return value;
   }
 
-  handleDateChange(newValue: moment.Moment) {
+  handleDateChange(
+    newValue: moment.Moment,
+    timeRangeContext?: 'start' | 'end'
+  ) {
     let {editState} = this.state;
+
+    if (timeRangeContext) {
+      if (timeRangeContext === 'start') {
+        this.handleStartDateChange(newValue);
+      } else if (timeRangeContext === 'end') {
+        this.handeleEndDateChange(newValue);
+      }
+
+      return;
+    }
+
     if (editState === 'start') {
       this.handleStartDateChange(newValue);
     } else if (editState === 'end') {
@@ -746,6 +775,7 @@ export class DateRangePicker extends React.Component<
     );
     const newState = {
       startDate: date,
+      oldStartDate: startDate,
       startInputValue: date.format(inputFormat)
     } as any;
     // 这些没有时间的选择点第一次后第二次就是选结束时间
@@ -769,14 +799,17 @@ export class DateRangePicker extends React.Component<
     if (newValue.isBefore(startDate)) {
       this.setState({
         startDate: undefined,
+        oldStartDate: startDate,
         startInputValue: ''
       });
     }
 
     const date = this.filterDate(newValue, endDate, timeFormat, 'end');
+
     this.setState(
       {
         endDate: date,
+        oldEndDate: endDate,
         endInputValue: date.format(inputFormat)
       },
       () => {
@@ -1147,6 +1180,14 @@ export class DateRangePicker extends React.Component<
       props.className += ' rdtBetween';
     }
 
+    if (startDate && currentDate.isSame(startDate, 'day')) {
+      props.className += ' rdtActive rdtStartDay';
+    }
+
+    if (endDate && currentDate.isSame(endDate, 'day')) {
+      props.className += ' rdtActive rdtEndDay';
+    }
+
     return (
       <td {...props}>
         <span>{currentDate.date()}</span>
@@ -1226,7 +1267,8 @@ export class DateRangePicker extends React.Component<
       locale,
       embed,
       type,
-      viewMode = 'days'
+      viewMode = 'days',
+      useMobileUI
     } = this.props;
     const __ = this.props.translate;
 
@@ -1236,7 +1278,7 @@ export class DateRangePicker extends React.Component<
     const isTimeRange = type === 'input-datetime-range' || viewMode === 'time';
 
     return (
-      <div className={`${ns}DateRangePicker-wrap`} ref={this.calendarRef}>
+      <div className={cx(`${ns}DateRangePicker-wrap`)} ref={this.calendarRef}>
         {this.renderRanges(ranges)}
         {(!isTimeRange || (editState === 'start' && !embed)) && (
           <Calendar
@@ -1264,7 +1306,8 @@ export class DateRangePicker extends React.Component<
             renderQuarter={this.renderQuarter}
             renderYear={this.renderYear}
             locale={locale}
-            timeRangeHeader="开始时间"
+            timeRangeHeader={__('Calendar.startPick')}
+            timeRangeContext="start"
           />
         )}
         {(!isTimeRange || (editState === 'end' && !embed)) && (
@@ -1293,13 +1336,17 @@ export class DateRangePicker extends React.Component<
             renderQuarter={this.renderQuarter}
             renderYear={this.renderYear}
             locale={locale}
-            timeRangeHeader="结束时间"
+            timeRangeHeader={__('Calendar.endPick')}
+            timeRangeContext="end"
           />
         )}
 
         {embed ? null : (
           <div key="button" className={`${ns}DateRangePicker-actions`}>
-            <a className={cx('Button', 'Button--default')} onClick={this.close}>
+            <a
+              className={cx('Button', 'Button--default')}
+              onClick={() => this.close()}
+            >
               {__('cancel')}
             </a>
             <a
@@ -1348,7 +1395,8 @@ export class DateRangePicker extends React.Component<
       maxDuration,
       dateFormat,
       viewMode = 'days',
-      ranges
+      ranges,
+      label
     } = this.props;
     const useCalendarMobile =
       useMobileUI &&
@@ -1400,7 +1448,7 @@ export class DateRangePicker extends React.Component<
 
     const CalendarMobileTitle = (
       <div className={`${ns}CalendarMobile-title`}>
-        {__('Calendar.datepicker')}
+        {label && typeof label === 'string' ? label : __('Calendar.datepicker')}
       </div>
     );
 
@@ -1466,7 +1514,10 @@ export class DateRangePicker extends React.Component<
             <PopUp
               isShow={isOpened}
               container={popOverContainer}
-              className={cx(`${ns}CalendarMobile-pop`)}
+              className={cx(
+                `${ns}CalendarMobile-pop`,
+                `${ns}CalendarMobile-pop--${viewMode}`
+              )}
               onHide={this.close}
               header={CalendarMobileTitle}
             >

package/src/components/MonthRangePicker.tsx

@@ -52,6 +52,7 @@ export interface MonthRangePickerProps extends ThemeProps, LocaleProps {
   useMobileUI?: boolean;
   onFocus?: Function;
   onBlur?: Function;
+  label?: string | false;
 }
 
 export interface MonthRangePickerState {
@@ -555,7 +556,8 @@ export class MonthRangePicker extends React.Component<
       maxDate,
       minDuration,
       maxDuration,
-      ranges
+      ranges,
+      label
     } = this.props;
     const mobileUI = isMobile() && useMobileUI;
 
@@ -616,7 +618,7 @@ export class MonthRangePicker extends React.Component<
 
     const CalendarMobileTitle = (
       <div className={`${ns}CalendarMobile-title`}>
-        {__('Calendar.datepicker')}
+        {label && typeof label === 'string' ? label : __('Calendar.datepicker')}
       </div>
     );