vap1 0.6.9 → 0.7.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.
|
@@ -1,34 +1,26 @@
|
|
|
1
|
-
import type { FC, ReactNode, PropsWithChildren
|
|
2
|
-
import type { PopoverProps } from '
|
|
1
|
+
import type { FC, ReactNode, PropsWithChildren } from 'react';
|
|
2
|
+
import type { PopoverProps } from './Popover';
|
|
3
3
|
interface PresetsItem {
|
|
4
4
|
label: ReactNode;
|
|
5
5
|
colors: string[];
|
|
6
6
|
}
|
|
7
7
|
/**
|
|
8
|
-
* 说明
|
|
9
|
-
* 仅支持 value/onChange/className/style 属性
|
|
10
|
-
* 仅支持 hex 值，格式为 #ffffff 不支持其它任何格式
|
|
11
|
-
*
|
|
12
|
-
* 后续会支持 presets ，
|
|
13
|
-
* 其它属性均不支持（升2.0后支持）
|
|
8
|
+
* 说明1.5版本仅支持HEX
|
|
14
9
|
*/
|
|
15
10
|
type ColorFormat = 'hex';
|
|
16
11
|
export type ColorPickerProps = {
|
|
17
|
-
value?: string;
|
|
18
|
-
defaultValue?: string;
|
|
19
|
-
placeholder?: string;
|
|
20
|
-
onChange?: (hex: string) => void;
|
|
21
|
-
style?: CSSProperties;
|
|
22
|
-
className?: string;
|
|
23
12
|
allowClear?: boolean;
|
|
24
13
|
arrow?: boolean;
|
|
25
14
|
size?: 'large' | 'middle' | 'small';
|
|
26
15
|
placement?: PopoverProps['placement'];
|
|
16
|
+
value?: string;
|
|
17
|
+
defaultValue?: string;
|
|
27
18
|
defaultFormat?: ColorFormat;
|
|
28
19
|
format?: ColorFormat;
|
|
29
20
|
disabled?: boolean;
|
|
30
21
|
disabledAlpha?: boolean;
|
|
31
22
|
destroyTooltipOnHide?: boolean;
|
|
23
|
+
onChange?: (value: any, hex: string) => void;
|
|
32
24
|
presets?: PresetsItem[];
|
|
33
25
|
showText?: boolean;
|
|
34
26
|
};
|
|
@@ -59,113 +59,90 @@ var __read = (this && this.__read) || function (o, n) {
|
|
|
59
59
|
}
|
|
60
60
|
return ar;
|
|
61
61
|
};
|
|
62
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
63
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
64
|
+
};
|
|
62
65
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
63
66
|
exports.ColorPicker = void 0;
|
|
64
67
|
var react_1 = __importStar(require("react"));
|
|
65
|
-
var
|
|
68
|
+
var lodash_1 = __importDefault(require("lodash"));
|
|
69
|
+
var Popover_1 = require("./Popover");
|
|
70
|
+
var Icon_1 = require("./Icon");
|
|
66
71
|
var react_color_1 = require("react-color");
|
|
67
72
|
var hooks_1 = require("../../hooks");
|
|
68
|
-
var
|
|
69
|
-
var value = _a.value, onChange = _a.onChange;
|
|
70
|
-
return react_1.default.createElement(react_color_1.SketchPicker, { width: "256px",
|
|
71
|
-
// presets={presets}
|
|
72
|
-
disableAlpha: true, color: value, onChange: function (val) { return onChange(val.hex); } });
|
|
73
|
-
};
|
|
74
|
-
var REG_COLOR = /^#[0-9A-Fa-f]{6}$/;
|
|
73
|
+
var utils_1 = require("../../utils");
|
|
75
74
|
var ColorPicker = function (props) {
|
|
76
|
-
var value = props.value, defaultValue = props.defaultValue, onChange = props.onChange, placeholder = props.placeholder, style = props.style, className = props.className;
|
|
77
|
-
var isFristMount = (0, hooks_1.useFirstMountState)();
|
|
78
75
|
var _a = __read((0, hooks_1.useToggle)(), 2), open = _a[0], show = _a[1];
|
|
79
|
-
var
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
if (
|
|
83
|
-
return
|
|
84
|
-
return
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
// setValue(null);
|
|
151
|
-
// props.onChange(null, null);
|
|
152
|
-
// }
|
|
153
|
-
// return <Fragment>
|
|
154
|
-
// <span {...spanProps} ref={spanRef} onClick={evt => PageUtil.stopEvent(evt, show)}>
|
|
155
|
-
// {content}
|
|
156
|
-
// {value != null && props.allowClear && <Icon type='close' onClick={clearColor} />}
|
|
157
|
-
// </span>
|
|
158
|
-
//
|
|
159
|
-
// <Popover
|
|
160
|
-
// open={open}
|
|
161
|
-
// {...popoverProps}
|
|
162
|
-
// onOpenChange={(isOpen) => {
|
|
163
|
-
// if (!isOpen) {
|
|
164
|
-
// show(false)
|
|
165
|
-
// }
|
|
166
|
-
// }}
|
|
167
|
-
// content={<SketchPicker {...colorProps} color={value} />}>
|
|
168
|
-
// </Popover>
|
|
169
|
-
// </Fragment>
|
|
76
|
+
var spanRef = (0, react_1.useRef)();
|
|
77
|
+
var _b = __read((0, react_1.useState)(props.value || props.defaultValue), 2), value = _b[0], setValue = _b[1];
|
|
78
|
+
var content = (0, react_1.useMemo)(function () {
|
|
79
|
+
if (props.children)
|
|
80
|
+
return props.children;
|
|
81
|
+
return react_1.default.createElement(react_1.Fragment, null,
|
|
82
|
+
react_1.default.createElement("i", { style: { backgroundColor: value } }),
|
|
83
|
+
" ",
|
|
84
|
+
react_1.default.createElement("strong", null, (props.showText && value != null) ? react_1.default.createElement("span", null, value) : utils_1.Const.NONE));
|
|
85
|
+
}, [value]);
|
|
86
|
+
var popoverProps = (0, react_1.useMemo)(function () {
|
|
87
|
+
var popoverProps = {
|
|
88
|
+
placement: 'bottomLeft',
|
|
89
|
+
arrow: true,
|
|
90
|
+
overlayClassName: 'v-color-picker',
|
|
91
|
+
defaultOpen: false,
|
|
92
|
+
trigger: 'click',
|
|
93
|
+
getTooltipContainer: function () { return spanRef.current; }
|
|
94
|
+
};
|
|
95
|
+
if (lodash_1.default.has(props, 'placement'))
|
|
96
|
+
popoverProps.placement = props.placement;
|
|
97
|
+
if (lodash_1.default.has(props, 'arrow'))
|
|
98
|
+
popoverProps.arrow = props.arrow;
|
|
99
|
+
return popoverProps;
|
|
100
|
+
}, []);
|
|
101
|
+
var spanProps = (0, react_1.useMemo)(function () {
|
|
102
|
+
var spanProps = { className: 'v-color-picker-brick', };
|
|
103
|
+
if (props.size)
|
|
104
|
+
spanProps.className = spanProps.className + ' v-color-picker-brick-' + props.size;
|
|
105
|
+
return spanProps;
|
|
106
|
+
}, [props.disabled, props.value]);
|
|
107
|
+
var colorProps = (0, react_1.useMemo)(function () {
|
|
108
|
+
var colorProps = {
|
|
109
|
+
disableAlpha: false,
|
|
110
|
+
onChangeComplete: function (color, evt) {
|
|
111
|
+
utils_1.PageUtil.stopEvent(evt);
|
|
112
|
+
setValue(color.hex);
|
|
113
|
+
if (lodash_1.default.isFunction(props.onChange)) {
|
|
114
|
+
props.onChange(color, color.hex);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
if (props.presets) {
|
|
119
|
+
var colors_1 = [];
|
|
120
|
+
props.presets.map(function (item) {
|
|
121
|
+
item.colors.map(function (color) { return colors_1.push(color); });
|
|
122
|
+
// return {
|
|
123
|
+
// color: item.colors,
|
|
124
|
+
// title: item.label,
|
|
125
|
+
// }
|
|
126
|
+
});
|
|
127
|
+
colorProps.presetColors = colors_1;
|
|
128
|
+
}
|
|
129
|
+
if (props.disabledAlpha)
|
|
130
|
+
colorProps.disableAlpha = true;
|
|
131
|
+
return colorProps;
|
|
132
|
+
}, []);
|
|
133
|
+
var clearColor = function () {
|
|
134
|
+
setValue(null);
|
|
135
|
+
props.onChange(null, null);
|
|
136
|
+
};
|
|
137
|
+
return react_1.default.createElement(react_1.Fragment, null,
|
|
138
|
+
react_1.default.createElement("span", __assign({}, spanProps, { ref: spanRef, onClick: function (evt) { return utils_1.PageUtil.stopEvent(evt, show); } }),
|
|
139
|
+
content,
|
|
140
|
+
value != null && props.allowClear && react_1.default.createElement(Icon_1.Icon, { type: 'close', onClick: clearColor })),
|
|
141
|
+
"\u00A0",
|
|
142
|
+
react_1.default.createElement(Popover_1.Popover, __assign({ open: open }, popoverProps, { onOpenChange: function (isOpen) {
|
|
143
|
+
if (!isOpen) {
|
|
144
|
+
show(false);
|
|
145
|
+
}
|
|
146
|
+
}, content: react_1.default.createElement(react_color_1.SketchPicker, __assign({}, colorProps, { color: value })) })));
|
|
170
147
|
};
|
|
171
148
|
exports.ColorPicker = ColorPicker;
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"vap1","version":"0.
|
|
1
|
+
{"name":"vap1","version":"0.7.0","description":"vap1, Both support MicroService and SAP FrameWork, Support IE>9","main":"index.js","author":"Xiang da","license":"ISC"}
|