@aloudata/aloudata-design 2.15.6 → 2.15.8

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.
Files changed (39) hide show
  1. package/dist/ColorPicker/ComplexColorPicker/ColorAlphaInput.d.ts +9 -0
  2. package/dist/ColorPicker/ComplexColorPicker/ColorAlphaInput.js +43 -0
  3. package/dist/ColorPicker/ComplexColorPicker/ColorHexInput.d.ts +9 -0
  4. package/dist/ColorPicker/ComplexColorPicker/ColorHexInput.js +46 -0
  5. package/dist/ColorPicker/ComplexColorPicker/ColorHsbInput.d.ts +9 -0
  6. package/dist/ColorPicker/ComplexColorPicker/ColorHsbInput.js +73 -0
  7. package/dist/ColorPicker/ComplexColorPicker/ColorInput.d.ts +14 -0
  8. package/dist/ColorPicker/ComplexColorPicker/ColorInput.js +78 -0
  9. package/dist/ColorPicker/ComplexColorPicker/ColorRgbInput.d.ts +9 -0
  10. package/dist/ColorPicker/ComplexColorPicker/ColorRgbInput.js +64 -0
  11. package/dist/ColorPicker/ComplexColorPicker/ColorSteppers.d.ts +15 -0
  12. package/dist/ColorPicker/ComplexColorPicker/ColorSteppers.js +45 -0
  13. package/dist/ColorPicker/ComplexColorPicker/index.d.ts +3 -0
  14. package/dist/ColorPicker/ComplexColorPicker/index.js +81 -0
  15. package/dist/ColorPicker/alpha.svg +54 -0
  16. package/dist/ColorPicker/color.d.ts +29 -0
  17. package/dist/ColorPicker/color.js +127 -0
  18. package/dist/ColorPicker/hooks/useColor.d.ts +3 -0
  19. package/dist/ColorPicker/hooks/useColor.js +31 -0
  20. package/dist/ColorPicker/index.d.ts +4 -1
  21. package/dist/ColorPicker/index.js +44 -34
  22. package/dist/ColorPicker/interface.d.ts +33 -0
  23. package/dist/ColorPicker/interface.js +8 -0
  24. package/dist/ColorPicker/style/complex.less +161 -0
  25. package/dist/ColorPicker/style/index.less +4 -0
  26. package/dist/ColorPicker/util.d.ts +15 -0
  27. package/dist/ColorPicker/util.js +65 -0
  28. package/dist/ConfigProvider/getUserList.d.ts +4 -0
  29. package/dist/ConfigProvider/hooks/useGetUserList.d.ts +4 -0
  30. package/dist/ConfigProvider/hooks/useGetUserList.js +4 -2
  31. package/dist/ConfigProvider/index.d.ts +5 -1
  32. package/dist/ConfigProvider/index.js +4 -2
  33. package/dist/InputSearch/index.d.ts +1 -0
  34. package/dist/InputSearch/index.js +8 -5
  35. package/dist/MemberPicker/components/UserGroupSelection.js +60 -27
  36. package/dist/Radio/components/Radio/index.js +1 -1
  37. package/dist/Radio/interface/radio.d.ts +1 -0
  38. package/dist/ald.min.css +1 -1
  39. package/package.json +2 -1
