@vnejs/plugins.views.settings 0.1.3 → 0.2.1

package/view/components/SettingsCross.jsx

@@ -1,13 +0,0 @@
-import { useMemo } from "react";
-
-import { PositionBox, Svg } from "@vnejs/uis.react";
-
-export const SettingsCross = (props = {}) => {
-  const propsCross = useMemo(() => ({ ...props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.cross.svg, onClick: () => props.emit(props.EVENTS.SETTINGS_VIEW.HIDE) }), []);
-
-  return (
-    <PositionBox {...props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.cross.position}>
-      <Svg.Cross {...propsCross} />
-    </PositionBox>
-  );
-};

package/view/components/SettingsExampleText.jsx

@@ -1,40 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-
-import { SmoothText } from "@vnejs/uis.react";
-
-import { tokenizeText } from "@vnejs/helpers";
-
-const EMPTY_ARRAY = [];
-
-export const SettingsExampleText = ({ isShow = false, locs = {}, ...props } = {}) => {
-  const [tokens, setTokens] = useState(EMPTY_ARRAY);
-
-  const isForce = Boolean(props.shared.textNoAnimationSources.length);
-
-  const text = useMemo(() => locs["fields.text.example"] ?? "", [locs]);
-
-  useEffect(() => {
-    if (isShow) setTokens(tokenizeText(text));
-  }, [isShow, text]);
-
-  useEffect(() => {
-    if (isShow || isForce) return;
-
-    const tm = setTimeout(() => setTokens(EMPTY_ARRAY), props.PARAMS.SETTINGS_VIEW.TRANSITION);
-
-    return () => clearTimeout(tm);
-  }, [isShow]);
-
-  return (
-    <SmoothText
-      tokens={tokens}
-      isForce={isForce}
-      charDelay={props.PARAMS.TEXT.TOKEN_RENDER_DELAY / props.shared.settings[props.SETTINGS.TEXT.TOKEN_RENDER_SPEED]}
-      transition={props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.transition}
-      size={props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.size}
-      color={props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.color}
-      height={props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.exampleText.height}
-      scrollBarTextSize={props.shared.settings[props.SETTINGS.TEXTSIZE.VALUE]}
-    />
-  );
-};

package/view/components/SettingsTabContent.jsx

@@ -1,66 +0,0 @@
-import { useCallback } from "react";
-
-import { PositionBox, Settings, Flex } from "@vnejs/uis.react";
-
-import { SettingsExampleText } from "./SettingsExampleText";
-
-export const SettingsTabContent = ({ isShow = false, isForce = false, locs = {}, fields = [], ...props } = {}) => {
-  const mapFields = useCallback(
-    ({ locKey = "", type = "", settingKey = "", options = [], titleToggledLocKey = "", titleUntoggledLocKey = "", valueMap = "", ...fieldProps } = {}) => {
-      const onChange = (value) => props.emit(props.EVENTS.SETTINGS.SET, { name: settingKey, value });
-
-      const titles = { title: locs[locKey], titleToggled: locs[titleToggledLocKey], titleUntoggled: locs[titleUntoggledLocKey] };
-      const valueMapReal = valueMap ? props.PARAMS.SETTINGS_VIEW.VALUE_MAPS[valueMap] : null;
-
-      const optionsReal = options.map((option) => {
-        const result = { ...option };
-
-        if (option.locKey) {
-          delete result.locKey;
-          result.text = locs[option.locKey];
-        }
-
-        if (option.action) {
-          delete result.action;
-          result.onClick = () => props.PARAMS.SETTINGS_VIEW.ACTIONS[option.action](props, locs);
-        }
-
-        return result;
-      });
-
-      return { ...titles, value: props.shared.settings[settingKey], type, onChange, props: fieldProps, options: optionsReal, valueMap: valueMapReal };
-    },
-    [locs],
-  );
-
-  return (
-    <PositionBox
-      isCentered={true}
-      opacity={isShow ? 1 : 0}
-      transition={isForce ? 0 : props.PARAMS.SETTINGS_VIEW.TRANSITION}
-    >
-      <Flex
-        direction={Flex.DIRECTION.COLUMN}
-        gap={props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.fieldsGap}
-      >
-        <Settings
-          selectedIndex={isShow ? props.currentItem : -1}
-          selectedIndexInner={isShow ? props.currentItemInner : -1}
-          transition={isForce ? 0 : props.PARAMS.SETTINGS_VIEW.TRANSITION}
-          settings={fields.map(mapFields)}
-          {...props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.fieldProps}
-        />
-
-        {props.showTextExample && (
-          <SettingsExampleText
-            {...props}
-            locs={locs}
-            isShow={isShow}
-            isForce={isForce}
-            text={locs["fields.text.example"] || ""}
-          />
-        )}
-      </Flex>
-    </PositionBox>
-  );
-};

package/view/components/index.js

@@ -1,4 +0,0 @@
-export * from "./SettingsControls";
-export * from "./SettingsCross";
-export * from "./SettingsExampleText";
-export * from "./SettingsTabContent";

package/view/index.jsx

@@ -1,42 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { createRoot } from "react-dom/client";
-
-import { Screen } from "@vnejs/uis.react";
-
-import { SettingsControls, SettingsCross, SettingsTabContent } from "./components";
-
-const Settings = ({ store, onMount, ...props } = {}) => {
-  const [state, setState] = useState({});
-
-  const { isShow = false, isForce = false, bgSrc = "", tabs = [], locs = {}, currentTab = 0, currentItem = null, currentItemInner = null } = state;
-
-  useEffect(() => store.subscribe(setState), []);
-  useEffect(() => void onMount(), []);
-
-  const propsTab = useMemo(() => ({ ...props, isForce, currentItem, currentItemInner, locs }), [isForce, currentItem, currentItemInner, locs]);
-  const propsScreen = useMemo(() => ({ ...props.PARAMS.SETTINGS_VIEW.VIEW_PROPS.screen, isShow, isForce, bgSrc }), [isShow, isForce, bgSrc]);
-  const propsControls = useMemo(() => ({ ...props, locs, tabs, currentTab, isForce }), [locs, tabs, currentTab, isForce]);
-
-  const renderTabContent = useCallback(
-    ({ fields = [], showTextExample = false } = {}, i) => (
-      <SettingsTabContent
-        {...propsTab}
-        key={i}
-        isShow={currentTab === i}
-        fields={fields}
-        showTextExample={showTextExample}
-      />
-    ),
-    [currentTab, propsTab],
-  );
-
-  return (
-    <Screen {...propsScreen}>
-      <SettingsCross {...props} />
-      <SettingsControls {...propsControls} />
-      {Object.values(tabs).map(renderTabContent)}
-    </Screen>
-  );
-};
-
-export const render = (props, root) => createRoot(root).render(<Settings {...props} />);