Skip to content

Commit 0d23708

Browse files
remiilekunremiilekun
committed
feat: modal to crop images
1 parent 6e9d7b0 commit 0d23708

File tree

13 files changed

+169
-53
lines changed

13 files changed

+169
-53
lines changed

‎README.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -254,13 +254,18 @@ This sets the color of any text in the component
254254

255255
This sets the color of any buttons in the component
256256

257+
- modalColor
258+
259+
This sets the background color of the modal component
260+
257261
```js
258262
<MultiImageInput
259263
theme={{
260264
background: '#ffffff',
261265
outlineColor: '#111111',
262266
textColor: 'rgba(255,255,255,0.6)',
263-
buttonColor: '#ff0e1f'
267+
buttonColor: '#ff0e1f',
268+
modalColor: '#ffffff
264269
}}
265270
/>
266271
```

‎src/App.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react';
2-
// import MultiImageInput from './lib/multi-image-input';
3-
import MultiImageInput from 'react-multiple-image-input';
2+
import MultiImageInput from './lib/multi-image-input';
3+
// import MultiImageInput from 'react-multiple-image-input';
44

55
function App() {
66
const crop = {
@@ -12,7 +12,7 @@ function App() {
1212
const [images, setImages] = useState({});
1313

1414
return (
15-
<div className="App" style={{ maxWidth: '36rem' }}>
15+
<div className="App" style={{ maxWidth: '500px' }}>
1616
<header className="App-header">
1717
<MultiImageInput
1818
images={images}

‎src/__tests__/__snapshots__/MultiImageInput.test.js.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ exports[`renders correctly 1`] = `
44
<body>
55
<div>
66
<div
7-
class="sc-AxirZ sc-AxiKw cQXkMQ"
7+
class="sc-AxirZ sc-AxiKw daypqs"
88
>
99
<div
10-
class="sc-AxirZ sc-AxhCb ibDyVp"
10+
class="sc-AxirZ sc-AxhCb eJEChV"
1111
>
1212
<div
1313
role="button"
@@ -32,7 +32,7 @@ exports[`renders correctly 1`] = `
3232
/>
3333
</svg>
3434
<span
35-
class="sc-Axmtr ipInAw"
35+
class="sc-Axmtr ljNGXc"
3636
color="outlineColor"
3737
font-size="small"
3838
font-weight="normal"

‎src/lib/components/Button.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import styled, { css } from 'styled-components';
33
export const Button = styled.button`
44
-webkit-appearance: none;
55
background-color: ${props => props.theme.colors.buttonColor};
6-
color: ${props => props.theme.colors.outlineColor};
6+
border-radius: 5px;
77
border: 0;
8+
color: ${props => props.theme.colors.outlineColor};
89
cursor: pointer;
910
display: inline-block;
11+
font-family: inherit;
1012
letter-spacing: 1px;
1113
line-height: 1;
1214
outline: none;
@@ -30,9 +32,11 @@ export const Button = styled.button`
3032

3133
export const DeleteImageButton = styled(Button)`
3234
align-items: center;
35+
background: none;
3336
border: none;
3437
display: flex;
3538
flex-shrink: 0;
39+
font-family: inherit;
3640
height: 1.5rem;
3741
justify-content: center;
3842
padding-right: 0.5px;
@@ -41,7 +45,7 @@ export const DeleteImageButton = styled(Button)`
4145
top: 0.5rem;
4246
width: 1.5rem;
4347
z-index: 10;
44-
background: none;
48+
4549
&:before,
4650
&:after {
4751
background: #ff0e1f;

‎src/lib/components/Image.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import styled from 'styled-components';
22

33
const Image = styled.img`
4-
width: 100%;
54
display: inline-block;
5+
height: auto;
66
opacity: 0.4;
7+
width: 100%;
78
`;
89

910
export default Image;

‎src/lib/components/ImageBox.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ const ImageBox = styled(FlexBox)`
77
flex-direction: row;
88
flex-wrap: wrap;
99
justify-content: flex-start;
10-
padding: 1.5rem 2rem;
1110
margin-bottom: 1rem;
11+
padding: 1.5rem 2rem;
1212
`;
1313

1414
export default ImageBox;

‎src/lib/components/ImageInput.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import FlexBox from './FlexBox';
33

44
const ImageInput = styled(FlexBox)`
55
flex-direction: column;
6-
width: auto;
7-
max-width: 9rem;
86
justify-content: center;
97
margin-right: 1rem;
8+
max-width: 9rem;
109
position: relative;
10+
width: auto;
1111
`;
1212

1313
export default ImageInput;

‎src/lib/components/ImageOptions.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import styled from 'styled-components';
22

33
export const ImageOptionsWrapper = styled('div')`
44
align-items: center;
5+
cursor: pointer;
56
display: flex;
67
height: 2rem;
78
justify-content: space-between;
@@ -10,6 +11,4 @@ export const ImageOptionsWrapper = styled('div')`
1011
right: 0.5rem;
1112
top: 0.2rem;
1213
width: 3rem;
13-
z-index: 10;
14-
cursor: pointer;
1514
`;

‎src/lib/components/Modal.js‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import React from 'react';
2+
import styled, { css } from 'styled-components';
3+
import PropTypes from 'prop-types';
4+
import Text from './Text';
5+
6+
const Content = styled.div`
7+
background-color: ${({ theme }) => theme.colors.modalColor};
8+
border-radius: 5px;
9+
max-width: 360px;
10+
transition: transform 0.3s ease-out;
11+
z-index: 9999;
12+
`;
13+
14+
const Overlay = styled.div`
15+
background-color: rgba(0, 0, 0, 0.8);
16+
bottom: 0;
17+
dsplay: flex;
18+
left: 0;
19+
opacity: 0;
20+
position: fixed;
21+
right: 0;
22+
top: 0;
23+
transition: all 0.3s;
24+
`;
25+
26+
const Wrapper = styled.div`
27+
align-items: center;
28+
bottom: 0;
29+
dsplay: flex;
30+
justify-content: center;
31+
left: 0;
32+
opacity: 0;
33+
pointer-events: none;
34+
position: fixed;
35+
right: 0;
36+
top: 0;
37+
transition: all 0.3s;
38+
visibility: hidden;
39+
z-index: 9;
40+
41+
${Content} {
42+
transform: translate(0, -50px);
43+
}
44+
45+
${({ isOpen }) =>
46+
isOpen &&
47+
css`
48+
display: flex;
49+
opacity: 1;
50+
pointer-events: auto;
51+
visibility: visible;
52+
53+
${Content} {
54+
transform: translate(0, 0);
55+
}
56+
57+
${Overlay} {
58+
opacity: 1;
59+
}
60+
`}
61+
`;
62+
63+
const HeaderWrapper = styled.div`
64+
align-items: center;
65+
border-bottom: 1px solid ${({ theme }) => theme.colors.outlineColor};
66+
display: flex;
67+
justify-content: center;
68+
padding: 20px;
69+
`;
70+
71+
const Body = styled.div`
72+
padding: 15px;
73+
position: relative;
74+
`;
75+
76+
const Footer = styled.div`
77+
display: flex;
78+
justify-content: center;
79+
padding: 0 15px 15px 15px;
80+
`;
81+
82+
const Header = ({ children, ...props }) => {
83+
return (
84+
<HeaderWrapper {...props}>
85+
<Text align="center">{children}</Text>
86+
</HeaderWrapper>
87+
);
88+
};
89+
90+
const Modal = ({ children, isOpen, toggle }) => (
91+
<Wrapper isOpen={isOpen}>
92+
<Overlay onClick={toggle} />
93+
<Content>{children}</Content>
94+
</Wrapper>
95+
);
96+
97+
Modal.Header = Header;
98+
Modal.Body = Body;
99+
Modal.Footer = Footer;
100+
101+
Modal.propTypes = {
102+
children: PropTypes.node.isRequired,
103+
isOpen: PropTypes.bool.isRequired,
104+
toggle: PropTypes.func.isRequired
105+
};
106+
107+
export default Modal;

‎src/lib/components/Text.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ const Text = styled.span`
66
color: ${props => props.theme.colors[props.color]};
77
}
88
display: inline-block;
9+
font-family: inherit;
910
font-size: ${props => props.theme.font.size[props.fontSize]};
1011
font-weight: ${props => props.theme.font.weight[props.fontWeight]};
1112
line-height: ${props =>
@@ -14,6 +15,7 @@ const Text = styled.span`
1415
`;
1516

1617
Text.defaultProps = {
18+
color: 'textColor',
1719
fontWeight: 'normal'
1820
};
1921

0 commit comments

Comments
 (0)