How to use @entando/utils - 10 common examples

import DashboardDonutChart from 'ui/widgets/charts/donut-chart/components/DashboardDonutChart';
import DashboardGaugeChart from 'ui/widgets/charts/gauge-chart/components/DashboardGaugeChart';
import DashboardPieChart from 'ui/widgets/charts/pie-chart/components/DashboardPieChart';
import DashboardMap from 'ui/widgets/geolocalization/components/DashboardMap';

import reducer from 'state/main/reducer';

import enLocale from 'locales/en';
import itLocale from 'locales/it';

import { name as id } from '../package.json';

import './sass/index.css';


setCurrentLocale(enLocale);

const plugin = {
  id,
  menuItemLabelId: 'menu.itemLabel',
  uiComponent,
  reducer,
  locales: [enLocale, itLocale],
  // workaround to use apimanager (the plugins compilation has to be pulled out from webpack)
  apiManagerConfig: config,
  widgetForms: {
    'dashboard-table': DashboardTable,
    'dashboard-line-chart': DashboardLineChart,
    'dashboard-bar-chart': DashboardBarChart,
    'dashboard-donut-chart': DashboardDonutChart,
    'dashboard-gauge-chart': DashboardGaugeChart,
    'dashboard-pie-chart': DashboardPieChart,

// import DashboardPieChart from 'ui/widgets/charts/pie-chart/components/DashboardPieChart';
// import DashboardMap from 'ui/widgets/geolocalization/components/DashboardMap';


import plugin from 'index';
import 'sass/index.css';

import { name } from '../package.json';

const mappedMessages = Object.keys(enLocale.messages).reduce((acc, key) => {
  acc[`plugin.${plugin.id}.${key}`] = enLocale.messages[key];
  return acc;
}, {});


setCurrentLocale(enLocale);

/* Dichiarazione dello store. E' stato inserito qui per forzare il currentUser */

const currentUser = combineReducers({
  username: () => 'admin',
  token: () => '14f2195025dbf6a866393cf5953116cb',
});

const wrappedReducer = combineReducers({
  [name]: rootReducer,
});

const pluginsReducer = combineReducers({
  plugins: wrappedReducer,
  currentUser,
  api,

import DashboardConfigPageContainer from "ui/dashboard-config/list/containers/DashboardConfigPageContainer";

import DashboardTable from "ui/widgets/dashboard-table/components/DashboardTable";
import DashboardLineChart from "ui/widgets/charts/line-chart/components/DashboardLineChart";
import DashboardBarChart from "ui/widgets/charts/bar-chart/components/DashboardBarChart";
import DashboardDonutChart from "ui/widgets/charts/donut-chart/components/DashboardDonutChart";
import DashboardGaugeChart from "ui/widgets/charts/gauge-chart/components/DashboardGaugeChart";
import DashboardPieChart from "ui/widgets/charts/pie-chart/components/DashboardPieChart";
import DashboardMap from "ui/widgets/geolocalization/components/DashboardMap";

const mappedMessages = Object.keys(enLocale.messages).reduce((acc, key) => {
  acc[`plugin.${plugin.id}.${key}`] = enLocale.messages[key];
  return acc;
}, {});

setCurrentLocale(enLocale);

// exporting for tests
export default ReactDOM.render(

export const getRouteTargetName = id => (dispatch, getState) => {
  const notification = getNotifications(getState()).find(item => item.id === id);
  const actions = notification.namespace.split('/');
  const index = (actions).findIndex(item => item === 'api') + 1;
  switch (actions[index]) {
    case 'pages': {
      history.push(routeConverter(ROUTE_PAGE_EDIT, { pageCode: notification.parameters.pageCode }));
      break;
    }
    default: history.push(ROUTE_HOME); break;
  }
};

onClickEdit() {
    history.push(routeConverter(ROUTE_USER_EDIT, { username: this.props.username }));
  }

import { required, maxLength } from '@entando/utils';
import RenderTextInput from 'ui/common/form/RenderTextInput';
import RenderSelectInput from 'ui/common/form/RenderSelectInput';
import FormLabel from 'ui/common/form/FormLabel';
import AttributeListTable from 'ui/common/attributes/AttributeListTable';
import DeleteAttributeModalContainer from 'ui/data-types/attributes/DeleteAttributeModalContainer';


const uppercaseThreeLetters = value =>
  (value && !/[A-Z]$/g.test(value)
    ?  : undefined);

const maxLength3 = maxLength(3);

const maxLength50 = maxLength(50);


export class DataTypeFormBody extends Component {
  componentWillMount() {
    this.props.onWillMount(this.props);
  }

  render() {
    const {
      attributesType, mode, handleSubmit,
      onAddAttribute, invalid, submitting,
      dataTypeCode,
    } = this.props;

    const isEdit = mode === 'edit';

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { Button, Row, Col } from 'patternfly-react';
import { formattedText, required, maxLength, code } from '@entando/utils';
import { FormattedMessage } from 'react-intl';
import RenderTextInput from 'ui/common/form/RenderTextInput';
import FormLabel from 'ui/common/form/FormLabel';

export const maxLength50 = maxLength(50);
export const maxLength20 = maxLength(20);

const EDIT_MODE = 'edit';
const NEW_MODE = 'new';

export class GroupFormBody extends Component {
  componentWillMount() {
    this.props.onWillMount(this.props);
  }

  onSubmit = (ev) => {
    ev.preventDefault();
    this.props.handleSubmit();
  };

  render() {

import { Field, reduxForm } from 'redux-form';
import { FormattedMessage } from 'react-intl';
import { InputGroup, Button, Row, Col } from 'patternfly-react';

import { required, maxLength } from '@entando/utils';
import RenderTextInput from 'ui/common/form/RenderTextInput';
import RenderSelectInput from 'ui/common/form/RenderSelectInput';
import FormLabel from 'ui/common/form/FormLabel';
import AttributeListTable from 'ui/common/attributes/AttributeListTable';
import DeleteAttributeModalContainer from 'ui/profile-types/attributes/DeleteAttributeModalContainer';

const uppercaseThreeLetters = value =>
  (value && !/^[A-Z]{1,3}$/i.test(value)
    ?  : undefined);

const maxLength50 = maxLength(50);


export class ProfileTypeFormBody extends Component {
  componentWillMount() {
    this.props.onWillMount(this.props);
  }
  render() {
    const {
      attributesType, mode, handleSubmit,
      onAddAttribute, invalid, submitting,
      profileTypeCode,
    } = this.props;

    const isEdit = mode === 'edit';

    const selectOptions = attributesType.map(item => ({

import { FormattedMessage } from 'react-intl';
import { InputGroup, Button, Row, Col } from 'patternfly-react';

import { required, maxLength } from '@entando/utils';
import RenderTextInput from 'ui/common/form/RenderTextInput';
import RenderSelectInput from 'ui/common/form/RenderSelectInput';
import FormLabel from 'ui/common/form/FormLabel';
import AttributeListTable from 'ui/common/attributes/AttributeListTable';
import DeleteAttributeModalContainer from 'ui/data-types/attributes/DeleteAttributeModalContainer';


const uppercaseThreeLetters = value =>
  (value && !/[A-Z]$/g.test(value)
    ?  : undefined);

const maxLength3 = maxLength(3);

const maxLength50 = maxLength(50);


export class DataTypeFormBody extends Component {
  componentWillMount() {
    this.props.onWillMount(this.props);
  }

  render() {
    const {
      attributesType, mode, handleSubmit,
      onAddAttribute, invalid, submitting,
      dataTypeCode,
    } = this.props;

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import { Button, Row, Col } from 'patternfly-react';
import { formattedText, required, maxLength, code } from '@entando/utils';
import { FormattedMessage } from 'react-intl';
import RenderTextInput from 'ui/common/form/RenderTextInput';
import FormLabel from 'ui/common/form/FormLabel';
import PermissionGrid from 'ui/roles/common/PermissionGrid';

export const maxLength50 = maxLength(50);
export const maxLength20 = maxLength(20);

const EDIT_MODE = 'edit';
const NEW_MODE = 'new';

export class RoleFormBody extends Component {
  componentWillMount() {
    this.props.onWillMount(this.props);
  }

  onSubmit = (ev) => {
    ev.preventDefault();
    this.props.handleSubmit();
  };

  render() {