tplus-components-touch 3.28.2 → 3.28.3

package/dist/components/autoCompleteWithKeyboard/index.js

@@ -0,0 +1,231 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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; /**
+                    *
+                    * @param type 值为 search 时，input 前有放大镜 icon
+                    * @param placeholder
+                    * @param onSelect
+                    * @param onClick
+                    * @param onChange
+                    * @param clearAfterSelect // 是否 点击下拉列表后，情况输入框
+                    * @param style
+                    * @param className
+                   */
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _index = require('../../index');
+
+var _option = require('../autoComplete/option');
+
+var _option2 = _interopRequireDefault(_option);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _mutantsUtil = require('mutants-util');
+
+require('./index.less');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var AutoCompleteWithKeyboard = (_temp = _class = function (_React$Component) {
+  (0, _inherits3.default)(AutoCompleteWithKeyboard, _React$Component);
+
+  function AutoCompleteWithKeyboard() {
+    (0, _classCallCheck3.default)(this, AutoCompleteWithKeyboard);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (AutoCompleteWithKeyboard.__proto__ || (0, _getPrototypeOf2.default)(AutoCompleteWithKeyboard)).call(this));
+
+    _this.handleInputFocus = function () {
+      if (_this.isHorizontalPad) return;
+      setTimeout(function () {
+        var guideModal = document.getElementsByClassName('guide-select')[0];
+        if (!guideModal) return;
+        var input = guideModal.getElementsByTagName('input')[0];
+        if (_this.isHorizontalSunMi) {
+          if (input) setTimeout(function () {
+            console.log('导购员autoCompWithKeyBo==Focus==');input.focus();input.click();
+          }, 250);
+        } else {
+          if (input) {
+            console.log('导购员autoCompWithKeyBo==Focus==');input.focus();input.click();
+          }
+        }
+      }, 0);
+    };
+
+    _this.onChange = function (v) {
+      _this.props.onChange && _this.props.onChange(v);
+      _this.setState({
+        value: true
+      });
+    };
+
+    _this.onKeyDown = function (e) {
+      _this.props.onKeyDown && _this.props.onKeyDown(e);
+    };
+
+    _this.onClick = function (v) {
+      _this.props.onClick && _this.props.onClick(v);
+    };
+
+    _this.iconRigthClick = function () {
+      _this.setState({
+        visible: !_this.state.visible
+      });
+    };
+
+    _this.onSelect = function (v) {
+      _this.props.onSelect && _this.props.onSelect(v);
+      _this.setState({
+        visible: false
+      });
+    };
+
+    _this.keyboardChange = function (key) {
+      var newValue = _index.Keyboard.getNewValue(_this.auto.input.input, _this.auto.getValue(), key);
+      _this.auto.outSideChangeValue(newValue);
+      _this.props.onChange && _this.props.onChange(newValue);
+    };
+
+    _this.keyboardOk = function () {
+      _this.setState({
+        visible: false
+      });
+    };
+
+    _this.autoCompleteBlur = function () {
+      _this.setState({
+        visible: false
+      });
+      _this.props.onBlur && _this.props.onBlur();
+    };
+
+    _this.getValue = function () {
+      return _this.auto.getValue();
+    };
+
+    _this.state = {
+      visible: false
+      //移动端PAD环境下，没有读取IC卡的方式。
+    };
+    var _ref = _mutantsUtil.platform || {},
+        isHorizontalPad = _ref.isHorizontalPad,
+        isHorizontalSunMi = _ref.isHorizontalSunMi;
+
+    _this.isHorizontalPad = !!isHorizontalPad;
+    _this.isHorizontalSunMi = !!isHorizontalSunMi;
+    return _this;
+  }
+
+  (0, _createClass3.default)(AutoCompleteWithKeyboard, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.handleInputFocus();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          placeholder = _props.placeholder,
+          children = _props.children,
+          _props$type = _props.type,
+          type = _props$type === undefined ? '' : _props$type,
+          _props$clearAfterSele = _props.clearAfterSelect,
+          clearAfterSelect = _props$clearAfterSele === undefined ? false : _props$clearAfterSele,
+          _props$maxHeight = _props.maxHeight,
+          maxHeight = _props$maxHeight === undefined ? "300px" : _props$maxHeight,
+          style = _props.style,
+          className = _props.className,
+          bottomTouchEvent = _props.bottomTouchEvent,
+          showDropDownPanel = _props.showDropDownPanel;
+      var visible = this.state.visible;
+
+      return _react2.default.createElement(
+        'div',
+        { className: 'tab-search' },
+        _react2.default.createElement(
+          _index.AutoComplete,
+          {
+            showDropDownPanel: showDropDownPanel,
+            placeholder: placeholder,
+            onSelect: this.onSelect,
+            onClick: this.onClick,
+            iconRigthClick: this.iconRigthClick,
+            ref: function ref(auto) {
+              return _this2.auto = auto;
+            },
+            onChange: this.onChange,
+            onKeyDown: this.onKeyDown,
+            onBlur: this.autoCompleteBlur,
+            type: type,
+            clearAfterSelect: clearAfterSelect,
+            maxHeight: maxHeight,
+            style: style,
+            className: className,
+            bottomTouchEvent: bottomTouchEvent,
+            icon: this.isHorizontalPad ? '' : visible ? 'jianpan1' : 'jianpan2'
+          },
+          children
+        ),
+        _react2.default.createElement(_index.Keyboard, { type: 'letter+modal',
+          visible: this.isHorizontalPad ? false : visible,
+          onChange: this.keyboardChange,
+          handleOk: this.keyboardOk,
+          handleCancel: this.keyboardOk
+        })
+      );
+    }
+  }]);
+  return AutoCompleteWithKeyboard;
+}(_react2.default.Component), _class.propTypes = {
+  type: _propTypes2.default.string,
+  placeholder: _propTypes2.default.string,
+  onSelect: _propTypes2.default.func,
+  onClick: _propTypes2.default.func,
+  onChange: _propTypes2.default.func,
+  onKeyDown: _propTypes2.default.func,
+  clearAfterSelect: _propTypes2.default.bool,
+  style: _propTypes2.default.object,
+  className: _propTypes2.default.string
+}, _temp);
+
+AutoCompleteWithKeyboard.Option = _option2.default;
+exports.default = AutoCompleteWithKeyboard;
+
+/**
+ * onChange
+ * onClick
+ * onSelect
+ */
+//# sourceMappingURL=index.js.map

