@agilemotion/oui-react-js 1.8.20 → 1.8.22

package/dist/components/DataGrid.css

@@ -43,7 +43,11 @@ table.responsive-table thead {
         text-align: left;
     }
 
-.ouiTable td,.tableCellContentContainer td {
+.tableCellContentContainer td {
+    overflow: hidden !important;
+}
+
+.tableCellContentContainerNoWrap td {
     white-space: nowrap;
     overflow: hidden !important;
     text-overflow: ellipsis;
@@ -59,6 +63,10 @@ table.responsive-table thead {
     padding: 0 !important;
 }
 
+.ouiTable .oui-table-row {
+    border-bottom: 1px solid #e2e2e2;
+}
+
 .ouiTable td {
     padding: 16px 0 12px 8px;
     height: 54px;
@@ -68,13 +76,10 @@ table.responsive-table thead {
     text-align: left;
     font-weight: 500;
     font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-    border-bottom: 1px solid #e2e2e2;
     letter-spacing: 0.01071em;
     vertical-align: inherit;
     color: rgba(0, 0, 0, 0.87);
-    white-space: nowrap;
     overflow: hidden;
-    text-overflow: ellipsis;
 }
 
 .cellError, .editCellError {
@@ -154,27 +159,32 @@ table.responsive-table thead {
     overflow: auto;
 }
 
-.tableCellContentContainer:hover {
+.tableCellContentContainer:hover,
+.tableCellContentContainerNoWrap:hover{
     background-color: transparent !important;
 }
 
-.tableCellContentContainer {
+.tableCellContentContainer,
+.tableCellContentContainerNoWrap {
     width: 100%;
     background-color: transparent !important;
 }
 
-.tableCellContentContainer td {
+.tableCellContentContainer td,
+.tableCellContentContainerNoWrap td {
     padding: 0 4px 0 0 !important;
     height: auto !important;
     border: none !important;
     background-color: transparent !important;
 }
 
-.tableCellContentContainer td:hover {
+.tableCellContentContainer td:hover,
+.tableCellContentContainerNoWrap td:hover {
     background-color: transparent !important;
 }
 
-.tableCellContentContainer td:first-child {
+.tableCellContentContainer td:first-child,
+.tableCellContentContainerNoWrap td:first-child {
     padding-left: 0 !important;
 }
 

package/dist/components/DataGrid.js

@@ -27,6 +27,8 @@ var _Alert = _interopRequireDefault(require("react-bootstrap/Alert"));
 var _ApplicationManager = _interopRequireDefault(require("../ApplicationManager"));
 var _Layout = require("./layout/Layout");
 var _DynamicJS = _interopRequireDefault(require("../DynamicJS"));
+var _Switch = _interopRequireDefault(require("@mui/material/Switch"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -130,9 +132,19 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
   const [editorHandles] = _react.default.useState({});
   const [rowErrorMap] = _react.default.useState({});
   const [visible, setVisible] = _react.default.useState(true);
+  const [wrap, setWrap] = _react.default.useState(false);
   const rowCount = _react.default.useRef(-1);
   const rowsRef = _react.default.useRef([]);
   let noteKey = 0;
+  const columnWidths = _react.default.useRef({});
+  function updateColumnWidths() {
+    for (let col of config.columns) {
+      if (columnWidths.current[col.id]) {
+        col.attributes.width = columnWidths.current[col.id];
+      }
+    }
+    setRows([...rows]);
+  }
   const api = () => {
     return {
       get id() {
@@ -776,6 +788,24 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
     xs: 12,
     spacing: 1
   }, renderTiles())))) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: '100%',
+      padding: '4px 8px 0 8px',
+      borderBottom: '1px solid #e2e2e2'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_FormControlLabel.default, {
+    control: /*#__PURE__*/_react.default.createElement(_Switch.default, {
+      checked: wrap,
+      onChange: e => setWrap(e.target.checked),
+      color: "primary"
+    }),
+    sx: {
+      '& .MuiFormControlLabel-label': {
+        fontSize: '0.75rem'
+      }
+    },
+    label: "Wrap table text"
+  })), /*#__PURE__*/_react.default.createElement("div", {
     className: "responsive-table",
     style: {
       height: props.height
@@ -809,7 +839,10 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
     scrollWidth: scrollWidth,
     onSelectAllClick: handleSelectAllClick,
     onRequestSort: handleRequestSort,
-    rowCount: totalNumberOfRows
+    rowCount: totalNumberOfRows,
+    resizeHandler: () => {
+      setRows([...rows]);
+    }
   })), /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Tbody, {
     className: classes.tableBody,
     style: {
@@ -833,7 +866,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
       key: index,
       id: 'ROW-' + row.id,
       selected: isItemSelected,
-      className: (highlightRowSelection.current ? isItemSelected ? classes.tableSelected : classes.tableRow : '') + (row.className ? ' ' + row.className : '')
+      className: 'oui-table-row ' + ((highlightRowSelection.current ? isItemSelected ? classes.tableSelected : classes.tableRow : '') + (row.className ? ' ' + row.className : ''))
     }, config.selectionMode === 'MULTIPLE' ? /*#__PURE__*/_react.default.createElement(_reactSuperResponsiveTable.Td, {
       padding: "checkbox",
       width: MULTI_SELECT_CHECKBOX_COL_WIDTH + 'px',
@@ -870,6 +903,7 @@ const DataGrid = exports.DataGrid = /*#__PURE__*/_react.default.memo(/*#__PURE__
       key: index + "_" + column.id,
       onClick: event => handleCellClick(event, row.id, column)
     }, /*#__PURE__*/_react.default.createElement(_TableCellContent.default, {
+      wrap: wrap,
       onRowError: rowErrorHandler,
       handle: createCellEditorHandle(column),
       viewId: props.viewId,

package/dist/components/DataGridColumn.js

@@ -28,6 +28,73 @@ const DataGridColumn = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
   const [postfix, setPostfix] = _react.default.useState('');
   const [required, setRequired] = _react.default.useState(false);
   const classes = useStyles();
+  const columnWidths = _react.default.useRef({});
+  const resizingCol = _react.default.useRef(null);
+  const startX = _react.default.useRef(0);
+  const startWidth = _react.default.useRef(0);
+  const originalWidths = _react.default.useRef({});
+  const MIN_WIDTH = 5;
+  const MAX_WIDTH = 90;
+  function handleResizeStart(e, columnId) {
+    if (props.columns.length <= 1) return;
+    resizingCol.current = columnId;
+    startX.current = e.clientX;
+    startWidth.current = e.target.parentElement.offsetWidth;
+    originalWidths.current = {};
+    for (let col of props.columns) {
+      const width = parseFloat(col.attributes.width?.replace('%', '') || 100 / props.columns.length);
+      originalWidths.current[col.id] = width;
+    }
+    document.addEventListener('mousemove', handleResizeMove);
+    document.addEventListener('mouseup', handleResizeEnd);
+  }
+  function handleResizeMove(e) {
+    if (!resizingCol.current) return;
+    const dx = e.clientX - startX.current;
+    const table = document.querySelector('.ouiTable');
+    const tableWidth = table.offsetWidth;
+    let newWidthPx = startWidth.current + dx;
+    let newWidthPercent = newWidthPx / tableWidth * 100;
+    const resizedColId = resizingCol.current;
+    const resizedColIndex = props.columns.findIndex(col => col.id === resizedColId);
+    if (resizedColIndex === -1 || resizedColIndex === props.columns.length - 1) return;
+    const adjacentCol = props.columns[resizedColIndex + 1];
+    const adjacentColId = adjacentCol.id;
+    const originalResizedWidth = originalWidths.current[resizedColId];
+    const originalAdjacentWidth = originalWidths.current[adjacentColId];
+    let delta = newWidthPercent - originalResizedWidth;
+    let newAdjacentWidth = originalAdjacentWidth - delta;
+    if (newWidthPercent < MIN_WIDTH) {
+      delta = MIN_WIDTH - originalResizedWidth;
+      newWidthPercent = MIN_WIDTH;
+      newAdjacentWidth = originalAdjacentWidth - delta;
+    }
+    if (newAdjacentWidth < MIN_WIDTH) {
+      delta = originalAdjacentWidth - MIN_WIDTH;
+      newWidthPercent = originalResizedWidth + delta;
+      newAdjacentWidth = MIN_WIDTH;
+    }
+    newWidthPercent = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, newWidthPercent));
+    newAdjacentWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, newAdjacentWidth));
+    columnWidths.current = {
+      [resizedColId]: newWidthPercent.toFixed(2) + '%',
+      [adjacentColId]: newAdjacentWidth.toFixed(2) + '%'
+    };
+    updateColumnWidths();
+  }
+  function handleResizeEnd() {
+    document.removeEventListener('mousemove', handleResizeMove);
+    document.removeEventListener('mouseup', handleResizeEnd);
+    resizingCol.current = null;
+  }
+  function updateColumnWidths() {
+    for (let col of props.columns) {
+      if (columnWidths.current[col.id]) {
+        col.attributes.width = columnWidths.current[col.id];
+      }
+    }
+    props.resizeHandler();
+  }
   _react.default.useEffect(() => {
     props.handle.api = api();
     if (_Utils.default.isNull(config)) {
@@ -61,11 +128,26 @@ const DataGridColumn = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.defa
     padding: 'default',
     className: config.cellFormat === 'MONEY' || config.cellFormat === 'NUMBER' ? classes.tableHeaderCellNumeric : classes.tableHeaderCell,
     style: {
-      width: config.attributes.width,
+      width: config.attributes.width || 'auto',
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      position: 'relative',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
     }
-  }, /*#__PURE__*/_react.default.createElement(_TableSortLabel.default, {
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      height: '100%',
+      width: '5px',
+      cursor: 'col-resize',
+      zIndex: 10
+    },
+    onMouseDown: e => handleResizeStart(e, props.config.id)
+  }), /*#__PURE__*/_react.default.createElement(_TableSortLabel.default, {
     active: config.attributes['sortable'] === true,
     direction: 'desc',
     onClick: props.createSortHandler(config.id)

package/dist/components/DataGridHeading.js

@@ -75,6 +75,8 @@ const DataGridHeading = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.def
     config: column,
     handle: createColumnHandle(),
     ref: /*#__PURE__*/_react.default.createRef(),
+    columns: props.config.columns,
+    resizeHandler: props.resizeHandler,
     createSortHandler: createSortHandler
   })));
 }));

package/dist/components/TableCellContent.js

@@ -189,7 +189,7 @@ const TableCellContent = /*#__PURE__*/_react.default.memo(/*#__PURE__*/_react.de
     updateErrors(error);
     let hasError = !_Utils.default.isNull(error);
     return /*#__PURE__*/_react.default.createElement("table", {
-      className: 'tableCellContentContainer',
+      className: props.wrap ? 'tableCellContentContainer' : 'tableCellContentContainerNoWrap',
       border: "0"
     }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, hasError ? /*#__PURE__*/_react.default.createElement("td", {
       style: {

package/dist/components/form/BaseField.js

@@ -34,6 +34,10 @@ const BaseField = props => {
   const ref = _react.default.useRef(null);
   const valid = _react.default.useRef(false);
   _react.default.useEffect(() => {
+    initialValueBound.current = false;
+    bind();
+  }, [valueObject]);
+  function bind() {
     let boundValue = valueObject[valueProperty];
     if (boundValue && !initialValueBound.current) {
       initialValueBound.current = true;
@@ -51,6 +55,9 @@ const BaseField = props => {
         valueRef.current = boundValue;
       }
     }
+  }
+  _react.default.useEffect(() => {
+    bind();
   }, [valueObject[valueProperty]]);
 
   // Change the required value and re-validate field if necessary

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilemotion/oui-react-js",
-  "version": "1.8.20",
+  "version": "1.8.22",
   "files": [
     "dist"
   ],