From 2bc05b8a6c482dd9dd8b779bfd88655c0322475b Mon Sep 17 00:00:00 2001
From: Farooq Karimi Zadeh <fkz@riseup.net>
Date: Thu, 22 Jul 2021 11:36:23 +0430
Subject: [PATCH] up

---
 src/App.js             |   2 +-
 src/Avatar.js          |  35 +++++++++++++++++++
 src/ChatDMItem.js      |  44 ++++++++++++++++++++++++
 src/DMsView.js         |  75 +++++++++++++++++++++++++++++++++++++++++
 src/Login.js           |   5 +--
 src/Matrix.js          |  65 ++++++++++++++++++++++++++++++++---
 src/TabView.js         |  48 ++++++++++++++++++++++++++
 src/Waiting.js         |  13 ++++++-
 src/adrianavatar.png   | Bin 0 -> 8548 bytes
 src/farooqlogo.png     | Bin 0 -> 11496 bytes
 src/morecolor.scss     |   7 ++++
 src/person_icon.png    | Bin 0 -> 1346 bytes
 src/ui/IconListItem.js |  62 +++++++++++++---------------------
 src/ui/Separator.js    |   3 +-
 src/ui/Tab.js          |   8 ++---
 src/ui/Tabs.js         |  17 ++++------
 src/waiting.css        |   4 +++
 17 files changed, 324 insertions(+), 64 deletions(-)
 create mode 100644 src/Avatar.js
 create mode 100644 src/ChatDMItem.js
 create mode 100644 src/DMsView.js
 create mode 100644 src/TabView.js
 create mode 100644 src/adrianavatar.png
 create mode 100644 src/farooqlogo.png
 create mode 100644 src/morecolor.scss
 create mode 100644 src/person_icon.png

