antd-mobile-taro-ui
Version:
以antd-mobile为设计标准，基于taro框架的微信小程序组件库
180 lines (144 loc) • 6.59 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.JumboTabs = exports.JumboTab = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _nativeProps = require("antd-mobile/es/utils/native-props");
var _usePropsValue = require("antd-mobile/es/utils/use-props-value");
var _shouldRender = require("antd-mobile/es/utils/should-render");
var _traverseReactNode = require("antd-mobile/es/utils/traverse-react-node");
var _components = require("@tarojs/components");
var _taro = _interopRequireDefault(require("@tarojs/taro"));
var _uuid = require("../../utils/uuid");
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-jumbo-tabs`;
const JumboTab = () => {
return null;
};
exports.JumboTab = JumboTab;
const JumboTabs = props => {
var _a;
const id = (0, _react.useMemo)(() => (0, _uuid.uuid)(16, undefined, false), []);
let firstActiveKey = null;
const panes = [];
(0, _traverseReactNode.traverseReactNode)(props.children, (child, index) => {
if (!_react.default.isValidElement(child)) return;
const {
key
} = child;
if (typeof key !== 'string') return;
if (index === 0) {
firstActiveKey = key;
}
panes.push(child);
});
const [activeKey, setActiveKey] = (0, _usePropsValue.usePropsValue)({
value: props.activeKey,
defaultValue: (_a = props.defaultActiveKey) !== null && _a !== void 0 ? _a : firstActiveKey,
onChange: v => {
var _a;
if (v === null) return;
(_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
}
});
const [scrollLeft, setScrollLeft] = (0, _react.useState)(0);
const [layoutWidth, setLayoutWidth] = (0, _react.useState)(0);
const [offsetLeft, setOffsetLeft] = (0, _react.useState)([]);
const computeScrollLeft = (0, _react.useCallback)(index => {
let left = 0;
for (let i = 0; i < offsetLeft.length; i++) {
if (i >= index) break;
left += offsetLeft[i];
}
return left;
}, [offsetLeft]);
(0, _react.useEffect)(() => {
setTimeout(() => {
let width = 0;
_taro.default.createSelectorQuery().select(`#${id} .${classPrefix}-header`).boundingClientRect(rect => {
var _a, _b;
setLayoutWidth((_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0);
width = (_b = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _b !== void 0 ? _b : 0;
}).exec();
const map = new Map();
for (let i = 0; i < panes.length; i++) {
map.set(panes[i].key, i);
}
_taro.default.createSelectorQuery().selectAll(`#${id} .${classPrefix}-tab-wrapper`).boundingClientRect(rect => {
const n = [];
for (let i = 0; i < rect.length; i++) {
n.push(rect[i].width);
}
setOffsetLeft([...n]);
let left = 0;
const m = map.get(activeKey);
for (const [, index] of map) {
if (index < m) {
left += rect[index].width;
}
}
setScrollLeft(left - width / 2 + rect[m].width / 2);
}).exec();
}, 0);
}, []);
const handleAnimation = (0, _react.useCallback)(index => {
const left = computeScrollLeft(index);
setScrollLeft(left - layoutWidth / 2 + offsetLeft[index] / 2);
}, [layoutWidth, offsetLeft]);
return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(_components.View, {
className: classPrefix,
id: id
}, _react.default.createElement(_components.View, {
className: `${classPrefix}-header`
}, _react.default.createElement(_components.ScrollView, {
scrollX: true,
scrollLeft: scrollLeft,
scrollWithAnimation: true
}, _react.default.createElement(_components.View, {
className: `${classPrefix}-tab-list`
}, panes.map((pane, index) => (0, _nativeProps.withNativeProps)(pane.props, _react.default.createElement(_components.View, {
key: pane.key,
className: `${classPrefix}-tab-wrapper`
}, _react.default.createElement(_components.View, {
onClick: () => {
const {
key
} = pane;
if (pane.props.disabled) return;
if (key === undefined || key === null) {
return;
}
setActiveKey(key.toString());
handleAnimation(index);
},
className: (0, _classnames.default)(`${classPrefix}-tab`, {
[`${classPrefix}-tab-active`]: pane.key === activeKey,
[`${classPrefix}-tab-disabled`]: pane.props.disabled
})
}, _react.default.createElement(_components.View, {
className: `${classPrefix}-tab-title`
}, pane.props.title), _react.default.createElement(_components.View, {
className: `${classPrefix}-tab-description`
}, pane.props.description)))))))), panes.map(pane => {
if (pane.props.children === undefined) {
return null;
}
const active = pane.key === activeKey;
return _react.default.createElement(_shouldRender.ShouldRender, {
key: pane.key,
active: active,
forceRender: pane.props.forceRender,
destroyOnClose: pane.props.destroyOnClose
}, _react.default.createElement(_components.View, {
className: `${classPrefix}-content`,
style: {
display: active ? 'block' : 'none'
}
}, pane.props.children));
})));
};
exports.JumboTabs = JumboTabs;