Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
@_nu/react-button
Advanced tools
@_nu/react-button - npm Package Compare versions
+23
-54
@@ -8,30 +8,33 @@ var _this = this, | ||
| import React, { useContext } from 'react'; | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import classNames from 'classnames'; // global style for theme | ||
| var ButtonClassNameContext = React.createContext(null); | ||
| /** | ||
| * Button | ||
| * @type {React.ComponentType<{ComponentSub?: *, children?: *, Component?: *, className?: *} & React.ClassAttributes<any>>} | ||
| * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{readonly as?: *}> & React.RefAttributes<unknown>>} | ||
| */ | ||
| var Button = React.forwardRef(function (_ref, ref) { | ||
| var className = _ref.className, | ||
| Component = _ref.Component, | ||
| children = _ref.children, | ||
| otherProps = _objectWithoutPropertiesLoose(_ref, ["className", "Component", "children"]); | ||
| var as = _ref.as, | ||
| otherProps = _objectWithoutPropertiesLoose(_ref, ["as"]); | ||
| var btnClassCTX = useContext(ButtonClassNameContext); | ||
| var classNameRender = classNames(btnClassCTX, className); // if exist Component use component | ||
| var href = otherProps.href, | ||
| role = otherProps.role, | ||
| type = otherProps.type, | ||
| children = otherProps.children, | ||
| title = otherProps.title; // 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 = as ? as : href ? 'a' : 'button'; // only button got button type | ||
| if (ComponentTag === 'button' && !otherProps.type) { | ||
| if (ComponentTag === 'button' && !type) { | ||
| otherProps.type = 'button'; | ||
| } // Got role attr when ComponentTag is not button | ||
| if (ComponentTag !== 'button' && !role) { | ||
| otherProps.role = 'button'; | ||
| } // set the title of button | ||
| if (!otherProps.title && typeof children === 'string') { | ||
| if (typeof children === 'string' && !title) { | ||
| otherProps.title = children; | ||
@@ -41,4 +44,3 @@ } | ||
| return /*#__PURE__*/React.createElement(ComponentTag, _extends({ | ||
| ref: ref, | ||
| className: classNameRender | ||
| ref: ref | ||
| }, otherProps, { | ||
@@ -48,24 +50,9 @@ __self: _this, | ||
| fileName: _jsxFileName, | ||
| lineNumber: 36, | ||
| columnNumber: 7 | ||
| lineNumber: 30, | ||
| columnNumber: 10 | ||
| } | ||
| }), children); | ||
| })); | ||
| }); | ||
| Button.propTypes = process.env.NODE_ENV !== "production" ? { | ||
| /** | ||
| * title of component | ||
| */ | ||
| title: PropTypes.string, | ||
| /** | ||
| * children of component | ||
| */ | ||
| children: PropTypes.node, | ||
| /** | ||
| * just className | ||
| */ | ||
| className: PropTypes.string, | ||
| /** | ||
| * href for tag a | ||
@@ -76,24 +63,6 @@ */ | ||
| /** | ||
| * status of disabled | ||
| */ | ||
| disabled: PropTypes.bool, | ||
| /** | ||
| * shell of button | ||
| */ | ||
| Component: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]) | ||
| as: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]) | ||
| } : {}; | ||
| export default Button; | ||
| /** | ||
| * global class provider | ||
| * @type {React.Provider<null>} | ||
| */ | ||
| var ButtonClassProvider = ButtonClassNameContext.Provider; | ||
| ButtonClassProvider.propTypes = { | ||
| /** | ||
| * global classNames | ||
| */ | ||
| value: PropTypes.string | ||
| }; | ||
| export { ButtonClassProvider }; | ||
| export default Button; |
+5
-13
| import * as React from 'react'; | ||
| export interface props { | ||
| className?: string; | ||
| children?: React.ReactNode; | ||
| title?: string; | ||
| export interface ComponentProps | ||
| extends React.ButtonHTMLAttributes<HTMLButtonElement> { | ||
| href?: string; | ||
| disabled?: boolean; | ||
| Component?: React.ReactNode | React.Component; | ||
| as?: React.ReactNode | React.Component; | ||
| } | ||
| declare interface Button<P extends props> { | ||
| props: P; | ||
| } | ||
| export default Button; | ||
| declare const _default: (props?: ComponentProps) => JSX.Element; | ||
| export default _default; |
+24
-61
| "use strict"; | ||
| exports.__esModule = true; | ||
| exports.ButtonClassProvider = exports["default"] = void 0; | ||
| exports["default"] = void 0; | ||
| var _react = _interopRequireWildcard(require("react")); | ||
| var _react = _interopRequireDefault(require("react")); | ||
| var _propTypes = _interopRequireDefault(require("prop-types")); | ||
| var _classnames = _interopRequireDefault(require("classnames")); | ||
| var _this = void 0, | ||
@@ -17,6 +15,2 @@ _jsxFileName = "/Users/ziven27/Pro/@_nu/react-button/src/index.js"; | ||
| function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } | ||
| function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; } | ||
| 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); } | ||
@@ -26,28 +20,30 @@ | ||
| // global style for theme | ||
| var ButtonClassNameContext = _react["default"].createContext(null); | ||
| /** | ||
| * Button | ||
| * @type {React.ComponentType<{ComponentSub?: *, children?: *, Component?: *, className?: *} & React.ClassAttributes<any>>} | ||
| * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{readonly as?: *}> & React.RefAttributes<unknown>>} | ||
| */ | ||
| var Button = _react["default"].forwardRef(function (_ref, ref) { | ||
| var className = _ref.className, | ||
| Component = _ref.Component, | ||
| children = _ref.children, | ||
| otherProps = _objectWithoutPropertiesLoose(_ref, ["className", "Component", "children"]); | ||
| var as = _ref.as, | ||
| otherProps = _objectWithoutPropertiesLoose(_ref, ["as"]); | ||
| var btnClassCTX = (0, _react.useContext)(ButtonClassNameContext); | ||
| var classNameRender = (0, _classnames["default"])(btnClassCTX, className); // if exist Component use component | ||
| var href = otherProps.href, | ||
| role = otherProps.role, | ||
| type = otherProps.type, | ||
| children = otherProps.children, | ||
| title = otherProps.title; // 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 = as ? as : href ? 'a' : 'button'; // only button got button type | ||
| if (ComponentTag === 'button' && !otherProps.type) { | ||
| if (ComponentTag === 'button' && !type) { | ||
| otherProps.type = 'button'; | ||
| } // Got role attr when ComponentTag is not button | ||
| if (ComponentTag !== 'button' && !role) { | ||
| otherProps.role = 'button'; | ||
| } // set the title of button | ||
| if (!otherProps.title && typeof children === 'string') { | ||
| if (typeof children === 'string' && !title) { | ||
| otherProps.title = children; | ||
@@ -57,4 +53,3 @@ } | ||
| return /*#__PURE__*/_react["default"].createElement(ComponentTag, _extends({ | ||
| ref: ref, | ||
| className: classNameRender | ||
| ref: ref | ||
| }, otherProps, { | ||
@@ -64,6 +59,6 @@ __self: _this, | ||
| fileName: _jsxFileName, | ||
| lineNumber: 36, | ||
| columnNumber: 7 | ||
| lineNumber: 30, | ||
| columnNumber: 10 | ||
| } | ||
| }), children); | ||
| })); | ||
| }); | ||
@@ -73,17 +68,2 @@ | ||
| /** | ||
| * title of component | ||
| */ | ||
| title: _propTypes["default"].string, | ||
| /** | ||
| * children of component | ||
| */ | ||
| children: _propTypes["default"].node, | ||
| /** | ||
| * just className | ||
| */ | ||
| className: _propTypes["default"].string, | ||
| /** | ||
| * href for tag a | ||
@@ -94,25 +74,8 @@ */ | ||
| /** | ||
| * status of disabled | ||
| */ | ||
| disabled: _propTypes["default"].bool, | ||
| /** | ||
| * shell of button | ||
| */ | ||
| Component: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].elementType]) | ||
| as: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].elementType]) | ||
| } : {}; | ||
| var _default = Button; | ||
| /** | ||
| * global class provider | ||
| * @type {React.Provider<null>} | ||
| */ | ||
| exports["default"] = _default; | ||
| var ButtonClassProvider = ButtonClassNameContext.Provider; | ||
| exports.ButtonClassProvider = ButtonClassProvider; | ||
| ButtonClassProvider.propTypes = { | ||
| /** | ||
| * global classNames | ||
| */ | ||
| value: _propTypes["default"].string | ||
| }; | ||
| module.exports = exports.default; |
+5
-2
| { | ||
| "name": "@_nu/react-button", | ||
| "version": "0.1.9", | ||
| "version": "1.0.0", | ||
| "description": "No UI dependency Button of react", | ||
@@ -48,2 +48,4 @@ "main": "lib/index.js", | ||
| "@babel/preset-react": "^7.8.3", | ||
| "@types/react": "^16.9.41", | ||
| "@types/react-dom": "^16.9.8", | ||
| "babel-jest": "^25.1.0", | ||
@@ -57,3 +59,4 @@ "conventional-changelog-cli": "^2.0.23", | ||
| "react": "^16.8.6", | ||
| "react-dom": "^16.8.6" | ||
| "react-dom": "^16.8.6", | ||
| "react-test-renderer": "^16.13.1" | ||
| }, | ||
@@ -60,0 +63,0 @@ "keywords": [ |
+26
-35
@@ -19,2 +19,9 @@ # Button | ||
| ## Features | ||
| - 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,8 +40,13 @@ | ||
| /* @components/Button/index.js */ | ||
| import Button from "@_nu/react-button"; | ||
| import "@_nu/css-button"; // core style | ||
| import "@_nu/css-button"; // core style | ||
| import "@_nu/css-button/css/skins/bootstrap.css"; // skin of bootstrap | ||
| import './style.css'; // custome style | ||
| import './style.css'; // custome style | ||
| export default from "@_nu/react-button"; | ||
| ``` | ||
| export default Button; | ||
| ```JSX | ||
| /* @components/Button/index.d.ts */ | ||
| import { ComponentProps } from "@_nu/react-button"; | ||
| declare const _default: (props?: ComponentProps) => JSX.Element; | ||
| export default _default; | ||
| ``` | ||
@@ -45,25 +57,5 @@ | ||
| ```JSX | ||
| import React, { useState } from 'react'; | ||
| import Button, { ButtonClassProvider } from '../Button'; | ||
| const Page=()=>{ | ||
| const [buttonThemeClass, setButtonThemeClass] = useState('theme_class1'); | ||
| const onThemeChange = e => { | ||
| setButtonThemeClass(e.currentTarget.value); | ||
| }; | ||
| return ( | ||
| <ButtonClassProvider value={buttonThemeClass}> | ||
| <div> | ||
| <select onChange={onThemeChange}> | ||
| <option value="theme_class1">theme1</option> | ||
| <option value="theme_class2">theme2</option> | ||
| </select> | ||
| <Button className="nu_btn">Button</Button> | ||
| <Button className="nu_btn" href="/nu-button">Button</Button> | ||
| </div> | ||
| </ButtonClassProvider> | ||
| ); | ||
| }; | ||
| export default Page; | ||
| <Button className="nu_btn _fill _primay">Button</Button> | ||
| <Button className="nu_btn _fill _primay" href="/nu-button">Link Button</Button> | ||
| <Button as="strong" className="nu_btn _fill _primay">Button</Button> | ||
| ``` | ||
@@ -73,12 +65,10 @@ | ||
| | Prop | type | Default | Function | | ||
| | :--------------- | :------------------------------: | :------: | :-----------------------: | | ||
| | children | string | Array | ' ' | children | | ||
| | className | string | Array | ' ' | className | | ||
| | href | string | ' ' | href for `a` | | ||
| | disabled | boolean | false | disabled status of button | | ||
| | Component | string | func | object | 'button' | wrapper | | ||
| | Prop | type | Default | Function | | ||
| | :--- | :------------------------------: | :------: | :----------: | | ||
| | href | string | ' ' | href for `a` | | ||
| | as | string | func | object | 'button' | tagName | | ||
| ```JSX | ||
| <Button className="nu_btn _fill">hello</Button> | ||
| <Button className="nu_btn _fill" as="strong">hello</Button> | ||
| <Button className="nu_btn _fill"><strong>hello</strong></Button> | ||
@@ -94,2 +84,3 @@ <Button className="nu_btn _fill" disabled>hello</Button> | ||
| <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> | ||
@@ -99,3 +90,3 @@ <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" href="." title="hello">hello</a> | ||
| <a class="nu_btn _fill _primary" role="button" href="." title="hello">hello</a> | ||
| ``` | ||
@@ -102,0 +93,0 @@ |
+28
-46
| # Button | ||
| | npm package| npm downloads | github | | ||
| | --------------- | ------------------------------ | ------ | ----------------------- | | ||
| | 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 | ||
@@ -20,2 +19,9 @@ [npm-url]: https://www.npmjs.org/package/@_nu/react-button | ||
| ## 做了啥？ | ||
| - 当定了 `href` 时，标签名会变成 `a`; | ||
| - 会默认为 `button` 添加 `type="button"`; | ||
| - 当子元素时纯文本当时候，会默认将其定义为`title`; | ||
| - 当元素标签不是 `button` 时会默认添加 `role="button"`； | ||
| ## 安装 | ||
@@ -34,8 +40,13 @@ | ||
| /* @components/Button/index.js */ | ||
| import Button from "@_nu/react-button"; | ||
| import "@_nu/css-button"; // core style | ||
| import "@_nu/css-button"; // core style | ||
| import "@_nu/css-button/css/skins/bootstrap.css"; // skin of bootstrap | ||
| import './style.css'; // custome style | ||
| import './style.css'; // custome style | ||
| export default from "@_nu/react-button"; | ||
| ``` | ||
| export default Button; | ||
| ```JSX | ||
| /* @components/Button/index.d.ts */ | ||
| import { ComponentProps } from "@_nu/react-button"; | ||
| declare const _default: (props?: ComponentProps) => JSX.Element; | ||
| export default _default; | ||
| ``` | ||
@@ -46,25 +57,5 @@ | ||
| ```JSX | ||
| import React, { useState } from 'react'; | ||
| import Button, { ButtonClassProvider } from '../Button'; | ||
| const Page=()=>{ | ||
| const [buttonThemeClass, setButtonThemeClass] = useState('theme_class1'); | ||
| const onThemeChange = e => { | ||
| setButtonThemeClass(e.currentTarget.value); | ||
| }; | ||
| return ( | ||
| <ButtonClassProvider value={buttonThemeClass}> | ||
| <div> | ||
| <select onChange={onThemeChange}> | ||
| <option value="theme_class1">theme1</option> | ||
| <option value="theme_class2">theme2</option> | ||
| </select> | ||
| <Button className="nu_btn">Button</Button> | ||
| <Button className="nu_btn" href="/nu-button">Button</Button> | ||
| </div> | ||
| </ButtonClassProvider> | ||
| ); | ||
| }; | ||
| export default Page; | ||
| <Button className="nu_btn _fill _primay">Button</Button> | ||
| <Button className="nu_btn _fill _primay" href="/nu-button">Link Button</Button> | ||
| <Button as="strong" className="nu_btn _fill _primay">Button</Button> | ||
| ``` | ||
@@ -74,12 +65,10 @@ | ||
| | 属性 | 类型 | 默认值 | 功能 | | ||
| | :--------------- | :------------------------------: | :------: | :-----------------------: | | ||
| | children | string | Array | ' ' | children | | ||
| | className | string | Array | ' ' | className | | ||
| | href | string | ' ' | href for `a` | | ||
| | disabled | boolean | false | disabled status of button | | ||
| | Component | string | func | object | 'button' | wrapper | | ||
| | 属性 | 类型 | 默认值 | 功能 | | ||
| | :--- | :------------------------------: | :------: | :----------: | | ||
| | href | string | ' ' | href for `a` | | ||
| | as | string | func | object | 'button' | tagName | | ||
| ```JSX | ||
| <Button className="nu_btn _fill">hello</Button> | ||
| <Button className="nu_btn _fill" as="strong">hello</Button> | ||
| <Button className="nu_btn _fill"><strong>hello</strong></Button> | ||
@@ -95,2 +84,3 @@ <Button className="nu_btn _fill" disabled>hello</Button> | ||
| <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> | ||
@@ -100,12 +90,5 @@ <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" href="." title="hello">hello</a> | ||
| <a class="nu_btn _fill _primary" role="button" href="." title="hello">hello</a> | ||
| ``` | ||
| ## ClassName 处理 | ||
| ```JSX | ||
| <Button className="_primary _fill _ghost _primary">hello</Button> | ||
| <Button className={['_primary','_fill','_ghost','_primary','','',null]}>hello</Button> | ||
| ``` | ||
| ## 如何修改样式？ | ||
@@ -115,3 +98,2 @@ | ||
| ## 测试 | ||
@@ -118,0 +100,0 @@ |
Fixed alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
0
-100%Worsened metrics
- Total package byte prevSize
15502
-17.1%- Dev dependency count
15
25%- Lines of code
118
-34.81%- Number of lines in readme file
103
-8.04%No dependency changes