tplus-components-touch 3.22.16 → 3.22.17

package/dist/components/keyboard/onlyLetterButton.js

@@ -0,0 +1,187 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _class, _temp; /**
+                    * 只有字母键盘
+                    */
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _index = require('../../index');
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var OnlyLetterButton = (_temp = _class = function (_Component) {
+  (0, _inherits3.default)(OnlyLetterButton, _Component);
+
+  function OnlyLetterButton(props) {
+    (0, _classCallCheck3.default)(this, OnlyLetterButton);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (OnlyLetterButton.__proto__ || (0, _getPrototypeOf2.default)(OnlyLetterButton)).call(this));
+
+    _this.keyClick = function (key) {
+      if (key == 'Esc') {
+        _this.props.handleCancel && _this.props.handleCancel();
+        return;
+      }
+      _this.props.onChange && _this.props.onChange(key);
+    };
+
+    _this.onMouseDown = function (e) {
+      e.preventDefault();
+    };
+
+    _this.capslockClick = function () {
+      _this.setState({ capslockFlag: !_this.state.capslockFlag });
+    };
+
+    _this.state = {
+      letters1: ['Esc', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
+      letters1_1: ['Esc', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
+      letters2: ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
+      letters2_1: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
+      letters3: ['@', '&', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '-', '%'],
+      letters3_1: ['@', '&', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '-', '%'],
+      nums: ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0', '00', '.'],
+      capslockFlag: false
+    };
+    return _this;
+  }
+
+  (0, _createClass3.default)(OnlyLetterButton, [{
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          handleOk = _props.handleOk,
+          handleCancel = _props.handleCancel;
+      var capslockFlag = this.state.capslockFlag;
+
+      var numsKey = this.state.nums.map(function (item) {
+        return _react2.default.createElement(
+          'div',
+          { className: 'num key', key: item, onClick: _this2.keyClick.bind(_this2, item) },
+          item
+        );
+      });
+      var letters1Key = (capslockFlag ? this.state.letters1_1 : this.state.letters1).map(function (item) {
+        return _react2.default.createElement(
+          'div',
+          { onClick: _this2.keyClick.bind(_this2, item), className: 'key letter ' + (item !== 'tab' && item !== "TAB" ? '' : 'disabled'), key: item },
+          item
+        );
+      });
+      var letters2Key = (capslockFlag ? this.state.letters2_1 : this.state.letters2).map(function (item) {
+        return _react2.default.createElement(
+          'div',
+          { onClick: _this2.keyClick.bind(_this2, item), className: 'key letter', key: item },
+          item
+        );
+      });
+      var letters3Key = (capslockFlag ? this.state.letters3_1 : this.state.letters3).map(function (item) {
+        return _react2.default.createElement(
+          'div',
+          { onClick: _this2.keyClick.bind(_this2, item), className: 'key letter', key: item },
+          item
+        );
+      });
+      return _react2.default.createElement(
+        'div',
+        { className: 'clearfix letters-box', onMouseDown: this.onMouseDown },
+        _react2.default.createElement(
+          'div',
+          { className: 'letters' },
+          _react2.default.createElement(
+            'div',
+            { className: 'letters-line' },
+            letters1Key
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: 'letters-line' },
+            _react2.default.createElement(
+              'div',
+              { className: 'key letter capslock ' + (capslockFlag ? '' : 'capslock-small'), onClick: this.capslockClick },
+              capslockFlag ? 'caps lock' : 'CAPS LOCK'
+            ),
+            letters2Key
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: 'letters-line' },
+            letters3Key
+          )
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'nums' },
+          _react2.default.createElement(
+            'div',
+            { className: 'nums-left clearfix' },
+            numsKey
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: 'nums-right clearfix' },
+            _react2.default.createElement(
+              'div',
+              { className: 'del key', onClick: this.keyClick.bind(this, 'delete') },
+              _react2.default.createElement(_index.Ticon, { type: 'tuige' })
+            ),
+            _react2.default.createElement(
+              'div',
+              { className: 'del key clear', onClick: this.keyClick.bind(this, 'clear') },
+              '\u6E05\u7A7A'
+            ),
+            _react2.default.createElement(
+              'div',
+              { className: 'del key sure', onClick: handleOk },
+              '\u786E',
+              _react2.default.createElement('br', null),
+              '\u5B9A'
+            )
+          )
+        ),
+        _react2.default.createElement(_index.Ticon, { type: 'guanbi-yuan', className: 'icon-close', onClick: handleCancel })
+      );
+    }
+  }]);
+  return OnlyLetterButton;
+}(_react.Component), _class.propTypes = {
+  onChange: _propTypes2.default.func.isRequired,
+  handleOk: _propTypes2.default.func.isRequired,
+  handleCancel: _propTypes2.default.func.isRequired
+}, _temp);
+exports.default = OnlyLetterButton;
+//# sourceMappingURL=onlyLetterButton.js.map

