@fibery/ui-kit 1.38.0 → 1.38.1
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/CHANGELOG.md +11 -0
- package/config/jest/testFrameworkSetup.js +1 -1
- package/package.json +16 -15
- package/src/abbreviate-name.ts +42 -0
- package/src/actions-menu/actions-menu-item.tsx +14 -5
- package/src/actions-menu/actions-menu-props.tsx +1 -0
- package/src/actions-menu/actions-menu.tsx +4 -1
- package/src/actions-menu/context-actions-menu.tsx +22 -0
- package/src/animated-height-container.tsx +24 -5
- package/src/antd/ant-upload.tsx +1 -1
- package/src/antd/input.tsx +4 -0
- package/src/avatar.tsx +1 -27
- package/src/button/base-button.tsx +2 -0
- package/src/button/button.tsx +3 -2
- package/src/button/icon-button.tsx +3 -3
- package/src/card-container.tsx +3 -2
- package/src/checkbox.tsx +17 -0
- package/src/collapsible-section.tsx +3 -1
- package/src/date-picker/autocomplete.tsx +11 -5
- package/src/date-picker/date-range-input.tsx +5 -1
- package/src/date-picker/date-range-picker-popup-content.tsx +31 -13
- package/src/date-picker/single-date-input.tsx +5 -1
- package/src/date-picker/styles.ts +20 -0
- package/src/design-system.ts +24 -0
- package/src/dropdown-menu/index.tsx +11 -1
- package/src/emoji-picker/emoji-picker-preview-footer.tsx +4 -0
- package/src/emoji-picker/emoji.tsx +4 -3
- package/src/emoji-picker/primitives/emoji.tsx +49 -51
- package/src/emoji-picker/primitives/footer.tsx +6 -0
- package/src/emoji-picker/primitives/search.tsx +8 -0
- package/src/emoji-picker/primitives/skin-tone.tsx +12 -2
- package/src/fibermoji-placeholder.tsx +1 -27
- package/src/file-item-2.tsx +408 -0
- package/src/file-item.tsx +63 -12
- package/src/header-layout.tsx +11 -0
- package/src/html-styles.ts +13 -4
- package/src/icons/ast/Back.ts +1 -1
- package/src/icons/ast/ExtensionFiles.ts +1 -1
- package/src/icons/ast/FileUpload.ts +1 -1
- package/src/icons/ast/SwitchToMention.ts +8 -0
- package/src/icons/ast/SwitchToText.ts +8 -0
- package/src/icons/ast/SwitchToWidget.ts +8 -0
- package/src/icons/ast/ViewGallery.ts +8 -0
- package/src/icons/ast/index.tsx +4 -0
- package/src/icons/react/SwitchToMention.tsx +13 -0
- package/src/icons/react/SwitchToText.tsx +13 -0
- package/src/icons/react/SwitchToWidget.tsx +13 -0
- package/src/icons/react/ViewGallery.tsx +13 -0
- package/src/icons/react/index.tsx +4 -0
- package/src/icons/svg/back.svg +3 -1
- package/src/icons/svg/extension/files.svg +3 -1
- package/src/icons/svg/file-upload.svg +3 -6
- package/src/icons/svg/switch-to-mention.svg +3 -0
- package/src/icons/svg/switch-to-text.svg +4 -0
- package/src/icons/svg/switch-to-widget.svg +4 -0
- package/src/icons/svg/view-gallery.svg +4 -0
- package/src/images-gallery/images-gallery-fall-through-provider.tsx +11 -0
- package/src/images-gallery/images-gallery.tsx +13 -10
- package/src/images-gallery/zoom.tsx +13 -2
- package/src/images-gallery-2/images-gallery-2.tsx +442 -0
- package/src/images-gallery-2/slide-buttons.tsx +230 -0
- package/src/images-gallery-2/zoom.tsx +35 -0
- package/src/kbd.tsx +46 -0
- package/src/modal-menu/modal-menu-item.tsx +10 -2
- package/src/modal-menu/modal-menu-trigger.tsx +19 -2
- package/src/notification-dot.tsx +16 -7
- package/src/platform-symbols.ts +9 -0
- package/src/platform.ts +2 -0
- package/src/popover/index.tsx +31 -8
- package/src/popover/modifiers.tsx +26 -19
- package/src/reactions/reaction-button.tsx +323 -101
- package/src/reactions/reaction-picker.tsx +14 -1
- package/src/reactions/reactions.tsx +11 -1
- package/src/reactions/tootltip.tsx +55 -0
- package/src/rich-text-embed-error.tsx +2 -1
- package/src/select/components/group-heading.tsx +8 -0
- package/src/select/components/menu-list-virtualized.tsx +6 -2
- package/src/select/components/option.tsx +4 -0
- package/src/select/select-control-settings-context.tsx +11 -2
- package/src/select/select-in-popover.tsx +10 -7
- package/src/select/styles.ts +21 -1
- package/src/tab-nav/tab-nav.tsx +1 -1
- package/src/toggle.tsx +8 -0
- package/src/tooltip.tsx +27 -18
- package/src/type-badge.tsx +5 -2
- package/src/unit/unit-with-tooltip.tsx +1 -1
- package/src/use-is-phone.tsx +27 -6
- package/src/shortcut-badge.tsx +0 -29
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
|
|
2
|
+
// This icon file is generated automatically.
|
|
3
|
+
|
|
4
|
+
import { IconDefinition } from '../types';
|
|
5
|
+
|
|
6
|
+
const SwitchToMention: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M2 12.75A2.25 2.25 0 0 0 4.25 15h11.5A2.25 2.25 0 0 0 18 12.75v-5.5A2.25 2.25 0 0 0 15.75 5H4.25A2.25 2.25 0 0 0 2 7.25v5.5Zm1.5 0c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75v-5.5a.75.75 0 0 0-.75-.75H4.25a.75.75 0 0 0-.75.75v5.5Zm6.75-3.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5ZM6 8.5a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1H6Z"},"children":[]}],"metadata":""}]},"name":"switch-to-mention"};
|
|
7
|
+
|
|
8
|
+
export default SwitchToMention;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
|
|
2
|
+
// This icon file is generated automatically.
|
|
3
|
+
|
|
4
|
+
import { IconDefinition } from '../types';
|
|
5
|
+
|
|
6
|
+
const SwitchToText: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M6.75 7.25c.305 0 .581.185.696.468l3.25 8a.751.751 0 0 1-1.39.564l-.623-1.532H4.318l-.622 1.532a.751.751 0 0 1-1.39-.564l3.25-8a.75.75 0 0 1 .694-.468h.5Zm-1.823 6h3.147L6.5 9.378 4.927 13.25Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M12.14 2.2a.7.7 0 0 1 .702.713.69.69 0 0 1-.224.508l-.948.93-.117.093.316-.01h2.489c.95 0 1.786.297 2.388.851.603.556.954 1.355.954 2.326 0 .967-.354 1.77-.957 2.328-.602.558-1.44.86-2.385.86h-1.114a.785.785 0 0 1-.518-.173.663.663 0 0 1-.224-.519c0-.211.078-.393.217-.52a.743.743 0 0 1 .505-.183h1.134c.575 0 1.053-.183 1.385-.497.33-.312.533-.77.533-1.355 0-.561-.204-.988-.534-1.277-.334-.29-.814-.456-1.384-.456h-2.495l-.293-.01 1.058 1.023a.696.696 0 0 1 .214.508.698.698 0 0 1-.692.713.698.698 0 0 1-.513-.21l-.002-.001-2.087-2.143a.794.794 0 0 1 0-1.156l2.085-2.12c.137-.149.3-.223.507-.223Z"},"children":[]}],"metadata":""}]},"name":"switch-to-text"};
|
|
7
|
+
|
|
8
|
+
export default SwitchToText;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
|
|
2
|
+
// This icon file is generated automatically.
|
|
3
|
+
|
|
4
|
+
import { IconDefinition } from '../types';
|
|
5
|
+
|
|
6
|
+
const SwitchToWidget: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{},"children":[{"type":"element","tagName":"path","properties":{"d":"M14.166 5.639a.75.75 0 0 1 .75.75v3.333a.75.75 0 0 1-.75.75H5.833a.75.75 0 0 1-.75-.75V6.389a.75.75 0 0 1 .75-.75h8.333Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M15.277 2.306a2.973 2.973 0 0 1 2.973 2.972v9.445a2.972 2.972 0 0 1-2.973 2.971H4.723a2.972 2.972 0 0 1-2.97-2.82l-.003-.152V5.278a2.973 2.973 0 0 1 2.973-2.972h10.554Zm-10.554 1.5c-.813 0-1.473.66-1.473 1.472v9.445l.008.15a1.472 1.472 0 0 0 1.465 1.321h10.554c.813 0 1.473-.658 1.473-1.471V5.277c0-.813-.66-1.472-1.473-1.472H4.723Z"},"children":[]}],"metadata":""}]},"name":"switch-to-widget"};
|
|
7
|
+
|
|
8
|
+
export default SwitchToWidget;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
|
|
2
|
+
// This icon file is generated automatically.
|
|
3
|
+
|
|
4
|
+
import { IconDefinition } from '../types';
|
|
5
|
+
|
|
6
|
+
const ViewGallery: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M7.5 11A1.5 1.5 0 0 1 9 12.5v2A1.5 1.5 0 0 1 7.5 16h-2A1.5 1.5 0 0 1 4 14.5v-2A1.5 1.5 0 0 1 5.5 11h2Zm7 0a1.5 1.5 0 0 1 1.5 1.5v2a1.5 1.5 0 0 1-1.5 1.5h-2a1.5 1.5 0 0 1-1.5-1.5v-2a1.5 1.5 0 0 1 1.5-1.5h2Zm-7-7A1.5 1.5 0 0 1 9 5.5v2A1.5 1.5 0 0 1 7.5 9h-2A1.5 1.5 0 0 1 4 7.5v-2A1.5 1.5 0 0 1 5.5 4h2Zm7 0A1.5 1.5 0 0 1 16 5.5v2A1.5 1.5 0 0 1 14.5 9h-2A1.5 1.5 0 0 1 11 7.5v-2A1.5 1.5 0 0 1 12.5 4h2Z"},"children":[]}],"metadata":""}]},"name":"view-gallery"};
|
|
7
|
+
|
|
8
|
+
export default ViewGallery;
|
package/src/icons/ast/index.tsx
CHANGED
|
@@ -329,6 +329,9 @@ export { default as SpaceTemplate } from './SpaceTemplate';
|
|
|
329
329
|
export { default as Spinner } from './Spinner';
|
|
330
330
|
export { default as Success } from './Success';
|
|
331
331
|
export { default as SuggestIntegration } from './SuggestIntegration';
|
|
332
|
+
export { default as SwitchToMention } from './SwitchToMention';
|
|
333
|
+
export { default as SwitchToText } from './SwitchToText';
|
|
334
|
+
export { default as SwitchToWidget } from './SwitchToWidget';
|
|
332
335
|
export { default as TableLayout } from './TableLayout';
|
|
333
336
|
export { default as Template } from './Template';
|
|
334
337
|
export { default as TemplatesFilled } from './TemplatesFilled';
|
|
@@ -394,6 +397,7 @@ export { default as ViewDetails } from './ViewDetails';
|
|
|
394
397
|
export { default as ViewDocument } from './ViewDocument';
|
|
395
398
|
export { default as ViewFeed } from './ViewFeed';
|
|
396
399
|
export { default as ViewForm } from './ViewForm';
|
|
400
|
+
export { default as ViewGallery } from './ViewGallery';
|
|
397
401
|
export { default as ViewGantt } from './ViewGantt';
|
|
398
402
|
export { default as ViewList } from './ViewList';
|
|
399
403
|
export { default as ViewMap } from './ViewMap';
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// This icon file is generated automatically.
|
|
2
|
+
|
|
3
|
+
import {forwardRef} from 'react';
|
|
4
|
+
import SwitchToMentionSvg from '../ast/SwitchToMention';
|
|
5
|
+
import { Icon } from '../Icon';
|
|
6
|
+
import { IconBaseProps } from '../types';
|
|
7
|
+
|
|
8
|
+
const SwitchToMention = forwardRef<SVGSVGElement, IconBaseProps>(function SwitchToMention(
|
|
9
|
+
props: IconBaseProps,
|
|
10
|
+
ref: React.Ref<SVGSVGElement>
|
|
11
|
+
) {return <Icon {...props} className={props.className} ref={ref} icon={SwitchToMentionSvg} />});
|
|
12
|
+
|
|
13
|
+
export default SwitchToMention;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// This icon file is generated automatically.
|
|
2
|
+
|
|
3
|
+
import {forwardRef} from 'react';
|
|
4
|
+
import SwitchToTextSvg from '../ast/SwitchToText';
|
|
5
|
+
import { Icon } from '../Icon';
|
|
6
|
+
import { IconBaseProps } from '../types';
|
|
7
|
+
|
|
8
|
+
const SwitchToText = forwardRef<SVGSVGElement, IconBaseProps>(function SwitchToText(
|
|
9
|
+
props: IconBaseProps,
|
|
10
|
+
ref: React.Ref<SVGSVGElement>
|
|
11
|
+
) {return <Icon {...props} className={props.className} ref={ref} icon={SwitchToTextSvg} />});
|
|
12
|
+
|
|
13
|
+
export default SwitchToText;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// This icon file is generated automatically.
|
|
2
|
+
|
|
3
|
+
import {forwardRef} from 'react';
|
|
4
|
+
import SwitchToWidgetSvg from '../ast/SwitchToWidget';
|
|
5
|
+
import { Icon } from '../Icon';
|
|
6
|
+
import { IconBaseProps } from '../types';
|
|
7
|
+
|
|
8
|
+
const SwitchToWidget = forwardRef<SVGSVGElement, IconBaseProps>(function SwitchToWidget(
|
|
9
|
+
props: IconBaseProps,
|
|
10
|
+
ref: React.Ref<SVGSVGElement>
|
|
11
|
+
) {return <Icon {...props} className={props.className} ref={ref} icon={SwitchToWidgetSvg} />});
|
|
12
|
+
|
|
13
|
+
export default SwitchToWidget;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// This icon file is generated automatically.
|
|
2
|
+
|
|
3
|
+
import {forwardRef} from 'react';
|
|
4
|
+
import ViewGallerySvg from '../ast/ViewGallery';
|
|
5
|
+
import { Icon } from '../Icon';
|
|
6
|
+
import { IconBaseProps } from '../types';
|
|
7
|
+
|
|
8
|
+
const ViewGallery = forwardRef<SVGSVGElement, IconBaseProps>(function ViewGallery(
|
|
9
|
+
props: IconBaseProps,
|
|
10
|
+
ref: React.Ref<SVGSVGElement>
|
|
11
|
+
) {return <Icon {...props} className={props.className} ref={ref} icon={ViewGallerySvg} />});
|
|
12
|
+
|
|
13
|
+
export default ViewGallery;
|
|
@@ -329,6 +329,9 @@ export { default as SpaceTemplate } from './SpaceTemplate';
|
|
|
329
329
|
export { default as Spinner } from './Spinner';
|
|
330
330
|
export { default as Success } from './Success';
|
|
331
331
|
export { default as SuggestIntegration } from './SuggestIntegration';
|
|
332
|
+
export { default as SwitchToMention } from './SwitchToMention';
|
|
333
|
+
export { default as SwitchToText } from './SwitchToText';
|
|
334
|
+
export { default as SwitchToWidget } from './SwitchToWidget';
|
|
332
335
|
export { default as TableLayout } from './TableLayout';
|
|
333
336
|
export { default as Template } from './Template';
|
|
334
337
|
export { default as TemplatesFilled } from './TemplatesFilled';
|
|
@@ -394,6 +397,7 @@ export { default as ViewDetails } from './ViewDetails';
|
|
|
394
397
|
export { default as ViewDocument } from './ViewDocument';
|
|
395
398
|
export { default as ViewFeed } from './ViewFeed';
|
|
396
399
|
export { default as ViewForm } from './ViewForm';
|
|
400
|
+
export { default as ViewGallery } from './ViewGallery';
|
|
397
401
|
export { default as ViewGantt } from './ViewGantt';
|
|
398
402
|
export { default as ViewList } from './ViewList';
|
|
399
403
|
export { default as ViewMap } from './ViewMap';
|
package/src/icons/svg/back.svg
CHANGED
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
<?xml version="1.0" standalone="no"?>
|
|
2
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
|
3
|
+
<path d="M7.46967 5.21967C7.76256 4.92678 8.23744 4.92678 8.53033 5.21967C8.82322 5.51256 8.82322 5.98744 8.53033 6.28033L5.56066 9.25H16.25C16.6642 9.25 17 9.58579 17 10C17 10.4142 16.6642 10.75 16.25 10.75H5.56066L8.53033 13.7197C8.82322 14.0126 8.82322 14.4874 8.53033 14.7803C8.23744 15.0732 7.76256 15.0732 7.46967 14.7803L3.21967 10.5303C3.07322 10.3839 3 10.1919 3 10C3 9.89831 3.02024 9.80134 3.05691 9.71291C3.09351 9.62445 3.14776 9.54158 3.21967 9.46967L7.46967 5.21967Z"/>
|
|
4
|
+
</svg>
|
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
<?xml version="1.0" standalone="no"?>
|
|
2
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="Icon"
|
|
2
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="Icon">
|
|
3
|
+
<path d="M15.0306 6.0317C15.0305 5.33675 14.7359 4.66988 14.2126 4.17848C13.6893 3.68717 12.9792 3.41128 12.2392 3.41128C11.5917 3.41133 10.9677 3.62289 10.4712 4.00482L10.2657 4.17848L4.83937 9.27507C3.98385 10.0785 3.50287 11.1682 3.50285 12.3044C3.50285 13.4405 3.98384 14.5302 4.83937 15.3336C5.69489 16.1369 6.8554 16.5887 8.06522 16.5887L8.29124 16.5832C9.41871 16.5306 10.4891 16.0868 11.2911 15.3336L16.7174 10.2371C17.0107 9.96164 17.4865 9.96179 17.7799 10.2371C18.0734 10.5126 18.0733 10.9593 17.7799 11.2349L12.3536 16.3315C11.2874 17.3328 9.86457 17.9228 8.3656 17.9926L8.06522 18C6.45682 18 4.91417 17.3994 3.77681 16.3315C2.63944 15.2634 2 13.8148 2 12.3044C2.00001 10.7939 2.63945 9.3453 3.77681 8.27725L9.20312 3.18066L9.35771 3.04284C10.1453 2.37327 11.1718 2.00006 12.2392 2C13.3778 2 14.47 2.42468 15.2752 3.18066C16.0803 3.93673 16.5333 4.96246 16.5334 6.0317L16.5276 6.232C16.4749 7.22853 16.03 8.17385 15.2752 8.88274L9.84888 13.9793C9.43484 14.3681 8.89137 14.6082 8.31374 14.662L8.06522 14.673C7.39628 14.673 6.75462 14.4235 6.28156 13.9793C5.80849 13.5351 5.54188 12.9326 5.54188 12.3044C5.54189 11.6761 5.8085 11.0736 6.28156 10.6294L11.7079 5.53279C12.0012 5.25738 12.477 5.25753 12.7704 5.53279C13.0639 5.80834 13.0638 6.25503 12.7704 6.53061L7.34413 11.6272C7.15291 11.8068 7.04474 12.0504 7.04473 12.3044C7.04473 12.5583 7.15289 12.8019 7.34413 12.9815C7.53534 13.161 7.79486 13.2617 8.06522 13.2617L8.166 13.2571C8.39928 13.2353 8.61909 13.1385 8.78632 12.9815L14.2126 7.88492C14.6706 7.4548 14.9535 6.89084 15.0169 6.2908L15.0306 6.0317Z" class="typeIcons"/>
|
|
4
|
+
</svg>
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
<
|
|
3
|
-
<path d="
|
|
4
|
-
<path d="M34 16L24 6L14 16" stroke="#6E7A83" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
|
5
|
-
<path d="M24 6V30" stroke="#6E7A83" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
|
1
|
+
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M13.0289 10.7197L10.5301 8.21967C10.2373 7.92678 9.76267 7.92678 9.46992 8.21967L6.97111 10.7197C6.67835 11.0126 6.67835 11.4874 6.97111 11.7803C7.26386 12.0732 7.73851 12.0732 8.03126 11.7803L9.25035 10.5607V14.5C9.25035 14.9142 9.58598 15.25 9.99999 15.25C10.414 15.25 10.7496 14.9142 10.7496 14.5V10.5607L11.9687 11.7803C12.2615 12.0732 12.7361 12.0732 13.0289 11.7803C13.3216 11.4874 13.3216 11.0126 13.0289 10.7197Z" />
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.74527 1.5C4.2272 1.5 2.99657 2.73123 2.99658 4.25002L2.99665 15.75C2.99665 17.2688 4.22728 18.5 5.74532 18.5H14.2479C15.766 18.5 16.9966 17.2688 16.9966 15.75V6.74668C16.9966 6.54748 16.9174 6.35646 16.7764 6.21576L12.2719 1.71909C12.1314 1.5788 11.941 1.50001 11.7424 1.50001L5.74527 1.5ZM4.49586 4.25001C4.49586 3.55965 5.05524 3 5.74527 3L10.9928 3.00001V5.91334C10.9928 6.33327 11.1595 6.736 11.4563 7.03293C11.7531 7.32986 12.1556 7.49668 12.5754 7.49668H15.4973V15.75C15.4973 16.4404 14.9379 17 14.2479 17H5.74532C5.0553 17 4.49593 16.4404 4.49593 15.75L4.49586 4.25001ZM14.4343 5.99668L12.4921 4.05783V5.91334C12.4921 5.93545 12.5009 5.95664 12.5165 5.97227C12.5321 5.9879 12.5533 5.99668 12.5754 5.99668H14.4343Z" />
|
|
6
4
|
</svg>
|
|
7
|
-
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 12.75C2 13.9926 3.00736 15 4.25 15H15.75C16.9926 15 18 13.9926 18 12.75V7.25C18 6.0074 16.9926 5 15.75 5H4.25C3.00736 5 2 6.0074 2 7.25V12.75ZM3.5 12.75C3.5 13.1642 3.83579 13.5 4.25 13.5H15.75C16.1642 13.5 16.5 13.1642 16.5 12.75V7.25C16.5 6.8358 16.1642 6.5 15.75 6.5H4.25C3.83579 6.5 3.5 6.8358 3.5 7.25V12.75ZM10.25 9.25C9.83579 9.25 9.5 9.58579 9.5 10C9.5 10.4142 9.83579 10.75 10.25 10.75H13.75C14.1642 10.75 14.5 10.4142 14.5 10C14.5 9.58579 14.1642 9.25 13.75 9.25H10.25ZM6 8.5C5.44772 8.5 5 8.94771 5 9.5V10.5C5 11.0523 5.44772 11.5 6 11.5H7C7.55228 11.5 8 11.0523 8 10.5V9.5C8 8.94772 7.55228 8.5 7 8.5H6Z" />
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.75046 7.25C7.05549 7.25019 7.33096 7.43515 7.44578 7.71777L10.6958 15.7178C10.8514 16.1013 10.6661 16.5393 10.2827 16.6953C9.89904 16.851 9.46108 16.6658 9.30515 16.2822L8.68308 14.75H4.31785L3.69578 16.2822C3.53996 16.6658 3.10185 16.8508 2.71824 16.6953C2.33455 16.5394 2.1494 16.1015 2.30515 15.7178L5.55515 7.71777C5.67006 7.4351 5.94531 7.25 6.25046 7.25H6.75046ZM4.92722 13.25H8.07371L6.50046 9.37793L4.92722 13.25Z" />
|
|
3
|
+
<path d="M12.1401 2.2002C12.5346 2.20031 12.8423 2.51397 12.8423 2.91309C12.8423 3.12364 12.7451 3.30551 12.6177 3.4209L11.6704 4.35059L11.5532 4.44434L11.8686 4.43359H14.3579C15.3076 4.43359 16.1443 4.73128 16.7456 5.28516C17.3487 5.84076 17.6996 6.64028 17.6997 7.61133C17.6997 8.57822 17.3463 9.38055 16.7427 9.93945C16.1408 10.4969 15.3038 10.7998 14.3579 10.7998H13.2436C13.0535 10.7997 12.8677 10.7476 12.7261 10.626C12.5804 10.5009 12.5025 10.3197 12.5024 10.1074C12.5024 9.8956 12.5796 9.71381 12.7192 9.58691C12.8564 9.46221 13.0379 9.4043 13.2241 9.4043H14.3579C14.9329 9.4043 15.4106 9.22123 15.7427 8.90723C16.0732 8.59459 16.2758 8.13679 16.2759 7.55176C16.2759 6.99074 16.0721 6.56373 15.7417 6.27539C15.4079 5.98422 14.9278 5.81934 14.3579 5.81934H11.8628L11.5698 5.80957L12.6284 6.83203C12.7765 6.96762 12.8422 7.16542 12.8423 7.33984C12.8423 7.73634 12.5371 8.05273 12.1499 8.05273C11.9478 8.05273 11.776 7.9829 11.6372 7.84375L11.6352 7.8418L9.54832 5.69922C9.39856 5.54868 9.30038 5.35992 9.30027 5.12695C9.30027 4.89706 9.39542 4.69649 9.54832 4.54297L11.6333 2.42383C11.7702 2.27437 11.9334 2.2002 12.1401 2.2002Z" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg iewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M14.166 5.63857C14.5801 5.63857 14.9158 5.9745 14.916 6.38857V9.72157C14.916 10.1358 14.5802 10.4716 14.166 10.4716H5.83301C5.41894 10.4714 5.08301 10.1357 5.08301 9.72157V6.38857C5.08318 5.97461 5.41905 5.63874 5.83301 5.63857H14.166Z" />
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2773 2.30556C16.9189 2.30556 18.25 3.6367 18.25 5.27821V14.7225C18.2498 16.3639 16.9187 17.6942 15.2773 17.6942H4.72266C3.13235 17.6942 1.83337 16.4455 1.75391 14.8749L1.75 14.7225V5.27821C1.75 3.6367 3.08114 2.30556 4.72266 2.30556H15.2773ZM4.72266 3.80556C3.90957 3.80556 3.25 4.46513 3.25 5.27821V14.7225L3.25781 14.8729C3.3333 15.6152 3.96046 16.1942 4.72266 16.1942H15.2773C16.0903 16.1942 16.7498 15.5355 16.75 14.7225V5.27821C16.75 4.46513 16.0904 3.80556 15.2773 3.80556H4.72266Z" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path
|
|
3
|
+
d="M7.5 11C8.3284 11 9 11.6716 9 12.5V14.5C9 15.3284 8.3284 16 7.5 16H5.5C4.67157 16 4 15.3285 4 14.5V12.5C4 11.6716 4.67157 11 5.5 11H7.5ZM14.5 11C15.3284 11 16 11.6716 16 12.5V14.5C16 15.3284 15.3284 16 14.5 16H12.5C11.6716 16 11 15.3285 11 14.5V12.5C11 11.6716 11.6716 11 12.5 11H14.5ZM7.5 4C8.3284 4 9 4.67157 9 5.5V7.5C9 8.3284 8.3284 9 7.5 9H5.5C4.67157 9 4 8.3285 4 7.5V5.5C4 4.67157 4.67157 4 5.5 4H7.5ZM14.5 4C15.3284 4 16 4.67157 16 5.5V7.5C16 8.3284 15.3284 9 14.5 9H12.5C11.6716 9 11 8.3285 11 7.5V5.5C11 4.67157 11.6716 4 12.5 4H14.5Z" />
|
|
4
|
+
</svg>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React, {PropsWithChildren, useContext} from "react";
|
|
2
|
+
import {ImagesGalleryProvider, ImagesGalleryStateContext} from "./images-gallery";
|
|
3
|
+
|
|
4
|
+
export function ImagesGalleryFallThroughProvider(props: PropsWithChildren) {
|
|
5
|
+
const context = useContext(ImagesGalleryStateContext);
|
|
6
|
+
if (context === undefined) {
|
|
7
|
+
return <ImagesGalleryProvider>{props.children}</ImagesGalleryProvider>;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
return <>{props.children}</>;
|
|
11
|
+
}
|
|
@@ -10,14 +10,14 @@ import ArrowLeft from "../icons/react/ArrowLeft";
|
|
|
10
10
|
import {css} from "@linaria/core";
|
|
11
11
|
import cx from "classnames";
|
|
12
12
|
|
|
13
|
-
type Registry = Map<string, {zoomed: boolean; setZoomed: (zoomed: boolean) => void}>;
|
|
13
|
+
type Registry = Map<string, {zoomed: boolean; setZoomed: (zoomed: boolean) => void; src: string}>;
|
|
14
14
|
|
|
15
15
|
const [ImagesGalleryRegistryProvider, useImagesGalleryRegistry] = createContext(
|
|
16
16
|
"ImagesGalleryRegistryContext",
|
|
17
17
|
new Map()
|
|
18
18
|
);
|
|
19
19
|
|
|
20
|
-
export {useImagesGalleryRegistry};
|
|
20
|
+
export {ImagesGalleryRegistryProvider, useImagesGalleryRegistry};
|
|
21
21
|
|
|
22
22
|
type Methods = {
|
|
23
23
|
setVisible: (visible: boolean) => void;
|
|
@@ -33,20 +33,23 @@ const [ImagesGalleryMethodsProvider, useImagesGalleryMethods] = createContext<Me
|
|
|
33
33
|
nextImage: _.noop,
|
|
34
34
|
prevImage: _.noop,
|
|
35
35
|
});
|
|
36
|
-
type State = {visible: boolean; activated: boolean; _inc: number};
|
|
36
|
+
type State = {version: "1" | "2"; visible: boolean; activated: boolean; _inc: number};
|
|
37
37
|
|
|
38
|
-
const [ImagesGalleryStateProvider, useImagesGalleryState] =
|
|
39
|
-
|
|
40
|
-
activated: false,
|
|
41
|
-
_inc: 0,
|
|
42
|
-
});
|
|
38
|
+
const [ImagesGalleryStateProvider, useImagesGalleryState, ImagesGalleryStateContext] =
|
|
39
|
+
createContext<State>("ImagesGalleryStateContext");
|
|
43
40
|
|
|
44
|
-
export {
|
|
41
|
+
export {
|
|
42
|
+
ImagesGalleryMethodsProvider,
|
|
43
|
+
useImagesGalleryMethods,
|
|
44
|
+
ImagesGalleryStateProvider,
|
|
45
|
+
useImagesGalleryState,
|
|
46
|
+
ImagesGalleryStateContext,
|
|
47
|
+
};
|
|
45
48
|
|
|
46
49
|
type Actions = {type: "set-visible"; payload: boolean} | {type: "set-activated"; payload: boolean} | {type: "inc"};
|
|
47
50
|
|
|
48
51
|
function initialState(): State {
|
|
49
|
-
return {visible: false, activated: false, _inc: 0};
|
|
52
|
+
return {version: "1", visible: false, activated: false, _inc: 0};
|
|
50
53
|
}
|
|
51
54
|
|
|
52
55
|
function imagesGalleryReducer(state: State, action: Actions) {
|
|
@@ -5,8 +5,9 @@ import "react-medium-image-zoom/dist/styles.css";
|
|
|
5
5
|
import {themeVars} from "../design-system";
|
|
6
6
|
import {IconButton} from "../button/icon-button";
|
|
7
7
|
import Close from "../icons/react/Close";
|
|
8
|
-
import {Controls, useImagesGalleryMethods} from "./images-gallery";
|
|
8
|
+
import {Controls, useImagesGalleryMethods, useImagesGalleryState} from "./images-gallery";
|
|
9
9
|
import {useIsPhone} from "../use-is-phone";
|
|
10
|
+
import {ZoomV2} from "../images-gallery-2/zoom";
|
|
10
11
|
|
|
11
12
|
const dialogCss = css`
|
|
12
13
|
:global() {
|
|
@@ -79,7 +80,7 @@ type Props = {
|
|
|
79
80
|
zoomImg?: {src: string; alt?: string};
|
|
80
81
|
};
|
|
81
82
|
|
|
82
|
-
export const
|
|
83
|
+
export const ZoomV1 = (props: Props) => {
|
|
83
84
|
const {zoomed, onZoomedChange, children, className, openOnClick, zoomImg} = props;
|
|
84
85
|
const imagesGalleryMethods = useImagesGalleryMethods();
|
|
85
86
|
const onClick = useCallback(() => {
|
|
@@ -110,3 +111,13 @@ export const Zoom = (props: Props) => {
|
|
|
110
111
|
</div>
|
|
111
112
|
);
|
|
112
113
|
};
|
|
114
|
+
|
|
115
|
+
export const Zoom = (props: Props) => {
|
|
116
|
+
const {version} = useImagesGalleryState();
|
|
117
|
+
|
|
118
|
+
if (version === "1") {
|
|
119
|
+
return <ZoomV1 {...props} />;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
return <ZoomV2 {...props} />;
|
|
123
|
+
};
|