Affiliate Search

🔹 Description

Affiliate Search is a react component that can be used to filter results from a REST API sources.

🔹System Dependencies

🔹 Installation

The package can be installed via npm:

npm install empower-affiliate-search --save

🔹 Standard Affiliate

Configuration

const  AFFILIATE_OPTIONS = [
	{
		"label": "Fruit Name",               
		"value": "fruit_name",                
		"type": "string",
	},
	{
		"label": "Status",
		"value": "fruit_status",
		"type": "multiple",
		"categoryOptions": [
			{
				"label":  "Fresh",
				"value":  "fresh"
			},
			{
				"label":  "Rotten",
				"value":  "rotten"
			}
		]
	},
]



const  extractValueFromAffiliate  = (val) => {
	...Statement
} 

<AffiliateSearch
	options={AFFILIATE_OPTIONS} 
	getValue={(val)  =>  extractValueFromAffiliate(val)}
/>

🔹 Affiliate Search with Default Value

Configuration

const DEF_VALUE  =  [
	{
		type:  'string',
		category:  'fruit_name',
		value:  'Orange',
		categoryLabel:  'Fruit Name',
		valueLabel:  'Orange',
	},
	{
		type:  'multiple',
		category:  'fruit_status',
		value:  'fresh',
		categoryLabel:  'Status',
		valueLabel:  'Fresh',
	},
] 

<AffiliateSearch
	options={AFFILIATE_OPTIONS} 
	getValue={(val)  =>  extractValueFromAffiliate(val)}
	defaultValue={DEF_VALUE}
/>

🔹Affiliate Search with Custom Options Not Found

Configuration

<AffiliateSearch
	options={AFFILIATE_OPTIONS} 
	getValue={(val)  =>  extractValueFromAffiliate(val)}
	customNotFoundOptionDisplay="We cannot find the option"
/>

🔹 Properties

Parameter	Data Type	Constraint	Description
disabled	Boolean	Optional	Define if the component is disabled or not
options	ArrayObject \| null	Required	Define the options in the affiliate Object Properties: categoryOptions: [{label: string, value: string}...] - Define the options for affiliate with select type label: string - The display label of the option type: string - The options type. Value can be either "string" or "multiple" value: string - The option key
placeholder	String	Optional	Sets the display placeholder of the affiliate
defaultValue	ArrayObject	Optional	Sets the default value of the affiliate Object Properties: type: string - The default value type. Value can be either "string" or "multiple" category: string - The option key value: string - The option default value categoryLabel: string - The display label of the option key valueLabel: string - The option default value display label
type	String	Optional	Sets the type of the affiliate. Setting this to "single" will result to affiliate will only accept one (1) option value
disableTextInput	Boolean	Optional	Use this to disable the option value upon enter
customNotFoundOptionDisplay	JSX Element \| String	Optional	Provide a custom display if the searched option for the affiliate filter cannot be found
isAffiliateDropdown	Boolean	Optional	Sets the component as a dropdown
iconPlacement	String	Optional	Icon placement of the buttons
getValue	Function	Required	A function to trigger upon changing the affiliate value. The option value can be extracted in the function arguments

🔹 References

Repository Link: https://gitlab.com/empowerteams/affiliate-search.git

NPM Package: npm: empower-affiliate-search

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git