Skip to content

Commit dba4b24

Browse files
aeagleaeagle
committed
Added property detail
1 parent 9cfd78e commit dba4b24

17 files changed

+337
-50
lines changed

‎react-spaces/.storybook/preview-head.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,17 @@
66
font-size: 12px;
77
}
88
.sbdocs-wrapper {
9-
padding: 20px 0 0 0 !important;
9+
padding: 15px !important;
1010
}
1111
.sbdocs-wrapper h2 {
1212
font-weight: 300 !important;
1313
border-bottom: none !important;
1414
margin-bottom: 20px !important;
1515
}
16+
.sbdocs-wrapper h4 {
17+
margin-top: 20px !important;
18+
font-weight: 500 !important;
19+
}
1620
.sbdocs-wrapper p,
1721
.sbdocs-wrapper li {
1822
font-size: 16px !important;

‎react-spaces/src/components/stories/00-docs/01-GettingStarted.stories.mdx‎

Lines changed: 42 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { CenterType } from "../../../types";
1212

1313
### Installation
1414

15-
```bash
15+
```shell
1616
npm install react-spaces
1717
```
1818

@@ -34,8 +34,12 @@ import { ViewPort, LeftResizable, Fill } from "react-spaces";
3434

3535
const App = () => (
3636
<ViewPort>
37-
<LeftResizable size={200}>...</LeftResizable>
38-
<Fill>...</Fill>
37+
<LeftResizable size={200}>
38+
...
39+
</LeftResizable>
40+
<Fill>
41+
...
42+
</Fill>
3943
</ViewPort>
4044
);
4145
```
@@ -59,17 +63,23 @@ the mouse.
5963

6064
### Nesting spaces
6165

62-
By nesting spaces some more spaces we can easily add another bottom resizable area.
66+
By nesting spaces we can easily add another bottom resizable area.
6367

6468
```tsx
6569
import { ViewPort, LeftResizable, Fill } from "react-spaces";
6670

6771
const App = () => (
6872
<ViewPort>
69-
<LeftResizable size={200}>...</LeftResizable>
73+
<LeftResizable size={200}>
74+
...
75+
</LeftResizable>
7076
<Fill>
71-
<Fill>...</Fill>
72-
<BottomResizable size={100}>...</BottomResizable>
77+
<Fill>
78+
...
79+
</Fill>
80+
<BottomResizable size={100}>
81+
...
82+
</BottomResizable>
7383
</Fill>
7484
</ViewPort>
7585
);
@@ -98,16 +108,28 @@ import { ViewPort, LeftResizable, Fill } from "react-spaces";
98108

99109
const App = () => (
100110
<ViewPort>
101-
<Top size={25} order={1} centerContent={CenterType.Vertical}>...</Top>
102-
<Top size={25} order={2} centerContent={CenterType.Vertical}>...</Top>
111+
<Top size={25} order={1} centerContent={CenterType.Vertical}>
112+
...
113+
</Top>
114+
<Top size={25} order={2} centerContent={CenterType.Vertical}>
115+
...
116+
</Top>
103117
<Fill>
104118
<LeftResizable size={200}>
105-
<Top size={25} centerContent={CenterType.Vertical}>...</Top>
106-
<Fill>...</Fill>
119+
<Top size={25} centerContent={CenterType.Vertical}>
120+
...
121+
</Top>
122+
<Fill>
123+
...
124+
</Fill>
107125
</LeftResizable>
108126
<Fill>
109-
<Fill>...</Fill>
110-
<BottomResizable size={100}>...</BottomResizable>
127+
<Fill>
128+
...
129+
</Fill>
130+
<BottomResizable size={100}>
131+
...
132+
</BottomResizable>
111133
</Fill>
112134
</Fill>
113135
</ViewPort>
@@ -141,7 +163,7 @@ Now we have something like below:
141163

142164
### Introducing simple interactivity
143165

144-
We can add some very simple state manipulate the space representing the sidebar.
166+
We can add some very simple state to manipulate the space representing the sidebar.
145167

146168
Here we add a widget in the sidebar title which we will use to perform an action on the sidebar. This is just
147169
another nested `<Right />` space with an icon.
@@ -150,12 +172,16 @@ another nested `<Right />` space with an icon.
150172
...
151173
<LeftResizable size={200}>
152174
<Top size={25}>
153-
<Fill centerContent={CenterType.Vertical}>Sidebar title ...</Fill>
175+
<Fill centerContent={CenterType.Vertical}>
176+
Sidebar title ...
177+
</Fill>
154178
<Right size={25} centerContent={CenterType.HorizontalVertical}>
155179
<i class="fa fa-arrow-right" />
156180
</Right>
157181
</Top>
158-
<Fill>...</Fill>
182+
<Fill>
183+
...
184+
</Fill>
159185
</LeftResizable>
160186
...
161187
```

‎react-spaces/src/components/stories/00-docs/02-UsefulProperties.stories.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import { CommonHeader } from "../Utils";
1010
| Property | Type | Default | Description |
1111
| --- | --- | --- | --- |
1212
| as | *string* | div | Allows control over the outputted HTML element allowing HTML 5 semantic markup to be created. |
13-
| centerContent | *CenterType.Vertical*, *CenterType.HorizontalVertical*, *vertical*, *horizontalVertical* | | Apply centering to children. |
13+
| centerContent | *CenterType.Vertical* or *CenterType.HorizontalVertical* or *"vertical"* or *"horizontalVertical"* | | Apply centering to children. |
1414
| className | *string* | | A class name to apply to the space element. |
1515
| id | *string* or *number* | *Randomly generated `id`* | By default a space outputs an element with a randomly generated `id`. You can specify your own `id`. It is preferable to specify an `id` on a space that is being added and removed based on state changes. |
16-
| scrollable | boolean | false | Makes the space scrollable. By default content that overflows the space will be hidden. This will allow the space to add a scroll bar if the content overflows. |
17-
| trackSize | boolean | false | Tells the space to report it's size when it changes size to the `<Info />` component. With this turned off the space will only report the initial size. |
18-
| zIndex | number | 0 | A number representing which layer the space sits within. If not specified the space is place in layer 0. Higher numbers appear in front of lower numbers. This is intended to be an alternative to using `<Layer />` as a wrapper and preferable for spaces moving between different layers to avoid remounting of child components. |
16+
| scrollable | *boolean* | false | Makes the space scrollable. By default content that overflows the space will be hidden. This will allow the space to add a scroll bar if the content overflows. |
17+
| trackSize | *boolean* | false | Tells the space to report it's size when it changes size to the `<Info />` component. With this turned off the space will only report the initial size. |
18+
| zIndex | *number* | 0 | A number representing which layer the space sits within. If not specified the space is place in layer 0. Higher numbers appear in front of lower numbers. This is intended to be an alternative to using `<Layer />` as a wrapper and preferable for spaces moving between different layers to avoid remounting of child components. |

‎react-spaces/src/components/stories/00-docs/03-UsefulEvents.stories.mdx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
2+
import { CommonHeader } from "../Utils";
3+
4+
<CommonHeader />
5+
6+
<Meta title="React Spaces|Useful events" />
7+
8+
## Useful events
9+
10+
### Space specific events
11+
12+
#### onResizeStart
13+
14+
Applies to `<LeftResizable />` `<TopResizable />` `<RightResizable />` `<BottomResizable />`
15+
16+
Triggered when a mouse/touch resize starts.
17+
18+
The resize action can be cancelled by returning `false` from the event handler.
19+
20+
```tsx
21+
const Example = () => {
22+
const shouldResize = // logic to determine if resizing should be possible
23+
24+
return (
25+
<LeftResizable onResizeStart={() => shouldResize}>
26+
...
27+
</LeftResizable>
28+
)
29+
}
30+
```
31+
32+
#### onResizeEnd
33+
34+
Applies to `<LeftResizable />` `<TopResizable />` `<RightResizable />` `<BottomResizable />`
35+
36+
Triggered at the end of a resize action providing the new size (in pixels) of the space.
37+
38+
The likely scenario where you need to use this is to keep the size of the space controlled
39+
in state:
40+
41+
```tsx
42+
const Example = () => {
43+
const [ size, setSize ] = useState(200);
44+
45+
return (
46+
<ViewPort>
47+
<LeftResizable onResizeEnd={(newSize) => setSize(newSize)}>
48+
...
49+
</LeftResizable>
50+
</ViewPort>
51+
)
52+
}
53+
```
54+
55+
### Passthrough events
56+
57+
Applies to `<Fill />` `<Left />` `<Top />` `<Right />` `<Bottom />` `<LeftResizable />` `<TopResizable />` `<RightResizable />` `<BottomResizable />` `<Positioned />` `<Custom />`
58+
59+
Space currently components support the follow HTML element events.
60+
61+
- `onClick`
62+
- `onDoubleClick`
63+
- `onMouseDown`
64+
- `onMouseEnter`
65+
- `onMouseLeave`
66+
- `onMouseMove`
67+
- `onTouchStart`
68+
- `onTouchMove`
69+
- `onTouchEnd`

‎react-spaces/src/components/stories/00-docs/03-ChangeHistory.stories.mdx‎ renamed to ‎react-spaces/src/components/stories/00-docs/04-ChangeHistory.stories.mdx‎

File renamed without changes.

‎react-spaces/src/components/stories/02-components/Bottom.stories.mdx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { withKnobs } from "@storybook/addon-knobs";
33
import { ViewPort } from "../../ViewPort";
44
import { Bottom } from "../../Space";
55
import { green, description, lorem } from "../Utils";
6-
import { CommonHeader } from "../Utils";
6+
import { CommonHeader, PropsTable, StandardProps, AnchoredProps } from "../Utils";
77

88
<CommonHeader />
99

@@ -49,6 +49,9 @@ Anchored space on the bottom edge of it's parent.
4949
</Story>
5050
</Preview>
5151

52-
# Properties
52+
### Properties
5353

54-
<Props of={Bottom} />
54+
<PropsTable>
55+
<AnchoredProps />
56+
<StandardProps />
57+
</PropsTable>

‎react-spaces/src/components/stories/02-components/BottomResizable.stories.mdx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { withKnobs } from "@storybook/addon-knobs";
33
import { ViewPort } from "../../ViewPort";
44
import { BottomResizable } from "../../Space";
55
import { green, description, lorem } from "../Utils";
6-
import { CommonHeader } from "../Utils";
6+
import { CommonHeader, PropsTable, StandardProps, AnchoredProps, ResizableProps } from "../Utils";
77

88
<CommonHeader />
99

@@ -61,6 +61,10 @@ Anchored resizable space on the bottom edge of it's parent.
6161
</Story>
6262
</Preview>
6363

64-
# Properties
64+
### Properties
6565

66-
<Props of={BottomResizable} />
66+
<PropsTable>
67+
<ResizableProps />
68+
<AnchoredProps />
69+
<StandardProps />
70+
</PropsTable>

‎react-spaces/src/components/stories/02-components/Centered.stories.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ import { CommonHeader } from "../Utils";
1313

1414
Centers children horizontally and vertically within a space.
1515

16+
Alternatively you can specify `centerContent={CenterType.HorizontalVertical}` or `centerContent="horizontalVertical"`
17+
on a space.
18+
1619
<Preview>
1720
<Story name="Default">
1821
<ViewPort style={blue}>

‎react-spaces/src/components/stories/02-components/CenteredVertically.stories.mdx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ import { CommonHeader } from "../Utils";
1313

1414
Centers children vertically within a space.
1515

16+
Alternatively you can specify `centerContent={CenterType.Vertical}` or `centerContent="vertical"`
17+
on a space.
18+
1619
<Preview>
1720
<Story name="Default">
1821
<ViewPort style={blue}>

‎react-spaces/src/components/stories/02-components/Fill.stories.mdx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { withKnobs } from "@storybook/addon-knobs";
33
import { ViewPort } from "../../ViewPort";
44
import { Left, Top, Right, Bottom, LeftResizable, TopResizable, RightResizable, BottomResizable, Fill } from "../../Space";
55
import { green, description, lorem } from "../Utils";
6-
import { CommonHeader } from "../Utils";
6+
import { CommonHeader, PropsTable, StandardProps } from "../Utils";
77

88
<CommonHeader />
99

@@ -129,6 +129,8 @@ Space which fills all remaining space taken up by anchored spaces.
129129
</Story>
130130
</Preview>
131131

132-
# Properties
132+
### Properties
133133

134-
<Props of={Fill} />
134+
<PropsTable>
135+
<StandardProps />
136+
</PropsTable>

0 commit comments

Comments
 (0)