@rpg-engine/long-bow 0.4.82 → 0.4.83

package/src/components/ProgressBar.tsx

@@ -1,102 +1,102 @@
-import React from 'react';
-import styled from 'styled-components';
-import { uiFonts } from '../constants/uiFonts';
-
-export interface IBarProps {
-  max: number;
-  value: number;
-  color: 'red' | 'blue' | 'green';
-  style?: Record<string, any>;
-  displayText?: boolean;
-  percentageWidth?: number;
-  minWidth?: number;
-  mobileScale?: number;
-}
-
-export const ProgressBar: React.FC<IBarProps> = ({
-  max,
-  value,
-  color,
-  displayText = true,
-  percentageWidth = 40,
-  minWidth = 100,
-  style,
-  mobileScale,
-}) => {
-  value = Math.round(value);
-  max = Math.round(max);
-
-  const calculatePercentageValue = function(max: number, value: number) {
-    if (value > max) {
-      value = max;
-    }
-    return (value * 100) / max;
-  };
-
-  return (
-    <Container
-      className="rpgui-progress"
-      data-value={calculatePercentageValue(max, value) / 100}
-      data-rpguitype="progress"
-      percentageWidth={percentageWidth}
-      minWidth={minWidth}
-      style={style}
-      mobileScale={mobileScale}
-    >
-      {displayText && (
-        <TextOverlay>
-          <ProgressBarText>
-            {value}/{max}
-          </ProgressBarText>
-        </TextOverlay>
-      )}
-      <div className=" rpgui-progress-track">
-        <div
-          className={`rpgui-progress-fill ${color} `}
-          style={{
-            left: '0px',
-            width: calculatePercentageValue(max, value) + '%',
-          }}
-        ></div>
-      </div>
-      <div className=" rpgui-progress-left-edge"></div>
-      <div className=" rpgui-progress-right-edge"></div>
-    </Container>
-  );
-};
-
-const ProgressBarText = styled.span`
-  font-size: ${uiFonts.size.small} !important;
-  color: white;
-  text-align: center;
-  z-index: 1;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  top: 12px;
-`;
-
-const TextOverlay = styled.div`
-  width: 100%;
-  position: relative;
-`;
-
-interface IContainerProps {
-  percentageWidth?: number;
-  minWidth?: number;
-  style?: Record<string, any>;
-  mobileScale?: number;
-}
-
-const Container = styled.div<IContainerProps>`
-  display: flex;
-  flex-direction: column;
-  min-width: ${props => props.minWidth}px;
-  width: ${props => props.percentageWidth}%;
-  justify-content: start;
-  align-items: flex-start;
-  ${props => props.style}
-  @media (max-width: 950px) {
-    transform: scale(${props => props.mobileScale});
-  }
-`;
+import React from 'react';
+import styled from 'styled-components';
+import { uiFonts } from '../constants/uiFonts';
+
+export interface IBarProps {
+  max: number;
+  value: number;
+  color: 'red' | 'blue' | 'green';
+  style?: Record<string, any>;
+  displayText?: boolean;
+  percentageWidth?: number;
+  minWidth?: number;
+  mobileScale?: number;
+}
+
+export const ProgressBar: React.FC<IBarProps> = ({
+  max,
+  value,
+  color,
+  displayText = true,
+  percentageWidth = 40,
+  minWidth = 100,
+  style,
+  mobileScale,
+}) => {
+  value = Math.round(value);
+  max = Math.round(max);
+
+  const calculatePercentageValue = function(max: number, value: number) {
+    if (value > max) {
+      value = max;
+    }
+    return (value * 100) / max;
+  };
+
+  return (
+    <Container
+      className="rpgui-progress"
+      data-value={calculatePercentageValue(max, value) / 100}
+      data-rpguitype="progress"
+      percentageWidth={percentageWidth}
+      minWidth={minWidth}
+      style={style}
+      mobileScale={mobileScale}
+    >
+      {displayText && (
+        <TextOverlay>
+          <ProgressBarText>
+            {value}/{max}
+          </ProgressBarText>
+        </TextOverlay>
+      )}
+      <div className=" rpgui-progress-track">
+        <div
+          className={`rpgui-progress-fill ${color} `}
+          style={{
+            left: '0px',
+            width: calculatePercentageValue(max, value) + '%',
+          }}
+        ></div>
+      </div>
+      <div className=" rpgui-progress-left-edge"></div>
+      <div className=" rpgui-progress-right-edge"></div>
+    </Container>
+  );
+};
+
+const ProgressBarText = styled.span`
+  font-size: ${uiFonts.size.small} !important;
+  color: white;
+  text-align: center;
+  z-index: 1;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 12px;
+`;
+
+const TextOverlay = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+interface IContainerProps {
+  percentageWidth?: number;
+  minWidth?: number;
+  style?: Record<string, any>;
+  mobileScale?: number;
+}
+
+const Container = styled.div<IContainerProps>`
+  display: flex;
+  flex-direction: column;
+  min-width: ${props => props.minWidth}px;
+  width: ${props => props.percentageWidth}%;
+  justify-content: start;
+  align-items: flex-start;
+  ${props => props.style}
+  @media (max-width: 950px) {
+    transform: scale(${props => props.mobileScale});
+  }
+`;

package/src/components/PropertySelect/PropertySelect.tsx

