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

package/src/components/Tag.js

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

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

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

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

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

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