@itwin/imodel-components-react 3.0.0-dev.100 → 3.0.0-dev.104
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/lib/cjs/imodel-components-react/color/ColorPickerDialog.d.ts +3 -2
- package/lib/cjs/imodel-components-react/color/ColorPickerDialog.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerDialog.js +17 -4
- package/lib/cjs/imodel-components-react/color/ColorPickerDialog.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPanel.d.ts +2 -2
- package/lib/cjs/imodel-components-react/color/ColorPickerPanel.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPanel.js +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPanel.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.d.ts +4 -3
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.d.ts.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.js +41 -22
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.js.map +1 -1
- package/lib/cjs/imodel-components-react/color/ColorPickerPopup.scss +12 -2
- package/lib/esm/imodel-components-react/color/ColorPickerDialog.d.ts +3 -2
- package/lib/esm/imodel-components-react/color/ColorPickerDialog.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerDialog.js +17 -4
- package/lib/esm/imodel-components-react/color/ColorPickerDialog.js.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPanel.d.ts +2 -2
- package/lib/esm/imodel-components-react/color/ColorPickerPanel.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPanel.js +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPanel.js.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.d.ts +4 -3
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.d.ts.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.js +41 -22
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.js.map +1 -1
- package/lib/esm/imodel-components-react/color/ColorPickerPopup.scss +12 -2
- package/lib/public/locales/en/UiIModelComponents.json +3 -1
- package/package.json +24 -24
|
@@ -11,9 +11,10 @@ export interface ColorPickerDialogProps {
|
|
|
11
11
|
color: ColorDef;
|
|
12
12
|
onOkResult: (selectedColor: ColorDef) => void;
|
|
13
13
|
onCancelResult: () => void;
|
|
14
|
+
/** displayed in rows of 9 items */
|
|
14
15
|
colorPresets?: ColorDef[];
|
|
15
|
-
/** If set show either HSL or
|
|
16
|
-
colorInputType?: "
|
|
16
|
+
/** If set show either HSL, RGB, or HEX input values. If undefined no input value is shown */
|
|
17
|
+
colorInputType?: "hsl" | "rgb" | "hex";
|
|
17
18
|
}
|
|
18
19
|
/**
|
|
19
20
|
* Color Picker Dialog to use as modal dialog.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerDialog.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAOH,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAG9C;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,QAAQ,CAAC;IAChB,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,
|
|
1
|
+
{"version":3,"file":"ColorPickerDialog.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAOH,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAG9C;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,QAAQ,CAAC;IAChB,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mCAAmC;IACnC,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,6FAA6F;IAC7F,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACxC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,sBAAsB,eAsDzI"}
|
|
@@ -31,7 +31,8 @@ exports.ColorPickerDialog = void 0;
|
|
|
31
31
|
const React = __importStar(require("react"));
|
|
32
32
|
const appui_abstract_1 = require("@itwin/appui-abstract");
|
|
33
33
|
const core_react_1 = require("@itwin/core-react");
|
|
34
|
-
const
|
|
34
|
+
const core_common_1 = require("@itwin/core-common");
|
|
35
|
+
const itwinui_react_1 = require("@itwin/itwinui-react");
|
|
35
36
|
/**
|
|
36
37
|
* Color Picker Dialog to use as modal dialog.
|
|
37
38
|
* @beta
|
|
@@ -47,16 +48,28 @@ function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, col
|
|
|
47
48
|
if (onCancelResult)
|
|
48
49
|
onCancelResult();
|
|
49
50
|
}, [onCancelResult]);
|
|
50
|
-
const
|
|
51
|
+
const handleColorChanged = React.useCallback((newColorValue) => {
|
|
52
|
+
const newColorDef = core_common_1.ColorDef.fromTbgr(newColorValue.toTbgr());
|
|
51
53
|
setActiveColor(newColorDef);
|
|
52
54
|
}, []);
|
|
53
55
|
const buttonCluster = React.useMemo(() => [
|
|
54
56
|
{ type: appui_abstract_1.DialogButtonType.OK, onClick: handleOk },
|
|
55
57
|
{ type: appui_abstract_1.DialogButtonType.Cancel, onClick: handleCancel },
|
|
56
58
|
], [handleCancel, handleOk]);
|
|
59
|
+
const colorOptions = React.useMemo(() => {
|
|
60
|
+
if (colorPresets) {
|
|
61
|
+
return colorPresets.map((def) => itwinui_react_1.ColorValue.fromTbgr(def.tbgr));
|
|
62
|
+
}
|
|
63
|
+
return undefined;
|
|
64
|
+
}, [colorPresets]);
|
|
57
65
|
return (React.createElement("div", { ref: dialogContainer },
|
|
58
|
-
React.createElement(core_react_1.Dialog, { title: dialogTitle, opened: true, resizable:
|
|
59
|
-
React.createElement(
|
|
66
|
+
React.createElement(core_react_1.Dialog, { title: dialogTitle, opened: true, resizable: false, movable: true, modal: true, buttonCluster: buttonCluster, onClose: handleCancel, onEscape: handleCancel, minHeight: 490, maxWidth: 320 },
|
|
67
|
+
React.createElement(itwinui_react_1.ColorPicker, { selectedColor: itwinui_react_1.ColorValue.fromTbgr(activeColor.tbgr), onChangeComplete: handleColorChanged },
|
|
68
|
+
React.createElement(itwinui_react_1.ColorBuilder, null),
|
|
69
|
+
colorInputType &&
|
|
70
|
+
React.createElement(itwinui_react_1.ColorInputPanel, { defaultColorFormat: colorInputType }),
|
|
71
|
+
colorOptions &&
|
|
72
|
+
React.createElement(itwinui_react_1.ColorPalette, { colors: colorOptions })))));
|
|
60
73
|
}
|
|
61
74
|
exports.ColorPickerDialog = ColorPickerDialog;
|
|
62
75
|
//# sourceMappingURL=ColorPickerDialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerDialog.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,4BAA4B;AAE5B,6CAA+B;AAC/B,0DAAyD;AACzD,kDAA2C;
|
|
1
|
+
{"version":3,"file":"ColorPickerDialog.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,4BAA4B;AAE5B,6CAA+B;AAC/B,0DAAyD;AACzD,kDAA2C;AAC3C,oDAA8C;AAC9C,wDAA4G;AAgB5G;;;GAGG;AACH,SAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAA0B;IACxI,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE3D,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACtC,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAC9B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,uBAAuB;QACvB,IAAI,cAAc;YAChB,cAAc,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,aAAyB,EAAE,EAAE;QACzE,MAAM,WAAW,GAAG,sBAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9D,cAAc,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;QACxC,EAAE,IAAI,EAAE,iCAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,EAAE,IAAI,EAAE,iCAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE;KACzD,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,0BAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;SACjE;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,6BAAK,GAAG,EAAE,eAAe;QACvB,oBAAC,mBAAM,IACL,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG;YAEb,oBAAC,2BAAW,IAAC,aAAa,EAAE,0BAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,gBAAgB,EAAE,kBAAkB;gBACrG,oBAAC,4BAAY,OAAG;gBACf,cAAc;oBACb,oBAAC,+BAAe,IAAC,kBAAkB,EAAE,cAAc,GAAI;gBACxD,YAAY;oBACX,oBAAC,4BAAY,IAAC,MAAM,EAAE,YAAY,GAAI,CAC5B,CACP,CACJ,CACR,CAAC;AACJ,CAAC;AAtDD,8CAsDC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport * as React from \"react\";\r\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\r\nimport { Dialog } from \"@itwin/core-react\";\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue } from \"@itwin/itwinui-react\";\r\n\r\n/** Properties for the [[ColorPickerDialog]] React component\r\n * @beta\r\n */\r\nexport interface ColorPickerDialogProps {\r\n dialogTitle: string;\r\n color: ColorDef;\r\n onOkResult: (selectedColor: ColorDef) => void;\r\n onCancelResult: () => void;\r\n /** displayed in rows of 9 items */\r\n colorPresets?: ColorDef[];\r\n /** If set show either HSL, RGB, or HEX input values. If undefined no input value is shown */\r\n colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\r\n}\r\n\r\n/**\r\n * Color Picker Dialog to use as modal dialog.\r\n * @beta\r\n */\r\nexport function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType }: ColorPickerDialogProps) {\r\n const [activeColor, setActiveColor] = React.useState(color);\r\n const dialogContainer = React.useRef<HTMLDivElement>(null);\r\n\r\n const handleOk = React.useCallback(() => {\r\n onOkResult(activeColor);\r\n }, [onOkResult, activeColor]);\r\n const handleCancel = React.useCallback(() => {\r\n // istanbul ignore else\r\n if (onCancelResult)\r\n onCancelResult();\r\n }, [onCancelResult]);\r\n\r\n const handleColorChanged = React.useCallback((newColorValue: ColorValue) => {\r\n const newColorDef = ColorDef.fromTbgr(newColorValue.toTbgr());\r\n setActiveColor(newColorDef);\r\n }, []);\r\n\r\n const buttonCluster = React.useMemo(() => [\r\n { type: DialogButtonType.OK, onClick: handleOk },\r\n { type: DialogButtonType.Cancel, onClick: handleCancel },\r\n ], [handleCancel, handleOk]);\r\n\r\n const colorOptions = React.useMemo(() => {\r\n if (colorPresets) {\r\n return colorPresets.map((def) => ColorValue.fromTbgr(def.tbgr));\r\n }\r\n return undefined;\r\n }, [colorPresets]);\r\n\r\n return (\r\n <div ref={dialogContainer}>\r\n <Dialog\r\n title={dialogTitle}\r\n opened={true}\r\n resizable={false}\r\n movable={true}\r\n modal={true}\r\n buttonCluster={buttonCluster}\r\n onClose={handleCancel}\r\n onEscape={handleCancel}\r\n minHeight={490}\r\n maxWidth={320}\r\n >\r\n <ColorPicker selectedColor={ColorValue.fromTbgr(activeColor.tbgr)} onChangeComplete={handleColorChanged} >\r\n <ColorBuilder />\r\n {colorInputType &&\r\n <ColorInputPanel defaultColorFormat={colorInputType} />}\r\n {colorOptions &&\r\n <ColorPalette colors={colorOptions} />}\r\n </ColorPicker>\r\n </Dialog>\r\n </div >\r\n );\r\n}\r\n"]}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { ColorDef } from "@itwin/core-common";
|
|
6
6
|
import "./ColorPickerPanel.scss";
|
|
7
7
|
/** Properties for the [[ColorPickerPanel]] React component
|
|
8
|
-
* @public
|
|
8
|
+
* @public @deprecated use `ColorPicker` for itwinui-react
|
|
9
9
|
*/
|
|
10
10
|
export interface ColorPickerPanelProps {
|
|
11
11
|
activeColor: ColorDef;
|
|
@@ -16,7 +16,7 @@ export interface ColorPickerPanelProps {
|
|
|
16
16
|
}
|
|
17
17
|
/**
|
|
18
18
|
* Color Picker Dialog to use as modal dialog.
|
|
19
|
-
* @public
|
|
19
|
+
* @public @deprecated use `ColorPicker` for itwinui-react
|
|
20
20
|
*/
|
|
21
21
|
export declare function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps): JSX.Element;
|
|
22
22
|
//# sourceMappingURL=ColorPickerPanel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerPanel.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAKH,OAAO,EAAE,QAAQ,EAAY,MAAM,oBAAoB,CAAC;AAIxD,OAAO,yBAAyB,CAAC;AAGjC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,QAAQ,CAAC;IACtB,aAAa,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,uFAAuF;IACvF,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAChC;AAED;;;GAGG;AAEH,wBAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,qBAAqB,
|
|
1
|
+
{"version":3,"file":"ColorPickerPanel.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAKH,OAAO,EAAE,QAAQ,EAAY,MAAM,oBAAoB,CAAC;AAIxD,OAAO,yBAAyB,CAAC;AAGjC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,QAAQ,CAAC;IACtB,aAAa,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,uFAAuF;IACvF,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAChC;AAED;;;GAGG;AAEH,wBAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,qBAAqB,eAsInH"}
|
|
@@ -37,7 +37,7 @@ require("./ColorPickerPanel.scss");
|
|
|
37
37
|
const core_react_1 = require("@itwin/core-react");
|
|
38
38
|
/**
|
|
39
39
|
* Color Picker Dialog to use as modal dialog.
|
|
40
|
-
* @public
|
|
40
|
+
* @public @deprecated use `ColorPicker` for itwinui-react
|
|
41
41
|
*/
|
|
42
42
|
// istanbul ignore next
|
|
43
43
|
function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport * as React from \"react\";\r\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\r\nimport { ColorSwatch } from \"./Swatch\";\r\nimport { HueSlider } from \"./HueSlider\";\r\nimport { SaturationPicker } from \"./SaturationPicker\";\r\nimport \"./ColorPickerPanel.scss\";\r\nimport { NumberInput } from \"@itwin/core-react\";\r\n\r\n/** Properties for the [[ColorPickerPanel]] React component\r\n * @public\r\n */\r\nexport interface ColorPickerPanelProps {\r\n activeColor: ColorDef;\r\n onColorChange: (selectedColor: ColorDef) => void;\r\n colorPresets?: ColorDef[];\r\n /** If set show either HSL or RGB input values. If undefined no input value is shown */\r\n colorInputType?: \"HSL\" | \"RGB\";\r\n}\r\n\r\n/**\r\n * Color Picker Dialog to use as modal dialog.\r\n * @public\r\n */\r\n// istanbul ignore next\r\nexport function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps) {\r\n\r\n const handlePresetColorPick = React.useCallback((newColor: ColorDef, e: React.MouseEvent<Element, MouseEvent>) => {\r\n e.preventDefault();\r\n if (onColorChange) {\r\n onColorChange(newColor);\r\n }\r\n }, [onColorChange]);\r\n\r\n const handleHueChange = React.useCallback((newHsvColor: HSVColor) => {\r\n // for a ColorDef to be created from hsv s can't be 0\r\n if (newHsvColor.s === 0) {\r\n newHsvColor = newHsvColor.clone(undefined, 0.5);\r\n }\r\n\r\n const newColorDef = newHsvColor.toColorDef();\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }, [onColorChange]);\r\n\r\n const handleSaturationChange = React.useCallback((newHsvColor: HSVColor) => {\r\n const newColorDef = newHsvColor.toColorDef();\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }, [onColorChange]);\r\n\r\n const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);\r\n const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);\r\n const color = React.useMemo(() => activeColor.colors, [activeColor]);\r\n\r\n const handleLightnessValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n const newHsl = currentHsl.clone(undefined, undefined, (value ?? 0) / 100);\r\n\r\n if (onColorChange) {\r\n const newColorDef = newHsl.toColorDef();\r\n onColorChange(newColorDef);\r\n }\r\n }, [currentHsl, onColorChange]);\r\n\r\n const handleHueValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n const newHsl = currentHsl.clone((value ?? 0) / 360, undefined, undefined);\r\n\r\n if (onColorChange) {\r\n const newColorDef = newHsl.toColorDef();\r\n onColorChange(newColorDef);\r\n }\r\n }, [currentHsl, onColorChange]);\r\n\r\n const handleSaturationValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n const newHsl = currentHsl.clone(undefined, (value ?? 0) / 100, undefined);\r\n\r\n if (onColorChange) {\r\n const newColorDef = newHsl.toColorDef();\r\n onColorChange(newColorDef);\r\n }\r\n }, [currentHsl, onColorChange]);\r\n\r\n const handleRedChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n if (undefined !== value) {\r\n const newColorDef = ColorDef.from(value, color.g, color.b);\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }\r\n }, [color, onColorChange]);\r\n\r\n const handleGreenChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n if (undefined !== value) {\r\n const newColorDef = ColorDef.from(color.r, value, color.b);\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }\r\n }, [color, onColorChange]);\r\n\r\n const handleBlueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n if (undefined !== value) {\r\n const newColorDef = ColorDef.from(color.r, color.g, value);\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }\r\n }, [color, onColorChange]);\r\n\r\n return (\r\n <div data-testid=\"components-colorpicker-panel\" className=\"components-colorpicker-panel\">\r\n <div className=\"components-colorpicker-panel-color\">\r\n <div className=\"components-colorpicker-saturation\">\r\n <SaturationPicker hsv={currentHsv} onSaturationChange={handleSaturationChange} />\r\n </div>\r\n <div className=\"components-colorpicker-hue\">\r\n <HueSlider hsv={currentHsv} onHueChange={handleHueChange} isHorizontal={false} />\r\n </div>\r\n </div>\r\n {(colorInputType === \"RGB\") &&\r\n <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">R</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-red\" value={color.r} onChange={handleRedChange} min={0} max={255} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">G</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-green\" value={color.g} onChange={handleGreenChange} min={0} max={255} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">B</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-blue\" value={color.b} onChange={handleBlueChange} min={0} max={255} />\r\n </div>\r\n </div>}\r\n {(colorInputType === \"HSL\") &&\r\n <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">H</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-hue\" value={Math.round(currentHsl.h * 360)} onChange={handleHueValueChange} min={0} max={360} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">S</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-saturation\" value={Math.round(currentHsl.s * 100)} onChange={handleSaturationValueChange} min={0} max={100} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">L</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-lightness\" value={Math.round(currentHsl.l * 100)} onChange={handleLightnessValueChange} min={0} max={100} />\r\n </div>\r\n </div>}\r\n\r\n {\r\n colorPresets && colorPresets.length &&\r\n <div className=\"components-colorpicker-panel-presets\">\r\n {colorPresets.map((preset, index) => <ColorSwatch className=\"components-colorpicker-panel-swatch\" key={index} colorDef={preset} round={false} onColorPick={handlePresetColorPick} />)}\r\n </div>\r\n }\r\n </div>\r\n );\r\n}\r\n"]}
|
|
1
|
+
{"version":3,"file":"ColorPickerPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,4BAA4B;AAE5B,6CAA+B;AAC/B,oDAAwD;AACxD,qCAAuC;AACvC,2CAAwC;AACxC,yDAAsD;AACtD,mCAAiC;AACjC,kDAAgD;AAahD;;;GAGG;AACH,uBAAuB;AACvB,SAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAyB;IAClH,MAAM,qBAAqB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAkB,EAAE,CAAwC,EAAE,EAAE;QAC/G,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,aAAa,EAAE;YACjB,aAAa,CAAC,QAAQ,CAAC,CAAC;SACzB;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,WAAqB,EAAE,EAAE;QAClE,qDAAqD;QACrD,IAAI,WAAW,CAAC,CAAC,KAAK,CAAC,EAAE;YACvB,WAAW,GAAG,WAAW,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;SACjD;QAED,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,EAAE,CAAC;QAC7C,IAAI,aAAa,EAAE;YACjB,aAAa,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,sBAAsB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,WAAqB,EAAE,EAAE;QACzE,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,EAAE,CAAC;QAC7C,IAAI,aAAa,EAAE;YACjB,aAAa,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAC3E,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAC3E,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAErE,MAAM,0BAA0B,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QACvG,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;QAE1E,IAAI,aAAa,EAAE;YACjB,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;YACxC,aAAa,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IAEhC,MAAM,oBAAoB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QACjG,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,CAAC,GAAG,GAAG,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;QAE1E,IAAI,aAAa,EAAE;YACjB,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;YACxC,aAAa,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IAEhC,MAAM,2BAA2B,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QACxG,MAAM,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,CAAC,GAAG,GAAG,EAAE,SAAS,CAAC,CAAC;QAE1E,IAAI,aAAa,EAAE;YACjB,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC;YACxC,aAAa,CAAC,WAAW,CAAC,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IAEhC,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QAC5F,IAAI,SAAS,KAAK,KAAK,EAAE;YACvB,MAAM,WAAW,GAAG,sBAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;YAC3D,IAAI,aAAa,EAAE;gBACjB,aAAa,CAAC,WAAW,CAAC,CAAC;aAC5B;SACF;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE3B,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QAC9F,IAAI,SAAS,KAAK,KAAK,EAAE;YACvB,MAAM,WAAW,GAAG,sBAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;YAC3D,IAAI,aAAa,EAAE;gBACjB,aAAa,CAAC,WAAW,CAAC,CAAC;aAC5B;SACF;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE3B,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyB,EAAE,YAAoB,EAAE,EAAE;QAC7F,IAAI,SAAS,KAAK,KAAK,EAAE;YACvB,MAAM,WAAW,GAAG,sBAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;YAC3D,IAAI,aAAa,EAAE;gBACjB,aAAa,CAAC,WAAW,CAAC,CAAC;aAC5B;SACF;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IAE3B,OAAO,CACL,4CAAiB,8BAA8B,EAAC,SAAS,EAAC,8BAA8B;QACtF,6BAAK,SAAS,EAAC,oCAAoC;YACjD,6BAAK,SAAS,EAAC,mCAAmC;gBAChD,oBAAC,mCAAgB,IAAC,GAAG,EAAE,UAAU,EAAE,kBAAkB,EAAE,sBAAsB,GAAI,CAC7E;YACN,6BAAK,SAAS,EAAC,4BAA4B;gBACzC,oBAAC,qBAAS,IAAC,GAAG,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,KAAK,GAAI,CAC7E,CACF;QACL,CAAC,cAAc,KAAK,KAAK,CAAC;YACzB,4CAAiB,oCAAoC,EAAC,SAAS,EAAC,oCAAoC;gBAClG,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,wBAAW,mBAAa,wCAAwC,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CAC7H;gBACN,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,wBAAW,mBAAa,0CAA0C,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,iBAAiB,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CACjI;gBACN,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,wBAAW,mBAAa,yCAAyC,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CAC/H,CACF;QACP,CAAC,cAAc,KAAK,KAAK,CAAC;YACzB,4CAAiB,oCAAoC,EAAC,SAAS,EAAC,oCAAoC;gBAClG,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,wBAAW,mBAAa,wCAAwC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,oBAAoB,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CACzJ;gBACN,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,wBAAW,mBAAa,+CAA+C,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,2BAA2B,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CACvK;gBACN,6BAAK,SAAS,EAAC,4CAA4C;oBACzD,8BAAM,SAAS,EAAC,6BAA6B,QAAS;oBACtD,oBAAC,wBAAW,mBAAa,8CAA8C,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,QAAQ,EAAE,0BAA0B,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CACrK,CACF;QAGN,YAAY,IAAI,YAAY,CAAC,MAAM;YACnC,6BAAK,SAAS,EAAC,sCAAsC,IAClD,YAAY,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,oBAAC,oBAAW,IAAC,SAAS,EAAC,qCAAqC,EAAC,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,qBAAqB,GAAI,CAAC,CACjL,CAEJ,CACP,CAAC;AACJ,CAAC;AAtID,4CAsIC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport * as React from \"react\";\r\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\r\nimport { ColorSwatch } from \"./Swatch\";\r\nimport { HueSlider } from \"./HueSlider\";\r\nimport { SaturationPicker } from \"./SaturationPicker\";\r\nimport \"./ColorPickerPanel.scss\";\r\nimport { NumberInput } from \"@itwin/core-react\";\r\n\r\n/** Properties for the [[ColorPickerPanel]] React component\r\n * @public @deprecated use `ColorPicker` for itwinui-react\r\n */\r\nexport interface ColorPickerPanelProps {\r\n activeColor: ColorDef;\r\n onColorChange: (selectedColor: ColorDef) => void;\r\n colorPresets?: ColorDef[];\r\n /** If set show either HSL or RGB input values. If undefined no input value is shown */\r\n colorInputType?: \"HSL\" | \"RGB\";\r\n}\r\n\r\n/**\r\n * Color Picker Dialog to use as modal dialog.\r\n * @public @deprecated use `ColorPicker` for itwinui-react\r\n */\r\n// istanbul ignore next\r\nexport function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps) { // eslint-disable-line deprecation/deprecation\r\n const handlePresetColorPick = React.useCallback((newColor: ColorDef, e: React.MouseEvent<Element, MouseEvent>) => {\r\n e.preventDefault();\r\n if (onColorChange) {\r\n onColorChange(newColor);\r\n }\r\n }, [onColorChange]);\r\n\r\n const handleHueChange = React.useCallback((newHsvColor: HSVColor) => {\r\n // for a ColorDef to be created from hsv s can't be 0\r\n if (newHsvColor.s === 0) {\r\n newHsvColor = newHsvColor.clone(undefined, 0.5);\r\n }\r\n\r\n const newColorDef = newHsvColor.toColorDef();\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }, [onColorChange]);\r\n\r\n const handleSaturationChange = React.useCallback((newHsvColor: HSVColor) => {\r\n const newColorDef = newHsvColor.toColorDef();\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }, [onColorChange]);\r\n\r\n const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);\r\n const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);\r\n const color = React.useMemo(() => activeColor.colors, [activeColor]);\r\n\r\n const handleLightnessValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n const newHsl = currentHsl.clone(undefined, undefined, (value ?? 0) / 100);\r\n\r\n if (onColorChange) {\r\n const newColorDef = newHsl.toColorDef();\r\n onColorChange(newColorDef);\r\n }\r\n }, [currentHsl, onColorChange]);\r\n\r\n const handleHueValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n const newHsl = currentHsl.clone((value ?? 0) / 360, undefined, undefined);\r\n\r\n if (onColorChange) {\r\n const newColorDef = newHsl.toColorDef();\r\n onColorChange(newColorDef);\r\n }\r\n }, [currentHsl, onColorChange]);\r\n\r\n const handleSaturationValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n const newHsl = currentHsl.clone(undefined, (value ?? 0) / 100, undefined);\r\n\r\n if (onColorChange) {\r\n const newColorDef = newHsl.toColorDef();\r\n onColorChange(newColorDef);\r\n }\r\n }, [currentHsl, onColorChange]);\r\n\r\n const handleRedChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n if (undefined !== value) {\r\n const newColorDef = ColorDef.from(value, color.g, color.b);\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }\r\n }, [color, onColorChange]);\r\n\r\n const handleGreenChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n if (undefined !== value) {\r\n const newColorDef = ColorDef.from(color.r, value, color.b);\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }\r\n }, [color, onColorChange]);\r\n\r\n const handleBlueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n if (undefined !== value) {\r\n const newColorDef = ColorDef.from(color.r, color.g, value);\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }\r\n }, [color, onColorChange]);\r\n\r\n return (\r\n <div data-testid=\"components-colorpicker-panel\" className=\"components-colorpicker-panel\">\r\n <div className=\"components-colorpicker-panel-color\">\r\n <div className=\"components-colorpicker-saturation\">\r\n <SaturationPicker hsv={currentHsv} onSaturationChange={handleSaturationChange} />\r\n </div>\r\n <div className=\"components-colorpicker-hue\">\r\n <HueSlider hsv={currentHsv} onHueChange={handleHueChange} isHorizontal={false} />\r\n </div>\r\n </div>\r\n {(colorInputType === \"RGB\") &&\r\n <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">R</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-red\" value={color.r} onChange={handleRedChange} min={0} max={255} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">G</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-green\" value={color.g} onChange={handleGreenChange} min={0} max={255} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">B</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-blue\" value={color.b} onChange={handleBlueChange} min={0} max={255} />\r\n </div>\r\n </div>}\r\n {(colorInputType === \"HSL\") &&\r\n <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">H</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-hue\" value={Math.round(currentHsl.h * 360)} onChange={handleHueValueChange} min={0} max={360} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">S</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-saturation\" value={Math.round(currentHsl.s * 100)} onChange={handleSaturationValueChange} min={0} max={100} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">L</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-lightness\" value={Math.round(currentHsl.l * 100)} onChange={handleLightnessValueChange} min={0} max={100} />\r\n </div>\r\n </div>}\r\n\r\n {\r\n colorPresets && colorPresets.length &&\r\n <div className=\"components-colorpicker-panel-presets\">\r\n {colorPresets.map((preset, index) => <ColorSwatch className=\"components-colorpicker-panel-swatch\" key={index} colorDef={preset} round={false} onColorPick={handlePresetColorPick} />)}\r\n </div>\r\n }\r\n </div>\r\n );\r\n}\r\n"]}
|
|
@@ -12,7 +12,8 @@ import "./ColorPickerPopup.scss";
|
|
|
12
12
|
export interface ColorPickerPopupProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
|
|
13
13
|
/** Current color */
|
|
14
14
|
initialColor: ColorDef;
|
|
15
|
-
/** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets.
|
|
15
|
+
/** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets.
|
|
16
|
+
* Displayed in rows of 9 items */
|
|
16
17
|
colorDefs?: ColorDef[];
|
|
17
18
|
/** Function to call when the color value is changed */
|
|
18
19
|
onColorChange?: ((newColor: ColorDef) => void) | undefined;
|
|
@@ -32,8 +33,8 @@ export interface ColorPickerPopupProps extends React.ButtonHTMLAttributes<HTMLBu
|
|
|
32
33
|
captureClicks?: boolean;
|
|
33
34
|
/** If true, don't show close button at top */
|
|
34
35
|
hideCloseButton?: boolean;
|
|
35
|
-
/** If set show
|
|
36
|
-
colorInputType?: "
|
|
36
|
+
/** If set show input values */
|
|
37
|
+
colorInputType?: "hsl" | "rgb" | "hex";
|
|
37
38
|
}
|
|
38
39
|
/**
|
|
39
40
|
* ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerPopup.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAA+B,MAAM,mBAAmB,CAAC;AAG7E,OAAO,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"ColorPickerPopup.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAA+B,MAAM,mBAAmB,CAAC;AAG7E,OAAO,yBAAyB,CAAC;AAIjC;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IACvG,oBAAoB;IACpB,YAAY,EAAE,QAAQ,CAAC;IACvB;uCACmC;IACnC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACvD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,gEAAgE;IAChE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+BAA+B;IAC/B,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACxC;AAiID;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAiC,CAAC"}
|
|
@@ -36,9 +36,11 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
36
36
|
const core_common_1 = require("@itwin/core-common");
|
|
37
37
|
const appui_abstract_1 = require("@itwin/appui-abstract");
|
|
38
38
|
const core_react_1 = require("@itwin/core-react");
|
|
39
|
-
|
|
39
|
+
// import { ColorPickerPanel } from "./ColorPickerPanel";
|
|
40
|
+
const itwinui_react_1 = require("@itwin/itwinui-react");
|
|
40
41
|
require("./ColorPickerPopup.scss");
|
|
41
42
|
const getCSSColorFromDef_1 = require("./getCSSColorFromDef");
|
|
43
|
+
const UiIModelComponents_1 = require("../UiIModelComponents");
|
|
42
44
|
// Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted
|
|
43
45
|
const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPickerPopup(props, ref) {
|
|
44
46
|
const target = React.useRef();
|
|
@@ -53,22 +55,24 @@ const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPick
|
|
|
53
55
|
}
|
|
54
56
|
}, [props.initialColor]);
|
|
55
57
|
const defaultColors = React.useRef([
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
58
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.red),
|
|
59
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.orange),
|
|
60
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.yellow),
|
|
61
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.green),
|
|
62
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.blue),
|
|
63
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.mediumBlue),
|
|
64
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.indigo),
|
|
65
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.violet),
|
|
66
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.black),
|
|
67
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.white),
|
|
68
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.cyan),
|
|
69
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.fuchsia),
|
|
70
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.tan),
|
|
71
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.gray),
|
|
72
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.brown),
|
|
73
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.purple),
|
|
74
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.olive),
|
|
75
|
+
itwinui_react_1.ColorValue.fromTbgr(core_common_1.ColorByName.darkGreen),
|
|
72
76
|
]);
|
|
73
77
|
// istanbul ignore next
|
|
74
78
|
const closePopup = React.useCallback(() => {
|
|
@@ -78,7 +82,8 @@ const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPick
|
|
|
78
82
|
const togglePopup = React.useCallback(() => {
|
|
79
83
|
setShowPopup(!showPopup);
|
|
80
84
|
}, [showPopup]);
|
|
81
|
-
const handleColorChanged = React.useCallback((
|
|
85
|
+
const handleColorChanged = React.useCallback((newColorValue) => {
|
|
86
|
+
const newColor = core_common_1.ColorDef.fromTbgr(newColorValue.toTbgr());
|
|
82
87
|
// istanbul ignore else
|
|
83
88
|
if (!newColor.equals(colorDef)) {
|
|
84
89
|
setColorDef(newColor);
|
|
@@ -95,20 +100,34 @@ const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPick
|
|
|
95
100
|
if (props.captureClicks)
|
|
96
101
|
event.stopPropagation();
|
|
97
102
|
};
|
|
98
|
-
const colorOptions =
|
|
103
|
+
const colorOptions = React.useMemo(() => {
|
|
104
|
+
if (props.colorDefs && props.colorDefs.length) {
|
|
105
|
+
return props.colorDefs.map((def) => itwinui_react_1.ColorValue.fromTbgr(def.tbgr));
|
|
106
|
+
}
|
|
107
|
+
if (props.colorDefs && 0 === props.colorDefs.length)
|
|
108
|
+
return undefined;
|
|
109
|
+
return defaultColors.current;
|
|
110
|
+
}, [props.colorDefs]);
|
|
99
111
|
const popupPosition = undefined !== props.popupPosition ? props.popupPosition : appui_abstract_1.RelativePosition.BottomLeft;
|
|
112
|
+
const [closeLabel] = React.useState(() => UiIModelComponents_1.UiIModelComponents.translate("color.close"));
|
|
113
|
+
const [togglePopupLabel] = React.useState(() => UiIModelComponents_1.UiIModelComponents.translate("color.toggleColorPopup"));
|
|
100
114
|
return (
|
|
101
115
|
/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
|
|
102
116
|
React.createElement("div", { onClick: clickHandler },
|
|
103
|
-
React.createElement("button", { "data-testid": "components-colorpicker-popup-button", onClick: togglePopup, className: buttonClassNames, style: buttonStyle, disabled: props.disabled, ref: refs },
|
|
117
|
+
React.createElement("button", { "data-testid": "components-colorpicker-popup-button", onClick: togglePopup, className: buttonClassNames, style: buttonStyle, disabled: props.disabled, ref: refs, title: togglePopupLabel },
|
|
104
118
|
React.createElement("div", { className: "components-colorpicker-button-container" },
|
|
105
119
|
React.createElement("div", { className: "components-colorpicker-button-color-swatch", style: swatchStyle }),
|
|
106
120
|
props.showCaret && React.createElement(core_react_1.WebFontIcon, { className: "components-caret", iconName: showPopup ? "icon-caret-up" : "icon-caret-down", iconSize: "x-small" }))),
|
|
107
121
|
React.createElement(core_react_1.Popup, { className: "components-colorpicker-popup", isOpen: showPopup, position: popupPosition, onClose: closePopup, target: target.current, closeOnNestedPopupOutsideClick: true },
|
|
108
122
|
React.createElement("div", { className: "components-colorpicker-popup-panel-padding" },
|
|
109
123
|
!props.hideCloseButton &&
|
|
110
|
-
React.createElement("button", { className: "core-focus-trap-ignore-initial core-dialog-close icon icon-close", "data-testid": "core-dialog-close", onClick: togglePopup }),
|
|
111
|
-
React.createElement(
|
|
124
|
+
React.createElement("button", { title: closeLabel, className: "core-focus-trap-ignore-initial core-dialog-close icon icon-close", "data-testid": "core-dialog-close", onClick: togglePopup }),
|
|
125
|
+
React.createElement(itwinui_react_1.ColorPicker, { selectedColor: itwinui_react_1.ColorValue.fromTbgr(colorDef.tbgr), onChangeComplete: handleColorChanged },
|
|
126
|
+
React.createElement(itwinui_react_1.ColorBuilder, null),
|
|
127
|
+
props.colorInputType &&
|
|
128
|
+
React.createElement(itwinui_react_1.ColorInputPanel, { defaultColorFormat: props.colorInputType }),
|
|
129
|
+
colorOptions &&
|
|
130
|
+
React.createElement(itwinui_react_1.ColorPalette, { colors: colorOptions }))))));
|
|
112
131
|
});
|
|
113
132
|
/**
|
|
114
133
|
* ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerPopup.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,4BAA4B;AAE5B,6CAA+B;AAC/B,4DAAoC;AACpC,oDAA2D;AAC3D,0DAAyD;AACzD,kDAA6E;AAC7E,yDAAsD;AAEtD,mCAAiC;AACjC,6DAA0D;AAgC1D,qHAAqH;AAErH,MAAM,0BAA0B,GAAG,KAAK,CAAC,UAAU,CACjD,SAAS,0BAA0B,CAAC,KAAK,EAAE,GAAG;IAC5C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,EAAqB,CAAC;IACjD,MAAM,IAAI,GAAG,IAAA,oBAAO,EAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAE,uGAAuG;IAC3I,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IACnE,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;IAEzD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK,CAAC,YAAY,KAAK,eAAe,CAAC,OAAO,EAAE;YAClD,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC,YAAY,CAAC;YAC7C,WAAW,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;SACjC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;IAEzB,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAChC;QACE,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,GAAG,CAAC;QAChC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,MAAM,CAAC;QACnC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,MAAM,CAAC;QACnC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,KAAK,CAAC;QAClC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,IAAI,CAAC;QACjC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,MAAM,CAAC;QACnC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,MAAM,CAAC;QACnC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,KAAK,CAAC;QAClC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,KAAK,CAAC;QAClC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,IAAI,CAAC;QACjC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,OAAO,CAAC;QACpC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,GAAG,CAAC;QAChC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,IAAI,CAAC;QACjC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,KAAK,CAAC;QAClC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,MAAM,CAAC;QACnC,sBAAQ,CAAC,MAAM,CAAC,yBAAW,CAAC,KAAK,CAAC;KACnC,CAAC,CAAC;IAEL,uBAAuB;IACvB,MAAM,UAAU,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACxC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACzC,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAEtB,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACzC,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAkB,EAAE,EAAE;QAClE,uBAAuB;QACvB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE;YAC9B,WAAW,CAAC,QAAQ,CAAC,CAAC;YAEtB,uBAAuB;YACvB,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;SACtD;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAEtB,MAAM,UAAU,GAAG,IAAA,uCAAkB,EAAC,QAAQ,CAAC,CAAC;IAEhD,MAAM,WAAW,GAAG,EAAE,GAAG,KAAK,CAAC,KAAK,EAAyB,CAAC;IAC9D,MAAM,WAAW,GAAG,EAAE,eAAe,EAAE,UAAU,EAAyB,CAAC;IAC3E,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EAAC,qCAAqC,EACvE,KAAK,CAAC,QAAQ,IAAI,UAAU,EAC5B,KAAK,CAAC,SAAS,CAChB,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAAuB,EAAE,EAAE;QAC/C,uBAAuB;QACvB,IAAI,KAAK,CAAC,aAAa;YACrB,KAAK,CAAC,eAAe,EAAE,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC;IACzG,MAAM,aAAa,GAAG,SAAS,KAAK,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,iCAAgB,CAAC,UAAU,CAAC;IAC5G,OAAO;IACL,6GAA6G;IAC7G,6BAAK,OAAO,EAAE,YAAY;QACxB,+CAAoB,qCAAqC,EAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI;YAClK,6BAAK,SAAS,EAAC,yCAAyC;gBACtD,6BAAK,SAAS,EAAC,4CAA4C,EAAC,KAAK,EAAE,WAAW,GAAI;gBACjF,KAAK,CAAC,SAAS,IAAI,oBAAC,wBAAW,IAAC,SAAS,EAAC,kBAAkB,EAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,QAAQ,EAAC,SAAS,GAAG,CAC1I,CACC;QACT,oBAAC,kBAAK,IACJ,SAAS,EAAC,8BAA8B,EACxC,MAAM,EAAE,SAAS,EACjB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,UAAU,EACnB,MAAM,EAAE,MAAM,CAAC,OAAO,EACtB,8BAA8B;YAE9B,6BAAK,SAAS,EAAC,4CAA4C;gBACxD,CAAC,KAAK,CAAC,eAAe;oBACrB,gCACE,SAAS,EAAE,kEAAkE,iBACjE,mBAAmB,EAC/B,OAAO,EAAE,WAAW,GACpB;gBACJ,oBAAC,mCAAgB,IAAC,cAAc,EAAE,KAAK,CAAC,cAAc,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,kBAAkB,GAAI,CAC5I,CACA,CACJ,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF;;;;GAIG;AACU,QAAA,gBAAgB,GAAyD,0BAA0B,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, Popup, useRefs, WebFontIcon } from \"@itwin/core-react\";\r\nimport { ColorPickerPanel } from \"./ColorPickerPanel\";\r\n\r\nimport \"./ColorPickerPopup.scss\";\r\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\r\n\r\n/** Properties for the [[ColorPickerPopup]] React component\r\n * @public\r\n */\r\nexport interface ColorPickerPopupProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n /** Current color */\r\n initialColor: ColorDef;\r\n /** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets. */\r\n colorDefs?: ColorDef[];\r\n /** Function to call when the color value is changed */\r\n onColorChange?: ((newColor: ColorDef) => void) | undefined;\r\n /** Function to call when the popup is closed */\r\n onClose?: ((colorValue: ColorDef) => void) | undefined;\r\n /** Disabled or not */\r\n disabled?: boolean;\r\n /** Readonly or not, color displayed on button but button will not trigger pop-up */\r\n readonly?: boolean;\r\n /** popup position. If not set RelativePosition.BottomLeft is used */\r\n popupPosition?: RelativePosition;\r\n /** Provides ability to return reference to HTMLButtonElement */\r\n ref?: React.Ref<HTMLButtonElement>;\r\n /** If true show up/down caret next to color */\r\n showCaret?: boolean;\r\n /** If true, don't propagate clicks out of the ColorPicker */\r\n captureClicks?: boolean;\r\n /** If true, don't show close button at top */\r\n hideCloseButton?: boolean;\r\n /** If set show either HSL or RGB input values */\r\n colorInputType?: \"HSL\" | \"RGB\";\r\n}\r\n\r\n// Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted\r\n\r\nconst ForwardRefColorPickerPopup = React.forwardRef<HTMLButtonElement, ColorPickerPopupProps>(\r\n function ForwardRefColorPickerPopup(props, ref) {\r\n const target = React.useRef<HTMLButtonElement>();\r\n const refs = useRefs(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n const [showPopup, setShowPopup] = React.useState(false);\r\n const [colorDef, setColorDef] = React.useState(props.initialColor);\r\n const initialColorRef = React.useRef(props.initialColor);\r\n\r\n React.useEffect(() => {\r\n if (props.initialColor !== initialColorRef.current) {\r\n initialColorRef.current = props.initialColor;\r\n setColorDef(props.initialColor);\r\n }\r\n }, [props.initialColor]);\r\n\r\n const defaultColors = React.useRef(\r\n [\r\n ColorDef.create(ColorByName.red),\r\n ColorDef.create(ColorByName.orange),\r\n ColorDef.create(ColorByName.yellow),\r\n ColorDef.create(ColorByName.green),\r\n ColorDef.create(ColorByName.blue),\r\n ColorDef.create(ColorByName.indigo),\r\n ColorDef.create(ColorByName.violet),\r\n ColorDef.create(ColorByName.black),\r\n ColorDef.create(ColorByName.white),\r\n ColorDef.create(ColorByName.cyan),\r\n ColorDef.create(ColorByName.fuchsia),\r\n ColorDef.create(ColorByName.tan),\r\n ColorDef.create(ColorByName.gray),\r\n ColorDef.create(ColorByName.brown),\r\n ColorDef.create(ColorByName.purple),\r\n ColorDef.create(ColorByName.olive),\r\n ]);\r\n\r\n // istanbul ignore next\r\n const closePopup = React.useCallback(() => {\r\n props.onClose && props.onClose(colorDef);\r\n setShowPopup(false);\r\n }, [colorDef, props]);\r\n\r\n const togglePopup = React.useCallback(() => {\r\n setShowPopup(!showPopup);\r\n }, [showPopup]);\r\n\r\n const handleColorChanged = React.useCallback((newColor: ColorDef) => {\r\n // istanbul ignore else\r\n if (!newColor.equals(colorDef)) {\r\n setColorDef(newColor);\r\n\r\n // istanbul ignore else\r\n props.onColorChange && props.onColorChange(newColor);\r\n }\r\n }, [colorDef, props]);\r\n\r\n const rgbaString = getCSSColorFromDef(colorDef);\r\n\r\n const buttonStyle = { ...props.style } as React.CSSProperties;\r\n const swatchStyle = { backgroundColor: rgbaString } as React.CSSProperties;\r\n const buttonClassNames = classnames(\"components-colorpicker-popup-button\",\r\n props.readonly && \"readonly\",\r\n props.className,\r\n );\r\n\r\n const clickHandler = (event: React.MouseEvent) => {\r\n // istanbul ignore else\r\n if (props.captureClicks)\r\n event.stopPropagation();\r\n };\r\n\r\n const colorOptions = props.colorDefs && props.colorDefs.length ? props.colorDefs : defaultColors.current;\r\n const popupPosition = undefined !== props.popupPosition ? props.popupPosition : RelativePosition.BottomLeft;\r\n return (\r\n /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\r\n <div onClick={clickHandler}>\r\n <button data-testid=\"components-colorpicker-popup-button\" onClick={togglePopup} className={buttonClassNames} style={buttonStyle} disabled={props.disabled} ref={refs} >\r\n <div className=\"components-colorpicker-button-container\">\r\n <div className=\"components-colorpicker-button-color-swatch\" style={swatchStyle} />\r\n {props.showCaret && <WebFontIcon className=\"components-caret\" iconName={showPopup ? \"icon-caret-up\" : \"icon-caret-down\"} iconSize=\"x-small\" />}\r\n </div>\r\n </button>\r\n <Popup\r\n className=\"components-colorpicker-popup\"\r\n isOpen={showPopup}\r\n position={popupPosition}\r\n onClose={closePopup}\r\n target={target.current}\r\n closeOnNestedPopupOutsideClick\r\n >\r\n <div className=\"components-colorpicker-popup-panel-padding\">\r\n {!props.hideCloseButton &&\r\n <button\r\n className={\"core-focus-trap-ignore-initial core-dialog-close icon icon-close\"}\r\n data-testid=\"core-dialog-close\"\r\n onClick={togglePopup}\r\n />}\r\n <ColorPickerPanel colorInputType={props.colorInputType} activeColor={colorDef} colorPresets={colorOptions} onColorChange={handleColorChanged} />\r\n </div>\r\n </Popup>\r\n </div>\r\n );\r\n }\r\n);\r\n\r\n/**\r\n * ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.\r\n * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.\r\n * @public\r\n */\r\nexport const ColorPickerPopup: (props: ColorPickerPopupProps) => JSX.Element | null = ForwardRefColorPickerPopup;\r\n"]}
|
|
1
|
+
{"version":3,"file":"ColorPickerPopup.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, Popup, useRefs, WebFontIcon } from \"@itwin/core-react\";\r\n// import { ColorPickerPanel } from \"./ColorPickerPanel\";\r\nimport { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue } from \"@itwin/itwinui-react\";\r\nimport \"./ColorPickerPopup.scss\";\r\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\n\r\n/** Properties for the [[ColorPickerPopup]] React component\r\n * @public\r\n */\r\nexport interface ColorPickerPopupProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n /** Current color */\r\n initialColor: ColorDef;\r\n /** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets.\r\n * Displayed in rows of 9 items */\r\n colorDefs?: ColorDef[];\r\n /** Function to call when the color value is changed */\r\n onColorChange?: ((newColor: ColorDef) => void) | undefined;\r\n /** Function to call when the popup is closed */\r\n onClose?: ((colorValue: ColorDef) => void) | undefined;\r\n /** Disabled or not */\r\n disabled?: boolean;\r\n /** Readonly or not, color displayed on button but button will not trigger pop-up */\r\n readonly?: boolean;\r\n /** popup position. If not set RelativePosition.BottomLeft is used */\r\n popupPosition?: RelativePosition;\r\n /** Provides ability to return reference to HTMLButtonElement */\r\n ref?: React.Ref<HTMLButtonElement>;\r\n /** If true show up/down caret next to color */\r\n showCaret?: boolean;\r\n /** If true, don't propagate clicks out of the ColorPicker */\r\n captureClicks?: boolean;\r\n /** If true, don't show close button at top */\r\n hideCloseButton?: boolean;\r\n /** If set show input values */\r\n colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\r\n}\r\n\r\n// Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted\r\n\r\nconst ForwardRefColorPickerPopup = React.forwardRef<HTMLButtonElement, ColorPickerPopupProps>(\r\n function ForwardRefColorPickerPopup(props, ref) {\r\n const target = React.useRef<HTMLButtonElement>();\r\n const refs = useRefs(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n const [showPopup, setShowPopup] = React.useState(false);\r\n const [colorDef, setColorDef] = React.useState(props.initialColor);\r\n const initialColorRef = React.useRef(props.initialColor);\r\n\r\n React.useEffect(() => {\r\n if (props.initialColor !== initialColorRef.current) {\r\n initialColorRef.current = props.initialColor;\r\n setColorDef(props.initialColor);\r\n }\r\n }, [props.initialColor]);\r\n\r\n const defaultColors = React.useRef(\r\n [\r\n ColorValue.fromTbgr(ColorByName.red),\r\n ColorValue.fromTbgr(ColorByName.orange),\r\n ColorValue.fromTbgr(ColorByName.yellow),\r\n ColorValue.fromTbgr(ColorByName.green),\r\n ColorValue.fromTbgr(ColorByName.blue),\r\n ColorValue.fromTbgr(ColorByName.mediumBlue),\r\n ColorValue.fromTbgr(ColorByName.indigo),\r\n ColorValue.fromTbgr(ColorByName.violet),\r\n ColorValue.fromTbgr(ColorByName.black),\r\n ColorValue.fromTbgr(ColorByName.white),\r\n ColorValue.fromTbgr(ColorByName.cyan),\r\n ColorValue.fromTbgr(ColorByName.fuchsia),\r\n ColorValue.fromTbgr(ColorByName.tan),\r\n ColorValue.fromTbgr(ColorByName.gray),\r\n ColorValue.fromTbgr(ColorByName.brown),\r\n ColorValue.fromTbgr(ColorByName.purple),\r\n ColorValue.fromTbgr(ColorByName.olive),\r\n ColorValue.fromTbgr(ColorByName.darkGreen),\r\n ]);\r\n\r\n // istanbul ignore next\r\n const closePopup = React.useCallback(() => {\r\n props.onClose && props.onClose(colorDef);\r\n setShowPopup(false);\r\n }, [colorDef, props]);\r\n\r\n const togglePopup = React.useCallback(() => {\r\n setShowPopup(!showPopup);\r\n }, [showPopup]);\r\n\r\n const handleColorChanged = React.useCallback((newColorValue: ColorValue) => {\r\n const newColor = ColorDef.fromTbgr(newColorValue.toTbgr());\r\n // istanbul ignore else\r\n if (!newColor.equals(colorDef)) {\r\n setColorDef(newColor);\r\n\r\n // istanbul ignore else\r\n props.onColorChange && props.onColorChange(newColor);\r\n }\r\n }, [colorDef, props]);\r\n\r\n const rgbaString = getCSSColorFromDef(colorDef);\r\n\r\n const buttonStyle = { ...props.style } as React.CSSProperties;\r\n const swatchStyle = { backgroundColor: rgbaString } as React.CSSProperties;\r\n const buttonClassNames = classnames(\"components-colorpicker-popup-button\",\r\n props.readonly && \"readonly\",\r\n props.className,\r\n );\r\n\r\n const clickHandler = (event: React.MouseEvent) => {\r\n // istanbul ignore else\r\n if (props.captureClicks)\r\n event.stopPropagation();\r\n };\r\n\r\n const colorOptions = React.useMemo(() => {\r\n if (props.colorDefs && props.colorDefs.length) {\r\n return props.colorDefs.map((def) => ColorValue.fromTbgr(def.tbgr));\r\n }\r\n if (props.colorDefs && 0 === props.colorDefs.length)\r\n return undefined;\r\n return defaultColors.current;\r\n }, [props.colorDefs]);\r\n const popupPosition = undefined !== props.popupPosition ? props.popupPosition : RelativePosition.BottomLeft;\r\n\r\n const [closeLabel] = React.useState(() => UiIModelComponents.translate(\"color.close\"));\r\n const [togglePopupLabel] = React.useState(() => UiIModelComponents.translate(\"color.toggleColorPopup\"));\r\n\r\n return (\r\n /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\r\n <div onClick={clickHandler}>\r\n <button data-testid=\"components-colorpicker-popup-button\" onClick={togglePopup} className={buttonClassNames} style={buttonStyle}\r\n disabled={props.disabled} ref={refs} title={togglePopupLabel} >\r\n <div className=\"components-colorpicker-button-container\">\r\n <div className=\"components-colorpicker-button-color-swatch\" style={swatchStyle} />\r\n {props.showCaret && <WebFontIcon className=\"components-caret\" iconName={showPopup ? \"icon-caret-up\" : \"icon-caret-down\"} iconSize=\"x-small\" />}\r\n </div>\r\n </button>\r\n <Popup\r\n className=\"components-colorpicker-popup\"\r\n isOpen={showPopup}\r\n position={popupPosition}\r\n onClose={closePopup}\r\n target={target.current}\r\n closeOnNestedPopupOutsideClick\r\n >\r\n <div className=\"components-colorpicker-popup-panel-padding\">\r\n {!props.hideCloseButton &&\r\n <button title={closeLabel}\r\n className={\"core-focus-trap-ignore-initial core-dialog-close icon icon-close\"}\r\n data-testid=\"core-dialog-close\"\r\n onClick={togglePopup}\r\n />}\r\n <ColorPicker selectedColor={ColorValue.fromTbgr(colorDef.tbgr)} onChangeComplete={handleColorChanged} >\r\n <ColorBuilder />\r\n {props.colorInputType &&\r\n <ColorInputPanel defaultColorFormat={props.colorInputType} />}\r\n {colorOptions &&\r\n <ColorPalette colors={colorOptions} />}\r\n </ColorPicker>\r\n </div>\r\n </Popup>\r\n </div>\r\n );\r\n }\r\n);\r\n\r\n/**\r\n * ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.\r\n * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.\r\n * @public\r\n */\r\nexport const ColorPickerPopup: (props: ColorPickerPopupProps) => JSX.Element | null = ForwardRefColorPickerPopup;\r\n"]}
|
|
@@ -49,5 +49,15 @@ button.components-colorpicker-popup-button {
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
.components-colorpicker-popup-panel-padding {
|
|
52
|
-
padding: 6px;
|
|
53
|
-
|
|
52
|
+
padding: 3px 6px 6px 6px;
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-direction: column;
|
|
55
|
+
gap: 4px;
|
|
56
|
+
|
|
57
|
+
button.core-dialog-close {
|
|
58
|
+
margin-left: auto;
|
|
59
|
+
background: transparent;
|
|
60
|
+
border: none;
|
|
61
|
+
color: var(--buic-foreground-body);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
@@ -11,9 +11,10 @@ export interface ColorPickerDialogProps {
|
|
|
11
11
|
color: ColorDef;
|
|
12
12
|
onOkResult: (selectedColor: ColorDef) => void;
|
|
13
13
|
onCancelResult: () => void;
|
|
14
|
+
/** displayed in rows of 9 items */
|
|
14
15
|
colorPresets?: ColorDef[];
|
|
15
|
-
/** If set show either HSL or
|
|
16
|
-
colorInputType?: "
|
|
16
|
+
/** If set show either HSL, RGB, or HEX input values. If undefined no input value is shown */
|
|
17
|
+
colorInputType?: "hsl" | "rgb" | "hex";
|
|
17
18
|
}
|
|
18
19
|
/**
|
|
19
20
|
* Color Picker Dialog to use as modal dialog.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerDialog.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAOH,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAG9C;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,QAAQ,CAAC;IAChB,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,
|
|
1
|
+
{"version":3,"file":"ColorPickerDialog.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAOH,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAG9C;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,QAAQ,CAAC;IAChB,UAAU,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,mCAAmC;IACnC,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,6FAA6F;IAC7F,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACxC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,sBAAsB,eAsDzI"}
|
|
@@ -9,7 +9,8 @@
|
|
|
9
9
|
import * as React from "react";
|
|
10
10
|
import { DialogButtonType } from "@itwin/appui-abstract";
|
|
11
11
|
import { Dialog } from "@itwin/core-react";
|
|
12
|
-
import {
|
|
12
|
+
import { ColorDef } from "@itwin/core-common";
|
|
13
|
+
import { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue } from "@itwin/itwinui-react";
|
|
13
14
|
/**
|
|
14
15
|
* Color Picker Dialog to use as modal dialog.
|
|
15
16
|
* @beta
|
|
@@ -25,15 +26,27 @@ export function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResu
|
|
|
25
26
|
if (onCancelResult)
|
|
26
27
|
onCancelResult();
|
|
27
28
|
}, [onCancelResult]);
|
|
28
|
-
const
|
|
29
|
+
const handleColorChanged = React.useCallback((newColorValue) => {
|
|
30
|
+
const newColorDef = ColorDef.fromTbgr(newColorValue.toTbgr());
|
|
29
31
|
setActiveColor(newColorDef);
|
|
30
32
|
}, []);
|
|
31
33
|
const buttonCluster = React.useMemo(() => [
|
|
32
34
|
{ type: DialogButtonType.OK, onClick: handleOk },
|
|
33
35
|
{ type: DialogButtonType.Cancel, onClick: handleCancel },
|
|
34
36
|
], [handleCancel, handleOk]);
|
|
37
|
+
const colorOptions = React.useMemo(() => {
|
|
38
|
+
if (colorPresets) {
|
|
39
|
+
return colorPresets.map((def) => ColorValue.fromTbgr(def.tbgr));
|
|
40
|
+
}
|
|
41
|
+
return undefined;
|
|
42
|
+
}, [colorPresets]);
|
|
35
43
|
return (React.createElement("div", { ref: dialogContainer },
|
|
36
|
-
React.createElement(Dialog, { title: dialogTitle, opened: true, resizable:
|
|
37
|
-
React.createElement(
|
|
44
|
+
React.createElement(Dialog, { title: dialogTitle, opened: true, resizable: false, movable: true, modal: true, buttonCluster: buttonCluster, onClose: handleCancel, onEscape: handleCancel, minHeight: 490, maxWidth: 320 },
|
|
45
|
+
React.createElement(ColorPicker, { selectedColor: ColorValue.fromTbgr(activeColor.tbgr), onChangeComplete: handleColorChanged },
|
|
46
|
+
React.createElement(ColorBuilder, null),
|
|
47
|
+
colorInputType &&
|
|
48
|
+
React.createElement(ColorInputPanel, { defaultColorFormat: colorInputType }),
|
|
49
|
+
colorOptions &&
|
|
50
|
+
React.createElement(ColorPalette, { colors: colorOptions })))));
|
|
38
51
|
}
|
|
39
52
|
//# sourceMappingURL=ColorPickerDialog.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerDialog.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,4BAA4B;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"ColorPickerDialog.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerDialog.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,4BAA4B;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAgB5G;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAA0B;IACxI,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE3D,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QACtC,UAAU,CAAC,WAAW,CAAC,CAAC;IAC1B,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAC9B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,uBAAuB;QACvB,IAAI,cAAc;YAChB,cAAc,EAAE,CAAC;IACrB,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,aAAyB,EAAE,EAAE;QACzE,MAAM,WAAW,GAAG,QAAQ,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9D,cAAc,CAAC,WAAW,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC;QACxC,EAAE,IAAI,EAAE,gBAAgB,CAAC,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAChD,EAAE,IAAI,EAAE,gBAAgB,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE;KACzD,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;SACjE;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACL,6BAAK,GAAG,EAAE,eAAe;QACvB,oBAAC,MAAM,IACL,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,KAAK,EAChB,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,IAAI,EACX,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,GAAG;YAEb,oBAAC,WAAW,IAAC,aAAa,EAAE,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,gBAAgB,EAAE,kBAAkB;gBACrG,oBAAC,YAAY,OAAG;gBACf,cAAc;oBACb,oBAAC,eAAe,IAAC,kBAAkB,EAAE,cAAc,GAAI;gBACxD,YAAY;oBACX,oBAAC,YAAY,IAAC,MAAM,EAAE,YAAY,GAAI,CAC5B,CACP,CACJ,CACR,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport * as React from \"react\";\r\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\r\nimport { Dialog } from \"@itwin/core-react\";\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue } from \"@itwin/itwinui-react\";\r\n\r\n/** Properties for the [[ColorPickerDialog]] React component\r\n * @beta\r\n */\r\nexport interface ColorPickerDialogProps {\r\n dialogTitle: string;\r\n color: ColorDef;\r\n onOkResult: (selectedColor: ColorDef) => void;\r\n onCancelResult: () => void;\r\n /** displayed in rows of 9 items */\r\n colorPresets?: ColorDef[];\r\n /** If set show either HSL, RGB, or HEX input values. If undefined no input value is shown */\r\n colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\r\n}\r\n\r\n/**\r\n * Color Picker Dialog to use as modal dialog.\r\n * @beta\r\n */\r\nexport function ColorPickerDialog({ dialogTitle, color, onOkResult, onCancelResult, colorPresets, colorInputType }: ColorPickerDialogProps) {\r\n const [activeColor, setActiveColor] = React.useState(color);\r\n const dialogContainer = React.useRef<HTMLDivElement>(null);\r\n\r\n const handleOk = React.useCallback(() => {\r\n onOkResult(activeColor);\r\n }, [onOkResult, activeColor]);\r\n const handleCancel = React.useCallback(() => {\r\n // istanbul ignore else\r\n if (onCancelResult)\r\n onCancelResult();\r\n }, [onCancelResult]);\r\n\r\n const handleColorChanged = React.useCallback((newColorValue: ColorValue) => {\r\n const newColorDef = ColorDef.fromTbgr(newColorValue.toTbgr());\r\n setActiveColor(newColorDef);\r\n }, []);\r\n\r\n const buttonCluster = React.useMemo(() => [\r\n { type: DialogButtonType.OK, onClick: handleOk },\r\n { type: DialogButtonType.Cancel, onClick: handleCancel },\r\n ], [handleCancel, handleOk]);\r\n\r\n const colorOptions = React.useMemo(() => {\r\n if (colorPresets) {\r\n return colorPresets.map((def) => ColorValue.fromTbgr(def.tbgr));\r\n }\r\n return undefined;\r\n }, [colorPresets]);\r\n\r\n return (\r\n <div ref={dialogContainer}>\r\n <Dialog\r\n title={dialogTitle}\r\n opened={true}\r\n resizable={false}\r\n movable={true}\r\n modal={true}\r\n buttonCluster={buttonCluster}\r\n onClose={handleCancel}\r\n onEscape={handleCancel}\r\n minHeight={490}\r\n maxWidth={320}\r\n >\r\n <ColorPicker selectedColor={ColorValue.fromTbgr(activeColor.tbgr)} onChangeComplete={handleColorChanged} >\r\n <ColorBuilder />\r\n {colorInputType &&\r\n <ColorInputPanel defaultColorFormat={colorInputType} />}\r\n {colorOptions &&\r\n <ColorPalette colors={colorOptions} />}\r\n </ColorPicker>\r\n </Dialog>\r\n </div >\r\n );\r\n}\r\n"]}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import { ColorDef } from "@itwin/core-common";
|
|
6
6
|
import "./ColorPickerPanel.scss";
|
|
7
7
|
/** Properties for the [[ColorPickerPanel]] React component
|
|
8
|
-
* @public
|
|
8
|
+
* @public @deprecated use `ColorPicker` for itwinui-react
|
|
9
9
|
*/
|
|
10
10
|
export interface ColorPickerPanelProps {
|
|
11
11
|
activeColor: ColorDef;
|
|
@@ -16,7 +16,7 @@ export interface ColorPickerPanelProps {
|
|
|
16
16
|
}
|
|
17
17
|
/**
|
|
18
18
|
* Color Picker Dialog to use as modal dialog.
|
|
19
|
-
* @public
|
|
19
|
+
* @public @deprecated use `ColorPicker` for itwinui-react
|
|
20
20
|
*/
|
|
21
21
|
export declare function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps): JSX.Element;
|
|
22
22
|
//# sourceMappingURL=ColorPickerPanel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerPanel.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAKH,OAAO,EAAE,QAAQ,EAAY,MAAM,oBAAoB,CAAC;AAIxD,OAAO,yBAAyB,CAAC;AAGjC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,QAAQ,CAAC;IACtB,aAAa,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,uFAAuF;IACvF,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAChC;AAED;;;GAGG;AAEH,wBAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,qBAAqB,
|
|
1
|
+
{"version":3,"file":"ColorPickerPanel.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":"AAIA;;GAEG;;AAKH,OAAO,EAAE,QAAQ,EAAY,MAAM,oBAAoB,CAAC;AAIxD,OAAO,yBAAyB,CAAC;AAGjC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,QAAQ,CAAC;IACtB,aAAa,EAAE,CAAC,aAAa,EAAE,QAAQ,KAAK,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,QAAQ,EAAE,CAAC;IAC1B,uFAAuF;IACvF,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAChC;AAED;;;GAGG;AAEH,wBAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,qBAAqB,eAsInH"}
|
|
@@ -15,7 +15,7 @@ import "./ColorPickerPanel.scss";
|
|
|
15
15
|
import { NumberInput } from "@itwin/core-react";
|
|
16
16
|
/**
|
|
17
17
|
* Color Picker Dialog to use as modal dialog.
|
|
18
|
-
* @public
|
|
18
|
+
* @public @deprecated use `ColorPicker` for itwinui-react
|
|
19
19
|
*/
|
|
20
20
|
// istanbul ignore next
|
|
21
21
|
export function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport * as React from \"react\";\r\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\r\nimport { ColorSwatch } from \"./Swatch\";\r\nimport { HueSlider } from \"./HueSlider\";\r\nimport { SaturationPicker } from \"./SaturationPicker\";\r\nimport \"./ColorPickerPanel.scss\";\r\nimport { NumberInput } from \"@itwin/core-react\";\r\n\r\n/** Properties for the [[ColorPickerPanel]] React component\r\n * @public\r\n */\r\nexport interface ColorPickerPanelProps {\r\n activeColor: ColorDef;\r\n onColorChange: (selectedColor: ColorDef) => void;\r\n colorPresets?: ColorDef[];\r\n /** If set show either HSL or RGB input values. If undefined no input value is shown */\r\n colorInputType?: \"HSL\" | \"RGB\";\r\n}\r\n\r\n/**\r\n * Color Picker Dialog to use as modal dialog.\r\n * @public\r\n */\r\n// istanbul ignore next\r\nexport function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps) {\r\n\r\n const handlePresetColorPick = React.useCallback((newColor: ColorDef, e: React.MouseEvent<Element, MouseEvent>) => {\r\n e.preventDefault();\r\n if (onColorChange) {\r\n onColorChange(newColor);\r\n }\r\n }, [onColorChange]);\r\n\r\n const handleHueChange = React.useCallback((newHsvColor: HSVColor) => {\r\n // for a ColorDef to be created from hsv s can't be 0\r\n if (newHsvColor.s === 0) {\r\n newHsvColor = newHsvColor.clone(undefined, 0.5);\r\n }\r\n\r\n const newColorDef = newHsvColor.toColorDef();\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }, [onColorChange]);\r\n\r\n const handleSaturationChange = React.useCallback((newHsvColor: HSVColor) => {\r\n const newColorDef = newHsvColor.toColorDef();\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }, [onColorChange]);\r\n\r\n const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);\r\n const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);\r\n const color = React.useMemo(() => activeColor.colors, [activeColor]);\r\n\r\n const handleLightnessValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n const newHsl = currentHsl.clone(undefined, undefined, (value ?? 0) / 100);\r\n\r\n if (onColorChange) {\r\n const newColorDef = newHsl.toColorDef();\r\n onColorChange(newColorDef);\r\n }\r\n }, [currentHsl, onColorChange]);\r\n\r\n const handleHueValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n const newHsl = currentHsl.clone((value ?? 0) / 360, undefined, undefined);\r\n\r\n if (onColorChange) {\r\n const newColorDef = newHsl.toColorDef();\r\n onColorChange(newColorDef);\r\n }\r\n }, [currentHsl, onColorChange]);\r\n\r\n const handleSaturationValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n const newHsl = currentHsl.clone(undefined, (value ?? 0) / 100, undefined);\r\n\r\n if (onColorChange) {\r\n const newColorDef = newHsl.toColorDef();\r\n onColorChange(newColorDef);\r\n }\r\n }, [currentHsl, onColorChange]);\r\n\r\n const handleRedChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n if (undefined !== value) {\r\n const newColorDef = ColorDef.from(value, color.g, color.b);\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }\r\n }, [color, onColorChange]);\r\n\r\n const handleGreenChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n if (undefined !== value) {\r\n const newColorDef = ColorDef.from(color.r, value, color.b);\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }\r\n }, [color, onColorChange]);\r\n\r\n const handleBlueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n if (undefined !== value) {\r\n const newColorDef = ColorDef.from(color.r, color.g, value);\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }\r\n }, [color, onColorChange]);\r\n\r\n return (\r\n <div data-testid=\"components-colorpicker-panel\" className=\"components-colorpicker-panel\">\r\n <div className=\"components-colorpicker-panel-color\">\r\n <div className=\"components-colorpicker-saturation\">\r\n <SaturationPicker hsv={currentHsv} onSaturationChange={handleSaturationChange} />\r\n </div>\r\n <div className=\"components-colorpicker-hue\">\r\n <HueSlider hsv={currentHsv} onHueChange={handleHueChange} isHorizontal={false} />\r\n </div>\r\n </div>\r\n {(colorInputType === \"RGB\") &&\r\n <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">R</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-red\" value={color.r} onChange={handleRedChange} min={0} max={255} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">G</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-green\" value={color.g} onChange={handleGreenChange} min={0} max={255} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">B</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-blue\" value={color.b} onChange={handleBlueChange} min={0} max={255} />\r\n </div>\r\n </div>}\r\n {(colorInputType === \"HSL\") &&\r\n <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">H</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-hue\" value={Math.round(currentHsl.h * 360)} onChange={handleHueValueChange} min={0} max={360} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">S</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-saturation\" value={Math.round(currentHsl.s * 100)} onChange={handleSaturationValueChange} min={0} max={100} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">L</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-lightness\" value={Math.round(currentHsl.l * 100)} onChange={handleLightnessValueChange} min={0} max={100} />\r\n </div>\r\n </div>}\r\n\r\n {\r\n colorPresets && colorPresets.length &&\r\n <div className=\"components-colorpicker-panel-presets\">\r\n {colorPresets.map((preset, index) => <ColorSwatch className=\"components-colorpicker-panel-swatch\" key={index} colorDef={preset} round={false} onColorPick={handlePresetColorPick} />)}\r\n </div>\r\n }\r\n </div>\r\n );\r\n}\r\n"]}
|
|
1
|
+
{"version":3,"file":"ColorPickerPanel.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport * as React from \"react\";\r\nimport { ColorDef, HSVColor } from \"@itwin/core-common\";\r\nimport { ColorSwatch } from \"./Swatch\";\r\nimport { HueSlider } from \"./HueSlider\";\r\nimport { SaturationPicker } from \"./SaturationPicker\";\r\nimport \"./ColorPickerPanel.scss\";\r\nimport { NumberInput } from \"@itwin/core-react\";\r\n\r\n/** Properties for the [[ColorPickerPanel]] React component\r\n * @public @deprecated use `ColorPicker` for itwinui-react\r\n */\r\nexport interface ColorPickerPanelProps {\r\n activeColor: ColorDef;\r\n onColorChange: (selectedColor: ColorDef) => void;\r\n colorPresets?: ColorDef[];\r\n /** If set show either HSL or RGB input values. If undefined no input value is shown */\r\n colorInputType?: \"HSL\" | \"RGB\";\r\n}\r\n\r\n/**\r\n * Color Picker Dialog to use as modal dialog.\r\n * @public @deprecated use `ColorPicker` for itwinui-react\r\n */\r\n// istanbul ignore next\r\nexport function ColorPickerPanel({ activeColor, onColorChange, colorPresets, colorInputType }: ColorPickerPanelProps) { // eslint-disable-line deprecation/deprecation\r\n const handlePresetColorPick = React.useCallback((newColor: ColorDef, e: React.MouseEvent<Element, MouseEvent>) => {\r\n e.preventDefault();\r\n if (onColorChange) {\r\n onColorChange(newColor);\r\n }\r\n }, [onColorChange]);\r\n\r\n const handleHueChange = React.useCallback((newHsvColor: HSVColor) => {\r\n // for a ColorDef to be created from hsv s can't be 0\r\n if (newHsvColor.s === 0) {\r\n newHsvColor = newHsvColor.clone(undefined, 0.5);\r\n }\r\n\r\n const newColorDef = newHsvColor.toColorDef();\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }, [onColorChange]);\r\n\r\n const handleSaturationChange = React.useCallback((newHsvColor: HSVColor) => {\r\n const newColorDef = newHsvColor.toColorDef();\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }, [onColorChange]);\r\n\r\n const currentHsl = React.useMemo(() => activeColor.toHSL(), [activeColor]);\r\n const currentHsv = React.useMemo(() => activeColor.toHSV(), [activeColor]);\r\n const color = React.useMemo(() => activeColor.colors, [activeColor]);\r\n\r\n const handleLightnessValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n const newHsl = currentHsl.clone(undefined, undefined, (value ?? 0) / 100);\r\n\r\n if (onColorChange) {\r\n const newColorDef = newHsl.toColorDef();\r\n onColorChange(newColorDef);\r\n }\r\n }, [currentHsl, onColorChange]);\r\n\r\n const handleHueValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n const newHsl = currentHsl.clone((value ?? 0) / 360, undefined, undefined);\r\n\r\n if (onColorChange) {\r\n const newColorDef = newHsl.toColorDef();\r\n onColorChange(newColorDef);\r\n }\r\n }, [currentHsl, onColorChange]);\r\n\r\n const handleSaturationValueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n const newHsl = currentHsl.clone(undefined, (value ?? 0) / 100, undefined);\r\n\r\n if (onColorChange) {\r\n const newColorDef = newHsl.toColorDef();\r\n onColorChange(newColorDef);\r\n }\r\n }, [currentHsl, onColorChange]);\r\n\r\n const handleRedChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n if (undefined !== value) {\r\n const newColorDef = ColorDef.from(value, color.g, color.b);\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }\r\n }, [color, onColorChange]);\r\n\r\n const handleGreenChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n if (undefined !== value) {\r\n const newColorDef = ColorDef.from(color.r, value, color.b);\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }\r\n }, [color, onColorChange]);\r\n\r\n const handleBlueChange = React.useCallback((value: number | undefined, _stringValue: string) => {\r\n if (undefined !== value) {\r\n const newColorDef = ColorDef.from(color.r, color.g, value);\r\n if (onColorChange) {\r\n onColorChange(newColorDef);\r\n }\r\n }\r\n }, [color, onColorChange]);\r\n\r\n return (\r\n <div data-testid=\"components-colorpicker-panel\" className=\"components-colorpicker-panel\">\r\n <div className=\"components-colorpicker-panel-color\">\r\n <div className=\"components-colorpicker-saturation\">\r\n <SaturationPicker hsv={currentHsv} onSaturationChange={handleSaturationChange} />\r\n </div>\r\n <div className=\"components-colorpicker-hue\">\r\n <HueSlider hsv={currentHsv} onHueChange={handleHueChange} isHorizontal={false} />\r\n </div>\r\n </div>\r\n {(colorInputType === \"RGB\") &&\r\n <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">R</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-red\" value={color.r} onChange={handleRedChange} min={0} max={255} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">G</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-green\" value={color.g} onChange={handleGreenChange} min={0} max={255} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">B</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-blue\" value={color.b} onChange={handleBlueChange} min={0} max={255} />\r\n </div>\r\n </div>}\r\n {(colorInputType === \"HSL\") &&\r\n <div data-testid=\"components-colorpicker-input-panel\" className=\"components-colorpicker-input-panel\">\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">H</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-hue\" value={Math.round(currentHsl.h * 360)} onChange={handleHueValueChange} min={0} max={360} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">S</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-saturation\" value={Math.round(currentHsl.s * 100)} onChange={handleSaturationValueChange} min={0} max={100} />\r\n </div>\r\n <div className=\"components-colorpicker-input-value-wrapper\">\r\n <span className=\"uicore-inputs-labeled-input\">L</span>\r\n <NumberInput data-testid=\"components-colorpicker-input-value-lightness\" value={Math.round(currentHsl.l * 100)} onChange={handleLightnessValueChange} min={0} max={100} />\r\n </div>\r\n </div>}\r\n\r\n {\r\n colorPresets && colorPresets.length &&\r\n <div className=\"components-colorpicker-panel-presets\">\r\n {colorPresets.map((preset, index) => <ColorSwatch className=\"components-colorpicker-panel-swatch\" key={index} colorDef={preset} round={false} onColorPick={handlePresetColorPick} />)}\r\n </div>\r\n }\r\n </div>\r\n );\r\n}\r\n"]}
|
|
@@ -12,7 +12,8 @@ import "./ColorPickerPopup.scss";
|
|
|
12
12
|
export interface ColorPickerPopupProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
|
|
13
13
|
/** Current color */
|
|
14
14
|
initialColor: ColorDef;
|
|
15
|
-
/** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets.
|
|
15
|
+
/** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets.
|
|
16
|
+
* Displayed in rows of 9 items */
|
|
16
17
|
colorDefs?: ColorDef[];
|
|
17
18
|
/** Function to call when the color value is changed */
|
|
18
19
|
onColorChange?: ((newColor: ColorDef) => void) | undefined;
|
|
@@ -32,8 +33,8 @@ export interface ColorPickerPopupProps extends React.ButtonHTMLAttributes<HTMLBu
|
|
|
32
33
|
captureClicks?: boolean;
|
|
33
34
|
/** If true, don't show close button at top */
|
|
34
35
|
hideCloseButton?: boolean;
|
|
35
|
-
/** If set show
|
|
36
|
-
colorInputType?: "
|
|
36
|
+
/** If set show input values */
|
|
37
|
+
colorInputType?: "hsl" | "rgb" | "hex";
|
|
37
38
|
}
|
|
38
39
|
/**
|
|
39
40
|
* ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerPopup.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAA+B,MAAM,mBAAmB,CAAC;AAG7E,OAAO,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"ColorPickerPopup.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAe,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAA+B,MAAM,mBAAmB,CAAC;AAG7E,OAAO,yBAAyB,CAAC;AAIjC;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW;IACvG,oBAAoB;IACpB,YAAY,EAAE,QAAQ,CAAC;IACvB;uCACmC;IACnC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,CAAC,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACvD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,gEAAgE;IAChE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+BAA+B;IAC/B,cAAc,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;CACxC;AAiID;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,GAAG,IAAiC,CAAC"}
|
|
@@ -11,9 +11,11 @@ import classnames from "classnames";
|
|
|
11
11
|
import { ColorByName, ColorDef } from "@itwin/core-common";
|
|
12
12
|
import { RelativePosition } from "@itwin/appui-abstract";
|
|
13
13
|
import { Popup, useRefs, WebFontIcon } from "@itwin/core-react";
|
|
14
|
-
import { ColorPickerPanel } from "./ColorPickerPanel";
|
|
14
|
+
// import { ColorPickerPanel } from "./ColorPickerPanel";
|
|
15
|
+
import { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue } from "@itwin/itwinui-react";
|
|
15
16
|
import "./ColorPickerPopup.scss";
|
|
16
17
|
import { getCSSColorFromDef } from "./getCSSColorFromDef";
|
|
18
|
+
import { UiIModelComponents } from "../UiIModelComponents";
|
|
17
19
|
// Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted
|
|
18
20
|
const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPickerPopup(props, ref) {
|
|
19
21
|
const target = React.useRef();
|
|
@@ -28,22 +30,24 @@ const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPick
|
|
|
28
30
|
}
|
|
29
31
|
}, [props.initialColor]);
|
|
30
32
|
const defaultColors = React.useRef([
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
33
|
+
ColorValue.fromTbgr(ColorByName.red),
|
|
34
|
+
ColorValue.fromTbgr(ColorByName.orange),
|
|
35
|
+
ColorValue.fromTbgr(ColorByName.yellow),
|
|
36
|
+
ColorValue.fromTbgr(ColorByName.green),
|
|
37
|
+
ColorValue.fromTbgr(ColorByName.blue),
|
|
38
|
+
ColorValue.fromTbgr(ColorByName.mediumBlue),
|
|
39
|
+
ColorValue.fromTbgr(ColorByName.indigo),
|
|
40
|
+
ColorValue.fromTbgr(ColorByName.violet),
|
|
41
|
+
ColorValue.fromTbgr(ColorByName.black),
|
|
42
|
+
ColorValue.fromTbgr(ColorByName.white),
|
|
43
|
+
ColorValue.fromTbgr(ColorByName.cyan),
|
|
44
|
+
ColorValue.fromTbgr(ColorByName.fuchsia),
|
|
45
|
+
ColorValue.fromTbgr(ColorByName.tan),
|
|
46
|
+
ColorValue.fromTbgr(ColorByName.gray),
|
|
47
|
+
ColorValue.fromTbgr(ColorByName.brown),
|
|
48
|
+
ColorValue.fromTbgr(ColorByName.purple),
|
|
49
|
+
ColorValue.fromTbgr(ColorByName.olive),
|
|
50
|
+
ColorValue.fromTbgr(ColorByName.darkGreen),
|
|
47
51
|
]);
|
|
48
52
|
// istanbul ignore next
|
|
49
53
|
const closePopup = React.useCallback(() => {
|
|
@@ -53,7 +57,8 @@ const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPick
|
|
|
53
57
|
const togglePopup = React.useCallback(() => {
|
|
54
58
|
setShowPopup(!showPopup);
|
|
55
59
|
}, [showPopup]);
|
|
56
|
-
const handleColorChanged = React.useCallback((
|
|
60
|
+
const handleColorChanged = React.useCallback((newColorValue) => {
|
|
61
|
+
const newColor = ColorDef.fromTbgr(newColorValue.toTbgr());
|
|
57
62
|
// istanbul ignore else
|
|
58
63
|
if (!newColor.equals(colorDef)) {
|
|
59
64
|
setColorDef(newColor);
|
|
@@ -70,20 +75,34 @@ const ForwardRefColorPickerPopup = React.forwardRef(function ForwardRefColorPick
|
|
|
70
75
|
if (props.captureClicks)
|
|
71
76
|
event.stopPropagation();
|
|
72
77
|
};
|
|
73
|
-
const colorOptions =
|
|
78
|
+
const colorOptions = React.useMemo(() => {
|
|
79
|
+
if (props.colorDefs && props.colorDefs.length) {
|
|
80
|
+
return props.colorDefs.map((def) => ColorValue.fromTbgr(def.tbgr));
|
|
81
|
+
}
|
|
82
|
+
if (props.colorDefs && 0 === props.colorDefs.length)
|
|
83
|
+
return undefined;
|
|
84
|
+
return defaultColors.current;
|
|
85
|
+
}, [props.colorDefs]);
|
|
74
86
|
const popupPosition = undefined !== props.popupPosition ? props.popupPosition : RelativePosition.BottomLeft;
|
|
87
|
+
const [closeLabel] = React.useState(() => UiIModelComponents.translate("color.close"));
|
|
88
|
+
const [togglePopupLabel] = React.useState(() => UiIModelComponents.translate("color.toggleColorPopup"));
|
|
75
89
|
return (
|
|
76
90
|
/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
|
|
77
91
|
React.createElement("div", { onClick: clickHandler },
|
|
78
|
-
React.createElement("button", { "data-testid": "components-colorpicker-popup-button", onClick: togglePopup, className: buttonClassNames, style: buttonStyle, disabled: props.disabled, ref: refs },
|
|
92
|
+
React.createElement("button", { "data-testid": "components-colorpicker-popup-button", onClick: togglePopup, className: buttonClassNames, style: buttonStyle, disabled: props.disabled, ref: refs, title: togglePopupLabel },
|
|
79
93
|
React.createElement("div", { className: "components-colorpicker-button-container" },
|
|
80
94
|
React.createElement("div", { className: "components-colorpicker-button-color-swatch", style: swatchStyle }),
|
|
81
95
|
props.showCaret && React.createElement(WebFontIcon, { className: "components-caret", iconName: showPopup ? "icon-caret-up" : "icon-caret-down", iconSize: "x-small" }))),
|
|
82
96
|
React.createElement(Popup, { className: "components-colorpicker-popup", isOpen: showPopup, position: popupPosition, onClose: closePopup, target: target.current, closeOnNestedPopupOutsideClick: true },
|
|
83
97
|
React.createElement("div", { className: "components-colorpicker-popup-panel-padding" },
|
|
84
98
|
!props.hideCloseButton &&
|
|
85
|
-
React.createElement("button", { className: "core-focus-trap-ignore-initial core-dialog-close icon icon-close", "data-testid": "core-dialog-close", onClick: togglePopup }),
|
|
86
|
-
React.createElement(
|
|
99
|
+
React.createElement("button", { title: closeLabel, className: "core-focus-trap-ignore-initial core-dialog-close icon icon-close", "data-testid": "core-dialog-close", onClick: togglePopup }),
|
|
100
|
+
React.createElement(ColorPicker, { selectedColor: ColorValue.fromTbgr(colorDef.tbgr), onChangeComplete: handleColorChanged },
|
|
101
|
+
React.createElement(ColorBuilder, null),
|
|
102
|
+
props.colorInputType &&
|
|
103
|
+
React.createElement(ColorInputPanel, { defaultColorFormat: props.colorInputType }),
|
|
104
|
+
colorOptions &&
|
|
105
|
+
React.createElement(ColorPalette, { colors: colorOptions }))))));
|
|
87
106
|
});
|
|
88
107
|
/**
|
|
89
108
|
* ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerPopup.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, Popup, useRefs, WebFontIcon } from \"@itwin/core-react\";\r\nimport { ColorPickerPanel } from \"./ColorPickerPanel\";\r\n\r\nimport \"./ColorPickerPopup.scss\";\r\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\r\n\r\n/** Properties for the [[ColorPickerPopup]] React component\r\n * @public\r\n */\r\nexport interface ColorPickerPopupProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n /** Current color */\r\n initialColor: ColorDef;\r\n /** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets. */\r\n colorDefs?: ColorDef[];\r\n /** Function to call when the color value is changed */\r\n onColorChange?: ((newColor: ColorDef) => void) | undefined;\r\n /** Function to call when the popup is closed */\r\n onClose?: ((colorValue: ColorDef) => void) | undefined;\r\n /** Disabled or not */\r\n disabled?: boolean;\r\n /** Readonly or not, color displayed on button but button will not trigger pop-up */\r\n readonly?: boolean;\r\n /** popup position. If not set RelativePosition.BottomLeft is used */\r\n popupPosition?: RelativePosition;\r\n /** Provides ability to return reference to HTMLButtonElement */\r\n ref?: React.Ref<HTMLButtonElement>;\r\n /** If true show up/down caret next to color */\r\n showCaret?: boolean;\r\n /** If true, don't propagate clicks out of the ColorPicker */\r\n captureClicks?: boolean;\r\n /** If true, don't show close button at top */\r\n hideCloseButton?: boolean;\r\n /** If set show either HSL or RGB input values */\r\n colorInputType?: \"HSL\" | \"RGB\";\r\n}\r\n\r\n// Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted\r\n\r\nconst ForwardRefColorPickerPopup = React.forwardRef<HTMLButtonElement, ColorPickerPopupProps>(\r\n function ForwardRefColorPickerPopup(props, ref) {\r\n const target = React.useRef<HTMLButtonElement>();\r\n const refs = useRefs(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n const [showPopup, setShowPopup] = React.useState(false);\r\n const [colorDef, setColorDef] = React.useState(props.initialColor);\r\n const initialColorRef = React.useRef(props.initialColor);\r\n\r\n React.useEffect(() => {\r\n if (props.initialColor !== initialColorRef.current) {\r\n initialColorRef.current = props.initialColor;\r\n setColorDef(props.initialColor);\r\n }\r\n }, [props.initialColor]);\r\n\r\n const defaultColors = React.useRef(\r\n [\r\n ColorDef.create(ColorByName.red),\r\n ColorDef.create(ColorByName.orange),\r\n ColorDef.create(ColorByName.yellow),\r\n ColorDef.create(ColorByName.green),\r\n ColorDef.create(ColorByName.blue),\r\n ColorDef.create(ColorByName.indigo),\r\n ColorDef.create(ColorByName.violet),\r\n ColorDef.create(ColorByName.black),\r\n ColorDef.create(ColorByName.white),\r\n ColorDef.create(ColorByName.cyan),\r\n ColorDef.create(ColorByName.fuchsia),\r\n ColorDef.create(ColorByName.tan),\r\n ColorDef.create(ColorByName.gray),\r\n ColorDef.create(ColorByName.brown),\r\n ColorDef.create(ColorByName.purple),\r\n ColorDef.create(ColorByName.olive),\r\n ]);\r\n\r\n // istanbul ignore next\r\n const closePopup = React.useCallback(() => {\r\n props.onClose && props.onClose(colorDef);\r\n setShowPopup(false);\r\n }, [colorDef, props]);\r\n\r\n const togglePopup = React.useCallback(() => {\r\n setShowPopup(!showPopup);\r\n }, [showPopup]);\r\n\r\n const handleColorChanged = React.useCallback((newColor: ColorDef) => {\r\n // istanbul ignore else\r\n if (!newColor.equals(colorDef)) {\r\n setColorDef(newColor);\r\n\r\n // istanbul ignore else\r\n props.onColorChange && props.onColorChange(newColor);\r\n }\r\n }, [colorDef, props]);\r\n\r\n const rgbaString = getCSSColorFromDef(colorDef);\r\n\r\n const buttonStyle = { ...props.style } as React.CSSProperties;\r\n const swatchStyle = { backgroundColor: rgbaString } as React.CSSProperties;\r\n const buttonClassNames = classnames(\"components-colorpicker-popup-button\",\r\n props.readonly && \"readonly\",\r\n props.className,\r\n );\r\n\r\n const clickHandler = (event: React.MouseEvent) => {\r\n // istanbul ignore else\r\n if (props.captureClicks)\r\n event.stopPropagation();\r\n };\r\n\r\n const colorOptions = props.colorDefs && props.colorDefs.length ? props.colorDefs : defaultColors.current;\r\n const popupPosition = undefined !== props.popupPosition ? props.popupPosition : RelativePosition.BottomLeft;\r\n return (\r\n /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\r\n <div onClick={clickHandler}>\r\n <button data-testid=\"components-colorpicker-popup-button\" onClick={togglePopup} className={buttonClassNames} style={buttonStyle} disabled={props.disabled} ref={refs} >\r\n <div className=\"components-colorpicker-button-container\">\r\n <div className=\"components-colorpicker-button-color-swatch\" style={swatchStyle} />\r\n {props.showCaret && <WebFontIcon className=\"components-caret\" iconName={showPopup ? \"icon-caret-up\" : \"icon-caret-down\"} iconSize=\"x-small\" />}\r\n </div>\r\n </button>\r\n <Popup\r\n className=\"components-colorpicker-popup\"\r\n isOpen={showPopup}\r\n position={popupPosition}\r\n onClose={closePopup}\r\n target={target.current}\r\n closeOnNestedPopupOutsideClick\r\n >\r\n <div className=\"components-colorpicker-popup-panel-padding\">\r\n {!props.hideCloseButton &&\r\n <button\r\n className={\"core-focus-trap-ignore-initial core-dialog-close icon icon-close\"}\r\n data-testid=\"core-dialog-close\"\r\n onClick={togglePopup}\r\n />}\r\n <ColorPickerPanel colorInputType={props.colorInputType} activeColor={colorDef} colorPresets={colorOptions} onColorChange={handleColorChanged} />\r\n </div>\r\n </Popup>\r\n </div>\r\n );\r\n }\r\n);\r\n\r\n/**\r\n * ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.\r\n * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.\r\n * @public\r\n */\r\nexport const ColorPickerPopup: (props: ColorPickerPopupProps) => JSX.Element | null = ForwardRefColorPickerPopup;\r\n"]}
|
|
1
|
+
{"version":3,"file":"ColorPickerPopup.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/color/ColorPickerPopup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Color\r\n */\r\n\r\n// cSpell:ignore colorpicker\r\n\r\nimport * as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { ColorByName, ColorDef } from \"@itwin/core-common\";\r\nimport { RelativePosition } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, Popup, useRefs, WebFontIcon } from \"@itwin/core-react\";\r\n// import { ColorPickerPanel } from \"./ColorPickerPanel\";\r\nimport { ColorBuilder, ColorInputPanel, ColorPalette, ColorPicker, ColorValue } from \"@itwin/itwinui-react\";\r\nimport \"./ColorPickerPopup.scss\";\r\nimport { getCSSColorFromDef } from \"./getCSSColorFromDef\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\n\r\n/** Properties for the [[ColorPickerPopup]] React component\r\n * @public\r\n */\r\nexport interface ColorPickerPopupProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n /** Current color */\r\n initialColor: ColorDef;\r\n /** Preset colors. Pass undefined to show default preset colors. Pass empty array to show no presets.\r\n * Displayed in rows of 9 items */\r\n colorDefs?: ColorDef[];\r\n /** Function to call when the color value is changed */\r\n onColorChange?: ((newColor: ColorDef) => void) | undefined;\r\n /** Function to call when the popup is closed */\r\n onClose?: ((colorValue: ColorDef) => void) | undefined;\r\n /** Disabled or not */\r\n disabled?: boolean;\r\n /** Readonly or not, color displayed on button but button will not trigger pop-up */\r\n readonly?: boolean;\r\n /** popup position. If not set RelativePosition.BottomLeft is used */\r\n popupPosition?: RelativePosition;\r\n /** Provides ability to return reference to HTMLButtonElement */\r\n ref?: React.Ref<HTMLButtonElement>;\r\n /** If true show up/down caret next to color */\r\n showCaret?: boolean;\r\n /** If true, don't propagate clicks out of the ColorPicker */\r\n captureClicks?: boolean;\r\n /** If true, don't show close button at top */\r\n hideCloseButton?: boolean;\r\n /** If set show input values */\r\n colorInputType?: \"hsl\" | \"rgb\" | \"hex\";\r\n}\r\n\r\n// Defined using following pattern (const ColorPickerPopup at bottom) to ensure useful API documentation is extracted\r\n\r\nconst ForwardRefColorPickerPopup = React.forwardRef<HTMLButtonElement, ColorPickerPopupProps>(\r\n function ForwardRefColorPickerPopup(props, ref) {\r\n const target = React.useRef<HTMLButtonElement>();\r\n const refs = useRefs(target, ref); // combine ref needed for target with the forwardRef needed by the Parent when parent is a Type Editor.\r\n const [showPopup, setShowPopup] = React.useState(false);\r\n const [colorDef, setColorDef] = React.useState(props.initialColor);\r\n const initialColorRef = React.useRef(props.initialColor);\r\n\r\n React.useEffect(() => {\r\n if (props.initialColor !== initialColorRef.current) {\r\n initialColorRef.current = props.initialColor;\r\n setColorDef(props.initialColor);\r\n }\r\n }, [props.initialColor]);\r\n\r\n const defaultColors = React.useRef(\r\n [\r\n ColorValue.fromTbgr(ColorByName.red),\r\n ColorValue.fromTbgr(ColorByName.orange),\r\n ColorValue.fromTbgr(ColorByName.yellow),\r\n ColorValue.fromTbgr(ColorByName.green),\r\n ColorValue.fromTbgr(ColorByName.blue),\r\n ColorValue.fromTbgr(ColorByName.mediumBlue),\r\n ColorValue.fromTbgr(ColorByName.indigo),\r\n ColorValue.fromTbgr(ColorByName.violet),\r\n ColorValue.fromTbgr(ColorByName.black),\r\n ColorValue.fromTbgr(ColorByName.white),\r\n ColorValue.fromTbgr(ColorByName.cyan),\r\n ColorValue.fromTbgr(ColorByName.fuchsia),\r\n ColorValue.fromTbgr(ColorByName.tan),\r\n ColorValue.fromTbgr(ColorByName.gray),\r\n ColorValue.fromTbgr(ColorByName.brown),\r\n ColorValue.fromTbgr(ColorByName.purple),\r\n ColorValue.fromTbgr(ColorByName.olive),\r\n ColorValue.fromTbgr(ColorByName.darkGreen),\r\n ]);\r\n\r\n // istanbul ignore next\r\n const closePopup = React.useCallback(() => {\r\n props.onClose && props.onClose(colorDef);\r\n setShowPopup(false);\r\n }, [colorDef, props]);\r\n\r\n const togglePopup = React.useCallback(() => {\r\n setShowPopup(!showPopup);\r\n }, [showPopup]);\r\n\r\n const handleColorChanged = React.useCallback((newColorValue: ColorValue) => {\r\n const newColor = ColorDef.fromTbgr(newColorValue.toTbgr());\r\n // istanbul ignore else\r\n if (!newColor.equals(colorDef)) {\r\n setColorDef(newColor);\r\n\r\n // istanbul ignore else\r\n props.onColorChange && props.onColorChange(newColor);\r\n }\r\n }, [colorDef, props]);\r\n\r\n const rgbaString = getCSSColorFromDef(colorDef);\r\n\r\n const buttonStyle = { ...props.style } as React.CSSProperties;\r\n const swatchStyle = { backgroundColor: rgbaString } as React.CSSProperties;\r\n const buttonClassNames = classnames(\"components-colorpicker-popup-button\",\r\n props.readonly && \"readonly\",\r\n props.className,\r\n );\r\n\r\n const clickHandler = (event: React.MouseEvent) => {\r\n // istanbul ignore else\r\n if (props.captureClicks)\r\n event.stopPropagation();\r\n };\r\n\r\n const colorOptions = React.useMemo(() => {\r\n if (props.colorDefs && props.colorDefs.length) {\r\n return props.colorDefs.map((def) => ColorValue.fromTbgr(def.tbgr));\r\n }\r\n if (props.colorDefs && 0 === props.colorDefs.length)\r\n return undefined;\r\n return defaultColors.current;\r\n }, [props.colorDefs]);\r\n const popupPosition = undefined !== props.popupPosition ? props.popupPosition : RelativePosition.BottomLeft;\r\n\r\n const [closeLabel] = React.useState(() => UiIModelComponents.translate(\"color.close\"));\r\n const [togglePopupLabel] = React.useState(() => UiIModelComponents.translate(\"color.toggleColorPopup\"));\r\n\r\n return (\r\n /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */\r\n <div onClick={clickHandler}>\r\n <button data-testid=\"components-colorpicker-popup-button\" onClick={togglePopup} className={buttonClassNames} style={buttonStyle}\r\n disabled={props.disabled} ref={refs} title={togglePopupLabel} >\r\n <div className=\"components-colorpicker-button-container\">\r\n <div className=\"components-colorpicker-button-color-swatch\" style={swatchStyle} />\r\n {props.showCaret && <WebFontIcon className=\"components-caret\" iconName={showPopup ? \"icon-caret-up\" : \"icon-caret-down\"} iconSize=\"x-small\" />}\r\n </div>\r\n </button>\r\n <Popup\r\n className=\"components-colorpicker-popup\"\r\n isOpen={showPopup}\r\n position={popupPosition}\r\n onClose={closePopup}\r\n target={target.current}\r\n closeOnNestedPopupOutsideClick\r\n >\r\n <div className=\"components-colorpicker-popup-panel-padding\">\r\n {!props.hideCloseButton &&\r\n <button title={closeLabel}\r\n className={\"core-focus-trap-ignore-initial core-dialog-close icon icon-close\"}\r\n data-testid=\"core-dialog-close\"\r\n onClick={togglePopup}\r\n />}\r\n <ColorPicker selectedColor={ColorValue.fromTbgr(colorDef.tbgr)} onChangeComplete={handleColorChanged} >\r\n <ColorBuilder />\r\n {props.colorInputType &&\r\n <ColorInputPanel defaultColorFormat={props.colorInputType} />}\r\n {colorOptions &&\r\n <ColorPalette colors={colorOptions} />}\r\n </ColorPicker>\r\n </div>\r\n </Popup>\r\n </div>\r\n );\r\n }\r\n);\r\n\r\n/**\r\n * ColorPickerButton component that allows user to select a color from a set of color swatches or to define a new color.\r\n * @note Using forwardRef so the ColorEditor (Type Editor) can access the ref of the button element inside this component.\r\n * @public\r\n */\r\nexport const ColorPickerPopup: (props: ColorPickerPopupProps) => JSX.Element | null = ForwardRefColorPickerPopup;\r\n"]}
|
|
@@ -49,5 +49,15 @@ button.components-colorpicker-popup-button {
|
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
.components-colorpicker-popup-panel-padding {
|
|
52
|
-
padding: 6px;
|
|
53
|
-
|
|
52
|
+
padding: 3px 6px 6px 6px;
|
|
53
|
+
display: flex;
|
|
54
|
+
flex-direction: column;
|
|
55
|
+
gap: 4px;
|
|
56
|
+
|
|
57
|
+
button.core-dialog-close {
|
|
58
|
+
margin-left: auto;
|
|
59
|
+
background: transparent;
|
|
60
|
+
border: none;
|
|
61
|
+
color: var(--buic-foreground-body);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
@@ -37,8 +37,10 @@
|
|
|
37
37
|
"rotateStyle": "Toggle background-rotate"
|
|
38
38
|
},
|
|
39
39
|
"color": {
|
|
40
|
+
"close": "Close",
|
|
40
41
|
"hue": "Hue",
|
|
41
42
|
"saturation": "Saturation",
|
|
43
|
+
"toggleColorPopup": "Toggle Color Picker Popup",
|
|
42
44
|
"transparency": "Transparency"
|
|
43
45
|
},
|
|
44
46
|
"QuantityInput": {
|
|
@@ -134,4 +136,4 @@
|
|
|
134
136
|
"setFormat": "Set Format"
|
|
135
137
|
}
|
|
136
138
|
}
|
|
137
|
-
}
|
|
139
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itwin/imodel-components-react",
|
|
3
|
-
"version": "3.0.0-dev.
|
|
3
|
+
"version": "3.0.0-dev.104",
|
|
4
4
|
"description": "iModel.js UI IModel Components",
|
|
5
5
|
"main": "lib/cjs/imodel-components-react.js",
|
|
6
6
|
"module": "lib/esm/imodel-components-react.js",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
"license": "MIT",
|
|
10
10
|
"repository": {
|
|
11
11
|
"type": "git",
|
|
12
|
-
"url": "https://github.com/
|
|
12
|
+
"url": "https://github.com/iTwin/itwinjs-core/tree/master/ui/imodel-components-react"
|
|
13
13
|
},
|
|
14
14
|
"keywords": [
|
|
15
15
|
"Bentley",
|
|
@@ -21,15 +21,15 @@
|
|
|
21
21
|
"url": "http://www.bentley.com"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
|
-
"@itwin/core-bentley": "^3.0.0-dev.
|
|
25
|
-
"@itwin/core-geometry": "^3.0.0-dev.
|
|
26
|
-
"@itwin/core-common": "^3.0.0-dev.
|
|
27
|
-
"@itwin/core-frontend": "^3.0.0-dev.
|
|
28
|
-
"@itwin/core-i18n": "^3.0.0-dev.
|
|
29
|
-
"@itwin/core-quantity": "^3.0.0-dev.
|
|
30
|
-
"@itwin/appui-abstract": "^3.0.0-dev.
|
|
31
|
-
"@itwin/core-react": "^3.0.0-dev.
|
|
32
|
-
"@itwin/components-react": "^3.0.0-dev.
|
|
24
|
+
"@itwin/core-bentley": "^3.0.0-dev.104",
|
|
25
|
+
"@itwin/core-geometry": "^3.0.0-dev.104",
|
|
26
|
+
"@itwin/core-common": "^3.0.0-dev.104",
|
|
27
|
+
"@itwin/core-frontend": "^3.0.0-dev.104",
|
|
28
|
+
"@itwin/core-i18n": "^3.0.0-dev.104",
|
|
29
|
+
"@itwin/core-quantity": "^3.0.0-dev.104",
|
|
30
|
+
"@itwin/appui-abstract": "^3.0.0-dev.104",
|
|
31
|
+
"@itwin/core-react": "^3.0.0-dev.104",
|
|
32
|
+
"@itwin/components-react": "^3.0.0-dev.104",
|
|
33
33
|
"react": "^17.0.0",
|
|
34
34
|
"react-dom": "^17.0.0"
|
|
35
35
|
},
|
|
@@ -38,17 +38,17 @@
|
|
|
38
38
|
"NOTE: All tools used by scripts in this package must be listed as devDependencies"
|
|
39
39
|
],
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@itwin/core-bentley": "3.0.0-dev.
|
|
42
|
-
"@itwin/build-tools": "3.0.0-dev.
|
|
43
|
-
"@itwin/eslint-plugin": "3.0.0-dev.
|
|
44
|
-
"@itwin/core-geometry": "3.0.0-dev.
|
|
45
|
-
"@itwin/core-common": "3.0.0-dev.
|
|
46
|
-
"@itwin/core-frontend": "3.0.0-dev.
|
|
47
|
-
"@itwin/core-i18n": "3.0.0-dev.
|
|
48
|
-
"@itwin/core-quantity": "3.0.0-dev.
|
|
49
|
-
"@itwin/appui-abstract": "3.0.0-dev.
|
|
50
|
-
"@itwin/core-react": "3.0.0-dev.
|
|
51
|
-
"@itwin/components-react": "3.0.0-dev.
|
|
41
|
+
"@itwin/core-bentley": "3.0.0-dev.104",
|
|
42
|
+
"@itwin/build-tools": "3.0.0-dev.104",
|
|
43
|
+
"@itwin/eslint-plugin": "3.0.0-dev.104",
|
|
44
|
+
"@itwin/core-geometry": "3.0.0-dev.104",
|
|
45
|
+
"@itwin/core-common": "3.0.0-dev.104",
|
|
46
|
+
"@itwin/core-frontend": "3.0.0-dev.104",
|
|
47
|
+
"@itwin/core-i18n": "3.0.0-dev.104",
|
|
48
|
+
"@itwin/core-quantity": "3.0.0-dev.104",
|
|
49
|
+
"@itwin/appui-abstract": "3.0.0-dev.104",
|
|
50
|
+
"@itwin/core-react": "3.0.0-dev.104",
|
|
51
|
+
"@itwin/components-react": "3.0.0-dev.104",
|
|
52
52
|
"@testing-library/react": "^12.0.0",
|
|
53
53
|
"@testing-library/react-hooks": "^3.2.1",
|
|
54
54
|
"@testing-library/user-event": "^13.2.1",
|
|
@@ -100,8 +100,8 @@
|
|
|
100
100
|
],
|
|
101
101
|
"dependencies": {
|
|
102
102
|
"@bentley/icons-generic-webfont": "^1.0.15",
|
|
103
|
-
"@itwin/itwinui-css": "^0.
|
|
104
|
-
"@itwin/itwinui-react": "^1.
|
|
103
|
+
"@itwin/itwinui-css": "^0.37.0",
|
|
104
|
+
"@itwin/itwinui-react": "^1.23.0",
|
|
105
105
|
"callable-instance2": "1.0.0",
|
|
106
106
|
"classnames": "^2.3.1",
|
|
107
107
|
"eventemitter2": "^5.0.1",
|