Logo
Chakra-UIReactJsNext.JS
Head

@codecraftkit

Documentation

Profile Image

Description#

The Profile Image is used to Handle the Avatar, like chooses and avatar or upload one

Import#

it can be imported from the core.

Code Example

import { ProfileImage  } from "@codecraftkit/core";

or alone.

Code Example

import ProfileImage  from "@codecraftkit/profile-image";

Usage#

Dummy Data#

Code Example

const avatarsImages = [
  {
    category: 'Avatars',
    items: [{
      url: '/images/img1.jpg',
      fileName: 'img1'
    }, {
      url: '/images/img2.jpg',
      fileName: 'img2'
    }, {
      url: '/images/img3.jpg',
      fileName: 'img3'
    }, {
      url: '/images/img4.jpg',
      fileName: 'img4'
    }, {
      url: '/images/img5.jpg',
      fileName: 'img5'
    }, {
      url: '/images/img6.jpg',
      fileName: 'img6'
    }, {
      url: '/images/img7.jpg',
      fileName: 'img7'
    }]
  }
]

Simple Usage#

We use a state to save the image submitted, and the show it in the avatar

Code Example

function MyApp() {
  const [profileImage, setProfileImage] = useState("");


  return <ProfileImage
    image={profileImage}
    getImage={setProfileImage}
    avatarsData={avatarsImages}
    closeModalOnSubmit
  />
}

Customizing Submit#

We use the props chooseAvatarAction and uploadImageAction to send submit functions to their respective tab

note: in the first parameter it receive the image or file uploaded, and as second parameter it receive an object with useful tools

Code Example

function MyApp() {
const [profileImage, setProfileImage] = useState("");


const chooseAvatarAction = async (img, {setLoading, onCloseModal, callback, item}) => {
  onCloseModal()
  alert("Image Set Succesffuly " + img)
}


const uploadImageAction = async (files, {onCloseModal, callback, item, setLoading}) => {
  onCloseModal()
  alert("File uploaded Succesffuly " + files)
}


return <ProfileImage
  image={profileImage}
  getImage={setProfileImage}
  avatarsData={avatarsImages}
  chooseAvatarAction={chooseAvatarAction}
  uploadImageAction={uploadImageAction}
  noShadow
  isRounded
/>
}

Just one tab#

We use the props type toggle between tabs or just a single component by its name, they could be upload and chooseAvatar

Code Example

function MyApp() {
const [profileImage, setProfileImage] = useState("");


const uploadImageAction = async (files, {onCloseModal, callback, item, setLoading}) => {
  onCloseModal()
  alert("File uploaded Succesffuly " + files)
}


return <ProfileImage
  type="upload"
  image={profileImage}
  getImage={setProfileImage}
  uploadImageAction={uploadImageAction}
  noShadow
  isRounded
/>
}

Add More Tabs#

How to add more custom tabs

Code Example

function MyApp() {
const [profileImage, setProfileImage] = useState("");


const chooseAvatarAction = async (img, {setLoading, onCloseModal, callback, item}) => {
  onCloseModal()
  alert("Image Set Succesffuly " + img)
}


const uploadImageAction = async (files, {onCloseModal, callback, item, setLoading}) => {
  onCloseModal()
  alert("File uploaded Succesffuly " + files)
}


 const customTabs = [{
    name:'customTab',
    label: 'Custom Tab',
    isEnabled: true, // by default is enabled
    content: <Animation
      autoplay
      loop
      name="chicken-70"
      height={200}
      width={200}
    />
  },
]


return <ProfileImage
  image={profileImage}
  getImage={setProfileImage}
  avatarsData={avatarsImages}
  chooseAvatarAction={chooseAvatarAction}
  uploadImageAction={uploadImageAction}
  addTabs={customTabs}
  noShadow
  isRounded
/>
}

Customizing Base#

We can pass children, to change the way the base is rendered

The children are rendered using the render props method that allows to pass props from the parent to its children through a function

This render props pass five arguments AvatarImage, item, onOpen, isOpen, onClose

Code Example

function MyApp() {
const [profileImage, setProfileImage] = useState("");
const user = {name:"Juan", username:"ElJuan"}
const isLoading = false


return <ProfileImage
  item={user}
  image={profileImage}
  getImage={setProfileImage}
  avatarsData={avatarsImages}
  isLoading={isLoading}
  closeModalOnSubmit
  isRounded
>
{({ AvatarImage, item }) =>
  <Grid justifyContent='center'>
    <Grid templateColumns="auto 1fr" gap={4} alignItems="center" justifyContent="center">
      <AvatarImage />
      <Grid templateRows="repeat(2, 30px)">
        <Skeleton w="150px" h="18px" isLoaded={!isLoading}>
          <Text
            fontSize={['sm', 'xl']}
            w="300px"
            textAlign="left"
            fontWeight="600"
            mb="0"
          >
            {item.name}
          </Text>
        </Skeleton>
        <Skeleton w="120px" h="16px" isLoaded={!isLoading}>
          <Text fontSize={['sm', 'md']} w="300px" textAlign="left">
            @{item.username}
          </Text>
        </Skeleton>
      </Grid>
    </Grid>
  </Grid>
}
</ProfileImage>
}

Props#

name

type

required

default

description

isDisabled

Boolean

no

false

Disable modal

type

uploadchooseAvatardefault

no

default

Choose which components are displayed or if they are displayed in tabs

addTabs

array>objects

no

Add more tabs

imageTitle

String

no

Profile picture

Title of the Profile Image

item

object

no

The object which contains the information about the profile

children

function({AvatarImage, item, onOpen, isOpen, onClose})=>React<node>

no

Customize how the profile image is display, it uses render props method and received some parameters

nameField

String

no

name

Specify the field where the profile name comes

urlField

String

no

img

Specify the field where the profile image comes

image

String

no

The profile Image, this one would take priority over the item image

isRounded

Boolean

no

false

Round the profile image and its crop

noShadow

Boolean

no

false

Remove the image shadow

noBorder

Boolean

no

false

Remove Profile Border

aspect

Object

no

Crop options

modalTitle

String

no

New

Modal Title.

modalSize

pxxssmmdlgxl

no

800px

Specifies whether the modal is closed when the ESC key is pressed.

modalBoxSize

px

no

specify modal boxSize

closeModalOnSubmit

Boolean

no

false

Close Modal when the users clicks submit

getImage

Function

no

Called when a new image is set, is called before the image is uploaded

uploadImageAction

Function

no

Called when a new image is set, the image is doesn't upload

chooseAvatarAction

Function

no

Called when a new image is chosen

callback

Function

no

Function called when the image has been uploaded

avatarImageGroupKey

String

no

The key from where the images are being called, internally calls useQuery to get the images

avatarsData

array>objects

no

List of images to bee shown in the choose avatar tab

loading

Boolean

no

Optional loading to Choose Avatar tab

getUserPermissionToUploadImage

Boolean

no

false

Send props to Chakra Modal

checkForAgencyToChooseAvatar

Boolean

no

false

Check if the user have an agency before choose an image

isUploadImageEnabled

Boolean

no

true

Hide the upload Tab

isChooseAvatarEnabled

Boolean

no

true

Hide choose image tab