Function: bindSetToCssClasses()

bindSetToCssClasses(target, exclusions, ...sources): Subscription | undefined

Defined in: src/sdk/components/FSComponent.ts:1125

Binds a target subscribable set to CSS classes. The binding process takes CSS classes from zero or more sources and adds them to the target. Any class that is included in at least one source will be added to the target. If a one or more sources define dynamic sets of classes that change over time, then changes in these sources will be reflected in the classes that are added to the target as long as the subscription returned by this function is resumed.

Manually adding or removing classes from the target subscribable set after a binding has been set up can result in conflicts with the classes added via the binding if not done carefully. It is recommended to add exclusions to the binding for classes that you plan to manipulate manually in the target.

When binding dynamically defined classes, it is recommended to only set up one binding per target subscribable set. This will prevent potential conflicts where multiple bindings are attempting to add and/or remove the same classes from the target.

Parameters

Parameter	Type	Description
target	MutableSubscribableSet<string>	The target subscribable set to bind.
exclusions	Iterable<string, any, any> | undefined	CSS classes to exclude from the binding. Excluded classes will not be added to the target subscribable set, even if they appear in a source. Each string returned by the iterable should specify exactly one excluded class.
...sources	(ClassProp | undefined)[]	Sources of CSS classes to add to the target subscribable set. Up to 32 sources are supported. The order of sources passed to this function does not matter.

Returns

Subscription | undefined

A subscription that controls the binding of all dynamically defined CSS classes in the sources, or undefined if there are no dynamically defined CSS classes. The subscription is returned in a resumed state. Pausing the subscription will stop changes in the sources from being forwarded to the target subscribable set until the subscription is resumed again. Destroying this subscription will permanently stop changes in the sources from being forwarded to the target.

Throws

Error if more than 32 sources are specified.

Examples

Binding classes:

FSComponent.bindSetToCssClasses(
  target,
  undefined,
  SetSubject.create(['class-1', 'class-2']),
  { 'class-2': false, 'class-3': false, 'class-4': true },
  'class-3 class-5'
);
// target now contains: 'class-1', 'class-2', 'class-3', 'class-4', 'class-5'

Using exclusions:

FSComponent.bindSetToCssClasses(
  target,
  ['class-1', 'class-2'],
  SetSubject.create(['class-1', 'class-2']),
  { 'class-2': false, 'class-3': false, 'class-4': true },
  'class-3 class-5'
);
// target now contains: 'class-3', 'class-4', 'class-5'

Binding dynamic classes:

const source1 = SetSubject.create<string>();
const source2 = {
  'class-2': Subject.create(false),
  'class-3': Subject.create(false),
  'class-4': Subject.create(false),
};
const source3 = Subject.create('class-3');

FSComponent.bindSetToCssClasses(
  target,
  undefined,
  source1,
  source2,
  source3
);
// target now contains: 'class-3'

source1.add('class-1');
source1.add('class-2');
// target now contains: 'class-1', 'class-2', 'class-3'

source2['class-2'].set(true);
source2['class-4'].set(true);
// target now contains: 'class-1', 'class-2', 'class-3', 'class-4'

source1.clear();
// target now contains: 'class-2', 'class-3', 'class-4'

source3.set('class-5 class-6');
// target now contains: 'class-2', 'class-4', 'class-5', 'class-6'