@corva/ui 3.1.0-rc.4 → 3.1.0-rc.5

package/components/ResizableTable/ResizableTableHeaderCell.js

@@ -1 +1,125 @@
-import{__assign as e}from'./../../ext-esm/tslib/tslib.es6.js';import{jsx as r,jsxs as i}from"react/jsx-runtime";import{useState as t,useEffect as n}from"react";import o from"prop-types";import a from"classnames";import l from"react-draggable";import{makeStyles as d}from"@material-ui/core/styles";import{TableCell as s}from"@material-ui/core";var c=d((function(e){return{resizableColumnHeader:{display:"flex",paddingRight:0,justifyContent:"space-between"},tableResizer:{width:6,borderRadius:10,opacity:.7,cursor:"col-resize",marginRight:-11,marginTop:-16,marginBottom:-16},hovered:{backgroundColor:e.palette.primary.main}}})),u=function(e){var r;return null===(r=document.getElementById(e))||void 0===r?void 0:r.offsetWidth};function m(o){var d,m,p=o.children,f=o.cellName,h=o.nextCellName,v=o.widths,g=o.handleWidthsUpdate,b=c(),R=t(!1),x=R[0],y=R[1],z=t(),C=z[0],N=z[1],q=t(),w=q[0],j=q[1];if(n((function(){var e;N(u("content-".concat(f))+12),j(u("content-".concat(h))+12),g(((e={})[f]=u(f),e))}),[]),!p)return null;return r(s,e({width:v[f],id:f},p.props,{children:i("div",{className:b.resizableColumnHeader,children:[r("div",{id:"content-".concat(f),children:null!==(m=null===(d=null==p?void 0:p.props)||void 0===d?void 0:d.children)&&void 0!==m?m:null}),r(l,{axis:"x",onDrag:function(e,r){!function(e){var r,i=v[f]+e,t=v[h]-e;i<0||i<C||t<w||g(((r={})[f]=i,r[h]=t,r))}(r.deltaX)},position:{x:0},zIndex:999,onStart:function(){y(!0)},onStop:function(){var e;v[f]!==u(f)&&g(((e={})[f]=u(f),e)),y(!1)},children:r("div",{className:a(b.tableResizer,x&&b.hovered),onMouseEnter:function(){return y(!0)},onMouseLeave:function(){return y(!1)}})})]})}))}var p={children:o.element.isRequired,cellName:o.string.isRequired,nextCellName:o.string.isRequired,widths:o.shape({}).isRequired,handleWidthsUpdate:o.func.isRequired};m.propTypes=p;export{m as default};
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Draggable from 'react-draggable';
+import { makeStyles } from '@material-ui/core/styles';
+import { TableCell } from '@material-ui/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var useStyles = makeStyles(function (theme) {
+  return {
+    resizableColumnHeader: {
+      display: 'flex',
+      paddingRight: 0,
+      justifyContent: 'space-between'
+    },
+    tableResizer: {
+      width: 6,
+      borderRadius: 10,
+      opacity: 0.7,
+      cursor: 'col-resize',
+      marginRight: -11,
+      marginTop: -16,
+      marginBottom: -16
+    },
+    hovered: {
+      backgroundColor: theme.palette.primary.main
+    }
+  };
+});
+var getOffsetWidth = function getOffsetWidth(cellName) {
+  var _document$getElementB;
+  return (_document$getElementB = document.getElementById(cellName)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.offsetWidth;
+};
+var TABLE_HEADER_CELL_PADDING = 12;
+function ResizableTableHeaderCell(_ref) {
+  var _children$props$child, _children$props;
+  var children = _ref.children,
+    cellName = _ref.cellName,
+    nextCellName = _ref.nextCellName,
+    widths = _ref.widths,
+    handleWidthsUpdate = _ref.handleWidthsUpdate;
+  var classes = useStyles();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentCellMinWidth = _useState4[0],
+    setCurrentCellMinWidth = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    nextCellMinWidth = _useState6[0],
+    setNextCellMinWidth = _useState6[1];
+  useEffect(function () {
+    setCurrentCellMinWidth(getOffsetWidth("content-".concat(cellName)) + TABLE_HEADER_CELL_PADDING);
+    setNextCellMinWidth(getOffsetWidth("content-".concat(nextCellName)) + TABLE_HEADER_CELL_PADDING);
+    handleWidthsUpdate(_defineProperty({}, cellName, getOffsetWidth(cellName)));
+  }, []);
+  if (!children) return null;
+  var resize = function resize(deltaX) {
+    var _handleWidthsUpdate2;
+    var newWidth = widths[cellName] + deltaX;
+    var newNextWidth = widths[nextCellName] - deltaX;
+    if (newWidth < 0 || newWidth < currentCellMinWidth || newNextWidth < nextCellMinWidth) return;
+    handleWidthsUpdate((_handleWidthsUpdate2 = {}, _defineProperty(_handleWidthsUpdate2, cellName, newWidth), _defineProperty(_handleWidthsUpdate2, nextCellName, newNextWidth), _handleWidthsUpdate2));
+  };
+  return /*#__PURE__*/jsx(TableCell, _objectSpread(_objectSpread({
+    width: widths[cellName],
+    id: cellName
+  }, children.props), {}, {
+    children: /*#__PURE__*/jsxs("div", {
+      className: classes.resizableColumnHeader,
+      children: [/*#__PURE__*/jsx("div", {
+        id: "content-".concat(cellName),
+        children: (_children$props$child = children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.children) !== null && _children$props$child !== void 0 ? _children$props$child : null
+      }), /*#__PURE__*/jsx(Draggable, {
+        axis: "x",
+        onDrag: function onDrag(event, _ref2) {
+          var deltaX = _ref2.deltaX;
+          resize(deltaX);
+        }
+        //@ts-ignore
+        ,
+        position: {
+          x: 0
+        },
+        zIndex: 999,
+        onStart: function onStart() {
+          setIsHovered(true);
+        },
+        onStop: function onStop() {
+          if (widths[cellName] !== getOffsetWidth(cellName)) {
+            handleWidthsUpdate(_defineProperty({}, cellName, getOffsetWidth(cellName)));
+          }
+          setIsHovered(false);
+        },
+        children: /*#__PURE__*/jsx("div", {
+          className: classNames(classes.tableResizer, isHovered && classes.hovered),
+          onMouseEnter: function onMouseEnter() {
+            return setIsHovered(true);
+          },
+          onMouseLeave: function onMouseLeave() {
+            return setIsHovered(false);
+          }
+        })
+      })]
+    })
+  }));
+}
+var resizableTableHeaderCellPropTypes = {
+  children: PropTypes.element.isRequired,
+  cellName: PropTypes.string.isRequired,
+  nextCellName: PropTypes.string.isRequired,
+  widths: PropTypes.shape({}).isRequired,
+  handleWidthsUpdate: PropTypes.func.isRequired
+};
+ResizableTableHeaderCell.propTypes = resizableTableHeaderCellPropTypes;
+
+export { ResizableTableHeaderCell as default };
+//# sourceMappingURL=ResizableTableHeaderCell.js.map

package/components/ResizableTable/ResizableTableHeaderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizableTableHeaderCell.js","sources":["../../../src/components/ResizableTable/ResizableTableHeaderCell.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Draggable from 'react-draggable';\n\nimport { makeStyles } from '@material-ui/core/styles';\nimport { TableCell } from '@material-ui/core';\n\nconst useStyles = makeStyles(theme => ({\n  resizableColumnHeader: {\n    display: 'flex',\n    paddingRight: 0,\n    justifyContent: 'space-between',\n  },\n  tableResizer: {\n    width: 6,\n    borderRadius: 10,\n    opacity: 0.7,\n    cursor: 'col-resize',\n    marginRight: -11,\n    marginTop: -16,\n    marginBottom: -16,\n  },\n  hovered: {\n    backgroundColor: theme.palette.primary.main,\n  },\n}));\n\nconst getOffsetWidth = cellName => document.getElementById(cellName)?.offsetWidth;\n\nconst TABLE_HEADER_CELL_PADDING = 12;\n\ninterface ResizableTableHeaderCellProps extends PropTypes.InferProps<typeof resizableTableHeaderCellPropTypes> {}\n\nexport default function ResizableTableHeaderCell({\n  children,\n  cellName,\n  nextCellName,\n  widths,\n  handleWidthsUpdate,\n}: ResizableTableHeaderCellProps): JSX.Element {\n  const classes = useStyles();\n\n  const [isHovered, setIsHovered] = useState<boolean>(false);\n  const [currentCellMinWidth, setCurrentCellMinWidth] = useState<number>();\n  const [nextCellMinWidth, setNextCellMinWidth] = useState<number>();\n\n  useEffect(() => {\n    setCurrentCellMinWidth(getOffsetWidth(`content-${cellName}`) + TABLE_HEADER_CELL_PADDING);\n    setNextCellMinWidth(getOffsetWidth(`content-${nextCellName}`) + TABLE_HEADER_CELL_PADDING);\n    handleWidthsUpdate({ [cellName]: getOffsetWidth(cellName) });\n  }, []);\n\n  if (!children) return null;\n\n  const resize = deltaX => {\n    const newWidth = widths[cellName] + deltaX;\n    const newNextWidth = widths[nextCellName] - deltaX;\n    if (newWidth < 0 || newWidth < currentCellMinWidth || newNextWidth < nextCellMinWidth) return;\n    handleWidthsUpdate({ [cellName]: newWidth, [nextCellName]: newNextWidth });\n  };\n\n  return (\n    <TableCell width={widths[cellName]} id={cellName} {...children.props}>\n      <div className={classes.resizableColumnHeader}>\n        <div id={`content-${cellName}`}>{children?.props?.children ?? null}</div>\n        <Draggable\n          axis=\"x\"\n          onDrag={(event, { deltaX }) => {\n            resize(deltaX);\n          }}\n          //@ts-ignore\n          position={{ x: 0 }}\n          zIndex={999}\n          onStart={() => {\n            setIsHovered(true);\n          }}\n          onStop={() => {\n            if (widths[cellName] !== getOffsetWidth(cellName)) {\n              handleWidthsUpdate({ [cellName]: getOffsetWidth(cellName) });\n            }\n            setIsHovered(false);\n          }}\n        >\n          <div\n            className={classNames(classes.tableResizer, isHovered && classes.hovered)}\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n          />\n        </Draggable>\n      </div>\n    </TableCell>\n  );\n}\n\nconst resizableTableHeaderCellPropTypes = {\n  children: PropTypes.element.isRequired,\n  cellName: PropTypes.string.isRequired,\n  nextCellName: PropTypes.string.isRequired,\n  widths: PropTypes.shape({}).isRequired,\n  handleWidthsUpdate: PropTypes.func.isRequired,\n};\n\nResizableTableHeaderCell.propTypes = resizableTableHeaderCellPropTypes;\n"],"names":["useStyles","makeStyles","theme","resizableColumnHeader","display","paddingRight","justifyContent","tableResizer","width","borderRadius","opacity","cursor","marginRight","marginTop","marginBottom","hovered","backgroundColor","palette","primary","main","getOffsetWidth","cellName","document","getElementById","offsetWidth","TABLE_HEADER_CELL_PADDING","ResizableTableHeaderCell","children","nextCellName","widths","handleWidthsUpdate","classes","useState","isHovered","setIsHovered","currentCellMinWidth","setCurrentCellMinWidth","nextCellMinWidth","setNextCellMinWidth","useEffect","resize","deltaX","newWidth","newNextWidth","_jsx","props","_jsxs","event","x","classNames","resizableTableHeaderCellPropTypes","PropTypes","element","isRequired","string","shape","func","propTypes"],"mappings":"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"}