Fix #3193: Button/SplitButton visible property (#3194)

primefaces · Aug 26, 2022 · 635aeed · 635aeed
1 parent e35ef62
commit 635aeed
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 9 deletions.
diff --git a/api-generator/components/button.js b/api-generator/components/button.js
@@ -41,6 +41,18 @@ const ButtonProps = [
         default: 'null',
         description: 'Configuration of the tooltip, refer to the tooltip documentation for more information.'
     },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the element should be disabled.'
+    },
+    {
+        name: 'visible',
+        type: 'boolean',
+        default: 'true',
+        description: 'When present, it specifies that the element should be visible.'
+    },
     {
         name: 'loading',
         type: 'boolean',

diff --git a/api-generator/components/splitbutton.js b/api-generator/components/splitbutton.js
@@ -41,6 +41,12 @@ const SplitButtonProps = [
         default: 'false',
         description: 'When present, it specifies that the component should be disabled.'
     },
+    {
+        name: 'visible',
+        type: 'boolean',
+        default: 'true',
+        description: 'When present, it specifies that the element should be visible.'
+    },
     {
         name: 'style',
         type: 'string',

diff --git a/components/doc/button/index.js b/components/doc/button/index.js
@@ -1,9 +1,9 @@
-import React, { memo } from 'react';
 import Link from 'next/link';
-import { TabView, TabPanel } from '../../lib/tabview/TabView';
-import { useLiveEditorTabs } from '../common/liveeditor';
+import React, { memo } from 'react';
+import { TabPanel, TabView } from '../../lib/tabview/TabView';
 import { CodeHighlight } from '../common/codehighlight';
 import { DevelopmentSection } from '../common/developmentsection';
+import { useLiveEditorTabs } from '../common/liveeditor';
 
 const ButtonDoc = memo(() => {
     const sources = {
@@ -1091,6 +1091,18 @@ import { Button } from 'primereact/button';
                                     <td>null</td>
                                     <td>Configuration of the tooltip, refer to the tooltip documentation for more information.</td>
                                 </tr>
+                                <tr>
+                                    <td>disabled</td>
+                                    <td>boolean</td>
+                                    <td>false</td>
+                                    <td>When present, it specifies that the element should be disabled.</td>
+                                </tr>
+                                <tr>
+                                    <td>visible</td>
+                                    <td>boolean</td>
+                                    <td>true</td>
+                                    <td>When present, it specifies that the element should be visible.</td>
+                                </tr>
                                 <tr>
                                     <td>loading</td>
                                     <td>boolean</td>

diff --git a/components/doc/splitbutton/index.js b/components/doc/splitbutton/index.js
@@ -1,9 +1,9 @@
-import React, { memo } from 'react';
 import Link from 'next/link';
-import { TabView, TabPanel } from '../../lib/tabview/TabView';
-import { useLiveEditorTabs } from '../common/liveeditor';
+import React, { memo } from 'react';
+import { TabPanel, TabView } from '../../lib/tabview/TabView';
 import { CodeHighlight } from '../common/codehighlight';
 import { DevelopmentSection } from '../common/developmentsection';
+import { useLiveEditorTabs } from '../common/liveeditor';
 
 const SplitButtonDoc = memo(() => {
     const sources = {
@@ -637,6 +637,12 @@ export const SplitButtonDemo = () => {
                                     <td>false</td>
                                     <td>When present, it specifies that the component should be disabled.</td>
                                 </tr>
+                                <tr>
+                                    <td>visible</td>
+                                    <td>boolean</td>
+                                    <td>true</td>
+                                    <td>When present, it specifies that the element should be visible.</td>
+                                </tr>
                                 <tr>
                                     <td>style</td>
                                     <td>string</td>

diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js
@@ -11,6 +11,10 @@ export const Button = React.memo(
             ObjectUtils.combinedRefs(elementRef, ref);
         }, [elementRef, ref]);
 
+        if (props.visible === false) {
+            return null;
+        }
+
         const createIcon = () => {
             const icon = props.loading ? props.loadingIcon : props.icon;
             const className = classNames('p-button-icon p-c', {

diff --git a/components/lib/button/button.d.ts b/components/lib/button/button.d.ts
@@ -13,6 +13,7 @@ export interface ButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHT
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
     disabled?: boolean;
+    visible?: boolean;
     loading?: boolean;
     loadingIcon?: IconType<ButtonProps>;
     children?: React.ReactNode;

diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js
@@ -100,6 +100,10 @@ export const SplitButton = React.memo(
             return null;
         };
 
+        if (props.visible === false) {
+            return null;
+        }
+
         const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const otherProps = ObjectUtils.findDiffKeys(props, SplitButton.defaultProps);
         const className = classNames('p-splitbutton p-component', props.className, { 'p-disabled': props.disabled });

diff --git a/components/lib/splitbutton/splitbutton.d.ts b/components/lib/splitbutton/splitbutton.d.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
+import { CSSTransitionProps } from '../csstransition';
 import { MenuItem } from '../menuitem';
 import TooltipOptions from '../tooltip/tooltipoptions';
-import { CSSTransitionProps } from '../csstransition';
 import { IconType, TemplateType } from '../utils';
 
 type SplitButtonAppendToType = 'self' | HTMLElement | undefined | null;
@@ -13,6 +13,7 @@ export interface SplitButtonProps extends Omit<React.DetailedHTMLProps<React.HTM
     loadingIcon?: IconType<SplitButtonProps>;
     model?: MenuItem[];
     disabled?: boolean;
+    visible?: boolean;
     buttonClassName?: string;
     menuStyle?: object;
     menuClassName?: string;

diff --git a/pages/button/index.js b/pages/button/index.js
@@ -1,8 +1,8 @@
+import Head from 'next/head';
 import React, { useState } from 'react';
-import { Button } from '../../components/lib/button/Button';
 import ButtonDoc from '../../components/doc/button';
 import { DocActions } from '../../components/doc/common/docactions';
-import Head from 'next/head';
+import { Button } from '../../components/lib/button/Button';
 
 const ButtonDemo = () => {
     const [loading1, setLoading1] = useState(false);