@vnejs/plugins.view.coralina.interface.controls 0.1.5 → 0.1.7

package/modules/controller.js

@@ -80,8 +80,8 @@ export class InterfaceControlsController extends ModuleController {
   getOneIconSrcs = async ({ icon = "", iconHover = "" } = {}) => {
     const [result, quality] = [{}, this.shared.settings[this.SETTINGS.LAYER.QUALITY]];
 
-    if (icon) result.src = (await this.loadImageMedia(`interface/${icon}`, "icons", quality, false, false)).src;
-    if (iconHover) result.srcHover = (await this.loadImageMedia(`interface/${iconHover}`, "icons", quality, false, false)).src;
+    if (icon) result.src = (await this.loadImageMedia(`interface/${icon}`, "icons", quality)).src;
+    if (iconHover) result.srcHover = (await this.loadImageMedia(`interface/${iconHover}`, "icons", quality)).src;
 
     return result;
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/plugins.view.coralina.interface.controls",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/view/index.jsx

@@ -3,41 +3,36 @@ import { createRoot } from "react-dom/client";
 
 import { Flex, Icon, View } from "@vnejs/uis.react";
 
+const renderIcon = (props, src, srcHover, i) => (
+  <Icon
+    {...props}
+    srcHover={srcHover}
+    src={src}
+    value={i}
+    key={i}
+  />
+);
+
 const InterfaceControls = ({ store, onMount, ...props } = {}) => {
   const [{ isShow = false, isVisible = false, isForce = false, view = "", icons = [] }, setState] = useState({});
 
   useEffect(() => store.subscribe(setState), []);
   useEffect(() => void onMount(), []);
 
-  const onItemClick = useCallback((index = 0) => props.emit(props.EVENTS.INTERFACE_CONTROLS_VIEW.CLICK, { index }), []);
+  const onClick = useCallback((index = 0) => props.emit(props.EVENTS.INTERFACE_CONTROLS_VIEW.CLICK, { index }), []);
 
   const transition = isForce ? 0 : props.PARAMS.INTERFACE_VIEW.TRANSITION;
 
   const propsByView = useMemo(() => props.PARAMS.INTERFACE_CONTROLS_VIEW.VIEW_PROPS[view] || {}, [view]);
-  const propsIcon = useMemo(() => ({ ...propsByView.icon, transition }), [propsByView, transition]);
-
-  const renderedIcons = useMemo(
-    () =>
-      icons.map(({ src, srcHover }, i) => (
-        <Icon
-          {...propsIcon}
-          srcHover={srcHover}
-          src={src}
-          onClick={onItemClick}
-          value={i}
-          key={i}
-        />
-      )),
-    [propsIcon, icons],
-  );
+  const propsIcon = useMemo(() => ({ ...propsByView.icon, transition, onClick }), [propsByView, transition]);
+  const propsView = useMemo(() => ({ ...propsByView.view, isShow, isForce, transition }), [propsByView, isShow, isForce, transition]);
+
+  const renderedIcons = useMemo(() => icons.map(({ src, srcHover }, i) => renderIcon(propsIcon, src, srcHover, i)), [propsIcon, icons]);
 
   return (
     <View
-      {...propsByView.view}
-      isShow={isShow}
-      isForce={isForce}
+      {...propsView}
       isHidden={!isVisible}
-      transition={transition}
       zIndex={props.PARAMS.INTERFACE_VIEW.ZINDEX + 100}
     >
       <Flex {...propsByView.flex}>{renderedIcons}</Flex>