@maximus905/dropdown-list v1.0.0

component

List of properties that are used in component:

• dataUrl: URL for getting data from a server;
• dataFieldName: server's response should look like {dataFieldName: data};

• dataLoader: async function for fetching data from server.

  Example of default loader function:

     const defaultDataLoader = async ({url, accessor, filters, sorting, dataFieldName, labelFieldName, valueFieldName}) => {
         try {
             const res = await axios.get(url, {
                 params: {accessor, filters, sorting, dataFieldName, labelFieldName, valueFieldName}
             })
             if (!Array.isArray(res.data[dataFieldName])) {
                 console.log('invalid data from server: ', res)
                 throw new Error('Error fetching data from server')
             }
             return res.data
         } catch (e) {
             alert(e.toString())
             return {[dataFieldName]: []}
         }
     }

• accessor: this property is sent to server and can be used for getting data on the server side;

• filters: this property is sent to server and can be used for filtering data on the server side;

• sorting: this property is sent to server and can be used for ordering data on the server side;

• selected: array of values that will be checked in the list at the first time after fetching data from server

• disabled: true/false. Enable/disable component

• buttonContainerWidth: define the width of button in container. See demo code as example.

  Interpretation of values: 100 -> 100px, '50%' -> '50%'

• multiSelect: if true available multi selection in the list. Default value: false

• applyInstantly: if true a method onChangeSelected will be invoked just after selection, else this method will be invoked after closing of list
• closeAfterSelect: true/false. CLose or not drop down list after clicking on item
• maxHeight: PropTypes.number, // maxHeight of dropdown list in px
• maxWidth: PropTypes.number, // maxWidth of dropdown list in px
• minWidth: PropTypes.number, //minWidth of dropdown list
• widthMenuLikeButton: PropTypes.bool, // if true - set dropdown's menu width as button width
• flip: PropTypes.bool,
• rightAlignment: PropTypes.bool, // right alignment if true, else left alignment
• fontRatio: PropTypes.number, to increase or decrease font size of component. Default value: 1
• labelFieldName: PropTypes.string. This is used if a server's response is array of objects
• valueFieldName: PropTypes.string. This is used if server's response is array of objects
• emptyWildcard: PropTypes.string. Default value: '<пусто>'
• emptyValueWildcard: PropTypes.oneOfType(PropTypes.string, PropTypes.number, PropTypes.bool). Default value: ''
• falseWildcard: PropTypes.string. Default value: 'false'
• trueWildcard: PropTypes.string. Default value: 'true'
• emptyListWildcard: PropTypes.string. Default value: 'нет элементов'
• loadingWildcard: PropTypes.string. Default value: 'loading...'
• opened: PropTypes.bool, //initial state of filter. Doesn't work yet.
• buttonIcon: React component. Will be rendered as button of DD list.
  • Next list of props are passed into buttonIcon:
    • buttonRef - should be assigned to buttonIcon as a ref,
    • checkedItemsValue - array of checked items value. Using of this prop is up to you,
    • checkedItemsLabel - array of checked items labels. Using of this prop is up to you.
  • Example of custom icon for DD list (reactstrap and fortawesome libraries are used):

  const ListButton = ({buttonRef, checkedItemsValue, checkedItemsLabel}) => {
      return (
          <Button className="d-flex" css={css`width: 100%`} innerRef={buttonRef} size='sm' >
              <div className="flex-grow-1 text-truncate" title={checkedItemsLabel.length > 0 ? checkedItemsLabel.join(',') : ''}>
                  {checkedItemsLabel.length > 0 ? checkedItemsLabel.join(',') : 'select Item'}
              </div>
              <div className="flex-grow-0 pl-1"><FontAwesomeIcon icon={faAngleDown} /></div>
          </Button>
      )
  }

handlers:

• onChangeSelected: PropTypes.func
  • Default value:

  ({accessor, value, label}) => {console.log('onChangeSelected', {accessor, value, label})}

• onOpen: PropTypes.func
  • Default value:

  ({accessor}) => console.log('onOpen', {accessor})

• onClose: PropTypes.func
  • Default value:

  ({accessor, value, label}) => console.log('onClose', {accessor, value, label})