taro-manage-layout
Version:
48 lines (47 loc) • 3.21 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
var _a;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Menus = void 0;
const react_1 = __importDefault(require("react"));
const taro_1 = __importDefault(require("@tarojs/taro"));
const components_1 = require("@tarojs/components");
const store_1 = require("../../store");
const react_2 = require("react");
const assets_1 = require("../../../../assets");
const windowInfo = taro_1.default.getWindowInfo();
const safeAreaLeft = (_a = windowInfo.safeArea) === null || _a === void 0 ? void 0 : _a.left;
const Menus = () => {
const { menus_list, menus_visible, onSwitchMenusVisible, menus, onSelectMenu } = (0, store_1.store)();
const menusList = [undefined, ...menus_list];
(0, react_2.useEffect)(() => {
if (menus_list.length > 0) {
onSelectMenu(menus_list[0]);
}
}, [menus_list]);
return (react_1.default.createElement(components_1.View, { style: Object.assign(Object.assign({}, !menus_visible ? {
transform: `translateX(calc(0px - calc(${taro_1.default.pxTransform(70)} + ${safeAreaLeft}px + ${taro_1.default.pxTransform(5)})))`
} : {
transform: `translateX(0px)`
}), { marginLeft: safeAreaLeft ? `calc(${safeAreaLeft}px + ${taro_1.default.pxTransform(5)})` : 0 }), className: `menus-container` },
react_1.default.createElement(components_1.View, { className: "layout-info-box" },
react_1.default.createElement(components_1.Text, { className: "layout-name" }, "\u725B\u5C0F\u5948\u00AE")),
react_1.default.createElement(components_1.View, { className: "menus-switch-button", onClick: onSwitchMenusVisible, style: Object.assign({}, !menus_visible && {
width: `${taro_1.default.pxTransform(15)}`,
right: `-${taro_1.default.pxTransform(15)}`
}) },
react_1.default.createElement(components_1.Image, { src: assets_1.icon.arrow_left, className: "arrow-left-icon", style: {
transform: `rotate(${menus_visible ? `0deg` : `180deg`})`,
} })),
react_1.default.createElement(components_1.ScrollView, { className: "menus-list-box", enableFlex: true, enhanced: true, scrollY: true, showScrollbar: false },
react_1.default.createElement(components_1.View, { className: "menus-list-content" }, menusList.map((item, index) => {
return (react_1.default.createElement(components_1.View, { key: `menus-key-${index}-${Math.ceil(Math.random() * 1000)}`, className: `menus-item ${(menus === null || menus === void 0 ? void 0 : menus.id) === (item === null || item === void 0 ? void 0 : item.id) ? `checked` : ``}`, onClick: () => { if (item) {
onSelectMenu(item);
} } },
react_1.default.createElement(components_1.Text, { className: "menus-name" }, item === null || item === void 0 ? void 0 : item.label),
react_1.default.createElement(components_1.View, { className: "bottom-limit" })));
})))));
};
exports.Menus = Menus;