React General Components

Download

npm i frontend-library@version

Styles

@import url('../../../../node_modules/primereact/resources/primereact.min.css');
@import url('../../../../node_modules/primeicons/primeicons.css');
@import url('../../../../node_modules/frontend-library/lib/resource/scss/components-style.css');

Components

DropDown Compoent
<DropdownComponent
	Class="col-sm-12 col-md-6 GC-dropdown"
	label={translate('existingLicenseVerification.selectCountryIssuance')}
	value={this.state.selectedCountry}
	optionList={[
	  { name: 'Australia', code: 'AU' },
	  { name: 'Brazil', code: 'BR' },
	  { name: 'China', code: 'CN' },
	  { name: 'Egypt', code: 'EG' },
	  { name: 'France', code: 'FR' },
	  { name: 'Germany', code: 'DE' },
	  { name: 'India', code: 'IN' },
	  { name: 'Japan', code: 'JP' },
	  { name: 'Spain', code: 'ES' },
	  { name: 'United States', code: 'US' },
	]}
	onchange={e => this.handleSelectedCountry(e)}
	optionlabel="name"
	filterby="name"
	placeholder=""
  />

DatePicker Component
<DatePickerComponent
    classInfo="Unified_Number_info"
    titleInfo={'Unified Number'}
    Class={'col-sm-6'}
    label={'journeyApplicationStep1.card.birthDate'}
    value={new Date('06/30/2021')}
    changed={date => console.log(date._d)}
    placeholder={'day/month/year'}
    currentLang={'en'}
/>

Plate Component
<PlateComponent Class={'expo'} plateType={'sport'} plateCharacter={'G'} plateNum={'44115'} />

RadioButton Component
<RadioButtonComponent id="yes" group="permission" value={'true'} checked={true} label={'no'} onchange={e => console.log(e)} />
<RadioButtonComponent id="no" group="permission" value={'false'} checked={true} label={'yes'} onchange={e => console.log(e)} />

Loading Component
<LoadingComponent show={false} />

Input Component
<InputComponent
	classInfo="Unified_Number_info"
	titleInfo={'Unified Number'}
	label="Name"
	placeholder="Text Box"
	value="Eachawy"
	Class="col-sm-6"
	onchange={e => console.log(e)}
  />

Info Component
<InfoComponent classInfo="Unified_Number_info" textInfo={'info'} />

Uploader Component
<UploaderComponent
	Class={'col-sm-6'}
	id="uploaderTest"
	onchanged={e => console.log(e)}
	filesType={['image/jpeg', 'image/png', 'application/pdf']}
	uploaderText={'driving School'}
	maximumFileSize={5000000}
	uploaderReq={'test'}
	chooseFile={'Choose File'}
	filesNumber={1}
  />

CheckBox Component
<CheckBoxComponent
	id="makeSureYouHaveVerifiedId"
	lbl={'employee Login'}
	Checked={true}
	handleChangeChk={e => console.log(e.target.checked)}
/>

Button Component
  <ButtonComponent onClick={() => console.log('You clicked on the pink circle!')}>Im a pink circle!</ButtonComponent>
  <ButtonComponent Class="BtnCancel" onClick={() => console.log('Cancel')}>Im a pink circle! Cancel</ButtonComponent>

AttachmentView Component
<AttachmentViewComponent
        key={this.state.attachFile ? this.state.attachFile.id : null}
        attachFile={this.state.attachFile ? this.state.attachFile.base64 : null}
        caption={'Select a document to preview'}
        class={'approveStamp'}
    />

TypeScript

Typescript is fully supported as type definition files are provided in the npm package of frontend-library.