amis 1.4.2-beta.11 → 1.4.2-beta.16

package/src/components/ResultBox.tsx

@@ -4,7 +4,7 @@ import {InputBoxProps} from './InputBox';
 import {uncontrollable} from 'uncontrollable';
 import {Icon} from './icons';
 import Input from './Input';
-import {autobind} from '../utils/helper';
+import {autobind, ucFirst} from '../utils/helper';
 import {LocaleProps, localeable} from '../locale';
 
 export interface ResultBoxProps
@@ -113,20 +113,20 @@ export class ResultBox extends React.Component<ResultBoxProps> {
       onKeyPress,
       onFocus,
       onBlur,
+      borderMode,
       ...rest
     } = this.props;
     const isFocused = this.state.isFocused;
 
     return (
       <div
-        className={cx(
-          'ResultBox',
-          className,
-          isFocused ? 'is-focused' : '',
-          disabled ? 'is-disabled' : '',
-          hasError ? 'is-error' : '',
-          onResultClick ? 'is-clickable' : ''
-        )}
+        className={cx('ResultBox', className, {
+          'is-focused': isFocused,
+          'is-disabled': disabled,
+          'is-error': hasError,
+          'is-clickable': onResultClick,
+          [`ResultBox--border${ucFirst(borderMode)}`]: borderMode
+        })}
         onClick={onResultClick}
         tabIndex={!allowInput && !disabled && onFocus ? 0 : -1}
         onKeyPress={allowInput ? undefined : onKeyPress}

package/src/components/Select.tsx

@@ -770,7 +770,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       hideSelected,
       renderMenu,
       mobileClassName,
-      useMobileUI = true
+      useMobileUI = false
     } = this.props;
     const {selection} = this.state;
 

package/src/components/Selection.tsx

@@ -42,7 +42,7 @@ export class BaseSelection<
     placeholder: 'placeholder.noOption',
     itemRender: (option: Option) => <span>{option.label}</span>,
     multiple: true,
-    clearable: true
+    clearable: false
   };
 
   static value2array(

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

package/src/components/TransferDropDown.tsx

@@ -11,6 +11,7 @@ import PopOverContainer from './PopOverContainer';
 export interface TransferDropDownProps extends TransferProps {
   // 新的属性？
   multiple?: boolean;
+  borderMode?: 'full' | 'half' | 'none';
 }
 
 export class TransferDropDown extends Transfer<TransferDropDownProps> {
@@ -23,7 +24,8 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
       className,
       onChange,
       onSearch,
-      multiple
+      multiple,
+      borderMode
     } = this.props;
     const {inputValue, searchResult} = this.state;
 
@@ -84,6 +86,7 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
               className,
               isOpened ? 'is-active' : ''
             )}
