amis 1.5.6-beta.0 → 1.5.7

package/src/components/PopUp.tsx

@@ -0,0 +1,133 @@
+/**
+ * @file PopUp
+ * @description
+ * @author fex
+ */
+
+import React from 'react';
+import {ClassNamesFn, themeable} from '../theme';
+import Transition, {
+  ENTERED,
+  EXITING,
+  EXITED,
+  ENTERING
+} from 'react-transition-group/Transition';
+import Portal from 'react-overlays/Portal';
+import { Icon } from './icons';
+
+
+export interface PopUpPorps {
+  className?: string;
+  style?: {
+    [styleName: string]: string;
+  };
+  overlay?: boolean;
+  onHide?: () => void;
+  classPrefix: string;
+  classnames: ClassNamesFn;
+  [propName: string]: any;
+  isShow?: boolean;
+  container?: any;
+  hideClose?: boolean;
+  placement?: 'left' | 'center' | 'right';
+}
+
+const fadeStyles: {
+  [propName: string]: string;
+} = {
+  [ENTERED]: '',
+  [EXITING]: 'out',
+  [EXITED]: '',
+  [ENTERING]: 'in'
+};
+export class PopUp extends React.PureComponent<PopUpPorps> {
+  static defaultProps = {
+    className: '',
+    overlay: true,
+    isShow: false,
+    container: document.body,
+    hideClose: false,
+  };
+
+  componentDidMount() {
+
+  }
+  handleClick(e: React.MouseEvent) {
+    e.stopPropagation();
+  }
+
+  render() {
+    const {
+      style,
+      children,
+      overlay,
+      onHide,
+      classPrefix: ns,
+      classnames: cx,
+      className,
+      isShow,
+      container,
+      hideClose,
+      placement='center',
+      ...rest
+    } = this.props;
+
+    const outerStyle: any = {
+      ...style,
+    };
+    delete outerStyle.top;
+    return (
+      <Portal container={container}>
+        <Transition
+          mountOnEnter
+          unmountOnExit
+          in={isShow}
+          timeout={500}
+          appear
+        >
+          {(status: string) => {
+              return (
+                <div
+                  className={cx(
+                    `${ns}PopUp`,
+                    className,
+                    fadeStyles[status]
+                  )}
+                  style={outerStyle}
+                  {...rest}
+                  onClick={this.handleClick}
+                >
+                  {overlay && (
+                    <div className={`${ns}PopUp-overlay`} onClick={onHide}/>
+                  )}
+                  <div className={cx(
+                    `${ns}PopUp-inner`
+                  )}
+                  >
+                    {
+                      !hideClose && (
+                        <div className={cx(`${ns}PopUp-closeWrap`, 'text-right')}>
+                          <Icon
+                            icon="close"
+                          className={cx('icon', `${ns}PopUp-close`)}
+                            onClick={onHide}
+                          />
+                        </div>
+                      )
+                    }
+                    <div
+                      className={cx(`${ns}PopUp-content`, `justify-${placement}`)}
+                    >
+                      {children}
+                    </div>
+                  </div>
+                </div>
+              )
+          }}
+        </Transition>
+      </Portal>
+    )
+  }
+}
+
+export default themeable(PopUp);

package/src/components/Rating.tsx

@@ -8,22 +8,33 @@ import React from 'react';
 import cx from 'classnames';
 import {ClassNamesFn, themeable} from '../theme';
 
+import {isObject} from '../utils/helper';
+import {Icon} from './icons';
+
+export type textPositionType = 'left' | 'right';
+
 interface RatingProps {
   id?: string;
   key?: string | number;
   style?: React.CSSProperties;
   count: number;
   half: boolean;
-  char: string;
-  size: number;
+  char: string | React.ReactNode;
   className?: string;
-  onChange?: (value: any) => void;
+  charClassName?: string;
+  textClassName?: string;
+  onChange?: (value: number) => void;
+  onHoverChange?: (value: number) => void;
   value: number;
-  containerClass: string;
+  containerClass?: string;
   readOnly: boolean;
   classPrefix: string;
   disabled?: boolean;
   allowClear?: boolean;
+  inactiveColor?: string;
+  colors?: string | {[propName: string]: string};
+  texts?: {[propName: string]: string};
+  textPosition?: textPositionType;
   classnames: ClassNamesFn;
 }
 
