Skip to content

Commit

Permalink
Feat: added seat controls
Browse files Browse the repository at this point in the history
  • Loading branch information
@Akalanka47000
Akalanka47000 committed Jun 24, 2024
1 parent 01dff33 commit 8a5f12d
Show file tree
Hide file tree
Showing 7 changed files with 110 additions and 94 deletions.
3 changes: 1 addition & 2 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@
"extends": [
"plugin:@typescript-eslint/recommended",
"plugin:storybook/recommended",
"plugin:react/recommended",
"plugin:mdx/recommended"
"plugin:react/recommended"
],
"parserOptions": {
"ecmaFeatures": {
Expand Down
Binary file modified bun.lockb
View file
Binary file not shown.
1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,6 @@
"bun-types": "1.0.21",
"esbuild": "0.20.1",
"eslint": "8.49.0",
"eslint-plugin-mdx": "2.1.0",
"eslint-plugin-react": "7.33.2",
"eslint-plugin-react-hooks": "4.6.0",
"eslint-plugin-storybook": "0.6.13",
Expand Down
2 changes: 2 additions & 0 deletions src/components/controls/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { default as ImageControls } from "./image";
import { default as NoControls } from "./no-controls";
import { default as NoSelectedElement } from "./no-selection";
import { default as NoSelectionControls } from "./no-selection-controls";
import { default as SeatControls } from "./seat";
import { default as SelectControls } from "./select";
import { default as ShapeControls } from "./shapes";

Expand Down Expand Up @@ -41,6 +42,7 @@ const Controls = ({ options, styles }: IControlProps) => {
}
return NoSelectedElement;
}
if (selectedTool === Tool.Seat) return SeatControls;
if (selectedTool === Tool.Shape) return ShapeControls;
if (selectedTool === Tool.Image) return ImageControls;
return NoControls;
Expand Down
14 changes: 14 additions & 0 deletions src/components/controls/seat.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { ISTKProps } from "@/types";
import { CategoryManager } from "../controls/select/seats/categorizer";

type IControlProps = Pick<ISTKProps, "options" | "styles">;

const SeatControls = (props: IControlProps) => {
return (
<div className="flex flex-col gap-4">
<CategoryManager {...props} />
</div>
);
};

export default SeatControls;
180 changes: 92 additions & 88 deletions src/components/controls/select/seats/categorizer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,100 @@ const onSectionSelect = (e: MouseEvent<HTMLButtonElement>) => {

type IControlProps = Pick<ISTKProps, "options" | "styles">;

const Categorizer = ({ firstElement, selectedElementIds, options }: IControlProps & Record<string, any>) => {
export const CategoryManager = ({ options }: IControlProps) => {
const categories = useSelector((state: any) => state.editor.categories);
const sections = useSelector((state: any) => state.editor.sections);
const seats = useSelector((state: any) => state.editor.seats);
return (
<div className="grid gap-4">
<div className="flex flex-col gap-2">
<h4 className="font-bold leading-none pb-1">Manage Categories</h4>
<hr />
<span className="hover:text-gray-500 cursor-pointer transition-all duration-medium" onClick={onAddCategory}>
+ Add Category
</span>
<hr />
</div>
<div className="flex flex-col gap-4">
{categories.map((category) => {
if (category.id === "0") return null;
const displayDisabledDelete =
options?.disableCategoryDeleteIfReserved &&
seats?.some(
(seat: any) =>
seat.category === category.id &&
(seat.status === SeatStatus.Reserved || seat.status === SeatStatus.Locked)
);
return (
<div key={`category-${category.id}`} className="flex justify-start items-center gap-4">
<input
defaultValue={category.color}
type="color"
className="flex-shrink-0 w-6 h-6 p-0 bg-white rounded-color-input"
onChange={(e) => onUpdateCategory({ ...category, color: e.target.value })}
/>
<input
defaultValue={category.textColor}
type="color"
className="flex-shrink-0 w-6 h-6 p-0 bg-white square-color-input"
onChange={(e) => onUpdateCategory({ ...category, textColor: e.target.value })}
/>
<Input
defaultValue={category.name}
className="h-8"
onChange={(e) => onUpdateCategory({ ...category, name: e.target.value })}
/>
<Popover>
<PopoverTrigger>
<LayoutTemplate
size={22}
className={twMerge(
"flex-shrink-0 cursor-pointer transition-all duration-medium ",
category.section ? "text-blue-600 hover:text-blue-500" : "hover:text-gray-500"
)}
/>
</PopoverTrigger>
<PopoverContent className="bg-white w-auto p-0 mr-4">
{sections.map((section) => (
<PopoverClose
key={section.id}
className={twMerge(
"w-full flex gap-3 items-center py-2 px-4 text-base cursor-pointer hover:bg-gray-100 transition-all duration-medium",
section.id === "0" && "justify-center border-b pb-2",
section.id === category.section && "bg-blue-50 "
)}
{...{ [dataAttributes.section]: section.id }}
{...{ [dataAttributes.category]: category.id }}
onClick={onSectionSelect}
>
{section.id !== "0" && (
<div className="h-4 w-4 rounded-full" style={{ backgroundColor: section.color }} />
)}
{section.name}
</PopoverClose>
))}
</PopoverContent>
</Popover>
{!options?.disableCategoryDelete && (
<Trash2
size={22}
className={twMerge(
"hover:text-gray-500 flex-shrink-0 cursor-pointer transition-all duration-medium",
displayDisabledDelete && "opacity-50 pointer-events-none"
)}
onClick={() => onDeleteCategory(category.id)}
/>
)}
</div>
);
})}
</div>
</div>
);
};

const Categorizer = ({ firstElement, selectedElementIds, options }: IControlProps & Record<string, any>) => {
const categories = useSelector((state: any) => state.editor.categories);
return (
<>
<div className="w-full flex justify-between items-center gap-12">
Expand All @@ -41,93 +131,7 @@ const Categorizer = ({ firstElement, selectedElementIds, options }: IControlProp
</Caption>
</PopoverTrigger>
<PopoverContent className="bg-white w-80 py-4 mr-4">
<div className="grid gap-4">
<div className="flex flex-col gap-2">
<h4 className="font-bold leading-none pb-1">Manage Categories</h4>
<hr />
<span
className="hover:text-gray-500 cursor-pointer transition-all duration-medium"
onClick={onAddCategory}
>
+ Add Category
</span>
<hr />
</div>
<div className="flex flex-col gap-4">
{categories.map((category) => {
if (category.id === "0") return null;
const displayDisabledDelete =
options?.disableCategoryDeleteIfReserved &&
seats?.some(
(seat: any) =>
seat.category === category.id &&
(seat.status === SeatStatus.Reserved || seat.status === SeatStatus.Locked)
);
return (
<div key={`category-${category.id}`} className="flex justify-start items-center gap-4">
<input
defaultValue={category.color}
type="color"
className="flex-shrink-0 w-6 h-6 p-0 bg-white rounded-color-input"
onChange={(e) => onUpdateCategory({ ...category, color: e.target.value })}
/>
<input
defaultValue={category.textColor}
type="color"
className="flex-shrink-0 w-6 h-6 p-0 bg-white square-color-input"
onChange={(e) => onUpdateCategory({ ...category, textColor: e.target.value })}
/>
<Input
defaultValue={category.name}
className="h-8"
onChange={(e) => onUpdateCategory({ ...category, name: e.target.value })}
/>
<Popover>
<PopoverTrigger>
<LayoutTemplate
size={22}
className={twMerge(
"flex-shrink-0 cursor-pointer transition-all duration-medium ",
category.section ? "text-blue-600 hover:text-blue-500" : "hover:text-gray-500"
)}
/>
</PopoverTrigger>
<PopoverContent className="bg-white w-auto p-0 mr-4">
{sections.map((section) => (
<PopoverClose
key={section.id}
className={twMerge(
"w-full flex gap-3 items-center py-2 px-4 text-base cursor-pointer hover:bg-gray-100 transition-all duration-medium",
section.id === "0" && "justify-center border-b pb-2",
section.id === category.section && "bg-blue-50 "
)}
{...{ [dataAttributes.section]: section.id }}
{...{ [dataAttributes.category]: category.id }}
onClick={onSectionSelect}
>
{section.id !== "0" && (
<div className="h-4 w-4 rounded-full" style={{ backgroundColor: section.color }} />
)}
{section.name}
</PopoverClose>
))}
</PopoverContent>
</Popover>
{!options?.disableCategoryDelete && (
<Trash2
size={22}
className={twMerge(
"hover:text-gray-500 flex-shrink-0 cursor-pointer transition-all duration-medium",
displayDisabledDelete && "opacity-50 pointer-events-none"
)}
onClick={() => onDeleteCategory(category.id)}
/>
)}
</div>
);
})}
</div>
</div>
<CategoryManager options={options} />
</PopoverContent>
</Popover>
</div>
Expand Down
4 changes: 1 addition & 3 deletions src/stories/customization.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { Meta } from "@storybook/blocks";



<Meta title="Customization" />

<h1>Customization</h1>
Expand All @@ -10,7 +8,7 @@ import { Meta } from "@storybook/blocks";

<h4>Here is an example of how you can override its default styles:</h4>

```jsx
```tsx
import { SeatToolkit } from "@mezh-hq/react-seat-toolkit";

return <SeatToolkit
Expand Down

0 comments on commit 8a5f12d

Please sign in to comment.