@icos-desktop/react-components 2.2.14 → 2.3.0-es.1

package/dist/es/components/TagConfig/components/SenseList/ContextMenu/index.js

@@ -0,0 +1,30 @@
+import { v4 } from 'uuid';
+import { renderContextMenu } from '../../../../../utils/contexify/index.js';
+
+var id = "TAG_CONFIG_MENU_SENSE_".concat(v4());
+var ContextMenu = function (_a) {
+    var disabled = _a.disabled;
+    var menu = [
+        {
+            key: 'addTag',
+            label: '批量打标',
+            disabled: disabled,
+        },
+        {
+            key: 'deleteTag',
+            label: '批量取消标签',
+            disabled: disabled,
+        },
+    ];
+    var handleMenu = function (key, _a) {
+        var props = _a.props;
+        if (props) {
+            var callback = props.callback;
+            callback === null || callback === void 0 ? void 0 : callback(key);
+        }
+    };
+    return renderContextMenu(id, menu, handleMenu);
+};
+ContextMenu.id = id;
+
+export { ContextMenu as default };

package/dist/es/components/TagConfig/components/SenseList/index.js

@@ -0,0 +1,116 @@
+import { __awaiter, __generator } from '../../../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.41.1_tslib@2.8.1_typescript@5.8.3/node_modules/tslib/tslib.es6.js';
+import { Input, message, Modal, Select } from '@xirang/design-antd';
+import { useRequest } from 'ahooks';
+import React__default, { useState, useRef } from 'react';
+import { useContextMenu } from 'react-contexify';
+import SenseTable from '../../../SenseTable/SenseTable.js';
+import { getBookOptions } from '../../../../services/senseManager.js';
+import { deleteSenseTags, saveSenseTags } from '../../../../services/tag.js';
+import ContextMenu from './ContextMenu/index.js';
+import styles from './index.module.less.js';
+
+var Search = Input.Search;
+var SenseList = function (_a) {
+    var name = _a.name, bookId = _a.bookId, selectedTag = _a.selectedTag, templateId = _a.templateId, viewCode = _a.viewCode, pageSize = _a.pageSize, customColumns = _a.customColumns;
+    var showContextMenu = useContextMenu({ id: ContextMenu.id }).show;
+    var _b = message.useMessage(), messageApi = _b[0], contextHolder = _b[1];
+    var _c = Modal.useModal(), modal = _c[0], modalContextHolder = _c[1];
+    var _d = useState([]), selectBookIds = _d[0], setSelectBookIds = _d[1];
+    var _e = useState(''), keyword = _e[0], setKeyword = _e[1];
+    // 选中的行
+    var _f = useState([]), selectedRowKeys = _f[0], setSelectedRowKeys = _f[1];
+    var senseTableRef = useRef();
+    var bookOptions = useRequest(function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getBookOptions({ templateIds: [templateId] })];
+                case 1: return [2 /*return*/, _a.sent()];
+            }
+        });
+    }); }).data;
+    var handleChangeSelectBookIds = function (value) {
+        setSelectBookIds(value);
+    };
+    var handleSearch = function (value) {
+        setKeyword(value);
+    };
+    var onRow = function (record) { return ({
+        onContextMenu: function (e) {
+            e.stopPropagation();
+            e.preventDefault();
+            if (selectedRowKeys.includes(record.sense_global_code)) {
+                showContextMenu({
+                    event: e,
+                    props: {
+                        callback: function (key) {
+                            switch (key) {
+                                case 'addTag': // 批量打标
+                                    modal.confirm({
+                                        content: "\u8BF7\u786E\u8BA4\u662F\u5426\u8981\u5C06\u5DF2\u9009\u4E2D\u7684".concat(selectedRowKeys.length, "\u4E2A\u5B9E\u4F53\u5173\u8054\u201C").concat(selectedTag.title, "\u201D\u6807\u7B7E"),
+                                        onOk: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                            var _a;
+                                            return __generator(this, function (_b) {
+                                                switch (_b.label) {
+                                                    case 0: return [4 /*yield*/, saveSenseTags(selectedRowKeys.map(function (item) { return ({
+                                                            senseGlobalCode: item,
+                                                            tagCode: selectedTag.key,
+                                                        }); }))];
+                                                    case 1:
+                                                        _b.sent();
+                                                        messageApi.success('打标成功');
+                                                        (_a = senseTableRef.current) === null || _a === void 0 ? void 0 : _a.refresh();
+                                                        return [2 /*return*/];
+                                                }
+                                            });
+                                        }); },
+                                    });
+                                    break;
+                                case 'deleteTag': // 批量取消标签
+                                    modal.confirm({
+                                        content: "\u8BF7\u786E\u8BA4\u662F\u5426\u8981\u5C06\u5DF2\u9009\u4E2D\u7684".concat(selectedRowKeys.length, "\u4E2A\u5B9E\u4F53\u53D6\u6D88\u5173\u8054\u201C").concat(selectedTag.title, "\u201D\u6807\u7B7E"),
+                                        onOk: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                            var _a;
+                                            return __generator(this, function (_b) {
+                                                switch (_b.label) {
+                                                    case 0: return [4 /*yield*/, deleteSenseTags(selectedRowKeys.map(function (item) { return ({
+                                                            senseGlobalCode: item,
+                                                            tagCode: selectedTag.key,
+                                                        }); }))];
+                                                    case 1:
+                                                        _b.sent();
+                                                        messageApi.success('取消标签成功');
+                                                        (_a = senseTableRef.current) === null || _a === void 0 ? void 0 : _a.refresh();
+                                                        return [2 /*return*/];
+                                                }
+                                            });
+                                        }); },
+                                    });
+                                    break;
+                            }
+                        },
+                    },
+                });
+            }
+        },
+    }); };
+    var rowSelection = {
+        selectedRowKeys: selectedRowKeys,
+        onChange: function (keys) {
+            setSelectedRowKeys(keys);
+        },
+        preserveSelectedRowKeys: true,
+    };
+    return (React__default.createElement("div", { className: styles.container },
+        React__default.createElement("div", { className: styles.header },
+            React__default.createElement("div", { className: styles.title }, name),
+            React__default.createElement("div", { className: styles.search },
+                bookId ? null : (React__default.createElement(Select, { style: { width: 260 }, placeholder: "\u8BF7\u9009\u62E9\u6240\u5C5E\u53F0\u8D26", options: bookOptions, onChange: handleChangeSelectBookIds, value: selectBookIds, fieldNames: { label: 'bookName', value: 'bookId' }, mode: "multiple", maxTagCount: "responsive", showSearch: true, filterOption: function (k, option) { return option.bookName.includes(k); } })),
+                React__default.createElement(Search, { style: { width: 200 }, placeholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u5173\u952E\u8BCD", onSearch: handleSearch, allowClear: true }))),
+        React__default.createElement("div", { className: styles.main },
+            React__default.createElement(SenseTable, { ref: senseTableRef, bookId: bookId, bookIds: selectBookIds, keyword: keyword, templateId: templateId, viewCodes: viewCode ? [viewCode] : undefined, pageSize: pageSize, rowSelection: rowSelection, onRow: onRow, enableTag: "edit", customColumns: customColumns, writeAuth: true })),
+        React__default.createElement(ContextMenu, { disabled: !selectedTag }),
+        contextHolder,
+        modalContextHolder));
+};
+
+export { SenseList as default };

package/dist/es/components/TagConfig/components/SenseList/index.module.less.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index-module_container__cMIaI {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  padding-left: 20px;\n}\n.index-module_container__cMIaI .index-module_header__j0OOt {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: space-between;\n  padding: 24px 0;\n}\n.index-module_container__cMIaI .index-module_header__j0OOt .index-module_title__TGkNF {\n  font-size: 18px;\n  font-weight: 500;\n  line-height: 22px;\n}\n.index-module_container__cMIaI .index-module_header__j0OOt .index-module_search__8DryU {\n  display: flex;\n  gap: 8px;\n  padding-right: 20px;\n}\n.index-module_container__cMIaI .index-module_main__rk-iH {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  height: 0;\n  background: rgba(0, 102, 255, 0.06);\n}\n";
+var styles = {"container":"index-module_container__cMIaI","header":"index-module_header__j0OOt","title":"index-module_title__TGkNF","search":"index-module_search__8DryU","main":"index-module_main__rk-iH"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/es/components/TagConfig/components/TagList/index.js

@@ -0,0 +1,150 @@
+import { __awaiter, __generator, __spreadArray, __assign } from '../../../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.41.1_tslib@2.8.1_typescript@5.8.3/node_modules/tslib/tslib.es6.js';
+import { Input, Tree, Empty } from '@xirang/design-antd';
+import { useRequest } from 'ahooks';
+import classNames from 'classnames';
+import React__default, { useState, useMemo } from 'react';
+import { getTagTree } from '../../../../services/tag.js';
+import { arrayToTree } from '../../../../utils/tree.js';
+import styles from './index.module.less.js';
+
+var Search = Input.Search;
+var searchTree = function (forest, keyword) {
+    var result = null;
+    function search(node, kwd) {
+        var found = false;
+        if (node.name.includes(kwd)) {
+            // 如果节点名称包含关键字，标记为找到
+            found = true;
+        }
+        var newNode = __assign(__assign({}, node), { children: [], tagValues: [] });
+        if (node.children) {
+            for (var _i = 0, _a = node.children; _i < _a.length; _i++) {
+                var child = _a[_i];
+                var childResult = search(child, kwd);
+                if (childResult) {
+                    newNode.children.push(childResult);
+                    found = true;
+                }
+            }
+        }
+        if (node.tagValues) {
+            for (var _b = 0, _c = node.tagValues; _b < _c.length; _b++) {
+                var child = _c[_b];
+                var childResult = search(child, kwd);
+                if (childResult) {
+                    newNode.tagValues.push(childResult);
+                    found = true;
+                }
+            }
+        }
+        if (found) {
+            return newNode;
+        }
+        return null;
+    }
+    for (var _i = 0, forest_1 = forest; _i < forest_1.length; _i++) {
+        var node = forest_1[_i];
+        var found = search(node, keyword);
+        if (found) {
+            if (!result) {
+                result = [];
+            }
+            result.push(found);
+        }
+    }
+    return result;
+};
+var TagList = function (_a) {
+    var templateId = _a.templateId, selectedTag = _a.selectedTag, setSelectedTag = _a.setSelectedTag;
+    var _b = useState(''), keyword = _b[0], setKeyword = _b[1];
+    var _c = useState([]), expandedKeys = _c[0], setExpandedKeys = _c[1];
+    var handleExpand = function (keys) {
+        setExpandedKeys(keys);
+    };
+    var handleSelect = function (keys) {
+        if (keys.length) {
+            if (expandedKeys.includes(keys[0])) {
+                setExpandedKeys(expandedKeys.filter(function (key) { return key !== keys[0]; }));
+            }
+            else {
+                setExpandedKeys(__spreadArray(__spreadArray([], expandedKeys, true), keys, true));
+            }
+        }
+    };
+    // 选择标签
+    var handleSelectTag = function (node) {
+        if ((selectedTag === null || selectedTag === void 0 ? void 0 : selectedTag.key) === node.key) {
+            // 取消选中
+            setSelectedTag(null);
+        }
+        else {
+            // 选中
+            setSelectedTag(node);
+        }
+    };
+    var titleRender = function (node) {
+        var title = node.title, type = node.type, tagValues = node.tagValues;
+        if (type === 'tagValues') {
+            return (React__default.createElement("div", { className: styles['tag-values'] }, tagValues.map(function (item) {
+                var _a;
+                return (React__default.createElement("div", { className: classNames(styles['tag-value'], (_a = {},
+                        _a[styles.selected] = item.key === (selectedTag === null || selectedTag === void 0 ? void 0 : selectedTag.key),
+                        _a)), onClick: function () { return handleSelectTag(item); } }, item.title));
+            })));
+        }
+        return React__default.createElement("div", null, title);
+    };
+    var handleSearch = function (value) {
+        setKeyword(value);
+    };
+    var data = useRequest(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var res, others, tagDefs, tagValueMap, array, tree;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getTagTree({ templateId: templateId })];
+                case 1:
+                    res = _a.sent();
+                    others = [];
+                    tagDefs = [];
+                    tagValueMap = {};
+                    res.forEach(function (item) {
+                        if (item.type === 'tagDef') {
+                            tagDefs.push(item);
+                            return;
+                        }
+                        if (item.type === 'tagValue') {
+                            if (!tagValueMap[item.parentCode]) {
+                                tagValueMap[item.parentCode] = [];
+                            }
+                            tagValueMap[item.parentCode].push(item);
+                            return;
+                        }
+                        others.push(item);
+                    });
+                    array = __spreadArray(__spreadArray([], others, true), tagDefs, true);
+                    tagDefs.forEach(function (item) {
+                        var _a;
+                        if ((_a = tagValueMap[item.code]) === null || _a === void 0 ? void 0 : _a.length) {
+                            array.push({
+                                code: "tagValues_".concat(item.code),
+                                name: '',
+                                parentCode: item.code,
+                                type: 'tagValues',
+                                tagValues: tagValueMap[item.code].map(function (it) { return (__assign(__assign({}, it), { key: it.code, title: it.name })); }),
+                            });
+                        }
+                    });
+                    tree = arrayToTree(array, function (item) { return (__assign(__assign({}, item), { key: item.code, parentKey: item.parentCode, title: item.name })); });
+                    return [2 /*return*/, tree];
+            }
+        });
+    }); }).data;
+    var treeData = useMemo(function () { return (keyword ? ((data === null || data === void 0 ? void 0 : data.length) ? searchTree(data, keyword) || [] : []) : data); }, [keyword, data]);
+    return (React__default.createElement("div", { className: styles.container },
+        React__default.createElement("div", { className: styles.title }, "\u5168\u90E8\u6807\u7B7E"),
+        React__default.createElement("div", { className: styles.search },
+            React__default.createElement(Search, { placeholder: "\u8BF7\u8F93\u5165\u6807\u7B7E\u540D\u79F0", onSearch: handleSearch })),
+        React__default.createElement("div", { className: styles.tree }, (treeData === null || treeData === void 0 ? void 0 : treeData.length) ? (React__default.createElement(Tree, { expandedKeys: expandedKeys, selectedKeys: [], onExpand: handleExpand, onSelect: handleSelect, titleRender: titleRender, treeData: treeData, blockNode: true })) : (React__default.createElement(Empty, null)))));
+};
+
+export { TagList as default };

