@dreamcommerce/aurora 0.3.4-164 → 0.3.4-168
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/build/cjs/src/components/color_picker/index.js +6 -2
- package/build/cjs/src/components/color_picker/index.js.map +1 -1
- package/build/cjs/src/components/controls/components/textarea.js.map +1 -1
- package/build/esm/src/components/color_picker/index.js +6 -2
- package/build/esm/src/components/color_picker/index.js.map +1 -1
- package/build/esm/src/components/controls/components/textarea.js.map +1 -1
- package/build/esm/src/src/components/controls/components/textarea.d.ts +4 -0
- package/build/esm/src/src/components/controls/hoc/control_cell_selector/index.d.ts +4 -0
- package/build/esm/src/src/components/controls/hoc/control_checkbox/index.d.ts +16 -0
- package/build/esm/src/src/components/controls/hoc/control_checkbox_switch/index.d.ts +16 -0
- package/build/esm/src/src/components/controls/hoc/control_color_picker/index.d.ts +16 -0
- package/build/esm/src/src/components/controls/hoc/control_date_picker/index.d.ts +4 -0
- package/build/esm/src/src/components/controls/hoc/control_file_picker/index.d.ts +4 -0
- package/build/esm/src/src/components/controls/hoc/control_input/index.d.ts +19 -0
- package/build/esm/src/src/components/controls/hoc/control_multi_select/index.d.ts +4 -0
- package/build/esm/src/src/components/controls/hoc/control_radio/index.d.ts +16 -0
- package/build/esm/src/src/components/controls/hoc/control_radio_group/index.d.ts +4 -0
- package/build/esm/src/src/components/controls/hoc/control_range/index.d.ts +4 -0
- package/build/esm/src/src/components/controls/hoc/control_select/index.d.ts +19 -0
- package/build/esm/src/src/components/controls/hoc/control_tags_selector/index.d.ts +4 -0
- package/build/esm/src/src/components/controls/hoc/control_textarea/index.d.ts +19 -0
- package/build/esm/src/src/components/controls/index.d.ts +4 -0
- package/build/esm/src/src/components/date_picker/components/common_ranges.d.ts +3 -0
- package/build/esm/src/src/components/date_picker/components/month_controller.d.ts +4 -0
- package/build/esm/src/src/components/date_picker/components/pure_date_picker.d.ts +4 -0
- package/build/esm/src/src/components/date_picker/hoc/range_picker.d.ts +4 -0
- package/build/esm/src/src/components/date_picker/hoc/single_date_picker.d.ts +4 -0
- package/build/esm/src/src/components/date_picker/index.d.ts +7 -0
- package/build/esm/src/src/components/dropdown/components/option_multiple.d.ts +22 -0
- package/build/esm/src/src/components/dropdown/hoc/multiselect/index.d.ts +20 -0
- package/build/esm/src/src/components/dropdown/hoc/select/index.d.ts +20 -0
- package/build/esm/src/src/components/dropdown/index.d.ts +22 -0
- package/build/esm/src/src/components/tags_selector/index.d.ts +4 -0
- package/build/esm/src/src/index.d.ts +79 -0
- package/build/esm/src/stories/button/button.stories.d.ts +146 -0
- package/build/esm/src/stories/controls/control_cell_selector/control_cell_selector.stories.d.ts +90 -0
- package/build/esm/src/stories/controls/control_checkbox/checkbox.stories.d.ts +89 -0
- package/build/esm/src/stories/controls/control_checkbox_switch/checkbox_switch.stories.d.ts +89 -0
- package/build/esm/src/stories/controls/control_color_picker/control_color_picker.stories.d.ts +126 -0
- package/build/esm/src/stories/controls/control_date_picker/control_date_picker.stories.d.ts +164 -0
- package/build/esm/src/stories/controls/control_file_picker/control_file_picker.stories.d.ts +128 -0
- package/build/esm/src/stories/controls/control_input/control_input.stories.d.ts +184 -0
- package/build/esm/src/stories/controls/control_multi_select/control_multi_select.stories.d.ts +89 -0
- package/build/esm/src/stories/controls/control_radio/control_radio.stories.d.ts +127 -0
- package/build/esm/src/stories/controls/control_radio_group/control_radio.stories.d.ts +32 -0
- package/build/esm/src/stories/controls/control_range/control_range.stories.d.ts +71 -0
- package/build/esm/src/stories/controls/control_range_picker/control_range_picker.stories.d.ts +108 -0
- package/build/esm/src/stories/controls/control_select/control_select.stories.d.ts +108 -0
- package/build/esm/src/stories/controls/control_tags_selector/control_tags_selector.stories.d.ts +126 -0
- package/build/esm/src/stories/controls/control_textarea/control_textarea.stories.d.ts +146 -0
- package/build/esm/src/stories/data_table/data_table.stories.d.ts +33 -0
- package/build/esm/src/stories/dropdown/dropdown.stories.d.ts +127 -0
- package/build/esm/src/stories/flash_messenger/flash_messanger.stories.d.ts +31 -0
- package/build/esm/src/stories/gallery/gallery.stories.d.ts +33 -0
- package/build/esm/src/stories/grid/col.stories.d.ts +89 -0
- package/build/esm/src/stories/grid/grid.stories.d.ts +32 -0
- package/build/esm/src/stories/grid/main.stories.d.ts +71 -0
- package/build/esm/src/stories/grid/row.stories.d.ts +108 -0
- package/build/esm/src/stories/heading/heading.stories.d.ts +51 -0
- package/build/esm/src/stories/heading/subheadings.stories.d.ts +32 -0
- package/build/esm/src/stories/hint/hint.stories.d.ts +70 -0
- package/build/esm/src/stories/loader/loader.stories.d.ts +70 -0
- package/build/esm/src/stories/message_box/message_box.stories.d.ts +50 -0
- package/build/esm/src/stories/modal/modal.stories.d.ts +126 -0
- package/build/esm/src/stories/modal/modal_absolute_positioning.stories.d.ts +183 -0
- package/build/esm/src/stories/modal/modal_animations.stories.d.ts +202 -0
- package/build/esm/src/stories/modal/modal_relative_positioning.stories.d.ts +88 -0
- package/build/esm/src/stories/modal/modal_structure.stories.d.ts +31 -0
- package/build/esm/src/stories/multiselect_stories/multiselect.stories.d.ts +281 -0
- package/build/esm/src/stories/select_stories/select.stories.d.ts +281 -0
- package/build/esm/src/stories/spacing/spacing.stories.d.ts +89 -0
- package/build/esm/src/stories/table/table.stories.d.ts +91 -0
- package/build/esm/src/stories/tabs/tabs.stories.d.ts +71 -0
- package/build/esm/src/stories/tag/tag.stories.d.ts +51 -0
- package/build/esm/src/stories/tags_selector/tags_selector.stories.d.ts +108 -0
- package/build/esm/src/stories/with_loader/with_loader.stories.d.ts +51 -0
- package/package.json +1 -1
|
@@ -71,11 +71,15 @@ var PureColorPicker = function (_a) {
|
|
|
71
71
|
var classes = useStyles({ color: color, saturationLightnessPointer: saturationLightnessPointer, hueSliderPointer: hueSliderPointer, screenName: screenName });
|
|
72
72
|
var inputOnChange = function (event) {
|
|
73
73
|
var value = event.target.value;
|
|
74
|
+
var hexValue = value.charAt(0) !== '#' ? "#" + value : value;
|
|
74
75
|
if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current) || !(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
|
|
75
76
|
return;
|
|
76
77
|
}
|
|
78
|
+
if (value !== hexValue) {
|
|
79
|
+
event.target.value = hexValue;
|
|
80
|
+
}
|
|
77
81
|
try {
|
|
78
|
-
var color_1 = utilities.getColorFromHex(
|
|
82
|
+
var color_1 = utilities.getColorFromHex(hexValue);
|
|
79
83
|
var _a = utilities.getIndicatorPositionsFromHEX({
|
|
80
84
|
hueSliderRef: hueSliderRef,
|
|
81
85
|
saturationLightnessPanelRef: saturationLightnessPanelRef,
|
|
@@ -86,7 +90,7 @@ var PureColorPicker = function (_a) {
|
|
|
86
90
|
setHueSliderPointer(hueSliderPointer_1);
|
|
87
91
|
}
|
|
88
92
|
catch (e) {
|
|
89
|
-
setColor(_tslib.__assign(_tslib.__assign({}, color), { hex:
|
|
93
|
+
setColor(_tslib.__assign(_tslib.__assign({}, color), { hex: hexValue }));
|
|
90
94
|
}
|
|
91
95
|
};
|
|
92
96
|
var restoreInitialColor = function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/color_picker/index.tsx"],"sourcesContent":["import React, { ChangeEvent, useContext, useRef } from 'react';\nimport { createUseStyles } from 'react-jss';\nimport Input from '@components/controls/components/input';\nimport styles from '@css/color_picker/main.module.less';\nimport SaturationLightnessPicker from './components/saturation_lightness_picker';\nimport ColorPickerSlider from './components/hue_picker';\nimport ColorPickerButtons from './components/buttons';\nimport { getColorFromHex, getIndicatorPositionsFromHEX } from './utilities';\nimport { IColorPickerContextProps, IColorPickerProps, IPureColorPickerProps } from './types';\nimport { ColorPickerContext } from './context';\nimport { cssColorPicker, cssColorPickerPreview, cssColorPickerPreviewContainer } from '@components/color_picker/css_classes';\nimport { useColorPicker } from '@components/color_picker/use_color_picker';\n\nconst useStyles = createUseStyles({\n saturationLightnessPanel: {\n background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n },\n saturationLightnessPointer: {\n transform: ({ saturationLightnessPointer: { left, top } }) => `translate3d(${left - 10}px,${top - 10}px,0px)`,\n '& > div': {\n background: ({ color: { hex } }) => hex,\n },\n },\n preview: {\n background: ({ color: { hex } }) => hex,\n },\n huePointer: {\n transform: ({ hueSliderPointer: { top, left }, screenName }) =>\n screenName === 'xs' ? `translate3d(${left - 10}px,0px,0px)` : `translate3d(0px,${top - 10}px,0px)`,\n '& > div': {\n background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n },\n },\n colorPreview: {\n background: ({ color: { hex } }) => hex,\n },\n});\n\nexport const PureColorPicker: React.FC<IPureColorPickerProps> = ({ hideChooseCancelButtons }) => {\n const {\n color,\n setColor,\n initialColor,\n hueSliderPointer,\n saturationLightnessPointer,\n setHueSliderPointer,\n setSaturationLightnessPointer,\n screenName,\n } = useContext<IColorPickerContextProps>(ColorPickerContext);\n const saturationLightnessPanelRef = useRef<HTMLDivElement>(null);\n const hueSliderRef = useRef<HTMLDivElement>(null);\n const classes = useStyles({ color, saturationLightnessPointer, hueSliderPointer, screenName });\n\n const inputOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n if (!hueSliderRef?.current || !saturationLightnessPanelRef?.current) {\n return;\n }\n try {\n const color = getColorFromHex(
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/color_picker/index.tsx"],"sourcesContent":["import React, { ChangeEvent, useContext, useRef } from 'react';\nimport { createUseStyles } from 'react-jss';\nimport Input from '@components/controls/components/input';\nimport styles from '@css/color_picker/main.module.less';\nimport SaturationLightnessPicker from './components/saturation_lightness_picker';\nimport ColorPickerSlider from './components/hue_picker';\nimport ColorPickerButtons from './components/buttons';\nimport { getColorFromHex, getIndicatorPositionsFromHEX } from './utilities';\nimport { IColorPickerContextProps, IColorPickerProps, IPureColorPickerProps } from './types';\nimport { ColorPickerContext } from './context';\nimport { cssColorPicker, cssColorPickerPreview, cssColorPickerPreviewContainer } from '@components/color_picker/css_classes';\nimport { useColorPicker } from '@components/color_picker/use_color_picker';\n\nconst useStyles = createUseStyles({\n saturationLightnessPanel: {\n background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n },\n saturationLightnessPointer: {\n transform: ({ saturationLightnessPointer: { left, top } }) => `translate3d(${left - 10}px,${top - 10}px,0px)`,\n '& > div': {\n background: ({ color: { hex } }) => hex,\n },\n },\n preview: {\n background: ({ color: { hex } }) => hex,\n },\n huePointer: {\n transform: ({ hueSliderPointer: { top, left }, screenName }) =>\n screenName === 'xs' ? `translate3d(${left - 10}px,0px,0px)` : `translate3d(0px,${top - 10}px,0px)`,\n '& > div': {\n background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n },\n },\n colorPreview: {\n background: ({ color: { hex } }) => hex,\n },\n});\n\nexport const PureColorPicker: React.FC<IPureColorPickerProps> = ({ hideChooseCancelButtons }) => {\n const {\n color,\n setColor,\n initialColor,\n hueSliderPointer,\n saturationLightnessPointer,\n setHueSliderPointer,\n setSaturationLightnessPointer,\n screenName,\n } = useContext<IColorPickerContextProps>(ColorPickerContext);\n const saturationLightnessPanelRef = useRef<HTMLDivElement>(null);\n const hueSliderRef = useRef<HTMLDivElement>(null);\n const classes = useStyles({ color, saturationLightnessPointer, hueSliderPointer, screenName });\n\n const inputOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n const hexValue = value.charAt(0) !== '#' ? `#${value}` : value;\n if (!hueSliderRef?.current || !saturationLightnessPanelRef?.current) {\n return;\n }\n\n if (value !== hexValue) {\n event.target.value = hexValue;\n }\n\n try {\n const color = getColorFromHex(hexValue);\n const { saturationLightnessPointer, hueSliderPointer } = getIndicatorPositionsFromHEX({\n hueSliderRef,\n saturationLightnessPanelRef,\n hex: event.target.value,\n });\n setColor(color);\n setSaturationLightnessPointer(saturationLightnessPointer);\n setHueSliderPointer(hueSliderPointer);\n } catch (e) {\n setColor({ ...color, hex: hexValue });\n }\n };\n\n const restoreInitialColor = () => {\n setColor(initialColor);\n };\n\n return (\n <div className={`${styles[cssColorPicker]}`}>\n <SaturationLightnessPicker classes={classes} saturationLightnessPanelRef={saturationLightnessPanelRef} />\n <ColorPickerSlider hueSliderRef={hueSliderRef} classes={classes} />\n <div className={styles[cssColorPickerPreviewContainer]}>\n <div className={`${classes.preview} ${styles[cssColorPickerPreview]}`} />\n <div>\n <Input id=\"color-picker-id\" value={color?.hex} onChange={inputOnChange} />\n </div>\n </div>\n {!hideChooseCancelButtons && <ColorPickerButtons restoreInitialColor={restoreInitialColor} />}\n </div>\n );\n};\n\nexport default ({ initialColor, onChange, hideChooseCancelButtons, name }: IColorPickerProps) => {\n const colorPickerContext = useColorPicker({ initialColorHex: initialColor || '#ffffff', onChange });\n\n return (\n <ColorPickerContext.Provider value={colorPickerContext}>\n <input type=\"hidden\" name={name} />\n <PureColorPicker hideChooseCancelButtons={hideChooseCancelButtons} />\n </ColorPickerContext.Provider>\n );\n};\n"],"names":["createUseStyles","useRef","getColorFromHex","React","styles","cssColorPicker","SaturationLightnessPicker","ColorPickerSlider","cssColorPickerPreviewContainer","cssColorPickerPreview","Input","ColorPickerButtons","useColorPicker","ColorPickerContext"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.js","sources":["../../../../../../src/components/controls/components/textarea.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\n\nimport cssClasses from '@css/input/main.module.less';\nimport { ITextareaProps } from '../types';\nimport { cssControl, cssControlS, cssControlDisabled, cssControlReadonly } from '../css_classes';\n\nconst Textarea: React.FC<ITextareaProps> = ({\n id,\n name,\n padding,\n placeholder,\n value,\n disabled,\n readOnly,\n onChange,\n onKeyPress,\n ...props\n}): JSX.Element => {\n const inputClasses = classnames(cssClasses[cssControl], {\n [cssClasses[cssControlS]]: padding === 'small',\n [cssClasses[cssControlDisabled]]: disabled,\n [cssClasses[cssControlReadonly]]: readOnly
|
|
1
|
+
{"version":3,"file":"textarea.js","sources":["../../../../../../src/components/controls/components/textarea.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\n\nimport cssClasses from '@css/input/main.module.less';\nimport { ITextareaProps } from '../types';\nimport { cssControl, cssControlS, cssControlDisabled, cssControlReadonly } from '../css_classes';\n\nconst Textarea: React.FC<ITextareaProps> = ({\n id,\n name,\n padding,\n placeholder,\n value,\n disabled,\n readOnly,\n onChange,\n onKeyPress,\n ...props\n}): JSX.Element => {\n const inputClasses = classnames(cssClasses[cssControl], {\n [cssClasses[cssControlS]]: padding === 'small',\n [cssClasses[cssControlDisabled]]: disabled,\n [cssClasses[cssControlReadonly]]: readOnly,\n });\n\n return (\n <textarea\n {...props}\n className={inputClasses}\n id={id}\n name={name}\n defaultValue={value}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n onChange={onChange}\n onKeyPress={onKeyPress}\n ></textarea>\n );\n};\n\nexport default Textarea;\n"],"names":["classnames","cssClasses","cssControl","cssControlS","cssControlDisabled","cssControlReadonly","React"],"mappings":";;;;;;;;;;;;;;;IAOM,QAAQ,GAA6B,UAAC,EAW3C;;IAVG,IAAA,UAAE,EACF,cAAI,EACJ,oBAAO,EACP,4BAAW,EACX,gBAAK,EACL,sBAAQ,EACR,sBAAQ,EACR,sBAAQ,EACR,0BAAU,EACV,8HAAQ;IAER,IAAM,YAAY,GAAGA,8BAAU,CAACC,sBAAU,CAACC,sBAAU,CAAC;QAClD,GAACD,sBAAU,CAACE,uBAAW,CAAC,IAAG,OAAO,KAAK,OAAO;QAC9C,GAACF,sBAAU,CAACG,8BAAkB,CAAC,IAAG,QAAQ;QAC1C,GAACH,sBAAU,CAACI,8BAAkB,CAAC,IAAG,QAAQ;YAC5C,CAAC;IAEH,QACIC,wEACQ,KAAK,IACT,SAAS,EAAE,YAAY,EACvB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,IACd,EACd;AACN;;;;"}
|
|
@@ -63,11 +63,15 @@ var PureColorPicker = function (_a) {
|
|
|
63
63
|
var classes = useStyles({ color: color, saturationLightnessPointer: saturationLightnessPointer, hueSliderPointer: hueSliderPointer, screenName: screenName });
|
|
64
64
|
var inputOnChange = function (event) {
|
|
65
65
|
var value = event.target.value;
|
|
66
|
+
var hexValue = value.charAt(0) !== '#' ? "#" + value : value;
|
|
66
67
|
if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current) || !(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
|
|
67
68
|
return;
|
|
68
69
|
}
|
|
70
|
+
if (value !== hexValue) {
|
|
71
|
+
event.target.value = hexValue;
|
|
72
|
+
}
|
|
69
73
|
try {
|
|
70
|
-
var color_1 = getColorFromHex(
|
|
74
|
+
var color_1 = getColorFromHex(hexValue);
|
|
71
75
|
var _a = getIndicatorPositionsFromHEX({
|
|
72
76
|
hueSliderRef: hueSliderRef,
|
|
73
77
|
saturationLightnessPanelRef: saturationLightnessPanelRef,
|
|
@@ -78,7 +82,7 @@ var PureColorPicker = function (_a) {
|
|
|
78
82
|
setHueSliderPointer(hueSliderPointer_1);
|
|
79
83
|
}
|
|
80
84
|
catch (e) {
|
|
81
|
-
setColor(__assign(__assign({}, color), { hex:
|
|
85
|
+
setColor(__assign(__assign({}, color), { hex: hexValue }));
|
|
82
86
|
}
|
|
83
87
|
};
|
|
84
88
|
var restoreInitialColor = function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/color_picker/index.tsx"],"sourcesContent":["import React, { ChangeEvent, useContext, useRef } from 'react';\nimport { createUseStyles } from 'react-jss';\nimport Input from '@components/controls/components/input';\nimport styles from '@css/color_picker/main.module.less';\nimport SaturationLightnessPicker from './components/saturation_lightness_picker';\nimport ColorPickerSlider from './components/hue_picker';\nimport ColorPickerButtons from './components/buttons';\nimport { getColorFromHex, getIndicatorPositionsFromHEX } from './utilities';\nimport { IColorPickerContextProps, IColorPickerProps, IPureColorPickerProps } from './types';\nimport { ColorPickerContext } from './context';\nimport { cssColorPicker, cssColorPickerPreview, cssColorPickerPreviewContainer } from '@components/color_picker/css_classes';\nimport { useColorPicker } from '@components/color_picker/use_color_picker';\n\nconst useStyles = createUseStyles({\n saturationLightnessPanel: {\n background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n },\n saturationLightnessPointer: {\n transform: ({ saturationLightnessPointer: { left, top } }) => `translate3d(${left - 10}px,${top - 10}px,0px)`,\n '& > div': {\n background: ({ color: { hex } }) => hex,\n },\n },\n preview: {\n background: ({ color: { hex } }) => hex,\n },\n huePointer: {\n transform: ({ hueSliderPointer: { top, left }, screenName }) =>\n screenName === 'xs' ? `translate3d(${left - 10}px,0px,0px)` : `translate3d(0px,${top - 10}px,0px)`,\n '& > div': {\n background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n },\n },\n colorPreview: {\n background: ({ color: { hex } }) => hex,\n },\n});\n\nexport const PureColorPicker: React.FC<IPureColorPickerProps> = ({ hideChooseCancelButtons }) => {\n const {\n color,\n setColor,\n initialColor,\n hueSliderPointer,\n saturationLightnessPointer,\n setHueSliderPointer,\n setSaturationLightnessPointer,\n screenName,\n } = useContext<IColorPickerContextProps>(ColorPickerContext);\n const saturationLightnessPanelRef = useRef<HTMLDivElement>(null);\n const hueSliderRef = useRef<HTMLDivElement>(null);\n const classes = useStyles({ color, saturationLightnessPointer, hueSliderPointer, screenName });\n\n const inputOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n if (!hueSliderRef?.current || !saturationLightnessPanelRef?.current) {\n return;\n }\n try {\n const color = getColorFromHex(
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/color_picker/index.tsx"],"sourcesContent":["import React, { ChangeEvent, useContext, useRef } from 'react';\nimport { createUseStyles } from 'react-jss';\nimport Input from '@components/controls/components/input';\nimport styles from '@css/color_picker/main.module.less';\nimport SaturationLightnessPicker from './components/saturation_lightness_picker';\nimport ColorPickerSlider from './components/hue_picker';\nimport ColorPickerButtons from './components/buttons';\nimport { getColorFromHex, getIndicatorPositionsFromHEX } from './utilities';\nimport { IColorPickerContextProps, IColorPickerProps, IPureColorPickerProps } from './types';\nimport { ColorPickerContext } from './context';\nimport { cssColorPicker, cssColorPickerPreview, cssColorPickerPreviewContainer } from '@components/color_picker/css_classes';\nimport { useColorPicker } from '@components/color_picker/use_color_picker';\n\nconst useStyles = createUseStyles({\n saturationLightnessPanel: {\n background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n },\n saturationLightnessPointer: {\n transform: ({ saturationLightnessPointer: { left, top } }) => `translate3d(${left - 10}px,${top - 10}px,0px)`,\n '& > div': {\n background: ({ color: { hex } }) => hex,\n },\n },\n preview: {\n background: ({ color: { hex } }) => hex,\n },\n huePointer: {\n transform: ({ hueSliderPointer: { top, left }, screenName }) =>\n screenName === 'xs' ? `translate3d(${left - 10}px,0px,0px)` : `translate3d(0px,${top - 10}px,0px)`,\n '& > div': {\n background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`,\n },\n },\n colorPreview: {\n background: ({ color: { hex } }) => hex,\n },\n});\n\nexport const PureColorPicker: React.FC<IPureColorPickerProps> = ({ hideChooseCancelButtons }) => {\n const {\n color,\n setColor,\n initialColor,\n hueSliderPointer,\n saturationLightnessPointer,\n setHueSliderPointer,\n setSaturationLightnessPointer,\n screenName,\n } = useContext<IColorPickerContextProps>(ColorPickerContext);\n const saturationLightnessPanelRef = useRef<HTMLDivElement>(null);\n const hueSliderRef = useRef<HTMLDivElement>(null);\n const classes = useStyles({ color, saturationLightnessPointer, hueSliderPointer, screenName });\n\n const inputOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n const hexValue = value.charAt(0) !== '#' ? `#${value}` : value;\n if (!hueSliderRef?.current || !saturationLightnessPanelRef?.current) {\n return;\n }\n\n if (value !== hexValue) {\n event.target.value = hexValue;\n }\n\n try {\n const color = getColorFromHex(hexValue);\n const { saturationLightnessPointer, hueSliderPointer } = getIndicatorPositionsFromHEX({\n hueSliderRef,\n saturationLightnessPanelRef,\n hex: event.target.value,\n });\n setColor(color);\n setSaturationLightnessPointer(saturationLightnessPointer);\n setHueSliderPointer(hueSliderPointer);\n } catch (e) {\n setColor({ ...color, hex: hexValue });\n }\n };\n\n const restoreInitialColor = () => {\n setColor(initialColor);\n };\n\n return (\n <div className={`${styles[cssColorPicker]}`}>\n <SaturationLightnessPicker classes={classes} saturationLightnessPanelRef={saturationLightnessPanelRef} />\n <ColorPickerSlider hueSliderRef={hueSliderRef} classes={classes} />\n <div className={styles[cssColorPickerPreviewContainer]}>\n <div className={`${classes.preview} ${styles[cssColorPickerPreview]}`} />\n <div>\n <Input id=\"color-picker-id\" value={color?.hex} onChange={inputOnChange} />\n </div>\n </div>\n {!hideChooseCancelButtons && <ColorPickerButtons restoreInitialColor={restoreInitialColor} />}\n </div>\n );\n};\n\nexport default ({ initialColor, onChange, hideChooseCancelButtons, name }: IColorPickerProps) => {\n const colorPickerContext = useColorPicker({ initialColorHex: initialColor || '#ffffff', onChange });\n\n return (\n <ColorPickerContext.Provider value={colorPickerContext}>\n <input type=\"hidden\" name={name} />\n <PureColorPicker hideChooseCancelButtons={hideChooseCancelButtons} />\n </ColorPickerContext.Provider>\n );\n};\n"],"names":["ColorPickerSlider"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.js","sources":["../../../../../../src/components/controls/components/textarea.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\n\nimport cssClasses from '@css/input/main.module.less';\nimport { ITextareaProps } from '../types';\nimport { cssControl, cssControlS, cssControlDisabled, cssControlReadonly } from '../css_classes';\n\nconst Textarea: React.FC<ITextareaProps> = ({\n id,\n name,\n padding,\n placeholder,\n value,\n disabled,\n readOnly,\n onChange,\n onKeyPress,\n ...props\n}): JSX.Element => {\n const inputClasses = classnames(cssClasses[cssControl], {\n [cssClasses[cssControlS]]: padding === 'small',\n [cssClasses[cssControlDisabled]]: disabled,\n [cssClasses[cssControlReadonly]]: readOnly
|
|
1
|
+
{"version":3,"file":"textarea.js","sources":["../../../../../../src/components/controls/components/textarea.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\n\nimport cssClasses from '@css/input/main.module.less';\nimport { ITextareaProps } from '../types';\nimport { cssControl, cssControlS, cssControlDisabled, cssControlReadonly } from '../css_classes';\n\nconst Textarea: React.FC<ITextareaProps> = ({\n id,\n name,\n padding,\n placeholder,\n value,\n disabled,\n readOnly,\n onChange,\n onKeyPress,\n ...props\n}): JSX.Element => {\n const inputClasses = classnames(cssClasses[cssControl], {\n [cssClasses[cssControlS]]: padding === 'small',\n [cssClasses[cssControlDisabled]]: disabled,\n [cssClasses[cssControlReadonly]]: readOnly,\n });\n\n return (\n <textarea\n {...props}\n className={inputClasses}\n id={id}\n name={name}\n defaultValue={value}\n placeholder={placeholder}\n disabled={disabled}\n readOnly={readOnly}\n onChange={onChange}\n onKeyPress={onKeyPress}\n ></textarea>\n );\n};\n\nexport default Textarea;\n"],"names":[],"mappings":";;;;;;IAOM,QAAQ,GAA6B,UAAC,EAW3C;;IAVG,IAAA,UAAE,EACF,cAAI,EACJ,oBAAO,EACP,4BAAW,EACX,gBAAK,EACL,sBAAQ,EACR,sBAAQ,EACR,sBAAQ,EACR,0BAAU,EACV,uHAAQ;IAER,IAAM,YAAY,GAAG,UAAU,CAAC,UAAU,CAAC,UAAU,CAAC;QAClD,GAAC,UAAU,CAAC,WAAW,CAAC,IAAG,OAAO,KAAK,OAAO;QAC9C,GAAC,UAAU,CAAC,kBAAkB,CAAC,IAAG,QAAQ;QAC1C,GAAC,UAAU,CAAC,kBAAkB,CAAC,IAAG,QAAQ;YAC5C,CAAC;IAEH,QACI,6CACQ,KAAK,IACT,SAAS,EAAE,YAAY,EACvB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,IACd,EACd;AACN;;;;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IControlCheckboxProps } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* @component
|
|
5
|
+
* @example
|
|
6
|
+
* return (
|
|
7
|
+
* <ControlCheckbox
|
|
8
|
+
* id="checkbox_example"
|
|
9
|
+
* label="Label"
|
|
10
|
+
* labelPosition="left"
|
|
11
|
+
* checked
|
|
12
|
+
* />
|
|
13
|
+
* )
|
|
14
|
+
*/
|
|
15
|
+
declare const ControlCheckbox: React.FC<IControlCheckboxProps>;
|
|
16
|
+
export default ControlCheckbox;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IControlCheckboxProps } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* @component
|
|
5
|
+
* @example
|
|
6
|
+
* return (
|
|
7
|
+
* <ControlCheckbox
|
|
8
|
+
* id="checkbox_example"
|
|
9
|
+
* label="Label"
|
|
10
|
+
* labelPosition="left"
|
|
11
|
+
* checked
|
|
12
|
+
* />
|
|
13
|
+
* )
|
|
14
|
+
*/
|
|
15
|
+
declare const ControlCheckboxSwitch: React.FC<IControlCheckboxProps>;
|
|
16
|
+
export default ControlCheckboxSwitch;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IControlColorPickerProps } from '@components/controls/types';
|
|
3
|
+
/**
|
|
4
|
+
* @component
|
|
5
|
+
* @example
|
|
6
|
+
* return (
|
|
7
|
+
* <ControlColorPicker
|
|
8
|
+
* initialColor="#FF00FF"
|
|
9
|
+
* name="Example color picker"
|
|
10
|
+
* isRequired
|
|
11
|
+
* label="Example color picker label"
|
|
12
|
+
* />
|
|
13
|
+
* )
|
|
14
|
+
*/
|
|
15
|
+
declare const ControlColorPicker: React.FC<IControlColorPickerProps>;
|
|
16
|
+
export default ControlColorPicker;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IControlInputProps } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* @component
|
|
5
|
+
* @example
|
|
6
|
+
* return (
|
|
7
|
+
* <ControlInput
|
|
8
|
+
* label="Label"
|
|
9
|
+
* isRequired={true}
|
|
10
|
+
* id="input_example"
|
|
11
|
+
* postfix="zł"
|
|
12
|
+
* placeholder="Enter text"
|
|
13
|
+
* value="example"
|
|
14
|
+
* onChange={() => {}}
|
|
15
|
+
* />
|
|
16
|
+
* )
|
|
17
|
+
*/
|
|
18
|
+
declare const ControlInput: React.FC<IControlInputProps>;
|
|
19
|
+
export default ControlInput;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IControlRadioProps } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* @component
|
|
5
|
+
* @example
|
|
6
|
+
* return (
|
|
7
|
+
* <ControlRadio
|
|
8
|
+
* id="checkbox_example"
|
|
9
|
+
* label="Label"
|
|
10
|
+
* labelPosition="left"
|
|
11
|
+
* checked
|
|
12
|
+
* />
|
|
13
|
+
* )
|
|
14
|
+
*/
|
|
15
|
+
declare const ControlRadio: React.FC<IControlRadioProps>;
|
|
16
|
+
export default ControlRadio;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IControlSelectProps } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* @component
|
|
5
|
+
* @example
|
|
6
|
+
* return (
|
|
7
|
+
* <ControlInput
|
|
8
|
+
* label="Label"
|
|
9
|
+
* isRequired={true}
|
|
10
|
+
* id="input_example"
|
|
11
|
+
* postfix="zł"
|
|
12
|
+
* placeholder="Enter text"
|
|
13
|
+
* value="example"
|
|
14
|
+
* onChange={() => {}}
|
|
15
|
+
* />
|
|
16
|
+
* )
|
|
17
|
+
*/
|
|
18
|
+
declare const ControlSelect: React.FC<IControlSelectProps>;
|
|
19
|
+
export default ControlSelect;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IControlTextareaProps } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* @component
|
|
5
|
+
* @example
|
|
6
|
+
* return (
|
|
7
|
+
* <ControlInput
|
|
8
|
+
* label="Label"
|
|
9
|
+
* isRequired={true}
|
|
10
|
+
* id="input_example"
|
|
11
|
+
* postfix="zł"
|
|
12
|
+
* placeholder="Enter text"
|
|
13
|
+
* value="example"
|
|
14
|
+
* onChange={() => {}}
|
|
15
|
+
* />
|
|
16
|
+
* )
|
|
17
|
+
*/
|
|
18
|
+
declare const ControlTextarea: React.FC<IControlTextareaProps>;
|
|
19
|
+
export default ControlTextarea;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { IDatepickerProps } from './types';
|
|
3
|
+
import RangePicker from './hoc/range_picker';
|
|
4
|
+
import SingleDatepicker from './hoc/single_date_picker';
|
|
5
|
+
export { RangePicker, SingleDatepicker };
|
|
6
|
+
declare const _default: ({ defaultDate, defaultRange, type, name, onChange, maxDate, minDate, maxRange, minRange, className, showButtons, showDefaultRanges, }: IDatepickerProps) => JSX.Element;
|
|
7
|
+
export default _default;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IDropdownOptionMultipleProps } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* Dropdown.OptionMultiple component. Should be only used within Dropdown.List
|
|
5
|
+
* @component
|
|
6
|
+
* @example
|
|
7
|
+
* const option = {
|
|
8
|
+
* text: 'Option 1',
|
|
9
|
+
* value: '1'
|
|
10
|
+
* }
|
|
11
|
+
*
|
|
12
|
+
* <Dropdown.OptionMultiple
|
|
13
|
+
* key="id1"
|
|
14
|
+
* option={option}
|
|
15
|
+
* isSelected={false}
|
|
16
|
+
* isDisabled={false}
|
|
17
|
+
* isReadonly={false}
|
|
18
|
+
* onClick={(option) => console.log(option)}
|
|
19
|
+
* />
|
|
20
|
+
*/
|
|
21
|
+
declare const OptionMultiple: React.FC<IDropdownOptionMultipleProps>;
|
|
22
|
+
export default OptionMultiple;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IMultiSelectProps } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* MultiSelect component. Build with Dropdown composed components.
|
|
5
|
+
*
|
|
6
|
+
* @component
|
|
7
|
+
* @example
|
|
8
|
+
* const options = [{
|
|
9
|
+
* text: 'Option 1',
|
|
10
|
+
* value: 'value1'
|
|
11
|
+
* }, {
|
|
12
|
+
* text: 'Option 2,,
|
|
13
|
+
* value: 'value2'
|
|
14
|
+
* }];
|
|
15
|
+
* return (
|
|
16
|
+
* <MultiSelect name="my_select_name" options={options} onChange={(option) => console.log(option)} />
|
|
17
|
+
* )
|
|
18
|
+
*/
|
|
19
|
+
declare const Multiple: React.FC<IMultiSelectProps>;
|
|
20
|
+
export default Multiple;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ISelectProps } from '../../types';
|
|
3
|
+
/**
|
|
4
|
+
* Select component. Build with Dropdown composed components.
|
|
5
|
+
*
|
|
6
|
+
* @component
|
|
7
|
+
* @example
|
|
8
|
+
* const options = [{
|
|
9
|
+
* text: 'Option 1',
|
|
10
|
+
* value: 'value1'
|
|
11
|
+
* }, {
|
|
12
|
+
* text: 'Option 2,,
|
|
13
|
+
* value: 'value2'
|
|
14
|
+
* }];
|
|
15
|
+
* return (
|
|
16
|
+
* <Select name="my_select_name" options={options} onChange={(option) => console.log(option)} />
|
|
17
|
+
* )
|
|
18
|
+
*/
|
|
19
|
+
declare const Select: React.FC<ISelectProps>;
|
|
20
|
+
export default Select;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IDropdownProps, IDropdownComposition } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Dropdown composition component. Provides several Dropdown dependant components which can be composed to create selects, multiselects or dropdowns.
|
|
5
|
+
*
|
|
6
|
+
* @component
|
|
7
|
+
* @example
|
|
8
|
+
* return (
|
|
9
|
+
* <Dropdown>
|
|
10
|
+
* <Dropdown.Label label="Wybierz link" />
|
|
11
|
+
* <Dropdown.Content>
|
|
12
|
+
* <Dropdown.List>
|
|
13
|
+
* <Dropdown.Link text="shoper.pl" href="https://shoper.pl" />
|
|
14
|
+
* <Dropdown.Link text="forum.shoper.pl" href="https://forum.shoper.pl" />
|
|
15
|
+
* <Dropdown.Link text="shoper.pl/help" href="https://shoper.pl/help" />
|
|
16
|
+
* </Dropdown.List>
|
|
17
|
+
* </Dropdown.Content>
|
|
18
|
+
* <Dropdown>
|
|
19
|
+
* )
|
|
20
|
+
*/
|
|
21
|
+
declare const Dropdown: React.FC<IDropdownProps> & IDropdownComposition;
|
|
22
|
+
export default Dropdown;
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import './i18n';
|
|
2
|
+
/**
|
|
3
|
+
* import components for export
|
|
4
|
+
*/
|
|
5
|
+
import Button from '@components/button';
|
|
6
|
+
import ButtonsGroup from '@components/buttons_group';
|
|
7
|
+
import ColorPicker from '@components/color_picker';
|
|
8
|
+
import ControlInput from '@components/controls/hoc/control_input';
|
|
9
|
+
import ControlCheckbox from '@components/controls/hoc/control_checkbox';
|
|
10
|
+
import ControlCheckboxSwitch from '@components/controls/hoc/control_checkbox_switch';
|
|
11
|
+
import ControlRadio from '@components/controls/hoc/control_radio';
|
|
12
|
+
import ControlRange from '@components/controls/hoc/control_range';
|
|
13
|
+
import ControlDatepicker from '@components/controls/hoc/control_date_picker';
|
|
14
|
+
import ControlColorPicker from '@components/controls/hoc/control_color_picker';
|
|
15
|
+
import ControlTagsSelector from '@components/controls/hoc/control_tags_selector';
|
|
16
|
+
import ControlTextarea from '@components/controls/hoc/control_textarea';
|
|
17
|
+
import ControlSelect from '@components/controls/hoc/control_select';
|
|
18
|
+
import ControlMultiSelect from '@components/controls/hoc/control_multi_select';
|
|
19
|
+
import ControlFilePicker from '@components/controls/hoc/control_file_picker';
|
|
20
|
+
import ControlCellSelector from '@components/controls/hoc/control_cell_selector';
|
|
21
|
+
import Datepicker from '@components/date_picker';
|
|
22
|
+
import Dropdown from '@components/dropdown';
|
|
23
|
+
import Gallery from '@components/gallery';
|
|
24
|
+
import Grid from '@components/grid';
|
|
25
|
+
import Heading from '@components/heading';
|
|
26
|
+
import Label from '@components/label';
|
|
27
|
+
import FilePicker from '@components/file_picker';
|
|
28
|
+
import ModalProvider from '@components/modal/hoc/modal_provider';
|
|
29
|
+
import AbsoluteModal from '@components/modal/hoc/absolute_modal';
|
|
30
|
+
import RelativeModal from '@components/modal/hoc/relative_modal';
|
|
31
|
+
import MultiSelect from '@components/dropdown/hoc/multiselect';
|
|
32
|
+
import Modal from '@components/modal';
|
|
33
|
+
import Select from '@components/dropdown/hoc/select';
|
|
34
|
+
import Spacing from '@components/spacing';
|
|
35
|
+
import Table from '@components/table';
|
|
36
|
+
import DataTable from '@components/table/hoc/data-table';
|
|
37
|
+
import { TabItem, Tabs } from '@components/tabs';
|
|
38
|
+
import Tag from '@components/tag';
|
|
39
|
+
import TagsSelector from '@components/tags_selector';
|
|
40
|
+
import Hint from '@components/hint';
|
|
41
|
+
import Loader from '@components/loader';
|
|
42
|
+
import WithLoader from '@components/with_loader';
|
|
43
|
+
/**
|
|
44
|
+
* Assets
|
|
45
|
+
*/
|
|
46
|
+
import IconCalendar from '@assets/icon_calendar';
|
|
47
|
+
import IconArrow from '@assets/icon_arrow';
|
|
48
|
+
import IconTick from '@assets/icon_tick';
|
|
49
|
+
/**
|
|
50
|
+
* import context for export
|
|
51
|
+
*/
|
|
52
|
+
import { DropdownContext } from '@components/dropdown/context';
|
|
53
|
+
import { ModalContext } from '@components/modal/context/modal_context';
|
|
54
|
+
/**
|
|
55
|
+
* import types for export
|
|
56
|
+
*/
|
|
57
|
+
import { IDropdownProps, ISelectOption } from '@components/dropdown/types';
|
|
58
|
+
import { IHeadingProps } from '@components/heading/types';
|
|
59
|
+
import { ICellProps, IIRowProps, ITableProps } from '@components/table/types';
|
|
60
|
+
import { IDropdownContext } from '@components/dropdown/context/types';
|
|
61
|
+
import ControlRadioGroup from '@components/controls/hoc/control_radio_group';
|
|
62
|
+
import { IControlRadioGroupOption } from '@components/controls/types';
|
|
63
|
+
import { IColor } from '@components/color_picker/types';
|
|
64
|
+
import { IDatepickerRange } from '@components/date_picker/types';
|
|
65
|
+
import { TFilePickerFile } from '@components/file_picker/types';
|
|
66
|
+
import MessageBox from '@components/message-box';
|
|
67
|
+
import FlashMessenger from '@components/flash_messenger';
|
|
68
|
+
import { TMessageBoxType } from '@components/message-box/types';
|
|
69
|
+
import { useFlashMessenger } from '@components/flash_messenger/context';
|
|
70
|
+
import { ILoaderProps } from '@components/loader/types';
|
|
71
|
+
import { IWithLoader } from '@components/with_loader/types';
|
|
72
|
+
/**
|
|
73
|
+
* export components
|
|
74
|
+
*/
|
|
75
|
+
export { Button, ButtonsGroup, Dropdown, Select, MultiSelect, Label, ControlInput, ControlCheckbox, ControlCheckboxSwitch, ControlRadio, ControlSelect, ControlRange, ControlMultiSelect, ControlTextarea, Gallery, Datepicker, ColorPicker, ControlColorPicker, ControlDatepicker, ControlFilePicker, Heading, Modal, ModalProvider, AbsoluteModal, RelativeModal, Tabs, TabItem, Tag, TagsSelector, ControlTagsSelector, Table, DataTable, Grid, DropdownContext, ModalContext, IconCalendar, Spacing, IconArrow, IconTick, FilePicker, ControlCellSelector, Hint, ControlRadioGroup, MessageBox, FlashMessenger, useFlashMessenger, Loader, WithLoader, };
|
|
76
|
+
/**
|
|
77
|
+
* export types
|
|
78
|
+
*/
|
|
79
|
+
export type { IDropdownProps, ISelectOption, IHeadingProps, ICellProps, IIRowProps, ITableProps, IDropdownContext, IControlRadioGroupOption, IColor, IDatepickerRange, TFilePickerFile, TMessageBoxType, ILoaderProps, IWithLoader, };
|