v5.3.0

What's new?

• DnD in Upload component.

  Added the ability to use drag and drop (DND) in the Upload component and all the components that use it under the hood, namely:
  FilePictureInput, Dragger, and DraggerInput. To enable DnD, you need to pass the prop "isDraggable".
  An order key is added to each element of the list, the value of which is the index of the element itself.

For example:

<Upload isDraggable {…otherProps} />
<Dragger isDraggable {…otherProps} />

2023-05-18.15.59.55.mov

• The search component for the CRUD index page.

  We can use <SearchField /> in the crud.actions config. Additionally, we can use <TextInput label="Search" name="search" placeholder="Search" type="search" /> for search functionality in crud.filter.fields. It will work as filters, and a label with the search value will appear above the table, which can also be removed from there.

  By default, search is not used anywhere. You can add it to the crud.filter.fields configuration to display the search in the filter drawer, and in crud.actions to display it above the table next to the filter button. The examples above show the components we can use to add search functionality. You can add search in both places simultaneously without breaking anything.

• Ability to customize the bottom popup of the sidebar navigation.

  In the main component, you can pass the prop menuPopupExtraComponents and provide a component to it.

For example:

<Admin 
 menuPopupExtraComponents= {<CustomComponent/>}
 {...otherConfig}
/>

• The ability to auto-refresh the tables

  Pass autoupdateTime to the table configuration in the following manner: by doing so, a play/pause button will appear in the table header, allowing you to control the auto-refresh functionality.

For example:

tableConfig: {
   autoupdateTime: 7000,
},

With this configuration, the table will refresh automatically every 7 seconds unless the pause button is clicked. You can navigate between pages using pagination while keeping the auto-refresh feature enabled, and only the current page will be refreshed.

2023-05-18.16.02.15.mov

What's fixed?

• The logic for hiding the drawer has been updated. Now, the drawer will only close after a successful form submission. Otherwise, it will remain open.
• The color of the popups have changed to match the current theme accordingly.
• Now, the ArrayInput component no longer requires having at least one element. In an empty state, only the button remains visible.
• If you are using the SlugInput component with localization, you can either pass the prop slugLang with the value as the name of the localization, or you can use from="key[localization name]".

For example:

<TranslatableInput
      name="title"
      languages={languages}
      placeholder="Write something..."
      label="Name"
      required
      field="text"
 />
 <SlugInput
      label="Test slug"
      name="slug"
      placeholder="Slug"
      from="title[en]"
      slugLang="en"
 />

• The following bugs have been fixed in ArrayInput:

  "Add" button now functions correctly when clicked. Previously, nothing would happen on the first click, but subsequent clicks would add a block as expected.

  Array Input within Array Input: Interacting with a nested Array Input no longer results in an empty page and console errors.

v5.2.0

Improvements

• (Upload component) new ListType = 'text'
  

• (Upload component) download files with blob if not given onDownload function

• (Upload component) new props: listType: "text", onDownload?: (file) => any, showDownloadIcon?: boolean
  showDownloadIcon = true is set to all Upload by default, url looks in each file, if it exists, the file download button is active.
  When you click "download" - tries to get the file and save it to the computer, catches an error in Notification.
  It is possible to throw the onDownload prop in Upload, and perform custom manipulations (in this case, the default function is replaced by onDownload)

Fixes:

• (TranslatableInput) added the ability to pass props to the child component TranslatableInput.
  In the field, we specify the name of the child component (editor, text, or multiline text), and in props, we pass all the properties that are required for the child component.
  For example:

<TranslatableInput
    ...
    field="editor"
    props={{
        onImageUpload: onImageUpload,
        imageUploadUrl: imageUploadUrl,
        ...
    }}
/>

v5.1.1

Improvements:

• Added OAuth integration. With this feature, you can now easily authenticate and authorize users using their existing social media or third-party accounts.

v5.0.3

Improvements:

• Added an example of a server on Express JS
• Added a new Notifications component.

• Added new fields for more convenient multilingual development. The component that we called Translatable.

• When you click on actions, you can now call confirmation. It is convenient, for example, to hang on the delete button.

• Improved localization, added new fields to locale.form.fields that LocaleContextProvider accepts.

Fixes:

• Added custom onChange event processing to the Ajax Select Input component.
• Removed side margins in the mobile version
• Optimized the download. Added the useIdentityState hook, which simply gives the user either null and does not send unnecessary requests. A description of the use was added to the readme
• If the number of elements (total) in the table is less than the page_size value (by default it is 10), then pagination is hidden.

• The routing was fixed. Now direct links work

v4.0.0

features:

• SlugInput form field with showcase
• AjaxSelectInput form field with showcase
• fetch filters initial data depending on selected options
• (ui/Select) locale, loading state
• (CRUD) extract common actions for use in the tableActions
• (DataTable) ability to set rowSelection config and display actions
• (CRUD) table custom actions
• ability to setup table config in crud;
• (CRUD) ability to show components before/after DataTable

fixes:

• (CRUD) refresh table data on drawer close
• (ui/Select) placeholder disappearing effect
• (CRUD) make create.title and update.title optional
• (CRUD) replace index.filterButtonText with filter.topToolbarButtonText
• (ui/Table) shadow corner radii
• (AppliedFilters) remove marginBottom when empty
• can't set only one filter input
• table.dndRows moved to index.tableConfig.dndRows
• rename tableOptions -> tableColumns
• (CRUD, locale) pass table, pagination, actions locale settings
• add TopToolbar export to wrap custom actions

docs:

• Roles example (readme.md)
• Custom Interface demo
• CRUD with custom drawer demo
• Bulk actions demo
• Table without actions demo
• Advanced Edit Page demo
• Base Crud Page demo

v3.0.0

• Menu/SubMenu/MenuItemLink components instead of object representation
• feat: Badge component with showcase
• feat: ability to show badges in menu
• feat: ability to setup custom theme presets
• docs: Installation & Usage documentation

v1.4.0

• (ui) TimePicker
• (form, fields) TimePickerInput
• (upload) fix file picker trigger area

v1.1.0

• user avatar: capitalize letters
• ui: new Editor component
• form fields: new EditorInput component