plain-design 0.0.97 → 1.0.0-beta.2

package/src/packages/components/Table/table/utils/table.utils.ts

@@ -0,0 +1,278 @@
+import {StyleProps, ThemeSize} from "../../../../uses/useStyle";
+import {ComponentEvent, ExtractPropTypes, iMouseEvent, MultipleClass, PropType, reactive, StyleProperties, tSlotsType} from "plain-design-composition";
+import {PlainObject} from "plain-utils/utils/event";
+import {eFormValidateTrigger, iFormValidatePropsType, iValidateResult} from "../../../Form/validate/validate.utils";
+import {tPlc, tPlcType} from "../../plc/utils/plc.utils";
+import {PlainScroll} from "../../../Scroll";
+import {tPlcCacheStateData} from "../../plc/use/usePlcPropsState";
+import {tPlcData} from "../../plc/formatPlcList";
+import {deepcopy} from "plain-utils/object/deepcopy";
+import {iFormValidator} from "../../../Form/validate/createValidation";
+
+/**
+ * Table属性配置
+ * @author  韦胜健
+ * @date    2022.10.29 12:20
+ */
+export const TablePropsOptions = {
+  ...StyleProps,
+  /*---------------------------------------basic-------------------------------------------*/
+  data: { type: Array as PropType<PlainObject[]> },                     // 数据
+  summaryData: { type: Array as PropType<PlainObject[]> },              // 合计行数据
+  config: { type: Function as PropType<TablePropsConfig> },             // 配置列信息函数
+  defaultEditable: { type: Boolean },                                   // 是否默认开启编辑状态
+  editSourceData: { type: Boolean },                                    // 是否编辑原始数据
+  showRows: { type: [Number, String] as PropType<'auto' | number>, default: 'auto' }, // 表格显示高度，数字为显示固定行数高度，auto为显示所有行数据的高度，也就是自动高度
+  minShowRows: { type: Number, default: 3 },                            // showRows为auto的时候，最小显示行数
+  border: { type: Boolean },                                            // 边框表格
+  headRowHeight: { type: [String, Number] },                            // 表头行高
+  bodyRowHeight: { type: [String, Number] },                            // 表体行高
+  virtual: { type: Boolean },                                           // 开启虚拟行滚动
+  virtualColumn: { type: Boolean },                                     // 开启虚拟列滚动
+  colDraggable: { type: Boolean },                                      // 列是否可拖拽移动
+  rowDraggable: { type: Boolean },                                      // 行是否可以拖拽移动
+  sort: { type: [Object, Array] as PropType<TablePropsSort> },          // 当前排序字段
+  rules: { type: Object as PropType<iFormValidatePropsType["rules"]> }, // 校验规则
+  spanMethod: { type: Function as PropType<TablePropsSpanMethod> },     // 合并表体单元格的方法
+  size: { ...StyleProps["size"] },                                      // 表格尺寸
+  loading: { type: Boolean },                                           // 开启加载状态
+
+  rowClassFunc: { type: Function as PropType<TablePropsRowClassFunc> },// 行 className 的计算函数
+  cellClassFunc: { type: Function as PropType<TablePropsCellClassFunc> },// 单元格 className 的计算函数
+  cellStyleFunc: { type: Function as PropType<TablePropsCellStyleFunc> },// 单元格 style 内联样式的计算函数
+  headCellClassFunc: { type: Function as PropType<TablePropsHeadCellClassFunc> },// 表头单元格的 className 的计算函数
+  headCellStyleFunc: { type: Function as PropType<TablePropsHeadCellStyleFunc> },// 表头单元格 style 内联样式计算函数
+};
+
+export type TablePropsRowClassFunc = (node: iTableNode) => MultipleClass
+export type TablePropsCellClassFunc = (node: iTableNode, plc: tPlc) => MultipleClass
+export type TablePropsCellStyleFunc = (node: iTableNode, plc: tPlc) => StyleProperties
+export type TablePropsHeadCellClassFunc = (plc: tPlcType) => MultipleClass
+export type TablePropsHeadCellStyleFunc = (plc: tPlcType) => StyleProperties
+export type TablePropsSpanMethod = (scope: { node: iTableNode, plc: tPlc }) => { rowspan: number, colspan: number }
+
+export interface iTableSortData {
+  field: string,
+  desc: boolean
+}
+
+export type TablePropsSort = iTableSortData | iTableSortData[]
+
+/**
+ * Table插槽配置
+ * @author  韦胜健
+ * @date    2022.10.29 12:20
+ */
+export const TableSlotsOptions = ['default', 'noData'] as const;
+
+/**
+ * Table属性类型
+ * @author  韦胜健
+ * @date    2022.10.29 12:21
+ */
+export type iTablePropsType = ExtractPropTypes<typeof TablePropsOptions>
+
+/**
+ * 表格插槽类型
+ * @author  韦胜健
+ * @date    2022.10.29 12:21
+ */
+export type iTableSlotsType = tSlotsType<typeof TableSlotsOptions>
+
+/**
+ * table派发事件配置
+ * @author  韦胜健
+ * @date    2022.10.29 23:40
+ */
+export const TableEmitsOptions = {
+  onScrollLeft: (scrollLeft: number, part: TableHoverPart) => true,
+  onVirtualMounted: (data: { scroll: PlainScroll }) => true,
+
+  onClickRow: (node: iTableNode, e: iMouseEvent) => true,
+  onDblclickRow: (node: iTableNode, e: iMouseEvent) => true,
+  onClickCell: (node: iTableNode, e: iMouseEvent) => true,
+  onDblclickCell: (node: iTableNode, e: iMouseEvent) => true,
+  onClickHead: (plc: tPlcType, e: iMouseEvent) => true,
+
+  onConfigPlc: (data: { plcList: tPlcType[], stateData: tPlcCacheStateData }) => true,
+  onCollectPlcData: (plcData: tPlcData) => true,
+  onSetup: (refer: any) => true,
+  onCurrentChange: (data: PlainObject | null) => true,
+  onUpdateData: (data: PlainObject[] | null | undefined) => true,
+  onOrderChange: (broList: tPlcType[]) => true,
+  onClickRowDraggier: (data: { e: iMouseEvent, node: iTableNode }) => true,
+  onClickColDraggier: (data: { e: iMouseEvent, plc: tPlcType }) => true,
+} as const;
+
+export type iTableEventType = ComponentEvent<typeof TableEmitsOptions>
+
+/**
+ * table节点信息
+ * @author  韦胜健
+ * @date    2022.10.29 18:54
+ */
+export interface iTableNode {
+  data: PlainObject,                                  // 原始数据
+  isSummary: boolean,                                 // 是否为合计行数据
+  state: {
+    index: number,                                    // 节点索引
+    edit: boolean,                                    // 行是否处于编辑状态
+    editRow: PlainObject,                             // 编辑的行对象
+    validateResultData: iValidateResult[] | null,     // 校验信息
+  },
+  openEdit: () => void,                               // 开启编辑状态（不做任何处理）
+  closeEdit: () => void,                              // 关闭编辑状态（不做任何处理）
+  enableEdit: () => void,                             // 开启编辑状态（先判断当前是否可编辑，深度赋值一份data赋值给editRow，并且立即执行校验）
+  cancelEdit: () => void,                             // 取消编辑状态
+  validate: () => Promise<null | { validateResultData: iValidateResult[], node: iTableNode }>,// 校验数据
+  validateItem: (param: { label?: string, field?: string, trigger: typeof eFormValidateTrigger.TYPE }) => Promise<void>,// 校验单个字段
+  clearValidate: () => void,                          // 清空校验信息
+  saveEdit: (newRow?: PlainObject) => Promise<void>,  // 保存编辑，将editRow以及newRow（请求得到的新对象）覆盖data
+}
+
+/**
+ * 创建table node节点数据
+ * @author  韦胜健
+ * @date    2022.11.6 15:27
+ */
+export function createTableNode(
+  {
+    formValidator,
+    data,
+    isSummary,
+    editSourceData,
+    defaultEditable,
+    index,
+  }: {
+    formValidator: iFormValidator,// 校验器
+    data: PlainObject,            // 行数据
+    isSummary?: boolean,          // 是否为合计行
+    defaultEditable?: boolean,    // 默认是否可编辑（合计行不可编辑）
+    editSourceData?: boolean,     // 是否编辑原始数据
+    index: number,
+  }): iTableNode {
+  return new TableNodeConstructor({
+    formValidator,
+    data,
+    isSummary: !!isSummary,
+    state: {
+      index,
+      edit: !!editSourceData || !!defaultEditable,
+      editRow: editSourceData ? data : deepcopy(data),
+      validateResultData: null,
+    },
+  });
+}
+
+class TableNodeConstructor implements iTableNode {
+  data: iTableNode["data"];
+  isSummary: iTableNode["isSummary"];
+  state: iTableNode["state"];
+
+  constructor(private param: Pick<iTableNode, 'data' | 'isSummary' | 'state'> & { formValidator: iFormValidator }) {
+    this.data = param.data;
+    this.isSummary = param.isSummary;
+    this.state = reactive(param.state);
+  }
+
+  openEdit = () => {
+    if (!this.state.edit) {
+      this.state.edit = true;
+    }
+    this.clearValidate();
+  };
+  closeEdit = () => {
+    if (this.state.edit) {
+      this.state.edit = false;
+    }
+  };
+  enableEdit = () => {
+    if (this.state.edit) {return;}
+    this.state.editRow = deepcopy(this.data);
+    this.openEdit();
+  };
+  cancelEdit = () => {
+    this.state.edit && this.closeEdit();
+  };
+  validate = async () => {
+    await this.param.formValidator.methods.validate({
+      state: this.state,
+      formData: this.state.editRow
+    });
+    return !this.state.validateResultData || this.state.validateResultData.length == 0 ? null : { validateResultData: this.state.validateResultData, node: this };
+  };
+  validateItem = async (param: { label?: string, field?: string, trigger: typeof eFormValidateTrigger.TYPE }) => {
+    await this.param.formValidator.methods.validateItem({
+      ...param,
+      state: this.state,
+      formData: this.state.editRow,
+    });
+  };
+  clearValidate = () => {!!this.state.validateResultData && (this.state.validateResultData = null);};
+  saveEdit = async (newRow?: PlainObject) => {
+    let { data, state: { editRow } } = this;
+    newRow = newRow || editRow;
+    Object.keys({ ...data, ...editRow, ...newRow }).forEach(k => this.data[k] = newRow![k]);
+  };
+}
+
+/**
+ * 渲染单元格的作用域插槽参数类型
+ * @author  韦胜健
+ * @date    2022.10.29 19:00
+ */
+export type iTableCellRenderScope = { plc: tPlc, node: iTableNode, row: PlainObject }
+
+/**
+ * 渲染行的参数类型
+ * @author  韦胜健
+ * @date    2022/11/23 16:06
+ */
+export type iTableRowRenderScope = Omit<iTableCellRenderScope, 'plc'>
+
+/**
+ * table props.config的类型，用来配置plc
+ * @author  韦胜健
+ * @date    2022.10.29 23:31
+ */
+export type TablePropsConfig = (plcList: tPlcType[], flatList: tPlc[]) => void
+
+/**
+ * table中的自定义校验函数参数类型
+ * @author  韦胜健
+ * @date    2022/11/7 19:42
+ */
+
+// export type iTableValidatorParam = Omit<iValidatorParam, 'formData'> & { formData: Exclude<iValidatorParam["formData"], null | undefined> }
+
+/**
+ * 目前鼠标处于table的位置
+ * @author  韦胜健
+ * @date    2022.10.29 23:37
+ */
+export enum TableHoverPart {
+  body = 'body',
+  head = 'head'
+}
+
+export const TableSizeVariables = {
+  headRowHeight: {
+    large: 56,
+    normal: 56,
+    small: 40,
+    mini: 36,
+  },
+  bodyRowHeight: {
+    large: 56,
+    normal: 56,
+    small: 40,
+    mini: 36,
+  },
+};
+
+export function getTableRowHeight(size: typeof ThemeSize.TYPE, props?: { headRowHeight?: number, bodyRowHeight?: number }) {
+  return {
+    headRowHeight: props?.headRowHeight || TableSizeVariables.headRowHeight[size],
+    bodyRowHeight: props?.bodyRowHeight || TableSizeVariables.bodyRowHeight[size],
+  };
+}

