+
{props.children}
)
export const CenteredVertically : React.FC = (props) => (
-
+
{props.children}
)
\ No newline at end of file
diff --git a/react-spaces/src/components/ClearFix.tsx b/react-spaces/src/ClearFix.tsx
similarity index 61%
rename from react-spaces/src/components/ClearFix.tsx
rename to react-spaces/src/ClearFix.tsx
index bd7e57f..b078278 100644
--- a/react-spaces/src/components/ClearFix.tsx
+++ b/react-spaces/src/ClearFix.tsx
@@ -1,8 +1,8 @@
import * as React from 'react';
-import './ClearFix.scss';
+import './Styles.css';
export const ClearFix : React.FC = (props) => (
-
+
{props.children}
)
\ No newline at end of file
diff --git a/react-spaces/src/components/FixedSizeContainer.tsx b/react-spaces/src/FixedSizeContainer.tsx
similarity index 88%
rename from react-spaces/src/components/FixedSizeContainer.tsx
rename to react-spaces/src/FixedSizeContainer.tsx
index ba28c5b..8b506a2 100644
--- a/react-spaces/src/components/FixedSizeContainer.tsx
+++ b/react-spaces/src/FixedSizeContainer.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import './FixedSizeContainer.scss';
import * as Spaces from './Space';
+import './Styles.css';
interface IProps {
className?: string,
@@ -26,7 +26,6 @@ export const Fixed : React.FC
= (props) => {
{props.children}
-
)
}
\ No newline at end of file
diff --git a/react-spaces/src/components/FullPageContainer.tsx b/react-spaces/src/FullPageContainer.tsx
similarity index 83%
rename from react-spaces/src/components/FullPageContainer.tsx
rename to react-spaces/src/FullPageContainer.tsx
index 3877780..8443b86 100644
--- a/react-spaces/src/components/FullPageContainer.tsx
+++ b/react-spaces/src/FullPageContainer.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import './FullPageContainer.scss';
import * as Spaces from './Space';
+import './Styles.css';
interface IProps {
className?: string,
@@ -17,12 +17,11 @@ export const ViewPort : React.FC
= (props) => (
left: props.left || 0,
top: props.top || 0,
right: props.right || 0,
- bottom: props.bottom || 0
+ bottom: props.bottom || 0
}}>
{props.children}
-
)
\ No newline at end of file
diff --git a/react-spaces/src/components/Globals/Contexts.tsx b/react-spaces/src/Globals/Contexts.tsx
similarity index 100%
rename from react-spaces/src/components/Globals/Contexts.tsx
rename to react-spaces/src/Globals/Contexts.tsx
diff --git a/react-spaces/src/components/Globals/Helpers.tsx b/react-spaces/src/Globals/Helpers.tsx
similarity index 87%
rename from react-spaces/src/components/Globals/Helpers.tsx
rename to react-spaces/src/Globals/Helpers.tsx
index 807d2a8..34062f7 100644
--- a/react-spaces/src/components/Globals/Helpers.tsx
+++ b/react-spaces/src/Globals/Helpers.tsx
@@ -23,17 +23,19 @@ export const initialState = (props: AllProps) => ({
adjustedSize: 0,
spaceTakers: [],
- parsedSize: typeof props.size === "string" ? 0 : props.size as number | undefined,
+ parsedSize: typeof props.anchorSize === "string" ? 0 : props.anchorSize as number | undefined,
left: props.anchor !== AnchorType.Right ? 0 : undefined,
top: props.anchor !== AnchorType.Bottom ? 0 : undefined,
right: props.anchor !== AnchorType.Left ? 0 : undefined,
bottom: props.anchor !== AnchorType.Top ? 0 : undefined,
- width: isHorizontalSpace(props) ? props.size || 0 : undefined,
- height: isVerticalSpace(props) ? props.size || 0 : undefined,
+ width: isHorizontalSpace(props) ? props.anchorSize || 0 : undefined,
+ height: isVerticalSpace(props) ? props.anchorSize || 0 : undefined,
+ debug: props.debug !== undefined ? props.debug : false,
})
const createContext = (state: IState, setState: (stateDelta: Partial
) => void, parent: ISpaceContext | null) => {
return {
+ debug: parent ? (parent.debug ? true : state.debug) : state.debug,
level: parent ? parent.level + 1 : 0,
width: state.currentWidth,
height: state.currentHeight,
@@ -68,6 +70,17 @@ const createContext = (state: IState, setState: (stateDelta: Partial) =>
t
)
})
+ },
+ updateDebug:
+ (id: string, debug: boolean) => {
+ setState({
+ spaceTakers:
+ state.spaceTakers.map(t =>
+ t.id === id ?
+ {...t, ...{ debug: debug }} :
+ t
+ )
+ })
}
}
}
@@ -126,13 +139,13 @@ export const calculateSpace = (props: AllProps, state: IState, setState: (stateD
right: (state.right !== undefined ? `calc(${state.right}px)` : undefined) as string,
bottom: (state.bottom !== undefined ? `calc(${state.bottom}px)` : undefined) as string,
width:
- isHorizontalSpace(props) ?
- `calc(${getSizeString(props.size || 0)} + ${state.adjustedSize}px)`
- : undefined,
+ isHorizontalSpace(props) ?
+ `calc(${getSizeString(props.anchorSize || 0)} + ${state.adjustedSize}px)`
+ : undefined,
height:
- isVerticalSpace(props) ?
- `calc(${getSizeString(props.size || 0)} + ${state.adjustedSize}px)`
- : undefined,
+ isVerticalSpace(props) ?
+ `calc(${getSizeString(props.anchorSize || 0)} + ${state.adjustedSize}px)`
+ : undefined,
};
if (parentContext) {
@@ -202,7 +215,7 @@ export const calculateSpace = (props: AllProps, state: IState, setState: (stateD
id: state.id,
order: props.order || 1,
anchorType: props.anchor,
- size: props.size || 0,
+ size: props.anchorSize || 0,
adjustedSize: 0
});
}
diff --git a/react-spaces/src/components/Globals/Types.ts b/react-spaces/src/Globals/Types.ts
similarity index 72%
rename from react-spaces/src/components/Globals/Types.ts
rename to react-spaces/src/Globals/Types.ts
index efb1185..29cb6f0 100644
--- a/react-spaces/src/components/Globals/Types.ts
+++ b/react-spaces/src/Globals/Types.ts
@@ -1,8 +1,8 @@
export enum AnchorType {
- Left = " anchor-left",
- Right = " anchor-right",
- Top = " anchor-top",
- Bottom = " anchor-bottom"
+ Left = "anchor-left",
+ Right = "anchor-right",
+ Top = "anchor-top",
+ Bottom = "anchor-bottom"
}
export enum CenterType {
@@ -19,16 +19,19 @@ export interface IPublicProps {
trackSize?: boolean,
centerContent?: CenterType,
as?: string,
- children?: React.ReactNode
+ children?: React.ReactNode,
+ debug?: boolean
}
export interface IPrivateProps {
+ anchorSize?: string | number,
anchor?: AnchorType,
- resizable?: boolean
+ resizable?: boolean,
+ order?: number
}
export interface IAnchoredProps {
- size?: number | string,
+ size: number | string,
order?: number
}
@@ -39,6 +42,8 @@ export interface IResizableProps {
maximumSize?: number
}
+export type AllProps = IPublicProps & IPrivateProps & IResizableProps;
+
export interface IState {
id: string,
currentWidth: number,
@@ -53,16 +58,19 @@ export interface IState {
bottom?: number;
width?: number | string;
height?: number | string;
+ debug: boolean;
}
export interface ISpaceContext {
+ debug: boolean,
level: number,
width: number,
height: number,
spaceTakers: ISpaceTaker[],
registerSpaceTaker: (spaceTaker: ISpaceTaker) => void,
removeSpaceTaker: (id: string) => void,
- updateSpaceTakerAdjustedSize: (id: string, adjustedSize: number) => void
+ updateSpaceTakerAdjustedSize: (id: string, adjustedSize: number) => void,
+ updateDebug: (id: string, debug: boolean) => void
}
export interface ISpaceTaker {
@@ -76,6 +84,4 @@ export interface ISpaceTaker {
export interface ISpaceInfo {
width: number,
height: number
-}
-
-export type AllProps = IPublicProps & IPrivateProps & IAnchoredProps & IResizableProps;
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/react-spaces/src/components/Resizable.tsx b/react-spaces/src/Resizable.tsx
similarity index 84%
rename from react-spaces/src/components/Resizable.tsx
rename to react-spaces/src/Resizable.tsx
index 1f54ccc..3def623 100644
--- a/react-spaces/src/components/Resizable.tsx
+++ b/react-spaces/src/Resizable.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import './Resizable.scss';
+import './Styles.css';
export enum ResizeType {
Left = " resize-left",
@@ -36,11 +36,18 @@ export class Resizable extends React.Component {
public render() {
return (
-
+ <>
+
+ >
)
}
diff --git a/react-spaces/src/components/Space.tsx b/react-spaces/src/Space.tsx
similarity index 51%
rename from react-spaces/src/components/Space.tsx
rename to react-spaces/src/Space.tsx
index 134b562..64a0103 100644
--- a/react-spaces/src/components/Space.tsx
+++ b/react-spaces/src/Space.tsx
@@ -1,48 +1,48 @@
import * as React from 'react';
-import './Space.scss';
import { ResizeSensor } from 'css-element-queries';
import { IPublicProps, IAnchoredProps, AnchorType, IResizableProps, AllProps, IState } from './Globals/Types';
import { isHorizontalSpace, isVerticalSpace, calculateSpace, initialState } from './Globals/Helpers';
import { SpaceContext, SpaceInfoContext } from './Globals/Contexts';
+import './Styles.css';
export const Fill : React.FC = (props) =>
-export const Top : React.FC = (props) =>
-export const Left : React.FC = (props) =>
-export const Bottom : React.FC = (props) =>
-export const Right : React.FC = (props) =>
-export const TopResizable : React.FC = (props) =>
-export const LeftResizable : React.FC = (props) =>
-export const BottomResizable : React.FC = (props) =>
-export const RightResizable : React.FC = (props) =>
-
+export const Top : React.FC = (props) =>
+export const Left : React.FC = (props) =>
+export const Bottom : React.FC = (props) =>
+export const Right : React.FC = (props) =>
+export const TopResizable : React.FC = (props) =>
+export const LeftResizable : React.FC = (props) =>
+export const BottomResizable : React.FC = (props) =>
+export const RightResizable : React.FC = (props) =>
+
const Space : React.FC = (props) => {
const parentContext = React.useContext(SpaceContext);
const [ state, changeState ] = React.useState(initialState(props));
const divElementRef = React.useRef();
-
- let resizeSensor: ResizeSensor | undefined = undefined;
- let onRemove: (() => void) | undefined = undefined;
+ const resizeSensor = React.useRef(undefined);
+ const onRemove = React.useRef<(() => void) | undefined>(undefined);
const setState = (stateDelta: Partial) => changeState(prev => ({...prev, ...stateDelta}));
// Deal with property changes to size / anchoring
React.useEffect(() => {
setState({
- parsedSize: typeof props.size === "string" ? 0 : props.size as number | undefined,
+ parsedSize: typeof props.anchorSize === "string" ? 0 : props.anchorSize as number | undefined,
left: props.anchor !== AnchorType.Right ? 0 : undefined,
top: props.anchor !== AnchorType.Bottom ? 0 : undefined,
right: props.anchor !== AnchorType.Left ? 0 : undefined,
bottom: props.anchor !== AnchorType.Top ? 0 : undefined,
- width: isHorizontalSpace(props) ? props.size || 0 : undefined,
- height: isVerticalSpace(props) ? props.size || 0 : undefined
+ width: isHorizontalSpace(props) ? props.anchorSize || 0 : undefined,
+ height: isVerticalSpace(props) ? props.anchorSize || 0 : undefined,
+ debug: props.debug !== undefined ? props.debug : false,
})
- }, [ props.anchor, props.size ]);
+ }, [ props.anchor, props.anchorSize, props.debug ]);
// Setup / cleanup
React.useEffect(() => {
if (divElementRef.current) {
if (props.trackSize) {
- resizeSensor = new ResizeSensor(
+ resizeSensor.current = new ResizeSensor(
divElementRef.current,
(size) => setState({ currentWidth: size.width, currentHeight: size.height })
);
@@ -60,44 +60,64 @@ const Space : React.FC = (props) => {
}
const cleanup = () => {
- if (resizeSensor) {
- resizeSensor.detach();
- resizeSensor = undefined;
+ if (resizeSensor.current) {
+ resizeSensor.current.detach();
+ resizeSensor.current = undefined;
}
- if (onRemove) {
- onRemove();
- onRemove = undefined;
+ if (onRemove.current) {
+ onRemove.current();
+ onRemove.current = undefined;
}
}
return cleanup;
}, [])
+ const debug =
+ parentContext ? parentContext.debug : false ||
+ props.debug !== undefined ? props.debug : false;
+
const { currentContext, outerStyle, innerStyle, resizeType, resizeHandle, children } =
- calculateSpace(props, state, setState, (handler) => { onRemove = handler; }, parentContext);
+ calculateSpace(props, state, setState, (handler) => { onRemove.current = handler; }, parentContext);
+
+ const outerClasses = [
+ "spaces-space",
+ props.anchor || '',
+ resizeType || '',
+ props.scrollable ? "scrollable" : '',
+ props.className ? `${props.className}-container` : '',
+ debug ? 'debug' : ''
+ ]
+
+ const innerClasses = [
+ "spaces-space-inner",
+ props.className ? props.className : ''
+ ]
return (
-
-
- {
- React.createElement(
- props.as || 'div',
- {
- id: props.id,
- ref: divElementRef,
- className: `spaces-space${props.anchor || ''}${resizeType || ''}${props.scrollable ? ' scrollable' : ''}${props.className ? ` ${props.className}-container` : ``}`,
- style: outerStyle
- },
- <>
- { resizeHandle }
-
- { children }
-
- >
- )
- }
-
-
+ <>
+
+
+ {
+ React.createElement(
+ props.as || 'div',
+ {
+ id: props.id,
+ ref: divElementRef,
+ className: outerClasses.join(' '),
+ style: outerStyle
+ },
+ <>
+ { resizeHandle }
+
+ { children }
+
+ >
+ )
+ }
+
+
+ >
)
}
\ No newline at end of file
diff --git a/react-spaces/src/components/SpaceInfo.tsx b/react-spaces/src/SpaceInfo.tsx
similarity index 100%
rename from react-spaces/src/components/SpaceInfo.tsx
rename to react-spaces/src/SpaceInfo.tsx
diff --git a/react-spaces/src/Styles.css b/react-spaces/src/Styles.css
new file mode 100644
index 0000000..c4fb35a
--- /dev/null
+++ b/react-spaces/src/Styles.css
@@ -0,0 +1,80 @@
+.spaces-centered-vertically {
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.spaces-centered {
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ text-align: center;
+}
+
+.spaces-clearfix:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+
+.spaces-fixedsize-layout {
+ overflow: hidden;
+ position: relative;
+}
+
+.spaces-fullpage-layout {
+ position: fixed;
+ overflow: hidden;
+}
+
+.spaces-resize-handle {
+ position: absolute;
+ z-index: 9999;
+}
+
+.spaces-resize-handle.resize-left {
+ top: 0;
+ bottom: 0;
+ left: 0;
+ cursor: w-resize;
+}
+
+.spaces-resize-handle.resize-right {
+ top: 0;
+ bottom: 0;
+ right: 0;
+ cursor: e-resize;
+}
+
+.spaces-resize-handle.resize-top {
+ top: 0;
+ left: 0;
+ right: 0;
+ cursor: n-resize;
+}
+
+.spaces-resize-handle.resize-bottom {
+ bottom: 0;
+ left: 0;
+ right: 0;
+ cursor: s-resize;
+}
+
+.spaces-space {
+ position: absolute;
+ overflow: hidden;
+ z-index: 1;
+}
+
+.spaces-space .spaces-space-inner {
+ z-index: 1;
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+}
+
+.spaces-space.scrollable .spaces-space-inner {
+ overflow: auto;
+}
\ No newline at end of file
diff --git a/react-spaces/src/components/Centered.scss b/react-spaces/src/components/Centered.scss
deleted file mode 100644
index da5f2de..0000000
--- a/react-spaces/src/components/Centered.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.spaces-centered-vertically {
- position: relative;
- top: 50%;
- transform: translateY(-50%);
-}
-
-.spaces-centered {
- @extend .spaces-centered-vertically;
- text-align: center;
-}
\ No newline at end of file
diff --git a/react-spaces/src/components/ClearFix.scss b/react-spaces/src/components/ClearFix.scss
deleted file mode 100644
index 74a4e9b..0000000
--- a/react-spaces/src/components/ClearFix.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.spaces-clearfix {
- &:after {
- content: "";
- display: table;
- clear: both;
- }
-}
\ No newline at end of file
diff --git a/react-spaces/src/components/FixedSizeContainer.scss b/react-spaces/src/components/FixedSizeContainer.scss
deleted file mode 100644
index e5c1f42..0000000
--- a/react-spaces/src/components/FixedSizeContainer.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.spaces-fixedsize-layout {
- overflow: hidden;
- position: relative;
-}
\ No newline at end of file
diff --git a/react-spaces/src/components/FullPageContainer.scss b/react-spaces/src/components/FullPageContainer.scss
deleted file mode 100644
index f3dde1a..0000000
--- a/react-spaces/src/components/FullPageContainer.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.spaces-fullpage-layout {
- position: fixed;
- overflow: hidden;
-}
\ No newline at end of file
diff --git a/react-spaces/src/components/Resizable.scss b/react-spaces/src/components/Resizable.scss
deleted file mode 100644
index 046ff7e..0000000
--- a/react-spaces/src/components/Resizable.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.spaces-resize-handle {
- position: absolute;
- z-index: 9999;
-
- &.resize-left {
- top: 0;
- bottom: 0;
- left: 0;
- cursor: w-resize;
- }
-
- &.resize-right {
- top: 0;
- bottom: 0;
- right: 0;
- cursor: e-resize;
- }
-
- &.resize-top {
- top: 0;
- left: 0;
- right: 0;
- cursor: n-resize;
- }
-
- &.resize-bottom {
- bottom: 0;
- left: 0;
- right: 0;
- cursor: s-resize;
- }
-}
\ No newline at end of file
diff --git a/react-spaces/src/components/Space.scss b/react-spaces/src/components/Space.scss
deleted file mode 100644
index 31ecb4a..0000000
--- a/react-spaces/src/components/Space.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.spaces-space {
- position: absolute;
- overflow: hidden;
- z-index: 1;
-
- .spaces-space-inner {
- z-index: 1;
- position: absolute;
- left: 0;
- top: 0;
- right: 0;
- bottom: 0;
- }
-
- &.scrollable {
- .spaces-space-inner {
- overflow: auto;
- }
- }
-}
\ No newline at end of file
diff --git a/react-spaces/src/index.ts b/react-spaces/src/index.ts
index 7a2c1ad..80b0a2a 100644
--- a/react-spaces/src/index.ts
+++ b/react-spaces/src/index.ts
@@ -1,12 +1,12 @@
-export * from './components/Centered';
-export * from './components/ClearFix';
-export * from './components/FixedSizeContainer';
-export * from './components/FullPageContainer';
-export * from './components/Space';
-export * from './components/SpaceInfo';
+export * from './Centered';
+export * from './ClearFix';
+export * from './FixedSizeContainer';
+export * from './FullPageContainer';
+export * from './Space';
+export * from './SpaceInfo';
export {
CenterType,
AnchorType,
ISpaceInfo
-} from './components/Globals/Types';
\ No newline at end of file
+} from './Globals/Types';
\ No newline at end of file
diff --git a/react-spaces/webpack.config.js b/react-spaces/webpack.config.js
deleted file mode 100644
index d34a1bf..0000000
--- a/react-spaces/webpack.config.js
+++ /dev/null
@@ -1,37 +0,0 @@
-module.exports = {
- mode: 'production',
- entry: "./src/index.ts",
- output: {
- filename: "index.js",
- path: __dirname + "/dist",
- libraryTarget: 'commonjs2'
- },
-
- // Enable sourcemaps for debugging webpack's output.
- devtool: "source-map",
-
- resolve: {
- // Add '.ts' and '.tsx' as resolvable extensions.
- extensions: [".ts", ".tsx", ".js", ".json"]
- },
-
- module: {
- rules: [
- { test: /\.tsx?$/, loader: "ts-loader" },
-
- { test: /\.scss?$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader'}, { loader: "sass-loader"} ] },
-
- // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
- { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
- ]
- },
-
- // When importing a module whose path matches one of the following, just
- // assume a corresponding global variable exists and use that instead.
- // This is important because it allows us to avoid bundling all of our
- // dependencies, which allows browsers to cache those libraries between builds.
- externals: {
- 'react': 'react',
- 'react-dom': 'react-dom'
- }
-};
\ No newline at end of file