Skip to content

Latest commit

 

History

History
316 lines (211 loc) · 8.15 KB

person-finder.md

File metadata and controls

316 lines (211 loc) · 8.15 KB
Raw

PersonFinder

An autocomplete search for persons that can be customized to work with arbitrary data.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { PersonFinder } from 'chayns-components';

// ...

<PersonFinder {...} />

Custom Finder

If you want to build your own autocomplete finder, e.g. for searching emails, you can use the SimpleWrapperContext and with object mapping and custom props. The object mapping looks like the following:

{
    showName: 'emailTitle',
    identifier: 'emailId',
    search: ['emailTitle', 'emailText', 'emailSenderName'],
    imageUrl: 'emailSenderImageUrl',
}

In contextProps you can then set the following props:

  • data
  • hasMore
  • onLoadMore
  • onInput

Clearing the PersonFinder

To clear the PersonFinder you can use the clear()-method on a reference to the PersonFinder-component:

const Finder = () => {
    const personFinderRef = useRef();

    function clear() {
        if (personFinderRef.current) {
            personFinderRef.current.clear();
        }
    }

    return (
        <PersonFinder
            {/* ... */}
            ref={personFinderRef}
        />
    );
};

Positioning of the Autocomplete Window

If the autocomplete window is not correctly positioned, check if you have a <div class="tapp">-element as a wrapper around your app.

If not, add it or specify the parent-prop on the PersonFinder.

Props

The PersonFinder-component takes the following props:

Name Type Default Required
placeholder string ''
multiple boolean false
showPersons boolean true
showSites boolean false
uacId number
locationId number
reducerFunction function
context { Provider: function, Consumer: object } PersonsContext
onChange function
disableFriends boolean false
className string
defaultValue { name: string, firstName: string, lastName: string, siteId: string, personId: string } | string
defaultValues Array<{ name: string, firstName: string, lastName: string, siteId: string, personId: string }> []
onAdd function
onRemove function
onInput function
contextProps object
max number
values array
value string

placeholder

placeholder?: string

The placeholder to show when the input field is empty.

multiple

multiple?: boolean

Wether the PersonFinder should allow multiple persons or sites to be put in.

showPersons

showPersons?: boolean

Wether the PersonFinder should show persons in its autocomplete window.

showSites

showSites?: boolean

Wether the PersonFinder should show sites in its autocomplete window.

uacId

uacId?: number

The id of a UAC group to search persons in.

locationId

locationId?: number

The locationId of a UAC group to search persons in.

reducerFunction

reducerFunction?: function

A function to reduce the results.

context

context?: { Provider: function, Consumer: object }

The context of the PersonFinder. Take a look at the Custom Finder paragraph.

onChange

onChange?: function

This callback is invoked when a person is selected, removed or the PersonFinder is cleared.

disableFriends

disableFriends?: boolean

Wether the display of friends with an empty input should be disabled.

className

className?: string

A classname string that will be applied to the wrapper <div>-element.

defaultValue

defaultValue?: { name: string, firstName: string, lastName: string, siteId: string, personId: string } | string

The default value of the input field. Can be a string or a person/location specified with an object.

defaultValues

defaultValues?: Array<{ name: string, firstName: string, lastName: string, siteId: string, personId: string }>

The default values of the input field if multiple is true. Can be strings or an array of persons/locations specified with an object.

onAdd

onAdd?: function

A callback that is invoked when a person is added to the PersonFinder. Only works when multiple is true

onRemove

onRemove?: function

A callback that is invoked when a person is removed from the PersonFinder. Only works when multiple is true

onInput

onInput?: function

The onInput-callback for the <input> element of the PersonFinder.

contextProps

contextProps?: object

Props for the context.

max

max?: number

The maximum amount of people selected at once. Only has an effect when multiple is true.

values

values?: array

The currently selected values when multiple is true.

value

value?: string

The value for the