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

package/src/components/GenericInput.js

@@ -0,0 +1,169 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import Textarea from 'react-textarea-autosize';
+
+class GenericInput extends Component {
+  componentDidUpdate(prevProps, prevState) {
+    if (!_.isUndefined(this.props.autofocus) && this.props.autofocus) {
+      this._input.focus();
+    }
+  }
+
+  getAutoComplete() {
+    if (!_.isUndefined(this.props.autoComplete)) {
+      return this.props.autoComplete ? 'on' : 'off';
+    }
+    return 'off';
+  }
+
+  isValid() {
+    if (!_.isUndefined(this.props.isValid) && typeof this.props.isValid === 'function') {
+      return this.props.isValid();
+    }
+    return this.props.isValid;
+  }
+
+  showError() {
+    return (
+      !_.isUndefined(this.props.showError) &&
+      ((typeof this.props.showError === 'function' && this.props.showError()) ||
+        (typeof this.props.showError === 'boolean' && this.props.showError))
+    );
+  }
+
+  getClassNames() {
+    let string = `${this.props.className} genericInputContainer`;
+    if (!_.isUndefined(this.props.disabled) && this.props.disabled) {
+      string += ' genericInput-disabled';
+    }
+    if (this.props.large) {
+      string += ' genericInput-large';
+    }
+    if (!_.isUndefined(this.props.type) && this.props.type === 'textarea') {
+      string += ' genericInput-textarea';
+    }
+    if (this.isValid()) {
+      return string + ' genericInput-valid';
+    }
+    if (this.showError()) {
+      return string + ' genericInput-error';
+    }
+    return string;
+  }
+
+  getLabelStyle() {
+    const style = {};
+    if (_.isEmpty(this.props.value) && !this.props.alwaysShowLabel) {
+      style.opacity = 0;
+    }
+    return style;
+  }
+
+  renderError() {
+    if (this.showError() && !this.isValid()) {
+      return <div className={'fieldLabel fieldLabel-warning'}>{this.props.errorMessage ? this.props.errorMessage : 'Required'}</div>;
+    }
+    return null;
+  }
+  renderHelp() {
+    if (!_.isEmpty(this.props.help)) {
+      return <div className="genericInput-help">{this.props.help}</div>;
+    }
+    return null;
+  }
+
+  renderInput() {
+    if (!_.isUndefined(this.props.inputComponent)) {
+      return (
+        <div style={{ ...styles.row, alignItems: 'flex-start' }}>
+          {this.props.isRequired && <div className="inputRequired " />}
+          {this.props.inputComponent}
+          {this.props.rightContent}
+        </div>
+      );
+    }
+    if (!_.isUndefined(this.props.type) && this.props.type === 'textarea') {
+      // Render expandable text area
+      return (
+        <div style={{ ...styles.row, alignItems: 'flex-start' }}>
+          {this.props.isRequired && <div className="inputRequired " />}
+          <Textarea
+            id={this.props.id}
+            placeholder={!_.isUndefined(this.props.placeholder) ? this.props.placeholder : this.props.label}
+            type={!_.isUndefined(this.props.type) ? this.props.type : 'text'}
+            className={`genericInput ${this.props.inputClass}`}
+            value={this.props.value || ''}
+            onChange={this.props.onChange}
+            onKeyPress={this.props.onKeyPress || this.props.onEnter}
+            onKeyDown={this.props.onKeyDown}
+            style={{ ...this.props.inputStyle }}
+            readOnly={!_.isUndefined(this.props.readOnly) ? this.props.readOnly : false}
+            disabled={!_.isUndefined(this.props.disabled) ? this.props.disabled : false}
+            autoComplete={this.getAutoComplete()}
+            maxLength={this.props.maxLength}
+            onFocus={this.props.onFocus}
+            onBlur={this.props.onBlur}
+          />
+          {this.props.rightContent}
+        </div>
+      );
+    }
+    // Render default input
+    return (
+      <div style={{ ...styles.row, ...this.props.textWrapperStyle }}>
+        {this.props.isRequired && <div className="inputRequired " />}
+        <input
+          ref={(c) => (this._input = c)}
+          id={this.props.id}
+          placeholder={!_.isUndefined(this.props.placeholder) ? this.props.placeholder : this.props.label}
+          type={!_.isUndefined(this.props.type) ? this.props.type : 'text'}
+          className={`genericInput ${this.props.inputClass}`}
+          value={this.props.value || ''}
+          onChange={this.props.onChange}
+          onClick={this.props.onClick}
+          onKeyPress={this.props.onKeyPress || this.props.onEnter}
+          onKeyDown={this.props.onKeyDown}
+          style={{ ...this.props.inputStyle }}
+          readOnly={!_.isUndefined(this.props.readOnly) ? this.props.readOnly : false}
+          disabled={!_.isUndefined(this.props.disabled) ? this.props.disabled : false}
+          autoComplete={this.getAutoComplete()}
+          autoFocus={!_.isUndefined(this.props.autofocus) ? this.props.autofocus : false}
+          maxLength={this.props.maxLength}
+          onFocus={this.props.onFocus}
+          onBlur={this.props.onBlur}
+        />
+        {this.props.rightContent}
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div className={this.getClassNames()} style={{ ...this.props.style }}>
+        <div style={{ ...styles.row, marginBottom: 0, justifyContent: 'space-between' }}>
+          {!_.isUndefined(this.props.label) && (
+            <div className="fieldLabel" style={this.getLabelStyle()}>
+              {this.props.label}
+            </div>
+          )}
+          {this.renderError()}
+        </div>
+        {/* Render either generic input or large text area  */}
+        {this.renderInput()}
+        {/* Render bottom help info */}
+        {this.renderHelp()}
+      </div>
+    );
+  }
+}
+
+const styles = {
+  row: {
+    display: 'flex',
+    flexDirection: 'row',
+    // marginBottom: 8,
+    alignItems: 'center',
+  },
+};
+
+export { GenericInput };

