@olenbetong/synergi-react 0.6.46 → 0.7.0

package/src/ValueToggle/index.tsx

@@ -5,71 +5,71 @@ import { forwardRef, useImperativeHandle, useRef, useState } from "react";
 let valueToggleId = 0;
 
 export type ValueToggleProps = {
-  className?: string;
-  onChange?: (value: string | number) => void;
-  value?: string | number;
-  defaultValue?: string | number;
-  id?: string;
-  options: Array<string | { value: string | number; label?: string }>;
-  style?: React.CSSProperties;
+	className?: string;
+	onChange?: (value: string | number) => void;
+	value?: string | number;
+	defaultValue?: string | number;
+	id?: string;
+	options: Array<string | { value: string | number; label?: string }>;
+	style?: React.CSSProperties;
 };
 
 function ValueToggleInner(
-  { className, onChange, defaultValue, options, value, ...other }: ValueToggleProps,
-  ref: React.ForwardedRef<{
-    focus: () => void;
-    blur: () => void;
-    value: string | number;
-  }>
+	{ className, onChange, defaultValue, options, value, ...other }: ValueToggleProps,
+	ref: React.ForwardedRef<{
+		focus: () => void;
+		blur: () => void;
+		value: string | number;
+	}>
 ) {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const [toggleName] = useState("obet-value-toggle-" + String(++valueToggleId));
-  const isControlled = value !== undefined;
+	const wrapperRef = useRef<HTMLDivElement>(null);
+	const [toggleName] = useState("obet-value-toggle-" + String(++valueToggleId));
+	const isControlled = value !== undefined;
 
-  useImperativeHandle(ref, () => {
-    const e = wrapperRef.current?.querySelector("input");
+	useImperativeHandle(ref, () => {
+		const e = wrapperRef.current?.querySelector("input");
 
-    return {
-      focus: () => e?.focus(),
-      blur: () => e?.blur(),
-      value: (e?.querySelector("input:checked") as HTMLInputElement).value,
-    };
-  });
+		return {
+			focus: () => e?.focus(),
+			blur: () => e?.blur(),
+			value: (e?.querySelector("input:checked") as HTMLInputElement).value,
+		};
+	});
 
-  return (
-    <fieldset className={className} {...other}>
-      <div className="ObValueToggle-root" ref={wrapperRef}>
-        {options.map((option) => {
-          const isObj = typeof option === "object";
-          const optValue = isObj ? option.value : option;
-          const props: React.HTMLProps<HTMLInputElement> = {
-            value: optValue,
-          };
+	return (
+		<fieldset className={className} {...other}>
+			<div className="ObValueToggle-root" ref={wrapperRef}>
+				{options.map((option) => {
+					const isObj = typeof option === "object";
+					const optValue = isObj ? option.value : option;
+					const props: React.HTMLProps<HTMLInputElement> = {
+						value: optValue,
+					};
 
-          if (isControlled) {
-            props.checked = value === optValue;
-          } else {
-            props.defaultChecked = defaultValue === optValue;
-          }
+					if (isControlled) {
+						props.checked = value === optValue;
+					} else {
+						props.defaultChecked = defaultValue === optValue;
+					}
 
-          if (typeof onChange === "function") {
-            props.onChange = () => onChange(optValue);
-          }
+					if (typeof onChange === "function") {
+						props.onChange = () => onChange(optValue);
+					}
 
-          if (isObj) {
-            Object.assign(props, option);
-          }
+					if (isObj) {
+						Object.assign(props, option);
+					}
 
-          return (
-            <label key={optValue} className="ObValueToggle-option">
-              <input type="radio" className="ObValueToggle-input" name={toggleName} {...props} />
-              <span className="ObValueToggle-label">{isObj ? option.label || optValue : optValue}</span>
-            </label>
-          );
-        })}
-      </div>
-    </fieldset>
-  );
+					return (
+						<label key={optValue} className="ObValueToggle-option">
+							<input type="radio" className="ObValueToggle-input" name={toggleName} {...props} />
+							<span className="ObValueToggle-label">{isObj ? option.label || optValue : optValue}</span>
+						</label>
+					);
+				})}
+			</div>
+		</fieldset>
+	);
 }
 
 export const ValueToggle = forwardRef(ValueToggleInner);

package/src/global.d.ts

@@ -1,2 +1,2 @@
 /// <reference path="@olenbetong/appframe-core" />
-/// <reference path="@olenbetong/appframe-data" />
+/// <reference path="@olenbetong/appframe-data" />

package/src/index.ts

@@ -3,16 +3,16 @@ export { ColorCard, CardColumn, CardDetail, CardLabel } from "./ColorCard/index.
 export { DateNavigator } from "./DateNavigator/index.js";
 export { Card, List as LinkedList, ListItem as LinkedListItem } from "./LinkedCardList/index.js";
 export {
-  BannerImage as PageBannerImage,
-  BannerImageProps,
-  PageBanner,
-  PageBannerProps,
-  Tab as PageBannerTab,
-  TabProps as PageBannerTabProps,
-  TabList as PageBannerTabList,
-  TabListProps as PageBannerTabListProps,
-  Title as PageBannerTitle,
-  TitleProps as PageBannerTitleProps,
+	BannerImage as PageBannerImage,
+	BannerImageProps,
+	PageBanner,
+	PageBannerProps,
+	Tab as PageBannerTab,
+	TabProps as PageBannerTabProps,
+	TabList as PageBannerTabList,
+	TabListProps as PageBannerTabListProps,
+	Title as PageBannerTitle,
+	TitleProps as PageBannerTitleProps,
 } from "./PageBanner/index.js";
 export { Portal } from "./Portal/index.js";
 export { ProgressBar } from "./ProgressBar/index.js";
