mirror of
https://github.com/pds-nest/nest.git
synced 2024-11-25 22:44:19 +00:00
✨ Add component BoxConditionUser
This commit is contained in:
parent
8509d4324c
commit
8c0fc2bd8a
2 changed files with 72 additions and 2 deletions
70
code/frontend/src/components/BoxConditionUser.js
Normal file
70
code/frontend/src/components/BoxConditionUser.js
Normal file
|
@ -0,0 +1,70 @@
|
||||||
|
import React, { useContext, useState } from "react"
|
||||||
|
import BoxFull from "./BoxFull"
|
||||||
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
||||||
|
import { faAt, faHashtag, faPlus } from "@fortawesome/free-solid-svg-icons"
|
||||||
|
import InputWithIcon from "./InputWithIcon"
|
||||||
|
import FormInline from "./FormInline"
|
||||||
|
import Style from "./BoxConditionHashtag.module.css"
|
||||||
|
import ButtonIconOnly from "./ButtonIconOnly"
|
||||||
|
import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
|
||||||
|
|
||||||
|
|
||||||
|
const INVALID_USER_CHARACTERS = /[^a-zA-Z0-9]/g
|
||||||
|
|
||||||
|
|
||||||
|
export default function BoxConditionUser({ ...props }) {
|
||||||
|
const [user, setUser] = useState("")
|
||||||
|
const {conditions, appendCondition} = useContext(ContextRepositoryEditor)
|
||||||
|
|
||||||
|
const onInputChange = event => {
|
||||||
|
let text = event.target.value
|
||||||
|
text = text.replace(INVALID_USER_CHARACTERS, "")
|
||||||
|
return setUser(text)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onButtonClick = () => {
|
||||||
|
const newCond = {
|
||||||
|
"id": null,
|
||||||
|
"type": 3,
|
||||||
|
"content": user
|
||||||
|
}
|
||||||
|
let duplicate = null;
|
||||||
|
for(const oldCond of conditions) {
|
||||||
|
if(newCond.type === oldCond.type && newCond.content === oldCond.content) {
|
||||||
|
duplicate = oldCond;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(duplicate) {
|
||||||
|
console.debug("Refusing to append ", newCond, " to the Conditions list, as ", duplicate, " already exists.")
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
console.debug("Appending ", newCond, " to the Conditions list")
|
||||||
|
appendCondition(newCond)
|
||||||
|
}
|
||||||
|
|
||||||
|
setUser("")
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BoxFull header={<span>Search by <FontAwesomeIcon icon={faAt}/> user</span>} {...props}>
|
||||||
|
<FormInline>
|
||||||
|
<InputWithIcon
|
||||||
|
className={Style.Input}
|
||||||
|
id={"condition-hashtag"}
|
||||||
|
icon={faAt}
|
||||||
|
value={user}
|
||||||
|
onChange={onInputChange}
|
||||||
|
placeholder={"jack"}
|
||||||
|
/>
|
||||||
|
<ButtonIconOnly
|
||||||
|
className={Style.Button}
|
||||||
|
icon={faPlus}
|
||||||
|
color={"Green"}
|
||||||
|
onClick={onButtonClick}
|
||||||
|
/>
|
||||||
|
</FormInline>
|
||||||
|
</BoxFull>
|
||||||
|
)
|
||||||
|
}
|
|
@ -3,7 +3,7 @@ import Style from "./ConditionBadge.module.css"
|
||||||
import classNames from "classnames"
|
import classNames from "classnames"
|
||||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
||||||
import ButtonSmallX from "./ButtonSmallX"
|
import ButtonSmallX from "./ButtonSmallX"
|
||||||
import { faClock, faHashtag, faMapPin, faUser } from "@fortawesome/free-solid-svg-icons"
|
import { faAt, faClock, faHashtag, faMapPin } from "@fortawesome/free-solid-svg-icons"
|
||||||
import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
|
import ContextRepositoryEditor from "../contexts/ContextRepositoryEditor"
|
||||||
|
|
||||||
|
|
||||||
|
@ -19,7 +19,7 @@ const CONDITION_ICONS = {
|
||||||
0: faHashtag, // Hashtag
|
0: faHashtag, // Hashtag
|
||||||
1: faMapPin, // Location
|
1: faMapPin, // Location
|
||||||
2: faClock, // Time
|
2: faClock, // Time
|
||||||
3: faUser, // User
|
3: faAt, // User
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue