amis 1.4.2-beta.6 → 1.5.0

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

package/src/components/Tree.tsx

@@ -24,6 +24,20 @@ import Checkbox from './Checkbox';
 import {LocaleProps, localeable} from '../locale';
 import Spinner from './Spinner';
 
+interface IDropIndicator {
+  left: number;
+  top: number;
+  width: number;
+  height?: number;
+}
+
+export interface IDropInfo {
+  dragNode: Option | null;
+  node: Option;
+  position: 'top' | 'bottom' | 'self';
+  indicator: IDropIndicator;
+}
+
 interface TreeSelectorProps extends ThemeProps, LocaleProps {
   highlightTxt?: string;
 
@@ -97,6 +111,8 @@ interface TreeSelectorProps extends ThemeProps, LocaleProps {
   onDelete?: (value: Option) => void;
   onDeferLoad?: (option: Option) => void;
   onExpandTree?: (nodePathArr: any[]) => void;
+  draggable?: boolean;
+  onMove?: (dropInfo: IDropInfo) => void;
 }
 
 interface TreeSelectorState {
@@ -106,6 +122,9 @@ interface TreeSelectorState {
   isAdding: boolean;
   isEditing: boolean;
   editingItem: Option | null;
+
+  // 拖拽指示器
+  dropIndicator?: IDropIndicator;
 }
 
 export class TreeSelector extends React.Component<
@@ -146,6 +165,16 @@ export class TreeSelector extends React.Component<
   };
 
   unfolded: WeakMap<Object, boolean> = new WeakMap();
+  dragNode: Option | null;
+  dropInfo: IDropInfo | null;
+  startPoint: {
+    x: number;
+    y: number;
+  } = {
+    x: 0,
+    y: 0
+  };
+  root = React.createRef<HTMLDivElement>();
 
   constructor(props: TreeSelectorProps) {
     super(props);
@@ -168,7 +197,8 @@ export class TreeSelector extends React.Component<
       addingParent: null,
       isAdding: false,
       isEditing: false,
-      editingItem: null
+      editingItem: null,
+      dropIndicator: undefined
     };
 
     this.syncUnFolded(props);
@@ -603,6 +633,129 @@ export class TreeSelector extends React.Component<
     );
   }
 
+  getOffsetPosition(element: HTMLElement) {
+    let left = 0;
+    let top = 0;
+
+    while (element.offsetParent) {
+      left += element.offsetLeft;
+      top += element.offsetTop;
+      element = element.offsetParent as HTMLElement;
+    }
+    return {left, top};
+  }
+
+  @autobind
+  getDropInfo(e: React.DragEvent<Element>, node: Option): IDropInfo {
+    let rect = e.currentTarget.getBoundingClientRect();
+
+    const dragNode = this.dragNode;
+    const deltaX = Math.min(50, rect.width * 0.3);
+    const gap = node?.children?.length ? 0 : 16;
+
+    // 计算相对位置
+    let offset = this.getOffsetPosition(this.root.current!);
+    let targetOffset = this.getOffsetPosition(e.currentTarget as HTMLElement);
+    let left = targetOffset.left - offset.left;
+    let top = targetOffset.top - offset.top;
+
+    let {clientX, clientY} = e;
+
+    let position: IDropInfo['position'] =
+      clientY >= rect.top + rect.height / 2 ? 'bottom' : 'top';
+    let indicator;
+    if (position === 'bottom' && clientX >= this.startPoint.x + deltaX) {
+      position = 'self';
+      indicator = {
+        top: top,
+        left: left,
+        width: rect.width,
+        height: rect.height
+      };
+    } else {
+      indicator = {
+        top: position === 'bottom' ? top + rect.height : top,
+        left: left + gap,
+        width: rect.width - gap
+      };
+    }
+
+    return {
+      node,
+      dragNode,
+      position,
+      indicator
+    };
+  }
+
+  @autobind
+  updateDropIndicator(e: React.DragEvent<Element>, node: Option) {
+    const gap = node?.children?.length ? 0 : 16;
+    this.dropInfo = this.getDropInfo(e, node);
+    let {dragNode, indicator} = this.dropInfo;
+    if (node === dragNode) {
+      this.setState({dropIndicator: undefined});
+      return;
+    }
+    this.setState({
+      dropIndicator: indicator
+    });
+  }
+
+  @autobind
+  onDragStart(node: Option) {
+    let draggable = this.props.draggable;
+    return (e: React.DragEvent<Element>) => {
+      if (draggable) {
+        e.dataTransfer.effectAllowed = 'copyMove';
+
+        this.dragNode = node;
+        this.dropInfo = null;
+        this.startPoint = {
+          x: e.clientX,
+          y: e.clientY
+        };
+
+        if (node?.children?.length) {
+          this.unfolded.set(node, false);
+          this.forceUpdate();
+        }
+      } else {
+        this.dragNode = null;
+        this.dropInfo = null;
+      }
+      e.stopPropagation();
+    };
+  }
+
+  @autobind
+  onDragOver(node: Option) {
+    return (e: React.DragEvent<Element>) => {
+      if (!this.dragNode) {
+        return;
+      }
+      this.updateDropIndicator(e, node);
+      e.preventDefault();
+    };
+  }
+
+  @autobind
+  onDragEnd(dragNode: Option) {
+    return (e: React.DragEvent<Element>) => {
+      this.setState({
+        dropIndicator: undefined
+      });
+      let node = this.dropInfo?.node;
+      if (!this.dropInfo || !node || dragNode === node) {
+        return;
+      }
+      this.props.onMove?.(this.dropInfo);
+      this.dragNode = null;
+      this.dropInfo = null;
+      e.preventDefault();
+    };
+  }
+
   @autobind
   renderList(
     list: Options,
@@ -633,7 +786,8 @@ export class TreeSelector extends React.Component<
       createTip,
       editTip,
       removeTip,
-      translate: __
+      translate: __,
+      draggable
     } = this.props;
     const {
       value: stateValue,
@@ -729,7 +883,17 @@ export class TreeSelector extends React.Component<
                 'is-checked': checked,
                 'is-disabled': nodeDisabled
               })}
