Skip to content

Commit

Permalink
make hash to its own hook
Browse files Browse the repository at this point in the history
  • Loading branch information
@wusteven815
wusteven815 committed Apr 26, 2024
1 parent 78fe14d commit 177deca
Show file tree
Hide file tree
Showing 6 changed files with 199 additions and 204 deletions.
279 changes: 124 additions & 155 deletions packages/code-studio/src/styleguide/Buttons.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,27 @@
/* eslint-disable react/jsx-props-no-spreading */
import React, { Component, ReactElement } from 'react';
import React, { ReactElement, useState } from 'react';
import { Flex } from '@adobe/react-spectrum';
import { Button, ButtonOld, SocketedButton } from '@deephaven/components';
import { dhTruck } from '@deephaven/icons';
import { IsHashProp, sampleSectionIdAndClasses } from './utils';
import { sampleSectionIdAndClasses, useIsHash } from './utils';

function noOp(): void {
return undefined;
}

interface ButtonsState {
toggle: boolean;
}
class Buttons extends Component<IsHashProp, ButtonsState> {
static renderButtonBrand(type: string, brand: string): ReactElement {
function Buttons(): ReactElement {
const isHash = useIsHash();
const [toggle, setToggle] = useState(true);
const levelMap = {
primary: 'accent',
secondary: 'neutral',
success: 'positive',
info: 'info',
warning: 'notice',
danger: 'negative',
};

function renderButtonBrand(type: string, brand: string): ReactElement {
const className = type.length ? `btn-${type}-${brand}` : `btn-${brand}`;
return (
<ButtonOld
Expand All @@ -26,7 +34,7 @@ class Buttons extends Component<IsHashProp, ButtonsState> {
);
}

static renderButtons(type: string): ReactElement {
function renderButtons(type: string): ReactElement {
const brands = [
'primary',
'secondary',
Expand All @@ -37,7 +45,7 @@ class Buttons extends Component<IsHashProp, ButtonsState> {
// Once the colors are finalized, this should semantically go between
// success and warning
'info',
].map((brand: string) => Buttons.renderButtonBrand(type, brand));
].map((brand: string) => renderButtonBrand(type, brand));

return (
<div
Expand All @@ -52,158 +60,119 @@ class Buttons extends Component<IsHashProp, ButtonsState> {
);
}

static renderLinks(): ReactElement {
const levelMap = {
primary: 'accent',
secondary: 'neutral',
success: 'positive',
info: 'info',
warning: 'notice',
danger: 'negative',
};
const links = (
<div {...sampleSectionIdAndClasses('links')} style={{ paddingTop: '1rem' }}>
<h5>Links</h5>
<Flex gap="1rem">
{Object.entries(levelMap).map(([level, semantic]) => (
// eslint-disable-next-line jsx-a11y/anchor-is-valid
<a key={level} className={`text-${level}`}>
{level} ({semantic})
</a>
))}
</Flex>
</div>
);

return (
<div
{...sampleSectionIdAndClasses('links')}
style={{ paddingTop: '1rem' }}
const socketedButtons = (
<div {...sampleSectionIdAndClasses('buttons-socketed')}>
<h5>Socketed Buttons (for linker)</h5>
<SocketedButton
style={{ marginBottom: '1rem', marginRight: '1rem' }}
onClick={noOp}
>
<h5>Links</h5>
<Flex gap="1rem">
{Object.entries(levelMap).map(([level, semantic]) => (
// eslint-disable-next-line jsx-a11y/anchor-is-valid
<a key={level} className={`text-${level}`}>
{level} ({semantic})
</a>
))}
</Flex>
</div>
);
}

static renderSocketedButtons(): ReactElement {
return (
<div {...sampleSectionIdAndClasses('buttons-socketed')}>
<h5>Socketed Buttons (for linker)</h5>
<SocketedButton
style={{ marginBottom: '1rem', marginRight: '1rem' }}
onClick={noOp}
>
Unlinked
</SocketedButton>
<SocketedButton
style={{ marginBottom: '1rem', marginRight: '1rem' }}
isLinked
onClick={noOp}
>
Linked
</SocketedButton>
<SocketedButton
style={{ marginBottom: '1rem', marginRight: '1rem' }}
isLinkedSource
onClick={noOp}
>
Linked Source
</SocketedButton>
<SocketedButton
style={{ marginBottom: '1rem', marginRight: '1rem' }}
isLinked
isInvalid
onClick={noOp}
>
Error
</SocketedButton>
<SocketedButton
style={{ marginBottom: '1rem', marginRight: '1rem' }}
disabled
onClick={noOp}
>
Disabled
</SocketedButton>
</div>
);
}

constructor(props: IsHashProp) {
super(props);

this.state = {
toggle: true,
};
}

renderInlineButtons(): ReactElement {
const { toggle } = this.state;

return (
<div
{...sampleSectionIdAndClasses('buttons-inline')}
style={{ padding: '1rem 0' }}
Unlinked
</SocketedButton>
<SocketedButton
style={{ marginBottom: '1rem', marginRight: '1rem' }}
isLinked
onClick={noOp}
>
<h5>Inline Buttons</h5>
Regular btn-inline:
<Button
className="mx-2"
kind="inline"
icon={dhTruck}
tooltip="test"
onClick={noOp}
/>
Toggle button (class active):
<Button
className="mx-2"
onClick={() => {
this.setState({ toggle: !toggle });
}}
active={toggle}
kind="inline"
icon={dhTruck}
tooltip="test"
/>
Disabled:
<Button className="mx-2" kind="inline" disabled onClick={noOp}>
Disabled
</Button>
With Text:
<Button className="mx-2" kind="inline" icon={dhTruck} onClick={noOp}>
<span>Text Button</span>
</Button>
<br />
<br />
<span>btn-link-icon (no text):</span>
<Button kind="ghost" icon={dhTruck} tooltip="test" onClick={noOp} />
<span className="mx-2">btn-link:</span>
<Button kind="ghost" onClick={noOp}>
Text Button
</Button>
<span className="mx-2">btn-link (text w/ optional with icon):</span>
<Button kind="ghost" icon={dhTruck} onClick={noOp}>
Text Button
</Button>
</div>
);
}
Linked
</SocketedButton>
<SocketedButton
style={{ marginBottom: '1rem', marginRight: '1rem' }}
isLinkedSource
onClick={noOp}
>
Linked Source
</SocketedButton>
<SocketedButton
style={{ marginBottom: '1rem', marginRight: '1rem' }}
isLinked
isInvalid
onClick={noOp}
>
Error
</SocketedButton>
<SocketedButton
style={{ marginBottom: '1rem', marginRight: '1rem' }}
disabled
onClick={noOp}
>
Disabled
</SocketedButton>
</div>
);

render(): React.ReactNode {
const { isHash } = this.props;
const buttonsRegular = Buttons.renderButtons('');
const buttonsOutline = Buttons.renderButtons('outline');
const inlineButtons = this.renderInlineButtons();
const socketedButtons = Buttons.renderSocketedButtons();
const links = Buttons.renderLinks();
const inlineButtons = (
<div
{...sampleSectionIdAndClasses('buttons-inline')}
style={{ padding: '1rem 0' }}
>
<h5>Inline Buttons</h5>
Regular btn-inline:
<Button
className="mx-2"
kind="inline"
icon={dhTruck}
tooltip="test"
onClick={noOp}
/>
Toggle button (class active):
<Button
className="mx-2"
onClick={() => setToggle(!toggle)}
active={toggle}
kind="inline"
icon={dhTruck}
tooltip="test"
/>
Disabled:
<Button className="mx-2" kind="inline" disabled onClick={noOp}>
Disabled
</Button>
With Text:
<Button className="mx-2" kind="inline" icon={dhTruck} onClick={noOp}>
<span>Text Button</span>
</Button>
<br />
<br />
<span>btn-link-icon (no text):</span>
<Button kind="ghost" icon={dhTruck} tooltip="test" onClick={noOp} />
<span className="mx-2">btn-link:</span>
<Button kind="ghost" onClick={noOp}>
Text Button
</Button>
<span className="mx-2">btn-link (text w/ optional with icon):</span>
<Button kind="ghost" icon={dhTruck} onClick={noOp}>
Text Button
</Button>
</div>
);

return (
<div>
{isHash('') && <h2 className="ui-title">Buttons</h2>}
<div style={{ padding: '1rem 0' }}>
{isHash('buttons-regular') && buttonsRegular}
{isHash('buttons-outline') && buttonsOutline}
{isHash('buttons-inline') && inlineButtons}
{isHash('buttons-socketed') && socketedButtons}
{isHash('links') && links}
</div>
return (
<div>
{isHash('') && <h2 className="ui-title">Buttons</h2>}
<div style={{ padding: '1rem 0' }}>
{isHash('buttons-regular') && renderButtons('')}
{isHash('buttons-outline') && renderButtons('outline')}
{isHash('buttons-inline') && inlineButtons}
{isHash('buttons-socketed') && socketedButtons}
{isHash('links') && links}
</div>
);
}
</div>
);
}

export default Buttons;
5 changes: 3 additions & 2 deletions packages/code-studio/src/styleguide/Grids.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,11 @@ import QuadrillionExample from './grid-examples/QuadrillionExample';
import TreeExample from './grid-examples/TreeExample';
import AsyncExample from './grid-examples/AsyncExample';
import DataBarExample from './grid-examples/DataBarExample';
import { IsHashProp, sampleSectionIdAndClassesSpectrum } from './utils';
import { sampleSectionIdAndClassesSpectrum, useIsHash } from './utils';

function Grids({ isHash }: IsHashProp): ReactElement {
function Grids(): ReactElement {
const dh = useApi();
const isHash = useIsHash();
const [irisGridModel] = useState(
new MockIrisGridTreeModel(dh, new MockTreeGridModel())
);
Expand Down
6 changes: 4 additions & 2 deletions packages/code-studio/src/styleguide/SpectrumComponents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { dhTruck, vsEmptyWindow } from '@deephaven/icons';
import { Heading, View, Text } from '@deephaven/components';
import { SPECTRUM_COMPONENT_SAMPLES_ID } from './constants';
import { IsHashProp, sampleSectionIdAndClassesSpectrum } from './utils';
import { sampleSectionIdAndClassesSpectrum, useIsHash } from './utils';

export function SpectrumComponents(): JSX.Element {
const isHash = useIsHash();

export function SpectrumComponents({ isHash }: IsHashProp): JSX.Element {
return (
<div id={SPECTRUM_COMPONENT_SAMPLES_ID}>
{isHash('') && (
Expand Down
Loading

0 comments on commit 177deca

Please sign in to comment.