-
Notifications
You must be signed in to change notification settings - Fork 1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6202 from gucal/new-component-buttongroup
New component ButtonGroup
- Loading branch information
Showing
55 changed files
with
3,779 additions
and
4,964 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import * as React from 'react'; | ||
| import { PrimeReactContext } from '../api/Api'; | ||
| import { useHandleStyle } from '../componentbase/Componentbase'; | ||
| import { useMergeProps } from '../hooks/Hooks'; | ||
| import { classNames } from '../utils/Utils'; | ||
| import { ButtonGroupBase } from './ButtonGroupBase'; | ||
|
|
||
| export const ButtonGroup = React.memo( | ||
| React.forwardRef((inProps) => { | ||
| const mergeProps = useMergeProps(); | ||
| const context = React.useContext(PrimeReactContext); | ||
| const props = ButtonGroupBase.getProps(inProps, context); | ||
| const { ptm, cx, isUnstyled } = ButtonGroupBase.setMetaData({ | ||
| props | ||
| }); | ||
|
|
||
| useHandleStyle(ButtonGroupBase.css.styles, isUnstyled, { name: 'buttongroup' }); | ||
|
|
||
| const rootProps = mergeProps( | ||
| { | ||
| className: classNames(cx('root')), | ||
| role: 'group' | ||
| }, | ||
| ButtonGroupBase.getOtherProps(props), | ||
| ptm('root') | ||
| ); | ||
|
|
||
| return <span {...rootProps}>{props.children}</span>; | ||
| }) | ||
| ); | ||
|
|
||
| ButtonGroup.displayName = 'ButtonGroup'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { ComponentBase } from '../componentbase/ComponentBase'; | ||
|
|
||
| const classes = { | ||
| root: 'p-button-group p-component' | ||
| }; | ||
|
|
||
| export const ButtonGroupBase = ComponentBase.extend({ | ||
| defaultProps: { | ||
| __TYPE: 'ButtonGroup', | ||
| children: undefined | ||
| }, | ||
| css: { | ||
| classes | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| /** | ||
| * | ||
| * A set of Buttons can be displayed together using the ButtonGroup component. | ||
| * | ||
| * [Live Demo](https://www.primereact.org/button/) | ||
| * | ||
| * @module buttongroup | ||
| * | ||
| */ | ||
| import * as React from 'react'; | ||
| import { ComponentHooks } from '../componentbase/componentbase'; | ||
| import { PassThroughOptions } from '../passthrough'; | ||
|
|
||
| export declare type ButtonGroupPassThroughOptionType = ButtonGroupPassThroughAttributes | ((options: ButtonGroupPassThroughMethodOptions) => ButtonGroupPassThroughAttributes | string) | string | null | undefined; | ||
|
|
||
| /** | ||
| * Custom passthrough(pt) option method. | ||
| */ | ||
| export interface ButtonGroupPassThroughMethodOptions { | ||
| /** | ||
| * Defines valid properties. | ||
| */ | ||
| props: ButtonGroupProps; | ||
| /** | ||
| * Defines passthrough(pt) options in global config. | ||
| */ | ||
| global: object | undefined; | ||
| } | ||
|
|
||
| /** | ||
| * Custom passthrough(pt) options. | ||
| * @see {@link ButtonGroupProps.pt} | ||
| */ | ||
| export interface ButtonGroupPassThroughOptions { | ||
| /** | ||
| * Used to pass attributes to the root's DOM element. | ||
| */ | ||
| root?: ButtonGroupPassThroughOptionType; | ||
| /** | ||
| * Used to manage all lifecycle hooks. | ||
| * @see {@link ComponentHooks} | ||
| */ | ||
| hooks?: ComponentHooks; | ||
| } | ||
|
|
||
| /** | ||
| * Custom passthrough attributes for each DOM elements | ||
| */ | ||
| export interface ButtonGroupPassThroughAttributes { | ||
| [key: string]: any; | ||
| } | ||
|
|
||
| /** | ||
| * Defines valid properties in ButtonGroup component. | ||
| */ | ||
| export interface ButtonGroupProps { | ||
| /** | ||
| * Used to pass attributes to DOM elements inside the component. | ||
| * @type {ButtonGroupPassThroughOptions} | ||
| */ | ||
| pt?: ButtonGroupPassThroughOptions; | ||
| /** | ||
| * Used to configure passthrough(pt) options of the component. | ||
| * @type {PassThroughOptions} | ||
| */ | ||
| ptOptions?: PassThroughOptions; | ||
| /** | ||
| * When enabled, it removes component related styles in the core. | ||
| * @defaultValue false | ||
| */ | ||
| unstyled?: boolean; | ||
| } | ||
|
|
||
| /** | ||
| * **PrimeReact - ButtonGroup** | ||
| * | ||
| * _ButtonGroup appears on top of the input field when focused._ | ||
| * | ||
| * [Live Demo](https://www.primereact.org/button/) | ||
| * --- --- | ||
| *  | ||
| * | ||
| * @group Component | ||
| * | ||
| */ | ||
| export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps>; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "main": "./buttongroup.cjs.js", | ||
| "module": "./buttongroup.esm.js", | ||
| "unpkg": "./buttongroup.min.js", | ||
| "types": "./buttongroup.d.ts", | ||
| "sideEffects": false | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.