amis 1.5.6-beta.4 → 1.5.8-beta.2

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

@@ -6,6 +6,7 @@ import {Icon} from './icons';
 import Input from './Input';
 import {autobind, ucFirst} from '../utils/helper';
 import {LocaleProps, localeable} from '../locale';
+import isPlainObject = require('lodash/isPlainObject');
 
 export interface ResultBoxProps
   extends ThemeProps,
@@ -147,7 +148,9 @@ export class ResultBox extends React.Component<ResultBoxProps> {
             </div>
           ))
         ) : result && !Array.isArray(result) ? (
-          <span className={cx('ResultBox-singleValue')}>{result}</span>
+          <span className={cx('ResultBox-singleValue')}>
+            {isPlainObject(result) ? itemRender(result) : result}
+          </span>
         ) : allowInput && !disabled ? null : (
           <span className={cx('ResultBox-placeholder')}>
             {__(placeholder || 'placeholder.noData')}

package/src/components/ResultList.tsx

@@ -13,21 +13,28 @@ import {LocaleProps, localeable} from '../locale';
 export interface ResultListProps extends ThemeProps, LocaleProps {
   className?: string;
   value?: Array<Option>;
-  onChange?: (value: Array<Option>) => void;
+  onChange?: (value: Array<Option>, optionModified?: boolean) => void;
   sortable?: boolean;
   disabled?: boolean;
   title?: string;
   placeholder: string;
-  itemRender: (option: Option) => JSX.Element;
+  itemRender: (option: Option, states: ItemRenderStates) => JSX.Element;
   itemClassName?: string;
 }
 
+export interface ItemRenderStates {
+  index: number;
+  disabled?: boolean;
+  onChange: (value: any, name: string) => void;
+}
+
 export class ResultList extends React.Component<ResultListProps> {
+  static itemRender(option: any) {
+    return <span>{`${option.scopeLabel || ''}${option.label}`}</span>;
+  }
   static defaultProps: Pick<ResultListProps, 'placeholder' | 'itemRender'> = {
     placeholder: 'placeholder.selectData',
-    itemRender: (option: any) => (
-      <span>{`${option.scopeLabel || ''}${option.label}`}</span>
-    )
+    itemRender: ResultList.itemRender
   };
 
   id = guid();
@@ -114,6 +121,23 @@ export class ResultList extends React.Component<ResultListProps> {
     delete this.sortable;
   }
 
+  handleValueChange(index: number, value: any, name: string) {
+    if (typeof name !== 'string') {
+      return;
+    }
+    const {value: list, onChange} = this.props;
+
+    const result = Array.isArray(list) ? list.concat() : [];
+    if (!result[index]) {
+      return;
+    }
+    result.splice(index, 1, {
+      ...result[index],
+      [name]: value
+    });
+    onChange?.(result, true);
+  }
+
   render() {
     const {
       classnames: cx,
@@ -150,7 +174,13 @@ export class ResultList extends React.Component<ResultListProps> {
                   />
                 ) : null}
 
-                <label>{itemRender(option)}</label>
+                <label>
+                  {itemRender(option, {
+                    index,
+                    disabled,
+                    onChange: this.handleValueChange.bind(this, index)
+                  })}
+                </label>
 
                 {!disabled ? (
                   <a

package/src/components/Select.tsx

@@ -926,7 +926,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
     const menu = mobileUI ? (
       <Picker
         className={cx('PickerColumns-column', mobileClassName)}
-        labelField='label'
+        labelField="label"
         value={value[0]}
         translate={this.props.translate}
         locale={this.props.locale}

package/src/components/Selection.tsx

@@ -29,18 +29,30 @@ export interface BaseSelectionProps extends ThemeProps, LocaleProps {
   labelClassName?: string;
   option2value?: (option: Option) => any;
   itemClassName?: string;
-  itemRender: (option: Option) => JSX.Element;
+  itemRender: (option: Option, states: ItemRenderStates) => JSX.Element;
   disabled?: boolean;
   onClick?: (e: React.MouseEvent) => void;
 }
 
+export interface ItemRenderStates {
+  index: number;
+  multiple?: boolean;
+  checked: boolean;
+  onChange: () => void;
+  disabled?: boolean;
+}
+
 export class BaseSelection<
   T extends BaseSelectionProps = BaseSelectionProps,
   S = any
 > extends React.Component<T, S> {
+  static itemRender(option: Option, states: ItemRenderStates) {
+    return <span>{option.label}</span>;
+  }
+
   static defaultProps = {
     placeholder: 'placeholder.noOption',
-    itemRender: (option: Option) => <span>{option.label}</span>,
+    itemRender: BaseSelection.itemRender,
     multiple: true,
     clearable: false
   };
@@ -182,7 +194,13 @@ export class BaseSelection<
           labelClassName={labelClassName}
           description={option.description}
         >
-          {itemRender(option)}
+          {itemRender(option, {
+            index: key,
+            multiple: multiple,
+            checked: !!~valueArray.indexOf(option),
+            onChange: () => this.toggleOption(option),
+            disabled: disabled || option.disabled
+          })}
         </Checkbox>
       ));
     }

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',
@@ -62,7 +63,7 @@ export interface StepsSchema extends BaseSchema {
    */
   name?: string;
 
-  status: StepStatus
+  status: StepStatus;
 
   /**
    * 展示模式
@@ -74,10 +75,13 @@ export interface StepsProps extends ThemeProps {
   steps: StepSchema[];
   className: string;
   current: number;
-  status?: StepStatus | {
-    [propName: string]: StepStatus;
-  };
+  status?:
+    | StepStatus
+    | {
+        [propName: string]: StepStatus;
+      };
   mode?: 'horizontal' | 'vertical';
+  useMobileUI?: boolean;
 }
 
 export function Steps(props: StepsProps) {
@@ -87,7 +91,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 +127,16 @@ 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 +146,12 @@ 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>
@@ -161,7 +179,7 @@ export function Steps(props: StepsProps) {
         );
       })}
     </ul>
-  )
+  );
 }
 
-export default themeable(Steps);
+export default themeable(Steps);

package/src/components/TableSelection.tsx

@@ -153,50 +153,7 @@ export class TableSelection extends BaseSelection<TableSelectionProps> {
   }
 
   render() {
-    const {
-      value,
-      options,
-      className,
-      labelClassName,
-      disabled,
-      classnames: cx,
-      option2value,
-      itemClassName,
-      itemRender,
-      multiple
-    } = this.props;
-
-    let valueArray = BaseSelection.value2array(value, options, option2value);
-    let body: Array<React.ReactNode> = [];
-
-    if (Array.isArray(options) && options.length) {
-      body = options.map((option, key) => (
-        <div
-          key={key}
-          className={cx(
-            'TableSelection-item',
-            itemClassName,
-            option.className,
-            disabled || option.disabled ? 'is-disabled' : ''
-          )}
-          onClick={() => this.toggleOption(option)}
-        >
-          <div className={cx('TableSelection-itemLabel')}>
-            {itemRender(option)}
-          </div>
-
-          {multiple ? (
-            <Checkbox
-              size="sm"
-              checked={!!~valueArray.indexOf(option)}
-              disabled={disabled || option.disabled}
-              labelClassName={labelClassName}
-              description={option.description}
-            />
-          ) : null}
-        </div>
-      ));
-    }
+    const {className, classnames: cx} = this.props;
 
     return (
       <div className={cx('TableSelection', className)}>