PT-Components

This is the Repo contains the General Components that uses in the projects:

• PT-Orion-RH
• PT-Orion-Sales
• PT-Orion-Office
• PT-Orion-Auth

Installation

npm install @pleedtech/pt-components@version

Components List

• CustomAddDocument
• CustomAddTail
• CustomAddTile
• CustomAddressOfficeCard
• CustomAdminOfficeDialog
• CustomAutocomplete
• CustomAutocompleteTimepicker
• CustomBadge
• CustomBiometricsCard
• CustomBreadcrumb
• CustomButtons
• CustomButtonsCard
• CustomButtonsPhoneInterview
• CustomButtonsTabs
• CustomCardInfo
• CustomCardInformationRedirect
• CustomCardInformationStatus
• CustomCardPaginator
• CustomCardProfile
• CustomCheckboxes
• CustomChecklist
• CustomComments
• CustomCompanyHeader
• CustomDataToggle
• CustomDatePicker
• CustomDialog
• CutomDocumentPreviewDialog
• CustomDomainEmailCard
• CustomDropzone
• CustomEmailEditor
• CustomEmailHistory
• CustomFiltersCard
• CustomGallery
• CustomHeaderBroker
• CustomHeaderWorkList
• CustomIconMenu
• CustomIconMenuStatus
• CustomIndicator
• CustomIndicatorsCard
• CustomInputs
• CustomJsPaginator
• CustomLabelCard
• CustomLoaders
• CustomNavbar
• CustomNewchart
• CustomOrganizationTree
• CustomPaginator
• CustomPhotoDialog
• CustomProcessCard
• CustomProfileImage

Components props usage

• CustomInput

id //id of the component
disabled //boolean to disable input
value //string or number value of the input type string or number
rows // number number of rows of the text-area
type // string type of the input
placeholder // string traditional placeholder
className // string input ClassName
min // string or number, min length of the value you want to receive
max // string or number, max length of the value you want to receive
onChange // function, set the on change value
onClick // function set event on click
onFocus // function set event on focus
onBlur // function set event on blur
onKeyPres // function set event on key press
bsSize // string set font size based on Reacstrap documentation.

• CustomDatePickerComponent

id //id of the component
disabled //boolean to disable datepicker
value //moment, date
placeholder // string traditional placeholder
className // string datepicker ClassName
onChange // function, set the on change value
onClick // function set event on click
onFocus // function set event on focus
onBlur // function set event on blur
isToday // boolean set the date to today
dateFormat // string, format of the date

• CustomSelectReact

id //id of the component
name // string, select name
disabled //boolean to disable datepicker
value //string, value
placeholder // string traditional placeholder
className // string datepicker ClassName
onChange // function, set the on change value
options // Array, options data
onBlur // function set event on blur

• CustomAddDocumentHrm

id //id of the component
name // string, select name
disabled //boolean to disable datepicker
value //string, value
placeholder // string traditional placeholder
className // string datepicker ClassName
files // Array, files state
isVisibleProgressBar // boolean, view the progress bar (needs xhr action)
isVisibleDropZone // boolean, controls visibility of the drop files zone
labelDropZone // string, label of the dropzone
openThumbnail // object, receive parameters event, object. 
Object give you information to open a preview image
onChange // function, handle on change document 
maxSize // number, set the max size of a file
alertSize // number, set and alert at size 
formatSize // string, set size format (mb, kb)
validFormats // array, set the formats that are valid through the files
sizeErrorLabel // string, the message error you want to show 
at max size error
formatErrorLabel // string, the message error you want to show
at format error
onClickDelete // function, deletes from the array (only state)
to delete from DB send isActiva: false at API function

• CustomConfirmPopover

visible //boolean, visibility of popover
onClickConfirm //function, action on click confirm popover
onClickCancel //function, action on click cancel
placement //string, position of the open popover
overlayClassName //string, antdesign classname popover
popoverText //string, text of the first line of the popover
popoverSecondLineText //string, text of the second line of the popover
confirmButtonText // string, text of the confirm button
cancelButtonText //string, text of the cancel button 

• CustomScheduleActivities

    onClickConfirm //function, action on click confirm
    onClickCancel: //function, action on click cancel
    onSendMail: //function, action on click send mail
    isRequiredDate: //bool, requiered info
    isRequiredHour: //bool, requiered info
    isRequiredInput: //bool, requiered info
    isRequiredSelect: //bool, requiered info
    isDisabledInput: //bool, disabled input text
    dateText: //string, label name
    hourText: //string, label name
    selectText: //string, label name
    inputText: //string, label name
    selectOptions: //array, select options
    isVisibleDate: //bool, is visible input
    isVisibleHour: //bool, is visible input
    isVisibleInput: //bool, is visible input
    isVisibleSelect: //bool, is visible input
    isVisibleSendMailButton: //bool, is visible button send mail
    acceptButtonLabel //string, accept button label
    acceptButtonIcon: //string, icon of accept button
    popoverButtonIcon: //string, popover button icon
    popoverButtonLabel: //string, popover button label
    messages: //object, messages of pt
    popoverPlacement: //string, placement based on antd design popover placement
    disableSendMailButton: //bool, disable button send mail
    dateValue: //function, catch the value of the inputs
    hourValue: //function, catch the value of the inputs
    selectValue: //function, catch the value of the inputs
    inputValue: //function, catch the value of the inputs
    sendMailButtonText: //string, 'Enviar correo de confirmación',
    cancelButtonText: /string, 'Cancelar',
    confirmSendButtonText: //string, 'Enviar y continuar',
    sendMailConfirmText: // string, '¿Desea enviar correo?',
    scheduleActivityText: //strung'¿Desea agendar entrevista?',
    cancelScheduleText: // string 'Cancelar',
    confirmScheduleButtonText: //string  'Aceptar',

