Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reset the state of the component and its inputs when a different props.value is passed in #155

Open
wants to merge 30 commits into
base: master
Choose a base branch
from
Open

Reset the state of the component and its inputs when a different props.value is passed in #155

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
ab01fe1
Remove yarn.lock file (already have package-lock.json)
acusti Oct 12, 2021
ac537f4
Remove unused dev dependencies
acusti Oct 12, 2021
174a4f0
Remove direct react + react-dom dependencies
acusti Oct 12, 2021
acc76bc
Add prop-types to peer dependencies
acusti Oct 12, 2021
4a4e53e
Upgrade to latest v3 version of webpack-cli
acusti Oct 12, 2021
b2023cd
Upgrade to latest version of sass
acusti Oct 12, 2021
fe4ae2d
Upgrade circle CI docker image to latest stable node
acusti Oct 12, 2021
4f1c037
Upgrade to latest v5 of storybook
acusti Oct 12, 2021
94c2324
Build artifacts for storybook v5 + .gitignore updates
acusti Oct 13, 2021
4ba749a
Remove unused import from ReactCodeInput story
acusti Oct 14, 2021
d971717
Enable early return from filterKeyCodes check
acusti Oct 14, 2021
2731bf8
Assert if input is type=text, not if state.type is text
acusti Oct 14, 2021
dc7f360
Simplify constructor for loop by including < 32 in condition
acusti Oct 14, 2021
9db041f
Remove redundant state().fields test assertion
acusti Oct 14, 2021
9cf9063
Remove unused this.state.fields key
acusti Oct 14, 2021
1ac08b8
Remove redundant this.state.type key and use props
acusti Oct 14, 2021
ca85933
Replace .map() → .forEach() when not using returned value
acusti Oct 14, 2021
50293d5
Add targetIndex variable for e.target.dataset.id
acusti Oct 14, 2021
631bae4
Update focus to input after last pasted value or last input #70
acusti Oct 14, 2021
b65e90e
Use type="text" when props.type=number to avoid browser bugs
acusti Oct 14, 2021
3403072
Remove maxLength so filtered pasted values aren’t truncated
acusti Oct 14, 2021
23a5b4d
Update props.disabled test to assert against render inputs
acusti Oct 14, 2021
e6ef290
Hoist defaultInputStyle out of state into a static constant
acusti Oct 14, 2021
1236d1f
Strip state down to input + value (the other values never update)
acusti Oct 14, 2021
e6b84ca
Add checks + update type to allow props.value to be null | undefined
acusti Oct 15, 2021
643eda9
Add getInputArrayFromProps util, use it to initialize this.state.input
acusti Oct 15, 2021
9affb68
Update state.value + state.input on props change #69 #129
acusti Oct 15, 2021
d952c81
Only reset state when this.props.value has changed
acusti Oct 15, 2021
254ba99
Add story example to illustrate resetting ReactCodeInput #69 #129
acusti Oct 15, 2021
61d697e
Remove duplicate ReactCodeInput import from stories
acusti Oct 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .circleci/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
version: 2
jobs:
build:
docker: &docker_image
- image: circleci/node:7.10
docker:
- image: cimg/node:16.11.1

steps:
- checkout
Expand Down
18 changes: 17 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,20 @@ coverage
.tmp
.idea
.DS_Store
dist
dist

# Source: https://github.com/storybookjs/storybook/issues/8972#issuecomment-559164304

# Ignore unused language chunks and maps
react-syntax-highlighter_languages_highlight_*.*.bundle.js
react-syntax-highlighter_languages_highlight_*.*.bundle.js.map
vendors~react-syntax-highlighter_languages_highlight_*.*.bundle.js
vendors~react-syntax-highlighter_languages_highlight_*.*.bundle.js.map