package/dist/components/keyboard/onlyLetterButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["tplus-components-touch/components/keyboard/onlyLetterButton.js"],"names":["OnlyLetterButton","props","keyClick","key","handleCancel","onChange","onMouseDown","e","preventDefault","capslockClick","setState","capslockFlag","state","letters1","letters1_1","letters2","letters2_1","letters3","letters3_1","nums","handleOk","numsKey","map","item","bind","letters1Key","letters2Key","letters3Key","Component","propTypes","PropTypes","func","isRequired"],"mappings":"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","file":"onlyLetterButton.js","sourcesContent":["/**\r\n * 只有字母键盘\r\n */\r\n\r\nimport React, { Component } from 'react';\r\nimport { Ticon } from '../../index';\r\nimport PropTypes from 'prop-types'\r\n\r\nexport default class OnlyLetterButton extends Component {\r\n\r\n  static propTypes = {\r\n    onChange: PropTypes.func.isRequired,\r\n    handleOk: PropTypes.func.isRequired,\r\n    handleCancel: PropTypes.func.isRequired\r\n  }\r\n\r\n  constructor(props) {\r\n    super();\r\n    this.state = {\r\n      letters1: ['Esc', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],\r\n      letters1_1: ['Esc', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],\r\n      letters2: ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],\r\n      letters2_1: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],\r\n      letters3: ['@', '&', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '-', '%'],\r\n      letters3_1: ['@', '&', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '-', '%'],\r\n      nums: ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0', '00', '.'],\r\n      capslockFlag: false,\r\n    }\r\n  }\r\n\r\n  keyClick = (key) => {\r\n    if (key == 'Esc') {\r\n      this.props.handleCancel && this.props.handleCancel();\r\n      return;\r\n    }\r\n    this.props.onChange && this.props.onChange(key);\r\n  }\r\n\r\n  onMouseDown = (e) => {\r\n    e.preventDefault();\r\n  }\r\n\r\n  capslockClick = () => {\r\n    this.setState({ capslockFlag: !this.state.capslockFlag })\r\n  }\r\n\r\n  render() {\r\n    const { handleOk, handleCancel } = this.props;\r\n    let { capslockFlag } = this.state;\r\n    let numsKey = this.state.nums.map((item) => <div className='num key' key={item} onClick={this.keyClick.bind(this, item)}>{item}</div>)\r\n    let letters1Key = (capslockFlag ? this.state.letters1_1 : this.state.letters1).map((item) => <div onClick={this.keyClick.bind(this, item)} className={`key letter ${item !== 'tab' && item!==\"TAB\" ? '' : 'disabled'}`} key={item}>{item}</div>)\r\n    let letters2Key = (capslockFlag ? this.state.letters2_1 : this.state.letters2).map((item) => <div onClick={this.keyClick.bind(this, item)} className='key letter' key={item}>{item}</div>)\r\n    let letters3Key = (capslockFlag ? this.state.letters3_1 : this.state.letters3).map((item) => <div onClick={this.keyClick.bind(this, item)} className='key letter' key={item}>{item}</div>)\r\n    return (\r\n        <div className='clearfix letters-box' onMouseDown={this.onMouseDown} >\r\n          <div className='letters'>\r\n            <div className='letters-line'>\r\n              {letters1Key}\r\n            </div>\r\n            <div className='letters-line'>\r\n              <div className={`key letter capslock ${capslockFlag ? '' :'capslock-small'}`} onClick={this.capslockClick}>{capslockFlag ? 'caps lock' : 'CAPS LOCK'}</div>\r\n              {letters2Key}\r\n            </div>\r\n            <div className='letters-line'>\r\n              {letters3Key}\r\n            </div>\r\n          </div>\r\n\r\n          <div className='nums'>\r\n            <div className='nums-left clearfix'>\r\n              {numsKey}\r\n            </div>\r\n            <div className='nums-right clearfix'>\r\n              <div className='del key' onClick={this.keyClick.bind(this, 'delete')}>\r\n                <Ticon type='tuige' />\r\n              </div>\r\n              <div className='del key clear' onClick={this.keyClick.bind(this, 'clear')}>清空</div>\r\n              <div className='del key sure' onClick={handleOk}>确<br />定</div>\r\n            </div>\r\n          </div>\r\n          <Ticon type=\"guanbi-yuan\" className='icon-close' onClick={handleCancel} />\r\n\r\n        </div>\r\n    )\r\n  }\r\n}"]}

