ahooks#usePersistFn TypeScript Examples

ScrollBar: React.FC = () => {
  const { store, prefixCls } = useContext(Context);
  const { tableWidth, viewWidth } = store;
  const width = store.scrollBarWidth;
  const prefixClsScrollBar = `${prefixCls}-scroll_bar`;
  const [resizing, setResizing] = useState(false);
  const positionRef = useRef({
    scrollLeft: 0,
    left: 0,
    translateX: 0,
  });
  const handleMouseMove = usePersistFn((event: MouseEvent) => {
    const distance = event.clientX - positionRef.current.left;
    // TODO 调整倍率
    store.setTranslateX(
      distance * (store.viewWidth / store.scrollBarWidth) +
        positionRef.current.translateX
    );
  });
  const handleMouseUp = useCallback(() => {
    window.removeEventListener('mousemove', handleMouseMove);
    window.removeEventListener('mouseup', handleMouseUp);
    setResizing(false);
  }, [handleMouseMove]);
  const handleMouseDown = useCallback(
    (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
      positionRef.current.left = event.clientX;
      positionRef.current.translateX = store.translateX;
      positionRef.current.scrollLeft = store.scrollLeft;
      window.addEventListener('mousemove', handleMouseMove);
      window.addEventListener('mouseup', handleMouseUp);
      setResizing(true);
    },
    [handleMouseMove, handleMouseUp, store.scrollLeft, store.translateX]
  );

  return (
    <div
      role="none"
      className={prefixClsScrollBar}
      style={{ left: tableWidth, width: viewWidth }}
      onMouseDown={handleMouseDown}
    >
      {resizing && (
        <div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            zIndex: 9999,
            cursor: 'col-resize',
          }}
        />
      )}
      <div
        className={`${prefixClsScrollBar}-thumb`}
        style={{
          width,
          left: store.scrollLeft,
        }}
      />
    </div>
  );
}