package/src/packages/components/Table/table/utils/url.utils.ts

@@ -0,0 +1,23 @@
+/**
+ * 个性化配置某个请求的对象类型
+ * @author  韦胜健
+ * @date    2022/7/22 10:10
+ */
+import {iHttpRequestConfig} from "../../../createHttp/http.utils";
+
+export type iUrlConfigObject<RespData,
+  Config extends iHttpRequestConfig<RespData> = iHttpRequestConfig<RespData>> = {
+  base?: string;
+  url?: string;
+  method?: Config['method'];
+  formRequest?: Config['formRequest'];
+  config?: Config;
+  request?: (requestConfig: Config) => Promise<RespData>;
+};
+
+/**
+ * 工具类型，某个请求返回成功之后的数据类型
+ * @author  韦胜健
+ * @date    2022/7/22 10:12
+ */
+type iUrlResponseDataMeta<T> = T & { fail: boolean; code: number, hasNext?: boolean, list?: any[], message?: string, };

package/src/packages/components/TableOptionSpace/index.ts

@@ -0,0 +1,5 @@
+import {TableOptionSpace} from "../AutoTable/utils/TableOption.space";
+
+export default TableOptionSpace;
+
+export {TableOptionSpace};

package/src/packages/components/TableOptionUtils/index.ts

