antd-mobile-taro-ui
Version:
以antd-mobile为设计标准，基于taro框架的微信小程序组件库
201 lines (167 loc) • 7.45 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Tabs = exports.Tab = 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 _withDefaultProps = require("antd-mobile/es/utils/with-default-props");
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-tabs`;
const Tab = () => {
return null;
};
exports.Tab = Tab;
const defaultProps = {
activeLineMode: 'auto',
stretch: true
};
const Tabs = p => {
var _a;
const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
let firstActiveKey = null;
const panes = [];
const ref = (0, _react.useRef)(new Map());
(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);
ref.current.set(child.key, index);
});
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 id = (0, _react.useMemo)(() => (0, _uuid.uuid)(16, undefined, false), []);
const [scrollLeft, setScrollLeft] = (0, _react.useState)(0);
const [layoutWidth, setLayoutWidth] = (0, _react.useState)(0);
const [offsetLeft, setOffsetLeft] = (0, _react.useState)([]);
(0, _react.useEffect)(() => {
setTimeout(() => {
_taro.default.createSelectorQuery().select(`#${id} .${classPrefix}-header`).boundingClientRect(rect => {
var _a;
setLayoutWidth((_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0);
}).exec();
_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]);
setScrollLeft(computeScrollLeft(activeKey));
}).exec();
}, 0);
}, []);
const computeScrollLeft = (0, _react.useCallback)(key => {
if (!ref.current) return 0;
const index = ref.current.get(key);
let left = 0;
for (let i = 0; i < offsetLeft.length; i++) {
if (i >= index) break;
left += offsetLeft[i];
}
if (left < layoutWidth / 2) return 0;
const count = offsetLeft.reduce((a, b) => a + b, 0);
if (count - left < layoutWidth / 2) return left;
return left - layoutWidth / 2 + offsetLeft[index] / 2;
}, [offsetLeft, layoutWidth]);
const handleAnimation = (0, _react.useCallback)(key => {
setScrollLeft(computeScrollLeft(key));
}, [layoutWidth, offsetLeft]);
const computeLineLeft = (0, _react.useCallback)(key => {
if (!ref.current) return 0;
const index = ref.current.get(key);
let left = 0;
for (let i = 0; i < offsetLeft.length; i++) {
if (i >= index) break;
left += offsetLeft[i];
}
if (left < layoutWidth / 2) return left;
const count = offsetLeft.reduce((a, b) => a + b, 0);
if (count - left < layoutWidth / 2) return left;
return left;
}, [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`
}, _react.default.createElement(_components.View, {
className: `${classPrefix}-tab-line`,
style: {
margin: '0 auto',
width: offsetLeft[ref.current.get(activeKey)],
left: computeLineLeft(activeKey),
transition: 'all 0.5s'
}
}, _react.default.createElement(_components.View, {
className: `${classPrefix}-tab-line-content`,
style: {
width: props.activeLineMode === 'fixed' ? 'var(--fixed-active-line-width, 30px)' : offsetLeft[ref.current.get(activeKey)]
}
})), panes.map(pane => (0, _nativeProps.withNativeProps)(pane.props, _react.default.createElement(_components.View, {
key: pane.key,
className: (0, _classnames.default)(`${classPrefix}-tab-wrapper`, {
[`${classPrefix}-tab-wrapper-stretch`]: props.stretch
})
}, _react.default.createElement(_components.View, {
onClick: () => {
const {
key
} = pane;
if (pane.props.disabled) return;
if (key === undefined || key === null) {
return;
}
setActiveKey(key.toString());
handleAnimation(key.toString());
},
className: (0, _classnames.default)(`${classPrefix}-tab`, {
[`${classPrefix}-tab-active`]: pane.key === activeKey,
[`${classPrefix}-tab-disabled`]: pane.props.disabled
})
}, pane.props.title))))))), 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.Tabs = Tabs;