ChekiPopup、ボタンの色を変更できるようにする

calmery · Nov 22, 2020 · 4d93e37 · 4d93e37
1 parent d7bfb67
commit 4d93e37
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/src/components/Cheki/InputImage.tsx b/src/components/Cheki/InputImage.tsx
@@ -144,6 +144,7 @@ export const ChekiInputImage: React.FC<{
           onCancel={handleOnClickTermsCancelButton}
           enterText="同意する"
           cancalText="同意しない"
+          primary="right"
         >
           <ExternalLink className="font-bold" href="/cheki/terms-of-service">
             利用規約

diff --git a/src/components/Cheki/Popup.tsx b/src/components/Cheki/Popup.tsx
@@ -68,6 +68,7 @@ interface PopupProps {
   children: React.ReactNode;
   enterText?: string;
   cancalText?: string;
+  primary?: "left" | "right";
 }
 
 export const ChekiPopup: React.FC<PopupProps> = ({
@@ -76,6 +77,7 @@ export const ChekiPopup: React.FC<PopupProps> = ({
   children,
   onEnter,
   onCancel,
+  primary = "left",
 }) => {
   const [popupTransition, setPopupTransition] = useState<
     "bounceIn" | "bounceOut"
@@ -118,14 +120,25 @@ export const ChekiPopup: React.FC<PopupProps> = ({
         >
           <PopupInnerMessage css={Typography.M}>{children}</PopupInnerMessage>
           <PopupInnerButtons>
-            {onCancel && (
-              <ChekiButton onClick={handleOnClickCancel}>
-                {cancalText || "キャンセル"}
+            {onCancel &&
+              (primary === "left" ? (
+                <ChekiButton onClick={handleOnClickCancel}>
+                  {cancalText || "キャンセル"}
+                </ChekiButton>
+              ) : (
+                <ChekiSubButton onClick={handleOnClickCancel}>
+                  {cancalText || "キャンセル"}
+                </ChekiSubButton>
+              ))}
+            {primary === "right" || !onCancel ? (
+              <ChekiButton onClick={handleOnClickEnter}>
+                {enterText || "わかった"}
               </ChekiButton>
+            ) : (
+              <ChekiSubButton onClick={handleOnClickEnter}>
+                {enterText || "わかった"}
+              </ChekiSubButton>
             )}
-            <ChekiSubButton onClick={handleOnClickEnter}>
-              {enterText || "わかった"}
-            </ChekiSubButton>
           </PopupInnerButtons>
         </PopupInner>
       </PopupContainer>