feat: add input

Author: foryuki

examples/.storybook/addons.js

@@ -1,2 +1 @@
 import '@storybook/addon-options/register'
-import '@storybook/addon-actions/register'

examples/stories/example.tsx

@@ -1,25 +1,37 @@
-import { action } from '@storybook/addon-actions'
-import Sample from 'or-input'
+import { Input } from 'or-input'
 import React, { PureComponent } from 'react'
 
-const handleClick = action('sample-click')
-
 export default class Example extends PureComponent<{}, {}> {
+  state = {
+    name: '',
+    age: ''
+  }
+
   render() {
     return (
       <div>
-        <h1>button type:</h1>
-        <div>
-          <Sample type="primary" onClick={handleClick}>
-            ADD TO CART
-          </Sample>
-          <Sample onClick={handleClick}>SIGN UP</Sample>
-          <Sample type="warning" onClick={handleClick}>
-            DELETE
-          </Sample>
-          <Sample onClick={handleClick}>TOO LOOOOOOOOOOOOOOOOOOG</Sample>
-        </div>
+        <Input
+          placeholder="name"
+          value={this.state.name}
+          maxlength={12}
+          onChange={this.handleChange('name')}
+        />
+        <Input
+          numericInput={true}
+          placeholder="age"
+          value={this.state.age}
+          maxlength={12}
+          onChange={this.handleChange('age')}
+        />
       </div>
     )
   }
+
+  handleChange = state => {
+    return value => {
+      this.setState({
+        [`${state}`]: value
+      })
+    }
+  }
 }

examples/stories/index.story.tsx

@@ -1,21 +1,17 @@
-import { action } from '@storybook/addon-actions'
 import { withInfo } from '@storybook/addon-info'
 import { storiesOf } from '@storybook/react'
 import React from 'react'
 
-import Sample from 'or-input'
 import { previewCode } from './util'
 
 import Example from './example'
 
 import './styles.scss'
 
-const handleClick = action('basic-click')
 storiesOf('or-sample', module)
   .addDecorator(
     withInfo({
       inline: true,
-      propTables: [Sample],
       propTablesExclude: [Example],
       styles: {
         jsxInfoContent: {
@@ -25,7 +21,6 @@ storiesOf('or-sample', module)
       }
     })
   )
-  .add('basic', () => <Sample onClick={handleClick}>Test</Sample>)
   .add('sample', () => <Example />, {
     info: {
       source: false,

src/Input.tsx

@@ -0,0 +1,73 @@
+import clx from 'classnames'
+import React, { PureComponent } from 'react'
+
+interface Props {
+  /**
+   * additional classname for input
+   */
+  classname?: string
+
+  type?: 'text' | 'number'
+
+  numericInput?: boolean
+
+  placeholder?: string
+
+  value: string
+
+  maxlength?: number
+
+  withClearIcon?: boolean
+
+  /**
+   * callback triggered input's onchange event
+   **/
+  onChange?: (value) => void
+}
+
+export class Input extends PureComponent<Props, {}> {
+  render() {
+    const {
+      classname,
+      placeholder,
+      value,
+      maxlength,
+      withClearIcon = true
+    } = this.props
+    const inputClass = clx(classname, 'or-input')
+
+    return (
+      <div className={inputClass}>
+        <input
+          placeholder={placeholder}
+          value={value}
+          maxLength={maxlength}
+          onChange={this.handleChange}
+        />
+        {withClearIcon && (
+          <div className="or-clear-icon" onClick={this.handleClear} />
+        )}
+      </div>
+    )
+  }
+
+  handleChange = (e: React.FormEvent<HTMLInputElement>) => {
+    const { onChange, numericInput = false } = this.props
+    const { value } = e.currentTarget
+    if (numericInput && typeof onChange === 'function') {
+      const reg = /^[0-9]+$/
+      if (reg.test(value) || value === '') {
+        onChange(value)
+      }
+    } else {
+      onChange(value)
+    }
+  }
+
+  handleClear = () => {
+    const { onChange } = this.props
+    if (typeof onChange === 'function') {
+      onChange('')
+    }
+  }
+}

src/Sample.tsx

@@ -1,2 +1,2 @@
 import './styles.scss'
-export { Sample as default } from './Sample'
+export { Input } from './Input'

src/index.ts

@@ -1,45 +1,34 @@
 @import "~or-theme";
 
-.or-btn {
+.or-input {
+  position: relative;
   display: inline-block;
-  min-width: 120px;
-  padding: $btn-padding-y $btn-padding-x;
-  background-color: $white;
-  color: $gray8;
-  border-width: 1px;
-  border-color: $gray8;
-  border-style: solid;
-  font-size: 14px;
-  border-radius: 1px;
-  text-align: center;
-  box-sizing: border-box;
-  font-family: $font-family;
-  cursor: pointer;
 
-  &:hover {
-    background-color: $gray8;
-    color: $white;
+  input{
+    outline: none;
+    line-height: 38px;
+    height: 38px;
+    padding: 0 5px;
+    font-size: 14px;
   }
-}
-
-.or-btn-primary {
-  background-color: $primary-color;
-  color: $white;
-  border-color: $primary-color;
 
-  &:hover {
-    background-color: $primary-color0;
-    border-color: $primary-color0;
-  }
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    /* display: none; <- Crashes Chrome on hover */
+    -webkit-appearance: none;
+    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
 }
 
-.or-btn-warning {
-  background-color: $warning-color;
-  color: $white;
-  border-color: $warning-color;
-
-  &:hover {
-    background-color: $warning-color0;
-    border-color: $warning-color0;
+  .or-clear-icon {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+    width: 15px;
+    height: 15px;
+    background-color: #aaa;
+    border-radius: 50%;
+    cursor: pointer;
   }
 }
+

src/styles.scss

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "esnext",
+    "target": "ESNext",
     "module": "commonjs",
     "baseUrl": "./src",
     "declarationDir": "./lib",