@@ -0,0 +1,127 @@
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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
3
+ function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
4
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
5
+ 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; }
6
+ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
7
+ 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); }
8
+ import { Color as RcColor } from '@rc-component/color-picker';
9
+ export var toHexFormat = function toHexFormat(value, alpha) {
10
+ return (value === null || value === void 0 ? void 0 : value.replace(/[^\w/]/g, '').slice(0, alpha ? 8 : 6)) || '';
11
+ };
12
+ export var getHex = function getHex(value, alpha) {
13
+ return value ? toHexFormat(value, alpha) : '';
14
+ };
15
+ export var AggregationColor = /*#__PURE__*/function () {
16
+ function AggregationColor(color) {
17
+ _classCallCheck(this, AggregationColor);
18
+ /** Original Color object */
19
+ _defineProperty(this, "metaColor", void 0);
20
+ _defineProperty(this, "colors", void 0);
21
+ _defineProperty(this, "cleared", false);
22
+ // Clone from another AggregationColor
23
+ if (color instanceof AggregationColor) {
24
+ var _color$colors;
25
+ this.metaColor = color.metaColor.clone();
26
+ this.colors = (_color$colors = color.colors) === null || _color$colors === void 0 ? void 0 : _color$colors.map(function (info) {
27
+ return {
28
+ color: new AggregationColor(info.color),
29
+ percent: info.percent
30
+ };
31
+ });
32
+ this.cleared = color.cleared;
33
+ return;
34
+ }
35
+ var isArray = Array.isArray(color);
36
+ if (isArray && color.length) {
37
+ this.colors = color.map(function (_ref) {
38
+ var c = _ref.color,
39
+ percent = _ref.percent;
40
+ return {
41
+ color: new AggregationColor(c),
42
+ percent: percent
43
+ };
44
+ });
45
+ this.metaColor = new RcColor(this.colors[0].color.metaColor);
46
+ } else {
47
+ this.metaColor = new RcColor(isArray ? '' : color);
48
+ }
49
+ if (!color || isArray && !this.colors) {
50
+ this.metaColor = this.metaColor.setA(0);
51
+ this.cleared = true;
52
+ }
53
+ }
54
+ _createClass(AggregationColor, [{
55
+ key: "toHsb",
56
+ value: function toHsb() {
57
+ return this.metaColor.toHsb();
58
+ }
59
+ }, {
60
+ key: "toHsbString",
61
+ value: function toHsbString() {
62
+ return this.metaColor.toHsbString();
63
+ }
64
+ }, {
65
+ key: "toHex",
66
+ value: function toHex() {
67
+ return getHex(this.toHexString(), this.metaColor.a < 1);
68
+ }
69
+ }, {
70
+ key: "toHexString",
71
+ value: function toHexString() {
72
+ return this.metaColor.toHexString();
73
+ }
74
+ }, {
75
+ key: "toRgb",
76
+ value: function toRgb() {
77
+ return this.metaColor.toRgb();
78
+ }
79
+ }, {
80
+ key: "toRgbString",
81
+ value: function toRgbString() {
82
+ return this.metaColor.toRgbString();
83
+ }
84
+ }, {
85
+ key: "isGradient",
86
+ value: function isGradient() {
87
+ return !!this.colors && !this.cleared;
88
+ }
89
+ }, {
90
+ key: "getColors",
91
+ value: function getColors() {
92
+ return this.colors || [{
93
+ color: this,
94
+ percent: 0
95
+ }];
96
+ }
97
+ }, {
98
+ key: "toCssString",
99
+ value: function toCssString() {
100
+ var colors = this.colors;
101
+
102
+ // CSS line-gradient
103
+ if (colors) {
104
+ var colorsStr = colors.map(function (c) {
105
+ return "".concat(c.color.toRgbString(), " ").concat(c.percent, "%");
106
+ }).join(', ');
107
+ return "linear-gradient(90deg, ".concat(colorsStr, ")");
108
+ }
109
+ return this.metaColor.toRgbString();
110
+ }
111
+ }, {
112
+ key: "equals",
113
+ value: function equals(color) {
114
+ if (!color || this.isGradient() !== color.isGradient()) {
115
+ return false;
116
+ }
117
+ if (!this.isGradient()) {
118
+ return this.toHexString() === color.toHexString();
119
+ }
120
+ return this.colors.length === color.colors.length && this.colors.every(function (c, i) {
121
+ var target = color.colors[i];
122
+ return c.percent === target.percent && c.color.equals(target.color);
123
+ });
124
+ }
125
+ }]);
126
+ return AggregationColor;
127
+ }();
@@ -0,0 +1,3 @@
1
+ import type { AggregationColor } from '../color';
2
+ import type { ColorValueType } from '../interface';
3
+ export default function useModeColor(defaultValue?: ColorValueType, value?: ColorValueType): [color: AggregationColor, setColor: (color: AggregationColor) => void];
@@ -0,0 +1,31 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+ 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."); }
3
+ 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); }
4
+ 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; }
5
+ 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; } }
6
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
+ import * as React from 'react';
8
+ import useEvent from 'rc-util/lib/hooks/useEvent';
9
+ import useMergedState from 'rc-util/lib/hooks/useMergedState';
10
+ import { generateColor } from "../util";
11
+ export default function useModeColor(defaultValue, value) {
12
+ var _useMergedState = useMergedState(defaultValue, {
13
+ value: value
14
+ }),
15
+ _useMergedState2 = _slicedToArray(_useMergedState, 2),
16
+ mergedColor = _useMergedState2[0],
17
+ setMergedColor = _useMergedState2[1];
18
+ var _React$useState = React.useState(null),
19
+ _React$useState2 = _slicedToArray(_React$useState, 2),
20
+ cacheColor = _React$useState2[0],
21
+ setCacheColor = _React$useState2[1];
22
+ var setColor = useEvent(function (nextColor) {
23
+ setCacheColor(nextColor);
24
+ setMergedColor(nextColor);
25
+ });
26
+ var postColor = React.useMemo(function () {
27
+ var colorObj = generateColor(mergedColor || '');
28
+ return colorObj.equals(cacheColor) ? cacheColor : colorObj;
29
+ }, [mergedColor, cacheColor]);
30
+ return [postColor, setColor];
31
+ }
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import type { ColorPickerProps } from './interface';
2
3
  export interface IColorPickerProps {
3
4
  className?: string;
4
5
  value?: string;
@@ -7,5 +8,7 @@ export interface IColorPickerProps {
7
8
  onChange?: (color: string) => void;
8
9
  icon?: React.ReactNode;
9
10
  disabled?: boolean;
11
+ mode?: 'simple' | 'complex';
12
+ complexModeProps?: ColorPickerProps;
10
13
  }
11
- export default function ColorPicker({ className, value, icon, onChange, defaultColor, localStorageKey, disabled, }: IColorPickerProps): React.JSX.Element;
14
+ export default function ColorPicker({ className, value, icon, onChange, defaultColor, localStorageKey, disabled, mode, complexModeProps, }: IColorPickerProps): React.JSX.Element | null;
@@ -14,6 +14,7 @@ import Dropdown from "../Dropdown";
14
14
  import { FoldDownFill } from "../Icon";
15
15
  import { LocaleContext, getTranslator } from "../locale/default";
16
16
  import { colors as defaultColors, specialColors } from "./constant";
17
+ import InnerColorPicker from "./ComplexColorPicker";
17
18
  function getLocalRecentColors(localStorageKey) {
18
19
  if (!window.localStorage) {
19
20
  return [];
@@ -41,7 +42,10 @@ export default function ColorPicker(_ref) {
41
42
  _ref$localStorageKey = _ref.localStorageKey,
42
43
  localStorageKey = _ref$localStorageKey === void 0 ? 'ald_recent_colors' : _ref$localStorageKey,
43
44
  _ref$disabled = _ref.disabled,
44
- disabled = _ref$disabled === void 0 ? false : _ref$disabled;
45
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
46
+ _ref$mode = _ref.mode,
47
+ mode = _ref$mode === void 0 ? 'simple' : _ref$mode,
48
+ complexModeProps = _ref.complexModeProps;
45
49
  var _useContext = useContext(LocaleContext),
46
50
  locale = _useContext.locale;
47
51
  var t = getTranslator(locale);
@@ -149,38 +153,44 @@ export default function ColorPicker(_ref) {
149
153
  }
150
154
  }));
151
155
  }))));
