@lvce-editor/problems-view 1.2.0 → 1.4.0

package/dist/problemsViewWorkerMain.js

@@ -1013,6 +1013,7 @@ const copyMessage = async state => {
 };
 
 const User = 1;
+const Script = 2;
 
 const {
   get,
@@ -1022,6 +1023,7 @@ const {
 
 const None$1 = 0;
 const Table = 1;
+const List = 2;
 
 const create = (id, uri, x, y, width, height, args, parentUid) => {
   const state = {
@@ -1085,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
 };
@@ -1117,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;
@@ -1127,7 +1131,7 @@ const A = 53;
 const VirtualDomElements = {
   __proto__: null,
   A,
-  Button,
+  Button: Button$1,
   Div,
   Img,
   Input,
@@ -1259,19 +1263,190 @@ 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)
+  return state;
+};
+
+const handleIconThemeChange = state => {
+  return {
+    ...state,
+    problems: [...state.problems]
+  };
+};
+
 const initialize = async () => {
   // TODO create connection to editor worker
 };
 
+const getProblems = async state => {
+  // TODO ask editor worker for problems
+  return [];
+};
+
+const emptyObject = {};
+const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
+const i18nString = (key, placeholders = emptyObject) => {
+  if (placeholders === emptyObject) {
+    return key;
+  }
+  const replacer = (match, rest) => {
+    return placeholders[rest];
+  };
+  return key.replaceAll(RE_PLACEHOLDER, replacer);
+};
+
+const ClearFilters = 'Clear Filters';
+const Code = 'Code';
+const File = 'File';
+const Filter$3 = 'Filter';
+const LineColumn = '[Ln {PH1}, Col {PH2}]';
+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);
+};
+const getMessage = problemsCount => {
+  if (problemsCount === 0) {
+    return i18nString(NoProblemsDetected);
+  }
+  return i18nString(ProblemsDetected);
+};
+const atLineColumn = (line, column) => {
+  return i18nString(LineColumn, {
+    PH1: line,
+    PH2: column
+  });
+};
+const clearFilter = () => {
+  return i18nString(ClearFilters);
+};
+const code = () => {
+  return i18nString(Code);
+};
+const message = () => {
+  return i18nString(Message$1);
+};
+const file = () => {
+  return i18nString(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') {
+    return savedState.viewMode;
+  }
+  return List;
+};
+const getSavedFilterValue = savedState => {
+  if (savedState && typeof savedState.filterValue === 'string') {
+    return savedState.filterValue;
+  }
+  return '';
+};
+const isString = value => {
+  return typeof value === 'string';
+};
+const getSavedCollapsedUris = savedState => {
+  if (savedState && savedState.collapsedUris && Array.isArray(savedState.collapsedUris) && savedState.collapsedUris.every(isString)) {
+    return savedState.collapsedUris;
+  }
+  return [];
+};
+const loadContent = async (state, savedState) => {
+  const problems = await getProblems();
+  const message = getMessage(problems.length);
+  const viewMode = getSavedViewMode(savedState);
+  const filterValue = getSavedFilterValue(savedState);
+  const collapsedUris = getSavedCollapsedUris(savedState);
+  return {
+    ...state,
+    problems,
+    message,
+    viewMode,
+    filterValue,
+    inputSource: Script,
+    filteredProblems: problems,
+    listItems: [],
+    collapsedUris
+  };
+};
+
+const Button = 1;
+const ProblemsFilter = 4;
+
 const Chevron = 'Chevron';
 const FileIcon = 'FileIcon';
-const Filter$3 = 'Filter';
+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$1 = 'Message';
+const Message = 'Message';
 const MessageAction = 'MessageAction';
 const Problem = 'Problem';
 const ProblemAt = 'ProblemAt';
@@ -1320,16 +1495,19 @@ const getActionButtonVirtualDom = action => {
   }, getIconVirtualDom(icon)];
 };
 
-const Filter$2 = 'filter';
+const Filter$1 = 'filter';
 
