@alifd/chat 0.1.10 → 0.1.12-beta.0

package/lib/time-picker/types.d.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+type HTMLAttributesWeak = Omit<React.ButtonHTMLAttributes<HTMLElement>, 'type' | 'onClick'>;
+/**
+ * @api TimePicker
+ */
+export interface TimePickerProps extends HTMLAttributesWeak {
+    /**
+     * 采用模式
+     * @en mode of time-picker
+     * @defaultValue 'normal'
+     */
+    mode?: 'normal' | 'dingtalk';
+    /**
+     * 时间选择器其他属性
+     * @en key of time-picker
+     * @defaultValue 'medium'
+     */
+    [key: string]: any;
+}
+export {};

package/lib/time-picker/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/dingtalk.d.ts

@@ -0,0 +1,4 @@
+import '@ali/dingtalk-jsapi/entry/union';
+export declare function userPicker({ pickedUsers, onSuccess }: any): void;
+export declare function quitApp(): void;
+export declare function addZeroInWorkNo(workNo: any): any;

package/lib/utils/dingtalk.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addZeroInWorkNo = exports.quitApp = exports.userPicker = void 0;
+const tslib_1 = require("tslib");
+require("@ali/dingtalk-jsapi/entry/union");
+const quit_1 = tslib_1.__importDefault(require("@ali/dingtalk-jsapi/api/biz/navigation/quit"));
+const close_1 = tslib_1.__importDefault(require("@ali/dingtalk-jsapi/api/biz/navigation/close"));
+const complexPicker_1 = tslib_1.__importDefault(require("@ali/dingtalk-jsapi/api/biz/contact/complexPicker"));
+const dingtalk_jsapi_1 = require("@ali/dingtalk-jsapi");
+function userPicker({ pickedUsers, onSuccess }) {
+    (0, complexPicker_1.default)({
+        title: '请选择人员', // 标题
+        corpId: 'dingd8e1123006514592', // 企业的corpId
+        multiple: true, // 是否多选
+        limitTips: '超出了', // 超过限定人数返回提示
+        maxUsers: 1000, // 最大可选人数
+        pickedUsers, // 已选用户
+        pickedDepartments: [], // 已选部门
+        disabledUsers: [], // 不可选用户
+        disabledDepartments: [], // 不可选部门
+        requiredUsers: [], // 必选用户（不可取消选中状态）
+        requiredDepartments: [], // 必选部门（不可取消选中状态）
+        appId: 158, // 微应用Id，企业内部应用查看AgentId
+        permissionType: 'GLOBAL', // 可添加权限校验，选人权限，目前只有GLOBAL这个参数
+        responseUserOnly: true, // 返回人，或者返回人和部门
+        startWithDepartmentId: 0, // 仅支持0和-1
+        showRootOrg: true,
+        onSuccess,
+    });
+}
+exports.userPicker = userPicker;
+function quitApp() {
+    try {
+        if (dingtalk_jsapi_1.env.platform === 'pc') {
+            (0, quit_1.default)({});
+        }
+        else if (dingtalk_jsapi_1.env.platform === 'android' || dingtalk_jsapi_1.env.platform === 'ios') {
+            (0, close_1.default)({});
+        }
+        else {
+            window.close && window.close();
+        }
+    }
+    catch (err) {
+        console.log('quitApp error:', err);
+    }
+}
+exports.quitApp = quitApp;
+function addZeroInWorkNo(workNo) {
+    if (!workNo) {
+        return '';
+    }
+    const workNoLength = workNo.length;
+    if (workNoLength.length >= 6) {
+        return workNo;
+    }
+    const str = `0000000${workNo}`;
+    return str.slice(str.length - 6, str.length);
+}
+exports.addZeroInWorkNo = addZeroInWorkNo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alifd/chat",
-  "version": "0.1.10",
+  "version": "0.1.12-beta.0",
   "description": "A configurable component library for chat built on React.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -118,6 +118,42 @@
       "import": "./es/text/style.js",
       "require": "./lib/text/style.js"
     },
