antd#Modal JavaScript Examples

render() {
    const { ...rest } = this.props;
    const { colors } = this.state;
    return (
      <Modal
        className={styles.acyapprove}
        bodyStyle={{
          padding: '21px 100px',
          background: '#2A2A2D',
          borderRadius: ' 20px',
        }}
        footer={null}
        closable={false}
        {...rest}
      >
        <div className={styles.title}>Approve</div>
        <div className={styles.block}>
          {colors.map((item, index) => (
            <div
              style={
                (item.activity && { background: item.color }) || {
                  border: `1px solid ${item.color}`,
                }
              }
              className={styles.box}
            />
          ))}
        </div>
        <p>Please approve in your wallet</p>
      </Modal>
    );
  }

CreateForm = props => {
  const { modalVisible, onCancel } = props;
  return (
    <Modal
      destroyOnClose
      title="新建规则"
      visible={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
    >
      {props.children}
    </Modal>
  );
}

describe("<PostVideoModal>", () => {
	let store;
	let wrapper;

	beforeAll(() => {
		store = mockStore({
			User: {
				videoStream: {
					raw: null,
				},
			},
		});
	});

	afterEach(() => {
		wrapper.unmount();
	});

	test("should render self without error", () => {
		wrapper = mount(
			<Provider store={store}>
				<PostVideoModal />
			</Provider>
		);
	});

	test("should render a <Modal> component", () => {
		wrapper = mount(
			<Provider store={store}>
				<PostVideoModal />
			</Provider>
		);

		expect(wrapper.exists(Modal)).toBe(true);
	});
});

static ajax(options){
        let baseApi = "https://www.easy-mock.com/mock/5f640a22d75a98083f498fb2/admin"
        return new Promise((resolve,reject)=>{
             axios({
                 url:options.url,
                 method:'get',
                 baseURL:baseApi,
                 timeout:5000,
                 params:(options.data&&options.data.params) || ''
             }).then((response)=>{
                 if(response.status=='200'){
                     let res = response.data
                     if(res.code=='0'){
                         resolve(res);
                     }else{
                         Modal.info({
                             title:"提示",
                             content:res.msg
                         })
                     }
                 }else{
                     reject(response.data)
                 }
             })
        })
     }

render() {
    return (
      <div id="works" className="block worksBlock">
        <div className="container-fluid">
          <div className="titleHolder">
            <h2>How it works</h2>
            <p>Click below to see a video how the app works and about its insights</p>
          </div>
          <div className="contentHolder">
            <Button size="large" onClick={this.showModal}><i className="fas fa-play"></i></Button>
          </div>
          <Modal
            title="App Tutorial"
            visible={this.state.visible}
            onCancel={this.handleCancel}
            footer={null}
            destroyOnClose = {true}
          >
          <iframe width="100%" height="350" src="https://www.youtube.com/embed/fvXABkXucr0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            
          </Modal>
        </div>
      </div>
    );
  }

render() {
    const { getFieldDecorator } = this.props.form
    const { visible } = this.state

    return (
      <Modal
        title="报警确认"
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        maskClosable={false}
      >
        <Form {...formItemLayout} layout="horizontal">
          <Form.Item label="确认时长(分)">
            {getFieldDecorator('duration', {
              rules: [
                { required: true, message: '请输入时长' },
              ],
            })(<InputNumber style={{ width: '100%' }} />)}
          </Form.Item>
        </Form>
      </Modal>
    )
  }

OracleInfoModal = ({ address, onCancel}) => {
  const {name, description} = config.oracleInfo[address] || {};
  const { t } = useTranslation();
  return <Modal footer={null} visible={!!address} onCancel={onCancel} title={t("modals.oracle_info.title", "Oracle info")} onOk={undefined}>
    {name ? <Text>
      <div><b>{t("modals.oracle_info.address", "Address")}: </b>{address}</div>
      <div><b>{t("modals.oracle_info.name", "Name")}: </b>{name}</div>
      <div><b>{t("modals.oracle_info.desc", "Description")}: </b>{description || t("modals.oracle_info.no_desc", "no description")}</div>
    </Text> : <Text type="secondary">{t("modals.oracle_info.no_info", "No information about this oracle")}</Text>}
  </Modal>
}

function VideoModal() {
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = e => {
    setVisible(false);
  };

  return (
    <div>
      {/* <Button type="primary" onClick={this.showModal}>
        Open Modal
      </Button> */}
      <Modal
        title="Basic Modal"
        visible={visible}
        onOk={handleOk}
        onCancel={handleOk}
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </div>
  );
}

ViewNewsletter = (props) => {
  const [visible, setVisible] = useState(false);

  const onCancel = (e) => {
    e.stopPropagation();
    setVisible(false);
  };

  return (
    <div>
      <Button
        size="xs"
        onClick={() => {
          setVisible(true);
        }}
      >
        Read
        <Modal
          destroyOnClose={true}
          keyboard={true}
          visible={visible}
          title={props.n.title}
          onCancel={onCancel}
          footer={[<Button onClick={onCancel}>Close</Button>]}
        >
          <p>{props.n.text}</p>
          <Divider />
          <p>Author : {props.n.createdBy.name}</p>
        </Modal>
      </Button>
    </div>
  );
}

render() {
    const apps = [];

    return (
      <Modal
        title="导入应用和配置文件"
        visible={this.state.showAddProject}
        onCancel={() => {
          this.setState({
            showAddProject: false,
          });
        }}
        footer={null}
        destroyOnClose
      >
        <div>
          <Select
            showSearch
            style={{ width: '80%', marginLeft: '8px' }}
            placeholder="选择应用"
            value={this.state.appName}
            onChange={this.changeApp}
            onSelect={(e) => {}}
            allowClear
          >
            {apps.map((v, i) => {
              return (
                <Option key={v.aid} value={v.app_name}>
                  {v.app_name}
                </Option>
              );
            })}
          </Select>
        </div>
      </Modal>
    );
  }

ProgressModal = ({ visible, handleShow, data, destroy }) => {
	return (
		<>
			<Modal
				visible={visible}
				footer={null}
				onCancel={handleShow}
				centered
				width={900}
				destroyOnClose={destroy}
			>
				{data[0] && (
					<>
						<h3>
							{data[0].userData[0].name}{" "}
							<Tag color="red">{data[0].userData[0].role}</Tag>
						</h3>

						<h3>{data.title}</h3>
						<Text
							code
							style={{ display: "flex", fontSize: "1.1rem" }}
						>
							{data.description}
						</Text>
						<br />
						<StatusBar status={data[0].status} modal />
						<br />
					</>
				)}
				<h3>Added Comments</h3>
				<CommentSection details={data[0]} />
			</Modal>
		</>
	);
}

showMessage(msg) {
        message.destroy();
        Modal.confirm({
            title: '提示',
            icon: <ExclamationCircleOutlined/>,
            content: msg,
            centered: true,
            okText: '重新连接',
            cancelText: '关闭页面',
            onOk() {
                window.location.reload();
            },
            onCancel() {
                window.close();
            },
        });
    }

TokenTradeModal = props => {
  const [form] = Form.useForm();
  const { visible, operation, onCancel, onSubmit } = props;
  useEffect(() => {
    if (form && !visible) {
      form.resetFields();
    }
  }, [props.visible]);

  const handleSubmit = () => {
    if (!form) return;
    form.submit();
  };

  const handleFinish = values => {
    if (onSubmit) {
      onSubmit(values);
    }
  };

  const modalFooter = {
    okText: '确认',
    onOk: handleSubmit,
    onCancel,
  };

  const getModalContent = () => {
    return (
      <Form {...formLayout} form={form} onFinish={handleFinish} onValuesChange={(changedValues , allValues) => {
        if (changedValues.buy_token) {
          form.setFieldsValue({ amount_price: changedValues.buy_token });
        }
      }}>
        <Form.Item
          name="buy_token"
          label= {operation === 1 ? "兑换数量" : "提现数量"}
          rules={[
            {
              required: true,
              message: "请输入",
            },
          ]}
        >
          <Input placeholder="请输入数量" />
        </Form.Item>
        <Form.Item
          name="amount_price"
          label= {operation === 1 ? "支付金额" : "实际提现"}
          rules={[
            {
              required: true,
              message: "请输入",
            },
          ]}
        >
          <Input placeholder="请输入数量" />
        </Form.Item>
      </Form>
    );
  };

  return (
    <Modal
      title={operation === 1 ? '充值提示' : `提现提示`}
      className={styles.standardListForm}
      width={640}
      bodyStyle={
        {
          padding: '28px 0 0',
        }
      }
      destroyOnClose
      visible={visible}
      {...modalFooter}
    >
      {getModalContent()}
    </Modal>
  );
}

PostVideoModal = ({toggleStreamPlayback, showModal, toggleModal, videoStream, user_id, promptId, uploadVideo}) => {
	const [videoData, setvideoData] = useState({
				title: "",
				description: "",
				owner_id: user_id,
				prompt_id: promptId,
			});

	const formRef = useRef(null);

	function handleFormInput(e) {
		setvideoData({ ...videoData, [e.target.name]: e.target.value });
	}

	const PostVideoMode = () => {
		if (videoStream && videoStream.playback) {
			return "playback"
		} else if (videoStream && !videoStream.playback && videoStream.raw && videoStream.raw[0] instanceof Blob === true) {
				return "upload"
			} else {
				return "recording"	
		}
	}

	const handleOk = (e) => {
		if (PostVideoMode() === "playback") {
			toggleStreamPlayback();
		} else if (PostVideoMode() === "upload") {
			formRef.current.getForm().validateFields((err, values) => {
				if (!err) {
					//No errors, begin upload
					uploadVideo({...videoData, raw: videoStream.raw});
					toggleModal();
				}
			});
		}
	}

	return (
		<Modal
			centered
			title="Post New Video"
			visible={showModal}
			bodyStyle={{ height: '10%' }}
			onOk={handleOk}
			onCancel={toggleModal}
			okButtonProps={{ form: "upload", htmlType: "submit", disabled: PostVideoMode() === "recording" ? true : false} }
			okText={PostVideoMode() !== "upload" ? "Continue" : "Upload"}
		>
			{PostVideoMode() === "recording" ? <RecordStream showModal={showModal}/> : null}
			{PostVideoMode() === "playback" ? <PlaybackStream /> : null}
			{PostVideoMode() === "upload" ? <UploadVideo ref={formRef} handleFormInput={handleFormInput}/> : null}
		</Modal>
	);
}

render() {
        const imgs = [
            ['1.png','2.png','3.png','4.png','5.png'],
            ['6.png','7.png','8.png','9.png','10.png'],
            ['11.png','12.png','13.png','14.png','15.png'],
            ['16.png','17.png','18.png','19.png','20.png'],
            ['21.png','22.png','23.png','24.png','25.png'],
        ];
        const imgList = imgs.map((list)=>list.map((item)=>
            <Card style={{marginBottom:10}} cover={<img src={'/gallery/'+item} onClick={()=>this.openGallery(item)}/>}>
                <Card.Meta title="React Admin" description="Antd">

                </Card.Meta>
            </Card>
        ));

        return (
            <Card className="card-wrap"> 
            <div >
                <Row gutter={10}>
                    <Col md={5}>
                        {imgList[0]}
                    </Col>
                    <Col md={5}>
                        {imgList[1]}
                    </Col>
                    <Col md={5}>
                        {imgList[2]}
                    </Col>
                    <Col md={5}>
                        {imgList[3]}
                    </Col>
                    <Col md={4}>
                        {imgList[4]}
                    </Col>
                </Row>

                <Modal width={300} height={500} visible={this.state.visible} title="图片画廊" onCancel={()=>{
                    this.setState({
                        visible:false
                    })
                }} footer={null}>
                    {<img src={this.state.currentImg} alt="/" style={{width:'100%'}}/>}
                </Modal>
            </div>
            </Card>
        );
    }

{ confirm } = Modal

MyModal = styled(Modal)`
  .ant-spin-blur {
    opacity: 0 !important;
    max-height: ${(props) =>
      props.maxHeight ? `${props.maxHeight} !important` : `unset`};
  }
`

// 响应拦截器
service.interceptors.response.use(
  (response) => response,
  /**
   * 下面的注释为通过在response里，自定义code来标示请求状态
   * 当code返回如下情况则说明权限有问题，登出并返回到登录页
   * 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中
   * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
   */
  // response => {
  //   const res = response.data
  //   if (res.code !== 20000) {
  //     Message({
  //       message: res.message,
  //       type: 'error',
  //       duration: 5 * 1000
  //     })
  //     // 50008:非法的token; 50012:其他客户端登录了;  50014:Token 过期了;
  //     if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  //       // 请自行在引入 MessageBox
  //       // import { Message, MessageBox } from 'element-ui'
  //       MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
  //         confirmButtonText: '重新登录',
  //         cancelButtonText: '取消',
  //         type: 'warning'
  //       }).then(() => {
  //         store.dispatch('FedLogOut').then(() => {
  //           location.reload() // 为了重新实例化vue-router对象 避免bug
  //         })
  //       })
  //     }
  //     return Promise.reject('error')
  //   } else {
  //     return response.data
  //   }
  // },
  (error) => {
    console.log("err" + error); // for debug
    const { status } = error.response;
    if (status === 403) {
      Modal.confirm({
        title: "确定登出?",
        content:
          "由于长时间未操作，您已被登出，可以取消继续留在该页面，或者重新登录",
        okText: "重新登录",
        cancelText: "取消",
        onOk() {
          let token = store.getState().user.token;
          store.dispatch(logout(token));
        },
        onCancel() {
          console.log("Cancel");
        },
      });
    }
    return Promise.reject(error);
  }
);

render() {
    const { getFieldDecorator } = this.props.form
    const { id, visiable } = this.state
    return (
      <Modal
        title={id ? '编辑维护组' : '添加维护组'}
        visible={visiable}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        maskClosable={false}
      >
        <Form {...formItemLayout} layout="horizontal">
          <Form.Item label="维护时间段" required style={{ marginBottom: 0 }}>
            <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}>
              {getFieldDecorator('time_start', {
                rules: [{ type: 'object', required: true, message: 'Please select time!' }],
              })(<TimePicker style={{ width: '100%' }} format="HH:mm" />)}
            </Form.Item>
            <span style={{ display: 'inline-block', width: '20px', textAlign: 'center' }}>~</span>
            <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}>
              {getFieldDecorator('time_end', {
                rules: [
                  { type: 'object', required: true, message: 'Please select time!' },
                ],
              })(<TimePicker style={{ width: '100%' }} format="HH:mm" />)}
            </Form.Item>
          </Form.Item>
          <Form.Item label="维护月" required>
            {getFieldDecorator('month', {
              rules: [
                { type: 'array', required: true, message: 'Please select month' },
              ]
            })(<Select mode="multiple">
              { new Array(12).fill(1).map((item, index) => (<Option value={index + 1}>{index + 1}</Option>))}
            </Select>)}
          </Form.Item>
          <Form.Item label="维护日期" required style={{ marginBottom: 0 }}>
            <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}>
              {getFieldDecorator('day_start', {
                rules: [{ required: true, message: 'Please input day!' }],
              })(<InputNumber style={{ width: '100%' }} format="HH:mm" />)}
            </Form.Item>
            <span style={{ display: 'inline-block', width: '20px', textAlign: 'center' }}>~</span>
            <Form.Item style={{ display: 'inline-block', width: 'calc(50% - 10px)' }}>
              {getFieldDecorator('day_end', {
                rules: [
                  { required: true, message: 'Please input day!' },
                  { validator: this.dayEndValid },
                ],
              })(<InputNumber style={{ width: '100%' }} format="HH:mm" />)}
            </Form.Item>
          </Form.Item>
          <Form.Item label="有效期">
            {getFieldDecorator('valid', {
              rules: [
                { required: true, message: '请填写有效期' },
              ],
            })(<DatePicker
              style={{ width: '100%' }}
              showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
              format="YYYY-MM-DD HH:mm:ss"
              placeholder={['请填写有效期']}
            />)}
          </Form.Item>
          <Form.Item label="机器列表">
            {getFieldDecorator('hosts', {
              rules: [
                { required: true, message: '请输入成员' },
              ],
            })(<Input.TextArea autoSize={{ minRows: 2 }} />)}
          </Form.Item>
        </Form>
      </Modal>
    )
  }