package/dist/es/components/TagConfig/components/TagList/index.module.less.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".index-module_container__OwuxO {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  padding-top: 20px;\n  background: rgba(0, 102, 255, 0.06);\n}\n.index-module_container__OwuxO .index-module_title__4d-kh {\n  flex-shrink: 0;\n}\n.index-module_container__OwuxO .index-module_search__mZxmC {\n  flex-shrink: 0;\n  padding: 16px 0 8px;\n}\n.index-module_container__OwuxO .index-module_tree__DOrDA {\n  flex: 1;\n  height: 0;\n  overflow: hidden auto;\n}\n.index-module_container__OwuxO .index-module_tree__DOrDA .ant-tree .ant-tree-treenode .ant-tree-node-content-wrapper .ant-tree-title {\n  overflow: initial;\n}\n.index-module_container__OwuxO .index-module_tree__DOrDA .ant-tree .ant-tree-treenode .ant-tree-node-content-wrapper:hover {\n  background: transparent;\n  box-shadow: none;\n}\n.index-module_tag-values__SEg7R {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-left: -24px;\n}\n.index-module_tag-values__SEg7R .index-module_tag-value__1bsAv {\n  padding: 4px 12px;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 18px;\n  color: #0ff;\n  background: rgba(0, 255, 255, 0.2);\n  border-radius: 4px;\n}\n.index-module_tag-values__SEg7R .index-module_tag-value__1bsAv.index-module_selected__UA277 {\n  color: #fff;\n  background: #0cc;\n}\n";
+var styles = {"container":"index-module_container__OwuxO","title":"index-module_title__4d-kh","search":"index-module_search__mZxmC","tree":"index-module_tree__DOrDA","tag-values":"index-module_tag-values__SEg7R","tag-value":"index-module_tag-value__1bsAv","selected":"index-module_selected__UA277"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/es/components/TagConfig/settings.js

@@ -0,0 +1,39 @@
+import { applyRules } from '../../utils/settings.js';
+
+var settings = {
+    name: 'CcosTagConfig',
+    title: '实体标签配置',
+    description: '',
+    package: '@icos-desktop/react-components',
+    exportType: 'namedExport',
+    props: [
+    // {
+    //   name: 'views',
+    //   title: '左侧菜单栏',
+    //   group: 'basic',
+    //   setter: 'selectSetter',
+    //   setterProps: {
+    //     mode: 'multiple',
+    //     labelInValue: true,
+    //   },
+    //   options: [
+    //     { label: '城市物件', value: 'system-icos_city_object' },
+    //     { label: '城市居民', value: 'system-icos_city_resident' },
+    //     { label: '地理空间', value: 'system-icos_geo_space' },
+    //     { label: '组织机构', value: 'system-icos_gov_org' },
+    //     { label: '城市事件', value: 'system-icos_ld_event' },
+    //     { label: '政府通讯录', value: 'system-icos_gov_user' },
+    //   ],
+    // },
+    // 事件
+    // {
+    //   name: 'onCreateSense',
+    //   title: '新建对象',
+    //   group: 'event',
+    //   setter: 'eventSetter',
+    // },
+    ],
+};
+var settings$1 = applyRules(settings);
+
+export { settings$1 as default };

package/dist/es/components/TagTreeSelect/TagTreeSelect.js

@@ -0,0 +1,23 @@
+import { __awaiter, __generator, __assign } from '../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.41.1_tslib@2.8.1_typescript@5.8.3/node_modules/tslib/tslib.es6.js';
+import { TreeSelect } from '@xirang/design-antd';
+import { useRequest } from 'ahooks';
+import React__default from 'react';
+import { getTagTree } from '../../services/tag.js';
+import styles from './TagTreeSelect.module.less.js';
+
+var TagTreeSelect = function (props) {
+    var data = useRequest(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var res;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, getTagTree()];
+                case 1:
+                    res = _a.sent();
+                    return [2 /*return*/, res.map(function (item) { return (__assign(__assign({}, item), { selectable: item.type === 'tagValue' })); })];
+            }
+        });
+    }); }).data;
+    return (React__default.createElement(TreeSelect, __assign({ placeholder: "\u8BF7\u9009\u62E9\u6807\u7B7E", popupClassName: styles.container, treeData: data, fieldNames: { label: 'name', value: 'code' }, treeDataSimpleMode: { id: 'code', pId: 'parentCode' }, filterTreeNode: function (input, node) { return node.name.includes(input); }, showSearch: true, allowClear: true }, props)));
+};
+
+export { TagTreeSelect as default };

