@apdesign/web-react 1.0.0

package/es/Slider/button.js

@@ -0,0 +1,178 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import React, { useState, useContext, memo, useEffect, useRef, useMemo, } from 'react';
+import cs from '../_util/classNames';
+import { on, off } from '../_util/dom';
+import { isFunction, isNumber, isString } from '../_util/is';
+import Trigger from '../Trigger';
+import { ConfigContext } from '../ConfigProvider';
+import useMergeValue from '../_util/hooks/useMergeValue';
+import useKeyboardEvent from '../_util/hooks/useKeyboardEvent';
+var triggerStyle = { maxWidth: 350 };
+var triggerDuration = {
+    enter: 300,
+    exit: 100,
+};
+var triggerPopupAlign = {
+    left: 12,
+    right: 12,
+    top: 12,
+    bottom: 12,
+};
+var SliderButton = function (props) {
+    var _a;
+    // props
+    var style = props.style, disabled = props.disabled, prefixCls = props.prefixCls, value = props.value, vertical = props.vertical, tooltipVisible = props.tooltipVisible, tooltipPosition = props.tooltipPosition, formatTooltip = props.formatTooltip, getTooltipContainer = props.getTooltipContainer, onMoving = props.onMoving, onMoveEnd = props.onMoveEnd, onMoveBegin = props.onMoveBegin;
+    var getKeyboardEvents = useKeyboardEvent();
+    // state
+    var _b = __read(useState(false), 2), isActive = _b[0], setIsActive = _b[1];
+    var _c = __read(useMergeValue(false, { value: tooltipVisible }), 2), popupVisible = _c[0], setPopupVisible = _c[1];
+    var getPrefixCls = useContext(ConfigContext).getPrefixCls;
+    var position = useMemo(function () { return tooltipPosition || (vertical ? 'right' : 'top'); }, [tooltipPosition, vertical]);
+    var delayTimer = useRef(null);
+    var inButtonOrPopup = useRef(false);
+    var isDragging = useRef(false);
+    var tooltip = useRef(null);
+    function handleMouseDown(e) {
+        e.stopPropagation();
+        if (disabled)
+            return;
+        moveStart(e);
+        setIsActive(true);
+        on(window, 'mousemove', moving);
+        on(window, 'touchmove', moving);
+        on(window, 'mouseup', moveEnd);
+        on(window, 'touchend', moveEnd);
+        on(window, 'contextmenu', moveEnd);
+    }
+    // 鼠标移入
+    function handleMouseEnter() {
+        inButtonOrPopup.current = true;
+        clearDelayTimer();
+        if (!popupVisible) {
+            delayTimer.current = setTimeout(function () {
+                updatePopupVisible(true);
+            }, 50);
+        }
+    }
+    // 鼠标移出
+    function handleMouseLeave() {
+        inButtonOrPopup.current = false;
+        if (!isDragging.current) {
+            clearDelayTimer();
+            delayTimer.current = setTimeout(function () {
+                updatePopupVisible(false);
+            }, 200);
+        }
+    }
+    function moveStart(e) {
+        // 如果不阻止默认行为可能会在拖动时产生鼠标选中状态，所以手动处理元素失焦
+        e.preventDefault();
+        var activeElement = document.activeElement;
+        activeElement && activeElement.blur && activeElement.blur();
+        isFunction(onMoveBegin) && onMoveBegin();
+    }
+    function moving(e) {
+        isDragging.current = true;
+        if (e.type === 'touchstart') {
+            e.clientY = e.touches[0].clientY;
+            e.clientX = e.touches[0].clientX;
+        }
+        isFunction(onMoving) && onMoving(e.clientX, e.clientY);
+    }
+    function moveEnd() {
+        isDragging.current = false;
+        setIsActive(false);
+        offEvents();
+        updatePopupVisible(inButtonOrPopup.current);
+        isFunction(onMoveEnd) && onMoveEnd();
+    }
+    function offEvents() {
+        clearDelayTimer();
+        off(window, 'mousemove', moving);
+        off(window, 'touchmove', moving);
+        off(window, 'mouseup', moveEnd);
+        off(window, 'touchend', moveEnd);
+        off(window, 'contextmenu', moveEnd);
+    }
+    // 清除定时器
+    function clearDelayTimer() {
+        if (delayTimer.current) {
+            clearTimeout(delayTimer.current);
+            delayTimer.current = null;
+        }
+    }
+    // 设置 tooltip 显示状态
+    function updatePopupVisible(value) {
+        if (isDragging.current)
+            return;
+        var newPopupVisible = 'tooltipVisible' in props ? tooltipVisible : value;
+        setPopupVisible(newPopupVisible);
+    }
+    function handlePopupMouseEnter() {
+        inButtonOrPopup.current = true;
+        clearDelayTimer();
+    }
+    var tooltipText = useMemo(function () {
+        return isFunction(formatTooltip) ? formatTooltip(value) : value;
+    }, [formatTooltip, value]);
+    function renderTooltipContent(position) {
+        var tooltipPrefixCls = getPrefixCls('tooltip');
+        return (React.createElement("div", { className: cs(tooltipPrefixCls + "-content", tooltipPrefixCls + "-content-" + position), onMouseLeave: handleMouseLeave, onMouseEnter: handlePopupMouseEnter, onClick: function (e) {
+                e.stopPropagation();
+            } },
+            React.createElement("div", { className: tooltipPrefixCls + "-content-inner" }, tooltipText)));
+    }
+    useEffect(function () {
+        tooltip && tooltip.current && tooltip.current.updatePopupPosition();
+    }, [value]);
+    return (React.createElement(Trigger, { style: triggerStyle, classNames: "zoomInFadeOut", duration: triggerDuration, showArrow: true, popupAlign: triggerPopupAlign, ref: tooltip, popup: function () { return renderTooltipContent(position); }, popupVisible: popupVisible, disabled: tooltipVisible === false, getPopupContainer: getTooltipContainer, position: position, childrenPrefix: getPrefixCls('tooltip') },
+        React.createElement("div", __assign({ className: cs(prefixCls + "-button", (_a = {}, _a[prefixCls + "-button-active"] = isActive, _a)), onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: style, role: "slider", "aria-valuemax": props.maxValue, "aria-valuemin": props.minValue, "aria-valuenow": value, "aria-disabled": !!disabled, tabIndex: disabled ? -1 : 0, "aria-valuetext": isString(tooltipText) || isNumber(tooltipText) ? String(tooltipText) : undefined }, getKeyboardEvents({
+            onArrowRight: function (e) {
+                var _a;
+                e.preventDefault();
+                (_a = props.onArrowEvent) === null || _a === void 0 ? void 0 : _a.call(props, 'addition');
+            },
+            onArrowUp: function (e) {
+                var _a;
+                e.preventDefault();
+                (_a = props.onArrowEvent) === null || _a === void 0 ? void 0 : _a.call(props, 'addition');
+            },
+            onArrowLeft: function (e) {
+                var _a;
+                e.preventDefault();
+                (_a = props.onArrowEvent) === null || _a === void 0 ? void 0 : _a.call(props, 'subtraction');
+            },
+            onArrowDown: function (e) {
+                var _a;
+                e.preventDefault();
+                (_a = props.onArrowEvent) === null || _a === void 0 ? void 0 : _a.call(props, 'subtraction');
+            },
+        })))));
+};
+export default memo(SliderButton);

