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

package/src/components/InputGroup.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { FormGroup, FormControl, FormLabel, FormText } from 'react-bootstrap';
-import { COLOUR_RED } from '../colours';
-
-function InputGroup({ id, label, help, showError, required, ...props }) {
-  return (
-    <FormGroup controlId={id} validationState={showError ? 'error' : null}>
-      <FormLabel>
-        <span>{label}</span>
-        {required && <span style={{ color: COLOUR_RED, marginLeft: 5 }}>*</span>}
-      </FormLabel>
-      <FormControl {...props} />
-      {help && <FormText>{help}</FormText>}
-    </FormGroup>
-  );
-}
-
-export { InputGroup };

package/src/components/MakerPopup.js

@@ -1,310 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import Lottie from 'react-lottie';
-import _ from 'lodash';
-import { unauthedFunction } from '../session';
-import { Popup } from './Popup';
-import { GenericInput } from './GenericInput';
-import { Text } from './Text';
-import { Button } from './Button';
-import { DropdownInput } from './DropdownInput';
-import { typeActions, utilityActions } from '../apis';
-import Config from '../config';
-import { COLOUR_BRANDING_APP } from '../colours';
-import { getPluralOptions } from '../helper';
-
-class MakerPopup extends Component {
-  constructor(props) {
-    super(props);
-
-    this.sizes = [
-      { Key: 'A3', Title: 'A3' },
-      { Key: 'A4', Title: 'A4' },
-      { Key: 'A5', Title: 'A5' },
-    ];
-    this.formats = [
-      { Key: 'pdf', Title: 'PDF' },
-      { Key: 'png', Title: 'PNG' },
-      { Key: 'jpg', Title: 'JPEG' },
-    ];
-
-    this.lottieAnimationUrl =
-      'https://pluss-prd-media.s3-ap-southeast-2.amazonaws.com/assets/lottie-layout.json';
-
-    this.state = {
-      ...this.props.initialData,
-      logo: null,
-      colour: null,
-      submitting: false,
-      loadingBranding: true,
-      asset: null,
-      selectedSize: 'A4',
-      selectedFormat: 'pdf',
-      lottieConfig: {
-        loop: true,
-        autoplay: true,
-        name: 'lottie-layout',
-      },
-    };
-  }
-
-  componentDidMount() {
-    this.getBranding();
-    this.getLottieConfig();
-  }
-
-  getBranding() {
-    typeActions.getSiteBranding(this.props.auth.site).then((res) => {
-      console.log(res.data);
-      this.setState({
-        loadingBranding: false,
-        siteName: res.data.Name,
-        colour: res.data.MainBrandingColour || COLOUR_BRANDING_APP,
-        logo: res.data.Logo || Config.env.logo,
-        headerType: res.data.HeaderType || 'white',
-      });
-    });
-  }
-
-  getLottieConfig() {
-    unauthedFunction({
-      method: 'GET',
-      url: this.lottieAnimationUrl,
-    }).then((res) => {
-      this.setState({
-        lottieConfig: {
-          ...this.state.lottieConfig,
-          animationData: res.data,
-        },
-      });
-    });
-  }
-
-  handleChange(key, value) {
-    this.setState({ [key]: value });
-  }
-
-  selectSize = (size) => {
-    this.setState({
-      selectedSize: size,
-    });
-  };
-
-  getSelectedSizeTitle = () => {
-    return _.find(this.sizes, (f) => {
-      return f.Key === this.state.selectedSize;
-    }).Title;
-  };
-
-  selectFormat = (format) => {
-    this.setState({
-      selectedFormat: format,
-    });
-  };
-
-  getSelectedFormatTitle = () => {
-    return _.find(this.formats, (f) => {
-      return f.Key === this.state.selectedFormat;
-    }).Title;
-  };
-
-  compileData = () => {
-    const result = {};
-    this.props.inputs.forEach((input) => {
-      result[input.key] = this.state[input.key];
-    });
-    result.colour = this.state.colour;
-    result.logo = this.state.logo;
-    result.headerType = this.state.headerType;
-    return { ...result, ...this.props.requestData };
-  };
-
-  compileRequestData = () => {
-    const result = {};
-
-    if (!this.props.hideFormat) {
-      result.format = this.state.selectedFormat;
-    }
-    if (!this.props.hideSize) {
-      result.size = this.state.selectedSize;
-    }
-    return { ...result, ...this.props.requestData, data: this.compileData() };
-  };
-
-  isReadyToSubmit = () => {
-    if (this.state.loadingBranding) {
-      return false;
-    }
-    if (this.state.submitting) {
-      return false;
-    }
-    return true;
-  };
-
-  onGenerateAsset = () => {
-    if (!this.isReadyToSubmit()) {
-      return;
-    }
-    const data = this.compileRequestData();
-    this.setState({
-      submitting: true,
-    });
-
-    utilityActions
-      .generateMake(this.props.templateId, data)
-      .then((res) => {
-        this.setState({
-          submitting: false,
-          asset: res.data.resultUrl,
-        });
-      })
-      .catch((err) => {
-        this.setState({
-          submitting: false,
-        });
-      });
-  };
-
-  downloadAsset = () => {
-    window.open(this.state.asset, '_blank');
-  };
-
-  getButtons() {
-    if (this.state.submitting) {
-      return [];
-    }
-    if (this.state.asset) {
-      return [
-        {
-          type: 'tertiary',
-          onClick: this.props.onClose,
-          isActive: true,
-          text: 'Done',
-        },
-      ];
-    }
-    return [
-      {
-        type: 'primary',
-        onClick: this.onGenerateAsset,
-        isActive: this.isReadyToSubmit(),
-        text: 'Create',
-      },
-      {
-        type: 'tertiary',
-        onClick: this.props.onClose,
-        isActive: true,
-        text: 'Cancel',
-      },
-    ];
-  }
-
-  renderInput(input) {
-    if (input.type === 'array') {
-      return (
-        <div className="marginTop-16">
-          <Text type="formLabel">{input.title}</Text>
-          <Text type="body">
-            {this.state[input.key].length} {getPluralOptions(this.state[input.key].length, 'entry', 'entries')}
-          </Text>
-        </div>
-      );
-    }
-    return (
-      <GenericInput
-        key={input.key}
-        id={`maker_${input.key}`}
-        type={input.type}
-        label={input.title}
-        value={this.state[input.key]}
-        onChange={(e) => this.setState({ [input.key]: e.target.value })}
-        alwaysShowLabel
-        disabled={input.readOnly}
-        placeholder={input.placeholder}
-      />
-    );
-  }
-
-  renderContent() {
-    if (this.state.submitting) {
-      return (
-        <div className="flex flex-column flex-center">
-          {this.state.lottieConfig.animationData && (
-            <Lottie
-              key="lottie-layout"
-              height={260}
-              width={260}
-              options={this.state.lottieConfig}
-              isClickToPauseDisabled
-            />
-          )}
-          <Text type="h3" className="marginTop-16">
-            Generating
-          </Text>
-        </div>
-      );
-    }
-    if (this.state.asset) {
-      return (
-        <div>
-          <Text type="h4">Your file is ready</Text>
-          <Button leftIcon="download" buttonType="primary" onClick={this.downloadAsset} isActive className="marginTop-16">
-            Download
-          </Button>
-        </div>
-      );
-    }
-    return (
-      <div>
-        {!this.props.hideSize && (
-          <DropdownInput
-            id="size"
-            label="Size"
-            placeholder="Size"
-            value={this.getSelectedSizeTitle()}
-            options={this.sizes}
-            onSelect={this.selectSize}
-          />
-        )}
-        {!this.props.hideFormat && (
-          <DropdownInput
-            id="format"
-            label="Format"
-            placeholder="Format"
-            value={this.getSelectedFormatTitle()}
-            options={this.formats}
-            onSelect={this.selectFormat}
-          />
-        )}
-        {this.props.inputs.map((input) => {
-          return this.renderInput(input);
-        })}
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <Popup
-        title={this.props.title}
-        buttons={this.getButtons()}
-        onClose={this.props.onClose}
-        hasPadding
-        minWidth={this.props.minWidth}
-        maxWidth={this.props.maxWidth}
-        minHeight={this.props.minHeight}
-        maxHeight={this.props.maxHeight}
-      >
-        {this.renderContent()}
-      </Popup>
-    );
-  }
-}
-
-const mapStateToProps = (state) => {
-  return { auth: state.auth };
-};
-
-let exportObj = connect(mapStateToProps, {})(MakerPopup);
-
-export { exportObj as MakerPopup };

