@lvce-editor/settings-view 1.12.0 → 1.14.0

package/dist/settingsViewWorkerMain.js

@@ -991,19 +991,24 @@ const create$1 = (id, uri, x, y, width, height) => {
     scrollOffset: 0,
     filteredItemsCount: 0,
     history: [],
+    historyIndex: -1,
     modifiedSettings: {}
   };
   set$1(id, state, state);
 };
 
-const isEqual$3 = (oldState, newState) => {
+const isEqual$4 = (oldState, newState) => {
   return oldState.focus === newState.focus;
 };
 
-const isEqual$2 = (oldState, newState) => {
+const isEqual$3 = (oldState, newState) => {
   return oldState.filteredItems === newState.filteredItems;
 };
 
+const isEqual$2 = (oldState, newState) => {
+  return newState.inputSource === User || oldState.scrollOffset === newState.scrollOffset;
+};
+
 const isEqual$1 = (oldState, newState) => {
   return oldState.filteredItems === newState.filteredItems;
 };
@@ -1012,13 +1017,14 @@ const RenderItems = 1;
 const RenderFocus = 2;
 const RenderValue = 3;
 const RenderSettingValues = 10;
+const RenderScrollOffset = 11;
 
 const isEqual = (oldState, newState) => {
   return newState.inputSource === User || oldState.searchValue === newState.searchValue;
 };
 
-const modules = [isEqual$3, isEqual$2, isEqual, isEqual$1];
-const numbers = [RenderFocus, RenderItems, RenderValue, RenderSettingValues];
+const modules = [isEqual$4, isEqual$3, isEqual, isEqual$1, isEqual$2];
+const numbers = [RenderFocus, RenderItems, RenderValue, RenderSettingValues, RenderScrollOffset];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1080,43 +1086,104 @@ const handleClickTab = (state, name) => {
   };
 };
 
+const addToHistory = (history, value) => {
+  let newHistory = history;
+  let newHistoryIndex = -1;
+  if (value && value.trim() && !history.includes(value)) {
+    newHistory = [...history, value];
+    newHistoryIndex = newHistory.length - 1;
+  } else if (value && value.trim()) {
+    // If value already exists in history, find its index
+    newHistoryIndex = history.indexOf(value);
+  }
+  return {
+    newHistory,
+    newHistoryIndex
+  };
+};
+
 const handleInput = (state, value, inputSource = User) => {
   const {
     items,
     tabs,
-    preferences
+    preferences,
+    history
   } = state;
   const filteredItems = getFilteredItems(items, tabs, value, preferences);
+  const {
+    newHistory,
+    newHistoryIndex
+  } = addToHistory(history, value);
   return {
     ...state,
     searchValue: value,
     filteredItems,
+    history: newHistory,
+    historyIndex: newHistoryIndex,
     inputSource
   };
 };
 
-const handleSettingChecked = (state, name, value) => {
-  // TODO update value
+const handleScroll = (state, scrollTop, inputSource = User) => {
   return {
-    ...state
+    ...state,
+    scrollOffset: scrollTop,
+    inputSource
   };
 };
 
-const handleSettingInput = (state, name, value, inputSource = User) => {
-  // TODO update value
+const getNewFilteredItems = (oldModifiedSetings, newModifiedSettings, items, tabs, searchValue, oldFilteredItems) => {
+  if (oldModifiedSetings === newModifiedSettings) {
+    return oldFilteredItems;
+  }
+  return getFilteredItems(items, tabs, searchValue, newModifiedSettings);
+};
+
+const getNewModifiedSettings = (modifiedSettings, name) => {
+  if (name in modifiedSettings) {
+    return modifiedSettings;
+  }
   return {
-    ...state,
-    inputSource
+    ...modifiedSettings,
+    [name]: true
   };
 };
 
-const handleSettingSelect = (state, name, value) => {
-  // TODO update value
+const handleSettingUpdate = (state, name, value, inputSource) => {
+  const {
+    modifiedSettings,
+    items,
+    tabs,
+    searchValue,
+    preferences,
+    filteredItems
+  } = state;
+  const newModifiedSettings = getNewModifiedSettings(modifiedSettings, name);
+  const newPreferences = {
+    ...preferences,
+    [name]: value
+  };
+  const newFilteredItems = getNewFilteredItems(modifiedSettings, newModifiedSettings, items, tabs, searchValue, filteredItems);
   return {
-    ...state
+    ...state,
+    inputSource,
+    filteredItems: newFilteredItems,
+    preferences: newPreferences
   };
 };
 
+const handleSettingChecked = (state, name, value, source = User) => {
+  return handleSettingUpdate(state, name, value, source);
+};
+
+const handleSettingInput = (state, name, value, inputSource = User) => {
+  return handleSettingUpdate(state, name, value, inputSource);
+};
+
+const handleSettingSelect = (state, name, value, source = User) => {
+  return handleSettingUpdate(state, name, value, source);
+};
+
 const initialize = async () => {
   // TODO
 };
@@ -3203,6 +3270,12 @@ const getSavedTabId = savedState => {
   }
   return '';
 };
+const getSavedScrollOffset = savedState => {
+  if (savedState && typeof savedState === 'object' && 'scrollOffset' in savedState && typeof savedState.scrollOffset === 'number') {
+    return savedState.scrollOffset;
+  }
+  return 0;
+};
 const restoreState = savedState => {
   if (!savedState) {
     return {
@@ -3210,7 +3283,8 @@ const restoreState = savedState => {
       minLineY: 0,
       deltaY: 0,
       tabId: '',
-      searchValue: ''
+      searchValue: '',
+      scrollOffset: 0
     };
   }
   const root = getSavedWorkspacePath(savedState);
@@ -3218,12 +3292,14 @@ const restoreState = savedState => {
   const deltaY = getSavedDeltaY(savedState);
   const tabId = getSavedTabId(savedState);
   const searchValue = getSavedSearchValue(savedState);
+  const scrollOffset = getSavedScrollOffset(savedState);
   return {
     root,
     minLineY,
     deltaY,
     tabId,
-    searchValue
+    searchValue,
+    scrollOffset
   };
 };
 
@@ -3237,7 +3313,8 @@ const getModifiedSettings = preferences => {
 const loadContent = async (state, savedState) => {
   const {
     searchValue,
-    tabId
+    tabId,
+    scrollOffset
   } = restoreState(savedState);
   const tabs = getTabs();
   const newTabs = getUpdatedTabs(tabs, tabId);
@@ -3252,6 +3329,7 @@ const loadContent = async (state, savedState) => {
     items,
     modifiedSettings,
     preferences,
+    scrollOffset,
     searchValue,
     tabs: newTabs
   };
@@ -3306,31 +3384,31 @@ const text = data => {
 const {
   Viewlet
 } = ClassNames;
-const Settings = 'Settings';
-const SettingsInputWrapper = 'SettingsInputWrapper';
-const InputBox = 'InputBox';
-const SettingsSearchInput = 'SettingsSearchInput';
+const Badge = 'Badge';
 const Button = 'Button';
-const InputButton = 'InputButton';
-const SearchFieldButton = 'SearchFieldButton';
+const CheckBox = 'CheckBox';
 const Disabled = 'Disabled';
+const InputBox = 'InputBox';
+const InputButton = 'InputButton';
 const MaskIcon = 'MaskIcon';
 const MaskIconClearAll = 'MaskIconClearAll';
-const SettingsItem = 'SettingsItem';
-const SettingsItemCheckBox = 'SettingsItemCheckBox';
-const CheckBox = 'CheckBox';
+const SearchFieldButton = 'SearchFieldButton';
 const Select = 'Select';
-const SettingsItems = 'SettingsItems';
-const SettingsNoResults = 'SettingsNoResults';
-const SettingsMain = 'SettingsMain';
+const Settings = 'Settings';
 const SettingsContent = 'SettingsContent';
 const SettingsContentHeading = 'SettingsContentHeading';
 const SettingsHeader = 'SettingsHeader';
+const SettingsInputWrapper = 'SettingsInputWrapper';
+const SettingsItem = 'SettingsItem';
+const SettingsItemCheckBox = 'SettingsItemCheckBox';
+const SettingsItems = 'SettingsItems';
+const SettingsMain = 'SettingsMain';
+const SettingsNoResults = 'SettingsNoResults';
+const SettingsSearchInput = 'SettingsSearchInput';
 const SettingsSideBar = 'SettingsSideBar';
 const SettingsTabs = 'SettingsTabs';
 const Tab = 'Tab';
 const TabSelected = 'TabSelected';
-const Badge = 'Badge';
 
 const getSettingsInputBadgeDom = (filteredSettingsCount, hasSearchValue) => {
   if (!hasSearchValue) {
@@ -3350,6 +3428,7 @@ const HandleClickTab = 'handleClickTab';
 const HandleInput = 'handleInput';
 const HandleSettingInput = 'handleSettingInput';
 const HandleSettingChecked = 'handleSettingChecked';
+const HandleScroll = 'handleScroll';
 const HandleSettingSelect = 'handleSettingSelect';
 
 const getButtonClassName = hasSearchValue => {
@@ -3411,14 +3490,17 @@ const getItemCheckBoxVirtualDom = item => {
   const {
     heading,
     description,
-    id
+    id,
+    modified
   } = item;
+  const isModified = modified || false;
   const domId = getInputId(id);
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
     childCount: 3,
-    role: 'group'
+    role: 'group',
+    'data-modified': isModified
   }, {
     type: VirtualDomElements.H3,
     childCount: 1
@@ -3441,27 +3523,38 @@ const getItemCheckBoxVirtualDom = item => {
   }, text(description)];
 };
 
+const getItemHeadingDom = heading => {
+  return [{
+    type: VirtualDomElements.H3,
+    childCount: 1
+  }, text(heading)];
+};
+
+const getItemLabelDom = (domId, label) => {
+  return [{
+    type: VirtualDomElements.Label,
+    htmlFor: domId,
+    childCount: 1,
+    className: 'Label'
+  }, text(label)];
+};
+
 const getItemNumberVirtualDom = item => {
   const {
     heading,
     description,
-    id
+    id,
+    modified
   } = item;
   const domId = getInputId(id);
+  const isModified = modified || false;
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
     childCount: 3,
-    role: 'group'
-  }, {
-    type: VirtualDomElements.H3,
-    childCount: 1
-  }, text(heading), {
-    type: VirtualDomElements.Label,
-    htmlFor: domId,
-    childCount: 1,
-    className: 'Label'
-  }, text(description), {
+    role: 'group',
+    'data-modified': isModified
+  }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Input,
     className: InputBox,
     inputType: 'number',
@@ -3492,22 +3585,18 @@ const getItemSelectVirtualDom = item => {
     id
   } = item;
   const options = item.options || [];
+  const domId = getInputId(id);
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
     childCount: 3,
     role: 'group'
-  }, {
-    type: VirtualDomElements.H3,
-    childCount: 1
-  }, text(heading), {
-    type: VirtualDomElements.P,
-    childCount: 1
-  }, text(description), {
+  }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Select,
     className: Select,
     childCount: options.length,
-    name: id
+    name: id,
+    onChange: HandleSettingSelect
   }, ...options.flatMap(getOptionDom)];
 };
 
@@ -3593,7 +3682,8 @@ const getSettingsContentDom = (items, tabs, searchValue) => {
   return [{
     type: VirtualDomElements.Div,
     className: SettingsContent,
-    childCount: 2
+    childCount: 2,
+    onScroll: HandleScroll
   }, {
     type: VirtualDomElements.H1,
     className: SettingsContentHeading,
@@ -3664,6 +3754,16 @@ const renderItems = (oldState, newState) => {
   return ['Viewlet.setDom2', newState.id, dom];
 };
 
+const renderScrollOffset = (oldState, newState) => {
+  const {
+    id,
+    scrollOffset
+  } = newState;
+  const selector = '.SettingsContent';
+  const property = 'scrollTop';
+  return ['Viewlet.setProperty', id, selector, property, scrollOffset];
+};
+
 const renderSettingValues = (oldState, newState) => {
   const {
     filteredItems,
@@ -3694,6 +3794,8 @@ const getRenderer = diffType => {
       return renderValue;
     case RenderSettingValues:
       return renderSettingValues;
+    case RenderScrollOffset:
+      return renderScrollOffset;
     default:
       throw new Error('unknown renderer');
   }
@@ -3738,6 +3840,10 @@ const renderEventListeners = () => {
   }, {
     name: HandleSettingChecked,
     params: ['handleSettingChecked', 'event.target.name', 'event.target.value']
+  }, {
+    name: HandleScroll,
+    params: ['handleScroll', 'event.target.scrollTop'],
+    passive: true
   }, {
     name: HandleSettingSelect,
     params: ['handleSettingSelect', 'event.target.name', 'event.target.value']
@@ -3747,7 +3853,8 @@ const renderEventListeners = () => {
 const saveState = state => {
   const {
     tabs,
-    searchValue
+    searchValue,
+    scrollOffset
   } = state;
   const selectedTab = getSelectedTabId(tabs);
   return {
@@ -3757,15 +3864,69 @@ const saveState = state => {
     maxLineY: 0,
     deltaY: 0,
     searchValue,
-    selectedTab
+    selectedTab,
+    scrollOffset
+  };
+};
+
+const useNextSearchValue = state => {
+  const {
+    history,
+    historyIndex,
+    items,
+    tabs,
+    preferences
+  } = state;
+  if (history.length === 0 || historyIndex >= history.length - 1) {
+    return state;
+  }
+  const newHistoryIndex = historyIndex + 1;
+  const newSearchValue = history[newHistoryIndex];
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue, preferences);
+  return {
+    ...state,
+    searchValue: newSearchValue,
+    historyIndex: newHistoryIndex,
+    filteredItems,
+    inputSource: Script
+  };
+};
+
+const usePreviousSearchValue = state => {
+  const {
+    history,
+    historyIndex,
+    items,
+    tabs,
+    preferences
+  } = state;
+  if (history.length === 0 || historyIndex <= 0) {
+    return state;
+  }
+  const newHistoryIndex = historyIndex - 1;
+  const newSearchValue = history[newHistoryIndex];
+  const filteredItems = getFilteredItems(items, tabs, newSearchValue, preferences);
+  return {
+    ...state,
+    searchValue: newSearchValue,
+    historyIndex: newHistoryIndex,
+    filteredItems,
+    inputSource: Script
   };
 };
 
 const commandMap = {
   'Initialize.initialize': initialize,
+  'Settings.clear': wrapCommand(clear$1),
   'Settings.create': create$1,
   'Settings.diff2': diff2,
   'Settings.getCommandIds': getCommandIds,
+  'Settings.handleClickTab': wrapCommand(handleClickTab),
+  'Settings.handleInput': wrapCommand(handleInput),
+  'Settings.handleScroll': wrapCommand(handleScroll),
+  'Settings.handleSettingChecked': wrapCommand(handleSettingChecked),
+  'Settings.handleSettingInput': wrapCommand(handleSettingInput),
+  'Settings.handleSettingSelect': wrapCommand(handleSettingSelect),
   'Settings.loadContent': wrapCommand(loadContent),
   'Settings.render2': render2,
   'Settings.renderActions': renderActions,
@@ -3773,12 +3934,8 @@ const commandMap = {
   'Settings.restoreState': restoreState,
   'Settings.saveState': wrapGetter(saveState),
   'Settings.terminate': terminate,
-  'Settings.handleClickTab': wrapCommand(handleClickTab),
-  'Settings.clear': wrapCommand(clear$1),
-  'Settings.handleInput': wrapCommand(handleInput),
-  'Settings.handleSettingInput': wrapCommand(handleSettingInput),
-  'Settings.handleSettingChecked': wrapCommand(handleSettingChecked),
-  'Settings.handleSettingSelect': wrapCommand(handleSettingSelect)
+  'Settings.useNextSearchValue': wrapCommand(useNextSearchValue),
+  'Settings.usePreviousSearchValue': wrapCommand(usePreviousSearchValue)
 };
 
 const rpcs = Object.create(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/settings-view",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",