@@ -22,4 +22,3 @@ export { SplitContainer, SplitContainerProps } from "./SplitContainer/index.js";
 
 export { useTranslation } from "./useTranslation/index.js";
 export { ValueToggle, ValueToggleProps } from "./ValueToggle/index.js";
-export { useDebounce, usePersistedSetting, useSearchParamState } from "@olenbetong/appframe-react";

package/src/styles/_mixins.scss

@@ -1,19 +1,19 @@
 @mixin btn-reset {
-  background: none;
-  border: 0;
-  color: inherit;
-  /* cursor: default; */
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  padding: 0;
-  -webkit-appearance: button; /* for input */
-  -webkit-user-select: none; /* for button */
-  -moz-user-select: none;
-  -ms-user-select: none;
+	background: none;
+	border: 0;
+	color: inherit;
+	/* cursor: default; */
+	font: inherit;
+	line-height: normal;
+	overflow: visible;
+	padding: 0;
+	-webkit-appearance: button; /* for input */
+	-webkit-user-select: none; /* for button */
+	-moz-user-select: none;
+	-ms-user-select: none;
 
-  &::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-  }
+	&::-moz-focus-inner {
+		border: 0;
+		padding: 0;
+	}
 }

package/src/useTranslation/index.ts

@@ -1,74 +1,74 @@
 import { useEffect, useRef, useState } from "react";
 
 async function translateText(text: string, target: string, apiKey: string) {
-  let url = `https://translation.googleapis.com/language/translate/v2?key=${apiKey}`;
-  let body = JSON.stringify({
-    q: text,
-    target,
-  });
+	let url = `https://translation.googleapis.com/language/translate/v2?key=${apiKey}`;
+	let body = JSON.stringify({
+		q: text,
+		target,
+	});
 
-  let options = {
-    body,
-    method: "POST",
-  };
+	let options = {
+		body,
+		method: "POST",
+	};
 
-  let result = await fetch(url, options);
-  let json = await result.json();
-  let { data } = json;
+	let result = await fetch(url, options);
+	let json = await result.json();
+	let { data } = json;
 
-  if (data && data.translations) {
-    let [translation] = data.translations;
+	if (data && data.translations) {
+		let [translation] = data.translations;
 
-    return {
-      from: translation.detectedSourceLanguage,
-      translation: translation.translatedText,
-    };
-  }
+		return {
+			from: translation.detectedSourceLanguage,
+			translation: translation.translatedText,
+		};
+	}
 
-  return false;
+	return false;
 }
 
 export function useTranslation(text: string, targetLanguage: string, apiKey: string) {
-  let [translation, setTranslation] = useState("");
-  let [error, setError] = useState<string | null>(null);
-  let [from, setSourceLang] = useState<string | null>(null);
-  let [isTranslating, setIsTranslating] = useState(false);
-  let textRef = useRef(text);
+	let [translation, setTranslation] = useState("");
+	let [error, setError] = useState<string | null>(null);
+	let [from, setSourceLang] = useState<string | null>(null);
+	let [isTranslating, setIsTranslating] = useState(false);
+	let textRef = useRef(text);
 
-  useEffect(() => {
-    textRef.current = text;
-    return () => {
-      setTranslation("");
-      setError(null);
-      setSourceLang(null);
-      setIsTranslating(false);
-    };
-  }, [apiKey, targetLanguage, text]);
+	useEffect(() => {
+		textRef.current = text;
+		return () => {
+			setTranslation("");
+			setError(null);
+			setSourceLang(null);
+			setIsTranslating(false);
+		};
+	}, [apiKey, targetLanguage, text]);
 
-  async function translate() {
-    setIsTranslating(true);
+	async function translate() {
+		setIsTranslating(true);
 
-    try {
-      let result = await translateText(text, targetLanguage, apiKey);
-      if (result && textRef.current === text) {
-        let { from, translation } = result;
-        setSourceLang(from);
-        setTranslation(translation);
-        setIsTranslating(false);
-      }
-    } catch (error) {
-      if (textRef.current === text) {
-        setError((error as Error).message);
-        setIsTranslating(false);
-      }
-    }
-  }
+		try {
+			let result = await translateText(text, targetLanguage, apiKey);
+			if (result && textRef.current === text) {
+				let { from, translation } = result;
+				setSourceLang(from);
+				setTranslation(translation);
+				setIsTranslating(false);
+			}
+		} catch (error) {
+			if (textRef.current === text) {
+				setError((error as Error).message);
+				setIsTranslating(false);
+			}
+		}
+	}
 
-  return {
-    error,
-    from,
-    isTranslating,
-    translation,
-    translate,
-  };
+	return {
+		error,
+		from,
+		isTranslating,
+		translation,
+		translate,
+	};
 }