@rpg-engine/long-bow 0.1.29 → 0.1.35

package/src/components/RadioButton.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+
+export interface IRadioItems {
+  label: string;
+  value: string;
+}
+
+export interface IRadioProps {
+  name: string;
+  items: IRadioItems[];
+  onChange: (value: string) => void;
+}
+
+export const InputRadio: React.FC<IRadioProps> = ({
+  name,
+  items,
+  onChange,
+}) => {
+  const [selectedValue, setSelectedValue] = useState<string>();
+  const handleClick = () => {
+    let element = document.querySelector(
+      `input[name=${name}]:checked`
+    ) as HTMLInputElement;
+    const elementValue = element.value;
+    setSelectedValue(elementValue);
+  };
+
+  useEffect(() => {
+    if (selectedValue) {
+      onChange(selectedValue);
+    }
+  }, [selectedValue]);
+
+  return (
+    <div id="elemento-radio">
+      {items.map((element) => {
+        return (
+          <>
+            <input
+              key={element.value}
+              className="rpgui-radio"
+              value={element.value}
+              name={name}
+              type="radio"
+            />
+            <label onClick={handleClick}>{element.label}</label>
+            <br />
+          </>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/RangeSlider.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 import { useEventListener } from '../hooks/useEventListener';
-import { RPGUIRoot, _RPGUI } from './RPGUIRoot';
+import { _RPGUI } from './RPGUIRoot';
 
 export enum RangeSliderType {
   Slider = 'rpgui-slider',
@@ -43,25 +43,23 @@ export const RangeSlider: React.FC<IRangeSliderProps> = ({
   };
 
   return (
-    <RPGUIRoot>
-      <div
-        onMouseUp={onHandleMouseUp}
-        onMouseDown={() => setWasMouseDownFirst(true)}
-      >
-        <Input
-          className={
-            type === RangeSliderType.Slider
-              ? RangeSliderType.Slider
-              : RangeSliderType.GoldSlider
-          }
-          type="range"
-          style={{ width: width }}
-          min={valueMin}
-          max={valueMax}
-          id={`rpgui-slider-${sliderId}`}
-        />
-      </div>
-    </RPGUIRoot>
+    <div
+      onMouseUp={onHandleMouseUp}
+      onMouseDown={() => setWasMouseDownFirst(true)}
+    >
+      <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/TextArea.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export interface ITextArea
+  extends React.DetailedHTMLProps<
+    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    HTMLTextAreaElement
+  > {}
+
+export const TextArea: React.FC<ITextArea> = ({ ...props }) => {
+  return <textarea {...props} />;
+};

package/src/components/Truncate.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable react/require-default-props */
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  maxLines?: number;
+  children: React.ReactNode;
+}
+
+export const Truncate: React.FC<IProps> = ({ maxLines = 1, children }) => {
+  return <Container maxLines={maxLines}>{children}</Container>;
+};
+
+interface IContainerProps {
+  maxLines: number;
+}
+
+const Container = styled.div<IContainerProps>`
+  display: -webkit-box;
+  max-width: 100%;
+  max-height: 100%;
+  -webkit-line-clamp: ${(props) => props.maxLines};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;

package/src/index.tsx

@@ -1,9 +1,15 @@
 export * from './components/Button';
+export * from './components/CheckButton';
+export * from './components/Dropdown';
+export * from './components/Input';
 export * from './components/ListMenu';
 export * from './components/NPCDialog/NPCDialog';
 export * from './components/NPCDialog/QuestionDialog/QuestionDialog';
+export * from './components/RadioButton';
 export * from './components/RangeSlider';
 export * from './components/RPGUIContainer';
 export * from './components/RPGUIRoot';
+export * from './components/TextArea';
+export * from './components/Truncate';
 export * from './components/typography/DynamicText';
 export { useEventListener } from './hooks/useEventListener';