amis 1.5.7 → 1.5.8-beta.2

package/src/components/DatePicker.tsx

@@ -15,7 +15,7 @@ import {ClassNamesFn, themeable, ThemeProps} from '../theme';
 import {PlainObject} from '../types';
 import Calendar from './calendar/Calendar';
 import 'react-datetime/css/react-datetime.css';
-import { localeable, LocaleProps, TranslateFn } from '../locale';
+import {localeable, LocaleProps, TranslateFn} from '../locale';
 import {isMobile, ucFirst} from '../utils/helper';
 
 const availableShortcuts: {[propName: string]: any} = {
@@ -280,10 +280,10 @@ export interface DateProps extends LocaleProps, ThemeProps {
   // 是否为内嵌模式，如果开启就不是 picker 了，直接页面点选。
   embed?: boolean;
   schedules?: Array<{
-    startTime: Date,
-    endTime: Date,
-    content: any,
-    className?: string
+    startTime: Date;
+    endTime: Date;
+    content: any;
+    className?: string;
   }>;
   scheduleClassNames?: Array<string>;
   largeMode?: boolean;
@@ -315,7 +315,13 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     shortcuts: '',
     closeOnSelect: true,
     overlayPlacement: 'auto',
-    scheduleClassNames: ['bg-warning', 'bg-danger', 'bg-success', 'bg-info', 'bg-secondary']
+    scheduleClassNames: [
+      'bg-warning',
+      'bg-danger',
+      'bg-success',
+      'bg-info',
+      'bg-secondary'
+    ]
   };
   state: DatePickerState = {
     isOpened: false,
@@ -561,6 +567,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
       embed,
       minDate,
       useMobileUI,
+      maxDate,
       schedules,
       largeMode,
       scheduleClassNames,
@@ -571,7 +578,6 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     const isOpened = this.state.isOpened;
     let date: moment.Moment | undefined = this.state.value;
 
-
     if (embed) {
       let schedulesData: DateProps['schedules'] = undefined;
       if (schedules && Array.isArray(schedules)) {
@@ -617,6 +623,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
             onClose={this.close}
             locale={locale}
             minDate={minDate}
+            maxDate={maxDate}
             // utc={utc}
             schedules={schedulesData}
             largeMode={largeMode}
@@ -695,39 +702,38 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
                 onClose={this.close}
                 locale={locale}
                 minDate={minDate}
+                maxDate={maxDate}
                 // utc={utc}
               />
             </PopOver>
           </Overlay>
         ) : null}
-        {
-          useMobileUI && isMobile() ? (
-            <PopUp
-              className={cx(`${ns}DatePicker-popup`)}
-              isShow={isOpened}
-              onHide={this.handleClick}
-            >
-              {this.renderShortCuts(shortcuts)}
-
-              <Calendar
-                value={date}
-                onChange={this.handleChange}
-                requiredConfirm={!!(dateFormat && timeFormat)}
-                dateFormat={dateFormat}
-                inputFormat={inputFormat}
-                timeFormat={timeFormat}
-                isValidDate={this.checkIsValidDate}
-                viewMode={viewMode}
-                timeConstraints={timeConstraints}
-                input={false}
-                onClose={this.close}
-                locale={locale}
-                minDate={minDate}
-                // utc={utc}
-              />
-            </PopUp>
-          ) : null
-        }
+        {useMobileUI && isMobile() ? (
+          <PopUp
+            className={cx(`${ns}DatePicker-popup`)}
+            isShow={isOpened}
+            onHide={this.handleClick}
+          >
+            {this.renderShortCuts(shortcuts)}
+
+            <Calendar
+              value={date}
+              onChange={this.handleChange}
+              requiredConfirm={!!(dateFormat && timeFormat)}
+              dateFormat={dateFormat}
+              inputFormat={inputFormat}
+              timeFormat={timeFormat}
+              isValidDate={this.checkIsValidDate}
+              viewMode={viewMode}
+              timeConstraints={timeConstraints}
+              input={false}
+              onClose={this.close}
+              locale={locale}
+              minDate={minDate}
+              // utc={utc}
+            />
+          </PopUp>
+        ) : null}
       </div>
     );
   }

package/src/components/DateRangePicker.tsx

@@ -18,6 +18,7 @@ import {ClassNamesFn, themeable, ThemeProps} from '../theme';
 import {PlainObject} from '../types';
 import {isMobile, noop, ucFirst} from '../utils/helper';
 import {LocaleProps, localeable} from '../locale';