-const Filter$1 = 'Filter';
+const CollapseAll = 'CollapseAll';
+const Filter = 'Filter';
+const ListFlat = 'ListFlat';
+const ListTree = 'ListTree';
 
 const getProblemsFilterVirtualDom = action => {
   // TODO avoid mutation
   const dom = [];
   dom.push({
     type: VirtualDomElements.Div,
-    className: Filter$3,
+    className: Filter$2,
     childCount: 1
   }, {
     type: VirtualDomElements.Input,
@@ -1339,14 +1517,23 @@ const getProblemsFilterVirtualDom = action => {
     autocorrect: 'off',
     placeholder: action.placeholder,
     onInput: action.command,
-    name: Filter$2,
+    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({
     id: 'more filters',
-    icon: Filter$1,
+    icon: Filter,
     command: 'more filters'
   }));
   return dom;
@@ -1421,59 +1608,6 @@ const getTreeItemIndent = depth => {
   return `${depth * defaultIndent}rem`;
 };
 
-const emptyObject = {};
-const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
-const i18nString = (key, placeholders = emptyObject) => {
-  if (placeholders === emptyObject) {
-    return key;
-  }
-  const replacer = (match, rest) => {
-    return placeholders[rest];
-  };
-  return key.replaceAll(RE_PLACEHOLDER, replacer);
-};
-
-const ClearFilters = 'Clear Filters';
-const Code = 'Code';
-const File = 'File';
-const Filter = 'Filter';
-const LineColumn = '[Ln {PH1}, Col {PH2}]';
-const Message = 'Message';
-const NoProblemsDetected = 'No problems have been detected in the workspace.';
-const NoResultsFoundWithProvidedFilterCriteria = 'No results found with provided filter criteria.';
-const Source = 'Source';
-
-const noProblemsDetected = () => {
-  return i18nString(NoProblemsDetected);
-};
-const atLineColumn = (line, column) => {
-  return i18nString(LineColumn, {
-    PH1: line,
-    PH2: column
-  });
-};
-const clearFilter = () => {
-  return i18nString(ClearFilters);
-};
-const code = () => {
-  return i18nString(Code);
-};
-const message = () => {
-  return i18nString(Message);
-};
-const file = () => {
-  return i18nString(File);
-};
-const filter = () => {
-  return i18nString(Filter);
-};
-const source = () => {
-  return i18nString(Source);
-};
-const noResultsFoundWithProvidedFilterCriteria = () => {
-  return i18nString(NoResultsFoundWithProvidedFilterCriteria);
-};
-
 const getProblemVirtualDom = problem => {
   const {
     message,
@@ -1573,7 +1707,7 @@ const getProblemsNoProblemsFoundVirtualDom = filterValue => {
   const dom = [];
   dom.push({
     type: VirtualDomElements.Div,
-    className: Message$1,
+    className: Message,
     childCount: 1
   });
   if (filterValue) {
@@ -1723,6 +1857,7 @@ const getProblemsVirtualDom = (viewMode, problems, filterValue, isSmall) => {
     dom[0].childCount++;
     dom.push(...getProblemsFilterVirtualDom({
       command: HandleFilterInput,
+      badgeText: '',
       placeholder: filter(),
       value: ''
     }));
@@ -1838,6 +1973,87 @@ const render2 = (uid, diffResult) => {
   return commands;
 };
 
+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,
+    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 = () => {
+  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) => {
   return {
     ...state,
@@ -1858,8 +2074,23 @@ const saveState = state => {
   };
 };
 
+const viewAsList = state => {
+  return {
+    ...state,
+    viewMode: List
+  };
+};
+
+const viewAsTable = state => {
+  return {
+    ...state,
+    viewMode: Table
+  };
+};
+
 const commandMap = {
   'Problems.copyMessage': copyMessage,
+  'Problems.renderEventListeners': renderEventListeners,
   'Problems.create': create,
   'Problems.diff2': diff2,
   'Problems.focusIndex': focusIndex,
@@ -1867,10 +2098,17 @@ const commandMap = {
   'Problems.handleArrowLeft': wrapCommand(handleArrowLeft),
   'Problems.handleArrowRight': wrapCommand(handleArrowRight),
   'Problems.initialize': initialize,
+  'Problems.loadContent': wrapCommand(loadContent),
   'Problems.render2': render2,
+  'Problems.renderActions': renderActions,
   'Problems.resize': resize,
   'Problems.saveState': saveState,
-  'Problems.terminate': terminate
+  'Problems.terminate': terminate,
+  'Problems.handleIconThemeChange': handleIconThemeChange,
+  'Problems.handleContextMenu': handleContextMenu,
+  'Problems.viewAsTable': viewAsTable,
+  'Problems.viewAsList': viewAsList,
+  'Problems.handleClickAt': wrapCommand(handleClickAt)
 };
 
 const listen = async () => {

package/package.json

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