Release: v1.1.0-alpha.7

package.json

@@ -1,6 +1,6 @@
 {
     "name": "ncore-ui-kit",
-    "version": "1.1.0-alpha.6",
+    "version": "1.1.0-alpha.7",
     "description": "NİBGAT® | NCore - UI Kit for React-Native Mobile Apps.",
     "main": "./lib/module/index.js",
     "types": "./lib/typescript/src/index.d.ts",

src/components/dateSelector/index.tsx

@@ -329,16 +329,21 @@ const DateSelector = ({
             >
                 {dayItem.dayNumber}
             </Text>
-            {isShowTodayIndicator && dayItem.isToday ? <View
-                style={[
-                    stylesheet.todayIndicator,
-                    selectionStyle,
-                    todayIndicatorDynamicStyle,
+            {
+                isShowTodayIndicator && dayItem.isToday ?
+                    <View
+                        style={[
+                            stylesheet.todayIndicator,
+                            selectionStyle,
+                            todayIndicatorDynamicStyle,
                     dayItem.isSelected ? {
                         borderColor: colors.content.border.subtle
                     } : null
-                ]}
-            /> : null}
+                        ]}
+                    />
+                :
+                    null
+            }
         </TouchableOpacity>;
     };
 

src/components/dateTimeSheet/index.tsx

@@ -254,10 +254,15 @@ const DateTimeSheet = ({
                     loadingContainerDynamicStyle
                 ]}
             >
-                {LoadingIconComponentProp ? <LoadingIconComponentProp
-                    color="emphasized"
-                    size={20}
-                /> : <Loading/>}
+                {
+                    LoadingIconComponentProp ?
+                        <LoadingIconComponentProp
+                            color="emphasized"
+                            size={20}
+                        />
+                    :
+                        <Loading/>
+                }
             </View>;
         }
 
@@ -270,21 +275,24 @@ const DateTimeSheet = ({
             {renderCalenderChangerTool()}
             {renderDateCalendar()}
             {
-                pickerType === "date" ? null : <TimeSelector
-                    isTimeSelectWorksWithCenterWhenTimePicker={isTimeSelectWorksWithCenterWhenTimePicker}
-                    multipleSelectMinimumRequireMS={multipleSelectMinimumRequireMS}
-                    multipleSelectMaximumMS={multipleSelectMaximumMS}
-                    setIsSheetContentReady={setIsSheetContentReady}
-                    selectMultipleObject={selectMultipleObject}
-                    isWorkWithSeconds={isWorkWithSeconds}
-                    selectObject={selectObject}
-                    pickerType={pickerType}
-                    dateRange={dateRange}
-                    maxDate={maxDate}
-                    minDate={minDate}
-                    variant={variant}
-                    date={date}
-                />
+                pickerType === "date" ?
+                    null
+                :
+                    <TimeSelector
+                        isTimeSelectWorksWithCenterWhenTimePicker={isTimeSelectWorksWithCenterWhenTimePicker}
+                        multipleSelectMinimumRequireMS={multipleSelectMinimumRequireMS}
+                        multipleSelectMaximumMS={multipleSelectMaximumMS}
+                        setIsSheetContentReady={setIsSheetContentReady}
+                        selectMultipleObject={selectMultipleObject}
+                        isWorkWithSeconds={isWorkWithSeconds}
+                        selectObject={selectObject}
+                        pickerType={pickerType}
+                        dateRange={dateRange}
+                        maxDate={maxDate}
+                        minDate={minDate}
+                        variant={variant}
+                        date={date}
+                    />
             }
         </View>;
     };
@@ -318,14 +326,19 @@ const DateTimeSheet = ({
                 toolsContainerDynamicStyle
             ]}
         >
-            {!minChoice ? <CheckBox
-                isChecked={isAnySelected ? "checked" : null}
-                title={localize("clean-selection")}
-                spreadBehaviour="free"
-                onPress={() => {
-                    clean();
-                }}
-            /> : null}
+            {
+                !minChoice ?
+                    <CheckBox
+                        isChecked={isAnySelected ? "checked" : null}
+                        title={localize("clean-selection")}
+                        spreadBehaviour="free"
+                        onPress={() => {
+                            clean();
+                        }}
+                    />
+                :
+                    null
+            }
             <Button
                 onPress={() => {
                     if(monthCalendarRef.current) monthCalendarRef.current.changeCurrentYear(new Date());
@@ -346,14 +359,19 @@ const DateTimeSheet = ({
                 headerContainerDynamicStyle
             ]}
         >
-            {title ? <Text
-                variant="titleMediumSize"
-                style={[
-                    headerTitleDynamicStyle
-                ]}
-            >
-                {title}
-            </Text> : null}
+            {
+                title ?
+                    <Text
+                        variant="titleMediumSize"
+                        style={[
+                            headerTitleDynamicStyle
+                        ]}
+                    >
+                        {title}
+                    </Text>
+                :
+                    null
+            }
             {renderTools()}
         </View>;
     };

src/components/embeddedMenu/components/menuButton/index.tsx

@@ -277,7 +277,7 @@ const EmbeddedMenuButton: FC<IEmbeddedMenuButton> = ({
                         />;
                     })}
                 </Animated.View>
-                :
+            :
                 null
         }
     </View>;

src/components/embeddedMenu/index.tsx

@@ -328,27 +328,37 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
                     headerContentContainerDynamicStyle
                 ]}
             >
