amis 1.5.6-beta.4 → 1.5.6-beta.5

package/src/Schema.ts

@@ -227,6 +227,7 @@ export type SchemaType =
   | 'input-time-range'
   | 'input-datetime-range'
   | 'input-excel'
+  | 'input-formula'
   | 'diff-editor'
 
   // editor 系列

package/src/components/AsideNav.tsx

@@ -24,7 +24,7 @@ interface LinkItemProps {
 
 export interface Navigation {
   label: string;
-  children: Array<LinkItem>;
+  children?: Array<LinkItem>;
   prefix?: JSX.Element;
   affix?: JSX.Element;
   className?: string;

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;

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,45 @@ 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 { localeable, LocaleProps, TranslateFn } from '../locale';
+import {isMobile, ucFirst} from '../utils/helper';
 
 const availableShortcuts: {[propName: string]: any} = {
   now: {
@@ -559,6 +560,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
       borderMode,
       embed,
       minDate,
+      useMobileUI,
       schedules,
       largeMode,
       scheduleClassNames,
@@ -662,7 +664,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}
@@ -698,6 +700,34 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
             </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,9 +13,10 @@ 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';
 
 export interface DateRangePickerProps extends ThemeProps, LocaleProps {
@@ -47,6 +48,7 @@ export interface DateRangePickerProps extends ThemeProps, LocaleProps {
   embed?: boolean;
   viewMode?: 'days' | 'months' | 'years' | 'time' | 'quarters';
   borderMode?: 'full' | 'half' | 'none';
+  useMobileUI?: boolean;
 }
 
 export interface DateRangePickerState {
@@ -760,7 +762,8 @@ export class DateRangePicker extends React.Component<
       disabled,
       embed,
       overlayPlacement,
-      borderMode
+      borderMode,
+      useMobileUI
     } = this.props;
 
     const {isOpened, isFocused} = this.state;
@@ -836,7 +839,7 @@ export class DateRangePicker extends React.Component<
           <Icon icon="clock" className="icon" />
         </a>
 
-        {isOpened ? (
+        {!(useMobileUI && isMobile()) && isOpened ? (
           <Overlay
             target={() => this.dom.current}
             onHide={this.close}
@@ -856,6 +859,17 @@ 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/MonthRangePicker.tsx

@@ -12,14 +12,15 @@ 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 { availableRanges } from './DateRangePicker';
 
 export interface MonthRangePickerProps extends ThemeProps, LocaleProps {
   className?: string;
@@ -47,6 +48,7 @@ export interface MonthRangePickerProps extends ThemeProps, LocaleProps {
   resetValue?: any;
   popOverContainer?: any;
   embed?: boolean;
+  useMobileUI?: boolean;
 }
 
 export interface MonthRangePickerState {
@@ -528,7 +530,8 @@ export class MonthRangePicker extends React.Component<
       clearable,
       disabled,
       embed,
-      overlayPlacement
+      overlayPlacement,
+      useMobileUI
     } = this.props;
 
     const {isOpened, isFocused} = this.state;
@@ -603,7 +606,7 @@ export class MonthRangePicker extends React.Component<
           <Icon icon="clock" className="icon" />
         </a>
 
-        {isOpened ? (
+        {!(useMobileUI && isMobile()) && isOpened ? (
           <Overlay
             target={() => this.dom.current}
             onHide={this.close}
@@ -623,6 +626,17 @@ 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/PickerContainer.tsx

@@ -10,11 +10,12 @@ import Button from './Button';
 
 export interface PickerContainerProps extends ThemeProps, LocaleProps {
   title?: string;
+  showTitle?: boolean;
   children: (props: {
     onClick: (e: React.MouseEvent) => void;
     isOpened: boolean;
   }) => JSX.Element;
-  popOverRender: (props: {
+  bodyRender: (props: {
     onClose: () => void;
     value: any;
     onChange: (value: any) => void;
@@ -85,8 +86,9 @@ export class PickerContainer extends React.Component<
   render() {
     const {
       children,
-      popOverRender: dropdownRender,
+      bodyRender: popOverRender,
       title,
+      showTitle,
       translate: __,
       size
     } = this.props;
@@ -103,11 +105,13 @@ export class PickerContainer extends React.Component<
           show={this.state.isOpened}
           onHide={this.close}
         >
-          <Modal.Header onClose={this.close}>
-            {__(title || 'Select.placeholder')}
-          </Modal.Header>
+          {showTitle !== false ? (
+            <Modal.Header onClose={this.close}>
+              {__(title || 'Select.placeholder')}
+            </Modal.Header>
+          ) : null}
           <Modal.Body>
-            {dropdownRender({
+            {popOverRender({
               onClose: this.close,
               value: this.state.value,
               onChange: this.handleChange

package/src/components/PopUp.tsx

@@ -0,0 +1,133 @@
+/**
+ * @file PopUp
+ * @description
+ * @author fex
+ */
+
+import React from 'react';
+import {ClassNamesFn, themeable} from '../theme';
+import Transition, {
+  ENTERED,
+  EXITING,
+  EXITED,
+  ENTERING
+} from 'react-transition-group/Transition';
+import Portal from 'react-overlays/Portal';
+import { Icon } from './icons';
+
+
+export interface PopUpPorps {
+  className?: string;
+  style?: {
+    [styleName: string]: string;
+  };
+  overlay?: boolean;
+  onHide?: () => void;
+  classPrefix: string;
+  classnames: ClassNamesFn;
+  [propName: string]: any;
+  isShow?: boolean;
+  container?: any;
+  hideClose?: boolean;
+  placement?: 'left' | 'center' | 'right';
+}
+
+const fadeStyles: {
+  [propName: string]: string;
+} = {
+  [ENTERED]: '',
+  [EXITING]: 'out',
+  [EXITED]: '',
+  [ENTERING]: 'in'
+};
+export class PopUp extends React.PureComponent<PopUpPorps> {
+  static defaultProps = {
+    className: '',
+    overlay: true,
+    isShow: false,
+    container: document.body,
+    hideClose: false,
+  };
+
+  componentDidMount() {
+
+  }
+  handleClick(e: React.MouseEvent) {
+    e.stopPropagation();
+  }
+
+  render() {
+    const {
+      style,
+      children,
+      overlay,
+      onHide,
+      classPrefix: ns,
+      classnames: cx,
+      className,
+      isShow,
+      container,
+      hideClose,
+      placement='center',
+      ...rest
+    } = this.props;
+
+    const outerStyle: any = {
+      ...style,
+    };
+    delete outerStyle.top;
+    return (
+      <Portal container={container}>
+        <Transition
+          mountOnEnter
+          unmountOnExit
+          in={isShow}
+          timeout={500}
+          appear
+        >
+          {(status: string) => {
+              return (
+                <div
+                  className={cx(
+                    `${ns}PopUp`,
+                    className,
+                    fadeStyles[status]
+                  )}
+                  style={outerStyle}
+                  {...rest}
+                  onClick={this.handleClick}
+                >
+                  {overlay && (
+                    <div className={`${ns}PopUp-overlay`} onClick={onHide}/>
+                  )}
+                  <div className={cx(
+                    `${ns}PopUp-inner`
+                  )}
+                  >
+                    {
+                      !hideClose && (
+                        <div className={cx(`${ns}PopUp-closeWrap`, 'text-right')}>
+                          <Icon
+                            icon="close"
+                          className={cx('icon', `${ns}PopUp-close`)}
+                            onClick={onHide}
+                          />
+                        </div>
+                      )
+                    }
+                    <div
+                      className={cx(`${ns}PopUp-content`, `justify-${placement}`)}
+                    >
+                      {children}
+                    </div>
+                  </div>
+                </div>
+              )
+          }}
+        </Transition>
+      </Portal>
+    )
+  }
+}
+
+export default themeable(PopUp);

package/src/components/Steps.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {themeable, ThemeProps} from '../theme';
 import {Icon} from './icons';
 import {BaseSchema} from '../Schema';
+import { isMobile } from '../utils/helper';
 
 export enum StepStatus {
   wait = 'wait',
@@ -78,6 +79,7 @@ export interface StepsProps extends ThemeProps {
     [propName: string]: StepStatus;
   };
   mode?: 'horizontal' | 'vertical';
+  useMobileUI?: boolean;
 }
 
 export function Steps(props: StepsProps) {
@@ -87,7 +89,8 @@ export function Steps(props: StepsProps) {
     className,
     current,
     status,
-    mode = 'horizontal'
+    mode = 'horizontal',
+    useMobileUI
   } = props;
   const FINISH_ICON = 'check';
   const ERROR_ICON = 'close';
@@ -122,8 +125,9 @@ export function Steps(props: StepsProps) {
     };
   }
 
+  const mobileUI = useMobileUI && isMobile();
   return (
-    <ul className={cx('Steps', `Steps--${mode}`, className)}>
+    <ul className={cx('Steps', `Steps--${mode}`, mobileUI ? 'Steps-mobile' : '', className)}>
       {stepsRow.map((step, i) => {
         const {stepStatus, icon} = getStepStatus(step, i);
 
@@ -133,7 +137,8 @@ export function Steps(props: StepsProps) {
             className={cx('StepsItem', `is-${stepStatus}`, step.className)}
           >
             <div className={cx('StepsItem-container')}>
-              <div className={cx('StepsItem-containerIcon')}>
+              <div className={cx('StepsItem-containerIcon',
+                      i < current && 'is-success')}>
                 <span className={cx('StepsItem-icon')}>
                   {icon ? <Icon icon={icon} className="icon" /> : i + 1}
                 </span>

package/src/components/TabsTransferPicker.tsx

@@ -44,7 +44,7 @@ export class TransferPicker extends React.Component<TabsTransferPickerProps> {
     return (
       <PickerContainer
         title={__('Select.placeholder')}
-        popOverRender={({onClose, value, onChange}) => {
+        bodyRender={({onClose, value, onChange}) => {
           return <TabsTransfer {...rest} value={value} onChange={onChange} />;
         }}
         value={value}

package/src/components/TransferPicker.tsx

@@ -19,18 +19,9 @@ export interface TransferPickerProps extends Omit<TransferProps, 'itemRender'> {
 }
 
 export class TransferPicker extends React.Component<TransferPickerProps> {
-  @autobind
-  handleClose() {
-    this.setState({
-      inputValue: '',
-      searchResult: null
-    });
-  }
-
   @autobind
   handleConfirm(value: any) {
     this.props.onChange?.(value);
-    this.handleClose();
   }
 
   render() {
@@ -49,12 +40,11 @@ export class TransferPicker extends React.Component<TransferPickerProps> {
     return (
       <PickerContainer
         title={__('Select.placeholder')}
-        popOverRender={({onClose, value, onChange}) => {
+        bodyRender={({onClose, value, onChange}) => {
           return <Transfer {...rest} value={value} onChange={onChange} />;
         }}
         value={value}
         onConfirm={this.handleConfirm}
-        onCancel={this.handleClose}
         size={size}
       >
         {({onClick, isOpened}) => (