React Spaces
View on GitHub.
0.4.1 Hotfix for resize operation race condition JAN 07, 2023
- Fix for race condition in resize operation which allows a mouse/touch move/drag to be processed after a resize operation has already been completed
0.4.0 Experimental SSR support JAN 06, 2023
Functionality added to allow full SSR rendering support.
- Switched dynamic ID generation for spaces to use useId() hook from React 18
- Added
component to enable functionality. Place a <Space.SSR />
component above any use of spaces to enable - Server-side rendered styling of spaces
Note:
- You must be using React 18
- Order of spaces is important in the JSX/TSX. You should always put
<Fill />
spaces last within any parent
0.3.9 Allow render in SSR environment JAN 06, 2023
Initial fix in relation to https://github.com/aeagle/react-spaces/issues/85.
Simple fix to allow spaces to render in a SSR environment
- Check for existence of
document
before trying to apply styles - Added Next.js demo project to repo
This should allow spaces to be used in Next.js without error, however, this is not a full SSR implementation:
- Allows space content to render from server side
- Doesn't allow initial styles to be properly rendered server-side, however, client-side style hydration should kick in if .... all spaces are given a unique
id
prop to ensure consistency between server/client side renders.
0.3.8 Corner resize functionality JAN 06, 2023
- Add corner resize functionality to positioned spaces
0.3.6 Hotfix for custom prop types AUG 15, 2022
- Fix omit func in core-utils.ts by @Gerhut in https://github.com/aeagle/react-spaces/pull/126
0.3.5 Typescript type / proptype fix for custom space props AUG 01, 2022
- Custom space props fix
0.3.3 React 18 support MAY 29, 2022
- Upgraded to React 18.1.0 as dev dependencies
- Allow React 18 addtionally to 16/17 as peer dependencies
- Added options to local storybook to render components in strict mode
- Applied fix in isolation from PR https://github.com/aeagle/react-spaces/pull/113 in regards to issue https://github.com/aeagle/react---spaces/issues/112 to avoid unmount code in useEffect() running twice in React 18 strict mode
0.3.2 Fix exported types NOV 17, 2021
- Ensure ResizeTouchEvent and Type exported from library
0.3.0 Positioned space functionality and custom resize handles NOV 17, 2021
- Created
<Positioned />
space #60 - Allow 'as' property to be Polymorphic (to play with libraries like Framer Motion) #89
- Custom resize handles #97
- Added allowOverflow property on spaces to allow contents to overflow space boundary
- Added useCurrentSpace() hook and deprecated
<Space.Info />
- Refactored resize logic and added drag logic to support movable
<Positioned />
space - Increased test coverage
- Updated docs
- Upgraded storybook
- Upgraded rollup/build packages
0.2.6 Storybook upgrade JUL 06, 2021
- Upgraded storybook to 6.3.2
0.2.5 Fixed maximumSize constraint functionality JUL 06, 2021
- Corrected erroneous falsy check when determining limits during resize operation
0.2.4 Fixed location of change log and pull releases via GitHub JUL 03, 2021
- Fixed URL of version history in changelog.md
- Removed version history from storybook docs
- History auto updates at allaneagle.com/projects/react-spaces/history from GitHub release via GitHub API
0.2.3 CI / build / deployment improvements for package and storybook docs JUL 03, 2021
- Setup gitversion semantic versioning on Azure Pipeline
- Ensure storybook package automatically created for automatic inclusion on allaneagle.com
0.2.2 Allow React v17 to be used as a peer dependency JUL 02, 2021
- Include React v17 as well as v16 as peer dependency
0.2.1 Storybook upgrade + npm audit fix MAY 16, 2021
- Storybook upgrade
- npm audit fix
0.2.0 Revised global state implementation / optimisations / bug fixes DEC 13, 2020
- Major refactor of library to fix React state side effect issues
- Added tests to library for core functionality
- Revised resize handle placement/functionality
0.1.29 Fixed broken `overlayHandle` functionality DEC 06, 2020
- Fixed overlayHandle property on resizable spaces which was broken in
0.1.25
0.1.28 Added proptypes as dependency to library DEC 06, 2020
- Ensure proptypes package added as direct dependency to library so that proptypes is added automatically to downstream projects to ensure correct running of the library
0.1.27 Fixed broken 'handleSize' functionality DEC 06, 2020
- Fixed issue where handleSize property was not being passed to internal ResizeHandle component
0.1.26 Fixed broken resize event functionality SEP 24, 2020
- Fix for broken onResizeStart and onResizeEnd events
0.1.25 Replaced old demo projects with storybook docs and refactored resize logic APR 11, 2020
- Added storybook docs. View with
npm run storybook
. - Remove old demo/next js projects
- Refactored file locations
- Refactored resize/drag logic
- Added prettier to project
0.1.24 Fixed readme in NPM package and added changelog FEB 16, 2020
- Fixed NPM readme
- Added CHANGELOG.md
0.1.23 Styling fixes for height and z-index applied to spaces JAN 12, 2020
- Fixed generation of head styles height and z-index which were missing a semi-colon.
0.1.22 Added Custom space and improved resize event functionality NOV 30, 2019
- Added Custom space to allow access to all space properties.
- Allowed false to be returned from onResizeStart event callback to conditionally cancel resize operation.
0.1.21 Added mouse/touch events to spaces NOV 23, 2019
- Added onMouseMove, onTouchStart, onTouchMove and onTouchEnd events.
0.1.20 Cleaner markup with less inline styling and miscellaneous bug fixes/optimisations NOV 23, 2019
- Moved child state and recalculation of child spaces to the parent space to remove synchronisation issues causing various update issues.
- Moved space styles to document head to generate cleaner mark-up. All spaces now get a auto-generated short ID which can be overriden with the id property on a space.
- Removed the need for an outer and inner container on all spaces except for when a space is resizable and scrollable to allow the space to maintain the resize handle location.
- Optimised touch resize actions preventing default browser actions using css touch-action and changing debounce to throttling on resize updates.
0.1.19 Ensure spaces kept in sync with zIndex changes OCT 23, 2019
- Fix to ensure spaces in same parent are updated when a space zIndex is adjusted.
0.1.18 Added resize events and various bug fixes OCT 20, 2019
- Added resize start and end events
- Fixed useContext hook being used within condition expression causing 'React has detected a change in the order of Hooks called by SpaceInternal' error when zIndex property updated on space.
- Fix to ensure debounced resize (mouse/touch) events do not fire after mouse up or touch end events have fired.
- Fix to ensure mouse up and touch end events are unbound after a resize operation has completed to prevent multiple event handlers being bound on every resize operation.
0.1.17 Added proptypes validation to components + bug fixes OCT 17, 2019
- Fix to ensured resize delta is reset when size property changed on anchored and resizable spaces
- Added PropTypes for all exposed components for Javascript only consumers in addition to the Typescript typings in the library.
- Fix when multiple classes provided as property to space to prevent a duplication of class names on the outer and inner space elements.
0.1.16 Touch resize functionality OCT 08, 2019
- Added touch resize functionality.
- Remove old docs from demo project.
0.1.15 Layered spaces implementation OCT 06, 2019
- Added
component and layer support to allow floating of spaces above each other.
0.1.14 Migrated from webpack to rollup for library build AUG 24, 2019
- Migrated from Webpack to Rollup for building component library
- Created ES module bundles in
/dist/es
- Fixed window undefined error when rendering spaces via Next.js
- Created server bundle
/dist/server
for using with Node.js server side apps when utilising SSR, e.g. Next.js and separated styling from server bundle (/dist/server.css). This is currently experimental.
0.1.13 Migration to functional components AUG 14, 2019
- Refactored spaces as functional component using hooks.
- Fixed className type on
<ViewPort />
component.
0.1.12 Bug fixes for state sync issues AUG 08, 2019
- Fix to deal with changes to size and anchor properties on anchored spaces and adjusted spaces accordingly.
0.1.10 Extra space properties and state sync issue fixes AUG 04, 2019
- Added 'as' property to allow rendered DOM element to be specified.
- Added 'centerContent' property as short-hand for centering space content instead of having to introduce the extra
<Centered />
or<CenteredVertically />
components. - Allow resize handle width to be specified and also it's placement within space controlled with the 'overlayHandle' property.
- Fixed issue with dynamically added/removed anchored spaces where an anchored space would see itself as a space taking space.
0.1.9 package.json fixes AUG 03, 2019
- Added repository field to package.json
0.1.8 Space CSS styling fixes JUL 28, 2019
- Removed clear fix from space
0.1.7 Fixed resize handles on scrollable spaces JUL 28, 2019
- Fixed positioning of resize handles within scrollable divs
0.1.6 Resize constraint fixes JUL 28, 2019
- Fixed resize minimum and maximum constraints
0.1.5 Bug fix for resize handles JUL 27, 2019
- Fixed resize handles being covered by nested spaces preventing resizing
0.1.4 Implemented percentage sizing on anchored spaces JUL 24, 2019
- Add support for percentage sizing on anchored spaces
0.1.3 Documentation/readme fixes JUL 23, 2019
- Added readme
- Updated documentation
0.1.2 Added trackSize property and VerticallyCentered component JUL 22, 2019
- Removed ResizeSensor from spaces by default and now optionally allow live size updates with trackSize property
- Added
<VerticallyCentered />
component to vertically centre content within a space - Allow class names to be specified on top-level spaces
<ViewPort />
and<Fixed />
0.1.1 JUL 21, 2019
Initial release
Known issues / limitations
- Rendering an anchored horizontal space and an anchored vertical space within the same parent space will cause a gap to appear in the corner where the two anchored spaces meet. You can workaround this by using nested <Fill /> spaces to seperate the horizontally and vertically anchored spaces.
- There isn't currently any consideration for using spaces in a responsive manner. You can however give spaces class names and target them with media queries like you would with any other DOM element.