amis 1.5.6-beta.5 → 1.6.0

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,22 @@ 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 +809,29 @@ 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 +843,17 @@ 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,37 +892,38 @@ export class DateRangePicker extends React.Component<
           <Icon icon="clock" className="icon" />
         </a>
 
-        {!(useMobileUI && isMobile()) && isOpened ? (
-          <Overlay
-            target={() => this.dom.current}
-            onHide={this.close}
-            container={popOverContainer || (() => findDOMNode(this))}
-            rootClose={false}
-            placement={overlayPlacement}
-            show
-          >
-            <PopOver
-              classPrefix={ns}
-              className={cx(`${ns}DateRangePicker-popover`, popoverClassName)}
-              onHide={this.close}
-              onClick={this.handlePopOverClick}
-              overlay
-            >
-              {this.renderCalendar()}
-            </PopOver>
-          </Overlay>
-        ) : null}
-        {
-          useMobileUI && isMobile() && (
+        {isOpened ? (
+          useMobileUI && isMobile() ? (
             <PopUp
               isShow={isOpened}
-              className={cx(`${ns}DateRangePicker-popup`)}
-              onHide={this.handleClick}
+              container={popOverContainer}
+              className={cx(`${ns}CalendarMobile-pop`)}
+              onHide={this.close}
+              header={CalendarMobileTitle}
             >
-              {this.renderCalendar()}
+              {useCalendarMobile ? calendarMobile : this.renderCalendar()}
             </PopUp>
+          ) : (
+            <Overlay
+              target={() => this.dom.current}
+              onHide={this.close}
+              container={popOverContainer || (() => findDOMNode(this))}
+              rootClose={false}
+              placement={overlayPlacement}
+              show
+            >
+              <PopOver
+                classPrefix={ns}
+                className={cx(`${ns}DateRangePicker-popover`, popoverClassName)}
+                onHide={this.close}
+                onClick={this.handlePopOverClick}
+                overlay
+              >
+                {this.renderCalendar()}
+              </PopOver>
+            </Overlay>
           )
-        }
+        ) : null}
       </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,26 @@ 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 +603,17 @@ 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,37 +651,38 @@ export class MonthRangePicker extends React.Component<
           <Icon icon="clock" className="icon" />
         </a>
 
-        {!(useMobileUI && isMobile()) && isOpened ? (
-          <Overlay
-            target={() => this.dom.current}
-            onHide={this.close}
-            container={popOverContainer || (() => findDOMNode(this))}
-            rootClose={false}
-            placement={overlayPlacement}
-            show
-          >
-            <PopOver
-              classPrefix={ns}
-              className={cx(`${ns}DateRangePicker-popover`, popoverClassName)}
-              onHide={this.close}
-              onClick={this.handlePopOverClick}
-              overlay
-            >
-              {this.renderCalendar()}
-            </PopOver>
-          </Overlay>
-        ) : null}
-        {
-          useMobileUI && isMobile() && (
+        {isOpened ? (
+          mobileUI ? (
             <PopUp
-              className={cx(`${ns}DateRangePicker-popup`)}
               isShow={isOpened}
-              onHide={this.handleClick}
+              container={popOverContainer}
+              className={cx(`${ns}CalendarMobile-pop`)}
+              onHide={this.close}
+              header={CalendarMobileTitle}
             >
-              {this.renderCalendar()}
+              {calendarMobile}
             </PopUp>
+          ) : (
+            <Overlay
+              target={() => this.dom.current}
+              onHide={this.close}
+              container={popOverContainer || (() => findDOMNode(this))}
+              rootClose={false}
+              placement={overlayPlacement}
+              show
+            >
+              <PopOver
+                classPrefix={ns}
+                className={cx(`${ns}DateRangePicker-popover`, popoverClassName)}
+                onHide={this.close}
+                onClick={this.handlePopOverClick}
+                overlay
+              >
+                {this.renderCalendar()}
+              </PopOver>
+            </Overlay>
           )
-        }
+        ) : null}
       </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

@@ -5,7 +5,8 @@
 import React, {
   memo,
   ReactNode,
-  useState
+  useState,
+  useEffect
 } from 'react';
 import {uncontrollable} from 'uncontrollable';
 
@@ -18,8 +19,9 @@ 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;
+  valueField?: string;
   className?: string;
   showToolbar?: boolean;
   defaultValue?: PickerValue[];
@@ -28,17 +30,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,16 +42,18 @@ function fixToArray(data: any) {
   return data;
 }
 
-const Picker = memo<PickerProps>((props) => {
+const Picker = memo<PickerProps>(props => {
   const {
+    title,
     labelField,
+    valueField,
     visibleItemCount = 5,
     value = [],
     swipeDuration = 1000,
     columns = [],
-    itemHeight = 30,
+    itemHeight = 48,
     showToolbar = true,
-    className='',
+    className = '',
     classnames: cx,
     classPrefix: ns,
     translate: __
@@ -65,9 +61,14 @@ 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(() => {
+    if (value === innerValue) return
+    setInnerValue(fixToArray(value));
+  }, [value])
+
   const close = () => {
     if (props.onClose) {
       props.onClose(innerValue);
@@ -80,7 +81,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);
@@ -95,7 +100,8 @@ const Picker = memo<PickerProps>((props) => {
         {...item}
         classnames={cx}
         classPrefix={ns}
-        labelField={labelField}
+        labelField={labelField || item.labelField} 
+        valueField={valueField || item.valueField}
         itemHeight={itemHeight}
         swipeDuration={swipeDuration}
         visibleItemCount={visibleItemCount}
@@ -103,7 +109,9 @@ const Picker = memo<PickerProps>((props) => {
         onChange={(val: string | number, i, confirm) => {
           onChange(val, index, confirm);
         }}
-    />)
+        key={`column${index}`}
+      />
+    );
   };
 
   const wrapHeight = itemHeight * +visibleItemCount;
@@ -112,23 +120,35 @@ const Picker = memo<PickerProps>((props) => {
   const maskStyle = {
     backgroundSize: `100% ${(wrapHeight - itemHeight) / 2}px`
   };
-
+  const hasHeader = showToolbar || title;
   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')}>
+      {hasHeader && (<div className={cx('PickerColumns-header')}>
+          {showToolbar && (<Button
+            className="PickerColumns-cancel"
+            level="default"
+            onClick={close}
+          >
+            {__('cancel')}
+          </Button>)}
+          {title && (
+            <div className={cx('PickerColumns-title')}>
+              {title}
+            </div>
+          )}
+          {showToolbar && (<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

@@ -21,6 +21,7 @@ import useTouch from '../hooks/use-touch';
 
 export interface PickerColumnItem {
   labelField?: string;
+  valueField?: string;
   readonly?: boolean;
   value?: PickerOption;
   swipeDuration?: number;
@@ -33,7 +34,7 @@ export interface PickerColumnItem {
     index?: number,
     confirm?: boolean
   ) => void;
-};
+}
 
 export interface PickerColumnProps extends PickerColumnItem, ThemeProps {}
 
@@ -64,12 +65,13 @@ function getElementTranslateY(element: HTMLElement | null) {
 function isOptionDisabled(option: PickerOption) {
   return isObject(option) && option.disabled;
 }
-  
+
 const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   const {
     visibleItemCount = 5,
-    itemHeight = 30,
+    itemHeight = 48,
     value,
+    valueField = 'value',
     swipeDuration = 1000,
     labelField = 'text',
     options = [],
@@ -88,7 +90,24 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
 
   const touch = useTouch();
   const count = options.length;
-  const defaultIndex = options.findIndex(item => item === value);
+
+  const getOptionText = (option: [] | PickerOption) => {
+    if (isObject(option) && labelField in option) {
+      //@ts-ignore
+      return option[labelField];
+    }
+    return option;
+  };
+
+  const getOptionValue = (option: [] | PickerOption) => {
+    if (isObject(option) && valueField in option) {
+      //@ts-ignore
+      return option[valueField];
+    }
+    return option;
+  };
+
+  const defaultIndex = options.findIndex(item => getOptionValue(item) === value);
 
   const baseOffset = useMemo(() => {
     // 默认转入第一个选项的位置
@@ -134,12 +153,9 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
       if (emitChange && props.onChange) {
         requestAnimationFrame(
           () => {
-            props.onChange?.(options[index], index, confirm);
+            props.onChange?.(getOptionValue(options[index]), index, confirm);
           }
         );
-        // setTimeout(() => {
-        //   props.onChange?.(options[index], index, confirm);
-        // }, 0);
       }
     };
 
@@ -156,7 +172,7 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
   const setOptions = (options: Array<PickerOption>) => {
     if (JSON.stringify(options) !== JSON.stringify(state.options)) {
       updateState({options});
-      const index = options.findIndex(item => item === value) || 0;
+      const index = options.findIndex(item => getOptionValue(item) === value) || 0;
       setIndex(index, true, true);
     }
   };
@@ -170,14 +186,6 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
     setIndex(index, true, true);
   };
 
-  const getOptionText = (option: [] | PickerOption) => {
-    if (isObject(option) && labelField in option) {
-      //@ts-ignore
-      return option[labelField];
-    }
-    return option;
-  };
-
   const getIndexByOffset = (offset: number) =>
     range(Math.round(-offset / itemHeight), 0, count - 1);
 
@@ -301,7 +309,7 @@ const PickerColumn = forwardRef<{}, PickerColumnProps>((props, ref) => {
           onClickItem(index);
         }
       };
-      
+
       const childData = {
         className: 'text-ellipsis',
         children: text
@@ -357,23 +365,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>
   );
 });
 
@@ -381,7 +389,7 @@ PickerColumn.defaultProps = {
   options: [],
   visibleItemCount: 5,
   swipeDuration: 1000,
-  itemHeight: 30
+  itemHeight: 48
 };
 
 export default themeable(
@@ -389,4 +397,3 @@ export default themeable(
     value: 'onChange'
   })
 );
-