linear-react-components-ui 2.2.0-beta.0 → 2.2.0-beta.10
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/lib/assets/styles/datepicker2.css +81 -11
- package/lib/form2/useForm/index.js +0 -1
- package/lib/form2/useForm/index.js.map +1 -1
- package/lib/hooks/useScrollEndReached/index.d.ts +8 -0
- package/lib/hooks/useScrollEndReached/index.js +69 -0
- package/lib/hooks/useScrollEndReached/index.js.map +1 -0
- package/lib/hooks/useScrollEndReached/types.d.ts +7 -0
- package/lib/inputs/select/Dropdown.js +11 -1
- package/lib/inputs/select/Dropdown.js.map +1 -1
- package/lib/inputs/select/multiple/index.js +5 -2
- package/lib/inputs/select/multiple/index.js.map +1 -1
- package/lib/inputs/select/simple/index.js +5 -2
- package/lib/inputs/select/simple/index.js.map +1 -1
- package/lib/inputs/select/types.d.ts +3 -2
- package/lib/inputs/types.d.ts +2 -1
- package/lib/inputs2/date/calendarbox.d.ts +23 -0
- package/lib/inputs2/date/calendarbox.js +254 -0
- package/lib/inputs2/date/calendarbox.js.map +1 -0
- package/lib/inputs2/date/datefield/base.js +691 -214
- package/lib/inputs2/date/datefield/base.js.map +1 -1
- package/lib/inputs2/date/datefield/triggers.js +4 -4
- package/lib/inputs2/date/datefield/triggers.js.map +1 -1
- package/lib/inputs2/date/datefield/types.d.ts +5 -12
- package/lib/inputs2/date/dateperiodfield/base.js +694 -809
- package/lib/inputs2/date/dateperiodfield/base.js.map +1 -1
- package/lib/inputs2/date/dateperiodfield/triggers.js +21 -9
- package/lib/inputs2/date/dateperiodfield/triggers.js.map +1 -1
- package/lib/inputs2/date/dateperiodfield/types.d.ts +13 -23
- package/lib/inputs2/date/helpers.d.ts +44 -4
- package/lib/inputs2/date/helpers.js +200 -4
- package/lib/inputs2/date/helpers.js.map +1 -1
- package/lib/inputs2/date/{base/constants.d.ts → hooks/useCalendarPosition.d.ts} +1 -1
- package/lib/inputs2/date/hooks/useCalendarPosition.js +93 -0
- package/lib/inputs2/date/hooks/useCalendarPosition.js.map +1 -0
- package/lib/inputs2/date/hooks/useDateCalendarState.d.ts +14 -0
- package/lib/inputs2/date/hooks/useDateCalendarState.js +250 -0
- package/lib/inputs2/date/hooks/useDateCalendarState.js.map +1 -0
- package/lib/inputs2/date/hooks/useDateMask.d.ts +22 -0
- package/lib/inputs2/date/hooks/useDateMask.js +143 -0
- package/lib/inputs2/date/hooks/useDateMask.js.map +1 -0
- package/lib/inputs2/date/timeselector.d.ts +17 -0
- package/lib/inputs2/date/timeselector.js +226 -0
- package/lib/inputs2/date/timeselector.js.map +1 -0
- package/lib/inputs2/date/types.d.ts +22 -1
- package/lib/inputs2/date/types.js.map +1 -1
- package/lib/inputs2/selectfield/base.js +4 -1
- package/lib/inputs2/selectfield/base.js.map +1 -1
- package/lib/inputs2/selectfield/listbox.d.ts +2 -1
- package/lib/inputs2/selectfield/listbox.js +10 -0
- package/lib/inputs2/selectfield/listbox.js.map +1 -1
- package/lib/inputs2/selectfield/types.d.ts +2 -1
- package/lib/inputs2/selectfield/types.js.map +1 -1
- package/lib/node_modules/lodash/lodash.js +2 -2
- package/lib/node_modules/lodash/lodash.js.map +1 -1
- package/lib/node_modules/moment/dist/locale/pt-br.js +54 -0
- package/lib/node_modules/moment/dist/locale/pt-br.js.map +1 -0
- package/lib/panel/Content.js +28 -82
- package/lib/panel/Content.js.map +1 -1
- package/lib/panel/Default.d.ts +1 -1
- package/lib/panel/Default.js +60 -54
- package/lib/panel/Default.js.map +1 -1
- package/lib/panel/helpers.js +1 -16
- package/lib/panel/helpers.js.map +1 -1
- package/lib/panel/types.d.ts +3 -6
- package/package.json +1 -1
- package/lib/inputs2/date/base/constants.js +0 -69
- package/lib/inputs2/date/base/constants.js.map +0 -1
- package/lib/inputs2/date/datefield/calendarbox.d.ts +0 -6
- package/lib/inputs2/date/datefield/calendarbox.js +0 -228
- package/lib/inputs2/date/datefield/calendarbox.js.map +0 -1
- package/lib/inputs2/date/dateperiodfield/calendarbox.d.ts +0 -6
- package/lib/inputs2/date/dateperiodfield/calendarbox.js +0 -282
- package/lib/inputs2/date/dateperiodfield/calendarbox.js.map +0 -1
|
@@ -741,7 +741,7 @@
|
|
|
741
741
|
background-position: -135% 0%;
|
|
742
742
|
}
|
|
743
743
|
}
|
|
744
|
-
.date-calendar-box[aria-expanded=true], .date-field-root .container .input {
|
|
744
|
+
.date-calendar-box[aria-expanded=true] .date-calendar-box-time-selector .time-column .time-column-options, .date-calendar-box[aria-expanded=true], .date-field-root .container .input {
|
|
745
745
|
color: #666;
|
|
746
746
|
font-size: 16px;
|
|
747
747
|
font-family: Roboto;
|
|
@@ -892,8 +892,11 @@ input::-webkit-inner-spin-button {
|
|
|
892
892
|
border: 1px solid transparent;
|
|
893
893
|
background-color: transparent;
|
|
894
894
|
}
|
|
895
|
-
.date-field-root .container:has(input
|
|
896
|
-
|
|
895
|
+
.date-field-root .container:has(input:disabled) {
|
|
896
|
+
color: #cacaca !important;
|
|
897
|
+
transition: color 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
|
898
|
+
background-color: #f5f5f5;
|
|
899
|
+
cursor: not-allowed;
|
|
897
900
|
}
|
|
898
901
|
.date-field-root .container:has(input[data-state-read-only=true]) {
|
|
899
902
|
cursor: default;
|
|
@@ -903,11 +906,8 @@ input::-webkit-inner-spin-button {
|
|
|
903
906
|
box-shadow: 0 3px 0 #a10d0d;
|
|
904
907
|
transition: box-shadow 250ms cubic-bezier(0.19, 0.62, 0.58, 0.98) 100ms;
|
|
905
908
|
}
|
|
906
|
-
.date-field-root .container:has(input:
|
|
907
|
-
color: #
|
|
908
|
-
transition: color 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
|
909
|
-
background-color: #f5f5f5;
|
|
910
|
-
cursor: not-allowed;
|
|
909
|
+
.date-field-root .container:has(input[data-state-error=true]):has(input[data-state-skeletonize=false]) {
|
|
910
|
+
border-color: #f48181;
|
|
911
911
|
}
|
|
912
912
|
.date-field-root .container .separator {
|
|
913
913
|
display: flex;
|
|
@@ -1029,9 +1029,10 @@ input::-webkit-inner-spin-button {
|
|
|
1029
1029
|
margin: 5px 0;
|
|
1030
1030
|
font-size: 87.5%;
|
|
1031
1031
|
z-index: auto;
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1032
|
+
display: grid;
|
|
1033
|
+
grid-template-columns: minmax(280px, 1fr) auto;
|
|
1034
|
+
grid-template-areas: "header time" "weekdays time" "grid time";
|
|
1035
|
+
min-width: min-content;
|
|
1035
1036
|
overflow: hidden;
|
|
1036
1037
|
border: 1px solid #dae1e8;
|
|
1037
1038
|
background-color: #fff;
|
|
@@ -1039,6 +1040,7 @@ input::-webkit-inner-spin-button {
|
|
|
1039
1040
|
box-shadow: -6px 6px 50px -12px rgba(51, 51, 51, 0.4);
|
|
1040
1041
|
}
|
|
1041
1042
|
.date-calendar-box[aria-expanded=true] .date-calendar-box-header {
|
|
1043
|
+
grid-area: header;
|
|
1042
1044
|
width: auto;
|
|
1043
1045
|
height: auto;
|
|
1044
1046
|
display: flex;
|
|
@@ -1070,6 +1072,7 @@ input::-webkit-inner-spin-button {
|
|
|
1070
1072
|
font-size: 87.5%;
|
|
1071
1073
|
}
|
|
1072
1074
|
.date-calendar-box[aria-expanded=true] .date-calendar-box-days-of-week {
|
|
1075
|
+
grid-area: weekdays;
|
|
1073
1076
|
height: 28px;
|
|
1074
1077
|
display: flex;
|
|
1075
1078
|
flex-flow: nowrap;
|
|
@@ -1086,11 +1089,13 @@ input::-webkit-inner-spin-button {
|
|
|
1086
1089
|
vertical-align: middle;
|
|
1087
1090
|
}
|
|
1088
1091
|
.date-calendar-box[aria-expanded=true] .date-calendar-box-grid-of-days {
|
|
1092
|
+
grid-area: grid;
|
|
1089
1093
|
padding: 3px;
|
|
1090
1094
|
}
|
|
1091
1095
|
.date-calendar-box[aria-expanded=true] .date-calendar-box-grid-of-days table {
|
|
1092
1096
|
width: 100%;
|
|
1093
1097
|
height: 100%;
|
|
1098
|
+
min-height: 252px;
|
|
1094
1099
|
}
|
|
1095
1100
|
.date-calendar-box[aria-expanded=true] .date-calendar-box-grid-of-days table td[role=gridcell] {
|
|
1096
1101
|
text-align: center;
|
|
@@ -1127,6 +1132,13 @@ input::-webkit-inner-spin-button {
|
|
|
1127
1132
|
border-color: #d1d3d4;
|
|
1128
1133
|
border-style: dashed;
|
|
1129
1134
|
}
|
|
1135
|
+
.date-calendar-box[aria-expanded=true] .date-calendar-box-grid-of-days table .day-button[data-state-out-of-bounds=true] {
|
|
1136
|
+
color: #cacaca !important;
|
|
1137
|
+
cursor: not-allowed;
|
|
1138
|
+
}
|
|
1139
|
+
.date-calendar-box[aria-expanded=true] .date-calendar-box-grid-of-days table .day-button[data-state-out-of-bounds=true]:hover {
|
|
1140
|
+
background-color: transparent;
|
|
1141
|
+
}
|
|
1130
1142
|
.date-calendar-box[aria-expanded=true] .date-calendar-box-grid-of-days table .day-button[data-state-is-today=true] {
|
|
1131
1143
|
position: relative;
|
|
1132
1144
|
}
|
|
@@ -1144,4 +1156,62 @@ input::-webkit-inner-spin-button {
|
|
|
1144
1156
|
}
|
|
1145
1157
|
.date-calendar-box[aria-expanded=true] .date-calendar-box-grid-of-days table .day-button[data-state-is-today=true][aria-selected=true]::after {
|
|
1146
1158
|
background-color: #fff;
|
|
1159
|
+
}
|
|
1160
|
+
.date-calendar-box[aria-expanded=true] .date-calendar-box-time-selector {
|
|
1161
|
+
grid-area: time;
|
|
1162
|
+
display: flex;
|
|
1163
|
+
flex-direction: row;
|
|
1164
|
+
height: 0;
|
|
1165
|
+
min-height: 100%;
|
|
1166
|
+
}
|
|
1167
|
+
.date-calendar-box[aria-expanded=true] .date-calendar-box-time-selector .time-column {
|
|
1168
|
+
display: flex;
|
|
1169
|
+
flex-direction: column;
|
|
1170
|
+
min-height: 0;
|
|
1171
|
+
width: 52px;
|
|
1172
|
+
border-left: 1px solid #dae1e8;
|
|
1173
|
+
}
|
|
1174
|
+
.date-calendar-box[aria-expanded=true] .date-calendar-box-time-selector .time-column .time-column-label {
|
|
1175
|
+
padding: 6px 0;
|
|
1176
|
+
font-size: 87.5%;
|
|
1177
|
+
text-align: center;
|
|
1178
|
+
white-space: nowrap;
|
|
1179
|
+
background-color: #f0f0f0;
|
|
1180
|
+
border-bottom: 1px solid #e1e1e1;
|
|
1181
|
+
}
|
|
1182
|
+
.date-calendar-box[aria-expanded=true] .date-calendar-box-time-selector .time-column .time-column-options {
|
|
1183
|
+
flex: 1 1 auto;
|
|
1184
|
+
min-height: 0;
|
|
1185
|
+
font-size: 87.5%;
|
|
1186
|
+
overflow: hidden auto;
|
|
1187
|
+
scrollbar-width: thin;
|
|
1188
|
+
}
|
|
1189
|
+
.date-calendar-box[aria-expanded=true] .date-calendar-box-time-selector .time-unit-button {
|
|
1190
|
+
width: 100%;
|
|
1191
|
+
padding: 6px 0;
|
|
1192
|
+
border: none;
|
|
1193
|
+
cursor: pointer;
|
|
1194
|
+
text-align: center;
|
|
1195
|
+
background-color: transparent;
|
|
1196
|
+
}
|
|
1197
|
+
.date-calendar-box[aria-expanded=true] .date-calendar-box-time-selector .time-unit-button:hover {
|
|
1198
|
+
background-color: #dae1e8;
|
|
1199
|
+
}
|
|
1200
|
+
.date-calendar-box[aria-expanded=true] .date-calendar-box-time-selector .time-unit-button[aria-selected=true], .date-calendar-box[aria-expanded=true] .date-calendar-box-time-selector .time-unit-button[aria-selected=true]:hover {
|
|
1201
|
+
color: #fff;
|
|
1202
|
+
background-color: #6C757D;
|
|
1203
|
+
}
|
|
1204
|
+
.date-calendar-box[aria-expanded=true] .date-calendar-box-time-selector .time-unit-button[data-state-out-of-bounds=true] {
|
|
1205
|
+
color: #cacaca !important;
|
|
1206
|
+
cursor: not-allowed;
|
|
1207
|
+
}
|
|
1208
|
+
.date-calendar-box[aria-expanded=true] .date-calendar-box-time-selector .time-unit-button[data-state-out-of-bounds=true]:hover {
|
|
1209
|
+
background-color: transparent;
|
|
1210
|
+
}
|
|
1211
|
+
.date-calendar-box[aria-expanded=true] .date-calendar-box-time-selector[data-state-disabled=true] .time-unit-button {
|
|
1212
|
+
color: #cacaca !important;
|
|
1213
|
+
cursor: not-allowed;
|
|
1214
|
+
}
|
|
1215
|
+
.date-calendar-box[aria-expanded=true] .date-calendar-box-time-selector[data-state-disabled=true] .time-unit-button:hover {
|
|
1216
|
+
background-color: transparent;
|
|
1147
1217
|
}
|
|
@@ -197,7 +197,6 @@ const useForm = ({
|
|
|
197
197
|
};
|
|
198
198
|
const handleSubmit = (callback) => (event_1) => {
|
|
199
199
|
event_1.preventDefault();
|
|
200
|
-
event_1.stopPropagation();
|
|
201
200
|
const validationErrors = validateAllFields();
|
|
202
201
|
const hasErrors_0 = !_.isEmpty(validationErrors);
|
|
203
202
|
if (hasErrors_0) return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/lib/form2/useForm/index.ts"],"sourcesContent":["import _ from 'lodash';\nimport { ChangeEvent, FocusEvent, FormEvent, useRef, useState } from 'react';\nimport type {\n FieldErrors, FieldChanged, FieldTouched, FieldFocusOptions, UseFormProps,\n UseFormReturn, DeepPartial,\n RegisterOptions,\n} from '../types';\nimport { deepMergeValues, flattenValidators, mergeRefs } from '../helpers';\n\nconst useForm = <ValuesType extends Record<string, any>>({\n initialValues,\n validators = {},\n options = { validationMode: 'default' },\n}: UseFormProps<ValuesType>): UseFormReturn<ValuesType> => {\n const [values, setValues] = useState<ValuesType>(initialValues);\n const [errors, setErrors] = useState<FieldErrors<ValuesType>>({});\n const [changed, setChanged] = useState<FieldChanged<ValuesType>>({});\n const [touched, setTouched] = useState<FieldTouched<ValuesType>>({});\n const fieldsRef = useRef<Record<string, HTMLInputElement | HTMLTextAreaElement | null>>({});\n const initialValuesRef = useRef<ValuesType>(initialValues);\n const valuesToCompareInChangedRef = useRef<ValuesType>(initialValues);\n\n const flattenedValidators = flattenValidators(validators);\n\n const validateBatchOfFields = (\n valuesSnapshot: ValuesType,\n touchedFields: FieldTouched<ValuesType> = touched,\n errorsFields: FieldErrors<ValuesType> = errors,\n ) => {\n const fieldsToValidate = Object.keys(flattenedValidators).filter((path) => {\n const wasTouched = _.get(touchedFields, path);\n const hasErrors = !_.isEmpty(_.get(errorsFields, path));\n return Boolean(wasTouched || hasErrors);\n });\n\n if (!fieldsToValidate.length) return;\n\n setErrors((prevErrorsState) => {\n const updatedErrorsState = _.cloneDeep(prevErrorsState);\n\n fieldsToValidate.forEach((path) => {\n const value = _.get(valuesSnapshot, path);\n const fieldValidators = _.get(flattenedValidators, path) ?? [];\n const fieldErrors = fieldValidators\n .map((validator: any) => validator(value, valuesSnapshot))\n .filter((message: string) => Boolean(message));\n\n _.set(updatedErrorsState, path, fieldErrors);\n });\n\n return updatedErrorsState;\n });\n };\n\n const validateAllFields = () => {\n const allValidationErrors: FieldErrors<ValuesType> = {};\n\n Object.keys(flattenedValidators).forEach((path) => {\n const value = _.get(values, path);\n const fieldValidators = _.get(flattenedValidators, path) ?? [];\n const fieldErrors = fieldValidators\n .map((validator: any) => validator(value, values))\n .filter((message: string) => Boolean(message));\n\n if (fieldErrors.length) {\n _.set(allValidationErrors, path, fieldErrors);\n }\n });\n\n setErrors(allValidationErrors);\n return allValidationErrors;\n };\n\n const checkFormIsValid = () => {\n return Object.keys(flattenedValidators).every((path) => {\n const value = _.get(values, path);\n const fieldValidators = _.get(flattenedValidators, path) ?? [];\n return fieldValidators.every((validator: any) => !validator(value, values));\n });\n };\n\n const getFieldError = (name: string): string[] => {\n const fieldErrors = _.get(errors, name) as string[] ?? [];\n return fieldErrors;\n };\n\n const setExternalErrors = (externalErrors: Record<string, string[]>) => {\n setErrors((prevStateErrors) => {\n const newErrorsState = _.cloneDeep(prevStateErrors);\n Object.entries(externalErrors).forEach(([key, value]) => {\n _.set(newErrorsState, key, value);\n });\n return newErrorsState;\n });\n };\n\n const getFieldValue = (name: string): any => {\n return _.get(values, name);\n };\n\n const setFieldValue = (name: string, value: any) => {\n setValues((prevStateValues) => {\n const updatedValuesState = _.cloneDeep(prevStateValues);\n _.set(updatedValuesState, name, value);\n\n const valueToCompare = _.get(valuesToCompareInChangedRef.current, name);\n const hasChanged = !_.isEqual(valueToCompare, value);\n\n setChanged((prevStateChanged) => {\n const updatedChangedState = _.cloneDeep(prevStateChanged);\n _.set(updatedChangedState, name, hasChanged);\n return updatedChangedState;\n });\n\n if (options.validationMode === 'default') {\n validateBatchOfFields(updatedValuesState);\n }\n\n return updatedValuesState;\n });\n };\n\n const setFieldFocus = (name: string, fieldFocusOptions?: FieldFocusOptions) => {\n const field = fieldsRef.current[name];\n field?.focus?.();\n if (fieldFocusOptions?.shouldSelect) {\n field?.select?.();\n }\n };\n\n const compareField = (name: string, valueToCompare: any): boolean => {\n return _.isEqual(_.get(values, name), valueToCompare);\n };\n\n const cleanErrors = (fieldsToClean?: string[]) => {\n if (!fieldsToClean) {\n setErrors({});\n return;\n }\n\n setErrors((prevErrorsState) => {\n const newErrorsState = _.cloneDeep(prevErrorsState);\n fieldsToClean.forEach((key) => {\n _.unset(newErrorsState, key);\n });\n return newErrorsState;\n });\n };\n\n const reset = (inputsToReset?: string[], internalReset?: boolean) => {\n const newValuesState = _.cloneDeep(values);\n const newTouchedState = _.cloneDeep(touched);\n const newChangedState = _.cloneDeep(changed);\n const inputs = inputsToReset ?? Object.keys(initialValuesRef.current);\n\n inputs.forEach((key) => {\n const initialValue = _.get(initialValuesRef.current, key);\n _.set(newValuesState, key, initialValue);\n _.set(newTouchedState, key, false);\n _.set(newChangedState, key, false);\n });\n\n setValues(newValuesState);\n setTouched(newTouchedState);\n setChanged(newChangedState);\n\n if (inputsToReset) {\n setErrors((prevErrorsState) => {\n const newErrorsState = _.cloneDeep(prevErrorsState);\n inputsToReset.forEach((key) => {\n _.unset(newErrorsState, key);\n });\n return newErrorsState;\n });\n } else {\n setErrors({});\n }\n\n if (!internalReset) { valuesToCompareInChangedRef.current = initialValuesRef.current; }\n };\n\n const changeValues = (fieldValues: DeepPartial<ValuesType>) => {\n reset(undefined, true);\n setValues((prevStateValues) => {\n const newValuesState = deepMergeValues(prevStateValues, fieldValues);\n valuesToCompareInChangedRef.current = newValuesState;\n return newValuesState;\n });\n };\n\n const register = (\n name: string,\n registerOptions?: RegisterOptions,\n ) => {\n const { onChange, onBlur, ref } = registerOptions ?? {};\n return {\n name,\n ref: mergeRefs<HTMLInputElement | HTMLTextAreaElement>((inputElement: any) => {\n fieldsRef.current[name] = inputElement;\n }, ref),\n value: _.get(values, name, _.get(initialValuesRef.current, name, '')),\n errors: _.get(errors, name, []),\n onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n const { value } = event.target;\n\n setValues((prevStateValues) => {\n const updatedValues = _.cloneDeep(prevStateValues);\n _.set(updatedValues, name, value);\n\n const hasChanged = !_.isEqual(_.get(valuesToCompareInChangedRef.current, name), value);\n setChanged((prevStateChanged) => {\n const updatedChangedState = _.cloneDeep(prevStateChanged);\n _.set(updatedChangedState, name, hasChanged);\n return updatedChangedState;\n });\n\n if (options.validationMode === 'default') {\n validateBatchOfFields(updatedValues, touched, errors);\n }\n\n return updatedValues;\n });\n\n onChange?.(event);\n },\n onBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n const touchedSnapshot = _.cloneDeep(touched);\n _.set(touchedSnapshot, name, true);\n\n setTouched((prevStateTouched) => {\n const updated = _.cloneDeep(prevStateTouched);\n _.set(updated, name, true);\n return updated;\n });\n\n if (options.validationMode === 'default') {\n validateBatchOfFields(values, touchedSnapshot, errors);\n }\n\n onBlur?.(event);\n },\n };\n };\n\n const handleSubmit = (callback: (data: ValuesType) => void) => (event: FormEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const validationErrors = validateAllFields();\n const hasErrors = !_.isEmpty(validationErrors);\n\n if (hasErrors) return;\n callback(values);\n };\n\n const isValid = checkFormIsValid();\n const formHasChange = Object.values(changed).some(Boolean);\n\n return {\n reset,\n changed,\n values,\n errors,\n touched,\n isValid,\n formHasChange,\n register,\n cleanErrors,\n changeValues,\n compareField,\n handleSubmit,\n getFieldValue,\n getFieldError,\n setFieldFocus,\n setFieldValue,\n setExternalErrors,\n initialValues: initialValuesRef.current,\n };\n};\n\nexport default useForm;\n"],"names":["useForm","initialValues","validators","options","validationMode","values","setValues","useState","errors","setErrors","changed","setChanged","touched","setTouched","fieldsRef","useRef","initialValuesRef","valuesToCompareInChangedRef","flattenedValidators","flattenValidators","validateBatchOfFields","valuesSnapshot","touchedFields","errorsFields","fieldsToValidate","Object","keys","filter","path","wasTouched","_","get","hasErrors","isEmpty","Boolean","length","prevErrorsState","updatedErrorsState","cloneDeep","forEach","value","fieldValidators","fieldErrors","map","validator","message","set","validateAllFields","allValidationErrors","checkFormIsValid","every","getFieldError","name","setExternalErrors","externalErrors","prevStateErrors","newErrorsState","entries","key","getFieldValue","setFieldValue","prevStateValues","updatedValuesState","valueToCompare","current","hasChanged","isEqual","prevStateChanged","updatedChangedState","setFieldFocus","fieldFocusOptions","field","focus","shouldSelect","select","compareField","cleanErrors","fieldsToClean","unset","reset","inputsToReset","internalReset","newValuesState","newTouchedState","newChangedState","inputs","initialValue","changeValues","fieldValues","undefined","deepMergeValues","register","registerOptions","onChange","onBlur","ref","mergeRefs","inputElement","event","target","updatedValues","touchedSnapshot","prevStateTouched","updated","handleSubmit","callback","preventDefault","stopPropagation","validationErrors","isValid","formHasChange","some"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/lib/form2/useForm/index.ts"],"sourcesContent":["import _ from 'lodash';\nimport { ChangeEvent, FocusEvent, FormEvent, useRef, useState } from 'react';\nimport type {\n FieldErrors, FieldChanged, FieldTouched, FieldFocusOptions, UseFormProps,\n UseFormReturn, DeepPartial,\n RegisterOptions,\n} from '../types';\nimport { deepMergeValues, flattenValidators, mergeRefs } from '../helpers';\n\nconst useForm = <ValuesType extends Record<string, any>>({\n initialValues,\n validators = {},\n options = { validationMode: 'default' },\n}: UseFormProps<ValuesType>): UseFormReturn<ValuesType> => {\n const [values, setValues] = useState<ValuesType>(initialValues);\n const [errors, setErrors] = useState<FieldErrors<ValuesType>>({});\n const [changed, setChanged] = useState<FieldChanged<ValuesType>>({});\n const [touched, setTouched] = useState<FieldTouched<ValuesType>>({});\n const fieldsRef = useRef<Record<string, HTMLInputElement | HTMLTextAreaElement | null>>({});\n const initialValuesRef = useRef<ValuesType>(initialValues);\n const valuesToCompareInChangedRef = useRef<ValuesType>(initialValues);\n\n const flattenedValidators = flattenValidators(validators);\n\n const validateBatchOfFields = (\n valuesSnapshot: ValuesType,\n touchedFields: FieldTouched<ValuesType> = touched,\n errorsFields: FieldErrors<ValuesType> = errors,\n ) => {\n const fieldsToValidate = Object.keys(flattenedValidators).filter((path) => {\n const wasTouched = _.get(touchedFields, path);\n const hasErrors = !_.isEmpty(_.get(errorsFields, path));\n return Boolean(wasTouched || hasErrors);\n });\n\n if (!fieldsToValidate.length) return;\n\n setErrors((prevErrorsState) => {\n const updatedErrorsState = _.cloneDeep(prevErrorsState);\n\n fieldsToValidate.forEach((path) => {\n const value = _.get(valuesSnapshot, path);\n const fieldValidators = _.get(flattenedValidators, path) ?? [];\n const fieldErrors = fieldValidators\n .map((validator: any) => validator(value, valuesSnapshot))\n .filter((message: string) => Boolean(message));\n\n _.set(updatedErrorsState, path, fieldErrors);\n });\n\n return updatedErrorsState;\n });\n };\n\n const validateAllFields = () => {\n const allValidationErrors: FieldErrors<ValuesType> = {};\n\n Object.keys(flattenedValidators).forEach((path) => {\n const value = _.get(values, path);\n const fieldValidators = _.get(flattenedValidators, path) ?? [];\n const fieldErrors = fieldValidators\n .map((validator: any) => validator(value, values))\n .filter((message: string) => Boolean(message));\n\n if (fieldErrors.length) {\n _.set(allValidationErrors, path, fieldErrors);\n }\n });\n\n setErrors(allValidationErrors);\n return allValidationErrors;\n };\n\n const checkFormIsValid = () => {\n return Object.keys(flattenedValidators).every((path) => {\n const value = _.get(values, path);\n const fieldValidators = _.get(flattenedValidators, path) ?? [];\n return fieldValidators.every((validator: any) => !validator(value, values));\n });\n };\n\n const getFieldError = (name: string): string[] => {\n const fieldErrors = _.get(errors, name) as string[] ?? [];\n return fieldErrors;\n };\n\n const setExternalErrors = (externalErrors: Record<string, string[]>) => {\n setErrors((prevStateErrors) => {\n const newErrorsState = _.cloneDeep(prevStateErrors);\n Object.entries(externalErrors).forEach(([key, value]) => {\n _.set(newErrorsState, key, value);\n });\n return newErrorsState;\n });\n };\n\n const getFieldValue = (name: string): any => {\n return _.get(values, name);\n };\n\n const setFieldValue = (name: string, value: any) => {\n setValues((prevStateValues) => {\n const updatedValuesState = _.cloneDeep(prevStateValues);\n _.set(updatedValuesState, name, value);\n\n const valueToCompare = _.get(valuesToCompareInChangedRef.current, name);\n const hasChanged = !_.isEqual(valueToCompare, value);\n\n setChanged((prevStateChanged) => {\n const updatedChangedState = _.cloneDeep(prevStateChanged);\n _.set(updatedChangedState, name, hasChanged);\n return updatedChangedState;\n });\n\n if (options.validationMode === 'default') {\n validateBatchOfFields(updatedValuesState);\n }\n\n return updatedValuesState;\n });\n };\n\n const setFieldFocus = (name: string, fieldFocusOptions?: FieldFocusOptions) => {\n const field = fieldsRef.current[name];\n field?.focus?.();\n if (fieldFocusOptions?.shouldSelect) {\n field?.select?.();\n }\n };\n\n const compareField = (name: string, valueToCompare: any): boolean => {\n return _.isEqual(_.get(values, name), valueToCompare);\n };\n\n const cleanErrors = (fieldsToClean?: string[]) => {\n if (!fieldsToClean) {\n setErrors({});\n return;\n }\n\n setErrors((prevErrorsState) => {\n const newErrorsState = _.cloneDeep(prevErrorsState);\n fieldsToClean.forEach((key) => {\n _.unset(newErrorsState, key);\n });\n return newErrorsState;\n });\n };\n\n const reset = (inputsToReset?: string[], internalReset?: boolean) => {\n const newValuesState = _.cloneDeep(values);\n const newTouchedState = _.cloneDeep(touched);\n const newChangedState = _.cloneDeep(changed);\n const inputs = inputsToReset ?? Object.keys(initialValuesRef.current);\n\n inputs.forEach((key) => {\n const initialValue = _.get(initialValuesRef.current, key);\n _.set(newValuesState, key, initialValue);\n _.set(newTouchedState, key, false);\n _.set(newChangedState, key, false);\n });\n\n setValues(newValuesState);\n setTouched(newTouchedState);\n setChanged(newChangedState);\n\n if (inputsToReset) {\n setErrors((prevErrorsState) => {\n const newErrorsState = _.cloneDeep(prevErrorsState);\n inputsToReset.forEach((key) => {\n _.unset(newErrorsState, key);\n });\n return newErrorsState;\n });\n } else {\n setErrors({});\n }\n\n if (!internalReset) { valuesToCompareInChangedRef.current = initialValuesRef.current; }\n };\n\n const changeValues = (fieldValues: DeepPartial<ValuesType>) => {\n reset(undefined, true);\n setValues((prevStateValues) => {\n const newValuesState = deepMergeValues(prevStateValues, fieldValues);\n valuesToCompareInChangedRef.current = newValuesState;\n return newValuesState;\n });\n };\n\n const register = (\n name: string,\n registerOptions?: RegisterOptions,\n ) => {\n const { onChange, onBlur, ref } = registerOptions ?? {};\n return {\n name,\n ref: mergeRefs<HTMLInputElement | HTMLTextAreaElement>((inputElement: any) => {\n fieldsRef.current[name] = inputElement;\n }, ref),\n value: _.get(values, name, _.get(initialValuesRef.current, name, '')),\n errors: _.get(errors, name, []),\n onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n const { value } = event.target;\n\n setValues((prevStateValues) => {\n const updatedValues = _.cloneDeep(prevStateValues);\n _.set(updatedValues, name, value);\n\n const hasChanged = !_.isEqual(_.get(valuesToCompareInChangedRef.current, name), value);\n setChanged((prevStateChanged) => {\n const updatedChangedState = _.cloneDeep(prevStateChanged);\n _.set(updatedChangedState, name, hasChanged);\n return updatedChangedState;\n });\n\n if (options.validationMode === 'default') {\n validateBatchOfFields(updatedValues, touched, errors);\n }\n\n return updatedValues;\n });\n\n onChange?.(event);\n },\n onBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n const touchedSnapshot = _.cloneDeep(touched);\n _.set(touchedSnapshot, name, true);\n\n setTouched((prevStateTouched) => {\n const updated = _.cloneDeep(prevStateTouched);\n _.set(updated, name, true);\n return updated;\n });\n\n if (options.validationMode === 'default') {\n validateBatchOfFields(values, touchedSnapshot, errors);\n }\n\n onBlur?.(event);\n },\n };\n };\n\n const handleSubmit = (callback: (data: ValuesType) => void) => (event: FormEvent) => {\n event.preventDefault();\n\n const validationErrors = validateAllFields();\n const hasErrors = !_.isEmpty(validationErrors);\n\n if (hasErrors) return;\n callback(values);\n };\n\n const isValid = checkFormIsValid();\n const formHasChange = Object.values(changed).some(Boolean);\n\n return {\n reset,\n changed,\n values,\n errors,\n touched,\n isValid,\n formHasChange,\n register,\n cleanErrors,\n changeValues,\n compareField,\n handleSubmit,\n getFieldValue,\n getFieldError,\n setFieldFocus,\n setFieldValue,\n setExternalErrors,\n initialValues: initialValuesRef.current,\n };\n};\n\nexport default useForm;\n"],"names":["useForm","initialValues","validators","options","validationMode","values","setValues","useState","errors","setErrors","changed","setChanged","touched","setTouched","fieldsRef","useRef","initialValuesRef","valuesToCompareInChangedRef","flattenedValidators","flattenValidators","validateBatchOfFields","valuesSnapshot","touchedFields","errorsFields","fieldsToValidate","Object","keys","filter","path","wasTouched","_","get","hasErrors","isEmpty","Boolean","length","prevErrorsState","updatedErrorsState","cloneDeep","forEach","value","fieldValidators","fieldErrors","map","validator","message","set","validateAllFields","allValidationErrors","checkFormIsValid","every","getFieldError","name","setExternalErrors","externalErrors","prevStateErrors","newErrorsState","entries","key","getFieldValue","setFieldValue","prevStateValues","updatedValuesState","valueToCompare","current","hasChanged","isEqual","prevStateChanged","updatedChangedState","setFieldFocus","fieldFocusOptions","field","focus","shouldSelect","select","compareField","cleanErrors","fieldsToClean","unset","reset","inputsToReset","internalReset","newValuesState","newTouchedState","newChangedState","inputs","initialValue","changeValues","fieldValues","undefined","deepMergeValues","register","registerOptions","onChange","onBlur","ref","mergeRefs","inputElement","event","target","updatedValues","touchedSnapshot","prevStateTouched","updated","handleSubmit","callback","preventDefault","validationErrors","isValid","formHasChange","some"],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { AsyncFunc, Func, UseScrollEndReachedParams } from './types';
|
|
2
|
+
export interface ScrollEndReachedParams extends UseScrollEndReachedParams {
|
|
3
|
+
elementRef: React.RefObject<HTMLElement | null>;
|
|
4
|
+
onEndReached?: Func | AsyncFunc;
|
|
5
|
+
onEndReachedThreshold?: number;
|
|
6
|
+
}
|
|
7
|
+
export declare function getCurrentThreshold(scrollableElement: HTMLElement, scrollThreshold: number): number;
|
|
8
|
+
export declare function useScrollEndReached({ elementRef, onEndReached, onEndReachedThreshold, itemsCount, }: ScrollEndReachedParams): void;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { useRef, useEffect } from "react";
|
|
2
|
+
function getCurrentThreshold(scrollableElement, scrollThreshold) {
|
|
3
|
+
const MIN_THRESHOLD = 0;
|
|
4
|
+
const MAX_THRESHOLD = 1;
|
|
5
|
+
if (scrollThreshold < MIN_THRESHOLD) return MIN_THRESHOLD;
|
|
6
|
+
if (scrollThreshold > MAX_THRESHOLD) return MAX_THRESHOLD;
|
|
7
|
+
const {
|
|
8
|
+
scrollHeight,
|
|
9
|
+
clientHeight
|
|
10
|
+
} = scrollableElement;
|
|
11
|
+
const scrollableHeight = Math.max(scrollHeight - clientHeight, 0);
|
|
12
|
+
const thresholdBase = Math.min(clientHeight, scrollableHeight);
|
|
13
|
+
return Math.round(thresholdBase * scrollThreshold);
|
|
14
|
+
}
|
|
15
|
+
function useScrollEndReached({
|
|
16
|
+
elementRef,
|
|
17
|
+
onEndReached,
|
|
18
|
+
onEndReachedThreshold = 0.25,
|
|
19
|
+
itemsCount
|
|
20
|
+
}) {
|
|
21
|
+
const lastScrollTop = useRef(null);
|
|
22
|
+
const enableOnEndReached = useRef(true);
|
|
23
|
+
const lastItemsCount = useRef(itemsCount);
|
|
24
|
+
const waitingForItems = useRef(false);
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
if (itemsCount !== void 0 && lastItemsCount.current !== itemsCount) {
|
|
27
|
+
lastItemsCount.current = itemsCount;
|
|
28
|
+
waitingForItems.current = false;
|
|
29
|
+
enableOnEndReached.current = true;
|
|
30
|
+
}
|
|
31
|
+
}, [itemsCount]);
|
|
32
|
+
const onScrollEndReached = async () => {
|
|
33
|
+
const element = elementRef.current;
|
|
34
|
+
if (element && onEndReached) {
|
|
35
|
+
const {
|
|
36
|
+
scrollTop,
|
|
37
|
+
scrollHeight,
|
|
38
|
+
clientHeight
|
|
39
|
+
} = element;
|
|
40
|
+
const isScrollingDown = lastScrollTop.current === null || scrollTop > lastScrollTop.current;
|
|
41
|
+
lastScrollTop.current = scrollTop;
|
|
42
|
+
const scrollOffset = scrollHeight - clientHeight - scrollTop - 1;
|
|
43
|
+
const threshold = getCurrentThreshold(element, onEndReachedThreshold);
|
|
44
|
+
if (scrollOffset <= threshold && isScrollingDown && enableOnEndReached.current && !waitingForItems.current) {
|
|
45
|
+
enableOnEndReached.current = false;
|
|
46
|
+
waitingForItems.current = itemsCount !== void 0;
|
|
47
|
+
try {
|
|
48
|
+
await onEndReached();
|
|
49
|
+
} finally {
|
|
50
|
+
enableOnEndReached.current = itemsCount === void 0;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
useEffect(() => {
|
|
56
|
+
const element_0 = elementRef.current;
|
|
57
|
+
if (element_0 && onEndReached) {
|
|
58
|
+
element_0.addEventListener("scroll", onScrollEndReached);
|
|
59
|
+
}
|
|
60
|
+
return () => {
|
|
61
|
+
element_0?.removeEventListener("scroll", onScrollEndReached);
|
|
62
|
+
};
|
|
63
|
+
}, [onEndReached, onEndReachedThreshold]);
|
|
64
|
+
}
|
|
65
|
+
export {
|
|
66
|
+
getCurrentThreshold,
|
|
67
|
+
useScrollEndReached
|
|
68
|
+
};
|
|
69
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/lib/hooks/useScrollEndReached/index.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { AsyncFunc, Func, UseScrollEndReachedParams } from \"./types\";\n\nexport interface ScrollEndReachedParams extends UseScrollEndReachedParams {\n elementRef: React.RefObject<HTMLElement | null>;\n onEndReached?: Func | AsyncFunc;\n onEndReachedThreshold?: number;\n}\n\nexport function getCurrentThreshold(\n scrollableElement: HTMLElement,\n scrollThreshold: number,\n): number {\n const MIN_THRESHOLD = 0;\n const MAX_THRESHOLD = 1;\n if (scrollThreshold < MIN_THRESHOLD) return MIN_THRESHOLD;\n if (scrollThreshold > MAX_THRESHOLD) return MAX_THRESHOLD;\n const { scrollHeight, clientHeight } = scrollableElement;\n const scrollableHeight = Math.max(scrollHeight - clientHeight, 0);\n const thresholdBase = Math.min(clientHeight, scrollableHeight);\n\n return Math.round(thresholdBase * scrollThreshold);\n}\n\nexport function useScrollEndReached({\n elementRef,\n onEndReached,\n onEndReachedThreshold = 0.25,\n itemsCount,\n}: ScrollEndReachedParams) {\n const lastScrollTop = useRef<number | null>(null);\n const enableOnEndReached = useRef(true);\n const lastItemsCount = useRef<number | undefined>(itemsCount);\n const waitingForItems = useRef(false);\n\n useEffect(() => {\n if (itemsCount !== undefined && lastItemsCount.current !== itemsCount) {\n lastItemsCount.current = itemsCount;\n waitingForItems.current = false;\n enableOnEndReached.current = true;\n }\n }, [itemsCount]);\n\n const onScrollEndReached = async () => {\n const element = elementRef.current;\n\n if (element && onEndReached) {\n const { scrollTop, scrollHeight, clientHeight } = element;\n const isScrollingDown =\n lastScrollTop.current === null || scrollTop > lastScrollTop.current;\n lastScrollTop.current = scrollTop;\n const scrollOffset = scrollHeight - clientHeight - scrollTop - 1;\n const threshold = getCurrentThreshold(element, onEndReachedThreshold);\n\n if (\n scrollOffset <= threshold &&\n isScrollingDown &&\n enableOnEndReached.current &&\n !waitingForItems.current\n ) {\n enableOnEndReached.current = false;\n waitingForItems.current = itemsCount !== undefined;\n try {\n await onEndReached();\n } finally {\n enableOnEndReached.current = itemsCount === undefined;\n }\n }\n }\n };\n\n useEffect(() => {\n const element = elementRef.current;\n if (element && onEndReached) {\n element.addEventListener('scroll', onScrollEndReached);\n }\n\n return () => {\n element?.removeEventListener('scroll', onScrollEndReached);\n };\n }, [onEndReached, onEndReachedThreshold]);\n}\n"],"names":["getCurrentThreshold","scrollableElement","scrollThreshold","MIN_THRESHOLD","MAX_THRESHOLD","scrollHeight","clientHeight","scrollableHeight","Math","max","thresholdBase","min","round","useScrollEndReached","elementRef","onEndReached","onEndReachedThreshold","itemsCount","lastScrollTop","useRef","enableOnEndReached","lastItemsCount","waitingForItems","useEffect","undefined","current","onScrollEndReached","element","scrollTop","isScrollingDown","scrollOffset","threshold","addEventListener","removeEventListener"],"mappings":";AASO,SAASA,oBACdC,mBACAC,iBACQ;AACR,QAAMC,gBAAgB;AACtB,QAAMC,gBAAgB;AACtB,MAAIF,kBAAkBC,cAAe,QAAOA;AAC5C,MAAID,kBAAkBE,cAAe,QAAOA;AAC5C,QAAM;AAAA,IAAEC;AAAAA,IAAcC;AAAAA,EAAAA,IAAiBL;AACvC,QAAMM,mBAAmBC,KAAKC,IAAIJ,eAAeC,cAAc,CAAC;AAChE,QAAMI,gBAAgBF,KAAKG,IAAIL,cAAcC,gBAAgB;AAE7D,SAAOC,KAAKI,MAAMF,gBAAgBR,eAAe;AACnD;AAEO,SAASW,oBAAoB;AAAA,EAClCC;AAAAA,EACAC;AAAAA,EACAC,wBAAwB;AAAA,EACxBC;AACsB,GAAG;AACzB,QAAMC,gBAAgBC,OAAsB,IAAI;AAChD,QAAMC,qBAAqBD,OAAO,IAAI;AACtC,QAAME,iBAAiBF,OAA2BF,UAAU;AAC5D,QAAMK,kBAAkBH,OAAO,KAAK;AAEpCI,YAAU,MAAM;AACd,QAAIN,eAAeO,UAAaH,eAAeI,YAAYR,YAAY;AACrEI,qBAAeI,UAAUR;AACzBK,sBAAgBG,UAAU;AAC1BL,yBAAmBK,UAAU;AAAA,IAC/B;AAAA,EACF,GAAG,CAACR,UAAU,CAAC;AAEf,QAAMS,qBAAqB,YAAY;AACrC,UAAMC,UAAUb,WAAWW;AAE3B,QAAIE,WAAWZ,cAAc;AAC3B,YAAM;AAAA,QAAEa;AAAAA,QAAWvB;AAAAA,QAAcC;AAAAA,MAAAA,IAAiBqB;AAClD,YAAME,kBACJX,cAAcO,YAAY,QAAQG,YAAYV,cAAcO;AAC9DP,oBAAcO,UAAUG;AACxB,YAAME,eAAezB,eAAeC,eAAesB,YAAY;AAC/D,YAAMG,YAAY/B,oBAAoB2B,SAASX,qBAAqB;AAEpE,UACEc,gBAAgBC,aAChBF,mBACAT,mBAAmBK,WACnB,CAACH,gBAAgBG,SACjB;AACAL,2BAAmBK,UAAU;AAC7BH,wBAAgBG,UAAUR,eAAeO;AACzC,YAAI;AACF,gBAAMT,aAAAA;AAAAA,QACR,UAAA;AACEK,6BAAmBK,UAAUR,eAAeO;AAAAA,QAC9C;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEAD,YAAU,MAAM;AACd,UAAMI,YAAUb,WAAWW;AAC3B,QAAIE,aAAWZ,cAAc;AAC3BY,gBAAQK,iBAAiB,UAAUN,kBAAkB;AAAA,IACvD;AAEA,WAAO,MAAM;AACXC,iBAASM,oBAAoB,UAAUP,kBAAkB;AAAA,IAC3D;AAAA,EACF,GAAG,CAACX,cAAcC,qBAAqB,CAAC;AAC1C;"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useEffect } from "react";
|
|
3
|
+
import { useScrollEndReached } from "../../hooks/useScrollEndReached/index.js";
|
|
3
4
|
import Icon from "../../icons/index.js";
|
|
4
5
|
import Avatar from "../../avatar/index.js";
|
|
5
6
|
import { returnDropdownDynamicStyles, getDropdownItemCssClass } from "./helper.js";
|
|
@@ -25,7 +26,10 @@ const Dropdown = (props) => {
|
|
|
25
26
|
handleOnKeydown,
|
|
26
27
|
searchNotFoundText,
|
|
27
28
|
idKey,
|
|
28
|
-
selectFieldRef
|
|
29
|
+
selectFieldRef,
|
|
30
|
+
onEndReached,
|
|
31
|
+
onEndReachedThreshold,
|
|
32
|
+
itemsCount
|
|
29
33
|
} = props;
|
|
30
34
|
const [dropdownDynamicStyles, setDropdownDynamicStyles] = useState(returnDropdownDynamicStyles({
|
|
31
35
|
...props
|
|
@@ -37,6 +41,12 @@ const Dropdown = (props) => {
|
|
|
37
41
|
}));
|
|
38
42
|
}
|
|
39
43
|
}, [dropdownRef.current, dataCombo]);
|
|
44
|
+
useScrollEndReached({
|
|
45
|
+
elementRef: dropdownRef,
|
|
46
|
+
onEndReached,
|
|
47
|
+
onEndReachedThreshold,
|
|
48
|
+
itemsCount: itemsCount ?? dataCombo.length
|
|
49
|
+
});
|
|
40
50
|
return /* @__PURE__ */ jsx(DropdownPopup, { align: "left", leftPosition: dropdownDynamicStyles.left, topPosition: dropdownDynamicStyles.top, targetRef: selectFieldRef?.current, children: /* @__PURE__ */ jsxs("div", { className: "select-dropdown", ref: dropdownRef, style: {
|
|
41
51
|
width: dropdownWidth,
|
|
42
52
|
marginLeft: gridWrapperStyle ? gridWrapperStyle.paddingLeft : "0",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sources":["../../../src/lib/inputs/select/Dropdown.tsx"],"sourcesContent":["import { ChangeEvent, KeyboardEvent, useEffect, useState } from 'react';\nimport Icon from '../../icons';\nimport Avatar from '../../avatar';\nimport * as helper from './helper';\nimport DropdownPopup from '../../dropdown/Popup';\nimport { IDropdownSelectProps } from '../types';\nimport { DataCombo } from '../../@types/DataCombo';\n\nconst Dropdown = (props: IDropdownSelectProps) => {\n const {\n imageAlign = 'left', striped = false, dataCombo, descriptionKey, imgSrcKey, dropdownRef,\n currents = [], dropdownWidth, gridWrapperStyle, handleOnSelect, inputValue,\n handleOnFocus, opened, handleOnFilter, selected = null, searchOnDropdown, handleOnKeydown,\n searchNotFoundText, idKey, selectFieldRef,\n } = props;\n const [dropdownDynamicStyles, setDropdownDynamicStyles] =\n useState(helper.returnDropdownDynamicStyles({ ...props }));\n\n useEffect(() => {\n if (dropdownRef.current) {\n setDropdownDynamicStyles(helper.returnDropdownDynamicStyles({ ...props }));\n }\n }, [dropdownRef.current, dataCombo]);\n\n return (\n <DropdownPopup\n align=\"left\"\n leftPosition={dropdownDynamicStyles.left}\n topPosition={dropdownDynamicStyles.top}\n targetRef={selectFieldRef?.current}>\n <div\n className=\"select-dropdown\"\n ref={dropdownRef}\n style={{\n width: dropdownWidth,\n marginLeft: gridWrapperStyle ? gridWrapperStyle.paddingLeft : '0',\n maxHeight: dropdownDynamicStyles.maxHeight,\n }}>\n {searchOnDropdown &&\n <div className=\"filtercontainer\">\n <input\n className=\"filterinput\"\n type=\"text\"\n value={inputValue}\n onFocus={() => { handleOnFocus(); }}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n handleOnFilter(e.target.value);\n }}\n onKeyDown={(e: KeyboardEvent<Element>) => { handleOnKeydown(e); }}\n autoFocus={opened} />\n <Icon name=\"search\" viewBox=\"0 0 32 32\" />\n </div>\n }\n {dataCombo.map((item: DataCombo) => {\n const disabled = (currents && currents.length > 0 ?\n currents.some(s => s[idKey] === item[idKey])\n : false);\n const itemSelected = Boolean(selected && selected[idKey] === item[idKey]);\n return (\n <div\n key={`dropdowmIten ${item[idKey]}}`}\n className={helper.getDropdownItemCssClass(itemSelected, disabled, striped)} >\n <button\n className=\"menubutton\"\n tabIndex={-1}\n onClick={() => { if (!disabled) { handleOnSelect(item); } }}>\n {item.iconName &&\n <Icon\n name={item.iconName}\n customClass=\"menuicon\"\n style={{ order: imageAlign === 'left' ? 0 : 1 }} />\n }\n {imgSrcKey && item.imgSrcKey &&\n <Avatar\n src={item.imgSrcKey}\n customClass=\"menuicon\"\n style={{ order: imageAlign === 'left' ? 0 : 1 }} />\n }\n <span className=\"label\">{typeof descriptionKey === 'string' ? item[descriptionKey] : descriptionKey(item)}</span>\n </button>\n </div>\n );\n })}\n {dataCombo && dataCombo.length === 0 &&\n <div className=\"notfound\">{searchNotFoundText}</div>\n }\n </div>\n </DropdownPopup>\n );\n};\n\nexport default Dropdown;\n"],"names":["Dropdown","props","imageAlign","striped","dataCombo","descriptionKey","imgSrcKey","dropdownRef","currents","dropdownWidth","gridWrapperStyle","handleOnSelect","inputValue","handleOnFocus","opened","handleOnFilter","selected","searchOnDropdown","handleOnKeydown","searchNotFoundText","idKey","selectFieldRef","dropdownDynamicStyles","setDropdownDynamicStyles","useState","helper","useEffect","current","left","top","width","marginLeft","paddingLeft","maxHeight","e","target","value","map","item","disabled","
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sources":["../../../src/lib/inputs/select/Dropdown.tsx"],"sourcesContent":["import { ChangeEvent, KeyboardEvent, useEffect, useState } from 'react';\nimport { useScrollEndReached } from '../../hooks/useScrollEndReached';\nimport Icon from '../../icons';\nimport Avatar from '../../avatar';\nimport * as helper from './helper';\nimport DropdownPopup from '../../dropdown/Popup';\nimport { IDropdownSelectProps } from '../types';\nimport { DataCombo } from '../../@types/DataCombo';\n\nconst Dropdown = (props: IDropdownSelectProps) => {\n const {\n imageAlign = 'left', striped = false, dataCombo, descriptionKey, imgSrcKey, dropdownRef,\n currents = [], dropdownWidth, gridWrapperStyle, handleOnSelect, inputValue,\n handleOnFocus, opened, handleOnFilter, selected = null, searchOnDropdown, handleOnKeydown,\n searchNotFoundText, idKey, selectFieldRef, onEndReached, onEndReachedThreshold, itemsCount,\n } = props;\n const [dropdownDynamicStyles, setDropdownDynamicStyles] =\n useState(helper.returnDropdownDynamicStyles({ ...props }));\n\n useEffect(() => {\n if (dropdownRef.current) {\n setDropdownDynamicStyles(helper.returnDropdownDynamicStyles({ ...props }));\n }\n }, [dropdownRef.current, dataCombo]);\n\n useScrollEndReached({\n elementRef: dropdownRef,\n onEndReached,\n onEndReachedThreshold,\n itemsCount: itemsCount ?? dataCombo.length,\n });\n\n return (\n <DropdownPopup\n align=\"left\"\n leftPosition={dropdownDynamicStyles.left}\n topPosition={dropdownDynamicStyles.top}\n targetRef={selectFieldRef?.current}>\n <div\n className=\"select-dropdown\"\n ref={dropdownRef}\n style={{\n width: dropdownWidth,\n marginLeft: gridWrapperStyle ? gridWrapperStyle.paddingLeft : '0',\n maxHeight: dropdownDynamicStyles.maxHeight,\n }}>\n {searchOnDropdown &&\n <div className=\"filtercontainer\">\n <input\n className=\"filterinput\"\n type=\"text\"\n value={inputValue}\n onFocus={() => { handleOnFocus(); }}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n handleOnFilter(e.target.value);\n }}\n onKeyDown={(e: KeyboardEvent<Element>) => { handleOnKeydown(e); }}\n autoFocus={opened} />\n <Icon name=\"search\" viewBox=\"0 0 32 32\" />\n </div>\n }\n {dataCombo.map((item: DataCombo) => {\n const disabled = (currents && currents.length > 0 ?\n currents.some(s => s[idKey] === item[idKey])\n : false);\n const itemSelected = Boolean(selected && selected[idKey] === item[idKey]);\n return (\n <div\n key={`dropdowmIten ${item[idKey]}}`}\n className={helper.getDropdownItemCssClass(itemSelected, disabled, striped)} >\n <button\n className=\"menubutton\"\n tabIndex={-1}\n onClick={() => { if (!disabled) { handleOnSelect(item); } }}>\n {item.iconName &&\n <Icon\n name={item.iconName}\n customClass=\"menuicon\"\n style={{ order: imageAlign === 'left' ? 0 : 1 }} />\n }\n {imgSrcKey && item.imgSrcKey &&\n <Avatar\n src={item.imgSrcKey}\n customClass=\"menuicon\"\n style={{ order: imageAlign === 'left' ? 0 : 1 }} />\n }\n <span className=\"label\">{typeof descriptionKey === 'string' ? item[descriptionKey] : descriptionKey(item)}</span>\n </button>\n </div>\n );\n })}\n {dataCombo && dataCombo.length === 0 &&\n <div className=\"notfound\">{searchNotFoundText}</div>\n }\n </div>\n </DropdownPopup>\n );\n};\n\nexport default Dropdown;\n"],"names":["Dropdown","props","imageAlign","striped","dataCombo","descriptionKey","imgSrcKey","dropdownRef","currents","dropdownWidth","gridWrapperStyle","handleOnSelect","inputValue","handleOnFocus","opened","handleOnFilter","selected","searchOnDropdown","handleOnKeydown","searchNotFoundText","idKey","selectFieldRef","onEndReached","onEndReachedThreshold","itemsCount","dropdownDynamicStyles","setDropdownDynamicStyles","useState","helper","useEffect","current","useScrollEndReached","elementRef","length","left","top","width","marginLeft","paddingLeft","maxHeight","e","target","value","map","item","disabled","some","s","itemSelected","Boolean","iconName","order"],"mappings":"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"}
|
|
@@ -26,7 +26,10 @@ const MultipleSelect = (props) => {
|
|
|
26
26
|
customClassForInputContent,
|
|
27
27
|
customClassForSideButtons,
|
|
28
28
|
disabled = false,
|
|
29
|
-
dropdownMaxWidth = void 0
|
|
29
|
+
dropdownMaxWidth = void 0,
|
|
30
|
+
onEndReached,
|
|
31
|
+
onEndReachedThreshold,
|
|
32
|
+
itemsCount
|
|
30
33
|
} = props;
|
|
31
34
|
const [dataCombo, setDataCombo] = useState(dataSource);
|
|
32
35
|
const [currents, setCurrents] = useState([]);
|
|
@@ -225,7 +228,7 @@ const MultipleSelect = (props) => {
|
|
|
225
228
|
if (shouldDisable()) return null;
|
|
226
229
|
return onClearClick();
|
|
227
230
|
}, handlerOpenClose: onOpenClose, customClassForSideButtons }, "action-buttons-multiselect")], children: /* @__PURE__ */ jsx(Selecteds, { ...props, currents, handlerOnUnselect: onUnselect }) }),
|
|
228
|
-
opened && /* @__PURE__ */ jsx(Dropdown, { ...props, selected, selectFieldRef: componentRef, dropdownRef, gridWrapperStyle: props.gridLayout && gridElRef.current ? window.getComputedStyle(gridElRef.current) : void 0, handleOnSelect: onSelect, handleOnFilter: onFilter, handleOnKeydown: onInputKeyDown, handleOnBlur: () => onBlur, handleOnFocus: onFocus, opened, dataCombo, currents, dropdownWidth: dropdownMaxWidth || dropdownWidth || 0 }),
|
|
231
|
+
opened && /* @__PURE__ */ jsx(Dropdown, { ...props, selected, selectFieldRef: componentRef, dropdownRef, gridWrapperStyle: props.gridLayout && gridElRef.current ? window.getComputedStyle(gridElRef.current) : void 0, handleOnSelect: onSelect, handleOnFilter: onFilter, handleOnKeydown: onInputKeyDown, handleOnBlur: () => onBlur, handleOnFocus: onFocus, opened, dataCombo, currents, dropdownWidth: dropdownMaxWidth || dropdownWidth || 0, onEndReached, onEndReachedThreshold, itemsCount }),
|
|
229
232
|
/* @__PURE__ */ jsx(Hint, { visible: !!hint && hintPosition === "below", customClass: "hint", description: hint })
|
|
230
233
|
] });
|
|
231
234
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/lib/inputs/select/multiple/index.tsx"],"sourcesContent":["import { KeyboardEvent, useEffect, useRef, useState } from 'react';\nimport _ from 'lodash';\nimport * as uuid from 'uuid';\nimport Dropdown from '../Dropdown';\nimport ActionButtons from '../ActionButtons';\nimport Selecteds from './Selecteds';\nimport * as constants from '../../../internals/constants';\nimport InputTextBase from '../../base/InputTextBase';\nimport { getFilteredMultipleDataCombo } from '../helper';\nimport { OnDenied } from '../../../@types/PermissionAttr';\nimport { DataCombo } from '../../../@types/DataCombo';\nimport { IMultipleSelectProps } from '../types';\nimport { CustomInputEvent } from '../../base/types';\nimport Hint from '../../../hint';\n\nconst MultipleSelect = (props: IMultipleSelectProps) => {\n const {\n idKey, dataSource = [], handlerClear, value = [], remoteSearch = false, descriptionKey,\n showClearButton, rightElements = [], hint, hintPosition = 'below', customClassForLabel,\n customClassForWrapper, customClassForInputContent, customClassForSideButtons, disabled = false,\n dropdownMaxWidth = undefined,\n } = props;\n const [dataCombo, setDataCombo] = useState(dataSource);\n const [currents, setCurrents] = useState<DataCombo[]>([]);\n const [selected, setSelected] = useState<DataCombo>();\n const [inputValue, setInputValue] = useState<string[] | number[]>([]);\n const [opened, setOpened] = useState(false);\n const [dropdownWidth, setDropdownWidth] = useState(0);\n const [insideComponent, setInsideComponent] = useState(false);\n const [onDenied, setOnDeniedSelect] = useState<OnDenied>();\n const [valueFromProps, setValueFromProps] = useState<string[] | number[]>([]);\n\n const componentId = `select-component${uuid.v1()}`;\n const componentRef = useRef<HTMLInputElement>(null);\n const dropdownRef = useRef<HTMLInputElement>(null);\n const selectWrapper = useRef<HTMLDivElement | HTMLTextAreaElement>(null);\n const gridElRef = useRef<Element>(null);\n const inputTextRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n const descriptionKeyIsString = typeof descriptionKey === 'string';\n const insideComponents =\n ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label', 'actionbutton'];\n\n const onScreenResize = () => {\n if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);\n };\n\n const onClickOutside = (event: MouseEvent) => {\n const { target } = event;\n if (!insideComponents.includes((target as Element).className) &&\n target !== selectWrapper.current && selectWrapper.current &&\n !selectWrapper.current.contains(target as Node) &&\n dropdownRef.current && !dropdownRef.current.contains(target as Node)) {\n setOpened(false);\n }\n };\n\n const onMouseMove = (event: MouseEvent) => {\n const target = event.target as Element;\n const idDropdown = dropdownRef.current?.parentElement?.id || '';\n const dropdownElement = document.getElementById(idDropdown);\n const keepDropdownOpen = Boolean(dropdownElement?.contains(target));\n setInsideComponent(keepDropdownOpen);\n };\n\n const onClearClick = () => {\n setSelected(undefined);\n setCurrents([]);\n if (props.onSelect) props.onSelect();\n };\n\n const onFilter = (filteredValue: string) => {\n let selectedFilter = null;\n if (remoteSearch) {\n if (props.onSearch) props.onSearch(filteredValue);\n setOpened(true);\n setInputValue([filteredValue]);\n } else {\n let dataComboFilter = dataSource;\n if (filteredValue.length > 0) {\n dataComboFilter = getFilteredMultipleDataCombo({\n inputText: [filteredValue],\n dataSource,\n descriptionKey,\n currents,\n });\n }\n if (dataComboFilter && dataComboFilter.length > 0) selectedFilter = dataComboFilter[0];\n setDataCombo(dataComboFilter);\n setOpened(true);\n if (selectedFilter) setSelected(selectedFilter);\n setInputValue([filteredValue]);\n }\n };\n\n const onFocus = () => {\n const dropdownWidthFocus =\n selectWrapper.current ? selectWrapper.current.clientWidth : dropdownWidth;\n setOpened(true);\n setDropdownWidth(dropdownWidthFocus);\n };\n\n const onSelect = (select: DataCombo) => {\n if (select === null) return;\n const currentsSelect = [...currents, select];\n\n setCurrents(currentsSelect);\n setDataCombo(dataSource);\n setInputValue([]);\n if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();\n if (props.onSelect) setSelected(props.onSelect(currentsSelect.map(i => i[idKey])));\n dropdownRef.current?.focus();\n };\n\n const onUnselect = (id: string) => {\n if (currents) {\n const result = currents.filter(item => item[idKey] !== id);\n setCurrents(result);\n if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();\n setOpened(false);\n if (props.onSelect) setSelected(props.onSelect(result.map(i => i[idKey])));\n dropdownRef.current?.focus();\n }\n };\n\n const onOpenClose = () => {\n setOpened(prevState => !prevState);\n if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);\n };\n\n const onBlur = (e: CustomInputEvent) => {\n if (props.onBlur) props.onBlur(e);\n if (selected && opened) {\n onSelect(selected);\n }\n if (!insideComponent) {\n setOpened(false);\n setDataCombo(dataSource);\n }\n };\n\n const onInputKeyDown = (e: CustomInputEvent | KeyboardEvent) => {\n if (e.keyCode) {\n if ((e.keyCode === constants.keyCodes.ENTER || e.key === constants.keys.TAB) \n && selected && opened) {\n if (e.keyCode === constants.keyCodes.ENTER) e.preventDefault?.();\n if (!currents.some(current => current[idKey] === selected[idKey])) {\n onSelect(selected);\n }\n } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {\n if (!opened) setOpened(true);\n let index = dataCombo ? dataCombo.findIndex(d => d === selected) : 0;\n if (e.keyCode === constants.keyCodes.ARROW_DOWN) {\n index = (dataCombo && index === dataCombo.length - 1 ? 0 : index + 1);\n } else {\n index = (dataCombo && index === 0 ? dataCombo.length - 1 : index - 1);\n }\n if (dataCombo && dataCombo.length) {\n if (descriptionKeyIsString && dataCombo[index][descriptionKey]) {\n setInputValue(dataCombo[index][descriptionKey]);\n } else if (!descriptionKeyIsString) setInputValue([descriptionKey(dataCombo[index])]);\n }\n if (dataCombo) setSelected(dataCombo[index]);\n } else if (e.keyCode === constants.keyCodes.BACKSPACE) {\n if (inputValue.length === 0) {\n const currentsKeyDown = _.dropRight(currents);\n setCurrents(currentsKeyDown);\n if (props.onSelect) props.onSelect(currentsKeyDown.map(i => i[idKey]));\n }\n } else if (e.keyCode === constants.keyCodes.TAB) {\n setOpened(false);\n }\n }\n };\n\n const setOnDenied = (denied: OnDenied) => {\n setOnDeniedSelect(denied);\n };\n\n const shouldDisable = () =>\n disabled ||\n (onDenied && (onDenied.disabled || onDenied.hideContent));\n\n const shouldBeReadOnly = () => props.readOnly || (onDenied && (onDenied.readOnly));\n\n useEffect(() => {\n window.addEventListener('resize', onScreenResize);\n document.addEventListener('click', onClickOutside);\n document.addEventListener('mousemove', onMouseMove);\n if (handlerClear) onClearClick();\n\n return () => {\n window.removeEventListener('resize', onScreenResize);\n document.removeEventListener('click', onClickOutside);\n document.removeEventListener('mousemove', onMouseMove);\n };\n }, []);\n\n useEffect(() => {\n if (props.gridLayout) {\n const gridEl = document.querySelector(`#${componentId}>.-withinput.grid-container`);\n if (gridElRef.current !== gridEl && gridEl) gridElRef.current = gridEl;\n }\n }, []);\n\n useEffect(() => {\n if (value.length > 0 && value !== valueFromProps && dataSource.length > 0) {\n const newCurrents = dataSource.filter((item: { [id: string]: string }) =>\n value.includes(item[idKey] as never));\n\n setValueFromProps(value);\n setCurrents(newCurrents);\n }\n }, [dataSource.length, value.length]);\n\n useEffect(() => {\n if (!_.isEqual(dataSource, dataCombo)) {\n const filteredDataCombo = remoteSearch\n ? dataSource\n : getFilteredMultipleDataCombo({\n currents, dataSource, descriptionKey, inputText: inputValue,\n });\n\n setDataCombo(filteredDataCombo);\n setSelected(filteredDataCombo.length > 0 ? dataCombo[0] : null);\n }\n }, [dataSource]);\n\n return (\n <span\n id={componentId}\n ref={componentRef}\n className=\"select-component\">\n <InputTextBase\n {...props}\n inputRef={(ref) => {\n if (props.inputRef) {\n if (!_.isFunction(props.inputRef)) {\n props.inputRef.current = ref;\n } else {\n props.inputRef(ref);\n }\n }\n inputTextRef.current = ref;\n }}\n autoComplete=\"off\"\n value={inputValue.toString()}\n readOnly={shouldBeReadOnly()}\n onFocus={() => { onFocus(); }}\n onBlur={(e: CustomInputEvent) => { onBlur(e); }}\n onChange={(e?: CustomInputEvent) => {\n if (e) onFilter(e.target.value);\n }}\n onClick={onFocus}\n onKeyDown={onInputKeyDown}\n customClassForLabel={customClassForLabel}\n customClassForWrapper={\n `selectwrapper ${(props.readOnly || shouldDisable() || shouldBeReadOnly()) && ' -undigitable'} ${customClassForWrapper}`\n }\n customClassForInputContent={`multiselect ${customClassForInputContent}`}\n inputBaseRef={(r: HTMLDivElement | HTMLTextAreaElement) => { selectWrapper.current = r; }}\n handlerSetOnDenied={setOnDenied}\n rightElements={[\n ...rightElements,\n <ActionButtons\n key=\"action-buttons-multiselect\"\n showClearButton={showClearButton}\n disabled={shouldDisable() || shouldBeReadOnly()}\n dropDownOpened={opened}\n handlerClear={() => {\n if (shouldDisable()) return null;\n return onClearClick();\n }}\n handlerOpenClose={onOpenClose}\n customClassForSideButtons={customClassForSideButtons} />,\n ]}>\n <Selecteds\n {...props}\n currents={currents}\n handlerOnUnselect={onUnselect} />\n </InputTextBase>\n {opened &&\n <Dropdown\n {...props}\n selected={selected}\n selectFieldRef={componentRef}\n dropdownRef={dropdownRef}\n gridWrapperStyle={props.gridLayout && gridElRef.current\n ? window.getComputedStyle(gridElRef.current)\n : undefined}\n handleOnSelect={onSelect}\n handleOnFilter={onFilter}\n handleOnKeydown={onInputKeyDown}\n handleOnBlur={() => onBlur}\n handleOnFocus={onFocus}\n opened={opened}\n dataCombo={dataCombo}\n currents={currents}\n dropdownWidth={dropdownMaxWidth || dropdownWidth || 0} />\n }\n <Hint visible={!!hint && hintPosition === 'below'} customClass=\"hint\" description={hint} />\n </span>\n );\n};\n\nexport default MultipleSelect;\n"],"names":["MultipleSelect","props","idKey","dataSource","handlerClear","value","remoteSearch","descriptionKey","showClearButton","rightElements","hint","hintPosition","customClassForLabel","customClassForWrapper","customClassForInputContent","customClassForSideButtons","disabled","dropdownMaxWidth","undefined","dataCombo","setDataCombo","useState","currents","setCurrents","selected","setSelected","inputValue","setInputValue","opened","setOpened","dropdownWidth","setDropdownWidth","insideComponent","setInsideComponent","onDenied","setOnDeniedSelect","valueFromProps","setValueFromProps","componentId","uuid","v1","componentRef","useRef","dropdownRef","selectWrapper","gridElRef","inputTextRef","descriptionKeyIsString","insideComponents","onScreenResize","current","clientWidth","onClickOutside","event","target","includes","className","contains","onMouseMove","idDropdown","parentElement","id","dropdownElement","document","getElementById","keepDropdownOpen","Boolean","onClearClick","onSelect","onFilter","filteredValue","selectedFilter","onSearch","dataComboFilter","length","getFilteredMultipleDataCombo","inputText","onFocus","dropdownWidthFocus","select","currentsSelect","focus","map","i","onUnselect","result","filter","item","onOpenClose","prevState","onBlur","e","onInputKeyDown","keyCode","constants","ENTER","key","TAB","preventDefault","some","ARROW_UP","ARROW_DOWN","index","findIndex","d","BACKSPACE","currentsKeyDown","_","dropRight","setOnDenied","denied","shouldDisable","hideContent","shouldBeReadOnly","readOnly","useEffect","window","addEventListener","removeEventListener","gridLayout","gridEl","querySelector","newCurrents","isEqual","filteredDataCombo","ref","inputRef","isFunction","toString","r","getComputedStyle"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/lib/inputs/select/multiple/index.tsx"],"sourcesContent":["import { KeyboardEvent, useEffect, useRef, useState } from 'react';\nimport _ from 'lodash';\nimport * as uuid from 'uuid';\nimport Dropdown from '../Dropdown';\nimport ActionButtons from '../ActionButtons';\nimport Selecteds from './Selecteds';\nimport * as constants from '../../../internals/constants';\nimport InputTextBase from '../../base/InputTextBase';\nimport { getFilteredMultipleDataCombo } from '../helper';\nimport { OnDenied } from '../../../@types/PermissionAttr';\nimport { DataCombo } from '../../../@types/DataCombo';\nimport { IMultipleSelectProps } from '../types';\nimport { CustomInputEvent } from '../../base/types';\nimport Hint from '../../../hint';\n\nconst MultipleSelect = (props: IMultipleSelectProps) => {\n const {\n idKey, dataSource = [], handlerClear, value = [], remoteSearch = false, descriptionKey,\n showClearButton, rightElements = [], hint, hintPosition = 'below', customClassForLabel,\n customClassForWrapper, customClassForInputContent, customClassForSideButtons, disabled = false,\n dropdownMaxWidth = undefined, onEndReached, onEndReachedThreshold, itemsCount,\n } = props;\n const [dataCombo, setDataCombo] = useState(dataSource);\n const [currents, setCurrents] = useState<DataCombo[]>([]);\n const [selected, setSelected] = useState<DataCombo>();\n const [inputValue, setInputValue] = useState<string[] | number[]>([]);\n const [opened, setOpened] = useState(false);\n const [dropdownWidth, setDropdownWidth] = useState(0);\n const [insideComponent, setInsideComponent] = useState(false);\n const [onDenied, setOnDeniedSelect] = useState<OnDenied>();\n const [valueFromProps, setValueFromProps] = useState<string[] | number[]>([]);\n\n const componentId = `select-component${uuid.v1()}`;\n const componentRef = useRef<HTMLInputElement>(null);\n const dropdownRef = useRef<HTMLInputElement>(null);\n const selectWrapper = useRef<HTMLDivElement | HTMLTextAreaElement>(null);\n const gridElRef = useRef<Element>(null);\n const inputTextRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n const descriptionKeyIsString = typeof descriptionKey === 'string';\n const insideComponents =\n ['item', 'menubutton', 'filterinput', 'filtercontainer', 'label', 'actionbutton'];\n\n const onScreenResize = () => {\n if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);\n };\n\n const onClickOutside = (event: MouseEvent) => {\n const { target } = event;\n if (!insideComponents.includes((target as Element).className) &&\n target !== selectWrapper.current && selectWrapper.current &&\n !selectWrapper.current.contains(target as Node) &&\n dropdownRef.current && !dropdownRef.current.contains(target as Node)) {\n setOpened(false);\n }\n };\n\n const onMouseMove = (event: MouseEvent) => {\n const target = event.target as Element;\n const idDropdown = dropdownRef.current?.parentElement?.id || '';\n const dropdownElement = document.getElementById(idDropdown);\n const keepDropdownOpen = Boolean(dropdownElement?.contains(target));\n setInsideComponent(keepDropdownOpen);\n };\n\n const onClearClick = () => {\n setSelected(undefined);\n setCurrents([]);\n if (props.onSelect) props.onSelect();\n };\n\n const onFilter = (filteredValue: string) => {\n let selectedFilter = null;\n if (remoteSearch) {\n if (props.onSearch) props.onSearch(filteredValue);\n setOpened(true);\n setInputValue([filteredValue]);\n } else {\n let dataComboFilter = dataSource;\n if (filteredValue.length > 0) {\n dataComboFilter = getFilteredMultipleDataCombo({\n inputText: [filteredValue],\n dataSource,\n descriptionKey,\n currents,\n });\n }\n if (dataComboFilter && dataComboFilter.length > 0) selectedFilter = dataComboFilter[0];\n setDataCombo(dataComboFilter);\n setOpened(true);\n if (selectedFilter) setSelected(selectedFilter);\n setInputValue([filteredValue]);\n }\n };\n\n const onFocus = () => {\n const dropdownWidthFocus =\n selectWrapper.current ? selectWrapper.current.clientWidth : dropdownWidth;\n setOpened(true);\n setDropdownWidth(dropdownWidthFocus);\n };\n\n const onSelect = (select: DataCombo) => {\n if (select === null) return;\n const currentsSelect = [...currents, select];\n\n setCurrents(currentsSelect);\n setDataCombo(dataSource);\n setInputValue([]);\n if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();\n if (props.onSelect) setSelected(props.onSelect(currentsSelect.map(i => i[idKey])));\n dropdownRef.current?.focus();\n };\n\n const onUnselect = (id: string) => {\n if (currents) {\n const result = currents.filter(item => item[idKey] !== id);\n setCurrents(result);\n if (inputTextRef && inputTextRef.current) inputTextRef.current.focus();\n setOpened(false);\n if (props.onSelect) setSelected(props.onSelect(result.map(i => i[idKey])));\n dropdownRef.current?.focus();\n }\n };\n\n const onOpenClose = () => {\n setOpened(prevState => !prevState);\n if (selectWrapper.current) setDropdownWidth(selectWrapper.current.clientWidth);\n };\n\n const onBlur = (e: CustomInputEvent) => {\n if (props.onBlur) props.onBlur(e);\n if (selected && opened) {\n onSelect(selected);\n }\n if (!insideComponent) {\n setOpened(false);\n setDataCombo(dataSource);\n }\n };\n\n const onInputKeyDown = (e: CustomInputEvent | KeyboardEvent) => {\n if (e.keyCode) {\n if ((e.keyCode === constants.keyCodes.ENTER || e.key === constants.keys.TAB) \n && selected && opened) {\n if (e.keyCode === constants.keyCodes.ENTER) e.preventDefault?.();\n if (!currents.some(current => current[idKey] === selected[idKey])) {\n onSelect(selected);\n }\n } else if ([constants.keyCodes.ARROW_UP, constants.keyCodes.ARROW_DOWN].includes(e.keyCode)) {\n if (!opened) setOpened(true);\n let index = dataCombo ? dataCombo.findIndex(d => d === selected) : 0;\n if (e.keyCode === constants.keyCodes.ARROW_DOWN) {\n index = (dataCombo && index === dataCombo.length - 1 ? 0 : index + 1);\n } else {\n index = (dataCombo && index === 0 ? dataCombo.length - 1 : index - 1);\n }\n if (dataCombo && dataCombo.length) {\n if (descriptionKeyIsString && dataCombo[index][descriptionKey]) {\n setInputValue(dataCombo[index][descriptionKey]);\n } else if (!descriptionKeyIsString) setInputValue([descriptionKey(dataCombo[index])]);\n }\n if (dataCombo) setSelected(dataCombo[index]);\n } else if (e.keyCode === constants.keyCodes.BACKSPACE) {\n if (inputValue.length === 0) {\n const currentsKeyDown = _.dropRight(currents);\n setCurrents(currentsKeyDown);\n if (props.onSelect) props.onSelect(currentsKeyDown.map(i => i[idKey]));\n }\n } else if (e.keyCode === constants.keyCodes.TAB) {\n setOpened(false);\n }\n }\n };\n\n const setOnDenied = (denied: OnDenied) => {\n setOnDeniedSelect(denied);\n };\n\n const shouldDisable = () =>\n disabled ||\n (onDenied && (onDenied.disabled || onDenied.hideContent));\n\n const shouldBeReadOnly = () => props.readOnly || (onDenied && (onDenied.readOnly));\n\n useEffect(() => {\n window.addEventListener('resize', onScreenResize);\n document.addEventListener('click', onClickOutside);\n document.addEventListener('mousemove', onMouseMove);\n if (handlerClear) onClearClick();\n\n return () => {\n window.removeEventListener('resize', onScreenResize);\n document.removeEventListener('click', onClickOutside);\n document.removeEventListener('mousemove', onMouseMove);\n };\n }, []);\n\n useEffect(() => {\n if (props.gridLayout) {\n const gridEl = document.querySelector(`#${componentId}>.-withinput.grid-container`);\n if (gridElRef.current !== gridEl && gridEl) gridElRef.current = gridEl;\n }\n }, []);\n\n useEffect(() => {\n if (value.length > 0 && value !== valueFromProps && dataSource.length > 0) {\n const newCurrents = dataSource.filter((item: { [id: string]: string }) =>\n value.includes(item[idKey] as never));\n\n setValueFromProps(value);\n setCurrents(newCurrents);\n }\n }, [dataSource.length, value.length]);\n\n useEffect(() => {\n if (!_.isEqual(dataSource, dataCombo)) {\n const filteredDataCombo = remoteSearch\n ? dataSource\n : getFilteredMultipleDataCombo({\n currents, dataSource, descriptionKey, inputText: inputValue,\n });\n\n setDataCombo(filteredDataCombo);\n setSelected(filteredDataCombo.length > 0 ? dataCombo[0] : null);\n }\n }, [dataSource]);\n\n return (\n <span\n id={componentId}\n ref={componentRef}\n className=\"select-component\">\n <InputTextBase\n {...props}\n inputRef={(ref) => {\n if (props.inputRef) {\n if (!_.isFunction(props.inputRef)) {\n props.inputRef.current = ref;\n } else {\n props.inputRef(ref);\n }\n }\n inputTextRef.current = ref;\n }}\n autoComplete=\"off\"\n value={inputValue.toString()}\n readOnly={shouldBeReadOnly()}\n onFocus={() => { onFocus(); }}\n onBlur={(e: CustomInputEvent) => { onBlur(e); }}\n onChange={(e?: CustomInputEvent) => {\n if (e) onFilter(e.target.value);\n }}\n onClick={onFocus}\n onKeyDown={onInputKeyDown}\n customClassForLabel={customClassForLabel}\n customClassForWrapper={\n `selectwrapper ${(props.readOnly || shouldDisable() || shouldBeReadOnly()) && ' -undigitable'} ${customClassForWrapper}`\n }\n customClassForInputContent={`multiselect ${customClassForInputContent}`}\n inputBaseRef={(r: HTMLDivElement | HTMLTextAreaElement) => { selectWrapper.current = r; }}\n handlerSetOnDenied={setOnDenied}\n rightElements={[\n ...rightElements,\n <ActionButtons\n key=\"action-buttons-multiselect\"\n showClearButton={showClearButton}\n disabled={shouldDisable() || shouldBeReadOnly()}\n dropDownOpened={opened}\n handlerClear={() => {\n if (shouldDisable()) return null;\n return onClearClick();\n }}\n handlerOpenClose={onOpenClose}\n customClassForSideButtons={customClassForSideButtons} />,\n ]}>\n <Selecteds\n {...props}\n currents={currents}\n handlerOnUnselect={onUnselect} />\n </InputTextBase>\n {opened &&\n <Dropdown\n {...props}\n selected={selected}\n selectFieldRef={componentRef}\n dropdownRef={dropdownRef}\n gridWrapperStyle={props.gridLayout && gridElRef.current\n ? window.getComputedStyle(gridElRef.current)\n : undefined}\n handleOnSelect={onSelect}\n handleOnFilter={onFilter}\n handleOnKeydown={onInputKeyDown}\n handleOnBlur={() => onBlur}\n handleOnFocus={onFocus}\n opened={opened}\n dataCombo={dataCombo}\n currents={currents}\n dropdownWidth={dropdownMaxWidth || dropdownWidth || 0}\n onEndReached={onEndReached}\n onEndReachedThreshold={onEndReachedThreshold}\n itemsCount={itemsCount} />\n }\n <Hint visible={!!hint && hintPosition === 'below'} customClass=\"hint\" description={hint} />\n </span>\n );\n};\n\nexport default MultipleSelect;\n"],"names":["MultipleSelect","props","idKey","dataSource","handlerClear","value","remoteSearch","descriptionKey","showClearButton","rightElements","hint","hintPosition","customClassForLabel","customClassForWrapper","customClassForInputContent","customClassForSideButtons","disabled","dropdownMaxWidth","undefined","onEndReached","onEndReachedThreshold","itemsCount","dataCombo","setDataCombo","useState","currents","setCurrents","selected","setSelected","inputValue","setInputValue","opened","setOpened","dropdownWidth","setDropdownWidth","insideComponent","setInsideComponent","onDenied","setOnDeniedSelect","valueFromProps","setValueFromProps","componentId","uuid","v1","componentRef","useRef","dropdownRef","selectWrapper","gridElRef","inputTextRef","descriptionKeyIsString","insideComponents","onScreenResize","current","clientWidth","onClickOutside","event","target","includes","className","contains","onMouseMove","idDropdown","parentElement","id","dropdownElement","document","getElementById","keepDropdownOpen","Boolean","onClearClick","onSelect","onFilter","filteredValue","selectedFilter","onSearch","dataComboFilter","length","getFilteredMultipleDataCombo","inputText","onFocus","dropdownWidthFocus","select","currentsSelect","focus","map","i","onUnselect","result","filter","item","onOpenClose","prevState","onBlur","e","onInputKeyDown","keyCode","constants","ENTER","key","TAB","preventDefault","some","ARROW_UP","ARROW_DOWN","index","findIndex","d","BACKSPACE","currentsKeyDown","_","dropRight","setOnDenied","denied","shouldDisable","hideContent","shouldBeReadOnly","readOnly","useEffect","window","addEventListener","removeEventListener","gridLayout","gridEl","querySelector","newCurrents","isEqual","filteredDataCombo","ref","inputRef","isFunction","toString","r","getComputedStyle"],"mappings":"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"}
|
|
@@ -31,7 +31,10 @@ const SimpleSelect = (props) => {
|
|
|
31
31
|
customClassForInputContent,
|
|
32
32
|
customClassForLabel,
|
|
33
33
|
customClassForSideButtons,
|
|
34
|
-
dropdownMaxWidth = void 0
|
|
34
|
+
dropdownMaxWidth = void 0,
|
|
35
|
+
onEndReached,
|
|
36
|
+
onEndReachedThreshold,
|
|
37
|
+
itemsCount
|
|
35
38
|
} = props;
|
|
36
39
|
const descriptionKeyIsString = typeof descriptionKey === "string";
|
|
37
40
|
const dataSourceWithAllOptions = allOptions ? [{
|
|
@@ -258,7 +261,7 @@ const SimpleSelect = (props) => {
|
|
|
258
261
|
}, handlerOpenClose: onOpenClose, customClassForSideButtons }, "action-buttons-simpleselect")] }),
|
|
259
262
|
opened && /* @__PURE__ */ jsx(Dropdown, { ...props, opened, selected, inputValue: inputText, selectFieldRef: componentRef, dropdownRef, searchOnDropdown, gridWrapperStyle: gridLayout && gridElement.current ? window.getComputedStyle(gridElement.current) : void 0, handleOnSelect: (dataSelected) => {
|
|
260
263
|
if (dataSelected) onSelect(dataSelected);
|
|
261
|
-
}, handleOnFilter: (valueFilter_0) => onFilter(valueFilter_0), handleOnKeydown: onInputKeyDown, handleOnBlur: () => onBlur, handleOnFocus: onFocus, dataCombo, searchNotFoundText, dropdownWidth: dropdownMaxWidth || dropdownWidth || 0 })
|
|
264
|
+
}, handleOnFilter: (valueFilter_0) => onFilter(valueFilter_0), handleOnKeydown: onInputKeyDown, handleOnBlur: () => onBlur, handleOnFocus: onFocus, dataCombo, searchNotFoundText, dropdownWidth: dropdownMaxWidth || dropdownWidth || 0, onEndReached, onEndReachedThreshold, itemsCount })
|
|
262
265
|
] });
|
|
263
266
|
};
|
|
264
267
|
export {
|