@patternfly/react-docs 7.6.0-prerelease.6 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/label/react-demos.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useEffect, useRef, useState } from 'react';
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+const pageData = {
+  "id": "Label",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/label/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/LabelGroupDemos.md",
+  "relPath": "packages/react-core/src/demos/LabelGroupDemos.md",
+  "examples": [
+    "Editable labels with add dropdown",
+    "Editable labels with add modal"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useEffect,
+  useRef,
+  useState,
+  ModalDeprecated,
+  ModalVariantDeprecated,
+  RhUiInformationFillIcon
+};
+pageData.examples = {
+  'Editable labels with add dropdown': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useRef, useState } from 'react';\nimport { LabelGroup, Label, LabelColor, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';\n\nexport const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {\n  const toggleRef = useRef<HTMLDivElement>(undefined);\n  const menuRef = useRef<HTMLDivElement>(undefined);\n  const containerRef = useRef<HTMLDivElement>(undefined);\n\n  const [idIndex, setIdIndex] = useState<number>(3);\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [labels, setLabels] = useState<any>([\n    { name: 'Label 1', id: 0 },\n    { name: 'Label 2', id: 1 },\n    {\n      name: 'Label 3',\n      props: {\n        isEditable: true,\n        editableProps: {\n          'aria-label': 'Editable label with text Label 3'\n        }\n      },\n      id: 2\n    }\n  ]);\n\n  const onClose = (labelId: string) => {\n    setLabels(labels.filter((l: any) => l.id !== labelId));\n  };\n\n  const onEdit = (nextText: string, index: number) => {\n    const copy = [...labels];\n    const updatedProps = {\n      ...labels[index].props,\n      editableProps: { 'aria-label': `Editable label with text ${nextText}` }\n    };\n\n    copy[index] = { name: nextText, props: updatedProps, id: labels[index].id };\n    setLabels(copy);\n  };\n\n  const onAdd = (labelText: string) => {\n    setLabels([\n      {\n        name: labelText,\n        id: idIndex\n      },\n      ...labels\n    ]);\n    setIdIndex(idIndex + 1);\n    setIsOpen(!isOpen);\n  };\n\n  const handleMenuKeys = (event: KeyboardEvent) => {\n    if (isOpen && menuRef.current.contains(event.target as Node)) {\n      if (event.key === 'Escape' || event.key === 'Tab') {\n        setIsOpen(!isOpen);\n        toggleRef.current.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = (event: MouseEvent) => {\n    if (\n      isOpen &&\n      !(menuRef.current.contains(event.target as Node) || toggleRef.current.contains(event.target as Node))\n    ) {\n      setIsOpen(false);\n    }\n  };\n\n  useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isOpen, menuRef]);\n\n  const onToggleClick = () => {\n    setTimeout(() => {\n      if (menuRef.current) {\n        const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');\n        firstElement && (firstElement as HTMLElement).focus();\n      }\n    }, 0);\n    setIsOpen(!isOpen);\n  };\n\n  const menu = (\n    <Menu ref={menuRef} onSelect={(_ev, itemId) => onAdd(itemId.toString())}>\n      <MenuContent>\n        <MenuList>\n          <MenuItem itemId=\"Label text 1\">Label text 1</MenuItem>\n          <MenuItem itemId=\"Label text 2\">Label text 2</MenuItem>\n          <MenuItem itemId=\"Label text 3\">Label text 3</MenuItem>\n          <MenuItem itemId=\"Label text 4\">Label text 4</MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n\n  const toggle = (\n    <div ref={toggleRef}>\n      <Label variant=\"overflow\" onClick={onToggleClick}>\n        Add label\n      </Label>\n    </div>\n  );\n\n  return (\n    <div ref={containerRef}>\n      <LabelGroup\n        categoryName=\"Label group 1\"\n        numLabels={5}\n        isEditable\n        addLabelControl={\n          <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />\n        }\n      >\n        {labels.map((label, index) => (\n          <Label\n            key={label.id}\n            id={label.id}\n            color={LabelColor.blue}\n            onClose={() => onClose(label.id)}\n            onEditCancel={(_event, prevText) => onEdit(prevText, index)}\n            onEditComplete={(_event, newText) => onEdit(newText, index)}\n            {...label.props}\n          >\n            {label.name}\n          </Label>\n        ))}\n      </LabelGroup>\n    </div>\n  );\n};\n","title":"Editable labels with add dropdown","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Editable labels with add modal': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useRef, useState } from 'react';\nimport {\n  LabelGroup,\n  Label,\n  LabelColor,\n  Button,\n  Form,\n  FormGroup,\n  TextInput,\n  Menu,\n  MenuContent,\n  MenuList,\n  MenuItem,\n  MenuToggle,\n  Radio,\n  Popper\n} from '@patternfly/react-core';\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';\nimport RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';\n\nexport const LabelGroupEditableAddModal: React.FunctionComponent = () => {\n  const [isModalOpen, setModalOpen] = useState<boolean>(false);\n  const [idIndex, setIdIndex] = useState<number>(7);\n  const [labelText, setLabelText] = useState<string>('');\n  const [color, setColor] = useState<string>();\n  const [icon, setIcon] = useState<any>();\n  const [labelType, setLabelType] = useState<string>('filled');\n  const [isClosable, setIsCloseable] = useState<boolean>(false);\n  const [isEditable, setIsEditable] = useState<boolean>(false);\n  const labelInputRef = useRef(null);\n\n  const [isColorOpen, setIsColorOpen] = useState<boolean>(false);\n  const colorMenuRef = useRef<HTMLDivElement>(null);\n  const colorContainerRef = useRef<HTMLDivElement>(null);\n  const colorToggleRef = useRef<HTMLButtonElement>(null);\n\n  const [isIconOpen, setIsIconOpen] = useState<boolean>(false);\n  const iconMenuRef = useRef<HTMLDivElement>(null);\n  const iconContainerRef = useRef<HTMLDivElement>(null);\n  const iconToggleRef = useRef<HTMLButtonElement>(null);\n\n  const [labels, setLabels] = useState<any>([\n    { name: 'Label 1', id: 4 },\n    { name: 'Label 2', id: 5 },\n    {\n      name: 'Label 3',\n      props: {\n        isEditable: true,\n        editableProps: {\n          'aria-label': 'Editable label with text Label 3'\n        }\n      },\n      id: 6\n    }\n  ]);\n\n  const onClose = (labelId: string) => {\n    setLabels(labels.filter((l: any) => l.id !== labelId));\n  };\n\n  const onEdit = (nextText: string, index: number) => {\n    const copy = [...labels];\n    const updatedProps = {\n      ...labels[index].props,\n      editableProps: { 'aria-label': `Editable label with text ${nextText}` }\n    };\n\n    copy[index] = { name: nextText, props: updatedProps, id: labels[index].id };\n    setLabels(copy);\n  };\n\n  const onAdd = () => {\n    let labelIcon: any;\n    if (icon === 'Info circle icon') {\n      labelIcon = <RhUiInformationFillIcon />;\n    }\n\n    setLabels([\n      {\n        name: labelText || 'New Label',\n        props: {\n          color: color ? color.toLowerCase() : 'gray',\n          icon: labelIcon,\n          variant: labelType || 'filled',\n          ...(!isClosable && isClosable !== undefined && { onClose: null }),\n          isEditable: isEditable !== undefined ? isEditable : true,\n          ...(isEditable && {\n            editableProps: {\n              'aria-label': `Editable label with text ${labelText || 'New Label'}`\n            }\n          })\n        },\n        id: idIndex\n      },\n      ...labels\n    ]);\n    setModalOpen(!isModalOpen);\n    setIdIndex(idIndex + 1);\n    setLabelText('');\n    setColor('');\n    setIcon(null);\n    setLabelType('filled');\n    setIsCloseable(false);\n    setIsEditable(false);\n  };\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setModalOpen(!isModalOpen);\n  };\n\n  useEffect(() => {\n    if (isModalOpen && labelInputRef && labelInputRef.current) {\n      (labelInputRef.current as HTMLInputElement).focus();\n    }\n  }, [isModalOpen]);\n\n  const handleMenuKeys = (event: KeyboardEvent) => {\n    if (isColorOpen && colorMenuRef?.current?.contains(event.target as Node)) {\n      if (event.key === 'Escape' || event.key === 'Tab') {\n        setIsColorOpen(!isColorOpen);\n        colorToggleRef?.current?.focus();\n      }\n    }\n    if (isIconOpen && iconMenuRef?.current?.contains(event.target as Node)) {\n      if (event.key === 'Escape' || event.key === 'Tab') {\n        setIsIconOpen(!isIconOpen);\n        iconToggleRef?.current?.focus();\n      }\n    }\n  };\n\n  const handleClickOutside = (event: MouseEvent) => {\n    if (isColorOpen && !colorMenuRef?.current?.contains(event.target as Node)) {\n      setIsColorOpen(false);\n    }\n    if (isIconOpen && !iconMenuRef?.current?.contains(event.target as Node)) {\n      setIsIconOpen(false);\n    }\n  };\n\n  useEffect(() => {\n    window.addEventListener('keydown', handleMenuKeys);\n    window.addEventListener('click', handleClickOutside);\n    return () => {\n      window.removeEventListener('keydown', handleMenuKeys);\n      window.removeEventListener('click', handleClickOutside);\n    };\n  }, [isColorOpen, isIconOpen, colorMenuRef, iconMenuRef]);\n\n  const onColorToggleClick = (ev: React.MouseEvent) => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      if (colorMenuRef.current) {\n        const firstElement = colorMenuRef.current.querySelector('li > button:not(:disabled)');\n        firstElement && (firstElement as HTMLElement).focus();\n      }\n    }, 0);\n    setIsColorOpen(!isColorOpen);\n  };\n\n  const colorToggle = (\n    <MenuToggle ref={colorToggleRef} onClick={onColorToggleClick} isExpanded={isColorOpen}>\n      {color || 'Select'}\n    </MenuToggle>\n  );\n\n  const colorMenu = (\n    <Menu\n      ref={colorMenuRef}\n      activeItemId={color}\n      onSelect={(_ev, itemId) => {\n        setColor(itemId?.toString());\n        colorToggleRef?.current?.focus();\n        setIsColorOpen(false);\n      }}\n      selected={color}\n    >\n      <MenuContent>\n        <MenuList>\n          <MenuItem itemId=\"Gray\">Gray</MenuItem>\n          <MenuItem itemId=\"Blue\">Blue</MenuItem>\n          <MenuItem itemId=\"Green\">Green</MenuItem>\n          <MenuItem itemId=\"Orange\">Orange</MenuItem>\n          <MenuItem itemId=\"Red\">Red</MenuItem>\n          <MenuItem itemId=\"Purple\">Purple</MenuItem>\n          <MenuItem itemId=\"Teal\">Teal</MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n\n  const onIconToggleClick = (ev: React.MouseEvent) => {\n    ev.stopPropagation(); // Stop handleClickOutside from handling\n    setTimeout(() => {\n      if (iconMenuRef.current) {\n        const firstElement = iconMenuRef.current.querySelector('li > button:not(:disabled)');\n        firstElement && (firstElement as HTMLElement).focus();\n      }\n    }, 0);\n    setIsIconOpen(!isIconOpen);\n  };\n\n  const iconToggle = (\n    <MenuToggle ref={iconToggleRef} onClick={onIconToggleClick} isExpanded={isIconOpen} icon={icon}>\n      {icon ? '' : 'Select'}\n    </MenuToggle>\n  );\n\n  const iconMenu = (\n    <Menu\n      ref={iconMenuRef}\n      activeItemId={icon}\n      onSelect={(_ev, itemId) => {\n        setIcon(itemId?.toString());\n        iconToggleRef?.current?.focus();\n        setIsIconOpen(false);\n      }}\n      selected={icon}\n    >\n      <MenuContent>\n        <MenuList>\n          <MenuItem itemId=\"No icon\">No icon</MenuItem>\n          <MenuItem itemId=\"Info circle icon\">\n            <RhUiInformationFillIcon />\n            Info circle icon\n          </MenuItem>\n        </MenuList>\n      </MenuContent>\n    </Menu>\n  );\n\n  return (\n    <div>\n      <LabelGroup\n        categoryName=\"Label group 1\"\n        numLabels={5}\n        isEditable\n        addLabelControl={\n          <Label variant=\"overflow\" onClick={handleModalToggle}>\n            Add label\n          </Label>\n        }\n      >\n        {labels.map((label: { name: string; id: string; props: any }, index: number) => (\n          <Label\n            key={label.id}\n            id={label.id}\n            color={LabelColor.blue}\n            onClose={() => onClose(label.id)}\n            onEditCancel={(_event, prevText) => onEdit(prevText, index)}\n            onEditComplete={(_event, newText) => onEdit(newText, index)}\n            {...label.props}\n          >\n            {label.name}\n          </Label>\n        ))}\n      </LabelGroup>\n      <ModalDeprecated\n        variant={ModalVariantDeprecated.small}\n        title=\"Add Label\"\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\n          <Button key=\"create\" variant=\"primary\" form=\"create-label-form\" onClick={onAdd}>\n            Save\n          </Button>,\n          <Button key=\"cancel\" variant=\"link\" onClick={handleModalToggle}>\n            Cancel\n          </Button>\n        ]}\n      >\n        <Form id=\"create-label-form\">\n          <FormGroup label=\"Label text\" fieldId=\"create-label-form-label-text\">\n            <TextInput\n              type=\"text\"\n              id=\"create-label-form-label-text\"\n              name=\"create-label-form-label-text\"\n              value={labelText}\n              onChange={(_event: React.FormEvent<HTMLInputElement>, value: string) => setLabelText(value)}\n              ref={labelInputRef}\n            />\n          </FormGroup>\n          <FormGroup label=\"Color\" fieldId=\"create-label-form-color\">\n            <div ref={colorContainerRef}>\n              <Popper\n                trigger={colorToggle}\n                triggerRef={colorToggleRef}\n                popper={colorMenu}\n                popperRef={colorMenuRef}\n                appendTo={colorContainerRef.current as HTMLElement}\n                isVisible={isColorOpen}\n              />\n            </div>\n          </FormGroup>\n          <FormGroup label=\"Icon\" fieldId=\"create-label-form-icon\">\n            <div ref={iconContainerRef}>\n              <Popper\n                trigger={iconToggle}\n                triggerRef={iconToggleRef}\n                popper={iconMenu}\n                popperRef={iconMenuRef}\n                appendTo={iconContainerRef.current as HTMLElement}\n                isVisible={isIconOpen}\n              />\n            </div>\n          </FormGroup>\n          <FormGroup label=\"Label type\" fieldId=\"create-label-form-label-type\">\n            <Radio\n              isChecked={labelType === 'filled'}\n              name=\"filled-label\"\n              onChange={() => setLabelType('filled')}\n              label=\"Filled\"\n              id=\"radio-filled\"\n              value=\"check1\"\n            />\n            <Radio\n              isChecked={labelType === 'outline'}\n              name=\"outline-label\"\n              onChange={() => setLabelType('outline')}\n              label=\"Outlined\"\n              id=\"radio-outline\"\n              value=\"check2\"\n            />\n          </FormGroup>\n          <FormGroup label=\"Dismissable\" fieldId=\"create-label-form-dismissable\">\n            <Radio\n              isChecked={isClosable === true}\n              name=\"closeable-label\"\n              onChange={() => setIsCloseable(true)}\n              label=\"Yes\"\n              id=\"radio-closable\"\n              value=\"check1\"\n            />\n            <Radio\n              isChecked={isClosable === false}\n              name=\"not-closeable-label\"\n              onChange={() => setIsCloseable(false)}\n              label=\"No\"\n              id=\"radio-not-closable\"\n              value=\"check2\"\n            />\n          </FormGroup>\n          <FormGroup label=\"Editable\" fieldId=\"create-label-form-editable\">\n            <Radio\n              isChecked={isEditable === true}\n              name=\"editable-label\"\n              onChange={() => setIsEditable(true)}\n              label=\"Yes\"\n              id=\"radio-editable\"\n              value=\"check3\"\n            />\n            <Radio\n              isChecked={isEditable === false}\n              name=\"not-editable-label\"\n              onChange={() => setIsEditable(false)}\n              label=\"No\"\n              id=\"radio-not-editable\"\n              value=\"check4\"\n            />\n          </FormGroup>\n        </Form>\n      </ModalDeprecated>\n    </div>\n  );\n};\n","title":"Editable labels with add modal","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"demos","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Demos`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Editable labels with add dropdown"])}
+    {React.createElement(pageData.examples["Editable labels with add modal"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsLabelReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;