@@ -0,0 +1,5 @@
+import {TableOptionUtils} from "../AutoTable/utils/TableOption.utils";
+
+export {TableOptionUtils};
+
+export default TableOptionUtils;

package/src/packages/components/Tag/index.tsx

@@ -0,0 +1,77 @@
+import {computed, designComponent, getComponentCls, iHTMLElement, iMouseEvent, PropType, useClasses, useStyles} from "plain-design-composition";
+import {ThemeSize, ThemeStatus, useStyle} from "../../uses/useStyle";
+import {iTagColor, TagColor} from "./tag.utils";
+import Icon from "../Icon";
+import Loading from "../Loading";
+import './tag.scss';
+
+export const Tag = designComponent({
+  name: '-tag',
+  inheritPropsType: iHTMLElement,
+  props: {
+    label: {},                                // 标签文本
+    icon: { type: String },                   // 标签图标
+    loading: { type: Boolean },               // 开启加载状态
+    checked: { type: Boolean, default: null },// 标签的激活状态
+    color: { type: [String, Object] as PropType<string | iTagColor> },// 标签颜色
+    closeable: { type: Boolean },             // 是否可删除
+    size: { type: String as PropType<typeof ThemeSize.TYPE>, default: ThemeSize.small },// 'large', 'normal', 'small', 'mini'
+  },
+  slots: ['default'],
+  emits: {
+    onClose: (e: iMouseEvent) => true,
+    onClick: (e: iMouseEvent) => true,
+  },
+  setup({ props, event: { emit }, slots }) {
+
+    const status = Object.keys(ThemeStatus);
+
+    const colors = computed((): iTagColor => {
+      let color = props.color || 'primary';
+      if (typeof color === "string") {
+        if (color in TagColor) {
+          return TagColor[color];
+        }
+        if (status.indexOf(color) > -1) {
+          return { fill: `var(--${getComponentCls(`${color}-6`)})`, text: 'white', };
+        }
+        return { fill: color, text: 'white' };
+      } else {
+        return color;
+      }
+    });
+
+    const { styleComputed } = useStyle();
+
+    const classes = useClasses(() => [
+      getComponentCls('tag'),
+      `tag-size-${styleComputed.value.size}`,
+      {
+        'tag-uncheck': props.checked === false,
+      }
+    ]);
+
+    const styles = useStyles(styles => {
+      if (props.checked === false) {return;}
+      const { fill, text } = colors.value;
+      styles.backgroundColor = fill;
+      styles.color = text;
+    });
+
+    const handler = {
+      onClick: (e: iMouseEvent) => {
+        if (e.currentTarget === e.target) {emit.onClick(e);}
+      },
+      onClose: (e: iMouseEvent) => emit.onClose(e),
+    };
+
+    return () => (
+      <span style={styles.value} className={classes.value} onClick={handler.onClick}>
+        {!!props.icon && <Icon icon={props.icon}/>}
+        {!!props.loading && <Loading type="beta"/>}
+        <span>{slots.default(props.label as any)}</span>
+        {!!props.closeable && <Icon icon="pi-close" onClick={handler.onClose}/>}
+      </span>
+    );
+  },
+});

