amis-ui 3.1.1 → 3.3.0

package/lib/components/Radios.d.ts

@@ -35,6 +35,7 @@ interface RadioProps extends OptionProps {
     labelClassName?: string;
     classPrefix: string;
     classnames: ClassNamesFn;
+    renderLabel?: (item: Option, props: RadioProps) => JSX.Element;
 }
 export declare class Radios extends React.Component<RadioProps, any> {
     static defaultProps: {
@@ -53,13 +54,13 @@ export declare class Radios extends React.Component<RadioProps, any> {
     render(): React.JSX.Element;
 }
 declare const _default: {
-    new (props: Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "delimiter" | "value" | "onChange" | "disabled" | "placeholder" | "multiple" | "id" | "level" | "block" | "loading" | "labelClassName" | "options" | "labelField" | "valueField" | "itemClassName" | "itemHeight" | "virtualThreshold" | "onAdd" | "editable" | "onEdit" | "multi" | "simpleValue" | "extractValue" | "creatable" | "pathSeparator" | "hasError" | "removable" | "onDelete"> & {
-        clearable?: boolean | undefined;
-        joinValues?: boolean | undefined;
-        resetValue?: any;
+    new (props: Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "value" | "id" | "placeholder" | "onChange" | "disabled" | "block" | "multiple" | "level" | "loading" | "itemClassName" | "labelClassName" | "labelField" | "valueField" | "itemHeight" | "options" | "delimiter" | "onAdd" | "editable" | "onEdit" | "multi" | "pathSeparator" | "creatable" | "simpleValue" | "extractValue" | "virtualThreshold" | "hasError" | "removable" | "onDelete" | "renderLabel"> & {
         type?: string | undefined;
         inline?: boolean | undefined;
         optionType?: string | undefined;
+        clearable?: boolean | undefined;
+        joinValues?: boolean | undefined;
+        resetValue?: any;
         btnActiveLevel?: string | undefined;
         columnsCount?: number | number[] | undefined;
     } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps): {
@@ -68,24 +69,24 @@ declare const _default: {
         getWrappedInstance(): any;
         render(): React.JSX.Element;
         context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "delimiter" | "value" | "onChange" | "disabled" | "placeholder" | "multiple" | "id" | "level" | "block" | "loading" | "labelClassName" | "options" | "labelField" | "valueField" | "itemClassName" | "itemHeight" | "virtualThreshold" | "onAdd" | "editable" | "onEdit" | "multi" | "simpleValue" | "extractValue" | "creatable" | "pathSeparator" | "hasError" | "removable" | "onDelete"> & {
-            clearable?: boolean | undefined;
-            joinValues?: boolean | undefined;
-            resetValue?: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "value" | "id" | "placeholder" | "onChange" | "disabled" | "block" | "multiple" | "level" | "loading" | "itemClassName" | "labelClassName" | "labelField" | "valueField" | "itemHeight" | "options" | "delimiter" | "onAdd" | "editable" | "onEdit" | "multi" | "pathSeparator" | "creatable" | "simpleValue" | "extractValue" | "virtualThreshold" | "hasError" | "removable" | "onDelete" | "renderLabel"> & {
             type?: string | undefined;
             inline?: boolean | undefined;
             optionType?: string | undefined;
+            clearable?: boolean | undefined;
+            joinValues?: boolean | undefined;
+            resetValue?: any;
             btnActiveLevel?: string | undefined;
             columnsCount?: number | number[] | 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<RadioProps, keyof import("amis-core").ThemeProps>, "delimiter" | "value" | "onChange" | "disabled" | "placeholder" | "multiple" | "id" | "level" | "block" | "loading" | "labelClassName" | "options" | "labelField" | "valueField" | "itemClassName" | "itemHeight" | "virtualThreshold" | "onAdd" | "editable" | "onEdit" | "multi" | "simpleValue" | "extractValue" | "creatable" | "pathSeparator" | "hasError" | "removable" | "onDelete"> & {
-            clearable?: boolean | undefined;
-            joinValues?: boolean | undefined;
-            resetValue?: any;
+        readonly props: Readonly<Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "value" | "id" | "placeholder" | "onChange" | "disabled" | "block" | "multiple" | "level" | "loading" | "itemClassName" | "labelClassName" | "labelField" | "valueField" | "itemHeight" | "options" | "delimiter" | "onAdd" | "editable" | "onEdit" | "multi" | "pathSeparator" | "creatable" | "simpleValue" | "extractValue" | "virtualThreshold" | "hasError" | "removable" | "onDelete" | "renderLabel"> & {
             type?: string | undefined;
             inline?: boolean | undefined;
             optionType?: string | undefined;
+            clearable?: boolean | undefined;
+            joinValues?: boolean | undefined;
+            resetValue?: any;
             btnActiveLevel?: string | undefined;
             columnsCount?: number | number[] | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>;
@@ -94,77 +95,77 @@ declare const _default: {
             [key: string]: React.ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "delimiter" | "value" | "onChange" | "disabled" | "placeholder" | "multiple" | "id" | "level" | "block" | "loading" | "labelClassName" | "options" | "labelField" | "valueField" | "itemClassName" | "itemHeight" | "virtualThreshold" | "onAdd" | "editable" | "onEdit" | "multi" | "simpleValue" | "extractValue" | "creatable" | "pathSeparator" | "hasError" | "removable" | "onDelete"> & {
-            clearable?: boolean | undefined;
-            joinValues?: boolean | undefined;
-            resetValue?: any;
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "value" | "id" | "placeholder" | "onChange" | "disabled" | "block" | "multiple" | "level" | "loading" | "itemClassName" | "labelClassName" | "labelField" | "valueField" | "itemHeight" | "options" | "delimiter" | "onAdd" | "editable" | "onEdit" | "multi" | "pathSeparator" | "creatable" | "simpleValue" | "extractValue" | "virtualThreshold" | "hasError" | "removable" | "onDelete" | "renderLabel"> & {
             type?: string | undefined;
             inline?: boolean | undefined;
             optionType?: string | undefined;
+            clearable?: boolean | undefined;
+            joinValues?: boolean | undefined;
+            resetValue?: any;
             btnActiveLevel?: string | undefined;
             columnsCount?: number | number[] | undefined;
         } & {} & 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<RadioProps, keyof import("amis-core").ThemeProps>, "delimiter" | "value" | "onChange" | "disabled" | "placeholder" | "multiple" | "id" | "level" | "block" | "loading" | "labelClassName" | "options" | "labelField" | "valueField" | "itemClassName" | "itemHeight" | "virtualThreshold" | "onAdd" | "editable" | "onEdit" | "multi" | "simpleValue" | "extractValue" | "creatable" | "pathSeparator" | "hasError" | "removable" | "onDelete"> & {
-            clearable?: boolean | undefined;
-            joinValues?: boolean | undefined;
-            resetValue?: any;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "value" | "id" | "placeholder" | "onChange" | "disabled" | "block" | "multiple" | "level" | "loading" | "itemClassName" | "labelClassName" | "labelField" | "valueField" | "itemHeight" | "options" | "delimiter" | "onAdd" | "editable" | "onEdit" | "multi" | "pathSeparator" | "creatable" | "simpleValue" | "extractValue" | "virtualThreshold" | "hasError" | "removable" | "onDelete" | "renderLabel"> & {
             type?: string | undefined;
             inline?: boolean | undefined;
             optionType?: string | undefined;
-            btnActiveLevel?: string | undefined;
-            columnsCount?: number | number[] | undefined;
-        } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "delimiter" | "value" | "onChange" | "disabled" | "placeholder" | "multiple" | "id" | "level" | "block" | "loading" | "labelClassName" | "options" | "labelField" | "valueField" | "itemClassName" | "itemHeight" | "virtualThreshold" | "onAdd" | "editable" | "onEdit" | "multi" | "simpleValue" | "extractValue" | "creatable" | "pathSeparator" | "hasError" | "removable" | "onDelete"> & {
             clearable?: boolean | undefined;
             joinValues?: boolean | undefined;
             resetValue?: any;
+            btnActiveLevel?: string | undefined;
+            columnsCount?: number | number[] | undefined;
+        } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "value" | "id" | "placeholder" | "onChange" | "disabled" | "block" | "multiple" | "level" | "loading" | "itemClassName" | "labelClassName" | "labelField" | "valueField" | "itemHeight" | "options" | "delimiter" | "onAdd" | "editable" | "onEdit" | "multi" | "pathSeparator" | "creatable" | "simpleValue" | "extractValue" | "virtualThreshold" | "hasError" | "removable" | "onDelete" | "renderLabel"> & {
             type?: string | undefined;
             inline?: boolean | undefined;
             optionType?: string | undefined;
+            clearable?: boolean | undefined;
+            joinValues?: boolean | undefined;
+            resetValue?: any;
             btnActiveLevel?: string | undefined;
             columnsCount?: number | number[] | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "delimiter" | "value" | "onChange" | "disabled" | "placeholder" | "multiple" | "id" | "level" | "block" | "loading" | "labelClassName" | "options" | "labelField" | "valueField" | "itemClassName" | "itemHeight" | "virtualThreshold" | "onAdd" | "editable" | "onEdit" | "multi" | "simpleValue" | "extractValue" | "creatable" | "pathSeparator" | "hasError" | "removable" | "onDelete"> & {
-            clearable?: boolean | undefined;
-            joinValues?: boolean | undefined;
-            resetValue?: any;
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "value" | "id" | "placeholder" | "onChange" | "disabled" | "block" | "multiple" | "level" | "loading" | "itemClassName" | "labelClassName" | "labelField" | "valueField" | "itemHeight" | "options" | "delimiter" | "onAdd" | "editable" | "onEdit" | "multi" | "pathSeparator" | "creatable" | "simpleValue" | "extractValue" | "virtualThreshold" | "hasError" | "removable" | "onDelete" | "renderLabel"> & {
             type?: string | undefined;
             inline?: boolean | undefined;
             optionType?: string | undefined;
-            btnActiveLevel?: string | undefined;
-            columnsCount?: number | number[] | undefined;
-        } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "delimiter" | "value" | "onChange" | "disabled" | "placeholder" | "multiple" | "id" | "level" | "block" | "loading" | "labelClassName" | "options" | "labelField" | "valueField" | "itemClassName" | "itemHeight" | "virtualThreshold" | "onAdd" | "editable" | "onEdit" | "multi" | "simpleValue" | "extractValue" | "creatable" | "pathSeparator" | "hasError" | "removable" | "onDelete"> & {
             clearable?: boolean | undefined;
             joinValues?: boolean | undefined;
             resetValue?: any;
-            type?: string | undefined;
-            inline?: boolean | undefined;
-            optionType?: string | undefined;
             btnActiveLevel?: string | undefined;
             columnsCount?: number | number[] | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "delimiter" | "value" | "onChange" | "disabled" | "placeholder" | "multiple" | "id" | "level" | "block" | "loading" | "labelClassName" | "options" | "labelField" | "valueField" | "itemClassName" | "itemHeight" | "virtualThreshold" | "onAdd" | "editable" | "onEdit" | "multi" | "simpleValue" | "extractValue" | "creatable" | "pathSeparator" | "hasError" | "removable" | "onDelete"> & {
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "value" | "id" | "placeholder" | "onChange" | "disabled" | "block" | "multiple" | "level" | "loading" | "itemClassName" | "labelClassName" | "labelField" | "valueField" | "itemHeight" | "options" | "delimiter" | "onAdd" | "editable" | "onEdit" | "multi" | "pathSeparator" | "creatable" | "simpleValue" | "extractValue" | "virtualThreshold" | "hasError" | "removable" | "onDelete" | "renderLabel"> & {
+            type?: string | undefined;
+            inline?: boolean | undefined;
+            optionType?: string | undefined;
             clearable?: boolean | undefined;
             joinValues?: boolean | undefined;
             resetValue?: any;
+            btnActiveLevel?: string | undefined;
+            columnsCount?: number | number[] | undefined;
+        } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "value" | "id" | "placeholder" | "onChange" | "disabled" | "block" | "multiple" | "level" | "loading" | "itemClassName" | "labelClassName" | "labelField" | "valueField" | "itemHeight" | "options" | "delimiter" | "onAdd" | "editable" | "onEdit" | "multi" | "pathSeparator" | "creatable" | "simpleValue" | "extractValue" | "virtualThreshold" | "hasError" | "removable" | "onDelete" | "renderLabel"> & {
             type?: string | undefined;
             inline?: boolean | undefined;
             optionType?: string | undefined;
-            btnActiveLevel?: string | undefined;
-            columnsCount?: number | number[] | undefined;
-        } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "delimiter" | "value" | "onChange" | "disabled" | "placeholder" | "multiple" | "id" | "level" | "block" | "loading" | "labelClassName" | "options" | "labelField" | "valueField" | "itemClassName" | "itemHeight" | "virtualThreshold" | "onAdd" | "editable" | "onEdit" | "multi" | "simpleValue" | "extractValue" | "creatable" | "pathSeparator" | "hasError" | "removable" | "onDelete"> & {
             clearable?: boolean | undefined;
             joinValues?: boolean | undefined;
             resetValue?: any;
+            btnActiveLevel?: string | undefined;
+            columnsCount?: number | number[] | undefined;
+        } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<RadioProps, keyof import("amis-core").ThemeProps>, "value" | "id" | "placeholder" | "onChange" | "disabled" | "block" | "multiple" | "level" | "loading" | "itemClassName" | "labelClassName" | "labelField" | "valueField" | "itemHeight" | "options" | "delimiter" | "onAdd" | "editable" | "onEdit" | "multi" | "pathSeparator" | "creatable" | "simpleValue" | "extractValue" | "virtualThreshold" | "hasError" | "removable" | "onDelete" | "renderLabel"> & {
             type?: string | undefined;
             inline?: boolean | undefined;
             optionType?: string | undefined;
+            clearable?: boolean | undefined;
+            joinValues?: boolean | undefined;
+            resetValue?: any;
             btnActiveLevel?: string | undefined;
             columnsCount?: number | number[] | undefined;
         } & {} & import("packages/amis-core/lib/theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;

package/lib/components/Radios.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -18,21 +18,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/**
- * @file Radios
- * @description
- * @author fex
- *
- * @param 参数说明：
- * options: [
- *   {
- *      label: '显示的名字',
- *      value: '值',
- *      disabled: false
- *   }
- * ]
- *
- */
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
+var defaultLabelRender = function (item, props) { return (_J$X_(React__default["default"].Fragment, null, "".concat(item[props.labelField || 'label']))); };
 var Radios = /** @class */ (function (_super) {
     tslib.__extends(Radios, _super);
     function Radios() {
@@ -58,9 +47,9 @@ var Radios = /** @class */ (function (_super) {
     };
     Radios.prototype.renderGroup = function (option, index, valueArray) {
         var _this = this;
-        var _a = this.props, cx = _a.classnames; _a.optionType; _a.classPrefix;
-        return (React__default["default"].createElement("div", { key: index, className: cx('RadiosControl-group', option.className) },
-            React__default["default"].createElement("label", { className: cx('RadiosControl-groupLabel', option.labelClassName) }, option.label),
+        var _a = this.props, cx = _a.classnames; _a.optionType; _a.classPrefix; var _b = _a.renderLabel, renderLabel = _b === void 0 ? defaultLabelRender : _b;
+        return (_J$X_("div", { key: index, className: cx('RadiosControl-group', option.className) },
+            _J$X_("label", { className: cx('RadiosControl-groupLabel', option.labelClassName) }, renderLabel(option, this.props)),
             option.children && option.children.length
                 ? option.children.map(function (option, index) {
                     return _this.renderItem(option, index, valueArray);
@@ -72,13 +61,13 @@ var Radios = /** @class */ (function (_super) {
         if (option.children) {
             return this.renderGroup(option, index, valueArray);
         }
-        var _a = this.props, disabled = _a.disabled, inline = _a.inline, itemClassName = _a.itemClassName, cx = _a.classnames, labelClassName = _a.labelClassName, labelField = _a.labelField, optionType = _a.optionType, level = _a.level, btnActiveLevel = _a.btnActiveLevel; _a.classPrefix;
+        var _a = this.props, disabled = _a.disabled, inline = _a.inline, itemClassName = _a.itemClassName, cx = _a.classnames, labelClassName = _a.labelClassName; _a.labelField; var optionType = _a.optionType, level = _a.level, btnActiveLevel = _a.btnActiveLevel; _a.classPrefix; var _b = _a.renderLabel, renderLabel = _b === void 0 ? defaultLabelRender : _b;
         if (optionType === 'button') {
             var active = !!~valueArray.indexOf(option);
-            return (React__default["default"].createElement(Button["default"], { key: index, active: active, onClick: function () { return _this.toggleOption(option); }, className: cx(itemClassName, option.className), disabled: disabled || option.disabled, level: (active ? btnActiveLevel : '') || level },
-                React__default["default"].createElement("span", null, "".concat(option[labelField || 'label']))));
+            return (_J$X_(Button["default"], { key: index, active: active, onClick: function () { return _this.toggleOption(option); }, className: cx(itemClassName, option.className), disabled: disabled || option.disabled, level: (active ? btnActiveLevel : '') || level },
+                _J$X_("span", null, renderLabel(option, this.props))));
         }
-        return (React__default["default"].createElement(Checkbox["default"], { type: "radio", key: index, onChange: function () { return _this.toggleOption(option); }, checked: !!~valueArray.indexOf(option), className: cx(itemClassName, option.className), disabled: disabled || option.disabled, description: option.description, inline: inline, labelClassName: labelClassName }, "".concat(option[labelField || 'label'])));
+        return (_J$X_(Checkbox["default"], { type: "radio", key: index, onChange: function () { return _this.toggleOption(option); }, checked: !!~valueArray.indexOf(option), className: cx(itemClassName, option.className), disabled: disabled || option.disabled, description: option.description, inline: inline, labelClassName: labelClassName }, renderLabel(option, this.props)));
     };
     Radios.prototype.render = function () {
         var _this = this;
@@ -98,7 +87,7 @@ var Radios = /** @class */ (function (_super) {
         if (!inline) {
             body = amisCore.columnsSplit(body, cx, columnsCount);
         }
-        return (React__default["default"].createElement("div", { className: className, style: style }, body && body.length ? body : placeholder));
+        return (_J$X_("div", { className: className, style: style }, body && body.length ? body : placeholder));
     };
     Radios.defaultProps = {
         type: 'radio',

package/lib/components/Range.d.ts

@@ -23,6 +23,7 @@ export type InputRangeRendererEvent = 'change' | 'blur' | 'focus';
 export type InputRangeRendererAction = 'clear';
 export interface RangeItemProps extends ThemeProps {
     [propName: string]: any;
+    useMobileUI?: boolean;
 }
 export declare class Range extends React.Component<RangeItemProps, any> {
     multipleValue: MultipleValue;
@@ -84,7 +85,7 @@ export declare class Range extends React.Component<RangeItemProps, any> {
      * @param value 滑块值
      * @returns
      */
-    getOffsetLeft(value: number | string): string;
+    getOffsetLeft(value: number | string, getNumber?: boolean): string | number;
     /**
      * 计算每个刻度标记mark 的最大宽度 max-width
      * 通过给父元素div的width赋值，从而继承

package/lib/components/Range.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -26,11 +26,9 @@ var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
 var difference__default = /*#__PURE__*/_interopDefaultLegacy(difference);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/**
- * @file Range
- * @description
- * @author fex
- */
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 // 小数或者整数
 var MARKS_REG = /^[0-9]+(\.?[0-9]+)?%$/;
 /**
@@ -118,21 +116,43 @@ 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
         };
-        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(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 }))));
+        var mobileUI = useMobileUI && amisCore.isMobile();
+        return disabled ? (_J$X_("div", { className: cx('InputRange-handle'), style: style },
+            _J$X_("div", { className: cx('InputRange-handle-icon') },
+                _J$X_(icons.Icon, { icon: "slider-handle", className: "icon" })))) : (_J$X_("div", { className: cx('InputRange-handle', {
+                'is-mobile': mobileUI
+            }), style: style, ref: this.handleRef },
+            _J$X_("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 },
+                _J$X_(icons.Icon, { icon: "slider-handle", className: "icon" })),
+            _J$X_(amisCore.Overlay, { placement: tooltipPlacement, target: function () { return ReactDOM.findDOMNode(_this); }, container: function () { return ReactDOM.findDOMNode(_this); }, rootClose: false, show: true },
+                _J$X_(Label, { show: labelActive, classPrefix: this.props.classPrefix, classnames: cx, value: value, tooltipVisible: tooltipVisible, tipFormatter: tipFormatter, unit: unit, placement: tooltipPlacement }))));
     };
     tslib.__decorate([
         amisCore.autobind,
@@ -164,6 +184,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));
 /**
@@ -190,10 +228,10 @@ var Label = /** @class */ (function (_super) {
                 ? tipFormatter(value)
                 : tooltipVisible
             : show;
-        return (React__default["default"].createElement("div", { className: cx('InputRange-label', "pos-".concat(amisCore.camel(placement)), {
+        return (_J$X_("div", { className: cx('InputRange-label', "pos-".concat(amisCore.camel(placement)), {
                 'InputRange-label-visible': isShow
             }) },
-            React__default["default"].createElement("span", null, value + unit)));
+            _J$X_("span", null, value + unit)));
     };
     return Label;
 }(React__default["default"].Component));
@@ -271,9 +309,9 @@ var Range = /** @class */ (function (_super) {
         var result = 0;
         // 余数 >= 步长一半 -> 向上取
         // 余数 <  步长一半 -> 向下取
-        var _value = surplus >= step / 2 ? value : value - step;
+        var _value = surplus >= step / 2 ? value : amisCore.safeSub(value, step);
         while (result <= _value) {
-            result += step;
+            result = amisCore.safeAdd(result, step);
         }
         return result;
     };
@@ -315,7 +353,7 @@ var Range = /** @class */ (function (_super) {
         var partLengthList = Array.isArray(parts)
             ? parts.map(function (item) { return item - min; })
             : range__default["default"](steps - 1).map(function (item) { return (item + 1) * partLength; });
-        return (isShowSteps && (React__default["default"].createElement("div", null, partLengthList.map(function (item) { return (React__default["default"].createElement("span", { key: item, className: cx('InputRange-track-dot'), style: { left: (item * 100) / (max - min) + '%' } })); }))));
+        return (isShowSteps && (_J$X_("div", null, partLengthList.map(function (item) { return (_J$X_("span", { key: item, className: cx('InputRange-track-dot'), style: { left: (item * 100) / (max - min) + '%' } })); }))));
     };
     /**
      * 双滑块改变最大值、最小值
@@ -338,13 +376,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 +394,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 +407,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,19 +429,25 @@ var Range = /** @class */ (function (_super) {
                 max: value.max
             };
         }
-        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 }),
+        var sortMaks = marks
+            ? keys__default["default"](marks).sort(function (a, b) {
+                return _this.getOffsetLeft(a, true) -
+                    _this.getOffsetLeft(b, true);
+            })
+            : [];
+        return (_J$X_("div", { className: cx('InputRange-wrap') },
+            _J$X_("div", { ref: this.trackRef, className: cx('InputRange-track', 'InputRange-track--background'), onClick: this.onClickTrack },
+                _J$X_("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 (_J$X_(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) })); })) : (_J$X_(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 && (_J$X_("div", { className: cx('InputRange-marks') }, sortMaks.map(function (key) {
                     var _a, _b, _c;
                     var offsetLeft = _this.getOffsetLeft(key);
                     var markMaxWidth = _this.getMarkMaxWidth(key, marks);
                     if (MARKS_REG.test(offsetLeft)) {
-                        return (React__default["default"].createElement("div", { key: key, style: { left: offsetLeft, width: markMaxWidth } },
-                            React__default["default"].createElement(TooltipWrapper["default"], { placement: 'bottom', tooltip: ((_a = marks[key]) === null || _a === void 0 ? void 0 : _a.label) || marks[key], trigger: ['hover', 'focus'], rootClose: false },
-                                React__default["default"].createElement("span", { style: (_b = marks[key]) === null || _b === void 0 ? void 0 : _b.style }, ((_c = marks[key]) === null || _c === void 0 ? void 0 : _c.label) || marks[key]))));
+                        return (_J$X_("div", { key: key, style: { left: offsetLeft, width: markMaxWidth } },
+                            _J$X_(TooltipWrapper["default"], { placement: 'bottom', tooltip: ((_a = marks[key]) === null || _a === void 0 ? void 0 : _a.label) || marks[key], trigger: ['hover', 'focus'], rootClose: false },
+                                _J$X_("span", { style: (_b = marks[key]) === null || _b === void 0 ? void 0 : _b.style }, ((_c = marks[key]) === null || _c === void 0 ? void 0 : _c.label) || marks[key]))));
                     }
                     else {
                         return null;
@@ -444,7 +493,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([