amis-ui 1.0.0-beta.0

package/src/components/Rating.tsx

@@ -0,0 +1,421 @@
+/**
+ * @file Rating
+ * @description
+ * @author fex
+ */
+
+import React from 'react';
+import {ClassNamesFn, themeable} from 'amis-core';
+import {isObject} from 'amis-core';
+import {validations} from 'amis-core';
+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 | React.ReactNode;
+  className?: string;
+  charClassName?: string;
+  textClassName?: string;
+  onChange?: (value: number) => void;
+  onHoverChange?: (value: number) => void;
+  value: number;
+  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;
+}
+
+export class Rating extends React.Component<RatingProps, any> {
+  static defaultProps = {
+    containerClass: 'rating',
+    readOnly: false,
+    half: true,
+    allowClear: true,
+    value: 0,
+    count: 5,
+    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: [],
+      isClear: false,
+      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);
+    this.getStars = this.getStars.bind(this);
+    this.moreThanHalf = this.moreThanHalf.bind(this);
+    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() {
+    const {value} = this.state;
+    this.setState({
+      stars: this.getStars(value)
+    });
+
+    this.getShowColorAndText(value);
+  }
+
+  componentDidUpdate(prevProps: RatingProps) {
+    const props = this.props;
+
+    if (props.value !== prevProps.value) {
+      this.setState(
+        {
+          stars: this.getStars(props.value),
+          value: props.value,
+          halfStar: {
+            at: Math.floor(props.value),
+            hidden: props.half && props.value % 1 < 0.5
+          }
+        },
+        () => {
+          this.getShowColorAndText(props.value);
+        }
+      );
+    }
+  }
+
+  sortKeys(map: {[propName: number]: string}) {
+    // 需验证 key 是否是数字，需要过滤掉非数字key，如 $$id
+    return Object.keys(map)
+      .filter(item => validations.isNumeric({}, item))
+      .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]];
+
+      // 取最大 key 的颜色，避免如下情况：colors 只设置了 1-4，value 为 5，导致取不到颜色而无法显示
+      const lastColor = keys.length && colors[keys[keys.length - 1]];
+
+      this.setState({
+        showColor: showColor || lastColor || ''
+      });
+    } 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];
+
+      this.setState({
+        showText: showText || ''
+      });
+    }
+  }
+
+  getRate() {
+    let stars;
+    const {value} = this.state;
+    const {half} = this.props;
+    if (half) {
+      stars = Math.floor(value);
+    } else {
+      stars = Math.round(value);
+    }
+    return stars;
+  }
+
+  getStars(activeCount?: number) {
+    if (typeof activeCount === 'undefined') {
+      activeCount = this.getRate();
+    }
+    let stars = [];
+    const {count} = this.props;
+    for (let i = 0; i < count; i++) {
+      stars.push({
+        active: i <= activeCount - 1
+      });
+    }
+    return stars;
+  }
+
+  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;
+
+    const {readOnly, half} = this.props;
+
+    if (readOnly) return;
+
+    if (half) {
+      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: {
+          at: index,
+          hidden: isAtHalf
+        }
+      });
+    } else {
+      index = index + 1;
+      this.onHoverChange(index);
+      this.getShowColorAndText(index);
+    }
+    this.setState({
+      stars: this.getStars(index)
+    });
+  }
+
+  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,
+        hoverValue: null
+      });
+
+    if (half) {
+      this.setState({
+        halfStar: {
+          at: Math.floor(value),
+          hidden: value % 1 === 0 // check value is decimal or not
+        }
+      });
+    }
+    this.setState({
+      stars: this.getStars(),
+      hoverValue: null
+    });
+    this.getShowColorAndText(value);
+  }
+
+  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 value;
+    if (half) {
+      const isAtHalf = this.moreThanHalf(event, index);
+      if (isAtHalf) index = index + 1;
+      value = isAtHalf ? index : index + 0.5;
+      this.setState({
+        halfStar: {
+          at: index,
+          hidden: isAtHalf
+        }
+      });
+    } else {
+      value = index = index + 1;
+    }
+
+    const isClear = allowClear && value === this.state.value;
+    if (isClear) value = index = 0;
+    this.setState({
+      value,
+      stars: this.getStars(index),
+      isClear
+    });
+
+    this.getShowColorAndText(value);
+
+    onChange && onChange(value);
+  }
+
+  renderStars() {
+    const {halfStar, stars, showColor} = this.state;
+    const {
+      inactiveColor,
+      char,
+      half,
+      disabled,
+      readOnly,
+      charClassName,
+      classnames: cx
+    } = this.props;
+
+    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() {
+    const {className, textPosition, classnames: cx} = this.props;
+
+    return (
+      <div className={cx('Rating', className)}>
+        {textPosition === 'left' ? (
+          <>
+            {this.renderText()}
+            {this.renderStars()}
+          </>
+        ) : (
+          <>
+            {this.renderStars()}
+            {this.renderText()}
+          </>
+        )}
+      </div>
+    );
+  }
+}
+
+export default themeable(Rating);

