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

package/src/components/Button.js

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

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

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

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

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