@tecsinapse/react-core 2.0.3 → 2.0.4

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/README.md CHANGED
@@ -13,7 +13,7 @@ In addition, the design system and component library should be easy to use for d
13
13
 
14
14
  ## Quick start
15
15
 
16
- Here are a few helpful links for getting started with Circuit UI:
16
+ Here are a few helpful links for getting started:
17
17
 
18
18
  - [Documentation](https://tecsinapse.github.io/design-system) - Learn how to use and view the components in Storybook.
19
19
  - [Getting started](https://tecsinapse.github.io/design-system/?path=/docs/introduction-getting-started--page) - Set up a new app with our DS or add it to an existing project.
@@ -1 +1 @@
1
- {"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { useCallback, useEffect } from 'react';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarProps, DateRange, SelectionType } from '../Calendar';\nimport { HintInputContainer } from '../HintInputContainer';\nimport { CalendarIcon, getStyledTextComponent } from './styled';\n\nexport interface DatePickerProps<T extends SelectionType>\n extends InputContainerProps,\n Omit<CalendarProps<T>, 'style'> {\n controlComponent?: (\n onPress: () => void,\n displayValue?: string\n ) => JSX.Element;\n TextComponent?: React.FC<TextProps>;\n CalendarComponent: React.FC<CalendarProps<T>>;\n placeholder?: string;\n onFocus?: () => void | never;\n onBlur?: () => void | never;\n format?: string;\n closeOnPick?: boolean;\n renderCalendar: (\n calendar: React.ReactElement,\n blur?: () => void\n ) => JSX.Element | null;\n requestShowCalendar: () => void;\n requestCloseCalendar: () => void;\n}\n\nfunction DatePicker<T extends SelectionType>({\n /** DatePicker props */\n month,\n year,\n onChange,\n value,\n type,\n format = 'yyyy-MM-dd',\n placeholder,\n onFocus,\n onBlur,\n disabled,\n controlComponent,\n hintComponent,\n hint,\n variant,\n TextComponent = Text,\n CalendarComponent,\n rightComponent,\n style,\n locale,\n closeOnPick = false,\n renderCalendar,\n requestShowCalendar,\n requestCloseCalendar,\n ...rest\n}: DatePickerProps<T>): JSX.Element {\n const { focused, handleBlur, handleFocus } = useInputFocus(\n onFocus,\n onBlur,\n !disabled\n );\n\n const handleShowCalendar = React.useCallback(() => {\n requestShowCalendar();\n handleFocus();\n }, [handleFocus, requestShowCalendar]);\n\n const getDisplayValue = () => {\n if (!value) return placeholder;\n if (type === 'day') {\n return formatDate(value as Date, format, { locale: locale });\n } else {\n const { lowest, highest } = value as DateRange;\n if (highest)\n return `${formatDate(lowest, format, {\n locale: locale,\n })} - ${formatDate(highest, format, { locale: locale })}`;\n else return placeholder;\n }\n };\n\n const StyledText = getStyledTextComponent(TextComponent);\n\n const handleRequestCloseCalendar = useCallback(() => {\n requestCloseCalendar()\n handleBlur()\n }, [requestCloseCalendar, handleBlur])\n\n useEffect(() => {\n if (closeOnPick && value && type === 'day') {\n setTimeout(handleRequestCloseCalendar, 200);\n }\n if (closeOnPick && value && type === 'range') {\n const { lowest, highest } = value as DateRange;\n lowest && highest && setTimeout(handleRequestCloseCalendar, 200);\n }\n }, [value, closeOnPick, type, handleRequestCloseCalendar]);\n\n const calendar = (\n <CalendarComponent\n pointerEvents={'box-none'}\n type={type}\n value={value}\n month={month}\n year={year}\n onChange={onChange}\n locale={locale}\n />\n );\n\n return (\n <>\n {controlComponent ? (\n controlComponent(handleShowCalendar, getDisplayValue())\n ) : (\n <HintInputContainer\n focused={focused}\n viewStyle={style}\n onPress={handleShowCalendar}\n disabled={disabled}\n hintComponent={hintComponent}\n LabelComponent={TextComponent}\n variant={variant}\n hint={hint}\n rightComponent={\n <>\n <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n {rightComponent}\n </>\n }\n {...rest}\n >\n <StyledText fontWeight=\"bold\" disabled={disabled}>\n {getDisplayValue() || ' '}\n </StyledText>\n </HintInputContainer>\n )}\n {renderCalendar(calendar, handleBlur)}\n </>\n );\n}\n\nexport default DatePicker;\n"],"names":["useInputFocus","React","formatDate","getStyledTextComponent","useCallback","useEffect","CalendarIcon"],"mappings":"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"}
1
+ {"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { useCallback, useEffect } from 'react';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarProps, DateRange, SelectionType } from '../Calendar';\nimport { HintInputContainer } from '../HintInputContainer';\nimport { CalendarIcon, getStyledTextComponent } from './styled';\n\nexport interface DatePickerProps<T extends SelectionType>\n extends InputContainerProps,\n Omit<CalendarProps<T>, 'style'> {\n controlComponent?: (\n onPress: () => void,\n displayValue?: string\n ) => JSX.Element;\n TextComponent?: React.FC<TextProps>;\n CalendarComponent: React.FC<CalendarProps<T>>;\n placeholder?: string;\n onFocus?: () => void | never;\n onBlur?: () => void | never;\n format?: string;\n closeOnPick?: boolean;\n renderCalendar: (\n calendar: React.ReactElement,\n blur?: () => void\n ) => JSX.Element | null;\n requestShowCalendar: () => void;\n requestCloseCalendar: () => void;\n}\n\nfunction DatePicker<T extends SelectionType>({\n /** DatePicker props */\n month,\n year,\n onChange,\n value,\n type,\n format = 'yyyy-MM-dd',\n placeholder,\n onFocus,\n onBlur,\n disabled,\n controlComponent,\n hintComponent,\n hint,\n variant,\n TextComponent = Text,\n CalendarComponent,\n rightComponent,\n style,\n locale,\n closeOnPick = false,\n renderCalendar,\n requestShowCalendar,\n requestCloseCalendar,\n ...rest\n}: DatePickerProps<T>): JSX.Element {\n const { focused, handleBlur, handleFocus } = useInputFocus(\n onFocus,\n onBlur,\n !disabled\n );\n\n const handleShowCalendar = React.useCallback(() => {\n requestShowCalendar();\n handleFocus();\n }, [handleFocus, requestShowCalendar]);\n\n const getDisplayValue = () => {\n if (!value) return placeholder;\n if (type === 'day') {\n return formatDate(value as Date, format, { locale: locale });\n } else {\n const { lowest, highest } = value as DateRange;\n if (highest)\n return `${formatDate(lowest, format, {\n locale: locale,\n })} - ${formatDate(highest, format, { locale: locale })}`;\n else return placeholder;\n }\n };\n\n const StyledText = getStyledTextComponent(TextComponent);\n\n const handleRequestCloseCalendar = useCallback(() => {\n requestCloseCalendar();\n handleBlur();\n }, [requestCloseCalendar, handleBlur]);\n\n useEffect(() => {\n if (closeOnPick && value && type === 'day') {\n setTimeout(handleRequestCloseCalendar, 200);\n }\n if (closeOnPick && value && type === 'range') {\n const { lowest, highest } = value as DateRange;\n lowest && highest && setTimeout(handleRequestCloseCalendar, 200);\n }\n }, [value, closeOnPick, type, handleRequestCloseCalendar]);\n\n const calendar = (\n <CalendarComponent\n pointerEvents={'box-none'}\n type={type}\n value={value}\n month={month}\n year={year}\n onChange={onChange}\n locale={locale}\n />\n );\n\n return (\n <>\n {controlComponent ? (\n controlComponent(handleShowCalendar, getDisplayValue())\n ) : (\n <HintInputContainer\n focused={focused}\n viewStyle={style}\n onPress={handleShowCalendar}\n disabled={disabled}\n hintComponent={hintComponent}\n LabelComponent={TextComponent}\n variant={variant}\n hint={hint}\n rightComponent={\n <>\n <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n {rightComponent}\n </>\n }\n {...rest}\n >\n <StyledText fontWeight=\"bold\" disabled={disabled}>\n {getDisplayValue() || ' '}\n </StyledText>\n </HintInputContainer>\n )}\n {renderCalendar(calendar, handleBlur)}\n </>\n );\n}\n\nexport default DatePicker;\n"],"names":["useInputFocus","React","formatDate","getStyledTextComponent","useCallback","useEffect","CalendarIcon"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { useCallback, useEffect } from 'react';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarProps, DateRange, SelectionType } from '../Calendar';\nimport { HintInputContainer } from '../HintInputContainer';\nimport { CalendarIcon, getStyledTextComponent } from './styled';\n\nexport interface DatePickerProps<T extends SelectionType>\n extends InputContainerProps,\n Omit<CalendarProps<T>, 'style'> {\n controlComponent?: (\n onPress: () => void,\n displayValue?: string\n ) => JSX.Element;\n TextComponent?: React.FC<TextProps>;\n CalendarComponent: React.FC<CalendarProps<T>>;\n placeholder?: string;\n onFocus?: () => void | never;\n onBlur?: () => void | never;\n format?: string;\n closeOnPick?: boolean;\n renderCalendar: (\n calendar: React.ReactElement,\n blur?: () => void\n ) => JSX.Element | null;\n requestShowCalendar: () => void;\n requestCloseCalendar: () => void;\n}\n\nfunction DatePicker<T extends SelectionType>({\n /** DatePicker props */\n month,\n year,\n onChange,\n value,\n type,\n format = 'yyyy-MM-dd',\n placeholder,\n onFocus,\n onBlur,\n disabled,\n controlComponent,\n hintComponent,\n hint,\n variant,\n TextComponent = Text,\n CalendarComponent,\n rightComponent,\n style,\n locale,\n closeOnPick = false,\n renderCalendar,\n requestShowCalendar,\n requestCloseCalendar,\n ...rest\n}: DatePickerProps<T>): JSX.Element {\n const { focused, handleBlur, handleFocus } = useInputFocus(\n onFocus,\n onBlur,\n !disabled\n );\n\n const handleShowCalendar = React.useCallback(() => {\n requestShowCalendar();\n handleFocus();\n }, [handleFocus, requestShowCalendar]);\n\n const getDisplayValue = () => {\n if (!value) return placeholder;\n if (type === 'day') {\n return formatDate(value as Date, format, { locale: locale });\n } else {\n const { lowest, highest } = value as DateRange;\n if (highest)\n return `${formatDate(lowest, format, {\n locale: locale,\n })} - ${formatDate(highest, format, { locale: locale })}`;\n else return placeholder;\n }\n };\n\n const StyledText = getStyledTextComponent(TextComponent);\n\n const handleRequestCloseCalendar = useCallback(() => {\n requestCloseCalendar()\n handleBlur()\n }, [requestCloseCalendar, handleBlur])\n\n useEffect(() => {\n if (closeOnPick && value && type === 'day') {\n setTimeout(handleRequestCloseCalendar, 200);\n }\n if (closeOnPick && value && type === 'range') {\n const { lowest, highest } = value as DateRange;\n lowest && highest && setTimeout(handleRequestCloseCalendar, 200);\n }\n }, [value, closeOnPick, type, handleRequestCloseCalendar]);\n\n const calendar = (\n <CalendarComponent\n pointerEvents={'box-none'}\n type={type}\n value={value}\n month={month}\n year={year}\n onChange={onChange}\n locale={locale}\n />\n );\n\n return (\n <>\n {controlComponent ? (\n controlComponent(handleShowCalendar, getDisplayValue())\n ) : (\n <HintInputContainer\n focused={focused}\n viewStyle={style}\n onPress={handleShowCalendar}\n disabled={disabled}\n hintComponent={hintComponent}\n LabelComponent={TextComponent}\n variant={variant}\n hint={hint}\n rightComponent={\n <>\n <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n {rightComponent}\n </>\n }\n {...rest}\n >\n <StyledText fontWeight=\"bold\" disabled={disabled}>\n {getDisplayValue() || ' '}\n </StyledText>\n </HintInputContainer>\n )}\n {renderCalendar(calendar, handleBlur)}\n </>\n );\n}\n\nexport default DatePicker;\n"],"names":["format","formatDate"],"mappings":"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"}
1
+ {"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { useCallback, useEffect } from 'react';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarProps, DateRange, SelectionType } from '../Calendar';\nimport { HintInputContainer } from '../HintInputContainer';\nimport { CalendarIcon, getStyledTextComponent } from './styled';\n\nexport interface DatePickerProps<T extends SelectionType>\n extends InputContainerProps,\n Omit<CalendarProps<T>, 'style'> {\n controlComponent?: (\n onPress: () => void,\n displayValue?: string\n ) => JSX.Element;\n TextComponent?: React.FC<TextProps>;\n CalendarComponent: React.FC<CalendarProps<T>>;\n placeholder?: string;\n onFocus?: () => void | never;\n onBlur?: () => void | never;\n format?: string;\n closeOnPick?: boolean;\n renderCalendar: (\n calendar: React.ReactElement,\n blur?: () => void\n ) => JSX.Element | null;\n requestShowCalendar: () => void;\n requestCloseCalendar: () => void;\n}\n\nfunction DatePicker<T extends SelectionType>({\n /** DatePicker props */\n month,\n year,\n onChange,\n value,\n type,\n format = 'yyyy-MM-dd',\n placeholder,\n onFocus,\n onBlur,\n disabled,\n controlComponent,\n hintComponent,\n hint,\n variant,\n TextComponent = Text,\n CalendarComponent,\n rightComponent,\n style,\n locale,\n closeOnPick = false,\n renderCalendar,\n requestShowCalendar,\n requestCloseCalendar,\n ...rest\n}: DatePickerProps<T>): JSX.Element {\n const { focused, handleBlur, handleFocus } = useInputFocus(\n onFocus,\n onBlur,\n !disabled\n );\n\n const handleShowCalendar = React.useCallback(() => {\n requestShowCalendar();\n handleFocus();\n }, [handleFocus, requestShowCalendar]);\n\n const getDisplayValue = () => {\n if (!value) return placeholder;\n if (type === 'day') {\n return formatDate(value as Date, format, { locale: locale });\n } else {\n const { lowest, highest } = value as DateRange;\n if (highest)\n return `${formatDate(lowest, format, {\n locale: locale,\n })} - ${formatDate(highest, format, { locale: locale })}`;\n else return placeholder;\n }\n };\n\n const StyledText = getStyledTextComponent(TextComponent);\n\n const handleRequestCloseCalendar = useCallback(() => {\n requestCloseCalendar();\n handleBlur();\n }, [requestCloseCalendar, handleBlur]);\n\n useEffect(() => {\n if (closeOnPick && value && type === 'day') {\n setTimeout(handleRequestCloseCalendar, 200);\n }\n if (closeOnPick && value && type === 'range') {\n const { lowest, highest } = value as DateRange;\n lowest && highest && setTimeout(handleRequestCloseCalendar, 200);\n }\n }, [value, closeOnPick, type, handleRequestCloseCalendar]);\n\n const calendar = (\n <CalendarComponent\n pointerEvents={'box-none'}\n type={type}\n value={value}\n month={month}\n year={year}\n onChange={onChange}\n locale={locale}\n />\n );\n\n return (\n <>\n {controlComponent ? (\n controlComponent(handleShowCalendar, getDisplayValue())\n ) : (\n <HintInputContainer\n focused={focused}\n viewStyle={style}\n onPress={handleShowCalendar}\n disabled={disabled}\n hintComponent={hintComponent}\n LabelComponent={TextComponent}\n variant={variant}\n hint={hint}\n rightComponent={\n <>\n <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n {rightComponent}\n </>\n }\n {...rest}\n >\n <StyledText fontWeight=\"bold\" disabled={disabled}>\n {getDisplayValue() || ' '}\n </StyledText>\n </HintInputContainer>\n )}\n {renderCalendar(calendar, handleBlur)}\n </>\n );\n}\n\nexport default DatePicker;\n"],"names":["format","formatDate"],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tecsinapse/react-core",
3
3
  "description": "TecSinapse hybrid React components",
4
- "version": "2.0.3",
4
+ "version": "2.0.4",
5
5
  "license": "MIT",
6
6
  "main": "dist/cjs/index.js",
7
7
  "module": "dist/esm/index.js",
@@ -39,5 +39,5 @@
39
39
  "react-native": "^0.71.0",
40
40
  "react-native-vector-icons": "^9.0.0"
41
41
  },
42
- "gitHead": "084057983f2c20e5a93fbce93e3fb2aede1c79e2"
42
+ "gitHead": "490ebda1a93d15a4d55e651eb3f4091241f30f3c"
43
43
  }