+    "./input": {
+      "import": "./es/input/index.js",
+      "require": "./lib/input/index.js"
+    },
+    "./input/style": {
+      "import": "./es/input/style.js",
+      "require": "./lib/input/style.js"
+    },
+    "./input/style.js": {
+      "import": "./es/input/style.js",
+      "require": "./lib/input/style.js"
+    },
+    "./date-picker": {
+      "import": "./es/date-picker/index.js",
+      "require": "./lib/date-picker/index.js"
+    },
+    "./date-picker/style": {
+      "import": "./es/date-picker/style.js",
+      "require": "./lib/date-picker/style.js"
+    },
+    "./date-picker/style.js": {
+      "import": "./es/date-picker/style.js",
+      "require": "./lib/date-picker/style.js"
+    },
+    "./time-picker": {
+      "import": "./es/time-picker/index.js",
+      "require": "./lib/time-picker/index.js"
+    },
+    "./time-picker/style": {
+      "import": "./es/time-picker/style.js",
+      "require": "./lib/time-picker/style.js"
+    },
+    "./time-picker/style.js": {
+      "import": "./es/time-picker/style.js",
+      "require": "./lib/time-picker/style.js"
+    },
     "./utils": {
       "import": "./es/utils/index.js",
       "require": "./lib/utils/index.js"
@@ -189,6 +225,8 @@
     "react-dom": ">=16.0.0"
   },
   "dependencies": {
+    "@ali/dingtalk-jsapi": "^3.0.33",
+    "dingtalk-jsapi": "^3.0.33",
     "hoist-non-react-statics": "^3.3.2",
     "tslib": "^2.6.2"
   },

package/es/card/main.scss

@@ -1,141 +0,0 @@
-@import '../core/variables.scss';
-
-@mixin size($shadow, $corner, $padding, $fontSize, $headFontSize) {
-    $verPadding: $padding * 0.5;
-    box-shadow: $shadow;
-    border-radius: $corner;
-    font-size: $fontSize;
-    overflow: hidden;
-
-    .#{$prefix}card {
-        &-header {
-            font-size: $headFontSize;
-            &-title {
-                padding: $verPadding $padding;
-            }
-            &-extras {
-                padding: $verPadding $padding $verPadding 0;
-            }
-        }
-        &-content {
-            padding: 0 $padding;
-
-            &--gap-top {
-                margin-top: $verPadding;
-            }
-            &--gap-bottom {
-                margin-bottom: $verPadding;
-            }
-        }
-        &-footer {
-            padding: $verPadding $padding;
-        }
-    }
-}
-
-.#{$prefix}card {
-    color: $color-text1-3;
-
-    &-inner {
-        display: flex;
-        flex-direction: column;
-        background-color: #fff;
-        @include size(
-            $shadow-2,
-            $size-base * 3,
-            $size-base * 4,
-            $font-size-body-1,
-            $font-size-subhead
-        );
-    }
-    &-header {
-        flex: none;
-        display: flex;
-
-        &-title {
-            font-weight: 500;
-            flex: 1;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            word-break: break-all;
-        }
-        &-extras {
-            flex: none;
-        }
-        &--line {
-            border-bottom: 1px solid $color-line1-0;
-        }
-    }
-    &-footer {
-        flex: none;
-
-        &--line {
-            border-top: 1px solid $color-line1-0;
-        }
-    }
-
-    &--medium {
-        .#{$prefix}card-inner {
-            @include size(
-                $shadow-2,
-                $size-base * 3,
-                $size-base * 4,
-                $font-size-body-1,
-                $font-size-subhead
-            );
-        }
-    }
-    &.#{$prefix}card--no-padding {
-        .#{$prefix}card {
-            &-header,
-            &-content,
-            &-footer {
-                padding: 0;
-                margin: 0;
-            }
-        }
-    }
-
-    @keyframes fade-in {
-        0% {
-            opacity: 0;
-        }
-        100% {
-            opacity: 1;
-        }
-    }
-
-    &-collapsable {
-        &-inner {
-        }
-        &-inner--popup {
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: auto;
-            z-index: 999;
-            opacity: 0;
-            animation-timing-function: ease-out;
-            animation-duration: 0.3s;
-            animation-name: fade-in;
-            animation-iteration-count: 1;
-            animation-fill-mode: forwards;
-        }
-        &--visible {
-            position: relative;
-            .#{$prefix}card-collapsable-inner {
-                transition: opacity 0.5s ease-in;
-                opacity: 0;
-                pointer-events: none;
-
-                &--popup {
-                    transition: none;
-                    opacity: 1;
-                    pointer-events: all;
-                }
-            }
-        }
-    }
-}

package/es/core/variables.scss

