@_nu/react-button - npm Package Compare versions

Comparing version 1.4.1 to 1.4.2

demo/components/Button/index.d.ts

+import { ComponentProps } from '../../../src';
+declare const _default: (props?: ComponentProps) => JSX.Element;
+export default _default;

demo/components/Button/index.js

+import React from 'react';
+import NuButton from '../../../src';
+import '@_nu/css-button';
+import '@_nu/css-button/css/skins/bootstrap.css';
+import '@_nu/css-button/css/skins/loading.css';
+import '@_nu/css-button/css/skins/webnovel.css';
+import './style.css';
+const Button = React.forwardRef(function Button(props, ref) {
+  return <NuButton ref={ref} {...props} />;
+});
+export default Button;

demo/components/Button/style.css

+.nu_btn:disabled {
+  opacity: 0.5;
+}

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [1.4.2](https://github.com/nu-system/react-button/compare/@_nu/react-button@1.4.1...@_nu/react-button@1.4.2) (2020-07-18)
+
+
+### Bug Fixes
+
+* 优化按钮组件接口 ([19ce5f9](https://github.com/nu-system/react-button/commit/19ce5f9409fd1cb70c670393ce50ddd6686d0b19))
+
+
+
+
+
 ## [1.4.1](https://github.com/nu-system/react-button/compare/@_nu/react-button@1.4.0...@_nu/react-button@1.4.1) (2020-07-04)
@@ -8,0 +19,0 @@

demo/src/index.js

 import React, { useState } from 'react';
 import { render } from 'react-dom';
-import Button from '../Button';
+import Button from '../components/Button';
 
 function Demo() {
-  const [buttonThemeClass, setButtonThemeClass] = useState(
-    'nu_btn btn_bootstrap',
-  );
+  const [buttonThemeClass, setButtonThemeClass] = useState('btn_bootstrap');
 
-  const onThemeChange = e => {
+  const onThemeChange = (e) => {
     setButtonThemeClass(e.currentTarget.value);
@@ -15,3 +13,2 @@ };
     <div className="App">
-      <h3>实心按钮 fill</h3>
       <p>
@@ -27,31 +24,34 @@ 点我切换主题：
       </p>
+      <h3>实心按钮 fill</h3>
       <p>
-        <Button className={`${buttonThemeClass} _primary`}>
+        <Button className={`${buttonThemeClass} _fill`}>Default</Button>
+        <Button className={`${buttonThemeClass} _fill _primary`}>
           Primary
         </Button>
-        <Button className={`${buttonThemeClass} _secondary`}>
+        <Button className={`${buttonThemeClass} _fill _secondary`}>
           Secondary
         </Button>
-        <Button className={`${buttonThemeClass} _warning`}>
+        <Button className={`${buttonThemeClass} _fill _warning`}>
           Warning
         </Button>
-        <Button className={`${buttonThemeClass} _success`}>
+        <Button className={`${buttonThemeClass} _fill _success`}>
           Success
         </Button>
-        <Button className={`${buttonThemeClass} _danger`}>Danger</Button>
+        <Button className={`${buttonThemeClass} _fill _danger`}>Danger</Button>
       </p>
       <p>
-        <Button disabled className={`${buttonThemeClass} _primary`}>
+        <Button className={`${buttonThemeClass} _fill`}>Default</Button>
+        <Button disabled className={`${buttonThemeClass} _fill _primary`}>
           Primary
         </Button>
-        <Button disabled className={`${buttonThemeClass} _secondary`}>
+        <Button disabled className={`${buttonThemeClass} _fill _secondary`}>
           Secondary
         </Button>
-        <Button disabled className={`${buttonThemeClass} _warning`}>
+        <Button disabled className={`${buttonThemeClass} _fill _warning`}>
           Warning
         </Button>
-        <Button disabled className={`${buttonThemeClass} _success`}>
+        <Button disabled className={`${buttonThemeClass} _fill _success`}>
           Success
         </Button>
-        <Button disabled className={`${buttonThemeClass} _danger`}>
+        <Button disabled className={`${buttonThemeClass} _fill _danger`}>
           Danger
@@ -111,3 +111,5 @@ </Button>
       <p>
-        <Button disabled className={`${buttonThemeClass} _link`}>disabled</Button>
+        <Button disabled className={`${buttonThemeClass} _link`}>
+          disabled
+        </Button>
         <Button disabled className={`${buttonThemeClass} _link _primary`}>
@@ -114,0 +116,0 @@ Primary

es/index.d.ts

@@ -7,4 +7,5 @@ import * as React from 'react';
   children?: React.ReactNode;
+  classNames?: string;
 }
 declare const _default: (props?: ComponentProps) => JSX.Element;
 export default _default;

es/index.js

@@ -10,4 +10,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /**
- * Button
- * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{readonly component?: *}> & React.RefAttributes<unknown>>}
+ * 按钮组件
+ * @param Component
+ * @param classNames
+ * @param className
+ * @param otherProps
+ * @param ref
+ * @returns {*}
+ * @constructor
  */
@@ -17,15 +23,11 @@
   var Component = _ref.Component,
-      onBeforeReturn = _ref.onBeforeReturn,
-      otherProps = _objectWithoutProperties(_ref, ["Component", "onBeforeReturn"]);
+      classNames = _ref.classNames,
+      className = _ref.className,
+      otherProps = _objectWithoutProperties(_ref, ["Component", "classNames", "className"]);
 
-  var href = otherProps.href,
-      role = otherProps.role,
-      type = otherProps.type,
-      children = otherProps.children,
-      title = otherProps.title; // if exist Component use component
+  // if exist Component use component
   // or ComponentTag rely on href
+  var ComponentTag = Component ? Component : otherProps.href ? 'a' : 'button'; // only button got button type
 
-  var ComponentTag = Component ? Component : href ? 'a' : 'button'; // only button got button type
-
-  if (ComponentTag === 'button' && !type) {
+  if (ComponentTag === 'button' && !otherProps.type) {
     otherProps.type = 'button';
@@ -35,26 +37,20 @@ } // Got role attr when ComponentTag is not button
 
-  if (ComponentTag !== 'button' && !role) {
+  if (ComponentTag !== 'button' && !otherProps.role) {
     otherProps.role = 'button';
-  } // set the title of button
+  }
 
-
-  if (typeof children === 'string' && !title) {
-    otherProps.title = children;
-  } // on before component return
-
-
-  var renderProps = onBeforeReturn(otherProps);
+  var classNameNew = [classNames, className].filter(function (item) {
+    return !!item;
+  }).join(' ') || null;
   return /*#__PURE__*/React.createElement(ComponentTag, _extends({
+    className: classNameNew,
     ref: ref
-  }, renderProps));
+  }, otherProps));
 });
 NuButton.defaultProps = {
-  /** on before component return */
-  onBeforeReturn: function onBeforeReturn(props) {
-    return props;
-  }
+  classNames: 'nu_btn'
 };
 NuButton.propTypes = {
-  /** on before component return */
-  onBeforeReturn: PropTypes.func,
+  /** core className */
+  classNames: PropTypes.string,
 
@@ -61,0 +57,0 @@ /** href for tag a */

lib/index.d.ts

@@ -7,4 +7,5 @@ import * as React from 'react';
   children?: React.ReactNode;
+  classNames?: string;
 }
 declare const _default: (props?: ComponentProps) => JSX.Element;
 export default _default;

