@synerise/ds-factors
@synerise/ds-factors
npm i @synerise/ds-factors
@synerise/ds-factors

@synerise/ds-factors

A UI Design Language and React UI library powered by Synerise team https://design.synerise.com

by Synerise

0.16.4 (see all)License:ISCTypeScript:Built-In
npm i @synerise/ds-factors
Readme

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,
                  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-
getPopupContainerOverridePopup container function for child tooltips and dropdowns(trigger: HTMLElement \ null) => HTMLElement;-
onActivateCallback called when user opens dropdown(fieldType: string) => void-
onChangeValueCallback called when user change value(value: FactorValueType) => void-
onDeactivateCallback called when user closes dropdown() => 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-
inputPropsArray of available props of inputInputProps-

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
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate