|
| 1 | +import { |
| 2 | + useRef, |
| 3 | + useState, |
| 4 | + FunctionComponent, |
| 5 | + MouseEvent, |
| 6 | + CSSProperties, |
| 7 | + Ref, |
| 8 | + MouseEvent as ReactMouseEvent |
| 9 | +} from 'react'; |
| 10 | +import { |
| 11 | + Button, |
| 12 | + Checkbox, |
| 13 | + SkipToContent, |
| 14 | + MenuToggle, |
| 15 | + MenuToggleElement, |
| 16 | + Select, |
| 17 | + SelectList, |
| 18 | + SelectOption, |
| 19 | + Stack |
| 20 | +} from '@patternfly/react-core'; |
| 21 | +import Onboarding from '@patternfly/chatbot/dist/dynamic/Onboarding'; |
| 22 | +import Chatbot, { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot'; |
| 23 | +import onboardingHeader from './RH-Hat-Image.svg'; |
| 24 | + |
| 25 | +export const OnboardingExample: FunctionComponent = () => { |
| 26 | + const [isModalOpen, setIsModalOpen] = useState(true); |
| 27 | + const [displayMode, setDisplayMode] = useState(ChatbotDisplayMode.default); |
| 28 | + const [hasImage, setHasImage] = useState(true); |
| 29 | + const chatbotRef = useRef<HTMLDivElement>(null); |
| 30 | + const termsRef = useRef<HTMLDivElement>(null); |
| 31 | + const [isOpen, setIsOpen] = useState(false); |
| 32 | + const [selected, setSelected] = useState<string>('Select display mode'); |
| 33 | + |
| 34 | + const handleSkipToContent = (e) => { |
| 35 | + e.preventDefault(); |
| 36 | + if (!isModalOpen && chatbotRef.current) { |
| 37 | + chatbotRef.current.focus(); |
| 38 | + } |
| 39 | + if (isModalOpen && termsRef.current) { |
| 40 | + termsRef.current.focus(); |
| 41 | + } |
| 42 | + }; |
| 43 | + |
| 44 | + const handleModalToggle = (_event: MouseEvent | MouseEvent | KeyboardEvent) => { |
| 45 | + setIsModalOpen(!isModalOpen); |
| 46 | + }; |
| 47 | + |
| 48 | + const onPrimaryAction = () => { |
| 49 | + // eslint-disable-next-line no-console |
| 50 | + console.log('Clicked primary action'); |
| 51 | + }; |
| 52 | + |
| 53 | + const onSecondaryAction = () => { |
| 54 | + // eslint-disable-next-line no-console |
| 55 | + console.log('Clicked secondary action'); |
| 56 | + }; |
| 57 | + const onSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => { |
| 58 | + setSelected(value as string); |
| 59 | + setIsOpen(false); |
| 60 | + if (value === 'Default') { |
| 61 | + setDisplayMode(ChatbotDisplayMode.default); |
| 62 | + } |
| 63 | + if (value === 'Docked') { |
| 64 | + setDisplayMode(ChatbotDisplayMode.docked); |
| 65 | + } |
| 66 | + if (value === 'Fullscreen') { |
| 67 | + setDisplayMode(ChatbotDisplayMode.fullscreen); |
| 68 | + } |
| 69 | + if (value === 'Embedded') { |
| 70 | + setDisplayMode(ChatbotDisplayMode.embedded); |
| 71 | + } |
| 72 | + }; |
| 73 | + |
| 74 | + const onToggleClick = () => { |
| 75 | + setIsOpen(!isOpen); |
| 76 | + }; |
| 77 | + |
| 78 | + const toggle = (toggleRef: Ref<MenuToggleElement>) => ( |
| 79 | + <MenuToggle |
| 80 | + ref={toggleRef} |
| 81 | + onClick={onToggleClick} |
| 82 | + isExpanded={isOpen} |
| 83 | + style={ |
| 84 | + { |
| 85 | + width: '200px' |
| 86 | + } as CSSProperties |
| 87 | + } |
| 88 | + > |
| 89 | + {selected} |
| 90 | + </MenuToggle> |
| 91 | + ); |
| 92 | + |
| 93 | + const body = |
| 94 | + 'Experience personalized assistance and seamless problem-solving, simplifying your journey with Red Hat every step of the way.'; |
| 95 | + |
| 96 | + return ( |
| 97 | + <> |
| 98 | + <SkipToContent style={{ zIndex: '999' }} onClick={handleSkipToContent} href="#"> |
| 99 | + Skip to chatbot |
| 100 | + </SkipToContent> |
| 101 | + <div |
| 102 | + style={{ |
| 103 | + position: 'fixed', |
| 104 | + padding: 'var(--pf-t--global--spacer--lg)', |
| 105 | + zIndex: '601', |
| 106 | + boxShadow: 'var(--pf-t--global--box-shadow--lg)' |
| 107 | + }} |
| 108 | + > |
| 109 | + <Stack hasGutter> |
| 110 | + <Select |
| 111 | + id="single-select" |
| 112 | + isOpen={isOpen} |
| 113 | + selected={selected} |
| 114 | + onSelect={onSelect} |
| 115 | + onOpenChange={(isOpen) => setIsOpen(isOpen)} |
| 116 | + toggle={toggle} |
| 117 | + shouldFocusToggleOnSelect |
| 118 | + > |
| 119 | + <SelectList> |
| 120 | + <SelectOption value="Default">Default</SelectOption> |
| 121 | + <SelectOption value="Docked">Docked</SelectOption> |
| 122 | + <SelectOption value="Fullscreen">Fullscreen</SelectOption> |
| 123 | + <SelectOption value="Embedded">Embedded</SelectOption> |
| 124 | + </SelectList> |
| 125 | + </Select> |
| 126 | + <Checkbox |
| 127 | + isChecked={hasImage} |
| 128 | + aria-label="Toggle whether terms and conditions has a header image" |
| 129 | + id="toggle-header-image" |
| 130 | + name="toggle-header-image" |
| 131 | + label="Has image in header" |
| 132 | + onChange={(_event, checked) => setHasImage(checked)} |
| 133 | + ></Checkbox> |
| 134 | + <Button onClick={handleModalToggle}>Launch modal</Button> |
| 135 | + </Stack> |
| 136 | + </div> |
| 137 | + <Chatbot ref={chatbotRef} displayMode={displayMode} isVisible></Chatbot> |
| 138 | + <Onboarding |
| 139 | + ref={termsRef} |
| 140 | + displayMode={displayMode} |
| 141 | + isModalOpen={isModalOpen} |
| 142 | + handleModalToggle={handleModalToggle} |
| 143 | + onPrimaryAction={onPrimaryAction} |
| 144 | + onSecondaryAction={onSecondaryAction} |
| 145 | + image={hasImage ? onboardingHeader : undefined} |
| 146 | + altText={hasImage ? 'Open book' : undefined} |
| 147 | + title="Redefine work in the age of AI" |
| 148 | + > |
| 149 | + {body} |
| 150 | + </Onboarding> |
| 151 | + </> |
| 152 | + ); |
| 153 | +}; |
0 commit comments