Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
sheetgo-react-window-sortable
Advanced tools
Readme
This library provides drag and drop sort functionality for very large lists.
This library wraps Brian Vaughn's excellent library react-window and adds drag and drop sorting.
This library was revised and customized by Sheetgo, providing touch support, better code legibility and array reorder functions.
# yarn
yarn add sheetgo-react-window-sortable
# npm
npm install --save sheetgo-react-window-sortable
Fixed Size List (for rows of equal height) full example
<SortableFixedSizeList
height={height}
width={width}
itemCount={n}
itemSize={30}
itemData={this.state.data}
onSortOrderChanged={({originalIndex, newIndex}) => {
move(this.state.data, originalIndex, newIndex);
this.setState({
data: this.state.data.slice(0),
})
}}
>
{React.forwardRef(({data, index, style, onSortMouseDown, onSortTouchStart}: ChildrenProps, ref: Ref<any>) => (
<div ref={ref} style={style}>
<button
onMouseDown={onSortMouseDown}
onTouchStart={onSortTouchStart}
>
drag handle
</button>
{data[index]}
</div>
))}
</SortableFixedSizeList>
Variable Size List (for rows of variable height) full example
<SortableVariableSizeList
height={height}
width={width}
itemCount={n}
itemSize={index => index % 2 === 0 ? 30 : 50}
itemData={this.state.data}
onSortOrderChanged={({originalIndex, newIndex}: {originalIndex: number, newIndex: number}) => {
move(this.state.data, originalIndex, newIndex);
this.setState({
data: this.state.data.slice(0)
})
}}
>
{React.forwardRef(({data, index, style, onSortMouseDown, onSortTouchStart}: ChildrenProps, ref: Ref<any>) => (
<div ref={ref} style={style}>
<button
onMouseDown={onSortMouseDown}
onTouchStart={onSortTouchStart}
>
drag handle
</button>
{data[index]}
</div>
))}
</SortableVariableSizeList>
interface Props {
// a render function to render list items
children: React.ComponentType<ChildrenProps>;
// the distance from the top or bottom of the scroll
// window where autoscroll should kick in
autoScrollWhenDistanceLessThan?: number;
// the speed at which the autoscroll should go
autoScrollSpeed?: number;
// set the class name for the element that is being
// moved by the cursor
draggingElementClassName?: string;
// set override styles on the style prop for the element
// being moved by the cursor
draggingElementStyle?: CSSProperties;
// a custom element to render as a spot where the dragged
// element can be dropped.
dropElement?: any;
// a callback when a sort has completed
onSortOrderChanged(params: { originalIndex: number; newIndex: number }): void;
// the height of the scroll window (px)
// you may want to use https://github.com/bvaughn/react-virtualized-auto-sizer
// for this.
height: number;
// the width of the scroll window (px)
// you may want to use https://github.com/bvaughn/react-virtualized-auto-sizer
// for this.
width: number;
// number of rows in data set
itemCount: number;
// height of the list item in px
// for FixedSizedLists, this will be a constant.
// for VariableSizedLists, this will be a lookup function
itemSize: number | (index) => number;
// the data to pass to the render function
itemData: any[];
}
FAQs
A take on original React Window Sortable that is a HOC for react-window that allows drag and drop sorting of lists by Sheetgo.
The npm package sheetgo-react-window-sortable receives a total of 76 weekly downloads. As such, sheetgo-react-window-sortable popularity was classified as not popular.
We found that sheetgo-react-window-sortable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.