tdesign-react 0.31.2-alpha.1 → 0.31.2-alpha.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/CHANGELOG.md +1 -1
- package/dist/tdesign.css +498 -0
- package/dist/tdesign.css.map +1 -1
- package/dist/tdesign.js +26543 -20076
- package/dist/tdesign.js.map +1 -1
- package/dist/tdesign.min.css +1 -1
- package/dist/tdesign.min.css.map +1 -1
- package/dist/tdesign.min.js +9 -3
- package/dist/tdesign.min.js.map +1 -1
- package/es/_chunks/{dep-5d29cc59.js → dep-7e7b26b4.js} +1 -1
- package/es/_chunks/{dep-5d29cc59.js.map → dep-7e7b26b4.js.map} +1 -1
- package/es/_common/js/color-picker/cmyk.d.ts +27 -0
- package/es/_common/js/color-picker/color.d.ts +154 -0
- package/es/_common/js/color-picker/gradient.d.ts +22 -0
- package/es/_util/useClickOutside.d.ts +1 -1
- package/es/_util/useClickOutside.js +51 -3
- package/es/_util/useClickOutside.js.map +1 -1
- package/es/_util/useDrag.d.ts +16 -0
- package/es/_util/useDrag.js +74 -0
- package/es/_util/useDrag.js.map +1 -0
- package/es/avatar/AvararGroup.js +1 -1
- package/es/avatar/Avatar.js +1 -1
- package/es/avatar/index.js +1 -1
- package/es/color-picker/ColorPicker.d.ts +4 -0
- package/es/color-picker/ColorPicker.js +241 -0
- package/es/color-picker/ColorPicker.js.map +1 -0
- package/es/color-picker/ColorPickerPanel.d.ts +7 -0
- package/es/color-picker/ColorPickerPanel.js +179 -0
- package/es/color-picker/ColorPickerPanel.js.map +1 -0
- package/es/color-picker/components/panel/alpha.d.ts +4 -0
- package/es/color-picker/components/panel/alpha.js +48 -0
- package/es/color-picker/components/panel/alpha.js.map +1 -0
- package/es/color-picker/components/panel/format/config.d.ts +19 -0
- package/es/color-picker/components/panel/format/config.js +90 -0
- package/es/color-picker/components/panel/format/config.js.map +1 -0
- package/es/color-picker/components/panel/format/index.d.ts +11 -0
- package/es/color-picker/components/panel/format/index.js +197 -0
- package/es/color-picker/components/panel/format/index.js.map +1 -0
- package/es/color-picker/components/panel/format/inputs.d.ts +3 -0
- package/es/color-picker/components/panel/format/inputs.js +223 -0
- package/es/color-picker/components/panel/format/inputs.js.map +1 -0
- package/es/color-picker/components/panel/header.d.ts +14 -0
- package/es/color-picker/components/panel/header.js +100 -0
- package/es/color-picker/components/panel/header.js.map +1 -0
- package/es/color-picker/components/panel/hue.d.ts +4 -0
- package/es/color-picker/components/panel/hue.js +32 -0
- package/es/color-picker/components/panel/hue.js.map +1 -0
- package/es/color-picker/components/panel/index.d.ts +4 -0
- package/es/color-picker/components/panel/index.js +456 -0
- package/es/color-picker/components/panel/index.js.map +1 -0
- package/es/color-picker/components/panel/linear-gradient.d.ts +3 -0
- package/es/color-picker/components/panel/linear-gradient.js +360 -0
- package/es/color-picker/components/panel/linear-gradient.js.map +1 -0
- package/es/color-picker/components/panel/saturation.d.ts +4 -0
- package/es/color-picker/components/panel/saturation.js +124 -0
- package/es/color-picker/components/panel/saturation.js.map +1 -0
- package/es/color-picker/components/panel/slider.d.ts +10 -0
- package/es/color-picker/components/panel/slider.js +106 -0
- package/es/color-picker/components/panel/slider.js.map +1 -0
- package/es/color-picker/components/panel/style/css.d.ts +1 -0
- package/es/color-picker/components/panel/style/css.js +1 -0
- package/es/color-picker/components/panel/style/index.d.ts +1 -0
- package/es/color-picker/components/panel/style/index.js +7 -0
- package/es/color-picker/components/panel/style/index.js.map +1 -0
- package/es/color-picker/components/panel/swatches.d.ts +11 -0
- package/es/color-picker/components/panel/swatches.js +134 -0
- package/es/color-picker/components/panel/swatches.js.map +1 -0
- package/es/color-picker/components/style/css.d.ts +1 -0
- package/es/color-picker/components/style/css.js +1 -0
- package/es/color-picker/components/style/index.d.ts +1 -0
- package/es/color-picker/components/style/index.js +7 -0
- package/es/color-picker/components/style/index.js.map +1 -0
- package/es/color-picker/components/trigger.d.ts +9 -0
- package/es/color-picker/components/trigger.js +125 -0
- package/es/color-picker/components/trigger.js.map +1 -0
- package/es/color-picker/const.d.ts +15 -0
- package/es/color-picker/const.js +22 -0
- package/es/color-picker/const.js.map +1 -0
- package/es/color-picker/hooks/useClassname.d.ts +2 -0
- package/es/color-picker/hooks/useClassname.js +46 -0
- package/es/color-picker/hooks/useClassname.js.map +1 -0
- package/es/color-picker/index.d.ts +10 -0
- package/es/color-picker/index.js +172 -0
- package/es/color-picker/index.js.map +1 -0
- package/es/color-picker/interface.d.ts +23 -0
- package/es/color-picker/interface.js +7 -0
- package/es/color-picker/interface.js.map +1 -0
- package/es/color-picker/style/css.d.ts +1 -0
- package/es/color-picker/style/css.js +1 -0
- package/es/color-picker/style/index.css +497 -0
- package/es/color-picker/style/index.d.ts +1 -0
- package/es/color-picker/style/index.js +7 -0
- package/es/color-picker/style/index.js.map +1 -0
- package/es/color-picker/type.d.ts +109 -0
- package/es/color-picker/type.js +7 -0
- package/es/color-picker/type.js.map +1 -0
- package/es/index.d.ts +1 -0
- package/es/index.js +24 -1
- package/es/index.js.map +1 -1
- package/es/input/Input.js +1 -1
- package/es/input/Input.js.map +1 -1
- package/es/popup/hooks/useTriggerProps.js +28 -0
- package/es/popup/hooks/useTriggerProps.js.map +1 -1
- package/esm/_chunks/{dep-5d29cc59.js → dep-7e7b26b4.js} +1 -1
- package/esm/_chunks/{dep-5d29cc59.js.map → dep-7e7b26b4.js.map} +1 -1
- package/esm/_common/js/color-picker/cmyk.d.ts +27 -0
- package/esm/_common/js/color-picker/color.d.ts +154 -0
- package/esm/_common/js/color-picker/gradient.d.ts +22 -0
- package/esm/_util/useClickOutside.d.ts +1 -1
- package/esm/_util/useClickOutside.js +51 -3
- package/esm/_util/useClickOutside.js.map +1 -1
- package/esm/_util/useDrag.d.ts +16 -0
- package/esm/_util/useDrag.js +74 -0
- package/esm/_util/useDrag.js.map +1 -0
- package/esm/avatar/AvararGroup.js +1 -1
- package/esm/avatar/Avatar.js +1 -1
- package/esm/avatar/index.js +1 -1
- package/esm/color-picker/ColorPicker.d.ts +4 -0
- package/esm/color-picker/ColorPicker.js +250 -0
- package/esm/color-picker/ColorPicker.js.map +1 -0
- package/esm/color-picker/ColorPickerPanel.d.ts +7 -0
- package/esm/color-picker/ColorPickerPanel.js +188 -0
- package/esm/color-picker/ColorPickerPanel.js.map +1 -0
- package/esm/color-picker/components/panel/alpha.d.ts +4 -0
- package/esm/color-picker/components/panel/alpha.js +48 -0
- package/esm/color-picker/components/panel/alpha.js.map +1 -0
- package/esm/color-picker/components/panel/format/config.d.ts +19 -0
- package/esm/color-picker/components/panel/format/config.js +90 -0
- package/esm/color-picker/components/panel/format/config.js.map +1 -0
- package/esm/color-picker/components/panel/format/index.d.ts +11 -0
- package/esm/color-picker/components/panel/format/index.js +205 -0
- package/esm/color-picker/components/panel/format/index.js.map +1 -0
- package/esm/color-picker/components/panel/format/inputs.d.ts +3 -0
- package/esm/color-picker/components/panel/format/inputs.js +226 -0
- package/esm/color-picker/components/panel/format/inputs.js.map +1 -0
- package/esm/color-picker/components/panel/header.d.ts +14 -0
- package/esm/color-picker/components/panel/header.js +100 -0
- package/esm/color-picker/components/panel/header.js.map +1 -0
- package/esm/color-picker/components/panel/hue.d.ts +4 -0
- package/esm/color-picker/components/panel/hue.js +32 -0
- package/esm/color-picker/components/panel/hue.js.map +1 -0
- package/esm/color-picker/components/panel/index.d.ts +4 -0
- package/esm/color-picker/components/panel/index.js +465 -0
- package/esm/color-picker/components/panel/index.js.map +1 -0
- package/esm/color-picker/components/panel/linear-gradient.d.ts +3 -0
- package/esm/color-picker/components/panel/linear-gradient.js +363 -0
- package/esm/color-picker/components/panel/linear-gradient.js.map +1 -0
- package/esm/color-picker/components/panel/saturation.d.ts +4 -0
- package/esm/color-picker/components/panel/saturation.js +124 -0
- package/esm/color-picker/components/panel/saturation.js.map +1 -0
- package/esm/color-picker/components/panel/slider.d.ts +10 -0
- package/esm/color-picker/components/panel/slider.js +106 -0
- package/esm/color-picker/components/panel/slider.js.map +1 -0
- package/esm/color-picker/components/panel/style/css.d.ts +1 -0
- package/esm/color-picker/components/panel/style/index.d.ts +1 -0
- package/esm/color-picker/components/panel/style/index.js +1 -0
- package/esm/color-picker/components/panel/swatches.d.ts +11 -0
- package/esm/color-picker/components/panel/swatches.js +134 -0
- package/esm/color-picker/components/panel/swatches.js.map +1 -0
- package/esm/color-picker/components/style/css.d.ts +1 -0
- package/esm/color-picker/components/style/index.d.ts +1 -0
- package/esm/color-picker/components/style/index.js +1 -0
- package/esm/color-picker/components/trigger.d.ts +9 -0
- package/esm/color-picker/components/trigger.js +125 -0
- package/esm/color-picker/components/trigger.js.map +1 -0
- package/esm/color-picker/const.d.ts +15 -0
- package/esm/color-picker/const.js +22 -0
- package/esm/color-picker/const.js.map +1 -0
- package/esm/color-picker/hooks/useClassname.d.ts +2 -0
- package/esm/color-picker/hooks/useClassname.js +46 -0
- package/esm/color-picker/hooks/useClassname.js.map +1 -0
- package/esm/color-picker/index.d.ts +10 -0
- package/esm/color-picker/index.js +182 -0
- package/esm/color-picker/index.js.map +1 -0
- package/esm/color-picker/interface.d.ts +23 -0
- package/esm/color-picker/interface.js +7 -0
- package/esm/color-picker/interface.js.map +1 -0
- package/esm/color-picker/style/css.d.ts +1 -0
- package/esm/color-picker/style/index.d.ts +1 -0
- package/esm/color-picker/style/index.js +1 -0
- package/esm/color-picker/type.d.ts +109 -0
- package/esm/color-picker/type.js +7 -0
- package/esm/color-picker/type.js.map +1 -0
- package/esm/index.d.ts +1 -0
- package/esm/index.js +25 -1
- package/esm/index.js.map +1 -1
- package/esm/input/Input.js +1 -1
- package/esm/input/Input.js.map +1 -1
- package/esm/popup/hooks/useTriggerProps.js +28 -0
- package/esm/popup/hooks/useTriggerProps.js.map +1 -1
- package/lib/_chunks/{dep-1c7ceac8.js → dep-9d6a55ed.js} +1 -1
- package/lib/_chunks/{dep-1c7ceac8.js.map → dep-9d6a55ed.js.map} +1 -1
- package/lib/_common/js/color-picker/cmyk.d.ts +27 -0
- package/lib/_common/js/color-picker/color.d.ts +154 -0
- package/lib/_common/js/color-picker/gradient.d.ts +22 -0
- package/lib/_util/useClickOutside.d.ts +1 -1
- package/lib/_util/useClickOutside.js +47 -3
- package/lib/_util/useClickOutside.js.map +1 -1
- package/lib/_util/useDrag.d.ts +16 -0
- package/lib/_util/useDrag.js +78 -0
- package/lib/_util/useDrag.js.map +1 -0
- package/lib/avatar/AvararGroup.js +1 -1
- package/lib/avatar/Avatar.js +1 -1
- package/lib/avatar/index.js +1 -1
- package/lib/color-picker/ColorPicker.d.ts +4 -0
- package/lib/color-picker/ColorPicker.js +232 -0
- package/lib/color-picker/ColorPicker.js.map +1 -0
- package/lib/color-picker/ColorPickerPanel.d.ts +7 -0
- package/lib/color-picker/ColorPickerPanel.js +170 -0
- package/lib/color-picker/ColorPickerPanel.js.map +1 -0
- package/lib/color-picker/components/panel/alpha.d.ts +4 -0
- package/lib/color-picker/components/panel/alpha.js +57 -0
- package/lib/color-picker/components/panel/alpha.js.map +1 -0
- package/lib/color-picker/components/panel/format/config.d.ts +19 -0
- package/lib/color-picker/components/panel/format/config.js +95 -0
- package/lib/color-picker/components/panel/format/config.js.map +1 -0
- package/lib/color-picker/components/panel/format/index.d.ts +11 -0
- package/lib/color-picker/components/panel/format/index.js +189 -0
- package/lib/color-picker/components/panel/format/index.js.map +1 -0
- package/lib/color-picker/components/panel/format/inputs.d.ts +3 -0
- package/lib/color-picker/components/panel/format/inputs.js +220 -0
- package/lib/color-picker/components/panel/format/inputs.js.map +1 -0
- package/lib/color-picker/components/panel/header.d.ts +14 -0
- package/lib/color-picker/components/panel/header.js +103 -0
- package/lib/color-picker/components/panel/header.js.map +1 -0
- package/lib/color-picker/components/panel/hue.d.ts +4 -0
- package/lib/color-picker/components/panel/hue.js +40 -0
- package/lib/color-picker/components/panel/hue.js.map +1 -0
- package/lib/color-picker/components/panel/index.d.ts +4 -0
- package/lib/color-picker/components/panel/index.js +448 -0
- package/lib/color-picker/components/panel/index.js.map +1 -0
- package/lib/color-picker/components/panel/linear-gradient.d.ts +3 -0
- package/lib/color-picker/components/panel/linear-gradient.js +358 -0
- package/lib/color-picker/components/panel/linear-gradient.js.map +1 -0
- package/lib/color-picker/components/panel/saturation.d.ts +4 -0
- package/lib/color-picker/components/panel/saturation.js +132 -0
- package/lib/color-picker/components/panel/saturation.js.map +1 -0
- package/lib/color-picker/components/panel/slider.d.ts +10 -0
- package/lib/color-picker/components/panel/slider.js +115 -0
- package/lib/color-picker/components/panel/slider.js.map +1 -0
- package/lib/color-picker/components/panel/style/css.d.ts +1 -0
- package/lib/color-picker/components/panel/style/index.d.ts +1 -0
- package/lib/color-picker/components/panel/swatches.d.ts +11 -0
- package/lib/color-picker/components/panel/swatches.js +139 -0
- package/lib/color-picker/components/panel/swatches.js.map +1 -0
- package/lib/color-picker/components/style/css.d.ts +1 -0
- package/lib/color-picker/components/style/index.d.ts +1 -0
- package/lib/color-picker/components/trigger.d.ts +9 -0
- package/lib/color-picker/components/trigger.js +126 -0
- package/lib/color-picker/components/trigger.js.map +1 -0
- package/lib/color-picker/const.d.ts +15 -0
- package/lib/color-picker/const.js +35 -0
- package/lib/color-picker/const.js.map +1 -0
- package/lib/color-picker/hooks/useClassname.d.ts +2 -0
- package/lib/color-picker/hooks/useClassname.js +46 -0
- package/lib/color-picker/hooks/useClassname.js.map +1 -0
- package/lib/color-picker/index.d.ts +10 -0
- package/lib/color-picker/index.js +160 -0
- package/lib/color-picker/index.js.map +1 -0
- package/lib/color-picker/interface.d.ts +23 -0
- package/lib/color-picker/interface.js +9 -0
- package/lib/color-picker/interface.js.map +1 -0
- package/lib/color-picker/style/css.d.ts +1 -0
- package/lib/color-picker/style/index.d.ts +1 -0
- package/lib/color-picker/type.d.ts +109 -0
- package/lib/color-picker/type.js +9 -0
- package/lib/color-picker/type.js.map +1 -0
- package/lib/index-lib.js +25 -1
- package/lib/index-lib.js.map +1 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.js +25 -1
- package/lib/index.js.map +1 -1
- package/lib/input/Input.js +1 -1
- package/lib/input/Input.js.map +1 -1
- package/lib/popup/hooks/useTriggerProps.js +24 -0
- package/lib/popup/hooks/useTriggerProps.js.map +1 -1
- package/package.json +4 -2
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* tdesign v0.31.1
|
|
3
|
+
* (c) 2022 tdesign
|
|
4
|
+
* @license MIT
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import { _ as _defineProperty } from '../../../_chunks/dep-1628aaec.js';
|
|
8
|
+
import React, { useRef, useEffect } from 'react';
|
|
9
|
+
import classNames from 'classnames';
|
|
10
|
+
import { SLIDER_DEFAULT_WIDTH } from '../../const.js';
|
|
11
|
+
import useDrag from '../../../_util/useDrag.js';
|
|
12
|
+
|
|
13
|
+
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; }
|
|
14
|
+
|
|
15
|
+
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; }
|
|
16
|
+
|
|
17
|
+
var ColorSlider = function ColorSlider(props) {
|
|
18
|
+
var color = props.color,
|
|
19
|
+
_props$className = props.className,
|
|
20
|
+
className = _props$className === void 0 ? "" : _props$className,
|
|
21
|
+
_props$value = props.value,
|
|
22
|
+
value = _props$value === void 0 ? 0 : _props$value,
|
|
23
|
+
_props$railStyle = props.railStyle,
|
|
24
|
+
railStyle = _props$railStyle === void 0 ? {} : _props$railStyle,
|
|
25
|
+
_props$maxValue = props.maxValue,
|
|
26
|
+
maxValue = _props$maxValue === void 0 ? 360 : _props$maxValue,
|
|
27
|
+
baseClassName = props.baseClassName,
|
|
28
|
+
disabled = props.disabled,
|
|
29
|
+
onChange = props.onChange;
|
|
30
|
+
var panelRef = useRef(null);
|
|
31
|
+
var thumbRef = useRef(null);
|
|
32
|
+
var isMovedRef = useRef(false);
|
|
33
|
+
var panelRectRef = useRef({
|
|
34
|
+
width: SLIDER_DEFAULT_WIDTH
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
var styles = function styles() {
|
|
38
|
+
var width = panelRectRef.current.width;
|
|
39
|
+
|
|
40
|
+
if (!width) {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
var left = Math.round(Number(value) / Number(maxValue) * width);
|
|
45
|
+
return {
|
|
46
|
+
left: "".concat(left, "px"),
|
|
47
|
+
color: color.rgb
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
var handleDrag = function handleDrag(coordinate, isEnded) {
|
|
52
|
+
if (disabled) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
var width = panelRectRef.current.width;
|
|
57
|
+
var x = coordinate.x;
|
|
58
|
+
var value2 = Math.round(x / width * Number(maxValue) * 100) / 100;
|
|
59
|
+
isMovedRef.current = true;
|
|
60
|
+
onChange(value2, isEnded);
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
var handleDragEnd = function handleDragEnd(coordinate) {
|
|
64
|
+
if (disabled || !isMovedRef.current) {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
handleDrag(coordinate, true);
|
|
69
|
+
isMovedRef.current = false;
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
useDrag(panelRef, {
|
|
73
|
+
start: function start(coordinate) {
|
|
74
|
+
panelRectRef.current.width = panelRef.current.offsetWidth;
|
|
75
|
+
isMovedRef.current = false;
|
|
76
|
+
handleDrag(coordinate);
|
|
77
|
+
},
|
|
78
|
+
end: function end(coordinate) {
|
|
79
|
+
handleDragEnd(coordinate);
|
|
80
|
+
},
|
|
81
|
+
drag: function drag(coordinate) {
|
|
82
|
+
handleDrag(coordinate);
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
useEffect(function () {
|
|
86
|
+
panelRectRef.current.width = panelRef.current.offsetWidth || SLIDER_DEFAULT_WIDTH;
|
|
87
|
+
}, []);
|
|
88
|
+
return /* @__PURE__ */React.createElement("div", {
|
|
89
|
+
className: classNames("".concat(baseClassName, "__slider"), className),
|
|
90
|
+
ref: panelRef
|
|
91
|
+
}, /* @__PURE__ */React.createElement("div", {
|
|
92
|
+
className: "".concat(baseClassName, "__rail"),
|
|
93
|
+
style: railStyle
|
|
94
|
+
}), /* @__PURE__ */React.createElement("span", {
|
|
95
|
+
className: "".concat(baseClassName, "__thumb"),
|
|
96
|
+
role: "slider",
|
|
97
|
+
tabIndex: 0,
|
|
98
|
+
ref: thumbRef,
|
|
99
|
+
style: _objectSpread({}, styles())
|
|
100
|
+
}));
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
var ColorSlider$1 = /*#__PURE__*/React.memo(ColorSlider);
|
|
104
|
+
|
|
105
|
+
export { ColorSlider$1 as default };
|
|
106
|
+
//# sourceMappingURL=slider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slider.js","sources":["../../../../src/color-picker/components/panel/slider.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport classnames from 'classnames';\nimport { SLIDER_DEFAULT_WIDTH } from '../../const';\nimport useDrag, { Coordinate } from '../../../_util/useDrag';\nimport { TdColorBaseProps } from '../../interface';\n\nexport interface TdColorSliderProps extends TdColorBaseProps {\n className?: string;\n value?: Number;\n maxValue?: Number;\n railStyle?: Object;\n}\n\nconst ColorSlider = (props: TdColorSliderProps) => {\n const { color, className = '', value = 0, railStyle = {}, maxValue = 360, baseClassName, disabled, onChange } = props;\n const panelRef = useRef<HTMLDivElement>(null);\n const thumbRef = useRef<HTMLElement>(null);\n const isMovedRef = useRef<boolean>(false);\n const panelRectRef = useRef({\n width: SLIDER_DEFAULT_WIDTH,\n });\n\n const styles = () => {\n const { width } = panelRectRef.current;\n if (!width) {\n return;\n }\n const left = Math.round((Number(value) / Number(maxValue)) * width);\n return {\n left: `${left}px`,\n color: color.rgb,\n };\n };\n\n const handleDrag = (coordinate: Coordinate, isEnded?: boolean) => {\n if (disabled) {\n return;\n }\n const { width } = panelRectRef.current;\n const { x } = coordinate;\n const value = Math.round((x / width) * Number(maxValue) * 100) / 100;\n isMovedRef.current = true;\n onChange(value, isEnded);\n };\n\n const handleDragEnd = (coordinate: Coordinate) => {\n if (disabled || !isMovedRef.current) {\n return;\n }\n\n handleDrag(coordinate, true);\n isMovedRef.current = false;\n };\n\n useDrag(panelRef, {\n start: (coordinate: Coordinate) => {\n // pop模式下由于是隐藏显示,这个宽度让其每次点击的时候重新计算\n panelRectRef.current.width = panelRef.current.offsetWidth;\n isMovedRef.current = false;\n handleDrag(coordinate);\n },\n end: (coordinate: Coordinate) => {\n handleDragEnd(coordinate);\n },\n drag: (coordinate: Coordinate) => {\n handleDrag(coordinate);\n },\n });\n\n useEffect(() => {\n panelRectRef.current.width = panelRef.current.offsetWidth || SLIDER_DEFAULT_WIDTH;\n }, []);\n\n return (\n <div className={classnames(`${baseClassName}__slider`, className)} ref={panelRef}>\n <div className={`${baseClassName}__rail`} style={railStyle}></div>\n <span\n className={`${baseClassName}__thumb`}\n role=\"slider\"\n tabIndex={0}\n ref={thumbRef}\n style={{ ...styles() }}\n ></span>\n </div>\n );\n};\n\nexport default React.memo(ColorSlider);\n"],"names":["ColorSlider","props","color","className","value","railStyle","maxValue","baseClassName","disabled","onChange","panelRef","useRef","thumbRef","isMovedRef","panelRectRef","width","SLIDER_DEFAULT_WIDTH","styles","current","left","Math","round","Number","rgb","handleDrag","coordinate","isEnded","x","value2","handleDragEnd","useDrag","start","offsetWidth","end","drag","useEffect","React","createElement","classnames","ref","style","role","tabIndex","memo"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '../../../style/index.css';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TdColorBaseProps } from '../../interface';
|
|
3
|
+
export interface TdColorSwathcesProps extends TdColorBaseProps {
|
|
4
|
+
colors?: string[];
|
|
5
|
+
title?: String;
|
|
6
|
+
editable?: Boolean;
|
|
7
|
+
onSetColor?: Function;
|
|
8
|
+
handleAddColor?: Function;
|
|
9
|
+
}
|
|
10
|
+
declare const _default: React.MemoExoticComponent<(props: TdColorSwathcesProps) => JSX.Element>;
|
|
11
|
+
export default _default;
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* tdesign v0.31.1
|
|
3
|
+
* (c) 2022 tdesign
|
|
4
|
+
* @license MIT
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import React from 'react';
|
|
8
|
+
import classNames from 'classnames';
|
|
9
|
+
import { AddIcon, DeleteIcon } from 'tdesign-icons-react';
|
|
10
|
+
import { Color } from '../../../_common/js/color-picker/color.js';
|
|
11
|
+
import useCommonClassName from '../../../_util/useCommonClassName.js';
|
|
12
|
+
import '../../../_chunks/dep-aca05d9d.js';
|
|
13
|
+
import '../../../_chunks/dep-85a9595a.js';
|
|
14
|
+
import '../../../_chunks/dep-926c2765.js';
|
|
15
|
+
import '../../../_chunks/dep-1628aaec.js';
|
|
16
|
+
import 'tinycolor2';
|
|
17
|
+
import '../../../_common/js/color-picker/cmyk.js';
|
|
18
|
+
import '../../../_common/js/color-picker/gradient.js';
|
|
19
|
+
import '../../../_util/useConfig.js';
|
|
20
|
+
import '../../../_chunks/dep-bbad8591.js';
|
|
21
|
+
import '../../../_chunks/dep-8702aba9.js';
|
|
22
|
+
import '../../../_chunks/dep-e9e7c24f.js';
|
|
23
|
+
import '../../../_chunks/dep-c47502ef.js';
|
|
24
|
+
import '../../../_chunks/dep-3a2f4bdf.js';
|
|
25
|
+
import '../../../_chunks/dep-d51fd958.js';
|
|
26
|
+
import '../../../_chunks/dep-db8880c0.js';
|
|
27
|
+
import '../../../_chunks/dep-8efaaac0.js';
|
|
28
|
+
import '../../../_chunks/dep-d539b435.js';
|
|
29
|
+
import '../../../_chunks/dep-2b0021c1.js';
|
|
30
|
+
import '../../../_chunks/dep-09299e3f.js';
|
|
31
|
+
import '../../../_chunks/dep-23b2574f.js';
|
|
32
|
+
import '../../../_chunks/dep-a1403158.js';
|
|
33
|
+
import '../../../_chunks/dep-c03c5f48.js';
|
|
34
|
+
import '../../../_chunks/dep-9b67144e.js';
|
|
35
|
+
import '../../../_chunks/dep-d038aaf3.js';
|
|
36
|
+
import '../../../_chunks/dep-00728537.js';
|
|
37
|
+
import '../../../_chunks/dep-32abd81f.js';
|
|
38
|
+
import '../../../_chunks/dep-f3e5eb4b.js';
|
|
39
|
+
import '../../../_chunks/dep-ae52f85e.js';
|
|
40
|
+
import '../../../_chunks/dep-63ed508e.js';
|
|
41
|
+
import '../../../_chunks/dep-155571ca.js';
|
|
42
|
+
import '../../../_chunks/dep-81670ae9.js';
|
|
43
|
+
import '../../../locale/zh_CN.js';
|
|
44
|
+
import '../../../_common/js/global-config/locale/zh_CN.js';
|
|
45
|
+
import '../../../config-provider/zh_CN_config.js';
|
|
46
|
+
|
|
47
|
+
var Swatches = function Swatches(props) {
|
|
48
|
+
var baseClassName = props.baseClassName,
|
|
49
|
+
_props$colors = props.colors,
|
|
50
|
+
colors = _props$colors === void 0 ? [] : _props$colors,
|
|
51
|
+
_props$title = props.title,
|
|
52
|
+
title = _props$title === void 0 ? "\u7CFB\u7EDF\u8272\u5F69" : _props$title,
|
|
53
|
+
_props$editable = props.editable,
|
|
54
|
+
editable = _props$editable === void 0 ? false : _props$editable,
|
|
55
|
+
onChange = props.onChange,
|
|
56
|
+
disabled = props.disabled,
|
|
57
|
+
onSetColor = props.onSetColor,
|
|
58
|
+
handleAddColor = props.handleAddColor;
|
|
59
|
+
var swatchesClass = "".concat(baseClassName, "__swatches");
|
|
60
|
+
|
|
61
|
+
var _useCommonClassName = useCommonClassName(),
|
|
62
|
+
statusClassNames = _useCommonClassName.STATUS;
|
|
63
|
+
|
|
64
|
+
var isEqualCurrentColor = function isEqualCurrentColor(color) {
|
|
65
|
+
return Color.compare(color, props.color.css);
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
var selectedColorIndex = function selectedColorIndex() {
|
|
69
|
+
return colors.findIndex(function (color) {
|
|
70
|
+
return isEqualCurrentColor(color);
|
|
71
|
+
});
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
var handleRemoveColor = function handleRemoveColor() {
|
|
75
|
+
var selectedIndex = selectedColorIndex();
|
|
76
|
+
|
|
77
|
+
if (selectedIndex > -1) {
|
|
78
|
+
var newColors = colors.filter(function (item, index) {
|
|
79
|
+
return index !== selectedIndex;
|
|
80
|
+
});
|
|
81
|
+
onChange(newColors);
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
var handleClick = function handleClick(color) {
|
|
86
|
+
return onSetColor(color);
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
return /* @__PURE__ */React.createElement("div", {
|
|
90
|
+
className: swatchesClass
|
|
91
|
+
}, /* @__PURE__ */React.createElement("h3", {
|
|
92
|
+
className: "".concat(swatchesClass, "--title")
|
|
93
|
+
}, /* @__PURE__ */React.createElement("span", null, title), editable && /* @__PURE__ */React.createElement("div", {
|
|
94
|
+
className: "".concat(swatchesClass, "--actions")
|
|
95
|
+
}, /* @__PURE__ */React.createElement("span", {
|
|
96
|
+
role: "button",
|
|
97
|
+
className: "".concat(baseClassName, "__icon"),
|
|
98
|
+
onClick: function onClick() {
|
|
99
|
+
return handleAddColor();
|
|
100
|
+
}
|
|
101
|
+
}, /* @__PURE__ */React.createElement(AddIcon, null)), colors.length > 0 ? /* @__PURE__ */React.createElement("span", {
|
|
102
|
+
role: "button",
|
|
103
|
+
className: "".concat(baseClassName, "__icon"),
|
|
104
|
+
onClick: function onClick() {
|
|
105
|
+
return handleRemoveColor();
|
|
106
|
+
}
|
|
107
|
+
}, /* @__PURE__ */React.createElement(DeleteIcon, null)) : null)), /* @__PURE__ */React.createElement("ul", {
|
|
108
|
+
className: classNames("".concat(swatchesClass, "--items"), "narrow-scrollbar")
|
|
109
|
+
}, colors.map(function (color) {
|
|
110
|
+
return /* @__PURE__ */React.createElement("li", {
|
|
111
|
+
className: classNames("".concat(swatchesClass, "--item"), isEqualCurrentColor(color) && editable ? statusClassNames.active : ""),
|
|
112
|
+
key: color,
|
|
113
|
+
onClick: function onClick() {
|
|
114
|
+
if (disabled) {
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
handleClick(color);
|
|
119
|
+
}
|
|
120
|
+
}, /* @__PURE__ */React.createElement("div", {
|
|
121
|
+
className: classNames("".concat(swatchesClass, "--item__color"), "".concat(baseClassName, "--bg-alpha"))
|
|
122
|
+
}, /* @__PURE__ */React.createElement("span", {
|
|
123
|
+
className: "".concat(swatchesClass, "--item__inner"),
|
|
124
|
+
style: {
|
|
125
|
+
background: color
|
|
126
|
+
}
|
|
127
|
+
})));
|
|
128
|
+
})));
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
var SwatchesPanel = /*#__PURE__*/React.memo(Swatches);
|
|
132
|
+
|
|
133
|
+
export { SwatchesPanel as default };
|
|
134
|
+
//# sourceMappingURL=swatches.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"swatches.js","sources":["../../../../src/color-picker/components/panel/swatches.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { DeleteIcon, AddIcon } from 'tdesign-icons-react';\nimport Color from '../../../_common/js/color-picker/color';\nimport { TdColorBaseProps } from '../../interface';\nimport useCommonClassName from '../../../_util/useCommonClassName';\n\nexport interface TdColorSwathcesProps extends TdColorBaseProps {\n colors?: string[];\n title?: String;\n editable?: Boolean;\n onSetColor?: Function;\n handleAddColor?: Function;\n}\n\nconst Swatches = (props: TdColorSwathcesProps) => {\n const {\n baseClassName,\n colors = [],\n title = '系统色彩',\n editable = false,\n onChange,\n disabled,\n onSetColor,\n handleAddColor,\n } = props;\n const swatchesClass = `${baseClassName}__swatches`;\n const { STATUS: statusClassNames } = useCommonClassName();\n const isEqualCurrentColor = (color: string) => Color.compare(color, props.color.css);\n\n // 移除颜色\n const selectedColorIndex = () => colors.findIndex((color) => isEqualCurrentColor(color));\n const handleRemoveColor = () => {\n const selectedIndex = selectedColorIndex();\n if (selectedIndex > -1) {\n const newColors = colors.filter((item, index) => index !== selectedIndex);\n onChange(newColors);\n }\n };\n\n const handleClick = (color: string) => onSetColor(color);\n\n return (\n <div className={swatchesClass}>\n <h3 className={`${swatchesClass}--title`}>\n <span>{title}</span>\n {editable && (\n <div className={`${swatchesClass}--actions`}>\n <span role=\"button\" className={`${baseClassName}__icon`} onClick={() => handleAddColor()}>\n <AddIcon />\n </span>\n {colors.length > 0 ? (\n <span role=\"button\" className={`${baseClassName}__icon`} onClick={() => handleRemoveColor()}>\n <DeleteIcon />\n </span>\n ) : null}\n </div>\n )}\n </h3>\n <ul className={classnames(`${swatchesClass}--items`, 'narrow-scrollbar')}>\n {colors.map((color) => (\n <li\n className={classnames(\n `${swatchesClass}--item`,\n isEqualCurrentColor(color) && editable ? statusClassNames.active : '',\n )}\n key={color}\n onClick={() => {\n if (disabled) {\n return;\n }\n handleClick(color);\n }}\n >\n <div className={classnames(`${swatchesClass}--item__color`, `${baseClassName}--bg-alpha`)}>\n <span\n className={`${swatchesClass}--item__inner`}\n style={{\n background: color,\n }}\n ></span>\n </div>\n </li>\n ))}\n </ul>\n </div>\n );\n};\n\nexport default React.memo(Swatches);\n"],"names":["Swatches","props","baseClassName","colors","title","editable","onChange","disabled","onSetColor","handleAddColor","swatchesClass","useCommonClassName","statusClassNames","STATUS","isEqualCurrentColor","color","Color","compare","css","selectedColorIndex","findIndex","handleRemoveColor","selectedIndex","newColors","filter","item","index","handleClick","React","createElement","className","role","onClick","AddIcon","length","DeleteIcon","classnames","map","active","key","style","background","memo"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import '../../../style/index.css';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TdColorPickerProps } from '..';
|
|
3
|
+
import { TdColorContext } from '../interface';
|
|
4
|
+
export interface ColorTriggerProps extends TdColorPickerProps {
|
|
5
|
+
color?: string;
|
|
6
|
+
onTriggerChange?: (v?: string, context?: TdColorContext) => {};
|
|
7
|
+
}
|
|
8
|
+
declare const _default: React.MemoExoticComponent<(props: ColorTriggerProps) => JSX.Element>;
|
|
9
|
+
export default _default;
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* tdesign v0.31.1
|
|
3
|
+
* (c) 2022 tdesign
|
|
4
|
+
* @license MIT
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import { _ as _defineProperty } from '../../_chunks/dep-1628aaec.js';
|
|
8
|
+
import { _ as _slicedToArray } from '../../_chunks/dep-aca05d9d.js';
|
|
9
|
+
import React, { useState, useEffect } from 'react';
|
|
10
|
+
import classNames from 'classnames';
|
|
11
|
+
import { Input } from '../../input/index.js';
|
|
12
|
+
import { Color } from '../../_common/js/color-picker/color.js';
|
|
13
|
+
import useClassname from '../hooks/useClassname.js';
|
|
14
|
+
import '../../_chunks/dep-85a9595a.js';
|
|
15
|
+
import '../../input/Input.js';
|
|
16
|
+
import '../../_chunks/dep-8efaaac0.js';
|
|
17
|
+
import '../../_chunks/dep-ea842483.js';
|
|
18
|
+
import 'tdesign-icons-react';
|
|
19
|
+
import '../../_chunks/dep-d51fd958.js';
|
|
20
|
+
import '../../_chunks/dep-8702aba9.js';
|
|
21
|
+
import '../../_chunks/dep-db8880c0.js';
|
|
22
|
+
import '../../_chunks/dep-d539b435.js';
|
|
23
|
+
import '../../_util/forwardRefWithStatics.js';
|
|
24
|
+
import 'hoist-non-react-statics';
|
|
25
|
+
import '../../_util/useConfig.js';
|
|
26
|
+
import '../../_chunks/dep-bbad8591.js';
|
|
27
|
+
import '../../_chunks/dep-e9e7c24f.js';
|
|
28
|
+
import '../../_chunks/dep-c47502ef.js';
|
|
29
|
+
import '../../_chunks/dep-3a2f4bdf.js';
|
|
30
|
+
import '../../_chunks/dep-2b0021c1.js';
|
|
31
|
+
import '../../_chunks/dep-09299e3f.js';
|
|
32
|
+
import '../../_chunks/dep-23b2574f.js';
|
|
33
|
+
import '../../_chunks/dep-a1403158.js';
|
|
34
|
+
import '../../_chunks/dep-c03c5f48.js';
|
|
35
|
+
import '../../_chunks/dep-9b67144e.js';
|
|
36
|
+
import '../../_chunks/dep-d038aaf3.js';
|
|
37
|
+
import '../../_chunks/dep-00728537.js';
|
|
38
|
+
import '../../_chunks/dep-32abd81f.js';
|
|
39
|
+
import '../../_chunks/dep-f3e5eb4b.js';
|
|
40
|
+
import '../../_chunks/dep-ae52f85e.js';
|
|
41
|
+
import '../../_chunks/dep-63ed508e.js';
|
|
42
|
+
import '../../_chunks/dep-155571ca.js';
|
|
43
|
+
import '../../_chunks/dep-81670ae9.js';
|
|
44
|
+
import '../../locale/zh_CN.js';
|
|
45
|
+
import '../../_common/js/global-config/locale/zh_CN.js';
|
|
46
|
+
import '../../config-provider/zh_CN_config.js';
|
|
47
|
+
import '../../_util/helper.js';
|
|
48
|
+
import '../../_chunks/dep-e0790d2e.js';
|
|
49
|
+
import '../../_chunks/dep-020d9062.js';
|
|
50
|
+
import '../../_chunks/dep-fd1b4e24.js';
|
|
51
|
+
import '../../_chunks/dep-0d23bb2c.js';
|
|
52
|
+
import '../../_chunks/dep-db65b23a.js';
|
|
53
|
+
import '../../input/InputGroup.js';
|
|
54
|
+
import '../../_util/useDefaultValue.js';
|
|
55
|
+
import '../../_util/useDefault.js';
|
|
56
|
+
import '../../_util/noop.js';
|
|
57
|
+
import '../../locale/LocalReceiver.js';
|
|
58
|
+
import '../../config-provider/index.js';
|
|
59
|
+
import '../../config-provider/ConfigProvider.js';
|
|
60
|
+
import './style/css.js';
|
|
61
|
+
import '../../input/type.js';
|
|
62
|
+
import '../../_chunks/dep-926c2765.js';
|
|
63
|
+
import 'tinycolor2';
|
|
64
|
+
import '../../_common/js/color-picker/cmyk.js';
|
|
65
|
+
import '../../_common/js/color-picker/gradient.js';
|
|
66
|
+
|
|
67
|
+
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; }
|
|
68
|
+
|
|
69
|
+
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; }
|
|
70
|
+
|
|
71
|
+
var ColorPickerTrigger = function ColorPickerTrigger(props) {
|
|
72
|
+
var baseClassName = useClassname();
|
|
73
|
+
var _props$color = props.color,
|
|
74
|
+
color = _props$color === void 0 ? "" : _props$color,
|
|
75
|
+
_props$disabled = props.disabled,
|
|
76
|
+
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
77
|
+
_props$inputProps = props.inputProps,
|
|
78
|
+
inputProps = _props$inputProps === void 0 ? {
|
|
79
|
+
autoWidth: true
|
|
80
|
+
} : _props$inputProps,
|
|
81
|
+
onTriggerChange = props.onTriggerChange;
|
|
82
|
+
|
|
83
|
+
var _useState = useState(color),
|
|
84
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
85
|
+
value = _useState2[0],
|
|
86
|
+
setValue = _useState2[1];
|
|
87
|
+
|
|
88
|
+
var handleChange = function handleChange(input) {
|
|
89
|
+
if (Color.isValid(input)) {
|
|
90
|
+
setValue(input);
|
|
91
|
+
} else {
|
|
92
|
+
setValue(color);
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
useEffect(function () {
|
|
97
|
+
onTriggerChange(value);
|
|
98
|
+
}, [value]);
|
|
99
|
+
useEffect(function () {
|
|
100
|
+
setValue(color);
|
|
101
|
+
}, [color]);
|
|
102
|
+
return /* @__PURE__ */React.createElement("div", {
|
|
103
|
+
className: "".concat(baseClassName, "__trigger--default")
|
|
104
|
+
}, /* @__PURE__ */React.createElement(Input, _objectSpread(_objectSpread({}, inputProps), {}, {
|
|
105
|
+
value: value,
|
|
106
|
+
disabled: disabled,
|
|
107
|
+
label: /* @__PURE__ */React.createElement("div", {
|
|
108
|
+
className: classNames("".concat(baseClassName, "__trigger--default__color"), "".concat(baseClassName, "--bg-alpha"))
|
|
109
|
+
}, /* @__PURE__ */React.createElement("span", {
|
|
110
|
+
className: "color-inner",
|
|
111
|
+
style: {
|
|
112
|
+
background: value
|
|
113
|
+
}
|
|
114
|
+
})),
|
|
115
|
+
onBlur: handleChange,
|
|
116
|
+
onChange: function onChange(v) {
|
|
117
|
+
return setValue(v);
|
|
118
|
+
}
|
|
119
|
+
})));
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
var ColorTrigger = /*#__PURE__*/React.memo(ColorPickerTrigger);
|
|
123
|
+
|
|
124
|
+
export { ColorTrigger as default };
|
|
125
|
+
//# sourceMappingURL=trigger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"trigger.js","sources":["../../../src/color-picker/components/trigger.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport classNames from 'classnames';\nimport { Input } from '../../input';\nimport ColorLib from '../../_common/js/color-picker/color';\nimport { TdColorPickerProps } from '..';\nimport useClassname from '../hooks/useClassname';\nimport { TdColorContext } from '../interface';\n\nexport interface ColorTriggerProps extends TdColorPickerProps {\n color?: string;\n onTriggerChange?: (v?: string, context?: TdColorContext) => {};\n}\n\nconst ColorPickerTrigger = (props: ColorTriggerProps) => {\n const baseClassName = useClassname();\n const {\n color = '',\n disabled = false,\n inputProps = {\n autoWidth: true,\n },\n onTriggerChange,\n } = props;\n\n const [value, setValue] = useState(color);\n\n const handleChange = (input: string) => {\n if (ColorLib.isValid(input)) {\n setValue(input);\n } else {\n setValue(color);\n }\n };\n\n useEffect(() => {\n onTriggerChange(value);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [value]);\n\n useEffect(() => {\n setValue(color);\n }, [color]);\n\n return (\n <div className={`${baseClassName}__trigger--default`}>\n <Input\n {...inputProps}\n value={value}\n disabled={disabled}\n label={\n <div className={classNames(`${baseClassName}__trigger--default__color`, `${baseClassName}--bg-alpha`)}>\n <span\n className={'color-inner'}\n style={{\n background: value,\n }}\n ></span>\n </div>\n }\n onBlur={handleChange}\n onChange={(v: string) => setValue(v)}\n />\n </div>\n );\n};\n\nexport default React.memo(ColorPickerTrigger);\n"],"names":["ColorPickerTrigger","props","baseClassName","useClassname","color","disabled","inputProps","autoWidth","onTriggerChange","useState","value","setValue","handleChange","input","ColorLib","isValid","useEffect","React","createElement","className","Input","label","classNames","style","background","onBlur","onChange","v","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,KAAD,EAAW;AACpC,EAAMC,IAAAA,aAAa,GAAGC,YAAY,EAAlC,CAAA;AACA,EAOIF,IAAAA,YAAAA,GAAAA,KAPJ,CACEG,KADF;AAAA,MACEA,KADF,6BACU,EADV,GAAA,YAAA;AAAA,MAOIH,eAAAA,GAAAA,KAPJ,CAEEI,QAFF;AAAA,MAEEA,QAFF,gCAEa,KAFb,GAAA,eAAA;AAAA,MAOIJ,iBAAAA,GAAAA,KAPJ,CAGEK,UAHF;AAAA,MAGEA,UAHF,GAGe,iBAAA,KAAA,KAAA,CAAA,GAAA;AACXC,IAAAA,SAAS,EAAE,IAAA;AADA,GAHf,GAAA,iBAAA;AAAA,MAMEC,eANF,GAOIP,KAPJ,CAMEO,eANF,CAAA;;AAQA,EAA0BC,IAAAA,SAAAA,GAAAA,QAAQ,CAACL,KAAD,CAAlC;AAAA,MAAA,UAAA,GAAA,cAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAA,MAAOM,KAAP,GAAA,UAAA,CAAA,CAAA,CAAA;AAAA,MAAcC,QAAd,GAAA,UAAA,CAAA,CAAA,CAAA,CAAA;;AACA,EAAA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAW;AAC9B,IAAA,IAAIC,KAAQ,CAACC,OAAT,CAAiBF,KAAjB,CAAJ,EAA6B;AAC3BF,MAAAA,QAAQ,CAACE,KAAD,CAAR,CAAA;AACD,KAFD,MAEO;AACLF,MAAAA,QAAQ,CAACP,KAAD,CAAR,CAAA;AACD,KAAA;AACF,GAND,CAAA;;AAOAY,EAAAA,SAAS,CAAC,YAAM;AACdR,IAAAA,eAAe,CAACE,KAAD,CAAf,CAAA;AACD,GAFQ,EAEN,CAACA,KAAD,CAFM,CAAT,CAAA;AAGAM,EAAAA,SAAS,CAAC,YAAM;AACdL,IAAAA,QAAQ,CAACP,KAAD,CAAR,CAAA;AACD,GAFQ,EAEN,CAACA,KAAD,CAFM,CAAT,CAAA;AAGA,EAAA,sBAAuBa,KAAK,CAACC,aAAN,CAAoB,KAApB,EAA2B;AAChDC,IAAAA,SAAS,YAAKjB,aAAL,EAAA,oBAAA,CAAA;AADuC,GAA3B,iBAEJe,KAAK,CAACC,aAAN,CAAoBE,KAApB,kCACdd,UADc,CAAA,EAAA,EAAA,EAAA;AAEjBI,IAAAA,KAAK,EAALA,KAFiB;AAGjBL,IAAAA,QAAQ,EAARA,QAHiB;AAIjBgB,IAAAA,KAAK,iBAAkBJ,KAAK,CAACC,aAAN,CAAoB,KAApB,EAA2B;AAChDC,MAAAA,SAAS,EAAEG,UAAU,CAAIpB,EAAAA,CAAAA,MAAAA,CAAAA,aAAJ,0CAAiDA,aAAjD,EAAA,YAAA,CAAA,CAAA;AAD2B,KAA3B,iBAEJe,KAAK,CAACC,aAAN,CAAoB,MAApB,EAA4B;AAC7CC,MAAAA,SAAS,EAAE,aADkC;AAE7CI,MAAAA,KAAK,EAAE;AACLC,QAAAA,UAAU,EAAEd,KAAAA;AADP,OAAA;AAFsC,KAA5B,CAFI,CAJN;AAYjBe,IAAAA,MAAM,EAAEb,YAZS;AAajBc,IAAAA,QAAQ,EAAE,SAAA,QAAA,CAACC,CAAD,EAAA;AAAA,MAAOhB,OAAAA,QAAQ,CAACgB,CAAD,CAAf,CAAA;AAAA,KAAA;AAbO,GAAA,CAAA,CAFI,CAAvB,CAAA;AAiBD,CAzCD,CAAA;;AA0CA,mBAAA,aAAeV,KAAK,CAACW,IAAN,CAAW5B,kBAAX,CAAf;;;;"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { TdColorPickerProps } from '.';
|
|
2
|
+
/** 常量 */
|
|
3
|
+
export declare const TD_COLOR_USED_COLORS_MAX_SIZE = 100;
|
|
4
|
+
export declare const COLOR_MODES: {
|
|
5
|
+
monochrome: string;
|
|
6
|
+
'linear-gradient': string;
|
|
7
|
+
};
|
|
8
|
+
export declare const FORMATS: TdColorPickerProps['format'][];
|
|
9
|
+
export declare const DEFAULT_COLOR = "#001F97";
|
|
10
|
+
export declare const DEFAULT_LINEAR_GRADIENT = "linear-gradient(90deg, rgba(241,29,0,1) 0%, rgba(73,106,220,1) 100%);";
|
|
11
|
+
export declare const DEFAULT_SYSTEM_SWATCH_COLORS: string[];
|
|
12
|
+
export declare const SATURATION_PANEL_DEFAULT_WIDTH = 248;
|
|
13
|
+
export declare const SATURATION_PANEL_DEFAULT_HEIGHT = 140;
|
|
14
|
+
export declare const SLIDER_DEFAULT_WIDTH = 248;
|
|
15
|
+
export declare const GRADIENT_SLIDER_DEFAULT_WIDTH = 190;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* tdesign v0.31.1
|
|
3
|
+
* (c) 2022 tdesign
|
|
4
|
+
* @license MIT
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
var TD_COLOR_USED_COLORS_MAX_SIZE = 100;
|
|
8
|
+
var COLOR_MODES = {
|
|
9
|
+
monochrome: "\u5355\u8272",
|
|
10
|
+
"linear-gradient": "\u6E10\u53D8"
|
|
11
|
+
};
|
|
12
|
+
var FORMATS = ["HEX", "RGB", "HSL", "HSV", "CMYK", "CSS"];
|
|
13
|
+
var DEFAULT_COLOR = "#001F97";
|
|
14
|
+
var DEFAULT_LINEAR_GRADIENT = "linear-gradient(90deg, rgba(241,29,0,1) 0%, rgba(73,106,220,1) 100%);";
|
|
15
|
+
var DEFAULT_SYSTEM_SWATCH_COLORS = ["#ECF2FE", "#D4E3FC", "#BBD3FB", "#96BBF8", "#699EF5", "#4787F0", "#266FE8", "#0052D9", "#0034B5", "#001F97", "#FDECEE", "#F9D7D9", "#F8B9BE", "#F78D94", "#F36D78", "#E34D59", "#C9353F", "#B11F26", "#951114", "#680506", "#FEF3E6", "#F9E0C7", "#F7C797", "#F2995F", "#ED7B2F", "#D35A21", "#BA431B", "#9E3610", "#842B0B", "#5A1907", "#E8F8F2", "#BCEBDC", "#85DBBE", "#48C79C", "#00A870", "#078D5C", "#067945", "#056334", "#044F2A", "#033017"];
|
|
16
|
+
var SATURATION_PANEL_DEFAULT_WIDTH = 248;
|
|
17
|
+
var SATURATION_PANEL_DEFAULT_HEIGHT = 140;
|
|
18
|
+
var SLIDER_DEFAULT_WIDTH = 248;
|
|
19
|
+
var GRADIENT_SLIDER_DEFAULT_WIDTH = 190;
|
|
20
|
+
|
|
21
|
+
export { COLOR_MODES, DEFAULT_COLOR, DEFAULT_LINEAR_GRADIENT, DEFAULT_SYSTEM_SWATCH_COLORS, FORMATS, GRADIENT_SLIDER_DEFAULT_WIDTH, SATURATION_PANEL_DEFAULT_HEIGHT, SATURATION_PANEL_DEFAULT_WIDTH, SLIDER_DEFAULT_WIDTH, TD_COLOR_USED_COLORS_MAX_SIZE };
|
|
22
|
+
//# sourceMappingURL=const.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"const.js","sources":["../../src/color-picker/const.ts"],"sourcesContent":["import { TdColorPickerProps } from '.';\n\n/** 常量 */\n\n// 最近使用颜色最大个数\nexport const TD_COLOR_USED_COLORS_MAX_SIZE = 100; // 每行10个\n\n// 颜色模式options配置\nexport const COLOR_MODES = {\n monochrome: '单色',\n 'linear-gradient': '渐变',\n};\n\n// 非透明色格式化类型\nexport const FORMATS: TdColorPickerProps['format'][] = ['HEX', 'RGB', 'HSL', 'HSV', 'CMYK', 'CSS'];\n\n// 默认颜色\nexport const DEFAULT_COLOR = '#001F97';\n\n// 默认渐变色\nexport const DEFAULT_LINEAR_GRADIENT = 'linear-gradient(90deg, rgba(241,29,0,1) 0%, rgba(73,106,220,1) 100%);';\n\n// 默认系统色彩\nexport const DEFAULT_SYSTEM_SWATCH_COLORS = [\n '#ECF2FE',\n '#D4E3FC',\n '#BBD3FB',\n '#96BBF8',\n '#699EF5',\n '#4787F0',\n '#266FE8',\n '#0052D9',\n '#0034B5',\n '#001F97',\n '#FDECEE',\n '#F9D7D9',\n '#F8B9BE',\n '#F78D94',\n '#F36D78',\n '#E34D59',\n '#C9353F',\n '#B11F26',\n '#951114',\n '#680506',\n '#FEF3E6',\n '#F9E0C7',\n '#F7C797',\n '#F2995F',\n '#ED7B2F',\n '#D35A21',\n '#BA431B',\n '#9E3610',\n '#842B0B',\n '#5A1907',\n '#E8F8F2',\n '#BCEBDC',\n '#85DBBE',\n '#48C79C',\n '#00A870',\n '#078D5C',\n '#067945',\n '#056334',\n '#044F2A',\n '#033017',\n];\n\n// saturation-panel default rect\nexport const SATURATION_PANEL_DEFAULT_WIDTH = 248;\nexport const SATURATION_PANEL_DEFAULT_HEIGHT = 140;\nexport const SLIDER_DEFAULT_WIDTH = 248;\nexport const GRADIENT_SLIDER_DEFAULT_WIDTH = 190;\n"],"names":["TD_COLOR_USED_COLORS_MAX_SIZE","COLOR_MODES","monochrome","FORMATS","DEFAULT_COLOR","DEFAULT_LINEAR_GRADIENT","DEFAULT_SYSTEM_SWATCH_COLORS","SATURATION_PANEL_DEFAULT_WIDTH","SATURATION_PANEL_DEFAULT_HEIGHT","SLIDER_DEFAULT_WIDTH","GRADIENT_SLIDER_DEFAULT_WIDTH"],"mappings":";;;;;;AAAO,IAAMA,6BAA6B,GAAG,IAAtC;AACA,IAAMC,WAAW,GAAG;AACzBC,EAAAA,UAAU,EAAE,cADa;AAEzB,EAAmB,iBAAA,EAAA,cAAA;AAFM,EAApB;AAIMC,IAAAA,OAAO,GAAG,CAAC,KAAD,EAAQ,KAAR,EAAe,KAAf,EAAsB,KAAtB,EAA6B,MAA7B,EAAqC,KAArC,EAAhB;AACA,IAAMC,aAAa,GAAG,UAAtB;AACA,IAAMC,uBAAuB,GAAG,wEAAhC;IACMC,4BAA4B,GAAG,CAC1C,SAD0C,EAE1C,SAF0C,EAG1C,SAH0C,EAI1C,SAJ0C,EAK1C,SAL0C,EAM1C,SAN0C,EAO1C,SAP0C,EAQ1C,SAR0C,EAS1C,SAT0C,EAU1C,SAV0C,EAW1C,SAX0C,EAY1C,SAZ0C,EAa1C,SAb0C,EAc1C,SAd0C,EAe1C,SAf0C,EAgB1C,SAhB0C,EAiB1C,SAjB0C,EAkB1C,SAlB0C,EAmB1C,SAnB0C,EAoB1C,SApB0C,EAqB1C,SArB0C,EAsB1C,SAtB0C,EAuB1C,SAvB0C,EAwB1C,SAxB0C,EAyB1C,SAzB0C,EA0B1C,SA1B0C,EA2B1C,SA3B0C,EA4B1C,SA5B0C,EA6B1C,SA7B0C,EA8B1C,SA9B0C,EA+B1C,SA/B0C,EAgC1C,SAhC0C,EAiC1C,SAjC0C,EAkC1C,SAlC0C,EAmC1C,SAnC0C,EAoC1C,SApC0C,EAqC1C,SArC0C,EAsC1C,SAtC0C,EAuC1C,SAvC0C,EAwC1C,SAxC0C,EAArC;AA0CA,IAAMC,8BAA8B,GAAG,IAAvC;AACA,IAAMC,+BAA+B,GAAG,IAAxC;AACA,IAAMC,oBAAoB,GAAG,IAA7B;AACA,IAAMC,6BAA6B,GAAG;;;;"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* tdesign v0.31.1
|
|
3
|
+
* (c) 2022 tdesign
|
|
4
|
+
* @license MIT
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import useConfig from '../../_util/useConfig.js';
|
|
8
|
+
import 'react';
|
|
9
|
+
import '../../_chunks/dep-bbad8591.js';
|
|
10
|
+
import '../../_chunks/dep-1628aaec.js';
|
|
11
|
+
import '../../_chunks/dep-8702aba9.js';
|
|
12
|
+
import '../../_chunks/dep-e9e7c24f.js';
|
|
13
|
+
import '../../_chunks/dep-c47502ef.js';
|
|
14
|
+
import '../../_chunks/dep-3a2f4bdf.js';
|
|
15
|
+
import '../../_chunks/dep-d51fd958.js';
|
|
16
|
+
import '../../_chunks/dep-db8880c0.js';
|
|
17
|
+
import '../../_chunks/dep-8efaaac0.js';
|
|
18
|
+
import '../../_chunks/dep-d539b435.js';
|
|
19
|
+
import '../../_chunks/dep-2b0021c1.js';
|
|
20
|
+
import '../../_chunks/dep-09299e3f.js';
|
|
21
|
+
import '../../_chunks/dep-23b2574f.js';
|
|
22
|
+
import '../../_chunks/dep-a1403158.js';
|
|
23
|
+
import '../../_chunks/dep-c03c5f48.js';
|
|
24
|
+
import '../../_chunks/dep-9b67144e.js';
|
|
25
|
+
import '../../_chunks/dep-d038aaf3.js';
|
|
26
|
+
import '../../_chunks/dep-00728537.js';
|
|
27
|
+
import '../../_chunks/dep-32abd81f.js';
|
|
28
|
+
import '../../_chunks/dep-f3e5eb4b.js';
|
|
29
|
+
import '../../_chunks/dep-ae52f85e.js';
|
|
30
|
+
import '../../_chunks/dep-63ed508e.js';
|
|
31
|
+
import '../../_chunks/dep-155571ca.js';
|
|
32
|
+
import '../../_chunks/dep-81670ae9.js';
|
|
33
|
+
import '../../locale/zh_CN.js';
|
|
34
|
+
import '../../_common/js/global-config/locale/zh_CN.js';
|
|
35
|
+
import '../../config-provider/zh_CN_config.js';
|
|
36
|
+
|
|
37
|
+
var useClassname = function useClassname() {
|
|
38
|
+
var _useConfig = useConfig(),
|
|
39
|
+
classPrefix = _useConfig.classPrefix;
|
|
40
|
+
|
|
41
|
+
var baseClassName = "".concat(classPrefix, "-color-picker");
|
|
42
|
+
return baseClassName;
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export { useClassname as default };
|
|
46
|
+
//# sourceMappingURL=useClassname.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useClassname.js","sources":["../../../src/color-picker/hooks/useClassname.ts"],"sourcesContent":["import useConfig from '../../_util/useConfig';\n\nconst useClassname = () => {\n const { classPrefix } = useConfig();\n const baseClassName = `${classPrefix}-color-picker`;\n return baseClassName;\n};\n\nexport default useClassname;\n"],"names":["useClassname","useConfig","classPrefix","baseClassName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAMA,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,EAAA,IAAA,UAAA,GAAwBC,SAAS,EAAjC;AAAA,MAAQC,WAAR,cAAQA,WAAR,CAAA;;AACA,EAAMC,IAAAA,aAAa,GAAMD,EAAAA,CAAAA,MAAAA,CAAAA,WAAN,EAAnB,eAAA,CAAA,CAAA;AACA,EAAA,OAAOC,aAAP,CAAA;AACD;;;;"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import './style';
|
|
3
|
+
export type { ColorPickerProps } from './interface';
|
|
4
|
+
export * from './type';
|
|
5
|
+
export declare const ColorPickerPanel: import("react").MemoExoticComponent<{
|
|
6
|
+
(props: import("./interface").ColorPickerProps): JSX.Element;
|
|
7
|
+
displayName: string;
|
|
8
|
+
}>;
|
|
9
|
+
export declare const ColorPicker: import("react").NamedExoticComponent<import("./interface").ColorPickerProps>;
|
|
10
|
+
export default ColorPicker;
|