@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
32 lines • 1.44 kB
JavaScript
;
exports.__esModule = true;
exports.DraggableModal = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var react_uid_1 = require("react-uid");
var DraggableModalContext_1 = require("./DraggableModalContext");
var DraggableModalInner_1 = require("./DraggableModalInner");
var draggableModalReducer_1 = require("./draggableModalReducer");
var DraggableModal = function (props) {
// Get the unique ID of this modal.
var id = (0, react_uid_1.useUID)();
// Get modal provider.
var modalProvider = (0, react_1.useContext)(DraggableModalContext_1.DraggableModalContext);
if (!modalProvider) {
throw new Error('No Provider');
}
var dispatch = modalProvider.dispatch, state = modalProvider.state;
var modalState = (0, draggableModalReducer_1.getModalState)({
state: state,
id: id,
initialHeight: props.initialHeight,
initialWidth: props.initialWidth
});
// We do this so that we don't re-render all modals for every state change.
// DraggableModalInner uses React.memo, so it only re-renders if
// if props change (e.g. modalState).
return ((0, jsx_runtime_1.jsx)(DraggableModalInner_1.DraggableModalInner, tslib_1.__assign({ id: id, dispatch: dispatch, modalState: modalState }, props)));
};
exports.DraggableModal = DraggableModal;
//# sourceMappingURL=DraggableModal.js.map