-
Notifications
You must be signed in to change notification settings - Fork 379
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #889 from pnp/v2-dev
Merge for v2.7.0
- Loading branch information
Showing
60 changed files
with
1,878 additions
and
186 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
#!/bin/sh | ||
if [ -z "$husky_skip_init" ]; then | ||
debug () { | ||
[ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1" | ||
} | ||
|
||
readonly hook_name="$(basename "$0")" | ||
debug "starting $hook_name..." | ||
|
||
if [ "$HUSKY" = "0" ]; then | ||
debug "HUSKY env variable is set to 0, skipping hook" | ||
exit 0 | ||
fi | ||
|
||
if [ -f ~/.huskyrc ]; then | ||
debug "sourcing ~/.huskyrc" | ||
. ~/.huskyrc | ||
fi | ||
|
||
export readonly husky_skip_init=1 | ||
sh -e "$0" "$@" | ||
exitCode="$?" | ||
|
||
if [ $exitCode != 0 ]; then | ||
echo "husky - $hook_name hook exited with code $exitCode (error)" | ||
exit $exitCode | ||
fi | ||
|
||
exit 0 | ||
fi |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
# DragDropFiles | ||
|
||
This control allows to drag and drop files in pre defined areas. | ||
|
||
## How to use this control in your solutions | ||
|
||
- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency. | ||
- Import the following modules to your component: | ||
|
||
```TypeScript | ||
import { DragDropFiles } from "@pnp/spfx-controls-react/lib/DragDropFiles"; | ||
``` | ||
|
||
- Use the DragDropFiles control in your code as follows: | ||
|
||
```jsx | ||
<DragDropFiles | ||
dropEffect="copy" | ||
enable={true} | ||
onDrop={this._getDropFiles} | ||
iconName="Upload" | ||
labelMessage= "My custom upload File" | ||
> | ||
{/* Specify the components to load where Drag and drop area should work */} | ||
</DragDropFiles> | ||
``` | ||
**Content with drag and drop applied** | ||
|
||
```jsx | ||
<DragDropFiles | ||
dropEffect="copy" | ||
enable={true} | ||
onDrop={this._getDropFiles} | ||
iconName="Upload" | ||
labelMessage= "My custom upload File" | ||
> | ||
Drag and drop here... | ||
|
||
</DragDropFiles> | ||
``` | ||
![Custom html with drag and drop](../assets/DragDropFilesSample1.png) | ||
|
||
**ListView with drag and drop applied** | ||
|
||
![ListView control with drag and drop Control](../assets/ListView-DragDrop.png) | ||
|
||
**FilePicker with drag and drop applied** | ||
|
||
![FilePicker control with grouping](../assets/DragDropFilesSample2.png) | ||
|
||
- With the `onDrop` handler you can define a method that returns files and files inside folders that where drag and drop by user. | ||
|
||
**PS: New property "fullPath" was included in file object to allow identify dropped files based on Folders, this allow users to create associated folder path.** | ||
|
||
```typescript | ||
private _getDropFiles = (files) => { | ||
for (var i = 0; i < files.length; i++) { | ||
console.log("Filename: " + files[i].name); | ||
console.log("Path: " + files[i].fullPath); | ||
} | ||
} | ||
``` | ||
|
||
## Implementation | ||
|
||
The `DragDropFiles` can be configured with the following properties: | ||
|
||
| Property | Type | Required | Description | | ||
| ---- | ---- | ---- | ---- | | ||
| dropEffect | string | no | Visual feedback given to user during a drag and drop operation (copy,move,link,none). Default value is `copy`. | | ||
| enable | boolean | no | Option allow control to be enable or disable. Default value is `true`| | ||
| labelMessage | string | no | Message displayed in drag drop preview. | | ||
| onDrop | any | no | Method that returns all Files[] from drag and drop file area. | | ||
| iconName | string | no | Icon Name from Office UI Fabric Icons. | | ||
|
||
|
||
|
||
![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/DragDropFiles) |
Oops, something went wrong.