slider component

src/sdk/src/fragment-components/a-component.tsx

@@ -53,6 +53,7 @@ export interface ComponentInfo {
 			inputs: (props: { json: any }) => string;
 			outputs: (props: { json: any }) => string;
 			imports: string[];
+			otherImports?: (props: {json: any }) => string;
 			isNotDirectExport?: boolean;
 			code: (props: {json: any; jsonToTemplate: (json: any, fragments: any[]) => string; fragments: any[]}) => string;
 		};

src/sdk/src/fragment-components/a-slider.tsx

@@ -0,0 +1,237 @@
+import React from 'react';
+import {
+	Slider,
+	TextInput,
+	NumberInput,
+	Checkbox
+} from 'carbon-components-react';
+import { css, cx } from 'emotion';
+import { AComponent, ComponentInfo } from './a-component';
+import image from './../assets/component-icons/slider.svg';
+import {
+	angularClassNamesFromComponentObj,
+	nameStringToVariableString,
+	reactClassNamesFromComponentObj
+} from '../tools';
+
+const preventCheckEventStyle = css`
+	pointer-events: none;
+`;
+
+export const ASliderSettingsUI = ({ selectedComponent, setComponent }: any) => {
+	return <>
+		<Checkbox
+			labelText='Disabled'
+			id='disable-label'
+			checked={selectedComponent.disabled}
+			onChange={(checked: boolean) => {
+				setComponent({
+					...selectedComponent,
+					disabled: checked
+				});
+			}} />
+
+		<Checkbox
+			labelText='Hide text input'
+			id='hide-text-input'
+			checked={selectedComponent.textInputIsHidden}
+			onChange={(checked: boolean) => {
+				setComponent({
+					...selectedComponent,
+					textInputIsHidden: checked
+				});
+			}} />
+
+		<Checkbox
+			labelText='Light'
+			id='light'
+			checked={selectedComponent.light}
+			onChange={(checked: boolean) => {
+				setComponent({
+					...selectedComponent,
+					light: checked
+				});
+			}} />
+
+		<TextInput
+			value={selectedComponent.labelText}
+			labelText='Slider label'
+			onChange={(event: any) => setComponent({
+				...selectedComponent,
+				labelText: event.currentTarget.value
+			})} />
+
+		<NumberInput
+			value={selectedComponent.min}
+			label='Min'
+			onChange={(event: any, data: any, value: any) => {
+                setComponent({
+                    ...selectedComponent,
+                    min: value ? value : data.value
+                });
+            }} />
+
+		<NumberInput
+			value={selectedComponent.max}
+			label='Max'
+			onChange={(event: any, data: any, value: any) => setComponent({
+				...selectedComponent,
+				max: value ? value : data.value
+			})} />
+
+		<NumberInput
+			value={selectedComponent.value}
+			label='Value'
+			onChange={(event: any, data: any, value: any) => setComponent({
+				...selectedComponent,
+				value: value ? value : data.value
+			})} />
+
+		<NumberInput
+			value={selectedComponent.step}
+			label='Step'
+			onChange={(event: any, data: any, value: any) => setComponent({
+				...selectedComponent,
+				step: value ? value : data.value
+			})} />
+
+		<NumberInput
+			value={selectedComponent.stepMultiplier}
+			label='Step multiplier'
+			onChange={(event: any, data: any, value: any) => setComponent({
+				...selectedComponent,
+				stepMultiplier: value ? value : data.value
+			})} />
+
+		<TextInput
+			value={selectedComponent.minLabel}
+			labelText='Min label'
+			onChange={(event: any) => setComponent({
+				...selectedComponent,
+				minLabel: event.currentTarget.value
+			})} />
+
+		<TextInput
+			value={selectedComponent.maxLabel}
+			labelText='Max label'
+			onChange={(event: any) => setComponent({
+				...selectedComponent,
+				maxLabel: event.currentTarget.value
+			})} />
+	</>;
+};
+
+export const ASliderCodeUI = ({ selectedComponent, setComponent }: any) => <TextInput
+	value={selectedComponent.codeContext?.name}
+	labelText='Input name'
+	onChange={(event: any) => {
+		setComponent({
+			...selectedComponent,
+			codeContext: {
+				...selectedComponent.codeContext,
+				name: event.currentTarget.value
+			}
+		});
+	}}
+/>;
+
+export const ASlider = ({
+	componentObj,
+	...rest
+}: any) => {
+	return (
+		<AComponent
+		componentObj={componentObj}
+		rejectDrop={true}
+		{...rest}>
+			<Slider
+			id={componentObj.id}
+			labelText={componentObj.labelText}
+			min={componentObj.min}
+			max={componentObj.max}
+			value={componentObj.value}
+			disabled={componentObj.disabled}
+			step={componentObj.step}
+			hideTextInput={componentObj.textInputIsHidden}
+			stepMultiplier={componentObj.stepMultiplier}
+			minLabel={componentObj.minLabel}
+			maxLabel={componentObj.maxLabel}
+			light={componentObj.light}
+			className={cx(preventCheckEventStyle, componentObj.cssClasses?.map((cc: any) => cc.id).join(' '))} />
+		</AComponent>
+	);
+};
+
+export const componentInfo: ComponentInfo = {
+	component: ASlider,
+	settingsUI: ASliderSettingsUI,
+	codeUI: ASliderCodeUI,
+	render: ({ componentObj, select, remove, selected }) => <ASlider
+		componentObj={componentObj}
+		select={select}
+		remove={remove}
+		selected={selected} />,
+	keywords: ['slider'],
+	name: 'Slider',
+	type: 'slider',
+	defaultComponentObj: {
+		type: 'slider',
+		labelText: 'Slider label',
+		min: 0,
+		max: 100
+	},
+	image,
+	codeExport: {
+		angular: {
+			inputs: ({ json }) => `@Input() ${nameStringToVariableString(json.codeContext?.name)}Label = "${json.labelText}";
+				@Input() ${nameStringToVariableString(json.codeContext?.name)}Disabled = ${json.disabled};
+				@Input() ${nameStringToVariableString(json.codeContext?.name)}Value = ${json.value};
+				@Input() ${nameStringToVariableString(json.codeContext?.name)}Min = ${json.min};
+				@Input() ${nameStringToVariableString(json.codeContext?.name)}Max = ${json.max};
+				@Input() ${nameStringToVariableString(json.codeContext?.name)}MinLabel = "${json.minLabel}";
+				@Input() ${nameStringToVariableString(json.codeContext?.name)}MaxLabel = "${json.maxLabel}";
+				@Input() ${nameStringToVariableString(json.codeContext?.name)}Step = ${json.step};
+				@Input() ${nameStringToVariableString(json.codeContext?.name)}StepMultiplier = ${json.stepMultiplier};
+				@Input() ${nameStringToVariableString(json.codeContext?.name)}Light = "${json.light ? 'light' : 'dark'}" `,
+			outputs: ({ json }) => `@Output() ${nameStringToVariableString(json.codeContext?.name)}ValueChange = new EventEmitter();`,
+			imports: ['SliderModule'],
+			otherImports: () => 'import { CommonModule } from "@angular/common"',
+			code: ({ json }) => {
+				return `<ibm-slider
+					[label]="${nameStringToVariableString(json.codeContext?.name)}Label"
+					[min]="${nameStringToVariableString(json.codeContext?.name)}Min"
+					[max]="${nameStringToVariableString(json.codeContext?.name)}Max"
+					[step]="${nameStringToVariableString(json.codeContext?.name)}Step"
+					[value]="${nameStringToVariableString(json.codeContext?.name)}Value"
+					[shiftMultiplier]="${nameStringToVariableString(json.codeContext?.name)}StepMultiplier"
+					[disabled]="${nameStringToVariableString(json.codeContext?.name)}Disabled"
+					(valueChange)="${nameStringToVariableString(json.codeContext?.name)}ValueChange.emit($event.value)">
+					<span minLabel>{{${nameStringToVariableString(json.codeContext?.name)}MinLabel}}</span>
+					<span maxLabel>{{${nameStringToVariableString(json.codeContext?.name)}MaxLabel}}</span>
+                    <input theme="${nameStringToVariableString(json.codeContext?.name)}Light === 'light' ? 'light' : 'dark'}" 
+                    ${angularClassNamesFromComponentObj(json)} />
+				</ibm-slider>`;
+			}
+		},
+		react: {
+			imports: ['Slider'],
+			code: ({ json }) => {
+				return `<Slider
+					labelText='${json.labelText}'
+					min={${json.min}}
+					max={${json.max}}
+					value={${json.value}}
+					step={${json.step}}
+					stepMultiplier={${json.stepMultiplier}}
+					${json.disabled ? `disabled={${json.disabled}}` : ''}
+					${json.textInputIsHidden ? `hideTextInput={${json.textInputIsHidden}}` : ''}
+					${json.minLabel ? `minLabel="${json.minLabel}"` : ''}
+					${json.maxLabel ? `maxLabel="${json.maxLabel}"` : ''}
+					${json.light ? `light={${json.light}}` : ''}
+					onChange={handleInputChange}
+					${reactClassNamesFromComponentObj(json)}>
+				</Slider>`;
+			}
+		}
+	}
+};