-                {isShowSiteLogo ? renderSiteLogo ? renderSiteLogo() : <SiteLogo
-                    customLocalize={customLocalize}
-                    customTheme={customTheme}
-                    {...siteLogoProps}
-                    title={isActive ? siteLogoProps?.title : undefined}
-                    size={isActive ? siteLogoProps?.size : "small"}
-                    style={[
-                        siteLogoProps?.style,
-                        siteLogoDynamicStyle
-                    ]}
-                /> : <View
-                    style={stylesheet.emptyLogo}
-                />}
+                {
+                    isShowSiteLogo ?
+                        renderSiteLogo ? renderSiteLogo() : <SiteLogo
+                            customLocalize={customLocalize}
+                            customTheme={customTheme}
+                            {...siteLogoProps}
+                            title={isActive ? siteLogoProps?.title : undefined}
+                            size={isActive ? siteLogoProps?.size : "small"}
+                            style={[
+                                siteLogoProps?.style,
+                                siteLogoDynamicStyle
+                            ]}
+                        />
+                    :
+                        <View
+                            style={stylesheet.emptyLogo}
+                        />
+                }
                 {renderToggleCollapseForExpended()}
             </View>
-            {renderHeaderSeperator ? renderHeaderSeperator() : <Seperator
-                style={[
-                    stylesheet.seperator,
-                    seperatorDynamicStyle
-                ]}
-            />}
+            {
+                renderHeaderSeperator ?
+                    renderHeaderSeperator()
+                :
+                    <Seperator
+                        style={[
+                            stylesheet.seperator,
+                            seperatorDynamicStyle
+                        ]}
+                    />
+            }
         </View>;
     };
 