@@ -1,33 +0,0 @@
-$prefix: 'ct-' !default;
-
-$color-brand1-6: var(--color-brand1-6, #5584ff) !default;
-$size-base: 4px !default;
-$shadow-1: 1px 1px 4px 0px rgba(0, 0, 0, 0.16) !default;
-$shadow-2: 2px 4px 16px 0px rgba(0, 0, 0, 0.12) !default;
-
-$font-size-headline: var(--font-size-headline, 24px) !default;
-$font-size-title: var(--font-size-title, 20px) !default;
-$font-size-subhead: var(--font-size-subhead, 16px) !default;
-$font-size-body-2: var(--font-size-body-2, 14px) !default;
-$font-size-body-1: var(--font-size-body-1, 14px) !default;
-$font-size-caption: var(--font-size-caption, 12px) !default;
-
-/// 禁用
-$color-text1-1: var(--color-text1-1, #cccccc) !default;
-/// 水印/提示
-$color-text1-2: var(--color-text1-2, #999999) !default;
-/// 正文/标题
-$color-text1-3: var(--color-text1-3, #666666) !default;
-/// 正文/标题
-$color-text1-4: var(--color-text1-4, #333333) !default;
-
-/// 很浅
-$color-line1-0: var(--color-line1-0, #f1f3f6) !default;
-/// 浅
-$color-line1-1: var(--color-line1-1, #e6e7eb) !default;
-/// 常规
-$color-line1-2: var(--color-line1-2, #dcdee3) !default;
-/// 深
-$color-line1-3: var(--color-line1-3, #c4c6cf) !default;
-/// 重
-$color-line1-4: var(--color-line1-4, #a0a2ad) !default;

package/es/feedback/main.scss

@@ -1,42 +0,0 @@
-@import '../core/variables.scss';
-
-.#{$prefix}feedback {
-    display: inline-block;
-
-    &-inner {
-        padding: 0 4px;
-        display: flex;
-        flex-direction: row;
-    }
-    &-item {
-        background-color: transparent;
-        outline: 0;
-        border: 0;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        padding: 0 4px;
-        cursor: pointer;
-        color: inherit;
-        font-size: inherit;
-        transition:
-            color 0.15s,
-            opacity 0.15s;
-
-        &--active {
-            color: $color-brand1-6;
-        }
-
-        &:hover {
-            opacity: 0.8;
-        }
-
-        &-icon {
-            line-height: 1;
-
-            &--bad {
-                transform: rotate(180deg);
-            }
-        }
-    }
-}

package/es/float-button/main.scss

@@ -1,97 +0,0 @@
-@import '../core/variables.scss';
-
-.#{$prefix}float-button {
-    position: fixed;
-    z-index: 1001;
-
-    &-backtop {
-        transition:
-            opacity 0.2s,
-            transform 0.2s;
-        cursor: pointer;
-
-        &--hidden {
-            opacity: 0;
-            transform: scale(0);
-        }
-    }
-
-    &-inner-drawer {
-        flex: 1;
-        overflow: hidden;
-        box-shadow: $shadow-2;
-        border-radius: $size-base * 2;
-
-        &-outer {
-            display: flex;
-        }
-        &-inner-start {
-            flex: 1;
-        }
-        &-inner-end {
-            flex: none;
-            transition:
-                width 0.3s,
-                opacity 0.3s;
-            display: flex;
-            width: 0;
-            opacity: 0;
-        }
-        &-inner {
-            width: 100%;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            position: relative;
-
-            &--has-title {
-                .#{$prefix}float-button-inner-drawer {
-                    &-header {
-                        margin: $size-base * 2 $size-base * 3;
-                    }
-                    &-body {
-                        margin-top: 0;
-                    }
-                }
-            }
-            &--has-close {
-                .#{$prefix}float-button-inner-drawer {
-                    &-header-title {
-                        margin-right: $size-base * 2;
-                    }
-                }
-            }
-        }
-        &-header {
-            flex: none;
-            &-title {
-                font-size: $font-size-subhead;
-                line-height: 1.5;
-            }
-            &-close {
-                position: absolute;
-                right: $size-base * 2;
-                top: $size-base * 2;
-                color: $color-text1-2;
-                cursor: pointer;
-                transition: color 0.15s;
-                outline: 0;
-                border: 0;
-                padding: 0;
-                align-self: flex-start;
-                background-color: transparent;
-
-                &:hover {
-                    color: $color-text1-4;
-                }
-            }
-        }
-        &-body {
-            flex: 1;
-            margin: $size-base * 2 $size-base * 3;
-        }
-        &-footer {
-            flex: none;
-        }
-    }
-}

package/es/tab/main.scss

@@ -1,10 +0,0 @@
-@import "@alifd/next/variables.scss";
-@import "../core/variables.scss";
-
-.#{$prefix}tabs {
-  &.#{$css-prefix}tabs-pure {
-    .#{$css-prefix}tabs-bar {
-      border-color: transparent;
-    }
-  }
-}

package/es/tag/main.scss

@@ -1,9 +0,0 @@
-@import '@alifd/next/variables.scss';
-@import "../core/variables.scss";
-
-.#{$prefix}tag {
-
-  &.#{$css-prefix}tag {
-      border-color: transparent;
-  }
-}

package/es/text/main.scss

@@ -1,19 +0,0 @@
-@import '../core/variables.scss';
-
-.#{$prefix}text {
-    display: inline-block;
-
-    &-inner {
-    }
-    &-trigger {
-        line-height: 1;
-
-        & &-btn {
-            font-size: inherit;
-            line-height: inherit;
-            height: auto;
-            vertical-align: baseline;
-            margin-left: 12px;
-        }
-    }
-}