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

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

package/src/components/TransferDropDown.tsx

@@ -0,0 +1,120 @@
+import {localeable} from '../locale';
+import {themeable} from '../theme';
+import {Transfer, TransferProps} from './Transfer';
+import {uncontrollable} from 'uncontrollable';
+import React from 'react';
+import ResultBox from './ResultBox';
+import {Icon} from './icons';
+import InputBox from './InputBox';
+import PopOverContainer from './PopOverContainer';
+
+export interface TransferDropDownProps extends TransferProps {
+  // 新的属性？
+  multiple?: boolean;
+  borderMode?: 'full' | 'half' | 'none';
+}
+
+export class TransferDropDown extends Transfer<TransferDropDownProps> {
+  render() {
+    const {
+      classnames: cx,
+      value,
+      translate: __,
+      disabled,
+      className,
+      onChange,
+      onSearch,
+      multiple,
+      borderMode
+    } = this.props;
+    const {inputValue, searchResult} = this.state;
+
+    return (
+      <PopOverContainer
+        popOverClassName={cx('TransferDropDown-popover')}
+        popOverRender={({onClose}) => (
+          <div className={cx('TransferDropDown-content')}>
+            {onSearch ? (
+              <div className={cx('Transfer-search')}>
+                <InputBox
+                  value={inputValue}
+                  onChange={this.handleSearch}
+                  placeholder={__('Transfer.searchKeyword')}
+                  clearable={false}
+                  onKeyDown={this.handleSearchKeyDown}
+                >
+                  {searchResult !== null ? (
+                    <a onClick={this.handleSeachCancel}>
+                      <Icon icon="close" className="icon" />
+                    </a>
+                  ) : (
+                    <Icon icon="search" className="icon" />
+                  )}
+                </InputBox>
+              </div>
+            ) : null}
+            {searchResult !== null
+              ? this.renderSearchResult({
+                  ...this.props,
+                  value,
+                  onChange: multiple
+                    ? onChange
+                    : (value: any) => {
+                        onClose();
+                        onChange?.(value);
+                      },
+                  multiple
+                })
+              : this.renderOptions({
+                  ...this.props,
+                  value,
+                  onChange: multiple
+                    ? onChange
+                    : (value: any) => {
+                        onClose();
+                        onChange?.(value);
+                      },
+                  multiple
+                })}
+          </div>
+        )}
+      >
+        {({onClick, isOpened, ref}) => (
+          <ResultBox
+            className={cx(
+              'TransferDropDown',
+              className,
+              isOpened ? 'is-active' : ''
+            )}
+            borderMode={borderMode}
+            allowInput={false}
+            result={
+              multiple
+                ? value
+                : value?.[0]
+                ? this.props.itemRender(value[0])
+                : null
+            }
+            onResultChange={onChange}
+            onResultClick={onClick}
+            placeholder={__('Select.placeholder')}
+            disabled={disabled}
+            ref={ref}
+          >
+            <span className={cx('TransferDropDown-icon')}>
+              <Icon icon="caret" className="icon" />
+            </span>
+          </ResultBox>
+        )}
+      </PopOverContainer>
+    );
+  }
+}
+
+export default themeable(
+  localeable(
+    uncontrollable(TransferDropDown, {
+      value: 'onChange'
+    })
+  )
+);

package/src/components/TransferPicker.tsx

@@ -0,0 +1,91 @@
+import {localeable} from '../locale';
+import {themeable} from '../theme';
+import Transfer, {TransferProps} from './Transfer';
+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';
+
+export interface TransferPickerProps extends Omit<TransferProps, 'itemRender'> {
+  // 新的属性？
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+  /**
+   * 边框模式，全边框，还是半边框，或者没边框。
+   */
+  borderMode?: 'full' | 'half' | 'none';
+}
+
+export class TransferPicker extends React.Component<TransferPickerProps> {
+  @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,
+      borderMode,
+      ...rest
+    } = this.props;
+
+    return (
+      <PickerContainer
+        title={__('Select.placeholder')}
+        popOverRender={({onClose, value, onChange}) => {
+          return <Transfer {...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}
+            borderMode={borderMode}
+          >
+            <span className={cx('TransferPicker-icon')}>
+              <Icon icon="pencil" className="icon" />
+            </span>
+          </ResultBox>
+        )}
+      </PickerContainer>
+    );
+  }
+}
+
+export default themeable(
+  localeable(
+    uncontrollable(TransferPicker, {
+      value: 'onChange'
+    })
+  )
+);