Skip to content

Commit 45642b0

Browse files
aeagleaeagle
authored
Merge pull request #39 from aeagle/fix/34-component-prop-types
Added prop types for all space components
2 parents 2e5e91b + a726daa commit 45642b0

File tree

11 files changed

+128
-47
lines changed

11 files changed

+128
-47
lines changed

‎react-spaces/package-lock.json‎

Lines changed: 9 additions & 14 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎react-spaces/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
"@babel/core": "^7.5.5",
3434
"@types/jest": "^24.0.15",
3535
"@types/node": "^12.6.8",
36+
"@types/prop-types": "^15.7.3",
3637
"@types/react": "^16.8.23",
3738
"@types/react-dom": "^16.8.4",
3839
"react": "^16.9.0",
@@ -51,7 +52,8 @@
5152
},
5253
"peerDependencies": {
5354
"react": "^16.8.0",
54-
"react-dom": "^16.8.0"
55+
"react-dom": "^16.8.0",
56+
"prop-types": "^15.7.2"
5557
},
5658
"scripts": {
5759
"start": "rollup -c -w",

‎react-spaces/src/FixedSizeContainer.tsx‎ renamed to ‎react-spaces/src/Fixed.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import * as Spaces from './Space';
33
import './Styles.css';
4+
import * as PropTypes from "prop-types";
45

56
interface IProps {
67
className?: string,
@@ -28,4 +29,11 @@ export const Fixed : React.FC<IProps> = (props) => {
2829
</Spaces.Fill>
2930
</div>
3031
)
32+
}
33+
34+
Fixed.propTypes = {
35+
className: PropTypes.string,
36+
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
37+
width: PropTypes.number,
38+
height: PropTypes.number.isRequired
3139
}

‎react-spaces/src/Globals/Debounce.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export const debounce = <F extends ((...args: any) => any)>(func: F, waitFor: number) => {
2+
let timeout: number = 0
3+
4+
const debounced = (...args: any) => {
5+
window.clearTimeout(timeout)
6+
timeout = window.setTimeout(() => func(...args), waitFor)
7+
}
8+
9+
return debounced as (...args: Parameters<F>) => ReturnType<F>
10+
}

‎react-spaces/src/Globals/Hooks.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { AllProps, IState, AnchorTypes } from './Types';
1+
import { AllProps, IState, AnchorTypes, ResizeType } from './Types';
22
import * as React from 'react';
33
import { initialState, isHorizontalSpace, isVerticalSpace, getSizeString, isFilledSpace, applyResize, createContext } from './Utils';
44
import { ResizeSensor } from 'css-element-queries';
55
import { AnchorType } from './Types';
66
import { SpaceContext, SpaceLayerContext } from './Contexts';
7-
import { ResizeType } from '../Resizable';
87

98
export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<HTMLElement | undefined>) => {
109

‎react-spaces/src/Globals/Types.ts‎

Lines changed: 58 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import { ResizeType } from 'src/Resizable';
1+
import * as PropTypes from "prop-types";
2+
3+
export enum ResizeType {
4+
Left = "resize-left",
5+
Right = "resize-right",
6+
Top = "resize-top",
7+
Bottom = "resize-bottom"
8+
}
29

310
export enum AnchorType {
411
Left = "anchor-left",
@@ -22,9 +29,9 @@ export const AnchorToResizeTypeMap = {
2229
}
2330

2431
export enum CenterType {
25-
None,
26-
Vertical,
27-
HorizontalVertical
32+
None = "none",
33+
Vertical = "vertical",
34+
HorizontalVertical = "horizontalVertical"
2835
}
2936

3037
export interface IPublicProps {
@@ -44,25 +51,60 @@ export interface IPublicProps {
4451
onMouseLeave?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void
4552
}
4653

54+
export const publicProps = {
55+
id: PropTypes.string,
56+
className: PropTypes.string,
57+
style: PropTypes.oneOfType([ PropTypes.object, PropTypes.array ]),
58+
scrollable: PropTypes.bool,
59+
trackSize: PropTypes.bool,
60+
centerContent: PropTypes.oneOf([ CenterType.None, CenterType.Vertical, CenterType.HorizontalVertical ]),
61+
as: PropTypes.string,
62+
debug: PropTypes.bool,
63+
zIndex: PropTypes.number,
64+
onClick: PropTypes.func,
65+
onMouseDown: PropTypes.func,
66+
onMouseEnter: PropTypes.func,
67+
onMouseLeave: PropTypes.func
68+
}
69+
4770
export interface IPrivateProps {
4871
anchorSize?: string | number,
4972
anchor?: AnchorType,
5073
resizable?: boolean,
5174
order?: number
5275
}
5376

77+
export const privateProps = {
78+
anchorSize: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
79+
anchor: PropTypes.oneOf([ AnchorType.Bottom, AnchorType.Left, AnchorType.Right, AnchorType.Top ]),
80+
resizable: PropTypes.bool,
81+
order: PropTypes.number
82+
}
83+
5484
export interface IAnchoredProps {
5585
size: number | string,
5686
order?: number
5787
}
5888

89+
export const anchoredProps = {
90+
size: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]).isRequired,
91+
order: PropTypes.number
92+
}
93+
5994
export interface IResizableProps {
6095
handleSize?: number,
6196
overlayHandle?: boolean,
6297
minimumSize?: number,
6398
maximumSize?: number
6499
}
65100

101+
export const resizableProps = {
102+
handleSize: PropTypes.number,
103+
overlayHandle: PropTypes.bool,
104+
minimumSize: PropTypes.number,
105+
maximumSize: PropTypes.number
106+
}
107+
66108
export interface IPositionedProps {
67109
left?: string | number,
68110
top?: string | number,
@@ -73,8 +115,20 @@ export interface IPositionedProps {
73115
resizable?: boolean
74116
}
75117

118+
export const positionedProps = {
119+
left: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
120+
top: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
121+
right: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
122+
bottom: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
123+
width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
124+
height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
125+
resizable: PropTypes.bool
126+
}
127+
76128
export type AllProps = IPublicProps & IPrivateProps & IResizableProps & IPositionedProps;
77129

130+
export const allProps = { ...publicProps, ...privateProps, ...resizableProps, ...positionedProps };
131+
78132
export interface IState {
79133
id: string,
80134
currentWidth: number,

‎react-spaces/src/Globals/Utils.tsx‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
2-
import { Resizable, ResizeType } from '../Resizable';
3-
import { AnchorType, AllProps, IState, ISpaceContext, ISpaceTaker, AnchorToResizeTypeMap } from './Types';
2+
import { Resizable } from '../Resizable';
3+
import { AnchorType, AllProps, IState, ISpaceContext, ISpaceTaker, AnchorToResizeTypeMap, ResizeType } from './Types';
44

55
export const getSizeString =
66
(size: string | number) => typeof(size) === "string" ? size : `${size}px`;
@@ -114,15 +114,4 @@ export const applyResize = (props: AllProps, state: IState, setState: (stateDelt
114114
}
115115

116116
return { resizeHandle: null, resizeType: null };
117-
}
118-
119-
export const debounce = <F extends ((...args: any) => any)>(func: F, waitFor: number) => {
120-
let timeout: number = 0
121-
122-
const debounced = (...args: any) => {
123-
window.clearTimeout(timeout)
124-
timeout = window.setTimeout(() => func(...args), waitFor)
125-
}
126-
127-
return debounced as (...args: Parameters<F>) => ReturnType<F>
128117
}

‎react-spaces/src/Resizable.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
import * as React from 'react';
22
import './Styles.css';
3-
import { debounce } from './Globals/Utils';
4-
5-
export enum ResizeType {
6-
Left = "resize-left",
7-
Right = "resize-right",
8-
Top = "resize-top",
9-
Bottom = "resize-bottom"
10-
}
3+
import { debounce } from './Globals/Debounce';
4+
import { ResizeType } from './Globals/Types';
5+
import * as PropTypes from 'prop-types';
116

127
interface IProps {
138
type: ResizeType,
@@ -73,4 +68,13 @@ export const Resizable : React.FC<IProps> = (props) => {
7368
onMouseDown={startResize}
7469
onTouchStart={startTouchResize} />
7570
)
71+
}
72+
73+
Resizable.propTypes = {
74+
type: PropTypes.oneOf([ ResizeType.Bottom, ResizeType.Left, ResizeType.Right, ResizeType.Top ]).isRequired,
75+
width: PropTypes.number,
76+
height: PropTypes.number,
77+
minimumAdjust: PropTypes.number.isRequired,
78+
maximumAdjust: PropTypes.number,
79+
onResize: PropTypes.any
7680
}

‎react-spaces/src/Space.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
11
import * as React from 'react';
2-
import { IPublicProps, IAnchoredProps, AnchorType, IResizableProps, AllProps, IPositionedProps, CenterType } from './Globals/Types';
2+
import { IPublicProps, IAnchoredProps, AnchorType, IResizableProps, AllProps, IPositionedProps, CenterType, publicProps, anchoredProps, resizableProps, positionedProps, allProps } from './Globals/Types';
33
import { SpaceContext, SpaceInfoContext } from './Globals/Contexts';
44
import { useSpace } from './Globals/Hooks';
55
import './Styles.css';
66
import { CenteredVertically, Centered } from './Centered';
77

88
export const Fill : React.FC<IPublicProps> = (props) => <SpaceInternal {...props} />
9+
Fill.propTypes = publicProps;
910
export const Top : React.FC<IPublicProps & IAnchoredProps> = (props) => <SpaceInternal {...props} anchor={AnchorType.Top} anchorSize={props.size} />
11+
Top.propTypes = {...publicProps, ...anchoredProps};
1012
export const Left : React.FC<IPublicProps & IAnchoredProps> = (props) => <SpaceInternal {...props} anchor={AnchorType.Left} anchorSize={props.size} />
13+
Left.propTypes = {...publicProps, ...anchoredProps};
1114
export const Bottom : React.FC<IPublicProps & IAnchoredProps> = (props) => <SpaceInternal {...props} anchor={AnchorType.Bottom} anchorSize={props.size} />
15+
Bottom.propTypes = {...publicProps, ...anchoredProps};
1216
export const Right : React.FC<IPublicProps & IAnchoredProps> = (props) => <SpaceInternal {...props} anchor={AnchorType.Right} anchorSize={props.size} />
17+
Right.propTypes = {...publicProps, ...anchoredProps};
1318
export const TopResizable : React.FC<IPublicProps & IAnchoredProps & IResizableProps> = (props) => <SpaceInternal {...props} anchor={AnchorType.Top} anchorSize={props.size} resizable={true} />
19+
TopResizable.propTypes = {...publicProps, ...anchoredProps, ...resizableProps};
1420
export const LeftResizable : React.FC<IPublicProps & IAnchoredProps & IResizableProps> = (props) => <SpaceInternal {...props} anchor={AnchorType.Left} anchorSize={props.size} resizable={true} />
21+
LeftResizable.propTypes = {...publicProps, ...anchoredProps, ...resizableProps};
1522
export const BottomResizable : React.FC<IPublicProps & IAnchoredProps & IResizableProps> = (props) => <SpaceInternal {...props} anchor={AnchorType.Bottom} anchorSize={props.size} resizable={true} />
23+
BottomResizable.propTypes = {...publicProps, ...anchoredProps, ...resizableProps};
1624
export const RightResizable : React.FC<IPublicProps & IAnchoredProps & IResizableProps> = (props) => <SpaceInternal {...props} anchor={AnchorType.Right} anchorSize={props.size} resizable={true} />
25+
RightResizable.propTypes = {...publicProps, ...anchoredProps, ...resizableProps};
1726
export const Positioned : React.FC<IPublicProps & IResizableProps & IPositionedProps> = (props) => <SpaceInternal {...props} />
27+
RightResizable.propTypes = {...publicProps, ...resizableProps, ...positionedProps};
1828

1929
const SpaceInternal : React.FC<AllProps> = (props) => {
2030

@@ -66,4 +76,5 @@ const SpaceInternal : React.FC<AllProps> = (props) => {
6676
</SpaceInfoContext.Provider>
6777
</SpaceContext.Provider>
6878
)
69-
}
79+
}
80+
SpaceInternal.propTypes = allProps;

‎react-spaces/src/FullPageContainer.tsx‎ renamed to ‎react-spaces/src/ViewPort.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import * as Spaces from './Space';
33
import './Styles.css';
4+
import * as PropTypes from "prop-types";
45

56
interface IProps {
67
className?: string,
@@ -24,4 +25,12 @@ export const ViewPort : React.FC<IProps> = (props) => (
2425
{props.children}
2526
</Spaces.Fill>
2627
</div>
27-
)
28+
)
29+
30+
ViewPort.propTypes = {
31+
className: PropTypes.string,
32+
left: PropTypes.number,
33+
top: PropTypes.number,
34+
right: PropTypes.number,
35+
bottom: PropTypes.number
36+
}

0 commit comments

Comments
 (0)