@electerm/electerm-react 1.34.30

package/client/components/bookmark-form/use-quick-commands.jsx

@@ -0,0 +1,83 @@
+/**
+ * quick commands forms render
+ * // todo rerender check
+ */
+
+/**
+ * bookmark form
+ */
+
+import {
+  Input,
+  Form,
+  Space,
+  Button
+} from 'antd'
+import { formItemLayout } from '../../common/form-layout'
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
+
+const FormItem = Form.Item
+const FormList = Form.List
+const { prefix } = window
+const t = prefix('quickCommands')
+
+export default function useQuickCmds (form, formData) {
+  function renderItem (field, i, add, remove) {
+    return (
+      <Space
+        style={{ display: 'flex', marginBottom: '2px' }}
+        align='baseline'
+        key={field.key}
+      >
+        <FormItem
+          {...field}
+          name={[field.name, 'name']}
+          fieldKey={[field.fieldKey, 'first']}
+          rules={[{ required: true, max: 30 }]}
+        >
+          <Input placeholder={t('quickCommandName')} />
+        </FormItem>
+        <FormItem
+          {...field}
+          name={[field.name, 'command']}
+          fieldKey={[field.fieldKey, 'first']}
+          rules={[{ required: true, max: 300 }]}
+        >
+          <Input placeholder={t('quickCommand')} />
+        </FormItem>
+        <MinusCircleOutlined onClick={() => remove(field.name)} />
+      </Space>
+    )
+  }
+  return (
+    <FormList
+      {...formItemLayout}
+      label={t('quickCommands')}
+      name='quickCommands'
+    >
+      {
+        (fields, { add, remove }, { errors }) => {
+          return (
+            <div>
+              {
+                fields.map((field, i) => {
+                  return renderItem(field, i, add, remove)
+                })
+              }
+              <FormItem>
+                <Button
+                  type='dashed'
+                  onClick={() => add()}
+                  block
+                  icon={<PlusOutlined />}
+                >
+                  {t('newQuickCommand')}
+                </Button>
+              </FormItem>
+            </div>
+          )
+        }
+      }
+    </FormList>
+  )
+}

package/client/components/bookmark-form/use-submit.jsx

@@ -0,0 +1,77 @@
+/**
+ * submit buttons
+ */
+
+/**
+ * bookmark form
+ */
+
+import {
+  Button,
+  Form
+} from 'antd'
+import {
+  settingMap
+} from '../../common/constants'
+import { tailFormItemLayout } from '../../common/form-layout'
+import useFuncs from './use-form-funcs'
+
+const FormItem = Form.Item
+const { prefix } = window
+const e = prefix('form')
+
+export default function useBookmarkSubmit (props) {
+  const [
+    form,
+    save,
+    saveAndCreateNew,
+    connect,
+    testConnection,
+    handleFinish
+  ] = useFuncs(props)
+  const ui = (
+    <FormItem {...tailFormItemLayout}>
+      <p>
+        <Button
+          type='primary'
+          htmlType='submit'
+          className='mg1r mg1b'
+        >{e('saveAndConnect')}
+        </Button>
+        {
+          settingMap.history === props.type
+            ? null
+            : (
+              <Button
+                type='primary'
+                className='mg1r mg1b'
+                onClick={saveAndCreateNew}
+              >{e('saveAndCreateNew')}
+              </Button>
+              )
+        }
+        <Button
+          type='dashed'
+          className='mg1r mg1b'
+          onClick={save}
+        >{e('save')}
+        </Button>
+      </p>
+      <p>
+        <Button
+          type='dashed'
+          onClick={connect}
+          className='mg1r mg1b'
+        >{e('connect')}
+        </Button>
+        <Button
+          type='dashed'
+          onClick={testConnection}
+          className='mg1r mg1b'
+        >{e('testConnection')}
+        </Button>
+      </p>
+    </FormItem>
+  )
+  return [form, handleFinish, ui]
+}

package/client/components/bookmark-form/use-ui.jsx

