You need to enable JavaScript to run this app.
登録する
ログイン
初めての方へ
料金プラン
法人向け
特集コンテンツ
TOP
作品キーワード一覧
rf、design
rf
、design
関連する作品が foriioにも多く投稿されています。
30秒で簡単に作れる、ポートフォリオ。無料で今すぐ！
無料のポートフォリオを作成する
foriioとは?
多くの
rf、design
関連する作品が投稿されています。
Farfetch’d
import React, { useState, useE...
Memes on Instagram: "The Tesla...
Công thức tối ưu FrontEnd - Áp...
Công thức tối ưu FrontEnd - Áp...
Công thức tối ưu FrontEnd - Áp...
foriioでは他にもこんなジャンルの作品が投稿されています。
rf、apple
rf、event
drawing、design
すべてクリエイターに必須なポートフォリオ。 30秒で簡単にしました
もっとみる
すべてのクリエイターにポートフォリオを
fori.io/
無料で使ってみる
プロダクト
foriioとは?
料金プラン
ポートフォリオとは?
ピックアップ
クリエイターキーワード
作品キーワード
foriio限定福利厚生
ヘルプ＆ディスカバリー
クリエイターの声
クリエイターの用語集
ご意見・お問い合わせ
FAQ
法人向け
For Business
foriio Team
会社情報
運営会社
会社のニュース
採用情報
プレスキット
利用規約
プライバシーポリシー
情報セキュリティ基本方針
特定商取引法
©2025 foriio, Inc
Made with
❤️
from Tokyo
初めての方へ
料金プラン
法人向け
特集コンテンツ
ポートフォリオを無料で作成
ログイン
TOP
作品キーワード一覧
rf、design
rf
、design
関連する作品が foriioにも多く投稿されています。
30秒で簡単に作れる、ポートフォリオ。無料で今すぐ！
無料のポートフォリオを作成する
foriioとは?
多くの
rf、design
関連する作品が投稿されています。
Farfetch’d
Russell Carey
import React, { useState, useE...
イラストレーター
Russell Carey
Memes on Instagram: "The Tesla...
Film Director
Forrio Internal
Công thức tối ưu FrontEnd - Áp...
DogTester
Minh Nguyễn Tuấn
Công thức tối ưu FrontEnd - Áp...
DogTester
Minh Nguyễn Tuấn
Công thức tối ưu FrontEnd - Áp...
Film Director
DuC
PRO
foriioでは他にもこんなジャンルの作品が投稿されています。
rf、apple
rf、event
drawing、design
すべてクリエイターに必須なポートフォリオ。 30秒で簡単にしました
もっとみる
すべてのクリエイターにポートフォリオを
fori.io/
無料で使ってみる
プロダクト
foriioとは?
料金プラン
ポートフォリオとは?
ピックアップ
クリエイターキーワード
作品キーワード
foriio限定福利厚生
ヘルプ＆ディスカバリー
クリエイターの声
クリエイターの用語集
ご意見・お問い合わせ
FAQ
法人向け
For Business
foriio Team
会社情報
運営会社
会社のニュース
採用情報
プレスキット
利用規約
プライバシーポリシー
情報セキュリティ基本方針
特定商取引法
©2025 foriio, Inc
Made with
❤️
from Tokyo
![import React, { useState, useEffect, useCallback } from 'react'; import Autosuggest from 'react-autosuggest'; import styled from 'styled-components'; import TextInput from 'components/Form/v2/TextInput'; import { WhiteButton } from 'components/Buttons'; import { suggestions as roleSuggestions } from 'services/constants/roleSuggestions.json'; const RoleTyperContainer = styled.div` display: flex; flex-direction: row; width: 100%; `; const RoleTyperInput = styled(TextInput)` height: 35px; `; const RoleTyperButton = styled(WhiteButton)` margin-left: 5px; align-self: flex-start; height: 35px; padding-top: 6px; padding-bottom: 6px; :hover { background-color: #adadad; } :active { background-color: #adadad; } `; const RoleAddButton = styled(WhiteButton)` align-self: flex-start; padding: 8px 20px; :hover { background-color: #adadad; } :active { background-color: #adadad; } `; const RoleSuggestion = styled.div` display: flex; flex-direction: row; align-items: center; `; const RoleSuggestionName = styled.div` font-size: 15px; line-height: 15px; font-weight: bold; color: #222222; margin-left: 10px; word-break: break-all; `; const AutosuggestInputContainer = styled.div` & .react-autosuggest__container { position: relative; width: 100%; } & .react-autosuggest__suggestions-container { display: none; } & .react-autosuggest__suggestions-container--open { display: flex; flex-direction: column; flex: 1; width: 100%; position: absolute; z-index: 1000; right: 0; } & .react-autosuggest__suggestions-list { border-top: 1px solid #e6e6e6; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border-radius: 0 0 2px 2px; list-style-type: none; background-color: #fff; margin: 0; padding: 8px; overflow-y: scroll; } & .react-autosuggest__suggestion { cursor: pointer; padding: 8px; text-align: left; background-color: #fff; } & .react-autosuggest__suggestion--highlighted { background-color: #ddd; } `; const RoleCreator = ({ addButtonLabel, addNewButtonLabel, chosenRoles, onAdd, }) => { const [showTyper, setShowTyper] = useState(false); const [role, setRole] = useState(''); const [suggestions, setSuggestions] = useState([]); const [isSelectSuggestion, setIsSelectSuggestion] = useState(false); const handleRoleTyperAdd = useCallback(() => { const trimmedRole = role.trim(); if (trimmedRole !== '') { const duplicate = chosenRoles.includes(trimmedRole); if (!duplicate) { onAdd(trimmedRole); setShowTyper(false); } } setRole(''); }, [role, chosenRoles]); useEffect(() => { if (isSelectSuggestion && role) { handleRoleTyperAdd(); setIsSelectSuggestion(false); } }, [isSelectSuggestion, role]); const handleOnKeyPress = e => { if (e.key === 'Enter') { handleRoleTyperAdd(); } }; const handleOnSuggestionsFetchRequested = ({ value, reason }) => { if (reason === 'input-changed') { const newSuggestions = roleSuggestions .filter(r => { const regex = new RegExp(value, 'gi'); return r.match(regex); }) .slice(0, 10); setSuggestions(newSuggestions); } }; const handleOnSuggestionsClearRequested = () => { setSuggestions([]); }; const handleOnBlurInput = (event, { highlightedSuggestion }) => { if (highlightedSuggestion === null && role) { setRole(role); } }; const handleOnSuggestionSelected = (event, { suggestion }) => { setRole(suggestion); setIsSelectSuggestion(true); }; const renderSuggestion = suggestion => { return ( <RoleSuggestion> <RoleSuggestionName>{suggestion}</RoleSuggestionName> </RoleSuggestion> ); }; const renderAutosuggestInputComponent = inputProps => { return <RoleTyperInput {...inputProps} />; }; return showTyper ? ( <RoleTyperContainer> <AutosuggestInputContainer> <Autosuggest suggestions={suggestions} onSuggestionsFetchRequested={handleOnSuggestionsFetchRequested} onSuggestionsClearRequested={handleOnSuggestionsClearRequested} onSuggestionSelected={handleOnSuggestionSelected} getSuggestionValue={suggestion => suggestion} renderSuggestion={renderSuggestion} renderInputComponent={renderAutosuggestInputComponent} focusInputOnSuggestionClick={false} inputProps={{ 'data-testid': 'work-creator-role-input', value: role, onChange: e => setRole(e.target.value), onKeyPress: handleOnKeyPress, containerStyle: { width: '100%', }, onBlur: handleOnBlurInput, }} /> </AutosuggestInputContainer> <RoleTyperButton data-testid="work-creator-role-typer-button" text={addButtonLabel} disabled={!role} onClick={handleRoleTyperAdd} /> </RoleTyperContainer> ) : ( <RoleAddButton data-testid="work-creator-role-add-button" text={addNewButtonLabel} onClick={() => setShowTyper(true)} /> ); }; export default RoleCreator;](https://imgx-staging.foriio.com/images/store/ea42b089b8be9faedf4a9de16fbd3418.png?auto=compress&fit=crop&h=424&w=688)