+            borderMode={borderMode}
             allowInput={false}
             result={
               multiple

package/src/components/TransferPicker.tsx

@@ -11,6 +11,11 @@ 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> {
@@ -37,6 +42,7 @@ export class TransferPicker extends React.Component<TransferPickerProps> {
       className,
       onChange,
       size,
+      borderMode,
       ...rest
     } = this.props;
 
@@ -64,6 +70,7 @@ export class TransferPicker extends React.Component<TransferPickerProps> {
             onResultClick={onClick}
             placeholder={__('Select.placeholder')}
             disabled={disabled}
+            borderMode={borderMode}
           >
             <span className={cx('TransferPicker-icon')}>
               <Icon icon="pencil" className="icon" />

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/icons.tsx

@@ -24,6 +24,7 @@ import ViewIcon from '../icons/view.svg';
 import RemoveIcon from '../icons/remove.svg';
 import RetryIcon from '../icons/retry.svg';
 import UploadIcon from '../icons/upload.svg';
+import DownloadIcon from '../icons/download.svg';
 import FileIcon from '../icons/file.svg';
 import StatusSuccessIcon from '../icons/status-success.svg';
 import StatusFailIcon from '../icons/status-fail.svg';
@@ -120,6 +121,7 @@ registerIcon('view', ViewIcon);
 registerIcon('remove', RemoveIcon);
 registerIcon('retry', RetryIcon);
 registerIcon('upload', UploadIcon);
+registerIcon('download', DownloadIcon);
 registerIcon('file', FileIcon);
 registerIcon('status-success', StatusSuccessIcon);
 registerIcon('status-fail', StatusFailIcon);

package/src/envOverwrite.ts

@@ -4,18 +4,31 @@
 
 import {SchemaNode, Schema} from './types';
 import {RendererProps, RendererConfig, addSchemaFilter} from './factory';
+import {findObjectsWithKey} from './utils/helper';
 const isMobile = (window as any).matchMedia?.('(max-width: 768px)').matches
   ? true
   : false;
 
-addSchemaFilter(function (schema: Schema, renderer, props?: any) {
-  if (schema && schema.mobile && isMobile) {
-    return {...schema, ...schema.mobile};
+// 这里不能用 addSchemaFilter 是因为还需要更深层的替换，比如 select 里的 options
+export const envOverwrite = (schema: any, locale?: string) => {
+  if (schema.mobile && isMobile) {
+    Object.assign(schema, schema.mobile);
+    delete schema.mobile;
   }
 
-  if (props?.locale && schema[props.locale]) {
-    return {...schema, ...schema[props.locale]};
+  if (locale) {
+    let schemaNodes = findObjectsWithKey(schema, locale);
+    for (let schemaNode of schemaNodes) {
+      Object.assign(schemaNode, schemaNode[locale]);
+      delete schemaNode[locale];
+    }
   }
 
-  return schema;
-});
+  if (isMobile) {
+    let schemaNodes = findObjectsWithKey(schema, 'mobile');
+    for (let schemaNode of schemaNodes) {
+      Object.assign(schemaNode, schemaNode['mobile']);
+      delete schemaNode['mobile'];
+    }
+  }
+};

package/src/factory.tsx

@@ -3,7 +3,14 @@ import {RendererStore, IRendererStore, IIRendererStore} from './store/index';
 import {getEnv, destroy} from 'mobx-state-tree';
 import {wrapFetcher} from './utils/api';
 import {normalizeLink} from './utils/normalizeLink';
-import {findIndex, promisify, qsparse, string2regExp} from './utils/helper';
+import {
+  findIndex,
+  isObject,
+  JSONTraverse,
+  promisify,
+  qsparse,
+  string2regExp
+} from './utils/helper';
 import {
   Api,
   fetcherResult,
@@ -25,6 +32,7 @@ import {getDefaultLocale, makeTranslator, LocaleProps} from './locale';
 import ScopedRootRenderer, {RootRenderProps} from './Root';
 import {HocStoreFactory} from './WithStore';
 import {EnvContext, RendererEnv} from './env';
+import {envOverwrite} from './envOverwrite';
 
 export interface TestFunc {
   (
@@ -127,12 +135,20 @@ export interface RenderOptions {
   affixOffsetTop?: number;
   affixOffsetBottom?: number;
   richTextToken?: string;
+  /**
+   * 替换文本，用于实现 URL 替换、语言替换等
+   */
+  replaceText?: {[propName: string]: any};
+  /**
+   * 文本替换的黑名单，因为属性太多了所以改成黑名单的 fangs
+   */
+  replaceTextIgnoreKeys?: String[];
   [propName: string]: any;
 }
 
 export interface fetcherConfig {
   url: string;
-  method?: 'get' | 'post' | 'put' | 'patch' | 'delete';
+  method?: 'get' | 'post' | 'put' | 'patch' | 'delete' | 'jsonp';
   data?: any;
   config?: any;
 }
@@ -275,19 +291,19 @@ const defaultOptions: RenderOptions = {
   },
   isCancel() {
     console.error(
-      'Please implements this. see https://baidu.gitee.io/amis/docs/start/getting-started#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97'
+      'Please implement isCancel. see https://baidu.gitee.io/amis/docs/start/getting-started#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97'
     );
     return false;
   },
   updateLocation() {
     console.error(
-      'Please implements this. see https://baidu.gitee.io/amis/docs/start/getting-started#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97'
+      'Please implement updateLocation. see https://baidu.gitee.io/amis/docs/start/getting-started#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97'
     );
   },
   alert,
   confirm,
   notify: (type, msg, conf) =>
-    toast[type] ? toast[type](msg) : console.warn('[Notify]', type, msg),
+    toast[type] ? toast[type](msg, conf) : console.warn('[Notify]', type, msg),
 
   jumpTo: (to: string, action?: any) => {
     if (to === 'goBack') {
@@ -335,7 +351,15 @@ const defaultOptions: RenderOptions = {
   },
   // 用于跟踪用户在界面中的各种操作
   tracker(eventTrack: EventTrack, props: PlainObject) {},
-  rendererResolver: resolveRenderer
+  rendererResolver: resolveRenderer,
+  replaceTextIgnoreKeys: [
+    'type',
+    'name',
+    'mode',
+    'target',
+    'reload',
+    'persistData'
+  ]
 };
 let stores: {
   [propName: string]: IRendererStore;
@@ -355,6 +379,9 @@ export function render(
   const translate = props.translate || makeTranslator(locale);
   let store = stores[options.session || 'global'];
 
+  // 根据环境覆盖 schema，这个要在最前面做，不然就无法覆盖 validations
+  envOverwrite(schema, locale);
+
   if (!store) {
     options = {
       ...defaultOptions,
@@ -387,6 +414,25 @@ export function render(
     env.locale = locale;
   }
 
+  // 进行文本替换
+  if (env.replaceText && isObject(env.replaceText)) {
+    const replaceKeys = Object.keys(env.replaceText);
+    replaceKeys.sort().reverse(); // 避免用户将短的放前面
+    const replaceTextIgnoreKeys = new Set(env.replaceTextIgnoreKeys || []);
+    JSONTraverse(schema, (value: any, key: string, object: any) => {
+      if (typeof value === 'string' && !replaceTextIgnoreKeys.has(key)) {
+        for (const replaceKey of replaceKeys) {
+          if (~value.indexOf(replaceKey)) {
+            object[key] = value.replaceAll(
+              replaceKey,
+              env.replaceText[replaceKey]
+            );
+          }
+        }
+      }
+    });
+  }
+
   return (
     <EnvContext.Provider value={env}>
       <ScopedRootRenderer

package/src/icons/download.svg

@@ -0,0 +1,4 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="download" class="svg-inline--fa fa-download fa-w-16" role="img"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path>
+</svg>