@@ -0,0 +1,82 @@
+/**
+ * ui forms render
+ */
+
+/**
+ * bookmark form
+ */
+
+import {
+  Input,
+  InputNumber,
+  AutoComplete,
+  Form
+} from 'antd'
+import { formItemLayout } from '../../common/form-layout'
+import defaultSettings from '../../../app/common/default-setting'
+import mapper from '../../common/auto-complete-data-mapper'
+import { defaultEnvLang } from '../../common/constants'
+
+const FormItem = Form.Item
+const { prefix } = window
+const e = prefix('form')
+const s = prefix('setting')
+
+export default function useBookmarkFormUI (props) {
+  const {
+    fontFamily: defaultFontFamily,
+    fontSize: defaultFontSize
+  } = defaultSettings
+  const { terminalTypes } = props.store.config
+  return [
+    <FormItem
+      {...formItemLayout}
+      label='ENV:LANG'
+      key='envLang'
+      rules={[{
+        max: 130, message: '130 chars max'
+      }]}
+      name='envLang'
+    >
+      <Input placeholder={defaultEnvLang} />
+    </FormItem>,
+    <FormItem
+      {...formItemLayout}
+      key='terminalType'
+      label={e('terminalType')}
+      rules={[{
+        required: true, message: 'terminal type required'
+      }]}
+      normalize={props.trim}
+      name='term'
+    >
+      <AutoComplete
+        options={terminalTypes.map(mapper)}
+      />
+    </FormItem>,
+    <FormItem
+      {...formItemLayout}
+      label={s('fontFamily')}
+      key='fontFamily'
+      name='fontFamily'
+      rules={[{
+        max: 130, message: '130 chars max'
+      }]}
+    >
+      <Input placeholder={defaultFontFamily + ''} />
+    </FormItem>,
+    <FormItem
+      key='fontSize'
+      {...formItemLayout}
+      label={s('fontSize')}
+      name='fontSize'
+    >
+      <InputNumber
+        min={9}
+        max={65535}
+        step={1}
+        placeholder={defaultFontSize}
+      />
+    </FormItem>
+  ]
+}

package/client/components/bookmark-form/x11.jsx

@@ -0,0 +1,23 @@
+/**
+ * bookmark form
+ */
+import {
+  Switch,
+  Form
+} from 'antd'
+import { formItemLayout } from '../../common/form-layout'
+
+const FormItem = Form.Item
+
+export default function renderX11 () {
+  return (
+    <FormItem
+      {...formItemLayout}
+      label='x11'
+      name='x11'
+      valuePropName='checked'
+    >
+      <Switch />
+    </FormItem>
+  )
+}

package/client/components/common/animate-text.jsx

@@ -0,0 +1,37 @@
+/**
+ * animate text when text change
+ */
+
+import React from 'react'
+import uid from '../../common/uid'
+import './animate-text.styl'
+
+export default class AnimateText extends React.PureComponent {
+  constructor (props) {
+    super(props)
+    this.uid = 'AnimateText-' + uid()
+  }
+
+  componentDidUpdate () {
+    const dom = document.getElementById(this.uid)
+    dom.className = (this.props.className || 'animate-text-wrap') + ' animated bounceIn'
+    this.timer = setTimeout(() => {
+      if (dom) {
+        dom.className = this.props.className || 'animate-text-wrap'
+      }
+    }, 450)
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this.timer)
+  }
+
+  render () {
+    const { children, className } = this.props
+    return (
+      <div className={className} id={this.uid}>
+        {children}
+      </div>
+    )
+  }
+}

package/client/components/common/animate-text.styl

@@ -0,0 +1,54 @@
+
+/*!
+ * animate.css -http://daneden.me/animate
+ * Version - 3.5.2
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2017 Daniel Eden
+ */
+
+.animated {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+}
+
+.animated.bounceIn {
+  animation-duration: .45s;
+}
+
+@keyframes bounceIn {
+  from, 20%, 40%, 60%, 80%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    transform: scale3d(.3, .3, .3);
+  }
+
+  20% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    transform: scale3d(.9, .9, .9);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    transform: scale3d(.97, .97, .97);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.bounceIn {
+  animation-name: bounceIn;
+}

package/client/components/common/external-link.jsx

@@ -0,0 +1,28 @@
+/**
+ * external link, will be opened with default browser
+ */
+
+import { memo } from 'react'
+import { LinkOutlined } from '@ant-design/icons'
+
+window.openLink = (url) => {
+  window.pre.openExternal(url)
+}
+
+function onClick (e, href) {
+  e.preventDefault()
+  window.pre.openExternal(href)
+}
+
+export default memo(props => {
+  const { to, children = '', ...rest } = props
+  return (
+    <a
+      href={to}
+      onClick={e => onClick(e, to)}
+      {...rest}
+    >
+      {children} <LinkOutlined />
+    </a>
+  )
+})

package/client/components/common/help-icon.jsx

@@ -0,0 +1,25 @@
+import { memo } from 'react'
+import Link from './external-link'
+import {
+  Tooltip
+} from 'antd'
+import { QuestionCircleOutlined } from '@ant-design/icons'
+
+export default memo(props => {
+  const { link, title, ...rest } = props
+  const cont = title || (
+    <span>
+      <Link to={link}>{link}</Link>
+    </span>
+  )
+  return (
+    <Tooltip
+      title={cont}
+      {...rest}
+    >
+      <span className='mg1l'>
+        <QuestionCircleOutlined />
+      </span>
+    </Tooltip>
+  )
+})

package/client/components/common/highlight.jsx

@@ -0,0 +1,23 @@
+/**
+ * highlight keyword in text
+ * single keyword only
+ */
+
+import './highlight.styl'
+
+export default (text, keyword) => {
+  if (!keyword || !text.includes(keyword)) {
+    return text
+  }
+  const arr = text.split(keyword)
+  const len = arr.length
+  return arr.reduce((prev, t, i) => {
+    return [
+      ...prev,
+      t,
+      i === len - 1
+        ? null
+        : <span className='highlight'>{keyword}</span>
+    ]
+  }, [])
+}

