tplus-components-touch 1.27.1 → 1.27.2

package/dist/components/modalWraper/style.less

@@ -0,0 +1,363 @@
+// @import "~tplus-components/dist/components/theme/index.less";
+
+//modal 样式=======================
+.modal-centre{
+    .u-modal-dialog{
+        margin-top: 0px!important;
+        top: calc(~"(100% - 224px)/2")!important;
+        transform: translateY(-50%)!important;
+    }
+}
+
+.modal-formated{
+    .u-modal-content{
+        // box-shadow:none!important;
+        // border:none!important;
+    }
+    .u-modal-header{
+        height:46px;
+        border-bottom: 1px solid #E6E6EB!important;
+        padding:14px 16px!important;
+        button.u-close {
+            color: #333333;
+            font-size: 12px;
+            opacity: 1;
+            margin-top: 3px;
+        }
+        .u-modal-title{
+            font-size: 18px;
+            line-height: 18px!important;
+            color:#333333;
+        }
+        font-size:18px;
+    }
+    .u-modal-footer{
+        height:46px;
+        box-sizing: border-box;
+        padding: 7px 16px!important;
+        border-top: 1px solid #E6E6EB!important;
+
+        .footer{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            .check{
+                margin-left: 17px;
+                .u-checkbox-label {
+                    font-size: 14px;
+                    color    : #333333;
+                }
+            }
+            .u-checkbox.is-checked .u-checkbox-label:before {
+                background  : #32ABF9;
+                border-color: #32ABF9;
+                box-shadow  :0 0 0 10px #FFF;
+            }
+
+            .u-checkbox.is-checked .u-checkbox-label:after {
+                color: #FFF;
+            }
+
+            .u-checkbox input[type=checkbox]:focus+.u-checkbox-label:before {
+                border-color: #D2D2D7;
+            }
+            .u-checkbox .u-checkbox-label:before{
+                border-color: #D2D2D7;
+            }
+            .u-checkbox .u-checkbox-label:after,
+            .u-checkbox .u-checkbox-label:before {
+              width : 16px;
+              height: 16px;
+            }
+        }
+        button{
+            height:32px;
+            font-size:16px;
+            margin-left:16px;
+            border-radius: 4px;
+            line-height: 24px;
+        }
+        button[type='success']{
+            color:#fff!important;
+            // background: var(--modal-btn);
+            background: #FF8C26!important;
+            border:none!important;
+        }
+        button[type='cancel']{
+            color: #2D2D2D!important;
+            background: #FFF!important;
+            border: 1px solid #D2D2D7!important;
+        }
+        .u-button:hover {//去掉划过颜色
+            background-color: static!important;
+            border-color: static!important;
+        }
+    }
+    .u-modal-body{
+        padding:0!important;
+        overflow: auto;
+    }
+}
+.modal-formated.bigger-modal{
+    .u-modal-body{
+        height:475px;
+        overflow: auto;
+    }
+}
+.modal-formated.big-modal{
+    .u-modal-dialog{
+        width:800px;
+    }
+    .u-modal-body{
+        height:376px;
+        overflow: auto;
+    }
+}
+.modal-formated.mid-modal{
+    .u-modal-dialog{
+        width:400px;
+        height:376px;
+    }
+    .u-modal-body{
+        height:288px;
+        overflow: auto;
+    }
+}
+.modal-formated.sm-modal{
+    .u-modal-dialog{
+        width:400px;
+    }
+    .u-modal-header{
+        border-bottom:none!important;
+    }
+    .u-modal-body{
+        height:120px;
+        overflow: auto;
+        box-sizing: border-box;
+        // padding:0px 16px 0!important;
+    }
+    .u-modal-footer{
+        height:50px!important;
+        border-top:none!important;
+        border-bottom:none!important;
+    }
+}
+.method-modal1{
+    .u-button.u-button-primary{
+        color:#fff!important;
+        // background: var(--modal-btn);
+        background: #FF8C26!important;
+        border:none!important;
+        font-size: 16px!important;
+    }
+    .u-button.u-button-secondary{
+        color: #2D2D2D!important;
+        background: #FFF!important;
+        border: 1px solid #D2D2D7!important;
+        font-size: 16px!important;
+    }
+    .u-modal-dialog{
+        // margin-top: 0px!important;
+        // top: calc(~"(100%)/2")!important;
+        // transform: translateY(-50%)!important;
+    }
+    .method-modal-ticon{
+        font-size: 24px;
+        line-height: 24px;
+        margin-left:14px;
+        margin-right: 14px;
+    }
+    .ticon-confirm{
+        color:#FF595E!important;
+        position: absolute;
+        top:50%;
+        left:6px;
+        transform: translateY(-50%);
+    }
+    .ticon-info{
+        color:#FAAD14!important;
+        position: absolute;
+        top:50px;
+        left:6px;
+        transform: translateY(-50%);
+    }
+    .u-modal-content{
+        border-radius: 5px!important;
+    }
+    .u-modal-header{
+        height: 0px!important;
+        padding-bottom:0!important;
+        box-sizing: content-box;
+        .u-modal-title{
+            height: 24px!important;
+        }
+        .u-modal-confirm-title{
+            vertical-align: bottom;
+            font-weight: 400;
+            font-size: 18px;
+            color: rgba(0,0,0,0.85);
+        }
+    }
+    .u-modal-body{
+        padding-top:12px!important;
+        padding-bottom:0px!important;
+        font-size: 14px!important;
+        color: #333333!important;;
+        line-height: 22px!important;;
+        height:120px!important;
+        box-sizing: border-box!important;
+        position: relative!important;
+        >div{
+            padding:0!important;
+            width:100%;
+        }
+    }
+    .u-modal-footer{
+        .u-button-primary{
+            color:#fff!important;
+            // background: var(--modal-btn);
+            background: #FF8C26!important;
+            border:none!important;
+        }
+        .u-button-secondary{
+            color: #2D2D2D!important;
+            background: #FFF!important;
+            border: 1px solid #D2D2D7!important;
+            margin-right:16px!important;
+        }
+    }
+    .content1{
+        width:100%;
+        overflow: hidden;
+        min-height: 30px;
+        max-height: 100%;
+        position: absolute;
+        line-height: 30px;
+        top:50%;
+        transform: translateY(-50%);
+        left:0;
+        padding:0 15px 0 57px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp:4;
+        -webkit-box-orient:vertical;
+
+        .promptContent{
+            height: 100px;
+            overflow-y: auto;
+            margin-top: 30px;
+            padding: 5px 0;
+        }
+    }
+}
+
+.u-modal-body-250{
+    .u-modal-body{
+        height:250px!important;
+    }
+    .promptContent{
+        height: 230px!important;
+    }
+    img{
+        width: 120px;
+        height: 120px;
+    }
+}
+
+.vertical-touch-platform{ // 竖屏端暂时统一覆盖样式 不使用传参控制
+    .vertical-modal-wrapper {
+        &.method-modal1 {
+            background-color: rgba(0,0,0,.4);
+        }
+        .u-modal-dialog{
+            width: 80% !important;
+        }
+        .u-modal-header{
+            padding: 0px !important;
+            height: auto !important;
+            i.uf-close{
+                font-size: 24px;
+            }
+            .u-modal-title{
+                font-size: 40px !important;
+                line-height: 40px!important;
+                color:#333333;
+                height: auto !important;
+
+                .u-modal-confirm-title{
+                    font-size: 40px !important;
+                }
+            }
+        }
+        .u-modal-content{
+            padding: 30px 45px;
+            border-radius: 30px !important;
+            box-shadow: 0 5px 15px rgba(0,0,0,.2) !important;
+            .u-modal-body{
+                height: auto !important;
+                padding-top: 110px !important;
+                .content1{
+                    min-height: 50px;
+                    font-size: 38px;
+                    line-height: 48px;
+                    display: block;
+                    .method-modal-ticon{
+                        font-size: 48px !important;
+                        left: 25px !important;
+                        height: 48px;
+                        &:before{
+                            position: relative;
+                            top: 13px;
+                        }
+                    }
+                }
+            }
+            .u-button{
+                border-radius: 32px;
+                font-size: 32px !important;
+                padding: 6px 44px;
+            }
+            .u-modal-footer{
+                height: 96px !important;
+                .u-button{
+                    min-height: 64px;
+                }
+            }
+            .u-modal-footer, .modal-footer-container{
+                margin-bottom: 8px;
+                margin-top: 80px;
+                .u-button{
+                    &:first-child{
+                        margin-right: 40px!important
+                    }
+                }
+            }
+            .modal-footer-container{
+                text-align: right;
+                margin-right: -10px;
+                padding: 15px 0 15px 15px;
+                border-top: 1px solid transparent;
+                margin-top: 80px;
+            }
+        }
+        &.wrapperControl-modal-container{
+            .u-modal-footer{
+                display: none;
+            }
+        }
+        .u-modal-confirm-content{
+            .content1{
+                padding-left: 120px !important;
+                position: relative !important;
+                transform: translateY(0) !important;
+                .content-box{
+                    position: relative;
+                    .iconfont{
+                        left: -95px !important;
+                    }
+                }
+            }
+        }
+    }
+}

