ontime-layout

ontime-layout

The library is used to create any layouts or forms from JSON configuration.

Install

// npm
npm install ontime-layout

// yarn
yarn add ontime-layout

Many examples

Please see the storybook page where you are able to see and test all components with documentation and examples.

ontime-layout/storybook

Credits

ontime-layout is library to create and manage UI for React 16.

Usage

Register components, functions etc for using

You are able to register only - component, function, class, object, exec

• component - React component
• function - any function
• class - any class
• object - any object
• exec - any function which will we called after parse
• pipeline - pipeline functionality

You should use pipeline only as an array. Where the first argument must be 'pipeline' and other arguments must be registered functions, objects etc.

// pipeline example 
props: {
  onClick: ['pipeline', ['function/fn1', {a: 1}], 'function/fn2', 'function/fn3']
}

When the user clicks on the element then the function 'function/fn1' will be called and the first argument will be an onClick event (Proxy) and the second argument will be an object {a: 1}. Result of the first function will be passed to the function 'function/fn2' and so on. All functions will be called like async functions.

Register components, functions and abjects etc

import { Row, Input, Button } from 'ontime-components';
import { config } from 'ontime-layout';
import i18n from 'i18n';

config.set('component', 'Row', Row);
config.set('component', 'Input', Input);
config.set('component', 'Button', Button);

config.set('function', 'populateSelect', async () => ['John Snow', 'Rob Stark']);
config.set('exec', 'translate', (key, options) => i18n.t(key, options));

Register translating function for validator

If you want to use ontime-layout validator and see correct errors. You shloud register translating function. Please see below example how to do.

import { config } from 'ontime-layout';
import i18n from 'i18n';

config.setI18n((key, options) => i18n.t(key, options));

How to use registered components, function etc in JSON configuration

import { Layout } from 'ontime-layout';

const data = [
  {
    component: 'Row',
    children: [
      {
        component: 'Input',
        props: {
          name: 'name',
          label: ['exec/translate', 'user.name'],
          leftIcon: 'user'
        }
      },
      {
        component: 'Select',
        props: {
          name: 'region',
          label: ['exec/translate', 'user.alias'],
          dataSource: 'function/populateSelect'
        }
      }
    ]
  },
  {
    component: 'Row',
    children: [
      {
        component: 'Button',
        props: {
          type: 'submit',
          label: ['exec/translate', 'save'],
          primary: true
        }
      },
      {
        component: 'Button',
        props: {
          label: ['exec/translate', 'cancel']
        }
      }
    ]
  }
];

<Layout data={ data } />

For From details please see ontime-layout/storybook/form

For Layout details please see ontime-layout/storybook/layout

How to use validator

import { validator } from 'ontime-layout';

// Create rules
const rules = {
  name: {
    req: true,
    maxLen: 100
  },
  email: {
    req: true,
    email: true
  }
};

// Create data
const data = {
  name: '',
  email: '111'
};

// create validate function for rules
const validate = validator(rules);

// validate
try {
  await validate(data);
} catch (err) {
  console.error(err);
}

// if need to validate only one field
try {
  await validate(data, 'email');
} catch (err) {
  console.error(err);
}

// Use validate into Form
<Form 
  data={ data }
  validate={ validate }
/>

List of predefined rules

• req - Value must be required
• email - Check email
• url - Check URL
• max - Value must be less then
• min - Value must be more then
• maxLen - Value length must be less then
• minLen - Value length must be more then
• confirm - Value and another value must be the same
• regExp - Check value by regular expression
• gt - Value must be greater or equal
• ge - Value must be greater
• lt - Value must be less or equal
• le - Value must be less
• list - Minimum one value must be selected
• listSelect - Minimum one value must be selected
• alphabet - You can only enter letters and numbers
• all - An invalid character

License

MIT