@@ -392,14 +402,19 @@ const Menu: RefForwardingComponent<IEmbeddedMenuRef, IEmbeddedMenuProps> = ({
     const renderSafeAreaContext = () => {
         if(!isWorkWithSafeAreaView) {
             return <Fragment>
-                {isWorkWithHeaderSpace && (configs.headerSpace || headerSpace) ? <View
-                    style={[
-                        stylesheet.headerSpacer,
-                        {
-                            height: headerSpace ? headerSpace : configs.headerSpace
-                        }
-                    ]}
-                /> : null}
+                {
+                    isWorkWithHeaderSpace && (configs.headerSpace || headerSpace) ?
+                        <View
+                            style={[
+                                stylesheet.headerSpacer,
+                                {
+                                    height: headerSpace ? headerSpace : configs.headerSpace
+                                }
+                            ]}
+                        />
+                    :
+                        null
+                }
                 {renderHeader()}
                 <ScrollView
                     showsHorizontalScrollIndicator={false}

src/components/mainHeader/index.tsx

@@ -158,15 +158,20 @@ const MainHeader = ({
             ]}
         >
             {isWorkWithSafeAreaView ? renderSafeAreaView() : renderContentContainer()}
-            {isWorkWithSticky && isWorkWithStickySpace ? <View
-                style={[
-                    stylesheet.stickySpacer,
-                    {
-                        backgroundColor: customBackgroundColor ? colors.project[customBackgroundColor] : colors.content.container[backgroundColor],
-                        height: contentHeight
-                    }
-                ]}
-            /> : null}
+            {
+                isWorkWithSticky && isWorkWithStickySpace ?
+                    <View
+                        style={[
+                            stylesheet.stickySpacer,
+                            {
+                                backgroundColor: customBackgroundColor ? colors.project[customBackgroundColor] : colors.content.container[backgroundColor],
+                                height: contentHeight
+                            }
+                        ]}
+                    />
+                :
+                    null
+            }
             {children}
         </View>;
     };

src/components/menu/components/menuButton/index.tsx

@@ -259,7 +259,7 @@ const MenuButton: FC<IMenuButton> = ({
                         />;
                     })}
                 </Animated.View>
-                :
+            :
                 null
         }
     </View>;

src/components/menu/index.tsx

@@ -290,20 +290,30 @@ const Menu: RefForwardingComponent<IMenuRef, IMenuProps> = ({
                 headerContainerDynamicStyle
             ]}
         >
-            {renderSiteLogo ? renderSiteLogo() : <SiteLogo
-                customLocalize={customLocalize}
-                customTheme={customTheme}
-                {...siteLogoProps}
-            />}
-            {renderHeaderSeperator ? renderHeaderSeperator() : <Seperator
-                {...seperatorProps}
-                length="100%"
-                style={[
-                    seperatorProps?.style,
-                    stylesheet.seperator,
-                    seperatorDynamicStyle
-                ]}
-            />}
+            {
+                renderSiteLogo ?
+                    renderSiteLogo()
+                :
+                    <SiteLogo
+                        customLocalize={customLocalize}
+                        customTheme={customTheme}
+                        {...siteLogoProps}
+                    />
+            }
+            {
+                renderHeaderSeperator ?
+                    renderHeaderSeperator()
+                :
+                    <Seperator
+                        {...seperatorProps}
+                        length="100%"
+                        style={[
+                            seperatorProps?.style,
+                            stylesheet.seperator,
+                            seperatorDynamicStyle
+                        ]}
+                    />
+            }
         </View>;
     };
 

src/components/monthSelector/index.tsx

@@ -359,16 +359,21 @@ const MonthSelector = ({
             >
                 {monthItem.title}
             </Text>
-            {isShowTodayIndicator && monthItem.isToday ? <View
-                style={[
-                    stylesheet.todayIndicator,
-                    selectionStyle,
-                    todayIndicatorDynamicStyle,
+            {
+                isShowTodayIndicator && monthItem.isToday ?
+                    <View
+                        style={[
+                            stylesheet.todayIndicator,
+                            selectionStyle,
+                            todayIndicatorDynamicStyle,
                     monthItem.isSelected ? {
                         borderColor: colors.content.border.subtle
                     } : null
-                ]}
-            /> : null}
+                        ]}
+                    />
+                :
+                    null
+            }
         </TouchableOpacity>;
     };
 

src/components/numericInput/index.tsx

@@ -396,15 +396,17 @@ const NumericInput: RefForwardingComponent<INumericInputRef, ITextInputProps> =
                 hideTextIconContainerDynamicStyle
             ]}
         >
