feat: input\noticebar\range组件 event事件修改；divider组件demo优化 (#365)

jdf2e · Oct 25, 2022 · 5eaa446 · 5eaa446
1 parent 6b6a4e9
commit 5eaa446
Show file tree

Hide file tree

Showing 28 changed files with 431 additions and 292 deletions.
diff --git a/src/packages/divider/demo.taro.tsx b/src/packages/divider/demo.taro.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Taro from '@tarojs/taro'
-import { Divider } from '@/packages/nutui.react.taro'
+import { Divider, Cell } from '@/packages/nutui.react.taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 
 interface T {
@@ -40,46 +40,62 @@ const DividerDemo = () => {
     <>
       <div className="demo">
         <h2>{translated.basic}</h2>
-        <Divider />
+        <Cell>
+          <Divider />
+        </Cell>
         <h2>{translated.withText}</h2>
-        <Divider>{translated.text}</Divider>
+        <Cell>
+          <Divider>{translated.text}</Divider>
+        </Cell>
         <h2>{translated.withText}</h2>
-        <Divider contentPosition="left">{translated.text}</Divider>
-        <Divider contentPosition="right">{translated.text}</Divider>
+        <Cell>
+          <Divider contentPosition="left">{translated.text}</Divider>
+        </Cell>
+        <Cell>
+          <Divider contentPosition="right">{translated.text}</Divider>
+        </Cell>
         <h2>{translated.dashed}</h2>
-        <Divider dashed>{translated.text}</Divider>
+        <Cell>
+          <Divider dashed>{translated.text}</Divider>
+        </Cell>
         <h2>{translated.customStyle}</h2>
-        <Divider
-          styles={{
-            color: '#1989fa',
-            borderColor: '#1989fa',
-            padding: '0 16px',
-          }}
-        >
-          {translated.text}
-        </Divider>
-        <h2>{translated.verticalDivider}</h2>
-        <div style={{ fontSize: '14px', marginLeft: '27px', color: '#909ca4' }}>
-          {translated.text}
-          <Divider direction="vertical" />
-          <span
-            onClick={() => {
-              Taro.navigateTo({ url: '/pages/index/index' })
+        <Cell>
+          <Divider
+            styles={{
+              color: '#1989fa',
+              borderColor: '#1989fa',
+              padding: '0 16px',
             }}
-            style={{ color: '#1989fa', display: 'inline-block' }}
           >
-            {translated.link}
-          </span>
-          <Divider direction="vertical" />
-          <span
-            onClick={() => {
-              Taro.navigateTo({ url: '/pages/index/index' })
-            }}
-            style={{ color: '#1989fa', display: 'inline-block' }}
+            {translated.text}
+          </Divider>
+        </Cell>
+        <h2>{translated.verticalDivider}</h2>
+        <Cell>
+          <div
+            style={{ fontSize: '14px', marginLeft: '27px', color: '#909ca4' }}
           >
-            {translated.link}
-          </span>
-        </div>
+            {translated.text}
+            <Divider direction="vertical" />
+            <span
+              onClick={() => {
+                Taro.navigateTo({ url: '/pages/index/index' })
+              }}
+              style={{ color: '#1989fa', display: 'inline-block' }}
+            >
+              {translated.link}
+            </span>
+            <Divider direction="vertical" />
+            <span
+              onClick={() => {
+                Taro.navigateTo({ url: '/pages/index/index' })
+              }}
+              style={{ color: '#1989fa', display: 'inline-block' }}
+            >
+              {translated.link}
+            </span>
+          </div>
+        </Cell>
       </div>
     </>
   )

diff --git a/src/packages/divider/demo.tsx b/src/packages/divider/demo.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { Divider } from './divider'
 import { useTranslate } from '../../sites/assets/locale'
+import Cell from '@/packages/cell'
 
 interface T {
   basic: string
@@ -39,36 +40,56 @@ const DividerDemo = () => {
     <>
       <div className="demo">
         <h2>{translated.basic}</h2>
-        <Divider />
+        <Cell>
+          <Divider />
+        </Cell>
+
         <h2>{translated.withText}</h2>
-        <Divider>{translated.text}</Divider>
+        <Cell>
+          <Divider>{translated.text}</Divider>
+        </Cell>
+
         <h2>{translated.withText}</h2>
-        <Divider contentPosition="left">{translated.text}</Divider>
-        <Divider contentPosition="right">{translated.text}</Divider>
+        <Cell>
+          <Divider contentPosition="left">{translated.text}</Divider>
+        </Cell>
+        <Cell>
+          <Divider contentPosition="right">{translated.text}</Divider>
+        </Cell>
         <h2>{translated.dashed}</h2>
-        <Divider dashed>{translated.text}</Divider>
+        <Cell>
+          <Divider dashed>{translated.text}</Divider>
+        </Cell>
+
         <h2>{translated.customStyle}</h2>
-        <Divider
-          styles={{
-            color: '#1989fa',
-            borderColor: '#1989fa',
-            padding: '0 16px',
-          }}
-        >
-          {translated.text}
-        </Divider>
+        <Cell>
+          <Divider
+            styles={{
+              color: '#1989fa',
+              borderColor: '#1989fa',
+              padding: '0 16px',
+            }}
+          >
+            {translated.text}
+          </Divider>
+        </Cell>
         <h2>{translated.verticalDivider}</h2>
-        <div style={{ fontSize: '14px', marginLeft: '27px', color: '#909ca4' }}>
-          {translated.text}
-          <Divider direction="vertical" />
-          <a href="#/Divider" style={{ color: '#1989fa' }}>
-            {translated.link}
-          </a>
-          <Divider direction="vertical" />
-          <a href="#/Divider" style={{ color: '#1989fa' }}>
-            {translated.link}
-          </a>
-        </div>
+        <Cell>
+          <div
+            style={{ fontSize: '14px', marginLeft: '27px', color: '#909ca4' }}
+          >
+            {translated.text}
+
+            <Divider direction="vertical" />
+            <a href="#/Divider" style={{ color: '#1989fa' }}>
+              {translated.link}
+            </a>
+            <Divider direction="vertical" />
+            <a href="#/Divider" style={{ color: '#1989fa' }}>
+              {translated.link}
+            </a>
+          </div>
+        </Cell>
       </div>
     </>
   )

diff --git a/src/packages/divider/divider.scss b/src/packages/divider/divider.scss
@@ -4,7 +4,7 @@
   font-size: $divider-text-font-size;
   color: $divider-text-color;
   margin: $divider-margin;
-  //   width: 100%;
+  width: 100%;
 
   &::before,
   &::after {
@@ -59,5 +59,6 @@
     height: $divider-vertical-height;
     border-left: 1px solid $divider-vertical-border-left;
     margin: $divider-vertical-margin;
+    width: auto;
   }
 }
diff --git a/src/packages/input/__test__/input.spec.tsx b/src/packages/input/__test__/input.spec.tsx
@@ -90,7 +90,7 @@ test('clearable and clear event test', () => {
       defaultValue="清除文本"
       clearable
       clearSize="14"
-      clear={handleClear}
+      onClear={handleClear}
     />
   )
   const inputEl = container.querySelector('.nut-input-inner') as Element
@@ -179,13 +179,13 @@ test('clearable and clear event test', () => {
       clearSize="14"
       leftIcon="dongdong"
       rightIcon="ask2"
-      change={handleChange}
-      focus={handleFocus}
-      blur={handleBlur}
-      click={handleClick}
-      clickInput={handleClickInput}
-      clickLeftIcon={handleClickLeftIcon}
-      clickRightIcon={handleClickRightIcon}
+      onChange={handleChange}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      onClick={handleClick}
+      onClickInput={handleClickInput}
+      onClickLeftIcon={handleClickLeftIcon}
+      onClickRightIcon={handleClickRightIcon}
     />
   )
   const inputEl = container.querySelector('.input-text') as Element

diff --git a/src/packages/input/demo.taro.tsx b/src/packages/input/demo.taro.tsx
@@ -320,14 +320,14 @@ const InputDemo = () => {
           leftIcon="dongdong"
           rightIcon="ask2"
           clearable
-          change={change}
-          focus={focus}
-          blur={blur}
-          clear={clear}
-          click={click}
-          clickInput={clickInput}
-          clickLeftIcon={clickLeftIcon}
-          clickRightIcon={clickRightIcon}
+          onChange={change}
+          onFocus={focus}
+          onBlur={blur}
+          onClear={clear}
+          onClick={click}
+          onClickInput={clickInput}
+          onClickLeftIcon={clickLeftIcon}
+          onClickRightIcon={clickRightIcon}
         />
       </div>
     </>

diff --git a/src/packages/input/demo.tsx b/src/packages/input/demo.tsx
@@ -321,14 +321,14 @@ const InputDemo = () => {
           leftIcon="dongdong"
           rightIcon="ask2"
           clearable
-          change={change}
-          focus={focus}
-          blur={blur}
-          clear={clear}
-          click={click}
-          clickInput={clickInput}
-          clickLeftIcon={clickLeftIcon}
-          clickRightIcon={clickRightIcon}
+          onChange={change}
+          onFocus={focus}
+          onBlur={blur}
+          onClear={clear}
+          onClick={click}
+          onClickInput={clickInput}
+          onClickLeftIcon={clickLeftIcon}
+          onClickRightIcon={clickRightIcon}
         />
       </div>
     </>

diff --git a/src/packages/input/doc.en-US.md b/src/packages/input/doc.en-US.md
@@ -406,14 +406,14 @@ const App = () => {
           leftIcon="dongdong"
           rightIcon="ask2"
           clearable
-          change={change}
-          focus={focus}
-          blur={blur}
-          clear={clear}
-          click={click}
-          clickInput={clickInput}
-          clickLeftIcon={clickLeftIcon}
-          clickRightIcon={clickRightIcon}
+          onChange={change}
+          onFocus={focus}
+          onBlur={blur}
+          onClear={clear}
+          onClick={click}
+          onClickInput={clickInput}
+          onClickLeftIcon={clickLeftIcon}
+          onClickRightIcon={clickRightIcon}
         />
     </>
   )
@@ -458,14 +458,14 @@ export default App;
 
 | Event   | Description      | Arguments    |
 |--------|----------------|-------------|
-| change | Emitted when input value changed | val ,event  |
-| focus  | Emitted when input is focused     | val  ,event |
-| blur   | Emitted when input is blurred     | val ,event  |
-| clear  | Emitted when the clear icon is clicked   | val ,event  |
-| click  | Emitted when component is clicked	      | val ,event  |
-| clickInput      | Emitted when the input is clicked      | val ,event  |
-| clickLeftIcon  | Emitted when the left icon is clicked      | val ,event  |
-| clickRightIcon | Emitted when the right icon is clicked      | val ,event  |
+| onChange `v1.3.8` | Emitted when input value changed | val ,event  |
+| onFocus `v1.3.8`  | Emitted when input is focused     | val  ,event |
+| onBlur `v1.3.8`   | Emitted when input is blurred     | val ,event  |
+| onClear `v1.3.8` | Emitted when the clear icon is clicked   | val ,event  |
+| onClick `v1.3.8`  | Emitted when component is clicked	      | val ,event  |
+| onClickInput `v1.3.8`      | Emitted when the input is clicked      | val ,event  |
+| onClickLeftIcon `v1.3.8`  | Emitted when the left icon is clicked      | val ,event  |
+| onClickRightIcon `v1.3.8` | Emitted when the right icon is clicked      | val ,event  |
 
 ### Slots
 

diff --git a/src/packages/input/doc.md b/src/packages/input/doc.md
@@ -400,14 +400,14 @@ const App = () => {
           leftIcon="dongdong"
           rightIcon="ask2"
           clearable
-          change={change}
-          focus={focus}
-          blur={blur}
-          clear={clear}
-          click={click}
-          clickInput={clickInput}
-          clickLeftIcon={clickLeftIcon}
-          clickRightIcon={clickRightIcon}
+          onChange={change}
+          onFocus={focus}
+          onblur={blur}
+          onClear={clear}
+          onClick={click}
+          onClickInput={clickInput}
+          onClickLeftIcon={clickLeftIcon}
+          onClickRightIcon={clickRightIcon}
         />
     </>
   )
@@ -419,7 +419,7 @@ export default App;
 
 | 参数         | 说明                                   | 类型           | 默认值  |
 | ------------ | -------------------------------------- | -------------- | ------- |
-| defaultValue | 初始默认值                   | String         | -       |
+| defaultValue | 初始默认值                 | String         | -       |
 | type         | 输入框类型，支持原生 `input` 标签的所有 `type` 属性，另外还支持 `textarea` `number` `digit`      | String         | `text`  |
 | placeholder  | 输入框为空时占位符                           | String         | -       |
 | label        | 左侧文本                               | String         | -       |
@@ -451,14 +451,14 @@ export default App;
 
 | 名称   | 说明           | 回调参数    |
 |--------|----------------|-------------|
-| change | 输入框内容变化时触发 | val ,event |
-| focus  | 输入框聚焦时触发     | val  ,event |
-| blur   | 输入框失焦时触发     | val ,event  |
-| clear  | 点击清除按钮时触发   | val ,event  |
-| click`v1.2.1`  | 点击组件时触发      | val ,event  |
-| clickInput`v1.2.1`     | 点击输入区域时触发      | val ,event  |
-| clickLeftIcon`v1.2.1`  | 点击左侧图标时触发      | val ,event  |
-| clickRightIcon`v1.2.1` | 点击右侧图标时触发      | val ,event  |
+| onChange `v1.3.8` | 输入框内容变化时触发 | val ,event |
+| onFocus `v1.3.8`  | 输入框聚焦时触发     | val  ,event |
+| onBlur `v1.3.8`   | 输入框失焦时触发     | val ,event  |
+| onClear `v1.3.8`  | 点击清除按钮时触发   | val ,event  |
+| onClick `v1.3.8`  | 点击组件时触发      | val ,event  |
+| onClickInput `v1.3.8`     | 点击输入区域时触发      | val ,event  |
+| onClickLeftIcon `v1.3.8`  | 点击左侧图标时触发      | val ,event  |
+| onClickRightIcon `v1.3.8` | 点击右侧图标时触发      | val ,event  |
 
 ### Slots
 | 名称                 | 说明     |