amis 1.4.2-beta.6 → 1.5.0

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,11 +51,13 @@ interface ToastComponentProps extends ThemeProps, LocaleProps {
   closeButton: boolean;
   showIcon?: boolean;
   timeout: number;
+  errorTimeout: number;
   className?: string;
 }
 
 interface Item extends Config {
-  body: string;
+  title?: string | React.ReactNode;
+  body: string | React.ReactNode;
   level: 'info' | 'success' | 'error' | 'warning';
   id: string;
   onDissmiss?: () => void;
@@ -78,11 +80,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: 4000,
+    errorTimeout: 6000 // 错误的时候 time 调长
   };
   static themeKey = 'toast';
 
@@ -155,18 +158,17 @@ export class ToastComponent extends React.Component<
       classnames: cx,
       className,
       timeout,
+      errorTimeout,
       position,
       showIcon,
       translate,
       closeButton
     } = this.props;
     const items = this.state.items;
-
     const groupedItems = groupBy(items, item => item.position || position);
 
     return Object.keys(groupedItems).map(position => {
       const toasts = groupedItems[position];
-
       return (
         <div
           key={position}
@@ -177,19 +179,25 @@ 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}
+                title={item.title}
+                body={item.body}
+                level={level}
+                timeout={toastTimeout}
+                closeButton={item.closeButton ?? closeButton}
+                onDismiss={this.handleDismissed.bind(this, items.indexOf(item))}
+                translate={translate}
+                showIcon={showIcon}
+              />
+            );
+          })}
         </div>
       );
     });
@@ -199,7 +207,8 @@ export class ToastComponent extends React.Component<
 export default themeable(localeable(ToastComponent));
 
 interface ToastMessageProps {
-  body: string;
+  title?: string | React.ReactNode;
+  body: string | React.ReactNode;
   level: 'info' | 'success' | 'error' | 'warning';
   timeout: number;
   closeButton?: boolean;
@@ -284,6 +293,7 @@ export class ToastMessage extends React.Component<
       onDismiss,
       classnames: cx,
       closeButton,
+      title,
       body,
       allowHtml,
       level,
@@ -321,8 +331,25 @@ export class ToastMessage extends React.Component<
                   ) : null}
                 </div>
               )}
-              <div className={cx('Toast-body')}>
-                {allowHtml ? <Html html={body} /> : body}
+
+              <div className={cx('Toast-content')}>
+                {typeof title === 'string' ? (
+                  <span className={cx(`Toast-title`)}>{title}</span>
+                ) : React.isValidElement(title) ? (
+                  React.cloneElement(title, {
+                    className: cx(`Toast-title`, title?.props?.className ?? '')
+                  })
+                ) : null}
+
+                {typeof body === 'string' ? (
+                  <div className={cx('Toast-body')}>
+                    {allowHtml ? <Html html={body} /> : body}
+                  </div>
+                ) : React.isValidElement(body) ? (
+                  React.cloneElement(body, {
+                    className: cx(`Toast-body`, body?.props?.className ?? '')
+                  })
+                ) : null}
               </div>
 
               {closeButton ? (

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'
     })
   )