amis 1.6.5-beta.3 → 1.8.0-beta.0

package/src/icons/upload.svg

@@ -1,11 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" 
-    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" p-id="1463">
-    <g stroke="currentColor" stroke-width="2" fill="none" fill-rule="evenodd">
-        <path d="M8,12.2426 L8,1.2426"></path>
-        <path d="M4.4648,4.9496 L8.7068,0.7076"></path>
-        <path d="M11.5352,4.9496 L7.2932,0.7076"></path>
-        <path d="M0,14.2426 L16,14.2426"></path>
-        <path d="M1,9.2426 L1,15.2426"></path>
-        <path d="M15,9.2426 L15,15.2426"></path>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="上传" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M3,10 L3,12.995 L13,12.995 L13,10 L14,10 L14,14 L13,14 L13,13.995 L3,13.995 L3,14 L2,14 L2,10 L3,10 Z M8.0259,1.9998 L11.8401458,5.8148 L11.1331458,6.5218 L8.5169,3.9048 L8.51614575,10.9998 L7.51614575,10.9998 L7.5169,3.9228 L4.89114575,6.5478 L4.18414575,5.8418 L8.0259,1.9998 Z" id="图标-填色" fill="currentColor"></path>
     </g>
 </svg>

package/src/index.tsx

@@ -175,6 +175,7 @@ import './renderers/TableView';
 import './renderers/Code';
 import './renderers/WebComponent';
 import './renderers/GridNav';
+import './renderers/TooltipWrapper';
 
 import Scoped, {ScopedContext} from './Scoped';
 

package/src/locale/en-US.ts

