amis 1.5.6-beta.0 → 1.5.7

package/src/Root.tsx

@@ -150,6 +150,7 @@ export function renderChild(
     <SchemaRenderer
       {...props}
       schema={schema}
+      propKey={schema.key}
       $path={`${prefix ? `${prefix}/` : ''}${(schema && schema.type) || ''}`}
     />
   );

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/SchemaRenderer.tsx

@@ -242,6 +242,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
         data: defaultData,
         value: defaultValue,
         activeKey: defaultActiveKey,
+        key: propKey,
         ...restSchema
       } = schema;
       return rest.invisible
@@ -253,6 +254,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
             defaultData,
             defaultValue,
             defaultActiveKey,
+            propKey,
             $path: $path,
             $schema: schema,
             ref: isSFC ? undefined : this.refFn,
@@ -293,6 +295,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
     const {
       data: defaultData,
       value: defaultValue,
+      key: propKey,
       activeKey: defaultActiveKey,
       ...restSchema
     } = schema;
@@ -321,6 +324,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
         defaultData={restSchema.defaultData ?? defaultData}
         defaultValue={restSchema.defaultValue ?? defaultValue}
         defaultActiveKey={defaultActiveKey}
+        propKey={propKey}
         $path={$path}
         $schema={{...schema, ...exprProps}}
         ref={this.refFn}

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/Card.tsx

@@ -176,7 +176,7 @@ export class Card extends React.Component<CardProps> {
             </div>
           </div>
         ) : (
-          <div>
+          <>
             {heading}
             {body ? (
               <div className={cx('Card-body', bodyClassName)}>{body}</div>
@@ -193,7 +193,7 @@ export class Card extends React.Component<CardProps> {
                 ) : null}
               </div>
             ) : null}
-          </div>
+          </>
         )}
       </div>
     );

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;
@@ -55,7 +56,6 @@ export interface CollapseState {
 }
 
 export class Collapse extends React.Component<CollapseProps, CollapseState> {
-
   static defaultProps: Partial<CollapseProps> = {
     mountOnEnter: false,
     unmountOnExit: false,
@@ -79,10 +79,13 @@ 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(nextProps: CollapseProps, preState: CollapseState) {
+  static getDerivedStateFromProps(
+    nextProps: CollapseProps,
+    preState: CollapseState
+  ) {
     if (nextProps.propsUpdate && nextProps.collapsed !== preState.collapsed) {
       return {
         collapsed: !!nextProps.collapsed
@@ -164,7 +167,9 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
       children
     } = this.props;
 
-    const finalHeader = this.state.collapsed ? header : collapseHeader || header;
+    const finalHeader = this.state.collapsed
+      ? header
+      : collapseHeader || header;
 
     let dom = [
       finalHeader ? (
@@ -173,14 +178,18 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
           onClick={this.toggleCollapsed}
           className={cx(`Collapse-header`, headingClassName)}
         >
-          {showArrow && collapsable
-            ? expandIcon
-              ? React.cloneElement(expandIcon, {
-                  ...expandIcon.props,
-                  className: cx('Collapse-icon-tranform')
-                })
-              : <span className={cx('Collapse-arrow')} />
-              : ''}
+          {showArrow && collapsable ? (
+            expandIcon ? (
+              React.cloneElement(expandIcon, {
+                ...expandIcon.props,
+                className: cx('Collapse-icon-tranform')
+              })
+            ) : (
+              <span className={cx('Collapse-arrow')} />
+            )
+          ) : (
+            ''
+          )}
           {finalHeader}
         </HeadingComponent>
       ) : null,
@@ -213,7 +222,6 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
           );
         }}
       </Transition>
-      
     ];
 
     if (headerPosition === 'bottom') {

package/src/components/CollapseGroup.tsx

@@ -28,7 +28,6 @@ class CollapseGroup extends React.Component<
   CollapseGroupProps,
   CollapseGroupState
 > {
-
   static defaultProps: Partial<CollapseGroupProps> = {
     className: '',
     accordion: false,
@@ -58,21 +57,18 @@ class CollapseGroup extends React.Component<
     if (collapsed) {
       if (this.props.accordion) {
         activeKey = [];
-      }
-      else {
-        for(let i = 0; i < activeKey.length; i++) {
+      } else {
+        for (let i = 0; i < activeKey.length; i++) {
           if (activeKey[i] === item.id) {
             activeKey.splice(i, 1);
             break;
           }
         }
       }
-    }
-    else {
+    } else {
       if (this.props.accordion) {
         activeKey = [item.id];
-      }
-      else {
+      } else {
         activeKey.push(item.id);
       }
     }
@@ -88,7 +84,8 @@ class CollapseGroup extends React.Component<
 
     return children.map((child: React.ReactElement, index: number) => {
       let props = child.props;
-      const id = props.schema.key || String(index);
+
+      const id = props.propKey || String(index);
       const collapsed = this.state.activeKey.indexOf(id) === -1;
 
       return React.cloneElement(child as any, {
@@ -98,7 +95,8 @@ class CollapseGroup extends React.Component<
         collapsed,
         expandIcon: this.props.expandIcon,
         propsUpdate: true,
-        onCollapse: (item: CollapseProps, collapsed: boolean) => this.collapseChange(item, collapsed)
+        onCollapse: (item: CollapseProps, collapsed: boolean) =>
+          this.collapseChange(item, collapsed)
       });
     });
   };
@@ -116,7 +114,7 @@ class CollapseGroup extends React.Component<
         className={cx(
           `CollapseGroup`,
           {
-            'icon-position-right': expandIconPosition === 'right',
+            'icon-position-right': expandIconPosition === 'right'
           },
           className
         )}

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