Find non-functional properties

[Fritz Lekschas]

I noticed that we haven't been super strict in allowing properties to be functional. Functional meaning that the property can be set to a callback function.

Can you please go through our properties and find the ones that are not functional yet and indicate which ones could be item/preview or pile specific?

Item/preview-specific means the callback signature would be as follows:

(itemState, itemId, itemIndex, itemInstance) => { ... }

Pile-specific means the callback signature would be as follows:

pileState => { ... }

If neither of the two would fit, please create a simple pseudo function like above to describe how the callback signature could look like.

[Xinyi Zhou]

Item-specific:

• itemSize

Pile-specific:

• pileBackgroundColor*
• pileBackgroundOpacity*
• pileBorderColor*
• pileBorderOpacity*
• pileLabelAlign
• pileLabelFontSize
• pileLabelStackAlign

Preview-specific:

• previewBackgroundColor
• previewBackgroundOpacity
• previewBorderColor
• previewBorderOpacity
• previewPadding

But the preview properties are needed when creating the previews, so I think the callback signature could be like:

(itemState, itemId, itemIndex) => { ... }

[Fritz Lekschas]

Great thanks. I think itemSize and the pile specific callback functions should be straight forward to add right? If so, could you start adding those? :)

Since we're going to reuse the same code for checking if something is a function all over the place I am suggesting to add the following helper methods to the utils.

const getItemProp = (property, itemState, itemIndex = 0) => isFunction(property)
  ? property(itemState, itemState.id, itemIndex)
  : property;

const getPileProp = (property, pileState) => isFunction(property)
  ? property(pileState)
  : property;

To get an item property like itemSize we could then do

size = getItemProp(itemSize, itemState, itemIdx);

Regarding the preview properties, do you mean the issue is that the properties can't be adjusted after the creation of the preview? I think in terms of the signature, preview props should have the same callback signature as item props as they both are related to the same item.

[Xinyi Zhou]

Hi Fritz, I have a question with itemSize property. Right now we are using it to scale items, so it's like a size range for all the items. If we set it to an item specific callback function, then how should we use it?

[Fritz Lekschas]

Good point. I realized that itemSize is not actually item-specific. Right now we treat it as a global property. I guess the issue is a little bit the naming 😅itemSize is really the max item size and itemSizeRange is the relative item size range, right? So if itemSizeRange is [1,1] all items should have the same size.

For pile-specific scaling we have pileScale. So let's not change itemSize for now.