Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@react-md/icon
Advanced tools
@react-md/icon - npm Package Compare versions
Comparing version 2.0.0-alpha.12 to 2.0.0-alpha.13
@@ -23,3 +23,3 @@ var __assign = (this && this.__assign) || function () { | ||
| }; | ||
| import React, { forwardRef } from "react"; | ||
| import React, { forwardRef, } from "react"; | ||
| import cn from "classnames"; | ||
@@ -29,13 +29,13 @@ import { bem } from "@react-md/utils"; | ||
| /** | ||
| * The `FontIcon` component is used for rendering a font-icon library's | ||
| * icon. The default is to use the `material-icons` library, but others | ||
| * can be used as well. | ||
| * The `FontIcon` component is used for rendering a font-icon library's icon. | ||
| * The default is to use the `material-icons` library, but others can be used as | ||
| * well. | ||
| * | ||
| * If you are using another font icon library that does not always create icons with | ||
| * a perfect 1:1 scale (such as font awesome), it is recommended to use the `forceSize` | ||
| * and `forceFontSize` props to fix the sizing issues. | ||
| * If you are using another font icon library that does not always create icons | ||
| * with a perfect 1:1 scale (such as font awesome), it is recommended to use the | ||
| * `forceSize` and `forceFontSize` props to fix the sizing issues. | ||
| */ | ||
| var FontIcon = function (providedProps) { | ||
| var _a = providedProps, className = _a.className, iconClassName = _a.iconClassName, dense = _a.dense, forceSize = _a.forceSize, forceFontSize = _a.forceFontSize, children = _a.children, forwardedRef = _a.forwardedRef, props = __rest(_a, ["className", "iconClassName", "dense", "forceSize", "forceFontSize", "children", "forwardedRef"]); | ||
| return (React.createElement("i", __assign({}, props, { ref: forwardedRef, className: cn(block({ | ||
| function FontIcon(_a, ref) { | ||
| var className = _a.className, children = _a.children, _b = _a["aria-hidden"], ariaHidden = _b === void 0 ? true : _b, _c = _a.dense, dense = _c === void 0 ? false : _c, _d = _a.iconClassName, iconClassName = _d === void 0 ? "material-icons" : _d, _e = _a.forceSize, forceSize = _e === void 0 ? false : _e, _f = _a.forceFontSize, forceFontSize = _f === void 0 ? false : _f, props = __rest(_a, ["className", "children", "aria-hidden", "dense", "iconClassName", "forceSize", "forceFontSize"]); | ||
| return (React.createElement("i", __assign({}, props, { "aria-hidden": ariaHidden, ref: ref, className: cn(block({ | ||
| font: true, | ||
@@ -46,20 +46,8 @@ dense: dense, | ||
| }), iconClassName, className) }), children)); | ||
| }; | ||
| var defaultProps = { | ||
| "aria-hidden": true, | ||
| dense: false, | ||
| iconClassName: "material-icons", | ||
| forceSize: false, | ||
| forceFontSize: false, | ||
| }; | ||
| FontIcon.defaultProps = defaultProps; | ||
| } | ||
| var ForwardedFontIcon = forwardRef(FontIcon); | ||
| if (process.env.NODE_ENV !== "production") { | ||
| FontIcon.displayName = "FontIcon"; | ||
| var PropTypes = null; | ||
| try { | ||
| PropTypes = require("prop-types"); | ||
| } | ||
| catch (e) { } | ||
| if (PropTypes) { | ||
| FontIcon.propTypes = { | ||
| var PropTypes = require("prop-types"); | ||
| ForwardedFontIcon.propTypes = { | ||
| "aria-hidden": PropTypes.oneOfType([ | ||
@@ -77,4 +65,5 @@ PropTypes.oneOf(["true", "false"]), | ||
| } | ||
| catch (e) { } | ||
| } | ||
| export default forwardRef(function (props, ref) { return (React.createElement(FontIcon, __assign({}, props, { forwardedRef: ref }))); }); | ||
| export default ForwardedFontIcon; | ||
| //# sourceMappingURL=FontIcon.js.map |
@@ -39,8 +39,9 @@ import React, { createContext, useContext, useMemo, } from "react"; | ||
| * The `IconProvider` component is used to override all the default icons within | ||
| * `react-md` with a newly defined set of icons. This is super nice since you won't | ||
| * need to create new component wrappers for all the components within `react-md` | ||
| * if you want to switch to SVG icons instead of the default font icons. | ||
| * `react-md` with a newly defined set of icons. This is super nice since you | ||
| * won't need to create new component wrappers for all the components within | ||
| * `react-md` if you want to switch to SVG icons instead of the default font | ||
| * icons. | ||
| */ | ||
| var IconProvider = function (props) { | ||
| var _a = props, children = _a.children, back = _a.back, checkbox = _a.checkbox, download = _a.download, dropdown = _a.dropdown, expander = _a.expander, forward = _a.forward, menu = _a.menu, notification = _a.notification, password = _a.password, radio = _a.radio, sort = _a.sort; | ||
| var IconProvider = function (_a) { | ||
| var children = _a.children, _b = _a.back, back = _b === void 0 ? DEFAULT_ICONS.back : _b, _c = _a.checkbox, checkbox = _c === void 0 ? DEFAULT_ICONS.checkbox : _c, _d = _a.download, download = _d === void 0 ? DEFAULT_ICONS.download : _d, _e = _a.dropdown, dropdown = _e === void 0 ? DEFAULT_ICONS.dropdown : _e, _f = _a.expander, expander = _f === void 0 ? DEFAULT_ICONS.expander : _f, _g = _a.forward, forward = _g === void 0 ? DEFAULT_ICONS.forward : _g, _h = _a.menu, menu = _h === void 0 ? DEFAULT_ICONS.menu : _h, _j = _a.notification, notification = _j === void 0 ? DEFAULT_ICONS.notification : _j, _k = _a.password, password = _k === void 0 ? DEFAULT_ICONS.password : _k, _l = _a.radio, radio = _l === void 0 ? DEFAULT_ICONS.radio : _l, _m = _a.sort, sort = _m === void 0 ? DEFAULT_ICONS.sort : _m; | ||
| var value = useMemo(function () { return ({ | ||
@@ -73,11 +74,5 @@ back: back, | ||
| }; | ||
| IconProvider.defaultProps = DEFAULT_ICONS; | ||
| if (process.env.NODE_ENV !== "production") { | ||
| IconProvider.displayName = "IconProvider"; | ||
| var PropTypes = void 0; | ||
| try { | ||
| PropTypes = require("prop-types"); | ||
| } | ||
| catch (e) { } | ||
| if (PropTypes) { | ||
| var PropTypes = require("prop-types"); | ||
| IconProvider.propTypes = { | ||
@@ -98,4 +93,5 @@ children: PropTypes.node, | ||
| } | ||
| catch (e) { } | ||
| } | ||
| export default IconProvider; | ||
| //# sourceMappingURL=IconProvider.js.map |
@@ -28,7 +28,7 @@ var __assign = (this && this.__assign) || function () { | ||
| /** | ||
| * The `IconRotator` is a simple component that is used to rotate an icon from a one degrees | ||
| * to another. | ||
| * The `IconRotator` is a simple component that is used to rotate an icon from a | ||
| * one degrees to another. | ||
| */ | ||
| var IconRotator = function (providedProps) { | ||
| var _a = providedProps, style = _a.style, propClassName = _a.className, animate = _a.animate, rotated = _a.rotated, children = _a.children, forceIconWrap = _a.forceIconWrap, forwardedRef = _a.forwardedRef, props = __rest(_a, ["style", "className", "animate", "rotated", "children", "forceIconWrap", "forwardedRef"]); | ||
| function IconRotator(_a, ref) { | ||
| var style = _a.style, propClassName = _a.className, _b = _a.animate, animate = _b === void 0 ? true : _b, rotated = _a.rotated, children = _a.children, _c = _a.forceIconWrap, forceIconWrap = _c === void 0 ? false : _c, props = __rest(_a, ["style", "className", "animate", "rotated", "children", "forceIconWrap"]); | ||
| var className = cn(block({ animate: animate, rotated: rotated }), propClassName); | ||
@@ -41,18 +41,9 @@ if (!forceIconWrap && isValidElement(children)) { | ||
| } | ||
| return (React.createElement("span", __assign({}, props, { style: style, className: className, ref: forwardedRef }), children)); | ||
| }; | ||
| var defaultProps = { | ||
| animate: true, | ||
| forceIconWrap: false, | ||
| }; | ||
| IconRotator.defaultProps = defaultProps; | ||
| return (React.createElement("span", __assign({}, props, { style: style, className: className, ref: ref }), children)); | ||
| } | ||
| var ForwardedIconRotator = forwardRef(IconRotator); | ||
| if (process.env.NODE_ENV !== "production") { | ||
| IconRotator.displayName = "IconRotator"; | ||
| var PropTypes = null; | ||
| try { | ||
| PropTypes = require("prop-types"); | ||
| } | ||
| catch (e) { } | ||
| if (PropTypes) { | ||
| IconRotator.propTypes = { | ||
| var PropTypes = require("prop-types"); | ||
| ForwardedIconRotator.propTypes = { | ||
| className: PropTypes.string, | ||
@@ -65,4 +56,5 @@ animate: PropTypes.bool, | ||
| } | ||
| catch (e) { } | ||
| } | ||
| export default forwardRef(function (props, ref) { return (React.createElement(IconRotator, __assign({}, props, { forwardedRef: ref }))); }); | ||
| export default ForwardedIconRotator; | ||
| //# sourceMappingURL=IconRotator.js.map |
@@ -23,3 +23,3 @@ var __assign = (this && this.__assign) || function () { | ||
| }; | ||
| import React, { forwardRef } from "react"; | ||
| import React, { forwardRef, } from "react"; | ||
| import cn from "classnames"; | ||
@@ -29,7 +29,7 @@ import { bem } from "@react-md/utils"; | ||
| /** | ||
| * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a sprite map | ||
| * as an icon. | ||
| * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a | ||
| * sprite map as an icon. | ||
| */ | ||
| var SVGIcon = function (providedProps) { | ||
| var _a = providedProps, className = _a.className, use = _a.use, propChildren = _a.children, dense = _a.dense, forwardedRef = _a.forwardedRef, props = __rest(_a, ["className", "use", "children", "dense", "forwardedRef"]); | ||
| function SVGIcon(_a, ref) { | ||
| var _b = _a["aria-hidden"], ariaHidden = _b === void 0 ? true : _b, _c = _a.focusable, focusable = _c === void 0 ? "false" : _c, _d = _a.xmlns, xmlns = _d === void 0 ? "http://www.w3.org/2000/svg" : _d, _e = _a.viewBox, viewBox = _e === void 0 ? "0 0 24 24" : _e, _f = _a.dense, dense = _f === void 0 ? false : _f, className = _a.className, use = _a.use, propChildren = _a.children, props = __rest(_a, ["aria-hidden", "focusable", "xmlns", "viewBox", "dense", "className", "use", "children"]); | ||
| var children = propChildren; | ||
@@ -39,21 +39,9 @@ if (!children && use) { | ||
| } | ||
| return (React.createElement("svg", __assign({}, props, { ref: forwardedRef, className: cn(block({ svg: true, dense: dense }), className) }), children)); | ||
| }; | ||
| var defaultProps = { | ||
| "aria-hidden": true, | ||
| focusable: "false", | ||
| xmlns: "http://www.w3.org/2000/svg", | ||
| viewBox: "0 0 24 24", | ||
| dense: false, | ||
| }; | ||
| SVGIcon.defaultProps = defaultProps; | ||
| return (React.createElement("svg", __assign({}, props, { "aria-hidden": ariaHidden, ref: ref, className: cn(block({ svg: true, dense: dense }), className), focusable: focusable, xmlns: xmlns, viewBox: viewBox }), children)); | ||
| } | ||
| var ForwardedSVGIcon = forwardRef(SVGIcon); | ||
| if (process.env.NODE_ENV !== "production") { | ||
| SVGIcon.displayName = "SVGIcon"; | ||
| var PropTypes = null; | ||
| try { | ||
| PropTypes = require("prop-types"); | ||
| } | ||
| catch (e) { } | ||
| if (PropTypes) { | ||
| SVGIcon.propTypes = { | ||
| var PropTypes = require("prop-types"); | ||
| ForwardedSVGIcon.propTypes = { | ||
| className: PropTypes.string, | ||
@@ -71,4 +59,5 @@ role: PropTypes.string, | ||
| } | ||
| catch (e) { } | ||
| } | ||
| export default forwardRef(function (props, ref) { return (React.createElement(SVGIcon, __assign({}, props, { forwardedRef: ref }))); }); | ||
| export default ForwardedSVGIcon; | ||
| //# sourceMappingURL=SVGIcon.js.map |
| import React, { Children, cloneElement, Fragment, isValidElement, } from "react"; | ||
| import cn from "classnames"; | ||
| var TextIconSpacing = function (props) { | ||
| var _a; | ||
| var _b = props, propIcon = _b.icon, stacked = _b.stacked, iconAfter = _b.iconAfter, children = _b.children, className = _b.className, beforeClassName = _b.beforeClassName, afterClassName = _b.afterClassName, aboveClassName = _b.aboveClassName, belowClassName = _b.belowClassName, forceIconWrap = _b.forceIconWrap; | ||
| var TextIconSpacing = function (_a) { | ||
| var _b; | ||
| var className = _a.className, propIcon = _a.icon, _c = _a.children, children = _c === void 0 ? null : _c, _d = _a.stacked, stacked = _d === void 0 ? false : _d, _e = _a.iconAfter, iconAfter = _e === void 0 ? false : _e, _f = _a.forceIconWrap, forceIconWrap = _f === void 0 ? false : _f, _g = _a.beforeClassName, beforeClassName = _g === void 0 ? "rmd-icon--before" : _g, _h = _a.afterClassName, afterClassName = _h === void 0 ? "rmd-icon--after" : _h, _j = _a.aboveClassName, aboveClassName = _j === void 0 ? "rmd-icon--above" : _j, _k = _a.belowClassName, belowClassName = _k === void 0 ? "rmd-icon--below" : _k; | ||
| if (!propIcon) { | ||
| return children; | ||
| return React.createElement(Fragment, null, children); | ||
| } | ||
| var baseClassName = cn((_a = {}, | ||
| _a[beforeClassName] = !stacked && !iconAfter, | ||
| _a[afterClassName] = !stacked && iconAfter, | ||
| _a[aboveClassName] = stacked && !iconAfter, | ||
| _a[belowClassName] = stacked && iconAfter, | ||
| _a), className); | ||
| var baseClassName = cn((_b = {}, | ||
| _b[beforeClassName] = !stacked && !iconAfter, | ||
| _b[afterClassName] = !stacked && iconAfter, | ||
| _b[aboveClassName] = stacked && !iconAfter, | ||
| _b[belowClassName] = stacked && iconAfter, | ||
| _b), className); | ||
| var iconEl = propIcon; | ||
@@ -34,21 +34,5 @@ var content = children; | ||
| }; | ||
| var defaultProps = { | ||
| children: null, | ||
| stacked: false, | ||
| iconAfter: false, | ||
| forceIconWrap: false, | ||
| beforeClassName: "rmd-icon--before", | ||
| afterClassName: "rmd-icon--after", | ||
| aboveClassName: "rmd-icon--above", | ||
| belowClassName: "rmd-icon--below", | ||
| }; | ||
| TextIconSpacing.defaultProps = defaultProps; | ||
| if (process.env.NODE_ENV !== "production") { | ||
| TextIconSpacing.displayName = "TextIconSpacing"; | ||
| var PropTypes = null; | ||
| try { | ||
| PropTypes = require("prop-types"); | ||
| } | ||
| catch (e) { } | ||
| if (PropTypes) { | ||
| var PropTypes = require("prop-types"); | ||
| TextIconSpacing.propTypes = { | ||
@@ -71,4 +55,5 @@ className: PropTypes.string, | ||
| } | ||
| catch (e) { } | ||
| } | ||
| export default TextIconSpacing; | ||
| //# sourceMappingURL=TextIconSpacing.js.map |
@@ -40,13 +40,13 @@ "use strict"; | ||
| /** | ||
| * The `FontIcon` component is used for rendering a font-icon library's | ||
| * icon. The default is to use the `material-icons` library, but others | ||
| * can be used as well. | ||
| * The `FontIcon` component is used for rendering a font-icon library's icon. | ||
| * The default is to use the `material-icons` library, but others can be used as | ||
| * well. | ||
| * | ||
| * If you are using another font icon library that does not always create icons with | ||
| * a perfect 1:1 scale (such as font awesome), it is recommended to use the `forceSize` | ||
| * and `forceFontSize` props to fix the sizing issues. | ||
| * If you are using another font icon library that does not always create icons | ||
| * with a perfect 1:1 scale (such as font awesome), it is recommended to use the | ||
| * `forceSize` and `forceFontSize` props to fix the sizing issues. | ||
| */ | ||
| var FontIcon = function (providedProps) { | ||
| var _a = providedProps, className = _a.className, iconClassName = _a.iconClassName, dense = _a.dense, forceSize = _a.forceSize, forceFontSize = _a.forceFontSize, children = _a.children, forwardedRef = _a.forwardedRef, props = __rest(_a, ["className", "iconClassName", "dense", "forceSize", "forceFontSize", "children", "forwardedRef"]); | ||
| return (react_1.default.createElement("i", __assign({}, props, { ref: forwardedRef, className: classnames_1.default(block({ | ||
| function FontIcon(_a, ref) { | ||
| var className = _a.className, children = _a.children, _b = _a["aria-hidden"], ariaHidden = _b === void 0 ? true : _b, _c = _a.dense, dense = _c === void 0 ? false : _c, _d = _a.iconClassName, iconClassName = _d === void 0 ? "material-icons" : _d, _e = _a.forceSize, forceSize = _e === void 0 ? false : _e, _f = _a.forceFontSize, forceFontSize = _f === void 0 ? false : _f, props = __rest(_a, ["className", "children", "aria-hidden", "dense", "iconClassName", "forceSize", "forceFontSize"]); | ||
| return (react_1.default.createElement("i", __assign({}, props, { "aria-hidden": ariaHidden, ref: ref, className: classnames_1.default(block({ | ||
| font: true, | ||
@@ -57,20 +57,8 @@ dense: dense, | ||
| }), iconClassName, className) }), children)); | ||
| }; | ||
| var defaultProps = { | ||
| "aria-hidden": true, | ||
| dense: false, | ||
| iconClassName: "material-icons", | ||
| forceSize: false, | ||
| forceFontSize: false, | ||
| }; | ||
| FontIcon.defaultProps = defaultProps; | ||
| } | ||
| var ForwardedFontIcon = react_1.forwardRef(FontIcon); | ||
| if (process.env.NODE_ENV !== "production") { | ||
| FontIcon.displayName = "FontIcon"; | ||
| var PropTypes = null; | ||
| try { | ||
| PropTypes = require("prop-types"); | ||
| } | ||
| catch (e) { } | ||
| if (PropTypes) { | ||
| FontIcon.propTypes = { | ||
| var PropTypes = require("prop-types"); | ||
| ForwardedFontIcon.propTypes = { | ||
| "aria-hidden": PropTypes.oneOfType([ | ||
@@ -88,4 +76,5 @@ PropTypes.oneOf(["true", "false"]), | ||
| } | ||
| catch (e) { } | ||
| } | ||
| exports.default = react_1.forwardRef(function (props, ref) { return (react_1.default.createElement(FontIcon, __assign({}, props, { forwardedRef: ref }))); }); | ||
| exports.default = ForwardedFontIcon; | ||
| //# sourceMappingURL=FontIcon.js.map |
@@ -52,8 +52,9 @@ "use strict"; | ||
| * The `IconProvider` component is used to override all the default icons within | ||
| * `react-md` with a newly defined set of icons. This is super nice since you won't | ||
| * need to create new component wrappers for all the components within `react-md` | ||
| * if you want to switch to SVG icons instead of the default font icons. | ||
| * `react-md` with a newly defined set of icons. This is super nice since you | ||
| * won't need to create new component wrappers for all the components within | ||
| * `react-md` if you want to switch to SVG icons instead of the default font | ||
| * icons. | ||
| */ | ||
| var IconProvider = function (props) { | ||
| var _a = props, children = _a.children, back = _a.back, checkbox = _a.checkbox, download = _a.download, dropdown = _a.dropdown, expander = _a.expander, forward = _a.forward, menu = _a.menu, notification = _a.notification, password = _a.password, radio = _a.radio, sort = _a.sort; | ||
| var IconProvider = function (_a) { | ||
| var children = _a.children, _b = _a.back, back = _b === void 0 ? DEFAULT_ICONS.back : _b, _c = _a.checkbox, checkbox = _c === void 0 ? DEFAULT_ICONS.checkbox : _c, _d = _a.download, download = _d === void 0 ? DEFAULT_ICONS.download : _d, _e = _a.dropdown, dropdown = _e === void 0 ? DEFAULT_ICONS.dropdown : _e, _f = _a.expander, expander = _f === void 0 ? DEFAULT_ICONS.expander : _f, _g = _a.forward, forward = _g === void 0 ? DEFAULT_ICONS.forward : _g, _h = _a.menu, menu = _h === void 0 ? DEFAULT_ICONS.menu : _h, _j = _a.notification, notification = _j === void 0 ? DEFAULT_ICONS.notification : _j, _k = _a.password, password = _k === void 0 ? DEFAULT_ICONS.password : _k, _l = _a.radio, radio = _l === void 0 ? DEFAULT_ICONS.radio : _l, _m = _a.sort, sort = _m === void 0 ? DEFAULT_ICONS.sort : _m; | ||
| var value = react_1.useMemo(function () { return ({ | ||
@@ -86,11 +87,5 @@ back: back, | ||
| }; | ||
| IconProvider.defaultProps = DEFAULT_ICONS; | ||
| if (process.env.NODE_ENV !== "production") { | ||
| IconProvider.displayName = "IconProvider"; | ||
| var PropTypes = void 0; | ||
| try { | ||
| PropTypes = require("prop-types"); | ||
| } | ||
| catch (e) { } | ||
| if (PropTypes) { | ||
| var PropTypes = require("prop-types"); | ||
| IconProvider.propTypes = { | ||
@@ -111,4 +106,5 @@ children: PropTypes.node, | ||
| } | ||
| catch (e) { } | ||
| } | ||
| exports.default = IconProvider; | ||
| //# sourceMappingURL=IconProvider.js.map |
@@ -40,7 +40,7 @@ "use strict"; | ||
| /** | ||
| * The `IconRotator` is a simple component that is used to rotate an icon from a one degrees | ||
| * to another. | ||
| * The `IconRotator` is a simple component that is used to rotate an icon from a | ||
| * one degrees to another. | ||
| */ | ||
| var IconRotator = function (providedProps) { | ||
| var _a = providedProps, style = _a.style, propClassName = _a.className, animate = _a.animate, rotated = _a.rotated, children = _a.children, forceIconWrap = _a.forceIconWrap, forwardedRef = _a.forwardedRef, props = __rest(_a, ["style", "className", "animate", "rotated", "children", "forceIconWrap", "forwardedRef"]); | ||
| function IconRotator(_a, ref) { | ||
| var style = _a.style, propClassName = _a.className, _b = _a.animate, animate = _b === void 0 ? true : _b, rotated = _a.rotated, children = _a.children, _c = _a.forceIconWrap, forceIconWrap = _c === void 0 ? false : _c, props = __rest(_a, ["style", "className", "animate", "rotated", "children", "forceIconWrap"]); | ||
| var className = classnames_1.default(block({ animate: animate, rotated: rotated }), propClassName); | ||
@@ -53,18 +53,9 @@ if (!forceIconWrap && react_1.isValidElement(children)) { | ||
| } | ||
| return (react_1.default.createElement("span", __assign({}, props, { style: style, className: className, ref: forwardedRef }), children)); | ||
| }; | ||
| var defaultProps = { | ||
| animate: true, | ||
| forceIconWrap: false, | ||
| }; | ||
| IconRotator.defaultProps = defaultProps; | ||
| return (react_1.default.createElement("span", __assign({}, props, { style: style, className: className, ref: ref }), children)); | ||
| } | ||
| var ForwardedIconRotator = react_1.forwardRef(IconRotator); | ||
| if (process.env.NODE_ENV !== "production") { | ||
| IconRotator.displayName = "IconRotator"; | ||
| var PropTypes = null; | ||
| try { | ||
| PropTypes = require("prop-types"); | ||
| } | ||
| catch (e) { } | ||
| if (PropTypes) { | ||
| IconRotator.propTypes = { | ||
| var PropTypes = require("prop-types"); | ||
| ForwardedIconRotator.propTypes = { | ||
| className: PropTypes.string, | ||
@@ -77,4 +68,5 @@ animate: PropTypes.bool, | ||
| } | ||
| catch (e) { } | ||
| } | ||
| exports.default = react_1.forwardRef(function (props, ref) { return (react_1.default.createElement(IconRotator, __assign({}, props, { forwardedRef: ref }))); }); | ||
| exports.default = ForwardedIconRotator; | ||
| //# sourceMappingURL=IconRotator.js.map |
@@ -40,7 +40,7 @@ "use strict"; | ||
| /** | ||
| * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a sprite map | ||
| * as an icon. | ||
| * The `SVGIcon` component is used to render inline SVG icons or SVG icons in a | ||
| * sprite map as an icon. | ||
| */ | ||
| var SVGIcon = function (providedProps) { | ||
| var _a = providedProps, className = _a.className, use = _a.use, propChildren = _a.children, dense = _a.dense, forwardedRef = _a.forwardedRef, props = __rest(_a, ["className", "use", "children", "dense", "forwardedRef"]); | ||
| function SVGIcon(_a, ref) { | ||
| var _b = _a["aria-hidden"], ariaHidden = _b === void 0 ? true : _b, _c = _a.focusable, focusable = _c === void 0 ? "false" : _c, _d = _a.xmlns, xmlns = _d === void 0 ? "http://www.w3.org/2000/svg" : _d, _e = _a.viewBox, viewBox = _e === void 0 ? "0 0 24 24" : _e, _f = _a.dense, dense = _f === void 0 ? false : _f, className = _a.className, use = _a.use, propChildren = _a.children, props = __rest(_a, ["aria-hidden", "focusable", "xmlns", "viewBox", "dense", "className", "use", "children"]); | ||
| var children = propChildren; | ||
@@ -50,21 +50,9 @@ if (!children && use) { | ||
| } | ||
| return (react_1.default.createElement("svg", __assign({}, props, { ref: forwardedRef, className: classnames_1.default(block({ svg: true, dense: dense }), className) }), children)); | ||
| }; | ||
| var defaultProps = { | ||
| "aria-hidden": true, | ||
| focusable: "false", | ||
| xmlns: "http://www.w3.org/2000/svg", | ||
| viewBox: "0 0 24 24", | ||
| dense: false, | ||
| }; | ||
| SVGIcon.defaultProps = defaultProps; | ||
| return (react_1.default.createElement("svg", __assign({}, props, { "aria-hidden": ariaHidden, ref: ref, className: classnames_1.default(block({ svg: true, dense: dense }), className), focusable: focusable, xmlns: xmlns, viewBox: viewBox }), children)); | ||
| } | ||
| var ForwardedSVGIcon = react_1.forwardRef(SVGIcon); | ||
| if (process.env.NODE_ENV !== "production") { | ||
| SVGIcon.displayName = "SVGIcon"; | ||
| var PropTypes = null; | ||
| try { | ||
| PropTypes = require("prop-types"); | ||
| } | ||
| catch (e) { } | ||
| if (PropTypes) { | ||
| SVGIcon.propTypes = { | ||
| var PropTypes = require("prop-types"); | ||
| ForwardedSVGIcon.propTypes = { | ||
| className: PropTypes.string, | ||
@@ -82,4 +70,5 @@ role: PropTypes.string, | ||
| } | ||
| catch (e) { } | ||
| } | ||
| exports.default = react_1.forwardRef(function (props, ref) { return (react_1.default.createElement(SVGIcon, __assign({}, props, { forwardedRef: ref }))); }); | ||
| exports.default = ForwardedSVGIcon; | ||
| //# sourceMappingURL=SVGIcon.js.map |
@@ -15,14 +15,14 @@ "use strict"; | ||
| var classnames_1 = __importDefault(require("classnames")); | ||
| var TextIconSpacing = function (props) { | ||
| var _a; | ||
| var _b = props, propIcon = _b.icon, stacked = _b.stacked, iconAfter = _b.iconAfter, children = _b.children, className = _b.className, beforeClassName = _b.beforeClassName, afterClassName = _b.afterClassName, aboveClassName = _b.aboveClassName, belowClassName = _b.belowClassName, forceIconWrap = _b.forceIconWrap; | ||
| var TextIconSpacing = function (_a) { | ||
| var _b; | ||
| var className = _a.className, propIcon = _a.icon, _c = _a.children, children = _c === void 0 ? null : _c, _d = _a.stacked, stacked = _d === void 0 ? false : _d, _e = _a.iconAfter, iconAfter = _e === void 0 ? false : _e, _f = _a.forceIconWrap, forceIconWrap = _f === void 0 ? false : _f, _g = _a.beforeClassName, beforeClassName = _g === void 0 ? "rmd-icon--before" : _g, _h = _a.afterClassName, afterClassName = _h === void 0 ? "rmd-icon--after" : _h, _j = _a.aboveClassName, aboveClassName = _j === void 0 ? "rmd-icon--above" : _j, _k = _a.belowClassName, belowClassName = _k === void 0 ? "rmd-icon--below" : _k; | ||
| if (!propIcon) { | ||
| return children; | ||
| return react_1.default.createElement(react_1.Fragment, null, children); | ||
| } | ||
| var baseClassName = classnames_1.default((_a = {}, | ||
| _a[beforeClassName] = !stacked && !iconAfter, | ||
| _a[afterClassName] = !stacked && iconAfter, | ||
| _a[aboveClassName] = stacked && !iconAfter, | ||
| _a[belowClassName] = stacked && iconAfter, | ||
| _a), className); | ||
| var baseClassName = classnames_1.default((_b = {}, | ||
| _b[beforeClassName] = !stacked && !iconAfter, | ||
| _b[afterClassName] = !stacked && iconAfter, | ||
| _b[aboveClassName] = stacked && !iconAfter, | ||
| _b[belowClassName] = stacked && iconAfter, | ||
| _b), className); | ||
| var iconEl = propIcon; | ||
@@ -47,21 +47,5 @@ var content = children; | ||
| }; | ||
| var defaultProps = { | ||
| children: null, | ||
| stacked: false, | ||
| iconAfter: false, | ||
| forceIconWrap: false, | ||
| beforeClassName: "rmd-icon--before", | ||
| afterClassName: "rmd-icon--after", | ||
| aboveClassName: "rmd-icon--above", | ||
| belowClassName: "rmd-icon--below", | ||
| }; | ||
| TextIconSpacing.defaultProps = defaultProps; | ||
| if (process.env.NODE_ENV !== "production") { | ||
| TextIconSpacing.displayName = "TextIconSpacing"; | ||
| var PropTypes = null; | ||
| try { | ||
| PropTypes = require("prop-types"); | ||
| } | ||
| catch (e) { } | ||
| if (PropTypes) { | ||
| var PropTypes = require("prop-types"); | ||
| TextIconSpacing.propTypes = { | ||
@@ -84,4 +68,5 @@ className: PropTypes.string, | ||
| } | ||
| catch (e) { } | ||
| } | ||
| exports.default = TextIconSpacing; | ||
| //# sourceMappingURL=TextIconSpacing.js.map |
| { | ||
| "name": "@react-md/icon", | ||
| "version": "2.0.0-alpha.12", | ||
| "version": "2.0.0-alpha.13", | ||
| "description": "This package is for including icons within react-md. There is included support for both font icons and SVG icons. There is also a helper component for applying spacing between icons and text.", | ||
@@ -40,5 +40,5 @@ "scripts": { | ||
| "dependencies": { | ||
| "@react-md/theme": "^2.0.0-alpha.12", | ||
| "@react-md/typography": "^2.0.0-alpha.12", | ||
| "@react-md/utils": "^2.0.0-alpha.12", | ||
| "@react-md/theme": "^2.0.0-alpha.13", | ||
| "@react-md/typography": "^2.0.0-alpha.13", | ||
| "@react-md/utils": "^2.0.0-alpha.13", | ||
| "classnames": "^2.2.6" | ||
@@ -55,3 +55,3 @@ }, | ||
| }, | ||
| "gitHead": "b31afe8dc076cf0647ac3e99dc0b61f8f4b7b0e2" | ||
| "gitHead": "47959dd8c691deae0310c7cd01b3c275699e6f8c" | ||
| } |
@@ -12,18 +12,19 @@ import React, { HTMLAttributes, ReactNode } from "react"; | ||
| /** | ||
| * Any children to render to create the font icon. This is required for material-icons. | ||
| * Any children to render to create the font icon. This is required for | ||
| * material-icons. | ||
| */ | ||
| children?: ReactNode; | ||
| /** | ||
| * Either a boolean that will enforce the 24x24 size of the font icon or a number of the size | ||
| * to enforce. This is useful when using other font icon libraries that do not have a consistent | ||
| * size. | ||
| * Either a boolean that will enforce the 24x24 size of the font icon or a | ||
| * number of the size to enforce. This is useful when using other font icon | ||
| * libraries that do not have a consistent size. | ||
| */ | ||
| forceSize?: boolean; | ||
| /** | ||
| * Boolean if the `forceSize` prop should also force the `font-size` instead of only `width` and | ||
| * `height`. | ||
| * Boolean if the `forceSize` prop should also force the `font-size` instead | ||
| * of only `width` and `height`. | ||
| */ | ||
| forceFontSize?: boolean; | ||
| } | ||
| declare const _default: React.ForwardRefExoticComponent<FontIconProps & React.RefAttributes<HTMLElement>>; | ||
| export default _default; | ||
| declare const ForwardedFontIcon: React.ForwardRefExoticComponent<FontIconProps & React.RefAttributes<HTMLElement>>; | ||
| export default ForwardedFontIcon; |
@@ -12,4 +12,4 @@ import { FC, ReactNode } from "react"; | ||
| /** | ||
| * The general icon to use for dropdown menus or content that expands vertically | ||
| * in a new material instead of inline like the `expander` icon. | ||
| * The general icon to use for dropdown menus or content that expands | ||
| * vertically in a new material instead of inline like the `expander` icon. | ||
| */ | ||
@@ -26,4 +26,4 @@ dropdown?: ReactNode; | ||
| /** | ||
| * The general icon for navigating forwards or closing an item to the right. This is | ||
| * also used internally for nested dropdown menus. | ||
| * The general icon for navigating forwards or closing an item to the right. | ||
| * This is also used internally for nested dropdown menus. | ||
| */ | ||
@@ -36,8 +36,9 @@ forward?: ReactNode; | ||
| /** | ||
| * The general icon for displaying notifications. This is used internally in the `BadgedButton` | ||
| * in the `@react-md/badge` package. | ||
| * The general icon for displaying notifications. This is used internally in | ||
| * the `BadgedButton` in the `@react-md/badge` package. | ||
| */ | ||
| notification?: ReactNode; | ||
| /** | ||
| * The general icon for temporarily displaying a password's field value as plain text. | ||
| * The general icon for temporarily displaying a password's field value as | ||
| * plain text. | ||
| */ | ||
@@ -71,5 +72,5 @@ password?: ReactNode; | ||
| /** | ||
| * The children that should inherit the icon provider context. This is required | ||
| * since this component is pretty much worthless to use if you don't inherit | ||
| * the overridden icons. | ||
| * The children that should inherit the icon provider context. This is | ||
| * required since this component is pretty much worthless to use if you don't | ||
| * inherit the overridden icons. | ||
| */ | ||
@@ -80,7 +81,8 @@ children: ReactNode; | ||
| * The `IconProvider` component is used to override all the default icons within | ||
| * `react-md` with a newly defined set of icons. This is super nice since you won't | ||
| * need to create new component wrappers for all the components within `react-md` | ||
| * if you want to switch to SVG icons instead of the default font icons. | ||
| * `react-md` with a newly defined set of icons. This is super nice since you | ||
| * won't need to create new component wrappers for all the components within | ||
| * `react-md` if you want to switch to SVG icons instead of the default font | ||
| * icons. | ||
| */ | ||
| declare const IconProvider: FC<IconProviderProps>; | ||
| export default IconProvider; |
| import React, { CSSProperties, HTMLAttributes, ReactNode } from "react"; | ||
| export interface IconRotatorBaseProps extends HTMLAttributes<HTMLSpanElement> { | ||
| /** | ||
| * An optional style to apply to the surrounding span when the `forceIconWrap` prop is enabled | ||
| * or the children is not a single react element. | ||
| * An optional style to apply to the surrounding span when the `forceIconWrap` | ||
| * prop is enabled or the children is not a single react element. | ||
| */ | ||
@@ -21,4 +21,5 @@ style?: CSSProperties; | ||
| /** | ||
| * Boolean if the child icon should be "forcefully" wrapped in a `<span>` element. This should | ||
| * be enabled if you have a custom icon that does not pass the `className` prop down. | ||
| * Boolean if the child icon should be "forcefully" wrapped in a `<span>` | ||
| * element. This should be enabled if you have a custom icon that does not | ||
| * pass the `className` prop down. | ||
| */ | ||
@@ -29,9 +30,9 @@ forceIconWrap?: boolean; | ||
| /** | ||
| * The icon that should be rotated. If this is a valid React Element, the class names will be | ||
| * cloned into that icon, otherwise the icon will be wrapped in a span with the correct class | ||
| * names applied. | ||
| * The icon that should be rotated. If this is a valid React Element, the | ||
| * class names will be cloned into that icon, otherwise the icon will be | ||
| * wrapped in a span with the correct class names applied. | ||
| */ | ||
| children: ReactNode; | ||
| } | ||
| declare const _default: React.ForwardRefExoticComponent<IconRotatorProps & React.RefAttributes<HTMLSpanElement>>; | ||
| export default _default; | ||
| declare const ForwardedIconRotator: React.ForwardRefExoticComponent<IconRotatorProps & React.RefAttributes<HTMLSpanElement>>; | ||
| export default ForwardedIconRotator; |
| import React, { HTMLAttributes, ReactNode } from "react"; | ||
| export interface SVGIconProps extends HTMLAttributes<SVGSVGElement> { | ||
| /** | ||
| * Boolean if the SVG should gain the `focusable` attribute. This is disabled by default | ||
| * since IE11 and Edge actually default this to true and keyboard's will tab focus all SVGs. | ||
| * Boolean if the SVG should gain the `focusable` attribute. This is disabled | ||
| * by default since IE11 and Edge actually default this to true and keyboard's | ||
| * will tab focus all SVGs. | ||
| */ | ||
| focusable?: "false" | "true" | boolean; | ||
| /** | ||
| * The `viewBox` attribute allows you to specify that a given set of graphics stretch to | ||
| * fit a particular container element. | ||
| * The `viewBox` attribute allows you to specify that a given set of graphics | ||
| * stretch to fit a particular container element. | ||
| * | ||
| * The value of the `viewBox` attribute is a list of four numbers min-x, min-y, width and | ||
| * height, separated by white space and/or a comma, which specify a rectangle in user | ||
| * space which should be mapped to the bounds of the viewport established by the given | ||
| * element, taking into account attribute `preserveAspectRatio`. | ||
| * The value of the `viewBox` attribute is a list of four numbers min-x, | ||
| * min-y, width and height, separated by white space and/or a comma, which | ||
| * specify a rectangle in user space which should be mapped to the bounds of | ||
| * the viewport established by the given element, taking into account | ||
| * attribute `preserveAspectRatio`. | ||
| * | ||
| * Negative values for width or height are not permitted and a value of zero disables | ||
| * rendering of the element. An optional `viewbox` for the SVG. | ||
| * Negative values for width or height are not permitted and a value of zero | ||
| * disables rendering of the element. An optional `viewbox` for the SVG. | ||
| * | ||
| * For example, if the SVG element is 250 (width) by 200 (height) and you provide | ||
| * `viewBox="0 0 25 20"`, the coordinates inside the SVG will go from the top left corner | ||
| * (0, 0) to the bottom right (25, 20) and each unit will be worth `10px`. | ||
| * For example, if the SVG element is 250 (width) by 200 (height) and you | ||
| * provide `viewBox="0 0 25 20"`, the coordinates inside the SVG will go from | ||
| * the top left corner (0, 0) to the bottom right (25, 20) and each unit will | ||
| * be worth `10px`. | ||
| */ | ||
| viewBox?: string; | ||
| /** | ||
| * An optional `xmlns` string to provide. The `use` prop will not work without this prop | ||
| * defined. | ||
| * An optional `xmlns` string to provide. The `use` prop will not work without | ||
| * this prop defined. | ||
| */ | ||
| xmlns?: string; | ||
| /** | ||
| * This should be a link to a part of an SVG sprite map. So normally one of the following: | ||
| * This should be a link to a part of an SVG sprite map. So normally one of | ||
| * the following: | ||
| * - `'#some-custom-svg'` | ||
| * - `'/images/spritemap.svg#some-custom-svg'` | ||
| * | ||
| * This prop **should not** be used with the `children` prop as only one will be rendered. | ||
| * This prop **should not** be used with the `children` prop as only one will | ||
| * be rendered. | ||
| * | ||
| * > NOTE: IE **does not support** external SVGs. Please see the demo for more details. | ||
| * > NOTE: IE **does not support** external SVGs. Please see the demo for more | ||
| * > details. | ||
| */ | ||
@@ -45,7 +51,8 @@ use?: string; | ||
| /** | ||
| * Any `<svg>` children to render to create your icon. This can not be used with the `use` prop. | ||
| * Any `<svg>` children to render to create your icon. This can not be used | ||
| * with the `use` prop. | ||
| */ | ||
| children?: ReactNode; | ||
| } | ||
| declare const _default: React.ForwardRefExoticComponent<SVGIconProps & React.RefAttributes<SVGSVGElement>>; | ||
| export default _default; | ||
| declare const ForwardedSVGIcon: React.ForwardRefExoticComponent<SVGIconProps & React.RefAttributes<SVGSVGElement>>; | ||
| export default ForwardedSVGIcon; |
| import { FC, ReactElement, ReactNode } from "react"; | ||
| export interface TextIconSpacingProps { | ||
| /** | ||
| * An optional className to apply to the surroudning `<span>` when the `forceIconWrap` prop | ||
| * is enabled or the icon is not a valid React Element. If the `forceIconWrap` prop is | ||
| * not enabled, it will be cloned into the icon instead. | ||
| * An optional className to apply to the surroudning `<span>` when the | ||
| * `forceIconWrap` prop is enabled or the icon is not a valid React Element. | ||
| * If the `forceIconWrap` prop is not enabled, it will be cloned into the icon | ||
| * instead. | ||
| */ | ||
| className?: string; | ||
| /** | ||
| * An optional icon to display with a text button. This is invalid for icon buttons. If this is | ||
| * a single element, a new class name will be cloned into the element to get correct spacing so | ||
| * if you have a custom icon element, you **must** also pass that class name down. If you are | ||
| * using one of the react-md icon component packages, this is handled automatically. | ||
| * An optional icon to display with a text button. This is invalid for icon | ||
| * buttons. If this is a single element, a new class name will be cloned into | ||
| * the element to get correct spacing so if you have a custom icon element, | ||
| * you **must** also pass that class name down. If you are using one of the | ||
| * react-md icon component packages, this is handled automatically. | ||
| * | ||
| * If this is not a valid react element, the icon will be wrapped in a `<span>` instead | ||
| * with the class names applied. | ||
| * If this is not a valid react element, the icon will be wrapped in a | ||
| * `<span>` instead with the class names applied. | ||
| */ | ||
@@ -24,4 +26,5 @@ icon?: ReactElement<Element> | ReactNode; | ||
| /** | ||
| * The children to render before or after the provided icon. This is defaulted to `null` so that | ||
| * providing a `null` icon will correctly render without React crashing. | ||
| * The children to render before or after the provided icon. This is defaulted | ||
| * to `null` so that providing a `null` icon will correctly render without | ||
| * React crashing. | ||
| */ | ||
@@ -38,20 +41,22 @@ children?: ReactNode; | ||
| /** | ||
| * The class name to use for an icon that is placed before above the text. This is used when | ||
| * the `stacked` prop is enabled and the `iconAfter` prop is disabled or omitted. | ||
| * The class name to use for an icon that is placed before above the text. | ||
| * This is used when the `stacked` prop is enabled and the `iconAfter` prop is | ||
| * disabled or omitted. | ||
| */ | ||
| aboveClassName?: string; | ||
| /** | ||
| * The class name to use for an icon that is placed before above the text. This is used when | ||
| * the `stacked` prop is enabled and the `iconAfter` prop is enabled. | ||
| * The class name to use for an icon that is placed before above the text. | ||
| * This is used when the `stacked` prop is enabled and the `iconAfter` prop is | ||
| * enabled. | ||
| */ | ||
| belowClassName?: string; | ||
| /** | ||
| * Boolean if the icon should be forced into a `<span>` with the class names applied instead of | ||
| * attempting to clone into the provided icon. | ||
| * Boolean if the icon should be forced into a `<span>` with the class names | ||
| * applied instead of attempting to clone into the provided icon. | ||
| */ | ||
| forceIconWrap?: boolean; | ||
| /** | ||
| * Boolean if the icon and text should be stacked instead of inline. Note: You'll normally want | ||
| * to update the container element to have `display: flex` and `flex-direction: column` for | ||
| * this to work. | ||
| * Boolean if the icon and text should be stacked instead of inline. Note: | ||
| * You'll normally want to update the container element to have `display: | ||
| * flex` and `flex-direction: column` for this to work. | ||
| */ | ||
@@ -58,0 +63,0 @@ stacked?: boolean; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.04%
499434
- Lines of code
- decreased by-5.99%
1992