diff --git a/src/assets/component-icons/content-switcher.svg b/src/assets/component-icons/content-switcher.svg new file mode 100644 index 000000000..7c88f505b --- /dev/null +++ b/src/assets/component-icons/content-switcher.svg @@ -0,0 +1,13 @@ + + + + + Right + + + + + Left + + + diff --git a/src/fragment-components/a-content-switcher.tsx b/src/fragment-components/a-content-switcher.tsx new file mode 100644 index 000000000..8ca2ab458 --- /dev/null +++ b/src/fragment-components/a-content-switcher.tsx @@ -0,0 +1,227 @@ +import React from 'react'; +import { + Checkbox, + TextInput, + Dropdown, + ContentSwitcher, + Switch +} from 'carbon-components-react'; +import { AComponent, ComponentInfo } from './a-component'; +import { DraggableTileList } from '../components'; +import image from './../assets/component-icons/content-switcher.svg'; +import { + angularClassNamesFromComponentObj, + nameStringToVariableString, + reactClassNamesFromComponentObj +} from '../utils/fragment-tools'; +import { css, cx } from 'emotion'; + +const preventCheckEvent = css` + pointer-events: none; +`; + +export const AContentSwitcherSettingsUI = ({ selectedComponent, setComponent }: any) => { + const sizeItems = [ + { id: 'sm', text: 'Small' }, + { id: 'md', text: 'Medium' }, + { id: 'lg', text: 'Large' } + ]; + + const selectedItems = selectedComponent.items.map((step: any, index: number) => ({ id: index, text: step.text })); + + const updateItem = (key: string, value: any, index: number) => { + const step = { + ...selectedComponent.items[index], + [key]: value + }; + + setComponent({ + ...selectedComponent, + items: [ + ...selectedComponent.items.slice(0, index), + step, + ...selectedComponent.items.slice(index + 1) + ] + }); + }; + + const updateStepList = (newList: any[]) => { + setComponent({ + ...selectedComponent, + items: newList + }); + }; + + const template = (item: any, index: number) => { + return <> + { + updateItem('text', event.currentTarget.value, index); + }} /> + { + updateItem('disabled', checked, index); + }} /> + ; + }; + + return <> + item.id === selectedComponent.size)} + itemToString={(item: any) => (item ? item.text : '')} + onChange={(event: any) => setComponent({ + ...selectedComponent, + size: event.selectedItem.id + })} /> + item.id === selectedComponent.selectedIndex)} + itemToString={(item: any) => (item ? item.text : '')} + onChange={(event: any) => setComponent({ + ...selectedComponent, + selectedIndex: event.selectedItem.id + })} /> + + ; +}; + +export const AContentSwitcherCodeUI = ({ selectedComponent, setComponent }: any) => { + setComponent({ + ...selectedComponent, + codeContext: { + ...selectedComponent.codeContext, + name: event.currentTarget.value + } + }); + }} +/>; + +export const AContentSwitcher = ({ + componentObj, + ...rest +}: any) => { + return ( + + cc.id).join(' '))}> + { + componentObj.items.map((step: any, index: number) => + ) + } + + + ); +}; + +export const componentInfo: ComponentInfo = { + component: AContentSwitcher, + settingsUI: AContentSwitcherSettingsUI, + codeUI: AContentSwitcherCodeUI, + keywords: ['content', 'switcher'], + name: 'Content switcher', + type: 'content-switcher', + defaultComponentObj: { + type: 'content-switcher', + size: 'sm', + selectedIndex: 0, + items: [ + { + name: 'first', + text: 'First section', + disabled: false, + type: 'switch-item' + }, + { + name: 'second', + text: 'Second section', + disabled: false, + type: 'switch-item' + }, + { + name: 'third', + text: 'Third section', + disabled: false, + type: 'switch-item' + } + ] + }, + image, + codeExport: { + angular: { + inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Size = "${json.size}";`, + outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}Selected = new EventEmitter();`, + imports: ['ContentSwitcherModule'], + code: ({ json }) => { + return ` + ${json.items.map((step: any, index: number) => `` + ).join('\n')} + `; + } + }, + react: { + imports: ['ContentSwitcher', 'Switch'], + code: ({ json }) => { + return ` handleInputChange({ + target: { + name: "${nameStringToVariableString(json.codeContext?.name)}", + value: selectedItem.index + } + })}> + ${json.items.map((step: any) => `` + ).join('\n')} + `; + } + } + } +}; diff --git a/src/fragment-components/index.ts b/src/fragment-components/index.ts index 6ef7cffca..8e373a6ac 100644 --- a/src/fragment-components/index.ts +++ b/src/fragment-components/index.ts @@ -7,6 +7,7 @@ import * as checkbox from './a-checkbox'; import * as codeSnippet from './a-code-snippet'; import * as column from './a-column'; import * as combobox from './a-combobox'; +import * as contentSwitcher from './a-content-switcher'; import * as dropdown from './a-dropdown'; import * as fragment from './a-fragment'; import * as grid from './a-grid'; @@ -42,6 +43,7 @@ export { ACodeSnippet, ACodeSnippetSettingsUI, ACodeSnippetCodeUI } from './a-co export { ACheckbox, ACheckboxSettingsUI, ACheckboxCodeUI } from './a-checkbox'; export { AColumn, AColumnSettingsUI } from './a-column'; export { AComboBox, AComboBoxSettingsUI, AComboBoxCodeUI } from './a-combobox'; +export { AContentSwitcher, AContentSwitcherSettingsUI, AContentSwitcherCodeUI } from './a-content-switcher'; export { ADropdown, ADropdownSettingsUI, ADropdownCodeUI } from './a-dropdown'; export * from './a-component'; export { AFragment, AFragmentSettingsUI, AFragmentCodeUI } from './a-fragment'; @@ -79,6 +81,7 @@ export const allComponents = { checkbox, codeSnippet, combobox, + contentSwitcher, column, dropdown, fragment, diff --git a/src/ui-fragment/src/components/ui-content-switcher.tsx b/src/ui-fragment/src/components/ui-content-switcher.tsx new file mode 100644 index 000000000..88d53a86a --- /dev/null +++ b/src/ui-fragment/src/components/ui-content-switcher.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { ContentSwitcher, Switch } from 'carbon-components-react'; +import { CssClasses } from '../types'; + +export interface ContentSwitcherState { + type: string; + items: []; + size: []; + selectedIndex: number; + cssClasses?: CssClasses[]; +} + +export const UIContentSwitcher = ({ state }: { + state: ContentSwitcherState; + setState: (state: any) => void; + setGlobalState: (state: any) => void; +}) => { + if (state.type !== 'content-switcher') { + // eslint-disable-next-line react/jsx-no-useless-fragment + return <>; + } + + return cc.id).join(' ')}> + { + state.items.map((step: any, index: number) => ) + } + ; +}; diff --git a/src/ui-fragment/src/utils.tsx b/src/ui-fragment/src/utils.tsx index 69ad8716e..612d139d5 100644 --- a/src/ui-fragment/src/utils.tsx +++ b/src/ui-fragment/src/utils.tsx @@ -9,6 +9,7 @@ import { UIClickableTile } from './components/ui-clickable-tile'; import { UICodeSnippet } from './components/ui-code-snippet'; import { UIColumn } from './components/ui-column'; import { UIComboBox } from './components/ui-combobox'; +import { UIContentSwitcher } from './components/ui-content-switcher'; import { UIDropdown } from './components/ui-dropdown'; import { UIExpandableTile } from './components/ui-expandable-tile'; import { UIGrid } from './components/ui-grid'; @@ -138,6 +139,9 @@ export const renderComponents = (state: any, setState: (state: any) => void, set case 'combobox': return ; + case 'content-switcher': + return ; + case 'dropdown': return ;