@vnejs/plugins.view.coralina.settings.defaults 0.0.1 → 0.1.0

package/modules/controller.js

@@ -1,8 +1,17 @@
-import { Module } from "@vnejs/module";
+import { ModuleController } from "@vnejs/module.components";
 
-export class SettingsDefaultsController extends Module.Controller {
+const mapField = (field) => ({ ...field, isNotRender: typeof field.isNotShowFunc === "function" ? field.isNotShowFunc() : false });
+const mapTabInfo = ({ ...tabInfo }) => {
+  if (tabInfo.options) tabInfo.options = [...tabInfo.options.map(mapField)];
+
+  return tabInfo;
+};
+
+export class SettingsDefaultsController extends ModuleController {
   name = "settings.defaults.controller";
 
+  bgName = "Menu/save";
+
   updateEvent = this.EVENTS.SETTINGS_DEFAULTS.UPDATE;
 
   subscribe = () => {
@@ -12,7 +21,11 @@ export class SettingsDefaultsController extends Module.Controller {
     this.on(this.EVENTS.SETTINGS.CHANGED, this.onSettingChange);
   };
 
-  beforeShow = () => this.updateState({ defaultSettingsItems: window.VNESettingsDefaultsItems.map(this.emitFunc) });
+  init = () => {
+    this.tab = mapTabInfo(this.PARAMS.SETTINGS_VIEW.TABS.DEFAULT);
+  };
+
+  beforeShow = async () => this.updateState({ bgSrc: (await this.loadBgMedia()).src, tab: this.tab, currentTab: 0 });
 
   emitFunc = (func) => func({ SETTINGS: this.SETTINGS, CONST: this.CONST, platform: window.VneCore.getPlatform() });
 

package/modules/view.js

@@ -1,12 +1,14 @@
-import { Module } from "@vnejs/module";
+import { ModuleView } from "@vnejs/module.components";
 
 import { render } from "../view";
 
-export class SettingsDefaultsView extends Module.View {
+export class SettingsDefaultsView extends ModuleView {
   name = "settings.defaults.view";
-  locLabel = "settings_defaults";
+
+  locLabel = "settings";
   animationTime = 300;
-  renderFunc = render;
   updateEvent = this.EVENTS.SETTINGS_DEFAULTS.UPDATE;
+
+  renderFunc = render;
   updateHandler = this.onUpdateReactComponent;
 }

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@vnejs/plugins.view.coralina.settings.defaults",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "publish:major:plugin": "npm run publish:major",
+    "publish:minor:plugin": "npm run publish:minor",
+    "publish:patch:plugin": "npm run publish:patch",
     "publish:major": "npm version major && npm publish --access public",
     "publish:minor": "npm version minor && npm publish --access public",
     "publish:patch": "npm version patch && npm publish --access public"
   },
   "author": "",
   "license": "ISC",
-  "description": "",
-  "peerDependencies": {
-    "@vnejs/shared": "*",
-    "@vnejs/module": "*"
-  }
+  "description": ""
 }

package/view/index.jsx

@@ -1,57 +1,72 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import { cn } from "@bem-react/classname";
+import { Flex, Text, Screen, Settings, PositionBox } from "@vnejs/uis.base";
 
-import "./index.styl";
+export const TRANSITION = 500;
+export const ZINDEX = 4000;
 
-const b = cn("SettingsDefaults");
+const EMPTY_ARRAY = [];
 
 class SettingsDefaults extends React.Component {
-  state = { locs: {} };
+  state = { isShow: false, locs: {}, tokens: EMPTY_ARRAY, tab: { options: [], fields: [] } };
 
-  onClickValue = (e) => {
-    const { value, settingKey } = e.currentTarget.dataset;
+  mapTokens = (token) => ({ token });
+  recalcTokens = () => this.setState({ tokens: [...this.props.text].map(this.mapTokens) });
 
-    return this.props.emit(this.props.EVENTS.SETTINGS.SET, { name: settingKey, value });
-  };
+  componentDidUpdate(props) {
+    if (props.text !== this.props.text || (!props.isShow && this.props.isShow)) this.recalcTokens();
+  }
 
   onClickConfirm = () => this.props.emit(this.props.EVENTS.SETTINGS_DEFAULTS.CONFIRM);
 
-  renderValues = ({ titleKey = "", value = "" } = {}, settingKey = "") => (
-    <div
-      className={b("value", { current: this.props.shared.settings[settingKey] === value }, ["textWrap_120"])}
-      onClick={this.onClickValue}
-      data-value={value}
-      data-setting-key={settingKey}
-      key={value}
-    >
-      <span className="text">{this.state.locs[titleKey]}</span>
-    </div>
-  );
-
-  renderItem = ({ titleKey = "", settingKey = "", values = [] } = {}, i) => (
-    <div className={b("item")} key={settingKey}>
-      <div className={b("name", ["textWrap_120"])}>
-        <span className="text">{this.state.locs[titleKey]}</span>
-      </div>
-      <div className={b("values")}>{values.map((value) => this.renderValues(value, settingKey))}</div>
-    </div>
-  );
+  mapFields = ({ locKey = "", type = "", settingKey = "", options = [], titleToggledLocKey = "", titleUntoggledLocKey = "", ...props } = {}) => {
+    const { shared: { settings = {} } = {} } = this.props;
+    const { locs = {} } = this.state;
+
+    const onChange = (value) => this.props.emit(this.props.EVENTS.SETTINGS.SET, { name: settingKey, value });
+
+    const titles = { title: locs[locKey], titleToggled: locs[titleToggledLocKey], titleUntoggled: locs[titleUntoggledLocKey] };
+
+    return { ...titles, value: settings[settingKey], type, onChange, props, options };
+  };
 
   render() {
-    const { isShow = false, defaultSettingsItems = [], locs = {} } = this.state;
+    const { isShow = false, locs = {}, tab = {}, bgSrc = "" } = this.state;
 
     return (
-      <div className={b({ isShow })} data-html2canvas-ignore="1">
-        <div className={b("title", ["textWrap_120"])}>
-          <span className="text">{locs.title}</span>
-        </div>
-        <div className={b("items")}>{defaultSettingsItems.map(this.renderItem)}</div>
-        <div className={b("confirm", ["textWrap_120"])} onClick={this.onClickConfirm}>
-          <span className="text">{locs.confirm}</span>
-        </div>
-      </div>
+      <Screen
+        isShow={isShow}
+        zIndex={ZINDEX}
+        transition={TRANSITION}
+        bgSrc={bgSrc}
+      >
+        <PositionBox isCentered={true}>
+          <Flex
+            direction={Flex.DIRECTION.COLUMN}
+            gap={120}
+          >
+            <Text
+              align={Text.ALIGNS.CENTER}
+              width={3120}
+              text={locs[tab.titleLocKey]}
+            />
+            <Settings
+              selectedIndex={0}
+              selectedIndexInner={0}
+              transition={TRANSITION}
+              settings={tab.fields.map(this.mapFields)}
+            />
+
+            <Text
+              align={Text.ALIGNS.CENTER}
+              width={3120}
+              text={locs[tab.acceptLocKey]}
+              onClick={this.onClickConfirm}
+            />
+          </Flex>
+        </PositionBox>
+      </Screen>
     );
   }
 }

package/view/index.styl

@@ -1,62 +0,0 @@
-.SettingsDefaults
-    position: absolute
-    top: 0
-    right: 0
-    bottom: 0
-    left: 0
-
-    display: flex
-    align-items: center
-    justify-content: center
-    flex-direction: column;
-    gap: calc(180 / 2160* 100%);
-
-    color: rgba(255,255,255,0.6);
-    font-family: Montserrat;
-    text-align: center
-
-    opacity: 0
-    pointer-events: none
-
-    transition: color 300ms, opacity 1000ms
-
-    &-items
-        width: 100%
-
-    &-item
-        display: flex
-        justify-content: space-evenly
-
-    &-item ~ &-item
-        margin-top: 2.345%
-
-    &-name
-        width: 20%
-
-    &-values
-        width: 65%
-        display: flex
-        justify-content: space-evenly
-
-    &-value
-        cursor: pointer
-        transition: color 300ms
-
-        &:hover
-            color: rgba(255,255,255,0.75);
-
-        &_current
-            color: rgba(255,255,255,0.9);
-
-    &-confirm
-        color: rgba(255,255,255,0.6);
-        cursor: pointer
-        transition: color 300ms
-
-        &:hover
-            color: rgba(255,255,255,1);
-
-    &_isShow
-        pointer-events: all
-        opacity: 1
-