amis 2.0.0-rc.9 → 2.0.2

package/esm/renderers/Form/InputRange.d.ts

@@ -0,0 +1,271 @@
+import React from 'react';
+import { FormControlProps } from 'amis-core';
+import { FormBaseControlSchema, SchemaObject } from '../../Schema';
+import { ActionObject } from 'amis-core';
+/**
+ * Range
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/range
+ */
+export declare type Value = string | MultipleValue | number | [number, number];
+export declare type FormatValue = MultipleValue | number;
+export declare type TooltipPosType = 'auto' | 'top' | 'right' | 'bottom' | 'left';
+export declare type InputRangeRendererEvent = 'change' | 'blur' | 'focus';
+export declare type InputRangeRendererAction = 'clear';
+export interface RangeControlSchema extends FormBaseControlSchema {
+    type: 'input-range';
+    /**
+     * 滑块值
+     */
+    value?: Value;
+    /**
+     * 最大值
+     */
+    max?: number;
+    /**
+     * 最小值
+     */
+    min?: number;
+    /**
+     * 步长
+     */
+    step?: number;
+    /**
+     * 单位
+     */
+    unit?: string;
+    /**
+     * 是否展示步长
+     */
+    showSteps?: boolean;
+    /**
+     * 分割块数
+     */
+    parts?: number | number[];
+    /**
+     * 刻度
+     */
+    marks?: MarksType;
+    /**
+     * 是否展示标签
+     */
+    tooltipVisible?: boolean;
+    /**
+     * 标签方向
+     */
+    tooltipPlacement?: TooltipPosType;
+    /**
+     * 是否为双滑块
+     */
+    multiple?: boolean;
+    /**
+     * 是否通过分隔符连接
+     */
+    joinValues?: boolean;
+    /**
+     * 分隔符
+     */
+    delimiter?: string;
+    /**
+     * 是否展示输入框
+     */
+    showInput?: boolean;
+    /**
+     * 是否禁用
+     */
+    disabled?: boolean;
+    /**
+     * 输入框是否可清除
+     */
+    clearable?: boolean;
+}
+declare type MarksType = {
+    [index: string | number]: MarksValue;
+};
+declare type MarksValue = string | number | SchemaObject | {
+    style?: React.CSSProperties;
+    label?: string;
+};
+export interface RangeProps extends FormControlProps {
+    /**
+     * 滑块值
+     */
+    value: Value;
+    /**
+     * 最小值
+     */
+    min: number;
+    /**
+     * 最大值
+     */
+    max: number;
+    /**
+     * 步长
+     */
+    step: number;
+    /**
+     * 是否展示步长
+     */
+    showSteps: boolean;
+    /**
+     * 分割块数
+     */
+    parts: number;
+    /**
+     * 刻度
+     */
+    marks?: MarksType;
+    /**
+     * 是否展示标签
+     */
+    tooltipVisible: boolean;
+    /**
+     * 标签方向
+     */
+    tooltipPlacement: TooltipPosType;
+    /**
+     * 控制滑块标签显隐函数
+     */
+    tipFormatter?: (value: Value) => boolean;
+    /**
+     * 是否为双滑块
+     */
+    multiple: boolean;
+    /**
+     * 是否通过分隔符连接
+     */
+    joinValues: boolean;
+    /**
+     * 分隔符
+     */
+    delimiter: string;
+    /**
+     * 单位
+     */
+    unit?: string;
+    /**
+     * 是否展示输入框
+     */
+    showInput: boolean;
+    /**
+     * 是否禁用
+     */
+    disabled: boolean;
+    /**
+     * 输入框是否可清除
+     */
+    clearable?: boolean;
+    /**
+     * value改变事件
+     */
+    onChange: (value: Value) => void;
+    /**
+     * 鼠标松开事件
+     */
+    onAfterChange?: (value: Value) => any;
+}
+export interface MultipleValue {
+    min: number;
+    max: number;
+}
+export interface DefaultProps {
+    value: Value;
+    max: number;
+    min: number;
+    step: number;
+    unit: string;
+    clearable: boolean;
+    disabled: boolean;
+    showInput: boolean;
+    multiple: boolean;
+    joinValues: boolean;
+    delimiter: string;
+    showSteps: boolean;
+    parts: number;
+    tooltipPlacement: TooltipPosType;
+}
+export interface RangeItemProps extends RangeProps {
+    value: FormatValue;
+    updateValue: (value: Value) => void;
+    onAfterChange: () => void;
+}
+export interface RangeState {
+    value: FormatValue;
+}
+/**
+ * 格式化初始value值
+ * @param value 初始value值 Value
+ * @param props RangeProps
+ * @returns number | {min: number, max: number}
+ */
+export declare function formatValue(value: Value, props: {
+    multiple: boolean;
+    delimiter: string;
+    min: number;
+    max: number;
+}): FormatValue;
+/**
+ * 输入框
+ */
+export declare class Input extends React.Component<RangeItemProps, any> {
+    /**
+     * onChange事件，只能输入数字
+     * @param e React.ChangeEvent
+     */
+    onChange(value: number): void;
+    /**
+     * 双滑块 更新value
+     * @param value 输入的value值
+     */
+    onUpdateValue(value: number): void;
+    checkNum(value: number | string | undefined): number | undefined;
+    /**
+     * 获取步长小数精度
+     * @returns
+     */
+    getStepPrecision(): number;
+    /**
+     * 处理数据
+     * @param value input数据
+     * @param type min | max 双滑块
+     * @returns 处理之后数据
+     */
+    getValue(value: string | number, type?: string): number;
+    /**
+     * 失焦事件
+     */
+    onBlur(): void;
+    /**
+     * 聚焦事件
+     */
+    onFocus(): Promise<void>;
+    render(): JSX.Element;
+}
+export default class RangeControl extends React.PureComponent<RangeProps, RangeState> {
+    midLabel?: HTMLSpanElement;
+    static defaultProps: DefaultProps;
+    constructor(props: RangeProps);
+    componentDidUpdate(prevProps: RangeProps): void;
+    doAction(action: ActionObject, data: object, throwErrors: boolean): void;
+    clearValue(type?: string): void;
+    getValue(value: FormatValue): number | {
+        max: number;
+        min: number;
+    };
+    /**
+     * 所有触发value变换 -> updateValue
+     * @param value
+     */
+    updateValue(value: FormatValue): Promise<void>;
+    /**
+     * 鼠标松开事件
+     */
+    onAfterChange(): void;
+    /**
+     * 获取导出格式数据
+     */
+    getFormatValue(value: FormatValue): string | FormatValue;
+    render(): JSX.Element;
+}
+export declare class RangeControlRenderer extends RangeControl {
+}
+export {};