package/src/packages/components/Tag/tag.scss

@@ -0,0 +1,27 @@
+@include prefix(tag) {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: all ease 300ms;
+
+  & + & {
+    margin-left: 8px;
+  }
+
+  @include sizeMixin(tag, (font-size, border-radius)) {
+    height: plv(tag-size-#{$name}-height);
+    padding: 0 4px;
+  }
+
+  .#{componentName(loading)}, .#{componentName(icon)} {
+    &:last-child {
+      cursor: pointer;
+      margin-left: 4px;
+    }
+
+    &:not(:last-child) {
+      margin-right: 4px !important;
+    }
+  }
+}

package/src/packages/components/Tag/tag.utils.ts

@@ -0,0 +1,20 @@
+export interface iTagColor {
+  fill: string,// 背景色
+  text: string,// 文字色
+}
+
+export const TagColor: Record<string, iTagColor> = {
+  red: { fill: 'rgb(255,236,232)', text: 'rgb(245,63,63)', },
+  orangered: { fill: 'rgb(255,243,232)', text: 'rgb(247,114,52)' },
+  orange: { fill: 'rgb(255,247,232)', text: 'rgb(255,125,0)' },
+  gold: { fill: 'rgb(255,252,232)', text: 'rgb(247,186,30)' },
+  yellow: { fill: 'rgb(254,255,232)', text: 'rgb(250,220,25)' },
+  lime: { fill: 'rgb(252,255,232)', text: 'rgb(159,219,29)' },
+  green: { fill: 'rgb(232,255,234)', text: 'rgb(0,180,42)' },
+  cyan: { fill: 'rgb(232,255,251)', text: 'rgb(20,201,201)' },
+  blue: { fill: 'rgb(232,247,255)', text: 'rgb(52,145,250)' },
+  purple: { fill: 'rgb(245,232,255)', text: 'rgb(114,46,209)' },
+  pinkpurple: { fill: 'rgb(255,232,251)', text: 'rgb(217,26,217)' },
+  magenta: { fill: 'rgb(255,232,241)', text: 'rgb(245,49,157)' },
+  gray: { fill: 'rgb(247,248,250)', text: 'rgb(134,144,156)' },
+};

