seat-editor 1.4.21 → 1.4.22

package/dist/features/package/index.jsx

@@ -1,107 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-import Board from "../board";
-import SideTool from "../side-tool";
-import ControlPanels from "../panel";
-import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
-import { isEqual } from "lodash";
-const TableEditor = (props) => {
-    const [initialValue, setInitialValue] = useState(null);
-    const { componentProps, extraComponentProps, onCurrentStateChange, dragOnly, mappingKey, } = props;
-    const { components, extraComponents } = useAppSelector((state) => state.board);
-    const dispatch = useAppDispatch();
-    const onUpdateCurrentState = () => {
-        let matchInitialValueWithComponents = initialValue === null || initialValue === void 0 ? void 0 : initialValue.map((item) => {
-            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
-                let findComponent = components === null || components === void 0 ? void 0 : components.find((c) => { var _a; return c.id === ((_a = item === null || item === void 0 ? void 0 : item[mappingKey]) === null || _a === void 0 ? void 0 : _a.id); });
-                if (findComponent) {
-                    return Object.assign(Object.assign({}, item), { [mappingKey]: Object.assign({}, findComponent) });
-                }
-            }
-            else {
-                let findComponent = components === null || components === void 0 ? void 0 : components.find((c) => c.id === (item === null || item === void 0 ? void 0 : item.id));
-                if (findComponent) {
-                    return Object.assign(Object.assign({}, item), findComponent);
-                }
-            }
-        });
-        onCurrentStateChange({
-            components: matchInitialValueWithComponents !== null && matchInitialValueWithComponents !== void 0 ? matchInitialValueWithComponents : [],
-            extraComponents,
-        });
-    };
-    useEffect(() => {
-        onCurrentStateChange && onUpdateCurrentState();
-    }, [components, initialValue, extraComponents]);
-    // if (!isEqual(componentsProps, componentsState)) {
-    //         isSyncingFromRedux.current = true;
-    //         setComponentsState(componentsProps);
-    //       }
-    //       if (!isEqual(extraComponentsProps, extraComponentsState)) {
-    //         isSyncingFromRedux.current = true;
-    //         setExtraComponentsState(extraComponentsProps);
-    //       }
-    //       if (!isEqual(selectedComponentProps, selectedComponent)) {
-    //         isSyncingFromRedux.current = true;
-    //         setSelectedComponent(selectedComponentProps);
-    //       }
-    // useEffect(() => {
-    //   if (componentProps && componentProps.length > 0) {
-    //     let hasMappingKeyEveryComponent = componentProps.every(
-    //       (item) => mappingKey && item[mappingKey]
-    //     );
-    //     if(componentProps
-    //     setInitialValue(componentProps);
-    //   }
-    // }
-    // , [componentProps]);
-    const convertComponentProps = () => {
-        let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
-            if (mappingKey && (item === null || item === void 0 ? void 0 : item[mappingKey])) {
-                return Object.assign({}, item[mappingKey]);
-            }
-            return item;
-        });
-        return mappingData;
-    };
-    useEffect(() => {
-        if (!isEqual(components, convertComponentProps())) {
-            let mappingData = componentProps === null || componentProps === void 0 ? void 0 : componentProps.map((item) => {
-                if (mappingKey && (item === null || item === void 0 ? void 0 : item[props.mappingKey])) {
-                    return Object.assign({}, item[props.mappingKey]);
-                }
-                return item;
-            });
-            if (mappingKey) {
-                setInitialValue(componentProps);
-            }
-            dispatch({
-                type: "board/setNewComponents",
-                payload: mappingData,
-            });
-            dispatch({ type: "board/setFlagChange", payload: true });
-        }
-        if (!isEqual(extraComponents, extraComponentProps)) {
-            dispatch({
-                type: "board/setNewExtraComponents",
-                payload: extraComponentProps,
-            });
-            dispatch({ type: "board/setFlagChange", payload: true });
-        }
-        if (props === null || props === void 0 ? void 0 : props.defaultBackground) {
-            dispatch({
-                type: "board/setBackgroundColor",
-                payload: props === null || props === void 0 ? void 0 : props.defaultBackground,
-            });
-            dispatch({ type: "board/setFlagChange", payload: true });
-        }
-    }, [componentProps, extraComponentProps, props === null || props === void 0 ? void 0 : props.defaultBackground]);
-    return (<>
-      <div className="w-full h-screen flex relative">
-        <SideTool dragOnly={dragOnly}/>
-        <Board onSelectComponent={props.onSelectComponent}/>
-        <ControlPanels action={props.action} responseMapping={props.responseMapping}/>
-      </div>
-    </>);
-};
-export default TableEditor;

