Skip to content

Commit

Permalink
housekeeping: add missing displayName properties
Browse files Browse the repository at this point in the history
  • Loading branch information
@chaance
chaance committed Nov 23, 2019
1 parent 54167f3 commit 806d2bb
Show file tree
Hide file tree
Showing 14 changed files with 316 additions and 176 deletions.
46 changes: 34 additions & 12 deletions packages/alert-dialog/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import PropTypes from "prop-types";

let AlertDialogContext = createContext({});

////////////////////////////////////////////////////////////////////////////////
// AlertDialogOverlay

export const AlertDialogOverlay = React.forwardRef(function AlertDialogOverlay(
{ leastDestructiveRef, ...props },
forwardRef
Expand All @@ -33,6 +36,7 @@ export const AlertDialogOverlay = React.forwardRef(function AlertDialogOverlay(
);
});

AlertDialogOverlay.displayName = "AlertDialogOverlay";
if (__DEV__) {
AlertDialogOverlay.propTypes = {
isOpen: PropTypes.bool,
Expand All @@ -45,6 +49,9 @@ if (__DEV__) {
};
}

////////////////////////////////////////////////////////////////////////////////
// AlertDialogContent

export const AlertDialogContent = React.forwardRef(function AlertDialogContent(
{ children, ...props },
forwardRef
Expand All @@ -59,8 +66,8 @@ export const AlertDialogContent = React.forwardRef(function AlertDialogContent(
invariant(
leastDestructiveRef,
`@reach/alert-dialog: You must provide a \`leastDestructiveRef\` to
\`<AlertDialog>\` or \`<AlertDialogOverlay/>\`. Please see
https://ui.reach.tech/alert-dialog/#alertdialogoverlay-leastdestructiveref`
\`<AlertDialog>\` or \`<AlertDialogOverlay/>\`. Please see
https://ui.reach.tech/alert-dialog/#alertdialogoverlay-leastdestructiveref`
);
}, [labelId, leastDestructiveRef]);
return (
Expand All @@ -78,36 +85,51 @@ export const AlertDialogContent = React.forwardRef(function AlertDialogContent(
);
});

AlertDialogContent.displayName = "AlertDialogContent";
if (__DEV__) {
AlertDialogContent.propTypes = {
children: PropTypes.node
};
}

export const AlertDialogLabel = props => {
////////////////////////////////////////////////////////////////////////////////
// AlertDialogLabel

export function AlertDialogLabel(props) {
const { labelId } = React.useContext(AlertDialogContext);
return <div id={labelId} data-reach-alert-dialog-label {...props} />;
};
}

AlertDialogLabel.displayName = "AlertDialogLabel";

export const AlertDialogDescription = props => {
////////////////////////////////////////////////////////////////////////////////
export function AlertDialogDescription(props) {
const { descriptionId } = React.useContext(AlertDialogContext);
return (
<div id={descriptionId} data-reach-alert-dialog-description {...props} />
);
};
}

export const AlertDialog = ({
AlertDialogDescription.displayName = "AlertDialogDescription";

////////////////////////////////////////////////////////////////////////////////
// AlertDialog

export function AlertDialog({
id,
isOpen,
onDismiss,
leastDestructiveRef,
...props
}) => (
<AlertDialogOverlay {...{ isOpen, onDismiss, leastDestructiveRef, id }}>
<AlertDialogContent {...props} />
</AlertDialogOverlay>
);
}) {
return (
<AlertDialogOverlay {...{ isOpen, onDismiss, leastDestructiveRef, id }}>
<AlertDialogContent {...props} />
</AlertDialogOverlay>
);
}

AlertDialog.displayName = "AlertDialog";
if (__DEV__) {
AlertDialog.propTypes = {
isOpen: PropTypes.bool,
Expand Down
68 changes: 37 additions & 31 deletions packages/alert/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,12 @@ let liveRegions = {
assertive: null
};

const Alert = forwardRef(function Alert(
let renderTimer = null;

////////////////////////////////////////////////////////////////////////////////
// Alert

export const Alert = forwardRef(function Alert(
{ children, type = "polite", ...props },
forwardedRef
) {
Expand All @@ -54,6 +59,7 @@ const Alert = forwardRef(function Alert(
return child;
});

Alert.displayName = "Alert";
if (__DEV__) {
Alert.propTypes = {
children: PropTypes.node,
Expand All @@ -64,7 +70,36 @@ if (__DEV__) {
export default Alert;

////////////////////////////////////////////////////////////////////////////////
let renderTimer = null;

function createMirror(type, doc = document) {
let key = ++keys[type];

let mount = element => {
if (liveRegions[type]) {
elements[type][key] = element;
renderAlerts();
} else {
let node = doc.createElement("div");
node.setAttribute(`data-reach-live-${type}`, "true");
liveRegions[type] = node;
doc.body.appendChild(liveRegions[type]);
mount(element);
}
};

let update = element => {
elements[type][key] = element;
renderAlerts();
};

let unmount = () => {
delete elements[type][key];
renderAlerts();
};

return { mount, update, unmount };
}

function renderAlerts() {
clearTimeout(renderTimer);
renderTimer = setTimeout(() => {
Expand Down Expand Up @@ -118,32 +153,3 @@ function useMirrorEffects(type, element, ref) {
};
}, []);
}

function createMirror(type, doc = document) {
let key = ++keys[type];

let mount = element => {
if (liveRegions[type]) {
elements[type][key] = element;
renderAlerts();
} else {
let node = doc.createElement("div");
node.setAttribute(`data-reach-live-${type}`, "true");
liveRegions[type] = node;
doc.body.appendChild(liveRegions[type]);
mount(element);
}
};

let update = element => {
elements[type][key] = element;
renderAlerts();
};

let unmount = () => {
delete elements[type][key];
renderAlerts();
};

return { mount, update, unmount };
}
50 changes: 32 additions & 18 deletions packages/combobox/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const NAVIGATING = "NAVIGATING";
const INTERACTING = "INTERACTING";

////////////////////////////////////////////////////////////////////////////////
// Actions:
// Actions

// User cleared the value w/ backspace, but input still has focus
const CLEAR = "CLEAR";
Expand Down Expand Up @@ -198,11 +198,16 @@ const findNavigationValue = (state, action) => {
}
};

const ComboboxContext = createContext();

// Allows us to put the option's value on context so that ComboboxOptionText
// can work it's highlight text magic no matter what else is rendered around
// it.
const OptionContext = createContext();

////////////////////////////////////////////////////////////////////////////////
// Combobox

const Context = createContext();

export const Combobox = forwardRef(function Combobox(
{
// Called whenever the user selects an item from the list
Expand Down Expand Up @@ -279,7 +284,7 @@ export const Combobox = forwardRef(function Combobox(
};

return (
<Context.Provider value={context}>
<ComboboxContext.Provider value={context}>
<Comp
{...rest}
data-reach-combobox=""
Expand All @@ -291,10 +296,11 @@ export const Combobox = forwardRef(function Combobox(
>
{children}
</Comp>
</Context.Provider>
</ComboboxContext.Provider>
);
});

Combobox.displayName = "Combobox";
if (__DEV__) {
Combobox.propTypes = {
onSelect: PropTypes.func
Expand Down Expand Up @@ -335,7 +341,7 @@ export const ComboboxInput = forwardRef(function ComboboxInput(
listboxId,
autocompletePropRef,
openOnFocus
} = useContext(Context);
} = useContext(ComboboxContext);

const ref = useForkedRef(inputRef, forwardedRef);

Expand Down Expand Up @@ -424,6 +430,8 @@ export const ComboboxInput = forwardRef(function ComboboxInput(
);
});

ComboboxInput.displayName = "ComboboxInput";

////////////////////////////////////////////////////////////////////////////////
// ComboboxPopover

Expand All @@ -440,7 +448,7 @@ export const ComboboxPopover = forwardRef(function ComboboxPopover(
},
forwardedRef
) {
const { popoverRef, inputRef, isVisible } = useContext(Context);
const { popoverRef, inputRef, isVisible } = useContext(ComboboxContext);
const ref = useForkedRef(popoverRef, forwardedRef);
const handleKeyDown = useKeyDown();
const handleBlur = useBlur();
Expand Down Expand Up @@ -479,6 +487,8 @@ export const ComboboxPopover = forwardRef(function ComboboxPopover(
);
});

ComboboxPopover.displayName = "ComboboxPopover";

////////////////////////////////////////////////////////////////////////////////
// ComboboxList

Expand All @@ -492,7 +502,7 @@ export const ComboboxList = forwardRef(function ComboboxList(
},
forwardedRef
) {
const { optionsRef, persistSelectionRef } = useContext(Context);
const { optionsRef, persistSelectionRef } = useContext(ComboboxContext);

if (persistSelection) {
persistSelectionRef.current = true;
Expand All @@ -517,14 +527,11 @@ export const ComboboxList = forwardRef(function ComboboxList(
);
});

ComboboxList.displayName = "ComboboxList";

////////////////////////////////////////////////////////////////////////////////
// ComboboxOption

// Allows us to put the option's value on context so that ComboboxOptionText
// can work it's highlight text magic no matter what else is rendered around
// it.
const OptionContext = createContext();

export const ComboboxOption = forwardRef(function ComboboxOption(
{ children, value, onClick, ...props },
forwardedRef
Expand All @@ -534,7 +541,7 @@ export const ComboboxOption = forwardRef(function ComboboxOption(
data: { navigationValue },
transition,
optionsRef
} = useContext(Context);
} = useContext(ComboboxContext);

useEffect(() => {
optionsRef.current.push(value);
Expand Down Expand Up @@ -568,6 +575,8 @@ export const ComboboxOption = forwardRef(function ComboboxOption(
);
});

ComboboxOption.displayName = "ComboboxOption";

////////////////////////////////////////////////////////////////////////////////
// ComboboxOptionText

Expand All @@ -577,7 +586,7 @@ export function ComboboxOptionText() {
const value = useContext(OptionContext);
const {
data: { value: contextValue }
} = useContext(Context);
} = useContext(ComboboxContext);

const results = useMemo(
() =>
Expand All @@ -604,14 +613,17 @@ export function ComboboxOptionText() {
: value;
}

ComboboxOptionText.displayName = "ComboboxOptionText";

////////////////////////////////////////////////////////////////////////////////
// ComboboxButton

export const ComboboxButton = forwardRef(function ComboboxButton(
{ as: Comp = "button", onClick, onKeyDown, ...props },
forwardedRef
) {
const { transition, state, buttonRef, listboxId, isVisible } = useContext(
Context
ComboboxContext
);
const ref = useForkedRef(buttonRef, forwardedRef);

Expand Down Expand Up @@ -639,6 +651,8 @@ export const ComboboxButton = forwardRef(function ComboboxButton(
);
});

ComboboxButton.displayName = "ComboboxButton";

////////////////////////////////////////////////////////////////////////////////
// The rest is all implementation details

Expand Down Expand Up @@ -672,7 +686,7 @@ function useKeyDown() {
transition,
autocompletePropRef,
persistSelectionRef
} = useContext(Context);
} = useContext(ComboboxContext);

return function handleKeyDown(event) {
const { current: options } = optionsRef;
Expand Down Expand Up @@ -776,7 +790,7 @@ function useKeyDown() {

function useBlur() {
const { state, transition, popoverRef, inputRef, buttonRef } = useContext(
Context
ComboboxContext
);

return function handleBlur(event) {
Expand Down
Loading

0 comments on commit 806d2bb

Please sign in to comment.