package/es/Slider/dots.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { IntervalConfig } from './hooks/useInterval';
+declare type MaskType = {
+    key: number | string;
+    content: any;
+};
+interface MaskProps {
+    data: MaskType[];
+    valueRange?: [number, number];
+    vertical?: boolean;
+    prefixCls?: string;
+    reverse?: boolean;
+    onMouseDown?: (val: number) => void;
+    intervalConfigs?: IntervalConfig[];
+}
+declare const _default: React.NamedExoticComponent<MaskProps>;
+export default _default;

package/es/Slider/dots.js

@@ -0,0 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { memo } from 'react';
+import { isObject, isFunction } from '../_util/is';
+import { formatPercent, valueInRange, getIntervalOffset } from './utils';
+import cs from '../_util/classNames';
+var Dots = function (props) {
+    var _a = props.data, data = _a === void 0 ? [] : _a, _b = props.valueRange, valueRange = _b === void 0 ? [] : _b, vertical = props.vertical, prefixCls = props.prefixCls, reverse = props.reverse, intervalConfigs = props.intervalConfigs;
+    if (!data.length)
+        return null;
+    return (React.createElement("div", { className: prefixCls + "-dots" }, data.map(function (_a) {
+        var _b, _c, _d;
+        var key = _a.key, content = _a.content;
+        var offset = formatPercent(getIntervalOffset(+key, intervalConfigs));
+        return (React.createElement("div", { className: prefixCls + "-dot-wrapper", key: key, style: __assign({}, (vertical
+                ? (_b = {}, _b[reverse ? 'top' : 'bottom'] = offset, _b) : (_c = {}, _c[reverse ? 'right' : 'left'] = offset, _c))), onMouseDown: function (e) {
+                e.stopPropagation();
+                isFunction(props.onMouseDown) && props.onMouseDown(parseFloat(key));
+            } }, isObject(content) && content.dot ? (content.dot) : (React.createElement("div", { className: cs(prefixCls + "-dot", (_d = {},
+                _d[prefixCls + "-dot-active"] = valueInRange(key, valueRange),
+                _d)) }))));
+    })));
+};
+export default memo(Dots);

package/es/Slider/hooks/useInterval.d.ts

@@ -0,0 +1,24 @@
+import { SliderProps } from '..';
+export interface IntervalConfig {
+    begin: number;
+    end: number;
+    width: number;
+    step: number;
+    beginOffset?: number;
+    endOffset?: number;
+}
+declare function useInterval(props: {
+    marks: SliderProps['marks'];
+    getIntervalConfig?: SliderProps['getIntervalConfig'];
+    min: number;
+    max: number;
+    onlyMarkValue: boolean;
+    step: number;
+}): {
+    intervalConfigs: IntervalConfig[];
+    markList: {
+        key: string;
+        content: any;
+    }[];
+};
+export default useInterval;

package/es/Slider/hooks/useInterval.js

@@ -0,0 +1,125 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { useMemo } from 'react';
+import { isNumber, isFunction } from '../../_util/is';
+import { rateToFloat } from '../utils';
+function getIntervals(nums) {
+    if (nums.length < 2) {
+        return [];
+    }
+    var result = [];
+    for (var i = 1; i < nums.length; i++) {
+        var begin = nums[i - 1];
+        var end = nums[i];
+        result.push([begin, end]);
+    }
+    return result;
+}
+function useInterval(props) {
+    var _a = props.marks, marks = _a === void 0 ? {} : _a, getIntervalConfig = props.getIntervalConfig, max = props.max, min = props.min;
+    var _b = useMemo(function () {
+        var markKeys = Object.keys(marks)
+            .filter(function (key) { return isNumber(+key) && +key >= min && +key <= max; })
+            .sort(function (a, b) { return (+a > +b ? 1 : -1); });
+        var markList = markKeys.map(function (key) { return ({ key: key, content: marks[key] }); });
+        var markValues = markKeys.map(function (key) { return +key; });
+        // 如果没有传入marks，那么就等于只有一个区间，就是 [min,max]
+        if (markValues.length === 0) {
+            markValues = [min, max];
+        }
+        else {
+            if (markValues[0] > min) {
+                markValues.unshift(min);
+                // 传入了 marks 需要显示首尾断点
+                markList.unshift({ key: "" + min, content: '' });
+            }
+            if (markValues.slice(-1)[0] < max) {
+                markValues.push(max);
+                markList.push({ key: "" + max, content: '' });
+            }
+        }
+        var markIntervals = getIntervals(markValues);
+        return { markIntervals: markIntervals, markList: markList };
+    }, [marks, min, max]), markIntervals = _b.markIntervals, markList = _b.markList;
+    var intervalConfigs = useMemo(function () {
+        if (!isFunction(getIntervalConfig)) {
+            return [{ begin: min, end: max, step: props.step, beginOffset: 0, endOffset: 1, width: 1 }];
+        }
+        var getStepAndWidth = function (_a, index) {
+            var _b = __read(_a, 2), begin = _b[0], end = _b[1];
+            var config = { step: props.step, width: 0 };
+            var customConfig = getIntervalConfig([begin, end], index) || {};
+            var step = customConfig.step;
+            var width = rateToFloat(customConfig.width);
+            // 如果用户传入了step
+            if (isNumber(step) && step) {
+                config.step = step;
+            }
+            // 用户传入了width
+            if (isNumber(width) && width) {
+                config.width = width;
+            }
+            return config;
+        };
+        var remainWidth = 1;
+        var remainLen = max - min;
+        var stepAndWidthConfig = markIntervals.map(function (_a, index) {
+            var _b = __read(_a, 2), begin = _b[0], end = _b[1];
+            var stepAndWidth = getStepAndWidth([begin, end], index);
+            var width = stepAndWidth.width;
+            // 主要是计算出剩余的 width 和 剩余的长度
+            if (width) {
+                width = Math.min(remainWidth, width);
+                var len = end - begin;
+                remainLen -= len;
+                remainWidth -= width;
+            }
+            return { width: width, step: stepAndWidth.step };
+        });
+        // 所有区间都有自定义宽度但仍有剩余的时候，最后一个区间的宽度需要校准
+        if (stepAndWidthConfig.every(function (_a) {
+            var width = _a.width;
+            return width;
+        }) && remainWidth) {
+            var lastIntervalConfig = stepAndWidthConfig[markIntervals.length - 1];
+            lastIntervalConfig.width += remainWidth;
+        }
+        var allConfigs = [];
+        markIntervals.forEach(function (_a, index) {
+            var _b = __read(_a, 2), begin = _b[0], end = _b[1];
+            var _c = stepAndWidthConfig[index], step = _c.step, width = _c.width;
+            var config = { begin: begin, end: end, step: step, beginOffset: 0, endOffset: 0, width: width };
+            // 用户没有配置 width，按照区间长度来分配剩余的width
+            if (!config.width) {
+                config.width = remainWidth * ((end - begin) / remainLen);
+            }
+            var prevIndex = allConfigs.length - 1;
+            // 当前区间的 beginOffset 是前一个区间的 endOffset
+            if (allConfigs[prevIndex]) {
+                config.beginOffset = allConfigs[prevIndex].endOffset;
+            }
+            config.endOffset = Math.min(1, config.beginOffset + config.width);
+            allConfigs.push(config);
+        });
+        return allConfigs;
+    }, [getIntervalConfig, markIntervals, max, min, props.step]);
+    return {
+        intervalConfigs: intervalConfigs,
+        markList: markList,
+    };
+}
+export default useInterval;

