amis 1.7.0 → 1.8.0-beta.13

package/src/components/Drawer.tsx

@@ -204,6 +204,7 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
         <Transition
           mountOnEnter
           unmountOnExit
+          appear
           in={show}
           timeout={500}
           onEnter={this.handleEnter}

package/src/components/Modal.tsx

@@ -236,6 +236,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
       <Transition
         mountOnEnter
         unmountOnExit
+        appear
         in={show}
         timeout={500}
         onEnter={this.handleEnter}

package/src/components/Overlay.tsx

@@ -97,7 +97,8 @@ class Position extends React.Component<any, any> {
         overlay,
         target,
         container,
-        this.props.containerPadding
+        this.props.containerPadding,
+        this.props.offset
       )
     );
   }
@@ -173,7 +174,7 @@ interface OverlayProps {
   container?: React.ReactNode | Function;
   target?: React.ReactNode | Function;
   watchTargetSizeChange?: boolean;
-
+  offset?: [number, number];
   onEnter?(node: HTMLElement): any;
   onEntering?(node: HTMLElement): any;
   onEntered?(node: HTMLElement): any;
@@ -238,6 +239,7 @@ export default class Overlay extends React.Component<
       children,
       watchTargetSizeChange,
       transition: Transition,
+      offset,
       ...props
     } = this.props;
 
@@ -259,7 +261,8 @@ export default class Overlay extends React.Component<
           containerPadding,
           target,
           placement,
-          shouldUpdatePosition
+          shouldUpdatePosition,
+          offset
         }}
         ref={this.positionRef}
       >

package/src/components/Progress.tsx

@@ -3,21 +3,26 @@ import cx from 'classnames';
 import {Circle} from 'rc-progress';
 import {ClassNamesFn, themeable, ThemeProps} from '../theme';
 import {SchemaClassName} from '../Schema';
