amis 1.7.0 → 1.8.0-beta.0

package/src/Schema.ts

@@ -52,6 +52,7 @@ import {DialogSchema, DialogSchemaBase} from './renderers/Dialog';
 import {DrawerSchema} from './renderers/Drawer';
 import {SearchBoxSchema} from './renderers/SearchBox';
 import {SparkLineSchema} from './renderers/SparkLine';
+import {TooltipWrapperSchema} from './renderers/TooltipWrapper';
 import {PaginationWrapperSchema} from './renderers/PaginationWrapper';
 import {PaginationSchema} from './renderers/Pagination';
 import {AnchorNavSchema} from './renderers/AnchorNav';
@@ -331,7 +332,8 @@ export type SchemaType =
   | 'native-date'
   | 'native-time'
   | 'native-number'
-  | 'code';
+  | 'code'
+  | 'tooltip-wrapper';
 
 export type SchemaObject =
   | PageSchema
@@ -389,6 +391,7 @@ export type SchemaObject =
   | VideoSchema
   | WizardSchema
   | WrapperSchema
+  | TooltipWrapperSchema
   | FormSchema
   | AnchorNavSchema
   | StepsSchema
@@ -882,4 +885,4 @@ export interface ToastSchemaBase extends BaseSchema {
    * 持续时间
    */
   timeout: number;
-};
+}

package/src/components/Alert2.tsx

@@ -5,7 +5,8 @@
 
 import React from 'react';
 import {ClassNamesFn, themeable} from '../theme';