package/es/Slider/hooks/useLegalValue.d.ts

@@ -0,0 +1,15 @@
+import { IntervalConfig } from './useInterval';
+export default function useLegalValue(props: {
+    isRange: boolean;
+    min: number;
+    max: number;
+    onlyMarkValue: boolean;
+    step: number;
+    intervalConfigs: IntervalConfig[];
+    marks: object;
+}): {
+    getLegalRangeValue: (val: number | number[]) => number[];
+    getLegalValue: (val: any) => number;
+    isLegalValue: (val: any) => boolean;
+    getNextMarkValue: (value: number, type: 'addition' | 'subtraction') => number;
+};

package/es/Slider/hooks/useLegalValue.js

@@ -0,0 +1,107 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { plus, times } from 'number-precision';
+import { useCallback } from 'react';
+import { isArray, isNumber, isUndefined, isObject, isEmptyObject } from '../../_util/is';
+import { getPrecision } from '../utils';
+export default function useLegalValue(props) {
+    var isRange = props.isRange, min = props.min, max = props.max, onlyMarkValue = props.onlyMarkValue, intervalConfigs = props.intervalConfigs, marks = props.marks;
+    var getPrecisionValue = useCallback(function (val) {
+        var interval = intervalConfigs.find(function (config) {
+            return val >= config.begin && val <= config.end;
+        });
+        if (interval) {
+            var begin = interval.begin, step = interval.step;
+            var offsetVal = val - begin;
+            var stepNum = Math.round(offsetVal / step);
+            var precision = getPrecision(step);
+            var currentIntervalPrecision = parseFloat(times(step, stepNum).toFixed(precision));
+            return plus(begin, currentIntervalPrecision);
+        }
+        return val;
+    }, [intervalConfigs]);
+    // 在只允许选择 marks 中的值的时候，找到离value最接近的值
+    var getMarkValue = useCallback(function (val) {
+        if (!isObject(marks) || isEmptyObject(marks)) {
+            console.warn('marks must be an object when onlyMarkValue is true');
+            return min;
+        }
+        if (marks[val]) {
+            return val;
+        }
+        var keys = Object.keys(marks);
+        var diffs = keys.map(function (x) { return Math.abs(val - parseFloat(x)); });
+        var minIndex = diffs.indexOf(Math.min.apply(null, diffs));
+        return parseFloat(keys[minIndex]);
+    }, [marks, min]);
+    // 判断值是否在[min, max]区间内，并且满足步长或是标签值
+    var getLegalValue = useCallback(function (val) {
+        if (isUndefined(val))
+            return min;
+        if (val <= min)
+            return min;
+        if (val >= max)
+            return max;
+        if (onlyMarkValue)
+            return getMarkValue(val);
+        return getPrecisionValue(val);
+    }, [getMarkValue, getPrecisionValue, max, min, onlyMarkValue]);
+    var isLegalValue = useCallback(function (val) {
+        return getLegalValue(val) === val;
+    }, [getLegalValue]);
+    // 获取合法的 range value
+    var getLegalRangeValue = useCallback(function (val) {
+        var _a = __read([min, min], 2), beginVal = _a[0], endVal = _a[1];
+        if (isRange) {
+            if (isArray(val)) {
+                beginVal = getLegalValue(val[0]);
+                // endVal = getLegalValue(val[1]);
+                return val.map(function (v) {
+                    return getLegalValue(v);
+                });
+            }
+            console.error('value must be an array when range is true');
+        }
+        else if (isNumber(val)) {
+            endVal = getLegalValue(val);
+        }
+        else {
+            console.error('value must be a number when range is false');
+        }
+        return [beginVal, endVal];
+    }, [getLegalValue, isRange, min]);
+    var getNextMarkValue = useCallback(function (value, type) {
+        // arrow Left or arrowRight
+        var multi = type === 'subtraction' ? -1 : 1;
+        var newValue = plus(value, multi * props.step);
+        if (props.onlyMarkValue) {
+            var markKeys = Object.keys(props.marks);
+            var currentIndex = markKeys.findIndex(function (key) { return Number(key) === value; });
+            newValue =
+                markKeys[currentIndex + multi] !== undefined
+                    ? Number(markKeys[currentIndex + multi])
+                    : value;
+        }
+        return newValue;
+    }, [props.marks, props.onlyMarkValue, props.step]);
+    return {
+        getLegalRangeValue: getLegalRangeValue,
+        getLegalValue: getLegalValue,
+        isLegalValue: isLegalValue,
+        getNextMarkValue: getNextMarkValue,
+    };
+}

package/es/Slider/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SliderProps } from './interface';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<unknown>>>;
+export default _default;
+export { SliderProps };