amis 1.6.5-beta.3 → 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/Breadcrumb.tsx

@@ -0,0 +1,294 @@
+/**
+ * @file Breadcrumb 面包屑
+ */
+
+import React from 'react';
+import TooltipWrapper, {Trigger} from './TooltipWrapper';
+import {ClassNamesFn, themeable, ThemeProps} from '../theme';
+import {RootClose} from '../utils/RootClose';
+import {removeHTMLTag} from '../utils/helper';
+import {Icon} from '../components/icons';
+import {generateIcon} from '../utils/icon';
+import {
+  ItemPlace,
+  BreadcrumbBaseItemSchema,
+  BreadcrumbItemSchema,
+  TooltipPositionType,
+  BreadcrumbSchema
+} from '../renderers/Breadcrumb';
+
+interface BreadcrumbItemState {
+  isOpened: boolean;
+  tooltipTrigger: Trigger | Array<Trigger>;
+  tooltipRootClose: boolean;
+}
+
+interface BreadcrumbBaseItemProps
+  extends BreadcrumbBaseItemSchema {}
+
+interface BreadcrumbItemProps {
+  item: BreadcrumbItemSchema;
+  itemPlace: ItemPlace;
+  labelMaxLength?: number; 
+  tooltipContainer?: any;
+  tooltipPosition?: TooltipPositionType;
+  classnames: ClassNamesFn;
+  [propName: string]: any;
+}
+
+interface BreadcrumbProps extends ThemeProps,
+  Omit<BreadcrumbSchema, 'type' | 'className'> {
+  tooltipContainer?: any;
+  tooltipPosition?: TooltipPositionType;
+  [propName: string]: any;
+}
+
+/**
+ * Breadcrumb 面包屑类
+ */
+export class Breadcrumb extends React.Component<BreadcrumbProps> {
+  Item: typeof BreadcrumbItem;
+
+  static defaultProps: Pick<
+    BreadcrumbProps, 
+    | 'separator'
+    | 'labelMaxLength'
+    | 'tooltipPosition'
+  > = {
+    separator: '>',
+    labelMaxLength: 16,
+    tooltipPosition: 'top'
+  };
+
+  render() {
+    const cx = this.props.classnames;
+    const {
+      className,
+      separatorClassName,
+      items,
+      separator,
+      ...restProps
+    } = this.props;
+
+    const crumbsLength = items?.length;
+    if (!crumbsLength) {
+      return <div className={cx('Breadcrumb', className)}></div>;
+    }
+
+    const crumbs = items.map<React.ReactNode>((item, index) => {
+      let itemPlace: ItemPlace = 'middle';
+      if (index === 0) {
+        itemPlace = 'start';
+      }
+      if (index === crumbsLength - 1) {
+        itemPlace = 'end';
+      }
+      return (
+        <BreadcrumbItem
+          {...restProps}
+          item={item}
+          itemPlace={itemPlace}
+          key={index}
+        ></BreadcrumbItem>
+      )
+    })
+    .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>
+    );
+  }
+}
+
+/**
+ * BreadcrumbItem 面包项类
+ */
+export class BreadcrumbItem extends React.Component<BreadcrumbItemProps, BreadcrumbItemState> {
+  target: any;
+
+  state: BreadcrumbItemState = {
+    tooltipTrigger: ['hover', 'focus'],
+    tooltipRootClose: false,
+    isOpened: false
+  };
+
+  domRef = (ref: any) => {
+    this.target = ref;
+  }
+
+  toogle = (e: React.MouseEvent<any>) => {
+    e.preventDefault();
+
+    this.setState({
+      isOpened: !this.state.isOpened
+    });
+  }
+
+  close = () => {
+    this.setState({
+      isOpened: false
+    });
+  }
+
+  /**
+   * 渲染基础面包项
+   * @param showHref 是否显示超链接
+   * @param itemType 基础面包项类型
+   * @param item 面包项
+   * @param label 渲染文本
+   * @returns 
+   */
+  renderBreadcrumbBaseItem(
+    showHref: boolean,
+    itemType: 'default' | 'dropdown',
+    item: BreadcrumbBaseItemProps,
+    label?: string,
+  ) {
+    const {
+      itemClassName,
+      dropdownItemClassName,
+      classnames: cx
+    } = this.props;
+    const baseItemClassName = itemType === 'default' ? itemClassName : dropdownItemClassName;
+    if (showHref) {
+      return (
+        <a href={item.href} className={cx('Breadcrumb-item-' + itemType, baseItemClassName)}>
+          {item.icon
+            ? generateIcon(cx, item.icon, 'Icon', 'Breadcrumb-icon')
+            : null}
+          <span className={cx('TplField')}>{label}</span>
+        </a>
+      );
+    }
+    return (
+      <span className={cx('Breadcrumb-item-' + itemType, baseItemClassName)}>
+        {item.icon
+          ? generateIcon(cx, item.icon, 'Icon', 'Breadcrumb-icon')
+          : null}
+        <span className={cx('TplField')}>{label}</span>
+      </span>
+    );
+  }
+
+  /**
+   * 渲染基础面包项完整节点
+   * @param item 面包项
+   * @param tooltipPosition 浮窗提示位置
+   * @param itemPlace 面包香所在相对位置
+   * @param itemType 基础面包项类型
+   * @returns 
+   */
+  renderBreadcrumbNode(
+    item: BreadcrumbBaseItemProps,
+    tooltipPosition: TooltipPositionType = 'top',
+    itemPlace: ItemPlace,
+    itemType: 'default' | 'dropdown'
+  ) {
+    const {
+      labelMaxLength,
+      tooltipContainer
+    } = this.props;
+    const {
+      tooltipTrigger,
+      tooltipRootClose
+    } = this.state;
+    const pureLabel = item.label ? removeHTMLTag(item.label) : '';
+    // 限制最大展示长度的最小值
+    const maxLength = labelMaxLength && +labelMaxLength > 1 ? +labelMaxLength : 1;
+    // 面包项相对位置为 middle ，且超过最大展示长度的面包项，进行缩略展示，并使用浮窗提示
+    if (pureLabel.length > maxLength && itemPlace === 'middle') {
+      return (
+        <TooltipWrapper
+          tooltip={pureLabel}
+          placement={tooltipPosition}
+          container={tooltipContainer}
+          trigger={tooltipTrigger}
+          rootClose={tooltipRootClose}
+        >
+          {this.renderBreadcrumbBaseItem(true, itemType, item, pureLabel.substring(0, maxLength) + '...')}
+        </TooltipWrapper>
+      );
+    }
+    const showHref = !item.href || itemPlace === 'end';
+    return this.renderBreadcrumbBaseItem(!showHref, itemType, item, pureLabel);
+  }
+
+  /**
+   * 渲染下拉菜单节点
+   * @param dropdown 面包项下拉菜单
+   * @returns 
+   */
+  renderDropdownNode(dropdown: BreadcrumbBaseItemProps[]) {
+    const {
+      dropdownClassName,
+      classnames: cx
+    } = this.props;
+    return (
+      <RootClose
+        disabled={!this.state.isOpened}
+        onRootClose={this.close}
+      >
+        {(ref: any) => {
+          return (
+            <ul
+              className={cx('Breadcrumb-dropdown', dropdownClassName)}
+              onClick={this.close}
+              ref={ref}
+            >
+              {Array.isArray(dropdown) 
+                && dropdown.map((menuItem: BreadcrumbBaseItemProps, index: number) => {
+                return (
+                  <li key={'dropdown-item' + index}>
+                    {this.renderBreadcrumbNode(menuItem, 'right', 'middle', 'dropdown')}
+                  </li>
+                );
+              })}
+            </ul>
+          );
+        }}
+      </RootClose>
+    );
+  }
+
+  render() {
+    const {
+      item,
+      itemPlace,
+      tooltipPosition,
+      classnames: cx
+    } = this.props;
+    const {dropdown, ...restItemProps} = item;
+    return (
+      <span
+        className={cx('Breadcrumb-item',
+          {
+            'is-opened': this.state.isOpened
+          },
+          {
+            'Breadcrumb-item-last': itemPlace === 'end'
+          }
+        )}
+        ref={this.domRef}
+      >
+        {this.renderBreadcrumbNode({...restItemProps}, tooltipPosition, itemPlace, 'default')}
+        {dropdown ? (
+          <span onClick={this.toogle} className={cx('Breadcrumb-item-caret')}>
+            <Icon icon="caret" className="icon" />
+          </span>
+        ): null}
+        {dropdown && this.state.isOpened ? this.renderDropdownNode(dropdown) : null}
+      </span>
+    );
+  }
+}
+
+export default themeable(Breadcrumb);

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

