accept active element accessor as component settings

stomita · stomita · commit 6e521675931b · 2021-03-16T18:13:46.000+09:00
diff --git a/src/scripts/ComponentSettings.tsx b/src/scripts/ComponentSettings.tsx
@@ -4,13 +4,17 @@ export type ComponentSettingsProps = {
   assetRoot?: string;
   portalClassName?: string;
   portalStyle?: object;
+  getActiveElement?: () => HTMLElement | null;
 };
 
-export type ComponentSettingsContext = {
-  assetRoot?: string;
-  portalClassName?: string;
-  portalStyle?: object;
-};
+function getDocumentActiveElement() {
+  return document.activeElement as HTMLElement | null;
+}
+
+export const ComponentSettingsContext = createContext<
+  ComponentSettingsProps &
+    Required<Pick<ComponentSettingsProps, 'getActiveElement'>>
+>({ getActiveElement: getDocumentActiveElement });
 
 /**
  *
@@ -19,10 +23,16 @@ export class ComponentSettings extends React.PureComponent<
   ComponentSettingsProps
 > {
   render() {
-    const { assetRoot, portalClassName, portalStyle, children } = this.props;
+    const {
+      assetRoot,
+      portalClassName,
+      portalStyle,
+      getActiveElement = getDocumentActiveElement,
+      children,
+    } = this.props;
     return (
       <ComponentSettingsContext.Provider
-        value={{ assetRoot, portalClassName, portalStyle }}
+        value={{ assetRoot, portalClassName, portalStyle, getActiveElement }}
       >
         {children}
       </ComponentSettingsContext.Provider>
diff --git a/src/scripts/DateInput.tsx b/src/scripts/DateInput.tsx
@@ -12,6 +12,7 @@ import { FormElement } from './FormElement';
 import { Input, InputProps } from './Input';
 import { Datepicker } from './Datepicker';
 import { uuid, isElInChildren } from './util';
+import { ComponentSettingsContext } from './ComponentSettings';
 
 type DatepickerDropdownProps = {
   className?: string;
@@ -95,16 +96,24 @@ export type DateInputProps = {
   extensionRenderer?: (...props: any[]) => JSX.Element;
 } & Omit<InputProps, 'value' | 'defaultValue' | 'onBlur' | 'onValueChange'>;
 
-type DateInputState = {
+type DateInputInnerProps = DateInputProps & {
+  getActiveElement: () => HTMLElement | null;
+};
+
+type DateInputInnerState = {
   id: string;
   opened: boolean;
   value: string | null;
   inputValue: string | null;
 };
+
 /**
  *
  */
