@patternfly/react-core 4.227.3 → 4.227.6

package/src/components/Menu/examples/MenuWithViewMore.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { Menu, MenuList, MenuItem, MenuContent, Spinner } from '@patternfly/react-core';
+
+export const MenuWithViewMore: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState<number | string>(0);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [numOptions, setNumOptions] = React.useState(3);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [menuOptions, setMenuOptions] = React.useState([
+    <MenuItem key={0} itemId={'view-more-0'}>
+      Action
+    </MenuItem>,
+    <MenuItem
+      key={1}
+      itemId={'view-more-1'}
+      to="#default-link2"
+      // just for demo so that navigation is not triggered
+      onClick={event => event.preventDefault()}
+    >
+      Link
+    </MenuItem>,
+    <MenuItem key={2} itemId="view-more-2" isDisabled>
+      Disabled action
+    </MenuItem>,
+    <MenuItem key={3} itemId="view-more-3" isDisabled to="#default-link4">
+      Disabled link
+    </MenuItem>,
+    <MenuItem key={4} itemId="view-more-4">
+      Action 2
+    </MenuItem>,
+    <MenuItem key={5} itemId="view-more-5">
+      Action 3
+    </MenuItem>,
+    <MenuItem key={6} itemId="view-more-6">
+      Action 4
+    </MenuItem>,
+    <MenuItem key={7} itemId="view-more-7">
+      Action 5
+    </MenuItem>,
+    <MenuItem key={8} itemId="view-more-8">
+      Final option
+    </MenuItem>
+  ]);
+  const [visibleOptions, setVisibleOptions] = React.useState(menuOptions.slice(0, numOptions));
+
+  const activeItemRef = React.useRef<HTMLElement>(null);
+  const viewMoreRef = React.useRef<HTMLElement>(null);
+
+  React.useEffect(() => {
+    activeItemRef.current?.focus();
+  }, [visibleOptions]);
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
+    // eslint-disable-next-line no-console
+    console.log(`clicked ${itemId}`);
+    setActiveItem(itemId as string);
+  };
+
+  const simulateNetworkCall = (networkCallback: () => void) => {
+    setTimeout(networkCallback, 2000);
+  };
+
+  const getNextValidItem = (startingIndex: number, maxLength: number) => {
+    let validItem;
+    for (let i = startingIndex; i < maxLength; i++) {
+      if (menuOptions[i].props.isDisabled) {
+        continue;
+      } else {
+        validItem = menuOptions[i];
+        break;
+      }
+    }
+    return validItem;
+  };
+
+  const loadMoreOptions = () => {
+    const newLength = numOptions + 3 <= menuOptions.length ? numOptions + 3 : menuOptions.length;
+    const prevPosition = numOptions;
+    const nextValidItem = getNextValidItem(prevPosition, newLength);
+
+    setNumOptions(newLength);
+    setIsLoading(false);
+    setActiveItem(nextValidItem.props.itemId);
+    setVisibleOptions(menuOptions.slice(0, newLength));
+  };
+
+  const onViewMoreClick = () => {
+    setIsLoading(true);
+    simulateNetworkCall(() => {
+      loadMoreOptions();
+    });
+  };
+
+  return (
+    <Menu activeItemId={activeItem} onSelect={onSelect}>
+      <MenuContent>
+        <MenuList>
+          {visibleOptions.map(option => {
+            const props = option.props;
+
+            return <MenuItem key={option.key} ref={props.itemId === activeItem ? activeItemRef : null} {...props} />;
+          })}
+          {numOptions !== menuOptions.length && (
+            <MenuItem
+              {...(!isLoading && { isLoadButton: true })}
+              {...(isLoading && { isLoading: true })}
+              onClick={onViewMoreClick}
+              itemId="loader"
+              ref={viewMoreRef}
+            >
+              {isLoading ? <Spinner size="lg" /> : 'View more'}
+            </MenuItem>
+          )}
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+};

package/src/components/Radio/examples/Radio.md

@@ -7,104 +7,48 @@ ouia: true
 ---
 
 ## Examples
+
 ### Controlled
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
-
-class ControlledRadio extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      check1: false,
-    };
-
-    this.handleChange = (_, event) => {
-      const { value } = event.currentTarget;
-      this.setState({ [value]: true });
-    };
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <Radio
-          isChecked={this.state.check1}
-          name="radio-1"
-          onChange={this.handleChange}
-          label="Controlled radio"
-          id="radio-controlled"
-          value="check1"
-        />
-      </React.Fragment>
-    );
-  }
-}
+
+```ts file="./RadioControlled.tsx"
 ```
 
 ### Uncontrolled
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio label="Uncontrolled radio example" id="radio-uncontrolled" name="radio-2" />
+```ts file="./RadioUncontrolled.tsx"
 ```
 
 ### Reversed
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio isLabelBeforeButton label="Reversed radio example" id="radio-reversed" name="radio-3" />
+```ts file="./RadioReversed.tsx"
 ```
 
 ### Label wraps
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio isLabelWrapped label="Label wraps input example" id="radio-label-wraps-input" name="radio-4" />
+```ts file="./RadioLabelWraps.tsx"
 ```
 
 ### Disabled
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Radio id="radio-disabled" label="Disabled radio example" isDisabled name="radio-5" />
-  <Radio id="radio-disabled-checked" defaultChecked label="Disabled and checked radio example" isDisabled name="radio-6" />
-</React.Fragment>
+
+```ts file="./RadioDisabled.tsx"
 ```
 
 ### With description
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio id="radio-with-description" label="Radio with description example" description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP." />
+```ts file="./RadioWithDescription.tsx"
 ```
 
 ### With body
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio id="radio-with-body" label="Radio with body" body="This is where custom content goes." />
+```ts file="./RadioWithBody.tsx"
 ```
 
 ### With description and body
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio id="radio-description-body" label="Radio with description and body" description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP." body="This is where custom content goes." />
+```ts file="./RadioWithDescriptionAndBody.tsx"
 ```
 
 ### Standalone input
