ublo-lib 1.31.42 → 1.31.44

package/es/common/components/editable-calendar/calendar-caption.js

@@ -2,149 +2,98 @@ import * as React from "react";
 import { useUbloContext } from "ublo/with-ublo";
 import Input from "dt-design-system/es/input";
 import css from "./calendar-caption.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const defaultColors = ["#234d5c", "#5F2EEA", "#0038FF", "#4ec3df", "#24C678", "#FFB648", "#F26464", "#FF005C", "#7C7B7B", "#222222"];
-export default function CalendarCaption({
-  presets,
-  setPresets
-}) {
-  const {
-    cmsMode
-  } = useUbloContext();
-  const initialColors = presets.colors ? Object.keys(presets.colors).map(key => presets.colors[key].backgroundColor) : defaultColors;
-  const [colors, setColors] = React.useState(initialColors);
-  const initialTextColors = presets.colors ? Object.keys(presets.colors).map(key => presets.colors[key].textColor) : [...new Array(colors.length)].fill("#ffffff");
-  const [textColors, setTextColors] = React.useState(initialTextColors);
-  const initialValues = presets.colors ? Object.keys(presets.colors).map(color => presets.colors[color].text) : [...new Array(colors.length)].fill("");
-  const [values, setValues] = React.useState(initialValues);
-  const isEditing = cmsMode === "editing";
-  React.useEffect(() => {
-    if (isEditing) {
-      const newPresets = {
-        colors: colors.reduce((acc, color, index) => {
-          return {
-            ...acc,
-            [index]: {
-              text: values[index],
-              backgroundColor: color,
-              textColor: textColors[index]
-            }
-          };
-        }, {})
-      };
-      setPresets(currentPresets => {
-        return {
-          ...currentPresets,
-          ...newPresets
-        };
-      });
-    }
-  }, [colors, isEditing, setPresets, textColors, values]);
-  return isEditing ? _jsx(Editor, {
-    colors: colors,
-    setColors: setColors,
-    values: values,
-    setValues: setValues,
-    textColors: textColors,
-    setTextColors: setTextColors
-  }) : _jsx(Caption, {
-    colors: colors,
-    values: values,
-    textColors: textColors
-  });
+const defaultColors = [
+    "#234d5c",
+    "#5F2EEA",
+    "#0038FF",
+    "#4ec3df",
+    "#24C678",
+    "#FFB648",
+    "#F26464",
+    "#FF005C",
+    "#7C7B7B",
+    "#222222",
+];
+export default function CalendarCaption({ presets, setPresets }) {
+    const { cmsMode } = useUbloContext();
+    const initialColors = presets.colors
+        ? Object.keys(presets.colors).map((key) => presets.colors[key].backgroundColor)
+        : defaultColors;
+    const [colors, setColors] = React.useState(initialColors);
+    const initialTextColors = presets.colors
+        ? Object.keys(presets.colors).map((key) => presets.colors[key].textColor)
+        : [...new Array(colors.length)].fill("#ffffff");
+    const [textColors, setTextColors] = React.useState(initialTextColors);
+    const initialValues = presets.colors
+        ? Object.keys(presets.colors).map((color) => presets.colors[color].text)
+        : [...new Array(colors.length)].fill("");
+    const [values, setValues] = React.useState(initialValues);
+    const isEditing = cmsMode === "editing";
+    React.useEffect(() => {
+        if (isEditing) {
+            const newPresets = {
+                colors: colors.reduce((acc, color, index) => {
+                    return Object.assign(Object.assign({}, acc), { [index]: {
+                            text: values[index],
+                            backgroundColor: color,
+                            textColor: textColors[index],
+                        } });
+                }, {}),
+            };
+            setPresets((currentPresets) => {
+                return Object.assign(Object.assign({}, currentPresets), newPresets);
+            });
+        }
+    }, [colors, isEditing, setPresets, textColors, values]);
+    return isEditing ? (<Editor colors={colors} setColors={setColors} values={values} setValues={setValues} textColors={textColors} setTextColors={setTextColors}/>) : (<Caption colors={colors} values={values} textColors={textColors}/>);
 }
-function Editor({
-  colors,
-  setColors,
-  values,
-  setValues,
-  textColors,
-  setTextColors
-}) {
-  return _jsxs("div", {
-    className: css.root,
-    children: [colors.map((color, index) => {
-      const updateValue = value => {
-        setValues(prev => {
-          const newValues = [...prev];
-          newValues[index] = value;
-          return newValues;
-        });
-      };
-      const updateColor = e => {
-        const color = e.target.value;
-        setColors(prev => {
-          const newColors = [...prev];
-          newColors[index] = color;
-          return newColors;
-        });
-      };
-      const updateTextColor = e => {
-        const color = e.target.value;
-        setTextColors(prev => {
-          const newTextColors = [...prev];
-          newTextColors[index] = color;
-          return newTextColors;
-        });
-      };
-      return _jsxs("div", {
-        className: css.row,
-        children: [_jsx(Input, {
-          className: css.color,
-          style: {
-            color: textColors[index],
-            backgroundColor: color
-          },
-          placeholder: "Horaires",
-          onValueChange: updateValue,
-          value: values[index],
-          compact: true
-        }), _jsx("input", {
-          className: css.colorPicker,
-          type: "color",
-          value: color,
-          onChange: updateColor
-        }), _jsx("input", {
-          className: css.textColorPicker,
-          type: "color",
-          value: textColors[index],
-          onChange: updateTextColor,
-          list: "textColors"
-        }), _jsx("span", {
-          className: css.textPickerLabel,
-          children: "A"
-        })]
-      }, `${color}-${index}`);
-    }), _jsxs("datalist", {
-      id: "textColors",
-      children: [_jsx("option", {
-        children: "#000000"
-      }), _jsx("option", {
-        children: "#ffffff"
-      })]
-    })]
-  });
+function Editor({ colors, setColors, values, setValues, textColors, setTextColors, }) {
+    return (<div className={css.root}>
+      {colors.map((color, index) => {
+            const updateValue = (value) => {
+                setValues((prev) => {
+                    const newValues = [...prev];
+                    newValues[index] = value;
+                    return newValues;
+                });
+            };
+            const updateColor = (e) => {
+                const color = e.target.value;
+                setColors((prev) => {
+                    const newColors = [...prev];
+                    newColors[index] = color;
+                    return newColors;
+                });
+            };
+            const updateTextColor = (e) => {
+                const color = e.target.value;
+                setTextColors((prev) => {
+                    const newTextColors = [...prev];
+                    newTextColors[index] = color;
+                    return newTextColors;
+                });
+            };
+            return (<div key={`${color}-${index}`} className={css.row}>
+            <Input className={css.color} style={{ color: textColors[index], backgroundColor: color }} placeholder="Horaires" onValueChange={updateValue} value={values[index]} compact/>
+            <input className={css.colorPicker} type="color" value={color} onChange={updateColor}/>
+            <input className={css.textColorPicker} type="color" value={textColors[index]} onChange={updateTextColor} list="textColors"/>
+            <span className={css.textPickerLabel}>A</span>
+          </div>);
+        })}
+      <datalist id="textColors">
+        <option>#000000</option>
+        <option>#ffffff</option>
+      </datalist>
+    </div>);
+}
+function Caption({ colors, values, textColors }) {
+    return (<div className={css.root}>
+      {colors.map((color, index) => {
+            return (<div key={`${color}-${index}`} className={css.row}>
+            <div className={css.color} style={{ color: textColors[index], backgroundColor: color }}>
+              {values[index]}
+            </div>
+          </div>);
+        })}
+    </div>);
 }
-function Caption({
-  colors,
-  values,
-  textColors
-}) {
-  return _jsx("div", {
-    className: css.root,
-    children: colors.map((color, index) => {
-      return _jsx("div", {
-        className: css.row,
-        children: _jsx("div", {
-          className: css.color,
-          style: {
-            color: textColors[index],
-            backgroundColor: color
-          },
-          children: values[index]
-        })
-      }, `${color}-${index}`);
-    })
-  });
-}

package/es/common/components/editable-calendar/calendar-date.d.ts

@@ -0,0 +1,12 @@
+export default function CalendarDate({ date, month, year, minDate, presets, selecting, setSelecting, hoveredDates, setHoveredDates, }: {
+    date: any;
+    month: any;
+    year: any;
+    minDate: any;
+    presets: any;
+    selecting: any;
+    setSelecting: any;
+    hoveredDates: any;
+    setHoveredDates: any;
+}): React.JSX.Element;
+import * as React from "react";

package/es/common/components/editable-calendar/calendar-date.js

@@ -5,82 +5,67 @@ import Tooltip from "dt-design-system/es/tooltip";
 import * as Ripple from "dt-design-system/es/ripple";
 import * as Utils from "./utils";
 import css from "./calendar-date.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function CalendarDate({
-  date,
-  month,
-  year,
-  minDate,
-  presets,
-  selecting,
-  setSelecting,
-  hoveredDates,
-  setHoveredDates
-}) {
-  const {
-    cmsMode
-  } = useUbloContext();
-  const {
-    colors,
-    dates = {}
-  } = presets;
-  const isEditing = cmsMode === "editing";
-  const dateString = date.join("-");
-  const _date = new Date(dateString);
-  _date.setHours(0, 0, 0, 0);
-  const datesKeys = Object.keys(dates);
-  const isInPresets = datesKeys.includes(dateString);
-  const dateStyles = isInPresets ? {
-    color: colors[dates[dateString]].textColor,
-    backgroundColor: colors[dates[dateString]].backgroundColor
-  } : undefined;
-  const dateTooltip = isInPresets && !isEditing ? colors[dates[dateString]].text : undefined;
-  const isToday = Utils.isSameDay(_date);
-  const inMonth = month && year && Utils.isSameMonth(_date, new Date([Utils.zeroPad(year, 2), Utils.zeroPad(month, 2), "01"].join("-")));
-  const isDisabled = minDate && _date < minDate;
-  const createRipple = e => {
-    Ripple.create(e);
-  };
-  const startSelecting = e => {
-    if (isDisabled) return;
-    createRipple(e);
-    if (!isEditing) return;
-    setSelecting(true);
-    setHoveredDates([_date]);
-  };
-  const stopSelecting = () => {
-    if (!isEditing) return;
-    setSelecting(false);
-  };
-  const computeSelection = () => {
-    if (isDisabled || !isEditing || !selecting) return;
-    let startDate = hoveredDates[0];
-    const endDate = _date;
-    const isBefore = startDate.getTime() > endDate.getTime();
-    if (isBefore) {
-      startDate = hoveredDates[hoveredDates.length - 1];
-    }
-    const dates = Utils.getDateInterval(startDate, endDate, isBefore);
-    setHoveredDates(dates);
-  };
-  const classes = classnames(css.date, {
-    [css.dateToday]: isToday,
-    [css.dateNotInMonth]: !inMonth,
-    [css.dateDisabled]: isDisabled,
-    [css.dateHovered]: !!hoveredDates.find(item => {
-      return item.getTime() === _date.getTime();
-    })
-  });
-  return _jsx(Tooltip, {
-    content: dateTooltip,
-    children: _jsx("button", {
-      className: classes,
-      tabIndex: isDisabled ? -1 : 0,
-      onMouseDown: startSelecting,
-      onMouseEnter: computeSelection,
-      onMouseUp: stopSelecting,
-      style: dateStyles,
-      children: _date.getDate()
-    })
-  });
-}
+export default function CalendarDate({ date, month, year, minDate, presets, selecting, setSelecting, hoveredDates, setHoveredDates, }) {
+    const { cmsMode } = useUbloContext();
+    const { colors, dates = {} } = presets;
+    const isEditing = cmsMode === "editing";
+    const dateString = date.join("-");
+    const _date = new Date(dateString);
+    _date.setHours(0, 0, 0, 0);
+    const datesKeys = Object.keys(dates);
+    const isInPresets = datesKeys.includes(dateString);
+    const dateStyles = isInPresets
+        ? {
+            color: colors[dates[dateString]].textColor,
+            backgroundColor: colors[dates[dateString]].backgroundColor,
+        }
+        : undefined;
+    const dateTooltip = isInPresets && !isEditing ? colors[dates[dateString]].text : undefined;
+    const isToday = Utils.isSameDay(_date);
+    const inMonth = month &&
+        year &&
+        Utils.isSameMonth(_date, new Date([Utils.zeroPad(year, 2), Utils.zeroPad(month, 2), "01"].join("-")));
+    const isDisabled = minDate && _date < minDate;
+    const createRipple = (e) => {
+        Ripple.create(e);
+    };
+    const startSelecting = (e) => {
+        if (isDisabled)
+            return;
+        createRipple(e);
+        if (!isEditing)
+            return;
+        setSelecting(true);
+        setHoveredDates([_date]);
+    };
+    const stopSelecting = () => {
+        if (!isEditing)
+            return;
+        setSelecting(false);
+    };
+    const computeSelection = () => {
+        if (isDisabled || !isEditing || !selecting)
+            return;
+        let startDate = hoveredDates[0];
+        const endDate = _date;
+        const isBefore = startDate.getTime() > endDate.getTime();
+        if (isBefore) {
+            startDate = hoveredDates[hoveredDates.length - 1];
+        }
+        const dates = Utils.getDateInterval(startDate, endDate, isBefore);
+        setHoveredDates(dates);
+    };
+    const classes = classnames(css.date, {
+        [css.dateToday]: isToday,
+        [css.dateNotInMonth]: !inMonth,
+        [css.dateDisabled]: isDisabled,
+        [css.dateHovered]: !!hoveredDates.find((item) => {
+            return item.getTime() === _date.getTime();
+        }),
+    });
+    return (<Tooltip content={dateTooltip}>
+      <button className={classes} tabIndex={isDisabled ? -1 : 0} onMouseDown={startSelecting} onMouseEnter={computeSelection} onMouseUp={stopSelecting} style={dateStyles}>
+        {_date.getDate()}
+      </button>
+    </Tooltip>);
+}

