tplus-components-touch 3.22.16 → 3.22.20

package/dist/components/keyboard/index.less

@@ -0,0 +1,470 @@
+.keyboard.no-bordered {
+  input {
+    border: none!important;
+    &:focus {
+      border: none!important;
+    }
+  }
+
+}
+#product-keyboard{
+  z-index:1300!important;
+}
+.keyboard {
+  .ant-input-affix-wrapper{
+    padding: 2.5px 10px;
+  }
+
+  .keyboard-icon {
+    // width: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0!important;
+    right: 10px!important;
+    cursor: pointer;
+  }
+}
+.num-keyboard-popover-click {
+  margin-left: 383px!important;
+  margin-top: -29px!important;
+}
+.num-keyboard-popover-focus {
+  margin-left: -50px!important;
+  margin-top: 5px!important;
+}
+.num-keyboard-popover {
+  // numberKeyboard
+  width: 320px;
+  height: 226px;
+  background: none!important;
+  .ant-popover-arrow {
+    display: none!important;
+    &:after {
+      display: none;
+    }
+  }
+  .ant-popover-inner {
+    max-width: none!important;
+    background: rgba(0,0,0,0.60)!important;
+    border-radius: 6px!important;
+    border:none!important;
+    .ant-popover-inner-content {
+      height: 100%;
+      padding: 18px 14px 10px!important;
+
+      .key {
+        box-sizing: border-box;
+        text-align: center;
+        line-height: 60px;
+        width: 54px;
+        height: 35px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        border-radius: 6px;
+        font-size: 14px;
+        cursor: pointer;
+      }
+
+      .nums {
+        width: 208px;
+        float: left;
+        margin-left: 5px;
+
+        .num {
+          float: left;
+          margin: 0 10px 10px 0px;
+        }
+      }
+
+      .dels {
+        float: left;
+        width: 60px;
+
+        .del {
+          margin-bottom: 10px;
+        }
+
+        .sure {
+          height: 80px;
+          line-height: 22px;
+          padding-top: 5px;
+        }
+        .clear{
+          height: 80px;
+          line-height: 22px;
+          padding-top: 5px;
+        }
+        .real-sure {
+          border-radius: 5px;
+        }
+        .positive {
+          height: 125px;
+          line-height: 35px;
+        }
+      }
+    }
+  }
+
+}
+
+.letter-small {
+  height: 224px;
+  top: auto !important;
+}
+
+.letter-keyboard-modal {
+  width: 100% !important;
+  margin: 0 !important;
+  div {
+    box-sizing: border-box;
+  }
+
+  .letters-box {
+    display: flex;
+    justify-content: space-around;
+    min-width: 1008px;
+    width: 100%;
+    position: relative;
+  }
+
+  .letters {
+    width: 680px;
+    float: left;
+
+    .letters-line {
+      height: 60px;
+
+      .letter:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .capslock {
+    width: 116px !important;
+  }
+
+  .nums {
+    width: 268px;
+    float: right;
+
+    .nums-left {
+      float: left;
+      width: 188px;
+
+      .num {
+        height: 35px;
+        margin: 0 8px 8px 0;
+      }
+    }
+
+    .nums-right {
+      float: right;
+      width: 60px;
+
+      .del {
+        height: 35px;
+        margin: 0 8px 8px 0;
+      }
+
+      .sure {
+        height: 76px;
+        border-radius: 10px;
+      }
+    }
+  }
+
+  .key {
+    width: 54px;
+    height: 42px;
+    box-sizing: border-box;
+    float: left;
+    margin: 0 8px 18px 0;
+    text-align: center;
+    line-height: 51px;
+    font-size: 14px;
+    border-radius: 6px;
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-radius: 6px;
+  }
+
+  .icon-close {
+    position: absolute;
+    top: -15px;
+    right: 10px;
+    cursor: pointer;
+    font-size: 30px;
+    color: #FFF ;
+  }
+}
+
+.keyboard-text {
+  text-align: center;
+}
+
+.text-keyboard-modal,
+.text-keyboard {
+  .key {
+    box-sizing: border-box;
+    text-align: center;
+    line-height: 60px;
+    width: 54px;
+    height: 35px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    border-radius: 6px;
+    font-size: 14px;
+    cursor: pointer;
+
+    &:active {
+      color: white;
+      border-radius: 5px;
+//       background: #000000;
+//       opacity: 0.5;
+    }
+  }
+  .number-point {
+    display: inline-block;
+    line-height: 25px;
+  }
+
+  .nums {
+    width: 192px;
+    float: left;
+
+    .num {
+      float: left;
+      margin: 0 8px 8px 0px;
+    }
+  }
+
+  .dels {
+    float: right;
+    width: 54px;
+
+    .del {
+      margin-bottom: 8px;
+      font-size: 16px;
+    }
+
+    .sure {
+      height: 78px;
+      border-radius: 5px;
+    }
+    .positive {
+      height: 120px!important;
+      line-height: 30px!important;
+    }
+    .sure-no-positive {
+      line-height: 33px;
+      width: 54px;
+      height: 35px;
+    }
+  }
+
+  .icon-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+
+.only-number-button-content {
+  width: 224px;
+  height: 264px;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  position: relative;
+  .only-number-button-content-inner {
+    position: absolute;
+    bottom: 6px;
+    left: 0;
+    width: 166px;
+    height: 60px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .key {
+    width: 50px;
+    height: 60px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 20px;
+    border: 1px solid #999999;
+    border-radius: 6px;
+    line-height: 24px;
+  }
+}
+
+.number-keyboard-input {
+  width: 256px;
+  margin: 0 auto;
+  .keyboard-input {
+    border: none!important;
+  }
+}
+
+.clearfix {
+  zoom: 1
+}
+
+.clearfix:after,
+.clearfix:before {
+  content: " ";
+  display: table
+}
+
+.clearfix:after {
+  clear: both;
+  visibility: hidden;
+  font-size: 0;
+  height: 0
+}
+
+.z-letter-keyboard-modal.modal-container.big {
+  background: rgba(0,0,0,0);
+  top: 0;
+  height: auto;
+}
+@keyframes keyboard
+{
+  0%   {height:0; }
+  100% {height:224px; }
+}
+
+.z-letter-keyboard-modal.modal-container {
+
+  div {
+    box-sizing: border-box;
+  }
+  background: rgba(0, 0, 0, 0);
+  height: 224px;
+  top: inherit;
+  z-index:999999;
+
+  .z-letter-keyboard-modal-body {
+    width: 100%;
+    background: rgba(0,0,0,0.50);
+    border-radius: 0;
+    min-width: 1009px;
+    position: absolute;
+    bottom: 0;
+    top: auto;
+    height: 224px;
+    animation-timing-function: ease-in-out;
+    padding: 20px 0;
+    animation:keyboard .2s;
+    .letters-box {
+      display: flex;
+      justify-content: space-around;
+      min-width: 1008px;
+      position: relative;
+    }
+
+    .letters {
+      width: 680px;
+      float: left;
+
+      .letters-line {
+        height: 60px;
+        .disabled {
+          background: #999;
+        }
+
+        .letter:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+
+    .capslock {
+      width: 116px !important;
+    }
+    .capslock-small {
+      font-size: 16px!important;
+    }
+
+    .nums {
+      width: 268px;
+      float: right;
+
+      .nums-left {
+        float: left;
+        width: 188px;
+
+        .num {
+          height: 40px;
+          margin: 0 8px 8px 0;
+        }
+      }
+
+      .nums-right {
+        float: right;
+        width: 60px;
+
+        .del {
+          height: 40px;
+          margin: 0 8px 8px 0;
+        }
+
+        .sure {
+          height: 88px;
+          border-radius: 10px;
+        }
+      }
+    }
+
+    .key {
+      width: 54px;
+      height: 50px;
+      box-sizing: border-box;
+      float: left;
+      margin: 0 8px 18px 0;
+      text-align: center;
+      line-height: 54px;
+      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;
+    }
+    .sure {
+      line-height: 28px;
+    }
+
+    .icon-close {
+      position: absolute;
+      top: -15px;
+      right: 10px;
+      cursor: pointer;
+      font-size: 30px;
+      color: #FFF ;
+    }
+  }
+}
+.text-keyboard-tooltip {
+  width: auto!important;
+}
+
+@media screen and (max-width: 1200px) {
+  .z-letter-keyboard-modal.modal-container .icon-close {
+      top: -50px!important;
+      color: #CCC!important;
+  }
+}

package/dist/components/keyboard/letterKeyboard.js

@@ -0,0 +1,210 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = undefined;
+
+var _input = require('antd/es/input');
+
+var _input2 = _interopRequireDefault(_input);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+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; /**
+                    * input + letterKeyboard
+                    */
+
+require('antd/es/input/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _mutantsUtil = require('mutants-util');
+
+var _index = require('./index');
+
+var _index2 = _interopRequireDefault(_index);
+
+var _index3 = require('../../index');
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var LetterKeyboard = (_temp = _class = function (_Component) {
+  (0, _inherits3.default)(LetterKeyboard, _Component);
+
+  function LetterKeyboard(props) {
+    (0, _classCallCheck3.default)(this, LetterKeyboard);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (LetterKeyboard.__proto__ || (0, _getPrototypeOf2.default)(LetterKeyboard)).call(this, props));
+
+    _this.inputChange = function (e) {
+      _this.setState({
+        value: e.target.value
+      });
+      _this.props.onChange && _this.props.onChange(e.target.value);
+    };
+
+    _this.showModal = function () {
+      _this.setState({
+        visible: !_this.state.visible
+      });
+      _this.input.input.focus();
+    };
+
+    _this.handleOk = function (e) {
+      _this.props.handleOk && _this.props.handleOk(_this.getShowValue());
+      _this.showModal();
+    };
+
+    _this.handleCancel = function (e) {
+      _this.props.handleCancel && _this.props.handleCancel(_this.getShowValue());
+      _this.showModal();
+    };
+
+    _this.setStateValue = function (key) {
+      var newValue = _index2.default.getNewValue(_this.input.input, _this.getShowValue(), key);
+      _this.setState({
+        value: newValue
+      }, function () {
+        _this.props.onChange && _this.props.onChange(newValue);
+      });
+    };
+
+    _this.getKeyboardIcon = function () {
+      return _this.state.visible ? _react2.default.createElement(_index3.Ticon, { type: 'jianpan1', style: { color: '#999' } }) : _react2.default.createElement(_index3.Ticon, { type: 'jianpan2', style: { color: '#999' } });
+    };
+
+    _this.iconShowModal = function () {
+      if (_this.props.disabled) {
+        return;
+      }
+      _this.showModal();
+    };
+
+    _this.getShowValue = function () {
+      return _this.props.value == undefined ? _this.state.value : _this.props.value;
+    };
+
+    _this.inputBlur = function () {
+      _this.setState({
+        visible: false
+      });
+    };
+
+    _this.inputFocus = function () {
+      _this.props.onFocus && _this.props.onFocus(_this.input);
+      if (_this.props.which == 'icon') {
+        return;
+      }
+      _this.showModal();
+    };
+
+    _this.inputKeyDown = function (e) {
+      if (e.keyCode == 13) {
+        // 按下回车按钮
+        _this.props.handleEnter && _this.props.handleEnter(_this.getShowValue());
+      }
+    };
+
+    _this.state = {
+      visible: false,
+      value: props.value || ''
+    };
+
+    var _ref = _mutantsUtil.platform || {},
+        isHorizontalPad = _ref.isHorizontalPad;
+
+    _this.isMobileEnvironment = !!isHorizontalPad;
+    return _this;
+  }
+
+  (0, _createClass3.default)(LetterKeyboard, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.props.onRef && this.props.onRef(this);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _props = (0, _extends3.default)({}, this.props),
+          prefix = _props.prefix,
+          which = _props.which,
+          onRef = _props.onRef,
+          props = (0, _objectWithoutProperties3.default)(_props, ['prefix', 'which', 'onRef']);
+
+      var value = this.getShowValue();
+      return _react2.default.createElement(
+        'div',
+        { className: 'keyboard' },
+        _react2.default.createElement(
+          _input2.default.Group,
+          { className: 'keyboard-input' },
+          _react2.default.createElement(_input2.default, (0, _extends3.default)({ type: 'text'
+          }, props, {
+            prefix: prefix ? _react2.default.createElement(_index3.Ticon, { type: prefix, className: 'search-icon' }) : null,
+            onChange: this.inputChange,
+            onFocus: this.inputFocus,
+            onBlur: this.inputBlur,
+            onKeyDown: this.inputKeyDown,
+            value: this.props.value,
+            ref: function ref(input) {
+              return _this2.input = input;
+            },
+            allowClear: this.isMobileEnvironment,
+            suffix: which == 'icon' && !this.isMobileEnvironment ? _react2.default.createElement(
+              'span',
+              { className: 'keyboard-icon', onMouseDown: function onMouseDown(e) {
+                  return e.preventDefault();
+                }, onClick: this.iconShowModal },
+              this.getKeyboardIcon()
+            ) : null
+          }))
+        ),
+        !this.isMobileEnvironment && _react2.default.createElement(_index2.default, { type: 'letter+modal', value: value, visible: this.state.visible, onChange: this.setStateValue, handleOk: this.handleOk, handleCancel: this.handleCancel })
+      );
+    }
+  }]);
+  return LetterKeyboard;
+}(_react.Component), _class.propTypes = {
+  onChange: _propTypes2.default.func.isRequired,
+  handleOk: _propTypes2.default.func,
+  handleCancel: _propTypes2.default.func,
+  placeholder: _propTypes2.default.string,
+  which: _propTypes2.default.string // 是否要 通过 icon 来触发键盘弹出
+}, _temp);
+exports.default = LetterKeyboard;
+//# sourceMappingURL=letterKeyboard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["tplus-components-touch/components/keyboard/letterKeyboard.js"],"names":["LetterKeyboard","props","inputChange","e","setState","value","target","onChange","showModal","visible","state","input","focus","handleOk","getShowValue","handleCancel","setStateValue","key","newValue","Keyboard","getNewValue","getKeyboardIcon","color","iconShowModal","disabled","undefined","inputBlur","inputFocus","onFocus","which","inputKeyDown","keyCode","handleEnter","platform","isHorizontalPad","isMobileEnvironment","onRef","prefix","preventDefault","Component","propTypes","PropTypes","func","isRequired","placeholder","string"],"mappings":"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","file":"letterKeyboard.js","sourcesContent":["/**\r\n * input + letterKeyboard\r\n */\r\n\r\nimport React, { Component } from 'react';\r\nimport { Input } from 'antd';\r\nimport { platform } from 'mutants-util';\r\nimport Keyboard from './index';\r\nimport { Ticon } from '../../index';\r\nimport PropTypes from 'prop-types';\r\n\r\nexport default class LetterKeyboard extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      visible: false,\r\n      value: props.value || ''\r\n    }\r\n    const { isHorizontalPad } = platform || {};\r\n    this.isMobileEnvironment = !!isHorizontalPad;\r\n  }\r\n\r\n  static propTypes = {\r\n    onChange: PropTypes.func.isRequired,\r\n    handleOk: PropTypes.func,\r\n    handleCancel: PropTypes.func,\r\n    placeholder: PropTypes.string,\r\n    which: PropTypes.string // 是否要 通过 icon 来触发键盘弹出\r\n  }\r\n\r\n  inputChange = (e) => {\r\n    this.setState({\r\n      value: e.target.value\r\n    })\r\n    this.props.onChange && this.props.onChange(e.target.value);\r\n  }\r\n\r\n  showModal = () => {\r\n    this.setState({\r\n      visible: !this.state.visible\r\n    });\r\n    this.input.input.focus();\r\n  }\r\n\r\n  handleOk = (e) => {\r\n    this.props.handleOk && this.props.handleOk(this.getShowValue());\r\n    this.showModal();\r\n  }\r\n\r\n  handleCancel = (e) => {\r\n    this.props.handleCancel && this.props.handleCancel(this.getShowValue());\r\n    this.showModal()\r\n  }\r\n\r\n  setStateValue = (key) => {\r\n    let newValue = Keyboard.getNewValue(this.input.input, this.getShowValue(), key);\r\n    this.setState({\r\n      value: newValue\r\n    }, () => {\r\n      this.props.onChange && this.props.onChange(newValue);\r\n    })\r\n  }\r\n\r\n  getKeyboardIcon = () => {\r\n    return (\r\n      this.state.visible ?\r\n        <Ticon type='jianpan1' style={{ color: '#999' }} />\r\n        :\r\n        <Ticon type='jianpan2' style={{ color: '#999' }} />\r\n    )\r\n  }\r\n\r\n  iconShowModal = () => {\r\n    if (this.props.disabled) {\r\n      return;\r\n    }\r\n    this.showModal();\r\n  }\r\n\r\n  getShowValue = () => {\r\n    return this.props.value == undefined ? this.state.value : this.props.value;\r\n  }\r\n\r\n  inputBlur = () => {\r\n    this.setState({\r\n      visible: false\r\n    })\r\n  }\r\n\r\n  inputFocus = () => {\r\n    this.props.onFocus && this.props.onFocus(this.input)\r\n    if (this.props.which == 'icon') {\r\n      return;\r\n    }\r\n    this.showModal();\r\n  }\r\n\r\n  inputKeyDown = (e) => {\r\n    if (e.keyCode == 13) { // 按下回车按钮\r\n      this.props.handleEnter && this.props.handleEnter(this.getShowValue());\r\n    }\r\n  }\r\n\r\n  componentDidMount() {\r\n    this.props.onRef && this.props.onRef(this);\r\n  }\r\n\r\n  render() {\r\n    let { prefix, which, onRef, ...props } = { ...this.props };\r\n    let value = this.getShowValue();\r\n    return (\r\n      <div className='keyboard'>\r\n        {\r\n          <Input.Group className='keyboard-input'>\r\n              <Input type=\"text\"\r\n                 {...props}\r\n                 prefix={prefix ? <Ticon type={prefix} className='search-icon' /> : null}\r\n                 onChange={this.inputChange}\r\n                 onFocus={this.inputFocus}\r\n                 onBlur={this.inputBlur}\r\n                 onKeyDown={this.inputKeyDown}\r\n                 value={this.props.value}\r\n                 ref={input => this.input = input}\r\n                 allowClear={this.isMobileEnvironment}\r\n                 suffix={which == 'icon' && !this.isMobileEnvironment ?\r\n                     <span className='keyboard-icon' onMouseDown={e => e.preventDefault()} onClick={this.iconShowModal}>\r\n                       {\r\n                         this.getKeyboardIcon()\r\n                       }\r\n                     </span>\r\n                     :\r\n                     null}\r\n              />\r\n          </Input.Group>\r\n        }\r\n        {\r\n          !this.isMobileEnvironment &&\r\n          <Keyboard type='letter+modal' value={value} visible={this.state.visible} onChange={this.setStateValue} handleOk={this.handleOk} handleCancel={this.handleCancel} />\r\n        }\r\n      </div>\r\n    )\r\n  }\r\n}"]}