UNPKG

@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
"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