package/esm/renderers/Form/InputRange.js

@@ -0,0 +1,388 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __assign, __awaiter, __generator, __decorate, __metadata } from 'tslib';
+import React from 'react';
+import isNumber from 'lodash/isNumber';
+import isObject from 'lodash/isObject';
+import isEqual from 'lodash/isEqual';
+import forEach from 'lodash/forEach';
+import { filter, createObject, autobind, stripNumber, FormItem } from 'amis-core';
+import { NumberInput, Range, Icon } from 'amis-ui';
+
+/**
+ * 格式化初始value值
+ * @param value 初始value值 Value
+ * @param props RangeProps
+ * @returns number | {min: number, max: number}
+ */
+function formatValue(value, props) {
+    var _a;
+    if (props.multiple) {
+        var min = props.min, max = props.max;
+        // value是字符串
+        if (typeof value === 'string') {
+            _a = value.split(props.delimiter || ',').map(function (v) { return Number(v); }), min = _a[0], max = _a[1];
+        }
+        // value是数组
+        else if (Array.isArray(value)) {
+            min = value[0], max = value[1];
+        }
+        // value是对象
+        else if (typeof value === 'object') {
+            min = value.min;
+            max = value.max;
+        }
+        return {
+            min: min === undefined || min < props.min ? props.min : min,
+            max: max === undefined || max > props.max ? props.max : max
+        };
+    }
+    return +value < props.min ? props.min : Math.min(+value, props.max);
+}
+/**
+ * 输入框
+ */
+var Input = /** @class */ (function (_super) {
+    __extends(Input, _super);
+    function Input() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * onChange事件，只能输入数字
+     * @param e React.ChangeEvent
+     */
+    Input.prototype.onChange = function (value) {
+        var _a;
+        var _b = this.props, multiple = _b.multiple, originValue = _b.value, type = _b.type, min = _b.min;
+        var _value = this.getValue(value, type);
+        this.props.updateValue(multiple
+            ? __assign(__assign({}, originValue), (_a = {}, _a[type] = _value, _a)) : value !== null && value !== void 0 ? value : min);
+    };
+    /**
+     * 双滑块 更新value
+     * @param value 输入的value值
+     */
+    Input.prototype.onUpdateValue = function (value) {
+        var _a;
+        var _b = this.props, multiple = _b.multiple, originValue = _b.value, type = _b.type;
+        var _value = this.getValue(value, type);
+        this.props.updateValue(multiple ? __assign(__assign({}, originValue), (_a = {}, _a[type] = _value, _a)) : value);
+    };
+    Input.prototype.checkNum = function (value) {
+        if (typeof value !== 'number') {
+            value = filter(value, this.props.data);
+            value = /^[-]?\d+/.test(value) ? +value : undefined;
+        }
+        return value;
+    };
+    /**
+     * 获取步长小数精度
+     * @returns
+     */
+    Input.prototype.getStepPrecision = function () {
+        var _a;
+        var step = this.props.step;
+        var stepIsDecimal = /^\d+\.\d+$/.test(step.toString());
+        return !stepIsDecimal || step < 0
+            ? 0
+            : (_a = step.toString().split('.')[1]) === null || _a === void 0 ? void 0 : _a.length;
+    };
+    /**
+     * 处理数据
+     * @param value input数据
+     * @param type min | max 双滑块
+     * @returns 处理之后数据
+     */
+    Input.prototype.getValue = function (value, type) {
+        var _a = this.props, max = _a.max, min = _a.min, step = _a.step, stateValue = _a.value;
+        // value为null、undefined时，取对应的min/max
+        value = value !== null && value !== void 0 ? value : (type === 'min' ? min : max);
+        // 校正value为step的倍数
+        var _value = Math.round(parseFloat(value + '') / step) * step;
+        // 同步value与步长小数位数
+        _value = parseFloat(_value.toFixed(this.getStepPrecision()));
+        // 单滑块只用考虑 轨道边界 ，双滑块需要考虑 两端滑块边界
+        switch (type) {
+            case 'min': {
+                if (isObject(stateValue) && isNumber(stateValue.max)) {
+                    // 如果 大于当前双滑块最大值 取 当前双滑块max值 - 步长
+                    if (_value >= stateValue.max) {
+                        return stateValue.max - step;
+                    }
+                    return _value;
+                }
+                return min;
+            }
+            case 'max':
+                if (isObject(stateValue) && isNumber(stateValue.min)) {
+                    // 如果 小于当前双滑块最大值 取 当前双滑块min值 + 步长
+                    if (_value <= stateValue.min) {
+                        return stateValue.min + step;
+                    }
+                    return _value;
+                }
+                return max;
+            default:
+                // 轨道边界
+                return (_value < min && min) || (_value > max && max) || _value;
+        }
+    };
+    /**
+     * 失焦事件
+     */
+    Input.prototype.onBlur = function () {
+        var _a = this.props, data = _a.data, dispatchEvent = _a.dispatchEvent, value = _a.value;
+        dispatchEvent('blur', createObject(data, {
+            value: value
+        }));
+    };
+    /**
+     * 聚焦事件
+     */
+    Input.prototype.onFocus = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, data, dispatchEvent, value;
+            return __generator(this, function (_b) {
+                _a = this.props, data = _a.data, dispatchEvent = _a.dispatchEvent, value = _a.value;
+                dispatchEvent('focus', createObject(data, {
+                    value: value
+                }));
+                return [2 /*return*/];
+            });
+        });
+    };
+    Input.prototype.render = function () {
+        var _a = this.props, cx = _a.classnames, value = _a.value, multiple = _a.multiple, type = _a.type, step = _a.step, ns = _a.classPrefix, disabled = _a.disabled, max = _a.max, min = _a.min;
+        var _value = multiple
+            ? type === 'min'
+                ? Math.min(value.min, value.max)
+                : Math.max(value.min, value.max)
+            : value;
+        return (React.createElement("div", { className: cx("".concat(ns, "InputRange-input")) },
+            React.createElement(NumberInput, { value: +_value, step: step, max: this.checkNum(max), min: this.checkNum(min), onChange: this.onChange, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus })));
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Number]),
+        __metadata("design:returntype", void 0)
+    ], Input.prototype, "onChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Number]),
+        __metadata("design:returntype", void 0)
+    ], Input.prototype, "onUpdateValue", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Input.prototype, "onBlur", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", Promise)
+    ], Input.prototype, "onFocus", null);
+    return Input;
+}(React.Component));
+var RangeControl = /** @class */ (function (_super) {
+    __extends(RangeControl, _super);
+    function RangeControl(props) {
+        var _this = _super.call(this, props) || this;
+        var _a = _this.props, propsValue = _a.value, multiple = _a.multiple, delimiter = _a.delimiter, min = _a.min, max = _a.max;
+        var value = formatValue(propsValue, {
+            multiple: multiple,
+            delimiter: delimiter,
+            min: min,
+            max: max
+        });
+        _this.state = {
+            value: _this.getValue(value)
+        };
+        return _this;
+    }
+    RangeControl.prototype.componentDidUpdate = function (prevProps) {
+        var value = prevProps.value, min = prevProps.min, max = prevProps.max;
+        var _a = this.props, nextPropsValue = _a.value, multiple = _a.multiple, delimiter = _a.delimiter, nextPropsMin = _a.min, nextPropsMax = _a.max; _a.onChange;
+        if (value !== nextPropsValue ||
+            min !== nextPropsMin ||
+            max !== nextPropsMax) {
+            var value_1 = formatValue(nextPropsValue, {
+                multiple: multiple,
+                delimiter: delimiter,
+                min: nextPropsMin,
+                max: nextPropsMax
+            });
+            this.setState({
+                value: this.getValue(value_1)
+            });
+        }
+    };
+    RangeControl.prototype.doAction = function (action, data, throwErrors) {
+        var actionType = action === null || action === void 0 ? void 0 : action.actionType;
+        var _a = this.props; _a.multiple; _a.min; _a.max;
+        if (!!~['clear', 'reset'].indexOf(actionType)) {
+            this.clearValue(actionType);
+        }
+    };
+    RangeControl.prototype.clearValue = function (type) {
+        if (type === void 0) { type = 'clear'; }
+        var _a = this.props, multiple = _a.multiple, min = _a.min, max = _a.max, onChange = _a.onChange;
+        var resetValue = this.props.resetValue;
+        if (type === 'clear') {
+            resetValue = undefined;
+        }
+        var value = this.getFormatValue(resetValue !== null && resetValue !== void 0 ? resetValue : (multiple ? { min: min, max: max } : min));
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    };
+    RangeControl.prototype.getValue = function (value) {
+        var multiple = this.props.multiple;
+        return multiple
+            ? {
+                max: stripNumber(value.max),
+                min: stripNumber(value.min)
+            }
+            : stripNumber(value);
+    };
+    /**
+     * 所有触发value变换 -> updateValue
+     * @param value
+     */
+    RangeControl.prototype.updateValue = function (value) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, onChange, data, dispatchEvent, result, rendererEvent;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        this.setState({ value: this.getValue(value) });
+                        _a = this.props, onChange = _a.onChange, data = _a.data, dispatchEvent = _a.dispatchEvent;
+                        result = this.getFormatValue(value);
+                        return [4 /*yield*/, dispatchEvent('change', createObject(data, {
+                                value: result
+                            }))];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        onChange === null || onChange === void 0 ? void 0 : onChange(result);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * 鼠标松开事件
+     */
+    RangeControl.prototype.onAfterChange = function () {
+        var value = this.state.value;
+        var _a = this.props, onAfterChange = _a.onAfterChange; _a.dispatchEvent; _a.data;
+        var result = this.getFormatValue(value);
+        onAfterChange && onAfterChange(result);
+    };
+    /**
+     * 获取导出格式数据
+     */
+    RangeControl.prototype.getFormatValue = function (value) {
+        var _a = this.props, multiple = _a.multiple, joinValues = _a.joinValues, delimiter = _a.delimiter;
+        return multiple
+            ? joinValues
+                ? [value.min, value.max].join(delimiter || ',')
+                : {
+                    min: value.min,
+                    max: value.max
+                }
+            : value;
+    };
+    RangeControl.prototype.render = function () {
+        var _this = this;
+        var value = this.state.value;
+        var props = __assign(__assign({}, this.props), { value: value, updateValue: this.updateValue, onAfterChange: this.onAfterChange });
+        var ns = props.classPrefix, multiple = props.multiple; props.parts; var showInput = props.showInput, cx = props.classnames, className = props.className, disabled = props.disabled, clearable = props.clearable, min = props.min, max = props.max, render = props.render, marks = props.marks, region = props.region;
+        // 处理自定义json配置
+        var renderMarks = marks ? __assign({}, marks) : marks;
+        marks &&
+            forEach(marks, function (item, key) {
+                if (isObject(item) && item.type) {
+                    renderMarks &&
+                        (renderMarks[key] = render(region, item));
+                }
+            });
+        return (React.createElement("div", { className: cx('RangeControl', "".concat(ns, "InputRange"), { 'is-disabled': disabled }, className) },
+            showInput && multiple && React.createElement(Input, __assign({}, props, { type: "min" })),
+            React.createElement(Range, __assign({}, props, { marks: renderMarks })),
+            showInput && React.createElement(Input, __assign({}, props, { type: "max" })),
+            clearable && !disabled && showInput ? (React.createElement("a", { onClick: function () { return _this.clearValue(); }, className: cx('InputRange-clear', {
+                    'is-active': multiple
+                        ? isEqual(this.state.value, { min: min, max: max })
+                        : this.state.value !== min
+                }) },
+                React.createElement(Icon, { icon: "close", className: "icon" }))) : null));
+    };
+    RangeControl.defaultProps = {
+        value: 0,
+        max: 100,
+        min: 0,
+        step: 1,
+        unit: '',
+        clearable: true,
+        disabled: false,
+        showInput: false,
+        multiple: false,
+        joinValues: true,
+        delimiter: ',',
+        showSteps: false,
+        parts: 1,
+        tooltipPlacement: 'auto'
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], RangeControl.prototype, "clearValue", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], RangeControl.prototype, "getValue", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", Promise)
+    ], RangeControl.prototype, "updateValue", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], RangeControl.prototype, "onAfterChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], RangeControl.prototype, "getFormatValue", null);
+    return RangeControl;
+}(React.PureComponent));
+/** @class */ ((function (_super) {
+    __extends(RangeControlRenderer, _super);
+    function RangeControlRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RangeControlRenderer = __decorate([
+        FormItem({
+            type: 'input-range'
+        })
+    ], RangeControlRenderer);
+    return RangeControlRenderer;
+})(RangeControl));
+
+export { Input, RangeControl as default, formatValue };