package/dist/components/modalWraper/utils.js

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _promise = require('babel-runtime/core-js/promise');
+
+var _promise2 = _interopRequireDefault(_promise);
+
+exports.verticalContainer = verticalContainer;
+exports.handleOnOk = handleOnOk;
+exports.handleOnCancel = handleOnCancel;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function verticalContainer() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var vertical = props.vertical,
+      wrapperControl = props.wrapperControl;
+
+
+  var className = '';
+  if (wrapperControl) className += 'wrapperControl-modal-container ';
+  if (vertical) className += 'vertical-modal-container vertical-modal-wrapper ';
+
+  return className;
+}
+
+function handleOnOk(onOk, modal) {
+  if (onOk) {
+    var result = onOk();
+    if (typeof result === 'boolean' && !result) return;
+
+    if (result instanceof _promise2.default) {
+      return result.then(function (res) {
+        return modal.destroy();
+      });
+    }
+
+    modal.destroy();
+  }
+}
+
+function handleOnCancel(onCancel, modal) {
+  modal.destroy();
+  onCancel && onCancel();
+}
+//# sourceMappingURL=utils.js.map

package/dist/components/modalWraper/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["tplus-components-touch/components/modalWraper/utils.js"],"names":["verticalContainer","handleOnOk","handleOnCancel","props","vertical","wrapperControl","className","onOk","modal","result","then","destroy","onCancel"],"mappings":";;;;;;;;;;QAAgBA,iB,GAAAA,iB;QAUAC,U,GAAAA,U;QAaAC,c,GAAAA,c;;;;AAvBT,SAASF,iBAAT,GAAuC;AAAA,MAAZG,KAAY,uEAAJ,EAAI;AAAA,MACpCC,QADoC,GACPD,KADO,CACpCC,QADoC;AAAA,MAC1BC,cAD0B,GACPF,KADO,CAC1BE,cAD0B;;;AAG5C,MAAIC,YAAY,EAAhB;AACA,MAAID,cAAJ,EAAoBC,aAAa,iCAAb;AACpB,MAAIF,QAAJ,EAAcE,aAAa,kDAAb;;AAEd,SAAOA,SAAP;AACD;;AAEM,SAASL,UAAT,CAAoBM,IAApB,EAA0BC,KAA1B,EAAiC;AACtC,MAAID,IAAJ,EAAU;AACR,QAAME,SAASF,MAAf;AACA,QAAI,OAAOE,MAAP,KAAkB,SAAlB,IAA+B,CAACA,MAApC,EAA4C;;AAE5C,QAAIA,mCAAJ,EAA+B;AAC7B,aAAOA,OAAOC,IAAP,CAAY;AAAA,eAAOF,MAAMG,OAAN,EAAP;AAAA,OAAZ,CAAP;AACD;;AAEDH,UAAMG,OAAN;AACD;AACF;;AAEM,SAAST,cAAT,CAAwBU,QAAxB,EAAkCJ,KAAlC,EAAyC;AAC9CA,QAAMG,OAAN;AACAC,cAAYA,UAAZ;AACD","file":"utils.js","sourcesContent":["export function verticalContainer(props = {}) {\n  const { vertical, wrapperControl } = props;\n\n  let className = '';\n  if (wrapperControl) className += 'wrapperControl-modal-container ';\n  if (vertical) className += 'vertical-modal-container vertical-modal-wrapper ';\n\n  return className;\n}\n\nexport function handleOnOk(onOk, modal) {\n  if (onOk) {\n    const result = onOk();\n    if (typeof result === 'boolean' && !result) return;\n\n    if (result instanceof Promise) {\n      return result.then(res => modal.destroy());\n    }\n\n    modal.destroy();\n  }\n}\n\nexport function handleOnCancel(onCancel, modal) {\n  modal.destroy();\n  onCancel && onCancel();\n}\n"]}