+import CalendarMobile from './CalendarMobile';
 
 export interface DateRangePickerProps extends ThemeProps, LocaleProps {
   className?: string;
@@ -287,6 +288,7 @@ export class DateRangePicker extends React.Component<
     this.handlePopOverClick = this.handlePopOverClick.bind(this);
     this.renderDay = this.renderDay.bind(this);
     this.renderQuarter = this.renderQuarter.bind(this);
+    this.handleMobileChange = this.handleMobileChange.bind(this);
     const {format, joinValues, delimiter, value} = this.props;
 
     this.state = {
@@ -499,6 +501,16 @@ export class DateRangePicker extends React.Component<
     );
   }
 
+  handleMobileChange(data: any, callback?: () => void) {
+    this.setState(
+      {
+        startDate: data.startDate,
+        endDate: data.endDate
+      },
+      callback
+    );
+  }
+
   selectRannge(range: PlainObject) {
     const {closeOnSelect, minDate, maxDate} = this.props;
     const now = moment();
@@ -763,10 +775,19 @@ export class DateRangePicker extends React.Component<
       embed,
       overlayPlacement,
       borderMode,
-      useMobileUI
+      useMobileUI,
+      timeFormat,
+      minDate,
+      maxDate,
+      minDuration,
+      maxDuration,
+      dateFormat,
+      viewMode = 'days',
+      ranges
     } = this.props;
+    const useCalendarMobile = useMobileUI && isMobile() && ['days', 'months', 'quarters'].indexOf(viewMode) > -1;
 
-    const {isOpened, isFocused} = this.state;
+    const {isOpened, isFocused, startDate, endDate} = this.state;
 
     const selectedDate = DateRangePicker.unFormatValue(
       value,
@@ -785,6 +806,25 @@ export class DateRangePicker extends React.Component<
     endViewValue && arr.push(endViewValue);
     const __ = this.props.translate;
 
+    const calendarMobile = <CalendarMobile
+      timeFormat={timeFormat}
+      inputFormat={inputFormat}
+      startDate={startDate}
+      endDate={endDate}
+      minDate={minDate}
+      maxDate={maxDate}
+      minDuration={minDuration}
+      maxDuration={maxDuration}
+      dateFormat={dateFormat}
+      embed={embed}
+      viewMode={viewMode}
+      close={this.close}
+      confirm={this.confirm}
+      onChange={this.handleMobileChange}
+      footerExtra={this.renderRanges(ranges)}
+      showViewMode={viewMode === 'quarters' || viewMode === 'months' ? 'years' : 'months'}
+    />;
+
     if (embed) {
       return (
         <div
@@ -796,11 +836,15 @@ export class DateRangePicker extends React.Component<
             className
           )}
         >
-          {this.renderCalendar()}
+          {useCalendarMobile
+            ? calendarMobile
+            : this.renderCalendar()}
         </div>
       );
     }
 