package/dist/components/keyboard/onlyLetterButton2.js

@@ -0,0 +1,235 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _class, _temp; /**
+                    * 专为 product 写的键盘
+                    */
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _index = require('../../index');
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _mutantsMicrofx = require('mutants-microfx');
+
+require('./onlyLetterButton2.less');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var closeImgBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAslJREFUSA21Vr9vUlEYpbQEQkikaXBxshoXBRk0EH61tA5dDA000cWkSf8KZwd3N01cNOkgEEhMrAmWMEhC2kXThbaJrbaxIAUtRUrTCp7D85LX9j6wGL/kcH+87zvn3u/e9z0GdN1tGI+dgB2wARcA2h5QAlaAD8B3QGoD0lmdzor5u4AX0PIRoS10ssBr4IeYFK0s+CYezgFG4fSX7SH8ngMf1f6D6gH6E8AsMASc1xhzC6gDGyJYLcCVzwKyXQn/Xi1jrwNbQJHOev7AmPM54F/IyUMjB7nI2RHggZ4354zXMnKRsy3Aq8jbcsbW19dD6XR63Gg0SncWjUbdxWLxnsViEZlQc5BzmA+cgJRge3u7GgwGr0Fk8rRIMpn0zMzMOHZ3d3/WarWmmvlPn5xOCvAlktrU1FQml8tteDye0cXFxY5IIpHwhEKhG/l8vhAIBN5Kg5VJO1UeARe1nEwmkz6TyUy6XK7L2Wz2U6lUqk9PT7fJfT7fm3K5fKwVi/lvFHgCdD1gtQjJVldXC16vtxc5XQ9lh8MHJ6zRaDR3dnZqYhJ5r1er1V9i3K2lAAtXV4vH426kxb62tlZYWlraxOpHcfATBoNBejlUZHsUYFXUtFgs5g6Hww5c2SJyvjA2NvaOIuhfwcEHe4iUKMCSK7X5+fnbkUikTc6c44CPmC6KLC8vb/r9/qupVGpcGqxMrnCLfNEeA2e2C8L7lUqljqu4gBfqSIlRfs1msx5puuN0Oi/ZbLYX+/v7p8+EZfyhIH2AgU9NwL7Vah3CYR43m7L3SPEeGRkZ0riq7+HxclBx031BGwBOlGmmo9XiQrTt4OBAps5vw1OgIQQaGHwFWM/FrtDty7iiZ8BnRgsB9lm/+bFgPe9XhOSvgBzQNrUAJzaALcABnEgXxr2MaeHKO+QM0FopPxb/7aNPYWG8wiznrLh9/W35DRjk9s3Z3I9JAAAAAElFTkSuQmCC';
+var OnlyLetterButton2 = (_temp = _class = function (_Component) {
+  (0, _inherits3.default)(OnlyLetterButton2, _Component);
+
+  function OnlyLetterButton2(props) {
+    (0, _classCallCheck3.default)(this, OnlyLetterButton2);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (OnlyLetterButton2.__proto__ || (0, _getPrototypeOf2.default)(OnlyLetterButton2)).call(this));
+
+    _this.keyClick = function (key) {
+      if (key == 'tab' || key == "TAB") {
+        return;
+      }
+      if (key == '123') {
+        // 切换到数字键盘
+        _this.setState({
+          isLetter: false
+        }, function () {
+          _mutantsMicrofx.localStore.set(_this.props.id, 2);
+        });
+        return;
+      }
+      if (key == 'En') {
+        _this.setState({
+          isLetter: true
+        }, function () {
+          _mutantsMicrofx.localStore.set(_this.props.id, 1);
+        });
+        return;
+      }
+      _this.props.onChange && _this.props.onChange(key);
+    };
+
+    _this.onMouseDown = function (e) {
+      e.preventDefault();
+    };
+
+    _this.capslockClick = function () {
+      _this.setState({ capslockFlag: !_this.state.capslockFlag });
+    };
+
+    _this.state = {
+      letters1: ['@', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
+      letters1_1: ['@', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
+      letters2: ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
+      letters2_1: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
+      letters3: ['123', '&', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '-', '%'],
+      letters3_1: ['123', '&', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '-', '%'],
+      nums: ['7', '8', '9', '4', '5', '6', '1', '2', '3', 'En', '0', '.'],
+      capslockFlag: false,
+      isLetter: props.letterOrNumber == 1 ? true : false
+    };
+    return _this;
+  }
+
+  (0, _createClass3.default)(OnlyLetterButton2, [{
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          handleOk = _props.handleOk,
+          handleCancel = _props.handleCancel,
+          id = _props.id;
+      var _state = this.state,
+          capslockFlag = _state.capslockFlag,
+          isLetter = _state.isLetter;
+
+      var numsKey = this.state.nums.map(function (item) {
+        return _react2.default.createElement(
+          'div',
+          { className: 'num key pos-key ' + (item == '·' ? 'bold' : ''), key: item, onClick: _this2.keyClick.bind(_this2, item) },
+          _react2.default.createElement(
+            'span',
+            null,
+            item
+          )
+        );
+      });
+      var letters1Key = (capslockFlag ? this.state.letters1_1 : this.state.letters1).map(function (item) {
+        return _react2.default.createElement(
+          'div',
+          { onClick: _this2.keyClick.bind(_this2, item), className: 'key letter pos-key', key: item },
+          _react2.default.createElement(
+            'span',
+            null,
+            item
+          )
+        );
+      });
+      var letters2Key = (capslockFlag ? this.state.letters2_1 : this.state.letters2).map(function (item) {
+        return _react2.default.createElement(
+          'div',
+          { onClick: _this2.keyClick.bind(_this2, item), className: 'key letter pos-key', key: item },
+          _react2.default.createElement(
+            'span',
+            null,
+            item
+          )
+        );
+      });
+      var letters3Key = (capslockFlag ? this.state.letters3_1 : this.state.letters3).map(function (item) {
+        return _react2.default.createElement(
+          'div',
+          { onClick: _this2.keyClick.bind(_this2, item), className: 'key letter pos-key', key: item },
+          _react2.default.createElement(
+            'span',
+            null,
+            item
+          )
+        );
+      });
+      return _react2.default.createElement(
+        'div',
+        { className: 'clearfix letters-box product-keyboarde-botton', id: 'product-keyboard-button', onMouseDown: this.onMouseDown },
+        isLetter ? _react2.default.createElement(
+          'div',
+          { className: 'letters' },
+          _react2.default.createElement(
+            'div',
+            { className: 'letters-line' },
+            letters1Key
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: 'letters-line' },
+            _react2.default.createElement(
+              'div',
+              { className: 'key letter pos-key capslock ' + (capslockFlag ? '' : 'capslock-small'), onClick: this.capslockClick },
+              _react2.default.createElement(
+                'span',
+                null,
+                capslockFlag ? 'caps lock' : 'CAPS LOCK'
+              )
+            ),
+            letters2Key
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: 'letters-line' },
+            letters3Key
+          )
+        ) : _react2.default.createElement(
+          'div',
+          { className: 'nums' },
+          _react2.default.createElement(
+            'div',
+            { className: 'nums-left clearfix' },
+            numsKey
+          )
+        ),
+        _react2.default.createElement(
+          'div',
+          { className: 'handle ' + (isLetter ? '' : 'is-number') },
+          _react2.default.createElement(
+            'div',
+            { className: 'del key delete', onClick: this.keyClick.bind(this, 'delete') },
+            _react2.default.createElement(_index.Ticon, { type: 'tuige' })
+          ),
+          _react2.default.createElement(
+            'div',
+            { className: 'del pos-key clear', onClick: this.keyClick.bind(this, 'clear') },
+            '\u6E05\u7A7A'
+          ),
+          isLetter ? _react2.default.createElement(
+            'div',
+            { className: 'del pos-key sure', onClick: handleOk },
+            '\u786E\u5B9A'
+          ) : _react2.default.createElement(
+            'div',
+            { className: 'del pos-key sure', onClick: handleOk, style: { lineHeight: '24px' } },
+            '\u786E',
+            _react2.default.createElement('br', null),
+            '\u5B9A'
+          )
+        ),
+        _react2.default.createElement('img', { src: closeImgBase64, id: id, className: 'icon-close', onClick: handleCancel })
+      );
+    }
+  }]);
+  return OnlyLetterButton2;
+}(_react.Component), _class.propTypes = {
+  onChange: _propTypes2.default.func.isRequired,
+  handleOk: _propTypes2.default.func.isRequired,
+  handleCancel: _propTypes2.default.func.isRequired
+}, _temp);
+exports.default = OnlyLetterButton2;
+//# sourceMappingURL=onlyLetterButton2.js.map

