Skip to content

Commit

Permalink
fix: some contexts
Browse files Browse the repository at this point in the history
  • Loading branch information
@atanasster
atanasster committed Apr 1, 2020
1 parent 6660ded commit 55962bc
Show file tree
Hide file tree
Showing 2 changed files with 138 additions and 140 deletions.
277 changes: 138 additions & 139 deletions ui/blocks/src/StorySource/StorySource.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,149 +65,148 @@ const ViewStyleNext: {
*/
export const StorySource: React.FC<StorySourceProps> = (
props: StorySourceProps,
) => (
<StoryBlockContainer {...props}>
{(context, { actions, ...rest }: SourceProps) => {
const [viewStyle, setViewStyle] = React.useState<ViewStyle>('tags');
const [showFileSource, setShowFileSource] = React.useState<boolean>(
false,
);
) => {
const [viewStyle, setViewStyle] = React.useState<ViewStyle>('tags');
const [showFileSource, setShowFileSource] = React.useState<boolean>(false);
return (
<StoryBlockContainer {...props}>
{(context, { actions, ...rest }: SourceProps) => {
const onMergeValues = () => setViewStyle(ViewStyleNext[viewStyle]);
const onShowFileSource = () => setShowFileSource(!showFileSource);

const onMergeValues = () => setViewStyle(ViewStyleNext[viewStyle]);
const onShowFileSource = () => setShowFileSource(!showFileSource);

const { story, kind } = context;
const { controls } = story || {};
const { dark } = React.useContext(ThemeContext);
const allActions: ActionItem[] = [];
const repositoryItems = kind && repositoryActions(kind?.repository);
if (repositoryItems) {
allActions.push.apply(allActions, repositoryItems);
}
if (kind?.source) {
allActions.push({
title: showFileSource ? 'story code' : 'file code',
onClick: onShowFileSource,
});
}
const args = story?.arguments;
if (args && args.length) {
allActions.push({
title: ViewStyleNext[viewStyle],
onClick: onMergeValues,
});
}
if (actions) {
allActions.push.apply(allActions, actions);
}
let source: string;
if (!showFileSource) {
if (viewStyle === 'values' && args && controls) {
source = mergeControlValues(story?.source || '', args, controls);
const { story, kind } = context;
const { controls } = story || {};
const { dark } = React.useContext(ThemeContext);
const allActions: ActionItem[] = [];
const repositoryItems = kind && repositoryActions(kind?.repository);
if (repositoryItems) {
allActions.push.apply(allActions, repositoryItems);
}
if (kind?.source) {
allActions.push({
title: showFileSource ? 'story code' : 'file code',
onClick: onShowFileSource,
});
}
const args = story?.arguments;
if (args && args.length) {
allActions.push({
title: ViewStyleNext[viewStyle],
onClick: onMergeValues,
});
}
if (actions) {
allActions.push.apply(allActions, actions);
}
let source: string;
if (!showFileSource) {
if (viewStyle === 'values' && args && controls) {
source = mergeControlValues(story?.source || '', args, controls);
} else {
source = story?.source || '';
}
} else {
source = story?.source || '';
source = kind?.source || '';
}
} else {
source = kind?.source || '';
}

const tags: (ArgumentLocations & { color?: string })[] | undefined = args
? getArgumentsLocations(args)
: undefined;
return (
<Source
actions={allActions}
dark={dark}
{...rest}
renderFn={(
{ className, style, tokens, getLineProps, getTokenProps }: any,
{ theme }: any,
) => {
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: '0 10px 10px', margin: 0 }}
>
{tokens.map((line: any, i: number) => (
<div {...getLineProps({ line, key: i })}>
{(() => {
let column = 0;
return line.map((token: any, key: string) => {
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;
const tags:
| (ArgumentLocations & { color?: string })[]
| undefined = args ? getArgumentsLocations(args) : undefined;
return (
<Source
actions={allActions}
dark={dark}
{...rest}
renderFn={(
{ className, style, tokens, getLineProps, getTokenProps }: any,
{ theme }: any,
) => {
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: '0 10px 10px', margin: 0 }}
>
{tokens.map((line: any, i: number) => (
<div {...getLineProps({ line, key: i })}>
{(() => {
let column = 0;
return line.map((token: any, key: string) => {
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 = getTokenProps({
token,
key,
}).children.split(/(\s+)/);
column += token.content.length;
if (param) {
const splitToken = getTokenProps({
token,
key,
}).children.split(/(\s+)/);

return splitToken.map((s: string) =>
s.trim().length ? (
<span
{...getTokenProps({ token, key })}
sx={{
display: 'inline-block',
//@ts-ignore
backgroundColor: transparentize(
0.8,
param.color || 'white',
),
paddingLeft: 1,
paddingRight: 1,
//@ts-ignore
border: `1px solid ${param.color}`,
}}
>
{s}
</span>
) : (
s
),
return splitToken.map((s: string) =>
s.trim().length ? (
<span
{...getTokenProps({ token, key })}
sx={{
display: 'inline-block',
//@ts-ignore
backgroundColor: transparentize(
0.8,
param.color || 'white',
),
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>
);
}}
>
{source}
</Source>
);
}}
</StoryBlockContainer>
);
});
})()}
</div>
))}
</Styled.pre>
);
}}
>
{source}
</Source>
);
}}
</StoryBlockContainer>
);
};
1 change: 0 additions & 1 deletion ui/components/src/Toggle/Toggle.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import { ChevronRight, ChevronDown } from '@primer/octicons-react';

import { Toggle } from './Toggle';

Expand Down

0 comments on commit 55962bc

Please sign in to comment.