Skip to content

Commit

Permalink
feat: playground scale property
Browse files Browse the repository at this point in the history
  • Loading branch information
@atanasster
atanasster committed Apr 2, 2020
1 parent 7b31a84 commit 46f28a4
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 23 deletions.
33 changes: 17 additions & 16 deletions ui/blocks/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Some of the guiding design goals for this library:

# List of components

<react-docgen-typescript path="./src" exclude="index.ts,repositoryActions.tsx,StoryContext.tsx,utils.ts,ComponentsContext.tsx,context.tsx,argument-utils.ts" />
<react-docgen-typescript path="./src" exclude="index.ts,repositoryActions.tsx,StoryContext.tsx,utils.ts,ComponentsContext.tsx,context.tsx,argument-utils.ts,channel.ts" />

<!-- START-REACT-DOCGEN-TYPESCRIPT -->

Expand Down Expand Up @@ -109,7 +109,7 @@ _SingleControlsTable [source code](https:/github.com/ccontrols/component-control

| Name | Type | Description |
| ----------------- | ------------------- | ------------------------------------------------------------------- |
| `controls` | _ComponentControls_ | component controls to display in the table. |
| `data` | _any\[]_ | component controls to display in the table. |
| `storyId` | _string_ | storyId, will be used to update the values of the controls |
| `setControlValue` | _SetControlValueFn_ | generic function to update the values of component controls. |
| `clickControl` | _ClickControlFn_ | generic function to propagate a click event for component controls. |
Expand All @@ -134,13 +134,13 @@ _Playground [source code](https:/github.com/ccontrols/component-controls/tree/ma

### properties

| Name | Type | Description |
| ----------- | ---------------------------- | ------------------------------------------------------------- |
| `transform` | _PlaygroundTransformOptions_ | |
| `openTab` | _any_ | by default, which tab to have open. |
| `dark` | _boolean_ | whether to use the dark theme for the story source component. |
| `actions` | _ActionItem\[]_ | optional actions provided to the component |
| `plain` | _boolean_ | if plain, skip the border and spacing around the children |
| Name | Type | Description |
| --------- | --------------- | -------------------------------------------------------------------------------------------- |
| `scale` | _number_ | default scale for the zoom feature. If scale is set to 0, the zoom feature will be disabled. |
| `openTab` | _any_ | by default, which tab to have open. |
| `dark` | _boolean_ | whether to use the dark theme for the story source component. |
| `actions` | _ActionItem\[]_ | optional actions provided to the component |
| `plain` | _boolean_ | if plain, skip the border and spacing around the children |

## <ins>PropsTable</ins>

Expand All @@ -164,6 +164,7 @@ _PropsTable [source code](https:/github.com/ccontrols/component-controls/tree/ma
| `groupBy` | _string\[]_ | field to be grouped by. |
| `hiddenColumns` | _string\[]_ | list of columns to hide. |
| `expanded` | _{ \[key: string]: boolean; }_ | object listing the initially expanded rows. |
| `skipPageReset` | _boolean_ | reset state update while update table data |

## <ins>Stories</ins>

Expand All @@ -173,13 +174,13 @@ _Stories [source code](https:/github.com/ccontrols/component-controls/tree/maste

### properties

| Name | Type | Description |
| ----------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `dark` | _boolean_ | whether to display the dark theme storysource code component whether to use the dark theme for the story source component. |
| `transform` | _PlaygroundTransformOptions_ | |
| `openTab` | _any_ | by default, which tab to have open. |
| `actions` | _ActionItem\[]_ | optional actions provided to the component |
| `plain` | _boolean_ | if plain, skip the border and spacing around the children |
| Name | Type | Description |
| --------- | --------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `dark` | _boolean_ | whether to display the dark theme storysource code component whether to use the dark theme for the story source component. |
| `scale` | _number_ | default scale for the zoom feature. If scale is set to 0, the zoom feature will be disabled. |
| `openTab` | _any_ | by default, which tab to have open. |
| `actions` | _ActionItem\[]_ | optional actions provided to the component |
| `plain` | _boolean_ | if plain, skip the border and spacing around the children |

## <ins>Story</ins>

Expand Down
16 changes: 16 additions & 0 deletions ui/blocks/src/Playground/Playground.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,3 +109,19 @@ export const darkTheme = () => (
</Playground>
</MockContext>
);

export const scale = () => (
<MockContext storyId="blocks-core-story-plain--controls">
<Playground scale={2}>
<Story id="." />
</Playground>
</MockContext>
);

export const zoomDisabled = () => (
<MockContext storyId="blocks-core-story-plain--controls">
<Playground scale={0}>
<Story id="." />
</Playground>
</MockContext>
);
14 changes: 7 additions & 7 deletions ui/blocks/src/Playground/Playground.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ import { StorySource } from '../StorySource';

export interface PlaygroundOwnProps {
/**
* whether to enable the zoom functionality in playground.
* default scale for the zoom feature. If scale is set to 0, the zoom feature will be disabled.
*/
zoomEnabled?: boolean;
scale?: number;
/**
* by default, which tab to have open.
*/
Expand All @@ -49,13 +49,13 @@ export const Playground: FC<PlaygroundProps> = ({
actions: userActions = [],
children,
openTab,
zoomEnabled = true,
scale: userScale = 1,
}) => {
const [tabsIndex, setTabsIndex] = React.useState<number | undefined>(
undefined,
);
const [scale, setScale] = React.useState(1);

const [scale, setScale] = React.useState(userScale);
React.useEffect(() => setScale(userScale), [userScale]);
let storyId: string;
const childArr = React.Children.toArray(children);
if (childArr.length === 1) {
Expand Down Expand Up @@ -140,7 +140,7 @@ export const Playground: FC<PlaygroundProps> = ({
const actions: ActionItem[] = [];
actions.push.apply(actions, panelActions);

const actionsItems = zoomEnabled ? [...zoomActions, ...actions] : actions;
const actionsItems = userScale ? [...zoomActions, ...actions] : actions;
return (
<StoryBlockContainer
name={name}
Expand All @@ -150,7 +150,7 @@ export const Playground: FC<PlaygroundProps> = ({
>
{() => (
<ActionContainer plain={false} actions={actionsItems}>
<Zoom scale={scale}>{children}</Zoom>
<Zoom scale={scale || 1}>{children}</Zoom>
<Collapsible isOpen={tabsIndex !== undefined}>
{panels.length === 1 ? (
panels[0].panel
Expand Down
14 changes: 14 additions & 0 deletions ui/components/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
- [<ins>Tabs</ins>](#instabsins)
- [<ins>Title</ins>](#institleins)
- [<ins>Toggle</ins>](#instoggleins)
- [<ins>Zoom</ins>](#inszoomins)

# Overview

Expand Down Expand Up @@ -223,6 +224,7 @@ _Table [source code](https:/github.com/ccontrols/component-controls/tree/master/
| `groupBy` | _string\[]_ | field to be grouped by. |
| `hiddenColumns` | _string\[]_ | list of columns to hide. |
| `expanded` | _{ \[key: string]: boolean; }_ | object listing the initially expanded rows. |
| `skipPageReset` | _boolean_ | reset state update while update table data |

## <ins>Tab</ins>

Expand Down Expand Up @@ -271,4 +273,16 @@ _Toggle [source code](https:/github.com/ccontrols/component-controls/tree/master
| ------- | -------- | --------------------------------------------------- |
| `label` | _string_ | optional label to be displayed alongside the toggle |

## <ins>Zoom</ins>

zooming transform component

_Zoom [source code](https:/github.com/ccontrols/component-controls/tree/master/ui/components/src/Zoom/Zoom.tsx)_

### properties

| Name | Type | Description |
| ------- | -------- | ------------- |
| `scale` | _number_ | default scale |

<!-- END-REACT-DOCGEN-TYPESCRIPT -->

0 comments on commit 46f28a4

Please sign in to comment.