+              draggable={draggable}
+              onDragStart={this.onDragStart(item)}
+              onDragOver={this.onDragOver(item)}
+              onDragEnd={this.onDragEnd(item)}
             >
+              {draggable && (
+                <a className={cx('Tree-itemDrager drag-bar')}>
+                  <Icon icon="drag-bar" className="icon" />
+                </a>
+              )}
+
               {item.loading ? (
                 <Spinner
                   size="sm"
@@ -756,7 +920,7 @@ export class TreeSelector extends React.Component<
                 <i
                   className={cx(
                     `Tree-itemIcon ${
-                      (childrenItems ? 'Tree-folderIcon' : 'Tree-leafIcon')
+                      childrenItems ? 'Tree-folderIcon' : 'Tree-leafIcon'
                     }`
                   )}
                   onClick={() =>
@@ -766,9 +930,11 @@ export class TreeSelector extends React.Component<
                       : this.handleSelect(item))
                   }
                 >
-                  {getIcon(iconValue)
-                    ? <Icon icon={iconValue} className="icon"/>
-                    : <i className={iconValue}></i>}
+                  {getIcon(iconValue) ? (
+                    <Icon icon={iconValue} className="icon" />
+                  ) : (
+                    <i className={iconValue}></i>
+                  )}
                 </i>
               ) : null}
 
@@ -872,10 +1038,19 @@ export class TreeSelector extends React.Component<
       rootCreatable,
       rootCreateTip,
       disabled,
+      draggable,
       translate: __
     } = this.props;
     let options = this.props.options;
-    const {value, isAdding, addingParent, isEditing, inputValue} = this.state;
+    const {
+      value,
+      isAdding,
+      addingParent,
+      isEditing,
+      inputValue,
+      dropIndicator
+    } = this.state;
+
     let addBtn = null;
 
     if (creatable && rootCreatable !== false && hideRoot) {
@@ -896,8 +1071,10 @@ export class TreeSelector extends React.Component<
       <div
         className={cx(`Tree ${className || ''}`, {
           'Tree--outline': showOutline,
-          'is-disabled': disabled
+          'is-disabled': disabled,
+          'is-draggable': draggable
         })}
+        ref={this.root}
       >
         {(options && options.length) || addBtn || hideRoot === false ? (
           <ul className={cx('Tree-list')}>
@@ -957,6 +1134,15 @@ export class TreeSelector extends React.Component<
         ) : (
           <div className={cx('Tree-placeholder')}>{placeholder}</div>
         )}
+
+        {dropIndicator && (
+          <div
+            className={cx('Tree-dropIndicator', {
+              'Tree-dropIndicator--hover': !!dropIndicator.height
+            })}
+            style={dropIndicator}
+          />
+        )}
       </div>
     );
   }

package/src/components/{TreeCheckboxes.tsx → TreeSelection.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';
@@ -9,25 +9,25 @@ import Spinner from './Spinner';
 import {localeable} from '../locale';
 import {Icon} from './icons';
 
-export interface TreeCheckboxesProps extends BaseCheckboxesProps {
+export interface TreeSelectionProps extends BaseSelectionProps {
   expand?: 'all' | 'first' | 'root' | 'none';
 }
 
-export interface TreeCheckboxesState {
+export interface TreeSelectionState {
   expanded: Array<string>;
 }
 
-export class TreeCheckboxes extends BaseCheckboxes<
-  TreeCheckboxesProps,
-  TreeCheckboxesState
+export class TreeSelection extends BaseSelection<
+  TreeSelectionProps,
+  TreeSelectionState
 > {
   valueArray: Array<Option>;
-  state: TreeCheckboxesState = {
+  state: TreeSelectionState = {
     expanded: []
   };
 
   static defaultProps = {
-    ...BaseCheckboxes.defaultProps,
+    ...BaseSelection.defaultProps,
     expand: 'first' as 'first'
   };
 
@@ -35,7 +35,7 @@ export class TreeCheckboxes extends BaseCheckboxes<
     this.syncExpanded();
   }
 
-  componentDidUpdate(prevProps: TreeCheckboxesProps) {
+  componentDidUpdate(prevProps: TreeSelectionProps) {
     const props = this.props;
 
     if (
@@ -82,7 +82,9 @@ export class TreeCheckboxes extends BaseCheckboxes<
       option2value,
       options,
       onDeferLoad,
-      disabled
+      disabled,
+      multiple,
+      clearable
     } = this.props;
 
     if (disabled || option.disabled) {
@@ -92,12 +94,13 @@ export class TreeCheckboxes extends BaseCheckboxes<
       return;
     }
 
-    let valueArray = BaseCheckboxes.value2array(value, options, option2value);
+    let valueArray = BaseSelection.value2array(value, options, option2value);
 
     if (
       option.value === void 0 &&
       Array.isArray(option.children) &&
-      option.children.length
+      option.children.length &&
+      multiple
     ) {
       const someCheckedFn = (child: Option) =>
         (Array.isArray(child.children) && child.children.length
@@ -124,10 +127,12 @@ export class TreeCheckboxes extends BaseCheckboxes<
     } else {
       let idx = valueArray.indexOf(option);
 
-      if (~idx) {
+      if (~idx && (multiple || clearable)) {
         valueArray.splice(idx, 1);
-      } else {
+      } else if (multiple) {
         valueArray.push(option);
+      } else {
+        valueArray = [option];
       }
     }
 
@@ -135,7 +140,7 @@ export class TreeCheckboxes extends BaseCheckboxes<
       ? valueArray.map(item => option2value(item))
       : valueArray;
 
-    onChange && onChange(newValue);
+    onChange && onChange(multiple ? newValue : newValue[0]);
   }
 
   toggleCollapsed(option: Option, index: string) {
@@ -163,7 +168,8 @@ export class TreeCheckboxes extends BaseCheckboxes<
       disabled,
       classnames: cx,
       itemClassName,
-      itemRender
+      itemRender,
+      multiple
     } = this.props;
     const id = indexes.join('-');
     const valueArray = this.valueArray;
@@ -204,7 +210,7 @@ export class TreeCheckboxes extends BaseCheckboxes<
       <div
         key={index}
         className={cx(
-          'TreeCheckboxes-item',
+          'TreeSelection-item',
           disabled || option.disabled || (option.defer && option.loading)
             ? 'is-disabled'
             : '',
@@ -213,9 +219,10 @@ export class TreeCheckboxes extends BaseCheckboxes<
       >
         <div
           className={cx(
-            'TreeCheckboxes-itemInner',
+            'TreeSelection-itemInner',
             itemClassName,
-            option.className
+            option.className,
+            checked ? 'is-active' : ''
           )}
           onClick={() => this.toggleOption(option)}
         >
@@ -231,13 +238,13 @@ export class TreeCheckboxes extends BaseCheckboxes<
             </a>
           ) : null}
 
-          <div className={cx('TreeCheckboxes-itemLabel')}>
+          <div className={cx('TreeSelection-itemLabel')}>
             {itemRender(option)}
           </div>
 
           {option.defer && option.loading ? <Spinner show size="sm" /> : null}
 
-          {!option.defer || option.loaded ? (
+          {multiple && (!option.defer || option.loaded) ? (
             <Checkbox
               size="sm"
               checked={checked}
@@ -249,7 +256,7 @@ export class TreeCheckboxes extends BaseCheckboxes<
           ) : null}
         </div>
         {hasChildren ? (
-          <div className={cx('TreeCheckboxes-sublist')}>
+          <div className={cx('TreeSelection-sublist')}>
             {option.children!.map((option, key) =>
               this.renderItem(option, key, indexes.concat(key))
             )}
@@ -270,7 +277,7 @@ export class TreeCheckboxes 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) {
@@ -278,11 +285,11 @@ export class TreeCheckboxes extends BaseCheckboxes<
     }
 
     return (
-      <div className={cx('TreeCheckboxes', className)}>
+      <div className={cx('TreeSelection', className)}>
         {body && body.length ? (
           body
         ) : (
-          <div className={cx('TreeCheckboxes-placeholder')}>
+          <div className={cx('TreeSelection-placeholder')}>
             {__(placeholder)}
           </div>
         )}
@@ -293,7 +300,7 @@ export class TreeCheckboxes extends BaseCheckboxes<
 
 export default themeable(
   localeable(
-    uncontrollable(TreeCheckboxes, {
+    uncontrollable(TreeSelection, {
       value: 'onChange'
     })
   )