152
- return /*#__PURE__*/React.createElement("div", {
153
- className: cls(className, 'ald-color-picker', {
154
- 'ald-color-picker-disabled': disabled
155
- }),
156
- ref: wrapRef
157
- }, /*#__PURE__*/React.createElement(Dropdown, {
158
- trigger: 'click',
159
- open: open,
160
- disabled: disabled,
161
- placement: 'bottom-start',
162
- dropdownRender: function dropdownRender() {
163
- return overlay;
164
- }
165
- }, /*#__PURE__*/React.createElement("div", {
166
- className: cls('ald-color-picker-wrapper', {
167
- 'ald-color-picker-wrapper-focused': open,
168
- 'ald-color-picker-wrapper-disabled': disabled
169
- }),
170
- onClick: function onClick(e) {
171
- if (disabled) {
172
- e.stopPropagation();
156
+ if (mode === 'simple') {
157
+ return /*#__PURE__*/React.createElement("div", {
158
+ className: cls(className, 'ald-color-picker', {
159
+ 'ald-color-picker-disabled': disabled
160
+ }),
161
+ ref: wrapRef
162
+ }, /*#__PURE__*/React.createElement(Dropdown, {
163
+ trigger: 'click',
164
+ open: open,
165
+ disabled: disabled,
166
+ placement: 'bottom-start',
167
+ dropdownRender: function dropdownRender() {
168
+ return overlay;
173
169
  }
174
- }
175
- }, icon || /*#__PURE__*/React.createElement("div", {
176
- className: 'word'
177
- }, "A", /*#__PURE__*/React.createElement("div", {
178
- className: 'line',
179
- style: {
180
- backgroundColor: value !== null && value !== void 0 ? value : '#4B5563'
181
- }
182
- })), /*#__PURE__*/React.createElement(FoldDownFill, {
183
- size: 14,
184
- color: "#575757"
185
- }))));
170
+ }, /*#__PURE__*/React.createElement("div", {
171
+ className: cls('ald-color-picker-wrapper', {
172
+ 'ald-color-picker-wrapper-focused': open,
173
+ 'ald-color-picker-wrapper-disabled': disabled
174
+ }),
175
+ onClick: function onClick(e) {
176
+ if (disabled) {
177
+ e.stopPropagation();
178
+ }
179
+ }
180
+ }, icon || /*#__PURE__*/React.createElement("div", {
181
+ className: 'word'
182
+ }, "A", /*#__PURE__*/React.createElement("div", {
183
+ className: 'line',
184
+ style: {
185
+ backgroundColor: value !== null && value !== void 0 ? value : '#4B5563'
186
+ }
187
+ })), /*#__PURE__*/React.createElement(FoldDownFill, {
188
+ size: 14,
189
+ color: "#575757"
190
+ }))));
191
+ }
192
+ if (mode === 'complex') {
193
+ return /*#__PURE__*/React.createElement(InnerColorPicker, complexModeProps);
194
+ }
195
+ return null;
186
196
  }
