Skip to content

Commit c815208

Browse files
aeagleaeagle
committed
Add more positioned stories
1 parent 83f80c7 commit c815208

File tree

5 files changed

+87
-31
lines changed

5 files changed

+87
-31
lines changed

‎src/components/Custom.tsx‎

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Space } from "./Space";
44
import * as PropTypes from "prop-types";
55
import { IReactSpaceCommonProps } from "../core-react";
66
import { anchoredProps, IAnchorProps } from "./Anchored";
7-
import { omit } from '../core-utils';
7+
import { omit } from "../core-utils";
88

99
type ICustomProps = Omit<IReactSpaceCommonProps & IAnchorProps, "size"> & {
1010
type?: Type;
@@ -23,23 +23,26 @@ type ICustomProps = Omit<IReactSpaceCommonProps & IAnchorProps, "size"> & {
2323
resizeTypes?: ResizeType[];
2424
};
2525

26-
const customProps = omit({
27-
...anchoredProps,
28-
...{
29-
type: PropTypes.oneOf([Type.Positioned, Type.Fill, Type.Anchored]),
26+
const customProps = omit(
27+
{
28+
...anchoredProps,
29+
...{
30+
type: PropTypes.oneOf([Type.Positioned, Type.Fill, Type.Anchored]),
3031

31-
anchor: PropTypes.oneOf([AnchorType.Left, AnchorType.Top, AnchorType.Right, AnchorType.Bottom]),
32-
anchorSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
32+
anchor: PropTypes.oneOf([AnchorType.Left, AnchorType.Top, AnchorType.Right, AnchorType.Bottom]),
33+
anchorSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
3334

34-
left: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
35-
top: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
36-
right: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
37-
bottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
38-
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
39-
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
40-
resizeTypes: PropTypes.array,
35+
left: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
36+
top: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
37+
right: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
38+
bottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
39+
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
40+
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
41+
resizeTypes: PropTypes.array,
42+
},
4143
},
42-
}, 'size');
44+
"size",
45+
);
4346

4447
export const Custom: React.FC<ICustomProps> = ({
4548
children,
@@ -67,10 +70,14 @@ export const Custom: React.FC<ICustomProps> = ({
6770
bottom: bottom,
6871
width: width,
6972
height: height,
70-
leftResizable: resizeTypes && resizeTypes.includes(ResizeType.Left),
71-
topResizable: resizeTypes && resizeTypes.includes(ResizeType.Top),
72-
rightResizable: resizeTypes && resizeTypes.includes(ResizeType.Right),
73-
bottomResizable: resizeTypes && resizeTypes.includes(ResizeType.Bottom),
73+
leftResizable: resizeTypes && (resizeTypes.includes(ResizeType.Left) || resizeTypes.includes(ResizeType.All)),
74+
topResizable: resizeTypes && (resizeTypes.includes(ResizeType.Top) || resizeTypes.includes(ResizeType.All)),
75+
rightResizable: resizeTypes && (resizeTypes.includes(ResizeType.Right) || resizeTypes.includes(ResizeType.All)),
76+
bottomResizable: resizeTypes && (resizeTypes.includes(ResizeType.Bottom) || resizeTypes.includes(ResizeType.All)),
77+
topLeftResizable: resizeTypes && (resizeTypes.includes(ResizeType.TopLeft) || resizeTypes.includes(ResizeType.All)),
78+
topRightResizable: resizeTypes && (resizeTypes.includes(ResizeType.TopRight) || resizeTypes.includes(ResizeType.All)),
79+
bottomLeftResizable: resizeTypes && (resizeTypes.includes(ResizeType.BottomLeft) || resizeTypes.includes(ResizeType.All)),
80+
bottomRightResizable: resizeTypes && (resizeTypes.includes(ResizeType.BottomRight) || resizeTypes.includes(ResizeType.All)),
7481
};
7582
} else {
7683
if (anchor === AnchorType.Left) {

‎src/components/Positioned.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,14 @@ export const Positioned: React.FC<IPositionedProps> = ({ left, top, right, botto
3030
top: top,
3131
right: right,
3232
bottom: bottom,
33-
leftResizable: resizeTypes.includes(ResizeType.Left),
34-
topResizable: resizeTypes.includes(ResizeType.Top),
35-
rightResizable: resizeTypes.includes(ResizeType.Right),
36-
bottomResizable: resizeTypes.includes(ResizeType.Bottom),
37-
topLeftResizable: resizeTypes.includes(ResizeType.TopLeft),
38-
topRightResizable: resizeTypes.includes(ResizeType.TopRight),
39-
bottomLeftResizable: resizeTypes.includes(ResizeType.BottomLeft),
40-
bottomRightResizable: resizeTypes.includes(ResizeType.BottomRight),
33+
leftResizable: resizeTypes.includes(ResizeType.Left) || resizeTypes.includes(ResizeType.All),
34+
topResizable: resizeTypes.includes(ResizeType.Top) || resizeTypes.includes(ResizeType.All),
35+
rightResizable: resizeTypes.includes(ResizeType.Right) || resizeTypes.includes(ResizeType.All),
36+
bottomResizable: resizeTypes.includes(ResizeType.Bottom) || resizeTypes.includes(ResizeType.All),
37+
topLeftResizable: resizeTypes.includes(ResizeType.TopLeft) || resizeTypes.includes(ResizeType.All),
38+
topRightResizable: resizeTypes.includes(ResizeType.TopRight) || resizeTypes.includes(ResizeType.All),
39+
bottomLeftResizable: resizeTypes.includes(ResizeType.BottomLeft) || resizeTypes.includes(ResizeType.All),
40+
bottomRightResizable: resizeTypes.includes(ResizeType.BottomRight) || resizeTypes.includes(ResizeType.All),
4141
width: width,
4242
height: height,
4343
}}>

‎src/components/stories/02-components/Positioned.Resizable.TopRightBottomLeft.stories.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Absolutely positioned space within it's parent with top / left / right / bottom
2929
<Story name="Resize handles (all sides)">
3030
{() => {
3131
return <ViewPort>
32-
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right, ResizeType.TopLeft, ResizeType.TopRight, ResizeType.BottomLeft, ResizeType.BottomRight ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
32+
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.All ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
3333
{description("Positioned")}
3434
</Positioned>
3535
</ViewPort>
@@ -121,7 +121,7 @@ Absolutely positioned space within it's parent with top / left / right / bottom
121121
)
122122
}
123123
return <ViewPort>
124-
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right, ResizeType.TopLeft, ResizeType.TopRight, ResizeType.BottomLeft, ResizeType.BottomRight ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
124+
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.All ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
125125
<DragHandle />
126126
</Positioned>
127127
</ViewPort>

‎src/components/stories/02-components/Positioned.Resizable.WidthHeight.stories.mdx‎

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Absolutely positioned space within it's parent with width and height specified.
2929
<Story name="Resize handles (all sides)">
3030
{() => {
3131
return <ViewPort>
32-
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right, ResizeType.TopLeft, ResizeType.TopRight, ResizeType.BottomLeft, ResizeType.BottomRight ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
32+
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.All ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
3333
{description("Positioned")}
3434
</Positioned>
3535
</ViewPort>
@@ -85,6 +85,54 @@ Absolutely positioned space within it's parent with width and height specified.
8585
</Story>
8686
</Canvas>
8787

88+
<Canvas>
89+
<Story name="Resize handles (top-left only)">
90+
{() => {
91+
return <ViewPort>
92+
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.TopLeft ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
93+
{description("Positioned")}
94+
</Positioned>
95+
</ViewPort>
96+
}}
97+
</Story>
98+
</Canvas>
99+
100+
<Canvas>
101+
<Story name="Resize handles (top-right only)">
102+
{() => {
103+
return <ViewPort>
104+
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.TopRight ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
105+
{description("Positioned")}
106+
</Positioned>
107+
</ViewPort>
108+
}}
109+
</Story>
110+
</Canvas>
111+
112+
<Canvas>
113+
<Story name="Resize handles (bottom-left only)">
114+
{() => {
115+
return <ViewPort>
116+
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.BottomLeft ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
117+
{description("Positioned")}
118+
</Positioned>
119+
</ViewPort>
120+
}}
121+
</Story>
122+
</Canvas>
123+
124+
<Canvas>
125+
<Story name="Resize handles (bottom-right only)">
126+
{() => {
127+
return <ViewPort>
128+
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.BottomRight ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
129+
{description("Positioned")}
130+
</Positioned>
131+
</ViewPort>
132+
}}
133+
</Story>
134+
</Canvas>
135+
88136
<Canvas>
89137
<Story name="Drag handle">
90138
{() => {
@@ -121,7 +169,7 @@ Absolutely positioned space within it's parent with width and height specified.
121169
)
122170
}
123171
return <ViewPort>
124-
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right, ResizeType.TopLeft, ResizeType.TopRight, ResizeType.BottomLeft, ResizeType.BottomRight ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
172+
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.All ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
125173
<DragHandle />
126174
</Positioned>
127175
</ViewPort>

‎src/core-types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export enum Orientation {
2828
export type SizeUnit = number | string | undefined;
2929

3030
export enum ResizeType {
31+
All = "resize-all",
3132
Left = "resize-left",
3233
Right = "resize-right",
3334
Top = "resize-top",

0 commit comments

Comments
 (0)