@aj-shadow/z-abs-complayer-bootstrap-client 0.0.0-aj-beta.221 → 0.0.0-aj-beta.224

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "@aj-shadow/z-abs-complayer-bootstrap-client",
-  "version": "0.0.0-aj-beta.221",
+  "version": "0.0.0-aj-beta.224",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@aj-shadow/z-abs-complayer-bootstrap-client",
-      "version": "0.0.0-aj-beta.221",
+      "version": "0.0.0-aj-beta.224",
       "license": "SEE LICENSE IN LICENSE.txt"
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aj-shadow/z-abs-complayer-bootstrap-client",
-  "version": "0.0.0-aj-beta.221",
+  "version": "0.0.0-aj-beta.224",
   "release-step": "delivery",
   "description": "Library used by @actorjs/actorjs",
   "author": "ActorJs",

package/project/client/realtime-components/realtime-press-down-button.jsx

@@ -8,18 +8,30 @@ import React from 'react';
 
 export default class RealtimePressDownButton extends ReactComponentBase {
   constructor(props) {
-    super(props);
+    super(props, {
+      buttonValue: props.buttonValue
+    });
+    this.toolTipHeadingIsArray = Array.isArray(props.toolTipHeading);
+    this.toolTipContentIsArray = Array.isArray(props.toolTipContent);
     this.textNodes = new Map();
+    this.isRealtime = false;
   }
   
   shouldUpdate(nextProps, nextState) {
-    return !this.shallowCompare(this.props.buttonValue, nextProps.buttonValue)
-      || !this.shallowCompare(this.props.buttonIndex, nextProps.buttonIndex)
-      || !this.shallowCompare(this.props.active, nextProps.active)
-      || !this.shallowCompare(this.props.colorMark, nextProps.colorMark)
-      || !this.shallowCompare(this.props.toolTipContent, nextProps.toolTipContent);
+    const buttonValuePropsCmp = this.isArray ? !this.shallowCompareArrayValues(this.props.buttonValue, nextProps.buttonValue) : !this.shallowCompare(this.props.buttonValue, nextProps.buttonValue);
+    const activeCmp = !this.shallowCompare(this.props.active, nextProps.active);
+    const colorMarkCmp = !this.shallowCompare(this.props.colorMark, nextProps.colorMark);
+    const toolTipHeadingCmp = this.toolTipHeadingIsArray ? !this.shallowCompareArrayValues(this.props.toolTipHeading, nextProps.toolTipHeading) : !this.shallowCompare(this.props.toolTipHeading, nextProps.toolTipHeading);
+    const toolTipContentCmp = this.toolTipContentIsArray ? !this.shallowCompareArrayValues(this.props.toolTipContent, nextProps.toolTipContent) : !this.shallowCompare(this.props.toolTipContent, nextProps.toolTipContent);
+    const buttonStatePropsCmp = this.isArray ? !this.shallowCompareArrayValues(this.state.buttonValue, nextState.buttonValue) : !this.shallowCompare(this.state.buttonValue, nextState.buttonValue);
+    return buttonValuePropsCmp
+      || activeCmp
+      || colorMarkCmp
+      || toolTipHeadingCmp
+      || toolTipContentCmp
+      || buttonStatePropsCmp;
   }
-  
+    
   render() {
     const toolTipContent = this.props.toolTipContent;
     let toolTipContents = [];
@@ -39,24 +51,23 @@ export default class RealtimePressDownButton extends ReactComponentBase {
       toolTipHeadings.push(toolTipHeading);
       toolTipHeadings.push(toolTipHeading);
     }
-    const buttonIndex = undefined !== this.props.buttonIndex ? Number.parseInt(this.props.buttonIndex) : undefined;
-    let buttonValue = undefined !== buttonIndex ? this.props.buttonValue[buttonIndex] : this.props.buttonValue;
-    let active = buttonValue ? 1 : 0;
+    let buttonValue = this.isRealtime ? this.state.buttonValue : this.props.buttonValue;
+    const active = buttonValue;
+    const activeIndex = active ? 1 : 0;
+    this.isRealtime = false;
     const onLoad = this.props.onLoad ? {onLoad: this.props.onLoad} : {};
     const size = this.props.size ? this.props.size : 'aj_btn_sm';
     return (
-      <ButtonNew icon={this.props.icon} size={size} active={active} colorMark={this.props.colorMark} placement="bottom" heading={toolTipHeadings[(active)]} content={toolTipContents[(active)]}
+      <ButtonNew icon={this.props.icon} size={size} active={active} colorMark={this.props.colorMark} placement="bottom" heading={toolTipHeadings[activeIndex]} content={toolTipContents[activeIndex]}
         onClick={(e) => {
-          buttonValue = !buttonValue;
-          if(undefined !== buttonIndex) {
-            const values = this.deepCopy(this.props.buttonValue);
-            values[buttonIndex] = buttonValue;
-            if(this.props.onAction) {
-              this.props.onAction(values);
-            }
-          }
-          else if(this.props.onAction) {
-            this.props.onAction(buttonValue);
+          if(this.props.onAction) {
+            buttonValue = !buttonValue;
+            this.props.onAction(buttonValue, (isRealtime) => {
+              if(isRealtime) {
+                this.isRealtime = true;
+                this.updateState({buttonValue: {$set:buttonValue}});
+              }
+            });
           }
         }}
         {...onLoad}