CreateForm = Form.create()(props => {
  const { current, modalVisible, form, handleAdd, handleUpdate, handleModalVisible } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      if (current && current.id) {
        handleUpdate({ ...fieldsValue, id: current.id });
      }
      handleAdd(fieldsValue);
    });
  };
  return (
    <Modal
      destroyOnClose
      title={current && current.id ? '编辑任务' : '新建任务'}
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => handleModalVisible()}
    >
      <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 15 }} label="任务名称">
        {form.getFieldDecorator('taskInfo', {
          rules: [{ required: true, message: '请输入任务名称！' }],
          initialValue: current.taskInfo,
        })(<Input placeholder="请输入" />)}
      </FormItem>
      <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 15 }} label="测试地址">
        {form.getFieldDecorator('host', {
          rules: [{ required: true, message: '请输入机器IP！' }],
          initialValue: current.host,
        })(<Input placeholder="请输入" />)}
      </FormItem>
      <FormItem labelCol={{ span: 6 }} wrapperCol={{ span: 15 }} label="测试数据路径">
        {form.getFieldDecorator('testData', {
          rules: [{ required: true, message: '请输入测试数据路径！' }],
          initialValue: current.testData,
        })(<Input placeholder="请输入" />)}
      </FormItem>
    </Modal>
  );
})