+    const CalendarMobileTitle = <div className={`${ns}CalendarMobile-title`}>{__('Calendar.datepicker')}</div>;
+
     return (
       <div
         tabIndex={0}
@@ -839,8 +883,20 @@ export class DateRangePicker extends React.Component<
           <Icon icon="clock" className="icon" />
         </a>
 
-        {!(useMobileUI && isMobile()) && isOpened ? (
-          <Overlay
+        {isOpened ? (
+          useMobileUI && isMobile() ? (
+            <PopUp
+              isShow={isOpened}
+              className={cx(`${ns}CalendarMobile-pop`)}
+              onHide={this.close}
+              header={CalendarMobileTitle}
+            >
+              {useCalendarMobile
+                ? calendarMobile
+                : this.renderCalendar()}
+            </PopUp>
+          )
+          : <Overlay
             target={() => this.dom.current}
             onHide={this.close}
             container={popOverContainer || (() => findDOMNode(this))}
@@ -859,17 +915,6 @@ export class DateRangePicker extends React.Component<
             </PopOver>
           </Overlay>
         ) : null}
-        {
-          useMobileUI && isMobile() && (
-            <PopUp
-              isShow={isOpened}
-              className={cx(`${ns}DateRangePicker-popup`)}
-              onHide={this.handleClick}
-            >
-              {this.renderCalendar()}
-            </PopUp>
-          )
-        }
       </div>
     );
   }

package/src/components/GroupedSelection.tsx

@@ -27,7 +27,13 @@ export class GroupedSelection extends BaseSelection {
           className={cx('GroupedSelection-group', option.className)}
         >
           <div className={cx('GroupedSelection-itemLabel')}>
-            {itemRender(option)}
+            {itemRender(option, {
+              index: index,
+              multiple: multiple,
+              checked: false,
+              onChange: () => undefined,
+              disabled: disabled || option.disabled
+            })}
           </div>
 
           <div className={cx('GroupedSelection-items', option.className)}>
@@ -52,7 +58,13 @@ export class GroupedSelection extends BaseSelection {
         onClick={() => this.toggleOption(option)}
       >
         <div className={cx('GroupedSelection-itemLabel')}>
-          {itemRender(option)}
+          {itemRender(option, {
+            index: index,
+            multiple: multiple,
+            checked: !!~valueArray.indexOf(option),
+            onChange: () => this.toggleOption(option),
+            disabled: disabled || option.disabled
+          })}
         </div>
 
         {multiple ? (

package/src/components/MonthRangePicker.tsx

@@ -20,7 +20,8 @@ import {LocaleProps, localeable} from '../locale';
 import {DateRangePicker} from './DateRangePicker';
 import capitalize from 'lodash/capitalize';
 import {ShortCuts, ShortCutDateRange} from './DatePicker';
-import { availableRanges } from './DateRangePicker';
+import {availableRanges} from './DateRangePicker';
+import CalendarMobile from './CalendarMobile';
 
 export interface MonthRangePickerProps extends ThemeProps, LocaleProps {
   className?: string;
@@ -99,6 +100,7 @@ export class MonthRangePicker extends React.Component<
     this.handleKeyPress = this.handleKeyPress.bind(this);
     this.handlePopOverClick = this.handlePopOverClick.bind(this);
     this.renderMonth = this.renderMonth.bind(this);
+    this.handleMobileChange = this.handleMobileChange.bind(this);
     const {format, joinValues, delimiter, value} = this.props;
 
     this.state = {
@@ -280,6 +282,16 @@ export class MonthRangePicker extends React.Component<
     );
   }
 
+  handleMobileChange(data: any, callback?: () => void) {
+    this.setState(
+      {
+        startDate: data.startDate,
+        endDate: data.endDate
+      },
+      callback
+    );
+  }
+
   selectRannge(range: PlainObject) {
     const {closeOnSelect, minDate, maxDate} = this.props;
     this.setState(
@@ -531,10 +543,17 @@ export class MonthRangePicker extends React.Component<
       disabled,
       embed,
       overlayPlacement,
-      useMobileUI
+      useMobileUI,
+      timeFormat,
+      minDate,
+      maxDate,
+      minDuration,
+      maxDuration,
+      ranges
     } = this.props;
+    const mobileUI = isMobile() && useMobileUI;
 
-    const {isOpened, isFocused} = this.state;
+    const {isOpened, isFocused, startDate, endDate} = this.state;
 
     const selectedDate = DateRangePicker.unFormatValue(
       value,
@@ -553,6 +572,24 @@ export class MonthRangePicker extends React.Component<
     endViewValue && arr.push(endViewValue);
     const __ = this.props.translate;
 
+    const calendarMobile = <CalendarMobile
+      timeFormat={timeFormat}
+      inputFormat={inputFormat}
+      startDate={startDate}
+      endDate={endDate}
+      minDate={minDate}
+      maxDate={maxDate}
+      minDuration={minDuration}
+      maxDuration={maxDuration}
+      embed={embed}
+      viewMode="months"
+      close={this.close}
+      confirm={this.confirm}
+      onChange={this.handleMobileChange}
+      footerExtra={this.renderRanges(ranges)}
+      showViewMode="years"
+    />;
+
     if (embed) {
       return (
         <div
@@ -564,11 +601,15 @@ export class MonthRangePicker extends React.Component<
             className
           )}
         >
-          {this.renderCalendar()}
+          {mobileUI
+            ? calendarMobile
+            : this.renderCalendar()}
         </div>
       );
     }
 
+    const CalendarMobileTitle = <div className={`${ns}CalendarMobile-title`}>{__('Calendar.datepicker')}</div>;
+
     return (
       <div
         tabIndex={0}
@@ -606,8 +647,18 @@ export class MonthRangePicker extends React.Component<
           <Icon icon="clock" className="icon" />
         </a>
 
-        {!(useMobileUI && isMobile()) && isOpened ? (
-          <Overlay
+        {isOpened ? (
+          mobileUI ? (
+            <PopUp
+              isShow={isOpened}
+              className={cx(`${ns}CalendarMobile-pop`)}
+              onHide={this.close}
+              header={CalendarMobileTitle}
+            >
+              {calendarMobile}
+            </PopUp>
+          )
+          : <Overlay
             target={() => this.dom.current}
             onHide={this.close}
             container={popOverContainer || (() => findDOMNode(this))}
@@ -626,17 +677,6 @@ export class MonthRangePicker extends React.Component<
             </PopOver>
           </Overlay>
         ) : null}
-        {
-          useMobileUI && isMobile() && (
-            <PopUp
-              className={cx(`${ns}DateRangePicker-popup`)}
-              isShow={isOpened}
-              onHide={this.handleClick}
-            >
-              {this.renderCalendar()}
-            </PopUp>
-          )
-        }
       </div>
     );
   }

package/src/components/Overlay.tsx

@@ -165,7 +165,7 @@ class Position extends React.Component<any, any> {
 interface OverlayProps {
   placement?: string;
   show?: boolean;
-  transition?: React.ReactType;
+  transition?: React.ElementType;
   containerPadding?: number;
   shouldUpdatePosition?: boolean;
   rootClose?: boolean;

package/src/components/Picker.tsx

@@ -2,11 +2,7 @@
  * @file Picker
  * @description 移动端列滚动选择器
  */
-import React, {
-  memo,
-  ReactNode,
-  useState
-} from 'react';
+import React, {memo, ReactNode, useState, useEffect} from 'react';
 import {uncontrollable} from 'uncontrollable';
 
 import {themeable, ThemeProps} from '../theme';
@@ -18,7 +14,7 @@ import {PickerColumnItem, default as Column} from './PickerColumn';
 export type PickerValue = string | number;
 
 export interface PickerProps extends ThemeProps, LocaleProps {
-  title?: String | ReactNode,
+  title?: String | ReactNode;
   labelField?: string;
   className?: string;
   showToolbar?: boolean;
@@ -28,17 +24,9 @@ export interface PickerProps extends ThemeProps, LocaleProps {
   visibleItemCount?: number;
   itemHeight?: number;
   columns: PickerColumnItem[] | PickerColumnItem;
-  onChange?: (
-    value?: PickerValue[],
-    index?: number,
-    confirm?: boolean
-  ) => void;
-  onClose?: (
-    value?: PickerValue[]
-  ) => void;
-  onConfirm?: (
-    value?: PickerValue[]
-  ) => void;
+  onChange?: (value?: PickerValue[], index?: number, confirm?: boolean) => void;
+  onClose?: (value?: PickerValue[]) => void;
+  onConfirm?: (value?: PickerValue[]) => void;
 }
 
 function fixToArray(data: any) {
@@ -48,7 +36,7 @@ function fixToArray(data: any) {
   return data;
 }
 
-const Picker = memo<PickerProps>((props) => {
+const Picker = memo<PickerProps>(props => {
   const {
     labelField,
     visibleItemCount = 5,
@@ -57,7 +45,7 @@ const Picker = memo<PickerProps>((props) => {
     columns = [],
     itemHeight = 30,
     showToolbar = true,
-    className='',
+    className = '',
     classnames: cx,
     classPrefix: ns,
     translate: __
@@ -65,8 +53,11 @@ const Picker = memo<PickerProps>((props) => {
 
   const _columns = fixToArray(columns);
   const [innerValue, setInnerValue] = useState<PickerValue[]>(
-    fixToArray(props.value === undefined ? props.defaultValue || [] : value )
+    fixToArray(props.value === undefined ? props.defaultValue || [] : value)
   );
+  useEffect(() => {
+    setInnerValue(value);
+  }, [value]);
 
   const close = () => {
     if (props.onClose) {
@@ -80,7 +71,11 @@ const Picker = memo<PickerProps>((props) => {
     }
   };
 
-  const onChange = (itemValue: PickerValue, columnIndex: number, confirm?: boolean) => {
+  const onChange = (
+    itemValue: PickerValue,
+    columnIndex: number,
+    confirm?: boolean
+  ) => {
     const nextInnerValue = [...innerValue];
     nextInnerValue[columnIndex] = itemValue;
     setInnerValue(nextInnerValue);
@@ -103,7 +98,9 @@ const Picker = memo<PickerProps>((props) => {
         onChange={(val: string | number, i, confirm) => {
           onChange(val, index, confirm);
         }}
-    />)
+        key={`column${index}`}
+      />
+    );
   };
 
   const wrapHeight = itemHeight * +visibleItemCount;
@@ -114,21 +111,29 @@ const Picker = memo<PickerProps>((props) => {
   };
 
   return (
-    <div
-      className={cx(className, 'PickerColumns', 'PickerColumns-popOver')}
-    >
-      {showToolbar && <div className={cx('PickerColumns-toolbar')}>
-        <Button className="PickerColumns-cancel" level="default" onClick={close}>
-          {__('cancel')}
-        </Button>
-        <Button className="PickerColumns-confirm" level="primary" onClick={confirm}>
-          {__('confirm')}
-        </Button>
-      </div>}
+    <div className={cx(className, 'PickerColumns', 'PickerColumns-popOver')}>
+      {showToolbar && (
+        <div className={cx('PickerColumns-toolbar')}>
+          <Button
+            className="PickerColumns-cancel"
+            level="default"
+            onClick={close}
+          >
+            {__('cancel')}
+          </Button>
+          <Button
+            className="PickerColumns-confirm"
+            level="primary"
+            onClick={confirm}
+          >
+            {__('confirm')}
+          </Button>
+        </div>
+      )}
       <div className={cx('PickerColumns-columns')} style={columnsStyle}>
-          {
-              _columns.map((column: PickerColumnItem, index: number) => renderColumnItem(column, index))
-          }
+        {_columns.map((column: PickerColumnItem, index: number) =>
+          renderColumnItem(column, index)
+        )}
         <div className={cx('PickerColumns-mask')} style={maskStyle}></div>
         <div className={cx('PickerColumns-frame')} style={frameStyle}></div>
       </div>

package/src/components/PickerColumn.tsx

@@ -33,7 +33,7 @@ export interface PickerColumnItem {
     index?: number,
     confirm?: boolean
   ) => void;
-};
+}
 
 export interface PickerColumnProps extends PickerColumnItem, ThemeProps {}
 
@@ -64,7 +64,7 @@ function getElementTranslateY(element: HTMLElement | null) {
 function isOptionDisabled(option: PickerOption) {
   return isObject(option) && option.disabled;
 }
-  
+
 const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   const {
     visibleItemCount = 5,
@@ -132,11 +132,9 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
       updateState({index});
 
       if (emitChange && props.onChange) {
-        requestAnimationFrame(
-          () => {
-            props.onChange?.(options[index], index, confirm);
-          }
-        );
+        requestAnimationFrame(() => {
+          props.onChange?.(options[index], index, confirm);
+        });
         // setTimeout(() => {
         //   props.onChange?.(options[index], index, confirm);
         // }, 0);
@@ -301,7 +299,7 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
           onClickItem(index);
         }
       };
-      
+
       const childData = {
         className: 'text-ellipsis',
         children: text
@@ -357,23 +355,23 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
     transitionProperty: state.duration ? 'all' : 'none'
   };
   return (
-      <div
-          ref={root}
-          className={props.classnames('PickerColumns', props.className)}
-          onTouchStart={onTouchStart}
-          onTouchMove={onTouchMove}
-          onTouchEnd={onTouchEnd}
-          onTouchCancel={onTouchEnd}
+    <div
+      ref={root}
+      className={props.classnames('PickerColumns', props.className)}
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}
+      onTouchCancel={onTouchEnd}
+    >
+      <ul
+        ref={wrapper}
+        style={wrapperStyle}
+        className={props.classnames('PickerColumns-columnWrapper')}
+        onTransitionEnd={stopMomentum}
       >
-          <ul
-          ref={wrapper}
-          style={wrapperStyle}
-          className={props.classnames('PickerColumns-columnWrapper')}
-          onTransitionEnd={stopMomentum}
-          >
-          {renderOptions()}
-          </ul>
-      </div>
+        {renderOptions()}
+      </ul>
+    </div>
   );
 });
 
@@ -389,4 +387,3 @@ export default themeable(
     value: 'onChange'
   })
 );
-