Cacher is the code snippet organizer for pro developers

import classnames from 'classnames';
import React from 'react';
import ReactDOM from 'react-dom';
import Dialog from 'rmc-dialog';
import { Flex, WhiteSpace } from 'antd-mobile';
import styles from './index.less';

const queue = [];

function createActionSheet(
  config,
  callback,
) {
  const props = {
    prefixCls: 'am-action-sheet',
    cancelButtonText: '取消',
    okButtonText: '确认',
    ...config,
  };
  const {
    prefixCls,
    className,
    transitionName,
    maskTransitionName,
    maskClosable = false,
    content,
  } = props;

  const div = document.createElement('div');
  document.body.appendChild(div);

  function close() {
    if (div) {
      ReactDOM.unmountComponentAtNode(div);
      if (div.parentNode) {
        div.parentNode.removeChild(div);
      }
      const index = queue.indexOf(close);
      if (index !== -1) {
        queue.splice(index, 1);
      }
    }
  }

  function cb(index, rowIndex = 0) {
    const res = callback(index, rowIndex);
    if (res && res.then) {
      res.then(() => {
        close();
      });
    } else {
      close();
    }
  }

  queue.push(close);

  const {
    title,
    cancelButtonIndex,
    cancelButtonText,
    okButtonText,
    onCancle,
    onOk,
  } = props;
  const titleMsg = (
    <Flex>
      <Flex.Item>
        {/* eslint-disable-next-line */}
        <span style={{ color: '#108ee9' }} onClick={onCancle}>{cancelButtonText}</span>
      </Flex.Item>
      <Flex.Item style={{ color: '#000' }}>{title}</Flex.Item>
      <Flex.Item style={{ textAlign: 'right', color: '#108ee9' }}>
        {/* eslint-disable-next-line */}
        <span onClick={onOk}>{okButtonText}</span>
      </Flex.Item>
    </Flex>
  );
  const rootCls = classnames(`${prefixCls}-NORMAL`, className, styles.wraper);
  ReactDOM.render(
    <Dialog
      visible
      title={titleMsg}
      footer=""
      prefixCls={prefixCls}
      className={rootCls}
      transitionName={transitionName || 'am-slide-up'}
      maskTransitionName={maskTransitionName || 'am-fade'}
      onClose={() => cb(cancelButtonIndex || -1)}
      maskClosable={maskClosable}
      wrapProps={(props).wrapProps || {}}
    >
      <WhiteSpace size="lg" />
      {content}
      <WhiteSpace size="lg" />
      <WhiteSpace size="lg" />
      <WhiteSpace size="lg" />
    </Dialog>,
    div,
  );
  return {
    close,
  };
}
export default {
  showActionSheetWithOptions(
    config,
    callback,
  ) {
    createActionSheet(config, callback);
  },
  showShareActionSheetWithOptions(
    config,
    callback,
  ) {
    createActionSheet(config, callback);
  },
  close() {
    queue.forEach(q => q());
  },
};

.wraper {
  :global {
    .am-action-sheet-header {
      border-bottom: 1px solid #ddd;
    }
    .am-action-sheet-title {
      margin: 10px auto;
    }
  }
}