UNPKG

@mui/x-tree-view

Version:

The community edition of the MUI X Tree View components.

126 lines (118 loc) 6.13 kB
import _extends from "@babel/runtime/helpers/esm/extends"; import { Store } from '@mui/x-internals/store'; import { warnOnce } from '@mui/x-internals/warning'; import { EventManager } from '@mui/x-internals/EventManager'; import { createMinimalInitialState, createTreeViewDefaultId, deriveStateFromParameters } from "./MinimalTreeViewStore.utils.js"; import { TimeoutManager } from "./TimeoutManager.js"; import { TreeViewKeyboardNavigationPlugin } from "../plugins/keyboardNavigation/index.js"; import { TreeViewFocusPlugin } from "../plugins/focus/TreeViewFocusPlugin.js"; import { TreeViewItemsPlugin } from "../plugins/items/TreeViewItemsPlugin.js"; import { TreeViewSelectionPlugin } from "../plugins/selection/TreeViewSelectionPlugin.js"; import { TreeViewExpansionPlugin } from "../plugins/expansion/index.js"; import { TreeViewItemPluginManager } from "./TreeViewItemPluginManager.js"; export class MinimalTreeViewStore extends Store { initialParameters = null; eventManager = (() => new EventManager())(); timeoutManager = (() => new TimeoutManager())(); itemPluginManager = (() => new TreeViewItemPluginManager())(); constructor(parameters, instanceName, mapper) { const minimalInitialState = createMinimalInitialState(parameters); const initialState = mapper.getInitialState(minimalInitialState, parameters); super(initialState); this.parameters = parameters; this.instanceName = instanceName; this.mapper = mapper; // We mount the plugins in the constructor to make sure all the methods of the store are available to the plugins during their construction. this.items = new TreeViewItemsPlugin(this); this.focus = new TreeViewFocusPlugin(this); this.expansion = new TreeViewExpansionPlugin(this); this.selection = new TreeViewSelectionPlugin(this); this.keyboardNavigation = new TreeViewKeyboardNavigationPlugin(this); if (process.env.NODE_ENV !== 'production') { this.initialParameters = parameters; } } /** * Builds an object containing the method that should be exposed publicly by the Tree View components. */ buildPublicAPI() { return _extends({}, this.items.buildPublicAPI(), this.focus.buildPublicAPI(), this.expansion.buildPublicAPI(), this.selection.buildPublicAPI()); } /** * Updates the state of the Tree View based on the new parameters provided to the root component. */ updateStateFromParameters(parameters) { const updateModel = (mutableNewState, controlledProp, defaultProp) => { if (parameters[controlledProp] !== undefined) { mutableNewState[controlledProp] = parameters[controlledProp]; } if (process.env.NODE_ENV !== 'production') { const defaultValue = parameters[defaultProp]; const isControlled = parameters[controlledProp] !== undefined; const initialDefaultValue = this.initialParameters?.[defaultProp]; const initialIsControlled = this.initialParameters?.[controlledProp] !== undefined; if (initialIsControlled !== isControlled) { warnOnce([`MUI X Tree View: A component is changing the ${initialIsControlled ? '' : 'un'}controlled ${controlledProp} state of ${this.instanceName} to be ${initialIsControlled ? 'un' : ''}controlled.`, 'Elements should not switch from uncontrolled to controlled (or vice versa).', `Decide between using a controlled or uncontrolled ${controlledProp} element for the lifetime of the component.`, "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", 'More info: https://fb.me/react-controlled-components'], 'error'); } else if (JSON.stringify(initialDefaultValue) !== JSON.stringify(defaultValue)) { warnOnce([`MUI X Tree View: A component is changing the default ${controlledProp} state of an uncontrolled ${this.instanceName} after being initialized. `, `To suppress this warning opt to use a controlled ${this.instanceName}.`], 'error'); } } }; const newMinimalState = deriveStateFromParameters(parameters); updateModel(newMinimalState, 'expandedItems', 'defaultExpandedItems'); updateModel(newMinimalState, 'selectedItems', 'defaultSelectedItems'); if (this.state.providedTreeId !== parameters.id || this.state.treeId === undefined) { newMinimalState.treeId = createTreeViewDefaultId(); } if (!this.mapper.shouldIgnoreItemsStateUpdate(parameters) && TreeViewItemsPlugin.shouldRebuildItemsState(parameters, this.parameters)) { Object.assign(newMinimalState, TreeViewItemsPlugin.buildItemsStateIfNeeded(parameters)); } const newState = this.mapper.updateStateFromParameters(newMinimalState, parameters, updateModel); this.update(newState); this.parameters = parameters; } /** * Returns a cleanup function that need to be called when the store is destroyed. */ disposeEffect = () => { return this.timeoutManager.clearAll; }; /** * Whether updates based on `props.items` change should be ignored. */ shouldIgnoreItemsStateUpdate = () => { return this.mapper.shouldIgnoreItemsStateUpdate(this.parameters); }; /** * Registers an effect to be run when the value returned by the selector changes. */ registerStoreEffect = (selector, effect) => { let previousValue = selector(this.state); this.subscribe(state => { const nextValue = selector(state); if (nextValue !== previousValue) { effect(previousValue, nextValue); previousValue = nextValue; } }); }; /** * Publishes an event to all its subscribers. */ publishEvent = (name, params, event) => { if (isSyntheticEvent(event) && event.isPropagationStopped()) { return; } this.eventManager.emit(name, params, event); }; /** * Subscribe to an event emitted by the store. * For now, the subscription is only removed when the store is destroyed. */ subscribeEvent = (eventName, handler) => { this.eventManager.on(eventName, handler); }; } function isSyntheticEvent(event) { return event.isPropagationStopped !== undefined; }