package/src/packages/components/TimePicker/createRangeTimeRender.tsx

@@ -0,0 +1,72 @@
+import Input from "../Input";
+import {TimePanel} from "./panel/TimePanel";
+import {tTimeCompositionParams} from "./time.utils";
+import {handleKeyboard} from "../KeyboardService";
+import {useRangeTimeRender} from "./useRangeTimeRender";
+import {createPopupEditor} from "../usePopupEditor";
+import {FixInput} from "../../utils/FixInput";
+import {iKeyboardEvent} from "plain-design-composition";
+
+export function createRangeTimeRender(params: tTimeCompositionParams,) {
+
+  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicTimeAttrs, slots } = params;
+
+  const { effects, refs, onRef, state, startModel, endModel, renderPickerFoot, getInputAttrs, handler, reference } = useRangeTimeRender({
+    ...params,
+    onBlur: () => {popper.methods.hide();},
+  });
+
+  const popper = createPopupEditor({
+    option: {
+      alwaysShowOnClickReference: () => true,
+      popperAttrs: getPublicPopperAttrs,
+      reference: () => !editComputed.value.editable ? null : (reference.getReference() || refs.input?.refs.el),
+      popper: () => <>
+        <TimePanel
+          {...{
+            ...getInheritPublicTimeAttrs(),
+            range: true,
+            start: startModel.value,
+            end: endModel.value,
+            onUpdateStart: handler.onPickerUpdateStart,
+            onUpdateEnd: handler.onPickerUpdateEnd,
+            onMousedownStartPanel: handler.onMousedownStartPanel,
+            onMousedownEndPanel: handler.onMousedownEndPanel,
+            onEnterColumn: handler.onEnterColumn,
+          }}
+        />
+        {renderPickerFoot()}
+      </>
+    },
+  });
+
+  const customHandler = {
+    /**
+     * Input enter按键，打开或者关闭picker
+     * Input Esc按键，关闭picker
+     * @author  韦胜健
+     * @date    2022.7.3 19:29
+     */
+    onKeyboardInput: (e: iKeyboardEvent) => handleKeyboard({
+      enter: () => popper.methods.toggle(),
+      esc: () => popper.methods.hide(),
+    })(e),
+  };
+
+  effects.push(hooks.onRenderInput.use(() => (
+    reference.renderReference({
+      slotExist: slots.default.isExist,
+      slotRender: slots.default,
+      defaultRender: () => (
+        <Input{...getInputAttrs()}>
+          <FixInput ref={onRef.start} type="text" placeholder={props.startPlaceholder} className="input-box input-fill" value={state.input.start} onInput={handler.onStartInputChange} onKeyDown={customHandler.onKeyboardInput} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+          <FixInput ref={onRef.end} type="text" placeholder={props.endPlaceholder} className="input-box input-fill" value={state.input.end} onInput={handler.onEndInputChange} onKeyDown={customHandler.onKeyboardInput} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+        </Input>
+      )
+    })
+  )));
+
+  effects.push(() => {popper.methods.dispose();});
+
+  return effects.clear;
+}

