feat: field

webyom · Aug 27, 2020 · 892e45a · 892e45a
1 parent e481140
commit 892e45a
Show file tree

Hide file tree

Showing 11 changed files with 563 additions and 49 deletions.
diff --git a/src/_site/scripts/root-component.tsx b/src/_site/scripts/root-component.tsx
@@ -13,6 +13,7 @@ import { CellRouteComponent } from '../../cell/demo';
 import { CheckboxRouteComponent } from '../../checkbox/demo';
 import { DialogRouteComponent } from '../../dialog/demo';
 import { FieldRouteComponent } from '../../field/demo';
+import { FormRouteComponent } from '../../form/demo';
 import { ImgRouteComponent } from '../../img/demo';
 import { LayoutRouteComponent } from '../../col/demo';
 import { LazyloadRouteComponent } from '../../lazyload/demo';
@@ -48,6 +49,7 @@ export class RootComponent extends preact.Component {
         <CheckboxRouteComponent path="/checkbox/" />
         <DialogRouteComponent path="/dialog/" />
         <FieldRouteComponent path="/field/" />
+        <FormRouteComponent path="/form/" />
         <ImgRouteComponent path="/img/" />
         <LayoutRouteComponent path="/layout/" />
         <LazyloadRouteComponent path="/lazyload/" />

diff --git a/src/_site/scripts/routes/home/index.tsx b/src/_site/scripts/routes/home/index.tsx
@@ -69,6 +69,9 @@ export class HomeRouteComponent extends preact.Component {
           <Link href="/field/">
             Field <Arrow />
           </Link>
+          <Link href="/form/">
+            Form <Arrow />
+          </Link>
           <Link href="/radio/">
             Radio <Arrow />
           </Link>

diff --git a/src/cell/index.scss b/src/cell/index.scss
@@ -14,7 +14,7 @@
   background-color: $cell-background-color;
 
   &:not(:last-child)::after {
-    @include hairline-bottom($cell-border-color, $padding-md);
+    @include hairline-bottom($cell-border-color, $padding-md, $padding-md);
   }
 
   &--borderless::after {

diff --git a/src/field/demo/index.tsx b/src/field/demo/index.tsx
@@ -1,5 +1,6 @@
 import * as preact from 'preact';
 import { Field } from '../../field';
+import { Button } from '../../button';
 import { createBEM } from '../../utils/bem';
 import { NavBar } from '../../_site/scripts/components/nav-bar';
 import './index.scss';
@@ -14,16 +15,99 @@ export class FieldRouteComponent extends preact.Component {
         <div className={bem()}>
           <section>
             <h2>Basic Usage</h2>
-            <Field<number>
-              defaultValue={1}
-              name="location"
-              title="Cell title"
-              placeholder="Description"
-              icon="location"
-              rightIcon="search"
-              showWordLimit
+            <Field<string> defaultValue="" name="a1" title="Label" placeholder="Text"></Field>
+          </section>
+
+          <section>
+            <h2>Custom Type</h2>
+            <Field<string> defaultValue="" name="b1" title="Text" placeholder="Text"></Field>
+            <Field<string> type="tel" defaultValue="" name="b2" title="Phone" placeholder="Phone"></Field>
+            <Field<string> type="digit" defaultValue="" name="b3" title="Digit" placeholder="Digit"></Field>
+            <Field<string> type="number" defaultValue="" name="b4" title="Number" placeholder="Number"></Field>
+            <Field<string> type="password" defaultValue="" name="b5" title="Password" placeholder="Password"></Field>
+          </section>
+
+          <section>
+            <h2>Disalbed</h2>
+            <Field<string> defaultValue="" name="c1" title="Text" placeholder="Input Readonly" readonly></Field>
+            <Field<string> defaultValue="" name="c2" title="Text" placeholder="Input Disabled" disabled></Field>
+          </section>
+
+          <section>
+            <h2>Show Icon</h2>
+            <Field<string>
+              defaultValue=""
+              name="d1"
+              title="Text"
+              placeholder="Show Icon"
+              icon="smile-o"
+              rightIcon="warning-o"
+            ></Field>
+            <Field<string>
+              defaultValue="123"
+              name="d2"
+              title="Text"
+              placeholder="Show Clear Icon"
+              icon="music-o"
               clearable
-              maxlength={100}
+            ></Field>
+          </section>
+
+          <section>
+            <h2>Error Info</h2>
+            <Field<string> defaultValue="" name="e1" title="Username" placeholder="Username" required></Field>
+            <Field<string>
+              defaultValue="123"
+              name="e2"
+              title="Phone"
+              placeholder="Phone"
+              errorMessage="Invalid phone"
+              required
+            ></Field>
+          </section>
+
+          <section>
+            <h2>Insert Button</h2>
+            <Field<string>
+              defaultValue=""
+              name="f1"
+              title="SMS"
+              placeholder="SMS"
+              center
+              button={
+                <Button size="small" type="primary">
+                  Send SMS
+                </Button>
+              }
+            ></Field>
+          </section>
+
+          <section>
+            <h2>Auto Resize</h2>
+            <Field<string> type="textarea" defaultValue="" name="g1" placeholder="Message" autosize></Field>
+          </section>
+
+          <section>
+            <h2>Show Word Limit</h2>
+            <Field<string>
+              type="textarea"
+              defaultValue=""
+              name="g1"
+              title="Message"
+              placeholder="Message"
+              showWordLimit
+              maxlength={50}
+            ></Field>
+          </section>
+
+          <section>
+            <h2>Input Align</h2>
+            <Field<string>
+              defaultValue=""
+              name="g1"
+              title="Text"
+              placeholder="Input Align Right"
+              inputAlign="right"
             ></Field>
           </section>
         </div>

diff --git a/src/field/index.scss b/src/field/index.scss
@@ -93,7 +93,8 @@
 
   &__clear,
   &__right-icon {
-    padding: 0 $padding-xs / 2;
+    margin-right: -$padding-xs;
+    padding: 0 $padding-xs;
     line-height: inherit;
   }
 
@@ -151,6 +152,12 @@
     }
   }
 
+  &--disabled {
+    .pant-field__title {
+      color: $field-input-disabled-text-color;
+    }
+  }
+
   &--error {
     .pant-field__control {
       &,