@wener/console
Version:
Base console UI toolkit
313 lines (312 loc) • 12.2 kB
JavaScript
function _define_property(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
}
else {
obj[key] = value;
}
return obj;
}
function _object_spread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === "function") {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function (key) {
_define_property(target, key, source[key]);
});
}
return target;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _object_spread_props(target, source) {
source = source != null ? source : {};
if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
}
else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
import { use } from "react";
import { createReactContext } from "@wener/reaction";
import { createBoundedUseStore } from "@wener/reaction/zustand";
import { create } from "zustand";
import { mutative } from "zustand-mutative";
import { createEmitter } from "../../events/createEmitter.js";
import { createViewComponentStateHook } from "../createViewComponentStateHook.js";
export var DataViewEventType = {
Refresh: "Refresh",
Reset: "Reset",
DataChanged: "DataChanged",
SelectionChanged: "SelectionChanged",
ActiveChanged: "ActiveChanged",
QueryChanged: "QueryChanged",
ViewChanged: "ViewChanged",
ComponentStateChanged: "ComponentStateChanged",
Debug: "Debug"
};
export function createDataViewStore() {
var initialState = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
return create(mutative(function (setState, getState, store) {
var events = createEmitter("DataViewEmitter");
// Default state
var defaultState = {
// Data Layer
data: [],
total: 0,
loading: false,
error: undefined,
result: {
data: [],
total: 0
},
// Selection Layer
selected: [],
active: undefined,
query: {
search: "",
pageIndex: 0,
pageSize: 30,
sort: [],
filters: [],
where: undefined
},
filter: {
search: "",
pageIndex: 0,
pageSize: 30
},
// View Layer
view: {
mode: "list"
},
components: {},
// Event System
events: events,
// Metadata
metadata: {},
// Actions (will be set below)
actions: {}
};
// Merge with initial state
var state = _object_spread({}, defaultState, initialState);
return _object_spread_props(_object_spread({}, state), {
query: _object_spread({}, defaultState.query, initialState === null || initialState === void 0 ? void 0 : initialState.query),
filter: _object_spread({}, defaultState.filter, initialState === null || initialState === void 0 ? void 0 : initialState.filter),
// Actions
actions: {
// Data operations
refresh: function refresh() {
events.emit(DataViewEventType.Refresh, {});
},
reset: function reset() {
events.emit(DataViewEventType.Reset, {});
setState(function (state) {
Object.assign(state, defaultState);
});
},
setData: function setData(data, total) {
setState(function (state) {
state.data = data;
state.total = total !== null && total !== void 0 ? total : data.length;
});
events.emit(DataViewEventType.DataChanged, {
data: data,
total: total !== null && total !== void 0 ? total : data.length
});
},
setLoading: function setLoading(loading) {
setState(function (state) {
state.loading = loading;
});
},
setError: function setError(error) {
setState(function (state) {
state.error = error;
});
},
// Selection operations
setSelected: function setSelected(selected) {
setState(function (state) {
state.selected = selected;
});
events.emit(DataViewEventType.SelectionChanged, {
selected: selected
});
},
toggleSelection: function toggleSelection(id) {
setState(function (state) {
var index = state.selected.indexOf(id);
if (index >= 0) {
state.selected.splice(index, 1);
}
else {
state.selected.push(id);
}
});
var newSelected = getState().selected;
events.emit(DataViewEventType.SelectionChanged, {
selected: newSelected
});
},
clearSelection: function clearSelection() {
setState(function (state) {
state.selected = [];
});
events.emit(DataViewEventType.SelectionChanged, {
selected: []
});
},
setActive: function setActive(active) {
setState(function (state) {
state.active = active;
});
events.emit(DataViewEventType.ActiveChanged, {
active: active
});
},
toggleActive: function toggleActive(item) {
setState(function (state) {
var _state_active;
// 如果当前 active 和传入的 item 是同一个对象，则清除 active
// 否则设置为传入的 item
if (((_state_active = state.active) === null || _state_active === void 0 ? void 0 : _state_active.id) === item.id) {
state.active = undefined;
}
else {
state.active = item;
}
});
var newActive = getState().active;
events.emit(DataViewEventType.ActiveChanged, {
active: newActive
});
},
// Query operations
setQuery: function setQuery(queryUpdate) {
setState(function (state) {
Object.assign(state.query, queryUpdate);
// Reset to first page when search changes
if (queryUpdate.search !== undefined) {
state.query.pageIndex = 0;
}
if (queryUpdate.pageSize !== undefined) {
state.query.pageIndex = 0;
}
});
var query = getState().actions.getQueryInput();
events.emit(DataViewEventType.QueryChanged, {
query: query
});
},
// View operations
setView: function setView(viewUpdate) {
setState(function (state) {
Object.assign(state.view, viewUpdate);
});
var view = getState().view;
events.emit(DataViewEventType.ViewChanged, {
view: view
});
},
setViewMode: function setViewMode(mode) {
getState().actions.setView({
mode: mode
});
},
setComponentState: function setComponentState(name, state) {
setState(function (s) {
s.components[name] = _object_spread({}, s.components[name], state);
});
var componentState = getState().components[name];
events.emit(DataViewEventType.ComponentStateChanged, {
name: name,
state: componentState
});
},
getComponentState: function getComponentState(name) {
return getState().components[name] || {};
},
// Utility operations
getQueryInput: function getQueryInput() {
var state = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : getState();
var query = state.query;
return {
pageIndex: query.pageIndex,
pageSize: query.pageSize,
order: query.sort ? formatSort(query.sort) : [],
search: query.search,
filters: query.filters,
where: query.where
};
},
debug: function debug() {
events.emit(DataViewEventType.Debug, {});
console.log("DataViewStore State:", getState());
}
}
});
}));
}
var DataViewContext = createReactContext("DataViewContext", undefined);
export function useDataViewStoreContext() {
var store = use(DataViewContext);
if (!store) {
throw new Error("DataViewStore not found in context");
}
return store;
}
export var useDataViewStore = createBoundedUseStore(useDataViewStoreContext);
export function useDataViewActions() {
return useDataViewStore(function (s) {
return s.actions;
});
}
function formatSort(sort) {
return sort.map(function (param) {
var field = param.field, order = param.order, nulls = param.nulls;
if (field) {
var r = field;
if (order) {
r += " ".concat(order);
}
if (nulls) {
r += " nulls ".concat(nulls);
}
return r;
}
return "";
}).filter(Boolean);
}
export function DataViewProvider(param) {
var value = param.value, children = param.children;
return /*#__PURE__*/ React.createElement(DataViewContext.Provider, {
value: value
}, children);
}
export var useDataViewComponentState = createViewComponentStateHook(useDataViewStore);