feat(input): add new input component (#77)

* feat(input): add new input component re #62 * add clearable to Input component * optimize clearable codes * improve input docs * optimize remove icon * add input test and optimize code * remove uncontrolled input * fix input test and optimize code * update input docs * add focus and moseEnter events to input * fix state variable of icon to focus * remove ClearableInput from src * fix console log errors * optimize Clear test of Input * fix tests * optimize tests, docs and lg icon style * complete tests of input * fix home page style issue * add input public api * remove redundant code in test
webapp-suite · Oct 10, 2019 · 653de93 · 653de93
1 parent 2712b67
commit 653de93
Show file tree

Hide file tree

Showing 18 changed files with 1,442 additions and 319 deletions.
diff --git a/site/apps/apps.json b/site/apps/apps.json
@@ -154,20 +154,24 @@
     "defaultOpen":false,
     "components":[
       {
-        "name":"Form",
-        "cn":"表单"
+        "name":"Switch",
+        "cn":"开关"
       },
       {
-        "name":"Menu",
-        "cn":"菜单"
+        "name":"Input",
+        "cn":"输入框"
       },
       {
         "name":"Dropdown",
         "cn":"下拉菜单"
       },
       {
-        "name":"Switch",
-        "cn":"开关"
+        "name":"Form",
+        "cn":"表单"
+      },
+      {
+        "name":"Menu",
+        "cn":"菜单"
       },
       {
         "name":"DatePicker",

diff --git a/site/pages/Home/Section1/index.less b/site/pages/Home/Section1/index.less
@@ -18,6 +18,7 @@
   }
   &-content {
     padding-bottom: @ui-unit;
+    float: right;
     h2 {
       color: @theme;
       margin-top: .5em;

diff --git a/site/widgets/Doc/index.js b/site/widgets/Doc/index.js
@@ -9,25 +9,29 @@ const Doc = props => {
     <div className="doc">
       <header className="doc__header">
         <div className="doc__title">
-          {props.name.charCodeAt(0) < 97 ? '<' + props.name + ' />' : props.name}
+          {props.name.charCodeAt(0) < 97
+            ? '<' + props.name + ' />'
+            : props.name}
         </div>
       </header>
       {props.props && props.props.length ? (
         <table>
           <thead>
             <tr>
-              <th>属性</th>
-              <th>类型</th>
+              <th>Property</th>
+              <th>Type</th>
               {/* <th>默认</th> */}
-              <th>说明</th>
+              <th>Description</th>
             </tr>
           </thead>
           <tbody>
             {props.props.map(prop => (
               <tr key={prop.name}>
-                <td className={cx('doc__prop-name', {
-                  'doc__prop-name--required': prop.required
-                })}>
+                <td
+                  className={cx('doc__prop-name', {
+                    'doc__prop-name--required': prop.required
+                  })}
+                >
                   {prop.name}
                 </td>
                 <td className="doc__prop-type">{prop.type}</td>
@@ -40,47 +44,51 @@ const Doc = props => {
           </tbody>
         </table>
       ) : null}
-      {props.apis && props.apis.map(api => {
-        const { name, type, desc, params } = api
-        return (
-          <dl key={name}>
-            <dt>
-              {name}{type ? null : '( ' + (params || []).map(v => v.name).join(', ') + ' )'}
-            </dt>
-            {params && (
-              <dd>
-                <h2>参数</h2>
-                <ul>
-                  {params.map(param => (
-                    <li key={param.name}>
-                      {param.name} {param.type}
-                      <Markdown html={param.desc} />
-                    </li>
-                  ))}
-                </ul>
-              </dd>
-            )}
-            {api['return'] && (
-              <dd>
-                <h2>返回</h2>
-                {api['return'].type + ' ' + api['return'].desc}
-              </dd>
-            )}
-            {type && (
-              <dd>
-                <h2>类型</h2>
-                {type}
-              </dd>
-            )}
-            {desc && (
-              <dd>
-                <h2>描述</h2>
-                <Markdown html={desc} />
-              </dd>
-            )}
-          </dl>
-        )
-      })}
+      {props.apis &&
+        props.apis.map(api => {
+          const { name, type, desc, params } = api
+          return (
+            <dl key={name}>
+              <dt>
+                {name}
+                {type
+                  ? null
+                  : '( ' + (params || []).map(v => v.name).join(', ') + ' )'}
+              </dt>
+              {params && (
+                <dd>
+                  <h2>Params</h2>
+                  <ul>
+                    {params.map(param => (
+                      <li key={param.name}>
+                        {param.name} {param.type}
+                        <Markdown html={param.desc} />
+                      </li>
+                    ))}
+                  </ul>
+                </dd>
+              )}
+              {api.return && (
+                <dd>
+                  <h2>Return</h2>
+                  {api.return.type + ' ' + api.return.desc}
+                </dd>
+              )}
+              {type && (
+                <dd>
+                  <h2>Type</h2>
+                  {type}
+                </dd>
+              )}
+              {desc && (
+                <dd>
+                  <h2>Description</h2>
+                  <Markdown html={desc} />
+                </dd>
+              )}
+            </dl>
+          )
+        })}
     </div>
   )
 }

diff --git a/src/components/ClearableInput/docs/ClearableInput.dox b/src/components/ClearableInput/docs/ClearableInput.dox
diff --git a/src/components/ClearableInput/index.js b/src/components/ClearableInput/index.js
diff --git a/src/components/ClearableInput/index.less b/src/components/ClearableInput/index.less
diff --git a/src/components/Form/FormInput/index.js b/src/components/Form/FormInput/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
-import ClearableInput from '../../ClearableInput'
+import Input from '../../Input'
 
 const FormInput = (props, context) => {
   const { children, className, onChange, ...other } = props
@@ -11,7 +11,9 @@ const FormInput = (props, context) => {
     form.setItemValue(formItem, value)
     onChange && onChange(value)
   }
-  return <ClearableInput className={cx(`${prefixCls}-form__input`, className)} {...other} forbidClearable />
+  return (
+    <Input className={cx(`${prefixCls}-form__input`, className)} {...other} />
+  )
 }
 
 FormInput.propTypes = {

diff --git a/src/components/Icon/index.less b/src/components/Icon/index.less
@@ -509,6 +509,7 @@ i {
 
 .@{prefix-cls}-icon__close:before,
 .@{prefix-cls}-icon__checked-alt:before,
+.@{prefix-cls}-icon__remove:before,
 .@{prefix-cls}-icon__industry:before {
   top: -1px;
 }