Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

uncontrollable

Package Overview
Dependencies
Maintainers
1
Versions
50
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

uncontrollable - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

15

lib/uncontrollable.js

@@ -6,3 +6,3 @@ "use strict";

function customPropType(handler, propType) {
function customPropType(handler, propType, name) {

@@ -12,5 +12,5 @@ return function (props, propName, componentName, location) {

if (props[propName] !== undefined) {
if (!props[handler]) return new Error("You have provided a `" + propName + "` prop to " + "`" + componentName + "` without an `" + handler + "` handler. This will render a read-only field. " + "If the field should be mutable use `" + defaultKey(propName) + "`. Otherwise, set `" + handler + "`");
if (!props[handler]) return new Error("You have provided a `" + propName + "` prop to " + "`" + name + "` without an `" + handler + "` handler. This will render a read-only field. " + "If the field should be mutable use `" + defaultKey(propName) + "`. Otherwise, set `" + handler + "`");
return propType && propType(props, propName, componentName, location);
return propType && propType(props, propName, name, location);
}

@@ -29,3 +29,4 @@ };

module.exports = function (Component, controlledValues, taps) {
var types = {};
var name = Component.displayName || Component.name || "Component",
types = {};

@@ -38,3 +39,3 @@ if (process.env.NODE_ENV !== "production" && getType(Component).propTypes) {

obj[prop] = customPropType(handler, type);
obj[prop] = customPropType(handler, type, Component.displayName);
if (type !== undefined) {

@@ -46,2 +47,4 @@ obj[defaultKey(prop)] = type;

name = name[0].toUpperCase() + name.substr(1);
taps = taps || {};

@@ -51,3 +54,3 @@

displayName: Component.displayName,
displayName: "Uncontrolled" + name,

@@ -54,0 +57,0 @@ propTypes: types,

2

package.json
{
"name": "uncontrollable",
"version": "1.1.3",
"version": "1.1.4",
"description": "Wrap a controlled react component, to allow spcific prop/handler pairs to be uncontrolled",

@@ -5,0 +5,0 @@ "author": {

@@ -13,3 +13,3 @@ # uncontrollable

If you are a bit unsure on the _why_ of this module read the next section first. If you just want to see some real-world example, check out [React Widgets](https://github.com/jquense/react-widgets) which makes [heavy use of this strategy](https://github.com/jquense/react-widgets/blob/master/src/Multiselect.jsx#L410).
If you are a bit unsure on the _why_ of this module read the next section first. If you just want to see some real-world example, check out [React Widgets](https://github.com/jquense/react-widgets) which makes [heavy use of this strategy](https://github.com/jquense/react-widgets/blob/master/src/Multiselect.jsx#L418).

@@ -97,5 +97,5 @@ require the module: `var uncontrollable = require('uncontrollable')`

We want to just handle the open/onToggle case ourselves if the consumer doesn't provide a `open` prop (indicating that they want to control it). Rather than complicating our dropdown component will all that logic obsuring the business logic of our dropdown, we can add it later, by taking our dropdown and wrapping it inside another component that handles that for us.
We want to just handle the open/onToggle case ourselves if the consumer doesn't provide a `open` prop (indicating that they want to control it). Rather than complicating our dropdown component with all that logic obsuring the business logic of our dropdown, we can add it later, by taking our dropdown and wrapping it inside another component that handles that for us.
`uncontrollable` allows you seperate out the logic necessary to create controlled/uncontrolled inputs letting you focus on creating a completely controlled input and wrapping it later. This tends to be a lot simplier to reason about as well.
`uncontrollable` allows you separate out the logic necessary to create controlled/uncontrolled inputs letting you focus on creating a completely controlled input and wrapping it later. This tends to be a lot simplier to reason about as well.

@@ -102,0 +102,0 @@ ```js

@@ -61,2 +61,8 @@ 'use strict';

Control.displayName.should.equal('UncontrolledBase')
})
it('should adjust displayName', () => {
var Control = uncontrol(Base, { value: 'onChange' })
Control.propTypes.should.have.property('defaultValue')

@@ -66,2 +72,3 @@ .that.equals(Base.propTypes.value)

it('should track state if no specified', () => {

@@ -68,0 +75,0 @@ var Control = uncontrol(Base, { value: 'onChange' })

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc