How to use the uncontrollable/batching function in uncontrollable
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.
aruberto / react-foundation-components / src / tabs / create.js View on Github 
});
return (
<div>
{headerChildren}
{contentChildren}
</div>
);
}
}
const Tabs = uncontrollable(TabsControlled, { activeKey: 'onSelect' });
Tabs.displayName = 'Tabs';
Tab.Title = TabTitle;
Tabs.Tab = Tab;
Tabs.Header = TabsHeader;
Tabs.Content = TabsContent;
return { Tabs, TabsHeader, TabsContent, Tab, TabTitle };
}checked: child.props.eventKey === activeKey,
onToggle: this.handleToggle,
size,
});
}
return child;
});
return (
<div>{newChildren}</div>
);
}
}
const RadioSwitch = uncontrollable(RadioSwitchControlled, { activeKey: 'onSelect' });
RadioSwitch.displayName = 'RadioSwitch';
Switch.Radio = RadioSwitch;
Switch.CheckedLabel = SwitchCheckedLabel;
Switch.UncheckedLabel = SwitchUncheckedLabel;
Switch.PadelLabel = SwitchPadelLabel;
return { Switch, RadioSwitch, SwitchCheckedLabel, SwitchUncheckedLabel, SwitchPadelLabel };
}aria-labelledby={labelId}
className={contentClassNames}
id={contentId}
role="tabpanel"
style={{ ...contentStyle, display: 'block' }}
>
{children}
);
}
}
const AccordionItem = uncontrollable(AccordionItemControlled, { active: 'onToggle' });
AccordionItem.displayName = 'AccordionItem';
function getActiveKeyFromProps(props) {
const { allowAllClosed, children, defaultActiveKey, multiExpand } = props;
let activeKey = null;
if (multiExpand) {
if (Array.isArray(defaultActiveKey)) {
activeKey = defaultActiveKey;
} else if (isBlank(defaultActiveKey)) {
activeKey = [];
} else {
activeKey = [defaultActiveKey];
}
} else if (Array.isArray(defaultActiveKey)) {
if (defaultActiveKey.length > 0) {style={{ ...paddleStyle, width: `${width}%`, left: `${width * selectedIndex}%` }}
/>
);
}
}
return (
{newChildren}
{paddle}
);
}
}
const ToggleSwitch = uncontrollable(ToggleSwitchControlled, { activeKey: 'onSelect' });
ToggleSwitch.displayName = 'ToggleSwitch';
ToggleSwitch.Item = ToggleSwitchItem;
return { ToggleSwitch, ToggleSwitchItem };
}aria-labelledby={labelId}
className={contentClassNames}
id={contentId}
role="tabpanel"
style={{ ...contentStyle, display: 'block' }}
>
{children}
);
}
}
export const AccordionItem = uncontrollable(AccordionItemControlled, { active: 'onToggle' });
AccordionItem.displayName = 'AccordionItem';
function getActiveKeyFromProps(props) {
const { allowAllClosed, children, defaultActiveKey, multiExpand } = props;
let activeKey = null;
if (multiExpand) {
if (Array.isArray(defaultActiveKey)) {
activeKey = defaultActiveKey;
} else if (isBlank(defaultActiveKey)) {
activeKey = [];
} else {
activeKey = [defaultActiveKey];
}
} else if (Array.isArray(defaultActiveKey)) {
if (defaultActiveKey.length > 0) {});
return (
<div>
{headerChildren}
{contentChildren}
</div>
);
}
}
export const Tabs = uncontrollable(TabsControlled, { activeKey: 'onSelect' });
Tabs.displayName = 'Tabs';
Tabs.Tab = Tab;
export default Tabs;checked: child.props.eventKey === activeKey,
onToggle: this.handleToggle,
size,
});
}
return child;
});
return (
<div>{newChildren}</div>
);
}
}
export const RadioSwitch = uncontrollable(RadioSwitchControlled, { activeKey: 'onSelect' });
RadioSwitch.displayName = 'RadioSwitch';
Switch.Radio = RadioSwitch;
Switch.CheckedLabel = SwitchCheckedLabel;
Switch.UncheckedLabel = SwitchUncheckedLabel;
Switch.PadelLabel = SwitchPadelLabel;
export default Switch;style={{ ...paddleStyle, width: `${width}%`, left: `${width * selectedIndex}%` }}
/>
);
}
}
return (
{newChildren}
{paddle}
);
}
}
export const ToggleSwitch = uncontrollable(ToggleSwitchControlled, { activeKey: 'onSelect' });
ToggleSwitch.displayName = 'ToggleSwitch';
ToggleSwitch.Item = ToggleSwitchItem;
export default ToggleSwitch;uncontrollable
Wrap a controlled react component, to allow specific prop/handler pairs to be uncontrolled
