runjuu / column-resizer Goto Github PK
View Code? Open in Web Editor NEW🐙 A set of libraries for multi-column(row) resizing
Home Page: https://column-resizer.runjuu.com
License: MIT License
column-resizer's People
Stargazers
Watchers
column-resizer's Issues
[React-Babel] Unexpected token
Hi, after installing this library (which looks perfect for my use case) inside a CRA project I am getting this error:
Failed to compile.
./node_modules/@column-resizer/core/dist/index.js 203:15
Module parse failed: Unexpected token (203:15)
File was processed with these loaders:
* ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| var C = class {
> disposeFnSet = new Set();
| watchResizerEvent = (e, t, i) => {
| e === null || e === void 0 ? void 0 : e.addEventListener(t, i);
I am using react-scripts version 4 which is a bit older. Could this be due to that?
Can't change the minSize dynamically
Thank you for your work!
I'm enjoying this library, but I faced one weird issue:
The minSize (and potentially maxSize as well) can't be changed dynamically.
Here is Codesandbox with an example:
https://codesandbox.io/s/column-resizer-dynamic-minsize-jllyxy?file=/src/App.js
And here is demo video:
column-resizer-bug.mp4
Current behavior
The minSize of the section is not updated (set to undefined) when the checkbox is unchecked.
And the section can't be resized to width below the initial minSize.
Expected behavior
After unchecking the checkbox, I should be able to resize the section to a width as low as 0px.
Notes
This issue happens only when setting the minSize dynamically to a value lower than the initial one (minSize<150 or undefined, in the example above). But setting a higher value (minSize>150) seems to work.
Cursor style overrided
If I add a different cursor style to the style attribute for BAR, it gets overridden by a child element that I don't know where it comes from.
Here's the React code:
<Bar size={3} style={{ background: '#888888', cursor: "default"}} />
And here is the DOM:
<div data-item-type="BAR" data-item-config="{"size":3}" style="background: rgb(136, 136, 136); cursor: default; position: relative; flex: 0 0 3px;"><div style="position: absolute; inset: 0px; cursor: col-resize; -webkit-tap-highlight-color: transparent; user-select: none;"></div></div>
I've gone through the package files, but I don't know where that child-element with the col-resize cursor is being injected, because it overrides the parent's style.
RTL Support
In every project's life there's the inevitable "RTL support" issue. 😃
Under <html dir="rtl"> the flexbox dir flips as expected, but the resizer drag handler still assumes dragging left decreases the column width and right increases. This results in visually-opposite behavior to use expectations.
I imagine the fix isn't hard, could have a crack at a PR, but wanted to agree on a plan here first.
Dynamic update amount of sections
<div>
<Container>
{array.map((child, index, array) => {
return (
<div key={index}>
<Section
onSizeChanged={onSectionResize}
minSize={50}
defaultSize={child.width}
>
<div> {child.content}</div>
</Section>
<Bar size={4} />
</div>
)
})}
</Container>
<Tooltip content="Add column" side="top" container={element.id as string} >
<div onClick={onColumnAdd} > <Icon icon='faPlus' /> </div>
</Tooltip> </div>
In case below, after adding new item to array, newly added Section will be non-resizable. Any idea how to fix that behaviour ?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.