• CustomDrawer

  contentDrawer //element, HTML for the card body content
  buttonLabel //string, label of the button
  isVisibleButton //bool, set the visibility of the button
  buttonIcon //string, icon of the button
  drawerTitle //string, title of the drawer

• CustomMultiSelect

   isVisible //bool, visibility of the component 
  labelText //string , label
  width: //string, width of the input
  providerCatalog: //array, catalog from api
  selectedValues: //function two params, return the value of the selected options
  placeholder // string, placeholder value
  getGroupContainter //function,
  selectedItems //array, updated array 
  defaultValueText //string, text of the default value
  defaultValueId: //string, id of the default value
  isDefaultValue: //bool, is default value

• customTags

  tag //array, tags array
  wrapperClassName //string, classname of the first wrapper div
  tagStyle: //object, style of the tagbox
  tagColor: //string, color of the tag
  textClassName: //string, class name of the span text
  textStyle: //object, styles of the span text
  wrapperClassName //string, wrapper classname 
  labelClassName //string, label classname
  textDisplay //string, display style on text
  onCloseTag //function, on close tag action
  tagDirection //string, 'horizontal', 'vertical'

• customDataForm

  firstLabel //string,  value of the label
  secondLabel: //string, value of the label
  thirdLabel: //string, value of the label
  fourthLabel: //string, value of the label
  firstNameObjectKey: //string, value of the object key for API
  secondNameObjectKey: //string, value of the object key for API
  lastNameObjectKey: //string, value of the object key for API
  secondLastNameObjectKey: //string, value of the object key for API
  data: //function, return the values of each input on an object
  isVisibleMoreData: //bool, shows more inputs 
  moreDataTitle: //string, value of the title of the extra section
  moreDataFirstLabel: //string, value of the label
  moreDataSecondLabel: //string, value of the label
  moreDataThirdLabel: //string, value of the label
  moreDataFourthLabel: //string, value of the label
  moreDataFifthLabel: //string, value of the label
  moreDataSixthLabel: //string, value of the label
  moreDataSeventhLabel: //string, value of the label
  firstSelectCatalog: //array, value of the catalogs
  secondSelectCatalog: //array, value of the catalogs
  thirdSelectCatalog: //array, value of the catalogs
  moreDataFirstObjectKey: //string, value of the object keys for API
  moreDataSecondObjectKey: //string, value of the object keys for API
  moreDataFourthObjectKey: //string, value of the object keys for API
  moreDataFifthObjectKey: //string, value of the object keys for API
  moreDataSeventhObjectKey: //string, value of the object keys for API
  moreDataSixthObjectKey: //string, value of the object keys for API
  moreDataThirdObjectKey: //string, value of the object keys for API
  isVisibleThirdSelect: //bool, controls visibility of a third select

• customDataForm

  numberOfTabs //number, number of tabs until 5
  tabListStyle //object, style of the tabs list
  firstTitle //string, title of the tab section
  secondTitle //string, title of the tab section
  thirdTitle //string, title of the tab section
  fourthTtitle //string, title of the tab section
  fifthTitle //string, title of the tab section
  firstContent //node, content of the selected tab
  secondContent //node, content of the selected tab
  thirdContent //node, content of the selected tab
  fourthContent //node, content of the selected tab
  fifthContent //node, content of the selected tab
  contentStyle //object, style of the content tab
  selectedTab //function, return the index of the selected tab