@@ -0,0 +1,33 @@
1
+ import React from 'react';
2
+ import type { ColorGenInput, ColorPickerProps as RcColorPickerProps } from '@rc-component/color-picker';
3
+ import type { PopoverProps } from '../Popover';
4
+ import type { AggregationColor } from './color';
5
+ import { ITooltipProps } from '../Tooltip';
6
+ export type { ColorGenInput };
7
+ export type Colors<T> = {
8
+ color: ColorGenInput<T>;
9
+ percent: number;
10
+ }[];
11
+ export declare enum ColorFormat {
12
+ hex = "hex",
13
+ rgb = "rgb",
14
+ hsb = "hsb"
15
+ }
16
+ export type ColorFormatType = keyof typeof ColorFormat;
17
+ export type TriggerType = 'click' | 'hover';
18
+ export type TriggerPlacement = ITooltipProps['placement'];
19
+ export type SingleValueType = AggregationColor | string;
20
+ export type ColorValueType = SingleValueType | null;
21
+ export type ColorPickerProps = Omit<RcColorPickerProps, 'onChange' | 'value' | 'defaultValue' | 'panelRender' | 'disabledAlpha' | 'onChangeComplete' | 'components'> & {
22
+ value?: ColorValueType;
23
+ defaultValue?: ColorValueType;
24
+ children?: React.ReactNode;
25
+ open?: boolean;
26
+ disabled?: boolean;
27
+ placement?: TriggerPlacement;
28
+ trigger?: TriggerType;
29
+ disabledAlpha?: boolean;
30
+ onOpenChange?: (open: boolean) => void;
31
+ onChange?: (value: AggregationColor, css: string) => void;
32
+ onChangeComplete?: (value: AggregationColor) => void;
33
+ } & Pick<PopoverProps, 'getPopupContainer' | 'autoAdjustOverflow' | 'destroyTooltipOnHide'>;
@@ -0,0 +1,8 @@
1
+ export var ColorFormat = /*#__PURE__*/function (ColorFormat) {
2
+ ColorFormat["hex"] = "hex";
3
+ ColorFormat["rgb"] = "rgb";
4
+ ColorFormat["hsb"] = "hsb";
5
+ return ColorFormat;
6
+ }({});
7
+
8
+ // Alias, to prevent breaking changes.
@@ -0,0 +1,161 @@
1
+ .ald-color-picker-wrapper {
2
+ position: relative;
3
+ width: 258px;
4
+ padding: 12px;
5
+ background-color: #fff;
6
+ border-radius: 8px;
7
+ box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
8
+ 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
9
+ }
10
+
11
+ .ald-color-picker {
12
+ position: absolute;
13
+ z-index: 1;
14
+ display: block;
15
+ width: max-content;
16
+ min-width: 258px;
17
+ visibility: visible;
18
+ }
19
+
20
+ .ald-color-picker-hidden {
21
+ display: none;
22
+ }
23
+
24
+ .ald-color-picker-panel {
25
+ display: flex;
26
+ flex-direction: column;
27
+ }
28
+
29
+ .ald-color-picker-panel-disabled {
30
+ cursor: not-allowed;
31
+ }
32
+
33
+ .ald-color-picker-select {
34
+ margin-bottom: 12px;
35
+ }
36
+
37
+ .ald-color-picker-select .ald-color-picker-palette {
38
+ min-height: 160px;
39
+ overflow: hidden;
40
+ border-radius: 4px;
41
+ }
42
+
43
+ .ald-color-picker-select
44
+ .ald-color-picker-palette
45
+ > .ald-color-picker-gradient {
46
+ border-top-left-radius: 5px;
47
+ }
48
+
49
+ .ald-color-picker-saturation {
50
+ position: absolute;
51
+ border-radius: inherit;
52
+ inset: 0;
53
+ }
54
+
55
+ .ald-color-picker-handler {
56
+ box-sizing: border-box;
57
+ width: 16px;
58
+ height: 16px;
59
+ border: 2px solid #fff;
60
+ border-radius: 50%;
61
+ box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.06);
62
+ }
63
+
64
+ .ald-color-picker-handler-sm {
65
+ width: 12px;
66
+ height: 12px;
67
+ }
68
+
69
+ .ald-color-picker-slider {
70
+ width: 100%;
71
+ margin-bottom: 12px;
72
+ }
73
+
74
+ .ald-color-picker-slider .ald-color-picker-palette {
75
+ height: 8px;
76
+ }
77
+
78
+ .ald-color-picker-slider .ald-color-picker-gradient {
79
+ border-radius: 4px;
80
+ }
81
+
82
+ .ald-color-picker-slider-alpha {
83
+ background: url('../alpha.svg');
84
+ }
85
+
86
+ .ald-color-picker-color-block {
87
+ position: relative;
88
+ width: 28px;
89
+ height: 28px;
90
+ margin-left: 8px;
91
+ overflow: hidden;
92
+ background-image: url('../alpha.svg');
93
+ border-radius: 4px;
94
+ }
95
+
96
+ .ald-color-picker-color-block-inner {
97
+ box-sizing: border-box;
98
+ width: 100%;
99
+ height: 100%;
100
+ border: 1px solid rgba(0, 0, 0, 0.06);
101
+ border-radius: 4px;
102
+ }
103
+
104
+ .ald-color-picker-slider-container {
105
+ display: flex;
106
+ }
107
+
108
+ .ald-color-picker-slider-container .ald-color-picker-slider-group {
109
+ flex: 1;
110
+ }
111
+
112
+ .ald-color-picker-slider-container
113
+ .ald-color-picker-slider-group-disabled-alpha {
114
+ display: flex;
115
+ align-items: center;
116
+ }
117
+
118
+ .ald-color-picker-slider-container
119
+ .ald-color-picker-slider-group-disabled-alpha
120
+ .ald-color-picker-slider {
121
+ margin-bottom: 0;
122
+ }
123
+
124
+ .ald-color-picker-input-container {
125
+ display: flex;
126
+ align-items: center;
127
+ gap: 4px;
128
+ }
129
+
130
+ .ald-color-picker-input-container .ald-color-picker-format-select {
131
+ .ant-select-borderless .ant-select-selector {
132
+ padding: 0;
133
+ }
134
+ }
135
+
136
+ .ald-color-picker-input-container .ald-color-picker-input {
137
+ width: 0;
138
+ flex: 1;
139
+
140
+ .ald-color-picker-hsb-input,
141
+ .ald-color-picker-rgb-input {
142
+ display: flex;
143
+ align-items: center;
144
+ gap: 4px;
145
+ }
146
+ }
147
+
148
+ .ald-color-picker-input-container
149
+ .ald-color-picker-steppers.ald-color-picker-alpha-input {
150
+ width: 44px;
151
+ }
152
+
153
+ .ald-color-picker-trigger-wrapper {
154
+ display: inline-flex;
155
+
156
+ .ald-color-picker-trigger-default {
157
+ width: 28px;
158
+ height: 28px;
159
+ border-radius: 4px;
160
+ }
161
+ }
@@ -1,4 +1,8 @@
1
1
  @import '../../style/index.less';
