How to use choerodon-ui - 10 common examples

import React, { Component } from 'react';
import { Form, Input, Select } from 'choerodon-ui';
import { injectIntl } from 'react-intl';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Content } from 'choerodon-boot-combine';
import CreateUserStore from '../../../stores/organization/user/CreateUserStore';

const FormItem = Form.Item;
const Option = Select.Option;
const intlPrefix = 'organization.user';

const inputWidth = 512; // input框的长度
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 100 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 10 },
  },
};

function noop() {
}

import { withRouter } from 'react-router-dom';
import { Button, Form, Icon, Input, Select, Spin, InputNumber, Popover, Modal, Radio } from 'choerodon-ui';
import { axios, Content, Header, Page, Permission } from '@choerodon/boot';
import { FormattedMessage, injectIntl } from 'react-intl';
import './SystemSetting.scss';
import '../../../common/ConfirmModal.scss';
import LogoUploader from './LogoUploader';
// import AvatarUploader from '../../../components/AvatarUploader';

const intlPrefix = 'global.system-setting';
const prefixClas = 'c7n-iam-system-setting';
const inputPrefix = 'organization.pwdpolicy';
const limitSize = 1024;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const confirm = Modal.confirm;
const { TextArea } = Input;
const dirty = false;
const cardContentFavicon = (
  <div>
    <p></p>
    <div>
  </div>
);
const cardContentLogo = (
  <div>
    <p></p>
    <div>
  </div>
);
const cardContentTitle = (</div></div>

import Editor from '../../../components/editor';
import MouseOverWrapper from '../../../components/mouseOverWrapper';

configure({ enforceActions: false });

// 匹配html界面为空白的正则。
const patternHTMLEmpty = /^(((<[^>]+>)*\s*)| |\s)*$/g;
const inputWidth = '512px';
const iconType = {
  COMPLETED: 'COMPLETED',
  SENDING: 'RUNNING',
  WAITING: 'UN_START',
  // FAILED: 'FAILED',
};
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 100 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 10 },
  },
};
const { Sidebar } = Modal;
// 公用方法类
class AnnouncementType {
  constructor(context) {
    this.context = context;
    const { AppState } = this.context.props;

import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import { Button, List, Tabs, Collapse, Modal, Icon, Checkbox, Avatar, Tooltip } from 'choerodon-ui';
import { injectIntl, FormattedMessage } from 'react-intl';
import { axios, Content, Header, Page, Permission } from 'choerodon-boot-combine';
import { withRouter } from 'react-router-dom';
import classnames from 'classnames';
import './UserMsg.scss';
import UserMsgStore from '../../../stores/user/user-msg/UserMsgStore';
import '../../../common/ConfirmModal.scss';

const intlPrefix = 'user.usermsg';
const Panel = Collapse.Panel;
const TabPane = Tabs.TabPane;

function timestampFormat(timestamp) {
  function zeroize(num) {
    return (String(num).length === 1 ? '0' : '') + num;
  }

  const curTimestamp = parseInt(new Date().getTime() / 1000, 10); // 当前时间戳
  const timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数

  const curDate = new Date(curTimestamp * 1000); // 当前时间日期对象
  const tmDate = new Date(timestamp * 1000); // 参数时间戳转换成的日期对象

  const Y = tmDate.getFullYear(); const m = tmDate.getMonth() + 1; const
    d = tmDate.getDate();
  const H = tmDate.getHours(); const i = tmDate.getMinutes(); const
    s = tmDate.getSeconds();

import React, { Component } from 'react';
import {
  Form, Input, Select, Modal, Spin, DatePicker, 
} from 'choerodon-ui';
import { Content, stores } from '@choerodon/master';
import moment from 'moment';
import { getProjectVersion } from '../../../../api/agileApi';
import { editFolder } from '../../../../api/cycleApi';

const { Option } = Select;
const { AppState } = stores;
const FormItem = Form.Item;
const { Sidebar } = Modal;

class EditCycle extends Component {
  state = {
    versions: [],
    selectLoading: false,
    loading: false,
  }

  componentWillReceiveProps(nextProps) {
    const { setFieldsValue } = this.props.form;
    if (this.props.visible === false && nextProps.visible === true) {
      const {
        versionId,
        title,
        description,

  const dataSet = useMemo(() => new DataSet(DataSetFactory({ initValue })), [initValue]);
  useEffect(() => {

import { Choerodon } from '@choerodon/boot';
import { observer } from 'mobx-react-lite';
import moment from 'moment';
import UserHead from '@/components/UserHead';
import Tip from '@/components/Tip';
import { PromptInput } from '@/components';
import { getProjectId } from '@/common/utils';
import {
  createPlan, getPlan, editPlan, clonePlan,
} from '@/api/TestPlanApi';
import DataSetFactory from './dataSet';
import SelectIssue from './SelectIssue';
import SelectIssueStore from './SelectIssueStore';
import Context from './context';

const key = Modal.key();

const propTypes = {
  initValue: PropTypes.shape({}),
  onSubmit: PropTypes.func.isRequired,
};
const defaultProps = {
  initValue: {},
};
function TestPlanModal({
  modal, initValue, submit, onSubmit, mode = 'create',
}) {
  const { caseSelected: initCaseSelected } = initValue;
  const selectIssueStore = useMemo(() => new SelectIssueStore(), []);
  const dataSet = useMemo(() => new DataSet(DataSetFactory({ initValue })), [initValue]);
  useEffect(() => {
    if (mode === 'create') {

import React, { useContext, useCallback, useEffect } from 'react';
import { Choerodon } from '@choerodon/boot';
import { observer } from 'mobx-react-lite';
import { FormattedMessage } from 'react-intl';
import { Button, Modal } from 'choerodon-ui/pro';
import { openEditPlan } from '../TestPlanModal';
import { updatePlanStatus } from '@/api/TestPlanApi';
import ConfirmCompleteModalChildren from './components/ConfirmCompleteModalChildren';
import Store from '../../stores';
import './TestPlanHeader.less';

const confirmCompletePlanModalKey = Modal.key();

function TestPlanHeader() {
  const { testPlanStore, createAutoTestStore } = useContext(Store);
  const { testPlanStatus, getCurrentPlanId } = testPlanStore;

  const onUpdatePlanStatus = (planItem, newStatus) => {
    updatePlanStatus({
      planId: planItem.item.id,
      objectVersionNumber: planItem.item.data.objectVersionNumber,
      statusCode: newStatus,
    }).then(() => {
      if (newStatus === 'doing') {
        Choerodon.prompt('开始测试成功');
        testPlanStore.setTestPlanStatus('doing');
        testPlanStore.loadAllData();
      } else {

*/

import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import _ from 'lodash';
import { injectIntl, FormattedMessage } from 'react-intl';
import {
  Modal, Table, Select, Spin,
} from 'choerodon-ui';
import { stores, Content } from '@choerodon/boot';
import './SelectAppAndVersion.scss';
import { getApps, getAppVersions } from '../../../../../../api/AutoTestApi';
import CreateAutoTestStore from '../../../../../../store/project/AutoTest/CreateAutoTestStore';

const SideBar = Modal.Sidebar;
const { AppState } = stores;
const { Option } = Select;
@observer
class SelectAppAndVersion extends Component {
  state = {
    loading: false,
  }

  componentDidMount() {
    this.loadAppAndVersions();
  }

  /**
   * 加载应用以及版本，默认选择第一个应用
   *
   * 

*/

import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import _ from 'lodash';
import { injectIntl, FormattedMessage } from 'react-intl';
import {
  Modal, Table, Select, Spin,
} from 'choerodon-ui';
import { stores, Content } from '@choerodon/boot';
import './SelectAppAndVersion.less';
import { getApps, getAppVersions } from '../../../../../api/AutoTestApi';
import CreateAutoTestStore from '../../../AutoTestStore/CreateAutoTestStore';

const SideBar = Modal.Sidebar;
const { AppState } = stores;
const { Option } = Select;
@observer
class SelectAppAndVersion extends Component {
  state = {
    loading: false,
  }

  componentDidMount() {
    this.loadAppAndVersions();
  }

  /**
   * 加载应用以及版本，默认选择第一个应用
   *
   *