package/es/common/components/editable-calendar/calendar-editor.d.ts

@@ -0,0 +1,7 @@
+export default function CalendarEditor({ presets, setPresets, hoveredDates, closeEditor, }: {
+    presets: any;
+    setPresets: any;
+    hoveredDates: any;
+    closeEditor: any;
+}): React.JSX.Element;
+import * as React from "react";

package/es/common/components/editable-calendar/calendar-editor.js

@@ -3,87 +3,53 @@ import Button from "dt-design-system/es/button";
 import * as Icons from "dt-design-system/es/icons";
 import css from "./calendar-editor.module.css";
 import * as Utils from "./utils";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function CalendarEditor({
-  presets,
-  setPresets,
-  hoveredDates,
-  closeEditor
-}) {
-  const {
-    colors,
-    dates = {}
-  } = presets;
-  const formatedHoveredDates = hoveredDates.map(date => {
-    return Utils.formatDate(date);
-  });
-  const updateDates = colorIndex => () => {
-    const newDates = formatedHoveredDates.reduce((acc, date) => {
-      if (!colorIndex) return acc;
-      return {
-        ...acc,
-        [date]: colorIndex
-      };
-    }, {});
-    const newPresets = {
-      dates: {
-        ...dates,
-        ...newDates
-      }
-    };
-    if (!colorIndex) {
-      for (const date of formatedHoveredDates) {
-        delete newPresets.dates[date];
-      }
-    }
-    Object.keys(dates).forEach(key => {
-      const now = new Date();
-      const date = new Date(key);
-      if (date < now) {
-        delete newPresets.dates[key];
-      }
-    });
-    setPresets(currentPresets => {
-      return {
-        ...currentPresets,
-        ...newPresets
-      };
+export default function CalendarEditor({ presets, setPresets, hoveredDates, closeEditor, }) {
+    const { colors, dates = {} } = presets;
+    const formatedHoveredDates = hoveredDates.map((date) => {
+        return Utils.formatDate(date);
     });
-    closeEditor();
-  };
-  return _jsxs("div", {
-    className: css.editor,
-    children: [_jsx(Button, {
-      variant: "transparent",
-      className: css.close,
-      onClick: closeEditor,
-      children: _jsx(Icons.Cross, {})
-    }), _jsxs("div", {
-      className: css.inner,
-      children: [_jsx(Button, {
-        variant: "transparent",
-        className: css.cleanup,
-        onClick: updateDates(),
-        children: "Aucun"
-      }), Object.keys(colors).map(key => {
-        const {
-          text,
-          backgroundColor,
-          textColor
-        } = colors[key];
-        if (!text) return null;
-        return _jsx(Button, {
-          variant: "secondary",
-          className: css.color,
-          style: {
-            color: textColor,
-            backgroundColor
-          },
-          onClick: updateDates(key),
-          children: text
-        }, key);
-      })]
-    })]
-  });
-}
+    const updateDates = (colorIndex) => () => {
+        const newDates = formatedHoveredDates.reduce((acc, date) => {
+            if (!colorIndex)
+                return acc;
+            return Object.assign(Object.assign({}, acc), { [date]: colorIndex });
+        }, {});
+        const newPresets = {
+            dates: Object.assign(Object.assign({}, dates), newDates),
+        };
+        if (!colorIndex) {
+            for (const date of formatedHoveredDates) {
+                delete newPresets.dates[date];
+            }
+        }
+        Object.keys(dates).forEach((key) => {
+            const now = new Date();
+            const date = new Date(key);
+            if (date < now) {
+                delete newPresets.dates[key];
+            }
+        });
+        setPresets((currentPresets) => {
+            return Object.assign(Object.assign({}, currentPresets), newPresets);
+        });
+        closeEditor();
+    };
+    return (<div className={css.editor}>
+      <Button variant="transparent" className={css.close} onClick={closeEditor}>
+        <Icons.Cross />
+      </Button>
+      <div className={css.inner}>
+        <Button variant="transparent" className={css.cleanup} onClick={updateDates()}>
+          Aucun
+        </Button>
+        {Object.keys(colors).map((key) => {
+            const { text, backgroundColor, textColor } = colors[key];
+            if (!text)
+                return null;
+            return (<Button key={key} variant="secondary" className={css.color} style={{ color: textColor, backgroundColor }} onClick={updateDates(key)}>
+              {text}
+            </Button>);
+        })}
+      </div>
+    </div>);
+}

package/es/common/components/editable-calendar/calendar-header.d.ts

@@ -0,0 +1,8 @@
+export default function Header({ goToPreviousMonth, goToNextMonth, monthName, year, pastMonthDisabled, }: {
+    goToPreviousMonth: any;
+    goToNextMonth: any;
+    monthName: any;
+    year: any;
+    pastMonthDisabled: any;
+}): React.JSX.Element;
+import * as React from "react";

package/es/common/components/editable-calendar/calendar-header.js

@@ -2,29 +2,16 @@ import * as React from "react";
 import Button from "dt-design-system/es/button";
 import * as Icons from "dt-design-system/es/icons";
 import css from "./calendar-header.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function Header({
-  goToPreviousMonth,
-  goToNextMonth,
-  monthName,
-  year,
-  pastMonthDisabled
-}) {
-  return _jsxs("div", {
-    className: css.header,
-    children: [_jsx(Button, {
-      className: css.control,
-      onClick: goToPreviousMonth,
-      disabled: !!pastMonthDisabled,
-      children: _jsx(Icons.ChevronLeft, {})
-    }), _jsxs("div", {
-      className: css.title,
-      children: [monthName, " ", year]
-    }), _jsx(Button, {
-      className: css.control,
-      onClick: goToNextMonth,
-      children: _jsx(Icons.ChevronRight, {})
-    })]
-  });
-}
+export default function Header({ goToPreviousMonth, goToNextMonth, monthName, year, pastMonthDisabled, }) {
+    return (<div className={css.header}>
+      <Button className={css.control} onClick={goToPreviousMonth} disabled={!!pastMonthDisabled}>
+        <Icons.ChevronLeft />
+      </Button>
+      <div className={css.title}>
+        {monthName} {year}
+      </div>
+      <Button className={css.control} onClick={goToNextMonth}>
+        <Icons.ChevronRight />
+      </Button>
+    </div>);
+}

package/es/common/components/editable-calendar/calendar.d.ts

@@ -0,0 +1,6 @@
+export default function Calendar({ lang, format, className }: {
+    lang?: string;
+    format: any;
+    className: any;
+}): React.JSX.Element;
+import * as React from "react";