package/dist/features/panel/index.jsx

@@ -1,105 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { useEffect, useState } from "react";
-import { useAppDispatch, useAppSelector } from "../../hooks/use-redux";
-import { Form, Drawer, Input } from "antd";
-import SelectToolForm from "./select-tool";
-import SquareToolForm from "./square-circle-tool";
-import SeatCircle from "./table-seat-circle";
-import UploadTool from "./upload-tool";
-const ControlPanels = (props) => {
-    const { action, responseMapping } = props;
-    const dispatch = useAppDispatch();
-    const theme = useAppSelector((state) => state.theme);
-    const tool = useAppSelector((state) => state.tool);
-    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
-    const { show } = useAppSelector((state) => state.panel);
-    const [open, setOpen] = useState(false);
-    const [form] = Form.useForm();
-    let values = Form.useWatch([], form);
-    useEffect(() => {
-        if (selectedComponent) {
-            const isDifferentId = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) !== (values === null || values === void 0 ? void 0 : values.id) || !(values === null || values === void 0 ? void 0 : values.id);
-            const isSameIdAndSameDimensions = (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.id) === (values === null || values === void 0 ? void 0 : values.id) &&
-                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.height) === (values === null || values === void 0 ? void 0 : values.height) &&
-                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.width) === (values === null || values === void 0 ? void 0 : values.width) &&
-                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.x) === (values === null || values === void 0 ? void 0 : values.x) &&
-                (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.y) === (values === null || values === void 0 ? void 0 : values.y);
-            if (show && (isDifferentId || isSameIdAndSameDimensions)) {
-                setOpen(true);
-            }
-            form.setFieldsValue(selectedComponent);
-        }
-        else {
-            setOpen(false);
-        }
-    }, [selectedComponent]);
-    useEffect(() => {
-        if (tool.active === "background" || tool.active === "image-table") {
-            setOpen(true);
-        }
-    }, [tool]);
-    const createShape = (shape, ...props) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (Object.assign(Object.assign({}, props === null || props === void 0 ? void 0 : props[0]), { shape, fill: (_b = (_a = props === null || props === void 0 ? void 0 : props[0]) === null || _a === void 0 ? void 0 : _a.fill) !== null && _b !== void 0 ? _b : theme === null || theme === void 0 ? void 0 : theme.primaryColor, seatCount: shape === "table-seat-circle" ? (_d = (_c = props === null || props === void 0 ? void 0 : props[0]) === null || _c === void 0 ? void 0 : _c.seatCount) !== null && _d !== void 0 ? _d : 6 : 0, openSpace: shape === "table-seat-circle" ? (_f = (_e = props === null || props === void 0 ? void 0 : props[0]) === null || _e === void 0 ? void 0 : _e.openSpace) !== null && _f !== void 0 ? _f : 0 : undefined, seatFill: shape === "table-seat-circle" ? (_h = (_g = props === null || props === void 0 ? void 0 : props[0]) === null || _g === void 0 ? void 0 : _g.seatFill) !== null && _h !== void 0 ? _h : "#DADADA" : undefined, text: shape === "text" ? "Text" : "", fontColor: shape === "text" ? (_k = (_j = props === null || props === void 0 ? void 0 : props[0]) === null || _j === void 0 ? void 0 : _j.fontColor) !== null && _k !== void 0 ? _k : "#DADADA" : undefined }));
-    };
-    const handleChangeComponent = (values, allValues) => {
-        const { shape } = allValues, restProps = __rest(allValues, ["shape"]);
-        const newValues = createShape(shape, restProps);
-        dispatch({
-            type: "board/updateComponent",
-            payload: Object.assign(Object.assign({}, (selectedComponent || {})), newValues),
-        });
-        dispatch({
-            type: "panel/updateSelectedComponent",
-            payload: Object.assign(Object.assign({}, (selectedComponent || {})), newValues),
-        });
-        dispatch({ type: "board/setFlagChange", payload: true });
-    };
-    const renderFormPanel = () => {
-        switch (tool.active) {
-            case "select":
-                return <SelectToolForm />;
-            case "square":
-            case "circle":
-                return <SquareToolForm />;
-            case "table-seat-circle":
-                return <SeatCircle />;
-            case "image-table":
-                return (<UploadTool name={tool.active} type="component" action={action} responseMapping={responseMapping}/>);
-            case "background":
-                return (<UploadTool name={tool.active} type="background" action={action} responseMapping={responseMapping}/>);
-            default:
-                return null;
-        }
-    };
-    const handleClose = () => {
-        setOpen(false);
-        dispatch({
-            type: "panel/setShow",
-            payload: false,
-        });
-    };
-    // if(!show) return null
-    return (<Drawer open={show} onClose={handleClose} title="Panel">
-      <div className="bg-white h-full max-h-screen overflow-y-auto w-full">
-        <Form layout="vertical" form={form} name="table" onFinish={(values) => { }} onValuesChange={handleChangeComponent} initialValues={{ labels: [{}] }}>
-          <Form.Item name="id" hidden>
-            <Input />
-          </Form.Item>
-          {renderFormPanel()}
-        </Form>
-      </div>
-    </Drawer>);
-};
-export default ControlPanels;

