jjb-lc-designable/react/widgets/HistoryWidget/index.js

基于alibaba-designable源码二次封装的表单设计器。

import React from 'react';
import format from 'dateformat';
import { observer } from 'jjb-lc-formily/reactive-react';
import { usePrefix, useWorkbench } from '../../hooks';
import { TextWidget } from '../TextWidget';
import cls from 'classnames';
import './styles.less';
export const HistoryWidget = observer(() => {
  const workbench = useWorkbench();
  const currentWorkspace = workbench?.activeWorkspace || workbench?.currentWorkspace;
  const prefix = usePrefix('history');
  if (!currentWorkspace) return null;
  return /*#__PURE__*/React.createElement("div", {
    className: prefix
  }, currentWorkspace.history.list().map((item, index) => {
    const type = item.type || 'default_state';
    const token = type.replace(/\:/g, '_');
    return /*#__PURE__*/React.createElement("div", {
      className: cls(prefix + '-item', {
        active: currentWorkspace.history.current === index
      }),
      key: item.timestamp,
      onClick: () => {
        currentWorkspace.history.goTo(index);
      }
    }, /*#__PURE__*/React.createElement("span", {
      className: prefix + '-item-title'
    }, /*#__PURE__*/React.createElement(TextWidget, {
      token: `operations.${token}`
    })), /*#__PURE__*/React.createElement("span", {
      className: prefix + '-item-timestamp'
    }, ' ', format(item.timestamp, 'yy/mm/dd HH:MM:ss')));
  }));
});