@epam/assets

UUI Assets package

This package is a part of EPAM UUI library.

@epam/assets contains variety of assets, which are usable without React:

• icons set
• SCSS and LESS styles and mixins

Changelog

4.0.0 - 07.05.2021

What’s New

• [LazyDataSource] now supports nesting (grouping, trees) with lazy loading.

  Quick start:

  • pass the getChildCount(item): number prop. It should return an either:

    • exact number of item's children (a server can return this as an parent's field)
    • a guessed/average number of children (e.g. 1) (this can result more API calls if items are unfolded by default)

  • update the 'api' callback to accept a second argument. When children are needed, we'll pass a parent entity in this new argument. Change your callback to perform request to server to retrieve children.

    • if you have different server APIs for parent and children, just tweak your 'api' callback like this:

      api: (rq, ctx) => {
          if (!ctx.parent)
              return callParentApi(rq);
          else
              return callChildrenApi(rq);
      }
      

    • if you want to retrieve children as parent's field, you can return them in api callback directly from parent's field, like: Promise.resolve({ items: ctx.parent.chidren, count: ctx.parent.children.length })

  • [Breaking Change] Item lists caching is moved from LazyDataSource to LazyTreeView. Items by ID cache is still in the LazyDataSource. We also stoped caching any previous loads of lists. This means that:

    • there can be a bit more load on server
    • there can be issues, if you rely on LazyDataSource internal cache somehow

  • [Breaking Change] LazyDataSource's 'cacheSize' prop is removed. There's no more lists cache in the LazyDataSource (except the items by id cache)

  • [Breaking Change] DataSources and DataSourceView internal APIs changed. BaseDataSourceProps, [Lazy|Array]DataSourceParams, [Lazy|Array]DataSourceOptions, [Lazy|Array]ViewParams, [Lazy|Array]ViewOptions interfaces are merged into [Lazy|Array]DataSourceProps and [Lazy|Array]ViewProps. Applications which implements it's own DataSources, or leverage on these interfaces somehow, might need to update.

  • [Breaking Change] LazyDataSource always query from the start. Before, it was able to query the middle of the list, without querying start items. This can't be supported for 2-nd level of lists, and we don't see much use of this feature. Contact us if you really need this behavior.

  • [Breaking Change] LazyDataSource's generic parameters order changed from TItem, TFilter, TId, to a common TItem, TId, TFilter.

• DataRowProps - extended with 'isLastChild' and 'path' props. isLastChild is true, if this row is the last of it's parent's children. Path prop contains all row's parents' ids and isLastChild prop.

  These props are required to implement tree components, which renders lines connecting children with parents.

  Both Lazy and ArrayDataSources supports these new props.

• [Forms] Forms validation - better cross-fields dependencies. 'validate' function in Metadata now receives all parent objects in path as argument. Each validator receives N arguments - first is the value itself, then it's container, and down to the root object. You can use this to make validation dependencies between items. For example:

    const value = { array: [{ id: 100, name: 'abc' }, { id: 101, name: 'bcd' }] };
    const nameValidator = (name, item, array) => [item.id > 100 && name.length < 2 && "Items with ID > 100 should have names longer than 2"];
    const meta = { array: { all: { props: { name: { validators: [nameValidator] }}}}};
  

• [Form]: Added server validation mechanism. If you need to get form validation state from server-side, your onSave api should return object like { validation?: ICanBeInvalid }

• [Tables]: Added columns resizing and reordering possibility:

  • Added 'allowColumnsReordering' and 'allowColumnsResizing' props to the DataTable and DataTableHeaderRow.
  • Columns config was moved to the DataTable value.
  • [Breaking Change]: Removed 'settingKey' prop form DataTable, if you are using it for storing your columns in localStorage — implement it manually on your side via svc.uuiUserSettings context.

• [Tooltip] & [Dropdown]: Popper.js updated to v.2.x, added 'hide' modifier to hide body when target scrolled outside view

  • [Breaking Change]: In Popper 2 modifiers is now an array of objects, instead of an object where each property was the modifier name in the previous version. More information.

• [Promo]: Added 'cell' mode for components which can be placed in table row

• [Accordion]: Added "padding" and "renderAdditionalItems" props

• [AnalyticContext]: add ip anonymization for google analytic

• [AnalyticsContext]: add includeReferrer: true, includeUtm: true, saveParamsReferrerOncePerSession: false options for amplitude

• [TimePicker]: added handling of invalid values, added placeholder

• [SlateRTE]: show image toolbar on image isFocused

• [PickerInput]: added PickerItem component, added 48 size, refactored footers according design, changed default prop 'minBodyWidth' to 360

• [DataTableCell]: added prop alignAddons to align checkbox & folding arrows to the top or center

• [Badge]: added transparent and semitransparent fill; Added more sizes;

What’s Fixed

• [LabeledInput]: fixed a bug of cropping the text of the label when it is located to the left, when the child has a width of 100% in the styles
• [ErrorHandler]: reset api error when router is changed
• [DatePicker]: fixed handling of invalid value input when filter is active
• [Tooltip]: remove pointer-events: none; from tooltip content container
• [RadioInput]: fixed RadioInput point position when zoom is active
• [TextInput] & [SearchInput]: fixed losing focus after click on 'cancel' icon
• [PickerInput]: set clickable modifier on picker body
• [DatePicker]: set clickable modifier on datePicker body
• [Table]: fixed alignment in the table row from the center to top
• [PickerInput]: fixed PickerInput behavior in entity mode and with custom id
• [PickerInput]: fix removing 'N items selected' tag when disableClear=true
• [Accordion]: fixed style according design Siarhei_Dzeraviannik 3/30/21, 12:46 PM
• [RTE]: fixed image/pfd/video block inserting into text paragraph, when it delete all text and return it back when image was deleted
• fixed contrast colors in loveship variables
• fixed line-heights & font-sizes according design
• fixed some typings