ish-ui 1.3.8 → 1.3.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.
- package/dist/colorPicker/ColorPicker.js +11 -18
- package/package.json +1 -1
|
@@ -113,16 +113,19 @@ const ColorPickerBase = React.memo(({ color, input: { value, onChange }, Transit
|
|
|
113
113
|
const [hueColor, setHueColor] = useState(color);
|
|
114
114
|
const [alfaColor, setAlfaColor] = useState(color);
|
|
115
115
|
const hueRef = useRef(undefined);
|
|
116
|
-
const
|
|
117
|
-
setHueColor(color.hsv);
|
|
118
|
-
setAlfaColor(color.hsv);
|
|
119
|
-
}, []);
|
|
120
|
-
const onAlfaChange = useCallback(color => {
|
|
116
|
+
const onColorChange = useCallback(color => {
|
|
121
117
|
setHueColor({
|
|
122
118
|
h: color.hsv.h, s: color.hsv.a, v: color.hsv.v, a: 1
|
|
123
119
|
});
|
|
124
120
|
setAlfaColor(color.hsv);
|
|
125
121
|
}, []);
|
|
122
|
+
const onChangeComplete = (color) => {
|
|
123
|
+
var _a, _b;
|
|
124
|
+
const hex = ((_b = (_a = hueRef.current) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.hex) || (color === null || color === void 0 ? void 0 : color.hex);
|
|
125
|
+
if (hex) {
|
|
126
|
+
onChange(hex.replace('#', ''));
|
|
127
|
+
}
|
|
128
|
+
};
|
|
126
129
|
const handleClickAway = useCallback(() => {
|
|
127
130
|
setAnchorEl(null);
|
|
128
131
|
}, []);
|
|
@@ -141,28 +144,18 @@ const ColorPickerBase = React.memo(({ color, input: { value, onChange }, Transit
|
|
|
141
144
|
h: hueHsv.h, s: 1, v: hueHsv.v, a: hueHsv.s
|
|
142
145
|
});
|
|
143
146
|
}, [hueRef.current]);
|
|
144
|
-
const onMaterialChange = useCallback(color => {
|
|
145
|
-
setHueColor(color.hsv);
|
|
146
|
-
}, []);
|
|
147
|
-
const onChangeComplete = (color) => {
|
|
148
|
-
var _a, _b;
|
|
149
|
-
const hex = ((_b = (_a = hueRef.current) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.hex) || (color === null || color === void 0 ? void 0 : color.hex);
|
|
150
|
-
if (hex) {
|
|
151
|
-
onChange(hex.replace('#', ''));
|
|
152
|
-
}
|
|
153
|
-
};
|
|
154
147
|
return (React.createElement(ClickAwayListener, { onClickAway: handleClickAway },
|
|
155
148
|
React.createElement(Grow, Object.assign({}, TransitionProps, { timeout: 200 }),
|
|
156
149
|
React.createElement(Paper, { className: classes.paper },
|
|
157
150
|
React.createElement("span", { className: classes.arrow, "data-popper-arrow": true }),
|
|
158
|
-
React.createElement(HuePicker, { ref: hueRef, color: hueColor, onChange:
|
|
159
|
-
React.createElement(AlphaPicker, { className: classes.customAlfa, color: alfaColor, width: "168", onChange:
|
|
151
|
+
React.createElement(HuePicker, { ref: hueRef, color: hueColor, onChange: onColorChange, onChangeComplete: onChangeComplete, width: "168", className: classes.bottomOffset }),
|
|
152
|
+
React.createElement(AlphaPicker, { className: classes.customAlfa, color: alfaColor, width: "168", onChange: onColorChange, onChangeComplete: onChangeComplete }),
|
|
160
153
|
React.createElement("div", { className: classes.material },
|
|
161
154
|
React.createElement(MaterialPicker, { styles: {
|
|
162
155
|
default: {
|
|
163
156
|
material: { width: '100%', height: 'unset', padding: 0, fontFamily: 'inherit' }
|
|
164
157
|
}
|
|
165
|
-
}, color: hueColor, onChange:
|
|
158
|
+
}, color: hueColor, onChange: onColorChange, onChangeComplete: onChangeComplete }))))));
|
|
166
159
|
});
|
|
167
160
|
const ColorPickerWrapper = React.memo(({ input, placement = 'top', width }) => {
|
|
168
161
|
const { classes, cx } = useStyles();
|