package/src/components/MoreMenu.js

@@ -1,22 +0,0 @@
-import React, { Component } from 'react';
-
-class MoreMenu extends Component {
-  render() {
-    return (
-      <div className="moreMenu">
-        {this.props.options.map((ev, index) => {
-          if (ev != null) {
-            return (
-              <div className="moreMenu_option" key={ev.key} onClick={ev.onPress}>
-                {ev.text}
-              </div>
-            );
-          }
-          return null;
-        })}
-      </div>
-    );
-  }
-}
-
-export { MoreMenu };

package/src/components/OptionsSection.js

@@ -1,84 +0,0 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { COLOUR_BRANDING_MAIN } from '../colours';
-import { SVGIcon } from './SVGIcon';
-import { Text } from './Text';
-
-class OptionsSection extends Component {
-  getSelectedOption() {
-    return _.find(this.props.options, (o) => this.props.selected === o.key);
-  }
-
-  getTitle() {
-    const selectedOption = this.getSelectedOption();
-    if (!selectedOption) {
-      return '';
-    }
-    return selectedOption.text;
-  }
-
-  renderIcon(o, isSelected) {
-    switch (o.iconType) {
-      case 'fa':
-        return <FontAwesomeIcon className="optionsButton_icon" icon={o.icon} />;
-      default:
-        return <SVGIcon icon={o.icon} colour={isSelected ? '#fff' : COLOUR_BRANDING_MAIN} />;
-    }
-  }
-
-  renderOptionButton(o) {
-    const isSelected = this.props.selected === o.key;
-    return (
-      <div
-        className={`optionsButton${isSelected ? ' optionsButton-selected' : ''}`}
-        key={o.key}
-        onClick={() => {
-          this.props.selectOption(o.key);
-        }}
-      >
-        <div className="optionsButton_iconContainer">{this.renderIcon(o, isSelected)}</div>
-        <Text type="formLabelSmall" className="optionsButton_text">
-          {o.text}
-        </Text>
-      </div>
-    );
-  }
-
-  renderContent() {
-    const selectedOption = this.getSelectedOption();
-    if (selectedOption && selectedOption.content) {
-      return selectedOption.content;
-    }
-    return this.props.children;
-  }
-
-  render() {
-    return (
-      <div className={`optionsSection${this.props.overflowButtons ? ' optionsSection-overflowButtons' : ''}`}>
-        <div className="optionsSection_banner">
-          <div className="optionsSection_banner_top">
-            <Text type="formTitleMedium" className="optionsSection_banner_top_title">
-              More Options
-            </Text>
-          </div>
-          <div className="optionsSection_banner_buttonSection">
-            {this.props.options.map((o) => {
-              return this.renderOptionButton(o);
-            })}
-          </div>
-        </div>
-        <div className="optionsContent">
-          <div className="optionsContent_box">
-            <div className="optionsContent_box_top">
-              <Text type="formTitleSmall">{this.getTitle()}</Text>
-            </div>
-            {this.renderContent()}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export { OptionsSection };

package/src/components/OverlayPage.js

@@ -1,74 +0,0 @@
-import React, { Component } from 'react';
-
-class OverlayPage extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      width: 0,
-      height: 0,
-    };
-    this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
-  }
-
-  componentDidMount() {
-    this.updateWindowDimensions();
-    window.addEventListener('resize', this.updateWindowDimensions);
-    // setTimeout(() => {
-    //     this.setState({ opacity: 1 });
-    // }, 100);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.updateWindowDimensions);
-  }
-
-  updateWindowDimensions() {
-    this.setState({ width: window.innerWidth, height: window.innerHeight });
-  }
-
-  renderContent() {
-    if (this.props.fullPage) {
-      return (
-        <div className="overlayPage-full" style={this.props.fullPageStyle}>
-          {this.props.children}
-        </div>
-      );
-    }
-    return this.props.children;
-  }
-
-  render() {
-    return (
-      <div style={{ ...styles.pageWrapper, ...this.props.style }}>
-        <div
-          style={{
-            ...styles.backgroundOverlay,
-            ...this.props.backgroundStyle,
-          }}
-        />
-        {this.renderContent()}
-      </div>
-    );
-  }
-}
-
-const styles = {
-  pageWrapper: {
-    position: 'fixed',
-    zIndex: 100,
-    top: 0,
-    left: 0,
-    height: '100vh',
-  },
-  backgroundOverlay: {
-    position: 'fixed',
-    width: '100vw',
-    height: '100vh',
-    backgroundColor: '#3f4264',
-    top: 0,
-    left: 0,
-    zIndex: -1,
-  },
-};
-
-export { OverlayPage };

