Skip to content
This repository has been archived by the owner on Jul 9, 2020. It is now read-only.

Commit

Permalink
Merge pull request #15 from schneidmaster/react-bootstrap-1
Browse files Browse the repository at this point in the history
Support react-bootstrap 1.0
  • Loading branch information
schneidmaster committed Jul 9, 2020
2 parents d93f1b8 + 7002492 commit c4cb751
Show file tree
Hide file tree
Showing 15 changed files with 4,858 additions and 2,383 deletions.
4 changes: 0 additions & 4 deletions .babelrc

This file was deleted.

42 changes: 6 additions & 36 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,39 +1,9 @@
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": [
"react"
"extends": [
"standard",
"standard-react",
"prettier/standard",
"plugin:prettier/recommended"
],
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
],
"object-curly-spacing": [
"error",
"always"
]
}
"parser": "babel-eslint"
}
2 changes: 2 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
coverage/
lib/
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
## Versioning

* For `react-bootstrap` < 0.29.0, use [v0.1.0](https://github.com/schneidmaster/react-bootstrap-maskedinput/releases/tag/v0.1.0).
* For current versions of `react-bootstrap`, use >= 0.2.x.
* For projects on React >= 0.15.5, use 0.3.x to get rid of the proptypes warning. 0.3.x is also the first version to support `react-maskedinput` 4.x.
* For `react-bootstrap` >= 0.29.0 and < 1.0, use [v0.4.0](https://github.com/schneidmaster/react-bootstrap-maskedinput/releases/tag/v0.4.0).
* For `react-bootstrap` >= 1.0, use [v0.5.0](https://github.com/schneidmaster/react-bootstrap-maskedinput/releases/tag/v0.5.0).

## Usage

Expand Down
3 changes: 3 additions & 0 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
presets: ["@babel/preset-env", "@babel/preset-react"],
};
28 changes: 17 additions & 11 deletions example/index.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,27 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { FormGroup, ControlLabel } from 'react-bootstrap';
import MaskedFormControl from '../src';
import React from "react";
import ReactDOM from "react-dom";
import { Form } from "react-bootstrap";
import MaskedFormControl from "../src";

const Example = () => {
return (
<div className='container'>
<div className="container">
<h1>Example</h1>

<FormGroup>
<ControlLabel>Phone Number</ControlLabel>
<MaskedFormControl type='text' name='phoneNumber' mask='111-111-1111' />
</FormGroup>
<Form>
<Form.Group>
<Form.Label>Phone Number</Form.Label>
<MaskedFormControl
type="text"
name="phoneNumber"
mask="111-111-1111"
/>
</Form.Group>
</Form>
</div>
);
}
};

const rootDiv = document.createElement('div');
const rootDiv = document.createElement("div");
document.body.appendChild(rootDiv);
ReactDOM.render(<Example />, rootDiv);
23 changes: 0 additions & 23 deletions example/webpack.babel.js

This file was deleted.

23 changes: 23 additions & 0 deletions example/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackIncludeAssetsPlugin = require("html-webpack-include-assets-plugin");

module.exports = {
entry: "./example/index.js",
module: {
rules: [
{
test: /\.js$/,
use: "babel-loader",
},
],
},
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackIncludeAssetsPlugin({
assets: [
"https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css",
],
append: true,
}),
],
};
7 changes: 7 additions & 0 deletions jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module.exports = {
collectCoverage: true,
collectCoverageFrom: ["**/src/**/*.js"],
transform: {
"^.+\\.js?$": "babel-jest",
},
};
49 changes: 31 additions & 18 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
{
"name": "react-bootstrap-maskedinput",
"version": "0.4.0",
"version": "0.5.0",
"description": "react-maskedinput form element that works with react-bootstrap",
"main": "lib/index.js",
"scripts": {
"test": "jest",
"lint": "eslint src/*.js test/*.js",
"format": "prettier --write '**/*.js'",
"lint": "eslint src/*.js 'test/**/*.js'",
"coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js && rm -rf ./coverage",
"build": "babel src --out-dir lib",
"example": "webpack-dev-server --config example/webpack.babel.js"
"example": "webpack-dev-server --config example/webpack.config.js"
},
"repository": {
"type": "git",
Expand Down Expand Up @@ -41,29 +42,41 @@
"setupTestFrameworkScriptFile": "<rootDir>/test/setup"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"@babel/cli": "^7.10.4",
"@babel/core": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@testing-library/react": "^10.4.5",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.1.0",
"babel-loader": "^8.1.0",
"coveralls": "^2.13.1",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.1",
"enzyme-to-json": "^3.1.2",
"eslint": "^4.2.0",
"eslint-plugin-react": "^7.1.0",
"eslint": "^7.4.0",
"eslint-config-prettier": "^6.11.0",
"eslint-config-standard": "^14.1.1",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-standard": "^4.0.1",
"html-webpack-include-assets-plugin": "^0.0.6",
"html-webpack-plugin": "^2.29.0",
"jest": "^21.2.1",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-test-renderer": "^16.0.0",
"jest": "^26.1.0",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-bootstrap": ">= 1.0.0",
"react-dom": "^16.13.1",
"react-test-renderer": "^16.13.1",
"webpack": "^3.2.0",
"webpack-dev-server": "^2.5.1"
},
"peerDependencies": {
"react": "^15.5.0 || ^16.0.0"
"react": ">= 16.0.0",
"react-bootstrap": ">= 1.0.0"
},
"dependencies": {
"react-bootstrap": ">= 0.29.0",
"react-maskedinput": "^3.0.0 || ^4.0.0"
"react-maskedinput": "^4.0.1"
}
}
20 changes: 5 additions & 15 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,7 @@
import React from 'react';
import React from "react";
import MaskedInput from "react-maskedinput";
import { FormControl } from "react-bootstrap";