package/dist/components/autoCompleteWithKeyboard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["tplus-components-touch/components/autoCompleteWithKeyboard/index.js"],"names":["AutoCompleteWithKeyboard","handleInputFocus","isHorizontalPad","setTimeout","guideModal","document","getElementsByClassName","input","getElementsByTagName","isHorizontalSunMi","console","log","focus","click","onChange","v","props","setState","value","onKeyDown","e","onClick","iconRigthClick","visible","state","onSelect","keyboardChange","key","newValue","Keyboard","getNewValue","auto","getValue","outSideChangeValue","keyboardOk","autoCompleteBlur","onBlur","platform","placeholder","children","type","clearAfterSelect","maxHeight","style","className","bottomTouchEvent","showDropDownPanel","React","Component","propTypes","PropTypes","string","func","bool","object","Option"],"mappings":"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","file":"index.js","sourcesContent":["/**\n *\n * @param type 值为 search 时，input 前有放大镜 icon\n * @param placeholder\n * @param onSelect\n * @param onClick\n * @param onChange\n * @param clearAfterSelect // 是否 点击下拉列表后，情况输入框\n * @param style\n * @param className\n*/\n\n\n\nimport React from 'react';\nimport { Keyboard, AutoComplete } from '../../index';\nimport Option from '../autoComplete/option';\nimport PropTypes from 'prop-types'\nimport { platform } from 'mutants-util';\nimport './index.less';\n\nclass AutoCompleteWithKeyboard extends React.Component {\n\n  static propTypes = {\n    type: PropTypes.string,\n    placeholder: PropTypes.string,\n    onSelect: PropTypes.func,\n    onClick: PropTypes.func,\n    onChange: PropTypes.func,\n    onKeyDown: PropTypes.func,\n    clearAfterSelect: PropTypes.bool,\n    style: PropTypes.object,\n    className: PropTypes.string\n  }\n\n  constructor() {\n    super();\n    this.state = {\n      visible: false\n    }\n    //移动端PAD环境下，没有读取IC卡的方式。\n    const { isHorizontalPad, isHorizontalSunMi } = platform || {};\n    this.isHorizontalPad = !!isHorizontalPad;\n    this.isHorizontalSunMi = !!isHorizontalSunMi;\n  }\n\n  handleInputFocus = () => {\n    if (this.isHorizontalPad) return;\n    setTimeout(() => {\n      const guideModal = document.getElementsByClassName('guide-select')[0];\n      if (!guideModal) return;\n      const input = guideModal.getElementsByTagName('input')[0];\n      if (this.isHorizontalSunMi) {\n        if (input) setTimeout(() => { console.log('导购员autoCompWithKeyBo==Focus==');input.focus();input.click(); }, 250);\n      } else {\n        if (input) {console.log('导购员autoCompWithKeyBo==Focus==');input.focus();input.click();}\n      }\n    }, 0);\n  }\n\n  componentDidMount() {\n    this.handleInputFocus()\n  }\n\n  onChange = (v) => {\n    this.props.onChange && this.props.onChange(v);\n    this.setState({\n      value: true\n    })\n  }\n\n  onKeyDown = (e) => {\n    this.props.onKeyDown && this.props.onKeyDown(e);\n  }\n\n  onClick = (v) => {\n    this.props.onClick && this.props.onClick(v)\n  }\n\n  iconRigthClick = () => {\n    this.setState({\n      visible: !this.state.visible\n    })\n  }\n\n  onSelect = (v) => {\n    this.props.onSelect && this.props.onSelect(v);\n    this.setState({\n      visible: false\n    })\n  }\n\n  keyboardChange = (key) => {\n    let newValue = Keyboard.getNewValue(this.auto.input.input, this.auto.getValue(), key);\n    this.auto.outSideChangeValue(newValue);\n    this.props.onChange && this.props.onChange(newValue);\n  }\n\n  keyboardOk = () => {\n    this.setState({\n      visible: false\n    })\n  }\n\n  autoCompleteBlur = () => {\n    this.setState({\n      visible: false\n    })\n    this.props.onBlur && this.props.onBlur()\n  }\n\n  getValue = () => {\n    return this.auto.getValue();\n  }\n\n  render() {\n    let { placeholder, children, type = '', clearAfterSelect = false, maxHeight = \"300px\", style, className, bottomTouchEvent,showDropDownPanel } = this.props;\n    let { visible } = this.state;\n    return (\n      <div className='tab-search'>\n        <AutoComplete\n          showDropDownPanel={showDropDownPanel}\n          placeholder={placeholder}\n          onSelect={this.onSelect}\n          onClick={this.onClick}\n          iconRigthClick={this.iconRigthClick}\n          ref={auto => this.auto = auto}\n          onChange={this.onChange}\n          onKeyDown={this.onKeyDown}\n          onBlur={this.autoCompleteBlur}\n          type={type}\n          clearAfterSelect={clearAfterSelect}\n          maxHeight={maxHeight}\n          style={style}\n          className={className}\n          bottomTouchEvent={bottomTouchEvent}\n          icon={this.isHorizontalPad ? '' : (visible ? 'jianpan1' : 'jianpan2')}\n        >\n          {children}\n        </AutoComplete>\n\n        <Keyboard type='letter+modal'\n          visible={this.isHorizontalPad ? false : visible}\n          onChange={this.keyboardChange}\n          handleOk={this.keyboardOk}\n          handleCancel={this.keyboardOk}\n        />\n\n      </div>\n    )\n  }\n}\nAutoCompleteWithKeyboard.Option = Option;\nexport default AutoCompleteWithKeyboard;\n\n/**\n * onChange\n * onClick\n * onSelect\n */"]}

package/dist/components/autoCompleteWithKeyboard/index.less

@@ -0,0 +1,8 @@
+.tab-search{
+  .ant-input-affix-wrapper{
+    padding: 2.5px 10px;
+    .iconfont{
+        color: #999;
+    }
+  }
+}