Merge pull request #37 from FriedRiceNoodles/feat/type/customEventInR…

…eact

chore(type): add right event type for  transform React component

docs/example/Menu/demos/Event.tsx

@@ -7,9 +7,12 @@ import { Divider, Menu, MenuItem } from '@banana-ui/react';
 import React from 'react';
 
 export default function BasicUsage() {
-  const onSelect = (event: any) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-    console.log(event.detail.item.value);
+  const onSelect = (
+    event: CustomEvent<{
+      item: string;
+    }>,
+  ) => {
+    console.log(event.detail.item);
   };
 
   return (

docs/example/Stepper/demos/stepChange.tsx

@@ -15,7 +15,7 @@ export default function StepChange() {
         controlled
         onChange={(e) => {
           if (e.composedPath()[0] === stepper.current) {
-            const event = e as CustomEvent<{ value: string }>;
+            const event = e;
 
             Message.info({ content: `current stepper value：${event.detail.value}` });
             setValue(Number(event.detail.value));

packages/banana-cli/templates/banana-react/index.js

@@ -6,17 +6,13 @@ const teamplete = (componentName, formField) => `import { createComponent } from
 import { B${toCamelCase(componentName)} } from '@banana-ui/banana';
 import * as React from 'react';
 
+const events = ${formField ? "{onChange: 'change'}" : '{}'}
+
 export const ${toCamelCase(componentName)} = createComponent({
   tagName: 'b-${componentName}',
   react: React,
   elementClass: B${toCamelCase(componentName)},
-  ${
-    formField
-      ? `events: {
-    onChange: 'change',
-  },`
-      : ''
-  }
+  events
 });`;
 
 module.exports = teamplete;

packages/banana-react/src/carousel/index.ts

@@ -1,12 +1,18 @@
 import { BCarousel } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      currentIndex: number;
+    }>
+  >,
+};
+
 export const Carousel = createComponent({
   tagName: 'b-carousel',
   react: React,
   elementClass: BCarousel,
-  events: {
-    onChange: 'change',
-  },
+  events,
 });

packages/banana-react/src/checkbox/index.ts

@@ -1,12 +1,18 @@
 import { BCheckbox } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      checked: boolean;
+    }>
+  >,
+};
+
 export const Checkbox = createComponent({
   tagName: 'b-checkbox',
   react: React,
   elementClass: BCheckbox,
-  events: {
-    onChange: 'change',
-  },
+  events,
 });

packages/banana-react/src/collapse/index.ts

@@ -2,14 +2,16 @@ import { BCollapse } from '@banana-ui/banana';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onShow: 'show',
+  onAfterShow: 'afterShow',
+  onHide: 'hide',
+  onAfterHide: 'afterHide',
+};
+
 export const Collapse = createComponent({
   tagName: 'b-collapse',
   react: React,
   elementClass: BCollapse,
-  events: {
-    onShow: 'show',
-    onAfterShow: 'afterShow',
-    onHide: 'hide',
-    onAfterHide: 'afterHide',
-  },
+  events,
 });

packages/banana-react/src/countdown/index.ts

@@ -1,13 +1,19 @@
 import { BCountdown } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      timeLeft: number;
+    }>
+  >,
+  onFinish: 'finish',
+};
+
 export const Countdown = createComponent({
   tagName: 'b-countdown',
   react: React,
   elementClass: BCountdown,
-  events: {
-    onChange: 'change',
-    onFinish: 'finish',
-  },
+  events,
 });

packages/banana-react/src/input/index.ts

@@ -1,12 +1,18 @@
 import { BInput } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      value: string;
+    }>
+  >,
+};
+
 export const Input = createComponent({
   tagName: 'b-input',
   react: React,
   elementClass: BInput,
-  events: {
-    onChange: 'change',
-  },
+  events,
 });

packages/banana-react/src/menu/index.ts

@@ -1,12 +1,18 @@
 import { BMenu } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onSelect: 'select' as EventName<
+    CustomEvent<{
+      item: string;
+    }>
+  >,
+};
+
 export const Menu = createComponent({
   tagName: 'b-menu',
   react: React,
   elementClass: BMenu,
-  events: {
-    onSelect: 'select',
-  },
+  events,
 });

packages/banana-react/src/modal/index.ts

@@ -2,12 +2,14 @@ import { BModal } from '@banana-ui/banana';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onCancel: 'cancel',
+  onOk: 'ok',
+};
+
 export const Modal = createComponent({
   tagName: 'b-modal',
   react: React,
   elementClass: BModal,
-  events: {
-    onCancel: 'cancel',
-    onOk: 'ok',
-  },
+  events,
 });

packages/banana-react/src/overlay/index.ts

@@ -2,11 +2,13 @@ import { BOverlay } from '@banana-ui/banana';
 import { createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onClose: 'close',
+};
+
 export const Overlay = createComponent({
   react: React,
   tagName: 'b-overlay',
   elementClass: BOverlay,
-  events: {
-    onClose: 'close',
-  },
+  events,
 });

packages/banana-react/src/radio-group/index.ts

@@ -1,12 +1,18 @@
 import { BRadioGroup } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      value: string;
+    }>
+  >,
+};
+
 export const RadioGroup = createComponent({
   tagName: 'b-radio-group',
   react: React,
   elementClass: BRadioGroup,
-  events: {
-    onChange: 'change',
-  },
+  events,
 });

packages/banana-react/src/rating/index.ts

@@ -1,12 +1,18 @@
 import { BRating } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      value: number;
+    }>
+  >,
+};
+
 export const Rating = createComponent({
   tagName: 'b-rating',
   react: React,
   elementClass: BRating,
-  events: {
-    onChange: 'change',
-  },
+  events,
 });

packages/banana-react/src/select/index.ts

@@ -1,12 +1,18 @@
 import { BSelect } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      value: string | string[];
+    }>
+  >,
+};
+
 export const Select = createComponent({
   tagName: 'b-select',
   react: React,
   elementClass: BSelect,
-  events: {
-    onChange: 'change',
-  },
+  events,
 });

packages/banana-react/src/stepper/index.ts

@@ -1,12 +1,18 @@
 import { BStepper } from '@banana-ui/banana';
-import { createComponent } from '@lit-labs/react';
+import { EventName, createComponent } from '@lit-labs/react';
 import * as React from 'react';
 
+const events = {
+  onChange: 'change' as EventName<
+    CustomEvent<{
+      value: number;
+    }>
+  >,
+};
+
 export const Stepper = createComponent({
   tagName: 'b-stepper',
   react: React,
   elementClass: BStepper,
-  events: {
-    onChange: 'change',
-  },
+  events,
 });

packages/banana/src/menu/index.ts

@@ -25,7 +25,7 @@ export default class BMenu extends LitElement {
       return;
     }
 
-    this.dispatchEvent(new CustomEvent('select', { detail: { item } }));
+    this.dispatchEvent(new CustomEvent('select', { detail: { item: item.value } }));
   }
 
   // todo...

packages/banana/src/stepper/index.ts

@@ -116,7 +116,7 @@ export default class BStepper extends LitElement implements BananaFormElement {
     }
 
     const eventOptions = { bubbles: false, cancelable: false, composed: true, detail: { value: result } };
-    this.dispatchEvent(new CustomEvent('change', eventOptions));
+    this.dispatchEvent(new CustomEvent<{ value: number }>('change', eventOptions));
   }
 
   plus() {