@rpg-engine/long-bow 0.5.85 → 0.5.87

package/dist/stories/CheckButton.stories.d.ts

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/react';
 import { ICheckProps } from '../../src/components/CheckButton';
+import { ICheckItemProps } from '../components/CheckItem';
 declare const meta: Meta;
 export default meta;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ICheckProps>;
+export declare const DefaultCheckItems: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ICheckItemProps>;

package/package.json

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

package/src/components/CheckItem.tsx

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

package/src/stories/CheckButton.stories.tsx

@@ -5,6 +5,7 @@ import {
   ICheckItems,
   ICheckProps,
 } from '../../src/components/CheckButton';
+import { CheckItem, ICheckItemProps } from '../components/CheckItem';
 import {
   RPGUIContainer,
   RPGUIContainerTypes,
@@ -26,8 +27,20 @@ const Template: Story<ICheckProps> = args => (
   </RPGUIRoot>
 );
 
+const TemplateCheckItems: Story<ICheckItemProps> = args => {
+  return (
+    <RPGUIRoot>
+      <RPGUIContainer type={RPGUIContainerTypes.Framed}>
+        <CheckItem {...args} />
+      </RPGUIContainer>
+    </RPGUIRoot>
+  );
+};
+
 export const Default = Template.bind({});
 
+export const DefaultCheckItems = TemplateCheckItems.bind({});
+
 const items: ICheckItems[] = [
   {
     label: 'label1',
@@ -46,3 +59,10 @@ const items: ICheckItems[] = [
 Default.args = {
   items,
 };
+
+DefaultCheckItems.args = {
+  label: 'label',
+  onChange: (label, value) => {
+    console.log(label, value);
+  },
+};