-import {Icon} from './icons';
+import {generateIcon} from '../utils/icon';
+import {Icon, getIcon} from './icons';
 
 export interface AlertProps {
   level: 'danger' | 'info' | 'success' | 'warning';
@@ -73,16 +74,21 @@ export class Alert extends React.Component<AlertProps, AlertState> {
       closeButtonClassName
     } = this.props;
 
+    // 优先使用内置svg，其次使用icon库
     const iconNode = icon ? (
       typeof icon === 'string' ? (
-        <Icon icon={icon} className={cx(`Alert-icon icon`)} />
+        getIcon(icon) ? (
+          <Icon icon={icon} className={cx(`icon`)} />
+        ) : (
+          generateIcon(cx, icon, 'icon')
+        )
       ) : React.isValidElement(icon) ? (
         React.cloneElement(icon, {
           className: cx(`Alert-icon`, icon.props?.className)
         })
       ) : null
     ) : showIcon ? (
-      <Icon icon={`alert-${level}`} className={cx(`Alert-icon icon`)} />
+      <Icon icon={`alert-${level}`} className={cx(`icon`)} />
     ) : null;
 
     return this.state.show ? (

package/src/components/CityArea.tsx

@@ -145,8 +145,11 @@ const CityArea = memo<AreaProps>(props => {
     } else {
       onChange({
         code,
+        provinceCode: province,
         province: db[province],
+        cityCode: city,
         city: db[city],
+        districtCode: district,
         district: db[district],
         street
       });

package/src/components/Tabs.tsx

@@ -16,6 +16,7 @@ import {Icon} from './icons';
 import debounce from 'lodash/debounce';
 import {findDOMNode} from 'react-dom';
 import TooltipWrapper, {TooltipObject, Trigger} from './TooltipWrapper';
+import {resizeSensor} from '../utils/resize-sensor';
 
 import Sortable from 'sortablejs';
 
@@ -26,7 +27,7 @@ const transitionStyles: {
   [ENTERED]: 'in'
 };
 
-export type TabsMode = '' | 'line' | 'card' | 'radio' | 'vertical' | 'chrome' | 'simple' | 'strong';
+export type TabsMode = '' | 'line' | 'card' | 'radio' | 'vertical' | 'chrome' | 'simple' | 'strong' | 'tiled' |'sidebar';
 
 export interface TabProps extends ThemeProps {
   title?: string | React.ReactNode; // 标题
@@ -114,6 +115,8 @@ export interface TabsProps extends ThemeProps {
   scrollable?: boolean; // 属性废弃，为了兼容暂且保留
   editable?: boolean;
   onEdit?: (index: number, text: string) => void;
+  sidePosition?: 'left' | 'right';
+  addBtnText?: string;
 }
 
 export interface IDragInfo {
@@ -122,21 +125,25 @@ export interface IDragInfo {
 
 export class Tabs extends React.Component<TabsProps, any> {
   static defaultProps: Pick<TabsProps,
-    'mode' | 'contentClassName' | 'showTip' | 'showTipClassName'
+    'mode' | 'contentClassName' | 'showTip' | 'showTipClassName' | 'sidePosition' | 'addBtnText'
   > = {
     mode: '',
     contentClassName: '',
     showTip: false,
-    showTipClassName: ''
+    showTipClassName: '',
+    sidePosition: 'left',
+    addBtnText: '增加'
   };
 
   static Tab = Tab;
-  navMain = React.createRef<HTMLDivElement>();
+  navMain = React.createRef<HTMLUListElement>(); // HTMLDivElement
   scroll: boolean = false;
   sortable?: Sortable;
   dragTip?: HTMLElement;
   id: string = guid();
   draging: boolean = false;
+  toDispose: Array<() => void> = [];
+  resizeDom = React.createRef<HTMLDivElement>();
 
   checkArrowStatus = debounce(
     () => {
@@ -200,6 +207,12 @@ export class Tabs extends React.Component<TabsProps, any> {
       });
       this.checkArrowStatus();
     }
+
+    this.resizeDom?.current && this.toDispose.push(
+      resizeSensor(this.resizeDom.current as HTMLElement, () =>
+        this.computedWidth()
+      )
+    );
   }
 
   componentDidUpdate() {
@@ -212,6 +225,8 @@ export class Tabs extends React.Component<TabsProps, any> {
 
   componentWillUnmount() {
     this.checkArrowStatus.cancel();
+    this.toDispose.forEach(fn => fn());
+    this.toDispose = [];
   }
 
   /**
@@ -220,7 +235,7 @@ export class Tabs extends React.Component<TabsProps, any> {
   computedWidth() {
     const {mode: dMode, tabsMode} = this.props;
     const mode = tabsMode || dMode;
-    if (mode === 'vertical') {
+    if (['vertical', 'sidebar'].includes(mode)) {
       return;
     }
   
@@ -246,7 +261,7 @@ export class Tabs extends React.Component<TabsProps, any> {
     const {mode: dMode, tabsMode} = this.props;
     const {isOverflow} = this.state;
     const mode = tabsMode || dMode;
-    if (mode === 'vertical' || !isOverflow) {
+    if (['vertical', 'sidebar'].includes(mode) || !isOverflow) {
       return;
     }
     const {activeKey, children} = this.props;
@@ -254,7 +269,7 @@ export class Tabs extends React.Component<TabsProps, any> {
     const currentIndex = (children as any[])?.findIndex(
       (item: any) => item.props.eventKey === currentKey
     );
-    const li = this.navMain.current?.children[0]?.children || [];
+    const li = this.navMain.current?.children || [];
     const currentLi = li[currentIndex] as HTMLElement;
     const liOffsetLeft = currentLi?.offsetLeft;
     const liClientWidth = currentLi?.clientWidth;
@@ -569,7 +584,7 @@ export class Tabs extends React.Component<TabsProps, any> {
   renderArrow(type: 'left' | 'right') {
     const {mode: dMode, tabsMode} = this.props;
     const mode = tabsMode || dMode;
-    if (mode === 'vertical') {
+    if (['vertical', 'sidebar'].includes(mode)) {
       return;
     }
     const {classnames: cx} = this.props;
@@ -607,7 +622,9 @@ export class Tabs extends React.Component<TabsProps, any> {
       toolbar,
       linksClassName,
       addable,
-      draggable
+      draggable,
+      sidePosition,
+      addBtnText
     } = this.props;
 
     const {isOverflow} = this.state;
@@ -617,19 +634,35 @@ export class Tabs extends React.Component<TabsProps, any> {
 
     const mode = tabsMode || dMode;
 
+    const toolButtons = (
+      <>
+        {addable && (
+          <div className={cx('Tabs-addable')} onClick={() => this.handleAddBtn()}>
+            <Icon icon="plus" className={cx('Tabs-addable-icon')} />
+            {addBtnText}
+          </div>
+        )}
+        {toolbar}
+      </>
+    );
+
     return (
       <div
         className={cx(
           `Tabs`,
           {
-            [`Tabs--${mode}`]: mode
+            [`Tabs--${mode}`]: mode,
+            [`sidebar--${sidePosition}`]: mode === 'sidebar'
           },
           className
         )}
       >
         {
-        !['vertical', 'chrome'].includes(mode) ? (
-          <div className={cx('Tabs-linksContainer-wrapper')}>
+        !['vertical', 'sidebar', 'chrome'].includes(mode) ? (
+          <div
+            className={cx('Tabs-linksContainer-wrapper', toolbar && 'Tabs-linksContainer-wrapper--toolbar')}
+            ref={this.resizeDom}
+          >
             <div
               className={cx(
                 'Tabs-linksContainer',
@@ -637,22 +670,19 @@ export class Tabs extends React.Component<TabsProps, any> {
               )}
             >
               {this.renderArrow('left')}
-              <div className={cx('Tabs-linksContainer-main')} ref={this.navMain}>
-                <ul className={cx('Tabs-links', linksClassName)} role="tablist">
+              <div className={cx('Tabs-linksContainer-main')}>
+                <ul className={cx('Tabs-links', linksClassName)} role="tablist" ref={this.navMain}>
                   {children.map((tab, index) => this.renderNav(tab, index))}
                   {additionBtns}
-                  {toolbar}
+                  {
+                    !isOverflow && toolButtons
+                  }
                 </ul>
               </div>
               {this.renderArrow('right')}
             </div>
             {
-              addable && (
-                <div className={cx('Tabs-addable')} onClick={() => this.handleAddBtn()}>
-                  <Icon icon="plus" className={cx('Tabs-addable-icon')} />
-                  增加
-                </div>
-              )
+              isOverflow && toolButtons
             }
           </div>
         ) : (

package/src/components/TooltipWrapper.tsx

@@ -33,6 +33,7 @@ export interface TooltipWrapperProps {
   delay: number;
   theme?: string;
   tooltipClassName?: string;
+  style?: React.CSSProperties;
 }
 
 interface TooltipWrapperState {
@@ -167,7 +168,8 @@ export class TooltipWrapper extends React.Component<
       container,
       trigger,
       rootClose,
-      tooltipClassName
+      tooltipClassName,
+      style
     } = this.props;
 
     const child = React.Children.only(children);
@@ -210,6 +212,7 @@ export class TooltipWrapper extends React.Component<
       >
         <Tooltip
           title={typeof tooltip !== 'string' ? tooltip.title : undefined}
+          style={style}
           className={tooltipClassName}
           onMouseEnter={~triggers.indexOf('hover') && this.handleMouseOver}
           onMouseLeave={~triggers.indexOf('hover') && this.handleMouseOut}

package/src/components/icons.tsx

@@ -83,6 +83,7 @@ import AlertDanger from '../icons/alert-danger.svg';
 import FunctionIcon from '../icons/function.svg';
 import InputClearIcon from '../icons/input-clear.svg';
 import SliderHandleIcon from '../icons/slider-handle-icon.svg';
+import TrashIcon from '../icons/trash.svg';
 
 // 兼容原来的用法，后续不直接试用。
 
@@ -192,6 +193,7 @@ registerIcon('slider-handle', SliderHandleIcon);
 registerIcon('cloud-upload', CloudUploadIcon);
 registerIcon('image', ImageIcon);
 registerIcon('refresh', RefreshIcon);
+registerIcon('trash', TrashIcon);
 
 export function Icon({
   icon,

package/src/icons/trash.svg

@@ -0,0 +1,8 @@
+<?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">
+    <title>4.图标元件/3.操作/删除</title>
+    <g id="4.图标元件/3.操作/删除" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
+        <path d="M14,3.499 L14,4.5 L12.497,4.5 L12.498,14.5 L3.498,14.5 L3.497,4.5 L2,4.5 L2,3.499 L14,3.499 Z M11.498,4.5 L4.497,4.5 L4.497,13.5 L11.498,13.5 L11.498,4.5 Z M6.998,7.499 L6.998,11.499 L5.998,11.499 L5.998,7.499 L6.998,7.499 Z M9.998,7.499 L9.998,11.499 L8.998,11.499 L8.998,7.499 L9.998,7.499 Z M9.999,1.5 L9.999,2.499 L5.998,2.499 L5.998,1.5 L9.999,1.5 Z" id="形状结合" fill="#151B26"></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/renderers/Action.tsx

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

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import {findDOMNode} from 'react-dom';
+import cloneDeep from 'lodash/cloneDeep';
 import {
   FormItem,
   FormControlProps,
@@ -9,6 +10,7 @@ import {
 import {Schema, Action, Api} from '../../types';
 import {ComboStore, IComboStore} from '../../store/combo';
 import {default as CTabs, Tab} from '../../components/Tabs';
+import Button from '../../components/Button';
 
 import {
   guid,
@@ -255,6 +257,8 @@ export interface ComboControlSchema extends FormBaseControl {
   };
 }
 
+export type ComboRendererEvent = 'add' | 'delete' | 'tabsChange';
+
 function pickVars(vars: any, fields: Array<string>) {
   return fields.reduce((data: any, key: string) => {
     data[key] = resolveVariable(key, vars);
@@ -291,6 +295,8 @@ export default class ComboControl extends React.Component<ComboProps> {
     | 'tabsMode'
     | 'tabsStyle'
     | 'placeholder'
+    | 'itemClassName'
+    | 'itemsWrapperClassName'
   > = {
     minLength: 0,
     maxLength: 0,
@@ -307,7 +313,9 @@ export default class ComboControl extends React.Component<ComboProps> {
     deleteIcon: '',
     tabsMode: false,
     tabsStyle: '',
-    placeholder: 'placeholder.empty'
+    placeholder: 'placeholder.empty',
+    itemClassName: '',
+    itemsWrapperClassName: ''
   };
   static propsList: Array<string> = [
     'minLength',
@@ -334,7 +342,9 @@ export default class ComboControl extends React.Component<ComboProps> {
     'items',
     'conditions',
     'messages',
-    'formStore'
+    'formStore',
+    'itemClassName',
+    'itemsWrapperClassName'
   ];
 
   subForms: Array<any> = [];
@@ -469,9 +479,17 @@ export default class ComboControl extends React.Component<ComboProps> {
     this.props.onChange(value, submitOnChange, true);
   }
 
-  addItem() {
-    const {flat, joinValues, delimiter, scaffold, disabled, submitOnChange} =
-      this.props;
+  async addItem() {
+    const {
+      flat,
+      joinValues,
+      delimiter,
+      scaffold,
+      disabled,
+      submitOnChange,
+      data,
+      dispatchEvent
+    } = this.props;
 
     if (disabled) {
       return;
@@ -479,6 +497,18 @@ export default class ComboControl extends React.Component<ComboProps> {
 
     let value = this.getValueAsArray();
 
+    const rendererEvent = await dispatchEvent(
+      'add',
+      createObject(data, {
+        value:
+          flat && joinValues ? value.join(delimiter || ',') : cloneDeep(value)
+      })
+    );
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
     value.push(
       flat
         ? scaffold || ''
@@ -505,7 +535,8 @@ export default class ComboControl extends React.Component<ComboProps> {
       deleteConfirmText,
       data,
       env,
-      translate: __
+      translate: __,
+      dispatchEvent
     } = this.props;
 
     if (disabled) {
@@ -515,6 +546,19 @@ export default class ComboControl extends React.Component<ComboProps> {
     let value = this.getValueAsArray();
     const ctx = createObject(data, value[key]);
 
+    const rendererEvent = await dispatchEvent(
+      'delete',
+      createObject(data, {
+        key,
+        value:
+          flat && joinValues ? value.join(delimiter || ',') : cloneDeep(value)
+      })
+    );
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
     if (isEffectiveApi(deleteApi, ctx)) {
       const confirmed = await env.confirm(
         deleteConfirmText ? filter(deleteConfirmText, ctx) : __('deleteConfirm')
@@ -866,8 +910,19 @@ export default class ComboControl extends React.Component<ComboProps> {
   }
 
   @autobind
-  handleTabSelect(key: number) {
-    const {store} = this.props;
+  async handleTabSelect(key: number) {
+    const {store, data, dispatchEvent} = this.props;
+
+    const rendererEvent = await dispatchEvent(
+      'tabsChange',
+      createObject(data, {
+        key
+      })
+    );
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
 
     store.setActiveKey(key);
   }
@@ -1138,7 +1193,9 @@ export default class ComboControl extends React.Component<ComboProps> {
       lazyLoad,
       changeImmediately,
       placeholder,
-      translate: __
+      translate: __,
+      itemClassName,
+      itemsWrapperClassName
     } = this.props;
 
     let items = this.props.items;
@@ -1165,7 +1222,7 @@ export default class ComboControl extends React.Component<ComboProps> {
             : ''
         )}
       >
-        <div className={cx(`Combo-items`)}>
+        <div className={cx(`Combo-items`, itemsWrapperClassName)}>
           {Array.isArray(value) && value.length ? (
             value.map((value, index, thelist) => {
               let delBtn: any = null;
@@ -1176,21 +1233,20 @@ export default class ComboControl extends React.Component<ComboProps> {
                   evalExpression(itemRemovableOn, value) !== false)
               ) {
                 delBtn = (
-                  <a
-                    onClick={this.removeItem.bind(this, index)}
+                  <Button
                     key="remove"
-                    className={cx(
-                      `Combo-delBtn ${!store.removable ? 'is-disabled' : ''}`
-                    )}
-                    data-tooltip={__('delete')}
-                    data-position="bottom"
+                    className={cx('Combo-delBtn')}
+                    disabled={!store.removable}
+                    tooltip={__('delete')}
+                    tooltipPlacement="bottom"
+                    onClick={this.removeItem.bind(this, index)}
                   >
                     {deleteIcon ? (
                       <i className={deleteIcon} />
                     ) : (
                       <Icon icon="status-close" className="icon" />
                     )}
-                  </a>
+                  </Button>
                 );
               }
 
@@ -1214,7 +1270,7 @@ export default class ComboControl extends React.Component<ComboProps> {
 
               return (
                 <div
-                  className={cx(`Combo-item`)}
+                  className={cx(`Combo-item`, itemClassName)}
                   key={this.keys[index] || (this.keys[index] = guid())}
                 >
                   {!disabled && draggable && thelist.length > 1 ? (
@@ -1315,15 +1371,16 @@ export default class ComboControl extends React.Component<ComboProps> {
                   }
                 )
               ) : (
-                <button
-                  type="button"
+                <Button
+                  level="default"
+                  className={cx(`Combo-addBtn`, addButtonClassName)}
+                  block
+                  tooltip={__('Combo.add')}
                   onClick={this.addItem}
-                  className={cx(`Button Combo-addBtn`, addButtonClassName)}
-                  data-tooltip={__('Combo.add')}
                 >
                   {addIcon ? <Icon icon="plus" className="icon" /> : null}
                   <span>{__(addButtonText || 'Combo.add')}</span>
-                </button>
+                </Button>
               )
             ) : null}
             {draggable ? (
@@ -1352,7 +1409,8 @@ export default class ComboControl extends React.Component<ComboProps> {
       disabled,
       typeSwitchable,
       nullable,
-      translate: __
+      translate: __,
+      itemClassName
     } = this.props;
 
     let items = this.props.items;
@@ -1373,7 +1431,7 @@ export default class ComboControl extends React.Component<ComboProps> {
           disabled ? 'is-disabled' : ''
         )}
       >
-        <div className={cx(`Combo-item`)}>
+        <div className={cx(`Combo-item`, itemClassName)}>
           {condition && typeSwitchable !== false ? (
             <div className={cx('Combo-itemTag')}>
               <label>{__('Combo.type')}</label>

package/src/renderers/Form/InputCity.tsx

@@ -299,7 +299,16 @@ export class CityPicker extends React.Component<
     const {onChange, allowStreet, joinValues, extractValue, delimiter} =
       this.props;
 
-    const {code, province, city, district, street} = this.state;
+    const {
+      code,
+      province,
+      city,
+      district,
+      street,
+      provinceCode,
+      cityCode,
+      districtCode
+    } = this.state;
 
     if (typeof extractValue === 'undefined' ? joinValues : extractValue) {
       code
@@ -312,8 +321,11 @@ export class CityPicker extends React.Component<
     } else {
       onChange({
         code,
+        provinceCode,
         province,
+        cityCode,
         city,
+        districtCode,
         district,
         street
       });

package/src/renderers/Form/InputRange.tsx

@@ -22,12 +22,8 @@ import {Action} from '../../types';
 export type Value = string | MultipleValue | number | [number, number];
 export type FormatValue = MultipleValue | number;
 export type TooltipPosType = 'auto' | 'top' | 'right' | 'bottom' | 'left';
-export type InputTextRendererEvent =
-  | 'change'
-  | 'afterChange'
-  | 'blur'
-  | 'focus';
-export type InputTextRendererAction = 'clear';
+export type InputRangeRendererEvent = 'change' | 'blur' | 'focus';
+export type InputRangeRendererAction = 'clear';
 export interface RangeControlSchema extends FormBaseControl {
   type: 'input-range';