amis-ui 1.0.0-beta.0

package/dist/components/Rating.d.ts

@@ -0,0 +1,252 @@
+/**
+ * @file Rating
+ * @description
+ * @author fex
+ */
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import { ClassNamesFn } from 'amis-core';
+export declare 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 declare class Rating extends React.Component<RatingProps, any> {
+    static defaultProps: {
+        containerClass: string;
+        readOnly: boolean;
+        half: boolean;
+        allowClear: boolean;
+        value: number;
+        count: number;
+        char: JSX.Element;
+        colors: {
+            '2': string;
+            '3': string;
+            '5': string;
+        };
+        textPosition: textPositionType;
+    };
+    starsNode: Record<string, any>;
+    constructor(props: RatingProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: RatingProps): void;
+    sortKeys(map: {
+        [propName: number]: string;
+    }): string[];
+    getShowColorAndText(value: number): void;
+    getRate(): number;
+    getStars(activeCount?: number): {
+        active: boolean;
+    }[];
+    saveRef(index: number): (node: React.ReactNode) => void;
+    mouseOver(event: React.ChangeEvent<any>, index: number): void;
+    onHoverChange(value: number): void;
+    moreThanHalf(event: any, index: number): boolean;
+    mouseLeave(): void;
+    handleStarMouseLeave(event: any, index: number): void;
+    handleClick(event: React.ChangeEvent<any>, index: number): void;
+    renderStars(): JSX.Element;
+    renderText(): JSX.Element | null;
+    render(): JSX.Element;
+}
+declare const _default: {
+    new (props: Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "style" | "disabled" | "id" | "onChange" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & Partial<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "value" | "char" | "readOnly" | "half" | "count" | "containerClass" | "allowClear" | "colors" | "textPosition">> & Partial<Pick<{
+        containerClass: string;
+        readOnly: boolean;
+        half: boolean;
+        allowClear: boolean;
+        value: number;
+        count: number;
+        char: JSX.Element;
+        colors: {
+            '2': string;
+            '3': string;
+            '5': string;
+        };
+        textPosition: textPositionType;
+    }, never>> & import("amis-core/dist/theme").ThemeOutterProps): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "style" | "disabled" | "id" | "onChange" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & Partial<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "value" | "char" | "readOnly" | "half" | "count" | "containerClass" | "allowClear" | "colors" | "textPosition">> & Partial<Pick<{
+            containerClass: string;
+            readOnly: boolean;
+            half: boolean;
+            allowClear: boolean;
+            value: number;
+            count: number;
+            char: JSX.Element;
+            colors: {
+                '2': string;
+                '3': string;
+                '5': string;
+            };
+            textPosition: textPositionType;
+        }, never>> & import("amis-core/dist/theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "style" | "disabled" | "id" | "onChange" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & Partial<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "value" | "char" | "readOnly" | "half" | "count" | "containerClass" | "allowClear" | "colors" | "textPosition">> & Partial<Pick<{
+            containerClass: string;
+            readOnly: boolean;
+            half: boolean;
+            allowClear: boolean;
+            value: number;
+            count: number;
+            char: JSX.Element;
+            colors: {
+                '2': string;
+                '3': string;
+                '5': string;
+            };
+            textPosition: textPositionType;
+        }, never>> & import("amis-core/dist/theme").ThemeOutterProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "style" | "disabled" | "id" | "onChange" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & Partial<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "value" | "char" | "readOnly" | "half" | "count" | "containerClass" | "allowClear" | "colors" | "textPosition">> & Partial<Pick<{
+            containerClass: string;
+            readOnly: boolean;
+            half: boolean;
+            allowClear: boolean;
+            value: number;
+            count: number;
+            char: JSX.Element;
+            colors: {
+                '2': string;
+                '3': string;
+                '5': string;
+            };
+            textPosition: textPositionType;
+        }, never>> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "style" | "disabled" | "id" | "onChange" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & Partial<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "value" | "char" | "readOnly" | "half" | "count" | "containerClass" | "allowClear" | "colors" | "textPosition">> & Partial<Pick<{
+            containerClass: string;
+            readOnly: boolean;
+            half: boolean;
+            allowClear: boolean;
+            value: number;
+            count: number;
+            char: JSX.Element;
+            colors: {
+                '2': string;
+                '3': string;
+                '5': string;
+            };
+            textPosition: textPositionType;
+        }, never>> & import("amis-core/dist/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "style" | "disabled" | "id" | "onChange" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & Partial<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "value" | "char" | "readOnly" | "half" | "count" | "containerClass" | "allowClear" | "colors" | "textPosition">> & Partial<Pick<{
+            containerClass: string;
+            readOnly: boolean;
+            half: boolean;
+            allowClear: boolean;
+            value: number;
+            count: number;
+            char: JSX.Element;
+            colors: {
+                '2': string;
+                '3': string;
+                '5': string;
+            };
+            textPosition: textPositionType;
+        }, never>> & import("amis-core/dist/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "style" | "disabled" | "id" | "onChange" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & Partial<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "value" | "char" | "readOnly" | "half" | "count" | "containerClass" | "allowClear" | "colors" | "textPosition">> & Partial<Pick<{
+            containerClass: string;
+            readOnly: boolean;
+            half: boolean;
+            allowClear: boolean;
+            value: number;
+            count: number;
+            char: JSX.Element;
+            colors: {
+                '2': string;
+                '3': string;
+                '5': string;
+            };
+            textPosition: textPositionType;
+        }, never>> & import("amis-core/dist/theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "style" | "disabled" | "id" | "onChange" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & Partial<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "value" | "char" | "readOnly" | "half" | "count" | "containerClass" | "allowClear" | "colors" | "textPosition">> & Partial<Pick<{
+            containerClass: string;
+            readOnly: boolean;
+            half: boolean;
+            allowClear: boolean;
+            value: number;
+            count: number;
+            char: JSX.Element;
+            colors: {
+                '2': string;
+                '3': string;
+                '5': string;
+            };
+            textPosition: textPositionType;
+        }, never>> & import("amis-core/dist/theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "style" | "disabled" | "id" | "onChange" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & Partial<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "value" | "char" | "readOnly" | "half" | "count" | "containerClass" | "allowClear" | "colors" | "textPosition">> & Partial<Pick<{
+            containerClass: string;
+            readOnly: boolean;
+            half: boolean;
+            allowClear: boolean;
+            value: number;
+            count: number;
+            char: JSX.Element;
+            colors: {
+                '2': string;
+                '3': string;
+                '5': string;
+            };
+            textPosition: textPositionType;
+        }, never>> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "style" | "disabled" | "id" | "onChange" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & Partial<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "value" | "char" | "readOnly" | "half" | "count" | "containerClass" | "allowClear" | "colors" | "textPosition">> & Partial<Pick<{
+            containerClass: string;
+            readOnly: boolean;
+            half: boolean;
+            allowClear: boolean;
+            value: number;
+            count: number;
+            char: JSX.Element;
+            colors: {
+                '2': string;
+                '3': string;
+                '5': string;
+            };
+            textPosition: textPositionType;
+        }, never>> & import("amis-core/dist/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<typeof Rating>;
+} & import("hoist-non-react-statics").NonReactStatics<typeof Rating, {}> & {
+    ComposedComponent: typeof Rating;
+};
+export default _default;

package/dist/components/Rating.js

@@ -0,0 +1,324 @@
+/**
+ * amis-ui v1.0.0-beta.0
+ * Copyright 2018-2022 fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var amisCore = require('amis-core');
+var icons = require('./icons.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * @file Rating
+ * @description
+ * @author fex
+ */
+var Rating = /** @class */ (function (_super) {
+    tslib.__extends(Rating, _super);
+    function Rating(props) {
+        var _this = _super.call(this, props) || this;
+        _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);
+        return _this;
+    }
+    Rating.prototype.componentDidMount = function () {
+        var value = this.state.value;
+        this.setState({
+            stars: this.getStars(value)
+        });
+        this.getShowColorAndText(value);
+    };
+    Rating.prototype.componentDidUpdate = function (prevProps) {
+        var _this = this;
+        var 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
+                }
+            }, function () {
+                _this.getShowColorAndText(props.value);
+            });
+        }
+    };
+    Rating.prototype.sortKeys = function (map) {
+        // 需验证 key 是否是数字，需要过滤掉非数字key，如 $$id
+        return Object.keys(map)
+            .filter(function (item) { return amisCore.validations.isNumeric({}, item); })
+            .sort(function (a, b) { return Number(a) - Number(b); });
+    };
+    Rating.prototype.getShowColorAndText = function (value) {
+        var _a = this.props, colors = _a.colors, texts = _a.texts, half = _a.half;
+        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') {
+            var keys = this.sortKeys(colors);
+            var showKey = keys.filter(function (item) { return Number(item) < value; }).length;
+            var showColor = keys[showKey] !== undefined && colors[keys[showKey]];
+            // 取最大 key 的颜色，避免如下情况：colors 只设置了 1-4，value 为 5，导致取不到颜色而无法显示
+            var 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 && amisCore.isObject(texts)) {
+            var keys = this.sortKeys(texts);
+            var showKey = keys.filter(function (item) { return Number(item) < value; }).length;
+            var showText = keys[showKey] !== undefined &&
+                texts[keys[showKey]];
+            this.setState({
+                showText: showText || ''
+            });
+        }
+    };
+    Rating.prototype.getRate = function () {
+        var stars;
+        var value = this.state.value;
+        var half = this.props.half;
+        if (half) {
+            stars = Math.floor(value);
+        }
+        else {
+            stars = Math.round(value);
+        }
+        return stars;
+    };
+    Rating.prototype.getStars = function (activeCount) {
+        if (typeof activeCount === 'undefined') {
+            activeCount = this.getRate();
+        }
+        var stars = [];
+        var count = this.props.count;
+        for (var i = 0; i < count; i++) {
+            stars.push({
+                active: i <= activeCount - 1
+            });
+        }
+        return stars;
+    };
+    Rating.prototype.saveRef = function (index) {
+        var _this = this;
+        return function (node) {
+            _this.starsNode[String(index)] = node;
+        };
+    };
+    Rating.prototype.mouseOver = function (event, index) {
+        var isClear = this.state.isClear;
+        if (isClear)
+            return;
+        var _a = this.props, readOnly = _a.readOnly, half = _a.half;
+        if (readOnly)
+            return;
+        if (half) {
+            var isAtHalf = this.moreThanHalf(event, index);
+            var 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)
+        });
+    };
+    Rating.prototype.onHoverChange = function (value) {
+        var onHoverChange = this.props.onHoverChange;
+        var hoverValue = this.state.hoverValue;
+        if (!hoverValue || (hoverValue && hoverValue !== value)) {
+            this.setState({
+                hoverValue: value
+            });
+            onHoverChange && onHoverChange(value);
+        }
+    };
+    Rating.prototype.moreThanHalf = function (event, index) {
+        var star = this.starsNode[index];
+        var leftPos = star.getBoundingClientRect().left;
+        return event.clientX - leftPos > star.clientWidth / 2;
+    };
+    Rating.prototype.mouseLeave = function () {
+        var _a = this.state, value = _a.value, isClear = _a.isClear;
+        var _b = this.props, half = _b.half, readOnly = _b.readOnly;
+        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);
+    };
+    Rating.prototype.handleStarMouseLeave = function (event, index) {
+        var star = this.starsNode[index];
+        var leftSideX = star.getBoundingClientRect().left;
+        var isClear = this.state.isClear;
+        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
+                }
+            });
+        }
+    };
+    Rating.prototype.handleClick = function (event, index) {
+        var _a = this.props, half = _a.half, readOnly = _a.readOnly, onChange = _a.onChange, allowClear = _a.allowClear;
+        if (readOnly)
+            return;
+        var value;
+        if (half) {
+            var 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;
+        }
+        var isClear = allowClear && value === this.state.value;
+        if (isClear)
+            value = index = 0;
+        this.setState({
+            value: value,
+            stars: this.getStars(index),
+            isClear: isClear
+        });
+        this.getShowColorAndText(value);
+        onChange && onChange(value);
+    };
+    Rating.prototype.renderStars = function () {
+        var _this = this;
+        var _a = this.state, halfStar = _a.halfStar, stars = _a.stars, showColor = _a.showColor;
+        var _b = this.props, inactiveColor = _b.inactiveColor, char = _b.char, half = _b.half, disabled = _b.disabled, readOnly = _b.readOnly, charClassName = _b.charClassName, cx = _b.classnames;
+        return (React__default["default"].createElement("ul", { onMouseLeave: this.mouseLeave }, stars.map(function (star, i) {
+            var isThisHalf = half && !halfStar.hidden && halfStar.at === i;
+            return (React__default["default"].createElement("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: function (e) { return _this.mouseOver(e, i); }, onMouseMove: function (e) { return _this.mouseOver(e, i); }, onClick: function (e) { return _this.handleClick(e, i); }, onMouseLeave: function (e) { return _this.handleStarMouseLeave(e, i); } },
+                isThisHalf && (React__default["default"].createElement("div", { className: cx('Rating-star-half'), style: {
+                        color: showColor
+                    } }, char)),
+                char));
+        })));
+    };
+    Rating.prototype.renderText = function () {
+        var _a;
+        var showText = this.state.showText;
+        var _b = this.props, textClassName = _b.textClassName, textPosition = _b.textPosition, cx = _b.classnames;
+        if (!showText)
+            return null;
+        return (React__default["default"].createElement("span", { className: cx('Rating-text', textClassName, (_a = {},
+                _a["Rating-text--".concat(textPosition === 'left' ? 'left' : 'right')] = textPosition,
+                _a)) }, showText));
+    };
+    Rating.prototype.render = function () {
+        var _a = this.props, className = _a.className, textPosition = _a.textPosition, cx = _a.classnames;
+        return (React__default["default"].createElement("div", { className: cx('Rating', className) }, textPosition === 'left' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            this.renderText(),
+            this.renderStars())) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+            this.renderStars(),
+            this.renderText()))));
+    };
+    Rating.defaultProps = {
+        containerClass: 'rating',
+        readOnly: false,
+        half: true,
+        allowClear: true,
+        value: 0,
+        count: 5,
+        char: React__default["default"].createElement(icons.Icon, { icon: "star", className: "icon" }),
+        colors: {
+            '2': '#abadb1',
+            '3': '#787b81',
+            '5': '#ffa900'
+        },
+        textPosition: 'right'
+    };
+    return Rating;
+}(React__default["default"].Component));
+var Rating$1 = amisCore.themeable(Rating);
+
+exports.Rating = Rating;
+exports["default"] = Rating$1;