@@ -224,6 +224,9 @@ export class DateRangePicker extends React.Component<
   popover: any;
   input?: HTMLInputElement;
 
+  // 是否是第一次点击，如果是第一次点击就可以点任意地址
+  isFirstClick: boolean = true;
+
   static formatValue(
     newValue: any,
     format: string,
@@ -276,8 +279,7 @@ export class DateRangePicker extends React.Component<
 
     this.open = this.open.bind(this);
     this.close = this.close.bind(this);
-    this.handleStartChange = this.handleStartChange.bind(this);
-    this.handleEndChange = this.handleEndChange.bind(this);
+    this.handleSelectChange = this.handleSelectChange.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
     this.checkStartIsValidDate = this.checkStartIsValidDate.bind(this);
@@ -426,61 +428,47 @@ export class DateRangePicker extends React.Component<
     return value;
   }
 
-  handleStartChange(newValue: moment.Moment) {
+  handleSelectChange(newValue: moment.Moment) {
     const {embed, timeFormat, minDuration, maxDuration, minDate} = this.props;
-    const {startDate, endDate} = this.state;
-
-    if (
-      startDate &&
-      (!endDate || (endDate && newValue.isSame(startDate))) && // 没有结束时间，或者新的时间也是开始时间，这时都会将新值当成结束时间
-      newValue.isSameOrAfter(startDate) &&
-      (!minDuration || newValue.isAfter(startDate.clone().add(minDuration))) &&
-      (!maxDuration || newValue.isBefore(startDate.clone().add(maxDuration)))
-    ) {
-      return this.setState(
-        {
-          endDate: this.filterDate(newValue, endDate, timeFormat, 'end')
-        },
-        () => {
-          embed && this.confirm();
-        }
-      );
-    }
-
-    if (minDate && newValue && newValue.isBefore(minDate, 'second')) {
-      newValue = minDate;
-    }
+    let {startDate, endDate} = this.state;
 
-    this.setState(
-      {
+    // 第一次点击只标记起始时间，或者点击了开始时间前面的时间
+    if (this.isFirstClick || newValue.isBefore(startDate)) {
+      // 这种情况说明第二次点击点击了前面的时间，这时要标记为第二次点击
+      if (newValue.isBefore(startDate)) {
+        this.isFirstClick = true;
+      }
+      if (minDate && newValue.isBefore(minDate)) {
+        newValue = minDate;
+      }
+      this.setState({
         startDate: this.filterDate(
           newValue,
           startDate || minDate,
           timeFormat,
           'start'
-        )
-      },
-      () => {
-        embed && this.confirm();
+        ),
+        endDate: undefined
+      });
+    } else {
+      // 第二次点击作为结束时间
+      if (!startDate) {
+        // 不大可能，但只能作为开始时间了
+        startDate = newValue;
       }
-    );
-  }
 
-  handleEndChange(newValue: moment.Moment) {
-    const {embed, timeFormat, minDuration, maxDuration, maxDate} = this.props;
-    const {startDate, endDate} = this.state;
-
-    if (
-      endDate &&
-      !startDate &&
-      newValue.isSameOrBefore(endDate) &&
-      (!minDuration ||
-        newValue.isBefore(endDate.clone().subtract(minDuration))) &&
-      (!maxDuration || newValue.isAfter(endDate.clone().subtract(maxDuration)))
-    ) {
-      return this.setState(
+      if (minDuration && newValue.isAfter(startDate.clone().add(minDuration))) {
+        newValue = startDate.clone().add(minDuration);
+      }
+      if (
+        maxDuration &&
+        newValue.isBefore(startDate.clone().add(maxDuration))
+      ) {
+        newValue = startDate.clone().add(maxDuration);
+      }
+      this.setState(
         {
-          startDate: this.filterDate(newValue, startDate, timeFormat, 'start')
+          endDate: this.filterDate(newValue, endDate, timeFormat, 'end')
         },
         () => {
           embed && this.confirm();
@@ -488,23 +476,7 @@ export class DateRangePicker extends React.Component<
       );
     }
 
-    if (maxDate && newValue && newValue.isAfter(maxDate, 'second')) {
-      newValue = maxDate;
-    }
-
-    this.setState(
-      {
-        endDate: this.filterDate(
-          newValue,
-          endDate || maxDate,
-          timeFormat,
-          'end'
-        )
-      },
-      () => {
-        embed && this.confirm();
-      }
-    );
+    this.isFirstClick = !this.isFirstClick;
   }
 
   handleMobileChange(data: any, callback?: () => void) {
@@ -600,7 +572,7 @@ export class DateRangePicker extends React.Component<
         ? maxDate.isBefore(endDate)
           ? maxDate
           : endDate
-        : maxDate || endDate;
+        : undefined;
 
     if (minDate && currentDate.isBefore(minDate, precision)) {
       return false;
@@ -634,7 +606,7 @@ export class DateRangePicker extends React.Component<
         ? minDate.isAfter(startDate)
           ? minDate
           : startDate
-        : minDate || startDate;
+        : undefined;
 
     if (minDate && currentDate.isBefore(minDate, precision)) {
       return false;
@@ -712,7 +684,7 @@ export class DateRangePicker extends React.Component<
         <Calendar
           className={`${ns}DateRangePicker-start`}
           value={startDate}
-          onChange={this.handleStartChange}
+          onChange={this.handleSelectChange}
           requiredConfirm={false}
           dateFormat={dateFormat}
           inputFormat={inputFormat}
@@ -729,7 +701,7 @@ export class DateRangePicker extends React.Component<
         <Calendar
           className={`${ns}DateRangePicker-end`}
           value={endDate}
-          onChange={this.handleEndChange}
+          onChange={this.handleSelectChange}
           requiredConfirm={false}
           dateFormat={dateFormat}
           inputFormat={inputFormat}

package/src/components/PopUp.tsx

@@ -113,11 +113,12 @@ export class PopUp extends React.PureComponent<PopUpPorps> {
                   {!showConfirm && showClose ? (
                     <div className={cx(`${ns}PopUp-closeWrap`)}>
                       {header}
-                      <Icon
-                        icon="close"
-                        className={cx('icon', `${ns}PopUp-close`)}
-                        onClick={onHide}
-                      />
+                      <span className={cx(`PopUp-closeBox`)} onClick={onHide}>
+                        <Icon
+                          icon="close"
+                          className={cx('icon', `${ns}PopUp-close`)}
+                        />
+                      </span>
                     </div>
                   ) : null}
                   {showConfirm && (

package/src/components/Range.tsx

@@ -19,13 +19,19 @@ import {
   MultipleValue,
   Value,
   FormatValue,
-  MarksType,
   RangeItemProps
 } from '../renderers/Form/InputRange';
 import {stripNumber} from '../utils/tpl-builtin';
 import {findDOMNode} from 'react-dom';
 import {Icon} from './icons';
 
+type MarksType = {
+  [index: number | string]: Record<
+    number,
+    React.ReactNode | {style?: React.CSSProperties; label?: string}
+  >;
+};
+
 interface HandleItemState {
   isDrag: boolean;
   labelActive: boolean;