forked from opensearch-project/oui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add methods to control the appearence of trailing and last breadcumbs…
… in OuiSimplifiedBreadcrumbs Also: * Adjust alignments, colors, and separator in OuiSimplifiedBreadcrumbs * Add documentation for OuiSimplifiedBreadcrumbs * Add CSS breakpoints to OuiBreakpointSize Signed-off-by: Miki <[email protected]>
- Loading branch information
Showing
15 changed files
with
500 additions
and
136 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
148 changes: 148 additions & 0 deletions
148
src-docs/src/views/breadcrumbs/display_breadcrumbs_toggles.js
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,148 @@ | ||
| /* | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| * | ||
| * The OpenSearch Contributors require contributions made to | ||
| * this file be licensed under the Apache-2.0 license or a | ||
| * compatible open source license. | ||
| * | ||
| * Modifications Copyright OpenSearch Contributors. See | ||
| * GitHub history for details. | ||
| */ | ||
|
|
||
| import React, { cloneElement, useState, Fragment } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import { | ||
| OuiFlexGroup, | ||
| OuiSwitch, | ||
| OuiFlexItem, | ||
| OuiButtonEmpty, | ||
| OuiPopover, | ||
| OuiSpacer, | ||
| } from '../../../../src/components'; | ||
|
|
||
| export const DisplayBreadCrumbsToggles = ({ | ||
| canResponsive, | ||
| canTruncate, | ||
| canHideLastBreadCrumb, | ||
| canHideTrailingSeparator, | ||
| canDisableTrailingLink, | ||
| children, | ||
| spacerSize, | ||
| }) => { | ||
| const [responsive, setResponsive] = useState(false); | ||
| const [truncate, setTruncate] = useState(true); | ||
| const [hideLastBreadCrumb, setHideLastBreadCrumb] = useState(false); | ||
| const [hideTrailingSeparator, setHideTrailingSeparator] = useState(false); | ||
| const [disableTrailingLink, setDisableTrailingLink] = useState(false); | ||
| const [isPopoverOpen, setIsPopoverOpen] = useState(false); | ||
|
|
||
| const canProps = {}; | ||
| if (canResponsive) canProps.responsive = responsive; | ||
| if (canTruncate) canProps.truncate = truncate; | ||
| if (canHideLastBreadCrumb) canProps.hideLastBreadCrumb = hideLastBreadCrumb; | ||
| if (canHideTrailingSeparator) | ||
| canProps.hideTrailingSeparator = hideTrailingSeparator; | ||
| if (canDisableTrailingLink) | ||
| canProps.disableTrailingLink = disableTrailingLink; | ||
|
|
||
| return ( | ||
| <Fragment> | ||
| {cloneElement(children, canProps)} | ||
| <OuiSpacer size={spacerSize} /> | ||
| <OuiPopover | ||
| panelPaddingSize="s" | ||
| isOpen={isPopoverOpen} | ||
| closePopover={() => { | ||
| setIsPopoverOpen(false); | ||
| }} | ||
| button={ | ||
| <OuiButtonEmpty | ||
| iconType="controlsHorizontal" | ||
| size="xs" | ||
| onClick={() => { | ||
| setIsPopoverOpen(!isPopoverOpen); | ||
| }}> | ||
| Display toggles | ||
| </OuiButtonEmpty> | ||
| }> | ||
| <div> | ||
| <OuiFlexGroup | ||
| wrap={true} | ||
| direction="column" | ||
| gutterSize="s" | ||
| responsive={false}> | ||
| {canResponsive && ( | ||
| <OuiFlexItem grow={false}> | ||
| <OuiSwitch | ||
| compressed | ||
| label="responsive" | ||
| checked={responsive} | ||
| onChange={(e) => setResponsive(e.target.checked)} | ||
| /> | ||
| </OuiFlexItem> | ||
| )} | ||
| {canTruncate && ( | ||
| <OuiFlexItem grow={false}> | ||
| <OuiSwitch | ||
| compressed | ||
| label="truncate" | ||
| checked={truncate} | ||
| onChange={(e) => setTruncate(e.target.checked)} | ||
| /> | ||
| </OuiFlexItem> | ||
| )} | ||
| {canHideLastBreadCrumb && ( | ||
| <OuiFlexItem grow={false}> | ||
| <OuiSwitch | ||
| compressed | ||
| label="hideLastBreadCrumb" | ||
| checked={hideLastBreadCrumb} | ||
| onChange={(e) => setHideLastBreadCrumb(e.target.checked)} | ||
| /> | ||
| </OuiFlexItem> | ||
| )} | ||
| {canHideTrailingSeparator && ( | ||
| <OuiFlexItem grow={false}> | ||
| <OuiSwitch | ||
| compressed | ||
| label="hideTrailingSeparator" | ||
| checked={hideTrailingSeparator} | ||
| onChange={(e) => setHideTrailingSeparator(e.target.checked)} | ||
| /> | ||
| </OuiFlexItem> | ||
| )} | ||
| {canDisableTrailingLink && ( | ||
| <OuiFlexItem grow={false}> | ||
| <OuiSwitch | ||
| compressed | ||
| label="disableTrailingLink" | ||
| checked={disableTrailingLink} | ||
| onChange={(e) => setDisableTrailingLink(e.target.checked)} | ||
| /> | ||
| </OuiFlexItem> | ||
| )} | ||
| </OuiFlexGroup> | ||
| </div> | ||
| </OuiPopover> | ||
| </Fragment> | ||
| ); | ||
| }; | ||
|
|
||
| DisplayBreadCrumbsToggles.propTypes = { | ||
| canResponsive: PropTypes.bool, | ||
| canTruncate: PropTypes.bool, | ||
| canHideLastBreadCrumb: PropTypes.bool, | ||
| canHideTrailingSeparator: PropTypes.bool, | ||
| canDisableTrailingLink: PropTypes.bool, | ||
| spacerSize: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']), | ||
| }; | ||
|
|
||
| DisplayBreadCrumbsToggles.defaultProps = { | ||
| canResponsive: true, | ||
| canTruncate: true, | ||
| canHideLastBreadCrumb: false, | ||
| canHideTrailingSeparator: false, | ||
| canDisableTrailingLink: false, | ||
| spacerSize: 'l', | ||
| }; |
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,82 @@ | ||
| /* | ||
| * SPDX-License-Identifier: Apache-2.0 | ||
| * | ||
| * The OpenSearch Contributors require contributions made to | ||
| * this file be licensed under the Apache-2.0 license or a | ||
| * compatible open source license. | ||
| * | ||
| * Modifications Copyright OpenSearch Contributors. See | ||
| * GitHub history for details. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
|
|
||
| import { OuiSimplifiedBreadcrumbs } from '../../../../src/components'; | ||
|
|
||
| import { DisplayBreadCrumbsToggles } from './display_breadcrumbs_toggles'; | ||
|
|
||
| export default () => { | ||
| const breadcrumbs = [ | ||
| { | ||
| text: 'Universe', | ||
| href: '#', | ||
| }, | ||
| { | ||
| text: 'Observable Universe', | ||
| href: '#', | ||
| }, | ||
| { | ||
| text: 'Pisces–Cetus Supercluster Complex', | ||
| href: '#', | ||
| }, | ||
| { | ||
| text: 'Laniakea Supercluster', | ||
| href: '#', | ||
| }, | ||
| { | ||
| text: 'Virgo Cluster', | ||
| href: '#', | ||
| }, | ||
| { | ||
| text: 'Local Group', | ||
| href: '#', | ||
| }, | ||
| { | ||
| text: 'Local Bubble', | ||
| href: '#', | ||
| }, | ||
| { | ||
| text: 'Local Interstellar Cloud', | ||
| href: '#', | ||
| }, | ||
| { | ||
| text: 'Milky Way Galaxy', | ||
| href: '#', | ||
| }, | ||
| { | ||
| text: 'Orion Arm', | ||
| href: '#', | ||
| }, | ||
| { | ||
| text: 'Solar System', | ||
| href: '#', | ||
| }, | ||
| { | ||
| text: 'Geospace', | ||
| href: '#', | ||
| }, | ||
| { | ||
| text: 'Earth', | ||
| href: '#', | ||
| }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <DisplayBreadCrumbsToggles | ||
| canHideLastBreadCrumb | ||
| canHideTrailingSeparator | ||
| canDisableTrailingLink> | ||
| <OuiSimplifiedBreadcrumbs breadcrumbs={breadcrumbs} max={null} /> | ||
| </DisplayBreadCrumbsToggles> | ||
| ); | ||
| }; |
Oops, something went wrong.