@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
99 lines • 6.01 kB
JavaScript
import { __assign, __spreadArray } from "tslib";
import { getWindowSize } from './getWindowSize';
import { clamp } from './clamp';
var mapObject = function (o, f) {
return Object.assign.apply(Object, __spreadArray([{}], Object.keys(o).map(function (k) {
var _a;
return (_a = {}, _a[k] = f(o[k]), _a);
}), false));
};
export var initialModalsState = {
maxZIndex: 0,
windowSize: getWindowSize(),
modals: {}
};
export var initialModalState = {
x: 0,
y: 0,
width: 800,
height: 800,
zIndex: 0,
visible: false
};
var getInitialModalState = function (_a) {
var _b = _a.initialWidth, initialWidth = _b === void 0 ? initialModalState.width : _b, _c = _a.initialHeight, initialHeight = _c === void 0 ? initialModalState.height : _c;
return __assign(__assign({}, initialModalState), { width: initialWidth, height: initialHeight });
};
export var getModalState = function (_a) {
var state = _a.state, id = _a.id, initialWidth = _a.initialWidth, initialHeight = _a.initialHeight;
return state.modals[id] || getInitialModalState({ initialWidth: initialWidth, initialHeight: initialHeight });
};
var getNextZIndex = function (state, id) {
return getModalState({ state: state, id: id }).zIndex === state.maxZIndex
? state.maxZIndex
: state.maxZIndex + 1;
};
var clampDrag = function (windowWidth, windowHeight, x, y, width, height) {
var maxX = windowWidth - width;
var maxY = windowHeight - height;
var clampedX = clamp(0, maxX, x);
var clampedY = clamp(0, maxY, y);
return { x: clampedX, y: clampedY };
};
var clampResize = function (windowWidth, windowHeight, x, y, width, height) {
var maxWidth = windowWidth - x;
var maxHeight = windowHeight - y;
var clampedWidth = clamp(200, maxWidth, width);
var clampedHeight = clamp(200, maxHeight, height);
return { width: clampedWidth, height: clampedHeight };
};
export var draggableModalReducer = function (state, action) {
var _a, _b, _c, _d, _e, _f;
switch (action.type) {
case 'resize': {
var size = clampResize(state.windowSize.width, state.windowSize.height, action.x, action.y, action.width, action.height);
return __assign(__assign({}, state), { maxZIndex: getNextZIndex(state, action.id), modals: __assign(__assign({}, state.modals), (_a = {}, _a[action.id] = __assign(__assign(__assign({}, state.modals[action.id]), size), { zIndex: getNextZIndex(state, action.id) }), _a)) });
}
case 'drag':
return __assign(__assign({}, state), { maxZIndex: getNextZIndex(state, action.id), modals: __assign(__assign({}, state.modals), (_b = {}, _b[action.id] = __assign(__assign(__assign({}, state.modals[action.id]), clampDrag(state.windowSize.width, state.windowSize.height, action.x, action.y, state.modals[action.id].width, state.modals[action.id].height)), { zIndex: getNextZIndex(state, action.id) }), _b)) });
case 'show': {
var modalState = state.modals[action.id];
var centerX = state.windowSize.width / 2 - modalState.width / 2;
var centerY = state.windowSize.height / 2 - modalState.height / 2;
var currentX = modalState.x;
var currentY = modalState.y;
var position = clampDrag(state.windowSize.width, state.windowSize.height, modalState.hasBeenVisible ? currentX : centerX, modalState.hasBeenVisible ? currentY : centerY, modalState.width, modalState.height);
var size = clampResize(state.windowSize.width, state.windowSize.height, position.x, position.y, modalState.width, modalState.height);
return __assign(__assign({}, state), { maxZIndex: state.maxZIndex + 1, modals: __assign(__assign({}, state.modals), (_c = {}, _c[action.id] = __assign(__assign(__assign(__assign({}, modalState), position), size), { zIndex: state.maxZIndex + 1, visible: true, hasBeenVisible: true }), _c)) });
}
case 'focus': {
var modalState = state.modals[action.id];
return __assign(__assign({}, state), { maxZIndex: state.maxZIndex + 1, modals: __assign(__assign({}, state.modals), (_d = {}, _d[action.id] = __assign(__assign({}, modalState), { zIndex: state.maxZIndex + 1 }), _d)) });
}
case 'hide': {
var modalState = state.modals[action.id];
return __assign(__assign({}, state), { modals: __assign(__assign({}, state.modals), (_e = {}, _e[action.id] = __assign(__assign({}, modalState), { visible: false }), _e)) });
}
case 'mount': {
var initialState = getInitialModalState(action.intialState);
return __assign(__assign({}, state), { maxZIndex: state.maxZIndex + 1, modals: __assign(__assign({}, state.modals), (_f = {}, _f[action.id] = __assign(__assign({}, initialState), { x: state.windowSize.width / 2 - initialState.width / 2, y: state.windowSize.height / 2 - initialState.height / 2, zIndex: state.maxZIndex + 1 }), _f)) });
}
case 'unmount': {
var modalsClone = __assign({}, state.modals);
delete modalsClone[action.id];
return __assign(__assign({}, state), { modals: modalsClone });
}
case 'windowResize':
return __assign(__assign({}, state), { windowSize: action.size, modals: mapObject(state.modals, function (modalState) {
if (!modalState.visible) {
return modalState;
}
var position = clampDrag(state.windowSize.width, state.windowSize.height, modalState.x, modalState.y, modalState.width, modalState.height);
var size = clampResize(state.windowSize.width, state.windowSize.height, position.x, position.y, modalState.width, modalState.height);
return __assign(__assign(__assign({}, modalState), position), size);
}) });
default:
throw new Error();
}
};
//# sourceMappingURL=draggableModalReducer.js.map