@rpg-engine/long-bow 0.2.47 → 0.2.48

package/package.json

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

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

@@ -92,7 +92,7 @@ export const ItemSlot: React.FC<IProps> = observer(
       if (stackQty > 1) {
         return (
           <ItemQtyContainer key={`qty-${itemId}`}>
-            <Ellipsis maxLines={1} maxWidth={48}>
+            <Ellipsis maxLines={1} maxWidth="48px">
               <ItemQty
                 className={
                   isFractionalStackQty || isLargerThan999 ? 'small' : 'regular'

package/src/components/PropertySelect/PropertySelect.tsx

@@ -51,11 +51,13 @@ export const PropertySelect: React.FC<IPropertySelectProps> = ({
   return (
     <Container>
       <TextOverlay>
-        <Item>
-          <Ellipsis maxLines={1} maxWidth={200}>
-            {getCurrentSelectionName()}
-          </Ellipsis>
-        </Item>
+        <p>
+          <Item>
+            <Ellipsis maxLines={1} maxWidth="60%" center>
+              {getCurrentSelectionName()}
+            </Ellipsis>
+          </Item>
+        </p>
       </TextOverlay>
       <div className="rpgui-progress-track"></div>
 

package/src/components/TradingMenu/TradingItemRow.tsx

@@ -52,9 +52,11 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
       </ItemIconContainer>
       <ItemNameContainer>
         <NameValue>
-          <Ellipsis maxLines={1} maxWidth={250}>
-            {capitalize(traderItem.name)}
-          </Ellipsis>
+          <p>
+            <Ellipsis maxLines={1} maxWidth="250px">
+              {capitalize(traderItem.name)}
+            </Ellipsis>
+          </p>
           <p>${traderItem.price}</p>
         </NameValue>
       </ItemNameContainer>

package/src/components/shared/Ellipsis.tsx

@@ -4,8 +4,9 @@ import styled from 'styled-components';
 interface IProps {
   children: React.ReactNode;
   maxLines: 1 | 2 | 3;
-  maxWidth: number;
+  maxWidth: string;
   fontSize?: string;
+  center?: boolean;
 }
 
 export const Ellipsis = ({
@@ -13,29 +14,29 @@ export const Ellipsis = ({
   maxLines,
   maxWidth,
   fontSize,
+  center,
 }: IProps) => {
   return (
-    <Container maxWidth={maxWidth} fontSize={fontSize}>
+    <Container maxWidth={maxWidth} fontSize={fontSize} center={center}>
       <div className={`ellipsis-${maxLines}-lines`}>{children}</div>
     </Container>
   );
 };
 
 interface IContainerProps {
-  maxWidth: number;
+  maxWidth?: string;
   fontSize?: string;
+  center?: boolean;
 }
 
 const Container = styled.div<IContainerProps>`
-  p {
-    font-size: ${props => props.fontSize || '1rem'};
-  }
-
   .ellipsis-1-lines {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    max-width: ${props => props.maxWidth}px;
+    max-width: ${props => props.maxWidth};
+
+    ${props => props.center && `margin: 0 auto;`}
   }
   .ellipsis-2-lines {
     display: -webkit-box;