@@ -35,13 +46,22 @@ export class Rating extends React.Component<RatingProps, any> {
     allowClear: true,
     value: 0,
     count: 5,
-    char: '★',
-    size: 24
+    char: <Icon icon="star" className="icon" />,
+    colors: {
+      '2': '#abadb1',
+      '3': '#787b81',
+      '5': '#ffa900'
+    },
+    textPosition: 'right' as textPositionType
   };
 
+  starsNode: Record<string, any>;
+
   constructor(props: RatingProps) {
     super(props);
 
+    this.starsNode = {};
+
     this.state = {
       value: props.value || 0,
       stars: [],
@@ -49,7 +69,10 @@ export class Rating extends React.Component<RatingProps, any> {
       halfStar: {
         at: Math.floor(props.value),
         hidden: props.half && props.value % 1 < 0.5
-      }
+      },
+      showColor: '',
+      showText: null,
+      hoverValue: null
     };
 
     this.getRate = this.getRate.bind(this);
@@ -58,6 +81,8 @@ export class Rating extends React.Component<RatingProps, any> {
     this.mouseOver = this.mouseOver.bind(this);
     this.mouseLeave = this.mouseLeave.bind(this);
     this.handleClick = this.handleClick.bind(this);
+    this.saveRef = this.saveRef.bind(this);
+    this.handleStarMouseLeave = this.handleStarMouseLeave.bind(this);
   }
 
   componentDidMount() {
@@ -65,6 +90,8 @@ export class Rating extends React.Component<RatingProps, any> {
     this.setState({
       stars: this.getStars(value)
     });
+
+    this.getShowColorAndText(value);
   }
 
   componentDidUpdate(prevProps: RatingProps) {
@@ -82,6 +109,55 @@ export class Rating extends React.Component<RatingProps, any> {
     }
   }
 
+  sortKeys(map: {[propName: number]: string}) {
+    return Object.keys(map).sort(
+      (a: number | string, b: number | string) => Number(a) - Number(b)
+    );
+  }
+
+  getShowColorAndText(value: number) {
+    const {colors, texts, half} = this.props;
+
+    if (!value)
+      return this.setState({
+        showText: null
+      });
+
+    // 对 value 取整
+    if (half) {
+      value = Math.floor(Number(value) * 2) / 2;
+    } else {
+      value = Math.floor(value);
+    }
+
+    if (colors && typeof colors !== 'string') {
+      const keys: string[] = this.sortKeys(colors);
+      const showKey = keys.filter(item => Number(item) < value).length;
+
+      const showColor = keys[showKey] !== undefined && colors[keys[showKey]];
+      showColor &&
+        this.setState({
+          showColor
+        });
+    } else if (colors && typeof colors === 'string') {
+      this.setState({
+        showColor: colors
+      });
+    }
+
+    if (texts && isObject(texts)) {
+      const keys: string[] = this.sortKeys(texts);
+      const showKey = keys.filter(item => Number(item) < value).length;
+      const showText =
+        keys[showKey] !== undefined &&
+        texts[keys[showKey] as keyof typeof texts];
+      showText &&
+        this.setState({
+          showText
+        });
+    }
+  }
+
   getRate() {
     let stars;
     const {value} = this.state;
@@ -108,14 +184,28 @@ export class Rating extends React.Component<RatingProps, any> {
     return stars;
   }
 
-  mouseOver(event: React.ChangeEvent<any>) {
+  saveRef(index: number) {
+    return (node: React.ReactNode) => {
+      this.starsNode[String(index)] = node;
+    };
+  }
+
+  mouseOver(event: React.ChangeEvent<any>, index: number) {
     const {isClear} = this.state;
     if (isClear) return;
-    let {readOnly, size, half} = this.props;
+
+    const {readOnly, half} = this.props;
+
     if (readOnly) return;
-    let index = Number(event.target.getAttribute('data-index'));
+
     if (half) {
-      const isAtHalf = this.moreThanHalf(event, size);
+      const isAtHalf = this.moreThanHalf(event, index);
+
+      const tmpValue = isAtHalf ? index + 1 : index + 0.5;
+
+      this.getShowColorAndText(tmpValue);
+      this.onHoverChange(tmpValue);
+
       if (isAtHalf) index = index + 1;
       this.setState({
         halfStar: {
@@ -125,24 +215,43 @@ export class Rating extends React.Component<RatingProps, any> {
       });
     } else {
       index = index + 1;
+      this.onHoverChange(index);
+      this.getShowColorAndText(index);
     }
     this.setState({
       stars: this.getStars(index)
     });
   }
 
-  moreThanHalf(event: any, size: number) {
-    let {target} = event;
-    let mouseAt = event.clientX - target.getBoundingClientRect().left;
-    mouseAt = Math.round(Math.abs(mouseAt));
-    return mouseAt > size / 2;
+  onHoverChange(value: number) {
+    const {onHoverChange} = this.props;
+    const {hoverValue} = this.state;
+
+    if (!hoverValue || (hoverValue && hoverValue !== value)) {
+      this.setState({
+        hoverValue: value
+      });
+      onHoverChange && onHoverChange(value);
+    }
+  }
+
+  moreThanHalf(event: any, index: number) {
+    const star = this.starsNode[index];
+    const leftPos = star.getBoundingClientRect().left;
+
+    return event.clientX - leftPos > star.clientWidth / 2;
   }
 
   mouseLeave() {
     const {value, isClear} = this.state;
     const {half, readOnly} = this.props;
     if (readOnly) return;
-    if (isClear) return this.setState({isClear: false});
+    if (isClear)
+      return this.setState({
+        isClear: false,
+        hoverValue: null
+      });
+
     if (half) {
       this.setState({
         halfStar: {
@@ -152,18 +261,39 @@ export class Rating extends React.Component<RatingProps, any> {
       });
     }
     this.setState({
-      stars: this.getStars()
+      stars: this.getStars(),
+      hoverValue: null
     });
+    this.getShowColorAndText(value);
   }
 
-  handleClick(event: React.ChangeEvent<any>) {
-    const {half, readOnly, onChange, size, allowClear} = this.props;
+  handleStarMouseLeave(event: any, index: number) {
+    const star = this.starsNode[index];
+    const leftSideX = star.getBoundingClientRect().left;
+    const {isClear} = this.state;
+
+    if (isClear) return this.setState({isClear: false});
+
+    // leave star from left side
+    if (event.clientX <= leftSideX) {
+      this.getShowColorAndText(index);
+      this.setState({
+        stars: this.getStars(index),
+        halfStar: {
+          at: index,
+          hidden: true
+        }
+      });
+    }
+  }
+
+  handleClick(event: React.ChangeEvent<any>, index: number) {
+    const {half, readOnly, onChange, allowClear} = this.props;
     if (readOnly) return;
-    let index = Number(event.target.getAttribute('data-index'));
 
     let value;
     if (half) {
-      const isAtHalf = this.moreThanHalf(event, size);
+      const isAtHalf = this.moreThanHalf(event, index);
       if (isAtHalf) index = index + 1;
       value = isAtHalf ? index : index + 0.5;
       this.setState({
@@ -183,41 +313,99 @@ export class Rating extends React.Component<RatingProps, any> {
       stars: this.getStars(index),
       isClear
     });
+
+    this.getShowColorAndText(value);
+
     onChange && onChange(value);
   }
 
   renderStars() {
-    const {halfStar, stars} = this.state;
-    const {char, half, disabled, readOnly, classnames: cx} = this.props;
-    return stars.map((star: any, i: number) => {
-      let className = cx('Rating', {
-        'Rating-half': half && !halfStar.hidden && halfStar.at === i,
-        'is-active': star.active,
-        'is-disabled': readOnly || disabled
-      });
+    const {halfStar, stars, showColor} = this.state;
+    const {
+      inactiveColor,
+      char,
+      half,
+      disabled,
+      readOnly,
+      charClassName,
+      classnames: cx
+    } = this.props;
 
-      return (
-        <span
-          className={className}
-          key={i}
-          data-index={i}
-          data-forhalf={char}
-          onMouseOver={this.mouseOver}
-          onMouseMove={this.mouseOver}
-          onMouseLeave={this.mouseLeave}
-          onClick={this.handleClick}
-        >
-          {char}
-        </span>
-      );
-    });
+    return (
+      <ul onMouseLeave={this.mouseLeave}>
+        {stars.map((star: any, i: number) => {
+          const isThisHalf = half && !halfStar.hidden && halfStar.at === i;
+
+          return (
+            <li
+              ref={this.saveRef(i)}
+              className={cx('Rating-star', charClassName, {
+                'is-half': isThisHalf,
+                'is-active': star.active,
+                'is-disabled': readOnly || disabled
+              })}
+              key={i}
+              style={{
+                color: star.active ? showColor : inactiveColor
+              }}
+              onMouseOver={e => this.mouseOver(e, i)}
+              onMouseMove={e => this.mouseOver(e, i)}
+              onClick={e => this.handleClick(e, i)}
+              onMouseLeave={e => this.handleStarMouseLeave(e, i)}
+            >
+              {isThisHalf && (
+                <div
+                  className={cx('Rating-star-half')}
+                  style={{
+                    color: showColor
+                  }}
+                >
+                  {char}
+                </div>
+              )}
+              {char}
+            </li>
+          );
+        })}
+      </ul>
+    );
+  }
+
+  renderText() {
+    const {showText} = this.state;
+    const {textClassName, textPosition, classnames: cx} = this.props;
+
+    if (!showText) return null;
+
+    return (
+      <span
+        className={cx('Rating-text', textClassName, {
+          [`Rating-text--${textPosition === 'left' ? 'left' : 'right'}`]:
+            textPosition
+        })}
+      >
+        {showText}
+      </span>
+    );
   }
 
   render() {
-    let {className} = this.props;
+    const {className, textPosition, classnames: cx} = this.props;
 
     return (
-      <div className={cx(className ? className : '')}>{this.renderStars()}</div>
+      <div className={cx('Rating', className)}>
+        {textPosition === 'left' ? (
+          <>
+            {this.renderText()}
+            {this.renderStars()}
+          </>
+        ) : (
+          <>
+            {this.renderStars()}
+            {this.renderText()}
+          </>
+        )}
+      </div>
     );
   }
 }

package/src/components/Steps.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {themeable, ThemeProps} from '../theme';
 import {Icon} from './icons';
 import {BaseSchema} from '../Schema';
+import { isMobile } from '../utils/helper';
 
 export enum StepStatus {
   wait = 'wait',
@@ -78,6 +79,7 @@ export interface StepsProps extends ThemeProps {
     [propName: string]: StepStatus;
   };
   mode?: 'horizontal' | 'vertical';
+  useMobileUI?: boolean;
 }
 
 export function Steps(props: StepsProps) {
@@ -87,7 +89,8 @@ export function Steps(props: StepsProps) {
     className,
     current,
     status,
-    mode = 'horizontal'
+    mode = 'horizontal',
+    useMobileUI
   } = props;
   const FINISH_ICON = 'check';
   const ERROR_ICON = 'close';
@@ -122,8 +125,9 @@ export function Steps(props: StepsProps) {
     };
   }
 
+  const mobileUI = useMobileUI && isMobile();
   return (
-    <ul className={cx('Steps', `Steps--${mode}`, className)}>
+    <ul className={cx('Steps', `Steps--${mode}`, mobileUI ? 'Steps-mobile' : '', className)}>
       {stepsRow.map((step, i) => {
         const {stepStatus, icon} = getStepStatus(step, i);
 
@@ -133,7 +137,8 @@ export function Steps(props: StepsProps) {
             className={cx('StepsItem', `is-${stepStatus}`, step.className)}
           >
             <div className={cx('StepsItem-container')}>
-              <div className={cx('StepsItem-containerIcon')}>
+              <div className={cx('StepsItem-containerIcon',
+                      i < current && 'is-success')}>
                 <span className={cx('StepsItem-icon')}>
                   {icon ? <Icon icon={icon} className="icon" /> : i + 1}
                 </span>

package/src/components/TabsTransferPicker.tsx

@@ -44,7 +44,7 @@ export class TransferPicker extends React.Component<TabsTransferPickerProps> {
     return (
       <PickerContainer
         title={__('Select.placeholder')}
-        popOverRender={({onClose, value, onChange}) => {
+        bodyRender={({onClose, value, onChange}) => {
           return <TabsTransfer {...rest} value={value} onChange={onChange} />;
         }}
         value={value}

package/src/components/TransferPicker.tsx

@@ -19,18 +19,9 @@ export interface TransferPickerProps extends Omit<TransferProps, 'itemRender'> {
 }
 
 export class TransferPicker extends React.Component<TransferPickerProps> {
-  @autobind
-  handleClose() {
-    this.setState({
-      inputValue: '',
-      searchResult: null
-    });
-  }
-
   @autobind
   handleConfirm(value: any) {
     this.props.onChange?.(value);
-    this.handleClose();
   }
 
   render() {
@@ -49,12 +40,11 @@ export class TransferPicker extends React.Component<TransferPickerProps> {
     return (
       <PickerContainer
         title={__('Select.placeholder')}
-        popOverRender={({onClose, value, onChange}) => {
+        bodyRender={({onClose, value, onChange}) => {
           return <Transfer {...rest} value={value} onChange={onChange} />;
         }}
         value={value}
         onConfirm={this.handleConfirm}
-        onCancel={this.handleClose}
         size={size}
       >
         {({onClick, isOpened}) => (