Package Exports

prop-types-cleaner

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (prop-types-cleaner) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

prop-types-cleaner

Write simple prop-types cleaner by type, but write original prop-types without transforming.

Why prop-types-cleaner

When writing lots of prop-types with others, prop-types may become disordered like:

const propTypes = {
    isOdps: PropTypes.bool,
    report: PropTypes.xreportComponent,
    selectedComponents: PropTypes.arrayOf(PropTypes.string),
    isDragging: PropTypes.bool,
    updateReport: PropTypes.func,
    onResized: PropTypes.func,
    onStartResizing: PropTypes.func,
    toggleShortcutAttributePanel: PropTypes.func,
    shortcutAttributePanel: PropTypes.bool,
    updateUnmountComponents: PropTypes.func,
    domReportArea: PropTypes.validateDOMElem,
    toggleLinkModal: PropTypes.func,
    charts: PropTypes.shape({
      id: PropTypes.string,
      content: PropTypes.object,
    }),
    deleteChart: PropTypes.func,
    configureFilter: PropTypes.func,
    openSingleMode: PropTypes.func,
    closeSingleMode: PropTypes.func,
    isSingleMode: PropTypes.bool,
  }

I think writing simple prop-types(e.g. number, string) by type and other prop-types(e.g. instanceOf, shape) by original writing will be more readable.

Installation

npm install --save prop-types-cleaner

Usage

import propTypesCleaner from 'prop-types-cleaner';

const propTypes = propTypesCleaner({

    // Write simple prop-types cleaner by type.
    bool: {
      isRequired: [
          'bool_a',
          'bool_b',
      ],

      isNotRequired: [
          'bool_c',
          'bool_d',
      ],
    },
    number: {
      isRequired: [
          'number_a',
          'number_b',
      ],
      isNotRequired: [
          'number_c',
          'number_d',
      ],
    },

    // Write original prop-types without transforming.
    requiredObjectOf: PropTypes.objectOf(PropTypes.number).isRequired,
    optionalObjectOf: PropTypes.objectOf(PropTypes.number),
    requiredObjectWithShape: PropTypes.shape({
      color: PropTypes.string,
      fontSize: PropTypes.number
    }).isRequired,
    optionalObjectWithShape: PropTypes.shape({
      color: PropTypes.string,
      fontSize: PropTypes.number
    }),
});

It equals to:

const propTypes = {

    // simple prop-types
    array_a: PropTypes.array.isRequired,
    array_b: PropTypes.array.isRequired,
    array_c: PropTypes.array,
    array_d: PropTypes.array,
    bool_a: PropTypes.bool.isRequired,
    bool_b: PropTypes.bool.isRequired,
    bool_c: PropTypes.bool,
    bool_d: PropTypes.bool,


    // original prop-types
    requiredObjectOf: PropTypes.objectOf(PropTypes.number).isRequired,
    optionalObjectOf: PropTypes.objectOf(PropTypes.number),
    requiredObjectWithShape: PropTypes.shape({
        color: PropTypes.string,
        fontSize: PropTypes.number
    }).isRequired,
    optionalObjectWithShape: PropTypes.shape({
        color: PropTypes.string,
        fontSize: PropTypes.number
    }),
};

Writing simple prop-types

array, bool, number, object, string, symbol, func, node, element

import propTypesCleaner from 'prop-types-cleaner';

const propTypes = propTypesCleaner({
   bool: {
       isRequired: [
           'bool_a',
           'bool_b',
       ],

       isNotRequired: [
           'bool_c',
           'bool_d',
       ],
   },
});

It equals to:

const propTypes = {
    bool_a: PropTypes.bool.isRequired,
    bool_b: PropTypes.bool.isRequired,
    bool_c: PropTypes.bool,
    bool_d: PropTypes.bool,
};

Writing other prop-types

instanceOf, oneOfType, arrayOf, objectOf, shape, any

import propTypesCleaner from 'prop-types-cleaner';

const propTypes = propTypesCleaner({
   requiredObjectWithShape: PropTypes.shape({
       color: PropTypes.string,
       fontSize: PropTypes.number
   }).isRequired,
   optionalObjectWithShape: PropTypes.shape({
       color: PropTypes.string,
       fontSize: PropTypes.number
   }),
})

It equals to:

const propTypes = {
    requiredObjectWithShape: PropTypes.shape({
        color: PropTypes.string,
        fontSize: PropTypes.number
    }).isRequired,
    optionalObjectWithShape: PropTypes.shape({
        color: PropTypes.string,
        fontSize: PropTypes.number
    }),
};

test

npm i
npm test