@lvce-editor/settings-view 1.10.0 → 1.12.0

package/dist/settingsViewWorkerMain.js

@@ -990,7 +990,8 @@ const create$1 = (id, uri, x, y, width, height) => {
     inputSource: 0,
     scrollOffset: 0,
     filteredItemsCount: 0,
-    history: []
+    history: [],
+    modifiedSettings: {}
   };
   set$1(id, state, state);
 };
@@ -1000,7 +1001,7 @@ const isEqual$3 = (oldState, newState) => {
 };
 
 const isEqual$2 = (oldState, newState) => {
-  return oldState === newState;
+  return oldState.filteredItems === newState.filteredItems;
 };
 
 const isEqual$1 = (oldState, newState) => {
@@ -1079,7 +1080,7 @@ const handleClickTab = (state, name) => {
   };
 };
 
-const handleInput = (state, value) => {
+const handleInput = (state, value, inputSource = User) => {
   const {
     items,
     tabs,
@@ -1090,7 +1091,29 @@ const handleInput = (state, value) => {
     ...state,
     searchValue: value,
     filteredItems,
-    inputSource: User
+    inputSource
+  };
+};
+
+const handleSettingChecked = (state, name, value) => {
+  // TODO update value
+  return {
+    ...state
+  };
+};
+
+const handleSettingInput = (state, name, value, inputSource = User) => {
+  // TODO update value
+  return {
+    ...state,
+    inputSource
+  };
+};
+
+const handleSettingSelect = (state, name, value) => {
+  // TODO update value
+  return {
+    ...state
   };
 };
 
@@ -1147,6 +1170,7 @@ const FontSizeDescription = 'The font size of the editor';
 const FormatOnSave = 'Format on Save';
 const FormatOnSaveDescription = 'Format code when saving';
 const NumberValue = 'number value';
+const StringValue = 'string value';
 const SearchSettings = 'Search Settings';
 const SettingsContent$1 = 'Settings Content';
 const SidebarPosition = 'Sidebar Position';
@@ -1395,6 +1419,7 @@ const WordSeparators = 'Word Separators';
 const WordSeparatorsDescription = 'Characters that will be used as word separators when doing word related navigations or operations';
 const WrappingIndent = 'Wrapping Indent';
 const WrappingIndentDescription = 'Controls the indentation of wrapped lines';
+const UnknownSettingType = 'Unknown setting type';
 
 const autoSave = () => {
   return i18nString(AutoSave);
@@ -1450,6 +1475,9 @@ const formatOnSaveDescription = () => {
 const numberValue = () => {
   return i18nString(NumberValue);
 };
+const stringValue = () => {
+  return i18nString(StringValue);
+};
 const searchSettings = () => {
   return i18nString(SearchSettings);
 };
@@ -2190,6 +2218,9 @@ const wrappingIndent = () => {
 const wrappingIndentDescription = () => {
   return i18nString(WrappingIndentDescription);
 };
+const unknownSettingType = () => {
+  return i18nString(UnknownSettingType);
+};
 
 const getSettingItems = async () => {
   return [{
@@ -2197,10 +2228,10 @@ const getSettingItems = async () => {
     heading: fontSize(),
     description: fontSizeDescription(),
     type: Number$1,
-    value: '15px',
+    value: 15,
     category: TextEditorTab
   }, {
-    id: 'fontFamily',
+    id: 'Editor.fontFamily',
     heading: fontFamily(),
     description: fontFamilyDescription(),
     type: String,
@@ -2209,7 +2240,7 @@ const getSettingItems = async () => {
   },
   // Text Editor Settings
   {
-    id: 'wordWrap',
+    id: 'Editor.wordWrap',
     heading: wordWrap(),
     description: wordWrapDescription(),
     type: Enum,
@@ -2223,7 +2254,7 @@ const getSettingItems = async () => {
       label: 'off' // i18n
     }]
   }, {
-    id: 'lineNumbers',
+    id: 'Editor.lineNumbers',
     heading: lineNumbers(),
     description: lineNumbersDescription(),
     type: Enum,
@@ -2237,133 +2268,133 @@ const getSettingItems = async () => {
       label: 'off' // i18n
     }]
   }, {
-    id: 'minimap',
+    id: 'Editor.minimap',
     heading: minimap(),
     description: minimapDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'scrollBeyondLastLine',
+    id: 'Editor.scrollBeyondLastLine',
     heading: scrollBeyondLastLine(),
     description: scrollBeyondLastLineDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'smoothScrolling',
+    id: 'Editor.smoothScrolling',
     heading: smoothScrolling(),
     description: smoothScrollingDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'cursorBlinking',
+    id: 'Editor.cursorBlinking',
     heading: cursorBlinking(),
     description: cursorBlinkingDescription(),
     type: String,
     value: 'blink',
     category: TextEditorTab
   }, {
-    id: 'cursorStyle',
+    id: 'Editor.cursorStyle',
     heading: cursorStyle(),
     description: cursorStyleDescription(),
     type: String,
     value: 'line',
     category: TextEditorTab
   }, {
-    id: 'cursorWidth',
+    id: 'Editor.cursorWidth',
     heading: cursorWidth(),
     description: cursorWidthDescription(),
     type: Number$1,
     value: '0',
     category: TextEditorTab
   }, {
-    id: 'tabSize',
+    id: 'Editor.tabSize',
     heading: tabSize(),
     description: tabSizeDescription(),
     type: Number$1,
     value: '4',
     category: TextEditorTab
   }, {
-    id: 'insertSpaces',
+    id: 'Editor.insertSpaces',
     heading: insertSpaces(),
     description: insertSpacesDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'detectIndentation',
+    id: 'Editor.detectIndentation',
     heading: detectIndentation(),
     description: detectIndentationDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'trimAutoWhitespace',
+    id: 'Editor.trimAutoWhitespace',
     heading: trimAutoWhitespace(),
     description: trimAutoWhitespaceDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'largeFileOptimizations',
+    id: 'Editor.largeFileOptimizations',
     heading: largeFileOptimizations(),
     description: largeFileOptimizationsDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'renderWhitespace',
+    id: 'Editor.renderWhitespace',
     heading: renderWhitespace(),
     description: renderWhitespaceDescription(),
     type: String,
     value: 'selection',
     category: TextEditorTab
   }, {
-    id: 'renderControlCharacters',
+    id: 'Editor.renderControlCharacters',
     heading: renderControlCharacters(),
     description: renderControlCharactersDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'renderLineHighlight',
+    id: 'Editor.renderLineHighlight',
     heading: renderLineHighlight(),
     description: renderLineHighlightDescription(),
     type: String,
     value: 'line',
     category: TextEditorTab
   }, {
-    id: 'codeLens',
+    id: 'Editor.codeLens',
     heading: codeLens(),
     description: codeLensDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'folding',
+    id: 'Editor.folding',
     heading: folding(),
     description: foldingDescription(),
     type: Boolean$1,
     value: 'true',
     category: TextEditorTab
   }, {
-    id: 'showFoldingControls',
+    id: 'Editor.showFoldingControls',
     heading: showFoldingControls(),
     description: showFoldingControlsDescription(),
     type: String,
     value: 'mouseover',
     category: TextEditorTab
   }, {
-    id: 'unfoldOnClickAfterEnd',
+    id: 'Editor.unfoldOnClickAfterEnd',
     heading: unfoldOnClickAfterEnd(),
     description: unfoldOnClickAfterEndDescription(),
     type: Boolean$1,
     value: 'false',
     category: TextEditorTab
   }, {
-    id: 'links',
+    id: 'Editor.links',
     heading: links(),
     description: linksDescription(),
     type: Boolean$1,
@@ -3196,6 +3227,13 @@ const restoreState = savedState => {
   };
 };
 
+const getModifiedSettings = preferences => {
+  const modifiedSettings = Object.create(null);
+  for (const key of Object.keys(preferences)) {
+    modifiedSettings[key] = true;
+  }
+  return modifiedSettings;
+};
 const loadContent = async (state, savedState) => {
   const {
     searchValue,
@@ -3205,15 +3243,17 @@ const loadContent = async (state, savedState) => {
   const newTabs = getUpdatedTabs(tabs, tabId);
   const items = await getSettingItems();
   const preferences = await getPreferences();
+  const modifiedSettings = getModifiedSettings(preferences);
   const filteredItems = getFilteredItems(items, newTabs, searchValue, preferences);
   return {
     ...state,
-    tabs: newTabs,
-    items,
     filteredItems,
-    preferences,
     inputSource: Script,
-    searchValue
+    items,
+    modifiedSettings,
+    preferences,
+    searchValue,
+    tabs: newTabs
   };
 };
 
@@ -3273,6 +3313,7 @@ const SettingsSearchInput = 'SettingsSearchInput';
 const Button = 'Button';
 const InputButton = 'InputButton';
 const SearchFieldButton = 'SearchFieldButton';
+const Disabled = 'Disabled';
 const MaskIcon = 'MaskIcon';
 const MaskIconClearAll = 'MaskIconClearAll';
 const SettingsItem = 'SettingsItem';
@@ -3307,15 +3348,24 @@ const getSettingsInputBadgeDom = (filteredSettingsCount, hasSearchValue) => {
 const HandleClickClear = 'handleClickClear';
 const HandleClickTab = 'handleClickTab';
 const HandleInput = 'handleInput';
+const HandleSettingInput = 'handleSettingInput';
+const HandleSettingChecked = 'handleSettingChecked';
+const HandleSettingSelect = 'handleSettingSelect';
 
-const getSettingsInputButtonsDom = () => {
+const getButtonClassName = hasSearchValue => {
+  if (hasSearchValue) {
+    return mergeClassNames(Button, InputButton, SearchFieldButton);
+  }
+  return mergeClassNames(Button, InputButton, SearchFieldButton, Disabled);
+};
+const getSettingsInputButtonsDom = hasSearchValue => {
   return [{
     type: VirtualDomElements.Button,
-    className: mergeClassNames(Button, InputButton, SearchFieldButton),
+    className: getButtonClassName(hasSearchValue),
     childCount: 1,
     ariaLabel: clear(),
     name: Clear$1,
-    // TODO add click event listener
+    disabled: !hasSearchValue,
     onClick: HandleClickClear
   }, {
     type: VirtualDomElements.Div,
@@ -3350,7 +3400,7 @@ const getSettingsHeaderDom = (filteredSettingsCount, hasSearchValue) => {
     type: VirtualDomElements.Div,
     className: SettingsInputWrapper,
     childCount
-  }, ...getSettingsInputDom(), ...getSettingsInputButtonsDom(), ...badgeDom];
+  }, ...getSettingsInputDom(), ...getSettingsInputButtonsDom(hasSearchValue), ...badgeDom];
 };
 
 const getInputId = id => {
@@ -3367,7 +3417,8 @@ const getItemCheckBoxVirtualDom = item => {
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3
+    childCount: 3,
+    role: 'group'
   }, {
     type: VirtualDomElements.H3,
     childCount: 1
@@ -3378,10 +3429,11 @@ const getItemCheckBoxVirtualDom = item => {
   }, {
     type: VirtualDomElements.Input,
     className: CheckBox,
-    inputType: 'checkbox',
     childCount: 0,
     id: domId,
-    name: id
+    inputType: 'checkbox',
+    name: id,
+    onChange: HandleSettingChecked
   }, {
     type: VirtualDomElements.Label,
     childCount: 1,
@@ -3399,7 +3451,8 @@ const getItemNumberVirtualDom = item => {
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3
+    childCount: 3,
+    role: 'group'
   }, {
     type: VirtualDomElements.H3,
     childCount: 1
@@ -3415,7 +3468,8 @@ const getItemNumberVirtualDom = item => {
     placeholder: numberValue(),
     childCount: 0,
     id: domId,
-    name: id
+    name: id,
+    onInput: HandleSettingInput
   }];
 };
 
@@ -3441,7 +3495,8 @@ const getItemSelectVirtualDom = item => {
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3
+    childCount: 3,
+    role: 'group'
   }, {
     type: VirtualDomElements.H3,
     childCount: 1
@@ -3465,7 +3520,8 @@ const getItemStringVirtualDom = item => {
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3
+    childCount: 3,
+    role: 'group'
   }, {
     type: VirtualDomElements.H3,
     childCount: 1
@@ -3476,12 +3532,22 @@ const getItemStringVirtualDom = item => {
     type: VirtualDomElements.Input,
     className: InputBox,
     inputType: 'text',
-    placeholder: numberValue(),
+    placeholder: stringValue(),
     childCount: 0,
-    name: id
+    name: id,
+    onInput: HandleSettingInput
   }];
 };
 
+const getItemUnknownVirtualDom = () => {
+  return [{
+    type: VirtualDomElements.Div,
+    className: SettingsItem,
+    childCount: 1,
+    role: 'group'
+  }, text(unknownSettingType())];
+};
+
 const getItemVirtualDom = item => {
   if (item.type === Number$1) {
     return getItemNumberVirtualDom(item);
@@ -3495,8 +3561,7 @@ const getItemVirtualDom = item => {
   if (item.type === Enum) {
     return getItemSelectVirtualDom(item);
   }
-  // TODO
-  return [text('unknown setting type')];
+  return getItemUnknownVirtualDom();
 };
 
 const getSettingsNoResultsDom = searchValue => {
@@ -3604,7 +3669,8 @@ const renderSettingValues = (oldState, newState) => {
     filteredItems,
     id
   } = newState;
-  const numericSettings = filteredItems.filter(item => item.type === Number$1);
+  const enabledTypes = [Number$1, String];
+  const numericSettings = filteredItems.filter(item => enabledTypes.includes(item.type));
   const inputValues = numericSettings.map(item => ({
     name: item.id,
     value: item.value
@@ -3666,6 +3732,15 @@ const renderEventListeners = () => {
   }, {
     name: HandleClickClear,
     params: ['clear']
+  }, {
+    name: HandleSettingInput,
+    params: ['handleSettingInput', 'event.target.name', 'event.target.value']
+  }, {
+    name: HandleSettingChecked,
+    params: ['handleSettingChecked', 'event.target.name', 'event.target.value']
+  }, {
+    name: HandleSettingSelect,
+    params: ['handleSettingSelect', 'event.target.name', 'event.target.value']
   }];
 };
 
@@ -3700,7 +3775,10 @@ const commandMap = {
   'Settings.terminate': terminate,
   'Settings.handleClickTab': wrapCommand(handleClickTab),
   'Settings.clear': wrapCommand(clear$1),
-  'Settings.handleInput': wrapCommand(handleInput)
+  'Settings.handleInput': wrapCommand(handleInput),
+  'Settings.handleSettingInput': wrapCommand(handleSettingInput),
+  'Settings.handleSettingChecked': wrapCommand(handleSettingChecked),
+  'Settings.handleSettingSelect': wrapCommand(handleSettingSelect)
 };
 
 const rpcs = Object.create(null);

package/package.json

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