@react-md/form
Advanced tools
Comparing version 2.1.2 to 2.2.0
@@ -6,2 +6,21 @@ # Change Log | ||
# [2.2.0](https://github.com/mlaursen/react-md/compare/v2.1.2...v2.2.0) (2020-08-11) | ||
### Bug Fixes | ||
- **listbox:** render `0` as a valid display value | ||
([d02b7a9](https://github.com/mlaursen/react-md/commit/d02b7a9042786e4d4c4a46d286b62e6d80afc621)) | ||
### Features | ||
- **form:** Added props to style Checkbox and Radio input element | ||
([b6d2318](https://github.com/mlaursen/react-md/commit/b6d23186b7355bacc198d5187d50c10a7186f4ca)) | ||
- **form:** Updated toggle inactive and active colors to be configurable | ||
([49319e6](https://github.com/mlaursen/react-md/commit/49319e65e7bf29380469b567b893a3cc775b2720)) | ||
# Change Log | ||
All notable changes to this project will be documented in this file. See | ||
[Conventional Commits](https://conventionalcommits.org) for commit guidelines. | ||
## [2.1.2](https://github.com/mlaursen/react-md/compare/v2.1.1...v2.1.2) (2020-08-01) | ||
@@ -8,0 +27,0 @@ |
@@ -76,5 +76,2 @@ var __assign = (this && this.__assign) || function () { | ||
} | ||
if (disabled) { | ||
return; | ||
} | ||
switch (event.key) { | ||
@@ -111,3 +108,3 @@ case " ": | ||
} | ||
}, [onKeyDown, disabled, show]); | ||
}, [onKeyDown, show]); | ||
var selectRef = useRef(null); | ||
@@ -114,0 +111,0 @@ var ref = useCallback(function (instance) { |
@@ -85,3 +85,3 @@ import { createElement } from "react"; | ||
export function getDisplayLabel(option, labelKey, includeLeft) { | ||
if (!option) { | ||
if (!option && option !== 0) { | ||
return null; | ||
@@ -88,0 +88,0 @@ } |
@@ -32,3 +32,3 @@ var __assign = (this && this.__assign) || function () { | ||
var InputToggle = forwardRef(function InputToggle(allProps, ref) { | ||
var _a = allProps, style = _a.style, className = _a.className, iconStyle = _a.iconStyle, iconClassName = _a.iconClassName, toggleStyle = _a.toggleStyle, propToggleClassName = _a.toggleClassName, icon = _a.icon, propOnFocus = _a.onFocus, propOnBlur = _a.onBlur, _b = _a.error, error = _b === void 0 ? false : _b, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.stacked, stacked = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, label = _a.label, labelStyle = _a.labelStyle, labelClassName = _a.labelClassName, labelDisabled = _a.labelDisabled, _f = _a.iconAfter, iconAfter = _f === void 0 ? false : _f, _g = _a.disableIconOverlay, disableIconOverlay = _g === void 0 ? false : _g, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, children = _a.children, indeterminate = _a.indeterminate, props = __rest(_a, ["style", "className", "iconStyle", "iconClassName", "toggleStyle", "toggleClassName", "icon", "onFocus", "onBlur", "error", "inline", "stacked", "disabled", "label", "labelStyle", "labelClassName", "labelDisabled", "iconAfter", "disableIconOverlay", "disableRipple", "disableProgrammaticRipple", "rippleTimeout", "rippleClassNames", "children", "indeterminate"]); | ||
var _a = allProps, style = _a.style, className = _a.className, iconStyle = _a.iconStyle, iconClassName = _a.iconClassName, toggleStyle = _a.toggleStyle, propToggleClassName = _a.toggleClassName, inputStyle = _a.inputStyle, inputClassName = _a.inputClassName, icon = _a.icon, propOnFocus = _a.onFocus, propOnBlur = _a.onBlur, _b = _a.error, error = _b === void 0 ? false : _b, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.stacked, stacked = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, label = _a.label, labelStyle = _a.labelStyle, labelClassName = _a.labelClassName, labelDisabled = _a.labelDisabled, _f = _a.iconAfter, iconAfter = _f === void 0 ? false : _f, _g = _a.disableIconOverlay, disableIconOverlay = _g === void 0 ? false : _g, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, children = _a.children, indeterminate = _a.indeterminate, props = __rest(_a, ["style", "className", "iconStyle", "iconClassName", "toggleStyle", "toggleClassName", "inputStyle", "inputClassName", "icon", "onFocus", "onBlur", "error", "inline", "stacked", "disabled", "label", "labelStyle", "labelClassName", "labelDisabled", "iconAfter", "disableIconOverlay", "disableRipple", "disableProgrammaticRipple", "rippleTimeout", "rippleClassNames", "children", "indeterminate"]); | ||
var id = props.id, type = props.type; | ||
@@ -55,3 +55,3 @@ var _h = useInteractionStates({ | ||
}), toggleClassName) }, | ||
React.createElement("input", __assign({}, props, handlers, { ref: ref, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: block("input") })), | ||
React.createElement("input", __assign({}, props, handlers, { ref: ref, style: inputStyle, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: cn(block("input"), inputClassName) })), | ||
React.createElement("span", { style: iconStyle, className: cn(block("icon", { | ||
@@ -58,0 +58,0 @@ circle: !disableIconOverlay && type === "radio", |
@@ -100,5 +100,2 @@ "use strict"; | ||
} | ||
if (disabled) { | ||
return; | ||
} | ||
switch (event.key) { | ||
@@ -135,3 +132,3 @@ case " ": | ||
} | ||
}, [onKeyDown, disabled, show]); | ||
}, [onKeyDown, show]); | ||
var selectRef = react_1.useRef(null); | ||
@@ -138,0 +135,0 @@ var ref = react_1.useCallback(function (instance) { |
@@ -92,3 +92,3 @@ "use strict"; | ||
function getDisplayLabel(option, labelKey, includeLeft) { | ||
if (!option) { | ||
if (!option && option !== 0) { | ||
return null; | ||
@@ -95,0 +95,0 @@ } |
@@ -38,2 +38,31 @@ import React, { CSSProperties, InputHTMLAttributes, ReactNode } from "react"; | ||
/** | ||
* An optional `style` to provide to the invisible `<input>` element that is | ||
* used to toggle the checked state. This prop is only available since the | ||
* `style` prop is passed to the container element, but you probably shouldn't | ||
* really style this element anyways. | ||
* | ||
* @since 2.2.0 | ||
*/ | ||
inputStyle?: CSSProperties; | ||
/** | ||
* An optional `className` to provide to the invisible `<input>` element that | ||
* is used to toggle the checked state. This prop does not have many uses and | ||
* is really just provided since the `className` is passed to the container | ||
* element instead of the `<input>`. However, this can be used to update the | ||
* icon styles if needed using the `:checked` state: | ||
* | ||
* ```scss | ||
* .custom-toggle-icon { | ||
* // styles | ||
* } | ||
* | ||
* .custom-input:checked + .custom-toggle-icon { | ||
* // custom checked styles | ||
* } | ||
* ``` | ||
* | ||
* @since 2.2.0 | ||
*/ | ||
inputClassName?: string; | ||
/** | ||
* Boolean if the icon's overlay should be disabled. The way the Checkbox and | ||
@@ -40,0 +69,0 @@ * Radio input elements work is by applying different opacity to the |
@@ -56,3 +56,3 @@ "use strict"; | ||
var InputToggle = react_1.forwardRef(function InputToggle(allProps, ref) { | ||
var _a = allProps, style = _a.style, className = _a.className, iconStyle = _a.iconStyle, iconClassName = _a.iconClassName, toggleStyle = _a.toggleStyle, propToggleClassName = _a.toggleClassName, icon = _a.icon, propOnFocus = _a.onFocus, propOnBlur = _a.onBlur, _b = _a.error, error = _b === void 0 ? false : _b, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.stacked, stacked = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, label = _a.label, labelStyle = _a.labelStyle, labelClassName = _a.labelClassName, labelDisabled = _a.labelDisabled, _f = _a.iconAfter, iconAfter = _f === void 0 ? false : _f, _g = _a.disableIconOverlay, disableIconOverlay = _g === void 0 ? false : _g, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, children = _a.children, indeterminate = _a.indeterminate, props = __rest(_a, ["style", "className", "iconStyle", "iconClassName", "toggleStyle", "toggleClassName", "icon", "onFocus", "onBlur", "error", "inline", "stacked", "disabled", "label", "labelStyle", "labelClassName", "labelDisabled", "iconAfter", "disableIconOverlay", "disableRipple", "disableProgrammaticRipple", "rippleTimeout", "rippleClassNames", "children", "indeterminate"]); | ||
var _a = allProps, style = _a.style, className = _a.className, iconStyle = _a.iconStyle, iconClassName = _a.iconClassName, toggleStyle = _a.toggleStyle, propToggleClassName = _a.toggleClassName, inputStyle = _a.inputStyle, inputClassName = _a.inputClassName, icon = _a.icon, propOnFocus = _a.onFocus, propOnBlur = _a.onBlur, _b = _a.error, error = _b === void 0 ? false : _b, _c = _a.inline, inline = _c === void 0 ? false : _c, _d = _a.stacked, stacked = _d === void 0 ? false : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, label = _a.label, labelStyle = _a.labelStyle, labelClassName = _a.labelClassName, labelDisabled = _a.labelDisabled, _f = _a.iconAfter, iconAfter = _f === void 0 ? false : _f, _g = _a.disableIconOverlay, disableIconOverlay = _g === void 0 ? false : _g, disableRipple = _a.disableRipple, disableProgrammaticRipple = _a.disableProgrammaticRipple, rippleTimeout = _a.rippleTimeout, rippleClassNames = _a.rippleClassNames, children = _a.children, indeterminate = _a.indeterminate, props = __rest(_a, ["style", "className", "iconStyle", "iconClassName", "toggleStyle", "toggleClassName", "inputStyle", "inputClassName", "icon", "onFocus", "onBlur", "error", "inline", "stacked", "disabled", "label", "labelStyle", "labelClassName", "labelDisabled", "iconAfter", "disableIconOverlay", "disableRipple", "disableProgrammaticRipple", "rippleTimeout", "rippleClassNames", "children", "indeterminate"]); | ||
var id = props.id, type = props.type; | ||
@@ -79,3 +79,3 @@ var _h = states_1.useInteractionStates({ | ||
}), toggleClassName) }, | ||
react_1.default.createElement("input", __assign({}, props, handlers, { ref: ref, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: block("input") })), | ||
react_1.default.createElement("input", __assign({}, props, handlers, { ref: ref, style: inputStyle, disabled: disabled, onFocus: onFocus, onBlur: onBlur, className: classnames_1.default(block("input"), inputClassName) })), | ||
react_1.default.createElement("span", { style: iconStyle, className: classnames_1.default(block("icon", { | ||
@@ -82,0 +82,0 @@ circle: !disableIconOverlay && type === "radio", |
{ | ||
"name": "@react-md/form", | ||
"version": "2.1.2", | ||
"version": "2.2.0", | ||
"description": "This package is for creating all the different form input types.", | ||
@@ -50,7 +50,7 @@ "scripts": { | ||
"dependencies": { | ||
"@react-md/button": "^2.1.2", | ||
"@react-md/button": "^2.2.0", | ||
"@react-md/icon": "^2.1.2", | ||
"@react-md/list": "^2.1.2", | ||
"@react-md/list": "^2.2.0", | ||
"@react-md/portal": "^2.0.2", | ||
"@react-md/progress": "^2.1.2", | ||
"@react-md/progress": "^2.2.0", | ||
"@react-md/states": "^2.1.2", | ||
@@ -76,3 +76,3 @@ "@react-md/theme": "^2.1.2", | ||
}, | ||
"gitHead": "b37e2fd0ec3413111e81e994f54cef68a113103f" | ||
"gitHead": "0a4024848493b6ef1ed37c591ac68781360b8f45" | ||
} |
import { createElement } from "react"; | ||
import { getOptionId, getOptionLabel } from "../utils"; | ||
import { getOptionId, getOptionLabel, getDisplayLabel } from "../utils"; | ||
@@ -38,1 +38,50 @@ describe("getOptionId", () => { | ||
}); | ||
describe("getDisplayLabel", () => { | ||
it("should return null if there is no option", () => { | ||
expect(getDisplayLabel(null, "label", true)).toBe(null); | ||
expect(getDisplayLabel(null, "label", false)).toBe(null); | ||
expect(getDisplayLabel("", "label", true)).toBe(null); | ||
expect(getDisplayLabel("", "label", false)).toBe(null); | ||
}); | ||
it("should return the label if the includeLeft option is false or the option is not an object", () => { | ||
expect(getDisplayLabel(0, "label", true)).toBe(0); | ||
expect(getDisplayLabel(0, "label", false)).toBe(0); | ||
expect(getDisplayLabel("0", "label", true)).toBe("0"); | ||
expect(getDisplayLabel("0", "label", false)).toBe("0"); | ||
expect(getDisplayLabel("Hello", "label", true)).toBe("Hello"); | ||
expect(getDisplayLabel("Hello", "label", false)).toBe("Hello"); | ||
}); | ||
it("should return the TextIconSpacing component when includeLeft is enabled and the option is an prop object", () => { | ||
const option = { | ||
leftAddon: "Addon", | ||
label: "Some Words", | ||
}; | ||
const display1 = getDisplayLabel(option, "label", true); | ||
expect(display1).toMatchInlineSnapshot(` | ||
<TextIconSpacing | ||
icon="Addon" | ||
> | ||
Some Words | ||
</TextIconSpacing> | ||
`); | ||
const option2 = { | ||
leftAddon: createElement("span"), | ||
label: "Some Words", | ||
}; | ||
const display2 = getDisplayLabel(option2, "label", true); | ||
expect(display2).toMatchInlineSnapshot( | ||
` | ||
<TextIconSpacing | ||
icon={<span />} | ||
> | ||
Some Words | ||
</TextIconSpacing> | ||
` | ||
); | ||
}); | ||
}); |
@@ -110,3 +110,3 @@ import { ReactNode, createElement } from "react"; | ||
): ReactNode { | ||
if (!option) { | ||
if (!option && option !== 0) { | ||
return null; | ||
@@ -113,0 +113,0 @@ } |
@@ -38,2 +38,31 @@ import React, { CSSProperties, InputHTMLAttributes, ReactNode } from "react"; | ||
/** | ||
* An optional `style` to provide to the invisible `<input>` element that is | ||
* used to toggle the checked state. This prop is only available since the | ||
* `style` prop is passed to the container element, but you probably shouldn't | ||
* really style this element anyways. | ||
* | ||
* @since 2.2.0 | ||
*/ | ||
inputStyle?: CSSProperties; | ||
/** | ||
* An optional `className` to provide to the invisible `<input>` element that | ||
* is used to toggle the checked state. This prop does not have many uses and | ||
* is really just provided since the `className` is passed to the container | ||
* element instead of the `<input>`. However, this can be used to update the | ||
* icon styles if needed using the `:checked` state: | ||
* | ||
* ```scss | ||
* .custom-toggle-icon { | ||
* // styles | ||
* } | ||
* | ||
* .custom-input:checked + .custom-toggle-icon { | ||
* // custom checked styles | ||
* } | ||
* ``` | ||
* | ||
* @since 2.2.0 | ||
*/ | ||
inputClassName?: string; | ||
/** | ||
* Boolean if the icon's overlay should be disabled. The way the Checkbox and | ||
@@ -40,0 +69,0 @@ * Radio input elements work is by applying different opacity to the |
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
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
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
1007231
14686
Updated@react-md/button@^2.2.0
Updated@react-md/list@^2.2.0
Updated@react-md/progress@^2.2.0