export default function ViewSchemaModal(props) {
    const {messages, visible, modalCloseHandler, formSchema, popupContainer} = props;
    return (
        <Modal
            visible={visible}
            title={messages[getMessageId('xformSchemaModalTitle')]}
            width={600}
            wrapClassName="app-xform-builder-view-schema-modal"
            onCancel={() => {
                modalCloseHandler()
            }}
            footer={([
                <CopyToClipboard
                    text={JSON.stringify(formSchema, undefined, 4)}
                    onCopy={() => {
                        message.success(messages[getMessageId('xformSchemaModalCopySuccessTip')]);
                    }}
                >
                    <Button
                        type="default"
                    >
                        {messages[getMessageId('xformSchemaModalCopy')]}
                    </Button>
                </CopyToClipboard>,
                <Button
                    type="default"
                    onClick={() => {
                        modalCloseHandler();
                    }}
                >
                    {messages[getMessageId('xformSchemaModalCancel')]}
                </Button>
            ])}
            getContainer={popupContainer}
        >
            <TextArea
                rows={10}
                readOnly
                value={JSON.stringify(formSchema, undefined, 4)}
            />
        </Modal>
    );
}

goodsTypeCheck = (value, callback, { mApi }) => {
  const goodsType = mApi.getValue('goodsType');
  const warehouse = mApi.getValue('warehouse');
  if (goodsType === 'chemical-reagent' && warehouse !== 'warehouse3') {
    showPasswordConfirm({
      onOk(pswd) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            // 模拟密码校验
            if (pswd === '999999') {
              callback();
              resolve();
            } else {
              // 校验不过不应该关闭校验，因为有可能再次输入密码
              // callback({
              //   passed: false,
              //   status: 'error',
              //   message: '化学品类一般要求放到三号仓库',
              // });
              reject();
              Modal.error({ content: '入库授权码错误' });
            }
          }, 1000);
        });
      },
      onCancel() {
        callback({
          passed: false,
          status: 'error',
          message: '化学品类一般要求放到三号仓库',
        });
      },
      cancelText: '取消',
      okText: '确认授权'
    });
  } else {
    // passed
    callback();
  }
}

