fzaninotto Github contribution chart
fzaninotto Github Stats
fzaninotto Most Used Languages

Activity

29 Sep 2022

Issue Comment

Fzaninotto

Fix `SimpleFormIterator` defaultValues when adding a record

Fixes #8178

Forked On 29 Sep 2022 at 04:10:19

Fzaninotto

Actually, this PR misses a unit test...

Commented On 29 Sep 2022 at 04:10:19

Fzaninotto

Update docs/ReferenceInput.md

Co-authored-by: Aníbal Svarcas WiXSL@users.noreply.github.com

Pushed On 29 Sep 2022 at 11:22:21

Fzaninotto

Add automated empty values sanitization

Problem

All form inputs have an empty value of '' (empty string). React-hook-form doesn't sanitize these values by default. This leads to unexpected create and update payloads like:

{
  id: 123,
  title: '',
  author: '',
} 

The currently documented solution is to use parse on individual inputs, and/or transform at the controller level.

But none of these solutions is particularly convenient when developers have to use them everywhere. The input-level solution is super repetitive, and the controller-one is at the wrong level - the problem is caused by the form, it should be handled by the form.

Solution

Introduce an opt-in <Form sanitizeEmtyValues> prop

 <Edit>
    <SimpleForm sanitizeEmptyValues>
      <TextInput source="title" />
    </SimpleForm>
  </Edit>
); 

Todo

  • [x] Create an empty value sanitizer and test it
  • [x] Add the support for sanitizeEmptyValues in , , and ``
  • [x] Document the new prop
  • [x] Remove advice to use transform to sanitize empty values
  • [x] In Reference inputs, sanitize empty values by default

Forked On 29 Sep 2022 at 11:09:35

Fzaninotto

Right, fixed
On 29 Sep 2022 at 11:09:35

Fzaninotto

Add automated empty values sanitization

Problem

All form inputs have an empty value of '' (empty string). React-hook-form doesn't sanitize these values by default. This leads to unexpected create and update payloads like:

{
  id: 123,
  title: '',
  author: '',
} 

The currently documented solution is to use parse on individual inputs, and/or transform at the controller level.

But none of these solutions is particularly convenient when developers have to use them everywhere. The input-level solution is super repetitive, and the controller-one is at the wrong level - the problem is caused by the form, it should be handled by the form.

Solution

Introduce an opt-in <Form sanitizeEmtyValues> prop

 <Edit>
    <SimpleForm sanitizeEmptyValues>
      <TextInput source="title" />
    </SimpleForm>
  </Edit>
); 

Todo

  • [x] Create an empty value sanitizer and test it
  • [x] Add the support for sanitizeEmptyValues in , , and ``
  • [x] Document the new prop
  • [x] Remove advice to use transform to sanitize empty values
  • [x] In Reference inputs, sanitize empty values by default

Merged On 29 Sep 2022 at 11:09:36

Fzaninotto

Commented On 29 Sep 2022 at 11:09:36

Fzaninotto

Fix upgrade guide

Pushed On 29 Sep 2022 at 11:09:25

Fzaninotto

Add automated empty values sanitization

Problem

All form inputs have an empty value of '' (empty string). React-hook-form doesn't sanitize these values by default. This leads to unexpected create and update payloads like:

{
  id: 123,
  title: '',
  author: '',
} 

The currently documented solution is to use parse on individual inputs, and/or transform at the controller level.

But none of these solutions is particularly convenient when developers have to use them everywhere. The input-level solution is super repetitive, and the controller-one is at the wrong level - the problem is caused by the form, it should be handled by the form.

Solution

Introduce an opt-in <Form sanitizeEmtyValues> prop

 <Edit>
    <SimpleForm sanitizeEmptyValues>
      <TextInput source="title" />
    </SimpleForm>
  </Edit>
); 

Todo

  • [x] Create an empty value sanitizer and test it
  • [x] Add the support for sanitizeEmptyValues in , , and ``
  • [x] Document the new prop
  • [x] Remove advice to use transform to sanitize empty values
  • [x] In Reference inputs, sanitize empty values by default

Forked On 29 Sep 2022 at 11:09:07

Fzaninotto

To avoid memoization issues in useCallback
On 29 Sep 2022 at 11:09:07

Fzaninotto

Add automated empty values sanitization

Problem

All form inputs have an empty value of '' (empty string). React-hook-form doesn't sanitize these values by default. This leads to unexpected create and update payloads like:

{
  id: 123,
  title: '',
  author: '',
} 

The currently documented solution is to use parse on individual inputs, and/or transform at the controller level.

But none of these solutions is particularly convenient when developers have to use them everywhere. The input-level solution is super repetitive, and the controller-one is at the wrong level - the problem is caused by the form, it should be handled by the form.

Solution

Introduce an opt-in <Form sanitizeEmtyValues> prop

 <Edit>
    <SimpleForm sanitizeEmptyValues>
      <TextInput source="title" />
    </SimpleForm>
  </Edit>
); 

Todo

  • [x] Create an empty value sanitizer and test it
  • [x] Add the support for sanitizeEmptyValues in , , and ``
  • [x] Document the new prop
  • [x] Remove advice to use transform to sanitize empty values
  • [x] In Reference inputs, sanitize empty values by default

Merged On 29 Sep 2022 at 11:09:08

Fzaninotto

Commented On 29 Sep 2022 at 11:09:08

Fzaninotto

Update docs/ReferenceInput.md

Co-authored-by: Jean-Baptiste Kaiser jb@marmelab.com

Pushed On 29 Sep 2022 at 11:07:52

Fzaninotto

Update docs/ReferenceInput.md

Co-authored-by: Jean-Baptiste Kaiser jb@marmelab.com

Pushed On 29 Sep 2022 at 11:07:50

Fzaninotto

Fix liquid syntax errors

Pushed On 29 Sep 2022 at 10:12:43

Fzaninotto

Merge branch 'next' into sanitizeEmptyValues

Pushed On 29 Sep 2022 at 10:12:43

Fzaninotto

Make ReferenceInput default to null on empty value

Pushed On 29 Sep 2022 at 10:12:43

Fzaninotto

Doculment reference parse and format

Pushed On 29 Sep 2022 at 10:12:43

Fzaninotto

Fix liquid syntax errors

Pushed On 29 Sep 2022 at 08:32:10

Fzaninotto

Add doc

Pushed On 29 Sep 2022 at 08:29:26

Fzaninotto

Proof of concept

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

Improve DX

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

UI tweaks

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

Add transition

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

more complete story

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

Add nested story

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

Change hover style

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

UI tweaks

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

inject Ref

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

label tweaking

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

support multiple Instances

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

untype ref

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

export components

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

Enable InspectorContext by default

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

Fix configurable stories title

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

Work even when not in context

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

Change naming convention

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

Use outline for accessibility

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

Add Reset£SettingsButton

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

Rename preferencesKey

Pushed On 29 Sep 2022 at 08:13:12

Fzaninotto

Update DeleteParams id type

Pushed On 29 Sep 2022 at 07:07:18

Fzaninotto

Merge pull request #8208 from zhujinxuan/update-id-params

Update DeleteParams id type

Pushed On 29 Sep 2022 at 07:07:18
Issue Comment

Fzaninotto

Update DeleteParams id type

Update a type definition to make DeleteParams is consistent with the definition in GetOne and GetMany.

The benefit is the programmer don't need to distinguish number or string once the RecordType is given

https://github.com/marmelab/react-admin/blob/99106d62b512d387f35b68fba22302f5c25d3d8e/packages/ra-core/src/types.ts#L147

Forked On 29 Sep 2022 at 07:07:15

Fzaninotto

Thanks!

Commented On 29 Sep 2022 at 07:07:15

Fzaninotto

Update DeleteParams id type

Created On 29 Sep 2022 at 07:07:10

Fzaninotto

Update DeleteParams id type

Update a type definition to make DeleteParams is consistent with the definition in GetOne and GetMany.

The benefit is the programmer don't need to distinguish number or string once the RecordType is given

https://github.com/marmelab/react-admin/blob/99106d62b512d387f35b68fba22302f5c25d3d8e/packages/ra-core/src/types.ts#L147

Merged On 29 Sep 2022 at 07:07:05

Fzaninotto

Commented On 29 Sep 2022 at 07:07:05

Fzaninotto

Fix `SimpleFormIterator` defaultValues when adding a record

Fixes #8178

Merged On 28 Sep 2022 at 03:41:02

Fzaninotto

Commented On 28 Sep 2022 at 03:41:02

Fzaninotto

Fix `SimpleFormIterator` defaultValues when adding a record

