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,
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

PropertyDescriptionTypeDefault
autocompleteTextArray of available autocomplete suggestions (only if textType is equal to autocomplete){options: string[]}-
availableFactorTypesArray of available factor typesFactorType[]-
defaultFactorTypeDefault factor typeFactorType-
formulaEditorFormula editor render in modal when factory type is equal to formulaReact.ReactNode-
onChangeValueCallback called when user change value(value: FactorValueType) => void-
openedWhether if dropdown should opens from outside of componentbooleanfalse
parametersOptions for parameters listParameterOptions-
selectedFactorTypeSelected factor typeFactorType-
setSelectedFactorTypeCallback called when user selects factor type(factor: FactorType) => void-
textsTranslations objectFactorsTexts-
textTypeVariant of text type input (autocomplete \ expansible \ default )stringdefault
unavailableFactorTypesArray of excluded factor typesFactorType[]-
valueValueFactorValueType-
withoutTypeSelectorWhether if hide factor type selectorboolean-

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

PropertyDescriptionTypeDefault
buttonIconIcon in buttonReact.ReactNode-
buttonLabelLabel of buttonstring \ React.ReactNode-
groupsArray of parameter groupsParameterGroup[]-
itemsArray of parametersParameterItem[]-
showAllGroupWhether to show all groupsbooleanfalse