🔹 Description
Description
...
🔹System Dependencies
Profile Image is component that gives additional information about a person. It has the user’s image, additional information like location, tenureship, and reports to. This component has also a variation where you can upload and crop your image according to your preference.
Image Cropper:
...
🔹System Dependencies
🔹 Installation
The package can be installed via npm empower-profile-image:
| Code Block |
|---|
npm install <package>i empower-profile-image --save |
🔹 Component Variation Title (ex. Alert with Dropdown)
Image Here
Configuration
| Code Block |
|---|
Insert Code Configuration Here |
🔹 Component Variation Title 2 (ex. Alert with Batch Message)
Configuration
| Code Block |
|---|
Insert Code Configuration Here |
...
Configuration
| Code Block |
|---|
import { ProfileImage, ProfileDetails, ImageCropper } from 'empower-profile-image';
..................
const paramImage = {
size: 'lg',
url:'',
placeholder: 'IN',
element1: 'Firstname Lastname',
element2: 'Reporting Job',
element3: 'Reporting Department',
}
const paramDetails = {
size: 'lg',
url:'',
placeholder: 'IN',
first_name: 'first_name',
last_name: 'last_name',
job: 'position title',
department: 'department name',
site: 'site',
employeNumber: 'employeNumber',
tenure: {
year: '2021',
month: 'Aug'
},
reportingTo: {
url:'',
placeholder: 'IN',
first_name: 'Reporting Firstname',
last_name: 'Reporting Lastname',
job: 'Reporting Job',
}
}
/**
*
* setUploadImage - method that gets the value of the Image cropper component
*/
const setUploadImage = (value) => {
console.log('VALUE', value)
}
......................
return (
<div className="App em-profile-image">
<h3>Profile Image Component</h3>
<ProfileImage config={paramImage} />
<h3>Profile Details Component</h3>
<ProfileDetails config={paramDetails} />
<h3>Image Cropper Component</h3>
<ImageCropper
uploadAction={(val) => setUploadImage(val)}
uploadResult={true}
/>
</div>
);
|
🔹 Properties for ProfileImage
...
Parameter | Data Type | Constraint | Description |
|---|---|---|---|
showsize | BooleanString | Required | Sets the visibility size of the image in the component. |
classurl | String | Optional | Custom class for the alert component |
….. | …. | … | …. |
🔹 References
Repository Link: insert repo link
Sets the link of the image should be used (example: CDN) | |||
placeholder | String | Required | Sets the Initial name of the employee if no URL or image provided in config. |
element1 | String | Required | Sets the name of employee. |
element2 | String | Required | Sets the job of employee. |
element3 | String | Required | Sets the department of employee. |
🔹 Properties for ProfileDetails
Parameter | Data Type | Constraint | Description |
|---|---|---|---|
size | String | Required | Sets the size of the image in the component. |
url | String | Optional | Sets the link of the image should be used (example: CDN) |
placeholder | String | Required | Sets the Initial name of the employee if no URL or image provided in config. |
first_name | String | Required | Sets the first name of employee. |
last_name | String | Required | Sets the last name of employee. |
job | String | Required | Sets the job or position of employee. |
department | String | Required | Sets the department of employee. |
site | String | Required | Sets the site of the employee. |
employeeNumber | String | Required | Sets the given employee number |
tenure | Object | Required | Sets the tenurity of employee. It should consist of:
|
reportingTo | Object | Required | Sets the details of manager/supervisor who employee reports to It should consist of:
|
🔹 References
Repository Link: https://bitbucket.org/empowerteams/empower-profile-image/src/master/
NPM Package: https://www.npmjs.com/package/empower-profile-image
Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git
...