Fixes #8178

Forked On 28 Sep 2022 at 03:40:55

Fzaninotto

Can we avoid inspecting the child type?
On 28 Sep 2022 at 03:40:55

Fzaninotto

Fix `SimpleFormIterator` defaultValues when adding a record

Fixes #8178

Forked On 28 Sep 2022 at 03:39:43

Fzaninotto

I'm very scared of that type of global values - it will persist across the entire app. We'll see side effects in tests. Can't you find an alternative fix that doesn't rely on a global? Why not a `ref`?
On 28 Sep 2022 at 03:39:43

Fzaninotto

Fix `SimpleFormIterator` defaultValues when adding a record

Fixes #8178

Merged On 28 Sep 2022 at 03:41:01

Fzaninotto

Commented On 28 Sep 2022 at 03:41:01
Issue Comment

Fzaninotto

ViteJS - Uncaught Error: useRoutes() may be used only in the context of a <Router> component

What you were expecting: react-admin should render as expected

What happened instead: react-router does not render any routes, and instead throws an exception:

Uncaught Error: useRoutes() may be used only in the context of a <Router> component 

Steps to reproduce:

  1. Set up a new Vite project using react-ts template
  2. Follow tutorial to set up a react-admin component
  3. Launch app

Related code:

  • Preferably, a CodeSandbox forked from
    • https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple (v4)
    • https://codesandbox.io/s/github/marmelab/react-admin/tree/3.x/examples/simple (v3)
  • A link to a GitHub repo with the minimal codebase to reproduce the issue
insert short code snippets here 

Other information:

Environment

  • React-admin version:
  • Last version that did not exhibit the issue (if applicable):
  • React version:
  • Browser:
  • Stack trace (in case of a JS error):
Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
    invariant index.tsx:24
    useRoutes index.tsx:642
    Routes index.tsx:344
    React 12
    unstable_runWithPriority scheduler.development.js:468
    React 4
    unstable_runWithPriority scheduler.development.js:468
    React 3
    workLoop scheduler.development.js:417
    flushWork scheduler.development.js:390
    performWorkUntilDeadline scheduler.development.js:157
    js scheduler.development.js:180
    js scheduler.development.js:645
    __require chunk-CEDYW5NB.js:11
    js index.js:6
    __require chunk-CEDYW5NB.js:11
    React 2
    __require chunk-CEDYW5NB.js:11
    js React
    __require chunk-CEDYW5NB.js:11
    <anonymous> react-dom:1
index.tsx:24:19 

Forked On 28 Sep 2022 at 03:37:26

Fzaninotto

Nope, I was wrong: react-admin works well with react-router 6.4.1.

This error occurs if there are several instances of react-router or react-router-dom in your project. This is probably because you added react-router as a direct dependency in your project, and somehow the npm/yarn resolution ended with 2 versions of the library.

React-router uses a singleton - this is a limitation of the library.

So you have to fix that on your side, there is nothing that react-admin can do.

Commented On 28 Sep 2022 at 03:37:26
Issue Comment

Fzaninotto

ViteJS - Uncaught Error: useRoutes() may be used only in the context of a <Router> component

What you were expecting: react-admin should render as expected

What happened instead: react-router does not render any routes, and instead throws an exception:

Uncaught Error: useRoutes() may be used only in the context of a <Router> component 

Steps to reproduce:

  1. Set up a new Vite project using react-ts template
  2. Follow tutorial to set up a react-admin component
  3. Launch app

Related code:

  • Preferably, a CodeSandbox forked from
    • https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple (v4)
    • https://codesandbox.io/s/github/marmelab/react-admin/tree/3.x/examples/simple (v3)
  • A link to a GitHub repo with the minimal codebase to reproduce the issue
insert short code snippets here 

Other information:

Environment

  • React-admin version:
  • Last version that did not exhibit the issue (if applicable):
  • React version:
  • Browser:
  • Stack trace (in case of a JS error):
Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
    invariant index.tsx:24
    useRoutes index.tsx:642
    Routes index.tsx:344
    React 12
    unstable_runWithPriority scheduler.development.js:468
    React 4
    unstable_runWithPriority scheduler.development.js:468
    React 3
    workLoop scheduler.development.js:417
    flushWork scheduler.development.js:390
    performWorkUntilDeadline scheduler.development.js:157
    js scheduler.development.js:180
    js scheduler.development.js:645
    __require chunk-CEDYW5NB.js:11
    js index.js:6
    __require chunk-CEDYW5NB.js:11
    React 2
    __require chunk-CEDYW5NB.js:11
    js React
    __require chunk-CEDYW5NB.js:11
    <anonymous> react-dom:1
