martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

loading profile image to crop

Browse Source
This commit is contained in:
Roland Osborne 2022-03-23 15:10:46 -07:00
parent 3fdc53715a
commit 81450eedc7
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
net/web/src/User/Profile/Profile.jsx
View File

@ -68,7 +68,7 @@ export function Profile(props) {
<div class="select"> <div class="select">
<Button key="select" class="select" onClick={() => onSelectImage()}>Select Image</Button> <Button key="select" class="select" onClick={() => onSelectImage()}>Select Image</Button>
</div> </div>
<Button key="select" onClick={() => setLogoVisible(false)}>Cancel</Button> <Button key="back" onClick={() => setLogoVisible(false)}>Cancel</Button>
<Button key="save" type="primary" onClick={() => setLogoVisible(false)}>Save</Button> <Button key="save" type="primary" onClick={() => setLogoVisible(false)}>Save</Button>
</ModalFooter> </ModalFooter>
); );
@ -97,7 +97,7 @@ export function Profile(props) {
onOk={() => onProfileSave()} onCancel={() => setInfoVisible(false)}> onOk={() => onProfileSave()} onCancel={() => setInfoVisible(false)}>
<ProfileInfo state={state} actions={actions} /> <ProfileInfo state={state} actions={actions} />
</Modal> </Modal>
<Modal title="Profile Image" centered visible={logoVisible} footer={Footer}> <Modal title="Profile Image" centered visible={logoVisible} footer={Footer} onCancel={() => setLogoVisible(false)}>
<ProfileImage state={state} actions={actions} /> <ProfileImage state={state} actions={actions} />
</Modal> </Modal>
</ProfileWrapper> </ProfileWrapper>

6
net/web/src/User/Profile/ProfileImage/ProfileImage.jsx
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { useState, useCallback } from 'react';
import Cropper from 'react-easy-crop' import Cropper from 'react-easy-crop'
import { UserOutlined } from '@ant-design/icons'; import { UserOutlined } from '@ant-design/icons';
import { ProfileImageWrapper, ProfileDefaultImage } from './ProfileImage.styled'; import { ProfileImageWrapper, ProfileDefaultImage } from './ProfileImage.styled';
@ -8,9 +8,9 @@ export function ProfileImage({ state, actions }) {
const [crop, setCrop] = useState({ x: 0, y: 0 }) const [crop, setCrop] = useState({ x: 0, y: 0 })
const [zoom, setZoom] = useState(1) const [zoom, setZoom] = useState(1)
const onCropComplete = (croppedArea, croppedAreaPixels) => { const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {
console.log("crop complete"); console.log("crop complete");
}; });
const Logo = () => { const Logo = () => {
if (state.modalImage == null) { if (state.modalImage == null) {