Merge pull request #1820 from pnp/imagePicker

Image picker
pnp · Oct 18, 2024 · 443fac4 · 443fac4
2 parents 142f17e + c1a3c05
commit 443fac4
Show file tree

Hide file tree

Showing 53 changed files with 4,230 additions and 1,346 deletions.
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,15 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/aria": "off",
+    "no-inline-styles": "off",
+    "axe/text-alternatives": [
+      "default",
+      {
+        "frame-title": "off"
+      }
+    ]
+  }
+}
diff --git a/docs/documentation/docs/assets/ImagePicker00.png b/docs/documentation/docs/assets/ImagePicker00.png
diff --git a/docs/documentation/docs/assets/ImagePicker01.png b/docs/documentation/docs/assets/ImagePicker01.png
diff --git a/docs/documentation/docs/assets/ImagePicker02.png b/docs/documentation/docs/assets/ImagePicker02.png
diff --git a/docs/documentation/docs/assets/ImagePicker03.png b/docs/documentation/docs/assets/ImagePicker03.png
diff --git a/docs/documentation/docs/assets/ImagePicker04.png b/docs/documentation/docs/assets/ImagePicker04.png
diff --git a/docs/documentation/docs/assets/ImagePicker05.png b/docs/documentation/docs/assets/ImagePicker05.png
diff --git a/docs/documentation/docs/controls/ImagePicker.md b/docs/documentation/docs/controls/ImagePicker.md
@@ -0,0 +1,67 @@
+# HoverReactionsBar
+
+This control allows you to select or Upload Image from SharePoint, Ondrive or Stock Images.
+
+## ImagePicker
+
+![imagepicker](../assets/ImagePicker00.png)
+
+![imagepicker](../assets/ImagePicker01.png)
+
+![imagepicker](../assets/ImagePicker02.png)
+
+![imagepicker](../assets/ImagePicker03.png)
+
+![imagepicker](../assets/ImagePicker04.png)
+
+![imagepicker](../assets/ImagePicker05.png)
+
+## 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 { ImagePicker } from '@pnp/spfx-controls-react/lib/ImagePicker';
+```
+
+- Use the `ImagePicker` control in your code as follows:
+
+```Typescript
+
+  <ImagePicker
+  onFileSelected={handleFileSelected}
+  onDeleteFile={handleDeleteFile}
+  selectedFileUrl={selectedImageUrl}
+  context={appContext}
+ >
+```
+
+- With the `onFileSelect` property you can get the selected image:
+
+  ```typescript
+  const handleFileSelected = React.useCallback(async (file: IFilePickerResult) => {
+    console.log("file", file);
+  }, []);
+  ```
+
+- With the `onDelete` property you can execute a callback after delete the image:
+
+```typescript
+const onDeleteFile = React.useCallback(async () => {
+  console.log("onDeleteFile");
+}, []);
+```
+
+## Implementation
+
+The HoverReactionsBar control can be configured with the following properties:
+
+| Property        | Type                                              | Required | Description             |
+| --------------- | ------------------------------------------------- | -------- | ----------------------- |
+| onFileSelected  | onFileSelect: (file: IFilePickerResult ) => void; | yes      | OnSelectedFile Callback |
+| onDeleteFile    | onDeleteFile: () => void                          | no       | onDeleteFile CallBack   |
+| selectedFileUrl | string                                            | no       | Default Selected Image  |
+| context         | BaseComponentContext                              | yes      | Context                 |
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/ImagePicker)