Merge pull request #17 from bymi15/feat/add-format-display-text

feat: add format display text prop

Author: bymi15

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.prettierrc

@@ -7,5 +7,5 @@
   "jsxBracketSameLine": false,
   "arrowParens": "always",
   "trailingComma": "none",
-  "endOfLine":"auto"
+  "endOfLine": "lf"
 }

.releaserc

@@ -1,14 +1,23 @@
 {
-  "branches": ["main", "next"],
+  "branches": [
+    "main",
+    "next"
+  ],
   "plugins": [
     "@semantic-release/commit-analyzer",
     "@semantic-release/release-notes-generator",
     "@semantic-release/changelog",
     "@semantic-release/npm",
-    ["@semantic-release/git", {
-      "assets": ["package.json", "CHANGELOG.md"],
-      "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
-    }],
+    [
+      "@semantic-release/git",
+      {
+        "assets": [
+          "package.json",
+          "CHANGELOG.md"
+        ],
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ],
     "@semantic-release/github"
   ]
-}
+}

.travis.yml

@@ -12,3 +12,5 @@ script:
   - npm run semantic-release
 notifications:
   email: false
+git:
+  autocrlf: input

CHANGELOG.md

@@ -1,132 +1,113 @@
 # [4.2.0](https://github.com/bymi15/react-edit-text/compare/v4.1.0...v4.2.0) (2021-08-22)
 
-
 ### Features
 