src/sdk/src/fragment-components/index.ts

@@ -25,6 +25,7 @@ import * as link from './a-link';
 import * as loading from './a-loading';
 import * as inlineLoading from './a-inline-loading';
 import * as overflowMenu from './a-overflow-menu';
+import * as slider from './a-slider';
 // Tiles
 import * as tile from './tiles/a-tile';
 import * as toggle from './a-toggle';
@@ -55,10 +56,11 @@ export { AInlineLoading, AInlineLoadingCodeUI, AInlineLoadingSettingsUI } from '
 export { ANumberInput, ANumberInputSettingsUI, ANumberInputCodeUI } from './a-numberinput';
 export { AProgressIndicator, AProgressIndicatorSettingsUI, AProgressIndicatorCodeUI } from './a-progress-indicator';
 export { ARow, ARowCodeUI, ARowSettingsUI } from './a-row';
-export { ASearchInput, ASearchInputSettingsUI, ASearchInputCodeUI } from './a-searchinput';
-export { ATag, ATagCodeUI, ATagSettingsUI } from './a-tag';
-export { AText, ATextCodeUI, ATextSettingsUI } from './a-text';
+export { ATag, ATagSettingsUI } from './a-tag';
+export { AText, ATextSettingsUI } from './a-text';
 export { ATextArea, ATextAreaSettingsUI, ATextAreaCodeUI } from './a-text-area';