package/dist/components/keyboard/onlyLetterButton2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["tplus-components-touch/components/keyboard/onlyLetterButton2.js"],"names":["closeImgBase64","OnlyLetterButton2","props","keyClick","key","setState","isLetter","localStore","set","id","onChange","onMouseDown","e","preventDefault","capslockClick","capslockFlag","state","letters1","letters1_1","letters2","letters2_1","letters3","letters3_1","nums","letterOrNumber","handleOk","handleCancel","numsKey","map","item","bind","letters1Key","letters2Key","letters3Key","lineHeight","Component","propTypes","PropTypes","func","isRequired"],"mappings":"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","file":"onlyLetterButton2.js","sourcesContent":["/**\r\n * 专为 product 写的键盘\r\n */\r\n\r\nimport React, { Component } from 'react';\r\nimport { Ticon } from '../../index';\r\nimport PropTypes from 'prop-types'\r\nimport { localStore } from 'mutants-microfx';\r\nimport './onlyLetterButton2.less';\r\nlet closeImgBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAslJREFUSA21Vr9vUlEYpbQEQkikaXBxshoXBRk0EH61tA5dDA000cWkSf8KZwd3N01cNOkgEEhMrAmWMEhC2kXThbaJrbaxIAUtRUrTCp7D85LX9j6wGL/kcH+87zvn3u/e9z0GdN1tGI+dgB2wARcA2h5QAlaAD8B3QGoD0lmdzor5u4AX0PIRoS10ssBr4IeYFK0s+CYezgFG4fSX7SH8ngMf1f6D6gH6E8AsMASc1xhzC6gDGyJYLcCVzwKyXQn/Xi1jrwNbQJHOev7AmPM54F/IyUMjB7nI2RHggZ4354zXMnKRsy3Aq8jbcsbW19dD6XR63Gg0SncWjUbdxWLxnsViEZlQc5BzmA+cgJRge3u7GgwGr0Fk8rRIMpn0zMzMOHZ3d3/WarWmmvlPn5xOCvAlktrU1FQml8tteDye0cXFxY5IIpHwhEKhG/l8vhAIBN5Kg5VJO1UeARe1nEwmkz6TyUy6XK7L2Wz2U6lUqk9PT7fJfT7fm3K5fKwVi/lvFHgCdD1gtQjJVldXC16vtxc5XQ9lh8MHJ6zRaDR3dnZqYhJ5r1er1V9i3K2lAAtXV4vH426kxb62tlZYWlraxOpHcfATBoNBejlUZHsUYFXUtFgs5g6Hww5c2SJyvjA2NvaOIuhfwcEHe4iUKMCSK7X5+fnbkUikTc6c44CPmC6KLC8vb/r9/qupVGpcGqxMrnCLfNEeA2e2C8L7lUqljqu4gBfqSIlRfs1msx5puuN0Oi/ZbLYX+/v7p8+EZfyhIH2AgU9NwL7Vah3CYR43m7L3SPEeGRkZ0riq7+HxclBx031BGwBOlGmmo9XiQrTt4OBAps5vw1OgIQQaGHwFWM/FrtDty7iiZ8BnRgsB9lm/+bFgPe9XhOSvgBzQNrUAJzaALcABnEgXxr2MaeHKO+QM0FopPxb/7aNPYWG8wiznrLh9/W35DRjk9s3Z3I9JAAAAAElFTkSuQmCC';\r\nexport default class OnlyLetterButton2 extends Component {\r\n\r\n  static propTypes = {\r\n    onChange: PropTypes.func.isRequired,\r\n    handleOk: PropTypes.func.isRequired,\r\n    handleCancel: PropTypes.func.isRequired\r\n  }\r\n\r\n  constructor(props) {\r\n    super();\r\n    this.state = {\r\n      letters1: ['@', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],\r\n      letters1_1: ['@', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],\r\n      letters2: ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],\r\n      letters2_1: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],\r\n      letters3: ['123', '&', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '-', '%'],\r\n      letters3_1: ['123', '&', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '-', '%'],\r\n      nums: ['7', '8', '9', '4', '5', '6', '1', '2', '3', 'En', '0', '.'],\r\n      capslockFlag: false,\r\n      isLetter: props.letterOrNumber == 1 ? true : false\r\n    }\r\n  }\r\n\r\n  keyClick = (key) => {\r\n    if (key == 'tab' || key == \"TAB\") {\r\n      return;\r\n    }\r\n    if (key == '123') { // 切换到数字键盘\r\n      this.setState({\r\n        isLetter: false\r\n      }, () => {\r\n        localStore.set(this.props.id, 2)\r\n      })\r\n      return;\r\n    }\r\n    if (key == 'En') {\r\n      this.setState({\r\n        isLetter: true\r\n      }, () => {\r\n        localStore.set(this.props.id, 1)\r\n      })\r\n      return;\r\n    }\r\n    this.props.onChange && this.props.onChange(key);\r\n  }\r\n\r\n  onMouseDown = (e) => {\r\n    e.preventDefault();\r\n  }\r\n\r\n  capslockClick = () => {\r\n    this.setState({ capslockFlag: !this.state.capslockFlag })\r\n  }\r\n\r\n  render() {\r\n    const { handleOk, handleCancel, id } = this.props;\r\n    let { capslockFlag, isLetter } = this.state;\r\n    let numsKey = this.state.nums.map((item) => <div className={`num key pos-key ${item == '·'? 'bold': ''}`} key={item} onClick={this.keyClick.bind(this, item)}><span>{item}</span></div>)\r\n    let letters1Key = (capslockFlag ? this.state.letters1_1 : this.state.letters1).map((item) => <div onClick={this.keyClick.bind(this, item)} className={`key letter pos-key`} key={item}><span>{item}</span></div>)\r\n    let letters2Key = (capslockFlag ? this.state.letters2_1 : this.state.letters2).map((item) => <div onClick={this.keyClick.bind(this, item)} className='key letter pos-key' key={item}><span>{item}</span></div>)\r\n    let letters3Key = (capslockFlag ? this.state.letters3_1 : this.state.letters3).map((item) => <div onClick={this.keyClick.bind(this, item)} className='key letter pos-key' key={item}><span>{item}</span></div>)\r\n    return (\r\n        <div className='clearfix letters-box product-keyboarde-botton' id='product-keyboard-button' onMouseDown={this.onMouseDown} >\r\n          {\r\n            isLetter ?\r\n              <div className='letters'>\r\n                <div className='letters-line'>\r\n                  {letters1Key}\r\n                </div>\r\n                <div className='letters-line'>\r\n                  <div className={`key letter pos-key capslock ${capslockFlag ? '' :'capslock-small'}`} onClick={this.capslockClick}><span>{capslockFlag ? 'caps lock' : 'CAPS LOCK'}</span></div>\r\n                  {letters2Key}\r\n                </div>\r\n                <div className='letters-line'>\r\n                  {letters3Key}\r\n                </div>\r\n              </div>\r\n              :\r\n              <div className='nums'>\r\n                <div className='nums-left clearfix'>\r\n                  {numsKey}\r\n                </div>\r\n              </div>\r\n          }\r\n\r\n            <div className={`handle ${isLetter? '' : 'is-number'}`}>\r\n              <div className='del key delete' onClick={this.keyClick.bind(this, 'delete')}>\r\n                <Ticon type='tuige' />\r\n              </div>\r\n              <div className='del pos-key clear' onClick={this.keyClick.bind(this, 'clear')}>清空</div>\r\n              {\r\n                isLetter ?\r\n                <div className='del pos-key sure' onClick={handleOk}>确定</div>\r\n                :\r\n                <div className='del pos-key sure' onClick={handleOk} style={{lineHeight: '24px'}}>确<br />定</div>\r\n              }\r\n            </div>\r\n          <img src={closeImgBase64} id={id}  className='icon-close' onClick={handleCancel}  />\r\n        </div>\r\n    )\r\n  }\r\n}"]}

