Adding I18N feature on controls

Author: sim51

project/packages/core/src/components/controls/FullScreenControl.tsx

@@ -4,6 +4,8 @@ import { ReactComponent as EnterIcon } from "../../assets/icons/expand-solid.svg
 import { ReactComponent as ExitIcon } from "../../assets/icons/compress-solid.svg";
 import { useFullScreen } from "../../hooks/useFullScreen";
 
+type FullScreenLabelKeys = "enter" | "exit";
+
 /**
  * Properties for `FullScreenControl` component.
  */
@@ -35,6 +37,12 @@ export interface FullScreenControlProps {
    * ```
    */
   children?: [JSX.Element, JSX.Element];
+
+  /**
+   * Map of the labels we use in the component.
+   * This is usefull for I18N
+   */
+  labels?: { [Key in FullScreenLabelKeys]?: string };
 }
 
 /**
@@ -56,6 +64,7 @@ export const FullScreenControl: React.FC<FullScreenControlProps> = ({
   className,
   style,
   children,
+  labels = {},
 }: FullScreenControlProps) => {
   // Get Sigma
   const { isFullScreen, toggle } = useFullScreen();
@@ -71,7 +80,10 @@ export const FullScreenControl: React.FC<FullScreenControlProps> = ({
 
   return (
     <div {...htmlProps}>
-      <button onClick={toggle} title={isFullScreen ? "Exit fullscreen" : "Enter fullscreen"}>
+      <button
+        onClick={toggle}
+        title={isFullScreen ? labels["exit"] || "Exit fullscreen" : labels["enter"] || "Enter fullscreen"}
+      >
         {children && !isFullScreen && children[0]}
         {children && isFullScreen && children[1]}
         {!children && !isFullScreen && <EnterIcon style={{ width: "1em" }} />}

project/packages/core/src/components/controls/SearchControl.tsx

@@ -6,6 +6,8 @@ import { useSigma } from "../../hooks/useSigma";
 import { useCamera } from "../../hooks/useCamera";
 import { useRegisterEvents } from "../../hooks/useRegisterEvents";
 
+type SearchLabelKeys = "text" | "placeholder";
+
 /**
  * Properties for `SearchControl` component
  */
@@ -24,6 +26,12 @@ export interface SearchControlProps {
    * HTML CSS style
    */
   style?: CSSProperties;
+
+  /**
+   * Map of the labels we use in the component.
+   * This is usefull for I18N
+   */
+  labels?: { [Key in SearchLabelKeys]?: string };
 }
 
 /**
@@ -42,7 +50,12 @@ export interface SearchControlProps {
  *
  * @category Component
  */
-export const SearchControl: React.FC<SearchControlProps> = ({ id, className, style }: SearchControlProps) => {
+export const SearchControl: React.FC<SearchControlProps> = ({
+  id,
+  className,
+  style,
+  labels = {},
+}: SearchControlProps) => {
   // Get sigma
   const sigma = useSigma();
   // Get event hook
@@ -134,12 +147,12 @@ export const SearchControl: React.FC<SearchControlProps> = ({ id, className, sty
   return (
     <div {...htmlProps}>
       <label htmlFor={inputId} style={{ display: "none" }}>
-        Search a node
+        {labels["text"] || "Search a node"}
       </label>
       <input
         id={inputId}
         type="text"
-        placeholder="Search..."
+        placeholder={labels["placeholder"] || "Search..."}
         list={`${inputId}-datalist`}
         value={search}
         onChange={onInputChange}

project/packages/core/src/components/controls/ZoomControl.tsx

@@ -5,6 +5,8 @@ import { ReactComponent as ZoomOutIcon } from "../../assets/icons/minus-solid.sv
 import { ReactComponent as ZoomResetIcon } from "../../assets/icons/dot-circle-regular.svg";
 import { useCamera } from "../../hooks/useCamera";
 
+type ZoomLabelKeys = "zoomIn" | "zoomOut" | "reset";
+
 /**
  * Properties for `ZoomControl` component
  */
@@ -23,6 +25,7 @@ export interface ZoomControlProps {
    * Number of ms for the zoom animation (default is 200ms)
    */
   animationDuration?: number;
+
   /**
    * It's possible to customize the button, by passing to JSX Element.
    * First one is for the "zoom in", second for "zoom out" and third for "view whole graph".
@@ -36,6 +39,12 @@ export interface ZoomControlProps {
    * ```
    */
   children?: [JSX.Element, JSX.Element, JSX.Element];
+
+  /**
+   * Map of the labels we use in the component.
+   * This is usefull for I18N
+   */
+  labels?: { [Key in ZoomLabelKeys]?: string };
 }
 
 /**
@@ -60,6 +69,7 @@ export const ZoomControl: React.FC<ZoomControlProps> = ({
   style,
   animationDuration = 200,
   children,
+  labels = {},
 }: ZoomControlProps) => {
   const { zoomIn, zoomOut, reset } = useCamera({ duration: animationDuration, factor: 1.5 });
 
@@ -72,17 +82,17 @@ export const ZoomControl: React.FC<ZoomControlProps> = ({
   return (
     <>
       <div {...htmlProps}>
-        <button onClick={() => zoomIn()} title="Zoom In">
+        <button onClick={() => zoomIn()} title={labels["zoomIn"] || "Zoom In"}>
           {children ? children[0] : <ZoomInIcon style={{ width: "1em" }} />}
         </button>
       </div>
       <div {...htmlProps}>
-        <button onClick={() => zoomOut()} title="Zoom Out">
+        <button onClick={() => zoomOut()} title={labels["zoomOut"] || "Zoom Out"}>
           {children ? children[1] : <ZoomOutIcon style={{ width: "1em" }} />}
         </button>
       </div>
       <div {...htmlProps}>
-        <button onClick={() => reset()} title="See whole graph">
+        <button onClick={() => reset()} title={labels["reset"] || "See whole graph"}>
           {children ? children[2] : <ZoomResetIcon style={{ width: "1em" }} />}
         </button>
       </div>

project/packages/examples/src/routing.tsx

@@ -5,7 +5,7 @@ import { HomeView } from "./views/home";
 import { CompleteView } from "./views/complete";
 import { EventsView } from "./views/events";
 import { MultipleView } from "./views/multiple";
-import { CustomButtonsView } from "./views/custom-buttons";
+import { CustomRenderView } from "./views/custom-render";
 import { MultiDirectedGraphView } from "./views/multidirectedgraph";
 import { ExternalView } from "./views/external";
 
@@ -16,7 +16,7 @@ export const Routing: FC = () => {
       <Route path="/complete" element={<CompleteView />} />
       <Route path="/events" element={<EventsView />} />
       <Route path="/multiple" element={<MultipleView />} />
-      <Route path="/custom-buttons" element={<CustomButtonsView />} />
+      <Route path="/custom-render" element={<CustomRenderView />} />
       <Route path="/multidirectedgraph" element={<MultiDirectedGraphView />} />
       <Route path="/external" element={<ExternalView />} />
     </Routes>

…es/examples/src/views/custom-buttons.tsx …ges/examples/src/views/custom-render.tsxproject/packages/examples/src/views/custom-buttons.tsx renamed to project/packages/examples/src/views/custom-render.tsx project/packages/examples/src/views/custom-buttons.tsx renamed to project/packages/examples/src/views/custom-render.tsx

@@ -14,23 +14,23 @@ import { SigmaContainer, ControlsContainer, ZoomControl, FullScreenControl } fro
 import { LayoutForceAtlas2Control } from "@react-sigma/layout-forceatlas2";
 import { SampleGraph } from "../common/SampleGraph";
 
-export const CustomButtonsView: FC = () => {
+export const CustomRenderView: FC = () => {
   const [searchParams] = useSearchParams();
   const faTime = Number.parseInt(searchParams.get("faTime") || "2000");
   return (
     <SigmaContainer settings={{ renderLabels: false }}>
       <SampleGraph />
       <ControlsContainer position={"bottom-right"}>
-        <ZoomControl>
+        <ZoomControl labels={{ zoomIn: "PLUS", zoomOut: "MINUS", reset: "RESET" }}>
           <AiOutlineZoomIn />
           <AiOutlineZoomOut />
           <MdFilterCenterFocus />
         </ZoomControl>
-        <FullScreenControl>
+        <FullScreenControl labels={{ enter: "ENTER", exit: "EXIT" }}>
           <AiOutlineFullscreen />
           <AiOutlineFullscreenExit />
         </FullScreenControl>
-        <LayoutForceAtlas2Control autoRunFor={faTime}>
+        <LayoutForceAtlas2Control labels={{ stop: "STOP", start: "START" }} autoRunFor={faTime}>
           <AiFillPlayCircle />
           <AiFillPauseCircle />
         </LayoutForceAtlas2Control>

project/packages/examples/src/views/home.tsx

@@ -25,10 +25,10 @@ export const HomeView: FC = () => {
           Display multiple independant graph on the same page
         </li>
         <li>
-          <Link to="/custom-buttons" title="Custom Buttons">
-            Custom Buttons
+          <Link to="/custom-render" title="Custom render">
+            Custom Render
           </Link>{" "}
-          Make your own style by overring the native display of controllers
+          Make your own style by overring the native display and labels of controllers
         </li>
         <li>
           <Link to="/multidirectedgraph" title="MultiDirectedGraph">

project/packages/examples/test/e2e/config.ts

@@ -15,8 +15,8 @@ export const tests: Tests = [
   { name: "complete", url: "http://localhost:3000/complete?seed=foo&faTime=-1", waitFor: 200, failureThreshold: 0.001 },
   { name: "multiple", url: "http://localhost:3000/multiple?seed=foo&faTime=-1", waitFor: 200, failureThreshold: 0.001 },
   {
-    name: "custom-buttons",
-    url: "http://localhost:3000/custom-buttons?seed=foo&faTime=-1",
+    name: "custom-render",
+    url: "http://localhost:3000/custom-render?seed=foo&faTime=-1",
     waitFor: 200,
     failureThreshold: 0.001,
   },

project/packages/examples/test/e2e/screenshots/custom-render.valid.png

@@ -5,6 +5,8 @@ import { ReactComponent as StartLayoutIcon } from "./assets/icons/play-solid.svg
 import { ReactComponent as StopLayoutIcon } from "./assets/icons/stop-solid.svg";
 import { LayoutWorkerHook } from "./useWorkerLayoutFactory";
 
+type WorkerLayoutLabelKeys = "start" | "stop";
+
 /**
  * Properties for `WorkerLayoutControl` component
  */
