@zenequityui/date-entity v0.9.6

Installation

To install a component run

$ npm install @zenequityui/date-entity --save

Please import CSS styles via

@import '/path__to__node_modules/@zenequityui/date-entity/dist/index.min.css

Usage

Date entity

import { DateEntity } from '@zenequityui/date-entity';

const moment = require('moment');
initialState = {
  entities: [
    { countryId: '', countryName: '', countrySearch: '', startDate: '', endDate: null },
  ],
};

<DateEntity
  options={{
    suggestions: [
      {
        "id": 1, "name": "Afghanistan", "createdAt": "2023-01-19T05:19:56.000Z", "updatedAt": "2023-01-19T05:19:56.000Z", "deletedAt": null
      },
      {
          "id": 2, "name": "Albania", "createdAt": "2023-01-19T05:19:56.000Z", "updatedAt": "2023-01-19T05:19:56.000Z", "deletedAt": null
      },
      {
          "id": 3, "name": "Algeria", "createdAt": "2023-01-19T05:19:56.000Z", "updatedAt": "2023-01-19T05:19:56.000Z", "deletedAt": null
      },
      {
          "id": 4, "name": "Antigua and Barbuda", "createdAt": "2023-01-19T05:19:56.000Z", "updatedAt": "2023-01-19T05:19:56.000Z", "deletedAt": null
      },
      {
          "id": 5, "name": "Angola", "createdAt": "2023-01-19T05:19:56.000Z", "updatedAt": "2023-01-19T05:19:56.000Z", "deletedAt": null
      },
      {
          "id": 6, "name": "Andorra", "createdAt": "2023-01-19T05:19:56.000Z", "updatedAt": "2023-01-19T05:19:56.000Z", "deletedAt": null
      },
      {
          "id": 7, "name": "Argentina", "createdAt": "2023-01-19T05:19:56.000Z", "updatedAt": "2023-01-19T05:19:56.000Z", "deletedAt": null
      },
      {
          "id": 8, "name": "Armenia", "createdAt": "2023-01-19T05:19:56.000Z", "updatedAt": "2023-01-19T05:19:56.000Z", "deletedAt": null
      },
      {
          "id": 9, "name": "Australia", "createdAt": "2023-01-19T05:19:56.000Z", "updatedAt": "2023-01-19T05:19:56.000Z", "deletedAt": null
      },
      {
          "id": 10, "name": "Austria", "createdAt": "2023-01-19T05:19:56.000Z", "updatedAt": "2023-01-19T05:19:56.000Z", "deletedAt": null
      }
    ],
    renderSuggestion: (suggestion) => suggestion.name,
    searchContent: ['name'],
    searchValue: 'countrySearch',
    placeholder: 'Select Country',
    label: 'Country',
    isMandatory: true,
  }}
  startDate={{
    label: 'Start Date',
    isMandatory: true,
  }}
  endDate={{
    label: 'End Date',
    isMandatory: true,
  }}
  current={{
    message: 'Currently living in this country',
    checkBy: 'countryId',
  }}
  entities={state.entities}
  onChange={(event, index) => {
    const entities = [...state.entities];
    entities[index].countrySearch = event;
    this.setState({
      entities,
    });
  }}
  onSelect={(event, index) => {
    const entities = [...state.entities];
    entities[index].countryId = `${event.id}`;
    entities[index].countryName = event.name;
    entities[index].countrySearch = event.name;
    setState({
      entities,
    });
  }}
  onAddEntity={() => {
    setState((prevState) => ({
      entities: [...prevState.entities, {
        countryId: '', countryName: '', countrySearch: '', startDate: '', endDate: '',
      },]
    }));
  }}
  onRemoveEntity={(index) => {
    if (_.isEqual(_.size(state.entities) - 1, index)) {
      setState((prevState) => {
        const entities = [...prevState.entities];
        entities[index - 1].endDate = null;
        return { entities };
      });
    } else {
      const startDate = state.entities[index + 1].startDate;
      setState((prevState) => {
        const entities = [...prevState.entities ];
        entities[index - 1].endDate = moment(startDate).subtract(1, 'days').format('DD MMMM, YYYY');
        return { entities };
      });
    }
    const entities = _.filter(state.entities, (data, subIndex) => subIndex !== index);
    setState({
      entities,
    });
  }}
  onHandleKeyBlur={({ name, value, index }) => {
    setState((prevState) => {
      const entities = [...prevState.entities ];
      entities[index][name] = value;
      if (_.size(entities) > 1 && _.isEqual(name, 'startDate') && !_.isEqual(index, 0)) {
        entities[index - 1].endDate =  moment(value, 'DD MMM, YYYY').subtract(1, 'days').format('DD MMMM, YYYY');
        if (_.isEqual(_.size(entities) - 1, index)) {
          entities[index].endDate = null;
        }
      }
      return { entities };
    });
  }}
/>