df0583f9b8
* change reference of Catpure to Capture Co-Authored-By: Vikram <93216400+vikrampm1@users.noreply.github.com> * change reference of expicitly to explicitly Co-Authored-By: Vikram <93216400+vikrampm1@users.noreply.github.com> * change reference 'cutted' to 'cut' * change reference 'determening' to 'determining' * change reference 'retreive' to 'retrieve' * change reference 'neccessary' to 'necessary' * change reference 'Fitler' to 'Filter' * change reference of "seperate" to "separate" Co-Authored-By: Ankit K Gupta <ankit.himcs@gmail.com> * change reference of "wether" to "whether" Co-Authored-By: Sumit Bagthariya <67687255+qasumitbagthariya@users.noreply.github.com> * change reference of "staus" to "status" * change reference of "retrive" to "retrieve" * change references of "gatways" to "gateways" * change references of "existant" to "existent" * change reference of "requries" to "requires" * change reference of "configuation" to "configuration" * change reference of "processsing" to "processing" * change reference of "represenation" to "representation" * change reference of "dimentions" to "dimensions" * change references of "reigster" to "register" * change reference of "colum" to "column" * change reference of "transtions" to "transitions" * change references of "intially" to "initially" * change references of "orignal" to "original" * change references of "deprected" to "deprecated" * change references of "paramter" to "parameter" * change reference of "intance" to "instance" * change reference of "elemets" to "elements" * change references of "funcitons" to "functions" * change reference of "specificed" to "specified" * change references of "atributes" to "attributes" * change reference of "tast" to "task" * change reference of "chaning" to "changing" * change reference of "retreiving" to "retrieving" * change reference of "caluclation" to "calculation" * change references of "Invaid" to "Invalid" * change references of "paramaters" to "parameters" * change reference of "Additonal" to "Additional" * change reference of "teh" to "the" * change reference of "evalutes" to "evaluates" * change reference of "addedd" to "added" * change reference of "excempt" to "exempt" * change reference of "sequencially" to "sequentially" * change reference of "previos" to "previous" * change reference of "elegible" to "eligible" * change references of "Boostrap" to "Bootstrap" * change references of "compability" to "compatibility" * change reference of "heirarchy" to "hierarchy" * change references of "visibilty" to "visibility" * change reference of "comparsion" to "comparison" * change reference of "capabilties" to "capabilities" * change reference of "datatores" to "datastores" * change reference of "occured" to "occurred" * change reference of "coresponding" to "corresponding" * change references of "thier" to "their" * change reference of "sucessfully" to "successfully" * change reference of "insde" to "inside" * change reference of "nagivation" to "navigation" * change references of "visiblity" to "visibility" * change reference of "documentaiton" to "documentation" * change reference of "anayltics" to "analytics" * change reference of "intalling" to "installing" * change reference of "mininum" to "minimum" * change references of "intial" to "initial" * change reference of "Feld" to "Field" * change reference of "taks" to "task" * change reference of "trasnfer" to "transfer" * change reference of "respone" to "response" * change reference of "Extenstions" to "Extensions" * change reference of "detault" to "default" * change reference of "simultanious" to "simultaneous" * change reference of "overides" to "overrides" * change references of "Indvidual" to "Individual" * change reference of "refering" to "referring" * change reference of "aginst" to "against" * change reference of "execuatable" to "executable" * change reference of "repsonse" to "response" * change reference of "documention" to "documentation" * change reference of "asumed" to "assumed" * change reference of "Minium" to "Minimum" * change reference of "unqiue" to "unique" * change references of "existance" to "existence" * change reference of "compatability" to "compatibility" * change reference of "Taxnomy" to "Taxonomy" * change reference of "quering" to "querying" * change reference of "retrun" to "return" * change reference of "informations" to "information" Co-Authored-By: Viktor Szépe <viktor@szepe.net> * Add changelog * Add changelog * Fix typo --------- Co-authored-by: Vikram <93216400+vikrampm1@users.noreply.github.com> Co-authored-by: Ankit K Gupta <ankit.himcs@gmail.com> Co-authored-by: Sumit Bagthariya <67687255+qasumitbagthariya@users.noreply.github.com> Co-authored-by: Viktor Szépe <viktor@szepe.net> Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> |
||
|---|---|---|
| .. | ||
| stories | ||
| test | ||
| README.md | ||
| draggable-icon.tsx | ||
| index.ts | ||
| non-sortable-item.tsx | ||
| sortable-handle.scss | ||
| sortable-handle.tsx | ||
| sortable-item.scss | ||
| sortable-item.tsx | ||
| sortable.tsx | ||
| style.scss | ||
| types.ts | ||
| utils.ts | ||
README.md
Sortable
This component provides a wrapper to allow dragging and sorting of items.
Usage
This component accepts any valid JSX elements as children. Adding a key to elements will provide a way to later identify the order of these elements in callbacks.
<Sortable onOrderChange={ ( items ) => console.log( 'Items have been reordered:', items ) }>
<div key="item-1">List item 1</div>
<div key="item-2">List item 2</div>
<div key="item-3">List item 3</div>
</Sortable>
Props
| Name | Type | Default | Description |
|---|---|---|---|
children |
JSX.Element | JSX.Element[] | undefined |
The draggable items in the list |
isHorizontal |
boolean | false |
Determines if the sortable container should be droppable horizontally |
onDragEnd |
Function | () => null |
A callback when an item is no longer being dragged |
onDragOver |
Function | () => null |
A callback when an item is being dragged over by another item |
onDragStart |
Function | () => null |
A callback when an item starts being dragged |
onOrderChange |
Function | () => null |
A callback when the order of the items has been updated |