@homecode/ui 4.18.14 → 4.18.16
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/esm/index.js +2 -83
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/node_modules/style-inject/dist/style-inject.es.js +2 -28
- package/dist/esm/node_modules/style-inject/dist/style-inject.es.js.map +1 -0
- package/dist/esm/src/components/AssistiveText/AssistiveText.js +2 -10
- package/dist/esm/src/components/AssistiveText/AssistiveText.js.map +1 -0
- package/dist/esm/src/components/AssistiveText/AssistiveText.styl.js +2 -7
- package/dist/esm/src/components/AssistiveText/AssistiveText.styl.js.map +1 -0
- package/dist/esm/src/components/Button/Button.helpers.js +2 -12
- package/dist/esm/src/components/Button/Button.helpers.js.map +1 -0
- package/dist/esm/src/components/Button/Button.js +2 -38
- package/dist/esm/src/components/Button/Button.js.map +1 -0
- package/dist/esm/src/components/Button/Button.styl.js +2 -7
- package/dist/esm/src/components/Button/Button.styl.js.map +1 -0
- package/dist/esm/src/components/ButtonGroup/ButtonGroup.js +2 -10
- package/dist/esm/src/components/ButtonGroup/ButtonGroup.js.map +1 -0
- package/dist/esm/src/components/ButtonGroup/ButtonGroup.styl.js +2 -7
- package/dist/esm/src/components/ButtonGroup/ButtonGroup.styl.js.map +1 -0
- package/dist/esm/src/components/Calendar/Calendar.helpers.js +2 -65
- package/dist/esm/src/components/Calendar/Calendar.helpers.js.map +1 -0
- package/dist/esm/src/components/Calendar/Calendar.js +2 -66
- package/dist/esm/src/components/Calendar/Calendar.js.map +1 -0
- package/dist/esm/src/components/Calendar/Calendar.styl.js +2 -7
- package/dist/esm/src/components/Calendar/Calendar.styl.js.map +1 -0
- package/dist/esm/src/components/Checkbox/Checkbox.js +2 -48
- package/dist/esm/src/components/Checkbox/Checkbox.js.map +1 -0
- package/dist/esm/src/components/Checkbox/Checkbox.styl.js +2 -7
- package/dist/esm/src/components/Checkbox/Checkbox.styl.js.map +1 -0
- package/dist/esm/src/components/Container/Container.js +2 -12
- package/dist/esm/src/components/Container/Container.js.map +1 -0
- package/dist/esm/src/components/Container/Container.styl.js +2 -7
- package/dist/esm/src/components/Container/Container.styl.js.map +1 -0
- package/dist/esm/src/components/DatePicker/DatePicker.helpers.js +2 -31
- package/dist/esm/src/components/DatePicker/DatePicker.helpers.js.map +1 -0
- package/dist/esm/src/components/DatePicker/DatePicker.js +2 -47
- package/dist/esm/src/components/DatePicker/DatePicker.js.map +1 -0
- package/dist/esm/src/components/DatePicker/DatePicker.styl.js +2 -7
- package/dist/esm/src/components/DatePicker/DatePicker.styl.js.map +1 -0
- package/dist/esm/src/components/DatePickerInput/DatePickerInput.js +2 -20
- package/dist/esm/src/components/DatePickerInput/DatePickerInput.js.map +1 -0
- package/dist/esm/src/components/DatePickerInput/DatePickerInput.styl.js +2 -7
- package/dist/esm/src/components/DatePickerInput/DatePickerInput.styl.js.map +1 -0
- package/dist/esm/src/components/DateTime/DateTime.js +2 -17
- package/dist/esm/src/components/DateTime/DateTime.js.map +1 -0
- package/dist/esm/src/components/Draggable/Draggable.js +2 -136
- package/dist/esm/src/components/Draggable/Draggable.js.map +1 -0
- package/dist/esm/src/components/Draggable/Draggable.styl.js +2 -7
- package/dist/esm/src/components/Draggable/Draggable.styl.js.map +1 -0
- package/dist/esm/src/components/Expand/Expand.js +2 -24
- package/dist/esm/src/components/Expand/Expand.js.map +1 -0
- package/dist/esm/src/components/Expand/Expand.styl.js +2 -7
- package/dist/esm/src/components/Expand/Expand.styl.js.map +1 -0
- package/dist/esm/src/components/Form/Form.helpers.js +2 -42
- package/dist/esm/src/components/Form/Form.helpers.js.map +1 -0
- package/dist/esm/src/components/Form/Form.js +2 -286
- package/dist/esm/src/components/Form/Form.js.map +1 -0
- package/dist/esm/src/components/Form/Form.styl.js +2 -7
- package/dist/esm/src/components/Form/Form.styl.js.map +1 -0
- package/dist/esm/src/components/Form/Form.types.js +1 -0
- package/dist/esm/src/components/Form/Form.types.js.map +1 -0
- package/dist/esm/src/components/Form/SubmitButtons/SubmitButtons.js +2 -8
- package/dist/esm/src/components/Form/SubmitButtons/SubmitButtons.js.map +1 -0
- package/dist/esm/src/components/Form/SubmitButtons/SubmitButtons.styl.js +2 -7
- package/dist/esm/src/components/Form/SubmitButtons/SubmitButtons.styl.js.map +1 -0
- package/dist/esm/src/components/Form/Validator.js +6 -24
- package/dist/esm/src/components/Form/Validator.js.map +1 -0
- package/dist/esm/src/components/Gallery/Dots/Dots.js +2 -9
- package/dist/esm/src/components/Gallery/Dots/Dots.js.map +1 -0
- package/dist/esm/src/components/Gallery/Dots/Dots.styl.js +2 -7
- package/dist/esm/src/components/Gallery/Dots/Dots.styl.js.map +1 -0
- package/dist/esm/src/components/Gallery/Gallery.js +2 -180
- package/dist/esm/src/components/Gallery/Gallery.js.map +1 -0
- package/dist/esm/src/components/Gallery/Gallery.styl.js +2 -7
- package/dist/esm/src/components/Gallery/Gallery.styl.js.map +1 -0
- package/dist/esm/src/components/Heading/Heading.js +2 -37
- package/dist/esm/src/components/Heading/Heading.js.map +1 -0
- package/dist/esm/src/components/Heading/Heading.styl.js +2 -7
- package/dist/esm/src/components/Heading/Heading.styl.js.map +1 -0
- package/dist/esm/src/components/Icon/Icon.js +2 -27
- package/dist/esm/src/components/Icon/Icon.js.map +1 -0
- package/dist/esm/src/components/Icon/Icon.styl.js +2 -7
- package/dist/esm/src/components/Icon/Icon.styl.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/avatar.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/avatar.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/brokenImage.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/brokenImage.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/check.svg.js +2 -19
- package/dist/esm/src/components/Icon/icons/check.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/chevronDown.svg.js +2 -20
- package/dist/esm/src/components/Icon/icons/chevronDown.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/chevronLeft.svg.js +2 -20
- package/dist/esm/src/components/Icon/icons/chevronLeft.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/chevronRight.svg.js +2 -20
- package/dist/esm/src/components/Icon/icons/chevronRight.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/chevronUp.svg.js +2 -20
- package/dist/esm/src/components/Icon/icons/chevronUp.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/close.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/close.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/colors.svg.js +2 -60
- package/dist/esm/src/components/Icon/icons/colors.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/copy.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/copy.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/delete.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/delete.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/draft.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/draft.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/edit.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/edit.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/email.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/email.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/externalLink.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/externalLink.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/eye.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/eye.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/fullscreen.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/fullscreen.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/fullscreenExit.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/fullscreenExit.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/function.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/function.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/gear.svg.js +2 -20
- package/dist/esm/src/components/Icon/icons/gear.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/group.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/group.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/history.svg.js +2 -17
- package/dist/esm/src/components/Icon/icons/history.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/home.svg.js +2 -19
- package/dist/esm/src/components/Icon/icons/home.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/index.js +2 -46
- package/dist/esm/src/components/Icon/icons/index.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/instagram.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/instagram.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/link.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/link.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/loader.svg.js +2 -45
- package/dist/esm/src/components/Icon/icons/loader.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/menu.svg.js +2 -18
- package/dist/esm/src/components/Icon/icons/menu.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/mic.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/mic.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/minus.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/minus.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/moreHorizontal.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/moreHorizontal.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/moreVertical.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/moreVertical.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/output.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/output.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/plus.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/plus.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/redo.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/redo.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/requiredStar.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/requiredStar.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/save.svg.js +2 -17
- package/dist/esm/src/components/Icon/icons/save.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/send.svg.js +2 -16
- package/dist/esm/src/components/Icon/icons/send.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/settings.svg.js +2 -52
- package/dist/esm/src/components/Icon/icons/settings.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/shoppingBag.svg.js +2 -17
- package/dist/esm/src/components/Icon/icons/shoppingBag.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/table.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/table.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/telegram.svg.js +2 -19
- package/dist/esm/src/components/Icon/icons/telegram.svg.js.map +1 -0
- package/dist/esm/src/components/Icon/icons/undo.svg.js +2 -15
- package/dist/esm/src/components/Icon/icons/undo.svg.js.map +1 -0
- package/dist/esm/src/components/Input/Input.js +2 -343
- package/dist/esm/src/components/Input/Input.js.map +1 -0
- package/dist/esm/src/components/Input/Input.styl.js +2 -7
- package/dist/esm/src/components/Input/Input.styl.js.map +1 -0
- package/dist/esm/src/components/InputFile/InputFile.js +2 -295
- package/dist/esm/src/components/InputFile/InputFile.js.map +1 -0
- package/dist/esm/src/components/InputFile/InputFile.styl.js +2 -7
- package/dist/esm/src/components/InputFile/InputFile.styl.js.map +1 -0
- package/dist/esm/src/components/InputFile/InputFile.types.js +1 -0
- package/dist/esm/src/components/InputFile/InputFile.types.js.map +1 -0
- package/dist/esm/src/components/InputFile/Item/Item.js +2 -18
- package/dist/esm/src/components/InputFile/Item/Item.js.map +1 -0
- package/dist/esm/src/components/InputFile/Item/Item.styl.js +2 -7
- package/dist/esm/src/components/InputFile/Item/Item.styl.js.map +1 -0
- package/dist/esm/src/components/Label/Label.constants.json.js +2 -8
- package/dist/esm/src/components/Label/Label.constants.json.js.map +1 -0
- package/dist/esm/src/components/Label/Label.helpers.js +2 -35
- package/dist/esm/src/components/Label/Label.helpers.js.map +1 -0
- package/dist/esm/src/components/Label/Label.js +2 -58
- package/dist/esm/src/components/Label/Label.js.map +1 -0
- package/dist/esm/src/components/Label/Label.styl.js +2 -7
- package/dist/esm/src/components/Label/Label.styl.js.map +1 -0
- package/dist/esm/src/components/Lazy/Lazy.js +2 -65
- package/dist/esm/src/components/Lazy/Lazy.js.map +1 -0
- package/dist/esm/src/components/LightBox/LightBox.js +2 -28
- package/dist/esm/src/components/LightBox/LightBox.js.map +1 -0
- package/dist/esm/src/components/LightBox/LightBox.styl.js +2 -7
- package/dist/esm/src/components/LightBox/LightBox.styl.js.map +1 -0
- package/dist/esm/src/components/Notifications/Notifications.constants.json.js +2 -6
- package/dist/esm/src/components/Notifications/Notifications.constants.json.js.map +1 -0
- package/dist/esm/src/components/Notifications/Notifications.js +2 -67
- package/dist/esm/src/components/Notifications/Notifications.js.map +1 -0
- package/dist/esm/src/components/Notifications/Notifications.styl.js +2 -7
- package/dist/esm/src/components/Notifications/Notifications.styl.js.map +1 -0
- package/dist/esm/src/components/Notifications/store.js +2 -62
- package/dist/esm/src/components/Notifications/store.js.map +1 -0
- package/dist/esm/src/components/Paranja/Paranja.js +2 -14
- package/dist/esm/src/components/Paranja/Paranja.js.map +1 -0
- package/dist/esm/src/components/Paranja/Paranja.styl.js +2 -7
- package/dist/esm/src/components/Paranja/Paranja.styl.js.map +1 -0
- package/dist/esm/src/components/Popup/Popup.helpers.js +2 -31
- package/dist/esm/src/components/Popup/Popup.helpers.js.map +1 -0
- package/dist/esm/src/components/Popup/Popup.js +2 -397
- package/dist/esm/src/components/Popup/Popup.js.map +1 -0
- package/dist/esm/src/components/Popup/Popup.styl.js +2 -7
- package/dist/esm/src/components/Popup/Popup.styl.js.map +1 -0
- package/dist/esm/src/components/PopupMenu/PopupMenu.js +2 -15
- package/dist/esm/src/components/PopupMenu/PopupMenu.js.map +1 -0
- package/dist/esm/src/components/PopupMenu/PopupMenu.styl.js +2 -7
- package/dist/esm/src/components/PopupMenu/PopupMenu.styl.js.map +1 -0
- package/dist/esm/src/components/Portal/Portal.js +2 -19
- package/dist/esm/src/components/Portal/Portal.js.map +1 -0
- package/dist/esm/src/components/RequiredStar/RequiredStar.js +2 -12
- package/dist/esm/src/components/RequiredStar/RequiredStar.js.map +1 -0
- package/dist/esm/src/components/RequiredStar/RequiredStar.styl.js +2 -7
- package/dist/esm/src/components/RequiredStar/RequiredStar.styl.js.map +1 -0
- package/dist/esm/src/components/Router/Link/Link.js +2 -61
- package/dist/esm/src/components/Router/Link/Link.js.map +1 -0
- package/dist/esm/src/components/Router/Link/Link.styl.js +2 -7
- package/dist/esm/src/components/Router/Link/Link.styl.js.map +1 -0
- package/dist/esm/src/components/Router/Redirect.js +2 -12
- package/dist/esm/src/components/Router/Redirect.js.map +1 -0
- package/dist/esm/src/components/Router/Route.js +2 -4
- package/dist/esm/src/components/Router/Route.js.map +1 -0
- package/dist/esm/src/components/Router/Router.helpers.js +2 -33
- package/dist/esm/src/components/Router/Router.helpers.js.map +1 -0
- package/dist/esm/src/components/Router/Router.js +2 -68
- package/dist/esm/src/components/Router/Router.js.map +1 -0
- package/dist/esm/src/components/Router/context.js +2 -5
- package/dist/esm/src/components/Router/context.js.map +1 -0
- package/dist/esm/src/components/Router/store.js +2 -55
- package/dist/esm/src/components/Router/store.js.map +1 -0
- package/dist/esm/src/components/Scroll/Scroll.js +2 -274
- package/dist/esm/src/components/Scroll/Scroll.js.map +1 -0
- package/dist/esm/src/components/Scroll/Scroll.styl.js +2 -7
- package/dist/esm/src/components/Scroll/Scroll.styl.js.map +1 -0
- package/dist/esm/src/components/Select/Select.helpers.js +2 -37
- package/dist/esm/src/components/Select/Select.helpers.js.map +1 -0
- package/dist/esm/src/components/Select/Select.js +2 -584
- package/dist/esm/src/components/Select/Select.js.map +1 -0
- package/dist/esm/src/components/Select/Select.styl.js +2 -7
- package/dist/esm/src/components/Select/Select.styl.js.map +1 -0
- package/dist/esm/src/components/Spinner/Spinner.js +2 -11
- package/dist/esm/src/components/Spinner/Spinner.js.map +1 -0
- package/dist/esm/src/components/Spinner/Spinner.styl.js +2 -7
- package/dist/esm/src/components/Spinner/Spinner.styl.js.map +1 -0
- package/dist/esm/src/components/Spinner/spinner.svg.js +2 -24
- package/dist/esm/src/components/Spinner/spinner.svg.js.map +1 -0
- package/dist/esm/src/components/Table/Table.js +2 -24
- package/dist/esm/src/components/Table/Table.js.map +1 -0
- package/dist/esm/src/components/Table/Table.styl.js +2 -7
- package/dist/esm/src/components/Table/Table.styl.js.map +1 -0
- package/dist/esm/src/components/Tabs/Tabs.js +2 -43
- package/dist/esm/src/components/Tabs/Tabs.js.map +1 -0
- package/dist/esm/src/components/Tabs/Tabs.styl.js +2 -7
- package/dist/esm/src/components/Tabs/Tabs.styl.js.map +1 -0
- package/dist/esm/src/components/Text/Text.js +2 -44
- package/dist/esm/src/components/Text/Text.js.map +1 -0
- package/dist/esm/src/components/Text/Text.styl.js +2 -7
- package/dist/esm/src/components/Text/Text.styl.js.map +1 -0
- package/dist/esm/src/components/Theme/Theme.defaults.js +2 -50
- package/dist/esm/src/components/Theme/Theme.defaults.js.map +1 -0
- package/dist/esm/src/components/Theme/Theme.helpers.js +2 -67
- package/dist/esm/src/components/Theme/Theme.helpers.js.map +1 -0
- package/dist/esm/src/components/Theme/Theme.js +2 -13
- package/dist/esm/src/components/Theme/Theme.js.map +1 -0
- package/dist/esm/src/components/VH/VH.js +2 -33
- package/dist/esm/src/components/VH/VH.js.map +1 -0
- package/dist/esm/src/components/Virtualized/List/List.js +2 -124
- package/dist/esm/src/components/Virtualized/List/List.js.map +1 -0
- package/dist/esm/src/components/Virtualized/List/List.styl.js +2 -7
- package/dist/esm/src/components/Virtualized/List/List.styl.js.map +1 -0
- package/dist/esm/src/components/Virtualized/List/ListScroll.js +2 -21
- package/dist/esm/src/components/Virtualized/List/ListScroll.js.map +1 -0
- package/dist/esm/src/components/Virtualized/List/ListScroll.styl.js +2 -7
- package/dist/esm/src/components/Virtualized/List/ListScroll.styl.js.map +1 -0
- package/dist/esm/src/components/Virtualized/Virtualized.helpers.js +2 -14
- package/dist/esm/src/components/Virtualized/Virtualized.helpers.js.map +1 -0
- package/dist/esm/src/components/Virtualized/Virtualized.js +2 -200
- package/dist/esm/src/components/Virtualized/Virtualized.js.map +1 -0
- package/dist/esm/src/components/Virtualized/Virtualized.styl.js +2 -7
- package/dist/esm/src/components/Virtualized/Virtualized.styl.js.map +1 -0
- package/dist/esm/src/components/Virtualized/Virtualized.types.js +1 -0
- package/dist/esm/src/components/Virtualized/Virtualized.types.js.map +1 -0
- package/dist/esm/src/services/i18n.js +2 -68
- package/dist/esm/src/services/i18n.js.map +1 -0
- package/dist/esm/src/tools/array.js +2 -60
- package/dist/esm/src/tools/array.js.map +1 -0
- package/dist/esm/src/tools/config.js +2 -9
- package/dist/esm/src/tools/config.js.map +1 -0
- package/dist/esm/src/tools/date.js +2 -11
- package/dist/esm/src/tools/date.js.map +1 -0
- package/dist/esm/src/tools/debounce.js +2 -11
- package/dist/esm/src/tools/debounce.js.map +1 -0
- package/dist/esm/src/tools/dom.js +2 -46
- package/dist/esm/src/tools/dom.js.map +1 -0
- package/dist/esm/src/tools/env.js +2 -3
- package/dist/esm/src/tools/env.js.map +1 -0
- package/dist/esm/src/tools/file.js +2 -11
- package/dist/esm/src/tools/file.js.map +1 -0
- package/dist/esm/src/tools/localStorage.js +2 -31
- package/dist/esm/src/tools/localStorage.js.map +1 -0
- package/dist/esm/src/tools/number.js +2 -27
- package/dist/esm/src/tools/number.js.map +1 -0
- package/dist/esm/src/tools/object.js +2 -5
- package/dist/esm/src/tools/object.js.map +1 -0
- package/dist/esm/src/tools/queryParams.js +2 -20
- package/dist/esm/src/tools/queryParams.js.map +1 -0
- package/dist/esm/src/tools/rangeMap.js +2 -3
- package/dist/esm/src/tools/rangeMap.js.map +1 -0
- package/dist/esm/src/tools/resizeObserver.js +2 -68
- package/dist/esm/src/tools/resizeObserver.js.map +1 -0
- package/dist/esm/src/tools/scroll.js +2 -41
- package/dist/esm/src/tools/scroll.js.map +1 -0
- package/dist/esm/src/tools/string.js +2 -7
- package/dist/esm/src/tools/string.js.map +1 -0
- package/dist/esm/src/tools/throttle.js +2 -30
- package/dist/esm/src/tools/throttle.js.map +1 -0
- package/dist/esm/src/tools/uid.js +2 -7
- package/dist/esm/src/tools/uid.js.map +1 -0
- package/dist/esm/types/src/components/Icon/Icon.d.ts +9 -3
- package/dist/esm/types/src/components/Icon/Icon.example.d.ts +0 -1
- package/package.json +1 -1
|
@@ -1,295 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
import { createStore } from 'justorm/react';
|
|
4
|
-
import cn from 'classnames';
|
|
5
|
-
import pick from 'lodash.pick';
|
|
6
|
-
import compare from 'compareq';
|
|
7
|
-
import Time from 'timen';
|
|
8
|
-
import { Label } from '../Label/Label.js';
|
|
9
|
-
import { Icon } from '../Icon/Icon.js';
|
|
10
|
-
import { Scroll } from '../Scroll/Scroll.js';
|
|
11
|
-
import { toBase64 } from '../../tools/file.js';
|
|
12
|
-
import { spliceWhere } from '../../tools/array.js';
|
|
13
|
-
import S from './InputFile.styl.js';
|
|
14
|
-
import Item from './Item/Item.js';
|
|
15
|
-
import '../AssistiveText/AssistiveText.styl.js';
|
|
16
|
-
import '../Spinner/Spinner.styl.js';
|
|
17
|
-
import '../Button/Button.styl.js';
|
|
18
|
-
import '../ButtonGroup/ButtonGroup.styl.js';
|
|
19
|
-
import '../Calendar/Calendar.styl.js';
|
|
20
|
-
import 'lodash.omit';
|
|
21
|
-
import '../RequiredStar/RequiredStar.styl.js';
|
|
22
|
-
import 'nanoid';
|
|
23
|
-
import '../Input/Input.styl.js';
|
|
24
|
-
import '../Portal/Portal.js';
|
|
25
|
-
import '../Paranja/Paranja.styl.js';
|
|
26
|
-
import '../../tools/dom.js';
|
|
27
|
-
import '../Popup/Popup.styl.js';
|
|
28
|
-
import '../../tools/queryParams.js';
|
|
29
|
-
import '../Select/Select.styl.js';
|
|
30
|
-
import '../Checkbox/Checkbox.styl.js';
|
|
31
|
-
import '../Container/Container.styl.js';
|
|
32
|
-
import '../DatePicker/DatePicker.styl.js';
|
|
33
|
-
import 'moment';
|
|
34
|
-
import '../DatePickerInput/DatePickerInput.styl.js';
|
|
35
|
-
import { Draggable } from '../Draggable/Draggable.js';
|
|
36
|
-
import '../Expand/Expand.styl.js';
|
|
37
|
-
import '../Form/Form.styl.js';
|
|
38
|
-
import '../Form/Validator.js';
|
|
39
|
-
import '../Form/SubmitButtons/SubmitButtons.styl.js';
|
|
40
|
-
import '../Gallery/Gallery.styl.js';
|
|
41
|
-
import '../Heading/Heading.js';
|
|
42
|
-
import '../LightBox/LightBox.styl.js';
|
|
43
|
-
import '../Notifications/Notifications.js';
|
|
44
|
-
import '../PopupMenu/PopupMenu.styl.js';
|
|
45
|
-
import '../Router/Router.js';
|
|
46
|
-
import '../Table/Table.styl.js';
|
|
47
|
-
import '../Tabs/Tabs.styl.js';
|
|
48
|
-
import '../Text/Text.js';
|
|
49
|
-
import '../Virtualized/Virtualized.styl.js';
|
|
50
|
-
import '../Virtualized/List/List.styl.js';
|
|
51
|
-
import '../Virtualized/List/ListScroll.styl.js';
|
|
52
|
-
import '../../services/i18n.js';
|
|
53
|
-
|
|
54
|
-
const SCROLL_OFFSET = {
|
|
55
|
-
s: 10,
|
|
56
|
-
m: 12,
|
|
57
|
-
l: 16,
|
|
58
|
-
};
|
|
59
|
-
const defaultFileState = {
|
|
60
|
-
total: 1,
|
|
61
|
-
loaded: 0,
|
|
62
|
-
error: null,
|
|
63
|
-
base64: '',
|
|
64
|
-
};
|
|
65
|
-
const buildDefaultState = (src, index, loaded) => ({
|
|
66
|
-
...defaultFileState,
|
|
67
|
-
loaded,
|
|
68
|
-
index,
|
|
69
|
-
src,
|
|
70
|
-
});
|
|
71
|
-
class InputFile extends Component {
|
|
72
|
-
store;
|
|
73
|
-
filesToUpload = []; // [File,...]
|
|
74
|
-
previewRequests = {}; // [index]: Promise
|
|
75
|
-
inputRef = createRef();
|
|
76
|
-
_mounted = false;
|
|
77
|
-
constructor(props) {
|
|
78
|
-
super(props);
|
|
79
|
-
this.store = createStore(this, {
|
|
80
|
-
items: this.getStateFromProps(),
|
|
81
|
-
labelClipPath: '',
|
|
82
|
-
pickingIndex: null,
|
|
83
|
-
isDragging: false,
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
static defaultProps = {
|
|
87
|
-
size: 'm',
|
|
88
|
-
variant: 'default',
|
|
89
|
-
maxCount: 1,
|
|
90
|
-
};
|
|
91
|
-
componentDidMount() {
|
|
92
|
-
this._mounted = true;
|
|
93
|
-
this.props.uploadOnDemand?.(this.demandedUploader);
|
|
94
|
-
}
|
|
95
|
-
componentWillUnmount() {
|
|
96
|
-
this._mounted = false;
|
|
97
|
-
this.store.items.forEach(({ xhr }) => xhr?.abort());
|
|
98
|
-
}
|
|
99
|
-
componentDidUpdate(prevProps) {
|
|
100
|
-
const { value, maxCount } = this.props;
|
|
101
|
-
if (!compare(prevProps.value, value) || prevProps.maxCount !== maxCount) {
|
|
102
|
-
this.store.items = this.getStateFromProps();
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
isMultiple = () => this.props.maxCount > 1;
|
|
106
|
-
getStateFromProps() {
|
|
107
|
-
const { value, maxCount, upload } = this.props;
|
|
108
|
-
const loaded = upload ? 1 : 0;
|
|
109
|
-
if (this.isMultiple()) {
|
|
110
|
-
if (maxCount === 1)
|
|
111
|
-
return [buildDefaultState(value, 0, loaded)];
|
|
112
|
-
return value
|
|
113
|
-
.slice(0, maxCount)
|
|
114
|
-
.map((src, index) => buildDefaultState(src, index, loaded));
|
|
115
|
-
}
|
|
116
|
-
const val = Array.isArray(value) ? value[0] : value;
|
|
117
|
-
return val ? [buildDefaultState(val, 0, loaded)] : [];
|
|
118
|
-
}
|
|
119
|
-
getValFromState = () => {
|
|
120
|
-
const { items } = this.store;
|
|
121
|
-
if (this.isMultiple())
|
|
122
|
-
return items.map(({ src, base64 }) => src || base64);
|
|
123
|
-
if (!items[0])
|
|
124
|
-
return null;
|
|
125
|
-
return items[0].src || items[0].base64;
|
|
126
|
-
};
|
|
127
|
-
getLastIndex = () => {
|
|
128
|
-
const { value } = this.props;
|
|
129
|
-
return Array.isArray(value) ? value.length : 0;
|
|
130
|
-
};
|
|
131
|
-
filterAllowedFiles(files, index) {
|
|
132
|
-
const { maxCount, limit } = this.props;
|
|
133
|
-
const allowedFiles = [];
|
|
134
|
-
[...files].every(file => {
|
|
135
|
-
if (index >= maxCount)
|
|
136
|
-
return false;
|
|
137
|
-
if (limit) {
|
|
138
|
-
const sizeMb = file.size / 1024 / 1024;
|
|
139
|
-
if (sizeMb > limit) {
|
|
140
|
-
console.error(`Max file size - ${limit}Mb`, file);
|
|
141
|
-
return false;
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
allowedFiles.push(file);
|
|
145
|
-
index++;
|
|
146
|
-
return true;
|
|
147
|
-
}, []);
|
|
148
|
-
return allowedFiles;
|
|
149
|
-
}
|
|
150
|
-
onPlusButtonClick = () => this.inputRef.current.click();
|
|
151
|
-
onItemClick(index) {
|
|
152
|
-
this.store.pickingIndex = index;
|
|
153
|
-
Time.after(50, () => this.inputRef.current.click());
|
|
154
|
-
}
|
|
155
|
-
onDragStart = () => (this.store.isDragging = true);
|
|
156
|
-
onDragEnd = () => (this.store.isDragging = false);
|
|
157
|
-
onChange = async (e) => {
|
|
158
|
-
const { files } = e.target;
|
|
159
|
-
const { items, pickingIndex } = this.store;
|
|
160
|
-
const { onSelect, uploadOnDemand, upload } = this.props;
|
|
161
|
-
let index = pickingIndex ?? this.getLastIndex();
|
|
162
|
-
const allowedFiles = this.filterAllowedFiles(files, index);
|
|
163
|
-
allowedFiles.forEach(file => {
|
|
164
|
-
items[index] = { ...defaultFileState, index };
|
|
165
|
-
this.filesToUpload[index] = file;
|
|
166
|
-
this.previewRequests[index] = this.generatePreview(file, index);
|
|
167
|
-
index++;
|
|
168
|
-
});
|
|
169
|
-
onSelect?.(allowedFiles);
|
|
170
|
-
if (upload)
|
|
171
|
-
this.processUploadOnChange(allowedFiles);
|
|
172
|
-
if (uploadOnDemand)
|
|
173
|
-
this.processUploadOnDemand();
|
|
174
|
-
if (typeof pickingIndex === 'number')
|
|
175
|
-
this.store.pickingIndex = null;
|
|
176
|
-
};
|
|
177
|
-
onReorder = ids => {
|
|
178
|
-
const { items } = this.store;
|
|
179
|
-
const { onChange } = this.props;
|
|
180
|
-
this.store.items = ids.map(id => items[id]);
|
|
181
|
-
onChange(null, this.getValFromState());
|
|
182
|
-
};
|
|
183
|
-
onProgress = state => e => {
|
|
184
|
-
Object.assign(state, pick(e, ['total', 'loaded']));
|
|
185
|
-
};
|
|
186
|
-
async generatePreview(file, index) {
|
|
187
|
-
const state = this.store.items[index];
|
|
188
|
-
Object.assign(state, defaultFileState);
|
|
189
|
-
state.base64 = await toBase64(file);
|
|
190
|
-
delete this.previewRequests[index];
|
|
191
|
-
}
|
|
192
|
-
async processUploadOnDemand() {
|
|
193
|
-
await Promise.all(Object.values(this.previewRequests));
|
|
194
|
-
if (!this._mounted)
|
|
195
|
-
return;
|
|
196
|
-
const { onChange } = this.props;
|
|
197
|
-
onChange(null, this.getValFromState());
|
|
198
|
-
}
|
|
199
|
-
async processUploadOnChange(files) {
|
|
200
|
-
const { onChange } = this.props;
|
|
201
|
-
const { pickingIndex } = this.store;
|
|
202
|
-
const lastIndex = pickingIndex ?? this.getLastIndex();
|
|
203
|
-
const reqs = files.map((file, i) => this.upload(file, lastIndex + i));
|
|
204
|
-
await Promise.all(reqs);
|
|
205
|
-
onChange(null, this.getValFromState());
|
|
206
|
-
}
|
|
207
|
-
async upload(file, index) {
|
|
208
|
-
const { upload } = this.props;
|
|
209
|
-
const { items } = this.store;
|
|
210
|
-
const state = items[index];
|
|
211
|
-
const src = await upload({
|
|
212
|
-
file,
|
|
213
|
-
onProgress: this.onProgress(state),
|
|
214
|
-
getXHR: xhr => (state.xhr = xhr),
|
|
215
|
-
});
|
|
216
|
-
delete this.filesToUpload[index];
|
|
217
|
-
if (!this._mounted)
|
|
218
|
-
return;
|
|
219
|
-
Object.assign(state, {
|
|
220
|
-
src,
|
|
221
|
-
loaded: state.total,
|
|
222
|
-
xhr: null,
|
|
223
|
-
});
|
|
224
|
-
}
|
|
225
|
-
demandedUploader = async (upload) => {
|
|
226
|
-
const { value } = this.props;
|
|
227
|
-
const { items } = this.store;
|
|
228
|
-
let newVal;
|
|
229
|
-
if (this.isMultiple()) {
|
|
230
|
-
const requests = [];
|
|
231
|
-
newVal = [...value];
|
|
232
|
-
value.forEach((val, i) => {
|
|
233
|
-
const file = this.filesToUpload[i];
|
|
234
|
-
if (file) {
|
|
235
|
-
const params = { file, onProgress: this.onProgress(items[i]) };
|
|
236
|
-
requests.push(upload(params).then(url => (newVal[i] = url)));
|
|
237
|
-
}
|
|
238
|
-
});
|
|
239
|
-
await Promise.all(requests);
|
|
240
|
-
}
|
|
241
|
-
else {
|
|
242
|
-
newVal = await upload(this.filesToUpload[0], this.onProgress(items[0]));
|
|
243
|
-
}
|
|
244
|
-
this.filesToUpload = [];
|
|
245
|
-
return newVal;
|
|
246
|
-
};
|
|
247
|
-
remove = async (e, value) => {
|
|
248
|
-
e.stopPropagation();
|
|
249
|
-
const { remove, onChange } = this.props;
|
|
250
|
-
if (remove) {
|
|
251
|
-
const res = await remove(value);
|
|
252
|
-
if (!res)
|
|
253
|
-
return;
|
|
254
|
-
}
|
|
255
|
-
const { items } = this.store;
|
|
256
|
-
spliceWhere(items, value, 'src');
|
|
257
|
-
onChange(null, this.getValFromState());
|
|
258
|
-
};
|
|
259
|
-
renderPlusButton() {
|
|
260
|
-
const { size } = this.props;
|
|
261
|
-
return (jsx("label", { className: cn(S.item, S.addButton), onClick: this.onPlusButtonClick, children: jsx(Icon, { type: "plus", size: size }) }, "add-button"));
|
|
262
|
-
}
|
|
263
|
-
renderItem = (i, props = {}) => {
|
|
264
|
-
const { size } = this.props;
|
|
265
|
-
const { base64, src, loaded, total } = this.store.items[i];
|
|
266
|
-
const url = base64 || src;
|
|
267
|
-
return (createElement(Item, { ...props, size: size, key: String(url) + i, img: url, total: total, loaded: loaded, waitingForUpload: !!this.filesToUpload[i], onRemove: e => this.remove(e, url), onClick: () => this.onItemClick(i) }));
|
|
268
|
-
};
|
|
269
|
-
renderItems() {
|
|
270
|
-
const { draggable, maxCount } = this.props;
|
|
271
|
-
const { items, isDragging } = this.store;
|
|
272
|
-
if (items.length === 0)
|
|
273
|
-
return this.renderPlusButton();
|
|
274
|
-
const needAddButton = this.isMultiple() && items.length < maxCount;
|
|
275
|
-
if (draggable) {
|
|
276
|
-
const ids = Array.from({ length: items.length }, (_, i) => String(i));
|
|
277
|
-
return (jsx(Draggable, { className: S.draggable, itemClassName: S.item, items: ids, onDragStart: this.onDragStart, onDragEnd: this.onDragEnd, onChange: this.onReorder, renderItem: id => this.renderItem(parseInt(id, 10), { isDragging }), children: needAddButton && this.renderPlusButton() }));
|
|
278
|
-
}
|
|
279
|
-
const elems = items.map((_, i) => this.renderItem(i, { className: S.item }));
|
|
280
|
-
if (needAddButton)
|
|
281
|
-
elems.push(this.renderPlusButton());
|
|
282
|
-
return elems;
|
|
283
|
-
}
|
|
284
|
-
render() {
|
|
285
|
-
// @ts-ignore
|
|
286
|
-
const { className, size, variant, draggable, label, maxCount, accept, value, } = this.props;
|
|
287
|
-
const { labelClipPath, pickingIndex } = this.store;
|
|
288
|
-
const isEmpty = !value?.length;
|
|
289
|
-
const classes = cn(S.root, className, isEmpty && S.empty, S[`size-${size}`], S[`variant-${variant}`], draggable && S.draggable);
|
|
290
|
-
const scrollOffset = SCROLL_OFFSET[size];
|
|
291
|
-
return (jsxs("div", { className: classes, children: [jsx("div", { className: S.border, suppressHydrationWarning: true, style: { clipPath: labelClipPath } }), jsx("input", { ref: this.inputRef, className: S.input, type: "file", multiple: maxCount > 1 && typeof pickingIndex !== 'number', accept: accept, onChange: this.onChange }), jsx(Label, { isOnTop: true, size: size, className: S.label, onClipPathChange: clipPath => (this.store.labelClipPath = clipPath), children: label }), jsx(Scroll, { y: true, size: "s", className: S.inner, innerClassName: S.items, fadeSize: size, offset: { y: { before: scrollOffset, after: scrollOffset } }, style: { clipPath: labelClipPath }, children: this.renderItems() })] }));
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
|
|
295
|
-
export { InputFile };
|
|
1
|
+
import{Component,createRef,createElement}from"react";import{jsx,jsxs}from"react/jsx-runtime";import{createStore}from"justorm/react";import cn from"classnames";import pick from"lodash.pick";import compare from"compareq";import Time from"timen";import{Label}from"../Label/Label.js";import{Icon}from"../Icon/Icon.js";import{Scroll}from"../Scroll/Scroll.js";import{toBase64}from"../../tools/file.js";import{spliceWhere}from"../../tools/array.js";import S from"./InputFile.styl.js";import Item from"./Item/Item.js";import"../AssistiveText/AssistiveText.styl.js";import"../Spinner/Spinner.styl.js";import"../Button/Button.styl.js";import"../ButtonGroup/ButtonGroup.styl.js";import"../Calendar/Calendar.styl.js";import"lodash.omit";import"../RequiredStar/RequiredStar.styl.js";import"nanoid";import"../Input/Input.styl.js";import"../Portal/Portal.js";import"../Paranja/Paranja.styl.js";import"../../tools/dom.js";import"../Popup/Popup.styl.js";import"../../tools/queryParams.js";import"../Select/Select.styl.js";import"../Checkbox/Checkbox.styl.js";import"../Container/Container.styl.js";import"../DatePicker/DatePicker.styl.js";import"moment";import"../DatePickerInput/DatePickerInput.styl.js";import{Draggable}from"../Draggable/Draggable.js";import"../Expand/Expand.styl.js";import"../Form/Form.styl.js";import"../Form/Validator.js";import"../Form/SubmitButtons/SubmitButtons.styl.js";import"../Gallery/Gallery.styl.js";import"../Heading/Heading.js";import"../LightBox/LightBox.styl.js";import"../Notifications/Notifications.js";import"../PopupMenu/PopupMenu.styl.js";import"../Router/Router.js";import"../Table/Table.styl.js";import"../Tabs/Tabs.styl.js";import"../Text/Text.js";import"../Virtualized/Virtualized.styl.js";import"../Virtualized/List/List.styl.js";import"../Virtualized/List/ListScroll.styl.js";import"../../services/i18n.js";const SCROLL_OFFSET={s:10,m:12,l:16},defaultFileState={total:1,loaded:0,error:null,base64:""},buildDefaultState=(t,e,s)=>({...defaultFileState,loaded:s,index:e,src:t});class InputFile extends Component{store;filesToUpload=[];previewRequests={};inputRef=createRef();_mounted=!1;constructor(t){super(t),this.store=createStore(this,{items:this.getStateFromProps(),labelClipPath:"",pickingIndex:null,isDragging:!1})}static defaultProps={size:"m",variant:"default",maxCount:1};componentDidMount(){this._mounted=!0,this.props.uploadOnDemand?.(this.demandedUploader)}componentWillUnmount(){this._mounted=!1,this.store.items.forEach(({xhr:t})=>t?.abort())}componentDidUpdate(t){var{value:e,maxCount:s}=this.props;compare(t.value,e)&&t.maxCount===s||(this.store.items=this.getStateFromProps())}isMultiple=()=>1<this.props.maxCount;getStateFromProps(){var{value:t,maxCount:e,upload:s}=this.props;const r=s?1:0;return this.isMultiple()?1===e?[buildDefaultState(t,0,r)]:t.slice(0,e).map((t,e)=>buildDefaultState(t,e,r)):(s=Array.isArray(t)?t[0]:t)?[buildDefaultState(s,0,r)]:[]}getValFromState=()=>{var t=this.store["items"];return this.isMultiple()?t.map(({src:t,base64:e})=>t||e):t[0]?t[0].src||t[0].base64:null};getLastIndex=()=>{var t=this.props["value"];return Array.isArray(t)?t.length:0};filterAllowedFiles(t,e){const{maxCount:s,limit:r}=this.props,i=[];return[...t].every(t=>{if(e>=s)return!1;if(r&&t.size/1024/1024>r)return console.error(`Max file size - ${r}Mb`,t),!1;return i.push(t),e++,!0},[]),i}onPlusButtonClick=()=>this.inputRef.current.click();onItemClick(t){this.store.pickingIndex=t,Time.after(50,()=>this.inputRef.current.click())}onDragStart=()=>this.store.isDragging=!0;onDragEnd=()=>this.store.isDragging=!1;onChange=async t=>{t=t.target.files;const{items:e,pickingIndex:s}=this.store;var{onSelect:r,uploadOnDemand:i,upload:o}=this.props;let a=s??this.getLastIndex();t=this.filterAllowedFiles(t,a);t.forEach(t=>{e[a]={...defaultFileState,index:a},this.filesToUpload[a]=t,this.previewRequests[a]=this.generatePreview(t,a),a++}),r?.(t),o&&this.processUploadOnChange(t),i&&this.processUploadOnDemand(),"number"==typeof s&&(this.store.pickingIndex=null)};onReorder=t=>{const e=this.store["items"];var s=this.props["onChange"];this.store.items=t.map(t=>e[t]),s(null,this.getValFromState())};onProgress=e=>t=>{Object.assign(e,pick(t,["total","loaded"]))};async generatePreview(t,e){var s=this.store.items[e];Object.assign(s,defaultFileState),s.base64=await toBase64(t),delete this.previewRequests[e]}async processUploadOnDemand(){var t;await Promise.all(Object.values(this.previewRequests)),this._mounted&&(t=this.props["onChange"],t(null,this.getValFromState()))}async processUploadOnChange(t){var e=this.props["onChange"],s=this.store["pickingIndex"];const r=s??this.getLastIndex();s=t.map((t,e)=>this.upload(t,r+e));await Promise.all(s),e(null,this.getValFromState())}async upload(t,e){var s=this.props["upload"],r=this.store["items"];const i=r[e];r=await s({file:t,onProgress:this.onProgress(i),getXHR:t=>i.xhr=t});delete this.filesToUpload[e],this._mounted&&Object.assign(i,{src:r,loaded:i.total,xhr:null})}demandedUploader=async r=>{var t=this.props["value"];const i=this.store["items"];let o;if(this.isMultiple()){const a=[];o=[...t],t.forEach((t,e)=>{var s=this.filesToUpload[e];s&&(s={file:s,onProgress:this.onProgress(i[e])},a.push(r(s).then(t=>o[e]=t)))}),await Promise.all(a)}else o=await r(this.filesToUpload[0],this.onProgress(i[0]));return this.filesToUpload=[],o};remove=async(t,e)=>{t.stopPropagation();var{remove:t,onChange:s}=this.props;if(t&&!await t(e))return;t=this.store.items;spliceWhere(t,e,"src"),s(null,this.getValFromState())};renderPlusButton(){var t=this.props["size"];return jsx("label",{className:cn(S.item,S.addButton),onClick:this.onPlusButtonClick,children:jsx(Icon,{type:"plus",size:t})},"add-button")}renderItem=(t,e={})=>{var s=this.props["size"],{base64:r,src:i,loaded:o,total:a}=this.store.items[t];const l=r||i;return createElement(Item,{...e,size:s,key:String(l)+t,img:l,total:a,loaded:o,waitingForUpload:!!this.filesToUpload[t],onRemove:t=>this.remove(t,l),onClick:()=>this.onItemClick(t)})};renderItems(){var{draggable:t,maxCount:e}=this.props;const{items:s,isDragging:r}=this.store;return 0===s.length?this.renderPlusButton():(e=this.isMultiple()&&s.length<e,t?(t=Array.from({length:s.length},(t,e)=>String(e)),jsx(Draggable,{className:S.draggable,itemClassName:S.item,items:t,onDragStart:this.onDragStart,onDragEnd:this.onDragEnd,onChange:this.onReorder,renderItem:t=>this.renderItem(parseInt(t,10),{isDragging:r}),children:e&&this.renderPlusButton()})):(t=s.map((t,e)=>this.renderItem(e,{className:S.item})),e&&t.push(this.renderPlusButton()),t))}render(){var{className:t,size:e,variant:s,draggable:r,label:i,maxCount:o,accept:a,value:l}=this.props,{labelClipPath:n,pickingIndex:p}=this.store,l=!l?.length,t=cn(S.root,t,l&&S.empty,S["size-"+e],S["variant-"+s],r&&S.draggable),l=SCROLL_OFFSET[e];return jsxs("div",{className:t,children:[jsx("div",{className:S.border,suppressHydrationWarning:!0,style:{clipPath:n}}),jsx("input",{ref:this.inputRef,className:S.input,type:"file",multiple:1<o&&"number"!=typeof p,accept:a,onChange:this.onChange}),jsx(Label,{isOnTop:!0,size:e,className:S.label,onClipPathChange:t=>this.store.labelClipPath=t,children:i}),jsx(Scroll,{y:!0,size:"s",className:S.inner,innerClassName:S.items,fadeSize:e,offset:{y:{before:l,after:l}},style:{clipPath:n},children:this.renderItems()})]})}}export{InputFile};
|
|
2
|
+
//# sourceMappingURL=InputFile.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputFile.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,7 +1,2 @@
|
|
|
1
|
-
import styleInject from
|
|
2
|
-
|
|
3
|
-
var css_248z = ".InputFile_root__pY3JG{position:relative}.InputFile_border__whRyD{border-radius:inherit;height:100%;left:0;pointer-events:none;position:absolute;top:0;transition:background-color .2s ease-out;width:100%}.InputFile_variant-outlined__f5hnA .InputFile_border__whRyD{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.InputFile_variant-default__Jqzal .InputFile_border__whRyD{background-color:var(--accent-color-alpha-100)}.InputFile_variant-default__Jqzal .InputFile_border__whRyD:hover{background-color:var(--active-color-alpha-300)}.InputFile_empty__7j1BK:hover .InputFile_border__whRyD{background-color:var(--active-color-alpha-500)}.InputFile_label__bAEz-{align-items:center;display:flex;height:100%;position:absolute}.InputFile_inner__BQFX7{max-height:inherit}.InputFile_items__ND1YG{align-items:center;display:flex;flex-wrap:wrap;font-size:0;margin:-4px;width:calc(100% + 8px)}.InputFile_item__qg5I6{display:inline-flex;margin:4px;position:relative}.InputFile_item__qg5I6:first-child:last-child{width:100%}.InputFile_addButton__rW719{align-items:center;cursor:pointer;justify-content:center;position:relative;transition:background-color .2s ease-out}.InputFile_root__pY3JG:not(.InputFile_empty__7j1BK) .InputFile_addButton__rW719:hover{background-color:var(--active-color-alpha-500)}.InputFile_input__7FR5r{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0}.InputFile_size-s__hsWTE{font-size:16px}.InputFile_size-s__hsWTE .InputFile_border__whRyD,.InputFile_size-s__hsWTE .InputFile_item__qg5I6{border-radius:4px}.InputFile_size-s__hsWTE .InputFile_items__ND1YG{padding:8px}.InputFile_size-s__hsWTE .InputFile_item__qg5I6{height:50px;width:50px}.InputFile_size-m__unA0n{font-size:20px}.InputFile_size-m__unA0n .InputFile_border__whRyD,.InputFile_size-m__unA0n .InputFile_item__qg5I6{border-radius:6px}.InputFile_size-m__unA0n .InputFile_items__ND1YG{padding:12px}.InputFile_size-m__unA0n .InputFile_item__qg5I6{height:70px;width:70px}.InputFile_size-l__wpOVo{font-size:24px}.InputFile_size-l__wpOVo .InputFile_border__whRyD,.InputFile_size-l__wpOVo .InputFile_item__qg5I6{border-radius:8px}.InputFile_size-l__wpOVo .InputFile_items__ND1YG{padding:14px}.InputFile_size-l__wpOVo .InputFile_item__qg5I6{height:100px;width:100px}.InputFile_draggable__M7-3v{position:relative;width:100%}.InputFile_draggable__M7-3v .InputFile_item__qg5I6:not(.InputFile_addButton__rW719){cursor:move}";
|
|
4
|
-
var S = {"root":"InputFile_root__pY3JG","border":"InputFile_border__whRyD","variant-outlined":"InputFile_variant-outlined__f5hnA","variant-default":"InputFile_variant-default__Jqzal","empty":"InputFile_empty__7j1BK","label":"InputFile_label__bAEz-","inner":"InputFile_inner__BQFX7","items":"InputFile_items__ND1YG","item":"InputFile_item__qg5I6","addButton":"InputFile_addButton__rW719","input":"InputFile_input__7FR5r","size-s":"InputFile_size-s__hsWTE","size-m":"InputFile_size-m__unA0n","size-l":"InputFile_size-l__wpOVo","draggable":"InputFile_draggable__M7-3v"};
|
|
5
|
-
styleInject(css_248z);
|
|
6
|
-
|
|
7
|
-
export { S as default };
|
|
1
|
+
import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".InputFile_root__pY3JG{position:relative}.InputFile_border__whRyD{border-radius:inherit;height:100%;left:0;pointer-events:none;position:absolute;top:0;transition:background-color .2s ease-out;width:100%}.InputFile_variant-outlined__f5hnA .InputFile_border__whRyD{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.InputFile_variant-default__Jqzal .InputFile_border__whRyD{background-color:var(--accent-color-alpha-100)}.InputFile_variant-default__Jqzal .InputFile_border__whRyD:hover{background-color:var(--active-color-alpha-300)}.InputFile_empty__7j1BK:hover .InputFile_border__whRyD{background-color:var(--active-color-alpha-500)}.InputFile_label__bAEz-{align-items:center;display:flex;height:100%;position:absolute}.InputFile_inner__BQFX7{max-height:inherit}.InputFile_items__ND1YG{align-items:center;display:flex;flex-wrap:wrap;font-size:0;margin:-4px;width:calc(100% + 8px)}.InputFile_item__qg5I6{display:inline-flex;margin:4px;position:relative}.InputFile_item__qg5I6:first-child:last-child{width:100%}.InputFile_addButton__rW719{align-items:center;cursor:pointer;justify-content:center;position:relative;transition:background-color .2s ease-out}.InputFile_root__pY3JG:not(.InputFile_empty__7j1BK) .InputFile_addButton__rW719:hover{background-color:var(--active-color-alpha-500)}.InputFile_input__7FR5r{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0}.InputFile_size-s__hsWTE{font-size:16px}.InputFile_size-s__hsWTE .InputFile_border__whRyD,.InputFile_size-s__hsWTE .InputFile_item__qg5I6{border-radius:4px}.InputFile_size-s__hsWTE .InputFile_items__ND1YG{padding:8px}.InputFile_size-s__hsWTE .InputFile_item__qg5I6{height:50px;width:50px}.InputFile_size-m__unA0n{font-size:20px}.InputFile_size-m__unA0n .InputFile_border__whRyD,.InputFile_size-m__unA0n .InputFile_item__qg5I6{border-radius:6px}.InputFile_size-m__unA0n .InputFile_items__ND1YG{padding:12px}.InputFile_size-m__unA0n .InputFile_item__qg5I6{height:70px;width:70px}.InputFile_size-l__wpOVo{font-size:24px}.InputFile_size-l__wpOVo .InputFile_border__whRyD,.InputFile_size-l__wpOVo .InputFile_item__qg5I6{border-radius:8px}.InputFile_size-l__wpOVo .InputFile_items__ND1YG{padding:14px}.InputFile_size-l__wpOVo .InputFile_item__qg5I6{height:100px;width:100px}.InputFile_draggable__M7-3v{position:relative;width:100%}.InputFile_draggable__M7-3v .InputFile_item__qg5I6:not(.InputFile_addButton__rW719){cursor:move}",S={root:"InputFile_root__pY3JG",border:"InputFile_border__whRyD","variant-outlined":"InputFile_variant-outlined__f5hnA","variant-default":"InputFile_variant-default__Jqzal",empty:"InputFile_empty__7j1BK",label:"InputFile_label__bAEz-",inner:"InputFile_inner__BQFX7",items:"InputFile_items__ND1YG",item:"InputFile_item__qg5I6",addButton:"InputFile_addButton__rW719",input:"InputFile_input__7FR5r","size-s":"InputFile_size-s__hsWTE","size-m":"InputFile_size-m__unA0n","size-l":"InputFile_size-l__wpOVo",draggable:"InputFile_draggable__M7-3v"};styleInject(css_248z);export{S as default};
|
|
2
|
+
//# sourceMappingURL=InputFile.styl.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputFile.styl.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InputFile.types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,18 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import { Button } from '../../Button/Button.js';
|
|
4
|
-
import { Icon } from '../../Icon/Icon.js';
|
|
5
|
-
import S from './Item.styl.js';
|
|
6
|
-
|
|
7
|
-
function Item(props) {
|
|
8
|
-
const { className, size, img, total, loaded, waitingForUpload, children, onRemove, isDragging, ...rest } = props;
|
|
9
|
-
const style = {};
|
|
10
|
-
const isComplete = loaded === total;
|
|
11
|
-
const isLoading = !isComplete && loaded > 0;
|
|
12
|
-
const classes = cn(S.root, S[`size-${size}`], waitingForUpload && S.waitingForUpload, isLoading && S.loading, isDragging && S.dragging, className);
|
|
13
|
-
if (img)
|
|
14
|
-
style.backgroundImage = `url(${img})`;
|
|
15
|
-
return (jsxs("div", { ...rest, className: classes, style: style, children: [children, jsx(Button, { className: S.removeButton, size: "s", variant: "clear", square: true, onClick: onRemove, children: jsx(Icon, { type: "delete" }) }), jsx("div", { className: cn(S.progress, isComplete && S.complete), style: { left: `${(loaded / total) * 100 - 100}%` } }), jsx("div", { className: S.overlay })] }));
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export { Item as default };
|
|
1
|
+
import{jsxs,jsx}from"react/jsx-runtime";import cn from"classnames";import{Button}from"../../Button/Button.js";import{Icon}from"../../Icon/Icon.js";import S from"./Item.styl.js";function Item(e){const{className:o,size:s,img:t,total:r,loaded:a,waitingForUpload:n,children:i,onRemove:l,isDragging:m,...c}=e;var e={},d=a===r,g=cn(S.root,S["size-"+s],n&&S.waitingForUpload,!d&&0<a&&S.loading,m&&S.dragging,o);return t&&(e.backgroundImage=`url(${t})`),jsxs("div",{...c,className:g,style:e,children:[i,jsx(Button,{className:S.removeButton,size:"s",variant:"clear",square:!0,onClick:l,children:jsx(Icon,{type:"delete"})}),jsx("div",{className:cn(S.progress,d&&S.complete),style:{left:a/r*100-100+"%"}}),jsx("div",{className:S.overlay})]})}export{Item as default};
|
|
2
|
+
//# sourceMappingURL=Item.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Item.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,7 +1,2 @@
|
|
|
1
|
-
import styleInject from
|
|
2
|
-
|
|
3
|
-
var css_248z = ".Item_root__uFQw8{background-position:50%;background-size:cover;height:100%;overflow:hidden;position:relative}.Item_root__uFQw8.Item_loading__hN0tA{pointer-events:none}.Item_root__uFQw8>.Item_overlay__lE8hl,.Item_root__uFQw8>img{border-radius:inherit}.Item_size-s__6FWi7{border-radius:4px}.Item_size-m__ICwh8{border-radius:6px}.Item_size-l__zv6Xj{border-radius:8px}.Item_overlay__lE8hl{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;transition:background-color .1s ease-out;z-index:1}.Item_waitingForUpload__JFsoN .Item_overlay__lE8hl{background-color:var(--accent-color-alpha-200);border:2px dashed var(--accent-color-alpha-500)}.Item_root__uFQw8:hover .Item_overlay__lE8hl{background-color:var(--active-color-alpha-500)}.Item_root__uFQw8:hover .Item_removeButton__EgOub{transform:translateX(0)}.Item_removeButton__EgOub{border-radius:0;border-top-left-radius:inherit;bottom:0;position:absolute;right:0;transform:translateX(100%);transition:transform .2s ease-out;z-index:2}.Item_removeButton__EgOub,.Item_removeButton__EgOub:hover{background-color:var(--decent-color-alpha-900)}.Item_removeButton__EgOub:hover{color:var(--danger-color)}.Item_progress__bpcNP{background-color:var(--active-color-alpha-800);height:100%;left:-100%;pointer-events:none;position:absolute;top:0;transition:all .2s ease-out;width:100%;z-index:1}.Item_progress__bpcNP.Item_complete__lEfmV{opacity:0}.Item_dragging__HPzfu{overflow:visible}.Item_dragging__HPzfu .Item_overlay__lE8hl,.Item_dragging__HPzfu .Item_progress__bpcNP,.Item_dragging__HPzfu .Item_removeButton__EgOub{display:none}";
|
|
4
|
-
var S = {"root":"Item_root__uFQw8","loading":"Item_loading__hN0tA","overlay":"Item_overlay__lE8hl","size-s":"Item_size-s__6FWi7","size-m":"Item_size-m__ICwh8","size-l":"Item_size-l__zv6Xj","waitingForUpload":"Item_waitingForUpload__JFsoN","removeButton":"Item_removeButton__EgOub","progress":"Item_progress__bpcNP","complete":"Item_complete__lEfmV","dragging":"Item_dragging__HPzfu"};
|
|
5
|
-
styleInject(css_248z);
|
|
6
|
-
|
|
7
|
-
export { S as default };
|
|
1
|
+
import styleInject from"../../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Item_root__uFQw8{background-position:50%;background-size:cover;height:100%;overflow:hidden;position:relative}.Item_root__uFQw8.Item_loading__hN0tA{pointer-events:none}.Item_root__uFQw8>.Item_overlay__lE8hl,.Item_root__uFQw8>img{border-radius:inherit}.Item_size-s__6FWi7{border-radius:4px}.Item_size-m__ICwh8{border-radius:6px}.Item_size-l__zv6Xj{border-radius:8px}.Item_overlay__lE8hl{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;transition:background-color .1s ease-out;z-index:1}.Item_waitingForUpload__JFsoN .Item_overlay__lE8hl{background-color:var(--accent-color-alpha-200);border:2px dashed var(--accent-color-alpha-500)}.Item_root__uFQw8:hover .Item_overlay__lE8hl{background-color:var(--active-color-alpha-500)}.Item_root__uFQw8:hover .Item_removeButton__EgOub{transform:translateX(0)}.Item_removeButton__EgOub{border-radius:0;border-top-left-radius:inherit;bottom:0;position:absolute;right:0;transform:translateX(100%);transition:transform .2s ease-out;z-index:2}.Item_removeButton__EgOub,.Item_removeButton__EgOub:hover{background-color:var(--decent-color-alpha-900)}.Item_removeButton__EgOub:hover{color:var(--danger-color)}.Item_progress__bpcNP{background-color:var(--active-color-alpha-800);height:100%;left:-100%;pointer-events:none;position:absolute;top:0;transition:all .2s ease-out;width:100%;z-index:1}.Item_progress__bpcNP.Item_complete__lEfmV{opacity:0}.Item_dragging__HPzfu{overflow:visible}.Item_dragging__HPzfu .Item_overlay__lE8hl,.Item_dragging__HPzfu .Item_progress__bpcNP,.Item_dragging__HPzfu .Item_removeButton__EgOub{display:none}",S={root:"Item_root__uFQw8",loading:"Item_loading__hN0tA",overlay:"Item_overlay__lE8hl","size-s":"Item_size-s__6FWi7","size-m":"Item_size-m__ICwh8","size-l":"Item_size-l__zv6Xj",waitingForUpload:"Item_waitingForUpload__JFsoN",removeButton:"Item_removeButton__EgOub",progress:"Item_progress__bpcNP",complete:"Item_complete__lEfmV",dragging:"Item_dragging__HPzfu"};styleInject(css_248z);export{S as default};
|
|
2
|
+
//# sourceMappingURL=Item.styl.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Item.styl.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,8 +1,2 @@
|
|
|
1
|
-
var LABEL_MULTIPLIER
|
|
2
|
-
|
|
3
|
-
var C = {
|
|
4
|
-
LABEL_MULTIPLIER: LABEL_MULTIPLIER,
|
|
5
|
-
LABEL_PADDING: LABEL_PADDING
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
export { LABEL_MULTIPLIER, LABEL_PADDING, C as default };
|
|
1
|
+
var LABEL_MULTIPLIER=.7,LABEL_PADDING=5,C={LABEL_MULTIPLIER:LABEL_MULTIPLIER,LABEL_PADDING:LABEL_PADDING};export{LABEL_MULTIPLIER,LABEL_PADDING,C as default};
|
|
2
|
+
//# sourceMappingURL=Label.constants.json.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Label.constants.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,35 +1,2 @@
|
|
|
1
|
-
import C from
|
|
2
|
-
|
|
3
|
-
function getBottomOffset(size = 's') {
|
|
4
|
-
if (size === 'l')
|
|
5
|
-
return 4;
|
|
6
|
-
if (size === 'm')
|
|
7
|
-
return 2;
|
|
8
|
-
return 0;
|
|
9
|
-
}
|
|
10
|
-
function getLabelClipPath(left, width, size = 's') {
|
|
11
|
-
const offset = 10;
|
|
12
|
-
const A = left - C.LABEL_PADDING;
|
|
13
|
-
// @ts-ignore
|
|
14
|
-
const B = width === 0 ? 0 : left + width * C.LABEL_MULTIPLIER + C.LABEL_PADDING;
|
|
15
|
-
const cutWidth = 5 + getBottomOffset(size);
|
|
16
|
-
const min = `-${offset}px`;
|
|
17
|
-
const max = `calc(100% + ${offset}px)`;
|
|
18
|
-
const points = [
|
|
19
|
-
[min, min],
|
|
20
|
-
[min, max],
|
|
21
|
-
[max, max],
|
|
22
|
-
[max, min],
|
|
23
|
-
[`${B}px`, min],
|
|
24
|
-
[`${B}px`, `${cutWidth - 1}px`],
|
|
25
|
-
[`${B - 1}px`, `${cutWidth}px`],
|
|
26
|
-
[`${A + 1}px`, `${cutWidth}px`],
|
|
27
|
-
[`${A}px`, `${cutWidth - 1}px`],
|
|
28
|
-
[`${A}px`, min],
|
|
29
|
-
]
|
|
30
|
-
.map(coords => coords.join(' '))
|
|
31
|
-
.join(', \n');
|
|
32
|
-
return `polygon(${points})`;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export { getLabelClipPath };
|
|
1
|
+
import C from"./Label.constants.json.js";function getBottomOffset(t="s"){return"l"===t?4:"m"===t?2:0}function getLabelClipPath(t,p,o="s"){var n=t-C.LABEL_PADDING,t=0===p?0:t+p*C.LABEL_MULTIPLIER+C.LABEL_PADDING,p=5+getBottomOffset(o),o="-10px",x="calc(100% + 10px)";return`polygon(${[[o,o],[o,x],[x,x],[x,o],[t+"px",o],[t+"px",p-1+"px"],[t-1+"px",p+"px"],[1+n+"px",p+"px"],[n+"px",p-1+"px"],[n+"px",o]].map(t=>t.join(" ")).join(", \n")})`}export{getLabelClipPath};
|
|
2
|
+
//# sourceMappingURL=Label.helpers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Label.helpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,58 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import cn from 'classnames';
|
|
4
|
-
import Time from 'timen';
|
|
5
|
-
import S from './Label.styl.js';
|
|
6
|
-
import { getLabelClipPath } from './Label.helpers.js';
|
|
7
|
-
|
|
8
|
-
class Label extends Component {
|
|
9
|
-
gapWrapRef = createRef();
|
|
10
|
-
gapRef = createRef();
|
|
11
|
-
timers;
|
|
12
|
-
state = { clipPath: '' };
|
|
13
|
-
labelWidth = 0;
|
|
14
|
-
static defaultProps = {
|
|
15
|
-
size: 'm',
|
|
16
|
-
};
|
|
17
|
-
constructor(props) {
|
|
18
|
-
super(props);
|
|
19
|
-
this.timers = Time.create();
|
|
20
|
-
}
|
|
21
|
-
componentDidMount() {
|
|
22
|
-
this.updateClipPath();
|
|
23
|
-
}
|
|
24
|
-
componentDidUpdate(prevProps) {
|
|
25
|
-
const { children, isOnTop, size, onClipPathChange } = this.props;
|
|
26
|
-
const needUpadte = onClipPathChange &&
|
|
27
|
-
(children !== prevProps.children ||
|
|
28
|
-
isOnTop !== prevProps.isOnTop ||
|
|
29
|
-
size !== prevProps.size);
|
|
30
|
-
if (needUpadte)
|
|
31
|
-
this.updateClipPath();
|
|
32
|
-
}
|
|
33
|
-
updateClipPath = () => {
|
|
34
|
-
const { isOnTop, onClipPathChange, size } = this.props;
|
|
35
|
-
const gapWrapElem = this.gapWrapRef?.current;
|
|
36
|
-
const gapElem = this.gapRef?.current;
|
|
37
|
-
if (!onClipPathChange || !gapWrapElem || !gapElem)
|
|
38
|
-
return;
|
|
39
|
-
// @ts-ignore
|
|
40
|
-
const { offsetLeft } = gapWrapElem;
|
|
41
|
-
const { offsetWidth } = gapElem;
|
|
42
|
-
const labelWidth = isOnTop ? offsetWidth : 0;
|
|
43
|
-
if (this.labelWidth === labelWidth)
|
|
44
|
-
return;
|
|
45
|
-
this.labelWidth = labelWidth;
|
|
46
|
-
const clipPath = getLabelClipPath(offsetLeft, labelWidth, size);
|
|
47
|
-
onClipPathChange(clipPath);
|
|
48
|
-
};
|
|
49
|
-
render() {
|
|
50
|
-
const { className, size, isOnTop, isError, children } = this.props;
|
|
51
|
-
const classes = cn(S.root, S[`size-${size}`], isOnTop && S.onTop, isError && S.isError, className);
|
|
52
|
-
if (!children)
|
|
53
|
-
return null;
|
|
54
|
-
return (jsxs("div", { className: classes, children: [jsx("div", { className: S.view, children: jsx("div", { children: children }) }), jsx("div", { className: S.gapWrap, ref: this.gapWrapRef, children: jsx("div", { className: S.gap, ref: this.gapRef, children: children }) })] }));
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
export { Label };
|
|
1
|
+
import{jsxs,jsx}from"react/jsx-runtime";import{Component,createRef}from"react";import cn from"classnames";import Time from"timen";import S from"./Label.styl.js";import{getLabelClipPath}from"./Label.helpers.js";class Label extends Component{gapWrapRef=createRef();gapRef=createRef();timers;state={clipPath:""};labelWidth=0;static defaultProps={size:"m"};constructor(e){super(e),this.timers=Time.create()}componentDidMount(){this.updateClipPath()}componentDidUpdate(e){var{children:t,isOnTop:s,size:i,onClipPathChange:r}=this.props;!r||t===e.children&&s===e.isOnTop&&i===e.size||this.updateClipPath()}updateClipPath=()=>{var{isOnTop:e,onClipPathChange:t,size:s}=this.props,i=this.gapWrapRef?.current,r=this.gapRef?.current;t&&i&&r&&(i=i["offsetLeft"],r=r["offsetWidth"],this.labelWidth!==(e=e?r:0))&&(this.labelWidth=e,t(getLabelClipPath(i,e,s)))};render(){var{className:e,size:t,isOnTop:s,isError:i,children:r}=this.props,t=cn(S.root,S["size-"+t],s&&S.onTop,i&&S.isError,e);return r?jsxs("div",{className:t,children:[jsx("div",{className:S.view,children:jsx("div",{children:r})}),jsx("div",{className:S.gapWrap,ref:this.gapWrapRef,children:jsx("div",{className:S.gap,ref:this.gapRef,children:r})})]}):null}}export{Label};
|
|
2
|
+
//# sourceMappingURL=Label.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Label.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,7 +1,2 @@
|
|
|
1
|
-
import styleInject from
|
|
2
|
-
|
|
3
|
-
var css_248z = ".Label_size-s__CL8do{font-size:16px;padding:0 8px}.Label_size-m__X81DA{font-size:20px;padding:0 12px}.Label_size-l__-2YIE{font-size:24px;padding:0 14px}.Label_size-xl__aeykV{padding-right:10px}.Label_root__TewVm{align-items:center;color:var(--accent-color-alpha-500);display:flex;left:0;padding-bottom:0;padding-top:0;pointer-events:none;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.Label_root__TewVm,.Label_root__TewVm>div{height:100%;max-width:100%}.Label_gap__zlRrx,.Label_view__Lz9Eu>div{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Label_view__Lz9Eu{align-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;max-width:100%;transform:translateZ(0);transform-origin:top left;transition:transform .15s ease-out}.Label_onTop__7Ntzk .Label_view__Lz9Eu{color:var(--accent-color);transform:scale(.7) translate3d(0,-50%,0)}.Label_isError__YqI0d .Label_view__Lz9Eu{color:var(--danger-color)}.Label_gapWrap__lDGBB{max-width:100%;opacity:0;padding:inherit;pointer-events:none;position:absolute}.Label_gapWrap__lDGBB:before{border-radius:4px;content:\"\";height:1.4em;left:-6px;position:absolute;right:-6px;z-index:-1}";
|
|
4
|
-
var S = {"size-s":"Label_size-s__CL8do","size-m":"Label_size-m__X81DA","size-l":"Label_size-l__-2YIE","size-xl":"Label_size-xl__aeykV","root":"Label_root__TewVm","view":"Label_view__Lz9Eu","gap":"Label_gap__zlRrx","onTop":"Label_onTop__7Ntzk","isError":"Label_isError__YqI0d","gapWrap":"Label_gapWrap__lDGBB"};
|
|
5
|
-
styleInject(css_248z);
|
|
6
|
-
|
|
7
|
-
export { S as default };
|
|
1
|
+
import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z='.Label_size-s__CL8do{font-size:16px;padding:0 8px}.Label_size-m__X81DA{font-size:20px;padding:0 12px}.Label_size-l__-2YIE{font-size:24px;padding:0 14px}.Label_size-xl__aeykV{padding-right:10px}.Label_root__TewVm{align-items:center;color:var(--accent-color-alpha-500);display:flex;left:0;padding-bottom:0;padding-top:0;pointer-events:none;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.Label_root__TewVm,.Label_root__TewVm>div{height:100%;max-width:100%}.Label_gap__zlRrx,.Label_view__Lz9Eu>div{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Label_view__Lz9Eu{align-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;max-width:100%;transform:translateZ(0);transform-origin:top left;transition:transform .15s ease-out}.Label_onTop__7Ntzk .Label_view__Lz9Eu{color:var(--accent-color);transform:scale(.7) translate3d(0,-50%,0)}.Label_isError__YqI0d .Label_view__Lz9Eu{color:var(--danger-color)}.Label_gapWrap__lDGBB{max-width:100%;opacity:0;padding:inherit;pointer-events:none;position:absolute}.Label_gapWrap__lDGBB:before{border-radius:4px;content:"";height:1.4em;left:-6px;position:absolute;right:-6px;z-index:-1}',S={"size-s":"Label_size-s__CL8do","size-m":"Label_size-m__X81DA","size-l":"Label_size-l__-2YIE","size-xl":"Label_size-xl__aeykV",root:"Label_root__TewVm",view:"Label_view__Lz9Eu",gap:"Label_gap__zlRrx",onTop:"Label_onTop__7Ntzk",isError:"Label_isError__YqI0d",gapWrap:"Label_gapWrap__lDGBB"};styleInject(css_248z);export{S as default};
|
|
2
|
+
//# sourceMappingURL=Label.styl.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Label.styl.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -1,65 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import Time from 'timen';
|
|
4
|
-
import { createStore } from 'justorm/react';
|
|
5
|
-
import { Container } from '../Container/Container.js';
|
|
6
|
-
import { Spinner } from '../Spinner/Spinner.js';
|
|
7
|
-
|
|
8
|
-
function compare(cb1, cb2) {
|
|
9
|
-
return cb1?.toString() === cb2?.toString();
|
|
10
|
-
}
|
|
11
|
-
const loaded = new Map();
|
|
12
|
-
class Lazy extends Component {
|
|
13
|
-
store;
|
|
14
|
-
Node;
|
|
15
|
-
hasNode = false;
|
|
16
|
-
clearSpinnerTimeout;
|
|
17
|
-
static defaultProps = {
|
|
18
|
-
size: 'm',
|
|
19
|
-
};
|
|
20
|
-
constructor(props) {
|
|
21
|
-
super(props);
|
|
22
|
-
this.Node = loaded.get(this.props.loader);
|
|
23
|
-
this.hasNode = Boolean(this.Node);
|
|
24
|
-
this.store = createStore(this, {
|
|
25
|
-
loading: !this.hasNode,
|
|
26
|
-
spinnerTimeout: this.hasNode,
|
|
27
|
-
});
|
|
28
|
-
}
|
|
29
|
-
componentDidMount() {
|
|
30
|
-
if (!this.hasNode)
|
|
31
|
-
this.update();
|
|
32
|
-
}
|
|
33
|
-
componentDidUpdate({ loader }) {
|
|
34
|
-
if (!compare(this.props.loader, loader)) {
|
|
35
|
-
// @ts-ignore
|
|
36
|
-
this.clearSpinnerTimeout?.();
|
|
37
|
-
this.update();
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
update() {
|
|
41
|
-
const { loader } = this.props;
|
|
42
|
-
this.clearSpinnerTimeout = Time.after(500, () => this.setState({ spinnerTimeout: false }));
|
|
43
|
-
this.store.loading = true;
|
|
44
|
-
loader().then(({ default: Node }) => {
|
|
45
|
-
if (!compare(this.props.loader, loader))
|
|
46
|
-
return;
|
|
47
|
-
this.Node = Node;
|
|
48
|
-
loaded.set(loader, Node);
|
|
49
|
-
this.store.loading = false;
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
render() {
|
|
53
|
-
const { Node } = this;
|
|
54
|
-
const { progressElem, loader, hideSpinner, ...props } = this.props;
|
|
55
|
-
const { loading, spinnerTimeout } = this.store;
|
|
56
|
-
if (Node)
|
|
57
|
-
return jsx(Node, { ...props });
|
|
58
|
-
if (!spinnerTimeout && loading && !hideSpinner) {
|
|
59
|
-
return (progressElem ?? (jsx(Container, { fullHeight: true, fullWidth: true, children: jsx(Spinner, { size: props.size }) })));
|
|
60
|
-
}
|
|
61
|
-
return null;
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
export { Lazy };
|
|
1
|
+
import{jsx}from"react/jsx-runtime";import{Component}from"react";import Time from"timen";import{createStore}from"justorm/react";import{Container}from"../Container/Container.js";import{Spinner}from"../Spinner/Spinner.js";function compare(e,t){return e?.toString()===t?.toString()}const loaded=new Map;class Lazy extends Component{store;Node;hasNode=!1;clearSpinnerTimeout;static defaultProps={size:"m"};constructor(e){super(e),this.Node=loaded.get(this.props.loader),this.hasNode=Boolean(this.Node),this.store=createStore(this,{loading:!this.hasNode,spinnerTimeout:this.hasNode})}componentDidMount(){this.hasNode||this.update()}componentDidUpdate({loader:e}){compare(this.props.loader,e)||(this.clearSpinnerTimeout?.(),this.update())}update(){const t=this.props["loader"];this.clearSpinnerTimeout=Time.after(500,()=>this.setState({spinnerTimeout:!1})),this.store.loading=!0,t().then(({default:e})=>{compare(this.props.loader,t)&&(this.Node=e,loaded.set(t,e),this.store.loading=!1)})}render(){var e=this["Node"];const{progressElem:t,loader:o,hideSpinner:r,...i}=this.props;var{loading:s,spinnerTimeout:n}=this.store;return e?jsx(e,{...i}):n||!s||r?null:t??jsx(Container,{fullHeight:!0,fullWidth:!0,children:jsx(Spinner,{size:i.size})})}}export{Lazy};
|
|
2
|
+
//# sourceMappingURL=Lazy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Lazy.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|