amis 1.8.0-beta.5 → 1.8.0-beta.9

package/src/components/Tooltip.tsx

@@ -18,18 +18,23 @@ interface TooltipProps extends React.HTMLProps<HTMLDivElement> {
   style?: any;
   arrowProps?: any;
   placement?: string;
+  showArrow?: boolean;
+  tooltipTheme?: string;
   [propName: string]: any;
 }
 
 export class Tooltip extends React.Component<TooltipProps> {
   static defaultProps = {
-    className: ''
+    className: '',
+    tooltipTheme: 'light',
+    showArrow: true
   };
 
   render() {
     const {
       classPrefix: ns,
       className,
+      tooltipTheme,
       title,
       children,
       arrowProps,
@@ -41,6 +46,7 @@ export class Tooltip extends React.Component<TooltipProps> {
       positionTop,
       classnames: cx,
       activePlacement,
+      showArrow,
       onMouseEnter,
       onMouseLeave,
       ...rest
@@ -52,14 +58,17 @@ export class Tooltip extends React.Component<TooltipProps> {
         className={cx(
           `Tooltip`,
           activePlacement ? `Tooltip--${activePlacement}` : '',
-          className
+          className,
+          `Tooltip--${tooltipTheme === 'dark' ? 'dark' : 'light'}`
         )}
         style={style}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         role="tooltip"
       >
-        <div className={cx(`Tooltip-arrow`)} {...arrowProps} />
+        {showArrow ? (
+          <div className={cx(`Tooltip-arrow`)} {...arrowProps} />
+        ) : null}
         {title ? <div className={cx('Tooltip-title')}>{title}</div> : null}
         <div className={cx('Tooltip-body')}>{children}</div>
       </div>

package/src/components/TooltipWrapper.tsx

@@ -11,21 +11,78 @@ import {findDOMNode} from 'react-dom';
 import Tooltip from './Tooltip';
 import {ClassNamesFn, themeable} from '../theme';
 import Overlay from './Overlay';
+import {isObject} from '../utils/helper';
+
+export type Trigger = 'hover' | 'click' | 'focus';
 
 export interface TooltipObject {
+  /**
+   * 文字提示标题
+   */
   title?: string;
+  /**
+   * 文字提示内容
+   */
   content?: string;
-  render?: () => JSX.Element;
-  dom?: JSX.Element;
+  /**
+   * 浮层出现位置
+   */
+  placement?: 'top' | 'right' | 'bottom' | 'left';
+  /**
+   * 主题样式
+   */
+  tooltipTheme?: 'light' | 'dark';
+  /**
+   * 浮层位置相对偏移量
+   */
+  offset?: [number, number];
+  /**
+   * 内容区自定义样式
+   */
+  style?: React.CSSProperties;
+  /**
+   * 是否展示浮层指向箭头
+   */
+  showArrow?: boolean;
+  /**
+   * 是否禁用提示
+   */
+  disabled?: boolean;
+  /**
+   * 浮层延迟显示时间, 单位 ms
+   */
+  mouseEnterDelay?: number;
+  /**
+   * 浮层延迟隐藏时间, 单位 ms
+   */
+  mouseLeaveDelay?: number;
+  /**
+   * 浮层内容可通过JSX渲染
+   */
+  children?: () => JSX.Element | JSX.Element;
+  /**
+   * 挂载容器元素
+   */
+  container?: React.ReactNode;
+  /**
+   * 浮层触发方式
+   */
+  trigger?: Trigger | Array<Trigger>;
+  /**
+   * 是否点击非内容区域关闭提示，默认为true
+   */
+  rootClose?: boolean;
+  /**
+   * 文字提示浮层CSS类名
+   */
+  tooltipClassName?: string;
 }
 
-export type Trigger = 'hover' | 'click' | 'focus';
-
 export interface TooltipWrapperProps {
+  tooltip?: string | TooltipObject;
   classPrefix: string;
   classnames: ClassNamesFn;
   placement: 'top' | 'right' | 'bottom' | 'left';
-  tooltip?: string | TooltipObject;
   container?: React.ReactNode;
   trigger: Trigger | Array<Trigger>;
   rootClose: boolean;
@@ -109,15 +166,26 @@ export class TooltipWrapper extends React.Component<
   handleShow() {
     this.timer && clearTimeout(this.timer);
     waitToHide && waitToHide();
-    this.show();
+    const tooltip = this.props.tooltip;
+    if (isObject(tooltip)) {
+      const {mouseEnterDelay = 0} = tooltip as TooltipObject;
+      this.timer = setTimeout(this.show, mouseEnterDelay);
+    } else {
+      this.timer = setTimeout(this.show, 0);
+    }
   }
 
   handleHide() {
     clearTimeout(this.timer);
-    const {delay} = this.props;
+    const {delay, tooltip} = this.props;
 
     waitToHide = this.hide.bind(this);
-    this.timer = setTimeout(this.hide, delay);
+    if (isObject(tooltip)) {
+      const {mouseLeaveDelay = 300} = tooltip as TooltipObject;
+      this.timer = setTimeout(this.hide, mouseLeaveDelay);
+    } else {
+      this.timer = setTimeout(this.hide, delay);
+    }
   }
 
   handleFocus(e: any) {
@@ -161,22 +229,42 @@ export class TooltipWrapper extends React.Component<
   }
 
   render() {
+    const props = this.props;
+
+    const child = React.Children.only(props.children);
+    if (!props.tooltip) {
+      return child;
+    }
+
+    // tooltip 对象内属性优先级更高
+    const tooltipObj: TooltipObject = {
+      placement: props.placement,
+      container: props.container,
+      trigger: props.trigger,
+      rootClose: props.rootClose,
+      tooltipClassName: props.tooltipClassName,
+      style: props.style,
+      mouseLeaveDelay: props.delay,
+      ...(typeof props.tooltip === 'string'
+        ? {content: props.tooltip}
+        : props.tooltip)
+    };
+
     const {
-      tooltip,
-      children,
+      title,
+      content,
       placement,
       container,
       trigger,
       rootClose,
       tooltipClassName,
-      style
-    } = this.props;
-
-    const child = React.Children.only(children);
-
-    if (!tooltip) {
-      return child;
-    }
+      style,
+      disabled = false,
+      offset,
+      tooltipTheme = 'light',
+      showArrow = true,
+      children
+    } = tooltipObj;
 
     const childProps: any = {
       key: 'target'
@@ -204,31 +292,30 @@ export class TooltipWrapper extends React.Component<
       <Overlay
         key="overlay"
         target={this.getTarget}
-        show={this.state.show}
+        show={this.state.show && !disabled}
         onHide={this.handleHide}
         rootClose={rootClose}
         placement={placement}
         container={container}
+        offset={Array.isArray(offset) ? offset : [0, 0]}
       >
         <Tooltip
-          title={typeof tooltip !== 'string' ? tooltip.title : undefined}
+          title={typeof title === 'string' ? title : undefined}
           style={style}
           className={tooltipClassName}
-          onMouseEnter={~triggers.indexOf('hover') && this.handleMouseOver}
-          onMouseLeave={~triggers.indexOf('hover') && this.handleMouseOut}
+          tooltipTheme={tooltipTheme}
+          showArrow={showArrow}
+          onMouseEnter={
+            ~triggers.indexOf('hover') ? this.handleMouseOver : () => {}
+          }
+          onMouseLeave={
+            ~triggers.indexOf('hover') ? this.handleMouseOut : () => {}
+          }
         >
-          {tooltip && (tooltip as TooltipObject).render ? (
-            this.state.show ? (
-              (tooltip as TooltipObject).render!()
-            ) : null
-          ) : tooltip && (tooltip as TooltipObject).dom ? (
-            (tooltip as TooltipObject).dom!
+          {children ? (
+            <>{typeof children === 'function' ? children() : children}</>
           ) : (
-            <Html
-              html={
-                typeof tooltip === 'string' ? tooltip : tooltip.content || ''
-              }
-            />
+            <Html html={typeof content === 'string' ? content : ''} />
           )}
         </Tooltip>
       </Overlay>

package/src/components/Tree.tsx

@@ -41,6 +41,8 @@ export interface IDropInfo {
 interface TreeSelectorProps extends ThemeProps, LocaleProps {
   highlightTxt?: string;
 
+  onRef: any;
+
   showIcon?: boolean;
   // 是否默认都展开
   initiallyOpen?: boolean;
@@ -55,6 +57,8 @@ interface TreeSelectorProps extends ThemeProps, LocaleProps {
   withChildren?: boolean;
   // 多选时，选中父节点时，是否只将起子节点加入到值中。
   onlyChildren?: boolean;
+  // 单选时，只运行选择子节点
+  onlyLeaf?: boolean;
   // 名称、取值等字段名映射
   labelField: string;
   valueField: string;
@@ -206,6 +210,7 @@ export class TreeSelector extends React.Component<
 
   componentDidMount() {
     const {enableNodePath} = this.props;
+    this.props.onRef(this)
     enableNodePath && this.expandLazyLoadNodes();
   }
 
@@ -246,20 +251,23 @@ export class TreeSelector extends React.Component<
     onExpandTree?.(nodePathArr);
   }
 
-  syncUnFolded(props: TreeSelectorProps) {
+  syncUnFolded(props: TreeSelectorProps, unfoldedLevel?: Number) {
+    // 传入默认展开层级需要重新初始化unfolded
+    let initFoldedLevel = typeof unfoldedLevel !== 'undefined';
+    let expandLevel = initFoldedLevel ? unfoldedLevel : props.unfoldedLevel;
     // 初始化树节点的展开状态
     let unfolded = this.unfolded;
     const {foldedField, unfoldedField} = this.props;
 
     eachTree(props.options, (node: Option, index, level) => {
-      if (unfolded.has(node)) {
+      if (unfolded.has(node) && !initFoldedLevel) {
         return;
       }
 
       if (node.children && node.children.length) {
         let ret: any = true;
 
-        if (node.defer && node.loaded) {
+        if (node.defer && node.loaded && !initFoldedLevel) {
           ret = true;
         } else if (
           unfoldedField &&
@@ -270,7 +278,7 @@ export class TreeSelector extends React.Component<
           ret = !node[foldedField];
         } else {
           ret = !!props.initiallyOpen;
-          if (!ret && level <= (props.unfoldedLevel as number)) {
+          if (!ret && level <= (expandLevel as number)) {
             ret = true;
           }
         }
@@ -278,6 +286,8 @@ export class TreeSelector extends React.Component<
       }
     });
 
+    initFoldedLevel && this.forceUpdate();
+
     return unfolded;
   }
 
@@ -365,13 +375,17 @@ export class TreeSelector extends React.Component<
 
   @autobind
   handleSelect(node: any, value?: any) {
-    const {joinValues, valueField, onChange, enableNodePath} = this.props;
+    const {joinValues, valueField, onChange, enableNodePath, onlyLeaf} =
+      this.props;
 
     if (node[valueField as string] === undefined) {
       if (node.defer && !node.loaded) {
         this.toggleUnfolded(node);
       }
+      return;
+    }
 
+    if (onlyLeaf && node.children) {
       return;
     }
 

package/src/components/calendar/TimeView.tsx

@@ -1,5 +1,6 @@
 import moment from 'moment';
 import React from 'react';
+import merge from 'lodash/merge';
 import {LocaleProps, localeable} from '../../locale';
 import {Icon} from '../icons';
 import {ClassNamesFn} from '../../theme';
@@ -30,6 +31,7 @@ interface CustomTimeViewProps extends LocaleProps {
   useMobileUI: boolean;
   showToolbar?: boolean;
   onChange?: (value: any) => void;
+  timeConstraints?: any;
 }
 
 interface CustomTimeViewState {
@@ -85,6 +87,13 @@ export class CustomTimeView extends React.Component<
   constructor(props: any) {
     super(props);
     this.state = this.calculateState(this.props);
+
+    if (this.props.timeConstraints) {
+      this.timeConstraints = merge(
+        this.timeConstraints,
+        this.props.timeConstraints
+      );
+    }
   }
 
   componentDidUpdate(preProps: CustomTimeViewProps) {
@@ -173,6 +182,9 @@ export class CustomTimeView extends React.Component<
       value =
         this.timeConstraints[type].min +
         (value - (this.timeConstraints[type].max + 1));
+    if (value < this.timeConstraints[type].min) {
+      value = this.timeConstraints[type].min;
+    }
     return this.pad(type, value);
   }
 

package/src/components/condition-builder/Expression.tsx

@@ -45,6 +45,7 @@ export interface ExpressionProps extends ThemeProps {
   searchable?: boolean;
   fieldClassName?: string;
   formula?: FormulaPickerProps;
+  popOverContainer?: any;
 }
 
 const fieldMap = {
@@ -135,7 +136,8 @@ export class Expression extends React.Component<ExpressionProps> {
       data,
       disabled,
       searchable,
-      formula
+      formula,
+      popOverContainer
     } = this.props;
     const inputType =
       ((value as any)?.type === 'field'
@@ -166,6 +168,7 @@ export class Expression extends React.Component<ExpressionProps> {
             data={data}
             disabled={disabled}
             formula={formula}
+            popOverContainer={popOverContainer}
           />
         ) : null}
 
@@ -176,6 +179,7 @@ export class Expression extends React.Component<ExpressionProps> {
             fieldClassName={fieldClassName}
             disabled={disabled}
             searchable={searchable}
+            popOverContainer={popOverContainer}
             options={
               valueField
                 ? filterTree(
@@ -214,6 +218,7 @@ export class Expression extends React.Component<ExpressionProps> {
           <InputSwitch
             disabled={disabled}
             value={inputType}
+            popOverContainer={popOverContainer}
             onChange={this.handleInputTypeChange}
             options={types.map(item => ({
               label: fieldMap[item],

package/src/components/condition-builder/Field.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {findDOMNode} from 'react-dom';
 import PopOverContainer from '../PopOverContainer';
 import ListSelection from '../GroupedSelection';
 import ResultBox from '../ResultBox';
@@ -15,6 +16,7 @@ export interface ConditionFieldProps extends ThemeProps, LocaleProps {
   disabled?: boolean;
   fieldClassName?: string;
   searchable?: boolean;
+  popOverContainer?: any;
 }
 
 export interface ConditionFieldState {
@@ -86,11 +88,13 @@ export class ConditionField extends React.Component<
       fieldClassName,
       disabled,
       translate: __,
-      searchable
+      searchable,
+      popOverContainer
     } = this.props;
 
     return (
       <PopOverContainer
+        popOverContainer={popOverContainer || (() => findDOMNode(this))}
         popOverRender={({onClose}) => (
           <>
             {searchable ? (

package/src/components/condition-builder/Group.tsx

@@ -26,6 +26,7 @@ export interface ConditionGroupProps extends ThemeProps, LocaleProps {
   onDragStart?: (e: React.MouseEvent) => void;
   fieldClassName?: string;
   formula?: FormulaPickerProps;
+  popOverContainer?: any;
 }
 
 export class ConditionGroup extends React.Component<ConditionGroupProps> {
@@ -134,7 +135,8 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
       disabled,
       searchable,
       translate: __,
-      formula
+      formula,
+      popOverContainer
     } = this.props;
     return (
       <div className={cx('CBGroup')} data-group-id={value?.id}>
@@ -222,6 +224,7 @@ export class ConditionGroup extends React.Component<ConditionGroupProps> {
                 searchable={searchable}
                 builderMode={builderMode}
                 formula={formula}
+                popOverContainer={popOverContainer}
               />
             ))
           ) : (

package/src/components/condition-builder/GroupOrItem.tsx

@@ -25,6 +25,7 @@ export interface CBGroupOrItemProps extends ThemeProps {
   onRemove?: (index: number) => void;
   fieldClassName?: string;
   formula?: FormulaPickerProps;
+  popOverContainer?: any;
 }
 
 export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
@@ -52,7 +53,8 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
       disabled,
       searchable,
       onDragStart,
-      formula
+      formula,
+      popOverContainer
     } = this.props;
 
     return (
@@ -101,6 +103,7 @@ export class CBGroupOrItem extends React.Component<CBGroupOrItemProps> {
                 funcs={funcs}
                 data={data}
                 formula={formula}
+                popOverContainer={popOverContainer}
               />
               <a className={cx('CBDelete')} onClick={this.handleItemRemove}>
                 <Icon icon="close" className="icon" />

package/src/components/condition-builder/InputSwitch.tsx

@@ -7,6 +7,7 @@ import {ClassNamesFn, themeable, ThemeProps} from '../../theme';
 export interface InputSwitchProps extends ThemeProps {
   options: Array<any>;
   disabled?: boolean;
+  popOverContainer?: any;
   value: any;
   onChange: (value: any) => void;
 }
@@ -18,10 +19,12 @@ export function InputSwitch({
   value,
   onChange,
   classnames: cx,
-  disabled
+  disabled,
+  popOverContainer
 }: InputSwitchProps) {
   return (
     <PopOverContainer
+      popOverContainer={popOverContainer}
       popOverRender={({onClose}) => (
         <GroupedSelection
           onClick={onClose}

package/src/components/condition-builder/Item.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import {findDOMNode} from 'react-dom';
 import {
   Fields,
   ConditionRule,
@@ -37,6 +38,7 @@ export interface ConditionItemProps extends ThemeProps, LocaleProps {
   onChange: (value: ConditionRule, index?: number) => void;
   fieldClassName?: string;
   formula?: FormulaPickerProps;
+  popOverContainer?: any;
 }
 
 export class ConditionItem extends React.Component<ConditionItemProps> {
@@ -102,8 +104,16 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
   }
 
   renderLeft() {
-    const {value, fields, funcs, config, disabled, fieldClassName, searchable} =
-      this.props;
+    const {
+      value,
+      fields,
+      funcs,
+      config,
+      disabled,
+      fieldClassName,
+      searchable,
+      popOverContainer
+    } = this.props;
     return (
       <Expression
         config={config}
@@ -114,6 +124,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
         fields={fields}
         disabled={disabled}
         searchable={searchable}
+        popOverContainer={popOverContainer}
         allowedTypes={
           ['field', 'func'].filter(
             type => type === 'field' || type === 'func'
@@ -124,7 +135,15 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
   }
 
   renderOperator() {
-    const {funcs, config, fields, value, classnames: cx, disabled} = this.props;
+    const {
+      funcs,
+      config,
+      fields,
+      value,
+      classnames: cx,
+      disabled,
+      popOverContainer
+    } = this.props;
     const left = value?.left;
     let operators: Array<string> = [];
 
@@ -152,6 +171,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
       const __ = this.props.translate;
       return (
         <PopOverContainer
+          popOverContainer={popOverContainer || (() => findDOMNode(this))}
           popOverRender={({onClose}) => (
             <GroupedSelection
               onClick={onClose}
@@ -242,7 +262,8 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
       config,
       classnames: cx,
       disabled,
-      formula
+      formula,
+      popOverContainer
     } = this.props;
     let field = {
       ...config.types[type],
@@ -282,6 +303,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
             }
             disabled={disabled}
             formula={formula}
+            popOverContainer={popOverContainer}
           />
 
           <span className={cx('CBSeprator')}>~</span>
@@ -300,6 +322,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
             }
             disabled={disabled}
             formula={formula}
+            popOverContainer={popOverContainer}
           />
         </>
       );
@@ -321,6 +344,7 @@ export class ConditionItem extends React.Component<ConditionItemProps> {
         }
         disabled={disabled}
         formula={formula}
+        popOverContainer={popOverContainer}
       />
     );
   }

package/src/components/condition-builder/Value.tsx

@@ -17,6 +17,7 @@ export interface ValueProps extends ThemeProps, LocaleProps {
   op?: OperatorType;
   disabled?: boolean;
   formula?: FormulaPickerProps;
+  popOverContainer?: any;
 }
 
 export class Value extends React.Component<ValueProps> {
@@ -30,7 +31,8 @@ export class Value extends React.Component<ValueProps> {
       translate: __,
       data,
       disabled,
-      formula
+      formula,
+      popOverContainer
     } = this.props;
     let input: JSX.Element | undefined = undefined;
     if (formula) {
@@ -76,6 +78,7 @@ export class Value extends React.Component<ValueProps> {
           onChange={onChange}
           timeFormat=""
           disabled={disabled}
+          popOverContainer={popOverContainer}
         />
       );
     } else if (field.type === 'time') {
@@ -90,6 +93,7 @@ export class Value extends React.Component<ValueProps> {
           dateFormat=""
           timeFormat={field.format || 'HH:mm'}
           disabled={disabled}
+          popOverContainer={popOverContainer}
         />
       );
     } else if (field.type === 'datetime') {
@@ -102,6 +106,7 @@ export class Value extends React.Component<ValueProps> {
           onChange={onChange}
           timeFormat={field.timeFormat || 'HH:mm'}
           disabled={disabled}
+          popOverContainer={popOverContainer}
         />
       );
     } else if (field.type === 'select') {
@@ -119,6 +124,7 @@ export class Value extends React.Component<ValueProps> {
           onChange={onChange}
           multiple={op === 'select_any_in' || op === 'select_not_any_in'}
           disabled={disabled}
+          popOverContainer={popOverContainer}
         />
       );
     } else if (field.type === 'boolean') {