@fortawesome/free-solid-svg-icons#faSearch JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faSearch.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: research.js From gatsby-starter-scientist with MIT License | 6 votes |
|
Research = ({
markdown,
}) => (
<section
className="research"
id="research"
>
<h2>
<FontAwesomeIcon icon={faSearch} />
Research
</h2>
<ul className="research__list">
{
markdown.map((research) => (
<li key={research.node.frontmatter.title}>
{
research.node.frontmatter.title
&& <h3>{research.node.frontmatter.title}</h3>
}
<div>
{
research.node.frontmatter.image
&& (
<GatsbyImage
alt={research.node.frontmatter.title}
className="research__list-image"
image={research.node.frontmatter.image.childImageSharp.gatsbyImageData}
/>
)
}
<div dangerouslySetInnerHTML={{ __html: research.node.html }} />
</div>
</li>
))
}
</ul>
</section>
)
Example #2
| Source File: App.js From lrc-staking-dapp with MIT License | 6 votes |
|
library.add( far, fas, faBookReader, faArrowLeft, faArrowRight, faQuestionCircle, faCopy, faSignOutAlt, faEdit, faAngleDown, faExternalLinkAlt, fab, faEthereum, faTwitter, faDiscord, faUnlink, faSearch, faFortAwesome, faExchangeAlt, faChartPie, faGlobe, faDonate, faDollarSign, );
Example #3
| Source File: index.js From Webiu with MIT License | 6 votes |
|
SearchBar = ({handleSearch, input, placeHolder, header}) => {
return (
<div>
{header ? <div className="header-component">
<h2><FontAwesomeIcon icon={faSearch} className="icon-h2" /> {header}</h2></div>
: null}
<div className="search-box">
<input
className="search-input"
type="text"
placeholder={placeHolder}
value={input}
onChange={(e) => handleSearch(e.target.value)}
/>
<FontAwesomeIcon
onClick={() => {}}
className="icon"
icon={faSearch}
/>
</div>
</div>
)
}
Example #4
| Source File: NavBar.stories.js From Webiu with MIT License | 6 votes |
|
navbar.args = {
firstName: "Dress",
secondName: "Fit",
categories: [
{
id: 1,
route: "/",
name: "Home",
},
{
id: 2,
route: "/women",
name: "Women",
},
{
id: 3,
route: "/men",
name: "Men",
},
{
id: 4,
route: "/kids",
name: "Baby & Kids",
},
{
id: 5,
route: "/accessories",
name: "Accessories",
},
],
iconList: [
{ icon: faSearch, link: "/search", alt: "search" },
{ icon: faShoppingCart, link: "/cart", alt: "cart" },
{ icon: faUser, link: "/user", alt: "user" },
],
}
Example #5
| Source File: Demo404.jsx From react-lte with MIT License | 6 votes |
|
Demo404 = () => {
return (
<>
<LteContentHeader title='404 Error Page' />
<LteContent>
<div className='error-page'>
<LteText tag='h2' color='warning' className='headline'>
404
</LteText>
<div className='error-content'>
<h3>
<FontAwesomeIcon icon={faExclamationTriangle} className='text-warning' />
<span> Oops! Page not found.</span>
</h3>
<p>
<span>We could not find the page you were looking for. Meanwhile, you may </span>
<Link to='/'>may return to dashboard</Link>
<span> or try using the search form.</span>
</p>
<Form className='search-form'>
<InputGroup>
<Input type='text' placeholder='Search' />
<InputGroupAddon addonType='append'>
<Button type='submit' name='submit' color='warning'>
<FontAwesomeIcon icon={faSearch} />
</Button>
</InputGroupAddon>
</InputGroup>
</Form>
</div>
</div>
</LteContent>
</>
);
}
Example #6
| Source File: NavSearch.jsx From react-lte with MIT License | 6 votes |
|
NavSearch = () => {
return (
<Form inline className='ml-3'>
<InputGroup size='sm'>
<Input className='form-control-navbar' type='search' placeholder='Search' aria-label='Search' />
<InputGroupAddon addonType='append'>
<button className='btn btn-navbar' type='submit'>
<FontAwesomeIcon icon={faSearch} />
<span className='d-none'>Search</span>
</button>
</InputGroupAddon>
</InputGroup>
</Form>
);
}
Example #7
| Source File: ViewPoolToolbar.js From katanapools with GNU General Public License v2.0 | 6 votes |
|
render() {
const {searchInput, isAllActive, isV1Active, isV2Active, } = this.state;
const {currentViewPoolType} = this.props;
return (
<div>
<Row className="toolbar-row">
<Col lg={2}>
<div className="h5 page-header left-align-text">View pools</div>
</Col>
<Col lg={6}>
<Form.Control type="text" placeholder="search by pool token name or symbol" onChange={this.searchInputChanged} value={searchInput}/>
<FontAwesomeIcon icon={faSearch} className="search-icon"/>
</Col>
<Col lg={4}>
<ButtonGroup aria-label="Basic example">
<Button className={`explore-toolbar-btn ${isAllActive}`} onClick={()=>this.setPoolTypeSelected('all')}>All Pools</Button>
<Button className={`explore-toolbar-btn ${isV1Active}`} onClick={()=>this.setPoolTypeSelected('v1')}>V1 Pools</Button>
<Button className={`explore-toolbar-btn ${isV2Active}`} onClick={()=>this.setPoolTypeSelected('v2')}>V2 Pools</Button>
</ButtonGroup>
</Col>
</Row>
</div>
)
}
Example #8
| Source File: faLibrary.js From cosmoscan-front with Apache License 2.0 | 6 votes |
|
library.add( faBars, faTimes, faChevronDown, faChevronUp, faCalendarAlt, faTelegramPlane, faTwitter, faMediumM, faRedditAlien, faQuestionCircle, faCheck, faSearch, );
Example #9
| Source File: AddDets_navbar2.js From placement-portal-web with MIT License | 6 votes |
|
render(){
return(
<div className="NavR2_topnav">
<Link to="/display" className ="NavR2_anchor" style={{ textDecoration: 'none' }} >NAME</Link>
<Link to="/CompanyMain" className ="NavR2_anchor" style={{ textDecoration: 'none' }} >APPLICANTS</Link>
<form>
<div className="NavR2_search-container">
<input type="text" placeholder="Search"/>
<FontAwesomeIcon icon={faSearch} className="searchIcon" />
</div>
</form>
<div className="NavR_logout" onClick={this.handleClick}>
<FontAwesomeIcon icon={faSignOutAlt} className="logoutIcon" />
</div>
</div>
)}
Example #10
| Source File: AddDets_navbar.js From placement-portal-web with MIT License | 6 votes |
|
render(){
return(
<div className="NavR_topnav">
<Link to="/add" className ="NavR_anchor"style={{ textDecoration: 'none' }} >RECRUITERS</Link>
<Link to="/Tpo2" className ="NavR_anchor"style={{ textDecoration: 'none' }} >STUDENTS</Link>
<form>
<div className="NavR_search-container">
<input type="text" placeholder="Search"/>
<FontAwesomeIcon icon={faSearch} className="searchIcon" />
</div>
</form>
<div className="NavR_logout" onClick={this.handleClick}>
<FontAwesomeIcon icon={faSignOutAlt} className="logoutIcon" />
</div>
{/* <div className="search-container">
<form >
<div className="inner-addon right-addon">
<FontAwesomeIcon icon={faCoffee} />
<input type="text" placeholder="Name:" name="name" required/>
</div>
</form>
</div> */}
</div>
)}
Example #11
| Source File: Search.js From Next.js-e-commerce-online-store with MIT License | 6 votes |
|
export default function Search() {
const router = useRouter()
const [ searchValue, setSearchValue ] = useState('')
const inputRef = useRef(null)
useEffect(() => {
if (location.pathname.includes('search')) {
inputRef.current.value = location.pathname.substr(location.pathname.lastIndexOf('/') + 1)
} else {
inputRef.current.value = ''
}
}, [])
const search = e => {
e.preventDefault()
if (searchValue !== '') {
router.push(`/search/${searchValue.trim()}`)
} else { return null }
}
return (
<form id="formSearchBar" onSubmit={search}>
<input
aria-label="Search graph"
type="search"
name="search"
ref={inputRef}
onChange={e => setSearchValue(String(e.target.value))}
/>
<button type="submit" value="submit" form="formSearchBar" aria-label="Search button">
<FontAwesomeIcon icon={faSearch} />
</button>
</form>
)
}
Example #12
| Source File: index.js From Official-Website with MIT License | 6 votes |
|
render() {
return (
<div className={`ml-auto ${styles["searchCategory-component"]}`}>
<form
onSubmit={this.onFormSubmit}
className={styles["searchCategory-component__form"]}
>
<input
type="text"
value={this.state.searchField}
onChange={(event) => this.onTextChange(event.target.value)}
className={` ${styles["searchCategory-component__input"]}`}
placeholder="What are you looking for? "
aria-label="Search"
/>
<button
onClick={this.onFormSubmit}
className={styles["searchCategory-component__sideSearch"]}
>
<FontAwesomeIcon
icon={faSearch}
className={styles["searchCategory-component__icon"]}
/>
<span className="sr-only">Search button</span>
</button>
</form>
</div>
);
}
Example #13
| Source File: index.js From INST377_HomeCheck with MIT License | 5 votes |
|
render() {
return (
<Layout>
<div className="container">
<div className="wrapper">
<div className="slogan">
<h1>Don't Be a Fool, </h1>
<h1>
Check Before You
<div className="green">
<Typewriter
options={{
strings: ["Buy", "Rent"],
autoStart: true,
loop: true,
}}
/>
</div>
</h1>
</div>
<div className="search-inst">
<Typewriter
options={{
strings: [
"Type in address, street name, and street suffix",
"then press the button!",
],
autoStart: true,
loop: true,
}}
/>
</div>
<div className="search-box">
<input
className="search-txt"
type="text"
name=""
placeholder="Type to search"
onKeyPress={(event) => {
if (event.key === "Enter") {
this.handleSearch();
}
}}
/>
<a className="search-btn" href="#" onClick={this.handleSearch}>
<FontAwesomeIcon icon={faSearch} />
</a>
</div>
<div className="map">{this.renderLeaflet()}</div>
</div>
</div>
</Layout>
);
}
Example #14
| Source File: Search.jsx From chat-ui-kit-react with MIT License | 5 votes |
|
function SearchInner(
{ placeholder, value, onChange, onClearClick, className, disabled, ...rest },
ref
) {
const cName = `${prefix}-search`;
const isControlled = useMemo(() => typeof value !== "undefined", []);
const [searchValue, setSearchValue] = useControlledOrNot("", value);
const [clearActive, setClearActive] = useState(
isControlled ? searchValue.length > 0 : false
);
if (isControlled !== (typeof value !== "undefined")) {
throw "Search: Changing from controlled to uncontrolled component and vice versa is not allowed";
}
const inputRef = useRef(undefined);
// Public API
const focus = () => {
if (typeof inputRef.current !== "undefined") {
inputRef.current.focus();
}
};
// Return object with public Api
useImperativeHandle(ref, () => ({
focus,
}));
const handleChange = (e) => {
const value = e.target.value;
setClearActive(value.length > 0);
if (isControlled === false) {
setSearchValue(value);
}
onChange(value);
};
const handleClearClick = () => {
if (isControlled === false) {
setSearchValue("");
}
setClearActive(false);
onClearClick();
};
return (
<div
{...rest}
className={classNames(
cName,
{ [`${cName}--disabled`]: disabled },
className
)}
>
<FontAwesomeIcon icon={faSearch} className={`${cName}__search-icon`} />
<input
ref={inputRef}
type="text"
className={`${cName}__input`}
placeholder={placeholder}
onChange={handleChange}
disabled={disabled}
value={searchValue}
/>
<FontAwesomeIcon
icon={faTimes}
className={classNames(`${cName}__clear-icon`, {
[`${cName}__clear-icon--active`]: clearActive,
})}
onClick={handleClearClick}
/>
</div>
);
}
Example #15
| Source File: FormIcon.jsx From movies with MIT License | 5 votes |
|
FormIcon = () => (
<FontAwesomeIcon
className={styles.icon}
icon={faSearch}
data-test="search-form__icon"
/>
)
Example #16
| Source File: searchbar.component.jsx From courseyard with MIT License | 5 votes |
|
SearchBar = () => {
const { searchQuery, setSearchQuery, setSearchResults, setIsLoading } = useContext(
CourseContext
);
const [searchAction, setSearchAction] = useState(undefined);
const [searchSuggestion] = useState(
search_suggestions[Math.floor(Math.random() * (search_suggestions.length - 1 + 1))]
);
useEffect(() => {
clearTimeout(searchAction);
if (searchQuery.length > 0) {
setIsLoading(true);
setSearchAction(
setTimeout(async () => {
try {
setIsLoading(true);
const data = await searchCourses(searchQuery);
setIsLoading(false);
setSearchResults(data);
} catch (error) {
setIsLoading(false);
// eslint-disable-next-line no-console
console.error(error);
}
}, 400)
);
} else {
setIsLoading(false);
setSearchAction(setTimeout(() => setSearchResults(undefined), 1500));
}
}, [searchQuery]);
return (
<section className="h-16 lg:w-4/12 md:w-5/12 sm:w-6/12 w-10/12 bg-secondary">
<div className="flex mx-auto mt-20">
<input
id="search-input"
className="w-full h-12 rounded-l-full mb-8 text-xl px-8 shadow-lg focus:shadow-xl focus:outline-none searchbox"
type="search"
placeholder={searchSuggestion}
value={searchQuery}
onChange={({ target }) => {
setSearchQuery(target.value);
}}
/>
<button className="search-icon shadow-lg right-0 w-16 h-12 bg-primary text-secondary-accent pr-1 rounded-r-full focus:outline-none">
<FontAwesomeIcon icon={faSearch} />
</button>
</div>
</section>
);
}
Example #17
| Source File: icon.js From uptime-kuma with MIT License | 5 votes |
|
library.add(
faArrowAltCircleUp,
faCog,
faEdit,
faEye,
faEyeSlash,
faList,
faPause,
faPlay,
faPlus,
faSearch,
faTachometerAlt,
faTimes,
faTimesCircle,
faTrash,
faCheckCircle,
faStream,
faSave,
faExclamationCircle,
faBullhorn,
faArrowsAltV,
faUnlink,
faQuestionCircle,
faImages,
faUpload,
faCopy,
faCheck,
faFile,
faAward,
faLink,
faChevronDown,
faSignOutAlt,
faPen,
faExternalLinkSquareAlt,
faSpinner,
faUndo,
faPlusCircle,
faAngleDown,
faLink,
);
Example #18
| Source File: SearchBar.jsx From UniDrive with GNU General Public License v2.0 | 5 votes |
|
export default function SearchBar({ onSubmit }) {
const [lastViewDate, setStartDate] = useState(null);
const [searchInput, setSearchInput] = useState('');
const inputUpdated = (e) => {
const { value } = e.target;
setSearchInput(value);
};
const clearSearch = () => {
setSearchInput('');
onSubmit('', lastViewDate);
};
const clearDate = () => {
setStartDate(null);
onSubmit(searchInput, null);
};
return (
<div className="search-form">
<form onSubmit={(e) => { e.preventDefault(); }}>
<span className="search-input-container">
<FontAwesomeIcon className="search-icon" icon={faSearch} />
<input
className="form-control"
id="searchbarform"
name="search"
onInput={inputUpdated}
placeholder="Search for a file..."
type="input"
value={searchInput}
/>
{searchInput.length > 0 && (
<button type="button" className="clear-btn clear-search" onClick={clearSearch}>X</button>
)}
</span>
<span>
<DatePicker
selected={lastViewDate}
onChange={(date) => { setStartDate(date); onSubmit(searchInput, date);}}
placeholderText="Last viewed after..."
closeOnScroll
/>
{lastViewDate && (
<button type="button" className="clear-btn clear-date" onClick={clearDate}>X</button>
)}
</span>
<button type="submit" style={{ display: 'none' }} onClick={() => onSubmit(searchInput, lastViewDate)}>Search</button>
</form>
</div>
);
}
Example #19
| Source File: SearchBox.js From goodhere with MIT License | 5 votes |
|
SearchBox = ({
currentRefinement,
refine,
onFocus = () => {},
onNavigate = () => {},
onEnter = () => {},
}) => {
const handleKeyDown = event => {
switch (event.keyCode) {
case UP_KEY:
event.preventDefault()
onNavigate(-1)
break
case DOWN_KEY:
event.preventDefault()
onNavigate(1)
break
case ENTER_KEY:
event.preventDefault()
onEnter()
break
default:
// Do nothing, user is probably just typing their query
}
}
return (
<div className="flex items-center relative">
<FontAwesomeIcon
icon={faSearch}
className="ml-4 text-gray-500 pointer-events-none absolute left-0"
/>
<input
value={currentRefinement}
className="transition-colors duration-100 ease-in-out focus:outline-0 border border-transparent focus:bg-white focus:border-gray-300 placeholder-gray-600 rounded-lg bg-gray-200 py-2 pr-4 pl-10 block w-full appearance-none leading-normal"
onChange={event => refine(event.currentTarget.value)}
onFocus={onFocus}
onKeyDown={handleKeyDown}
placeholder="Search Good Here"
/>
</div>
)
}
Example #20
| Source File: SearchBox.js From climatescape.org with MIT License | 5 votes |
|
SearchBox = ({
currentRefinement,
refine,
onFocus = () => {},
onNavigate = () => {},
onEnter = () => {},
}) => {
const handleKeyDown = event => {
switch (event.keyCode) {
case UP_KEY:
event.preventDefault()
onNavigate(-1)
break
case DOWN_KEY:
event.preventDefault()
onNavigate(1)
break
case ENTER_KEY:
event.preventDefault()
onEnter()
break
default:
// Do nothing, user is probably just typing their query
}
}
return (
<div className="flex items-center relative">
<FontAwesomeIcon
icon={faSearch}
className="ml-4 text-gray-500 pointer-events-none absolute left-0"
/>
<input
value={currentRefinement}
className="transition-colors duration-100 ease-in-out focus:outline-0 border border-transparent focus:bg-white focus:border-gray-300 placeholder-gray-600 rounded-lg bg-gray-200 py-2 pr-4 pl-10 block w-full appearance-none leading-normal"
onChange={event => refine(event.currentTarget.value)}
onFocus={onFocus}
onKeyDown={handleKeyDown}
placeholder="Search Climatescape"
/>
</div>
)
}
Example #21
| Source File: index.jsx From loopring-swap with GNU General Public License v3.0 | 4 votes |
|
TokenModal = ({
loading,
open,
onClose,
onRefresh,
onChange,
supportedTokens,
balances,
selected,
loggedIn,
}) => {
const { formatMessage, formatNumber } = useIntl();
const contentRef = useRef(null);
const [searchTerm, setSearchTerm] = useState("");
const [tokenDataset, setTokenDataset] = useState(supportedTokens);
useEffect(() => {
let dataset = supportedTokens;
if (searchTerm) {
dataset = dataset.filter(({ symbol, name, address }) => {
const lowerCasedSearchTerm = searchTerm.toLowerCase();
return (
symbol.toLowerCase().includes(lowerCasedSearchTerm) ||
name.toLowerCase().includes(lowerCasedSearchTerm) ||
address.toLowerCase().includes(lowerCasedSearchTerm)
);
});
}
if (balances) {
dataset = dataset.sort(
({ address: firstAddress }, { address: secondAddress }) => {
const wrappedFirstTokenBalance = balances.find(
(balance) => balance.address === firstAddress
);
const wrappedSecondTokenBalance = balances.find(
(balance) => balance.address === secondAddress
);
const firstTokenBalance = new BigNumber(
wrappedFirstTokenBalance &&
wrappedFirstTokenBalance.balance
? wrappedFirstTokenBalance.balance
: "0"
);
const secondTokenBalance = new BigNumber(
wrappedSecondTokenBalance &&
wrappedSecondTokenBalance.balance
? wrappedSecondTokenBalance.balance
: "0"
);
return secondTokenBalance
.minus(firstTokenBalance)
.toNumber();
}
);
}
setTokenDataset(dataset);
}, [searchTerm, supportedTokens, balances]);
const getClickHandler = (token) => () => {
onChange(token);
handleLocalClose();
};
const handleLocalClose = useCallback(() => {
onClose();
setTimeout(() => {
setTokenDataset(supportedTokens);
setSearchTerm("");
}, OPEN_CLOSE_ANIMATION_DURATION);
}, [onClose, supportedTokens]);
const handleLocalCloseOnOutsideClick = useCallback(
(event) => {
if (!contentRef.current.contains(event.target)) {
handleLocalClose();
}
},
[handleLocalClose]
);
const handleSearchTermChange = useCallback((event) => {
setSearchTerm(event.target.value);
}, []);
return (
<>
<FullScreenOverlay open={open} />
<RootFlex open={open} onClick={handleLocalCloseOnOutsideClick}>
<ContentFlex
ref={contentRef}
maxWidth="440px"
flexDirection="column"
>
<SearchFlex mt="4px">
<Box mr={3}>
<FontAwesomeIcon icon={faSearch} />
</Box>
<Box flex={1}>
<Input
value={searchTerm}
onChange={handleSearchTermChange}
placeholder={formatMessage({
id: "token.modal.searchbar.placeholder",
})}
/>
</Box>
{loggedIn && (
<PointableBox ml={3} p={2} minWidth="auto">
<FontAwesomeIcon
icon={faSync}
onClick={onRefresh}
/>
</PointableBox>
)}
<PointableBox ml={3} p={2}>
<FontAwesomeIcon
icon={faTimes}
onClick={handleLocalClose}
/>
</PointableBox>
</SearchFlex>
{loading ? (
<Flex justifyContent="center" mb={4} mt={2}>
<Box>
<Spinner size={40} />
</Box>
</Flex>
) : (
<>
<ListFlex
flexDirection="column"
px="12px"
py="12px"
>
{tokenDataset.length > 0 ? (
tokenDataset.map((token) => {
const { address, symbol, name } = token;
const currentlySelected =
selected === token;
const wrappedBalance = balances.find(
(balance) =>
balance.address === address
);
const etherBalance = new BigNumber(
wrappedBalance &&
wrappedBalance.balance
? wrappedBalance.balance
: "0"
);
return (
<RowFlex
key={address}
alignItems="center"
py={16}
pl="12px"
pr="16px"
onClick={getClickHandler(token)}
selected={currentlySelected}
>
<Box mr={3}>
<TokenIcon
address={address}
size={32}
/>
</Box>
<Flex
alignItems="center"
justifyContent="space-between"
flex={1}
>
<Flex flexDirection="column">
<PrimaryTextBox
mb="2px"
selected={
currentlySelected
}
>
{symbol}
</PrimaryTextBox>
<SecondaryTextBox
selected={
currentlySelected
}
>
{name}
</SecondaryTextBox>
</Flex>
<Box>
{etherBalance.isZero()
? "-"
: formatNumber(
etherBalance,
{
style:
"decimal",
maximumSignificantDigits: 4,
}
)}
</Box>
</Flex>
</RowFlex>
);
})
) : (
<Flex
flexDirection="column"
alignItems="center"
my={3}
px={3}
>
<Box mb={3}>
<EmptyIcon
icon={faExclamationTriangle}
/>
</Box>
<EmptyTextBox textAlign="center" mb={3}>
<FormattedMessage id="token.modal.empty" />
</EmptyTextBox>
</Flex>
)}
</ListFlex>
</>
)}
</ContentFlex>
</RootFlex>
</>
);
}
Example #22
| Source File: brightmodel.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 4 votes |
|
BrightcoveModel = (props) => {
const dispatch = useDispatch();
const { platform, showSidebar, setSelectedVideoIdKaltura } = props;
const [cms, setcms] = useState([]);
const [kaltura, setkaltura] = useState(null);
const [vimeo, setVimeo] = useState(null);
const [cmsVideo, setcmsVideo] = useState(null);
const [activeCms, setActiveCms] = useState(null);
const [offset, setOffset] = useState(0);
const [totalCount, setTotalCount] = useState(0);
const [paginationCounter, setPaginationCounter] = useState(1);
const [searchId, setSearchId] = useState();
const [error, setError] = useState(null);
useEffect(() => {
(async () => {
if (platform == "Brightcove") {
const result = await dispatch(getBrightCMS());
setcms(result.data);
setActiveCms(result.data?.[0]);
} else if (platform == "Kaltura") {
setActiveCms(null);
const result = await dispatch(getKalturaVideos());
if (result?.errors) {
setkaltura([]);
setError("No record Found");
} else {
setkaltura(result);
}
} else if (platform == "Vimeo") {
setActiveCms(null);
const result = await dispatch(getVimeoVideos());
if (result?.errors) {
setVimeo([]);
setError("No record Found");
} else {
setVimeo(result);
console.log("Result:", result.data);
}
}
})();
}, [platform]);
useEffect(() => {
(async () => {
if (activeCms) {
await dispatch(getBrightVideos(activeCms.id, offset * 6))
.then((data) => {
setTotalCount(data.meta?.count);
setcmsVideo(data.data);
})
.catch((err) => {
console.log(err);
if (err?.errors?.length > 0) {
setError("No record Found");
setcmsVideo([]);
}
});
if (
typeof activeCms === "object" &&
activeCms.hasOwnProperty("account_id")
) {
window.brightcoveAccountId = activeCms.account_id;
}
}
})();
}, [activeCms, offset]);
useEffect(() => {
dispatch({
type: "EDIT_CMS_SCREEN",
payload: activeCms,
});
}, [activeCms]);
const primaryColor = getGlobalColor("--main-primary-color");
return (
<Modal
{...props}
size="xl"
aria-labelledby="contained-modal-title-vcenter"
centered
className="preview-layout-model"
>
<Modal.Header
style={{ display: "block !important" }}
className="modal-header-custom"
>
<Modal.Title id="contained-modal-title-vcenter"></Modal.Title>
<HeadingTwo
text={`Add videos from ${platform}`}
color="#515151"
className="model-top-heading"
/>
</Modal.Header>
<Modal.Body style={{ display: "block !important" }}>
<div>
<Tab.Container id="left-tabs-example" defaultActiveKey="manual-1">
<Row className="video-model-tab-row">
{showSidebar && (
<Col className="video-model-tab" sm={3}>
<HeadingThree
text="Brightcove CMS"
className="nav-menu-heading"
/>
<Nav variant="pills" className="flex-column">
{cms?.map((data, counter) => (
<div
onClick={() => {
setOffset(0);
setActiveCms(data);
setcmsVideo(null);
}}
className="role-permission-tab-name"
id="role-permission-tab-id"
>
<Nav.Item>
<Nav.Link eventKey={`manual-${counter + 1}`}>
{data.account_name}
<img className="image-tag" />
</Nav.Link>
</Nav.Item>
</div>
))}
</Nav>
</Col>
)}
<Col className="detail-permission-tab" sm={showSidebar ? 9 : 12}>
<br />
<div className="for-NetSuite-section">
<div className="NetSuite-section-top-header">
<div>
<HeadingTwo
text={activeCms?.account_name}
color="#515151"
className="NetSuite-heading"
/>
</div>
<div className="NetSuite-section-searching">
<div className="section-input-search">
<input
value={searchId}
onChange={(e) => setSearchId(e.target.value)}
type="text"
placeholder="Search by video name or id..."
/>
<button
onClick={async () => {
if (platform == "Brightcove") {
setcmsVideo(null);
dispatch(
getBrightVideosSearch(activeCms.id, searchId)
)
.then((data) => {
setTotalCount(data.meta?.count);
setcmsVideo(data.data);
})
.catch((err) => {
if (err?.errors?.length > 0) {
setcmsVideo([]);
setError("No record Found");
}
});
} else if (platform == "Kaltura") {
setkaltura(null);
setPaginationCounter(1);
const result = await dispatch(
getKalturaVideos(searchId)
);
if (result.totalCount) {
setkaltura(result);
} else {
setkaltura([]);
setError("No record Found");
}
} else if (platform == "Vimeo") {
setVimeo(null);
setPaginationCounter(1);
const result = await dispatch(
getVimeoVideos(searchId)
);
if (result.totalCount) {
setVimeo(result);
} else {
setVimeo([]);
setError("No record Found");
}
}
}}
>
<FontAwesomeIcon
icon={faSearch}
color={primaryColor}
/>
</button>
</div>
{
<button
onClick={async () => {
setSearchId("");
if (platform == "Brightcove") {
setcmsVideo(null);
try {
const videosResult = await dispatch(
getBrightVideos(activeCms.id, offset * 6)
);
setTotalCount(videosResult.meta?.count);
setcmsVideo(videosResult.data);
} catch (err) {
if (err?.errors?.length > 0) {
setcmsVideo([]);
setError("No record Found");
}
}
} else if (platform == "Kaltura") {
setkaltura(null);
setPaginationCounter(1);
const result = await dispatch(getKalturaVideos());
setkaltura(result);
} else if (platform == "Vimeo") {
setVimeo(null);
setPaginationCounter(1);
const result = await dispatch(getVimeoVideos());
setVimeo(result);
}
}}
className="reset-btn"
>
Reset
</button>
}
</div>
</div>
</div>
<div className="for-NetSuite-section">
<div className="NetSuite-section-table responsive-table">
{platform == "Brightcove" && (
<Tab.Content>
{cms?.map((data1, counter) => (
<Tab.Pane eventKey={`manual-${counter + 1}`}>
<Card.Body style={{ padding: "0px" }}>
<table>
<thead>
<tr>
<th>Name</th>
<th>Created</th>
<th>Video</th>
<th>Updated At</th>
</tr>
</thead>
<tbody>
{cmsVideo ? (
cmsVideo?.length > 0 ? (
cmsVideo?.map((data) => (
<tr>
<td className="firstname">
<input
name="video"
onChange={() => {
props.setSelectedVideoId(
data.id
);
}}
type="radio"
/>
<img
src={data?.images?.thumbnail?.src}
className="image-size"
/>
<span>{data.name}</span>
</td>
<td>
{data.created_at?.split("T")[0]}
</td>
<td>{data.id}</td>
<td>
{data.updated_at?.split("T")[0]}
</td>
</tr>
))
) : (
<tr>
<td colSpan="4">
<Alert variant="danger" colSpan={3}>
{error}
</Alert>
</td>
</tr>
)
) : (
<tr>
<td colSpan="4">
<Alert variant="primary" colSpan={4}>
Loading...
</Alert>
</td>
</tr>
)}
</tbody>
</table>
{cmsVideo?.length > 0 && (
<Pagination
activePage={offset + 1}
pageRangeDisplayed={7}
itemsCountPerPage={6}
totalItemsCount={totalCount}
onChange={(e) => {
//const newOffset = offset + 1;
setOffset(e - 1);
}}
/>
)}
</Card.Body>
</Tab.Pane>
))}
</Tab.Content>
)}
{platform == "Kaltura" && (
<Tab.Content>
<Tab.Pane eventKey="manual-1">
<Card.Body style={{ padding: "0px" }}>
<table>
<thead>
<tr>
<th>Name</th>
<th>Created</th>
<th>Video Id</th>
<th>Updated At</th>
</tr>
</thead>
<tbody>
{kaltura ? (
kaltura.objects?.length > 0 ? (
kaltura?.objects?.map((data) => {
var created = new Date(data.createdAt);
var update = new Date(data.updatedAt);
return (
<tr>
<td className="firstname">
<input
name="video"
onChange={() => {
setSelectedVideoIdKaltura(
data.dataUrl
);
}}
type="radio"
/>
<img
src={data?.thumbnailUrl}
className="image-size"
/>
<span>{data.name}</span>
</td>
<td>
{created?.toLocaleDateString()}
</td>
<td>{data.id}</td>
<td>
{update?.toLocaleDateString()}
</td>
</tr>
);
})
) : (
<tr>
<td colSpan="4">
<Alert variant="danger" colSpan={3}>
{error}
</Alert>
</td>
</tr>
)
) : (
<tr>
<td colSpan="4">
<Alert variant="primary" colSpan={4}>
Loading...
</Alert>
</td>
</tr>
)}
</tbody>
</table>
{kaltura?.objects?.length > 0 && (
<Pagination
activePage={paginationCounter}
pageRangeDisplayed={7}
itemsCountPerPage={6}
totalItemsCount={kaltura?.totalCount}
onChange={async (e) => {
setPaginationCounter(e);
const result = await dispatch(
getKalturaVideos("", e, 6)
);
setkaltura(result);
}}
/>
)}
</Card.Body>
</Tab.Pane>
</Tab.Content>
)}
{/* Vimeo */}
{platform == "Vimeo" && (
<Tab.Content>
<Tab.Pane eventKey="manual-1">
<Card.Body style={{ padding: "0px" }}>
<table>
<thead>
<tr>
<th>Name</th>
<th>Created</th>
<th>Video Id</th>
<th>Updated At</th>
</tr>
</thead>
<tbody>
{vimeo ? (
vimeo?.data?.length > 0 ? (
vimeo?.data?.map((data) => {
var created = new Date(data.created_time);
var update = new Date(data.modified_time);
return (
<tr>
<td className="firstname">
<input
name="video"
onChange={() => {
props.setSelectedVideoIdVimeo(
data.player_embed_url
);
}}
type="radio"
/>
<img
src={data?.thumbnailUrl}
className="image-size"
/>
<span>{data.name}</span>
</td>
<td>
{created?.toLocaleDateString()}
</td>
<td>{data.resource_key}</td>
<td>
{update?.toLocaleDateString()}
</td>
</tr>
);
})
) : (
<tr>
<td colSpan="4">
<Alert variant="danger" colSpan={3}>
{error}
</Alert>
</td>
</tr>
)
) : (
<tr>
<td colSpan="4">
<Alert variant="primary" colSpan={4}>
Loading...
</Alert>
</td>
</tr>
)}
</tbody>
</table>
{vimeo?.data?.length > 0 && (
<Pagination
activePage={paginationCounter}
pageRangeDisplayed={7}
itemsCountPerPage={6}
totalItemsCount={vimeo?.total}
onChange={async (e) => {
setPaginationCounter(e);
const result = await dispatch(
getVimeoVideos("", e, 6)
);
setVimeo(result);
}}
/>
)}
</Card.Body>
</Tab.Pane>
</Tab.Content>
)}
</div>
</div>
</Col>
</Row>
</Tab.Container>
</div>
</Modal.Body>
<Modal.Footer>
<div className="footer-bright-model">
<div className="model-footer-span">
{/* <span>Looking to add a new account?</span> */}
</div>
<div className="bright-model-btn">
<Buttons
onClick={() => {
props.setSelectedVideoId("");
props.onHide();
}}
secondary={true}
text="Cancel"
width="95px"
height="32px"
hover={true}
className="ml-16"
/>
<Buttons
primary={true}
text="Add File"
width="106px"
height="32px"
hover={true}
// className="ml-32"
onClick={() => {
props.onHide();
}}
/>
</div>
</div>
</Modal.Footer>
</Modal>
);
}
Example #23
| Source File: CourseImportPage.jsx From frontend-app-library-authoring with GNU Affero General Public License v3.0 | 4 votes |
|
CourseImportListFilter = ({
intl, organizations, filterParams, ...props
}) => {
const orgOptions = [
{
value: '',
label: intl.formatMessage(messages['library.course_import.course_filter.options.org.all']),
},
{
label: intl.formatMessage(messages['library.course_import.course_filter.options.org.organizations']),
group: organizations.map(organization => ({
value: organization,
label: organization,
})),
},
];
const handleOrgChange = (event) => {
props.setFilterParams({
...filterParams,
org: event.target.value,
});
};
const handleFilterSubmit = (event) => {
event.preventDefault();
props.setFilterParams({
...filterParams,
search_term: event.target.querySelector('[name="search_term"]').value.trim(),
});
};
return (
<>
<div className="bit">
<h3 className="title title-3">{intl.formatMessage(messages['library.course_import.aside.course_list.title'])}</h3>
<p>{intl.formatMessage(messages['library.course_import.aside.course_list.text.first'])}</p>
<p>{intl.formatMessage(messages['library.course_import.aside.course_list.text.second'])}</p>
</div>
<div className="bit">
<Form onSubmit={handleFilterSubmit} className="filter-form">
<Form.Row>
<Form.Group className="w-100">
<Form.Label className="title title-3">
{intl.formatMessage(messages['library.course_import.course_filter.title'])}
</Form.Label>
<div className="d-flex flex-row">
<Form.Control
name="search_term"
placeholder={intl.formatMessage(messages['library.course_import.course_filter.input.default'])}
defaultValue={filterParams ? filterParams.search_term : null}
/>
<Button
type="submit"
variant="primary"
className="ml-2 py-1 px-3 d-inline"
>
<FontAwesomeIcon icon={faSearch} />
</Button>
</div>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group className="w-100">
<Form.Label className="title title-3">
{intl.formatMessage(messages['library.course_import.course_filter.options.org.label'])}
</Form.Label>
<Input
name="org"
type="select"
options={orgOptions}
defaultValue={filterParams ? filterParams.org : null}
onChange={handleOrgChange}
/>
</Form.Group>
</Form.Row>
</Form>
</div>
</>
);
}
Example #24
| Source File: LibraryListPage.jsx From frontend-app-library-authoring with GNU Affero General Public License v3.0 | 4 votes |
|
renderContent() {
const { intl, libraries, orgs } = this.props;
const { showForm, filterParams } = this.state;
const paginationOptions = {
currentPage: this.state.paginationParams.page,
pageCount: Math.ceil(libraries.count / this.state.paginationParams.page_size),
buttonLabels: {
previous: intl.formatMessage(commonMessages['library.common.pagination.labels.previous']),
next: intl.formatMessage(commonMessages['library.common.pagination.labels.next']),
page: intl.formatMessage(commonMessages['library.common.pagination.labels.page']),
currentPage: intl.formatMessage(commonMessages['library.common.pagination.labels.currentPage']),
pageOfCount: intl.formatMessage(commonMessages['library.common.pagination.labels.pageOfCount']),
},
};
const orgOptions = [
{
value: '',
label: intl.formatMessage(messages['library.list.filter.options.org.all']),
},
{
label: intl.formatMessage(messages['library.list.filter.options.org.organizations']),
group: orgs.map(orgName => ({
value: orgName,
label: orgName,
})),
},
];
const typeOptions = [{
label: intl.formatMessage(messages['library.list.filter.options.type.types']),
group: Object.values(LIBRARY_TYPES).map((value) => (
{ value, label: intl.formatMessage(messages[`library.list.filter.options.type.${value}`]) }
)),
}];
return (
<div className="library-list-wrapper">
<div className="wrapper-mast wrapper">
<header className="mast has-actions">
<h1 className="page-header">{intl.formatMessage(messages['library.list.page.heading'])}</h1>
<nav className="nav-actions">
<ul>
<li className="nav-item">
<Button
variant="success"
onClick={this.showForm}
>
<FontAwesomeIcon icon={faPlus} className="pr-3" />
{intl.formatMessage(messages['library.list.new.library'])}
</Button>
</li>
</ul>
</nav>
</header>
</div>
<div className="wrapper-content wrapper">
<section className="content">
<article className="content-primary" role="main">
<LibraryIndexTabs />
{showForm
&& <LibraryCreateForm hideForm={this.hideForm} />}
<ul className="library-list">
{libraries.data.map((library) => (
<li key={library.id} className="library-item">
<LibraryListItem library={library} />
</li>
))}
</ul>
{libraries.count > 0
? (
<Pagination
className="library-list-pagination"
paginationLabel="pagination navigation"
currentPage={paginationOptions.currentPage}
pageCount={paginationOptions.pageCount}
buttonLabels={paginationOptions.buttonLabels}
onPageSelect={this.handlePageChange}
/>
)
: null}
</article>
<aside className="content-supplementary">
<div className="bit">
<h3 className="title title-3">{intl.formatMessage(messages['library.list.aside.title'])}</h3>
<p>{intl.formatMessage(messages['library.list.aside.text'])}</p>
<ul className="list-actions">
<li className="action-item">
<a
href="http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_components/libraries.html"
rel="noopener noreferrer"
target="_blank"
>
{intl.formatMessage(messages['library.list.aside.help.link'])}
</a>
</li>
</ul>
</div>
<div className="bit">
<Form onSubmit={this.handleFilterSubmit} className="filter-form">
<Form.Row>
<Form.Group className="w-100">
<Form.Label className="title title-3">
{intl.formatMessage(messages['library.list.filter.title'])}
</Form.Label>
<div className="d-flex flex-row">
<Form.Control
name="text_search"
placeholder={intl.formatMessage(messages['library.list.filter.input.default'])}
defaultValue={filterParams ? filterParams.text_search : null}
onChange={this.handleFilterChange}
/>
<Button
type="submit"
variant="primary"
className="ml-2 py-1 px-3 d-inline"
>
<FontAwesomeIcon icon={faSearch} />
</Button>
</div>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group className="w-100">
<Form.Label className="title title-3">
{intl.formatMessage(messages['library.list.filter.options.org.label'])}
</Form.Label>
<Input
name="org"
type="select"
options={orgOptions}
defaultValue={filterParams ? filterParams.org : null}
onChange={this.handleFilterOrgChange}
/>
</Form.Group>
</Form.Row>
<Form.Row>
<Form.Group className="w-100">
<Form.Label className="title title-3">
{intl.formatMessage(messages['library.list.filter.options.type.label'])}
</Form.Label>
<Input
name="type"
type="select"
options={typeOptions}
defaultValue={filterParams ? filterParams.type : null}
onChange={this.handleFilterTypeChange}
/>
</Form.Group>
</Form.Row>
</Form>
</div>
</aside>
</section>
</div>
</div>
);
}
Example #25
| Source File: SearchProducts.js From clayma-store with MIT License | 4 votes |
|
export default function SearchProducts() {
const { addToast } = useToasts();
const [query, setQuery] = useState("");
const [loading, setLoading] = useState(false);
const [searchresult, setsearchresult] = useState([]);
const SearchProducts = (e) => {
e.preventDefault();
if (query !== "") {
setLoading(true);
const results = products.filter((product) =>
product.productname.toLowerCase().includes(query.toLowerCase())
);
setsearchresult(results);
setLoading(false);
if (results.length < 1) {
addToast(
" No result found for the following product: " +
query +
". Please provide a valid product name and try again.",
{ appearance: "error", autoDismiss: true }
);
}
} else {
addToast("Please type something.", {
appearance: "info",
autoDismiss: true,
});
}
};
const handleSearchInput = (e) => {
setQuery(e.target.value);
setsearchresult([]);
};
return (
<div>
<TopBanner/>
<NavBar />
<HeroImage />
<div className="row container-search-bar">
<div className="col-lg-12">
<h1>
Search products. {query.length > 0 ? "Search query: " + query : ""}
</h1>
<div className="mb-3">
{loading && (
<img src={loadingIcon} alt="loading" className="loadingIcon" />
)}
</div>
<form onSubmit={SearchProducts}>
<div className="input-group">
<input
className="form-control form-control-lg shadow-none form-input-search-bar"
type="text"
placeholder="Search for any product"
autoFocus
name="query"
value={query}
onChange={handleSearchInput}
/>
<div className="input-group-append">
<button className="btn search-button shadow-none" type="submit">
<FontAwesomeIcon icon={faSearch} />
</button>
</div>
</div>
</form>
</div>
</div>
<div className="containet-search-product">
<div className="container-products">
<div className="row">
{searchresult.length >= 1
? searchresult.map((product) => (
<Product data={product} key={product.id} />
))
: ""}
</div>
</div>
</div>
<Footer />
</div>
);
}
Example #26
| Source File: Navbar.js From Todo-List with MIT License | 4 votes |
|
render() {
const bgDark = {
background: "#111",
color: "white"
}
const dark = {
background: "#333",
color: "white"
}
const bgLight = {
background: "#007bff",
color: "#555"
}
const navButtonDark = {
color: "white",
background: "#555",
marginTop: "-8px",
marginBottom: "-8px",
paddingTop: "8px",
paddingBottom: "8px",
};
const navButtonLight = {
color: "#555",
background: "white",
marginTop: "-8px",
marginBottom: "-8px",
paddingTop: "8px",
paddingBottom: "8px",
};
const abs = {
top: "1vh",
right: "1vw"
}
return (
<div style={this.props.isDark === true ? bgDark : bgLight}>
<Navbar collapseOnSelect expand="xs" style={this.props.isDark === true ? bgDark : bgLight} variant="dark" fixed="top" className="fixedTop-1">
<Navbar.Brand href="#home">Todo List</Navbar.Brand>
<Nav className="justify-content-end ml-auto">
<NavDropdown style={abs} className="position-absolute" title={"Welcome " + this.props.uname} id="basic-nav-dropdown">
<NavDropdown.Item onClick={this.logoutCall} style={this.props.isDark === true ? navButtonDark : navButtonLight}>Logout</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar>
<Navbar collapseOnSelect bg={this.props.isDark === true ? "dark" : "light"} variant="dark" className="fixedTop-2 mx-auto">
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="nav-2 mx-auto">
<Form
noValidate
validated={this.state.validated}
onSubmit={this.handleSubmit}
onReset={this.handleReset}
className="row"
>
<Form.Group as={Col} lg="2" controlId="validationDate">
<Button className="addtask-btn btn-block" variant="warning" onClick={() => this.toggleModal()}>+ Add Task</Button>
</Form.Group>
<Form.Group as={Col} lg="4" controlId="validationFromDate">
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Text id="inputGroupPrepend1">From</InputGroup.Text>
</InputGroup.Prepend>
<Form.Control
type="date"
name="fromDate"
value={this.state.fromDate}
onChange={this.handleInputChange}
aria-describedby="inputGroupPrepend1"
style={this.props.isDark === true ? dark : null}
required
/>
<Form.Control.Feedback type="invalid">
Please choose a proper date.
</Form.Control.Feedback>
<Form.Control.Feedback>
Looks good.
</Form.Control.Feedback>
</InputGroup>
</Form.Group>
<Form.Group as={Col} lg="4" controlId="validationToDate">
<InputGroup>
<InputGroup.Prepend>
<InputGroup.Text id="inputGroupPrepend2">To</InputGroup.Text>
</InputGroup.Prepend>
<Form.Control
type="date"
name="toDate"
value={this.state.toDate}
onChange={this.handleInputChange}
aria-describedby="inputGroupPrepend2"
style={this.props.isDark === true ? dark : null}
required
/>
<Form.Control.Feedback type="invalid">
Please choose a proper date.
</Form.Control.Feedback>
<Form.Control.Feedback>
Looks good.
</Form.Control.Feedback>
</InputGroup>
</Form.Group>
<Form.Group as={Col} lg="1" controlId="validationDate">
<Button className="search-btn btn-block" variant="primary" type="submit">
<FontAwesomeIcon icon={faSearch}></FontAwesomeIcon>
</Button>
</Form.Group>
<Form.Group as={Col} lg="1" controlId="validationDate">
<Button className="search-btn btn-block" variant="danger" type="reset">
<FontAwesomeIcon icon={faRedoAlt}></FontAwesomeIcon>
</Button>
</Form.Group>
</Form>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
)
}
Example #27
| Source File: AdvancedSearch.js From gsocanalyzer with MIT License | 4 votes |
|
AdvancedSearch = forwardRef((props, ref) => {
const { buildSearchList, sortParameter, setSortParameter, sortAscendingOrder, setSortAscendingOrder } = props
let inputElement;
const searchFilterOptions = [
{
key: 0,
text: 'Tech Stack',
value: 0
},
{
key: 1,
text: 'Organisation Name',
value: 1
},
{
key: 2,
text: 'Category',
value: 2
},
{
key: 3,
text: 'Topic',
value: 3
}
]
const sortParameterOptions = [
{
key: 0,
text: 'Number of GSoC Appearances',
value: 0
},
{
key: 1,
text: 'Total Number of Projects',
value: 1
},
{
key: 2,
text: 'Average Number of Projects',
value: 2
},
]
const [search, setSearch] = useState('')
const [filter, setFilter] = useState(0)
const [autoComplete, setAutoComplete] = useState(null)
const [suggestions, setSuggestions] = useState([])
const [isInputInFocus, setIsInputInFocus] = useState(false)
useImperativeHandle(ref, () => ({
resetSearchState () {
setSearch('');
setFilter(0);
setAutoComplete(null);
setSuggestions([]);
setIsInputInFocus(false);
}
}));
const handleFilter = (unNeccesaryThing, e) => {
setFilter(e.value)
}
const handleSortParameter = (unNeccesaryThing, e) => {
setSortParameter(e.value)
}
const handleSearch = e => {
e && e.preventDefault()
document.activeElement.blur()
buildSearchList(search, filter)
}
const focusHandler = e => {
// setSuggestions(autoComplete.suggest(search))
setTimeout(() => {
setIsInputInFocus(document.activeElement === inputElement)
}, 0);
}
useEffect(() => {
document.body.addEventListener('click', focusHandler)
inputElement = document.getElementById('inputBox')
return () => {
document.body.removeEventListener('click', focusHandler)
}
}, [])
useEffect(() => {
let list = []
if (filter === 0) {
let dataSet = new Set();
data.forEach(e => {
dataSet.add(...e.tech)
})
list = [...[...dataSet].sort((a, b) => (a - b))]
}
if (filter === 1) {
data.forEach(e => {
list.push(e.name.replaceAll('/', '').replaceAll(' ', ' ').toLowerCase())
})
}
if (filter === 2) {
data.forEach(e => {
list.push(e.cat.replaceAll('/', '').replaceAll(' ', ' ').toLowerCase())
})
}
if (filter === 3) {
let dataSet = new Set();
data.forEach(e => {
dataSet.add(...e.top)
})
list = [...[...dataSet].sort((a, b) => (a - b))]
}
setAutoComplete(new AutoComplete(list))
setSuggestions([])
setSearch('')
}, [filter])
useEffect(() => {
autoComplete && setSuggestions(autoComplete.suggest(''))
}, [autoComplete])
useEffect(() => {
autoComplete && setSuggestions(autoComplete.suggest(search))
}, [search])
return (
<Container textAlign='center'>
<form className="search-form" autocomplete="off">
<div id='searchBox'>
<input
value={search}
onChange={e => {
if (e.keyCode === 13) {
handleSearch()
return
}
setSearch(e.target.value.toLowerCase())
}}
type='text'
name='search'
placeholder='Search...'
id="inputBox"
autocomplete="off"
/>
{
(isInputInFocus && suggestions.length > 0 && suggestions[0] !== search) && (<div className="suggestions-dropDown">
{suggestions.map(content => (
content !== search && <p
key={content}
onClick={() => {
setSearch(content)
buildSearchList(content, filter)
}}>{content}</p>
))}
</div>)
}
</div>
<button type='submit' onClick={handleSearch} className='search-btn'>
<FontAwesomeIcon color='white' className='fa-2x' icon={faSearch} />{' '}
</button>
</form>
<div className="dropdown-menu">
<div className='dropdown-panel'>
<div id="dropdown-label">Search By</div>
<Dropdown
value={filter}
onChange={handleFilter}
id='searchFilter'
selection
options={searchFilterOptions}
/>
</div>
<div className='dropdown-panel sort-panel'>
<div id="dropdown-label">Sort By</div>
<Dropdown
value={sortParameter}
onChange={handleSortParameter}
id='sortParameter'
selection
options={sortParameterOptions}
/>
<img className="sort-icon" src={sortAscendingOrder ? sortAscending : sortDescending} onClick={() => {setSortAscendingOrder(!sortAscendingOrder)}} />
</div>
</div>
</Container>
)
})
Example #28
| Source File: WallContainer.js From Github-Profile-README with MIT License | 4 votes |
|
function WallContainer(){
const [usersProfile, setusersProfile] = useState({
profiles : []
});
const [globalProfiles, setglobalProfiles] = useState({
profiles : []
});
const [userGithubCards, setuserGithubCards] = useState({});
const [searchValue, setsearchValue] = useState('');
const importAll = (r) => r.keys().map(r);
const markdownFiles = importAll(require.context('../dataSet/githubCards', false, /\.md$/)).sort().reverse();
useEffect(() => {
var profileCards = [];
users.forEach(user => {
profileCards.push(user);
});
setusersProfile({profiles : profileCards})
setglobalProfiles({profiles : profileCards})
renderPosts();
// eslint-disable-next-line
}, []);
const renderPosts = async() => {
var fileNameExecutionSeq = [];
Promise.all(
markdownFiles.map((file) => fetch(file)
.then(
(res) => {
var fileName = file;
fileName = fileName.substr(14).slice(0, -12);
fileNameExecutionSeq.push(fileName);
return res.text();
}
)))
.then((mdData) => {
fileNameExecutionSeq.forEach( (fName,index) => {
var cards = userGithubCards;
cards[fName] = mdData[index]
setuserGithubCards({cards});
});
})
.catch((err) => console.error(err));
}
const handleSubmit = (event) => {
handleSearch(searchValue);
event.preventDefault();
}
const search = (event) => {
const target = event.target;
setsearchValue(target.value);
handleSearch(target.value);
}
const handleSearch = (searchValue) =>{
var profileCards = globalProfiles.profiles;
var matchedProfiles = [];
profileCards.forEach(profile => {
if (profile.githubUserName.toUpperCase().indexOf(searchValue.toUpperCase()) !== -1 ){
matchedProfiles.push(profile);
}
});
setusersProfile({profiles : matchedProfiles});
renderPosts();
}
return(
<React.Fragment>
<div className={`${styles.SearchComponent}`}>
<form onSubmit={handleSubmit}>
<div className={styles.search}>
<input type="text" value={searchValue} onChange={search} className={styles.search__input} placeholder="Search GitHub User Name"/>
<div className={styles.search__icon}>
<FontAwesomeIcon name="search" icon={faSearch}></FontAwesomeIcon>
</div>
</div>
</form>
</div>
{
(typeof userGithubCards.cards !== 'undefined')
? <div className={styles.ProfileCardContainer}>
{
usersProfile.profiles.map((profile, index) => {
return(
<ProfileCardComponent
profileDetails = {profile}
markDown={userGithubCards.cards[profile.githubUserName]}
index={index}
key={index}
/>
)
})
}
</div>
: <div></div>
}
</React.Fragment>
)
}
Example #29
| Source File: Search.js From covid-19-mask-map with MIT License | 4 votes |
|
function Search() {
const geoloc = useGeolocation();
const [geolocState, setGeolocState] = useState(null);
const [geolocWhenAvailable, setGeolocWhenAvailable] = useState(false);
const { setCenterCoord } = useMaskData();
const { t } = useTranslation();
const [address, setAddress] = useState("");
const fetchGeocode = async (address) => {
let data;
try {
data = await axios.get(
`${
process.env.NODE_ENV === "development"
? "http://localhost:4000"
: "https://api.livecorona.co.kr"
}/?address=${address}`
);
return data;
} catch (error) {
console.error(error);
console.log("Failed to retrieve geocoding for: " + address);
}
};
useEffect(() => {
setAddress(localStorage.getItem("lastSearchedAddress"));
}, []);
useEffect(() => {
if (!geoloc) {
return;
}
// navigator.permissions is an experimental API that is
// unsupported in iOS, so it needs a try-catch block
try {
navigator.permissions
.query({ name: "geolocation" })
.then((result) => {
setGeolocState(result.state);
});
} catch (error) {
console.error(error);
setGeolocState("unknown");
}
if (geolocWhenAvailable) {
if (
geoloc.accuracy != null ||
geoloc.latitude != null ||
geoloc.longitude != null
) {
const coord = {
lat: geoloc.latitude,
lng: geoloc.longitude,
};
setCenterCoord(coord);
console.log(coord);
}
}
}, [geoloc, geolocWhenAvailable, setCenterCoord]);
const onClickGeoloc = () => {
if (geolocState !== "granted") {
alert("위치 권한을 브라우저 설정에서 허용해야 사용할 수 있습니다");
}
setGeolocWhenAvailable(true);
};
const onClickAddress = async () => {
if (address.length < 1) {
alert("주소를 입력해 주세요.");
return;
}
localStorage.setItem("lastSearchedAddress", address);
let geocodes;
try {
geocodes = await fetchGeocode(address);
} catch (error) {
console.error(error);
alert("주소를 찾을 수 없습니다. 다시 시도해 주십시오.");
return;
}
console.log(geocodes.data);
if (!geocodes.data.meta.totalCount) {
alert("주소를 찾을 수 없습니다. 다시 시도해 주십시오.");
return;
}
let coord = {
lat: geocodes.data.addresses[0].y,
lng: geocodes.data.addresses[0].x,
};
setCenterCoord(coord);
};
const handleFormSubmit = (e) => {
e.preventDefault();
onClickAddress();
};
return (
<>
<Container>
<Row>
<Col>
<div className="text-center mb-5">
<img
src={MaskMapIntro}
alt="공적 마스크 판매처"
width="100vw"
className="mb-3"
/>
<h1 className="title">
{t("searchMaskStores")}
</h1>
</div>
</Col>
</Row>
<Row className="justify-content-center mb-3 text-center">
<Col sm={12} md={6} lg={5}>
<Form onSubmit={handleFormSubmit}>
<Form.Group controlId="formBasicEmail">
<Form.Label>
{t("addressInputLabel")}
</Form.Label>
<Form.Control
type="text"
placeholder=""
value={address}
onChange={(e) => setAddress(e.target.value)}
/>
<Form.Text className="text-muted">
{t("addressInputExample")}
</Form.Text>
</Form.Group>
<div className="d-flex flex-column mb-3">
<Button
variant="primary"
className="mb-2"
onClick={onClickAddress}>
<FontAwesomeIcon icon={faSearch} />{" "}
{t("searchByAddress")}
</Button>
<Button
variant="outline-primary"
onClick={onClickGeoloc}>
<FontAwesomeIcon icon={faLocationArrow} />{" "}
{t("searchByGeoloc")}
</Button>
</div>
<Alert variant="info">
{t("notice.publicMaskShutdown")}
</Alert>
</Form>
</Col>
</Row>
</Container>
</>
);
}
