/**
 * amis-ui v6.11.0-beta.7
 * Copyright 2018-2025 fex
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var amisCore = require('amis-core');
var useSetState = require('../hooks/use-set-state.js');
var useTouch = require('../hooks/use-touch.js');
require('lodash/pick');
var useOnScreen = require('../hooks/use-on-screen.js');
var icons = require('./icons.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var __react_jsx__ = require('react');
var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
(__react_jsx__["default"] || __react_jsx__).Fragment;
var defaultProps = {
    successDuration: 0,
    loadingDuration: 0,
    direction: 'down'
};
var defaultHeaderHeight = 28;
var PullRefresh = React.forwardRef(function (props, ref) {
    var _a, _b, _c, _d, _e, _f;
    var cx = props.classnames, __ = props.translate, children = props.children, successDuration = props.successDuration, loadingDuration = props.loadingDuration, direction = props.direction, completed = props.completed;
    var refreshText = {
        normalText: (_a = props.normalText) !== null && _a !== void 0 ? _a : __('pullRefresh.normalText'),
        pullingText: (_b = props.pullingText) !== null && _b !== void 0 ? _b : __('pullRefresh.pullingText'),
        loosingText: (_c = props.loosingText) !== null && _c !== void 0 ? _c : __('pullRefresh.loosingText'),
        loadingText: (_d = props.loadingText) !== null && _d !== void 0 ? _d : __('pullRefresh.loadingText'),
        successText: (_e = props.successText) !== null && _e !== void 0 ? _e : __('pullRefresh.successText'),
        completedText: (_f = props.completedText) !== null && _f !== void 0 ? _f : __('pullRefresh.completedText')
    };
    var touch = useTouch["default"]();
    var loadingRef = React__default["default"].useRef(null);
    // 当占位文字在屏幕内时，需要刷新
    var needRefresh = useOnScreen["default"](loadingRef);
    React.useEffect(function () {
        if (props.loading === false) {
            loadSuccess();
        }
    }, [props.loading]);
    var _g = tslib.__read(useSetState["default"]({
        status: 'normal',
        offsetY: 0
    }), 2), state = _g[0], updateState = _g[1];
    var isTouchable = function () {
        return (!completed &&
            needRefresh &&
            !props.disabled &&
            state.status !== 'loading' &&
            state.status !== 'success');
    };
    var ease = function (distance) {
        var pullDistance = defaultHeaderHeight;
        if (distance > pullDistance) {
            if (distance < pullDistance * 2) {
                distance = pullDistance + (distance - pullDistance) / 2;
            }
            else {
                distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
            }
        }
        return Math.round(distance);
    };
    var setStatus = function (distance, isLoading) {
        var pullDistance = defaultHeaderHeight;
        var status = 'normal';
        if (isLoading) {
            status = 'loading';
        }
        else if (distance === 0) {
            status = 'normal';
        }
        else if (Math.abs(distance) < pullDistance) {
            status = 'pulling';
        }
        else {
            status = 'loosing';
        }
        updateState({ offsetY: distance, status: status });
    };
    var loadSuccess = function () {
        if (!successDuration) {
            setStatus(0);
            return;
        }
        updateState({ status: 'success' });
        setTimeout(function () {
            setStatus(0);
        }, successDuration);
    };
    var onTouchStart = function (event) {
        event.stopPropagation();
        if (isTouchable() && state.offsetY === 0) {
            touch.start(event);
            updateState({});
        }
    };
    var onTouchMove = function (event) {
        event.stopPropagation();
        if (isTouchable()) {
            touch.move(event);
            updateState({});
            if (touch.isVertical()) {
                if (direction === 'down' && touch.deltaY > 0) {
                    setStatus(ease(touch.deltaY));
                }
                else if (direction === 'up' && touch.deltaY < 0) {
                    setStatus(-1 * ease(-1 * touch.deltaY));
                }
            }
        }
        return false;
    };
    var onTouchEnd = function (event) {
        event.stopPropagation();
        if (isTouchable() && state.offsetY !== 0) {
            if (state.status === 'loosing') {
                if (loadingDuration) {
                    setStatus(defaultHeaderHeight, true);
                }
                else {
                    setStatus(0);
                }
                props.onRefresh && props.onRefresh();
            }
            else {
                setStatus(0);
            }
        }
    };
    var transformStyle = tslib.__assign({ transform: "translate3d(0, ".concat(state.offsetY, "px, 0)") }, (direction === 'down'
        ? {
            touchAction: 'none'
        }
        : {}));
    var getStatusText = function (status) {
        if (props.loading) {
            return refreshText.loadingText;
        }
        if (completed) {
            return refreshText.completedText;
        }
        return refreshText["".concat(status, "Text")];
    };
    var loadingDom = function (className) { return (_J$X_("div", { className: className, ref: loadingRef },
        state.status === 'loading' && (_J$X_(icons.Icon, { icon: "loading-outline", className: "icon loading-icon" })),
        getStatusText(state.status))); };
    return (_J$X_("div", { className: cx('PullRefresh'), onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, onTouchCancel: onTouchEnd },
        _J$X_("div", { className: cx('PullRefresh-wrap'), style: transformStyle },
            direction === 'down' ? loadingDom(cx('PullRefresh-header')) : null,
            children,
            direction === 'up' ? loadingDom(cx('PullRefresh-footer')) : null)));
});
PullRefresh.defaultProps = defaultProps;
var PullRefresh$1 = amisCore.themeable(PullRefresh);

exports["default"] = PullRefresh$1;
