How to use uncontrollable - 10 common examples

To help you get started, we’ve selected a few uncontrollable examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github jquense / react-widgets / packages / react-widgets / src / NumberPicker.js View on Github external
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)
}
github trendmicro-frontend / react-dropdown / src / Dropdown.jsx View on Github external
onSelect,
                            rootCloseEvent
                        });
                    }

                    return child;
                })}
            </Component>
        );
    }
}

// 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;
github trendmicro-frontend / react-datepicker / src / TimeInput / index.jsx View on Github external
}}
                        type="text"
                        value={value}
                        onChange={this.handleChange}
                        onFocus={this.handleFocus}
                        onBlur={this.handleBlur}
                        onKeyDown={this.handleKeyDown}
                    />
                </div>
                {icon}
            </div>
        );
    }
}

export default uncontrollable(TimeInput, {
    // Define the pairs of prop/handlers you want to be uncontrollable
    value: 'onChange'
});
github trendmicro-frontend / react-sidenav / src / SideNav.jsx View on Github external
return this.renderNav(child, {
                            onSelect, expanded
                        });
                    }

                    return child;
                })}
            </Component>
        );
    }
}

// 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;
github react-bootstrap / react-bootstrap / src / Accordion.js View on Github external
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 (
    <AccordionContext.Provider value={activeKey}>
      <SelectableContext.Provider value={onSelect}>
        <Component
          ref={ref}
          {...controlledProps}
          className={classNames(className, bsPrefix)}
        >
          {children}
        </Component>
      </SelectableContext.Provider>
github sociomantic-tsunami / nessie-ui / src / ComboBox / index.jsx View on Github external
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(
github react-bootstrap / react-overlays / src / Dropdown.js View on Github external
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
github zhbhun / WebpackStudyDemo / 7-advanced / 7.3-buil-performance / src / Dropdown.js View on Github external
* 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;
github appirio-tech / connect-app / src / components / AssetsLibrary / LinksGridView.jsx View on Github external
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'
})
github appirio-tech / connect-app / src / components / FileList / FileList.jsx View on Github external
/>
        )
      })
    }
  </Panel>
)

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

FileList.Item = FileListItem

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

uncontrollable

Wrap a controlled react component, to allow specific prop/handler pairs to be uncontrolled

MIT
Latest version published 2 years ago

Package Health Score

70 / 100
Full package analysis