-* add onBlur callback ([850adce](https://github.com/bymi15/react-edit-text/commit/850adce60b529c0ccab9c4ecebe20d3ef1d7f189))
+- add onBlur callback ([850adce](https://github.com/bymi15/react-edit-text/commit/850adce60b529c0ccab9c4ecebe20d3ef1d7f189))
 
 # [4.1.0](https://github.com/bymi15/react-edit-text/compare/v4.0.3...v4.1.0) (2021-07-26)
 
-
 ### Features
 
-* add onEditMode callback prop ([836e58d](https://github.com/bymi15/react-edit-text/commit/836e58d23da12923ae8849952e23a3f78281d58b))
+- add onEditMode callback prop ([836e58d](https://github.com/bymi15/react-edit-text/commit/836e58d23da12923ae8849952e23a3f78281d58b))
 
 ## [4.0.3](https://github.com/bymi15/react-edit-text/compare/v4.0.2...v4.0.3) (2021-04-03)
 
-
 ### Bug Fixes
 
-* force minor version update to update readme in npmjs ([d079ab9](https://github.com/bymi15/react-edit-text/commit/d079ab94acaf2cfdbe96a178f786e01edb6a092a))
+- force minor version update to update readme in npmjs ([d079ab9](https://github.com/bymi15/react-edit-text/commit/d079ab94acaf2cfdbe96a178f786e01edb6a092a))
 
 ## [4.0.2](https://github.com/bymi15/react-edit-text/compare/v4.0.1...v4.0.2) (2021-04-03)
 
-
 ### Bug Fixes
 
-* setSelectionRange causing bugs for input types that are not text ([777fba9](https://github.com/bymi15/react-edit-text/commit/777fba9f5d401d4374b653e6ae4f7f39b2c2adca))
+- setSelectionRange causing bugs for input types that are not text ([777fba9](https://github.com/bymi15/react-edit-text/commit/777fba9f5d401d4374b653e6ae4f7f39b2c2adca))
 
 ## [4.0.1](https://github.com/bymi15/react-edit-text/compare/v4.0.0...v4.0.1) (2021-03-09)
 
-
 ### Bug Fixes
 
-* upgrade package to fix security issue ([96b5914](https://github.com/bymi15/react-edit-text/commit/96b59148c78203db085983fe04db65491d3f780b))
+- upgrade package to fix security issue ([96b5914](https://github.com/bymi15/react-edit-text/commit/96b59148c78203db085983fe04db65491d3f780b))
 
 # [4.0.0](https://github.com/bymi15/react-edit-text/compare/v3.0.1...v4.0.0) (2021-02-19)
 
-
 ### Features
 
-* add previousValue field to onSave callback response ([3057b92](https://github.com/bymi15/react-edit-text/commit/3057b92078bc95e4cb3a6ddb654c0611df2e3f67))
-* move cursor to end of text on focus ([3fde4bd](https://github.com/bymi15/react-edit-text/commit/3fde4bde2ab8dc1f6065bc7900d5bddfbf090a24))
-
+- add previousValue field to onSave callback response ([3057b92](https://github.com/bymi15/react-edit-text/commit/3057b92078bc95e4cb3a6ddb654c0611df2e3f67))
+- move cursor to end of text on focus ([3fde4bd](https://github.com/bymi15/react-edit-text/commit/3fde4bde2ab8dc1f6065bc7900d5bddfbf090a24))
 
 ### BREAKING CHANGES
 
-* fix handleBlur to correctly revert changes when escape key is pressed
+- fix handleBlur to correctly revert changes when escape key is pressed
 
 ## [3.0.1](https://github.com/bymi15/react-edit-text/compare/v3.0.0...v3.0.1) (2021-01-13)
 
-
 ### Bug Fixes
 
-* allow onSave callback to be triggered when used with onChange ([6508ea4](https://github.com/bymi15/react-edit-text/commit/6508ea47411a422ce1ab63d2224534a6b665124a))
+- allow onSave callback to be triggered when used with onChange ([6508ea4](https://github.com/bymi15/react-edit-text/commit/6508ea47411a422ce1ab63d2224534a6b665124a))
 
 # [3.0.0](https://github.com/bymi15/react-edit-text/compare/v2.1.3...v3.0.0) (2021-01-13)
 
-
 ### Features
 
-* add controllable component for both EditText and EditTextarea ([5d34a65](https://github.com/bymi15/react-edit-text/commit/5d34a65d9892451c7846a49e8f96a3629f43b821))
-* add controlled values (defaultValue, value, onChange) ([516dd3c](https://github.com/bymi15/react-edit-text/commit/516dd3cb5a3120495db06f732a802d67a2969ca4))
-
+- add controllable component for both EditText and EditTextarea ([5d34a65](https://github.com/bymi15/react-edit-text/commit/5d34a65d9892451c7846a49e8f96a3629f43b821))
+- add controlled values (defaultValue, value, onChange) ([516dd3c](https://github.com/bymi15/react-edit-text/commit/516dd3cb5a3120495db06f732a802d67a2969ca4))
 
 ### BREAKING CHANGES
 
-* add defaultValue and onChange props to allow controllable components
+- add defaultValue and onChange props to allow controllable components
 
 ## [2.1.3](https://github.com/bymi15/react-edit-text/compare/v2.1.2...v2.1.3) (2020-11-17)
 
-
 ### Bug Fixes
 
-* **EditTextarea:** fix newline not showing in view mode bug ([6a21fa4](https://github.com/bymi15/react-edit-text/commit/6a21fa4dd4b78c5ccb02e87ebc3d049d16170733))
+- **EditTextarea:** fix newline not showing in view mode bug ([6a21fa4](https://github.com/bymi15/react-edit-text/commit/6a21fa4dd4b78c5ccb02e87ebc3d049d16170733))
 
 ## [2.1.2](https://github.com/bymi15/react-edit-text/compare/v2.1.1...v2.1.2) (2020-11-16)
 
-
 ### Bug Fixes
 
-* fix css bug ([ddab856](https://github.com/bymi15/react-edit-text/commit/ddab8564ab2b3ae3c42c9d7a381126ccca32e4f6))
+- fix css bug ([ddab856](https://github.com/bymi15/react-edit-text/commit/ddab8564ab2b3ae3c42c9d7a381126ccca32e4f6))
 
 ## [2.1.1](https://github.com/bymi15/react-edit-text/compare/v2.1.0...v2.1.1) (2020-11-16)
 
-
 ### Bug Fixes
 
-* fix browser compatibility issue with thin scrollbar ([822ec70](https://github.com/bymi15/react-edit-text/commit/822ec709872da0ff671549caf8b9d8d3a15f908a))
+- fix browser compatibility issue with thin scrollbar ([822ec70](https://github.com/bymi15/react-edit-text/commit/822ec709872da0ff671549caf8b9d8d3a15f908a))
 
 # [2.1.0](https://github.com/bymi15/react-edit-text/compare/v2.0.0...v2.1.0) (2020-11-16)
 
-
 ### Features
 
-* add scrollbar thin UI for EditTextarea ([82ccfd8](https://github.com/bymi15/react-edit-text/commit/82ccfd8bba5018900a77a7210e985a56e1a47319))
+- add scrollbar thin UI for EditTextarea ([82ccfd8](https://github.com/bymi15/react-edit-text/commit/82ccfd8bba5018900a77a7210e985a56e1a47319))
 
 # [2.0.0](https://github.com/bymi15/react-edit-text/compare/v1.1.0...v2.0.0) (2020-11-05)
 
-
 ### Features
 
-* **EditTextarea:** add textarea component ([9b88363](https://github.com/bymi15/react-edit-text/commit/9b88363ae17320511c720a5b8ecfdfc80e1cf394))
-* **example:** update documentation page ([16da811](https://github.com/bymi15/react-edit-text/commit/16da811a1ed3f8214d7af4c26e1bac8d6762ab46))
-* add EditTextarea component ([bc4eb9a](https://github.com/bymi15/react-edit-text/commit/bc4eb9af793ca6d99d08cd19d15e2ac7ec0ebbe6))
-
+- **EditTextarea:** add textarea component ([9b88363](https://github.com/bymi15/react-edit-text/commit/9b88363ae17320511c720a5b8ecfdfc80e1cf394))
+- **example:** update documentation page ([16da811](https://github.com/bymi15/react-edit-text/commit/16da811a1ed3f8214d7af4c26e1bac8d6762ab46))
+- add EditTextarea component ([bc4eb9a](https://github.com/bymi15/react-edit-text/commit/bc4eb9af793ca6d99d08cd19d15e2ac7ec0ebbe6))
 
 ### BREAKING CHANGES
 
-* split up default export into EditText and EditTextarea exports
+- split up default export into EditText and EditTextarea exports
 
 # [1.1.0](https://github.com/bymi15/react-edit-text/compare/v1.0.1...v1.1.0) (2020-10-28)
 
-
 ### Features
 
-* add readonly prop ([47d5a38](https://github.com/bymi15/react-edit-text/commit/47d5a38e3b3bf5efe40bca35a94b4da738c47018))
-* **example:** add example for readonly prop ([34d7646](https://github.com/bymi15/react-edit-text/commit/34d7646bea482793e4ce77793ca7d38a8604487b))
+- add readonly prop ([47d5a38](https://github.com/bymi15/react-edit-text/commit/47d5a38e3b3bf5efe40bca35a94b4da738c47018))
+- **example:** add example for readonly prop ([34d7646](https://github.com/bymi15/react-edit-text/commit/34d7646bea482793e4ce77793ca7d38a8604487b))
 
 ## [1.0.1](https://github.com/bymi15/react-edit-text/compare/v1.0.0...v1.0.1) (2020-10-28)
 
-
 ### Bug Fixes
 
-* **styles:** fix invalid css color for placeholder ([1bf8159](https://github.com/bymi15/react-edit-text/commit/1bf81599181a6bdf4b7bb5275eb7e3284acb5719))
+- **styles:** fix invalid css color for placeholder ([1bf8159](https://github.com/bymi15/react-edit-text/commit/1bf81599181a6bdf4b7bb5275eb7e3284acb5719))
 
 # 1.0.0 (2020-10-14)
 
-
 ### Features
 
-* **EditText:** add EditText component ([a953e78](https://github.com/bymi15/react-edit-text/commit/a953e7894cd1c424f7c6e518e8d3c63b8c228b8f))
-* **example:** add demo web page ([854e68c](https://github.com/bymi15/react-edit-text/commit/854e68c4013a9be8ccd2b255c6bd57bdeca22cf2))
+- **EditText:** add EditText component ([a953e78](https://github.com/bymi15/react-edit-text/commit/a953e7894cd1c424f7c6e518e8d3c63b8c228b8f))
+- **example:** add demo web page ([854e68c](https://github.com/bymi15/react-edit-text/commit/854e68c4013a9be8ccd2b255c6bd57bdeca22cf2))

CODE_OF_CONDUCT.md

@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
+- The use of sexualized language or imagery and unwelcome sexual attention or
+  advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a
+  professional setting
 
 ## Our Responsibilities
 

README.md

@@ -25,7 +25,7 @@
 
 ## Demo
 
-Feel free to check out the [live demo](https://bymi15.github.io/react-edit-text)
+Please visit https://brianmin.com/react-edit-text/ for a live demo and various examples.
 
 ## Install
 
@@ -65,20 +65,21 @@ class Example extends Component {
 
 ### Shared props
 
-| Prop         | Type     | Required | Default | Description                                             |
-| ------------ | -------- | -------- | ------- | ------------------------------------------------------- |
-| id           | string   | No       |         | HTML DOM id attribute                                   |
-| name         | string   | No       |         | HTML input name attribute                               |
-| className    | string   | No       |         | HTML class attribute                                    |
-| value        | string   | No       |         | Value of the component                                  |
-| defaultValue | string   | No       |         | Default value of the component                          |
-| placeholder  | string   | No       | ''      | Placeholder value                                       |
-| onSave       | function | No       |         | Callback function triggered when input is saved         |
-| onChange     | function | No       |         | Callback function triggered when input is changed       |
-| onEditMode   | function | No       |         | Callback function triggered when component is clicked   |
-| onBlur       | function | No       |         | Callback function triggered when input is blurred       |
-| style        | object   | No       |         | Sets CSS style of input and view component              |
-| readonly     | bool     | No       | false   | Disables the input and only displays the view component |
+| Prop              | Type     | Required | Default  | Description                                                           |
+| ----------------- | -------- | -------- | -------- | --------------------------------------------------------------------- |
+| id                | string   | No       |          | HTML DOM id attribute                                                 |
+| name              | string   | No       |          | HTML input name attribute                                             |
+| className         | string   | No       |          | HTML class attribute                                                  |
+| value             | string   | No       |          | Value of the component                                                |
+| defaultValue      | string   | No       |          | Default value of the component                                        |
+| placeholder       | string   | No       | ''       | Placeholder value                                                     |
+| formatDisplayText | function | No       | (x) => x | Callback function applied on the value to display the formatted value |
+| onSave            | function | No       |          | Callback function triggered when input is saved                       |
+| onChange          | function | No       |          | Callback function triggered when input is changed                     |
+| onEditMode        | function | No       |          | Callback function triggered when component is clicked                 |
+| onBlur            | function | No       |          | Callback function triggered when input is blurred                     |
+| style             | object   | No       |          | Sets CSS style of input and view component                            |
+| readonly          | bool     | No       | false    | Disables the input and only displays the view component               |
 
 ### EditText props
 

example/public/index.html

@@ -28,9 +28,7 @@
   </head>
 
   <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
 
     <div id="root"></div>
 

example/src/App.js

@@ -1,20 +1,19 @@
 import React from 'react';
-
 import { EditText, EditTextarea } from 'react-edit-text';
 import 'react-edit-text/dist/index.css';
-
-import Navbar from './components/Navbar';
-import Jumbotron from './components/Jumbotron';
-
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import Jumbotron from './components/Jumbotron';
+import Navbar from './components/Navbar';
 import { examples } from './examples';
 
 const App = () => {
   const [text, setText] = React.useState('This is a controlled component');
+  const [price, setPrice] = React.useState('125000.49');
   const [textarea, setTextarea] = React.useState(
     'This is a controlled text area component'
   );
+  const formatPrice = (val) => '$' + Math.round(parseFloat(val));
   const handleSave = ({ name, value, previousValue }) => {
     alert(name + ' saved as: ' + value + ' (prev: ' + previousValue + ')');
   };
@@ -101,6 +100,10 @@ const App = () => {
           <li>
             <b>value</b> sets the value of the component
           </li>
+          <li>
+            <b>formatDisplayValue</b> callback function gets called on the input
+            value and displays the output
+          </li>
           <li>
             <b>onSave</b> callback function returns a {'{'}name, value,
             previousValue{'}'} object when the input is loses focus (
@@ -245,7 +248,7 @@ const App = () => {
                     padding: '15px',
                     fontSize: '24px',
                     color: '#FFF',
-                    backgroundColor: '#000'
+                    backgroundColor: '#2196f3'
                   }}
                   defaultValue='Click me to edit my text'
                 />
@@ -263,6 +266,10 @@ const App = () => {
         <span id='callbacks' />
         <hr />
         <h3>Callback Usage</h3>
+        <div>
+          <b>formatDisplayValue</b> callback function takes in a value and
+          outputs a value. This can be used to format the displayed value.
+        </div>
         <div>
           <b>onSave</b> callback function is triggered when the input field is
           blurred or loses focus (<em>except when the escape key is pressed</em>
@@ -296,6 +303,18 @@ const App = () => {
             <h4>Output</h4>
             <div className='card'>
               <div className='card-body'>
+                <EditText
+                  name='priceInput'
+                  type='number'
+                  style={{
+                    fontSize: '16px',
+                    border: '1px solid #ccc',
+                    marginBottom: '10px'
+                  }}
+                  value={price}
+                  onChange={setPrice}
+                  formatDisplayText={formatPrice}
+                />
                 <EditText
                   name='textbox'
                   style={{ fontSize: '16px', border: '1px solid #ccc' }}

example/src/App.test.js

@@ -1,9 +1,9 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import App from './App'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
 
 it('renders without crashing', () => {
-  const div = document.createElement('div')
-  ReactDOM.render(<App />, div)
-  ReactDOM.unmountComponentAtNode(div)
-})
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});