diff --git a/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.scss b/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.scss index d3b47f20df..18b7cee633 100644 --- a/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.scss +++ b/packages/fakeyou.com/src/components/common/TempSelect/TempSelect.scss @@ -9,8 +9,29 @@ } .select__value-container--is-multi { - gap: .25rem; + height: min-content; + // background: red; + display: inline-block; + white-space: nowrap; + overflow-x: scroll; + border-radius: .5rem; + // flex-wrap: + // gap: .25rem; padding: 0; + + /* Hide scrollbar for Chrome, Safari and Opera */ + &::-webkit-scrollbar { + display: none; + } + + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ + + .select__input-container { + min-width: 10rem; + // background: red; + padding: 0 0 0 .5rem; + margin: 0;} } [class^="select__multi-value"] { @@ -18,10 +39,14 @@ } .select__multi-value { + display: inline-flex; border-radius: .5rem; overflow: hidden; padding: 0 0 0 .125rem; - background: $secondary-lighter + background: $secondary-lighter; + margin-bottom: 0; + margin-top: 0; + width: fit-content; } .select__multi-value__remove { diff --git a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx index 99e47b2d9a..ed8150199e 100644 --- a/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx +++ b/packages/fakeyou.com/src/components/entities/EntityInput/EntityInput.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { useLocation } from "react-router-dom"; import { a, useTransition } from "@react-spring/web"; import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia"; @@ -15,9 +15,11 @@ import "./EntityInput.scss"; interface Props { accept?: AcceptTypes | AcceptTypes[], aspectRatio?: "square" | "landscape" | "portrait", - label?: string, + label?: string, + name?: string, onChange?: any, type: EntityModeProp, + value?: string } export interface SlideProps { @@ -60,19 +62,19 @@ const AniMod = ({ animating, className, isLeaving, render: Render, style, ...res ; -export default function EntityInput({ accept: inAccept, aspectRatio = "square", label, onChange, type, ...rest }: Props) { +export default function EntityInput({ accept: inAccept, aspectRatio = "square", label, name = "", onChange, type, value, ...rest }: Props) { const accept = Array.isArray(inAccept) ? inAccept : [inAccept]; const inputMode = EntityInputMode[type]; const { search } = useLocation(); const presetToken = search ? new URLSearchParams(search).get("preset_token") : ""; - const [mediaToken,mediaTokenSet] = useState(presetToken || ""); + const [mediaToken,mediaTokenSet] = useState(presetToken || value || ""); const { media, mediaSet } = useMedia({ mediaToken }); const { user } = useSession(); const { open } = useModal(); const selectToken = (token: string) => { mediaTokenSet(token); - onChange({ target: { name: "temp", value: token } }); + onChange({ target: { name, value: token } }); }; const { clear, inputProps } = useFile({ @@ -109,6 +111,10 @@ export default function EntityInput({ accept: inAccept, aspectRatio = "square", onStart: () => animatingSet(true) }); + useEffect(() => { + if (presetToken && value !== presetToken) onChange({ target: { name, value: presetToken } }); + },[presetToken, name, onChange, value]); + return <>