Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(builder/1): add initial field preview (only SectionField) when editing field in form builder #3130

Merged
merged 16 commits into from
Jan 14, 2022

Conversation

karrui
Copy link
Contributor

@karrui karrui commented Dec 2, 2021

This PR is part of the chain for form-v2/feat/builder branch.

Problem

This PR adds logic for allowing of real time (but debounced) preview on the field when it is being edited.

Part of #2792

Solution

Features:

  • feat: add editFieldStore to manipulate currently edited fields
  • feat: add updateSingleFormField service function and mutations
  • feat: add BuilderDrawerCloseButton to handle closing of builder drawer
  • feat: add EditHeader (and container) component for edit example
  • feat: add initial renderer for SectionField preview
  • feat(BuilderDrawer): use EditFieldDrawer component

Improvements:

  • feat: extract edit form field actions to FormFieldDrawerActions
  • ref(BuilderDrawerContext): move clear active field logic into context

Bug Fixes:

  • fix(SectionField): use whiteSpace=break-spaces instead of pre
    • this fixes bug where long continuous words could overflow out of the container

Before & After Screenshots

None... Will add

Tests

Deploy Notes

New dependencies:

  • zustand: state management for managing edit form state without rerendering often (due to context)
  • immer: immutable mutations
  • react-use: react hooks, mainly using useDebounce for now (treeshakeable anyways)

@karrui karrui changed the title feat(builder/1): add field preview when editing field in form builder feat(builder/1): add initial field preview (only SectionField) when editing field in form builder Dec 2, 2021
@karrui karrui force-pushed the form-v2/feat/builder/layout-render-0 branch from 658e700 to bf23514 Compare December 2, 2021 10:17
@karrui karrui force-pushed the form-v2/feat/builder/edit-field-preview-1 branch from 86b1e9d to fbde509 Compare December 2, 2021 10:17
Base automatically changed from form-v2/feat/builder/layout-render-0 to form-v2/develop January 13, 2022 07:11
karrui added 16 commits January 13, 2022 16:13
There are a variety of packages that do the same thing, but seems like the use-debounce package actually took the most precautions to prevent unnecessary re-renders, which I appreciate.
in the end... only needed to call a specific debounced function instead of invoking it
pre was the wrong choice -- long single words overflow out of the bounding containers
@karrui karrui force-pushed the form-v2/feat/builder/edit-field-preview-1 branch from fbde509 to 5b1d90f Compare January 13, 2022 08:18
@karrui karrui marked this pull request as ready for review January 13, 2022 08:28
@karrui karrui requested a review from liangyuanruo January 13, 2022 08:30
@karrui karrui merged commit e67054d into form-v2/develop Jan 14, 2022
@karrui karrui deleted the form-v2/feat/builder/edit-field-preview-1 branch January 14, 2022 11:36
@justynoh justynoh mentioned this pull request Oct 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant