amis 1.4.1 → 1.4.2-beta.1

package/src/Schema.ts

@@ -492,6 +492,24 @@ export interface SchemaApiObject {
     [propName: string]: any;
   };
 
+  /**
+   * 默认数据映射中的key如果带点，或者带大括号，会转成对象比如：
+   *
+   * {
+   *   'a.b': '123'
+   * }
+   *
+   * 经过数据映射后变成
+   * {
+   *  a: {
+   *   b: '123
+   *  }
+   * }
+   *
+   * 如果想要关闭此功能，请设置 convertKeyToPath 为 false
+   */
+  convertKeyToPath?: boolean;
+
   /**
    * 用来做接口返回的数据映射。
    */

package/src/components/Alert.tsx

@@ -113,7 +113,9 @@ export class Alert extends React.Component<AlertProps, AlertState> {
 
     this.setState(
       {
-        show: false
+        show: false,
+        prompt: false,
+        confirm: false
       },
       isConfirm ? () => this._resolve(confirmed) /*this._reject()*/ : undefined
     );

package/src/components/Badge.tsx

@@ -13,7 +13,7 @@ import {ClassNamesFn} from '../theme';
  * Badge 角标。
  * 文档：https://baidu.gitee.io/amis/docs/components/badge
  */
-export interface BadgeSchema extends BaseSchema {
+export interface BadgeSchema extends Omit<BaseSchema, 'type'> {
   /**
    * 文本内容
    */
@@ -64,7 +64,7 @@ export interface BadgeSchema extends BaseSchema {
   /**
    * 提示类型
    */
-  level?: 'info' | 'warning' | 'success' | 'danger';
+  level?: 'info' | 'warning' | 'success' | 'danger' | SchemaExpression;
 }
 
 export interface BadgeProps {
@@ -88,13 +88,14 @@ export class Badge extends React.Component<BadgeProps, object> {
     sizeStyle: any,
     animationElement: any
   ) {
-    const {classnames: cx, badge} = this.props;
-    const {
-      mode = 'dot',
-      level = 'danger',
-      style
-    } = badge as BadgeSchema;
-    switch(mode) {
+    const {classnames: cx, badge, data} = this.props;
+    let {mode = 'dot', level = 'danger', style} = badge as BadgeSchema;
+
+    if (typeof level === 'string' && level[0] === '$') {
+      level = resolveVariable(level, data);
+    }
+
+    switch (mode) {
       case 'dot':
         return (
           <span
@@ -107,7 +108,11 @@ export class Badge extends React.Component<BadgeProps, object> {
       case 'text':
         return (
           <span
-            className={cx('Badge-text', `Badge--${position}`, `Badge--${level}`)}
+            className={cx(
+              'Badge-text',
+              `Badge--${position}`,
+              `Badge--${level}`
+            )}
             style={{...offsetStyle, ...sizeStyle, ...style}}
           >
             {text}
@@ -122,14 +127,17 @@ export class Badge extends React.Component<BadgeProps, object> {
             style={{width: outSize, height: outSize}}
           >
             <span
-              className={cx('Badge-ribbon', `Badge-ribbon--${position}`, `Badge--${level}`)}
+              className={cx(
+                'Badge-ribbon',
+                `Badge-ribbon--${position}`,
+                `Badge--${level}`
+              )}
               style={{...sizeStyle, ...style}}
             >
               {text}
               {animationElement}
             </span>
           </div>
-
         );
       default:
         return null;
@@ -150,6 +158,7 @@ export class Badge extends React.Component<BadgeProps, object> {
     let {
       mode = 'dot',
       text,
+      level,
       size,
       style,
       offset,
@@ -172,7 +181,7 @@ export class Badge extends React.Component<BadgeProps, object> {
     if (typeof size === 'undefined') {
       if (mode === 'dot') {
         size = 6;
-      } else if (mode === 'ribbon'){
+      } else if (mode === 'ribbon') {
         size = 12;
       } else {
         size = 16;
@@ -189,7 +198,9 @@ export class Badge extends React.Component<BadgeProps, object> {
       // 当text、overflowCount都为number类型时，进行封顶值处理
       if (typeof text === 'number' && typeof overflowCount === 'number') {
         text = (
-          (text as number) > (overflowCount as number) ? `${overflowCount}+` : text
+          (text as number) > (overflowCount as number)
+            ? `${overflowCount}+`
+            : text
         ) as string | number;
       }
 
@@ -217,7 +228,7 @@ export class Badge extends React.Component<BadgeProps, object> {
       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})`,
+        transform: `translate(${left}, ${right})`
       };
     }
 
@@ -245,15 +256,16 @@ export class Badge extends React.Component<BadgeProps, object> {
     return (
       <div className={cx('Badge', className)}>
         {children}
-        {isDisplay ?
-          this.renderBadge(
-            text,
-            size,
-            position,
-            offsetStyle,
-            sizeStyle,
-            animationElement
-          ) : null}
+        {isDisplay
+          ? this.renderBadge(
+              text,
+              size,
+              position,
+              offsetStyle,
+              sizeStyle,
+              animationElement
+            )
+          : null}
       </div>
     );
   }

package/src/components/Collapse.tsx

@@ -100,15 +100,20 @@ export class Collapse extends React.Component<CollapseProps, any> {
           if (status === ENTERING) {
             this.contentDom.offsetWidth;
           }
-          return React.cloneElement(children as any, {
-            ...(children as React.ReactElement).props,
-            ref: this.contentRef,
-            className: cx(
-              'Collapse-content',
-              (children as React.ReactElement).props.className,
-              collapseStyles[status]
-            )
-          });
+          return (
+            <div
+              className={cx('Collapse-contentWrapper', collapseStyles[status])}
+              ref={this.contentRef}
+            >
+              {React.cloneElement(children as any, {
+                ...(children as React.ReactElement).props,
+                className: cx(
+                  'Collapse-content',
+                  (children as React.ReactElement).props.className
+                )
+              })}
+            </div>
+          );
         }}
       </Transition>
     );

package/src/components/DatePicker.tsx

@@ -618,7 +618,7 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
         ) : null}
 
         <a className={cx(`DatePicker-toggler`)}>
-          <Icon icon="calendar" className="icon" />
+          <Icon icon="clock" className="icon" />
         </a>
 
         {isOpened ? (

package/src/components/DateRangePicker.tsx

@@ -438,12 +438,17 @@ export class DateRangePicker extends React.Component<
     }
 
     if (minDate && newValue && newValue.isBefore(minDate, 'second')) {
-      newValue = minDate
+      newValue = minDate;
     }
 
     this.setState(
       {
-        startDate: this.filterDate(newValue, startDate || minDate, timeFormat, 'start')
+        startDate: this.filterDate(
+          newValue,
+          startDate || minDate,
+          timeFormat,
+          'start'
+        )
       },
       () => {
         embed && this.confirm();
@@ -479,7 +484,12 @@ export class DateRangePicker extends React.Component<
 
     this.setState(
       {
-        endDate: this.filterDate(newValue, endDate || maxDate, timeFormat, 'end')
+        endDate: this.filterDate(
+          newValue,
+          endDate || maxDate,
+          timeFormat,
+          'end'
+        )
       },
       () => {
         embed && this.confirm();
@@ -492,12 +502,14 @@ export class DateRangePicker extends React.Component<
     const now = moment();
     this.setState(
       {
-        startDate: minDate && minDate.isValid()
-          ? moment.max(range.startDate(now.clone()), minDate)
-          : range.startDate(now.clone()),
-        endDate: maxDate && maxDate.isValid()
-          ? moment.min(maxDate, range.endDate(now.clone()))
-          : range.endDate(now.clone())
+        startDate:
+          minDate && minDate.isValid()
+            ? moment.max(range.startDate(now.clone()), minDate)
+            : range.startDate(now.clone()),
+        endDate:
+          maxDate && maxDate.isValid()
+            ? moment.min(maxDate, range.endDate(now.clone()))
+            : range.endDate(now.clone())
       },
       closeOnSelect ? this.confirm : noop
     );
@@ -797,7 +809,7 @@ export class DateRangePicker extends React.Component<
           {
             'is-disabled': disabled,
             'is-focused': isFocused,
-            [`${ns}DateRangePicker--border${ucFirst(borderMode)}`]: borderMode,
+            [`${ns}DateRangePicker--border${ucFirst(borderMode)}`]: borderMode
           },
           className
         )}
@@ -821,7 +833,7 @@ export class DateRangePicker extends React.Component<
         ) : null}
 
         <a className={`${ns}DateRangePicker-toggler`}>
-          <Icon icon="calendar" className="icon" />
+          <Icon icon="clock" className="icon" />
         </a>
 
         {isOpened ? (

package/src/components/InputBox.tsx

@@ -37,7 +37,7 @@ export class InputBox extends React.Component<InputBoxProps, InputBoxState> {
   clearValue(e: any) {
     e.preventDefault();
 
-    const onClear = this.props.onChange;
+    const onClear = this.props.onClear;
     const onChange = this.props.onChange;
     onClear?.(e);
     onChange?.('');

package/src/components/Link.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {RendererProps} from '../factory';
+import {BaseSchema, SchemaTpl} from '../Schema';
+import {getPropValue} from '../utils/helper';
+import {filter} from '../utils/tpl';
+import {themeable} from '../theme';
+import {autobind} from '../utils/helper';
+
+export interface LinkSchema extends BaseSchema {
+  /**
+   * 是否新窗口打开。
+   */
+  blank?: boolean;
+
+  /**
+   * 链接内容，如果不配置将显示链接地址。
+   */
+  body?: SchemaTpl;
+
+  /**
+   * 禁用
+   */
+  disabled?: boolean;
+
+  /**
+   * 图标
+   */
+  icon?: string;
+
+  /**
+   * 图标位置
+   */
+  position?: string;
+}
+
+export interface LinkProps
+  extends RendererProps,
+    Omit<LinkSchema, 'type' | 'className'> {}
+
+export class Link extends React.Component<LinkProps, object> {
+  constructor(props: LinkProps) {
+    super(props);
+  }
+
+  @autobind
+  aClick(e: React.MouseEvent<any>) {
+    const {disabled} = this.props;
+    if (disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+
+  render() {
+    const {
+      className,
+      body,
+      href,
+      classnames: cx,
+      blank,
+      disabled,
+      htmlTarget,
+      data,
+      title,
+      icon,
+      position
+    } = this.props;
+
+    let value = getPropValue(this.props);
+    const finnalHref = href ? filter(href, data, '| raw') : '';
+
+    return (
+      <a
+        href={finnalHref || value}
+        target={htmlTarget || (blank ? '_blank' : '_self')}
+        className={cx(
+          `Link`,
+          {
+            'is-disabled': disabled
+          },
+          className
+        )}
+        title={title}
+        onClick={this.aClick}
+      >
+        <i className={icon} style={{display: position !== 'right' ? 'inline-block' : 'none' }} />
+        {body}
+        <i className={icon} style={{display: position !== 'right' ? 'none' : 'inline-block' }} />
+      </a>
+    );
+  }
+}
+
+export default themeable(Link);

package/src/components/MonthRangePicker.tsx

@@ -440,7 +440,15 @@ export class MonthRangePicker extends React.Component<
   }
 
   renderCalendar() {
-    const {classPrefix: ns, classnames: cx, locale, embed, ranges, inputFormat, timeFormat} = this.props;
+    const {
+      classPrefix: ns,
+      classnames: cx,
+      locale,
+      embed,
+      ranges,
+      inputFormat,
+      timeFormat
+    } = this.props;
     const __ = this.props.translate;
     const viewMode: 'months' = 'months';
     const dateFormat = 'YYYY-MM';
@@ -592,7 +600,7 @@ export class MonthRangePicker extends React.Component<
         ) : null}
 
         <a className={`${ns}DateRangePicker-toggler`}>
-          <Icon icon="calendar" className="icon" />
+          <Icon icon="clock" className="icon" />
         </a>
 
         {isOpened ? (

package/src/components/RichText.tsx

@@ -61,7 +61,6 @@ class FroalaEditorComponent extends React.Component<FroalaEditorComponentProps>
   config: any;
   editorInitialized: any;
   INNER_HTML_ATTR: any;
-  hasSpecialTag: any;
   oldModel: any;
   el: any;
   _initEvents: any;
@@ -166,7 +165,7 @@ class FroalaEditorComponent extends React.Component<FroalaEditorComponentProps>
       this.element.innerHTML = this.props.model;
     }
 
-    this.setContent(true);
+    this.setContent();
 
     // Default initialized.
     this.registerEvent(
@@ -176,17 +175,20 @@ class FroalaEditorComponent extends React.Component<FroalaEditorComponentProps>
 
     // Check if events are set.
     if (!this.config.events) this.config.events = {};
-    this.config.events.initialized = () => this.initListeners();
+    this.config.events.initialized = () => {
+      this.editorInitialized = true;
+      this.initListeners();
+    };
 
     this.editor = new FroalaEditor(this.element, this.config);
   }
 
-  setContent(firstTime?: boolean) {
+  setContent() {
     if (this.props.model || this.props.model == '') {
       this.oldModel = this.props.model;
 
       if (this.editorInitialized) {
-        this.setNormalTagContent(firstTime);
+        this.setNormalTagContent();
       } else {
         if (!this._initEvents) this._initEvents = [];
         this._initEvents.push(() => this.setNormalTagContent());
@@ -194,35 +196,14 @@ class FroalaEditorComponent extends React.Component<FroalaEditorComponentProps>
     }
   }
 
-  setNormalTagContent(firstTime?: boolean) {
+  setNormalTagContent() {
     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();
+    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();
     }
   }
 
@@ -232,6 +213,7 @@ class FroalaEditorComponent extends React.Component<FroalaEditorComponentProps>
       this.listeningEvents.length = 0;
       this.element = null;
       this.editorInitialized = false;
+      this._initEvents = [];
     }
   }
 
@@ -250,31 +232,9 @@ class FroalaEditorComponent extends React.Component<FroalaEditorComponentProps>
 
     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;
-      }
+    let returnedHtml = this.editor.html.get();
+    if (typeof returnedHtml === 'string') {
+      modelContent = returnedHtml;
     }
 
     this.oldModel = modelContent;

package/src/components/Select.tsx

@@ -770,6 +770,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
     // 渲染单个选项
     const renderItem = ({index, style}: {index: number; style?: object}) => {
       const item = filtedOptions[index];
+      if (!item) {
+        return null;
+      }
       const checked =
         selectedItem === item || !!~selectionValues.indexOf(item[valueField]);
       if (hideSelected && checked) {

package/src/components/SparkLine.tsx

@@ -14,6 +14,7 @@ export interface SparkLineProps extends ThemeProps, LocaleProps {
         label?: string;
       }
   >;
+  placeholder?: string;
   onClick?: (e: React.MouseEvent, value?: PlainObject) => void;
 }
 
@@ -76,6 +77,8 @@ export class SparkLine extends React.Component<SparkLineProps> {
       value,
       width,
       height,
+      placeholder,
+      translate: __,
       onClick
     } = this.props;
 
@@ -98,7 +101,7 @@ export class SparkLine extends React.Component<SparkLineProps> {
             {this.renderLines()}
           </svg>
         ) : (
-          <span>Invalid Value</span>
+          placeholder ?? __('placeholder.empty')
         )}
       </div>
     );

package/src/components/Toast.tsx

@@ -311,13 +311,13 @@ export class ToastMessage extends React.Component<
               {showIcon === false ? null : (
                 <div className={cx('Toast-icon')}>
                   {level === 'success' ? (
-                    <Icon icon="success" className="icon" />
+                    <Icon icon="status-success" className="icon" />
                   ) : level == 'error' ? (
-                    <Icon icon="fail" className="icon" />
+                    <Icon icon="status-fail" className="icon" />
                   ) : level == 'info' ? (
-                    <Icon icon="info-circle" className="icon" />
+                    <Icon icon="status-info" className="icon" />
                   ) : level == 'warning' ? (
-                    <Icon icon="warning" className="icon" />
+                    <Icon icon="status-warning" className="icon" />
                   ) : null}
                 </div>
               )}
@@ -327,7 +327,7 @@ export class ToastMessage extends React.Component<
 
               {closeButton ? (
                 <a onClick={this.close} className={cx(`Toast-close`)}>
-                  <Icon icon="close" className="icon" />
+                  <Icon icon="status-close" className="icon" />
                 </a>
               ) : null}
             </div>

package/src/components/Tree.tsx

@@ -19,7 +19,7 @@ import {
 import {Option, Options, value2array} from './Select';
 import {ClassNamesFn, themeable, ThemeProps} from '../theme';
 import {highlight} from '../renderers/Form/Options';
-import {Icon} from './icons';
+import {Icon, getIcon} from './icons';
 import Checkbox from './Checkbox';
 import {LocaleProps, localeable} from '../locale';
 import Spinner from './Spinner';
@@ -710,6 +710,8 @@ export class TreeSelector extends React.Component<
       const isLeaf =
         (!item.children || !item.children.length) && !item.placeholder;
 
+      const iconValue = item[iconField] || (childrenItems ? 'folder' : 'file');
+
       return (
         <li
           key={key}
@@ -754,7 +756,6 @@ export class TreeSelector extends React.Component<
                 <i
                   className={cx(
                     `Tree-itemIcon ${
-                      item[iconField] ||
                       (childrenItems ? 'Tree-folderIcon' : 'Tree-leafIcon')
                     }`
                   )}
@@ -765,12 +766,9 @@ export class TreeSelector extends React.Component<
                       : this.handleSelect(item))
                   }
                 >
-                  {item[iconField] ? null : (
-                    <Icon
-                      icon={childrenItems ? 'folder' : 'file'}
-                      className="icon"
-                    />
-                  )}
+                  {getIcon(iconValue)
+                    ? <Icon icon={iconValue} className="icon"/>
+                    : <i className={iconValue}></i>}
                 </i>
               ) : null}