@chayns-components/color-picker 5.0.0-beta.570 → 5.0.0-beta.571
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/components/color-picker/ColorPicker.d.ts +23 -15
- package/lib/components/color-picker/ColorPicker.js +4 -0
- package/lib/components/color-picker/ColorPicker.js.map +1 -1
- package/lib/components/color-picker/color-picker-wrapper/ColorPickerWrapper.d.ts +3 -1
- package/lib/components/color-picker/color-picker-wrapper/ColorPickerWrapper.js +6 -3
- package/lib/components/color-picker/color-picker-wrapper/ColorPickerWrapper.js.map +1 -1
- package/lib/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.d.ts +1 -0
- package/lib/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.js +8 -3
- package/lib/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { IPresetColor } from '../../types';
|
|
3
3
|
interface ColorPickerProps {
|
|
4
|
+
/**
|
|
5
|
+
* Colors the user can select from.
|
|
6
|
+
*/
|
|
7
|
+
presetColors?: IPresetColor[];
|
|
8
|
+
/**
|
|
9
|
+
* Function to be executed when a preset color is added.
|
|
10
|
+
*/
|
|
11
|
+
onPresetColorAdd?: (presetColor: IPresetColor) => void;
|
|
12
|
+
/**
|
|
13
|
+
* Function to be executed when a preset color is removed.
|
|
14
|
+
*/
|
|
15
|
+
onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;
|
|
4
16
|
/**
|
|
5
17
|
* Function to be executed when a color is selected.
|
|
6
18
|
*/
|
|
@@ -10,36 +22,32 @@ interface ColorPickerProps {
|
|
|
10
22
|
*/
|
|
11
23
|
selectedColor?: string;
|
|
12
24
|
/**
|
|
13
|
-
*
|
|
25
|
+
* Whether the ColorPicker should be displayed inside a popup.
|
|
14
26
|
*/
|
|
15
|
-
|
|
27
|
+
shouldShowAsPopup?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Whether the more options accordion should be displayed.
|
|
30
|
+
*/
|
|
31
|
+
shouldShowMoreOptions?: boolean;
|
|
16
32
|
/**
|
|
17
33
|
* Whether the preset colors should be displayed.
|
|
18
34
|
*/
|
|
19
35
|
shouldShowPresetColors?: boolean;
|
|
20
36
|
/**
|
|
21
|
-
*
|
|
37
|
+
* Whether the preview color should be displayed as text.
|
|
22
38
|
*/
|
|
23
|
-
|
|
39
|
+
shouldShowPreviewColorString?: boolean;
|
|
24
40
|
/**
|
|
25
|
-
*
|
|
41
|
+
* Whether the preview color should be displayed round.
|
|
26
42
|
*/
|
|
27
|
-
|
|
43
|
+
shouldShowRoundPreviewColor?: boolean;
|
|
28
44
|
/**
|
|
29
45
|
* Whether the transparency slider should be displayed.
|
|
30
46
|
*/
|
|
31
47
|
shouldShowTransparencySlider?: boolean;
|
|
32
|
-
/**
|
|
33
|
-
* Whether the more options accordion should be displayed.
|
|
34
|
-
*/
|
|
35
|
-
shouldShowMoreOptions?: boolean;
|
|
36
|
-
/**
|
|
37
|
-
* Whether the ColorPicker should be displayed inside a popup.
|
|
38
|
-
*/
|
|
39
|
-
shouldShowAsPopup?: boolean;
|
|
40
48
|
}
|
|
41
49
|
declare const ColorPicker: {
|
|
42
|
-
({ selectedColor, presetColors, onPresetColorRemove, onPresetColorAdd, shouldShowPresetColors, shouldShowAsPopup, shouldShowTransparencySlider, shouldShowMoreOptions, onSelect, }: ColorPickerProps): React.JSX.Element;
|
|
50
|
+
({ selectedColor, presetColors, onPresetColorRemove, onPresetColorAdd, shouldShowPresetColors, shouldShowAsPopup, shouldShowTransparencySlider, shouldShowMoreOptions, shouldShowRoundPreviewColor, shouldShowPreviewColorString, onSelect, }: ColorPickerProps): React.JSX.Element;
|
|
43
51
|
displayName: string;
|
|
44
52
|
};
|
|
45
53
|
export default ColorPicker;
|
|
@@ -12,12 +12,16 @@ const ColorPicker = _ref => {
|
|
|
12
12
|
shouldShowAsPopup = true,
|
|
13
13
|
shouldShowTransparencySlider = false,
|
|
14
14
|
shouldShowMoreOptions = false,
|
|
15
|
+
shouldShowRoundPreviewColor = true,
|
|
16
|
+
shouldShowPreviewColorString = true,
|
|
15
17
|
onSelect
|
|
16
18
|
} = _ref;
|
|
17
19
|
return /*#__PURE__*/React.createElement(ColorPickerProvider, {
|
|
18
20
|
selectedColor: selectedColor,
|
|
19
21
|
onSelect: onSelect
|
|
20
22
|
}, /*#__PURE__*/React.createElement(StyledColorPicker, null, /*#__PURE__*/React.createElement(ColorPickerWrapper, {
|
|
23
|
+
shouldShowPreviewColorString: shouldShowPreviewColorString,
|
|
24
|
+
shouldShowRoundPreviewColor: shouldShowRoundPreviewColor,
|
|
21
25
|
shouldShowTransparencySlider: shouldShowTransparencySlider,
|
|
22
26
|
presetColors: presetColors,
|
|
23
27
|
onPresetColorAdd: onPresetColorAdd,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPicker.js","names":["React","ColorPickerProvider","ColorPickerWrapper","StyledColorPicker","ColorPicker","_ref","selectedColor","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowAsPopup","shouldShowTransparencySlider","shouldShowMoreOptions","onSelect","createElement","displayName"],"sources":["../../../src/components/color-picker/ColorPicker.tsx"],"sourcesContent":["import React from 'react';\nimport type { IPresetColor } from '../../types';\nimport ColorPickerProvider from '../ColorPickerProvider';\nimport ColorPickerWrapper from './color-picker-wrapper/ColorPickerWrapper';\nimport { StyledColorPicker } from './ColorPicker.styles';\n\ninterface ColorPickerProps {\n /**\n * Function to be executed when a color is
|
|
1
|
+
{"version":3,"file":"ColorPicker.js","names":["React","ColorPickerProvider","ColorPickerWrapper","StyledColorPicker","ColorPicker","_ref","selectedColor","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowAsPopup","shouldShowTransparencySlider","shouldShowMoreOptions","shouldShowRoundPreviewColor","shouldShowPreviewColorString","onSelect","createElement","displayName"],"sources":["../../../src/components/color-picker/ColorPicker.tsx"],"sourcesContent":["import React from 'react';\nimport type { IPresetColor } from '../../types';\nimport ColorPickerProvider from '../ColorPickerProvider';\nimport ColorPickerWrapper from './color-picker-wrapper/ColorPickerWrapper';\nimport { StyledColorPicker } from './ColorPicker.styles';\n\ninterface ColorPickerProps {\n /**\n * Colors the user can select from.\n */\n presetColors?: IPresetColor[];\n /**\n * Function to be executed when a preset color is added.\n */\n onPresetColorAdd?: (presetColor: IPresetColor) => void;\n /**\n * Function to be executed when a preset color is removed.\n */\n onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n /**\n * Function to be executed when a color is selected.\n */\n onSelect?: (color: string) => void;\n /**\n * The color that should be preselected.\n */\n selectedColor?: string;\n /**\n * Whether the ColorPicker should be displayed inside a popup.\n */\n shouldShowAsPopup?: boolean;\n /**\n * Whether the more options accordion should be displayed.\n */\n shouldShowMoreOptions?: boolean;\n /**\n * Whether the preset colors should be displayed.\n */\n shouldShowPresetColors?: boolean;\n /**\n * Whether the preview color should be displayed as text.\n */\n shouldShowPreviewColorString?: boolean;\n /**\n * Whether the preview color should be displayed round.\n */\n shouldShowRoundPreviewColor?: boolean;\n /**\n * Whether the transparency slider should be displayed.\n */\n shouldShowTransparencySlider?: boolean;\n}\n\nconst ColorPicker = ({\n selectedColor = 'rgba(255, 0, 0, 1)',\n presetColors,\n onPresetColorRemove,\n onPresetColorAdd,\n shouldShowPresetColors = false,\n shouldShowAsPopup = true,\n shouldShowTransparencySlider = false,\n shouldShowMoreOptions = false,\n shouldShowRoundPreviewColor = true,\n shouldShowPreviewColorString = true,\n onSelect,\n}: ColorPickerProps) => (\n <ColorPickerProvider selectedColor={selectedColor} onSelect={onSelect}>\n <StyledColorPicker>\n <ColorPickerWrapper\n shouldShowPreviewColorString={shouldShowPreviewColorString}\n shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n shouldShowTransparencySlider={shouldShowTransparencySlider}\n presetColors={presetColors}\n onPresetColorAdd={onPresetColorAdd}\n onPresetColorRemove={onPresetColorRemove}\n shouldShowAsPopup={shouldShowAsPopup}\n shouldShowMoreOptions={shouldShowMoreOptions}\n shouldShowPresetColors={shouldShowPresetColors}\n />\n </StyledColorPicker>\n </ColorPickerProvider>\n);\n\nColorPicker.displayName = 'ColorPicker';\n\nexport default ColorPicker;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,mBAAmB,MAAM,wBAAwB;AACxD,OAAOC,kBAAkB,MAAM,2CAA2C;AAC1E,SAASC,iBAAiB,QAAQ,sBAAsB;AAiDxD,MAAMC,WAAW,GAAGC,IAAA;EAAA,IAAC;IACjBC,aAAa,GAAG,oBAAoB;IACpCC,YAAY;IACZC,mBAAmB;IACnBC,gBAAgB;IAChBC,sBAAsB,GAAG,KAAK;IAC9BC,iBAAiB,GAAG,IAAI;IACxBC,4BAA4B,GAAG,KAAK;IACpCC,qBAAqB,GAAG,KAAK;IAC7BC,2BAA2B,GAAG,IAAI;IAClCC,4BAA4B,GAAG,IAAI;IACnCC;EACc,CAAC,GAAAX,IAAA;EAAA,oBACfL,KAAA,CAAAiB,aAAA,CAAChB,mBAAmB;IAACK,aAAa,EAAEA,aAAc;IAACU,QAAQ,EAAEA;EAAS,gBAClEhB,KAAA,CAAAiB,aAAA,CAACd,iBAAiB,qBACdH,KAAA,CAAAiB,aAAA,CAACf,kBAAkB;IACfa,4BAA4B,EAAEA,4BAA6B;IAC3DD,2BAA2B,EAAEA,2BAA4B;IACzDF,4BAA4B,EAAEA,4BAA6B;IAC3DL,YAAY,EAAEA,YAAa;IAC3BE,gBAAgB,EAAEA,gBAAiB;IACnCD,mBAAmB,EAAEA,mBAAoB;IACzCG,iBAAiB,EAAEA,iBAAkB;IACrCE,qBAAqB,EAAEA,qBAAsB;IAC7CH,sBAAsB,EAAEA;EAAuB,CAClD,CACc,CACF,CAAC;AAAA,CACzB;AAEDN,WAAW,CAACc,WAAW,GAAG,aAAa;AAEvC,eAAed,WAAW","ignoreList":[]}
|
|
@@ -8,9 +8,11 @@ interface ColorPickerWrapperProps {
|
|
|
8
8
|
shouldShowTransparencySlider: boolean;
|
|
9
9
|
shouldShowMoreOptions: boolean;
|
|
10
10
|
shouldShowAsPopup: boolean;
|
|
11
|
+
shouldShowPreviewColorString: boolean;
|
|
12
|
+
shouldShowRoundPreviewColor: boolean;
|
|
11
13
|
}
|
|
12
14
|
declare const ColorPickerWrapper: {
|
|
13
|
-
({ presetColors, onPresetColorRemove, onPresetColorAdd, shouldShowPresetColors, shouldShowAsPopup, shouldShowTransparencySlider, shouldShowMoreOptions, }: ColorPickerWrapperProps): React.JSX.Element;
|
|
15
|
+
({ presetColors, onPresetColorRemove, onPresetColorAdd, shouldShowPresetColors, shouldShowAsPopup, shouldShowTransparencySlider, shouldShowMoreOptions, shouldShowRoundPreviewColor, shouldShowPreviewColorString, }: ColorPickerWrapperProps): React.JSX.Element;
|
|
14
16
|
displayName: string;
|
|
15
17
|
};
|
|
16
18
|
export default ColorPickerWrapper;
|
|
@@ -11,7 +11,9 @@ const ColorPickerWrapper = _ref => {
|
|
|
11
11
|
shouldShowPresetColors,
|
|
12
12
|
shouldShowAsPopup,
|
|
13
13
|
shouldShowTransparencySlider,
|
|
14
|
-
shouldShowMoreOptions
|
|
14
|
+
shouldShowMoreOptions,
|
|
15
|
+
shouldShowRoundPreviewColor,
|
|
16
|
+
shouldShowPreviewColorString
|
|
15
17
|
} = _ref;
|
|
16
18
|
const {
|
|
17
19
|
selectedColor
|
|
@@ -27,8 +29,9 @@ const ColorPickerWrapper = _ref => {
|
|
|
27
29
|
return /*#__PURE__*/React.createElement(StyledColorPickerWrapper, null, shouldShowAsPopup ? /*#__PURE__*/React.createElement(Popup, {
|
|
28
30
|
content: content
|
|
29
31
|
}, /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfo, null, /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfoColor, {
|
|
30
|
-
$color: selectedColor
|
|
31
|
-
|
|
32
|
+
$color: selectedColor,
|
|
33
|
+
$shouldShowRoundPreviewColor: shouldShowRoundPreviewColor
|
|
34
|
+
}), shouldShowPreviewColorString && /*#__PURE__*/React.createElement(StyledColorPickerWrapperInfoText, null, selectedColor))) : content);
|
|
32
35
|
};
|
|
33
36
|
ColorPickerWrapper.displayName = 'ColorPickerWrapper';
|
|
34
37
|
export default ColorPickerWrapper;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerWrapper.js","names":["Popup","React","useContext","useMemo","ColorPickerContext","ColorPickerPopup","StyledColorPickerWrapper","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColor","StyledColorPickerWrapperInfoText","ColorPickerWrapper","_ref","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowAsPopup","shouldShowTransparencySlider","shouldShowMoreOptions","selectedColor","content","createElement","$color","displayName"],"sources":["../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.tsx"],"sourcesContent":["import { Popup } from '@chayns-components/core';\nimport React, { useContext, useMemo } from 'react';\nimport type { IPresetColor } from '../../../types';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport ColorPickerPopup from './color-picker-popup/ColorPickerPopup';\nimport {\n StyledColorPickerWrapper,\n StyledColorPickerWrapperInfo,\n StyledColorPickerWrapperInfoColor,\n StyledColorPickerWrapperInfoText,\n} from './ColorPickerWrapper.styles';\n\ninterface ColorPickerWrapperProps {\n presetColors?: IPresetColor[];\n shouldShowPresetColors: boolean;\n onPresetColorAdd?: (presetColor: IPresetColor) => void;\n onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n shouldShowTransparencySlider: boolean;\n shouldShowMoreOptions: boolean;\n shouldShowAsPopup: boolean;\n}\n\nconst ColorPickerWrapper = ({\n presetColors,\n onPresetColorRemove,\n onPresetColorAdd,\n shouldShowPresetColors,\n shouldShowAsPopup,\n shouldShowTransparencySlider,\n shouldShowMoreOptions,\n}: ColorPickerWrapperProps) => {\n const { selectedColor } = useContext(ColorPickerContext);\n\n const content = useMemo(\n () => (\n <ColorPickerPopup\n shouldShowPresetColors={shouldShowPresetColors}\n onPresetColorRemove={onPresetColorRemove}\n onPresetColorAdd={onPresetColorAdd}\n presetColors={presetColors}\n shouldShowMoreOptions={shouldShowMoreOptions}\n shouldShowTransparencySlider={shouldShowTransparencySlider}\n />\n ),\n [\n onPresetColorAdd,\n onPresetColorRemove,\n presetColors,\n shouldShowMoreOptions,\n shouldShowPresetColors,\n shouldShowTransparencySlider,\n ],\n );\n\n return (\n <StyledColorPickerWrapper>\n {shouldShowAsPopup ? (\n <Popup content={content}>\n <StyledColorPickerWrapperInfo>\n <StyledColorPickerWrapperInfoColor
|
|
1
|
+
{"version":3,"file":"ColorPickerWrapper.js","names":["Popup","React","useContext","useMemo","ColorPickerContext","ColorPickerPopup","StyledColorPickerWrapper","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColor","StyledColorPickerWrapperInfoText","ColorPickerWrapper","_ref","presetColors","onPresetColorRemove","onPresetColorAdd","shouldShowPresetColors","shouldShowAsPopup","shouldShowTransparencySlider","shouldShowMoreOptions","shouldShowRoundPreviewColor","shouldShowPreviewColorString","selectedColor","content","createElement","$color","$shouldShowRoundPreviewColor","displayName"],"sources":["../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.tsx"],"sourcesContent":["import { Popup } from '@chayns-components/core';\nimport React, { useContext, useMemo } from 'react';\nimport type { IPresetColor } from '../../../types';\nimport { ColorPickerContext } from '../../ColorPickerProvider';\nimport ColorPickerPopup from './color-picker-popup/ColorPickerPopup';\nimport {\n StyledColorPickerWrapper,\n StyledColorPickerWrapperInfo,\n StyledColorPickerWrapperInfoColor,\n StyledColorPickerWrapperInfoText,\n} from './ColorPickerWrapper.styles';\n\ninterface ColorPickerWrapperProps {\n presetColors?: IPresetColor[];\n shouldShowPresetColors: boolean;\n onPresetColorAdd?: (presetColor: IPresetColor) => void;\n onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;\n shouldShowTransparencySlider: boolean;\n shouldShowMoreOptions: boolean;\n shouldShowAsPopup: boolean;\n shouldShowPreviewColorString: boolean;\n shouldShowRoundPreviewColor: boolean;\n}\n\nconst ColorPickerWrapper = ({\n presetColors,\n onPresetColorRemove,\n onPresetColorAdd,\n shouldShowPresetColors,\n shouldShowAsPopup,\n shouldShowTransparencySlider,\n shouldShowMoreOptions,\n shouldShowRoundPreviewColor,\n shouldShowPreviewColorString,\n}: ColorPickerWrapperProps) => {\n const { selectedColor } = useContext(ColorPickerContext);\n\n const content = useMemo(\n () => (\n <ColorPickerPopup\n shouldShowPresetColors={shouldShowPresetColors}\n onPresetColorRemove={onPresetColorRemove}\n onPresetColorAdd={onPresetColorAdd}\n presetColors={presetColors}\n shouldShowMoreOptions={shouldShowMoreOptions}\n shouldShowTransparencySlider={shouldShowTransparencySlider}\n />\n ),\n [\n onPresetColorAdd,\n onPresetColorRemove,\n presetColors,\n shouldShowMoreOptions,\n shouldShowPresetColors,\n shouldShowTransparencySlider,\n ],\n );\n\n return (\n <StyledColorPickerWrapper>\n {shouldShowAsPopup ? (\n <Popup content={content}>\n <StyledColorPickerWrapperInfo>\n <StyledColorPickerWrapperInfoColor\n $color={selectedColor}\n $shouldShowRoundPreviewColor={shouldShowRoundPreviewColor}\n />\n {shouldShowPreviewColorString && (\n <StyledColorPickerWrapperInfoText>\n {selectedColor}\n </StyledColorPickerWrapperInfoText>\n )}\n </StyledColorPickerWrapperInfo>\n </Popup>\n ) : (\n content\n )}\n </StyledColorPickerWrapper>\n );\n};\n\nColorPickerWrapper.displayName = 'ColorPickerWrapper';\n\nexport default ColorPickerWrapper;\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,yBAAyB;AAC/C,OAAOC,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAElD,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,OAAOC,gBAAgB,MAAM,uCAAuC;AACpE,SACIC,wBAAwB,EACxBC,4BAA4B,EAC5BC,iCAAiC,EACjCC,gCAAgC,QAC7B,6BAA6B;AAcpC,MAAMC,kBAAkB,GAAGC,IAAA,IAUI;EAAA,IAVH;IACxBC,YAAY;IACZC,mBAAmB;IACnBC,gBAAgB;IAChBC,sBAAsB;IACtBC,iBAAiB;IACjBC,4BAA4B;IAC5BC,qBAAqB;IACrBC,2BAA2B;IAC3BC;EACqB,CAAC,GAAAT,IAAA;EACtB,MAAM;IAAEU;EAAc,CAAC,GAAGnB,UAAU,CAACE,kBAAkB,CAAC;EAExD,MAAMkB,OAAO,GAAGnB,OAAO,CACnB,mBACIF,KAAA,CAAAsB,aAAA,CAAClB,gBAAgB;IACbU,sBAAsB,EAAEA,sBAAuB;IAC/CF,mBAAmB,EAAEA,mBAAoB;IACzCC,gBAAgB,EAAEA,gBAAiB;IACnCF,YAAY,EAAEA,YAAa;IAC3BM,qBAAqB,EAAEA,qBAAsB;IAC7CD,4BAA4B,EAAEA;EAA6B,CAC9D,CACJ,EACD,CACIH,gBAAgB,EAChBD,mBAAmB,EACnBD,YAAY,EACZM,qBAAqB,EACrBH,sBAAsB,EACtBE,4BAA4B,CAEpC,CAAC;EAED,oBACIhB,KAAA,CAAAsB,aAAA,CAACjB,wBAAwB,QACpBU,iBAAiB,gBACdf,KAAA,CAAAsB,aAAA,CAACvB,KAAK;IAACsB,OAAO,EAAEA;EAAQ,gBACpBrB,KAAA,CAAAsB,aAAA,CAAChB,4BAA4B,qBACzBN,KAAA,CAAAsB,aAAA,CAACf,iCAAiC;IAC9BgB,MAAM,EAAEH,aAAc;IACtBI,4BAA4B,EAAEN;EAA4B,CAC7D,CAAC,EACDC,4BAA4B,iBACzBnB,KAAA,CAAAsB,aAAA,CAACd,gCAAgC,QAC5BY,aAC6B,CAEZ,CAC3B,CAAC,GAERC,OAEkB,CAAC;AAEnC,CAAC;AAEDZ,kBAAkB,CAACgB,WAAW,GAAG,oBAAoB;AAErD,eAAehB,kBAAkB","ignoreList":[]}
|
|
@@ -4,6 +4,7 @@ export declare const StyledColorPickerWrapper: import("styled-components").IStyl
|
|
|
4
4
|
export declare const StyledColorPickerWrapperInfo: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
5
5
|
type StyledColorPickerWrapperInfoColorProps = WithTheme<{
|
|
6
6
|
$color?: string;
|
|
7
|
+
$shouldShowRoundPreviewColor: boolean;
|
|
7
8
|
}>;
|
|
8
9
|
export declare const StyledColorPickerWrapperInfoColor: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
9
10
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
@@ -17,16 +17,21 @@ export const StyledColorPickerWrapperInfoColor = styled.div.attrs(_ref => {
|
|
|
17
17
|
})`
|
|
18
18
|
width: 15px;
|
|
19
19
|
aspect-ratio: 1;
|
|
20
|
-
border-radius:
|
|
20
|
+
border-radius: ${_ref2 => {
|
|
21
|
+
let {
|
|
22
|
+
$shouldShowRoundPreviewColor
|
|
23
|
+
} = _ref2;
|
|
24
|
+
return $shouldShowRoundPreviewColor ? '50px' : '0px';
|
|
25
|
+
}};
|
|
21
26
|
`;
|
|
22
27
|
export const StyledColorPickerWrapperInfoText = styled.div`
|
|
23
28
|
border-bottom-style: dashed;
|
|
24
29
|
border-bottom-width: 1px;
|
|
25
30
|
|
|
26
|
-
color: ${
|
|
31
|
+
color: ${_ref3 => {
|
|
27
32
|
let {
|
|
28
33
|
theme
|
|
29
|
-
} =
|
|
34
|
+
} = _ref3;
|
|
30
35
|
return theme.text;
|
|
31
36
|
}};
|
|
32
37
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPickerWrapper.styles.js","names":["styled","StyledColorPickerWrapper","div","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColor","attrs","_ref","$color","style","backgroundColor","StyledColorPickerWrapperInfoText","
|
|
1
|
+
{"version":3,"file":"ColorPickerWrapper.styles.js","names":["styled","StyledColorPickerWrapper","div","StyledColorPickerWrapperInfo","StyledColorPickerWrapperInfoColor","attrs","_ref","$color","style","backgroundColor","_ref2","$shouldShowRoundPreviewColor","StyledColorPickerWrapperInfoText","_ref3","theme","text"],"sources":["../../../../src/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\nexport const StyledColorPickerWrapper = styled.div``;\n\nexport const StyledColorPickerWrapperInfo = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n`;\n\ntype StyledColorPickerWrapperInfoColorProps = WithTheme<{\n $color?: string;\n $shouldShowRoundPreviewColor: boolean;\n}>;\n\nexport const StyledColorPickerWrapperInfoColor = styled.div.attrs<StyledColorPickerWrapperInfoColorProps>(\n ({ $color }) => ({\n style: {\n backgroundColor: $color,\n },\n }),\n)`\n width: 15px;\n aspect-ratio: 1;\n border-radius: ${({ $shouldShowRoundPreviewColor }) =>\n $shouldShowRoundPreviewColor ? '50px' : '0px'};\n`;\n\ntype StyledColorPickerWrapperInfoTextProps = WithTheme<unknown>;\n\nexport const StyledColorPickerWrapperInfoText = styled.div<StyledColorPickerWrapperInfoTextProps>`\n border-bottom-style: dashed;\n border-bottom-width: 1px;\n\n color: ${({ theme }: StyledColorPickerWrapperInfoTextProps) => theme.text};\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,wBAAwB,GAAGD,MAAM,CAACE,GAAI,EAAC;AAEpD,OAAO,MAAMC,4BAA4B,GAAGH,MAAM,CAACE,GAAI;AACvD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAME,iCAAiC,GAAGJ,MAAM,CAACE,GAAG,CAACG,KAAK,CAC7DC,IAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,IAAA;EAAA,OAAM;IACbE,KAAK,EAAE;MACHC,eAAe,EAAEF;IACrB;EACJ,CAAC;AAAA,CACL,CAAE;AACF;AACA;AACA,qBAAqBG,KAAA;EAAA,IAAC;IAAEC;EAA6B,CAAC,GAAAD,KAAA;EAAA,OAC9CC,4BAA4B,GAAG,MAAM,GAAG,KAAK;AAAA,CAAC;AACtD,CAAC;AAID,OAAO,MAAMC,gCAAgC,GAAGZ,MAAM,CAACE,GAA2C;AAClG;AACA;AACA;AACA,aAAaW,KAAA;EAAA,IAAC;IAAEC;EAA6C,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AAC9E,CAAC","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/color-picker",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.571",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"publishConfig": {
|
|
71
71
|
"access": "public"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "7e7b7ac59aabfe9145ce960e94dff896e324be9d"
|
|
74
74
|
}
|