RedeemBothModal = ({ visible, onCancel }) => {

  const { activeWallet } = useSelector((state) => state.settings);
  const { address: carburetorAddress } = useSelector((state) => state.carburetor);
  const { symbol1, symbol2 } = useSelector((state) => state.active);
  const [pending, setPending] = useState(false);
  const { t } = useTranslation();

  useEffect(() => {
    let getCarburetor;
    if (pending) {
      getCarburetor = setInterval(() => {
        if (carburetorAddress) {
          clearInterval(getCarburetor);
          setPending(false);
        }
      }, 10 * 1000)
    }

    return () => {
      getCarburetor && clearInterval(getCarburetor);
    }
  }, [pending]);

  useEffect(() => {
    setPending(false);
  }, [activeWallet]);

  return (
    <Modal
      title={<b>{t("modals.redeem-both.modal_title", "Simultaneously redeem")}<sup>Beta</sup></b>}
      visible={visible}
      onCancel={onCancel}
      footer={null}
      size="large"
      width="800px"
    >
      <Text type="secondary">
        <Trans i18nKey="modals.redeem-both.desc" symbol1={symbol1 || "T1"} symbol2={symbol2 || "T2"}>
          To <b>simultaneously</b> redeem {{ symbol1: symbol1 || "T1" }} and {{ symbol2: symbol2 || "T2" }}, you need to
          <ul>
            <li>create an intermediary Autonomous Agent</li>
            <li>send {{ symbol1: symbol1 || "T1" }} and {{ symbol2: symbol2 || "T2" }} to the intermediary AA in two separate transactions.</li>
          </ul>
          <p>
            Once the AA has received both tokens, it will automatically redeem them in such a proportion that the fee is 0. Then, you'll be able to withdraw the excess amount of the token ({symbol1 || "T1"} or {symbol2 || "T2"}) that was not fully redeemed.
          </p>
        </Trans>
      </Text>

      {carburetorAddress ?
        <div>
          <Title level={4}>{t("modals.redeem-both.add_title", "Add tokens")}</Title>
          <AddTokensToCarburetor />
        </div> : <CreateCarburetor pending={pending} setPending={setPending} />}

      <div style={{ textAlign: "center", marginTop: 20 }}>
        <a href="https://github.com/Taump/redeem-both" target="_blank" rel="noopener">{t("modals.redeem-both.github", "Open github page with the AA source code")}</a>
      </div>
    </Modal>
  )
}

