amis 1.4.0 → 1.4.2-beta.12

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

@@ -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/Transfer.tsx

@@ -1,30 +1,31 @@
 import React from 'react';
 import {ThemeProps, themeable} from '../theme';
-import {BaseCheckboxesProps, BaseCheckboxes} from './Checkboxes';
+import {BaseSelectionProps, BaseSelection} from './Selection';
 import {Options, Option} from './Select';
 import {uncontrollable} from 'uncontrollable';
 import ResultList from './ResultList';
-import TableCheckboxes from './TableCheckboxes';
-import ListCheckboxes from './ListCheckboxes';
-import TreeCheckboxes from './TreeCheckboxes';
+import TableSelection from './TableSelection';
+import TreeSelection from './TreeSelection';
 import {autobind, flattenTree} from '../utils/helper';
 import InputBox from './InputBox';
 import {Icon} from './icons';
 import debounce from 'lodash/debounce';
-import ChainedCheckboxes from './ChainedCheckboxes';
-import AssociatedCheckboxes from './AssociatedCheckboxes';
+import AssociatedSelection from './AssociatedSelection';
 import {LocaleProps, localeable} from '../locale';
+import GroupedSelection from './GroupedSelection';
+import ChainedSelection from './ChainedSelection';
 
 export interface TransferProps
   extends ThemeProps,
     LocaleProps,
