@rpg-engine/long-bow 0.5.83 → 0.5.85

package/package.json

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

package/src/components/CheckItem.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+
+export interface ICheckItemProps {
+  label: string;
+  value: string;
+  onChange: (label: string, selected: boolean) => void;
+}
+
+export const CheckItem: React.FC<ICheckItemProps> = ({
+  label,
+  value,
+  onChange,
+}) => {
+  const [selected, setSelected] = useState(false);
+
+  const handleClick = () => {
+    setSelected(!selected);
+    onChange(label, !selected);
+  };
+
+  return (
+    <div key={value}>
+      <input
+        className="rpgui-checkbox"
+        type="checkbox"
+        checked={selected}
+        onChange={() => {}}
+      />
+      <label onPointerDown={handleClick}>{label}</label>
+      <br />
+    </div>
+  );
+};

package/src/components/RangeSlider.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -14,58 +14,63 @@ export interface IRangeSliderProps {
   width: string;
   onChange: (value: number) => void;
   value: number;
+  step?: number;
 }
 
-export const RangeSlider: React.FC<IRangeSliderProps> = ({
-  type,
-  valueMin,
-  valueMax,
-  width,
-  onChange,
-  value,
-}) => {
-  const sliderId = uuidv4();
+export const RangeSlider: React.FC<IRangeSliderProps> = React.memo(
+  ({ type, valueMin, valueMax, width, onChange, value, step = 1 }) => {
+    const sliderId = uuidv4();
 
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [left, setLeft] = useState(0);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [left, setLeft] = useState(0);
 
-  useEffect(() => {
-    const calculatedWidth = containerRef.current?.clientWidth || 0;
-    setLeft(
-      Math.max(
-        ((value - valueMin) / (valueMax - valueMin)) * (calculatedWidth - 35) +
-          10
-      )
-    );
-  }, [value, valueMin, valueMax]);
+    useEffect(() => {
+      const calculatedWidth = containerRef.current?.clientWidth || 0;
+      setLeft(
+        Math.max(
+          ((value - valueMin) / (valueMax - valueMin)) *
+            (calculatedWidth - 35) +
+            10
+        )
+      );
+    }, [value, valueMin, valueMax]);
+
+    const typeClass = type === RangeSliderType.GoldSlider ? 'golden' : '';
 
-  const typeClass = type === RangeSliderType.GoldSlider ? 'golden' : '';
+    const handleChange = useCallback(
+      (e: { target: { value: any } }) => {
+        onChange(Number(e.target.value));
+      },
+      [onChange]
+    );
 
-  return (
-    <div
-      style={{ width: width, position: 'relative' }}
-      className={`rpgui-slider-container ${typeClass}`}
-      id={`rpgui-slider-${sliderId}`}
-      ref={containerRef}
-    >
-      <div style={{ pointerEvents: 'none' }}>
-        <div className={`rpgui-slider-track ${typeClass}`} />
-        <div className={`rpgui-slider-left-edge ${typeClass}`} />
-        <div className={`rpgui-slider-right-edge ${typeClass}`} />
-        <div className={`rpgui-slider-thumb ${typeClass}`} style={{ left }} />
+    return (
+      <div
+        style={{ width: width, position: 'relative' }}
+        className={`rpgui-slider-container ${typeClass}`}
+        id={`rpgui-slider-${sliderId}`}
+        ref={containerRef}
+      >
+        <div style={{ pointerEvents: 'none' }}>
+          <div className={`rpgui-slider-track ${typeClass}`} />
+          <div className={`rpgui-slider-left-edge ${typeClass}`} />
+          <div className={`rpgui-slider-right-edge ${typeClass}`} />
+          <div className={`rpgui-slider-thumb ${typeClass}`} style={{ left }} />
+        </div>
+        <Input
+          type="range"
+          style={{ width: width }}
+          min={valueMin}
+          max={valueMax}
+          step={step}
+          onChange={handleChange}
+          value={value}
+          className="rpgui-cursor-point"
+        />
       </div>
-      <Input
-        type="range"
-        style={{ width: width }}
-        min={valueMin}
-        max={valueMax}
-        onChange={e => onChange(Number(e.target.value))}
-        value={value}
-        className="rpgui-cursor-point"
-      />
-    </div>
-  );
-};
+    );
+  }
+);
 
 const Input = styled.input`
   opacity: 0;

package/src/index.tsx

@@ -5,6 +5,7 @@ export * from './components/Chat/Chat';
 export * from './components/ChatRevamp/ChatRevamp';
 export * from './components/Chatdeprecated/ChatDeprecated';
 export * from './components/CheckButton';
+export * from './components/CheckItem';
 export * from './components/CircularController/CircularController';
 export * from './components/CraftBook/CraftBook';
 export * from './components/DraggableContainer';

package/src/stories/RangeSlider.stories.tsx

@@ -61,4 +61,5 @@ Default.args = {
   type: RangeSliderType.Slider,
   valueMin: 0,
   valueMax: 100,
+  step: 0.5,
 };