2
+ @import '../../AldSelect/style/index.less';
3
+ @import '../../Input/style/index.less';
4
+ @import '../../InputNumber/style/index.less';
5
+ @import './complex.less';
2
6
 
3
7
  .ald-color-picker {
4
8
  position: relative;
@@ -0,0 +1,15 @@
1
+ import type { ColorGenInput } from '@rc-component/color-picker';
2
+ import { AggregationColor } from './color';
3
+ import type { ColorValueType } from './interface';
4
+ export declare const generateColor: (color: ColorGenInput<AggregationColor> | Exclude<ColorValueType, null>) => AggregationColor;
5
+ export declare const getRoundNumber: (value: number | string) => number;
6
+ export declare const getColorAlpha: (color: AggregationColor) => number;
7
+ /** Return the color whose `alpha` is 1 */
8
+ export declare const genAlphaColor: (color: AggregationColor, alpha?: number) => AggregationColor;
9
+ /**
10
+ * Get percent position color. e.g. [10%-#fff, 20%-#000], 15% => #888
11
+ */
12
+ export declare const getGradientPercentColor: (colors: {
13
+ percent: number;
14
+ color: string;
15
+ }[], percent: number) => string;
@@ -0,0 +1,65 @@
1
+ function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
2
+ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ 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); }
4
+ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
5
+ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
6
+ 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; }
7
+ import { Color as RcColor } from '@rc-component/color-picker';
8
+ import { AggregationColor } from "./color";
9
+ export var generateColor = function generateColor(color) {
10
+ if (color instanceof AggregationColor) {
11
+ return color;
12
+ }
13
+ return new AggregationColor(color);
14
+ };
15
+ export var getRoundNumber = function getRoundNumber(value) {
16
+ return Math.round(Number(value || 0));
17
+ };
18
+ export var getColorAlpha = function getColorAlpha(color) {
19
+ return getRoundNumber(color.toHsb().a * 100);
20
+ };
21
+
22
+ /** Return the color whose `alpha` is 1 */
23
+ export var genAlphaColor = function genAlphaColor(color, alpha) {
24
+ var rgba = color.toRgb();
25
+
26
+ // Color from hsb input may get `rgb` is (0/0/0) when `hsb.b` is 0
27
+ // So if rgb is empty, we should get from hsb
28
+ if (!rgba.r && !rgba.g && !rgba.b) {
29
+ var hsba = color.toHsb();
30
+ hsba.a = alpha || 1;
31
+ return generateColor(hsba);
32
+ }
33
+ rgba.a = alpha || 1;
34
+ return generateColor(rgba);
35
+ };
36
+
37
+ /**
38
+ * Get percent position color. e.g. [10%-#fff, 20%-#000], 15% => #888
39
+ */
40
+ export var getGradientPercentColor = function getGradientPercentColor(colors, percent) {
41
+ var filledColors = [{
42
+ percent: 0,
43
+ color: colors[0].color
44
+ }].concat(_toConsumableArray(colors), [{
45
+ percent: 100,
46
+ color: colors[colors.length - 1].color
47
+ }]);
48
+ for (var i = 0; i < filledColors.length - 1; i += 1) {
49
+ var startPtg = filledColors[i].percent;
50
+ var endPtg = filledColors[i + 1].percent;
51
+ var startColor = filledColors[i].color;
52
+ var endColor = filledColors[i + 1].color;
53
+ if (startPtg <= percent && percent <= endPtg) {
54
+ var dist = endPtg - startPtg;
55
+ if (dist === 0) {
56
+ return startColor;
57
+ }
58
+ var ratio = (percent - startPtg) / dist * 100;
59
+ var startRcColor = new RcColor(startColor);
60
+ var endRcColor = new RcColor(endColor);
61
+ return startRcColor.mix(endRcColor, ratio).toRgbString();
62
+ }
63
+ }
64
+ return '';
65
+ };
@@ -39,6 +39,10 @@ export type getUserListType = {
39
39
  getUsersByIds?: getUsersByIdsType;
40
40
  getUsersByKeywords?: getUsersByKeywordsType;
41
41
  getMemberPickerItemMoreInfoKey?: (user: IUser) => string;
42
+ getNextLevelGroup?: (params: {
43
+ parentGroupId?: string;
44
+ keyword: string;
45
+ }) => Promise<IUserGroup[]>;
42
46
  };