package/dist/features/panel/select-tool.jsx

@@ -1,53 +0,0 @@
-"use client";
-import { useAppSelector } from "../../hooks/use-redux";
-import SquareToolForm from "./square-circle-tool";
-import SeatCircle from "./table-seat-circle";
-import UploadTool from "./upload-tool";
-import TextTool from "./text-tool";
-const SelectToolForm = ({ title = "Title" }) => {
-    const components = useAppSelector((state) => state.board.components);
-    const selectedComponent = useAppSelector((state) => state.panel.selectedComponent);
-    const extraComponents = useAppSelector((state) => state.board.extraComponents);
-    const SummaryComponents = () => {
-        const countByShape = components === null || components === void 0 ? void 0 : components.reduce((acc, item) => {
-            acc[item.shape] = (acc[item.shape] || 0) + 1;
-            return acc;
-        }, {});
-        const extraCountByShape = extraComponents === null || extraComponents === void 0 ? void 0 : extraComponents.reduce((acc, item) => {
-            acc[item.shape] = (acc[item.shape] || 0) + 1;
-            return acc;
-        }, {});
-        const variableFormatToString = (variable) => {
-            return variable.replace(/-/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
-        };
-        return (<div className="flex flex-col">
-        <h1 className="heading-s">{title}</h1>
-        <div className="flex flex-col gap-2 mt-5">
-          {Object.entries(countByShape).map(([shape, count]) => (<div key={shape}>
-              <span className="font-bold">{variableFormatToString(shape)}:</span> {count}
-            </div>))}
-        </div>
-      </div>);
-    };
-    const renderComponent = () => {
-        switch (selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) {
-            case "square":
-            case "circle":
-                return <SquareToolForm />;
-            case "table-seat-circle":
-                return <SeatCircle />;
-            case "image-table":
-            case "background":
-                return <UploadTool name={selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape} defaultValue={selectedComponent} type={(selectedComponent === null || selectedComponent === void 0 ? void 0 : selectedComponent.shape) === "background" ? "background" : "component"}/>;
-            case "text":
-                return <TextTool />;
-            default:
-                return null;
-        }
-    };
-    return (<div className="flex flex-col gap-2">
-      <SummaryComponents />
-      {renderComponent()}
-    </div>);
-};
-export default SelectToolForm;

package/dist/features/panel/square-circle-tool.jsx

@@ -1,10 +0,0 @@
-"use client";
-import SectionLabel from "../../components/form-tools/label";
-import SectionShape from "../../components/form-tools/shape";
-const SquareToolForm = () => {
-    return (<>
-      <SectionShape />
-      <SectionLabel />
-    </>);
-};
-export default SquareToolForm;

package/dist/features/panel/table-seat-circle.jsx

@@ -1,31 +0,0 @@
-"use client";
-import { ColorPicker, Flex, Form, InputNumber } from "antd";
-import SectionLabel from "../../components/form-tools/label";
-import SectionShape from "../../components/form-tools/shape";
-const SeatCircle = () => {
-    return (<>
-      <div className="py-2">
-        <h1 className="heading-s"> Round table</h1>
-        <Flex>
-          <Form.Item name="seatCount" label="Seat Count" className="w-full">
-            <InputNumber />
-          </Form.Item>
-          <Form.Item name="openSpace" label="Open Space" className="w-full">
-            <InputNumber max={1} min={0} step={0.1}/>
-          </Form.Item>
-          
-        </Flex>
-        <Flex gap={2}>
-          <Form.Item label="Seat Fill" name={"seatFill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
-            <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-          </Form.Item>
-          <Form.Item label="Table Fill" name={"fill"} getValueFromEvent={(color) => color.toHexString()} className="w-full ">
-            <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-          </Form.Item>
-        </Flex>
-        <SectionShape />
-        <SectionLabel />
-      </div>
-    </>);
-};
-export default SeatCircle;

package/dist/features/panel/text-tool.jsx

@@ -1,22 +0,0 @@
-"use client";
-import { ColorPicker, Form, Input, InputNumber } from "antd";
-const TextTool = () => {
-    return (<div className="py-2">
-      <Form.Item name="text" label="Text">
-        <Input />
-      </Form.Item>
-      <Form.Item name={"fontColor"} label="Color" getValueFromEvent={(color) => color.toHexString()}>
-        <ColorPicker allowClear format="hex" defaultFormat="hex"/>
-      </Form.Item>
-      <Form.Item name={"x"} label="X">
-        <InputNumber />
-      </Form.Item>
-      <Form.Item name={"y"} label="Y">
-        <InputNumber />
-      </Form.Item>
-      <Form.Item name={"fontSize"} label="Size">
-        <InputNumber suffix="px"/>
-      </Form.Item>
-    </div>);
-};
-export default TextTool;

package/dist/features/panel/upload-tool.jsx

@@ -1,177 +0,0 @@
-"use client";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { useState, useEffect } from "react";
-import { Upload, message, Image, Button } from "antd";
-import { InboxOutlined } from "@ant-design/icons";
-import { useAppDispatch } from "../../hooks/use-redux";
-import SectionLabel from "../../components/form-tools/label";
-import SectionShape from "../../components/form-tools/shape";
-const { Dragger } = Upload;
-// const actionResponseBased = {
-//   status: 200,
-//   message: "Upload successful",
-//   data: {
-//     id: "12345",
-//     url: "https://example.com/image.png",
-//   },
-// };
-const UploadTool = ({ name, type, action, responseMapping, defaultValue, }) => {
-    var _a, _b;
-    const [defaultSrc, setDefaultSrc] = useState(null);
-    const [isEdit, setIsEdit] = useState(false);
-    useEffect(() => {
-        if (defaultValue) {
-            setDefaultSrc(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.src);
-            setIsEdit(true);
-        }
-    }, [defaultValue]);
-    const dispatch = useAppDispatch();
-    const widthWorkspace = ((_a = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
-    const heightWorkspace = ((_b = document === null || document === void 0 ? void 0 : document.getElementById("workspace")) === null || _b === void 0 ? void 0 : _b.clientHeight) || 0;
-    const defaultFormatValue = (width, height, src, id) => ({
-        id: id || new Date().getTime(),
-        x: 0,
-        y: 0,
-        width,
-        height,
-        rotation: 0,
-        shape: name,
-        src,
-    });
-    const props = {
-        name: "file",
-        multiple: true,
-        maxCount: 1,
-        showUploadList: false,
-        onChange: (info) => __awaiter(void 0, void 0, void 0, function* () {
-            var _a;
-            const { status } = info.file;
-            if (status !== "uploading" && info.file.originFileObj) {
-                const file = info.file.originFileObj;
-                const img = new window.Image();
-                let srcFromResponse = "";
-                try {
-                    // ⬇️ IF ada custom action (upload ke server)
-                    if (action && responseMapping) {
-                        const res = yield action(file);
-                        const isSuccess = (res === null || res === void 0 ? void 0 : res[responseMapping.status]) === 200;
-                        if (isSuccess) {
-                            srcFromResponse =
-                                (_a = res === null || res === void 0 ? void 0 : res[responseMapping.data]) === null || _a === void 0 ? void 0 : _a[responseMapping.src];
-                            img.onload = () => {
-                                const scaleX = widthWorkspace / img.width;
-                                const scaleY = heightWorkspace / img.height;
-                                const scale = Math.min(1, scaleX, scaleY);
-                                const width = img.width * scale;
-                                const height = img.height * scale;
-                                if (isEdit) {
-                                    dispatch({
-                                        type: type === "component"
-                                            ? "board/updateComponent"
-                                            : "board/updateExtraComponent",
-                                        payload: Object.assign({}, defaultFormatValue(width, height, srcFromResponse, defaultValue.id)),
-                                    });
-                                    dispatch({
-                                        type: "panel/setSelectedComponent",
-                                        payload: Object.assign({}, defaultFormatValue(width, height, srcFromResponse, defaultValue.id)),
-                                    });
-                                    setDefaultSrc(srcFromResponse);
-                                }
-                                else {
-                                    dispatch({
-                                        type: type === "component"
-                                            ? "board/addComponent"
-                                            : "board/setExtraComponent",
-                                        payload: Object.assign({}, defaultFormatValue(width, height, srcFromResponse)),
-                                    });
-                                }
-                                dispatch({ type: "board/setFlagChange", payload: true });
-                                message.success(`${info.file.name} uploaded successfully.`);
-                            };
-                            // Set img src AFTER onload
-                            img.src = srcFromResponse;
-                        }
-                        else {
-                            message.error((res === null || res === void 0 ? void 0 : res[responseMapping.message]) || "Upload failed");
-                        }
-                    }
-                    // ⬇️ IF local upload
-                    else {
-                        img.onload = () => {
-                            const scaleX = widthWorkspace / img.width;
-                            const scaleY = heightWorkspace / img.height;
-                            const scale = Math.min(1, scaleX, scaleY);
-                            const width = img.width * scale;
-                            const height = img.height * scale;
-                            if (isEdit) {
-                                dispatch({
-                                    type: type === "component"
-                                        ? "board/updateComponent"
-                                        : "board/updateExtraComponent",
-                                    payload: Object.assign({}, defaultFormatValue(width, height, img.src, defaultValue.id)),
-                                });
-                                dispatch({
-                                    type: "panel/setSelectedComponent",
-                                    payload: Object.assign({}, defaultFormatValue(width, height, srcFromResponse, defaultValue.id)),
-                                });
-                                setDefaultSrc(img.src);
-                            }
-                            else {
-                                dispatch({
-                                    type: type === "component"
-                                        ? "board/addComponent"
-                                        : "board/setExtraComponent",
-                                    payload: Object.assign({}, defaultFormatValue(width, height, img.src)),
-                                });
-                            }
-                            dispatch({ type: "board/setFlagChange", payload: true });
-                            message.success(`${info.file.name} uploaded successfully.`);
-                        };
-                        // Set img src AFTER onload
-                        img.src = URL.createObjectURL(file);
-                    }
-                }
-                catch (e) {
-                    console.error("Upload error:", e);
-                    message.error("Upload failed, please try again.");
-                }
-            }
-        }),
-    };
-    const handleDelete = () => {
-        setDefaultSrc(null);
-    };
-    return (<>
-      {defaultSrc ? (<>
-          <div className="w-full flex flex-col items-center gap-2 max-h-[200px] overflow-y-auto">
-            <Image src={defaultSrc}/>
-          </div>
-          <Button type="primary" onClick={handleDelete}>
-            Edit
-          </Button>
-        </>) : (<Dragger {...props}>
-          <p className="ant-upload-drag-icon">
-            <InboxOutlined />
-          </p>
-          <p className="ant-upload-text">
-            Click or drag file to this area to upload
-          </p>
-          <p className="ant-upload-hint">
-            Support for a single or bulk upload. Strictly prohibited from
-            uploading company data or other banned files.
-          </p>
-        </Dragger>)}
-
-      <SectionShape />
-      <SectionLabel />
-    </>);
-};
-export default UploadTool;