package/client/components/common/highlight.styl

@@ -0,0 +1,3 @@
+@require '../../css/includes/theme-default'
+.highlight
+  color error

package/client/components/common/input-auto-focus.jsx

@@ -0,0 +1,68 @@
+/**
+ * input with auto focus
+ */
+
+import { Input } from 'antd'
+import React from 'react'
+import { findLastIndex } from 'lodash-es'
+import uid from '../../common/uid'
+
+export default class InputAutoFocus extends React.PureComponent {
+  constructor (props) {
+    super(props)
+    this.uid = 'InputAutoFocus-' + uid()
+  }
+
+  componentDidMount () {
+    this.timer = setTimeout(this.doFocus, 50)
+  }
+
+  componentDidUpdate (prevProps) {
+    if (!prevProps.selectall) {
+      return
+    }
+    if (prevProps.autofocustrigger !== this.props.autofocustrigger) {
+      this.timer = setTimeout(this.doFocus, 50)
+    }
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this.timer)
+  }
+
+  doFocus = () => {
+    const dom = this.getDom()
+    if (dom && dom.focus) {
+      const { value, selectall = false } = this.props
+      const index = findLastIndex(value, v => v === '.')
+      const hasExt = index > 0
+      if (value && !selectall && hasExt) {
+        dom.focus()
+        dom.setSelectionRange(0, index)
+      } else {
+        dom.select()
+      }
+    }
+  }
+
+  getDom () {
+    const root = document.querySelector(`[data-id="${this.uid}"]`)
+    const dom = root.tagName === 'INPUT'
+      ? root
+      : root.querySelector('input')
+    return dom
+  }
+
+  render () {
+    const { type, ...rest } = this.props
+    const Dom = type === 'password'
+      ? Input.Password
+      : Input
+    return (
+      <Dom
+        {...rest}
+        data-id={this.uid}
+      />
+    )
+  }
+}

package/client/components/common/input-confirm.jsx

@@ -0,0 +1,66 @@
+/**
+ * input only apply when confirm
+ */
+import { PureComponent } from 'react'
+import {
+  CheckOutlined
+} from '@ant-design/icons'
+import {
+  InputNumber
+} from 'antd'
+
+export default class InputNumberConfirm extends PureComponent {
+  constructor (props) {
+    super(props)
+    this.state = {
+      v: props.value,
+      onEdit: false
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (prevProps.value !== this.props.value) {
+      this.setState({
+        v: this.props.value
+      })
+    }
+  }
+
+  handleChange = (v) => {
+    this.setState({ v })
+  }
+
+  handleClick = () => {
+    this.setState({ onEdit: true })
+  }
+
+  handleSubmit = () => {
+    this.setState({ onEdit: false })
+    this.props.onChange(this.state.v)
+  }
+
+  after = () => {
+    const { onEdit } = this.state
+    if (onEdit) {
+      return (
+        <CheckOutlined
+          className='font16 pointer'
+          onClick={this.handleSubmit}
+        />
+      )
+    }
+    return this.props.addonAfter
+  }
+
+  render () {
+    return (
+      <InputNumber
+        {...this.props}
+        value={this.state.v}
+        onClick={this.handleClick}
+        onChange={this.handleChange}
+        addonAfter={this.after()}
+      />
+    )
+  }
+}

package/client/components/common/logo-elem.jsx

@@ -0,0 +1,22 @@
+import {
+  logoPath1,
+  logoPath2,
+  logoPath3,
+  packInfo
+} from '../../common/constants'
+import { Tag } from 'antd'
+
+export default function LogoElem () {
+  return (
+    <h1 className='mg3y font50'>
+      <span className='iblock pd3 morph-shape mg1l mg1r'>
+        <img src={logoPath2} height={80} className='iblock mwm-100 mg1l mg1r logo-filter' />
+      </span>
+      <img src={logoPath3} height={80} className='hide' />
+      <sup>
+        <img src={logoPath1} height={28} className='iblock mwm-100 mg1r' />
+      </sup>
+      <Tag color='#08c'>{packInfo.version}</Tag>
+    </h1>
+  )
+}

package/client/components/common/markdown.jsx

@@ -0,0 +1,27 @@
+/**
+ * render markdown text proper
+ */
+
+import classnames from 'classnames'
+
+export default ({ text = '' }) => {
+  const arr = text.split(/[\n\r]+/g)
+  function render (txt, i) {
+    const empty = txt.trim().length
+    const bold = !txt.startsWith('- ') || txt.startsWith('#')
+    const cls = classnames({
+      bold,
+      mg1y: empty || bold
+    })
+    return (
+      <div className={cls} key={'upgrade-info-' + i}>{txt}</div>
+    )
+  }
+  return (
+    <div className='pd1y'>
+      {
+        arr.map(render)
+      }
+    </div>
+  )
+}

package/client/components/common/react-subx.jsx

@@ -0,0 +1 @@
+export { Component } from 'manate/react'