Skip to content

Commit

Permalink
Merge pull request #558 from sebgroup/docs/fix-accessing-radio-values
Browse files Browse the repository at this point in the history 
docs(dynamic-forms): fix radio button value access
  • Loading branch information
@mario-subo
mario-subo authored Mar 31, 2021
2 parents a28f5b5 + 93b7e5a commit d883ea1
Show file tree
Hide file tree
Showing 17 changed files with 115 additions and 48 deletions.
2 changes: 1 addition & 1 deletion docs/src/pages/docs/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const ButtonPage: React.FC = () => {
exampleTheme={controls.theme === "light" ? "dark" : controls.theme === "dark" ? "warning" : null}
mainFile={importString}
example={
<Button size={controls.size?.value} theme={controls.theme} disabled={controls.disabled} block={controls.block}>
<Button size={controls.size} theme={controls.theme} disabled={controls.disabled} block={controls.block}>
Click me
</Button>
}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/docs/buttongroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const ButtonGroupPage: React.FC = (): React.ReactElement<void> => {
<Docs
mainFile={importString}
example={
<ButtonGroup size={controls.size?.value} vertical={controls.vertical}>
<ButtonGroup size={controls.size} vertical={controls.vertical}>
<Button>Add</Button>
<Button>Edit</Button>
<Button>Delete</Button>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/docs/carousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const CarouselPage: React.FC = (): React.ReactElement<void> => {
{ key: "infinite", label: "infinite", controlType: "Checkbox", value: false },
{ key: "autoplay", label: "autoplay", controlType: "Checkbox", value: false },
{ key: "showIndicators", label: "showIndicators", controlType: "Checkbox" },
{ key: "transitionStyle", label: "transitionStyle", controlType: "Radio", inline: true, options: transitionStyles, value: transitionStyles[0] },
{ key: "transitionStyle", label: "transitionStyle", controlType: "Radio", inline: true, options: transitionStyles, value: transitionStyles[0].value },
],
},
]);
Expand All @@ -47,7 +47,7 @@ const CarouselPage: React.FC = (): React.ReactElement<void> => {
showIndicators={controls.showIndicators}
autoplay={controls.autoplay}
infinite={controls.infinite}
transitionStyle={controls.transitionStyle?.value}
transitionStyle={controls.transitionStyle}
>
{images.map((image, i) => (
<CarouselItem key={i}>
Expand Down
20 changes: 15 additions & 5 deletions docs/src/pages/docs/checkbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,24 +30,34 @@ const CheckboxPage: React.FC = (): React.ReactElement<void> => {
items: [
{ key: "inline", label: "inline", controlType: "Checkbox", value: false },
{ key: "indicator", label: "indicator", controlType: "Checkbox", value: false },
{ key: "indicatorType", rulerKey: "indicator", condition: true, label: "Indicator type", options: indicators, inline: true, controlType: "Radio", value: indicators[0], indent: true },
{
key: "indicatorType",
rulerKey: "indicator",
condition: true,
label: "Indicator type",
options: indicators,
inline: true,
controlType: "Radio",
value: indicators[0].value,
indent: true,
},
{
key: "indicatorGrouping",
label: "Indicator choices",
controlType: "Radio",
rulerKey: "indicator",
condition: true,
options: indicatorGrouping,
value: indicatorGrouping[0],
value: indicatorGrouping[0].value,
indent: true,
},
],
},
]);

const isIndividual: boolean = controls.indicatorGrouping?.value === "1";
const isGrouped: boolean = controls.indicatorGrouping?.value === "2";
const indicator: Indicator = controls.indicator ? { type: controls.indicatorType?.value, message: "Indicator message" } : null;
const isIndividual: boolean = controls.indicatorGrouping === "1";
const isGrouped: boolean = controls.indicatorGrouping === "2";
const indicator: Indicator = controls.indicator ? { type: controls.indicatorType, message: "Indicator message" } : null;

return (
<Docs
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/docs/feedbackindicator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const FeedbackIndicatorPage: React.FC = () => {
items: [
{ key: "message", value: "Indicator message", label: "Message", placeholder: "Message", controlType: "Text" },
{ key: "noBorder", value: false, label: "noBorder", controlType: "Checkbox" },
{ key: "type", value: typeList[0], label: "Type", options: typeList, controlType: "Radio" },
{ key: "type", value: typeList[0].value, label: "Type", options: typeList, controlType: "Radio" },
],
},
]);
Expand All @@ -31,7 +31,7 @@ const FeedbackIndicatorPage: React.FC = () => {
mainFile={importString}
example={
<div className="w-100">
<FeedbackIndicator type={controls.type?.value} message={controls?.message} noBorder={controls.noBorder}>
<FeedbackIndicator type={controls.type} message={controls?.message} noBorder={controls.noBorder}>
<Checkbox>A Checkbox</Checkbox>
<RadioButton>A Radio button</RadioButton>
<div className="px-3 pb-2">Some content 🦾</div>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/docs/image.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const ImagePage: React.FC = (): React.ReactElement<void> => {
description: "The image can be rendered as a native img tag or div tag. Each has pros and cons.",
controlType: "Radio",
options: imgTypes,
value: imgTypes[0],
value: imgTypes[0].value,
inline: true,
},
{
Expand Down Expand Up @@ -59,7 +59,7 @@ const ImagePage: React.FC = (): React.ReactElement<void> => {
<div className="w-100 h-100">
<Img
src={image}
type={controls.imgType?.value}
type={controls.imgType}
width={controls.width}
height={controls.height}
rounded={controls.rounded}
Expand Down
16 changes: 8 additions & 8 deletions docs/src/pages/docs/loader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ const LoaderPage: React.FC = (): React.ReactElement<void> => {
key: "controls",
items: [
{ key: "size", label: "size", options: sizes, controlType: "Radio", inline: true },
{ key: "type", label: "type", options: types, controlType: "Radio", value: types[0], inline: true },
{ key: "display", label: "Display types", options: displayTypes, controlType: "Radio", inline: true, value: displayTypes[0] },
{ key: "type", label: "type", options: types, controlType: "Radio", value: types[0].value, inline: true },
{ key: "display", label: "Display types", options: displayTypes, controlType: "Radio", inline: true, value: displayTypes[0].value },
{ key: "backdrop", label: "backdrop", controlType: "Checkbox", value: false },
{ key: "children", label: "Render children to be displayed under the loader", controlType: "Checkbox", value: false },
],
Expand All @@ -41,16 +41,16 @@ const LoaderPage: React.FC = (): React.ReactElement<void> => {
mainFile={importString}
example={
<Loader
size={controls.size?.value}
type={controls.type?.value}
size={controls.size}
type={controls.type}
backdrop={controls.backdrop}
fullscreen={controls.display?.value === "fullscreen" && controls}
cover={controls.display?.value === "cover"}
fullscreen={controls.display === "fullscreen" && controls}
cover={controls.display === "cover"}
onClick={() => {
controls.display?.value === "fullscreen" &&
controls.display === "fullscreen" &&
setState((prevState) => {
return {
controls: { ...prevState.controls, display: displayTypes[0] },
controls: { ...prevState.controls, display: displayTypes[0].value },
};
});
}}
Expand Down
8 changes: 4 additions & 4 deletions docs/src/pages/docs/modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ const NotificationPage: React.FC = () => {
{
key: "controls",
items: [
{ key: "size", label: "Size", controlType: "Radio", options: sizses, value: sizses[1], inline: true },
{ key: "position", label: "Position", controlType: "Radio", options: positions, value: positions[0], inline: true },
{ key: "size", label: "Size", controlType: "Radio", options: sizses, value: sizses[1].value, inline: true },
{ key: "position", label: "Position", controlType: "Radio", options: positions, value: positions[0].value, inline: true },
{ key: "centered", label: "centered", controlType: "Checkbox", value: false },
{ key: "fullscreen", label: "fullscreen", controlType: "Checkbox", value: false },
{ key: "trapfocus", label: "trapfocus", controlType: "Checkbox", value: false },
Expand All @@ -53,8 +53,8 @@ const NotificationPage: React.FC = () => {
<Button onClick={() => setToggle(!toggle)}>Toggle Modal</Button>
<Modal
toggle={toggle}
position={controls.position?.value}
size={controls.size?.value}
position={controls.position}
size={controls.size}
fullscreen={controls.fullscreen}
centered={controls.centered}
trapFocus={controls.trapfocus}
Expand Down
10 changes: 5 additions & 5 deletions docs/src/pages/docs/notification.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,9 @@ const NotificationPage: React.FC = () => {
items: [
{ key: "theme", label: "theme", controlType: "Dropdown", options: themes, value: themes[0].value },
{ key: "persist", label: "persist", value: false, controlType: "Checkbox", description: "Disable timer and persist the notification until dismissed" },
{ key: "type", label: "type", controlType: "Radio", options: types, inline: true, value: types[0] },
{ key: "slidePosition", label: "position", controlType: "Radio", options: slidePositions, value: slidePositions[0], rulerKey: "type", condition: types[0] },
{ key: "barPosition", label: "position", controlType: "Radio", options: barPositions, inline: true, value: barPositions[0], rulerKey: "type", condition: types[1] },
{ key: "type", label: "type", controlType: "Radio", options: types, inline: true, value: types[0].value },
{ key: "slidePosition", label: "position", controlType: "Radio", options: slidePositions, value: slidePositions[0].value, rulerKey: "type", condition: types[0].value },
{ key: "barPosition", label: "position", controlType: "Radio", options: barPositions, inline: true, value: barPositions[0].value, rulerKey: "type", condition: types[1].value },
],
},
]);
Expand All @@ -58,9 +58,9 @@ const NotificationPage: React.FC = () => {
<Button onClick={() => setToggle(!toggle)}>Toggle notification</Button>
<Notification
toggle={toggle}
type={controls.type?.value}
type={controls.type}
theme={controls.theme}
position={controls.type?.value === "slide" ? controls.slidePosition?.value : controls.barPosition?.value}
position={controls.type === "slide" ? controls.slidePosition : controls.barPosition}
onDismiss={() => setToggle(false)}
persist={controls.persist}
>
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/docs/pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const PaginationPage: React.FC = (): React.ReactElement<void> => {
{
key: "controls",
items: [
{ key: "size", label: "Size", value: PaginationSizes[1], options: PaginationSizes, controlType: "Radio" },
{ key: "size", label: "Size", value: PaginationSizes[1].value, options: PaginationSizes, controlType: "Radio" },
{ key: "offset", min: 1, max: 10, value: 5, label: "Offset", controlType: "Stepper" },
{ key: "useDotNav", label: "Use dot navigation", value: false, controlType: "Checkbox" },
{ key: "showFirstAndLast", label: "Show first and last buttons", description: "Show buttons for the first and last page when available.", value: false, controlType: "Checkbox" },
Expand All @@ -68,7 +68,7 @@ const PaginationPage: React.FC = (): React.ReactElement<void> => {
value={page}
onPageChange={setPage}
offset={controls.offset}
size={controls.size.value}
size={controls.size}
useDotNav={controls.useDotNav}
showFirstAndLast={controls.showFirstAndLast}
navs={controls.useCustomNavs ? customNavs : null}
Expand Down
19 changes: 14 additions & 5 deletions docs/src/pages/docs/radiobutton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,16 +47,25 @@ const RadioButtonPage: React.FC = () => {
rulerKey: "indicator",
condition: true,
options: indicatorGrouping,
value: indicatorGrouping[0],
value: indicatorGrouping[0].value,
},
{
key: "indicatorType",
label: "Indicator type",
controlType: "Radio",
rulerKey: "indicator",
condition: true,
options: indicators,
value: indicators[0].value,
inline: true,
},
{ key: "indicatorType", label: "Indicator type", controlType: "Radio", rulerKey: "indicator", condition: true, options: indicators, value: indicators[0], inline: true },
],
},
]);

const isIndividual: boolean = controls.indicatorGrouping?.value === "1";
const isGrouped: boolean = controls.indicatorGrouping?.value === "2";
const indicator: Indicator = controls.indicator ? { type: controls.indicatorType?.value, message: "Indicator message" } : null;
const isIndividual: boolean = controls.indicatorGrouping === "1";
const isGrouped: boolean = controls.indicatorGrouping === "2";
const indicator: Indicator = controls.indicator ? { type: controls.indicatorType, message: "Indicator message" } : null;

return (
<Docs
Expand Down
14 changes: 12 additions & 2 deletions docs/src/pages/docs/slider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,17 @@ const SliderPage: React.FC = (): React.ReactElement<void> => {
{ key: "alwaysShowTooltip", label: "alwaysShowTooltip", controlType: "Checkbox", value: false },
{ key: "disabled", label: "disabled", controlType: "Checkbox", value: false },
{ key: "indicator", label: "indicator", controlType: "Checkbox", value: false },
{ key: "indicatorType", label: "Indicator type", controlType: "Radio", rulerKey: "indicator", condition: true, options: indicators, value: indicators[0], inline: true, indent: true },
{
key: "indicatorType",
label: "Indicator type",
controlType: "Radio",
rulerKey: "indicator",
condition: true,
options: indicators,
value: indicators[0].value,
inline: true,
indent: true,
},
{ key: "labels", label: "labels", controlType: "Checkbox", value: false, description: "Pass a list of positions and labels to be mapped" },
{ key: "showTicks", label: "showTicks", controlType: "Checkbox", value: false, description: "Show ticks for the lables", rulerKey: "labels", condition: true, indent: true },
],
Expand All @@ -52,7 +62,7 @@ const SliderPage: React.FC = (): React.ReactElement<void> => {
{ position: controls.max, label: controls.max },
];

const indicator: Indicator = controls.indicator ? { type: controls.indicatorType?.value, message: "Indicator message" } : null;
const indicator: Indicator = controls.indicator ? { type: controls.indicatorType, message: "Indicator message" } : null;

return (
<Docs
Expand Down
16 changes: 14 additions & 2 deletions docs/src/pages/docs/stepper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,24 @@ const StepTrackerPage: React.FC = React.memo(() => {
{ key: "max", value: 10, min: 0, max: 100, label: "Max", controlType: "Stepper" },
{ key: "disabled", label: "disabled", controlType: "Checkbox" },
{ key: "indicator", label: "indicator", controlType: "Checkbox" },
{ key: "indicatorType", rulerKey: "indicator", condition: true, label: "Indicator type", options: indicators, inline: true, controlType: "Radio", value: indicators[0], indent: true },
{
key: "indicatorType",
rulerKey: "indicator",
condition: true,
label: "Indicator type",
options: indicators,
inline: true,
controlType: "Radio",
value: indicators[0].value,
indent: true,
},
],
},
]);

const indicator: Indicator = controls.indicator ? { type: controls.indicatorType?.value, message: "Indicator message" } : null;
const indicator: Indicator = React.useMemo(() => {
return controls.indicator ? { type: controls.indicatorType, message: "Indicator message" } : null;
}, [controls.indicator, controls.indicatorType]);

return (
<Docs
Expand Down
16 changes: 14 additions & 2 deletions docs/src/pages/docs/textarea.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,24 @@ const TextareaPage: React.FC = React.memo(() => {
{ key: "disabled", label: "disabled", controlType: "Checkbox" },
{ key: "resizable", label: "resizable", controlType: "Checkbox", value: true },
{ key: "indicator", label: "indicator", controlType: "Checkbox" },
{ key: "indicatorType", rulerKey: "indicator", condition: true, label: "Indicator type", options: indicators, inline: true, controlType: "Radio", value: indicators[0], indent: true },
{
key: "indicatorType",
rulerKey: "indicator",
condition: true,
label: "Indicator type",
options: indicators,
inline: true,
controlType: "Radio",
value: indicators[0].value,
indent: true,
},
],
},
]);

const indicator: Indicator = controls.indicator ? { type: controls.indicatorType?.value, message: "Indicator message" } : null;
const indicator: Indicator = React.useMemo(() => {
return controls.indicator ? { type: controls.indicatorType, message: "Indicator message" } : null;
}, [controls.indicator, controls.indicatorType]);

return (
<Docs
Expand Down
Loading

0 comments on commit d883ea1

Please sign in to comment.