lightning-base-components 1.14.2-alpha → 1.14.3-alpha

package/src/lightning/datatable/errors.js

@@ -1,25 +1,36 @@
-export function getErrorsState() {
-    return {
-        errors: {
-            rows: {},
-            table: {},
-        },
-    };
-}
+// Default empty error state
+const DEFAULT_ERROR_STATE = {
+    rows: {},
+    table: {},
+};
 
+/**
+ * Retrieves the errors object from datatable's state object
+ * Returns the set of row-level errors and table-level errors
+ */
 export function getErrors(state) {
     return state.errors;
 }
 
+/**
+ * Sets the row-level errors and table-level errors in datatable's state object
+ * Errors being set here overwrite the previous error object in the state
+ */
 export function setErrors(state, errors) {
-    return (state.errors = Object.assign({}, getErrorsState(), errors));
+    return (state.errors = Object.assign({}, DEFAULT_ERROR_STATE, errors));
 }
 
+/**
+ * Retrieves the row-level errors of a particular row from datatable's state object
+ */
 export function getRowError(state, rowKey) {
     const rows = getErrors(state).rows;
     return (rows && rows[rowKey]) || {};
 }
 
+/**
+ * Retrieves the table-level errors from the datatable's state object
+ */
 export function getTableError(state) {
     return getErrors(state).table || {};
 }

package/src/lightning/datatable/headerActions.js

@@ -1,49 +1,31 @@
 import { unwrap } from 'lwc';
 import { getUserColumnIndex, getColumns } from './columns';
-import * as wraptext from './wrapText';
+import { getActions, handleTriggeredAction } from './wrapText';
 
-function handleTriggeredInternalAction(dt, action, colKeyValue) {
-    wraptext.handleTriggeredAction(dt.state, action, colKeyValue);
-    dispatchHeaderActionEvent(dt, action, colKeyValue);
-}
-
-function handleTriggeredCustomerAction(dt, action, colKeyValue) {
-    dispatchHeaderActionEvent(dt, action, colKeyValue);
-}
+// Height of a clickable menu item
+const ACTION_REM_HEIGHT = 2.125;
 
-function dispatchHeaderActionEvent(dt, action, colKeyValue) {
-    const userColumnIndex = getUserColumnIndex(dt.state, colKeyValue);
-    const customerColumnDefinition = dt.columns[userColumnIndex];
-
-    dt.dispatchEvent(
-        new CustomEvent('headeraction', {
-            detail: {
-                action: unwrap(action),
-                columnDefinition: unwrap(customerColumnDefinition),
-            },
-        })
-    );
-}
+// Height of the menu divider, 1 rem + 1px (1/16px)
+const DIVIDER_REM_HEIGHT = 1.0625;
 
-function getMenuAlignment(columns, index) {
-    const isLastColumn = index === columns.length - 1;
-
-    return isLastColumn || columns[index + 1].type === 'action'
-        ? 'auto-right'
-        : 'auto-left';
-}
+/************************** PUBLIC METHODS ***************************/
 
+/**
+ * Merges wrapText internal actions.
+ * If there are new internal actions in the future, they may be added here.
+ *
+ * @param {Object} state The state of the datatable
+ * @param {Object} columnDefinition The column definition to extract internal actions from
+ * @return {Array} All wrapText internal actions
+ */
 export function getInternalActions(state, columnDefinition) {
-    // merge all internal actions here
-    // currently, only wrapText internal actions
-    // there may be new internal actions in the future
-    return [...wraptext.getActions(state, columnDefinition)];
+    return [...getActions(state, columnDefinition)];
 }
 
 /**
  * Overrides the actions with the internal ones, plus the customer ones.
  *
- * @param {Object} state The state of the datatable.
+ * @param {Object} state The state of the datatable
  */
 export function updateHeaderActions(state) {
     const columns = getColumns(state);
@@ -59,31 +41,36 @@ export function updateHeaderActions(state) {
     });
 }
 
+/**
+ * For internal actions, handles triggering the action.
+ * Then dispatches the header action event.
+ *
+ * @param {Event} event
+ */
 export function handleHeaderActionTriggered(event) {
+    event.stopPropagation();
+
     const { action, actionType, colKeyValue } = event.detail;
 
-    event.stopPropagation();
-    if (actionType === 'customer') {
-        handleTriggeredCustomerAction(this, action, colKeyValue);
-    } else {
-        handleTriggeredInternalAction(this, action, colKeyValue);
+    if (actionType !== 'customer') {
+        handleTriggeredAction(this.state, action, colKeyValue);
     }
-}
 
-export function getColumnActionsDefaultState() {
-    return Object.assign({}, wraptext.getDefaultState());
+    dispatchHeaderActionEvent(this, action, colKeyValue);
 }
 
-// in rem, the height of a clickable menu item
-const ACTION_HEIGHT = 2.125;
-// 1 rem + 1px (1/16px), height of the menu divider
-const DIVIDER_HEIGHT = 1.0625;
-
+/**
+ * Calculates the size and positioning of the header action
+ * menu when it is opened.
+ *
+ * @param {Event} event
+ */
 export function handleHeaderActionMenuOpening(event) {
     event.stopPropagation();
     event.preventDefault();
-    const actionsHeight = event.detail.actionsCount * ACTION_HEIGHT;
-    const dividersHeight = event.detail.dividersCount * DIVIDER_HEIGHT;
+
+    const actionsHeight = event.detail.actionsCount * ACTION_REM_HEIGHT;
+    const dividersHeight = event.detail.dividersCount * DIVIDER_REM_HEIGHT;
     const wrapperHeight = 1;
     this._actionsMinHeightStyle = `min-height:${
         actionsHeight + dividersHeight + wrapperHeight
@@ -91,6 +78,47 @@ export function handleHeaderActionMenuOpening(event) {
     event.detail.saveContainerPosition(this.getViewableRect());
 }
 
+/**
+ * Resets header action menu height when closed.
+ */
 export function handleHeaderActionMenuClosed() {
     this._actionsMinHeightStyle = '';
 }
+
+/************************** PRIVATE METHODS ***************************/
+
+/**
+ * Dispatches the `headeraction` event.
+ *
+ * @param {Object} dt The datatable
+ * @param {Object} action The action to dispatch
+ * @param {String} colKeyValue The column to dispatch the action on
+ */
+function dispatchHeaderActionEvent(dt, action, colKeyValue) {
+    const userColumnIndex = getUserColumnIndex(dt.state, colKeyValue);
+    const customerColumnDefinition = dt.columns[userColumnIndex];
+
+    dt.dispatchEvent(
+        new CustomEvent('headeraction', {
+            detail: {
+                action: unwrap(action),
+                columnDefinition: unwrap(customerColumnDefinition),
+            },
+        })
+    );
+}
+
+/**
+ * Determines the menu alignment based on column placement.
+ *
+ * @param {Array} columns Array of all the columns
+ * @param {Integer} index The current column index to check
+ * @return {String} The computed alignment
+ */
+function getMenuAlignment(columns, index) {
+    const isLastColumn = index === columns.length - 1;
+
+    return isLastColumn || columns[index + 1].type === 'action'
+        ? 'auto-right'
+        : 'auto-left';
+}