package/src/components/Header.js

@@ -0,0 +1,82 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router';
+import { connect } from 'react-redux';
+import { setNavData } from '../actions';
+import { Button } from './Button';
+
+class Header extends Component {
+  getHomeLink() {
+    this.props.history.replace('/');
+  }
+
+  goToHelpGuide = () => {
+    window.open('https://www.plusscommunities.com/user-guide', '_blank');
+  };
+
+  toggleSideMenu = () => {
+    this.props.setNavData({ isSideMenuOpen: !this.props.isSideMenuOpen });
+  };
+
+  renderRight() {
+    if (this.props.rightContent) {
+      return this.props.rightContent;
+    }
+    return (
+      <div className="flex flex-center">
+        <Button buttonType="primary" onClick={this.goToHelpGuide} narrow isActive className="marginRight-16">
+          Help Guide
+        </Button>
+        <div className="sideMenuButtonContainer"></div>
+      </div>
+    );
+  }
+
+  renderHeader() {
+    return (
+      <div className="header">
+        <div id="leftContainer" style={{ display: 'inline-block' }}>
+          {this.props.children && (
+            <div style={{ display: 'flex', height: '100%', alignItems: 'center', marginLeft: 16 }}>{this.props.children}</div>
+          )}
+        </div>
+        {this.renderRight()}
+      </div>
+    );
+  }
+
+  renderSimpleHeader() {
+    return (
+      <div className={`header header-simple ${this.props.fixed ? 'header-fixed' : ''}`}>
+        <div className="container1200 flex flex-center">
+          <img
+            className="header_logo"
+            src="https://pluss-prd-media.s3-ap-southeast-2.amazonaws.com/assets/plusscommunities-new.svg"
+            alt="logo"
+          />
+        </div>
+      </div>
+    );
+  }
+
+  renderContainerHeader() {
+    return <div className={`header header-simple ${this.props.fixed ? 'header-fixed' : ''}`}>{this.props.children}</div>;
+  }
+
+  render() {
+    if (this.props.simple) {
+      return this.renderSimpleHeader();
+    }
+    if (this.props.onlyContainer) {
+      return this.renderContainerHeader();
+    }
+    return this.renderHeader();
+  }
+}
+
+const mapStateToProps = (state) => {
+  return { auth: state.auth, isSideMenuOpen: state.nav.isSideMenuOpen };
+};
+
+let exportObj = connect(mapStateToProps, { setNavData })(withRouter(Header));
+
+export { exportObj as Header };

