@producteca/producteca-ui-kit 1.5.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/inputs/index.d.ts +1 -0
- package/dist/components/patterns/index.d.ts +1 -0
- package/dist/components/patterns/saveBar/saveBar.d.ts +26 -0
- package/dist/locales/description.d.ts +13 -12
- package/dist/locales/es.d.ts +14 -0
- package/dist/producteca-ui-kit.es.js +3876 -3698
- package/dist/producteca-ui-kit.umd.js +134 -59
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
interface SaveButtonProps {
|
|
4
|
+
onSave: () => void;
|
|
5
|
+
label?: string;
|
|
6
|
+
[key: string]: any;
|
|
7
|
+
}
|
|
8
|
+
interface CancelButtonProps {
|
|
9
|
+
onCancel: () => void;
|
|
10
|
+
label?: string;
|
|
11
|
+
[key: string]: any;
|
|
12
|
+
}
|
|
13
|
+
interface PreviousButtonProps {
|
|
14
|
+
onPrevious: () => void;
|
|
15
|
+
label?: string;
|
|
16
|
+
[key: string]: any;
|
|
17
|
+
}
|
|
18
|
+
interface SaveBarProps {
|
|
19
|
+
saveProps: SaveButtonProps;
|
|
20
|
+
cancelProps: CancelButtonProps;
|
|
21
|
+
previousProps?: PreviousButtonProps;
|
|
22
|
+
withoutBorder?: boolean;
|
|
23
|
+
}
|
|
24
|
+
export declare const SaveBar: React.FC<SaveBarProps>;
|
|
25
|
+
export type { SaveBarProps, SaveButtonProps, CancelButtonProps, PreviousButtonProps };
|
|
26
|
+
export default SaveBar;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
export declare const onChangeSelectField = "\n Callback que se dispara cuando cambia el valor del input.\n \n #### Par\u00E1metros\n event: `React.ChangeEvent<HTMLInputElement>`\n - `event.target.name`: El nombre del input.\n - `event.target.value`: El valor actual del input, que debe cumplir con la siguiente interfaz:\n \n ```typescript\n interface SelectOption {\n label: string;\n value: string | number;\n [key: string]: any;\n }\n ```\n
|
|
2
|
-
export declare const onInputChange = "\n Callback que se ejecuta cuando escribimos algo en el buscador.\n \n #### Par\u00E1metros\n event: `React.ChangeEvent<HTMLInputElement>`\n - `event.target.name`: El nombre del input.\n - `event.target.value`: El valor actual del input\n
|
|
3
|
-
export declare const onChangeSearcher = "\n Callback que se ejecuta cuando seleccionamos una opcion del buscador.\n \n #### Par\u00E1metros\n event: `React.ChangeEvent<HTMLInputElement>`\n - `event.target.name`: El nombre del input.\n - `event.target.value`: El valor actual del input, que debe cumplir con la siguiente interfaz:\n \n ```typescript\n interface SelectOption {\n label: string;\n value: string | number;\n [key: string]: any;\n }\n ```\n
|
|
4
|
-
export declare const onChangeCheckboxInput = "\n Callback que se dispara cuando cambia el valor del input.\n \n #### Par\u00E1metros\n event: `React.ChangeEvent<HTMLInputElement>`\n - `event.target.name`: El nombre del input.\n - `event.target.value`: Siempre es \"on\"\n
|
|
5
|
-
export declare const onChangeInput = "\n Callback que se dispara cuando cambia el valor del input.\n \n #### Par\u00E1metros\n event: `React.ChangeEvent<HTMLInputElement>`\n - `event.target.name`: El nombre del input.\n - `event.target.value`: El valor actual del input, que debe cumplir con la siguiente interfaz:\n \n ```typescript\n value: string | number; \n ```\n
|
|
6
|
-
export declare const isOptionDisabled = " \n Funcion que recibe un valor de tipo SelectOption y deberia devolver un valor booleano\n
|
|
7
|
-
export declare const selectFieldDescription = "
|
|
8
|
-
export declare const formFieldExample = "
|
|
9
|
-
export declare const isValidInput = "\n Funcion que recibe un valor de tipo inputValue y deberia devolver un valor booleano.\n \n #### Por ejemplo: (inputValue) => _.isNumber(inputValue)\n \n ```typescript\n type inputValue = string | number; \n ```\n
|
|
10
|
-
export declare const checkboxInputExample = "
|
|
11
|
-
export declare const singleCheckboxInputExample = " \n Versi\u00F3n con una sola opci\u00F3n tipo checkbox y un label personalizado:\n \n ```typescript\n const [checked, setChecked] = React.useState(false)\n <SingleCheckboxInput\n name=\"SingleToggle\"\n checked={checked}\n onChange={setChecked}\n label={\"Amazon\"}\n title={locale('syncStockFromChannel')}\n />\n ```\n
|
|
12
|
-
export declare const searcherExample = " \n Note la diferencia entre onChange y onInputChange (oficia de onSearch):\n \n ```typescript\n <Searcher\n label=\"Search label\"\n name=\"Searcher\"\n onChange={(event) => onSelectOption(event.target.value)}\n onInputChange={(event) => handleSearch(event.target.value)}\n options={[{ label: 'text', value: 1 }]}\n />\n ```\n
|
|
1
|
+
export declare const onChangeSelectField = "\n Callback que se dispara cuando cambia el valor del input.\n \n #### Par\u00E1metros\n event: `React.ChangeEvent<HTMLInputElement>`\n - `event.target.name`: El nombre del input.\n - `event.target.value`: El valor actual del input, que debe cumplir con la siguiente interfaz:\n \n ```typescript\n interface SelectOption {\n label: string;\n value: string | number;\n [key: string]: any;\n }\n ```\n";
|
|
2
|
+
export declare const onInputChange = "\n Callback que se ejecuta cuando escribimos algo en el buscador.\n \n #### Par\u00E1metros\n event: `React.ChangeEvent<HTMLInputElement>`\n - `event.target.name`: El nombre del input.\n - `event.target.value`: El valor actual del input\n";
|
|
3
|
+
export declare const onChangeSearcher = "\n Callback que se ejecuta cuando seleccionamos una opcion del buscador.\n \n #### Par\u00E1metros\n event: `React.ChangeEvent<HTMLInputElement>`\n - `event.target.name`: El nombre del input.\n - `event.target.value`: El valor actual del input, que debe cumplir con la siguiente interfaz:\n \n ``` typescript\n interface SelectOption {\n label: string;\n value: string | number;\n [key: string]: any;\n }\n ```\n";
|
|
4
|
+
export declare const onChangeCheckboxInput = "\n Callback que se dispara cuando cambia el valor del input.\n \n #### Par\u00E1metros\n event: `React.ChangeEvent<HTMLInputElement>`\n - `event.target.name`: El nombre del input.\n - `event.target.value`: Siempre es \"on\"\n";
|
|
5
|
+
export declare const onChangeInput = "\n Callback que se dispara cuando cambia el valor del input.\n \n #### Par\u00E1metros\n event: `React.ChangeEvent<HTMLInputElement>`\n - `event.target.name`: El nombre del input.\n - `event.target.value`: El valor actual del input, que debe cumplir con la siguiente interfaz:\n \n ``` typescript\n value: string | number; \n ```\n";
|
|
6
|
+
export declare const isOptionDisabled = " \n Funcion que recibe un valor de tipo SelectOption y deberia devolver un valor booleano\n Si la opci\u00F3n tiene definida un tooltipMessage se va a mostrar al hacer hover.\n \n#### Ejemplo\n ``` typescript\n const isOptionDisabled = (option: SelectOption) => option.value === 2;\n ```\n \n #### Interfaz\n ```typescript\n interface SelectOption {\n label: string;\n value: string | number;\n tooltipMessage?: string;\n [key: string]: any;\n }\n ```\n";
|
|
7
|
+
export declare const selectFieldDescription = "\n #### Ejemplo de uso \n ```typescript\n <SelectField\n name=\"productId\"\n options={[{ label: \"1\", value: 1 }, { label: \"2\", value: 2, tooltipMessage: \"Este valor no es representativo\" }]}\n onChange={(event) => handleChange(event.target.name, event.target.value)}\n isMultiple\n isClearable={false}\n label={localize('product')}\n isOptionDisabled={(option) => option.value == 2}\n rightModifier={shouldShowLoader && <Spinner />}\n />\n ```\n";
|
|
8
|
+
export declare const formFieldExample = "\n #### Ejemplo de uso\n \n ``` typescript\n <FormField\n label=\"T\u00EDtulo\"\n name=\"textInput\"\n onChange={(event) => handleChange(event.target.name, event.target.value)}\n placeholder=\"Placeholder\"\n size=\"md\"\n type=\"text\"\n isValid={(inputValue) => _.isNumber(inputValue)}\n />\n ```\n";
|
|
9
|
+
export declare const isValidInput = "\n Funcion que recibe un valor de tipo inputValue y deberia devolver un valor booleano.\n \n #### Por ejemplo: (inputValue) => _.isNumber(inputValue)\n \n ``` typescript\n type inputValue = string | number; \n ```\n";
|
|
10
|
+
export declare const checkboxInputExample = "\n #### Ejemplo de uso\n \n ``` typescript\n <CheckboxInput\n items={[\n {\n id: '1',\n label: 'Opci\u00F3n 1'\n },\n {\n id: '2',\n label: 'Opci\u00F3n 2'\n },\n {\n disabled: true,\n id: '3',\n label: 'Opci\u00F3n 3'\n }\n ]}\n name=\"CheckboxList\"\n onChange={(event) => handleChange(event.target.name, event.target.value)}\n size=\"lg\"\n title=\"Selecciona una opci\u00F3n\"\n type=\"checkbox\"\n />\n ```\n";
|
|
11
|
+
export declare const singleCheckboxInputExample = " \n Versi\u00F3n con una sola opci\u00F3n tipo checkbox y un label personalizado:\n \n ```typescript\n const [checked, setChecked] = React.useState(false)\n <SingleCheckboxInput\n name=\"SingleToggle\"\n checked={checked}\n onChange={setChecked}\n label={\"Amazon\"}\n title={locale('syncStockFromChannel')}\n />\n ```\n";
|
|
12
|
+
export declare const searcherExample = " \n Note la diferencia entre onChange y onInputChange (oficia de onSearch):\n \n ```typescript\n <Searcher\n label=\"Search label\"\n name=\"Searcher\"\n onChange={(event) => onSelectOption(event.target.value)}\n onInputChange={(event) => handleSearch(event.target.value)}\n options={[{ label: 'text', value: 1 }]}\n />\n ```\n";
|
|
13
|
+
export declare const saveBarExample = "\n #### Uso b\u00E1sico\n ```typescript\n <SaveBar\n saveProps={{\n onSave: () => handleSave(),\n label: 'Save'\n }}\n cancelProps={{\n onCancel: () => handleCancel(),\n label: 'Cancel'\n }}\n />\n ```\n #### Con bot\u00F3n de navegaci\u00F3n\n ```typescript\n <SaveBar\n saveProps={{\n onSave: () => handleSave(),\n label: 'Save',\n variant: 'primary'\n }}\n cancelProps={{\n onCancel: () => handleCancel(),\n label: 'Cancel'\n }}\n previousProps={{\n onPrevious: () => handlePrevious(),\n label: 'Previous'\n }}\n />\n ```\n #### Ejemplo completo\n ```typescript\n <SaveBar\n saveProps={{\n onSave: () => handleSave(),\n label: 'Guardar cambios',\n variant: 'success',\n disabled: false,\n onClick: () => {},\n }}\n cancelProps={{\n onCancel: () => handleCancel(),\n label: 'Descartar',\n }}\n previousProps={{\n onPrevious: () => handlePrevious(),\n label: 'Anterior',\n variant: 'primary',\n outline: true,\n disabled: false,\n onClick: () => console.log('Previous clicked'),\n }}\n />\n ```\n";
|
package/dist/locales/es.d.ts
CHANGED
|
@@ -13,11 +13,15 @@ declare const _default: {
|
|
|
13
13
|
exportedIcon: string;
|
|
14
14
|
syncStockFromChannel: string;
|
|
15
15
|
add: string;
|
|
16
|
+
previous: string;
|
|
16
17
|
continue: string;
|
|
18
|
+
cancel: string;
|
|
19
|
+
save: string;
|
|
17
20
|
hideSelectedOptionsExplainText: string;
|
|
18
21
|
description: {
|
|
19
22
|
onChangeSelectField: string;
|
|
20
23
|
onInputChange: string;
|
|
24
|
+
onChangeSearcher: string;
|
|
21
25
|
onChangeCheckboxInput: string;
|
|
22
26
|
onChangeInput: string;
|
|
23
27
|
isOptionDisabled: string;
|
|
@@ -29,6 +33,16 @@ declare const _default: {
|
|
|
29
33
|
noOptions: string;
|
|
30
34
|
withIcon: string;
|
|
31
35
|
};
|
|
36
|
+
saveBar: {
|
|
37
|
+
example: string;
|
|
38
|
+
saveButton: string;
|
|
39
|
+
cancelButton: string;
|
|
40
|
+
previousButton: string;
|
|
41
|
+
saveButtonProps: string;
|
|
42
|
+
cancelButtonProps: string;
|
|
43
|
+
previousButtonProps: string;
|
|
44
|
+
withoutBorder: string;
|
|
45
|
+
};
|
|
32
46
|
formField: {
|
|
33
47
|
example: string;
|
|
34
48
|
isValid: string;
|