@synerise/ds-factors NPM

id: factors

title: Factors

Factors UI Component

Installation

npm i @synerise/ds-factors
or
yarn add @synerise/ds-factors

Usage

import Factors from '@synerise/ds-factors'

<Factors
    selectedFactorType='text'
    setSelectedFactorType={(type) => {} }
    value='Value'
    onChangeValue={(value) => {}}
    textType='default'
    defaultFactorType='text'
    autocompleteText={{
      options: ['First name', 'Last name', 'City', 'Age', 'Points']
    }}
    unavailableFactorTypes={['number', 'formula']}
    parameters={{
      buttonLabel: 'Parameter',
      buttonIcon: <VarTypeStringM />,
      groups: [{
                  name: 'Recent',
                  id: 1,
                  allowEmpty: true,
                  defaultGroup: true,
                },{
                  name: 'All',
                  id: 2,
                  subGroups: [{
                    name: 'Attributes',
                    id: 3,
                    icon: <FolderM />
                  }],
      items: [{
                  id: 0,
                  name: 'First name',
                  groupId: 1,
                  icon: <VarTypeStringM />,
                },
                {
                  id: 1,
                  name: 'Last name',
                  groupId: 1,
                  icon: <VarTypeStringM />,
                },
                {
                  id: 2,
                  name: 'City',
                  groupId: 1,
                  icon: <VarTypeStringM />,
                },]
    }}
    withoutTypeSelector={false}
    formulaEditor={<div>Formula editor</div>}
    texts={{
        datePicker: {
            apply: 'Apply',
            clearTooltip: 'Clear',
            inputPlaceholder: 'Select date',
            now: 'Now',
          },
        dynamicKey: {
            keyPlaceholder: 'Key',
            valuePlaceholder: 'Value',
          },
        formula: {
            buttonPlaceholder: 'Define formula',
            defaultName: 'Formula'
          },
        parameter: {
            searchPlaceholder: 'Search',
            noResults: 'No results',
          },
        valuePlaceholder: 'Value',
        modalApply: 'Apply',
        modalCancel: 'Cancel',
        modalTitle: 'Value'
    }}
/>

Demo

API

Property	Description	Type	Default
autocompleteText	Array of available autocomplete suggestions (only if textType is equal to `autocomplete`)	{options: string[]}	-
availableFactorTypes	Array of available factor types	FactorType[]	-
defaultFactorType	Default factor type	FactorType	-
formulaEditor	Formula editor render in modal when factory type is equal to `formula`	React.ReactNode	-
getPopupContainerOverride	Popup container function for child tooltips and dropdowns	(trigger: HTMLElement \ null) => HTMLElement;	-
onActivate	Callback called when user opens dropdown	(fieldType: string) => void	-
onChangeValue	Callback called when user change value	(value: FactorValueType) => void	-
onDeactivate	Callback called when user closes dropdown	() => void	-
opened	Whether if dropdown should opens from outside of component	boolean	false
parameters	Options for parameters list	ParameterOptions	-
selectedFactorType	Selected factor type	FactorType	-
setSelectedFactorType	Callback called when user selects factor type	(factor: FactorType) => void	-
texts	Translations object	FactorsTexts	-
textType	Variant of text type input (`autocomplete` \ `expansible` \ `default` )	string	`default`
unavailableFactorTypes	Array of excluded factor types	FactorType[]	-
value	Value	FactorValueType	-
withoutTypeSelector	Whether if hide factor type selector	boolean	-
inputProps	Array of available props of input	InputProps	-

FactorType

All available factor types: text, number, parameter, contextParameter, dynamicKey, formula, array, date,

FactorValueType

Type of value depends on current factor type and can contain values: string \ number \ Date \ undefined \ DynamicKeyValueType \ FormulaValueType \ ParameterValueType;

DynamicKeyValueType

{ key: React.ReactText; value: React.ReactText }

FormulaValueType

{ name: string; value: string }

ParameterValueType

{ type: string; icon: string; name: string; id: React.ReactText; }

ParameterOptions

Property	Description	Type	Default
buttonIcon	Icon in button	React.ReactNode	-
buttonLabel	Label of button	string \ React.ReactNode	-
groups	Array of parameter groups	ParameterGroup[]	-
items	Array of parameters	ParameterItem[]	-
selectedButtonColored	Whether to use green custom color if parameter is selected	boolean	-
maxSearchResultsInGroup	How many search results should be shown per group	number	4

@infinitebrahmanuniverse/nolb-_syn @everything-registry/sub-chunk-889 @zalastax/nolb-_syn @synerise/ds-condition @synerise/ds-context-selector @synerise/design-system

1 month ago

1 month ago

1 month ago

3 months ago

4 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

2 months ago

2 months ago

2 months ago

1 month ago

1 month ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

7 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago