@vnejs/plugins.view.coralina.history 0.0.1 → 0.1.1

package/const/params.js

@@ -0,0 +1,7 @@
+export const ZINDEX = 2000;
+export const TRANSITION = 300;
+export const LOC_LABEL = "history";
+
+export const VIEW_PROPS = {
+  screen: { isDisableAutoread: true, isIgnoreOnScreenshot: true, withBackgroundBlur: true, withBackgroundDark: true, zIndex: ZINDEX, transition: TRANSITION },
+};

package/index.js

@@ -1,8 +1,9 @@
 import { regPlugin } from "@vnejs/shared";
 
 import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
 
 import { HistoryController } from "./modules/controller";
 import { HistoryView } from "./modules/view";
 
-regPlugin("HISTORY_VIEW", { events: SUBSCRIBE_EVENTS }, [HistoryController, HistoryView]);
+regPlugin("HISTORY_VIEW", { events: SUBSCRIBE_EVENTS, params }, [HistoryController, HistoryView]);

package/modules/controller.js

@@ -1,6 +1,6 @@
-import { Module } from "@vnejs/module";
+import { ModuleController } from "@vnejs/module.components";
 
-export class HistoryController extends Module.Controller {
+export class HistoryController extends ModuleController {
   name = "history.controller";
 
   emitHide = () => this.emit(this.EVENTS.HISTORY_VIEW.HIDE);
@@ -14,7 +14,7 @@ export class HistoryController extends Module.Controller {
     [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
     [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => this.emit(this.EVENTS.HISTORY_VIEW.ACCEPT),
   };
-  controlsIndex = 3000;
+  controlsIndex = this.PARAMS.HISTORY_VIEW.ZINDEX;
 
   subscribe = () => {
     this.on(this.EVENTS.HISTORY_VIEW.SHOW, this.onShow);
@@ -25,22 +25,16 @@ export class HistoryController extends Module.Controller {
     this.on(this.EVENTS.STATE.SET, this.onStateSet);
   };
 
-  beforeShow = async () =>
-    this.updateState({
-      historyLocs: await Promise.all(this.globalState.history.history.map(this.getHistoryLoc)),
-      history: this.globalState.history.history,
-    });
+  beforeShow = async () => {
+    this.maxCurrentItem = this.globalState.history.history.length - 1;
 
-  onAccept = async () => {
-    if (this.currentItem !== null)
-      await this.emit(this.EVENTS.HISTORY_VIEW.CLICK, { uid: this.globalState.history.history[this.currentItem].uid });
+    this.updateState({ historyLocs: await Promise.all(this.globalState.history.history.map(this.getHistoryLoc)), history: this.globalState.history.history });
   };
 
-  onClick = async ({ uid } = {}) => {
-    if (this.shared.history.storageKeys.includes(uid)) await this.emit(this.EVENTS.HISTORY.LOAD, { uid });
-  };
+  onAccept = () => this.currentItem !== null && this.emit(this.EVENTS.HISTORY_VIEW.CLICK, { uid: this.globalState.history.history[this.currentItem].uid });
+  onClick = ({ uid } = {}) => this.shared.history.storageKeys.includes(uid) && this.emit(this.EVENTS.HISTORY.LOAD, { uid });
 
-  onStateSet = () => this.emit(this.EVENTS.HISTORY_VIEW.HIDE, { force: true });
+  onStateSet = () => this.emit(this.EVENTS.HISTORY_VIEW.HIDE, { isForce: true });
 
-  getHistoryLoc = ({ text, label } = {}) => this.getLocTextByKey(label, text);
+  getHistoryLoc = ({ label, text } = {}) => this.emitOne(this.EVENTS.LOCS.GET_TEXT, { label, key: text });
 }

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 HistoryView extends Module.View {
+export class HistoryView extends ModuleView {
   name = "history.view";
-  locLabel = "history";
-  animationTime = 300;
-  renderFunc = render;
+
+  locLabel = this.PARAMS.HISTORY_VIEW.LOC_LABEL;
+  animationTime = this.PARAMS.HISTORY_VIEW.TRANSITION;
   updateEvent = this.EVENTS.HISTORY_VIEW.UPDATE;
-  updateHandler = this.onUpdateReactComponent;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
 }

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@vnejs/plugins.view.coralina.history",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "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/components/HistoryClose.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { PositionBox, Text } from "@vnejs/uis.base";
+
+export class HistoryClose extends React.Component {
+  onCloseClick = () => this.props.emit(this.props.EVENTS.HISTORY_VIEW.HIDE);
+
+  render() {
+    const { locs = {} } = this.props;
+
+    return (
+      <PositionBox
+        bottom={120}
+        left={120}
+      >
+        <Text
+          size={60}
+          text={locs.back}
+          onClick={this.onCloseClick}
+        />
+      </PositionBox>
+    );
+  }
+}

package/view/components/HistoryLines.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+
+import { PositionBox, Text, TextControls } from "@vnejs/uis.base";
+
+export class HistoryLines extends React.Component {
+  scrollbarWrapRef = React.createRef(null);
+
+  componentDidUpdate(props, state) {
+    if (this.props.isShow && !props.isShow) setImmediate(this.scrollToBottom);
+  }
+
+  scrollToBottom = () => {
+    this.scrollbarWrapRef.current.scrollTop = 9999999;
+  };
+
+  onLineClick = (uid) => {
+    const { history: { storageKeys } = {} } = this.props.shared;
+
+    if (Boolean(storageKeys.find((key) => key === uid))) return this.props.emit(this.props.EVENTS.HISTORY_VIEW.CLICK, { uid });
+  };
+
+  mapTexts = ({ text, uid, speaker, meet }, i) => {
+    const { historyLocs = [], shared: { history: { storageKeys } = {}, lang = "ru" } = {} } = this.props;
+
+    const speakers = this.props.PARAMS.TEXT.SPEAKERS_INFO;
+
+    const { names = {}, speakerColor = "white" } = speakers[speaker] || speakers.default;
+    const langNames = names[lang] || names.default;
+    const speakerName = langNames[meet] || langNames[langNames.length - 1];
+
+    return {
+      text: (historyLocs && historyLocs[i]) || text,
+      value: uid,
+      textPrefix: speakerName ? `${speakerName}: ` : undefined,
+      colorPrefix: speakerColor,
+      weightPrefix: Text.WEIGHT.BOLD,
+      isHoverable: Boolean(storageKeys.find((key) => key === uid)),
+    };
+  };
+
+  render() {
+    const { history = [], currentItem = null } = this.props;
+
+    return (
+      <PositionBox
+        top={120}
+        left={120}
+        right={120}
+      >
+        <TextControls
+          selectedIndex={currentItem}
+          scrollbarWrapRef={this.scrollbarWrapRef}
+          wrapHeight={1800}
+          withScrollbar={true}
+          flexGap={36}
+          textSize={60}
+          textMarginTop={36}
+          texts={history.map(this.mapTexts)}
+          onClick={this.onLineClick}
+        />
+      </PositionBox>
+    );
+  }
+}

package/view/components/index.js

@@ -0,0 +1,2 @@
+export * from "./HistoryClose";
+export * from "./HistoryLines";

package/view/index.jsx

@@ -1,66 +1,26 @@
-import React from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
 
-import { cn } from "@bem-react/classname";
+import { Screen } from "@vnejs/uis.base";
 
-import "./index.styl";
+import { HistoryClose, HistoryLines } from "./components";
 
-const b = cn("History");
+const History = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, isForce = false, locs = {}, history = [], historyLocs = [], currentItem = null }, setState] = useState({});
 
-class History extends React.Component {
-  state = { isShow: false, history: [], storageKeys: [] };
-  linesRef = React.createRef(null);
-  componentDidUpdate(props, state) {
-    if (this.state.isShow && !state.isShow) setImmediate(this.scrollLinesToBottom);
-  }
-  onCloseClick = () => this.props.emit(this.props.EVENTS.HISTORY_VIEW.HIDE);
-  onLineClick = (e) => {
-    const { uid } = e.currentTarget.dataset;
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
 
-    this.props.emit(this.props.EVENTS.HISTORY_VIEW.CLICK, { uid });
-  };
-  renderHistoryLine = ({ uid, text, speaker, meet } = {}, i) => {
-    const { historyLocs = [], currentItem } = this.state;
-    const { history: { storageKeys } = {}, speakers = {}, lang = "ru" } = this.props.shared;
-    const isActive = Boolean(storageKeys.find((key) => key === uid));
-    const { names = {}, speakerColor = "white" } = speakers[speaker] || speakers.default;
-    const langNames = names[lang] || names.default;
-    const speakerName = langNames[meet] || langNames[langNames.length - 1];
-    const realText = (historyLocs && historyLocs[i]) || text;
+  const propsScreen = useMemo(() => ({ ...props.PARAMS.HISTORY_VIEW.VIEW_PROPS.screen, isShow, isForce }), [isShow, isForce]);
+  const propsLines = useMemo(() => ({ ...props, isShow, history, historyLocs, currentItem }), [isShow, history, historyLocs, currentItem]);
+  const propsClose = useMemo(() => ({ ...props, locs }), [locs]);
 
-    return (
-      <div
-        className={b("line", { active: isActive, disabled: !isActive, isCurrent: currentItem === i }, ["textWrap_60"])}
-        key={uid}
-        data-uid={uid}
-        onClick={isActive ? this.onLineClick : undefined}
-      >
-        <span className={b("lineSpeaker", ["text"])} style={{ color: speakerColor }}>
-          {speakerName && <>{speakerName}: </>}
-        </span>
-        <span className={b("lineText", ["text"])}>{realText}</span>
-      </div>
-    );
-  };
-  scrollLinesToBottom = () => {
-    this.linesRef.current.scrollTop = 9999999;
-  };
-  render() {
-    const { isShow = false, isForce = false, history = [], locs = {} } = this.state;
+  return (
+    <Screen {...propsScreen}>
+      <HistoryLines {...propsLines} />
+      <HistoryClose {...propsClose} />
+    </Screen>
+  );
+};
 
-    return (
-      <div className={b({ isShow, isForce })} id="History" data-html2canvas-ignore="1">
-        <div className={b("wrap")}>
-          <div className={b("lines")} ref={this.linesRef}>
-            {history.map(this.renderHistoryLine)}
-          </div>
-          <div className={b("back", ["textWrap_60"])} onClick={this.onCloseClick}>
-            <span className="text">{locs.back}</span>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export const render = (props, root, resolve) => ReactDOM.render(<History {...props} />, root, resolve);
+export const render = (props, root) => ReactDOM.render(<History {...props} />, root);

package/view/index.styl

@@ -1,77 +0,0 @@
-.History
-  position: absolute
-  top: 0
-  right: 0
-  bottom: 0
-  left: 0
-  z-index: 4000
-  backdrop-filter: blur(5px) brightness(0.5)
-  background: rgba(0,0,0,0.4)
-  opacity: 0
-  pointer-events: none
-  display: flex
-  justify-content: center
-  align-items: center
-  font-family: Montserrat
-
-  &-wrap
-    position: absolute
-    top: 1.25%
-    right: 2.25%
-    bottom: 1.25%
-    left: 2.25%
-    z-index: 4001
-    box-sizing: border-box
-    display: flex
-    align-items: initial
-    justify-content: space-between
-    align-items: flex-start
-    flex-direction: column
-
-  &-linesWrap
-    position relative
-
-  &-lines
-    overflow: auto
-    display: flex
-    flex-direction: column
-    align-items: flex-start
-    height: calc(1900 / 2100 * 100%)
-
-  &-line
-    color: rgb(255, 255, 255, 1)
-    opacity: 0.6
-    border-radius: 8px
-    transition: opacity 300ms, outline 300ms
-
-    &_active
-      cursor: pointer
-
-      &:hover
-        opacity: 1
-
-    &_isCurrent
-      outline: 2px solid white
-
-    & ~ & 
-      margin-top: 1%
-
-  &-lineSpeaker
-    font-weight: 700
-
-  &-back
-    color: white
-    cursor: pointer
-    transition: opacity  300ms
-    flex-shrink: 0
-    opacity 0.6
-
-    &:hover
-      opacity: 1
-
-  &_isShow
-    opacity: 1
-    pointer-events: all
-
-  &:not(&_isForce)
-      transition: opacity 300ms