function TrackEnroll({
  visible,
  getTracksAction,
  loading,
  error,
  userEnrollTrackAction,
  errResponse,
  data,
  onCancel,
}) {
  const [current, setCurrent] = useState(0);
  const [trackId, setTrackId] = useState(null);
  const [mentorId, setMentorId] = useState(null);

  const [trackTitle, setTrackTitle] = useState(null);
  const [currentPage, setCurrentPage] = useState(1);
  // eslint-disable-next-line
  const [trackPerPage, setTrackperPage] = useState(3);

  const indexOfLastTrack = currentPage * trackPerPage;
  const indexOfFirstTrack = indexOfLastTrack - trackPerPage;
  const { items } = data;

  const paginate = pageNumber => setCurrentPage(pageNumber);
  const currentTracks = items
    ? items.slice(indexOfFirstTrack, indexOfLastTrack)
    : null;

  const getTrackName = id => {
    const track = items.filter(data => data.id === id);
    setTrackTitle(track[0].title);
  };
  function next() {
    const newCurrent = current + 1;
    setCurrent(newCurrent);
  }

  function prev() {
    const newCurrent = current - 1;
    setCurrent(newCurrent);
  }

  const handleSetTrackId = e => {
    setTrackId(e.target.value);
  };

  const handleSetMentorId = e => {
    setMentorId(e.target.value);
  };

  const handleEnrollTrack = async (trackId, mentorId) => {
    try {
      await userEnrollTrackAction(trackId, mentorId);
      await getTrackName(trackId);
    } catch (error) {}
    next();
  };

  useEffect(() => {
    getTracksAction();
  }, [getTracksAction]);

  return (
    <TrackEnrollStyled>
      <Modal
        visible={visible}
        onCancel={onCancel}
        className="custom-ant-modal"
        footer={null}
        closable={false}
      >
        <Steps current={current}>
          {steps.map(item => (
            <Step key={item.title} title={item.title} />
          ))}
        </Steps>

        {current === 0 && items ? (
          <React.Fragment>
            <Radio.Group onChange={handleSetTrackId} defaultValue={null}>
              <div className="tracks-card">
                {currentTracks ? (
                  currentTracks.map((item, idx) => (
                    <TrackCard
                      next={next}
                      data={item}
                      key={idx}
                      logo={tempCourseLogo}
                    />
                  ))
                ) : (
                  <CustomLoader />
                )}
              </div>
            </Radio.Group>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <Pagination
                // postPerPage={postPerPage}
                total={items.length}
                defaultCurrent={currentPage}
                // paginate={paginate}
                onChange={paginate}
                pageSize={trackPerPage}
                showSizeChanger={false}
              />
            </div>
          </React.Fragment>
        ) : null}
        {current === 1 ? <TracksEnrollStages id={trackId} /> : null}
        {current === 2 ? (
          <React.Fragment>
            <SelectMentorStep
              trackId={trackId}
              handleSetMentorId={handleSetMentorId}
            />
          </React.Fragment>
        ) : null}

        {current === 3 ? (
          <EnrollmentStatus
            status={error ? 'error' : 'success'}
            title={trackTitle}
            prev={prev}
          />
        ) : null}

        <div className="steps-action">
          {current === 0 && (
            <Button type="primary" disabled={!trackId} onClick={() => next()}>
              Next
            </Button>
          )}

          {current === 1 && (
            <React.Fragment>
              <Button type="default" onClick={() => prev()}>
                Back
              </Button>

              <Popconfirm
                title="Are you sure？"
                onConfirm={() => next()}
                icon={<QuestionCircleOutlined style={{ color: 'green' }} />}
              >
                <Button type="primary" className="ml-2">
                  Next
                </Button>
              </Popconfirm>
            </React.Fragment>
          )}

          {current === 2 && (
            <React.Fragment>
              <Button type="default" onClick={() => prev()}>
                Back
              </Button>

              <Popconfirm
                title="Are you sure？"
                onConfirm={() => handleEnrollTrack(trackId, mentorId)}
                icon={<QuestionCircleOutlined style={{ color: 'green' }} />}
                disabled={!mentorId}
              >
                <Button type="primary" disabled={!mentorId} className="ml-2">
                  Enroll
                </Button>
              </Popconfirm>
            </React.Fragment>
          )}
          {current === 3 && (
            <Button type="primary" onClick={() => onCancel()}>
              Done
            </Button>
          )}
        </div>
      </Modal>
    </TrackEnrollStyled>
  );
}

