@rpg-engine/long-bow 0.2.8 → 0.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.8",
+  "version": "0.2.10",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/QuestInfo/QuestInfo.tsx

@@ -1,5 +1,5 @@
 import { IQuest } from '@rpg-engine/shared';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Button, ButtonTypes } from '../Button';
 import { DraggableContainer } from '../DraggableContainer';
@@ -11,26 +11,34 @@ import { RPGUIContainerTypes } from '../RPGUIContainer';
 import { Column } from '../shared/Column';
 import thumbnailDefault from './img/default.png';
 
-export interface IQuestInfoProps {
-  onClose?: () => void;
-  button?: Array<IQuestsButtonProps>;
-  quests: IQuest[];
-}
-
 export interface IQuestsButtonProps {
   disabled: boolean;
   title: string;
-  onClick: (QuestId: string, NPCId: string) => void;
+  onClick: (questId: string, npcId: string) => void;
+}
+
+export interface IQuestInfoProps {
+  onClose?: () => void;
+  buttons?: IQuestsButtonProps[];
+  quests: IQuest[];
+  onChangeQuest: (currentQuestIndex: number, currentQuestId: string) => void;
 }
 
 export const QuestInfo: React.FC<IQuestInfoProps> = ({
   quests,
   onClose,
-  button,
+  buttons,
+  onChangeQuest,
 }) => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const questsLength = quests.length - 1;
 
+  useEffect(() => {
+    if (onChangeQuest) {
+      onChangeQuest(currentIndex, quests[currentIndex]._id);
+    }
+  }, [currentIndex]);
+
   const onLeftClick = () => {
     if (currentIndex === 0) setCurrentIndex(questsLength);
     else setCurrentIndex(index => index - 1);
@@ -72,21 +80,21 @@ export const QuestInfo: React.FC<IQuestInfoProps> = ({
               <p>{quests[currentIndex].description}</p>
             </Content>
             <QuestColumn className="dark-background" justifyContent="flex-end">
-              {button &&
-                button.map((item, index) => (
+              {buttons &&
+                buttons.map((button, index) => (
                   <Button
                     key={index}
                     onClick={() =>
-                      item.onClick(
+                      button.onClick(
                         quests[currentIndex]._id,
                         quests[currentIndex].npcId
                       )
                     }
-                    disabled={item.disabled}
+                    disabled={button.disabled}
                     buttonType={ButtonTypes.RPGUIButton}
                     id={`button-${index}`}
                   >
-                    {item.title}
+                    {button.title}
                   </Button>
                 ))}
             </QuestColumn>
@@ -108,16 +116,18 @@ export const QuestInfo: React.FC<IQuestInfoProps> = ({
               <p>{quests[0].description}</p>
             </Content>
             <QuestColumn className="dark-background" justifyContent="flex-end">
-              {button &&
-                button.map((item, index) => (
+              {buttons &&
+                buttons.map((button, index) => (
                   <Button
                     key={index}
-                    onClick={() => item.onClick(quests[0]._id, quests[0].npcId)}
-                    disabled={item.disabled}
+                    onClick={() =>
+                      button.onClick(quests[0]._id, quests[0].npcId)
+                    }
+                    disabled={button.disabled}
                     buttonType={ButtonTypes.RPGUIButton}
                     id={`button-${index}`}
                   >
-                    {item.title}
+                    {button.title}
                   </Button>
                 ))}
             </QuestColumn>
@@ -131,13 +141,12 @@ export const QuestInfo: React.FC<IQuestInfoProps> = ({
 const QuestDraggableContainer = styled(DraggableContainer)`
   border: 1px solid black;
   width: 600px;
-  height: 500px;
   padding: 0 0 0 0 !important;
   .DraggableContainer__TitleContainer-sc-184mpyl-2 {
     height: auto;
   }
   .container-close {
-    position: sticky;
+    position: absolute;
     margin-left: auto;
     top: 20px;
     padding-right: 5px;

package/src/stories/QuestInfo.stories.tsx

@@ -100,6 +100,8 @@ const IQuestMock = [
 
 Default.args = {
   onClose: () => console.log('closing'),
-  button: buttonMock,
+  buttons: buttonMock,
   quests: IQuestMock,
+  onChangeQuest: (index: number, questId: string) =>
+    console.log(index, questId),
 };