You need to enable JavaScript to run this app.
登録する
ログイン
初めての方へ
料金プラン
法人向け
特集コンテンツ
TOP
作品キーワード一覧
22、cat
22
、cat
関連する作品が foriioにも多く投稿されています。
30秒で簡単に作れる、ポートフォリオ。無料で今すぐ！
無料のポートフォリオを作成する
foriioとは?
多くの
22、cat
関連する作品が投稿されています。
YearInReview22
50 Best & Most Inspirational G...
Screenshot 2022 11 11 at 11.18...
import React, { useState, useE...
2024 Design Trends
米津玄師 Kenshi Yonezu - KICKBACK
foriioでは他にもこんなジャンルの作品が投稿されています。
22、asa
22、we
af、cat
すべてクリエイターに必須なポートフォリオ。 30秒で簡単にしました
もっとみる
すべてのクリエイターにポートフォリオを
fori.io/
無料で使ってみる
プロダクト
foriioとは?
料金プラン
ポートフォリオとは?
ピックアップ
クリエイターキーワード
作品キーワード
foriio限定福利厚生
ヘルプ＆ディスカバリー
クリエイターの声
クリエイターの用語集
ご意見・お問い合わせ
FAQ
法人向け
For Business
foriio Team
会社情報
運営会社
会社のニュース
採用情報
プレスキット
利用規約
プライバシーポリシー
情報セキュリティ基本方針
特定商取引法
©2025 foriio, Inc
Made with
❤️
from Tokyo
初めての方へ
料金プラン
法人向け
特集コンテンツ
ポートフォリオを無料で作成
ログイン
TOP
作品キーワード一覧
22、cat
22
、cat
関連する作品が foriioにも多く投稿されています。
30秒で簡単に作れる、ポートフォリオ。無料で今すぐ！
無料のポートフォリオを作成する
foriioとは?
多くの
22、cat
関連する作品が投稿されています。
YearInReview22
Illustrator
Tim
50 Best & Most Inspirational G...
ヘアメイク
Avi embed test 30 (without icon)
Screenshot 2022 11 11 at 11.18...
イラストレーター, ヘアメイク, …
abab
import React, { useState, useE...
イラストレーター
Russell Carey
2024 Design Trends
映像ディレクター
Russell Carey
米津玄師 Kenshi Yonezu - KICKBACK
Film Director
Tim
foriioでは他にもこんなジャンルの作品が投稿されています。
22、asa
22、we
af、cat
すべてクリエイターに必須なポートフォリオ。 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)