-            {hideValue ?
-                <EyeIcon
-                    color={colors.content.icon[iconProps.color]}
-                    size={20}
-                /> :
-                <EyeClosedIcon
-                    color={colors.content.icon[iconProps.color]}
-                    size={20}
-                />
+            {
+                hideValue ?
+                    <EyeIcon
+                        color={colors.content.icon[iconProps.color]}
+                        size={20}
+                    />
+                :
+                    <EyeClosedIcon
+                        color={colors.content.icon[iconProps.color]}
+                        size={20}
+                    />
             }
         </TouchableOpacity>;
     };

src/components/selectSheet/index.tsx

@@ -97,10 +97,15 @@ function SelectSheet<T>({
                     loadingContainerDynamicStyle
                 ]}
             >
-                {LoadingIconComponentProp ? <LoadingIconComponentProp
-                    color="emphasized"
-                    size={20}
-                /> : <Loading/>}
+                {
+                    LoadingIconComponentProp ?
+                        <LoadingIconComponentProp
+                            color="emphasized"
+                            size={20}
+                        />
+                    :
+                        <Loading/>
+                }
             </View>;
         }
 
@@ -183,21 +188,30 @@ function SelectSheet<T>({
                                 checkIconContainerDynamicStyle
                             ]}
                         >
-                            {isSelected ?
-                                <CheckIcon
-                                    color={colors.content.icon.emphasized}
-                                    size={24}
-                                /> : null}
+                            {
+                                isSelected ?
+                                    <CheckIcon
+                                        color={colors.content.icon.emphasized}
+                                        size={24}
+                                    />
+                                :
+                                    null
+                            }
                         </View>
-                        {isDisabled ? <View
-                            style={[
-                                stylesheet.disabledOverlay,
-                                {
-                                    backgroundColor: colors.system.disabled.content,
-                                    borderRadius: radiuses.actions
-                                }
-                            ]}
-                        /> : null}
+                        {
+                            isDisabled ?
+                                <View
+                                    style={[
+                                        stylesheet.disabledOverlay,
+                                        {
+                                            backgroundColor: colors.system.disabled.content,
+                                            borderRadius: radiuses.actions
+                                        }
+                                    ]}
+                                />
+                            :
+                                null
+                        }
                     </TouchableOpacity>;
                 })
             }
@@ -239,23 +253,33 @@ function SelectSheet<T>({
                 toolsContainerDynamicStyle
             ]}
         >
-            {!minChoice ? <CheckBox
-                isChecked={mainSelectedItems.length === 0 ? "checked" : null}
-                title={localize("clean-all")}
-                spreadBehaviour="free"
-                onPress={() => {
-                    cleanAll();
-                }}
-            /> : null}
-            {maxChoice === -1 ? <CheckBox
-                isChecked={data.length === mainSelectedItems.length ? "checked" : mainSelectedItems.length ? "partially" : null}
-                title={localize("select-all")}
-                spreadBehaviour="free"
-                isFlip={!minChoice}
-                onPress={() => {
-                    selectAll();
-                }}
-            /> : null}
+            {
+                !minChoice ?
+                    <CheckBox
+                        isChecked={mainSelectedItems.length === 0 ? "checked" : null}
+                        title={localize("clean-all")}
+                        spreadBehaviour="free"
+                        onPress={() => {
+                            cleanAll();
+                        }}
+                    />
+                :
+                    null
+            }
+            {
+                maxChoice === -1 ?
+                    <CheckBox
+                        isChecked={data.length === mainSelectedItems.length ? "checked" : mainSelectedItems.length ? "partially" : null}
+                        title={localize("select-all")}
+                        spreadBehaviour="free"
+                        isFlip={!minChoice}
+                        onPress={() => {
+                            selectAll();
+                        }}
+                    />
+                :
+                    null
+            }
         </View>;
     };
 

src/components/siteLogo/index.tsx

