@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
33 lines • 2.91 kB
JavaScript
import { __assign } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button, Input, Space, Tooltip, Tree } from 'antd';
import { useReduxHistorySearch } from './use-redux-history-search';
import { CreateItemModal } from './components/create-item-modal';
import { useEffect, useState } from 'react';
import { getSelectedItem } from './get-selected-item';
import { EditItemModal } from './components/edit-item-modal';
import { DeleteItemPopup } from './components/delete-item-popup';
import { useAppSelector } from '../../redux/store';
import { ImportStateButton } from './components/Import-state-button';
import { ItemDetails } from './components/item-details';
var Trigger = function (_a) {
var onClick = _a.onClick, icon = _a.icon, title = _a.title;
return (_jsx(Tooltip, __assign({ title: title }, { children: _jsx(Button, { icon: icon, onClick: onClick }) })));
};
var ReduxHistory = function (_a) {
var root = _a.root, setParentReduxState = _a.setParentReduxState;
var parentReduxState = useAppSelector(function (state) { return state.reduxHistoryState.parentReduxState; });
var defaultSelectedKey = (root === null || root === void 0 ? void 0 : root.id) || '';
var _b = useState(defaultSelectedKey), selectedKey = _b[0], setSelectedKey = _b[1];
useEffect(function () {
setSelectedKey(defaultSelectedKey);
}, [defaultSelectedKey]);
var _c = 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 ? getSelectedItem(selectedKey, [root]) : undefined;
return root ? (_jsxs(_Fragment, { children: [_jsx(Space, __assign({ direction: "vertical" }, { children: _jsxs(Space, __assign({ wrap: true }, { children: [_jsx(CreateItemModal, { Trigger: Trigger, root: root, selectedItem: selectedItem }), _jsx(CreateItemModal, { Trigger: Trigger, root: root, isState: true, selectedItem: selectedItem, parentReduxState: parentReduxState }), _jsx(ImportStateButton, { Trigger: Trigger, selectedItem: selectedItem, setParentReduxState: setParentReduxState }), _jsx(EditItemModal, { Trigger: Trigger, selectedItem: selectedItem }), _jsx(ItemDetails, { Trigger: Trigger, selectedItem: selectedItem }), _jsx(DeleteItemPopup, { Trigger: Trigger, selectedItem: selectedItem })] })) })), _jsx(Input.Search, { style: { margin: '4px 0' }, placeholder: "Search", onChange: onChange }), _jsx(Tree.DirectoryTree, { selectedKeys: [selectedKey], onExpand: onExpand, expandedKeys: expandedKeys, autoExpandParent: autoExpandParent, treeData: treeData, onSelect: handleOnSelect })] })) : null;
};
export { ReduxHistory };
//# sourceMappingURL=redux-history.js.map