lib/index.js

@@ -21,20 +21,22 @@ "use strict";
 /**
- * Button
- * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{readonly component?: *}> & React.RefAttributes<unknown>>}
+ * 按钮组件
+ * @param Component
+ * @param classNames
+ * @param className
+ * @param otherProps
+ * @param ref
+ * @returns {*}
+ * @constructor
  */
 var NuButton = _react.default.forwardRef(function NuButton(_ref, ref) {
   var Component = _ref.Component,
-      onBeforeReturn = _ref.onBeforeReturn,
-      otherProps = _objectWithoutProperties(_ref, ["Component", "onBeforeReturn"]);
+      classNames = _ref.classNames,
+      className = _ref.className,
+      otherProps = _objectWithoutProperties(_ref, ["Component", "classNames", "className"]);
 
-  var href = otherProps.href,
-      role = otherProps.role,
-      type = otherProps.type,
-      children = otherProps.children,
-      title = otherProps.title; // if exist Component use component
+  // if exist Component use component
   // or ComponentTag rely on href
+  var ComponentTag = Component ? Component : otherProps.href ? 'a' : 'button'; // only button got button type
 
-  var ComponentTag = Component ? Component : href ? 'a' : 'button'; // only button got button type
-
-  if (ComponentTag === 'button' && !type) {
+  if (ComponentTag === 'button' && !otherProps.type) {
     otherProps.type = 'button';
@@ -44,27 +46,21 @@ } // Got role attr when ComponentTag is not button
 
-  if (ComponentTag !== 'button' && !role) {
+  if (ComponentTag !== 'button' && !otherProps.role) {
     otherProps.role = 'button';
-  } // set the title of button
+  }
 
-
-  if (typeof children === 'string' && !title) {
-    otherProps.title = children;
-  } // on before component return
-
-
-  var renderProps = onBeforeReturn(otherProps);
+  var classNameNew = [classNames, className].filter(function (item) {
+    return !!item;
+  }).join(' ') || null;
   return /*#__PURE__*/_react.default.createElement(ComponentTag, _extends({
+    className: classNameNew,
     ref: ref
-  }, renderProps));
+  }, otherProps));
 });
 
 NuButton.defaultProps = {
-  /** on before component return */
-  onBeforeReturn: function onBeforeReturn(props) {
-    return props;
-  }
+  classNames: 'nu_btn'
 };
 NuButton.propTypes = {
-  /** on before component return */
-  onBeforeReturn: _propTypes.default.func,
+  /** core className */
+  classNames: _propTypes.default.string,
 
@@ -71,0 +67,0 @@ /** href for tag a */

package.json

 {
   "name": "@_nu/react-button",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "No UI dependency Button of react",
@@ -30,3 +30,5 @@ "main": "lib/index.js",
   "devDependencies": {
-    "@_nu/css-button": "^0.0.8"
+    "@_nu/css-button": "^0.0.8",
+    "@types/react": "^16.9.43",
+    "@types/react-dom": "^16.9.8"
   },
@@ -51,3 +53,3 @@ "keywords": [
   },
-  "gitHead": "3a0c1bfa5649e05c0883e4464a69f0e74261add8"
+  "gitHead": "9ed7dc2c400af2581c7fa789a84d2ba0107cec33"
 }

README.md

@@ -1,6 +0,6 @@
-# Button
+# NuButton
 
-[![npm package][npm-badge]][npm-url]
-[![npm downloads][npm-downloads]][npm-url]
-[![github][git-badge]][git-url]
+| npm package                          | npm downloads                              | github                          |
+| ------------------------------------ | ------------------------------------------ | ------------------------------- |
+| [![npm package][npm-badge]][npm-url] | [![npm downloads][npm-downloads]][npm-url] | [![github][git-badge]][git-url] |
 
@@ -13,17 +13,14 @@ [npm-badge]: https://img.shields.io/npm/v/@_nu/react-button.svg
 
-No UI dependency button of react.
+没有 UI 依赖的按钮组件.
 
 <iframe src="https://codesandbox.io/embed/throbbing-leftpad-juijc?autoresize=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FButton.js" title="throbbing-leftpad-juijc" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
 
-English | [简体中文](./lang/zh.md)
+## 做了啥？
 
-## Features
+- 当 `props` 上有 `href` 时，会用 `a` 替换 `button`;
+- 默认为 `button` 添加 `type="button"`;
+- 当元素标签不是 `button` 时会默认添加 `role="button"`；
 
-- When got href tagName will replace by `a`;
-- When tagName is `button` will got `type="button"` as default;
-- When children is `<string>` and title will be `children` as default;
-- When tagName is not `button` will got `role="button"`
+## 安装
 
-## Install
-
 ```
@@ -33,41 +30,41 @@ yarn add @_nu/react-button @_nu/css-button
 
-- [@\_nu/react-button](https://nu-system.github.io/react/button/): Login only
-- [@\_nu/css-button](https://nu-system.github.io/css/button/): UI Just
+- [@\_nu/react-button](https://nu-system.github.io/react/button/): 逻辑组件
+- [@\_nu/css-button](https://nu-system.github.io/css/button/): 样式组件
 
-### Custom
+### 二次封装
 
 ```JSX
-/* @components/Button/index.js */
+/* @/components/Button/index.js */
+import NuButton from "@_nu/react-button";         // import
 import "@_nu/css-button";                         // core style
 import "@_nu/css-button/css/skins/bootstrap.css"; // skin of bootstrap
 import './style.css';                             // custome style
-import NuButton from "@_nu/react-button";         // import
-
-// Add default class
-NuButton.defaultProps.onBeforeReturn = ({className='', props})=> ({
-  className:`nu_btn ${className}`
-  ...props
+const Button = React.forwardRef(function Button(props, ref) {
+  return <NuButton classNames="nu_btn" ref={ref} {...props} />;
 });
 
-export default NuButton;
+export default Button;
 ```
 
-### Use
+> ⚠️：注意这里 `classNames` 和 `className`的区别, 见[底部 API](#Api)。
 
-```JSX
-<Button className="_fill _primay">Button</Button>
-<Button className="_fill _primay" href="/nu-button">Link Button</Button>
-<Button component="strong" className="_fill _primay">Button</Button>
+### `index.d.ts`
+
+```jsx
+import { ComponentProps } from '@_nu/react-button';
+declare const _default: (props?: ComponentProps) => JSX.Element;
+export default _default;
 ```
 
-## Api
+> ⚠️：二次封装之后，代码提示会丢失，需要额外添加 `index.d.ts` 维持代码提示！
 
-| Prop      |               type               | Default  |   Function   |
-| :-------- | :------------------------------: | :------: | :----------: |
-| href      |              string              | '&nbsp;' | href for `a` |
-| Component | string &#124; func &#124; object | 'button' |   tagName    |
+### 使用
 
 ```JSX
+import Button from '@/components/Button';
+
+// 这里省略了其它代码
+
 <Button className="_fill">hello</Button>
-<Button className="_fill" component="strong">hello</Button>
+<Button className="_fill" Component="strong">hello</Button>
 <Button className="_fill"><strong>hello</strong></Button>
@@ -79,31 +76,28 @@ <Button className="_fill" disabled>hello</Button>
 
-=>
+会渲染成：
 
 ```HTML
-<button class="nu_btn _fill" type="button" title="hello">hello</button>
-<strong class="nu_btn _fill" role="button" title="hello">hello</strong>
+<button class="nu_btn _fill" type="button">hello</button>
+<strong class="nu_btn _fill" role="button">hello</strong>
 <button class="nu_btn _fill" type="button"><strong>hello</strong></button>
-<button class="nu_btn _fill" type="button" disabled title="hello">hello</button>
-<button class="nu_btn _fill _primary" type="button" title="hello">hello</button>
+<button class="nu_btn _fill" type="button" disabled>hello</button>
+<button class="nu_btn _fill _primary" type="button">hello</button>
 <a class="nu_btn _fill _primary" role="button" href="." title="hello">hello</a>
 ```
 
-| defaultProps   |   type   |      Default      |           Function            |
-| :------------- | :------: | :---------------: | :---------------------------: |
-| onBeforeReturn | function | `(props)=> props` | custom props on before return |
+> ⚠️：这里是在定义了 `classNames="nu_btn"` 的状况之下
 
-## Custom style？
+## Api
 
-Go to [@\_nu/css-button](https://nu-system.github.io/css/button/)
+| 属性       |               类型               |  默认值  |           功能            |
+| :--------- | :------------------------------: | :------: | :-----------------------: |
+| href       |              string              | '&nbsp;' |       href for `a`        |
+| Component  | string &#124; func &#124; object | 'button' |          tagName          |
+| className  |              string              |   '-'    |         className         |
+| classNames |              string              | 'nu_btn' | 会添加到 `className` 之前 |
 
-## test
+> ⚠️：classNames 主要是用于在二次封装到时候，添加默认的 className
 
-```
-// How to start
-npm test
-```
+## 如何修改样式？
 
-```
-// generate coverage report
-npm run test:coverage
-```
+查看样式组件 [@\_nu/css-button](https://nu-system.github.io/zh/css/button/)

src/index.d.ts

@@ -7,4 +7,5 @@ import * as React from 'react';
   children?: React.ReactNode;
+  classNames?: string;
 }
 declare const _default: (props?: ComponentProps) => JSX.Element;
 export default _default;

src/index.js

@@ -5,17 +5,21 @@ import React from 'react';
 /**
- * Button
- * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{readonly component?: *}> & React.RefAttributes<unknown>>}
+ * 按钮组件
+ * @param Component
+ * @param classNames
+ * @param className
+ * @param otherProps
+ * @param ref
+ * @returns {*}
+ * @constructor
  */
 const NuButton = React.forwardRef(function NuButton(
-  { Component, onBeforeReturn, ...otherProps },
+  { Component, classNames, className, ...otherProps },
   ref,
 ) {
-  const { href, role, type, children, title } = otherProps;
-
   // if exist Component use component
   // or ComponentTag rely on href
-  const ComponentTag = Component ? Component : href ? 'a' : 'button';
+  const ComponentTag = Component ? Component : otherProps.href ? 'a' : 'button';
 
   // only button got button type
-  if (ComponentTag === 'button' && !type) {
+  if (ComponentTag === 'button' && !otherProps.type) {
     otherProps.type = 'button';
@@ -25,24 +29,19 @@ }
   // Got role attr when ComponentTag is not button
-  if (ComponentTag !== 'button' && !role) {
+  if (ComponentTag !== 'button' && !otherProps.role) {
     otherProps.role = 'button';
   }
 
-  // set the title of button
-  if (typeof children === 'string' && !title) {
-    otherProps.title = children;
-  }
+  const classNameNew =
+    [classNames, className].filter((item) => !!item).join(' ') || null;
 
-  // on before component return
-  const renderProps = onBeforeReturn(otherProps);
-  return <ComponentTag ref={ref} {...renderProps} />;
+  return <ComponentTag className={classNameNew} ref={ref} {...otherProps} />;
 });
 
 NuButton.defaultProps = {
-  /** on before component return */
-  onBeforeReturn: (props) => props,
+  classNames: 'nu_btn',
 };
 
 NuButton.propTypes = {
-  /** on before component return */
-  onBeforeReturn: PropTypes.func,
+  /** core className */
+  classNames: PropTypes.string,
   /** href for tag a */
@@ -49,0 +48,0 @@ href: PropTypes.string,

demo/Button/index.d.ts

-import { ComponentProps } from '../../src/index';
-declare const _default: (props?: ComponentProps) => JSX.Element;
-export default _default;

demo/Button/index.js

-import "@_nu/css-button";
-import "@_nu/css-button/css/skins/bootstrap.css";
-import "@_nu/css-button/css/skins/loading.css";
-import "@_nu/css-button/css/skins/webnovel.css";
-import NuButton from "../../src/index";
-import classname from "classnames";
-
-NuButton.defaultProps.onBeforeReturn = function(props) {
-  // variant is one of _fill | _ghost | _link
-  let variant = "_fill";
-  ["_ghost", "_link"].forEach((item) => {
-    if (props.className?.indexOf(item) > -1) {
-      variant = item;
-    }
-  });
-  props.className = classname("nu_btn", variant, props.className);
-  return props;
-};
-
-export default NuButton;

demo/Button/style.css

lang/zh.md

-# Button
-
-| npm package                          | npm downloads                              | github                          |
-| ------------------------------------ | ------------------------------------------ | ------------------------------- |
-| [![npm package][npm-badge]][npm-url] | [![npm downloads][npm-downloads]][npm-url] | [![github][git-badge]][git-url] |
-
-[npm-badge]: https://img.shields.io/npm/v/@_nu/react-button.svg
-[npm-url]: https://www.npmjs.org/package/@_nu/react-button
-[npm-downloads]: https://img.shields.io/npm/dw/@_nu/react-button
-[git-url]: https://github.com/nu-system/react-button
-[git-badge]: https://img.shields.io/github/stars/nu-system/react-button.svg?style=social
-
-没有 UI 依赖的按钮组件.
-
-<iframe src="https://codesandbox.io/embed/throbbing-leftpad-juijc?autoresize=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FButton.js" title="throbbing-leftpad-juijc" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
-
-[English](../README.md) | 简体中文
-
-## 做了啥？
-
-- 当定了 `href` 时，标签名会变成 `a`;
-- 会默认为 `button` 添加 `type="button"`;
-- 当子元素时纯文本当时候，会默认将其定义为`title`;
-- 当元素标签不是 `button` 时会默认添加 `role="button"`；
-
-## 安装
-
-```
-yarn add @_nu/react-button @_nu/css-button
-```
-
-- [@\_nu/react-button](https://nu-system.github.io/react/button/): 逻辑组件
-- [@\_nu/css-button](https://nu-system.github.io/css/button/): 样式组件
-
-### 二次封装
-
-```JSX
-/* @components/Button/index.js */
-import "@_nu/css-button";                         // core style
-import "@_nu/css-button/css/skins/bootstrap.css"; // skin of bootstrap
-import './style.css';                             // custome style
-import NuButton from "@_nu/react-button";         // import
-
-// Add default class
-NuButton.defaultProps.onBeforeReturn = ({className='', props})=> ({
-  className:`nu_btn ${className}`
-  ...props
-});
-
-export default NuButton;
-```
-
-### 使用
-
-```JSX
-<Button className="_fill _primay">Button</Button>
-<Button className="_fill _primay" href="/nu-button">Link Button</Button>
-<Button component="strong" className="_fill _primay">Button</Button>
-```
-
-## Api
-
-| 属性      |               类型               |  默认值  |     功能     |
-| :-------- | :------------------------------: | :------: | :----------: |
-| href      |              string              | '&nbsp;' | href for `a` |
-| component | string &#124; func &#124; object | 'button' |   tagName    |
-
-```JSX
-<Button className="nu_btn _fill">hello</Button>
-<Button className="nu_btn _fill" component="strong">hello</Button>
-<Button className="nu_btn _fill"><strong>hello</strong></Button>
-<Button className="nu_btn _fill" disabled>hello</Button>
-<Button className="nu_btn _fill _primary">hello</Button>
-<Button className="nu_btn _fill _primary" href="." title="hello">hello</Button>
-```
-
-=>
-
-```HTML
-<button class="nu_btn _fill" type="button" title="hello">hello</button>
-<strong class="nu_btn _fill" role="button" title="hello">hello</strong>
-<button class="nu_btn _fill" type="button"><strong>hello</strong></button>
-<button class="nu_btn _fill" type="button" disabled title="hello">hello</button>
-<button class="nu_btn _fill _primary" type="button" title="hello">hello</button>
-<a class="nu_btn _fill _primary" role="button" href="." title="hello">hello</a>
-```
-
-| defaultProps   |   type   |      Default      |           Function            |
-| :------------- | :------: | :---------------: | :---------------------------: |
-| onBeforeReturn | function | `(props)=> props` | custom props on before return |
-
-## 如何修改样式？
-
-查看样式组件 [@\_nu/css-button](https://nu-system.github.io/zh/css/button/)
-
-## 测试
-
-```
-// How to start
-npm test
-```
-
-```
-// generate coverage report
-npm run test:coverage
-```

No alert changes

Improved metrics

Lines of code

360

0.28%

Worsened metrics

Total package byte prevSize

22576

-13.99%

Dev dependency count

3

200%

Number of package files

14

-6.67%

Number of lines in readme file

101

-5.61%

No dependency changes