import MaskedInput from 'react-maskedinput';
import { FormControl } from 'react-bootstrap';

export default class MaskedFormControl extends FormControl {
render() {
const props = Object.assign({}, this.props, { componentClass: MaskedInput });

return React.createElement(FormControl, props);
}
export default function MaskedFormControl(props) {
return <FormControl as={MaskedInput} {...props} />;
}

// FormControl has a componentClass prop which
// MaskedFormControl always overrides to be a
// MaskedInput.
delete MaskedFormControl.propTypes.componentClass;
95 changes: 19 additions & 76 deletions test/__snapshots__/index.test.js.snap
Original file line number Diff line number Diff line change
@@ -1,87 +1,30 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Component passes complex props through to FormControl and MaskedInput 1`] = `
<MaskedFormControl
bsClass="my-form-control"
bsSize="large"
componentClass="input"
id="my-id"
inputRef={[Function]}
mask="111-111-1111"
placeholder="555-555-5555"
size={10}
>
<FormControl
bsClass="my-form-control"
bsSize="large"
componentClass={[Function]}
<div>
<input
bsclass="my-form-control"
bssize="large"
class="form-control form-control-10"
id="my-id"
inputRef={[Function]}
mask="111-111-1111"
maxlength="12"
placeholder="555-555-5555"
size={10}
>
<MaskedInput
className="my-form-control input-lg"
id="my-id"
mask="111-111-1111"
placeholder="555-555-5555"
size={10}
type={undefined}
value=""
>
<input
className="my-form-control input-lg"
id="my-id"
mask="111-111-1111"
maxLength={12}
onChange={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
onPaste={[Function]}
placeholder="555-555-5555"
size={10}
type={undefined}
value=""
/>
</MaskedInput>
</FormControl>
</MaskedFormControl>
size="12"
value=""
/>
</div>
`;

exports[`Component renders correctly with basic props 1`] = `
<MaskedFormControl
bsClass="form-control"
componentClass="input"
mask="111-111-1111"
>
<FormControl
bsClass="form-control"
componentClass={[Function]}
<div>
<input
class="form-control"
mask="111-111-1111"
>
<MaskedInput
className="form-control"
id={undefined}
mask="111-111-1111"
type={undefined}
value=""
>
<input
className="form-control"
id={undefined}
mask="111-111-1111"
maxLength={12}
onChange={[Function]}
onKeyDown={[Function]}
onKeyPress={[Function]}
onPaste={[Function]}
placeholder="___-___-____"
size={12}
type={undefined}
value=""
/>
</MaskedInput>
</FormControl>
</MaskedFormControl>
maxlength="12"
placeholder="___-___-____"
size="12"
value=""
/>
</div>
`;
Loading

0 comments on commit c4cb751

Please sign in to comment.