@@ -227,7 +227,7 @@ const SiteLogo = ({
                     >
                         {subTitleKey ? subTitleKey : subTitle}
                     </Text>
-                    :
+                :
                     null
             }
         </View>;

src/components/snackBar/index.tsx

@@ -278,7 +278,7 @@ const SnackBar: FC<ISnackBarProps> = ({
                     >
                         {subTitle}
                     </Text>
-                    :
+                :
                     null
             }
         </View>;

src/components/textInput/index.tsx

@@ -329,15 +329,17 @@ const TextInput: RefForwardingComponent<ITextInputRef, ITextInputProps> = ({
                 hideTextIconContainerDynamicStyle
             ]}
         >
-            {hideValue ?
-                <EyeIcon
-                    color={colors.content.icon[iconProps.color]}
-                    size={20}
-                /> :
-                <EyeClosedIcon
-                    color={colors.content.icon[iconProps.color]}
-                    size={20}
-                />
+            {
+                hideValue ?
+                    <EyeIcon
+                        color={colors.content.icon[iconProps.color]}
+                        size={20}
+                    />
+                :
+                    <EyeClosedIcon
+                        color={colors.content.icon[iconProps.color]}
+                        size={20}
+                    />
             }
         </TouchableOpacity>;
     };

src/components/timeSelector/index.tsx

@@ -233,31 +233,34 @@ const TimeSelector = ({
                         rangeType="start"
                     />
                     {
-                        isWorkWithSeconds ? <Fragment>
-                            <Text
-                                variant="titleMediumSize"
-                                style={{
-                                    ...stylesheet.colonText,
-                                    ...colonTextDynamicStyle
-                                }}
-                            >
-                                :
-                            </Text>
-                            <TimeInput
-                                initialValue={dateRange?.start?.getSeconds().toString().padStart(2, "0")}
-                                isWorkWith24HoursFormat={isWorkWith24HoursFormat}
-                                selectMultipleObject={selectMultipleObject}
-                                setDateRangeValue={setDateRangeValue}
-                                rangeValidation={rangeValidation}
-                                setDateValue={setDateValue}
-                                selectObject={selectObject}
-                                timeType="seconds"
-                                variant={variant}
-                                maxDate={maxDate}
-                                minDate={minDate}
-                                rangeType="start"
-                            />
-                        </Fragment> : null
+                        isWorkWithSeconds ?
+                            <Fragment>
+                                <Text
+                                    variant="titleMediumSize"
+                                    style={{
+                                        ...stylesheet.colonText,
+                                        ...colonTextDynamicStyle
+                                    }}
+                                >
+                                    :
+                                </Text>
+                                <TimeInput
+                                    initialValue={dateRange?.start?.getSeconds().toString().padStart(2, "0")}
+                                    isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                                    selectMultipleObject={selectMultipleObject}
+                                    setDateRangeValue={setDateRangeValue}
+                                    rangeValidation={rangeValidation}
+                                    setDateValue={setDateValue}
+                                    selectObject={selectObject}
+                                    timeType="seconds"
+                                    variant={variant}
+                                    maxDate={maxDate}
+                                    minDate={minDate}
+                                    rangeType="start"
+                                />
+                            </Fragment>
+                        :
+                            null
                     }
                 </View>
                 <Text
@@ -313,31 +316,34 @@ const TimeSelector = ({
                         rangeType="end"
                     />
                     {
-                        isWorkWithSeconds ? <Fragment>
-                            <Text
-                                variant="titleMediumSize"
-                                style={{
-                                    ...stylesheet.colonText,
-                                    ...colonTextDynamicStyle
-                                }}
-                            >
-                                :
-                            </Text>
-                            <TimeInput
-                                initialValue={dateRange?.end?.getSeconds().toString().padStart(2, "0")}
-                                isWorkWith24HoursFormat={isWorkWith24HoursFormat}
-                                selectMultipleObject={selectMultipleObject}
-                                setDateRangeValue={setDateRangeValue}
-                                rangeValidation={rangeValidation}
-                                setDateValue={setDateValue}
-                                selectObject={selectObject}
-                                timeType="seconds"
-                                variant={variant}
-                                maxDate={maxDate}
-                                minDate={minDate}
-                                rangeType="end"
-                            />
-                        </Fragment> : null
+                        isWorkWithSeconds ?
+                            <Fragment>
+                                <Text
+                                    variant="titleMediumSize"
+                                    style={{
+                                        ...stylesheet.colonText,
+                                        ...colonTextDynamicStyle
+                                    }}
+                                >
+                                    :
+                                </Text>
+                                <TimeInput
+                                    initialValue={dateRange?.end?.getSeconds().toString().padStart(2, "0")}
+                                    isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                                    selectMultipleObject={selectMultipleObject}
+                                    setDateRangeValue={setDateRangeValue}
+                                    rangeValidation={rangeValidation}
+                                    setDateValue={setDateValue}
+                                    selectObject={selectObject}
+                                    timeType="seconds"
+                                    variant={variant}
+                                    maxDate={maxDate}
+                                    minDate={minDate}
+                                    rangeType="end"
+                                />
+                            </Fragment>
+                        :
+                            null
                     }
                 </View>
             </View>;
@@ -393,29 +399,32 @@ const TimeSelector = ({
                     minDate={minDate}
                 />
                 {
-                    isWorkWithSeconds ? <Fragment>
-                        <Text
-                            variant="titleMediumSize"
-                            style={{
-                                ...stylesheet.colonText,
-                                ...colonTextDynamicStyle
-                            }}
-                        >
-                            :
-                        </Text>
-                        <TimeInput
-                            initialValue={date?.getSeconds().toString().padStart(2, "0")}
-                            isWorkWith24HoursFormat={isWorkWith24HoursFormat}
-                            selectMultipleObject={selectMultipleObject}
-                            setDateRangeValue={setDateRangeValue}
-                            setDateValue={setDateValue}
-                            selectObject={selectObject}
-                            timeType="seconds"
-                            variant={variant}
-                            maxDate={maxDate}
-                            minDate={minDate}
-                        />
-                    </Fragment> : null
+                    isWorkWithSeconds ?
+                        <Fragment>
+                            <Text
+                                variant="titleMediumSize"
+                                style={{
+                                    ...stylesheet.colonText,
+                                    ...colonTextDynamicStyle
+                                }}
+                            >
+                                :
+                            </Text>
+                            <TimeInput
+                                initialValue={date?.getSeconds().toString().padStart(2, "0")}
+                                isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                                selectMultipleObject={selectMultipleObject}
+                                setDateRangeValue={setDateRangeValue}
+                                setDateValue={setDateValue}
+                                selectObject={selectObject}
+                                timeType="seconds"
+                                variant={variant}
+                                maxDate={maxDate}
+                                minDate={minDate}
+                            />
+                        </Fragment>
+                    :
+                        null
                 }
             </View>
         </View>;

src/components/toast/index.tsx

@@ -186,7 +186,7 @@ const Toast: FC<IToastProps> = ({
                     >
                         {subTitle}
                     </Text>
-                    :
+                :
                     null
             }
         </View>;

src/components/yearSelector/index.tsx

@@ -351,16 +351,21 @@ const YearSelector = ({
             >
                 {yearItem.title}
             </Text>
-            {isShowTodayIndicator && yearItem.isToday ? <View
-                style={[
-                    stylesheet.todayIndicator,
-                    selectionStyle,
-                    todayIndicatorDynamicStyle,
+            {
+                isShowTodayIndicator && yearItem.isToday ?
+                    <View
+                        style={[
+                            stylesheet.todayIndicator,
+                            selectionStyle,
+                            todayIndicatorDynamicStyle,
                     yearItem.isSelected ? {
                         borderColor: colors.content.border.subtle
                     } : null
-                ]}
-            /> : null}
+                        ]}
+                    />
+                :
+                    null
+            }
         </TouchableOpacity>;
     };