amis 1.4.2-beta.1 → 1.4.2-beta.15

package/src/components/{TableCheckboxes.tsx → TableSelection.tsx}

@@ -1,4 +1,4 @@
-import {BaseCheckboxes, BaseCheckboxesProps} from './Checkboxes';
+import {BaseSelection, BaseSelectionProps} from './Selection';
 import {themeable} from '../theme';
 import React from 'react';
 import {uncontrollable} from 'uncontrollable';
@@ -7,7 +7,7 @@ import {Option} from './Select';
 import {resolveVariable} from '../utils/tpl-builtin';
 import {localeable} from '../locale';
 
-export interface TableCheckboxesProps extends BaseCheckboxesProps {
+export interface TableSelectionProps extends BaseSelectionProps {
   columns: Array<{
     name: string;
     label: string;
@@ -25,9 +25,9 @@ export interface TableCheckboxesProps extends BaseCheckboxesProps {
   ) => JSX.Element;
 }
 
-export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
+export class TableSelection extends BaseSelection<TableSelectionProps> {
   static defaultProps = {
-    ...BaseCheckboxes.defaultProps,
+    ...BaseSelection.defaultProps,
     cellRender: (
       column: {
         name: string;
@@ -50,9 +50,16 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
   }
 
   renderTHead() {
-    const {options, classnames: cx, value, disabled, option2value} = this.props;
+    const {
+      options,
+      classnames: cx,
+      value,
+      disabled,
+      option2value,
+      multiple
+    } = this.props;
     let columns = this.getColumns();
-    let valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    let valueArray = BaseSelection.value2array(value, options, option2value);
     const availableOptions = options.filter(option => !option.disabled);
     let partialChecked = false;
     let allChecked = !!availableOptions.length;
@@ -70,9 +77,10 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
     return (
       <thead>
         <tr>
-          {Array.isArray(options) && options.length ? (
+          {multiple && Array.isArray(options) && options.length ? (
             <th className={cx('Table-checkCell')}>
               <Checkbox
+                key="checkbox"
                 size="sm"
                 disabled={disabled}
                 onChange={this.toggleAll}
@@ -97,11 +105,13 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
       cellRender,
       value,
       disabled,
+      multiple,
       option2value,
-      translate: __
+      translate: __,
+      itemClassName
     } = this.props;
     const columns = this.getColumns();
-    let valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    let valueArray = BaseSelection.value2array(value, options, option2value);
 
     return (
       <tbody>
@@ -113,10 +123,18 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
               <tr
                 key={rowIndex}
                 onClick={e => e.defaultPrevented || this.toggleOption(option)}
+                className={cx(
+                  itemClassName,
+                  option.className,
+                  disabled || option.disabled ? 'is-disabled' : '',
+                  !!~valueArray.indexOf(option) ? 'is-active' : ''
+                )}
               >
-                <td className={cx('Table-checkCell')}>
-                  <Checkbox size="sm" checked={checked} disabled={disabled} />
-                </td>
+                {multiple ? (
+                  <td className={cx('Table-checkCell')} key="checkbox">
+                    <Checkbox size="sm" checked={checked} disabled={disabled} />
+                  </td>
+                ) : null}
                 {columns.map((column, colIndex) => (
                   <td key={colIndex}>
                     {cellRender(column, option, colIndex, rowIndex)}
@@ -144,10 +162,11 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
       classnames: cx,
       option2value,
       itemClassName,
-      itemRender
+      itemRender,
+      multiple
     } = this.props;
 
-    let valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    let valueArray = BaseSelection.value2array(value, options, option2value);
     let body: Array<React.ReactNode> = [];
 
     if (Array.isArray(options) && options.length) {
@@ -155,30 +174,32 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
         <div
           key={key}
           className={cx(
-            'TableCheckboxes-item',
+            'TableSelection-item',
             itemClassName,
             option.className,
             disabled || option.disabled ? 'is-disabled' : ''
           )}
           onClick={() => this.toggleOption(option)}
         >
-          <div className={cx('TableCheckboxes-itemLabel')}>
+          <div className={cx('TableSelection-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>
       ));
     }
 
     return (
-      <div className={cx('TableCheckboxes', className)}>
+      <div className={cx('TableSelection', className)}>
         <div className={cx('Table-content')}>
           <table className={cx('Table-table')}>
             {this.renderTHead()}
@@ -192,7 +213,7 @@ export class TableCheckboxes extends BaseCheckboxes<TableCheckboxesProps> {
 
 export default themeable(
   localeable(
-    uncontrollable(TableCheckboxes, {
+    uncontrollable(TableSelection, {
       value: 'onChange'
     })
   )

package/src/components/TabsTransfer.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import {autobind} from '../utils/helper';
 import Tabs, {Tab} from './Tabs';
 import SearchBox from './SearchBox';
-import TableCheckboxes from './TableCheckboxes';
-import TreeCheckboxes from './TreeCheckboxes';
-import ChainedCheckboxes from './ChainedCheckboxes';
-import ListCheckboxes from './ListCheckboxes';
+import TableCheckboxes from './TableSelection';
+import TreeCheckboxes from './TreeSelection';
+import ChainedCheckboxes from './ChainedSelection';
+import ListCheckboxes from './GroupedSelection';
 import {Options, Option} from './Select';
 import Transfer, {TransferProps} from './Transfer';
 import {themeable} from '../theme';
-import AssociatedCheckboxes from './AssociatedCheckboxes';
+import AssociatedCheckboxes from './AssociatedSelection';
 import {localeable} from '../locale';
 
 export interface TabsTransferProps
@@ -121,7 +121,7 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
     return (
       <Tabs
         mode="card"
-        className={cx('Transfer-tabs')}
+        className={cx('TabsTransfer-tabs')}
         activeKey={searchResult !== null ? 0 : undefined}
         toolbar={
           searchable ? (
@@ -134,7 +134,12 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
       >
         {searchResult !== null
           ? [
-              <Tab title={__('searchResult')} key={0} eventKey={0}>
+              <Tab
+                className="TabsTransfer-tab"
+                title={__('searchResult')}
+                key={0}
+                eventKey={0}
+              >
                 {this.renderSearchResult(searchResult)}
               </Tab>
             ]
@@ -143,6 +148,7 @@ export class TabsTransfer extends React.Component<TabsTransferProps> {
                 eventKey={index}
                 key={index}
                 title={option.label || option.title}
+                className="TabsTransfer-tab"
               >
                 {option.selectMode === 'table' ? (
                   <TableCheckboxes

package/src/components/TabsTransferPicker.tsx

@@ -0,0 +1,85 @@
+import {localeable} from '../locale';
+import {themeable} from '../theme';
+import {uncontrollable} from 'uncontrollable';
+import React from 'react';
+import ResultBox from './ResultBox';
+import {Icon} from './icons';
+import PickerContainer from './PickerContainer';
+import {autobind} from '../utils/helper';
+import TabsTransfer, {TabsTransferProps} from './TabsTransfer';
+
+export interface TabsTransferPickerProps
+  extends Omit<TabsTransferProps, 'itemRender'> {
+  // 新的属性？
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+}
+
+export class TransferPicker extends React.Component<TabsTransferPickerProps> {
+  @autobind
+  handleClose() {
+    this.setState({
+      inputValue: '',
+      searchResult: null
+    });
+  }
+
+  @autobind
+  handleConfirm(value: any) {
+    this.props.onChange?.(value);
+    this.handleClose();
+  }
+
+  render() {
+    const {
+      classnames: cx,
+      value,
+      translate: __,
+      disabled,
+      className,
+      onChange,
+      size,
+      ...rest
+    } = this.props;
+
+    return (
+      <PickerContainer
+        title={__('Select.placeholder')}
+        popOverRender={({onClose, value, onChange}) => {
+          return <TabsTransfer {...rest} value={value} onChange={onChange} />;
+        }}
+        value={value}
+        onConfirm={this.handleConfirm}
+        onCancel={this.handleClose}
+        size={size}
+      >
+        {({onClick, isOpened}) => (
+          <ResultBox
+            className={cx(
+              'TransferPicker',
+              className,
+              isOpened ? 'is-active' : ''
+            )}
+            allowInput={false}
+            result={value}
+            onResultChange={onChange}
+            onResultClick={onClick}
+            placeholder={__('Select.placeholder')}
+            disabled={disabled}
+          >
+            <span className={cx('TransferPicker-icon')}>
+              <Icon icon="pencil" className="icon" />
+            </span>
+          </ResultBox>
+        )}
+      </PickerContainer>
+    );
+  }
+}
+
+export default themeable(
+  localeable(
+    uncontrollable(TransferPicker, {
+      value: 'onChange'
+    })
+  )
+);

package/src/components/Toast.tsx

@@ -51,6 +51,7 @@ interface ToastComponentProps extends ThemeProps, LocaleProps {
   closeButton: boolean;
   showIcon?: boolean;
   timeout: number;
+  errorTimeout: number;
   className?: string;
 }
 
@@ -78,11 +79,12 @@ export class ToastComponent extends React.Component<
 > {
   static defaultProps: Pick<
     ToastComponentProps,
-    'position' | 'closeButton' | 'timeout'
+    'position' | 'closeButton' | 'timeout' | 'errorTimeout'
   > = {
     position: 'top-center',
     closeButton: false,
-    timeout: 5000
+    timeout: 5000,
+    errorTimeout: 10000 // 错误的时候 time 调长
   };
   static themeKey = 'toast';
 
@@ -155,6 +157,7 @@ export class ToastComponent extends React.Component<
       classnames: cx,
       className,
       timeout,
+      errorTimeout,
       position,
       showIcon,
       translate,
@@ -166,7 +169,6 @@ export class ToastComponent extends React.Component<
 
     return Object.keys(groupedItems).map(position => {
       const toasts = groupedItems[position];
-
       return (
         <div
           key={position}
@@ -177,19 +179,24 @@ export class ToastComponent extends React.Component<
             className
           )}
         >
-          {toasts.map(item => (
-            <ToastMessage
-              classnames={cx}
-              key={item.id}
-              body={item.body}
-              level={item.level || 'info'}
-              timeout={item.timeout ?? timeout}
-              closeButton={item.closeButton ?? closeButton}
-              onDismiss={this.handleDismissed.bind(this, items.indexOf(item))}
-              translate={translate}
-              showIcon={showIcon}
-            />
-          ))}
+          {toasts.map(item => {
+            const level = item.level || 'info';
+            const toastTimeout =
+              item.timeout ?? (level === 'error' ? errorTimeout : timeout);
+            return (
+              <ToastMessage
+                classnames={cx}
+                key={item.id}
+                body={item.body}
+                level={level}
+                timeout={toastTimeout}
+                closeButton={item.closeButton ?? closeButton}
+                onDismiss={this.handleDismissed.bind(this, items.indexOf(item))}
+                translate={translate}
+                showIcon={showIcon}
+              />
+            );
+          })}
         </div>
       );
     });