aperia-dyn-lib

For Aperia Only

Install

npm install --save aperia-dyn-lib

Usage

ComboBox.tsx

import React, { ReactNode, RefObject } from 'react'

import { ComboBox as KendoComboBox, ComboBoxChangeEvent } from '@progress/kendo-react-dropdowns';
import * as Dyn from 'aperia-dyn-lib';
class ComboBox extends Dyn.BaseComponent{
    control: RefObject<KendoComboBox>;
    constructor(props: Dyn.IComponentProps){
        super(props);
        this.control = React.createRef();
        
    }
    onChangedHandler = (event: ComboBoxChangeEvent) => {
        this.setValue(event.target.value);
    }
    
    renderComponent(): ReactNode {
        return  <div>
            <KendoComboBox ref={this.control} data={this.state.dataSource||[]} dataItemKey="value" textField="text" value={this.state.value} onChange={this.onChangedHandler}/>
        </div>
        
    }
    
}

import * as React from 'react'

import {View} from 'aperia-dyn-lib'

class Example extends React.Component {
  render () {
    return (
      <View id="v1" name="view1" />
    )
  }
}

window.allControls = {
    ...window.allControls,
    'textbox': TextBox,
    'label': Label,
    'dropdownlist': DropdownList,
    'table': Table,
    'addmore': AddMore,
    'combobox': ComboBox,
    'searchbutton': SearchButton,
    'searchtextbox': SearchTextbox,
    'searchresultlist': SearchResultList
}
window.allFields = {
    ...window.allFields,
    'ctrl001': {
        name: 'ctrl001',
        label: 'Client Name',
        type: 'dropdownlist',
        validationFunc: function(s, n, o){
           if(n==='0') return 'Please select a client';
           else return null;
        },
        dataField: 'clientID',
        dataSourceApi: '/mock/clients.json',
        //this is for demo of post data
        //*
        getApiParams: function(s,u,c){
            console.log('context in field to get params');
            console.log(c);
            return null;
        }
        //*/
    },
    'ctrl002':{
        name: 'ctrl002',
        label: 'User Name',
        type: 'textbox',
        validationFunc: function(s, n, o){
            if(n===''){
                return 'User Name: required';
            }
            else{
                if(!n.match(/^[A-Za-z]+$/)){
                    return 'Only alphabet characters';
                }
            }
            return null;
        },
        dataField: 'userName'
    },
    'ctrl003':{
        name: 'ctrl003',
        label: 'Welcome',
        type: 'label',
        dataField: 'displayName'
    },
    ....
}

window.allViews = {
    ...window.allViews,
    'view1':{
        name: 'view1',
        dataApi: 'mock/data.json',
        submitApi: 'submit',
        template: 'settings/layout1.htm',
        //this is for demo of post data
        //*
        getApiParams: function(s,url,ctx){
            console.log('context in view to get params');
            console.log(ctx);
            return null;
        },
        //*/
        fields: [
            {
                name: 'ctrl003',
                position: [1,2],
                label: null
            },
            {
                name: 'ctrl001',
                position: [1,2],
                valueChangeFunc: function(s,n,o){
                    const m = s.props.parent.find('ctrl002');
                    if(n==='2') m.reset();
                    m.setEnable(n!=='2');
                    
                }
            },
            {
                name: 'ctrl002',
                position: [1,2]
            },
            {
                name: 'ctrl005',
                position: [1,2]
            }

        ]
    },
    'view2':{
        name: 'view2',
        dataApi: '/mock/data.json',
        submitApi: '/submit',
        fields: [
            {
                name: 'ctrl003',
                position: [1,2]
            },
            {
                name: 'ctrl001',
                position: [1,2],
                valueChangeFunc: function(s,n,o){
                    s.props.parent.find('ctrl002').setVisible(n!=='2');
                }
            },
            {
                name: 'ctrl002',
                position: [1,2],
                label: 'Login Name'
            },
            {
                name: 'ctrl006',
                position: [1,2],
                label: 'Extra notes'
            }
        ]
    },
    ....
}

License

MIT © Nha Doan