wssf-kage-ui 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Avatar/index.d.ts +47 -0
- package/dist/cjs/Avatar/index.js +147 -0
- package/dist/cjs/Avatar/style.less +193 -0
- package/dist/cjs/Badge/index.d.ts +48 -0
- package/dist/cjs/Badge/index.js +141 -0
- package/dist/cjs/Badge/style.less +237 -0
- package/dist/cjs/Calendar/index.d.ts +33 -0
- package/dist/cjs/Calendar/index.js +296 -0
- package/dist/cjs/Calendar/style.less +384 -0
- package/dist/cjs/Card/index.d.ts +68 -0
- package/dist/cjs/Card/index.js +155 -0
- package/dist/cjs/Card/style.less +356 -0
- package/dist/cjs/Carousel/index.d.ts +33 -0
- package/dist/cjs/Carousel/index.js +169 -0
- package/dist/cjs/Carousel/style.less +232 -0
- package/dist/cjs/Collapse/index.d.ts +55 -0
- package/dist/cjs/Collapse/index.js +191 -0
- package/dist/cjs/Collapse/style.less +217 -0
- package/dist/cjs/Descriptions/index.d.ts +54 -0
- package/dist/cjs/Descriptions/index.js +181 -0
- package/dist/cjs/Descriptions/style.less +259 -0
- package/dist/cjs/Empty/index.d.ts +21 -0
- package/dist/cjs/Empty/index.js +115 -0
- package/dist/cjs/Empty/style.less +103 -0
- package/dist/cjs/Image/index.d.ts +30 -0
- package/dist/cjs/Image/index.js +153 -0
- package/dist/cjs/Image/style.less +156 -0
- package/dist/cjs/Input/index.d.ts +24 -0
- package/dist/cjs/Input/index.js +158 -0
- package/dist/cjs/Input/style.less +276 -0
- package/dist/cjs/InputNumber/index.d.ts +47 -0
- package/dist/cjs/InputNumber/index.js +323 -0
- package/dist/cjs/InputNumber/style.less +392 -0
- package/dist/cjs/Mentions/index.d.ts +57 -0
- package/dist/cjs/Mentions/index.js +378 -0
- package/dist/cjs/Mentions/style.less +297 -0
- package/dist/cjs/Popover/index.d.ts +30 -0
- package/dist/cjs/Popover/index.js +131 -0
- package/dist/cjs/Popover/style.less +279 -0
- package/dist/cjs/QRCode/index.d.ts +30 -0
- package/dist/cjs/QRCode/index.js +167 -0
- package/dist/cjs/QRCode/style.less +201 -0
- package/dist/cjs/Radio/index.d.ts +70 -0
- package/dist/cjs/Radio/index.js +199 -0
- package/dist/cjs/Radio/style.less +326 -0
- package/dist/cjs/Rate/index.d.ts +37 -0
- package/dist/cjs/Rate/index.js +151 -0
- package/dist/cjs/Rate/style.less +170 -0
- package/dist/cjs/Segmented/index.d.ts +31 -0
- package/dist/cjs/Segmented/index.js +121 -0
- package/dist/cjs/Segmented/style.less +167 -0
- package/dist/cjs/Select/index.d.ts +67 -0
- package/dist/cjs/Select/index.js +403 -0
- package/dist/cjs/Select/style.less +523 -0
- package/dist/cjs/Slider/index.d.ts +41 -0
- package/dist/cjs/Slider/index.js +325 -0
- package/dist/cjs/Slider/style.less +287 -0
- package/dist/cjs/Statistic/index.d.ts +26 -0
- package/dist/cjs/Statistic/index.js +71 -0
- package/dist/cjs/Statistic/style.less +94 -0
- package/dist/cjs/Switch/index.d.ts +28 -0
- package/dist/cjs/Switch/index.js +71 -0
- package/dist/cjs/Switch/style.less +212 -0
- package/dist/cjs/Table/index.d.ts +188 -0
- package/dist/cjs/Table/index.js +787 -0
- package/dist/cjs/Table/style.less +663 -0
- package/dist/cjs/Tag/index.d.ts +51 -0
- package/dist/cjs/Tag/index.js +142 -0
- package/dist/cjs/Tag/style.less +356 -0
- package/dist/cjs/TimePicker/index.d.ts +51 -0
- package/dist/cjs/TimePicker/index.js +332 -0
- package/dist/cjs/TimePicker/style.less +384 -0
- package/dist/cjs/Timeline/index.d.ts +47 -0
- package/dist/cjs/Timeline/index.js +127 -0
- package/dist/cjs/Timeline/style.less +265 -0
- package/dist/cjs/Tooltip/index.d.ts +53 -0
- package/dist/cjs/Tooltip/index.js +468 -0
- package/dist/cjs/Tooltip/style.less +237 -0
- package/dist/cjs/Transfer/index.d.ts +52 -0
- package/dist/cjs/Transfer/index.js +344 -0
- package/dist/cjs/Transfer/style.less +331 -0
- package/dist/cjs/TreeSelect/index.d.ts +54 -0
- package/dist/cjs/TreeSelect/index.js +373 -0
- package/dist/cjs/TreeSelect/style.less +471 -0
- package/dist/cjs/Upload/index.d.ts +65 -0
- package/dist/cjs/Upload/index.js +517 -0
- package/dist/cjs/Upload/style.less +424 -0
- package/dist/cjs/index.d.ts +58 -0
- package/dist/cjs/index.js +227 -0
- package/dist/esm/Avatar/index.d.ts +47 -0
- package/dist/esm/Avatar/index.js +142 -0
- package/dist/esm/Avatar/style.less +193 -0
- package/dist/esm/Badge/index.d.ts +48 -0
- package/dist/esm/Badge/index.js +137 -0
- package/dist/esm/Badge/style.less +237 -0
- package/dist/esm/Calendar/index.d.ts +33 -0
- package/dist/esm/Calendar/index.js +291 -0
- package/dist/esm/Calendar/style.less +384 -0
- package/dist/esm/Card/index.d.ts +68 -0
- package/dist/esm/Card/index.js +149 -0
- package/dist/esm/Card/style.less +356 -0
- package/dist/esm/Carousel/index.d.ts +33 -0
- package/dist/esm/Carousel/index.js +163 -0
- package/dist/esm/Carousel/style.less +232 -0
- package/dist/esm/Collapse/index.d.ts +55 -0
- package/dist/esm/Collapse/index.js +187 -0
- package/dist/esm/Collapse/style.less +217 -0
- package/dist/esm/Descriptions/index.d.ts +54 -0
- package/dist/esm/Descriptions/index.js +179 -0
- package/dist/esm/Descriptions/style.less +259 -0
- package/dist/esm/Empty/index.d.ts +21 -0
- package/dist/esm/Empty/index.js +109 -0
- package/dist/esm/Empty/style.less +103 -0
- package/dist/esm/Image/index.d.ts +30 -0
- package/dist/esm/Image/index.js +149 -0
- package/dist/esm/Image/style.less +156 -0
- package/dist/esm/Input/index.d.ts +24 -0
- package/dist/esm/Input/index.js +151 -0
- package/dist/esm/Input/style.less +276 -0
- package/dist/esm/InputNumber/index.d.ts +47 -0
- package/dist/esm/InputNumber/index.js +316 -0
- package/dist/esm/InputNumber/style.less +392 -0
- package/dist/esm/Mentions/index.d.ts +57 -0
- package/dist/esm/Mentions/index.js +374 -0
- package/dist/esm/Mentions/style.less +297 -0
- package/dist/esm/Popover/index.d.ts +30 -0
- package/dist/esm/Popover/index.js +126 -0
- package/dist/esm/Popover/style.less +279 -0
- package/dist/esm/QRCode/index.d.ts +30 -0
- package/dist/esm/QRCode/index.js +158 -0
- package/dist/esm/QRCode/style.less +201 -0
- package/dist/esm/Radio/index.d.ts +70 -0
- package/dist/esm/Radio/index.js +193 -0
- package/dist/esm/Radio/style.less +326 -0
- package/dist/esm/Rate/index.d.ts +37 -0
- package/dist/esm/Rate/index.js +143 -0
- package/dist/esm/Rate/style.less +170 -0
- package/dist/esm/Segmented/index.d.ts +31 -0
- package/dist/esm/Segmented/index.js +113 -0
- package/dist/esm/Segmented/style.less +167 -0
- package/dist/esm/Select/index.d.ts +67 -0
- package/dist/esm/Select/index.js +398 -0
- package/dist/esm/Select/style.less +523 -0
- package/dist/esm/Slider/index.d.ts +41 -0
- package/dist/esm/Slider/index.js +318 -0
- package/dist/esm/Slider/style.less +287 -0
- package/dist/esm/Statistic/index.d.ts +26 -0
- package/dist/esm/Statistic/index.js +65 -0
- package/dist/esm/Statistic/style.less +94 -0
- package/dist/esm/Switch/index.d.ts +28 -0
- package/dist/esm/Switch/index.js +63 -0
- package/dist/esm/Switch/style.less +212 -0
- package/dist/esm/Table/index.d.ts +188 -0
- package/dist/esm/Table/index.js +797 -0
- package/dist/esm/Table/style.less +663 -0
- package/dist/esm/Tag/index.d.ts +51 -0
- package/dist/esm/Tag/index.js +144 -0
- package/dist/esm/Tag/style.less +356 -0
- package/dist/esm/TimePicker/index.d.ts +51 -0
- package/dist/esm/TimePicker/index.js +327 -0
- package/dist/esm/TimePicker/style.less +384 -0
- package/dist/esm/Timeline/index.d.ts +47 -0
- package/dist/esm/Timeline/index.js +130 -0
- package/dist/esm/Timeline/style.less +265 -0
- package/dist/esm/Tooltip/index.d.ts +53 -0
- package/dist/esm/Tooltip/index.js +471 -0
- package/dist/esm/Tooltip/style.less +237 -0
- package/dist/esm/Transfer/index.d.ts +52 -0
- package/dist/esm/Transfer/index.js +340 -0
- package/dist/esm/Transfer/style.less +331 -0
- package/dist/esm/TreeSelect/index.d.ts +54 -0
- package/dist/esm/TreeSelect/index.js +369 -0
- package/dist/esm/TreeSelect/style.less +471 -0
- package/dist/esm/Upload/index.d.ts +65 -0
- package/dist/esm/Upload/index.js +513 -0
- package/dist/esm/Upload/style.less +424 -0
- package/dist/esm/index.d.ts +58 -0
- package/dist/esm/index.js +30 -1
- package/package.json +6 -3
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
// Empty 空状态组件样式
|
|
2
|
+
|
|
3
|
+
@prefix: kage-empty;
|
|
4
|
+
|
|
5
|
+
// 颜色变量
|
|
6
|
+
@empty-description-color: rgba(0, 0, 0, 0.45);
|
|
7
|
+
|
|
8
|
+
// ============ 容器 ============
|
|
9
|
+
.@{prefix} {
|
|
10
|
+
display: flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
align-items: center;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
padding: 32px 16px;
|
|
15
|
+
text-align: center;
|
|
16
|
+
font-size: 14px;
|
|
17
|
+
line-height: 1.5715;
|
|
18
|
+
|
|
19
|
+
* {
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// ============ 图片 ============
|
|
25
|
+
.@{prefix}-image {
|
|
26
|
+
display: inline-block;
|
|
27
|
+
height: 100px;
|
|
28
|
+
margin-bottom: 8px;
|
|
29
|
+
|
|
30
|
+
img {
|
|
31
|
+
height: 100%;
|
|
32
|
+
width: auto;
|
|
33
|
+
display: block;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
svg {
|
|
37
|
+
height: 100%;
|
|
38
|
+
width: auto;
|
|
39
|
+
display: block;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
// ============ 描述文字 ============
|
|
44
|
+
.@{prefix}-description {
|
|
45
|
+
color: @empty-description-color;
|
|
46
|
+
font-size: 14px;
|
|
47
|
+
line-height: 1.5715;
|
|
48
|
+
margin-top: 8px;
|
|
49
|
+
margin-bottom: 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// ============ 底部操作 ============
|
|
53
|
+
.@{prefix}-footer {
|
|
54
|
+
margin-top: 16px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// ============ 小尺寸 ============
|
|
58
|
+
.@{prefix}-small {
|
|
59
|
+
padding: 24px 8px;
|
|
60
|
+
|
|
61
|
+
.@{prefix}-image {
|
|
62
|
+
height: 40px;
|
|
63
|
+
margin-bottom: 8px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.@{prefix}-description {
|
|
67
|
+
font-size: 12px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.@{prefix}-footer {
|
|
71
|
+
margin-top: 12px;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// ============ 暗色模式适配 ============
|
|
76
|
+
[data-theme='dark'],
|
|
77
|
+
[data-prefers-color-scheme='dark'],
|
|
78
|
+
[data-prefers-color='dark'] {
|
|
79
|
+
.@{prefix}-description {
|
|
80
|
+
color: rgba(255, 255, 255, 0.45);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.@{prefix}-image {
|
|
84
|
+
svg {
|
|
85
|
+
ellipse {
|
|
86
|
+
fill: #2c2c2c;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
path[stroke] {
|
|
90
|
+
stroke: #434343;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
path[fill='#fafafa'] {
|
|
94
|
+
fill: #1f1f1f;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
path[fill='#f5f5f5'] {
|
|
98
|
+
fill: #2c2c2c;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React, { CSSProperties, ImgHTMLAttributes } from 'react';
|
|
2
|
+
import './style.less';
|
|
3
|
+
export interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {
|
|
4
|
+
/** 图片地址 */
|
|
5
|
+
src?: string;
|
|
6
|
+
/** 图片描述 */
|
|
7
|
+
alt?: string;
|
|
8
|
+
/** 图片宽度 */
|
|
9
|
+
width?: string | number;
|
|
10
|
+
/** 图片高度 */
|
|
11
|
+
height?: string | number;
|
|
12
|
+
/** 加载占位图 */
|
|
13
|
+
placeholder?: React.ReactNode;
|
|
14
|
+
/** 加载失败容错图 */
|
|
15
|
+
fallback?: string;
|
|
16
|
+
/** 预览配置 */
|
|
17
|
+
preview?: boolean;
|
|
18
|
+
/** 自定义类名 */
|
|
19
|
+
className?: string;
|
|
20
|
+
/** 自定义样式 */
|
|
21
|
+
style?: CSSProperties;
|
|
22
|
+
/** 图片根样式 */
|
|
23
|
+
rootClassName?: string;
|
|
24
|
+
/** 加载完成回调 */
|
|
25
|
+
onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
|
|
26
|
+
/** 加载失败回调 */
|
|
27
|
+
onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
|
|
28
|
+
}
|
|
29
|
+
export declare const Image: React.FC<ImageProps>;
|
|
30
|
+
export default Image;
|
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.Image = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
require("./style.less");
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
+
var _excluded = ["src", "alt", "width", "height", "placeholder", "fallback", "preview", "className", "style", "rootClassName", "onLoad", "onError"]; // ============ Image Props ============
|
|
12
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
13
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
15
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
16
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
17
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
18
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
19
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
20
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
21
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
22
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
23
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
24
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
25
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
26
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
27
|
+
// ============ Image Component ============
|
|
28
|
+
var Image = exports.Image = function Image(_ref) {
|
|
29
|
+
var src = _ref.src,
|
|
30
|
+
alt = _ref.alt,
|
|
31
|
+
width = _ref.width,
|
|
32
|
+
height = _ref.height,
|
|
33
|
+
placeholder = _ref.placeholder,
|
|
34
|
+
fallback = _ref.fallback,
|
|
35
|
+
_ref$preview = _ref.preview,
|
|
36
|
+
preview = _ref$preview === void 0 ? false : _ref$preview,
|
|
37
|
+
_ref$className = _ref.className,
|
|
38
|
+
className = _ref$className === void 0 ? '' : _ref$className,
|
|
39
|
+
style = _ref.style,
|
|
40
|
+
_ref$rootClassName = _ref.rootClassName,
|
|
41
|
+
rootClassName = _ref$rootClassName === void 0 ? '' : _ref$rootClassName,
|
|
42
|
+
onLoad = _ref.onLoad,
|
|
43
|
+
onError = _ref.onError,
|
|
44
|
+
restProps = _objectWithoutProperties(_ref, _excluded);
|
|
45
|
+
var _useState = (0, _react.useState)(true),
|
|
46
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
47
|
+
loading = _useState2[0],
|
|
48
|
+
setLoading = _useState2[1];
|
|
49
|
+
var _useState3 = (0, _react.useState)(false),
|
|
50
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
51
|
+
error = _useState4[0],
|
|
52
|
+
setError = _useState4[1];
|
|
53
|
+
var _useState5 = (0, _react.useState)(false),
|
|
54
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
55
|
+
previewVisible = _useState6[0],
|
|
56
|
+
setPreviewVisible = _useState6[1];
|
|
57
|
+
var handleLoad = (0, _react.useCallback)(function (e) {
|
|
58
|
+
setLoading(false);
|
|
59
|
+
onLoad === null || onLoad === void 0 || onLoad(e);
|
|
60
|
+
}, [onLoad]);
|
|
61
|
+
var handleError = (0, _react.useCallback)(function (e) {
|
|
62
|
+
setLoading(false);
|
|
63
|
+
setError(true);
|
|
64
|
+
onError === null || onError === void 0 || onError(e);
|
|
65
|
+
}, [onError]);
|
|
66
|
+
var handlePreview = (0, _react.useCallback)(function () {
|
|
67
|
+
if (preview && !error) {
|
|
68
|
+
setPreviewVisible(true);
|
|
69
|
+
}
|
|
70
|
+
}, [preview, error]);
|
|
71
|
+
var handleClosePreview = (0, _react.useCallback)(function () {
|
|
72
|
+
setPreviewVisible(false);
|
|
73
|
+
}, []);
|
|
74
|
+
var containerStyle = _objectSpread({
|
|
75
|
+
width: width,
|
|
76
|
+
height: height
|
|
77
|
+
}, style);
|
|
78
|
+
var imgStyle = {
|
|
79
|
+
width: width || '100%',
|
|
80
|
+
height: height || 'auto'
|
|
81
|
+
};
|
|
82
|
+
var classNames = ['kage-image', preview && !error ? 'kage-image-preview-enabled' : '', rootClassName].filter(Boolean).join(' ');
|
|
83
|
+
var imgClassNames = ['kage-image-img', loading ? 'kage-image-img-loading' : '', className].filter(Boolean).join(' ');
|
|
84
|
+
|
|
85
|
+
// 默认占位符
|
|
86
|
+
var defaultPlaceholder = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
87
|
+
className: "kage-image-placeholder",
|
|
88
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
|
|
89
|
+
viewBox: "0 0 1024 1024",
|
|
90
|
+
width: "48",
|
|
91
|
+
height: "48",
|
|
92
|
+
fill: "currentColor",
|
|
93
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
|
|
94
|
+
d: "M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 632H136v-39.9l138.5-164.3 150.1 178L658.1 489 888 761.6V792z m0-129.8L664.2 396.8c-3.2-3.8-9-3.8-12.2 0L424.6 666.4l-144-170.7c-3.2-3.8-9-3.8-12.2 0L136 652.7V232h752v430.2z"
|
|
95
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
|
|
96
|
+
d: "M304 456c48.6 0 88-39.4 88-88s-39.4-88-88-88-88 39.4-88 88 39.4 88 88 88z m0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28z"
|
|
97
|
+
})]
|
|
98
|
+
})
|
|
99
|
+
});
|
|
100
|
+
|
|
101
|
+
// 错误占位符
|
|
102
|
+
var errorPlaceholder = /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
103
|
+
className: "kage-image-error",
|
|
104
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
|
|
105
|
+
viewBox: "0 0 1024 1024",
|
|
106
|
+
width: "48",
|
|
107
|
+
height: "48",
|
|
108
|
+
fill: "currentColor",
|
|
109
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
|
|
110
|
+
d: "M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 632H136V232h752v560z"
|
|
111
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
|
|
112
|
+
d: "M304 456c48.6 0 88-39.4 88-88s-39.4-88-88-88-88 39.4-88 88 39.4 88 88 88z m0-116c15.5 0 28 12.5 28 28s-12.5 28-28 28-28-12.5-28-28 12.5-28 28-28zM674.5 440.5l-68 68-68-68c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l68 68-68 68c-12.5 12.5-12.5 32.8 0 45.3 6.2 6.2 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4l68-68 68 68c6.2 6.2 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4c12.5-12.5 12.5-32.8 0-45.3l-68-68 68-68c12.5-12.5 12.5-32.8 0-45.3s-32.7-12.5-45.2 0z"
|
|
113
|
+
})]
|
|
114
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
115
|
+
className: "kage-image-error-text",
|
|
116
|
+
children: "\u52A0\u8F7D\u5931\u8D25"
|
|
117
|
+
})]
|
|
118
|
+
});
|
|
119
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
120
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
121
|
+
className: classNames,
|
|
122
|
+
style: containerStyle,
|
|
123
|
+
children: [loading && (placeholder !== undefined ? placeholder : defaultPlaceholder), !error && /*#__PURE__*/(0, _jsxRuntime.jsx)("img", _objectSpread(_objectSpread({}, restProps), {}, {
|
|
124
|
+
src: src,
|
|
125
|
+
alt: alt,
|
|
126
|
+
className: imgClassNames,
|
|
127
|
+
style: imgStyle,
|
|
128
|
+
onLoad: handleLoad,
|
|
129
|
+
onError: handleError,
|
|
130
|
+
onClick: handlePreview
|
|
131
|
+
})), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
|
|
132
|
+
children: fallback ? /*#__PURE__*/(0, _jsxRuntime.jsx)("img", _objectSpread(_objectSpread({}, restProps), {}, {
|
|
133
|
+
src: fallback,
|
|
134
|
+
alt: alt,
|
|
135
|
+
className: imgClassNames,
|
|
136
|
+
style: imgStyle
|
|
137
|
+
})) : errorPlaceholder
|
|
138
|
+
}), preview && previewVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
139
|
+
className: "kage-image-preview-mask",
|
|
140
|
+
onClick: handleClosePreview,
|
|
141
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
142
|
+
className: "kage-image-preview-wrap",
|
|
143
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
|
|
144
|
+
src: src,
|
|
145
|
+
alt: alt,
|
|
146
|
+
className: "kage-image-preview-img"
|
|
147
|
+
})
|
|
148
|
+
})
|
|
149
|
+
})]
|
|
150
|
+
})
|
|
151
|
+
});
|
|
152
|
+
};
|
|
153
|
+
var _default = exports.default = Image;
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
// Image 图片组件样式
|
|
2
|
+
|
|
3
|
+
@prefix: kage-image;
|
|
4
|
+
|
|
5
|
+
// 颜色变量
|
|
6
|
+
@image-bg: #f5f5f5;
|
|
7
|
+
@image-placeholder-color: rgba(0, 0, 0, 0.25);
|
|
8
|
+
@image-error-color: rgba(0, 0, 0, 0.45);
|
|
9
|
+
|
|
10
|
+
// ============ 容器 ============
|
|
11
|
+
.@{prefix} {
|
|
12
|
+
position: relative;
|
|
13
|
+
display: inline-block;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
background-color: @image-bg;
|
|
16
|
+
|
|
17
|
+
* {
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// ============ 图片 ============
|
|
23
|
+
.@{prefix}-img {
|
|
24
|
+
display: block;
|
|
25
|
+
width: 100%;
|
|
26
|
+
height: auto;
|
|
27
|
+
transition: opacity 0.3s ease;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.@{prefix}-img-loading {
|
|
31
|
+
opacity: 0;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// ============ 预览功能 ============
|
|
35
|
+
.@{prefix}-preview-enabled {
|
|
36
|
+
cursor: pointer;
|
|
37
|
+
|
|
38
|
+
.@{prefix}-img {
|
|
39
|
+
&:hover {
|
|
40
|
+
opacity: 0.85;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// ============ 占位符 ============
|
|
46
|
+
.@{prefix}-placeholder {
|
|
47
|
+
position: absolute;
|
|
48
|
+
top: 0;
|
|
49
|
+
left: 0;
|
|
50
|
+
width: 100%;
|
|
51
|
+
height: 100%;
|
|
52
|
+
display: flex;
|
|
53
|
+
align-items: center;
|
|
54
|
+
justify-content: center;
|
|
55
|
+
background-color: @image-bg;
|
|
56
|
+
color: @image-placeholder-color;
|
|
57
|
+
pointer-events: none;
|
|
58
|
+
|
|
59
|
+
svg {
|
|
60
|
+
width: 48px;
|
|
61
|
+
height: 48px;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// ============ 错误状态 ============
|
|
66
|
+
.@{prefix}-error {
|
|
67
|
+
position: absolute;
|
|
68
|
+
top: 0;
|
|
69
|
+
left: 0;
|
|
70
|
+
width: 100%;
|
|
71
|
+
height: 100%;
|
|
72
|
+
display: flex;
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
background-color: @image-bg;
|
|
77
|
+
color: @image-error-color;
|
|
78
|
+
|
|
79
|
+
svg {
|
|
80
|
+
width: 48px;
|
|
81
|
+
height: 48px;
|
|
82
|
+
margin-bottom: 8px;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.@{prefix}-error-text {
|
|
87
|
+
font-size: 14px;
|
|
88
|
+
color: @image-error-color;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// ============ 预览遮罩 ============
|
|
92
|
+
.@{prefix}-preview-mask {
|
|
93
|
+
position: fixed;
|
|
94
|
+
top: 0;
|
|
95
|
+
left: 0;
|
|
96
|
+
right: 0;
|
|
97
|
+
bottom: 0;
|
|
98
|
+
z-index: 1000;
|
|
99
|
+
background-color: rgba(0, 0, 0, 0.85);
|
|
100
|
+
display: flex;
|
|
101
|
+
align-items: center;
|
|
102
|
+
justify-content: center;
|
|
103
|
+
cursor: zoom-out;
|
|
104
|
+
animation: fadeIn 0.3s ease;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.@{prefix}-preview-wrap {
|
|
108
|
+
display: flex;
|
|
109
|
+
align-items: center;
|
|
110
|
+
justify-content: center;
|
|
111
|
+
width: 100%;
|
|
112
|
+
height: 100%;
|
|
113
|
+
padding: 40px;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.@{prefix}-preview-img {
|
|
117
|
+
max-width: 100%;
|
|
118
|
+
max-height: 100%;
|
|
119
|
+
object-fit: contain;
|
|
120
|
+
display: block;
|
|
121
|
+
cursor: default;
|
|
122
|
+
pointer-events: none;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
@keyframes fadeIn {
|
|
126
|
+
from {
|
|
127
|
+
opacity: 0;
|
|
128
|
+
}
|
|
129
|
+
to {
|
|
130
|
+
opacity: 1;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
// ============ 暗色模式适配 ============
|
|
135
|
+
[data-theme='dark'],
|
|
136
|
+
[data-prefers-color-scheme='dark'],
|
|
137
|
+
[data-prefers-color='dark'] {
|
|
138
|
+
.@{prefix} {
|
|
139
|
+
background-color: #2c2c2c;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.@{prefix}-placeholder {
|
|
143
|
+
background-color: #2c2c2c;
|
|
144
|
+
color: rgba(255, 255, 255, 0.25);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.@{prefix}-error {
|
|
148
|
+
background-color: #2c2c2c;
|
|
149
|
+
color: rgba(255, 255, 255, 0.45);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.@{prefix}-error-text {
|
|
153
|
+
color: rgba(255, 255, 255, 0.45);
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './style.less';
|
|
3
|
+
export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
|
|
4
|
+
/** 控件大小 */
|
|
5
|
+
size?: 'large' | 'middle' | 'small';
|
|
6
|
+
/** 状态 */
|
|
7
|
+
status?: 'error' | 'warning';
|
|
8
|
+
/** 允许清除 */
|
|
9
|
+
allowClear?: boolean;
|
|
10
|
+
/** 前缀图标/内容 */
|
|
11
|
+
prefix?: React.ReactNode;
|
|
12
|
+
/** 后缀图标/内容 */
|
|
13
|
+
suffix?: React.ReactNode;
|
|
14
|
+
/** 输入框前置标签 */
|
|
15
|
+
addonBefore?: React.ReactNode;
|
|
16
|
+
/** 输入框后置标签 */
|
|
17
|
+
addonAfter?: React.ReactNode;
|
|
18
|
+
/** 展示字数统计 */
|
|
19
|
+
showCount?: boolean;
|
|
20
|
+
/** 按下 Enter 回调 */
|
|
21
|
+
onPressEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
22
|
+
}
|
|
23
|
+
export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
24
|
+
export default Input;
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.Input = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
require("./style.less");
|
|
10
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
11
|
+
var _excluded = ["value", "defaultValue", "size", "status", "allowClear", "prefix", "suffix", "addonBefore", "addonAfter", "showCount", "disabled", "onChange", "onFocus", "onBlur", "onKeyDown", "onPressEnter", "className", "style", "maxLength"];
|
|
12
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
13
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
14
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
15
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
16
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
17
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
18
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
19
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
20
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
21
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
22
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
23
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
24
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
25
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
26
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
27
|
+
var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
28
|
+
var controlledValue = props.value,
|
|
29
|
+
_props$defaultValue = props.defaultValue,
|
|
30
|
+
defaultValue = _props$defaultValue === void 0 ? '' : _props$defaultValue,
|
|
31
|
+
_props$size = props.size,
|
|
32
|
+
size = _props$size === void 0 ? 'middle' : _props$size,
|
|
33
|
+
status = props.status,
|
|
34
|
+
_props$allowClear = props.allowClear,
|
|
35
|
+
allowClear = _props$allowClear === void 0 ? false : _props$allowClear,
|
|
36
|
+
prefix = props.prefix,
|
|
37
|
+
suffix = props.suffix,
|
|
38
|
+
addonBefore = props.addonBefore,
|
|
39
|
+
addonAfter = props.addonAfter,
|
|
40
|
+
_props$showCount = props.showCount,
|
|
41
|
+
showCount = _props$showCount === void 0 ? false : _props$showCount,
|
|
42
|
+
_props$disabled = props.disabled,
|
|
43
|
+
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
44
|
+
onChange = props.onChange,
|
|
45
|
+
onFocus = props.onFocus,
|
|
46
|
+
onBlur = props.onBlur,
|
|
47
|
+
onKeyDown = props.onKeyDown,
|
|
48
|
+
onPressEnter = props.onPressEnter,
|
|
49
|
+
_props$className = props.className,
|
|
50
|
+
className = _props$className === void 0 ? '' : _props$className,
|
|
51
|
+
style = props.style,
|
|
52
|
+
maxLength = props.maxLength,
|
|
53
|
+
rest = _objectWithoutProperties(props, _excluded);
|
|
54
|
+
var _useState = (0, _react.useState)(typeof defaultValue === 'string' ? defaultValue : String(defaultValue !== null && defaultValue !== void 0 ? defaultValue : '')),
|
|
55
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
56
|
+
internalValue = _useState2[0],
|
|
57
|
+
setInternalValue = _useState2[1];
|
|
58
|
+
var _useState3 = (0, _react.useState)(false),
|
|
59
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
60
|
+
focused = _useState4[0],
|
|
61
|
+
setFocused = _useState4[1];
|
|
62
|
+
var inputRef = (0, _react.useRef)(null);
|
|
63
|
+
var mergedValue = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalValue;
|
|
64
|
+
var setInputRef = (0, _react.useCallback)(function (node) {
|
|
65
|
+
inputRef.current = node;
|
|
66
|
+
if (typeof ref === 'function') {
|
|
67
|
+
ref(node);
|
|
68
|
+
} else if (ref && 'current' in ref) {
|
|
69
|
+
ref.current = node;
|
|
70
|
+
}
|
|
71
|
+
}, [ref]);
|
|
72
|
+
var handleChange = (0, _react.useCallback)(function (e) {
|
|
73
|
+
if (controlledValue === undefined) {
|
|
74
|
+
setInternalValue(e.target.value);
|
|
75
|
+
}
|
|
76
|
+
onChange === null || onChange === void 0 || onChange(e);
|
|
77
|
+
}, [controlledValue, onChange]);
|
|
78
|
+
var handleFocus = (0, _react.useCallback)(function (e) {
|
|
79
|
+
setFocused(true);
|
|
80
|
+
onFocus === null || onFocus === void 0 || onFocus(e);
|
|
81
|
+
}, [onFocus]);
|
|
82
|
+
var handleBlur = (0, _react.useCallback)(function (e) {
|
|
83
|
+
setFocused(false);
|
|
84
|
+
onBlur === null || onBlur === void 0 || onBlur(e);
|
|
85
|
+
}, [onBlur]);
|
|
86
|
+
var handleKeyDown = (0, _react.useCallback)(function (e) {
|
|
87
|
+
if (e.key === 'Enter') {
|
|
88
|
+
onPressEnter === null || onPressEnter === void 0 || onPressEnter(e);
|
|
89
|
+
}
|
|
90
|
+
onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
|
|
91
|
+
}, [onKeyDown, onPressEnter]);
|
|
92
|
+
var handleClear = (0, _react.useCallback)(function (e) {
|
|
93
|
+
var _inputRef$current;
|
|
94
|
+
e.preventDefault();
|
|
95
|
+
e.stopPropagation();
|
|
96
|
+
if (disabled) return;
|
|
97
|
+
if (controlledValue === undefined) {
|
|
98
|
+
setInternalValue('');
|
|
99
|
+
}
|
|
100
|
+
var syntheticEvent = {
|
|
101
|
+
target: {
|
|
102
|
+
value: ''
|
|
103
|
+
},
|
|
104
|
+
currentTarget: {
|
|
105
|
+
value: ''
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
onChange === null || onChange === void 0 || onChange(syntheticEvent);
|
|
109
|
+
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
|
|
110
|
+
}, [controlledValue, disabled, onChange]);
|
|
111
|
+
var valueStr = typeof mergedValue === 'string' ? mergedValue : String(mergedValue !== null && mergedValue !== void 0 ? mergedValue : '');
|
|
112
|
+
var showClear = allowClear && !disabled && valueStr.length > 0;
|
|
113
|
+
var wrapperClassNames = ['kage-input-wrapper', "kage-input-".concat(size), status && "kage-input-status-".concat(status), disabled && 'kage-input-disabled', focused && 'kage-input-focused', (prefix || suffix) && 'kage-input-has-affix', showClear && 'kage-input-has-clear'].filter(Boolean).join(' ');
|
|
114
|
+
var groupClassNames = ['kage-input-group', addonBefore && 'kage-input-group-addon-before', addonAfter && 'kage-input-group-addon-after', className].filter(Boolean).join(' ');
|
|
115
|
+
var countText = maxLength !== undefined && maxLength >= 0 ? "".concat(valueStr.length, "/").concat(maxLength) : valueStr.length;
|
|
116
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
117
|
+
className: groupClassNames,
|
|
118
|
+
style: style,
|
|
119
|
+
children: [addonBefore && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
120
|
+
className: "kage-input-addon",
|
|
121
|
+
children: addonBefore
|
|
122
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
|
|
123
|
+
className: wrapperClassNames,
|
|
124
|
+
children: [prefix && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
125
|
+
className: "kage-input-prefix",
|
|
126
|
+
children: prefix
|
|
127
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread({
|
|
128
|
+
ref: setInputRef,
|
|
129
|
+
className: "kage-input-element",
|
|
130
|
+
value: valueStr,
|
|
131
|
+
disabled: disabled,
|
|
132
|
+
onChange: handleChange,
|
|
133
|
+
onFocus: handleFocus,
|
|
134
|
+
onBlur: handleBlur,
|
|
135
|
+
onKeyDown: handleKeyDown,
|
|
136
|
+
maxLength: maxLength
|
|
137
|
+
}, rest)), showClear && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
138
|
+
className: "kage-input-clear",
|
|
139
|
+
onMouseDown: function onMouseDown(e) {
|
|
140
|
+
return e.preventDefault();
|
|
141
|
+
},
|
|
142
|
+
onClick: handleClear,
|
|
143
|
+
children: "\xD7"
|
|
144
|
+
}), suffix && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
145
|
+
className: "kage-input-suffix",
|
|
146
|
+
children: suffix
|
|
147
|
+
}), showCount && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
148
|
+
className: "kage-input-count",
|
|
149
|
+
children: countText
|
|
150
|
+
})]
|
|
151
|
+
}), addonAfter && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
152
|
+
className: "kage-input-addon",
|
|
153
|
+
children: addonAfter
|
|
154
|
+
})]
|
|
155
|
+
});
|
|
156
|
+
});
|
|
157
|
+
Input.displayName = 'Input';
|
|
158
|
+
var _default = exports.default = Input;
|