contentoh-components-library 21.6.25 → 21.6.26
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/molecules/SingleSelect/index.js +198 -0
- package/dist/components/molecules/SingleSelect/styles.js +74 -0
- package/dist/components/organisms/LinkVariantsModal/index.js +90 -103
- package/dist/components/organisms/LinkVariantsModal/styles.js +1 -1
- package/dist/index.js +43 -30
- package/package.json +1 -1
- package/src/components/molecules/SingleSelect/index.js +183 -0
- package/src/components/molecules/SingleSelect/styles.js +132 -0
- package/src/components/organisms/LinkVariantsModal/index.js +110 -118
- package/src/components/organisms/LinkVariantsModal/styles.js +3 -19
- package/src/index.js +1 -0
|
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
|
|
|
2
2
|
import axios from "axios";
|
|
3
3
|
|
|
4
4
|
import { readPayload, ApiError } from "./api";
|
|
5
|
+
import { SingleSelect } from "../../molecules/SingleSelect";
|
|
5
6
|
import { getProductImage, getRetailerPicture } from "../../../_utils/helper";
|
|
6
7
|
|
|
7
8
|
import {
|
|
@@ -360,11 +361,15 @@ export const LinkVariantsModal = ({
|
|
|
360
361
|
categories: [],
|
|
361
362
|
};
|
|
362
363
|
}
|
|
364
|
+
// El tercer nivel no viene como {id, name} sino como
|
|
365
|
+
// {category_id, subcategory}: con el mapeo de los otros dos, la
|
|
366
|
+
// categoría salía en la lista pero sin texto. Mismo criterio que usa
|
|
367
|
+
// el alta de productos, incluido el separador legible.
|
|
363
368
|
return {
|
|
364
369
|
...current,
|
|
365
370
|
categories: lista.map((item) => ({
|
|
366
|
-
value: item.
|
|
367
|
-
label: item.
|
|
371
|
+
value: item.category_id,
|
|
372
|
+
label: (item.subcategory ?? "").replace("|", " > "),
|
|
368
373
|
})),
|
|
369
374
|
};
|
|
370
375
|
});
|
|
@@ -555,7 +560,9 @@ export const LinkVariantsModal = ({
|
|
|
555
560
|
const decidida = (dimension) => {
|
|
556
561
|
if (modes[dimension] !== null) return true;
|
|
557
562
|
if (dimension === "categoryRetailers") {
|
|
558
|
-
return
|
|
563
|
+
return (
|
|
564
|
+
offered.categoryRetailers.length === 0 && extraRetailers.length === 0
|
|
565
|
+
);
|
|
559
566
|
}
|
|
560
567
|
// Una imagen cuyo archivo no existe no es algo sobre lo que se pueda decidir.
|
|
561
568
|
return dimension === "images"
|
|
@@ -879,58 +886,47 @@ export const LinkVariantsModal = ({
|
|
|
879
886
|
</List>
|
|
880
887
|
|
|
881
888
|
<AddRetailer>
|
|
882
|
-
<
|
|
889
|
+
<SingleSelect
|
|
890
|
+
id="link-variants-retailer"
|
|
891
|
+
placeholder="Agregar otra cadena…"
|
|
892
|
+
options={filters.retailers}
|
|
883
893
|
value={newRetailer}
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
setNewRetailer(valor);
|
|
894
|
+
loading={loadingFilters && !filters.retailers.length}
|
|
895
|
+
onChange={(valor) => {
|
|
896
|
+
setNewRetailer(valor ?? "");
|
|
887
897
|
setNewDepartment("");
|
|
888
898
|
setNewCategory("");
|
|
889
899
|
if (valor) loadFilters(valor, null);
|
|
890
900
|
}}
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
</option>
|
|
897
|
-
))}
|
|
898
|
-
</select>
|
|
899
|
-
<select
|
|
901
|
+
/>
|
|
902
|
+
<SingleSelect
|
|
903
|
+
id="link-variants-department"
|
|
904
|
+
placeholder="Departamento…"
|
|
905
|
+
options={filters.departments}
|
|
900
906
|
value={newDepartment}
|
|
901
|
-
disabled={!newRetailer
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
setNewDepartment(valor);
|
|
907
|
+
disabled={!newRetailer}
|
|
908
|
+
loading={loadingFilters && !!newRetailer}
|
|
909
|
+
onChange={(valor) => {
|
|
910
|
+
setNewDepartment(valor ?? "");
|
|
905
911
|
setNewCategory("");
|
|
906
912
|
if (valor) loadFilters(newRetailer, valor);
|
|
907
913
|
}}
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
</option>
|
|
914
|
-
))}
|
|
915
|
-
</select>
|
|
916
|
-
<select
|
|
914
|
+
/>
|
|
915
|
+
<SingleSelect
|
|
916
|
+
id="link-variants-category"
|
|
917
|
+
placeholder="Categoría…"
|
|
918
|
+
options={filters.categories}
|
|
917
919
|
value={newCategory}
|
|
918
|
-
disabled={!newDepartment
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
{filters.categories.map((item) => (
|
|
923
|
-
<option key={item.value} value={item.value}>
|
|
924
|
-
{item.label}
|
|
925
|
-
</option>
|
|
926
|
-
))}
|
|
927
|
-
</select>
|
|
920
|
+
disabled={!newDepartment}
|
|
921
|
+
loading={loadingFilters && !!newDepartment}
|
|
922
|
+
onChange={(valor) => setNewCategory(valor ?? "")}
|
|
923
|
+
/>
|
|
928
924
|
<button
|
|
929
925
|
type="button"
|
|
930
926
|
onClick={addRetailer}
|
|
931
927
|
disabled={!newRetailer || !newCategory || loadingFilters}
|
|
932
928
|
>
|
|
933
|
-
|
|
929
|
+
Agregar
|
|
934
930
|
</button>
|
|
935
931
|
</AddRetailer>
|
|
936
932
|
</Block>
|
|
@@ -1111,89 +1107,85 @@ export const LinkVariantsModal = ({
|
|
|
1111
1107
|
)}
|
|
1112
1108
|
</Block>
|
|
1113
1109
|
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
<
|
|
1121
|
-
|
|
1110
|
+
{/* Sin imágenes utilizables el bloque no se dibuja: un paso que
|
|
1111
|
+
solo sirve para decir que no hay nada es ruido, y ademas ya no
|
|
1112
|
+
hay decision que tomar ahi. */}
|
|
1113
|
+
{imagenesUtiles.length > 0 && (
|
|
1114
|
+
<Block>
|
|
1115
|
+
<h3>
|
|
1116
|
+
<span className="paso">4</span> Imágenes
|
|
1117
|
+
</h3>
|
|
1118
|
+
<Choices>
|
|
1119
|
+
<label>
|
|
1120
|
+
<input
|
|
1121
|
+
type="radio"
|
|
1122
|
+
name={`images-${activeChild ?? "todos"}`}
|
|
1123
|
+
checked={modes.images === "all"}
|
|
1124
|
+
onChange={() =>
|
|
1125
|
+
chooseMode(
|
|
1126
|
+
"images",
|
|
1127
|
+
"all",
|
|
1128
|
+
imagenesUtiles.map((item) => item.id)
|
|
1129
|
+
)
|
|
1130
|
+
}
|
|
1131
|
+
/>
|
|
1132
|
+
<span>
|
|
1133
|
+
Todas
|
|
1134
|
+
<span className="hint">
|
|
1135
|
+
{imagenesUtiles.length} imagen(es) en el padre.
|
|
1136
|
+
</span>
|
|
1137
|
+
</span>
|
|
1138
|
+
</label>
|
|
1139
|
+
<label>
|
|
1140
|
+
<input
|
|
1141
|
+
type="radio"
|
|
1142
|
+
name={`images-${activeChild ?? "todos"}`}
|
|
1143
|
+
checked={modes.images === "some"}
|
|
1144
|
+
onChange={() => chooseMode("images", "some", [])}
|
|
1145
|
+
/>
|
|
1146
|
+
<span>
|
|
1147
|
+
Elegir cuáles
|
|
1148
|
+
<span className="hint">
|
|
1149
|
+
Útil cuando la variante cambia de color o de empaque.
|
|
1150
|
+
</span>
|
|
1151
|
+
</span>
|
|
1152
|
+
</label>
|
|
1153
|
+
</Choices>
|
|
1154
|
+
|
|
1155
|
+
<ImageGrid>
|
|
1156
|
+
{imagenesUtiles.map((image) => (
|
|
1157
|
+
<label
|
|
1158
|
+
key={image.id}
|
|
1159
|
+
className={[
|
|
1160
|
+
chosen.images.includes(image.id) ? "picked" : "",
|
|
1161
|
+
modes.images === "all" ? "locked" : "",
|
|
1162
|
+
]
|
|
1163
|
+
.filter(Boolean)
|
|
1164
|
+
.join(" ")}
|
|
1165
|
+
>
|
|
1122
1166
|
<input
|
|
1123
|
-
type="
|
|
1124
|
-
|
|
1125
|
-
checked={
|
|
1126
|
-
onChange={() =>
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1167
|
+
type="checkbox"
|
|
1168
|
+
disabled={modes.images === "all"}
|
|
1169
|
+
checked={chosen.images.includes(image.id)}
|
|
1170
|
+
onChange={() => toggleChoice("images", image.id)}
|
|
1171
|
+
/>
|
|
1172
|
+
<img
|
|
1173
|
+
src={getProductImage(image.src)}
|
|
1174
|
+
alt=""
|
|
1175
|
+
onError={() =>
|
|
1176
|
+
setBrokenImages((current) =>
|
|
1177
|
+
current.includes(image.id)
|
|
1178
|
+
? current
|
|
1179
|
+
: [...current, image.id]
|
|
1131
1180
|
)
|
|
1132
1181
|
}
|
|
1133
1182
|
/>
|
|
1134
|
-
<span>
|
|
1135
|
-
Todas
|
|
1136
|
-
<span className="hint">
|
|
1137
|
-
{imagenesUtiles.length} imagen(es) en el padre.
|
|
1138
|
-
</span>
|
|
1139
|
-
</span>
|
|
1183
|
+
<span>{image.imageType || "Sin tipo de toma"}</span>
|
|
1140
1184
|
</label>
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
checked={modes.images === "some"}
|
|
1146
|
-
onChange={() => chooseMode("images", "some", [])}
|
|
1147
|
-
/>
|
|
1148
|
-
<span>
|
|
1149
|
-
Elegir cuáles
|
|
1150
|
-
<span className="hint">
|
|
1151
|
-
Útil cuando la variante cambia de color o de
|
|
1152
|
-
empaque.
|
|
1153
|
-
</span>
|
|
1154
|
-
</span>
|
|
1155
|
-
</label>
|
|
1156
|
-
</Choices>
|
|
1157
|
-
|
|
1158
|
-
<ImageGrid>
|
|
1159
|
-
{imagenesUtiles.map((image) => (
|
|
1160
|
-
<label
|
|
1161
|
-
key={image.id}
|
|
1162
|
-
className={[
|
|
1163
|
-
chosen.images.includes(image.id) ? "picked" : "",
|
|
1164
|
-
modes.images === "all" ? "locked" : "",
|
|
1165
|
-
]
|
|
1166
|
-
.filter(Boolean)
|
|
1167
|
-
.join(" ")}
|
|
1168
|
-
>
|
|
1169
|
-
<input
|
|
1170
|
-
type="checkbox"
|
|
1171
|
-
disabled={modes.images === "all"}
|
|
1172
|
-
checked={chosen.images.includes(image.id)}
|
|
1173
|
-
onChange={() => toggleChoice("images", image.id)}
|
|
1174
|
-
/>
|
|
1175
|
-
<img
|
|
1176
|
-
src={getProductImage(image.src)}
|
|
1177
|
-
alt=""
|
|
1178
|
-
onError={() =>
|
|
1179
|
-
setBrokenImages((current) =>
|
|
1180
|
-
current.includes(image.id)
|
|
1181
|
-
? current
|
|
1182
|
-
: [...current, image.id]
|
|
1183
|
-
)
|
|
1184
|
-
}
|
|
1185
|
-
/>
|
|
1186
|
-
<span>{image.imageType || "Sin tipo de toma"}</span>
|
|
1187
|
-
</label>
|
|
1188
|
-
))}
|
|
1189
|
-
</ImageGrid>
|
|
1190
|
-
</>
|
|
1191
|
-
) : (
|
|
1192
|
-
<Message>
|
|
1193
|
-
El producto padre no tiene imágenes que heredar.
|
|
1194
|
-
</Message>
|
|
1195
|
-
)}
|
|
1196
|
-
</Block>
|
|
1185
|
+
))}
|
|
1186
|
+
</ImageGrid>
|
|
1187
|
+
</Block>
|
|
1188
|
+
)}
|
|
1197
1189
|
|
|
1198
1190
|
{/* Es la diferencia entre link y propagate, y es la que sorprende:
|
|
1199
1191
|
aquí lo elegido se escribe encima aunque la variante lo hubiera
|
|
@@ -363,24 +363,12 @@ export const ImageGrid = styled.div`
|
|
|
363
363
|
export const AddRetailer = styled.div`
|
|
364
364
|
display: flex;
|
|
365
365
|
flex-wrap: wrap;
|
|
366
|
+
align-items: flex-end;
|
|
366
367
|
gap: 8px;
|
|
367
368
|
margin-bottom: 16px;
|
|
368
369
|
|
|
369
|
-
select {
|
|
370
|
-
flex: 1 1 140px;
|
|
371
|
-
min-width: 0;
|
|
372
|
-
height: 32px;
|
|
373
|
-
padding: 0 8px;
|
|
374
|
-
border: 1px solid ${GlobalColors.s2};
|
|
375
|
-
border-radius: 6px;
|
|
376
|
-
font-family: ${FontFamily.Raleway};
|
|
377
|
-
font-size: 13px;
|
|
378
|
-
color: ${GlobalColors.deep_gray};
|
|
379
|
-
background-color: ${GlobalColors.white};
|
|
380
|
-
}
|
|
381
|
-
|
|
382
370
|
button {
|
|
383
|
-
height:
|
|
371
|
+
height: 38px;
|
|
384
372
|
padding: 0 14px;
|
|
385
373
|
border: 1px solid ${PINK};
|
|
386
374
|
border-radius: 6px;
|
|
@@ -389,11 +377,7 @@ export const AddRetailer = styled.div`
|
|
|
389
377
|
font-size: 13px;
|
|
390
378
|
color: ${PINK};
|
|
391
379
|
cursor: pointer;
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
select:disabled {
|
|
395
|
-
opacity: 0.5;
|
|
396
|
-
cursor: default;
|
|
380
|
+
flex-shrink: 0;
|
|
397
381
|
}
|
|
398
382
|
|
|
399
383
|
button:disabled {
|
package/src/index.js
CHANGED
|
@@ -67,6 +67,7 @@ export * from "./components/molecules/TagAndInput/index";
|
|
|
67
67
|
export * from "./components/molecules/VerificationCodeResetPasswordLogin/index";
|
|
68
68
|
export * from "./components/molecules/RetailerSelector/index";
|
|
69
69
|
export * from "./components/molecules/CustomSelect/index";
|
|
70
|
+
export * from "./components/molecules/SingleSelect/index";
|
|
70
71
|
export * from "./components/molecules/ButtonDownloadFile/index";
|
|
71
72
|
export * from "./components/molecules/ImageTooltip/index";
|
|
72
73
|
export * from "./components/molecules/SelectV2/index";
|