package/src/components/HubSidebar.js

@@ -0,0 +1,134 @@
+import React, { PureComponent } from 'react';
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import { setNavData } from '../actions';
+import { SideNavItem } from './SideNavItem';
+import { Button } from './Button';
+import { Text } from './Text';
+
+class HubSidebar extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showSidebar: false,
+    };
+  }
+
+  componentDidMount() {
+    this.props.setNavData({
+      condensedSidebar: true,
+    });
+    setTimeout(() => {
+      this.setState({
+        showSidebar: true,
+      });
+    }, 50);
+  }
+
+  componentWillUnmount() {
+    this.props.setNavData({
+      condensedSidebar: false,
+    });
+    this.setState({
+      showSidebar: false,
+    });
+  }
+
+  renderButton(item, index) {
+    return (
+      <div key={`button_${index}`} className="hubSidebar_newButtonContainer">
+        <Button buttonType={item.buttonType || 'primary'} isActive leftIcon={item.icon} narrow onClick={item.onClick}>
+          {item.text}
+        </Button>
+      </div>
+    );
+  }
+
+  renderNewButton(item, index) {
+    return this.renderButton({ ...item, icon: 'plus' }, index);
+  }
+
+  renderNavItem(item, index) {
+    return (
+      <SideNavItem
+        Text={item.text}
+        Icon={item.icon}
+        Link={item.url}
+        isFontAwesome={item.isFontAwesome}
+        isSVG={item.isSVG}
+        key={`navitem_${index}`}
+        selected={item.selected}
+        onClick={item.onClick}
+      />
+    );
+  }
+
+  renderSection(section, index) {
+    return (
+      <div className="hubSidebar_section" key={`section_${index}`}>
+        <Text type="h3" className="hubSidebar_sectionTitle">
+          {section.title}
+        </Text>
+        {section.items.map((item, itemIndex) => {
+          switch (item.type) {
+            case 'button':
+              return this.renderButton(item, itemIndex);
+            case 'newButton':
+              return this.renderNewButton(item, itemIndex);
+            case 'navItem':
+              return this.renderNavItem(item, itemIndex);
+            default:
+              return null;
+          }
+        })}
+      </div>
+    );
+  }
+
+  renderHelpGuide = () => {
+    if (!this.props.helpGuide) return null
+
+    const { text, url } = this.props.helpGuide
+
+    const onHelpGuidePress = () => {
+      if (!url) return
+      window.open(url, '_blank')
+    }
+    return (
+      <div className="hubSidebar_helpGuideContainer">
+        <Button buttonType="outlined" isActive leftIcon="info-circle" narrow onClick={onHelpGuidePress}>
+          {text || 'Help Guide'}
+        </Button>
+      </div>
+    )
+  }
+
+  render() {
+    return (
+      <div
+        className={`hubSidebar${this.state.showSidebar ? ' hubSidebar-show' : ''} ${this.props.className ? this.props.className : ''}`}
+        style={this.props.style}
+      >
+        {/* Top Add Button */}
+        <div className="hubSidebar_content">
+          {/* Title */}
+          {this.props.sections.map((section, i) => {
+            return this.renderSection(section, i);
+          })}
+        </div>
+
+        {/* Help Guide Button. */}
+        {this.renderHelpGuide()}
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return { auth: state.auth, isSideMenuOpen: state.nav.isSideMenuOpen };
+};
+
+let exportObj = connect(mapStateToProps, { setNavData })(HubSidebar);
+
+export { exportObj as HubSidebar };