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

package/src/components/Popup.js

@@ -1,104 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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

@@ -1,77 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,98 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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 };