amis 1.4.2-beta.6 → 1.5.0

package/src/components/{ListCheckboxes.tsx → GroupedSelection.tsx}

@@ -1,4 +1,4 @@
-import {BaseCheckboxes} from './Checkboxes';
+import {BaseSelection} from './Selection';
 import {themeable} from '../theme';
 import React from 'react';
 import {uncontrollable} from 'uncontrollable';
@@ -6,7 +6,7 @@ import Checkbox from './Checkbox';
 import {Option} from './Select';
 import {localeable} from '../locale';
 
-export class ListCheckboxes extends BaseCheckboxes {
+export class GroupedSelection extends BaseSelection {
   valueArray: Array<Option>;
 
   renderOption(option: Option, index: number) {
@@ -15,7 +15,8 @@ export class ListCheckboxes extends BaseCheckboxes {
       disabled,
       classnames: cx,
       itemClassName,
-      itemRender
+      itemRender,
+      multiple
     } = this.props;
     const valueArray = this.valueArray;
 
@@ -23,13 +24,13 @@ export class ListCheckboxes extends BaseCheckboxes {
       return (
         <div
           key={index}
-          className={cx('ListCheckboxes-group', option.className)}
+          className={cx('GroupedSelection-group', option.className)}
         >
-          <div className={cx('ListCheckboxes-itemLabel')}>
+          <div className={cx('GroupedSelection-itemLabel')}>
             {itemRender(option)}
           </div>
 
-          <div className={cx('ListCheckboxes-items', option.className)}>
+          <div className={cx('GroupedSelection-items', option.className)}>
             {option.children.map((child, index) =>
               this.renderOption(child, index)
             )}
@@ -42,24 +43,27 @@ export class ListCheckboxes extends BaseCheckboxes {
       <div
         key={index}
         className={cx(
-          'ListCheckboxes-item',
+          'GroupedSelection-item',
           itemClassName,
           option.className,
-          disabled || option.disabled ? 'is-disabled' : ''
+          disabled || option.disabled ? 'is-disabled' : '',
+          !!~valueArray.indexOf(option) ? 'is-active' : ''
         )}
         onClick={() => this.toggleOption(option)}
       >
-        <div className={cx('ListCheckboxes-itemLabel')}>
+        <div className={cx('GroupedSelection-itemLabel')}>
           {itemRender(option)}
         </div>
 
-        <Checkbox
-          size="sm"
-          checked={!!~valueArray.indexOf(option)}
-          disabled={disabled || option.disabled}
-          labelClassName={labelClassName}
-          description={option.description}
-        />
+        {multiple ? (
+          <Checkbox
+            size="sm"
+            checked={!!~valueArray.indexOf(option)}
+            disabled={disabled || option.disabled}
+            labelClassName={labelClassName}
+            description={option.description}
+          />
+        ) : null}
       </div>
     );
   }
@@ -71,11 +75,12 @@ export class ListCheckboxes extends BaseCheckboxes {
       className,
       placeholder,
       classnames: cx,
-      option2value
+      option2value,
+      onClick
     } = this.props;
     const __ = this.props.translate;
 
-    this.valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    this.valueArray = BaseSelection.value2array(value, options, option2value);
     let body: Array<React.ReactNode> = [];
 
     if (Array.isArray(options) && options.length) {
@@ -83,11 +88,11 @@ export class ListCheckboxes extends BaseCheckboxes {
     }
 
     return (
-      <div className={cx('ListCheckboxes', className)}>
+      <div className={cx('GroupedSelection', className)} onClick={onClick}>
         {body && body.length ? (
           body
         ) : (
-          <div className={cx('ListCheckboxes-placeholder')}>
+          <div className={cx('GroupedSelection-placeholder')}>
             {__(placeholder)}
           </div>
         )}
@@ -98,7 +103,7 @@ export class ListCheckboxes extends BaseCheckboxes {
 
 export default themeable(
   localeable(
-    uncontrollable(ListCheckboxes, {
+    uncontrollable(GroupedSelection, {
       value: 'onChange'
     })
   )

package/src/components/InputBox.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {ThemeProps, themeable} from '../theme';
 import Input from './Input';
-import {autobind} from '../utils/helper';
+import {autobind, ucFirst} from '../utils/helper';
 import {Icon} from './icons';
 
 export interface InputBoxProps
@@ -17,6 +17,7 @@ export interface InputBoxProps
   placeholder?: string;
   prefix?: JSX.Element;
   children?: JSX.Element;
+  borderMode?: 'full' | 'half' | 'none';
 }
 
 export interface InputBoxState {
@@ -79,20 +80,20 @@ export class InputBox extends React.Component<InputBoxProps, InputBoxState> {
       placeholder,
       prefix: result,
       children,
+      borderMode,
       ...rest
     } = this.props;
     const isFocused = this.state.isFocused;
 
     return (
       <div
-        className={cx(
-          'InputBox',
-          className,
-          isFocused ? 'is-focused' : '',
-          disabled ? 'is-disabled' : '',
-          hasError ? 'is-error' : '',
-          rest.onClick ? 'is-clickable' : ''
-        )}
+        className={cx('InputBox', className, {
+          'is-focused': isFocused,
+          'is-disabled': disabled,
+          'is-error': hasError,
+          'is-clickable': rest.onClick,
+          [`InputBox--border${ucFirst(borderMode)}`]: borderMode
+        })}
       >
         {result}
 

package/src/components/Link.tsx

@@ -1,22 +1,11 @@
 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 {themeable, ThemeProps} from '../theme';
 import {autobind} from '../utils/helper';
+import {generateIcon} from '../utils/icon';
 
-export interface LinkSchema extends BaseSchema {
-  /**
-   * 是否新窗口打开。
-   */
-  blank?: boolean;
-
-  /**
-   * 链接内容，如果不配置将显示链接地址。
-   */
-  body?: SchemaTpl;
-
+export interface LinkProps
+  extends ThemeProps,
+    React.DOMAttributes<HTMLAnchorElement> {
   /**
    * 禁用
    */
@@ -28,14 +17,15 @@ export interface LinkSchema extends BaseSchema {
   icon?: string;
 
   /**
-   * 图标位置
+   * 右侧图标
    */
-  position?: string;
-}
+  rightIcon?: string;
 
-export interface LinkProps
-  extends RendererProps,
-    Omit<LinkSchema, 'type' | 'className'> {}
+  href?: string;
+  htmlTarget?: string;
+  title?: string;
+  children?: JSX.Element;
+}
 
 export class Link extends React.Component<LinkProps, object> {
   constructor(props: LinkProps) {
@@ -43,36 +33,37 @@ export class Link extends React.Component<LinkProps, object> {
   }
 
   @autobind
-  aClick(e: React.MouseEvent<any>) {
-    const {disabled} = this.props;
+  handleClick(e: React.MouseEvent<any>) {
+    const {disabled, onClick} = this.props;
     if (disabled) {
       e.preventDefault();
       e.stopPropagation();
+      return;
     }
+    onClick?.(e);
   }
 
   render() {
     const {
       className,
-      body,
       href,
       classnames: cx,
-      blank,
       disabled,
       htmlTarget,
-      data,
       title,
       icon,
-      position
+      rightIcon,
+      children,
+      classPrefix,
+      theme,
+      ...rest
     } = this.props;
 
-    let value = getPropValue(this.props);
-    const finnalHref = href ? filter(href, data, '| raw') : '';
-
     return (
       <a
-        href={finnalHref || value}
-        target={htmlTarget || (blank ? '_blank' : '_self')}
+        {...rest}
+        href={href}
+        target={htmlTarget}
         className={cx(
           `Link`,
           {
@@ -81,11 +72,11 @@ export class Link extends React.Component<LinkProps, object> {
           className
         )}
         title={title}
-        onClick={this.aClick}
+        onClick={this.handleClick}
       >
-        <i className={icon} style={{display: position !== 'right' ? 'inline-block' : 'none' }} />
-        {body}
-        <i className={icon} style={{display: position !== 'right' ? 'none' : 'inline-block' }} />
+        {icon ? generateIcon(cx, icon, 'Link-icon') : null}
+        {children}
+        {rightIcon ? generateIcon(cx, rightIcon, 'Link-icon') : null}
       </a>
     );
   }

package/src/components/ModalManager.ts

@@ -43,7 +43,7 @@ function handleWindowKeyDown(e: Event) {
     return;
   }
   const {disabled, closeOnEsc} = modal.props;
-  if (closeOnEsc && !disabled) {
+  if (closeOnEsc && !disabled && !e.defaultPrevented) {
     modal.props.onHide(e);
   }
 }

package/src/components/Overlay.tsx

@@ -295,6 +295,12 @@ export default class Overlay extends React.Component<
         <Portal container={container}>
           <RootClose onRootClose={props.onHide}>
             {(ref: any) => {
+              if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                  ref: ref
+                });
+              }
+
               return <div ref={ref}>{child}</div>;
             }}
           </RootClose>