react-asc 25.15.3 → 25.16.0
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/index.d.ts +15 -2
- package/index.es.js +44 -2
- package/index.js +44 -1
- package/lib/components/Grid/Row/Row.d.ts +2 -1
- package/lib/enums/index.d.ts +1 -0
- package/lib/enums/screensize.enum.d.ts +7 -0
- package/lib/hooks/index.d.ts +1 -0
- package/lib/hooks/useScreenSizeDetect.d.ts +4 -0
- package/package.json +1 -1
- package/react-asc.scss +5 -5
package/index.d.ts
CHANGED
|
@@ -18,6 +18,14 @@ declare enum POSITION {
|
|
|
18
18
|
left = "left"
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
+
declare enum ScreenSize {
|
|
22
|
+
xs = "xs",
|
|
23
|
+
sm = "sm",
|
|
24
|
+
md = "md",
|
|
25
|
+
lg = "lg",
|
|
26
|
+
xxl = "xxl"
|
|
27
|
+
}
|
|
28
|
+
|
|
21
29
|
declare enum SIZE {
|
|
22
30
|
sm = "sm",
|
|
23
31
|
md = "md",
|
|
@@ -450,8 +458,9 @@ interface IColProps extends React$1.ComponentProps<'div'> {
|
|
|
450
458
|
}
|
|
451
459
|
declare const Column: (props: IColProps) => JSX.Element;
|
|
452
460
|
|
|
461
|
+
type TRowDirection = 'row' | 'column';
|
|
453
462
|
interface IContainerProps extends React$1.ComponentProps<'div'> {
|
|
454
|
-
direction?:
|
|
463
|
+
direction?: TRowDirection;
|
|
455
464
|
}
|
|
456
465
|
declare const Row: ({ children, direction, className, ...rest }: IContainerProps) => JSX.Element;
|
|
457
466
|
|
|
@@ -1006,6 +1015,10 @@ declare const useOnDestroy: (callBack: () => void) => void;
|
|
|
1006
1015
|
|
|
1007
1016
|
declare function usePrevious<T>(value: T): T | undefined;
|
|
1008
1017
|
|
|
1018
|
+
declare function useScreenSizeDetect(): {
|
|
1019
|
+
screenSize: ScreenSize;
|
|
1020
|
+
};
|
|
1021
|
+
|
|
1009
1022
|
interface IUseWindowSize {
|
|
1010
1023
|
width: number;
|
|
1011
1024
|
height: number;
|
|
@@ -1127,4 +1140,4 @@ declare global {
|
|
|
1127
1140
|
}
|
|
1128
1141
|
}
|
|
1129
1142
|
|
|
1130
|
-
export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Color, Column, type ColumnSize, ConditionalWrapper, CssTransition, DATEMODE, DatePicker, DateSelect, DaySelect, Dot, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FileService, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, type HtmlBaseProps, type HtmlInputProps, type IAlertProps, type IAppBarProps, type IAppBarTitleProps, type IAutoCompleteProps, type IBackdropProps, type IBadgeProps, type IBreadcrumbItemProps, type IBreadcrumbProps, type IButtonContext, type IButtonGroupProps, type IButtonProps, type ICheckboxProps, type IChipProps, type IContainerProps, type IControls, type IDatePickerProps, type IDateSelectProps, type IDaySelectProps, type IDictionary, type IDot, type IDrawerProps, type IExpansionPanelContentProps, type IExpansionPanelHeaderProps, type IExpansionPanelProps, type IFileInputProps, type IFileUnparseConfig, type IFloatingActionButtonProps, type IFormAutoCompleteOptions, type IFormControlConfig, type IFormControlType, type IFormInputError, type IFormInputEvent, type IFormInputOptions, type IFormInputProps, type IFormProps, type IFormSelectOptions, type IFormState, type IFormTextAreaOptions, type IFormValidatorType, type IHourProps, type IIconButtonProps, type IIconProps, type IListItemProps, type IListProps, type ILoadingIndicatorContainerProps, type ILoadingIndicatorService, type ILoggerService, type IMenuBodyProps, type IMenuProps, type IMilliSecondProps, type IMinuteProps, type IModalButton, type IModalOptions, type IModalProps$1 as IModalProps, type IModalService, type IMonthProps, type INumberSelectProps, type IPortalProps, type IProgressBarProps, type ISecondProps, type ISelectOption, type ISelectProps, type ISidebarItem, type ISkeletonAvatarProps, type ISkeletonFooterProps, type ISkeletonImageProps, type ISkeletonTextProps, type ISnackbarOptions, type ISnackbarProps, type ISnackbarService, type ISpeedDialActionProps, type ISpeedDialIconProps, type ISpeedDialProps, type IStepProps, type IStepperActionsProps, type IStepperProps, type ITabPanelProps, type ITabProps, type ITableCellProps, type ITableProps, type ITabsProps, type ITextareaProps, type ITimeSelectProps, type ITooltipProps, type ITreeItemProps, type ITypographyProps, type IUseWindowSize, type IWrapperProps, type IYearProps, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemAvatarSize, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, LogType, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, type MenuPosition, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, type Nullable, NumberSelect, POSITION, PlusSolidIcon, Portal, ProgressBar, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TooltipPlacement, TreeItem, TreeView, Typography, VARIANT, YearSelect, clipboardService, fileService, loadingIndicatorService, localService, loggerService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, usePrevious, useWindowSize };
|
|
1143
|
+
export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Color, Column, type ColumnSize, ConditionalWrapper, CssTransition, DATEMODE, DatePicker, DateSelect, DaySelect, Dot, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FileService, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, type HtmlBaseProps, type HtmlInputProps, type IAlertProps, type IAppBarProps, type IAppBarTitleProps, type IAutoCompleteProps, type IBackdropProps, type IBadgeProps, type IBreadcrumbItemProps, type IBreadcrumbProps, type IButtonContext, type IButtonGroupProps, type IButtonProps, type ICheckboxProps, type IChipProps, type IContainerProps, type IControls, type IDatePickerProps, type IDateSelectProps, type IDaySelectProps, type IDictionary, type IDot, type IDrawerProps, type IExpansionPanelContentProps, type IExpansionPanelHeaderProps, type IExpansionPanelProps, type IFileInputProps, type IFileUnparseConfig, type IFloatingActionButtonProps, type IFormAutoCompleteOptions, type IFormControlConfig, type IFormControlType, type IFormInputError, type IFormInputEvent, type IFormInputOptions, type IFormInputProps, type IFormProps, type IFormSelectOptions, type IFormState, type IFormTextAreaOptions, type IFormValidatorType, type IHourProps, type IIconButtonProps, type IIconProps, type IListItemProps, type IListProps, type ILoadingIndicatorContainerProps, type ILoadingIndicatorService, type ILoggerService, type IMenuBodyProps, type IMenuProps, type IMilliSecondProps, type IMinuteProps, type IModalButton, type IModalOptions, type IModalProps$1 as IModalProps, type IModalService, type IMonthProps, type INumberSelectProps, type IPortalProps, type IProgressBarProps, type ISecondProps, type ISelectOption, type ISelectProps, type ISidebarItem, type ISkeletonAvatarProps, type ISkeletonFooterProps, type ISkeletonImageProps, type ISkeletonTextProps, type ISnackbarOptions, type ISnackbarProps, type ISnackbarService, type ISpeedDialActionProps, type ISpeedDialIconProps, type ISpeedDialProps, type IStepProps, type IStepperActionsProps, type IStepperProps, type ITabPanelProps, type ITabProps, type ITableCellProps, type ITableProps, type ITabsProps, type ITextareaProps, type ITimeSelectProps, type ITooltipProps, type ITreeItemProps, type ITypographyProps, type IUseWindowSize, type IWrapperProps, type IYearProps, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemAvatarSize, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, LogType, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, type MenuPosition, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, type Nullable, NumberSelect, POSITION, PlusSolidIcon, Portal, ProgressBar, Row, SIZE, STATUS, ScreenSize, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, type TRowDirection, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TooltipPlacement, TreeItem, TreeView, Typography, VARIANT, YearSelect, clipboardService, fileService, loadingIndicatorService, localService, loggerService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, usePrevious, useScreenSizeDetect, useWindowSize };
|
package/index.es.js
CHANGED
|
@@ -22,6 +22,15 @@ var POSITION;
|
|
|
22
22
|
POSITION["left"] = "left";
|
|
23
23
|
})(POSITION || (POSITION = {}));
|
|
24
24
|
|
|
25
|
+
var ScreenSize;
|
|
26
|
+
(function (ScreenSize) {
|
|
27
|
+
ScreenSize["xs"] = "xs";
|
|
28
|
+
ScreenSize["sm"] = "sm";
|
|
29
|
+
ScreenSize["md"] = "md";
|
|
30
|
+
ScreenSize["lg"] = "lg";
|
|
31
|
+
ScreenSize["xxl"] = "xxl";
|
|
32
|
+
})(ScreenSize || (ScreenSize = {}));
|
|
33
|
+
|
|
25
34
|
var SIZE;
|
|
26
35
|
(function (SIZE) {
|
|
27
36
|
SIZE["sm"] = "sm";
|
|
@@ -215,6 +224,34 @@ function usePrevious(value) {
|
|
|
215
224
|
return ref.current;
|
|
216
225
|
}
|
|
217
226
|
|
|
227
|
+
function useScreenSizeDetect() {
|
|
228
|
+
const [screenSize, setScreenSize] = useState(ScreenSize.md);
|
|
229
|
+
const windowSize = useWindowSize();
|
|
230
|
+
const checkScreenSize = (height, width) => {
|
|
231
|
+
if (height > 0 && width > 0) {
|
|
232
|
+
if (width <= 480) {
|
|
233
|
+
setScreenSize(ScreenSize.xs);
|
|
234
|
+
}
|
|
235
|
+
if (width >= 480 && width <= 768) {
|
|
236
|
+
setScreenSize(ScreenSize.sm);
|
|
237
|
+
}
|
|
238
|
+
if (width >= 768 && width <= 1024) {
|
|
239
|
+
setScreenSize(ScreenSize.md);
|
|
240
|
+
}
|
|
241
|
+
if (width >= 1024 && width <= 1200) {
|
|
242
|
+
setScreenSize(ScreenSize.lg);
|
|
243
|
+
}
|
|
244
|
+
if (width >= 1200) {
|
|
245
|
+
setScreenSize(ScreenSize.xxl);
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
};
|
|
249
|
+
useEffect(() => {
|
|
250
|
+
windowSize && checkScreenSize(windowSize.height, windowSize.width);
|
|
251
|
+
}, [windowSize]);
|
|
252
|
+
return { screenSize: screenSize };
|
|
253
|
+
}
|
|
254
|
+
|
|
218
255
|
const CaretDownSolidIcon = () => (jsx("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "caret-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: jsx("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
|
|
219
256
|
|
|
220
257
|
const CheckSolidIcon = () => (jsx("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx("path", { fill: "currentColor", d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" }) }));
|
|
@@ -5616,11 +5653,16 @@ var styles$y = {"row":"Row-module_row__bTIWp"};
|
|
|
5616
5653
|
styleInject(css_248z$y);
|
|
5617
5654
|
|
|
5618
5655
|
const Row = ({ children, direction = 'row', className, ...rest }) => {
|
|
5656
|
+
const [_direction, setDirection] = useState(direction);
|
|
5657
|
+
const { screenSize } = useScreenSizeDetect();
|
|
5658
|
+
useEffect(() => {
|
|
5659
|
+
setDirection(screenSize === ScreenSize.xs ? 'column' : 'row');
|
|
5660
|
+
}, [screenSize]);
|
|
5619
5661
|
const getCssClasses = () => {
|
|
5620
5662
|
const cssClasses = [];
|
|
5621
5663
|
cssClasses.push(styles$y.row);
|
|
5622
5664
|
className && cssClasses.push(className);
|
|
5623
|
-
direction && cssClasses.push(`flex-${
|
|
5665
|
+
direction && cssClasses.push(`flex-${_direction}`);
|
|
5624
5666
|
return cssClasses.filter(css => css).join(' ');
|
|
5625
5667
|
};
|
|
5626
5668
|
return (jsx("div", { className: getCssClasses(), ...rest, children: children }));
|
|
@@ -7257,4 +7299,4 @@ String.prototype.capitalize = function () {
|
|
|
7257
7299
|
return this.charAt(0).toUpperCase() + this.slice(1);
|
|
7258
7300
|
};
|
|
7259
7301
|
|
|
7260
|
-
export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Color, Column, ConditionalWrapper, CssTransition, DATEMODE, DatePicker, DateSelect, DaySelect, Dot, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FileService, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemAvatarSize, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, LogType, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Portal$1 as Portal, ProgressBar, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TooltipPlacement, TreeItem, TreeView, Typography, VARIANT, YearSelect, clipboardService, fileService, loadingIndicatorService, localService, loggerService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, usePrevious, useWindowSize };
|
|
7302
|
+
export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Color, Column, ConditionalWrapper, CssTransition, DATEMODE, DatePicker, DateSelect, DaySelect, Dot, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FileService, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemAvatarSize, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, LogType, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Portal$1 as Portal, ProgressBar, Row, SIZE, STATUS, ScreenSize, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TooltipPlacement, TreeItem, TreeView, Typography, VARIANT, YearSelect, clipboardService, fileService, loadingIndicatorService, localService, loggerService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, usePrevious, useScreenSizeDetect, useWindowSize };
|
package/index.js
CHANGED
|
@@ -24,6 +24,15 @@ exports.POSITION = void 0;
|
|
|
24
24
|
POSITION["left"] = "left";
|
|
25
25
|
})(exports.POSITION || (exports.POSITION = {}));
|
|
26
26
|
|
|
27
|
+
exports.ScreenSize = void 0;
|
|
28
|
+
(function (ScreenSize) {
|
|
29
|
+
ScreenSize["xs"] = "xs";
|
|
30
|
+
ScreenSize["sm"] = "sm";
|
|
31
|
+
ScreenSize["md"] = "md";
|
|
32
|
+
ScreenSize["lg"] = "lg";
|
|
33
|
+
ScreenSize["xxl"] = "xxl";
|
|
34
|
+
})(exports.ScreenSize || (exports.ScreenSize = {}));
|
|
35
|
+
|
|
27
36
|
exports.SIZE = void 0;
|
|
28
37
|
(function (SIZE) {
|
|
29
38
|
SIZE["sm"] = "sm";
|
|
@@ -217,6 +226,34 @@ function usePrevious(value) {
|
|
|
217
226
|
return ref.current;
|
|
218
227
|
}
|
|
219
228
|
|
|
229
|
+
function useScreenSizeDetect() {
|
|
230
|
+
const [screenSize, setScreenSize] = React.useState(exports.ScreenSize.md);
|
|
231
|
+
const windowSize = useWindowSize();
|
|
232
|
+
const checkScreenSize = (height, width) => {
|
|
233
|
+
if (height > 0 && width > 0) {
|
|
234
|
+
if (width <= 480) {
|
|
235
|
+
setScreenSize(exports.ScreenSize.xs);
|
|
236
|
+
}
|
|
237
|
+
if (width >= 480 && width <= 768) {
|
|
238
|
+
setScreenSize(exports.ScreenSize.sm);
|
|
239
|
+
}
|
|
240
|
+
if (width >= 768 && width <= 1024) {
|
|
241
|
+
setScreenSize(exports.ScreenSize.md);
|
|
242
|
+
}
|
|
243
|
+
if (width >= 1024 && width <= 1200) {
|
|
244
|
+
setScreenSize(exports.ScreenSize.lg);
|
|
245
|
+
}
|
|
246
|
+
if (width >= 1200) {
|
|
247
|
+
setScreenSize(exports.ScreenSize.xxl);
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
};
|
|
251
|
+
React.useEffect(() => {
|
|
252
|
+
windowSize && checkScreenSize(windowSize.height, windowSize.width);
|
|
253
|
+
}, [windowSize]);
|
|
254
|
+
return { screenSize: screenSize };
|
|
255
|
+
}
|
|
256
|
+
|
|
220
257
|
const CaretDownSolidIcon = () => (jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "caret-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
|
|
221
258
|
|
|
222
259
|
const CheckSolidIcon = () => (jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" }) }));
|
|
@@ -5618,11 +5655,16 @@ var styles$y = {"row":"Row-module_row__bTIWp"};
|
|
|
5618
5655
|
styleInject(css_248z$y);
|
|
5619
5656
|
|
|
5620
5657
|
const Row = ({ children, direction = 'row', className, ...rest }) => {
|
|
5658
|
+
const [_direction, setDirection] = React.useState(direction);
|
|
5659
|
+
const { screenSize } = useScreenSizeDetect();
|
|
5660
|
+
React.useEffect(() => {
|
|
5661
|
+
setDirection(screenSize === exports.ScreenSize.xs ? 'column' : 'row');
|
|
5662
|
+
}, [screenSize]);
|
|
5621
5663
|
const getCssClasses = () => {
|
|
5622
5664
|
const cssClasses = [];
|
|
5623
5665
|
cssClasses.push(styles$y.row);
|
|
5624
5666
|
className && cssClasses.push(className);
|
|
5625
|
-
direction && cssClasses.push(`flex-${
|
|
5667
|
+
direction && cssClasses.push(`flex-${_direction}`);
|
|
5626
5668
|
return cssClasses.filter(css => css).join(' ');
|
|
5627
5669
|
};
|
|
5628
5670
|
return (jsxRuntime.jsx("div", { className: getCssClasses(), ...rest, children: children }));
|
|
@@ -7392,4 +7434,5 @@ exports.useHover = useHover;
|
|
|
7392
7434
|
exports.useMobileDetect = useMobileDetect;
|
|
7393
7435
|
exports.useOnDestroy = useOnDestroy;
|
|
7394
7436
|
exports.usePrevious = usePrevious;
|
|
7437
|
+
exports.useScreenSizeDetect = useScreenSizeDetect;
|
|
7395
7438
|
exports.useWindowSize = useWindowSize;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
export type TRowDirection = 'row' | 'column';
|
|
2
3
|
export interface IContainerProps extends React.ComponentProps<'div'> {
|
|
3
|
-
direction?:
|
|
4
|
+
direction?: TRowDirection;
|
|
4
5
|
}
|
|
5
6
|
export declare const Row: ({ children, direction, className, ...rest }: IContainerProps) => JSX.Element;
|
package/lib/enums/index.d.ts
CHANGED
package/lib/hooks/index.d.ts
CHANGED
package/package.json
CHANGED
package/react-asc.scss
CHANGED
|
@@ -322,11 +322,11 @@
|
|
|
322
322
|
font-weight: 700 !important;
|
|
323
323
|
}
|
|
324
324
|
|
|
325
|
-
@media (max-width:
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
}
|
|
325
|
+
// @media (max-width: 561px) {
|
|
326
|
+
// .flex-row {
|
|
327
|
+
// flex-direction: column !important;
|
|
328
|
+
// }
|
|
329
|
+
// }
|
|
330
330
|
|
|
331
331
|
@media (min-width: 768px) {
|
|
332
332
|
.justify-content-md-center {
|