import React, { useState, useEffect, useCallback } from 'react'; import Autosuggest from 'react-autosuggest'; import styled from 'styled-components'; import TextInput from 'components/Form/v2/TextInpu...

クレジット

イラストレーター

$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;-1$