card = (props) => {
  const { info, dispatch } = props;
  const { com_name, com_description, file_path,id } = info;

  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = e => {
    setVisible(false);
  };

  const handleCancel = e => {
    setVisible(false);
  };

  const PageJumpToDetail = () => {
    dispatch(routerRedux.push(`/${id}/componentDrag`));
  }

  return (
    <div style={{ width: '200px', marginRight: '20px', marginBottom: '20px' }}>
      <div className={styles.container}>
        <img style={{ width: '100px' }} src={file_path} />
      </div>
      <div style={{ padding: '24px' }}>
        <h4>{com_name}</h4>
        <div style={{ height: '50px'}}>{com_description}</div>
      </div>
      <div>
        <div
          style={{
            margin: 0,
            padding: 0,
            background: '#e8e8e8',
            display: 'flex',
          }}
        >
          <span style={{ flex: 1, textAlign: 'center' }} onClick={PageJumpToDetail}>更新</span>
          <span style={{ flex: 1, textAlign: 'center' }} onClick={showModal}>
            预览
          </span>
          <span style={{ flex: 1, textAlign: 'center' }}>设置</span>
        </div>
        <Modal
          visible={visible}
          onOk={handleOk}
          onCancel={handleCancel}
          footer = {null}
        >
          <div >
            <img style={{ width: '400px' }} src={file_path} />
          </div>
        </Modal>
      </div>
    </div>
  );
}