@@ -100,15 +100,17 @@ register('en-US', {
   'fetchFailed': 'Fetch api failed',
   'File.continueAdd': 'Continue add',
   'File.downloadTpl': 'Download template',
-  'File.dragDrop': `Drag 'n' drop some files here`,
+  'File.dragDrop': `Drag 'n' drop some files here or click here to upload`,
   'File.errorRetry': 'File upload failed, please try again',
   'File.failed': 'Failed files.',
   'File.invalidType': '{{files}} does not match type `{{accept}}`',
+  'File.maxLength': 'The maximum limit is {{maxLength}}',
   'File.maxSize': '{{filename}} you selected exceeds the maximum limit of {{maxsize}} (in bytes)',
   'File.pause': 'Pause uplaod',
   'File.repick': 'Repick',
   'File.result': 'Successfully uploaded {{uploaded}} files, failed to upload {{failed}} files',
   'File.retry': 'Retry',
+  'File.sizeLimit': 'The maximum file size is {{maxSize}} B',
   'File.start': 'Start upload',
   'File.upload': 'Upload',
   'File.uploadFailed': 'return data of udpload api is empty',

package/src/locale/zh-CN.ts

@@ -105,17 +105,19 @@ register('zh-CN', {
   'fetchFailed': '初始化失败',
   'File.continueAdd': '继续添加',
   'File.downloadTpl': '下载模板',
-  'File.dragDrop': '将文件拖拽到此处',
+  'File.dragDrop': '将文件拖到此处，或点击上传',
   'File.errorRetry': '文件上传失败请重试',
   'File.failed': '失败文件',
   'File.invalidType': '{{files}} 不符合类型的 {{accept}} 的设定，请仔细检查',
+  'File.maxLength': '最多上传 {{maxLength}} 个文件',
   'File.maxSize': '{{filename}} 大小为 {{actualSize}} 超出了最大为 {{maxSize}} （字节）的限制',
   'File.pause': '暂停上传',
   'File.repick': '重新选择',
   'File.result': '已成功上传 {{uploaded}} 个文件，{{failed}} 个文件上传失败，',
   'File.retry': '重试上传',
+  'File.sizeLimit': '文件大小不超过 {{maxSize}} B',
   'File.start': '开始上传',
-  'File.upload': '已上传',
+  'File.upload': '文件上传',
   'File.uploadFailed': '接口返回错误，请仔细检查',
   'File.uploading': '上传中...',
   'Form.loadOptionsFailed': '加载选项失败，原因：{{reason}}',

package/src/renderers/Action.tsx

@@ -62,7 +62,8 @@ export interface ButtonSchema extends BaseSchema {
     | 'link'
     | 'primary'
     | 'dark'
-    | 'light';
+    | 'light'
+    | 'secondary';
 
   /**
    * @deprecated 通过 level 来配置

package/src/renderers/Breadcrumb.tsx

@@ -4,9 +4,26 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import {BaseSchema, SchemaIcon, SchemaUrlPath} from '../Schema';
-import {generateIcon} from '../utils/icon';
 import {filter} from '../utils/tpl';
-import {resolveVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
+import {resolveVariableAndFilter} from '../utils/tpl-builtin';
+import Breadcrumb from '../components/Breadcrumb';
+
+export type BreadcrumbBaseItemSchema = {
+  /**
+   * 文字
+   */
+  label?: string;
+
+  /**
+   * 图标类名
+   */
+  icon?: SchemaIcon;
+
+  /**
+   * 链接地址
+   */
+  href?: SchemaUrlPath;
+} & Omit<BaseSchema, 'type'>;
 
 export type BreadcrumbItemSchema = {
   /**
@@ -23,90 +40,117 @@ export type BreadcrumbItemSchema = {
    * 链接地址
    */
   href?: SchemaUrlPath;
+
+  /**
+   * 下拉菜单
+   */
+  dropdown?: Array<BreadcrumbBaseItemSchema>;
 } & Omit<BaseSchema, 'type'>;
 
+export type TooltipPositionType = 'top' | 'bottom' | 'left' | 'right';
+
+export type ItemPlace = 'start' | 'middle' | 'end';
+
 /**
  * Breadcrumb 显示渲染器
  * 文档：https://baidu.gitee.io/amis/docs/components/breadcrumb
  */
-export interface BreadcrumbSchema extends BaseSchema {
+
+ export interface BreadcrumbSchema extends BaseSchema {
   /**
    *  指定为面包屑显示控件
    */
   type: 'breadcrumb';
 
+  /**
+   * 面包项类名
+   */
+  itemClassName?: string;
+
   /**
    * 分隔符
    */
   separator?: string;
 
   /**
-   * 分隔符类
+   * 分隔符类名
    */
   separatorClassName?: string;
 
+  /**
+   * 下拉菜单类名
+   */
+  dropdownClassName?: string;
+
+  /**
+   * 下拉菜单项类名
+   */
+  dropdownItemClassName?: string;
+
   /**
    * 列表
    */
   items: Array<BreadcrumbItemSchema>;
+
+  /**
+   * labelMaxLength
+   */
+  labelMaxLength?: number;
+
+  /**
+   * 浮窗提示位置
+   */
+  tooltipPosition?: TooltipPositionType;
 }
 
-export interface BreadcrumbProps
-  extends RendererProps,
-    Omit<BreadcrumbSchema, 'type' | 'className'> {}
+export interface BreadcrumbProps extends RendererProps,
+  Omit<BreadcrumbSchema, 'type' | 'className'> {}
 
 export class BreadcrumbField extends React.Component<BreadcrumbProps, object> {
-  static defaultProps = {
-    className: '',
-    itemClassName: '',
-    separator: '/'
-  };
-
   render() {
     const {
-      className,
-      itemClassName,
-      separatorClassName,
-      classnames: cx,
       items,
       source,
       data,
-      separator,
-      render
+      env,
+      ...restProps
     } = this.props;
 
-    const crumbItems = items
+    let crumbItems = items
       ? items
       : (resolveVariableAndFilter(
           source,
           data,
           '| raw'
         ) as Array<BreadcrumbItemSchema>);
-    const crumbs = crumbItems
-      .map<React.ReactNode>((item, index) => (
-        <span className={cx('Breadcrumb-item', itemClassName)} key={index}>
-          {item.icon
-            ? generateIcon(cx, item.icon, 'Icon', 'Breadcrumb-icon')
-            : null}
-          {item.href ? (
-            <a href={filter(item.href, data)}>{filter(item.label, data)}</a>
-          ) : (
-            render('label', filter(item.label, data))
-          )}
-        </span>
-      ))
-      .reduce((prev, curr, index) => [
-        prev,
-        <span
-          className={cx('Breadcrumb-separator', separatorClassName)}
-          key={`separator-${index}`}
-        >
-          {separator}
-        </span>,
-        curr
-      ]);
-
-    return <div className={cx('Breadcrumb', className)}>{crumbs}</div>;
+    crumbItems = crumbItems.map(item => {
+      if (item.label) {
+        item.label = filter(item.label, data);
+      }
+      if (item.href) {
+        item.href = filter(item.href, data);
+      }
+      if (item.dropdown) {
+        item.dropdown = item.dropdown.map(dropdownItem => {
+          if (dropdownItem.label) {
+            dropdownItem.label = filter(dropdownItem.label, data);
+          }
+          if (dropdownItem.href) {
+            dropdownItem.href = filter(dropdownItem.href, data);
+          }
+          return dropdownItem;
+        });
+      }
+      return item;
+    });
+
+    return (
+      <Breadcrumb
+        items={crumbItems}
+        tooltipContainer={env?.getModalContainer}
+        {...restProps}
+      ></Breadcrumb>
+    );
   }
 }
 

package/src/renderers/ButtonGroup.tsx

@@ -15,12 +15,12 @@ export interface ButtonGroupSchema extends BaseSchema {
   type: 'button-group';
 
   /**
-   * 给 Button 配置 className。
+   * @deprecated 给 Button 配置 className。建议用btnLevel
    */
   btnClassName?: SchemaClassName;
 
   /**
-   * 给选中态 Button 配置 className。
+   * @deprecated 给选中态 Button 配置 className。建议用btnActiveLevel
    */
   btnActiveClassName: string;
 

package/src/renderers/Form/ChainedSelect.tsx

@@ -10,7 +10,8 @@ import Select from '../../components/Select';
 import {Api} from '../../types';
 import {isEffectiveApi} from '../../utils/api';
 import {SchemaApi} from '../../Schema';
-import {isMobile} from '../../utils/helper';
+import {isMobile, createObject} from '../../utils/helper';
+import {Action} from '../../types';
 
 /**
  * 级联选择框
@@ -81,6 +82,27 @@ export default class ChainedSelectControl extends React.Component<
     }
   }
 
+  doAction(action: Action, data: object, throwErrors: boolean) {
+    const {resetValue, onChange} = this.props;
+    const actionType = action?.actionType as string;
+
+    if (!!~['clear', 'reset'].indexOf(actionType)) {
+      onChange(resetValue ?? '');
+    }
+  }
+
+  array2value(arr: Array<any>, isExtracted: boolean = false) {
+    const {delimiter, joinValues, extractValue} = this.props;
+    // 判断arr的项是否已抽取
+    return isExtracted
+      ? (joinValues ? arr.join(delimiter || ',') : arr)
+      : (joinValues
+        ? arr.join(delimiter || ',')
+        : extractValue
+        ? arr.map(item => item.value || item)
+        : arr)
+  }
+
   loadMore() {
     const {
       value,
@@ -90,7 +112,8 @@ export default class ChainedSelectControl extends React.Component<
       extractValue,
       source,
       data,
-      env
+      env,
+      dispatchEvent
     } = this.props;
 
     const arr = Array.isArray(value)
@@ -135,7 +158,7 @@ export default class ChainedSelectControl extends React.Component<
             parentId,
             parent: arr[idx]
           })
-          .then(ret => {
+          .then(async (ret) => {
             // todo 没有检测 response.ok
 
             const stack = this.state.stack.concat();
@@ -147,7 +170,21 @@ export default class ChainedSelectControl extends React.Component<
             if (typeof remoteValue !== 'undefined') {
               arr.splice(idx + 1, value.length - idx - 1);
               arr.push(remoteValue);
-              onChange(joinValues ? arr.join(delimiter || ',') : arr);
+
+              const valueRes = this.array2value(arr, true);
+
+              const rendererEvent = await dispatchEvent(
+                'change',
+                createObject(data, {
+                  value: valueRes
+                })
+              );
+              
+              if (rendererEvent?.prevented) {
+                return;
+              }
+
+              onChange(valueRes);
             }
 
             stack.push({
@@ -171,8 +208,8 @@ export default class ChainedSelectControl extends React.Component<
     );
   }
 
-  handleChange(index: number, currentValue: any) {
-    const {value, delimiter, onChange, joinValues, extractValue} = this.props;
+  async handleChange(index: number, currentValue: any) {
+    const {value, delimiter, onChange, joinValues, extractValue, dispatchEvent, data} = this.props;
 
     const arr = Array.isArray(value)
       ? value.concat()
@@ -182,13 +219,20 @@ export default class ChainedSelectControl extends React.Component<
     arr.splice(index, arr.length - index);
     arr.push(joinValues ? currentValue.value : currentValue);
 
-    onChange(
-      joinValues
-        ? arr.join(delimiter || ',')
-        : extractValue
-        ? arr.map(item => item.value || item)
-        : arr
+    const valueRes = this.array2value(arr);
+      
+    const rendererEvent = await dispatchEvent(
+      'change',
+      createObject(data, {
+        value: valueRes
+      })
     );
+    
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
+    onChange(valueRes);
   }
 
   reload() {

package/src/renderers/Form/Checkbox.tsx

@@ -3,6 +3,8 @@ import {FormItem, FormControlProps, FormBaseControl} from './Item';
 import cx from 'classnames';
 import Checkbox from '../../components/Checkbox';
 import {withBadge, BadgeSchema} from '../../components/Badge';
+import {autobind, createObject} from '../../utils/helper';
+import {Action} from '../../types';
 
 /**
  * Checkbox 勾选框。
@@ -50,6 +52,33 @@ export default class CheckboxControl extends React.Component<
     trueValue: true,
     falseValue: false
   };
+
+  doAction(action: Action, data: object, throwErrors: boolean) {
+    const {resetValue, onChange} = this.props;
+    const actionType = action?.actionType as string;
+
+    if (!!~['clear', 'reset'].indexOf(actionType)) {
+      onChange(resetValue ?? '');
+    }
+  }
+
+  @autobind
+  async dispatchChangeEvent(eventData: any = {}) {
+    const {dispatchEvent, data, onChange} = this.props;
+    const rendererEvent = await dispatchEvent(
+      'change',
+      createObject(data, {
+        value: eventData,
+      })
+    );
+    
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
+    onChange && onChange(eventData);
+  }
+
   render() {
     const {
       className,
@@ -71,7 +100,7 @@ export default class CheckboxControl extends React.Component<
           trueValue={trueValue}
           falseValue={falseValue}
           disabled={disabled}
-          onChange={(value: any) => onChange(value)}
+          onChange={(value: any) => this.dispatchChangeEvent(value)}
         >
           {option ? render('option', option) : null}
         </Checkbox>