From b707b1fc886a6672baa31bf11c2392ca58616e96 Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi <256895@studenti.unimore.it> Date: Thu, 29 Apr 2021 16:17:22 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20component=20BoxConditionHasht?= =?UTF-8?q?ag?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/BoxConditionHashtag.js | 59 +++++++++++++++++++ .../components/BoxConditionHashtag.module.css | 7 +++ code/frontend/src/components/BoxConditions.js | 2 +- .../frontend/src/components/ButtonIconOnly.js | 11 ++++ .../src/components/ButtonIconOnly.module.css | 5 ++ .../frontend/src/components/ConditionBadge.js | 7 ++- code/frontend/src/components/FormInline.js | 12 ++++ .../src/components/FormInline.module.css | 9 +++ code/frontend/src/components/Input.module.css | 2 +- .../src/components/InputWithIcon.module.css | 2 +- code/frontend/src/hooks/useArrayState.js | 5 +- 11 files changed, 115 insertions(+), 6 deletions(-) create mode 100644 code/frontend/src/components/BoxConditionHashtag.js create mode 100644 code/frontend/src/components/BoxConditionHashtag.module.css create mode 100644 code/frontend/src/components/ButtonIconOnly.js create mode 100644 code/frontend/src/components/ButtonIconOnly.module.css create mode 100644 code/frontend/src/components/FormInline.js create mode 100644 code/frontend/src/components/FormInline.module.css diff --git a/code/frontend/src/components/BoxConditionHashtag.js b/code/frontend/src/components/BoxConditionHashtag.js new file mode 100644 index 0000000..88a5ced --- /dev/null +++ b/code/frontend/src/components/BoxConditionHashtag.js @@ -0,0 +1,59 @@ +import React, { useContext, useState } from "react" +import BoxFull from "./BoxFull" +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" +import { 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" + +// Official hashtag regex from https://stackoverflow.com/a/22490853/4334568 +// noinspection RegExpAnonymousGroup,LongLine +const INVALID_HASHTAG_CHARACTERS = /([^a-z0-9_\u00c0-\u00d6\u00d8-\u00f6\u00f8-\u00ff\u0100-\u024f\u0253-\u0254\u0256-\u0257\u0300-\u036f\u1e00-\u1eff\u0400-\u04ff\u0500-\u0527\u2de0-\u2dff\ua640-\ua69f\u0591-\u05bf\u05c1-\u05c2\u05c4-\u05c5\u05d0-\u05ea\u05f0-\u05f4\ufb12-\ufb28\ufb2a-\ufb36\ufb38-\ufb3c\ufb40-\ufb41\ufb43-\ufb44\ufb46-\ufb4f\u0610-\u061a\u0620-\u065f\u066e-\u06d3\u06d5-\u06dc\u06de-\u06e8\u06ea-\u06ef\u06fa-\u06fc\u0750-\u077f\u08a2-\u08ac\u08e4-\u08fe\ufb50-\ufbb1\ufbd3-\ufd3d\ufd50-\ufd8f\ufd92-\ufdc7\ufdf0-\ufdfb\ufe70-\ufe74\ufe76-\ufefc\u200c\u0e01-\u0e3a\u0e40-\u0e4e\u1100-\u11ff\u3130-\u3185\ua960-\ua97f\uac00-\ud7af\ud7b0-\ud7ff\uffa1-\uffdc\u30a1-\u30fa\u30fc-\u30fe\uff66-\uff9f\uff10-\uff19\uff21-\uff3a\uff41-\uff5a\u3041-\u3096\u3099-\u309e\u3400-\u4dbf\u4e00-\u9fff\u20000-\u2a6df\u2a700-\u2b73\u2b740-\u2b81\u2f800-\u2fa1])/g + + +export default function BoxConditionHashtag({ ...props }) { + const [hashtag, setHashtag] = useState("") + const {conditions, appendCondition} = useContext(ContextRepositoryEditor) + + const onInputChange = event => { + let text = event.target.value + text = text.replace(INVALID_HASHTAG_CHARACTERS, "") + return setHashtag(text) + } + + const onButtonClick = () => { + const newCond = { + "id": null, + "type": 0, + "content": hashtag + } + 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) + } + + setHashtag("") + } + + return ( + Search by hashtag} {...props}> + + + + + + ) +} diff --git a/code/frontend/src/components/BoxConditionHashtag.module.css b/code/frontend/src/components/BoxConditionHashtag.module.css new file mode 100644 index 0000000..f8b3933 --- /dev/null +++ b/code/frontend/src/components/BoxConditionHashtag.module.css @@ -0,0 +1,7 @@ +.Input { + flex-shrink: 1; +} + +.Button { + +} \ No newline at end of file diff --git a/code/frontend/src/components/BoxConditions.js b/code/frontend/src/components/BoxConditions.js index 22f17b3..b09a5fd 100644 --- a/code/frontend/src/components/BoxConditions.js +++ b/code/frontend/src/components/BoxConditions.js @@ -7,7 +7,7 @@ import ConditionBadge from "./ConditionBadge" export default function BoxConditions({ ...props }) { const {conditions} = useContext(ContextRepositoryEditor) - const badges = conditions.map((cond) => ) + const badges = conditions.map((cond, pos) => ) return ( diff --git a/code/frontend/src/components/ButtonIconOnly.js b/code/frontend/src/components/ButtonIconOnly.js new file mode 100644 index 0000000..564d4d5 --- /dev/null +++ b/code/frontend/src/components/ButtonIconOnly.js @@ -0,0 +1,11 @@ +import React from "react" +import Style from "./ButtonIconOnly.module.css" +import classNames from "classnames" +import Button from "./Button" + + +export default function ButtonIconOnly({ children, className, ...props }) { + return ( +