@plusscommunities/pluss-core-web 1.7.3-beta.0 → 1.7.3-beta.1

package/src/components/Popup.js

@@ -0,0 +1,104 @@
+import React, { Component } from 'react';
+import FontAwesome from 'react-fontawesome';
+import _ from 'lodash';
+import { Button } from './Button';
+import { COLOUR_DUSK_LIGHT } from '../colours';
+import { SVGIcon } from './SVGIcon';
+
+class Popup extends Component {
+  renderClose() {
+    if (!this.props.onClose) {
+      return null;
+    }
+    return <SVGIcon colour={COLOUR_DUSK_LIGHT} icon="close" className="popup_closeIcon" onClick={this.props.onClose} />;
+  }
+
+  renderTitle() {
+    if (_.isEmpty(this.props.title)) {
+      return null;
+    }
+    return <p className="popup_title">{this.props.title}</p>;
+  }
+
+  renderSubtitle() {
+    if (_.isEmpty(this.props.subtitle)) {
+      return null;
+    }
+    return <p className="popup_subtitle">{this.props.subtitle}</p>;
+  }
+
+  renderButtons() {
+    if (_.isEmpty(this.props.buttons)) {
+      return null;
+    }
+    if (this.props.verticalButtonStack) {
+      return (
+        <div className={`flex flex-1 marginTop-20${this.props.verticalButtonStack ? ' flex-column flex-center' : ' flex-center-row'}`}>
+          {this.props.buttons.map((b, index) => {
+            return (
+              <Button
+                key={index}
+                buttonType={b.type}
+                style={{ marginLeft: 8, marginRight: 8, ...b.style }}
+                className={b.className}
+                onClick={b.onClick}
+                isActive={b.isActive}
+              >
+                {b.loading ? <FontAwesome name="spinner fa-pulse fa-fw" /> : b.text}
+              </Button>
+            );
+          })}
+        </div>
+      );
+    }
+    return (
+      <div className="popup_buttonSection">
+        {this.props.buttons.map((b, index) => {
+          return (
+            <Button
+              key={index}
+              buttonType={b.type}
+              style={{ marginLeft: 16, ...b.style }}
+              buttonStyle={b.buttonStyle}
+              className={b.className}
+              onClick={b.onClick}
+              isActive={b.isActive}
+              leftIcon={b.leftIcon}
+              leftIconType={b.leftIconType}
+              leftIconColour={b.leftIconColour}
+            >
+              {b.loading ? <FontAwesome name="spinner fa-pulse fa-fw" /> : b.text}
+            </Button>
+          );
+        })}
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div className={`popup ${this.props.className}`}>
+        <div
+          className={`popup_box ${this.props.boxClasses}`}
+          style={{
+            maxHeight: this.props.maxHeight ? this.props.maxHeight : 'auto',
+            maxWidth: this.props.maxWidth ? this.props.maxWidth : 'auto',
+            minHeight: this.props.minHeight ? this.props.minHeight : 'auto',
+            minWidth: this.props.minWidth ? this.props.minWidth : 'auto',
+          }}
+        >
+          <div className={`popup_box_inner ${this.props.hasPadding ? 'popup_box-hasPadding' : ''} ${this.props.innerClasses}`}>
+            {this.renderClose()}
+            {this.props.topContent}
+            {this.renderTitle()}
+            {this.renderSubtitle()}
+            {this.props.children}
+          </div>
+          {this.renderButtons()}
+        </div>
+      </div>
+    );
+  }
+}
+
+export { Popup };

package/src/components/ProfilePic.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import Config from '../config';
+import { getAppColourFromState } from '../helper';
+import { Text } from './Text';
+
+class ProfilePicComponent extends Component {
+  renderPic() {
+    return (
+      <div
+        className={this.props.className}
+        style={{
+          width: this.props.size || 30,
+          height: this.props.size || 30,
+          borderRadius: this.props.size / 2 || 15,
+          backgroundColor: this.props.colourBrandingApp,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          backgroundImage: `url(${!_.isEmpty(this.props.image) ? this.props.image : Config.env.defaultProfileImage})`,
+          ...this.props.style,
+        }}
+        alt="Profile Pic"
+      ></div>
+    );
+  }
+
+  render() {
+    if (this.props.hoverText) {
+      return (
+        <div className={`profilePicHover ${this.props.containerClass}`}>
+          {this.renderPic()}
+          <Text type="h5" className="profilePicHover_text">
+            {this.props.hoverText}
+          </Text>
+        </div>
+      );
+    }
+    return this.renderPic();
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    colourBrandingApp: getAppColourFromState(state),
+  };
+};
+
+const ProfilePic = connect(mapStateToProps, {})(ProfilePicComponent);
+export { ProfilePic };

package/src/components/RadioButton.js

@@ -0,0 +1,144 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+
+class RadioButton extends Component {
+  generateClassNames(e) {
+    let string = 'radioButton';
+    if (this.props.isActive === e) {
+      string = string + ' radioButton--active';
+    }
+    if (this.props.isSquare) {
+      string = string + ' radioButton--square';
+    }
+    return string;
+  }
+
+  generateWrapperClassNames() {
+    let string = 'radioButtonWrapper';
+    if (this.props.disabled) {
+      string = string + ' radioButton--disabled';
+    }
+    if (this.props.noHoverHighlight) {
+      string = string + ' radioButton--noHoverHighlight';
+    }
+    if (this.props.wrapperClass) {
+      string = string + this.props.wrapperClass;
+    }
+    return string;
+  }
+
+  getButtonStyle(e) {
+    const result = {};
+    if (this.props.highlightColour && this.props.isActive === e) {
+      result.borderColor = this.props.highlightColour;
+    }
+    return result;
+  }
+
+  performSingleAction(e) {
+    if (this.props.disabled) {
+      return;
+    }
+    this.props.onChange();
+  }
+
+  performMultiAction(e) {
+    if (this.props.disabled) {
+      return;
+    }
+    e.onChange();
+  }
+
+  renderLabel() {
+    if (!_.isEmpty(this.props.label)) {
+      return (
+        <div className="fieldLabel" style={{ marginBottom: 5, ...this.props.labelStyle }}>
+          {this.props.label}
+        </div>
+      );
+    }
+    return null;
+  }
+
+  renderSubLabel() {
+    if (!_.isEmpty(this.props.subLabel)) {
+      return (
+        <div className="genericInput-help" style={{ marginBottom: 5, ...this.props.subLabelStyle }}>
+          {this.props.subLabel}
+        </div>
+      );
+    }
+    return null;
+  }
+
+  renderOptions() {
+    if (_.isUndefined(this.props.options) || _.isEmpty(this.props.options)) {
+      return null;
+    }
+
+    return (
+      <div style={{ ...styles.row, ...this.props.rowStyle }}>
+        {this.props.options.map((e) => {
+          return (
+            <div
+              className={this.generateWrapperClassNames()}
+              onClick={() => this.performMultiAction(e)}
+              key={e.Label}
+              style={{ ...styles.row, marginRight: 14, ...this.props.buttonStyle }}
+            >
+              <div className={this.generateClassNames(e.Value)} style={this.getButtonStyle(e.Value)} />
+              {e.Label && <span className="actionText">{e.Label}</span>}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  renderHelp() {
+    if (!_.isEmpty(this.props.help)) {
+      return (
+        <div className="genericInput-help" style={{ marginTop: 4 }}>
+          {this.props.help}
+        </div>
+      );
+    }
+    return null;
+  }
+
+  render() {
+    if (this.props.single) {
+      return (
+        <div
+          className={this.generateWrapperClassNames()}
+          onClick={() => this.performSingleAction()}
+          key={this.props.val}
+          style={this.props.style}
+        >
+          <div className={this.generateClassNames(this.props.val)} style={this.getButtonStyle(this.props.val)} />
+          {this.renderHelp()}
+        </div>
+      );
+    }
+    return (
+      <div className={this.props.className} style={this.props.style}>
+        {this.renderLabel()}
+        {this.renderSubLabel()}
+        {this.renderOptions()}
+        {this.renderHelp()}
+      </div>
+    );
+  }
+}
+
+const styles = {
+  row: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  centeredRow: {
+    justifyContent: 'center',
+  },
+};
+
+export { RadioButton };

package/src/components/Reactions.js

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import { Text } from './Text';
+
+const getReactions = () => {
+  return [
+    {
+      key: 'heart',
+      icon: 'https://pluss60-demo-media.s3-ap-southeast-2.amazonaws.com/assets/emojis/heart.png',
+    },
+    {
+      key: 'smile',
+      icon: 'https://pluss60-demo-media.s3-ap-southeast-2.amazonaws.com/assets/emojis/smile.png',
+    },
+    {
+      key: 'sad',
+      icon: 'https://pluss60-demo-media.s3-ap-southeast-2.amazonaws.com/assets/emojis/sad.png',
+    },
+    {
+      key: 'party',
+      icon: 'https://pluss60-demo-media.s3-ap-southeast-2.amazonaws.com/assets/emojis/party.png',
+    },
+  ];
+};
+
+class Reactions extends Component {
+  state = {
+    reactions: getReactions(),
+  };
+
+  getReaction(key) {
+    if (this.props.reactions) {
+      if (!this.props.reactions[key]) {
+        return 0;
+      }
+      return this.props.reactions[key];
+    }
+    if (!this.props.entity) {
+      return 0;
+    }
+    if (!this.props.entity.Reactions) {
+      return 0;
+    }
+    if (!this.props.entity.Reactions[key]) {
+      return 0;
+    }
+    return Object.keys(this.props.entity.Reactions[key]).length;
+  }
+
+  renderReactions() {
+    return this.state.reactions.map((r, i) => {
+      return (
+        <div className="polloverview_section" key={r.key}>
+          <img src={r.icon} className="polloverview_iconImage" alt={r.key} />
+          <div className="polloverview_right">
+            <p className="polloverview_count">{this.getReaction(r.key)}</p>
+          </div>
+        </div>
+      );
+    });
+  }
+
+  render() {
+    if (this.props.compact) {
+      return <div className="compactreactions">{this.renderReactions()}</div>;
+    }
+    return (
+      <div>
+        <Text type="formTitleSmall" className="marginBottom-16">
+          Reactions
+        </Text>
+        <div className="polloverview">{this.renderReactions()}</div>
+      </div>
+    );
+  }
+}
+
+export { Reactions };

package/src/components/SVGIcon.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import icons from './svg-icons.json';
+import _ from 'lodash';
+
+class SVGIcon extends Component {
+  renderPaths() {
+    const { icon, colour } = this.props;
+
+    return icons[icon].paths.map((p, i) => {
+      let pathProps = {};
+      if (icons[icon].pathRules && icons[icon].pathRules[i]) {
+        pathProps = icons[icon].pathRules[i];
+      }
+      return <path key={p.substring(0, 20)} d={p} fill={colour} {...pathProps} />;
+    });
+  }
+
+  render() {
+    const icon = icons[this.props.icon];
+    if (!icon) {
+      return null;
+    }
+    const viewBox = icons[this.props.icon].viewBox;
+
+    return (
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox={viewBox} {..._.omit(this.props, ['colour'])}>
+        {this.renderPaths()}
+      </svg>
+    );
+  }
+}
+
+export { SVGIcon };

package/src/components/SideNavItem.js

@@ -0,0 +1,98 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router';
+import { connect } from 'react-redux';
+import _ from 'lodash';
+import FontAwesome from 'react-fontawesome';
+import { P60Icon } from './P60Icon';
+import { SVGIcon } from './SVGIcon';
+import { COLOUR_DUSK_LIGHTER } from '../colours';
+
+class SideNavItem extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { url: window.location.pathname };
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!_.isUndefined(nextProps.url) && !_.isEmpty(nextProps.url)) {
+      this.setState({ url: nextProps.url });
+    }
+  }
+
+  goTo = () => {
+    if (this.props.onClick) {
+      return this.props.onClick();
+    }
+    if (!_.isUndefined(this.props.onUrlChange)) {
+      this.props.onUrlChange();
+    }
+    this.props.history.push(this.props.Link);
+  };
+
+  getClassNames() {
+    let result = '';
+    if (this.props.className) {
+      result += ` ${this.props.className}`;
+    }
+    if (this.state.url === this.props.Link || this.props.selected) {
+      result += ' sideNav-item--active';
+    }
+    if (this.props.subStyle) {
+      result += ' sideNav-item-subStyle';
+    }
+    return result;
+  }
+
+  renderIcon() {
+    if (!this.props.Icon) {
+      return null;
+    }
+    let content = null;
+    if (this.props.isFontAwesome) {
+      content = <FontAwesome className="sideNav-item-icon" name={this.props.Icon} style={this.props.iconStyle} />;
+    } else if (this.props.isSVG) {
+      content = <SVGIcon className="sideNav-item-icon" icon={this.props.Icon} colour={COLOUR_DUSK_LIGHTER} style={this.props.iconStyle} />;
+    } else {
+      content = <P60Icon className="sideNav-item-icon" icon={this.props.Icon} style={this.props.iconStyle} />;
+    }
+    return <div style={{ ...styles.section, width: 18, marginRight: 16 }}>{content}</div>;
+  }
+
+  render() {
+    return (
+      <div className={`sideNav-item${this.getClassNames()}`} style={this.props.style} onClick={this.goTo}>
+        {!this.props.noSideDot && (
+          <div style={{ ...styles.section, marginRight: 15 }}>
+            <div className="sideNav-item-dot" style={styles.sideNavDot} />
+          </div>
+        )}
+        {this.renderIcon()}
+        <div className="sideNav-item-text" style={styles.section}>
+          {this.props.Text}
+        </div>
+        {!_.isNil(this.props.count) && this.props.count > 0 && (
+          <div className="sideNav-item-extra">
+            <div className="count">{this.props.count > 99 ? 99 : this.props.count}</div>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+const styles = {
+  section: {
+    display: 'flex',
+    alignItems: 'center',
+    minHeight: 22,
+  },
+  sideNavDot: {
+    width: 5,
+    height: 5,
+    borderRadius: 5,
+  },
+};
+
+let exportObj = connect(null, {})(withRouter(SideNavItem));
+
+export { exportObj as SideNavItem };

package/src/components/StatBox.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChartLine } from '@fortawesome/free-solid-svg-icons';
+import { Text } from './Text';
+
+// StatBox Component
+const StatBox = ({ title, icon, value, previousValue, prevText, viewGraphLink, isLoading }) => {
+  let change = (value / previousValue - 1) * 100;
+  if (isNaN(change)) {
+    change = 0;
+  }
+  if (!isFinite(change)) {
+    change = 100;
+  }
+  change = parseInt(change);
+  const opacity = isLoading ? 0 : 1;
+  return (
+    <div
+      className={`dashboardBox dashboardBox-stats dashboardBox-inline${change > 0 ? ' dashboardBox-stats-positive' : ''}${
+        change < 0 ? ' dashboardBox-stats-negative' : ''
+      }`}
+    >
+      <div className="dashboardBox-stats_title">
+        <Text type="h6">{title}</Text>
+      </div>
+      <div className="dashboardBox-stats_mid" style={{ opacity }}>
+        <FontAwesomeIcon className="dashboardBox-stats_icon" icon={icon} />
+        <Text type="h2" className="dashboardBox-stats_count">
+          {value}
+        </Text>
+        <p className="dashboardBox-stats_change">{change === 0 ? 'No change' : `${change}% ${change < 0 ? '↓' : '↑'}`}</p>
+      </div>
+      <Text type="help" style={{ opacity }}>
+        Compared to {prevText}
+      </Text>
+      {viewGraphLink && (
+        <Link to={`${viewGraphLink}&title=${title}`}>
+          <Text type="h5-noUpper" className="text-link marginTop-10">
+            <FontAwesomeIcon icon={faChartLine} style={{ marginRight: 4 }} />
+            View Graph
+          </Text>
+        </Link>
+      )}
+    </div>
+  );
+};
+
+export { StatBox };

package/src/components/StatusButton.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+
+class StatusButton extends Component {
+  render() {
+    if (this.props.isActive) {
+      return (
+        <div className="tagWrapper tagWrapper--active" onClick={this.props.deactivate}>
+          <p className="tagWrapper__content tagWrapper__text">{this.props.activeText}</p>
+          <p className="tagWrapper__hoverContent tagWrapper__text">{this.props.deactivateText}</p>
+        </div>
+      );
+    }
+    return (
+      <div className="tagWrapper tagWrapper--inactive" onClick={this.props.activate}>
+        <p className="tagWrapper__content tagWrapper__text">{this.props.inactiveText}</p>
+        <p className="tagWrapper__hoverContent tagWrapper__text">{this.props.activateText}</p>
+      </div>
+    );
+  }
+}
+
+export { StatusButton };

package/src/components/SuccessPopup.js

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import FontAwesome from 'react-fontawesome';
+import _ from 'lodash';
+import { Button } from './Button';
+
+class SuccessPopup extends Component {
+  getBackgroundClasses() {
+    return this.props.backgroundClose ? 'successPopupBackground pointer' : 'successPopupBackground';
+  }
+
+  renderButtons() {
+    if (_.isEmpty(this.props.buttons)) return null;
+
+    return (
+      <div className="successPopup_buttons">
+        {this.props.buttons.map((b, i) => {
+          return (
+            <Button key={i} buttonClassName="successPopup_button" buttonType={b.type} isActive={!b.inactive} onClick={b.onClick}>
+              {b.text}
+            </Button>
+          );
+        })}
+      </div>
+    );
+  }
+
+  renderClose() {
+    if (!this.props.closeAction) {
+      return null;
+    }
+    return (
+      <a style={{ position: 'absolute', top: 16, right: 16, cursor: 'pointer' }} onClick={this.props.closeAction}>
+        <FontAwesome name="remove" />
+      </a>
+    );
+  }
+
+  render() {
+    return (
+      <div className={this.getBackgroundClasses()}>
+        <div className="successPopup">
+          {this.props.noIcon || (
+            <div className="successPopup_tick">
+              <FontAwesome className="successPopup_tick_icon" name={'check'} />
+            </div>
+          )}
+          {this.renderClose()}
+          {!_.isEmpty(this.props.text) && <p className="successPopup_text">{this.props.text}</p>}
+          {this.props.children}
+          {this.renderButtons()}
+        </div>
+      </div>
+    );
+  }
+}
+
+export { SuccessPopup };

package/src/components/Tabs.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+
+class Tabs extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      editKey: null,
+    };
+  }
+
+  getTabClass(tab) {
+    let classes = 'tab';
+    if (this.props.selectedTab === tab.value) {
+      classes += ' tab-selected';
+    }
+    if (tab.strikethrough) {
+      classes += ' tab-strikethrough';
+    }
+    if (tab.isInvalid) {
+      classes += ' tab-invalid';
+    }
+    return classes;
+  }
+
+  renderTab(tab) {
+    return (
+      <div
+        key={tab.value}
+        onClick={() => {
+          this.props.onSelectTab(tab.value);
+        }}
+        className={this.getTabClass(tab)}
+        id={tab.value}
+        style={this.props.tabStyle}
+      >
+        <p className="tab_text" id={`tab_${tab.value}`}>
+          {tab.text}
+        </p>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div className={`tabContainer ${this.props.className || ''}`} style={this.props.containerStyle}>
+        {this.props.tabs.map((t) => {
+          return this.renderTab(t);
+        })}
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export { Tabs };