@@ -1,106 +1,106 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { uiFonts } from '../../constants/uiFonts';
-import SelectArrow from '../Arrow/SelectArrow';
-import { Ellipsis } from '../shared/Ellipsis';
-
-export interface IPropertySelectProps {
-  availableProperties: Array<IPropertiesProps>;
-  selectedProperty?: IPropertiesProps;
-  children?: React.ReactNode;
-  onChange: (selectedProperty: IPropertiesProps) => void;
-}
-
-export interface IPropertiesProps {
-  id: string;
-  name: string;
-}
-
-export const PropertySelect: React.FC<IPropertySelectProps> = ({
-  availableProperties,
-  onChange,
-}) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  const propertiesLength = availableProperties.length - 1;
-
-  const onLeftClick = () => {
-    if (currentIndex === 0) setCurrentIndex(propertiesLength);
-    else setCurrentIndex(index => index - 1);
-  };
-  const onRightClick = () => {
-    if (currentIndex === propertiesLength) setCurrentIndex(0);
-    else setCurrentIndex(index => index + 1);
-  };
-
-  useEffect(() => {
-    onChange(availableProperties[currentIndex]);
-  }, [currentIndex]);
-
-  useEffect(() => {
-    setCurrentIndex(0);
-  }, [JSON.stringify(availableProperties)]);
-
-  const getCurrentSelectionName = () => {
-    const item = availableProperties[currentIndex];
-    if (item) {
-      return item.name;
-    }
-    return '';
-  };
-
-  return (
-    <Container>
-      <TextOverlay>
-        <p>
-          <Item>
-            <Ellipsis maxLines={1} maxWidth="60%" center>
-              {getCurrentSelectionName()}
-            </Ellipsis>
-          </Item>
-        </p>
-      </TextOverlay>
-      <div className="rpgui-progress-track"></div>
-
-      <SelectArrow direction="left" onPointerDown={onLeftClick}></SelectArrow>
-      <SelectArrow direction="right" onPointerDown={onRightClick}></SelectArrow>
-    </Container>
-  );
-};
-
-const Item = styled.span`
-  font-size: 1rem;
-  color: white;
-  text-align: center;
-  z-index: 1;
-  position: absolute;
-  top: 12px;
-  width: 100%;
-
-  p {
-    margin: 0 auto;
-    font-size: ${uiFonts.size.small};
-  }
-`;
-
-const TextOverlay = styled.div`
-  width: 100%;
-  position: relative;
-`;
-
-interface IContainerProps {
-  percentageWidth?: number;
-  minWidth?: number;
-  style?: Record<string, any>;
-}
-
-const Container = styled.div<IContainerProps>`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: start;
-  align-items: flex-start;
-  min-width: 100px;
-  width: 40%;
-`;
-
-export default PropertySelect;
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { uiFonts } from '../../constants/uiFonts';
+import SelectArrow from '../Arrow/SelectArrow';
+import { Ellipsis } from '../shared/Ellipsis';
+
+export interface IPropertySelectProps {
+  availableProperties: Array<IPropertiesProps>;
+  selectedProperty?: IPropertiesProps;
+  children?: React.ReactNode;
+  onChange: (selectedProperty: IPropertiesProps) => void;
+}
+
+export interface IPropertiesProps {
+  id: string;
+  name: string;
+}
+
+export const PropertySelect: React.FC<IPropertySelectProps> = ({
+  availableProperties,
+  onChange,
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const propertiesLength = availableProperties.length - 1;
+
+  const onLeftClick = () => {
+    if (currentIndex === 0) setCurrentIndex(propertiesLength);
+    else setCurrentIndex(index => index - 1);
+  };
+  const onRightClick = () => {
+    if (currentIndex === propertiesLength) setCurrentIndex(0);
+    else setCurrentIndex(index => index + 1);
+  };
+
+  useEffect(() => {
+    onChange(availableProperties[currentIndex]);
+  }, [currentIndex]);
+
+  useEffect(() => {
+    setCurrentIndex(0);
+  }, [JSON.stringify(availableProperties)]);
+
+  const getCurrentSelectionName = () => {
+    const item = availableProperties[currentIndex];
+    if (item) {
+      return item.name;
+    }
+    return '';
+  };
+
+  return (
+    <Container>
+      <TextOverlay>
+        <p>
+          <Item>
+            <Ellipsis maxLines={1} maxWidth="60%" center>
+              {getCurrentSelectionName()}
+            </Ellipsis>
+          </Item>
+        </p>
+      </TextOverlay>
+      <div className="rpgui-progress-track"></div>
+
+      <SelectArrow direction="left" onPointerDown={onLeftClick}></SelectArrow>
+      <SelectArrow direction="right" onPointerDown={onRightClick}></SelectArrow>
+    </Container>
+  );
+};
+
+const Item = styled.span`
+  font-size: 1rem;
+  color: white;
+  text-align: center;
+  z-index: 1;
+  position: absolute;
+  top: 12px;
+  width: 100%;
+
+  p {
+    margin: 0 auto;
+    font-size: ${uiFonts.size.small};
+  }
+`;
+
+const TextOverlay = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+interface IContainerProps {
+  percentageWidth?: number;
+  minWidth?: number;
+  style?: Record<string, any>;
+}
+
+const Container = styled.div<IContainerProps>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: flex-start;
+  min-width: 100px;
+  width: 40%;
+`;
+
+export default PropertySelect;