package/dist/components/notification/index.js

@@ -0,0 +1,124 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = undefined;
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _Notification2 = require('tinper-bee/dist/Notification');
+
+var _Notification3 = _interopRequireDefault(_Notification2);
+
+require('tinper-bee/dist/Notification/index.css');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _index = require('../../index');
+
+require('./index.less');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var notification = null; /*
+                          * 1.您有新的订单   
+                          * 2.您有新的退款订单   
+                          * 3.请注意，商品调价了
+                         */
+
+_Notification3.default.newInstance({ position: 'topRight' }, function (n) {
+    return notification = n;
+});
+
+var mtd = "https://newretail.static.chanjet.com/muisc/mtd.mp3";
+var mtt = "https://newretail.static.chanjet.com/muisc/mtt.mp3";
+var mtj = "https://newretail.static.chanjet.com/muisc/mtj.mp3";
+
+var NotificationP = function NotificationP() {
+    var _this = this;
+
+    (0, _classCallCheck3.default)(this, NotificationP);
+
+    this.click = function (cb) {
+        cb && cb();
+    };
+
+    this.close = function (key) {
+        notification.removeNotice(key);
+    };
+
+    this.show = function () {
+        var total = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 99;
+        var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+        var callback = arguments[2];
+
+        var that = _this;
+        if (_this.key) {
+            _this.close(_this.key);
+        }
+        var title = null,
+            voice = null,
+            status = false;
+        switch (type) {
+            case 1:
+                title = "您有新的订单";
+                voice = mtd;
+                status = true;
+                break;
+            case 2:
+                title = "您有新的退款订单";
+                voice = mtt;
+                status = false;
+                break;
+        }
+        var key = Date.now();
+        notification.notice({
+            className: 'notificationContainer',
+            content: _react2.default.createElement(
+                'div',
+                { className: 'content', onClick: function onClick() {
+                        if (status) {
+                            that.click(callback);
+                        }
+                    } },
+                _react2.default.createElement(_index.Ticon, { type: 'laba' }),
+                _react2.default.createElement(
+                    'div',
+                    { className: 'second' },
+                    _react2.default.createElement(
+                        'div',
+                        { className: status ? 'text color' : 'text' },
+                        title
+                    ),
+                    status && _react2.default.createElement(
+                        'div',
+                        { className: 'total' },
+                        total
+                    )
+                ),
+                _react2.default.createElement(
+                    'audio',
+                    { controls: 'controls', autoplay: 'autoplay', preload: true, hidden: true },
+                    _react2.default.createElement('source', { src: voice })
+                )
+            ),
+            key: key,
+            duration: 10,
+            closable: true,
+            onClose: function onClose() {
+                console.log('simple close');
+            }
+        });
+        _this.key = key;
+    };
+
+    this.key = null;
+};
+
+exports.default = NotificationP;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["tplus-components-touch/components/notification/index.js"],"names":["notification","newInstance","position","n","mtd","mtt","mtj","NotificationP","click","cb","close","key","removeNotice","show","total","type","callback","that","title","voice","status","Date","now","notice","className","content","duration","closable","onClose","console","log"],"mappings":";;;;;;;;;;;;;;;;;AAMA;;;;AAGA;;AACA;;;;AAEA,IAAIA,eAAe,IAAnB,C,CAZA;;;;;;AAaA,uBAAaC,WAAb,CAAyB,EAAEC,UAAU,UAAZ,EAAzB,EAAmD;AAAA,WAAKF,eAAeG,CAApB;AAAA,CAAnD;;AAEA,IAAMC,MAAM,oDAAZ;AACA,IAAMC,MAAM,oDAAZ;AACA,IAAMC,MAAM,oDAAZ;;IACqBC,a,GACjB,yBAAc;AAAA;;AAAA;;AAAA,SAIdC,KAJc,GAIN,UAACC,EAAD,EAAQ;AACZA,cAAMA,IAAN;AACH,KANa;;AAAA,SAOdC,KAPc,GAON,UAACC,GAAD,EAAS;AACbX,qBAAaY,YAAb,CAA0BD,GAA1B;AACH,KATa;;AAAA,SAUdE,IAVc,GAUP,YAAoC;AAAA,YAAnCC,KAAmC,uEAA3B,EAA2B;AAAA,YAAvBC,IAAuB,uEAAhB,CAAgB;AAAA,YAAbC,QAAa;;AACvC,YAAIC,OAAO,KAAX;AACA,YAAI,MAAKN,GAAT,EAAc;AACV,kBAAKD,KAAL,CAAW,MAAKC,GAAhB;AACH;AACD,YAAIO,QAAQ,IAAZ;AAAA,YAAkBC,QAAQ,IAA1B;AAAA,YAAgCC,SAAS,KAAzC;AACA,gBAAQL,IAAR;AACI,iBAAK,CAAL;AACIG,wBAAQ,QAAR;AACAC,wBAAQf,GAAR;AACAgB,yBAAS,IAAT;AACA;AACJ,iBAAK,CAAL;AACIF,wBAAQ,UAAR;AACAC,wBAAQd,GAAR;AACAe,yBAAS,KAAT;AACA;AAVR;AAYA,YAAMT,MAAMU,KAAKC,GAAL,EAAZ;AACAtB,qBAAauB,MAAb,CAAoB;AAChBC,uBAAW,uBADK;AAEhBC,qBAAS;AAAA;AAAA,kBAAK,WAAU,SAAf,EAAyB,SAAS,mBAAM;AAAE,4BAAIL,MAAJ,EAAY;AAAEH,iCAAKT,KAAL,CAAWQ,QAAX;AAAsB;AAAE,qBAAhF;AACL,8CAAC,YAAD,IAAO,MAAK,MAAZ,GADK;AAEL;AAAA;AAAA,sBAAK,WAAU,QAAf;AACI;AAAA;AAAA,0BAAK,WAAWI,SAAS,YAAT,GAAwB,MAAxC;AAAiDF;AAAjD,qBADJ;AAGQE,8BACA;AAAA;AAAA,0BAAK,WAAU,OAAf;AAAwBN;AAAxB;AAJR,iBAFK;AASL;AAAA;AAAA,sBAAO,UAAS,UAAhB,EAA2B,UAAS,UAApC,EAA+C,aAA/C,EAAuD,YAAvD;AACI,8DAAQ,KAAKK,KAAb;AADJ;AATK,aAFO;AAehBR,oBAfgB;AAgBhBe,sBAAU,EAhBM;AAiBhBC,sBAAU,IAjBM;AAkBhBC,mBAlBgB,qBAkBN;AAAEC,wBAAQC,GAAR,CAAY,cAAZ;AAA6B;AAlBzB,SAApB;AAoBA,cAAKnB,GAAL,GAAWA,GAAX;AACH,KAlDa;;AACV,SAAKA,GAAL,GAAW,IAAX;AACH,C;;kBAHgBJ,a","file":"index.js","sourcesContent":["/*\n * 1.您有新的订单   \n * 2.您有新的退款订单   \n * 3.请注意，商品调价了\n*/\n\nimport React, { Component } from 'react';\nimport { Notification, Modal } from 'tinper-bee';\n\nimport { Ticon } from '../../index';\nimport './index.less'\n\nlet notification = null;\nNotification.newInstance({ position: 'topRight' }, n => notification = n);\n\nconst mtd = \"https://newretail.static.chanjet.com/muisc/mtd.mp3\";\nconst mtt = \"https://newretail.static.chanjet.com/muisc/mtt.mp3\";\nconst mtj = \"https://newretail.static.chanjet.com/muisc/mtj.mp3\";\nexport default class NotificationP {\n    constructor() {\n        this.key = null;\n    }\n\n    click = (cb) => {\n        cb && cb();\n    }\n    close = (key) => {\n        notification.removeNotice(key);\n    }\n    show = (total = 99, type = 1, callback) => {\n        let that = this;\n        if (this.key) {\n            this.close(this.key);\n        }\n        let title = null, voice = null, status = false;\n        switch (type) {\n            case 1:\n                title = \"您有新的订单\";\n                voice = mtd;\n                status = true;\n                break;\n            case 2:\n                title = \"您有新的退款订单\";\n                voice = mtt;\n                status = false;\n                break;\n        }\n        const key = Date.now();\n        notification.notice({\n            className: 'notificationContainer',\n            content: <div className='content' onClick={() => { if (status) { that.click(callback) } }}>\n                <Ticon type='laba' />\n                <div className='second'>\n                    <div className={status ? 'text color' : 'text'}>{title}</div>\n                    {\n                        status &&\n                        <div className='total'>{total}</div>\n                    }\n                </div>\n                <audio controls=\"controls\" autoplay=\"autoplay\" preload hidden>\n                    <source src={voice} />\n                </audio>\n            </div>,\n            key,\n            duration: 10,\n            closable: true,\n            onClose() { console.log('simple close') }\n        })\n        this.key = key;\n    }\n}"]}

package/dist/components/notification/index.less

@@ -0,0 +1,58 @@
+.notificationContainer {
+    background   : #FFF;
+    color        : #666;
+    border-radius: 6px;
+    width        : 220px;
+    height       : 50px;
+    line-height  : 50px;
+    padding      : 0;
+    display      : block;
+    float        : right;
+    cursor       : pointer;
+
+    .content {
+
+        display        : flex;
+        align-items    : flex-start;
+        justify-content: center;
+        margin-left    : 15px;
+        margin-right   : 25px;
+
+        i {
+            color    : #FF8C25;
+            font-size: 20px;
+        }
+
+        .second {
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+
+            .text {
+                font-size   : 14px;
+                margin-left : 5px;
+                margin-right: 5px;
+                width       : 120px;
+            }
+
+            .total {
+                background   : #FF0000;
+                border-radius: 50%;
+                color        : #FFF;
+                font-size    : 10px;
+                width        : 20px;
+                height       : 20px;
+                line-height  : 20px;
+                text-align   : center;
+                margin-top: 15px;
+            }
+            .color {
+                color: #FF8C25;
+            }
+        }
+    }
+
+    .u-notification-notice-close-x .uf {
+        font-size: 10px;
+    }
+}