# Unignore the language highlighter chunks storybook uses for MDX stories
!react-syntax-highlighter_languages_highlight_jsx.*.bundle.js.map
!react-syntax-highlighter_languages_highlight_bash.*.bundle.js.map
!react-syntax-highlighter_languages_highlight_css.*.bundle.js.map
!react-syntax-highlighter_languages_highlight_html.*.bundle.js.map
!react-syntax-highlighter_languages_highlight_tsx.*.bundle.js.map
!react-syntax-highlighter_languages_highlight_typescript.*.bundle.js.map
10 changes: 1 addition & 9 deletions .storybook/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,3 @@
<style>
.react-code-input input[type="number"]::-webkit-outer-spin-button,
.react-code-input input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0; }
.react-code-input input[type="number"] {
-moz-appearance: textfield; }
</style>
<!-- Hotjar Tracking Code for https://40818419.github.io/react-code-input/ -->
<script>
(function(h,o,t,j,a,r){
Expand All @@ -16,4 +8,4 @@
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</script>
53 changes: 0 additions & 53 deletions .storybook/webpack.config.js
View file
Open in desktop

This file was deleted.

Binary file modified docs/favicon.ico
View file
Open in desktop
Binary file not shown.
123 changes: 33 additions & 90 deletions docs/iframe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<title>Storybook</title>
<link rel="shortcut icon" href="favicon.ico?v=1" />




<base target="_parent">

<style>
:not(.sb-show-main) > .sb-main,
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"><base target="_parent"><style>:not(.sb-show-main) > .sb-main,
:not(.sb-show-nopreview) > .sb-nopreview,
:not(.sb-show-errordisplay) > .sb-errordisplay {
display: none;
display: none;
}

.sb-wrapper {
Expand All @@ -26,15 +11,17 @@
left: 0;
right: 0;
padding: 20px;
font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
overflow: auto;
}

.sb-heading {
font-size: 20px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.2px;
margin: 10px 0;
padding-right: 25px;
}

.sb-nopreview {
Expand All @@ -55,89 +42,45 @@
}

.sb-errordisplay {
background-color: rgb(187, 49, 49);
color: #FFF;
border: 20px solid rgb(187, 49, 49);
background: #222;
color: #fff;
z-index: 999999;
}

.sb-errordisplay_code {
font-size: 14px;
width: 100vw;
overflow: auto;
padding: 10px;
background: #000;
color: #eee;
font-family: "Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina", "Andale Mono", "Lucida Console", Consolas, Monaco, monospace;
}
</style>

<script>
if (window.parent !== window) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;
}
</script>
<style>
.react-code-input input[type="number"]::-webkit-outer-spin-button,
.sb-errordisplay pre {
white-space: pre-wrap;
}</style><script>/* globals window */
/* eslint-disable no-underscore-dangle */
try {
if (window.top !== window) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;
}
} catch (e) {
// eslint-disable-next-line no-console
console.warn('unable to connect to top frame for connecting dev tools');
}</script><style>.react-code-input input[type="number"]::-webkit-outer-spin-button,
.react-code-input input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0; }
.react-code-input input[type="number"] {
-moz-appearance: textfield; }
</style>
<!-- Hotjar Tracking Code for https://40818419.github.io/react-code-input/ -->
<script>
(function(h,o,t,j,a,r){
-moz-appearance: textfield; }</style><script>(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:381601,hjsv:5};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
</script>


</head>
<body>




<div class="sb-nopreview sb-wrapper">
<div class="sb-nopreview_main">
<h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
<p>Sorry, but you either have no stories or none are selected somehow.</p>
<ul>
<li>Please check the storybook config.</li>
<li>Try reloading the page.</li>
</ul>
</div>
</div>

<div class="sb-errordisplay sb-wrapper">
<div id="error-message" class="sb-heading"></div>
<pre class="sb-errordisplay_code">
<code id="error-stack"></code>
</pre>
</div>



<div id="root"></div>







<script src="static/runtime~iframe.7161ffe0bb3d969a0dda.bundle.js" defer></script>



<script src="static/vendors~iframe.917d8e8f3e518ec26969.bundle.js" defer></script>



<script src="static/iframe.6bda8d9805b3c00c5208.bundle.js" defer></script>



</body>
</html>
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');</script><style>#root[hidden],
#docs-root[hidden] {
display: none !important;
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.b74c3d32a4afaa0206f0.bundle.js"></script><script src="vendors~main.b74c3d32a4afaa0206f0.bundle.js"></script><script src="main.b74c3d32a4afaa0206f0.bundle.js"></script></body></html>
65 changes: 14 additions & 51 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<title>Storybook</title>
<link rel="shortcut icon" href="favicon.ico?v=1" />




<style>
html, body {
<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>Storybook</title><meta name="viewport" content="width=device-width,initial-scale=1"/><style>html, body {
overflow: hidden;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>

<script>
if (window.parent !== window) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;
}
</script>



</head>
<body>





<div id="root"></div>







<script src="static/runtime~manager.4df74dbc3c7ba7bb0154.bundle.js" defer></script>



<script src="static/manager.4241286b9f806a0a54a0.bundle.js" defer></script>



</body>
</html>
}</style><script>/* globals window */
/* eslint-disable no-underscore-dangle */
try {
if (window.top !== window) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
}
} catch (e) {
// eslint-disable-next-line no-console
console.warn('unable to connect to top frame for connecting dev tools');
}</script><style>#root[hidden],
#docs-root[hidden] {
display: none !important;
}</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['DOCS_MODE'] = false;</script><script src="runtime~main.90e0e11dc1598d88da6c.bundle.js"></script><script src="vendors~main.7fd96032e9ffc0091d7a.bundle.js"></script><script src="main.f8feee2d5b2bcd5e0314.bundle.js"></script></body></html>
Loading