How to use uncontrollable - 10 common examples

step(amount, event) {
    var value = (this.props.value || 0) + amount

    var decimals =
      this.props.precision != null
        ? this.props.precision
        : numberLocalizer.precision(format(this.props))

    this.handleChange(decimals != null ? round(value, decimals) : value, event)

    return value
  }
}

export default uncontrollable(NumberPicker, { value: 'onChange' }, ['focus'])

// thank you kendo ui core
// https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.core.js#L1036
function round(value, precision) {
  precision = precision || 0

  value = ('' + value).split('e')
  value = Math.round(
    +(value[0] + 'e' + (value[1] ? +value[1] + precision : precision))
  )

  value = ('' + value).split('e')
  value = +(value[0] + 'e' + (value[1] ? +value[1] - precision : -precision))

  return value.toFixed(precision)
}

onSelect,
                            rootCloseEvent
                        });
                    }

                    return child;
                })}
            
        );
    }
}

// For component matching
Dropdown.defaultProps.componentType = Dropdown;

const UncontrollableDropdown = uncontrollable(Dropdown, {
    // Define the pairs of prop/handlers you want to be uncontrollable
    open: 'onToggle'
});

UncontrollableDropdown.Toggle = DropdownToggle;
UncontrollableDropdown.Menu = DropdownMenu;
UncontrollableDropdown.MenuWrapper = DropdownMenuWrapper;

export default UncontrollableDropdown;

}}
                        type="text"
                        value={value}
                        onChange={this.handleChange}
                        onFocus={this.handleFocus}
                        onBlur={this.handleBlur}
                        onKeyDown={this.handleKeyDown}
                    />
                
                {icon}
            
        );
    }
}

export default uncontrollable(TimeInput, {
    // Define the pairs of prop/handlers you want to be uncontrollable
    value: 'onChange'
});

return this.renderNav(child, {
                            onSelect, expanded
                        });
                    }

                    return child;
                })}
            
        );
    }
}

// For component matching
SideNav.defaultProps.componentType = SideNav;

const UncontrollableSideNav = uncontrollable(SideNav, {
    // Define the pairs of prop/handlers you want to be uncontrollable
    expanded: 'onToggle'
});

UncontrollableSideNav.Toggle = Toggle;
UncontrollableSideNav.Nav = Nav;
UncontrollableSideNav.NavItem = NavItem;
UncontrollableSideNav.NavIcon = NavIcon;
UncontrollableSideNav.NavText = NavText;

export default UncontrollableSideNav;

const Accordion = React.forwardRef((props, ref) => {
  let {
    // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
    as: Component = 'div',
    activeKey,
    bsPrefix,
    children,
    className,
    onSelect,
    ...controlledProps
  } = useUncontrolled(props, {
    activeKey: 'onSelect',
  });

  bsPrefix = useBootstrapPrefix(bsPrefix, 'accordion');

  return (
    
      
        
          {children}

inputPlaceholder,
    isDisabled,
    isMultiselect,
    isReadOnly,
    isSearchable,
    onBlur,
    onChange,
    onChangeInput,
    onClick,
    onFocus,
    options: rawOptions,
    popperContainer,
    style,
    value: rawValue,
    ...restProps
  } = useUncontrolled(props, { value: "onChange" });

  // normalize the options passed as prop
  const options = useMemo(
    () =>
      Array.isArray(rawOptions)
        ? rawOptions.map(opt =>
            typeof opt === "object"
              ? opt
              : { id: String(opt), text: String(opt) }
          )
        : [],
    [rawOptions]
  );

  // flat array of all options
  const flatOptions = useMemo(

function Dropdown({
  drop,
  alignEnd,
  defaultShow,
  show: rawShow,
  onToggle: rawOnToggle,
  itemSelector,
  focusFirstItemOnShow,
  children,
}) {
  const forceUpdate = useForceUpdate();
  const { show, onToggle } = useUncontrolled(
    { defaultShow, show: rawShow, onToggle: rawOnToggle },
    { show: 'onToggle' },
  );

  const [toggleElement, setToggle] = useCallbackRef();

  // We use normal refs instead of useCallbackRef in order to populate the
  // the value as quickly as possible, otherwise the effect to focus the element
  // may run before the state value is set
  const menuRef = useRef();
  const menuElement = menuRef.current;

  const setMenu = useCallback(
    ref => {
      menuRef.current = ref;
      // ensure that a menu set triggers an update for consumers

* A callback fired when a menu item is selected.
   *
   * ```js
   * (eventKey: any, event: Object) => any
   * ```
   */
  onSelect: React.PropTypes.func,

  /**
   * If `'menuitem'`, causes the dropdown to behave like a menu item rather than
   * a menu button.
   */
  role: React.PropTypes.string
};

Dropdown = uncontrollable(Dropdown, { open: 'onToggle' });

Dropdown.Toggle = DropdownToggle;
Dropdown.Menu = DropdownMenu;

export default Dropdown;

links: PropTypes.array.isRequired,
  onChangeSubFolder: PropTypes.func,
  onDelete: PropTypes.func,
  title: PropTypes.string,
  formatModifyDate: PropTypes.func.isRequired,
  formatFolderTitle: PropTypes.func.isRequired,
  onSelectedItem: PropTypes.func,
}

LinksGridView.defaultProps = {
  title: 'Links',
  subFolderContent: null,
  onSelectedItem: () => {},
}

export default uncontrollable(LinksGridView, {
  linkToDelete: 'onDeleteIntent',
  linkToEdit: 'onEditIntent',
  subFolderContent: 'onChangeSubFolder'
})

/>
        )
      })
    }
  
)

FileList.propTypes = {
  canModify: PropTypes.bool.isRequired,
  projectMembers: PropTypes.object.isRequired,
  loggedInUser: PropTypes.object.isRequired
}

FileList.Item = FileListItem

export default uncontrollable(FileList, {
  deletingFile: 'onDeleteIntent'
})