-export class DateInput extends Component<DateInputProps, DateInputState> {
+class DateInputInner extends Component<
+  DateInputInnerProps,
+  DateInputInnerState
+> {
   static isFormElement = true;
 
   node: HTMLDivElement | null = null;
@@ -113,7 +122,7 @@ export class DateInput extends Component<DateInputProps, DateInputState> {
 
   input: HTMLInputElement | null = null;
 
-  constructor(props: Readonly<DateInputProps>) {
+  constructor(props: Readonly<DateInputInnerProps>) {
     super(props);
     this.state = {
       id: `form-element-${uuid()}`,
@@ -138,7 +147,10 @@ export class DateInput extends Component<DateInputProps, DateInputState> {
     this.onDatepickerClose = this.onDatepickerClose.bind(this);
   }
 
-  componentDidUpdate(prevProps: DateInputProps, prevState: DateInputState) {
+  componentDidUpdate(
+    prevProps: DateInputInnerProps,
+    prevState: DateInputInnerState
+  ) {
     if (this.props.onValueChange && prevState.value !== this.state.value) {
       this.props.onValueChange(this.state.value, prevState.value);
     }
@@ -264,7 +276,8 @@ export class DateInput extends Component<DateInputProps, DateInputState> {
   }
 
   isFocusedInComponent() {
-    const targetEl = document.activeElement;
+    const { getActiveElement } = this.props;
+    const targetEl = getActiveElement();
     return (
       isElInChildren(this.node, targetEl) ||
       isElInChildren(this.datepicker, targetEl)
@@ -334,6 +347,7 @@ export class DateInput extends Component<DateInputProps, DateInputState> {
       includeTime,
       onComplete,
       onValueChange,
+      getActiveElement,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
@@ -377,3 +391,38 @@ export class DateInput extends Component<DateInputProps, DateInputState> {
     );
   }
 }
+
+/**
+ *
+ */
+export class DateInput extends Component<DateInputProps> {
+  static isFormElement = true;
+
+  inner: DateInputInner | null = null;
+
+  get node(): HTMLDivElement | null {
+    return this.inner ? this.inner.node : null;
+  }
+
+  get datepicker(): HTMLDivElement | null {
+    return this.inner ? this.inner.datepicker : null;
+  }
+
+  get input(): HTMLInputElement | null {
+    return this.inner ? this.inner.input : null;
+  }
+
+  render() {
+    return (
+      <ComponentSettingsContext.Consumer>
+        {({ getActiveElement }) => (
+          <DateInputInner
+            ref={(cmp) => (this.inner = cmp)}
+            {...this.props}
+            getActiveElement={getActiveElement}
+          />
+        )}
+      </ComponentSettingsContext.Consumer>
+    );
+  }
+}
diff --git a/src/scripts/Datepicker.tsx b/src/scripts/Datepicker.tsx
@@ -4,6 +4,7 @@ import moment from 'moment';
 import { Button } from './Button';
 import { Select, Option } from './Select';
 import { getToday, isElInChildren } from './util';
+import { ComponentSettingsContext } from './ComponentSettings';
 
 type Date = {
   year: number;
@@ -97,17 +98,24 @@ export type DatepickerProps = {
   onClose?: () => void;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'>;
 
-export type DatepickerState = {
+type DatepickerInnerProps = DatepickerProps & {
+  getActiveElement: () => HTMLElement | null;
+};
+
+type DatepickerInnerState = {
   focusDate?: boolean;
   targetDate?: string;
 };
 
-export class Datepicker extends Component<DatepickerProps, DatepickerState> {
+class DatepickerInner extends Component<
+  DatepickerInnerProps,
+  DatepickerInnerState
+> {
   node: HTMLDivElement | null = null;
 
   month: HTMLTableElement | null = null;
 
-  constructor(props: Readonly<DatepickerProps>) {
+  constructor(props: Readonly<DatepickerInnerProps>) {
     super(props);
     this.state = {};
 
@@ -228,7 +236,9 @@ export class Datepicker extends Component<DatepickerProps, DatepickerState> {
   }
 
   isFocusedInComponent() {
-    return isElInChildren(this.node, document.activeElement);
+    const { getActiveElement } = this.props;
+    const targetEl = getActiveElement();
+    return isElInChildren(this.node, targetEl);
   }
 
   renderFilter(cal: Calendar) {
@@ -374,6 +384,7 @@ export class Datepicker extends Component<DatepickerProps, DatepickerState> {
       autoFocus,
       onSelect,
       onClose,
+      getActiveElement,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
@@ -404,3 +415,28 @@ export class Datepicker extends Component<DatepickerProps, DatepickerState> {
     );
   }
 }
+
+/**
+ *
+ */
+export class Datepicker extends Component<DatepickerProps> {
+  private inner: DatepickerInner | null = null;
+
+  get node(): HTMLDivElement | null {
+    return this.inner ? this.inner.node : null;
+  }
+
+  render() {
+    return (
+      <ComponentSettingsContext.Consumer>
+        {({ getActiveElement }) => (
+          <DatepickerInner
+            ref={(cmp) => (this.inner = cmp)}
+            {...this.props}
+            getActiveElement={getActiveElement}
+          />
+        )}
+      </ComponentSettingsContext.Consumer>
+    );
+  }
+}
diff --git a/src/scripts/DropdownButton.tsx b/src/scripts/DropdownButton.tsx
@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { Button, ButtonProps } from './Button';
 import { DropdownMenu } from './DropdownMenu';
 import { registerStyle, isElInChildren } from './util';
+import { ComponentSettingsContext } from './ComponentSettings';
 
 export type DropdownMenuAlign = 'left' | 'right';
 export type DropdownMenuSize = 'small' | 'medium' | 'large';
@@ -32,21 +33,27 @@ export type DropdownButtonProps<EventKey extends Key> = {
   onMenuSelect?: (eventKey: EventKey) => void;
 } & Omit<ButtonProps, 'onClick' | 'onBlur'>;
 
-type DropdownButtonState = {
+type DropdownButtonInnerProps<EventKey extends Key> = DropdownButtonProps<
+  EventKey
+> & {
+  getActiveElement: () => HTMLElement | null;
+};
+
+type DropdownButtonInnerState = {
   opened: boolean;
 };
 
-export class DropdownButton<EventKey extends Key> extends Component<
-  DropdownButtonProps<EventKey>,
-  DropdownButtonState
+class DropdownButtonInner<EventKey extends Key> extends Component<
+  DropdownButtonInnerProps<EventKey>,
+  DropdownButtonInnerState
 > {
   node: HTMLDivElement | null = null;
 
   trigger: HTMLButtonElement | null = null;
 
   dropdown: HTMLDivElement | null = null;
 
-  constructor(props: Readonly<DropdownButtonProps<EventKey>>) {
+  constructor(props: Readonly<DropdownButtonInnerProps<EventKey>>) {
     super(props);
     this.state = { opened: false };
     registerStyle('no-hover-popup', [
@@ -126,7 +133,8 @@ export class DropdownButton<EventKey extends Key> extends Component<
   };
 
   isFocusedInComponent() {
-    const targetEl = document.activeElement;
+    const { getActiveElement } = this.props;
+    const targetEl = getActiveElement();
     return (
       isElInChildren(this.node, targetEl) ||
       isElInChildren(this.dropdown, targetEl)
@@ -192,6 +200,8 @@ export class DropdownButton<EventKey extends Key> extends Component<
       children,
       style,
       menuStyle,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      getActiveElement,
       ...props
     } = this.props;
     let { icon } = this.props;
@@ -237,3 +247,38 @@ export class DropdownButton<EventKey extends Key> extends Component<
     );
   }
 }
+
+/**
+ *
+ */
+export class DropdownButton<EventKey extends Key> extends Component<
+  DropdownButtonProps<EventKey>
+> {
+  private inner: DropdownButtonInner<EventKey> | null = null;
+
+  get node(): HTMLDivElement | null {
+    return this.inner ? this.inner.node : null;
+  }
+
+  get trigger(): HTMLButtonElement | null {
+    return this.inner ? this.inner.trigger : null;
+  }
+
+  get dropdown(): HTMLDivElement | null {
+    return this.inner ? this.inner.dropdown : null;
+  }
+
+  render() {
+    return (
+      <ComponentSettingsContext.Consumer>
+        {({ getActiveElement }) => (
+          <DropdownButtonInner
+            ref={(cmp) => (this.inner = cmp)}
+            {...this.props}
+            getActiveElement={getActiveElement}
+          />
+        )}
+      </ComponentSettingsContext.Consumer>
+    );
+  }
+}
diff --git a/src/scripts/Lookup.tsx b/src/scripts/Lookup.tsx
diff --git a/src/scripts/Picklist.tsx b/src/scripts/Picklist.tsx
