amis 1.4.0 → 1.4.2-beta.12

package/src/components/{ChainedCheckboxes.tsx → ChainedSelection.tsx}

@@ -1,7 +1,7 @@
 /**
  * 级联多选框，支持无限极。从左侧到右侧一层层点选。
  */
-import {BaseCheckboxes, BaseCheckboxesProps} from './Checkboxes';
+import {BaseSelection, BaseSelectionProps} from './Selection';
 import {themeable} from '../theme';
 import React from 'react';
 import {uncontrollable} from 'uncontrollable';
@@ -12,20 +12,20 @@ import times from 'lodash/times';
 import Spinner from './Spinner';
 import {localeable} from '../locale';
 
-export interface ChainedCheckboxesProps extends BaseCheckboxesProps {
+export interface ChainedSelectionProps extends BaseSelectionProps {
   defaultSelectedIndex?: string;
 }
 
-export interface ChainedCheckboxesState {
+export interface ChainedSelectionState {
   selected: Array<string>;
 }
 
-export class ChainedCheckboxes extends BaseCheckboxes<
-  ChainedCheckboxesProps,
-  ChainedCheckboxesState
+export class ChainedSelection extends BaseSelection<
+  ChainedSelectionProps,
+  ChainedSelectionState
 > {
   valueArray: Array<Option>;
-  state: ChainedCheckboxesState = {
+  state: ChainedSelectionState = {
     selected: []
   };
 
@@ -54,6 +54,46 @@ export class ChainedCheckboxes extends BaseCheckboxes<
     );
   }
 
+  renderItem(option: Option, index: number, depth: number, id: string) {
+    const {
+      labelClassName,
+      disabled,
+      classnames: cx,
+      itemClassName,
+      itemRender,
+      multiple
+    } = this.props;
+    const valueArray = this.valueArray;
+
+    return (
+      <div
+        key={index}
+        className={cx(
+          'ChainedSelection-item',
+          itemClassName,
+          option.className,
+          disabled || option.disabled ? 'is-disabled' : '',
+          !!~valueArray.indexOf(option) ? 'is-active' : ''
+        )}
+        onClick={() => this.toggleOption(option)}
+      >
+        <div className={cx('ChainedSelection-itemLabel')}>
+          {itemRender(option)}
+        </div>
+
+        {multiple ? (
+          <Checkbox
+            size="sm"
+            checked={!!~valueArray.indexOf(option)}
+            disabled={disabled || option.disabled}
+            labelClassName={labelClassName}
+            description={option.description}
+          />
+        ) : null}
+      </div>
+    );
+  }
+
   renderOption(option: Option, index: number, depth: number, id: string) {
     const {
       labelClassName,
@@ -69,7 +109,7 @@ export class ChainedCheckboxes extends BaseCheckboxes<
         <div
           key={index}
           className={cx(
-            'ChainedCheckboxes-item',
+            'ChainedSelection-item',
             itemClassName,
             option.className,
             disabled || option.disabled ? 'is-disabled' : '',
@@ -77,7 +117,7 @@ export class ChainedCheckboxes extends BaseCheckboxes<
           )}
           onClick={() => this.selectOption(option, depth, id)}
         >
-          <div className={cx('ChainedCheckboxes-itemLabel')}>
+          <div className={cx('ChainedSelection-itemLabel')}>
             {itemRender(option)}
           </div>
 
@@ -86,30 +126,7 @@ export class ChainedCheckboxes extends BaseCheckboxes<
       );
     }
 
-    return (
-      <div
-        key={index}
-        className={cx(
-          'ChainedCheckboxes-item',
-          itemClassName,
-          option.className,
-          disabled || option.disabled ? 'is-disabled' : ''
-        )}
-        onClick={() => this.toggleOption(option)}
-      >
-        <div className={cx('ChainedCheckboxes-itemLabel')}>
-          {itemRender(option)}
-        </div>
-
-        <Checkbox
-          size="sm"
-          checked={!!~valueArray.indexOf(option)}
-          disabled={disabled || option.disabled}
-          labelClassName={labelClassName}
-          description={option.description}
-        />
-      </div>
-    );
+    return this.renderItem(option, index, depth, id);
   }
 
   render() {
@@ -124,7 +141,7 @@ export class ChainedCheckboxes extends BaseCheckboxes<
       translate: __
     } = this.props;
 
-    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) {
@@ -156,9 +173,9 @@ export class ChainedCheckboxes extends BaseCheckboxes<
           let nextIndexes = indexes;
 
           body.push(
-            <div key={depth} className={cx('ChainedCheckboxes-col')}>
+            <div key={depth} className={cx('ChainedSelection-col')}>
               {subTitle ? (
-                <div className={cx('ChainedCheckboxes-subTitle')}>
+                <div className={cx('ChainedSelection-subTitle')}>
                   {subTitle}
                 </div>
               ) : null}
@@ -176,7 +193,7 @@ export class ChainedCheckboxes extends BaseCheckboxes<
                   return this.renderOption(option, index, depth, id);
                 })
               ) : (
-                <div className={cx('ChainedCheckboxes-placeholder')}>
+                <div className={cx('ChainedSelection-placeholder')}>
                   {__(placeholder)}
                 </div>
               )}
