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

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

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+class Text extends Component {
+  getClassName() {
+    if (this.props.className) {
+      return ` ${this.props.className}`;
+    }
+    return '';
+  }
+
+  render() {
+    return (
+      <p {...this.props} className={`text-${this.props.type}${this.getClassName()}`} style={this.props.style}>
+        {this.props.children}
+      </p>
+    );
+  }
+}
+
+export { Text };

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,225 @@
+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);
+		} else {
+			this.setState({ ...this.state, hourInput: "" });
+			return;
+		}
+		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);
+		} else {
+			this.setState({ ...this.state, minuteInput: "" });
+			return;
+		}
+		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" style={this.props.style}>
+					<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}`}
+				style={this.props.style}
+			>
+				<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,111 @@
+import React, { Component } from 'react';
+import { Text } from './Text';
+import { ProfilePic } from './ProfilePic';
+import { COLOUR_BRANDING_MAIN } from '../colours';
+
+class UserListing extends Component {
+  getSize() {
+    return this.props.size || 30;
+  }
+
+  getImage() {
+    if (this.props.user && this.props.user.profilePic) {
+      return this.props.user.profilePic;
+    }
+    if (this.props.image) {
+      return this.props.image;
+    }
+    return undefined;
+  }
+
+  getKey() {
+    if (this.props.user && this.props.user.id) {
+      return this.props.user.id;
+    }
+    return this.props.id;
+  }
+
+  getText() {
+    if (this.props.user && this.props.user.displayName) {
+      return this.props.user.displayName;
+    }
+    return this.props.title;
+  }
+
+  getBorderRadius() {
+    if (this.props.squareImage) {
+      return 4;
+    }
+    return this.getSize() / 2;
+  }
+
+  isLoading() {
+    if (this.props.user && this.props.user.loading) {
+      return this.props.user && this.props.user.loading;
+    }
+    return this.props.isLoading;
+  }
+
+  renderRight() {
+    if (!this.props.rightContent) {
+      return null;
+    }
+    return this.props.rightContent;
+  }
+
+  renderSub() {
+    if (!this.props.subContent) {
+      return null;
+    }
+    return this.props.subContent;
+  }
+
+  renderImage() {
+    if (this.props.squareImage) {
+      return (
+        <div
+          style={{
+            height: this.getSize(),
+            width: this.getSize(),
+            borderRadius: this.getBorderRadius(),
+            marginRight: 8,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            backgroundImage: `url(${this.getImage()})`,
+            backgroundColor: COLOUR_BRANDING_MAIN,
+          }}
+          alt={`${this.getText()} Image`}
+        />
+      );
+    }
+    return <ProfilePic size={this.getSize()} className="userListing_profilePic" image={this.getImage()} />;
+  }
+
+  render() {
+    return (
+      <div
+        key={this.getKey()}
+        className="userListing"
+        style={{
+          minHeight: this.getSize() + 5,
+          cursor: this.props.onClick ? 'pointer' : 'inherit',
+          opacity: this.isLoading() ? 0.5 : 1,
+        }}
+        onClick={this.props.onClick}
+      >
+        <div className="userListing_inner">
+          {this.renderImage()}
+          <div className="userListing_middle" style={{ height: this.getSize() }}>
+            <Text type="name" style={this.props.whiteText ? { color: '#fff' } : null} className={this.props.textClass}>
+              {this.getText()}
+            </Text>
+            {this.renderSub()}
+          </div>
+        </div>
+        {this.renderRight()}
+      </div>
+    );
+  }
+}
+
+export { UserListing };

package/src/components/index.js

@@ -0,0 +1,46 @@
+export * from './AddButton';
+export * from './Attachment';
+export * from './Button';
+export * from './CheckBox';
+export * from './Comment';
+export * from './CommentSection';
+export * from './DatePicker';
+export * from './DurationInput';
+export * from './FileInput';
+export * from './GenericInput';
+export * from './Header';
+export * from './HubSidebar';
+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 './P60Icon';
+export * from './ProfilePic';
+export * from './RadioButton';
+export * from './SVGIcon';
+export * from './Tag';
+export * from './Text';
+export * from './SideNavItem';
+export * from './StatusButton';
+export * from './SuccessPopup';
+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';
+export * from './ExportCsvPopup';
+export * from './InputGroup';
+export * from './ColourOptions';
+export * from './ColourPicker';
+export * from './StatBox';
+export * from './Tabs';