+export { ASearchInput, ASearchInputSettingsUI, ASearchInputCodeUI } from './a-searchinput';
+export { ASlider, ASliderSettingsUI, ASliderCodeUI } from './a-slider';
 export { ATextInput, ATextInputSettingsUI, ATextInputCodeUI } from './a-text-input';
 export { AOverflowMenu, AOverflowMenuCodeUI, AOverflowMenuSettingsUI } from './a-overflow-menu';
 export { ARadio, ARadioSettingsUI, ARadioCodeUI } from './a-radio';
@@ -97,6 +99,7 @@ export const allComponents = {
 	progressIndicator,
 	row,
 	searchinput,
+	slider,
 	tag,
 	text,
 	textarea,

src/ui-fragment/src/components/ui-slider.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Slider } from 'carbon-components-react';
+import { CssClasses } from '../types';
+
+export interface SliderState {
+	type: string;
+	id: string;
+	cssClasses?: CssClasses[];
+	labelText: string;
+	min: number;
+	max: number;
+	disabled?: boolean;
+	step?: number;
+	textInputIsHidden?: boolean;
+	light?: boolean;
+	value: number;
+	stepMultiplier?: number;
+	minLabel?: string;
+	maxLabel?: string;
+	codeContext?: {
+		name: string;
+	};
+}
+
+export const UISlider = ({ state }: {
+	state: SliderState;
+	setState: (state: any) => void;
+	setGlobalState: (state: any) => void;
+}) => {
+	if (state.type !== 'slider') {
+		// eslint-disable-next-line react/jsx-no-useless-fragment
+		return <></>;
+	}
+
+	return <Slider
+		id={state.id}
+		labelText={state.labelText}
+		min={state.min}
+		max={state.max}
+		value={state.value}
+		disabled={state.disabled}
+		step={state.step}
+		hideTextInput={state.textInputIsHidden}
+		stepMultiplier={state.stepMultiplier}
+		minLabel={state.minLabel}
+		maxLabel={state.maxLabel}
+		light={state.light}
+		className={state.cssClasses?.map((cc: any) => cc.id).join(' ')} />;
+};

src/ui-fragment/src/utils.tsx

@@ -27,6 +27,7 @@ import { UIRow } from './components/ui-row';
 import { UISelectableTile } from './components/ui-selectable-tile';
 import { UISelectableTileGroup } from './components/ui-selectable-tile-group';
 import { UISearchInput } from './components/ui-search-input';
+import { UISlider } from './components/ui-slider';
 import { UITag } from './components/ui-tag';
 import { UIText } from './components/ui-text';
 import { UITextAreaInput } from './components/ui-text-area';
@@ -266,6 +267,9 @@ export const renderComponents = (
 		case 'search':
 			return <UISearchInput key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;
 
+		case 'slider':
+			return <UISlider key={state.id} state={state} setState={setState} setGlobalState={setGlobalState} />;
+
 		case 'tag':
 			return <UITag key={state.id} state={state} sendSignal={sendSignal} setState={setState} setGlobalState={setGlobalState} />;