website: playground updates

gpbl · Dec 30, 2024 · 6477c20 · 6477c20
1 parent a06052e
commit 6477c20
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/website/docs/docs/customization.mdx b/website/docs/docs/customization.mdx
@@ -126,14 +126,16 @@ To display the column with week numbers, use the `showWeekNumber` prop.
 
 ### Handling Week Numbers Click
 
-To handle clicks on the week numbers, you can set a custom `WeekNumber` [component](../guides/custom-components.mdx):
+To handle clicks on the week numbers, you can set the `WeekNumber` [custom component](../guides/custom-components.mdx):
 
 ```tsx
 <DayPicker
   showWeekNumber
   components={{
-    weekNumber: ({ weekNumber }) => (
-      <button onClick={() => alert(`Week ${weekNumber}`)}>{weekNumber}</button>
+    WeekNumber: (props) => (
+      <button onClick={() => alert(`Week ${props.weekNumber}`)}>
+        {props.weekNumber}
+      </button>
     )
   }}
 />

diff --git a/website/src/components/Playground/index.tsx b/website/src/components/Playground/index.tsx
@@ -67,8 +67,9 @@ export function Playground() {
   let formattedProps = `<DayPicker${toJSX({
     ...props,
     locale: undefined,
+    month: undefined,
     dir: calendar === "Persian" && props.dir === "rtl" ? undefined : props.dir
-  })} \n/>`;
+  })} />`;
 
   if (calendar === "Persian") {
     formattedProps =
@@ -221,18 +222,20 @@ export function Playground() {
                 min={1}
                 max={12}
                 size={4}
-                value={props.numberOfMonths}
+                value={props.numberOfMonths ?? ""}
                 name="numberOfMonths"
-                onChange={(e) =>
+                onChange={(e) => {
+                  const value = e.target.value;
                   setProps({
                     ...props,
-                    numberOfMonths: Number(e.target.value)
-                  })
-                }
+                    numberOfMonths:
+                      value === "" ? undefined : Math.max(1, Number(value))
+                  });
+                }}
               />
             </label>
 
-            {props.numberOfMonths && props.numberOfMonths > 1 && (
+            {props.numberOfMonths !== undefined && props.numberOfMonths > 1 && (
               <label>
                 <input
                   type="checkbox"
@@ -248,7 +251,7 @@ export function Playground() {
                 Reverse Months
               </label>
             )}
-            {props.numberOfMonths && props.numberOfMonths > 1 && (
+            {props.numberOfMonths !== undefined && props.numberOfMonths > 1 && (
               <label>
                 <input
                   type="checkbox"

diff --git a/website/src/components/Playground/toJSX.ts b/website/src/components/Playground/toJSX.ts
@@ -21,7 +21,7 @@ export function toJSX(props: Partial<DayPickerProps>) {
               : value
                 ? ""
                 : `x={${JSON.stringify(value)}}`;
-        return `\n  ${key}${valueAsString}`;
+        return ` ${key}${valueAsString}`;
       })
       .join("")
   );