@dtdot/lego 0.17.9 → 0.17.10

package/build/components/InlineCard/InlineCard.component.d.ts

@@ -6,12 +6,13 @@ export declare type DragVariant = Status;
 export interface InlineCardProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     size?: InlineCardSize;
+    value?: string;
     gestureLeftIcon?: IconProp;
     gestureLeftVariant?: DragVariant;
     onGestureLeft?: () => void;
 }
 declare const InlineCard: {
-    ({ children, size, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }: InlineCardProps): JSX.Element;
+    ({ children, size, value, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }: InlineCardProps): JSX.Element;
     Media: ({ children }: import("./_InlineCardMedia.component").InlineCardMediaProps) => JSX.Element;
     Content: ({ children, center }: import("./_InlineCardContent.component").InlineCardContentProps) => JSX.Element;
     Meta: ({ children }: import("./_InlineCardMeta.component").InlineCardMetaProps) => JSX.Element;

package/build/components/InlineCard/InlineCard.component.js

@@ -1,5 +1,5 @@
 import { motion, useMotionValue, useTransform } from 'framer-motion';
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
 import useMeasure from 'react-use-measure';
 import { responsive } from '../..';
@@ -8,6 +8,8 @@ import InlineCardContent from './_InlineCardContent.component';
 import InlineCardMedia from './_InlineCardMedia.component';
 import InlineCardMeta from './_InlineCardMeta.component';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import InlineCardSelectionContext from './_InlineCardSelection.context';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
 const CardWrapper = styled.div `
   position: relative;
   height: 64px;
@@ -75,7 +77,38 @@ const CardActionBackground = styled(motion.div) `
   left: 0;
   pointer-events: none;
 `;
-const InlineCard = ({ children, size, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }) => {
+const SelectChecked = styled.div `
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  width: 0;
+  height: 0;
+
+  border-bottom: 48px solid transparent;
+  border-right: 48px solid ${(props) => props.theme.colours.statusInfo.main};
+`;
+const SelectIconContainer = styled.div `
+  position: absolute;
+  left: 0;
+  right: 0;
+
+  width: 48px;
+  height: 48px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding-left: 16px;
+  padding-bottom: 16px;
+
+  color: ${(props) => props.theme.colours.statusInfo.contrast};
+`;
+const InlineCard = ({ children, size, value, onClick, gestureLeftIcon, gestureLeftVariant, onGestureLeft, }) => {
+    const { value: selectedValues, onToggle } = useContext(InlineCardSelectionContext);
+    const isSelectable = !!onToggle;
+    const isSelected = selectedValues?.length && value && selectedValues.includes(value);
     const theme = useTheme();
     const x = useMotionValue(0);
     const [ref, bounds] = useMeasure();
@@ -90,9 +123,20 @@ const InlineCard = ({ children, size, onClick, gestureLeftIcon, gestureLeftVaria
             onGestureLeft();
         }
     };
+    const handleClick = (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+        if (onToggle && value) {
+            onToggle(value);
+        }
+    };
     return (React.createElement(CardWrapper, { size: size },
         React.createElement(CardActionBackground, { style: { opacity, backgroundColor: gestureLeftTheme.main } }, gestureLeftIcon && (React.createElement(FontAwesomeIcon, { style: { fontSize: '20px', color: gestureLeftTheme.contrast }, icon: gestureLeftIcon }))),
-        React.createElement(CardOuter, { drag: onGestureLeft ? 'x' : undefined, onDragEnd: handleDragEnd, ref: ref, style: { x }, animate: { x: gestureLeftActivated ? -bounds.width : undefined, opacity: gestureLeftActivated ? 0 : undefined }, dragConstraints: { left: 0, right: 0 }, usePointer: !!onClick, onClick: onClick }, children)));
+        React.createElement(CardOuter, { drag: onGestureLeft ? 'x' : undefined, onDragEnd: handleDragEnd, ref: ref, style: { x }, animate: { x: gestureLeftActivated ? -bounds.width : undefined, opacity: gestureLeftActivated ? 0 : undefined }, dragConstraints: { left: 0, right: 0 }, usePointer: !!onClick || isSelectable, onClick: handleClick }, children),
+        isSelectable && isSelected ? (React.createElement(SelectChecked, null,
+            React.createElement(SelectIconContainer, null,
+                React.createElement(FontAwesomeIcon, { icon: faCheck })))) : null));
 };
 InlineCard.Media = InlineCardMedia;
 InlineCard.Content = InlineCardContent;

package/build/components/InlineCard/InlineCard.stories.d.ts

@@ -2,5 +2,6 @@
 import { Meta } from '@storybook/react/types-6-0';
 export declare const Standard: () => JSX.Element;
 export declare const WithDrag: () => JSX.Element;
+export declare const WithSelection: () => JSX.Element;
 declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
 export default _default;

package/build/components/InlineCard/InlineCard.stories.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { faCheckCircle, faExclamationTriangle, faInfoCircle, faTimes } from '@fortawesome/free-solid-svg-icons';
-import { Badge, InlineCard, InlineCardGroup } from '../..';
+import { Badge, FocusLayout, Form, InlineCard, InlineCardGroup } from '../..';
+import InlineCardSelection from './InlineCardSelection.component';
 export const Standard = () => (React.createElement(InlineCardGroup, null,
     React.createElement(InlineCard, null,
         React.createElement(InlineCard.Content, null, "Some content")),
@@ -14,7 +15,7 @@ export const Standard = () => (React.createElement(InlineCardGroup, null,
         React.createElement(InlineCard.Content, null, "Clickable card"),
         React.createElement(InlineCard.Meta, null,
             React.createElement(Badge, { variant: 'info' }, "Clickable")))));
-export const WithDrag = () => (React.createElement("div", { style: { maxWidth: '400px' } },
+export const WithDrag = () => (React.createElement(FocusLayout, null,
     React.createElement(InlineCardGroup, null,
         React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faCheckCircle, gestureLeftVariant: 'success' },
             React.createElement(InlineCard.Content, null, "A success gesture")),
@@ -24,6 +25,27 @@ export const WithDrag = () => (React.createElement("div", { style: { maxWidth: '
             React.createElement(InlineCard.Content, null, "A warning gesture")),
         React.createElement(InlineCard, { onGestureLeft: () => console.log('Gesture left triggered'), gestureLeftIcon: faTimes, gestureLeftVariant: 'danger' },
             React.createElement(InlineCard.Content, null, "A danger gesture")))));
+export const WithSelection = () => {
+    const [value, setValue] = useState({ animals: ['lama'] });
+    return (React.createElement(FocusLayout, null,
+        React.createElement(Form, { value: value, onChange: setValue },
+            React.createElement(InlineCardSelection, { name: 'animals' },
+                React.createElement(InlineCardGroup, null,
+                    React.createElement(InlineCard, { value: 'camel' },
+                        React.createElement(InlineCard.Media, null,
+                            React.createElement("img", { src: 'http://3.bp.blogspot.com/-m2w1bFhTLMs/Uyh0xlVCluI/AAAAAAAACjw/G4IhU8b0RhY/w1200-h630-p-k-nu/368692.jpg' })),
+                        React.createElement(InlineCard.Content, null, "A cranky camel")),
+                    React.createElement(InlineCard, { value: 'eagle' },
+                        React.createElement(InlineCard.Media, null,
+                            React.createElement("img", { src: 'https://www.hakaimagazine.com/wp-content/uploads/header-bald-eagle-nests.jpg' })),
+                        React.createElement(InlineCard.Content, null, "A eager eagle")),
+                    React.createElement(InlineCard, { value: 'lama' },
+                        React.createElement(InlineCard.Media, null,
+                            React.createElement("img", { src: 'https://external-preview.redd.it/3KAYF01HBUX-QKwcpo89kHPzScRoZPXZN7o02JepX8E.jpg?auto=webp&s=08bbddec975a8af76de43a33001604099fb0168d' })),
+                        React.createElement(InlineCard.Content, null, "A lazy lama")),
+                    React.createElement(InlineCard, { value: 'iguana' },
+                        React.createElement(InlineCard.Content, null, "An invisible iguana")))))));
+};
 export default {
     title: 'Components/InlineCard',
     component: InlineCard,

package/build/components/InlineCard/InlineCardSelection.component.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface InlineCardSelectionProps {
+    children: React.ReactNode;
+    name: string;
+    value?: string[];
+    onChange?: (value: string[]) => void;
+}
+declare const InlineCardSelection: ({ children, name, value: propsValue, onChange: propsOnChange, }: InlineCardSelectionProps) => JSX.Element;
+export default InlineCardSelection;

package/build/components/InlineCard/InlineCardSelection.component.js

@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react';
+import useFormNode from '../Form/useFormNode.hook';
+import InlineCardSelectionContext from './_InlineCardSelection.context';
+const InlineCardSelection = ({ children, name, value: propsValue, onChange: propsOnChange, }) => {
+    const { value: contextValue, onChange: contextOnChange } = useFormNode(name);
+    const value = contextValue || propsValue || [];
+    const wrappedOnChange = useCallback((val) => {
+        if (propsOnChange) {
+            propsOnChange(val);
+        }
+        if (contextOnChange) {
+            contextOnChange(val);
+        }
+    }, [propsOnChange, contextOnChange]);
+    const handleToggle = (_value) => {
+        if (!value) {
+            return;
+        }
+        if (value.includes(_value)) {
+            wrappedOnChange(value.filter((val) => val !== _value));
+        }
+        else {
+            wrappedOnChange([...value, _value]);
+        }
+    };
+    return (React.createElement(InlineCardSelectionContext.Provider, { value: { value, onToggle: handleToggle } }, children));
+};
+export default InlineCardSelection;

package/build/components/InlineCard/_InlineCardSelection.context.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type CardSize = 'fill' | 'xs' | 'sm' | 'md' | 'lg';
+interface InlineCardSelectionContextProps {
+    value?: string[];
+    onToggle?: (value: string) => void;
+}
+declare const InlineCardSelectionContext: import("react").Context<InlineCardSelectionContextProps>;
+export default InlineCardSelectionContext;

package/build/components/InlineCard/_InlineCardSelection.context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const InlineCardSelectionContext = createContext({
+    value: undefined,
+    onToggle: undefined,
+});
+export default InlineCardSelectionContext;

package/build/index.d.ts

@@ -14,6 +14,7 @@ export { default as Notifications } from './components/Notifications/Notificatio
 export { default as ImageUpload } from './components/ImageUpload/ImageUpload.component';
 export { default as InlineCard } from './components/InlineCard/InlineCard.component';
 export { default as InlineCardGroup } from './components/InlineCard/InlineCardGroup.component';
+export { default as InlineCardSelection } from './components/InlineCard/InlineCardSelection.component';
 export { default as Input } from './components/Input/Input.component';
 export { default as Heading } from './components/Heading/Heading.component';
 export { default as LiveInput } from './components/LiveInput/LiveInput.component';

package/build/index.js

@@ -14,6 +14,7 @@ export { default as Notifications } from './components/Notifications/Notificatio
 export { default as ImageUpload } from './components/ImageUpload/ImageUpload.component';
 export { default as InlineCard } from './components/InlineCard/InlineCard.component';
 export { default as InlineCardGroup } from './components/InlineCard/InlineCardGroup.component';
+export { default as InlineCardSelection } from './components/InlineCard/InlineCardSelection.component';
 export { default as Input } from './components/Input/Input.component';
 export { default as Heading } from './components/Heading/Heading.component';
 export { default as LiveInput } from './components/LiveInput/LiveInput.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dtdot/lego",
-  "version": "0.17.9",
+  "version": "0.17.10",
   "description": "Some reusable components for building my applications",
   "main": "build/index.js",
   "scripts": {