@rpg-engine/long-bow 0.2.19 → 0.2.21

package/package.json

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

package/src/components/Dropdown.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import { RPGUIForceRenderStart } from './RPGUIForceRenderStart';
 import { _RPGUI } from './RPGUIRoot';
 
 export interface IOptionsProps {
@@ -41,24 +40,18 @@ export const Dropdown: React.FC<IDropdownProps> = ({
   }, [selectedValue]);
 
   return (
-    <RPGUIForceRenderStart
-      elementDOMId={`rpgui-dropdown-${dropdownId}`}
-      elementRenderedDOMKey='[data-rpguitype="dropdown"]'
-      RPGUICreateFunction="dropdown"
+    <select
+      id={`rpgui-dropdown-${dropdownId}`}
+      style={{ width: width }}
+      className="rpgui-dropdown"
     >
-      <select
-        id={`rpgui-dropdown-${dropdownId}`}
-        style={{ width: width }}
-        className="rpgui-dropdown"
-      >
-        {options.map(option => {
-          return (
-            <option key={option.id} value={option.value}>
-              {option.option}
-            </option>
-          );
-        })}
-      </select>
-    </RPGUIForceRenderStart>
+      {options.map(option => {
+        return (
+          <option key={option.id} value={option.value}>
+            {option.option}
+          </option>
+        );
+      })}
+    </select>
   );
 };

package/src/components/PropertySelect/PropertySelect.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import { Ellipsis } from '../shared/Ellipsis';
 import LeftArrowClickIcon from './img/ui-arrows/arrow01-left-clicked.png';
 import LeftArrowIcon from './img/ui-arrows/arrow01-left.png';
 import RightArrowClickIcon from './img/ui-arrows/arrow01-right-clicked.png';
@@ -52,9 +53,12 @@ export const PropertySelect: React.FC<IPropertySelectProps> = ({
   return (
     <Container>
       <TextOverlay>
-        <Item>{getCurrentSelectionName()}</Item>
+        <Item>
+          <Ellipsis maxLines={1}>{getCurrentSelectionName()}</Ellipsis>
+        </Item>
       </TextOverlay>
       <div className="rpgui-progress-track"></div>
+
       <LeftArrow onClick={onLeftClick} onTouchStart={onLeftClick}></LeftArrow>
       <RightArrow
         onClick={onRightClick}
@@ -70,9 +74,8 @@ const Item = styled.span`
   text-align: center;
   z-index: 1;
   position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
   top: 12px;
+  width: 100%;
 `;
 
 const TextOverlay = styled.div`
@@ -106,6 +109,7 @@ const LeftArrow = styled.div`
   :active {
     background-image: url(${LeftArrowClickIcon});
   }
+  z-index: 2;
 `;
 
 const RightArrow = styled.div`
@@ -118,6 +122,7 @@ const RightArrow = styled.div`
   :active {
     background-image: url(${RightArrowClickIcon});
   }
+  z-index: 2;
 `;
 
 export default PropertySelect;

package/src/components/RangeSlider.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
-import { RPGUIForceRenderStart } from './RPGUIForceRenderStart';
 import { _RPGUI } from './RPGUIRoot';
 
 export enum RangeSliderType {
@@ -34,26 +33,20 @@ export const RangeSlider: React.FC<IRangeSliderProps> = ({
   };
 
   return (
-    <RPGUIForceRenderStart
-      elementDOMId={`rpgui-slider-${sliderId}`}
-      elementRenderedDOMKey="[data-rpguitype='slider']"
-      RPGUICreateFunction="slider"
-    >
-      <div onMouseUp={onHandleMouseUp}>
-        <Input
-          className={
-            type === RangeSliderType.Slider
-              ? RangeSliderType.Slider
-              : RangeSliderType.GoldSlider
-          }
-          type="range"
-          style={{ width: width }}
-          min={valueMin}
-          max={valueMax}
-          id={`rpgui-slider-${sliderId}`}
-        />
-      </div>
-    </RPGUIForceRenderStart>
+    <div onMouseUp={onHandleMouseUp}>
+      <Input
+        className={
+          type === RangeSliderType.Slider
+            ? RangeSliderType.Slider
+            : RangeSliderType.GoldSlider
+        }
+        type="range"
+        style={{ width: width }}
+        min={valueMin}
+        max={valueMax}
+        id={`rpgui-slider-${sliderId}`}
+      />
+    </div>
   );
 };
 

package/src/components/shared/Ellipsis.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  children: React.ReactNode;
+  maxLines: 1 | 2 | 3;
+}
+
+export const Ellipsis = ({ children, maxLines }: IProps) => {
+  console.log('Ellipsis Component 2');
+  return (
+    <Container>
+      <div className={`ellipsis-${maxLines}-lines`}>{children}</div>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  .ellipsis-1-lines {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .ellipsis-2-lines {
+    display: -webkit-box;
+    max-width: 100%;
+    height: 25px;
+    margin: 0 auto;
+    line-height: 1;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  .ellipsis-3-lines {
+    display: -webkit-box;
+    max-width: 100%;
+    height: 43px;
+    margin: 0 auto;
+    line-height: 1;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+`;