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

package/src/components/CommentSection.js

@@ -1,116 +0,0 @@
-import React, { Component } from 'react';
-import FontAwesome from 'react-fontawesome';
-import _ from 'lodash';
-import Textarea from 'react-textarea-autosize';
-import { Text } from './Text';
-import { Comment } from './Comment';
-import { getFirstName, getPluralOptions } from '../helper';
-import { ProfilePic } from './ProfilePic';
-
-class CommentSection extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      commentInput: '',
-    };
-  }
-
-  onHandleChange = (event) => {
-    var stateChange = {};
-    stateChange[event.target.getAttribute('id')] = event.target.value;
-    this.setState(stateChange);
-  };
-
-  onAddComment = async () => {
-    const { commentInput } = this.state;
-    this.setState({ commentInput: '' });
-    this.props.onAddComment(commentInput);
-  };
-
-  getComments = () => {
-    if (!this.props.onlyParents) {
-      return this.props.comments;
-    }
-    return _.filter(this.props.comments, (c) => {
-      return !c.ParentId;
-    });
-  };
-
-  renderReplyText = (c) => {
-    if (!this.props.onOpenThread) {
-      return null;
-    }
-
-    const threadComments = _.filter(this.props.comments, (innerC) => {
-      return innerC.ParentId === c.Id;
-    });
-    if (_.isEmpty(threadComments)) {
-      return (
-        <div className="comment_reply">
-          <Text
-            className="comment_reply_button"
-            type="button"
-            onClick={() => {
-              this.props.onOpenThread(c);
-            }}
-          >{`Reply to ${getFirstName(c.User ? c.User.displayName : 'comment')}`}</Text>
-        </div>
-      );
-    }
-
-    const profilePics = _.take(
-      _.uniqBy(threadComments, (c) => c.UserId),
-      3,
-    );
-    return (
-      <div className="comment_reply comment_reply-hasReplies">
-        {profilePics.map((c) => {
-          return <ProfilePic className="comment_reply_profilePic" size={20} image={c.User.profilePic} />;
-        })}
-        <Text
-          className="comment_reply_button"
-          type="button"
-          onClick={() => {
-            this.props.onOpenThread(c);
-          }}
-        >{`${threadComments.length} repl${getPluralOptions(threadComments.length, 'y', 'ies')}`}</Text>
-      </div>
-    );
-  };
-
-  render() {
-    return (
-      <div>
-        {this.props.includeTitle && (
-          <Text type="formTitleSmall" className="marginBottom-16">
-            Comments
-          </Text>
-        )}
-        <div className="commentSection">
-          {this.getComments().map((c) => (
-            <Comment key={c.Id} comment={c} bottomContent={this.renderReplyText(c)} />
-          ))}
-        </div>
-        <div className="commentReply">
-          <div
-            className={`commentReply_button${!_.isEmpty(this.state.commentInput) ? ' commentReply_button-active' : ''}`}
-            onClick={this.onAddComment}
-          >
-            <FontAwesome className="commentReply_icon" name="paper-plane-o" />
-          </div>
-          <Textarea
-            id="commentInput"
-            placeholder="Reply here..."
-            type="text"
-            className="commentReply_input"
-            value={this.state.commentInput}
-            onChange={(e) => this.onHandleChange(e)}
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
-export { CommentSection };

package/src/components/DatePicker.js

@@ -1,290 +0,0 @@
-import React, { Component } from 'react';
-import moment from 'moment';
-import _ from 'lodash';
-import { P60Icon } from './P60Icon';
-
-class DatePicker extends Component {
-  state = {
-    shownMonth: new Date(),
-    grid: [],
-  };
-
-  UNSAFE_componentWillMount() {
-    this.onNewProps(this.props, true);
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.onNewProps(nextProps);
-  }
-
-  onNewProps(nextProps, forceUpdate) {
-    if (!!nextProps.shownMonth && nextProps.shownMonth !== this.props.shownMonth) {
-      const shownMonth = new Date(nextProps.shownMonth.getFullYear(), nextProps.shownMonth.getMonth() + 1, 0);
-      this.setState({ shownMonth });
-      this.generateGrid(shownMonth);
-    } else if (this.props.multiple && nextProps.selectedDates !== this.props.selectedDates) {
-      this.generateGrid(this.state.shownMonth, nextProps.selectedDates);
-    } else if (forceUpdate || nextProps.selectedDate !== this.props.selectedDate) {
-      let dateToUse = nextProps.selectedDate;
-      if (!(dateToUse instanceof Date)) {
-        dateToUse = new Date(dateToUse);
-      }
-      if (isNaN(dateToUse)) {
-        dateToUse = new Date();
-      }
-      const shownMonth = this.props.shownMonth ? this.state.shownMonth : dateToUse;
-      this.setState({
-        shownMonth: shownMonth,
-        selectedDate: dateToUse,
-      });
-      this.generateGrid(shownMonth, dateToUse);
-    }
-  }
-
-  getDate() {
-    if (!this.props.selectedDate) {
-      return 'Select day';
-    }
-    return moment(this.props.selectedDate).format('dddd, Do MMMM');
-  }
-
-  getShortDate() {
-    if (!this.props.selectedDate) {
-      return '';
-    }
-    return moment(this.props.selectedDate).format('DD/MM/YYYY');
-  }
-
-  getMonth() {
-    return moment(this.state.shownMonth).format('MMMM YYYY');
-  }
-
-  isDateSelected(date, selectedDate) {
-    if (this.props.multiple) {
-      return _.includes(selectedDate, date.format('DD-MM-YYYY'));
-    }
-    return date.isSame(selectedDate, 'date');
-  }
-
-  isDateEnabled(date) {
-    if (this.props.enabledDates) {
-      const found = this.props.enabledDates.find((d) => moment(d.day).format('YYYYMMDD') === date.format('YYYYMMDD'));
-      if (found) return found.enabled;
-    }
-    return null;
-  }
-
-  changeMonth(change) {
-    const newShownDate = new Date(this.state.shownMonth.getFullYear(), this.state.shownMonth.getMonth() + 1 + change, 0);
-    this.setState(
-      {
-        shownMonth: newShownDate,
-      },
-      () => {
-        if (this.props.changeMonth) this.props.changeMonth(this.state.shownMonth);
-      },
-    );
-    this.generateGrid(newShownDate);
-  }
-
-  selectRange(date) {
-    const d1 = moment(this.state.lastSelected, 'DD-MM-YYYY');
-    const d2 = moment(date, 'DD-MM-YYYY');
-
-    let startDate, endDate;
-
-    if (d1.valueOf() > d2.valueOf()) {
-      // clicked an earlier day
-      startDate = moment(d2);
-      endDate = moment(d1);
-    } else {
-      // clicked a later day
-      startDate = moment(d1);
-      endDate = moment(d2);
-    }
-
-    const dateRange = [startDate.format('DD-MM-YYYY')];
-    while (startDate.format('DD-MM-YYYY') !== endDate.format('DD-MM-YYYY')) {
-      startDate.add(1, 'd');
-      dateRange.push(startDate.format('DD-MM-YYYY'));
-    }
-
-    if (
-      (_.includes(this.props.selectedDates, d2.format('DD-MM-YYYY')) && !_.includes(this.props.selectedDates, d1.format('DD-MM-YYYY'))) ||
-      !_.some(dateRange, (d) => {
-        return !_.includes(this.props.selectedDates, d);
-      })
-    ) {
-      // the first clicked date was just de-selected and then clicked on a selected date
-      // or every date in the range is already selected, then
-      // de-select the range
-      this.props.selectDate(
-        _.filter(this.props.selectedDates, (d) => {
-          return !_.includes(dateRange, d);
-        }),
-      );
-    } else {
-      // select the range
-      const newSelection = [...this.props.selectedDates, ...dateRange];
-      this.props.selectDate(_.uniq(newSelection));
-    }
-  }
-
-  selectDate(date, e) {
-    const enabled = this.isDateEnabled(date);
-    const isBeforeMinDate = this.props.minDate && moment(date).isBefore(this.props.minDate);
-    console.log('selected a date', { date, enabled, isBeforeMinDate });
-    if (enabled === false || isBeforeMinDate) return;
-
-    if (this.props.multiple) {
-      const dateKey = moment(date).format('DD-MM-YYYY');
-
-      if (e.shiftKey && this.state.lastSelected && this.state.lastSelected !== dateKey) {
-        // shift-click to select range
-        this.selectRange(dateKey);
-      } else {
-        // toggle single date
-        const index = this.props.selectedDates.indexOf(dateKey);
-        const newSelection = [...this.props.selectedDates];
-        if (index > -1) {
-          newSelection.splice(index, 1);
-        } else {
-          newSelection.push(dateKey);
-        }
-        this.props.selectDate(newSelection);
-      }
-      this.setState({
-        lastSelected: dateKey,
-      });
-    } else {
-      this.props.selectDate(moment(date).format('YYYY-MM-DD'));
-    }
-  }
-
-  generateGrid(date, selectedDate) {
-    const month = moment(date);
-    let dateToTarget = moment(date).endOf('month');
-    let dateToModify = moment(date).startOf('month');
-    const selectedDateToUse = this.props.multiple
-      ? selectedDate || this.props.selectedDates || []
-      : moment(selectedDate || this.state.selectedDate);
-
-    // set dateToModify to be Sunday of that week
-    while (dateToModify.day() !== 0) {
-      dateToModify = dateToModify.add(-1, 'day');
-    }
-
-    const rows = [[]];
-
-    while (dateToTarget.day() !== 6) {
-      dateToTarget = dateToTarget.add(1, 'day');
-    }
-    dateToTarget = dateToTarget.add(1, 'day'); // add an extra day to complete the week
-
-    while (!dateToModify.isSame(dateToTarget, 'day')) {
-      if (rows[rows.length - 1].length === 7) {
-        // week has filled - add new row
-        rows.push([]);
-      }
-      const thisDate = moment(dateToModify);
-
-      rows[rows.length - 1].push({
-        date: thisDate,
-        dateKey: thisDate.format('DD-MM-YYYY'),
-        display: thisDate.date(),
-        isFaded: !thisDate.isSame(month, 'month'),
-        isToday: thisDate.isSame(moment(), 'date'),
-        isSelected: this.isDateSelected(thisDate, selectedDateToUse),
-        isEnabled: this.isDateEnabled(thisDate),
-      });
-
-      dateToModify = dateToModify.add(1, 'day');
-    }
-
-    // console.log('generateGrid', JSON.stringify(rows, null, 2));
-    this.setState({
-      grid: rows,
-    });
-  }
-
-  renderGrid() {
-    return this.state.grid.map((row, index) => {
-      return (
-        <div className="datepicker__row marginTop-8" key={index}>
-          {row.map((date) => {
-            let classes = 'datepicker__date';
-            if (date.isFaded) {
-              classes += ' datepicker__date--faded';
-            }
-            if (date.isToday) {
-              classes += ' datepicker__date--today';
-            }
-            if (date.isSelected) {
-              classes += ' datepicker__date--selected';
-            }
-            if (typeof date.isEnabled === 'boolean') {
-              classes += date.isEnabled ? ' datepicker__date--enabled' : ' datepicker__date--disabled';
-            }
-            return (
-              <div className={classes} key={date.dateKey}>
-                <div className="datepicker__date__inner" onClick={(e) => this.selectDate(date.date, e)}>
-                  {date.display}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      );
-    });
-  }
-
-  renderTop() {
-    if (this.props.hideTop) {
-      return null;
-    }
-    if (this.props.multiple) {
-      return (
-        <div className="datepicker__multitop">
-          <p className="datepicker__multitop__text">Shift + Click to select a range of dates</p>
-        </div>
-      );
-    }
-    return (
-      <div className="datepicker__top">
-        <p className="datepicker__title truncate">{this.getDate()}</p>
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <div className="datepicker noselect" style={this.props.style}>
-        {this.renderTop()}
-        <div className="datepicker__bottom">
-          <div className="datepicker__bottomHeader">
-            {/* <div className='datepicker__selectedDate'>
-                        <p className='datepicker__selectedDateText'>{this.getShortDate()}</p>
-                    </div> */}
-            <div className="datepicker__monthSelector">
-              <P60Icon className="datepicker__monthChevron" icon="chevron_left" onClick={this.changeMonth.bind(this, -1)} />
-              <p className="datepicker__selectedMonth">{this.getMonth()}</p>
-              <P60Icon className="datepicker__monthChevron" icon="chevron_right" onClick={this.changeMonth.bind(this, 1)} />
-            </div>
-          </div>
-          <div className="datepicker__row marginTop-16">
-            <p className="datepicker__colHeader">SUN</p>
-            <p className="datepicker__colHeader">MON</p>
-            <p className="datepicker__colHeader">TUE</p>
-            <p className="datepicker__colHeader">WED</p>
-            <p className="datepicker__colHeader">THU</p>
-            <p className="datepicker__colHeader">FRI</p>
-            <p className="datepicker__colHeader">SAT</p>
-          </div>
-          {this.renderGrid()}
-        </div>
-      </div>
-    );
-  }
-}
-
-export { DatePicker };

package/src/components/DropdownInput.js

@@ -1,223 +0,0 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import FontAwesome from 'react-fontawesome';
-import { INACTIVE_TEXT } from '../colours';
-
-class DropdownInput extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      width: 0,
-      height: 0,
-      open: false,
-    };
-
-    this.setWrapperRef = this.setWrapperRef.bind(this);
-    this.handleClickOutside = this.handleClickOutside.bind(this);
-  }
-
-  componentDidMount() {
-    document.addEventListener('mousedown', this.handleClickOutside);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('mousedown', this.handleClickOutside);
-  }
-
-  setWrapperRef(node) {
-    this.wrapperRef = node;
-  }
-
-  handleClickOutside(event) {
-    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
-      this.setState({ open: false });
-    }
-  }
-
-  getAutoComplete() {
-    if (!_.isUndefined(this.props.autoComplete)) {
-      return this.props.autoComplete ? 'on' : 'off';
-    }
-    return 'off';
-  }
-
-  getClassNames() {
-    let string = '';
-    if (this.props.className) {
-      string += `${this.props.className} `;
-    }
-    if (!_.isUndefined(this.props.disabled) && this.props.disabled) {
-      string = 'genericInput-disabled ';
-    }
-    if (this.props.large) {
-      string += 'genericInput-large ';
-    }
-    if (!_.isUndefined(this.props.showError) && this.props.showError()) {
-      return string + 'genericInput-error';
-    }
-    if (!_.isUndefined(this.props.isValid) && this.props.isValid()) {
-      return string + 'genericInput-valid';
-    }
-    return string;
-  }
-
-  getLabelStyle() {
-    const style = {};
-    if (_.isEmpty(this.props.value) && !this.props.alwaysShowLabel) {
-      style.opacity = 0;
-    }
-    if (!_.isUndefined(this.props.ignoreValue) && this.props.value === this.props.ignoreValue && !this.props.alwaysShowLabel) {
-      style.opacity = 0;
-    }
-    // if (this.props.isRequired) {
-    //     style.marginLeft = 12;
-    // }
-    return style;
-  }
-
-  renderError() {
-    if (!_.isUndefined(this.props.showError) && this.props.showError()) {
-      return <div className={'fieldLabel fieldLabel-warning'}>{this.props.errorMessage ? this.props.errorMessage : 'Required'}</div>;
-    }
-    return null;
-  }
-
-  renderHelp() {
-    if (!_.isUndefined(this.props.help)) {
-      return <div className="genericInput-help">{this.props.help}</div>;
-    }
-    return null;
-  }
-
-  open() {
-    if (this.props.disabled) {
-      return;
-    }
-    this.setState({ open: !this.state.open });
-  }
-
-  renderOption() {
-    if (!this.state.open) {
-      return null;
-    }
-    return (
-      <div style={styles.dropdownItemsWrapper}>
-        {_.values(this.props.options).map((cat) => {
-          return (
-            <div
-              key={cat.Key}
-              className="subtleHover fontRegular fontSize-16 text-dark"
-              style={styles.dropDownOption}
-              onClick={() => {
-                this.props.onSelect(cat.Key);
-              }}
-            >
-              {cat.Title}
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-
-  getBottomBorder() {
-    if (!_.isUndefined(this.props.disabled) && this.props.disabled) {
-      return 'dropdownInput-bottomBorder--disabled';
-    }
-    if (!_.isUndefined(this.props.showError) && this.props.showError()) {
-      return 'dropdownInput-bottomBorder--error';
-    }
-    return '';
-  }
-
-  renderInput() {
-    return (
-      <div style={styles.row}>
-        {this.props.isRequired && <div className="inputRequired " />}
-        <div
-          onClick={this.open.bind(this)}
-          className={`dropdownInput-bottomBorder ${this.getBottomBorder()} ${!this.props.disabled ? 'pointer' : ''}`}
-        >
-          <input
-            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.disabled ? 'pointer' : ''}`}
-            value={this.props.value}
-            onChange={this.props.onChange}
-            onKeyPress={this.props.onEnter}
-            style={{ ...this.props.inputStyle }}
-            disabled
-            autoComplete="false"
-          />
-          <div style={styles.chevronWrapper}>
-            <FontAwesome
-              style={{
-                ...styles.chevron,
-                color: !_.isUndefined(this.props.disabled) && this.props.disabled ? 'transparent' : INACTIVE_TEXT,
-              }}
-              name={this.state.open ? 'chevron-up' : 'chevron-down'}
-            />
-          </div>
-          {this.renderOption()}
-        </div>
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <div
-        ref={this.setWrapperRef}
-        className={`dropdownInput ${this.getClassNames()}`}
-        style={{ marginBottom: 16, position: 'relative', ...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',
-    alignItems: 'center',
-  },
-  chevronWrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-  },
-  chevron: {
-    fontSize: 12,
-    paddingBottom: 4,
-  },
-  dropdownItemsWrapper: {
-    backgroundColor: '#fff',
-    position: 'absolute',
-    width: '100%',
-    top: 35,
-    boxShadow: '2px 2px 10px rgba(106, 163, 216, 0.7)',
-    zIndex: 90,
-    borderRadius: 4,
-    paddingTop: 4,
-    paddingBottom: 4,
-  },
-  dropDownOption: {
-    padding: '4px 16px',
-  },
-};
-
-export { DropdownInput };

package/src/components/DurationInput.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import { Text } from './Text';
-
-function DurationInput({ handleChange, label, value, className, labelWidth }) {
-  const hours = Math.floor(value / 60);
-  const minutes = value % 60;
-
-  const handleHourChange = (event) => {
-    const newHours = Math.max(0, Math.min(+event.target.value, 24));
-    handleChange(newHours * 60 + minutes);
-  };
-
-  const handleMinuteChange = (event) => {
-    const newMinutes = Math.max(0, Math.min(+event.target.value, 59));
-    handleChange(hours * 60 + newMinutes);
-  };
-
-  return (
-    <div className={`flex flex-center ${className ? className : ''}`}>
-      {label && (
-        <Text type="formTitleSmall" style={{ marginRight: '10px', width: labelWidth || 50 }}>
-          {label}
-        </Text>
-      )}
-      <input
-        className="genericInput"
-        type="number"
-        min="0"
-        max="24"
-        value={hours}
-        onChange={handleHourChange}
-        style={{ width: 50, marginRight: 5 }}
-      />
-      <Text type="formTitleSmall" style={{ marginRight: 10 }}>
-        Hour(s)
-      </Text>
-      <input
-        className="genericInput"
-        type="number"
-        min="0"
-        max="59"
-        value={minutes}
-        onChange={handleMinuteChange}
-        style={{ width: 50, marginRight: 5 }}
-      />
-      <Text type="formTitleSmall">Minute(s)</Text>
-    </div>
-  );
-}
-
-export { DurationInput };