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

package/src/components/Button.js

@@ -1,66 +0,0 @@
-import React, { Component } from 'react';
-import FontAwesome from 'react-fontawesome';
-import { SVGIcon } from './SVGIcon';
-
-class Button extends Component {
-  getClasses() {
-    let string = '';
-    if (this.props.inline) string = string + 'buttonWrapper--inline ';
-    if (this.props.isActive) string = string + 'button--active ';
-    if (this.props.buttonType) string = string + `button--${this.props.buttonType}`;
-    if (this.props.compact) string = string + ' buttonWrapper--compact';
-    if (this.props.narrow) string = string + ' buttonWrapper--narrow';
-    if (this.props.noHoverHighlight) string = string + ' button--noHoverHighlight';
-    if (this.props.className) string = string + ' ' + this.props.className;
-    return string;
-  }
-
-  getButtonClasses() {
-    if (this.props.buttonClassName) {
-      return `button ${this.props.buttonClassName}`;
-    }
-    return 'button';
-  }
-
-  getButtonTextClasses() {
-    let result = 'buttonText';
-    if (this.props.leftIcon) {
-      result = result + ` buttonTextWithIcon`;
-    }
-    if (this.props.buttonTextClassName) {
-      result = result + ` ${this.props.buttonTextClassName}`;
-    }
-    return result;
-  }
-
-  buttonClick() {
-    if (this.props.onClick) {
-      this.props.onClick();
-    }
-  }
-
-  renderLeftIcon() {
-    if (!this.props.leftIcon) {
-      return null;
-    }
-    if (this.props.leftIconType === 'svg') {
-      return <SVGIcon icon={this.props.leftIcon} className="buttonTextWithIcon_icon" colour={this.props.leftIconColour} />;
-    }
-    return <FontAwesome name={this.props.leftIcon} className="buttonTextWithIcon_icon" />;
-  }
-
-  render() {
-    return (
-      <div className={`buttonWrapper ${this.getClasses()}`} style={{ ...this.props.buttonStyle }}>
-        <div onClick={() => this.buttonClick()} className={this.getButtonClasses()} style={{ ...this.props.style }}>
-          <div className={this.getButtonTextClasses()} style={{ ...this.props.textStyle }}>
-            {this.renderLeftIcon()}
-            {this.props.children}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export { Button };

package/src/components/CheckBox.js

@@ -1,77 +0,0 @@
-import React, { PureComponent } from 'react';
-import FontAwesome from 'react-fontawesome';
-import _ from 'lodash';
-
-class CheckBox extends PureComponent {
-  generateClassNames() {
-    let result = 'checkBox';
-    if (this.props.isActive) {
-      result = result + ' checkBox--active';
-    }
-    if (this.props.disabled) {
-      result = result + ' checkBox--disabled';
-    }
-    if (this.props.noHoverHighlight) {
-      result = result + ' checkBox--noHoverHighlight';
-    }
-    return result;
-  }
-
-  getLabelClasses() {
-    let result = 'actionText pointer';
-    if (this.props.disabled) {
-      result = result + ' actionText--disabled';
-    }
-    return result;
-  }
-
-  getBoxStyle() {
-    const result = {};
-    if (this.props.highlightColour && this.props.isActive) {
-      result.borderColor = this.props.highlightColour;
-      result.backgroundColor = this.props.highlightColour;
-    }
-    return result;
-  }
-
-  onChange = (e) => {
-    if (this.props.disabled) {
-      return;
-    }
-    return this.props.onChange(e);
-  };
-
-  render() {
-    return (
-      <div className={this.props.className}>
-        <div className={this.props.showWarning ? 'checkBox--error' : null} style={{ ...styles.row, ...this.props.style }}>
-          <div className={this.generateClassNames()} onClick={this.onChange} style={this.getBoxStyle()}>
-            <div className="checkBoxTick">
-              <FontAwesome className="checkBoxTick-font" name={'check'} />
-            </div>
-          </div>
-          {!_.isEmpty(this.props.label) && (
-            <div
-              className={this.getLabelClasses()}
-              style={{ marginLeft: 8, fontSize: 14, lineHeight: '20px', ...this.props.labelStyle }}
-              onClick={this.onChange}
-            >
-              {this.props.label}
-            </div>
-          )}
-        </div>
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-const styles = {
-  row: {
-    display: 'flex',
-    flexDirection: 'row',
-    marginBottom: 8,
-  },
-};
-
-export { CheckBox };

package/src/components/ColourOptions.js

@@ -1,197 +0,0 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import FontAwesome from 'react-fontawesome';
-import { ChromePicker } from 'react-color';
-import tinycolor from 'tinycolor2';
-import { Tabs } from './Tabs';
-
-class ColourOptions extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedColour: props.value || '',
-      colour: props.value,
-      selectedOption: props.defaultTab || 'vibrant',
-      colourCircleTop: 0,
-      colourCircleLeft: 0,
-    };
-  }
-
-  componentDidMount() {
-    this.setColourCircle();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.value !== prevProps.value) {
-      const { value } = this.props;
-      this.setState({ selectedColour: value, colour: value }, this.setColourCircle);
-    }
-  }
-
-  setColourCircle = () => {
-    const tc = tinycolor(this.state.colour);
-    this.setState({
-      colourCircleTop: 100 - (100 * tc.getBrightness()) / 255,
-      colourCircleLeft: (100 * tc.toHsv().h) / 360,
-    });
-  };
-
-  getQuickChoiceTabs() {
-    const { options } = this.props;
-    const optionsArray = typeof options === 'string' ? options.split(',').map((o) => o.trim()) : options;
-    const available = [
-      {
-        value: 'vibrant',
-        text: 'Vibrant',
-      },
-      {
-        value: 'soft',
-        text: 'Soft',
-      },
-      {
-        value: 'picker',
-        text: 'Picker',
-      },
-    ];
-    return !optionsArray || optionsArray.length === 0 ? available : available.filter((o) => optionsArray.includes(o.value));
-  }
-
-  onColourChange = (color) => {
-    // console.log('onColourChange', color);
-    const colour = (typeof color === 'object' ? color.hex : color).toUpperCase();
-    this.setState({ selectedColour: colour, colour }, () => {
-      this.setColourCircle();
-      const { onColourSelected } = this.props;
-      if (onColourSelected) onColourSelected(this.state.colour);
-    });
-  };
-
-  onSelectOption = (selectedOption) => {
-    this.setState({ selectedOption });
-  };
-
-  renderColourQuickChoicesCircle(colour, selectedColour) {
-    const isSelected = selectedColour.toLowerCase() === colour.toLowerCase();
-    return (
-      <div
-        className={`colourQuickChoices_circle${isSelected ? ' colourQuickChoices_circle-selected' : ''}`}
-        style={{ backgroundColor: colour }}
-        onClick={() => this.onColourChange(colour)}
-      >
-        <FontAwesome name="check" className="colourQuickChoices_circle_tick" />
-      </div>
-    );
-  }
-
-  renderColourOptions() {
-    const { selectedColour, selectedOption } = this.state;
-
-    let content;
-    switch (selectedOption) {
-      case 'picker':
-        content = (
-          <div className="flex flex-center-row colourQuickChoices" style={{ marginBottom: 'unset' }}>
-            <ChromePicker color={selectedColour} onChangeComplete={this.onColourChange} disableAlpha className="chrome-picker-noShadow" />
-          </div>
-        );
-        break;
-      case 'vibrant':
-        content = (
-          <div className="flex flex-between colourQuickChoices" style={{ marginBottom: 'unset' }}>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#c44569', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#f1a459', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#38ada9', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#7064a7', selectedColour)}
-            </div>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#ea4c88', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#e8bb67', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#60a3bc', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#546de5', selectedColour)}
-            </div>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#e66767', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#94d0c5', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#5badda', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#dfad8c', selectedColour)}
-            </div>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#ff6c5c', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#7abf9e', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#9fcfd9', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#dd91a7', selectedColour)}
-            </div>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#f19066', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#a1ab94', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#a67db7', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#596275', selectedColour)}
-            </div>
-          </div>
-        );
-        break;
-      case 'soft':
-        content = (
-          <div className="flex flex-between colourQuickChoices" style={{ marginBottom: 'unset' }}>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#eacdd0', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#a4c9d7', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#c6b9c0', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#cdc4af', selectedColour)}
-            </div>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#d6b7b1', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#eaf2f4', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#cce0db', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#b9bee4', selectedColour)}
-            </div>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#9bd3cb', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#f1d7bb', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#fcbc7b', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#caeff5', selectedColour)}
-            </div>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#e0dceb', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#b1becd', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#e6cfc5', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#cfd6df', selectedColour)}
-            </div>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#f39ca4', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#c0adc5', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#fcbca4', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#c5ceb9', selectedColour)}
-            </div>
-          </div>
-        );
-        break;
-      default:
-        content = null;
-        break;
-    }
-    const tabs = this.getQuickChoiceTabs();
-
-    return (
-      <div>
-        {tabs && tabs.length > 1 ? (
-          <Tabs
-            onSelectTab={this.onSelectOption}
-            selectedTab={selectedOption}
-            tabs={tabs}
-            containerStyle={{ display: 'flex' }}
-            tabStyle={{ flex: 1 }}
-          />
-        ) : null}
-        <div className="flex flex-center flex-center-row">{content}</div>
-      </div>
-    );
-  }
-
-  render() {
-    return this.renderColourOptions();
-  }
-}
-
-export { ColourOptions };

package/src/components/ColourPicker.js

@@ -1,267 +0,0 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import FontAwesome from 'react-fontawesome';
-import { ChromePicker } from 'react-color';
-import tinycolor from 'tinycolor2';
-import { Popup } from './Popup';
-import { Tabs } from './Tabs';
-
-class ColourPicker extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedColour: props.value,
-      colour: props.value,
-      selectedOption: props.defaultTab || 'vibrant',
-      colourPickerOpen: false,
-      colourCircleTop: 0,
-      colourCircleLeft: 0,
-    };
-  }
-
-  componentDidMount() {
-    this.setColourCircle();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.value !== prevProps.value) {
-      const { value } = this.props;
-      this.setState({ selectedColour: value, colour: value }, this.setColourCircle);
-    }
-  }
-
-  setColourCircle = () => {
-    const tc = tinycolor(this.state.colour);
-    this.setState({
-      colourCircleTop: 100 - (100 * tc.getBrightness()) / 255,
-      colourCircleLeft: (100 * tc.toHsv().h) / 360,
-    });
-  };
-
-  getQuickChoiceTabs() {
-    const { options } = this.props;
-    const optionsArray = typeof options === 'string' ? options.split(',').map((o) => o.trim()) : options;
-    const available = [
-      {
-        value: 'vibrant',
-        text: 'Vibrant',
-      },
-      {
-        value: 'soft',
-        text: 'Soft',
-      },
-      {
-        value: 'picker',
-        text: 'Picker',
-      },
-    ];
-    return !optionsArray || optionsArray.length === 0 ? available : available.filter((o) => optionsArray.includes(o.value));
-  }
-
-  onTogglePopup = () => {
-    if (this.props.disabled) return;
-    this.setState({ colourPickerOpen: !this.state.colourPickerOpen });
-  };
-
-  onColourChange = (color) => {
-    // console.log('onColourChange', color);
-    let colour = color;
-    if (typeof color === 'object') {
-      colour = color.hex;
-    }
-    this.setState({ selectedColour: colour.toUpperCase() });
-  };
-
-  onSelectOption = (selectedOption) => {
-    this.setState({ selectedOption });
-  };
-
-  onDone = () => {
-    const { colourPickerOpen, selectedColour } = this.state;
-    this.setState({ colourPickerOpen: !colourPickerOpen, colour: selectedColour }, () => {
-      this.setColourCircle();
-
-      const { onColourSelected } = this.props;
-      if (onColourSelected) onColourSelected(this.state.colour);
-    });
-  };
-
-  onCancel = () => {
-    const { colourPickerOpen, colour } = this.state;
-    this.setState({ colourPickerOpen: !colourPickerOpen, selectedColour: colour });
-  };
-
-  renderColourQuickChoicesCircle(colour, selectedColour) {
-    const isSelected = selectedColour.toLowerCase() === colour.toLowerCase();
-    return (
-      <div
-        className={`colourQuickChoices_circle${isSelected ? ' colourQuickChoices_circle-selected' : ''}`}
-        style={{ backgroundColor: colour }}
-        onClick={() => this.onColourChange(colour)}
-      >
-        <FontAwesome name="check" className="colourQuickChoices_circle_tick" />
-      </div>
-    );
-  }
-
-  renderColourOptions() {
-    const { selectedColour, selectedOption } = this.state;
-
-    let content;
-    switch (selectedOption) {
-      case 'picker':
-        content = (
-          <div className="flex flex-center-row colourQuickChoices" style={{ marginBottom: 'unset' }}>
-            <ChromePicker color={selectedColour} onChangeComplete={this.onColourChange} disableAlpha className="chrome-picker-noShadow" />
-          </div>
-        );
-        break;
-      case 'vibrant':
-        content = (
-          <div className="flex flex-between colourQuickChoices" style={{ marginBottom: 'unset' }}>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#c44569', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#f1a459', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#38ada9', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#7064a7', selectedColour)}
-            </div>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#ea4c88', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#e8bb67', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#60a3bc', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#546de5', selectedColour)}
-            </div>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#e66767', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#94d0c5', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#5badda', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#dfad8c', selectedColour)}
-            </div>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#ff6c5c', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#7abf9e', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#9fcfd9', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#dd91a7', selectedColour)}
-            </div>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#f19066', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#a1ab94', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#a67db7', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#596275', selectedColour)}
-            </div>
-          </div>
-        );
-        break;
-      case 'soft':
-        content = (
-          <div className="flex flex-between colourQuickChoices" style={{ marginBottom: 'unset' }}>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#eacdd0', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#a4c9d7', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#c6b9c0', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#cdc4af', selectedColour)}
-            </div>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#d6b7b1', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#eaf2f4', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#cce0db', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#b9bee4', selectedColour)}
-            </div>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#9bd3cb', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#f1d7bb', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#fcbc7b', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#caeff5', selectedColour)}
-            </div>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#e0dceb', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#b1becd', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#e6cfc5', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#cfd6df', selectedColour)}
-            </div>
-            <div className="colourQuickChoices_column">
-              {this.renderColourQuickChoicesCircle('#f39ca4', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#c0adc5', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#fcbca4', selectedColour)}
-              {this.renderColourQuickChoicesCircle('#c5ceb9', selectedColour)}
-            </div>
-          </div>
-        );
-        break;
-      default:
-        content = null;
-        break;
-    }
-    const tabs = this.getQuickChoiceTabs();
-
-    return (
-      <div>
-        {tabs && tabs.length > 1 ? <Tabs onSelectTab={this.onSelectOption} selectedTab={selectedOption} tabs={tabs} /> : null}
-        <div className="flex flex-center flex-center-row">{content}</div>
-      </div>
-    );
-  }
-
-  renderColourPopup() {
-    const { colourPickerOpen } = this.state;
-    if (!colourPickerOpen) return null;
-    const { title } = this.props;
-
-    return (
-      <Popup
-        title={title || `Colour Picker`}
-        maxWidth={500}
-        hasPadding
-        buttons={[
-          {
-            type: 'primary',
-            onClick: this.onDone,
-            style: { width: 100 },
-            isActive: true,
-            text: 'Done',
-          },
-          {
-            type: 'outlinedAction',
-            onClick: this.onCancel,
-            style: { width: 100 },
-            isActive: true,
-            text: 'Cancel',
-          },
-        ]}
-      >
-        {this.renderColourOptions()}
-      </Popup>
-    );
-  }
-
-  render() {
-    const { colourCircleTop, colourCircleLeft, colour } = this.state;
-    const { children, showHex } = this.props;
-
-    return (
-      <div>
-        <div className="flex flex-center">
-          {children ? (
-            <div onClick={this.onTogglePopup}>{children}</div>
-          ) : (
-            <div className="colourPicker_button" style={{ width: 80, marginBottom: 'unset' }} onClick={this.onTogglePopup}>
-              <div className="colourPicker_rainbow">
-                <div
-                  className="colourPicker_rainbow_circle"
-                  style={{
-                    top: `${colourCircleTop}%`,
-                    left: `${colourCircleLeft}%`,
-                  }}
-                ></div>
-              </div>
-            </div>
-          )}
-          {showHex ? <div className="marginLeft-10">{colour && colour.toUpperCase()}</div> : null}
-        </div>
-        {this.renderColourPopup()}
-      </div>
-    );
-  }
-}
-
-export { ColourPicker };

package/src/components/Comment.js

@@ -1,46 +0,0 @@
-import React, { Component } from 'react';
-import moment from 'moment';
-import { get1400, toParagraphed } from '../helper';
-import { ProfilePic } from './ProfilePic';
-import _ from 'lodash';
-
-class Comment extends Component {
-  renderImage(image) {
-    if (_.isEmpty(image)) {
-      return null;
-    }
-    return (
-      <div className="imageGrid">
-        <a href={image} target="_blank" rel="noopener noreferrer">
-          <div className="imageGrid_image" style={{ backgroundImage: `url('${get1400(image)}')` }}></div>
-        </a>
-      </div>
-    );
-  }
-
-  renderComment() {
-    const { comment } = this.props;
-    return (
-      <div key={comment.Id} className="comment">
-        <p className="comment_text">{toParagraphed(comment.Comment)}</p>
-        {this.renderImage(comment.Image)}
-        <div className="comment_bottom">
-          <ProfilePic className="comment_profilePic" size={25} image={comment.User.profilePic} />
-          <p className="comment_name">{comment.User.displayName}</p>
-          <p className="comment_time">{moment.utc(comment.Timestamp).local().format('D MMM YYYY • h:mma')}</p>
-        </div>
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <div>
-        {this.renderComment()}
-        {this.props.bottomContent}
-      </div>
-    );
-  }
-}
-
-export { Comment };