Text field story

devlato · Mar 30, 2020 · 85db9fd · 85db9fd
1 parent 9751096
commit 85db9fd
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 8 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -3,8 +3,13 @@ import { withKnobs } from '@storybook/addon-knobs';
 
 addDecorator(withKnobs);
 
+const isProduction = process.env.NODE_ENV === 'production';
+
 addParameters({
   options: {
+    isFullscreen: isProduction,
+    enableShortcuts: false,
+    isToolshown: !isProduction,
     name: '<ReactHotKey />',
     theme: {
       brandName: '<ReactHotKey />',

diff --git a/package.json b/package.json
@@ -20,8 +20,8 @@
     "build:code": "cross-env NODE_ENV=production rollup -c rollup.config.js",
     "build": "npm run clean:build && npm run build:code",
     "storybook": "cross-env NODE_ENV=development start-storybook -p 6006 -c .storybook",
-    "storybook:run": "cross-env NODE_ENV=production build-storybook -c .storybook -o docs",
-    "storybook:build": "npm run clean:storybook && npm run storybook:run",
+    "storybook:compile": "cross-env NODE_ENV=production build-storybook -c .storybook -o docs",
+    "storybook:build": "npm run clean:storybook && npm run storybook:compile",
     "pre-push": "npm run lint && npm run test:coverage",
     "prepublish": "npm run clean && npm run build"
   },

diff --git a/src/stories/index.stories.tsx b/src/stories/index.stories.tsx
@@ -22,7 +22,26 @@ export const ReactHotKeyStory_withMixedShortcuts: React.ComponentType = () => (
 );
 ReactHotKeyStory_withMixedShortcuts.displayName = 'ReactHotKeyStory_withMixedShortcuts';
 
-const WrappedComponent: React.ComponentType<Omit<ReactHotKeyProps, 'onKeysPressed'>> = ({ keys }) => {
+export const ReactHotKeyStory_withInputField: React.ComponentType = () => (
+  <WrappedComponent keys="command+shift+s,k o n a m i">
+    <input
+      type="text"
+      placeholder="Type something in"
+      style={{
+        marginTop: 'max(3vw, 3vh)',
+        boxSizing: 'border-box',
+        width: '100%',
+        border: '1px solid #666',
+        borderRadius: 'max(0.5vw, 0.5vh)',
+        padding: 'max(1vw, 1vh)',
+        fontSize: '1.8vw',
+      }}
+    />
+  </WrappedComponent>
+);
+ReactHotKeyStory_withMixedShortcuts.displayName = 'ReactHotKeyStory_withMixedShortcuts';
+
+const WrappedComponent: React.ComponentType<Omit<ReactHotKeyProps, 'onKeysPressed'>> = ({ children, keys }) => {
   const keysKnobs = text('keys', Array.isArray(keys) ? keys.join(',') : keys);
   const onKeysPressedAction = action('onKeysPressed');
 
@@ -45,13 +64,99 @@ const WrappedComponent: React.ComponentType<Omit<ReactHotKeyProps, 'onKeysPresse
         left: 0,
         right: 0,
         fontFamily: 'sans-serif',
-        fontSize: '2vw',
+        fontSize: 'max(2vw, 2vh)',
+        boxSizing: 'border-box',
+        color: '#666',
+        padding: 'max(4vw, 4vh)',
+        margin: 0,
       }}
     >
-      <p>
-        Press&nbsp;<span style={{ fontFamily: 'system, monospace', fontWeight: 600 }}>{keys}</span>&nbsp;to trigger the
-        callback
-      </p>
+      <div
+        style={{
+          display: 'inline-flex',
+          width: 'auto',
+          height: 'auto',
+          flexDirection: 'column',
+          boxSizing: 'border-box',
+          padding: 0,
+          margin: 0,
+        }}
+      >
+        <p style={{ userSelect: 'none', cursor: 'default', pointerEvents: 'none', padding: 0, margin: 0 }}>
+          {Array.isArray(keys) ? (
+            <>
+              Type or press&nbsp;
+              {keys.map((k, i) => (
+                <React.Fragment key={k}>
+                  <span
+                    style={{
+                      fontFamily: 'system, monospace',
+                      fontWeight: 600,
+                      color: '#222',
+                      fontSize: 'max(1.8vw, 1.8vh)',
+                    }}
+                  >
+                    {k.includes(' ') ? k.replace(/\s+?/gim, '') : k}
+                  </span>
+                  {i < keys.length - 1 ? ' or ' : null}
+                </React.Fragment>
+              ))}
+              &nbsp;to trigger the callback
+            </>
+          ) : keys.includes(',') ? (
+            <>
+              Type or press&nbsp;
+              {keys.split(',').map((k, i) => (
+                <React.Fragment key={k}>
+                  <span
+                    style={{
+                      fontFamily: 'system, monospace',
+                      fontWeight: 600,
+                      color: '#222',
+                      fontSize: 'max(1.8vw, 1.8vh)',
+                    }}
+                  >
+                    {k.includes(' ') ? k.replace(/\s+?/gim, '') : k}
+                  </span>
+                  {i < keys.split(',').length - 1 ? ' or ' : null}
+                </React.Fragment>
+              ))}
+              &nbsp;to trigger the callback
+            </>
+          ) : keys.includes('+') ? (
+            <>
+              Press&nbsp;
+              <span
+                style={{
+                  fontFamily: 'system, monospace',
+                  fontWeight: 600,
+                  color: '#222',
+                  fontSize: 'max(1.8vw, 1.8vh)',
+                }}
+              >
+                {keys.includes(' ') ? keys.replace(/\s+?/gim, '') : keys}
+              </span>
+              &nbsp;to trigger the callback
+            </>
+          ) : (
+            <>
+              Type&nbsp;
+              <span
+                style={{
+                  fontFamily: 'system, monospace',
+                  fontWeight: 600,
+                  color: '#222',
+                  fontSize: 'max(1.8vw, 1.8vh)',
+                }}
+              >
+                {keys.includes(' ') ? keys.replace(/\s+?/gim, '') : keys}
+              </span>
+              &nbsp;to trigger the callback
+            </>
+          )}
+        </p>
+        {children}
+      </div>
       <ReactHotKey keys={keysKnobs} onKeysPressed={onKeysPressed} />
     </div>
   );