@aloudata/aloudata-design 2.0.5 → 2.1.0
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/Checkbox/type.d.ts +1 -0
- package/dist/DataPreviewTable/components/Body/index.js +1 -0
- package/dist/DataPreviewTable/style/index.less +4 -0
- package/dist/IconButton/index.js +1 -2
- package/dist/InputSearch/index.d.ts +12 -0
- package/dist/InputSearch/index.js +67 -0
- package/dist/InputSearch/style/index.d.ts +2 -0
- package/dist/InputSearch/style/index.js +2 -0
- package/dist/InputSearch/style/index.less +60 -0
- package/dist/Menu/style/index.less +1 -1
- package/dist/RenameInput/index.d.ts +15 -0
- package/dist/RenameInput/index.js +98 -0
- package/dist/RenameInput/style/index.d.ts +2 -0
- package/dist/RenameInput/style/index.js +2 -0
- package/dist/RenameInput/style/index.less +54 -0
- package/dist/User/index.d.ts +9 -0
- package/dist/User/index.js +26 -0
- package/dist/User/style/index.d.ts +2 -0
- package/dist/User/style/index.js +2 -0
- package/dist/User/style/index.less +37 -0
- package/dist/ald.min.css +1 -1
- package/dist/index.d.ts +3 -0
- package/dist/index.js +3 -0
- package/dist/index.less +3 -0
- package/dist/notification/index.d.ts +8 -4
- package/package.json +1 -1
package/dist/Checkbox/type.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { CheckboxChangeEvent, CheckboxGroupProps, CheckboxProps } from 'antd/lib/checkbox';
|
|
2
2
|
import { CheckboxOptionType, CheckboxValueType } from 'antd/lib/checkbox/Group';
|
|
3
3
|
export type TSize = 'middle' | 'small';
|
|
4
|
+
export type { CheckboxChangeEvent, CheckboxGroupProps, CheckboxProps };
|
|
4
5
|
export declare enum EDirection {
|
|
5
6
|
VERTICAL = "vertical",
|
|
6
7
|
HORIZONTAL = "horizontal"
|
|
@@ -36,6 +36,7 @@ function Body(props) {
|
|
|
36
36
|
var render = columns[columnIndex].render;
|
|
37
37
|
if (render) {
|
|
38
38
|
return /*#__PURE__*/React.createElement("div", {
|
|
39
|
+
className: "ald-data-preview-body-cell ald-data-preview-body-cell-custom",
|
|
39
40
|
style: style,
|
|
40
41
|
key: columnIndex
|
|
41
42
|
}, render(cell));
|
package/dist/IconButton/index.js
CHANGED
|
@@ -59,8 +59,7 @@ var DropdownButton = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
59
59
|
id = props.id,
|
|
60
60
|
_props$trigger = props.trigger,
|
|
61
61
|
trigger = _props$trigger === void 0 ? ['click'] : _props$trigger,
|
|
62
|
-
|
|
63
|
-
showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
|
|
62
|
+
showArrow = props.showArrow,
|
|
64
63
|
_props$mode2 = props.mode,
|
|
65
64
|
mode = _props$mode2 === void 0 ? 'light' : _props$mode2,
|
|
66
65
|
restDropdownProps = _objectWithoutProperties(props, _excluded);
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export default function InputSearch(props: IProps): React.JSX.Element;
|
|
3
|
+
interface IProps {
|
|
4
|
+
onSearch: (value: string) => void;
|
|
5
|
+
className?: string;
|
|
6
|
+
debounce?: boolean;
|
|
7
|
+
placeholder?: string;
|
|
8
|
+
size?: 'small' | 'middle' | 'large';
|
|
9
|
+
initWidth?: number;
|
|
10
|
+
defaultValue?: string;
|
|
11
|
+
}
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
|
+
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; }
|
|
3
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
4
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
5
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
6
|
+
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."); }
|
|
7
|
+
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); }
|
|
8
|
+
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; }
|
|
9
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
10
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
11
|
+
import { useDebounceFn } from 'ahooks';
|
|
12
|
+
import classnames from 'classnames';
|
|
13
|
+
import _ from 'lodash';
|
|
14
|
+
import React, { useCallback, useState } from 'react';
|
|
15
|
+
import { SearchLine } from "../Icon";
|
|
16
|
+
import Input from "../Input";
|
|
17
|
+
var DEFAULT_WIDTH = 68;
|
|
18
|
+
export default function InputSearch(props) {
|
|
19
|
+
var onSearch = props.onSearch,
|
|
20
|
+
className = props.className,
|
|
21
|
+
_props$debounce = props.debounce,
|
|
22
|
+
debounce = _props$debounce === void 0 ? true : _props$debounce,
|
|
23
|
+
placeholder = props.placeholder,
|
|
24
|
+
_props$size = props.size,
|
|
25
|
+
size = _props$size === void 0 ? 'small' : _props$size,
|
|
26
|
+
_props$initWidth = props.initWidth,
|
|
27
|
+
initWidth = _props$initWidth === void 0 ? DEFAULT_WIDTH : _props$initWidth,
|
|
28
|
+
defaultValue = props.defaultValue;
|
|
29
|
+
var _useState = useState(defaultValue || ''),
|
|
30
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
31
|
+
searchValue = _useState2[0],
|
|
32
|
+
setSearchValue = _useState2[1];
|
|
33
|
+
var onPressEnter = useCallback(function (e) {
|
|
34
|
+
onSearch(_.trim(e.target.value));
|
|
35
|
+
}, [onSearch]);
|
|
36
|
+
var DEFAULT_DEBOUNCE_TIME = 500;
|
|
37
|
+
var _useDebounceFn = useDebounceFn(function (val) {
|
|
38
|
+
onSearch(val);
|
|
39
|
+
}, {
|
|
40
|
+
wait: DEFAULT_DEBOUNCE_TIME
|
|
41
|
+
}),
|
|
42
|
+
debounceSearch = _useDebounceFn.run;
|
|
43
|
+
var onChangeValue = useCallback(function (e) {
|
|
44
|
+
var newValue = e.target.value;
|
|
45
|
+
if (debounce) {
|
|
46
|
+
debounceSearch(newValue);
|
|
47
|
+
}
|
|
48
|
+
setSearchValue(newValue);
|
|
49
|
+
}, [debounceSearch, debounce]);
|
|
50
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
51
|
+
className: 'ald-input-search',
|
|
52
|
+
style: {
|
|
53
|
+
'--init-width': initWidth + 'px'
|
|
54
|
+
}
|
|
55
|
+
}, /*#__PURE__*/React.createElement(Input, {
|
|
56
|
+
className: classnames(className, _defineProperty({}, 'input-search-has-value', searchValue.length !== 0)),
|
|
57
|
+
size: size,
|
|
58
|
+
onChange: onChangeValue,
|
|
59
|
+
onPressEnter: onPressEnter,
|
|
60
|
+
prefix: /*#__PURE__*/React.createElement(SearchLine, {
|
|
61
|
+
size: 16
|
|
62
|
+
}),
|
|
63
|
+
placeholder: placeholder || '搜索',
|
|
64
|
+
allowClear: true,
|
|
65
|
+
defaultValue: defaultValue
|
|
66
|
+
}));
|
|
67
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
@import '../../style/index.less';
|
|
2
|
+
@import '../../Input/style/index.less';
|
|
3
|
+
|
|
4
|
+
.ald-input-search {
|
|
5
|
+
.ald-input.ald-input.ant-input-affix-wrapper {
|
|
6
|
+
width: var(--init-width) !important;
|
|
7
|
+
background-color: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
|
|
10
|
+
input {
|
|
11
|
+
background-color: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.ant-input-suffix {
|
|
15
|
+
display: none;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
::placeholder {
|
|
19
|
+
color: var(--alias-colors-text-default, #1f2937);
|
|
20
|
+
font-size: 12px;
|
|
21
|
+
font-style: normal;
|
|
22
|
+
font-weight: 500;
|
|
23
|
+
background-color: var(--alias-colors-bg-skeleton-subtle, #f9fafb);
|
|
24
|
+
line-height: 16px; /* 133.333% */
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&.ant-input-affix-wrapper-focused,
|
|
28
|
+
&:hover,
|
|
29
|
+
&.input-search-has-value {
|
|
30
|
+
width: 200px !important;
|
|
31
|
+
transition: all 0.2s ease 0.1s !important;
|
|
32
|
+
background-color: var(--alias-colors-bg-skeleton-subtler, #fff);
|
|
33
|
+
|
|
34
|
+
input {
|
|
35
|
+
background-color: #fff;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
::placeholder {
|
|
39
|
+
color: var(--alias-colors-text-subtlest, #9ca3af);
|
|
40
|
+
background-color: var(--alias-colors-bg-skeleton-subtler, #fff);
|
|
41
|
+
font-size: 12px;
|
|
42
|
+
font-style: normal;
|
|
43
|
+
font-weight: 400;
|
|
44
|
+
line-height: 16px; /* 133.333% */
|
|
45
|
+
transition: all 0.2s ease 0.1s !important;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&.ant-input-affix-wrapper-focused,
|
|
50
|
+
&.inputSearchHasValue {
|
|
51
|
+
.ant-input-suffix {
|
|
52
|
+
display: inline-block;
|
|
53
|
+
|
|
54
|
+
.ant-input-clear-icon {
|
|
55
|
+
font-size: 16px !important;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
|
2
|
+
interface IProps {
|
|
3
|
+
value: string;
|
|
4
|
+
onConfirm?: (value: string) => void;
|
|
5
|
+
onError?: (value: string) => void;
|
|
6
|
+
className?: string;
|
|
7
|
+
width?: number;
|
|
8
|
+
fontStyle?: CSSProperties;
|
|
9
|
+
focus?: boolean;
|
|
10
|
+
maxLength?: number;
|
|
11
|
+
distance?: [left: number, right: number];
|
|
12
|
+
validateValue?: (value: string) => boolean;
|
|
13
|
+
}
|
|
14
|
+
declare const RenameInput: ({ value: propsValue, onConfirm, className, width, fontStyle, focus, maxLength, validateValue, onError, }: IProps) => React.JSX.Element;
|
|
15
|
+
export default RenameInput;
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
2
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
|
+
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; }
|
|
5
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
6
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
7
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
8
|
+
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."); }
|
|
9
|
+
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); }
|
|
10
|
+
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; }
|
|
11
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
12
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
|
+
import classNames from 'classnames';
|
|
14
|
+
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
15
|
+
var defaultWidth = 20;
|
|
16
|
+
var RenameInput = function RenameInput(_ref) {
|
|
17
|
+
var propsValue = _ref.value,
|
|
18
|
+
onConfirm = _ref.onConfirm,
|
|
19
|
+
className = _ref.className,
|
|
20
|
+
width = _ref.width,
|
|
21
|
+
fontStyle = _ref.fontStyle,
|
|
22
|
+
_ref$focus = _ref.focus,
|
|
23
|
+
focus = _ref$focus === void 0 ? false : _ref$focus,
|
|
24
|
+
maxLength = _ref.maxLength,
|
|
25
|
+
validateValue = _ref.validateValue,
|
|
26
|
+
onError = _ref.onError;
|
|
27
|
+
var _useState = useState(propsValue),
|
|
28
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
29
|
+
value = _useState2[0],
|
|
30
|
+
setValue = _useState2[1];
|
|
31
|
+
var divRef = useRef(null);
|
|
32
|
+
var inputRef = useRef(null);
|
|
33
|
+
var handleBlur = useCallback(function () {
|
|
34
|
+
var _inputRef$current;
|
|
35
|
+
onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(value);
|
|
36
|
+
(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
|
|
37
|
+
}, [onConfirm, value]);
|
|
38
|
+
useEffect(function () {
|
|
39
|
+
if (!width && divRef.current && inputRef.current) {
|
|
40
|
+
var _divRef$current;
|
|
41
|
+
var tempWidth = ((_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.offsetWidth) || defaultWidth;
|
|
42
|
+
inputRef.current.style.width = tempWidth + 'px';
|
|
43
|
+
}
|
|
44
|
+
}, [width, value]);
|
|
45
|
+
useEffect(function () {
|
|
46
|
+
setValue(propsValue);
|
|
47
|
+
}, [propsValue]);
|
|
48
|
+
useEffect(function () {
|
|
49
|
+
if (focus && inputRef.current) {
|
|
50
|
+
inputRef.current.select();
|
|
51
|
+
}
|
|
52
|
+
}, [focus]);
|
|
53
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
54
|
+
className: "ald-rename-input"
|
|
55
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
56
|
+
className: classNames(className, 'ald-rename-input-wrapper'),
|
|
57
|
+
style: _objectSpread(_objectSpread({}, fontStyle), {}, {
|
|
58
|
+
width: width
|
|
59
|
+
}),
|
|
60
|
+
value: value,
|
|
61
|
+
ref: inputRef,
|
|
62
|
+
onChange: function onChange(e) {
|
|
63
|
+
return setValue(e.target.value.trim());
|
|
64
|
+
},
|
|
65
|
+
onBlur: function onBlur(e) {
|
|
66
|
+
if (!validateValue || validateValue(e.target.value.trim())) {
|
|
67
|
+
handleBlur();
|
|
68
|
+
} else {
|
|
69
|
+
onError === null || onError === void 0 ? void 0 : onError(value);
|
|
70
|
+
setValue(propsValue);
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
autoFocus: focus,
|
|
74
|
+
onFocus: function onFocus() {
|
|
75
|
+
var _inputRef$current2;
|
|
76
|
+
(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.select();
|
|
77
|
+
},
|
|
78
|
+
maxLength: maxLength,
|
|
79
|
+
onKeyUp: function onKeyUp(e) {
|
|
80
|
+
if (e.key === 'Enter') {
|
|
81
|
+
var _inputRef$current3;
|
|
82
|
+
if (!validateValue || validateValue(((_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value.trim()) || '')) {
|
|
83
|
+
var _inputRef$current4;
|
|
84
|
+
(_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.blur();
|
|
85
|
+
} else {
|
|
86
|
+
var _inputRef$current5;
|
|
87
|
+
onError === null || onError === void 0 ? void 0 : onError(((_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.value.trim()) || '');
|
|
88
|
+
setValue(propsValue);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
93
|
+
ref: divRef,
|
|
94
|
+
className: "ald-rename-input-div",
|
|
95
|
+
style: _objectSpread({}, fontStyle)
|
|
96
|
+
}, value));
|
|
97
|
+
};
|
|
98
|
+
export default RenameInput;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
@import '../../style/index.less';
|
|
2
|
+
|
|
3
|
+
.ald-rename-input {
|
|
4
|
+
min-width: 10px;
|
|
5
|
+
height: 22px;
|
|
6
|
+
max-width: 100%;
|
|
7
|
+
display: flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
border: 1px solid transparent;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.ald-rename-input-wrapper {
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
height: 24px;
|
|
15
|
+
border: 0;
|
|
16
|
+
padding: 2px;
|
|
17
|
+
font-size: 13px;
|
|
18
|
+
max-width: 100% !important;
|
|
19
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
20
|
+
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
|
|
21
|
+
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
22
|
+
|
|
23
|
+
&:hover {
|
|
24
|
+
border: 1px solid var(--alias-colors-border-strong, #d1d5db);
|
|
25
|
+
margin-left: -1px;
|
|
26
|
+
margin-right: 1px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&:focus {
|
|
30
|
+
border: 1px solid var(--alias-colors-border-selected, #126fdd);
|
|
31
|
+
box-shadow: 0 0 0 1px #126fdd;
|
|
32
|
+
margin-left: -1px;
|
|
33
|
+
margin-right: 1px;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.ald-rename-input-div {
|
|
38
|
+
bottom: 0;
|
|
39
|
+
font-weight: 400;
|
|
40
|
+
border: 1px solid transparent;
|
|
41
|
+
padding: 0;
|
|
42
|
+
margin-left: -1px;
|
|
43
|
+
min-width: 1px;
|
|
44
|
+
max-width: 100%;
|
|
45
|
+
position: fixed;
|
|
46
|
+
pointer-events: none;
|
|
47
|
+
white-space: pre;
|
|
48
|
+
visibility: hidden;
|
|
49
|
+
overflow: hidden;
|
|
50
|
+
font-size: 13px;
|
|
51
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
52
|
+
'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
|
|
53
|
+
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
54
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface IUserProps {
|
|
3
|
+
src: React.ReactNode | string;
|
|
4
|
+
nickname: string;
|
|
5
|
+
size?: 'small' | 'middle' | 'large';
|
|
6
|
+
nicknameClassName?: string;
|
|
7
|
+
}
|
|
8
|
+
declare function User({ src, nickname, size, nicknameClassName, }: IUserProps): React.JSX.Element;
|
|
9
|
+
export default User;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import classNames from 'classnames';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import Avatar from "../Avatar";
|
|
4
|
+
var getAvatarSize = function getAvatarSize(size) {
|
|
5
|
+
return {
|
|
6
|
+
small: 16,
|
|
7
|
+
middle: 20,
|
|
8
|
+
large: 24
|
|
9
|
+
}[size];
|
|
10
|
+
};
|
|
11
|
+
function User(_ref) {
|
|
12
|
+
var src = _ref.src,
|
|
13
|
+
nickname = _ref.nickname,
|
|
14
|
+
_ref$size = _ref.size,
|
|
15
|
+
size = _ref$size === void 0 ? 'middle' : _ref$size,
|
|
16
|
+
nicknameClassName = _ref.nicknameClassName;
|
|
17
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
18
|
+
className: classNames('ald-user', "ald-user-".concat(size))
|
|
19
|
+
}, /*#__PURE__*/React.createElement(Avatar, {
|
|
20
|
+
src: src,
|
|
21
|
+
size: getAvatarSize(size || 'middle')
|
|
22
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
23
|
+
className: classNames('ald-user-text', nicknameClassName)
|
|
24
|
+
}, nickname));
|
|
25
|
+
}
|
|
26
|
+
export default User;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
@import '../../style/index.less';
|
|
2
|
+
|
|
3
|
+
.ald-user {
|
|
4
|
+
display: flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
|
|
7
|
+
&-small {
|
|
8
|
+
gap: 4px;
|
|
9
|
+
|
|
10
|
+
.ald-user-text {
|
|
11
|
+
color: var(--alias-colors-text-default, #1f2937);
|
|
12
|
+
font-size: 12px;
|
|
13
|
+
line-height: 16px;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&-middle {
|
|
18
|
+
gap: 6px;
|
|
19
|
+
|
|
20
|
+
.ald-user-text {
|
|
21
|
+
color: var(--alias-colors-text-default, #1f2937);
|
|
22
|
+
font-size: 14px;
|
|
23
|
+
line-height: 20px; /* 142.857% */
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&-large {
|
|
28
|
+
gap: 8px;
|
|
29
|
+
|
|
30
|
+
.ald-user-text {
|
|
31
|
+
color: var(--alias-colors-text-default, #1f2937);
|
|
32
|
+
font-size: 14px;
|
|
33
|
+
font-weight: 500;
|
|
34
|
+
line-height: 20px; /* 142.857% */
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|