+interface ColorProps {
+  value: number;
+  color: string;
+}
+
+export type ColorMapType = Array<string> | Array<ColorProps> | string;
+
 interface ProgressProps extends ThemeProps {
   type: 'line' | 'circle' | 'dashboard';
   showLabel: boolean;
   value: number;
   stripe?: boolean;
   animate?: boolean;
-  map?: Array<string>;
+  map?: ColorMapType;
   placeholder?: string;
   format?: (value?: number) => JSX.Element;
   gapDegree?: number;
   gapPosition?: 'top' | 'bottom' | 'left' | 'right';
   strokeWidth?: number;
-  classNames?: string;
   progressClassName?: SchemaClassName;
-  progressBarClassName?: SchemaClassName;
   classnames: ClassNamesFn;
 }
 export class Progress extends React.Component<ProgressProps, Object> {
@@ -25,19 +30,46 @@ export class Progress extends React.Component<ProgressProps, Object> {
     type: 'line',
     placeholder: '-',
     progressClassName: '',
-    progressBarClassName: '',
     map: ['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success'],
     showLabel: true
   };
 
-  autoClassName(value: number) {
-    const map = this.props.map;
-    if (!map || !map.length) {
-      return '';
+  getCurrentColor() {
+    const color = this.props.map;
+    if (!color || !color.length) {
+      return 'bg-primary';
+    }
+    if (typeof color === 'string') {
+      return color;
+    } else {
+      return this.getLevelColor(color);
     }
-    let index = Math.floor((value * map.length) / 100);
-    index = Math.max(0, Math.min(map.length - 1, index));
-    return map[index];
+  }
+
+  getLevelColor(color: Array<string> | Array<ColorProps>) {
+    const value = this.props.value;
+    const colorArray = this.getColorArray(color).sort(
+      (a: {value: number}, b: {value: number}) => a.value - b.value
+    );
+    for (let i = 0; i < colorArray.length; i++) {
+      if (colorArray[i].value > value) {
+        return colorArray[i].color;
+      }
+    }
+    return colorArray[colorArray.length - 1].color;
+  }
+
+  getColorArray(color: Array<string> | Array<ColorProps>) {
+    const span = 100 / color.length;
+    return color.map((item, index) => {
+      if (typeof item === 'string') {
+        return {
+          color: item,
+          value: (index + 1) * span
+        };
+      }
+      return item;
+    });
   }
 
   getLabel(prefixCls: string) {
@@ -56,15 +88,13 @@ export class Progress extends React.Component<ProgressProps, Object> {
 
   render() {
     const {
-      classNames,
+      className,
       progressClassName,
-      progressBarClassName,
       type,
       value,
       placeholder,
       stripe,
       animate,
-      showLabel,
       gapDegree,
       gapPosition,
       strokeWidth,
@@ -73,32 +103,33 @@ export class Progress extends React.Component<ProgressProps, Object> {
 
     const isLineType = type === 'line';
     const prefixCls = isLineType ? 'Progress-line' : 'Progress-circle';
+    const bgColor = this.getCurrentColor();
+    const isColorClass = /bg-/.test(bgColor);
 
-    let viewValue: React.ReactNode = (
-      <span className="text-muted">{placeholder}</span>
-    );
+    let viewValue: React.ReactNode;
+    if (typeof value !== 'number') {
+      viewValue = <span className="text-muted">{placeholder}</span>;
+    } else if (type === 'line') {
+      const style: any = {};
+      const barStyle: any = {
+        width: `${value}%`
+      };
+      strokeWidth && (style.height = strokeWidth);
+      !isColorClass && (barStyle.backgroundColor = bgColor);
 
-    if (type === 'line') {
       viewValue = [
-        <div
-          key="progress"
-          className={cx(prefixCls, progressClassName, {
-            [`${prefixCls}-no-label`]: !showLabel
-          })}
-        >
-          <div className={cx(`${prefixCls}-inter`)}>
+        <div key="progress" className={cx(prefixCls, progressClassName)}>
+          <div className={cx(`${prefixCls}-inter`)} style={style}>
             <div
               className={cx(
                 `${prefixCls}-bar`,
-                progressBarClassName || this.autoClassName(value),
+                {[bgColor]: isColorClass},
                 {[`${prefixCls}-bar--stripe`]: stripe},
                 {[`${prefixCls}-bar--animate`]: animate && !stripe},
                 {[`${prefixCls}-bar--stripe-animate`]: animate && stripe}
               )}
               title={`${value}%`}
-              style={{
-                width: `${value}%`
-              }}
+              style={barStyle}
             />
           </div>
         </div>,
@@ -118,13 +149,13 @@ export class Progress extends React.Component<ProgressProps, Object> {
       };
 
       viewValue = [
-        <div className={cx(prefixCls)} key="circle">
+        <div className={cx(prefixCls, progressClassName)} key="circle">
           <Circle
             percent={value}
-            strokeColor=""
+            strokeColor={!isColorClass ? bgColor : ''}
             strokeWidth={circleWidth}
             trailWidth={circleWidth}
-            prefixCls={this.autoClassName(value)}
+            prefixCls={isColorClass ? bgColor : ''}
             gapDegree={getGapDegree()}
             gapPosition={gapPos}
           />
@@ -133,7 +164,7 @@ export class Progress extends React.Component<ProgressProps, Object> {
       ];
     }
 
-    return <div className={cx('Progress', classNames)}>{viewValue}</div>;
+    return <div className={cx('Progress', className)}>{viewValue}</div>;
   }
 }
 

package/src/components/PullRefresh.tsx

@@ -0,0 +1,197 @@
+/**
+ * @file PullRefresh.tsx
+ * @description 下拉刷新
+ * @author hongyang03
+ */
+
+import React, {forwardRef, useEffect} from 'react';
+import {ClassNamesFn, themeable} from '../theme';
+import {useSetState} from '../hooks';
+import useTouch from '../hooks/use-touch';
+import {Icon} from './icons';
+import {TranslateFn} from '../locale';
+
+export interface PullRefreshProps {
+  classnames: ClassNamesFn;
+  classPrefix: string;
+  translate: TranslateFn;
+  disabled?: boolean;
+  pullingText?: string;
+  loosingText?: string;
+  loadingText?: string;
+  successText?: string;
+  onRefresh?: () => void;
+  loading?: boolean;
+  successDuration?: number;
+  loadingDuration?: number;
+}
+
+type statusText = 'normal' | 'pulling' | 'loosing' | 'success' | 'loading';
+
+export interface PullRefreshState {
+  status: statusText;
+  offsetY: number;
+}
+
+const defaultProps = {
+  successDuration: 0,
+  loadingDuration: 0
+};
+
+const defaultHeaderHeight = 28;
+
+const PullRefresh = forwardRef<{}, PullRefreshProps>((props, ref) => {
+  const {
+    classnames: cx,
+    translate: __,
+    children,
+    successDuration,
+    loadingDuration
+  } = props;
+
+  const refreshText = {
+    pullingText: __('pullRefresh.pullingText'),
+    loosingText: __('pullRefresh.loosingText'),
+    loadingText: __('pullRefresh.loadingText'),
+    successText: __('pullRefresh.successText')
+  };
+
+  const touch = useTouch();
+
+  useEffect(() => {
+    if (props.loading === false) {
+      loadSuccess();
+    }
+  }, [props.loading]);
+
+  const [state, updateState] = useSetState({
+    status: 'normal',
+    offsetY: 0
+  } as PullRefreshState);
+
+  const isTouchable = () => {
+    return (
+      !props.disabled &&
+      state.status !== 'loading' &&
+      state.status !== 'success'
+    );
+  };
+
+  const ease = (distance: number) => {
+    const pullDistance = defaultHeaderHeight;
+
+    if (distance > pullDistance) {
+      if (distance < pullDistance * 2) {
+        distance = pullDistance + (distance - pullDistance) / 2;
+      } else {
+        distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
+      }
+    }
+
+    return Math.round(distance);
+  };
+
+  const setStatus = (distance: number, isLoading?: boolean) => {
+    const pullDistance = defaultHeaderHeight;
+    let status: statusText = 'normal';
+
+    if (isLoading) {
+      status = 'loading';
+    } else if (distance === 0) {
+      status = 'normal';
+    } else if (distance < pullDistance) {
+      status = 'pulling';
+    } else {
+      status = 'loosing';
+    }
+
+    updateState({offsetY: distance, status});
+  };
+
+  const loadSuccess = () => {
+    if (!successDuration) {
+      setStatus(0);
+      return;
+    }
+    updateState({status: 'success'});
+
+    setTimeout(() => {
+      setStatus(0);
+    }, successDuration);
+  };
+
+  const onTouchStart = (event: any) => {
+    event.stopPropagation();
+
+    if (isTouchable() && state.offsetY === 0) {
+      touch.start(event);
+      updateState({});
+    }
+  };
+
+  const onTouchMove = (event: any) => {
+    event.stopPropagation();
+
+    if (isTouchable()) {
+      touch.move(event);
+      updateState({});
+      if (touch.isVertical() && touch.deltaY > 0) {
+        setStatus(ease(touch.deltaY));
+      }
+    }
+    return false;
+  };
+
+  const onTouchEnd = (event: any) => {
+    event.stopPropagation();
+
+    if (isTouchable() && state.offsetY > 0) {
+      if (state.status === 'loosing') {
+        if (loadingDuration) {
+          setStatus(defaultHeaderHeight, true);
+        } else {
+          setStatus(0);
+        }
+        props.onRefresh && props.onRefresh();
+      } else {
+        setStatus(0);
+      }
+    }
+  };
+
+  const transformStyle = {
+    transform: `translate3d(0, ${state.offsetY}px, 0)`,
+    touchAction: 'none'
+  };
+
+  const getStatusText = (status: statusText) => {
+    if (status === 'normal') {
+      return '';
+    }
+    return props[`${status}Text`] || refreshText[`${status}Text`];
+  };
+
+  return (
+    <div
+      className={cx('PullRefresh')}
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}
+      onTouchCancel={onTouchEnd}
+    >
+      <div className={cx('PullRefresh-wrap')} style={transformStyle}>
+        <div className={cx('PullRefresh-header')}>
+          {state.status === 'loading' && (
+            <Icon icon="loading-outline" className="icon loading-icon" />
+          )}
+          {getStatusText(state.status)}
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+});
+
+PullRefresh.defaultProps = defaultProps;
+
+export default themeable(PullRefresh);

package/src/components/Radios.tsx

@@ -21,11 +21,12 @@ import Button from './Button';
 import {value2array, OptionProps, Option} from './Select';
 import chunk from 'lodash/chunk';
 import {ClassNamesFn, themeable} from '../theme';
+import {columnsSplit} from '../utils/columnsSplit';
 
 interface RadioProps extends OptionProps {
   id?: string;
   type: string;
-  optionType?: string,
+  optionType?: string;
   value?: string;
   className?: string;
   style?: React.CSSProperties;
@@ -34,7 +35,7 @@ interface RadioProps extends OptionProps {
   btnActiveLevel?: string;
   disabled?: boolean;
   onChange?: Function;
-  columnsCount: number;
+  columnsCount: number | number[];
   itemClassName?: string;
   labelField?: string;
   labelClassName?: string;
@@ -78,7 +79,7 @@ export class Radios extends React.Component<RadioProps, any> {
   }
 
   renderGroup(option: Option, index: number, valueArray: Array<Option>) {
-    const {classnames: cx, optionType, classPrefix: ns,} = this.props;
+    const {classnames: cx, optionType, classPrefix: ns} = this.props;
 
     return (
       <div key={index} className={cx('RadiosControl-group', option.className)}>
@@ -178,20 +179,8 @@ export class Radios extends React.Component<RadioProps, any> {
       );
     }
 
-    if (!inline && columnsCount > 1) {
-      let weight = 12 / (columnsCount as number);
-      let cellClassName = `Grid-col--sm${
-        weight === Math.round(weight) ? weight : ''
-      }`;
-      body = chunk(body, columnsCount).map((group, groupIndex) => (
-        <div className={cx('Grid')} key={groupIndex}>
-          {Array.from({length: columnsCount as number}).map((_, index) => (
-            <div key={index} className={cx(cellClassName)}>
-              {group[index]}
-            </div>
-          ))}
-        </div>
-      ));
+    if (!inline) {
+      body = columnsSplit(body, cx, columnsCount);
     }
 
     return (

package/src/components/Range.tsx

@@ -11,11 +11,11 @@ import difference from 'lodash/difference';
 import React from 'react';
 import {uncontrollable} from 'uncontrollable';
 
-import {RendererProps} from '../factory';
 import Overlay from './Overlay';
-import {ThemeProps, themeable} from '../theme';
+import type { ThemeProps } from '../theme'
+import {themeable} from '../theme';
 import {autobind, camel} from '../utils/helper';
-import {
+import type {
   MultipleValue,
   Value,
   FormatValue,
@@ -71,7 +71,7 @@ interface LabelProps extends ThemeProps {
  * @returns position.left
  */
 const valueToOffsetLeft = (value: any, min: number, max: number) =>
-  (value * 100) / (max - min) + '%';
+  ((value - min) * 100) / (max - min) + '%';
 
 /**
  * 滑块handle
@@ -298,7 +298,7 @@ export class Range extends React.Component<RangeItemProps, any> {
   pageXToValue(pageX: number) {
     const {x, width} = this.getBoundingClient(this.trackRef.current as Element);
     const {max, min} = this.props;
-    return ((pageX - x) * (max - min)) / width;
+    return ((pageX - x) * (max - min)) / width + min;
   }
 
   /**
@@ -366,16 +366,30 @@ export class Range extends React.Component<RangeItemProps, any> {
    */
   @autobind
   renderSteps() {
-    const {max, min, step, showSteps, classnames: cx} = this.props;
-    const steps = Math.floor((max - min) / step);
+    const {max, min, step, showSteps, classnames: cx, parts} = this.props;
+    let isShowSteps = showSteps;
+    // 只要设置了 parts 就展示分隔
+    if (parts > 1 || Array.isArray(parts)) {
+      isShowSteps = true;
+    }
+    // 总区间
+    const section = max - min;
+    // 总区间被平均分为多少块
+    const steps = parts > 1 ? parts : Math.floor(section / step);
+    // 平均分 每块的长度
+    const partLength = section / steps;
+    // parts为数组时，以0为起点(传入的值 - min)
+    const partLengthList = Array.isArray(parts)
+      ? parts.map(item => item - min)
+      : range(steps - 1).map(item => (item + 1) * partLength);
     return (
-      showSteps && (
+      isShowSteps && (
         <div>
-          {range(steps - 1).map(item => (
+          {partLengthList.map(item => (
             <span
               key={item}
               className={cx('InputRange-track-dot')}
-              style={{left: ((item + 1) * 100) / steps + '%'}}
+              style={{left: (item * 100) / (max - min) + '%'}}
             ></span>
           ))}
         </div>
@@ -437,13 +451,13 @@ export class Range extends React.Component<RangeItemProps, any> {
     const traceActiveStyle = {
       width: valueToOffsetLeft(
         multiple
-          ? (value as MultipleValue).max - (value as MultipleValue).min
+          ? (value as MultipleValue).max - (value as MultipleValue).min + min
           : value,
         min,
         max
       ),
       left: valueToOffsetLeft(
-        multiple ? (value as MultipleValue).min : 0,
+        multiple ? (value as MultipleValue).min : min,
         min,
         max
       )