package/dist/components/keyboard/onlyLetterButton2.less

@@ -0,0 +1,162 @@
+@keyboard-active-color: rgba(255,140,37,0.6);
+@keyboard-font-color: #333;
+@themeColor: #FF8C25;
+.product-keyboarde-botton.letters-box {
+
+    display: flex;
+    justify-content: space-around;
+    // min-width: 766px;
+    position: relative;
+    padding-top: 19px;
+    background: rgba(0, 0, 0, .6);
+  .letters {
+    max-width: 680px;
+    width:81%;
+
+    .letters-line {
+      height: 70px;
+      width: 100%;
+      overflow: hidden;
+
+      .disabled {
+        background: #999;
+      }
+
+      .letter:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .capslock {
+    max-width: 124px !important;
+    width: 18%!important;
+    font-weight: 700;
+    padding: 0 4px;
+    span {
+      display: flex;
+      height: 100%;
+      font-size: 18px;
+      border-radius: 6px;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+
+  .capslock-small {
+    font-size: 16px !important;
+  }
+
+  .nums {
+    max-width: 493px;
+    float: right;
+    width: 70%;
+
+    .nums-left {
+      float: left;
+      width: 100%;
+
+      .num {
+        height: 40px;
+        margin: 0 0px 8px 0;
+        max-width: 164px;
+        padding: 0 12px;
+        line-height: 40px;
+        min-width: 33%;
+      }
+    }
+
+    .nums-right {
+      float: right;
+      width: 60px;
+
+      .del {
+        height: 35px;
+        margin: 0 8px 8px 0;
+
+      }
+
+      .sure {
+        border-radius: 10px;
+      }
+    }
+  }
+
+  .key {
+    max-width: 62px;
+    width: 9%;
+    height: 52px;
+    box-sizing: border-box;
+    float: left;
+    padding: 0 4px;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+    // border: 1px solid #FF8C25;
+    // box-shadow: 0 2px 4px 0 rgba(242, 157, 14, 0.30);
+    ;
+    border-radius: 6px;
+    span {
+      display: flex;
+      height: 100%;
+      font-size: 18px;
+      border-radius: 6px;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+
+  .handle {
+    width: 54px;
+    .del {
+      float: none;
+      width: 54px;
+      height: 52px;
+      box-sizing: border-box;
+      float: left;
+      margin: 0 8px 18px 0;
+      text-align: center;
+      line-height: 52px;
+      font-size: 18px;
+      border-radius: 6px;
+      cursor: pointer;
+      user-select: none;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      border-radius: 6px;
+    }
+    .clear {
+      font-size: 16px;
+    }
+  }
+  .is-number {
+    .delete {
+      height: 40px;
+      line-height: 40px;
+      margin: 0 8px 8px 0;
+    }
+    .clear {
+      height: 40px;
+      line-height: 40px;
+      margin: 0 8px 8px 0;
+    }
+    .sure {
+      height: 90px;
+      line-height: 90px;
+    }
+
+  }
+  .bold {
+    font-weight: 700;
+  }
+
+  .icon-close {
+    width: 24px;
+    height: 24px;
+    position: absolute;
+    top: -12px;
+    right: 8px;
+    cursor: pointer;
+  }
+}