43
47
  declare const GetUserListContext: React.Context<getUserListType>;
44
48
  export interface IGetUserListContextProps {
@@ -2,5 +2,9 @@ declare function useGetUserList(): {
2
2
  getUsersByIds: import("../getUserList").getUsersByIdsType;
3
3
  getUsersByKeywords: import("../getUserList").getUsersByKeywordsType;
4
4
  getMemberPickerItemMoreInfoKey: ((user: import("../getUserList").IUser) => string) | undefined;
5
+ getNextLevelGroup: ((params: {
6
+ parentGroupId?: string | undefined;
7
+ keyword: string;
8
+ }) => Promise<import("../getUserList").IUserGroup[]>) | undefined;
5
9
  };
6
10
  export default useGetUserList;
@@ -4,11 +4,13 @@ function useGetUserList() {
4
4
  var _useContext = useContext(GetUserListContext),
5
5
  getUsersByIds = _useContext.getUsersByIds,
6
6
  getUsersByKeywords = _useContext.getUsersByKeywords,
7
- getMemberPickerItemMoreInfoKey = _useContext.getMemberPickerItemMoreInfoKey;
7
+ getMemberPickerItemMoreInfoKey = _useContext.getMemberPickerItemMoreInfoKey,
8
+ getNextLevelGroup = _useContext.getNextLevelGroup;
8
9
  return {
9
10
  getUsersByIds: getUsersByIds,
10
11
  getUsersByKeywords: getUsersByKeywords,
11
- getMemberPickerItemMoreInfoKey: getMemberPickerItemMoreInfoKey
12
+ getMemberPickerItemMoreInfoKey: getMemberPickerItemMoreInfoKey,
13
+ getNextLevelGroup: getNextLevelGroup
12
14
  };
13
15
  }
14
16
  export default useGetUserList;
@@ -1,7 +1,7 @@
1
1
  import type { ConfigContext, ConfigProviderProps } from 'antd/lib/config-provider';
2
2
  import useConfig from 'antd/lib/config-provider/hooks/useConfig';
3
3
  import React from 'react';
4
- import { IUser, getUsersByIdsType, getUsersByKeywordsType } from './getUserList';
4
+ import { IUser, IUserGroup, getUsersByIdsType, getUsersByKeywordsType } from './getUserList';
5
5
  import useGetUserList from './hooks/useGetUserList';
6
6
  import SizeContext from './sizeContext';
7
7
  export { ConfigContext } from 'antd/lib/config-provider';
@@ -12,6 +12,10 @@ interface AldCustomConfigProviderProps extends ConfigProviderProps {
12
12
  getUsersByIds?: getUsersByIdsType;
13
13
  getUsersByKeywords?: getUsersByKeywordsType;
14
14
  getMemberPickerItemMoreInfoKey?: (user: IUser) => string;
15
+ getNextLevelGroup?: (params: {
16
+ parentGroupId?: string;
17
+ keyword: string;
18
+ }) => Promise<IUserGroup[]>;
15
19
  }
16
20
  declare const AldCustomConfigProvider: React.FC<AldCustomConfigProviderProps> & {
17
21
  /** @private internal Usage. do not use in your production */
@@ -14,14 +14,16 @@ var AldCustomConfigProvider = function AldCustomConfigProvider(props) {
14
14
  var children = props.children,
15
15
  getUsersByIds = props.getUsersByIds,
16
16
  getUsersByKeywords = props.getUsersByKeywords,
17
- getMemberPickerItemMoreInfoKey = props.getMemberPickerItemMoreInfoKey;
17
+ getMemberPickerItemMoreInfoKey = props.getMemberPickerItemMoreInfoKey,
18
+ getNextLevelGroup = props.getNextLevelGroup;
18
19
  var childNode = children;
19
20
  if (getUsersByIds || getUsersByKeywords) {
20
21
  childNode = /*#__PURE__*/React.createElement(getUserListContext.Provider, {
21
22
  value: {
22
23
  getUsersByIds: getUsersByIds,
23
24
  getUsersByKeywords: getUsersByKeywords,
24
- getMemberPickerItemMoreInfoKey: getMemberPickerItemMoreInfoKey
25
+ getMemberPickerItemMoreInfoKey: getMemberPickerItemMoreInfoKey,
26
+ getNextLevelGroup: getNextLevelGroup
25
27
  }
26
28
  }, children);
27
29
  }
@@ -9,5 +9,6 @@ interface IProps {
9
9
  initWidth?: number;
10
10
  defaultValue?: string;
11
11
  inputMode?: boolean;
12
+ style?: React.CSSProperties;
12
13
  }
13
14
  export {};