@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
171 lines (170 loc) • 8.26 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Sticky = Sticky;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _components = require("@tarojs/components");
var utils = _interopRequireWildcard(require("../wxs/utils"));
var _utils2 = require("../common/utils");
var _validator = require("../common/validator");
var _defaultProps = require("../default-props");
var _pageScroll = require("./../mixins/page-scroll");
var computed = _interopRequireWildcard(require("./wxs"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["zIndex", "offsetTop", "scrollTop", "disabled", "container", "onScroll", "style", "className", "children", "rectWrapper"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function Sticky(props) {
var indexRef = (0, _react.useRef)("".concat(+new Date()).concat(Math.ceil(Math.random() * 10000)));
var _useState = (0, _react.useState)({
height: 0,
fixed: false,
transform: 0
}),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
state = _useState2[0],
setState = _useState2[1];
var _useState3 = (0, _react.useState)((0, _defaultProps.get)().Sticky),
_useState4 = (0, _slicedToArray2.default)(_useState3, 1),
d = _useState4[0];
var _d$props = _objectSpread(_objectSpread({}, d), props),
zIndex = _d$props.zIndex,
_d$props$offsetTop = _d$props.offsetTop,
offsetTop = _d$props$offsetTop === void 0 ? 0 : _d$props$offsetTop,
scrollTop = _d$props.scrollTop,
disabled = _d$props.disabled,
container = _d$props.container,
onScroll = _d$props.onScroll,
style = _d$props.style,
className = _d$props.className,
children = _d$props.children,
_d$props$rectWrapper = _d$props.rectWrapper,
rectWrapper = _d$props$rectWrapper === void 0 ? '' : _d$props$rectWrapper,
others = (0, _objectWithoutProperties2.default)(_d$props, _excluded);
var ref = (0, _react.useRef)({});
var getContainerRect = (0, _react.useCallback)(function () {
var nodesRef = container === null || container === void 0 ? void 0 : container();
return new Promise(function (resolve) {
return nodesRef === null || nodesRef === void 0 ? void 0 : nodesRef.boundingClientRect().exec(function () {
var rect = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
return resolve(rect[0]);
});
});
}, [container]);
var setDataAfterDiff = (0, _react.useCallback)(function (data) {
var diff = Object.keys(data).reduce(function (prev, key) {
if (data[key] !== state[key]) {
prev[key] = data[key];
}
return prev;
}, {});
if (Object.keys(diff).length > 0) {
setState(function (pre) {
return _objectSpread(_objectSpread({}, pre), diff);
});
}
onScroll === null || onScroll === void 0 ? void 0 : onScroll({
detail: {
scrollTop: ref.current.scrollTop,
isFixed: data.fixed || state.fixed
}
});
}, [onScroll, state]);
var onMyScroll = (0, _react.useCallback)(function (scrollTop) {
if (disabled) {
setDataAfterDiff({
fixed: false,
transform: 0
});
return;
}
ref.current.scrollTop = scrollTop || ref.current.scrollTop;
if (typeof container === 'function') {
Promise.all([(0, _utils2.getRect)(null, "#sticky-com-index".concat(indexRef.current), rectWrapper), getContainerRect()]).then(function (_ref) {
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
root = _ref2[0],
container = _ref2[1];
if (root && container) {
if (offsetTop + root.height > container.height + container.top) {
setDataAfterDiff({
fixed: false,
transform: container.height - root.height
});
} else if (offsetTop >= root.top) {
setDataAfterDiff({
fixed: true,
height: root.height,
transform: 0
});
} else {
setDataAfterDiff({
fixed: false,
transform: 0
});
}
}
}).catch(function (e) {
console.log(e);
});
return;
} else {
(0, _utils2.getRect)(null, "#sticky-com-index".concat(indexRef.current), rectWrapper).then(function (root) {
if (!(0, _validator.isDef)(root)) {
return;
}
if (offsetTop >= root.top) {
setDataAfterDiff({
fixed: true,
height: root.height
});
// this.transform = 0
} else {
setDataAfterDiff({
fixed: false
});
}
});
}
}, [container, disabled, getContainerRect, offsetTop, rectWrapper, setDataAfterDiff]);
(0, _react.useEffect)(function () {
onMyScroll(scrollTop);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[scrollTop, container, disabled, offsetTop]);
(0, _pageScroll.usePageScroll)(function (e) {
onMyScroll(e.scrollTop);
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, _objectSpread(_objectSpread({
id: "sticky-com-index".concat(indexRef.current),
className: ' van-sticky ' + (className || ''),
style: utils.style([computed.containerStyle({
fixed: state.fixed,
height: state.height,
zIndex: zIndex
}), style])
}, others), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: utils.bem('sticky-wrap', {
fixed: state.fixed
}) + " ".concat(className || ''),
style: utils.style([computed.wrapStyle({
fixed: state.fixed,
offsetTop: offsetTop,
transform: state.transform,
zIndex: zIndex
}), style]),
children: children
})
}));
}
var _default = Sticky;
exports.default = _default;