@wix/design-system
Version:
@wix/design-system
173 lines (170 loc) • 7.76 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ColumnResizeContext = exports.ColumnResize = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _DataTable = require("../DataTable/DataTable.utils");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Table/ColumnResize/ColumnResize.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var MIN_COLUMN_WIDTH = 60;
var parseColumnWidth = width => {
if (!width) return MIN_COLUMN_WIDTH;
if (typeof width === 'number') {
return width;
}
if (typeof width === 'string') {
if (width.endsWith('px')) {
var _parsed = parseInt(width, 10);
return isNaN(_parsed) ? MIN_COLUMN_WIDTH : _parsed;
}
if (width.endsWith('%')) {
return width;
}
var parsed = parseInt(width, 10);
return isNaN(parsed) ? MIN_COLUMN_WIDTH : parsed;
}
return MIN_COLUMN_WIDTH;
};
var createDefaultContext = () => ({
columnWidths: null,
getEffectiveColumnWidth: column => column.width,
// default handling of sticky columns style is the exsisting util
getStickyColumnStyle: (columns, column) => {
return (0, _DataTable.getStickyColumnStyle)(columns, column);
},
getTableWidth: fallback => fallback || '100%',
resizeColumn: () => {}
});
var ColumnResizeContext = exports.ColumnResizeContext = /*#__PURE__*/(0, _react.createContext)(createDefaultContext());
/**
* ColumnResize manages the state and logic of column resizing for tables.
* Given an array of columns with resize configuration, it provides a context with resize handlers,
* width calculations, and sticky column positioning.
*
* Key features:
* - Manages column width state with min/max constraints
* - Provides effective width calculations for columns
* - Handles sticky column positioning with dynamic widths
* - Supports both resizable and non-resizable table modes
* - Offers resize event callbacks (onColumnResize, onColumnResizeStart, onColumnResizeEnd)
*/
var ColumnResize = _ref => {
var {
columns = [],
isTableResizable = false,
onColumnResize,
onColumnResizeStart,
onColumnResizeEnd,
minColumnWidth = MIN_COLUMN_WIDTH,
maxColumnWidth,
children
} = _ref;
var initializeColumnWidths = () => {
if (!isTableResizable) {
return null;
}
// Resizable flow: Parse all widths to numbers, store in mapping
return columns.reduce((acc, column) => {
var _column$resizeProps;
var id = (_column$resizeProps = column.resizeProps) == null ? void 0 : _column$resizeProps.id;
if (id) {
var parsedWidth = parseColumnWidth(column.width);
if (typeof parsedWidth === 'number') {
acc[id] = parsedWidth;
}
}
return acc;
}, {});
};
var [columnWidths, setColumnWidths] = (0, _react.useState)(initializeColumnWidths);
var getEffectiveColumnWidth = (0, _react.useCallback)(column => {
if (isTableResizable && columnWidths) {
var _column$resizeProps2;
var id = (_column$resizeProps2 = column.resizeProps) == null || (_column$resizeProps2 = _column$resizeProps2.id) == null ? void 0 : _column$resizeProps2.toString();
if (id && columnWidths[id]) {
return columnWidths[id];
}
return parseColumnWidth(column.width);
}
return column.width;
}, [isTableResizable, columnWidths]);
var getStickyColumnStyle = (0, _react.useCallback)((columns, column) => {
var left = 0;
for (var i = 0; i < columns.length; i++) {
var col = columns[i];
if (col === column) {
break;
}
var horizontalPadding = i === 0 ? _DataTable.CELL_EDGE_PADDING + _DataTable.CELL_PADDING : 2 * _DataTable.CELL_PADDING;
var effectiveWidth = getEffectiveColumnWidth(col);
var widthValue = typeof effectiveWidth === 'string' ? parseInt(effectiveWidth, 10) : effectiveWidth;
left += (widthValue !== null && widthValue !== void 0 ? widthValue : MIN_COLUMN_WIDTH) + horizontalPadding;
}
return {
left
};
}, [getEffectiveColumnWidth]);
var handleColumnResize = (0, _react.useCallback)((columnId, newWidth) => {
if (!isTableResizable || !columnWidths) {
return;
}
var clampedWidth = newWidth;
if (minColumnWidth !== undefined && newWidth < minColumnWidth) {
clampedWidth = minColumnWidth;
}
if (maxColumnWidth !== undefined && newWidth > maxColumnWidth) {
clampedWidth = maxColumnWidth;
}
setColumnWidths(prevState => {
if (!prevState) {
return prevState;
}
var updatedColumnWidths = _objectSpread(_objectSpread({}, prevState), {}, {
[columnId]: clampedWidth
});
return updatedColumnWidths;
});
if (onColumnResize) {
onColumnResize(columnId, clampedWidth);
}
}, [isTableResizable, columnWidths, minColumnWidth, maxColumnWidth, onColumnResize]);
var handleColumnResizeStart = (0, _react.useCallback)((columnId, e) => {
if (onColumnResizeStart && columnWidths) {
onColumnResizeStart(columnId, columnWidths[columnId], e);
}
}, [onColumnResizeStart, columnWidths]);
var handleColumnResizeEnd = (0, _react.useCallback)((columnId, e) => {
if (onColumnResizeEnd && columnWidths) {
onColumnResizeEnd(columnId, columnWidths[columnId], e);
}
}, [onColumnResizeEnd, columnWidths]);
var getTableWidth = (0, _react.useCallback)(fallbackWidth => {
if (!isTableResizable) {
return fallbackWidth || '100%';
}
return 'fit-content';
}, [isTableResizable]);
var contextValue = (0, _react.useMemo)(() => ({
columnWidths,
getEffectiveColumnWidth,
getStickyColumnStyle,
getTableWidth,
resizeColumn: handleColumnResize,
startColumnResize: handleColumnResizeStart,
endColumnResize: handleColumnResizeEnd
}), [columnWidths, getEffectiveColumnWidth, getStickyColumnStyle, getTableWidth, handleColumnResize, handleColumnResizeStart, handleColumnResizeEnd]);
return /*#__PURE__*/_react.default.createElement(ColumnResizeContext.Provider, {
value: contextValue,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 263,
columnNumber: 5
}
}, children);
};
exports.ColumnResize = ColumnResize;
//# sourceMappingURL=ColumnResize.js.map