How to use @hi-ui/hiui - 5 common examples

// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Stepper, Panel, Input, Select, DatePicker, Icon, handleNotificate, Table, Form, Button, Alert, Counter } from '@hi-ui/hiui/es'
import { setBreadCrumbs } from '../../../redux/actions/global'
import * as Actions from '../../../redux/actions/service/createTask'
import * as TaskTemplateActions from '../../../redux/actions/service/taskTemplate'
import { Task } from '../../../commons/consts'
import * as socketAction from '../../../redux/actions/socket'
import './index.scss'

const FormItem = Form.Item

class CreateTask extends Component {
  constructor (props) {
    super(props)

    this.state = {
      stepList: [
        {title: T('app.common.createTaskStep1')},
        {title: T('app.common.createTaskStep2')},
        {title: T('app.common.createTaskStep3')}
      ],
      namespace: 'default'
    }
    this.canContinue = true
    this.tempItem = ''
    this.createItem = {

// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Input, Form } from '@hi-ui/hiui/es'
import Grid from '@hi-ui/hiui/es/grid'
import { setBreadCrumbs } from '../../../redux/actions/global'
import * as Actions from '../../../redux/actions/service/serviceList'
import PodsAbout from './PodsAbout'
import ServiceAbout from './ServiceAbout'
import CTree from '../../../components/CTree'
import './index.scss'

const FormItem = Form.Item
const { Row, Col } = Grid

class ServiceList extends Component {
  constructor (props) {
    super(props)
    this.state = {
      keyWord: '',
      filterTreeList: '',
      active: null
    }
  }

  componentDidMount () {
    this.props.getServiceTreeListAjax((treeList) => {
      const filterList = this.repeatGetKey(treeList, true, '')
      this.setState({

// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import React, { Component } from 'react'
import { connect } from 'react-redux'
import AceEditor from 'react-ace'
import 'brace/mode/yaml'
import 'brace/theme/monokai'
import { Table, Modal, Input, Select, Form, Button, handleNotificate, Icon, Tooltip } from '@hi-ui/hiui/es'
import { Task } from '../../../commons/consts'
import { setBreadCrumbs } from '../../../redux/actions/global'
import * as Actions from '../../../redux/actions/service/taskTemplate'
import './index.scss'

const FormItem = Form.Item

class Istio extends Component {
  constructor (props) {
    super(props)

    this.state = {
      showModal: false,
      currentType: 'ADD'
    }
    this.canContinue = true
    this.formTypeList = []
    for (let name in Task.varFormType) {
      this.formTypeList.push({
        name: name,
        id: Task.varFormType[name]
      })

// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Table, Panel, Button, Pagination, handleNotificate, Modal, Form } from '@hi-ui/hiui/es'
import '@hi-ui/hiui/es/table/style/index.css'
import AceEditor from 'react-ace'
import { Task } from '../../../commons/consts'
import * as createTaskActions from '../../../redux/actions/service/createTask'
import * as Actions from '../../../redux/actions/service/serviceList'
import './index.scss'
const FormItem = Form.Item
class ServiceAbout extends Component {
  constructor (props) {
    super(props)

    this.podsColumns = [
      { title: T('app.common.tb.podName'), dataIndex: 'name', key: 'name' },
      { title: T('app.common.tb.podReady'), dataIndex: 'ready', key: 'ready' },
      {
        title: T('app.common.tb.podStatus'),
        dataIndex: 'status',
        key: 'status',
        render: text => {
          let colorValue = ''
          switch (text) {
            case 'Pending':
              colorValue = '#1890FF'

onChange={(d) => {
                                        if (d) {
                                          this.updateParam(DatePicker.format(d, 'yyyy-MM E'), v.key, index)
                                        } else {
                                          this.updateParam(d, v.key, index)
                                        }
                                      }} />
                                  }