package/src/components/ResultBox.tsx

@@ -0,0 +1,224 @@
+import {ThemeProps, themeable} from 'amis-core';
+import React from 'react';
+import {InputBoxProps} from './InputBox';
+import {uncontrollable} from 'uncontrollable';
+import {Icon} from './icons';
+import Input from './Input';
+import {autobind, isMobile, ucFirst} from 'amis-core';
+import {LocaleProps, localeable} from 'amis-core';
+import isPlainObject from 'lodash/isPlainObject';
+
+export interface ResultBoxProps
+  extends ThemeProps,
+    LocaleProps,
+    Omit<InputBoxProps, 'result' | 'prefix' | 'onChange' | 'translate'> {
+  onChange?: (value: string) => void;
+  onResultClick?: (e: React.MouseEvent<HTMLElement>) => void;
+  result?: Array<any> | any;
+  itemRender: (value: any) => JSX.Element | string;
+  onResultChange?: (value: Array<any>) => void;
+  onClear?: (e: React.MouseEvent<HTMLElement>) => void;
+  allowInput?: boolean;
+  inputPlaceholder: string;
+  useMobileUI?: boolean;
+  hasDropDownArrow?: boolean;
+}
+
+export class ResultBox extends React.Component<ResultBoxProps> {
+  static defaultProps: Pick<
+    ResultBoxProps,
+    'clearable' | 'placeholder' | 'itemRender' | 'inputPlaceholder'
+  > = {
+    clearable: false,
+    placeholder: 'placeholder.noData',
+    inputPlaceholder: 'placeholder.enter',
+    itemRender: (option: any) => (
+      <span>{`${option.scopeLabel || ''}${option.label}`}</span>
+    )
+  };
+
+  state = {
+    isFocused: false
+  };
+
+  inputRef: React.RefObject<any> = React.createRef();
+
+  focus() {
+    this.inputRef.current?.focus();
+  }
+
+  blur() {
+    this.inputRef.current?.blur();
+  }
+
+  @autobind
+  clearValue(e: React.MouseEvent<any>) {
+    e.preventDefault();
+    this.props.onClear && this.props.onClear(e);
+    this.props.onResultChange && this.props.onResultChange([]);
+  }
+
+  @autobind
+  handleFocus(e: any) {
+    const onFocus = this.props.onFocus;
+    onFocus && onFocus(e);
+    this.setState({
+      isFocused: true
+    });
+  }
+
+  @autobind
+  handleBlur(e: any) {
+    const onBlur = this.props.onBlur;
+    onBlur && onBlur(e);
+    this.setState({
+      isFocused: false
+    });
+  }
+
+  @autobind
+  removeItem(e: React.MouseEvent<HTMLElement>) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    const {result, onResultChange} = this.props;
+    const index = parseInt(e.currentTarget.getAttribute('data-index')!, 10);
+    const newResult = Array.isArray(result) ? result.concat() : [];
+    newResult.splice(index, 1);
+    onResultChange && onResultChange(newResult);
+  }
+
+  @autobind
+  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const {onChange} = this.props;
+    onChange?.(e.currentTarget.value);
+  }
+
+  render() {
+    const {
+      className,
+      classnames: cx,
+      classPrefix,
+      clearable,
+      disabled,
+      hasError,
+      result,
+      value,
+      placeholder,
+      children,
+      itemRender,
+      allowInput,
+      inputPlaceholder,
+      onResultChange,
+      onChange,
+      onResultClick,
+      translate: __,
+      locale,
+      onKeyPress,
+      onFocus,
+      onBlur,
+      borderMode,
+      useMobileUI,
+      hasDropDownArrow,
+      onClear,
+      ...rest
+    } = this.props;
+    const isFocused = this.state.isFocused;
+    const mobileUI = useMobileUI && isMobile();
+    return (
+      <div
+        className={cx('ResultBox', className, {
+          'is-focused': isFocused,
+          'is-disabled': disabled,
+          'is-error': hasError,
+          'is-clickable': onResultClick,
+          'is-clearable': clearable,
+          'is-mobile': mobileUI,
+          'is-group': Array.isArray(result),
+          [`ResultBox--border${ucFirst(borderMode)}`]: borderMode
+        })}
+        onClick={onResultClick}
+        tabIndex={!allowInput && !disabled && onFocus ? 0 : -1}
+        onKeyPress={allowInput ? undefined : onKeyPress}
+        onFocus={allowInput ? undefined : onFocus}
+        onBlur={allowInput ? undefined : onBlur}
+      >
+        {Array.isArray(result) && result.length ? (
+          result.map((item, index) => (
+            <div className={cx('ResultBox-value')} key={index}>
+              <span className={cx('ResultBox-valueLabel')}>
+                {itemRender(item)}
+              </span>
+              <a data-index={index} onClick={this.removeItem}>
+                <Icon icon="close" className="icon" />
+              </a>
+            </div>
+          ))
+        ) : result && !Array.isArray(result) ? (
+          <span className={cx('ResultBox-singleValue')}>
+            {isPlainObject(result) ? itemRender(result) : result}
+          </span>
+        ) : allowInput && !disabled ? null : (
+          <span className={cx('ResultBox-placeholder')}>
+            {__(placeholder || 'placeholder.noData')}
+          </span>
+        )}
+
+        {allowInput && !disabled ? (
+          <Input
+            {...rest}
+            onKeyPress={onKeyPress}
+            ref={this.inputRef}
+            value={value || ''}
+            onChange={this.handleChange}
+            placeholder={__(
+              Array.isArray(result) && result.length
+                ? inputPlaceholder
+                : result
+                ? ''
+                : placeholder
+            )}
+            onFocus={this.handleFocus}
+            onBlur={this.handleBlur}
+          />
+        ) : null}
+
+        {children}
+
+        {clearable &&
+        !disabled &&
+        (Array.isArray(result) ? result.length : result) ? (
+          <a
+            onClick={this.clearValue}
+            className={cx('ResultBox-clear', {
+              'ResultBox-clear-with-arrow': hasDropDownArrow
+            })}
+          >
+            <div className={cx('ResultBox-clear-wrap')}>
+              <Icon icon="input-clear" className="icon" />
+            </div>
+          </a>
+        ) : null}
+        {hasDropDownArrow && !mobileUI && (
+          <span className={cx('ResultBox-pc-arrow')}>
+            <Icon icon="right-arrow-bold" className="icon" />
+          </span>
+        )}
+        {!allowInput && mobileUI ? (
+          <span className={cx('ResultBox-arrow')}>
+            <Icon icon="caret" className="icon" />
+          </span>
+        ) : null}
+      </div>
+    );
+  }
+}
+
+export default themeable(
+  localeable(
+    uncontrollable(ResultBox, {
+      value: 'onChange',
+      result: 'onResultChange'
+    })
+  )
+);