@tecsinapse/react-core 1.16.0 → 1.16.3
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/CHANGELOG.md +30 -0
- package/dist/components/atoms/Input/hooks/useNumberMask.js +2 -2
- package/dist/components/atoms/Input/hooks/useNumberMask.js.map +1 -1
- package/dist/components/atoms/Input/styled.js +2 -2
- package/dist/components/atoms/Input/styled.js.map +1 -1
- package/dist/components/atoms/ProgressBar/ProgressBar.js +1 -1
- package/dist/components/atoms/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/components/atoms/Text/Text.d.ts +4 -1
- package/dist/components/atoms/Text/Text.js +7 -2
- package/dist/components/atoms/Text/Text.js.map +1 -1
- package/dist/components/atoms/Text/functions.d.ts +2 -0
- package/dist/components/atoms/Text/functions.js +13 -0
- package/dist/components/atoms/Text/functions.js.map +1 -0
- package/dist/components/atoms/Text/styled.js +3 -0
- package/dist/components/atoms/Text/styled.js.map +1 -1
- package/dist/types/defaults.d.ts +2 -0
- package/package.json +6 -3
- package/src/components/atoms/Input/hooks/useNumberMask.ts +1 -1
- package/src/components/atoms/Input/styled.ts +1 -1
- package/src/components/atoms/ProgressBar/ProgressBar.tsx +2 -1
- package/src/components/atoms/Text/Text.tsx +8 -1
- package/src/components/atoms/Text/functions.ts +8 -0
- package/src/components/atoms/Text/styled.ts +1 -0
- package/src/types/defaults.ts +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,36 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.16.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.16.2...@tecsinapse/react-core@1.16.3) (2022-06-22)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* automation yalc for develop local ([9c6f1bb](https://github.com/tecsinapse/design-system/commit/9c6f1bbf0ea4bbacd194e4cf5c338405b94a9686))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [1.16.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.16.1...@tecsinapse/react-core@1.16.2) (2022-06-19)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* add capital option to text component ([56821ee](https://github.com/tecsinapse/design-system/commit/56821ee96eefc13a0b93d9b8b2d61af1be65e705))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## [1.16.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.16.0...@tecsinapse/react-core@1.16.1) (2022-05-24)
|
|
29
|
+
|
|
30
|
+
**Note:** Version bump only for package @tecsinapse/react-core
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
6
36
|
# [1.16.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.15.1...@tecsinapse/react-core@1.16.0) (2022-05-10)
|
|
7
37
|
|
|
8
38
|
|
|
@@ -7,7 +7,7 @@ var _currency = _interopRequireDefault(require("currency.js"));
|
|
|
7
7
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _extractNumbersFromString = require("../../../../utils/extractNumbersFromString");
|
|
11
11
|
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
13
|
|
|
@@ -46,7 +46,7 @@ const getInternalNumberAndMask = (value, options) => {
|
|
|
46
46
|
internalNumber = value;
|
|
47
47
|
}
|
|
48
48
|
} else {
|
|
49
|
-
const onlyNumbers = String((0,
|
|
49
|
+
const onlyNumbers = String((0, _extractNumbersFromString.extractNumbersFromString)(value));
|
|
50
50
|
const padZeros = String(onlyNumbers).padStart(precision + 1, '0');
|
|
51
51
|
internalNumber = Number(padZeros.replace(getRegex(precision), '.'));
|
|
52
52
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useNumberMask.ts"],"names":["DEFAULT_OPTIONS","symbol","separator","decimal","precision","getRegex","RegExp","getInternalNumberAndMask","value","options","mergedOptions","internalNumber","stringValue","String","decimalIndex","indexOf","currentPrecision","length","zeros","i","Number","onlyNumbers","padZeros","padStart","replace","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","useNumberMask","defaultValue","applyMask","raw","formatted","format","setValue","handleChangeValue","formattedValue"],"mappings":";;;;;AAAA;;AACA;;AACA;;;;AAKA,MAAMA,eAAgC,GAAG;AACvCC,EAAAA,MAAM,EAAE,KAD+B;AAEvCC,EAAAA,SAAS,EAAE,GAF4B;AAGvCC,EAAAA,OAAO,EAAE,GAH8B;AAIvCC,EAAAA,SAAS,EAAE;AAJ4B,CAAzC;;AAOA,MAAMC,QAAQ,GAAID,SAAD,IACf,IAAIE,MAAJ,CAAY,cAAaF,SAAU,YAAnC,EAAgD,GAAhD,CADF;;AAGO,MAAMG,wBAAwB,GAAG,CACtCC,KADsC,EAEtCC,OAFsC,KAGyB;AAC/D,QAAMC,aAAa,GAAG,EAAE,GAAGV,eAAL;AAAsB,OAAGS;AAAzB,GAAtB;AACA,QAAM;AAAEL,IAAAA,SAAS,GAAG,CAAC;AAAf,MAAqBM,aAA3B;AAEA,MAAIC,cAAJ;;AAEA,MAAI,OAAOH,KAAP,KAAiB,QAArB,EAA+B;AAC7B,QAAIJ,SAAJ,EAAe;AACb,UAAIQ,WAAW,GAAGC,MAAM,CAACL,KAAD,CAAxB;AACA,YAAMM,YAAY,GAAGF,WAAW,CAACG,OAAZ,CAAoB,GAApB,CAArB;AACA,YAAMC,gBAAgB,GAAGF,YAAY,GAAGV,SAAxC;;AACA,UAAIU,YAAY,KAAK,CAAC,CAAlB,IAAuBE,gBAAgB,IAAIJ,WAAW,CAACK,MAA3D,EAAmE;AACjE,cAAMC,KAAK,GAAGN,WAAW,CAACK,MAAZ,GAAqB,CAArB,GAAyBD,gBAAvC;;AACA,aAAK,IAAIG,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGD,KAApB,EAA2BC,CAAC,EAA5B,EAAgCP,WAAW,GAAGA,WAAW,GAAI,GAA7B;AACjC;;AACDD,MAAAA,cAAc,GAAGS,MAAM,CAACR,WAAD,CAAvB;AACD,KATD,MASO;AACLD,MAAAA,cAAc,GAAGH,KAAjB;AACD;AACF,GAbD,MAaO;AACL,UAAMa,WAAW,GAAGR,MAAM,CAAC,
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useNumberMask.ts"],"names":["DEFAULT_OPTIONS","symbol","separator","decimal","precision","getRegex","RegExp","getInternalNumberAndMask","value","options","mergedOptions","internalNumber","stringValue","String","decimalIndex","indexOf","currentPrecision","length","zeros","i","Number","onlyNumbers","padZeros","padStart","replace","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","useNumberMask","defaultValue","applyMask","raw","formatted","format","setValue","handleChangeValue","formattedValue"],"mappings":";;;;;AAAA;;AACA;;AACA;;;;AAKA,MAAMA,eAAgC,GAAG;AACvCC,EAAAA,MAAM,EAAE,KAD+B;AAEvCC,EAAAA,SAAS,EAAE,GAF4B;AAGvCC,EAAAA,OAAO,EAAE,GAH8B;AAIvCC,EAAAA,SAAS,EAAE;AAJ4B,CAAzC;;AAOA,MAAMC,QAAQ,GAAID,SAAD,IACf,IAAIE,MAAJ,CAAY,cAAaF,SAAU,YAAnC,EAAgD,GAAhD,CADF;;AAGO,MAAMG,wBAAwB,GAAG,CACtCC,KADsC,EAEtCC,OAFsC,KAGyB;AAC/D,QAAMC,aAAa,GAAG,EAAE,GAAGV,eAAL;AAAsB,OAAGS;AAAzB,GAAtB;AACA,QAAM;AAAEL,IAAAA,SAAS,GAAG,CAAC;AAAf,MAAqBM,aAA3B;AAEA,MAAIC,cAAJ;;AAEA,MAAI,OAAOH,KAAP,KAAiB,QAArB,EAA+B;AAC7B,QAAIJ,SAAJ,EAAe;AACb,UAAIQ,WAAW,GAAGC,MAAM,CAACL,KAAD,CAAxB;AACA,YAAMM,YAAY,GAAGF,WAAW,CAACG,OAAZ,CAAoB,GAApB,CAArB;AACA,YAAMC,gBAAgB,GAAGF,YAAY,GAAGV,SAAxC;;AACA,UAAIU,YAAY,KAAK,CAAC,CAAlB,IAAuBE,gBAAgB,IAAIJ,WAAW,CAACK,MAA3D,EAAmE;AACjE,cAAMC,KAAK,GAAGN,WAAW,CAACK,MAAZ,GAAqB,CAArB,GAAyBD,gBAAvC;;AACA,aAAK,IAAIG,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGD,KAApB,EAA2BC,CAAC,EAA5B,EAAgCP,WAAW,GAAGA,WAAW,GAAI,GAA7B;AACjC;;AACDD,MAAAA,cAAc,GAAGS,MAAM,CAACR,WAAD,CAAvB;AACD,KATD,MASO;AACLD,MAAAA,cAAc,GAAGH,KAAjB;AACD;AACF,GAbD,MAaO;AACL,UAAMa,WAAW,GAAGR,MAAM,CAAC,wDAAyBL,KAAzB,CAAD,CAA1B;AACA,UAAMc,QAAQ,GAAGT,MAAM,CAACQ,WAAD,CAAN,CAAoBE,QAApB,CAA6BnB,SAAS,GAAG,CAAzC,EAA4C,GAA5C,CAAjB;AACAO,IAAAA,cAAc,GAAGS,MAAM,CAACE,QAAQ,CAACE,OAAT,CAAiBnB,QAAQ,CAACD,SAAD,CAAzB,EAAsC,GAAtC,CAAD,CAAvB;AACD;;AAED,MAAIO,cAAc,GAAGS,MAAM,CAACK,gBAA5B,EAA8C;AAC5Cd,IAAAA,cAAc,GAAGS,MAAM,CAACK,gBAAxB;AACD;;AAED,MAAId,cAAc,GAAGS,MAAM,CAACM,gBAA5B,EAA8C;AAC5Cf,IAAAA,cAAc,GAAGS,MAAM,CAACM,gBAAxB;AACD;;AAED,SAAO;AACLf,IAAAA,cADK;AAELD,IAAAA;AAFK,GAAP;AAID,CAxCM;;;;AAgDA,MAAMiB,aAAa,GAAG,CAC3BlB,OAD2B,EAE3BmB,YAF2B,KAGuB;AAClD,QAAMC,SAAS,GAAG,wBAChB,CAACrB,KAAsB,GAAG,CAA1B,KAA2C;AACzC,UAAM;AAAEG,MAAAA,cAAF;AAAkBD,MAAAA;AAAlB,QAAoCH,wBAAwB,CAChEC,KADgE,EAEhEC,OAFgE,CAAlE;AAKA,WAAO;AACLqB,MAAAA,GAAG,EAAEnB,cADA;AAELoB,MAAAA,SAAS,EAAE,uBAASpB,cAAT,EAAyBqB,MAAzB,CAAgCtB,aAAhC;AAFN,KAAP;AAID,GAXe,EAYhB,CAACD,OAAD,EAAUJ,QAAV,CAZgB,CAAlB;AAeA,QAAM,CAACG,KAAD,EAAQyB,QAAR,IAAoB,qBAAoBJ,SAAS,CAACD,YAAD,CAA7B,CAA1B;AAEA,QAAMM,iBAAiB,GAAG,wBACvBC,cAAD,IAAqC;AACnC,UAAM;AAAEL,MAAAA,GAAF;AAAOC,MAAAA;AAAP,QAAqBF,SAAS,CAACM,cAAD,CAApC;AACAF,IAAAA,QAAQ,CAAC;AACPH,MAAAA,GADO;AAEPC,MAAAA;AAFO,KAAD,CAAR;AAID,GAPuB,EAQxB,CAACF,SAAD,EAAYI,QAAZ,CARwB,CAA1B;AAWA,SAAO,CAACzB,KAAD,EAAQ0B,iBAAR,CAAP;AACD,CAjCM","sourcesContent":["import currency from 'currency.js';\nimport { useCallback, useState } from 'react';\nimport { extractNumbersFromString } from '../../../../utils/extractNumbersFromString';\nimport { MaskValue } from './useStringMask';\n\nexport type CurrencyOptions = currency.Options;\n\nconst DEFAULT_OPTIONS: CurrencyOptions = {\n symbol: 'R$ ',\n separator: '.',\n decimal: ',',\n precision: 2,\n};\n\nconst getRegex = (precision: number) =>\n new RegExp(`\\\\B(?=(\\\\d{${precision}})(?!\\\\d))`, 'g');\n\nexport const getInternalNumberAndMask = (\n value: string | number,\n options?: CurrencyOptions\n): { internalNumber: number; mergedOptions: CurrencyOptions } => {\n const mergedOptions = { ...DEFAULT_OPTIONS, ...options };\n const { precision = -1 } = mergedOptions;\n\n let internalNumber;\n\n if (typeof value === 'number') {\n if (precision) {\n let stringValue = String(value);\n const decimalIndex = stringValue.indexOf('.');\n const currentPrecision = decimalIndex + precision;\n if (decimalIndex !== -1 && currentPrecision <= stringValue.length) {\n const zeros = stringValue.length + 1 - currentPrecision;\n for (let i = 0; i < zeros; i++) stringValue = stringValue + `0`;\n }\n internalNumber = Number(stringValue);\n } else {\n internalNumber = value;\n }\n } else {\n const onlyNumbers = String(extractNumbersFromString(value));\n const padZeros = String(onlyNumbers).padStart(precision + 1, '0');\n internalNumber = Number(padZeros.replace(getRegex(precision), '.'));\n }\n\n if (internalNumber > Number.MAX_SAFE_INTEGER) {\n internalNumber = Number.MAX_SAFE_INTEGER;\n }\n\n if (internalNumber < Number.MIN_SAFE_INTEGER) {\n internalNumber = Number.MIN_SAFE_INTEGER;\n }\n\n return {\n internalNumber,\n mergedOptions,\n };\n};\n\n/**\n * TODO:\n * @param options\n * @param defaultValue\n * @returns\n */\nexport const useNumberMask = (\n options?: CurrencyOptions,\n defaultValue?: string | number\n): [MaskValue, (value: string | number) => void] => {\n const applyMask = useCallback(\n (value: string | number = 0): MaskValue => {\n const { internalNumber, mergedOptions } = getInternalNumberAndMask(\n value,\n options\n );\n\n return {\n raw: internalNumber,\n formatted: currency(internalNumber).format(mergedOptions),\n };\n },\n [options, getRegex]\n );\n\n const [value, setValue] = useState<MaskValue>(applyMask(defaultValue));\n\n const handleChangeValue = useCallback(\n (formattedValue: string | number) => {\n const { raw, formatted } = applyMask(formattedValue);\n setValue({\n raw,\n formatted,\n });\n },\n [applyMask, setValue]\n );\n\n return [value, handleChangeValue];\n};\n"],"file":"useNumberMask.js"}
|
|
@@ -7,7 +7,7 @@ var _native = _interopRequireWildcard(require("@emotion/native"));
|
|
|
7
7
|
|
|
8
8
|
var _reactNative = require("react-native");
|
|
9
9
|
|
|
10
|
-
var
|
|
10
|
+
var _ResponsiveFontSize = require("../../../utils/ResponsiveFontSize");
|
|
11
11
|
|
|
12
12
|
var _Icon = require("../Icon");
|
|
13
13
|
|
|
@@ -64,7 +64,7 @@ exports.StyledIconContent = StyledIconContent;
|
|
|
64
64
|
const StyledInputContainer = _native.default.View`
|
|
65
65
|
flex-direction: row;
|
|
66
66
|
align-items: center;
|
|
67
|
-
min-height: ${(0,
|
|
67
|
+
min-height: ${(0, _ResponsiveFontSize.RFValueStr)('44px')};
|
|
68
68
|
`;
|
|
69
69
|
exports.StyledInputContainer = StyledInputContainer;
|
|
70
70
|
const StyledInputElementBase = (0, _native.default)(_reactNative.TextInput)`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/atoms/Input/styled.ts"],"names":["leftIconStyles","leftComponent","theme","spacing","centi","rightIconStyles","rightComponent","disabledContainerStyles","disabled","disabledInputStyles","color","secondary","light","focusedStyles","focused","borderColor","borderWidth","nano","dark","StyledIconContent","styled","View","zIndex","default","StyledInputContainer","StyledInputElementBase","TextInput","font","stack","typography","base","fontSize","weight","bold","StyledLabelContainer","props","micro","StyledBorderKeeperBase","miscellaneous","surfaceColor","borderColorGradation","borderRadius","mili","pico","StyledBorderKeeper","StyledInputElement","StyledHintContainer","StyledHintIcon","Icon"],"mappings":";;;;;AAAA;;AACA;;AAGA;;AACA;;;;;;AAGA,MAAMA,cAAc,GAAG,CAAC;AACtBC,EAAAA,aADsB;AAEtBC,EAAAA;AAFsB,CAAD,KAIrB,CAACD,aAAD,IACA,gBAAI;AACN,oBAAoBC,KAAK,CAACC,OAAN,CAAcC,KAAM;AACxC,GAPA;;AASA,MAAMC,eAAe,GAAG,CAAC;AACvBC,EAAAA,cADuB;AAEvBJ,EAAAA;AAFuB,CAAD,KAItB,CAACI,cAAD,IACA,gBAAI;AACN,qBAAqBJ,KAAK,CAACC,OAAN,CAAcC,KAAM;AACzC,GAPA;;AASA,MAAMG,uBAAuB,GAAG,CAAC;AAC/BC,EAAAA;AAD+B,CAAD,KAG9BA,QAAQ,IACR,gBAAI;AACN;AACA,GANA;;AAQO,MAAMC,mBAAmB,GAAG,CAAC;AAClCD,EAAAA,QADkC;AAElCN,EAAAA;AAFkC,CAAD,KAIjCM,QAAQ,IACR,gBAAI;AACN,aAAaN,KADR,oBACQA,KAAK,CAAEQ,KAAP,CAAaC,SAAb,CAAuBC,KAAM;AAC1C,GAPO;;;;AASP,MAAMC,aAAa,GAAG,CAAC;AACrBC,EAAAA,OADqB;AAErBC,EAAAA,WAAW,GAAG,WAFO;AAGrBb,EAAAA;AAHqB,CAAD,KAKpBY,OAAO,IACP,gBAAI;AACN,oBAAoBZ,KAAK,CAACc,WAAN,CAAkBC,IAAK;AAC3C,oBAAoBf,KAAK,CAACQ,KAAN,CAAYK,WAAZ,EAAyBG,IAAK;AAClD,GATA;;AAWO,MAAMC,iBAAiB,GAAGC,gBAAOC,IAA0B;AAClE,aAAa,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACoB,MAAN,CAAaC,OAAQ;AACjD;AACA;AACA,CAJO;;AAMA,MAAMC,oBAAoB,GAAGJ,gBAAOC,IAEzC;AACF;AACA;AACA,gBAAgB,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/atoms/Input/styled.ts"],"names":["leftIconStyles","leftComponent","theme","spacing","centi","rightIconStyles","rightComponent","disabledContainerStyles","disabled","disabledInputStyles","color","secondary","light","focusedStyles","focused","borderColor","borderWidth","nano","dark","StyledIconContent","styled","View","zIndex","default","StyledInputContainer","StyledInputElementBase","TextInput","font","stack","typography","base","fontSize","weight","bold","StyledLabelContainer","props","micro","StyledBorderKeeperBase","miscellaneous","surfaceColor","borderColorGradation","borderRadius","mili","pico","StyledBorderKeeper","StyledInputElement","StyledHintContainer","StyledHintIcon","Icon"],"mappings":"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","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { TextInput } from 'react-native';\nimport { InputElementProps } from '.';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValueStr } from '../../../utils/ResponsiveFontSize';\nimport { Icon } from '../Icon';\nimport { InputContainerProps } from './InputContainer/InputContainer';\n\nconst leftIconStyles = ({\n leftComponent,\n theme,\n}: Partial<InputContainerProps> & StyleProps) =>\n !leftComponent &&\n css`\n padding-left: ${theme.spacing.centi};\n `;\n\nconst rightIconStyles = ({\n rightComponent,\n theme,\n}: Partial<InputContainerProps> & StyleProps) =>\n !rightComponent &&\n css`\n padding-right: ${theme.spacing.centi};\n `;\n\nconst disabledContainerStyles = ({\n disabled,\n}: Partial<InputContainerProps> & StyleProps) =>\n disabled &&\n css`\n background-color: transparent;\n `;\n\nexport const disabledInputStyles = ({\n disabled,\n theme,\n}: Partial<InputContainerProps> & Partial<StyleProps>) =>\n disabled &&\n css`\n color: ${theme?.color.secondary.light};\n `;\n\nconst focusedStyles = ({\n focused,\n borderColor = 'secondary',\n theme,\n}: Partial<InputContainerProps> & StyleProps) =>\n focused &&\n css`\n border-width: ${theme.borderWidth.nano};\n border-color: ${theme.color[borderColor].dark};\n `;\n\nexport const StyledIconContent = styled.View<Partial<StyleProps>>`\n z-index: ${({ theme }) => theme.zIndex.default};\n flex-direction: row;\n align-items: center;\n`;\n\nexport const StyledInputContainer = styled.View<\n Partial<InputContainerProps> & Partial<StyleProps>\n>`\n flex-direction: row;\n align-items: center;\n min-height: ${RFValueStr('44px')};\n`;\n\nexport const StyledInputElementBase = styled(TextInput)<\n InputElementProps & Partial<StyleProps>\n>`\n font-family: ${({ theme }) => `'${theme.font.stack.default}'`};\n font-size: ${({ theme }) => theme.typography.base.fontSize};\n font-weight: ${({ theme }) => theme.font.weight.bold};\n color: ${({ theme }) => theme.font.color.dark};\n`;\n\nexport const StyledLabelContainer = styled.View<\n Partial<InputContainerProps> & Partial<StyleProps>\n>(\n props => css`\n flex: 1;\n padding: ${props.theme.spacing.micro} 0;\n ${leftIconStyles(props)}\n ${rightIconStyles(props)}\n `\n);\n\nconst StyledBorderKeeperBase = styled.View<\n Partial<InputContainerProps> & Partial<StyleProps>\n>`\n background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n border-color: ${({\n theme,\n borderColor = 'secondary',\n borderColorGradation = 'light',\n }) => theme.color[borderColor][borderColorGradation]};\n border-radius: ${({ theme }) => theme.borderRadius.mili};\n border-width: ${({ theme }) => theme.borderWidth.pico};\n position: absolute;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledBorderKeeper = styled(StyledBorderKeeperBase)<\n Partial<StyleProps>\n>(\n props => css`\n ${focusedStyles(props)}\n ${disabledContainerStyles(props)}\n `\n);\n\nexport const StyledInputElement = styled(StyledInputElementBase)<\n InputElementProps & Partial<StyleProps>\n>(\n props => css`\n ${disabledInputStyles(props)}\n `\n);\n\nexport const StyledHintContainer = styled.View<Partial<StyleProps>>`\n margin-top: ${({ theme }) => theme.spacing.micro};\n flex-direction: row;\n align-items: center;\n`;\n\nexport const StyledHintIcon = styled(Icon)<Partial<StyleProps>>`\n margin-right: ${({ theme }) => theme.spacing.micro};\n`;\n"],"file":"styled.js"}
|
|
@@ -29,13 +29,13 @@ const ProgressBar = ({
|
|
|
29
29
|
...rest
|
|
30
30
|
}) => {
|
|
31
31
|
const theme = (0, _react.useTheme)();
|
|
32
|
+
const animationValue = React.useRef(new _reactNative.Animated.Value(0)).current;
|
|
32
33
|
const valueNow = typeof _valueNow === 'string' ? (0, _utils.extractNumbersFromString)(_valueNow) : _valueNow;
|
|
33
34
|
const totalProgress = (valueNow - valueMin) / (valueMax - valueMin) * 100;
|
|
34
35
|
const segments = Math.max(1, _segments);
|
|
35
36
|
const segmentWidth = 100 / Math.max(segments);
|
|
36
37
|
const items = [...Array(segments).keys()];
|
|
37
38
|
const segmentsRender = items.map(index => {
|
|
38
|
-
const animationValue = React.useRef(new _reactNative.Animated.Value(0)).current;
|
|
39
39
|
const max = segmentWidth * (index + 1);
|
|
40
40
|
const min = segmentWidth * index;
|
|
41
41
|
const minmax = (totalProgress - min) / (max - min);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/atoms/ProgressBar/ProgressBar.tsx"],"names":["ProgressBar","segments","_segments","valueMin","valueNow","_valueNow","valueMax","color","colorTone","animate","animationParameters","rest","theme","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/atoms/ProgressBar/ProgressBar.tsx"],"names":["ProgressBar","segments","_segments","valueMin","valueNow","_valueNow","valueMax","color","colorTone","animate","animationParameters","rest","theme","animationValue","React","useRef","Animated","Value","current","totalProgress","Math","max","segmentWidth","items","Array","keys","segmentsRender","map","index","min","minmax","width","progressPercent","timing","toValue","duration","length","useNativeDriver","delay","direction","start","rangeAnimation","interpolate","inputRange","outputRange","borderRightWidth","backgroundColor"],"mappings":"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","sourcesContent":["import { useTheme } from '@emotion/react';\nimport * as React from 'react';\nimport { Animated, ViewProps } from 'react-native';\nimport {\n ColorGradationType,\n ColorType,\n ThemeProp\n} from '../../../types/defaults';\nimport { extractNumbersFromString } from '../../../utils';\nimport { Container, Progress, Segment } from './styled';\n\nexport interface ProgressBarProps extends ViewProps {\n /** Number of segments. Defaults to 1. Set to 1 when 0 or less */\n segments?: number;\n /** Minimum possible value (0% of the bar). Defaults to 0 */\n valueMin?: number;\n /** Maximum possible value (100% of the bar). Defaults to 100 */\n valueMax?: number;\n /** Current value */\n valueNow: number | string;\n /** Filled partition color. Defaults to 'primary' */\n color?: ColorType;\n /** Filled partition color tone. Defaults to 'medium' */\n colorTone?: ColorGradationType;\n /** Animation */\n animate: boolean;\n /** Parameters animation */\n animationParameters?: { direction: 'left' | 'right'; duration: number };\n}\n\nconst ProgressBar: React.FC<ProgressBarProps> = ({\n segments: _segments = 1,\n valueMin = 0,\n valueNow: _valueNow,\n valueMax = 100,\n color = 'primary',\n colorTone = 'medium',\n animate,\n animationParameters,\n ...rest\n}) => {\n const theme = useTheme() as ThemeProp;\n const animationValue = React.useRef(new Animated.Value(0)).current;\n\n const valueNow =\n typeof _valueNow === 'string'\n ? extractNumbersFromString(_valueNow)\n : _valueNow;\n\n const totalProgress = ((valueNow - valueMin) / (valueMax - valueMin)) * 100;\n const segments = Math.max(1, _segments);\n const segmentWidth = 100 / Math.max(segments);\n\n const items = [...Array(segments).keys()];\n\n const segmentsRender = items.map(index => {\n \n\n const max = segmentWidth * (index + 1);\n const min = segmentWidth * index;\n const minmax = (totalProgress - min) / (max - min);\n const width = (minmax > 1 ? 1 : minmax < 0 ? 0 : minmax) * 100;\n\n let progressPercent: string | Animated.AnimatedInterpolation = `${width}%`;\n\n if (animate && animationParameters) {\n Animated.timing(animationValue, {\n toValue: 1,\n duration: animationParameters.duration / items.length,\n useNativeDriver: false,\n delay:\n animationParameters.direction === 'right'\n ? index * (animationParameters.duration / items.length)\n : (items.length - index - 1) *\n (animationParameters.duration / items.length),\n }).start();\n\n const rangeAnimation =\n animationParameters?.direction === 'right'\n ? [`${valueMin < 0 ? 0 : valueMin}%`, `${width}%`]\n : [`${valueMax}%`, `${width}%`];\n\n progressPercent = animationValue.interpolate?.({\n inputRange: [0, 1],\n outputRange: rangeAnimation,\n });\n }\n\n return (\n <Segment\n key={index}\n style={{\n borderRightWidth: index == segments - 1 ? 0 : 2,\n }}\n >\n <Progress\n style={{\n width: progressPercent,\n backgroundColor: theme.color[color][colorTone],\n borderRightWidth: width > 0 && width < 100 ? 2 : 0,\n }}\n />\n </Segment>\n );\n });\n\n return <Container {...rest}>{segmentsRender}</Container>;\n};\n\nexport default ProgressBar;\n"],"file":"ProgressBar.js"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import React, { FC } from 'react';
|
|
2
2
|
import { ColorGradationType, ColorType, FontColorType, FontStackType, FontWeightType, TypographyVariationType } from '@tecsinapse/react-core';
|
|
3
3
|
import { StyleProp, TextStyle } from 'react-native';
|
|
4
4
|
export interface TextProps {
|
|
@@ -10,7 +10,10 @@ export interface TextProps {
|
|
|
10
10
|
colorTone?: ColorGradationType;
|
|
11
11
|
numberOfLines?: number;
|
|
12
12
|
ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
|
|
13
|
+
textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
|
|
14
|
+
capitalFirst?: boolean;
|
|
13
15
|
style?: StyleProp<TextStyle>;
|
|
16
|
+
children?: React.ReactNode;
|
|
14
17
|
}
|
|
15
18
|
declare const Text: FC<TextProps>;
|
|
16
19
|
export default Text;
|
|
@@ -7,6 +7,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
7
7
|
|
|
8
8
|
var _styled = require("./styled");
|
|
9
9
|
|
|
10
|
+
var _functions = require("./functions");
|
|
11
|
+
|
|
10
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
13
|
|
|
12
14
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
@@ -21,6 +23,8 @@ const Text = ({
|
|
|
21
23
|
typography = 'base',
|
|
22
24
|
numberOfLines,
|
|
23
25
|
ellipsizeMode,
|
|
26
|
+
textTransform = 'none',
|
|
27
|
+
capitalFirst = false,
|
|
24
28
|
...rest
|
|
25
29
|
}) => {
|
|
26
30
|
return _react.default.createElement(_styled.StyledColoredText, _extends({}, rest, {
|
|
@@ -31,8 +35,9 @@ const Text = ({
|
|
|
31
35
|
fontWeight: fontWeight,
|
|
32
36
|
typography: typography,
|
|
33
37
|
numberOfLines: numberOfLines,
|
|
34
|
-
ellipsizeMode: ellipsizeMode
|
|
35
|
-
|
|
38
|
+
ellipsizeMode: ellipsizeMode,
|
|
39
|
+
textTransform: textTransform
|
|
40
|
+
}), (0, _functions.getLabel)(children, capitalFirst));
|
|
36
41
|
};
|
|
37
42
|
|
|
38
43
|
var _default = Text;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/atoms/Text/Text.tsx"],"names":["Text","children","style","fontColor","colorTone","colorVariant","fontWeight","typography","numberOfLines","ellipsizeMode","rest"],"mappings":";;;;;AAAA;;AAUA;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/atoms/Text/Text.tsx"],"names":["Text","children","style","fontColor","colorTone","colorVariant","fontWeight","typography","numberOfLines","ellipsizeMode","textTransform","capitalFirst","rest"],"mappings":";;;;;AAAA;;AAUA;;AACA;;;;;;AAwBA,MAAMA,IAAmB,GAAG,CAAC;AAC3BC,EAAAA,QAD2B;AAE3BC,EAAAA,KAF2B;AAG3BC,EAAAA,SAAS,GAAG,MAHe;AAI3BC,EAAAA,SAAS,GAAG,QAJe;AAK3BC,EAAAA,YAL2B;AAM3BC,EAAAA,UAAU,GAAG,SANc;AAO3BC,EAAAA,UAAU,GAAG,MAPc;AAQ3BC,EAAAA,aAR2B;AAS3BC,EAAAA,aAT2B;AAU3BC,EAAAA,aAAa,GAAG,MAVW;AAW3BC,EAAAA,YAAY,GAAG,KAXY;AAY3B,KAAGC;AAZwB,CAAD,KAaT;AACjB,SACE,6BAAC,yBAAD,eACMA,IADN;AAEE,IAAA,KAAK,EAAEV,KAFT;AAGE,IAAA,SAAS,EAAEC,SAHb;AAIE,IAAA,SAAS,EAAEC,SAJb;AAKE,IAAA,YAAY,EAAEC,YALhB;AAME,IAAA,UAAU,EAAEC,UANd;AAOE,IAAA,UAAU,EAAEC,UAPd;AAQE,IAAA,aAAa,EAAEC,aARjB;AASE,IAAA,aAAa,EAAEC,aATjB;AAUE,IAAA,aAAa,EAAEC;AAVjB,MAYG,yBAAST,QAAT,EAAmBU,YAAnB,CAZH,CADF;AAgBD,CA9BD;;eAgCeX,I","sourcesContent":["import React, { FC } from 'react';\nimport {\n ColorGradationType,\n ColorType,\n FontColorType,\n FontStackType,\n FontWeightType,\n TypographyVariationType,\n} from '@tecsinapse/react-core';\nimport { StyleProp, TextStyle } from 'react-native';\nimport { StyledColoredText } from './styled';\nimport { getLabel } from './functions';\n\nexport interface TextProps {\n /** Font theme text color */\n fontColor?: FontColorType;\n /** Font theme weight */\n fontWeight?: FontWeightType;\n /** Font theme sizes */\n typography?: TypographyVariationType;\n /** Font theme stack */\n fontStack?: FontStackType;\n /** Palette theme colors. You can specify this prop to override theme fontColor */\n colorVariant?: ColorType;\n /** Palette theme colors gradation */\n colorTone?: ColorGradationType;\n numberOfLines?: number;\n ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';\n textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';\n capitalFirst?: boolean;\n style?: StyleProp<TextStyle>;\n children?: React.ReactNode;\n}\n\n/** NOTE: When using colors, be careful to not override fontColor by using colorVariant and colorTone, referent to theme colors and not text colors. */\nconst Text: FC<TextProps> = ({\n children,\n style,\n fontColor = 'dark',\n colorTone = 'medium',\n colorVariant,\n fontWeight = 'regular',\n typography = 'base',\n numberOfLines,\n ellipsizeMode,\n textTransform = 'none',\n capitalFirst = false,\n ...rest\n}): JSX.Element => {\n return (\n <StyledColoredText\n {...rest}\n style={style}\n fontColor={fontColor}\n colorTone={colorTone}\n colorVariant={colorVariant}\n fontWeight={fontWeight}\n typography={typography}\n numberOfLines={numberOfLines}\n ellipsizeMode={ellipsizeMode}\n textTransform={textTransform}\n >\n {getLabel(children, capitalFirst)}\n </StyledColoredText>\n );\n};\n\nexport default Text;\n"],"file":"Text.js"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.getLabel = exports.getFirstCapitalCharacter = void 0;
|
|
5
|
+
|
|
6
|
+
const getFirstCapitalCharacter = value => value.charAt(0).toUpperCase().concat(value.slice(1));
|
|
7
|
+
|
|
8
|
+
exports.getFirstCapitalCharacter = getFirstCapitalCharacter;
|
|
9
|
+
|
|
10
|
+
const getLabel = (children, capitalFirst) => typeof children === 'string' && capitalFirst ? getFirstCapitalCharacter(children) : children;
|
|
11
|
+
|
|
12
|
+
exports.getLabel = getLabel;
|
|
13
|
+
//# sourceMappingURL=functions.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/atoms/Text/functions.ts"],"names":["getFirstCapitalCharacter","value","charAt","toUpperCase","concat","slice","getLabel","children","capitalFirst"],"mappings":";;;;;AAAO,MAAMA,wBAAwB,GAAIC,KAAD,IACtCA,KAAK,CAACC,MAAN,CAAa,CAAb,EAAgBC,WAAhB,GAA8BC,MAA9B,CAAqCH,KAAK,CAACI,KAAN,CAAY,CAAZ,CAArC,CADK;;;;AAIA,MAAMC,QAAQ,GAAG,CAACC,QAAD,EAAWC,YAAX,KACtB,OAAOD,QAAP,KAAoB,QAApB,IAAgCC,YAAhC,GACIR,wBAAwB,CAACO,QAAD,CAD5B,GAEIA,QAHC","sourcesContent":["export const getFirstCapitalCharacter = (value: string): string =>\n value.charAt(0).toUpperCase().concat(value.slice(1));\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nexport const getLabel = (children, capitalFirst: boolean) =>\n typeof children === 'string' && capitalFirst\n ? getFirstCapitalCharacter(children)\n : children;\n"],"file":"functions.js"}
|
|
@@ -32,6 +32,9 @@ const StyledText = (0, _native.default)(_reactNative.Text)`
|
|
|
32
32
|
theme,
|
|
33
33
|
fontStack = 'default'
|
|
34
34
|
}) => `'${theme.font.stack[fontStack]}'`};
|
|
35
|
+
text-transform: ${({
|
|
36
|
+
textTransform = 'none'
|
|
37
|
+
}) => `${textTransform}`};
|
|
35
38
|
`;
|
|
36
39
|
exports.StyledText = StyledText;
|
|
37
40
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/atoms/Text/styled.ts"],"names":["StyledText","RNText","theme","fontColor","font","color","fontWeight","weight","typography","fontSize","lineHeight","fontStack","stack","colorStyles","colorVariant","colorTone","StyledColoredText"],"mappings":";;;;;AAAA;;AAEA;;;;;;AAEO,MAAMA,UAAU,GAAG,qBAAOC,iBAAP,CAAgD;AAC1E,WAAW,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,SAAS,GAAG;AAArB,CAAD,KAAmCD,KAAK,CAACE,IAAN,CAAWC,KAAX,CAAiBF,SAAjB,CAA4B;AAC1E,iBAAiB,CAAC;AAAED,EAAAA,KAAF;AAASI,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACbJ,KAAK,CAACE,IAAN,CAAWG,MAAX,CAAkBD,UAAlB,CAA8B;AAClC,eAAe,CAAC;AAAEJ,EAAAA,KAAF;AAASM,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACXN,KAAK,CAACM,UAAN,CAAiBA,UAAjB,EAA6BC,QAAS;AAC1C,iBAAiB,CAAC;AAAEP,EAAAA,KAAF;AAASM,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACbN,KAAK,CAACM,UAAN,CAAiBA,UAAjB,EAA6BE,UAAW;AAC5C,iBAAiB,CAAC;AAAER,EAAAA,KAAF;AAASS,EAAAA,SAAS,GAAG;AAArB,CAAD,KACZ,IAAGT,KAAK,CAACE,IAAN,CAAWQ,KAAX,CAAiBD,SAAjB,CAA4B,GAAG;AACvC,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/atoms/Text/styled.ts"],"names":["StyledText","RNText","theme","fontColor","font","color","fontWeight","weight","typography","fontSize","lineHeight","fontStack","stack","textTransform","colorStyles","colorVariant","colorTone","StyledColoredText"],"mappings":";;;;;AAAA;;AAEA;;;;;;AAEO,MAAMA,UAAU,GAAG,qBAAOC,iBAAP,CAAgD;AAC1E,WAAW,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,SAAS,GAAG;AAArB,CAAD,KAAmCD,KAAK,CAACE,IAAN,CAAWC,KAAX,CAAiBF,SAAjB,CAA4B;AAC1E,iBAAiB,CAAC;AAAED,EAAAA,KAAF;AAASI,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACbJ,KAAK,CAACE,IAAN,CAAWG,MAAX,CAAkBD,UAAlB,CAA8B;AAClC,eAAe,CAAC;AAAEJ,EAAAA,KAAF;AAASM,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACXN,KAAK,CAACM,UAAN,CAAiBA,UAAjB,EAA6BC,QAAS;AAC1C,iBAAiB,CAAC;AAAEP,EAAAA,KAAF;AAASM,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACbN,KAAK,CAACM,UAAN,CAAiBA,UAAjB,EAA6BE,UAAW;AAC5C,iBAAiB,CAAC;AAAER,EAAAA,KAAF;AAASS,EAAAA,SAAS,GAAG;AAArB,CAAD,KACZ,IAAGT,KAAK,CAACE,IAAN,CAAWQ,KAAX,CAAiBD,SAAjB,CAA4B,GAAG;AACvC,oBAAoB,CAAC;AAAEE,EAAAA,aAAa,GAAG;AAAlB,CAAD,KAAiC,GAAEA,aAAc,EAAE;AACvE,CAXO;;;AAaP,MAAMC,WAAW,GAAG,CAAC;AACnBC,EAAAA,YADmB;AAEnBC,EAAAA,SAFmB;AAGnBd,EAAAA;AAHmB,CAAD,KAKlBa,YAAY,IACZC,SADA,IAEA,gBAAI;AACN,aAAad,KAAK,CAACG,KAAN,CAAYU,YAAZ,EAA0BC,SAA1B,CAAqC;AAClD,GATA;;AAWO,MAAMC,iBAAiB,GAAG,qBAAOjB,UAAP,EAE/Bc,WAF+B,CAA1B","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { StyleProps, TextProps } from '@tecsinapse/react-core';\nimport { Text as RNText } from 'react-native';\n\nexport const StyledText = styled(RNText)<TextProps & Partial<StyleProps>>`\n color: ${({ theme, fontColor = 'dark' }) => theme.font.color[fontColor]};\n font-weight: ${({ theme, fontWeight = 'regular' }) =>\n theme.font.weight[fontWeight]};\n font-size: ${({ theme, typography = 'base' }) =>\n theme.typography[typography].fontSize};\n line-height: ${({ theme, typography = 'base' }) =>\n theme.typography[typography].lineHeight};\n font-family: ${({ theme, fontStack = 'default' }) =>\n `'${theme.font.stack[fontStack]}'`};\n text-transform: ${({ textTransform = 'none' }) => `${textTransform}`};\n`;\n\nconst colorStyles = ({\n colorVariant,\n colorTone,\n theme,\n}: TextProps & StyleProps) =>\n colorVariant &&\n colorTone &&\n css`\n color: ${theme.color[colorVariant][colorTone]};\n `;\n\nexport const StyledColoredText = styled(StyledText)<\n TextProps & Partial<StyleProps>\n>(colorStyles);\n"],"file":"styled.js"}
|
package/dist/types/defaults.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
export declare type Color = {
|
|
2
3
|
primary: ColorGradation;
|
|
3
4
|
secondary: ColorGradation;
|
|
@@ -111,6 +112,7 @@ export declare type ThemeProp = {
|
|
|
111
112
|
zIndex: ZIndex;
|
|
112
113
|
};
|
|
113
114
|
export interface ThemeProviderProps {
|
|
115
|
+
children?: React.ReactNode;
|
|
114
116
|
theme: ThemeProp;
|
|
115
117
|
}
|
|
116
118
|
export declare type StyleProps = ThemeProviderProps;
|
package/package.json
CHANGED
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/react-core",
|
|
3
3
|
"description": "TecSinapse hybrid React components",
|
|
4
|
-
"version": "1.16.
|
|
4
|
+
"version": "1.16.3",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"types": "dist/index.d.ts",
|
|
8
8
|
"scripts": {
|
|
9
9
|
"start": "yarn build:es --watch",
|
|
10
|
+
"build:es": "cross-env BABEL_ENV=build babel src --root-mode upward --out-dir dist --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
|
|
10
11
|
"build:declaration": "tsc --project tsconfig.build.json",
|
|
11
|
-
"build:
|
|
12
|
+
"build:declaration:watch": "tsc --project tsconfig.build.json --watch",
|
|
13
|
+
"yalc:push": "yalc push --changed",
|
|
14
|
+
"yalc:show": "yalc installations show $npm_package_name"
|
|
12
15
|
},
|
|
13
16
|
"dependencies": {
|
|
14
17
|
"@emotion/native": "^11.0.0",
|
|
@@ -31,5 +34,5 @@
|
|
|
31
34
|
"react-native": "^0.64.0",
|
|
32
35
|
"react-native-vector-icons": "^8.1.0 || ^9.0.0"
|
|
33
36
|
},
|
|
34
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "190dab1b92539a51f19411f1102bdd9ee67c9959"
|
|
35
38
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import currency from 'currency.js';
|
|
2
2
|
import { useCallback, useState } from 'react';
|
|
3
|
-
import { extractNumbersFromString } from '../../../../utils';
|
|
3
|
+
import { extractNumbersFromString } from '../../../../utils/extractNumbersFromString';
|
|
4
4
|
import { MaskValue } from './useStringMask';
|
|
5
5
|
|
|
6
6
|
export type CurrencyOptions = currency.Options;
|
|
@@ -2,7 +2,7 @@ import styled, { css } from '@emotion/native';
|
|
|
2
2
|
import { TextInput } from 'react-native';
|
|
3
3
|
import { InputElementProps } from '.';
|
|
4
4
|
import { StyleProps } from '../../../types/defaults';
|
|
5
|
-
import { RFValueStr } from '../../../utils';
|
|
5
|
+
import { RFValueStr } from '../../../utils/ResponsiveFontSize';
|
|
6
6
|
import { Icon } from '../Icon';
|
|
7
7
|
import { InputContainerProps } from './InputContainer/InputContainer';
|
|
8
8
|
|
|
@@ -40,6 +40,7 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
|
|
|
40
40
|
...rest
|
|
41
41
|
}) => {
|
|
42
42
|
const theme = useTheme() as ThemeProp;
|
|
43
|
+
const animationValue = React.useRef(new Animated.Value(0)).current;
|
|
43
44
|
|
|
44
45
|
const valueNow =
|
|
45
46
|
typeof _valueNow === 'string'
|
|
@@ -53,7 +54,7 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
|
|
|
53
54
|
const items = [...Array(segments).keys()];
|
|
54
55
|
|
|
55
56
|
const segmentsRender = items.map(index => {
|
|
56
|
-
|
|
57
|
+
|
|
57
58
|
|
|
58
59
|
const max = segmentWidth * (index + 1);
|
|
59
60
|
const min = segmentWidth * index;
|
|
@@ -9,6 +9,7 @@ import {
|
|
|
9
9
|
} from '@tecsinapse/react-core';
|
|
10
10
|
import { StyleProp, TextStyle } from 'react-native';
|
|
11
11
|
import { StyledColoredText } from './styled';
|
|
12
|
+
import { getLabel } from './functions';
|
|
12
13
|
|
|
13
14
|
export interface TextProps {
|
|
14
15
|
/** Font theme text color */
|
|
@@ -25,7 +26,10 @@ export interface TextProps {
|
|
|
25
26
|
colorTone?: ColorGradationType;
|
|
26
27
|
numberOfLines?: number;
|
|
27
28
|
ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
|
|
29
|
+
textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
|
|
30
|
+
capitalFirst?: boolean;
|
|
28
31
|
style?: StyleProp<TextStyle>;
|
|
32
|
+
children?: React.ReactNode;
|
|
29
33
|
}
|
|
30
34
|
|
|
31
35
|
/** NOTE: When using colors, be careful to not override fontColor by using colorVariant and colorTone, referent to theme colors and not text colors. */
|
|
@@ -39,6 +43,8 @@ const Text: FC<TextProps> = ({
|
|
|
39
43
|
typography = 'base',
|
|
40
44
|
numberOfLines,
|
|
41
45
|
ellipsizeMode,
|
|
46
|
+
textTransform = 'none',
|
|
47
|
+
capitalFirst = false,
|
|
42
48
|
...rest
|
|
43
49
|
}): JSX.Element => {
|
|
44
50
|
return (
|
|
@@ -52,8 +58,9 @@ const Text: FC<TextProps> = ({
|
|
|
52
58
|
typography={typography}
|
|
53
59
|
numberOfLines={numberOfLines}
|
|
54
60
|
ellipsizeMode={ellipsizeMode}
|
|
61
|
+
textTransform={textTransform}
|
|
55
62
|
>
|
|
56
|
-
{children}
|
|
63
|
+
{getLabel(children, capitalFirst)}
|
|
57
64
|
</StyledColoredText>
|
|
58
65
|
);
|
|
59
66
|
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export const getFirstCapitalCharacter = (value: string): string =>
|
|
2
|
+
value.charAt(0).toUpperCase().concat(value.slice(1));
|
|
3
|
+
|
|
4
|
+
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
|
5
|
+
export const getLabel = (children, capitalFirst: boolean) =>
|
|
6
|
+
typeof children === 'string' && capitalFirst
|
|
7
|
+
? getFirstCapitalCharacter(children)
|
|
8
|
+
: children;
|
|
@@ -12,6 +12,7 @@ export const StyledText = styled(RNText)<TextProps & Partial<StyleProps>>`
|
|
|
12
12
|
theme.typography[typography].lineHeight};
|
|
13
13
|
font-family: ${({ theme, fontStack = 'default' }) =>
|
|
14
14
|
`'${theme.font.stack[fontStack]}'`};
|
|
15
|
+
text-transform: ${({ textTransform = 'none' }) => `${textTransform}`};
|
|
15
16
|
`;
|
|
16
17
|
|
|
17
18
|
const colorStyles = ({
|