amis 1.5.6-beta.4 → 1.5.8-beta.2

package/src/components/CodeMirror.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import 'codemirror/lib/codemirror.css';
+import type CodeMirror from 'codemirror';
+import {autobind} from '../utils/helper';
+import {resizeSensor} from '../utils/resize-sensor';
+
+export interface CodeMirrorEditorProps {
+  className?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  onFocus?: (e: any) => void;
+  onBlur?: (e: any) => void;
+  editorFactory?: (
+    dom: HTMLElement,
+    cm: typeof CodeMirror,
+    props?: any
+  ) => CodeMirror.Editor;
+  editorDidMount?: (cm: typeof CodeMirror, editor: CodeMirror.Editor) => void;
+  editorWillUnMount?: (
+    cm: typeof CodeMirror,
+    editor: CodeMirror.Editor
+  ) => void;
+}
+
+export class CodeMirrorEditor extends React.Component<CodeMirrorEditorProps> {
+  dom = React.createRef<HTMLDivElement>();
+
+  editor?: CodeMirror.Editor;
+  toDispose: Array<() => void> = [];
+  unmounted = false;
+  async componentDidMount() {
+    const cm = (await import('codemirror')).default;
+    // @ts-ignore
+    await import('codemirror/mode/javascript/javascript');
+    // @ts-ignore
+    await import('codemirror/mode/htmlmixed/htmlmixed');
+    await import('codemirror/addon/mode/simple');
+    await import('codemirror/addon/mode/multiplex');
+    if (this.unmounted) {
+      return;
+    }
+
+    this.editor =
+      this.props.editorFactory?.(this.dom.current!, cm, this.props) ??
+      cm(this.dom.current!, {
+        value: this.props.value || ''
+      });
+
+    this.props.editorDidMount?.(cm, this.editor);
+    this.editor.on('change', this.handleChange);
+
+    this.toDispose.push(
+      resizeSensor(this.dom.current as HTMLElement, () =>
+        this.editor?.refresh()
+      )
+    );
+    // todo 以后优化这个，解决弹窗里面默认光标太小的问题
+    setTimeout(() => this.editor?.refresh(), 350);
+    this.toDispose.push(() => {
+      this.props.editorWillUnMount?.(cm, this.editor!);
+    });
+  }
+
+  componentDidUpdate(prevProps: CodeMirrorEditorProps) {
+    const props = this.props;
+
+    if (props.value !== prevProps.value) {
+      this.editor && this.setValue(props.value);
+    }
+  }
+
+  componentWillUnmount() {
+    this.unmounted = true;
+    this.editor?.off('change', this.handleChange);
+    this.toDispose.forEach(fn => fn());
+    this.toDispose = [];
+  }
+
+  @autobind
+  handleChange(editor: any) {
+    this.props.onChange?.(editor.getValue());
+  }
+
+  setValue(value?: string) {
+    const doc = this.editor!.getDoc();
+    if (value && value !== doc.getValue()) {
+      const cursor = doc.getCursor();
+      doc.setValue(value);
+      doc.setCursor(cursor);
+    }
+  }
+
+  render() {
+    const {className} = this.props;
+    return <div className={className} ref={this.dom}></div>;
+  }
+}
+
+export default CodeMirrorEditor;

package/src/components/Collapse.tsx