-    BaseCheckboxesProps {
+    BaseSelectionProps {
   inline?: boolean;
   statistics?: boolean;
   showArrow?: boolean;
+  multiple?: boolean;
 
   selectTitle?: string;
-  selectMode?: 'table' | 'list' | 'tree' | 'chained' | 'associated';
+  selectMode?: 'table' | 'group' | 'list' | 'tree' | 'chained' | 'associated';
   columns?: Array<{
     name: string;
     label: string;
@@ -41,12 +42,12 @@ export interface TransferProps
     rowIndex: number
   ) => JSX.Element;
   leftOptions?: Array<Option>;
-  leftMode?: 'tree' | 'list';
+  leftMode?: 'tree' | 'list' | 'group';
   leftDefaultValue?: any;
-  rightMode?: 'table' | 'list' | 'tree' | 'chained';
+  rightMode?: 'table' | 'list' | 'group' | 'tree' | 'chained';
 
   // search 相关
-  searchResultMode?: 'table' | 'list' | 'tree' | 'chained';
+  searchResultMode?: 'table' | 'list' | 'group' | 'tree' | 'chained';
   searchResultColumns?: Array<{
     name: string;
     label: string;
@@ -79,8 +80,11 @@ export interface TransferState {
   searchResult: Options | null;
 }
 
-export class Transfer extends React.Component<TransferProps, TransferState> {
-  static defaultProps = {
+export class Transfer<
+  T extends TransferProps = TransferProps
+> extends React.Component<T, TransferState> {
+  static defaultProps: Pick<TransferProps, 'itemRender' | 'multiple'> = {
+    multiple: true,
     itemRender: (option: Option) => <span>{option.label}</span>
   };
 
@@ -102,7 +106,7 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
   @autobind
   toggleAll() {
     const {options, option2value, onChange, value} = this.props;
-    let valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    let valueArray = BaseSelection.value2array(value, options, option2value);
     const availableOptions = flattenTree(options).filter(
       (option, index, list) =>
         !option.disabled &&
@@ -192,7 +196,11 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
     }
   );
 
-  renderSelect() {
+  renderSelect(
+    props: TransferProps & {
+      onToggleAll?: () => void;
+    }
+  ) {
     const {
       selectRender,
       selectMode,
@@ -203,11 +211,11 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
       options,
       statistics,
       translate: __
-    } = this.props;
+    } = props;
 
     if (selectRender) {
       return selectRender({
-        ...this.props,
+        ...props,
         onSearch: this.handleSearch,
         onSearchCancel: this.handleSeachCancel,
         searchResult: this.state.searchResult
@@ -223,7 +231,7 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
           )}
         >
           <span>
-            {__(selectTitle || 'Select.placeholder')}
+            {__(selectTitle || 'Transfer.available')}
             {statistics !== false ? (
               <span>
                 （{this.valueArray.length}/{this.availableOptions.length}）
@@ -232,13 +240,13 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
           </span>
           {selectMode !== 'table' ? (
             <a
-              onClick={this.toggleAll}
+              onClick={props.onToggleAll || this.toggleAll}
               className={cx(
                 'Transfer-checkAll',
                 disabled || !options.length ? 'is-disabled' : ''
               )}
             >
-              {__('Select.placeholder')}
+              {__('Select.checkAll')}
             </a>
           ) : null}
         </div>
@@ -264,13 +272,13 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
         ) : null}
 
         {this.state.searchResult !== null
-          ? this.renderSearchResult()
-          : this.renderOptions()}
+          ? this.renderSearchResult(props)
+          : this.renderOptions(props)}
       </>
     );
   }
 
-  renderSearchResult() {
+  renderSearchResult(props: TransferProps) {
     const {
       searchResultMode,
       selectMode,
@@ -283,16 +291,17 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
       onChange,
       option2value,
       optionItemRender,
-      cellRender
-    } = this.props;
+      cellRender,
+      multiple
+    } = props;
     const options = this.state.searchResult || [];
     const mode = searchResultMode || selectMode;
     const resultColumns = searchResultColumns || columns;
 
     return mode === 'table' ? (
-      <TableCheckboxes
+      <TableSelection
         placeholder={noResultsText}
-        className={cx('Transfer-checkboxes')}
+        className={cx('Transfer-selection')}
         columns={resultColumns!}
         options={options}
         value={value}
@@ -301,44 +310,48 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
         option2value={option2value}
         cellRender={cellRender}
         itemRender={optionItemRender}
+        multiple={multiple}
       />
     ) : mode === 'tree' ? (
-      <TreeCheckboxes
+      <TreeSelection
         placeholder={noResultsText}
-        className={cx('Transfer-checkboxes')}
+        className={cx('Transfer-selection')}
         options={options}
         value={value}
         disabled={disabled}
         onChange={onChange}
         option2value={option2value}
         itemRender={optionItemRender}
+        multiple={multiple}
       />
     ) : mode === 'chained' ? (
-      <ChainedCheckboxes
+      <ChainedSelection
         placeholder={noResultsText}
-        className={cx('Transfer-checkboxes')}
+        className={cx('Transfer-selection')}
         options={options}
         value={value}
         disabled={disabled}
         onChange={onChange}
         option2value={option2value}
         itemRender={optionItemRender}
+        multiple={multiple}
       />
     ) : (
-      <ListCheckboxes
+      <GroupedSelection
         placeholder={noResultsText}
-        className={cx('Transfer-checkboxes')}
+        className={cx('Transfer-selection')}
         options={options}
         value={value}
         disabled={disabled}
         onChange={onChange}
         option2value={option2value}
         itemRender={optionItemRender}
+        multiple={multiple}
       />
     );
   }
 
-  renderOptions() {
+  renderOptions(props: TransferProps) {
     const {
       selectMode,
       columns,
@@ -354,12 +367,13 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
       rightMode,
       cellRender,
       leftDefaultValue,
-      optionItemRender
-    } = this.props;
+      optionItemRender,
+      multiple
+    } = props;
 
     return selectMode === 'table' ? (
-      <TableCheckboxes
-        className={cx('Transfer-checkboxes')}
+      <TableSelection
+        className={cx('Transfer-selection')}
         columns={columns!}
         options={options || []}
         value={value}
@@ -369,10 +383,11 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
         onDeferLoad={onDeferLoad}
         cellRender={cellRender}
         itemRender={optionItemRender}
+        multiple={multiple}
       />
     ) : selectMode === 'tree' ? (
-      <TreeCheckboxes
-        className={cx('Transfer-checkboxes')}
+      <TreeSelection
+        className={cx('Transfer-selection')}
         options={options || []}
         value={value}
         disabled={disabled}
@@ -380,10 +395,11 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
         option2value={option2value}
         onDeferLoad={onDeferLoad}
         itemRender={optionItemRender}
+        multiple={multiple}
       />
     ) : selectMode === 'chained' ? (
-      <ChainedCheckboxes
-        className={cx('Transfer-checkboxes')}
+      <ChainedSelection
+        className={cx('Transfer-selection')}
         options={options || []}
         value={value}
         disabled={disabled}
@@ -391,10 +407,11 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
         option2value={option2value}
         onDeferLoad={onDeferLoad}
         itemRender={optionItemRender}
+        multiple={multiple}
       />
     ) : selectMode === 'associated' ? (
-      <AssociatedCheckboxes
-        className={cx('Transfer-checkboxes')}
+      <AssociatedSelection
+        className={cx('Transfer-selection')}
         options={options || []}
         value={value}
         disabled={disabled}
@@ -407,10 +424,11 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
         rightMode={rightMode}
         leftDefaultValue={leftDefaultValue}
         itemRender={optionItemRender}
+        multiple={multiple}
       />
     ) : (
-      <ListCheckboxes
-        className={cx('Transfer-checkboxes')}
+      <GroupedSelection
+        className={cx('Transfer-selection')}
         options={options || []}
         value={value}
         disabled={disabled}
@@ -418,6 +436,7 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
         option2value={option2value}
         onDeferLoad={onDeferLoad}
         itemRender={optionItemRender}
+        multiple={multiple}
       />
     );
   }
@@ -440,7 +459,7 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
       translate: __
     } = this.props;
 
-    this.valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    this.valueArray = BaseSelection.value2array(value, options, option2value);
     this.availableOptions = flattenTree(options).filter(
       (option, index, list) =>
         !option.disabled &&
@@ -452,7 +471,9 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
       <div
         className={cx('Transfer', className, inline ? 'Transfer--inline' : '')}
       >
-        <div className={cx('Transfer-select')}>{this.renderSelect()}</div>
+        <div className={cx('Transfer-select')}>
+          {this.renderSelect(this.props)}
+        </div>
         <div className={cx('Transfer-mid')}>
           {showArrow /*todo 需要改成确认模式，即：点了按钮才到右边 */ ? (
             <div className={cx('Transfer-arrow')}>
@@ -481,7 +502,7 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
             </a>
           </div>
           <ResultList
-            className={cx('Transfer-selections')}
+            className={cx('Transfer-value')}
             sortable={sortable}
             disabled={disabled}
             value={value}
@@ -497,7 +518,7 @@ export class Transfer extends React.Component<TransferProps, TransferState> {
 
 export default themeable(
   localeable(
-    uncontrollable(Transfer, {
+    uncontrollable(class extends Transfer {}, {
       value: 'onChange'
     })
   )