const Text = styled.div` display: flex; column-gap: 0.5rem; align-items: center; color: #fff; font-family: Helvetica Neue; font-size: 24px; font-style: normal; font-weight: 500; line-height: 120% margin-bottom: 1rem; `; const Input = styled.input` color: #fff; width: 100%; height: 40px; padding: 8px 60px 8px 16px; margin-top: 1rem; margin-bottom: 1rem; border-radius: 4px; background-color: #0e0e10; border: none; `; const FunctionButton = styled.button` background-color: ${({ disabled }) => disabled ? `${colors.disabled};` : `${colors.base};` }; :hover { background-color: ${({ disabled }) => disabled ? `${colors.disabled};` : `${colors.hover};` }; } color: #fff; border-radius: 4px; padding-top: 0.5rem; padding-bottom: 0.5rem; border: none; width: 100%; `; const CloseButton = styled.div` color: #fff; :hover { color: #5765f2; } position: absolute; right: 1rem; cursor: pointer; `; const { title, toggle, placeholder, createChannel, buttonText, componentOwnerId, channelNameValidator, colors } = props; const BaseModal = (props) => ( <Widget src={`${componentOwnerId}/widget/Calimero.Common.Popups.BaseModal`} props={{ ...props, componentOwnerId, }} /> ); const [isOpen, setIsOpen] = useState(false); const [isProcessing, setIsProcessing] = useState(false); const [inputValue, setInputValue] = useState(""); const [validInput, setValidInput] = useState(false); const [visibility, setVisibility] = useState('public'); const [readOnly, setReadOnly] = useState('no'); const runProcess = () => { setIsProcessing(true); createChannel(inputValue, visibility === 'private', readOnly === 'yes').then((_) => { setIsProcessing(false); setIsOpen(false); }); }; const onOpenChange = (isOpen) => { if (isProcessing && !isOpen) { return; } setIsOpen(isOpen); }; const handleClosePopup = () => { if (isProcessing) return; setIsOpen(false); }; const popupContent = ( <> <CloseButton onClick={handleClosePopup}> <i className="bi bi-x-lg"></i> </CloseButton> <Text>{title}</Text> <Input onChange={(e) => { setInputValue(e.target.value); if (channelNameValidator) { setValidInput(channelNameValidator(e.target.value)); } }} value={inputValue} placeholder={placeholder} disabled={isProcessing} /> <div className="mb-3"> <label className="form-label">Visibility:</label> <div className="d-flex"> <div className="form-check form-check-inline"> <input className="form-check-input" type="radio" name="visibility" id="public" value="public" checked={visibility === 'public'} onChange={() => setVisibility('public')} disabled={isSubmitting} /> <label className="form-check-label" htmlFor="public">Public</label> </div> <div className="form-check form-check-inline"> <input className="form-check-input" type="radio" name="visibility" id="private" value="private" checked={visibility === 'private'} onChange={() => setVisibility('private')} disabled={isSubmitting} /> <label className="form-check-label" htmlFor="private">Private</label> </div> </div> </div> <div className="mb-3"> <label className="form-label">Read-only:</label> <div className="d-flex"> <div className="form-check form-check-inline"> <input className="form-check-input" type="radio" name="readOnly" id="yes" value="yes" checked={readOnly === 'yes'} onChange={() => setReadOnly('yes')} disabled={isSubmitting} /> <label className="form-check-label" htmlFor="yes">Yes</label> </div> <div className="form-check form-check-inline"> <input className="form-check-input" type="radio" name="readOnly" id="no" value="no" checked={readOnly === 'no'} onChange={() => setReadOnly('no')} disabled={isSubmitting} /> <label className="form-check-label" htmlFor="no">No</label> </div> </div> </div> <FunctionButton onClick={runProcess} disabled={channelNameValidator && !validInput}> {isProcessing ? ( <Widget src={`${componentOwnerId}/widget/Calimero.Curb.Loader.Loader`} props={{ size: 16 }} /> ) : ( buttonText )} </FunctionButton> </> ); return ( <BaseModal toggle={toggle} content={popupContent} open={isOpen} onOpenChange={onOpenChange} /> );