# Package IGD.UI

## Usage

Most components require a productdata session to work. This session can be provided by either:

-   creating a SessionContext.Provider with a session in the react tree above the components
-   supplying a session directly as the session prop
-   initializing the compat module of ProductData with a session

## PropertyEditor

### Examples

**Basic usage:**

```tsx
import { PropertyEditor, Property } from "@intelligentgraphics/igd.ui";

<PropertyEditor>
	{({ properties }) => (
		<>
			{properties.map(propertyId => (
				<Property identifier={propertyId}>
					{({ Text, Values, setPropertyValue }) => (
						<div>
							<span>{Text}</span>
							<span>Values:</span>
							<div>
								{Values.map(({ Value }) => (
									<div
										onClick={() => setPropertyValue(Value)}
									>
										{Value}
									</div>
								))}
							</div>
						</div>
					)}
				</Property>
			))}
		</>
	)}
</PropertyEditor>;
```

**Customizing behaviour:**

The merge behaviour or label creation can be changed by providing a custom PropertyGrouper,
which needs to correspond to the PropertyGroups.PropertyGrouper type.

Already available options are:

-   byComId (doesn't do any merging and simply creates a PropertyGroup for each article)
-   bySource (tries to merge properties of articles of the same catalogs)
-   buildPropertyGroups (can be used to further customize bySource merging)

```tsx
import {
	PropertyEditor,
	Property,
	PropertyGroupers,
} from "@intelligentgraphics/igd.ui";

// returns either a group for of a single article (in case a source contains only one article) or only the merged properties for each source
const myPropertyGrouper: PropertyGroupers.PropertyGrouper = sources =>
	buildPropertyGroups({
		sources,
		displayMode: PropertyGroupers.GroupContent.onlyMerged,
	});

<PropertyEditor createPropertyGroups={myPropertyGrouper}>
	{
		// ...
	}
</PropertyEditor>;
```

## Catalog

The catalog consists of multiple components:

**CatalogComponent**

Provides informations and fetching capabilities for catalog views inside of its content.

**CatalogView**

A view is the specific fetching component for a single catalog view structure. Its inherits settings and uses methods provided by the catalog component via context.

By default, this component will fetch the flat content of a path. This behaviour can be changed by providing a fetchContent prop.

## MultiArticle Components

### Examples

The MultiArticle components make heavy use of react context, which means that in order for some of them to work, they need to be declared inside the body of another component.

Every MutliArticle.PropertyElement and every MultiArticle.WithFilter decorated component have to be declared inside of an MultiArticle.Filter, which has to be declared inside of a MultiArticle.Context.

**Basic Usage**:

```tsx
<MultiArticle.Context package={multiArticlePackage}>
	<div>
		<MultiArticle.Filter root="Chair" filterMode="Cascade">
			<MultiArticle.PropertyElement
				property="seatWidth"
				// all these props will be provided through the property component. They are specific to the declared property type (seatWidth in this case)
				// calling the onChange function with a value will change the value of this property inside the filter's configuration
				render={({ values, selectedValue, onChange }) => (
					<div>
						<div>
							<label>Selected seat width: {selectedValue}</label>
						</div>
						<div>
							<label>Available values:</label>
							<div>
								{values.map(({ value }) => (
									<div
										key={value}
										className={
											value === selectedValue
												? "selected"
												: undefined
										}
										onClick={() => onChange(value)}
									>
										{value}
									</div>
								))}
							</div>
						</div>
					</div>
				)}
			/>
		</MultiArticle.Filter>
	</div>
</MultiArticle.Context>
```

**Usage with dynamic properties and roots**:

```tsx
<MultiArticle.Context package={multiArticlePackage}>
	<div>
		<MultiArticle.Filter root={rootFromSomewhereElse} filterMode="Cascade">
			{({ properties }) =>
				properties.map(prop => (
					<MultiArticle.PropertyElement
						property={prop}
						render={({ values, selectedValue, onChange }) => (
							<div>
								<div>
									<label>
										Selected {prop}: {selectedValue}
									</label>
								</div>
								<div>
									<label>Available values:</label>
									<div>
										{values.map(({ value }) => (
											<div
												key={value}
												className={
													value === selectedValue
														? "selected"
														: undefined
												}
												onClick={() => onChange(value)}
											>
												{value}
											</div>
										))}
									</div>
								</div>
							</div>
						)}
					/>
				))
			}
		</MultiArticle.Filter>
	</div>
</MultiArticle.Context>
```

**Filter**

By default, the filter component will manage the its own configuration.

**PropertyElements**

Property components can declared using:

1.  the PropertyElement component

```tsx
<MultiArticle.PropertyElement
	property={"Breite"}
	render={({ values, selectedValue, onChange }) => (
		<>
			{
				// ...
			}
		</>
	)}
/>
```

2.  the WithFilter higher order component

```tsx
const MyComponent = ({values, selectedValue, onChange}) => (
...
)

const MyPropertyComponent = MultiArticle.WithFilter()(MyComponent);

-> <MyPropertyComponent property="Breite"/>
```

## History

### 4.5.0

-   updated dependencies
-   added display name to react contexts
-   Catalog: changed igxrloader to be optional

### 4.5.0-alpha.0

-   Catalog: changed igxrloader to be optional

### 4.4.0

-   added support for locale additionally to language
-   PropertyEditor: added support for property groups
-   PropertyEditor: extracted context into separate file

### 4.4.0-alpha.1

-   added support for locale additionally to language

### 4.4.0-alpha.0

-   PropertyEditor: added support for property groups
-   PropertyEditor: extracted context into separate file

### 4.3.1

-   fixed faulty esnext folder

### 4.3.0

-   added lightweight TotalPrice component and hook
-   changed NotificationCenterSubscription to support changing callback functions
-   PropertyEditor: added PropertyValueSections hook and Component

### 4.3.0-alpha.2

-   added missing export

### 4.3.0-alpha.1

-   added lightweight TotalPrice component and hook
-   changed NotificationCenterSubscription to support changing callback functions

### 4.3.0-alpha.0

-   PropertyEditor: added PropertyValueSections hook and Component

### 4.2.0

-   PropertyEditor: removed own memoizeOne
-   added esnext building

### 4.2.0-alpha.0

-   PropertyEditor: removed own memoizeOne
-   added esnext building

### 4.1.0

-   PropertyEditor: added context value memoization
-   added some documentation for the catalog
-   moved IGXE unit manipulation functions into IGXE.Units
-   PropertyEditor: added more documentation
-   PropertyEditor: added mode prop
-   Basket: added usage of session context basket
-   added basket to SessionContext
-   added ApplicationStateSubscription
-   PropertyEditor: added group argument to PropertySorter

### 4.1.0-alpha.2

-   added some documentation for the catalog
-   moved IGXE unit manipulation functions into IGXE.Units
-   PropertyEditor: added more documentation
-   PropertyEditor: added mode prop

### 4.1.0-alpha.1

-   Basket: added usage of session context basket
-   added basket to SessionContext

### 4.1.0-alpha.0

-   added ApplicationStateSubscription
-   PropertyEditor: added group argument to PropertySorter

### 4.0.3

-   fixed apply targets being found for values on deep properties
-   PropertyEditor: added groupProperySorting and sortGroupProperties

### 4.0.2

-   PropertyEditor: added minGroupPropertyReferenceCount to grouper build options
-   Catalog: added session prop to Component

### 4.0.1

-   MultiArticle: fixed a type issue
-   PropertyNavigator: fixes
-   changed property navigator to not render children directly, but only call it as a function

### 4.0.0-alpha.20

-   Catalog: fixed new path being returned while update is still in progress
-   MultiArticle: added package prop to Filter
-   MultiArticle: rewrote WithFilter with hooks
-   MultiArticle: changed components to use context hook

### 4.0.0-alpha.19

-   PropertyEditor: fixed rest properties for intersection merge
-   PropertyEditor: removed filtering of transfertargets for non property editor targets

### 4.0.0-alpha.18

-   PropertyEditor: added choiceListMergeBehaviour option
-   PropertyEditor: added deep cloning group property sub properties
-   PropertyEditor: fixed undefined handling in Property

### 4.0.0-alpha.17

-   PropertyEditor: added getPropertyByIdentifier to component view props
-   PropertyEditor: added sub property merging
-   PropertyNavigator: updated sub property handling
-   PropertyEditor: removed complicated property state handling. added support for IGXE sub properties

### 4.0.0-alpha.16

-   Catalog: removed circular runtime dependency

### 4.0.0-alpha.15

-   moved default content fetcher into seperate file
-   added Localization component and useLocalization hook
-   replaced component language params with session language

### 4.0.0-alpha.14

-   fixes for core changes

### 4.0.0-alpha.13

-   rewrote catalog
-   added getComIdsByProperty to PropertyEditor context
-   added null as possible render return for property children

### 4.0.0-alpha.12

-   added price formatter usage

### 4.0.0-alpha.11

-   removed manipulation of property value property

### 4.0.0-alpha.10

-   added clearPropertyState to PropertyEditor context
-   fixed typo
-   added subPropertyBehaviour to PropertyEditor props
-   added handling of sub properties inside applyToScene

### 4.0.0-alpha.9

-   added basic sub property support to property editor

### 4.0.0-alpha.8

-   added useArticleSubscription
-   fixed currencies of single items in basket, added currency decimals

### 4.0.0-alpha.6

-   [*] updated version logs
-   added pricehelper
-   fixed currencies of single items in basket, added currency decimals
-   outsourced getLocalizedDecimal() to igd.core

### 4.0.0-alpha.5

-   changed PropertyEditor label creation to prefer article name
-   added name to Set and Article BOM Component Entries

### 4.0.0-alpha.4

-   added undefined session warning for session context users
-   added some usage informations

### 4.0.0-alpha.3

-   fixed basket component basket prop
-   added basket prop to basket component
-   updated ig.gfx dependencies

### 4.0.0

-   added new SessionContext
-   replaced all references to Dispatcher with session context subscription

### 4.0.0-alpha.2

-   added session generic to SessionContext

### 4.0.0-alpha.0

-   added property navigator
-   reimplemented articlestate and noficitation center subscription with hooks
-   added SessionContext

### 3.6.2

-   PropertyEditor: removed subscription from Component. added hooks implementation of Property
-   PropertyEditor: fixed target articles being switched after property change
-   added property navigator

### 3.6.1

-   added export for withContext
-   added withContext function
-   updated version logs

### 3.6.0

**BasketComponent**

-   changed it to use ProductData NotificationCenter
-   added subscription null check in componentWillUnmount
-   fixed set prices

**CatalogComponent**

-   added showAllItems mode
-   changed igxr loader to be required

**PropertyEditor**

-   fixed unit handling in applyToScene
-   replaced findApplyTargets with ProductData version
-   added support for invisible values
-   added NotificationCenterSubscription component
-   added ArticleStateSubscription component
