fix: cell和signature修改Event (#367)

src/packages/cell/__test__/__snapshots__/cell.spec.tsx.snap

@@ -4,8 +4,6 @@ exports[`prop icon 1`] = `
 <div>
   <div
     class="nut-cell nut-cell--clickable "
-    iconclassprefix="nut-icon"
-    iconfontclassname="nutui-iconfont"
     style="border-radius: 6px;"
   >
     <div
@@ -40,8 +38,6 @@ exports[`prop isLink 1`] = `
 <div>
   <div
     class="nut-cell nut-cell--clickable "
-    iconclassprefix="nut-icon"
-    iconfontclassname="nutui-iconfont"
     style="border-radius: 6px;"
   >
     <div
@@ -70,8 +66,6 @@ exports[`prop title desc subtitle test 1`] = `
   <div
     class="nut-cell "
     data-testid="prop"
-    iconclassprefix="nut-icon"
-    iconfontclassname="nutui-iconfont"
     style="border-radius: 6px;"
   >
     <div
@@ -101,8 +95,6 @@ exports[`slot default test 1`] = `
 <div>
   <div
     class="nut-cell "
-    iconclassprefix="nut-icon"
-    iconfontclassname="nutui-iconfont"
     style="border-radius: 6px;"
   >
     <div>
@@ -116,8 +108,6 @@ exports[`slot linkSlot 1`] = `
 <div>
   <div
     class="nut-cell "
-    iconclassprefix="nut-icon"
-    iconfontclassname="nutui-iconfont"
     style="border-radius: 6px;"
   >
     <div

src/packages/cell/__test__/cell.spec.tsx

@@ -53,7 +53,7 @@ test('prop isLink', () => {
 test('emit click event', () => {
   const testClick = jest.fn()
   const { getByTestId } = render(
-    <Cell data-testid="emit-click" click={() => testClick()} />
+    <Cell data-testid="emit-click" onClick={() => testClick()} />
   )
   fireEvent.click(getByTestId('emit-click'))
   expect(testClick).toBeCalled()

src/packages/cell/cell.taro.tsx

@@ -23,6 +23,7 @@ export interface CellProps extends IComponent {
   iconSlot: ReactNode
   linkSlot: ReactNode
   click: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 }
 
 const defaultProps = {
@@ -43,6 +44,7 @@ const defaultProps = {
   iconSlot: null,
   linkSlot: null,
   click: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {},
+  onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {},
 } as CellProps
 
 export const Cell: FunctionComponent<
@@ -51,6 +53,7 @@ export const Cell: FunctionComponent<
   const {
     children,
     click,
+    onClick,
     title,
     subTitle,
     desc,
@@ -77,6 +80,7 @@ export const Cell: FunctionComponent<
   const history = useHistory()
   const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     click(event)
+    onClick(event)
     if (to && history) {
       history[replace ? 'replace' : 'push'](to)
     } else if (url) {

src/packages/cell/cell.tsx

@@ -22,6 +22,7 @@ export interface CellProps extends IComponent {
   iconSlot: ReactNode
   linkSlot: ReactNode
   click: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 }
 
 const defaultProps = {
@@ -42,6 +43,7 @@ const defaultProps = {
   iconSlot: null,
   linkSlot: null,
   click: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {},
+  onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {},
 } as CellProps
 
 export const Cell: FunctionComponent<
@@ -50,6 +52,7 @@ export const Cell: FunctionComponent<
   const {
     children,
     click,
+    onClick,
     title,
     subTitle,
     desc,
@@ -76,6 +79,7 @@ export const Cell: FunctionComponent<
   const history = useHistory()
   const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     click(event)
+    onClick(event)
     if (to && history) {
       history[replace ? 'replace' : 'push'](to)
     } else if (url) {

src/packages/cell/demo.taro.tsx

@@ -120,7 +120,7 @@ const CellDemo = () => {
         />
         <Cell
           title={translated.title3}
-          click={(
+          onClick={(
             event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>
           ) => testClick(event)}
         />

src/packages/cell/demo.tsx

@@ -122,7 +122,7 @@ const CellDemo = () => {
         />
         <Cell
           title={translated.title3}
-          click={(
+          onClick={(
             event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>
           ) => testClick(event)}
         />

src/packages/cell/doc.en-US.md

@@ -32,7 +32,7 @@ const App = () => {
       <Cell title="Title" subTitle="Subtitle Description" desc="Description" />
       <Cell
         title="Click Test"
-        click={(
+        onClick={(
           event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>
         ) => testClick(event)}
       />
@@ -288,4 +288,6 @@ export default App
 
 | Event | Description                  | Arguments   |
 |-------|------------------------------|-------------|
-| click | Emitted when cell is clicked | event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent> |
+| click`v1.3.8废弃` | Emitted when cell is clicked | event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent> |
+| onClick`v1.3.8` | Emitted when cell is clicked | event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent> |
+

src/packages/cell/doc.md

@@ -30,7 +30,7 @@ const App = () => {
     <Cell title="我是标题" subTitle="副标题描述" desc="描述文字" />
     <Cell
         title="点击测试"
-        click={(
+        onClick={(
         event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>
         ) => testClick(event)}
     />
@@ -291,4 +291,5 @@ export default App;
 
 | 名称  | 说明     | 回调参数                                                       |
 | ----- | -------- | -------------------------------------------------------------- |
-| click | 点击事件 | event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent> |
+| click`v1.3.8废弃` | 点击事件 | event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent> |
+| onClick`v1.3.8` | 点击事件 | event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent> |

src/packages/cell/doc.zh-TW.md

@@ -30,7 +30,7 @@ const App = () => {
     <Cell title="我是標題" subTitle="副標題描述" desc="描述文字" />
     <Cell
         title="點擊測試"
-        click={(
+        onClick={(
         event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>
         ) => testClick(event)}
     />
@@ -291,4 +291,5 @@ export default App;
 
 | 名稱  | 說明     | 回調參數                                                       |
 | ----- | -------- | -------------------------------------------------------------- |
-| click | 點擊事件 | event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent> |
+| click`v1.3.8废弃` | 點擊事件 | event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent> |
+| onClick`v1.3.8` | 點擊事件 | event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent> |

src/packages/signature/__test__/__snapshots__/signature.spec.tsx.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`props test 1`] = `"<div class=\\"nut-signature test-signature\\"><div class=\\"nut-signature__inner\\"><canvas height=\\"0\\" width=\\"0\\"></canvas></div><div class=\\"nut-button nut-button--default nut-button--normal nut-button--round nut-signature__btn\\" iconclassprefix=\\"nut-icon\\" iconfontclassname=\\"nutui-iconfont\\"><div class=\\"nut-button__warp\\">重签</div></div><div class=\\"nut-button nut-button--primary nut-button--normal nut-button--round nut-signature__btn\\" iconclassprefix=\\"nut-icon\\" iconfontclassname=\\"nutui-iconfont\\"><div class=\\"nut-button__warp\\">确认</div></div></div>"`;
+exports[`props test 1`] = `"<div class=\\"nut-signature test-signature\\"><div class=\\"nut-signature__inner\\"><canvas height=\\"0\\" width=\\"0\\"></canvas></div><div class=\\"nut-button nut-button--default nut-button--normal nut-button--round nut-signature__btn\\"><div class=\\"nut-button__warp\\">重签</div></div><div class=\\"nut-button nut-button--primary nut-button--normal nut-button--round nut-signature__btn\\"><div class=\\"nut-button__warp\\">确认</div></div></div>"`;

src/packages/signature/__test__/signature.spec.tsx

@@ -12,7 +12,7 @@ test('props test', () => {
       className="test-signature"
       lineWidth={4}
       strokeStyle="green"
-      confirm={(canvas: HTMLCanvasElement, data: string) =>
+      onConfirm={(canvas: HTMLCanvasElement, data: string) =>
         testClick(canvas, data)
       }
     />

src/packages/signature/demo.taro.tsx

@@ -51,7 +51,7 @@ const SignatureDemo = () => {
     <>
       <div className="demo">
         <h2>{translated.basic}</h2>
-        <Signature confirm={confirm} clear={clear} />
+        <Signature onConfirm={confirm} onClear={clear} />
         <p className="demo-tips demo1" style={demoStyles}>
           {translated.tips}
         </p>
@@ -59,8 +59,8 @@ const SignatureDemo = () => {
         <Signature
           lineWidth={4}
           strokeStyle="green"
-          confirm={confirm}
-          clear={clear}
+          onConfirm={confirm}
+          onClear={clear}
           canvasId="testCanvas"
         />
         <p className="demo-tips demo2" style={demoStyles}>

src/packages/signature/demo.tsx

@@ -58,7 +58,7 @@ const SignatureDemo = () => {
     <>
       <div className="demo">
         <h2>{translated.basic}</h2>
-        <Signature confirm={confirm} clear={clear} />
+        <Signature onConfirm={confirm} onClear={clear} />
         <p className="demo-tips demo1" style={demoStyles}>
           {translated.tips}
         </p>
@@ -66,8 +66,8 @@ const SignatureDemo = () => {
         <Signature
           lineWidth={4}
           strokeStyle="green"
-          confirm={confirm1}
-          clear={clear1}
+          onConfirm={confirm1}
+          onClear={clear1}
         />
         <p className="demo-tips demo2" style={demoStyles}>
           {translated.tips}

src/packages/signature/doc.en-US.md

@@ -36,7 +36,7 @@ const App = () => {
     const demoStyles: React.CSSProperties = { margin: '1em 0' }
     return (
     <>
-        <Signature confirm={confirm} clear={clear} />
+        <Signature onConfirm={confirm} onClear={clear} />
         <p className="demo-tips demo" style={demoStyles}>
            Tips: click the confirm button, and the signature image is displayed below
         </p>
@@ -75,8 +75,8 @@ const App = () => {
         <Signature
             lineWidth={4}
             strokeStyle="green"
-            confirm={confirm}
-            clear={clear}
+            onConfirm={confirm}
+            onClear={clear}
          />
         <p className="demo-tips demo" style={demoStyles}>
             Tips: click the confirm button, and the signature image is displayed below
@@ -105,5 +105,8 @@ export default App;
 
 | 字段    | 说明                         | 回调参数                         |
 | ------- | ---------------------------- | -------------------------------- |
-| confirm | Click the confirm button to trigger the event callback function | Canvas and data URI displayed by signature imageURI |
-| clear   | Click the re sign button to trigger the event callback function | -                               |
+| confirm`v1.3.8废弃` | Click the confirm button to trigger the event callback function | Canvas and data URI displayed by signature imageURI |
+| clear`v1.3.8废弃`   | Click the re sign button to trigger the event callback function | -                               |
+| onConfirm`v1.3.8` | Click the confirm button to trigger the event callback function | Canvas and data URI displayed by signature imageURI |
+| onClear`v1.3.8`   | Click the re sign button to trigger the event callback function | -                               |
+

src/packages/signature/doc.md

@@ -36,7 +36,7 @@ const App = () => {
     const demoStyles: React.CSSProperties = { margin: '1em 0' }
     return (
     <>
-        <Signature confirm={confirm} clear={clear} />
+        <Signature onConfirm={confirm} onClear={clear} />
         <p className="demo-tips demo" style={demoStyles}>
             Tips: 点击确认按钮,下方显示签名图片
         </p>
@@ -75,8 +75,8 @@ const App = () => {
         <Signature
             lineWidth={4}
             strokeStyle="green"
-            confirm={confirm}
-            clear={clear}
+            onConfirm={confirm}
+            onClear={clear}
          />
         <p className="demo-tips demo" style={demoStyles}>
             Tips: 点击确认按钮,下方显示签名图片
@@ -105,5 +105,8 @@ export default App;
 
 | 字段    | 说明                         | 回调参数                         |
 | ------- | ---------------------------- | -------------------------------- |
-| confirm | 点击确认按钮触发事件回调函数 | canvas 和签名图片展示的 data URI |
-| clear   | 点击重签按钮触发事件回调函数 | -                              |
+| confirm`v1.3.8废弃` | 点击确认按钮触发事件回调函数 | canvas 和签名图片展示的 data URI |
+| clear`v1.3.8废弃`   | 点击重签按钮触发事件回调函数 | -                              |
+| onConfirm`v1.3.8` | 点击确认按钮触发事件回调函数 | canvas 和签名图片展示的 data URI |
+| onClear`v1.3.8`   | 点击重签按钮触发事件回调函数 | -                              |
+

src/packages/signature/doc.zh-TW.md

@@ -36,7 +36,7 @@ const App = () => {
     const demoStyles: React.CSSProperties = { margin: '1em 0' }
     return (
     <>
-        <Signature confirm={confirm} clear={clear} />
+        <Signature onConfirm={confirm} onClear={clear} />
         <p className="demo-tips demo" style={demoStyles}>
             Tips: 點擊確認按鈕,下方顯示簽名圖片
         </p>
@@ -75,8 +75,8 @@ const App = () => {
         <Signature
             lineWidth={4}
             strokeStyle="green"
-            confirm={confirm}
-            clear={clear}
+            onConfirm={confirm}
+            onClear={clear}
          />
         <p className="demo-tips demo" style={demoStyles}>
             Tips: 點擊確認按鈕,下方顯示簽名圖片
@@ -105,5 +105,8 @@ export default App;
 
 | 字段    | 說明                         | 回調參數                         |
 | ------- | ---------------------------- | -------------------------------- |
-| confirm | 點擊確認按鈕觸發事件回調函數 | canvas 和簽名圖片展示的 data URI |
-| clear   | 點擊重簽按鈕觸發事件回調函數 | -                               |
+| confirm`v1.3.8废弃` | 點擊確認按鈕觸發事件回調函數 | canvas 和簽名圖片展示的 data URI |
+| clear`v1.3.8废弃`   | 點擊重簽按鈕觸發事件回調函數 | -                               |
+| onConfirm`v1.3.8` | 點擊確認按鈕觸發事件回調函數 | canvas 和簽名圖片展示的 data URI |
+| onClear`v1.3.8`   | 點擊重簽按鈕觸發事件回調函數 | -                               |
+

src/packages/signature/signature.taro.tsx

@@ -20,6 +20,8 @@ export interface SignatureProps {
   className: string
   confirm?: (dataurl: string) => void
   clear?: () => void
+  onConfirm?: (dataurl: string) => void
+  onClear?: () => void
 }
 const defaultProps = {
   canvasId: 'weappCanvas',
@@ -40,6 +42,10 @@ export const Signature: FunctionComponent<
     strokeStyle,
     unSupportTpl,
     className,
+    confirm,
+    clear,
+    onConfirm,
+    onClear,
     ...rest
   } = {
     ...defaultProps,
@@ -74,15 +80,16 @@ export const Signature: FunctionComponent<
     event.preventDefault()
   }
 
-  const clear = () => {
+  const handleClearBtn = () => {
     if (ctx.current) {
       ctx.current.clearRect(0, 0, canvasWidth, canvasHeight)
       ctx.current.closePath()
     }
-    props.clear && props.clear()
+    clear && clear()
+    onClear && onClear()
   }
 
-  const confirm = () => {
+  const handleConfirmBtn = () => {
     onSave()
   }
 
@@ -98,8 +105,9 @@ export const Signature: FunctionComponent<
           canvas: res[0].node,
           fileType: props.type,
           success: (res) => {
-            clear()
-            props.confirm && props.confirm(res.tempFilePath)
+            handleClearBtn()
+            confirm && confirm(res.tempFilePath)
+            onConfirm && onConfirm(res.tempFilePath)
           },
           fail: (res) => {
             console.log('保存失败')
@@ -160,13 +168,17 @@ export const Signature: FunctionComponent<
         />
       </div>
 
-      <Button className={`${b('btn')}`} type="default" onClick={() => clear()}>
+      <Button
+        className={`${b('btn')}`}
+        type="default"
+        onClick={() => handleClearBtn()}
+      >
         {locale.signature.reSign}
       </Button>
       <Button
         className={`${b('btn')}`}
         type="primary"
-        onClick={() => confirm()}
+        onClick={() => handleConfirmBtn()}
       >
         {locale.confirm}
       </Button>

src/packages/signature/signature.tsx

@@ -11,6 +11,8 @@ export interface SignatureProps {
   className: string
   confirm?: (canvas: HTMLCanvasElement, dataurl: string) => void
   clear?: () => void
+  onConfirm?: (canvas: HTMLCanvasElement, dataurl: string) => void
+  onClear?: () => void
 }
 const defaultProps = {
   type: 'png',
@@ -23,7 +25,18 @@ export const Signature: FunctionComponent<
   Partial<SignatureProps> & React.HTMLAttributes<HTMLDivElement>
 > = (props) => {
   const { locale } = useConfig()
-  const { type, lineWidth, strokeStyle, unSupportTpl, className, ...rest } = {
+  const {
+    type,
+    lineWidth,
+    strokeStyle,
+    unSupportTpl,
+    className,
+    confirm,
+    clear,
+    onConfirm,
+    onClear,
+    ...rest
+  } = {
     ...defaultProps,
     ...props,
   }
@@ -97,16 +110,17 @@ export const Signature: FunctionComponent<
       canvasRef.current.removeEventListener(events[2], endEventHandler, false)
     }
   }
-  const clear = () => {
+  const handleClearBtn = () => {
     if (canvasRef.current && ctx.current) {
       canvasRef.current.addEventListener(events[2], endEventHandler, false)
       ctx.current.clearRect(0, 0, canvasWidth, canvasHeight)
       ctx.current.closePath()
     }
-    props.clear && props.clear()
+    clear && clear()
+    onClear && onClear()
   }
 
-  const confirm = () => {
+  const handleConfirmBtn = () => {
     onSave(canvasRef.current as HTMLCanvasElement)
   }
 
@@ -122,8 +136,9 @@ export const Signature: FunctionComponent<
       default:
         dataurl = canvas.toDataURL('image/png')
     }
-    clear()
-    props.confirm && props.confirm(canvas, dataurl as string)
+    handleClearBtn()
+    confirm && confirm(canvas, dataurl as string)
+    onConfirm && onConfirm(canvas, dataurl as string)
   }
   return (
     <div className={`${b()} ${className}`} {...rest}>
@@ -137,13 +152,17 @@ export const Signature: FunctionComponent<
         )}
       </div>
 
-      <Button className={`${b('btn')}`} type="default" onClick={() => clear()}>
+      <Button
+        className={`${b('btn')}`}
+        type="default"
+        onClick={() => handleClearBtn()}
+      >
         {locale.signature.reSign}
       </Button>
       <Button
         className={`${b('btn')}`}
         type="primary"
-        onClick={() => confirm()}
+        onClick={() => handleConfirmBtn()}
       >
         {locale.confirm}
       </Button>