antd-mobile-taro-ui
Version:
以antd-mobile为设计标准，基于taro框架的微信小程序组件库
195 lines (157 loc) • 7.31 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CollapsePanel = exports.Collapse = void 0;
var _react = _interopRequireWildcard(require("react"));
var _nativeProps = require("antd-mobile/es/utils/native-props");
var _antdMobileTaroIcons = require("antd-mobile-taro-icons");
var _classnames = _interopRequireDefault(require("classnames"));
var _usePropsValue = require("antd-mobile/es/utils/use-props-value");
var _shouldRender = require("antd-mobile/es/utils/should-render");
var _useIsomorphicUpdateLayoutEffect = require("antd-mobile/es/utils/use-isomorphic-update-layout-effect");
var _traverseReactNode = require("antd-mobile/es/utils/traverse-react-node");
var _components = require("@tarojs/components");
var _taro = _interopRequireDefault(require("@tarojs/taro"));
var _ahooks = require("ahooks");
var _client = require("../../utils/client");
var _list = _interopRequireDefault(require("../list"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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; }
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, setHeight] = (0, _react.useState)(0);
const nodeRef = (0, _react.useRef)(null);
(0, _ahooks.useMount)(() => {
if (_client.isWeapp) {
setTimeout(() => {
const inner = innerRef.current;
if (!inner) return;
if (inner === null || inner === void 0 ? void 0 : inner.sid) {
nodeRef.current = _taro.default.createSelectorQuery().select(`#${inner === null || inner === void 0 ? void 0 : inner.sid}`);
} else {
console.error(`HTMLDivElement: Taro node can no find sid`);
}
if (!visible) return;
if (!nodeRef.current) return;
nodeRef.current.boundingClientRect(rect => setHeight(rect.height)).exec();
}, 0);
}
});
(0, _useIsomorphicUpdateLayoutEffect.useIsomorphicUpdateLayoutEffect)(() => {
if (_client.isWeapp) {
if (!nodeRef.current) return;
if (visible) {
if (!nodeRef.current) return;
_taro.default.nextTick(() => {
if (!nodeRef.current) return;
nodeRef.current.boundingClientRect(rect => {
setHeight(rect.height);
}).exec();
});
setTimeout(() => {
setHeight('auto');
}, 200);
} else {
nodeRef.current.boundingClientRect(rect => {
setHeight(rect.height);
}).exec();
setTimeout(() => {
setHeight(0);
}, 200);
}
}
}, [visible]);
return _react.default.createElement(_components.View, {
className: `${classPrefix}-panel-content`,
style: {
height: _client.isWeapp ? height : visible ? 'auto' : 0
}
}, _react.default.createElement(_components.View, {
className: `${classPrefix}-panel-content-inner`,
ref: innerRef
}, _react.default.createElement(_list.default.Item, null, shouldRender && props.children)));
};
const Collapse = props => {
var _a;
const panels = [];
(0, _traverseReactNode.traverseReactNode)(props.children, child => {
if (!_react.default.isValidElement(child)) return;
const {
key
} = child;
if (typeof key !== 'string') return;
panels.push(child);
});
const [activeKey, setActiveKey] = (0, _usePropsValue.usePropsValue)(props.accordion ? {
value: props.activeKey === undefined ? undefined : props.activeKey === null ? [] : [props.activeKey],
defaultValue: props.defaultActiveKey === undefined || props.defaultActiveKey === null ? [] : [props.defaultActiveKey],
onChange: v => {
var _a, _b;
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, (_b = v[0]) !== null && _b !== void 0 ? _b : null);
}
} : {
value: props.activeKey,
defaultValue: (_a = props.defaultActiveKey) !== null && _a !== void 0 ? _a : [],
onChange: props.onChange
});
const activeKeyList = activeKey === null ? [] : Array.isArray(activeKey) ? activeKey : [activeKey];
return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(_components.View, {
className: classPrefix
}, _react.default.createElement(_list.default, null, panels.map(panel => {
const key = panel.key;
const active = activeKeyList.includes(key);
const handleClick = event => {
var _a, _b;
if (props.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 renderArrow = () => {
let arrow = _react.default.createElement(_antdMobileTaroIcons.UnfoldIcon, null);
if (props.arrow !== undefined) {
arrow = props.arrow;
}
if (panel.props.arrow !== undefined) {
arrow = panel.props.arrow;
}
return typeof arrow === 'function' ? arrow(active) : _react.default.createElement(_components.View, {
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,
arrow: renderArrow()
}, panel.props.title)), _react.default.createElement(CollapsePanelContent, {
visible: active,
forceRender: !!panel.props.forceRender,
destroyOnClose: !!panel.props.destroyOnClose
}, panel.props.children));
}))));
};
exports.Collapse = Collapse;