-
Notifications
You must be signed in to change notification settings - Fork 51
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Created dialog component #140
Changes from 11 commits
f3d911f
9fdda71
6ba419d
d167f03
7db3a78
0c53e93
fbb3b45
3490137
5264c56
db869e5
9242d7b
6041b71
f51776f
e4706c1
f7564e7
82cf50e
e1fc71f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -107,6 +107,228 @@ export const UserIcon: React.FC<SvgProps> = (props) => ( | |
</Svg> | ||
); | ||
|
||
export const CopyIcon: React.FC<SvgProps> = (props) => ( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. CopyIcon has duplicate, there is already a CopyIcon in this file |
||
<Svg | ||
width={24} | ||
height={24} | ||
fill="none" | ||
{...props} | ||
> | ||
<Path | ||
stroke="#4B799F" | ||
strokeLinejoin="round" | ||
strokeWidth={1.5} | ||
d="m16.596 20.699-2.445.647c-2.263.6-3.395.899-4.281.408-.887-.49-1.182-1.58-1.773-3.758l-1.462-5.391c-.59-2.179-.886-3.268-.367-4.13.52-.863 1.651-1.163 3.914-1.762l4-1.06c2.264-.598 3.395-.898 4.282-.407.886.49 1.182 1.58 1.772 3.758l1.468 5.413c.251.926.377 1.39.239 1.825m-5.347 4.457c.752-.2.758-.202 1.343-.704l2.743-2.355c.749-.642 1.123-.963 1.261-1.398m-5.347 4.457s.588-4.593 1.904-5.199c1.493-.687 3.443.742 3.443.742" | ||
/> | ||
<Path | ||
stroke="#4B799F" | ||
strokeWidth={1.5} | ||
d="M17 5.001c-.064-1.073-.243-1.749-.752-2.233-.78-.742-2.03-.746-4.532-.754l-4.423-.013c-2.502-.007-3.753-.01-4.528.727-.775.737-.771 1.928-.764 4.31l.018 5.893c.008 2.381.011 3.572.79 4.314.78.742 2.031.746 4.533.753l.681.002" | ||
/> | ||
</Svg> | ||
); | ||
|
||
|
||
export const Exit: React.FC<SvgProps> = (props) => ( | ||
<Svg | ||
width={57} | ||
height={56} | ||
fill="none" | ||
{...props} | ||
> | ||
<Rect | ||
width={56} | ||
height={56} | ||
x={0.5} | ||
|
||
fill="currentColor" | ||
fillOpacity={0.1} | ||
rx={28} | ||
/> | ||
<Path | ||
fill="currentColor" | ||
fillRule="evenodd" | ||
d="M29.35 20c-4.811 0-8.6 3.642-8.6 8 0 4.358 3.789 8 8.6 8 .43 0 .852-.03 1.264-.086a1 1 0 0 1 .272 1.982c-.502.069-1.015.104-1.536.104-5.792 0-10.6-4.417-10.6-10s4.808-10 10.6-10c.521 0 1.034.035 1.536.104a1 1 0 1 1-.272 1.982A9.305 9.305 0 0 0 29.35 20Z" | ||
clipRule="evenodd" | ||
/> | ||
<Path | ||
fill="#EC796B" | ||
d="M27.25 29.006a1 1 0 0 1 0-2h6.5v-.594c0-.176 0-.392.022-.568v-.004c.016-.126.088-.702.653-.976.567-.275 1.067.027 1.176.092l.468.34c.376.294.89.7 1.281 1.08.195.19.397.407.556.638.14.205.344.555.344.986 0 .43-.203.78-.344.986-.16.231-.36.448-.556.638-.39.38-.905.786-1.28 1.08l-.47.34c-.108.065-.608.367-1.175.092-.565-.274-.637-.85-.653-.976v-.004c-.022-.176-.022-.392-.022-.568v-.582h-6.5Z" | ||
/> | ||
</Svg> | ||
); | ||
|
||
export const Gallery: React.FC<SvgProps> = (props) => ( | ||
<Svg | ||
width={24} | ||
height={24} | ||
fill="none" | ||
{...props} | ||
> | ||
<Path | ||
stroke="#4B799F" | ||
strokeWidth={1.5} | ||
d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109C18.717 21.5 16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391C2.5 18.717 2.5 16.479 2.5 12Z" | ||
/> | ||
<Path | ||
stroke="#4B799F" | ||
strokeWidth={1.5} | ||
d="M16.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" | ||
/> | ||
<Path | ||
stroke="#4B799F" | ||
strokeLinejoin="round" | ||
strokeWidth={1.5} | ||
d="M16 22c-.62-2.225-2.066-4.218-4.123-5.666-2.22-1.561-5.005-2.387-7.861-2.331-.34-.001-.678.01-1.016.032" | ||
/> | ||
<Path | ||
stroke="#4B799F" | ||
strokeLinejoin="round" | ||
strokeWidth={1.5} | ||
d="M13 18c1.701-1.327 3.535-2.007 5.386-2a7.792 7.792 0 0 1 3.114.662" | ||
/> | ||
</Svg> | ||
); | ||
|
||
|
||
export const GifIcon: React.FC<SvgProps> = (props) => ( | ||
<Svg | ||
|
||
width={24} | ||
height={24} | ||
fill="none" | ||
{...props} | ||
> | ||
<Path | ||
stroke="#4B799F" | ||
strokeLinecap="round" | ||
strokeLinejoin="round" | ||
strokeWidth={1.5} | ||
d="M14.86 22h-4.312c-3.291 0-4.937 0-6.08-.798a4.156 4.156 0 0 1-.863-.805c-.855-1.066-.855-2.6-.855-5.67v-2.545c0-2.963 0-4.445.473-5.628.761-1.903 2.37-3.403 4.41-4.113C8.9 2 10.49 2 13.667 2c1.816 0 2.723 0 3.448.252 1.166.406 2.085 1.263 2.52 2.35.27.676.27 1.523.27 3.216V10" | ||
/> | ||
<Path | ||
stroke="#4B799F" | ||
strokeLinecap="round" | ||
strokeLinejoin="round" | ||
strokeWidth={1.5} | ||
d="M2.75 12c0-1.84 1.506-3.333 3.364-3.333.672 0 1.464.116 2.117-.057a1.674 1.674 0 0 0 1.19-1.179c.174-.647.057-1.432.057-2.098C9.478 3.493 10.984 2 12.84 2M12.842 18h2.523m-4.949-4.15c-.126-.8-.281-.801-1.61-.85h-1.01c-.557 0-1.009.448-1.009 1v3c0 .552.452 1 1.01 1h1.816c.39 0 .803-.313.803-.7v-1.1c0-.11-.113-.304-.224-.304H9.068M12.842 13h1.261m0 0h1.262m-1.262 0v4.875M21.251 13h-2.523c-.557 0-1.009.448-1.009 1v1.5m0 0V18m0-2.5h2.523" | ||
/> | ||
</Svg> | ||
); | ||
|
||
|
||
export const Line: React.FC<SvgProps> = (props) => ( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Icon names should end in Icon. |
||
<Svg | ||
width={37} | ||
height={5} | ||
fill="none" | ||
{...props} | ||
> | ||
<Rect | ||
width={36} | ||
height={5} | ||
x={0.5} | ||
fill="currentColor" | ||
fillOpacity={0.3} | ||
rx={2.5} | ||
/> | ||
</Svg> | ||
); | ||
|
||
export const ProfileIcon: React.FC<SvgProps> = (props)=> ( | ||
<Svg | ||
width={32} | ||
height={32} | ||
fill="none" | ||
{...props} | ||
> | ||
<Path | ||
stroke="#1E2F3D" | ||
strokeLinejoin="round" | ||
strokeWidth={2} | ||
d="M16 29.333c7.364 0 13.333-5.97 13.333-13.333 0-7.364-5.97-13.333-13.333-13.333C8.636 2.667 2.667 8.637 2.667 16c0 7.364 5.97 13.333 13.333 13.333Z" | ||
/> | ||
<Path | ||
stroke="#1E2F3D" | ||
strokeLinejoin="round" | ||
strokeWidth={2} | ||
d="M10 22.667c3.109-3.257 8.858-3.41 12 0m-2.673-10A3.336 3.336 0 0 1 15.989 16a3.336 3.336 0 0 1-3.338-3.333 3.336 3.336 0 0 1 3.338-3.334 3.336 3.336 0 0 1 3.338 3.334Z" | ||
/> | ||
</Svg> | ||
); | ||
|
||
export const SendButton: React.FC<SvgProps> = (props)=> ( | ||
<Svg | ||
width={56} | ||
height={56} | ||
fill="none" | ||
{...props} | ||
> | ||
<Path | ||
fill="currentColor" | ||
d="M22 3.464a12 12 0 0 1 12 0l12.249 7.072a12 12 0 0 1 6 10.392v14.144a12 12 0 0 1-6 10.392L34 52.536a12 12 0 0 1-12 0L9.751 45.464a12 12 0 0 1-6-10.392V20.928a12 12 0 0 1 6-10.392L22 3.464Z" | ||
/> | ||
<Path | ||
fill="#fff" | ||
d="M37.597 18.543c-.467-.504-1.2-.692-1.9-.76-.736-.07-1.617-.024-2.566.1-1.902.25-4.2.828-6.409 1.539-2.21.711-4.363 1.567-5.976 2.386-.802.409-1.499.821-2.005 1.218-.252.197-.482.41-.655.636-.165.216-.338.524-.336.894.006.972.668 1.659 1.373 2.12.72.47 1.657.825 2.589 1.103.941.281 1.931.499 2.783.675l.304.063c.514.106.771.16 1.013.087.242-.072.428-.258.8-.63l3.68-3.681a1 1 0 0 1 1.415 1.414l-3.433 3.433c-.379.379-.568.568-.64.814-.072.246-.014.507.102 1.03.448 2.024.838 3.697 1.226 4.823.227.657.483 1.227.806 1.646.337.438.796.77 1.4.796.376.017.69-.155.904-.315.225-.167.438-.393.635-.639.396-.495.812-1.18 1.226-1.97.832-1.59 1.713-3.722 2.459-5.915.745-2.193 1.366-4.48 1.665-6.38.149-.948.223-1.828.182-2.565-.04-.7-.188-1.434-.642-1.922Z" | ||
/> | ||
</Svg> | ||
); | ||
|
||
|
||
export const Update: React.FC<SvgProps> = (props) => ( | ||
<Svg | ||
width={57} | ||
height={56} | ||
fill="none" | ||
{...props} | ||
> | ||
<Rect | ||
width={56} | ||
height={56} | ||
x={0.5} | ||
fill="#14142C" | ||
fillOpacity={0.1} | ||
rx={28} | ||
/> | ||
<Path | ||
fill="currentColor" | ||
fillRule="evenodd" | ||
d="M33.5 17.25a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5Zm2.25 4.957a.75.75 0 0 0-.5-1.414c-.483.171-.93.49-1.309.823-.386.339-.745.73-1.046 1.091-.147.175-.282.346-.402.505a2.047 2.047 0 0 0-.319-.248 1.019 1.019 0 0 0-.674-.214.75.75 0 0 0-.116 1.491.249.249 0 0 1 .012.008c.056.037.228.176.433.587a.75.75 0 0 0 1.304.066c.163-.23.643-.91.913-1.234.272-.326.576-.654.884-.924.316-.277.597-.458.82-.537Z" | ||
clipRule="evenodd" | ||
/> | ||
<Path | ||
fill="currentColor" | ||
d="M26.248 17.25h-.055c-1.541 0-2.774 0-3.757.103-1.009.105-1.87.328-2.615.855-.39.276-.739.605-1.034.977-.57.72-.813 1.557-.927 2.53-.11.938-.11 2.11-.11 3.559v2.583c0 1.419 0 2.531.06 3.432.06.917.184 1.681.465 2.393.844 2.136 2.617 3.8 4.837 4.581 1.383.488 3.07.487 5.909.487h.44c1.555 0 2.587 0 3.446-.302 1.376-.485 2.485-1.519 3.014-2.858.183-.465.258-.95.294-1.495.035-.528.035-1.176.035-1.975v-.7a.976.976 0 0 0-.974-.977.976.976 0 0 0-.973.977v.667c0 .84 0 1.423-.03 1.88-.03.447-.085.706-.163.903-.31.785-.976 1.427-1.848 1.734-.504.177-1.17.191-3.005.191-.604 0-1.141 0-1.622-.004-.4-.002-.806-.114-1.07-.414a2.573 2.573 0 0 1-.648-1.71l.037-1.04c.008-.38-.005-.824-.12-1.253a2.417 2.417 0 0 0-1.708-1.708c-.428-.115-.872-.127-1.252-.12l-1.04.037a2.574 2.574 0 0 1-1.732-.666c-.295-.266-.402-.67-.404-1.068V25.335c0-1.524 0-2.581.096-3.39.092-.788.262-1.22.517-1.543.178-.224.39-.425.632-.596.358-.253.841-.42 1.695-.51.87-.09 2.001-.091 3.61-.091a.975.975 0 0 0 .973-.978.975.975 0 0 0-.973-.977Z" | ||
/> | ||
</Svg> | ||
) | ||
|
||
|
||
export const Warning: React.FC<SvgProps> = (props) => ( | ||
<Svg | ||
width={57} | ||
height={56} | ||
fill="none" | ||
{...props} | ||
> | ||
<Rect | ||
width={56} | ||
height={56} | ||
x={0.5} | ||
fill="#EC796B" | ||
fillOpacity={0.1} | ||
rx={28} | ||
/> | ||
<Path | ||
fill="#EC796B" | ||
fillRule="evenodd" | ||
d="M26.862 18.015a5.195 5.195 0 0 1 3.276 0c1.06.352 1.892 1.186 2.729 2.359.833 1.169 1.754 2.798 2.94 4.899l.047.082c1.188 2.1 2.108 3.73 2.682 5.052.577 1.327.864 2.474.635 3.575a5.408 5.408 0 0 1-1.628 2.88c-.827.76-1.952 1.08-3.37 1.235-1.409.153-3.252.153-5.624.153h-.098c-2.372 0-4.216 0-5.625-.153-1.417-.154-2.542-.475-3.369-1.235a5.407 5.407 0 0 1-1.628-2.88c-.23-1.101.058-2.248.635-3.575.574-1.322 1.494-2.951 2.682-5.052l.046-.082c1.187-2.1 2.108-3.73 2.942-4.9.836-1.172 1.668-2.006 2.728-2.358ZM27.5 33c0-.552.446-1 .995-1h.01c.55 0 .995.448.995 1s-.446 1-.995 1h-.01a.998.998 0 0 1-.995-1Zm0-4a1 1 0 1 0 2 0v-4a1 1 0 1 0-2 0v4Z" | ||
clipRule="evenodd" | ||
/> | ||
</Svg> | ||
) | ||
======= | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There is a git conflict marker left |
||
export const CopyIcon: React.FC<SvgProps> = (props) => { | ||
return ( | ||
<Svg viewBox="0 0 24 24" fill="none" {...props}> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
import React from 'react'; | ||
import {Portal} from 'react-native-portalize'; | ||
|
||
import { Line } from '../../assets/icons'; | ||
import { | ||
ButtonText, | ||
Container, | ||
Content, | ||
IconContainer, | ||
ModalContainer, | ||
Overlay, | ||
StyledButton, | ||
Title, | ||
} from './styled'; | ||
|
||
interface Button { | ||
label: string; | ||
type: 'dangerous' | 'primary' | 'secondary'; | ||
onPress: () => void; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No need to create an interface for button There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The component is a Touchableopacity and not a button There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm addressing the export type CustomModalProps = {
name: string;
buttons: {
label: string;
type: 'dangerous' | 'primary' | 'secondary';
onPress: () => void;
}[];
icon: React.ReactNode;
description: string;
visible: boolean;
} |
||
} | ||
interface CustomModalProps { | ||
name: string; | ||
buttons: Button[]; | ||
icon: React.ReactNode; | ||
description: string; | ||
visible: boolean; | ||
} | ||
const Modal: React.FC<CustomModalProps> = ({name, buttons, icon, description, visible}) => { | ||
if (!visible) return null; | ||
return ( | ||
<Portal> | ||
<Overlay> | ||
<ModalContainer> | ||
<Container> | ||
<Line color='#3C3C43'/> | ||
<IconContainer>{icon}</IconContainer> | ||
<Title>{name}</Title> | ||
<Content>{description}</Content> | ||
</Container> | ||
<Container> | ||
{buttons.map((button, index) => ( | ||
<StyledButton key={index} type={button.type} onPress={button.onPress}> | ||
<ButtonText type={button.type}>{button.label}</ButtonText> | ||
</StyledButton> | ||
josephchimebuka marked this conversation as resolved.
Show resolved
Hide resolved
|
||
))} | ||
</Container> | ||
</ModalContainer> | ||
</Overlay> | ||
</Portal> | ||
); | ||
}; | ||
|
||
export default Modal; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Where does this image used?