• customEmailForm

  onClickFavorite //function, action on click favorite two params(email, id, isMain)
  editEmailTitle: //string, title of the popover at edit
  catalogData //array, emails 
  cancelEditEmailLabel://string, label
  onSaveEditEmail: //function, action at save on edit two params (email, id, isMain, emailtype)
  onSaveNewEmail: //function, action on save new mail 1 param (email, emailtype)
  deleteEmailLabel://string, label
  onClickDelete: //function, action at click delete two params (email, id)
  titleLabel://string, label
  addEmailButtonLabel://string, label
  addEmailPopoverLabel://string, label
  cancelNewEmailLabel://string, label
  saveNewEmailLabel://string, label  
  isEditable //bool, it have editable buttons?
  labelEmailCatalog //string, label of the select input PropTypes.string,
  emailTypeCatalog: //array, catalog of the select
  selectedEmailType: //func, returns the selected type 
  isVisibleSelect: PropTypes.bool,
  messages // messages of label codes 

  EXAMPLE:
     <CustomEmailForm
                catalogData={emailCatalog}
                onClickFavorite={(name, id)=>{
                  const updateEmail = [
                    {
                      idEmailAddress: id,
                      idEmailAddressType: 3,
                      emailAddress: name,
                      isMain: true,
                      isActive: true,
                    },
                  ];
                  //  setfavorite(item.isMain ? 'fa fa-star' : 'fa fa-star-o');
                  // eslint-disable-next-line no-use-before-define
                  updateCandidateFunction({
                    emailAddress: updateEmail,
                  });
                }}
                onSaveEditEmail={(newEmail, idemail) => {
                  //alert("add")
                  const updateEmail = [
                    {
                      idEmailAddress: idemail,
                      idEmailAddressType: 3,
                      emailAddress: newEmail,
                      isMain: false,
                      isActive: true,
                    },
                  ];
                  setErrorTextEmail('');
                  updateCandidateFunction({
                    emailAddress: updateEmail,
                  });

                  setFieldEmail('');
                  setEmailId(null);
                  setFieldEmail('');
                }}
                onClickDelete={(name, id) => {
                  const updateEmail = [
                    {
                      idEmailAddress: id,
                      idEmailAddressType: 3,
                      emailAddress: name,
                      isMain: false,
                      isActive: false,
                    },
                  ];
                  // eslint-disable-next-line no-use-before-define
                  updateCandidateFunction({
                    emailAddress: updateEmail,
                  });
                }}
                onSaveNewEmail={(email) => {
                  const updateEmail = [
                    {
                      idEmailAddress: '',
                      idEmailAddressType: 3,
                      emailAddress: email,
                      isMain: false,
                      isActive: true,
                    },
                  ];
                  setErrorTextEmail('');
                  updateCandidateFunction({
                    emailAddress: updateEmail,
                  });
                }}
              />

• CustomPhoneForm

  onClickFavorite //function, action on click favorite two params(Phone, id, type, ismain)
  editPhoneTitle: //string, title of the popover at edit
  catalogData //array, Phones 
  cancelEditPhoneLabel://string, label
  onSaveEditPhone: //function, action at save on edit two params (Phone, id, type, isMain)
  onSaveNewPhone: //function, action on save new mail 1 param (Phone, type)
  deletePhoneLabel://string, label
  onClickDelete: //function, action at click delete two params (Phone, id, type)
  titleLabel://string, label
  addPhoneButtonLabel://string, label
  addPhonePopoverLabel://string, label
  cancelNewPhoneLabel://string, label
  saveNewPhoneLabel://string, label  
  isEditable //bool, it have editable buttons?
  labelPhoneCatalog //string, label of the select input PropTypes.string,
  phoneTypeCatalog: //array, catalog of the select
  selectedPhoneType: //func, returns the selected type 
  isVisibleSelect: PropTypes.bool,
  messages // messages of label codes 

  EXAMPLE:
  <CustomPhoneForm
                  catalogData={phoneCatalog}
                  onClickFavorite={(name, id) => {
                    const updatePhone = [
                      {
                        idPhoneNumber: id,
                        idPhoneType: 3,
                        phoneNumber: name,
                        isMain: true,
                        isActive: true,
                      },
                    ];
                    // eslint-disable-next-line no-use-before-define
                    updateCandidateFunction({
                      phoneNumber: updatePhone,
                    });
                  }}
                  onSaveEditPhone={(newPhone, idPhlone) => {
                    const updatePhone = [
                      {
                        idPhoneNumber: idPhlone,
                        idPhoneType: 3,
                        phoneNumber: newPhone,
                        isMain: false,
                        isActive: true,
                      },
                    ];
                    setErrorTextPhone('');
                    updateCandidateFunction({
                      phoneNumber: updatePhone,
                    });
                  }}
                  onClickDelete={(name, id) => {
                    const updatePhone = [
                      {
                        idPhoneNumber: id,
                        idPhoneType: 3,
                        phoneNumber: name,
                        isMain: false,
                        isActive: false,
                      },
                    ];
                    // eslint-disable-next-line no-use-before-define
                    updateCandidateFunction({
                      phoneNumber: updatePhone,
                    });
                  }}
                  onSaveNewPhone={(email) => {
                    const updatePhone = [
                      {
                        idPhoneNumber: '',
                        idPhoneType: 3,
                        phoneNumber: email,
                        isMain: false,
                        isActive: true,
                      },
                    ];
     
                    updateCandidateFunction({
                      phoneNumber: updatePhone,
                    });
                  }}
                />

 * CustomCropper

  isVisiblePreview: //bool, visibility of preview image
  rotateDegree: //number, degrees of rotation
  src: //string, image source
  getCroppedImageData //func, get base64 image
  getImageLabelText: //string, text of get image button