@axelor/aos-mobile-ui 6.4.0 → 6.4.2
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 +2 -1
- package/lib/components/atoms/HtmlInput/HtmlInput.d.ts +8 -1
- package/lib/components/atoms/HtmlInput/HtmlInput.js +30 -20
- package/lib/components/atoms/HtmlInput/HtmlInput.js.map +1 -1
- package/lib/components/atoms/index.d.ts +0 -1
- package/lib/components/atoms/index.js +0 -1
- package/lib/components/atoms/index.js.map +1 -1
- package/lib/components/molecules/Badge/Badge.d.ts +2 -2
- package/lib/components/molecules/Badge/Badge.js +4 -2
- package/lib/components/molecules/Badge/Badge.js.map +1 -1
- package/lib/components/molecules/Checkbox/Checkbox.d.ts +11 -0
- package/lib/components/molecules/Checkbox/Checkbox.js +52 -0
- package/lib/components/molecules/Checkbox/Checkbox.js.map +1 -0
- package/lib/components/molecules/Chip/Chip.d.ts +3 -2
- package/lib/components/molecules/Chip/Chip.js +2 -2
- package/lib/components/molecules/Chip/Chip.js.map +1 -1
- package/lib/components/molecules/CircleButton/CircleButton.d.ts +8 -0
- package/lib/components/molecules/CircleButton/CircleButton.js +47 -0
- package/lib/components/molecules/CircleButton/CircleButton.js.map +1 -0
- package/lib/components/molecules/FormHtmlInput/FormHtmlInput.d.ts +11 -0
- package/lib/components/molecules/FormHtmlInput/FormHtmlInput.js +71 -0
- package/lib/components/molecules/FormHtmlInput/FormHtmlInput.js.map +1 -0
- package/lib/components/molecules/FormIncrementInput/FormIncrementInput.d.ts +11 -0
- package/lib/components/molecules/FormIncrementInput/FormIncrementInput.js +72 -0
- package/lib/components/molecules/FormIncrementInput/FormIncrementInput.js.map +1 -0
- package/lib/components/molecules/FormInput/FormInput.d.ts +11 -0
- package/lib/components/molecules/FormInput/FormInput.js +72 -0
- package/lib/components/molecules/FormInput/FormInput.js.map +1 -0
- package/lib/components/molecules/IconButton/IconButton.d.ts +2 -1
- package/lib/components/molecules/IconButton/IconButton.js +2 -2
- package/lib/components/molecules/IconButton/IconButton.js.map +1 -1
- package/lib/components/molecules/IconInput/IconInput.d.ts +2 -1
- package/lib/components/molecules/IconInput/IconInput.js +18 -5
- package/lib/components/molecules/IconInput/IconInput.js.map +1 -1
- package/lib/components/molecules/Increment/Increment.d.ts +5 -1
- package/lib/components/molecules/Increment/Increment.js +30 -15
- package/lib/components/molecules/Increment/Increment.js.map +1 -1
- package/lib/components/molecules/MessageBox/MessageBox.js +20 -11
- package/lib/components/molecules/MessageBox/MessageBox.js.map +1 -1
- package/lib/components/molecules/NotesCard/NotesCard.d.ts +2 -1
- package/lib/components/molecules/NotesCard/NotesCard.js +13 -15
- package/lib/components/molecules/NotesCard/NotesCard.js.map +1 -1
- package/lib/components/molecules/PanelTabs/PanelTabs.d.ts +13 -0
- package/lib/components/molecules/PanelTabs/PanelTabs.js +93 -0
- package/lib/components/molecules/PanelTabs/PanelTabs.js.map +1 -0
- package/lib/components/molecules/ViewAllContainer/ViewAllContainer.d.ts +4 -4
- package/lib/components/molecules/index.d.ts +4 -0
- package/lib/components/molecules/index.js +4 -0
- package/lib/components/molecules/index.js.map +1 -1
- package/lib/components/organisms/AutoCompleteSearch/AutoCompleteSearch.js +59 -60
- package/lib/components/organisms/AutoCompleteSearch/AutoCompleteSearch.js.map +1 -1
- package/lib/components/organisms/ChipSelect/ChipSelect.d.ts +14 -3
- package/lib/components/organisms/ChipSelect/ChipSelect.js +39 -6
- package/lib/components/organisms/ChipSelect/ChipSelect.js.map +1 -1
- package/lib/components/organisms/FloatingButton/FloatingButton.d.ts +16 -0
- package/lib/components/organisms/FloatingButton/FloatingButton.js +106 -0
- package/lib/components/organisms/FloatingButton/FloatingButton.js.map +1 -0
- package/lib/components/organisms/MultiSelectValue/MultiSelectValue.d.ts +9 -0
- package/lib/components/organisms/MultiSelectValue/MultiSelectValue.js +49 -0
- package/lib/components/organisms/MultiSelectValue/MultiSelectValue.js.map +1 -0
- package/lib/components/organisms/MultiValuePicker/MultiValuePicker.d.ts +3 -3
- package/lib/components/organisms/MultiValuePicker/MultiValuePicker.js +16 -11
- package/lib/components/organisms/MultiValuePicker/MultiValuePicker.js.map +1 -1
- package/lib/components/organisms/Picker/Picker.d.ts +3 -1
- package/lib/components/organisms/Picker/Picker.js +29 -7
- package/lib/components/organisms/Picker/Picker.js.map +1 -1
- package/lib/components/organisms/SearchBar/SearchBar.d.ts +2 -1
- package/lib/components/organisms/SearchBar/SearchBar.js +2 -2
- package/lib/components/organisms/SearchBar/SearchBar.js.map +1 -1
- package/lib/components/organisms/index.d.ts +2 -0
- package/lib/components/organisms/index.js +2 -0
- package/lib/components/organisms/index.js.map +1 -1
- package/lib/index.d.ts +1 -2
- package/lib/index.js +1 -2
- package/lib/index.js.map +1 -1
- package/lib/utils/commons-styles.d.ts +13 -1
- package/lib/utils/commons-styles.js +13 -1
- package/lib/utils/commons-styles.js.map +1 -1
- package/lib/utils/commons-utlis.d.ts +1 -0
- package/lib/utils/{headerStyle.js → commons-utlis.js} +7 -14
- package/lib/utils/commons-utlis.js.map +1 -0
- package/lib/utils/formatters.d.ts +1 -0
- package/lib/utils/formatters.js +10 -0
- package/lib/utils/formatters.js.map +1 -1
- package/lib/utils/strings.js +1 -1
- package/lib/utils/strings.js.map +1 -1
- package/package.json +3 -4
- package/lib/components/atoms/RenderHtml/RenderHtml.d.ts +0 -6
- package/lib/components/atoms/RenderHtml/RenderHtml.js +0 -50
- package/lib/components/atoms/RenderHtml/RenderHtml.js.map +0 -1
- package/lib/utils/headerStyle.d.ts +0 -12
- package/lib/utils/headerStyle.js.map +0 -1
package/README.md
CHANGED
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
This package was developed for the [Axelor Open Mobile](https://github.com/axelor/axelor-mobile) application.
|
|
10
10
|
|
|
11
11
|
It contains:
|
|
12
|
+
|
|
12
13
|
- Basic components to create screens
|
|
13
14
|
- Themes management system with basic light theme and a color blind theme
|
|
14
15
|
- Writing themes management system with basic theme
|
|
@@ -90,7 +91,7 @@ export interface ThemeColors {
|
|
|
90
91
|
}
|
|
91
92
|
|
|
92
93
|
export interface Color {
|
|
93
|
-
background_light: string; // This color is a lighter variation of the main color
|
|
94
|
+
background_light: string; // This color is a lighter variation of the main color
|
|
94
95
|
foreground: string; // This color is mainly used for text to maintain a good contrast with the background color
|
|
95
96
|
background: string; // This is the main color for this structure
|
|
96
97
|
}
|
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
interface HtmlInputProps {
|
|
2
2
|
style?: any;
|
|
3
3
|
styleToolbar?: any;
|
|
4
|
+
containerStyle?: any;
|
|
5
|
+
editorBackgroundColor?: string;
|
|
4
6
|
title?: string;
|
|
7
|
+
placeholder?: string;
|
|
5
8
|
onChange?: (value: string) => void;
|
|
6
9
|
defaultInput?: string;
|
|
10
|
+
readonly?: boolean;
|
|
11
|
+
onHeightChange?: (height: number) => void;
|
|
12
|
+
onFocus?: () => void;
|
|
13
|
+
onBlur?: () => void;
|
|
7
14
|
}
|
|
8
|
-
declare const HtmlInput: ({ style, styleToolbar, title, onChange, defaultInput, }: HtmlInputProps) => JSX.Element;
|
|
15
|
+
declare const HtmlInput: ({ style, styleToolbar, containerStyle, editorBackgroundColor, title, placeholder, onChange, defaultInput, readonly, onHeightChange, onFocus, onBlur, }: HtmlInputProps) => JSX.Element;
|
|
9
16
|
export default HtmlInput;
|
|
@@ -15,35 +15,45 @@
|
|
|
15
15
|
* You should have received a copy of the GNU Affero General Public License
|
|
16
16
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
17
17
|
*/
|
|
18
|
-
import React, { useRef } from 'react';
|
|
18
|
+
import React, { useEffect, useRef } from 'react';
|
|
19
19
|
import { View, ScrollView } from 'react-native';
|
|
20
20
|
import { useThemeColor } from '../../../theme/ThemeContext';
|
|
21
21
|
import { actions, RichEditor, RichToolbar } from 'react-native-pell-rich-editor';
|
|
22
22
|
import Text from '../Text/Text';
|
|
23
|
-
const HtmlInput = ({ style, styleToolbar, title = '', onChange = () => { }, defaultInput = '', }) => {
|
|
23
|
+
const HtmlInput = ({ style, styleToolbar, containerStyle, editorBackgroundColor, title, placeholder = '', onChange = () => { }, defaultInput = '', readonly = false, onHeightChange = () => { }, onFocus = () => { }, onBlur = () => { }, }) => {
|
|
24
24
|
const Colors = useThemeColor();
|
|
25
|
-
const
|
|
26
|
-
|
|
25
|
+
const editor = useRef(null);
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
if (defaultInput == null || defaultInput === '') {
|
|
28
|
+
editor.current.setContentHTML('');
|
|
29
|
+
if (editor.current.isKeyboardOpen) {
|
|
30
|
+
editor.current.dismissKeyboard();
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}, [defaultInput]);
|
|
34
|
+
return (<ScrollView contentContainerStyle={containerStyle}>
|
|
27
35
|
<ScrollView style={[style]}>
|
|
28
36
|
<View>
|
|
29
|
-
<Text>{title}</Text>
|
|
30
|
-
<RichEditor ref={
|
|
37
|
+
{title != null ? <Text>{title}</Text> : null}
|
|
38
|
+
<RichEditor ref={editor} placeholder={placeholder} androidHardwareAccelerationDisabled={true} initialContentHTML={defaultInput} onChange={onChange} disabled={readonly} editorStyle={{
|
|
39
|
+
backgroundColor: editorBackgroundColor || Colors.backgroundColor,
|
|
40
|
+
color: Colors.text,
|
|
41
|
+
placeholderColor: Colors.placeholderTextColor,
|
|
42
|
+
}} onHeightChange={onHeightChange} onFocus={onFocus} onBlur={onBlur}/>
|
|
31
43
|
</View>
|
|
32
44
|
</ScrollView>
|
|
33
|
-
<RichToolbar style={styleToolbar} editor={
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
[actions.heading1]: ({ tintColor }) => (<Text style={[{ color: tintColor }]}>H1</Text>),
|
|
46
|
-
}}/>
|
|
45
|
+
{!readonly && (<RichToolbar style={styleToolbar} editor={editor} selectedIconTint={Colors.primaryColor.background} iconTint={Colors.primaryColor.foreground} actions={[
|
|
46
|
+
actions.setBold,
|
|
47
|
+
actions.setItalic,
|
|
48
|
+
actions.insertBulletsList,
|
|
49
|
+
actions.insertOrderedList,
|
|
50
|
+
actions.insertLink,
|
|
51
|
+
actions.setStrikethrough,
|
|
52
|
+
actions.setUnderline,
|
|
53
|
+
actions.checkboxList,
|
|
54
|
+
actions.undo,
|
|
55
|
+
actions.redo,
|
|
56
|
+
]}/>)}
|
|
47
57
|
</ScrollView>);
|
|
48
58
|
};
|
|
49
59
|
export default HtmlInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HtmlInput.js","sourceRoot":"","sources":["../../../../src/components/atoms/HtmlInput/HtmlInput.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,MAAM,EAAC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"HtmlInput.js","sourceRoot":"","sources":["../../../../src/components/atoms/HtmlInput/HtmlInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,7 +5,6 @@ export { default as HtmlInput } from './HtmlInput/HtmlInput';
|
|
|
5
5
|
export { default as DottedLine } from './DottedLine/DottedLine';
|
|
6
6
|
export { default as Icon } from './Icon/Icon';
|
|
7
7
|
export { default as Input } from './Input/Input';
|
|
8
|
-
export { default as RenderHtml } from './RenderHtml/RenderHtml';
|
|
9
8
|
export { default as Screen } from './Screen/Screen';
|
|
10
9
|
export { default as ScrollView } from './ScrollView/ScrollView';
|
|
11
10
|
export { default as Switch } from './Switch/Switch';
|
|
@@ -22,7 +22,6 @@ export { default as HtmlInput } from './HtmlInput/HtmlInput';
|
|
|
22
22
|
export { default as DottedLine } from './DottedLine/DottedLine';
|
|
23
23
|
export { default as Icon } from './Icon/Icon';
|
|
24
24
|
export { default as Input } from './Input/Input';
|
|
25
|
-
export { default as RenderHtml } from './RenderHtml/RenderHtml';
|
|
26
25
|
export { default as Screen } from './Screen/Screen';
|
|
27
26
|
export { default as ScrollView } from './ScrollView/ScrollView';
|
|
28
27
|
export { default as Switch } from './Switch/Switch';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/atoms/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAC,OAAO,IAAI,sBAAsB,EAAC,MAAM,iDAAiD,CAAC;AAClG,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAC,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/atoms/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAC,OAAO,IAAI,sBAAsB,EAAC,MAAM,iDAAiD,CAAC;AAClG,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAC,OAAO,IAAI,cAAc,EAAC,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAC,OAAO,IAAI,KAAK,EAAC,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAC,OAAO,IAAI,UAAU,EAAC,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAC,OAAO,IAAI,MAAM,EAAC,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAC,OAAO,IAAI,IAAI,EAAC,MAAM,aAAa,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { Color } from '../../../theme
|
|
1
|
+
import { Color } from '../../../theme';
|
|
2
2
|
interface BadgeProps {
|
|
3
3
|
style?: any;
|
|
4
4
|
txtStyle?: any;
|
|
5
5
|
title: string | number;
|
|
6
|
-
color
|
|
6
|
+
color?: Color;
|
|
7
7
|
numberOfLines?: number;
|
|
8
8
|
}
|
|
9
9
|
declare const Badge: ({ style, txtStyle, title, color, numberOfLines, }: BadgeProps) => JSX.Element;
|
|
@@ -17,9 +17,11 @@
|
|
|
17
17
|
*/
|
|
18
18
|
import React, { useMemo } from 'react';
|
|
19
19
|
import { StyleSheet, View } from 'react-native';
|
|
20
|
+
import { useThemeColor } from '../../../theme';
|
|
20
21
|
import { Text } from '../../atoms';
|
|
21
|
-
const Badge = ({ style, txtStyle, title, color, numberOfLines = 1, }) => {
|
|
22
|
-
const
|
|
22
|
+
const Badge = ({ style, txtStyle, title, color = null, numberOfLines = 1, }) => {
|
|
23
|
+
const Colors = useThemeColor();
|
|
24
|
+
const badgeStyle = useMemo(() => getStyles(color || Colors.primaryColor), [color, Colors]);
|
|
23
25
|
return (<View style={[badgeStyle.container, style]}>
|
|
24
26
|
<Text style={txtStyle} numberOfLines={numberOfLines} textColor={color?.foreground} fontSize={14}>
|
|
25
27
|
{title}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../src/components/molecules/Badge/Badge.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../src/components/molecules/Badge/Badge.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAQ,aAAa,EAAC,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAC,IAAI,EAAC,MAAM,aAAa,CAAC;AAUjC,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,GAAG,IAAI,EACZ,aAAa,GAAG,CAAC,GACN,EAAE,EAAE;IACf,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAC/B,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,IAAI,MAAM,CAAC,YAAY,CAAC,EAC7C,CAAC,KAAK,EAAE,MAAM,CAAC,CAChB,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CACzC;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,QAAQ,CAAC,CAChB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,SAAS,CAAC,CAAC,KAAK,EAAE,UAAU,CAAC,CAC7B,QAAQ,CAAC,CAAC,EAAE,CAAC,CACb;QAAA,CAAC,KAAK,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,KAAK,CAAC,EAAE,CACxB,UAAU,CAAC,MAAM,CAAC;IAChB,SAAS,EAAE;QACT,eAAe,EAAE,KAAK,CAAC,gBAAgB;QACvC,WAAW,EAAE,KAAK,CAAC,UAAU;QAC7B,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,CAAC;QACf,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;CACF,CAAC,CAAC;AAEL,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
interface CheckboxProps {
|
|
2
|
+
style?: any;
|
|
3
|
+
styleTxt?: any;
|
|
4
|
+
iconSize?: number;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
title: string;
|
|
7
|
+
isDefaultChecked: boolean;
|
|
8
|
+
onChange: (any: any) => void;
|
|
9
|
+
}
|
|
10
|
+
declare const Checkbox: ({ style, styleTxt, iconSize, disabled, title, isDefaultChecked, onChange, }: CheckboxProps) => JSX.Element;
|
|
11
|
+
export default Checkbox;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Axelor Business Solutions
|
|
3
|
+
*
|
|
4
|
+
* Copyright (C) 2023 Axelor (<http://axelor.com>).
|
|
5
|
+
*
|
|
6
|
+
* This program is free software: you can redistribute it and/or modify
|
|
7
|
+
* it under the terms of the GNU Affero General Public License, version 3,
|
|
8
|
+
* as published by the Free Software Foundation.
|
|
9
|
+
*
|
|
10
|
+
* This program is distributed in the hope that it will be useful,
|
|
11
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
12
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
13
|
+
* GNU Affero General Public License for more details.
|
|
14
|
+
*
|
|
15
|
+
* You should have received a copy of the GNU Affero General Public License
|
|
16
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
17
|
+
*/
|
|
18
|
+
import React, { useMemo, useState } from 'react';
|
|
19
|
+
import { StyleSheet, View } from 'react-native';
|
|
20
|
+
import { useThemeColor } from '../../../theme/ThemeContext';
|
|
21
|
+
import { Icon, Text } from '../../atoms';
|
|
22
|
+
const Checkbox = ({ style, styleTxt, iconSize = 30, disabled = false, title, isDefaultChecked = false, onChange, }) => {
|
|
23
|
+
const Colors = useThemeColor();
|
|
24
|
+
const [isChecked, setIsChecked] = useState(isDefaultChecked);
|
|
25
|
+
const iconName = useMemo(() => (isChecked ? 'check-square' : 'square-o'), [isChecked]);
|
|
26
|
+
const handleToggle = () => {
|
|
27
|
+
onChange(!isChecked);
|
|
28
|
+
setIsChecked(!isChecked);
|
|
29
|
+
};
|
|
30
|
+
return (<View style={[styles.container, style]}>
|
|
31
|
+
<Icon name={iconName} FontAwesome5={false} color={disabled
|
|
32
|
+
? Colors.secondaryColor.background
|
|
33
|
+
: Colors.primaryColor.background} size={iconSize} touchable={!disabled} onPress={handleToggle}/>
|
|
34
|
+
<Text style={[styles.title, styleTxt]} textColor={Colors.text} fontSize={14}>
|
|
35
|
+
{title}
|
|
36
|
+
</Text>
|
|
37
|
+
</View>);
|
|
38
|
+
};
|
|
39
|
+
const styles = StyleSheet.create({
|
|
40
|
+
container: {
|
|
41
|
+
flexDirection: 'row',
|
|
42
|
+
justifyContent: 'flex-start',
|
|
43
|
+
alignItems: 'center',
|
|
44
|
+
},
|
|
45
|
+
title: {
|
|
46
|
+
fontSize: 16,
|
|
47
|
+
marginLeft: 5,
|
|
48
|
+
fontWeight: '600',
|
|
49
|
+
},
|
|
50
|
+
});
|
|
51
|
+
export default Checkbox;
|
|
52
|
+
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/molecules/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAC,IAAI,EAAE,IAAI,EAAC,MAAM,aAAa,CAAC;AAYvC,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,gBAAgB,GAAG,KAAK,EACxB,QAAQ,GACM,EAAE,EAAE;IAClB,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAC/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAE7D,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,EAC/C,CAAC,SAAS,CAAC,CACZ,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC;QACrB,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CACrC;MAAA,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,YAAY,CAAC,CAAC,KAAK,CAAC,CACpB,KAAK,CAAC,CACJ,QAAQ;YACN,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,UAAU;YAClC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,CACnC,CACD,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CACrB,OAAO,CAAC,CAAC,YAAY,CAAC,EAExB;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAChC,SAAS,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CACvB,QAAQ,CAAC,CAAC,EAAE,CAAC,CACb;QAAA,CAAC,KAAK,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,YAAY;QAC5B,UAAU,EAAE,QAAQ;KACrB;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,CAAC;QACb,UAAU,EAAE,KAAK;KAClB;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC"}
|
|
@@ -3,9 +3,10 @@ interface ChipProps {
|
|
|
3
3
|
selected: boolean;
|
|
4
4
|
title: string;
|
|
5
5
|
onPress: (any: any) => void;
|
|
6
|
-
selectedColor
|
|
6
|
+
selectedColor?: Color;
|
|
7
7
|
width?: number;
|
|
8
8
|
marginHorizontal?: number;
|
|
9
|
+
style?: any;
|
|
9
10
|
}
|
|
10
|
-
declare const Chip: ({ selected, title, onPress, selectedColor, width, marginHorizontal, }: ChipProps) => JSX.Element;
|
|
11
|
+
declare const Chip: ({ selected, title, onPress, selectedColor, width, marginHorizontal, style, }: ChipProps) => JSX.Element;
|
|
11
12
|
export default Chip;
|
|
@@ -19,13 +19,13 @@ import React, { useMemo } from 'react';
|
|
|
19
19
|
import { Dimensions, StyleSheet, View, TouchableOpacity } from 'react-native';
|
|
20
20
|
import { Text } from '../../atoms';
|
|
21
21
|
import { useThemeColor } from '../../../theme/ThemeContext';
|
|
22
|
-
const Chip = ({ selected, title, onPress, selectedColor, width = Dimensions.get('window').width * 0.4, marginHorizontal = 12, }) => {
|
|
22
|
+
const Chip = ({ selected, title, onPress, selectedColor = null, width = Dimensions.get('window').width * 0.4, marginHorizontal = 12, style, }) => {
|
|
23
23
|
const Colors = useThemeColor();
|
|
24
24
|
const chipColor = useMemo(() => (selectedColor == null ? Colors.primaryColor : selectedColor), [Colors.primaryColor, selectedColor]);
|
|
25
25
|
const colorStyle = useMemo(() => selected
|
|
26
26
|
? getStyles(chipColor, Colors).selected
|
|
27
27
|
: getStyles(chipColor, Colors).notSelected, [Colors, chipColor, selected]);
|
|
28
|
-
return (<TouchableOpacity style={getWidth(width, marginHorizontal)} onPress={onPress} activeOpacity={0.8}>
|
|
28
|
+
return (<TouchableOpacity style={[getWidth(width, marginHorizontal), style]} onPress={onPress} activeOpacity={0.8}>
|
|
29
29
|
<View style={[styles.container, colorStyle]}>
|
|
30
30
|
<Text textColor={selected ? chipColor.foreground : Colors.text} fontSize={14}>
|
|
31
31
|
{title}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../../src/components/molecules/Chip/Chip.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EAAC,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAC,IAAI,EAAC,MAAM,aAAa,CAAC;AACjC,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../../src/components/molecules/Chip/Chip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Axelor Business Solutions
|
|
3
|
+
*
|
|
4
|
+
* Copyright (C) 2023 Axelor (<http://axelor.com>).
|
|
5
|
+
*
|
|
6
|
+
* This program is free software: you can redistribute it and/or modify
|
|
7
|
+
* it under the terms of the GNU Affero General Public License, version 3,
|
|
8
|
+
* as published by the Free Software Foundation.
|
|
9
|
+
*
|
|
10
|
+
* This program is distributed in the hope that it will be useful,
|
|
11
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
12
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
13
|
+
* GNU Affero General Public License for more details.
|
|
14
|
+
*
|
|
15
|
+
* You should have received a copy of the GNU Affero General Public License
|
|
16
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
17
|
+
*/
|
|
18
|
+
import React, { useMemo } from 'react';
|
|
19
|
+
import { StyleSheet, TouchableOpacity } from 'react-native';
|
|
20
|
+
import { useThemeColor } from '../../../theme/ThemeContext';
|
|
21
|
+
import { Icon } from '../../atoms';
|
|
22
|
+
const BUTTON_SIZE = 50;
|
|
23
|
+
const CircleButton = ({ style, disabled = false, iconName, size = BUTTON_SIZE, onPress, }) => {
|
|
24
|
+
const Colors = useThemeColor();
|
|
25
|
+
const color = useMemo(() => (disabled ? Colors.secondaryColor : Colors.primaryColor), [Colors, disabled]);
|
|
26
|
+
const styles = useMemo(() => getStyles(color.background, size), [color, size]);
|
|
27
|
+
const iconSize = useMemo(() => Math.floor(size / 2), [size]);
|
|
28
|
+
return (<TouchableOpacity style={[styles.container, style]} onPress={onPress} disabled={disabled} activeOpacity={0.8}>
|
|
29
|
+
<Icon name={iconName} color={color.foreground} size={iconSize} style={styles.icon}/>
|
|
30
|
+
</TouchableOpacity>);
|
|
31
|
+
};
|
|
32
|
+
const getStyles = (color, size) => StyleSheet.create({
|
|
33
|
+
container: {
|
|
34
|
+
backgroundColor: color,
|
|
35
|
+
borderRadius: size,
|
|
36
|
+
width: size,
|
|
37
|
+
height: size,
|
|
38
|
+
flexDirection: 'row',
|
|
39
|
+
justifyContent: 'center',
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
},
|
|
42
|
+
icon: {
|
|
43
|
+
alignSelf: 'center',
|
|
44
|
+
},
|
|
45
|
+
});
|
|
46
|
+
export default CircleButton;
|
|
47
|
+
//# sourceMappingURL=CircleButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CircleButton.js","sourceRoot":"","sources":["../../../../src/components/molecules/CircleButton/CircleButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAE1D,OAAO,EAAC,IAAI,EAAC,MAAM,aAAa,CAAC;AAEjC,MAAM,WAAW,GAAG,EAAE,CAAC;AAEvB,MAAM,YAAY,GAAG,CAAC,EACpB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,IAAI,GAAG,WAAW,EAClB,OAAO,GAOR,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAC/B,MAAM,KAAK,GAAU,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,EAC9D,CAAC,MAAM,EAAE,QAAQ,CAAC,CACnB,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,EAAE,IAAI,CAAC,EACvC,CAAC,KAAK,EAAE,IAAI,CAAC,CACd,CAAC;IACF,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAE7D,OAAO,CACL,CAAC,gBAAgB,CACf,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CACjC,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,aAAa,CAAC,CAAC,GAAG,CAAC,CACnB;MAAA,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CACxB,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,EAEvB;IAAA,EAAE,gBAAgB,CAAC,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CAChC,UAAU,CAAC,MAAM,CAAC;IAChB,SAAS,EAAE;QACT,eAAe,EAAE,KAAK;QACtB,YAAY,EAAE,IAAI;QAClB,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACrB;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC,CAAC;AAEL,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
interface FormHtmlInputProps {
|
|
2
|
+
title: string;
|
|
3
|
+
placeholder?: string;
|
|
4
|
+
defaultValue?: string;
|
|
5
|
+
readonly?: boolean;
|
|
6
|
+
style?: any;
|
|
7
|
+
required?: boolean;
|
|
8
|
+
onChange?: (any: any) => void;
|
|
9
|
+
}
|
|
10
|
+
declare const FormHtmlInput: ({ title, placeholder, defaultValue, readonly, style, required, onChange, }: FormHtmlInputProps) => JSX.Element;
|
|
11
|
+
export default FormHtmlInput;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Axelor Business Solutions
|
|
3
|
+
*
|
|
4
|
+
* Copyright (C) 2023 Axelor (<http://axelor.com>).
|
|
5
|
+
*
|
|
6
|
+
* This program is free software: you can redistribute it and/or modify
|
|
7
|
+
* it under the terms of the GNU Affero General Public License, version 3,
|
|
8
|
+
* as published by the Free Software Foundation.
|
|
9
|
+
*
|
|
10
|
+
* This program is distributed in the hope that it will be useful,
|
|
11
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
12
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
13
|
+
* GNU Affero General Public License for more details.
|
|
14
|
+
*
|
|
15
|
+
* You should have received a copy of the GNU Affero General Public License
|
|
16
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
17
|
+
*/
|
|
18
|
+
import React, { useCallback, useMemo, useState } from 'react';
|
|
19
|
+
import { StyleSheet, View } from 'react-native';
|
|
20
|
+
import { HtmlInput, Text } from '../../atoms';
|
|
21
|
+
import { useThemeColor } from '../../../theme/ThemeContext';
|
|
22
|
+
import { getCommonStyles } from '../../../utils/commons-styles';
|
|
23
|
+
const FormHtmlInput = ({ title, placeholder = '', defaultValue = null, readonly = false, style, required = false, onChange = () => { }, }) => {
|
|
24
|
+
const Colors = useThemeColor();
|
|
25
|
+
const [value, setValue] = useState(defaultValue);
|
|
26
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
27
|
+
const _required = useMemo(() => required && (value == null || value === ''), [required, value]);
|
|
28
|
+
const onValueChange = useCallback(_value => {
|
|
29
|
+
setValue(_value);
|
|
30
|
+
onChange(_value);
|
|
31
|
+
}, [onChange]);
|
|
32
|
+
const commonStyles = useMemo(() => getCommonStyles(Colors, _required), [Colors, _required]);
|
|
33
|
+
const styles = useMemo(() => getStyles(Colors, _required), [Colors, _required]);
|
|
34
|
+
const handleFocus = () => {
|
|
35
|
+
setIsFocused(true);
|
|
36
|
+
};
|
|
37
|
+
const handleBlur = () => {
|
|
38
|
+
setIsFocused(false);
|
|
39
|
+
};
|
|
40
|
+
return (<View style={style}>
|
|
41
|
+
<Text style={styles.title}>{title}</Text>
|
|
42
|
+
<View style={[
|
|
43
|
+
commonStyles.filter,
|
|
44
|
+
styles.content,
|
|
45
|
+
isFocused && commonStyles.inputFocused,
|
|
46
|
+
]}>
|
|
47
|
+
<HtmlInput defaultInput={value} onChange={onValueChange} placeholder={placeholder} readonly={readonly} style={styles.input} styleToolbar={styles.htmlToolBar} onFocus={handleFocus} onBlur={handleBlur}/>
|
|
48
|
+
</View>
|
|
49
|
+
</View>);
|
|
50
|
+
};
|
|
51
|
+
const getStyles = (Colors, _required) => StyleSheet.create({
|
|
52
|
+
content: {
|
|
53
|
+
width: '90%',
|
|
54
|
+
borderColor: _required
|
|
55
|
+
? Colors.errorColor.background
|
|
56
|
+
: Colors.secondaryColor.background,
|
|
57
|
+
borderWidth: 1,
|
|
58
|
+
},
|
|
59
|
+
htmlToolBar: {
|
|
60
|
+
backgroundColor: null,
|
|
61
|
+
marginLeft: -5,
|
|
62
|
+
},
|
|
63
|
+
input: {
|
|
64
|
+
width: '100%',
|
|
65
|
+
},
|
|
66
|
+
title: {
|
|
67
|
+
marginLeft: 10,
|
|
68
|
+
},
|
|
69
|
+
});
|
|
70
|
+
export default FormHtmlInput;
|
|
71
|
+
//# sourceMappingURL=FormHtmlInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormHtmlInput.js","sourceRoot":"","sources":["../../../../src/components/molecules/FormHtmlInput/FormHtmlInput.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,EAAC,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAC,UAAU,EAAE,IAAI,EAAC,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAC,SAAS,EAAE,IAAI,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAC,aAAa,EAAC,MAAM,6BAA6B,CAAC;AAE1D,OAAO,EAAC,eAAe,EAAC,MAAM,+BAA+B,CAAC;AAY9D,MAAM,aAAa,GAAG,CAAC,EACrB,KAAK,EACL,WAAW,GAAG,EAAE,EAChB,YAAY,GAAG,IAAI,EACnB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,GACA,EAAE,EAAE;IACvB,MAAM,MAAM,GAAG,aAAa,EAAE,CAAC;IAE/B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,QAAQ,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC,EACjD,CAAC,QAAQ,EAAE,KAAK,CAAC,CAClB,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,MAAM,CAAC,EAAE;QACP,QAAQ,CAAC,MAAM,CAAC,CAAC;QACjB,QAAQ,CAAC,MAAM,CAAC,CAAC;IACnB,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,eAAe,CAAC,MAAM,EAAE,SAAS,CAAC,EACxC,CAAC,MAAM,EAAE,SAAS,CAAC,CACpB,CAAC;IAEF,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,EAClC,CAAC,MAAM,EAAE,SAAS,CAAC,CACpB,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,YAAY,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CACjB;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CACxC;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,YAAY,CAAC,MAAM;YACnB,MAAM,CAAC,OAAO;YACd,SAAS,IAAI,YAAY,CAAC,YAAY;SACvC,CAAC,CACF;QAAA,CAAC,SAAS,CACR,YAAY,CAAC,CAAC,KAAK,CAAC,CACpB,QAAQ,CAAC,CAAC,aAAa,CAAC,CACxB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACpB,YAAY,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CACjC,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,MAAM,CAAC,CAAC,UAAU,CAAC,EAEvB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,MAAmB,EAAE,SAAkB,EAAE,EAAE,CAC5D,UAAU,CAAC,MAAM,CAAC;IAChB,OAAO,EAAE;QACP,KAAK,EAAE,KAAK;QACZ,WAAW,EAAE,SAAS;YACpB,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,UAAU;YAC9B,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,UAAU;QACpC,WAAW,EAAE,CAAC;KACf;IACD,WAAW,EAAE;QACX,eAAe,EAAE,IAAI;QACrB,UAAU,EAAE,CAAC,CAAC;KACf;IACD,KAAK,EAAE;QACL,KAAK,EAAE,MAAM;KACd;IACD,KAAK,EAAE;QACL,UAAU,EAAE,EAAE;KACf;CACF,CAAC,CAAC;AAEL,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
interface FormIncrementInputProps {
|
|
2
|
+
style?: any;
|
|
3
|
+
title: string;
|
|
4
|
+
readOnly?: boolean;
|
|
5
|
+
defaultValue?: string;
|
|
6
|
+
onChange: (value: any) => void;
|
|
7
|
+
decimalSpacer: string;
|
|
8
|
+
thousandSpacer: string;
|
|
9
|
+
}
|
|
10
|
+
declare const FormIncrementInput: ({ style, title, defaultValue, decimalSpacer, thousandSpacer, onChange, }: FormIncrementInputProps) => JSX.Element;
|
|
11
|
+
export default FormIncrementInput;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Axelor Business Solutions
|
|
3
|
+
*
|
|
4
|
+
* Copyright (C) 2023 Axelor (<http://axelor.com>).
|
|
5
|
+
*
|
|
6
|
+
* This program is free software: you can redistribute it and/or modify
|
|
7
|
+
* it under the terms of the GNU Affero General Public License, version 3,
|
|
8
|
+
* as published by the Free Software Foundation.
|
|
9
|
+
*
|
|
10
|
+
* This program is distributed in the hope that it will be useful,
|
|
11
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
12
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
13
|
+
* GNU Affero General Public License for more details.
|
|
14
|
+
*
|
|
15
|
+
* You should have received a copy of the GNU Affero General Public License
|
|
16
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
17
|
+
*/
|
|
18
|
+
import React, { useMemo, useCallback, useState } from 'react';
|
|
19
|
+
import { StyleSheet, View } from 'react-native';
|
|
20
|
+
import { useThemeColor } from '../../../theme/ThemeContext';
|
|
21
|
+
import { Text } from '../../atoms';
|
|
22
|
+
import { getCommonStyles } from '../../../utils/commons-styles';
|
|
23
|
+
import Increment from '../Increment/Increment';
|
|
24
|
+
const FormIncrementInput = ({ style, title, defaultValue = null, decimalSpacer, thousandSpacer, onChange, }) => {
|
|
25
|
+
const Colors = useThemeColor();
|
|
26
|
+
const [value, setValue] = useState(defaultValue);
|
|
27
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
28
|
+
const onValueChange = useCallback(_value => {
|
|
29
|
+
setValue(_value);
|
|
30
|
+
onChange(_value);
|
|
31
|
+
}, [onChange]);
|
|
32
|
+
const commonStyles = useMemo(() => getCommonStyles(Colors), [Colors]);
|
|
33
|
+
const styles = useMemo(() => getStyles(Colors), [Colors]);
|
|
34
|
+
const handleFocus = () => {
|
|
35
|
+
setIsFocused(true);
|
|
36
|
+
};
|
|
37
|
+
const handleBlur = () => {
|
|
38
|
+
setIsFocused(false);
|
|
39
|
+
};
|
|
40
|
+
return (<View style={style}>
|
|
41
|
+
<Text style={styles.title}>{title}</Text>
|
|
42
|
+
<View style={[
|
|
43
|
+
commonStyles.filter,
|
|
44
|
+
commonStyles.filterAlign,
|
|
45
|
+
commonStyles.filterSize,
|
|
46
|
+
styles.content,
|
|
47
|
+
isFocused && commonStyles.inputFocused,
|
|
48
|
+
]}>
|
|
49
|
+
<Increment value={value} onValueChange={onValueChange} style={styles.increment} inputStyle={styles.containerInput} decimalSpacer={decimalSpacer} thousandSpacer={thousandSpacer} onFocus={handleFocus} onBlur={handleBlur}/>
|
|
50
|
+
</View>
|
|
51
|
+
</View>);
|
|
52
|
+
};
|
|
53
|
+
const getStyles = Colors => StyleSheet.create({
|
|
54
|
+
title: {
|
|
55
|
+
marginLeft: 28,
|
|
56
|
+
},
|
|
57
|
+
increment: {
|
|
58
|
+
flexDirection: 'row',
|
|
59
|
+
justifyContent: 'space-between',
|
|
60
|
+
width: '100%',
|
|
61
|
+
},
|
|
62
|
+
content: {
|
|
63
|
+
borderColor: Colors.secondaryColor.background,
|
|
64
|
+
borderWidth: 1,
|
|
65
|
+
paddingHorizontal: 5,
|
|
66
|
+
},
|
|
67
|
+
containerInput: {
|
|
68
|
+
fontSize: 15,
|
|
69
|
+
},
|
|
70
|
+
});
|
|
71
|
+
export default FormIncrementInput;
|
|
72
|
+
//# sourceMappingURL=FormIncrementInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormIncrementInput.js","sourceRoot":"","sources":["../../../../src/components/molecules/FormIncrementInput/FormIncrementInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
interface FormInputProps {
|
|
2
|
+
title: string;
|
|
3
|
+
defaultValue?: string;
|
|
4
|
+
readOnly?: boolean;
|
|
5
|
+
style?: any;
|
|
6
|
+
required?: boolean;
|
|
7
|
+
onChange?: (any: any) => void;
|
|
8
|
+
onSelection?: () => void;
|
|
9
|
+
}
|
|
10
|
+
declare const FormInput: ({ title, defaultValue, readOnly, style, required, onChange, onSelection, }: FormInputProps) => JSX.Element;
|
|
11
|
+
export default FormInput;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Axelor Business Solutions
|
|
3
|
+
*
|
|
4
|
+
* Copyright (C) 2023 Axelor (<http://axelor.com>).
|
|
5
|
+
*
|
|
6
|
+
* This program is free software: you can redistribute it and/or modify
|
|
7
|
+
* it under the terms of the GNU Affero General Public License, version 3,
|
|
8
|
+
* as published by the Free Software Foundation.
|
|
9
|
+
*
|
|
10
|
+
* This program is distributed in the hope that it will be useful,
|
|
11
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
12
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
13
|
+
* GNU Affero General Public License for more details.
|
|
14
|
+
*
|
|
15
|
+
* You should have received a copy of the GNU Affero General Public License
|
|
16
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
17
|
+
*/
|
|
18
|
+
import React, { useCallback, useMemo, useState } from 'react';
|
|
19
|
+
import { StyleSheet, View } from 'react-native';
|
|
20
|
+
import { Input, Text } from '../../atoms';
|
|
21
|
+
import { useThemeColor } from '../../../theme/ThemeContext';
|
|
22
|
+
import { getCommonStyles } from '../../../utils/commons-styles';
|
|
23
|
+
const FormInput = ({ title, defaultValue = null, readOnly, style, required = false, onChange = () => { }, onSelection = () => { }, }) => {
|
|
24
|
+
const Colors = useThemeColor();
|
|
25
|
+
const [value, setValue] = useState(defaultValue);
|
|
26
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
27
|
+
const _required = useMemo(() => required && (value == null || value === ''), [required, value]);
|
|
28
|
+
const onValueChange = useCallback(_value => {
|
|
29
|
+
setValue(_value);
|
|
30
|
+
onChange(_value);
|
|
31
|
+
}, [onChange]);
|
|
32
|
+
const commonStyles = useMemo(() => getCommonStyles(Colors, _required), [Colors, _required]);
|
|
33
|
+
const styles = useMemo(() => getStyles(Colors, _required), [Colors, _required]);
|
|
34
|
+
const handleSelection = () => {
|
|
35
|
+
setIsFocused(true);
|
|
36
|
+
onSelection();
|
|
37
|
+
};
|
|
38
|
+
const handleEndFocus = () => {
|
|
39
|
+
setIsFocused(false);
|
|
40
|
+
};
|
|
41
|
+
return (<View style={[styles.container, style]}>
|
|
42
|
+
<Text style={styles.title}>{title}</Text>
|
|
43
|
+
<View style={[
|
|
44
|
+
commonStyles.filter,
|
|
45
|
+
commonStyles.filterSize,
|
|
46
|
+
styles.content,
|
|
47
|
+
isFocused && commonStyles.inputFocused,
|
|
48
|
+
]}>
|
|
49
|
+
<Input style={styles.input} value={value} onChange={onValueChange} onSelection={handleSelection} onEndFocus={handleEndFocus} numberOfLines={null} readOnly={readOnly}/>
|
|
50
|
+
</View>
|
|
51
|
+
</View>);
|
|
52
|
+
};
|
|
53
|
+
const getStyles = (Colors, _required) => StyleSheet.create({
|
|
54
|
+
container: {
|
|
55
|
+
width: '100%',
|
|
56
|
+
},
|
|
57
|
+
content: {
|
|
58
|
+
width: '100%',
|
|
59
|
+
borderColor: _required
|
|
60
|
+
? Colors.errorColor.background
|
|
61
|
+
: Colors.secondaryColor.background,
|
|
62
|
+
borderWidth: 1,
|
|
63
|
+
},
|
|
64
|
+
input: {
|
|
65
|
+
width: '100%',
|
|
66
|
+
},
|
|
67
|
+
title: {
|
|
68
|
+
marginLeft: 10,
|
|
69
|
+
},
|
|
70
|
+
});
|
|
71
|
+
export default FormInput;
|
|
72
|
+
//# sourceMappingURL=FormInput.js.map
|