Skip to content

Commit 09e14e4

Browse files
ssi02014ssi02014
authored
Merge pull request #36 from ssi02014/dev
Dev
2 parents ca41e43 + bb4c7bb commit 09e14e4

File tree

13 files changed

+68
-87
lines changed

13 files changed

+68
-87
lines changed

‎README.md

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@
4242

4343
<br />
4444

45-
<h3 align="center">Storybook Github Page</h3>
45+
<h3 align="center">Storybook Demo Page</h3>
46+
<h5 align="center">Click on the icon.</h5>
4647
<p align="center">
4748
<a href="https://ssi02014.github.io/react-thumbnail-generator/?path=/story/components-thumbnailgenerator--default">
4849
<img src="https://user-images.githubusercontent.com/64779472/220122236-c90ae4a5-8271-41df-b150-230b97991d41.png" width="120">
@@ -76,7 +77,7 @@
7677
- Dragging and dropping text on the canvas
7778
- Adding custom web font families
7879
- Selecting the modal button and its location
79-
- Choosing the image type (png, jpg, webp)
80+
- Choosing the image type (png, jpg, webp, svg)
8081
- Supporting TypeScript and Next
8182

8283

@@ -146,22 +147,24 @@ const App = () => {
146147
// If you do not include this option, the default icon will be used.
147148

148149
iconSize="medium"
149-
// Please select the size of the default button icon.
150-
// If no size is specified, the default size (medium) will be applied.
150+
// Through this property, you can specify the size of the button icon.
151151
// However, if you are inserting a custom button icon, this option is meaningless.
152152

153153
iconPosition={[0, 20, 20, 0]}
154-
// Please select the location of the button to open the Thumbnail Model.
155-
// Sequence: [top, right, bottom, left]
154+
// Through this property, you can specify the position of the button icon.
155+
// [top, right, bottom, left]
156156

157157
modalPosition='right'
158-
// Please select the location to open the ThumbnailModal.
158+
// Through this property, you can specify the position of the thumbnail generator.
159159

160160
additionalFontFamily={['Noto Sans', ...]}
161161
// You can add the font of your choice to your project, but that font must already applied to your project.
162162

163163
isFullWidth={true}
164-
// Setting this property to true will make the thumbnail generator modal full width.
164+
// Setting this property to true will make the thumbnail generator full-width.
165+
166+
isDefaultOpen={false}
167+
// Setting this property to true will open the thumbnail generator by default.
165168
/>
166169
</div>
167170
)
@@ -301,9 +304,15 @@ const App = () => {
301304
- **Optional**
302305
- Default: `false`
303306
- Type: `boolean`
307+
- isDefaultOpen
308+
- **Optional**
309+
- Default: `false`
310+
- Type: `boolean`
304311

305312
<br />
306313

307314
## Reference
308315
- https://github.com/wormwlrm/kwakcheolyong
309-
- https://github.com/banner-maker/banner-makers
316+
- https://github.com/banner-maker/banner-makers
317+
318+
<br />

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-thumbnail-generator",
3-
"version": "2.8.0",
3+
"version": "2.9.0",
44
"description": "react-thumbnail-generator",
55
"main": "dist/index.js",
66
"module": "dist/index.js",

‎src/components/Canvas/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,11 +122,13 @@ const Canvas = React.forwardRef(({ canvasState }: CanvasProps, ref: any) => {
122122
const ctx = canvas.getContext('2d');
123123

124124
if (!ctx) return;
125+
125126
if (selectedImage) {
126127
if (isBlur) ctx.filter = 'blur(5px)';
127128
ctx.drawImage(selectedImage, 0, 0);
128129
return;
129130
}
131+
130132
ctx.fillStyle = bgColor.hex;
131133
ctx.fillRect(0, 0, canvas.width, canvas.height);
132134
};

‎src/components/Inputs/RangeInput/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ const RangeInput = ({
3636
backgroundSize={backgroundSize}
3737
/>
3838
</S.InputLabelRangeContainer>
39-
<TextInput width={60} name={name} value={value} onChange={onChange} />
39+
<TextInput width={50} name={name} value={value} onChange={onChange} />
4040
</S.RangeInputWrapper>
4141
);
4242
};

‎src/components/Inputs/TextInput/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const TextInput = ({
1616
}: TextInputProps) => {
1717
return (
1818
<S.TextInputWrapper width={width}>
19-
<label htmlFor={name}>{label}</label>
19+
{label && <label htmlFor={name}>{label}</label>}
2020
<input
2121
type="text"
2222
name={name}

‎src/components/Layout/Header/index.tsx

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,11 @@ interface HeaderProps {
99
}
1010

1111
const Header = ({ onToggle }: HeaderProps) => {
12-
const LimitWidthSize = window.innerWidth;
13-
1412
return (
1513
<S.HeaderWrapper>
16-
<div>
17-
<a
18-
href="https://github.com/ssi02014/react-thumbnail-generator"
19-
target="_blank"
20-
rel="noreferrer">
21-
Thumbnail Generator
22-
</a>
23-
<IconButton onClick={onToggle} isBorder={false}>
24-
<Icon src={close} width={20} height={20} />
25-
</IconButton>
26-
</div>
27-
<S.LimitSizeText>
28-
Limit Width: <span>{`${LimitWidthSize}px`}</span>
29-
</S.LimitSizeText>
14+
<IconButton onClick={onToggle} isBorder={false}>
15+
<Icon src={close} width={20} height={20} />
16+
</IconButton>
3017
</S.HeaderWrapper>
3118
);
3219
};

‎src/components/Layout/styled.tsx

Lines changed: 5 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,12 @@ import styled from 'styled-components';
33

44
export const HeaderWrapper = styled.div`
55
display: flex;
6+
justify-content: end;
7+
width: 100%;
68
position: sticky;
79
top: 0;
8-
flex-direction: column;
9-
padding: 10px;
10-
padding-bottom: 0;
11-
background-color: #fff;
12-
13-
& > div:first-child {
14-
justify-content: space-between;
15-
align-items: center;
16-
display: flex;
17-
}
18-
19-
a {
20-
color: #111111;
21-
padding: 0;
22-
margin: 0;
23-
font-size: 0.875rem;
24-
font-weight: bold;
25-
text-decoration: none;
26-
27-
&:hover {
28-
color: #3264b5;
29-
}
30-
}
10+
padding: 8px;
11+
border-bottom: 1px solid rgb(243, 243, 243);
3112
3213
button {
3314
cursor: pointer;
@@ -38,16 +19,6 @@ export const HeaderWrapper = styled.div`
3819
}
3920
`;
4021

41-
export const LimitSizeText = styled.div`
42-
font-size: 0.85rem;
43-
margin-top: 5px;
44-
text-align: center;
45-
46-
span {
47-
font-weight: bold;
48-
}
49-
`;
50-
5122
export const BodyWrapper = styled.section<{
5223
modalPosition: 'left' | 'right' | 'center';
5324
isFullWidth: boolean;
@@ -62,6 +33,7 @@ export const BodyWrapper = styled.section<{
6233
background-color: #ffffff;
6334
flex-direction: column;
6435
overflow: hidden;
36+
6537
font-family: Arial;
6638
6739
* {

‎src/components/TG.tsx

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ const TG = ({
3737
isFullWidth,
3838
onToggle,
3939
}: TGProps) => {
40-
const LIMIT_WIDTH = window.innerWidth;
4140
const [canvasState, setCanvasState] = useState<CanvasState>({
4241
value: 'Simple Thumbnail\nGenerator 😁',
4342
fontSize: '30px',
@@ -98,13 +97,6 @@ const TG = ({
9897
const replacedCallback = getReplaceCallback(name);
9998
const replacedValue = value.replace(regex, replacedCallback);
10099

101-
const validMessage = getValidMessage(
102-
name === 'canvasWidth' && +replacedValue > LIMIT_WIDTH,
103-
'canvasSize'
104-
);
105-
106-
if (validMessage) return alert(validMessage);
107-
108100
setCanvasState({
109101
...canvasState,
110102
[name]: replacedValue,
@@ -143,12 +135,6 @@ const TG = ({
143135

144136
img.src = files[0] && URL.createObjectURL(files[0]);
145137
img.onload = async () => {
146-
const validMessage = getValidMessage(
147-
img.width > LIMIT_WIDTH,
148-
'imageSize'
149-
);
150-
if (validMessage) return alert(validMessage);
151-
152138
setCanvasState({
153139
...canvasState,
154140
selectedImage: img,

‎src/constants/select.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const fontFamilies = [
88
];
99
export const strokeTypes = ['None', 'Thin', 'Normal', 'Thick'];
1010

11-
export const imageTypes = ['png', 'jpg', 'webp'];
11+
export const imageTypes = ['png', 'jpg', 'svg', 'webp'];
1212

1313
export const fontSizes = [
1414
'10px',

‎src/lib/ThumbnailGenerator.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Icon from '@components/Icon';
88

99
interface ThumbnailGeneratorProps {
1010
id?: string;
11+
isDefaultOpen?: boolean;
1112
buttonIcon?: React.ReactNode;
1213
iconSize?: 'small' | 'medium' | 'large';
1314
position?: Position;
@@ -20,13 +21,14 @@ interface ThumbnailGeneratorProps {
2021
const ThumbnailGenerator = ({
2122
id,
2223
buttonIcon,
24+
isDefaultOpen = false,
2325
iconSize = 'medium',
2426
iconPosition = [0, 20, 20, 0],
2527
modalPosition = 'right',
2628
isFullWidth = false,
2729
additionalFontFamily = [],
2830
}: ThumbnailGeneratorProps) => {
29-
const [isOpen, setIsOpen] = useState(false);
31+
const [isOpen, setIsOpen] = useState(isDefaultOpen);
3032
const tgIconSize = getIconSize(iconSize);
3133

3234
const onToggleGenerator = () => {

0 commit comments

Comments
 (0)