package/src/packages/components/TimePicker/createSeparateRangeTimeRender.tsx

@@ -0,0 +1,96 @@
+import {tTimeCompositionParams} from "./time.utils";
+import Input from "../Input";
+import {TimeRangePanelType} from "./panel/TimeRangePanel";
+import {TimePanel} from "./panel/TimePanel";
+import {handleKeyboard} from "../KeyboardService";
+import {useRangeTimeRender} from "./useRangeTimeRender";
+import {createPopupEditor} from "../usePopupEditor";
+import {FixInput} from "../../utils/FixInput";
+import {iKeyboardEvent} from "plain-design-composition";
+
+export function createSeparateRangeTimeRender(params: tTimeCompositionParams) {
+
+  const { props, hooks, editComputed, getPublicPopperAttrs, getInheritPublicTimeAttrs } = params;
+
+  const { effects, refs, onRef, startModel, endModel, state, getInputAttrs, renderPickerFoot, utils, handler } = useRangeTimeRender({
+    ...params,
+    onBlur: () => {
+      startPopper.methods.hide();
+      endPopper.methods.hide();
+    },
+    onInputClear: (range) => {
+      utils.handleRangeType({ range, start: () => startModel.value = null, end: () => endModel.value = null });
+    },
+  });
+
+  const startPopper = createPopupEditor({
+    option: {
+      popperAttrs: getPublicPopperAttrs,
+      reference: () => !editComputed.value.editable ? null : refs.start,
+      popper: () => <>
+        <TimePanel
+          {...{
+            ...getInheritPublicTimeAttrs(),
+            modelValue: startModel.value,
+            defaultTime: props.defaultStartTime,
+            onChange: handler.onPickerUpdateStart,
+            onMousedownBasePanel: handler.onMousedownStartPanel,
+            onEnterColumn: type => handler.onEnterColumn(type, TimeRangePanelType.start),
+          }}
+        />
+        {renderPickerFoot()}
+      </>
+    },
+  });
+
+  const endPopper = createPopupEditor({
+    option: {
+      popperAttrs: getPublicPopperAttrs,
+      reference: () => !editComputed.value.editable ? null : refs.end,
+      popper: () => <>
+        <TimePanel
+          {...{
+            ...getInheritPublicTimeAttrs(),
+            modelValue: endModel.value,
+            defaultTime: props.defaultEndTime,
+            onChange: handler.onPickerUpdateEnd,
+            onMousedownBasePanel: handler.onMousedownEndPanel,
+            onEnterColumn: type => handler.onEnterColumn(type, TimeRangePanelType.end),
+          }}
+        />
+        {renderPickerFoot()}
+      </>
+    },
+  });
+
+  const customHandler = {
+    /**
+     * Input enter按键，打开或者关闭picker
+     * Input Esc按键，关闭picker
+     * @author  韦胜健
+     * @date    2022.7.3 19:29
+     */
+    onKeyboardInput: (e: iKeyboardEvent, range: TimeRangePanelType) => handleKeyboard({
+      enter: () => {
+        utils.handleRangeType({ range, start: () => startPopper.methods.toggle(), end: () => endPopper.methods.toggle() });
+      },
+      esc: () => {
+        utils.handleRangeType({ range, start: () => startPopper.methods.hide(), end: () => endPopper.methods.hide() });
+      },
+    })(e),
+  };
+
+  effects.push(hooks.onRenderInput.use(() => (
+    <Input{...getInputAttrs()}>
+      <FixInput ref={onRef.start} type="text" placeholder={props.startPlaceholder} className="input-box input-fill" value={state.input.start} onInput={handler.onStartInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.start)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+      <FixInput ref={onRef.end} type="text" placeholder={props.endPlaceholder} className="input-box input-fill" value={state.input.end} onInput={handler.onEndInputChange} onKeyDown={e => customHandler.onKeyboardInput(e, TimeRangePanelType.end)} disabled={!!editComputed.value.disabled} readOnly={!!editComputed.value.readonly}/>
+    </Input>
+  )));
+
+  effects.push(() => {
+    startPopper.methods.dispose();
+    endPopper.methods.dispose();
+  });
+
+  return effects.clear;
+}