@helpwave/hightide
Version:
helpwave's component and theming library
240 lines (229 loc) • 7.81 kB
JavaScript
// src/components/SearchableList.tsx
import { useEffect as useEffect5, useMemo, useState as useState5 } from "react";
import { Search } from "lucide-react";
import clsx2 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/util/simpleSearch.ts
var MultiSearchWithMapping = (search, objects, mapping) => {
return objects.filter((object) => {
const mappedSearchKeywords = mapping(object).map((value) => value.toLowerCase().trim());
return !!mappedSearchKeywords.find((value) => value.includes(search.toLowerCase().trim()));
});
};
// src/components/user-input/Input.tsx
import {
useEffect as useEffect4,
useRef,
useState as useState4,
forwardRef
} 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/Input.tsx
import { jsx as jsx3, jsxs } from "react/jsx-runtime";
var ControlledInput = ({
id,
type = "text",
value,
label,
onChange = noop,
onChangeEvent = noop,
className = "",
onEditCompleted,
expanded = true,
onBlur,
containerClassName,
...restProps
}) => {
const {
restartTimer,
clearUpdateTimer
} = useSaveDelay(() => void 0, 3e3);
const ref = useRef(null);
useEffect4(() => {
if (restProps.autoFocus) {
ref.current?.focus();
}
}, [restProps.autoFocus]);
return /* @__PURE__ */ jsxs("div", { className: clsx({ "w-full": expanded }, containerClassName), children: [
label && /* @__PURE__ */ jsx3(Label, { ...label, htmlFor: id, className: clsx("mb-1", label.className) }),
/* @__PURE__ */ jsx3(
"input",
{
ref,
value,
id,
type,
className: clsx("block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary", className),
onBlur: (event) => {
if (onBlur) {
onBlur(event);
}
if (onEditCompleted) {
onEditCompleted(event.target.value, event);
clearUpdateTimer();
}
},
onChange: (e) => {
const value2 = e.target.value;
if (onEditCompleted) {
restartTimer(() => {
onEditCompleted(value2, e);
clearUpdateTimer();
});
}
onChange(value2, e);
onChangeEvent(e);
},
...restProps
}
)
] });
};
var FormInput = forwardRef(function FormInput2({
id,
labelText,
errorText,
className,
labelClassName,
errorClassName,
containerClassName,
required,
...restProps
}, ref) {
const input = /* @__PURE__ */ jsx3(
"input",
{
ref,
id,
...restProps,
className: clsx(
"block bg-surface text-on-surface px-3 py-2 rounded-md w-full border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary",
{
"focus:border-primary focus:ring-primary": !errorText,
"focus:border-negative focus:ring-negative text-negative": !!errorText
},
className
)
}
);
return /* @__PURE__ */ jsxs("div", { className: clsx("flex flex-col gap-y-1", containerClassName), children: [
labelText && /* @__PURE__ */ jsxs("label", { htmlFor: id, className: clsx("textstyle-label-md", labelClassName), children: [
labelText,
required && /* @__PURE__ */ jsx3("span", { className: "text-primary font-bold", children: "*" })
] }),
input,
errorText && /* @__PURE__ */ jsx3("label", { htmlFor: id, className: clsx("text-negative", errorClassName), children: errorText })
] });
});
// src/components/SearchableList.tsx
import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
var defaultSearchableListTranslation = {
en: {
search: "Search",
nothingFound: "Nothing found"
},
de: {
search: "Suche",
nothingFound: "Nichts gefunden"
}
};
var SearchableList = ({
overwriteTranslation,
list,
initialSearch = "",
searchMapping,
itemMapper,
className
}) => {
const translation = useTranslation(defaultSearchableListTranslation, overwriteTranslation);
const [search, setSearch] = useState5(initialSearch);
useEffect5(() => setSearch(initialSearch), [initialSearch]);
const filteredEntries = useMemo(() => MultiSearchWithMapping(search, list, searchMapping), [search, list, searchMapping]);
return /* @__PURE__ */ jsxs2("div", { className: clsx2("col gap-y-2", className), children: [
/* @__PURE__ */ jsxs2("div", { className: "row justify-between gap-x-2 items-center", children: [
/* @__PURE__ */ jsx4("div", { className: "flex-1", children: /* @__PURE__ */ jsx4(ControlledInput, { value: search, onChange: setSearch, placeholder: translation.search }) }),
/* @__PURE__ */ jsx4(Search, { size: 20 })
] }),
filteredEntries.length > 0 && /* @__PURE__ */ jsx4("div", { className: "col gap-y-1", children: filteredEntries.map(itemMapper) }),
!filteredEntries.length && /* @__PURE__ */ jsx4("div", { className: "row justify-center", children: translation.nothingFound })
] });
};
export {
SearchableList
};
//# sourceMappingURL=SearchableList.mjs.map