@@ -201,11 +218,11 @@ export class ChainedCheckboxes extends BaseCheckboxes<
     }
 
     return (
-      <div className={cx('ChainedCheckboxes', className)}>
+      <div className={cx('ChainedSelection', className)}>
         {body && body.length ? (
           body
         ) : (
-          <div className={cx('ChainedCheckboxes-placeholder')}>
+          <div className={cx('ChainedSelection-placeholder')}>
             {__(placeholder)}
           </div>
         )}
@@ -216,7 +233,7 @@ export class ChainedCheckboxes extends BaseCheckboxes<
 
 export default themeable(
   localeable(
-    uncontrollable(ChainedCheckboxes, {
+    uncontrollable(ChainedSelection, {
       value: 'onChange'
     })
   )

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/{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

@@ -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,85 @@
+import React from 'react';
+import {themeable, ThemeProps} from '../theme';
+import {autobind} from '../utils/helper';
+import {generateIcon} from '../utils/icon';
+
+export interface LinkProps
+  extends ThemeProps,
+    React.DOMAttributes<HTMLAnchorElement> {
+  /**
+   * 禁用
+   */
+  disabled?: boolean;
+
+  /**
+   * 图标
+   */
+  icon?: string;
+
+  /**
+   * 右侧图标
+   */
+  rightIcon?: string;
+
+  href?: string;
+  htmlTarget?: string;
+  title?: string;
+  children?: JSX.Element;
+}
+
+export class Link extends React.Component<LinkProps, object> {
+  constructor(props: LinkProps) {
+    super(props);
+  }
+
+  @autobind
+  handleClick(e: React.MouseEvent<any>) {
+    const {disabled, onClick} = this.props;
+    if (disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    onClick?.(e);
+  }
+
+  render() {
+    const {
+      className,
+      href,
+      classnames: cx,
+      disabled,
+      htmlTarget,
+      title,
+      icon,
+      rightIcon,
+      children,
+      classPrefix,
+      theme,
+      ...rest
+    } = this.props;
+
+    return (
+      <a
+        {...rest}
+        href={href}
+        target={htmlTarget}
+        className={cx(
+          `Link`,
+          {
+            'is-disabled': disabled
+          },
+          className
+        )}
+        title={title}
+        onClick={this.handleClick}
+      >
+        {icon ? generateIcon(cx, icon, 'Link-icon') : null}
+        {children}
+        {rightIcon ? generateIcon(cx, rightIcon, 'Link-icon') : null}
+      </a>
+    );
+  }
+}
+
+export default themeable(Link);

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/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 ? (