seat-editor 1.2.7 → 1.2.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +78 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -17,8 +17,86 @@ An interactive seat layout editor built with React (or your stack). Create, cust
|
|
|
17
17
|
|
|
18
18
|
---
|
|
19
19
|
|
|
20
|
+
```tsx
|
|
21
|
+
"use client";
|
|
22
|
+
import { useState } from "react";
|
|
23
|
+
import { SeatEditor } from "seat-editor";
|
|
20
24
|
|
|
25
|
+
export default function Home() {
|
|
26
|
+
const [componentProps, setComponentProps] = useState([]);
|
|
27
|
+
const [extraComponentProps, setExtraComponentProps] = useState([]);
|
|
28
|
+
|
|
29
|
+
const handleCurrentStateChange = (currentState: any) => {
|
|
30
|
+
console.log("Current state changed:", currentState);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
const handleSelectComponent = (selectedComponent: any) => {
|
|
34
|
+
console.log("Selected component:", selectedComponent);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
return (
|
|
38
|
+
<div className="h-screen w-full bg-gray-200">
|
|
39
|
+
<SeatEditor
|
|
40
|
+
componentProps={componentProps}
|
|
41
|
+
extraComponentProps={extraComponentProps}
|
|
42
|
+
onCurrentStateChange={handleCurrentStateChange}
|
|
43
|
+
onSelectComponent={handleSelectComponent}
|
|
44
|
+
statusKey="status"
|
|
45
|
+
/>
|
|
46
|
+
</div>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## For only View
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
"use client"
|
|
55
|
+
import LayerView from "@/features/view/index";
|
|
56
|
+
import { dataDummy, dummyImage } from "./constant";
|
|
57
|
+
const OnlyView = () => {
|
|
58
|
+
return (
|
|
59
|
+
<>
|
|
60
|
+
<div className="w-full h-screen flex relative justify-center items-center">
|
|
61
|
+
<LayerView
|
|
62
|
+
componentProps={dataDummy}
|
|
63
|
+
mappingKey="properties"
|
|
64
|
+
extraComponentProps={dummyImage}
|
|
65
|
+
statusKey="status"
|
|
66
|
+
colorMatchKey={[
|
|
67
|
+
{
|
|
68
|
+
color: "red",
|
|
69
|
+
key: "1",
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
color: "blue",
|
|
73
|
+
key: "2",
|
|
74
|
+
}
|
|
75
|
+
]}
|
|
76
|
+
/>
|
|
77
|
+
</div>
|
|
78
|
+
</>
|
|
79
|
+
);
|
|
80
|
+
};
|
|
81
|
+
export default OnlyView;
|
|
82
|
+
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
## 🔧 Props
|
|
87
|
+
|
|
88
|
+
| Prop | Type | Description |
|
|
89
|
+
|-----------------------|-------------------------------------------|------------------------------------------------------------------------------|
|
|
90
|
+
| `componentProps` | `any[]` | List of main components (e.g., tables, chairs) to render. |
|
|
91
|
+
| `extraComponentProps` | `any[]` | List of extra components (e.g., backgrounds, decorations) to render. |
|
|
92
|
+
| `onCurrentStateChange`| `(state: any) => void` | Callback triggered when component state updates. |
|
|
93
|
+
| `onSelectComponent` | `(component: any) => void` | Callback triggered when a component is selected (clicked). |
|
|
94
|
+
| `mappingKey` | `string` | Key name used to map nested shape data from component. |
|
|
95
|
+
| `selectedTableColor` | `string` | Color value for highlighting selected components. |
|
|
96
|
+
| `colorMatchKey` | `{ color: string, key: string }[]` | Array to match status keys with specific colors. |
|
|
97
|
+
| `statusKey` | `string` | Key name used from each component to determine its current status. |
|
|
21
98
|
|
|
22
99
|
## ✨ Comming SOOON!!
|
|
23
100
|
- 🎨 actions upload image
|
|
24
101
|
|
|
102
|
+
|