テキストサイズを追加、フォームラベルのスタイルを調整

Author: su-u

src/app/image_generator/ImageGenerator.tsx

@@ -8,7 +8,8 @@ import { PRESET_SIZE_OPTIONS } from '@/app/image_generator/presetSize';
 import {
   useImageGenerator,
   DEFAULT_VALUES,
-  SIZE_LIMIT,
+  IMG_SIZE_LIMIT,
+  TEXT_SIZE_LIMIT,
   UNSPLASH_FILE_TYPES,
   PLACEHOLD_FILE_TYPES,
 } from '@/app/image_generator/useImageGenerator';
@@ -92,8 +93,8 @@ const CommonForm: FC<{ control: any }> = ({ control }) => {
             <InputNumber
               {...field}
               style={{ width }}
-              min={SIZE_LIMIT.min}
-              max={SIZE_LIMIT.max}
+              min={IMG_SIZE_LIMIT.min}
+              max={IMG_SIZE_LIMIT.max}
               defaultValue={DEFAULT_VALUES.wight}
             />
           )}
@@ -107,8 +108,8 @@ const CommonForm: FC<{ control: any }> = ({ control }) => {
             <InputNumber
               {...field}
               style={{ width }}
-              min={SIZE_LIMIT.min}
-              max={SIZE_LIMIT.max}
+              min={IMG_SIZE_LIMIT.min}
+              max={IMG_SIZE_LIMIT.max}
               defaultValue={DEFAULT_VALUES.height}
             />
           )}
@@ -179,11 +180,24 @@ const PlaceholdTab: FC<{ control: any }> = ({ control }) => {
         />
       </FormRow>
       <FormRow label="テキスト">
+        <Controller
+          render={({ field: { ref, ...field } }) => <Input {...field} style={{ width }} />}
+          name="text"
+          control={control}
+        />
+      </FormRow>
+      <FormRow label="テキストサイズ">
         <Controller
           render={({ field: { ref, ...field } }) => (
-            <Input {...field} style={{ width }} noResize="none" />
+            <InputNumber
+              {...field}
+              style={{ width }}
+              min={TEXT_SIZE_LIMIT.min}
+              max={TEXT_SIZE_LIMIT.max}
+              defaultValue={DEFAULT_VALUES.textSize}
+            />
           )}
-          name="text"
+          name="textSize"
           control={control}
         />
       </FormRow>

src/app/image_generator/useImageGenerator.ts

@@ -12,6 +12,7 @@ type ImageGeneratorForm = {
   textColor: Color | undefined;
   tab: 'unsplash' | 'placehold';
   text: string;
+  textSize: number | undefined;
 };
 
 export const DEFAULT_VALUES: ImageGeneratorForm = {
@@ -22,13 +23,19 @@ export const DEFAULT_VALUES: ImageGeneratorForm = {
   textColor: new ColorFactory('1668dc00'),
   tab: 'unsplash',
   text: '',
+  textSize: undefined,
 };
 
-export const SIZE_LIMIT = {
+export const IMG_SIZE_LIMIT = {
   min: 1,
   max: 5000,
 };
 
+export const TEXT_SIZE_LIMIT = {
+  min: 1,
+  max: 999,
+};
+
 export const UNSPLASH_FILE_TYPES = [
   {
     label: 'JPG',
@@ -114,13 +121,14 @@ const createUnsplashURL = (values: ImageGeneratorForm) => {
 
 // https://placehold.jp/
 const createPlaceholdURL = (values: ImageGeneratorForm) => {
-  const { wight, height, type, textColor, bgColor, text } = values;
+  const { wight, height, type, textColor, bgColor, text, textSize } = values;
+  const textSizePath = textSize ? '' : `/${textSize}`;
   const bgColorPath = bgColor ? `/${bgColor.toHex()}` : '';
   const textColorPath = textColor ? `/${textColor.toHex()}` : '';
 
   const params = new URLSearchParams({
     text,
   });
 
-  return `https://placehold.jp${bgColorPath}${textColorPath}/${wight}x${height}.${type}?${params}`;
+  return `https://placehold.jp${textSizePath}${bgColorPath}${textColorPath}/${wight}x${height}.${type}?${params}`;
 };

src/components/common/Form/ConfigForm.tsx src/components/common/Form/FormLabel.tsxsrc/components/common/Form/ConfigForm.tsx renamed to src/components/common/Form/FormLabel.tsx

@@ -1,9 +1,8 @@
 import styled from '@emotion/styled';
 import { Form } from 'rsuite';
 
-export const ConfigLabel = styled(Form.ControlLabel)`
+export const FormLabel = styled(Form.ControlLabel)`
   padding-left: 6px !important;
-  width: 90px !important;
-  line-height: 12px !important;
   text-align: left !important;
+  line-height: 12px !important;
 `;

src/components/common/Form/FormRow.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { Form, Grid, Row, Col } from 'rsuite';
-import { ConfigLabel } from '@/components/common/Form/ConfigForm';
+import { FormLabel } from '@/components/common/Form/FormLabel';
 
 type Props = {
   label: string;
@@ -13,7 +13,7 @@ export const FormRow: FC<Props> = ({ label, children, ...rest }) => {
       <Grid {...rest} fluid>
         <Row>
           <Col xl={4} md={8} sm={12} xs={24}>
-            <ConfigLabel>{label}</ConfigLabel>
+            <FormLabel>{label}</FormLabel>
           </Col>
           <Col xl={20} md={16} sm={12} xs={24}>
             {children}