antd-mobile
Version:
<div align="center">
192 lines (191 loc) • 7.74 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CollapsePanel = exports.Collapse = void 0;
var _web = require("@react-spring/web");
var _ahooks = require("ahooks");
var _antdMobileIcons = require("antd-mobile-icons");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _nativeProps = require("../../utils/native-props");
var _shouldRender = require("../../utils/should-render");
var _traverseReactNode = require("../../utils/traverse-react-node");
var _useIsomorphicUpdateLayoutEffect = require("../../utils/use-isomorphic-update-layout-effect");
var _useMutationEffect = require("../../utils/use-mutation-effect");
var _usePropsValue = require("../../utils/use-props-value");
var _withDefaultProps = require("../../utils/with-default-props");
var _configProvider = require("../config-provider");
var _list = _interopRequireDefault(require("../list"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const classPrefix = `adm-collapse`;
const CollapsePanel = () => {
return null;
};
exports.CollapsePanel = CollapsePanel;
const CollapsePanelContent = props => {
const {
visible
} = props;
const innerRef = (0, _react.useRef)(null);
const shouldRender = (0, _shouldRender.useShouldRender)(visible, props.forceRender, props.destroyOnClose);
const [{
height
}, api] = (0, _web.useSpring)(() => ({
from: {
height: 0
},
config: {
precision: 0.01,
mass: 1,
tension: 200,
friction: 25,
clamp: true
}
}));
(0, _ahooks.useMount)(() => {
if (!visible) return;
const inner = innerRef.current;
if (!inner) return;
api.start({
height: inner.offsetHeight,
immediate: true
});
});
(0, _useIsomorphicUpdateLayoutEffect.useIsomorphicUpdateLayoutEffect)(() => {
const inner = innerRef.current;
if (!inner) return;
if (visible) {
let lastMotionId = 0;
let cancelObserve = () => {};
const handleMotion = () => {
lastMotionId += 1;
const motionId = lastMotionId;
api.start({
height: inner.offsetHeight
})[0].then(() => {
if (motionId === lastMotionId) {
cancelObserve();
}
});
};
cancelObserve = (0, _useMutationEffect.observe)(inner, {
childList: true,
subtree: true
}, handleMotion);
handleMotion();
return cancelObserve;
} else {
api.start({
height: inner.offsetHeight,
immediate: true
});
api.start({
height: 0
});
}
}, [visible]);
return _react.default.createElement(_web.animated.div, {
className: (0, _classnames.default)(`${classPrefix}-panel-content`, {
[`${classPrefix}-panel-content-active`]: visible
}),
style: {
height: height.to(v => {
if (height.idle && visible) {
return 'auto';
} else {
return v;
}
})
}
}, _react.default.createElement("div", {
className: `${classPrefix}-panel-content-inner`,
ref: innerRef
}, _react.default.createElement(_list.default.Item, null, shouldRender && props.children)));
};
const Collapse = props => {
const {
collapse: componentConfig = {}
} = (0, _configProvider.useConfig)();
const mergedProps = (0, _withDefaultProps.mergeProps)(componentConfig, props);
const panels = [];
(0, _traverseReactNode.traverseReactNode)(mergedProps.children, child => {
if (!(0, _react.isValidElement)(child)) return;
const key = child.key;
if (typeof key !== 'string') return;
panels.push(child);
});
const handlePropsValue = () => {
var _a;
if (!mergedProps.accordion) {
return {
value: mergedProps.activeKey,
defaultValue: (_a = mergedProps.defaultActiveKey) !== null && _a !== void 0 ? _a : [],
onChange: mergedProps.onChange
};
}
const initValue = {
value: [],
defaultValue: [],
onChange: v => {
var _a, _b;
(_a = mergedProps.onChange) === null || _a === void 0 ? void 0 : _a.call(mergedProps, (_b = v[0]) !== null && _b !== void 0 ? _b : null);
}
};
if (mergedProps.activeKey === undefined) {
initValue.value = undefined;
} else if (mergedProps.activeKey !== null) {
initValue.value = [mergedProps.activeKey];
}
if (![null, undefined].includes(mergedProps.defaultActiveKey)) {
initValue.defaultValue = [mergedProps.defaultActiveKey];
}
return initValue;
};
const [activeKey, setActiveKey] = (0, _usePropsValue.usePropsValue)(handlePropsValue());
const activeKeyList = activeKey === null ? [] : Array.isArray(activeKey) ? activeKey : [activeKey];
return (0, _nativeProps.withNativeProps)(mergedProps, _react.default.createElement("div", {
className: classPrefix
}, _react.default.createElement(_list.default, null, panels.map(panel => {
const key = panel.key;
const active = activeKeyList.includes(key);
function handleClick(event) {
var _a, _b;
if (mergedProps.accordion) {
if (active) {
setActiveKey([]);
} else {
setActiveKey([key]);
}
} else {
if (active) {
setActiveKey(activeKeyList.filter(v => v !== key));
} else {
setActiveKey([...activeKeyList, key]);
}
}
(_b = (_a = panel.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
}
const arrow = (0, _withDefaultProps.mergeProp)(_react.default.createElement(_antdMobileIcons.DownOutline, null), mergedProps.arrow, mergedProps.arrowIcon, panel.props.arrow, panel.props.arrowIcon);
const arrowIcon = typeof arrow === 'function' ? arrow(active) : _react.default.createElement("div", {
className: (0, _classnames.default)(`${classPrefix}-arrow`, {
[`${classPrefix}-arrow-active`]: active
})
}, arrow);
return _react.default.createElement(_react.default.Fragment, {
key: key
}, (0, _nativeProps.withNativeProps)(panel.props, _react.default.createElement(_list.default.Item, {
className: `${classPrefix}-panel-header`,
onClick: handleClick,
disabled: panel.props.disabled,
arrowIcon: arrowIcon
}, panel.props.title)), _react.default.createElement(CollapsePanelContent, {
visible: active,
forceRender: !!panel.props.forceRender,
destroyOnClose: !!panel.props.destroyOnClose
}, panel.props.children));
}))));
};
exports.Collapse = Collapse;