From 635aeedc9fd7f442a88787d6526863d20eed5f3b Mon Sep 17 00:00:00 2001 From: Melloware Date: Fri, 26 Aug 2022 13:34:57 -0400 Subject: [PATCH] Fix #3193: Button/SplitButton visible property (#3194) --- api-generator/components/button.js | 12 ++++++++++++ api-generator/components/splitbutton.js | 6 ++++++ components/doc/button/index.js | 18 +++++++++++++++--- components/doc/splitbutton/index.js | 12 +++++++++--- components/lib/button/Button.js | 4 ++++ components/lib/button/button.d.ts | 1 + components/lib/splitbutton/SplitButton.js | 4 ++++ components/lib/splitbutton/splitbutton.d.ts | 3 ++- pages/button/index.js | 4 ++-- 9 files changed, 55 insertions(+), 9 deletions(-) diff --git a/api-generator/components/button.js b/api-generator/components/button.js index 7e08c7ed26..765e83fb67 100644 --- 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 index 0dc64098dc..3532d5fe32 100644 --- 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 index 1106d61b91..883644c5d6 100644 --- 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'; null Configuration of the tooltip, refer to the tooltip documentation for more information. + + disabled + boolean + false + When present, it specifies that the element should be disabled. + + + visible + boolean + true + When present, it specifies that the element should be visible. + loading boolean diff --git a/components/doc/splitbutton/index.js b/components/doc/splitbutton/index.js index 177c460fc8..aab3b5021a 100644 --- 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 = () => { false When present, it specifies that the component should be disabled. + + visible + boolean + true + When present, it specifies that the element should be visible. + style string diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js index c12ef1a224..6823b709b8 100644 --- 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 index 5586aff043..de3b427180 100644 --- a/components/lib/button/button.d.ts +++ b/components/lib/button/button.d.ts @@ -13,6 +13,7 @@ export interface ButtonProps extends Omit; children?: React.ReactNode; diff --git a/components/lib/splitbutton/SplitButton.js b/components/lib/splitbutton/SplitButton.js index 61e5254eab..46cb8f4d26 100644 --- 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 index fba6d74c05..17c786806f 100644 --- 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; model?: MenuItem[]; disabled?: boolean; + visible?: boolean; buttonClassName?: string; menuStyle?: object; menuClassName?: string; diff --git a/pages/button/index.js b/pages/button/index.js index 019f5b4674..f5fab10e91 100644 --- 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);