package/dist/es/components/TagTreeSelect/TagTreeSelect.module.less.js

@@ -0,0 +1,7 @@
+import styleInject from '../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".TagTreeSelect-module_container__QRI8O .ant-select-tree-node-content-wrapper {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n";
+var styles = {"container":"TagTreeSelect-module_container__QRI8O"};
+styleInject(css_248z);
+
+export { styles as default };

package/dist/es/components/VideoControl/VideoControl.js

@@ -0,0 +1,86 @@
+import { __awaiter, __generator } from '../../node_modules/.pnpm/@rollup_plugin-typescript@11.1.6_rollup@4.41.1_tslib@2.8.1_typescript@5.8.3/node_modules/tslib/tslib.es6.js';
+import { message, Slider } from '@xirang/design-antd';
+import classNames from 'classnames';
+import React__default, { useState, useEffect } from 'react';
+import { cameraPtzControl } from '../../services/senseForm.js';
+import SvgAdd from './assets/add.svg.js';
+import SvgLine from './assets/line.svg.js';
+import SvgReduce from './assets/reduce.svg.js';
+import styles from './VideoControl.module.less.js';
+
+var VideoControl = function (props) {
+    var _a;
+    var senseGlobalCode = props.senseGlobalCode, channelId = props.channelId, videoStreamSource = props.videoStreamSource, disabled = props.disabled, operationIconColor = props.operationIconColor, operateIconBorderColor = props.operateIconBorderColor, player = props.player;
+    var _b = message.useMessage(), messageApi = _b[0], contextHolder = _b[1];
+    // 云台速度
+    var _c = useState(40), speed = _c[0], setSpeed = _c[1];
+    // 操作云台
+    var handleControl = function (command) { return __awaiter(void 0, void 0, void 0, function () {
+        var res;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (disabled) {
+                        return [2 /*return*/, null];
+                    }
+                    return [4 /*yield*/, cameraPtzControl({
+                            videoStreamSource: videoStreamSource,
+                            channelId: channelId,
+                            senseGlobalCode: senseGlobalCode,
+                            command: command,
+                            speed: speed,
+                        })];
+                case 1:
+                    res = _a.sent();
+                    if (res) {
+                        messageApi.success('操作成功', 1);
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        document.documentElement.style.setProperty('--video-control-operate-icon-color', typeof operationIconColor !== 'undefined' ? operationIconColor : '#fff');
+        document.documentElement.style.setProperty('--video-control-operate-icon-border-color', typeof operateIconBorderColor !== 'undefined' ? operateIconBorderColor : '#18C7F2');
+    });
+    return (React__default.createElement("div", { className: styles.container },
+        React__default.createElement("div", { className: styles.player }, player),
+        React__default.createElement(SvgLine, null),
+        React__default.createElement("div", { className: classNames(styles.control, (_a = {}, _a[styles['control-disabled']] = disabled, _a)) },
+            React__default.createElement("div", { className: styles.title }, "\u4E91\u53F0\u64CD\u63A7"),
+            React__default.createElement("div", { className: styles.direction },
+                React__default.createElement("div", { className: styles.center }),
+                React__default.createElement("div", { className: styles.up, onClick: function () { return handleControl('UP'); } }),
+                React__default.createElement("div", { className: styles.down, onClick: function () { return handleControl('DOWN'); } }),
+                React__default.createElement("div", { className: styles.left, onClick: function () { return handleControl('LEFT'); } }),
+                React__default.createElement("div", { className: styles.right, onClick: function () { return handleControl('RIGHT'); } }),
+                React__default.createElement("div", { className: styles['left-up'], onClick: function () { return handleControl('LEFT_UP'); } }),
+                React__default.createElement("div", { className: styles['left-down'], onClick: function () { return handleControl('LEFT_DOWN'); } }),
+                React__default.createElement("div", { className: styles['right-up'], onClick: function () { return handleControl('RIGHT_UP'); } }),
+                React__default.createElement("div", { className: styles['right-down'], onClick: function () { return handleControl('RIGHT_DOWN'); } })),
+            React__default.createElement("div", { className: styles['control-item'] },
+                React__default.createElement("div", { className: styles['control-btn'], onClick: function () { return handleControl('ZOOM_OUT'); } },
+                    React__default.createElement(SvgReduce, null)),
+                React__default.createElement("div", { className: styles.text }, "\u7126\u8DDD"),
+                React__default.createElement("div", { className: styles['control-btn'], onClick: function () { return handleControl('ZOOM_IN'); } },
+                    React__default.createElement(SvgAdd, null))),
+            React__default.createElement("div", { className: styles['control-item'] },
+                React__default.createElement("div", { className: styles['control-btn'], onClick: function () { return handleControl('FOCUS_FAR'); } },
+                    React__default.createElement(SvgReduce, null)),
+                React__default.createElement("div", { className: styles.text }, "\u7126\u70B9"),
+                React__default.createElement("div", { className: styles['control-btn'], onClick: function () { return handleControl('FOCUS_NEAR'); } },
+                    React__default.createElement(SvgAdd, null))),
+            React__default.createElement("div", { className: styles['control-item'] },
+                React__default.createElement("div", { className: styles['control-btn'], onClick: function () { return handleControl('IRIS_REDUCE'); } },
+                    React__default.createElement(SvgReduce, null)),
+                React__default.createElement("div", { className: styles.text }, "\u5149\u5708"),
+                React__default.createElement("div", { className: styles['control-btn'], onClick: function () { return handleControl('IRIS_ENLARGE'); } },
+                    React__default.createElement(SvgAdd, null))),
+            React__default.createElement("div", { className: styles['control-item'] },
+                React__default.createElement("div", { className: styles.text }, "\u901F\u5EA6"),
+                React__default.createElement("div", { className: styles.slider },
+                    React__default.createElement(Slider, { value: speed, onChange: function (value) { return setSpeed(value); }, disabled: disabled })))),
+        contextHolder));
+};
+
+export { VideoControl as default };