groundfloor-react-ui 1.0.0

package/components/Inputs/CheckBoxEditableInput.js

@@ -0,0 +1,352 @@
+import React, { useRef} from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import defaultThemeColor from '../../constants/defaultThemeColor';
+import tick from '../../assets/icons/checkmark.svg';
+import editIcon from '../../assets/icons/edit-icon.svg';
+import { Icon } from "../Icon";
+import { TextInput, CheckBoxInput } from '../..';
+
+const CheckBox = styled.input.attrs({ type: "checkbox" })`
+    border: none;
+    margin: 0;
+    margin-top: -4px;
+    width: 10px;
+    height: 10px;
+    display: inline-block;
+    cursor:pointer;
+    visibility: hidden;
+    
+    &:focus {
+        border: 1.5px solid ${({ theme }) => theme.variant['primary-1']};
+        outline: none;
+    }
+    
+    &:after {
+        background-color: ${({theme})=>theme.bgColor};
+        border: 1.5px solid ${({ theme }) => theme.variant['primary-1']};
+        border-radius: 2px;
+        content: " ";
+        display: inline-block;
+        visibility: visible;
+        width: inherit;
+        height: inherit;
+    }
+    &:checked:before {
+        content: '';
+        color: ${({theme})=>theme.bgColor};
+    }
+    &:checked:after {
+        background-image: url(${tick});
+        background-repeat: no-repeat;
+        background-position: center;
+        width: 10px;
+        height: 10px;
+        color: ${({theme})=>theme.bgColor};
+        background-color: ${({ theme, variant }) => theme.variant[variant]};
+        border: 1.5px solid ${({ theme, variant }) => theme.variant[variant]};
+        border-radius: 2px solid ${({ theme, variant }) => theme.variant['primary-1']};
+        text-align: center;
+    }
+    
+`;
+
+CheckBox.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+const Label = styled.label`
+	display: block;
+	margin-bottom: ${({ labelInline }) => !labelInline ? '27px' : ''};
+	margin-right: ${({ labelInline }) => labelInline ? '26px' : ''};
+    color: ${({ theme }) => theme.variant['neutral-1']};
+`;
+Label.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+const OptionText = styled.input`
+    background-color: ${({theme})=>theme.bgColor};
+    border: none;
+    outline: none;
+    height: inherit;
+    width: inherit;
+    color: ${defaultThemeColor.textColor};
+    font-size: 14px;
+    line-height: 16px;
+	margin-left: 12px;
+    display: none;
+          
+    &:focus-within {
+		border: none;
+        outline: none;
+    }
+`;
+
+OptionText.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+const WrapperDiv = styled.label`
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-left:11px;
+    padding-right:11px;
+    align-items: baseline;
+    display: flex;
+    gap: 0;
+    width: 100%;
+`;
+
+const OutterDiv = styled.div`
+    display: flex;
+    gap: 0;
+    background: ${({ theme }) => theme.bgColor};
+    border: 1px solid ${({ theme }) => theme.variant['neutral-4']};;
+    border-radius: 6px;
+    cursor: pointer;
+    margin-bottom: 13px;
+    width: inherit;
+    max-width: 444px;
+`;
+
+OutterDiv.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+WrapperDiv.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+const ParentDiv = styled.div`
+    display: inline-flex;
+    width: 100%;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-content: flex-start;;
+    justify-content: center;
+`
+
+const IconDiv = styled.span`
+    cursor: pointer;
+    margin-left: auto;
+    display: flex;
+    justify-content: center;
+`;
+
+const TextDiv = styled.div`
+    display: flex;
+    align-items: center;
+    width: inherit;
+`;
+
+const OtherDiv = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: calc(100% - 30px) !important;
+`;
+
+const OptionSpan = styled.span`
+    padding-right: 6px;
+    margin-left: 14px;
+    font-size: 14px;
+    line-height: 17px;
+`;
+
+
+const CheckBoxEditableInput = ({ theme, label, previewMode, previewModeHeader, options, setOptions, other, setOther, otherValue, setOtherValue, variant, ...props }) => {
+    const myRefs = useRef([]);
+    const mySpanRefs = useRef([]);
+    let newOptions = [];
+
+    const changeHandler = (i) => {
+        console.log("changeHandler");
+        myRefs.current[i].disabled = false;
+        mySpanRefs.current[i].style.display = 'none';
+        myRefs.current[i].style.display = 'block';
+        myRefs.current[i].focus();
+    };
+
+    const changeValue = (e, i) => {
+        newOptions = [...options]
+        newOptions[i].label = e.target.value;
+    }
+
+    const saveValue = (i) => {
+        setOptions(newOptions);
+        myRefs.current[i].disabled = true;
+        mySpanRefs.current[i].style.display = 'inline';
+        myRefs.current[i].style.display = 'none';
+    }
+
+    const saveLabel = (e, i) => {
+        if (e.key === "Enter") {
+            saveValue(i);
+        }
+    }
+
+
+    const deleteLabel = (i) => {
+        setOptions(prevState => {
+            const items = [...prevState];
+            items.splice(i, 1);
+            return items;
+        });
+    }
+
+    return (
+        <div {...props}>
+            {label.length>0 && <Label {...props} >
+                {label}
+            </Label>}
+            <ParentDiv {...props}>
+                {options?.map((item, i) => {
+                    return <OutterDiv key={i} >
+                        <WrapperDiv
+                            key={Math.random() * 101 | 0}
+                            {...props}>
+                            <CheckBox variant={variant} disabled={true}
+                                {...props} />
+                            <TextDiv>
+                                <OptionText
+                                    ref={(el) => (myRefs.current[i] = el)}
+                                    disabled={true}
+                                    onChange={(e) => changeValue(e, i)}
+                                    onBlur={() => saveValue(i)}
+                                    onKeyPress={(e) => saveLabel(e, i)}
+                                    defaultValue={item.label} />
+                                <OptionSpan>
+                                    <span
+                                        style={{paddingRight:'4px'}}
+                                        ref={(el) => (mySpanRefs.current[i] = el)}>{item.label}
+                                    </span>
+                                    <img key={Math.random() * 101 | 0}
+                                        style={{ cursor: 'pointer', marginLeft: '10px' }}
+                                        onClick={() => changeHandler(i)}
+                                        src={editIcon}
+                                        alt="Edit" />
+                                </OptionSpan>
+                            </TextDiv>
+                            <IconDiv key={Math.random() * 101 | 0} 
+                                onClick={() => deleteLabel(i)}>
+                                <Icon icon='cross-icon'
+                                    size={12}
+                                    color={theme.neutral['neutral-2']} />
+                            </IconDiv>
+                        </WrapperDiv>
+                    </OutterDiv>
+                })}
+
+                {other &&
+                    <OutterDiv>
+                        <ParentDiv>
+                            <WrapperDiv style={{ paddingTop: 0 }}>
+                                <CheckBox style={{ marginTop: '-52px' }} disabled={true} />
+                                <OtherDiv>
+                                    <div style={{ display: 'flex', alignItems: 'center', width: "100%" }}>
+                                        <span style={{
+                                            paddingTop: '10px',
+                                            marginLeft: '14px',
+                                            fontSize: '14px',
+                                            lineHeight: '16px',
+                                            color: '#6B747F'
+                                        }}>
+                                            Others
+                                        </span>
+                                        <IconDiv style={{ marginTop: 0, marginRight:'3px' }}
+                                            key={Math.random() * 101 | 0}
+                                            onClick={() => setOther(false)}>
+                                            <Icon icon='cross-icon'
+                                                size={12}
+                                                color={theme.neutral['neutral-2']} />
+                                        </IconDiv>
+                                    </div>
+                                    <div style={{
+                                        marginTop: '10px', marginLeft: '8px', width: 'inherit'
+                                    }}>
+                                        <TextInput
+                                            placeholder="Type Something..."
+                                            value={otherValue}
+                                            onChange={(e) => setOtherValue(e.target.value)} />
+                                    </div>
+                                </OtherDiv>
+                            </WrapperDiv>
+                        </ParentDiv>
+                    </OutterDiv>}
+            </ParentDiv>
+            {previewMode && 
+                <CheckBoxInput
+                variant='primary-1'
+                label={previewModeHeader}
+                options={options}
+                setOptions={setOptions}
+                inline={false} />
+            }
+        </div>
+    )
+}
+
+CheckBoxEditableInput.propTypes = {
+    /**
+     *	Theme props
+     */
+    theme: PropTypes.object,
+    /**
+     * Type of color on background of checkbox
+     */
+    variant: PropTypes.string,
+    /**
+     *	Label of Checkbox editor
+     */
+    label: PropTypes.string,
+    /**
+     *	Preview mode enable or not
+     */
+    previewMode: PropTypes.bool,
+    /**
+     *	Preview mode header
+     */
+    previewModeHeader: PropTypes.string,
+    /**
+     *	Other Value in the textbox
+     */
+    otherValue: PropTypes.string,
+    /**
+     *	Other Value in the setter
+     */
+    setOtherValue: PropTypes.func,
+    /**
+     *	Other Value should be showed or not
+     */
+    other: PropTypes.bool,
+    /**
+     *	Other Value should be showed or not setter
+     */
+    setOther: PropTypes.func,
+    /**
+     *	Array that will be rendered for checkbox options
+     */
+    options: PropTypes.array,
+    /**
+     *	CheckBox label changeHandler
+     */
+    setOptions: PropTypes.func,
+
+}
+
+CheckBoxEditableInput.defaultProps = {
+    theme: defaultThemeColor,
+    variant: 'primary-1',
+    label: '',
+    previewMode:true,
+    previewModeHeader:'',
+    otherValue:'',
+    setOtherValue:()=>{},
+    other: false,
+    setOther: () => {},
+    options:[],
+    setOptions: () => {},
+}
+
+export default CheckBoxEditableInput;

package/components/Inputs/CheckBoxInput.js

@@ -0,0 +1,195 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+import defaultStyles from '../constants/defaultStyle';
+import getDefaultStyles from '../constants/utils';
+import { Label } from '../Label';
+import tick from '../../assets/icons/checkmark.svg';
+
+
+const CheckBoxOuter = styled.div`
+    //Set the styles from the default styles object
+    ${({ theme, defaultCheckBoxOuterStyle }) => {
+        return getDefaultStyles(theme, defaultCheckBoxOuterStyle);
+    }}
+    
+    border: 2px solid ${({ checkedCheckBoxColor, defaultBorderColor, checked }) => checked ? checkedCheckBoxColor : defaultBorderColor};
+    
+    // custom styles
+    ${({ checkBoxOuterStyle }) => checkBoxOuterStyle}
+`;
+
+const CheckBoxInner = styled.div`
+    //Set the styles from the default styles object
+    ${({ theme, defaultCheckBoxInnerStyle }) => {
+        return getDefaultStyles(theme, defaultCheckBoxInnerStyle);
+    }}
+    
+    background-image: url(${({ signCheck }) => signCheck});
+    background-color: ${({ checked, checkedCheckBoxColor }) => checked ? checkedCheckBoxColor : defaultThemeColor.bgColor};
+    border: 2px solid ${({ checkedCheckBoxColor, defaultBorderColor, checked }) => checked ? checkedCheckBoxColor : defaultBorderColor};
+    
+    // custom styles
+    ${({ checkBoxInnerStyle }) => checkBoxInnerStyle}
+    
+`;
+CheckBoxInner.defaultProps = {
+    themeColor: defaultThemeColor,
+    signCheck: `${tick}`
+}
+
+const OptionText = styled.span`
+
+    //Set the styles from the default styles object
+    ${({ theme, type }) => {
+        return getDefaultStyles(theme, type);
+    }}
+    
+    color: ${({ checked, defaultTextColor, checkedTextColor }) => checked ? checkedTextColor : defaultTextColor};
+    
+    margin-right: ${({ inline }) => inline ? '30px' : '0px'};
+    
+    // custom styles
+    ${({ optionTextStyle }) => optionTextStyle}
+`;
+
+const WrapperDiv = styled.label`
+    width: fit-content;
+    margin-bottom: ${({ inline }) => !inline ? '14px !important' : ''};
+    cursor: pointer;
+    align-items: center;
+    display: flex;
+    gap: 10px;
+
+`
+
+const ParentDiv = styled.div`
+    flex-direction: ${({ inline }) => inline ? "row" : "column"};
+    width: ${({ inline }) => !inline ? "auto" : "initial"};
+`
+
+
+export const CheckBoxInput = ({ checkBoxOuterStyle, checkBoxInnerStyle, optionTextStyle, defaultBorderColor, defaultTextColor, checkedTextColor, checkedCheckBoxColor, labelStyle, label, options, setOptions, inline, wrapperStyle, ...props }) => {
+    const checkBox = (item, i) => {
+        let newOptions = [...options]
+        newOptions[i].checked = !item.checked;
+        setOptions(newOptions);
+    }
+
+    const defaultStyleForWrapper = {
+        display: 'flex',
+        flexDirection: 'column',
+        flexWrap: 'wrap'
+    }
+    const returnedTarget = Object.assign(defaultStyleForWrapper, wrapperStyle);
+
+
+    return (
+        <div style={returnedTarget}  {...props}>
+            <Label
+                themeColor={defaultThemeColor}
+                customStyles={labelStyle}
+                type={'check-label'}
+                text={label}
+                {...props} />
+            <ParentDiv style={{ display: 'flex', flexWrap: 'wrap' }} inline={inline} {...props}>
+                {options?.map((item, i) => {
+                    return <WrapperDiv inline={inline} key={`${item.name}-${i}`}
+                        onClick={() => { checkBox(item, i) }}  {...props}>
+                        {item.checked ?
+                            <CheckBoxInner
+                                theme={defaultStyles}
+                                defaultCheckBoxInnerStyle={'checkBox-inner'}
+                                checkBoxInnerStyle={{ ...checkBoxInnerStyle, cursor: item?.disabled ? 'not-allowed ' : ' pointer', borderColor: item?.disabled && item?.disabledColor }}
+                                defaultBorderColor={defaultBorderColor}
+                                checkedCheckBoxColor={checkedCheckBoxColor}
+                                checked={!item?.disabled && item.checked} {...props} />
+                            : <CheckBoxOuter
+                                theme={defaultStyles}
+                                defaultCheckBoxOuterStyle={'checkBox-outer'}
+                                checkBoxOuterStyle={{ ...checkBoxOuterStyle, cursor: item?.disabled ? 'not-allowed ' : ' pointer', borderColor: item?.disabledColor }}
+                                defaultBorderColor={defaultBorderColor}
+                                {...props} />}
+                        <OptionText
+                            inline={inline}
+                            optionTextStyle={{ ...optionTextStyle, cursor: item?.disabled ? 'not-allowed ' : ' pointer', color: item?.disabledColor }}
+                            checked={item.checked}
+                            defaultTextColor={defaultTextColor}
+                            checkedTextColor={checkedTextColor}>{item.label}</OptionText>
+                    </WrapperDiv>
+                })}
+            </ParentDiv>
+        </div>
+    )
+}
+
+CheckBoxInput.propTypes = {
+    /**
+     *	Style Custom for whole Checkbox Block 
+     */
+    wrapperStyle: PropTypes.object,
+    /**
+     *	Label of CheckBox
+     */
+    label: PropTypes.string,
+    /**
+     *	Label style of CheckBox
+     */
+    labelStyle: PropTypes.object,
+    /**
+     *	Outer CheckBox style
+     */
+    checkBoxOuterStyle: PropTypes.object,
+    /**
+     *	Checked CheckBox style
+     */
+    checkBoxInnerStyle: PropTypes.object,
+    /**
+     *	Text Style
+     */
+    optionTextStyle: PropTypes.object,
+    /**
+     *	Default option text color when not selected
+     */
+    defaultTextColor: PropTypes.string,
+    /**
+     *	checked option text color when selected
+     */
+    checkedTextColor: PropTypes.string,
+    /**
+     *	Default border color of checkboxes when not selected
+     */
+    defaultBorderColor: PropTypes.string,
+    /**
+     *	Checked border color of checkboxes when selected
+     */
+    checkedCheckBoxColor: PropTypes.string,
+    /**
+     *	Should checkboxes be inline?
+     */
+    inline: PropTypes.bool,
+    /**
+     *	Array that will be rendered for checkbox options
+     */
+    options: PropTypes.array,
+    /**
+     *	CheckBox value changeHandler
+     */
+    setOptions: PropTypes.func,
+}
+
+CheckBoxInput.defaultProps = {
+    label: '',
+    inline: false,
+    options: [],
+    setOptions: () => { },
+    labelStyle: {},
+    checkBoxOuterStyle: {},
+    checkBoxInnerStyle: {},
+    defaultTextColor: `${defaultThemeColor.neutral['neutral-2']}`,
+    checkedTextColor: `${defaultThemeColor.neutral['neutral-1']}`,
+    defaultBorderColor: '#D4D7E3',
+    checkedCheckBoxColor: `${defaultThemeColor.primary['primary-1']}`,
+}
+

package/components/Inputs/CheckBoxInputMS.js

@@ -0,0 +1,160 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { useTheme } from 'styled-components';
+import defaultThemeColor from '../../constants/defaultThemeColor';
+import tick from '../../assets/icons/checkmark.svg';
+
+const border = `#D4D7E3`;
+
+const CheckBox = styled.input.attrs({ type: "checkbox" })`
+    width: 15px;
+    height: 15px;
+    cursor:pointer;
+    visibility: hidden;
+    margin: 0;
+
+    &:focus {
+        border: 2px solid ${({ theme, variant }) => theme.variant[variant]};
+        outline: none;
+    }
+
+    &:after {
+        background-color: ${border};
+        border-radius: 3px;
+        content: " ";
+        display: inline-block;
+        visibility: visible;
+        width: inherit;
+        height: inherit;
+    }
+
+    &:checked:before {
+        content: '';
+        color: white;
+    }
+
+    &:checked:after {
+        background-image: url(${tick});
+        background-size: 8px 11px;
+        background-repeat: no-repeat;
+        background-position: center;
+        width: 15px;
+        height: 15px;
+        color: white;
+        background-color: ${({ theme, variant, color }) => color ? color : theme.variant[variant]};
+        border-radius: 3px;
+        text-align: center;
+    }
+`;
+
+const Label = styled.label`
+    display: block;
+    margin-bottom: ${({ labelInline }) => !labelInline ? '27px' : ''};
+    margin-right: ${({ labelInline }) => labelInline ? '26px' : ''};
+    color: ${({ theme }) => theme.variant['neutral-1']};
+`;
+// margin-right: ${({ inline }) => !inline ? '30px' : ''};
+const OptionText = styled.span`
+    background-color: transparent; 
+    color: ${defaultThemeColor.variant['primary-2']};
+    font-size: 14px;
+    margin-left: 10px;
+    margin-right: 0px;
+    ${CheckBox}:checked + && {
+        color: ${defaultThemeColor.variant['primary-2']};
+    }
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+`;
+
+const WrapperDiv = styled.label`
+    margin-bottom: ${({ inline }) => !inline ? '0px' : ''};
+    align-items: center;
+    display: flex;
+    line-height: 17.3px;
+`
+const ParentDiv = styled.div`
+    display: ${({ inline }) => !inline ? "block" : "inline-flex"};
+    width: auto;
+    padding: 8px 18.3px;
+`
+
+const CheckBoxInputMS = ({ label, options, variant, inline, myKey, color, ...props }) => {
+    return (
+        <div {...props}>
+            <ParentDiv inline={inline} {...props} >
+                {options?.map((item, i) => {
+                    return <WrapperDiv
+                        key={myKey.concat((Math.random() * 101 | 0).toString())}
+                        onClick={() => { item.checked = !item.checked }}
+                        inline={inline} {...props}
+                    >
+                        <CheckBox
+                            variant={variant}
+                            checked={item.checked}
+                            color={color}
+                            {...props}
+                        />
+                        <OptionText>{item.label}</OptionText>
+                    </WrapperDiv>
+                })}
+            </ParentDiv>
+        </div>
+    )
+}
+
+CheckBox.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+OptionText.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+Label.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+CheckBoxInputMS.propTypes = {
+    /**
+     * Type of color on background of checkbox
+     */
+    variant: PropTypes.string,
+    /**
+     * Label of Checkboxs
+     */
+    label: PropTypes.string,
+    /**
+     * Should checkboxes be inline?
+     */
+    inline: PropTypes.bool,
+    /**
+     * CheckBox Contents
+     */
+    options: PropTypes.array,
+    /**
+     * CheckBox Contents
+     */
+    onChange: PropTypes.func,
+    /**
+     * Custom color on background of checkbox if present override the variant
+     */
+    color: PropTypes.string,
+    /**
+     * Prefix to use for the key for the element when mapping
+     */
+    myKey: PropTypes.string,
+}
+
+CheckBoxInputMS.defaultProps = {
+    variant: 'primary-1',
+    label: '',
+    inline: false,
+    options: [],
+    onChange: undefined,
+    color: null,
+    myKey: null
+}
+
+export default CheckBoxInputMS;