@@ -26,13 +26,14 @@ const collapseStyles: {
 export interface CollapseProps {
   key?: string;
   id?: string;
+  propKey?: string;
   mountOnEnter?: boolean;
   unmountOnExit?: boolean;
   className?: string;
   classPrefix: string;
   classnames: ClassNamesFn;
   headerPosition?: 'top' | 'bottom';
-  header?: React.ReactElement;
+  header?: React.ReactNode;
   body: any;
   bodyClassName?: string;
   disabled?: boolean;
@@ -78,7 +79,7 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
     super(props);
 
     this.toggleCollapsed = this.toggleCollapsed.bind(this);
-    this.state.collapsed = !!props.collapsed;
+    this.state.collapsed = props.collapsable ? !!props.collapsed : false;
   }
 
   static getDerivedStateFromProps(

package/src/components/ColorPicker.tsx

@@ -11,8 +11,9 @@ import {Icon} from './icons';
 import Overlay from './Overlay';
 import {uncontrollable} from 'uncontrollable';
 import PopOver from './PopOver';
+import PopUp from './PopUp';
 import {ClassNamesFn, themeable, ThemeProps} from '../theme';
-import {autobind, isObject} from '../utils/helper';
+import {autobind, isMobile, isObject} from '../utils/helper';
 import {localeable, LocaleProps} from '../locale';
 
 export type PresetColor = {color: string; title: string} | string;
@@ -32,6 +33,7 @@ export interface ColorProps extends LocaleProps, ThemeProps {
   presetColors?: PresetColor[];
   resetValue?: string;
   allowCustomColor?: boolean;
+  useMobileUI?: boolean;
 }
 
 export interface ColorControlState {
@@ -218,7 +220,8 @@ export class ColorControl extends React.PureComponent<
       placement,
       classnames: cx,
       presetColors,
-      allowCustomColor
+      allowCustomColor,
+      useMobileUI
     } = this.props;
 
     const __ = this.props.translate;
@@ -270,7 +273,7 @@ export class ColorControl extends React.PureComponent<
           <Icon icon="caret" className="icon" onClick={this.handleClick} />
         </span>
 
-        {isOpened ? (
+        {!(useMobileUI && isMobile()) && isOpened ? (
           <Overlay
             placement={placement || 'auto'}
             target={() => findDOMNode(this)}
@@ -317,6 +320,43 @@ export class ColorControl extends React.PureComponent<
             </PopOver>
           </Overlay>
         ) : null}
+        {useMobileUI && isMobile() && (
+          <PopUp
+            className={cx(`${ns}ColorPicker-popup`)}
+            isShow={isOpened}
+            onHide={this.handleClick}
+          >
+            {allowCustomColor ? (
+              <SketchPicker
+                styles={{}}
+                disableAlpha={!!~['rgb', 'hex'].indexOf(format as string)}
+                color={value}
+                presetColors={presetColors}
+                onChangeComplete={this.handleChange}
+              />
+            ) : (
+              <GithubPicker
+                color={value}
+                colors={
+                  Array.isArray(presetColors)
+                    ? (presetColors
+                        .filter(
+                          item => typeof item === 'string' || isObject(item)
+                        )
+                        .map(item =>
+                          typeof item === 'string'
+                            ? item
+                            : isObject(item)
+                            ? item?.color
+                            : item
+                        ) as string[])
+                    : undefined
+                }
+                onChangeComplete={this.handleChange}
+              />
+            )}
+          </PopUp>
+        )}
       </div>
     );
   }

package/src/components/DatePicker.tsx

@@ -9,13 +9,14 @@ import moment from 'moment';
 import 'moment/locale/zh-cn';
 import {Icon} from './icons';
 import PopOver from './PopOver';
+import PopUp from './PopUp';
 import Overlay from './Overlay';
 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 {ucFirst} from '../utils/helper';
+import {isMobile, ucFirst} from '../utils/helper';
 
 const availableShortcuts: {[propName: string]: any} = {
   now: {
@@ -279,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;
@@ -314,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,
@@ -559,6 +566,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
       borderMode,
       embed,
       minDate,
+      useMobileUI,
+      maxDate,
       schedules,
       largeMode,
       scheduleClassNames,
@@ -569,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)) {
@@ -615,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}
@@ -662,7 +671,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
           <Icon icon="clock" className="icon" />
         </a>
 
-        {isOpened ? (
+        {!(useMobileUI && isMobile()) && isOpened ? (
           <Overlay
             target={this.getTarget}
             container={popOverContainer || this.getParent}
@@ -693,11 +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}
       </div>
     );
   }

package/src/components/DateRangePicker.tsx

@@ -13,10 +13,12 @@ import Overlay from './Overlay';
 import {ShortCuts, ShortCutDateRange} from './DatePicker';
 import Calendar from './calendar/Calendar';
 import PopOver from './PopOver';
+import PopUp from './PopUp';
 import {ClassNamesFn, themeable, ThemeProps} from '../theme';
 import {PlainObject} from '../types';
-import {noop, ucFirst} from '../utils/helper';
+import {isMobile, noop, ucFirst} from '../utils/helper';
 import {LocaleProps, localeable} from '../locale';
+import CalendarMobile from './CalendarMobile';
 
 export interface DateRangePickerProps extends ThemeProps, LocaleProps {
   className?: string;
@@ -47,6 +49,7 @@ export interface DateRangePickerProps extends ThemeProps, LocaleProps {
   embed?: boolean;
   viewMode?: 'days' | 'months' | 'years' | 'time' | 'quarters';
   borderMode?: 'full' | 'half' | 'none';
+  useMobileUI?: boolean;
 }
 
 export interface DateRangePickerState {
@@ -285,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 = {
@@ -497,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();
@@ -760,10 +774,20 @@ export class DateRangePicker extends React.Component<
       disabled,
       embed,
       overlayPlacement,
-      borderMode
+      borderMode,
+      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,
@@ -782,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
@@ -793,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}
@@ -837,7 +884,19 @@ export class DateRangePicker extends React.Component<
         </a>
 
         {isOpened ? (
-          <Overlay
+          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))}

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

@@ -12,14 +12,16 @@ import {Icon} from './icons';
 import Overlay from './Overlay';
 import Calendar from './calendar/Calendar';
 import PopOver from './PopOver';
+import PopUp from './PopUp';
 import {themeable, ThemeProps} from '../theme';
 import {PlainObject} from '../types';
-import {noop} from '../utils/helper';
+import {isMobile, noop} from '../utils/helper';
 import {LocaleProps, localeable} from '../locale';
 import {DateRangePicker} from './DateRangePicker';
 import capitalize from 'lodash/capitalize';
 import {ShortCuts, ShortCutDateRange} from './DatePicker';
 import {availableRanges} from './DateRangePicker';
+import CalendarMobile from './CalendarMobile';
 
 export interface MonthRangePickerProps extends ThemeProps, LocaleProps {
   className?: string;
@@ -47,6 +49,7 @@ export interface MonthRangePickerProps extends ThemeProps, LocaleProps {
   resetValue?: any;
   popOverContainer?: any;
   embed?: boolean;
+  useMobileUI?: boolean;
 }
 
 export interface MonthRangePickerState {
@@ -97,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 = {
@@ -278,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(
@@ -528,10 +542,18 @@ export class MonthRangePicker extends React.Component<
       clearable,
       disabled,
       embed,
-      overlayPlacement
+      overlayPlacement,
+      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,
@@ -550,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
@@ -561,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}
@@ -604,7 +648,17 @@ export class MonthRangePicker extends React.Component<
         </a>
 
         {isOpened ? (
-          <Overlay
+          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))}

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;