package/src/components/OverlayPageBottomButtons.js

@@ -1,48 +0,0 @@
-import React, { Component } from 'react';
-import { LINEGREY } from '../colours';
-
-class OverlayPageBottomButtons extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      opacity: 0,
-    };
-  }
-
-  componentDidMount() {
-    setTimeout(() => {
-      this.setState({ opacity: 1 });
-    }, 100);
-  }
-
-  render() {
-    return (
-      <div
-        className="animateOpacity"
-        style={{
-          ...styles.wrapper,
-          opacity: this.state.opacity,
-          ...this.props.style,
-        }}
-      >
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-const styles = {
-  wrapper: {
-    padding: 12,
-    paddingRight: 24,
-    width: '100%',
-    maxWidth: '100vw',
-    backgroundColor: '#fff',
-    borderTop: '1px solid',
-    borderTopColor: LINEGREY,
-    display: 'flex',
-    justifyContent: 'flex-end',
-  },
-};
-
-export { OverlayPageBottomButtons };

package/src/components/OverlayPageContents.js

@@ -1,48 +0,0 @@
-import React, { Component } from 'react';
-
-class OverlayPageContents extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      opacity: 0,
-    };
-  }
-
-  componentDidMount() {
-    setTimeout(() => {
-      this.setState({ opacity: 1 });
-    }, 100);
-  }
-
-  render() {
-    return (
-      <div
-        id={this.props.id}
-        className="animateOpacity"
-        style={{
-          ...styles.wrapper,
-          height: this.props.noBottomButtons ? '100%' : 'calc(100% - 57px)',
-          opacity: this.state.opacity,
-          ...this.props.style,
-        }}
-      >
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-const styles = {
-  wrapper: {
-    clear: 'both',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    overflowX: 'auto',
-    fontSize: 0,
-    width: 'fit-content',
-    maxWidth: '100vw',
-    opacity: 0,
-  },
-};
-
-export { OverlayPageContents };

package/src/components/OverlayPageSection.js

@@ -1,38 +0,0 @@
-import React, { Component } from 'react';
-
-class OverlayPageSection extends Component {
-  getClassName() {
-    if (this.props.className) {
-      return 'pageSectionWrapper ' + this.props.className;
-    }
-    return 'pageSectionWrapper';
-  }
-
-  render() {
-    return (
-      <div
-        {...this.props}
-        className={this.getClassName()}
-        style={{
-          ...styles.wrapper,
-          ...this.props.style,
-        }}
-      >
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-const styles = {
-  wrapper: {
-    /* height: '100%',
-        overflowY: 'auto',
-        backgroundColor: '#fff',
-        padding: 24,
-        display: 'inline-block',
-        verticalAlign: 'top' */
-  },
-};
-
-export { OverlayPageSection };

package/src/components/P60Icon.js

@@ -1,40 +0,0 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-
-class P60Icon extends Component {
-  state = {
-    doublePaths: ['add-image', 'add-circle', 'facility', 'news'],
-    triplePaths: [],
-  };
-
-  renderIconPaths() {
-    if (_.includes(this.state.doublePaths, this.props.icon)) {
-      return (
-        <span>
-          <span className="path1" />
-          <span className={`path2${this.props.icon !== 'add-image' ? ' text-white' : ''}`} />
-        </span>
-      );
-    }
-    if (_.includes(this.state.triplePaths, this.props.icon)) {
-      return (
-        <span>
-          <span className="path1" />
-          <span className="path2" />
-          <span className="path3" />
-        </span>
-      );
-    }
-    return null;
-  }
-
-  render() {
-    return (
-      <div {...this.props} className={`${this.props.className} p60icon-${this.props.icon}`}>
-        {this.renderIconPaths()}
-      </div>
-    );
-  }
-}
-
-export { P60Icon };

package/src/components/PageTitle.js

@@ -1,13 +0,0 @@
-import React, { Component } from 'react';
-
-class PageTitle extends Component {
-  render() {
-    return (
-      <p className="managingPageTitle" {...this.props}>
-        {this.props.children}
-      </p>
-    );
-  }
-}
-
-export { PageTitle };