@vonaffenfels/slate-editor 1.1.36 → 1.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.1.36",
+    "version": "1.1.37",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "c55640e4184996f5503928a6e1f990c3b4420a52",
+    "gitHead": "23bd1926bceee0ce73a5d25f021c544ead009f77",
     "publishConfig": {
         "access": "public"
     }

package/scss/sidebarEditor.scss

@@ -28,6 +28,7 @@
 
     input[type="text"],
     input[type="time"],
+    input[type="date"],
     input[type="number"],
     input[type="color"],
     input[type="datetime-local"],

package/src/Nodes/Storybook.js

@@ -144,6 +144,9 @@ const StorybookNodeComponent = ({
                     title="Klicken, um das Element zu konfigurieren"
                     onClick={onEditClick}>
                     <div className="absolute right-0 top-0 m-2">
+                        <span className="mr-2">
+                            {[element?.attributes?.visibleFromDate, element?.attributes?.visibleToDate].filter(Boolean).map((date) => new Date(date).toLocaleString?.()).join(" - ")}
+                        </span>
                         <FontAwesomeIcon
                             icon={faDesktop}
                             color={element?.attributes?.hideOnDesktop ? "lightgray" : "black"}

package/src/Nodes/StorybookDisplay.js

@@ -36,6 +36,16 @@ export const StorybookDisplay = (props) => {
         };
     }, [elRef.current]);
 
+    let currentDate = new Date();
+
+    if (!isEditor && element?.attributes?.visibleFromDate && new Date(element?.attributes?.visibleFromDate) > currentDate) {
+        return;
+    }
+
+    if (!isEditor && element?.attributes?.visibleToDate && new Date(element?.attributes?.visibleToDate) < currentDate) {
+        return;
+    }
+
     if (element.isEmpty || !element.block) {
         return <EmptyBlock {...element.attributes} />;
     }

package/src/SidebarEditor/Fields/DateTime.js

@@ -0,0 +1,55 @@
+import classNames from "classnames";
+
+export const DateTime = ({
+    value,
+    onChange,
+    className,
+    inline,
+    ...props
+}) => {
+    // Separate date and time values
+    const dateValue = value ? value.split("T")[0] : "";
+    const timeValue = value ? value.split("T")[1] : "";
+
+    // Handle changes for date and time inputs
+    const handleDateChange = (e) => {
+        const newDate = e.target.value;
+        const newDateTime = `${newDate}T${timeValue || "00:00"}`;
+        onChange(newDateTime);
+    };
+
+    const handleTimeChange = (e) => {
+        const newTime = e.target.value;
+        const newDateTime = `${dateValue || "1970-01-01"}T${newTime}`;
+        onChange(newDateTime);
+    };
+
+    return (
+        <div className={classNames(className, "grid gap-2", {
+            "grid-cols-2": inline,
+            "grid-cols-1": !inline,
+        })}>
+            {/* Date input */}
+            <input
+                type="date"
+                className="w-full"
+                value={dateValue}
+                onChange={handleDateChange}
+                {...props}
+            />
+
+            {/* Time input */}
+            <input
+                type="time"
+                className="w-full"
+                value={timeValue}
+                onChange={handleTimeChange}
+                {...props}
+            />
+
+            {!!value && (
+                <button className="button button--tertiary" onClick={() => onChange(undefined)}>Zurücksetzen</button>
+            )}
+        </div>
+    );
+};

package/src/SidebarEditor.js

@@ -9,6 +9,7 @@ import {
     CollapsableMenu, CollapsableMenuItem,
 } from "./CollapsableMenu/CollapsableMenu";
 import {Switch} from "./SidebarEditor/Fields/Switch";
+import {DateTime} from "./SidebarEditor/Fields/DateTime";
 
 const SidebarEditor = ({
     sdk,
@@ -379,7 +380,7 @@ const SidebarEditor = ({
                                                     hinzufügen</CollapsableMenuItem>
                                                 <CollapsableMenuItem onClick={handleInfoClick}>Info</CollapsableMenuItem>
                                                 <div className="px-4 pb-2 pt-1">
-                                                    <b className="mb-1 block text-sm">Sichtbar auf:</b>
+                                                    <b className="mb-1 block text-sm">Sichtbarkeit</b>
                                                     <Switch
                                                         value={!storybookElement.attributes.hideOnDesktop}
                                                         label="Desktop"
@@ -395,6 +396,10 @@ const SidebarEditor = ({
                                                         label="Smartphone"
                                                         className="mb-2"
                                                         onClick={() => handleFieldValueChange("hideOnSmartphone", !storybookElement.attributes.hideOnSmartphone)}/>
+                                                    <label className="mb-1 block">Sichtbar von</label>
+                                                    <DateTime className="mb-2" value={storybookElement.attributes.visibleFromDate} onChange={v => handleFieldValueChange("visibleFromDate", v)} />
+                                                    <label className="mb-1 block">Sichtbar bis</label>
+                                                    <DateTime className="mb-2" value={storybookElement.attributes.visibleToDate} onChange={v => handleFieldValueChange("visibleToDate", v)} />
                                                 </div>
                                             </CollapsableMenu>
                                         </div>