From a726daae9cb20122a016396d0f5b30bba9de1ad0 Mon Sep 17 00:00:00 2001 From: aeagle Date: Thu, 17 Oct 2019 21:06:36 +0100 Subject: [PATCH] Added prop types for all space components --- react-spaces/package-lock.json | 23 +++---- react-spaces/package.json | 4 +- .../src/{FixedSizeContainer.tsx => Fixed.tsx} | 8 +++ react-spaces/src/Globals/Debounce.ts | 10 +++ react-spaces/src/Globals/Hooks.ts | 3 +- react-spaces/src/Globals/Types.ts | 62 +++++++++++++++++-- react-spaces/src/Globals/Utils.tsx | 15 +---- react-spaces/src/Resizable.tsx | 20 +++--- react-spaces/src/Space.tsx | 15 ++++- .../{FullPageContainer.tsx => ViewPort.tsx} | 11 +++- react-spaces/src/index.ts | 4 +- 11 files changed, 128 insertions(+), 47 deletions(-) rename react-spaces/src/{FixedSizeContainer.tsx => Fixed.tsx} (67%) create mode 100644 react-spaces/src/Globals/Debounce.ts rename react-spaces/src/{FullPageContainer.tsx => ViewPort.tsx} (69%) diff --git a/react-spaces/package-lock.json b/react-spaces/package-lock.json index 0cd8e2d..096af7e 100644 --- a/react-spaces/package-lock.json +++ b/react-spaces/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-spaces", - "version": "0.1.14", + "version": "0.1.16", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -189,9 +189,9 @@ "dev": true }, "@types/prop-types": { - "version": "15.7.1", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.1.tgz", - "integrity": "sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==", + "version": "15.7.3", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz", + "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==", "dev": true }, "@types/q": { @@ -2245,8 +2245,7 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "js-yaml": { "version": "3.13.1", @@ -2345,7 +2344,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -2539,8 +2537,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "object-copy": { "version": "0.1.0", @@ -3227,7 +3224,6 @@ "version": "15.7.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", - "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -3289,10 +3285,9 @@ } }, "react-is": { - "version": "16.9.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz", - "integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==", - "dev": true + "version": "16.10.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz", + "integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==" }, "readable-stream": { "version": "2.3.6", diff --git a/react-spaces/package.json b/react-spaces/package.json index e75c0d2..70f3524 100644 --- a/react-spaces/package.json +++ b/react-spaces/package.json @@ -33,6 +33,7 @@ "@babel/core": "^7.5.5", "@types/jest": "^24.0.15", "@types/node": "^12.6.8", + "@types/prop-types": "^15.7.3", "@types/react": "^16.8.23", "@types/react-dom": "^16.8.4", "react": "^16.9.0", @@ -51,7 +52,8 @@ }, "peerDependencies": { "react": "^16.8.0", - "react-dom": "^16.8.0" + "react-dom": "^16.8.0", + "prop-types": "^15.7.2" }, "scripts": { "start": "rollup -c -w", diff --git a/react-spaces/src/FixedSizeContainer.tsx b/react-spaces/src/Fixed.tsx similarity index 67% rename from react-spaces/src/FixedSizeContainer.tsx rename to react-spaces/src/Fixed.tsx index 8b506a2..4bb564b 100644 --- a/react-spaces/src/FixedSizeContainer.tsx +++ b/react-spaces/src/Fixed.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import * as Spaces from './Space'; import './Styles.css'; +import * as PropTypes from "prop-types"; interface IProps { className?: string, @@ -28,4 +29,11 @@ export const Fixed : React.FC = (props) => { ) +} + +Fixed.propTypes = { + className: PropTypes.string, + style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), + width: PropTypes.number, + height: PropTypes.number.isRequired } \ No newline at end of file diff --git a/react-spaces/src/Globals/Debounce.ts b/react-spaces/src/Globals/Debounce.ts new file mode 100644 index 0000000..db34583 --- /dev/null +++ b/react-spaces/src/Globals/Debounce.ts @@ -0,0 +1,10 @@ +export const debounce = any)>(func: F, waitFor: number) => { + let timeout: number = 0 + + const debounced = (...args: any) => { + window.clearTimeout(timeout) + timeout = window.setTimeout(() => func(...args), waitFor) + } + + return debounced as (...args: Parameters) => ReturnType +} \ No newline at end of file diff --git a/react-spaces/src/Globals/Hooks.ts b/react-spaces/src/Globals/Hooks.ts index d564403..349003f 100644 --- a/react-spaces/src/Globals/Hooks.ts +++ b/react-spaces/src/Globals/Hooks.ts @@ -1,10 +1,9 @@ -import { AllProps, IState, AnchorTypes } from './Types'; +import { AllProps, IState, AnchorTypes, ResizeType } from './Types'; import * as React from 'react'; import { initialState, isHorizontalSpace, isVerticalSpace, getSizeString, isFilledSpace, applyResize, createContext } from './Utils'; import { ResizeSensor } from 'css-element-queries'; import { AnchorType } from './Types'; import { SpaceContext, SpaceLayerContext } from './Contexts'; -import { ResizeType } from '../Resizable'; export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject) => { diff --git a/react-spaces/src/Globals/Types.ts b/react-spaces/src/Globals/Types.ts index bb1f71d..2b9f7c8 100644 --- a/react-spaces/src/Globals/Types.ts +++ b/react-spaces/src/Globals/Types.ts @@ -1,4 +1,11 @@ -import { ResizeType } from 'src/Resizable'; +import * as PropTypes from "prop-types"; + +export enum ResizeType { + Left = "resize-left", + Right = "resize-right", + Top = "resize-top", + Bottom = "resize-bottom" +} export enum AnchorType { Left = "anchor-left", @@ -22,9 +29,9 @@ export const AnchorToResizeTypeMap = { } export enum CenterType { - None, - Vertical, - HorizontalVertical + None = "none", + Vertical = "vertical", + HorizontalVertical = "horizontalVertical" } export interface IPublicProps { @@ -44,6 +51,22 @@ export interface IPublicProps { onMouseLeave?: (event: React.MouseEvent) => void } +export const publicProps = { + id: PropTypes.string, + className: PropTypes.string, + style: PropTypes.oneOfType([ PropTypes.object, PropTypes.array ]), + scrollable: PropTypes.bool, + trackSize: PropTypes.bool, + centerContent: PropTypes.oneOf([ CenterType.None, CenterType.Vertical, CenterType.HorizontalVertical ]), + as: PropTypes.string, + debug: PropTypes.bool, + zIndex: PropTypes.number, + onClick: PropTypes.func, + onMouseDown: PropTypes.func, + onMouseEnter: PropTypes.func, + onMouseLeave: PropTypes.func +} + export interface IPrivateProps { anchorSize?: string | number, anchor?: AnchorType, @@ -51,11 +74,23 @@ export interface IPrivateProps { order?: number } +export const privateProps = { + anchorSize: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), + anchor: PropTypes.oneOf([ AnchorType.Bottom, AnchorType.Left, AnchorType.Right, AnchorType.Top ]), + resizable: PropTypes.bool, + order: PropTypes.number +} + export interface IAnchoredProps { size: number | string, order?: number } +export const anchoredProps = { + size: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]).isRequired, + order: PropTypes.number +} + export interface IResizableProps { handleSize?: number, overlayHandle?: boolean, @@ -63,6 +98,13 @@ export interface IResizableProps { maximumSize?: number } +export const resizableProps = { + handleSize: PropTypes.number, + overlayHandle: PropTypes.bool, + minimumSize: PropTypes.number, + maximumSize: PropTypes.number +} + export interface IPositionedProps { left?: string | number, top?: string | number, @@ -73,8 +115,20 @@ export interface IPositionedProps { resizable?: boolean } +export const positionedProps = { + left: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), + top: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), + right: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), + bottom: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), + width: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), + height: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), + resizable: PropTypes.bool +} + export type AllProps = IPublicProps & IPrivateProps & IResizableProps & IPositionedProps; +export const allProps = { ...publicProps, ...privateProps, ...resizableProps, ...positionedProps }; + export interface IState { id: string, currentWidth: number, diff --git a/react-spaces/src/Globals/Utils.tsx b/react-spaces/src/Globals/Utils.tsx index 32f0989..e56790f 100644 --- a/react-spaces/src/Globals/Utils.tsx +++ b/react-spaces/src/Globals/Utils.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Resizable, ResizeType } from '../Resizable'; -import { AnchorType, AllProps, IState, ISpaceContext, ISpaceTaker, AnchorToResizeTypeMap } from './Types'; +import { Resizable } from '../Resizable'; +import { AnchorType, AllProps, IState, ISpaceContext, ISpaceTaker, AnchorToResizeTypeMap, ResizeType } from './Types'; export const getSizeString = (size: string | number) => typeof(size) === "string" ? size : `${size}px`; @@ -114,15 +114,4 @@ export const applyResize = (props: AllProps, state: IState, setState: (stateDelt } return { resizeHandle: null, resizeType: null }; -} - -export const debounce = any)>(func: F, waitFor: number) => { - let timeout: number = 0 - - const debounced = (...args: any) => { - window.clearTimeout(timeout) - timeout = window.setTimeout(() => func(...args), waitFor) - } - - return debounced as (...args: Parameters) => ReturnType } \ No newline at end of file diff --git a/react-spaces/src/Resizable.tsx b/react-spaces/src/Resizable.tsx index fe9cc59..3dd86bd 100644 --- a/react-spaces/src/Resizable.tsx +++ b/react-spaces/src/Resizable.tsx @@ -1,13 +1,8 @@ import * as React from 'react'; import './Styles.css'; -import { debounce } from './Globals/Utils'; - -export enum ResizeType { - Left = "resize-left", - Right = "resize-right", - Top = "resize-top", - Bottom = "resize-bottom" -} +import { debounce } from './Globals/Debounce'; +import { ResizeType } from './Globals/Types'; +import * as PropTypes from 'prop-types'; interface IProps { type: ResizeType, @@ -73,4 +68,13 @@ export const Resizable : React.FC = (props) => { onMouseDown={startResize} onTouchStart={startTouchResize} /> ) +} + +Resizable.propTypes = { + type: PropTypes.oneOf([ ResizeType.Bottom, ResizeType.Left, ResizeType.Right, ResizeType.Top ]).isRequired, + width: PropTypes.number, + height: PropTypes.number, + minimumAdjust: PropTypes.number.isRequired, + maximumAdjust: PropTypes.number, + onResize: PropTypes.any } \ No newline at end of file diff --git a/react-spaces/src/Space.tsx b/react-spaces/src/Space.tsx index c78f45f..30df27b 100644 --- a/react-spaces/src/Space.tsx +++ b/react-spaces/src/Space.tsx @@ -1,20 +1,30 @@ import * as React from 'react'; -import { IPublicProps, IAnchoredProps, AnchorType, IResizableProps, AllProps, IPositionedProps, CenterType } from './Globals/Types'; +import { IPublicProps, IAnchoredProps, AnchorType, IResizableProps, AllProps, IPositionedProps, CenterType, publicProps, anchoredProps, resizableProps, positionedProps, allProps } from './Globals/Types'; import { SpaceContext, SpaceInfoContext } from './Globals/Contexts'; import { useSpace } from './Globals/Hooks'; import './Styles.css'; import { CenteredVertically, Centered } from './Centered'; export const Fill : React.FC = (props) => +Fill.propTypes = publicProps; export const Top : React.FC = (props) => +Top.propTypes = {...publicProps, ...anchoredProps}; export const Left : React.FC = (props) => +Left.propTypes = {...publicProps, ...anchoredProps}; export const Bottom : React.FC = (props) => +Bottom.propTypes = {...publicProps, ...anchoredProps}; export const Right : React.FC = (props) => +Right.propTypes = {...publicProps, ...anchoredProps}; export const TopResizable : React.FC = (props) => +TopResizable.propTypes = {...publicProps, ...anchoredProps, ...resizableProps}; export const LeftResizable : React.FC = (props) => +LeftResizable.propTypes = {...publicProps, ...anchoredProps, ...resizableProps}; export const BottomResizable : React.FC = (props) => +BottomResizable.propTypes = {...publicProps, ...anchoredProps, ...resizableProps}; export const RightResizable : React.FC = (props) => +RightResizable.propTypes = {...publicProps, ...anchoredProps, ...resizableProps}; export const Positioned : React.FC = (props) => +RightResizable.propTypes = {...publicProps, ...resizableProps, ...positionedProps}; const SpaceInternal : React.FC = (props) => { @@ -66,4 +76,5 @@ const SpaceInternal : React.FC = (props) => { ) -} \ No newline at end of file +} +SpaceInternal.propTypes = allProps; \ No newline at end of file diff --git a/react-spaces/src/FullPageContainer.tsx b/react-spaces/src/ViewPort.tsx similarity index 69% rename from react-spaces/src/FullPageContainer.tsx rename to react-spaces/src/ViewPort.tsx index 8443b86..07aa083 100644 --- a/react-spaces/src/FullPageContainer.tsx +++ b/react-spaces/src/ViewPort.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import * as Spaces from './Space'; import './Styles.css'; +import * as PropTypes from "prop-types"; interface IProps { className?: string, @@ -24,4 +25,12 @@ export const ViewPort : React.FC = (props) => ( {props.children} -) \ No newline at end of file +) + +ViewPort.propTypes = { + className: PropTypes.string, + left: PropTypes.number, + top: PropTypes.number, + right: PropTypes.number, + bottom: PropTypes.number +} \ No newline at end of file diff --git a/react-spaces/src/index.ts b/react-spaces/src/index.ts index 7916c5b..e58968f 100644 --- a/react-spaces/src/index.ts +++ b/react-spaces/src/index.ts @@ -1,7 +1,7 @@ export * from './Centered'; export * from './ClearFix'; -export * from './FixedSizeContainer'; -export * from './FullPageContainer'; +export * from './Fixed'; +export * from './ViewPort'; export * from './Space'; export * from './Layer'; export * from './SpaceInfo';