@lvce-editor/problems-view 1.3.0 → 1.4.0

package/dist/problemsViewWorkerMain.js

@@ -1087,11 +1087,13 @@ const focusIndex = (state, index) => {
 };
 
 const None = 'none';
+const ToolBar = 'toolbar';
 const Tree$1 = 'tree';
 const TreeItem$1 = 'treeitem';
 const AriaRoles = {
   __proto__: null,
   None,
+  ToolBar,
   Tree: Tree$1,
   TreeItem: TreeItem$1
 };
@@ -1119,7 +1121,7 @@ const KeyCode = {
 const mergeClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(' ');
 };
-const Button = 1;
+const Button$1 = 1;
 const Div = 4;
 const Input = 6;
 const Span = 8;
@@ -1129,7 +1131,7 @@ const A = 53;
 const VirtualDomElements = {
   __proto__: null,
   A,
-  Button,
+  Button: Button$1,
   Div,
   Img,
   Input,
@@ -1261,6 +1263,35 @@ const handleArrowRight = state => {
   };
 };
 
+const getListIndex = (eventX, eventY, x, y, deltaY, itemHeight) => {
+  const relativeY = eventY - y + deltaY;
+  const index = Math.floor(relativeY / itemHeight);
+  return index;
+};
+
+const handleClickAt = (state, eventX, eventY) => {
+  const {
+    problems,
+    x,
+    y,
+    itemHeight
+  } = state;
+
+  // TODO use functional focus rendering
+  // Focus.setFocus(FocusKey.Problems)
+  if (problems.length === 0) {
+    return focusIndex(state, -1);
+  }
+  const index = getListIndex(eventX, eventY, x, y, 0, itemHeight);
+  if (index > problems.length) {
+    return focusIndex(state, -1);
+  }
+  return {
+    ...state,
+    focusedIndex: index
+  };
+};
+
 const handleContextMenu = async (state, eventX, eventY) => {
   // @ts-ignore
   // await ContextMenu.show(eventX, eventY, MenuEntryId.Problems)
@@ -1304,7 +1335,11 @@ const Message$1 = 'Message';
 const NoProblemsDetected = 'No problems have been detected in the workspace.';
 const NoResultsFoundWithProvidedFilterCriteria = 'No results found with provided filter criteria.';
 const ProblemsDetected = 'Some problems have been detected in the workspace.';
+const ShowingOfItems = 'Showing {PH1} of {PH2} ';
 const Source = 'Source';
+const CollapseAll$1 = 'Collapse All';
+const ViewAsTable = 'View as Table';
+const ViewAsList = 'View as List';
 
 const noProblemsDetected = () => {
   return i18nString(NoProblemsDetected);
@@ -1336,12 +1371,27 @@ const file = () => {
 const filter = () => {
   return i18nString(Filter$3);
 };
+const showingOf = (visibleCount, totalCount) => {
+  return i18nString(ShowingOfItems, {
+    PH1: visibleCount,
+    PH2: totalCount
+  });
+};
 const source = () => {
   return i18nString(Source);
 };
 const noResultsFoundWithProvidedFilterCriteria = () => {
   return i18nString(NoResultsFoundWithProvidedFilterCriteria);
 };
+const collapseAll = () => {
+  return i18nString(CollapseAll$1);
+};
+const viewAsList$1 = () => {
+  return i18nString(ViewAsList);
+};
+const viewAsTable$1 = () => {
+  return i18nString(ViewAsTable);
+};
 
 const getSavedViewMode = savedState => {
   if (savedState && typeof savedState.viewMode === 'number') {
@@ -1383,13 +1433,18 @@ const loadContent = async (state, savedState) => {
   };
 };
 
+const Button = 1;
+const ProblemsFilter = 4;
+
 const Chevron = 'Chevron';
 const FileIcon = 'FileIcon';
 const Filter$2 = 'Filter';
+const FilterBadge = 'FilterBadge';
 const Highlight = 'Highlight';
 const IconButton = 'IconButton';
 const InputBox = 'InputBox';
 const Label = 'Label';
+const Actions = 'Actions';
 const LabelDetail = 'LabelDetail';
 const Message = 'Message';
 const MessageAction = 'MessageAction';
@@ -1442,7 +1497,10 @@ const getActionButtonVirtualDom = action => {
 
 const Filter$1 = 'filter';
 
+const CollapseAll = 'CollapseAll';
 const Filter = 'Filter';
+const ListFlat = 'ListFlat';
+const ListTree = 'ListTree';
 
 const getProblemsFilterVirtualDom = action => {
   // TODO avoid mutation
@@ -1462,6 +1520,15 @@ const getProblemsFilterVirtualDom = action => {
     name: Filter$1,
     value: action.value
   });
+  if (action.badgeText) {
+    // @ts-ignore
+    dom[0].childCount++;
+    dom.push({
+      type: VirtualDomElements.Div,
+      className: FilterBadge,
+      childCount: 1
+    }, text(action.badgeText));
+  }
   // @ts-ignore
   dom[0].childCount++;
   dom.push(...getActionButtonVirtualDom({
@@ -1790,6 +1857,7 @@ const getProblemsVirtualDom = (viewMode, problems, filterValue, isSmall) => {
     dom[0].childCount++;
     dom.push(...getProblemsFilterVirtualDom({
       command: HandleFilterInput,
+      badgeText: '',
       placeholder: filter(),
       value: ''
     }));
@@ -1905,16 +1973,85 @@ const render2 = (uid, diffResult) => {
   return commands;
 };
 
-const renderActions = () => {
+const getActionVirtualDom = action => {
+  switch (action.type) {
+    case Button:
+      return getActionButtonVirtualDom(action);
+    case ProblemsFilter:
+      return getProblemsFilterVirtualDom(action);
+    default:
+      return [];
+  }
+};
+
+const getActionsVirtualDom = actions => {
   return [{
     type: VirtualDomElements.Div,
-    childCount: 1
-  }, text('not implemented')];
+    className: Actions,
+    role: AriaRoles.ToolBar,
+    childCount: actions.length
+  }, ...actions.flatMap(getActionVirtualDom)];
+};
+
+const getActions = state => {
+  const visibleCount = getVisibleProblems(state.problems, state.collapsedUris, state.focusedIndex, state.filterValue).length;
+  const problemsCount = state.problems.length;
+  const isSmall = state.width <= state.smallWidthBreakPoint;
+  const actions = [];
+  if (!isSmall) {
+    actions.push({
+      type: ProblemsFilter,
+      id: 'Filter',
+      command: HandleFilterInput,
+      badgeText: visibleCount === problemsCount ? '' : showingOf(visibleCount, problemsCount),
+      placeholder: filter(),
+      value: state.inputSource === Script ? state.filterValue : ''
+    });
+  }
+  if (state.viewMode === Table) {
+    actions.push({
+      type: Button,
+      id: viewAsList$1(),
+      command: 'viewAsList',
+      icon: ListTree
+    });
+  } else {
+    actions.push({
+      type: Button,
+      id: collapseAll(),
+      command: 'collapseAll',
+      icon: CollapseAll
+    }, {
+      type: Button,
+      id: viewAsTable$1(),
+      command: 'viewAsTable',
+      icon: ListFlat
+    });
+  }
+  return actions;
+};
+
+const renderActions = newState => {
+  const actions = getActions(newState);
+  const dom = getActionsVirtualDom(actions);
+  return dom;
 };
 
 const renderEventListeners = () => {
-  // TODO
-  return [];
+  return [{
+    name: HandleBlur,
+    params: ['handleBlur']
+  }, {
+    name: HandleContextMenu,
+    params: ['handleContextMenu', 'event.clientX', 'event.clientY'],
+    preventDefault: true
+  }, {
+    name: HandleFilterInput,
+    params: ['handleFilterInput', 'event.target.value']
+  }, {
+    name: HandleClearFilterClick,
+    params: ['clearFilter']
+  }];
 };
 
 const resize = (state, dimensions) => {
@@ -1970,7 +2107,8 @@ const commandMap = {
   'Problems.handleIconThemeChange': handleIconThemeChange,
   'Problems.handleContextMenu': handleContextMenu,
   'Problems.viewAsTable': viewAsTable,
-  'Problems.viewAsList': viewAsList
+  'Problems.viewAsList': viewAsList,
+  'Problems.handleClickAt': wrapCommand(handleClickAt)
 };
 
 const listen = async () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/problems-view",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Problems View Worker",
   "repository": {
     "type": "git",