<commit_before>import "./objects-options.less";
import floorElementsByFolder from "./floor-elements-by-folder";
import uuid from "uuid";
import classNames from "classnames";
import { Map, OrderedMap, List } from "immutable";

/*
 *  @class ObjectsOptions
 *  @description content of Objects section in menu drawer
 */
export default class ObjectsOptions extends React.Component {
	/*
	 *  @constructs ObjectsOptions
	 */
	constructor(props) {
		super(props);
		let getFloorElementConfig = this.props.getFloorElementConfig;
		this.state = {
			search: {
				isSearching: false,
				searchInput: ""
			},
			floorElementsByFolder: floorElementsByFolder.toOrderedMap()
		};
	}
	/*
	 *	@function folderClicked
	 *	@description open or close folder
	 *
	 *	@param {string} folder - key name of folder object
	 */
	folderClicked(folderName) {
		const folder = this.state.floorElementsByFolder.get(folderName);
		const newFolder = folder.set("isOpen", !folder.get("isOpen"));
		this.setState({ floorElementsByFolder: newFolder});
	}
	/*
	 *	@function onMouseUp
	 *	@description when fe from list is clicked
	 *
	 *	@param {object} feClicked - reference to the fe object
	 *	@param {object} event - React Synthetic Event
	 */
	onMouseDown(feClicked, event){
		event.preventDefault();

		const maxLayer = this.props.getMinFloorElementLayer();
		const fe = feClicked.config().withMutations((el) => {
			el.set("pos_x", 0);
			el.set("pos_y", 0);
			el.set("layer", maxLayer + 1);
		});
		const newFEs = OrderedMap();

		this.props.updateActiveTool("selector");
		this.props.updateMetadata(Map({
			dragX: 0,
			dragY: 0,
			isDragging: true,
			floorElementTypeMenu: newFEs.set(uuid.v4(), fe)
		}));
	}
	/*
	 *	@function onMouseUp
	 *	@description when fe from list is dragged and the mouse click is released
	 *
	 *	@param {object} event - React Synthetic Event
	 */
	onMouseUp(event) {
		event.preventDefault();

		this.props.updateActiveTool("selector");
		this.props.updateMetadata(Immutable.Map({
			dragX: null,
			dragY: null,
			isDragging: false,
			floorElementTypeMenu: null
		}));
	};
	/*
	 *	@function shouldComponentUpdate
	 *	@description check for edge cases with filtering that can cause loops
	 *
	 *	@param {object} nextProps - next props to be fed into this component
	 *	@param {object} nextState - next state based on user interactions
	 *
	 *	@returns {boolean} true if something changed based on user interaction
	 */
	shouldComponentUpdate(nextProps, nextState) {
		if (this.state.search.isSearching &&
			this.state.search.isSearching === nextState.search.isSearching &&
			this.state.search.searchInput === nextState.search.searchInput) {

			return false;
		}
		return true;
	}
	/*
	 *	@function startSearching
	 *	@description when not searching and search icon clicked, set state to start
	 */
	startSearching() {
		this.setState({
			search: {
				isSearching: true,
				searchInput: ""
			}
		});
	}
	/*
	 *	@function stopSearching
	 *	@description when searching and close icon clicked, set state to stop
	 */
	stopSearching() {
		this.setState({
			search: {
				isSearching: false,
				searchInput: ""
			}
		});
	}
	/*
	 *	@function setSearchInput
	 *	@description when user types in search input, set phrase in state for filter
	 */
	setSearchInput(event) {
		this.setState({
			search: {
				isSearching: true,
				searchInput: event.target.value
			}
		});
	}
	/*
	 *  @function render
	 *  @description React render method for creating objects menu drawer content
	 */
	render() {
		const floorElementsByFolder = this.state.floorElementsByFolder;
		const filteredFolders = floorElementsByFolder.reduce((folders, folder, key) => {
			const searchMatches = folder.get("floorElements").reduce((fes, fe) => {
				 if(fe.get("name").toLowerCase().includes(this.state.search.searchInput.toLowerCase())) {
				 	return fes.push(fe);
				 }
				 else {
				 	return fes;
				 }
			}, List());
			if(searchMatches.size) {
				const isOpen = this.state.search.isSearching && this.state.search.searchInput.length || folder.get("isOpen");
				const newFolder = folder.withMutations((updatedFolder) => updatedFolder.set("isOpen", isOpen).set("floorElements", searchMatches));
				const newFolders = folders.set(key, newFolder);
				return newFolders;
			}
			else {
				return folders;
			}
		}, OrderedMap());
		const displayFolders = filteredFolders.map((folder, folderName) => {
			const key = "object-options-folder-" + uuid.v4();
			if (!folder.get("isOpen")) {
				return (
					<div key={key} className="st-vm-objects-options-folder"
						onClick={this.folderClicked.bind(this, folderName)}>

						<label className="st-vm-objects-options-folder-type">{folderName}</label>
						<i className="st-icon st-icon-right"></i>
					</div>
				);
			}
			else {
				let chevronFolders = [];
				chevronFolders.push(
					<div key={key} className="st-vm-objects-options-folder"
						onClick={this.folderClicked.bind(this, folderName)}>

						<label className="st-vm-objects-options-folder-type">{folderName}</label>
						<i className="st-icon st-icon-down"></i>
					</div>
				);

				let floorElementsLIs = [];
				const floorElementLIs = folder.get("floorElements").map((fe) => {
					const itemKey = "objects-folder-item-" + uuid.v4();

					return (
						<li key={itemKey} className="st-vm-objects-options-folder-item"
							onMouseDown={this.onMouseDown.bind(this, fe)}
							onMouseUp={this.onMouseUp.bind(this)}>

							<span className="st-vm-objects-options-folder-item-name">{fe.get("name")}</span>
							<i className={"st-vm-floor-element-icon " + fe.get("icon")}></i>
						</li>
					);
				});
				chevronFolders.push(
					<ul key={"objects-folder-list-" + uuid.v4()}
						className="st-vm-objects-options-folder-list">
						{floorElementsLIs}
					</ul>
				);
				return chevronFolders;
			}
		});
		const searchClassNames = classNames({
			"st-vm-objects-search": true,
			"collapsed": !this.state.search.isSearching
		});
		let headerContent;
		if (this.state.search.isSearching) {
			headerContent =
				<div className="st-vm-objects-options-header">
					<div className={searchClassNames}><commit_msg>bring back onClick functionality to folders<commit_after>import "./objects-options.less";
import floorElementsByFolder from "./floor-elements-by-folder";
import uuid from "uuid";
import classNames from "classnames";
import { Map, OrderedMap, List } from "immutable";

/*
 *  @class ObjectsOptions
 *  @description content of Objects section in menu drawer
 */
export default class ObjectsOptions extends React.Component {
	/*
	 *  @constructs ObjectsOptions
	 */
	constructor(props) {
		super(props);
		let getFloorElementConfig = this.props.getFloorElementConfig;
		this.state = {
			search: {
				isSearching: false,
				searchInput: ""
			},
			floorElementsByFolder: floorElementsByFolder.toOrderedMap()
		};
	}
	/*
	 *	@function folderClicked
	 *	@description open or close folder
	 *
	 *	@param {string} folder - key name of folder object
	 */
	folderClicked(folderName) {
		const folder = this.state.floorElementsByFolder.get(folderName);
		const newFolder = folder.set("isOpen", !folder.get("isOpen"));
		this.setState({ floorElementsByFolder: newFolder});
	}
	/*
	 *	@function onMouseUp
	 *	@description when fe from list is clicked
	 *
	 *	@param {object} feClicked - reference to the fe object
	 *	@param {object} event - React Synthetic Event
	 */
	onMouseDown(feClicked, event){
		event.preventDefault();
		const maxLayer = this.props.getMinFloorElementLayer();
		const fe = feClicked.config().withMutations((el) => {
			el.set("pos_x", 0);
			el.set("pos_y", 0);
			el.set("layer", maxLayer + 1);
		});
		const newFEs = OrderedMap();

		this.props.updateActiveTool("selector");
		this.props.updateMetadata(Map({
			dragX: 0,
			dragY: 0,
			isDragging: true,
			floorElementTypeMenu: newFEs.set(uuid.v4(), fe)
		}));
	}
	/*
	 *	@function onMouseUp
	 *	@description when fe from list is dragged and the mouse click is released
	 *
	 *	@param {object} event - React Synthetic Event
	 */
	onMouseUp(event) {
		event.preventDefault();

		this.props.updateActiveTool("selector");
		this.props.updateMetadata(Immutable.Map({
			dragX: null,
			dragY: null,
			isDragging: false,
			floorElementTypeMenu: null
		}));
	};
	/*
	 *	@function shouldComponentUpdate
	 *	@description check for edge cases with filtering that can cause loops
	 *
	 *	@param {object} nextProps - next props to be fed into this component
	 *	@param {object} nextState - next state based on user interactions
	 *
	 *	@returns {boolean} true if something changed based on user interaction
	 */
	shouldComponentUpdate(nextProps, nextState) {
		if (this.state.search.isSearching &&
			this.state.search.isSearching === nextState.search.isSearching &&
			this.state.search.searchInput === nextState.search.searchInput) {

			return false;
		}
		return true;
	}
	/*
	 *	@function startSearching
	 *	@description when not searching and search icon clicked, set state to start
	 */
	startSearching() {
		this.setState({
			search: {
				isSearching: true,
				searchInput: ""
			}
		});
	}
	/*
	 *	@function stopSearching
	 *	@description when searching and close icon clicked, set state to stop
	 */
	stopSearching() {
		this.setState({
			search: {
				isSearching: false,
				searchInput: ""
			}
		});
	}
	/*
	 *	@function setSearchInput
	 *	@description when user types in search input, set phrase in state for filter
	 */
	setSearchInput(event) {
		this.setState({
			search: {
				isSearching: true,
				searchInput: event.target.value
			}
		});
	}
	/*
	 *  @function render
	 *  @description React render method for creating objects menu drawer content
	 */
	render() {
		const floorElementsByFolder = this.state.floorElementsByFolder;
		const filteredFolders = floorElementsByFolder.reduce((folders, folder, key) => {
			const searchMatches = folder.get("floorElements").reduce((fes, fe) => {
				 if(fe.get("name").toLowerCase().includes(this.state.search.searchInput.toLowerCase())) {
				 	return fes.push(fe);
				 }
				 else {
				 	return fes;
				 }
			}, List());
			if(searchMatches.size) {
				const isOpen = this.state.search.isSearching && this.state.search.searchInput.length || folder.get("isOpen");
				const newFolder = folder.withMutations((updatedFolder) => updatedFolder.set("isOpen", isOpen).set("floorElements", searchMatches));
				const newFolders = folders.set(key, newFolder);
				return newFolders;
			}
			else {
				return folders;
			}
		}, OrderedMap());
		const displayFolders = filteredFolders.map((folder, folderName) => {
			const key = "object-options-folder-" + uuid.v4();
			if (!folder.get("isOpen")) {
				return (
					<div key={key} className="st-vm-objects-options-folder"
						onClick={this.folderClicked.bind(this, folderName)}>

						<label className="st-vm-objects-options-folder-type">{folderName}</label>
						<i className="st-icon st-icon-right"></i>
					</div>
				);
			}
			else {
				let chevronFolders = [];
				chevronFolders.push(
					<div key={key} className="st-vm-objects-options-folder"
						onClick={this.folderClicked.bind(this, folderName)}>

						<label className="st-vm-objects-options-folder-type">{folderName}</label>
						<i className="st-icon st-icon-down"></i>
					</div>
				);
				const floorElementsLIs = folder.get("floorElements").map((fe) => {
					const itemKey = "objects-folder-item-" + uuid.v4();

					return (
						<li key={itemKey} className="st-vm-objects-options-folder-item"
							onMouseDown={this.onMouseDown.bind(this, fe)}
							onMouseUp={this.onMouseUp.bind(this)}>

							<span className="st-vm-objects-options-folder-item-name">{fe.get("name")}</span>
							<i className={"st-vm-floor-element-icon " + fe.get("icon")}></i>
						</li>
					);
				});
				chevronFolders.push(
					<ul key={"objects-folder-list-" + uuid.v4()}
						className="st-vm-objects-options-folder-list">
						{floorElementsLIs}
					</ul>
				);
				return chevronFolders;
			}
		});
		const searchClassNames = classNames({
			"st-vm-objects-search": true,
			"collapsed": !this.state.search.isSearching
		});
		let headerContent;
		if (this.state.search.isSearching) {
			headerContent =
				<div className="st-vm-objects-options-header">
					<div className={searchClassNames}>
{'fraction_non_alphanumeric': 0.14102147039687704, 'fraction_numerical': 0.0014638906961613532, 'mean_word_length': 3.520955882352941, 'pattern_counts': {'":': 4, '<': 47, '<?xml version=': 0, '>': 59, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2712590', 'n_tokens_mistral': 4644, 'n_tokens_neox': 3904, 'n_words': 834}