diff --git a/src/App.js b/src/App.js
index ec7dca9..737fdf7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,7 +12,7 @@ class App extends Component {
     this.state = {
       state: null,
     };
-    localforage.getItem("loginData").then((login) => {
+    localforage.getItem("login").then((login) => {
       if (login) {
         this.loginData = login;
         this.setState({ state: "matrix" });
diff --git a/src/Avatar.js b/src/Avatar.js
new file mode 100644
index 0000000..2b780d0
--- /dev/null
+++ b/src/Avatar.js
@@ -0,0 +1,35 @@
+import { Component } from "inferno";
+
+const presenceColor = {
+  online: "green",
+  offline: "gray",
+  unavailable: "orange",
+};
+
+class Avatar extends Component {
+  render() {
+    return (
+      <div style={{ width: "36px", height: "36px", position: "relative" }}>
+        <img
+          style={{ width: "100%", height: "100%", "border-radius": "50%" }}
+          src={this.props.avatar}
+          alt=""
+        />
+        <div
+          style={{
+            width: "12px",
+            height: "12px",
+            "border-radius": "50%",
+            "background-color": presenceColor[this.props.online],
+            border: "2px solid white",
+            bottom: 0,
+            right: "-12px",
+            position: "absolute",
+          }}
+        ></div>
+      </div>
+    );
+  }
+}
+
+export default Avatar;
diff --git a/src/ChatDMItem.js b/src/ChatDMItem.js
new file mode 100644
index 0000000..b1ef1b2
--- /dev/null
+++ b/src/ChatDMItem.js
@@ -0,0 +1,44 @@
+import { Component } from "inferno";
+import Avatar from "./Avatar";
+import IconListItem from "./ui/IconListItem";
+
+class ChatDMItem extends Component {
+  updatePresence = (event, user) => {
+    if (user.userId === this.props.userId)
+      this.setState({
+        online: user.presence,
+        displayName: user.displayName,
+      });
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      lastEvent: "",
+      online: "offline",
+      displayName: "",
+    };
+  }
+
+  componentWillMount() {
+    window.mClient.addListener("User.presence", this.updatePresence);
+  }
+
+  componentWillUnmount() {
+    window.mClient.removeListener("User.presence", this.updatePresence);
+  }
+
+  render() {
+    return (
+      <IconListItem
+        icon={<Avatar avatar={this.props.avatar} online={this.state.online} />}
+        primary={this.state.displayName}
+        secondary={this.state.lastEvent}
+        key={this.props.isFocused}
+        isFocused={this.props.isFocused}
+      />
+    );
+  }
+}
+
+export default ChatDMItem;
diff --git a/src/DMsView.js b/src/DMsView.js
new file mode 100644
index 0000000..18362eb
--- /dev/null
+++ b/src/DMsView.js
@@ -0,0 +1,75 @@
+import { Component } from "inferno";
+import * as matrixcs from "matrix-js-sdk";
+
+import ListView from "./ListView";
+import personIcon from "./person_icon.png";
+import ChatDMItem from "./ChatDMItem";
+import TextListItem from "./ui/TextListItem";
+
+const AVATAR_WIDTH = 36;
+const AVATAR_HEIGHT = 36;
+
+class DMsView extends Component {
+  handleKeyDown = (evt) => {
+    if (evt.key === "Call" || evt.key === "c") {
+      // 1. show a dialog to select call type
+      // 2. start a call
+    }
+  };
+
+  cursorChangeCb = (cursor) => {
+    this.setState({ cursor: cursor });
+  };
+  
+  getDMs = (room) =>
+    room.getJoinedMemberCount() === 2 && room.getMyMembership() === "join";
+  constructor(props) {
+    super(props);
+    this.rooms = [];
+    this.state = {
+      cursor: 0,
+    };
+  }
+
+  componentWillMount() {
+    document.addEventListener("keydown", this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("keydown", this.handleKeyDown);
+  }
+
+  render() {
+    const rooms = window.mClient.getVisibleRooms().filter(this.getDMs);
+    let renderedRooms = rooms.map((room) => {
+      console.log(room);
+      let theOtherId = room.guessDMUserId();
+      let mxcUrl = window.mClient.getUser(theOtherId).avatarUrl;
+      let avatarUrl;
+      if (mxcUrl) {
+        avatarUrl = matrixcs.getHttpUriForMxc(
+          window.mClient.getHomeserverUrl(),
+          mxcUrl,
+          AVATAR_WIDTH,
+          AVATAR_HEIGHT,
+          "scale",
+          true
+        );
+      } else {
+        avatarUrl = personIcon;
+      }
+      return <ChatDMItem userId={theOtherId} avatar={avatarUrl} />;
+    });
+    console.log("================");
+    if (renderedRooms.length === 0) {
+      renderedRooms.push(<TextListItem primary="No DM :(" />);
+    }
+    return (
+      <ListView cursor={this.state.cursor} cursorChangeCb={this.cursorChangeCb}>
+        {renderedRooms}
+      </ListView>
+    );
+  }
+}
+
+export default DMsView;
diff --git a/src/Login.js b/src/Login.js
index e123b04..c524642 100644
--- a/src/Login.js
+++ b/src/Login.js
@@ -31,7 +31,7 @@ class Login extends Component {
       case "m.login.password":
         window.mClient
           .loginWithPassword(
-            `@${this.username}:${this.homeserverUrl}`,
+            `@${this.username}:${this.homeserverUrl.replace("https://", "")}`,
             this.password
           )
           .then((result) => {
@@ -42,7 +42,6 @@ class Login extends Component {
             });
           })
           .catch((err) => {
-            window.e666 = err;
             switch (err.errcode) {
               case "M_FORBIDDEN":
                 alert("Incorrect login credentials");
@@ -177,12 +176,14 @@ class Login extends Component {
         >
           {listViewChildren}
         </ListView>
+      <footer $HasVNodeChildren>
         <SoftKey
           leftText="Quit"
           leftCb={() => window.close()}
           rightText="Next"
           rightCb={this.rightCb}
         />
+      </footer>
       </div>
     );
   }
diff --git a/src/Matrix.js b/src/Matrix.js
index 1dfbc6d..1e36790 100644
--- a/src/Matrix.js
+++ b/src/Matrix.js
@@ -1,17 +1,74 @@
 import { Component } from "inferno";
-import * as localforage from "localforage";
+import * as matrixcs from "matrix-js-sdk";
+
+import TabView from "./TabView";
+import SoftKey from "./ui/SoftKey";
+import DMsView from "./DMsView";
 
 class Matrix extends Component {
+  onTabChange = (index) => {
+    this.setState({ currentTab: index });
+  };
+
   constructor(props) {
     super(props);
+    window.mClient = matrixcs.createClient({
+      userId: props.data.user_id,
+      accessToken: props.data.access_token,
+      deviceId: props.data.device_id,
+      baseUrl: props.data.well_known["m.homeserver"].base_url,
+      identityServer:
+        props.data.well_known["m.identity_server"] &&
+        props.data.well_known["m.identity_server"].base_url,
+    });
+    const client = window.mClient;
+    client.on("RoomMember.membership", (event, member) => {
+      const myId = client.getUserId();
+      if (member.membership === "invite" && member.userId === myId) {
+        client.joinRoom(member.roomId).then(() => 
+          alert(`Auto joined ${member.name} after invite`));
+      }
+    });
+    client.on("Call.incoming", (call) => {
+      call.once("state", (state) => {
+        if (this.state.isCall) {
+          // reject this call if there's already
+          // a call going 
+          call.reject();
+        } else {
+          this.call = call;
+          this.setState({ isCall: true });
+        }
+      });
+    });
+    client.startClient({ initialSyncLimit: 3, lazyLoadMembers: true });
+    this.tabs = ["People", "Rooms", "Invites", "Settings", "About"];
     this.state = {
-      state: null,
+      currentTab: 0,
+      isCall: false
     };
   }
 
   render() {
-    console.log(this.props.data);
-    return <>Hi!</>;
+    return (
+      <>
+        <TabView tabLabels={this.tabs} onChangeIndex={this.onTabChange}>
+          <DMsView rooms={this.dmRooms} />
+          <p>{"Rooms not implemented"}</p>
+          <p>{"Invites are not implemented and auto accepted"}</p>
+          <p>{"Settings not implemented"}</p>
+          <p>{"About info coming soon..."}</p>
+        </TabView>
+      <footer $HasVNodeChildren>
+        <SoftKey
+          leftText="Quit"
+          leftCb={() => {
+            if (window.confirm("Quit?")) window.close();
+          }}
+        />
+      </footer>
+      </>
+    );
   }
 }
 
diff --git a/src/TabView.js b/src/TabView.js
new file mode 100644
index 0000000..ec0cfe8
--- /dev/null
+++ b/src/TabView.js
@@ -0,0 +1,48 @@
+import { Component } from "inferno";
+import Tabs from "./ui/Tabs";
+import Tab from "./ui/Tab";
+import colors from "KaiUI/src/theme/colors.scss";
+import "KaiUI/src/views/TabView/TabView.scss";
+
+const prefixCls = "kai-tab-view";
+const tabViewTabs = `${prefixCls}-tabs`;
+const tabViewContent = `${prefixCls}-content`;
+
+class TabView extends Component {
+  handleChangeIndex = (tabIndex) => {
+    this.setState({ activeTab: tabIndex });
+    if (this.props.onChangeIndex) this.props.onChangeIndex(tabIndex);
+  };
+
+  constructor(props) {
+    super(props);
+    const { focusColor } = props;
+    this.focusColor = focusColor || colors.defaultFocusColor;
+    this.tabs = this.props.tabLabels.map((label) => (
+      <Tab label={label} focusColor={this.props.focusColor} />
+    ));
+    this.tabs[0].props.isActive = true;
+    this.state = { activeTab: 0 };
+  }
+
+  render() {
+    return (
+      <div className={prefixCls}>
+        <div className={tabViewTabs}>
+          <Tabs onChangeIndex={this.handleChangeIndex} $HasNonKeyedChildren>
+            {this.tabs}
+          </Tabs>
+        </div>
+        <div className={tabViewContent}>
+          {this.props.children.map(
+            (content, index) =>
+              index === this.state.activeTab ? content : null,
+            this
+          )}
+        </div>
+      </div>
+    ); // XXX maybe use filter()?
+  }
+}
+
+export default TabView;
diff --git a/src/Waiting.js b/src/Waiting.js
index 52f4fc0..dd60fa2 100644
--- a/src/Waiting.js
+++ b/src/Waiting.js
@@ -1,12 +1,23 @@
-import { Component } from "inferno";
+import { createTextVNode, Component } from "inferno";
 import "./waiting.css";
 import cow from "./cowsay-pleasewait.png";
 
+let tips = [
+  "Use call key in People tab to quickly call someone",
+  "In About tab, you can see credits",
+  "Contact developer by pressing Call key in About tab",
+];
+
+function randomTip() {
+  return tips[Math.random() * tips.length];
+}
+
 class Waiting extends Component {
   render() {
     return (
       <>
         <img src={cow} alt="" />
+        <p $HasVNodeChildren>{createTextVNode(randomTip())}</p>
       </>
     );
   }
diff --git a/src/adrianavatar.png b/src/adrianavatar.png
new file mode 100644
index 0000000000000000000000000000000000000000..d69dedc7fa7c93a333d69c9bfba84344897eb688
GIT binary patch
literal 8548
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
LMae30<G}v|v><k0

literal 0
HcmV?d00001

diff --git a/src/farooqlogo.png b/src/farooqlogo.png
new file mode 100644
index 0000000000000000000000000000000000000000..d946a46f0288f105212d591fa56c6c38cf561034
GIT binary patch
literal 11496
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
b$H$g8yNbjPBbMkJ%zzK_YI5Z==HdSbP|9*{

literal 0
HcmV?d00001

diff --git a/src/morecolor.scss b/src/morecolor.scss
new file mode 100644
index 0000000..4690d58
--- /dev/null
+++ b/src/morecolor.scss
@@ -0,0 +1,7 @@
+@import "KaiUI/src/theme/theme.scss";
+
+$item-bg-focus-color: var(--color-carrotorange);
+
+:export {
+  item_bg_focus_color: $item-bg-focus-color;
+}
diff --git a/src/person_icon.png b/src/person_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..0dfcc9c237df205f667b350f4daab24355ac5806
GIT binary patch
literal 1346
zcmV-I1-<%-P)<h;3K|Lk000e1NJLTq002S&002!01^@s65(2V400004b3#c}2nYxW
zd<bNS00009a7bBm000ie000ie0hKEb8vp<R8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H11iwi{K~#90<=k7SR8<_u@z0DNEiY-9g^HwI=yXzwC@3w`gi0-t
zih7fvdWk3qB6<jm9(%HS=t8|@y%Zru1qNC{7F1*=Nm1Cv%)Hdm)I503sfV>s*?4r;
zo|(1xp8Ud(1H;<0|G)q2nYH%%|M#gWj_Fv01?a^&*=v*V7Y<?<wqYwa;yvssFves|
z#$EUT!-C;F8piv$Q%G3XaXKEuUir-*PkXTnQwsFaGBw<RUv(}4joOKo*|{poG`uNY
z0vh#3cFsyMA3rKC2_yO*7p1os$5r@U@ktobZ^BGeDi<p^2_xEvOA~uNE@w;oqnKAa
zF*~W_QRu;kZ3dn~A7flX-^cKH0u!Cms)WA(!}&N|fT31(7#AdSe-vv=Fqc=aC3BzA
zhoK4>ZKh$&%VVsbD-Ar*!ZBq~!+ojV{8aQS|I?0De-?8Tc|P5xy5!C;V+yW|9h@f-
zOY+B3I@iVy%#(<#TL`3Vu8AEOdrv=B*h(vO)z$$9Fj1K4PDtz(F-P|$0mcjWL`{iJ
z#Prr<DV?a;V-qpCjX=sKD)!h!jA<i~vgwH#6q|?xZ3I#_`(p;hCZfNMK*}a6_Sorj
zBL2uRzA6k0zY&L;4UD}a4q|&d5tYPGB9cJ9mE}jR#ZoF8V+ZC*#D*3EDVy~v-gFiQ
zm4AC3t3k|2kqB5<0fVu6Cs7W-%@r^hs}+fIfG~Z2Spk#Hv_%11iYqE$w3%*9=DvX<
z%l~<`Hlgohm@V`+m2J9FyM)=TP?o7yjbliT&Du_LPeg!4>HfrCo3cvzNq8i=%Si53
z&evp6xGF2f68xgLB<vE3PL*VqVyfk@OL!mANtR)g&L`k=+)$v8j!+X;cyHl|*3BQu
z-eb8g+9B%`W|7{8*Uu7qvR@H;BTv+qJ)DhsS?Iw&v*EpZvvc$%h`%lB!Y9AZzXpf!
zDy}%rF%yI))y23e(_*2yW5OuoYq(PAgc+HghO=`nSAm|5Tk(w(U)tO71QyECuaJ#h
zm>s*V$vM8pE$tX-^*c8otA$T74}-$97+(leZNJd4O6cgHikU(qYp+mz&ck|Pg}Ei?
zak-g*r?mIums&^gq|v`(9ibPSD_}HMTZJpPqpTFler21>t3$ZE6A7r}=?WNXSF5$L
z1{s4FD`28iS|k6DuW`aUpzPo~t+hfIO*CsN5OgZN6q|&HD-djIJ=iP>OLbRSuT>2R
z%lc87hTRnivMBAr8KWiQg$e{$w4Q5B!UC;5vfS+&67FjMVM7IiDogJYR$KFg!tTjT
zUmdrV9YqDWy)OTr!vB#)HDMa5+{5Mtv%4<g21XY#sV@Bcl9QeFFc&+NKaG{8pM~d9
zz<Ii(H>%UxjB_>6BkTb0t3ZIMbpVgzl*S|+%?v!R+RuNtsz33pP<e}Hs&IvTR{;a<
z>RUXd%}288xL(NQ_6nGa)lYav=&Nd463n}^Tf-$ny>XfF?@V&-0VZSspW$txdcG;o
z!R?mWdxY}bWw<=kg<9Ax&dDIY!l(Eo(`KQ{)e<TC4aN$cGjoJzF6U-{X9`c#j2G&h
z<Aqi2Y1wi6g@Vk0P!Amto*LRAv<Zyp2Vw3X>}1e?1C9(+A4;&Fl>h($07*qoM6N<$
Eg09(d5dZ)H

literal 0
HcmV?d00001

diff --git a/src/ui/IconListItem.js b/src/ui/IconListItem.js
index da276c3..62085a4 100644
--- a/src/ui/IconListItem.js
+++ b/src/ui/IconListItem.js
@@ -4,41 +4,16 @@ import "KaiUI/src/components/IconListItem/IconListItem.scss";
 import morecolor from "../morecolor.scss";
 
 const prefixCls = "kai-il";
+const lineCls = `${prefixCls}-line`;
+const itemCls = prefixCls;
+const primaryCls = `${prefixCls}-line`;
 
 class IconListItem extends Component {
   constructor(props) {
     super(props);
-    const {
-      primary,
-      secondary,
-      icon,
-      iconSrc,
-      focusClass,
-      iconWidth,
-      disabled,
-      className,
-      onClick,
-    } = props;
-    this.primary = primary;
-    this.secondary = secondary;
-    this.itemCls = prefixCls;
-    this.lineCls = `${prefixCls}-line`;
-    this.primaryCls = `${this.primaryCls}-primary`;
-    this.secondaryCls = `${prefixCls}-secondary ${secondary ? "" : "hidden"}`;
-    this.disabledCls = disabled ? `${prefixCls}-disabled` : "";
-    this.disabled = disabled;
-    this.className = className;
-    this.focusClass = focusClass;
-    this.handleClick = onClick;
-    if (iconSrc)
-      this.renderedIcon = <img src={iconSrc} alt="" width={iconWidth || 50} />;
-    else if (icon instanceof String && icon.startsWith("kai"))
-      this.renderedIcon = (
-        <span className={icon} style={{ width: iconWidth }} />
-      );
-    // Then we assume it is a valid element TODO: check for this
-    else this.renderedIcon = <span>{icon}</span>;
-    this.divRef = createRef();
+    this.secondaryCls = `${prefixCls}-secondary ${props.secondary ? "" : "hidden"}`;
+    this.disabledCls = props.disabled ? `${prefixCls}-disabled` : "";
+        this.divRef = createRef();
   }
 
   componentDidUpdate(lastProps, lastState) {
@@ -53,17 +28,26 @@ class IconListItem extends Component {
     const iconCls = `${prefixCls}-icon-${
       this.props.isFocused ? "focused" : "unfocused"
     }`;
+    let renderedIcon;
+    if (this.props.iconSrc)
+      renderedIcon = <img src={this.props.iconSrc} alt="" width={this.props.iconWidth || 50} />;
+    else if (this.props.icon instanceof String && this.props.icon.startsWith("kai"))
+      renderedIcon = (
+        <span className={this.props.icon} style={{ width: this.props.iconWidth }} />
+      );
+    // Then we assume it is a valid element TODO: check for this
+    else renderedIcon = <span>{this.props.icon}</span>;
 
     return (
       <div
         tabIndex={this.disabled ? undefined : 1}
         className={classNames(
-          this.itemCls,
+          itemCls,
           this.disabledCls,
-          this.className,
+          this.props.className,
           focusedCls
         )}
-        onClick={this.handleClick}
+        onClick={this.props.onClick}
         key={this.props.isFocused}
         ref={this.divRef}
         style={{
@@ -72,13 +56,13 @@ class IconListItem extends Component {
             : "",
         }}
       >
-        <div className={iconCls}>{this.renderedIcon}</div>
-        <div className={this.lineCls}>
-          <span className={this.primaryCls} $HasVNodeChildren>
-            {createTextVNode(this.primary)}
+        <div className={iconCls}>{renderedIcon}</div>
+        <div className={lineCls}>
+          <span className={primaryCls} $HasVNodeChildren>
+            {createTextVNode(this.props.primary)}
           </span>
           <label className={this.secondaryCls} $HasVNodeChildren>
-            {createTextVNode(this.secondary)}
+            {createTextVNode(this.props.secondary)}
           </label>
         </div>
       </div>
diff --git a/src/ui/Separator.js b/src/ui/Separator.js
index 9ea9f51..79b8807 100644
--- a/src/ui/Separator.js
+++ b/src/ui/Separator.js
@@ -8,13 +8,12 @@ class Separator extends Component {
   constructor(props) {
     props.unFocusable = true;
     super(props);
-    this.text = props.text;
   }
 
   render() {
     return (
       <div className={prefixCls}>
-        <span className={textCls}>{this.text}</span>
+        <span className={textCls}>{this.props.text}</span>
       </div>
     );
   }
diff --git a/src/ui/Tab.js b/src/ui/Tab.js
index 5a99535..9204077 100644
--- a/src/ui/Tab.js
+++ b/src/ui/Tab.js
@@ -6,13 +6,11 @@ const prefixCls = "kai-tab";
 
 class Tab extends Component {
   constructor(props) {
-    const { label, onTabChange, focusColor } = props;
+    const { focusColor } = props;
     super(props);
     this.style = {
       "--tab-underline-color": focusColor || colors.defaultFocusColor,
     };
-    this.onTabChange = onTabChange;
-    this.label = label;
   }
 
   render() {
@@ -22,14 +20,14 @@ class Tab extends Component {
     return (
       <div
         onClick={() => {
-          this.onTabChange && this.onTabChange(this.index);
+          this.props.onTabChange && this.props.onTabChange(this.index);
         }}
         className={actPrefixCls}
         style={this.style}
         key={this.props.isActive}
       >
         <div className={`${actPrefixCls}-label`} $HasVNodeChildren>
-          {createTextVNode(this.label)}
+          {createTextVNode(this.props.label)}
         </div>
       </div>
     );
diff --git a/src/ui/Tabs.js b/src/ui/Tabs.js
index 01ada9e..2436b08 100644
--- a/src/ui/Tabs.js
+++ b/src/ui/Tabs.js
@@ -9,11 +9,11 @@ class Tabs extends Component {
     if (!["ArrowLeft", "ArrowRight"].includes(evt.key)) return;
     let index = this.state.activeChild;
     console.log("[Tabs] Old activeChild:", index);
-    this.children[index].props.isActive = false;
+    this.props.children[index].props.isActive = false;
     switch (evt.key) {
       case "ArrowLeft":
         index--;
-        index += this.children.length;
+        index += this.props.children.length;
         break;
       case "ArrowRight":
         index++;
@@ -21,22 +21,19 @@ class Tabs extends Component {
       default:
         break;
     }
-    index %= this.children.length;
-    this.children[index].props.isActive = true;
-    findDOMNode(this.children[index]).scrollIntoView({
+    index %= this.props.children.length;
+    this.props.children[index].props.isActive = true;
+    findDOMNode(this.props.children[index]).scrollIntoView({
       behavior: "auto",
       block: "start",
       inline: "center",
     });
     this.setState({ activeChild: index });
-    this.onChangeIndex && this.onChangeIndex(index);
+    this.props.onChangeIndex && this.props.onChangeIndex(index);
   };
 
   constructor(props) {
-    const { onChangeIndex, children } = props;
     super(props);
-    this.children = children;
-    this.onChangeIndex = onChangeIndex;
     this.state = { activeChild: 0 };
   }
 
@@ -49,7 +46,7 @@ class Tabs extends Component {
   }
 
   render() {
-    return <div className={prefixCls}>{this.children}</div>;
+    return <div className={prefixCls}>{this.props.children}</div>;
   }
 }
 
diff --git a/src/waiting.css b/src/waiting.css
index 939be7e..fc68805 100644
--- a/src/waiting.css
+++ b/src/waiting.css
@@ -6,3 +6,7 @@ img {
   height: 110px;
   width: 192px;
 }
+
+p {
+  text-align: center;
+}