amis 1.3.5-beta.3 → 1.4.1

package/src/components/Badge.tsx

@@ -17,7 +17,7 @@ export interface BadgeSchema extends BaseSchema {
   /**
    * 文本内容
    */
-  text?: string;
+  text?: string | number;
 
   /**
    * 大小
@@ -27,13 +27,23 @@ export interface BadgeSchema extends BaseSchema {
   /**
    * 角标类型
    */
-  mode?: 'text' | 'dot';
+  mode?: 'text' | 'dot' | 'ribbon';
+
+  /**
+   * 角标位置，优先级大于position
+   */
+  offset?: [number | string, number | string];
 
   /**
    * 角标位置
    */
   position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
+  /**
+   * 封顶的数字值
+   */
+  overflowCount?: number;
+
   /**
    * 动态控制是否显示
    */
@@ -50,6 +60,11 @@ export interface BadgeSchema extends BaseSchema {
   style?: {
     [propName: string]: any;
   };
+
+  /**
+   * 提示类型
+   */
+  level?: 'info' | 'warning' | 'success' | 'danger';
 }
 
 export interface BadgeProps {
@@ -65,6 +80,62 @@ export class Badge extends React.Component<BadgeProps, object> {
     super(props);
   }
 
+  renderBadge(
+    text: any,
+    size: number,
+    position: any,
+    offsetStyle: any,
+    sizeStyle: any,
+    animationElement: any
+  ) {
+    const {classnames: cx, badge} = this.props;
+    const {
+      mode = 'dot',
+      level = 'danger',
+      style
+    } = badge as BadgeSchema;
+    switch(mode) {
+      case 'dot':
+        return (
+          <span
+            className={cx('Badge-dot', `Badge--${position}`, `Badge--${level}`)}
+            style={{...offsetStyle, ...sizeStyle, ...style}}
+          >
+            {animationElement}
+          </span>
+        );
+      case 'text':
+        return (
+          <span
+            className={cx('Badge-text', `Badge--${position}`, `Badge--${level}`)}
+            style={{...offsetStyle, ...sizeStyle, ...style}}
+          >
+            {text}
+            {animationElement}
+          </span>
+        );
+      case 'ribbon':
+        const outSize = size * Math.sqrt(2) + 5;
+        return (
+          <div
+            className={cx('Badge-ribbon-out', `Badge-ribbon-out--${position}`)}
+            style={{width: outSize, height: outSize}}
+          >
+            <span
+              className={cx('Badge-ribbon', `Badge-ribbon--${position}`, `Badge--${level}`)}
+              style={{...sizeStyle, ...style}}
+            >
+              {text}
+              {animationElement}
+            </span>
+          </div>
+
+        );
+      default:
+        return null;
+    }
+  }
+
   render() {
     const badge = this.props.badge;
     if (!badge) {
@@ -81,7 +152,9 @@ export class Badge extends React.Component<BadgeProps, object> {
       text,
       size,
       style,
+      offset,
       position = 'top-right',
+      overflowCount = 99,
       visibleOn,
       className,
       animation
@@ -99,6 +172,8 @@ export class Badge extends React.Component<BadgeProps, object> {
     if (typeof size === 'undefined') {
       if (mode === 'dot') {
         size = 6;
+      } else if (mode === 'ribbon'){
+        size = 12;
       } else {
         size = 16;
       }
@@ -111,6 +186,12 @@ export class Badge extends React.Component<BadgeProps, object> {
         height: size,
         lineHeight: size + 'px'
       };
+      // 当text、overflowCount都为number类型时，进行封顶值处理
+      if (typeof text === 'number' && typeof overflowCount === 'number') {
+        text = (
+          (text as number) > (overflowCount as number) ? `${overflowCount}+` : text
+        ) as string | number;
+      }
 
       if (!text) {
         isDisplay = false;
@@ -121,6 +202,25 @@ export class Badge extends React.Component<BadgeProps, object> {
       sizeStyle = {width: size, height: size};
     }
 
+    if (mode === 'ribbon') {
+      sizeStyle = {
+        height: size,
+        lineHeight: size + 'px',
+        fontSize: size
+      };
+    }
+
+    let offsetStyle = {};
+    // 如果设置了offset属性，offset在position为'top-right'的基础上进行translate定位
+    if (offset && offset.length) {
+      position = 'top-right';
+      const left = `calc(50% + ${parseInt(offset[0] as string, 10)}px)`;
+      const right = `calc(-50% + ${parseInt(offset[1] as string, 10)}px)`;
+      offsetStyle = {
+        transform: `translate(${left}, ${right})`,
+      };
+    }
+
     let animationBackground = 'var(--danger)';
 
     if (style && style.background) {
@@ -145,24 +245,15 @@ export class Badge extends React.Component<BadgeProps, object> {
     return (
       <div className={cx('Badge', className)}>
         {children}
-        {isDisplay ? (
-          mode === 'dot' ? (
-            <span
-              className={cx('Badge-dot', `Badge--${position}`)}
-              style={{...sizeStyle, ...style}}
-            >
-              {animationElement}
-            </span>
-          ) : (
-            <span
-              className={cx('Badge-text', `Badge--${position}`)}
-              style={{...sizeStyle, ...style}}
-            >
-              {text}
-              {animationElement}
-            </span>
-          )
-        ) : null}
+        {isDisplay ?
+          this.renderBadge(
+            text,
+            size,
+            position,
+            offsetStyle,
+            sizeStyle,
+            animationElement
+          ) : null}
       </div>
     );
   }

package/src/components/Button.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import TooltipWrapper, {TooltipObject, Trigger} from './TooltipWrapper';
 import {pickEventsProps} from '../utils/helper';
 import {ClassNamesFn, themeable} from '../theme';
-
+import {Icon} from './icons';
 interface ButtonProps extends React.DOMAttributes<HTMLButtonElement> {
   id?: string;
   className?: string;
@@ -16,7 +16,7 @@ interface ButtonProps extends React.DOMAttributes<HTMLButtonElement> {
   type: 'button' | 'reset' | 'submit';
   level: string; // 'link' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'default';
   tooltip?: string | TooltipObject;
-  placement: 'top' | 'right' | 'bottom' | 'left';
+  tooltipPlacement: 'top' | 'right' | 'bottom' | 'left';
   tooltipContainer?: any;
   tooltipTrigger: Trigger | Array<Trigger>;
   tooltipRootClose: boolean;
@@ -29,6 +29,8 @@ interface ButtonProps extends React.DOMAttributes<HTMLButtonElement> {
   classnames: ClassNamesFn;
   componentClass: React.ReactType;
   overrideClassName?: boolean;
+  loading?: boolean;
+  loadingClassName?: string;
 }
 
 export class Button extends React.Component<ButtonProps> {
@@ -37,14 +39,14 @@ export class Button extends React.Component<ButtonProps> {
     | 'componentClass'
     | 'level'
     | 'type'
-    | 'placement'
+    | 'tooltipPlacement'
     | 'tooltipTrigger'
     | 'tooltipRootClose'
   > = {
     componentClass: 'button',
     level: 'default',
     type: 'button',
-    placement: 'top',
+    tooltipPlacement: 'top',
     tooltipTrigger: ['hover', 'focus'],
     tooltipRootClose: false
   };
@@ -64,13 +66,15 @@ export class Button extends React.Component<ButtonProps> {
       active,
       iconOnly,
       href,
+      loading,
+      loadingClassName,
       overrideClassName,
       ...rest
     } = this.props;
 
     if (href) {
       Comp = 'a';
-    } else if (Comp === 'button' && disabled) {
+    } else if ((Comp === 'button' && disabled) || loading) {
       Comp = 'div';
     }
 
@@ -95,6 +99,18 @@ export class Button extends React.Component<ButtonProps> {
         )}
         disabled={disabled}
       >
+        {loading && !disabled ? (
+          <span
+            className={cx(
+              overrideClassName
+                ? ''
+                : {[`Button--loading Button--loading--${level}`]: level},
+              loadingClassName
+            )}
+          >
+            <Icon icon="loading-outline" className="icon" />
+          </span>
+        ) : null}
         {children}
       </Comp>
     );
@@ -103,7 +119,7 @@ export class Button extends React.Component<ButtonProps> {
   render() {
     const {
       tooltip,
-      placement,
+      tooltipPlacement,
       tooltipContainer,
       tooltipTrigger,
       tooltipRootClose,
@@ -114,7 +130,7 @@ export class Button extends React.Component<ButtonProps> {
 
     return (
       <TooltipWrapper
-        placement={placement}
+        placement={tooltipPlacement}
         tooltip={disabled ? disabledTip : tooltip}
         container={tooltipContainer}
         trigger={tooltipTrigger}

package/src/components/Checkbox.tsx

@@ -15,7 +15,7 @@ interface CheckboxProps {
   label?: string;
   labelClassName?: string;
   className?: string;
-  onChange?: (value: any) => void;
+  onChange?: (value: any, shift?: boolean) => void;
   value?: any;
   inline?: boolean;
   trueValue?: any;
@@ -48,7 +48,10 @@ export class Checkbox extends React.Component<CheckboxProps, any> {
       return;
     }
 
-    onChange(e.currentTarget.checked ? trueValue : falseValue);
+    onChange(
+      e.currentTarget.checked ? trueValue : falseValue,
+      (e.nativeEvent as MouseEvent).shiftKey
+    );
   }
 
   render() {

package/src/components/Drawer.tsx

@@ -8,7 +8,8 @@ import React from 'react';
 import Transition, {
   ENTERED,
   ENTERING,
-  EXITING
+  EXITING,
+  EXITED
 } from 'react-transition-group/Transition';
 import Portal from 'react-overlays/Portal';
 import {Icon} from './icons';
@@ -230,7 +231,7 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
                   >
                     <Icon icon="close" className="icon" />
                   </a>
-                  {children}
+                  {status === EXITED ? null : children}
                 </div>
               </div>
             );

package/src/components/Modal.tsx

@@ -8,7 +8,8 @@ import React from 'react';
 import Transition, {
   ENTERED,
   ENTERING,
-  EXITING
+  EXITING,
+  EXITED
 } from 'react-transition-group/Transition';
 import Portal from 'react-overlays/Portal';
 import {current, addModal, removeModal} from './ModalManager';
@@ -264,7 +265,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
                   fadeStyles[status]
                 )}
               >
-                {children}
+                {status === EXITED ? null : children}
               </div>
             </div>
           </Portal>

package/src/components/RichText.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 
 // @ts-ignore
-import FroalaEditorComponent from 'react-froala-wysiwyg';
+import FroalaEditor from 'froala-editor';
 // @ts-ignore
 import Froala from 'froala-editor/js/froala_editor.min.js';
 import 'froala-editor/js/plugins/align.min';
@@ -45,51 +45,307 @@ import 'froala-editor/js/languages/zh_cn.js';
 import 'froala-editor/css/froala_style.min.css';
 import 'froala-editor/css/froala_editor.pkgd.min.css';
 
-export default class FroalaEditor extends React.Component<any, any> {
-  oldModel: any = null;
+export interface FroalaEditorComponentProps {
+  config: any;
+  model: string;
+  onModelChange: (value: string) => void;
+}
 
-  constructor(props: any) {
+// 代码来源于：https://github.com/froala/react-froala-wysiwyg/blob/master/lib/FroalaEditorFunctionality.jsx
+// 改动原因是model 同步有些问题，有时候不更新，所以基于官方代码改造一下。
+// 目前发现的问题是，如果 model 数据修改，如果此时 editor 还没有初始化完成则不会同步成功
+class FroalaEditorComponent extends React.Component<FroalaEditorComponentProps> {
+  listeningEvents: any;
+  element: any;
+  editor: any;
+  config: any;
+  editorInitialized: any;
+  INNER_HTML_ATTR: any;
+  hasSpecialTag: any;
+  oldModel: any;
+  el: any;
+  _initEvents: any;
+
+  constructor(props: FroalaEditorComponentProps) {
     super(props);
-    Froala.VIDEO_PROVIDERS = [
-      {
-        test_regex: /.*/,
-        url_regex: '',
-        url_text: '',
-        html: '<span class="fr-video fr-dvb fr-draggable" contenteditable="false" draggable="true"><video class="fr-draggable" controls="" data-msg="ok" data-status="0" src="{url}" style="width: 600px;"></video></span>'
-      }
-    ];
 
-    this.state = {
-      model: this.props.model
+    this.listeningEvents = [];
+    this.element = null;
+    this.editor = null;
+    this.config = {
+      immediateReactModelUpdate: false,
+      reactIgnoreAttrs: null
     };
-    this.handleModelChange = this.handleModelChange.bind(this);
+
+    this.editorInitialized = false;
+    this.INNER_HTML_ATTR = 'innerHTML';
+
+    this.oldModel = null;
+  }
+
+  // After first time render.
+  componentDidMount() {
+    this.createEditor();
+  }
+
+  componentWillUnmount() {
+    this.destroyEditor();
   }
 
   componentDidUpdate() {
     if (JSON.stringify(this.oldModel) == JSON.stringify(this.props.model)) {
       return;
     }
-    this.handleModelChange(this.props.model);
+
+    this.setContent();
+  }
+
+  // Return cloned object
+  clone(item: any) {
+    const me = this;
+    if (!item) {
+      return item;
+    } // null, undefined values check
+
+    let types = [Number, String, Boolean],
+      result: any;
+
+    // normalizing primitives if someone did new String('aaa'), or new Number('444');
+    types.forEach(function (type) {
+      if (item instanceof type) {
+        result = type(item);
+      }
+    });
+
+    if (typeof result == 'undefined') {
+      if (Object.prototype.toString.call(item) === '[object Array]') {
+        result = [];
+        item.forEach(function (child: any, index: number, array: Array<any>) {
+          result[index] = me.clone(child);
+        });
+      } else if (typeof item == 'object') {
+        // testing that this is DOM
+        if (item.nodeType && typeof item.cloneNode == 'function') {
+          result = item.cloneNode(true);
+        } else if (!item.prototype) {
+          // check that this is a literal
+          if (item instanceof Date) {
+            result = new Date(item);
+          } else {
+            // it is an object literal
+            result = {};
+            for (var i in item) {
+              result[i] = me.clone(item[i]);
+            }
+          }
+        } else {
+          if (false && item.constructor) {
+            result = new item.constructor();
+          } else {
+            result = item;
+          }
+        }
+      } else {
+        result = item;
+      }
+    }
+    return result;
+  }
+
+  createEditor() {
+    if (this.editorInitialized) {
+      return;
+    }
+
+    this.config = this.clone(this.props.config || this.config);
+    this.config = {...this.config};
+
+    this.element = this.el;
+
+    if (this.props.model) {
+      this.element.innerHTML = this.props.model;
+    }
+
+    this.setContent(true);
+
+    // Default initialized.
+    this.registerEvent(
+      'initialized',
+      this.config.events && this.config.events.initialized
+    );
+
+    // Check if events are set.
+    if (!this.config.events) this.config.events = {};
+    this.config.events.initialized = () => this.initListeners();
+
+    this.editor = new FroalaEditor(this.element, this.config);
+  }
+
+  setContent(firstTime?: boolean) {
+    if (this.props.model || this.props.model == '') {
+      this.oldModel = this.props.model;
+
+      if (this.editorInitialized) {
+        this.setNormalTagContent(firstTime);
+      } else {
+        if (!this._initEvents) this._initEvents = [];
+        this._initEvents.push(() => this.setNormalTagContent());
+      }
+    }
+  }
+
+  setNormalTagContent(firstTime?: boolean) {
+    let self = this;
+
+    function htmlSet() {
+      self.editor.html && self.editor.html.set(self.props.model || '');
+      if (self.editorInitialized && self.editor.undo) {
+        //This will reset the undo stack everytime the model changes externally. Can we fix this?
+        self.editor.undo.reset();
+        self.editor.undo.saveStep();
+      }
+    }
+
+    if (firstTime) {
+      if (this.config.initOnClick) {
+        this.registerEvent('initializationDelayed', () => {
+          htmlSet();
+        });
+
+        this.registerEvent('initialized', () => {
+          this.editorInitialized = true;
+        });
+      } else {
+        this.registerEvent('initialized', () => {
+          this.editorInitialized = true;
+          htmlSet();
+        });
+      }
+    } else {
+      htmlSet();
+    }
   }
 
-  handleModelChange(model: string) {
+  destroyEditor() {
+    if (this.element) {
+      this.editor.destroy && this.editor.destroy();
+      this.listeningEvents.length = 0;
+      this.element = null;
+      this.editorInitialized = false;
+    }
+  }
+
+  getEditor() {
+    if (this.element) {
+      return this.editor;
+    }
+
+    return null;
+  }
+
+  updateModel() {
     if (!this.props.onModelChange) {
       return;
     }
-    this.oldModel = model;
-    this.props.onModelChange(model);
-    this.setState({
-      model: model
+
+    let modelContent = '';
+
+    if (this.hasSpecialTag) {
+      let attributeNodes = this.element.attributes;
+      let attrs: any = {};
+
+      for (let i = 0; i < attributeNodes.length; i++) {
+        let attrName = attributeNodes[i].name;
+        if (
+          this.config.reactIgnoreAttrs &&
+          this.config.reactIgnoreAttrs.indexOf(attrName) != -1
+        ) {
+          continue;
+        }
+        attrs[attrName] = attributeNodes[i].value;
+      }
+
+      if (this.element.innerHTML) {
+        attrs[this.INNER_HTML_ATTR] = this.element.innerHTML;
+      }
+
+      modelContent = attrs;
+    } else {
+      let returnedHtml = this.editor.html.get();
+      if (typeof returnedHtml === 'string') {
+        modelContent = returnedHtml;
+      }
+    }
+
+    this.oldModel = modelContent;
+    this.props.onModelChange(modelContent);
+  }
+
+  initListeners() {
+    let self = this;
+
+    // bind contentChange and keyup event to froalaModel
+    this.editor.events.on('contentChanged', function () {
+      self.updateModel();
     });
+    if (this.config.immediateReactModelUpdate) {
+      this.editor.events.on('keyup', function () {
+        self.updateModel();
+      });
+    }
+
+    // Call init events.
+    if (this._initEvents) {
+      for (let i = 0; i < this._initEvents.length; i++) {
+        this._initEvents[i].call(this.editor);
+      }
+    }
+  }
+
+  // register event on jquery editor element
+  registerEvent(eventName: string, callback: Function) {
+    if (!eventName || !callback) {
+      return;
+    }
+
+    if (eventName == 'initialized') {
+      if (!this._initEvents) this._initEvents = [];
+      this._initEvents.push(callback);
+    } else {
+      if (!this.config.events) {
+        this.config.events = {};
+      }
+
+      this.config.events[eventName] = callback;
+    }
+  }
+
+  render() {
+    return (
+      <textarea ref={el => (this.el = el)}>{this.props.children}</textarea>
+    );
+  }
+}
+
+export default class extends React.Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    Froala.VIDEO_PROVIDERS = [
+      {
+        test_regex: /.*/,
+        url_regex: '',
+        url_text: '',
+        html: '<span class="fr-video fr-dvb fr-draggable" contenteditable="false" draggable="true"><video class="fr-draggable" controls="" data-msg="ok" data-status="0" src="{url}" style="width: 600px;"></video></span>'
+      }
+    ];
   }
 
   render() {
     return (
       <FroalaEditorComponent
-        tag="textarea"
         config={this.props.config}
-        model={this.state.model}
-        onModelChange={this.handleModelChange}
+        model={this.props.model}
+        onModelChange={this.props.onModelChange}
       />
     );
   }

package/src/components/Select.tsx

@@ -1107,6 +1107,7 @@ export const SelectWithRemoteOptions = withRemoteConfig<Array<Options>>({
   > {
     render() {
       const {loading, config, deferLoad, updateConfig, ...rest} = this.props;
+
       return (
         <EnhancedSelect
           {...rest}