amis 1.7.0 → 1.8.0-beta.13

package/src/components/TooltipWrapper.tsx

@@ -11,21 +11,82 @@ 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;
+  /**
+   * 是否可以移入浮层中, 默认true
+   */
+  enterable?: boolean;
+  /**
+   * 是否展示浮层指向箭头
+   */
+  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;
@@ -33,6 +94,7 @@ export interface TooltipWrapperProps {
   delay: number;
   theme?: string;
   tooltipClassName?: string;
+  style?: React.CSSProperties;
 }
 
 interface TooltipWrapperState {
@@ -105,18 +167,42 @@ export class TooltipWrapper extends React.Component<
     return child && (child as any).props;
   }
 
+  tooltipMouseEnter = (e: MouseEvent) => {
+    const tooltip = this.props.tooltip;
+    const enterable = (tooltip as any)?.enterable ?? true;
+    enterable && clearTimeout(this.timer);
+  };
+
+  tooltipMouseLeave = (e: MouseEvent) => {
+    const tooltip = this.props.tooltip;
+    const enterable = (tooltip as any)?.enterable ?? true;
+    enterable && clearTimeout(this.timer);
+    this.hide();
+  };
+
   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) {
@@ -160,21 +246,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
-    } = this.props;
-
-    const child = React.Children.only(children);
-
-    if (!tooltip) {
-      return child;
-    }
+      tooltipClassName,
+      style,
+      disabled = false,
+      offset,
+      tooltipTheme = 'light',
+      showArrow = true,
+      children
+    } = tooltipObj;
 
     const childProps: any = {
       key: 'target'
@@ -202,30 +309,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.tooltipMouseEnter : () => {}
+          }
+          onMouseLeave={
+            ~triggers.indexOf('hover') ? this.tooltipMouseLeave : () => {}
+          }
         >
-          {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/Calendar.tsx

@@ -161,19 +161,6 @@ class BaseDatePicker extends React.Component<
       updatedState = this.getStateFromProps(props);
     }
 
-    if (updatedState.open === undefined) {
-      if (typeof props.open !== 'undefined') {
-        updatedState.open = props.open;
-      } else if (
-        prevProps.closeOnSelect &&
-        this.state.currentView !== viewModes.TIME
-      ) {
-        updatedState.open = false;
-      } else {
-        updatedState.open = this.state.open;
-      }
-    }
-
     if (props.viewMode !== prevProps.viewMode) {
       updatedState.currentView = props.viewMode;
     }
@@ -236,6 +223,10 @@ class BaseDatePicker extends React.Component<
       updatedState.viewDate = moment(props.viewDate);
     }
 
+    if (Object.keys(updatedState).length) {
+      this.setState(updatedState);
+    }
+
     this.checkTZ(props);
   }
 

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/calendar/YearsView.tsx

@@ -75,10 +75,6 @@ export class CustomYearsView extends React.Component<CustomYearsViewProps> {
         .clone()
         .set({year: year, month: irrelevantMonth, date: irrelevantDate});
 
-      // Not sure what 'rdtOld' is for, commenting out for now as it's not working properly
-      // if ( i === -1 | i === 10 )
-      // classes += ' rdtOld';
-
       noOfDaysInYear = parseInt(currentYear.endOf('year').format('DDD'), 10);
       daysInYear = Array.from({length: noOfDaysInYear}, function (e, i) {
         return i + 1;
@@ -95,6 +91,9 @@ export class CustomYearsView extends React.Component<CustomYearsViewProps> {
 
       if (selectedDate && selectedDate.year() === year) classes += ' rdtActive';
 
+      // 第一个和最后一个置灰
+      if (i === -1 || i === 10) classes += ' text-muted';
+
       props = {
         'key': year,
         'data-value': year,

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