amis 1.5.6-beta.5 → 1.6.0

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

@@ -4,8 +4,9 @@ import {InputBoxProps} from './InputBox';
 import {uncontrollable} from 'uncontrollable';
 import {Icon} from './icons';
 import Input from './Input';
-import {autobind, ucFirst} from '../utils/helper';
+import {autobind, isMobile, ucFirst} from '../utils/helper';
 import {LocaleProps, localeable} from '../locale';
+import isPlainObject = require('lodash/isPlainObject');
 
 export interface ResultBoxProps
   extends ThemeProps,
@@ -18,6 +19,7 @@ export interface ResultBoxProps
   onResultChange?: (value: Array<any>) => void;
   allowInput?: boolean;
   inputPlaceholder: string;
+  useMobileUI?: boolean;
 }
 
 export class ResultBox extends React.Component<ResultBoxProps> {
@@ -114,9 +116,11 @@ export class ResultBox extends React.Component<ResultBoxProps> {
       onFocus,
       onBlur,
       borderMode,
+      useMobileUI,
       ...rest
     } = this.props;
     const isFocused = this.state.isFocused;
+    const mobileUI = useMobileUI && isMobile();
 
     return (
       <div
@@ -125,6 +129,7 @@ export class ResultBox extends React.Component<ResultBoxProps> {
           'is-disabled': disabled,
           'is-error': hasError,
           'is-clickable': onResultClick,
+          'is-mobile': mobileUI,
           [`ResultBox--border${ucFirst(borderMode)}`]: borderMode
         })}
         onClick={onResultClick}
@@ -147,7 +152,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')}
@@ -180,6 +187,11 @@ export class ResultBox extends React.Component<ResultBoxProps> {
             <Icon icon="close" className="icon" />
           </a>
         ) : null}
+        {!allowInput && mobileUI ? (
+          <span className={cx('ResultBox-arrow')}>
+            <Icon icon="caret" className="icon" />
+          </span>
+        ) : null}
       </div>
     );
   }

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

@@ -37,6 +37,7 @@ import Spinner from './Spinner';
 import {Option, Options} from '../Schema';
 import {RemoteOptionsProps, withRemoteConfig} from './WithRemoteConfig';
 import Picker from './Picker';
+import PopUp from './PopUp';
 
 export {Option, Options};
 
@@ -923,23 +924,13 @@ export class Select extends React.Component<SelectProps, SelectState> {
       labelField: 'label',
       options: filtedOptions
     };
-    const menu = mobileUI ? (
-      <Picker
-        className={cx('PickerColumns-column', mobileClassName)}
-        labelField='label'
-        value={value[0]}
-        translate={this.props.translate}
-        locale={this.props.locale}
-        columns={[column]}
-        onChange={checkAll ? noop : this.handlePickerChange}
-        onClose={this.close}
-        onConfirm={this.confirm}
-      />
-    ) : (
+    const menu = (
       <div
         ref={this.menu}
         className={cx('Select-menu', {
-          'Select--longlist': filtedOptions.length && filtedOptions.length > 100
+          'Select--longlist':
+            filtedOptions.length && filtedOptions.length > 100,
+          'is-mobile': mobileUI
         })}
       >
         {searchable ? (
@@ -1021,8 +1012,16 @@ export class Select extends React.Component<SelectProps, SelectState> {
         )}
       </div>
     );
-
-    return (
+    return mobileUI ? (
+      <PopUp
+        className={cx(`Select-popup`)}
+        container={popOverContainer}
+        isShow={this.state.isOpen}
+        onHide={this.close}
+      >
+        {menu}
+      </PopUp>
+    ) : (
       <Overlay
         container={popOverContainer || this.getTarget}
         target={this.getTarget}
@@ -1031,11 +1030,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       >
         <PopOver
           overlay
-          className={cx(
-            'Select-popover',
-            popoverClassName,
-            mobileUI ? 'PopOver-isMobile' : ''
-          )}
+          className={cx('Select-popover')}
           style={{
             minWidth: this.target ? this.target.offsetWidth : 'auto'
           }}
@@ -1061,13 +1056,14 @@ export class Select extends React.Component<SelectProps, SelectState> {
       labelField,
       disabled,
       checkAll,
-      borderMode
+      borderMode,
+      useMobileUI
     } = this.props;
 
     const selection = this.state.selection;
     const inputValue = this.state.inputValue;
     const resetValue = this.props.resetValue;
-
+    const mobileUI = useMobileUI && isMobile();
     return (
       <Downshift
         selectedItem={selection}
@@ -1101,6 +1097,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                   'is-opened': isOpen,
                   'is-focused': this.state.isFocused,
                   'is-disabled': disabled,
+                  'is-mobile': mobileUI,
                   [`Select--border${ucFirst(borderMode)}`]: borderMode
                 },
                 className

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