- 
+ 
+ 
+ 
+ 
+ 
+
-
+ 
+
- Type: `string`
-- position
+- iconPosition
+ - **Optional**
+ - Sequence: [top, right, bottom, left]
+ - Default: `[0, 20, 20, 0]`
+ - Type:`[number, number, number, number]`
+- modalPosition
- **Optional**
- - Default: `bottom-right`
- - Type: `bottom-right | bottom-left | top-right | top-left`
+ - Default: `right`
+ - Type:`left | right | center`
- iconSize
- **Optional**
- Default: `medium`
diff --git a/package.json b/package.json
index 9295232..229017d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-thumbnail-generator",
- "version": "1.2.0",
+ "version": "2.1.1",
"description": "react-thumbnail-generator",
"main": "dist/index.js",
"module": "dist/index.js",
@@ -67,6 +67,7 @@
"react-scripts": "^5.0.1",
"rollup": "^3.17.2",
"rollup-plugin-peer-deps-external": "^2.2.4",
+ "rollup-plugin-postcss": "^4.0.2",
"tsconfig-paths-webpack-plugin": "^4.0.0",
"typescript": "^4.9.5"
},
diff --git a/rollup.config.mjs b/rollup.config.mjs
index bee3567..b32ec49 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -4,6 +4,7 @@ import terser from '@rollup/plugin-terser';
import typescript from '@rollup/plugin-typescript';
import commonjs from '@rollup/plugin-commonjs';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
import pkg from './package.json' assert { type: 'json' };
const extensions = ['.js', '.jsx', '.ts', '.tsx'];
@@ -20,6 +21,7 @@ export default {
external: ['react'],
plugins: [
peerDepsExternal(),
+ postcss(),
commonjs({ include: 'node_modules/**' }),
nodeResolve({
extensions,
diff --git a/src/components/TG.styled.ts b/src/components/TG.styled.ts
index eeb3131..c8ad7fb 100644
--- a/src/components/TG.styled.ts
+++ b/src/components/TG.styled.ts
@@ -1,7 +1,9 @@
import styled from 'styled-components';
-import { getPosition, Position } from '../utils/style';
+import { getIconPosition, getModalPosition } from 'utils/style';
-export const TGOpenButton = styled.button<{ position: Position }>`
+export const TGOpenButton = styled.button<{
+ iconPosition: [number, number, number, number];
+}>`
padding: 0;
background-color: transparent;
position: fixed;
@@ -16,12 +18,12 @@ export const TGOpenButton = styled.button<{ position: Position }>`
transform: scale(1.1);
}
- ${({ position }) => {
- return getPosition(position);
- }}
+ ${({ iconPosition }) => getIconPosition(iconPosition)}
`;
-export const TGBodyWrapper = styled.section<{ position: Position }>`
+export const TGBodyWrapper = styled.section<{
+ modalPosition: 'left' | 'right' | 'center';
+}>`
position: fixed;
display: flex;
justify-content: center;
@@ -33,9 +35,7 @@ export const TGBodyWrapper = styled.section<{ position: Position }>`
flex-direction: column;
overflow: hidden;
- ${({ position }) => {
- return getPosition(position);
- }}
+ ${({ modalPosition }) => getModalPosition(modalPosition)}
`;
export const TGCanvasWrapper = styled.div`
@@ -115,6 +115,10 @@ export const TGTextarea = styled.textarea`
font-size: 1rem;
color: #cccccc;
}
+
+ &:focus {
+ border: 1px solid #0e1b30;
+ }
`;
export const TGButtonContainer = styled.div`
@@ -126,7 +130,7 @@ export const TGButtonContainer = styled.div`
button {
background-color: #192841;
color: #fff;
- width: 200px;
+ width: 300px;
padding: 12px 15px;
border: none;
border-radius: 5px;
@@ -294,14 +298,29 @@ export const TGControllerWrapper = styled.div`
}
`;
-export const TGIConButton = styled.button<{ isBorder?: boolean }>`
+export const TGIConButton = styled.button<{
+ isOpenColorPicker?: boolean;
+ isBorder?: boolean;
+}>`
padding: 4px 5px;
background: #fff;
- border: ${({ isBorder }) => (isBorder ? `1px solid #cccccc` : 'none')};
border-radius: 5px;
display: flex;
align-items: center;
cursor: pointer;
+
+ ${({ isBorder, isOpenColorPicker }) => {
+ if (!isBorder) return `border: none;`;
+ return `
+ border: ${
+ isOpenColorPicker ? '1px solid #0e1b30;' : '1px solid #cccccc;'
+ };
+ `;
+ }}
+
+ &:hover {
+ border: ${({ isBorder }) => (isBorder ? `1px solid #0e1b30` : 'none')};
+ }
`;
// TG Select
@@ -315,12 +334,13 @@ export const SelectWrapper = styled.div`
}
`;
-export const SelectInput = styled.div`
+export const SelectInput = styled.div<{ isOpenSelect: boolean }>`
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
- border: 1px solid #cccccc;
+ border: ${({ isOpenSelect }) =>
+ isOpenSelect ? `1px solid #0e1b30` : `1px solid #cccccc`};
border-radius: 5px;
padding: 6px 12px;
@@ -377,13 +397,15 @@ export const TGInputTextContainer = styled.div<{ width?: number }>`
outline: none;
margin-top: 1px;
width: ${({ width }) => `${width}px`};
+
+ &:focus {
+ border: 1px solid #0e1b30;
+ }
}
`;
// TG Icon
-export const TGIConImage = styled.img<{ color?: string }>`
- fill: ${({ color }) => `${color}`};
-`;
+export const TGIConImage = styled.img``;
// TG InputFile
export const TGInputFileWrapper = styled.div`
@@ -394,16 +416,20 @@ export const TGInputFileWrapper = styled.div`
justify-content: center;
cursor: pointer;
border: 1px solid #cccccc;
- padding: 4px 5px;
label {
cursor: pointer;
width: 20px;
height: 20px;
+ padding: 4px 5px;
margin: 0;
}
input {
display: none;
}
+
+ &:hover {
+ border: 1px solid #0e1b30;
+ }
`;
diff --git a/src/components/TG.tsx b/src/components/TG.tsx
index 389d927..66c0a14 100644
--- a/src/components/TG.tsx
+++ b/src/components/TG.tsx
@@ -16,47 +16,28 @@ import TGSelectItem from './TGSelectItem';
import TGInputText from './TGInputText';
import TGIcon from './TGIcon';
import { fill, font, stroke } from '../assets/icons';
-import { Position } from '../utils/style';
import TGInputFile from './TGInputFile';
import Divider from './Divider';
+import {
+ fontFamilies,
+ fontSizes,
+ imageTypes,
+ strokeTypes,
+} from 'constants/select';
+
+type StrokeTypes = 'None' | 'Thin' | 'Normal' | 'Thick';
interface TGProps {
additionalFontFamily?: string[];
- position: Position;
+ modalPosition: 'left' | 'right' | 'center';
onToggle: () => void;
}
-type StrokeTypes = 'None' | 'Thin' | 'Normal' | 'Thick';
-
-const fontFamilies = [
- 'Arial',
- 'monospace',
- 'Times New Roman',
- 'Georgia',
- 'Courier New',
- 'Verdana',
-];
-const strokeTypes = ['None', 'Thin', 'Normal', 'Thick'];
-const imageTypes = ['png', 'jpg', 'webp'];
-const fontSizes = [
- '10px',
- '20px',
- '30px',
- '40px',
- '50px',
- '60px',
- '70px',
- '80px',
- '90px',
- '100px',
- '120px',
- '140px',
- '160px',
- '180px',
- '200px',
-];
-
-const TG = ({ additionalFontFamily = [], position, onToggle }: TGProps) => {
+const TG = ({
+ additionalFontFamily = [],
+ modalPosition,
+ onToggle,
+}: TGProps) => {
const [text, setText] = useState('Simple Thumbnail Generator 😁');
const [bgColor, setBgColor] = useColor('hex', '#192841');
const [fontColor, setFontColor] = useColor('hex', '#fff');
@@ -82,17 +63,19 @@ const TG = ({ additionalFontFamily = [], position, onToggle }: TGProps) => {
const LimitWidthSize = window.innerWidth - 70;
const LimitHeightSize = 5000;
+ const setStateType = {
+ imageType: setImageType,
+ fontSize: setFontSize,
+ fontStrokeType: setFontStrokeType,
+ fontFamily: setFontFamily,
+ canvasSize: setCanvasSize,
+ fontAxis: setFontAxisAndAngle,
+ };
+
const onChangeSelectValue = (
type: 'imageType' | 'fontSize' | 'fontStrokeType' | 'fontFamily',
value: string
) => {
- const setStateType = {
- imageType: setImageType,
- fontSize: setFontSize,
- fontStrokeType: setFontStrokeType,
- fontFamily: setFontFamily,
- };
-
const setState = setStateType[type];
setState(value);
};
@@ -117,11 +100,6 @@ const TG = ({ additionalFontFamily = [], position, onToggle }: TGProps) => {
return alert('Please set the height smaller than 5000px');
}
- const setStateType = {
- canvasSize: setCanvasSize,
- fontAxis: setFontAxisAndAngle,
- };
-
const setState = setStateType[type];
setState((prev: any) => ({
@@ -172,7 +150,7 @@ const TG = ({ additionalFontFamily = [], position, onToggle }: TGProps) => {
const fontFamilyOptions = [...additionalFontFamily, ...fontFamilies];
return (
- {value}
{isOpenSelect ? (
diff --git a/src/constants/select.ts b/src/constants/select.ts
new file mode 100644
index 0000000..4d8c0e8
--- /dev/null
+++ b/src/constants/select.ts
@@ -0,0 +1,29 @@
+export const fontFamilies = [
+ 'Arial',
+ 'monospace',
+ 'Times New Roman',
+ 'Georgia',
+ 'Courier New',
+ 'Verdana',
+];
+export const strokeTypes = ['None', 'Thin', 'Normal', 'Thick'];
+
+export const imageTypes = ['png', 'jpg', 'webp'];
+
+export const fontSizes = [
+ '10px',
+ '20px',
+ '30px',
+ '40px',
+ '50px',
+ '60px',
+ '70px',
+ '80px',
+ '90px',
+ '100px',
+ '120px',
+ '140px',
+ '160px',
+ '180px',
+ '200px',
+];
diff --git a/src/lib/ThumbnailGenerator.tsx b/src/lib/ThumbnailGenerator.tsx
index ceeb6a4..7b66626 100644
--- a/src/lib/ThumbnailGenerator.tsx
+++ b/src/lib/ThumbnailGenerator.tsx
@@ -11,6 +11,8 @@ interface ThumbnailGeneratorProps {
iconSrc?: string;
iconSize?: 'small' | 'medium' | 'large';
position?: Position;
+ iconPosition?: [number, number, number, number];
+ modalPosition?: 'left' | 'right' | 'center';
additionalFontFamily?: string[];
}
@@ -18,7 +20,8 @@ const ThumbnailGenerator = ({
id,
iconSrc = toggleButton,
iconSize = 'medium',
- position = 'bottom-right',
+ iconPosition = [0, 20, 20, 0],
+ modalPosition = 'right',
additionalFontFamily = [],
}: ThumbnailGeneratorProps) => {
const [isOpen, setIsOpen] = useState(false);
@@ -33,12 +36,12 @@ const ThumbnailGenerator = ({