-```js
-import React from 'react';
-import { Radio } from '@patternfly/react-core';
 
-<Radio id="radio-standalone" aria-label="Standalone input" name="exampleRadioStandalone"/>
+```ts file="./RadioStandaloneInput.tsx"
 ```

package/src/components/Radio/examples/RadioControlled.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioControlled: React.FunctionComponent = () => {
+  const [check1, setCheck1] = React.useState(false);
+
+  const handleChange = () => {
+    setCheck1(true);
+  };
+  return (
+    <React.Fragment>
+      <Radio
+        isChecked={check1}
+        name="radio-1"
+        onChange={handleChange}
+        label="Controlled Radio"
+        id="radio-controlled"
+      ></Radio>
+    </React.Fragment>
+  );
+};

package/src/components/Radio/examples/RadioDisabled.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioDisabled: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Radio id="radio-disabled" label="Disabled radio example" isDisabled name="radio-5" />
+    <Radio
+      id="radio-disabled-checked"
+      defaultChecked
+      label="Disabled and checked radio example"
+      isDisabled
+      name="radio-6"
+    />
+  </React.Fragment>
+);

package/src/components/Radio/examples/RadioLabelWraps.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioLabelWraps: React.FunctionComponent = () => (
+  <Radio isLabelWrapped label="Label wraps input example" id="radio-label-wraps-input" name="radio-4" />
+);

package/src/components/Radio/examples/RadioReversed.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioReversed: React.FunctionComponent = () => (
+  <Radio isLabelBeforeButton label="Reversed radio example" id="radio-reversed" name="radio-3" />
+);

package/src/components/Radio/examples/RadioStandaloneInput.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioStandaloneInput: React.FunctionComponent = () => (
+  <Radio id="radio-standalone" aria-label="Standalone input" name="exampleRadioStandalone" />
+);

package/src/components/Radio/examples/RadioUncontrolled.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioUncontrolled: React.FunctionComponent = () => (
+  <Radio label="Uncontrolled radio example" id="radio-uncontrolled" name="radio-2" />
+);

package/src/components/Radio/examples/RadioWithBody.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioWithBody: React.FunctionComponent = () => (
+  <Radio id="radio-with-body" label="Radio with body" name="radio-8" body="This is where custom content goes." />
+);

package/src/components/Radio/examples/RadioWithDescription.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioWithDescription: React.FunctionComponent = () => (
+  <Radio
+    id="radio-with-description"
+    label="Radio with description example"
+    name="radio-7"
+    description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP."
+  />
+);

package/src/components/Radio/examples/RadioWithDescriptionAndBody.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Radio } from '@patternfly/react-core';
+
+export const RadioWithDescriptionAndBody: React.FunctionComponent = () => (
+  <Radio
+    id="radio-description-body"
+    label="Radio with description and body"
+    description="Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP."
+    body="This is where custom content goes."
+    name="radio-8"
+  />
+);

package/src/components/Spinner/examples/Spinner.md

@@ -7,31 +7,13 @@ propComponents: ['Spinner']
 
 ## Examples
 ### Basic
-```js
-import React from 'react';
-import { Spinner } from '@patternfly/react-core';
-
-<Spinner isSVG aria-label="Contents of the basic example"/>
+```ts file="./SpinnerBasic.tsx"
 ```
 
 ### Size variations
-```js
-import React from 'react';
-import { Spinner } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Spinner isSVG size="sm" aria-label="Contents of the small example"/>
-  <Spinner isSVG size="md" aria-label="Contents of the medium example"/>
-  <Spinner isSVG size="lg" aria-label="Contents of the large example"/>
-  <Spinner isSVG size="xl" aria-label="Contents of the extra large example"/>
-</React.Fragment>
+```ts file="./SpinnerSizeVariations.tsx"
 ```
 
 ### Custom size
-```js
-import React from 'react';
-import { Spinner } from '@patternfly/react-core';
-
-<Spinner isSVG diameter="80px" aria-label="Contents of the custom size example"/>
+```ts file="./SpinnerCustomSize.tsx"
 ```
-

package/src/components/Spinner/examples/SpinnerBasic.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Spinner } from '@patternfly/react-core';
+
+export const SpinnerBasic: React.FunctionComponent = () => <Spinner isSVG aria-label="Contents of the basic example" />;

package/src/components/Spinner/examples/SpinnerCustomSize.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Spinner } from '@patternfly/react-core';
+
+export const SpinnerCustomSize: React.FunctionComponent = () => (
+  <Spinner isSVG diameter="80px" aria-label="Contents of the custom size example" />
+);

package/src/components/Spinner/examples/SpinnerSizeVariations.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Spinner } from '@patternfly/react-core';
+
+export const SpinnerSizeVariations: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Spinner isSVG size="sm" aria-label="Contents of the small example" />
+    <Spinner isSVG size="md" aria-label="Contents of the medium example" />
+    <Spinner isSVG size="lg" aria-label="Contents of the large example" />
+    <Spinner isSVG size="xl" aria-label="Contents of the extra large example" />
+  </React.Fragment>
+);