@kleeen/core-react

kleeen-core-react

Access Control

Description

Component to show/hide elements according the user role.

Functions

setAccessControl:

Set the user permissions in the redux state.

Properties

Type	Name	Description
object	accessControlSettings	Settings for the accessControl
object	accessControlSettings.permissions	Permissions json base
string	accessControlSettings.setPathToRoleOnState	Path to the rol property on state
function	customRenderView	Function to eval the render of the AccessControl
function	customAccessControlChecker	Function to eval the permissions

Example

const permissions = {
  WORKBENCH: {
    CHILDREN: {
      ACTIONS: {
        PERMISSIONS: {
          ADMIN: 'SHOW',
          GUEST: 'HIDE',
        },
      }
    }
  }
};

setAccessControl({ permissions, pathToRoleOnState: 'user.role' });

Properties

Type	Name	Description
string	id	Permission id to be evaluated with all permissions
string	role	Get current role from redux state
node	children	According to the permssions it is shown/hidden
function	children	Execute the function with the user's permission to be used as the user requires

Example

<AccessControl id="LAYOUT.SEARCH_BOX">
  <input type="text" />
</AccessControl>

<AccessControl id="LAYOUT.HEALTH_SPARKLINE">
  {({ permission }) => (
    permission === 'SHOW'
      ? <input type="text" />
      : null
    )
  }
</AccessControl>

Icon Registry Provider

Description

Provider for the use of icons defined in a file with the following structure (iconRegistry):

{
  name: { path: './path.svg', alt: 'Icon name' }
}

Properties

Type	Name	Default Values
json	iconRegistry	{ }

Init provider

IconRegistryProvider({ iconRegistry })

Usage

import { IconRegistryConsumer } from '@kleeen/core-react';

<IconRegistryConsumer>
  {({ getIcon }) => (
    <img className="icon" src={getIcon(kuiIcon).path} alt={getIcon(kuiIcon).alt} />
  )}
</IconRegistryConsumer>

Theming Provider

Description

Provider to change the theme of the application by adding or modifying the classes of the html tag.

Properties

Type	Name	Default Values
String	initialTheme

Init Provider

ThemingProvider({ themeName })

Usage

import { ThemingConsumer } from '@kleeen/core-react';

<ThemingConsumer>
  {({ setTheme }) => (
    {setTheme('newThemeName')}
  )}
</ThemingConsumer>

Translation Provider

Description

Provider for the internationalization of the application defined in a file with the following structure (localeData):

{
  "en": {
    "textKey": "English translation!"
  },
  "es": {
    "textKey": "¡Traducción español!"
  }
}

Properties

Type	Name	Default Values
String	locale	Navigator Languaje
Array	languageToSupport	[ es , en , fr , it ]
Json	localeData	{ }

Init Provider

TranslationProvider({ localeData, locale: 'en' })

Use for language change

import { ThemingConsumer } from '@kleeen/core-react';

<ThemingConsumer>
  {({ setLocale }) => (
    select onChange={e => setLocale(e.target.value)}>
      <option value="en">Ingles</option>
      <option value="es">Español</option>
    </select>
  )}
</ThemingConsumer>

Use for translation

<Translate defaultMessage="content only for Admin">{'App.adminText'}</Translate>

KUIConnect

It allows to add the consumers of the combine consumer to a component to pass the props and these can be used from that component.

Example

import { KUIConnect } from '@kleeen/core-react';

const App = (props) => {
  render (
    const { translate, getIcon, setLocale } = props;
    return  (
     <div>
       ...
     </div>
    );
  );
};

compose(
  connect(state => state, ({ logIn })),
  KUIConnect(state => state),
)(App);

Combine Providers

Component that combines several providers, allows consuming components to subscribe to context changes. The properties for this function are children and providers.

Example

<KUICombineProviders providers = {[
    TranslationProvider({ localeData, locale: 'en' }),
    ReduxProvider,
    IconRegistryProvider({ iconRegistry }),
  ]}
>

Combine Consumers

Function that subscribes to context changes. The properties for this function are children and consumers.

Example

KUICombineConsumers({
  children,
  consumers: {
    theming: ThemingConsumer,
    icons: IconRegistryConsumer,
    translation: TranslationConsumer,
  },
});