diff --git a/docs/3.x.x/en/plugin-development/ui-components.md b/docs/3.x.x/en/plugin-development/ui-components.md index 2f98ce7c7c..639d50a8f9 100644 --- a/docs/3.x.x/en/plugin-development/ui-components.md +++ b/docs/3.x.x/en/plugin-development/ui-components.md @@ -185,7 +185,7 @@ export default FooPage; *** -## Input +## InputsIndex Strapi provides a built-in input library which includes : - All kind of inputs @@ -193,7 +193,6 @@ Strapi provides a built-in input library which includes : - Error highlight - i18n -> This component is likely to be deprecated in favor of InputsWithIndex ### Usage @@ -202,6 +201,7 @@ Strapi provides a built-in input library which includes : | `addon` | string | no | Allows to add a string addon in your input, based on [Bootstrap](https://v4-alpha.getbootstrap.com/components/input-group/#basic-example). Ex: `` | | `addRequiredInputDesign` | bool | no | Allows to add an asterix on the input. Ex: `` | | `customBootstrapClass` | string | no | Allows to override the input bootstrap col system. Ex: `` | +| customInputs | Object | no | Allows to add a new input type | | `deactivateErrorHighlight` | bool | no | Prevents from displaying error highlight in the input: Ex: `` | | `didCheckErrors` | bool | no | Use this props to display errors after submitting a form. Ex: `` | | `disabled` | bool | no | Disable the input. Ex: `` | @@ -228,7 +228,15 @@ Strapi provides a built-in input library which includes : import React from 'react'; // Make sure you don't have a component called Input inside your ./components folder // It will import the one in your components folder instead. -import Input from 'components/Input'; +import Input from 'components/InputsIndex'; + +const CustomInput = (props) => { + return ( +
+ Some custom input +
+ ); +} class FooPage extends React.Component { constructor(props) { @@ -256,17 +264,32 @@ class FooPage extends React.Component { } render() { + const inputs = [ + { + label: 'This is a string input', + name: 'foo', + type: 'string', + validations: { required: true }, + value: this.state.data.foo, + }, + { + label: 'This is a custom input', + name: 'custom', + type: 'newType', + validations: {}, + value: '', + } + ] return (
- + {inputs.map(input => ( + + ))}
); } diff --git a/packages/strapi-admin/package.json b/packages/strapi-admin/package.json index 196d018a62..fcefa77963 100755 --- a/packages/strapi-admin/package.json +++ b/packages/strapi-admin/package.json @@ -48,4 +48,4 @@ "npm": ">= 3.0.0" }, "license": "MIT" -} +} \ No newline at end of file diff --git a/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js b/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js index 50bee6034e..a5b43aa847 100644 --- a/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js @@ -6,7 +6,7 @@ /* eslint-disable react/require-default-props */ import React from 'react'; import PropTypes from 'prop-types'; -import { isEmpty } from 'lodash'; +import { isEmpty, merge } from 'lodash'; import Loadable from 'react-loadable'; // Design import InputAddonWithErrors from 'components/InputAddonWithErrors'; @@ -65,6 +65,8 @@ function InputsIndex(props) { inputValue = props.value || ''; } + merge(inputs, props.customInputs); + const Input = inputs[type] ? inputs[type] : DefaultInputError; return ; @@ -76,6 +78,7 @@ DefaultInputError.propTypes = { InputsIndex.defaultProps = { addon: false, + customInputs: {}, }; InputsIndex.propTypes = { @@ -83,6 +86,7 @@ InputsIndex.propTypes = { PropTypes.bool, PropTypes.string, ]), + customInputs: PropTypes.object, type: PropTypes.string.isRequired, value: PropTypes.any, }; diff --git a/packages/strapi-plugin-upload/config/routes.json b/packages/strapi-plugin-upload/config/routes.json index 2aea41f19a..9bfd505c92 100644 --- a/packages/strapi-plugin-upload/config/routes.json +++ b/packages/strapi-plugin-upload/config/routes.json @@ -32,6 +32,14 @@ "policies": [] } }, + { + "method": "GET", + "path": "/files/count", + "handler": "Upload.count", + "config": { + "policies": [] + } + }, { "method": "GET", "path": "/files", @@ -48,14 +56,6 @@ "policies": [] } }, - { - "method": "GET", - "path": "/files/count", - "handler": "Upload.count", - "config": { - "policies": [] - } - }, { "method": "GET", "path": "/search/:id",