amis-ui 3.1.0 → 3.2.0

package/lib/components/Range.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */
 
@@ -118,18 +118,40 @@ var HandleItem = /** @class */ (function (_super) {
             labelActive: false
         });
     };
+    HandleItem.prototype.onTouchStart = function () {
+        this.setState({
+            isDrag: true,
+            labelActive: true
+        });
+    };
+    HandleItem.prototype.onTouchMove = function (e) {
+        var isDrag = this.state.isDrag;
+        var _a = this.props.type, type = _a === void 0 ? 'min' : _a;
+        if (!isDrag) {
+            return;
+        }
+        this.props.onChange(e.touches[0].clientX, type);
+    };
+    HandleItem.prototype.onTouchEnd = function () {
+        this.setState({
+            labelActive: false
+        });
+    };
     HandleItem.prototype.render = function () {
         var _this = this;
-        var _a = this.props, cx = _a.classnames, disabled = _a.disabled, value = _a.value, min = _a.min, max = _a.max, tooltipVisible = _a.tooltipVisible, tipFormatter = _a.tipFormatter, unit = _a.unit, _b = _a.tooltipPlacement, tooltipPlacement = _b === void 0 ? 'auto' : _b;
+        var _a = this.props, cx = _a.classnames, disabled = _a.disabled, value = _a.value, min = _a.min, max = _a.max, tooltipVisible = _a.tooltipVisible, tipFormatter = _a.tipFormatter, unit = _a.unit, _b = _a.tooltipPlacement, tooltipPlacement = _b === void 0 ? 'auto' : _b, useMobileUI = _a.useMobileUI;
         var _c = this.state, isDrag = _c.isDrag, labelActive = _c.labelActive;
         var style = {
             left: valueToOffsetLeft(value, min, max),
             zIndex: isDrag ? 2 : 1
         };
+        var mobileUI = useMobileUI && amisCore.isMobile();
         return disabled ? (React__default["default"].createElement("div", { className: cx('InputRange-handle'), style: style },
             React__default["default"].createElement("div", { className: cx('InputRange-handle-icon') },
-                React__default["default"].createElement(icons.Icon, { icon: "slider-handle", className: "icon" })))) : (React__default["default"].createElement("div", { className: cx('InputRange-handle'), style: style, ref: this.handleRef },
-            React__default["default"].createElement("div", { className: cx(isDrag ? 'InputRange-handle-drage' : 'InputRange-handle-icon'), onMouseDown: this.onMouseDown, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave },
+                React__default["default"].createElement(icons.Icon, { icon: "slider-handle", className: "icon" })))) : (React__default["default"].createElement("div", { className: cx('InputRange-handle', {
+                'is-mobile': mobileUI
+            }), style: style, ref: this.handleRef },
+            React__default["default"].createElement("div", { className: cx(isDrag ? 'InputRange-handle-drage' : 'InputRange-handle-icon'), onMouseDown: this.onMouseDown, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd },
                 React__default["default"].createElement(icons.Icon, { icon: "slider-handle", className: "icon" })),
             React__default["default"].createElement(amisCore.Overlay, { placement: tooltipPlacement, target: function () { return ReactDOM.findDOMNode(_this); }, container: function () { return ReactDOM.findDOMNode(_this); }, rootClose: false, show: true },
                 React__default["default"].createElement(Label, { show: labelActive, classPrefix: this.props.classPrefix, classnames: cx, value: value, tooltipVisible: tooltipVisible, tipFormatter: tipFormatter, unit: unit, placement: tooltipPlacement }))));
@@ -164,6 +186,24 @@ var HandleItem = /** @class */ (function (_super) {
         tslib.__metadata("design:paramtypes", []),
         tslib.__metadata("design:returntype", void 0)
     ], HandleItem.prototype, "onMouseLeave", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], HandleItem.prototype, "onTouchStart", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], HandleItem.prototype, "onTouchMove", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], HandleItem.prototype, "onTouchEnd", null);
     return HandleItem;
 }(React__default["default"].Component));
 /**
@@ -338,13 +378,15 @@ var Range = /** @class */ (function (_super) {
      * @param value 滑块值
      * @returns
      */
-    Range.prototype.getOffsetLeft = function (value) {
+    Range.prototype.getOffsetLeft = function (value, getNumber) {
         var _a = this.props, max = _a.max, min = _a.min;
         if (isString__default["default"](value) && MARKS_REG.test(value)) {
-            return value;
+            return getNumber ? parseFloat(value) : value;
         }
         value = Math.min(Math.max(+value, min), max);
-        return ((value - min) * 100) / (max - min) + '%';
+        return getNumber
+            ? ((value - min) * 100) / (max - min)
+            : ((value - min) * 100) / (max - min) + '%';
     };
     /**
      * 计算每个刻度标记mark 的最大宽度 max-width
@@ -354,7 +396,8 @@ var Range = /** @class */ (function (_super) {
      * @returns 刻度标记的最大宽度 string
      */
     Range.prototype.getMarkMaxWidth = function (value, marks) {
-        var _a = this.props, max = _a.max, min = _a.min;
+        var _a = this.props, max = _a.max, min = _a.min, useMobileUI = _a.useMobileUI;
+        var mobileUI = useMobileUI && amisCore.isMobile();
         var curNum = isString__default["default"](value) ? parseInt(value, 10) : value;
         // 给最大宽度赋初始值 默认最大
         var maxWidth = Math.abs(max - min);
@@ -366,11 +409,13 @@ var Range = /** @class */ (function (_super) {
             }
         });
         // 差值的1/2 即为此刻度标记的最大宽度
-        return Math.floor(maxWidth / 2) + '%';
+        return mobileUI
+            ? Math.floor(maxWidth) + '%'
+            : Math.floor(maxWidth / 2) + '%';
     };
     Range.prototype.render = function () {
         var _this = this;
-        var _a = this.props, cx = _a.classnames, marks = _a.marks, multiple = _a.multiple, value = _a.value, max = _a.max, min = _a.min, disabled = _a.disabled, tooltipVisible = _a.tooltipVisible, unit = _a.unit, tooltipPlacement = _a.tooltipPlacement, tipFormatter = _a.tipFormatter, onAfterChange = _a.onAfterChange;
+        var _a = this.props, cx = _a.classnames, marks = _a.marks, multiple = _a.multiple, value = _a.value, max = _a.max, min = _a.min, disabled = _a.disabled, tooltipVisible = _a.tooltipVisible, unit = _a.unit, tooltipPlacement = _a.tooltipPlacement, tipFormatter = _a.tipFormatter, onAfterChange = _a.onAfterChange, useMobileUI = _a.useMobileUI;
         // trace
         var traceActiveStyle = {
             width: valueToOffsetLeft(multiple
@@ -386,12 +431,18 @@ var Range = /** @class */ (function (_super) {
                 max: value.max
             };
         }
+        var sortMaks = marks
+            ? keys__default["default"](marks).sort(function (a, b) {
+                return _this.getOffsetLeft(a, true) -
+                    _this.getOffsetLeft(b, true);
+            })
+            : [];
         return (React__default["default"].createElement("div", { className: cx('InputRange-wrap') },
             React__default["default"].createElement("div", { ref: this.trackRef, className: cx('InputRange-track', 'InputRange-track--background'), onClick: this.onClickTrack },
                 React__default["default"].createElement("div", { className: cx('InputRange-track-active'), style: traceActiveStyle }),
                 this.renderSteps(),
-                multiple ? (['min', 'max'].map(function (type) { return (React__default["default"].createElement(HandleItem, { key: type, value: _this.multipleValue[type], type: type, min: min, max: max, classPrefix: _this.props.classPrefix, classnames: cx, disabled: disabled, tooltipVisible: tooltipVisible, tipFormatter: tipFormatter, unit: unit, tooltipPlacement: tooltipPlacement, onAfterChange: onAfterChange, onChange: _this.onGetChangeValue.bind(_this) })); })) : (React__default["default"].createElement(HandleItem, { value: +value, min: min, max: max, classPrefix: this.props.classPrefix, classnames: cx, disabled: disabled, tooltipVisible: tooltipVisible, tipFormatter: tipFormatter, unit: unit, tooltipPlacement: tooltipPlacement, onAfterChange: onAfterChange, onChange: this.onChange.bind(this) })),
-                marks && (React__default["default"].createElement("div", { className: cx('InputRange-marks') }, keys__default["default"](marks).map(function (key) {
+                multiple ? (['min', 'max'].map(function (type) { return (React__default["default"].createElement(HandleItem, { key: type, value: _this.multipleValue[type], type: type, min: min, max: max, classPrefix: _this.props.classPrefix, classnames: cx, disabled: disabled, tooltipVisible: tooltipVisible, tipFormatter: tipFormatter, unit: unit, useMobileUI: useMobileUI, tooltipPlacement: tooltipPlacement, onAfterChange: onAfterChange, onChange: _this.onGetChangeValue.bind(_this) })); })) : (React__default["default"].createElement(HandleItem, { value: +value, min: min, max: max, classPrefix: this.props.classPrefix, classnames: cx, disabled: disabled, tooltipVisible: tooltipVisible, tipFormatter: tipFormatter, unit: unit, useMobileUI: useMobileUI, tooltipPlacement: tooltipPlacement, onAfterChange: onAfterChange, onChange: this.onChange.bind(this) })),
+                marks && (React__default["default"].createElement("div", { className: cx('InputRange-marks') }, sortMaks.map(function (key) {
                     var _a, _b, _c;
                     var offsetLeft = _this.getOffsetLeft(key);
                     var markMaxWidth = _this.getMarkMaxWidth(key, marks);
@@ -444,7 +495,7 @@ var Range = /** @class */ (function (_super) {
     tslib.__decorate([
         amisCore.autobind,
         tslib.__metadata("design:type", Function),
-        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:paramtypes", [Object, Boolean]),
         tslib.__metadata("design:returntype", void 0)
     ], Range.prototype, "getOffsetLeft", null);
     tslib.__decorate([

package/lib/components/Rating.d.ts

@@ -72,12 +72,12 @@ export declare class Rating extends React.Component<RatingProps, any> {
     render(): React.JSX.Element;
 }
 declare const _default: {
-    new (props: Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "disabled" | "onChange" | "id" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
+    new (props: Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "id" | "onChange" | "disabled" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
         value?: number | undefined;
+        readOnly?: boolean | undefined;
+        half?: boolean | undefined;
         char?: React.ReactNode;
         count?: number | undefined;
-        half?: boolean | undefined;
-        readOnly?: boolean | undefined;
         containerClass?: string | undefined;
         allowClear?: boolean | undefined;
         colors?: string | {
@@ -90,12 +90,12 @@ declare const _default: {
         getWrappedInstance(): any;
         render(): React.JSX.Element;
         context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "disabled" | "onChange" | "id" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "id" | "onChange" | "disabled" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
             value?: number | undefined;
+            readOnly?: boolean | undefined;
+            half?: boolean | undefined;
             char?: React.ReactNode;
             count?: number | undefined;
-            half?: boolean | undefined;
-            readOnly?: boolean | undefined;
             containerClass?: string | undefined;
             allowClear?: boolean | undefined;
             colors?: string | {
@@ -104,12 +104,12 @@ declare const _default: {
             textPosition?: textPositionType | undefined;
         } & {} & import("packages/amis-core/lib/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>, "disabled" | "onChange" | "id" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
+        readonly props: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "id" | "onChange" | "disabled" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
             value?: number | undefined;
+            readOnly?: boolean | undefined;
+            half?: boolean | undefined;
             char?: React.ReactNode;
             count?: number | undefined;
-            half?: boolean | undefined;
-            readOnly?: boolean | undefined;
             containerClass?: string | undefined;
             allowClear?: boolean | undefined;
             colors?: string | {
@@ -122,12 +122,12 @@ declare const _default: {
             [key: string]: React.ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "disabled" | "onChange" | "id" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "id" | "onChange" | "disabled" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
             value?: number | undefined;
+            readOnly?: boolean | undefined;
+            half?: boolean | undefined;
             char?: React.ReactNode;
             count?: number | undefined;
-            half?: boolean | undefined;
-            readOnly?: boolean | undefined;
             containerClass?: string | undefined;
             allowClear?: boolean | undefined;
             colors?: string | {
@@ -137,12 +137,12 @@ declare const _default: {
         } & {} & import("packages/amis-core/lib/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>, "disabled" | "onChange" | "id" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "id" | "onChange" | "disabled" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
             value?: number | undefined;
+            readOnly?: boolean | undefined;
+            half?: boolean | undefined;
             char?: React.ReactNode;
             count?: number | undefined;
-            half?: boolean | undefined;
-            readOnly?: boolean | undefined;
             containerClass?: string | undefined;
             allowClear?: boolean | undefined;
             colors?: string | {
@@ -150,12 +150,12 @@ declare const _default: {
             } | undefined;
             textPosition?: textPositionType | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "disabled" | "onChange" | "id" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "id" | "onChange" | "disabled" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
             value?: number | undefined;
+            readOnly?: boolean | undefined;
+            half?: boolean | undefined;
             char?: React.ReactNode;
             count?: number | undefined;
-            half?: boolean | undefined;
-            readOnly?: boolean | undefined;
             containerClass?: string | undefined;
             allowClear?: boolean | undefined;
             colors?: string | {
@@ -165,12 +165,12 @@ declare const _default: {
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "disabled" | "onChange" | "id" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "id" | "onChange" | "disabled" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
             value?: number | undefined;
+            readOnly?: boolean | undefined;
+            half?: boolean | undefined;
             char?: React.ReactNode;
             count?: number | undefined;
-            half?: boolean | undefined;
-            readOnly?: boolean | undefined;
             containerClass?: string | undefined;
             allowClear?: boolean | undefined;
             colors?: string | {
@@ -178,12 +178,12 @@ declare const _default: {
             } | undefined;
             textPosition?: textPositionType | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "disabled" | "onChange" | "id" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "id" | "onChange" | "disabled" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
             value?: number | undefined;
+            readOnly?: boolean | undefined;
+            half?: boolean | undefined;
             char?: React.ReactNode;
             count?: number | undefined;
-            half?: boolean | undefined;
-            readOnly?: boolean | undefined;
             containerClass?: string | undefined;
             allowClear?: boolean | undefined;
             colors?: string | {
@@ -191,12 +191,12 @@ declare const _default: {
             } | undefined;
             textPosition?: textPositionType | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "disabled" | "onChange" | "id" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "id" | "onChange" | "disabled" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
             value?: number | undefined;
+            readOnly?: boolean | undefined;
+            half?: boolean | undefined;
             char?: React.ReactNode;
             count?: number | undefined;
-            half?: boolean | undefined;
-            readOnly?: boolean | undefined;
             containerClass?: string | undefined;
             allowClear?: boolean | undefined;
             colors?: string | {
@@ -204,12 +204,12 @@ declare const _default: {
             } | undefined;
             textPosition?: textPositionType | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "disabled" | "onChange" | "id" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<RatingProps, keyof import("amis-core").ThemeProps>, "id" | "onChange" | "disabled" | "key" | "charClassName" | "textClassName" | "onHoverChange" | "inactiveColor" | "texts"> & {
             value?: number | undefined;
+            readOnly?: boolean | undefined;
+            half?: boolean | undefined;
             char?: React.ReactNode;
             count?: number | undefined;
-            half?: boolean | undefined;
-            readOnly?: boolean | undefined;
             containerClass?: string | undefined;
             allowClear?: boolean | undefined;
             colors?: string | {

package/lib/components/Rating.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.0
+ * amis-ui v3.2.0
  * Copyright 2018-2023 fex
  */