@rpg-engine/long-bow 0.7.86 → 0.7.88

package/package.json

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

package/src/components/Item/Inventory/ItemQuantitySelector.tsx

@@ -1,5 +1,12 @@
-import React from 'react';
-import { QuantitySelector } from '../../QuantitySelector/QuantitySelector';
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { Button, ButtonTypes } from '../../Button';
+import { Input } from '../../Input';
+import {
+  RPGUIContainer,
+  RPGUIContainerTypes,
+} from '../../RPGUI/RPGUIContainer';
+import { RangeSlider, RangeSliderType } from '../../RangeSlider';
 
 export interface IItemQuantitySelectorProps {
   quantity: number;
@@ -12,13 +19,123 @@ export const ItemQuantitySelector: React.FC<IItemQuantitySelectorProps> = ({
   onConfirm,
   onClose,
 }) => {
+  const [value, setValue] = useState(quantity);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+
+      const closeSelector = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          onClose();
+        }
+      };
+
+      document.addEventListener('keydown', closeSelector);
+
+      return () => {
+        document.removeEventListener('keydown', closeSelector);
+      };
+    }
+
+    return () => {};
+  }, []);
+
   return (
-    <QuantitySelector
-      maxQuantity={quantity}
-      initialQuantity={quantity}
-      title="Select quantity to move"
-      onConfirm={onConfirm}
-      onClose={onClose}
-    />
+    <StyledContainer type={RPGUIContainerTypes.Framed} width="25rem">
+      <CloseButton className="container-close" onPointerDown={onClose}>
+        X
+      </CloseButton>
+      <h2>Select quantity to move</h2>
+      <StyledForm
+        style={{ width: '100%' }}
+        onSubmit={e => {
+          e.preventDefault();
+
+          const numberValue = Number(value);
+
+          if (Number.isNaN(numberValue)) {
+            return;
+          }
+
+          onConfirm(Math.max(1, Math.min(quantity, numberValue)));
+        }}
+        noValidate
+      >
+        <StyledInput
+          innerRef={inputRef}
+          placeholder="Enter quantity"
+          type="number"
+          min={1}
+          max={quantity}
+          value={value}
+          onChange={e => {
+            if (Number(e.target.value) >= quantity) {
+              setValue(quantity);
+              return;
+            }
+
+            setValue((e.target.value as unknown) as number);
+          }}
+          onBlur={e => {
+            const newValue = Math.max(
+              1,
+              Math.min(quantity, Number(e.target.value))
+            );
+
+            setValue(newValue);
+          }}
+        />
+        <RangeSlider
+          type={RangeSliderType.Slider}
+          valueMin={1}
+          valueMax={quantity}
+          width="100%"
+          onChange={setValue}
+          value={value}
+        />
+        <Button buttonType={ButtonTypes.RPGUIButton} type="submit">
+          Confirm
+        </Button>
+      </StyledForm>
+    </StyledContainer>
   );
 };
+
+const StyledContainer = styled(RPGUIContainer)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const StyledForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+`;
+const StyledInput = styled(Input)`
+  text-align: center;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &[type='number'] {
+    -moz-appearance: textfield;
+  }
+`;
+
+const CloseButton = styled.div`
+  position: absolute;
+  top: 3px;
+  right: 0px;
+  color: white;
+  z-index: 22;
+  font-size: 0.8rem;
+`;

package/src/components/Item/Inventory/ItemQuantitySelectorModal.tsx

@@ -1,13 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
-import ModalPortal from '../../Abstractions/ModalPortal';
-import { ItemQuantitySelector } from './ItemQuantitySelector';
-
-export interface IQuantitySelect {
-  isOpen: boolean;
-  maxQuantity: number;
-  callback: (_quantity: number) => void;
-}
+import { IQuantitySelect, QuantitySelectorModal } from '../../QuantitySelector/QuantitySelectorModal';
 
 interface IProps {
   quantitySelect: IQuantitySelect;
@@ -17,43 +9,13 @@ interface IProps {
 export const ItemQuantitySelectorModal = ({
   quantitySelect,
   setQuantitySelect,
-}: IProps) => {
+}: IProps): JSX.Element => {
   return (
-    <ModalPortal>
-      <QuantitySelectorContainer>
-        <ItemQuantitySelector
-          quantity={quantitySelect.maxQuantity}
-          onConfirm={quantity => {
-            quantitySelect.callback(quantity);
-            setQuantitySelect({
-              isOpen: false,
-              maxQuantity: 1,
-              callback: () => {},
-            });
-          }}
-          onClose={() => {
-            quantitySelect.callback(-1);
-            setQuantitySelect({
-              isOpen: false,
-              maxQuantity: 1,
-              callback: () => {},
-            });
-          }}
-        />
-      </QuantitySelectorContainer>
-    </ModalPortal>
+    <QuantitySelectorModal
+      quantitySelect={quantitySelect}
+      setQuantitySelect={setQuantitySelect}
+    />
   );
 };
 
-const QuantitySelectorContainer = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 100;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.5);
-`;
+export type { IQuantitySelect };

package/src/components/QuantitySelector/QuantitySelectorModal.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import styled from 'styled-components';
+import ModalPortal from '../Abstractions/ModalPortal';
+import { QuantitySelector } from './QuantitySelector';
+
+export interface IQuantitySelect {
+  isOpen: boolean;
+  maxQuantity: number;
+  callback: (quantity: number) => void;
+  title?: string;
+  initialQuantity?: number;
+}
+
+interface IProps {
+  quantitySelect: IQuantitySelect;
+  setQuantitySelect: React.Dispatch<React.SetStateAction<IQuantitySelect>>;
+}
+
+const validateQuantitySelect = (
+  quantitySelect: IQuantitySelect
+): IQuantitySelect => ({
+  ...quantitySelect,
+  maxQuantity: Math.max(1, quantitySelect.maxQuantity),
+  initialQuantity: quantitySelect.initialQuantity
+    ? Math.max(
+        1,
+        Math.min(quantitySelect.maxQuantity, quantitySelect.initialQuantity)
+      )
+    : undefined,
+});
+
+export const QuantitySelectorModal = ({
+  quantitySelect,
+  setQuantitySelect,
+}: IProps): JSX.Element => {
+  const resetQuantitySelect = () => {
+    setQuantitySelect({
+      isOpen: false,
+      maxQuantity: 1,
+      callback: () => {},
+    });
+  };
+
+  // Validate the input values
+  const validatedQuantitySelect = validateQuantitySelect(quantitySelect);
+
+  return (
+    <ModalPortal>
+      <QuantitySelectorContainer>
+        <QuantitySelector
+          maxQuantity={validatedQuantitySelect.maxQuantity}
+          initialQuantity={validatedQuantitySelect.initialQuantity}
+          title={validatedQuantitySelect.title}
+          onConfirm={quantity => {
+            validatedQuantitySelect.callback(quantity);
+            resetQuantitySelect();
+          }}
+          onClose={() => {
+            validatedQuantitySelect.callback(-1);
+            resetQuantitySelect();
+          }}
+        />
+      </QuantitySelectorContainer>
+    </ModalPortal>
+  );
+};
+
+const QuantitySelectorContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+`;

package/src/index.tsx

@@ -57,4 +57,6 @@ export * from './components/Truncate';
 export * from './components/Tutorial/TutorialStepper';
 export * from './components/typography/DynamicText';
 
+export * from './components/QuantitySelector/QuantitySelectorModal';
+
 export { useEventListener } from './hooks/useEventListener';