ResetPassword = (props) => {
  const [visible, setVisible] = useState(false);
  const [user, setUser] = useState(props.user._id);
  const [password, setPassword] = useState("");

  const postData = async () => {
    const id = user
    await fetch(`/api/v1/auth/resetPassword/${id}`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + localStorage.getItem("jwt"),
      },
      body: JSON.stringify({
        password,
      }),
    }).then((res) => res.json);
  };

  const onCreate = async () => {
    setVisible(false);
    await postData();
  };

  const onCancel = () => {
    setVisible(false);
  };

  return (
    <div>
      <Button
        type="default"
        onClick={() => {
          setVisible(true);
        }}
      >
        Reset password
      </Button>
      <Modal
        visible={visible}
        title="Reset users password"
        okText="Update"
        cancelText="Cancel"
        onCancel={onCancel}
        onOk={onCreate}
      >
          <Input onChange={(e) => setPassword(e.target.value)} placeholder="Enter users new password" />
      </Modal>
    </div>
  );
}

LinkModal = (props) => {
  const onOk = () => {
    const { form, minder, onCancel } = props;
    form.validateFields((err, values) => {
      if (err) {
        console.log('Received values of form: ', values);
        return;
      }
      const params = { ...values };
      minder.execCommand('HyperLink', params.url, params.title);
      onCancel();
    });
  };
  const defaultObj = props.minder.queryCommandValue('HyperLink');
  const { getFieldDecorator } = props.form;
  return (
    <Modal
      title="链接"
      className="agiletc-modal"
      visible={props.visible}
      onOk={onOk}
      onCancel={props.onCancel}
    >
      <Form layout="vertical">
        <Form.Item label="链接地址">
          {getFieldDecorator('url', {
            rules: [
              {
                required: true,
                message: '必填：以 http(s):// 或 ftp:// 开头',
              },
            ],
            initialValue: defaultObj.url,
          })(<Input placeholder="必填：以 http(s):// 或 ftp:// 开头" />)}
        </Form.Item>
        <Form.Item label="提示文本">
          {getFieldDecorator('title', {
            initialValue: defaultObj.title,
          })(<Input placeholder="选填：鼠标在链接上悬停时提示的文本" />)}
        </Form.Item>
      </Form>
    </Modal>
  );
}

