diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx
index 7b5a7d792b6..22c4570e0e7 100644
--- a/packages/components/src/components/button/button.lite.tsx
+++ b/packages/components/src/components/button/button.lite.tsx
@@ -1,68 +1,23 @@
-import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import {
+ onMount,
+ Show,
+ useMetadata,
+ useRef,
+ useStore
+} from '@builder.io/mitosis';
import type { DBButtonProps, DBButtonState } from './model';
import { cls } from '../../utils';
+import { ClickEvent } from '../../shared/model';
useMetadata({
- isAttachedToShadowDom: true,
- component: {
- // MS Power Apps
- includeIcon: true,
- hasDisabledProp: true,
- hasOnClick: true,
- canvasSize: {
- height: 'fixed', // 'fixed', 'controlled'
- width: 'dynamic' // 'fixed', 'dynamic' (requires width property), 'controlled'
- },
- properties: [
- {
- name: 'children',
- type: 'SingleLine.Text',
- defaultValue: 'Button'
- },
- {
- name: 'variant',
- type: 'Enum',
- values: [
- { key: 'Primary', name: 'Primary', value: 'primary' },
- { key: 'Outlined', name: 'Outlined', value: 'outlined' },
- {
- key: 'Text',
- name: 'Text',
- value: 'text'
- },
- {
- key: 'Solid',
- name: 'Solid',
- value: 'solid'
- }
- ],
- defaultValue: 'primary'
- },
- {
- name: 'icon',
- type: 'Icon'
- },
- { name: 'noText', type: 'TwoOptions' },
- {
- name: 'width',
- powerAppsName: 'autoWidth', // width property is reserved in power apps
- type: 'Enum',
- defaultValue: 'auto',
- values: [
- { key: 'Full', name: 'Full', value: 'full' },
- { key: 'Auto', name: 'Auto', value: 'auto' }
- ]
- }
- ]
- }
+ isAttachedToShadowDom: true
});
export default function DBButton(props: DBButtonProps) {
- // This is used as forwardRef
- let component: any;
+ const ref = useRef
(null);
// jscpd:ignore-start
const state = useStore({
- handleClick: (event: any) => {
+ handleClick: (event: ClickEvent) => {
if (props.onClick) {
props.onClick(event);
}
@@ -78,8 +33,8 @@ export default function DBButton(props: DBButtonProps) {
return (