@plusscommunities/pluss-core-web 1.0.5 → 1.0.6

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/DatePicker.js

@@ -0,0 +1,268 @@
+import React, { Component } from 'react';
+import moment from 'moment';
+import _ from 'lodash';
+import { P60Icon } from './';
+
+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 (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();
+      }
+      this.setState({
+        shownMonth: dateToUse,
+        selectedDate: dateToUse,
+      });
+      this.generateGrid(dateToUse, 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');
+  }
+
+  changeMonth(change) {
+    const newShownDate = new Date(this.state.shownMonth.getFullYear(), this.state.shownMonth.getMonth() + 1 + change, 0);
+    this.setState({
+      shownMonth: newShownDate,
+    });
+    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) {
+    console.log('selected a date');
+    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),
+      });
+
+      dateToModify = dateToModify.add(1, 'day');
+    }
+
+    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';
+            }
+            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

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