vap1 0.6.8 → 0.6.9
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,26 +1,34 @@
|
|
|
1
|
-
import type { FC, ReactNode, PropsWithChildren } from 'react';
|
|
2
|
-
import type { PopoverProps } from '
|
|
1
|
+
import type { FC, ReactNode, PropsWithChildren, CSSProperties } from 'react';
|
|
2
|
+
import type { PopoverProps } from 'antd/es/popover';
|
|
3
3
|
interface PresetsItem {
|
|
4
4
|
label: ReactNode;
|
|
5
5
|
colors: string[];
|
|
6
6
|
}
|
|
7
7
|
/**
|
|
8
|
-
* 说明1.5
|
|
8
|
+
* 说明 1.5 版本
|
|
9
|
+
* 仅支持 value/onChange/className/style 属性
|
|
10
|
+
* 仅支持 hex 值，格式为 #ffffff 不支持其它任何格式
|
|
11
|
+
*
|
|
12
|
+
* 后续会支持 presets ，
|
|
13
|
+
* 其它属性均不支持（升2.0后支持）
|
|
9
14
|
*/
|
|
10
15
|
type ColorFormat = 'hex';
|
|
11
16
|
export type ColorPickerProps = {
|
|
17
|
+
value?: string;
|
|
18
|
+
defaultValue?: string;
|
|
19
|
+
placeholder?: string;
|
|
20
|
+
onChange?: (hex: string) => void;
|
|
21
|
+
style?: CSSProperties;
|
|
22
|
+
className?: string;
|
|
12
23
|
allowClear?: boolean;
|
|
13
24
|
arrow?: boolean;
|
|
14
25
|
size?: 'large' | 'middle' | 'small';
|
|
15
26
|
placement?: PopoverProps['placement'];
|
|
16
|
-
value?: string;
|
|
17
|
-
defaultValue?: string;
|
|
18
27
|
defaultFormat?: ColorFormat;
|
|
19
28
|
format?: ColorFormat;
|
|
20
29
|
disabled?: boolean;
|
|
21
30
|
disabledAlpha?: boolean;
|
|
22
31
|
destroyTooltipOnHide?: boolean;
|
|
23
|
-
onChange?: (value: any, hex: string) => void;
|
|
24
32
|
presets?: PresetsItem[];
|
|
25
33
|
showText?: boolean;
|
|
26
34
|
};
|
|
@@ -59,90 +59,113 @@ 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
|
-
};
|
|
65
62
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
66
63
|
exports.ColorPicker = void 0;
|
|
67
64
|
var react_1 = __importStar(require("react"));
|
|
68
|
-
var
|
|
69
|
-
var Popover_1 = require("./Popover");
|
|
70
|
-
var Icon_1 = require("./Icon");
|
|
65
|
+
var antd_1 = require("antd");
|
|
71
66
|
var react_color_1 = require("react-color");
|
|
72
67
|
var hooks_1 = require("../../hooks");
|
|
73
|
-
var
|
|
68
|
+
var ColorSelector = function (_a) {
|
|
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}$/;
|
|
74
75
|
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)();
|
|
75
78
|
var _a = __read((0, hooks_1.useToggle)(), 2), open = _a[0], show = _a[1];
|
|
76
|
-
var
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
if (
|
|
80
|
-
return
|
|
81
|
-
return
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
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
|
-
|
|
79
|
+
var _b = __read((0, react_1.useState)(function () {
|
|
80
|
+
if (value && REG_COLOR.test(value))
|
|
81
|
+
return value;
|
|
82
|
+
if (defaultValue && REG_COLOR.test(defaultValue))
|
|
83
|
+
return defaultValue;
|
|
84
|
+
return undefined;
|
|
85
|
+
}), 2), colorValue = _b[0], setColorValue = _b[1];
|
|
86
|
+
(0, react_1.useEffect)(function () {
|
|
87
|
+
if (isFristMount)
|
|
88
|
+
return;
|
|
89
|
+
if (typeof onChange != 'function')
|
|
90
|
+
return;
|
|
91
|
+
onChange(colorValue);
|
|
92
|
+
}, [colorValue]);
|
|
93
|
+
return react_1.default.createElement(antd_1.Popover, { arrowPointAtCenter: true, overlayClassName: 'v-color-picker', content: react_1.default.createElement(ColorSelector, { value: colorValue, onChange: setColorValue }), visible: open, onVisibleChange: function (open) {
|
|
94
|
+
if (!open)
|
|
95
|
+
show(false);
|
|
96
|
+
} },
|
|
97
|
+
react_1.default.createElement("span", { className: className, style: __assign({ cursor: 'pointer', display: 'flex', justifyContent: 'start', alignItems: 'center', gap: 6, color: colorValue, width: 108 }, style), onClick: show }, colorValue ? react_1.default.createElement(react_1.Fragment, null,
|
|
98
|
+
react_1.default.createElement("i", { style: { display: 'block', backgroundColor: colorValue, border: '1px solid #000', width: 12, height: 12, } }),
|
|
99
|
+
react_1.default.createElement("span", null, colorValue)) : (placeholder || '点击设置颜色')));
|
|
100
|
+
// const spanRef = useRef<HTMLSpanElement>()
|
|
101
|
+
// const [value, setValue] = useState(props.value || props.defaultValue);
|
|
102
|
+
// const content = useMemo(() => {
|
|
103
|
+
// // if (props.children) return props.children;
|
|
104
|
+
// return <Fragment><i style={{ backgroundColor: value }}></i> <strong>{(props.showText && value != null) ? <span>{value}</span> : Const.NONE}</strong></Fragment>
|
|
105
|
+
// }, [value]);
|
|
106
|
+
// const popoverProps = useMemo<PopoverProps>(() => {
|
|
107
|
+
// const popoverProps: PopoverProps = {
|
|
108
|
+
// placement: 'bottomLeft',
|
|
109
|
+
// arrow: true,
|
|
110
|
+
// overlayClassName: 'v-color-picker',
|
|
111
|
+
// defaultOpen: false,
|
|
112
|
+
// trigger: 'click',
|
|
113
|
+
// getTooltipContainer: () => spanRef.current
|
|
114
|
+
// }
|
|
115
|
+
// if (_.has(props, 'placement')) popoverProps.placement = props.placement;
|
|
116
|
+
// if (_.has(props, 'arrow')) popoverProps.arrow = props.arrow;
|
|
117
|
+
// return popoverProps;
|
|
118
|
+
// }, [])
|
|
119
|
+
// const spanProps = useMemo<HTMLProps<HTMLSpanElement>>(() => {
|
|
120
|
+
// const spanProps: HTMLProps<HTMLSpanElement> = { className: 'v-color-picker-brick', }
|
|
121
|
+
// if (props.size) spanProps.className = spanProps.className + ' v-color-picker-brick-' + props.size;
|
|
122
|
+
// return spanProps;
|
|
123
|
+
// }, [props.disabled, props.value]);
|
|
124
|
+
// const colorProps = useMemo<SketchPickerProps>(() => {
|
|
125
|
+
// const colorProps: SketchPickerProps = {
|
|
126
|
+
// disableAlpha: false,
|
|
127
|
+
// onChangeComplete: (color, evt) => {
|
|
128
|
+
// PageUtil.stopEvent(evt);
|
|
129
|
+
// setValue(color.hex)
|
|
130
|
+
// if (_.isFunction(props.onChange)) {
|
|
131
|
+
// props.onChange(color, color.hex)
|
|
132
|
+
// }
|
|
133
|
+
// }
|
|
134
|
+
// };
|
|
135
|
+
// if (props.presets) {
|
|
136
|
+
// let colors = [];
|
|
137
|
+
// props.presets.map(item => {
|
|
138
|
+
// item.colors.map(color => colors.push(color))
|
|
139
|
+
// // return {
|
|
140
|
+
// // color: item.colors,
|
|
141
|
+
// // title: item.label,
|
|
142
|
+
// // }
|
|
143
|
+
// })
|
|
144
|
+
// colorProps.presetColors = colors;
|
|
145
|
+
// }
|
|
146
|
+
// if (props.disabledAlpha) colorProps.disableAlpha = true;
|
|
147
|
+
// return colorProps;
|
|
148
|
+
// }, []);
|
|
149
|
+
// const clearColor = () => {
|
|
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>
|
|
147
170
|
};
|
|
148
171
|
exports.ColorPicker = ColorPicker;
|
|
@@ -217,7 +217,7 @@ var Color = function (_a) {
|
|
|
217
217
|
style.color = value;
|
|
218
218
|
style.fontWeight = 'bold';
|
|
219
219
|
}
|
|
220
|
-
return react_1.default.createElement(index_1.ColorPicker, __assign({}, colorProps, { disabled: isDisabled, value: value, onChange: function (
|
|
220
|
+
return react_1.default.createElement(index_1.ColorPicker, __assign({}, colorProps, { disabled: isDisabled, value: value, onChange: function (hex) { return setValue(editor, cmd, hex); } }),
|
|
221
221
|
react_1.default.createElement("span", { className: clazz.join(' '), style: style }));
|
|
222
222
|
};
|
|
223
223
|
exports.Color = Color;
|
|
@@ -235,7 +235,7 @@ var BgColor = function (_a) {
|
|
|
235
235
|
if (value) {
|
|
236
236
|
style.backgroundColor = value;
|
|
237
237
|
}
|
|
238
|
-
return react_1.default.createElement(index_1.ColorPicker, __assign({}, colorProps, { disabled: isDisabled, value: value, onChange: function (
|
|
238
|
+
return react_1.default.createElement(index_1.ColorPicker, __assign({}, colorProps, { disabled: isDisabled, value: value, onChange: function (hex) { return setValue(editor, cmd, hex); } }),
|
|
239
239
|
react_1.default.createElement("span", { className: clazz.join(' '), style: style }));
|
|
240
240
|
};
|
|
241
241
|
exports.BgColor = BgColor;
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"name":"vap1","version":"0.6.
|
|
1
|
+
{"name":"vap1","version":"0.6.9","description":"vap1, Both support MicroService and SAP FrameWork, Support IE>9","main":"index.js","author":"Xiang da","license":"ISC"}
|