add support for characterWidth for non-monospaced fonts

robonyong · Dec 9, 2018 · 92643d9 · 92643d9
1 parent 318b408
commit 92643d9
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 141 deletions.
diff --git a/example/src/App.js b/example/src/App.js
@@ -48,152 +48,141 @@ export default class App extends Component {
     this.setState({ exampleSet, minLength, value });
   };
 
-  onDisplayInput = event => {
-    this.setState({ value: event.target.value });
-  };
-
-  onMinLengthInput = event => {
-    this.setState({ minLength: event.target.value });
-  };
-
-  onPadDirectionChange = event => {
-    this.setState({ padDirection: event.target.value });
-  };
-
-  onStepInput = event => {
-    this.setState({ step: event.target.value });
-  };
-
-  onBorderWidthInput = event => {
-    this.setState({ borderWidth: event.target.value });
-  };
-
-  onFontSizeInput = event => {
-    this.setState({ fontSize: event.target.value });
-  };
+  generateInputHandler = stateKey => event => this.setState({ [stateKey]: event.target.value });
 
   render() {
     return (
       <div className="container">
         <h3>React Split Flap Display</h3>
-        <div className="flex-container">
-          <div>
-            <Wrapper>
-              <SplitFlapDisplay
-                background={this.state.background}
-                borderColor={this.state.borderColor}
-                borderWidth={this.state.borderWidth}
-                characterSet={typeToCharSetArray[this.state.exampleSet]}
-                fontSize={this.state.fontSize}
-                minLength={this.state.minLength}
-                padDirection={this.state.padDirection}
-                step={this.state.step}
-                textColor={this.state.textColor}
-                value={this.state.value}
-              />
-            </Wrapper>
-            <Wrapper>
-              <div>
-                <label>
-                  display:&nbsp;<input value={this.state.value} onChange={this.onDisplayInput} />
-                </label>
-              </div>
-              <div>
-                character set:&nbsp;
-                <select value={this.state.exampleSet} onChange={this.onSelect}>
-                  <option value="numeric">0-9</option>
-                  <option value="alpha">A-Z</option>
-                  <option value="alphanumeric">A-Z with 0-9</option>
-                  <option value="punctuation">A-Z with punctuation</option>
-                </select>
-              </div>
-              <div>
-                <label>
-                  min length:&nbsp;<input
-                    type="number"
-                    value={this.state.minLength}
-                    onChange={this.onMinLengthInput}
+        <div className="flex-container-vertical">
+          <Wrapper>
+            <SplitFlapDisplay
+              background={this.state.background}
+              borderColor={this.state.borderColor}
+              borderWidth={this.state.borderWidth}
+              characterSet={typeToCharSetArray[this.state.exampleSet]}
+              characterWidth={this.state.characterWidth}
+              fontSize={this.state.fontSize}
+              minLength={this.state.minLength}
+              padDirection={this.state.padDirection}
+              step={this.state.step}
+              textColor={this.state.textColor}
+              value={this.state.value}
+            />
+          </Wrapper>
+          <div className="flex-container-horizontal">
+            <div>
+              <Wrapper>
+                <div>
+                  <label>
+                    display:&nbsp;<input
+                      value={this.state.value}
+                      onChange={this.generateInputHandler('value')}
+                    />
+                  </label>
+                </div>
+                <div>
+                  character set:&nbsp;
+                  <select value={this.state.exampleSet} onChange={this.onSelect}>
+                    <option value="numeric">0-9</option>
+                    <option value="alpha">A-Z</option>
+                    <option value="alphanumeric">A-Z with 0-9</option>
+                    <option value="punctuation">A-Z with punctuation</option>
+                  </select>
+                </div>
+                <div>
+                  character width:&nbsp;<input
+                    value={this.state.characterWidth}
+                    onChange={this.generateInputHandler('characterWidth')}
                   />
-                </label>
-              </div>
-              <div>
-                <label>
-                  pad direction:&nbsp;
+                </div>
+                <div>
                   <label>
-                    <input
-                      type="radio"
-                      value="left"
-                      onChange={this.onPadDirectionChange}
-                      checked={this.state.padDirection === 'left'}
+                    min length:&nbsp;<input
+                      type="number"
+                      value={this.state.minLength}
+                      onChange={this.generateInputHandler('minLength')}
                     />
-                    left
                   </label>
-                  &nbsp;
+                </div>
+                <div>
                   <label>
-                    <input
-                      type="radio"
-                      value="right"
-                      onChange={this.onPadDirectionChange}
-                      checked={this.state.padDirection === 'right'}
+                    pad direction:&nbsp;
+                    <label>
+                      <input
+                        type="radio"
+                        value="left"
+                        onChange={this.generateInputHandler('padDirection')}
+                        checked={this.state.padDirection === 'left'}
+                      />
+                      left
+                    </label>
+                    &nbsp;
+                    <label>
+                      <input
+                        type="radio"
+                        value="right"
+                        onChange={this.generateInputHandler('padDirection')}
+                        checked={this.state.padDirection === 'right'}
+                      />
+                      right
+                    </label>
+                  </label>
+                </div>
+                <div>
+                  <label>
+                    step (ms):&nbsp;<input
+                      type="number"
+                      value={this.state.step}
+                      onChange={this.generateInputHandler('step')}
                     />
-                    right
                   </label>
-                </label>
-              </div>
-              <div>
-                <label>
-                  step (ms):&nbsp;<input
-                    type="number"
-                    value={this.state.step}
-                    onChange={this.onStepInput}
+                </div>
+              </Wrapper>
+              <Wrapper>
+                <div>
+                  background color:&nbsp;
+                  <Swatch
+                    color={this.state.background}
+                    onChange={color => this.setState({ background: color.hex })}
                   />
-                </label>
-              </div>
-            </Wrapper>
-            <Wrapper>
-              <div>
-                background color:&nbsp;
-                <Swatch
-                  color={this.state.background}
-                  onChange={color => this.setState({ background: color.hex })}
-                />
-              </div>
-              <div>
-                border color:&nbsp;
-                <Swatch
-                  color={this.state.borderColor}
-                  onChange={color => this.setState({ borderColor: color.hex })}
-                />
-              </div>
-              <div>
-                text color:&nbsp;
-                <Swatch
-                  color={this.state.textColor}
-                  onChange={color => this.setState({ textColor: color.hex })}
-                />
-              </div>
-            </Wrapper>
-            <Wrapper>
-              <div>
-                border width:&nbsp;<input
-                  value={this.state.borderWidth}
-                  onChange={this.onBorderWidthInput}
-                />
-              </div>
-              <div>
-                font size:&nbsp;<input
-                  value={this.state.fontSize}
-                  onChange={this.onFontSizeInput}
-                />
-              </div>
-            </Wrapper>
-          </div>
-          <div>
+                </div>
+                <div>
+                  border color:&nbsp;
+                  <Swatch
+                    color={this.state.borderColor}
+                    onChange={color => this.setState({ borderColor: color.hex })}
+                  />
+                </div>
+                <div>
+                  text color:&nbsp;
+                  <Swatch
+                    color={this.state.textColor}
+                    onChange={color => this.setState({ textColor: color.hex })}
+                  />
+                </div>
+              </Wrapper>
+              <Wrapper>
+                <div>
+                  border width:&nbsp;<input
+                    value={this.state.borderWidth}
+                    onChange={this.generateInputHandler('borderWidth')}
+                  />
+                </div>
+                <div>
+                  font size:&nbsp;<input
+                    value={this.state.fontSize}
+                    onChange={this.generateInputHandler('fontSize')}
+                  />
+                </div>
+              </Wrapper>
+            </div>
             <CodeBlock
               background={this.state.background}
               borderColor={this.state.borderColor}
               borderWidth={this.state.borderWidth}
               characterSet={typeToCharSet[this.state.exampleSet]}
+              characterWidth={this.state.characterWidth}
               fontSize={this.state.fontSize}
               minLength={this.state.minLength}
               padDirection={this.state.padDirection}

diff --git a/example/src/CodeBlock.js b/example/src/CodeBlock.js
@@ -1,14 +1,15 @@
-import React from "react";
+import React from 'react';
 
 export default ({
   background,
   borderColor,
   borderWidth,
   characterSet,
+  characterWidth,
   fontSize,
   step,
   textColor,
-  value
+  value,
 }) => (
   <pre>
     {`
@@ -17,6 +18,7 @@ export default ({
     borderColor='${borderColor}'
     borderWidth='${borderWidth}'
     characterSet={${characterSet}}
+    characterWidth='${characterWidth}'
     fontSize='${fontSize}'
     step={${step}}
     textColor='${textColor}'

diff --git a/example/src/index.css b/example/src/index.css
@@ -1,7 +1,7 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Menlo', 'monospace';
+  /*font-family: 'Menlo', 'monospace';*/
 }
 
 pre {
@@ -15,10 +15,16 @@ pre {
   padding: 15px;
 }
 
-.flex-container {
+.flex-container-vertical {
   display: flex;
   flex-wrap: wrap;
-  align-items: flex-end;
+  flex-direction: column;
+}
+
+.flex-container-horizontal {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
 }
 
 .wrapper {

diff --git a/src/SplitFlapDisplay.js b/src/SplitFlapDisplay.js
@@ -15,6 +15,7 @@ type Props = {
   borderColor: string,
   borderWidth: string,
   characterSet: Array<string>,
+  characterWidth?: string,
   fontSize: string,
   minLength?: number,
   padDirection: string,
@@ -157,6 +158,7 @@ export default class SplitFlapDisplay extends React.Component<Props, State> {
       background,
       borderColor,
       borderWidth,
+      characterWidth,
       fontSize,
       padDirection,
       step,
@@ -188,6 +190,7 @@ export default class SplitFlapDisplay extends React.Component<Props, State> {
             key={`split-flap-${idx}`}
             background={background}
             borderWidth={borderWidth}
+            characterWidth={characterWidth}
             prevValue={v === ' ' ? '\u2007' : v}
             step={step}
             textColor={textColor}

diff --git a/src/character.js b/src/character.js
@@ -7,6 +7,7 @@ import Panel, { FlipPanel } from './Panel';
 type Props = {
   background: string,
   borderWidth: string,
+  characterWidth: ?string,
   prevValue: string,
   step: number,
   textColor: string,
@@ -17,6 +18,9 @@ type Props = {
 const Character = styled.div`
   background: ${({ background }: { background: string }): string => background};
   display: flex;
+  justify-content: center;
+  width: ${({ characterWidth }: { characterWidth: ?string }): string =>
+    characterWidth || 'initial'};
   padding: 0.5em;
   position: relative;
   &:after {
@@ -40,12 +44,13 @@ const Character = styled.div`
 export default ({
   background,
   borderWidth,
+  characterWidth,
   prevValue,
   step,
   textColor,
   value,
 }: Props): React.Element<*> => (
-  <Character background={background} borderWidth={borderWidth}>
+  <Character background={background} borderWidth={borderWidth} characterWidth={characterWidth}>
     <Panel position="top" background={background} textColor={textColor} value={value} />
     <Panel position="bottom" background={background} textColor={textColor} value={prevValue} />
     {prevValue !== value && (

diff --git a/src/test.js b/src/test.js