@rtbjs/use-state
Version:
`@rtbjs/use-state` is a state management tool that can act as a local state and be easily turned into a global redux state. It is an innovative approach to state management that combines the advantages of both React's useState and Redux's state management
36 lines • 3.45 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.ReduxHistory = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var antd_1 = require("antd");
var use_redux_history_search_1 = require("./use-redux-history-search");
var create_item_modal_1 = require("./components/create-item-modal");
var react_1 = require("react");
var get_selected_item_1 = require("./get-selected-item");
var edit_item_modal_1 = require("./components/edit-item-modal");
var delete_item_popup_1 = require("./components/delete-item-popup");
var store_1 = require("../../redux/store");
var Import_state_button_1 = require("./components/Import-state-button");
var item_details_1 = require("./components/item-details");
var Trigger = function (_a) {
var onClick = _a.onClick, icon = _a.icon, title = _a.title;
return ((0, jsx_runtime_1.jsx)(antd_1.Tooltip, tslib_1.__assign({ title: title }, { children: (0, jsx_runtime_1.jsx)(antd_1.Button, { icon: icon, onClick: onClick }) })));
};
var ReduxHistory = function (_a) {
var root = _a.root, setParentReduxState = _a.setParentReduxState;
var parentReduxState = (0, store_1.useAppSelector)(function (state) { return state.reduxHistoryState.parentReduxState; });
var defaultSelectedKey = (root === null || root === void 0 ? void 0 : root.id) || '';
var _b = (0, react_1.useState)(defaultSelectedKey), selectedKey = _b[0], setSelectedKey = _b[1];
(0, react_1.useEffect)(function () {
setSelectedKey(defaultSelectedKey);
}, [defaultSelectedKey]);
var _c = (0, use_redux_history_search_1.useReduxHistorySearch)(root), autoExpandParent = _c.autoExpandParent, expandedKeys = _c.expandedKeys, onChange = _c.onChange, onExpand = _c.onExpand, treeData = _c.treeData;
var handleOnSelect = function (ids) {
setSelectedKey(ids.length ? ids[0].toString() : defaultSelectedKey);
};
var selectedItem = root ? (0, get_selected_item_1.getSelectedItem)(selectedKey, [root]) : undefined;
return root ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(antd_1.Space, tslib_1.__assign({ direction: "vertical" }, { children: (0, jsx_runtime_1.jsxs)(antd_1.Space, tslib_1.__assign({ wrap: true }, { children: [(0, jsx_runtime_1.jsx)(create_item_modal_1.CreateItemModal, { Trigger: Trigger, root: root, selectedItem: selectedItem }), (0, jsx_runtime_1.jsx)(create_item_modal_1.CreateItemModal, { Trigger: Trigger, root: root, isState: true, selectedItem: selectedItem, parentReduxState: parentReduxState }), (0, jsx_runtime_1.jsx)(Import_state_button_1.ImportStateButton, { Trigger: Trigger, selectedItem: selectedItem, setParentReduxState: setParentReduxState }), (0, jsx_runtime_1.jsx)(edit_item_modal_1.EditItemModal, { Trigger: Trigger, selectedItem: selectedItem }), (0, jsx_runtime_1.jsx)(item_details_1.ItemDetails, { Trigger: Trigger, selectedItem: selectedItem }), (0, jsx_runtime_1.jsx)(delete_item_popup_1.DeleteItemPopup, { Trigger: Trigger, selectedItem: selectedItem })] })) })), (0, jsx_runtime_1.jsx)(antd_1.Input.Search, { style: { margin: '4px 0' }, placeholder: "Search", onChange: onChange }), (0, jsx_runtime_1.jsx)(antd_1.Tree.DirectoryTree, { selectedKeys: [selectedKey], onExpand: onExpand, expandedKeys: expandedKeys, autoExpandParent: autoExpandParent, treeData: treeData, onSelect: handleOnSelect })] })) : null;
};
exports.ReduxHistory = ReduxHistory;
//# sourceMappingURL=redux-history.js.map