@lvce-editor/settings-view 1.11.0 → 1.13.0

package/dist/settingsViewWorkerMain.js

@@ -1096,17 +1096,45 @@ const handleInput = (state, value, inputSource = User) => {
 };
 
 const handleSettingChecked = (state, name, value) => {
+  const {
+    modifiedSettings,
+    items,
+    tabs,
+    searchValue
+  } = state;
+  const newModifiedSettings = {
+    ...modifiedSettings,
+    [name]: true
+  };
+  const filteredItems = getFilteredItems(items, tabs, searchValue, newModifiedSettings);
+
   // TODO update value
   return {
-    ...state
+    ...state,
+    modifiedSettings: newModifiedSettings,
+    filteredItems
   };
 };
 
 const handleSettingInput = (state, name, value, inputSource = User) => {
   // TODO update value
+  const {
+    modifiedSettings,
+    items,
+    tabs,
+    searchValue
+  } = state;
+  const newModifiedSettings = {
+    ...modifiedSettings,
+    [name]: true
+  };
+
+  // TODO don't need to update items if it was already modified
+  const filteredItems = getFilteredItems(items, tabs, searchValue, newModifiedSettings);
   return {
     ...state,
-    inputSource
+    inputSource,
+    filteredItems
   };
 };
 
@@ -1419,6 +1447,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);
@@ -2217,6 +2246,9 @@ const wrappingIndent = () => {
 const wrappingIndentDescription = () => {
   return i18nString(WrappingIndentDescription);
 };
+const unknownSettingType = () => {
+  return i18nString(UnknownSettingType);
+};
 
 const getSettingItems = async () => {
   return [{
@@ -3302,30 +3334,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 CheckBox = 'CheckBox';
+const Disabled = 'Disabled';
+const InputBox = 'InputBox';
 const InputButton = 'InputButton';
-const SearchFieldButton = 'SearchFieldButton';
 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) {
@@ -3347,14 +3380,20 @@ 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,
@@ -3389,7 +3428,7 @@ const getSettingsHeaderDom = (filteredSettingsCount, hasSearchValue) => {
     type: VirtualDomElements.Div,
     className: SettingsInputWrapper,
     childCount
-  }, ...getSettingsInputDom(), ...getSettingsInputButtonsDom(), ...badgeDom];
+  }, ...getSettingsInputDom(), ...getSettingsInputButtonsDom(hasSearchValue), ...badgeDom];
 };
 
 const getInputId = id => {
@@ -3400,13 +3439,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
+    childCount: 3,
+    role: 'group',
+    dataModified: isModified
   }, {
     type: VirtualDomElements.H3,
     childCount: 1
@@ -3417,10 +3460,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,
@@ -3428,6 +3472,22 @@ 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,
@@ -3438,16 +3498,9 @@ const getItemNumberVirtualDom = item => {
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3
-  }, {
-    type: VirtualDomElements.H3,
-    childCount: 1
-  }, text(heading), {
-    type: VirtualDomElements.Label,
-    htmlFor: domId,
-    childCount: 1,
-    className: 'Label'
-  }, text(description), {
+    childCount: 3,
+    role: 'group'
+  }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Input,
     className: InputBox,
     inputType: 'number',
@@ -3478,21 +3531,18 @@ const getItemSelectVirtualDom = item => {
     id
   } = item;
   const options = item.options || [];
+  const domId = getInputId(id);
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3
-  }, {
-    type: VirtualDomElements.H3,
-    childCount: 1
-  }, text(heading), {
-    type: VirtualDomElements.P,
-    childCount: 1
-  }, text(description), {
+    childCount: 3,
+    role: 'group'
+  }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
     type: VirtualDomElements.Select,
     className: Select,
     childCount: options.length,
-    name: id
+    name: id,
+    onChange: HandleSettingSelect
   }, ...options.flatMap(getOptionDom)];
 };
 
@@ -3505,7 +3555,8 @@ const getItemStringVirtualDom = item => {
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 3
+    childCount: 3,
+    role: 'group'
   }, {
     type: VirtualDomElements.H3,
     childCount: 1
@@ -3527,8 +3578,9 @@ const getItemUnknownVirtualDom = () => {
   return [{
     type: VirtualDomElements.Div,
     className: SettingsItem,
-    childCount: 1
-  }, text('unknown setting type')];
+    childCount: 1,
+    role: 'group'
+  }, text(unknownSettingType())];
 };
 
 const getItemVirtualDom = item => {
@@ -3720,10 +3772,10 @@ const renderEventListeners = () => {
     params: ['handleSettingInput', 'event.target.name', 'event.target.value']
   }, {
     name: HandleSettingChecked,
-    params: ['handleSettingInput', 'event.target.name', 'event.target.value']
+    params: ['handleSettingChecked', 'event.target.name', 'event.target.value']
   }, {
     name: HandleSettingSelect,
-    params: ['handleSettingInput', 'event.target.name', 'event.target.value']
+    params: ['handleSettingSelect', 'event.target.name', 'event.target.value']
   }];
 };
 

package/package.json

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