amis 1.3.5-beta.6 → 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,11 +13,11 @@ 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'> {
   /**
    * 文本内容
    */
-  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' | SchemaExpression;
 }
 
 export interface BadgeProps {
@@ -65,6 +80,70 @@ 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, 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
+            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) {
@@ -79,9 +158,12 @@ export class Badge extends React.Component<BadgeProps, object> {
     let {
       mode = 'dot',
       text,
+      level,
       size,
       style,
+      offset,
       position = 'top-right',
+      overflowCount = 99,
       visibleOn,
       className,
       animation
@@ -99,6 +181,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 +195,14 @@ 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 +213,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 +256,16 @@ 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/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/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/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/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/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 ? (