index.tsx:24:19 

Forked On 28 Sep 2022 at 03:30:56

Fzaninotto

Confirmed: react-router 6.4.1 breaks react-admin. Reopening and marking this as a bug.

Commented On 28 Sep 2022 at 03:30:56
Issue Comment

Fzaninotto

[Tabs] Support "auto" as "scrollable" value

When using <Tabs scrollable> with few tabs, the first tab seems not properly aligned to the left. I need the ability to auto-set the scrollable behavior based on the screen width and the number of tabs.

  • [x] This is a v1.x issue.
  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I would like tabs that are scrollable when there isn't enough width, but not scrollable otherwise. The scrollable prop should be automatically enabled based on whether the screen is large enough to display all the tabs or not. Therefore, setting scrollable to true or false doesn't work - I'd need an auto value.

I know I can use withWidth to do that in userland, but it's just such a common need that I believe it should be implemented in core.

Current Behavior

scrollable can only be set to true or false, so the tabs always look bad:

  • if I have scrollable but a very large screen, the first tab isn't properly aligned
  • if I have scrollable=false but a narrow screen, I can't get to the last tab

Context

I'm developing a component that can contain an arbitrary number of tabs - from a few to many. In the latter case, the scrollable option is a must. But when enabled in the first case, the first tab isn't properly aligned on the left:

2018-08-01_1523

Forked On 28 Sep 2022 at 03:25:16

Fzaninotto

@genepaul we're only using MUI's Tab component here. I suggest you open an issue about it on their repository.

Commented On 28 Sep 2022 at 03:25:16

Fzaninotto

Configurable components

Problem

It's too expensive to ask developers to program a simple change in a web app

Solution

Let end-users do some of the changes via a UI.

Enter no-code.

SimpleListConfigurable

Todo

  • [x] Add context to store the inspector state
  • [x] Add generic Inspector component
  • [x] Add Configurable component to wrap existing components
  • [x] ~~Add lightweight client-side templating engine (lodash.template)~~ Use useTranslate as templating engine
  • [x] Update default i18nProvider to make it capable of doing substitutions
  • [x] Add ability to remove all store settings starting with a given string (useRemoveItemsFromStore)
  • [x] Let SimpleList accept template strings as primaryText, secondaryText, and tertiaryText props
  • [x] Make SimpleList configurable
  • [x] Make Page title configurable
  • [x] Add English translations
  • [x] Add French translations
  • [x] Add tests
  • [x] Add documentation

Merged On 28 Sep 2022 at 12:11:45

Fzaninotto

Commented On 28 Sep 2022 at 12:11:45

Fzaninotto

Configurable components

Problem

It's too expensive to ask developers to program a simple change in a web app

Solution

Let end-users do some of the changes via a UI.

Enter no-code.

SimpleListConfigurable

Todo

  • [x] Add context to store the inspector state
  • [x] Add generic Inspector component
  • [x] Add Configurable component to wrap existing components
  • [x] ~~Add lightweight client-side templating engine (lodash.template)~~ Use useTranslate as templating engine
  • [x] Update default i18nProvider to make it capable of doing substitutions
  • [x] Add ability to remove all store settings starting with a given string (useRemoveItemsFromStore)
  • [x] Let SimpleList accept template strings as primaryText, secondaryText, and tertiaryText props
  • [x] Make SimpleList configurable
  • [x] Make Page title configurable
  • [x] Add English translations
  • [x] Add French translations
  • [x] Add tests
  • [x] Add documentation

Forked On 28 Sep 2022 at 12:11:44

Fzaninotto

You're right, done!
On 28 Sep 2022 at 12:11:44

Fzaninotto

Review

Pushed On 28 Sep 2022 at 12:10:56

Fzaninotto

export substituteTokens

Pushed On 28 Sep 2022 at 12:10:56

Fzaninotto

[docs] fix broken links in API

Pushed On 28 Sep 2022 at 08:57:11

Fzaninotto

Merge pull request #8203 from LabisAnargyrou/master

[docs] fix broken links in API

Pushed On 28 Sep 2022 at 08:57:11