@plusscommunities/pluss-core-web 1.0.2 → 1.0.6

package/src/components/Tag.js

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import FontAwesome from 'react-fontawesome';
+
+class Tag extends Component {
+  renderLeft() {
+    if (!this.props.leftIcon) {
+      return null;
+    }
+    return (
+      <FontAwesome
+        name={this.props.leftIcon}
+        className={`tag_icon tag_icon-left ${this.props.leftClick ? 'tag_icon-clickable' : ''}`}
+        style={this.props.leftIconStyle}
+        onClick={this.props.leftClick}
+      />
+    );
+  }
+
+  renderRight() {
+    if (!this.props.rightIcon) {
+      return null;
+    }
+    return (
+      <FontAwesome
+        name={this.props.rightIcon}
+        className={`tag_icon tag_icon-right ${this.props.rightClick ? 'tag_icon-clickable' : ''}`}
+        style={this.props.rightIconStyle}
+        onClick={this.props.rightClick}
+      />
+    );
+  }
+
+  renderText() {
+    if (!this.props.text) {
+      return null;
+    }
+    return <span className="tag_text">{this.props.text}</span>;
+  }
+
+  render() {
+    return (
+      <div
+        onClick={this.props.onClick}
+        className={`tag ${this.props.onClick ? 'tag-clickable' : ''} ${this.props.className || ''} ${
+          this.props.leftIcon || this.props.rightIcon ? 'tag-hasIcon' : ''
+        }`}
+        style={this.props.style}
+      >
+        <div className="tag_inner">
+          {this.renderLeft()}
+          <div className={`tag_center ${this.props.centerClass}`}>
+            {this.renderText()}
+            {this.props.children}
+          </div>
+          {this.renderRight()}
+        </div>
+      </div>
+    );
+  }
+}
+
+export { Tag };