function ModalEdit(props) {
  const { visible, onOk } = props;
  const { id, sub_path, title, is_rewrite, proxy_addr } = props.resource;
  const [form] = Form.useForm();

  useEffect(() => {
    if (!visible) {
      return;
    }
    form.resetFields();
  }, [visible]);

  return (
    <Modal
      width={700}
      visible={props.visible}
      title={'编辑'}
      onOk={() => {
        form.submit();
      }}
      onCancel={() => props.showModalEdit({ visible: false })}
    >
      <Form
        form={form}
        labelCol={{ span: 3 }}
        onFinish={(fields) => {
          createItem({
            id: id,
            ...fields,
            is_rewrite: fields.is_rewrite ? 1 : 0,
          }).then((r) => {
            if (r.code !== 0) {
              message.error('更新失败:' + r.msg);
              return;
            }
            if (props.onOk) props.onOk();
            message.success('更新成功');
            props.showModalEdit(false);
            return;
          });
        }}
      >
        <Form.Item
          label={'名称'}
          name={'title'}
          rules={[{ required: true, message: '请输入名称' }]}
          initialValue={title}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={'子路径'}
          name={'sub_path'}
          rules={[{ required: true, message: '请输入子路径' }]}
          initialValue={sub_path}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={'代理路径'}
          name={'proxy_addr'}
          rules={[{ required: true, message: '请输入代理路径' }]}
          initialValue={proxy_addr}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={'是否重写'}
          name={'is_rewrite'}
          valuePropName="checked"
          rules={[{ required: true, message: '选择是否重写' }]}
          initialValue={is_rewrite === 1}
        >
          <Switch checkedChildren="开启" unCheckedChildren="关闭" />
        </Form.Item>
      </Form>
    </Modal>
  );
}

confirm = Modal.confirm