update componentInput

package.json

@@ -34,7 +34,8 @@
     "react": "^16.12.0"
   },
   "dependencies": {
-    "classnames": "^2.3.1"
+    "classnames": "^2.3.1",
+    "umi": "^3.4.25"
   },
   "devDependencies": {
     "@ant-design/mobile-touchable": "^3.0.0-alpha.8",

src/Button/index.scss

@@ -1,8 +1,8 @@
 .h-button {
   width: 100px;
-  line-height: 35px;
-  height: 35px;
-  background: lightskyblue;
+  // line-height: 35px;
+  // height: 35px;
+  // background: lightskyblue;
   font-size: 20px;
   text-align: center;
   &.h-button-loading {

src/Input/PropsType.ts

@@ -0,0 +1,41 @@
+import React, { ReactNode } from 'react';
+
+/**
+ * Input properties
+ */
+export default interface InputPropsType {
+  maxlength?: number;
+  placeholder?: string;
+  type?:
+    | 'button'
+    | 'checkbox'
+    | 'text'
+    | 'textarea'
+    | 'password'
+    | 'reset'
+    | 'submit'
+    | 'number';
+  value?: string;
+  className?: string;
+  prefixCls?: string;
+  bordered?: boolean;
+  id?: string;
+  disabled?: boolean;
+  size?: 'default' | 'large' | 'small';
+  addonBefore?: ReactNode;
+  addonAfter?: ReactNode;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  defaultValue?: string;
+  onChage?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  [propName: string]: any;
+}
+
+export const defaultProps = {
+  precls: 'h-input',
+  bordered: true,
+  size: 'default',
+};

src/Input/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input Input render correctly 1`] = `
+<Fragment>
+  <span
+    className="h-input-wrap"
+  >
+    <input
+      className="h-input"
+      onChange={[Function]}
+      onFocus={[Function]}
+      onInput={[Function]}
+      onKeyDown={[Function]}
+    />
+  </span>
+
+</Fragment>
+`;

src/Input/__tests__/index.spec.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import Input from '..';
+import Icon from '..';
+import toJson from 'enzyme-to-json';
+
+describe('Input', () => {
+  it('Input render correctly', () => {
+    const wrapper = shallow(<Input>default</Input>);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  it('className', () => {
+    const wrapper = shallow(<Input className="propsCls">button</Input>);
+
+    expect(wrapper.find('.h-input').hasClass('propsCls')).toBeTruthy();
+  });
+
+  it('size', () => {
+    const wrapper = shallow(<Input size="large">large</Input>);
+
+    expect(wrapper.find('.h-input').hasClass('h-input-lg')).toBeTruthy();
+  });
+
+  it('defaultValue', () => {
+    const wrapper = shallow(<Input defaultValue="default"></Input>);
+
+    expect(wrapper.find('.h-input').props().defaultValue).toBe('default');
+  });
+
+  it('addon', () => {
+    const wrapper = shallow(<Input addonBefore="http://"></Input>);
+    expect(wrapper.find('.h-input-addon').text()).toBe('http://');
+  });
+
+  it('limit maxlength', () => {
+    const wrapper = shallow(<Input maxlength={5} />);
+    expect(wrapper.find('.h-input').text().length).toBeLessThan(6);
+  });
+});
+
+describe('prefix and suffix', () => {
+  it('prefix', () => {
+    const wrapper = shallow(<Input prefix="prefix" />);
+    expect(wrapper.find('.h-input-prefix')).toBeTruthy();
+  });
+  it('suffix', () => {
+    const wrapper = shallow(<Input suffix="suffix" />);
+    expect(wrapper.find('.h-input-suffix')).toBeTruthy();
+  });
+});

src/Input/index.md

@@ -0,0 +1,38 @@
+---
+title: Input
+nav:
+  title: 组件
+  path: /components
+---
+
+## 基础使用
+
+### type
+
+```tsx
+import React from 'react';
+import { Input, Icon } from 'hugSun-UI';
+const [val, setVal] = React.useState(null);
+
+const setProps = {};
+export default () => {
+  return (
+    <>
+      <span style={{ fontSize: '16px' }}>基本-大小</span>
+      <Input></Input>
+      <Input size="large"></Input>
+      <span style={{ fontSize: '16px' }}> 带默认值</span>
+      <Input defaultValue="默认值"></Input>
+      <Input value="初始值"></Input>
+      <span style={{ fontSize: '16px' }}>限制长度为5</span>
+      <Input maxlength={5}></Input>
+      <span style={{ fontSize: '16px' }}>带标签的 input</span>
+      <Input addonBefore="before" addonAfter="after"></Input>
+      <span style={{ fontSize: '16px' }}>带有前缀图标的 input</span>
+      <Input prefix={<Icon type="loading" />}></Input>
+    </>
+  );
+};
+```
+
+<API></API>

src/Input/index.scss

@@ -0,0 +1,86 @@
+.h-input-wrap{
+  font-size: 14px;
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap; // 不换行
+  width: 100%;
+  justify-content: center;
+  border: 1px solid #ddd;
+
+  .h-input-addon{
+    position: relative;
+    padding: 0 11px;
+    font-weight: normal;
+    text-align: center;
+    background-color: #fafafa;
+    border-radius: 2px;
+    transition: all 0.3s;
+    max-width: 50px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    /* 设置内容垂直居中*/
+    &::before{
+      display: inline-block;
+      content: "";
+      height: 100%;
+      vertical-align: middle;
+    }
+    /* --*/
+
+    &:first-child {
+      border-right: 1px solid #ddd;
+    }
+    &:last-child {
+      border-left: 1px solid #ddd;
+    }
+  }
+  // affix
+  .h-input-affix-wrap {
+    display: inline-flex;
+    width: 100%;
+    padding: 4px;  
+    border-radius: 2px;
+    // border: 1px solid #999;
+    box-sizing: border-box;
+    background-color: #fff;
+    .h-input-affix {
+      &::before{
+        display: inline-block;
+        content: "";
+        height: 100%;
+        vertical-align: middle;
+      }
+      padding:4px;
+      .h-affix {
+        width: 100%; 
+      }
+    }
+  }
+  .h-input {
+    padding-left: 10px;
+    border: none;
+    flex:1;
+    width: 100%;
+    outline: none;
+    height: 30px;
+    line-height: 30px;
+    &:focus {
+      outline: none;
+    }
+    &.h-input-lg{
+      height: 40px;
+      line-height: 40px;
+    }
+    &.h-input-sm{
+      height: 20px;
+      line-height: 20px;
+    }
+    &.h-input-borderless {
+      border: none
+    }
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+  }
+}