package/src/components/TextFormatPopup.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import { Button } from './Button';
+import { COLOUR_BRANDING_MAIN } from '../colours';
+
+class TextFormatPopup extends Component {
+  render() {
+    if (!this.props.isOpen) {
+      return null;
+    }
+    return (
+      <div className="successPopupBackground pointer">
+        <div className="successPopup">
+          <p className={`successPopup_text successPopup_text-small`}>
+            <br />
+            <span style={{ fontWeight: 600 }}>Text formatting:</span>
+            <br />
+            <br />
+            Surround text with <span style={{ fontWeight: 400 }}>**</span> to create bold text:
+            <br />
+            <span style={{ fontWeight: 400 }}>**</span>Some Text<span style={{ fontWeight: 400 }}>**</span> ={' '}
+            <span style={{ fontWeight: 600 }}>Some Text</span>
+            <br />
+            <br />
+            Surround text with <span style={{ fontWeight: 400 }}>*t*</span> to create a title:
+            <br />
+            <span style={{ fontWeight: 400 }}>*t*</span>Some Text<span style={{ fontWeight: 400 }}>*t*</span> ={' '}
+            <span style={{ fontWeight: 600, color: COLOUR_BRANDING_MAIN, fontSize: 20 }}>Some Text</span>
+            <br />
+            <br />
+            Surround text with <span style={{ fontWeight: 400 }}>*s*</span> to create a smaller title:
+            <br />
+            <span style={{ fontWeight: 400 }}>*s*</span>Some Text<span style={{ fontWeight: 400 }}>*s*</span> ={' '}
+            <span style={{ fontWeight: 600, fontSize: 16 }}>Some Text</span>
+            <br />
+            <br />
+            Create links with <span style={{ fontWeight: 400 }}>[website|text]</span>:
+            <br />
+            <span style={{ fontWeight: 400 }}>[https://example.com|Click here]</span> ={' '}
+            <a href="https://example.com" target="_blank" rel="noopener noreferrer" style={{ fontWeight: 600, fontSize: 16 }}>
+              Click here
+            </a>
+          </p>
+          <div className="successPopup_buttons">
+            <Button buttonClassName="successPopup_button" buttonType="primary" isActive onClick={this.props.onClose}>
+              Close
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export { TextFormatPopup };

package/src/components/TimePicker.js

@@ -0,0 +1,205 @@
+import React, { Component } from 'react';
+import moment from 'moment';
+import _ from 'lodash';
+import { randomString } from '../helper';
+import { SVGIcon } from './SVGIcon';
+import { COLOUR_DUSK_LIGHT } from '../colours';
+
+class TimePicker extends Component {
+  state = {
+    id: randomString(),
+    selectedTime: this.props.optional ? this.props.selectedTime : moment(),
+    grid: [],
+    hourInput: '',
+    minuteInput: '',
+    mInput: '',
+  };
+
+  UNSAFE_componentWillMount() {
+    this.onNewProps(this.props, !this.props.optional);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.onNewProps(nextProps);
+  }
+
+  onNewProps(nextProps, forceUpdate) {
+    if (forceUpdate || nextProps.selectedTime !== this.props.selectedTime) {
+      let mDate = moment(nextProps.selectedTime, 'h:mma');
+      if (!mDate.isValid()) {
+        this.setState({
+          selectedTime: null,
+          hourInput: '',
+          minuteInput: '',
+          mInput: '',
+        });
+      } else {
+        const minutesFocused = document.getElementById(`time_minute_${this.state.id}`) === document.activeElement;
+        this.setState({
+          selectedTime: mDate,
+          hourInput: mDate.format('h'),
+          minuteInput: mDate.format(minutesFocused ? 'm' : 'mm'),
+          mInput: mDate.format('a'),
+        });
+      }
+    }
+  }
+
+  getDefaultTime() {
+    const result = moment();
+    result.hour(12);
+    result.minute(0);
+    result.second(0);
+    return result;
+  }
+
+  onChangeHour(event) {
+    let hour = 0;
+    if (!_.isEmpty(event.target.value)) {
+      hour = parseInt(event.target.value, 10);
+    }
+    if (isNaN(hour)) {
+      return;
+    }
+    hour = Math.max(Math.min(12, hour), 0);
+    const dateToUse = this.state.selectedTime || this.getDefaultTime();
+    const selectNext = hour > 1; // if hour is > 1, assume user is done typing and select minutes input
+    if (dateToUse.format('a') === 'pm') {
+      hour += 12;
+    }
+    dateToUse.hour(hour);
+    this.setState({
+      selectedTime: moment(dateToUse),
+    });
+
+    this.selectTime(dateToUse);
+
+    if (selectNext) {
+      this.select(`time_minute_${this.state.id}`);
+    }
+  }
+
+  onChangeMinute(event) {
+    let minute = 0;
+    if (!_.isEmpty(event.target.value)) {
+      minute = parseInt(event.target.value, 10);
+    }
+    if (isNaN(minute)) {
+      return;
+    }
+    minute = Math.max(Math.min(59, minute), 0);
+    const dateToUse = this.state.selectedTime || this.getDefaultTime();
+    dateToUse.minute(minute);
+    this.setState({
+      selectedTime: moment(dateToUse),
+    });
+
+    this.selectTime(dateToUse);
+
+    if (minute >= 10 || event.target.value === '00') {
+      this.select(`time_am_${this.state.id}`);
+    }
+  }
+
+  onBlurMinute() {
+    if (this.state.selectedTime) {
+      this.setState({
+        minuteInput: this.state.selectedTime.format('mm'),
+      });
+    }
+  }
+
+  onChangeM(event) {
+    const dateToUse = this.state.selectedTime || this.getDefaultTime();
+    if (event.target.value.toLowerCase().indexOf('a') > -1) {
+      // am
+      if (dateToUse.format('a') === 'pm') {
+        dateToUse.hour(dateToUse.hour() - 12);
+      }
+    } else {
+      // pm
+      if (dateToUse.format('a') === 'am') {
+        dateToUse.hour(dateToUse.hour() + 12);
+      }
+    }
+    this.setState({
+      selectedTime: moment(dateToUse),
+    });
+    this.selectTime(dateToUse);
+  }
+
+  selectTime(date) {
+    this.props.selectTime(moment(date).format(this.props.callbackFormat || 'h:mma'));
+  }
+
+  onClear = () => {
+    this.props.selectTime(undefined);
+  };
+
+  select(id) {
+    document.getElementById(id).select();
+  }
+
+  renderClear() {
+    if (!this.props.hasClear) return null;
+    return <SVGIcon colour={COLOUR_DUSK_LIGHT} icon="close" className="timepicker_clear" onClick={this.onClear} />;
+  }
+
+  render() {
+    const { disabled } = this.props;
+    if (disabled) {
+      return (
+        <div className="timepicker disabled">
+          <span
+            className="timepicker__span"
+            style={this.props.inputStyle}
+          >{`${this.state.hourInput} : ${this.state.minuteInput} ${this.state.mInput}`}</span>
+        </div>
+      );
+    }
+    return (
+      <div className={`timepicker ${this.props.className}`}>
+        <input
+          className="timepicker__input"
+          maxLength="2"
+          placeholder="hh"
+          type="text"
+          id={`time_hour_${this.state.id}`}
+          value={this.state.hourInput}
+          onChange={this.onChangeHour.bind(this)}
+          onClick={this.select.bind(this, `time_hour_${this.state.id}`)}
+          style={this.props.inputStyle}
+        />
+        <span className="timepicker__separator" style={this.props.inputStyle}>
+          :
+        </span>
+        <input
+          className="timepicker__input"
+          maxLength="2"
+          placeholder="mm"
+          type="text"
+          id={`time_minute_${this.state.id}`}
+          value={this.state.minuteInput}
+          onChange={this.onChangeMinute.bind(this)}
+          onBlur={this.onBlurMinute.bind(this)}
+          onClick={this.select.bind(this, `time_minute_${this.state.id}`)}
+          style={this.props.inputStyle}
+        />
+        <input
+          className="timepicker__input"
+          maxLength="2"
+          placeholder="pm"
+          type="text"
+          id={`time_am_${this.state.id}`}
+          value={this.state.mInput}
+          onChange={this.onChangeM.bind(this)}
+          onClick={this.select.bind(this, `time_am_${this.state.id}`)}
+          style={this.props.inputStyle}
+        />
+        {this.renderClear()}
+      </div>
+    );
+  }
+}
+
+export { TimePicker };

package/src/components/UserListing.js

@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import Config from '../config';
+
+class UserListing extends Component {
+  getSize() {
+    return this.props.size || 30;
+  }
+
+  renderRight() {
+    if (!this.props.rightContent) {
+      return null;
+    }
+    return this.props.rightContent;
+  }
+
+  renderSub() {
+    if (!this.props.subContent) {
+      return null;
+    }
+    return this.props.subContent;
+  }
+
+  render() {
+    return (
+      <div
+        style={{
+          minHeight: this.getSize() + 5,
+          display: 'flex',
+          cursor: this.props.onClick ? 'pointer' : 'default',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginTop: 10,
+          opacity: this.props.user && this.props.user.loading ? 0.5 : 1,
+        }}
+        onClick={this.props.onClick}
+      >
+        <div key={this.props.user.id} style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+          <div
+            style={{
+              height: this.getSize(),
+              width: this.getSize(),
+              borderRadius: this.getSize() / 2,
+              marginRight: 16,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+              backgroundImage: `url(${this.props.user.profilePic != null ? this.props.user.profilePic : Config.env.defaultProfileImage})`,
+            }}
+            alt="user profile pic"
+          />
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', height: this.getSize() }}>
+            <p className={`fontMedium fontSize-16 ${this.props.whiteText ? 'text-white' : 'text-dark'}`} style={{ margin: 0 }}>
+              {this.props.user.displayName}
+            </p>
+            {this.renderSub()}
+          </div>
+        </div>
+        {this.renderRight()}
+      </div>
+    );
+  }
+}
+
+export { UserListing };

package/src/components/index.js

@@ -1,16 +1,32 @@
 export * from './AddButton';
-export * from './Header';
+export * from './Attachment';
 export * from './Button';
+export * from './CheckBox';
+export * from './FileInput';
+export * from './GenericInput';
+export * from './Header';
+export * from './ImageInput';
+export * from './MoreMenu';
 export * from './OverlayPage';
 export * from './OverlayPageContents';
 export * from './OverlayPageSection';
 export * from './OverlayPageBottomButtons';
+export * from './PageTitle';
 export * from './Popup';
-export * from './GenericInput';
-export * from './Text';
-export * from './MoreMenu';
+export * from './ProfilePic';
+export * from './RadioButton';
 export * from './SVGIcon';
-export * from './Attachment';
+export * from './Tag';
+export * from './Text';
 export * from './SuccessPopup';
-export * from './RadioButton';
-export * from './PageTitle';
+export * from './Reactions';
+export * from './P60Icon';
+export * from './DatePicker';
+export * from './AnalyticsFilter';
+export * from './UserListing';
+export * from './TimePicker';
+export * from './AudienceSelector';
+export * from './TextFormatPopup';
+export * from './OptionsSection';
+export * from './DropdownInput';
+export * from './MakerPopup';

package/src/components/svg-icons.json

@@ -753,6 +753,12 @@
       "M178.311 2.004 C 87.676 15.215,30.305 107.168,58.678 193.750 C 76.421 247.894,137.348 337.201,195.639 394.509 L 200.781 399.564 205.924 394.509 C 256.562 344.724,318.348 257.743,337.154 209.766 C 355.423 163.157,354.546 122.291,334.420 82.420 C 305.408 24.945,242.664 -7.376,178.311 2.004 M213.281 51.920 C 293.860 62.807,328.376 160.222,272.339 218.596 C 215.121 278.201,114.779 245.874,102.671 163.935 C 93.272 100.319,149.564 43.312,213.281 51.920"
     ]
   },
+  "link-doc": {
+    "viewBox": "0 0 400 400",
+    "paths": [
+      "M96.665 25.652 C 77.862 32.241,62.840 48.025,57.895 66.390 C 56.622 71.119,56.092 121.559,56.444 204.421 L 57.000 335.000 61.512 343.444 C 68.589 356.688,77.317 365.370,89.637 371.420 L 101.000 377.000 200.000 377.000 L 299.000 377.000 310.363 371.420 C 322.683 365.370,331.411 356.688,338.488 343.444 C 344.728 331.766,346.732 133.877,340.770 118.000 C 336.740 107.267,268.882 37.140,254.000 28.329 L 245.000 23.000 176.000 22.516 C 113.769 22.079,105.986 22.386,96.665 25.652 M240.698 47.318 C 244.164 49.144,263.899 67.913,284.554 89.028 L 322.108 127.419 321.554 228.358 L 321.000 329.296 315.354 337.826 C 311.356 343.866,306.597 347.779,299.045 351.236 L 288.382 356.118 197.691 355.559 C 94.755 354.925,97.107 355.288,85.000 338.151 L 79.000 329.658 78.456 202.551 C 77.723 31.247,69.885 44.421,172.698 44.158 C 226.508 44.020,235.201 44.424,240.698 47.318 M218.159 134.591 C 210.508 137.033,186.864 158.128,184.922 164.245 C 180.280 178.873,197.293 181.980,210.084 168.840 C 226.466 152.009,236.283 149.883,247.200 160.800 C 258.117 171.717,255.991 181.534,239.160 197.916 C 228.397 208.393,227.010 215.949,234.902 221.120 C 247.584 229.429,276.032 197.335,275.989 174.768 C 275.931 145.097,247.385 125.265,218.159 134.591 M191.574 199.574 C 160.456 230.692,157.617 235.414,165.657 242.690 C 173.493 249.781,177.585 247.268,208.426 216.426 C 239.544 185.308,242.383 180.586,234.343 173.310 C 226.507 166.219,222.415 168.732,191.574 199.574 M141.755 205.693 C 94.661 253.824,152.141 313.408,201.302 267.420 C 215.624 254.023,217.651 249.817,213.120 242.902 C 207.949 235.010,200.393 236.397,189.916 247.160 C 173.590 263.933,161.413 266.010,151.121 253.779 C 142.288 243.281,144.933 233.567,160.840 218.084 C 171.337 207.865,172.899 200.258,165.555 195.113 C 158.421 190.117,155.897 191.239,141.755 205.693"
+    ]
+  },
   "template_retirement": {
     "viewBox": "0 0 20 20",
     "paths": [

package/src/config.js

@@ -6,6 +6,16 @@ const CoreConfig = {
     uploadBucket: '',
     colourBrandingMain: '',
     colourBrandingOff: '',
+    colourBrandingApp: '',
+    defaultProfileImage:
+      'https://pluss-prd-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:80aecdcb-9955-493e-a341-2f2263f64777/public/31164ebf4807a5f0de438dd02a/profilepic2.png',
+    utcOffset: '',
+    hasAvailableNews: false,
+    newsHaveTags: true,
+    defaultAllowComments: true,
+    makeApiKey: '',
+    logo: '',
+    clientName: '',
   },
   init: (environment) => {
     CoreConfig.env = environment;