@@ -47,15 +49,21 @@ export interface WorkerLayoutControlProps<T> {
    * First one is for the "start layout", and the second to "stop layout".
    * Example :
    * ```jsx
-   * <FullScreenControl>
+   * <WorkerLayoutControl>
    *   <>
-   *     <BiFullscreen />
-   *     <BiExitFullscreen />
+   *     <span>Start</span>
+   *     <span>Stop</span>
    *   </>
-   * </FullScreenControl>
+   * </WorkerLayoutControl>
    * ```
    */
   children?: [JSX.Element, JSX.Element];
+
+  /**
+   * Map of the labels we use in the component.
+   * This is usefull for I18N
+   */
+  labels?: { [Key in WorkerLayoutLabelKeys]?: string };
 }
 
 export function WorkerLayoutControl<T>({
@@ -66,6 +74,7 @@ export function WorkerLayoutControl<T>({
   settings,
   autoRunFor,
   children,
+  labels = {},
 }: WorkerLayoutControlProps<T>) {
   // Get Sigma
   const sigma = useSigma();
@@ -111,7 +120,9 @@ export function WorkerLayoutControl<T>({
     <div {...props}>
       <button
         onClick={() => (isRunning ? stop() : start())}
-        title={isRunning ? "Stop the layout animation" : "Start the layout animation"}
+        title={
+          isRunning ? labels["stop"] || "Stop the layout animation" : labels["start"] || "Start the layout animation"
+        }
       >
         {children && !isRunning && children[0]}
         {children && isRunning && children[1]}

project/packages/layout-core/src/WorkerLayoutControl.tsx

@@ -26,7 +26,8 @@ export const LayoutForceControl: React.FC<LayoutForceControlProps> = ({
   settings = {},
   autoRunFor,
   children,
+  labels,
 }) => {
-  const workerLayoutProps = { id, className, style, settings, autoRunFor, layout: useWorkerLayoutForce };
+  const workerLayoutProps = { id, className, style, settings, autoRunFor, labels, layout: useWorkerLayoutForce };
   return <WorkerLayoutControl {...workerLayoutProps}>{children}</WorkerLayoutControl>;
 };