@helpwave/hightide
Version:
helpwave's component and theming library
345 lines (332 loc) • 10.6 kB
JavaScript
// src/components/properties/TextProperty.tsx
import { Text } from "lucide-react";
import clsx4 from "clsx";
// src/hooks/useLanguage.tsx
import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
// src/hooks/useLocalStorage.tsx
import { useCallback, useEffect, useState } from "react";
// src/hooks/useLanguage.tsx
import { jsx } from "react/jsx-runtime";
var DEFAULT_LANGUAGE = "en";
var LanguageContext = createContext({ language: DEFAULT_LANGUAGE, setLanguage: (v) => v });
var useLanguage = () => useContext(LanguageContext);
// src/hooks/useTranslation.ts
var useTranslation = (defaults, translationOverwrite = {}) => {
const { language: languageProp, translation: overwrite } = translationOverwrite;
const { language: inferredLanguage } = useLanguage();
const usedLanguage = languageProp ?? inferredLanguage;
let defaultValues = defaults[usedLanguage];
if (overwrite && overwrite[usedLanguage]) {
defaultValues = { ...defaultValues, ...overwrite[usedLanguage] };
}
return defaultValues;
};
// src/components/user-input/Textarea.tsx
import { useState as useState4 } from "react";
import clsx from "clsx";
// src/hooks/useSaveDelay.ts
import { useEffect as useEffect3, useState as useState3 } from "react";
function useSaveDelay(setNotificationStatus, delay) {
const [updateTimer, setUpdateTimer] = useState3(void 0);
const [notificationTimer, setNotificationTimer] = useState3(void 0);
const restartTimer = (onSave) => {
clearTimeout(updateTimer);
setUpdateTimer(setTimeout(() => {
onSave();
setNotificationStatus(true);
clearTimeout(notificationTimer);
setNotificationTimer(setTimeout(() => {
setNotificationStatus(false);
clearTimeout(notificationTimer);
}, delay));
clearTimeout(updateTimer);
}, delay));
};
const clearUpdateTimer = (hasSaved = true) => {
clearTimeout(updateTimer);
if (hasSaved) {
setNotificationStatus(true);
clearTimeout(notificationTimer);
setNotificationTimer(setTimeout(() => {
setNotificationStatus(false);
clearTimeout(notificationTimer);
}, delay));
} else {
setNotificationStatus(false);
}
};
useEffect3(() => {
return () => {
clearTimeout(updateTimer);
clearTimeout(notificationTimer);
};
}, []);
return { restartTimer, clearUpdateTimer };
}
// src/util/noop.ts
var noop = () => void 0;
// src/components/user-input/Label.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var styleMapping = {
labelSmall: "textstyle-label-sm",
labelMedium: "textstyle-label-md",
labelBig: "textstyle-label-lg"
};
var Label = ({
children,
name,
labelType = "labelSmall",
...props
}) => {
return /* @__PURE__ */ jsx2("label", { ...props, children: children ? children : /* @__PURE__ */ jsx2("span", { className: styleMapping[labelType], children: name }) });
};
// src/components/user-input/Textarea.tsx
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
var Textarea = ({
label,
headline,
id,
resizable = false,
onChange = noop,
disclaimer,
onBlur = noop,
onEditCompleted = noop,
defaultStyle = true,
className,
...props
}) => {
const [hasFocus, setHasFocus] = useState4(false);
const { restartTimer, clearUpdateTimer } = useSaveDelay(() => void 0, 3e3);
const onEditCompletedWrapper = (text) => {
onEditCompleted(text);
clearUpdateTimer();
};
return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
label && /* @__PURE__ */ jsx3(Label, { ...label, htmlFor: id, className: clsx("mb-1", label.className), labelType: label.labelType ?? "labelSmall" }),
/* @__PURE__ */ jsxs("div", { className: `${clsx(" bg-surface text-on-surface focus-within:border-primary relative", { "shadow border-2 border-gray-300 hover:border-primary rounded-lg": defaultStyle })}`, children: [
headline && /* @__PURE__ */ jsx3("span", { className: "mx-3 mt-3 block text-gray-700 font-bold", children: headline }),
/* @__PURE__ */ jsx3(
"textarea",
{
id,
className: clsx("pt-0 px-3 border-transparent focus:border-transparent focus:ring-0 appearance-none border w-full leading-tight focus:outline-none", { "resize-none": !resizable, "h-32": defaultStyle, "mt-3": !headline }, className),
onChange: (event) => {
const value = event.target.value;
restartTimer(() => {
onEditCompletedWrapper(value);
});
onChange(value);
},
onFocus: () => {
setHasFocus(true);
},
onBlur: (event) => {
onBlur(event);
onEditCompletedWrapper(event.target.value);
setHasFocus(false);
},
...props
}
)
] }),
hasFocus && disclaimer && /* @__PURE__ */ jsx3("label", { className: "text-negative", children: disclaimer })
] });
};
// src/components/properties/PropertyBase.tsx
import { AlertTriangle } from "lucide-react";
import clsx3 from "clsx";
// src/components/Button.tsx
import clsx2 from "clsx";
import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
var ButtonSizePaddings = {
small: "btn-sm",
medium: "btn-md",
large: "btn-lg"
};
var TextButton = ({
children,
disabled = false,
color = "neutral",
size = "medium",
startIcon,
endIcon,
onClick,
className,
...restProps
}) => {
const colorClasses = {
negative: "bg-transparent text-button-text-negative-text",
neutral: "bg-transparent text-button-text-neutral-text"
}[color];
const iconColorClasses = {
negative: "text-button-text-negative-icon",
neutral: "text-button-text-neutral-icon"
}[color];
return /* @__PURE__ */ jsxs2(
"button",
{
onClick: disabled ? void 0 : onClick,
disabled: disabled || onClick === void 0,
className: clsx2(
className,
{
"text-disabled-text": disabled,
[clsx2(colorClasses, "hover:bg-button-text-hover-background rounded-full")]: !disabled
},
ButtonSizePaddings[size]
),
...restProps,
children: [
startIcon && /* @__PURE__ */ jsx4(
"span",
{
className: clsx2({
[iconColorClasses]: !disabled,
[`text-disabled-icon`]: disabled
}),
children: startIcon
}
),
children,
endIcon && /* @__PURE__ */ jsx4(
"span",
{
className: clsx2({
[iconColorClasses]: !disabled,
[`text-disabled-icon`]: disabled
}),
children: endIcon
}
)
]
}
);
};
// src/components/properties/PropertyBase.tsx
import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
var defaultPropertyBaseTranslation = {
en: {
remove: "Remove"
},
de: {
remove: "Entfernen"
}
};
var PropertyBase = ({
overwriteTranslation,
name,
input,
softRequired = false,
hasValue,
icon,
readOnly,
onRemove,
className = ""
}) => {
const translation = useTranslation(defaultPropertyBaseTranslation, overwriteTranslation);
const requiredAndNoValue = softRequired && !hasValue;
return /* @__PURE__ */ jsxs3("div", { className: clsx3("row gap-x-0 group", className), children: [
/* @__PURE__ */ jsxs3(
"div",
{
className: clsx3("row gap-x-2 !w-[200px] px-4 py-2 items-center rounded-l-xl border-2 border-r-0", {
"bg-gray-100 text-black group-hover:border-primary border-gray-400": !requiredAndNoValue,
"bg-warning text-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
}, className),
children: [
icon,
name
]
}
),
/* @__PURE__ */ jsxs3(
"div",
{
className: clsx3("row grow justify-between items-center rounded-r-xl border-2 border-l-0", {
"bg-white group-hover:border-primary border-gray-400": !requiredAndNoValue,
"bg-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
}, className),
children: [
input({ softRequired, hasValue }),
requiredAndNoValue && /* @__PURE__ */ jsx5("div", { className: "text-warning pr-4", children: /* @__PURE__ */ jsx5(AlertTriangle, { size: 24 }) }),
onRemove && /* @__PURE__ */ jsx5(
TextButton,
{
onClick: onRemove,
color: "negative",
className: clsx3("pr-4 items-center", { "!text-transparent": !hasValue || readOnly }),
disabled: !hasValue || readOnly,
children: translation.remove
}
)
]
}
)
] });
};
// src/components/properties/TextProperty.tsx
import { jsx as jsx6 } from "react/jsx-runtime";
var defaultTextPropertyTranslation = {
en: {
value: "Text"
},
de: {
value: "Text"
}
};
var TextProperty = ({
overwriteTranslation,
value,
readOnly,
onChange = noop,
onRemove = noop,
onEditComplete = noop,
...baseProps
}) => {
const translation = useTranslation(defaultTextPropertyTranslation, overwriteTranslation);
const hasValue = value !== void 0;
return /* @__PURE__ */ jsx6(
PropertyBase,
{
...baseProps,
onRemove,
hasValue,
icon: /* @__PURE__ */ jsx6(Text, { size: 16 }),
input: ({ softRequired }) => /* @__PURE__ */ jsx6(
"div",
{
className: clsx4("row grow pt-2 pb-1 px-4 cursor-pointer", { "text-warning": softRequired && !hasValue }),
children: /* @__PURE__ */ jsx6(
Textarea,
{
className: clsx4("!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !rounded-none", { "bg-surface-warning placeholder-warning": softRequired && !hasValue }),
rows: 5,
defaultStyle: false,
value: value ?? "",
readOnly,
placeholder: `${translation.value}...`,
onChange: (value2) => {
if (!value2) {
onRemove();
} else {
onChange(value2);
}
},
onEditCompleted: (value2) => {
if (!value2) {
onRemove();
} else {
onEditComplete(value2);
}
}
}
)
}
)
}
);
};
export {
TextProperty
};
//# sourceMappingURL=TextProperty.mjs.map