const DataListToggle = ({
className,
isExpanded,
'aria-controls': ariaControls,
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
rowid,
id,
...props
}) => (
<div className={css(styles.dataListItemControl, className)} {...props}>
<div className={css(styles.dataListToggle)}>
<Button
id={id}
variant={ButtonVariant.plain}
aria-controls={ariaControls !== '' && ariaControls}
aria-label={ariaLabel}
aria-labelledby={ariaLabel !== 'Details' ? null : `${rowid} ${id}`}
aria-expanded={isExpanded}
>
<AngleRightIcon />
</Button>
</div>
</div>
);
const Login = ({ className, children, footer, header, ...props }) => (
<div {...props} className={css(styles.login, className)}>
<div className={css(styles.loginContainer)}>
{header}
<main className={css(styles.loginMain)}>{children}</main>
{footer}
</div>
</div>
);
render() {
const { id, title, children, className, ...props } = this.props;
return (
<section className={css(styles.navSection, className)} aria-labelledby={this.id} {...props}>
<h2 className={css(styles.navSectionTitle)} id={this.id}>
{title}
</h2>
<ul className={css(styles.navSimpleList)}>{children}</ul>
</section>
);
}
const PageSidebar = ({ className, nav, isNavOpen, ...props }) => (
<div
id="page-sidebar"
className={css(
styles.pageSidebar,
isNavOpen && styles.modifiers.expanded,
!isNavOpen && styles.modifiers.collapsed,
className
)}
{...props}
>
<div className={css(styles.pageSidebarBody)}>{nav}</div>
</div>
);
const Section = ({ children, className, description, headingLevel, name, preface, title, size, ...props }) => (
<section className={css('ws-section', className)}>
{Boolean(title || description) && (
<header className={css('ws-header')}>
{Boolean(title) && (
<AutoLinkHeader size={size} is={headingLevel}>{title}</AutoLinkHeader>
)}
{Boolean(preface) && <p className={css('ws-preface')}>{preface}</p>}
{Boolean(description) && <p>{description}</p>}
</header>
)}
{children}
</section>
);
render() {
const { 'aria-label': ariaLabel, children, className, ...props } = this.props;
return (
<NavContext.Provider
value={{
onSelect: (event, groupId, itemId, to, preventDefault, onClick) =>
this.onSelect(event, groupId, itemId, to, preventDefault, onClick),
onToggle: (event, groupId, expanded) => this.onToggle(event, groupId, expanded)
}}
>
<nav
className={css(styles.nav, className)}
aria-label={
ariaLabel === ''
? typeof this.props.children.props !== 'undefined' && this.props.children.props.variant === 'tertiary'
? 'Local'
: 'Global'
: ariaLabel
}
{...props}
>
{children}
</nav>
</NavContext.Provider>
);
}
const LoginMainFooter = ({
children,
socialMediaLoginContent,
signUpForAccountMessage,
forgotCredentials,
className,
...props
}) => (
<div className={css(styles.loginMainFooter, className)} {...props}>
{children}
{socialMediaLoginContent && <ul className={css(styles.loginMainFooterLinks)}>{socialMediaLoginContent}</ul>}
{(signUpForAccountMessage || forgotCredentials) && (
<div className={css(styles.loginMainFooterBand)}>
{signUpForAccountMessage}
{forgotCredentials}
</div>
)}
</div>
);
const BreadcrumbItem = ({ className, children, to, isActive, target, component: Component, ...props }) => (
<li {...props} className={css(styles.breadcrumbItem, className)}>
{to && (
<Component
href={to}
target={target}
className={css(styles.breadcrumbLink, getModifier(styles, isActive && 'current'))}
aria-current={isActive ? 'page' : undefined}
>
{children}
</Component>
)}
{!to && <React.Fragment>{children}</React.Fragment>}
{!isActive && (
<span className={css(styles.breadcrumbItemDivider)}>
<AngleRightIcon />
</span>
)}
</li>
);
const DataListContent = ({
className,
children,
id,
isHidden,
'aria-label': ariaLabel,
noPadding,
rowid,
...props
}) => (
<section
id={id}
className={css(styles.dataListExpandableContent, className)}
hidden={isHidden}
aria-label={ariaLabel}
{...props}
>
<div className={css(styles.dataListExpandableContentBody, noPadding && styles.modifiers.noPadding)}>{children}</div>
</section>
);
render() {
const { id, activeKey, 'aria-label': ariaLabel, child, children, className, eventKey, innerRef, ...props } = this.props;
if (children || child) {
return <section
ref={ innerRef }
index={ eventKey }
hidden={ children ? null : child.props.eventKey !== activeKey }
className={ children ? css('pf-c-tab-content', className) : css('pf-c-tab-content', child.props.className) }
id={ children ? id : `pf-tab-section-${child.props.eventKey}-${id}` }
aria-label={ ariaLabel }
aria-labelledby={ ariaLabel ? null : children ? `pf-tab-${eventKey}-${id}` : `pf-tab-${child.props.eventKey}-${id}` }
role="tabpanel"
tabIndex="0"
{...props}
>
{children ? children : child.props.children}
</section>;
} else {
return null;
}
}
const FormHelperText = ({ className, isError, isHidden, children, ...props }) => (
<p
className={css(
styles.formHelperText,
getModifier(styles, isError && 'error'),
getModifier(styles, isHidden && 'hidden'),
className
)}
{...props}
>
{children}
</p>
);
export default (actions, actionResolver, areActionsDisabled) => (
label,
{
rowData,
column,
rowIndex,
columnIndex,
column: {
extraParams: { dropdownPosition, dropdownDirection }
},
property
}
) => {
const extraData = {
rowIndex,
columnIndex,
column,
property
};
const resolvedActions = resolveOrDefault(actionResolver, actions, rowData, extraData);
const resolvedIsDisabled = resolveOrDefault(
areActionsDisabled,
rowData && rowData.disableActions,
rowData,
extraData
);
const renderProps =
resolvedActions && resolvedActions.length > 0
? {
children: (
<ActionsColumn
items={resolvedActions}
dropdownPosition={dropdownPosition}
dropdownDirection={dropdownDirection}
isDisabled={resolvedIsDisabled}
rowData={rowData}
extraData={extraData}
>
{label}
</ActionsColumn>
)
}
: {};
return {
className: css(styles.tableAction),
isVisible: true,
...renderProps
};
};
const NavList = ({ variant, children, className, ...props }) => {
const variantStyle = {
[NavVariants.default]: styles.navList,
[NavVariants.simple]: styles.navSimpleList,
[NavVariants.horizontal]: styles.navHorizontalList,
[NavVariants.tertiary]: styles.navTertiaryList
};
return (
<ul className={css(variantStyle[variant], className)} {...props}>
{children}
</ul>
);
};
render() {
const { children, className, value, isValid, isDisabled, ...props } = this.props;
return (
<select
{...props}
className={css(styles.formControl, className)}
aria-invalid={!isValid}
onChange={this.handleChange}
disabled={isDisabled}
value={value}
>
{children}
</select>
);
}
export default (label, { rowIndex, columnIndex, rowData, column, property }) => {
const {
extraParams: { onSelect, allRowsSelected, rowLabeledBy = 'simple-node' }
} = column;
const extraData = {
rowIndex,
columnIndex,
column,
property
};
if (rowData && rowData.hasOwnProperty('parent') && !rowData.showSelect) {
return {
component: 'td',
isVisible: true,
scope: ''
};
}
const rowId = rowIndex !== undefined ? rowIndex : -1;
function selectClick(event) {
const selected = rowIndex === undefined ? event.target.checked : rowData && !rowData.selected;
onSelect && onSelect(event, selected, rowId, rowData, extraData);
}
const customProps = {
...(rowId !== -1
? {
checked: rowData && !!rowData.selected,
'aria-labelledby': rowLabeledBy + rowIndex
}
: {
checked: allRowsSelected,
'aria-label': 'Select all rows'
})
};
return {
className: css(styles.tableCheck),
component: 'td',
scope: '',
isVisible: true,
children: (
<SelectColumn {...customProps} onSelect={selectClick} name={rowId !== -1 ? `checkrow${rowIndex}` : 'check-all'}>
{label}
</SelectColumn>
)
};
};
render() {
const {
id,
className,
size,
value,
title,
label,
variant,
measureLocation,
min,
max,
valueText,
...props
} = this.props;
const additionalProps = {
...props,
...(valueText ? { 'aria-valuetext': valueText } : { 'aria-describedby': `${this.id}-description` })
};
const scaledValue = Math.min(100, Math.max(0, Math.floor(((value - min) / (max - min)) * 100)));
return (
<div
{...additionalProps}
className={css(
styles.progress,
getModifier(styles, variant, ''),
getModifier(styles, measureLocation, ''),
getModifier(styles, measureLocation === ProgressMeasureLocation.inside ? ProgressSize.lg : size, ''),
!title && getModifier(styles, 'singleline', ''),
className
)}
id={this.id}
role="progressbar"
aria-valuemin={min}
aria-valuenow={scaledValue}
aria-valuemax={max}
>
<ProgressContainer
parentId={this.id}
value={scaledValue}
title={title}
label={label}
variant={variant}
measureLocation={measureLocation}
/>
</div>
);
}
const CollapseColumn = ({ children, onToggle, isOpen, className, ...props }) => (
<React.Fragment>
{isOpen !== undefined && (
<Button
className={css(className, isOpen && styles.modifiers.expanded)}
{...props}
variant="plain"
aria-label="Details"
onClick={onToggle}
aria-expanded={isOpen}
>
{isOpen ? <AngleDownIcon /> : <AngleRightIcon />}
</Button>
)}
{children}
</React.Fragment>
);
render() {
const {
trRef,
className,
onScroll,
onResize,
row: { isExpanded },
rowProps,
...props
} = this.props;
return (
<tr
{...props}
ref={trRef}
className={css(
className,
isExpanded !== undefined && styles.tableExpandableRow,
isExpanded && styles.modifiers.expanded
)}
hidden={isExpanded !== undefined && !isExpanded}
/>
);
}
const NavItemSeparator = ({ className, ...rest }) => (
<li className={css(styles.navSeparator, className)} role="separator" {...rest} />
);
export const TD = ({ children, align, className, ...props }) => (
<td {...props} className={css(className, 'cell', align && `${align}Align`)}>
{children}
</td>
);
export const TH = ({ children, align }) => (
<th className={css('cell', align && `${align}Align`)}>{children}</th>
);
const LoginMainBody = ({ children, className, ...props }) => (
<div className={css(styles.loginMainBody, className)} {...props}>
{children}
</div>
);
render() {
const {
heading,
description,
children,
fullPageOnly,
minHeight
} = this.props;
const output = { __html: this.props.children };
const sourceOutput =
typeof children === 'string' ? children : ReactDOMServer.renderToStaticMarkup(children).replace(/ "/g, '"');
const indentedOutput = pretty(sourceOutput, { ocd: true });
const makeDescription = html => ({
__html: html
});
const editor = (
<pre className="GeneratedSource__pre">
<PrismCode className="language-html">{indentedOutput}</PrismCode>
</pre>
);
const endsWithSlash = typeof window !== 'undefined' && window.location.href.substr(-1) === '/';
const fullPath = typeof window !== 'undefined' && `${window.location.href.substr(0, window.location.href.length - (endsWithSlash ? 1 : 0))}-full?component=${heading}`;
if (!this.state.isFull) {
return (
<div className="ws-live-demo">
<AutoLinkHeader size="lg" is="h4" className="ws-example-heading">{heading}</AutoLinkHeader>
{Boolean(description) && <p className="pf-c-content" dangerouslySetInnerHTML={makeDescription(description)} />}
<Preview heading={heading} viewport={this.state.viewport} lights={this.state.lights} fullPageOnly={fullPageOnly} minHeight={minHeight}>
{children}
</Preview>
<ComponentItems children={children} className={css('example')} />
<EditorToolbar editor={editor} raw={indentedOutput} live={false} showMessage={false} fullPath={fullPath} showLights={!fullPageOnly} onLightsChange={this.onLightsChange}/>
{/* <LiveDemo raw={indentedOutput.trim()} live={false} editorLanguage="html" /> */}
</div>
);
// return (
// <TheExample live={false} title={heading} description={description} raw={indentedOutput} editorLanguage="html"
// editorClassName="GeneratedSource__pre language-html" showPreviewOptions coreExample={children}
// previewFullPageOnly={fullPageOnly} previewMinHeight={minHeight}>
// {children}
// {/* <div className={`Example ${className}`}>
// <div className="Example__section">
// <Preview isViewport={isViewport} heading={heading} fullPageOnly={fullPageOnly} minHeight={minHeight}>
// {children}
// </Preview>
// </div>
// <div className="Example__section">
// {navigationItems && (
// <div className="Example__componentLink">
// Components and Layouts used: <ul>{navigationItems}</ul>
// </div>
// )}
// </div>
// {htmlDocs && (
// <div className="Example__documentation">
// <p className="Example__documentation--text" dangerouslySetInnerHTML={htmlDocs} />
// </div>
// )}
// </div> */}
// </TheExample>
// );
} else if (this.state.showComponent) {
return <div dangerouslySetInnerHTML={output} />;
}
return null;
}
const Navigation = ({
page,
lastPage,
pagesTitle,
toLastPage,
toNextPage,
toFirstPage,
toPreviousPage,
currPage,
paginationTitle,
onSetPage,
onNextClick,
onPreviousClick,
onFirstClick,
onLastClick,
onPageInput,
className,
...props
}) => {
return (
<nav className={css(styles.paginationNav, className)} aria-label={paginationTitle} {...props}>
<Button
variant={ButtonVariant.plain}
isDisabled={page === 1}
aria-label={toFirstPage}
data-action="first"
onClick={(event) => {
onFirstClick(event, 1);
onSetPage(event, 1)
}}
>
<AngleDoubleLeftIcon />
</Button>
<Button
variant={ButtonVariant.plain}
isDisabled={page === 1}
data-action="previous"
onClick={(event) => {
const newPage = page - 1 >= 1 ? page - 1 : 1
onPreviousClick(event, newPage);
onSetPage(event, newPage);
}}
aria-label={toPreviousPage}
>
<AngleLeftIcon />
</Button>
<div className={css(styles.paginationNavPageSelect)}>
<input
className={css(styles.formControl)}
aria-label={currPage}
type="number"
min="1"
max={lastPage}
value={page}
onChange={(event) => {
let inputPage = Number.parseInt(event.target.value);
inputPage = isNaN(inputPage) ? page : inputPage;
inputPage = inputPage > lastPage ? lastPage : inputPage;
inputPage = inputPage < 1 ? 1 : inputPage;
onSetPage(event, isNaN(inputPage) ? page : inputPage);
onPageInput(event, isNaN(inputPage) ? page : inputPage);
}}
/>
<span aria-hidden="true">of {lastPage} {pagesTitle}</span>
</div>
<Button
variant={ButtonVariant.plain}
isDisabled={page === lastPage}
aria-label={toNextPage}
data-action="next"
onClick={(event) => {
const newPage = page + 1 <= lastPage ? page + 1 : lastPage
onNextClick(event, newPage);
onSetPage(event, newPage);
}}
>
<AngleRightIcon />
</Button>
<Button
variant={ButtonVariant.plain}
isDisabled={page === lastPage}
aria-label={toLastPage}
data-action="last"
onClick={(event) => {
onLastClick(event, lastPage);
onSetPage(event, lastPage);
}}
>
<AngleDoubleRightIcon />
</Button>
</nav>
)
};
const ExpandableRowContent = ({ children, ...props }) => (
<div {...props} className={css(styles.tableExpandableRowContent)}>
{children}
</div>
);
export const Row = ({ children }) => <tr className={css('row')}>{children}</tr>;
export const Table = ({ children }) => <table className={css('ws-table')}>{children}</table>;
render() {
const { isDropdownOpen, isHelpDropdownOpen, activeItem, isAboutModalOpen } = this.state;
var style = {
textAlign: 'center',
};
const navItems = Object.keys(this.props.instanceTypes)
.map((key, i )=> {
return <NavItem to={"#nav-link"+i} key={i} itemId={i} isActive={activeItem === i}>
<div style={style}>{this.props.instanceTypes[key]}<br/>{this.convertCamelCaseToTitle(key)}</div>
</NavItem>
});
const PageNav = (
<Nav onSelect={this.onNavSelect} aria-label="Nav">
<NavList variant={NavVariants.horizontal}>
{navItems}
</NavList>
</Nav>
);
const helpDropdownItems = [
<DropdownItem id="dd-menuitem-about" key="About" onClick={this.handleAboutModalToggle}>About</DropdownItem>
];
const userDropdownItems = [
<DropdownItem id="dd-menuitem-logout" key={"logout"} href="oauth/sign_in">Logout</DropdownItem>
];
const PageToolbar = (
<Toolbar>
<ToolbarGroup>
<ToolbarItem className={css(accessibleStyles.hiddenOnLg, spacingStyles.mr_0)}>
<Dropdown
id="dd-settings"
isPlain
position="right"
onSelect={this.onDropdownSelect}
toggle={<DropdownToggle onToggle={this.onHelpDropdownToggle}><CogIcon/></DropdownToggle>}
isOpen={isHelpDropdownOpen}
dropdownItems={helpDropdownItems}
/>
</ToolbarItem>
<ToolbarItem className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnMd)}>
<Dropdown
id="dd-user"
isPlain
position="right"
onSelect={this.onDropdownSelect}
isOpen={isDropdownOpen}
toggle={<DropdownToggle onToggle={this.onDropdownToggle}>{this.props.user}</DropdownToggle>}
dropdownItems={userDropdownItems}
/>
</ToolbarItem>
</ToolbarGroup>
</Toolbar>
);
const Header = (
<PageHeader
logo={<Brand src={brandImg} alt="Console Logo" />}
toolbar={PageToolbar}
avatar={<Avatar src={avatarImg} alt="Avatar image" />}
// topNav={PageNav}
/>
);
return (
<Aux>
<Page header={Header} >
{/*<PageSection variant={PageSectionVariants.darker} className='navSection'>{PageNav}</PageSection>*/}
<PageSection variant={PageSectionVariants.light}>
<About handleAboutModalToggle={this.handleAboutModalToggle} isAboutModalOpen={isAboutModalOpen}/>
<TextContent>
{this.props.children}
</TextContent>
</PageSection>
</Page>
</Aux>
);
}
export default width => () => ({
className: css(getModifier(styles, `width-${width}`))
});
const DropdownToggle = ({ children, iconComponent: IconComponent, ...props }) => (
<Toggle {...props}>
<span className={IconComponent && css(styles.dropdownToggleText)}>{children}</span>
{IconComponent && <IconComponent className={css(styles.dropdownToggleIcon)} />}
</Toggle>
);