export default function useDragResize(
  handleResize: ({ width }: { width: number }) => void,
  {
    initSize,
    minWidth: minWidthConfig,
    maxWidth: maxWidthConfig,
  }: {
    initSize: {
      width: number;
    };
    minWidth?: number;
    maxWidth?: number;
  }
): [(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void, boolean] {
  const [resizing, setResizing] = useState(false);
  const positionRef = useRef({
    left: 0,
  });
  const initSizeRef = useRef(initSize);
  const handleMouseMove = usePersistFn(async (event: MouseEvent) => {
    const distance = event.clientX - positionRef.current.left;
    let width = initSizeRef.current.width + distance;
    if (minWidthConfig !== undefined) {
      width = Math.max(width, minWidthConfig);
    }
    if (maxWidthConfig !== undefined) {
      width = Math.min(width, maxWidthConfig);
    }
    handleResize({ width });
  });
  const handleMouseUp = useCallback(() => {
    window.removeEventListener('mousemove', handleMouseMove);
    window.removeEventListener('mouseup', handleMouseUp);
    setResizing(false);
  }, [handleMouseMove]);
  const handleMouseDown = useCallback(
    (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
      positionRef.current.left = event.clientX;
      initSizeRef.current = initSize;
      window.addEventListener('mousemove', handleMouseMove);
      window.addEventListener('mouseup', handleMouseUp);
      setResizing(true);
    },
    [handleMouseMove, handleMouseUp, initSize]
  );
  return [handleMouseDown, resizing];
}

InternalForm = React.memo<YFormProps>((thisProps) => {
  const props = { ...globalConfig.defaultFormProps, ...thisProps };
  const { scenes, getScene = globalConfig.getScene, offset = 0 } = props;
  const _scenes = merge({}, globalConfig.scenes, scenes);
  const _defaultData = { formProps: props };
  mapKeys(_scenes, (value: boolean, key: string) => {
    if (value && getScene[key] && getScene[key].form) {
      const data = getScene[key].form(_defaultData);
      if (data) {
        _defaultData.formProps = { ..._defaultData.formProps, ...data.formProps };
      }
    }
  });
  const _props = _defaultData.formProps;

  const {
    disabled,
    loading,
    itemsType,
    children,
    onFinish,
    onSave,
    formatFieldsValue: formFormatFieldsValue,
    onCancel,
    params,
    form: propsForm,
    className,
    submitComponentProps,
    submit,
    initialValues,
    minBtnLoadingTime = 500,
    getInitialValues,
    ...rest
  } = _props;

  const [form] = useForm(propsForm);
  const formatRef = useRef([]);
  const { resetFields, getFieldsValue } = form;
  const _params = submit ? submit.params : paramsType(params);
  const { create, edit, view } = _params;
  // 同 useSubmit 使用 view 当默认值
  const [thisDisabled, setDisabled] = useState(view);
  const [submitLoading, setSubmitLoading] = useState(false);
  const timeOut = useRef<number | null>(null);
  // 下面地方请使用 _thisDisabled
  let _thisDisabled = thisDisabled;
  if (submit) {
    _thisDisabled = submit.disabled;
  }
  // 改变状态
  const handleOnDisabled = useCallback(
    (disabled) => {
      if (submit) {
        submit.onDisabled(disabled);
      } else {
        setDisabled(disabled);
      }
    },
    [submit],
  );
  const [_getInitialValues, setGetInitialValues] = useState({});
  const [getLoading, setGetLoading] = useState(true);
  const immutableGetDetail = usePersistFn<YFormProps['getInitialValues']>(getInitialValues);

  // 传了 getInitialValues 则使用该数据，没传则使用 initialValues、loading
  const _initialValues = getInitialValues ? _getInitialValues : initialValues;
  const _loading = getInitialValues ? getLoading : loading;

  const hasGetInitialValues = typeof getInitialValues === 'function';
  const loadData = useCallback(
    async (params: getInitialValuesParamsType) => {
      // 只有传了 getInitialValues 调用
      if (hasGetInitialValues) {
        setGetInitialValues(await immutableGetDetail(params));
        setGetLoading(false);
      }
    },
    [hasGetInitialValues, immutableGetDetail],
  );

  useEffect(() => {
    loadData({ isInit: true });
  }, [loadData]);

  useEffect(() => {
    return () => {
      clearTimeout(timeOut.current);
    };
  }, []);

  const goBack = () => {
    window.history.back();
  };

  const handleReset: (p: { type: CancelType }) => void = useCallback(
    async ({ type }) => {
      if (typeof onCancel === 'function') {
        onCancel({ type });
      } else {
        resetFields();
        if (create) {
          goBack();
        } else if (edit || view) {
          handleOnDisabled(true);
        }
      }
    },
    [create, edit, handleOnDisabled, onCancel, resetFields, view],
  );
  const itemsTypeAll = { ...baseItemsType, ...globalConfig.itemsType, ...itemsType };

  // 内部格式化功能
  const { formatFieldsValue, onFormatFieldsValue } = useFormatFieldsValue();

  const handleFormatFieldsValue = (value) => {
    const _value = value || getFieldsValue(true);
    const _formatFieldsValue = concat(formFormatFieldsValue, formatFieldsValue).filter((x) => x);

    // 忽略字段
    const omitNames = [];
    forEach(_formatFieldsValue, (item) => {
      if (item.isOmit) omitNames.push(item.name);
    });
    const formatValues = { ...submitFormatValues(_value, _formatFieldsValue) };
    return omit(formatValues, omitNames);
  };

  if (!form.getFormatFieldsValue) {
    form.getFormatFieldsValue = handleFormatFieldsValue;
  }

  const handleOnFinish = async (value: KeyValue) => {
    if (onFinish) {
      if (submitLoading) return;
      const begin = new Date().getTime();
      setSubmitLoading(true);
      try {
        await onFinish(form.getFormatFieldsValue(value));
        await loadData({ isInit: false });
        const end = new Date().getTime();
        timeOut.current = window.setTimeout(
          () => {
            setSubmitLoading(false);
            handleReset({ type: 'onSubmit' });
          },
          // loading 时间不到 0.5s 的加载 0.5s，超过的立刻结束。
          end - begin > minBtnLoadingTime ? 0 : minBtnLoadingTime,
        );
      } catch (error) {
        console.log('error', error);
        setSubmitLoading(false);
      }
    }
  };

  const handleOnEdit = (e) => {
    e.preventDefault();
    handleOnDisabled(false);
  };
  const {
    formatFieldsValue: deFormatFieldsValue,
    onFormatFieldsValue: onDeFormatFieldsValue,
  } = useFormatFieldsValue();

  // deFormatFieldsValue 第一次为空需要下面 set(deFormatValues, name, value) 设置值
  // 当执行 resetFields 后，就需要 deFormatFieldsValue 的格式化。
  const deFormatValues = submitFormatValues(_initialValues, deFormatFieldsValue);

  const handleDeFormatFieldsValue = useCallback(
    (data: FormatFieldsValue) => {
      const { name, format } = data;
      const parentValue = getParentNameData(_initialValues, name);
      const value = format(get(_initialValues, name), parentValue, _initialValues);
      if (!find(formatRef.current, { name })) {
        form.setFields([{ name, value }]);
        formatRef.current.push({ name, value });
        // 初始化使用 deFormat 后的数据
        set(deFormatValues, name, value);
        onDeFormatFieldsValue([{ name, format }]);
      }
    },
    [_initialValues, form, deFormatValues, onDeFormatFieldsValue],
  );
  const providerProps = mergeWithDom(
    {
      form,
      scenes: _scenes,
      disabled: _thisDisabled,
      getScene,
      onFormatFieldsValue,
      onDeFormatFieldsValue: handleDeFormatFieldsValue,
      submitComponentProps: {
        showBtns: {
          // form submit 触发后设置 loading = true
          showSubmit: { loading: submitLoading },
          showEdit: { onClick: handleOnEdit },
          showCancel: { onClick: () => handleReset({ type: 'onCancel' }) },
          showSave: { onLoaded: () => handleReset({ type: 'onSave' }) },
          showBack: { onClick: goBack },
        },
      },
    },
    { ...omit(_props, ['name', 'initialValues']) },
    { initialValues: deFormatValues },
  );
  if ('isShow' in _props && !_props.isShow) {
    return null;
  }
  if (_loading) {
    return (
      <div className="form-spin">
        <Spin />
      </div>
    );
  }
  return (
    <Form
      {...omit(rest, ['scenes', 'oldValues'])}
      initialValues={deFormatValues}
      form={form}
      className={classNames('yforms', className)}
      onFinish={handleOnFinish}
    >
      <YFormContext.Provider value={{ ...providerProps, itemsType: itemsTypeAll }}>
        <Items offset={offset}>{children}</Items>
      </YFormContext.Provider>
    </Form>
  );
})

DragResize: React.FC<DragResizeProps> = ({
  type,
  onBeforeResize,
  onResize,
  onResizeEnd,
  minWidth = 0,
  grid,
  defaultSize: { x: defaultX, width: defaultWidth },
  scroller,
  autoScroll: enableAutoScroll = true,
  onAutoScroll,
  reachEdge = () => false,
  clickStart = false,
  children,
  ...otherProps
}) => {
  const [resizing, setResizing] = useState(false);
  const handleAutoScroll = usePersistFn((delta: number) => {
    updateSize();
    onAutoScroll(delta);
  });
  // TODO persist reachEdge
  const autoScroll = useMemo(
    () =>
      new AutoScroller({ scroller, onAutoScroll: handleAutoScroll, reachEdge }),
    [handleAutoScroll, scroller, reachEdge]
  );
  const positionRef = useRef({
    clientX: 0,
    width: defaultWidth,
    x: defaultX,
  });
  const moveRef = useRef({
    clientX: 0,
  });
  const updateSize = usePersistFn(() => {
    const distance =
      moveRef.current.clientX -
      positionRef.current.clientX +
      autoScroll.autoScrollPos;
    switch (type) {
      case 'left': {
        let width = positionRef.current.width - distance;
        if (minWidth !== undefined) {
          width = Math.max(width, minWidth);
        }
        if (grid) {
          width = snap(width, grid);
        }
        const pos = width - positionRef.current.width;
        const x = positionRef.current.x - pos;
        onResize({ width, x });
        break;
      }
      // 向右，x不变，只变宽度
      case 'right': {
        let width = positionRef.current.width + distance;
        if (minWidth !== undefined) {
          width = Math.max(width, minWidth);
        }
        if (grid) {
          width = snap(width, grid);
        }
        const { x } = positionRef.current;
        onResize({ width, x });
        break;
      }
      case 'move': {
        const { width } = positionRef.current;
        let rightDistance = distance;
        if (grid) {
          rightDistance = snap(distance, grid);
        }
        const x = positionRef.current.x + rightDistance;
        onResize({ width, x });
        break;
      }
    }
  });
  const handleMouseMove = usePersistFn((event: MouseEvent) => {
    event.preventDefault();
    if (!resizing) {
      setResizing(true);
      if (!clickStart) {
        onBeforeResize && onBeforeResize();
      }
    }
    moveRef.current.clientX = event.clientX;
    updateSize();
  });

  const handleMouseUp = usePersistFn(() => {
    autoScroll.stop();
    window.removeEventListener('mousemove', handleMouseMove);
    window.removeEventListener('mouseup', handleMouseUp);
    if (resizing) {
      setResizing(false);
      onResizeEnd &&
        onResizeEnd({
          x: positionRef.current.x,
          width: positionRef.current.width,
        });
    }
  });
  const handleMouseDown = usePersistFn(
    (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
      event.stopPropagation();
      event.preventDefault();
      if (enableAutoScroll && scroller) {
        autoScroll.start();
      }
      if (clickStart) {
        onBeforeResize && onBeforeResize();
        setResizing(true);
      }
      positionRef.current.clientX = event.clientX;
      positionRef.current.x = defaultX;
      positionRef.current.width = defaultWidth;
      window.addEventListener('mousemove', handleMouseMove);
      window.addEventListener('mouseup', handleMouseUp);
    }
  );

  return (
    <div role="none" onMouseDown={handleMouseDown} {...otherProps}>
      {resizing &&
        createPortal(
          <div
            style={{
              position: 'fixed',
              top: 0,
              left: 0,
              bottom: 0,
              right: 0,
              zIndex: 9999,
              cursor: 'col-resize',
            }}
          />,
          document.body
        )}
      {children}
    </div>
  );
}

InvalidTaskBar: React.FC<TaskBarProps> = ({ data }) => {
  const {
    store,
    prefixCls,
    renderInvalidBar = renderInvalidBarDefault,
  } = useContext(Context);
  const triggerRef = useRef<HTMLDivElement>(null);
  const { translateY, translateX, width, dateTextFormat } = data;
  const [visible, setVisible] = useState(false);
  const { translateX: viewTranslateX, rowHeight } = store;
  const top = translateY;
  const prefixClsInvalidTaskBar = `${prefixCls}-invalid-task-bar`;
  const handleMouseEnter = useCallback(() => {
    if (data.stepGesture === 'moving') {
      return;
    }
    startX = triggerRef.current?.getBoundingClientRect()?.left || 0;
    setVisible(true);
  }, [data.stepGesture]);
  const handleMouseLeave = useCallback(() => {
    if (data.stepGesture === 'moving') {
      return;
    }
    setVisible(false);
    store.handleInvalidBarLeave();
  }, [data.stepGesture, store]);
  const handleMouseMove = useCallback(
    (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
      if (data.stepGesture === 'moving') {
        return;
      }
      const pointerX = viewTranslateX + (event.clientX - startX);
      // eslint-disable-next-line no-shadow
      const { left, width } = store.startXRectBar(pointerX);
      store.handleInvalidBarHover(data, left, Math.ceil(width));
    },
    [data, store, viewTranslateX]
  );

  const handleBeforeResize = () => {
    store.handleInvalidBarDragStart(data);
  };
  const handleResize = useCallback(
    ({ width: newWidth, x }) => {
      store.updateBarSize(data, { width: newWidth, x });
    },
    [data, store]
  );
  const handleLeftResizeEnd = useCallback(
    (oldSize: { width: number; x: number }) => {
      store.handleInvalidBarDragEnd(data, oldSize);
    },
    [data, store]
  );
  const handleAutoScroll = useCallback(
    (delta: number) => {
      store.setTranslateX(store.translateX + delta);
    },
    [store]
  );
  const reachEdge = usePersistFn((position: 'left' | 'right') => {
    return position === 'left' && store.translateX <= 0;
  });

  return (
    <DragResize
      onMouseMove={handleMouseMove}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      onResize={handleResize}
      onResizeEnd={handleLeftResizeEnd}
      defaultSize={{
        x: translateX,
        width,
      }}
      minWidth={30}
      grid={30}
      type="right"
      scroller={store.chartElementRef.current || undefined}
      onAutoScroll={handleAutoScroll}
      reachEdge={reachEdge}
      onBeforeResize={handleBeforeResize}
      clickStart
    >
      <div
        ref={triggerRef}
        className={prefixClsInvalidTaskBar}
        style={{
          left: viewTranslateX,
          height: rowHeight,
          transform: `translateY(${top - (rowHeight - barH) / 2}px`,
        }}
      />
      {visible &&
        renderInvalidBar(
          <div
            className={`${prefixClsInvalidTaskBar}-block`}
            aria-haspopup="true"
            aria-expanded="false"
            style={{
              left: translateX,
              width: Math.ceil(width),
              transform: `translateY(${top}px)`,
              backgroundColor: '#7B90FF',
              borderColor: '#7B90FF',
            }}
          >
            <div
              className={`${prefixClsInvalidTaskBar}-date`}
              style={{
                right: Math.ceil(width + 6),
              }}
            >
              {dateTextFormat(translateX)}
            </div>
            <div
              className={`${prefixClsInvalidTaskBar}-date`}
              style={{
                left: Math.ceil(width + 6),
              }}
            >
              {dateTextFormat(translateX + width)}
            </div>
          </div>,
          data
        )}
    </DragResize>
  );
}

TaskBar: React.FC<TaskBarProps> = ({ data }) => {
  const {
    store,
    getBarColor,
    renderBar,
    onBarClick,
    prefixCls,
    barHeight,
  } = useContext(Context);
  const {
    width,
    translateX,
    translateY,
    invalidDateRange,
    stepGesture,
    dateTextFormat,
    record,
    loading,
  } = data;
  const prefixClsTaskBar = `${prefixCls}-task-bar`;
  // TODO 优化hover判断性能
  const { selectionIndicatorTop, showSelectionIndicator, rowHeight } = store;

  const showDragBar = useMemo(() => {
    if (!showSelectionIndicator) {
      return false;
    }
    // 差值
    const baseTop = TOP_PADDING + rowHeight / 2 - barHeight / 2;
    const isShow = selectionIndicatorTop === translateY - baseTop;
    return isShow;
  }, [
    showSelectionIndicator,
    selectionIndicatorTop,
    translateY,
    rowHeight,
    barHeight,
  ]);
  const themeColor = useMemo(() => {
    if (translateX + width >= dayjs().valueOf() / store.pxUnitAmp) {
      return ['#95DDFF', '#64C7FE'];
    }
    return ['#FD998F', '#F96B5D'];
  }, [store.pxUnitAmp, translateX, width]);
  const handleBeforeResize = (type: Gantt.MoveType) => () => {
    store.handleDragStart(data, type);
  };
  const handleResize = useCallback(
    ({ width: newWidth, x }) => {
      store.updateBarSize(data, { width: newWidth, x });
    },
    [data, store]
  );
  const handleLeftResizeEnd = useCallback(
    (oldSize: { width: number; x: number }) => {
      store.handleDragEnd();
      store.updateTaskDate(data, oldSize, 'left');
    },
    [data, store]
  );
  const handleRightResizeEnd = useCallback(
    (oldSize: { width: number; x: number }) => {
      store.handleDragEnd();
      store.updateTaskDate(data, oldSize, 'right');
    },
    [data, store]
  );

  const handleMoveEnd = useCallback(
    (oldSize: { width: number; x: number }) => {
      store.handleDragEnd();
      store.updateTaskDate(data, oldSize, 'move');
    },
    [data, store]
  );
  const handleAutoScroll = useCallback(
    (delta: number) => {
      store.setTranslateX(store.translateX + delta);
    },
    [store]
  );
  const allowDrag = showDragBar && !loading;
  const handleClick = useCallback(
    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
      e.stopPropagation();
      onBarClick && onBarClick(data.record);
    },
    [data.record, onBarClick]
  );
  const reachEdge = usePersistFn((position: 'left' | 'right') => {
    return position === 'left' && store.translateX <= 0;
  });
  // 根据不同的视图确定拖动时的单位，在任何视图下都以一天为单位
  const grid = useMemo(() => ONE_DAY_MS / store.pxUnitAmp, [store.pxUnitAmp]);
  return (
    <div
      role="none"
      className={classNames(prefixClsTaskBar, {
        [`${prefixClsTaskBar}-invalid-date-range`]: invalidDateRange,
        [`${prefixClsTaskBar}-overdue`]: !invalidDateRange,
      })}
      style={{
        transform: `translate(${translateX}px, ${translateY}px)`,
      }}
      onClick={handleClick}
    >
      {loading && <div className={`${prefixClsTaskBar}-loading`} />}
      <div>
        {allowDrag && (
          <>
            {/* {stepGesture !== 'moving' && (
              <div className={styles['dependency-handle']} style={{ left: -34, width: 12 }}>
                <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1">
                  <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                    <circle className={styles.outer} stroke="#87D2FF" fill="#FFFFFF" cx="6" cy="6" r="5.5" />
                    <circle className={styles.inner} fill="#87D2FF" cx="6" cy="6" r="2" />
                  </g>
                </svg>
              </div>
            )}
            {stepGesture !== 'moving' && (
              <div className={classNames(styles['dependency-handle'], styles.right)} style={{ left: width + 28, width: 12 }}>
                <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1">
                  <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
                    <circle className={styles.outer} stroke="#87D2FF" fill="#FFFFFF" cx="6" cy="6" r="5.5" />
                    <circle className={styles.inner} fill="#87D2FF" cx="6" cy="6" r="2" />
                  </g>
                </svg>
              </div>
            )} */}
            <DragResize
              className={classNames(
                `${prefixClsTaskBar}-resize-handle`,
                `${prefixClsTaskBar}-resize-handle-left`
              )}
              style={{ left: -14 }}
              onResize={handleResize}
              onResizeEnd={handleLeftResizeEnd}
              defaultSize={{
                x: translateX,
                width,
              }}
              minWidth={30}
              grid={grid}
              type="left"
              scroller={store.chartElementRef.current || undefined}
              onAutoScroll={handleAutoScroll}
              reachEdge={reachEdge}
              onBeforeResize={handleBeforeResize('left')}
            />
            <DragResize
              className={classNames(
                `${prefixClsTaskBar}-resize-handle`,
                `${prefixClsTaskBar}-resize-handle-right`
              )}
              style={{ left: width + 1 }}
              onResize={handleResize}
              onResizeEnd={handleRightResizeEnd}
              defaultSize={{
                x: translateX,
                width,
              }}
              minWidth={30}
              grid={grid}
              type="right"
              scroller={store.chartElementRef.current || undefined}
              onAutoScroll={handleAutoScroll}
              reachEdge={reachEdge}
              onBeforeResize={handleBeforeResize('right')}
            />
            <div
              className={classNames(
                `${prefixClsTaskBar}-resize-bg`,
                `${prefixClsTaskBar}-resize-bg-compact`
              )}
              style={{ width: width + 30, left: -14 }}
            />
          </>
        )}
        <DragResize
          className={`${prefixClsTaskBar}-bar`}
          onResize={handleResize}
          onResizeEnd={handleMoveEnd}
          defaultSize={{
            x: translateX,
            width,
          }}
          minWidth={30}
          grid={grid}
          type="move"
          scroller={store.chartElementRef.current || undefined}
          onAutoScroll={handleAutoScroll}
          reachEdge={reachEdge}
          onBeforeResize={handleBeforeResize('move')}
        >
          {renderBar ? (
            renderBar(data, {
              width: width + 1,
              height: barHeight + 1,
            })
          ) : (
            <svg
              xmlns="http://www.w3.org/2000/svg"
              version="1.1"
              width={width + 1}
              height={barHeight + 1}
              viewBox={`0 0 ${width + 1} ${barHeight + 1}`}
            >
              <path
                fill={
                  record.backgroundColor ||
                  (getBarColor && getBarColor(record).backgroundColor) ||
                  themeColor[0]
                }
                stroke={
                  record.borderColor ||
                  (getBarColor && getBarColor(record).borderColor) ||
                  themeColor[1]
                }
                d={`
              M${width - 2},0.5
              l-${width - 5},0
              c-0.41421,0 -0.78921,0.16789 -1.06066,0.43934
              c-0.27145,0.27145 -0.43934,0.64645 -0.43934,1.06066
              l0,5.3
            
              c0.03256,0.38255 0.20896,0.724 0.47457,0.97045
              c0.26763,0.24834 0.62607,0.40013 1.01995,0.40013
              l4,0

              l${width - 12},0
            
              l4,0
              c0.41421,0 0.78921,-0.16789 1.06066,-0.43934
              c0.27145,-0.27145 0.43934,-0.64645 0.43934,-1.06066
          
              l0,-5.3
              c-0.03256,-0.38255 -0.20896,-0.724 -0.47457,-0.97045
              c-0.26763,-0.24834 -0.62607,-0.40013 -1.01995,-0.40013z
            `}
              />
            </svg>
          )}
        </DragResize>
      </div>
      {/* {stepGesture !== 'moving' && (
        <div className={`${prefixClsTaskBar}-label`} style={{ left: width + 45 }}>
          {label}
        </div>
      )} */}
      {stepGesture === 'moving' && (
        <>
          <div
            className={`${prefixClsTaskBar}-date-text`}
            style={{ left: width + 16 }}
          >
            {dateTextFormat(translateX + width)}
          </div>
          <div
            className={`${prefixClsTaskBar}-date-text`}
            style={{ right: width + 16 }}
          >
            {dateTextFormat(translateX)}
          </div>
        </>
      )}
    </div>
  );
}