Skip to content

Commit

Permalink
feat: enhance BlockCOntainer with actions
Browse files Browse the repository at this point in the history
  • Loading branch information
@atanasster
atanasster committed Feb 28, 2020
1 parent a83bab3 commit 59d19ed
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 115 deletions.
26 changes: 11 additions & 15 deletions blocks/core/src/ActionBar/ActionBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,15 @@ import React, { FunctionComponent, MouseEvent } from 'react';
import styled from '@emotion/styled';
import { Theme } from 'theme-ui';

interface ContainerProps {
zIndex?: number;
}
const Container = styled.div<ContainerProps>(
({ theme, zIndex = 1 }: { theme: Theme } & ContainerProps) => ({
position: 'absolute',
bottom: 0,
right: 0,
maxWidth: '100%',
display: 'flex',
background: theme?.colors?.background,
zIndex,
}),
);
const Container = styled.div(({ theme }: { theme: Theme }) => ({
bottom: 0,
right: 0,
maxWidth: '100%',
display: 'flex',
flexDirection: 'row',
justifyContent: 'flex-end',
background: theme?.colors?.background,
}));

interface ActionButtonProps {
disabled?: boolean;
Expand All @@ -34,8 +29,9 @@ export const ActionButton = styled.button<ActionButtonProps>(
lineHeight: '16px',
fontWeight: 'bold',

borderTop: `1px solid ${theme?.colors?.muted}`,
borderBottom: `1px solid ${theme?.colors?.muted}`,
borderLeft: `1px solid ${theme?.colors?.muted}`,
borderRight: `1px solid ${theme?.colors?.muted}`,
marginLeft: -1,

borderRadius: `4px 0 0 0`,
Expand Down
22 changes: 19 additions & 3 deletions blocks/core/src/BlockContainer/BlockContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,30 @@
import React, { FC } from 'react';
import styled from '@emotion/styled';
import { ActionBar, ActionItem } from '../ActionBar';

const StyledBlockContainer = styled.div<{}>(() => ({
const SpacedBlockContainer = styled.div(() => ({
position: 'relative',
margin: '25px 0 40px 0',
}));

const FramedBlockContainer = styled.div(() => ({
boxSadow: 'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px',
borderRadius: 4,
border: '1px solid rgba(0, 0, 0, 0.1)',
}));

export const BlockContainer: FC = ({ children }) => (
<StyledBlockContainer> {children}</StyledBlockContainer>
export interface BlockContainerProps {
/**
* additional actions provided to the component
*/
actions?: ActionItem[];
}
export const BlockContainer: FC<BlockContainerProps> = ({
children,
actions,
}) => (
<SpacedBlockContainer>
<FramedBlockContainer>{children}</FramedBlockContainer>
{actions && <ActionBar actionItems={actions} />}
</SpacedBlockContainer>
);
30 changes: 10 additions & 20 deletions blocks/core/src/Source/Source.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,9 @@ import Highlight, {
import duotoneDark from 'prism-react-renderer/themes/duotoneDark';
import duotoneLight from 'prism-react-renderer/themes/duotoneLight';

import { BlockContainer } from '../BlockContainer';
import { ActionBar, ActionItem } from '../ActionBar';
import { BlockContainer, BlockContainerProps } from '../BlockContainer';

export interface SourceProps {
export interface SourceOwnProps {
/**
* source code to display
*/
Expand All @@ -32,24 +31,21 @@ export interface SourceProps {
* custom function to render the source code
*/
children?: (props: any) => React.ReactNode;
/**
* additional actions provided to the component
*/
actions?: ActionItem[];
/**
* used to specify a "dark" color theme - applcable only if no custom theme prop is provided
*/
dark?: boolean;
}

export type SourceProps = SourceOwnProps & BlockContainerProps;
/**
* Source component used to display source code
*
*/
export const Source: FC<SourceProps> = ({
source = '',
language = 'jsx',
theme,
theme: customTheme,
children,
actions,
dark = false,
Expand All @@ -63,17 +59,17 @@ export const Source: FC<SourceProps> = ({
window.setTimeout(() => setCopied(false), 1500);
};

const actionsItems = actions || [];
const actionsItems = Array.isArray(actions) ? [...actions] : [];

actionsItems.push({ title: copied ? 'copied' : 'copy', onClick: onCopy });

const theme = customTheme ? customTheme : dark ? duotoneDark : duotoneLight;
const renderProps =
typeof children === 'function'
? children
? (props: any) => children({ ...props, theme })
: ({ className, style, tokens, getLineProps, getTokenProps }: any) => (
<Styled.pre
className={`${className}`}
style={{ ...style, padding: '10px 10px 25px 10px', margin: 0 }}
style={{ ...style, padding: '0px 10px', margin: 0 }}
>
{tokens.map((line: string[], i: number) => (
<div {...getLineProps({ line, key: i })}>
Expand All @@ -87,19 +83,13 @@ export const Source: FC<SourceProps> = ({
))}
</Styled.pre>
);
const props = { ...defaultProps };
if (theme) {
props.theme = theme;
} else {
props.theme = dark ? duotoneDark : duotoneLight;
}
const props = { ...defaultProps, theme };

return (
<BlockContainer>
<BlockContainer actions={actionsItems}>
<Highlight {...props} code={source} language={language}>
{renderProps}
</Highlight>
<ActionBar actionItems={actionsItems} />
</BlockContainer>
);
};
154 changes: 77 additions & 77 deletions blocks/core/src/StorySource/TaggedSource.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,87 +48,87 @@ export const TaggedSource: React.FC<TaggedSourceProps> = ({
const tags: (ArgumentLocations & { color?: string })[] | undefined = args
? getArgumentsLocations(args)
: undefined;
if (tags) {
tags.forEach((tag, index) => {
let color: string;
if (theme) {
const colorIdx = index % (theme.styles.length - 1);
const style = theme.styles[colorIdx];
color = style.style.color || theme.plain.color || '#fff';
} else {
color = '#333';
}
tag.color = color;
});
}
return (
<Source theme={theme} {...rest}>
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<Styled.pre
className={`${className}`}
style={{ ...style, padding: '10px 10px 25px 10px', margin: 0 }}
>
{tokens.map((line: { content: string }[], i: number) => (
<div {...getLineProps({ line, key: i })}>
{(() => {
let column = 0;
return line.map((token, key) => {
const tokenTrim = token.content.trim();
const param = tags
? tags.find(tag => {
if (tag.name === tokenTrim) {
return tag.locs.find(
loc =>
loc.start.line === i &&
loc.start.column >= column &&
loc.start.column <= column + token.content.length,
);
}
return false;
})
: null;
column += token.content.length;
if (param) {
const splitToken: string[] = getTokenProps({
token,
key,
}).children.split(/(\s+)/);
{({ className, style, tokens, getLineProps, getTokenProps, theme }) => {
if (tags) {
tags.forEach((tag, index) => {
let color: string;
const colorIdx = index % (theme.styles.length - 1);
const style = theme.styles[colorIdx];
color = style.style.color || theme.plain.color || '#fff';
tag.color = color;
});
}
return (
<Styled.pre
className={`${className}`}
style={{ ...style, padding: '0px 10px', margin: 0 }}
>
{tokens.map((line: { content: string }[], i: number) => (
<div {...getLineProps({ line, key: i })}>
{(() => {
let column = 0;
return line.map((token, key) => {
const tokenTrim = token.content.trim();
const param = tags
? tags.find(tag => {
if (tag.name === tokenTrim) {
return tag.locs.find(
loc =>
loc.start.line === i &&
loc.start.column >= column &&
loc.start.column <=
column + token.content.length,
);
}
return false;
})
: null;

return splitToken.map(s =>
s.trim().length ? (
<span
{...getTokenProps({ token, key })}
sx={{
display: 'inline-block',
//@ts-ignore
backgroundColor: transparentize(0.8, param.color),
paddingLeft: 1,
paddingRight: 1,
//@ts-ignore
border: `1px solid ${param.color}`,
}}
>
{s}
</span>
) : (
s
),
column += token.content.length;
if (param) {
const splitToken: string[] = getTokenProps({
token,
key,
}).children.split(/(\s+)/);

return splitToken.map(s =>
s.trim().length ? (
<span
{...getTokenProps({ token, key })}
sx={{
display: 'inline-block',
//@ts-ignore
backgroundColor: transparentize(0.8, param.color),
paddingLeft: 1,
paddingRight: 1,
//@ts-ignore
border: `1px solid ${param.color}`,
}}
>
{s}
</span>
) : (
s
),
);
}
return (
<span
{...getTokenProps({ token, key })}
sx={{
display: 'inline-block',
}}
/>
);
}
return (
<span
{...getTokenProps({ token, key })}
sx={{
display: 'inline-block',
}}
/>
);
});
})()}
</div>
))}
</Styled.pre>
)}
});
})()}
</div>
))}
</Styled.pre>
);
}}
</Source>
);
};

0 comments on commit 59d19ed

Please sign in to comment.