amis 1.5.6-beta.5 → 1.5.6

package/src/components/Card.tsx

@@ -176,7 +176,7 @@ export class Card extends React.Component<CardProps> {
             </div>
           </div>
         ) : (
-          <div>
+          <>
             {heading}
             {body ? (
               <div className={cx('Card-body', bodyClassName)}>{body}</div>
@@ -193,7 +193,7 @@ export class Card extends React.Component<CardProps> {
                 ) : null}
               </div>
             ) : null}
-          </div>
+          </>
         )}
       </div>
     );

package/src/components/Collapse.tsx

@@ -79,7 +79,7 @@ export class Collapse extends React.Component<CollapseProps, CollapseState> {
     super(props);
 
     this.toggleCollapsed = this.toggleCollapsed.bind(this);
-    this.state.collapsed = !!props.collapsed;
+    this.state.collapsed = props.collapsable ? !!props.collapsed : false;
   }
 
   static getDerivedStateFromProps(

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

@@ -70,6 +70,7 @@ import ExpandAltIcon from '../icons/expand-alt.svg';
 import CompressAltIcon from '../icons/compress-alt.svg';
 import TransparentIcon from '../icons/transparent.svg';
 import LoadingOutline from '../icons/loading-outline.svg';
+import Star from '../icons/star.svg';
 import AlertSuccess from '../icons/alert-success.svg';
 import AlertInfo from '../icons/alert-info.svg';
 import AlertWarning from '../icons/alert-warning.svg';
@@ -170,6 +171,7 @@ registerIcon('expand-alt', ExpandAltIcon);
 registerIcon('compress-alt', CompressAltIcon);
 registerIcon('transparent', TransparentIcon);
 registerIcon('loading-outline', LoadingOutline);
+registerIcon('star', Star);
 registerIcon('alert-success', AlertSuccess);
 registerIcon('alert-info', AlertInfo);
 registerIcon('alert-warning', AlertWarning);

package/src/icons/star.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="11px" viewBox="0 0 12 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>星星</title>
+    <g id="页面-1" stroke-width="1" fill-rule="evenodd">
+        <g id="画板备份-8" transform="translate(-453.000000, -354.000000)">
+            <g id="编组" transform="translate(451.000000, 352.000000)">
+                <rect id="矩形" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
+                <path d="M5.991,5.57 L3.50612104,5.93019955 C2.95954884,6.00942879 2.58069251,6.51674109 2.65992175,7.0633133 C2.69148792,7.28107625 2.79399678,7.48234825 2.95156285,7.63593881 L4.75,9.389 L4.75,9.389 L4.32487658,11.8655653 C4.23143888,12.4098886 4.59695386,12.9268961 5.14127715,13.0203338 C5.35808617,13.0575509 5.58111746,13.0222392 5.77582605,12.9198682 L7.999,11.751 L7.999,11.751 L10.223309,12.9201739 C10.712173,13.1771377 11.3167859,12.9891455 11.5737498,12.5002815 C11.6760846,12.3055935 11.7113789,12.0825978 11.6741677,11.8658233 L11.249,9.389 L11.249,9.389 L13.0473242,7.63660227 C13.4428666,7.25116142 13.4510555,6.6180494 13.0656146,6.22250699 C12.9120633,6.06493147 12.7108304,5.96239489 12.4930948,5.93078419 L10.008,5.57 L10.008,5.57 L8.89657099,3.31725295 C8.65221378,2.82196717 8.05261467,2.61854938 7.5573289,2.86290659 C7.36008347,2.96022079 7.20042315,3.11984957 7.10306997,3.31707577 L5.991,5.57 L5.991,5.57 Z" id="图标-填色"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/renderers/Form/InputRating.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {FormItem, FormControlProps, FormBaseControl} from './Item';
-import Rating from '../../components/Rating';
+import Rating, {textPositionType} from '../../components/Rating';
 
 /**
  * Rating
@@ -23,6 +23,50 @@ export interface RatingControlSchema extends FormBaseControl {
    * 是否允许再次点击后清除
    */
   allowClear?: boolean;
+
+  /**
+   * 是否只读
+   */
+  readonly?: boolean;
+
+  /**
+   * 星星被选中的颜色
+   */
+  // colors?: string | {
+  //   [propName: string | number]: string;
+  // };
+
+  colors?: string | {[propName: string]: string};
+
+  /**
+   * 未被选中的星星的颜色
+   */
+  inactiveColor?: string;
+
+  /**
+   * 星星被选中时的提示文字
+   */
+  texts?: {[propName: string]: string};
+
+  /**
+   * 文字的位置
+   */
+  textPosition?: textPositionType;
+
+  /**
+   * 自定义字符
+   */
+  char?: string;
+
+  /**
+   * 自定义字符类名
+   */
+  charClassName?: string;
+
+  /**
+   * 自定义文字类名
+   */
+  textClassName?: string;
 }
 
 export interface RatingProps extends FormControlProps {
@@ -49,8 +93,15 @@ export default class RatingControl extends React.Component<RatingProps, any> {
       readOnly,
       disabled,
       onChange,
-      size,
+      onHoverChange,
       allowClear,
+      char,
+      inactiveColor,
+      colors,
+      texts,
+      charClassName,
+      textClassName,
+      textPosition,
       classnames: cx
     } = this.props;
 
@@ -64,7 +115,19 @@ export default class RatingControl extends React.Component<RatingProps, any> {
           half={half}
           allowClear={allowClear}
           readOnly={readOnly}
-          onChange={(value: any) => onChange(value)}
+          char={char}
+          inactiveColor={inactiveColor}
+          colors={colors}
+          texts={texts}
+          charClassName={charClassName}
+          textClassName={textClassName}
+          textPosition={textPosition}
+          onChange={(value: number) => {
+            onChange && onChange(value);
+          }}
+          onHoverChange={(value: number) => {
+            onHoverChange && onHoverChange(value);
+          }}
         />
       </div>
     );

package/src/renderers/Json.tsx

@@ -94,6 +94,11 @@ export class JSONField extends React.Component<JSONProps, object> {
     let data = value;
     if (source !== undefined && isPureVariable(source)) {
       data = resolveVariableAndFilter(source, this.props.data, '| raw');
+    } else if (typeof value === 'string') {
+      // 尝试解析 json
+      try {
+        data = JSON.parse(value);
+      } catch (e) {}
     }
 
     let jsonThemeValue = jsonTheme;